fix: reload data when navigating between detail pages of same type (#527)

* fix: reload data when navigating between detail pages of same type

SvelteKit reuses component instances when navigating between routes with
the same layout. This meant `onMount` didn't re-run when going from one
artist page to another, or one track page to another.

- replace `onMount` with `$effect` watching server data (data.artist.did,
data.track.id) to detect navigation
- reset local state and reload fresh data when route params change
- also: change "of music" to "of audio" in platform stats (not all
uploads are music - some are audiobooks, public domain recordings, etc)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

* feat: add Tangled repo link and fix responsive header breakpoints

- Add Tangled link with sheep avatar to desktop header and mobile LinksMenu
- Consolidate breakpoints: desktop elements and mobile layout now switch at 1299px
- Previously stats/search/logout disappeared at 1499px but mobile didn't show until 1299px,
leaving a gap where users couldn't access those features

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

* fix: bump responsive breakpoint to 1399px to prevent stats/search collision

Switch to mobile layout earlier to avoid cramped margin elements

* fix: accent color on hover for nav-link and Tangled icon

- nav-link (feed/library) now uses accent color on hover
- Tangled icon gets accent-colored ring on hover
- Nudge search component 20px right to prevent overlap with stats

---------

Co-authored-by: Claude <[e-mail]>

frontend/src/lib/components/Header.svelte

···
 					<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
 				</svg>
 			</a>
+			<a
+				href="https://tangled.org/@zzstoatzz.io/plyr.fm"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="tangled-link desktop-only"
+				title="View source on Tangled"
+			>
+				<img src="https://cdn.bsky.app/img/avatar/plain/did:plc:wshs7t2adsemcrrd4snkeqli/bafkreif6z53z4ukqmdgwstspwh5asmhxheblcd2adisoccl4fflozc3kva@jpeg" alt="Tangled" width="20" height="20" class="tangled-icon" />
+			</a>
 
 			<!-- mobile: show menu button -->
 			<div class="mobile-only">
···
 
 	.search-left {
 		position: absolute;
-		left: calc((100vw - var(--queue-width, 0px) - 800px) / 3);
+		left: calc((100vw - var(--queue-width, 0px) - 800px) / 3 + 20px);
 		top: 50%;
 		transform: translate(-50%, -50%);
 		transition: left 0.3s ease;
···
 	}
 
 	.bluesky-link,
-	.status-link {
+	.status-link,
+	.tangled-link {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		color: var(--text-secondary);
-		transition: color 0.2s;
+		transition: color 0.2s, opacity 0.2s;
 		text-decoration: none;
 		flex-shrink: 0;
 	}
···
 		color: var(--accent);
 	}
 
+	.tangled-icon {
+		border-radius: 4px;
+		opacity: 0.7;
+		transition: opacity 0.2s, box-shadow 0.2s;
+	}
+
+	.tangled-link:hover .tangled-icon {
+		opacity: 1;
+		box-shadow: 0 0 0 2px var(--accent);
+	}
+
 	h1 {
 		font-size: 1.5rem;
 		margin: 0;
···
 	}
 
 	.nav-link:hover {
-		color: var(--text-primary);
+		color: var(--accent);
 		background: var(--bg-tertiary);
 		border-color: var(--border-default);
 	}
···
 		color: var(--bg-primary);
 	}
 
