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/pages/Status/StatusPage.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTheme } from '../../contexts';
-import { Content } from '../../components/layout/Content';
 import { TPattern } from '../../components/common/TPattern';
 import { getSystemStats, getSystemConfig, getSystemHealth, type SystemStats, type SystemConfig, type SystemHealth } from '../../api/status';
 import { getDocumentList, type DocInfo } from '../../api/docs';
@@ -107,7 +106,8 @@ export const StatusPage: React.FC = () => {
 
   // Initial load
   useEffect(() => {
-    void loadData();
+    const timerId = window.setTimeout(() => { void loadData(); }, 0);
+    return () => window.clearTimeout(timerId);
   }, [loadData]);
 
   // Auto-poll every 5 s while any document is still processing
@@ -119,7 +119,7 @@ export const StatusPage: React.FC = () => {
   }, [docs, loadData]);
 
   return (
-    <Content>
+    <div className="relative w-full">
       <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
       <TPattern />
 
@@ -386,6 +386,6 @@ export const StatusPage: React.FC = () => {
           </div>
         ))}
       </section>
-    </Content>
+    </div>
   );
 };