eric/bggpipe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Review UI polish: done-card layout, clickable photo names, favicon

Browse Source 
The token-day command no longer wraps mid-command inside the sentence —
the waiting note gets a readable measure and the command sits on its
own non-wrapping line. Catalog photo names link to the photo (dotted
underline, brass on hover), rows highlight on hover, and an inline-SVG
die favicon stops the console 404.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Eric Wagoner
2026-08-01 16:49:57 -04:00
parent 6da499d31a
commit 123e7b41a9
1 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/bggpipe/templates/review.html
+23 -8
View File
@@ -4,6 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bggpipe review</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎲</text></svg>">
<style>
:root {
--felt: #2c4136;
@@ -165,16 +166,28 @@
font-family: ui-monospace, "SF Mono", Menlo, monospace;
background: var(--felt); color: var(--paper);
padding: .3rem .8rem; border-radius: 6px;
display: inline-block; white-space: nowrap;
}
.done .waiting { color: var(--brass-deep); font-weight: 600; }
.done .waiting {
color: var(--brass-deep);
max-width: 34rem; margin: 1rem auto .2rem; line-height: 1.5;
}
.done .next { margin: .8rem 0 .2rem; }
/* catalog: read-only status ledger, quieter than decision cards */
.catalog { background: var(--paper); border-radius: 8px; padding: .4rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.catalog table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.catalog td { padding: .3rem .5rem; border-top: 1px solid var(--paper-edge); vertical-align: top; }
.catalog td { padding: .38rem .5rem; border-top: 1px solid var(--paper-edge); vertical-align: top; }
.catalog tr:first-child td { border-top: none; }
.catalog .t { font-weight: 600; }
.catalog tr:hover td { background: #f0ebdd; }
.catalog .t { font-weight: 600; max-width: 22rem; }
.catalog .meta { color: var(--ink-soft); }
.catalog a {
color: inherit;
text-decoration: underline dotted;
text-underline-offset: 2px;
}
.catalog a:hover { color: var(--brass-deep); }
.chip {
font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
border-radius: 999px; padding: .1rem .55rem; white-space: nowrap;
@@ -346,10 +359,10 @@ function render() {
<div>${s.summary.rejected}<span>rejected</span></div>
</div>
${waiting
? `<p class="waiting">${waiting} title(s) extracted but not yet matched to BGG —
they're waiting on the API token. When it arrives:
<code>uv run bggpipe resolve</code>, then review the new arrivals here.</p>`
: `<p>Next: <code>uv run bggpipe diff</code></p>`}
? `<p class="waiting">${waiting} titles are extracted but not yet matched
to BGG — they're waiting on the API token.</p>
<p class="next">When it arrives: <code>uv run bggpipe resolve</code></p>`
: `<p class="next">Next: <code>uv run bggpipe diff</code></p>`}
${s.unidentified.length ? `<p class="status">${s.unidentified.length} reshoot ticket(s) below — they don't block anything.</p>` : ""}
</div>`;
}
@@ -379,7 +392,9 @@ function render() {
<td>${chip(c)}</td>
<td class="meta">${c.bgg_name ? esc(c.bgg_name) + (c.bgg_id ? " · " + esc(c.bgg_id) : "") : ""}
${c.version_name ? " · " + esc(c.version_name) : ""}</td>
<td class="meta">${esc(c.photos.join(", "))}</td>
<td class="meta">${c.photos.map(p =>
`<a href="/photos/${encodeURIComponent(p)}" target="_blank">${esc(p)}</a>`
).join(", ")}</td>
</tr>`).join("") + `</table></div>`;
}
m.innerHTML = html;