From 859bee78c031acb69e5337d354dece454d00e4c3 Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Tue, 2 Jun 2026 14:39:53 +0200
Subject: [PATCH] feat: re-add Draft and Draft only badges on home page rows

---
 frontend/src/lib/components/DraftBadge.svelte | 38 +++++++++++++++++++
 .../lib/components/common/table/AppRow.svelte |  2 +
 .../components/common/table/FlowRow.svelte    |  4 +-
 .../components/common/table/ScriptRow.svelte  |  4 +-
 4 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/lib/components/DraftBadge.svelte

diff --git a/frontend/src/lib/components/DraftBadge.svelte b/frontend/src/lib/components/DraftBadge.svelte
new file mode 100644
index 0000000000..c84b319798
--- /dev/null
+++ b/frontend/src/lib/components/DraftBadge.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	// Renders a small status pill on home-page rows when the authed user
+	// has a per-user draft on the entity. `is_draft` is the per-user
+	// signal that replaced main's workspace-wide `has_draft` (the field
+	// rename mirrors the get-by-path overlay's `is_draft` flag).
+	//
+	//   draft_only=true  → "Draft only"  (entity has never been deployed)
+	//   draft_only=false → "+Draft"      (deployed and user has a draft on top)
+	//
+	// Nothing renders when `is_draft` is false.
+	import Popover from './Popover.svelte'
+	import { Badge } from './common'
+
+	interface Props {
+		is_draft?: boolean
+		draft_only?: boolean
+	}
+
+	let { is_draft = false, draft_only = false }: Props = $props()
+</script>
+
+{#if is_draft}
+	{#if draft_only}
+		<Popover notClickable>
+			{#snippet text()}
+				Never deployed and is only a draft
+			{/snippet}
+			<Badge small color="indigo">Draft only</Badge>
+		</Popover>
+	{:else}
+		<Popover notClickable>
+			{#snippet text()}
+				Is deployed and has a draft
+			{/snippet}
+			<Badge small color="indigo">+Draft</Badge>
+		</Popover>
+	{/if}
+{/if}
diff --git a/frontend/src/lib/components/common/table/AppRow.svelte b/frontend/src/lib/components/common/table/AppRow.svelte
index 11d09a69ca..a3b00292f7 100644
--- a/frontend/src/lib/components/common/table/AppRow.svelte
+++ b/frontend/src/lib/components/common/table/AppRow.svelte
@@ -3,6 +3,7 @@
 	import Dropdown from '$lib/components/DropdownV2.svelte'
 	import type MoveDrawer from '$lib/components/MoveDrawer.svelte'
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
+	import DraftBadge from '$lib/components/DraftBadge.svelte'
 	import type ShareModal from '$lib/components/ShareModal.svelte'
 	import { AppService, type ListableApp } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
@@ -114,6 +115,7 @@
 			<Badge small icon={{ icon: FileJson }}>Raw</Badge>
 		{/if}
 		<SharedBadge canWrite={app.canWrite} extraPerms={app.extra_perms} />
+		<DraftBadge is_draft={app.is_draft} draft_only={app.draft_only} />
 		{#if app.labels?.length}
 			<div class="flex items-center gap-0.5">
 				{#each app.labels.slice(0, 3) as label}
diff --git a/frontend/src/lib/components/common/table/FlowRow.svelte b/frontend/src/lib/components/common/table/FlowRow.svelte
index d50207a27a..e83ed43985 100644
--- a/frontend/src/lib/components/common/table/FlowRow.svelte
+++ b/frontend/src/lib/components/common/table/FlowRow.svelte
@@ -5,6 +5,7 @@
 	import type MoveDrawer from '$lib/components/MoveDrawer.svelte'
 	import ScheduleEditor from '$lib/components/triggers/schedules/ScheduleEditor.svelte'
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
+	import DraftBadge from '$lib/components/DraftBadge.svelte'
 	import type ShareModal from '$lib/components/ShareModal.svelte'
 	import { FlowService, type Flow } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
@@ -39,7 +40,7 @@
 	import { isCloudHosted } from '$lib/cloud'
 
 	interface Props {
-		flow: Flow & { draft_only?: boolean; canWrite: boolean }
+		flow: Flow & { draft_only?: boolean; is_draft?: boolean; canWrite: boolean }
 		marked: string | undefined
 		shareModal: ShareModal
 		moveDrawer: MoveDrawer
@@ -133,6 +134,7 @@
 			<Badge color="red" baseClass="border">archived</Badge>
 		{/if}
 		<SharedBadge canWrite={flow.canWrite} extraPerms={flow.extra_perms} />
+		<DraftBadge is_draft={flow.is_draft} draft_only={flow.draft_only} />
 		{#if flow.labels?.length}
 			<div class="flex items-center gap-0.5">
 				{#each flow.labels.slice(0, 3) as label}
diff --git a/frontend/src/lib/components/common/table/ScriptRow.svelte b/frontend/src/lib/components/common/table/ScriptRow.svelte
index 794b35e188..9eb295a621 100644
--- a/frontend/src/lib/components/common/table/ScriptRow.svelte
+++ b/frontend/src/lib/components/common/table/ScriptRow.svelte
@@ -5,6 +5,7 @@
 	import type MoveDrawer from '$lib/components/MoveDrawer.svelte'
 	import ScheduleEditor from '$lib/components/triggers/schedules/ScheduleEditor.svelte'
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
+	import DraftBadge from '$lib/components/DraftBadge.svelte'
 	import type ShareModal from '$lib/components/ShareModal.svelte'
 
 	import { ScriptService, type Script } from '$lib/gen'
@@ -51,7 +52,7 @@
 	import { isCloudHosted } from '$lib/cloud'
 
 	interface Props {
-		script: Script & { canWrite: boolean; use_codebase: boolean }
+		script: Script & { canWrite: boolean; use_codebase: boolean; is_draft?: boolean }
 		marked: string | undefined
 		shareModal: ShareModal
 		moveDrawer: MoveDrawer
@@ -180,6 +181,7 @@
 			>
 		{/if}
 		<SharedBadge canWrite={script.canWrite} extraPerms={script.extra_perms} />
+		<DraftBadge is_draft={script.is_draft} draft_only={script.draft_only} />
 		{#if script.labels?.length}
 			<div class="flex items-center gap-0.5">
 				{#each script.labels.slice(0, 3) as label}