Rewrite website as a Hyprland desktop

src/lib/components/ui/Panel.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Icon from '@iconify/svelte';
+
+	let { title, icon, href, children }: { title?: string; icon?: string; href?: string; children?: Snippet } = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'article'}
+	class="panel"
+	class:linked={!!href}
+	{href}
+	target={href?.startsWith('http') ? '_blank' : undefined}
+	rel={href?.startsWith('http') ? 'noopener noreferrer' : undefined}
+>
+	{#if title}
+		<header class="panel-title">
+			{#if icon}
+				<Icon {icon} width="16" />
+			{/if}
+			<span>{title}</span>
+		</header>
+	{/if}
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.panel {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding: 0.8rem 0.9rem;
+		border: 1px solid color-mix(in srgb, var(--foreground) 22%, transparent);
+		background: color-mix(in srgb, var(--foreground) 3%, transparent);
+	}
+
+	.linked:hover {
+		border-color: var(--accent);
+		background: color-mix(in srgb, var(--foreground) 7%, transparent);
+	}
+
+	.panel-title {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		color: var(--accent);
+		font-weight: 700;
+	}
+</style>