Rewrite website as a Hyprland desktop

src/lib/components/shell/Battery.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Icon from '@iconify/svelte';
+	import { batteryAt, batteryIcon, type BatteryState } from '#lib/desktop/battery';
+
+	let battery = $state<BatteryState | null>(null);
+
+	const isLow = $derived(!!battery && battery.level < 20 && !battery.charging);
+
+	onMount(() => {
+		battery = batteryAt(new Date());
+		const timer = setInterval(() => (battery = batteryAt(new Date())), 10000);
+		return () => clearInterval(timer);
+	});
+</script>
+
+{#if battery}
+	<span
+		class="battery"
+		class:low={isLow}
+		class:charging={battery.charging}
+		title="Battery {battery.level}% {battery.charging ? '(charging)' : ''}"
+	>
+		<Icon icon={batteryIcon(battery)} width="18" />
+		<span class="level">{battery.level}%</span>
+	</span>
+{/if}
+
+<style>
+	.battery {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0 0.4rem;
+	}
+
+	.charging {
+		color: var(--green);
+	}
+
+	.low {
+		color: var(--red);
+	}
+
+	@media (max-width: 640px) {
+		.level {
+			display: none;
+		}
+	}
+</style>