312-dev · GraysonCAdams · Mar 2, 2026 · Mar 2, 2026 · Mar 2, 2026 · Mar 2, 2026
diff --git a/src/app.html b/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
 		<meta name="description" content="Private video sharing for your friend group" />
 		<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
 		<meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)" />
@@ -38,6 +38,17 @@
 						}
 					} catch(e) { /* ignore malformed cookie */ }
 				}
+				// Feed route: set dark background immediately (before JS hydrates) so the iOS
+				// black-translucent status bar sees the correct reel-bg color on cold start.
+				if (window.location.pathname === '/') {
+					document.documentElement.classList.add('feed-context');
+					var pref = m && m[1] !== 'system' ? m[1] : 'system';
+					var isDark = pref === 'dark' || (pref !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+					var reelBg = isDark ? '#0d0d0d' : '#1c1c1c';
+					document.querySelectorAll('meta[name="theme-color"]').forEach(function(el) {
+						el.setAttribute('content', reelBg);
+					});
+				}
 			})();
 		</script>
 	</head>

diff --git a/src/lib/components/ActionSidebar.svelte b/src/lib/components/ActionSidebar.svelte
@@ -5,6 +5,7 @@
 	import HeartIcon from 'phosphor-svelte/lib/HeartIcon';
 	import ChatIcon from 'phosphor-svelte/lib/ChatIcon';
 	import ArrowSquareOutIcon from 'phosphor-svelte/lib/ArrowSquareOutIcon';
