feat: developers collapse, operators detach

One control each, rather than three for everyone. A developer switches the sidebar
between icon-only and full width and never detaches it; an operator, who has no
icon-only rail to collapse to, hides it instead — by the button in its footer or by the
same drag that collapses it for a developer.

The way back survives either way: a detached sidebar keeps its "Show sidebar" button for
anyone, so a developer who detached before this was so is not left with a sidebar they
cannot return.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Guilhem Lemouel
2026-09-23 17:50:04 +02:00
co-authored by Claude Opus 5
parent 8f0b16e933
commit 4b2d9beaf6
@@ -1056,23 +1056,28 @@
<!-- Windmill brand mark anchoring the sidebar bottom (the header slot is taken
by the workspace picker). -->
<!-- The page header's first control: one toggle for the sidebar, shown or hidden. -->
<!-- Detaching is the operator's control: they have no icon-only rail to collapse to, so hiding the
sidebar is how they give the page its width back. A developer collapses instead, and never
detaches — but one who detached before this was so keeps the way back, or they would be stuck
with a sidebar they cannot return. -->
{#snippet sidebarToggle()}
{@const hidden = navDetached.val}
<Tooltip class="flex" placement="bottom" small>
<button
class={SIDEBAR_ICON_BUTTON}
aria-label={hidden ? 'Show sidebar' : 'Hide sidebar'}
onclick={() => setDetached(!hidden)}
>
{#if hidden}
<PanelLeft size={16} class="flex-shrink-0 text-hint" />
{:else}
<PanelLeftDashed size={16} class="flex-shrink-0 text-hint" />
{/if}
</button>
{#snippet text()}{hidden ? 'Show sidebar' : 'Hide sidebar'}{/snippet}
</Tooltip>
{#if hidden || $userStore?.operator}
<Tooltip class="flex" placement="bottom" small>
<button
class={SIDEBAR_ICON_BUTTON}
aria-label={hidden ? 'Show sidebar' : 'Hide sidebar'}
onclick={() => setDetached(!hidden)}
>
{#if hidden}
<PanelLeft size={16} class="flex-shrink-0 text-hint" />
{:else}
<PanelLeftDashed size={16} class="flex-shrink-0 text-hint" />
{/if}
</button>
{#snippet text()}{hidden ? 'Show sidebar' : 'Hide sidebar'}{/snippet}
</Tooltip>
{/if}
{/snippet}
{#snippet brandMark(collapsed: boolean)}