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,92 @@
+import { Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import StorageCleanerConfirm from '@/pages/StorageCleaner/StorageCleanerConfirm';
+import { useStorageCleaner } from './useStorageCleaner';
+import StorageOptionsGrid from './StorageOptionsGrid';
+import AutoRefreshToggle from './AutoRefreshToggle';
+import ErrorDisplay from './ErrorDisplay';
+import CleaningResult from './CleaningResult';
+import { useI18n } from '@/utils/chromeI18n';
+
+export default function Index() {
+  const { t } = useI18n('storageCleaner');
+
+  const {
+    error,
+    isInitializing,
+    options,
+    sizes,
+    reloadAfterClean,
+    loading,
+    result,
+    showConfirm,
+    setShowConfirm,
+    allSelected,
+    someSelected,
+    handleReloadAfterCleanChange,
+    handleOptionChange,
+    handleSelectAll,
+    handleClean,
+  } = useStorageCleaner();
+
+  const isButtonDisabled = !(someSelected || allSelected) || loading;
+
+  if (isInitializing) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
+        <Loader2 className="h-6 w-6 text-muted-foreground/80" />
+        <span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
+          {t('storageCleaner:initializing')}
+        </span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return <ErrorDisplay error={error} />;
+  }
+
+  return (
+    <div className="p-4 w-full flex flex-col space-y-3.5">
+      <StorageOptionsGrid
+        options={options}
+        sizes={sizes}
+        allSelected={allSelected}
+        someSelected={someSelected}
+        onOptionChange={handleOptionChange}
+        onSelectAll={handleSelectAll}
+      />
+
+      <AutoRefreshToggle
+        reloadAfterClean={reloadAfterClean}
+        onChange={handleReloadAfterCleanChange}
+      />
+
+      <Button
+        variant="destructive"
+        size="default"
+        onClick={() => setShowConfirm(true)}
+        disabled={isButtonDisabled}
+        className="w-full h-10 font-bold shadow-sm text-sm tracking-wide"
+      >
+        {loading ? (
+          <>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            {t('storageCleaner:cleaning')}
+          </>
+        ) : (
+          t('storageCleaner:cleanNow')
+        )}
+      </Button>
+
+      <CleaningResult result={result} />
+
+      <StorageCleanerConfirm
+        open={showConfirm}
+        onClose={() => setShowConfirm(false)}
+        onConfirm={handleClean}
+        options={options}
+      />
+    </div>
+  );
+}