+	import MusicDisc from './MusicDisc.svelte';
 
 	const {
 		favorited,
@@ -15,6 +16,12 @@
 		muted = true,
 		uiHidden = false,
 		isOwn = false,
+		albumArt = null,
+		spotifyUrl = null,
+		appleMusicUrl = null,
+		youtubeMusicUrl = null,
+		active = false,
+		paused = false,
 		onsave,
 		oncomment,
 		onreactionhold,
@@ -28,6 +35,12 @@
 		muted?: boolean;
 		uiHidden?: boolean;
 		isOwn?: boolean;
+		albumArt?: string | null;
+		spotifyUrl?: string | null;
+		appleMusicUrl?: string | null;
+		youtubeMusicUrl?: string | null;
+		active?: boolean;
+		paused?: boolean;
 		onsave: () => void;
 		oncomment: () => void;
 		onreactionhold?: (x: number, y: number) => void;
@@ -121,9 +134,7 @@
 	>
 		<span class="icon-circle" class:pop={justSaved}>
 			{#if reactedEmoji && reactedEmoji !== '❤️' && REACTION_MAP.has(reactedEmoji)}
-				{@const def = REACTION_MAP.get(reactedEmoji)!}
-				{@const ReactionIcon = def.component}
-				<ReactionIcon size={24} weight={def.weight} />
+				<span class="reaction-emoji">{reactedEmoji}</span>
 			{:else}
 				<HeartIcon size={24} weight={favorited ? 'fill' : 'regular'} />
 			{/if}
@@ -148,26 +159,30 @@
 		{/if}
 	</button>
 
-	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- external URL, not app navigation -->
-	<a
-		href={originalUrl}
-		target="_blank"
-		rel="noopener noreferrer"
-		class="sidebar-btn"
-		onclick={stop}
-		aria-label="Open original"
-	>
-		<span class="icon-circle">
-			<ArrowSquareOutIcon size={24} />
-		</span>
-	</a>
+	{#if albumArt}
+		<MusicDisc {albumArt} {spotifyUrl} {appleMusicUrl} {youtubeMusicUrl} {active} {paused} />
+	{:else}
+		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- external URL, not app navigation -->
+		<a
+			href={originalUrl}
+			target="_blank"
+			rel="noopener noreferrer"
+			class="sidebar-btn"
+			onclick={stop}
+			aria-label="Open original"
+		>
+			<span class="icon-circle">
+				<ArrowSquareOutIcon size={24} />
+			</span>
+		</a>
+	{/if}
 </div>
 
 <style>
 	.action-sidebar {
 		position: absolute;
 		right: var(--space-lg);
-		bottom: calc(var(--bottom-nav-height, 64px) + 88px);
+		bottom: calc(var(--bottom-nav-height, 64px) + 84px);
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -221,6 +236,13 @@
 		filter: drop-shadow(0 1px 2px var(--reel-icon-shadow));
 	}
 
+	.reaction-emoji {
+		font-size: 22px;
+		line-height: 1;
+		user-select: none;
+		pointer-events: none;
+	}
+
 	.sidebar-btn.active .icon-circle {
 		background: color-mix(in srgb, var(--accent-magenta) 20%, transparent);
 	}

diff --git a/src/lib/components/BaseSheet.svelte b/src/lib/components/BaseSheet.svelte
@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import { pushState, beforeNavigate } from '$app/navigation';
 	import { onDestroy } from 'svelte';
+	import { openSheet, closeSheet } from '$lib/stores/sheetOpen';
 
 	let {
 		title = '',
@@ -23,6 +24,54 @@
 	let closedViaBack = false;
 	let timers: ReturnType<typeof setTimeout>[] = [];
 
+	let dragZoneEl: HTMLElement | null = $state(null);
+	let dragY = $state(0);
+	let dragging = $state(false);
+	let dragTracking = false;
+	let dragStartY = 0;
+	let dragStartX = 0;
+	const DRAG_COMMIT_THRESHOLD = 6; // px of downward motion before locking to a drag
+	const DRAG_DISMISS_THRESHOLD = 120;
+
+	function startDrag(e: PointerEvent) {
+		dragTracking = true;
+		dragStartY = e.clientY;
+		dragStartX = e.clientX;
+		dragY = 0;
+	}
+
+	function moveDrag(e: PointerEvent) {
+		if (!dragTracking) return;
+		const dy = e.clientY - dragStartY;
+		const dx = e.clientX - dragStartX;
+
+		if (!dragging) {
+			// Commit to drag only when moving clearly downward
+			if (dy > DRAG_COMMIT_THRESHOLD && dy > Math.abs(dx)) {
+				dragging = true;
+				dragZoneEl?.setPointerCapture(e.pointerId);
+			} else if (Math.abs(dx) > DRAG_COMMIT_THRESHOLD || dy < -DRAG_COMMIT_THRESHOLD) {
+				dragTracking = false;
+			}
+			return;
+		}
+
+		dragY = Math.max(0, dy);
+	}
+
+	function endDrag() {
+		if (!dragTracking) return;
+		dragTracking = false;
+		if (!dragging) return;
+		dragging = false;
+		if (dragY > DRAG_DISMISS_THRESHOLD) {
+			dragY = 0;
+			dismiss();
+		} else {
+			dragY = 0;
+		}
+	}
+
 	// Prevent history.back() in cleanup when a real navigation occurs (e.g. clicking a link inside the sheet)
 	beforeNavigate(() => {
 		closedViaBack = true;
@@ -36,6 +85,7 @@
 
 	// Animate in, lock scroll, manage history
 	$effect(() => {
+		openSheet();
 		requestAnimationFrame(() => {
 			visible = true;
 		});
@@ -49,6 +99,7 @@
 		window.addEventListener('popstate', handlePopState);
 
 		return () => {
+			closeSheet();
 			document.body.style.overflow = '';
 			window.removeEventListener('popstate', handlePopState);
 			if (!closedViaBack) history.back();
@@ -65,28 +116,43 @@
 
 <div class="base-overlay" class:visible onclick={dismiss} role="presentation"></div>
 
-<div class="base-sheet" class:visible>
-	{#if showHandle}
-		<div
-			class="base-handle-bar"
-			onclick={dismiss}
-			onkeydown={(e) => {
-				if (e.key === 'Enter' || e.key === ' ') dismiss();
-			}}
-			role="button"
-			tabindex="-1"
-		>
-			<div class="base-handle"></div>
-		</div>
-	{/if}
-
-	{#if header}
-		{@render header()}
-	{:else if title}
-		<div class="base-header">
-			<span class="base-title">{title}</span>
-		</div>
-	{/if}
+<div
+	class="base-sheet"
+	class:visible
+	class:dragging
+	style:transform={dragY > 0 ? `translateY(${dragY}px)` : undefined}
+>
+	<div
+		class="base-drag-zone"
+		bind:this={dragZoneEl}
+		onpointerdown={startDrag}
+		onpointermove={moveDrag}
+		onpointerup={endDrag}
+		onpointercancel={endDrag}
+		role="presentation"
+	>
+		{#if showHandle}
+			<div
+				class="base-handle-bar"
+				onclick={dismiss}
+				onkeydown={(e) => {
+					if (e.key === 'Enter' || e.key === ' ') dismiss();
+				}}
+				role="button"
+				tabindex="-1"
+			>
+				<div class="base-handle"></div>
+			</div>
+		{/if}
+
+		{#if header}
+			{@render header()}
+		{:else if title}
+			<div class="base-header">
+				<span class="base-title">{title}</span>
+			</div>
+		{/if}
+	</div>
 
 	{@render children()}
 </div>
@@ -120,6 +186,13 @@
 	.base-sheet.visible {
 		transform: translateY(0);
 	}
+	.base-sheet.dragging {
+		transition: none;
+	}
+
+	.base-drag-zone {
+		touch-action: none;
+	}
 
 	.base-handle-bar {
 		display: flex;