From 90cccc53b45ebaa66c52b2f3576000799baeb9e9 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 29 Aug 2024 08:34:04 +0200
Subject: [PATCH] feat(frontend): add a favorite button on detail pages (#4297)

* feat(frontend): add a favorite buttons on detail pages

* feat(frontend): remove typo
---
 .../(logged)/flows/get/[...path]/+page.svelte | 21 ++++++++++++++-
 .../scripts/get/[...hash]/+page.svelte        | 27 +++++++++++++++++--
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
index ca007302ce..5832e9e444 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -54,6 +54,7 @@
 	import GfmMarkdown from '$lib/components/GfmMarkdown.svelte'
 	import FlowHistory from '$lib/components/flows/FlowHistory.svelte'
 	import EmailTriggerPanel from '$lib/components/details/EmailTriggerPanel.svelte'
+	import Star from '$lib/components/Star.svelte'
 
 	let flow: Flow | undefined
 	let can_write = false
@@ -93,8 +94,15 @@
 	}
 
 	let schedule: Schedule | undefined = undefined
+	let starred: boolean | undefined = undefined
+
 	async function loadFlow(): Promise<void> {
-		flow = await FlowService.getFlowByPath({ workspace: $workspaceStore!, path })
+		flow = await FlowService.getFlowByPath({
+			workspace: $workspaceStore!,
+			path,
+			withStarredInfo: true
+		})
+		starred = flow.starred
 		if (!flow.path.startsWith(`u/${$userStore?.username}`) && flow.path.split('/').length > 2) {
 			invisible_to_owner = flow.visible_to_runner_only
 		}
@@ -351,6 +359,17 @@
 				errorHandlerKind="flow"
 				tag={flow.tag}
 			>
+				{#if $workspaceStore}
+					<Star
+						kind="flow"
+						path={flow.path}
+						{starred}
+						workspace_id={$workspaceStore}
+						on:starred={() => {
+							starred = !starred
+						}}
+					/>
+				{/if}
 				{#if flow?.value?.priority != undefined}
 					<div class="hidden md:block">
 						<HeaderBadge color="blue" variant="outlined" size="xs">
diff --git a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
index b8f8ade638..636147793c 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -71,6 +71,7 @@
 	import { loadScriptSchedule, type ScriptSchedule } from '$lib/scripts'
 	import GfmMarkdown from '$lib/components/GfmMarkdown.svelte'
 	import EmailTriggerPanel from '$lib/components/details/EmailTriggerPanel.svelte'
+	import Star from '$lib/components/Star.svelte'
 
 	let script: Script | undefined
 	let topHash: string | undefined
@@ -141,12 +142,23 @@
 		}
 	}
 	let schedule: ScriptSchedule | undefined = undefined
+	let starred: boolean | undefined = undefined
 
 	async function loadScript(hash: string): Promise<void> {
 		try {
-			script = await ScriptService.getScriptByHash({ workspace: $workspaceStore!, hash })
+			script = await ScriptService.getScriptByHash({
+				workspace: $workspaceStore!,
+				hash,
+				withStarredInfo: true
+			})
+			starred = script.starred
 		} catch {
-			script = await ScriptService.getScriptByPath({ workspace: $workspaceStore!, path: hash })
+			script = await ScriptService.getScriptByPath({
+				workspace: $workspaceStore!,
+				path: hash,
+				withStarredInfo: true
+			})
+			starred = script.starred
 			hash = script.hash
 		}
 		can_write =
@@ -504,6 +516,17 @@
 					scriptOrFlowPath={script.path}
 					tag={script.tag}
 				>
+					{#if $workspaceStore}
+						<Star
+							kind="script"
+							path={script.path}
+							{starred}
+							workspace_id={$workspaceStore}
+							on:starred={() => {
+								starred = !starred
+							}}
+						/>
+					{/if}
 					{#if script.codebase}
 						<Badge
 							>bundle<Tooltip