refactor: consolidate ad-hoc toast notifications into centralized M.showToast()

- Replace showConversionToast() in file-converters.js with M.showToast('success')
- Replace local showToast() in speechToText.js (3 call sites) with M.showToast()
- Remove orphaned .conversion-toast CSS + keyframes from modals.css
- Remove orphaned .speech-toast CSS + all variants from speech.css

Author: ijbo

README.md

@@ -373,6 +373,7 @@ TextAgent has undergone significant evolution since its inception. What started
 
 | Date | Feature / Update |
 |------|-----------------|
+| **2026-03-09** | 🔔 **Toast Consolidation** — replaced ad-hoc `showConversionToast()` (file-converters) and local `showToast()` (speechToText) with centralized `M.showToast()`; removed orphaned `.conversion-toast` and `.speech-toast` CSS; all notifications now use a single, themed, accessible toast system |
 | **2026-03-09** | ✉️ **Email to Self** — share result modal includes "Email to Self" section; enter email → document is sent directly to inbox with share link + `.md` file attached; powered by Google Apps Script (free, 100 emails/day); loading state, success/error feedback; email persisted in localStorage; zero third-party dependencies |
 | **2026-03-09** | 🔑 **Centralized Storage Keys** — created `js/storage-keys.js` as single source of truth for all ~20 localStorage key strings; replaced scattered raw string literals across 12 JS files with `M.KEYS.*` constants; eliminates storage-key drift bugs (e.g., `mdview-preview-theme` vs `md-viewer-preview-theme`) |
 | **2026-03-09** | 🧩 **File Decomposition** — split 4 largest JS modules (~5,500 lines) into 14 focused files: `ai-assistant.js` → 4 modules (core, chat, actions, image); `ai-docgen.js` → 3 modules (core, generate, ui); `executable-blocks.js` → 4 modules (core bash, math, python, sandbox); `table-tools.js` → 3 modules (core, sort-filter, analytics); internal namespaces (`M._ai`, `M._docgen`, `M._exec`, `M._table`) for cross-module communication; phased dynamic imports in `main.js` |

changelogs/CHANGELOG-toast-consolidation.md

@@ -0,0 +1,35 @@
+# Toast Consolidation — Unified App-Native Notifications
+
+- Replaced ad-hoc `showConversionToast()` in `file-converters.js` with centralized `M.showToast('success')`
+- Replaced local `showToast()` helper in `speechToText.js` (3 call sites) with centralized `M.showToast()`
+- Removed orphaned `.conversion-toast` CSS and `toastIn`/`toastOut` keyframes from `modals.css`
+- Removed orphaned `.speech-toast` CSS and all variants (error, info, dark theme) from `speech.css`
+
+---
+
+## Summary
+
+Consolidated two ad-hoc toast notification implementations into the centralized `M.showToast()` system from `js/toast.js`. This eliminates duplicate toast DOM creation, inconsistent styling, and dead CSS — all notifications now flow through a single, themed, accessible toast component.
+
+---
+
+## 1. File Converters — Remove Ad-Hoc Toast
+**Files:** `js/file-converters.js`, `css/modals.css`
+**What:** Deleted `showConversionToast()` which manually created `.conversion-toast` DOM elements. Replaced the single call site (successful file conversion) with `M.showToast('✓ Converted … to Markdown', 'success')`. Removed the `.conversion-toast` CSS rule and its `toastIn`/`toastOut` keyframes from `modals.css`.
+**Impact:** File conversion success feedback now uses the same themed, animated, accessible toast as every other notification in the app.
+
+## 2. Speech-to-Text — Remove Local Toast Helper
+**Files:** `js/speechToText.js`, `css/speech.css`
+**What:** Deleted the local `showToast()` function (16 lines) which created `.speech-toast` DOM elements. Replaced 3 call sites (mic denied, network error, start failure) with `M.showToast()`. Removed `.speech-toast`, `.speech-toast-show`, `.speech-toast-error`, `.speech-toast-info`, and dark-theme variants from `speech.css`.
+**Impact:** Speech error notifications now match the app-wide toast style instead of appearing as a separate, differently-styled notification.
+
+---
+
+## Files Changed (4 total)
+
+| File | Lines Changed | Type |
+|------|:---:|------|
+| `js/file-converters.js` | +1 −8 | Remove ad-hoc toast, use M.showToast |
+| `js/speechToText.js` | +3 −19 | Remove local showToast, use M.showToast |
+| `css/modals.css` | −30 | Remove .conversion-toast CSS + keyframes |
+| `css/speech.css` | −45 | Remove .speech-toast CSS + variants |

css/modals.css

@@ -584,36 +584,7 @@
   }
 }
 
