feat(plugin-list): a phone list offers Sort in the Display panel and a search that expands in place - #29054

Requested by Steedos · project thread

Fixes #28911

Clause-②: no
Metadata-protocol: none

维护者速读

• 改了什么：手机（390 px）列表现在可以排序和搜索。排序放进已有的「显示」面板（工具栏不加按钮）；列表搜索是一个放大镜图标，点开后就地展开成输入框。两者沿用桌面端同一组 userActions 开关，桌面端外观不变。
• 为什么改：此前手机端隐藏了排序和列表搜索，代码注释让用户「换到桌面端」；维护者已裁定两者都在手机端提供（「Phone list: offer sort and the list search at 390 px — today both are hidden and the code tells the reader to switch to desktop #28911 和 List views: readers can hide and show columns by default — flip the userActions.hideFields default, so a generated app has the control without having to declare it #28912 都保留，按卡上写的做。」）。
• 风险与回滚：低。只动 plugin-list 的工具栏与「显示」面板；排序面板是把原有排序弹层的内容抽成一份、两处共用，写入路径与桌面端完全相同。「显示」面板在手机端改为屏宽（与筛选、排序弹层一致）。回滚即 revert 本 PR。
• 先看：① ui/packages/plugin-list/src/ListView.tsx 的 displayOffered / sortInDisplay / sortPanelBody 与「Search, phone form」一段；② ui/packages/plugin-list/src/components/ViewSettingsPopover.tsx 新增的 sort 插槽；③ 新测试 ListView.phoneSortSearch-28911.test.tsx。
• 两分钟验证：pnpm dev:crm 后用 390 px 打开 客户 列表：工具栏是 筛选 · 显示 · 搜索；点放大镜输入 glo 只剩 Globex Ltd；打开「显示」顶部是「Sort Records」，加一条排序后卡片顺序随之改变。
• 需要你做的：无，席位落地。

What changes

Below the sm breakpoint the list toolbar drew Filter and Display only. Sort and the list's own search were hidden sm:inline-flex, with comments sending the reader to desktop or calling a list search redundant beside the global search. Both comments are gone.

• Sort rides in the Display panel below sm. The Sort popover's content is now one element, sortPanelBody, drawn by the toolbar's Sort popover and by a new sort slot of ViewSettingsPopover. The slot is sm:hidden, so from sm up the panel draws nothing new and Sort stays the bar's button. Both write through the same setCurrentSort + emitSortChange door. It does not count in the Display badge, which counts display settings only.
• Where there is no Display panel, Sort stays on the bar at every width: sortInDisplay = toolbarFlags.showSort && displayOffered, and the bar's Sort trigger hides below sm only when sortInDisplay holds. displayOffered is the Display panel's existing condition, lifted out of the JSX unchanged. So compactToolbar: false gets the Sort button on the phone bar, and the toolbar gains no new control in either form.
• Search, phone form. A sm:hidden icon button at the bar's touch size (h-7 min-w-7, the same as Filter and Display) expands in place into a field. The field is 16px text, so iOS Safari does not zoom on focus. Enter or Escape folds it back to the icon, which then carries the active keyword as the desktop trigger does. The clear button empties the term and folds it, and blurring an empty field folds it. It writes the same term as the desktop popover (handleSearchChange), so the fetch, the export and the desktop trigger all read one value.
• Flags. Both read the existing toolbarFlags.showSort / toolbarFlags.showSearch, so userActions.sort: false / userActions.search: false (and a searchless view or object) withhold them on the phone as on desktop. No new key and no new option.
• Display panel width below sm: w-[calc(100vw-2rem)] sm:w-80, as the Filter and Sort popovers already size. At 320 px the Sort rows wrapped "Sort by" onto two lines.
• No i18n key is added; the new controls reuse list.search, list.clearSearch, table.search and the Sort panel's existing keys. Card rows and the bottom action area of the console mobile (≤ 640 px): list as card rows with view chips and a FAB, the record page with a compact header, sticky tabs and a bottom action bar, related records pushed as full pages with a path row and back — the record is always a page on a phone #27058 phone layout are unchanged.

Tests

