ux: refactor dashboard to shared ui primitives

This commit is contained in:
Marco Allegretti 2026-01-29 20:24:31 +01:00
parent 09efdab83b
commit ee96360354

View file

@ -150,7 +150,7 @@ import { API_BASE as apiBase } from '../lib/api';
const safeEmail = escapeHtml(user.email || '');
container.innerHTML = `
<div class="hero ui-card ui-card-glass">
<div class="hero ui-card ui-card-glass ui-card-pad-md">
<div class="hero-top">
<div>
<h1 class="hero-title">Welcome, ${safeName}!</h1>
@ -238,7 +238,7 @@ import { API_BASE as apiBase } from '../lib/api';
</div>
</details>
<div class="account ui-card">
<div class="account ui-card ui-card-pad-md">
<div class="account-row">
<div>
<div class="account-title">Account</div>
@ -290,9 +290,9 @@ import { API_BASE as apiBase } from '../lib/api';
let safeLink = String(a.link || '#');
if (!safeLink.startsWith('/')) safeLink = '#';
return `
<a href="${safeLink}" class="activity-item">
<a href="${safeLink}" class="list-item">
<span class="ui-pill type-${typeClass}">${type}</span>
<span class="activity-title">${safeTitle}</span>
<span class="item-title">${safeTitle}</span>
</a>
`;
}).join('');
@ -377,7 +377,6 @@ import { API_BASE as apiBase } from '../lib/api';
<style>
.hero {
padding: 1.25rem;
margin-bottom: 1rem;
}
@ -423,10 +422,6 @@ import { API_BASE as apiBase } from '../lib/api';
min-height: 72px;
}
.account {
padding: 1rem 1.1rem;
}
.account-row {
display: flex;
align-items: center;
@ -477,32 +472,9 @@ import { API_BASE as apiBase } from '../lib/api';
gap: 0.35rem;
}
.activity-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--color-border);
text-decoration: none;
color: var(--color-text);
transition: color 140ms ease;
}
.activity-item:last-child {
border-bottom: none;
}
.activity-item:hover .activity-title {
color: var(--color-primary);
}
.type-proposal { background: var(--color-success); color: var(--color-on-primary); }
.type-community { background: var(--color-secondary); color: var(--color-on-primary); }
.activity-title {
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); }