From c199a3161b738cb59d9489efec8595aae46b24ce Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Thu, 29 Jan 2026 21:00:44 +0100
Subject: [PATCH] ux: centralize pill + small state utilities

---
 .../components/ui/DesignSystemStyles.astro    | 78 +++++++++++++++
 .../src/pages/communities/[slug]/index.astro  |  5 -
 .../communities/[slug]/proposals/index.astro  |  5 -
 frontend/src/pages/dashboard.astro            | 96 +++----------------
 frontend/src/pages/notifications.astro        |  5 -
 frontend/src/pages/proposals.astro            |  5 -
 frontend/src/pages/proposals/[id].astro       | 10 +-
 frontend/src/pages/users/[username].astro     |  5 -
 8 files changed, 93 insertions(+), 116 deletions(-)

diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index a470f6b..6c50369 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -231,6 +231,69 @@
     margin-bottom: 1.5rem;
   }
 
+  .ui-hero {
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+  }
+
+  .ui-hero-top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .ui-hero-title {
+    margin: 0;
+    font-size: 2.125rem;
+    letter-spacing: -0.02em;
+  }
+
+  .ui-hero-subtitle {
+    margin: 0.25rem 0 0;
+    color: var(--color-text-muted);
+  }
+
+  .ui-hero-actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .ui-hero-kpis {
+    margin-top: 1rem;
+  }
+
+  .ui-hero-kpis-label {
+    color: var(--color-text-muted);
+    font-size: 0.8125rem;
+    margin-bottom: 0.5rem;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+  }
+
+  .ui-insights {
+    display: grid;
+    gap: 0.75rem;
+  }
+
+  .ui-insights-title {
+    font-weight: 700;
+    letter-spacing: -0.01em;
+  }
+
+  .ui-insights-list {
+    margin: 0;
+    padding-left: 1.1rem;
+    color: var(--color-text-muted);
+    font-size: 0.9375rem;
+    line-height: 1.5;
+    display: grid;
+    gap: 0.35rem;
+  }
+
   :where(.panels, .proposal-panels) {
     display: grid;
     gap: 1rem;
@@ -569,6 +632,21 @@
     white-space: nowrap;
   }
 
+  .loading-small, .empty-small, .error-small {
+    color: var(--color-text-muted);
+    font-size: 0.875rem;
+  }
+
+  .status-draft { background: var(--color-neutral-muted); color: var(--color-on-primary); }
+  .status-discussion { background: var(--color-info); color: var(--color-on-primary); }
+  .status-voting { background: var(--color-success); color: var(--color-on-primary); }
+  .status-closed { background: var(--color-neutral); color: var(--color-on-primary); }
+
+  .type-comment { background: var(--ui-pill-type-comment-bg, var(--color-info)); color: var(--color-on-primary); }
+  .type-vote { background: var(--ui-pill-type-vote-bg, var(--color-success)); color: var(--color-on-primary); }
+  .type-proposal { background: var(--ui-pill-type-proposal-bg, var(--color-secondary)); color: var(--color-on-primary); }
+  .type-community { background: var(--ui-pill-type-community-bg, var(--color-warning)); color: var(--color-on-primary); }
+
   :where(input.ui-input, select.ui-select) {
     width: 100%;
     border-radius: var(--radius-md);
diff --git a/frontend/src/pages/communities/[slug]/index.astro b/frontend/src/pages/communities/[slug]/index.astro
index 7e20a22..6217a1f 100644
--- a/frontend/src/pages/communities/[slug]/index.astro
+++ b/frontend/src/pages/communities/[slug]/index.astro
@@ -570,11 +570,6 @@ const { slug } = Astro.params;
     font-weight: 600;
   }
 
-  .status-draft { background: var(--color-neutral-muted); color: var(--color-on-primary); }
-  .status-discussion { background: var(--color-info); color: var(--color-on-primary); }
-  .status-voting { background: var(--color-success); color: var(--color-on-primary); }
-  .status-closed { background: var(--color-neutral); color: var(--color-on-primary); }
-
   .loading, .error {
     text-align: center;
     padding: 3rem;
diff --git a/frontend/src/pages/communities/[slug]/proposals/index.astro b/frontend/src/pages/communities/[slug]/proposals/index.astro
index 60d58c4..e9c68d4 100644
--- a/frontend/src/pages/communities/[slug]/proposals/index.astro
+++ b/frontend/src/pages/communities/[slug]/proposals/index.astro
@@ -338,11 +338,6 @@ const { slug } = Astro.params;
     margin-bottom: 0.5rem;
   }
 
