feat(web): cache dashboard aggregations with version invalidation

reaction_board/web/static/style.css

@@ -123,6 +123,16 @@ h1, h2, h3, p { margin: 0; }
   color: var(--muted);
   font-size: 11px;
 }
+.sidebar-topbar {
+  display: none;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+  padding: 0 4px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.nav-items { display: flex; flex-direction: row; width: 100%; height: 100%; }
 
 .preview-banner {
   position: sticky;
@@ -160,6 +170,7 @@ h1, h2, h3, p { margin: 0; }
 }
 .page-head h1 { font-size: 24px; letter-spacing: -0.4px; }
 .page-sub { margin-top: 4px; color: var(--muted); font-size: 12.5px; }
+.page-head h1 .page-sub { margin-top: 0; margin-left: 8px; font-weight: 400; }
 .home-head { align-items: center; }
 .back-link { color: var(--muted); font-size: 13px; }
 .back-link:hover { color: var(--accent); }
@@ -825,17 +836,12 @@ h1, h2, h3, p { margin: 0; }
 }
 
 @media (min-width: 900px) {
-  .topbar {
-    position: fixed;
-    left: var(--nav-width);
-    right: 0;
-    height: 64px;
-    padding: 0 28px;
-  }
-  .preview-banner { top: 64px; margin-left: var(--nav-width); }
+  .mobile-topbar { display: none; }
+  .sidebar-topbar { display: flex; }
+  .preview-banner { top: 0; margin-left: var(--nav-width); }
   .main-shell {
     margin-left: var(--nav-width);
-    padding: 82px 28px 40px;
+    padding: 16px 28px 40px;
   }
   .bottom-nav {
     top: 0;
@@ -845,11 +851,15 @@ h1, h2, h3, p { margin: 0; }
     height: 100vh;
     flex-direction: column;
     justify-content: flex-start;
-    gap: 4px;
-    padding: 82px 12px 20px;
+    gap: 10px;
+    padding: 18px 12px 20px;
     border-top: 0;
     border-right: 1px solid var(--border);
   }
+  .nav-items {
+    flex-direction: column;
+    gap: 4px;
+  }
   .nav-item {
     flex: 0 0 auto;
     flex-direction: row;