Jake
d6bf9ed245
Wholesale JS -> TS migration of the frontend — stores, utils, actions,
and all Svelte component scripts adopt type annotations. Compile-time
surfaces (app.d.ts, lib/types/) added for shared DTO types.
Build plumbing:
- package.json: dev:frontend script that runs svelte-kit sync first
- tauri.conf.json: beforeDevCommand points at dev:frontend
- run.sh: dropped the sed-hack that temporarily blanked beforeDevCommand;
now relies on npm run dev:frontend to avoid double-Vite
- jsconfig.json: allowImportingTsExtensions
Preserves all Group 1 behaviour:
- page.svelte.ts keeps loadHistory / loadTasks Tauri-first, no
localStorage; saveTranscriptMeta + mapTranscriptRow + mapTaskRow
intact; update_task_cmd and update_transcript_meta_cmd invocations
carry the correct payload shape.
- Toasts, preferences stores typed without behaviour change.
- Viewer still routes segment edits through saveTranscriptMeta; the
Task 1.5 TODO markers are gone.
taskExtractor.ts is functionally improved during the migration:
- multi-task matches in the same sentence
- list-style shopping-verb expansion (get bread, milk, and cheese)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
131 lines
3.6 KiB
Svelte
131 lines
3.6 KiB
Svelte
<script lang="ts">
|
|
import type { ToastSeverity } from "$lib/types/app";
|
|
// 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: ToastSeverity) {
|
|
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>
|