search for standard sites pub-search.waow.tech
search zig blog atproto
11
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: replace active filter box with dismissable filter chips

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

zzstoatzz 677aa9c4 09c0c951

+54 -25
+54 -25
site/index.html
··· 455 455 } 456 456 457 457 458 - .active-filter { 458 + .active-filters { 459 459 display: flex; 460 + flex-wrap: wrap; 460 461 align-items: center; 461 462 gap: 0.5rem; 462 463 margin-bottom: 1rem; 463 - padding: 0.5rem; 464 - background: rgba(27, 115, 64, 0.1); 464 + font-size: 11px; 465 + } 466 + 467 + .active-filters-label { 468 + color: #555; 469 + } 470 + 471 + .filter-chip { 472 + display: inline-flex; 473 + align-items: center; 474 + gap: 4px; 475 + padding: 3px 8px; 476 + border-radius: 3px; 477 + font-size: 11px; 478 + } 479 + 480 + .filter-chip.tag { 481 + background: rgba(27, 115, 64, 0.2); 465 482 border: 1px solid #1B7340; 466 - border-radius: 4px; 467 - font-size: 12px; 483 + color: #2a9d5c; 484 + } 485 + 486 + .filter-chip.platform { 487 + background: rgba(180, 100, 64, 0.2); 488 + border: 1px solid #d4956a; 489 + color: #d4956a; 490 + } 491 + 492 + .filter-chip.date { 493 + background: rgba(14, 165, 233, 0.2); 494 + border: 1px solid #0ea5e9; 495 + color: #38bdf8; 468 496 } 469 497 470 - .active-filter .clear { 471 - margin-left: auto; 472 - color: #666; 498 + .filter-chip .x { 473 499 cursor: pointer; 500 + opacity: 0.6; 501 + margin-left: 2px; 474 502 } 475 503 476 - .active-filter .clear:hover { 504 + .filter-chip .x:hover { 505 + opacity: 1; 477 506 color: #c44; 478 507 } 479 508 ··· 549 578 } 550 579 551 580 /* ensure minimum 44px touch targets */ 552 - .tag, .platform-option, .mode-option, .date-option, .suggestion, input.tag-input { 581 + .tag, .platform-option, .mode-option, .date-option, .suggestion, input.tag-input, .filter-chip { 553 582 min-height: 44px; 554 583 display: inline-flex; 555 584 align-items: center; ··· 627 656 628 657 /* ensure touch targets on tablets too */ 629 658 @media (hover: none) and (pointer: coarse) { 630 - .tag, .platform-option, .mode-option, .date-option, .suggestion, .related-item, input.tag-input { 659 + .tag, .platform-option, .mode-option, .date-option, .suggestion, .related-item, input.tag-input, .filter-chip { 631 660 min-height: 44px; 632 661 display: inline-flex; 633 662 align-items: center; ··· 1174 1203 } 1175 1204 } 1176 1205 1206 + const DATE_PRESET_LABELS = { week: 'last week', month: 'last month', year: 'last year' }; 1207 + 1177 1208 function renderActiveFilter() { 1178 1209 if (!currentTag && !currentPlatform && !currentSince) { 1179 1210 activeFilterDiv.innerHTML = ''; 1180 1211 return; 1181 1212 } 1182 - let parts = []; 1183 - if (currentTag) parts.push(`tag: <strong>#${escapeHtml(currentTag)}</strong>`); 1184 - if (currentPlatform) parts.push(`platform: <strong>${escapeHtml(currentPlatform)}</strong>`); 1185 - if (currentSince) parts.push(`since: <strong>${escapeHtml(currentSince)}</strong>`); 1186 - const clearActions = []; 1187 - if (currentTag) clearActions.push(`<span class="clear" onclick="clearTag()">× tag</span>`); 1188 - if (currentPlatform) clearActions.push(`<span class="clear" onclick="clearPlatform()">× platform</span>`); 1189 - if (currentSince) clearActions.push(`<span class="clear" onclick="setDateFilter(null)">× date</span>`); 1190 - activeFilterDiv.innerHTML = ` 1191 - <div class="active-filter"> 1192 - <span>filtering by ${parts.join(', ')} <span style="color:#666;font-size:10px">(documents only)</span></span> 1193 - ${clearActions.join(' ')} 1194 - </div> 1195 - `; 1213 + let chips = []; 1214 + if (currentTag) { 1215 + chips.push(`<span class="filter-chip tag">#${escapeHtml(currentTag)}<span class="x" onclick="clearTag()">\u00d7</span></span>`); 1216 + } 1217 + if (currentPlatform) { 1218 + chips.push(`<span class="filter-chip platform">${escapeHtml(currentPlatform)}<span class="x" onclick="clearPlatform()">\u00d7</span></span>`); 1219 + } 1220 + if (currentSince) { 1221 + const label = DATE_PRESET_LABELS[currentDatePreset] || currentSince; 1222 + chips.push(`<span class="filter-chip date">${escapeHtml(label)}<span class="x" onclick="setDateFilter(null)">\u00d7</span></span>`); 1223 + } 1224 + activeFilterDiv.innerHTML = `<div class="active-filters"><span class="active-filters-label">active filters:</span>${chips.join('')}</div>`; 1196 1225 } 1197 1226 1198 1227 function renderTags() {