From e376fd64fc4ff0d62dca4472c11dddd10452abc3 Mon Sep 17 00:00:00 2001
From: nate <nate@forehead-gate.com>
Date: Fri, 10 Apr 2026 02:47:16 +0400
Subject: [PATCH] update: groups

---
 apps/status/src/static/app.css |  7 +------
 apps/status/src/views/page.ejs | 11 ++++++-----
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/apps/status/src/static/app.css b/apps/status/src/static/app.css
index 49c8b18..ba39967 100644
--- a/apps/status/src/static/app.css
+++ b/apps/status/src/static/app.css
@@ -49,12 +49,7 @@ h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; }
 .group-toggle { display: none; }
 .group-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; }
 .group-header:hover { background: rgba(255,255,255,0.02); }
-.group-header-left { display: flex; align-items: center; gap: 0.75rem; }
-.group-chev { color: var(--muted); transition: transform 0.15s; flex-shrink: 0; }
-.group-toggle:checked ~ .group-header .group-chev { transform: rotate(90deg); }
-.group-name { font-weight: 600; }
-.group-header-right { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; color: var(--muted); }
-.group-status { font-weight: 600; }
+.group-toggle:checked ~ .group-header .chev { transform: rotate(90deg); }
 .group-aggregate { padding: 0 1.25rem 1rem; }
 .group-toggle:checked ~ .group-aggregate { display: none; }
 .group-body { display: none; padding: 0 0.75rem 0.75rem; }
diff --git a/apps/status/src/views/page.ejs b/apps/status/src/views/page.ejs
index c167f83..1988458 100644
--- a/apps/status/src/views/page.ejs
+++ b/apps/status/src/views/page.ejs
@@ -230,13 +230,14 @@
         <div class="group-section">
           <input type="checkbox" class="group-toggle" id="g-<%= gi %>">
           <label class="group-header" for="g-<%= gi %>">
-            <div class="group-header-left">
-              <svg class="group-chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
-              <span class="group-name"><%= groupName %></span>
+            <div class="monitor-name">
+              <span class="dot" style="background: <%= groupStatusColor %>;"></span>
+              <span class="name"><%= groupName %></span>
             </div>
-            <div class="group-header-right">
+            <div class="monitor-meta">
+              <span><%= list.length %> monitor<%= list.length === 1 ? '' : 's' %></span>
               <span class="uptime-pct <%= uptimeBand(aggPct) %>"><%= fmtUptime(aggPct) %></span>
-              <span class="group-status" style="color: <%= groupStatusColor %>;"><%= groupStatusLabel %></span>
+              <svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
             </div>
           </label>
           <div class="group-aggregate">