From 305051d03daa96e75b69c2a527599d6da56b74b8 Mon Sep 17 00:00:00 2001
From: zhom <2717306+zhom@users.noreply.github.com>
Date: Sat, 9 Aug 2025 08:44:34 +0400
Subject: [PATCH] style: display proxy usage

---
 src/components/proxy-management-dialog.tsx | 43 ++++++++++++++++++-
 src/components/proxy-settings-dialog.tsx   | 48 +++++++++++++++++++++-
 2 files changed, 89 insertions(+), 2 deletions(-)

diff --git a/src/components/proxy-management-dialog.tsx b/src/components/proxy-management-dialog.tsx
index b7ecf77..3488edd 100644
--- a/src/components/proxy-management-dialog.tsx
+++ b/src/components/proxy-management-dialog.tsx
@@ -1,10 +1,12 @@
 "use client";
 
 import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
 import { useCallback, useEffect, useState } from "react";
 import { FiEdit2, FiPlus, FiTrash2, FiWifi } from "react-icons/fi";
 import { toast } from "sonner";
 import { ProxyFormDialog } from "@/components/proxy-form-dialog";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -35,6 +37,7 @@ export function ProxyManagementDialog({
   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 loadStoredProxies = useCallback(async () => {
     try {
@@ -49,11 +52,44 @@ export function ProxyManagementDialog({
     }
   }, []);
 
+  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]);
+  }, [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]);
 
   const handleDeleteProxy = useCallback(async (proxy: StoredProxy) => {
     if (
@@ -183,6 +219,11 @@ export function ProxyManagementDialog({
                           </span>
                         )}
                       </div>
+                      <div className="mr-2">
+                        <Badge variant="secondary">
+                          {proxyUsage[proxy.id] ?? 0}
+                        </Badge>
+                      </div>
                       <div className="flex flex-shrink-0 gap-1 items-center">
                         <Tooltip>
                           <TooltipTrigger asChild>
diff --git a/src/components/proxy-settings-dialog.tsx b/src/components/proxy-settings-dialog.tsx
index 36b99ba..b02a845 100644
--- a/src/components/proxy-settings-dialog.tsx
+++ b/src/components/proxy-settings-dialog.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
 import { useCallback, useEffect, useState } from "react";
 import { FiPlus } from "react-icons/fi";
 import { toast } from "sonner";
@@ -46,6 +47,7 @@ export function ProxySettingsDialog({
   );
   const [loading, setLoading] = useState(false);
   const [showProxyForm, setShowProxyForm] = useState(false);
+  const [proxyUsage, setProxyUsage] = useState<Record<string, number>>({});
 
   // Helper to determine if proxy should be disabled for the selected browser
   const isProxyDisabled = browserType === "tor-browser";
@@ -63,9 +65,28 @@ export function ProxySettingsDialog({
     }
   }, []);
 
+  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 (error) {
+      // Non-fatal
+      console.error("Failed to load proxy usage:", error);
+    }
+  }, []);
+
   useEffect(() => {
     if (isOpen) {
       loadStoredProxies();
+      void loadProxyUsage();
       if (isProxyDisabled) {
         setSelectedProxyId(null);
       } else {
@@ -73,7 +94,31 @@ export function ProxySettingsDialog({
         setSelectedProxyId(initialProxyId || null);
       }
     }
-  }, [isOpen, isProxyDisabled, loadStoredProxies, initialProxyId]);
+  }, [
+    isOpen,
+    isProxyDisabled,
+    loadStoredProxies,
+    initialProxyId,
+    loadProxyUsage,
+  ]);
+
+  // Refresh usage when profiles change
+  useEffect(() => {
+    let unlisten: (() => void) | undefined;
+    const setup = async () => {
+      try {
+        unlisten = await listen("profile-updated", () => {
+          void loadProxyUsage();
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    };
+    if (isOpen) void setup();
+    return () => {
+      if (unlisten) unlisten();
+    };
+  }, [isOpen, loadProxyUsage]);
 
   const handleCreateProxy = useCallback(() => {
     setShowProxyForm(true);
@@ -234,6 +279,7 @@ export function ProxySettingsDialog({
                                   <Badge variant="outline">
                                     {proxy.proxy_settings.proxy_type.toUpperCase()}
                                   </Badge>
+                                  <Badge>{proxyUsage[proxy.id] ?? 0}</Badge>
                                 </div>
                               </div>
                             </CardContent>