refactor: separate form for wayfern

src/components/camoufox-config-dialog.tsx

@@ -10,7 +10,13 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import type { BrowserProfile, CamoufoxConfig, CamoufoxOS } from "@/types";
+import { WayfernConfigForm } from "@/components/wayfern-config-form";
+import type {
+  BrowserProfile,
+  CamoufoxConfig,
+  CamoufoxOS,
+  WayfernConfig,
+} from "@/types";
 
 const getCurrentOS = (): CamoufoxOS => {
   if (typeof navigator === "undefined") return "linux";
@@ -43,7 +49,8 @@ export function CamoufoxConfigDialog({
   onSaveWayfern,
   isRunning = false,
 }: CamoufoxConfigDialogProps) {
-  const [config, setConfig] = useState<CamoufoxConfig>(() => ({
+  // Use union type to support both Camoufox and Wayfern configs
+  const [config, setConfig] = useState<CamoufoxConfig | WayfernConfig>(() => ({
     geoip: true,
     os: getCurrentOS(),
   }));
@@ -68,7 +75,10 @@ export function CamoufoxConfigDialog({
     }
   }, [profile, isAntiDetectBrowser]);
 
-  const updateConfig = (key: keyof CamoufoxConfig, value: unknown) => {
+  const updateConfig = (
+    key: keyof CamoufoxConfig | keyof WayfernConfig,
+    value: unknown,
+  ) => {
     setConfig((prev) => ({ ...prev, [key]: value }));
   };
 
@@ -92,9 +102,9 @@ export function CamoufoxConfigDialog({
     setIsSaving(true);
     try {
       if (profile.browser === "wayfern" && onSaveWayfern) {
-        await onSaveWayfern(profile, config);
+        await onSaveWayfern(profile, config as CamoufoxConfig);
       } else {
-        await onSave(profile, config);
+        await onSave(profile, config as CamoufoxConfig);
       }
       onClose();
     } catch (error) {
@@ -144,15 +154,22 @@ export function CamoufoxConfigDialog({
 
         <ScrollArea className="flex-1 h-[300px]">
           <div className="py-4">
-            <SharedCamoufoxConfigForm
-              config={config}
-              onConfigChange={updateConfig}
-              forceAdvanced={true}
-              readOnly={isRunning}
-              browserType={
-                profile.browser === "wayfern" ? "wayfern" : "camoufox"
-              }
-            />
+            {profile.browser === "wayfern" ? (
+              <WayfernConfigForm
+                config={config as WayfernConfig}
+                onConfigChange={updateConfig}
+                forceAdvanced={true}
+                readOnly={isRunning}
+              />
+            ) : (
+              <SharedCamoufoxConfigForm
+                config={config as CamoufoxConfig}
+                onConfigChange={updateConfig}
+                forceAdvanced={true}
+                readOnly={isRunning}
+                browserType="camoufox"
+              />
+            )}
           </div>
         </ScrollArea>
 

src/components/create-profile-dialog.tsx

@@ -25,6 +25,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Tabs, TabsContent } from "@/components/ui/tabs";
+import { WayfernConfigForm } from "@/components/wayfern-config-form";
 
 import { useBrowserDownload } from "@/hooks/use-browser-download";
 import { useProxyEvents } from "@/hooks/use-proxy-events";
@@ -727,11 +728,10 @@ export function CreateProfileDialog({
                               </div>
                             )}
 
-                            <SharedCamoufoxConfigForm
+                            <WayfernConfigForm
                               config={wayfernConfig}
                               onConfigChange={updateWayfernConfig}
                               isCreating
-                              browserType="wayfern"
                             />
                           </div>
                         ) : selectedBrowser === "camoufox" ? (

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

@@ -855,12 +855,28 @@ export function SharedCamoufoxConfigForm({
         <div className="space-y-3">
           <Label>Fonts</Label>
           <MultipleSelector
-            value={
-              fingerprintConfig.fonts?.map((font) => ({
+            value={(() => {
+              // Handle fonts being either an array or a JSON string (Wayfern format)
+              let fontsArray: string[] = [];
+              if (fingerprintConfig.fonts) {
+                if (Array.isArray(fingerprintConfig.fonts)) {
+                  fontsArray = fingerprintConfig.fonts;
+                } else if (typeof fingerprintConfig.fonts === "string") {
+                  try {
+                    const parsed = JSON.parse(fingerprintConfig.fonts);
+                    if (Array.isArray(parsed)) {
+                      fontsArray = parsed;
+                    }
+                  } catch {
+                    // Invalid JSON, ignore
+                  }
+                }
+              }
+              return fontsArray.map((font) => ({
                 label: font,
                 value: font,
-              })) || []
-            }
+              }));
+            })()}
             onChange={(selected: Option[]) =>
               updateFingerprintConfig(
                 "fonts",