From 967f40087d6eac6cc01bd6e2b7e37537ec1b6891 Mon Sep 17 00:00:00 2001
From: work <s.a.fivaz@gmail.com>
Date: Mon, 20 May 2024 19:50:25 +0200
Subject: [PATCH] add goal icons to Select Goal

---
 .../event-panel/event-panel-core/EventPanelCore.svelte     | 4 ++--
 src/lib/components/select/select-item/SelectItem.svelte    | 2 +-
 src/lib/components/task-form/TaskForm.svelte               | 7 ++++++-
 src/routes/dashboard/goals/goal-form/goal-icon/service.ts  | 1 -
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/event-panel-core/EventPanelCore.svelte b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/event-panel-core/EventPanelCore.svelte
index 6a1c40ad..d6676d04 100644
--- a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/event-panel-core/EventPanelCore.svelte
+++ b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/event-panel-core/EventPanelCore.svelte
@@ -55,9 +55,9 @@
 		tailwindColors[event.category.color].hoverBg,
 	)}
 >
-	<div class="flex gap-1">
+	<div class="flex items-center gap-1">
 		{#if event.goal?.icon}
-			<GoalIcon class="h-5 w-5" name={event.goal.icon} />
+			<GoalIcon class="h-4 w-4" name={event.goal.icon} />
 		{/if}
 		<span class="truncate pr-3 font-semibold">
 			{getTitle()}
diff --git a/src/lib/components/select/select-item/SelectItem.svelte b/src/lib/components/select/select-item/SelectItem.svelte
index 34b04829..db7cde59 100644
--- a/src/lib/components/select/select-item/SelectItem.svelte
+++ b/src/lib/components/select/select-item/SelectItem.svelte
@@ -19,7 +19,7 @@
 			'relative cursor-default select-none py-2 pl-3 pr-9',
 		)}
 	>
-		<span class={clsx(active ? 'font-semibold' : 'font-normal', 'block truncate', className)}>
+		<span class={clsx(active ? 'font-semibold' : 'font-normal', 'truncate', className)}>
 			<slot />
 		</span>
 
diff --git a/src/lib/components/task-form/TaskForm.svelte b/src/lib/components/task-form/TaskForm.svelte
index 5f15583b..ca4cb771 100644
--- a/src/lib/components/task-form/TaskForm.svelte
+++ b/src/lib/components/task-form/TaskForm.svelte
@@ -20,6 +20,8 @@
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import { createEventDispatcher } from 'svelte';
 
+	import GoalIcon from '../../../routes/dashboard/goals/goal-form/goal-icon/GoalIcon.svelte';
+
 	export let task: AnyTask;
 
 	export let goals: Goal[];
@@ -155,7 +157,10 @@
 				<span slot="placeholder">{taskIn.goal?.name || 'no goal'}</span>
 				<SelectItem value={null}>no goal</SelectItem>
 				{#each goals as goal (goal)}
-					<SelectItem value={goal}>{goal.name}</SelectItem>
+					<SelectItem class="flex gap-2" value={goal}>
+						<GoalIcon class="h-5 w-5" name={goal.icon} />
+						<span class="w-[calc(100%-20px)] truncate">{goal.name}</span>
+					</SelectItem>
 				{/each}
 			</Select>
 
diff --git a/src/routes/dashboard/goals/goal-form/goal-icon/service.ts b/src/routes/dashboard/goals/goal-form/goal-icon/service.ts
index 45f54fd0..6046f7e5 100644
--- a/src/routes/dashboard/goals/goal-form/goal-icon/service.ts
+++ b/src/routes/dashboard/goals/goal-form/goal-icon/service.ts
@@ -62,7 +62,6 @@ export const icons: GoalIconType[] = [
 	{ component: Dumbbell, name: 'Weightlifting Barbell' },
 	{ component: Paintbrush, name: 'Paintbrush' },
 	{ component: MoneyBill1Wave, name: 'Money' },
-	{ component: Globe, name: 'Globe' },
 	{ component: Book, name: 'Book' },
 	{ component: Stopwatch, name: 'Stopwatch' },
 	{ component: Lightbulb, name: 'Lightbulb', theme: 'default' },