add global percent to song entry component

src/lib/components/SongEntry.svelte

@@ -24,6 +24,7 @@
 		songName: string;
 		artistName: string | null;
 		fileName?: string | null;
+		globalPercent: number | null;
 	};
 
 	let {
@@ -34,6 +35,7 @@
 		songName,
 		artistName,
 		fileName = null,
+		globalPercent,
 	}: SongEntryProps = $props();
 
 	const typeLabelMap: Record<number, string> = {
@@ -92,6 +94,9 @@
 			<span class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
 				>{displayTypeNumber}</span
 			>
+			<span class=" text-muted-foreground">
+				{globalPercent}%
+			</span>
 		</div>
 
 		<div class="mt-1 w-fit text-foreground/80">

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

@@ -121,6 +121,7 @@ export async function getAnimeWithSongsByAnnId(db: ClientDb, annId: number) {
 
 			songName: songs.name,
 			fileName: songs.fileName,
+			globalPercent: songs.globalPercent,
 
 			artistName: artists.name,
 			groupName: groups.name,
@@ -140,6 +141,7 @@ export async function getAnimeWithSongsByAnnId(db: ClientDb, annId: number) {
 			number: r.number,
 			songName: r.songName,
 			fileName: r.fileName,
+			globalPercent: r.globalPercent,
 			artistName: r.artistName ?? r.groupName ?? null,
 		})),
 	};
@@ -174,6 +176,7 @@ export async function getSongsForMalAnimeIds(
 
 			songName: songs.name,
 			fileName: songs.fileName,
+			globalPercent: songs.globalPercent,
 
 			artistName: artists.name,
 			groupName: groups.name,

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

@@ -163,6 +163,7 @@
 							songName={s.songName}
 							artistName={s.artistName}
 							fileName={s.fileName}
+							globalPercent={s.globalPercent}
 						/>
 					</li>
 				{/each}

src/routes/list/+page.svelte

@@ -203,6 +203,7 @@
 					songName={r.songName}
 					artistName={songArtistLabel(r)}
 					fileName={r.fileName}
+					globalPercent={r.globalPercent}
 				/>
 			</li>
 		{/each}

src/routes/songs/+page.svelte

@@ -190,6 +190,7 @@
 						songName={r.songName}
 						artistName={songArtistLabel(r)}
 						fileName={r.fileName}
+						globalPercent={r.globalPercent}
 					/>
 				</li>
 			{/each}