polish(v0.6): make "New session" a grid tile instead of a heavy header button

The big solid-amber "+ New session" button clashed with the refined segmented
control. Replace it with a dashed "+" tile that leads the session grid (same
size as the session cards, re-prepended each refresh), so it reads as a natural
"create" cell. Header is now just the title + Sessions/Projects toggle; the
redundant empty-state message is gone (the tile is the CTA).

Frontend-only (launcher.ts + style.css). Verified: web typecheck + build clean,
preview-grid tests green, in-browser the grid leads with the New-session tile
followed by the session cards (Open/Kill).
This commit is contained in:
Yaojia Wang
2026-06-30 14:25:56 +02:00
parent bf5241e87b
commit 59de784c8a
3 changed files with 47 additions and 19 deletions

View File

@@ -711,18 +711,35 @@ body {
display: flex;
gap: 8px;
}
.launcher-new {
background: var(--accent);
color: var(--on-accent);
border: none;
border-radius: 8px;
padding: 9px 16px;
font: inherit;
font-weight: 600;
/* "New session" tile — leads the session grid, matching the session cards. */
.mg-new-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 200px;
background: none;
border: 2px dashed var(--border-strong);
border-radius: 12px;
color: var(--text-dim);
cursor: pointer;
font: inherit;
transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.launcher-new:hover {
background: var(--accent-2);
.mg-new-card:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
}
.mg-new-plus {
font-size: 34px;
font-weight: 300;
line-height: 1;
}
.mg-new-label {
font-size: 14px;
font-weight: 600;
}
/* ── Session Manager page (manage.html) ──────────────────────────── */