Skip to main content

max / balanced_breakfast

css: F5 C — fold source tags and popover buttons onto primitives Sweep 3 (display tags): .source-tag-chip -> .tag.tag--xs[data-color="muted"]; added the .tag--xs size modifier (mirrors .badge--xs). .bookmark-tag already composes on .tag, left as-is. Sweep 5 (popover buttons): .hp-action / .hp-action-danger -> .btn .btn-sm / .btn-danger; the popover row keeps equal-width fill via `.hp-actions .btn`. Also removes a stray #fff literal that lived on .hp-action-danger:hover. Left legitimately-specific classes alone: .source-count (functional count pill) and .toast-action (border uses currentColor to match toast type color; a fixed .btn border would regress it). Visual change on source-row tags and the health popover; needs an eyeball. 55 JS tests pass; lint clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Author: Max Johnson <me@maxj.phd> · 2026-07-12 19:08 UTC
Commit: d2c00aad526eec4037cfaa5b4dd58173daad0b51
Parent: 29bc755
2 files changed, +17 insertions, -32 deletions
M src-tauri/frontend/css/styles.css +11 -27
@@ -886,10 +886,10 @@ body {
886 886
887 887 /* === 13. Tag ===========================================================
888 888 Canonical: .tag[data-color] — display chip (detail panel, source/bookmark
889 - tags). .tag-chip is the separate interactive filter-chip (tag bars): it
890 - toggles (cursor + .active), unlike a display tag.
891 - Charter target (F5): collapse .source-tag-chip / .bookmark-tag onto
892 - .tag[data-color].
889 + tags). Size modifier .tag--xs. .tag-chip is the separate interactive
890 + filter-chip (tag bars): it toggles (cursor + .active), unlike a display tag.
891 + Source tags use .tag.tag--xs[data-color="muted"]; .bookmark-tag composes on
892 + .tag with a click-to-filter modifier.
893 893 ========================================================================== */
894 894 .tag {
895 895 background-color: var(--surface-sunken);
@@ -910,6 +910,7 @@ body {
910 910 .tag[data-color="cyan"], .badge[data-color="cyan"] { border-color: var(--category-six); color: var(--category-six); background-color: color-mix(in srgb, var(--category-six) 10%, transparent); }
911 911 .tag[data-color="purple"], .badge[data-color="purple"] { border-color: var(--category-five); color: var(--category-five); background-color: color-mix(in srgb, var(--category-five) 10%, transparent); }
912 912 .tag[data-color="muted"], .badge[data-color="muted"] { border-color: var(--border); color: var(--content-muted); background-color: var(--surface-sunken); }
913 + .tag--xs { font-size: 0.6rem; padding: 0 0.35rem; } /* mirrors .badge--xs */
913 914
914 915 /* .badge — smaller and more compact than .tag; used for counts and inline
915 916 status indicators. Same color contract via [data-color]. */
@@ -1478,14 +1479,7 @@ body {
1478 1479 gap: 0.2rem;
1479 1480 margin-top: 0.15rem;
1480 1481 }
1481 - .source-tag-chip {
1482 - background-color: var(--surface-page);
1483 - border: var(--border-width) solid var(--border);
1484 - border-radius: 8px;
1485 - padding: 0 0.35rem;
1486 - font-size: 0.6rem;
1487 - color: var(--content-muted);
1488 - }
1482 + /* Source-row tags use .tag.tag--xs[data-color="muted"] (see § Tag). */
1489 1483
1490 1484 /* === 15. Health indicator ==============================================
1491 1485 STATE-BY-COLOR-ONLY VIOLATION (F3): pair color with shape (--broken
@@ -1539,8 +1533,8 @@ body {
1539 1533 }
1540 1534
1541 1535 /* === 19. Health popover ================================================
1542 - Floating panel from gear icon. Charter target (F5): .hp-action
1543 - migrates onto .btn; .hp-row uses filter-bar primitive.
1536 + Floating panel from gear icon. Actions use the .btn family (.hp-actions .btn
1537 + fills the row). .hp-row is a bespoke label/value line (kept).
1544 1538 ========================================================================== */
1545 1539 .health-popover {
1546 1540 position: fixed;
@@ -1595,19 +1589,9 @@ body {
1595 1589 padding-top: 0.5rem;
1596 1590 border-top: var(--border-width) solid var(--border);
1597 1591 }
1598 - .hp-action {
1599 - flex: 1;
1600 - background: none;
1601 - border: var(--border-width) solid var(--border);
1602 - border-radius: var(--radius-sm);
1603 - padding: 0.3rem 0.5rem;
1604 - font-size: 0.75rem;
1605 - color: var(--content);
1606 - cursor: pointer;
1607 - }
1608 - .hp-action:hover { background-color: var(--surface-sunken); }
1609 - .hp-action-danger { color: var(--danger); border-color: var(--danger); }
1610 - .hp-action-danger:hover { background-color: var(--danger); color: #fff; }
1592 + /* Popover actions are the .btn family (Mark Read / Edit / Tags / Delete);
1593 + they fill the row equally. */
1594 + .hp-actions .btn { flex: 1; }
1611 1595
1612 1596
1613 1597 /* === 29. Sync settings utilities ======================================= */
M src-tauri/frontend/js/sources.js +6 -5
@@ -77,7 +77,8 @@
77 77 wrap.className = 'source-tags';
78 78 tags.forEach(t => {
79 79 const chip = document.createElement('span');
80 - chip.className = 'source-tag-chip';
80 + chip.className = 'tag tag--xs';
81 + chip.setAttribute('data-color', 'muted');
81 82 chip.textContent = t;
82 83 wrap.appendChild(chip);
83 84 });
@@ -306,10 +307,10 @@
306 307
307 308 // Action buttons
308 309 const actions = `<div class="hp-actions">
309 - <button class="hp-action" data-action="mark-read">Mark All Read</button>
310 - <button class="hp-action" data-action="edit">Edit Feed</button>
311 - <button class="hp-action" data-action="tags">Edit Tags</button>
312 - <button class="hp-action hp-action-danger" data-action="delete">Delete</button>
310 + <button class="btn btn-sm" data-action="mark-read">Mark All Read</button>
311 + <button class="btn btn-sm" data-action="edit">Edit Feed</button>
312 + <button class="btn btn-sm" data-action="tags">Edit Tags</button>
313 + <button class="btn btn-sm btn-danger" data-action="delete">Delete</button>
313 314 </div>`;
314 315
315 316 pop.innerHTML = `<div class="hp-title">${escapeHtml(source.name)}</div>${rows}${actions}`;