Make Discover and upload genres dynamic

Discover used a hardcoded list of genre tiles that searched track titles,
and the upload form kept its own copy of the genre list and compatibility
rules. Both now come from the backend.

Backend:
- GET /genres returns genres with at least one track and their counts.
- GET /genres/available returns every assignable genre with the genres
  it cannot be combined with, so the rules live only in
  GenreCompatibility.
- GET /tracks accepts ?genre= (case-insensitive, 400 on unknown values).

web-player:
- Discover tiles are built from /genres; each opens /explore?genre=X, a
  song list filtered by that tag. Unknown genres fall back to a label
  derived from their name.
- The upload form loads /genres/available, disables incompatible genres
  as you pick, and the server validates before reserving upload URLs.
- lib/data/trackGenres.ts is removed; its helpers merge into
  lib/data/genres.ts.
- Regenerate the typed API client.

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

@@ -9,13 +9,25 @@ import {
 
 export const load: PageServerLoad = async ({ url, locals, fetch }) => {
 	const query = url.searchParams.get('q')?.trim() ?? '';
+	const genreParam = url.searchParams.get('genre')?.trim() || null;
 	const page = Math.max(1, Number(url.searchParams.get('page')) || 1);
 
 	const user = locals.user;
 	const api = createApiClient({ fetch, accessToken: locals.accessToken ?? undefined });
 
+	const genresRes = await api.GET('/genres');
+	const genres = genresRes.data ?? [];
+	const genre = genres.find((item) => item.genre === genreParam)?.genre ?? null;
+
 	const tracksPromise = api.GET('/tracks', {
-		params: { query: { name: query || undefined, pageNumber: page, pageSize: PAGE_SIZE } }
+		params: {
+			query: {
+				name: query || undefined,
+				genre: genre ?? undefined,
+				pageNumber: page,
+				pageSize: PAGE_SIZE
+			}
+		}
 	});
 
 	const playlistsPromise = user
@@ -47,6 +59,8 @@ export const load: PageServerLoad = async ({ url, locals, fetch }) => {
 
 	return {
 		query,
+		genre,
+		genres,
 		tracks,
 		albums: (albumsRes?.data?.items ?? []).map((item) => item.album),
 		users: usersRes?.data?.items ?? [],

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

@@ -16,13 +16,13 @@
 	import Chip from '$lib/components/ui/primitives/Chip.svelte';
 	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
 	import { EXPLORE_PAGE_SIZE } from '$lib/config';
-	import { searchHref } from '$lib/state/navigation.svelte';
+	import { genreHref } from '$lib/state/navigation.svelte';
 	import { createTrackMenu } from '$lib/state/menus.svelte';
 	import ContextMenu, { contextMenuPosition } from '$lib/components/ui/overlay/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import ListEnd from '@lucide/svelte/icons/list-end';
 	import { appendUnique } from '$lib/data/collections';
-	import { genreTiles } from '$lib/data/genres';
+	import { genreInfo, genreTiles } from '$lib/data/genres';
 	import {
 		type SearchFilter,
 		showGroup,
@@ -58,7 +58,7 @@
 	$effect(() => {
 		trackMenu.close();
 		albumMenu = null;
-		sfilter = 'Todo';
+		sfilter = data.genre ? 'Canciones' : 'Todo';
 		localItems = data.tracks.items.map((item) => item.track);
 		localPage = Number(data.tracks.pageNumber);
 		hasMore = data.tracks.hasNextPage;
@@ -73,6 +73,9 @@
 
 	const items = $derived(songRows.map((row) => row.track));
 
+	const tiles = $derived(genreTiles(data.genres));
+	const activeGenre = $derived(data.genre ? genreInfo(data.genre) : null);
+
 	const albums = $derived(data.albums);
 	const users = $derived(data.users);
 
@@ -169,6 +172,7 @@
 				pageSize: String(EXPLORE_PAGE_SIZE)
 			});
 			if (data.query) params.set('name', data.query);
+			if (data.genre) params.set('genre', data.genre);
 			const res = await fetch(`/api/tracks?${params}`);
 			if (!res.ok) throw new Error(String(res.status));
 			const next = (await res.json()) as typeof data.tracks;
@@ -188,7 +192,9 @@
 </script>
 
 <svelte:head>
-	<title>{data.query ? `Buscar «${data.query}»` : 'Descubrir'}</title>
+	<title
+		>{activeGenre ? activeGenre.label : data.query ? `Buscar «${data.query}»` : 'Descubrir'}</title
+	>
 	<meta
 		name="description"
 		content="Busca canciones, álbumes y personas, o descubre por género en Musify."
@@ -196,7 +202,9 @@
 </svelte:head>
 
 <Page>
-	{#if !data.query}
+	{#if activeGenre}
+		<PageHeader eyebrow="Género" title={activeGenre.label} description={activeGenre.tagline} />
+	{:else if !data.query}
 		<PageHeader
 			title="Descubrir"
 			description="Encuentra tu próxima canción favorita explorando por género."
@@ -300,31 +308,34 @@
 				por playlist.
 			</p>
 			<div class="mt-5.5 flex flex-wrap justify-center gap-2">
-				{#each genreTiles.slice(0, 4) as genre (genre.query)}
-					<Chip href={searchHref(genre.query)}>{genre.label}</Chip>
+				{#each tiles.slice(0, 4) as tile (tile.genre)}
+					<Chip href={genreHref(tile.genre)}>{tile.label}</Chip>
 				{/each}
 			</div>
 		</div>
 	{/if}
 
-	{#if !data.query}
+	{#if !data.query && !data.genre}
 		<div class="grid-wide">
-			{#each genreTiles as genre, i (genre.query)}
+			{#each tiles as tile, i (tile.genre)}
 				<a
-					href={searchHref(genre.query)}
+					href={genreHref(tile.genre)}
 					class="animate-enter group relative flex h-28 flex-col gap-1 overflow-hidden rounded-panel p-4 transition-[filter] genre-tile hover:brightness-110"
-					style="--i:{i}; --tile-hue:{genre.hue}"
+					style="--i:{i}; --tile-hue:{tile.hue}"
 				>
 					<div class="text-on-art">
-						{genre.label}
+						{tile.label}
 					</div>
-					<div class="text-xs text-on-art-2">{genre.tagline}</div>
+					<div class="text-xs text-on-art-2">{tile.tagline}</div>
 				</a>
 			{/each}
 		</div>
+		{#if tiles.length === 0}
+			<EmptyState icon={Music} description="Todavía no hay géneros. Sube música para empezar." />
+		{/if}
 	{/if}
 
-	{#if data.query && !nothingFound}
+	{#if (data.query || data.genre) && !nothingFound}
 		<div class="mt-9 flex flex-col gap-9">
 			{#if showGroup(sfilter, 'Canciones')}
 				<div>
@@ -364,7 +375,9 @@
 					{:else}
 						<EmptyState
 							icon={Music}
-							description="No hay canciones que coincidan con «{data.query}»."
+							description={activeGenre
+								? 'Todavía no hay canciones de este género.'
+								: `No hay canciones que coincidan con «${data.query}».`}
 						/>
 					{/if}
 				</div>

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

@@ -7,12 +7,18 @@ 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';
+import { findConflict, genreInfo } from '$lib/data/genres';
+import type { components } from '$lib/api/schema';
+
+type Genre = components['schemas']['Genre'];
 
 const MAX_TITLE = 100;
 
-export const load: PageServerLoad = ({ locals, url }) => {
+export const load: PageServerLoad = async ({ locals, url, fetch }) => {
 	requireUser(locals, url);
+	const api = createApiClient({ fetch, accessToken: locals.accessToken ?? undefined });
+	const { data } = await api.GET('/genres/available');
+	return { genres: data ?? [] };
 };
 
 export const actions: Actions = {
@@ -39,20 +45,23 @@ export const actions: Actions = {
 		if (rawTags.length === 0) {
 			return fail(400, { message: 'Elige al menos un género.' });
 		}
-		if (!rawTags.every(isTrackGenre)) {
+		const api = createApiClient({ fetch, accessToken });
+		const { data: available } = await api.GET('/genres/available');
+		const options = available ?? [];
+		const known = new Set<string>(options.map((option) => option.genre));
+		if (!rawTags.every((tag) => known.has(tag))) {
 			return fail(400, { message: 'Alguno de los géneros no es válido.' });
 		}
-		const tags: TrackGenre[] = [...new Set(rawTags)];
-		const conflict = findConflict(tags);
+		const tags = [...new Set(rawTags)] as Genre[];
+		const conflict = findConflict(tags, options);
 		if (conflict) {
 			return fail(400, {
-				message: `Los géneros ${genreLabel(conflict[0])} y ${genreLabel(conflict[1])} no se pueden combinar.`
+				message: `Los géneros ${genreInfo(conflict[0]).label} y ${genreInfo(conflict[1]).label} no se pueden combinar.`
 			});
 		}
 
 		const audioContentType = contentTypeOf(audio, AUDIO_TYPES);
 		const pictureContentType = contentTypeOf(cover, IMAGE_TYPES);
-		const api = createApiClient({ fetch, accessToken });
 
 		const urlsResult = await api.POST('/tracks/upload-urls', {
 			body: {

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

@@ -14,13 +14,15 @@
 	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';
+	import { genreOptions } from '$lib/data/genres';
 
 	type Status = 'idle' | 'uploading' | 'done' | 'error';
 	type StepState = 'idle' | 'active' | 'done';
 
 	const MAX_TITLE = 100;
 
+	let { data } = $props();
+
 	let title = $state('');
 	let audioName = $state('');
 	let audioSize = $state(0);
@@ -31,7 +33,7 @@
 	let acceptedTerms = $state(false);
 	let errorMsg = $state('');
 	let errorDetail = $state('');
-	let tags = $state<TrackGenre[]>([]);
+	let tags = $state<string[]>([]);
 	let publishedTitle = $state('');
 	let audioInput = $state<HTMLInputElement>();
 
@@ -41,6 +43,15 @@
 		{ key: 'publish', label: 'Publicar', hint: 'Disponible en el catálogo.' }
 	];
 
+	const options = $derived(genreOptions(data.genres));
+	const blocked = $derived(
+		new Set(
+			options
+				.filter((option) => tags.includes(option.genre))
+				.flatMap((option) => option.incompatibleWith)
+		)
+	);
+
 	const busy = $derived(status === 'uploading');
 
 	const canPublish = $derived(
@@ -85,14 +96,10 @@
 		pickAudio(file);
 	}
 
-	function toggleTag(tag: TrackGenre) {
+	function toggleTag(tag: string) {
 		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 = '';
@@ -254,13 +261,13 @@
 
 			<Field label="Géneros">
 				<div class="flex flex-wrap gap-2">
-					{#each TRACK_GENRES as genre (genre.value)}
+					{#each options as option (option.genre)}
 						<Chip
-							selected={tags.includes(genre.value)}
-							disabled={tagBlocked(genre.value)}
-							onclick={() => toggleTag(genre.value)}
+							selected={tags.includes(option.genre)}
+							disabled={blocked.has(option.genre)}
+							onclick={() => toggleTag(option.genre)}
 						>
-							{genre.label}
+							{option.label}
 						</Chip>
 					{/each}
 				</div>

web-player/src/routes/api/tracks/+server.ts

@@ -5,12 +5,13 @@ import { EXPLORE_PAGE_SIZE } from '$lib/config';
 
 export const GET: RequestHandler = async ({ url, locals, fetch }) => {
 	const name = url.searchParams.get('name')?.trim() || undefined;
+	const genre = url.searchParams.get('genre')?.trim() || undefined;
 	const pageNumber = Math.max(1, Number(url.searchParams.get('pageNumber')) || 1);
 	const pageSize = Math.max(1, Number(url.searchParams.get('pageSize')) || EXPLORE_PAGE_SIZE);
 
 	const api = createApiClient({ fetch, accessToken: locals.accessToken ?? undefined });
 	const result = await api.GET('/tracks', {
-		params: { query: { name, pageNumber, pageSize } }
+		params: { query: { name, genre, pageNumber, pageSize } }
 	});
 
 	return json(unwrapOrError(result, 'No se pudieron cargar las canciones.'));