diff --git a/frontend/src/lib/components/DeployButton.svelte b/frontend/src/lib/components/DeployButton.svelte index d8828d515a..da1ba5dd42 100644 --- a/frontend/src/lib/components/DeployButton.svelte +++ b/frontend/src/lib/components/DeployButton.svelte @@ -6,7 +6,8 @@ const { loading = false, loadingSave = false, - dropdownItems = [] + dropdownItems = [], + unifiedSize = 'md' }: { loading?: boolean loadingSave?: boolean @@ -14,6 +15,7 @@ label: string onClick: () => void }> + unifiedSize?: 'sm' | 'md' | 'lg' } = $props() const dispatch = createEventDispatcher() @@ -28,7 +30,7 @@ disabled={loading} loading={loadingSave} variant="accent" - unifiedSize="md" + {unifiedSize} startIcon={{ icon: Save }} on:click={() => dispatch('save')} {dropdownItems} diff --git a/frontend/src/lib/components/EditorHeader.svelte b/frontend/src/lib/components/EditorHeader.svelte index 7812e8a6a5..b6e0bb4c82 100644 --- a/frontend/src/lib/components/EditorHeader.svelte +++ b/frontend/src/lib/components/EditorHeader.svelte @@ -43,6 +43,10 @@ * inline. Breadcrumb navigation still works — only the rename UI is * gated. */ pathEditable?: boolean + /** When true, the whole path/breadcrumb row (and its pen popover) is + * dropped, leaving only the summary. Used by the condensed session- + * preview top bar to save vertical room. */ + hidePath?: boolean /** Workspace whose items the breadcrumb picker lists. Session live * editors pass their acting workspace so the picker isn't scoped to the * navigation workspace; falls back to $workspaceStore in the picker. */ @@ -60,6 +64,7 @@ penVisibility = 'hover', summaryEditable = true, pathEditable = true, + hidePath = false, workspaceId }: Props = $props() @@ -135,109 +140,111 @@
-
-
+ {/snippet} + + {/if} +
+ {/if}
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte index f66d2e508b..b6a5c6611f 100644 --- a/frontend/src/lib/components/FlowBuilder.svelte +++ b/frontend/src/lib/components/FlowBuilder.svelte @@ -136,9 +136,14 @@ loadedFromDraft = false, othersDraftsCount = 0, onOpenOthersDrafts, - onTestJob + onTestJob, + condensedHeader = false }: FlowBuilderProps = $props() + // Top-bar button size + bar height. Condensed (session preview) uses the + // smallest well-supported unified size (`sm`) so the bar is thinner. + const headerBtnSize = $derived(condensedHeader ? 'sm' : 'md') + // The workspace this editor operates on: deploy, save-draft, trigger loading // and the AutosaveIndicator all target it. Falls back to the global store, so // the full-page editor is unchanged; the sessions preview overrides it to the @@ -1101,7 +1106,9 @@
@@ -1110,6 +1117,7 @@ bind:path={$pathStore} savedPath={initialPath} onBehalfOfEmail={$savedOnBehalfOfEmail} + hidePath={condensedHeader} workspaceId={autosaveWorkspace} onNavigate={(item) => onNavigate?.(item)} /> @@ -1132,7 +1140,7 @@ {/if}
- + {#if $tutorialsToDo.includes(getTutorialIndex('flow-live-tutorial')) || $tutorialsToDo.includes(getTutorialIndex('troubleshoot-flow'))}
@@ -1182,6 +1191,7 @@ {#snippet previewButtons()} { select('Trigger') handleSelectTriggerFromKind(triggersState, triggersCount, initialPath, e.detail.kind) diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte index 7b12c02f51..a334ac4c50 100644 --- a/frontend/src/lib/components/ScriptBuilder.svelte +++ b/frontend/src/lib/components/ScriptBuilder.svelte @@ -140,9 +140,14 @@ onResetToDeployed, loadedFromDraft = false, othersDraftsCount = 0, - onOpenOthersDrafts + onOpenOthersDrafts, + condensedHeader = false }: ScriptBuilderProps = $props() + // Top-bar button size + bar height. Condensed (session preview) uses the + // smallest well-supported unified size (`sm`) so the bar is thinner. + const headerBtnSize = $derived(condensedHeader ? 'sm' : 'md') + export function getInitialAndModifiedValues(): SavedAndModifiedValue { return { savedValue: savedScript, @@ -1898,7 +1903,10 @@
-
+
{#if customUi?.topBar?.path != false}
@@ -1919,6 +1927,7 @@ kind="script" summaryEditable={customUi?.topBar?.editableSummary != false} pathEditable={customUi?.topBar?.editablePath != false} + hidePath={condensedHeader} workspaceId={autosaveWorkspace} onNavigate={(item) => onNavigate?.(item)} /> @@ -1954,7 +1963,7 @@ aiId="script-builder-settings" aiDescription="Script builder settings to configure metadata, runtime, triggers, and generated UI." variant="default" - unifiedSize="md" + unifiedSize={headerBtnSize} on:click={() => (metadataOpen = true)} startIcon={{ icon: Settings }} iconOnly={compactTopbar} @@ -1977,7 +1986,7 @@
@@ -2027,6 +2037,7 @@ handleEditScript(false, detail)} /> diff --git a/frontend/src/lib/components/WorkerTagSelect.svelte b/frontend/src/lib/components/WorkerTagSelect.svelte index 214b378dbd..fe00f07f9d 100644 --- a/frontend/src/lib/components/WorkerTagSelect.svelte +++ b/frontend/src/lib/components/WorkerTagSelect.svelte @@ -17,6 +17,7 @@ disabled = false, placeholder, inputClass, + size = 'md', workspaceId = undefined }: { tag: string | undefined @@ -27,6 +28,9 @@ language?: string class?: string inputClass?: string + /** Forwarded to the underlying Select — controls the input height. The + * condensed session top bar passes `sm` to match its smaller buttons. */ + size?: 'sm' | 'md' | 'lg' // Workspace to read custom tags and worker availability from. Defaults to // $workspaceStore. Session editors act on a workspace that differs from the // navigation one, so they pass their effective workspace to keep the tag @@ -164,6 +168,7 @@ clearable class="w-full" bind:open + {size} {inputClass} {disabled} placeholder={nullTag ? nullTag : (placeholder ?? 'lang default')} diff --git a/frontend/src/lib/components/flow_builder.ts b/frontend/src/lib/components/flow_builder.ts index 48340e937e..ce848c6f83 100644 --- a/frontend/src/lib/components/flow_builder.ts +++ b/frontend/src/lib/components/flow_builder.ts @@ -62,4 +62,8 @@ export type FlowBuilderProps = { // Fired whenever a test run is started from the flow editor, with the // preview job id. Used by whitelabel embedders to track test jobs. onTestJob?: (e: { jobId: string }) => void + // Condensed top bar: smaller (sm) buttons, a shorter bar, and the + // EditorHeader's path/breadcrumb row dropped (summary only). Used by the + // session preview to save vertical room. + condensedHeader?: boolean } diff --git a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte index 2f1c016385..dbebc82f70 100644 --- a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte +++ b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte @@ -1,5 +1,6 @@