feat(toast): add toast notifications for user feedback across app (#124, RDFA-243)

Introduce a global toast notification system to enhance user feedback for actions like imports, exports, edits, and errors. Includes `Toast`, `ToastContainer`, and a lightweight `toastStore` for managing notifications.

Signed-off-by: Jan-Hendrik Spahn <jan-hendrik.spahn@soptim.de>

Author: spah-soptim

frontend/src/lib/GraphExport.svelte

@@ -25,6 +25,7 @@
     import { DropdownMenu } from "$lib/components/bitsui/dropdown/index";
     import DatasetAndGraphSelection from "$lib/components/DatasetAndGraphSelection.svelte";
     import { PUBLIC_BACKEND_URL } from "$lib/config/runtime";
+    import { toastStore } from "$lib/eventhandling/toastStore.svelte.js";
     import { ReactiveOntology } from "$lib/models/reactive/models/ontology/reactive-ontology.svelte.js";
     import { forceReloadTrigger } from "$lib/sharedState.svelte.js";
     import { saveFile, supportedRDFMediaTypes } from "$lib/utils/fileUtils.ts";
@@ -150,22 +151,44 @@
                     ontology.entries.append(entry);
                 }
             }
-            await bec.putOntology(
+            const ontologyRes = await bec.putOntology(
                 selectedDatasetName,
                 graphURI,
                 ontology.getPlainObject(),
             );
+            if (ontologyRes && ontologyRes.ok === false) {
+                toastStore.error(
+                    "Profile header update failed",
+                    "Could not persist the generated profile header entries; export aborted.",
+                );
+                return;
+            }
             forceReloadTrigger.trigger();
         }
         try {
             const response = await fetchGraphFile(getAPIRoute);
+            if (!response.ok) {
+                toastStore.error(
+                    "Export failed",
+                    `Could not export "${graphURI}".`,
+                );
+                return;
+            }
             const blob = await response.blob();
             const suggestedFilename = response.headers.get(
                 "content-disposition",
             );
             saveFile(blob, suggestedFilename, selectedMediaType);
+            toastStore.success(
+                "Export ready",
+                `"${graphURI}" downloaded as ${selectedMediaType.name}.`,
+            );
         } catch (e) {
             console.error("Failed to download graph:", e);
+            toastStore.error(
+                "Export failed",
+                "An unexpected error occurred while exporting.",
+            );
         } finally {
             showDialog = false;
         }

frontend/src/lib/actions/editingActions.js

@@ -0,0 +1,77 @@
+/*
+ *    Copyright (c) 2024-2026 SOPTIM AG
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ *
+ */
+
+/**
+ * Shared actions for toggling the read-only state of a dataset.
+ *
+ * Each function performs the API call, surfaces a success or error toast,
+ * and returns `true` when the write succeeded. Reactive state updates that
+ * are local to a call site (refreshing local `readonly` flags, triggering
+ * editor state, etc.) remain the caller's responsibility.
+ */
+
+import { BackendConnection } from "$lib/api/backend.js";
+import { PUBLIC_BACKEND_URL } from "$lib/config/runtime";
+import { toastStore } from "$lib/eventhandling/toastStore.svelte.js";
+
+const bec = new BackendConnection(fetch, PUBLIC_BACKEND_URL);
+
+/**
+ * Make the dataset editable. Toasts on success and failure.
+ *
+ * @param {string} datasetName
+ * @returns {Promise<boolean>} `true` when the dataset is now editable.
+ */
+export async function enableEditing(datasetName) {
+    if (!datasetName) return false;
+    const res = await bec.enableEditing(datasetName);
+    if (res && res.ok === false) {
+        toastStore.error(
+            "Could not enable editing",
+            `Dataset "${datasetName}" remains read-only.`,
+        );
+        return false;
+    }
+    toastStore.success(
+        "Editing enabled",
+        `Dataset "${datasetName}" is now editable.`,
+    );
+    return true;
+}
+
+/**
+ * Mark the dataset read-only. Toasts on success and failure.
+ *
+ * @param {string} datasetName
+ * @returns {Promise<boolean>} `true` when the dataset is now read-only.
+ */
+export async function disableEditing(datasetName) {
+    if (!datasetName) return false;
+    const res = await bec.disableEditing(datasetName);
+    if (res && res.ok === false) {
+        toastStore.error(
+            "Could not disable editing",
+            `Dataset "${datasetName}" remains editable.`,
+        );
+        return false;
+    }
+    toastStore.success(
+        "Editing disabled",
+        `Dataset "${datasetName}" is now read-only.`,
+    );
+    return true;
+}

frontend/src/lib/actions/versionControlActions.js

