enricobuehler
e0b166ad60
ci / rust (push) Has been cancelled
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>
82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
import { useState } from 'react'
|
|
import { createFileRoute } from '@tanstack/react-router'
|
|
import { useQueryClient } from '@tanstack/react-query'
|
|
import { Check } from 'lucide-react'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { getApiToken, setApiToken } from '@/api/fetcher'
|
|
import { m } from '@/paraglide/messages'
|
|
import { useLocale, changeLocale, locales, type Locale } from '@/lib/i18n'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export const Route = createFileRoute('/settings')({ component: SettingsPage })
|
|
|
|
function SettingsPage() {
|
|
const current = useLocale()
|
|
const qc = useQueryClient()
|
|
const [token, setToken] = useState(getApiToken())
|
|
const [saved, setSaved] = useState(false)
|
|
|
|
const onSave = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setApiToken(token.trim())
|
|
// Re-fetch everything with the new credential.
|
|
qc.invalidateQueries()
|
|
setSaved(true)
|
|
setTimeout(() => setSaved(false), 2_000)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<h1 className="text-2xl font-semibold">{m.settings_title()}</h1>
|
|
|
|
<Card className="max-w-lg">
|
|
<CardHeader>
|
|
<CardTitle>{m.settings_token_label()}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={onSave} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="token">{m.settings_token_label()}</Label>
|
|
<Input
|
|
id="token"
|
|
type="password"
|
|
autoComplete="off"
|
|
value={token}
|
|
onChange={(e) => setToken(e.target.value)}
|
|
placeholder="••••••••"
|
|
/>
|
|
<p className="text-xs text-muted-foreground">{m.settings_token_help()}</p>
|
|
</div>
|
|
<Button type="submit">
|
|
{saved ? <Check className="size-4" /> : null}
|
|
{saved ? m.settings_saved() : m.settings_save()}
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="max-w-lg">
|
|
<CardHeader>
|
|
<CardTitle>{m.settings_language()}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex gap-2">
|
|
{locales.map((l: Locale) => (
|
|
<Button
|
|
key={l}
|
|
variant={l === current ? 'default' : 'outline'}
|
|
size="sm"
|
|
className={cn('uppercase')}
|
|
onClick={() => changeLocale(l)}
|
|
>
|
|
{l}
|
|
</Button>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|