12a78616df
Two-step cleanup of the no-unused-vars warning bucket :
1. Widened the rule's ignore patterns in eslint.config.js so the
`_`-prefix convention works uniformly across all four contexts
(function args, local vars, caught errors, destructured arrays).
The argsIgnorePattern was already `^_` ; added varsIgnorePattern,
caughtErrorsIgnorePattern, destructuredArrayIgnorePattern with
the same `^_` regex. Knocked 17 warnings out instantly because the
codebase had already adopted `_xxx` for unused locals and was
waiting on this config change.
2. Fixed the remaining 117 cases across 99 files by pattern :
* 26 catch-binding cases : `catch (e) {…}` → `catch {…}` (TS 4.0+
optional binding, ES2019). Cleaner than `catch (_e)` for the
dozen "swallow and toast" error handlers that don't read the
error.
* 58 unused imports removed (incl. one literal `electron`
contextBridge import that crept in from a phantom port-attempt).
* 28 destructure / assignment cases : prefixed with `_` where the
name documents the contract (test fixtures, hook return tuples
where one slot isn't used yet) ; deleted outright when the
assignment had no side effect and no documentary value.
* 3 function param cases : prefixed with `_`.
* 2 self-recursive `requestAnimationFrame` blocks that were dead
code (an interval-based alternative did the work) : deleted.
`tsc --noEmit` reports 0 errors after the changes. ESLint total
dropped from 1240 to 1108. Updated the baseline in
.github/workflows/ci.yml in the next commit.
Pattern decisions logged inline so future maintainers know that
`_`-prefix isn't slop — it's the documented, lint-aware way to mark
"intentionally unused" without having to remove the name.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
109 lines
3.6 KiB
TypeScript
109 lines
3.6 KiB
TypeScript
import { Palette } from 'lucide-react';
|
|
|
|
interface ThemeSwitcherProps {
|
|
currentTheme: string;
|
|
onThemeChange: (theme: string) => void;
|
|
}
|
|
|
|
const themes = [
|
|
{
|
|
id: 'bokuseki',
|
|
name: '墨跡 Bokuseki',
|
|
colors: ['var(--sumi-accent)', 'var(--sumi-accent-active)'],
|
|
description: 'Ink Traces — mizu cyan',
|
|
gradient: 'linear-gradient(135deg, var(--sumi-accent) 0%, var(--sumi-accent-active) 100%)',
|
|
},
|
|
{
|
|
id: 'kin',
|
|
name: '金 Kin',
|
|
colors: ['var(--sumi-kin)', '#8b6a08'],
|
|
description: 'Gold Leaf — kinpaku',
|
|
gradient: 'linear-gradient(135deg, var(--sumi-kin) 0%, #8b6a08 100%)',
|
|
},
|
|
{
|
|
id: 'ai',
|
|
name: '藍 Ai',
|
|
colors: ['var(--sumi-ai)', '#1a3548'],
|
|
description: 'Indigo — deep blue',
|
|
gradient: 'linear-gradient(135deg, var(--sumi-ai) 0%, #1a3548 100%)',
|
|
},
|
|
{
|
|
id: 'matcha',
|
|
name: '抹茶 Matcha',
|
|
colors: ['#4f6840', '#3a5030'],
|
|
description: 'Green tea — moss',
|
|
gradient: 'linear-gradient(135deg, #4f6840 0%, #3a5030 100%)',
|
|
},
|
|
];
|
|
|
|
export function ThemeSwitcher({
|
|
currentTheme,
|
|
onThemeChange,
|
|
}: ThemeSwitcherProps) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 rounded bg-primary flex items-center justify-center">
|
|
<Palette className="w-5 h-5 text-foreground" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl text-foreground" style={{ fontWeight: 300 }}>Color Theme</h3>
|
|
<p className="text-sm text-muted-foreground" style={{ fontWeight: 300 }}>
|
|
Choose your ink palette
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{themes.map((theme) => (
|
|
<button
|
|
key={theme.id}
|
|
onClick={() => onThemeChange(theme.id)}
|
|
className={`group relative p-8 rounded border-2 transition-all duration-[var(--sumi-duration-normal)] text-left overflow-hidden ${
|
|
currentTheme === theme.id
|
|
? 'border-primary bg-primary/10 shadow-lg shadow-primary/20'
|
|
: 'border-white/10 bg-muted/50 hover:border-white/30 hover:bg-muted'
|
|
}`}
|
|
>
|
|
{/* Gradient Background */}
|
|
<div
|
|
className="absolute inset-0 opacity-10 group-hover:opacity-20 transition-opacity"
|
|
style={{ background: theme.gradient }}
|
|
/>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10">
|
|
<div className="flex items-center gap-4 mb-3">
|
|
<div className="flex gap-2">
|
|
{theme.colors.map((color, i) => (
|
|
<div
|
|
key={i}
|
|
className="w-10 h-10 rounded shadow-lg transition-opacity group-hover:opacity-80"
|
|
style={{ backgroundColor: color }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-2">
|
|
<div className="text-lg text-foreground mb-1" style={{ fontWeight: 400 }}>
|
|
{theme.name}
|
|
</div>
|
|
<div className="text-sm text-muted-foreground" style={{ fontWeight: 300 }}>
|
|
{theme.description}
|
|
</div>
|
|
</div>
|
|
|
|
{currentTheme === theme.id && (
|
|
<div className="flex items-center gap-2 text-muted-foreground font-mono text-sm animate-slide-in-left">
|
|
<div className="w-2 h-2 rounded-full bg-primary animate-glow-pulse" />
|
|
Active
|
|
</div>
|
|
)}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|