• New ListView.phoneSortSearch-28911.test.tsx (9 tests). Narrow and wide are reproduced by mounting the base .hidden rule, or that plus the two sm: rules, as ListView.toolbarIconButtons-12695.test.tsx does. Narrow: no Sort button on the bar, Display carries the Sort panel, and Add sort reaches onSortChange and a re-fetch. Wide: Sort on the bar, the Display Sort block not drawn. userActions.sort: false withholds both. compactToolbar: false keeps Sort on the phone bar at Filter's size. Search: the icon is at Filter's size, tapping opens a focused field in the bar (no popover), typing reaches onSearchChange and the fetch, Enter folds to the icon carrying the keyword, Clear search empties and folds, blur on empty folds, wide draws only the desktop icon, userActions.search: false withholds it.
• ListView.displayPopover-12423.test.tsx: the cluster-order pin now lists phone-search-trigger after search-icon-button. It mounts no stylesheet, so both forms of Search are in the DOM.

Ablations (each mutation applied by a script under a trap restore, the file restored to HEAD byte-identical by hash):

• the Sort trigger never hides on the phone (the sortInDisplay && "hidden sm:inline-flex" line removed): 1 of 9 red, the narrow Sort test;
• the phone search icon drawn at every width (sm:hidden removed): 1 of 9 red, the wide search test.

Acceptance notes

• Screenshots (390 px, examples/app-crm, fresh boot, real Console against its backend). In the project folder issue-28911/, for the seat to link: 01-list.png (bar: Filter · Display · Search), 02-search-expanded.png (typing glo leaves Globex Ltd), 03-search-folded.png (the icon carries glo), 04-display-sort.png and 05-display-sort-added.png (Sort Records at the top of Display), 06-sorted-list.png (the cards in the new order), and 07-desktop-1440-display.png (1440 px: the bar is unchanged and the Display panel draws no Sort block).
• Measured in that run: at 390 px the visible cluster buttons are toolbar-filter-trigger, toolbar-display-trigger and phone-search-trigger, each 28 × 28 px. Searching glo leaves one card, and clearing brings back three. Adding a sort in Display re-orders the cards (Initech, Globex Ltd, Acme Corp became Acme Corp, Initech, Globex Ltd). At 1440 px the visible buttons are toolbar-filter-trigger, toolbar-sort-trigger, toolbar-display-trigger and search-icon-button, and display-sort is not visible.
• On the phone the Display trigger's badge does not count an active sort; the desktop Sort trigger's own count badge is the only place a sort count shows. Noted, not changed: the badge counts display settings, and folding sort into it would change its meaning on desktop too.
• The SortBuilder's field and direction selects truncate long labels at phone width ("Creat…"), as they already do in the Sort popover at that width. It is the builder's own layout, not changed here.

Verification

At head 8998c718 (this branch with origin/main ab085a04 merged in; the merge brought only additive @object-ui/i18n locale keys, no file under plugin-list or components):

• pnpm exec vitest run packages/plugin-list/ (from ui/, --maxWorkers=2, under os-verify-lock) at 0f0991d3: 179 / 180 files, 1735 / 1736 tests; the one red was the displayPopover-12423 cluster-order pin, updated in 51eb0f6f above.
• The 19 plugin-list test files that name the Display panel, the Sort or Search triggers (the new file included), at ee663d49 and again at the merged head 8998c718: 19 / 19 files, 390 / 390 tests.
• 10 consumer test files outside plugin-list that name those triggers or the tool cluster (app-shell ObjectView / PageView / print-stylesheet / grouped search, plugin-report print button): 11 / 11 files with the updated pin, 115 / 115 tests.
• pnpm --dir ui exec vitest run scripts/ at ee663d49: 169 files passed, 2 skipped; 4900 tests passed, 2 skipped.
• pnpm --filter @object-ui/plugin-list run type-check: exit 0 (at 0032651d and at 8998c718). eslint on the two source files and the new test: 0 errors.
• Derived gates (node scripts/pm/dispatch-gates.mjs --commands, 34 commands): 34 / 34 exit 0, reconciled by --ran (34 derived, 34 run, 0 NOT-MEASURED). Re-run at 8998c718: check-sdui-manifest exit 0, check-changeset-no-major --base origin/main exit 0, check:nul-bytes exit 0.
• check-changeset-no-major.mjs --base origin/main with this body as GITHUB_EVENT_PATH, and check-adr-0087-registration, check-closing-keyword-parity and check-partof-closing-keyword on this body: exit 0.

Human Minimum

• 1. Schemas start as Zod; packages/spec holds no runtime logic. (not touched)
• 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: 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.

🤖 Generated with Claude Code

https://claude.ai/code/session_01QsR2jSR5zW3jcFhYpwXtjZ

Generated by Claude Code