replaced alerts with toast notifications

frontend/app.js

@@ -10,6 +10,11 @@ const CONFIG = {
     SCROLL_SYNC_RETRY_INTERVAL: 100,   // ms - Time between setupScrollSync retries
     MAX_UNDO_HISTORY: 50,              // Maximum number of undo steps to keep
     DEFAULT_SIDEBAR_WIDTH: 256,        // px - Default sidebar width (w-64 in Tailwind)
+    TOAST_MAX_VISIBLE: 4,              // Max stacked toasts; oldest dropped when exceeded
+    TOAST_DURATION_ERROR_MS: 7000,
+    TOAST_DURATION_WARNING_MS: 5500,
+    TOAST_DURATION_INFO_MS: 4500,
+    TOAST_DURATION_SUCCESS_MS: 3500,
 };
 
 // localStorage settings configuration - centralized definition of all persisted settings
@@ -38,17 +43,15 @@ const ErrorHandler = {
      * Handle errors consistently across the app
      * @param {string} operation - The operation that failed (e.g., "load notes", "save note")
      * @param {Error} error - The error object
-     * @param {boolean} showAlert - Whether to show an alert to the user
+     * @param {boolean} notify - Whether to show a toast (listens on notediscovery:toast)
      */
-    handle(operation, error, showAlert = true) {
+    handle(operation, error, notify = true) {
-        // Always log to console for debugging
         console.error(`Failed to ${operation}:`, error);
-        
+        if (notify) {
-        // Show user-friendly alert if requested
+            const message = `Failed to ${operation}. Please try again.`;
-        if (showAlert) {
+            window.dispatchEvent(new CustomEvent('notediscovery:toast', {
-            // Note: ErrorHandler doesn't have access to Alpine's t() function
+                detail: { message, type: 'error' }
-            // This message remains in English as a fallback
+            }));
-            alert(`Failed to ${operation}. Please try again.`);
         }
     }
 };
@@ -310,6 +313,10 @@ function noteApp() {
         quickSwitcherIndex: 0,
         quickSwitcherResults: [],
         
+        // Non-blocking notifications (replaces window.alert)
+        toasts: [],
+        _toastIdSeq: 0,
+        
         // Homepage state
         selectedHomepageFolder: '',
         _homepageCache: {
@@ -725,6 +732,19 @@ function noteApp() {
                     this.viewMode = this.previousViewMode;
                 }
             });
+            
+            // Toasts from ErrorHandler and code paths without Alpine `this`
+            if (!window.__noteapp_toast_listener) {
+                window.__noteapp_toast_listener = true;
+                window.addEventListener('notediscovery:toast', (e) => {
+                    const d = e.detail || {};
+                    if (typeof d.message !== 'string' || !d.message) return;
+                    this.toast(d.message, {
+                        type: d.type || 'error',
+                        durationMs: d.durationMs
+                    });
+                });
+            }
         },
         
         // Load app configuration
@@ -1130,6 +1150,46 @@ function noteApp() {
             return value.replace(/\{\{(\w+)\}\}/g, (_, name) => params[name] ?? `{{${name}}}`);
         },
         
+        /**
+         * Non-blocking toast (replaces window.alert). Types map to theme CSS variables.
+         * @param {string} message
+         * @param {{ type?: 'error'|'warning'|'info'|'success', durationMs?: number }} [options]
+         * @returns {number|undefined} toast id
+         */
+        toast(message, options = {}) {
+            if (typeof message !== 'string' || !message) return;
+            const type = ['error', 'warning', 'info', 'success'].includes(options.type)
+                ? options.type
+                : 'info';
+            let durationMs = options.durationMs;
+            if (durationMs == null || typeof durationMs !== 'number' || durationMs < 0) {
+                durationMs = type === 'error' ? CONFIG.TOAST_DURATION_ERROR_MS
+                    : type === 'warning' ? CONFIG.TOAST_DURATION_WARNING_MS
+                        : type === 'success' ? CONFIG.TOAST_DURATION_SUCCESS_MS
+                            : CONFIG.TOAST_DURATION_INFO_MS;
+            }
+            const id = ++this._toastIdSeq;
+            const entry = { id, message, type, _tid: null };
+            this.toasts.push(entry);
+            while (this.toasts.length > CONFIG.TOAST_MAX_VISIBLE) {
+                const first = this.toasts.shift();
+                if (first && first._tid) clearTimeout(first._tid);
+            }
+            entry._tid = setTimeout(() => this.dismissToast(id), durationMs);
+            return id;
+        },
+        
+        dismissToast(id) {
+            const idx = this.toasts.findIndex((t) => t.id === id);
+            if (idx === -1) return;
+            const entry = this.toasts[idx];
+            if (entry._tid) {
+                clearTimeout(entry._tid);
+                entry._tid = null;
+            }
+            this.toasts.splice(idx, 1);
+        },
+        
         /**
          * Get localized error message from FilenameValidator result
          * @param {object} validation - The validation result from FilenameValidator
@@ -1338,7 +1398,7 @@ function noteApp() {
                 const data = await response.json();
                 this.allTags = data.tags || {};
             } catch (error) {
-                ErrorHandler.handle('load tags', error, false); // Don't show alert, tags are optional
+                ErrorHandler.handle('load tags', error, false); // Optional: no toast
             }
         },
         
@@ -1379,7 +1439,7 @@ function noteApp() {
                 const data = await response.json();
                 this.availableTemplates = data.templates || [];
             } catch (error) {
-                ErrorHandler.handle('load templates', error, false); // Don't show alert, templates are optional
+                ErrorHandler.handle('load templates', error, false); // Optional: no toast
             }
         },
         
@@ -1393,7 +1453,7 @@ function noteApp() {
                 // Validate the note name
                 const validation = FilenameValidator.validateFilename(this.newTemplateNoteName);
                 if (!validation.valid) {
-                    alert(this.getValidationErrorMessage(validation, 'note'));
+                    this.toast(this.getValidationErrorMessage(validation, 'note'), { type: 'warning' });
                     return;
                 }
                 
@@ -1419,7 +1479,7 @@ function noteApp() {
                 // CRITICAL: Check if note already exists
                 const existingNote = this.notes.find(note => note.path === notePath);
                 if (existingNote) {
-                    alert(this.t('notes.already_exists', { name: validation.sanitized }));
+                    this.toast(this.t('notes.already_exists', { name: validation.sanitized }), { type: 'warning' });
                     return;
                 }
                 
@@ -1435,7 +1495,7 @@ function noteApp() {
                 
                 if (!response.ok) {
                     const error = await response.json();
-                    alert(error.detail || this.t('templates.create_failed'));
+                    this.toast(error.detail || this.t('templates.create_failed'), { type: 'error' });
                     return;
                 }
                 
@@ -2409,7 +2469,7 @@ function noteApp() {
         // Handle media files dropped into editor
         async handleMediaDrop(event) {
             if (!this.currentNote) {
-                alert(this.t('notes.open_first'));
+                this.toast(this.t('notes.open_first'), { type: 'info' });
                 return;
             }
             
@@ -2429,7 +2489,7 @@ function noteApp() {
             const mediaFiles = files.filter(file => allowedTypes.includes(file.type.toLowerCase()));
             
             if (mediaFiles.length === 0) {
-                alert(this.t('media.no_valid_files'));
+                this.toast(this.t('media.no_valid_files'), { type: 'warning' });
                 return;
             }
             
@@ -2768,7 +2828,7 @@ function noteApp() {
                 // Prevent dropping folder into itself or its subfolders
                 if (targetFolderPath === draggedPath || 
                     targetFolderPath.startsWith(draggedPath + '/')) {
-                    alert(this.t('folders.cannot_move_into_self'));
+                    this.toast(this.t('folders.cannot_move_into_self'), { type: 'warning' });
                     return;
                 }
                 
@@ -2813,11 +2873,11 @@ function noteApp() {
                         }
                     } else {
                         const errorData = await response.json().catch(() => ({}));
-                        alert(errorData.detail || this.t('move.failed_folder'));
+                        this.toast(errorData.detail || this.t('move.failed_folder'), { type: 'error' });
                     }
                 } catch (error) {
                     console.error('Failed to move folder:', error);
-                    alert(this.t('move.failed_folder'));
+                    this.toast(this.t('move.failed_folder'), { type: 'error' });
                 }
                 return;
             }
@@ -2866,12 +2926,12 @@ function noteApp() {
                 } else {
                     const errorData = await response.json().catch(() => ({}));
                     const errorKey = isMedia ? 'move.failed_media' : 'move.failed_note';
-                    alert(errorData.detail || this.t(errorKey));
+                    this.toast(errorData.detail || this.t(errorKey), { type: 'error' });
                 }
             } catch (error) {
                 console.error(`Failed to move ${isMedia ? 'media' : 'note'}:`, error);
                 const errorKey = isMedia ? 'move.failed_media' : 'move.failed_note';
-                alert(this.t(errorKey));
+                this.toast(this.t(errorKey), { type: 'error' });
             }
         },
         
@@ -3313,7 +3373,7 @@ function noteApp() {
                     : FilenameValidator.validatePath(noteName);
                 
                 if (!validation.valid) {
-                    alert(this.getValidationErrorMessage(validation, 'note'));
+                    this.toast(this.getValidationErrorMessage(validation, 'note'), { type: 'warning' });
                     return;
                 }
                 
@@ -3329,7 +3389,7 @@ function noteApp() {
             // CRITICAL: Check if note already exists (applies to both prompt and direct path)
             const existingNote = this.notes.find(note => note.path === notePath);
             if (existingNote) {
-                alert(this.t('notes.already_exists', { name: notePath }));
+                this.toast(this.t('notes.already_exists', { name: notePath }), { type: 'warning' });
                 return;
             }
             
@@ -3381,7 +3441,7 @@ function noteApp() {
                 : FilenameValidator.validatePath(folderName);
             
             if (!validation.valid) {
-                alert(this.getValidationErrorMessage(validation, 'folder'));
+                this.toast(this.getValidationErrorMessage(validation, 'folder'), { type: 'warning' });
                 return;
             }
             
@@ -3391,7 +3451,7 @@ function noteApp() {
             // Check if folder already exists
             const existingFolder = this.allFolders.find(folder => folder === folderPath);
             if (existingFolder) {
-                alert(this.t('folders.already_exists', { name: validatedName }));
+                this.toast(this.t('folders.already_exists', { name: validatedName }), { type: 'warning' });
                 return;
             }
             
@@ -3427,7 +3487,7 @@ function noteApp() {
             // Validate the new name (single segment, no path separators)
             const validation = FilenameValidator.validateFilename(newName);
             if (!validation.valid) {
-                alert(this.getValidationErrorMessage(validation, 'folder'));
+                this.toast(this.getValidationErrorMessage(validation, 'folder'), { type: 'warning' });
                 return;
             }
             
@@ -3917,14 +3977,14 @@ function noteApp() {
             const newName = this.currentNoteName.trim();
             
             if (!newName) {
-                alert(this.t('notes.empty_name'));
+                this.toast(this.t('notes.empty_name'), { type: 'warning' });
                 return;
             }
             
             // Validate the new name (single segment, no path separators)
             const validation = FilenameValidator.validateFilename(newName);
             if (!validation.valid) {
-                alert(this.getValidationErrorMessage(validation, 'note'));
+                this.toast(this.getValidationErrorMessage(validation, 'note'), { type: 'warning' });
                 // Reset the name in the UI
                 this.currentNoteName = oldPath.split('/').pop().replace('.md', '');
                 return;
@@ -3939,7 +3999,7 @@ function noteApp() {
             // Check if a note with the new name already exists
             const existingNote = this.notes.find(n => n.path.toLowerCase() === newPath.toLowerCase());
             if (existingNote) {
-                alert(this.t('notes.already_exists', { name: validatedName }));
+                this.toast(this.t('notes.already_exists', { name: validatedName }), { type: 'warning' });
                 // Reset the name in the UI
                 this.currentNoteName = oldPath.split('/').pop().replace('.md', '');
                 return;
@@ -5199,7 +5259,7 @@ function noteApp() {
         // Export current note as HTML via backend API
         async exportToHTML() {
             if (!this.currentNote || !this.noteContent) {
-                alert(this.t('notes.no_content'));
+                this.toast(this.t('notes.no_content'), { type: 'info' });
                 return;
             }
             
@@ -5241,14 +5301,14 @@ function noteApp() {
                 
             } catch (error) {
                 console.error('HTML export failed:', error);
-                alert(this.t('export.failed', { error: error.message }));
+                this.toast(this.t('export.failed', { error: error.message }), { type: 'error' });
             }
         },
         
         // Open print preview in new window
         printPreview() {
             if (!this.currentNote || !this.noteContent) {
-                alert(this.t('notes.no_content'));
+                this.toast(this.t('notes.no_content'), { type: 'info' });
                 return;
             }
             
@@ -5468,11 +5528,11 @@ function noteApp() {
                     this._sharedNotePaths.add(this.currentNote);
                 } else {
                     const error = await response.json();
-                    alert(this.t('share.error_creating', { error: error.detail || 'Unknown error' }));
+                    this.toast(this.t('share.error_creating', { error: error.detail || 'Unknown error' }), { type: 'error' });
                 }
             } catch (error) {
                 console.error('Failed to create share link:', error);
-                alert(this.t('share.error_creating', { error: error.message }));
+                this.toast(this.t('share.error_creating', { error: error.message }), { type: 'error' });
             } finally {
                 this.shareLoading = false;
             }
@@ -5521,11 +5581,11 @@ function noteApp() {
                     this._sharedNotePaths.delete(this.currentNote);
                 } else {
                     const error = await response.json();
-                    alert(this.t('share.error_revoking', { error: error.detail || 'Unknown error' }));
+                    this.toast(this.t('share.error_revoking', { error: error.detail || 'Unknown error' }), { type: 'error' });
                 }
             } catch (error) {
                 console.error('Failed to revoke share link:', error);
-                alert(this.t('share.error_revoking', { error: error.message }));
+                this.toast(this.t('share.error_revoking', { error: error.message }), { type: 'error' });
             } finally {
                 this.shareLoading = false;
             }

frontend/index.html

@@ -1351,6 +1351,47 @@
         <span>Exit Zen</span>
     </button>
     
+    <!-- Toast notifications (non-blocking; z-index above modals at 1100–1200; desktop-first top-right) -->
+    <div
+        class="fixed z-[1300] flex w-[min(28rem,calc(100vw-2rem))] flex-col items-stretch gap-2 pointer-events-none"
+        style="top: max(1rem, env(safe-area-inset-top, 0px)); right: max(1rem, env(safe-area-inset-right, 0px));"
+        role="region"
+        :aria-label="t('toast.region_label')"
+        aria-live="polite"
+    >
+        <template x-for="item in toasts" :key="item.id">
+            <div
+                x-transition:enter="transition ease-out duration-200"
+                x-transition:enter-start="opacity-0 -translate-y-2"
+                x-transition:enter-end="opacity-100 translate-y-0"
+                x-transition:leave="transition ease-in duration-150"
+                x-transition:leave-start="opacity-100"
+                x-transition:leave-end="opacity-0 -translate-y-1"
+                class="pointer-events-auto flex items-start gap-2 rounded-lg border shadow-lg px-3 py-2.5 text-sm"
+                :role="item.type === 'error' ? 'alert' : 'status'"
+                :style="{
+                    backgroundColor: 'var(--bg-secondary)',
+                    color: 'var(--text-primary)',
+                    borderColor: 'var(--border-primary)',
+                    borderLeftWidth: '4px',
+                    borderLeftStyle: 'solid',
+                    borderLeftColor: item.type === 'error' ? 'var(--error)' : (item.type === 'warning' ? 'var(--warning)' : (item.type === 'success' ? 'var(--success)' : 'var(--accent-primary)'))
+                }"
+            >
+                <span class="flex-1 min-w-0 break-words leading-snug" x-text="item.message"></span>
+                <button
+                    type="button"
+                    class="flex-shrink-0 rounded p-0.5 opacity-70 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-opacity-50"
+                    style="color: var(--text-secondary); --tw-ring-color: var(--accent-primary);"
+                    @click="dismissToast(item.id)"
+                    :aria-label="t('toast.dismiss')"
+                >
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                </button>
+            </div>
+        </template>
+    </div>
+    
     <!-- Mobile Overlay -->
     <div 
         @click="mobileSidebarOpen = false"

locales/de-DE.json

@@ -28,6 +28,11 @@
     "failed": "{{action}} fehlgeschlagen. Bitte versuche es erneut."
   },
 
+  "toast": {
+    "region_label": "Benachrichtigungen",
+    "dismiss": "Schließen"
+  },
+
   "sidebar": {
     "title": "DATEIEN",
     "favorites_title": "Favoriten",

locales/en-GB.json

@@ -28,6 +28,11 @@
     "failed": "Failed to {{action}}. Please try again."
   },
 
+  "toast": {
+    "region_label": "Notifications",
+    "dismiss": "Dismiss"
+  },
+
   "sidebar": {
     "title": "FILES",
     "favorites_title": "Favourites",

locales/en-US.json

@@ -28,6 +28,11 @@
     "failed": "Failed to {{action}}. Please try again."
   },
 
+  "toast": {
+    "region_label": "Notifications",
+    "dismiss": "Dismiss"
+  },
+
   "sidebar": {
     "title": "FILES",
     "favorites_title": "Favorites",

locales/es-ES.json

@@ -28,6 +28,11 @@
     "failed": "Error al {{action}}. Por favor, inténtalo de nuevo."
   },
 
+  "toast": {
+    "region_label": "Notificaciones",
+    "dismiss": "Cerrar"
+  },
+
   "sidebar": {
     "title": "ARCHIVOS",
     "favorites_title": "Favoritos",

locales/fr-FR.json

@@ -28,6 +28,11 @@
     "failed": "Échec de {{action}}. Veuillez réessayer."
   },
 
+  "toast": {
+    "region_label": "Notifications",
+    "dismiss": "Fermer"
+  },
+
   "sidebar": {
     "title": "FICHIERS",
     "favorites_title": "Favoris",

locales/hu-HU.json

@@ -28,6 +28,11 @@
     "failed": "Hiba a(z) {{action}} során. Kérlek, próbáld újra."
   },
 
+  "toast": {
+    "region_label": "Értesítések",
+    "dismiss": "Bezárás"
+  },
+
   "sidebar": {
     "title": "FÁJLOK",
     "favorites_title": "Kedvencek",

locales/it-IT.json

@@ -28,6 +28,11 @@
     "failed": "Impossibile {{action}}. Riprova."
   },
 
+  "toast": {
+    "region_label": "Notifiche",
+    "dismiss": "Chiudi"
+  },
+
   "sidebar": {
     "title": "FILE",
     "favorites_title": "Preferiti",

locales/ja-JP.json

@@ -28,6 +28,11 @@
     "failed": "{{action}}に失敗しました。もう一度お試しください。"
   },
 
+  "toast": {
+    "region_label": "通知",
+    "dismiss": "閉じる"
+  },
+
   "sidebar": {
     "title": "ファイル",
     "favorites_title": "お気に入り",

locales/ru-RU.json

@@ -28,6 +28,11 @@
     "failed": "Не удалось {{action}}. Попробуйте снова."
   },
 
+  "toast": {
+    "region_label": "Уведомления",
+    "dismiss": "Закрыть"
+  },
+
   "sidebar": {
     "title": "ФАЙЛЫ",
     "favorites_title": "Избранное",

locales/sl-SI.json

@@ -28,6 +28,11 @@
     "failed": "Napaka pri {{action}}. Prosimo, poskusite znova."
   },
 
+  "toast": {
+    "region_label": "Obvestila",
+    "dismiss": "Zapri"
+  },
+
   "sidebar": {
     "title": "DATOTEKE",
     "favorites_title": "Priljubljene",

locales/zh-CN.json

@@ -28,6 +28,11 @@
     "failed": "{{action}} 失败。请重试。"
   },
 
+  "toast": {
+    "region_label": "通知",
+    "dismiss": "关闭"
+  },
+
   "sidebar": {
     "title": "文件",
     "favorites_title": "收藏夹",