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

[pmbemax]

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

Well I did already, it’s working on my laptop for weeks now, I wanted to share what I did. I’m quite new in this PR thing

[bxdxnn]

Even if it works for you right now (it will stop working once the gallery implementation gets merged), your implementation won't be interoperable with other Matrix clients, including the upcoming gallery implementation in Element X, as you (or probably Claude) reinvented the gallery feature without any documentation/discussion.
Therefore, this PR won't be merged.