From 079c169f8d882eb709e496c91e9814f452cbdb04 Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Fri, 29 May 2026 08:28:18 -0700
Subject: [PATCH] UI consistency (tabs/cards): add .tab and .card primitives
 (no migration)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add the canonical .tab (bordered rounded-pill filter tab) and .card ("glass"
content card) primitives as the documented design-system standard for new
markup and the React pages — modeled on the cleanest existing looks
(watchlist filter pill; dashboard service/stat card).

Deliberately NOT migrating the existing tab/card components onto them: the
current implementations are visually divergent and JS-coupled (active-state
toggled by class name, cards built in JS), so a blind consolidation risks
subtle regressions. These primitives let new/React code be consistent now;
the legacy components migrate when visually verifiable / in React.

Unused classes -> zero visual change to the current UI.
---
 webui/static/style.css | 45 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/webui/static/style.css b/webui/static/style.css
index 8293d395..0c397652 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -8068,6 +8068,51 @@ body.helper-mode-active #dashboard-activity-feed:hover {
 }
 
 
+/* ── Shared tab / filter-pill primitive ─────────────────────────────
+   Canonical pill tab (the bordered rounded-pill filter look). New markup and
+   the React pages should use `.tab` + `.tab.active`. Existing per-page pill
+   classes (watchlist-filter-btn, discog-filter, adl-pill, …) are deliberately
+   left in place — they're JS-coupled and visually divergent, so they should be
+   migrated only when visually verifiable / in React, not blind. */
+.tab {
+    padding: 6px 16px;
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.05);
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 13px;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+.tab:hover:not(.active) { color: rgba(255, 255, 255, 0.8); }
+.tab.active {
+    color: #fff;
+    border-color: rgba(var(--accent-rgb), 0.5);
+    background: rgba(var(--accent-rgb), 0.15);
+}
+
+/* ── Shared card primitive ──────────────────────────────────────────
+   Canonical "glass" content card (the dashboard service/stat card look). New
+   markup and the React pages should use `.card`. Existing per-feature card
+   classes are left in place; migrate when visually verifiable / in React. */
+.card {
+    padding: 20px 22px;
+    border-radius: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: rgba(18, 18, 22, 0.9);
+    backdrop-filter: blur(12px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
+    transition: all 0.2s ease;
+}
+.card:hover {
+    transform: translateY(-2px);
+    border-color: rgba(var(--accent-rgb), 0.3);
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+
+
 /* ── Shared page shell ──────────────────────────────────────────────
    The canonical page card (the dashboard / stats look). Adopted by the
    dashboard, tools, watchlist and wishlist pages — and intended for reuse