-	/* Show LinksMenu (with stats) when sidebar is hidden */
-	@media (max-width: 1299px) {
+	/* Hide margin-positioned elements and switch to mobile layout at the same breakpoint */
+	@media (max-width: 1399px) {
+		.stats-left,
+		.search-left,
+		.logout-right {
+			display: none !important;
+		}
+
 		.desktop-only {
 			display: none !important;
 		}

frontend/src/lib/components/LinksMenu.svelte

···
 						<span class="link-title">status page</span>
 					</div>
 				</a>
+				<a
+					href="https://tangled.org/@zzstoatzz.io/plyr.fm"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="menu-link"
+				>
+					<img
+						src="https://cdn.bsky.app/img/avatar/plain/did:plc:wshs7t2adsemcrrd4snkeqli/bafkreif6z53z4ukqmdgwstspwh5asmhxheblcd2adisoccl4fflozc3kva@jpeg"
+						alt="Tangled"
+						width="24"
+						height="24"
+						class="tangled-menu-icon"
+					/>
+					<div class="link-info">
+						<span class="link-title">source code</span>
+						<span class="link-subtitle">tangled.org</span>
+					</div>
+				</a>
 			</nav>
 			<PlatformStats variant="menu" />
 		</div>
···
 
 	.menu-link:hover svg {
 		color: var(--accent);
+	}
+
+	.tangled-menu-icon {
+		border-radius: 4px;
+		opacity: 0.7;
+		transition: opacity 0.2s, box-shadow 0.2s;
+	}
+
+	.menu-link:hover .tangled-menu-icon {
+		opacity: 1;
+		box-shadow: 0 0 0 2px var(--accent);
 	}
 
 	.link-info {

frontend/src/lib/components/PlatformStats.svelte

···
 				</svg>
 				<span class="header-value">{stats.total_artists.toLocaleString()}</span>
 			</div>
-			<div class="header-stat" title="{formatDuration(stats.total_duration_seconds)} of music">
+			<div class="header-stat" title="{formatDuration(stats.total_duration_seconds)} of audio">
 				<svg class="header-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 					<circle cx="12" cy="12" r="10"></circle>
 					<polyline points="12 6 12 12 16 14"></polyline>
···
 						<polyline points="12 6 12 12 16 14"></polyline>
 					</svg>
 					<span class="stats-menu-value">{formatDuration(stats.total_duration_seconds)}</span>
-					<span class="stats-menu-label">of music</span>
+					<span class="stats-menu-label">of audio</span>
 				</div>
 			</div>
 		{/if}

frontend/src/routes/track/[id]/+page.svelte

···
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
+	import { browser } from '$app/environment';
 	import type { PageData } from './$types';
 	import { APP_NAME, APP_CANONICAL_URL } from '$lib/branding';
 	import { API_URL } from '$lib/config';
···
 		}
 	}
 
-onMount(async () => {
-	if (auth.isAuthenticated) {
-		await loadLikedState();
+// track which track we've loaded data for to detect navigation
+let loadedForTrackId = $state<number | null>(null);
+
+// reload data when navigating between track pages
+// watch data.track.id (from server) not track.id (local state)
+$effect(() => {
+	const currentId = data.track?.id;
+	if (!currentId || !browser) return;
+
+	// check if we navigated to a different track
+	if (loadedForTrackId !== currentId) {
+		// reset state for new track
+		comments = [];
+		loadingComments = true;
+		commentsEnabled = null;
+		newCommentText = '';
+		editingCommentId = null;
+		editingCommentText = '';
+
+		// sync track from server data
+		track = data.track;
+
+		// mark as loaded for this track
+		loadedForTrackId = currentId;
+
+		// load fresh data
+		if (auth.isAuthenticated) {
+			void loadLikedState();
+		}
+		void loadComments();
 	}
-	await loadComments();
 });
 
 let shareUrl = $state('');

frontend/src/routes/u/[handle]/+page.svelte

···
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import { API_URL } from '$lib/config';
 	import { browser } from '$app/environment';
···
 
 	// public playlists for collections section
 	let publicPlaylists = $state<Playlist[]>([]);
+
+	// track which artist we've loaded data for to detect navigation
+	let loadedForDid = $state<string | null>(null);
 
 	async function handleLogout() {
 		await auth.logout();
···
 		}
 	}
 
-	onMount(() => {
-		// load analytics in background without blocking page render
-		loadAnalytics();
-		primeLikesFromCache();
-		// immediately hydrate tracks client-side for liked state
-		void hydrateTracksWithLikes();
-		// load liked tracks count if artist has show_liked_on_profile enabled
-		void loadLikedTracksCount();
-		// load public playlists for collections section
-		void loadPublicPlaylists();
+	// reload data when navigating between artist pages
+	// watch data.artist?.did (from server) not artist?.did (local derived)
+	$effect(() => {
+		const currentDid = data.artist?.did;
+		if (!currentDid || !browser) return;
+
+		// check if we navigated to a different artist
+		if (loadedForDid !== currentDid) {
+			// reset state for new artist
+			analytics = null;
+			tracksHydrated = false;
+			likedTracksCount = null;
+			publicPlaylists = [];
+
+			// sync tracks from server data
+			tracks = data.tracks ?? [];
+
+			// mark as loaded for this artist
+			loadedForDid = currentDid;
+
+			// load fresh data
+			loadAnalytics();
+			primeLikesFromCache();
+			void hydrateTracksWithLikes();
+			void loadLikedTracksCount();
+			void loadPublicPlaylists();
+		}
 	});
 
 	async function hydrateTracksWithLikes() {