Add layout shell with header, footer, and theme toggle

frontend/src/main.tsx

@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { HelmetProvider } from 'react-helmet-async'
 import { routeTree } from '@generated/tanstack-router/routeTree.gen'
+import { ThemeProvider } from './components/theme-provider'
 import './index.css'
 
 const queryClient = new QueryClient({
@@ -31,9 +32,11 @@ declare module '@tanstack/react-router' {
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <HelmetProvider>
-      <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
-      </QueryClientProvider>
+      <ThemeProvider>
+        <QueryClientProvider client={queryClient}>
+          <RouterProvider router={router} />
+        </QueryClientProvider>
+      </ThemeProvider>
     </HelmetProvider>
   </StrictMode>,
 )