improve web ui

2026-06-26 05:43:34 +00:00
parent 00cf51d610
commit 803573b4ec
73 changed files with 3373 additions and 2847 deletions
@@ -1,62 +1,78 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
-  createMemoryHistory,
-  createRootRoute,
-  createRoute,
-  createRouter,
-  RouterProvider,
-} from '@tanstack/react-router'
-import { AppShell } from '@/components/app-shell'
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { AppShell } from "@/components/app-shell";

 // AppShell is built from TanStack Router <Link>s, so it needs a router context.
 // We stand up a throwaway in-memory router whose routes mirror the nav targets
 // (so links resolve + the active highlight works) and render the shell from the
 // root route. No loaders/data — purely for designing the chrome offline.
 function ShellHarness({ initialPath }: { initialPath: string }) {
-  const rootRoute = createRootRoute({
-    component: () => (
-      <AppShell>
-        <div className="space-y-3">
-          <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
-          <p className="text-muted-foreground">
-            Placeholder content — swap routes from the sidebar to preview the active state.
-          </p>
-        </div>
-      </AppShell>
-    ),
-  })
+	const rootRoute = createRootRoute({
+		component: () => (
+			<AppShell>
+				<div className="space-y-3">
+					<h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
+					<p className="text-muted-foreground">
+						Placeholder content — swap routes from the sidebar to preview the
+						active state.
+					</p>
+				</div>
+			</AppShell>
+		),
+	});

-  const navPaths = ['/', '/host', '/library', '/clients', '/pairing', '/settings']
-  const navRoutes = navPaths.map((path) =>
-    createRoute({ getParentRoute: () => rootRoute, path, component: () => null }),
-  )
-  // Splat so any other <Link> target still resolves without throwing.
-  const splat = createRoute({ getParentRoute: () => rootRoute, path: '$', component: () => null })
+	const navPaths = [
+		"/",
+		"/host",
+		"/library",
+		"/clients",
+		"/pairing",
+		"/settings",
+	];
+	const navRoutes = navPaths.map((path) =>
+		createRoute({
+			getParentRoute: () => rootRoute,
+			path,
+			component: () => null,
+		}),
+	);
+	// Splat so any other <Link> target still resolves without throwing.
+	const splat = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "$",
+		component: () => null,
+	});

-  const router = createRouter({
-    routeTree: rootRoute.addChildren([...navRoutes, splat]),
-    history: createMemoryHistory({ initialEntries: [initialPath] }),
-  })
+	const router = createRouter({
+		routeTree: rootRoute.addChildren([...navRoutes, splat]),
+		history: createMemoryHistory({ initialEntries: [initialPath] }),
+	});

-  return <RouterProvider router={router} />
+	return <RouterProvider router={router} />;
 }

 const meta = {
-  title: 'Shell/AppShell',
-  component: AppShell,
-  parameters: { layout: 'fullscreen' },
-  // AppShell requires `children`; the harness supplies the real content, so this
-  // placeholder just satisfies the arg type.
-  args: { children: null },
-} satisfies Meta<typeof AppShell>
+	title: "Shell/AppShell",
+	component: AppShell,
+	parameters: { layout: "fullscreen" },
+	// AppShell requires `children`; the harness supplies the real content, so this
+	// placeholder just satisfies the arg type.
+	args: { children: null },
+} satisfies Meta<typeof AppShell>;

-export default meta
-type Story = StoryObj<typeof meta>
+export default meta;
+type Story = StoryObj<typeof meta>;

 export const Dashboard: Story = {
-  render: () => <ShellHarness initialPath="/" />,
-}
+	render: () => <ShellHarness initialPath="/" />,
+};

 export const HostActive: Story = {
-  render: () => <ShellHarness initialPath="/host" />,
-}
+	render: () => <ShellHarness initialPath="/host" />,
+};