Replace compact overlays with persistent shelves

[brsbl]

Human comments

What was wrong

On compact viewports, the left navigation covered and dimmed the page, while the right panel rose as a dimmed bottom drawer. Both overlays hid the surface users were navigating from and made the product feel like disconnected modal sheets.

What changed

• Keep the left navigation mounted beneath the page and translate the live page right to reveal a 76vw shelf without a scrim.
• Replace the right-panel bottom drawer with a 76vw right shelf that translates the live page left.
• Keep the translated center pane square and let each shelf own one stable divider.
• Preserve swipe, dismissal, deferred realization, desktop behavior, and compact panel state.
• Use the right-panel glyph consistently now that compact presentation is no longer a bottom drawer.
• Suppress the translated page-header actions and the fixed left-sidebar trigger while the right shelf is open, leaving the shelf-owned collapse control as the only visible sidebar control.
• Add real many-tab shelf coverage in the production ThreadSecondaryPanel story.

No full-page tool-tab behavior is introduced in this layer; every right-panel tab still uses the shelf.

How you verified

• Original shelf-geometry evidence used Chrome for Testing 151.0.7922.71 at 393×852 CSS px against exact base f65de938732b45cf993ed9fc721264229e0d96b3 and then-head 991070eab2c60f00fdb242403b38890dffdc852d.
• Current compact-shelf evidence uses the same populated production Info route, realistic environment-backed fixture, open-shelf interaction state, and 393×852 viewport at capture base 4b8a22b0aaada44f118eac54af996db0844d267c and capture head 108402ee09e4a70b2df61542e7054ce73fae924a. The final square-pane layer is exact base 38c122fc1b74ae4a0afe28596f86e6da9a73aa48 and exact head 8bd201435a25ce4feb3579a5fe3b9fa84d22e4b6.
• Left: base drawer measured x=0, w=320 with an 80%-opaque backdrop and an unshifted app; head shelf measured w=298.67 with the live app shifted to x=298.68 and a transparent backdrop.
• Right: base bottom drawer measured x=0, y=68.17, w=393, h=783.83; head shelf measured x=94.33, y=0, w=298.67, h=852 with the live app shifted to x=-298.68.
• At the exact final head, both translated center panes measured 0px on all four corners, no shadow, and visible overflow. The left shelf owns a 1px right divider; the right Info shelf owns a 1px left divider.
• The left capture found 23 real thread rows in the production sidebar subtree; the right capture found the production Start terminal action. Both captured subtrees had zero loading skeletons.
• Exercised first paint through settled content, real client navigation, a hard reload, and a complete shelf transition with no browser errors.
• Focus entered the dialog when opened; Tab and Shift+Tab stayed contained; a nested production tooltip consumed the first Escape; the second Escape closed the shelf and restored the exact right-panel trigger.
• The exact-head Info shelf measured 296.4×844 at x=93.6 in the 390×844 evidence viewport. Translated header actions and the fixed left trigger were absent while the panel-owned collapse control remained visible.
• At the exact current head, the open Info shelf exposed one on-screen sidebar control: Hide right panel in thread-secondary-panel-top-chrome. The fixed left trigger was absent from the DOM and focus order; closing the panel restored it, and opening the left shelf kept the right shelf closed.
• Remote CI passed tests, typecheck, lint, package smokes, and version gates on the exact final head. No local CI-equivalent command was run.

Left navigation: modal drawer → persistent shelf

Before	After

Right panel: bottom drawer → persistent right shelf

Before	After

Square shelf edges before the toggle-ownership fix

The earlier before/after captures document the drawer-to-shelf change at their labeled capture heads. The square-pane captures below come from the preceding head; the final toggle-only update leaves this geometry unchanged.

Left shelf — square pane	Right Info shelf — square pane
<img src="https://gist.githubusercontent.com/brsbl/d8363c420a5e5c2167498079a27162f0/raw/45ddcf245aaf3dd2f441c3b9a21d38cb96f5dc6b/left-square-pane.svg" width="195" alt="Preceding PR head: production left shelf with a square center pane and one stable divider" />	<img src="https://gist.githubusercontent.com/brsbl/d8363c420a5e5c2167498079a27162f0/raw/520f7ffeb3c06c2a6c41cbb3e9dcadf7327253b6/right-square-pane.svg" width="195" alt="Preceding PR head: production Info shelf with a square center pane and one stable divider" />

One compact sidebar control at a time

The preceding #2761 head correctly suppressed translated workspace actions but still showed the fixed left trigger beside the right shelf owned control. At the exact final head, the fixed trigger leaves the DOM and focus order while the right shelf is active. Closing the right shelf restores it; opening the left shelf keeps the right shelf closed and leaves only the left trigger on screen.

Before — two competing controls	After — right shelf owns one control

BB-Thread-ID: thr_wftu7bh9ez

AGENT GENERATED