Rewrite website as a Hyprland desktop

src/lib/components/desktop/DesktopIcons.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import { desktop } from '#lib/content';
+	import { runDesktopAction } from '#lib/desktop/actions';
+</script>
+
+<nav class="desktop-icons" aria-label="Desktop">
+	{#each desktop.icons as item (item.label)}
+		<button class="desktop-icon" title={item.label} onclick={() => runDesktopAction(item.open)}>
+			<span class="icon-box">
+				<Icon icon={item.icon} width="36" />
+			</span>
+			<span class="icon-label">{item.label}</span>
+		</button>
+	{/each}
+</nav>
+
+<style>
+	.desktop-icons {
+		display: grid;
+		grid-auto-flow: column;
+		grid-template-rows: repeat(auto-fill, 104px);
+		grid-auto-columns: 112px;
+		gap: 6px;
+		height: 100%;
+		padding: 4px;
+		align-content: start;
+	}
+
+	.desktop-icon {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 7px;
+		padding: 6px 4px;
+		background: none;
+		border: none;
+		color: var(--foreground);
+	}
+
+	.desktop-icon:focus-visible {
+		outline: none;
+	}
+
+	.icon-box {
+		display: grid;
+		place-items: center;
+		width: 56px;
+		height: 56px;
+		background: var(--background);
+		border: 2px solid var(--accent);
+		color: var(--accent);
+		transition:
+			background 0.12s,
+			color 0.12s,
+			transform 0.12s;
+	}
+
+	.desktop-icon:hover .icon-box,
+	.desktop-icon:focus-visible .icon-box {
+		background: var(--accent);
+		color: var(--background);
+	}
+
+	.desktop-icon:active .icon-box {
+		transform: scale(0.94);
+	}
+
+	.icon-label {
+		max-width: 100%;
+		padding: 1px 6px;
+		background: color-mix(in srgb, var(--background) 88%, transparent);
+		font-size: 13px;
+		line-height: 1.35;
+		text-align: center;
+		word-break: break-word;
+	}
+
+	.desktop-icon:hover .icon-label,
+	.desktop-icon:focus-visible .icon-label {
+		background: var(--accent);
+		color: var(--background);
+	}
+</style>