Jake
69d768e803
THE PROBLEM (Codex review + architecture-review.md §1, §14):
Multiple critical paths discard errors silently — `let _ = insert_transcript(...)`,
`.catch(() => {})`, inline `error = ...` state that not every page surfaces. ND
users in particular need explicit feedback when something fails; silent
failure is worse than no feature.
SHIPPED:
src/lib/stores/toasts.svelte.js (new):
- Minimal in-house toast store (~80 lines, no svelte-french-toast dep)
- Severity → palette: info/success → moss, warn → signal, error → ember
- Auto-dismiss durations per severity (success 3s, info 4s, warn 6s,
error sticky)
- `invokeWithToast(invoke, command, args, errorTitle?)` helper wraps a
Tauri invoke and toasts on failure while still throwing for callers
that need to handle the error themselves
src/lib/components/ToastViewport.svelte (new):
- Reads from the toasts store
- Bottom-right stack, max-width clamp on small screens
- aria-live=polite + role=alert on error toasts (screen-reader friendly)
- Slide-in animation honours `html.reduce-motion` for the existing
preferences toggle
- Severity left-border in brand colours via existing CSS variables
src/routes/+layout.svelte:
- Mounts <ToastViewport /> once at the app root so toasts work from any
page or window
src/lib/pages/DictationPage.svelte:
- First error-toast wiring: failures starting recording now show a
sticky toast in addition to the inline `error` panel
- Replaces a previously easy-to-miss failure-mode
NEXT (Day 4 batch):
- Wire toasts into FilesPage, HistoryPage, SettingsPage, ModelDownloader
(all currently swallow errors)
- Add `add_transcript`, `list_transcripts`, `update_transcript` (closes the
long-standing TODO Codex flagged), `delete_transcript` Tauri commands
wrapping the existing storage layer
- Switch addToHistory to dual-write (localStorage + SQLite) so the
canonical store catches up with the actual transcript flow
- FTS5 transcripts_fts virtual table + search command
- Wrap multi-row writes (decompose_and_store) in DB transactions
130 lines
3.5 KiB
Svelte
130 lines
3.5 KiB
Svelte
<script>
|
|
// Renders the toast stack in the bottom-right of the viewport. Mount once
|
|
// at the app root (in +layout.svelte). Reads from the global toasts store.
|
|
//
|
|
// Severity colour mapping uses the brand palette via CSS variables already
|
|
// defined in app.css — no inline literals.
|
|
//
|
|
// Honours prefers-reduced-motion via the existing :root[data-reduce-motion]
|
|
// attribute that preferences.svelte.js sets.
|
|
import { toasts } from '$lib/stores/toasts.svelte.js';
|
|
import { X } from 'lucide-svelte';
|
|
|
|
function severityClass(severity) {
|
|
switch (severity) {
|
|
case 'success': return 'toast-success';
|
|
case 'info': return 'toast-info';
|
|
case 'warn': return 'toast-warn';
|
|
case 'error': return 'toast-error';
|
|
default: return 'toast-info';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="toast-viewport" aria-live="polite" aria-atomic="false">
|
|
{#each toasts.items as toast (toast.id)}
|
|
<div
|
|
class="toast {severityClass(toast.severity)}"
|
|
role={toast.severity === 'error' ? 'alert' : 'status'}
|
|
>
|
|
<div class="toast-body">
|
|
<div class="toast-title">{toast.title}</div>
|
|
{#if toast.body}
|
|
<div class="toast-msg">{toast.body}</div>
|
|
{/if}
|
|
</div>
|
|
<button
|
|
class="toast-close"
|
|
aria-label="Dismiss"
|
|
onclick={() => toasts.dismiss(toast.id)}
|
|
type="button"
|
|
>
|
|
<X size={14} aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
.toast-viewport {
|
|
position: fixed;
|
|
bottom: 1rem;
|
|
right: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
z-index: 9999;
|
|
max-width: min(28rem, calc(100vw - 2rem));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toast {
|
|
pointer-events: auto;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
padding: 0.875rem 1rem;
|
|
border-radius: 0.5rem;
|
|
background: var(--surface, #1a1a1a);
|
|
color: var(--text, #fff);
|
|
border-left: 3px solid var(--moss, #4a7a4a);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
|
|
/* Slide in from right; honours reduce-motion via the existing class
|
|
that preferences.svelte.js applies to <html>. */
|
|
animation: toast-slide-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
:global(html.reduce-motion) .toast { animation: none; }
|
|
|
|
@keyframes toast-slide-in {
|
|
from { transform: translateX(100%); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
|
|
.toast-info { border-left-color: var(--moss, #4a7a4a); }
|
|
.toast-success { border-left-color: var(--moss, #4a7a4a); }
|
|
.toast-warn { border-left-color: var(--signal, #d4a017); }
|
|
.toast-error { border-left-color: var(--ember, #c87144); }
|
|
|
|
.toast-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.toast-title {
|
|
font-weight: 600;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.4;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.toast-msg {
|
|
margin-top: 0.25rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
color: var(--text-muted, rgba(255, 255, 255, 0.7));
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.toast-close {
|
|
flex-shrink: 0;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-muted, rgba(255, 255, 255, 0.6));
|
|
cursor: pointer;
|
|
padding: 0.25rem;
|
|
border-radius: 0.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background 100ms, color 100ms;
|
|
}
|
|
.toast-close:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: var(--text, #fff);
|
|
}
|
|
.toast-close:focus-visible {
|
|
outline: 2px solid var(--ember, #c87144);
|
|
outline-offset: 2px;
|
|
}
|
|
</style>
|