Add explicit flag to tracks and mark it on upload

web-player/src/lib/components/player/Queue.svelte

@@ -61,6 +61,7 @@
 					title={player.current.title}
 					artist={player.current.artist || '—'}
 					ownerUserId={player.current.ownerUserId}
+					explicit={player.current.explicit}
 					active
 				/>
 			</div>
@@ -123,6 +124,7 @@
 						title={track.title}
 						subtitle={track.artist || '—'}
 						subtitleHref={track.ownerUserId}
+						explicit={track.explicit}
 						trackId={track.id}
 						class="p-2"
 					>

web-player/src/lib/components/ui/media/ExplicitBadge.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <span
-	class="grid size-4 shrink-0 place-items-center rounded-tag bg-fg-2 text-xs leading-4 font-semibold text-bg {klass}"
+	class="grid size-4 shrink-0 place-items-center rounded-tag border border-accent/30 bg-accent-tint pt-px text-xs leading-none font-normal text-accent-soft {klass}"
 	title="Contenido explícito"
 	aria-label="Contenido explícito">E</span
 >

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

@@ -25,6 +25,7 @@ export const actions: Actions = {
 		const audio = form.get('audio');
 		const cover = form.get('cover');
 		const rawTags = form.getAll('tags').map(String);
+		const isExplicit = form.get('isExplicit') === 'on';
 
 		if (title === '' || title.length > MAX_TITLE) {
 			return fail(400, { message: 'El título es obligatorio (máx. 100 caracteres).' });
@@ -90,7 +91,8 @@ export const actions: Actions = {
 				title,
 				pictureIntentId: urls.pictureIntentId,
 				audioIntentId: urls.audioIntentId,
-				tags
+				tags,
+				isExplicit
 			}
 		});
 

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

@@ -13,6 +13,7 @@
 	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 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';
 
@@ -29,6 +30,7 @@
 	let dragging = $state(false);
 	let status = $state<Status>('idle');
 	let acceptedTerms = $state(false);
+	let isExplicit = $state(false);
 	let errorMsg = $state('');
 	let errorDetail = $state('');
 	let tags = $state<TrackGenre[]>([]);
@@ -101,6 +103,7 @@
 		coverResetToken += 1;
 		status = 'idle';
 		acceptedTerms = false;
+		isExplicit = false;
 		errorMsg = '';
 		errorDetail = '';
 		tags = [];
@@ -277,6 +280,13 @@
 								<span class="shrink-0 tabular-nums">{tags.length} elegidos</span>
 							{/snippet}
 						</Field>
+
+						<Checkbox bind:checked={isExplicit} name="isExplicit">
+							<span class="inline-flex items-center gap-2">
+								Contenido explícito
+								<ExplicitBadge />
+							</span>
+						</Checkbox>
 					</div>
 				</div>
 			</Surface>

web-player/src/routes/+page.svelte

@@ -195,6 +195,7 @@
 							title={item.title}
 							subtitle={item.artist}
 							subtitleHref={item.ownerUserId}
+							explicit={item.explicit}
 							trackId={item.id}
 							class="animate-enter"
 							style="--i:{i}"
@@ -252,6 +253,7 @@
 								title={track.title}
 								subtitle={track.artist}
 								subtitleHref={track.ownerUserId}
+								explicit={track.isExplicit}
 							>
 								{#snippet leading()}
 									<span class="w-5 shrink-0 text-center text-xs text-fg-2 tabular-nums"