improve web ui

web/src/stories/QueryState.stories.tsx

@@ -1,36 +1,42 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { QueryState } from '@/components/query-state'
-import { ApiError } from '@/api/fetcher'
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ApiError } from "@/api/fetcher";
+import { QueryState } from "@/components/query-state";
 
 // QueryState is the uniform loading/error wrapper every data-backed route uses —
 // the most useful thing to design WITHOUT a running host, since its three states
 // (loading spinner / error / unauthorized) never appear together live.
 const Loaded = () => (
-  <div className="rounded-lg border p-4 text-sm">Loaded content renders here.</div>
-)
+	<div className="rounded-lg border p-4 text-sm">
+		Loaded content renders here.
+	</div>
+);
 
 const meta = {
-  title: 'Patterns/QueryState',
-  component: QueryState,
-  args: { children: <Loaded /> },
-} satisfies Meta<typeof QueryState>
+	title: "Patterns/QueryState",
+	component: QueryState,
+	args: { children: <Loaded /> },
+} satisfies Meta<typeof QueryState>;
 
-export default meta
-type Story = StoryObj<typeof meta>
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 export const Loading: Story = {
-  args: { isLoading: true, error: null },
-}
+	args: { isLoading: true, error: null },
+};
 
 export const ErrorWithRetry: Story = {
-  args: { isLoading: false, error: new Error('connection refused'), refetch: () => {} },
-}
+	args: {
+		isLoading: false,
+		error: new Error("connection refused"),
+		refetch: () => {},
+	},
+};
 
 export const Unauthorized: Story = {
-  args: { isLoading: false, error: new ApiError(401, null) },
-}
+	args: { isLoading: false, error: new ApiError(401, null) },
+};
 
 export const Loaded_: Story = {
-  name: 'Success',
-  args: { isLoading: false, error: null },
-}
+	name: "Success",
+	args: { isLoading: false, error: null },
+};