LingandRX
945780def8
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.
58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
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>
|
|
);
|
|
}
|