feat: add tags/labels for saved items

- Add free-form tags per item: chip display with remove, inline add (comma-separated, grid view only), and a toolbar tag-filter popover listing every tag in use
- Search now also matches tags; tags sync across devices like every other item field
- Fix Firefox manifest.json compliance for AMO submission: replace the placeholder gecko id with a real UUID, add the now-required data_collection_permissions (bookmarksInfo, since synced items are personal browsing/bookmark data), and bump strict_min_version to 140.0 (142.0 for gecko_android) to match
- Add description.md (elevator pitch / short / detailed descriptions for store listings), PRIVACY.md, and .gitignore for the dist/ packaging output
- Reword all em-dash punctuation across docs and code comments per user preference
This commit is contained in:
2026-07-14 12:44:17 +10:00
parent c5bd7e38bf
commit 232524ad97
10 changed files with 446 additions and 49 deletions
+97
View File
@@ -259,6 +259,103 @@ select#sortSelect {
line-height: 1.4;
}
/* --- Tags filter popover --- */
.tags-wrap {
position: relative;
display: inline-block;
}
.tags-panel {
display: block;
position: absolute;
top: calc(100% + 6px);
right: 0;
left: auto;
z-index: 20;
width: 220px;
max-height: 260px;
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 10px;
box-shadow: var(--shadow);
padding: 14px;
}
.tags-panel[hidden] {
display: none;
}
.tags-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* --- Tag chips (shared by cards and the tags-filter popover) --- */
.tag-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
padding: 3px 8px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--clay-deep);
border: none;
font-family: inherit;
cursor: pointer;
}
.tag-chip-label {
cursor: pointer;
}
.tag-chip:hover .tag-chip-label,
.tag-chip-filter:hover {
text-decoration: underline;
}
.tag-remove {
background: none;
border: none;
color: var(--clay-deep);
cursor: pointer;
font-size: 12px;
line-height: 1;
padding: 0;
opacity: 0.7;
}
.tag-remove:hover {
opacity: 1;
}
.card-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 2px;
}
.tag-add-btn {
font-size: 11px;
padding: 3px 8px;
border-radius: 999px;
background: transparent;
border: 1px dashed var(--hairline-strong);
color: var(--muted);
cursor: pointer;
font-family: inherit;
}
.tag-add-btn:hover {
color: var(--ink);
border-color: var(--clay);
}
.tag-input {
font-size: 11px;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid var(--hairline);
background: var(--paper);
color: var(--ink);
font-family: inherit;
width: 120px;
}
/* --- Shelf: grid view (library index cards) --- */
.shelf[data-view="grid"] {
display: grid;