website refactor

apps/website/templates/layout/RootAppShellTemplate.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import React from 'react';
+import { AppShell } from '@/ui/AppShell';
+import { ControlBar } from '@/ui/ControlBar';
+import { TopNav } from '@/ui/TopNav';
+import { ContentViewport } from '@/ui/ContentViewport';
+import { GlobalSidebarTemplate } from './GlobalSidebarTemplate';
+import { GlobalFooterTemplate } from './GlobalFooterTemplate';
+import { HeaderContentTemplate } from './HeaderContentTemplate';
+import { Box } from '@/ui/Box';
+
+export interface RootAppShellViewData {
+  children: React.ReactNode;
+}
+
+/**
+ * RootAppShellTemplate orchestrates the top-level semantic shells of the application.
+ * It follows the "Telemetry Workspace" structure:
+ * - ControlBar = header/control bar
+ * - DashboardRail = sidebar rail
+ * - ContentViewport = content area
+ */
+export function RootAppShellTemplate({ children }: RootAppShellViewData) {
+  return (
+    <AppShell>
+      <ControlBar>
+        <TopNav>
+          <HeaderContentTemplate />
+        </TopNav>
+      </ControlBar>
+      
+      <Box display="flex" flexGrow={1} overflow="hidden">
+        <GlobalSidebarTemplate />
+        
+        <Box display="flex" flexGrow={1} flexDirection="col" overflow="hidden">
+          <ContentViewport>
+            {children}
+          </ContentViewport>
+          <GlobalFooterTemplate />
+        </Box>
+      </Box>
+    </AppShell>
+  );
+}