Add layout shell with header, footer, and theme toggle

frontend/src/routes/__root.tsx

@@ -1,21 +1,22 @@
 import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'
 import type { QueryClient } from '@tanstack/react-query'
 import { lazy, Suspense } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { useSuspenseQuery } from '@tanstack/react-query'
 import { globalsQuery, menusQuery } from '@/lib/queries'
+import { Shell } from '@/components/layout/shell'
 
-const TanStackRouterDevtools =
-  import.meta.env.PROD
-    ? () => null
-    : lazy(() =>
-        import('@tanstack/react-router-devtools').then((m) => ({ default: m.TanStackRouterDevtools })),
-      )
+const TanStackRouterDevtools = import.meta.env.PROD
+  ? () => null
+  : lazy(() =>
+      import('@tanstack/react-router-devtools').then((m) => ({ default: m.TanStackRouterDevtools })),
+    )
 
-const ReactQueryDevtools =
-  import.meta.env.PROD
-    ? () => null
-    : lazy(() =>
-        import('@tanstack/react-query-devtools').then((m) => ({ default: m.ReactQueryDevtools })),
-      )
+const ReactQueryDevtools = import.meta.env.PROD
+  ? () => null
+  : lazy(() =>
+      import('@tanstack/react-query-devtools').then((m) => ({ default: m.ReactQueryDevtools })),
+    )
 
 export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
   loader: async ({ context: { queryClient } }) => {
@@ -25,9 +26,15 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
 })
 
 function RootComponent() {
+  const { data: globals } = useSuspenseQuery(globalsQuery)
   return (
     <>
-      <Outlet />
+      <Helmet defaultTitle={globals.meta_title} titleTemplate={`%s — ${globals.meta_title}`}>
+        <meta name="description" content={globals.meta_description} />
+      </Helmet>
+      <Shell>
+        <Outlet />
+      </Shell>
       <Suspense>
         <TanStackRouterDevtools />
         <ReactQueryDevtools buttonPosition="bottom-left" />