feat: notifications link to relevant pages when available.

website/src/routes/notifications/+page.svelte

@@ -16,6 +16,7 @@
 	import { formatTimeAgo, formatValue } from '$lib/utils';
 	import { goto } from '$app/navigation';
 	import { toast } from 'svelte-sonner';
+	import NotificationItem from './NotificationItem.svelte';
 
 	let loading = $state(true);
 	let newNotificationIds = $state<number[]>([]);
@@ -132,13 +133,7 @@
 						{#each $NOTIFICATIONS as notification, index (notification.id)}
 							{@const IconComponent = getNotificationIcon(notification.type)}
 							{@const isNewNotification = newNotificationIds.includes(notification.id)}
-							<button
-								class={getNotificationColorClasses(
-									notification.type,
-									isNewNotification,
-									notification.isRead
-								)}
-							>
+							<NotificationItem {notification} isNew={isNewNotification}>
 								<div
 									class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full {getNotificationIconColorClasses(
 										notification.type
@@ -146,7 +141,6 @@
 								>
 									<IconComponent class="h-4 w-4" />
 								</div>
-
 								<div class="min-w-0 flex-1">
 									<div class="mb-1 flex items-center gap-2">
 										<h3 class="truncate text-sm font-medium">{notification.title}</h3>
@@ -188,7 +182,7 @@
 										{formatTimeAgo(notification.createdAt)}
 									</p>
 								</div>
-							</button>
+							</NotificationItem>
 
 							{#if index < $NOTIFICATIONS.length - 1}
 								<Separator />

website/src/routes/notifications/NotificationItem.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    export let notification;
+    export let isNew = false;
+
+    function getNotificationColorClasses(type: string, isNew: boolean, isRead: boolean) {
+        const base =
+            'hover:bg-muted/50 flex items-center w-full items-start gap-4 rounded-md p-3 text-left transition-all duration-200';
+
+        if (isNew) {
+            return `${base} bg-primary/10`;
+        }
+
+        if (!isRead) {
+            const colors = {
+                HOPIUM: 'bg-blue-50/50 dark:bg-blue-950/10',
+                TRANSFER: 'bg-green-50/50 dark:bg-green-950/10',
+                RUG_PULL: 'bg-red-50/50 dark:bg-red-950/10',
+                SYSTEM: 'bg-purple-50/50 dark:bg-purple-950/10'
+            };
+            return `${base} ${colors[type as keyof typeof colors] || 'bg-muted/20'}`;
+        }
+
+        return base;
+    }
+</script>
+
+{#if notification.link}
+  <a
+    href={notification.link}
+    class={getNotificationColorClasses(notification.type, isNew, notification.isRead)}
+  >
+    <slot />
+  </a>
+{:else}
+  <div
+    class={getNotificationColorClasses(notification.type, isNew, notification.isRead)}
+  >
+    <slot />
+  </div>
+{/if}