Rewrite website as a Hyprland desktop

src/lib/components/shell/Workspaces.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { desktop } from '#lib/content';
+	import { activeWorkspace, openPage } from '#lib/desktop/actions';
+
+	const workspaceSlots = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+	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)}
+		{@const workspace = workspaceFor(number)}
+		{@const isFocused = currentWorkspace?.number === 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}
+			{/if}
+		</button>
+	{/each}
+</div>
+
+<style>
+	.workspaces {
+		display: flex;
+		align-items: center;
+		margin-left: 4px;
+	}
+
+	.workspace {
+		display: grid;
+		place-items: center;
+		width: 26px;
+		height: var(--bar-height);
+		padding: 0;
+		background: none;
+		border: none;
+		opacity: 0.5;
+	}
+
+	.workspace:disabled {
+		cursor: default;
+	}
+
+	.workspace.occupied {
+		opacity: 1;
+	}
+
+	.workspace.occupied:hover {
+		color: var(--accent);
+	}
+
+	@media (max-width: 640px) {
+		.workspace:not(.occupied) {
+			display: none;
+		}
+
+		.workspace {
+			width: 20px;
+		}
+	}
+
+	.focused-marker {
+		width: 12px;
+		height: 12px;
+		border-radius: 2px;
+		background: currentColor;
+	}
+</style>