Fix linter errors and types

src/lib/components/DNDGroup.svelte

@@ -1,19 +1,25 @@
 <script lang="ts">
-	import * as Card from '$lib/components/ui/card/index.js';
-	import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
 	import { expoOut } from 'svelte/easing';
-	import { truncate } from '$lib/utils';
 	import { fade } from 'svelte/transition';
+	import { truncate } from '$lib/utils';
+	import type { AlbumDataField } from '$lib/types';
+	import {
+		dndzone,
+		SHADOW_ITEM_MARKER_PROPERTY_NAME,
+		type DndEvent,
+		type Item
+	} from 'svelte-dnd-action';
+	import * as Card from '$lib/components/ui/card/index.js';
 
 	let { items = $bindable(), image = false, type = 'default' } = $props();
 
 	const flipDurationMs = 300;
 
-	function handleDndConsider(e: CustomEvent<any>) {
+	function handleDndConsider(e: CustomEvent<DndEvent<Item>>) {
 		items = e.detail.items;
 	}
-	function handleDndFinalize(e: CustomEvent<any>) {
+	function handleDndFinalize(e: CustomEvent<DndEvent<Item>>) {
 		items = e.detail.items;
 	}
 	function transformDraggedElement(draggedEl: HTMLElement | undefined) {
@@ -40,7 +46,7 @@
 	);
 </script>
 
-{#snippet card(item, i)}
+{#snippet card(item: AlbumDataField, i: number)}
 	{#if image}
 		<img class="aspect-square w-full object-cover" alt="Album Art" src={item.value} />
 		<input type="hidden" name="{type}_{i}" value={item.value} />

src/lib/server/AlbumState.svelte.ts

@@ -1,4 +1,4 @@
-import type { AlbumData, AlbumSolveState } from '$lib/types';
+import type { AlbumSolveState } from '$lib/types';
 
 class AlbumState {
   private albums: AlbumSolveState[] | undefined = undefined;

src/lib/types.ts

@@ -1,7 +1,7 @@
 export type AlbumData = {
-  name: AlbumDataField;
+  names: AlbumDataField[];
-  artists: AlbumDataField;
+  artists: AlbumDataField[];
-  image: AlbumDataField;
+  images: AlbumDataField[];
 };
 
 export type AlbumDataField = {

src/routes/(games)/(singlescreen)/pakubiiti/+page.server.ts

@@ -1,7 +1,7 @@
 import { shuffleArray } from '$lib/utils';
 import { nanoid } from 'nanoid';
 import type { PageServerLoad } from './$types';
-import type { AlbumData, AlbumSolveState } from '$lib/types';
+import type { AlbumSolveState } from '$lib/types';
 import { albumState } from '$lib/server/AlbumState.svelte';
 import { playerState } from '$lib/server/PlayerState.svelte';
 
@@ -38,15 +38,15 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
 			return res.json();
 		})
 		.then((data) => {
-			const albumNames = data.albums.map((album: AlbumData) => ({
+			const albumNames = data.albums.map((album: AlbumSolveState) => ({
 				id: nanoid(),
 				value: album.name
 			}));
-			const albumImages = data.albums.map((album: AlbumData) => ({
+			const albumImages = data.albums.map((album: AlbumSolveState) => ({
 				id: nanoid(),
 				value: album.image
 			}));
-			const albumArtists = data.albums.map((album: AlbumData) => ({
+			const albumArtists = data.albums.map((album: AlbumSolveState) => ({
 				id: nanoid(),
 				value: album.artists
 			}));

src/routes/(games)/(singlescreen)/pakubiiti/+page.svelte

@@ -7,17 +7,18 @@
 	import DndGroup from '$lib/components/DNDGroup.svelte';
 	import type { PageData } from './$types';
 	import { enhance } from '$app/forms';
+	import type { AlbumData } from '$lib/types';
 
 	let { data }: { data: PageData; form: FormData } = $props();
 
 	let loading = $state(false);
-	let oldAlbums: SpotifyApi.AlbumObjectSimplified[] = $state([]);
+	let oldAlbums: AlbumData | undefined = $state();
 
 	// Used when user answers wrong and no new data comes in
 	$effect(() => {
 		if (data.streamed?.albums) {
 			data.streamed.albums.then((data) => {
-				oldAlbums = data;
+				oldAlbums = data as AlbumData;
 			});
 		}
 	});
@@ -38,11 +39,11 @@
 	</div>
 {/snippet}
 
-{#snippet playArea(albums, placeholder = false)}
+{#snippet playArea(albums: AlbumData | undefined, placeholder = false)}
 	{#if placeholder}
-		{#each { length: 2 } as _}
+		{#each { length: 2 }}
 			<section class="grid grid-cols-3 items-center gap-14">
-				{#each { length: 3 } as _}
+				{#each { length: 3 }}
 					<Skeleton class="h-[5.25rem] w-full rounded-xl " />
 				{/each}
 			</section>
@@ -50,11 +51,11 @@
 		{/each}
 
 		<section class="grid grid-cols-3 items-center gap-14">
-			{#each { length: 3 } as _}
+			{#each { length: 3 }}
 				<Skeleton class="aspect-square h-auto max-w-full rounded-xl object-cover" />
 			{/each}
 		</section>
-	{:else}
+	{:else if albums}
 		<DndGroup items={albums.names} type="names"></DndGroup>
 		<Separator />
 		<DndGroup items={albums.artists} type="artists"></DndGroup>
@@ -91,7 +92,7 @@
 	</AlertDialog.Content>
 </AlertDialog.Root>
 
-<header class="font-title mb-24 flex flex-col items-center">
+<header class="mb-24 flex flex-col items-center font-title">
 	<h1 class="mb-1 scroll-m-20 text-6xl font-extrabold tracking-tight lg:text-7xl">Paku biiti</h1>
 	<p class="text-2xl font-semibold text-muted-foreground">
 		Lohista kokku õiged albumi <span class="text-red-600 dark:text-red-400">nimed</span>,
@@ -108,9 +109,9 @@
 	>
 		{#if data?.streamed?.albums}
 			{#await data.streamed.albums}
-				{@render playArea({}, true)}
+				{@render playArea(undefined, true)}
 			{:then albums}
-				{@render playArea(albums)}
+				{@render playArea(albums as AlbumData)}
 			{/await}
 		{:else}
 			{@render playArea(oldAlbums)}

src/routes/(landing)/+page.svelte

@@ -12,7 +12,7 @@
 	<meta property="og:image" content={baseURL + '/favicon.svg'} />
 </svelte:head>
 
-<header class="font-title mb-24 flex flex-col items-center">
+<header class="mb-24 flex flex-col items-center font-title">
 	<h1 class="mb-1 scroll-m-20 text-6xl font-extrabold tracking-tight lg:text-7xl">
 		stuff.kasterpalu.ee
 	</h1>
@@ -21,7 +21,7 @@
 <main class="grid w-full max-w-4xl justify-items-center">
 	{#each Object.entries(games) as [href, { image, name }]}
 		<a
-			class="shadow-sharp flex aspect-[4/1] w-full max-w-sm items-center justify-center rounded-xl border-2 border-current bg-contain bg-no-repeat transition-shadow transition-transform"
+			class="shadow-sharp flex aspect-[4/1] w-full max-w-sm items-center justify-center rounded-xl border-2 border-current bg-contain bg-no-repeat transition-all"
 			style="background-image: url('{image}')"
 			draggable="false"
 			{href}