App init

apps/web/src/routes/__root.tsx

@@ -0,0 +1,67 @@
+import Header from "@/components/header";
+import Loader from "@/components/loader";
+import { ThemeProvider } from "@/components/theme-provider";
+import { Toaster } from "@/components/ui/sonner";
+import type { trpc } from "@/utils/trpc";
+import type { QueryClient } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import {
+	HeadContent,
+	Outlet,
+	createRootRouteWithContext,
+	useRouterState,
+} from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+import "../index.css";
+
+export interface RouterAppContext {
+	trpc: typeof trpc;
+	queryClient: QueryClient;
+}
+
+export const Route = createRootRouteWithContext<RouterAppContext>()({
+	component: RootComponent,
+	head: () => ({
+		meta: [
+			{
+				title: "Reflecto",
+			},
+			{
+				name: "description",
+				content: "Reflecto is a web application",
+			},
+		],
+		links: [
+			{
+				rel: "icon",
+				href: "/favicon.ico",
+			},
+		],
+	}),
+});
+
+function RootComponent() {
+	const isFetching = useRouterState({
+		select: (s) => s.isLoading,
+	});
+
+	return (
+		<>
+			<HeadContent />
+			<ThemeProvider
+				attribute="class"
+				defaultTheme="dark"
+				disableTransitionOnChange
+				storageKey="vite-ui-theme"
+			>
+				<div className="grid grid-rows-[auto_1fr] h-svh">
+					<Header />
+					{isFetching ? <Loader /> : <Outlet />}
+				</div>
+				<Toaster richColors />
+			</ThemeProvider>
+			<TanStackRouterDevtools position="bottom-left" />
+			<ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
+		</>
+	);
+}