Add tag cloud with popular filters above search input

New features:
- Tag cloud displays 8 most popular languages and 6 most popular categories
- Tags have variable font sizes based on frequency (larger = more common)
- Tags are clickable and trigger the same filtering as table row tags
- Positioned above search input for easy discovery
- Styled with hover effects and responsive layout
- Shows both language and category tags mixed together

The tag cloud helps users quickly discover popular filters without
needing to scroll through the entire table.
This commit is contained in:
Wilson Freitas
2026-03-28 13:03:32 -03:00
parent fc78df9bcb
commit dc54c140e2
3 changed files with 128 additions and 0 deletions
+30
View File
@@ -363,6 +363,36 @@ button {
pointer-events: none;
}
/* ===== Tag Cloud ===== */
.tag-cloud {
padding: 1rem 0 0.5rem 0;
margin-bottom: 1rem;
}
.tag-cloud-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink-tertiary);
margin-bottom: 0.5rem;
}
.tag-cloud-items {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.tag-cloud-item {
transition: transform var(--transition), opacity var(--transition);
}
.tag-cloud-item:hover {
transform: scale(1.08);
}
.filter-controls select {
padding: 0.625rem 2rem 0.625rem 0.875rem;
font-family: var(--font);