Skip to main content
← All notes
Building

The notes page filters with a sentence, not a toolbar

softwareaccessibility

The notes page does not have a filter bar with dropdowns and labels and a reset button. It has a sentence. Check out everything in all topics. The words everything and all topics are select elements styled to look like inline text. They use the same font size as the surrounding prose, a bottom border in the accent colour, a transparent background, and bold weight. When you tap one, a native dropdown opens with the options — thoughts, updates, building notes, tips for the type filter, and software, accessibility, audio for the topic filter. The sentence reads differently depending on your selection. Check out tips in accessibility. Check out updates in all topics. The language adapts naturally because the option labels are written as words that fit the grammar — everything, thoughts, updates, building notes, tips. Not Everything, Not All Types. Lowercase plural nouns that slot into a sentence. The select styling removes the default browser appearance with a negative webkit-appearance and a custom appearance-none class. The options themselves are styled with the site dark background and white text so the dropdown matches the page instead of rendering as a jarring system-native white box. The result count at the bottom updates live — 12 of 117 notes — giving immediate feedback on how many entries match. If nothing matches, a centred message replaces the list. The component does not debounce. It does not animate. It filters the array on every state change and React renders the new list. With a hundred-plus notes the filter is instantaneous because there is no network request — the entire notes array lives in memory as a static import. Two selects, one sentence, zero toolbars.

Comments coming soon

Sign in with TikTok to leave a comment. Coming soon.