enricobuehler
6bd2e3341f
Stand up Storybook so the management console can be designed without a running host, plus the design-system work that surfaced along the way. Storybook (@storybook/react-vite): - Slim Start/Nitro-free vite config; the preview imports the app's real src/styles.css directly so the design tokens stay single-sourced (no mirror). - Stories for the @unom/ui primitives (Button/Card/Inputs/Badge), brand marks, the AppShell (throwaway in-memory TanStack router), and every data-driven page (Dashboard/Host/Clients/Library/Settings) rendered offline via a window.fetch stub + typed fixtures. The route page components are exported so stories can render them. Light theme: - styles.css now carries a light :root (lavender, from the docs palette) with the existing violet chrome moved to .dark; the live console still pins html.dark by default, so this only adds the option (Storybook's toolbar toggles it). - Fixes a stray `*/` inside a comment that prematurely closed it and silently broke Tailwind's @theme processing. Spinner: - The punktfunk lens recreated with motion/react: two circles surge through one another in depth (JS perspective scale + z-index — robust where mix-blend-mode flattens CSS preserve-3d) with a screen-blend lens highlight. Replaces the skeleton loading state in QueryState; removes ui/skeleton.tsx. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
91 lines
3.0 KiB
TypeScript
91 lines
3.0 KiB
TypeScript
import { createFileRoute } from '@tanstack/react-router'
|
|
import { useQueryClient } from '@tanstack/react-query'
|
|
import { Trash2 } from 'lucide-react'
|
|
import {
|
|
useListPairedClients,
|
|
useUnpairClient,
|
|
getListPairedClientsQueryKey,
|
|
} from '@/api/gen/clients/clients'
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { QueryState } from '@/components/query-state'
|
|
import { m } from '@/paraglide/messages'
|
|
import { useLocale } from '@/lib/i18n'
|
|
|
|
export const Route = createFileRoute('/clients')({ component: ClientsPage })
|
|
|
|
// Exported for Storybook (see src/stories) — harmless alongside `Route`.
|
|
export function ClientsPage() {
|
|
useLocale()
|
|
const qc = useQueryClient()
|
|
const clients = useListPairedClients()
|
|
const unpair = useUnpairClient()
|
|
const rows = clients.data ?? []
|
|
|
|
const onUnpair = (fingerprint: string) => {
|
|
if (!confirm(m.clients_unpair_confirm())) return
|
|
unpair.mutate(
|
|
{ fingerprint },
|
|
{ onSuccess: () => qc.invalidateQueries({ queryKey: getListPairedClientsQueryKey() }) },
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<h1 className="text-2xl font-semibold">{m.clients_title()}</h1>
|
|
<QueryState isLoading={clients.isLoading} error={clients.error} refetch={clients.refetch}>
|
|
{rows.length === 0 ? (
|
|
<Card>
|
|
<CardContent className="p-8 text-center text-sm text-muted-foreground">
|
|
{m.clients_empty()}
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<Card>
|
|
<CardContent className="p-0">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>{m.clients_name()}</TableHead>
|
|
<TableHead>{m.clients_fingerprint()}</TableHead>
|
|
<TableHead className="w-12" />
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{rows.map((c) => (
|
|
<TableRow key={c.fingerprint}>
|
|
<TableCell className="font-medium">{c.subject || '—'}</TableCell>
|
|
<TableCell className="font-mono text-xs text-muted-foreground">
|
|
{c.fingerprint.slice(0, 16)}…
|
|
</TableCell>
|
|
<TableCell>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
aria-label={m.action_unpair()}
|
|
disabled={unpair.isPending}
|
|
onClick={() => onUnpair(c.fingerprint)}
|
|
>
|
|
<Trash2 className="size-4 text-destructive" />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</QueryState>
|
|
</div>
|
|
)
|
|
}
|