Hitonabi
b805c294eb
Backend: FastAPI mit /api/health + /api/models (read-only aus llama-swap config, Logik aus v1 portiert). Frontend: Vite + React + Tailwind v4 + shadcn-Style App-Shell mit Cmd+K, Dark-default, PWA-Manifest; Modelle-View live aus /api/models. Deploy-Geruest (systemd-Unit :9001, build/deploy- Skripte, NOPASSWD-sudoers, kein Klartext-Passwort). Verifiziert: Backend-Endpunkte + Frontend-Build + gerenderte Shell. 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]"
|
|
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>
|
|
)
|
|
}
|