Hitonabi
087eb2259d
Aus dem web-design-guidelines-Audit über das ganze Frontend: P1 — index.css: prefers-reduced-motion-Block (Animationen/Transitions aus), color-scheme dark/light, zwei `transition: all` → explizite Properties, globaler :focus-visible-Ring. Formular-aria-labels (SystemDrawer-Passwörter inkl. name/autocomplete/spellCheck, Memory, Connect, ModelBrowse, LaneEditor, CustomDialog). Icon-Button-aria-labels + dekorative Icons aria-hidden. P2 — Memory-Lösch-Bestätigung (war sofort), overscroll-behavior:contain auf Modals (CustomDialog/Agent/Cockpit/CommandPalette), ModelBrowse fmtN → Intl.NumberFormat. P3 — Deep-Linking: top-level View im URL-Hash (#models), Reload/Teilen/Cmd-Klick funktionieren; Sidebar-Nav als <a href="#id"> (echte Links, aria-current), hashchange-Sync; index.css-Aktiv-Selektoren button→a nachgezogen. Verifiziert: npm run build (tsc strict) clean; live gegen die Box (Hash-Nav, Reload-Persistenz, aria-current, Aktiv-Styling teal+Akzent, keine Konsolenfehler). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
import { useEffect, useState } from "react"
|
|
import { Command } from "cmdk"
|
|
import { NAV, type ViewId } from "@/nav"
|
|
|
|
export function CommandPalette({ onNavigate }: { onNavigate: (v: ViewId) => void }) {
|
|
const [open, setOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
|
|
e.preventDefault()
|
|
setOpen((o) => !o)
|
|
}
|
|
}
|
|
document.addEventListener("keydown", onKey)
|
|
return () => document.removeEventListener("keydown", onKey)
|
|
}, [])
|
|
|
|
return (
|
|
<Command.Dialog
|
|
open={open}
|
|
onOpenChange={setOpen}
|
|
label="Befehlspalette"
|
|
className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 p-4 pt-[12vh] overscroll-contain"
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
<div
|
|
className="w-full max-w-lg overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-2xl"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<Command.Input
|
|
autoFocus
|
|
placeholder="Springe zu… (Modelle, Routing, System …)"
|
|
className="w-full border-b border-border bg-transparent px-4 py-3 text-sm outline-none placeholder:text-muted-foreground"
|
|
/>
|
|
<Command.List className="max-h-80 overflow-y-auto p-2">
|
|
<Command.Empty className="px-3 py-6 text-center text-sm text-muted-foreground">
|
|
Nichts gefunden.
|
|
</Command.Empty>
|
|
<Command.Group heading="Bereiche" className="px-1 py-1 text-xs text-muted-foreground">
|
|
{NAV.map((item) => (
|
|
<Command.Item
|
|
key={item.id}
|
|
value={`${item.label} ${item.hint}`}
|
|
onSelect={() => {
|
|
onNavigate(item.id)
|
|
setOpen(false)
|
|
}}
|
|
className="flex cursor-pointer items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground aria-selected:bg-accent aria-selected:text-accent-foreground"
|
|
>
|
|
<item.icon className="h-4 w-4 text-primary" />
|
|
<span>{item.label}</span>
|
|
<span className="ml-auto truncate text-xs text-muted-foreground">{item.hint}</span>
|
|
</Command.Item>
|
|
))}
|
|
</Command.Group>
|
|
</Command.List>
|
|
</div>
|
|
</Command.Dialog>
|
|
)
|
|
}
|