feat: add bookmark filter buttons by content type

- Add BookmarkFilters component with icon-based filter buttons
- Create bookmarkTypeClassifier utility for content type classification
- Filter bookmarks by article, video, note, or web types
- Apply filters across all bookmark lists (private, public, web, sets)
- Style filter buttons to match existing UI design
This commit is contained in:
Gigi
2025-10-15 21:17:27 +02:00
parent a215d0b026
commit ee1365d3ca
4 changed files with 143 additions and 3 deletions

View File

@@ -176,3 +176,42 @@
.read-inline-btn { background: rgb(34 197 94); /* green-500 */ color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; }
.read-inline-btn:hover { background: rgb(22 163 74); /* green-600 */ }
/* Bookmark filters */
.bookmark-filters {
display: flex;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--color-border);
background: var(--color-bg);
}
.bookmark-filters .filter-btn {
background: transparent;
color: var(--color-text-secondary);
border: 1px solid var(--color-border-subtle);
padding: 0.5rem 0.75rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.bookmark-filters .filter-btn:hover {
background: var(--color-bg-elevated);
color: var(--color-text);
border-color: var(--color-border);
}
.bookmark-filters .filter-btn.active {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
.bookmark-filters .filter-btn:active {
transform: translateY(1px);
}