Use new toasts for existing features

- Centralized store, container, and item in src/lib/ui/toast/
- Two dismissal modes (transient with 4s timeout, persistent)
- Three levels (info, warn, error), content as string or Component
- Dedup via optional ID, max 5 visible with stacking
- Migrated FilePane rename, Update, and AI notifications
- Deleted Notification.svelte, UpdateNotification.svelte,
  AiNotification.svelte
- Added transfer success toast in DualPaneExplorer
- Added toast debug buttons in Debug window (Cmd+D)

Author: vdavid

apps/desktop/coverage-allowlist.json

@@ -5,7 +5,7 @@
         "ui/AlertDialog.svelte": { "reason": "Simple UI modal for informational messages" },
         "ui/dialog-registry.ts": { "reason": "Pure constant and type definition, no logic to test" },
         "ui/ModalDialog.svelte": { "reason": "Shared modal dialog wrapper, depends on DOM APIs and Tauri commands" },
-        "updates/UpdateNotification.svelte": { "reason": "UI component, needs component testing" },
+        "updates/UpdateToastContent.svelte": { "reason": "UI component, toast content for update prompt" },
         "app-status-store.ts": { "reason": "Depends on Tauri APIs" },
         "benchmark.ts": { "reason": "Dev tooling, not critical path" },
         "file-explorer/drag/drag-drop.ts": { "reason": "Needs integration testing with Tauri" },

apps/desktop/src/app.css

@@ -49,6 +49,11 @@
     --color-warning: #e65100;
     --color-warning-bg: rgba(230, 81, 0, 0.1);
 
+    /* === Toast tints (tuned per scheme so warn reads amber, error reads red) === */
+    --color-toast-warn-stripe: #d4a006;
+    --color-toast-warn-bg: #fef9ee;
+    --color-toast-error-bg: #fef2f2;
+
     /* === Selection === */
     --color-selection-fg: #c9a227;
 
@@ -152,6 +157,11 @@
         --color-warning: #f5a623;
         --color-warning-bg: rgba(245, 166, 35, 0.15);
 
+        /* === Toast tints === */
+        --color-toast-warn-stripe: var(--color-warning);
+        --color-toast-warn-bg: color-mix(in srgb, var(--color-warning) 8%, var(--color-bg-secondary));
+        --color-toast-error-bg: color-mix(in srgb, var(--color-error) 8%, var(--color-bg-secondary));
+
         /* === Selection === */
         --color-selection-fg: #d4a82a;
 

apps/desktop/src/lib/ai/AiNotification.svelte

