Settings

Usage

Sectioned settings

Overview

Tuff's settings center: every change saves on its own, so the header shows a save status instead of a Save button.

• A change shows Saving… in the header, then Saved · just now once 600 ms pass without another change.
• The summon shortcut is recordable: a combination must include ⌘, ⌃, or ⌥; Esc or clicking away cancels.
• The Shortcuts page filters and toggles each shortcut; the API key on AI models is masked (a sample value).
• Reset, clearing clipboard history, and signing out of other devices all confirm first.
• It plays once in view and stops at any interaction; reduced motion shows the final state and turns off the tab animation.
• Wide (≥ 960px) adds the live preview; narrow (< 640px) moves the navigation to the top and puts each control under its label.

Customization

• For real storage, replace the timer in watch(settings) with a debounced write; on failure, set the status to Not saved and offer a retry.
• Give a new section's TxTabItem a stable English name and put the label in the #name slot, so a language switch keeps the current section.
• TxTabs unmounts panels you leave: keep values out of the row components, and hold your own copy of an avatar's object URL.
• Keep TxGroupBlock at collapsible=false (its gsap-driven expand has no reduced-motion fallback), and leave out memoryName, which writes to localStorage.
• Put sensitive fields in a group's body, not a 56px row; TxFlatSelect opens in place without teleporting, so keep it clear of clipping scroll containers.

Related components