refactor: better state control for browser download

src/app/layout.tsx

@@ -27,9 +27,9 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <CustomThemeProvider>
-          <WindowDragArea />
           <TooltipProvider>{children}</TooltipProvider>
           <Toaster />
+          <WindowDragArea />
         </CustomThemeProvider>
       </body>
     </html>

src/app/page.tsx

@@ -79,17 +79,27 @@ export default function Home() {
       if (missingBinaries.length > 0) {
         console.log("Found missing binaries:", missingBinaries);
 
+        // Group missing binaries by browser type to avoid concurrent downloads
+        const browserMap = new Map<string, string[]>();
+        for (const [profileName, browser, version] of missingBinaries) {
+          if (!browserMap.has(browser)) {
+            browserMap.set(browser, []);
+          }
+          const versions = browserMap.get(browser);
+          if (versions) {
+            versions.push(`${version} (for ${profileName})`);
+          }
+        }
+
         // Show a toast notification about missing binaries and auto-download them
-        const missingList = missingBinaries
-          .map(
-            ([profileName, browser, version]) =>
-              `${browser} ${version} (for ${profileName})`,
-          )
+        const missingList = Array.from(browserMap.entries())
+          .map(([browser, versions]) => `${browser}: ${versions.join(", ")}`)
           .join(", ");
 
         console.log(`Downloading missing binaries: ${missingList}`);
 
         try {
+          // Download missing binaries sequentially by browser type to prevent conflicts
           const downloaded = await invoke<string[]>(
             "ensure_all_binaries_exist",
           );

src/components/window-drag-area.tsx

@@ -41,7 +41,7 @@ export function WindowDragArea() {
   return (
     <button
       type="button"
-      className="fixed top-0 right-0 left-0 h-10 bg-transparent border-0 pointer-events-none z-9999"
+      className="fixed top-0 right-0 left-0 h-10 bg-transparent border-0 z-9999"
       style={{
         // Ensure it's above all other content
         zIndex: 9999,

src/hooks/use-browser-download.ts

@@ -48,7 +48,9 @@ export function useBrowserDownload() {
     [],
   );
   const [downloadedVersions, setDownloadedVersions] = useState<string[]>([]);
-  const [isDownloading, setIsDownloading] = useState(false);
+  const [downloadingBrowsers, setDownloadingBrowsers] = useState<Set<string>>(
+    new Set(),
+  );
   const [downloadProgress, setDownloadProgress] =
     useState<DownloadProgress | null>(null);
 
@@ -181,7 +183,7 @@ export function useBrowserDownload() {
       suppressNotifications = false,
     ) => {
       const browserName = getBrowserDisplayName(browserStr);
-      setIsDownloading(true);
+      setDownloadingBrowsers((prev) => new Set(prev).add(browserStr));
 
       try {
         // Check browser compatibility before attempting download
@@ -215,7 +217,11 @@ export function useBrowserDownload() {
         }
         throw error;
       } finally {
-        setIsDownloading(false);
+        setDownloadingBrowsers((prev) => {
+          const next = new Set(prev);
+          next.delete(browserStr);
+          return next;
+        });
       }
     },
     [loadDownloadedVersions],
@@ -228,6 +234,17 @@ export function useBrowserDownload() {
     [downloadedVersions],
   );
 
+  // Check if a browser type is currently downloading
+  const isBrowserDownloading = useCallback(
+    (browserStr: string) => {
+      return downloadingBrowsers.has(browserStr);
+    },
+    [downloadingBrowsers],
+  );
+
+  // Legacy isDownloading for backwards compatibility
+  const isDownloading = downloadingBrowsers.size > 0;
+
   // Listen for download progress events
   useEffect(() => {
     const unlisten = listen<DownloadProgress>("download-progress", (event) => {
@@ -272,6 +289,8 @@ export function useBrowserDownload() {
     availableVersions,
     downloadedVersions,
     isDownloading,
+    isBrowserDownloading,
+    downloadingBrowsers,
     downloadProgress,
     loadVersions,
     loadVersionsWithNewCount,

src/hooks/use-update-notifications.tsx

@@ -32,22 +32,21 @@ export function useUpdateNotifications(
 
   // Add refs to track ongoing operations to prevent duplicates
   const isCheckingForUpdates = useRef(false);
-  const activeDownloads = useRef<Set<string>>(new Set()); // Track "browser-version" keys
+  // Track browser types being downloaded (not browser-version pairs)
+  const activeDownloads = useRef<Set<string>>(new Set()); // Track browser types
 
   const handleAutoUpdate = useCallback(
     async (browser: string, newVersion: string, notificationId: string) => {
-      const downloadKey = `${browser}-${newVersion}`;
-
-      // Check if this download is already in progress
-      if (activeDownloads.current.has(downloadKey)) {
+      // Check if this browser type is already being downloaded
+      if (activeDownloads.current.has(browser)) {
         console.log(
-          `Download already in progress for ${downloadKey}, skipping duplicate`,
+          `Download already in progress for browser type ${browser}, skipping duplicate auto-update`,
         );
         return;
       }
 
-      // Mark download as active and disable browser
-      activeDownloads.current.add(downloadKey);
+      // Mark browser type as active and disable browser
+      activeDownloads.current.add(browser);
       setUpdatingBrowsers((prev) => new Set(prev).add(browser));
 
       try {
@@ -158,8 +157,8 @@ export function useUpdateNotifications(
         console.error("Failed to start auto-update:", error);
         throw error;
       } finally {
-        // Clean up
-        activeDownloads.current.delete(downloadKey);
+        // Clean up - remove browser type from active downloads
+        activeDownloads.current.delete(browser);
         setUpdatingBrowsers((prev) => {
           const next = new Set(prev);
           next.delete(browser);