get artist covers working

src/App.tsx

···
-import { type Component, createResource, For, Suspense, Show } from "solid-js";
+import {
+	type Component,
+	createResource,
+	createSignal,
+	For,
+	Show,
+	Suspense,
+} from "solid-js";
+
+export type Settings = {
+	username: string;
+	range: Range;
+};
 
 export default () => {
-	const [artistRes] = createResource<ArtistStats>(() => artists("karitham"));
-	const [groupsRes] = createResource<ReleaseGroupsStats>(() =>
-		release_groups("karitham"),
+	const [settings, setSettings] = createSignal<Settings>({
+		username: "karitham",
+		range: "all_time",
+	});
+	const [artistRes] = createResource<ArtistStats, Settings>(settings, (set) =>
+		artists(set.username, undefined, set.range),
+	);
+	const [groupsRes] = createResource<ReleaseGroupsStats, Settings>(
+		settings,
+		(set) => releaseGroups(set.username, undefined, set.range),
 	);
 
 	return (
-		<Suspense fallback={<p>Loading...</p>}>
-			<Artists artists={artistRes()?.artists || []} />
-			<ReleaseGroups groups={groupsRes()?.release_groups || []} />
-		</Suspense>
+		<div class="bg-black min-h-screen text-white p-8">
+			<h1 class="text-4xl font-bold mb-8 text-center">
+				Your ListenBrainz Stats
+			</h1>
+			<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8">
+				<input
+					type="text"
+					value={settings().username}
+					onChange={(e) => {
+						setSettings(() => ({
+							...settings(),
+							username: e.target.value,
+						}));
+					}}
+					placeholder="Enter username"
+					class="p-4 rounded-lg bg-gray-800 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-green-500 w-full sm:w-auto"
+				/>
+				<select
+					value={settings().range}
+					onChange={(e) => {
+						setSettings(() => ({
+							...settings(),
+							range: e.target.value as Range,
+						}));
+					}}
+					class="p-4 rounded-lg bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-green-500 w-full sm:w-auto"
+				>
+					{ranges.map((r) => (
+						<option value={r}>{r}</option>
+					))}
+				</select>
+			</div>
+			<Suspense fallback={<p class="text-center text-gray-400">Loading...</p>}>
+				<h2 class="text-2xl font-semibold my-6 text-center">Top Artists</h2>
+				<Artists artists={artistRes()?.artists || []} />
+				<h2 class="text-2xl font-semibold my-6 text-center">Top Albums</h2>
+				<ReleaseGroups groups={groupsRes()?.release_groups || []} />
+			</Suspense>
+		</div>
 	);
 };
 
 const Artists: Component<{ artists: ArtistStatsArtist[] }> = (props) => {
 	return (
-		<div class="flex flex-wrap justify-center">
+		<div class="flex flex-wrap justify-center gap-4">
 			<For each={props.artists}>
 				{(artist) => <ArtistsItem artist={artist} />}
 			</For>
···
 			return null;
 		}
 
-		return await getArtistImageURL(props.artist.artist_mbid);
+		return await getWikidataURL(props.artist.artist_mbid).then((s) =>
+			s ? getWikidataThumbnail(s) : null,
+		);
 	});
 
 	return (
-		<div class="flex flex-col items-center p-4 m-2 bg-gray-200 rounded-lg shadow-lg">
+		<div class="group relative w-40 p-4 rounded-lg bg-gray-900 transition-all duration-300 hover:bg-gray-800 cursor-pointer">
 			<Show
 				when={!image.loading}
 				fallback={
-					<div class="w-32 h-32 bg-gray-300 rounded-md mb-6 animate-pulse"></div>
+					<div class="relative w-32 h-32 mx-auto rounded-full mb-4 bg-gray-700 animate-pulse"></div>
 				}
 			>
 				<img
-					src={image() || "/fallback"}
+					src={
+						image() ||
+						`https://placehold.co/1000x1000/000000/ffffff?text=${props.artist.artist_name}`
+					}
 					alt={`Thumbnail for ${props.artist.artist_name}`}
-					class="w-32 h-32 object-cover rounded-md mb-6 transition-transform duration-300 hover:scale-105"
+					class="w-32 h-32 mx-auto object-cover rounded-full shadow-lg mb-4 transition-all duration-300 group-hover:scale-105"
 				/>
 			</Show>
-			<p class="text-black text-center font-bold truncate w-32">
+			<p class="text-white text-center font-bold text-base truncate mb-1">
 				{props.artist.artist_name}
 			</p>
-			<p class="text-gray-800 text-sm">{props.artist.listen_count} listens</p>
+			<p class="text-gray-500 text-base truncate mb-1">
+				{props.artist.listen_count} listens
+			</p>
 		</div>
 	);
 };
 
 const ReleaseGroups: Component<{ groups: ReleaseGroupsGroup[] }> = (props) => {
 	return (
-		<div class="flex flex-wrap justify-center">
+		<div class="flex flex-wrap justify-center gap-4">
 			<For each={props.groups}>
 				{(group) => <ReleaseGroupItem group={group} />}
 			</For>
···
 			"release",
 			props.group.caa_release_mbid,
 		);
-		return result[0]?.image;
+		return result[0]?.image.replace("http://", "https://");
 	});
 
 	return (
-		<div class="flex flex-col items-center p-4 m-2 bg-gray-200 rounded-lg shadow-lg">
+		<div class="group relative w-40 p-4 rounded-lg bg-gray-900 transition-all duration-300 hover:bg-gray-800 cursor-pointer">
 			<Show
 				when={!image.loading}
 				fallback={
-					<div class="w-32 h-32 bg-gray-300 rounded-md mb-6 animate-pulse"></div>
+					<div class="relative w-32 h-32 mx-auto rounded-full mb-4 bg-gray-700 animate-pulse"></div>
 				}
 			>
 				<img
-					src={image() || "/fallback"}
+					src={
+						image() ||
+						`https://placehold.co/1000x1000/000000/ffffff?text=${props.group.release_group_name}`
+					}
 					alt={`Cover for ${props.group.release_group_name}`}
-					class="w-32 h-32 object-cover rounded-md mb-6 transition-transform duration-300 hover:scale-105"
+					class="w-32 h-32 mx-auto object-cover rounded-full shadow-lg mb-4 transition-all duration-300 group-hover:scale-105"
 				/>
 			</Show>
-			<p class="text-black text-center font-bold truncate w-32">
+			<p class="text-white text-center font-bold text-base truncate mb-1">
 				{props.group.release_group_name}
 			</p>
-			<p class="text-gray-800 text-sm">{props.group.listen_count} listens</p>
+			<p class="text-gray-500 text-base truncate mb-1">
+				{props.group.listen_count} listens
+			</p>
 		</div>
 	);
 };
