Merge master into web-player-general-changes

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

@@ -15,13 +15,15 @@
 	import Button from '$lib/components/ui/primitives/Button.svelte';
 	import ExplicitBadge from '$lib/components/ui/media/ExplicitBadge.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);
@@ -33,7 +35,7 @@
 	let isExplicit = $state(false);
 	let errorMsg = $state('');
 	let errorDetail = $state('');
-	let tags = $state<TrackGenre[]>([]);
+	let tags = $state<string[]>([]);
 	let publishedTitle = $state('');
 	let audioInput = $state<HTMLInputElement>();
 
@@ -43,6 +45,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(
@@ -87,14 +98,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 = '';
@@ -260,13 +267,13 @@
 
 						<Field label="Géneros">
 							<div class="mb-2 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>