feat: implement new layout components and routing structure

- Added HeaderLayout component for the application header.
- Introduced KeepAliveViewport for managing tab states and rendering.
- Created TabNav for tab navigation with animated indicator.
- Removed old Tabs component in favor of new layout structure.
- Updated routing with AppRouter and defined appTabs for navigation.
- Enhanced theme context to manage dark mode styles.
- Added new UI components: Badge, Button, Separator, and Tabs.
- Refactored pages to utilize new layout components and improve responsiveness.
- Updated global styles for better theming and layout consistency.
- Introduced TypeScript path aliases for cleaner imports.

frontend/src/contexts/AppContext.tsx

@@ -1,17 +0,0 @@
-import { useState, type ReactNode } from 'react';
-
-import { AppContext, type TabId } from './app-context';
-
-interface AppProviderProps {
-  children: ReactNode;
-}
-
-export const AppProvider: React.FC<AppProviderProps> = ({ children }) => {
-  const [activeTab, setActiveTab] = useState<TabId>('compliance');
-
-  return (
-    <AppContext.Provider value={{ activeTab, setActiveTab }}>
-      {children}
-    </AppContext.Provider>
-  );
-};

frontend/src/contexts/ThemeContext.tsx

@@ -16,13 +16,14 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   };
 
   useEffect(() => {
+    document.documentElement.classList.toggle('dark', isDark);
+    document.body.classList.toggle('dark-mode', isDark);
+
     if (isDark) {
-      document.documentElement.classList.add('dark');
       document.body.style.background = '#0a0a12';
       return;
     }
 
-    document.documentElement.classList.remove('dark');
     document.body.style.background = '#ffffff';
   }, [isDark]);
 

frontend/src/contexts/app-context.ts

@@ -1,10 +0,0 @@
-import { createContext } from 'react';
-
-export type TabId = 'perception' | 'docs' | 'compliance' | 'status' | 'rag';
-
-export interface AppContextValue {
-  activeTab: TabId;
-  setActiveTab: (tab: TabId) => void;
-}
-
-export const AppContext = createContext<AppContextValue | undefined>(undefined);

frontend/src/contexts/index.ts

@@ -1,5 +1,2 @@
 export { ThemeProvider } from './ThemeContext';
 export { useTheme } from './useTheme';
-export { AppProvider } from './AppContext';
-export type { AppContextValue, TabId } from './app-context';
-export { useApp } from './useApp';

frontend/src/contexts/useApp.ts

@@ -1,11 +0,0 @@
-import { useContext } from 'react';
-
-import { AppContext, type AppContextValue } from './app-context';
-
-export function useApp(): AppContextValue {
-  const context = useContext(AppContext);
-  if (!context) {
-    throw new Error('useApp must be used within an AppProvider');
-  }
-  return context;
-}