Shell 1.6.0: bars that tuck away, and every edge resizes #6

2026-09-17T11:40:09-04:00

michael commented

2026-09-17 11:40:09 -04:00

Three things about arranging a dashboard, plus a fix underneath that the first one needed.

Auto-hide bars

A new button left of ⛶ folds every tile's title bar away at once, for a windowed screen that should read like a wall display. Fullscreen already did this for watching; this is the windowed equivalent, asked for by hand.

It starts off on a fresh dashboard and saves with the layout — including a named layout on the server, so a booth loads its screen with the bars already tucked away. Fullscreen still folds the bars away regardless and takes the button off the bar while it lasts.

A hidden bar is not a gone bar

Folded away — by that switch or by a tile's own notch — the bar leaves the flow and parks just above its tile, so the module keeps the whole body and nothing reflows as the bar comes and goes. Point at the tile's top edge and it slides back in over the content, where its buttons click and its width drags the tile exactly as before.

That is the point of the second bullet: a dashboard can now be arranged with every bar out of the way.

Every edge resizes

The top, left and right edges join the bottom one. Each moves only itself, so the tile grows or shrinks into the space beside it while the opposite edge stays put, stopping at a neighbour or at the module's own minSize.

Where two tiles meet, that boundary already belongs to the seam pill between them, which moves both edges at once and leaves no gap — and it sits above everything at z-index: 30, so a side grip there was both unreachable and a second control doing something different on the same pixels. The two tiles' side marks now step aside on a shared edge (seam-left / seam-right, recomputed with the dividers) and stay on free edges.

The fix underneath

sanitizeLayout() was rebuilding each tile from six fields and dropping the rest, so saving a named layout lost variant, title, minSize and headHidden. A saved "Now" tile came back as the full Now/Next card; a solo timer came back with a full tile's settings. The layout file now carries them, which is also what lets the new switch travel with a layout.

Verified in the browser

Against the Slack and ProPresenter mocks, with real pointer drags (viewport emulation had to be off — it skews the pointer mapping):

default off; toggling folds every bar away, bodies go from starting at 33px to starting at 1px, and the flag lands in the saved layout and survives a reload;
pointing at a tile's top edge reveals the bar (pointer-events: auto), moving down past it folds it away, and leaving the tile folds it away — while a folded bar leaves the top of the tile to the module, confirmed with elementFromPoint;
a real drag from a revealed bar moved the Clock two rows, with the bar staying put for the whole drag; its gear opened its popover from the same revealed bar;
top, left and right edges each dragged both ways with the opposite edge measured unmoved; the right edge stopped at the module's minSize of 3 columns rather than 2;
a shared edge hands off to the seam pill: seam-right on the left tile, seam-left on the right, one divider, the two facing grips display: none;
a named layout round-tripped autoHideHeads, variant: transcript:C001, title: #production, minSize and headHidden, loaded back through the Layouts menu onto an empty board;
entering fullscreen clears the folded state and hides the new grips and the button; leaving restores it.

🤖 Generated with Claude Code

Three things about arranging a dashboard, plus a fix underneath that the first one needed. ### Auto-hide bars A new button left of ⛶ folds every tile's title bar away at once, for a windowed screen that should read like a wall display. Fullscreen already did this for watching; this is the windowed equivalent, asked for by hand. It starts **off** on a fresh dashboard and **saves with the layout** — including a named layout on the server, so a booth loads its screen with the bars already tucked away. Fullscreen still folds the bars away regardless and takes the button off the bar while it lasts. ### A hidden bar is not a gone bar Folded away — by that switch or by a tile's own notch — the bar leaves the flow and parks just above its tile, so the module keeps the whole body and **nothing reflows** as the bar comes and goes. Point at the tile's top edge and it slides back in over the content, where **its buttons click and its width drags the tile** exactly as before. That is the point of the second bullet: a dashboard can now be arranged with every bar out of the way. ### Every edge resizes The top, left and right edges join the bottom one. Each moves only itself, so the tile grows or shrinks into the space beside it while the opposite edge stays put, stopping at a neighbour or at the module's own `minSize`. Where two tiles meet, that boundary already belongs to the **seam pill** between them, which moves both edges at once and leaves no gap — and it sits above everything at `z-index: 30`, so a side grip there was both unreachable and a second control doing something different on the same pixels. The two tiles' side marks now step aside on a shared edge (`seam-left` / `seam-right`, recomputed with the dividers) and stay on free edges. ### The fix underneath `sanitizeLayout()` was rebuilding each tile from six fields and dropping the rest, so **saving a named layout lost `variant`, `title`, `minSize` and `headHidden`**. A saved "Now" tile came back as the full Now/Next card; a solo timer came back with a full tile's settings. The layout file now carries them, which is also what lets the new switch travel with a layout. ### Verified in the browser Against the Slack and ProPresenter mocks, with real pointer drags (viewport emulation had to be off — it skews the pointer mapping): - default off; toggling folds every bar away, bodies go from starting at 33px to starting at 1px, and the flag lands in the saved layout and survives a reload; - pointing at a tile's top edge reveals the bar (`pointer-events: auto`), moving down past it folds it away, and leaving the tile folds it away — while a folded bar leaves the top of the tile to the module, confirmed with `elementFromPoint`; - a real drag from a revealed bar moved the Clock two rows, with the bar staying put for the whole drag; its gear opened its popover from the same revealed bar; - top, left and right edges each dragged both ways with the opposite edge measured unmoved; the right edge stopped at the module's `minSize` of 3 columns rather than 2; - a shared edge hands off to the seam pill: `seam-right` on the left tile, `seam-left` on the right, one divider, the two facing grips `display: none`; - a named layout round-tripped `autoHideHeads`, `variant: transcript:C001`, `title: #production`, `minSize` and `headHidden`, loaded back through the Layouts menu onto an empty board; - entering fullscreen clears the folded state and hides the new grips and the button; leaving restores it. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

