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,67 @@
+/**
+ * 自动刷新开关组件
+ *
+ * 用于 StorageCleaner 页面，控制是否自动刷新存储数据列表。
+ * 以卡片形式展示，左侧为标签文本，右侧为 shadcn/ui Switch 开关。
+ *
+ * @example
+ * ```tsx
+ * <AutoRefreshToggle
+ *   reloadAfterClean={reloadAfterClean}
+ *   onChange={(checked) => setReloadAfterClean(checked)}
+ * />
+ * ```
+ */
+
+import React from 'react';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+
+export interface AutoRefreshToggleProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onChange'
+> {
+  /** 开关的当前状态（受控） */
+  reloadAfterClean: boolean;
+  /** 状态变化时的回调函数 */
+  onChange: (checked: boolean) => void;
+}
+
+/**
+ * 自动刷新开关
+ *
+ * @param reloadAfterClean - 当前开关状态
+ * @param onChange - 状态变化回调，接收新的布尔值
+ * @param className - 额外的 CSS 类名，用于覆盖或扩展样式
+ * @param props - 透传给外层 div 的其他 HTML 属性
+ */
+export default function AutoRefreshToggle({
+  reloadAfterClean,
+  onChange,
+  className,
+  ...props
+}: AutoRefreshToggleProps) {
+  const { t } = useI18n('storageCleaner');
+
+  return (
+    <div
+      className={cn(
+        'w-full p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex justify-between items-center',
+        className,
+      )}
+      {...props}
+    >
+      {/* Label 与 Switch 通过 htmlFor + id 关联，支持点击文字触发开关 */}
+      <Label
+        htmlFor="auto-refresh-switch"
+        className="text-sm font-bold text-foreground cursor-pointer select-none tracking-tight"
+      >
+        {t('storageCleaner:autoRefresh')}
+      </Label>
+
+      <Switch id="auto-refresh-switch" checked={reloadAfterClean} onCheckedChange={onChange} />
+    </div>
+  );
+}
@@ -0,0 +1,43 @@
+import React from 'react';
+import { CheckCircle, XCircle } from 'lucide-react';
+import type { CleaningResult as CleaningResultType } from '@/types/storage';
+import { formatCleaningResult } from '@/utils/storageCleaner';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+
+interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
+  result: CleaningResultType | null;
+}
+
+export default function CleaningResult({ result, className, ...props }: CleaningResultProps) {
+  const { t } = useI18n('storageCleaner');
+
+  if (!result) return null;
+
+  const isSuccess = result.success;
+
+  return (
+    <div className={cn('w-full', className)} {...props}>
+      <div
+        className={cn(
+          'flex items-start gap-3 rounded-xl py-2.5 px-3.5 border shadow-sm',
+          isSuccess
+            ? 'bg-emerald-500/5 border-emerald-500/20 text-emerald-600 dark:text-emerald-400'
+            : 'bg-destructive/5 border-destructive/20 text-destructive',
+        )}
+      >
+        {isSuccess ? (
+          <CheckCircle className="h-4 w-4 shrink-0 mt-0.5 text-emerald-500" />
+        ) : (
+          <XCircle className="h-4 w-4 shrink-0 mt-0.5 text-destructive" />
+        )}
+
+        <span className="text-xs sm:text-sm font-semibold leading-relaxed break-all">
+          {isSuccess
+            ? formatCleaningResult(result, t)
+            : result.error || t('storageCleaner:partialFailure')}
+        </span>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,35 @@
+import { AlertCircle } from 'lucide-react';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+
+interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
+  error: string;
+}
+
+export default function ErrorDisplay({ error, className, ...props }: ErrorDisplayProps) {
+  const { t } = useI18n('storageCleaner');
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center py-8 min-h-[240px] sm:min-h-[360px] p-4 text-center',
+        className,
+      )}
+      {...props}
+    >
+      <div className="w-full max-w-xs flex flex-col items-center justify-center rounded-xl p-5 border border-destructive/20 bg-destructive/5 shadow-sm">
+        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 text-destructive mb-3.5 shrink-0">
+          <AlertCircle className="h-5 w-5" />
+        </div>
+
+        <p className="text-sm font-semibold leading-relaxed text-destructive break-all px-1 mb-2">
+          {error}
+        </p>
+
+        <p className="text-xs font-medium leading-relaxed text-muted-foreground/90 px-2">
+          {t('storageCleaner:errorStandardOnly')}
+        </p>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,70 @@
+import React from 'react';
+import { formatSize } from '@/utils/storageCleaner';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+// 引入官方的 Checkbox 原子组件
+import { Checkbox } from '@/components/ui/checkbox';
+
+interface OptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  labelKey: string;
+  checked: boolean;
+  size?: number;
+  isCount?: boolean;
+  onChange: () => void;
+}
+
+export default function OptionItem({
+  labelKey,
+  checked,
+  size,
+  isCount = false,
+  onChange,
+  className,
+  ...props
+}: OptionItemProps) {
+  const { t } = useI18n('storageCleaner');
+
+  return (
+    <div
+      onClick={onChange}
+      className={cn(
+        'flex justify-between items-center py-2.5 px-3.5 rounded-xl border cursor-pointer select-none',
+        checked
+          ? 'bg-primary/5 border-primary/30 shadow-sm'
+          : 'bg-transparent border-transparent hover:bg-muted/70',
+        className,
+      )}
+      {...props}
+    >
+      {/* 左侧数据区域 */}
+      <div className="flex-1 min-w-0 mr-4">
+        <span
+          className={cn(
+            'block text-xs font-semibold leading-tight truncate',
+            checked ? 'text-foreground font-bold' : 'text-foreground/80',
+          )}
+        >
+          {t(labelKey)}
+        </span>
+
+        {/* 底部容量大小或计数标识 */}
+        {size !== undefined && size > 0 ? (
+          <span className="block text-[10px] font-mono font-medium text-muted-foreground/80 mt-0.5 tabular-nums">
+            {isCount ? `${size} ${t('storageCleaner:countUnit')}` : formatSize(size)}
+          </span>
+        ) : (
+          <span className="block text-[10px] font-medium text-muted-foreground/60 mt-0.5 italic">
+            {t('storageCleaner:noData')}
+          </span>
+        )}
+      </div>
+
+      <Checkbox
+        checked={checked}
+        onClick={(e) => e.stopPropagation()}
+        onCheckedChange={onChange}
+        className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+      />
+    </div>
+  );
+}
@@ -0,0 +1,100 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { AlertTriangle } from 'lucide-react';
+import type { StorageCleanerOptions } from '@/types/storage';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+
+export interface StorageCleanerConfirmProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  options: StorageCleanerOptions;
+}
+
+export function StorageCleanerConfirm({
+  open,
+  onClose,
+  onConfirm,
+  options,
+}: StorageCleanerConfirmProps) {
+  const { t } = useI18n('storageCleaner');
+
+  const selectedOptions = Object.entries(options)
+    .filter(([_, value]) => value)
+    .map(([key, _]) => t(`storageCleaner:options.${key as keyof StorageCleanerOptions}`));
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent
+        className={cn(
+          'w-[90%] max-w-[340px] p-6 gap-0 rounded-2xl overflow-hidden shadow-xl border border-border bg-card text-card-foreground',
+        )}
+      >
+        {/* 头部标题区域 */}
+        <DialogHeader className="pt-1">
+          <DialogTitle className="text-center text-lg font-bold tracking-tight text-foreground">
+            {t('storageCleaner:confirmTitle')}
+          </DialogTitle>
+        </DialogHeader>
+
+        {/* 内容主体：限制最大宽度，防止内部元素在大分辨率下被横向拉得太松散 */}
+        <div className="text-center py-4 flex flex-col items-center w-full max-w-[280px] mx-auto">
+          <DialogDescription className="mb-4 text-xs font-medium text-muted-foreground/90 leading-relaxed">
+            {t('storageCleaner:confirmDesc')}
+          </DialogDescription>
+
+          {/* 待清理项目徽章群 */}
+          <div className="flex flex-wrap gap-1.5 justify-center mb-5 w-full">
+            {selectedOptions.map((label) => (
+              <Badge
+                key={label}
+                variant="secondary"
+                className="px-2.5 py-0.5 text-[11px] font-semibold border border-border/40 select-none bg-muted/60"
+              >
+                {label}
+              </Badge>
+            ))}
+          </div>
+
+          {/* 风险警告横幅 */}
+          <div className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 rounded-lg bg-destructive/5 border border-dashed border-destructive/20 w-full max-w-[240px]">
+            <AlertTriangle className="h-3.5 w-3.5 text-destructive shrink-0" />
+            <span className="text-[11px] font-bold text-destructive leading-none tracking-tight">
+              {t('storageCleaner:irreversible')}
+            </span>
+          </div>
+        </div>
+
+        <DialogFooter className="flex flex-col gap-2 w-full pt-2">
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={onConfirm}
+            className="w-full text-xs font-bold shadow-sm h-9"
+          >
+            {t('storageCleaner:confirmAction')}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onClose}
+            className="w-full text-xs font-semibold shadow-sm h-9 text-muted-foreground hover:text-foreground"
+          >
+            {t('common_buttons_cancel')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default StorageCleanerConfirm;
@@ -0,0 +1,83 @@
+import React from 'react';
+import type { StorageCleanerOptions } from '@/types/storage';
+import OptionItem from './OptionItem';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+interface StorageOptionsGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  options: StorageCleanerOptions;
+  sizes: Record<string, number>;
+  allSelected: boolean;
+  someSelected: boolean;
+  onOptionChange: (key: keyof StorageCleanerOptions) => void;
+  onSelectAll: (checked: boolean) => void;
+}
+
+export default function StorageOptionsGrid({
+  options,
+  sizes,
+  allSelected,
+  someSelected,
+  onOptionChange,
+  onSelectAll,
+  className,
+  ...props
+}: StorageOptionsGridProps) {
+  const { t } = useI18n('storageCleaner');
+
+  const optionKeys: { key: keyof StorageCleanerOptions; isCount?: boolean }[] = [
+    { key: 'localStorage' },
+    { key: 'sessionStorage' },
+    { key: 'indexedDB' },
+    { key: 'cookies' },
+    { key: 'cacheStorage', isCount: true },
+    { key: 'serviceWorkers', isCount: true },
+  ];
+
+  const handleToggleAll = () => {
+    onSelectAll(!allSelected);
+  };
+
+  return (
+    <div
+      className={cn(
+        'w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden',
+        className,
+      )}
+      {...props}
+    >
+      <div className="p-3">
+        <div className="grid grid-cols-2 gap-2.5 items-stretch">
+          {optionKeys.map(({ key, isCount }) => (
+            <OptionItem
+              key={key}
+              labelKey={`storageCleaner:options.${key}`}
+              checked={options[key]}
+              size={sizes[key]}
+              isCount={isCount}
+              onChange={() => onOptionChange(key)}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div
+        onClick={handleToggleAll}
+        className="border-t border-border flex justify-between items-center px-4 py-2.5 bg-muted/20 hover:bg-muted/50 cursor-pointer select-none"
+      >
+        <Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer">
+          {t('storageCleaner:selectAll')}
+        </Label>
+
+        <Checkbox
+          checked={allSelected ? true : someSelected ? 'indeterminate' : false}
+          onClick={(e) => e.stopPropagation()}
+          onCheckedChange={(checked) => onSelectAll(checked === true)}
+          className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary"
+        />
+      </div>
+    </div>
+  );
+}
@@ -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>
+  );
+}
@@ -0,0 +1,269 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { storageUtil } from '@/utils/chromeStorage';
+import type {
+  CleaningResult,
+  StorageCleanerOptions,
+  StorageCleanerPreferences,
+} from '@/types/storage';
+import {
+  clearStorage,
+  getCacheStorageSize,
+  getCookieSize,
+  getCurrentTab,
+  getLocalStorageSize,
+  getOriginStorageEstimate,
+  getServiceWorkerCount,
+  getSessionStorageSize,
+  isRestrictedUrl,
+} from '@/utils/storageCleaner';
+import { MessageAction, sendMessage } from '@/utils/messages';
+import { useI18n } from '@/utils/chromeI18n';
+import { toast } from 'sonner';
+
+const DEFAULT_OPTIONS: StorageCleanerOptions = {
+  localStorage: true,
+  sessionStorage: true,
+  indexedDB: true,
+  cookies: true,
+  cacheStorage: true,
+  serviceWorkers: true,
+};
+
+const DEFAULT_PREFERENCES: StorageCleanerPreferences = {
+  reloadAfterClean: true,
+  selectedTypes: DEFAULT_OPTIONS,
+};
+
+export interface UseStorageCleanerReturn {
+  domain: string;
+  error: string;
+  isInitializing: boolean;
+  options: StorageCleanerOptions;
+  sizes: Record<string, number>;
+  reloadAfterClean: boolean;
+  loading: boolean;
+  result: CleaningResult | null;
+  showConfirm: boolean;
+  setShowConfirm: (show: boolean) => void;
+  totalSize: number;
+  allSelected: boolean;
+  someSelected: boolean;
+
+  handleReloadAfterCleanChange: (checked: boolean) => void;
+  handleOptionChange: (key: keyof StorageCleanerOptions) => void;
+  handleSelectAll: (checked: boolean) => void;
+  handleClean: () => Promise<void>;
+}
+
+export function useStorageCleaner(): UseStorageCleanerReturn {
+  const { t } = useI18n(['storageCleaner', 'common']);
+  const [domain, setDomain] = useState<string>('');
+  const [error, setError] = useState<string>('');
+  const [isInitializing, setIsInitializing] = useState<boolean>(true);
+  const [options, setOptions] = useState<StorageCleanerOptions>(DEFAULT_OPTIONS);
+  const [sizes, setSizes] = useState<Record<string, number>>({});
+  const [reloadAfterClean, setReloadAfterClean] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [result, setResult] = useState<CleaningResult | null>(null);
+  const [showConfirm, setShowConfirm] = useState<boolean>(false);
+
+  const requestIdRef = useRef<number>(0);
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const storageTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const loadingRef = useRef(loading);
+
+  useEffect(() => {
+    loadingRef.current = loading;
+  }, [loading]);
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      if (storageTimerRef.current) clearTimeout(storageTimerRef.current);
+    };
+  }, []);
+
+  // 核心数据拉取链条
+  const loadInfo = useCallback(async () => {
+    const currentRequestId = ++requestIdRef.current;
+    try {
+      const tab = await getCurrentTab();
+      if (currentRequestId !== requestIdRef.current) return;
+
+      if (!tab || !tab.url) {
+        setError(t('storageCleaner:errorNoTab'));
+        return;
+      }
+      if (isRestrictedUrl(tab.url)) {
+        setError(t('storageCleaner:errorRestricted'));
+        return;
+      }
+
+      setError('');
+      const url = tab.url;
+      const tabId = tab.id!;
+      setDomain(new URL(url).hostname);
+
+      const [savedPrefs, cSize, lsSize, ssSize, idbSize, cacheCount, swCount] = await Promise.all([
+        storageUtil.get('storageCleaner/preferences', DEFAULT_PREFERENCES),
+        getCookieSize(url),
+        getLocalStorageSize(tabId),
+        getSessionStorageSize(tabId),
+        getOriginStorageEstimate(tabId),
+        getCacheStorageSize(tabId),
+        getServiceWorkerCount(tabId),
+      ]);
+
+      if (currentRequestId !== requestIdRef.current) return;
+
+      if (savedPrefs) {
+        setReloadAfterClean(savedPrefs.reloadAfterClean ?? DEFAULT_PREFERENCES.reloadAfterClean);
+        setOptions(savedPrefs.selectedTypes ?? DEFAULT_PREFERENCES.selectedTypes);
+      }
+
+      setSizes({
+        cookies: cSize,
+        localStorage: lsSize,
+        sessionStorage: ssSize,
+        indexedDB: idbSize,
+        cacheStorage: cacheCount,
+        serviceWorkers: swCount,
+      });
+    } finally {
+      if (currentRequestId === requestIdRef.current) {
+        setIsInitializing(false);
+      }
+    }
+  }, [t]);
+
+  const loadInfoRef = useRef(loadInfo);
+  useEffect(() => {
+    loadInfoRef.current = loadInfo;
+  });
+
+  const debouncedLoadInfo = useCallback(() => {
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    debounceTimerRef.current = setTimeout(() => {
+      loadInfoRef.current().catch(console.error);
+    }, 300);
+  }, []);
+
+  // 监听浏览器标签行为
+  useEffect(() => {
+    loadInfoRef.current().catch(console.error);
+
+    const handleTabChange = () => debouncedLoadInfo();
+    const handleTabUpdated = (_tabId: number, changeInfo: { status?: string; url?: string }) => {
+      if (changeInfo.status === 'complete' || changeInfo.url) {
+        debouncedLoadInfo();
+      }
+    };
+
+    chrome.tabs.onActivated.addListener(handleTabChange);
+    chrome.tabs.onUpdated.addListener(handleTabUpdated);
+    chrome.windows.onFocusChanged.addListener(handleTabChange);
+
+    return () => {
+      chrome.tabs.onActivated.removeListener(handleTabChange);
+      chrome.tabs.onUpdated.removeListener(handleTabUpdated);
+      chrome.windows.onFocusChanged.removeListener(handleTabChange);
+    };
+  }, [debouncedLoadInfo]);
+
+  useEffect(() => {
+    if (isInitializing) return;
+
+    if (storageTimerRef.current) clearTimeout(storageTimerRef.current);
+    storageTimerRef.current = setTimeout(async () => {
+      await storageUtil
+        .set('storageCleaner/preferences', {
+          reloadAfterClean,
+          selectedTypes: options,
+        })
+        .catch(console.error);
+    }, 500);
+  }, [options, reloadAfterClean, isInitializing]);
+
+  const handleReloadAfterCleanChange = useCallback((checked: boolean) => {
+    setReloadAfterClean(checked);
+  }, []);
+
+  const handleOptionChange = useCallback((key: keyof StorageCleanerOptions) => {
+    setOptions((prev) => ({ ...prev, [key]: !prev[key] }));
+  }, []);
+
+  const handleSelectAll = useCallback((checked: boolean) => {
+    setOptions({
+      localStorage: checked,
+      sessionStorage: checked,
+      indexedDB: checked,
+      cookies: checked,
+      cacheStorage: checked,
+      serviceWorkers: checked,
+    });
+  }, []);
+
+  const handleClean = useCallback(async () => {
+    if (loadingRef.current) return;
+
+    const tab = await getCurrentTab();
+    if (!tab || !tab.id || !tab.url) {
+      toast.warning(t('storageCleaner:errorNoTab'));
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const cleaningResult = await clearStorage(tab.id, tab.url, options);
+      setResult(cleaningResult);
+
+      if (reloadAfterClean && cleaningResult.success) {
+        toast.success(t('storageCleaner:cleanSuccessReload'));
+        await sendMessage(MessageAction.RELOAD_TAB, { tabId: tab.id, delay: 1000 });
+      } else {
+        await loadInfo();
+      }
+    } catch (err) {
+      toast.error(`${t('storageCleaner:cleanError')}: ${String(err)}`);
+    } finally {
+      setLoading(false);
+      setShowConfirm(false);
+    }
+  }, [options, reloadAfterClean, loadInfo, t]);
+
+  const totalSize = useMemo(() => {
+    return (
+      (sizes.cookies || 0) +
+      (sizes.localStorage || 0) +
+      (sizes.sessionStorage || 0) +
+      (sizes.indexedDB || 0)
+    );
+  }, [sizes]);
+
+  const selectionMetrics = useMemo(() => {
+    const vals = Object.values(options);
+    const all = vals.every(Boolean);
+    const some = vals.some(Boolean) && !all;
+    return { all, some };
+  }, [options]);
+
+  return {
+    domain,
+    error,
+    isInitializing,
+    options,
+    sizes,
+    reloadAfterClean,
+    loading,
+    result,
+    showConfirm,
+    setShowConfirm,
+    totalSize,
+    allSelected: selectionMetrics.all,
+    someSelected: selectionMetrics.some,
+    handleReloadAfterCleanChange,
+    handleOptionChange,
+    handleSelectAll,
+    handleClean,
+  };
+}