githubnext/chopinPublic

Let's compose rich plans together

Put Research last in the slash menu and add icons and hints #290

MergedMaggieAppletonmerged 5 commits intomainfromrefs/pull/290/head
  1. MA

    The slash menu offers ordinary blocks first and Research last. Bare `/` then Enter selects Callout; `/res` narrows to Research. Icons and accessible hints explain each item while narrow screens hide the visible hint column.

    Integration review preserved main’s newer Lock and CircleClose forwarding cases while adding the seven matching icon cases. The same literal class sinks and geometry placement remain; exact source pins were renewed after review.

    Local CI, types, 33 focused tests, and all 14 toolbar browser tests pass. Final hosted validation, browser integration, and container CI passed on the rebased head.

    <details><summary>Original proposal and screenshots</summary>

    ## Why Typing `/` opened the slash menu with Research first and preselected, so `/` then Enter started a durable research job, the most expensive action in the menu. Rows were bare text.

    ## What changed - Ordinary blocks first (Callout, Table, Code block, Image, Diagram, Formula, Tabs, Diff), then a hairline divider, then Research last. The first block is preselected; Research is active only when the query matches it (`/res`). - Each row has a 14px icon, the label, and a one-line `text-xs` hint in `text-tertiary`, left-aligned in a second column. Rows stay 32px (44px on touch). Menu is `w-96` from 480px up and capped at `100vw - 2rem`. - Below 480px the hint column is hidden and the menu shrinks to its labels. Hints stay available to screen readers via `aria-description`; `aria-label` is the plain label, so accessible names and e2e selectors are unchanged. - Added Table, Image, Diagram, Formula, Tabs, Diff and Magnifier line icons to `@chopin/icons`. Callout and Code reuse existing icons; Research uses the new 18-grid Magnifier (SearchIcon is on a 15-grid and renders heavier).

    ## Screenshots Before (desktop, open and `/res`):

    ![before open](https://github.com/user-attachments/assets/f40f8f93-7086-4193-886c-b19bcf8cc637) ![before res](https://github.com/user-attachments/assets/66305f43-60f9-47c0-9527-d0fbdae04391)

    After (1440, 390, 320, and `/res`):

    ![after 1440](https://github.com/user-attachments/assets/b33ebc0f-fdba-4e28-b8a1-9afe8a11634d) ![after 390](https://github.com/user-attachments/assets/130130dc-73b2-443b-80aa-31bb1cbb3180) ![after 320](https://github.com/user-attachments/assets/08c57846-cd2c-477f-a055-ed5e27d850b6) ![after res](https://github.com/user-attachments/assets/dccf6dcc-54dd-43e0-a5eb-51c8273a1edb)

    ## Testing - `bun test packages/editor packages/icons apps/web/src/icon-assets.test.ts`: pass. - New unit tests: order (Research last, never the bare-slash default), `/res` narrows to Research, every command has an icon and one-line hint. - `bun run types`: pass. `bun run ci`: dprint, oxlint, tokens pass; design-contract fails (below). - e2e: `filtering resets the option Enter will choose` asserts the accessible name instead of exact text. Browser integration job passes in CI.

    ## Needs a design-contract review `bun run ci` fails only the design-contract check: - `packages/editor/src/toolbar/slash.tsx` (`scripts/design-contract/exceptions/dynamic-editor.json`): reviewed owner lines moved; sha256 now `0bdcf918d08f5913786cbe786e8f670ed9fdec9dceb86bb6f811b040b35aa4f3`. Safe: the same constant-class sinks, shifted, plus literal token and breakpoint classes. - `packages/icons/src/line.tsx` (`scripts/design-contract/exceptions/dynamic-packages.json`): sha256 now `8a438d42d284d30d3b6728928a0b0046542e7ea03d57f914901274ba6023f7b1`, plus seven new cases of the form `unresolved JSX props > <Name>Icon > <LineIcon>` for TableIcon, ImageIcon, DiagramIcon, FormulaIcon, TabsIcon, DiffIcon and MagnifierIcon. Safe: the same `{...props}` forwarding to `LineIcon` as every existing icon, with no style or class logic.

    🤖 Generated with [Claude Code](https://claude.com/claude-code)

    </details>

  2. MA
    Author

    **Review:** Changes needed

    Ordering, preselection, filtering, keyboard and accessible names all work as described. Checked in a real browser (desktop 1440 and phone 390 with a fresh doc, `/` on an empty paragraph). Two icon issues should be fixed before merge.

    **What passes** - Order is Callout, Table, Code block, Image, Diagram, Formula, Tabs, Diff, hairline, Research. Callout is `aria-selected` on a bare `/`; `/res` narrows to Research only; `/xyzzy` closes the menu. - ArrowUp from the first row wraps to Research and ArrowDown steps from there, so keyboard behaviour is intact. Enter on a bare `/` can no longer start a research job. - Options expose `aria-label="Callout"` etc. with the hint as `aria-description`; the e2e change to `toHaveAccessibleName` is right. - Menu is 320px wide. At 390px it fits inside the gutters and no hint truncates on desktop or phone (measured `scrollWidth > clientWidth` on every hint: all false). Rows are 32px. - Design-contract: `bun scripts/check-design-contract.ts` reports exactly the six new `*Icon > LineIcon` `{...props}` cases plus owner-line shifts in `line.tsx` and `slash.tsx`, as the PR describes. Safe; no hash edited.

    **Changes needed** 1. **Research icon is larger and heavier (confirmed, cause found).** All icons render a 14x14 svg, but `SearchIcon` (`packages/icons/src/system.tsx:32`) uses `viewBox="0 0 15 15"`, while every `LineIcon` glyph uses an 18 grid with ~2.75 padding. Measured at `size={14}`: line icons scale 0.778 and stroke 1.17px, glyph about 11.7px; Search scales 0.933, stroke 1.4px, glyph about 13px. Fix: in `slash.tsx` don't use the 15-grid `SearchIcon` as is. Either render it at `size={12}` (14 x 15/18 = 11.7, matches scale and stroke exactly; one-line, but a magic number) or, better, add an 18-grid magnifier to `line.tsx` (e.g. `<circle cx="8" cy="8" r="5.25"/><line x1="11.9" y1="11.9" x2="15.25" y2="15.25"/>`) and use it here, leaving the existing `SearchIcon` alone for the other callers. 2. **Tabs reads as a folder** (`line.tsx` TabsIcon): it is a folder silhouette (a body with one raised tab on the left, nothing else), and it sits directly above Diff in the menu next to a Code block icon. Suggest a two-tab shape: panel `M2.75,6.75h12.5v6.5a2,2 0 0 1-2,2h-8.5a2,2 0 0 1-2-2Z` plus a raised active tab joined to it `M2.75,6.75V5c0-.69.56-1.25,1.25-1.25h3.5c.69,0,1.25.56,1.25,1.25v1.75` and a short inactive-tab stub `M11,3.75h2.25c.55,0,1,.45,1,1V6.75` (or simply a second small tab segment). The point is two tab headers over one panel, so it does not read as a file folder. Avoid "rect + divider above the line": it would collide with TableIcon (rect + divider below). 3. **Diff icon is too small and unbalanced.** It is only a plus and a minus floating at top-left and bottom-right at roughly 5px each (renders like `+_`), a lot lighter than the 12.5px rectangles of Table and Image. Suggest the same 12.5 rounded square as Table/Image with a plus at the upper left and a minus at the lower right inside it, e.g. `<rect height="12.5" rx="2" width="12.5" x="2.75" y="2.75"/><line x1="5.75" x2="9.25" y1="7" y2="7"/><line x1="7.5" x2="7.5" y1="5.25" y2="8.75"/><line x1="9.5" x2="12.5" y1="12" y2="12"/>`. Tune so the glyph carries the same visual weight as its neighbours.

    **Icons that are fine:** Table, Image, Diagram and Formula (sigma) are consistent with the Nucleo set: same 18 grid, 1.5 stroke, round caps and joins, rx matching. Diagram looks good at 14px.

    **Nits (not blocking)** - Hints are right-aligned with `ml-auto`, so their left edges are ragged and the eye has to hop across a gap. Left-aligning hints in a fixed column after the label would scan better; this is a taste call. - `w-80` has no max width. It fits at 390; at a 320px viewport it would be wider than the screen (`placeSurface` clamps position, not width). I did not test 320. - At 14px the hint (`text-xs`) looks about 1px higher than the 14px label; worth a visual check with `items-baseline`, or ignore. - Copy: "Syntax-coloured" matches the repo's UK spelling; fine.

    Screenshots (menu, `/res`, phone): `.design-orchestrator/audit-2026-10-05/shots/review-290/`.

  3. MA
    Author

    Addressed review feedback: 1. Research uses a new 18-grid `MagnifierIcon` (SearchIcon untouched). 2. Tabs icon redrawn as a panel with a raised active tab and an inactive stub. 3. Diff icon is now the rounded-square body with a plus top-left and minus bottom-right. 4. Hints sit in a left-aligned second column (fixed label column), vertically centred with the label. Menu is `w-96`; Diff hint shortened. 5. `max-w-[calc(100vw-2rem)]` added; verified at 320, 390 and 1440.

    Updated design-contract hashes: `slash.tsx` `a754b293ada635685d1bc819d7f6163154639496e9485daa331f95f0360bcb74`, `line.tsx` `8a438d42d284d30d3b6728928a0b0046542e7ea03d57f914901274ba6023f7b1` (new icon cases: Table, Image, Diagram, Formula, Tabs, Diff, Magnifier).

    ![1440](https://github.com/user-attachments/assets/fe0831df-2967-4bc1-9ec0-88edb05c28a4) ![390](https://github.com/user-attachments/assets/2921a315-e82d-4858-bd3b-6933e12bb51d) ![320](https://github.com/user-attachments/assets/417c56a0-3a56-436c-9b9b-aa86fece3ddb) ![res](https://github.com/user-attachments/assets/325f28ad-637c-42de-aff4-5fcbe208bcc4)

  4. lavaman131referenced cea16398d820last month on GitHub

  5. lavaman131referenced 168b4551040flast month on GitHub

  6. MaggieAppletonhead-ref-force-pushed e5b6d6ce6ae4last month on GitHub

  7. MaggieAppletonhead-ref-force-pushed 3bee1a140c7dlast month on GitHub

  8. MA
    Author

    Commit pushed: [`3427cfb`](https://github.com/githubnext/chopin/commit/3427cfb4310ed4b42e40532a8ea226f29a03b07f)

    > Generated by [PR CI fixer](https://github.com/githubnext/chopin/actions/runs/37619004672) · gpt54 · 223.2 AIC · ⌖ 15 AIC · ⊞ 15.1K

  9. MA
    Author

    Root cause: `Format, lint, and enforce design tokens` was failing because the reviewed design-contract metadata was stale after the slash-menu sink moved in `packages/editor/src/toolbar/slash.tsx` and seven new icon forwarders were added in `packages/icons/src/line.tsx` without corresponding exact exceptions.

    Changed files: `scripts/design-contract/exceptions/dynamic-editor.json`, `scripts/design-contract/exceptions/dynamic-packages.json`.

    Verification: `bun scripts/check-design-contract.ts` now passes locally. `bun run fix` and full `bun run ci` are still blocked in this runner by `dprint` failing to download `dprint-plugin-typescript` from GitHub Releases through the local proxy, so GitHub CI still needs to confirm the queued fix after guarded application.

    `babysit-head:3bee1a140c7d33f7fb6f98850c4d198f717dafc2`

    > [!WARNING] > <details> > <summary>Firewall blocked 1 domain</summary> > > The following domain was blocked by the firewall during workflow execution: > > - `releaseassets.githubusercontent.com` > > To allow these domains, add them to the `network.allowed` list in your workflow frontmatter: > > ```yaml > network: > allowed: > - defaults > - "releaseassets.githubusercontent.com" > ``` > > See [Network Configuration](https://github.github.com/gh-aw/reference/network/) for more information. > > </details>

    > Generated by [PR CI fixer](https://github.com/githubnext/chopin/actions/runs/37619004672) · gpt54 · 223.2 AIC · ⌖ 15 AIC · ⊞ 15.1K · [◷](https://github.com/search?q=repo%3Agithubnext%2Fchopin+%22gh-aw-workflow-call-id%3A+githubnext%2Fchopin%2Fpr-ci-fix%22&type=issues)

    <!-- gh-aw-agentic-workflow: PR CI fixer, engine: codex, model: gpt-5.4, id: 37619004672, workflow_id: pr-ci-fix, run: https://github.com/githubnext/chopin/actions/runs/37619004672 --> <!-- gh-aw-workflow-call-id: githubnext/chopin/pr-ci-fix -->

  10. MaggieAppletonhead-ref-force-pushed 85e472a4757alast month on GitHub

  11. MaggieAppletonhead-ref-force-pushed 3eb4cb33b5e0last month on GitHub

  12. MaggieAppletonhead-ref-force-pushed 492c68e6abf6last month on GitHub

  13. MaggieAppletonhead-ref-force-pushed aa309577a91blast month on GitHub

  14. MaggieAppletonreferenced this in Share one menu surface recipe across pickers and the language menu #377last month on GitHub

  15. MaggieAppletonreferenced this in Make tabs authorable in place and label empty table headers #382last month on GitHub

  16. MaggieAppletonhead-ref-force-pushed 79ba4d9fd4c8last month on GitHub

  17. MaggieAppletonmerged 61737ef9c5cflast month on GitHub

  18. MaggieAppletonclosedlast month on GitHub

  19. MaggieAppletonhead-ref-deletedlast month on GitHub