Add archived badge to flow details page header (#6540)

* feat(flow): Add archived badge to flow details page header

- Display 'Archived' badge in the top bar when a flow is archived
- Remove the redundant archived alert from the content area
- Badge uses red color with outlined variant to indicate archived status

Co-authored-by: windmill-internal-app[bot] <windmill-internal-app[bot]@users.noreply.github.com>

* fix(flow): Replace archived badge with alert at top of page

- Removed the 'Archived' badge from the flow details header
- Added an Alert component at the top of the page content area
- Matches the pattern used in script details pages for consistency

Co-authored-by: centdix <centdix@users.noreply.github.com>

---------

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Co-authored-by: windmill-internal-app[bot] <windmill-internal-app[bot]@users.noreply.github.com>
Co-authored-by: centdix <centdix@users.noreply.github.com>
This commit is contained in:
claude[bot]
2025-09-05 11:32:31 +00:00
committed by GitHub
co-authored by centdix windmill-internal-app[bot]
parent a5f4d23ca7
commit ee5e55af3e
@@ -14,7 +14,7 @@
import DetailPageLayout from '$lib/components/details/DetailPageLayout.svelte'
import { goto } from '$lib/navigation'
import { base } from '$lib/base'
import { Alert, Badge as HeaderBadge } from '$lib/components/common'
import { Badge as HeaderBadge, Alert } from '$lib/components/common'
import MoveDrawer from '$lib/components/MoveDrawer.svelte'
import RunForm from '$lib/components/RunForm.svelte'
import ShareModal from '$lib/components/ShareModal.svelte'
@@ -501,6 +501,10 @@
{#if flow}
<div class="flex-col flex h-full justify-between">
<div class="p-8 w-full max-w-3xl mx-auto gap-2 bg-surface">
{#if flow?.archived}
<Alert type="error" title="Archived">This flow was archived</Alert>
{/if}
<div class="mb-1">
{#if !emptyString(flow?.description)}
<GfmMarkdown md={defaultIfEmptyString(flow?.description, 'No description')} />
@@ -582,11 +586,6 @@
<span class="text-sm text-tertiary">
Edited <TimeAgo date={flow.edited_at ?? ''} /> by {flow.edited_by}
</span>
{#if flow.archived}
<div class=""></div>
<Alert type="error" title="Archived">This flow was archived</Alert>
{/if}
</div>
</div>
<div class="mt-8">