feat: notifications link to relevant pages when available.

website/src/routes/api/coin/[coinSymbol]/trade/+server.ts

@@ -354,6 +354,7 @@ export async function POST({ params, request }) {
                                 'RUG_PULL',
                                 'Coin rugpulled!',
                                 `A coin you owned, ${coinData.name} (*${normalizedSymbol}), crashed ${Math.abs(priceImpact).toFixed(1)}%!`,
+                                `/coin/${normalizedSymbol}`
                             );
                         }
                     }

website/src/routes/api/notifications/+server.ts

@@ -25,6 +25,7 @@ export const GET: RequestHandler = async ({ url, request }) => {
             type: notifications.type,
             title: notifications.title,
             message: notifications.message,
+            link: notifications.link,
             isRead: notifications.isRead,
             createdAt: notifications.createdAt,
         })

website/src/routes/api/prestige/+server.ts

@@ -93,7 +93,7 @@ export const POST: RequestHandler = async ({ request, locals }) => {
             userId: userId,
             type: 'SYSTEM',
             title: `${prestigeName} Achieved!`,
-            message: `Congratulations! You have successfully reached ${prestigeName}. Your portfolio has been reset, daily reward cooldown has been cleared, and you can now start fresh with your new prestige badge and enhanced daily rewards.`,
+            message: `Congratulations! You have successfully reached ${prestigeName}. Your portfolio has been reset, daily reward cooldown has been cleared, and you can now start fresh with your new prestige badge and enhanced daily rewards.`
         });
 
         return json({

website/src/routes/api/transfer/+server.ts

@@ -131,6 +131,7 @@ export const POST: RequestHandler = async ({ request }) => {
                         'TRANSFER',
                         'Money received!',
                         `You received ${formatValue(amount)} from @${senderData.username}`,
+                        `/user/${senderData.id}`
                     );
                 })();
 
@@ -264,6 +265,7 @@ export const POST: RequestHandler = async ({ request }) => {
                         'TRANSFER',
                         'Coins received!',
                         `You received ${amount.toFixed(6)} *${coinData.symbol} from @${senderData.username}`,
+                        `/coin/${normalizedSymbol}`
                     );
                 })();
 

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}