Make the dashboard a grid of projects with their inbox

DashboardView drops the placeholder for a full-width grid of project cards.
Each card links to the project and lists its inbox cards (status_id === null)
under a "New" heading, or "Nothing new." when empty. Cards are fetched per
project (one GET /projects/{id}/cards each) after the project list resolves.

projects store: fetchProjects() now shares one in-flight request between
concurrent callers (the sidebar and the dashboard mount together).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-04 14:02:47 +01:00
co-authored by Claude Sonnet 5
parent cd54b41ab7
commit 8f8ad8593d
6 changed files with 139 additions and 31 deletions
+58 -10
View File
@@ -223,21 +223,69 @@ h1 {
font-size: 0.9rem;
}
.under-construction {
margin-top: 1.5rem;
padding: 2.5rem 1rem;
text-align: center;
border: 1px dashed var(--border);
/* --- dashboard: grid of projects with their inbox ------------------- */
.dashboard__grid {
margin-top: 1rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
gap: 1rem;
align-items: start;
}
.project-card {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
}
.under-construction__icon {
font-size: 2rem;
line-height: 1;
.project-card__title {
font-weight: 600;
font-size: 1.05rem;
color: inherit;
text-decoration: none;
word-break: break-word;
}
.under-construction p {
margin: 0.5rem 0 0;
.project-card__title:hover {
color: var(--accent);
}
.project-card__heading {
margin: 0.3rem 0 0;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
}
.project-card__cards {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.3rem;
max-height: 16rem;
overflow-y: auto;
}
.project-card__cards li {
font-size: 0.9rem;
padding: 0.35rem 0.5rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
}
.project-card__empty {
margin: 0;
font-size: 0.85rem;
}
.badge {