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

web-player/src/routes/(app)/upload/+page.server.ts

@@ -7,6 +7,7 @@ import {
 	unwrapOrFail
 } from '$lib/server/api';
 import { putPresigned, extOf, contentTypeOf, AUDIO_TYPES, IMAGE_TYPES } from '$lib/server/upload';
+import { findConflict, genreLabel, isTrackGenre, type TrackGenre } from '$lib/data/trackGenres';
 
 const MAX_TITLE = 100;
 
@@ -23,6 +24,7 @@ export const actions: Actions = {
 		const title = String(form.get('title') ?? '').trim();
 		const audio = form.get('audio');
 		const cover = form.get('cover');
+		const rawTags = form.getAll('tags').map(String);
 
 		if (title === '' || title.length > MAX_TITLE) {
 			return fail(400, { message: 'El título es obligatorio (máx. 100 caracteres).' });
@@ -34,6 +36,20 @@ export const actions: Actions = {
 			return fail(400, { message: 'Selecciona una portada.' });
 		}
 
+		if (rawTags.length === 0) {
+			return fail(400, { message: 'Elige al menos un género.' });
+		}
+		if (!rawTags.every(isTrackGenre)) {
+			return fail(400, { message: 'Alguno de los géneros no es válido.' });
+		}
+		const tags: TrackGenre[] = [...new Set(rawTags)];
+		const conflict = findConflict(tags);
+		if (conflict) {
+			return fail(400, {
+				message: `Los géneros ${genreLabel(conflict[0])} y ${genreLabel(conflict[1])} no se pueden combinar.`
+			});
+		}
+
 		const audioContentType = contentTypeOf(audio, AUDIO_TYPES);
 		const pictureContentType = contentTypeOf(cover, IMAGE_TYPES);
 		const api = createApiClient({ fetch, accessToken });
@@ -73,7 +89,8 @@ export const actions: Actions = {
 			body: {
 				title,
 				pictureIntentId: urls.pictureIntentId,
-				audioIntentId: urls.audioIntentId
+				audioIntentId: urls.audioIntentId,
+				tags
 			}
 		});
 

web-player/src/routes/(app)/upload/+page.svelte

@@ -13,6 +13,8 @@
 	import Input from '$lib/components/ui/primitives/Input.svelte';
 	import Checkbox from '$lib/components/ui/primitives/Checkbox.svelte';
 	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import Chip from '$lib/components/ui/primitives/Chip.svelte';
+	import { TRACK_GENRES, areCompatible, type TrackGenre } from '$lib/data/trackGenres';
 
 	type Status = 'idle' | 'uploading' | 'done' | 'error';
 	type StepState = 'idle' | 'active' | 'done';
@@ -28,6 +30,8 @@
 	let status = $state<Status>('idle');
 	let acceptedTerms = $state(false);
 	let errorMsg = $state('');
+	let errorDetail = $state('');
+	let tags = $state<TrackGenre[]>([]);
 	let publishedTitle = $state('');
 	let audioInput = $state<HTMLInputElement>();
 
@@ -40,7 +44,7 @@
 	const busy = $derived(status === 'uploading');
 
 	const canPublish = $derived(
-		title.trim() !== '' && audioName !== '' && hasCover && acceptedTerms && !busy
+		title.trim() !== '' && audioName !== '' && hasCover && tags.length > 0 && acceptedTerms && !busy
 	);
 
 	const stepStates = $derived.by<StepState[]>(() => {
@@ -81,6 +85,14 @@
 		pickAudio(file);
 	}
 
+	function toggleTag(tag: TrackGenre) {
+		tags = tags.includes(tag) ? tags.filter((current) => current !== tag) : [...tags, tag];
+	}
+
+	function tagBlocked(tag: TrackGenre) {
+		return !tags.includes(tag) && tags.some((current) => !areCompatible(current, tag));
+	}
+
 	function reset() {
 		title = '';
 		audioName = '';
@@ -90,6 +102,8 @@
 		status = 'idle';
 		acceptedTerms = false;
 		errorMsg = '';
+		errorDetail = '';
+		tags = [];
 	}
 </script>
 
@@ -153,6 +167,7 @@
 			use:enhance={() => {
 				status = 'uploading';
 				errorMsg = '';
+				errorDetail = '';
 				return async ({ result }) => {
 					if (result.type === 'success') {
 						publishedTitle = title;
@@ -160,6 +175,7 @@
 					} else if (result.type === 'failure') {
 						status = 'error';
 						errorMsg = (result.data?.message as string) ?? 'No se pudo subir la canción.';
+						errorDetail = (result.data?.detail as string | undefined) ?? '';
 					} else {
 						status = 'error';
 						errorMsg = 'Error inesperado durante la subida.';
@@ -236,6 +252,26 @@
 				</Field>
 			</div>
 
+			<Field label="Géneros">
+				<div class="flex flex-wrap gap-2">
+					{#each TRACK_GENRES as genre (genre.value)}
+						<Chip
+							selected={tags.includes(genre.value)}
+							disabled={tagBlocked(genre.value)}
+							onclick={() => toggleTag(genre.value)}
+						>
+							{genre.label}
+						</Chip>
+					{/each}
+				</div>
+				{#each tags as tag (tag)}
+					<input type="hidden" name="tags" value={tag} />
+				{/each}
+				{#snippet hint()}
+					<p>Elige al menos uno. Algunos géneros no se pueden combinar, como Metal con Ambient.</p>
+				{/snippet}
+			</Field>
+
 			<Checkbox bind:checked={acceptedTerms}>
 				Acepto los
 				<a
@@ -260,7 +296,10 @@
 			{/if}
 
 			{#if status === 'error'}
-				<Alert tone="danger">{errorMsg}</Alert>
+				<Alert tone="danger">
+					{errorMsg}
+					{#if errorDetail}<span class="mt-1 block text-xs opacity-80">{errorDetail}</span>{/if}
+				</Alert>
 			{/if}
 
 			<div class="flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-end sm:gap-4">

web-player/src/routes/auth/callback/+server.ts

@@ -4,10 +4,9 @@ import type { RequestHandler } from './$types';
 import {
 	getOidcConfig,
 	encodeSession,
-	sessionCookieOptions,
 	toSessionUser,
+	writeSessionCookie,
 	type Session,
-	SESSION_COOKIE,
 	STATE_COOKIE,
 	VERIFIER_COOKIE,
 	NONCE_COOKIE,
@@ -55,7 +54,7 @@ export const GET: RequestHandler = async ({ url, cookies }) => {
 		expiresAt: Math.floor(Date.now() / 1000) + (tokens.expires_in ?? 3600)
 	};
 
-	cookies.set(SESSION_COOKIE, await encodeSession(session), sessionCookieOptions(url));
+	writeSessionCookie(cookies, await encodeSession(session), url);
 
 	for (const name of [STATE_COOKIE, VERIFIER_COOKIE, NONCE_COOKIE, RETURN_COOKIE]) {
 		cookies.delete(name, { path: '/' });

web-player/src/routes/auth/logout/+server.ts

@@ -1,12 +1,17 @@
 import { redirect } from '@sveltejs/kit';
 import * as client from 'openid-client';
 import type { RequestHandler } from './$types';
-import { getOidcConfig, decodeSession, SESSION_COOKIE } from '$lib/server/auth';
+import {
+	clearSessionCookie,
+	decodeSession,
+	getOidcConfig,
+	readSessionCookie
+} from '$lib/server/auth';
 import { authConfig } from '$lib/server/config';
 
 const handleLogout: RequestHandler = async ({ cookies }) => {
-	const session = await decodeSession(cookies.get(SESSION_COOKIE));
-	cookies.delete(SESSION_COOKIE, { path: '/' });
+	const session = await decodeSession(readSessionCookie(cookies));
+	clearSessionCookie(cookies);
 
 	const config = await getOidcConfig();
 	const endSessionUrl = client.buildEndSessionUrl(config, {