css: F5 C — unify tag-filter chips onto .tag-chip
The sources tag bar used .tag-chip while the bookmarks tag bar used
.btn .btn-sm .tag-filter-btn for the same interactive filter-chip concept.
Migrated the bookmark filter chips to .tag-chip (both already render on
<button>), dropped .tag-filter-btn. Both tag bars are now consistent pill
chips. The "+ Add" action stays a .btn. Visual change to the bookmark tag
bar (button -> pill); needs an eyeball. 55 JS tests pass; lint clean.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2 files changed,
+7 insertions,
-14 deletions
| 885 |
885 |
|
}
|
| 886 |
886 |
|
|
| 887 |
887 |
|
/* === 13. Tag ===========================================================
|
| 888 |
|
- |
Canonical: .tag — generic chip used in detail panel.
|
| 889 |
|
- |
Charter target (F5): add [data-color] variants; collapse .tag-chip,
|
| 890 |
|
- |
.tag-filter-btn, .source-tag-chip, .bookmark-tag onto this primitive.
|
|
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].
|
| 891 |
893 |
|
========================================================================== */
|
| 892 |
894 |
|
.tag {
|
| 893 |
895 |
|
background-color: var(--surface-sunken);
|
| 2115 |
2117 |
|
overflow-x: auto;
|
| 2116 |
2118 |
|
flex-shrink: 0;
|
| 2117 |
2119 |
|
}
|
| 2118 |
|
- |
.tag-filter-btn {
|
| 2119 |
|
- |
white-space: nowrap;
|
| 2120 |
|
- |
font-size: 0.75rem;
|
| 2121 |
|
- |
}
|
| 2122 |
|
- |
.tag-filter-btn.active {
|
| 2123 |
|
- |
background: var(--action);
|
| 2124 |
|
- |
color: white;
|
| 2125 |
|
- |
border-color: var(--action);
|
| 2126 |
|
- |
}
|
| 2127 |
2120 |
|
/* Bookmark Open/more actions use renderRow's .row-actions (hover-revealed);
|
| 2128 |
2121 |
|
pinned state uses .row--article.is-pinned. */
|
| 2129 |
2122 |
|
.bookmark-tags {
|
| 162 |
162 |
|
|
| 163 |
163 |
|
// "All" button
|
| 164 |
164 |
|
const allBtn = document.createElement('button');
|
| 165 |
|
- |
allBtn.className = 'btn btn-sm tag-filter-btn' + (!currentTag ? ' active' : '');
|
|
165 |
+ |
allBtn.className = 'tag-chip' + (!currentTag ? ' active' : '');
|
| 166 |
166 |
|
allBtn.textContent = 'All';
|
| 167 |
167 |
|
allBtn.onclick = () => load(null);
|
| 168 |
168 |
|
bar.appendChild(allBtn);
|
| 169 |
169 |
|
|
| 170 |
170 |
|
for (const tag of tags) {
|
| 171 |
171 |
|
const btn = document.createElement('button');
|
| 172 |
|
- |
btn.className = 'btn btn-sm tag-filter-btn' + (currentTag === tag ? ' active' : '');
|
|
172 |
+ |
btn.className = 'tag-chip' + (currentTag === tag ? ' active' : '');
|
| 173 |
173 |
|
btn.textContent = tag;
|
| 174 |
174 |
|
btn.onclick = () => load(tag);
|
| 175 |
175 |
|
bar.appendChild(btn);
|