refactor: change the way updating state is displayed

src/app/page.tsx

@@ -192,12 +192,20 @@ export default function Home() {
   );
 
   // Version updater for handling version fetching progress events and auto-updates
-  useVersionUpdater();
+  const { isUpdating: isVersionUpdating } = useVersionUpdater();
 
   // Auto-update functionality - use the existing hook for compatibility
   const updateNotifications = useUpdateNotifications(loadProfiles);
   const { checkForUpdates, isUpdating } = updateNotifications;
 
+  // Combined update checking function for per-browser blocking
+  const isBrowserUpdating = useCallback(
+    (browser: string) => {
+      return isVersionUpdating || isUpdating(browser);
+    },
+    [isVersionUpdating, isUpdating],
+  );
+
   // Profiles loader with update check (for initial load and manual refresh)
   const loadProfilesWithUpdateCheck = useCallback(async () => {
     try {
@@ -733,7 +741,7 @@ export default function Home() {
   return (
     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen gap-8 font-[family-name:var(--font-geist-sans)]  bg-white dark:bg-black">
       <main className="flex flex-col row-start-2 gap-8 items-center w-full max-w-3xl">
-        <Card className="w-full gap-2">
+        <Card className="gap-2 w-full">
           <CardHeader>
             <HomeHeader
               selectedProfiles={selectedProfiles}
@@ -763,7 +771,7 @@ export default function Home() {
               onChangeVersion={openChangeVersionDialog}
               onConfigureCamoufox={handleConfigureCamoufox}
               runningProfiles={runningProfiles}
-              isUpdating={isUpdating}
+              isUpdating={isBrowserUpdating}
               onDeleteSelectedProfiles={handleDeleteSelectedProfiles}
               onAssignProfilesToGroup={handleAssignProfilesToGroup}
               selectedGroupId={selectedGroupId}
@@ -833,7 +841,7 @@ export default function Home() {
             );
           }}
           url={pendingUrl.url}
-          isUpdating={isUpdating}
+          isUpdating={isBrowserUpdating}
           runningProfiles={runningProfiles}
         />
       ))}

src/components/profile-data-table.tsx

@@ -267,6 +267,14 @@ export function ProfilesDataTable({
   // Handle icon/checkbox click
   const handleIconClick = React.useCallback(
     (profileName: string) => {
+      const profile = filteredData.find((p) => p.name === profileName);
+      if (!profile) return;
+
+      // Prevent selection of profiles whose browsers are updating
+      if (!browserState.canSelectProfile(profile)) {
+        return;
+      }
+
       setShowCheckboxes(true);
       setSelectedProfiles((prev) => {
         const newSet = new Set(prev);
@@ -289,7 +297,7 @@ export function ProfilesDataTable({
         return newSet;
       });
     },
-    [onSelectedProfilesChange],
+    [filteredData, browserState.canSelectProfile, onSelectedProfilesChange],
   );
 
   // Handle checkbox change

src/hooks/use-browser-support.ts

@@ -104,8 +104,10 @@ export function useBrowserState(
       // If the profile is already running, it can always be stopped
       if (isRunning) return true;
 
-      // If browser is updating, it cannot be launched
-      if (isBrowserUpdating) return false;
+      // If THIS specific browser is updating or downloading, block this profile
+      if (isBrowserUpdating) {
+        return false;
+      }
 
       // For single-instance browsers, check if any instance is running
       if (isSingleInstanceBrowser(profile.browser)) {
@@ -132,6 +134,12 @@ export function useBrowserState(
       if (!isClient) return false;
 
       const isRunning = runningProfiles.has(profile.name);
+      const isBrowserUpdating = isUpdating?.(profile.browser) ?? false;
+
+      // If this specific browser is updating or downloading, block it
+      if (isBrowserUpdating) {
+        return false;
+      }
 
       // For single-instance browsers (Tor and Mullvad)
       if (isSingleInstanceBrowser(profile.browser)) {
@@ -151,7 +159,26 @@ export function useBrowserState(
       // For other browsers, any profile can be used
       return true;
     },
-    [profiles, runningProfiles, isClient, isSingleInstanceBrowser],
+    [profiles, runningProfiles, isClient, isSingleInstanceBrowser, isUpdating],
+  );
+
+  /**
+   * Check if a profile can be selected for actions (delete, move group, etc.)
+   */
+  const canSelectProfile = useCallback(
+    (profile: BrowserProfile): boolean => {
+      if (!isClient) return false;
+
+      const isBrowserUpdating = isUpdating?.(profile.browser) ?? false;
+
+      // If this specific browser is updating or downloading, block selection
+      if (isBrowserUpdating) {
+        return false;
+      }
+
+      return true;
+    },
+    [isClient, isUpdating],
   );
 
   /**
@@ -203,6 +230,12 @@ export function useBrowserState(
 
       if (canUseForLinks) return null;
 
+      const isBrowserUpdating = isUpdating?.(profile.browser) ?? false;
+
+      if (isBrowserUpdating) {
+        return `${getBrowserDisplayName(profile.browser)} is being updated. Please wait for the update to complete.`;
+      }
+
       if (isSingleInstanceBrowser(profile.browser)) {
         const browserDisplayName =
           profile.browser === "tor-browser" ? "TOR" : "Mullvad";
@@ -226,6 +259,7 @@ export function useBrowserState(
       isClient,
       canUseProfileForLinks,
       isSingleInstanceBrowser,
+      isUpdating,
     ],
   );
 
@@ -235,6 +269,7 @@ export function useBrowserState(
     isAnyInstanceRunning,
     canLaunchProfile,
     canUseProfileForLinks,
+    canSelectProfile,
     getLaunchTooltipContent,
     getProfileTooltipContent,
   };