michael added 1 commit 2026-09-17 11:40:09 -04:00

Shell 1.6.0: bars that tuck away, and every edge resizes 8e579ecb34

Three things about arranging a dashboard.

**Auto-hide bars.** A new button left of ⛶ folds every tile's title bar away
at once, for a windowed screen that should read like a wall display.
Fullscreen already did this for watching; this is the windowed equivalent,
asked for by hand. It starts off and saves with the layout, so a booth's
named layout loads with the bars already tucked away.

**A hidden bar is not a gone bar.** Folded away — by that switch or by a
tile's own notch — the bar leaves the flow and parks just above its tile, so
the module keeps the whole body and nothing reflows as the bar comes and
goes. Point at the tile's top edge and it slides back in over the content,
where its buttons click and its width drags the tile exactly as before. A
dashboard can now be arranged with every bar out of the way, which is the
point of hiding them.

**Every edge resizes.** The top, left and right edges join the bottom one:
each moves only itself, so the tile grows into the space beside it while the
opposite edge stays put, stopping at a neighbour or at the module's own
minimum. Where two tiles meet, that boundary already belongs to the seam
pill between them — it moves both edges and leaves no gap — so the two
tiles' side marks step aside there rather than offer a second, different
control on the same pixels.

One fix underneath: saving a named layout was dropping each tile's variant,
title, minimum size and hidden-bar state, so a saved "Now" tile came back as
the full Now/Next card and a solo timer came back with a full tile's
settings. The layout file now carries them — and the new switch with them.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

michael added 1 commit 2026-09-17 11:53:00 -04:00

Tiles resize from anywhere, so nothing marks the spots 68f0ba806d

Every edge and both bottom corners resize now, so the little marks that used
to appear on hover were pointing at the whole rim. They are gone — corners,
edges and the seam pill alike — and the cursor over an edge is what says it
can be dragged, the way a window's own edges do it. The seam still shows
itself while it is actually being dragged, which says what is moving rather
than where you may push.

With nothing drawn, the grips could be made to cover the rim properly: the
top strip now runs corner to corner instead of stopping 24px short, the
sides run from it down to the bottom corners, and the bottom strip fills
between those. No dead spots left along an edge.

The side grips also stopped standing down at a seam. They only did so to
avoid stacking three marks in one place, and it cost real ground: a tile
taller than its neighbour lost its whole side, not just the part the seam
covers. The seam sits above them anyway, so it still wins where it exists
and the rest of the edge now works.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

michael added 1 commit 2026-09-17 12:05:17 -04:00

A pin on the title bar, and no more notch 7f50fa0ba9

Pointing at a tile's top edge already brings its bar back, which left the
notch doing half a job: it could still hide a bar, but hiding one tile at a
time stopped being the interesting question once the whole dashboard could
fold its bars at once. It is gone.

In its place, a pin beside each tile's label. Pinned, that tile keeps its
bar while auto-hide is on — for the one or two tiles whose controls are
wanted at a glance. It sits next to the label rather than out with the gear
and ✕ because it is about the bar, not about the tile's contents, and it
stays faint until the tile is pointed at or the pin is on, so a wall of
unpinned tiles is not a wall of pins.

Fullscreen keeps its own rule: every bar folds, pinned or not, because that
is a mode for watching. What it loses with the notch it gets back better —
the same hover at a tile's top edge peeks a bar there too, and now as an
overlay, so peeking no longer pushes the tile's content down and disturbs
the auto-fit. The peek timer the notch needed goes with it.

Per-tile `headHidden` gives way to `headPinned` in the layout, on disk and
on the server.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

michael merged commit 82e6386c73 into main

2026-09-17 12:44:12 -04:00

michael referenced this pull request

2026-09-20 12:03:27 -04:00

Layouts keep every tile they are given, and show what is on offer #12

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: michael/ProdDash#6