perf(layout): the phone nav drawer opens in one render, and its opening frame draws only the rows that fit - #29325

Requested by Steedos · project thread

Fixes #29141

Clause-②: no
Metadata-protocol: none

The two lines are copied from the claim (comment 6574659596, amended in 6575269092).

维护者速读

• 改了什么：手机宽度下 Console 左侧导航抽屉的打开路径（@object-ui/layout 的 NavigationRenderer）。每一行不再各自询问「是不是手机」，而是整棵菜单读一次；手机上不再给每行挂一个本就隐藏的悬浮提示；菜单比屏幕长时，打开那一帧只画屏幕放得下的行，其余行紧接着在抽屉滑入期间补上。
• 为什么改：showcase（50 个入口、8 个分组）在 4 倍 CPU 节流下打开抽屉要 200 到 640 ms，20 次里没有一次低于 200 ms。剖析显示每次打开整棵菜单先按桌面尺寸渲染一遍、再按手机尺寸渲染第二遍，外加每行一个隐藏的 Radix 提示。改后 20 次里 17 次低于 200 ms，中位数 305 降到 116 ms。
• 风险与回滚：抽屉里显示的内容不变（快照 JSON 和截图前后逐像素一致），桌面菜单仍一次画完并保留提示。风险在于手机长菜单的后半段晚一帧出现；没有侧栏 provider 时仍按视口判断一次，与原先一致。回滚即撤销本 PR。
• 先看：ui/packages/layout/src/NavigationRenderer.tsx 的 PhoneFirstFrame 与 firstViewRowCount（首帧行数的计算）、行里的 NavIsMobileContext 读取与 rowTooltip；然后是新测试 NavigationRenderer.phoneDrawerOpen-29141.test.tsx。
• 两分钟验证：pnpm --dir ui exec vitest run packages/layout/src/__tests__/NavigationRenderer.phoneDrawerOpen-29141.test.tsx，预期 5 个用例全部通过。
• 需要你做的：无，席位落地。

What changes

One file of code, ui/packages/layout/src/NavigationRenderer.tsx. No exported signature of @object-ui/layout or @object-ui/app-shell changes, nothing under components/src/ui/** is edited, and no metadata key, server route or request is added.

• One phone answer for the whole menu. Every NavigationItemRenderer called useIsMobile(). That hook returns false on its first render and corrects itself in an effect, and the sheet mounts the menu afresh on every open. So each open rendered the whole tree at desktop size, then every row set state, and the tree rendered and restyled a second time (54 matchMedia calls per open on the showcase). The root now provides one value through a private NavIsMobileContext: the sidebar provider's isMobile when a provider is present (it settled when the shell mounted), else one useIsMobile() for the whole tree, so a NavigationRenderer mounted without a sidebar provider behaves as before.
• No hidden tooltips on a phone. A row's tooltip names it in the collapsed icon rail, and the sidebar primitive draws that tooltip hidden on a phone. A phone row now passes no tooltip, so it mounts no Radix Tooltip. Desktop rows keep theirs.
• The opening frame draws what fits. On a phone, a private PhoneFirstFrame wrapper draws the top-level rows whose rows (a group counts its open children) fit ceil(innerHeight / 44) + 4 in the drawer's first commit. The rest join in a React.startTransition right after it, while the drawer is still sliding in. Rows drawn first are not rendered again. On desktop, or when the menu fits, the whole menu draws at once as before. The favorites section counts toward the first frame.
• groupOpensOnFirstView is factored out of the row's existing open-by-default logic so the root and the row compute the same answer.
• Changeset .changeset/29141-phone-nav-drawer-open.md: @object-ui/layout patch, with the two declaration lines.

Tests

• New ui/packages/layout/src/__tests__/NavigationRenderer.phoneDrawerOpen-29141.test.tsx (5 cases). A settled SidebarProvider at the window's size mounts the tree the way the drawer does. A resolveTargetLabel spy counts row renders, and a React.Profiler records the links in the DOM at each commit.
  • A short phone menu: every row renders once, in one commit, at phone size (min-h-[44px]).
  • A 60-entry phone menu: two commits, the first at least the rows that fit 844 px and fewer than 60, then all 60 in order, each row rendered once.
  • Two groups: Group A fills the opening frame (30 links), Group B joins after it (40), and stays expanded.
  • A 1280 px window: all 60 rows in the first commit, each rendered once, each carrying its tooltip trigger and no phone height.
  • A phone row carries no tooltip trigger.
• The existing UnifiedSidebar and NavigationRenderer tests pass unchanged.
• Ablations (scripts/ablation-replace.mjs, each restored to HEAD's blob, git diff HEAD empty):
  • per-row useIsMobile() put back: 3 of 5 cases red (each row renders twice);
  • deferral removed: 2 red (one commit of 60);
  • phone tooltip kept: 3 red (the row carries a trigger).

Acceptance notes

• Budget met on the showcase: 17 of 20 opens under 200 ms, and each set of 5 has 4 or 5 under 200 ms. The group toggle stays under 90 ms in the page.
• What is left is primitive internals, named and not widened (per the claim amendment): Radix FocusScope's focusFirst forces a style recalc of about 340 elements (34 ms self at 4x CPU), Radix Presence's getAnimationName forces another (17 ms), Collapsible's measurement sets CSS variables, and DismissableLayer sets pointer-events on the body. They all live in components/src/ui/** or Radix, which this card does not touch. The three slow opens out of 20 (219, 254, 368 ms) are the first open of a set, where icon chunks are still being fetched and parsed.
• No change in what the drawer shows: the drawer snapshot JSON (61 rows on the showcase, 11 on CRM: labels, hrefs, icons, badges, open groups, active entry) is identical before and after in every set, and the before and after screenshots are pixel-identical.
• No new request on open: 18 icon chunks on the showcase and 2 on CRM, the same before and after.

Verification

Readings on head 8e64e407, which merges origin/main into the branch; the change set against main is 3 files, +403 / -49 lines, under the 3000-line threshold.

Human Minimum

• 1. Schemas start as Zod; packages/spec holds no runtime logic.
• 2. Every name I added uses the casing for its kind.
• 3. No formatter ran; pnpm lint passes.
• 4. One issue, one branch off an up-to-date main, one pull request.
• 5. A change that publishes carries a changeset, and both declaration lines are filled in here and in the changeset.
• 6. packages/spec touched: its generated artifacts are regenerated and committed. (Not touched.)
• 7. No hand edits to content/docs/references/, packages/*/CHANGELOG.md or content/docs/releases/.
• 8. Title, body and comments are in English. (The 维护者速读 section is Chinese by the dispatch rule.)
• The Before Submitting list in CONTRIBUTING.md is done.

Generated by Claude Code