fix(twenty-front): new layout fast-follows — settings drawer, loading & command menu #21389

PR
PR description

Second batch of new-layout fast-follows (master: twentyhq/core-team-issues#2478). All changes verified live against a running workspace.

Settings drawer & header

  • twentyhq/core-team-issues#2489 — sidebar icons render as plain 16px icons, no background tiles.
  • twentyhq/core-team-issues#2488 — Advanced toggle spans the full drawer width; yellow dot removed.
  • twentyhq/core-team-issues#2497 — page title stays centered in the settings header (breadcrumb stays left).
  • twentyhq/core-team-issues#2490 — Exit Settings control aligned to the workspace switcher (24px, matching padding/gap).
  • twentyhq/core-team-issues#2499 — 2px vertical gap restored between collapsible drawer section items.
  • twentyhq/core-team-issues#2491 — settings drawer rhythm now matches the main app (28px items, 2px gaps, 28px section headers).
  • twentyhq/core-team-issues#2492 — Home/Chat tab switch no longer flickers: both tab subtrees stay mounted (a shared NavigationDrawerTabbedContent toggles visibility instead of remounting + flashing the chat skeleton).

Loading states

  • twentyhq/core-team-issues#2486 — metadata loading shows an empty body (no dense skeleton rows).
  • twentyhq/core-team-issues#2487 — settings table keeps its layout while loading, with the shimmer localized to the first row's first cell.

Command menu & navigation

  • twentyhq/core-team-issues#2501 — navigation section header height matches the nav item rhythm (28px).
  • twentyhq/core-team-issues#2502 (part 1) — the page side-panel toggle stays as the dots glyph while the command menu is open, instead of morphing into a second close control.

New-field flow

  • twentyhq/core-team-issues#2494 — the new-field stepper moved from a breadcrumb dropdown into a centered secondary wizard bar (back chevron + Save on the configure step); breadcrumb stays clean and the object label is the centered title.

Descoped (substantive bugs already fixed)

  • twentyhq/core-team-issues#2500 — command-menu highlight right gutter: the menu-item base measures full-width, so it's likely a scrollbar gutter on the list, not the shared component. Left for a focused follow-up.
  • twentyhq/core-team-issues#2502 part 2 — moving the command-menu close from left to right is cosmetic (the duplicate-control bug is fixed by part 1) and would touch the shared SidePanelTopBar used by search/AI panels.

Verification

typecheck (tsgo) + oxlint + oxfmt green for all changed files; each change DOM-measured / screenshotted in the running app.

CUT
cutter bot commented just now

🎬 Cutter preview — PR #21389

/settings/workspace
/settings/workspace — Settings drawer groups navigation by User, Workspace and Other with an Advanced toggle pinned at the bottom.
/settings/data-model/users/fields/new/select
/settings/data-model/users/fields/new/select — New field creation shows a dedicated wizard step bar marking the current step.
/settings/event-logs
/settings/event-logs — Logs tab in workspace settings with filters for event, members, and date range.
Navigate new field creation steps
Navigate new field creation steps — New field creation gets a wizard step bar with back, current step, and Save action.