The filter is a sentence, not a form
The notes section on the homepage does not have a filter bar. It has a sentence. Check out everything in all topics. The two underlined words are native select elements styled to look like inline text. Pick thoughts from the first dropdown and the sentence reads Check out thoughts in all topics. Pick software from the second and it reads Check out thoughts in software. The selects use appearance-none to strip the browser chrome, a bottom border to hint that they are interactive, and bold pink text to stand out from the surrounding paragraph. The options render with a dark background so they are readable in the dropdown. Because they are real select elements, they work with keyboards, screen readers, and every browser without a single line of JavaScript for accessibility. The filter state is two useState hooks — activeType and activeTag. The filtered array is one chained conditional. The whole thing is seven lines of logic. No filter chips, no toggle buttons, no multi-select popovers. Just a sentence that you edit by choosing words from a dropdown. When more notes match than the homepage can show, a link at the bottom says View all 47 notes and carries the active filters into the URL query string so the notes page opens pre-filtered. One sentence, two selects, zero form labels.
Comments coming soon
Sign in with TikTok to leave a comment. Coming soon.