From b00f62ebeca98f7c14cb7b1b69e8f0a6855dcf20 Mon Sep 17 00:00:00 2001
From: zhom <2717306+zhom@users.noreply.github.com>
Date: Tue, 3 Jun 2025 13:56:58 +0400
Subject: [PATCH] fix: improve toast and dialog interations

---
 src/app/page.tsx                           |  6 ++++++
 src/components/settings-dialog.tsx         |  4 ++--
 src/components/ui/sonner.tsx               |  7 +++++++
 src/components/update-notification.tsx     | 18 +++++++++---------
 src/hooks/use-app-update-notifications.tsx |  4 ++++
 src/hooks/use-update-notifications.tsx     |  6 ++++--
 src/lib/toast-utils.ts                     |  6 ++++++
 src/styles/globals.css                     | 20 ++++++++++++++++++++
 8 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index d147770..d4f9fcc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -48,6 +48,7 @@ export default function Home() {
     useState<BrowserProfile | null>(null);
   const [currentProfileForVersionChange, setCurrentProfileForVersionChange] =
     useState<BrowserProfile | null>(null);
+  const [hasCheckedStartupPrompt, setHasCheckedStartupPrompt] = useState(false);
 
   // Simple profiles loader without updates check (for use as callback)
   const loadProfiles = useCallback(async () => {
@@ -110,6 +111,9 @@ export default function Home() {
   }, [loadProfilesWithUpdateCheck, checkForUpdates]);
 
   const checkStartupPrompt = async () => {
+    // Only check once during app startup to prevent reopening after dismissing notifications
+    if (hasCheckedStartupPrompt) return;
+
     try {
       const shouldShow = await invoke<boolean>(
         "should_show_settings_on_startup",
@@ -117,8 +121,10 @@ export default function Home() {
       if (shouldShow) {
         setSettingsDialogOpen(true);
       }
+      setHasCheckedStartupPrompt(true);
     } catch (error) {
       console.error("Failed to check startup prompt:", error);
+      setHasCheckedStartupPrompt(true);
     }
   };
 
diff --git a/src/components/settings-dialog.tsx b/src/components/settings-dialog.tsx
index f6ad183..680642e 100644
--- a/src/components/settings-dialog.tsx
+++ b/src/components/settings-dialog.tsx
@@ -139,7 +139,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
           <DialogTitle>Settings</DialogTitle>
         </DialogHeader>
 
-        <div className="grid gap-6 py-4 overflow-y-auto flex-1 min-h-0">
+        <div className="grid overflow-y-auto flex-1 gap-6 py-4 min-h-0">
           {/* Appearance Section */}
           <div className="space-y-4">
             <Label className="text-base font-medium">Appearance</Label>
@@ -172,7 +172,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
 
           {/* Default Browser Section */}
           <div className="space-y-4">
-            <div className="flex items-center justify-between">
+            <div className="flex justify-between items-center">
               <Label className="text-base font-medium">Default Browser</Label>
               <Badge variant={isDefaultBrowser ? "default" : "secondary"}>
                 {isDefaultBrowser ? "Active" : "Inactive"}
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index f96a98d..c018f0e 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -15,8 +15,15 @@ const Toaster = ({ ...props }: ToasterProps) => {
           "--normal-bg": "var(--popover)",
           "--normal-text": "var(--popover-foreground)",
           "--normal-border": "var(--border)",
+          zIndex: 99999,
         } as React.CSSProperties
       }
+      toastOptions={{
+        style: {
+          zIndex: 99999,
+          pointerEvents: "auto",
+        },
+      }}
       {...props}
     />
   );
diff --git a/src/components/update-notification.tsx b/src/components/update-notification.tsx
index e57b6dc..3235e2d 100644
--- a/src/components/update-notification.tsx
+++ b/src/components/update-notification.tsx
@@ -47,17 +47,17 @@ export function UpdateNotificationComponent({
   };
 
   return (
-    <div className="flex flex-col gap-3 p-4 max-w-md bg-background border border-border rounded-lg shadow-lg">
-      <div className="flex items-start justify-between gap-2">
+    <div className="flex flex-col gap-3 p-4 max-w-md rounded-lg border shadow-lg bg-background border-border">
+      <div className="flex gap-2 justify-between items-start">
         <div className="flex flex-col gap-1">
-          <div className="flex items-center gap-2">
+          <div className="flex gap-2 items-center">
             <span className="font-semibold text-foreground">
               {browserDisplayName} Update Available
             </span>
             <Badge
               variant={notification.is_stable_update ? "default" : "secondary"}
             >
-              {notification.is_stable_update ? "Stable" : "Beta"}
+              {notification.is_stable_update ? "Stable" : "Nightly"}
             </Badge>
           </div>
           <div className="text-sm text-muted-foreground">
@@ -71,20 +71,20 @@ export function UpdateNotificationComponent({
           onClick={async () => {
             await onDismiss(notification.id);
           }}
-          className="h-6 w-6 p-0 shrink-0"
+          className="p-0 w-6 h-6 shrink-0"
         >
-          <FaTimes className="h-3 w-3" />
+          <FaTimes className="w-3 h-3" />
         </Button>
       </div>
 
-      <div className="flex items-center gap-2">
+      <div className="flex gap-2 items-center">
         <Button
           onClick={handleUpdateClick}
           disabled={isUpdating}
           size="sm"
-          className="flex items-center gap-2"
+          className="flex gap-2 items-center"
         >
-          <FaDownload className="h-3 w-3" />
+          <FaDownload className="w-3 h-3" />
           Update
         </Button>
         <Button
diff --git a/src/hooks/use-app-update-notifications.tsx b/src/hooks/use-app-update-notifications.tsx
index 61e97bb..249d873 100644
--- a/src/hooks/use-app-update-notifications.tsx
+++ b/src/hooks/use-app-update-notifications.tsx
@@ -135,6 +135,10 @@ export function useAppUpdateNotifications() {
         id: "app-update",
         duration: Number.POSITIVE_INFINITY, // Persistent until user action
         position: "top-left",
+        style: {
+          zIndex: 99999, // Ensure app updates appear above dialogs
+          pointerEvents: "auto", // Ensure app updates remain interactive
+        },
       },
     );
   }, [
diff --git a/src/hooks/use-update-notifications.tsx b/src/hooks/use-update-notifications.tsx
index 946ffff..35f7deb 100644
--- a/src/hooks/use-update-notifications.tsx
+++ b/src/hooks/use-update-notifications.tsx
@@ -232,8 +232,10 @@ export function useUpdateNotifications(
           id: notification.id,
           duration: Number.POSITIVE_INFINITY, // Persistent until user action
           position: "top-right",
-          // Remove transparent styling to fix background issue
-          style: undefined,
+          style: {
+            zIndex: 99999, // Ensure notifications appear above dialogs
+            pointerEvents: "auto", // Ensure notifications remain interactive
+          },
         },
       );
     }
diff --git a/src/lib/toast-utils.ts b/src/lib/toast-utils.ts
index da3c650..fce40d2 100644
--- a/src/lib/toast-utils.ts
+++ b/src/lib/toast-utils.ts
@@ -116,6 +116,8 @@ export function showToast(props: ToastProps & { id?: string }) {
         border: "none",
         boxShadow: "none",
         padding: 0,
+        zIndex: 99999,
+        pointerEvents: "auto",
       },
     });
   } else if (props.type === "error") {
@@ -127,6 +129,8 @@ export function showToast(props: ToastProps & { id?: string }) {
         border: "none",
         boxShadow: "none",
         padding: 0,
+        zIndex: 99999,
+        pointerEvents: "auto",
       },
     });
   } else {
@@ -138,6 +142,8 @@ export function showToast(props: ToastProps & { id?: string }) {
         border: "none",
         boxShadow: "none",
         padding: 0,
+        zIndex: 99999,
+        pointerEvents: "auto",
       },
     });
   }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 76ca069..a8936c5 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -123,3 +123,23 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Ensure Sonner toasts appear above all dialogs and remain interactive */
+.toaster,
+[data-sonner-toaster] {
+  z-index: 99999 !important;
+  pointer-events: auto !important;
+}
+
+[data-sonner-toast] {
+  z-index: 99999 !important;
+  pointer-events: auto !important;
+}
+
+/* Ensure toast buttons and interactive elements work */
+[data-sonner-toast] button,
+[data-sonner-toast] [role="button"],
+[data-sonner-toast] input,
+[data-sonner-toast] select {
+  pointer-events: auto !important;
+}