feat: don't spam update notification, show more concise toasts, don't fetch unsupported browser updates

src/components/custom-toast.tsx

@@ -90,6 +90,7 @@ interface VersionUpdateToastProps extends BaseToastProps {
     current: number;
     total: number;
     found: number;
+    current_browser?: string;
   };
 }
 
@@ -151,7 +152,7 @@ export function UnifiedToast(props: ToastProps) {
   const progress = "progress" in props ? props.progress : undefined;
 
   return (
-    <div className="flex items-start p-3 w-full bg-white rounded-lg border border-gray-200 shadow-lg dark:bg-gray-800 dark:border-gray-700">
+    <div className="flex items-start p-3 w-96 bg-white rounded-lg border border-gray-200 shadow-lg dark:bg-gray-800 dark:border-gray-700">
       <div className="mr-3 mt-0.5">{getToastIcon(type, stage)}</div>
       <div className="flex-1 min-w-0">
         <p className="text-sm font-medium leading-tight text-gray-900 dark:text-white">
@@ -181,26 +182,30 @@ export function UnifiedToast(props: ToastProps) {
           )}
 
         {/* Version update progress */}
-        {type === "version-update" && progress && "found" in progress && (
-          <div className="mt-2 space-y-1">
-            <p className="text-xs text-gray-600 dark:text-gray-300">
-              {progress.found} new versions found so far
-            </p>
-            <div className="flex items-center space-x-2">
-              <div className="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 min-w-0">
-                <div
-                  className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
-                  style={{
-                    width: `${(progress.current / progress.total) * 100}%`,
-                  }}
-                />
+        {type === "version-update" &&
+          progress &&
+          "current_browser" in progress && (
+            <div className="mt-2 space-y-1">
+              <p className="text-xs text-gray-600 dark:text-gray-300">
+                {progress.current_browser && (
+                  <>Looking for updates for {progress.current_browser}</>
+                )}
+              </p>
+              <div className="flex items-center space-x-2">
+                <div className="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 min-w-0">
+                  <div
+                    className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
+                    style={{
+                      width: `${(progress.current / progress.total) * 100}%`,
+                    }}
+                  />
+                </div>
+                <span className="w-8 text-xs text-right text-gray-500 whitespace-nowrap dark:text-gray-400 shrink-0">
+                  {progress.current}/{progress.total}
+                </span>
               </div>
-              <span className="w-8 text-xs text-right text-gray-500 whitespace-nowrap dark:text-gray-400 shrink-0">
-                {progress.current}/{progress.total}
-              </span>
             </div>
-          </div>
-        )}
+          )}
 
         {/* Twilight update progress */}
         {type === "twilight-update" && (

src/components/settings-dialog.tsx

@@ -21,7 +21,7 @@ import {
 } from "@/components/ui/select";
 import { usePermissions } from "@/hooks/use-permissions";
 import type { PermissionType } from "@/hooks/use-permissions";
-import { showSuccessToast } from "@/lib/toast-utils";
+import { showErrorToast, showSuccessToast } from "@/lib/toast-utils";
 import { invoke } from "@tauri-apps/api/core";
 import { useTheme } from "next-themes";
 import { useCallback, useEffect, useState } from "react";
@@ -210,11 +210,16 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
       await invoke("clear_all_version_cache_and_refetch");
       showSuccessToast("Cache cleared successfully", {
         description:
-          "All browser version cache has been cleared and browsers are being refreshed",
+          "All browser version cache has been cleared and browsers are being refreshed.",
         duration: 4000,
       });
     } catch (error) {
       console.error("Failed to clear cache:", error);
+      showErrorToast("Failed to clear cache", {
+        description:
+          error instanceof Error ? error.message : "Unknown error occurred",
+        duration: 4000,
+      });
     } finally {
       setIsClearingCache(false);
     }
@@ -237,9 +242,9 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
   const getPermissionIcon = (type: PermissionType) => {
     switch (type) {
       case "microphone":
-        return <BsMic className="h-4 w-4" />;
+        return <BsMic className="w-4 h-4" />;
       case "camera":
-        return <BsCamera className="h-4 w-4" />;
+        return <BsCamera className="w-4 h-4" />;
     }
   };
 
@@ -255,7 +260,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
   const getStatusBadge = (isGranted: boolean) => {
     if (isGranted) {
       return (
-        <Badge variant="default" className="bg-green-100 text-green-800">
+        <Badge variant="default" className="text-green-800 bg-green-100">
           Granted
         </Badge>
       );
@@ -436,7 +441,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                   {permissions.map((permission) => (
                     <div
                       key={permission.permission_type}
-                      className="flex items-center justify-between p-3 border rounded-lg"
+                      className="flex justify-between items-center p-3 rounded-lg border"
                     >
                       <div className="flex items-center space-x-3">
                         {getPermissionIcon(permission.permission_type)}

src/components/version-update-settings.tsx

@@ -31,8 +31,8 @@ export function VersionUpdateSettings() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <LuRefreshCw className="h-5 w-5" />
+        <CardTitle className="flex gap-2 items-center">
+          <LuRefreshCw className="w-5 h-5" />
           Background Version Updates
         </CardTitle>
         <CardDescription>
@@ -44,8 +44,8 @@ export function VersionUpdateSettings() {
         {/* Current Status */}
         <div className="grid gap-4 md:grid-cols-2">
           <div className="space-y-2">
-            <div className="flex items-center gap-2 text-sm font-medium">
-              <LuClock className="h-4 w-4" />
+            <div className="flex gap-2 items-center text-sm font-medium">
+              <LuClock className="w-4 h-4" />
               Last Update
             </div>
             <div className="text-sm text-muted-foreground">
@@ -54,8 +54,8 @@ export function VersionUpdateSettings() {
           </div>
 
           <div className="space-y-2">
-            <div className="flex items-center gap-2 text-sm font-medium">
-              <LuCheckCheck className="h-4 w-4" />
+            <div className="flex gap-2 items-center text-sm font-medium">
+              <LuCheckCheck className="w-4 h-4" />
               Next Update
             </div>
             <div className="text-sm text-muted-foreground">
@@ -69,16 +69,14 @@ export function VersionUpdateSettings() {
         {/* Progress indicator */}
         {isUpdating && updateProgress && (
           <Alert>
-            <LuRefreshCw className="h-4 w-4 animate-spin" />
+            <LuRefreshCw className="w-4 h-4 animate-spin" />
             <AlertTitle>Updating Browser Versions</AlertTitle>
             <AlertDescription>
               {updateProgress.current_browser ? (
                 <>
-                  Checking {updateProgress.current_browser} (
+                  Looking for updates for {updateProgress.current_browser} (
                   {updateProgress.completed_browsers}/
                   {updateProgress.total_browsers})
-                  <br />
-                  {updateProgress.new_versions_found} new versions found so far
                 </>
               ) : (
                 "Starting version update..."
@@ -88,7 +86,7 @@ export function VersionUpdateSettings() {
         )}
 
         {/* Manual update button */}
-        <div className="flex items-center justify-between pt-2 border-t">
+        <div className="flex justify-between items-center pt-2 border-t">
           <div className="space-y-1">
             <div className="text-sm font-medium">Manual Update</div>
             <div className="text-xs text-muted-foreground">
@@ -104,14 +102,14 @@ export function VersionUpdateSettings() {
             size="sm"
             disabled={isUpdating}
           >
-            <LuRefreshCw className="h-4 w-4 mr-2" />
+            <LuRefreshCw className="mr-2 w-4 h-4" />
             {isUpdating ? "Updating..." : "Check Now"}
           </LoadingButton>
         </div>
 
         {/* Information about background updates */}
         <Alert>
-          <LuCircleAlert className="h-4 w-4" />
+          <LuCircleAlert className="w-4 h-4" />
           <AlertTitle>How it works</AlertTitle>
           <AlertDescription className="text-xs">
             • Version information is checked automatically every 3 hours