refactor: cleanup

src/app/page.tsx

@@ -168,6 +168,8 @@ export default function Home() {
   const [hasCheckedStartupPrompt, setHasCheckedStartupPrompt] = useState(false);
   const [launchOnLoginDialogOpen, setLaunchOnLoginDialogOpen] = useState(false);
   const [windowResizeWarningOpen, setWindowResizeWarningOpen] = useState(false);
+  const [windowResizeWarningBrowserType, setWindowResizeWarningBrowserType] =
+    useState<string | undefined>(undefined);
   const windowResizeWarningResolver = useRef<
     ((proceed: boolean) => void) | null
   >(null);
@@ -523,7 +525,6 @@ export default function Home() {
             error instanceof Error ? error.message : String(error)
           }`,
         );
-        throw error;
       }
     },
     [selectedGroupId],
@@ -541,6 +542,7 @@ export default function Home() {
         if (!dismissed) {
           const proceed = await new Promise<boolean>((resolve) => {
             windowResizeWarningResolver.current = resolve;
+            setWindowResizeWarningBrowserType(profile.browser);
             setWindowResizeWarningOpen(true);
           });
           if (!proceed) {
@@ -1248,6 +1250,7 @@ export default function Home() {
 
       <WindowResizeWarningDialog
         isOpen={windowResizeWarningOpen}
+        browserType={windowResizeWarningBrowserType}
         onResult={(proceed) => {
           setWindowResizeWarningOpen(false);
           windowResizeWarningResolver.current?.(proceed);

src/components/profile-sync-dialog.tsx

@@ -16,6 +16,7 @@ import {
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { useCloudAuth } from "@/hooks/use-cloud-auth";
 import { showErrorToast, showSuccessToast } from "@/lib/toast-utils";
 import type { BrowserProfile, SyncMode, SyncSettings } from "@/types";
 import { isSyncEnabled } from "@/types";
@@ -34,24 +35,34 @@ export function ProfileSyncDialog({
   onSyncConfigOpen,
 }: ProfileSyncDialogProps) {
   const { t } = useTranslation();
+  const { user: cloudUser } = useCloudAuth();
+  const isCloudSyncEligible =
+    cloudUser != null &&
+    cloudUser.plan !== "free" &&
+    (cloudUser.subscriptionStatus === "active" ||
+      cloudUser.planPeriod === "lifetime");
   const [isSaving, setIsSaving] = useState(false);
   const [isSyncing, setIsSyncing] = useState(false);
   const [syncMode, setSyncMode] = useState<SyncMode>(
     profile?.sync_mode ?? "Disabled",
   );
-  const [hasConfig, setHasConfig] = useState(false);
+  const [hasSelfHostedConfig, setHasSelfHostedConfig] = useState(false);
   const [hasE2ePassword, setHasE2ePassword] = useState(false);
   const [isCheckingConfig, setIsCheckingConfig] = useState(false);
 
+  const hasConfig = isCloudSyncEligible || hasSelfHostedConfig;
+
   const checkSyncConfig = useCallback(async () => {
     setIsCheckingConfig(true);
     try {
       const settings = await invoke<SyncSettings>("get_sync_settings");
-      setHasConfig(Boolean(settings.sync_server_url && settings.sync_token));
+      setHasSelfHostedConfig(
+        Boolean(settings.sync_server_url && settings.sync_token),
+      );
       const hasPassword = await invoke<boolean>("check_has_e2e_password");
       setHasE2ePassword(hasPassword);
     } catch {
-      setHasConfig(false);
+      setHasSelfHostedConfig(false);
     } finally {
       setIsCheckingConfig(false);
     }

src/components/shared-camoufox-config-form.tsx

@@ -1046,18 +1046,19 @@ export function SharedCamoufoxConfigForm({
         </fieldset>
         {limitedMode && (
           <>
-            <div className="absolute inset-0 backdrop-blur-[6px] bg-background/30" />
-            <div className="absolute inset-0 flex items-center justify-center z-[2]">
-              <div className="flex items-center gap-2">
+            <div className="absolute inset-0 backdrop-blur-[6px] bg-background/30 z-[1]" />
+            <div className="absolute inset-y-0 left-0 w-6 bg-gradient-to-r from-background to-transparent z-[2]" />
+            <div className="absolute inset-y-0 right-0 w-6 bg-gradient-to-l from-background to-transparent z-[2]" />
+            <div className="absolute inset-x-0 top-0 h-6 bg-gradient-to-b from-background to-transparent z-[2]" />
+            <div className="absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background to-transparent z-[2]" />
+            <div className="absolute inset-0 flex items-center justify-center z-[3]">
+              <div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5">
                 <ProBadge />
                 <span className="text-sm font-medium text-muted-foreground">
                   {t("fingerprint.proFeature")}
                 </span>
               </div>
             </div>
-            <div className="absolute inset-y-0 left-0 w-6 bg-gradient-to-r from-background to-transparent z-[1]" />
-            <div className="absolute inset-y-0 right-0 w-6 bg-gradient-to-l from-background to-transparent z-[1]" />
-            <div className="absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background to-transparent z-[1]" />
           </>
         )}
       </div>
@@ -1253,18 +1254,19 @@ export function SharedCamoufoxConfigForm({
               </fieldset>
               {limitedMode && (
                 <>
-                  <div className="absolute inset-0 backdrop-blur-[6px] bg-background/30" />
-                  <div className="absolute inset-0 flex items-center justify-center z-[2]">
-                    <div className="flex items-center gap-2">
+                  <div className="absolute inset-0 backdrop-blur-[6px] bg-background/30 z-[1]" />
+                  <div className="absolute inset-y-0 left-0 w-6 bg-gradient-to-r from-background to-transparent z-[2]" />
+                  <div className="absolute inset-y-0 right-0 w-6 bg-gradient-to-l from-background to-transparent z-[2]" />
+                  <div className="absolute inset-x-0 top-0 h-6 bg-gradient-to-b from-background to-transparent z-[2]" />
+                  <div className="absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background to-transparent z-[2]" />
+                  <div className="absolute inset-0 flex items-center justify-center z-[3]">
+                    <div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5">
                       <ProBadge />
                       <span className="text-sm font-medium text-muted-foreground">
                         {t("fingerprint.proFeature")}
                       </span>
                     </div>
                   </div>
-                  <div className="absolute inset-y-0 left-0 w-6 bg-gradient-to-r from-background to-transparent z-[1]" />
-                  <div className="absolute inset-y-0 right-0 w-6 bg-gradient-to-l from-background to-transparent z-[1]" />
-                  <div className="absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background to-transparent z-[1]" />
                 </>
               )}
             </div>

src/components/wayfern-config-form.tsx

@@ -998,18 +998,19 @@ export function WayfernConfigForm({
         </fieldset>
         {limitedMode && (
           <>
-            <div className="absolute inset-0 backdrop-blur-[6px] bg-background/30" />
-            <div className="absolute inset-0 flex items-center justify-center z-[2]">
-              <div className="flex items-center gap-2">
+            <div className="absolute inset-0 backdrop-blur-[6px] bg-background/30 z-[1]" />
+            <div className="absolute inset-y-0 left-0 w-6 bg-gradient-to-r from-background to-transparent z-[2]" />
+            <div className="absolute inset-y-0 right-0 w-6 bg-gradient-to-l from-background to-transparent z-[2]" />
+            <div className="absolute inset-x-0 top-0 h-6 bg-gradient-to-b from-background to-transparent z-[2]" />
+            <div className="absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background to-transparent z-[2]" />
+            <div className="absolute inset-0 flex items-center justify-center z-[3]">
+              <div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5">
                 <ProBadge />
                 <span className="text-sm font-medium text-muted-foreground">
                   {t("fingerprint.proFeature")}
                 </span>
               </div>
             </div>
-            <div className="absolute inset-y-0 left-0 w-6 bg-gradient-to-r from-background to-transparent z-[1]" />
-            <div className="absolute inset-y-0 right-0 w-6 bg-gradient-to-l from-background to-transparent z-[1]" />
-            <div className="absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background to-transparent z-[1]" />
           </>
         )}
       </div>
@@ -1212,18 +1213,19 @@ export function WayfernConfigForm({
               </fieldset>
               {limitedMode && (
                 <>
-                  <div className="absolute inset-0 backdrop-blur-[6px] bg-background/30" />
-                  <div className="absolute inset-0 flex items-center justify-center z-[2]">
-                    <div className="flex items-center gap-2">
+                  <div className="absolute inset-0 backdrop-blur-[6px] bg-background/30 z-[1]" />
+                  <div className="absolute inset-y-0 left-0 w-6 bg-gradient-to-r from-background to-transparent z-[2]" />
+                  <div className="absolute inset-y-0 right-0 w-6 bg-gradient-to-l from-background to-transparent z-[2]" />
+                  <div className="absolute inset-x-0 top-0 h-6 bg-gradient-to-b from-background to-transparent z-[2]" />
+                  <div className="absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background to-transparent z-[2]" />
+                  <div className="absolute inset-0 flex items-center justify-center z-[3]">
+                    <div className="flex items-center gap-2 rounded-md bg-background/80 px-3 py-1.5">
                       <ProBadge />
                       <span className="text-sm font-medium text-muted-foreground">
                         {t("fingerprint.proFeature")}
                       </span>
                     </div>
                   </div>
-                  <div className="absolute inset-y-0 left-0 w-6 bg-gradient-to-r from-background to-transparent z-[1]" />
-                  <div className="absolute inset-y-0 right-0 w-6 bg-gradient-to-l from-background to-transparent z-[1]" />
-                  <div className="absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background to-transparent z-[1]" />
                 </>
               )}
             </div>

src/components/window-resize-warning-dialog.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { invoke } from "@tauri-apps/api/core";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -17,15 +17,23 @@ import { Label } from "@/components/ui/label";
 interface WindowResizeWarningDialogProps {
   isOpen: boolean;
   onResult: (proceed: boolean) => void;
+  browserType?: string;
 }
 
 export function WindowResizeWarningDialog({
   isOpen,
   onResult,
+  browserType,
 }: WindowResizeWarningDialogProps) {
   const { t } = useTranslation();
   const [dontShowAgain, setDontShowAgain] = useState(false);
 
+  useEffect(() => {
+    if (isOpen) {
+      setDontShowAgain(false);
+    }
+  }, [isOpen]);
+
   const handleContinue = async () => {
     if (dontShowAgain) {
       try {
@@ -41,6 +49,16 @@ export function WindowResizeWarningDialog({
     onResult(false);
   };
 
+  const isCamoufox = browserType === "camoufox";
+
+  const title = isCamoufox
+    ? t("warnings.windowResizeCamoufoxTitle")
+    : t("warnings.windowResizeTitle");
+
+  const description = isCamoufox
+    ? t("warnings.windowResizeCamoufoxDescription")
+    : t("warnings.windowResizeDescription");
+
   return (
     <Dialog open={isOpen}>
       <DialogContent
@@ -50,12 +68,10 @@ export function WindowResizeWarningDialog({
         onInteractOutside={(e) => e.preventDefault()}
       >
         <DialogHeader>
-          <DialogTitle>{t("warnings.windowResizeTitle")}</DialogTitle>
+          <DialogTitle>{title}</DialogTitle>
         </DialogHeader>
 
-        <p className="text-sm text-muted-foreground">
-          {t("warnings.windowResizeDescription")}
-        </p>
+        <p className="text-sm text-muted-foreground">{description}</p>
 
         <div className="flex items-center space-x-2">
           <Checkbox

src/i18n/locales/en.json

@@ -629,6 +629,8 @@
   "warnings": {
     "windowResizeTitle": "Custom Window Dimensions",
     "windowResizeDescription": "Changing browser window dimensions may increase the chance of website detection that browser information is spoofed.",
+    "windowResizeCamoufoxTitle": "Viewport Locked by Camoufox",
+    "windowResizeCamoufoxDescription": "Camoufox locks the viewport to the spoofed screen dimensions for anti-fingerprinting. Resizing the window may cause cropped or grey areas. This is expected behavior.",
     "dontShowAgain": "Don't show this again",
     "continue": "Continue",
     "cancel": "Cancel"

src/i18n/locales/es.json

@@ -629,6 +629,8 @@
   "warnings": {
     "windowResizeTitle": "Dimensiones de ventana personalizadas",
     "windowResizeDescription": "Cambiar las dimensiones de la ventana del navegador puede aumentar la posibilidad de que los sitios web detecten que la información del navegador está falsificada.",
+    "windowResizeCamoufoxTitle": "Viewport bloqueado por Camoufox",
+    "windowResizeCamoufoxDescription": "Camoufox bloquea el viewport a las dimensiones de pantalla falsificadas para anti-fingerprinting. Redimensionar la ventana puede causar áreas recortadas o grises. Este es el comportamiento esperado.",
     "dontShowAgain": "No mostrar esto de nuevo",
     "continue": "Continuar",
     "cancel": "Cancelar"

src/i18n/locales/fr.json

@@ -629,6 +629,8 @@
   "warnings": {
     "windowResizeTitle": "Dimensions de fenêtre personnalisées",
     "windowResizeDescription": "Modifier les dimensions de la fenêtre du navigateur peut augmenter les chances de détection par les sites web que les informations du navigateur sont falsifiées.",
+    "windowResizeCamoufoxTitle": "Viewport verrouillé par Camoufox",
+    "windowResizeCamoufoxDescription": "Camoufox verrouille le viewport aux dimensions d'écran falsifiées pour l'anti-fingerprinting. Redimensionner la fenêtre peut causer des zones recadrées ou grises. C'est le comportement attendu.",
     "dontShowAgain": "Ne plus afficher",
     "continue": "Continuer",
     "cancel": "Annuler"

src/i18n/locales/ja.json

@@ -629,6 +629,8 @@
   "warnings": {
     "windowResizeTitle": "カスタムウィンドウサイズ",
     "windowResizeDescription": "ブラウザウィンドウのサイズを変更すると、ブラウザ情報が偽装されていることをウェブサイトに検出される可能性が高くなります。",
+    "windowResizeCamoufoxTitle": "Camoufoxによりビューポートがロックされています",
+    "windowResizeCamoufoxDescription": "Camoufoxはアンチフィンガープリントのためにビューポートを偽装された画面サイズにロックします。ウィンドウのサイズを変更すると、切り取られた領域やグレーの領域が表示される場合があります。これは想定された動作です。",
     "dontShowAgain": "今後表示しない",
     "continue": "続行",
     "cancel": "キャンセル"

src/i18n/locales/pt.json

@@ -629,6 +629,8 @@
   "warnings": {
     "windowResizeTitle": "Dimensões de janela personalizadas",
     "windowResizeDescription": "Alterar as dimensões da janela do navegador pode aumentar a chance de detecção pelos sites de que as informações do navegador estão falsificadas.",
+    "windowResizeCamoufoxTitle": "Viewport bloqueado pelo Camoufox",
+    "windowResizeCamoufoxDescription": "O Camoufox bloqueia o viewport nas dimensões de tela falsificadas para anti-fingerprinting. Redimensionar a janela pode causar áreas cortadas ou cinzas. Este é o comportamento esperado.",
     "dontShowAgain": "Não mostrar novamente",
     "continue": "Continuar",
     "cancel": "Cancelar"

src/i18n/locales/ru.json

@@ -629,6 +629,8 @@
   "warnings": {
     "windowResizeTitle": "Пользовательские размеры окна",
     "windowResizeDescription": "Изменение размеров окна браузера может повысить вероятность обнаружения сайтами того, что информация браузера подменена.",
+    "windowResizeCamoufoxTitle": "Viewport заблокирован Camoufox",
+    "windowResizeCamoufoxDescription": "Camoufox блокирует viewport на подменённых размерах экрана для защиты от фингерпринтинга. Изменение размера окна может вызвать обрезанные или серые области. Это ожидаемое поведение.",
     "dontShowAgain": "Больше не показывать",
     "continue": "Продолжить",
     "cancel": "Отмена"

src/i18n/locales/zh.json

@@ -629,6 +629,8 @@
   "warnings": {
     "windowResizeTitle": "自定义窗口尺寸",
     "windowResizeDescription": "更改浏览器窗口尺寸可能会增加网站检测到浏览器信息被伪装的概率。",
+    "windowResizeCamoufoxTitle": "视口已被 Camoufox 锁定",
+    "windowResizeCamoufoxDescription": "Camoufox 将视口锁定为伪装的屏幕尺寸以防止指纹识别。调整窗口大小可能会导致内容被裁剪或出现灰色区域。这是预期行为。",
     "dontShowAgain": "不再显示",
     "continue": "继续",
     "cancel": "取消"