feat(web): management console — TanStack Start + orval + shadcn + Paraglide

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>
2026-06-10 17:00:12 +00:00
parent ff4fe197be
commit e0b166ad60
32 changed files with 4786 additions and 0 deletions
@@ -0,0 +1,91 @@
+import { useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { useQueryClient } from '@tanstack/react-query'
+import { KeyRound, CheckCircle2 } from 'lucide-react'
+import {
+  useGetPairingStatus,
+  useSubmitPairingPin,
+  getGetPairingStatusQueryKey,
+} from '@/api/gen/pairing/pairing'
+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 { QueryState } from '@/components/query-state'
+import { m } from '@/paraglide/messages'
+import { useLocale } from '@/lib/i18n'
+
+export const Route = createFileRoute('/pairing')({ component: PairingPage })
+
+function PairingPage() {
+  useLocale()
+  const qc = useQueryClient()
+  const [pin, setPin] = useState('')
+  // Poll: the host flips pin_pending when a Moonlight client begins pairing.
+  const pairing = useGetPairingStatus({ query: { refetchInterval: 2_000 } })
+  const submit = useSubmitPairingPin()
+  const pending = pairing.data?.pin_pending ?? false
+
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    submit.mutate(
+      { data: { pin } },
+      {
+        onSuccess: () => {
+          setPin('')
+          qc.invalidateQueries({ queryKey: getGetPairingStatusQueryKey() })
+        },
+      },
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-semibold">{m.pairing_title()}</h1>
+      <QueryState isLoading={pairing.isLoading} error={pairing.error} refetch={pairing.refetch}>
+        <Card className="max-w-md">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <KeyRound className="size-4" />
+              {m.pairing_title()}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!pending ? (
+              <p className="text-sm text-muted-foreground">{m.pairing_idle()}</p>
+            ) : (
+              <form onSubmit={onSubmit} className="space-y-4">
+                <p className="text-sm">{m.pairing_waiting()}</p>
+                <div className="space-y-2">
+                  <Label htmlFor="pin">{m.pairing_pin_label()}</Label>
+                  <Input
+                    id="pin"
+                    inputMode="numeric"
+                    autoComplete="off"
+                    maxLength={8}
+                    value={pin}
+                    onChange={(e) => setPin(e.target.value.replace(/\D/g, ''))}
+                    placeholder="0000"
+                    className="font-mono text-lg tracking-widest"
+                  />
+                </div>
+                <Button type="submit" disabled={pin.length < 4 || submit.isPending}>
+                  {m.pairing_submit()}
+                </Button>
+                {submit.isSuccess && (
+                  <p className="flex items-center gap-1.5 text-sm text-[var(--success)]">
+                    <CheckCircle2 className="size-4" />
+                    {m.pairing_success()}
+                  </p>
+                )}
+                {submit.isError && (
+                  <p className="text-sm text-destructive">{m.pairing_failed()}</p>
+                )}
+              </form>
+            )}
+          </CardContent>
+        </Card>
+      </QueryState>
+    </div>
+  )
+}