-  .status-draft { background: var(--color-neutral-muted); color: var(--color-on-primary); }
-  .status-discussion { background: var(--color-info); color: var(--color-on-primary); }
-  .status-voting { background: var(--color-success); color: var(--color-on-primary); }
-  .status-closed { background: var(--color-neutral); color: var(--color-on-primary); }
-
   .description {
     color: var(--color-text-muted);
     font-size: 0.875rem;
diff --git a/frontend/src/pages/dashboard.astro b/frontend/src/pages/dashboard.astro
index b2b64eb..60aff11 100644
--- a/frontend/src/pages/dashboard.astro
+++ b/frontend/src/pages/dashboard.astro
@@ -130,9 +130,9 @@ import { API_BASE as apiBase } from '../lib/api';
     setBadge('badge-insights', bullets.length);
 
     container.innerHTML = `
-      <div class="insights-body">
-        <div class="insights-title">What stands out</div>
-        <ul class="insights-list">
+      <div class="ui-insights">
+        <div class="ui-insights-title">What stands out</div>
+        <ul class="ui-insights-list">
           ${bullets.map((b) => `<li>${escapeHtml(b)}</li>`).join('')}
         </ul>
         <div class="panel-actions">
@@ -150,20 +150,20 @@ import { API_BASE as apiBase } from '../lib/api';
     const safeEmail = escapeHtml(user.email || '');
 
     container.innerHTML = `
-      <div class="hero ui-card ui-card-glass ui-card-pad-md">
-        <div class="hero-top">
+      <div class="ui-hero ui-card ui-card-glass ui-card-pad-md">
+        <div class="ui-hero-top">
           <div>
-            <h1 class="hero-title">Welcome, ${safeName}!</h1>
-            <p class="hero-subtitle">${safeEmail}</p>
+            <h1 class="ui-hero-title">Welcome, ${safeName}!</h1>
+            <p class="ui-hero-subtitle">${safeEmail}</p>
           </div>
-          <div class="hero-actions">
+          <div class="ui-hero-actions">
             <a href="/communities" class="ui-btn ui-btn-secondary">Browse</a>
             <a href="/communities/new" class="ui-btn ui-btn-primary">Create Community</a>
           </div>
         </div>
 
-        <div class="hero-kpis">
-          <div class="hero-kpis-label">At a glance</div>
+        <div class="ui-hero-kpis">
+          <div class="ui-hero-kpis-label">At a glance</div>
           <div class="ui-kpis">
             <div class="ui-kpi">
               <div class="ui-kpi-value" id="kpi-my-communities">—</div>
@@ -376,46 +376,9 @@ import { API_BASE as apiBase } from '../lib/api';
 </script>
 
 <style>
-  .hero {
-    margin-bottom: 1rem;
-  }
-
-  .hero-top {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 1rem;
-    flex-wrap: wrap;
-  }
-
-  .hero-title {
-    margin: 0;
-    font-size: 2.125rem;
-    letter-spacing: -0.02em;
-  }
-
-  .hero-subtitle {
-    margin: 0.25rem 0 0;
-    color: var(--color-text-muted);
-  }
-
-  .hero-actions {
-    display: flex;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-
-  .hero-kpis {
-    margin-top: 1rem;
-  }
-
-  .hero-kpis-label {
-    color: var(--color-text-muted);
-    font-size: 0.8125rem;
-    margin-bottom: 0.5rem;
-    letter-spacing: 0.02em;
-    text-transform: uppercase;
+  .ui-page {
+    --ui-pill-type-proposal-bg: var(--color-success);
+    --ui-pill-type-community-bg: var(--color-secondary);
   }
 
   .panel-content {
@@ -441,42 +404,9 @@ import { API_BASE as apiBase } from '../lib/api';
     margin-top: 0.15rem;
   }
 
-  .loading-small, .empty-small, .error-small {
-    color: var(--color-text-muted);
-    font-size: 0.875rem;
-  }
-
   .browse-link {
     display: block;
     margin-top: 0.5rem;
     font-size: 0.875rem;
   }
-
-  .insights-body {
-    display: grid;
-    gap: 0.75rem;
-  }
-
-  .insights-title {
-    font-weight: 700;
-    letter-spacing: -0.01em;
-  }
-
-  .insights-list {
-    margin: 0;
-    padding-left: 1.1rem;
-    color: var(--color-text-muted);
-    font-size: 0.9375rem;
-    line-height: 1.5;
-    display: grid;
-    gap: 0.35rem;
-  }
-
-  .type-proposal { background: var(--color-success); color: var(--color-on-primary); }
-  .type-community { background: var(--color-secondary); color: var(--color-on-primary); }
-
-  .status-draft { background: var(--color-neutral-muted); color: var(--color-on-primary); }
-  .status-discussion { background: var(--color-info); color: var(--color-on-primary); }
-  .status-voting { background: var(--color-success); color: var(--color-on-primary); }
-  .status-closed { background: var(--color-neutral); color: var(--color-on-primary); }
 </style>
diff --git a/frontend/src/pages/notifications.astro b/frontend/src/pages/notifications.astro
index 7444d40..79fa25e 100644
--- a/frontend/src/pages/notifications.astro
+++ b/frontend/src/pages/notifications.astro
@@ -144,11 +144,6 @@ import { API_BASE as apiBase } from '../lib/api';
     display: inline-block;
   }
 
-  .type-comment { background: var(--color-info); color: var(--color-on-primary); }
-  .type-vote { background: var(--color-success); color: var(--color-on-primary); }
-  .type-proposal { background: var(--color-secondary); color: var(--color-on-primary); }
-  .type-community { background: var(--color-warning); color: var(--color-on-primary); }
-
   .notif-title {
     font-size: 1rem;
     margin-bottom: 0.25rem;
diff --git a/frontend/src/pages/proposals.astro b/frontend/src/pages/proposals.astro
index 0555934..0ec4218 100644
--- a/frontend/src/pages/proposals.astro
+++ b/frontend/src/pages/proposals.astro
@@ -231,11 +231,6 @@ import { API_BASE as apiBase } from '../lib/api';
     margin: 0;
   }
 
-  .status-draft { background: var(--color-neutral-muted); color: var(--color-on-primary); }
-  .status-discussion { background: var(--color-info); color: var(--color-on-primary); }
-  .status-voting { background: var(--color-success); color: var(--color-on-primary); }
-  .status-closed { background: var(--color-neutral); color: var(--color-on-primary); }
-
   .community {
     font-size: 0.75rem;
     color: var(--color-text-muted);
diff --git a/frontend/src/pages/proposals/[id].astro b/frontend/src/pages/proposals/[id].astro
index 63483fa..266431c 100644
--- a/frontend/src/pages/proposals/[id].astro
+++ b/frontend/src/pages/proposals/[id].astro
@@ -696,11 +696,6 @@ const proposalId = id ?? '';
     flex-wrap: wrap;
   }
 
-  .status-draft { background: var(--color-neutral-muted); color: var(--color-on-primary); }
-  .status-discussion { background: var(--color-info); color: var(--color-on-primary); }
-  .status-voting { background: var(--color-success); color: var(--color-on-primary); }
-  .status-closed { background: var(--color-neutral); color: var(--color-on-primary); }
-
   .meta {
     color: var(--color-text-muted);
     font-size: 0.875rem;
@@ -1226,8 +1221,7 @@ const proposalId = id ?? '';
     padding: 2rem;
   }
 
-  .loading-small {
-    color: var(--color-text-muted);
-    font-size: 0.875rem;
+  .card {
+    padding: 2rem;
   }
 </style>
diff --git a/frontend/src/pages/users/[username].astro b/frontend/src/pages/users/[username].astro
index 1d8d922..c9c7f5c 100644
--- a/frontend/src/pages/users/[username].astro
+++ b/frontend/src/pages/users/[username].astro
@@ -274,9 +274,4 @@ const { username } = Astro.params;
     border-radius: 4px;
     color: var(--color-on-primary);
   }
-
-  .loading-small {
-    color: var(--color-text-muted);
-    font-size: 0.875rem;
-  }
 </style>