refactor: room contextual bar panels compose layout containers instead of Box

Draft
JU
5d ago
+1056-455

Proposed changes (including videos or screenshots)

ARCH-2592
Stacked on #43160 (account screens).

The room side panels under views/room/contextualBar stop laying themselves out with raw Box, div and section elements. The raw layout count drops from 1113 to 1013, and the CI limit drops with it.

  • New shared containers in client/components. Teams and omnichannel panels already repeat all of them, so they skip the layout/ stage. Only the room panels switch here:
    • ContextualbarList/ContextualbarListStatus: the loading indicator or error shown in place of a list, inset to line up with its rows (spaced adds the 12px block padding, as ContextualbarContent names it). Used by threads, discussions, members, banned users, pinned/starred/mentions and calls.
    • ContextualbarList/ContextualbarListFilter: the 144px select after a section's search input (threads, files, members).
    • ContextualbarList/ContextualbarListSummary: the "Showing x of y" line above the members list.
    • ContextualbarList/ContextualbarListArea: the clipped area a virtualized list fills (threads, discussions, members, banned users).
    • ModalCalloutContent: a callout that is a modal's whole content, set 16px below the header. Edit room's ABAC warning uses it; admin/rooms/EditRoom repeats it.
  • Shared within the room: contextualBar/layout/ContextualbarInset (24px all round: files loading, search-provider error, thread skeleton), contextualBar/layout/MessageListSection (the message list section of pinned/starred/mentions and search), and room/layout/MessageListLoadMore (the load-more row; the room's MessageList repeats it).
  • Local containers in layout/ folders for the thread view (surface, docked slot, chat section, composer option, list frame, row surface, divider item, unread badge slot), the call history (item, list area, empty/error state), the ABAC sections in room info and the ABAC panel, invite link, members group header, discussions row and viewport, files list area, message search form and results, auto-translate, user info and report-user modal, and the conference config modal.
  • Spacing between siblings now comes from Stack gaps instead of margins, including ChannelToTeamSelection's Margins wrapper. Text uses Text; the UiKit contextual bar's form is a plain <form>; the report-user modal's form is a ModalForm; plain ul/li replace unstyled Box is='ul'/'li'.
  • An empty <Box display='flex'></Box> in the call history row is removed.

No visual change expected. Each replacement keeps the same box model: same paddings, margins (as Stack gaps where siblings had them) and flex behavior, and the same Margins inheritance inside ContextualbarScrollableContent. Two equivalences reviewers may want to check:

  • Notification preferences: the device name in each accordion title lost its trailing 16px inline margin (the leading one is now the row's gap). It sat at the end of a full-width row, so nothing moves unless the label overflows.
  • ABAC attributes panel: the heading, description and attribute sections are now spaced by Stack gaps of 24px and 40px. The old margins added up to the same sizes, because the scrollable content is a flex column, so its margins don't collapse.

Visual check: before/after screenshots of the running app, identical for Room info, Edit room, Members (list, no match, a user's info), Threads (list, empty, an open thread), Discussions, Files (empty), Pinned, Starred, Mentions, Search, Notification preferences, Banned users and Calls. Not captured: states that need data or setup the local workspace lacks (files with uploads, ABAC, auto-translate, UiKit bars, the modals).

Issue(s)

Part of the screen layout migration (#43056).

Steps to test or reproduce

  • node scripts/scan-raw-layout.mjs --max 1013
  • In a channel, open each panel from the room toolbar: Room info and Edit, Members (list, a user's info, Add users, Invite link and Edit invite), Threads (list and an open thread, docked and expanded), Discussions, Files, Pinned, Starred, Mentions, Search messages (encrypted room too), Notification preferences, Auto-translate, Calls, Banned users, ABAC attributes (enterprise), and a UiKit contextual bar from an app.
  • Modals: Report user, Move to team, Edit a private room that has ABAC attributes ā†’ switch it to public ā†’ Save, conference config, blocked call popup, Matrix add-users and banned-user unban.
  • Storybook: views/room/contextualBar/**.

Further comments

The other layout migration pull requests each lower the same --max line in ci-code-check.yml and prune scripts/spacing-scale/baseline.json. Whichever merges second rebases and takes the lower count.

Three Virtuoso slot components stay as they are and still count: RoomMembersListWrapper and RoomFilesListWrapper (div role='list' with keyboard navigation) and RoomFileItemWrapper (div role='listitem'). Each is already a named component that only renders the list element Virtuoso asks for.

Margins reaches more than Box: it also adds a class to its direct children, so a Text or a plain element placed directly inside ContextualbarScrollableContent still gets the 16px block-end margin. This PR relies on that for the UiKit form and the ABAC heading, the same as before.

šŸ¤– Generated with Claude Code