Files
windmill/frontend/src/lib/components/PageHeaderContent.svelte
T
Guilhem LemouelandClaude Opus 5 283cf48ccf feat: one band, one workspace part, and the pickers that hang off it
The band is a single element whose placement is styled rather than branched: a page
registering a side-panel inset used to swap it between two `{#if}` arms, destroying the
header and rebuilding it a frame later — a blink of no header with the content sliding
up into the gap.

The workspace and its fork become one breadcrumb part: the name leads home (inert in a
session, where the workspace is the session's scope rather than a place to go) and one
chevron opens the picker, which already expands a family to reach its forks. The
picker's panel hangs from the part's left edge, opens with the active family expanded,
and closes before the switch runs — the switch renames the workspace, which moves the
trigger the panel hangs from, and floating-ui was chasing it across the viewport.

The item's path is a plain label rather than a row of pickers: same separators and
weight, and a click copies it with its own confirmation. The kind icon goes, the page
below says what kind it is.

Around them: a "prod" badge for a root workspace, the session's acting fork beside the
session's name rather than in the breadcrumb, the edit-in-dev affordance as a button in
the header, the drafts count as a sentence, and a fade when the workspace changes under
a page that stays mounted.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-23 09:07:46 +02:00

40 lines
917 B
Svelte

<!--
@component
Fills the layout's page header from the route that mounts it: the breadcrumb (an item's path, or a
section name for a list) and the page's own buttons. Renders nothing itself.
Only a route page mounts this. An editor nested in a session pane or a drawer must not take over
the header, so nesting is decided by the caller rather than guessed from context.
-->
<script lang="ts">
import { onMount } from 'svelte'
import { pageHeader, type PageHeaderContent } from './pageHeaderRegistry.svelte'
let {
item,
section,
hint,
actions,
actionsOrder,
contexts,
barPlacement,
actingWorkspaceId,
barRightInset
}: PageHeaderContent = $props()
onMount(() => {
const id = pageHeader.register(() => ({
item,
section,
hint,
actions,
actionsOrder,
contexts,
barPlacement,
actingWorkspaceId,
barRightInset
}))
return () => pageHeader.release(id)
})
</script>