Improve multi-screenshot composer workflow

[pmbemax]

Summary

This draft PR implements the full multi-screenshot composer workflow proposed in element-hq/element-meta#3231:

• stage pasted/dropped images in a bounded composer tray instead of immediately showing a full upload dialog;
• use the normal composer text as the shared context/caption for the staged set;
• preserve standard Matrix media events (m.image) under the hood;
• add namespaced batch metadata to same-send media events so Element can render consecutive screenshots as one coherent timeline group;
• render the shared context once below the grouped screenshots.

This is opened as a draft because the product/design direction should be confirmed first. If maintainers prefer smaller review units, I can split the implementation into composer-side staging first and timeline grouping second while keeping the same product goal.

Why

Desktop users frequently paste/drop several screenshots while explaining a bug, support case, design review, or technical workflow. The explanation usually belongs to the whole screenshot set, not to each image independently.

This PR keeps the protocol-compatible media-event model while improving the sender and receiver UX in Element Web/Desktop.

Event compatibility

The implementation keeps sending standard m.room.message media events with msgtype: "m.image".

For same-send image batches, it adds an extra namespaced content object:

"io.element.media_batch": {
  "id": "<uuid>",
  "index": 0,
  "count": 2
}

Clients that do not understand this key should continue to display normal media events. Element uses it only to group consecutive same-sender, same-batch image events in the timeline.

UI behavior

• Pasted/dropped images are shown in a composer tray as bounded thumbnails.
• The tray has in-frame remove buttons that appear on hover/focus.
• The normal composer remains the single text field for the screenshot set.
• Sending submits the image batch; the first image carries the shared composer body, later images keep their filenames as body.
• In the timeline, same-batch screenshots render as one grouped media body with the shared text shown once.

Tests run

Local verification on this branch:

# Jest / unit coverage
cd apps/web
NX_DAEMON=false pnpm jest --runTestsByPath \
  test/unit-tests/ContentMessages-test.ts \
  test/unit-tests/components/structures/MessagePanel-test.tsx \
  test/unit-tests/components/views/rooms/PendingAttachmentTray-test.tsx \
  test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx \
  test/unit-tests/components/views/rooms/composer/PendingComposerAttachments-test.ts \
  test/viewmodels/room/RoomUploadViewModel-test.tsx \
  --runInBand
# Result: 6 suites passed, 97 tests passed, 3 snapshots passed

# CSS / lint
git diff --check
pnpm exec stylelint \
  "res/css/views/dialogs/_UploadConfirmDialog.pcss" \
  "res/css/views/rooms/_EventTile.pcss" \
  "res/css/views/rooms/_MessageComposer.pcss"
pnpm exec eslint <changed source/test files>
# Result: pass

# Type checks
NX_DAEMON=false pnpm lint:types
# Result: pass

# Happy-path E2E
sg docker -c 'cd apps/web && NX_DAEMON=false pnpm exec playwright test --project=Chrome playwright/e2e/media/multi-screenshot-composer.spec.ts'
# Result: 1 passed

Notes

Notes: Add a multi-screenshot composer workflow that stages pasted/dropped screenshots, uses the normal composer text as shared context, and groups same-batch screenshots in the timeline while preserving standard Matrix media events.

[CLAassistant]

All committers have signed the CLA.

[pmbemax]

Note for maintainers: I do not have label permissions on this repository. The Preview Changelog check appears to require a changelog/type label; this should likely be T-Enhancement if the direction is accepted. CLA is also pending for this contributor account.

[bxdxnn]

It looks like you've reimplemented gallery messages with some custom/undocumented event metadata?
Please see #33111