From 8d6fd371c5eb97114a98bae8a7715136277d1c24 Mon Sep 17 00:00:00 2001
From: Alexander Petric <petric.al@gmail.com>
Date: Fri, 10 Jan 2025 10:25:27 -0500
Subject: [PATCH 1/3] fix workspace color picker issue

---
 .../lib/components/settings/ChangeWorkspaceColor.svelte   | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
index dd325f1354d41..d0e39998a28fd 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
@@ -8,11 +8,12 @@
 	import Toggle from '$lib/components/Toggle.svelte'
 
 	let colorEnabled = false
+	let workspaceColor = $usersWorkspaceStore?.workspaces.find(w => w.id === $workspaceStore)?.color
+
 	export let open = false
 
-	$: workspaceColor = $usersWorkspaceStore?.workspaces.find(w => w.id === $workspaceStore)?.color
-	$: colorEnabled = !!workspaceColor
-	$: colorEnabled && !workspaceColor && generateRandomColor()
+	$: workspaceColor
+	$: if (colorEnabled && !workspaceColor) generateRandomColor()
 
 	function generateRandomColor() {
 		const randomColor =
@@ -34,6 +35,7 @@
 		})
 
 		usersWorkspaceStore.set(await WorkspaceService.listUserWorkspaces())
+		workspaceColor = colorToSave
 
 		sendUserToast(`Workspace color updated.`)
 	}

From ac58c038c54893ffe133f65aef474cd85333e7ce Mon Sep 17 00:00:00 2001
From: Alexander Petric <petric.al@gmail.com>
Date: Fri, 10 Jan 2025 10:41:45 -0500
Subject: [PATCH 2/3] removing useless reactive statement

---
 frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
index d0e39998a28fd..a99862d306178 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
@@ -12,7 +12,6 @@
 
 	export let open = false
 
-	$: workspaceColor
 	$: if (colorEnabled && !workspaceColor) generateRandomColor()
 
 	function generateRandomColor() {

From 60523faf3821c02afb01469a6b2d5eeecfed70f6 Mon Sep 17 00:00:00 2001
From: Alexander Petric <petric.al@gmail.com>
Date: Fri, 10 Jan 2025 13:30:27 -0500
Subject: [PATCH 3/3] some ui fixes

---
 .../settings/ChangeWorkspaceColor.svelte      | 24 ++++++++++++++-----
 .../components/sidebar/WorkspaceMenu.svelte   |  2 +-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
index a99862d306178..bf5a85120ec50 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
@@ -8,10 +8,21 @@
 	import Toggle from '$lib/components/Toggle.svelte'
 
 	let colorEnabled = false
-	let workspaceColor = $usersWorkspaceStore?.workspaces.find(w => w.id === $workspaceStore)?.color
+	let workspaceColor: string | undefined = undefined
+	let savedWorkspaceColor: string | undefined = undefined
+	let lastWorkspace: string | undefined = undefined
 
 	export let open = false
 
+	$: if ($usersWorkspaceStore && $workspaceStore !== lastWorkspace) {
+		lastWorkspace = $workspaceStore
+		savedWorkspaceColor = $usersWorkspaceStore.workspaces.find(
+			(w) => w.id === $workspaceStore
+		)?.color
+		workspaceColor = savedWorkspaceColor
+	}
+
+	$: colorEnabled = !!workspaceColor
 	$: if (colorEnabled && !workspaceColor) generateRandomColor()
 
 	function generateRandomColor() {
@@ -34,8 +45,7 @@
 		})
 
 		usersWorkspaceStore.set(await WorkspaceService.listUserWorkspaces())
-		workspaceColor = colorToSave
-
+		savedWorkspaceColor = colorToSave
 		sendUserToast(`Workspace color updated.`)
 	}
 </script>
@@ -43,10 +53,10 @@
 <div>
 	<p class="font-semibold text-sm">Workspace Color</p>
 	<div class="flex flex-row gap-0.5 items-center">
-		{#if workspaceColor}
+		{#if savedWorkspaceColor}
 			<div
 				class="w-5 h-5 rounded-full border border-gray-300 dark:border-gray-600"
-				style="background-color: {workspaceColor}"
+				style="background-color: {savedWorkspaceColor}"
 			/>
 		{:else}
 			<span class="text-xs text-secondary">No color set</span>
@@ -72,7 +82,9 @@
 			<span class="text-secondary text-sm">Workspace color</span>
 			<div class="flex items-center gap-2">
 				<Toggle bind:checked={colorEnabled} options={{ right: 'Enable' }} />
-				<input class="w-10" type="color" bind:value={workspaceColor} disabled={!colorEnabled} />
+				{#if colorEnabled}
+					<input class="w-10" type="color" bind:value={workspaceColor} disabled={!colorEnabled} />
+				{/if}
 				<input
 					type="text"
 					class="w-24 text-sm"
diff --git a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
index 2983bd1246a5d..7b75c77ab123b 100644
--- a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
+++ b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
@@ -80,7 +80,7 @@
 							await toggleSwitchWorkspace(workspace.id)
 						}}
 					>
-						<div class="flex items-center justify-between">
+						<div class="flex items-center justify-between min-w-0 w-full">
 							<div>
 								<div class="text-primary pl-4 truncate text-left text-[1.2em]">{workspace.name}</div>
 								<div class="text-tertiary font-mono pl-4 text-2xs whitespace-nowrap truncate text-left">