feat(website): mirror index layout on category pages

Add search input, filter chips, no-results block, and back-to-top
button to category/group/subcategory pages. Pass filter_urls_json to
all page types so tag-chip navigation works site-wide. Fix JS so
filter-clear and no-results-clear redirect to / on non-index pages
instead of trying to filter a non-existent local table. Remove the
now-redundant .category-results CSS overrides.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Vinta Chen
2026-05-03 08:26:37 +08:00
parent 033694204c
commit d64b47b910
5 changed files with 80 additions and 30 deletions

View File

@@ -341,6 +341,10 @@ tags.forEach(function (tag) {
if (filterClear) {
filterClear.addEventListener("click", function () {
if (!isIndexPage()) {
window.location.href = "/";
return;
}
activeFilter = null;
applyFilters();
});
@@ -349,6 +353,10 @@ if (filterClear) {
const noResultsClear = document.querySelector(".no-results-clear");
if (noResultsClear) {
noResultsClear.addEventListener("click", function () {
if (!isIndexPage()) {
window.location.href = "/";
return;
}
if (searchInput) searchInput.value = "";
activeFilter = null;
applyFilters();
@@ -451,10 +459,8 @@ if (backToTop) {
) {
activeSort = { col: sort, order: order };
}
if (isIndexPage()) {
const matched = urlToFilter[location.pathname];
if (matched) activeFilter = matched;
}
const matched = urlToFilter[location.pathname];
if (matched) activeFilter = matched;
if (q || activeFilter || sort) {
sortRows();
}

View File

@@ -430,7 +430,7 @@ kbd {
.tag:focus-visible,
.back-to-top:focus-visible,
.no-results-clear:focus-visible,
.category-table a:focus-visible,
.table a:focus-visible,
.footer a:focus-visible,
.sort-btn:focus-visible {
outline: 2px solid var(--accent);
@@ -498,19 +498,6 @@ kbd {
text-decoration-color: oklch(100% 0 0 / 0.7);
}
.category-results {
padding-top: clamp(2.5rem, 5vw, 3.75rem);
}
.category-results .results-intro {
grid-template-columns: 1fr;
gap: 0.6rem;
}
.category-results .results-intro .results-note {
justify-self: start;
}
.sponsor-band {
padding-block: clamp(2.5rem, 5.5vw, 4rem);
background: