Enhance upload functionality with genre selection and validation; refactor session cookie handling

web-player/src/lib/api/schema.d.ts

@@ -714,7 +714,9 @@ export interface components {
             pictureIntentId: string;
             
             audioIntentId: string;
+            tags: components["schemas"]["Genre"][];
         };
+        Genre: "Pop" | "Rock" | "HipHop" | "RnB" | "Jazz" | "Blues" | "Classical" | "Electronic" | "House" | "Techno" | "Trance" | "Dubstep" | "DrumAndBass" | "Metal" | "Punk" | "Reggae" | "Reggaeton" | "Country" | "Folk" | "Indie" | "KPop" | "Latin" | "Soul" | "Funk" | "Ambient" | "Lofi";
         CreateUserRequest: {
             
             id: number | string;

web-player/src/lib/components/ui/primitives/Chip.svelte

@@ -3,20 +3,21 @@
 
 	interface Props {
 		selected?: boolean;
+		disabled?: boolean;
 		count?: number;
 		href?: string;
 		onclick?: () => void;
 		children: Snippet;
 	}
 
-	let { selected = false, count, href, onclick, children }: Props = $props();
+	let { selected = false, disabled = false, count, href, onclick, children }: Props = $props();
 
 	const classes = $derived(
 		href
 			? 'rounded-full border border-line-strong px-3.5 py-2 text-xs text-fg-2 transition-colors hover:bg-hover hover:text-fg'
 			: `flex items-center gap-2 rounded-full px-3.5 py-2 text-xs font-medium transition ${
 					selected ? 'bg-cta-strong text-ink' : 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg'
-				}`
+				} ${disabled ? 'cursor-not-allowed opacity-40' : ''}`
 	);
 </script>
 
@@ -30,5 +31,5 @@
 {#if href}
 	<a {href} class={classes}>{@render content()}</a>
 {:else}
-	<button type="button" {onclick} class={classes}>{@render content()}</button>
+	<button type="button" {onclick} {disabled} class={classes}>{@render content()}</button>
 {/if}

web-player/src/lib/data/trackGenres.ts

@@ -0,0 +1,56 @@
+export const TRACK_GENRES = [
+	{ value: 'Pop', label: 'Pop' },
+	{ value: 'Rock', label: 'Rock' },
+	{ value: 'HipHop', label: 'Hip-hop' },
+	{ value: 'RnB', label: 'R&B' },
+	{ value: 'Jazz', label: 'Jazz' },
+	{ value: 'Blues', label: 'Blues' },
+	{ value: 'Classical', label: 'Clásica' },
+	{ value: 'Electronic', label: 'Electrónica' },
+	{ value: 'House', label: 'House' },
+	{ value: 'Techno', label: 'Techno' },
+	{ value: 'Trance', label: 'Trance' },
+	{ value: 'Dubstep', label: 'Dubstep' },
+	{ value: 'DrumAndBass', label: 'Drum and bass' },
+	{ value: 'Metal', label: 'Metal' },
+	{ value: 'Punk', label: 'Punk' },
+	{ value: 'Reggae', label: 'Reggae' },
+	{ value: 'Reggaeton', label: 'Reggaetón' },
+	{ value: 'Country', label: 'Country' },
+	{ value: 'Folk', label: 'Folk' },
+	{ value: 'Indie', label: 'Indie' },
+	{ value: 'KPop', label: 'K-pop' },
+	{ value: 'Latin', label: 'Latina' },
+	{ value: 'Soul', label: 'Soul' },
+	{ value: 'Funk', label: 'Funk' },
+	{ value: 'Ambient', label: 'Ambient' },
+	{ value: 'Lofi', label: 'Lo-fi' }
+] as const;
+
+export type TrackGenre = (typeof TRACK_GENRES)[number]['value'];
+
+const GENRE_VALUES: ReadonlySet<string> = new Set(TRACK_GENRES.map((genre) => genre.value));
+
+const INTENSE: ReadonlySet<TrackGenre> = new Set(['Metal', 'Punk', 'Dubstep', 'DrumAndBass']);
+const MELLOW: ReadonlySet<TrackGenre> = new Set(['Classical', 'Ambient', 'Lofi']);
+
+export function isTrackGenre(value: string): value is TrackGenre {
+	return GENRE_VALUES.has(value);
+}
+
+export function areCompatible(a: TrackGenre, b: TrackGenre): boolean {
+	return !((INTENSE.has(a) && MELLOW.has(b)) || (INTENSE.has(b) && MELLOW.has(a)));
+}
+
+export function genreLabel(value: TrackGenre): string {
+	return TRACK_GENRES.find((genre) => genre.value === value)?.label ?? value;
+}
+
+export function findConflict(tags: readonly TrackGenre[]): [TrackGenre, TrackGenre] | undefined {
+	for (let i = 0; i < tags.length; i++) {
+		for (let j = i + 1; j < tags.length; j++) {
+			if (!areCompatible(tags[i], tags[j])) return [tags[i], tags[j]];
+		}
+	}
+	return undefined;
+}

web-player/src/lib/server/api.ts

@@ -52,9 +52,27 @@ export function unwrapOrError<T>(
 	return result.data;
 }
 
+export function apiErrorDetail(error: unknown): string | undefined {
+	if (typeof error !== 'object' || error === null) return undefined;
+	const { errors, detail, title } = error as {
+		errors?: Record<string, unknown>;
+		detail?: unknown;
+		title?: unknown;
+	};
+	if (errors && typeof errors === 'object') {
+		const messages = Object.values(errors)
+			.flat()
+			.filter((entry): entry is string => typeof entry === 'string');
+		if (messages.length > 0) return messages.join(' ');
+	}
+	if (typeof detail === 'string' && detail !== '') return detail;
+	if (typeof title === 'string' && title !== '') return title;
+	return undefined;
+}
+
 export function unwrapOrFail(
 	result: { error?: unknown },
 	message: string
-): ActionFailure<{ message: string }> | undefined {
-	return result.error ? fail(502, { message }) : undefined;
+): ActionFailure<{ message: string; detail?: string }> | undefined {
+	return result.error ? fail(502, { message, detail: apiErrorDetail(result.error) }) : undefined;
 }

web-player/src/lib/server/auth.ts

@@ -1,3 +1,4 @@
+import type { Cookies } from '@sveltejs/kit';
 import * as client from 'openid-client';
 import { EncryptJWT, jwtDecrypt } from 'jose';
 import { dev } from '$app/environment';
@@ -53,6 +54,44 @@ export function sessionCookieOptions(url: URL) {
 	};
 }
 
+const SESSION_CHUNK_SIZE = 3600;
+
+function sessionChunkName(index: number): string {
+	return index === 0 ? SESSION_COOKIE : `${SESSION_COOKIE}.${index}`;
+}
+
+export function readSessionCookie(cookies: Cookies): string | undefined {
+	const parts: string[] = [];
+	for (let index = 0; ; index++) {
+		const part = cookies.get(sessionChunkName(index));
+		if (part === undefined) break;
+		parts.push(part);
+	}
+	return parts.length > 0 ? parts.join('') : undefined;
+}
+
+export function clearSessionCookie(cookies: Cookies, keep = 0): void {
+	for (const { name } of cookies.getAll()) {
+		const match =
+			name === SESSION_COOKIE
+				? 0
+				: name.startsWith(`${SESSION_COOKIE}.`)
+					? Number(name.slice(SESSION_COOKIE.length + 1))
+					: -1;
+		if (Number.isInteger(match) && match >= keep) cookies.delete(name, { path: '/' });
+	}
+}
+
+export function writeSessionCookie(cookies: Cookies, token: string, url: URL): void {
+	const options = sessionCookieOptions(url);
+	const count = Math.ceil(token.length / SESSION_CHUNK_SIZE);
+	for (let index = 0; index < count; index++) {
+		const chunk = token.slice(index * SESSION_CHUNK_SIZE, (index + 1) * SESSION_CHUNK_SIZE);
+		cookies.set(sessionChunkName(index), chunk, options);
+	}
+	clearSessionCookie(cookies, count);
+}
+
 export async function encodeSession(session: Session): Promise<string> {
 	const now = Math.floor(Date.now() / 1000);
 	return new EncryptJWT({ ...session })