ui: centralize panel primitives

frontend/src/components/ui/DesignSystemStyles.astro

@@ -200,6 +200,71 @@
     margin-bottom: 1.5rem;
   }
 
+  :where(.panels, .proposal-panels) {
+    display: grid;
+    gap: 1rem;
+  }
+
+  .panel {
+    padding: 0;
+    overflow: hidden;
+  }
+
+  :where(.panel > summary, .panel-summary) {
+    list-style: none;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    user-select: none;
+  }
+
+  .panel > summary {
+    padding: 1rem 1.25rem;
+    align-items: baseline;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .panel > summary.panel-summary {
+    padding: 1rem 1.1rem;
+    align-items: center;
+    border-bottom: none;
+  }
+
+  :where(.panel > summary, .panel-summary)::-webkit-details-marker {
+    display: none;
+  }
+
+  .panel[open] > summary {
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .panel-title {
+    font-weight: 700;
+    letter-spacing: -0.01em;
+  }
+
+  .panel-meta {
+    color: var(--color-text-muted);
+    font-size: 0.875rem;
+  }
+
+  .panel-hint {
+    color: var(--color-text-muted);
+    font-size: 0.8125rem;
+  }
+
+  .panel-body {
+    border-top: 1px solid var(--color-border);
+    padding: 1rem 1.1rem 1.1rem;
+  }
+
+  .panel-actions {
+    margin-top: 0.75rem;
+    display: flex;
+    justify-content: flex-end;
+  }
+
   .ui-page-title h1 {
     font-size: 2rem;
     font-weight: 700;
@@ -423,5 +488,14 @@
     .ui-actions {
       justify-content: flex-start;
     }
+
+    :where(.panel > summary, .panel-summary) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .panel-actions {
+      justify-content: flex-start;
+    }
   }
 </style>

frontend/src/pages/communities/[slug]/index.astro

@@ -457,62 +457,10 @@ const { slug } = Astro.params;
     text-transform: uppercase;
   }
 
-  .panels {
-    display: grid;
-    gap: 1rem;
-  }
-
-  .panel {
-    overflow: hidden;
-  }
-
-  .panel summary {
-    cursor: pointer;
-    list-style: none;
-    padding: 1rem 1.25rem;
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 1rem;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .panel summary::-webkit-details-marker {
-    display: none;
-  }
-
-  .panel[open] summary {
-    background: rgba(255, 255, 255, 0.03);
-  }
-
-  .panel-hint {
-    color: var(--color-text-muted);
-    font-size: 0.8125rem;
-  }
-
-  .panel-body {
-    padding: 1rem 1.25rem 1.25rem;
-  }
-
-  .panel-actions {
-    margin-top: 0.75rem;
-    display: flex;
-    justify-content: flex-end;
-  }
-
   @media (max-width: 640px) {
     .hero-title h1 {
       font-size: 1.75rem;
     }
-
-    .panel summary {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-
-    .panel-actions {
-      justify-content: flex-start;
-    }
   }
 
   .edit-modal {

frontend/src/pages/dashboard.astro

@@ -311,41 +311,6 @@ import { API_BASE as apiBase } from '../lib/api';
     text-transform: uppercase;
   }
 
-  .panels {
-    display: grid;
-    gap: 1rem;
-  }
-
-  .panel {
-    padding: 0;
-    overflow: hidden;
-  }
-
-  .panel-summary {
-    list-style: none;
-    cursor: pointer;
-    padding: 1rem 1.1rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    user-select: none;
-  }
-
-  .panel-summary::-webkit-details-marker {
-    display: none;
-  }
-
-  .panel-title {
-    font-weight: 700;
-    letter-spacing: -0.01em;
-  }
-
-  .panel-body {
-    border-top: 1px solid var(--color-border);
-    padding: 0.9rem 1.1rem 1.1rem;
-  }
-
   .panel-content {
     min-height: 72px;
   }

frontend/src/pages/delegations.astro

@@ -400,41 +400,6 @@ import DelegationGraph from '../components/voting/DelegationGraph.astro';
     color: var(--color-text-muted);
   }
 
-  .panel {
-    padding: 0;
-    overflow: hidden;
-  }
-
-  .panel-summary {
-    list-style: none;
-    cursor: pointer;
-    padding: 1rem 1.1rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    user-select: none;
-  }
-
-  .panel-summary::-webkit-details-marker {
-    display: none;
-  }
-
-  .panel-title {
-    font-weight: 700;
-    letter-spacing: -0.01em;
-  }
-
-  .panel-meta {
-    color: var(--color-text-muted);
-    font-size: 0.875rem;
-  }
-
-  .panel-body {
-    border-top: 1px solid var(--color-border);
-    padding: 1rem 1.1rem 1.1rem;
-  }
-
   @media (max-width: 640px) {
     .delegate-card {
       flex-direction: column;

frontend/src/pages/proposals/[id].astro

@@ -4,6 +4,7 @@ import Layout from '../../layouts/Layout.astro';
 import { API_BASE as apiBase } from '../../lib/api';
 import VotingResultsChart from '../../components/voting/VotingResultsChart.astro';
 const { id } = Astro.params;
+const proposalId = id ?? '';
 ---
 
 <Layout title="Proposal">
@@ -13,13 +14,13 @@ const { id } = Astro.params;
         <div class="state-card ui-card"><p class="loading">Loading proposal…</p></div>
       </div>
       <div id="results-chart-host" class="results-chart-host" aria-hidden="true">
-        <VotingResultsChart proposalId={id} apiBase={apiBase} />
+        <VotingResultsChart proposalId={proposalId} apiBase={apiBase} />
       </div>
     </div>
   </section>
 </Layout>
 
-<script define:vars={{ id, apiBase }}>
+<script define:vars={{ id: proposalId, apiBase }}>
   const token = localStorage.getItem('token');
   let currentProposal = null;
   let selectedOptions = new Set();
@@ -604,43 +605,6 @@ const { id } = Astro.params;
     margin-top: 0.5rem;
   }
 
-  .proposal-panels {
-    display: grid;
-    gap: 1rem;
-  }
-
-  .panel {
-    overflow: hidden;
-  }
-
-  .panel summary {
-    cursor: pointer;
-    list-style: none;
-    padding: 1rem 1.25rem;
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 1rem;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .panel summary::-webkit-details-marker {
-    display: none;
-  }
-
-  .panel[open] summary {
-    background: rgba(255, 255, 255, 0.03);
-  }
-
-  .panel-hint {
-    color: var(--color-text-muted);
-    font-size: 0.8125rem;
-  }
-
-  .panel-body {
-    padding: 1rem 1.25rem 1.25rem;
-  }
-
   .author-actions-row {
     display: flex;
     gap: 0.5rem;