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>
92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
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>
|
|
)
|
|
}
|