✨ feat: replace native alert() error popups with @mind-studio/ui Toaster

package.json

@@ -24,7 +24,8 @@
     "lucide-react": "^0.460.0",
     "next": "16.2.6",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "sonner": "^2.0.7"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.0",

src/app/layout.tsx

@@ -1,4 +1,4 @@
-import { Button, ThemeProvider } from "@mind-studio/ui";
+import { Button, ThemeProvider, Toaster } from "@mind-studio/ui";
 import { mind } from "@mind-studio/ui/themes";
 import type { Metadata } from "next";
 import { Fraunces, Hanken_Grotesk, JetBrains_Mono } from "next/font/google";
@@ -56,6 +56,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
             <Colophon />
             <FeedbackLauncher />
           </StandaloneOnly>
+          <Toaster position="bottom-right" />
         </ThemeProvider>
       </body>
     </html>

src/components/DriveBrowser.tsx

@@ -15,6 +15,7 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
 import { ConfirmDialog } from "@/components/ConfirmDialog";
 import PassphraseDialog from "@/components/PassphraseDialog";
 import { ImageThumbnail, isImageName } from "@/components/Thumbnail";
@@ -107,7 +108,7 @@
     const containerUrl =
       pathSegments.length === 0
         ? driveRoot
         : driveRoot + pathSegments.map(normalizeSegment).join("/") + "/";
     try {
       const entries = await readdir(containerUrl);
       setState({
@@ -171,7 +172,7 @@
       }
 
       const startProgress = files.map((f) => ({
         name: encryptUploads ? f.name + ".enc" : f.name,
         done: 0,
         total: f.size,
       }));
@@ -185,7 +186,7 @@
             const passphrase = getSessionPassphrase();
             if (!passphrase) throw new Error("Missing session passphrase");
             const { ciphertext, sidecar } = await encryptFile(passphrase, f, f.name);
             const encUrl = state.containerUrl + encodeURIComponent(f.name) + ".enc";
             const metaUrl = sidecarUrlFor(encUrl);
             await writeFileBlob(encUrl, ciphertext, "application/octet-stream");
             const sidecarBlob = new Blob([JSON.stringify(sidecar)], {
@@ -393,7 +394,7 @@
       const slice = pathSegments.slice(0, i + 1);
       acc.push({
         label: safeDecode(pathSegments[i]),
         href: "/drive/" + slice.map(normalizeSegment).join("/"),
       });
     }
     return acc;
@@ -457,12 +458,12 @@
     if (!trimmed) return;
     setBusy(true);
     try {
       await mkdir(containerUrl + encodeURIComponent(trimmed) + "/");
       setFolderName("");
       setCreatingFolder(false);
       onChanged();
     } catch (err) {
-      alert(`Failed to create folder: ${String(err)}`);
+      toast.error(`Failed to create folder: ${String(err)}`);
     } finally {
       setBusy(false);
     }
@@ -522,14 +523,14 @@
           <FolderPlus className="size-4" /> New folder
         </Button>
       )}
       <label className="flex cursor-pointer items-center gap-1.5 text-xs text-muted-foreground">
         <Checkbox
           checked={encryptUploads}
           onCheckedChange={(v) => onEncryptUploadsChange(v === true)}
           data-testid="encrypt-toggle"
         />
         <span>🔒 Encrypt uploads</span>
       </label>
       <div className="ml-auto flex items-center gap-2">
         <Input
           type="search"
@@ -590,12 +591,12 @@
     }
   }
   return (
     <div
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
       className={`mt-2 rounded-md transition-all ${over ? "dropzone-active" : ""}`}
     >
       {children}
     </div>
   );
@@ -711,7 +712,7 @@
 }) {
   const relPath = entry.url.slice(driveRoot.length);
   const href =
     entry.kind === "container" ? "/drive/" + relPath.replace(/\/$/, "") : "/drive/file/" + relPath;
   const [busy, setBusy] = useState(false);
   const [confirmOpen, setConfirmOpen] = useState(false);
   async function doDelete() {
@@ -725,7 +726,7 @@
       }
       onChanged();
     } catch (err) {
-      alert(`Delete failed: ${String(err)}`);
+      toast.error(`Delete failed: ${String(err)}`);
     } finally {
       setBusy(false);
     }
@@ -804,7 +805,7 @@
 }) {
   const relPath = entry.url.slice(driveRoot.length);
   const href =
     entry.kind === "container" ? "/drive/" + relPath.replace(/\/$/, "") : "/drive/file/" + relPath;
   const [busy, setBusy] = useState(false);
   const [renaming, setRenaming] = useState(false);
   const [newName, setNewName] = useState(entry.name);
@@ -822,7 +823,7 @@
       }
       onChanged();
     } catch (err) {
-      alert(`Delete failed: ${String(err)}`);
+      toast.error(`Delete failed: ${String(err)}`);
     } finally {
       setBusy(false);
     }
@@ -843,7 +844,7 @@
       a.remove();
       setTimeout(() => URL.revokeObjectURL(url), 1000);
     } catch (err) {
-      alert(`Download failed: ${String(err)}`);
+      toast.error(`Download failed: ${String(err)}`);
     } finally {
       setBusy(false);
     }
@@ -858,7 +859,7 @@
       return;
     }
     if (entry.kind === "container") {
-      alert("Container rename is not supported in M2 — copy/recreate manually.");
+      toast.error("Container rename is not supported in M2 — copy/recreate manually.");
       setRenaming(false);
       return;
     }
@@ -870,7 +871,7 @@
       setRenaming(false);
       onChanged();
     } catch (err) {
-      alert(`Rename failed: ${String(err)}`);
+      toast.error(`Rename failed: ${String(err)}`);
     } finally {
       setBusy(false);
     }

src/components/FilePreview.tsx

@@ -5,6 +5,7 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
 import { ConfirmDialog } from "@/components/ConfirmDialog";
 import PassphraseDialog from "@/components/PassphraseDialog";
 import ShareDialog from "@/components/ShareDialog";
@@ -299,7 +300,7 @@
           : "/drive/" + parentSegments.map(normalizeSegment).join("/");
       router.replace(parentHref);
     } catch (e) {
-      alert(`Delete failed: ${String(e)}`);
+      toast.error(`Delete failed: ${String(e)}`);
       setBusy(false);
     }
   }
@@ -323,7 +324,7 @@
         [...parentSegments.map(normalizeSegment), encodeURIComponent(trimmed)].join("/");
       router.replace(href);
     } catch (err) {
-      alert(`Rename failed: ${String(err)}`);
+      toast.error(`Rename failed: ${String(err)}`);
       setBusy(false);
     }
   }
@@ -485,12 +486,12 @@
     return (
       <div className="mt-6 flex justify-center rounded-lg border bg-muted/40 p-6">
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={objectUrl}
           alt=""
           className="max-h-[70vh] max-w-full rounded-sm"
           data-testid="preview-image"
         />
       </div>
     );
   }