From 8ca2d0405125bbf573ff74025e158e5352e240d3 Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Thu, 29 Jan 2026 21:40:25 +0100
Subject: [PATCH] ux: add ui-hero primitive

---
 .../components/ui/DesignSystemStyles.astro    | 36 +++++++++++++++++++
 .../src/pages/communities/[slug]/index.astro  | 29 +++------------
 .../pages/communities/[slug]/plugins.astro    | 32 +++--------------
 .../communities/[slug]/proposals/index.astro  | 32 +++--------------
 frontend/src/pages/proposals.astro            | 32 +++--------------
 frontend/src/pages/proposals/[id].astro       | 25 ++-----------
 6 files changed, 55 insertions(+), 131 deletions(-)

diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index dc4cd69..8f0056b 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -503,6 +503,42 @@
     margin: 0;
   }
 
+  .ui-hero {
+    padding: var(--ui-hero-pad, 1.25rem);
+    margin-bottom: var(--ui-hero-mb, 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-title h1 {
+    margin: 0;
+    font-size: inherit;
+    letter-spacing: inherit;
+  }
+
+  .ui-hero-subtitle {
+    margin: 0.25rem 0 0;
+    color: var(--color-text-muted);
+  }
+
+  @media (max-width: 640px) {
+    .ui-hero-title {
+      font-size: 1.75rem;
+    }
+  }
+
   .ui-auth-page {
     display: flex;
     justify-content: center;
diff --git a/frontend/src/pages/communities/[slug]/index.astro b/frontend/src/pages/communities/[slug]/index.astro
index 6217a1f..9114710 100644
--- a/frontend/src/pages/communities/[slug]/index.astro
+++ b/frontend/src/pages/communities/[slug]/index.astro
@@ -50,9 +50,9 @@ const { slug } = Astro.params;
       const communityDesc = community.description ? escapeHtml(community.description) : '';
 
       container.innerHTML = `
-        <div class="community-hero ui-card ui-card-glass">
-          <div class="hero-top">
-            <div class="hero-title">
+        <div class="community-hero ui-hero ui-card ui-card-glass">
+          <div class="ui-hero-top">
+            <div class="ui-hero-title">
               <h1>${communityName}</h1>
               <div class="hero-slug">/${communitySlug}</div>
             </div>
@@ -404,22 +404,7 @@ const { slug } = Astro.params;
 
 <style>
   .community-hero {
-    padding: 1.25rem;
-    margin-bottom: 1.25rem;
-  }
-
-  .hero-top {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 1rem;
-    flex-wrap: wrap;
-  }
-
-  .hero-title h1 {
-    margin: 0;
-    font-size: 2.125rem;
-    letter-spacing: -0.02em;
+    --ui-hero-mb: 1.25rem;
   }
 
   .hero-slug {
@@ -457,12 +442,6 @@ const { slug } = Astro.params;
     text-transform: uppercase;
   }
 
-  @media (max-width: 640px) {
-    .hero-title h1 {
-      font-size: 1.75rem;
-    }
-  }
-
   .edit-modal {
     position: fixed;
     inset: 0;
diff --git a/frontend/src/pages/communities/[slug]/plugins.astro b/frontend/src/pages/communities/[slug]/plugins.astro
index 0626f1f..338f032 100644
--- a/frontend/src/pages/communities/[slug]/plugins.astro
+++ b/frontend/src/pages/communities/[slug]/plugins.astro
@@ -8,11 +8,11 @@ const { slug } = Astro.params;
 <Layout title="Community Plugins">
   <section class="ui-page">
     <div class="ui-container">
-      <div class="hero ui-card ui-card-glass">
-        <div class="hero-top">
+      <div class="ui-hero ui-card ui-card-glass">
+        <div class="ui-hero-top">
           <div>
-            <h1 class="hero-title">Plugins</h1>
-            <p class="hero-subtitle">Manage plugins for this community</p>
+            <h1 class="ui-hero-title">Plugins</h1>
+            <p class="ui-hero-subtitle">Manage plugins for this community</p>
           </div>
           <a class="ui-btn ui-btn-secondary" href={`/communities/${slug}`}>Back</a>
         </div>
@@ -372,30 +372,6 @@ const { slug } = Astro.params;
 </script>
 
 <style>
-  .hero {
-    padding: 1.25rem;
-    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);
-  }
-
   .community-badge {
     padding: 1rem 1.1rem;
     margin-bottom: 1.5rem;
diff --git a/frontend/src/pages/communities/[slug]/proposals/index.astro b/frontend/src/pages/communities/[slug]/proposals/index.astro
index e9c68d4..36bee15 100644
--- a/frontend/src/pages/communities/[slug]/proposals/index.astro
+++ b/frontend/src/pages/communities/[slug]/proposals/index.astro
@@ -8,11 +8,11 @@ const { slug } = Astro.params;
 <Layout title="Proposals">
   <section class="ui-page">
     <div class="ui-container">
-      <div class="hero ui-card ui-card-glass">
-        <div class="hero-top">
+      <div class="ui-hero ui-card ui-card-glass">
+        <div class="ui-hero-top">
           <div>
-            <h1 class="hero-title">Proposals</h1>
-            <p class="hero-subtitle">Proposals and decisions</p>
+            <h1 class="ui-hero-title">Proposals</h1>
+            <p class="ui-hero-subtitle">Proposals and decisions</p>
           </div>
           <a href={`/communities/${slug}/proposals/new`} class="ui-btn ui-btn-primary" id="create-btn" style="display: none;">+ New Proposal</a>
         </div>
@@ -238,30 +238,6 @@ const { slug } = Astro.params;
 </script>
 
 <style>
-  .hero {
-    padding: 1.25rem;
-    margin-bottom: 1rem;
-  }
-
-  .hero-top {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    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-kpis {
     margin-top: 1rem;
   }
diff --git a/frontend/src/pages/proposals.astro b/frontend/src/pages/proposals.astro
index b14e93d..df36fa3 100644
--- a/frontend/src/pages/proposals.astro
+++ b/frontend/src/pages/proposals.astro
@@ -7,11 +7,11 @@ import { API_BASE as apiBase } from '../lib/api';
 <Layout title="All Proposals">
   <section class="ui-page">
     <div class="ui-container">
-      <div class="hero ui-card ui-card-glass">
-        <div class="hero-top">
+      <div class="ui-hero ui-card ui-card-glass">
+        <div class="ui-hero-top">
           <div>
-            <h1 class="hero-title">All Proposals</h1>
-            <p class="hero-subtitle">Browse proposals across all communities</p>
+            <h1 class="ui-hero-title">All Proposals</h1>
+            <p class="ui-hero-subtitle">Browse proposals across all communities</p>
           </div>
         </div>
       </div>
@@ -141,30 +141,6 @@ import { API_BASE as apiBase } from '../lib/api';
 </script>
 
 <style>
-  .hero {
-    padding: 1.25rem;
-    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);
-  }
-
   .toolbar {
     padding: 1rem;
     margin-bottom: 1rem;
diff --git a/frontend/src/pages/proposals/[id].astro b/frontend/src/pages/proposals/[id].astro
index 266431c..9267648 100644
--- a/frontend/src/pages/proposals/[id].astro
+++ b/frontend/src/pages/proposals/[id].astro
@@ -156,9 +156,9 @@ const proposalId = id ?? '';
       const safeMethodLabel = escapeHtml(methodKey.replace('_', ' '));
 
       container.innerHTML = `
-        <div class="proposal-hero ui-card ui-card-glass">
-          <div class="hero-top">
-            <div class="hero-title">
+        <div class="proposal-hero ui-hero ui-card ui-card-glass">
+          <div class="ui-hero-top">
+            <div class="ui-hero-title">
               <h1>${safeTitle}</h1>
               <div class="hero-meta">
                 <span class="ui-pill status-${statusKey}">${escapeHtml(statusKey)}</span>
@@ -663,25 +663,6 @@ const proposalId = id ?? '';
     display: none;
   }
 
-  .proposal-hero {
-    padding: 1.25rem;
-    margin-bottom: 1rem;
-  }
-
-  .hero-top {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 1rem;
-    flex-wrap: wrap;
-  }
-
-  .hero-title h1 {
-    margin: 0;
-    font-size: 2.125rem;
-    letter-spacing: -0.02em;
-  }
-
   .hero-meta {
     display: flex;
     align-items: baseline;