mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-10-13 16:02:59 +00:00
Guilhem LemouelandClaude Opus 5
8fbff019c0
Each of these kept a header of its own above the page. They register with the band instead: the breadcrumb names what the page is on, and the page's buttons sit at the far end of the one row. They answer the band's width rather than the window's, since the buttons share that row with the breadcrumb. The script editor folds Diff and Settings into the menu it already shows when compact, the app editor drops the panel buttons, Awareness and Export and goes icon-only on Deploy and the mode switch, the flow editor menus its diff, and runs hides its counters. Runs also declares `actionsFlexible`: its search is the one control here that can give width back, and a box that refused to shrink would make it take its maximum instead. The run detail page loses its ActionRow, and the audit log its big title — the breadcrumb says where you are, and the page keeps its tooltip. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
47 lines
1.5 KiB
Svelte
47 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { twMerge } from 'tailwind-merge'
|
|
import Badge from '$lib/components/common/badge/Badge.svelte'
|
|
import Popover from '$lib/components/Popover.svelte'
|
|
import {
|
|
getActiveScriptSettingsBadges,
|
|
type ScriptAdvancedSettingsFields
|
|
} from './scriptSettings'
|
|
|
|
interface Props {
|
|
settings: ScriptAdvancedSettingsFields | undefined
|
|
// When provided, badges become clickable and call this with the badge key
|
|
// (e.g. to open the settings drawer focused on that section).
|
|
onclick?: (key: string) => void
|
|
small?: boolean
|
|
/** On the row that holds the badges — so a script with none of these settings leaves no
|
|
* gap where they would have been. */
|
|
class?: string
|
|
}
|
|
|
|
let { settings, onclick, small = true, class: className = '' }: Props = $props()
|
|
|
|
let badges = $derived(getActiveScriptSettingsBadges(settings))
|
|
</script>
|
|
|
|
{#if badges.length > 0}
|
|
<div class={twMerge('flex flex-row flex-wrap gap-1 items-center', className)}>
|
|
{#each badges as badge (badge.key)}
|
|
<!-- Icon-only chips to save space in crowded top bars; the label and current
|
|
value are shown in the hover popover. -->
|
|
<Popover notClickable placement="bottom">
|
|
<Badge
|
|
color="blue"
|
|
{small}
|
|
icon={{ icon: badge.icon, position: 'left' }}
|
|
clickable={Boolean(onclick)}
|
|
onclick={onclick ? () => onclick?.(badge.key) : undefined}
|
|
aria-label={`${badge.label}: ${badge.detail}`}
|
|
/>
|
|
{#snippet text()}
|
|
<span class="font-semibold">{badge.label}</span> — {badge.detail}
|
|
{/snippet}
|
|
</Popover>
|
|
{/each}
|
|
</div>
|
|
{/if}
|