Merge pull request #174 from flo-bit/lastfm

lastfm cards

src/lib/cards/index.ts

···
 import { KickstarterCardDefinition } from './social/KickstarterCard';
 import { NpmxLikesCardDefinition } from './social/NpmxLikesCard';
 import { NpmxLikesLeaderboardCardDefinition } from './social/NpmxLikesLeaderboardCard';
+import { LastFMRecentTracksCardDefinition } from './media/LastFMCard/LastFMRecentTracksCard';
+import { LastFMTopTracksCardDefinition } from './media/LastFMCard/LastFMTopTracksCard';
+import { LastFMTopAlbumsCardDefinition } from './media/LastFMCard/LastFMTopAlbumsCard';
+import { LastFMProfileCardDefinition } from './media/LastFMCard/LastFMProfileCard';
 // import { Model3DCardDefinition } from './visual/Model3DCard';
 
 export const AllCardDefinitions = [
···
 	ProductHuntCardDefinition,
 	KickstarterCardDefinition,
 	NpmxLikesCardDefinition,
-	NpmxLikesLeaderboardCardDefinition
+	NpmxLikesLeaderboardCardDefinition,
+	LastFMRecentTracksCardDefinition,
+	LastFMTopTracksCardDefinition,
+	LastFMTopAlbumsCardDefinition,
+	LastFMProfileCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(

src/lib/cards/media/LastFMCard/CreateLastFMCardModal.svelte

···
+<script lang="ts">
+	import { Button, Input, Modal, Subheading } from '@foxui/core';
+	import type { CreationModalComponentProps } from '../../types';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let errorMessage = $state('');
+</script>
+
+<Modal open={true} closeButton={false}>
+	<form
+		onsubmit={() => {
+			let input = item.cardData.href?.trim();
+			if (!input) return;
+
+			let username: string | undefined;
+
+			try {
+				const parsed = new URL(input);
+				if (/^(www\.)?last\.fm$/.test(parsed.hostname)) {
+					const segments = parsed.pathname.split('/').filter(Boolean);
+					if (segments.length >= 2 && segments[0] === 'user') {
+						username = segments[1];
+					}
+				}
+			} catch {
+				if (/^[a-zA-Z0-9_-]{2,15}$/.test(input)) {
+					username = input;
+				}
+			}
+
+			if (!username) {
+				errorMessage = 'Please enter a valid Last.fm username or profile URL';
+				return;
+			}
+
+			item.cardData.lastfmUsername = username;
+			item.cardData.href = `https://www.last.fm/user/${username}`;
+
+			oncreate?.();
+		}}
+		class="flex flex-col gap-2"
+	>
+		<Subheading>Enter a Last.fm username or profile URL</Subheading>
+		<Input
+			bind:value={item.cardData.href}
+			placeholder="username or https://www.last.fm/user/username"
+			class="mt-4"
+		/>
+
+		{#if errorMessage}
+			<p class="mt-2 text-sm text-red-600">{errorMessage}</p>
+		{/if}
+
+		<div class="mt-4 flex justify-end gap-2">
+			<Button onclick={oncancel} variant="ghost">Cancel</Button>
+			<Button type="submit">Create</Button>
+		</div>
+	</form>
+</Modal>

src/lib/cards/media/LastFMCard/LastFMAlbumArt.svelte

···
+<script lang="ts">
+	let {
+		images,
+		alt = '',
+		size = 'medium'
+	}: { images?: { '#text': string; size: string }[]; alt?: string; size?: string } = $props();
+
+	let isLoading = $state(true);
+	let hasError = $state(false);
+
+	const imageUrl = $derived.by(() => {
+		if (!images || images.length === 0) return '';
+		const preferred = ['extralarge', 'large', 'medium', 'small'];
+		for (const pref of preferred) {
+			const img = images.find((i) => i.size === pref);
+			if (img?.['#text']) return img['#text'];
+		}
+		return images[images.length - 1]?.['#text'] || '';
+	});
+</script>
+
+{#if !imageUrl || hasError}
+	<div
+		class="bg-base-200 dark:bg-base-700 accent:bg-accent-700/50 flex h-full w-full items-center justify-center rounded-lg"
+	>
+		<svg
+			class="text-base-500 dark:text-base-400 accent:text-accent-200 h-5 w-5"
+			fill="currentColor"
+			viewBox="0 0 20 20"
+		>
+			<path
+				d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z"
+			/>
+		</svg>
+	</div>
+{:else}
+	{#if isLoading}
+		<div class="bg-base-200 dark:bg-base-800 h-full w-full animate-pulse rounded-lg"></div>
+	{/if}
+	<img
+		src={imageUrl}
+		{alt}
+		class="h-full w-full rounded-lg object-cover {isLoading && 'hidden'}"
+		onload={() => (isLoading = false)}
+		onerror={() => {
+			isLoading = false;
+			hasError = true;
+		}}
+	/>
+{/if}

src/lib/cards/media/LastFMCard/LastFMPeriodSettings.svelte

···
+<script lang="ts">
+	import type { SettingsComponentProps } from '../../types';
+	import { Label } from '@foxui/core';
+
+	let { item = $bindable() }: SettingsComponentProps = $props();
+
+	const periodOptions = [
+		{ value: '7day', label: '7 Days' },
+		{ value: '1month', label: '1 Month' },
+		{ value: '3month', label: '3 Months' },
+		{ value: '6month', label: '6 Months' },
+		{ value: '12month', label: '12 Months' },
+		{ value: 'overall', label: 'All Time' }
+	];
+
+	let period = $derived(item.cardData.period ?? '7day');
+</script>
+
+<div class="flex flex-col gap-2">
+	<Label>Time Period</Label>
+	<div class="flex flex-wrap gap-2">
+		{#each periodOptions as opt (opt.value)}
+			<button
+				class={[
+					'rounded-xl border px-3 py-2 text-sm transition-colors',
+					period === opt.value
+						? 'bg-accent-500 border-accent-500 text-white'
+						: 'bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 hover:border-accent-400'
+				]}
+				onclick={() => (item.cardData.period = opt.value)}
+			>
+				{opt.label}
+			</button>
+		{/each}
+	</div>
+</div>

src/lib/cards/media/LastFMCard/LastFMProfileCard/LastFMProfileCard.svelte

···
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { siLastdotfm } from 'simple-icons';
+	import { getAdditionalUserData } from '$lib/website/context';
+	import type { ContentComponentProps } from '../../../types';
+	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
+
+	interface UserInfo {
+		name: string;
+		realname: string;
+		url: string;
+		image: { '#text': string; size: string }[];
+		playcount: string;
+		registered: { unixtime: string };
+	}
+
+	let { item, isEditing }: ContentComponentProps = $props();
+
+	const data = getAdditionalUserData();
+	const cacheKey = $derived(`lastfmProfile:${item.cardData.lastfmUsername}`);
+
+	// svelte-ignore state_referenced_locally
+	let userInfo = $state(data[cacheKey] as UserInfo | undefined);
+
+	onMount(async () => {
+		if (userInfo) return;
+		if (!item.cardData.lastfmUsername) return;
+
+		try {
+			const response = await fetch(
+				`/api/lastfm?method=user.getInfo&user=${encodeURIComponent(item.cardData.lastfmUsername)}`
+			);
+			if (response.ok) {
+				const result = await response.json();
+				userInfo = result?.user;
+				data[cacheKey] = userInfo;
+			}
+		} catch (error) {
+			console.error('Failed to fetch Last.fm profile:', error);
+		}
+	});
+
+	const profileUrl = $derived(`https://www.last.fm/user/${item.cardData.lastfmUsername}`);
+
+	const avatarUrl = $derived.by(() => {
+		if (!userInfo?.image) return '';
+		const preferred = ['extralarge', 'large', 'medium'];
+		for (const pref of preferred) {
+			const img = userInfo.image.find((i) => i.size === pref);
+			if (img?.['#text']) return img['#text'];
+		}
+		return '';
+	});
+
+	const memberSince = $derived.by(() => {
+		if (!userInfo?.registered?.unixtime) return '';
+		const date = new Date(parseInt(userInfo.registered.unixtime) * 1000);
+		return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+	});
+</script>
+
+<div class="h-full overflow-hidden p-4">
+	<div class="flex h-full flex-col justify-between">
+		<div class="flex items-center gap-3">
+			<div
+				class="fill-base-950 accent:fill-white size-6 shrink-0 dark:fill-white [&_svg]:size-full"
+			>
+				{@html siLastdotfm.svg}
+			</div>
+			<span class="truncate text-2xl font-bold">
+				{item.cardData.lastfmUsername}
+			</span>
+		</div>
+
+		{#if userInfo}
+			<div class="flex items-center gap-4">
+				{#if avatarUrl}
+					<img src={avatarUrl} alt={userInfo.name} class="size-12 rounded-full object-cover" />
+				{/if}
+				<div class="min-w-0 flex-1">
+					<div class="text-lg font-semibold">
+						{parseInt(userInfo.playcount).toLocaleString()} scrobbles
+					</div>
+					{#if memberSince}
+						<div class="text-sm opacity-60">
+							Since {memberSince}
+						</div>
+					{/if}
+				</div>
+			</div>
+		{:else}
+			<div class="text-sm opacity-60">Loading profile...</div>
+		{/if}
+	</div>
+</div>
+
+{#if !isEditing}
+	<a
+		href={profileUrl}
+		class="absolute inset-0 h-full w-full"
+		target="_blank"
+		rel="noopener noreferrer"
+		use:qrOverlay={{
+			context: {
+				title: item.cardData.lastfmUsername,
+				icon: siLastdotfm.svg,
+				iconColor: '#' + siLastdotfm.hex
+			}
+		}}
+	>
+		<span class="sr-only">View on Last.fm</span>
+	</a>
+{/if}

src/lib/cards/media/LastFMCard/LastFMProfileCard/index.ts

···
+import type { CardDefinition } from '../../../types';
+import CreateLastFMCardModal from '../CreateLastFMCardModal.svelte';
+import LastFMProfileCard from './LastFMProfileCard.svelte';
+
+export const LastFMProfileCardDefinition = {
+	type: 'lastfmProfile',
+	contentComponent: LastFMProfileCard,
+	creationModalComponent: CreateLastFMCardModal,
+	createNew: (card) => {
+		card.w = 4;
+		card.mobileW = 8;
+		card.h = 2;
+		card.mobileH = 3;
+	},
+	loadData: async (items) => {
+		const allData: Record<string, unknown> = {};
+		for (const item of items) {
+			const username = item.cardData.lastfmUsername;
+			if (!username) continue;
+			try {
+				const response = await fetch(
+					`https://blento.app/api/lastfm?method=user.getInfo&user=${encodeURIComponent(username)}`
+				);
+				if (response.ok) {
+					const result = await response.json();
+					allData[`lastfmProfile:${username}`] = result?.user;
+				}
+			} catch (error) {
+				console.error('Failed to fetch Last.fm profile:', error);
+			}
+		}
+		return allData;
+	},
+	minW: 2,
+	minH: 2,
+	name: 'Last.fm Profile',
+	keywords: ['music', 'scrobble', 'profile', 'lastfm', 'last.fm'],
+	groups: ['Media'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553Z" /></svg>`
+} as CardDefinition & { type: 'lastfmProfile' };

src/lib/cards/media/LastFMCard/LastFMRecentTracksCard/LastFMRecentTracksCard.svelte

···
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { getAdditionalUserData } from '$lib/website/context';
+	import type { ContentComponentProps } from '../../../types';
+	import LastFMAlbumArt from '../LastFMAlbumArt.svelte';
+	import { RelativeTime } from '@foxui/time';
+
+	interface Track {
+		name: string;
+		artist: { '#text': string };
+		album: { '#text': string };
+		image: { '#text': string; size: string }[];
+		url: string;
+		date?: { uts: string };
+		'@attr'?: { nowplaying: string };
+	}
+
+	let { item }: ContentComponentProps = $props();
+
+	const data = getAdditionalUserData();
+	const cacheKey = $derived(`lastfmRecentTracks:${item.cardData.lastfmUsername}`);
+
+	// svelte-ignore state_referenced_locally
+	let tracks = $state(data[cacheKey] as Track[] | undefined);
+	let error = $state(false);
+
+	onMount(async () => {
+		if (tracks) return;
+		if (!item.cardData.lastfmUsername) return;
+
+		try {
+			const response = await fetch(
+				`/api/lastfm?method=user.getRecentTracks&user=${encodeURIComponent(item.cardData.lastfmUsername)}&limit=50`
+			);
+			if (response.ok) {
+				const result = await response.json();
+				tracks = result?.recenttracks?.track ?? [];
+				data[cacheKey] = tracks;
+			} else {
+				error = true;
+			}
+		} catch {
+			error = true;
+		}
+	});
+</script>
+
+<div class="z-10 flex h-full w-full flex-col gap-3 overflow-y-scroll p-4">
+	{#if tracks && tracks.length > 0}
+		{#each tracks as track, i (track.url + i)}
+			<a
+				href={track.url}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="flex w-full items-center gap-3"
+			>
+				<div class="size-10 shrink-0">
+					<LastFMAlbumArt images={track.image} alt={track.album?.['#text']} />
+				</div>
+				<div class="min-w-0 flex-1">
+					<div class="inline-flex w-full max-w-full justify-between gap-2">
+						<div
+							class="text-accent-500 accent:text-accent-950 min-w-0 flex-1 shrink truncate font-semibold"
+						>
+							{track.name}
+						</div>
+						{#if track['@attr']?.nowplaying === 'true'}
+							<div class="flex shrink-0 items-center gap-1 text-xs text-green-500">
+								<span class="inline-block size-2 animate-pulse rounded-full bg-green-500"></span>
+								Now
+							</div>
+						{:else if track.date?.uts}
+							<div class="shrink-0 text-xs">
+								<RelativeTime date={new Date(parseInt(track.date.uts) * 1000)} locale="en-US" /> ago
+							</div>
+						{/if}
+					</div>
+					<div class="my-1 min-w-0 truncate text-xs whitespace-nowrap">
+						{track.artist?.['#text']}
+					</div>
+				</div>
+			</a>
+		{/each}
+	{:else if error}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+		>
+			Failed to load tracks.
+		</div>
+	{:else if tracks}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+		>
+			No recent tracks found.
+		</div>
+	{:else}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+		>
+			Loading tracks...
+		</div>
+	{/if}
+</div>

src/lib/cards/media/LastFMCard/LastFMRecentTracksCard/index.ts

···
+import type { CardDefinition } from '../../../types';
+import CreateLastFMCardModal from '../CreateLastFMCardModal.svelte';
+import LastFMRecentTracksCard from './LastFMRecentTracksCard.svelte';
+
+export const LastFMRecentTracksCardDefinition = {
+	type: 'lastfmRecentTracks',
+	contentComponent: LastFMRecentTracksCard,
+	creationModalComponent: CreateLastFMCardModal,
+	createNew: (card) => {
+		card.w = 4;
+		card.mobileW = 8;
+		card.h = 3;
+		card.mobileH = 6;
+	},
+	loadData: async (items) => {
+		const allData: Record<string, unknown> = {};
+		for (const item of items) {
+			const username = item.cardData.lastfmUsername;
+			if (!username) continue;
+			try {
+				const response = await fetch(
+					`https://blento.app/api/lastfm?method=user.getRecentTracks&user=${encodeURIComponent(username)}&limit=50`
+				);
+				if (response.ok) {
+					const result = await response.json();
+					allData[`lastfmRecentTracks:${username}`] = result?.recenttracks?.track ?? [];
+				}
+			} catch (error) {
+				console.error('Failed to fetch Last.fm recent tracks:', error);
+			}
+		}
+		return allData;
+	},
+	onUrlHandler: (url, item) => {
+		const username = getLastFMUsername(url);
+		if (!username) return null;
+
+		item.cardData.lastfmUsername = username;
+		item.cardData.href = `https://www.last.fm/user/${username}`;
+		item.w = 4;
+		item.mobileW = 8;
+		item.h = 3;
+		item.mobileH = 6;
+		item.cardType = 'lastfmRecentTracks';
+		return item;
+	},
+	urlHandlerPriority: 5,
+	minW: 3,
+	minH: 2,
+	canHaveLabel: true,
+	name: 'Last.fm Recent Tracks',
+	keywords: ['music', 'scrobble', 'listening', 'songs', 'lastfm', 'last.fm'],
+	groups: ['Media'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553Z" /></svg>`
+} as CardDefinition & { type: 'lastfmRecentTracks' };
+
+function getLastFMUsername(url: string | undefined): string | undefined {
+	if (!url) return;
+	try {
+		const parsed = new URL(url);
+		if (!/^(www\.)?last\.fm$/.test(parsed.hostname)) return undefined;
+		const segments = parsed.pathname.split('/').filter(Boolean);
+		if (segments.length >= 2 && segments[0] === 'user') {
+			return segments[1];
+		}
+		return undefined;
+	} catch {
+		return undefined;
+	}
+}

src/lib/cards/media/LastFMCard/LastFMTopAlbumsCard/LastFMTopAlbumsCard.svelte

···
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { ContentComponentProps } from '../../../types';
+	import { getAdditionalUserData } from '$lib/website/context';
+	import ImageGrid from '$lib/components/ImageGrid.svelte';
+
+	interface Album {
+		name: string;
+		playcount: string;
+		url: string;
+		artist: { name: string; url: string };
+		image: { '#text': string; size: string }[];
+	}
+
+	let { item }: ContentComponentProps = $props();
+
+	const data = getAdditionalUserData();
+
+	let period = $derived(item.cardData.period ?? '7day');
+	let layout: 'grid' | 'cinema' = $derived(item.cardData.layout ?? 'grid');
+	const cacheKey = $derived(`lastfmTopAlbums:${item.cardData.lastfmUsername}:${period}`);
+
+	// svelte-ignore state_referenced_locally
+	let albums = $state(data[cacheKey] as Album[] | undefined);
+	let loading = $state(false);
+	let error = $state(false);
+
+	async function fetchAlbums() {
+		if (!item.cardData.lastfmUsername) return;
+		loading = true;
+
+		try {
+			const response = await fetch(
+				`/api/lastfm?method=user.getTopAlbums&user=${encodeURIComponent(item.cardData.lastfmUsername)}&period=${period}&limit=50`
+			);
+			if (response.ok) {
+				const result = await response.json();
+				albums = result?.topalbums?.album ?? [];
+				data[cacheKey] = albums;
+			} else {
+				error = true;
+			}
+		} catch {
+			error = true;
+		} finally {
+			loading = false;
+		}
+	}
+
+	onMount(() => {
+		if (!albums) fetchAlbums();
+	});
+
+	$effect(() => {
+		const _period = period;
+		const cached = data[cacheKey] as Album[] | undefined;
+		if (cached) {
+			albums = cached;
+		} else {
+			fetchAlbums();
+		}
+	});
+
+	function getImageUrl(album: Album): string | null {
+		if (!album.image || album.image.length === 0) return null;
+		const preferred = ['extralarge', 'large', 'medium', 'small'];
+		for (const pref of preferred) {
+			const img = album.image.find((i) => i.size === pref);
+			if (img?.['#text']) return img['#text'];
+		}
+		return album.image[album.image.length - 1]?.['#text'] || null;
+	}
+
+	let gridItems = $derived(
+		(albums ?? []).map((album) => ({
+			imageUrl: getImageUrl(album),
+			link: album.url,
+			label: `${album.name} - ${album.artist.name}`
+		}))
+	);
+</script>
+
+{#if error}
+	<div class="flex h-full w-full items-center justify-center">
+		<span class="text-base-500 dark:text-base-400 accent:text-white/60 text-sm">
+			Failed to load albums.
+		</span>
+	</div>
+{:else if albums && gridItems.length > 0}
+	<ImageGrid items={gridItems} {layout} tooltip />
+{:else if loading || !albums}
+	<div class="flex h-full w-full items-center justify-center">
+		<span class="text-base-500 dark:text-base-400 accent:text-white/60 text-sm">
+			Loading albums...
+		</span>
+	</div>
+{:else}
+	<div class="flex h-full w-full items-center justify-center">
+		<span class="text-base-500 dark:text-base-400 accent:text-white/60 text-sm">
+			No top albums found.
+		</span>
+	</div>
+{/if}

src/lib/cards/media/LastFMCard/LastFMTopAlbumsCard/LastFMTopAlbumsCardSettings.svelte

···
+<script lang="ts">
+	import type { SettingsComponentProps } from '../../../types';
+	import { Label } from '@foxui/core';
+
+	let { item = $bindable() }: SettingsComponentProps = $props();
+
+	const periodOptions = [
+		{ value: '7day', label: '7 Days' },
+		{ value: '1month', label: '1 Month' },
+		{ value: '3month', label: '3 Months' },
+		{ value: '6month', label: '6 Months' },
+		{ value: '12month', label: '12 Months' },
+		{ value: 'overall', label: 'All Time' }
+	];
+
+	const layoutOptions = [
+		{ value: 'grid', label: 'Grid' },
+		{ value: 'cinema', label: 'Cinema' }
+	];
+
+	let period = $derived(item.cardData.period ?? '7day');
+	let layout = $derived(item.cardData.layout ?? 'grid');
+</script>
+
+<div class="flex flex-col gap-4">
+	<div class="flex flex-col gap-2">
+		<Label>Time Period</Label>
+		<div class="flex flex-wrap gap-2">
+			{#each periodOptions as opt (opt.value)}
+				<button
+					class={[
+						'rounded-xl border px-3 py-2 text-sm transition-colors',
+						period === opt.value
+							? 'bg-accent-500 border-accent-500 text-white'
+							: 'bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 hover:border-accent-400'
+					]}
+					onclick={() => (item.cardData.period = opt.value)}
+				>
+					{opt.label}
+				</button>
+			{/each}
+		</div>
+	</div>
+
+	<div class="flex flex-col gap-2">
+		<Label>Layout</Label>
+		<div class="flex gap-2">
+			{#each layoutOptions as opt (opt.value)}
+				<button
+					class={[
+						'flex-1 rounded-xl border px-3 py-2 text-sm transition-colors',
+						layout === opt.value
+							? 'bg-accent-500 border-accent-500 text-white'
+							: 'bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 hover:border-accent-400'
+					]}
+					onclick={() => (item.cardData.layout = opt.value)}
+				>
+					{opt.label}
+				</button>
+			{/each}
+		</div>
+	</div>
+</div>

src/lib/cards/media/LastFMCard/LastFMTopAlbumsCard/index.ts

···
+import type { CardDefinition } from '../../../types';
+import CreateLastFMCardModal from '../CreateLastFMCardModal.svelte';
+import LastFMTopAlbumsCard from './LastFMTopAlbumsCard.svelte';
+import LastFMTopAlbumsCardSettings from './LastFMTopAlbumsCardSettings.svelte';
+
+export const LastFMTopAlbumsCardDefinition = {
+	type: 'lastfmTopAlbums',
+	contentComponent: LastFMTopAlbumsCard,
+	creationModalComponent: CreateLastFMCardModal,
+	settingsComponent: LastFMTopAlbumsCardSettings,
+	createNew: (card) => {
+		card.w = 4;
+		card.h = 3;
+		card.mobileW = 8;
+		card.mobileH = 4;
+		card.cardData.period = '7day';
+	},
+	loadData: async (items) => {
+		const allData: Record<string, unknown> = {};
+		for (const item of items) {
+			const username = item.cardData.lastfmUsername;
+			const period = item.cardData.period ?? '7day';
+			if (!username) continue;
+			try {
+				const response = await fetch(
+					`https://blento.app/api/lastfm?method=user.getTopAlbums&user=${encodeURIComponent(username)}&period=${period}&limit=50`
+				);
+				if (response.ok) {
+					const result = await response.json();
+					allData[`lastfmTopAlbums:${username}:${period}`] = result?.topalbums?.album ?? [];
+				}
+			} catch (error) {
+				console.error('Failed to fetch Last.fm top albums:', error);
+			}
+		}
+		return allData;
+	},
+	allowSetColor: true,
+	defaultColor: 'base',
+	minW: 2,
+	minH: 2,
+	canHaveLabel: true,
+	name: 'Last.fm Top Albums',
+	keywords: ['music', 'scrobble', 'albums', 'lastfm', 'last.fm', 'top'],
+	groups: ['Media'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553Z" /></svg>`
+} as CardDefinition & { type: 'lastfmTopAlbums' };

src/lib/cards/media/LastFMCard/LastFMTopTracksCard/LastFMTopTracksCard.svelte

···
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { getAdditionalUserData } from '$lib/website/context';
+	import type { ContentComponentProps } from '../../../types';
+	import LastFMAlbumArt from '../LastFMAlbumArt.svelte';
+
+	interface Track {
+		name: string;
+		playcount: string;
+		artist: { name: string; url: string };
+		image: { '#text': string; size: string }[];
+		url: string;
+	}
+
+	let { item }: ContentComponentProps = $props();
+
+	const data = getAdditionalUserData();
+
+	let period = $derived(item.cardData.period ?? '7day');
+	const cacheKey = $derived(`lastfmTopTracks:${item.cardData.lastfmUsername}:${period}`);
+
+	// svelte-ignore state_referenced_locally
+	let tracks = $state(data[cacheKey] as Track[] | undefined);
+	let error = $state(false);
+	let loading = $state(false);
+
+	async function fetchTracks() {
+		if (!item.cardData.lastfmUsername) return;
+		loading = true;
+
+		try {
+			const response = await fetch(
+				`/api/lastfm?method=user.getTopTracks&user=${encodeURIComponent(item.cardData.lastfmUsername)}&period=${period}&limit=50`
+			);
+			if (response.ok) {
+				const result = await response.json();
+				tracks = result?.toptracks?.track ?? [];
+				data[cacheKey] = tracks;
+			} else {
+				error = true;
+			}
+		} catch {
+			error = true;
+		} finally {
+			loading = false;
+		}
+	}
+
+	onMount(() => {
+		if (!tracks) fetchTracks();
+	});
+
+	$effect(() => {
+		const _period = period;
+		const cached = data[cacheKey] as Track[] | undefined;
+		if (cached) {
+			tracks = cached;
+		} else {
+			fetchTracks();
+		}
+	});
+</script>
+
+<div class="z-10 flex h-full w-full flex-col gap-3 overflow-y-scroll p-4">
+	{#if tracks && tracks.length > 0}
+		{#each tracks as track, i (track.url)}
+			<a
+				href={track.url}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="flex w-full items-center gap-3"
+			>
+				<div
+					class="text-base-400 dark:text-base-500 accent:text-white/40 w-5 shrink-0 text-right text-xs font-bold"
+				>
+					{i + 1}
+				</div>
+				<div class="size-10 shrink-0">
+					<LastFMAlbumArt images={track.image} alt={track.name} />
+				</div>
+				<div class="min-w-0 flex-1">
+					<div class="inline-flex w-full max-w-full justify-between gap-2">
+						<div
+							class="text-accent-500 accent:text-accent-950 min-w-0 flex-1 shrink truncate font-semibold"
+						>
+							{track.name}
+						</div>
+						<div class="shrink-0 text-xs">
+							{parseInt(track.playcount).toLocaleString()} plays
+						</div>
+					</div>
+					<div class="my-1 min-w-0 truncate text-xs whitespace-nowrap">
+						{track.artist?.name}
+					</div>
+				</div>
+			</a>
+		{/each}
+	{:else if error}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+		>
+			Failed to load tracks.
+		</div>
+	{:else if tracks || loading}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+		>
+			{tracks?.length === 0 ? 'No top tracks found.' : 'Loading tracks...'}
+		</div>
+	{:else}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+		>
+			Loading tracks...
+		</div>
+	{/if}
+</div>

src/lib/cards/media/LastFMCard/LastFMTopTracksCard/index.ts

···
+import type { CardDefinition } from '../../../types';
+import CreateLastFMCardModal from '../CreateLastFMCardModal.svelte';
+import LastFMPeriodSettings from '../LastFMPeriodSettings.svelte';
+import LastFMTopTracksCard from './LastFMTopTracksCard.svelte';
+
+export const LastFMTopTracksCardDefinition = {
+	type: 'lastfmTopTracks',
+	contentComponent: LastFMTopTracksCard,
+	creationModalComponent: CreateLastFMCardModal,
+	settingsComponent: LastFMPeriodSettings,
+	createNew: (card) => {
+		card.w = 4;
+		card.mobileW = 8;
+		card.h = 3;
+		card.mobileH = 6;
+		card.cardData.period = '7day';
+	},
+	loadData: async (items) => {
+		const allData: Record<string, unknown> = {};
+		for (const item of items) {
+			const username = item.cardData.lastfmUsername;
+			const period = item.cardData.period ?? '7day';
+			if (!username) continue;
+			try {
+				const response = await fetch(
+					`https://blento.app/api/lastfm?method=user.getTopTracks&user=${encodeURIComponent(username)}&period=${period}&limit=50`
+				);
+				if (response.ok) {
+					const result = await response.json();
+					allData[`lastfmTopTracks:${username}:${period}`] = result?.toptracks?.track ?? [];
+				}
+			} catch (error) {
+				console.error('Failed to fetch Last.fm top tracks:', error);
+			}
+		}
+		return allData;
+	},
+	minW: 3,
+	minH: 2,
+	canHaveLabel: true,
+	name: 'Last.fm Top Tracks',
+	keywords: ['music', 'scrobble', 'songs', 'lastfm', 'last.fm', 'top'],
+	groups: ['Media'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553Z" /></svg>`
+} as CardDefinition & { type: 'lastfmTopTracks' };

src/lib/cards/social/GitHubContributorsCard/GitHubContributorsCard.svelte

···
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import type { ContentComponentProps } from '../../types';
-	import { getAdditionalUserData, getCanEdit, getIsMobile } from '$lib/website/context';
+	import { getAdditionalUserData, getCanEdit } from '$lib/website/context';
 	import type { GitHubContributor, GitHubContributorsLoadedData } from '.';
+	import ImageGrid from '$lib/components/ImageGrid.svelte';
 
 	let { item }: ContentComponentProps = $props();
 
-	const isMobile = getIsMobile();
 	const canEdit = getCanEdit();
 	const additionalData = getAdditionalUserData();
 
···
 		}
 	}
 
-	let containerWidth = $state(0);
-	let containerHeight = $state(0);
-
-	let totalItems = $derived(namedContributors.length);
-
-	const GAP = 6;
-	const MIN_SIZE = 16;
-	const MAX_SIZE = 120;
-
-	function cinemaCapacity(size: number, availW: number, availH: number): number {
-		const colsWide = Math.floor((availW + GAP) / (size + GAP));
-		if (colsWide < 1) return 0;
-		const colsNarrow = Math.max(1, colsWide - 1);
-		const maxRows = Math.floor((availH + GAP) / (size + GAP));
-		let capacity = 0;
-		// Pattern: narrow, wide, narrow, wide... (row 0 is narrow)
-		for (let r = 0; r < maxRows; r++) {
-			capacity += r % 2 === 0 ? colsNarrow : colsWide;
-		}
-		return capacity;
-	}
-
-	function gridCapacity(size: number, availW: number, availH: number): number {
-		const cols = Math.floor((availW + GAP) / (size + GAP));
-		const rows = Math.floor((availH + GAP) / (size + GAP));
-		return cols * rows;
-	}
-
-	let computedSize = $derived.by(() => {
-		if (!containerWidth || !containerHeight || totalItems === 0) return 40;
-
-		let lo = MIN_SIZE;
-		let hi = MAX_SIZE;
-		const capacityFn = layout === 'cinema' ? cinemaCapacity : gridCapacity;
-
-		while (lo <= hi) {
-			const mid = Math.floor((lo + hi) / 2);
-			const availW = containerWidth - (layout === 'cinema' ? mid / 2 : 0);
-			const availH = containerHeight - (layout === 'cinema' ? mid / 2 : 0);
-			if (availW <= 0 || availH <= 0) {
-				hi = mid - 1;
-				continue;
-			}
-			if (capacityFn(mid, availW, availH) >= totalItems) {
-				lo = mid + 1;
-			} else {
-				hi = mid - 1;
-			}
-		}
-
-		return Math.max(MIN_SIZE, hi);
-	});
-
-	let padding = $derived(layout === 'cinema' ? computedSize / 4 : 0);
-
-	let rows = $derived.by(() => {
-		const availW = containerWidth - (layout === 'cinema' ? computedSize / 4 : 0);
-		if (availW <= 0) return [] as GitHubContributor[][];
-
-		const colsWide = Math.floor((availW + GAP) / (computedSize + GAP));
-		const colsNarrow = layout === 'cinema' ? Math.max(1, colsWide - 1) : colsWide;
-
-		// Calculate row sizes from bottom up, then reverse for incomplete row at top
-		const rowSizes: number[] = [];
-		let remaining = namedContributors.length;
-		let rowNum = 0;
-		while (remaining > 0) {
-			const cols = layout === 'cinema' && rowNum % 2 === 0 ? colsNarrow : colsWide;
-			rowSizes.push(Math.min(cols, remaining));
-			remaining -= cols;
-			rowNum++;
-		}
-		rowSizes.reverse();
-
-		// Fill rows with contributors in order
-		const result: GitHubContributor[][] = [];
-		let idx = 0;
-		for (const size of rowSizes) {
-			result.push(namedContributors.slice(idx, idx + size));
-			idx += size;
-		}
-		return result;
-	});
-
-	let textSize = $derived(
-		computedSize < 24 ? 'text-[10px]' : computedSize < 40 ? 'text-xs' : 'text-sm'
+	let gridItems = $derived(
+		namedContributors.map((c) => ({
+			imageUrl: c.avatarUrl,
+			link: `https://github.com/${c.username}`,
+			label: c.username
+		}))
 	);
-
-	let shapeClass = $derived(shape === 'circle' ? 'rounded-full' : 'rounded-lg');
 </script>
 
-<div
-	class="flex h-full w-full items-center justify-center overflow-hidden px-2"
-	bind:clientWidth={containerWidth}
-	bind:clientHeight={containerHeight}
->
-	{#if !owner || !repo}
-		{#if canEdit()}
+{#if !owner || !repo}
+	{#if canEdit()}
+		<div class="flex h-full w-full items-center justify-center">
 			<span class="text-base-400 dark:text-base-500 accent:text-accent-300 text-sm">
 				Enter a repository
 			</span>
-		{/if}
-	{:else if totalItems > 0}
-		<div style="padding: {padding}px;">
-			<div class="flex flex-col items-center" style="gap: {GAP}px;">
-				{#each rows as row, rowIdx (rowIdx)}
-					<div class="flex justify-center" style="gap: {GAP}px;">
-						{#each row as contributor (contributor.username)}
-							<a
-								href="https://github.com/{contributor.username}"
-								target="_blank"
-								rel="noopener noreferrer"
-								class="accent:ring-accent-500 block {shapeClass} ring-2 ring-white transition-transform hover:scale-110 dark:ring-neutral-900"
-							>
-								{#if contributor.avatarUrl}
-									<img
-										src={contributor.avatarUrl}
-										alt={contributor.username}
-										class="{shapeClass} object-cover"
-										style="width: {computedSize}px; height: {computedSize}px;"
-									/>
-								{:else}
-									<div
-										class="bg-base-200 dark:bg-base-700 accent:bg-accent-400 flex items-center justify-center {shapeClass}"
-										style="width: {computedSize}px; height: {computedSize}px;"
-									>
-										<span
-											class="text-base-500 dark:text-base-400 accent:text-accent-100 {textSize} font-medium"
-										>
-											{contributor.username.charAt(0).toUpperCase()}
-										</span>
-									</div>
-								{/if}
-							</a>
-						{/each}
-					</div>
-				{/each}
-			</div>
 		</div>
 	{/if}
-</div>
+{:else}
+	<ImageGrid items={gridItems} {layout} {shape} tooltip />
+{/if}

src/lib/cards/social/NpmxLikesLeaderboardCard/NpmxLikesLeaderboardCard.svelte

···
 			{/each}
 		</div>
 		<div
-			class="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-12 bg-linear-to-t from-base-200 from-40% to-transparent dark:from-base-950 accent:from-accent-500"
+			class="from-base-200 dark:from-base-950 accent:from-accent-500 pointer-events-none absolute inset-x-0 bottom-0 z-10 h-12 bg-linear-to-t from-40% to-transparent"
 		></div>
 		<div
 			class="text-base-500 dark:text-base-400 accent:text-white/60 bg-base-200 dark:bg-base-950/50 accent:bg-accent-500/20 relative z-10 flex shrink-0 items-center justify-center gap-3 px-4 pb-3 text-xs"

src/lib/components/ImageGrid.svelte

···
+<script lang="ts">
+	import { Tooltip } from 'bits-ui';
+
+	export type ImageGridItem = {
+		imageUrl: string | null;
+		link: string;
+		label: string;
+	};
+
+	let {
+		items,
+		layout = 'grid',
+		shape = 'square',
+		tooltip = false
+	}: {
+		items: ImageGridItem[];
+		layout?: 'grid' | 'cinema';
+		shape?: 'square' | 'circle';
+		tooltip?: boolean;
+	} = $props();
+
+	let containerWidth = $state(0);
+	let containerHeight = $state(0);
+
+	let totalItems = $derived(items.length);
+
+	const GAP = 6;
+	const MIN_SIZE = 16;
+	const MAX_SIZE = 120;
+
+	function cinemaCapacity(size: number, availW: number, availH: number): number {
+		const colsWide = Math.floor((availW + GAP) / (size + GAP));
+		if (colsWide < 1) return 0;
+		const colsNarrow = Math.max(1, colsWide - 1);
+		const maxRows = Math.floor((availH + GAP) / (size + GAP));
+		let capacity = 0;
+		for (let r = 0; r < maxRows; r++) {
+			capacity += r % 2 === 0 ? colsNarrow : colsWide;
+		}
+		return capacity;
+	}
+
+	function gridCapacity(size: number, availW: number, availH: number): number {
+		const cols = Math.floor((availW + GAP) / (size + GAP));
+		const rows = Math.floor((availH + GAP) / (size + GAP));
+		return cols * rows;
+	}
+
+	let computedSize = $derived.by(() => {
+		if (!containerWidth || !containerHeight || totalItems === 0) return 40;
+
+		let lo = MIN_SIZE;
+		let hi = MAX_SIZE;
+		const capacityFn = layout === 'cinema' ? cinemaCapacity : gridCapacity;
+
+		while (lo <= hi) {
+			const mid = Math.floor((lo + hi) / 2);
+			const availW = containerWidth - (layout === 'cinema' ? mid / 2 : 0);
+			const availH = containerHeight - (layout === 'cinema' ? mid / 2 : 0);
+			if (availW <= 0 || availH <= 0) {
+				hi = mid - 1;
+				continue;
+			}
+			if (capacityFn(mid, availW, availH) >= totalItems) {
+				lo = mid + 1;
+			} else {
+				hi = mid - 1;
+			}
+		}
+
+		return Math.max(MIN_SIZE, hi);
+	});
+
+	let padding = $derived(layout === 'cinema' ? computedSize / 4 : 0);
+
+	let rows = $derived.by(() => {
+		const availW = containerWidth - (layout === 'cinema' ? computedSize / 4 : 0);
+		if (availW <= 0) return [] as ImageGridItem[][];
+
+		const colsWide = Math.floor((availW + GAP) / (computedSize + GAP));
+		const colsNarrow = layout === 'cinema' ? Math.max(1, colsWide - 1) : colsWide;
+
+		const rowSizes: number[] = [];
+		let remaining = items.length;
+		let rowNum = 0;
+		while (remaining > 0) {
+			const cols = layout === 'cinema' && rowNum % 2 === 0 ? colsNarrow : colsWide;
+			rowSizes.push(Math.min(cols, remaining));
+			remaining -= cols;
+			rowNum++;
+		}
+		rowSizes.reverse();
+
+		const result: ImageGridItem[][] = [];
+		let idx = 0;
+		for (const size of rowSizes) {
+			result.push(items.slice(idx, idx + size));
+			idx += size;
+		}
+		return result;
+	});
+
+	let textSize = $derived(
+		computedSize < 24 ? 'text-[10px]' : computedSize < 40 ? 'text-xs' : 'text-sm'
+	);
+
+	let shapeClass = $derived(shape === 'circle' ? 'rounded-full' : 'rounded-lg');
+</script>
+
+{#snippet gridItem(item: ImageGridItem)}
+	{#if item.imageUrl}
+		<img
+			src={item.imageUrl}
+			alt={item.label}
+			class="{shapeClass} object-cover"
+			style="width: {computedSize}px; height: {computedSize}px;"
+		/>
+	{:else}
+		<div
+			class="bg-base-200 dark:bg-base-700 accent:bg-accent-400 flex items-center justify-center {shapeClass}"
+			style="width: {computedSize}px; height: {computedSize}px;"
+		>
+			<span class="text-base-500 dark:text-base-400 accent:text-accent-100 {textSize} font-medium">
+				{item.label.charAt(0).toUpperCase()}
+			</span>
+		</div>
+	{/if}
+{/snippet}
+
+<div
+	class="flex h-full w-full items-center justify-center overflow-hidden px-2"
+	bind:clientWidth={containerWidth}
+	bind:clientHeight={containerHeight}
+>
+	{#if totalItems > 0}
+		<div style="padding: {padding}px;">
+			<div class="flex flex-col items-center" style="gap: {GAP}px;">
+				{#each rows as row, rowIdx (rowIdx)}
+					<div class="flex justify-center" style="gap: {GAP}px;">
+						{#each row as item (item.link)}
+							{#if tooltip}
+								<Tooltip.Root>
+									<Tooltip.Trigger>
+										<a
+											href={item.link}
+											target="_blank"
+											rel="noopener noreferrer"
+											class="accent:ring-accent-500 block {shapeClass} ring-2 ring-white transition-transform hover:scale-110 dark:ring-neutral-900"
+										>
+											{@render gridItem(item)}
+										</a>
+									</Tooltip.Trigger>
+									<Tooltip.Portal>
+										<Tooltip.Content
+											side="top"
+											sideOffset={4}
+											class="bg-base-900 dark:bg-base-800 text-base-100 z-50 rounded-lg px-3 py-1.5 text-xs font-medium shadow-md"
+										>
+											{item.label}
+										</Tooltip.Content>
+									</Tooltip.Portal>
+								</Tooltip.Root>
+							{:else}
+								<a
+									href={item.link}
+									target="_blank"
+									rel="noopener noreferrer"
+									class="accent:ring-accent-500 block {shapeClass} ring-2 ring-white transition-transform hover:scale-110 dark:ring-neutral-900"
+									title={item.label}
+								>
+									{@render gridItem(item)}
+								</a>
+							{/if}
+						{/each}
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>

src/lib/website/ThemeScript.svelte

···
 	} = $props();
 
 	const allAccentColors = [
-		'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal',
-		'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'
+		'red',
+		'orange',
+		'amber',
+		'yellow',
+		'lime',
+		'green',
+		'emerald',
+		'teal',
+		'cyan',
+		'sky',
+		'blue',
+		'indigo',
+		'violet',
+		'purple',
+		'fuchsia',
+		'pink',
+		'rose'
 	];
 	const allBaseColors = ['gray', 'stone', 'zinc', 'neutral', 'slate'];
 

src/routes/+layout.svelte

···
 <script lang="ts">
 	import '../app.css';
 
+	import { Tooltip } from 'bits-ui';
 	import { ThemeToggle, Toaster, toast } from '@foxui/core';
 	import { onMount } from 'svelte';
 	import { initClient } from '$lib/atproto';
···
 	});
 </script>
 
-{@render children()}
+<Tooltip.Provider delayDuration={300}>
+	{@render children()}
+</Tooltip.Provider>
 
 <ThemeToggle class="fixed top-2 left-2 z-10" />
 <Toaster />

src/routes/api/lastfm/+server.ts

···
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { env } from '$env/dynamic/private';
+
+const LASTFM_API_URL = 'https://ws.audioscrobbler.com/2.0/';
+
+const ALLOWED_METHODS = [
+	'user.getRecentTracks',
+	'user.getTopTracks',
+	'user.getTopAlbums',
+	'user.getInfo'
+];
+
+const CACHE_TTL: Record<string, number> = {
+	'user.getRecentTracks': 15 * 60 * 1000,
+	'user.getTopTracks': 60 * 60 * 1000,
+	'user.getTopAlbums': 60 * 60 * 1000,
+	'user.getInfo': 12 * 60 * 60 * 1000
+};
+
+export const GET: RequestHandler = async ({ url, platform }) => {
+	const method = url.searchParams.get('method');
+	const user = url.searchParams.get('user');
+	const period = url.searchParams.get('period') || '7day';
+	const limit = url.searchParams.get('limit') || '50';
+
+	if (!method || !user) {
+		return json({ error: 'Missing method or user parameter' }, { status: 400 });
+	}
+
+	if (!ALLOWED_METHODS.includes(method)) {
+		return json({ error: 'Method not allowed' }, { status: 400 });
+	}
+
+	const cacheKey = `#lastfm:${method}:${user}:${period}:${limit}`;
+	const cachedData = await platform?.env?.USER_DATA_CACHE?.get(cacheKey);
+
+	if (cachedData) {
+		const parsed = JSON.parse(cachedData);
+		const ttl = CACHE_TTL[method] || 60 * 60 * 1000;
+
+		if (Date.now() - (parsed._cachedAt || 0) < ttl) {
+			return json(parsed);
+		}
+	}
+
+	const apiKey = env?.LASTFM_API_KEY;
+	if (!apiKey) {
+		return json({ error: 'Last.fm API key not configured' }, { status: 500 });
+	}
+
+	try {
+		const params = new URLSearchParams({
+			method,
+			user,
+			api_key: apiKey,
+			format: 'json',
+			limit
+		});
+
+		if (method === 'user.getTopTracks' || method === 'user.getTopAlbums') {
+			params.set('period', period);
+		}
+
+		const response = await fetch(`${LASTFM_API_URL}?${params}`);
+
+		if (!response.ok) {
+			return json(
+				{ error: 'Failed to fetch Last.fm data: ' + response.statusText },
+				{ status: response.status }
+			);
+		}
+
+		const data = await response.json();
+
+		if (data.error) {
+			return json({ error: data.message || 'Last.fm API error' }, { status: 400 });
+		}
+
+		data._cachedAt = Date.now();
+
+		await platform?.env?.USER_DATA_CACHE?.put(cacheKey, JSON.stringify(data));
+
+		return json(data);
+	} catch (error) {
+		console.error('Error fetching Last.fm data:', error);
+		return json({ error: 'Failed to fetch Last.fm data' }, { status: 500 });
+	}
+};