enricobuehlerandClaude Opus 4.8
ae51276a03
Web console - Pairing/Library/Stats refactored into self-contained subsections that each own their own queries + mutations; a shared slot-based layout (view.tsx) is filled by the live page (containers) and Storybook (pure cards + fixtures) so the layout can't drift. - All paired devices in one list on Pairing with a protocol column (punktfunk/1 + Moonlight), routing each unpair to the right endpoint; the redundant Clients page is removed. - Library: overview grid split from the add/edit form into separate files. - Login screen links out to the docs. Docs - "Console login password" section on every host page (apt/RPM/Bazzite/SteamOS/Windows) plus a new "Forgot your Password?" troubleshooting page, linked from the login screen. - Console served as HTTP/1.1 over TLS (drop the unusable HTTP/3 advertising) across the Bun entry, launchers, systemd units, and packaging. Tooling - Biome now respects .gitignore (stops linting generated code), config migrated to 2.5.1; all lint issues fixed cleanly. Also includes this branch's in-progress host, Apple client, packaging, and CI changes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
29 lines
895 B
TypeScript
29 lines
895 B
TypeScript
import Section from "@unom/ui/section";
|
|
import type { FC, ReactNode } from "react";
|
|
import { m } from "@/paraglide/messages";
|
|
|
|
/**
|
|
* The Pairing page LAYOUT — the single source of how the four sub-cards are arranged. Both the live
|
|
* page (`index.tsx`, slots = the self-contained `*Section` containers) and Storybook (slots = the
|
|
* pure cards with mock state) fill these slots, so the arrangement can never drift between them.
|
|
*/
|
|
export const PairingView: FC<{
|
|
pending: ReactNode;
|
|
native: ReactNode;
|
|
moonlight: ReactNode;
|
|
paired: ReactNode;
|
|
}> = ({ pending, native, moonlight, paired }) => (
|
|
<Section maxWidth={false}>
|
|
<div className="flex flex-col gap-card">
|
|
<h1 className="text-2xl font-semibold">{m.pairing_title()}</h1>
|
|
|
|
{pending}
|
|
<div className="lg:grid lg:grid-cols-2 flex flex-col gap-card">
|
|
{native}
|
|
{moonlight}
|
|
</div>
|
|
{paired}
|
|
</div>
|
|
</Section>
|
|
);
|