refactor: make ui reactive for proxy changes

src/components/profile-data-table.tsx

@@ -52,6 +52,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useBrowserState } from "@/hooks/use-browser-state";
+import { useProxyEvents } from "@/hooks/use-proxy-events";
 import { useTableSorting } from "@/hooks/use-table-sorting";
 import {
   getBrowserDisplayName,
@@ -413,10 +414,8 @@ export function ProfilesDataTable({
     new Set(),
   );
 
-  const [storedProxies, setStoredProxies] = React.useState<StoredProxy[]>([]);
-  const [openProxySelectorFor, setOpenProxySelectorFor] = React.useState<
-    string | null
-  >(null);
+  const { storedProxies } = useProxyEvents();
+
   const [proxyOverrides, setProxyOverrides] = React.useState<
     Record<string, string | null>
   >({});
@@ -428,6 +427,9 @@ export function ProfilesDataTable({
   const [openTagsEditorFor, setOpenTagsEditorFor] = React.useState<
     string | null
   >(null);
+  const [openProxySelectorFor, setOpenProxySelectorFor] = React.useState<
+    string | null
+  >(null);
 
   const loadAllTags = React.useCallback(async () => {
     try {
@@ -466,16 +468,6 @@ export function ProfilesDataTable({
     stoppingProfiles,
   );
 
-  // Load stored proxies
-  const loadStoredProxies = React.useCallback(async () => {
-    try {
-      const proxiesList = await invoke<StoredProxy[]>("get_stored_proxies");
-      setStoredProxies(proxiesList);
-    } catch (error) {
-      console.error("Failed to load stored proxies:", error);
-    }
-  }, []);
-
   // Clear launching/stopping spinners when backend reports running status changes
   React.useEffect(() => {
     if (!browserState.isClient) return;
@@ -511,12 +503,6 @@ export function ProfilesDataTable({
     };
   }, [browserState.isClient]);
 
-  React.useEffect(() => {
-    if (browserState.isClient) {
-      void loadStoredProxies();
-    }
-  }, [browserState.isClient, loadStoredProxies]);
-
   // Keep stored proxies up-to-date by listening for changes emitted elsewhere in the app
   React.useEffect(() => {
     if (!browserState.isClient) return;
@@ -524,10 +510,7 @@ export function ProfilesDataTable({
     (async () => {
       try {
         unlisten = await listen("stored-proxies-changed", () => {
-          void loadStoredProxies();
-        });
-        // Also refresh tags on profile updates
-        await listen("profile-updated", () => {
+          // Also refresh tags on profile updates
           void loadAllTags();
         });
       } catch (_err) {
@@ -537,7 +520,7 @@ export function ProfilesDataTable({
     return () => {
       if (unlisten) unlisten();
     };
-  }, [browserState.isClient, loadStoredProxies, loadAllTags]);
+  }, [browserState.isClient, loadAllTags]);
 
   // Automatically deselect profiles that become running, updating, launching, or stopping
   React.useEffect(() => {

src/components/profile-selector-dialog.tsx

@@ -28,8 +28,9 @@ import {
 } from "@/components/ui/tooltip";
 import { useBrowserState } from "@/hooks/use-browser-state";
 import { useProfileEvents } from "@/hooks/use-profile-events";
+import { useProxyEvents } from "@/hooks/use-proxy-events";
 import { getBrowserDisplayName, getBrowserIcon } from "@/lib/browser-utils";
-import type { BrowserProfile, StoredProxy } from "@/types";
+import type { BrowserProfile } from "@/types";
 import { RippleButton } from "./ui/ripple";
 
 interface ProfileSelectorDialogProps {
@@ -53,9 +54,10 @@ export function ProfileSelectorDialog({
   // Use external runningProfiles if provided, otherwise use hook's runningProfiles
   const runningProfiles = externalRunningProfiles || hookRunningProfiles;
 
+  const { storedProxies } = useProxyEvents();
+
   const [selectedProfile, setSelectedProfile] = useState<string | null>(null);
   const [isLaunching, setIsLaunching] = useState(false);
-  const [storedProxies, setStoredProxies] = useState<StoredProxy[]>([]);
   const [launchingProfiles, setLaunchingProfiles] = useState<Set<string>>(
     new Set(),
   );
@@ -82,16 +84,6 @@ export function ProfileSelectorDialog({
     [storedProxies],
   );
 
-  // Load stored proxies
-  const loadStoredProxies = useCallback(async () => {
-    try {
-      const proxiesList = await invoke<StoredProxy[]>("get_stored_proxies");
-      setStoredProxies(proxiesList);
-    } catch (err) {
-      console.error("Failed to load stored proxies:", err);
-    }
-  }, []);
-
   // Helper function to get tooltip content for profiles - now uses shared hook
   const getProfileTooltipContent = (profile: BrowserProfile): string | null => {
     return browserState.getProfileTooltipContent(profile);
@@ -182,13 +174,6 @@ export function ProfileSelectorDialog({
     }
   }, [isOpen, profiles, selectedProfile, runningProfiles]);
 
-  // Load stored proxies when dialog opens
-  useEffect(() => {
-    if (isOpen) {
-      void loadStoredProxies();
-    }
-  }, [isOpen, loadStoredProxies]);
-
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="max-w-md">

src/components/proxy-form-dialog.tsx

@@ -35,14 +35,12 @@ interface ProxyFormData {
 interface ProxyFormDialogProps {
   isOpen: boolean;
   onClose: () => void;
-  onSave: (proxy: StoredProxy) => void;
   editingProxy?: StoredProxy | null;
 }
 
 export function ProxyFormDialog({
   isOpen,
   onClose,
-  onSave,
   editingProxy,
 }: ProxyFormDialogProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -105,11 +103,9 @@ export function ProxyFormDialog({
         password: formData.password.trim() || undefined,
       };
 
-      let savedProxy: StoredProxy;
-
       if (editingProxy) {
         // Update existing proxy
-        savedProxy = await invoke<StoredProxy>("update_stored_proxy", {
+        await invoke("update_stored_proxy", {
           proxyId: editingProxy.id,
           name: formData.name.trim(),
           proxySettings,
@@ -117,14 +113,13 @@ export function ProxyFormDialog({
         toast.success("Proxy updated successfully");
       } else {
         // Create new proxy
-        savedProxy = await invoke<StoredProxy>("create_stored_proxy", {
+        await invoke("create_stored_proxy", {
           name: formData.name.trim(),
           proxySettings,
         });
         toast.success("Proxy created successfully");
       }
 
-      onSave(savedProxy);
       onClose();
     } catch (error) {
       console.error("Failed to save proxy:", error);
@@ -134,7 +129,7 @@ export function ProxyFormDialog({
     } finally {
       setIsSubmitting(false);
     }
-  }, [formData, editingProxy, onSave, onClose]);
+  }, [formData, editingProxy, onClose]);
 
   const handleClose = useCallback(() => {
     if (!isSubmitting) {

src/components/proxy-management-dialog.tsx

@@ -21,6 +21,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useProxyEvents } from "@/hooks/use-proxy-events";
 import { trimName } from "@/lib/name-utils";
 import type { StoredProxy } from "@/types";
 import { RippleButton } from "./ui/ripple";
@@ -34,84 +35,12 @@ export function ProxyManagementDialog({
   isOpen,
   onClose,
 }: ProxyManagementDialogProps) {
-  const [storedProxies, setStoredProxies] = useState<StoredProxy[]>([]);
-  const [loading, setLoading] = useState(false);
   const [showProxyForm, setShowProxyForm] = useState(false);
   const [editingProxy, setEditingProxy] = useState<StoredProxy | null>(null);
-  const [proxyUsage, setProxyUsage] = useState<Record<string, number>>({});
   const [proxyToDelete, setProxyToDelete] = useState<StoredProxy | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
 
-  const loadStoredProxies = useCallback(async () => {
-    try {
-      setLoading(true);
-      const proxies = await invoke<StoredProxy[]>("get_stored_proxies");
-      setStoredProxies(proxies);
-    } catch (error) {
-      console.error("Failed to load stored proxies:", error);
-      toast.error("Failed to load proxies");
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  const loadProxyUsage = useCallback(async () => {
-    try {
-      const profiles = await invoke<Array<{ proxy_id?: string }>>(
-        "list_browser_profiles",
-      );
-      const counts: Record<string, number> = {};
-      for (const p of profiles) {
-        if (p.proxy_id) counts[p.proxy_id] = (counts[p.proxy_id] ?? 0) + 1;
-      }
-      setProxyUsage(counts);
-    } catch (_err) {
-      // ignore non-critical errors
-    }
-  }, []);
-
-  useEffect(() => {
-    if (isOpen) {
-      loadStoredProxies();
-      void loadProxyUsage();
-    }
-  }, [isOpen, loadStoredProxies, loadProxyUsage]);
-
-  useEffect(() => {
-    let unlisten: (() => void) | undefined;
-    const setup = async () => {
-      try {
-        unlisten = await listen("profile-updated", () => {
-          void loadProxyUsage();
-        });
-      } catch (_err) {
-        // ignore non-critical errors
-      }
-    };
-    if (isOpen) void setup();
-    return () => {
-      if (unlisten) unlisten();
-    };
-  }, [isOpen, loadProxyUsage]);
-
-  // Keep list in sync with external changes (e.g., created from CreateProfileDialog)
-  useEffect(() => {
-    let unlisten: (() => void) | undefined;
-    const setup = async () => {
-      try {
-        unlisten = await listen("stored-proxies-changed", () => {
-          void loadStoredProxies();
-          void loadProxyUsage();
-        });
-      } catch (_err) {
-        // ignore non-critical errors
-      }
-    };
-    if (isOpen) void setup();
-    return () => {
-      if (unlisten) unlisten();
-    };
-  }, [isOpen, loadStoredProxies, loadProxyUsage]);
+  const { storedProxies, proxyUsage, isLoading } = useProxyEvents();
 
   const handleDeleteProxy = useCallback((proxy: StoredProxy) => {
     // Open in-app confirmation dialog
@@ -123,7 +52,6 @@ export function ProxyManagementDialog({
     setIsDeleting(true);
     try {
       await invoke("delete_stored_proxy", { proxyId: proxyToDelete.id });
-      setStoredProxies((prev) => prev.filter((p) => p.id !== proxyToDelete.id));
       toast.success("Proxy deleted successfully");
       await emit("stored-proxies-changed");
     } catch (error) {
@@ -145,24 +73,6 @@ export function ProxyManagementDialog({
     setShowProxyForm(true);
   }, []);
 
-  const handleProxySaved = useCallback((savedProxy: StoredProxy) => {
-    setStoredProxies((prev) => {
-      const existingIndex = prev.findIndex((p) => p.id === savedProxy.id);
-      if (existingIndex >= 0) {
-        // Update existing proxy
-        const updated = [...prev];
-        updated[existingIndex] = savedProxy;
-        return updated;
-      } else {
-        // Add new proxy
-        return [...prev, savedProxy];
-      }
-    });
-    setShowProxyForm(false);
-    setEditingProxy(null);
-    void emit("stored-proxies-changed");
-  }, []);
-
   const handleProxyFormClose = useCallback(() => {
     setShowProxyForm(false);
     setEditingProxy(null);
@@ -200,13 +110,12 @@ export function ProxyManagementDialog({
 
             {/* Proxy List - Scrollable */}
             <div className="flex-1 min-h-0">
-              {loading ? (
-                <div className="flex justify-center items-center h-32">
-                  <p className="text-sm text-muted-foreground">
-                    Loading proxies...
-                  </p>
+              {isLoading && (
+                <div className="flex justify-center items-center py-6">
+                  <div className="w-8 h-8 rounded-full border-b-2 animate-spin border-primary"></div>
                 </div>
-              ) : storedProxies.length === 0 ? (
+              )}
+              {storedProxies.length === 0 && !isLoading ? (
                 <div className="flex flex-col justify-center items-center h-32 text-center">
                   <FiWifi className="mx-auto mb-4 w-12 h-12 text-muted-foreground" />
                   <p className="mb-2 text-muted-foreground">
@@ -310,7 +219,6 @@ export function ProxyManagementDialog({
       <ProxyFormDialog
         isOpen={showProxyForm}
         onClose={handleProxyFormClose}
-        onSave={handleProxySaved}
         editingProxy={editingProxy}
       />
       <DeleteConfirmationDialog