feat: make windows movable

package.json

@@ -40,6 +40,7 @@
   "type": "module",
   "dependencies": {
     "@atproto/api": "^0.13.12",
+    "@neodrag/svelte": "^2.0.6",
     "@std/toml": "npm:@jsr/std__toml",
     "base64url": "^3.0.1",
     "nanoid": "^5.0.8",

src/components/window.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { draggable } from '@neodrag/svelte';
+
 	export let title: string | undefined = undefined;
 	export let iconUri: string = '';
 	export let id: string = '';
@@ -22,6 +24,7 @@
 </script>
 
 <div
+	use:draggable={{applyUserSelectHack: true, handle: '.window-titlebar'}}
 	class="
         flex flex-col {sticky ? 'md:sticky md:-top-9' : ''} {center ? "mx-auto" : ""}
         max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl min-w-[30ch] lg:min-w-[40ch] w-full md:w-fit [height:fit-content]
@@ -33,8 +36,9 @@
 	{#if title !== undefined}
 		<div
 			class="
-				p-1 border-ralsei-white border-8
+				window-titlebar p-1 border-ralsei-white border-8
 				bg-gradient-to-l from-ralsei-pink-neon to-ralsei-black to-75%
+				cursor-move
 			"
 			style="border-style: hidden hidden ridge hidden;"
 		>

src/routes/+layout.svelte

@@ -159,7 +159,7 @@
 			<div class="navbox">
 				<p><span class="text-ralsei-green-light text-shadow-green">{data.visitCount}</span> visit(s)</p>
 			</div>
-			<div class="navbox [gap:0.25rem_!important]">
+			<div class="navbox !gap-1">
 				<a class="align-middle hover:underline" href="/entries/_rss">rss</a>
 				/
 				<a class="align-middle hover:underline" href="/entries/_jsonfeed">jsonfeed</a>