feat(web): consolidate paired devices, self-contained sections, docs + lint
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>
This commit is contained in:
@@ -1,8 +1,13 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { MoonlightPairing } from "@/sections/Pairing/MoonlightPairingCard";
|
||||
import { NativePairingCard } from "@/sections/Pairing/NativePairingCard";
|
||||
import { PairedDevices } from "@/sections/Pairing/PairedDevices";
|
||||
import { PendingDevices } from "@/sections/Pairing/PendingDevices";
|
||||
import { PairingView } from "@/sections/Pairing/view";
|
||||
import {
|
||||
nativeClients,
|
||||
nativePairArmed,
|
||||
pairedClients,
|
||||
pairingIdle,
|
||||
pendingDevices,
|
||||
} from "./lib/fixtures";
|
||||
@@ -10,39 +15,70 @@ import {
|
||||
const noop = () => {};
|
||||
const idle = { isLoading: false, error: null, refetch: noop };
|
||||
|
||||
// Renders the REAL page layout (PairingView) — the same component index.tsx uses. The live page
|
||||
// fills its slots with the self-contained containers; here we fill them with the pure cards + mock
|
||||
// state, so there's no duplicated composition to drift.
|
||||
const meta = {
|
||||
title: "Pages/Pairing",
|
||||
component: PairingView,
|
||||
parameters: { layout: "padded" },
|
||||
args: {
|
||||
onApprove: noop,
|
||||
onDeny: noop,
|
||||
pendingBusy: false,
|
||||
onArm: noop,
|
||||
onDisarm: noop,
|
||||
isArming: false,
|
||||
isDisarming: false,
|
||||
onUnpair: noop,
|
||||
isUnpairing: false,
|
||||
pin: "",
|
||||
onPinChange: noop,
|
||||
onSubmitPin: noop,
|
||||
isSubmittingPin: false,
|
||||
pinSuccess: false,
|
||||
pinError: false,
|
||||
},
|
||||
} satisfies Meta<typeof PairingView>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
// The marketing state: a PIN armed for a phone, one device knocking for delegated
|
||||
// approval, two already-paired native clients.
|
||||
// The marketing state: one device knocking for delegated approval, a PIN armed for a phone, the
|
||||
// consolidated paired-devices list (native + Moonlight), idle Moonlight pairing.
|
||||
export const Armed: Story = {
|
||||
args: {
|
||||
pending: { data: pendingDevices, ...idle },
|
||||
native: { data: nativePairArmed, ...idle },
|
||||
clients: { data: nativeClients, ...idle },
|
||||
moonlight: { data: pairingIdle, ...idle },
|
||||
pending: (
|
||||
<PendingDevices
|
||||
pending={{ data: pendingDevices, ...idle }}
|
||||
onApprove={noop}
|
||||
onDeny={noop}
|
||||
busy={false}
|
||||
/>
|
||||
),
|
||||
native: (
|
||||
<NativePairingCard
|
||||
status={{ data: nativePairArmed, ...idle }}
|
||||
onArm={noop}
|
||||
onDisarm={noop}
|
||||
isArming={false}
|
||||
isDisarming={false}
|
||||
/>
|
||||
),
|
||||
moonlight: (
|
||||
<MoonlightPairing
|
||||
pairing={{ data: pairingIdle, ...idle }}
|
||||
pin=""
|
||||
onPinChange={noop}
|
||||
onSubmit={noop}
|
||||
isSubmitting={false}
|
||||
isSuccess={false}
|
||||
isError={false}
|
||||
/>
|
||||
),
|
||||
paired: (
|
||||
<PairedDevices
|
||||
rows={[
|
||||
...nativeClients.map((c) => ({
|
||||
protocol: "native" as const,
|
||||
fingerprint: c.fingerprint,
|
||||
name: c.name,
|
||||
})),
|
||||
...pairedClients.map((c) => ({
|
||||
protocol: "moonlight" as const,
|
||||
fingerprint: c.fingerprint,
|
||||
name: c.subject ?? "",
|
||||
})),
|
||||
]}
|
||||
isLoading={false}
|
||||
error={null}
|
||||
refetch={noop}
|
||||
onUnpair={noop}
|
||||
isUnpairing={false}
|
||||
/>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user