From 48d4fc6db2e4e5453871932baac157f7ec021dbc Mon Sep 17 00:00:00 2001
From: Ewan Croft <git@ewancroft.uk>
Date: Thu, 13 Nov 2025 21:53:54 +0000
Subject: [PATCH] feat: introduce MusicStatusCard and replace status card on
 homepage

---
 .../layout/main/card/MusicStatusCard.svelte   | 161 ++++++++++++++++++
 src/routes/+page.svelte                       |   5 +-
 2 files changed, 163 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/layout/main/card/MusicStatusCard.svelte

diff --git a/src/lib/components/layout/main/card/MusicStatusCard.svelte b/src/lib/components/layout/main/card/MusicStatusCard.svelte
new file mode 100644
index 0000000..fda60e7
--- /dev/null
+++ b/src/lib/components/layout/main/card/MusicStatusCard.svelte
@@ -0,0 +1,161 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Card } from '$lib/components/ui';
+	import { fetchMusicStatus, type MusicStatusData } from '$lib/services/atproto';
+	import { formatRelativeTime } from '$lib/utils/formatDate';
+	import { Music, Disc3 } from '@lucide/svelte';
+
+	let musicStatus: MusicStatusData | null = null;
+	let loading = true;
+	let error: string | null = null;
+	let artworkError = false;
+
+	onMount(async () => {
+		try {
+			musicStatus = await fetchMusicStatus();
+			if (musicStatus) {
+				console.log('[MusicStatusCard] Music status loaded:', musicStatus);
+				console.log('[MusicStatusCard] Artwork URL:', musicStatus.artworkUrl);
+				console.log('[MusicStatusCard] Release MBID:', musicStatus.releaseMbId);
+			}
+		} catch (err) {
+			console.error('[MusicStatusCard] Error loading music status:', err);
+			error = err instanceof Error ? err.message : 'Failed to load music status';
+		} finally {
+			loading = false;
+		}
+	});
+
+	function formatArtists(artists: { artistName: string }[]): string {
+		if (!artists || artists.length === 0) return 'Unknown Artist';
+		return artists.map(a => a.artistName).join(', ');
+	}
+
+	function formatDuration(seconds?: number): string {
+		if (!seconds) return '';
+		const minutes = Math.floor(seconds / 60);
+		const remainingSeconds = seconds % 60;
+		return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+	}
+
+	function formatServiceName(domain?: string): string {
+		if (!domain) return '';
+		return domain.replace('lastfm', 'Last.fm').replace('last.fm', 'Last.fm');
+	}
+
+	function handleImageError(event: Event) {
+		console.error('[MusicStatusCard] Artwork failed to load');
+		artworkError = true;
+	}
+</script>
+
+<div class="mx-auto w-full max-w-2xl">
+	{#if loading}
+		<Card loading={true} variant="elevated" padding="md">
+			{#snippet skeleton()}
+				<div class="mb-3 flex items-start gap-4">
+					<div class="h-20 w-20 flex-shrink-0 rounded-lg bg-canvas-300 dark:bg-canvas-700"></div>
+					<div class="flex-1">
+						<div class="mb-2 flex items-center gap-2">
+							<div class="h-4 w-4 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+							<div class="h-3 w-32 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+						</div>
+						<div class="mb-1 h-5 w-3/4 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+						<div class="mb-2 h-4 w-1/2 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+						<div class="h-3 w-40 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+					</div>
+				</div>
+			{/snippet}
+		</Card>
+	{:else if error}
+		<Card error={true} errorMessage={error} />
+	{:else if musicStatus}
+		{@const safeMusicStatus = musicStatus}
+		<Card variant="elevated" padding="md">
+			{#snippet children()}
+				<div class="flex items-start gap-4">
+					<!-- Artwork Section -->
+					<div class="flex-shrink-0">
+						{#if safeMusicStatus.artworkUrl && !artworkError}
+							<img
+								src={safeMusicStatus.artworkUrl}
+								alt="Album artwork for {safeMusicStatus.releaseName || safeMusicStatus.trackName}"
+								class="h-20 w-20 rounded-lg object-cover shadow-md"
+								loading="lazy"
+								onerror={handleImageError}
+							/>
+						{:else}
+							<!-- Fallback icon when no artwork or artwork fails to load -->
+							<div class="h-20 w-20 rounded-lg bg-canvas-200 dark:bg-canvas-700 flex items-center justify-center shadow-md">
+								<Disc3 class="h-10 w-10 text-ink-500 dark:text-ink-400" aria-hidden="true" />
+							</div>
+						{/if}
+					</div>
+
+					<div class="flex-1 min-w-0">
+						<div class="mb-2 flex items-center gap-2">
+							<Music class="h-4 w-4 text-primary-600 dark:text-primary-400" aria-hidden="true" />
+							<span
+								class="text-xs font-semibold tracking-wide text-ink-800 uppercase dark:text-ink-100"
+							>
+								{safeMusicStatus.$type === 'fm.teal.alpha.actor.status' 
+									? 'Now Listening' 
+									: 'Last Played'}
+							</span>
+						</div>
+
+						<div class="mb-2">
+							{#if safeMusicStatus.originUrl}
+								<a
+									href={safeMusicStatus.originUrl}
+									target="_blank"
+									rel="noopener noreferrer"
+									class="overflow-wrap-anywhere break-words text-lg font-semibold text-ink-900 hover:text-primary-600 dark:text-ink-50 dark:hover:text-primary-400 transition-colors"
+								>
+									{safeMusicStatus.trackName}
+								</a>
+							{:else}
+								<p class="overflow-wrap-anywhere break-words text-lg font-semibold text-ink-900 dark:text-ink-50">
+									{safeMusicStatus.trackName}
+								</p>
+							{/if}
+
+							<p class="text-base text-ink-800 dark:text-ink-100">
+								{formatArtists(safeMusicStatus.artists)}
+							</p>
+
+							{#if safeMusicStatus.releaseName}
+								<p class="text-sm text-ink-700 dark:text-ink-200">
+									{safeMusicStatus.releaseName}
+									{#if safeMusicStatus.duration}
+										<span class="text-ink-600 dark:text-ink-300">
+											· {formatDuration(safeMusicStatus.duration)}
+										</span>
+									{/if}
+								</p>
+							{/if}
+						</div>
+
+						<div class="flex items-center gap-2 text-xs text-ink-700 dark:text-ink-200">
+							<time datetime={safeMusicStatus.playedTime}>
+								{formatRelativeTime(safeMusicStatus.playedTime)}
+							</time>
+							{#if safeMusicStatus.musicServiceBaseDomain}
+								<span class="text-ink-600 dark:text-ink-300">·</span>
+								<a
+									href="https://teal.fm"
+									target="_blank"
+									rel="noopener noreferrer"
+									class="hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
+									title="Powered by teal.fm"
+								>
+									{formatServiceName(safeMusicStatus.musicServiceBaseDomain)} via teal.fm
+								</a>
+							{/if}
+						</div>
+					</div>
+				</div>
+			{/snippet}
+		</Card>
+	{/if}
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9b3df33..a6b2715 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { DynamicLinks, TangledRepos } from '$lib/components/layout';
-	import { ProfileCard, StatusCard, PostCard } from '$lib/components/layout/main/card';
-	import BlueskyPostCard from '$lib/components/layout/main/card/BlueskyPostCard.svelte';
+	import { ProfileCard, PostCard, BlueskyPostCard, MusicStatusCard } from '$lib/components/layout/main/card';
 	import { createSiteMeta, type SiteMetadata } from '$lib/helper/siteMeta';
 
 	// The `data` object includes merged layout/page load data.
@@ -29,7 +28,7 @@
 	<div class="grid gap-6 lg:grid-cols-2">
 		<div class="space-y-6">
 			<ProfileCard />
-			<StatusCard />
+			<MusicStatusCard />
 			<BlueskyPostCard />
 		</div>
 		<div class="space-y-6">
-- 
2.51.2