From 772c57fd8544d6f420033ae3ecd9babd1b124b6e Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sat, 2 May 2026 10:13:15 +0200
Subject: [PATCH] feat(hub): add notification badge slot on tiles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reserves a top-right corner badge on each chakra tile, hidden when
the module has no unread items. The Module interface gains an
optional \`unread?: number\`; tiles render a 18×18 red pill with the
count (capped at "99+") in the top-right when unread > 0.

No data source yet — this is a placeholder slot. Wires to the
per-standalone notification feeds defined in #32: each standalone
will publish its unread count, hub aggregates and projects into the
modules array. Until then every tile renders without a badge.

Picked a red pill over the theme's primary because red is the
universal "unread" signal across iOS / Slack / Discord / Gmail.
Ring-1 ring-background gives a subtle halo against any tile shade.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/pages/Hub.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/pages/Hub.vue b/src/pages/Hub.vue
index 75943c6..4cdbc8b 100644
--- a/src/pages/Hub.vue
+++ b/src/pages/Hub.vue
@@ -31,6 +31,8 @@ interface Module {
   glow: string
   envKey?: string
   status?: string
+  /** Unread count for the corner badge. Wire to real data via #32. */
+  unread?: number
 }
 
 // Lower (root/red) → upper (crown/violet)
@@ -113,6 +115,15 @@ function notImplemented() {
             <p class="text-sm font-semibold text-foreground drop-shadow">{{ m.label }}</p>
             <p v-if="m.status" class="text-[9px] font-light text-muted-foreground">{{ m.status }}</p>
           </div>
+
+          <!-- Notification badge — wired to data once #32 lands. Hidden when unread is falsy/0. -->
+          <span
+            v-if="m.unread"
+            class="absolute top-1.5 right-1.5 min-w-[18px] h-[18px] px-1 rounded-full bg-red-500 text-white text-[10px] font-semibold flex items-center justify-center shadow ring-1 ring-background/60"
+            :aria-label="`${m.unread} unread`"
+          >
+            {{ m.unread > 99 ? '99+' : m.unread }}
+          </span>
         </component>
       </div>
     </div>