From b69098d4ddce159b3ea2c3a35f63e826c55ab026 Mon Sep 17 00:00:00 2001
From: xarmian <xarmian@gmail.com>
Date: Sat, 28 Mar 2026 16:14:35 -0400
Subject: [PATCH] fix: make notification items clickable and keep panel open on
 navigate (#16)

Change notification rows with links from <button> with goto() to <a>
tags with href, enabling SvelteKit client-side navigation. Remove the
onclose() call so the notification panel stays open after clicking an
item. Add text-decoration/color overrides so <a> tags match the
existing visual style.

Fixes BUG-9.
---
 web/src/lib/components/common/NotificationPanel.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/common/NotificationPanel.svelte b/web/src/lib/components/common/NotificationPanel.svelte
index 06af20b7..f272c7e6 100644
--- a/web/src/lib/components/common/NotificationPanel.svelte
+++ b/web/src/lib/components/common/NotificationPanel.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { fly, fade } from 'svelte/transition';
-	import { goto } from '$app/navigation';
 	import { toastStore } from '$lib/stores/toast.svelte';
 	import type { HistoryEntry } from '$lib/stores/toast.svelte';
 
@@ -62,11 +61,11 @@
 			{:else}
 				{#each toastStore.history as entry (entry.id)}
 					{#if entry.link}
-						<button class="notification-row clickable" onclick={() => { onclose(); goto(entry.link!); }}>
+						<a href={entry.link} class="notification-row clickable" onclick={(e: MouseEvent) => { e.stopPropagation(); }}>
 							<span class="notification-dot" style="background: {dotColor(entry.type)}"></span>
 							<span class="notification-message">{entry.message}</span>
 							<span class="notification-time">{formatRelativeTime(entry.timestamp)}</span>
-						</button>
+						</a>
 					{:else}
 						<div class="notification-row">
 							<span class="notification-dot" style="background: {dotColor(entry.type)}"></span>
@@ -188,9 +187,12 @@
 	.notification-row.clickable {
 		cursor: pointer;
 		transition: background 0.15s;
+		text-decoration: none;
+		color: inherit;
 	}
 	.notification-row.clickable:hover {
 		background: var(--bg-hover);
+		text-decoration: none;
 	}
 
 	.notification-dot {