Rename the Slash row Picture to Media, and name the media button Insert media #334

Parent

#328. Related: #251

What to build

A writer types /video to embed a lesson, and the Slash menu says "No matching blocks". Yet the "Picture" row opens the Insert media panel, which embeds video, audio, YouTube and more. Elsewhere in the app, "Picture" names only the image type, so "Media" is the row's true name. The media button also has three names: "Insert image" on the phone, "Insert Media" on desktop, and "Insert media" on the sheet.

After this change, the row is "Media" and the button is "Insert media" everywhere.

Acceptance criteria

• The Slash row label is "Media". Its icon and its id picture do not change.
• The row keeps its aliases image, img, media, photo.
• The row adds the aliases picture, video, audio, embed, youtube, vimeo, soundcloud, spotify, loom.
• /video, /youtube, /embed and /audio each show exactly one row, "Media".
• /image, /img, /photo and /picture still show the row.
• The phone toolbar media button's accessible name is "Insert media".
• The desktop toolbar media button's tooltip and aria-label are "Insert media".
• The Slash Cypress case for this row uses /video and expects "Media". It fails when the video alias is removed (prove it by sabotage).

Blocked by

None — can start now.

Agent brief

Type: HITL — issue #251 fixes the row names and lists "Picture". A maintainer must rule that "Media" replaces "Picture". The answer goes as a maintainer comment on #251, and the maintainer edits #251's name list to match. After that, an agent can finish the build alone.

Category: enhancement

Current behavior: Short paths are under apps/webapp/src/components/TipTap/.

• The row is label: 'Picture', aliases ['image', 'img', 'media', 'photo'] (apps/webapp/src/components/TipTap/slash/slashItems.ts:95-110).
• The filter matches a label by includes and an alias by startsWith (slashItems.ts:121-129). So /video finds nothing.
• The panel inserts nine media kinds (apps/webapp/src/components/TipTap/mediaPopovers/mediaInsert.ts, MEDIA_INSERT_REGISTRY). There, "Picture" is the label of the image kind only.
• Phone button: aria-label="Insert image" (toolbar/mobile/ToolbarMobile.tsx:110).
• Desktop button: tooltip="Insert Media" aria-label="Insert Media" (toolbar/desktop/EditorToolbar.tsx:165).
• The sheet already says "Insert media" (mediaPopovers/MediaInsertSheet.tsx:19, apps/webapp/src/components/BottomSheet.tsx:84).

Desired behavior:

• Rename the label and add the aliases. Do not replace the old aliases.
• Keep id: 'picture' and Icons.image. The id is only a React key and the data-slash-item hook.
• Keep the alias list written by hand. Do not build it from MEDIA_INSERT_REGISTRY. That module imports react-icons/fa6, and slashItems.ts loads with the editor config (see the bundle note in toolbar/desktop/popoverOpenRequest.tsx:35-36).
• Add no post, tweet or x alias. A one-letter alias would take /x from any future row.
• One-letter queries now show a different set of rows, because the label changed. That is expected.

Where to start:

• slash/slashItems.ts: the row, and the comment at :11 that says "the Picture item".
• toolbar/mobile/ToolbarMobile.tsx:110 and toolbar/desktop/EditorToolbar.tsx:165.
• apps/webapp/cypress/e2e/editor/slash/slash-menu.cy.ts:159-168. Rename the case title, type /video in place of /picture, and expect the text "Media". Keep it one case.
• In the same case, change should('not.contain', '/picture') at :165 to /video. Otherwise that check tests nothing.

Line numbers are hints as of 2026-09-28; the agent searches by symbol.

Rules that apply:

• CONTEXT.md §Pad tools: each Slash row runs an existing editor command.
• AGENTS.md §Test Policy: the existing case asserts "Picture", so it must change. It now pins the new video alias. Prove it by sabotage.
• AGENTS.md §Test Policy: the mobile shell needs a mobile user agent. A narrow window still renders the desktop shell.
• CLAUDE.md §Hard invariants (do not violate): one name per thing. The control is "Insert media" on every surface.

Verify:

• From the repo root: bun run check
• Start the local stack with make dev-local. Note the webapp port; it is not always 3000. From apps/webapp, run bunx cypress run --spec cypress/e2e/editor/slash/slash-menu.cy.ts --env EDITOR_BASE_URL=http://localhost:<port>.
• Sabotage: remove the video alias, and the case fails. Put it back.
• Desktop browser, light and dark: /video shows "Media"; Enter opens the Insert media panel on "Embed URL". Hover the toolbar button: the tooltip reads "Insert media".
• Phone: a narrow window does not produce the mobile shell. Use a real phone, or a mobile user agent on a real pad route. In the browser accessibility tree or a screen reader, the toolbar button's name is "Insert media". Typing /vid shows "Media" in the sheet.

Out of scope

• A new media row, or a new icon.
• An ellipsis on rows that open a second surface.
• Markdown hints on rows — Show the Markdown shortcut on each Slash menu row that has one #346.