Add dark mode, export preview, and keyboard navigation
- Add theme store with light/dark/system modes and ThemeToggle component - Prevent flash of wrong theme on initial load via inline script - Add ExportPreviewModal for previewing session exports before download - Add copy-to-clipboard functionality to session export - Implement keyboard shortcuts for tree navigation (1-9 options, Esc back, Enter continue) - Display keyboard hints in tree navigation UI - Fix findNode to safely handle undefined structure parameter - Update page title to "Apoklisis" Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
36
frontend/src/components/common/ThemeToggle.tsx
Normal file
36
frontend/src/components/common/ThemeToggle.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import { Sun, Moon, Monitor } from 'lucide-react'
|
||||
import { useThemeStore } from '@/store/themeStore'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { theme, setTheme } = useThemeStore()
|
||||
|
||||
const options = [
|
||||
{ value: 'light' as const, icon: Sun, label: 'Light' },
|
||||
{ value: 'dark' as const, icon: Moon, label: 'Dark' },
|
||||
{ value: 'system' as const, icon: Monitor, label: 'System' },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="flex items-center rounded-md border border-input bg-background p-1">
|
||||
{options.map(({ value, icon: Icon, label }) => (
|
||||
<button
|
||||
key={value}
|
||||
onClick={() => setTheme(value)}
|
||||
className={cn(
|
||||
'rounded p-1.5 transition-colors',
|
||||
theme === value
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
aria-label={`Switch to ${label} theme`}
|
||||
aria-pressed={theme === value}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ThemeToggle
|
||||
Reference in New Issue
Block a user