From 7df6d1eec3fb9d175214c63fd91a5233f3f78e45 Mon Sep 17 00:00:00 2001 From: Sam Chau Date: Mon, 3 Nov 2025 17:05:48 +1030 Subject: [PATCH] refactor(alerts): move to lib/client - also remove reusable request wrapper --- src/components/arr/ArrInstanceForm.svelte | 25 +++--- .../NotificationServiceForm.svelte | 6 +- src/components/toast/ToastContainer.svelte | 12 --- .../client/alerts/Alert.svelte} | 8 +- src/lib/client/alerts/AlertContainer.svelte | 12 +++ src/lib/client/alerts/store.ts | 41 +++++++++ src/lib/client/stores/toast.ts | 41 --------- src/routes/+layout.svelte | 4 +- src/routes/settings/backups/+page.svelte | 18 ++-- .../general/components/BackupSettings.svelte | 6 +- .../general/components/LoggingSettings.svelte | 6 +- .../settings/jobs/[id]/edit/+page.svelte | 6 +- .../settings/jobs/components/JobCard.svelte | 10 +-- src/routes/settings/logs/+page.svelte | 6 +- .../settings/notifications/+page.svelte | 14 +-- src/utils/api/request.ts | 88 ------------------- svelte.config.js | 2 +- 17 files changed, 111 insertions(+), 194 deletions(-) delete mode 100644 src/components/toast/ToastContainer.svelte rename src/{components/toast/Toast.svelte => lib/client/alerts/Alert.svelte} (91%) create mode 100644 src/lib/client/alerts/AlertContainer.svelte create mode 100644 src/lib/client/alerts/store.ts delete mode 100644 src/lib/client/stores/toast.ts delete mode 100644 src/utils/api/request.ts diff --git a/src/components/arr/ArrInstanceForm.svelte b/src/components/arr/ArrInstanceForm.svelte index 41c721e..78153af 100644 --- a/src/components/arr/ArrInstanceForm.svelte +++ b/src/components/arr/ArrInstanceForm.svelte @@ -1,10 +1,9 @@ - -
- {#each $toastStore as toast (toast.id)} -
- -
- {/each} -
diff --git a/src/components/toast/Toast.svelte b/src/lib/client/alerts/Alert.svelte similarity index 91% rename from src/components/toast/Toast.svelte rename to src/lib/client/alerts/Alert.svelte index d58c331..a7b1d2f 100644 --- a/src/components/toast/Toast.svelte +++ b/src/lib/client/alerts/Alert.svelte @@ -1,11 +1,11 @@ diff --git a/src/lib/client/alerts/AlertContainer.svelte b/src/lib/client/alerts/AlertContainer.svelte new file mode 100644 index 0000000..8f5c24d --- /dev/null +++ b/src/lib/client/alerts/AlertContainer.svelte @@ -0,0 +1,12 @@ + + +
+ {#each $alertStore as alert (alert.id)} +
+ +
+ {/each} +
diff --git a/src/lib/client/alerts/store.ts b/src/lib/client/alerts/store.ts new file mode 100644 index 0000000..1e2c336 --- /dev/null +++ b/src/lib/client/alerts/store.ts @@ -0,0 +1,41 @@ +import { writable } from 'svelte/store'; + +export type AlertType = 'success' | 'error' | 'warning' | 'info'; + +export interface Alert { + id: string; + type: AlertType; + message: string; + duration?: number; // Auto-dismiss duration in ms (default: 5000) +} + +function createAlertStore() { + const { subscribe, update } = writable([]); + + return { + subscribe, + add: (type: AlertType, message: string, duration = 5000) => { + const id = crypto.randomUUID(); + const alert: Alert = { id, type, message, duration }; + + update((alerts) => [...alerts, alert]); + + // Auto-dismiss after duration + if (duration > 0) { + setTimeout(() => { + update((alerts) => alerts.filter((a) => a.id !== id)); + }, duration); + } + + return id; + }, + remove: (id: string) => { + update((alerts) => alerts.filter((a) => a.id !== id)); + }, + clear: () => { + update(() => []); + } + }; +} + +export const alertStore = createAlertStore(); diff --git a/src/lib/client/stores/toast.ts b/src/lib/client/stores/toast.ts deleted file mode 100644 index 4a48988..0000000 --- a/src/lib/client/stores/toast.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { writable } from 'svelte/store'; - -export type ToastType = 'success' | 'error' | 'warning' | 'info'; - -export interface Toast { - id: string; - type: ToastType; - message: string; - duration?: number; // Auto-dismiss duration in ms (default: 5000) -} - -function createToastStore() { - const { subscribe, update } = writable([]); - - return { - subscribe, - add: (type: ToastType, message: string, duration = 5000) => { - const id = crypto.randomUUID(); - const toast: Toast = { id, type, message, duration }; - - update((toasts) => [...toasts, toast]); - - // Auto-dismiss after duration - if (duration > 0) { - setTimeout(() => { - update((toasts) => toasts.filter((t) => t.id !== id)); - }, duration); - } - - return id; - }, - remove: (id: string) => { - update((toasts) => toasts.filter((t) => t.id !== id)); - }, - clear: () => { - update(() => []); - } - }; -} - -export const toastStore = createToastStore(); diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 4b09385..1ad3c7b 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -3,7 +3,7 @@ import logo from '$assets/logo.svg'; import Navbar from '$components/navigation/navbar/navbar.svelte'; import PageNav from '$components/navigation/pageNav/pageNav.svelte'; - import ToastContainer from '$components/toast/ToastContainer.svelte'; + import AlertContainer from '$alerts/AlertContainer.svelte'; @@ -13,7 +13,7 @@ - +
diff --git a/src/routes/settings/backups/+page.svelte b/src/routes/settings/backups/+page.svelte index a96bbf2..6eef2d0 100644 --- a/src/routes/settings/backups/+page.svelte +++ b/src/routes/settings/backups/+page.svelte @@ -1,6 +1,6 @@