@@ -1,6 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { mount, flushSync } from 'svelte'
-import AiNotification from './AiNotification.svelte'
 
 // Track the state object so tests can mutate it
 let mockState = {
@@ -17,17 +16,22 @@ let mockState = {
 
 vi.mock('./ai-state.svelte', () => ({
     getAiState: () => mockState,
-    initAiState: vi.fn(() => Promise.resolve(() => {})),
     handleDownload: vi.fn(() => Promise.resolve()),
     handleCancel: vi.fn(() => Promise.resolve()),
     handleDismiss: vi.fn(() => Promise.resolve()),
     handleOptOut: vi.fn(() => Promise.resolve()),
     handleGotIt: vi.fn(),
 }))
 
+vi.mock('$lib/ui/toast', () => ({
+    addToast: vi.fn(),
+    dismissToast: vi.fn(),
+}))
+
+import AiToastContent from './AiToastContent.svelte'
 import { handleDownload, handleCancel, handleDismiss, handleOptOut, handleGotIt } from './ai-state.svelte'
 
-describe('AiNotification', () => {
+describe('AiToastContent', () => {
     beforeEach(() => {
         vi.clearAllMocks()
         mockState = {
@@ -46,7 +50,7 @@ describe('AiNotification', () => {
     it('renders offer notification with download size and settings hint', () => {
         mockState.notificationState = 'offer'
         const target = document.createElement('div')
-        mount(AiNotification, { target })
+        mount(AiToastContent, { target })
 
         const description = target.querySelector('.ai-description')
         expect(description?.textContent).toContain('2.1 GB')
@@ -57,17 +61,14 @@ describe('AiNotification', () => {
 
     it('renders nothing when state is hidden', () => {
         const target = document.createElement('div')
-        mount(AiNotification, { target })
-        expect(target.querySelector('.ai-notification')).toBeNull()
+        mount(AiToastContent, { target })
+        expect(target.querySelector('.ai-content')).toBeNull()
     })
 
     it("renders offer notification with Download, Not now, and I don't want AI buttons", () => {
         mockState.notificationState = 'offer'
         const target = document.createElement('div')
-        mount(AiNotification, { target })
-
-        const notification = target.querySelector('.ai-notification')
-        expect(notification).not.toBeNull()
+        mount(AiToastContent, { target })
 
         const title = target.querySelector('.ai-title')
         expect(title?.textContent).toBe('AI features available')
@@ -82,7 +83,7 @@ describe('AiNotification', () => {
     it('calls handleDownload when Download is clicked', () => {
         mockState.notificationState = 'offer'
         const target = document.createElement('div')
-        mount(AiNotification, { target })
+        mount(AiToastContent, { target })
 
         const downloadButton = target.querySelector('.ai-button.primary') as HTMLButtonElement
         downloadButton.click()
@@ -94,7 +95,7 @@ describe('AiNotification', () => {
     it('calls handleDismiss when Not now is clicked', () => {
         mockState.notificationState = 'offer'
         const target = document.createElement('div')
-        mount(AiNotification, { target })
+        mount(AiToastContent, { target })
 
         const dismissButton = target.querySelector('.ai-button.secondary') as HTMLButtonElement
         dismissButton.click()
@@ -106,7 +107,7 @@ describe('AiNotification', () => {
     it("calls handleOptOut when I don't want AI is clicked", () => {
         mockState.notificationState = 'offer'
         const target = document.createElement('div')
-        mount(AiNotification, { target })
+        mount(AiToastContent, { target })
 
         const optOutButton = target.querySelector('.ai-button.tertiary') as HTMLButtonElement
         optOutButton.click()
@@ -121,7 +122,7 @@ describe('AiNotification', () => {
         mockState.progressText = '12% — 500.0 KB / 4.0 MB — 100.0 KB/s — 35s remaining'
 
         const target = document.createElement('div')
-        mount(AiNotification, { target })
+        mount(AiToastContent, { target })
 
         const title = target.querySelector('.ai-title')
         expect(title?.textContent).toBe('Downloading AI model...')
@@ -135,7 +136,7 @@ describe('AiNotification', () => {
         mockState.downloadProgress = null
 
         const target = document.createElement('div')
-        mount(AiNotification, { target })
+        mount(AiToastContent, { target })
 
         const progressText = target.querySelector('.ai-progress-text')
         expect(progressText?.textContent).toBe('Starting download...')
@@ -146,7 +147,7 @@ describe('AiNotification', () => {
         mockState.downloadProgress = { bytesDownloaded: 100, totalBytes: 1000, speed: 50, etaSeconds: 18 }
 
         const target = document.createElement('div')
-        mount(AiNotification, { target })
+        mount(AiToastContent, { target })
 
         const cancelButton = target.querySelector('.ai-button.secondary') as HTMLButtonElement
         cancelButton.click()
@@ -159,7 +160,7 @@ describe('AiNotification', () => {
         mockState.notificationState = 'installing'
 
         const target = document.createElement('div')
-        mount(AiNotification, { target })
+        mount(AiToastContent, { target })
 
         const title = target.querySelector('.ai-title')
         expect(title?.textContent).toBe('Setting up AI...')
@@ -175,7 +176,7 @@ describe('AiNotification', () => {
         mockState.notificationState = 'ready'
 
         const target = document.createElement('div')
-        mount(AiNotification, { target })
+        mount(AiToastContent, { target })
 
         const title = target.querySelector('.ai-title')
         expect(title?.textContent).toBe('AI ready')
@@ -188,7 +189,7 @@ describe('AiNotification', () => {
         mockState.notificationState = 'ready'
 
         const target = document.createElement('div')
-        mount(AiNotification, { target })
+        mount(AiToastContent, { target })
 
         const button = target.querySelector('.ai-button.primary') as HTMLButtonElement
         button.click()
@@ -203,7 +204,7 @@ describe('AiNotification', () => {
         mockState.progressText = '50% — 2.0 MB / 4.0 MB'
 
         const target = document.createElement('div')
-        mount(AiNotification, { target })
+        mount(AiToastContent, { target })
 
         const progressBar = target.querySelector('.progress-bar-fill') as HTMLElement
         expect(progressBar).not.toBeNull()