From c7791611a599b3152d3cb3cd3af67cd3518b84c6 Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Thu, 29 Jan 2026 16:41:42 +0100
Subject: [PATCH] ui: centralize ui-pill primitive

---
 .../components/ui/DesignSystemStyles.astro    | 14 +++++++++++
 frontend/src/pages/dashboard.astro            | 23 ++++---------------
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index 61b31cc..9e9acd8 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -345,6 +345,20 @@
     font-weight: var(--ui-font-weight-bold);
   }
 
+  .ui-pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.125rem 0.5rem;
+    border-radius: 999px;
+    font-size: 0.625rem;
+    font-weight: var(--ui-font-weight-semibold);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    line-height: 1.2;
+    white-space: nowrap;
+  }
+
   :where(input.ui-input, select.ui-select) {
     width: 100%;
     border-radius: var(--radius-md);
diff --git a/frontend/src/pages/dashboard.astro b/frontend/src/pages/dashboard.astro
index a1f34d0..07e6f87 100644
--- a/frontend/src/pages/dashboard.astro
+++ b/frontend/src/pages/dashboard.astro
@@ -189,7 +189,7 @@ import { API_BASE as apiBase } from '../lib/api';
         if (!safeLink.startsWith('/')) safeLink = '#';
         return `
           <a href="${safeLink}" class="activity-item">
-            <span class="activity-type type-${typeClass}">${type}</span>
+            <span class="ui-pill type-${typeClass}">${type}</span>
             <span class="activity-title">${safeTitle}</span>
           </a>
         `;
@@ -218,12 +218,13 @@ import { API_BASE as apiBase } from '../lib/api';
       }
 
       container.innerHTML = proposals.slice(0, 7).map((p) => {
-        const safeTitle = escapeHtml(p.title);
+        const safeTitle = escapeHtml(p.title || 'Untitled');
         const status = normalizeStatus(p.status);
+
         return `
           <a href="/proposals/${encodeURIComponent(String(p.id))}" class="list-item">
             <span class="item-title">${safeTitle}</span>
-            <span class="item-status status-${status}">${escapeHtml(status)}</span>
+            <span class="ui-pill status-${status}">${escapeHtml(status)}</span>
           </a>
         `;
       }).join('');
@@ -422,14 +423,6 @@ import { API_BASE as apiBase } from '../lib/api';
     color: var(--color-primary);
   }
 
-  .activity-type {
-    font-size: 0.625rem;
-    padding: 0.125rem 0.5rem;
-    border-radius: 4px;
-    text-transform: uppercase;
-    font-weight: 600;
-  }
-
   .type-proposal { background: var(--color-success); color: var(--color-on-primary); }
   .type-community { background: var(--color-secondary); color: var(--color-on-primary); }
 
@@ -441,14 +434,6 @@ import { API_BASE as apiBase } from '../lib/api';
     flex: 1;
   }
 
-  .item-status {
-    font-size: 0.625rem;
-    padding: 0.125rem 0.5rem;
-    border-radius: 4px;
-    text-transform: uppercase;
-    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); }