Add layout shell with header, footer, and theme toggle

frontend/src/components/layout/shell.tsx

@@ -0,0 +1,20 @@
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { globalsQuery, menusQuery } from '@/lib/queries'
+import { Header } from './header'
+import { Footer } from './footer'
+
+export function Shell({ children }: { children: React.ReactNode }) {
+  const { data: globals } = useSuspenseQuery(globalsQuery)
+  const { data: menus } = useSuspenseQuery(menusQuery)
+
+  const mainMenu = menus.find((m) => m.id === 'MAIN_MENU')
+  const footerMenu = menus.find((m) => m.id === 'FOOTER_MENU')
+
+  return (
+    <div className="mx-auto max-w-[90rem] px-4">
+      <Header globals={globals} menu={mainMenu} />
+      <main className="my-6">{children}</main>
+      <Footer globals={globals} menu={footerMenu} />
+    </div>
+  )
+}