workspace color fixes part2 (#5045)

* fix workspace color picker issue

* removing useless reactive statement

* some ui fixes

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"

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">