Develop (#55)

feat: optimize dashboard/search UX and simplify extension architecture Redesign Dashboard with compact tool grid and recently used tools Improve TopBar search UX with Cmd/Ctrl+K shortcut and better history navigation Reorganize project structure into src/ Migrate i18n from react-i18next to chrome.i18n Remove runtime language switch and settings page Remove HTML/Markdown conversion tools Clean up unused code, dead animations, redundant comments, and imports Improve component consistency with shadcn/ui patterns Replace hardcoded strings/colors with i18n tokens and theme tokens Add comprehensive project documentation and coding standards Fix CI artifact upload workflow and multiple TypeScript/test issues Includes various refactors, UI polish, i18n cleanup, CI improvements, and maintenance updates across the codebase.
2026-05-28 22:39:25 +08:00
parent d4c29a1bf4
commit 945780def8
200 changed files with 1557 additions and 4380 deletions
@@ -0,0 +1,57 @@
+import { FEATURES, getEntryPointType } from '@/config/features';
+import { useRouter } from '@/providers/RouterProvider';
+import { Suspense, useMemo } from 'react';
+import { useI18n } from '@/utils/chromeI18n';
+import PageErrorBoundary from '@/components/PageErrorBoundary';
+import PageSkeleton from '@/components/PageSkeleton';
+import { cn } from '@/lib/utils';
+import { AlertTriangle } from 'lucide-react';
+
+export default function RouterContainer() {
+  const { currentPage, isLoaded } = useRouter();
+  const { t } = useI18n('common');
+
+  const animationClass = useMemo(() => {
+    return currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
+  }, [currentPage]);
+
+  const entryPointType = getEntryPointType();
+
+  if (!isLoaded) {
+    return <PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />;
+  }
+
+  const currentFeature = FEATURES.find((f) => f.key === currentPage);
+  const MatchedComponent = currentFeature?.components?.[entryPointType];
+
+  return (
+    <div
+      key={currentPage}
+      className={cn(
+        'flex-1 flex flex-col overflow-x-hidden overflow-y-auto',
+        'scrollbar-gutter-stable motion-reduce:transition-none',
+        animationClass,
+      )}
+    >
+      <Suspense
+        fallback={<PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />}
+      >
+        <PageErrorBoundary resetKey={currentPage}>
+          {MatchedComponent ? (
+            <MatchedComponent />
+          ) : (
+            <div className="flex-1 flex flex-col items-center justify-center p-8 text-center animate-in fade-in duration-300">
+              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-destructive/10 text-destructive mb-4">
+                <AlertTriangle className="h-6 w-6" />
+              </div>
+              <h3 className="text-sm font-semibold text-foreground">{t('router.notFound')}</h3>
+              <p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
+                {t('router.notFoundDescription', { entryPointType })}
+              </p>
+            </div>
+          )}
+        </PageErrorBoundary>
+      </Suspense>
+    </div>
+  );
+}