···
 const COVERARTARCHIVE_URL = "https://coverartarchive.org";
 const MB_API_URL = "https://musicbrainz.org";
 
-export type Range = "this_week" | "this_month" | "this_year" | "all_time";
+const ranges = ["this_week", "this_month", "this_year", "all_time"] as const;
+export type Range = (typeof ranges)[number];
 
 export type ArtistStats = {
 	artists: ArtistStatsArtist[];
···
 	return getPayload(url);
 }
 
-async function release_groups(
+async function releaseGroups(
 	user: string,
 	offset: number = 0,
 	range: Range = "this_week",
···
 	small: string;
 }
 
+const defaultHeaders = {
+	"User-Agent": "listenframe/0.1",
+};
+
 async function getReleaseImageURL(
 	kind: "release" | "release-group",
 	mbid: string,
···
 	return (data as { images: Image[] }).images;
 }
 
-async function getArtistImageURL(mbid: string): Promise<string | null> {
+async function getWikidataURL(mbid: string): Promise<string | null> {
 	const url = new URL(`${MB_API_URL}/ws/2/artist/${mbid}`);
 
 	url.searchParams.set("inc", "url-rels");
···
 
 	const doc = parser.parseFromString(await response.text(), "text/xml");
 
-	return doc?.querySelector("type=image")?.textContent || null;
+	return doc?.querySelector("[type=wikidata] > target")?.textContent || null;
+}
+
+async function getWikidataThumbnail(
+	wikidataUrl: string,
+): Promise<string | null> {
+	try {
+		const urlParts = wikidataUrl.split("/");
+		const wikidataId = urlParts[urlParts.length - 1];
+		if (!wikidataId || !wikidataId.startsWith("Q")) {
+			console.error("Invalid Wikidata URL.");
+			return null;
+		}
+
+		const wikidataApiUrl = `https://www.wikidata.org/w/api.php?action=wbgetentities&ids=${wikidataId}&props=claims&format=json&origin=*`;
+		const wikidataResponse = await fetch(wikidataApiUrl, {
+			headers: defaultHeaders,
+		});
+		const wikidataData = await wikidataResponse.json();
+
+		const claims = wikidataData.entities[wikidataId]?.claims;
+		const imageClaim = claims?.P18?.[0]; // P18 is the property ID for 'image'
+
+		if (!imageClaim) {
+			console.log("No image found for this Wikidata item.");
+			return null;
+		}
+
+		const imageFilename = imageClaim.mainsnak.datavalue.value;
+		if (!imageFilename) {
+			console.error("Could not extract image filename.");
+			return null;
+		}
+
+		const commonsApiUrl = `https://commons.wikimedia.org/w/api.php?action=query&titles=File:${imageFilename}&prop=imageinfo&iiprop=url&iiurlwidth=300&format=json&origin=*`;
+		const commonsResponse = await fetch(commonsApiUrl, {
+			headers: defaultHeaders,
+		});
+		const commonsData = await commonsResponse.json();
+
+		const pages = commonsData.query.pages;
+		const pageId = Object.keys(pages)[0];
+		const imageUrl = pages[pageId]?.imageinfo?.[0]?.thumburl;
+
+		if (!imageUrl) {
+			console.error("Could not find image URL.");
+			return null;
+		}
+
+		return imageUrl;
+	} catch (error) {
+		console.error("An error occurred:", error);
+		return null;
+	}
 }