feat(web): frontend foundation — Tailwind terminal theme, Query, Router, Zustand + live booth screen
Add tailwindcss (Bloomberg-terminal theme in index.css), @tanstack/react-query + react-router, zustand, and Radix primitives. Router with role-guarded routes; QueryClient wrapping the existing apiFetch; a small Zustand live store fed by a /api/ws client that invalidates Query caches. Booth screen: live occupancy gauge + streaming entry/exit/payment feed. Vite proxies the WS upgrade. Note: BoothScreen references the pay/exit modal + active-sessions panel added in following commits; final HEAD builds.
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
import { QueryClient } from "@tanstack/react-query";
|
||||
|
||||
// Single QueryClient for the app. TanStack Query owns SERVER state (fetch, cache,
|
||||
// refetch, loading/error) — wrapping the existing thin api.ts fetchers. Client/UI
|
||||
// state (live feed, WS status) lives in Zustand, not here. The WS layer invalidates
|
||||
// these caches on live events so Query stays the source of truth for server data.
|
||||
//
|
||||
// Defaults tuned for a single-appliance booth: no window-focus refetch (it's a
|
||||
// kiosk, not a tab someone switches to), and a short staleTime since the WS is the
|
||||
// real freshness mechanism — queries are the fallback/initial load.
|
||||
export const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
refetchOnWindowFocus: false,
|
||||
staleTime: 5_000,
|
||||
retry: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
/** Stable query keys — referenced by both the screens and the WS invalidator. */
|
||||
export const qk = {
|
||||
me: ["me"] as const,
|
||||
occupancy: ["occupancy"] as const,
|
||||
events: ["events"] as const,
|
||||
activeSessions: ["active-sessions"] as const,
|
||||
siteConfig: ["site-config"] as const,
|
||||
} as const;
|
||||
Reference in New Issue
Block a user