enricobuehler
7d64bb5a43
Browser UI for the host's management REST API (mgmt.rs / docs/api/openapi.json). Stack, exactly as specified: - TanStack Start (Vite, SPA mode) — file-based routes, SSR shell + client hydration. - React Query via orval codegen from the checked-in OpenAPI spec: a custom fetch mutator (src/api/fetcher.ts) centralizes the base URL, the bearer token (Settings → localStorage), JSON, and a throwing ApiError; the query client skips retries on 4xx. orval returns the response body directly (includeHttpResponseReturnType:false) so a query's `.data` is the typed payload; GET→useQuery, POST/DELETE→useMutation by method. - shadcn/ui on Tailwind v4 (CSS-first tokens, dark-first) — button/card/badge/input/label/ table/skeleton primitives hand-authored from the canonical source. - Paraglide i18n (en + de) with a reactive useLocale() hook and a language switcher. Pages: dashboard (live status — video/audio/session/stream, stop-session + request-IDR, 2s polling), host (identity/codecs/ports), clients (paired list + unpair), pairing (PIN submit, polls pin_pending), settings (API token + language). Dev server proxies /api → 127.0.0.1:47990 (same-origin, no CORS; PUNKTFUNK_MGMT_URL to override). Generated code (orval client, paraglide runtime, routeTree) is gitignored and reproduced by `pnpm codegen` (prepare/pre* scripts). Validated live against `serve`: API shapes match, dev proxy works, SSR shell renders the localized nav, build + tsc green. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import * as React from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
|
|
({ className, ...props }, ref) => (
|
|
<div className="relative w-full overflow-auto">
|
|
<table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
|
|
</div>
|
|
),
|
|
)
|
|
Table.displayName = 'Table'
|
|
|
|
const TableHeader = React.forwardRef<
|
|
HTMLTableSectionElement,
|
|
React.HTMLAttributes<HTMLTableSectionElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
|
|
))
|
|
TableHeader.displayName = 'TableHeader'
|
|
|
|
const TableBody = React.forwardRef<
|
|
HTMLTableSectionElement,
|
|
React.HTMLAttributes<HTMLTableSectionElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
|
|
))
|
|
TableBody.displayName = 'TableBody'
|
|
|
|
const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
|
|
({ className, ...props }, ref) => (
|
|
<tr
|
|
ref={ref}
|
|
className={cn(
|
|
'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
),
|
|
)
|
|
TableRow.displayName = 'TableRow'
|
|
|
|
const TableHead = React.forwardRef<
|
|
HTMLTableCellElement,
|
|
React.ThHTMLAttributes<HTMLTableCellElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<th
|
|
ref={ref}
|
|
className={cn(
|
|
'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableHead.displayName = 'TableHead'
|
|
|
|
const TableCell = React.forwardRef<
|
|
HTMLTableCellElement,
|
|
React.TdHTMLAttributes<HTMLTableCellElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<td
|
|
ref={ref}
|
|
className={cn('p-2 align-middle [&:has([role=checkbox])]:pr-0', className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableCell.displayName = 'TableCell'
|
|
|
|
export { Table, TableHeader, TableBody, TableHead, TableRow, TableCell }
|