Add seperator between names/artists/images, styling tweaks

src/lib/components/DNDGroup.svelte

@@ -22,11 +22,11 @@
 		items,
 		flipDurationMs,
 		type: type,
-		dropTargetStyle: { outline: 'none' }
+		dropTargetStyle: {}
 	}}
 	onconsider={handleDndConsider}
 	onfinalize={handleDndFinalize}
-	class="grid grid-cols-3 items-center gap-16"
+	class="grid grid-cols-3 items-center gap-14"
 >
 	{#each items as item, i (item.id)}
 		<div animate:flip={{ duration: flipDurationMs, easing: expoOut }}>

src/lib/components/ui/separator/index.ts

@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};

src/lib/components/ui/separator/separator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "horizontal",
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	class={cn(
+		"bg-border shrink-0",
+		orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
+		className
+	)}
+	{orientation}
+	{...restProps}
+/>

src/routes/+layout.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <div class="flex min-h-screen flex-col items-center justify-center">
-	<header class="mb-12 flex flex-col items-center">
+	<header class="mb-24 flex flex-col items-center">
 		<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">Paku biiti</h1>
 		<p class="text-xl text-muted-foreground">
 			Lohista kokku õiged albumi <span class="text-orange-400">nimed</span>,

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Separator } from '$lib/components/ui/separator/index.js';
 	import LoaderCircle from 'lucide-svelte/icons/loader-circle';
 	import { Button } from '$lib/components/ui/button/index.js';
 	import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
@@ -55,7 +56,7 @@
 			</AlertDialog.Title>
 			<AlertDialog.Description>
 				{#if data.stage === 0}
-					Valus. <strong>põrusid esimesel katsel.</strong>
+					Põrusid esimesel katsel.
 				{:else}
 					Vastasid õigesti <strong>{data.stage} korda.</strong>
 				{/if}
@@ -73,21 +74,22 @@
 	action="?/submit"
 	method="POST"
 	use:enhance
-	class="grid w-full gap-8 px-8 transition-all {loading || data?.playing === false
+	class="grid w-full gap-6 px-8 transition-all {loading || data?.playing === false
 		? 'grayscale'
 		: ''}"
 >
 	{#if data?.streamed?.albums}
 		{#await data.streamed.albums}
 			{#each { length: 2 } as _}
-				<section class="grid grid-cols-3 items-center gap-16">
+				<section class="grid grid-cols-3 items-center gap-14">
 					{#each { length: 3 } as _}
 						<Skeleton class="h-[6rem] w-full rounded-xl " />
 					{/each}
 				</section>
+				<Separator />
 			{/each}
 
-			<section class="grid grid-cols-3 items-center gap-16">
+			<section class="grid grid-cols-3 items-center gap-14">
 				{#each { length: 3 } as _}
 					<Skeleton class="aspect-square h-auto max-w-full rounded-xl object-cover" />
 				{/each}
@@ -96,14 +98,18 @@
 			{@render footer(true)}
 		{:then albums}
 			<DndGroup items={albums.names} type="names"></DndGroup>
+			<Separator />
 			<DndGroup items={albums.artists} type="artists"></DndGroup>
+			<Separator />
 			<DndGroup items={albums.images} image type="images"></DndGroup>
 
 			{@render footer(false)}
 		{/await}
 	{:else}
 		<DndGroup items={oldAlbums.names} type="names"></DndGroup>
+		<Separator />
 		<DndGroup items={oldAlbums.artists} type="artists"></DndGroup>
+		<Separator />
 		<DndGroup items={oldAlbums.images} image type="images"></DndGroup>
 
 		{@render footer(false)}