Develop fastapi (#6)

* feat: add side panel with navigation and storage cleaner functionality

* feat: add OpenUrlPage and integrate into app navigation

* feat: 添加 GlobalSnackbar 组件并在多个页面中集成，替换原有 Snackbar 实现

* feat: fix OpenUrl sidebar issue with architecture refactor

- 修复原问题：不再直接替换侧边栏 URL，保持插件导航可见
- 采用配置页 + 查看页分离架构：OpenUrlPage (配置) + OpenUrlViewerPage (查看)
- 支持多个 URL 快捷方式管理（添加/删除）
- 每个 URL 提供两种打开方式：在侧边栏打开 / 在新标签页打开
- 侧边栏查看页使用 iframe 占满全部剩余空间
- 更新 TypeScript 类型定义
- 保留原有混合内容警告检查
- 数据持久化到 Chrome Storage

* refactor: centralized route management - consolidate routing config into single source

* feat: 更换logo

* refactor: code review fixes - security and race condition improvements

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

Changes:

- wxt.config.ts: Remove unused `debugger` permission (no code uses it)
- OpenUrlPage.tsx: Fix unreachable showMessage after window.close()
- OpenUrlPage.tsx: Replace unnecessary div wrapper with Fragment to reduce DOM nesting
- OpenUrlViewerPage.tsx: Add URL validation to prevent XSS via javascript:/data: URLs
- OpenUrlViewerPage.tsx: Add sandbox attribute to iframe for security isolation
- OpenUrlViewerPage.tsx: Add error handling for invalid URLs
- StorageCleanerPage.tsx: Fix race condition in handleOptionChange preference saving
- StorageCleanerPage.tsx: Remove unnecessary storage reads when saving preferences (use state directly)
- StorageCleanerPage.tsx: Add timeout cleanup for setTimeout to follow React best practices

* feat: implement drill-down navigation with master-detail dashboard

* feat: enhance dashboard dynamism and refine options UI

* feat: overhaul storage cleaner UI with real-time size estimation and modern aesthetics

* feat: overhaul TimestampPage UI/UX and fix GlobalSnackbar positioning

* fix: decouple popup routing from storage sync and enhance OpenUrlPage UI

* fix: avoid closing sidepanel when opening URL preview from within sidepanel

entrypoints/popup/App.tsx

@@ -1,113 +1,20 @@
-import { useState, useEffect } from 'react';
-import { Box } from '@mui/material';
-import SettingsIcon from '@mui/icons-material/Settings';
-import type { PageType } from '@/types/storage';
-import { storageUtil } from '@/utils/chromeStorage';
-import TimestampPage from './pages/TimestampPage';
-import StorageCleanerPage from './pages/StorageCleanerPage';
 import './App.css';
-
-
-const PAGE_CONFIG = {
-  timestamp: { label: '时间戳', defaultVisible: true },
-  storageCleaner: { label: '存储清理', defaultVisible: true },
-} as const satisfies Record<PageType, { label: string; defaultVisible: boolean }>;
+import RouterProvider from '@/providers/RouterProvider';
+import TopBar from '@/components/TopBar';
+import RouterContainer from '@/components/RouterContainer';
 
 function App() {
-  const [currentPage, setCurrentPage] = useState<PageType>('timestamp');
-  const [visiblePages, setVisiblePages] = useState<PageType[]>(['timestamp', 'storageCleaner']);
-  const [isLoaded, setIsLoaded] = useState(false);
-
-  useEffect(() => {
-    loadInitialData();
-  }, []);
-
-  useEffect(() => {
-    if (isLoaded) {
-      storageUtil.set('app/currentRoute', currentPage);
-    }
-  }, [currentPage, isLoaded]);
-
-  const loadInitialData = async () => {
-    try {
-      const [savedRoute, savedVisiblePages] = await Promise.all([
-        storageUtil.get('app/currentRoute', 'timestamp'),
-        storageUtil.get('app/visiblePages', ['timestamp', 'storageCleaner'] as PageType[]),
-      ]);
-
-      if (savedRoute) {
-        setCurrentPage(savedRoute);
-      }
-
-      if (savedVisiblePages) {
-        setVisiblePages(savedVisiblePages);
-      }
-    } catch (error) {
-      console.error('Failed to load initial data:', error);
-    } finally {
-      setIsLoaded(true);
-    }
-  };
-
-  const handlePageChange = (page: PageType) => {
-    setCurrentPage(page);
-  };
-
   const handleOpenOptions = () => {
     chrome.runtime.openOptionsPage();
   };
 
-  const NavButton = ({ pageKey }: { pageKey: PageType }) => {
-    const config = PAGE_CONFIG[pageKey];
-    if (!config) return null;
-
-    return (
-      <Box key={pageKey}>
-        <button
-          className={currentPage === pageKey ? 'nav-button active' : 'nav-button'}
-          onClick={() => handlePageChange(pageKey)}
-        >
-          {config.label}
-        </button>
-      </Box>
-    );
-  };
-
-  if (!isLoaded) {
-    return <div className="app">Loading...</div>;
-  }
-
   return (
-    <div className="app">
-      <Box className="nav-container">
-        {(Object.keys(PAGE_CONFIG) as PageType[])
-          .filter((key) => visiblePages.includes(key))
-          .map((key) => <NavButton key={key} pageKey={key} />)}
-        <Box key="settings" sx={{ display: 'inline-block' }}>
-          <button
-            className="nav-button settings-button"
-            onClick={handleOpenOptions}
-            title="打开设置"
-          >
-            <SettingsIcon sx={{ fontSize: 18, verticalAlign: 'middle' }} />
-          </button>
-        </Box>
-      </Box>
-      
-      {/* 统一滚动容器 */}
-      <Box 
-        sx={{ 
-          flex: 1, 
-          overflowY: 'auto', 
-          scrollbarGutter: 'stable',
-          display: 'flex',
-          flexDirection: 'column'
-        }}
-      >
-        {currentPage === 'timestamp' && <TimestampPage />}
-        {currentPage === 'storageCleaner' && <StorageCleanerPage />}
-      </Box>
-    </div>
+    <RouterProvider defaultRoute="dashboard" syncRoute={false}>
+      <div className="app" style={{ display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden' }}>
+        <TopBar onOpenOptions={handleOpenOptions} />
+        <RouterContainer />
+      </div>
+    </RouterProvider>
   );
 }