search for standard sites
pub-search.waow.tech
search
zig
blog
atproto
feat: add custom tag input to filter UI
users can now type any tag to filter by, not just popular tags
- small input field after the popular tag chips
- enter key applies the filter
- consistent styling with existing UI
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+37
-6
+37
-6
site/index.html
+37
-6
site/index.html
···
331
331
margin-left: 4px;
332
332
}
333
333
334
+
.tag-input {
335
+
font-size: 11px;
336
+
padding: 3px 8px;
337
+
background: #111;
338
+
border: 1px solid #252525;
339
+
border-radius: 3px;
340
+
color: #888;
341
+
font-family: monospace;
342
+
width: 100px;
343
+
}
344
+
345
+
.tag-input:focus {
346
+
outline: none;
347
+
border-color: #1B7340;
348
+
color: #ccc;
349
+
}
350
+
351
+
.tag-input::placeholder {
352
+
color: #555;
353
+
font-style: italic;
354
+
}
355
+
334
356
.platform-filter {
335
357
margin-bottom: 1rem;
336
358
}
···
829
851
}
830
852
831
853
function renderTags() {
832
-
if (allTags.length === 0) {
833
-
tagsDiv.innerHTML = '';
834
-
return;
835
-
}
836
-
const html = allTags.slice(0, 15).map(t => `
854
+
const tagsHtml = allTags.slice(0, 15).map(t => `
837
855
<span class="tag${currentTag === t.tag ? ' active' : ''}" onclick="setTag('${escapeHtml(t.tag)}')">${escapeHtml(t.tag)}<span class="count">${t.count}</span></span>
838
856
`).join('');
839
-
tagsDiv.innerHTML = `<div class="tags-label">filter by tag:</div><div class="tags-list">${html}</div>`;
857
+
const inputHtml = `<input type="text" class="tag-input" id="tag-input" placeholder="enter tag..." value="${currentTag && !allTags.some(t => t.tag === currentTag) ? escapeHtml(currentTag) : ''}">`;
858
+
tagsDiv.innerHTML = `<div class="tags-label">filter by tag:</div><div class="tags-list">${tagsHtml}${inputHtml}</div>`;
859
+
860
+
// bind enter key handler
861
+
const tagInput = document.getElementById('tag-input');
862
+
tagInput.addEventListener('keydown', e => {
863
+
if (e.key === 'Enter') {
864
+
e.preventDefault();
865
+
const val = tagInput.value.trim();
866
+
if (val) {
867
+
setTag(val);
868
+
}
869
+
}
870
+
});
840
871
}
841
872
842
873
async function loadTags() {