feat: add theme-based layouts

Each theme now has a unique layout:
- Light: Standard fixed sidebar
- Vibrant: Horizontal top navigation
- Corporate: Compact sidebar (expands on hover)
- Dark: Floating sidebar with glass effect

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/web/themes/corporate.ts

@@ -1,7 +1,7 @@
 export const corporateTheme = {
   name: 'corporate' as const,
   label: 'Corporate',
-  layout: 'multi-panel',
+  layout: 'sidebar-compact' as const,
   cssVars: {
     '--background': '210 20% 96%',
     '--foreground': '210 50% 10%',
@@ -24,9 +24,4 @@ export const corporateTheme = {
     '--ring': '210 100% 25%',
     '--radius': '0.25rem',
   },
-  sidebar: {
-    width: '200px',
-    collapsible: false,
-  },
-  density: 'compact',
 };

apps/web/themes/dark.ts

@@ -1,7 +1,7 @@
 export const darkTheme = {
   name: 'dark' as const,
   label: 'Dark',
-  layout: 'minimal-floating',
+  layout: 'sidebar-floating' as const,
   cssVars: {
     '--background': '0 0% 3.9%',
     '--foreground': '0 0% 98%',
@@ -24,13 +24,4 @@ export const darkTheme = {
     '--ring': '187.2 85.7% 53.3%',
     '--radius': '0.75rem',
   },
-  sidebar: {
-    width: '64px',
-    collapsible: false,
-    iconsOnly: true,
-  },
-  effects: {
-    blur: '10px',
-    glow: '0 0 20px rgba(34,211,238,0.3)',
-  },
 };

apps/web/themes/index.ts

@@ -12,5 +12,6 @@ export const themes = {
 
 export type ThemeName = keyof typeof themes;
 export type Theme = (typeof themes)[ThemeName];
+export type LayoutType = 'sidebar-standard' | 'topnav' | 'sidebar-compact' | 'sidebar-floating';
 
 export { lightTheme, vibrantTheme, corporateTheme, darkTheme };

apps/web/themes/light.ts

@@ -1,7 +1,7 @@
 export const lightTheme = {
   name: 'light' as const,
   label: 'Light',
-  layout: 'sidebar-fixed',
+  layout: 'sidebar-standard' as const,
   cssVars: {
     '--background': '0 0% 100%',
     '--foreground': '222.2 84% 4.9%',
@@ -24,8 +24,4 @@ export const lightTheme = {
     '--ring': '221.2 83.2% 53.3%',
     '--radius': '0.5rem',
   },
-  sidebar: {
-    width: '240px',
-    collapsible: false,
-  },
 };

apps/web/themes/vibrant.ts

@@ -1,7 +1,7 @@
 export const vibrantTheme = {
   name: 'vibrant' as const,
   label: 'Vibrant',
-  layout: 'sidebar-collapsible',
+  layout: 'topnav' as const,
   cssVars: {
     '--background': '270 50% 98%',
     '--foreground': '263.4 84% 6.7%',
@@ -24,8 +24,4 @@ export const vibrantTheme = {
     '--ring': '262.1 83.3% 57.8%',
     '--radius': '1rem',
   },
-  sidebar: {
-    width: '280px',
-    collapsible: true,
-  },
 };