ui: add tags for dub and rebroadcast

src/lib/components/SongEntry.svelte

@@ -19,6 +19,8 @@
 		artistName: string | null;
 		fileName?: string | null;
 		globalPercent: number | null;
+		dub: boolean | null;
+		rebroadcast: boolean | null;
 	};
 
 	let {
@@ -30,6 +32,8 @@
 		artistName,
 		fileName = null,
 		globalPercent,
+		dub,
+		rebroadcast,
 	}: SongEntryProps = $props();
 
 	const typeLabelMap: Record<number, string> = {
@@ -54,6 +58,8 @@
 			songName,
 			artistName,
 			fileName,
+			dub,
+			rebroadcast,
 		}),
 	);
 
@@ -85,13 +91,16 @@
 	<div class="flex flex-col">
 		<div class="flex flex-wrap w-fit items-baseline gap-x-2 gap-y-1">
 			{animeName}
-			<span
+			<span class="tag">{displayTypeNumber}</span>
-				class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
-				>{displayTypeNumber}</span
-			>
 			<span class="text-muted-foreground">
 				{globalPercent}%
 			</span>
+			{#if dub}
+				<span title="Dub" class="tag">DUB</span>
+			{/if}
+			{#if rebroadcast}
+				<span title="Rebroadcast" class="tag">RB</span>
+			{/if}
 		</div>
 
 		<div class="mt-1 w-fit text-foreground/80">

src/lib/db/client-db/queries.ts

@@ -118,6 +118,8 @@ export async function getAnimeWithSongsByAnnId(db: ClientDb, annId: number) {
 			annSongId: animeSongLinks.annSongId,
 			type: animeSongLinks.type,
 			number: animeSongLinks.number,
+			dub: animeSongLinks.dub,
+			rebroadcast: animeSongLinks.rebroadcast,
 
 			songName: songs.name,
 			fileName: songs.fileName,
@@ -139,6 +141,8 @@ export async function getAnimeWithSongsByAnnId(db: ClientDb, annId: number) {
 			annSongId: r.annSongId,
 			type: r.type,
 			number: r.number,
+			dub: r.dub,
+			rebroadcast: r.rebroadcast,
 			songName: r.songName,
 			fileName: r.fileName,
 			globalPercent: r.globalPercent,
@@ -173,6 +177,8 @@ export async function getSongsForMalAnimeIds(
 			annSongId: animeSongLinks.annSongId,
 			type: animeSongLinks.type,
 			number: animeSongLinks.number,
+			dub: animeSongLinks.dub,
+			rebroadcast: animeSongLinks.rebroadcast,
 
 			songName: songs.name,
 			fileName: songs.fileName,
@@ -233,6 +239,8 @@ export async function getSongsWithFilters(
 
 			type: animeSongLinks.type,
 			number: animeSongLinks.number,
+			dub: animeSongLinks.dub,
+			rebroadcast: animeSongLinks.rebroadcast,
 
 			animeAnnId: anime.annId,
 			animeMainName: anime.mainName,

src/lib/player/types.ts

@@ -21,6 +21,8 @@ export type Track = {
 	type?: SongType;
 	number?: number;
 	fileName?: string | null;
+	dub?: boolean | null;
+	rebroadcast?: boolean | null;
 };
 
 export type SongRowLike = {
@@ -31,6 +33,8 @@ export type SongRowLike = {
 	songName: string;
 	artistName: string | null;
 	fileName?: string | null;
+	dub: boolean | null;
+	rebroadcast: boolean | null;
 };
 
 /**
@@ -55,5 +59,7 @@ export function trackFromSongRow(row: SongRowLike): Track | null {
 		type: row.type,
 		number: row.number,
 		fileName,
+		dub: row.dub,
+		rebroadcast: row.rebroadcast,
 	};
 }

src/routes/anime/[annId]/+page.svelte

@@ -36,6 +36,8 @@
 					songName: s.songName,
 					artistName: s.artistName,
 					fileName: s.fileName ?? null,
+					dub: Boolean(s.dub),
+					rebroadcast: Boolean(s.rebroadcast),
 				}),
 			)
 			.filter((t) => t !== null);
@@ -57,8 +59,8 @@
 {#if !data.annId}
 	<h1 class="text-2xl font-semibold">Anime not found</h1>
 	<p class="mt-2 text-sm text-muted-foreground">
-		The requested anime entry doesn’t exist (or the route param wasn’t a
+		The requested anime entry doesn’t exist (or the route param wasn’t a valid
-		valid ANN id).
+		ANN id).
 	</p>
 {:else if !data.animeWithSongs}
 	<p class="mt-3 text-sm text-muted-foreground">Loading anime…</p>
@@ -166,6 +168,8 @@
 							artistName={s.artistName}
 							fileName={s.fileName}
 							globalPercent={s.globalPercent}
+							dub={Boolean(s.dub)}
+							rebroadcast={Boolean(s.rebroadcast)}
 						/>
 					</li>
 				{/each}

src/routes/layout.css

@@ -159,6 +159,10 @@
   .chip input:checked + span {
     @apply font-semibold;
   }
+
+	.tag {
+		@apply rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground;
+	}
 }
 
 @layer scn {

src/routes/list/+page.svelte

@@ -62,6 +62,8 @@
 					songName: r.songName,
 					artistName: songArtistLabel(r),
 					fileName: r.fileName,
+					dub: Boolean(r.dub),
+					rebroadcast: Boolean(r.rebroadcast),
 				}),
 			)
 			.filter((t) => t !== null),
@@ -184,8 +186,8 @@
 
 {#if (formMal ?? "").trim() && data.username && (data.malResponse?.data.length ?? 0) > 0 && data.songRows.length === 0}
 	<p class="mt-4 text-sm text-muted-foreground">
-		No songs matched in the local database. This likely means none of the
+		No songs matched in the local database. This likely means none of the MAL
-		MAL anime IDs exist in the AMQ DB.
+		anime IDs exist in the AMQ DB.
 	</p>
 {/if}
 
@@ -204,6 +206,8 @@
 					artistName={songArtistLabel(r)}
 					fileName={r.fileName}
 					globalPercent={r.globalPercent}
+					dub={Boolean(r.dub)}
+					rebroadcast={Boolean(r.rebroadcast)}
 				/>
 			</li>
 		{/each}

src/routes/songs/+page.svelte

@@ -49,6 +49,8 @@
 					songName: r.songName,
 					artistName: songArtistLabel(r),
 					fileName: r.fileName,
+					dub: Boolean(r.dub),
+					rebroadcast: Boolean(r.rebroadcast),
 				}),
 			)
 			.filter((t) => t !== null),
@@ -124,9 +126,7 @@
 			label="Song Type"
 			items={Object.keys(AmqSongLinkTypeMap).map((type) => ({
 				label: type,
-				value: AmqSongLinkTypeMap[
+				value: AmqSongLinkTypeMap[type as keyof typeof AmqSongLinkTypeMap],
-					type as keyof typeof AmqSongLinkTypeMap
-				],
 			}))}
 			bind:value={params.type}
 		/>
@@ -190,6 +190,8 @@
 						artistName={songArtistLabel(r)}
 						fileName={r.fileName}
 						globalPercent={r.globalPercent}
+						dub={Boolean(r.dub)}
+						rebroadcast={Boolean(r.rebroadcast)}
 					/>
 				</li>
 			{/each}