Recipe Settings Page
A deep dive into the layout, controls, and interaction patterns that make Nimbus settings feel instant and precise.
Layout Philosophy
Settings live in a single-column, scroll-driven view. No tabs, no nested modals. Every control is reachable within one flick. The left third of the viewport is reserved for a sticky section label on desktop; on mobile it collapses into a compact header chip.
Toggle & Slider Patterns
Binary settings use a compact pill toggle with an animated thumb. Continuous values (sensitivity, delay) use a single-thumb slider with a live numeric readout. Both components render natively with Tailwind — zero runtime libraries.
Keybinds & Hotkeys
Keybind rows display the action label on the left and a mono-spaced keycap pill on the right. Clicking the pill enters listen mode — the pill pulses violet until a key is captured or Escape cancels.
Save & Reset Flow
Changes are staged locally. A fixed bottom bar appears once the form is dirty, offering Save and Discard. Save writes to the cloud via a single atomic PUT. A subtle checkmark animation confirms persistence.