website refactor

apps/website/templates/layout/RootAppShellTemplate.tsx

@@ -1,17 +1,15 @@
 'use client';
 
 import { AppShell } from '@/components/app/AppShell';
+import { AppFooter } from '@/components/layout/AppFooter';
+import { AppHeader } from '@/components/layout/AppHeader';
+import { AppSidebar } from '@/components/layout/AppSidebar';
+import { MainContent } from '@/components/layout/MainContent';
 import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
 import { routes } from '@/lib/routing/RouteConfig';
-import { Box } from '@/ui/Box';
 import { ContentViewport } from '@/ui/ContentViewport';
-import { ControlBar } from '@/ui/ControlBar';
-import { TopNav } from '@/ui/TopNav';
 import { usePathname } from 'next/navigation';
 import React from 'react';
-import { GlobalFooterTemplate } from './GlobalFooterTemplate';
-import { GlobalSidebarTemplate } from './GlobalSidebarTemplate';
-import { HeaderContentTemplate } from './HeaderContentTemplate';
 
 export interface RootAppShellViewData {
   children: React.ReactNode;
@@ -20,9 +18,10 @@ export interface RootAppShellViewData {
 /**
  * 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
+ * - AppHeader = header/control bar
+ * - AppSidebar = sidebar rail
+ * - MainContent = content area wrapper
+ * - AppFooter = footer
  */
 export function RootAppShellTemplate({ children }: RootAppShellViewData) {
   const pathname = usePathname();
@@ -35,23 +34,19 @@ export function RootAppShellTemplate({ children }: RootAppShellViewData) {
 
   return (
     <AppShell>
-      <ControlBar>
-        <TopNav>
-          <HeaderContentTemplate />
-        </TopNav>
-      </ControlBar>
+      <AppHeader />
       
-      <Box display="flex" flexGrow={1} width="full">
-        {showSidebar && <GlobalSidebarTemplate />}
-        
-        <Box as="main" display="flex" flexGrow={1} flexDirection="col" minWidth="0">
-          <ContentViewport fullWidth={!showSidebar}>
-            {children}
-          </ContentViewport>
-        </Box>
-      </Box>
+      {showSidebar && <AppSidebar />}
 
-      <GlobalFooterTemplate />
+      <MainContent hasSidebar={showSidebar}>
+        <ContentViewport 
+          fullWidth={!showSidebar || isLandingPage} 
+          padding={isLandingPage ? 'none' : 'md'}
+        >
+          {children}
+        </ContentViewport>
+        <AppFooter />
+      </MainContent>
     </AppShell>
   );
 }