Give the gallery two filters, counts and a shareable URL

[singhharsh1708]

Fixes #419.

/templates had one filter axis and a search box. Measured against the listings people actually buy from, Webflow, ThemeForest, Framer and Wix, that is about a third of a listing page, and 87 visitors a month land on it.

Two axes now, both from real data: what the site is for, which is the existing category, and how the background moves, which is the four generated styles with a 7/6/6/3 spread. Tags were the obvious second axis and are not usable: 52 unique values across 22 templates.

Each filter value carries the count it would return, computed with the other axis applied but not its own, so the number answers "what happens if I click this" rather than "what is selected now". A value that would return nothing is disabled rather than left to disappoint.

Sort by catalogue order or A to Z. No "newest", because templates carry no date and inventing one would be a number nobody measured.

The filters live in the URL, so a filtered gallery can be linked, bookmarked or sent to somebody: /templates?for=SaaS&background=gradient&sort=az. The empty state now offers to clear the filters or tell us what was missing, rather than only blaming the search term.

The rules sit in templateFilters.ts as pure functions, tested without rendering.

Verified in a browser on a production build: clicking Launch narrows 22 to 1 and writes ?for=Launch, the background counts fall to match, three background chips disable themselves, Clear filters restores 22, and opening ?for=SaaS&background=gradient&sort=az cold restores both chips, sorts Ledger before OrbitCRM, and shows 2 of 22. At 390 and 1440 the two rows do not overlap, no chip overlaps another or runs off screen, every chip is 36px tall, and nothing scrolls sideways.

Contrast, after a fix: the count beside each chip measured 3.49:1 at the opacity I first gave it, under the 4.5:1 small text minimum, and is now 5.53:1. Legends 7.50:1, active chip 12.92:1. Disabled chips sit at 2.61:1, which 1.4.3 exempts for inactive controls.

Worth recording: the first measurement of the legend read 1.43:1 and was wrong. The probe measured the element's box, which for a full width legend is mostly background. It now measures the glyphs through a Range over the text node. A second probe I wrote to cross-check read the colours through canvas, which cannot parse the lab() colours this theme uses, and silently compared black against black.

tsc and eslint clean, vitest 680 of 680. Reverting the faceted counts or the URL validation each fails its own test. I could not view the screenshots this turn, so the layout claims above come from measured geometry rather than from looking.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
scrollcraft	Ready	Preview	Oct 3, 2026 10:20am UTC