feat: timestamped comment sharing (#739)

* feat: timestamped comment sharing

add youtube-style ?t= param support for deep linking to specific timestamps:
- parse ?t=X on page load and auto-seek to X seconds
- add "link" button to all comments that copies timestamped URL
- existing OpenGraph meta tags already handle link previews

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

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

* fix: use onMount for timestamp param, rename link to share

* fix: use reactive effect for timestamp seek, document pattern

* fix: ensure playback continues after seek

* fix: don't force autoplay on timestamp links

---------

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

docs/frontend/state-management.md

···
 2. no console errors about "Cannot access X before initialization"
 3. UI reflects current variable value
 
+### waiting for async conditions with `$effect`
+
+when you need to perform an action after some async condition is met (like audio being ready), **don't rely on event listeners** - they may not attach in time if the target element doesn't exist yet or the event fires before your listener is registered.
+
+**instead, use a reactive `$effect` that watches for the conditions to be met:**
+
+```typescript
+// ❌ WRONG - event listener may not attach in time
+onMount(() => {
+    queue.playNow(track); // triggers async loading in Player component
+
+    // player.audioElement might be undefined here!
+    // even if it exists, loadedmetadata may fire before this runs
+    player.audioElement?.addEventListener('loadedmetadata', () => {
+        player.audioElement.currentTime = seekTime;
+    });
+});
+```
+
+```typescript
+// ✅ CORRECT - reactive effect waits for conditions
+let pendingSeekMs = $state<number | null>(null);
+
+onMount(() => {
+    pendingSeekMs = 11000; // store the pending action
+    queue.playNow(track);  // trigger the async operation
+});
+
+// effect runs whenever dependencies change, including when audio becomes ready
+$effect(() => {
+    if (
+        pendingSeekMs !== null &&
+        player.currentTrack?.id === track.id &&
+        player.audioElement &&
+        player.audioElement.readyState >= 1
+    ) {
+        player.audioElement.currentTime = pendingSeekMs / 1000;
+        pendingSeekMs = null; // clear after performing action
+    }
+});
+```
+
+**why this works:**
+- `$effect` re-runs whenever any of its dependencies change
+- when `player.audioElement` becomes available and ready, the effect fires
+- no race condition - the effect will catch the ready state even if it happened "in the past"
+- setting `pendingSeekMs = null` ensures the action only runs once
+
+**use this pattern when:**
+- waiting for DOM elements to exist
+- waiting for async operations to complete
+- coordinating between components that load independently
+
 ## global state management
 
 ### overview

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

···
 <script lang="ts">
 	import { fade } from 'svelte/transition';
+	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
+	import { page } from '$app/stores';
 	import type { PageData } from './$types';
 	import { APP_NAME, APP_CANONICAL_URL } from '$lib/branding';
 	import { API_URL } from '$lib/config';
···
 		}
 	}
 
+	async function copyCommentLink(timestampMs: number) {
+		const seconds = Math.floor(timestampMs / 1000);
+		const url = `${window.location.origin}/track/${track.id}?t=${seconds}`;
+		await navigator.clipboard.writeText(url);
+		toast.success('link copied');
+	}
+
 	function formatRelativeTime(isoString: string): string {
 		const date = new Date(isoString);
 		const now = new Date();
···
 // track if we've loaded liked state for this track (separate from general load)
 let likedStateLoadedForTrackId = $state<number | null>(null);
 
+// pending seek time from ?t= URL param (milliseconds)
+let pendingSeekMs = $state<number | null>(null);
+
 // reload data when navigating between track pages
 // watch data.track.id (from server) not track.id (local state)
 $effect(() => {
···
 		editingCommentId = null;
 		editingCommentText = '';
 		likedStateLoadedForTrackId = null; // reset liked state tracking
+		pendingSeekMs = null; // reset pending seek
 
 		// sync track from server data
 		track = data.track;
···
 		shareUrl = `${window.location.origin}/track/${track.id}`;
 	}
 });
+
+// handle ?t= timestamp param for deep linking (youtube-style)
+onMount(() => {
+	const t = $page.url.searchParams.get('t');
+	if (t) {
+		const seconds = parseInt(t, 10);
+		if (!isNaN(seconds) && seconds >= 0) {
+			pendingSeekMs = seconds * 1000;
+			// start playing the track
+			if (track.gated) {
+				void playTrack(track);
+			} else {
+				queue.playNow(track);
+			}
+		}
+	}
+});
+
+// perform pending seek once track is loaded and ready
+$effect(() => {
+	if (
+		pendingSeekMs !== null &&
+		player.currentTrack?.id === track.id &&
+		player.audioElement &&
+		player.audioElement.readyState >= 1
+	) {
+		const seekTo = pendingSeekMs / 1000;
+		pendingSeekMs = null;
+		player.audioElement.currentTime = seekTo;
+		// don't auto-play - browser policy blocks it without user interaction
+		// user will click play themselves
+	}
+});
 </script>
 
 <svelte:head>
···
 												</div>
 											{:else}
 												<p class="comment-text">{#each parseTextWithLinks(comment.text) as segment}{#if segment.type === 'link'}<a href={segment.url} target="_blank" rel="noopener noreferrer" class="comment-link">{segment.url}</a>{:else}{segment.content}{/if}{/each}</p>
-												{#if auth.user?.did === comment.user_did}
-													<div class="comment-actions">
+												<div class="comment-actions">
+													<button class="comment-action-btn" onclick={() => copyCommentLink(comment.timestamp_ms)}>share</button>
+													{#if auth.user?.did === comment.user_did}
 														<button class="comment-action-btn" onclick={() => startEditing(comment)}>edit</button>
 														<button class="comment-action-btn delete" onclick={() => deleteComment(comment.id)}>delete</button>
-													</div>
-												{/if}
+													{/if}
+												</div>
 											{/if}
 										</div>
 									</div>