From a50e0d6ff8bad88359847615d46b51adfdd1f0da Mon Sep 17 00:00:00 2001
From: Mihkel Martin Kasterpalu <qpeuitovxg@use.startmail.com>
Date: Tue, 21 Jan 2025 13:46:16 +0200
Subject: [PATCH] Add seperator between names/artists/images, styling tweaks

---
 src/lib/components/DNDGroup.svelte            |  4 ++--
 src/lib/components/ui/separator/index.ts      |  7 ++++++
 .../components/ui/separator/separator.svelte  | 22 +++++++++++++++++++
 src/routes/+layout.svelte                     |  2 +-
 src/routes/+page.svelte                       | 14 ++++++++----
 5 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/components/ui/separator/index.ts
 create mode 100644 src/lib/components/ui/separator/separator.svelte

diff --git a/src/lib/components/DNDGroup.svelte b/src/lib/components/DNDGroup.svelte
index 297e854..85a7fdd 100644
--- a/src/lib/components/DNDGroup.svelte
+++ b/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 }}>
diff --git a/src/lib/components/ui/separator/index.ts b/src/lib/components/ui/separator/index.ts
new file mode 100644
index 0000000..82442d2
--- /dev/null
+++ b/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};
diff --git a/src/lib/components/ui/separator/separator.svelte b/src/lib/components/ui/separator/separator.svelte
new file mode 100644
index 0000000..839494d
--- /dev/null
+++ b/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}
+/>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4760bc0..8f1cac1 100644
--- a/src/routes/+layout.svelte
+++ b/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>,
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4e1a1a0..24861ec 100644
--- a/src/routes/+page.svelte
+++ b/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)}