@@ -16,6 +16,7 @@
  */
 
 import { PUBLIC_BACKEND_URL } from "$lib/config/runtime";
+import { toastStore } from "$lib/eventhandling/toastStore.svelte.js";
 import { editorState } from "$lib/sharedState.svelte.js";
 
 function resolveTargets(datasetName, graphURI) {
@@ -71,6 +72,7 @@ export async function undo(datasetName, graphURI) {
     }
 
     console.log("Undo failed.");
+    toastStore.error("Undo failed", "Could not undo the last change.");
     return false;
 }
 
@@ -113,5 +115,6 @@ export async function redo(datasetName, graphURI) {
     }
 
     console.log("Redo failed.");
+    toastStore.error("Redo failed", "Could not redo the change.");
     return false;
 }

frontend/src/lib/api/backendConnectionMonitor.svelte.js

@@ -0,0 +1,137 @@
+/*
+ *    Copyright (c) 2024-2026 SOPTIM AG
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ *
+ */
+
+/**
+ * Backend connection monitor.
+ *
+ * Installs a wrapper around `window.fetch` that detects network-level
+ * failures (TypeError from `fetch`) on requests to the backend and surfaces
+ * them as a single sticky toast. HTTP error responses (4xx / 5xx) are NOT
+ * intercepted — those are application-level errors and remain the
+ * responsibility of the individual call site.
+ *
+ * On the first request that succeeds after an offline period the sticky toast
+ * is dismissed and a short "connection restored" toast is shown.
+ */
+
+import { PUBLIC_BACKEND_URL } from "$lib/config/runtime";
+import { toastStore } from "$lib/eventhandling/toastStore.svelte.js";
+
+/** Reactive connection state — components can read `.isOffline` if needed. */
+export const backendConnection = $state({ isOffline: false });
+
+let offlineToastId = null;
+let installed = false;
+
+/**
+ * Resolve the URL of a `fetch()` first argument to a string we can pattern-match.
+ * `fetch` accepts string | URL | Request, so we have to handle all three.
+ */
+function resolveUrl(input) {
+    if (typeof input === "string") return input;
+    if (input instanceof URL) return input.href;
+    if (typeof Request !== "undefined" && input instanceof Request) {
+        return input.url;
+    }
+    return "";
+}
+
+function isBackendUrl(url) {
+    if (!PUBLIC_BACKEND_URL) return false;
+    return url.startsWith(PUBLIC_BACKEND_URL);
+}
+
+function isNetworkError(error) {
+    if (!error) return false;
+    if (error.name === "AbortError") return false;
+    return error instanceof TypeError;
+}
+
+function markOffline() {
+    backendConnection.isOffline = true;
+    if (offlineToastId !== null) return;
+    offlineToastId = toastStore.error(
+        "Backend unreachable",
+        "Could not reach the backend. Check that the server is running and try again.",
+        { duration: 0 },
+    );
+}
+
+function markOnline() {
+    if (!backendConnection.isOffline) return;
+    backendConnection.isOffline = false;
+    if (offlineToastId !== null) {
+        toastStore.dismiss(offlineToastId);
+        offlineToastId = null;
+    }
+    toastStore.success(
+        "Backend connection restored",
+        "The connection to the backend has been restored.",
+    );
+}
+
+/**
+ * Install the global fetch interceptor. Safe to call multiple times.
+ * Returns an `uninstall` function.
+ */
+export function installBackendFetchInterceptor() {
+    if (typeof window === "undefined") return () => {};
+    if (installed) return () => {};
+    installed = true;
+
+    const originalFetch = window.fetch.bind(window);
+
+    window.fetch = async function interceptedFetch(input, init) {
+        const url = resolveUrl(input);
+        const watched = isBackendUrl(url);
+
+        try {
+            const response = await originalFetch(input, init);
+            if (watched) {
+                markOnline();
+            }
+            return response;
+        } catch (error) {
+            if (watched && isNetworkError(error)) {
+                markOffline();
+            }
+            throw error;
+        }
+    };
+
+    return function uninstall() {
+        if (!installed) return;
+        window.fetch = originalFetch;
+        installed = false;
+    };
+}
+
+/**
+ * Active probe — call this on app start so a cold-start with the backend
+ * already down surfaces the toast before the user clicks anything.
+ */
+export async function probeBackendConnection() {
+    if (!PUBLIC_BACKEND_URL || typeof window === "undefined") return;
+    try {
+        await fetch(`${PUBLIC_BACKEND_URL}/datasets`, {
+            method: "GET",
+            credentials: "include",
+        });
+    } catch {
+        // Ignore errors here; the interceptor will mark offline if it's a network error.
+    }
+}