feat: add live status indicator and flood bulletin link to dashboard

Introduced a new live status dot indicator for time-sensitive links in the dashboard, enhancing user awareness. Added a temporary button linking to the Rasuwa–Bhotekoshi flood bulletin, providing users with critical updates and emergency contacts. Updated CSS for the new indicator and localized the new strings in English and Nepali.

Author: adarshaacharya

.gitignore

@@ -66,3 +66,6 @@ apps/desktop/src-tauri/gen/
 # they are the design backlog.
 .impeccable/config.local.json
 .impeccable/hook.cache.json
+
+
+.sajilo-dev-*

apps/desktop/src/features/calendar/dashboard.tsx

@@ -6,6 +6,7 @@ import { MonthGrid } from "../../shared/components/month-grid";
 import { SkeletonBlock } from "../../shared/components/skeleton";
 import { StateBanner } from "../../shared/components/state-banner";
 import { useSettings } from "../../shared/context/settings-context";
+import { openExternalLink } from "../../shared/lib/external-link";
 import {
   api,
   type CalendarMonth,
@@ -67,6 +68,10 @@ const GREG_MONTHS = [
   "Dec",
 ];
 
+// Temporary public-safety link for the Rasuwa–Bhotekoshi flood response.
+// Remove this once the live bulletin is no longer needed on Today.
+const RASUWA_FLOOD_BULLETIN_URL = "https://nirajbhusal.github.io/rasuwa-flood-bulletin/";
+
 function relativeText(
   daysAway: number,
   t: (key: "relative.today" | "relative.tomorrow" | "relative.in-days") => string,
@@ -173,6 +178,29 @@ export function Dashboard() {
     <div className="space-y-2.5">
       <DateHeader today={today} />
 
+      <button
+        type="button"
+        onClick={() => openExternalLink(RASUWA_FLOOD_BULLETIN_URL)}
+        aria-label={t("dashboard.flood-aria-label")}
+        className="surface-card flex w-full items-center gap-2 px-2.5 py-2 text-left transition-colors hover:bg-surface-hover active:scale-[0.99]"
+      >
+        <span className="live-status-dot ml-0.5 shrink-0" aria-hidden />
+        <span className="min-w-0 flex-1">
+          <span className="block truncate text-[12px] font-medium">
+            {t("dashboard.flood-title")}
+          </span>
+          <span className="block truncate text-[10px] text-text-muted">
+            {t("dashboard.flood-detail")}
+          </span>
+        </span>
+        <span className="flex shrink-0 items-center gap-0.5 text-[11px] font-medium text-[color:var(--color-accent-mark)]">
+          {t("dashboard.flood-action")}
+          <span className="text-[8px] font-normal leading-none opacity-55" aria-hidden>
+            ↗
+          </span>
+        </span>
+      </button>
+
       {modules.clocksEnabled && modules.clocks.length > 0 && (
         <ClockRow timeZones={modules.clocks} />
       )}

apps/desktop/src/i18n/en.json

@@ -59,6 +59,10 @@
   "bazar.wholesale-note": "Wholesale rates at Kalimati. Shop prices are usually higher.",
   "bazar.worth": "Worth",
   "dashboard.high": "H",
+  "dashboard.flood-action": "Live bulletin",
+  "dashboard.flood-aria-label": "Open Rasuwa–Bhotekoshi flood bulletin in browser",
+  "dashboard.flood-detail": "Latest updates & emergency contacts",
+  "dashboard.flood-title": "Rasuwa–Bhotekoshi flood",
   "dashboard.low": "L",
   "dashboard.nepse": "NEPSE index",
   "dashboard.nepse-no-change": "Unchanged today",

apps/desktop/src/i18n/ne.json

@@ -59,6 +59,10 @@
   "bazar.wholesale-note": "कालीमाटीको थोक मूल्य। पसलको मूल्य प्रायः बढी हुन्छ।",
   "bazar.worth": "मूल्य",
   "dashboard.high": "अधिकतम",
+  "dashboard.flood-action": "लाइभ बुलेटिन",
+  "dashboard.flood-aria-label": "रसुवा–भोटेकोशी बाढी बुलेटिन ब्राउजरमा खोल्नुहोस्",
+  "dashboard.flood-detail": "ताजा अपडेट र आपतकालीन सम्पर्क",
+  "dashboard.flood-title": "रसुवा–भोटेकोशी बाढी",
   "dashboard.low": "न्यूनतम",
   "dashboard.nepse": "नेप्से सूचकाङ्क",
   "dashboard.nepse-no-change": "आज परिवर्तन छैन",

apps/desktop/src/index.css

@@ -222,6 +222,45 @@ html {
     border-color 0.15s ease;
 }
 
+/* A quiet broadcast indicator for time-sensitive links. The ring breathes
+   instead of flashing so it reads as current without turning the whole row
+   into an alarm. */
+.live-status-dot {
+  position: relative;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--color-negative);
+}
+
+.live-status-dot::after {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  border: 1px solid var(--color-negative);
+  border-radius: inherit;
+  animation: live-status-breathe 2.2s ease-out infinite;
+}
+
+@keyframes live-status-breathe {
+  0% {
+    opacity: 0.65;
+    transform: scale(0.55);
+  }
+  75%,
+  100% {
+    opacity: 0;
+    transform: scale(1.35);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .live-status-dot::after {
+    animation: none;
+    opacity: 0.35;
+  }
+}
+
 /* macOS NSTextField-style inputs. */
 .control-field {
   background: var(--color-control-bg);