website refactor

apps/website/templates/layout/RootAppShellTemplate.tsx

@@ -1,13 +1,12 @@
 '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 { ContentViewport } from '@/ui/ContentViewport';
+import { Layout } from '@/ui/Layout';
+import { Container } from '@/ui/Container';
 import { usePathname } from 'next/navigation';
 import React from 'react';
 
@@ -17,11 +16,7 @@ export interface RootAppShellViewData {
 
 /**
  * RootAppShellTemplate orchestrates the top-level semantic shells of the application.
- * It follows the "Telemetry Workspace" structure:
- * - AppHeader = header/control bar
- * - AppSidebar = sidebar rail
- * - MainContent = content area wrapper
- * - AppFooter = footer
+ * It uses the canonical ui/Layout component to define the app frame.
  */
 export function RootAppShellTemplate({ children }: RootAppShellViewData) {
   const pathname = usePathname();
@@ -33,20 +28,19 @@ export function RootAppShellTemplate({ children }: RootAppShellViewData) {
   const showSidebar = isAuthenticated && !isLandingPage;
 
   return (
-    <AppShell>
-      <AppHeader />
-      
-      {showSidebar && <AppSidebar />}
-
-      <MainContent hasSidebar={showSidebar}>
-        <ContentViewport 
-          fullWidth={!showSidebar || isLandingPage} 
-          padding={isLandingPage ? 'none' : 'md'}
-        >
-          {children}
-        </ContentViewport>
-        <AppFooter />
-      </MainContent>
-    </AppShell>
+    <Layout
+      header={<AppHeader />}
+      sidebar={showSidebar ? <AppSidebar /> : undefined}
+      footer={<AppFooter />}
+      fixedHeader
+      fixedSidebar
+    >
+      <Container 
+        size={isLandingPage ? 'full' : 'xl'} 
+        py={isLandingPage ? 0 : 8}
+      >
+        {children}
+      </Container>
+    </Layout>
   );
 }