From 887a66a81ffa8b444ac376430229a1be08600252 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 26 Sep 2026 03:48:10 +0000 Subject: [PATCH] Give the repositories page a more polished layout Mark each repository card clean or needs-attention and show that as a colored top edge, add a hover lift, tinted initials tiles, pill-shaped detail chips, accent hover states on the card actions, an accent Workspace button, a gold filled favorite star, and focus rings on the search box and filters. Widen the list layout's action column so the buttons no longer wrap. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01BUhabxL4SPejg19jgbSyYN --- src/app.js | 2 +- src/styles.css | 24 ++++++++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/app.js b/src/app.js index febf34d..b01f234 100644 --- a/src/app.js +++ b/src/app.js @@ -76,7 +76,7 @@ function renderRepositoryGrid() { features.decorateRepositories(); return; } - target.innerHTML = repos.map((repo) => `
${badgeMarkup(repo)}

${escapeHtml(repo.name)}

${escapeHtml(repo.path)}
⌘ ${escapeHtml(repo.branch || "detached")}${escapeHtml(repo.last_commit || "No commits yet")}
${repo.remote_url ? `` : ""}
`).join(""); + target.innerHTML = repos.map((repo) => `
${badgeMarkup(repo)}

${escapeHtml(repo.name)}

${escapeHtml(repo.path)}
⌘ ${escapeHtml(repo.branch || "detached")}${escapeHtml(repo.last_commit || "No commits yet")}
${repo.remote_url ? `` : ""}
`).join(""); target.querySelectorAll("[data-open]").forEach((button) => button.addEventListener("click", async () => { button.disabled = true; try { await openRepository(button.dataset.path, button.dataset.open); } diff --git a/src/styles.css b/src/styles.css index b1f9532..587f00f 100644 --- a/src/styles.css +++ b/src/styles.css @@ -429,3 +429,27 @@ button:disabled { cursor:default; } :root[data-theme="light"] #dashboard-view .stat-icon.violet { color:#6542bd; } :root[data-theme="light"] #dashboard-view .stat-icon.green { color:#196e48; } :root[data-theme="light"] #dashboard-view .stat-icon.amber, :root[data-theme="light"] #dashboard-view .attention-mark { color:var(--warning); } + +/* Repositories page polish */ +#repositories-view { --repo-tint: rgba(99,230,255,.12); --repo-tint: color-mix(in srgb, var(--cyan) 14%, transparent); --repo-tint-soft: rgba(99,230,255,.05); --repo-tint-soft: color-mix(in srgb, var(--cyan) 6%, transparent); } +#repositories-view .toolbar { align-items:center; } +#repositories-view .search-box, #repositories-view .toolbar select { transition:border-color .15s ease, box-shadow .15s ease; } +#repositories-view .search-box:focus-within, #repositories-view .toolbar select:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px var(--repo-tint); } +#repositories-view .repo-summary { padding-inline:2px; } +#repositories-view .repo-card { position:relative; overflow:hidden; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; } +#repositories-view .repo-card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg, var(--positive), transparent 70%); opacity:.55; } +#repositories-view .repo-card.needs-attention::before { background:linear-gradient(90deg, var(--warning), transparent 70%); opacity:.8; } +#repositories-view .repo-card:hover, #repositories-view .repo-card:focus-within { transform:translateY(-2px); border-color:var(--repo-tint); box-shadow:0 10px 28px rgba(0,0,0,.18); } +#repositories-view .repo-glyph { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(145deg, var(--repo-tint), var(--repo-tint-soft)); font-weight:800; } +#repositories-view .repo-card h3 { display:flex; align-items:center; gap:6px; } +#repositories-view .favorite-button { transition:color .15s ease, transform .15s ease; } +#repositories-view .favorite-button[aria-pressed="true"] { color:var(--amber); } +:root[data-theme="light"] #repositories-view .favorite-button[aria-pressed="true"] { color:var(--warning); } +#repositories-view .favorite-button:hover { color:var(--cyan); transform:scale(1.15); } +#repositories-view .detail-chip { border-radius:999px; padding-inline:10px; } +#repositories-view .repo-card-actions button, #repositories-view .repo-extra-actions button { border-radius:8px; transition:border-color .15s ease, background .15s ease, color .15s ease; } +#repositories-view .repo-card-actions button:hover, #repositories-view .repo-card-actions button:focus-visible, #repositories-view .repo-extra-actions button:hover, #repositories-view .repo-extra-actions button:focus-visible { border-color:var(--cyan); background:var(--repo-tint-soft); color:var(--cyan); } +#repositories-view .repo-extra-actions [data-details] { border-color:var(--repo-tint); color:var(--cyan); } +@media (prefers-reduced-motion: reduce) { #repositories-view .repo-card:hover, #repositories-view .repo-card:focus-within { transform:none; } } +:root[data-layout="list"] #repositories-view .repo-card-head .repo-glyph { display:none; } +:root[data-layout="list"] #repositories-view .repo-card { grid-template-columns:minmax(140px,1fr) minmax(180px,1fr) 280px; }