Hide unused workspaces

src/lib/components/shell/Workspaces.svelte

@@ -3,30 +3,18 @@
 	import { desktop } from '#lib/content';
 	import { activeWorkspace, openPage } from '#lib/desktop/actions';
 
-	const workspaceSlots = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+	const workspaces = [...desktop.workspaces].sort((first, second) => first.number - second.number);
 
 	const currentWorkspace = $derived(activeWorkspace(page.url.pathname));
-
-	function workspaceFor(number: number) {
-		return desktop.workspaces.find((workspace) => workspace.number === number);
-	}
 </script>
 
 <div class="workspaces">
-	{#each workspaceSlots as number (number)}
+	{#each workspaces as workspace (workspace.number)}
-		{@const workspace = workspaceFor(number)}
+		<button class="workspace" title={workspace.name} onclick={() => openPage(workspace.path)}>
-		{@const isFocused = currentWorkspace?.number === number}
+			{#if currentWorkspace?.number === workspace.number}
-		<button
-			class="workspace"
-			class:occupied={!!workspace}
-			title={workspace?.name}
-			disabled={!workspace}
-			onclick={() => workspace && openPage(workspace.path)}
-		>
-			{#if isFocused}
 				<span class="focused-marker"></span>
 			{:else}
-				{number}
+				{workspace.number}
 			{/if}
 		</button>
 	{/each}
@@ -47,26 +35,13 @@
 		padding: 0;
 		background: none;
 		border: none;
-		opacity: 0.5;
 	}
 
-	.workspace:disabled {
+	.workspace:hover {
-		cursor: default;
-	}
-
-	.workspace.occupied {
-		opacity: 1;
-	}
-
-	.workspace.occupied:hover {
 		color: var(--accent);
 	}
 
 	@media (max-width: 640px) {
-		.workspace:not(.occupied) {
-			display: none;
-		}
-
 		.workspace {
 			width: 22px;
 		}