PR #1380 - gnoviawan/termul

Summary

Preferences was one long scroll of 13 sections, each with a 1/3 title column that left controls about 475px. Lists overflowed (an MCP row with OAuth pushed Delete out of view), similar settings used three different row patterns, and several native selects and sliders had no accessible name.
This PR moves Preferences and Project settings to one page per category with a shared settings row, fixes the accessibility issues a better-interface review found, and adds Undo to deletes that had no confirm and no undo.

Related Issue

No issue exists. Prior and overlapping work:

#373 added the category sidebar and fuzzy search that this PR keeps and changes to paged navigation.
#927 (open) restyles the same Preferences sections as a two-column layout. This PR replaces that layout, so the two conflict; only one should go forward.

Type of Change

feat: new feature
fix: bug fix
docs: documentation only
style: formatting or non-functional styling changes
refactor: internal cleanup with no behavior change
perf: performance improvement
test: adds or updates tests
build: build or dependency changes
ci: CI/CD workflow changes
chore: maintenance or tooling
revert: reverts a previous change

What Changed

Layout (SettingsLayout, SettingsModal): one page at a time, grouped sidebar, pinned page header with Close, search that opens the page, scrolls to the setting and marks it for 2 s. Under md the sidebar becomes a top bar. The active page is in settings-modal-store (openApp(page), openProject(page)).
New parts in components/settings/: SettingsRow, SettingsGroup/SettingsCard, SettingsSelect, SettingsStepper, ColorSwatchGroup (radio group), StatusWord, SettingsNotice, RowMenu, undo-toast.
Preferences: 14 pages in 4 groups (General, Terminal, Agents, App). Behavior splits into Interface, Notifications and Editor; terminal links move to Appearance. On web, Updates stays hidden (#843) and the server version moves to Logs.
Project settings: paged layout, bound labels, swatch radio group, Provider renamed to Accounts, categories moved to pages/project-settings/categories.tsx (file is now 726 lines).
Behavior: deleting an MCP server or a terminal profile acts at once and shows an Undo toast with no timer, with boundary logs for delete and undo. The Claude account chip and limit notice open the Accounts page.
Token: --field-border for text fields and select triggers, solved per theme in applyColorTheme for 3:1 against card, background and popover (default dark: 3.21 / 3.36 / 3.03). --input is unchanged because the Switch track uses it.
Design source: termul-design.pen (as-built and v2 frames), docs/preferences-redesign-handoff.md, and PNG exports in docs/design/preferences-redesign/.

Also in this PR

Update toast (UpdateAvailableToast): long titles and versions wrapped badly and the text was hard to read. The toast now wraps the buttons under the text, breaks long versions, and uses plain text labels with no icons.
Menu motion (index.css, menu-styles.ts, animated-menu-content.tsx): dropdowns, selects and popovers use the motion tokens (--duration-fast and --ease-smooth-out to open, --duration-quick to close). Menus close with a fade only. The press shrink no longer applies to menu triggers, select triggers and switches.
Eyebrow labels (index.css .label-panel / .label-group / .label-section, plus inline labels): every small label now matches the Preferences group heading (12px, medium, muted, sentence case, no tracking). Panel headings, menu and picker groups, command palette groups and the terminal error overlays change with it. Initials, badges and buttons keep their case.
Main card top on macOS (ShellFrame, ShowSidePanelSlot, traffic-light-inset.ts): with the Rail collapsed, the main card no longer moves 36px down. It starts 8px from the top in every state, and its top row pads its start by 24px to clear the traffic lights (the same as the Side panel header).
Collapsed Rail (RailCollapsed, RailFooter): Color themes and Keyboard shortcuts now sit above Settings, as in the expanded footer.
Rail tooltips (RailTooltip in rail-button.tsx): one styled tooltip for every Rail control. Keyboard shortcuts, Add project, New group, Group actions, Project settings and the needs-you pill had only a native title or nothing.
Mark / toggle swap: the 36px slide becomes a token cross-fade (8px, 0.96, 2px blur, 250ms both ways) with an 80ms hover-in delay; hover-out and keyboard focus are instant.
Performance pass (emil-performance review): a Side panel toggle no longer re-renders the whole shell frame (ShellTopRowProvider owns the subscription), and ShortcutRecorder names its transitions instead of transition-all. No other findings: new motion is transform / opacity / 2px blur only, the longest new list is 25 rows, and hidden Preferences pages use display: none with no polling.

How It Was Tested

bun run ci (Biome lint + format + imports, strict mode)
bun run typecheck
bun run test
cargo clippy --all-targets -- -D warnings (in src-tauri)
cargo test (in src-tauri)
Manual verification completed
Not applicable

Notes:

bun run ci: one error, a format diff in src/renderer/stores/editor-store.ts, which this PR does not touch (it is on dev).
bun run test: settings, pages, UI, theme and Claude account suites pass (499 tests). The full run has 15 failing files locally; 14 fail the same way on dev with Node 26 (no global localStorage), and PromptQueuePanel is timing-flaky (8 of 9 runs pass).
Rail, sidebar, shell, SSH, workspace and layout suites pass after the later commits; test files that render Rail parts now wrap them in a TooltipProvider (the app root has one).
No Rust changes. The app was not run, so manual verification and screenshots are still needed.

Screenshots or Recordings

Design frames from termul-design.pen ("Preferences — redesign (v2)"). These are the design, not screenshots of the running app; app screenshots follow after manual verification.

Editor — one page per category, grouped sidebar, row anatomy, dependent setting indented under its switch

Search jump — results show the page path; the target row gets a 2px bar for 2 seconds

MCP servers — status word next to the dot, one row menu for Test / Edit as JSON / Delete

Accounts — usage meter with reset time per account

Keyboard shortcuts — grouped list with filter and keycaps

Narrow modal (300% interface zoom) — sidebar becomes a top bar; MCP rows use three lines

CI & Review Gate

All CI checks pass (PR Validation, Rust Checks, Build Verification, Security Scans)
Code review comments from CodeRabbit / Claude have been addressed or resolved
No unresolved review findings remain

Checklist

My PR title follows the conventional commit format used by this repo
I linked the related issue or explained why none exists
I updated docs when needed
I added or updated tests when needed
I verified the change does not introduce unrelated modifications
I read AGENTS.md and followed the contributor guidelines
A human reviewed the complete diff before submission

This PR is over the 50-file limit in AGENTS.md (98 files, including the design file and six PNGs) (it is one PR by request). It can be split into stacked PRs (token and parts, layout, Preferences pages, Project settings) before review.

Summary by CodeRabbit

New Features
- Preferences and Project settings now use dedicated pages with grouped settings, searchable options, and navigation directly to matching settings.
- Shortcut settings now include conflict warnings, reset actions, and filtering by name or description.
- Deleting servers or terminal profiles now offers an Undo option.
- Account-management actions open the relevant settings page directly.
- Interface zoom and default project color are configurable in Preferences.
Improvements
- Settings, menus, and update notifications have clearer labels and more consistent layouts.
- Form fields have higher-contrast borders, and key sidebar controls now show tooltips.
- Theme and shortcut actions are available in the collapsed sidebar.