refactor(communicator): rebuild the communicator builder as a board management dashboard

[RodriSanchez1]

Closes #2292.

Rewrites the communicator builder as a dashboard: a sidebar, a section header, and a board area that is the only thing that scrolls. Boards are selected first and acted on second, so every action ships with a visible label instead of hiding behind a ⋮ menu.

Quick access

The communicator section is no longer a second card grid. It is a short ordered tray — thumbnail, name, Home badge — with labelled Set as home board, Remove from quick access, Move up and Move down on each row, plus a dashed Add a board from My Boards row that jumps to the board library. Rows render in communicator.boards order and skip ids with no matching entry in availableBoards; a move reorders only the visible ids in place, so a board the user cannot currently see is never dropped from the communicator.

CommunicatorToolbar.container.js now maps over currentCommunicator.boards and looks each id up in availableBoards, instead of filtering availableBoards through includes(). The communicator bar and the tray finally agree on order, so reordering in the tray is immediately visible in the bar.

Board details

getBoardActions() returns one flat array of { key, label, icon, onClick, disabled, premium, destructive } descriptors. BoardDetails renders it, and BoardDetailsSurface picks the presentation — a sticky panel beside the list, or a bottom sheet on narrow viewports. There is no second surface that can drift out of sync.

Actions: Show, Edit, Clone, Export, Save as PDF, Publish / Unpublish, Set as home board, Add / Remove quick access, Delete, Info. Show sits first and closes the dialog; Delete sits last as the destructive one.

Clone ships disabled on purpose. The descriptor, icon, label and position land now; the handler is deliberately left for a follow-up. A labelled button that appears to work and silently does nothing is worse than a disabled one.

Export and PDF now report through showNotification on both success and failure — they previously disappeared into silent catch {} blocks — and run through a runBusy wrapper that disables the panel's action list while one is in flight, scoped so a slow action finishing late cannot clear the spinner of a different board.

Dialog layout

The dashboard never claimed the height of the dialog, so it grew as ordinary content inside FullScreenDialog's scroller and produced a scrollbar the content did not need:

• the root used min-height: 100%, silently ignored because FullScreenDialog's content wrapper has height: auto — measured at 1280×800, the dashboard was 293px tall in an 800px dialog, which is also why the sidebar stopped mid-page;
• the details panel measured itself against the viewport (top: 72px inside a container starting 64px down, max-height: calc(100vh - 96px)), putting its bottom at y=840 in an 800px viewport — ~40px of spurious scroll.

Now contentFullWidth carries height: 100% (only this dialog passes fullWidth), the dashboard is height: 100%; overflow: hidden, the content column is a flex column, and the board area is a flex: 1; min-height: 0; overflow-y: auto region. The header is a plain non-shrinking flex item — nothing scrolls under it, so the sticky positioning and backdrop blur are gone. The panel's offsets are now relative to that board area, and the permanent Drawer's docked root spans the full height.

Verified in Chrome at 1280×800 and 400×740: dialog paper and container both report scrollHeight === clientHeight. With 3000px of injected board content and 2000px of injected panel content, only the board area scrolls and the panel clamps inside the viewport.

Accessibility

• Cards and rows are real buttons carrying aria-current when selected; activating one moves focus to the details heading, Escape returns focus to the originating card, and the phone sheet traps focus.
• No icon-only controls in the details surface — every action renders its visible label. The compact controls that remain (the ★ toggle, the tray's four row actions) each carry a tooltip, an aria-label naming both action and board, and a 44×44 target.
• Quick-access membership is never signalled by the ★ colour alone; the badge text carries the same information.
• A polite live region — the first in the codebase — announces long operations, their results, reorder positions and search result counts.
• Reordering never depends on dragging: Move up / Move down are ordinary labelled buttons, disabled at the ends of the list.
• The bottom sheet respects prefers-reduced-motion.

Tests

New suites cover useBoardSelection, useBoardActions, useBoardsFetcher, boardActions, quickAccessOrder, QuickAccessTray, BoardDetails, BoardDetailsSurface, BoardCard and CommunicatorToolbar.container, plus the updated dashboard-shell snapshot. CommunicatorDialog, FullScreenDialog and CommunicatorToolbar: 15 suites, 81 tests, all passing.

Out of scope

• Wiring the Clone handler (button ships disabled).
• Multiple communicators.
• Splitting My Boards into "created by me" and "saved from community".

🤖 Generated with Claude Code

[magush27]

When going to Quick Access for the first time and the steps go on, arriving on this step makes the interface unusable with the arrows not working and no way of quitting from the steps. This is what I see:

I'll try to solve it