From bf67e0ba94bc391f1d55b5581f27e5f9e89e6433 Mon Sep 17 00:00:00 2001
From: thelinuxguy-ssh <mr.linux.0@protonmail.com>
Date: Mon, 3 Aug 2026 19:59:07 +0530
Subject: [PATCH] Added Latest Alert badge to header

---
 src/lib/components/Header.svelte | 37 ++++++++++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index cae0ca8..ca5eb6d 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import { theme } from "$lib/stores/theme";
-  import { allAlerts, refreshData, refreshing } from "$lib/stores/sites";
+  import { allAlerts, refreshData, refreshing, selectedSiteId } from "$lib/stores/sites";
   import { page } from "$app/stores";
+  import { goto } from "$app/navigation";
   import { slide } from "svelte/transition";
   import { Satellite, Globe, BookOpen, Bell, Moon, Sun, Monitor, RefreshCw } from "@lucide/svelte";
   import Logo from "$lib/components/ui/logo.svelte";
@@ -13,6 +14,26 @@
     { href: "/methodology", label: "Methodology", icon: BookOpen },
   ];
   let alertCount = $derived($allAlerts.length);
+  let latestAlert = $derived.by(() => {
+    if ($allAlerts.length === 0) return null;
+    const a = $allAlerts.reduce((a, b) => new Date(a.triggeredAt) > new Date(b.triggeredAt) ? a : b);
+    const siteName = a.message.match(/for (.+?)(?:\.|:|\s|$)/)?.[1] ?? "";
+    const severityColor = a.severity === "critical" ? "var(--critical)" : a.severity === "warning" ? "var(--watch)" : "var(--accent)";
+    const shortMsg = a.message.replace(/ for .+/, "").replace(/\.$/, "");
+    return { siteName, severityColor, shortMsg, message: a.message, triggeredAt: a.triggeredAt };
+  });
+
+  function openLatestAlert() {
+    if (!latestAlert) return;
+    const allSites = document.querySelectorAll('[role="option"]');
+    for (const el of allSites) {
+      if (el.textContent?.includes(latestAlert.siteName)) {
+        (el as HTMLElement).click();
+        return;
+      }
+    }
+    goto("/dashboard");
+  }
 
   function cycleTheme() {
     theme.update(t => t === "light" ? "dark" : t === "dark" ? "night-vision" : "light");
@@ -45,6 +66,18 @@
           <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-bold font-mono leading-none" style="background:var(--critical);color:white">{alertCount}</span>
         {/if}
       </a>
+      {#if latestAlert}
+        <button
+          onclick={openLatestAlert}
+          class="hidden xl:flex items-center gap-2 h-7 px-3 text-[11px] border cursor-pointer transition-colors duration-150 hover:bg-elevated"
+          style="border-color:{latestAlert.severityColor}"
+          title="Click to view this site on the dashboard"
+        >
+          <span class="shrink-0 w-2 h-2 rounded-full" style="background:{latestAlert.severityColor}"></span>
+          <span class="font-medium text-text-main truncate max-w-[140px]">{latestAlert.siteName}</span>
+          <span class="text-text-dim truncate max-w-[200px] font-mono">{latestAlert.shortMsg.slice(0, 60)}{latestAlert.shortMsg.length > 60 ? "…" : ""}</span>
+        </button>
+      {/if}
     </nav>
     <div class="flex items-center gap-2 ml-auto">
       <button
@@ -72,7 +105,7 @@
       {#each links as link}
         <a href={link.href} class="flex items-center gap-2 px-3 py-2.5 text-[13px] no-underline hover:no-underline transition-colors {$page.url.pathname === link.href ? 'text-accent bg-accent-glow' : 'text-text-dim hover:text-text-main'}" onclick={() => mobileOpen = false}><link.icon size={14}/>{link.label}</a>
       {/each}
-      <a href="/alerts" class="flex items-center gap-2 px-3 py-2.5 text-[13px] no-underline hover:no-underline transition-colors {$page.url.pathname === '/alerts' ? 'text-accent bg-accent-glow' : 'text-text-dim hover:text-text-main'}" onclick={() => mobileOpen = false}><Bell size={14}/>Alerts{$allAlerts.length > 0 ? ` (${$allAlerts.length})` : ''}</a>
+      <a href="/alerts" class="flex items-center gap-2 px-3 py-2.5 text-[13px] no-underline hover:no-underline transition-colors {$page.url.pathname === '/alerts' ? 'text-accent bg-accent-glow' : 'text-text-dim hover:text-text-main'}" onclick={() => mobileOpen = false}><Bell size={14}/>Alerts{$allAlerts.length > 0 ? ` (${$allAlerts.length})` : ''}{#if latestAlert}<span class="text-[11px] text-text-faint ml-auto">{latestAlert.message.slice(0, 40)}{latestAlert.message.length > 40 ? '…' : ''}</span>{/if}</a>
       <button onclick={() => { cycleTheme(); mobileOpen = false; }} class="flex items-center gap-2 px-3 py-2.5 text-[13px] text-text-dim hover:text-text-main hover:bg-elevated w-full text-left transition-colors">Theme: {$theme === "light" ? "Light" : $theme === "dark" ? "Dark" : "Night Vision"}</button>
     </nav>
   {/if}