{children}
-
- {/* Desktop sidebar (≥ sm). */}
-
+ // Read the locale so the whole shell re-renders on a language switch.
+ useLocale();
+ return (
+
+ );
}
function LanguageSwitcher() {
- const current = useLocale()
- return (
-
+ {/* Desktop sidebar (≥ sm). */}
+
-
- )
+
+ {label()}
+
+
+ ))}
+
+
- {/* Mobile top bar (< sm): brand + language. The sidebar is hidden here. */}
-
-
+
+ {/* pb-24 leaves room for the fixed bottom nav on mobile. */}
+
+
- {/* Mobile bottom tab bar (< sm): the primary navigation on phones. */}
-
-
-
+ {/* Mobile top bar (< sm): brand + language. The sidebar is hidden here. */}
+
+
-
- {/* pb-24 leaves room for the fixed bottom nav on mobile. */}
-
-
+
+
+
+ {children}
+
+
- {locales.map((l: Locale) => (
-
- ))}
-
- )
+ const current = useLocale();
+ return (
+
+ {locales.map((l: Locale) => (
+
+ ))}
+
+ );
}
diff --git a/web/src/components/brand-mark.tsx b/web/src/components/brand-mark.tsx
index 7244969..0627b8e 100644
--- a/web/src/components/brand-mark.tsx
+++ b/web/src/components/brand-mark.tsx
@@ -3,29 +3,29 @@
// verbatim with the marketing site + docs). Back-to-front: large light-violet
// circle, deep-violet circle, light highlight where they overlap.
export function BrandMark({ className }: { className?: string }) {
- return (
-
- )
+ return (
+
+ );
}
-export default BrandMark
+export default BrandMark;
diff --git a/web/src/components/logo.tsx b/web/src/components/logo.tsx
index d72fca7..41b5158 100644
--- a/web/src/components/logo.tsx
+++ b/web/src/components/logo.tsx
@@ -1,17 +1,17 @@
-import { cn } from '@/lib/utils'
-import { BrandMark } from './brand-mark'
-import { Wordmark } from './wordmark'
+import { cn } from "@/lib/utils";
+import { BrandMark } from "./brand-mark";
+import { Wordmark } from "./wordmark";
// Full punktfunk lockup: the lens mark anchored to the top-left corner of the
// "funk" wordmark. Size the lockup with a width on the wrapper (e.g. `w-40`);
// the mark scales as a fraction of that width.
export function Logo({ className }: { className?: string }) {
- return (
-
-
- )
+ return (
+
+
+ );
}
-export default Logo
+export default Logo;
diff --git a/web/src/components/query-state.tsx b/web/src/components/query-state.tsx
index 7c5168d..bc9322d 100644
--- a/web/src/components/query-state.tsx
+++ b/web/src/components/query-state.tsx
@@ -1,43 +1,53 @@
-import type { ReactNode } from 'react'
-import { ApiError } from '@/api/fetcher'
-import { Spinner } from '@/components/ui/spinner'
-import { Button } from '@/components/ui/button'
-import { m } from '@/paraglide/messages'
+import type { ReactNode } from "react";
+import { ApiError } from "@/api/fetcher";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { m } from "@/paraglide/messages";
interface QueryStateProps {
- isLoading: boolean
- error: unknown
- refetch?: () => void
- children: ReactNode
+ isLoading: boolean;
+ error: unknown;
+ refetch?: () => void;
+ children: ReactNode;
}
/** Uniform loading/error wrapper for a query-backed view. */
-export function QueryState({ isLoading, error, refetch, children }: QueryStateProps) {
- if (isLoading) {
- return (
-
-
- )
- }
- if (error) {
- const unauthorized = error instanceof ApiError && error.status === 401
- return (
-
-
- )
- }
- return <>{children}
+export function QueryState({
+ isLoading,
+ error,
+ refetch,
+ children,
+}: QueryStateProps) {
+ if (isLoading) {
+ return (
+ - {unauthorized ? m.common_unauthorized() : m.common_error()} -
- {refetch && !unauthorized && ( - - )} -
+
+ );
+ }
+ if (error) {
+ const unauthorized = error instanceof ApiError && error.status === 401;
+ return (
+
+
+ );
+ }
+ return <>{children};
}
diff --git a/web/src/components/section.tsx b/web/src/components/section.tsx
new file mode 100644
index 0000000..7741a2a
--- /dev/null
+++ b/web/src/components/section.tsx
@@ -0,0 +1,40 @@
+import { motion, useReducedMotion } from "motion/react";
+import { Children, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Page content wrapper that animates in on mount — so the content fans up into
+ * place every time you navigate or load a route (the route remounts, this
+ * remounts). Each direct child is staggered a beat after the previous (the same
+ * on-mount-delay pattern the sidebar nav uses). Honours prefers-reduced-motion.
+ */
+export function Section({
+ children,
+ className,
+}: {
+ children: ReactNode;
+ className?: string;
+}) {
+ const reduce = useReducedMotion();
+ return (
+ + {unauthorized ? m.common_unauthorized() : m.common_error()} +
+ {refetch && !unauthorized && ( + + )} +
+ {Children.map(children, (child, i) =>
+ reduce ? (
+ child
+ ) : (
+
+ {child}
+
+ ),
+ )}
+
+ );
+}
diff --git a/web/src/components/ui/badge.tsx b/web/src/components/ui/badge.tsx
index 2cb0717..4bf9f77 100644
--- a/web/src/components/ui/badge.tsx
+++ b/web/src/components/ui/badge.tsx
@@ -1,29 +1,32 @@
-import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '@/lib/utils'
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { cn } from "@/lib/utils";
const badgeVariants = cva(
- 'inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-colors focus:outline-none',
- {
- variants: {
- variant: {
- default: 'border-transparent bg-primary text-primary-foreground',
- secondary: 'border-transparent bg-secondary text-secondary-foreground',
- destructive: 'border-transparent bg-destructive text-destructive-foreground',
- success: 'border-transparent bg-[var(--success)] text-white',
- outline: 'text-foreground',
- },
- },
- defaultVariants: { variant: 'default' },
- },
-)
+ "inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-colors focus:outline-none",
+ {
+ variants: {
+ variant: {
+ default: "border-transparent bg-primary text-primary-foreground",
+ secondary: "border-transparent bg-secondary text-secondary-foreground",
+ destructive:
+ "border-transparent bg-destructive text-destructive-foreground",
+ success: "border-transparent bg-[var(--success)] text-white",
+ outline: "text-foreground",
+ },
+ },
+ defaultVariants: { variant: "default" },
+ },
+);
export interface BadgeProps
- extends React.HTMLAttributes
-
- )
+ return (
+
+
+ );
}
diff --git a/web/src/components/ui/table.tsx b/web/src/components/ui/table.tsx
index feeae7c..5e1fe71 100644
--- a/web/src/components/ui/table.tsx
+++ b/web/src/components/ui/table.tsx
@@ -1,70 +1,80 @@
-import * as React from 'react'
-import { cn } from '@/lib/utils'
+import * as React from "react";
+import { cn } from "@/lib/utils";
-const Table = React.forwardRef
-
-
- ),
-)
-Table.displayName = 'Table'
+const Table = React.forwardRef<
+ HTMLTableElement,
+ React.HTMLAttributes
+
+
+));
+Table.displayName = "Table";
const TableHeader = React.forwardRef<
- HTMLTableSectionElement,
- React.HTMLAttributes
-
- {rows.length === 0 ? (
-
-
- {m.clients_empty()}
-
-
- ) : (
-
-
-
-
-
-
- )}
-
-
- )
-}
+export const Route = createFileRoute("/clients")({ component: SectionClients });
diff --git a/web/src/routes/host.tsx b/web/src/routes/host.tsx
index 74d00f4..ba8d56e 100644
--- a/web/src/routes/host.tsx
+++ b/web/src/routes/host.tsx
@@ -1,115 +1,4 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { useGetHostInfo, useListCompositors } from '@/api/gen/host/host'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import { QueryState } from '@/components/query-state'
-import { m } from '@/paraglide/messages'
-import { useLocale } from '@/lib/i18n'
+import { createFileRoute } from "@tanstack/react-router";
+import { SectionHost } from "@/sections/Host";
-export const Route = createFileRoute('/host')({ component: HostPage })
-
-// Exported so Storybook can render the page directly (see src/stories). The
-// route gen only needs the `Route` export; this extra one is harmless.
-export function HostPage() {
- useLocale()
- const host = useGetHostInfo()
- const compositors = useListCompositors()
- const h = host.data
-
- return (
- {m.clients_title()}
-
-
- {h && (
-
-
-
-
- {m.host_compositors()}
-
-
-
-
-
-
-
- )
-}
-
-function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
- return (
- {m.nav_host()}
-
-
-
- {m.host_identity()}
-
-
-
-
-
- )}
- -
-
-
-
- {m.host_codecs()}
-
-
- {h.codecs.map((c) => (
-
- {c.toUpperCase()}
-
- ))}
-
-
-
-
- {m.host_ports()}
-
-
-
-
-
- -
- {Object.entries(h.ports).map(([k, v]) => (
-
- {k} -
- {v as number} -
-
- ))}
- {m.host_compositors_help()}
--
- {compositors.data?.map((c) => (
-
-
- --- {c.label} - {c.default &&-
{m.compositor_default()} } -{c.id}-- {c.available ? m.compositor_available() : m.compositor_unavailable()} - -
- ))}
-
- {label}
-
- {value}
-
-
- )
-}
+export const Route = createFileRoute("/host")({ component: SectionHost });
diff --git a/web/src/routes/index.tsx b/web/src/routes/index.tsx
index 1b2c656..6a46b8f 100644
--- a/web/src/routes/index.tsx
+++ b/web/src/routes/index.tsx
@@ -1,139 +1,4 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { useQueryClient } from '@tanstack/react-query'
-import { Video, Volume2, MonitorPlay, ZapOff, RefreshCw } from 'lucide-react'
-import {
- useGetStatus,
- getGetStatusQueryKey,
-} from '@/api/gen/host/host'
-import { useStopSession, useRequestIdr } from '@/api/gen/session/session'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { QueryState } from '@/components/query-state'
-import { m } from '@/paraglide/messages'
-import { useLocale } from '@/lib/i18n'
+import { createFileRoute } from "@tanstack/react-router";
+import { SectionDashboard } from "@/sections/Dashboard";
-export const Route = createFileRoute('/')({ component: Dashboard })
-
-// Exported for Storybook (see src/stories) — harmless alongside `Route`.
-export function Dashboard() {
- useLocale()
- const qc = useQueryClient()
- // Poll live status every 2s so the console tracks an active session.
- const status = useGetStatus({ query: { refetchInterval: 2_000 } })
- const stop = useStopSession()
- const idr = useRequestIdr()
-
- const invalidate = () => qc.invalidateQueries({ queryKey: getGetStatusQueryKey() })
- const s = status.data
-
- return (
-
-
- {s && (
- <>
-
-
-
-
-
-
- {s.stream ? (
-
-
-
- )}
-
-
- )
-}
-
-function StatCard({ icon, label, on }: { icon: React.ReactNode; label: string; on: boolean }) {
- return (
- {m.status_title()}
-
-
-
- {m.status_paired_count()}
- {s.paired_clients}
-
-
-
-
- {m.status_pin_pending()}
-
- {s.pin_pending ? '●' : '—'}
-
-
-
-
-
-
-
-
-
- -
-
{m.status_no_session()}
- )} -
- {label}
- {value}
-
- )
-}
+export const Route = createFileRoute("/")({ component: SectionDashboard });
diff --git a/web/src/routes/library.tsx b/web/src/routes/library.tsx
index c182f93..d864ec2 100644
--- a/web/src/routes/library.tsx
+++ b/web/src/routes/library.tsx
@@ -1,293 +1,4 @@
-import { useState } from 'react'
-import { createFileRoute } from '@tanstack/react-router'
-import { useQueryClient } from '@tanstack/react-query'
-import { Pencil, Plus, Trash2, X } from 'lucide-react'
-import {
- useGetLibrary,
- useCreateCustomGame,
- useUpdateCustomGame,
- useDeleteCustomGame,
- getGetLibraryQueryKey,
-} from '@/api/gen/library/library'
-import type { GameEntry } from '@/api/gen/model/gameEntry'
-import type { CustomInput } from '@/api/gen/model/customInput'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-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'
+import { createFileRoute } from "@tanstack/react-router";
+import { SectionLibrary } from "@/sections/Library";
-export const Route = createFileRoute('/library')({ component: LibraryPage })
-
-/** The custom-CRUD path param is the raw id without the `custom:` prefix. */
-function customId(entry: GameEntry): string {
- return entry.id.startsWith('custom:') ? entry.id.slice('custom:'.length) : entry.id
-}
-
-/** Editable form state for the add/edit custom-game form. */
-interface FormState {
- title: string
- portrait: string
- hero: string
- header: string
- command: string
-}
-
-const emptyForm: FormState = { title: '', portrait: '', hero: '', header: '', command: '' }
-
-function formFrom(entry: GameEntry): FormState {
- return {
- title: entry.title,
- portrait: entry.art.portrait ?? '',
- hero: entry.art.hero ?? '',
- header: entry.art.header ?? '',
- command: entry.launch?.kind === 'command' ? entry.launch.value : '',
- }
-}
-
-/** Map the form to the API body — only attach `launch` when a command was given. */
-function toInput(f: FormState): CustomInput {
- const trim = (s: string) => {
- const t = s.trim()
- return t ? t : undefined
- }
- const command = f.command.trim()
- return {
- title: f.title.trim(),
- art: {
- portrait: trim(f.portrait),
- hero: trim(f.hero),
- header: trim(f.header),
- },
- launch: command ? { kind: 'command', value: command } : null,
- }
-}
-
-// Exported for Storybook (see src/stories) — harmless alongside `Route`.
-export function LibraryPage() {
- useLocale()
- const qc = useQueryClient()
- const library = useGetLibrary()
- const create = useCreateCustomGame()
- const update = useUpdateCustomGame()
- const remove = useDeleteCustomGame()
-
- // null = form hidden; '' = adding a new entry; an id = editing that custom entry.
- const [editing, setEditing] = useState
-
-
- {editing ? m.library_edit_title() : m.library_add_title()}
-
-
-
-
-
-
- )}
-
-
- {games.length === 0 ? (
-
-
- {m.library_empty()}
-
-
- ) : (
-
-
- )
-}
-
-interface GameCardProps {
- game: GameEntry
- onEdit: () => void
- onDelete: () => void
- deleting: boolean
-}
-
-/**
- * A poster tile. The cover prefers the 2:3 portrait capsule; on a load error it falls back to the
- * wide header, then to a text placeholder. Custom entries get edit/delete affordances.
- */
-function GameCard({ game, onEdit, onDelete, deleting }: GameCardProps) {
- const isCustom = game.store === 'custom'
- // Track which sources have failed so the
-
-
- {editing !== null && (
- {m.library_title()}
- {editing === null && ( - - )} -
- {games.map((game) => (
- openEdit(game)}
- onDelete={() => onDelete(game)}
- deleting={remove.isPending}
- />
- ))}
-
- )}
-
- {src ? (
- 
setFailed((prev) => ({ ...prev, [src]: true }))}
- />
- ) : (
-
-
- {game.title}
-
- )}
-
-
- {isCustom ? m.library_store_custom() : m.library_store_steam()}
-
-
- {isCustom && (
-
-
-
-
- )}
-
- {game.title}
-
-
-
-
- {m.login_title()}
-
-
-
-
-
-
- )
+function RouteComponent() {
+ const { next } = Route.useSearch();
+ return
-
- {m.login_subtitle()}
-
-
- );
-}
-
-/** Seconds since a knock → a short relative label. */
-function fmtAge(secs: number): string {
- if (secs < 10) return m.pairing_pending_age_just_now();
- if (secs < 60) return m.pairing_pending_age_secs({ s: Math.floor(secs) });
- return m.pairing_pending_age_mins({ min: Math.floor(secs / 60) });
-}
-
-/**
- * Devices awaiting delegated approval: an unpaired device that tried to connect shows up here,
- * and Approve pairs it on the spot — no PIN fetched out of band. Renders nothing while empty
- * (the common case); polls so a knock appears while the operator is looking at the page.
- */
-function PendingDevices() {
- const qc = useQueryClient();
- const pending = useListPendingDevices({ query: { refetchInterval: 3_000 } });
- const approve = useApprovePendingDevice();
- const deny = useDenyPendingDevice();
- const rows = pending.data ?? [];
- // Stay out of the way when there's nothing pending and the fetch is healthy — but DON'T swallow
- // a real error (a 500 etc.); fall through to QueryState below so it surfaces like every other
- // section. (A 401 is handled globally by the fetcher's redirect-to-login.)
- if (rows.length === 0 && !pending.error) return null;
-
- const refresh = () => {
- qc.invalidateQueries({ queryKey: getListPendingDevicesQueryKey() });
- qc.invalidateQueries({ queryKey: getListNativeClientsQueryKey() });
- };
- const onApprove = (id: number, currentName: string) => {
- const name = prompt(m.pairing_pending_name_prompt(), currentName);
- if (name == null) return; // operator cancelled
- approve.mutate(
- { id, data: { name: name.trim() ? name.trim() : null } },
- { onSuccess: refresh },
- );
- };
-
- return (
- {m.pairing_title()}
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-/** Native (punktfunk/1) pairing: arm a window → DISPLAY the PIN the user enters on their device. */
-function NativePairingCard() {
- const qc = useQueryClient();
- // Poll fast while armed (live countdown), slow otherwise.
- const status = useGetNativePairing({
- query: { refetchInterval: (q) => (q.state.data?.armed ? 1_000 : 4_000) },
- });
- const arm = useArmNativePairing();
- const disarm = useDisarmNativePairing();
- const d = status.data;
- const refresh = () =>
- qc.invalidateQueries({ queryKey: getGetNativePairingQueryKey() });
-
- return (
-
-
- - {m.pairing_pending_desc()} -
-- {m.pairing_native_disabled()} -
- ) : d.armed && d.pin ? ( -
-
- ) : (
- <>
- {m.pairing_native_enter()}
-
- {d.pin}
-
- {d.expires_in_secs != null && (
-
-
- {m.pairing_native_desc()} -
- - - )} -
-
- {rows.length === 0 ? (
-
-
- {m.pairing_native_empty()}
-
-
- ) : (
-
-
-
-
-
-
- )}
-
-
- );
-}
-
-/** GameStream/Moonlight pairing: the client shows a PIN, the operator submits it here. */
-function MoonlightPairingCard() {
- const qc = useQueryClient();
- const [pin, setPin] = useState("");
- 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 (
- {m.pairing_native_devices()}
-{m.pairing_idle()}
- ) : ( - - )} -
-
-
- {m.settings_language()}
-
-
- {locales.map((l: Locale) => (
-
- ))}
-
-
-
-
-
- {m.nav_settings()}
-
-
-
-
-
-
- )
-}
+export const Route = createFileRoute("/settings")({
+ component: SectionSettings,
+});
diff --git a/web/src/sections/Clients/index.tsx b/web/src/sections/Clients/index.tsx
new file mode 100644
index 0000000..4038e64
--- /dev/null
+++ b/web/src/sections/Clients/index.tsx
@@ -0,0 +1,36 @@
+import { useQueryClient } from "@tanstack/react-query";
+import type { FC } from "react";
+import {
+ getListPairedClientsQueryKey,
+ useListPairedClients,
+ useUnpairClient,
+} from "@/api/gen/clients/clients";
+import { useLocale } from "@/lib/i18n";
+import { m } from "@/paraglide/messages";
+import { ClientsView } from "./view";
+
+export const SectionClients: FC = () => {
+ useLocale();
+ const qc = useQueryClient();
+ const clients = useListPairedClients();
+ const unpair = useUnpairClient();
+
+ const onUnpair = (fingerprint: string) => {
+ if (!confirm(m.clients_unpair_confirm())) return;
+ unpair.mutate(
+ { fingerprint },
+ {
+ onSuccess: () =>
+ qc.invalidateQueries({ queryKey: getListPairedClientsQueryKey() }),
+ },
+ );
+ };
+
+ return (
+ {m.settings_title()}
- -{m.clients_title()}
+{m.status_title()}
+
+
+
+
+
+
+
+ {s.stream ? (
+
+
+
+ )}
+
+
+
+
+ {m.status_paired_count()}
+
+
+ {s.paired_clients}
+
+
+
+
+
+
+ {m.status_pin_pending()}
+
+
+ {s.pin_pending ? "●" : "—"}
+
+
+
+
+
+
+
+
+
+ -
+
+ {m.status_no_session()} +
+ )} +
+ {label}
+ {value}
+
+);
diff --git a/web/src/sections/Host/index.tsx b/web/src/sections/Host/index.tsx
new file mode 100644
index 0000000..6d50b03
--- /dev/null
+++ b/web/src/sections/Host/index.tsx
@@ -0,0 +1,12 @@
+import type { FC } from "react";
+import { useGetHostInfo, useListCompositors } from "@/api/gen/host/host";
+import { useLocale } from "@/lib/i18n";
+import { HostView } from "./view";
+
+export const SectionHost: FC = () => {
+ useLocale();
+ const host = useGetHostInfo();
+ const compositors = useListCompositors();
+
+ return {m.nav_host()}
+ +
+
+
+ {m.host_identity()}
+
+
+
+
+
+ )}
+ -
+
+
+
+ {m.host_codecs()}
+
+
+ {h.codecs.map((c) => (
+
+ {c.toUpperCase()}
+
+ ))}
+
+
+
+
+ {m.host_ports()}
+
+
+
+
+
+ -
+ {Object.entries(h.ports).map(([k, v]) => (
+
- {k} +
- {v as number} +
+
+ ))}
+ + {m.host_compositors_help()} +
+-
+ {compositors.data?.map((c) => (
+
-
+ +++ {c.label} + {c.default && ( ++
+ {m.compositor_default()} + + )} ++ {c.id} +++ {c.available + ? m.compositor_available() + : m.compositor_unavailable()} + +
+ ))}
+
+ {label}
+
+ {value}
+
+
+);
diff --git a/web/src/sections/Library/index.tsx b/web/src/sections/Library/index.tsx
new file mode 100644
index 0000000..5e8cdc1
--- /dev/null
+++ b/web/src/sections/Library/index.tsx
@@ -0,0 +1,37 @@
+import { useQueryClient } from "@tanstack/react-query";
+import type { FC } from "react";
+import {
+ getGetLibraryQueryKey,
+ useCreateCustomGame,
+ useDeleteCustomGame,
+ useGetLibrary,
+ useUpdateCustomGame,
+} from "@/api/gen/library/library";
+import type { CustomInput } from "@/api/gen/model/customInput";
+import { useLocale } from "@/lib/i18n";
+import { LibraryView } from "./view";
+
+export const SectionLibrary: FC = () => {
+ useLocale();
+ const qc = useQueryClient();
+ const library = useGetLibrary();
+ const create = useCreateCustomGame();
+ const update = useUpdateCustomGame();
+ const remove = useDeleteCustomGame();
+
+ const invalidate = () =>
+ qc.invalidateQueries({ queryKey: getGetLibraryQueryKey() });
+
+ return (
+
+
+
+ {editing !== null && (
+ {m.library_title()}
+ {editing === null && ( + + )} +
+ {games.map((game) => (
+ openEdit(game)}
+ onDelete={() => handleDelete(game)}
+ deleting={isDeleting}
+ />
+ ))}
+
+ )}
+
+ {src ? (
+ setFailed((prev) => ({ ...prev, [src]: true }))}
+ />
+ ) : (
+
+
+ {game.title}
+
+ )}
+
+
+ {isCustom ? m.library_store_custom() : m.library_store_steam()}
+
+
+ {isCustom && (
+
+
+
+
+ )}
+
+ {game.title}
+
+
+
+
+ {m.login_title()}
+
+
+
+
+
+
+ );
+};
diff --git a/web/src/sections/Pairing/index.tsx b/web/src/sections/Pairing/index.tsx
new file mode 100644
index 0000000..b730aff
--- /dev/null
+++ b/web/src/sections/Pairing/index.tsx
@@ -0,0 +1,391 @@
+import { useQueryClient } from "@tanstack/react-query";
+import {
+ CheckCircle2,
+ KeyRound,
+ Smartphone,
+ Timer,
+ Trash2,
+ UserPlus,
+ X,
+} from "lucide-react";
+import { type FC, useState } from "react";
+import {
+ getGetNativePairingQueryKey,
+ getListNativeClientsQueryKey,
+ getListPendingDevicesQueryKey,
+ useApprovePendingDevice,
+ useArmNativePairing,
+ useDenyPendingDevice,
+ useDisarmNativePairing,
+ useGetNativePairing,
+ useListNativeClients,
+ useListPendingDevices,
+ useUnpairNativeClient,
+} from "@/api/gen/native/native";
+import {
+ getGetPairingStatusQueryKey,
+ useGetPairingStatus,
+ useSubmitPairingPin,
+} from "@/api/gen/pairing/pairing";
+import { QueryState } from "@/components/query-state";
+import { Section } from "@/components/section";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import { useLocale } from "@/lib/i18n";
+import { m } from "@/paraglide/messages";
+
+/** Seconds → `m:ss`. */
+function fmtTime(secs: number): string {
+ const s = Math.max(0, Math.floor(secs));
+ return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, "0")}`;
+}
+
+// Pairing composes four independent sub-cards, each its own little container
+// (own query + mutations). They share the page's staggered entrance via
+
+ {m.login_subtitle()}
+{m.pairing_title()}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+/** Native (punktfunk/1) pairing: arm a window → DISPLAY the PIN the user enters on their device. */
+function NativePairingCard() {
+ const qc = useQueryClient();
+ // Poll fast while armed (live countdown), slow otherwise.
+ const status = useGetNativePairing({
+ query: { refetchInterval: (q) => (q.state.data?.armed ? 1_000 : 4_000) },
+ });
+ const arm = useArmNativePairing();
+ const disarm = useDisarmNativePairing();
+ const d = status.data;
+ const refresh = () =>
+ qc.invalidateQueries({ queryKey: getGetNativePairingQueryKey() });
+
+ return (
+
+
+ + {m.pairing_pending_desc()} +
++ {m.pairing_native_disabled()} +
+ ) : d.armed && d.pin ? ( +
+
+ ) : (
+ <>
+ {m.pairing_native_enter()}
+
+ {d.pin}
+
+ {d.expires_in_secs != null && (
+
+
+ {m.pairing_native_desc()} +
+ + + )} +
+
+ {rows.length === 0 ? (
+
+
+ {m.pairing_native_empty()}
+
+
+ ) : (
+
+
+
+
+
+
+ )}
+
+
+ );
+}
+
+/** GameStream/Moonlight pairing: the client shows a PIN, the operator submits it here. */
+function MoonlightPairingCard() {
+ const qc = useQueryClient();
+ const [pin, setPin] = useState("");
+ 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 (
+ {m.pairing_native_devices()}
+{m.pairing_idle()}
+ ) : ( + + )} +{m.settings_title()}
+ +
-
- Dashboard
-- Placeholder content — swap routes from the sidebar to preview the active state. -
-
+
+ Dashboard
++ Placeholder content — swap routes from the sidebar to preview the + active state. +
+
- {VARIANTS.map((variant) => (
-
- {variant}
-
- ))}
-
- ),
-}
+ render: () => (
+
+ {VARIANTS.map((variant) => (
+
+ {variant}
+
+ ))}
+
+ ),
+};
diff --git a/web/src/stories/Brand.stories.tsx b/web/src/stories/Brand.stories.tsx
index 7d0addf..2a235cb 100644
--- a/web/src/stories/Brand.stories.tsx
+++ b/web/src/stories/Brand.stories.tsx
@@ -1,40 +1,40 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { BrandMark } from '@/components/brand-mark'
-import { Wordmark } from '@/components/wordmark'
-import { Logo } from '@/components/logo'
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { BrandMark } from "@/components/brand-mark";
+import { Logo } from "@/components/logo";
+import { Wordmark } from "@/components/wordmark";
const meta = {
- title: 'Brand/Marks',
- component: BrandMark,
-} satisfies Meta
-
- ),
-}
+ render: () => (
+
+
+ ),
+};
export const Word: Story = {
- render: () => (
-
-
- ),
-}
+ render: () => (
+
+
+ ),
+};
export const Lockup: Story = {
- render: () => (
-
-
- ),
-}
+ render: () => (
+
+
+ ),
+};
diff --git a/web/src/stories/Button.stories.tsx b/web/src/stories/Button.stories.tsx
index d17620b..e09921f 100644
--- a/web/src/stories/Button.stories.tsx
+++ b/web/src/stories/Button.stories.tsx
@@ -1,48 +1,55 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { Play } from 'lucide-react'
-import { Button } from '@/components/ui/button'
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Play } from "lucide-react";
+import { Button } from "@/components/ui/button";
-const VARIANTS = ['default', 'secondary', 'outline', 'ghost', 'link', 'destructive'] as const
-const SIZES = ['default', 'sm', 'lg', 'icon'] as const
+const VARIANTS = [
+ "default",
+ "secondary",
+ "outline",
+ "ghost",
+ "link",
+ "destructive",
+] as const;
+const SIZES = ["default", "sm", "lg", "icon"] as const;
const meta = {
- title: 'UI/Button',
- component: Button,
- args: { children: 'Stream' },
- argTypes: {
- variant: { control: 'select', options: VARIANTS },
- size: { control: 'select', options: SIZES },
- disabled: { control: 'boolean' },
- },
-} satisfies Meta
- {VARIANTS.map((variant) => (
-
- ))}
-
- ),
-}
+ render: () => (
+
+ {VARIANTS.map((variant) => (
+
+ ))}
+
+ ),
+};
export const Sizes: Story = {
- render: () => (
-
-
-
-
-
-
- ),
-}
+ render: () => (
+
+
+
+
+
+
+ ),
+};
diff --git a/web/src/stories/Card.stories.tsx b/web/src/stories/Card.stories.tsx
index 8e649ab..21b79db 100644
--- a/web/src/stories/Card.stories.tsx
+++ b/web/src/stories/Card.stories.tsx
@@ -1,45 +1,45 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
import {
- Card,
- CardContent,
- CardDescription,
- CardFooter,
- CardHeader,
- CardTitle,
-} from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
const meta = {
- title: 'UI/Card',
- component: Card,
- // Card requires `children`; every story supplies its own via `render`, so this
- // is just a placeholder to satisfy the arg type.
- args: { children: null },
-} satisfies Meta
- ENRICOS-DESKTOP
- online
-
-
+ ENRICOS-DESKTOP
+ online
+
+
-
- ),
-}
+ render: () => (
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+ ),
+};
diff --git a/web/src/stories/Library.stories.tsx b/web/src/stories/Library.stories.tsx
index fe4dcec..f659971 100644
--- a/web/src/stories/Library.stories.tsx
+++ b/web/src/stories/Library.stories.tsx
@@ -1,28 +1,26 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { LibraryPage } from '@/routes/library'
-import { MockApi } from './lib/mock-api'
-import { library } from './lib/fixtures'
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LibraryView } from "@/sections/Library/view";
+import { library } from "./lib/fixtures";
const meta = {
- title: 'Pages/Library',
- component: LibraryPage,
-} satisfies Meta
+
+
+
+
+
+
+
+
+
+
+
+ Loaded content renders here.
-)
+
+ Loaded content renders here.
+
+);
const meta = {
- title: 'Patterns/QueryState',
- component: QueryState,
- args: { children:
-
- ),
-}
+ render: () => (
+
+
+ ),
+};
export const Sizes: Story = {
- render: () => (
-
-
- ),
-}
+ render: () => (
+
+
+ ),
+};
diff --git a/web/src/stories/lib/fixtures.ts b/web/src/stories/lib/fixtures.ts
index 55e5789..ed9451d 100644
--- a/web/src/stories/lib/fixtures.ts
+++ b/web/src/stories/lib/fixtures.ts
@@ -1,87 +1,114 @@
// Mock API payloads for the page stories — typed against the generated models so
// they stay honest if the OpenAPI schema changes.
-import type { AvailableCompositor } from '@/api/gen/model/availableCompositor'
-import type { GameEntry } from '@/api/gen/model/gameEntry'
-import type { HostInfo } from '@/api/gen/model/hostInfo'
-import type { PairedClient } from '@/api/gen/model/pairedClient'
-import type { RuntimeStatus } from '@/api/gen/model/runtimeStatus'
+import type { AvailableCompositor } from "@/api/gen/model/availableCompositor";
+import type { GameEntry } from "@/api/gen/model/gameEntry";
+import type { HostInfo } from "@/api/gen/model/hostInfo";
+import type { PairedClient } from "@/api/gen/model/pairedClient";
+import type { RuntimeStatus } from "@/api/gen/model/runtimeStatus";
export const hostInfo: HostInfo = {
- abi_version: 2,
- app_version: '7.1.450.0',
- codecs: ['h264', 'h265', 'av1'],
- gfe_version: '3.23.0.74',
- hostname: 'ENRICOS-DESKTOP',
- local_ip: '192.168.1.173',
- ports: {
- audio: 48000,
- control: 47999,
- http: 47989,
- https: 47984,
- mgmt: 47990,
- rtsp: 48010,
- video: 47998,
- },
- uniqueid: '0f8a1c3e9b7d4a62',
- version: '0.2.0',
-}
+ abi_version: 2,
+ app_version: "7.1.450.0",
+ codecs: ["h264", "h265", "av1"],
+ gfe_version: "3.23.0.74",
+ hostname: "ENRICOS-DESKTOP",
+ local_ip: "192.168.1.173",
+ ports: {
+ audio: 48000,
+ control: 47999,
+ http: 47989,
+ https: 47984,
+ mgmt: 47990,
+ rtsp: 48010,
+ video: 47998,
+ },
+ uniqueid: "0f8a1c3e9b7d4a62",
+ version: "0.2.0",
+};
export const compositors: AvailableCompositor[] = [
- { id: 'kwin', label: 'KWin (Plasma)', available: true, default: true },
- { id: 'gamescope', label: 'gamescope', available: true, default: false },
- { id: 'mutter', label: 'Mutter (GNOME)', available: false, default: false },
- { id: 'wlroots', label: 'Sway / wlroots', available: false, default: false },
-]
+ { id: "kwin", label: "KWin (Plasma)", available: true, default: true },
+ { id: "gamescope", label: "gamescope", available: true, default: false },
+ { id: "mutter", label: "Mutter (GNOME)", available: false, default: false },
+ { id: "wlroots", label: "Sway / wlroots", available: false, default: false },
+];
export const statusActive: RuntimeStatus = {
- video_streaming: true,
- audio_streaming: true,
- paired_clients: 3,
- pin_pending: false,
- session: { width: 5120, height: 1440, fps: 240 },
- stream: {
- codec: 'h265',
- width: 5120,
- height: 1440,
- fps: 240,
- bitrate_kbps: 150_000,
- min_fec: 5,
- packet_size: 1392,
- },
-}
+ video_streaming: true,
+ audio_streaming: true,
+ paired_clients: 3,
+ pin_pending: false,
+ session: { width: 5120, height: 1440, fps: 240 },
+ stream: {
+ codec: "h265",
+ width: 5120,
+ height: 1440,
+ fps: 240,
+ bitrate_kbps: 150_000,
+ min_fec: 5,
+ packet_size: 1392,
+ },
+};
export const statusIdle: RuntimeStatus = {
- video_streaming: false,
- audio_streaming: false,
- paired_clients: 1,
- pin_pending: true,
- session: null,
- stream: null,
-}
+ video_streaming: false,
+ audio_streaming: false,
+ paired_clients: 1,
+ pin_pending: true,
+ session: null,
+ stream: null,
+};
export const pairedClients: PairedClient[] = [
- {
- fingerprint: 'a1b2c3d4e5f60718293a4b5c6d7e8f90112233445566778899aabbccddeeff00',
- subject: 'enricos-macbook',
- not_before_unix: 1_718_000_000,
- not_after_unix: 2_030_000_000,
- },
- {
- fingerprint: 'ff00eeddccbbaa998877665544332211009f8e7d6c5b4a39281706f5e4d3c2b1',
- subject: 'living-room-tv',
- not_before_unix: 1_718_500_000,
- not_after_unix: 2_030_000_000,
- },
- {
- fingerprint: '0011223344556677889900aabbccddeeff112233445566778899aabbccddeeff',
- subject: null,
- },
-]
+ {
+ fingerprint:
+ "a1b2c3d4e5f60718293a4b5c6d7e8f90112233445566778899aabbccddeeff00",
+ subject: "enricos-macbook",
+ not_before_unix: 1_718_000_000,
+ not_after_unix: 2_030_000_000,
+ },
+ {
+ fingerprint:
+ "ff00eeddccbbaa998877665544332211009f8e7d6c5b4a39281706f5e4d3c2b1",
+ subject: "living-room-tv",
+ not_before_unix: 1_718_500_000,
+ not_after_unix: 2_030_000_000,
+ },
+ {
+ fingerprint:
+ "0011223344556677889900aabbccddeeff112233445566778899aabbccddeeff",
+ subject: null,
+ },
+];
-const noArt = { header: null, hero: null, logo: null, portrait: null }
+const noArt = { header: null, hero: null, logo: null, portrait: null };
export const library: GameEntry[] = [
- { id: 'steam:1245620', store: 'steam', title: 'Elden Ring', art: noArt, launch: null },
- { id: 'steam:1086940', store: 'steam', title: "Baldur's Gate 3", art: noArt, launch: null },
- { id: 'steam:413150', store: 'steam', title: 'Stardew Valley', art: noArt, launch: null },
- { id: 'custom:retroarch', store: 'custom', title: 'RetroArch', art: noArt, launch: null },
-]
+ {
+ id: "steam:1245620",
+ store: "steam",
+ title: "Elden Ring",
+ art: noArt,
+ launch: null,
+ },
+ {
+ id: "steam:1086940",
+ store: "steam",
+ title: "Baldur's Gate 3",
+ art: noArt,
+ launch: null,
+ },
+ {
+ id: "steam:413150",
+ store: "steam",
+ title: "Stardew Valley",
+ art: noArt,
+ launch: null,
+ },
+ {
+ id: "custom:retroarch",
+ store: "custom",
+ title: "RetroArch",
+ art: noArt,
+ launch: null,
+ },
+];
diff --git a/web/src/stories/lib/mock-api.tsx b/web/src/stories/lib/mock-api.tsx
deleted file mode 100644
index b9fe094..0000000
--- a/web/src/stories/lib/mock-api.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { type ReactNode, useEffect, useRef, useState } from 'react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-
-/** Map of API pathname (e.g. `/api/v1/host`) → JSON body to return for a GET. */
-export type MockRoutes = Record