-/* Conversion success toast */
-.conversion-toast {
-  position: fixed;
-  bottom: 24px;
-  left: 50%;
-  transform: translateX(-50%) translateY(20px);
-  background: #238636;
-  color: #fff;
-  padding: 10px 20px;
-  border-radius: 8px;
-  font-size: 0.9rem;
-  z-index: 10001;
-  opacity: 0;
-  animation: toastIn 0.3s ease forwards, toastOut 0.3s ease 2.5s forwards;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-@keyframes toastIn {
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
 
-@keyframes toastOut {
-  to {
-    opacity: 0;
-    transform: translateX(-50%) translateY(20px);
-  }
-}
 
 /* ========================================
    LLM MEMORY CONVERTER MODAL

css/speech.css

@@ -194,51 +194,7 @@
   color: #a5b4fc;
 }
 
-/* --- Toast Notifications --- */
-.speech-toast {
-  position: fixed;
-  bottom: 24px;
-  left: 50%;
-  transform: translateX(-50%) translateY(20px);
-  padding: 10px 20px;
-  border-radius: 8px;
-  font-size: 13px;
-  font-weight: 500;
-  z-index: 9999;
-  opacity: 0;
-  transition: all 0.3s ease;
-  pointer-events: none;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-}
-
-.speech-toast-show {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0);
-}
 
-.speech-toast-error {
-  background: #fef2f2;
-  color: #dc2626;
-  border: 1px solid #fecaca;
-}
-
-.speech-toast-info {
-  background: #eff6ff;
-  color: #2563eb;
-  border: 1px solid #bfdbfe;
-}
-
-[data-theme="dark"] .speech-toast-error {
-  background: #2a1515;
-  color: #f87171;
-  border-color: #4a2020;
-}
-
-[data-theme="dark"] .speech-toast-info {
-  background: #152040;
-  color: #60a5fa;
-  border-color: #1e3a5f;
-}
 
 /* --- Voice Commands Cheat Sheet Popup --- */
 .speech-cheat-popup {
@@ -406,4 +362,4 @@
     width: auto;
     max-height: 60vh;
   }
-}
+}

js/file-converters.js

@@ -29,14 +29,6 @@
         conversionOverlay.style.display = 'none';
     }
 
-    function showConversionToast(message) {
-        var toast = document.createElement('div');
-        toast.className = 'conversion-toast';
-        toast.textContent = message;
-        document.body.appendChild(toast);
-        setTimeout(function () { toast.remove(); }, 3000);
-    }
-
     function getFileExtension(filename) {
         return (filename.split('.').pop() || '').toLowerCase();
     }
@@ -74,7 +66,7 @@
             M.markdownEditor.value = markdown;
             M.renderMarkdown();
             M.dropzone.style.display = 'none';
-            showConversionToast('\u2713 Converted ' + file.name + ' to Markdown');
+            M.showToast('\u2713 Converted ' + file.name + ' to Markdown', 'success');
         } catch (err) {
             console.error('File conversion failed:', err);
             M.showToast('Failed to convert ' + file.name + ': ' + err.message, 'error');

js/speechToText.js

@@ -322,12 +322,12 @@
         recognition.onerror = (event) => {
             console.warn('🎤 Speech recognition error:', event.error);
             if (event.error === 'not-allowed' || event.error === 'service-not-allowed') {
-                showToast('Microphone access denied. Please allow microphone permissions.', 'error');
+                M.showToast('Microphone access denied. Please allow microphone permissions.', 'error');
                 stopListening();
             } else if (event.error === 'no-speech') {
                 // Ignore — just means silence
             } else if (event.error === 'network') {
-                showToast('Speech recognition requires an internet connection (Chrome).', 'error');
+                M.showToast('Speech recognition requires an internet connection (Chrome).', 'error');
                 stopListening();
             } else if (event.error === 'aborted') {
                 // Normal stop, ignore
@@ -382,7 +382,7 @@
             // Recreate and retry
             createRecognition();
             try { recognition.start(); } catch (e2) {
-                showToast('Could not start voice dictation.', 'error');
+                M.showToast('Could not start voice dictation.', 'error');
             }
         }
     }
@@ -441,23 +441,6 @@
         }
     }
 
-    // ── Toast Helper ──────────────────────────────
-    function showToast(message, type) {
-        // Use existing toast if available, otherwise create a simple one
-        const existing = document.querySelector('.speech-toast');
-        if (existing) existing.remove();
-
-        const toast = document.createElement('div');
-        toast.className = `speech-toast speech-toast-${type || 'info'}`;
-        toast.textContent = message;
-        document.body.appendChild(toast);
-        requestAnimationFrame(() => toast.classList.add('speech-toast-show'));
-        setTimeout(() => {
-            toast.classList.remove('speech-toast-show');
-            setTimeout(() => toast.remove(), 300);
-        }, 4000);
-    }
-
     // ── Event Listeners ───────────────────────────
     if (micBtn) micBtn.addEventListener('click', toggleListening);
     if (mobileMicBtn) mobileMicBtn.addEventListener('click', () => {