From 6289a00e34b84405ef019a000313d76519dd1e6a Mon Sep 17 00:00:00 2001
From: Grayson Adams <51373669+GraysonCAdams@users.noreply.github.com>
Date: Mon, 2 Mar 2026 00:32:11 -0600
Subject: [PATCH 1/7] fix: allow re-adding clips that previously failed to
 download

When a clip download fails, the unique (group_id, original_url) constraint
prevented re-submitting the same URL. Now both the clips API and share
endpoint detect failed clips and auto-retry the download instead of
returning a 409 duplicate error.
---
 src/routes/api/clips/+server.ts       | 101 +++++++++++++++++---------
 src/routes/api/clips/share/+server.ts |  40 ++++++----
 2 files changed, 92 insertions(+), 49 deletions(-)

diff --git a/src/routes/api/clips/+server.ts b/src/routes/api/clips/+server.ts
index 101fb2d..d78427c 100644
--- a/src/routes/api/clips/+server.ts
+++ b/src/routes/api/clips/+server.ts
@@ -36,6 +36,54 @@ import { createLogger } from '$lib/server/logger';
 
 const log = createLogger('clips');
 
+/** Set clip status to 'downloading' and trigger the download pipeline. Marks as 'failed' on error. */
+async function startDownload(clipId: string, url: string, contentType: string, label: string) {
+	await db.update(clips).set({ status: 'downloading' }).where(eq(clips.id, clipId));
+
+	const onError = async (err: unknown) => {
+		log.error({ err, clipId }, `download failed (${label})`);
+		await db
+			.update(clips)
+			.set({ status: 'failed' })
+			.where(and(eq(clips.id, clipId), eq(clips.status, 'downloading')));
+	};
+
+	if (contentType === 'music') {
+		downloadMusic(clipId, url).catch(onError);
+	} else {
+		downloadVideo(clipId, url).catch(onError);
+	}
+}
+
+/** Validate a clip URL and return an error response, or null if valid. */
+function validateClipUrl(
+	videoUrl: string | undefined,
+	group: { platformFilterMode: string | null; platformFilterList: string | null }
+): Response | null {
+	if (!videoUrl) return json({ error: 'URL required' }, { status: 400 });
+
+	if (!isSupportedUrl(videoUrl)) {
+		return json(
+			{
+				error:
+					'Unsupported URL. Try a link from TikTok, YouTube, Instagram, X, Reddit, Spotify, or other supported platforms.'
+			},
+			{ status: 400 }
+		);
+	}
+
+	const platform = detectPlatform(videoUrl)!;
+	const filterList = group.platformFilterList ? JSON.parse(group.platformFilterList) : null;
+	if (!isPlatformAllowed(platform, group.platformFilterMode ?? 'all', filterList)) {
+		return json(
+			{ error: `${platformLabel(videoUrl) || platform} links are not allowed in this group` },
+			{ status: 400 }
+		);
+	}
+
+	return null;
+}
+
 const VALID_FILTERS = ['unwatched', 'watched', 'favorites'] as const;
 const VALID_SORTS = ['oldest', 'round-robin'] as const;
 
@@ -236,36 +284,29 @@ export const POST: RequestHandler = withAuth(async ({ request }, { user, group }
 	const message =
 		typeof body.message === 'string' ? body.message.trim().slice(0, 500) || null : null;
 
-	if (!videoUrl) return json({ error: 'URL required' }, { status: 400 });
-
-	if (!isSupportedUrl(videoUrl)) {
-		return json(
-			{
-				error:
-					'Unsupported URL. Try a link from TikTok, YouTube, Instagram, X, Reddit, Spotify, or other supported platforms.'
-			},
-			{ status: 400 }
-		);
-	}
-
-	const platform = detectPlatform(videoUrl)!;
-
-	// Enforce group platform filter
-	const filterList = group.platformFilterList ? JSON.parse(group.platformFilterList) : null;
-	if (!isPlatformAllowed(platform, group.platformFilterMode ?? 'all', filterList)) {
-		return json(
-			{ error: `${platformLabel(videoUrl) || platform} links are not allowed in this group` },
-			{ status: 400 }
-		);
-	}
+	const urlError = validateClipUrl(videoUrl, group);
+	if (urlError) return urlError;
+	const validUrl = videoUrl!;
 
+	const platform = detectPlatform(validUrl)!;
 	const contentType = getContentType(platform);
-	const normalizedUrl = normalizeUrl(videoUrl);
+	const normalizedUrl = normalizeUrl(validUrl);
 
 	// Check if this URL already exists in the group's feed
 	const existing = await db.query.clips.findFirst({
 		where: and(eq(clips.groupId, user.groupId), eq(clips.originalUrl, normalizedUrl))
 	});
+	if (existing && existing.status === 'failed') {
+		// Previous attempt failed — retry the download instead of rejecting
+		if (title) {
+			await db.update(clips).set({ title }).where(eq(clips.id, existing.id));
+		}
+		await startDownload(existing.id, validUrl, existing.contentType, 're-add retry');
+		return json(
+			{ clip: { id: existing.id, status: 'downloading', contentType: existing.contentType } },
+			{ status: 201 }
+		);
+	}
 	if (existing) {
 		return json({ error: 'This link has already been added to the feed.' }, { status: 409 });
 	}
@@ -301,19 +342,7 @@ export const POST: RequestHandler = withAuth(async ({ request }, { user, group }
 	});
 
 	// Route to appropriate download pipeline
-	const markFailedOnError = async (err: unknown) => {
-		log.error({ err, clipId }, 'download failed');
-		await db
-			.update(clips)
-			.set({ status: 'failed' })
-			.where(and(eq(clips.id, clipId), eq(clips.status, 'downloading')));
-	};
-
-	if (contentType === 'music') {
-		downloadMusic(clipId, videoUrl).catch(markFailedOnError);
-	} else {
-		downloadVideo(clipId, videoUrl).catch(markFailedOnError);
-	}
+	await startDownload(clipId, validUrl, contentType, 'new clip');
 
 	// Push notification is sent after download succeeds (see video/download.ts, music/download.ts)
 
diff --git a/src/routes/api/clips/share/+server.ts b/src/routes/api/clips/share/+server.ts
index 5494d4b..1b92bc6 100644
--- a/src/routes/api/clips/share/+server.ts
+++ b/src/routes/api/clips/share/+server.ts
@@ -20,6 +20,25 @@ import { createLogger } from '$lib/server/logger';
 
 const log = createLogger('share');
 
+/** Set clip status to 'downloading' and trigger the download pipeline. Marks as 'failed' on error. */
+async function startDownload(clipId: string, url: string, contentType: string, label: string) {
+	await db.update(clips).set({ status: 'downloading' }).where(eq(clips.id, clipId));
+
+	const onError = async (err: unknown) => {
+		log.error({ err, clipId }, `download failed (${label})`);
+		await db
+			.update(clips)
+			.set({ status: 'failed' })
+			.where(and(eq(clips.id, clipId), eq(clips.status, 'downloading')));
+	};
+
+	if (contentType === 'music') {
+		downloadMusic(clipId, url).catch(onError);
+	} else {
+		downloadVideo(clipId, url).catch(onError);
+	}
+}
+
 /** Shortcut-friendly JSON response. Every response includes `success` (1|0) and `message`. */
 function shareResponse(
 	success: boolean,
@@ -169,6 +188,13 @@ export const POST: RequestHandler = async ({ request, url, locals }) => {
 	const existing = await db.query.clips.findFirst({
 		where: and(eq(clips.groupId, group.id), eq(clips.originalUrl, normalizedVideoUrl))
 	});
+	if (existing && existing.status === 'failed') {
+		// Previous attempt failed — retry the download instead of rejecting
+		await startDownload(existing.id, videoUrl, existing.contentType, 're-share retry');
+		return shareResponse(true, '✅  Clip shared! (retrying download)', 201, {
+			clipId: existing.id
+		});
+	}
 	if (existing) {
 		return shareResponse(false, '❌  This clip has already been shared!', 409);
 	}
@@ -196,19 +222,7 @@ export const POST: RequestHandler = async ({ request, url, locals }) => {
 	});
 
 	// 10. Async download
-	const markFailedOnError = async (err: unknown) => {
-		log.error({ err, clipId }, 'download failed');
-		await db
-			.update(clips)
-			.set({ status: 'failed' })
-			.where(and(eq(clips.id, clipId), eq(clips.status, 'downloading')));
-	};
-
-	if (contentType === 'music') {
-		downloadMusic(clipId, videoUrl).catch(markFailedOnError);
-	} else {
-		downloadVideo(clipId, videoUrl).catch(markFailedOnError);
-	}
+	await startDownload(clipId, videoUrl, contentType, 'new clip');
 
 	// Push notification is sent after download succeeds (see video/download.ts, music/download.ts)
 

From 2483398eeeab21d967ec0b2b3f71c623787950c5 Mon Sep 17 00:00:00 2001
From: Grayson Adams <51373669+GraysonCAdams@users.noreply.github.com>
Date: Mon, 2 Mar 2026 01:05:05 -0600
Subject: [PATCH 2/7] fix: enrich GET /api/clips/[id] with full FeedClip data

The endpoint returned minimal fields missing addedByUsername, reactions,
watched status, etc. This caused a crash in ReelOverlay when rendering
a single clip via "View in feed". Now returns the same shape as the
feed list endpoint using parallel queries.
---
 src/routes/api/clips/[id]/+server.ts | 69 +++++++++++++++++++++++-----
 1 file changed, 57 insertions(+), 12 deletions(-)

diff --git a/src/routes/api/clips/[id]/+server.ts b/src/routes/api/clips/[id]/+server.ts
index b4fecc6..68d0c27 100644
--- a/src/routes/api/clips/[id]/+server.ts
+++ b/src/routes/api/clips/[id]/+server.ts
@@ -12,31 +12,76 @@ import {
 	notifications
 } from '$lib/server/db/schema';
 import { eq, and, ne, count, inArray } from 'drizzle-orm';
-import { withClipAuth, parseBody, isResponse } from '$lib/server/api-utils';
+import {
+	withClipAuth,
+	parseBody,
+	isResponse,
+	mapUsersByIds,
+	groupReactions
+} from '$lib/server/api-utils';
 import { cleanupClipFiles } from '$lib/server/download-utils';
 
 export const GET: RequestHandler = withClipAuth(async ({ params }, { user, clip }) => {
-	// Check if anyone other than the uploader has watched this clip
-	let canEditCaption = false;
-	if (clip.addedBy === user.id) {
-		const [watchResult] = await db
-			.select({ count: count() })
-			.from(watched)
-			.where(and(eq(watched.clipId, params.id), ne(watched.userId, clip.addedBy)));
-		canEditCaption = watchResult.count === 0;
-	}
+	const clipId = params.id;
+	const userId = user.id;
+
+	// Fetch all related data in parallel
+	const [watchedRows, favRow, clipReactions, clipComments, userCommentView, uploaderInfo] =
+		await Promise.all([
+			db.query.watched.findMany({ where: eq(watched.clipId, clipId) }),
+			db.query.favorites.findFirst({
+				where: and(eq(favorites.clipId, clipId), eq(favorites.userId, userId))
+			}),
+			db.query.reactions.findMany({ where: eq(reactions.clipId, clipId) }),
+			db.query.comments.findMany({ where: eq(comments.clipId, clipId) }),
+			db.query.commentViews.findFirst({
+				where: and(eq(commentViews.clipId, clipId), eq(commentViews.userId, userId))
+			}),
+			mapUsersByIds([clip.addedBy])
+		]);
+
+	const isWatched = watchedRows.some((w) => w.userId === userId);
+	const isFavorited = !!favRow;
+	const viewCount = watchedRows.length;
+	const seenByOthers = watchedRows.some((w) => w.userId !== clip.addedBy);
+	const canEditCaption = clip.addedBy === userId && !seenByOthers;
+
+	const reactionData = groupReactions(clipReactions, userId);
+
+	const commentCount = clipComments.length;
+	const unreadCommentCount = userCommentView
+		? clipComments.filter((c) => c.createdAt > userCommentView.viewedAt).length
+		: commentCount;
+
+	const uploaderUser = uploaderInfo.get(clip.addedBy);
 
 	return json({
 		id: clip.id,
-		status: clip.status,
+		originalUrl: clip.originalUrl,
 		videoPath: clip.videoPath,
 		audioPath: clip.audioPath,
 		thumbnailPath: clip.thumbnailPath,
 		title: clip.title,
 		artist: clip.artist,
 		albumArt: clip.albumArt,
-		contentType: clip.contentType,
+		spotifyUrl: clip.spotifyUrl,
+		appleMusicUrl: clip.appleMusicUrl,
+		youtubeMusicUrl: clip.youtubeMusicUrl,
+		addedBy: clip.addedBy,
+		addedByUsername: uploaderUser?.username || 'Unknown',
+		addedByAvatar: uploaderUser?.avatarPath || null,
 		platform: clip.platform,
+		status: clip.status,
+		contentType: clip.contentType,
+		durationSeconds: clip.durationSeconds,
+		watched: isWatched,
+		favorited: isFavorited,
+		reactions: reactionData,
+		commentCount,
+		unreadCommentCount,
+		viewCount,
+		seenByOthers,
+		createdAt: clip.createdAt,
 		canEditCaption
 	});
 });

From ea112036dae0df694e4cfbde747571f17ec426e3 Mon Sep 17 00:00:00 2001
From: Grayson Adams <51373669+GraysonCAdams@users.noreply.github.com>
Date: Mon, 2 Mar 2026 01:05:12 -0600
Subject: [PATCH 3/7] fix: enforce single reaction per user per clip

Previously users could add multiple different emoji reactions to the
same clip. Now changing your reaction removes the old one first,
matching the expected one-reaction-per-user behavior.
---
 .../api/clips/[id]/reactions/+server.ts       | 35 ++++++++++++++-----
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/routes/api/clips/[id]/reactions/+server.ts b/src/routes/api/clips/[id]/reactions/+server.ts
index b3985ae..f64910a 100644
--- a/src/routes/api/clips/[id]/reactions/+server.ts
+++ b/src/routes/api/clips/[id]/reactions/+server.ts
@@ -1,7 +1,7 @@
 import { json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { db } from '$lib/server/db';
-import { reactions } from '$lib/server/db/schema';
+import { reactions, notifications } from '$lib/server/db/schema';
 import { eq, and } from 'drizzle-orm';
 import { v4 as uuid } from 'uuid';
 import {
@@ -37,18 +37,32 @@ export const POST: RequestHandler = withClipAuth(async ({ params, request }, { u
 		return badRequest('Invalid emoji');
 	}
 
-	// Toggle: if exists, delete; if not, insert
+	// Find any existing reaction by this user on this clip (one reaction per user per clip)
 	const existing = await db.query.reactions.findFirst({
-		where: and(
-			eq(reactions.clipId, clipId),
-			eq(reactions.userId, userId),
-			eq(reactions.emoji, emoji)
-		)
+		where: and(eq(reactions.clipId, clipId), eq(reactions.userId, userId))
 	});
 
+	const sameEmoji = existing?.emoji === emoji;
+
 	if (existing) {
+		// Remove the old reaction
 		await db.delete(reactions).where(eq(reactions.id, existing.id));
-	} else {
+
+		// Remove the old notification entry for this reaction
+		await db
+			.delete(notifications)
+			.where(
+				and(
+					eq(notifications.clipId, clipId),
+					eq(notifications.actorId, userId),
+					eq(notifications.type, 'reaction'),
+					eq(notifications.emoji, existing.emoji)
+				)
+			);
+	}
+
+	if (!sameEmoji) {
+		// Add the new reaction (either fresh or replacing a different emoji)
 		await db.insert(reactions).values({
 			id: uuid(),
 			clipId,
@@ -77,5 +91,8 @@ export const POST: RequestHandler = withClipAuth(async ({ params, request }, { u
 		where: eq(reactions.clipId, clipId)
 	});
 
-	return json({ reactions: groupReactions(allReactions, userId), toggled: !existing });
+	return json({
+		reactions: groupReactions(allReactions, userId),
+		toggled: !sameEmoji || !existing
+	});
 });

From 46302db711f7215454ba45fdc51468b95c662e80 Mon Sep 17 00:00:00 2001
From: Grayson Adams <51373669+GraysonCAdams@users.noreply.github.com>
Date: Mon, 2 Mar 2026 01:05:21 -0600
Subject: [PATCH 4/7] feat: reel layout polish and remove speed controls

- Remove playback speed controls (SpeedPill, keyboard shortcuts)
- Add periodic watch percent updates while viewing
- Redesign music disc popout as a dropdown menu with labels
- Adjust bottom positions for overlay, sidebar, and progress bar
- Move ActionSidebar and MusicDisc outside overlay-content div
- Add hideViewBadge prop to ReelItem for overlay use
- Send watch percent before opening viewers sheet
---
 src/lib/components/ActionSidebar.svelte |   2 +-
 src/lib/components/MusicDisc.svelte     |  95 +++++++++++--------
 src/lib/components/ProgressBar.svelte   |   2 +-
 src/lib/components/ReelItem.svelte      | 118 +++++++++++-------------
 src/lib/components/ReelMusic.svelte     |   1 +
 src/lib/components/ReelOverlay.svelte   |   2 +-
 src/lib/reelInteractions.ts             |  16 +---
 src/lib/reelPlayback.ts                 |  12 +++
 8 files changed, 131 insertions(+), 117 deletions(-)

diff --git a/src/lib/components/ActionSidebar.svelte b/src/lib/components/ActionSidebar.svelte
index 0db02fe..b0a7232 100644
--- a/src/lib/components/ActionSidebar.svelte
+++ b/src/lib/components/ActionSidebar.svelte
@@ -167,7 +167,7 @@
 	.action-sidebar {
 		position: absolute;
 		right: var(--space-lg);
-		bottom: calc(var(--bottom-nav-height, 64px) + 68px);
+		bottom: calc(var(--bottom-nav-height, 64px) + 88px);
 		display: flex;
 		flex-direction: column;
 		align-items: center;
diff --git a/src/lib/components/MusicDisc.svelte b/src/lib/components/MusicDisc.svelte
index 75cccac..7958d43 100644
--- a/src/lib/components/MusicDisc.svelte
+++ b/src/lib/components/MusicDisc.svelte
@@ -23,7 +23,29 @@
 	const hasMusicLinks = $derived(!!(spotifyUrl || appleMusicUrl || youtubeMusicUrl));
 </script>
 
+{#if showMusicLinks}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="music-links-backdrop"
+		onclick={() => (showMusicLinks = false)}
+		onkeydown={(e) => e.stopPropagation()}
+	></div>
+{/if}
+
 <div class="music-disc-area" class:ui-hidden={uiHidden}>
+	<button
+		type="button"
+		class="music-disc"
+		class:spinning={active && !paused && !showMusicLinks}
+		onclick={(e) => {
+			e.stopPropagation();
+			if (hasMusicLinks) showMusicLinks = !showMusicLinks;
+		}}
+		aria-label={showMusicLinks ? 'Close music links' : 'Open music links'}
+	>
+		<img src={albumArt} alt="" class="music-disc-img" />
+	</button>
+
 	{#if showMusicLinks && hasMusicLinks}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
@@ -39,7 +61,8 @@
 					class="music-link-pill"
 					aria-label="Spotify"
 				>
-					<PlatformIcon platform="spotify" size={16} />
+					<PlatformIcon platform="spotify" size={18} />
+					<span class="music-link-label">Spotify</span>
 				</a>
 			{/if}
 			{#if appleMusicUrl}
@@ -50,7 +73,8 @@
 					class="music-link-pill"
 					aria-label="Apple Music"
 				>
-					<PlatformIcon platform="apple_music" size={16} />
+					<PlatformIcon platform="apple_music" size={18} />
+					<span class="music-link-label">Apple Music</span>
 				</a>
 			{/if}
 			{#if youtubeMusicUrl}
@@ -61,34 +85,25 @@
 					class="music-link-pill"
 					aria-label="YouTube Music"
 				>
-					<PlatformIcon platform="youtube" size={16} />
+					<PlatformIcon platform="youtube" size={18} />
+					<span class="music-link-label">YouTube</span>
 				</a>
 			{/if}
 		</div>
 	{/if}
-	<button
-		type="button"
-		class="music-disc"
-		class:spinning={active && !paused && !showMusicLinks}
-		onclick={(e) => {
-			e.stopPropagation();
-			if (hasMusicLinks) showMusicLinks = !showMusicLinks;
-		}}
-		aria-label={showMusicLinks ? 'Close music links' : 'Open music links'}
-	>
-		<img src={albumArt} alt="" class="music-disc-img" />
-	</button>
 </div>
 
 <style>
+	.music-links-backdrop {
+		position: absolute;
+		inset: 0;
+		z-index: 9;
+	}
 	.music-disc-area {
 		position: absolute;
 		right: var(--space-lg);
-		bottom: calc(var(--bottom-nav-height, 64px) + 10px);
-		display: flex;
-		align-items: center;
-		gap: var(--space-sm);
-		z-index: 5;
+		bottom: calc(var(--bottom-nav-height, 64px) + 28px);
+		z-index: 10;
 		transition: opacity 0.3s ease;
 	}
 	.music-disc-area.ui-hidden {
@@ -117,40 +132,46 @@
 		display: block;
 	}
 	.music-links-popout {
+		position: absolute;
+		right: calc(44px + var(--space-sm));
+		bottom: 0;
 		display: flex;
-		align-items: center;
-		gap: 6px;
+		flex-direction: column;
+		gap: 4px;
+		padding: var(--space-sm);
+		background: var(--bg-elevated);
+		border-radius: var(--radius-md);
+		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
 		animation: links-slide-in 200ms cubic-bezier(0.32, 0.72, 0, 1);
 	}
 	@keyframes links-slide-in {
 		from {
 			opacity: 0;
-			transform: translateX(12px);
+			transform: translateX(12px) scale(0.95);
 		}
 		to {
 			opacity: 1;
-			transform: translateX(0);
+			transform: translateX(0) scale(1);
 		}
 	}
 	.music-link-pill {
 		display: flex;
 		align-items: center;
-		justify-content: center;
-		width: 36px;
-		height: 36px;
-		border-radius: var(--radius-full);
-		background: var(--reel-icon-circle-bg);
-		backdrop-filter: blur(6px);
-		-webkit-backdrop-filter: blur(6px);
-		color: var(--reel-text);
+		gap: var(--space-sm);
+		padding: var(--space-sm) var(--space-md);
+		border-radius: var(--radius-sm);
+		background: transparent;
+		color: var(--text-primary);
 		text-decoration: none;
-		transition:
-			background 0.15s ease,
-			transform 0.1s ease;
+		white-space: nowrap;
+		transition: background 0.15s ease;
 	}
 	.music-link-pill:active {
-		transform: scale(0.93);
-		background: var(--reel-icon-circle-active);
+		background: var(--bg-surface);
+	}
+	.music-link-label {
+		font-size: 0.8125rem;
+		font-weight: 600;
 	}
 	@keyframes spin-disc {
 		to {
diff --git a/src/lib/components/ProgressBar.svelte b/src/lib/components/ProgressBar.svelte
index 4bec6b4..16f7202 100644
--- a/src/lib/components/ProgressBar.svelte
+++ b/src/lib/components/ProgressBar.svelte
@@ -108,7 +108,7 @@
 <style>
 	.progress-bar {
 		position: absolute;
-		bottom: calc(var(--bottom-nav-height, 64px) - 8px);
+		bottom: calc(var(--bottom-nav-height, 64px) - 14px);
 		left: 0;
 		right: 0;
 		z-index: 6;
diff --git a/src/lib/components/ReelItem.svelte b/src/lib/components/ReelItem.svelte
index 41e9ef2..5880050 100644
--- a/src/lib/components/ReelItem.svelte
+++ b/src/lib/components/ReelItem.svelte
@@ -4,14 +4,19 @@
 	import { fetchUnreadCount } from '$lib/stores/notifications';
 	import { openCommentsSignal } from '$lib/stores/toasts';
 	import { globalMuted } from '$lib/stores/mute';
-	import { globalPlaybackSpeed, stepSpeedUp, stepSpeedDown } from '$lib/stores/playbackSpeed';
+
 	import { connectNormalizer } from '$lib/audio/normalizer';
 	import {
 		setupDesktopGestures,
 		setupMobileGestures,
 		setupReelKeyboard
 	} from '$lib/reelInteractions';
-	import { trackVideoTime, sendWatchPercent, flashIndicator } from '$lib/reelPlayback';
+	import {
+		trackVideoTime,
+		sendWatchPercent,
+		flashIndicator,
+		startPeriodicWatchUpdate
+	} from '$lib/reelPlayback';
 	import { feedUiHidden } from '$lib/stores/uiHidden';
 	import { groupMembers } from '$lib/stores/members';
 	import ReelVideo from './ReelVideo.svelte';
@@ -26,7 +31,7 @@
 	import ViewersSheet from './ViewersSheet.svelte';
 	import ReelIndicators from './ReelIndicators.svelte';
 	import MusicDisc from './MusicDisc.svelte';
-	import SpeedPill from './SpeedPill.svelte';
+
 	import type { FeedClip } from '$lib/types';
 
 	const {
@@ -38,6 +43,7 @@
 		gifEnabled = false,
 		canEditCaption = false,
 		seenByOthers = false,
+		hideViewBadge = false,
 		onwatched,
 		onfavorited,
 		onreaction,
@@ -54,6 +60,7 @@
 		gifEnabled?: boolean;
 		canEditCaption?: boolean;
 		seenByOthers?: boolean;
+		hideViewBadge?: boolean;
 		onwatched: (id: string) => void;
 		onfavorited: (id: string) => void;
 		onreaction: (clipId: string, emoji: string) => Promise<void>;
@@ -68,9 +75,7 @@
 	let muted = $derived($globalMuted);
 	let showMuteIndicator = $state(false);
 	let muteIndicatorTimer: ReturnType<typeof setTimeout> | null = null;
-	let speed = $derived($globalPlaybackSpeed);
 	let showSpeedIndicator = $state(false);
-	let speedIndicatorTimer: ReturnType<typeof setTimeout> | null = null;
 
 	let isDesktop = $state(false);
 	let videoEl: HTMLVideoElement | null = $state(null);
@@ -111,7 +116,6 @@
 	});
 	onDestroy(() => {
 		if (muteIndicatorTimer) clearTimeout(muteIndicatorTimer);
-		if (speedIndicatorTimer) clearTimeout(speedIndicatorTimer);
 		if (playIndicatorTimer) clearTimeout(playIndicatorTimer);
 		if (scrubberTimerId) clearTimeout(scrubberTimerId);
 		sendWatchPercent(clip.id, maxPercent);
@@ -152,6 +156,11 @@
 			maxPercent = 0;
 		}
 	});
+	// Send watch percent to server periodically while active
+	$effect(() => {
+		if (!active) return;
+		return startPeriodicWatchUpdate(clip.id, () => maxPercent);
+	});
 	// Deep-link: open comments sheet when signaled (e.g., from push notification)
 	$effect(() => {
 		const target = $openCommentsSignal;
@@ -232,9 +241,6 @@
 		if (videoEl) connectNormalizer(videoEl);
 		muteIndicatorTimer = flashIndicator((v) => (showMuteIndicator = v), muteIndicatorTimer);
 	}
-	function showSpeedChange() {
-		speedIndicatorTimer = flashIndicator((v) => (showSpeedIndicator = v), speedIndicatorTimer);
-	}
 	function seekMedia(time: number, relative = false) {
 		const el = videoEl ?? audioEl;
 		if (el)
@@ -268,9 +274,6 @@
 			{
 				toggleMute,
 				togglePlayPause,
-				stepSpeedUp,
-				stepSpeedDown,
-				showSpeedChange,
 				seek: (s: number) => seekMedia(s, true)
 			},
 			() => showComments || showPicker
@@ -299,39 +302,26 @@
 <div class="reel-item" data-index={index} bind:this={itemEl}>
 	<div class="bottom-gradient" class:ui-hidden={uiHidden}></div>
 	<div class="top-left-row" class:ui-hidden={uiHidden}>
-		{#if clip.viewCount > 0}
-			<ViewBadge viewCount={clip.viewCount} ontap={() => (showViewers = true)} />
+		{#if !hideViewBadge && clip.viewCount > 0}
+			<ViewBadge
+				viewCount={clip.viewCount}
+				ontap={() => {
+					sendWatchPercent(clip.id, maxPercent);
+					showViewers = true;
+				}}
+			/>
 		{/if}
-		<SpeedPill {active} onspeedchange={showSpeedChange} />
 	</div>
 
 	{#if clip.contentType === 'music'}
-		<ReelMusic
-			{clip}
-			{active}
-			{muted}
-			{autoScroll}
-			playbackRate={speed}
-			{onretry}
-			{onended}
-			bind:audioEl
-		/>
+		<ReelMusic {clip} {active} {muted} {autoScroll} {onretry} {onended} bind:audioEl />
 	{:else}
-		<ReelVideo
-			{clip}
-			{active}
-			{muted}
-			{autoScroll}
-			playbackRate={speed}
-			{onretry}
-			{onended}
-			bind:videoEl
-		/>
+		<ReelVideo {clip} {active} {muted} {autoScroll} {onretry} {onended} bind:videoEl />
 	{/if}
 
 	<ReelIndicators
 		{showSpeedIndicator}
-		{speed}
+		speed={1}
 		{showMuteIndicator}
 		{muted}
 		{showPlayIndicator}
@@ -368,37 +358,37 @@
 				showComments = true;
 			}}
 		/>
+	</div>
 
-		<ActionSidebar
-			favorited={clip.favorited}
-			{reactedEmoji}
-			commentCount={clip.commentCount}
-			unreadCommentCount={localUnreadCount}
-			originalUrl={clip.originalUrl}
-			{muted}
+	<ActionSidebar
+		favorited={clip.favorited}
+		{reactedEmoji}
+		commentCount={clip.commentCount}
+		unreadCommentCount={localUnreadCount}
+		originalUrl={clip.originalUrl}
+		{muted}
+		{uiHidden}
+		{isOwn}
+		onsave={() => onfavorited(clip.id)}
+		oncomment={() => {
+			commentsAutoFocus = false;
+			showComments = true;
+		}}
+		onreactionhold={triggerReactionPickerHold}
+		onmute={toggleMute}
+	/>
+
+	{#if clip.contentType === 'music' && clip.albumArt}
+		<MusicDisc
+			albumArt={clip.albumArt}
+			spotifyUrl={clip.spotifyUrl}
+			appleMusicUrl={clip.appleMusicUrl}
+			youtubeMusicUrl={clip.youtubeMusicUrl}
+			{active}
+			{paused}
 			{uiHidden}
-			{isOwn}
-			onsave={() => onfavorited(clip.id)}
-			oncomment={() => {
-				commentsAutoFocus = false;
-				showComments = true;
-			}}
-			onreactionhold={triggerReactionPickerHold}
-			onmute={toggleMute}
 		/>
-
-		{#if clip.contentType === 'music' && clip.albumArt}
-			<MusicDisc
-				albumArt={clip.albumArt}
-				spotifyUrl={clip.spotifyUrl}
-				appleMusicUrl={clip.appleMusicUrl}
-				youtubeMusicUrl={clip.youtubeMusicUrl}
-				{active}
-				{paused}
-				{uiHidden}
-			/>
-		{/if}
-	</div>
+	{/if}
 </div>
 
 {#if showPicker}
diff --git a/src/lib/components/ReelMusic.svelte b/src/lib/components/ReelMusic.svelte
index 22a7e56..a830578 100644
--- a/src/lib/components/ReelMusic.svelte
+++ b/src/lib/components/ReelMusic.svelte
@@ -130,6 +130,7 @@
 		align-items: center;
 		justify-content: center;
 		overflow: hidden;
+		padding-bottom: calc(var(--bottom-nav-height, 64px) + 34px);
 	}
 
 	.music-bg {
diff --git a/src/lib/components/ReelOverlay.svelte b/src/lib/components/ReelOverlay.svelte
index 9b5c903..c660812 100644
--- a/src/lib/components/ReelOverlay.svelte
+++ b/src/lib/components/ReelOverlay.svelte
@@ -105,7 +105,7 @@
 <style>
 	.reel-overlay {
 		position: absolute;
-		bottom: calc(var(--bottom-nav-height, 64px) + 14px);
+		bottom: calc(var(--bottom-nav-height, 64px) + 34px);
 		left: var(--space-lg);
 		right: var(--space-lg);
 		z-index: 5;
diff --git a/src/lib/reelInteractions.ts b/src/lib/reelInteractions.ts
index 8e56389..3bef843 100644
--- a/src/lib/reelInteractions.ts
+++ b/src/lib/reelInteractions.ts
@@ -4,11 +4,12 @@ const IGNORE_SELECTORS = [
 	'.action-sidebar',
 	'.reel-overlay',
 	'.progress-bar',
-	'.speed-pill',
 	'.comment-prompt',
 	'.play-btn',
 	'.progress-row',
-	'.platform-links'
+	'.platform-links',
+	'.music-disc-area',
+	'.music-links-backdrop'
 ];
 
 function shouldIgnoreTarget(e: { clientX: number; clientY: number }): boolean {
@@ -115,9 +116,6 @@ export function setupMobileGestures(
 export interface KeyboardCallbacks {
 	toggleMute: () => void;
 	togglePlayPause: () => void;
-	stepSpeedUp: () => void;
-	stepSpeedDown: () => void;
-	showSpeedChange: () => void;
 	seek: (seconds: number) => void;
 }
 
@@ -134,14 +132,6 @@ export function setupReelKeyboard(
 			case 'M':
 				callbacks.toggleMute();
 				break;
-			case '[':
-				callbacks.stepSpeedDown();
-				callbacks.showSpeedChange();
-				break;
-			case ']':
-				callbacks.stepSpeedUp();
-				callbacks.showSpeedChange();
-				break;
 		}
 
 		switch (e.key) {
diff --git a/src/lib/reelPlayback.ts b/src/lib/reelPlayback.ts
index ffdcece..a591ca5 100644
--- a/src/lib/reelPlayback.ts
+++ b/src/lib/reelPlayback.ts
@@ -55,6 +55,18 @@ export function sendWatchPercent(clipId: string, maxPercent: number): void {
 	}
 }
 
+export function startPeriodicWatchUpdate(
+	clipId: string,
+	getMaxPercent: () => number,
+	intervalMs = 5000
+): () => void {
+	const id = setInterval(() => {
+		const pct = getMaxPercent();
+		if (pct > 0) sendWatchPercent(clipId, pct);
+	}, intervalMs);
+	return () => clearInterval(id);
+}
+
 export function flashIndicator(
 	setter: (visible: boolean) => void,
 	currentTimer: ReturnType<typeof setTimeout> | null

From f588efa9a264b9c95dbad6ef50fd89c35a014cc7 Mon Sep 17 00:00:00 2001
From: Grayson Adams <51373669+GraysonCAdams@users.noreply.github.com>
Date: Mon, 2 Mar 2026 01:07:43 -0600
Subject: [PATCH 5/7] feat: dedicated clip overlay for viewing single clips

Replace the broken "inject into feed" approach with a standalone
full-screen overlay. Fixes iOS Safari crash caused by incomplete
clip data when rendering via viewClipSignal.

- Create ClipOverlay.svelte with back button, swipe-to-dismiss,
  and history management
- Replace viewClipSignal with clipOverlaySignal across all callers
- Remove inline caption editing from upload status flow
- Add end-of-feed slide with contextual messaging
- Pause background feed reels when overlay is active
- Deep links and "View in feed" now open the overlay
---
 src/app.d.ts                            |   1 +
 src/lib/components/ActivitySheet.svelte |   4 +-
 src/lib/components/AddVideoModal.svelte |  50 +---
 src/lib/components/ClipOverlay.svelte   | 356 ++++++++++++++++++++++++
 src/lib/components/ToastStack.svelte    |   4 +-
 src/lib/components/UploadStatus.svelte  |  58 +---
 src/lib/stores/toasts.ts                |   2 +-
 src/routes/(app)/+page.svelte           | 149 ++++++----
 8 files changed, 471 insertions(+), 153 deletions(-)
 create mode 100644 src/lib/components/ClipOverlay.svelte

diff --git a/src/app.d.ts b/src/app.d.ts
index 78130c5..77f3d3d 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -11,6 +11,7 @@ declare global {
 		}
 		interface PageState {
 			sheet?: string;
+			clipOverlay?: string;
 		}
 	}
 }
diff --git a/src/lib/components/ActivitySheet.svelte b/src/lib/components/ActivitySheet.svelte
index 3106380..81cd236 100644
--- a/src/lib/components/ActivitySheet.svelte
+++ b/src/lib/components/ActivitySheet.svelte
@@ -3,7 +3,7 @@
 	import { resolve } from '$app/paths';
 	import { relativeTime } from '$lib/utils';
 	import { fetchUnreadCount } from '$lib/stores/notifications';
-	import { viewClipSignal, openCommentsSignal } from '$lib/stores/toasts';
+	import { clipOverlaySignal, openCommentsSignal } from '$lib/stores/toasts';
 	import XIcon from 'phosphor-svelte/lib/XIcon';
 	import BellIcon from 'phosphor-svelte/lib/BellIcon';
 
@@ -126,7 +126,7 @@
 		visible = false;
 		setTimeout(() => {
 			ondismiss();
-			viewClipSignal.set(n.clipId);
+			clipOverlaySignal.set(n.clipId);
 			if (n.type !== 'reaction') {
 				openCommentsSignal.set(n.clipId);
 			}
diff --git a/src/lib/components/AddVideoModal.svelte b/src/lib/components/AddVideoModal.svelte
index f2a409c..cc9a991 100644
--- a/src/lib/components/AddVideoModal.svelte
+++ b/src/lib/components/AddVideoModal.svelte
@@ -4,8 +4,7 @@
 	import AddVideo from './AddVideo.svelte';
 	import UploadStatus from './UploadStatus.svelte';
 	import BaseSheet from './BaseSheet.svelte';
-	import { addToast, toast, toasts } from '$lib/stores/toasts';
-	import { clipReadySignal, viewClipSignal } from '$lib/stores/toasts';
+	import { addToast, toasts, clipReadySignal, clipOverlaySignal } from '$lib/stores/toasts';
 	import { dismissShortcutNudge } from '$lib/stores/shortcutNudge';
 	import { groupMembers } from '$lib/stores/members';
 
@@ -14,13 +13,9 @@
 	let phase = $state<'form' | 'uploading' | 'done' | 'failed'>('form');
 	let clipId = $state('');
 	let clipContentType = $state('');
-	let caption = $state('');
-	let captionDirty = $state(false);
-	let serverTitle = $state<string | null>(null);
 	let serverArtist = $state<string | null>(null);
 	let serverAlbumArt = $state<string | null>(null);
 	let pollTimer: ReturnType<typeof setInterval> | null = null;
-	let savingCaption = $state(false);
 	let addVideoRef = $state<ReturnType<typeof AddVideo> | null>(null);
 	let sheetRef = $state<ReturnType<typeof BaseSheet> | null>(null);
 
@@ -45,13 +40,9 @@
 		timers.forEach(clearTimeout);
 	});
 
-	function handleSubmitted(
-		clip: { id: string; status: string; contentType: string },
-		submittedCaption: string
-	) {
+	function handleSubmitted(clip: { id: string; status: string; contentType: string }) {
 		clipId = clip.id;
 		clipContentType = clip.contentType;
-		caption = submittedCaption;
 		// Remove the processing toast AddVideo created — UploadStatus screen takes over
 		toasts.update((t) => t.filter((item) => item.clipId !== clip.id));
 		phase = 'uploading';
@@ -65,10 +56,6 @@
 				if (!res.ok) return;
 				const data = await res.json();
 
-				// Update metadata from server (e.g. music title/artist from Odesli)
-				if (data.title && !captionDirty) {
-					serverTitle = data.title;
-				}
 				if (data.artist) serverArtist = data.artist;
 				if (data.albumArt) serverAlbumArt = data.albumArt;
 
@@ -101,24 +88,6 @@
 		}
 	}
 
-	async function saveCaption() {
-		if (!captionDirty || !caption.trim()) return;
-		savingCaption = true;
-		try {
-			const res = await fetch(`/api/clips/${clipId}`, {
-				method: 'PATCH',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ title: caption.trim() })
-			});
-			if (!res.ok) {
-				toast.error('Failed to save caption');
-			}
-		} catch {
-			toast.error('Failed to save caption');
-		}
-		savingCaption = false;
-	}
-
 	function dismiss() {
 		// If still uploading, push a background toast
 		if (phase === 'uploading') {
@@ -134,25 +103,15 @@
 	}
 
 	async function handleSaveAndView() {
-		if (captionDirty && caption.trim()) {
-			await saveCaption();
-		}
 		clipReadySignal.set(clipId);
-		viewClipSignal.set(clipId);
+		clipOverlaySignal.set(clipId);
 		sheetRef?.dismiss();
 	}
 
-	function handleCaptionInput(e: Event) {
-		caption = (e.target as HTMLInputElement).value;
-		captionDirty = true;
-	}
-
 	function handleDismissNudge() {
 		dismissShortcutNudge();
 		sheetRef?.dismiss();
 	}
-
-	const displayTitle = $derived(captionDirty ? caption : serverTitle || caption || '');
 </script>
 
 <div class="add-video-wrapper" class:fullscreen={phase !== 'form'}>
@@ -178,14 +137,11 @@
 			<UploadStatus
 				{phase}
 				{clipContentType}
-				{displayTitle}
 				{serverArtist}
 				{serverAlbumArt}
-				{savingCaption}
 				ondismiss={dismiss}
 				onretry={handleRetry}
 				onsaveandview={handleSaveAndView}
-				oncaptioninput={handleCaptionInput}
 				ondismissnudge={handleDismissNudge}
 			/>
 		{/if}
diff --git a/src/lib/components/ClipOverlay.svelte b/src/lib/components/ClipOverlay.svelte
new file mode 100644
index 0000000..098c31d
--- /dev/null
+++ b/src/lib/components/ClipOverlay.svelte
@@ -0,0 +1,356 @@
+<script lang="ts">
+	import { pushState } from '$app/navigation';
+	import { fetchUnwatchedCount } from '$lib/stores/notifications';
+	import { openCommentsSignal } from '$lib/stores/toasts';
+	import {
+		fetchSingleClip,
+		markClipWatched,
+		toggleClipFavorite,
+		sendClipReaction,
+		retryClipDownload
+	} from '$lib/feed';
+	import type { FeedClip } from '$lib/types';
+	import ReelItem from './ReelItem.svelte';
+	import ViewBadge from './ViewBadge.svelte';
+	import ViewersSheet from './ViewersSheet.svelte';
+	import SkeletonReel from './SkeletonReel.svelte';
+	import CaretLeftIcon from 'phosphor-svelte/lib/CaretLeftIcon';
+	import WarningCircleIcon from 'phosphor-svelte/lib/WarningCircleIcon';
+
+	const {
+		clipId,
+		currentUserId,
+		autoScroll,
+		gifEnabled = false,
+		openComments = false,
+		ondismiss
+	}: {
+		clipId: string;
+		currentUserId: string;
+		autoScroll: boolean;
+		gifEnabled?: boolean;
+		openComments?: boolean;
+		ondismiss: () => void;
+	} = $props();
+
+	let clip = $state<FeedClip | null>(null);
+	let loading = $state(true);
+	let error = $state(false);
+
+	// Swipe-to-dismiss
+	let overlayEl: HTMLDivElement | null = $state(null);
+	let swipeX = $state(0);
+	let swipeAnimating = $state(false);
+
+	// Viewers sheet (rendered here since ViewBadge is in our top bar)
+	let showViewers = $state(false);
+
+	// History management
+	let closedViaBack = false;
+	let dismissed = false;
+
+	function handleDismiss() {
+		if (dismissed) return;
+		dismissed = true;
+		ondismiss();
+	}
+
+	// Load clip data
+	$effect(() => {
+		(async () => {
+			const data = await fetchSingleClip(clipId);
+			if (data) {
+				clip = data;
+			} else {
+				error = true;
+			}
+			loading = false;
+
+			// Open comments after clip loads if requested
+			if (openComments && data) {
+				// Short delay for ReelItem to mount
+				setTimeout(() => openCommentsSignal.set(clipId), 100);
+			}
+		})();
+	});
+
+	// History: push state on mount, pop on dismiss
+	$effect(() => {
+		pushState('', { clipOverlay: clipId });
+		const handlePopState = () => {
+			closedViaBack = true;
+			handleDismiss();
+		};
+		window.addEventListener('popstate', handlePopState);
+
+		return () => {
+			window.removeEventListener('popstate', handlePopState);
+			if (!closedViaBack) history.back();
+		};
+	});
+
+	// Swipe-to-dismiss gesture (swipe left)
+	$effect(() => {
+		if (!overlayEl) return;
+		const el = overlayEl;
+		let startX = 0;
+		let startY = 0;
+		let tracking = false;
+		let decided = false;
+		let isHorizontal = false;
+
+		function onTouchStart(e: TouchEvent) {
+			if (swipeAnimating) return;
+			const target = e.target as HTMLElement;
+			// Don't interfere with progress bar or interactive elements
+			if (target.closest('.progress-bar') || target.closest('.base-sheet')) return;
+			tracking = true;
+			startX = e.touches[0].clientX;
+			startY = e.touches[0].clientY;
+			decided = false;
+			isHorizontal = false;
+		}
+
+		function onTouchMove(e: TouchEvent) {
+			if (!tracking || swipeAnimating) return;
+			const dx = e.touches[0].clientX - startX;
+			const dy = e.touches[0].clientY - startY;
+
+			if (!decided) {
+				if (Math.abs(dx) < 10 && Math.abs(dy) < 10) return;
+				decided = true;
+				isHorizontal = Math.abs(dx) > Math.abs(dy);
+				if (!isHorizontal) return;
+			}
+
+			if (!isHorizontal) return;
+			e.preventDefault();
+
+			// Only allow leftward swipe to dismiss; rightward gets rubber-band damping
+			swipeX = dx > 0 ? dx * 0.15 : dx;
+		}
+
+		function onTouchEnd() {
+			if (!tracking || !isHorizontal) {
+				tracking = false;
+				decided = false;
+				return;
+			}
+			tracking = false;
+			decided = false;
+
+			const vw = window.innerWidth;
+			const threshold = vw * 0.2;
+
+			// Dismiss if swiped left far enough
+			if (swipeX < -threshold) {
+				swipeAnimating = true;
+				swipeX = -vw;
+				setTimeout(() => {
+					swipeAnimating = false;
+					handleDismiss();
+				}, 300);
+				return;
+			}
+
+			// Snap back
+			swipeAnimating = true;
+			swipeX = 0;
+			setTimeout(() => {
+				swipeAnimating = false;
+			}, 250);
+		}
+
+		el.addEventListener('touchstart', onTouchStart, { passive: true });
+		el.addEventListener('touchmove', onTouchMove, { passive: false });
+		el.addEventListener('touchend', onTouchEnd, { passive: true });
+		return () => {
+			el.removeEventListener('touchstart', onTouchStart);
+			el.removeEventListener('touchmove', onTouchMove);
+			el.removeEventListener('touchend', onTouchEnd);
+		};
+	});
+
+	// Interaction handlers (local state updates)
+	async function handleWatched(id: string) {
+		await markClipWatched(id);
+		if (clip)
+			clip = {
+				...clip,
+				watched: true,
+				viewCount: clip.watched ? clip.viewCount : clip.viewCount + 1
+			};
+		fetchUnwatchedCount();
+	}
+
+	async function handleFavorite(id: string) {
+		const data = await toggleClipFavorite(id);
+		if (data && clip) clip = { ...clip, favorited: data.favorited };
+	}
+
+	async function handleReaction(id: string, emoji: string) {
+		const data = await sendClipReaction(id, emoji);
+		if (data && clip) clip = { ...clip, reactions: data.reactions };
+	}
+
+	async function handleRetry(id: string) {
+		const ok = await retryClipDownload(id);
+		if (ok && clip) clip = { ...clip, status: 'downloading' };
+	}
+
+	function handleCaptionEdit(id: string, newCaption: string) {
+		if (clip) clip = { ...clip, title: newCaption };
+	}
+
+	function handleDelete() {
+		handleDismiss();
+	}
+</script>
+
+<div
+	class="clip-overlay"
+	class:animating={swipeAnimating}
+	style:transform={swipeX !== 0 ? `translateX(${swipeX}px)` : undefined}
+	bind:this={overlayEl}
+>
+	<!-- Top bar: back button + view badge -->
+	<div class="overlay-top-bar">
+		<button class="back-btn" onclick={handleDismiss} aria-label="Go back">
+			<CaretLeftIcon size={22} weight="bold" />
+		</button>
+		{#if clip && clip.viewCount > 0}
+			<ViewBadge
+				viewCount={clip.viewCount}
+				ontap={() => {
+					showViewers = true;
+				}}
+			/>
+		{/if}
+	</div>
+
+	{#if loading}
+		<SkeletonReel />
+	{:else if error || !clip}
+		<div class="overlay-error">
+			<WarningCircleIcon size={48} />
+			<p class="error-title">Clip not found</p>
+			<button class="error-btn" onclick={handleDismiss}>Go back</button>
+		</div>
+	{:else}
+		<div class="overlay-reel">
+			<ReelItem
+				{clip}
+				{currentUserId}
+				active={true}
+				index={0}
+				{autoScroll}
+				{gifEnabled}
+				canEditCaption={clip.addedBy === currentUserId && !clip.seenByOthers}
+				seenByOthers={clip.seenByOthers}
+				hideViewBadge={true}
+				onwatched={handleWatched}
+				onfavorited={handleFavorite}
+				onreaction={handleReaction}
+				onretry={handleRetry}
+				onended={() => {}}
+				oncaptionedit={handleCaptionEdit}
+				ondelete={handleDelete}
+			/>
+		</div>
+	{/if}
+</div>
+
+{#if showViewers}
+	<ViewersSheet {clipId} ondismiss={() => (showViewers = false)} />
+{/if}
+
+<style>
+	.clip-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 40;
+		background: var(--bg-primary);
+	}
+
+	.clip-overlay.animating {
+		transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+	}
+
+	.overlay-top-bar {
+		position: absolute;
+		top: max(var(--space-md), env(safe-area-inset-top));
+		left: var(--space-lg);
+		z-index: 6;
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm);
+		min-height: 40px;
+	}
+
+	.back-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 40px;
+		height: 40px;
+		background: rgba(0, 0, 0, 0.5);
+		backdrop-filter: blur(8px);
+		-webkit-backdrop-filter: blur(8px);
+		border: none;
+		border-radius: var(--radius-full);
+		color: var(--reel-text);
+		cursor: pointer;
+		transition: transform 0.1s ease;
+	}
+
+	.back-btn:active {
+		transform: scale(0.93);
+	}
+
+	.back-btn :global(svg) {
+		filter: drop-shadow(0 1px 2px var(--reel-text-shadow));
+	}
+
+	.overlay-reel {
+		height: 100dvh;
+		width: 100%;
+	}
+
+	.overlay-error {
+		height: 100dvh;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--space-sm);
+		color: var(--text-muted);
+	}
+
+	.overlay-error :global(svg) {
+		opacity: 0.4;
+	}
+
+	.error-title {
+		font-family: var(--font-display);
+		font-size: 1.125rem;
+		font-weight: 700;
+		color: var(--text-primary);
+		margin: 0;
+	}
+
+	.error-btn {
+		margin-top: var(--space-md);
+		padding: 10px 24px;
+		background: var(--accent-primary);
+		color: var(--bg-primary);
+		border: none;
+		border-radius: var(--radius-full);
+		font-size: 0.875rem;
+		font-weight: 700;
+		cursor: pointer;
+	}
+
+	.error-btn:active {
+		transform: scale(0.97);
+	}
+</style>
diff --git a/src/lib/components/ToastStack.svelte b/src/lib/components/ToastStack.svelte
index 79efc99..05433d9 100644
--- a/src/lib/components/ToastStack.svelte
+++ b/src/lib/components/ToastStack.svelte
@@ -4,7 +4,7 @@
 		removeToast,
 		replaceToast,
 		clipReadySignal,
-		viewClipSignal,
+		clipOverlaySignal,
 		type Toast
 	} from '$lib/stores/toasts';
 	import { onDestroy } from 'svelte';
@@ -93,7 +93,7 @@
 
 	function handleView(toast: Toast) {
 		if (toast.clipId) {
-			viewClipSignal.set(toast.clipId);
+			clipOverlaySignal.set(toast.clipId);
 		}
 		handleDismiss(toast.id);
 	}
diff --git a/src/lib/components/UploadStatus.svelte b/src/lib/components/UploadStatus.svelte
index 8e7dd35..6b6dbac 100644
--- a/src/lib/components/UploadStatus.svelte
+++ b/src/lib/components/UploadStatus.svelte
@@ -2,30 +2,25 @@
 	import { showShortcutNudge, dismissShortcutNudge } from '$lib/stores/shortcutNudge';
 	import XIcon from 'phosphor-svelte/lib/XIcon';
 	import CheckIcon from 'phosphor-svelte/lib/CheckIcon';
+	import LightbulbIcon from 'phosphor-svelte/lib/LightbulbIcon';
 
 	const {
 		phase,
 		clipContentType,
-		displayTitle,
 		serverArtist,
 		serverAlbumArt,
-		savingCaption,
 		ondismiss,
 		onretry,
 		onsaveandview,
-		oncaptioninput,
 		ondismissnudge
 	}: {
 		phase: 'uploading' | 'done' | 'failed';
 		clipContentType: string;
-		displayTitle: string;
 		serverArtist: string | null;
 		serverAlbumArt: string | null;
-		savingCaption: boolean;
 		ondismiss: () => void;
 		onretry: () => void;
 		onsaveandview: () => void;
-		oncaptioninput: (e: Event) => void;
 		ondismissnudge: () => void;
 	} = $props();
 
@@ -78,27 +73,15 @@
 			<p class="artist-label">{serverArtist}</p>
 		{/if}
 
-		<!-- Caption input -->
-		<div class="caption-field">
-			<input
-				type="text"
-				value={displayTitle}
-				oninput={oncaptioninput}
-				placeholder="Add a caption..."
-				maxlength={200}
-			/>
-		</div>
-
 		<!-- Action buttons -->
 		{#if phase === 'done'}
-			<button class="primary-btn" onclick={onsaveandview} disabled={savingCaption}>
-				{savingCaption ? 'Saving...' : 'View in feed'}
-			</button>
+			<button class="primary-btn" onclick={onsaveandview}>View in feed</button>
 
 			{#if $showShortcutNudge}
 				<div class="shortcut-nudge">
 					<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 					<a href="/share/setup" class="nudge-link" onclick={ondismissnudge}>
+						<LightbulbIcon size={14} />
 						Share clips faster from other apps
 					</a>
 					<button class="nudge-dismiss" onclick={dismissShortcutNudge} aria-label="Dismiss">
@@ -232,7 +215,7 @@
 		font-size: 1.125rem;
 		font-weight: 700;
 		color: var(--reel-text);
-		margin: 0 0 4px;
+		margin: 0;
 		text-align: center;
 	}
 	.artist-label {
@@ -241,34 +224,9 @@
 		margin: 0 0 var(--space-xl);
 	}
 
-	/* Caption field */
-	.caption-field {
-		width: 100%;
-		margin-top: var(--space-lg);
-		margin-bottom: var(--space-xl);
-	}
-	.caption-field input {
-		width: 100%;
-		padding: 12px var(--space-lg);
-		background: rgba(255, 255, 255, 0.08);
-		border: 1px solid rgba(255, 255, 255, 0.12);
-		border-radius: var(--radius-md);
-		color: var(--reel-text);
-		font-size: 1rem;
-		font-family: var(--font-body);
-		text-align: center;
-		outline: none;
-		transition: border-color 0.2s ease;
-	}
-	.caption-field input::placeholder {
-		color: rgba(255, 255, 255, 0.3);
-	}
-	.caption-field input:focus {
-		border-color: var(--accent-primary);
-	}
-
 	/* Primary button */
 	.primary-btn {
+		margin-top: var(--space-xl);
 		padding: 14px 32px;
 		background: var(--accent-primary);
 		color: var(--bg-primary);
@@ -298,11 +256,17 @@
 		animation: fade-in 0.3s ease 0.5s both;
 	}
 	.nudge-link {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs);
 		font-size: 0.75rem;
 		color: rgba(255, 255, 255, 0.5);
 		text-decoration: underline;
 		text-underline-offset: 2px;
 	}
+	.nudge-link :global(svg) {
+		flex-shrink: 0;
+	}
 	.nudge-dismiss {
 		background: none;
 		border: none;
diff --git a/src/lib/stores/toasts.ts b/src/lib/stores/toasts.ts
index 965bad1..5a60f3d 100644
--- a/src/lib/stores/toasts.ts
+++ b/src/lib/stores/toasts.ts
@@ -14,7 +14,7 @@ export interface Toast {
 
 export const toasts = writable<Toast[]>([]);
 export const clipReadySignal = writable<string | null>(null);
-export const viewClipSignal = writable<string | null>(null);
+export const clipOverlaySignal = writable<string | null>(null);
 export const openCommentsSignal = writable<string | null>(null);
 
 let toastCounter = 0;
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index d66237f..68e8925 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -7,14 +7,10 @@
 	import LinkIcon from 'phosphor-svelte/lib/LinkIcon';
 	import ArrowDownIcon from 'phosphor-svelte/lib/ArrowDownIcon';
 	import FilmSlateIcon from 'phosphor-svelte/lib/FilmSlateIcon';
+	import CheckCircleIcon from 'phosphor-svelte/lib/CheckCircleIcon';
 	import { addVideoModalOpen } from '$lib/stores/addVideoModal';
-	import {
-		addToast,
-		toast,
-		clipReadySignal,
-		viewClipSignal,
-		openCommentsSignal
-	} from '$lib/stores/toasts';
+	import ClipOverlay from '$lib/components/ClipOverlay.svelte';
+	import { addToast, toast, clipReadySignal, clipOverlaySignal } from '$lib/stores/toasts';
 	import { homeTapSignal } from '$lib/stores/homeTap';
 	import { unwatchedCount, fetchUnwatchedCount } from '$lib/stores/notifications';
 	import { feedUiHidden } from '$lib/stores/uiHidden';
@@ -51,6 +47,11 @@
 	let isDesktopFeed = $state(false);
 	const renderWindow = $derived(isDesktopFeed ? 3 : 2);
 
+	// Clip overlay (dedicated single-clip view)
+	let overlayClipId = $state<string | null>(null);
+	let overlayOpenComments = $state(false);
+	const overlayActive = $derived(overlayClipId !== null);
+
 	let pullDistance = $state(0);
 	let isRefreshing = $state(false);
 	let pullSnapping = $state(false);
@@ -161,8 +162,10 @@
 	}
 
 	function scrollToIndex(index: number) {
-		if (!scrollContainer || index < 0 || index >= clips.length) return;
-		const slot = scrollContainer.querySelectorAll('.reel-slot')[index] as HTMLElement | undefined;
+		if (!scrollContainer || index < 0) return;
+		const slots = scrollContainer.querySelectorAll('.reel-slot');
+		if (index >= slots.length) return;
+		const slot = slots[index] as HTMLElement | undefined;
 		if (slot) slot.scrollIntoView({ behavior: 'smooth' });
 	}
 
@@ -378,13 +381,10 @@
 			clips = data.clips;
 			hasMore = data.hasMore;
 			currentOffset = data.clips.length;
-			activeIndex = 0;
-			if (scrollContainer) scrollContainer.scrollTop = 0;
 			const hasNew = data.clips.some((c) => !previousIds.has(c.id));
-			if (!hasNew && data.clips.length > 0) {
-				toast.info('All caught up');
-			} else if (data.clips.length === 0) {
-				toast.info('Nothing new');
+			if (hasNew) {
+				activeIndex = 0;
+				if (scrollContainer) scrollContainer.scrollTop = 0;
 			}
 		} else {
 			toast.error('Failed to refresh feed');
@@ -511,54 +511,35 @@
 	});
 
 	$effect(() => {
-		const targetClipId = $viewClipSignal;
+		const targetClipId = $clipOverlaySignal;
 		if (!targetClipId) return;
-		viewClipSignal.set(null);
-		(async () => {
-			// Fetch the target clip to determine its watched status
-			const targetClip = await fetchSingleClip(targetClipId);
-			const targetFilter: FeedFilter = targetClip?.watched ? 'watched' : 'unwatched';
-
-			filter = targetFilter;
-			currentOffset = 0;
-			hasMore = true;
-			const data = await fetchClips(targetFilter, PAGE_SIZE, sort);
-			if (data) {
-				// Ensure target clip is in the list (it may be beyond the first page)
-				const inPage = data.clips.some((c) => c.id === targetClipId);
-				if (inPage) {
-					clips = data.clips;
-				} else if (targetClip) {
-					// Prepend target clip and de-dupe from the rest
-					clips = [targetClip, ...data.clips.filter((c) => c.id !== targetClipId)];
-				} else {
-					clips = data.clips;
-				}
-				hasMore = data.hasMore;
-				currentOffset = data.clips.length;
-			}
-			loading = false;
-			await new Promise((r) => requestAnimationFrame(r));
-			const idx = clips.findIndex((c) => c.id === targetClipId);
-			if (idx >= 0) {
-				activeIndex = idx;
-				scrollToIndex(idx);
-			}
-		})();
+		clipOverlaySignal.set(null);
+		overlayClipId = targetClipId;
 	});
 
 	$effect(() => {
 		const tap = $homeTapSignal;
 		if (tap > 0) {
 			homeTapSignal.set(0);
-			if (filter !== 'unwatched') setFilter('unwatched');
-			else {
+			if (overlayClipId) {
+				handleOverlayDismiss();
+			} else if (filter !== 'unwatched') {
+				setFilter('unwatched');
+			} else {
 				activeIndex = 0;
 				if (scrollContainer) scrollContainer.scrollTop = 0;
 			}
 		}
 	});
 
+	function handleOverlayDismiss() {
+		overlayClipId = null;
+		overlayOpenComments = false;
+		// Refresh feed to reflect any changes made in the overlay
+		loadInitialClips();
+		fetchUnwatchedCount();
+	}
+
 	function handleCaptionEdit(clipId: string, newCaption: string) {
 		clips = clips.map((c) => (c.id === clipId ? { ...c, title: newCaption } : c));
 	}
@@ -641,13 +622,13 @@
 			})();
 		}
 
-		// Deep-link: jump to a specific clip (and optionally open comments)
+		// Deep-link: open a specific clip in the overlay (and optionally open comments)
 		const params = new URLSearchParams(window.location.search);
 		const deepClipId = params.get('clip');
 		const deepComments = params.get('comments') === 'true';
 		if (deepClipId) {
-			viewClipSignal.set(deepClipId);
-			if (deepComments) openCommentsSignal.set(deepClipId);
+			overlayOpenComments = deepComments;
+			clipOverlaySignal.set(deepClipId);
 			// Clean URL without triggering navigation
 			const clean = new URL(window.location.href);
 			clean.searchParams.delete('clip');
@@ -742,7 +723,7 @@
 							<ReelItem
 								{clip}
 								{currentUserId}
-								active={i === activeIndex}
+								active={i === activeIndex && !overlayActive}
 								index={i}
 								{autoScroll}
 								{gifEnabled}
@@ -781,12 +762,43 @@
 					<div class="reel-slot loading-more-slot">
 						<div class="reel-placeholder"><span class="spinner"></span></div>
 					</div>
+				{:else if !hasMore}
+					<div class="reel-slot end-slide" data-index={clips.length}>
+						<div class="end-slide-content">
+							<span class="end-slide-icon">
+								<CheckCircleIcon size={56} weight="duotone" />
+							</span>
+							<p class="end-slide-title">
+								{filter === 'unwatched' ? "You're all caught up!" : "That's all, folks!"}
+							</p>
+							<p class="end-slide-sub">
+								{#if filter === 'unwatched'}
+									Check back later for new clips
+								{:else if filter === 'watched'}
+									All your watched clips are above
+								{:else}
+									Your favorite clips are above
+								{/if}
+							</p>
+						</div>
+					</div>
 				{/if}
 			</div>
 		{/if}
 	</div>
 </div>
 
+{#if overlayClipId}
+	<ClipOverlay
+		clipId={overlayClipId}
+		{currentUserId}
+		{autoScroll}
+		{gifEnabled}
+		openComments={overlayOpenComments}
+		ondismiss={handleOverlayDismiss}
+	/>
+{/if}
+
 {#if $addVideoModalOpen}
 	<AddVideoModal ondismiss={() => addVideoModalOpen.set(false)} />
 {/if}
@@ -967,6 +979,35 @@
 		color: var(--text-primary);
 		margin: 0;
 	}
+	.end-slide {
+		background: var(--bg-primary);
+	}
+	.end-slide-content {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--space-sm);
+		animation: empty-in 400ms cubic-bezier(0.32, 0.72, 0, 1);
+	}
+	.end-slide-icon {
+		color: var(--accent-primary);
+		opacity: 0.7;
+		margin-bottom: var(--space-xs);
+	}
+	.end-slide-title {
+		font-family: var(--font-display);
+		font-size: 1.25rem;
+		font-weight: 700;
+		color: var(--text-primary);
+		margin: 0;
+	}
+	.end-slide-sub {
+		color: var(--text-muted);
+		font-size: 0.875rem;
+		margin: 0;
+	}
 	@keyframes fade-in {
 		from {
 			opacity: 0;

From 2dd2e437641eb935c7c4e1869a3982d1c24aef26 Mon Sep 17 00:00:00 2001
From: Grayson Adams <51373669+GraysonCAdams@users.noreply.github.com>
Date: Mon, 2 Mar 2026 01:08:39 -0600
Subject: [PATCH 6/7] feat: improved comments UX with inline GIF picker

- Move GIF picker into the content area above the comment input
  instead of a separate overlay
- Toggle between keyboard and GIF icons on the input button
- Add Escape key to dismiss GIF picker or close comments sheet
- Auto-focus GIF search when picker opens
- Close GIF picker when text input is focused
---
 src/lib/components/CommentInput.svelte  |  31 ++++-
 src/lib/components/CommentsSheet.svelte | 167 ++++++++++++++----------
 src/lib/components/GifPicker.svelte     |  47 ++++---
 src/lib/components/MentionInput.svelte  |  12 +-
 4 files changed, 167 insertions(+), 90 deletions(-)

diff --git a/src/lib/components/CommentInput.svelte b/src/lib/components/CommentInput.svelte
index 7727a46..36ddb8f 100644
--- a/src/lib/components/CommentInput.svelte
+++ b/src/lib/components/CommentInput.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import GifIcon from 'phosphor-svelte/lib/GifIcon';
+	import KeyboardIcon from 'phosphor-svelte/lib/KeyboardIcon';
 	import MentionInput from './MentionInput.svelte';
 	import type { GroupMember } from '$lib/types';
 
@@ -7,6 +8,7 @@
 		replyingTo,
 		submitting,
 		gifEnabled = false,
+		gifPickerOpen = false,
 		attachedGif = null,
 		members = [],
 		onsubmit,
@@ -17,6 +19,7 @@
 		replyingTo: { id: string; username: string } | null;
 		submitting: boolean;
 		gifEnabled?: boolean;
+		gifPickerOpen?: boolean;
 		attachedGif: { url: string; stillUrl: string; shareUrl?: string } | null;
 		members?: GroupMember[];
 		onsubmit: (text: string, gifUrl?: string) => void;
@@ -39,11 +42,28 @@
 		mentionInputRef?.clear();
 	}
 
+	export function isEmpty() {
+		return text.trim().length === 0;
+	}
+
 	function handleSubmit(e: SubmitEvent) {
 		e.preventDefault();
 		if (!canSubmit || submitting) return;
 		onsubmit(text.trim(), attachedGif?.shareUrl || attachedGif?.url);
 	}
+
+	function getGifBtnLabel() {
+		if (gifPickerOpen) return 'Show keyboard';
+		if (gifEnabled) return 'Attach GIF';
+		return 'GIFs not available';
+	}
+	const gifBtnLabel = $derived(getGifBtnLabel());
+
+	function handleInputFocus() {
+		if (gifPickerOpen) {
+			ongiftoggle();
+		}
+	}
 </script>
 
 {#if replyingTo}
@@ -64,13 +84,17 @@
 	<button
 		type="button"
 		class="gif-btn"
-		class:active={!!attachedGif}
+		class:active={gifPickerOpen || !!attachedGif}
 		disabled={!gifEnabled}
 		onclick={ongiftoggle}
-		aria-label={gifEnabled ? 'Attach GIF' : 'GIFs not available — host must configure GIPHY'}
+		aria-label={gifBtnLabel}
 		title={gifEnabled ? '' : 'Host must configure GIPHY API key'}
 	>
-		<GifIcon size={26} />
+		{#if gifPickerOpen}
+			<KeyboardIcon size={26} />
+		{:else}
+			<GifIcon size={26} />
+		{/if}
 	</button>
 	<MentionInput
 		bind:this={mentionInputRef}
@@ -82,6 +106,7 @@
 		onchange={(t) => {
 			text = t;
 		}}
+		onfocus={handleInputFocus}
 		onsubmit={() => {
 			if (canSubmit && !submitting)
 				onsubmit(text.trim(), attachedGif?.shareUrl || attachedGif?.url);
diff --git a/src/lib/components/CommentsSheet.svelte b/src/lib/components/CommentsSheet.svelte
index 42cfb04..c459abe 100644
--- a/src/lib/components/CommentsSheet.svelte
+++ b/src/lib/components/CommentsSheet.svelte
@@ -76,6 +76,20 @@
 		loadComments();
 	});
 
+	$effect(() => {
+		function handleKeydown(e: KeyboardEvent) {
+			if (e.key === 'Escape') {
+				if (showGifPicker) {
+					showGifPicker = false;
+				} else if (!attachedGif && commentInput?.isEmpty()) {
+					sheetRef?.dismiss();
+				}
+			}
+		}
+		document.addEventListener('keydown', handleKeydown);
+		return () => document.removeEventListener('keydown', handleKeydown);
+	});
+
 	async function loadComments() {
 		loading = true;
 		const result = await fetchComments(clipId);
@@ -234,86 +248,91 @@
 		sheetId="comments"
 		{ondismiss}
 	>
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_noninteractive_element_interactions -->
-		<div class="comments-list" role="list" aria-label="Comments" onclick={dismissHeartPopover}>
-			{#if loading}
-				<p class="empty">Loading...</p>
-			{:else if feedItems.length === 0}
-				<p class="empty">No comments yet</p>
+		<div class="content-area">
+			{#if showGifPicker}
+				<GifPicker
+					onselect={(gif) => {
+						attachedGif = gif;
+						showGifPicker = false;
+					}}
+					onclose={() => {
+						showGifPicker = false;
+						requestAnimationFrame(() => commentInput?.focus());
+					}}
+					autoFocus
+				/>
 			{:else}
-				{#each feedItems as item (item.type === 'comment' ? item.data.id : `reaction-${item.data.emoji}-${item.data.username}-${item.data.createdAt}`)}
-					{#if item.type === 'reaction'}
-						{@const r = item.data}
-						<div class="reaction-event" role="listitem">
-							<span class="reaction-emoji">{r.emoji}</span>
-							<span class="reaction-text">{r.username} reacted</span>
-							<span class="reaction-time">{relativeTime(r.createdAt)}</span>
-						</div>
+				<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_noninteractive_element_interactions -->
+				<div class="comments-list" role="list" aria-label="Comments" onclick={dismissHeartPopover}>
+					{#if loading}
+						<p class="empty">Loading...</p>
+					{:else if feedItems.length === 0}
+						<p class="empty">No comments yet</p>
 					{:else}
-						{@const comment = item.data}
-						<CommentRow
-							{comment}
-							{currentUserId}
-							{memberUsernames}
-							isEditing={editingId === comment.id}
-							bind:editText
-							isJustPosted={comment.id === justPostedId}
-							isJustHearted={justHeartedIds.has(comment.id)}
-							heartPopoverVisible={heartPopoverId === comment.id}
-							onreply={() => startReply(comment)}
-							ontoggleheart={() => toggleHeart(comment)}
-							onstartedit={() => startEdit(comment)}
-							onsaveedit={() => handleEdit(comment.id)}
-							oncanceledit={cancelEdit}
-							ondelete={() => handleDelete(comment.id)}
-							onstartlongpress={() => startHeartLongPress(comment.id)}
-							oncancellongpress={cancelHeartLongPress}
-						/>
-						{#if comment.replies && comment.replies.length > 0}
-							<div class="replies" role="list" aria-label="Replies to {comment.username}">
-								{#each comment.replies as reply (reply.id)}
-									<CommentRow
-										comment={reply}
-										{currentUserId}
-										{memberUsernames}
-										isReply
-										isEditing={editingId === reply.id}
-										bind:editText
-										isJustHearted={justHeartedIds.has(reply.id)}
-										heartPopoverVisible={heartPopoverId === reply.id}
-										ontoggleheart={() => toggleHeart(reply)}
-										onstartedit={() => startEdit(reply)}
-										onsaveedit={() => handleEdit(reply.id)}
-										oncanceledit={cancelEdit}
-										ondelete={() => handleDelete(reply.id)}
-										onstartlongpress={() => startHeartLongPress(reply.id)}
-										oncancellongpress={cancelHeartLongPress}
-									/>
-								{/each}
-							</div>
-						{/if}
+						{#each feedItems as item (item.type === 'comment' ? item.data.id : `reaction-${item.data.emoji}-${item.data.username}-${item.data.createdAt}`)}
+							{#if item.type === 'reaction'}
+								{@const r = item.data}
+								<div class="reaction-event" role="listitem">
+									<span class="reaction-emoji">{r.emoji}</span>
+									<span class="reaction-text">{r.username} reacted</span>
+									<span class="reaction-time">{relativeTime(r.createdAt)}</span>
+								</div>
+							{:else}
+								{@const comment = item.data}
+								<CommentRow
+									{comment}
+									{currentUserId}
+									{memberUsernames}
+									isEditing={editingId === comment.id}
+									bind:editText
+									isJustPosted={comment.id === justPostedId}
+									isJustHearted={justHeartedIds.has(comment.id)}
+									heartPopoverVisible={heartPopoverId === comment.id}
+									onreply={() => startReply(comment)}
+									ontoggleheart={() => toggleHeart(comment)}
+									onstartedit={() => startEdit(comment)}
+									onsaveedit={() => handleEdit(comment.id)}
+									oncanceledit={cancelEdit}
+									ondelete={() => handleDelete(comment.id)}
+									onstartlongpress={() => startHeartLongPress(comment.id)}
+									oncancellongpress={cancelHeartLongPress}
+								/>
+								{#if comment.replies && comment.replies.length > 0}
+									<div class="replies" role="list" aria-label="Replies to {comment.username}">
+										{#each comment.replies as reply (reply.id)}
+											<CommentRow
+												comment={reply}
+												{currentUserId}
+												{memberUsernames}
+												isReply
+												isEditing={editingId === reply.id}
+												bind:editText
+												isJustHearted={justHeartedIds.has(reply.id)}
+												heartPopoverVisible={heartPopoverId === reply.id}
+												ontoggleheart={() => toggleHeart(reply)}
+												onstartedit={() => startEdit(reply)}
+												onsaveedit={() => handleEdit(reply.id)}
+												oncanceledit={cancelEdit}
+												ondelete={() => handleDelete(reply.id)}
+												onstartlongpress={() => startHeartLongPress(reply.id)}
+												oncancellongpress={cancelHeartLongPress}
+											/>
+										{/each}
+									</div>
+								{/if}
+							{/if}
+						{/each}
 					{/if}
-				{/each}
+				</div>
 			{/if}
 		</div>
 
-		{#if showGifPicker}
-			<GifPicker
-				onselect={(gif) => {
-					attachedGif = gif;
-					showGifPicker = false;
-				}}
-				ondismiss={() => {
-					showGifPicker = false;
-				}}
-			/>
-		{/if}
-
 		<CommentInput
 			bind:this={commentInput}
 			{replyingTo}
 			{submitting}
 			{gifEnabled}
+			gifPickerOpen={showGifPicker}
 			{attachedGif}
 			{members}
 			onsubmit={handleSubmit}
@@ -322,6 +341,9 @@
 			}}
 			ongiftoggle={() => {
 				showGifPicker = !showGifPicker;
+				if (!showGifPicker) {
+					requestAnimationFrame(() => commentInput?.focus());
+				}
 			}}
 			onremovegif={() => {
 				attachedGif = null;
@@ -336,8 +358,15 @@
 	}
 	.comments-sheet-wrapper :global(.base-sheet) {
 		height: 70vh;
+		height: 70dvh;
 		background: rgba(0, 0, 0, 0.93);
 	}
+	.content-area {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+	}
 	.comments-list {
 		flex: 1;
 		overflow-y: auto;
diff --git a/src/lib/components/GifPicker.svelte b/src/lib/components/GifPicker.svelte
index b74516a..4ffca56 100644
--- a/src/lib/components/GifPicker.svelte
+++ b/src/lib/components/GifPicker.svelte
@@ -13,12 +13,28 @@
 
 	const {
 		onselect,
-		ondismiss
+		onclose,
+		autoFocus = false
 	}: {
 		onselect: (gif: GifResult) => void;
-		ondismiss: () => void;
+		onclose?: () => void;
+		autoFocus?: boolean;
 	} = $props();
 
+	function handleSearchKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			searchInputEl?.blur();
+			onclose?.();
+		}
+	}
+
+	let searchInputEl = $state<HTMLInputElement | null>(null);
+
+	export function focusSearch() {
+		searchInputEl?.focus();
+	}
+
 	let query = $state('');
 	let gifs = $state<GifResult[]>([]);
 	let loading = $state(false);
@@ -41,6 +57,9 @@
 
 	$effect(() => {
 		loadGifs();
+		if (autoFocus) {
+			requestAnimationFrame(() => searchInputEl?.focus());
+		}
 		return () => {
 			if (debounceTimer) clearTimeout(debounceTimer);
 		};
@@ -108,9 +127,15 @@
 	<div class="picker-header">
 		<div class="search-field">
 			<MagnifyingGlassIcon size={16} weight="bold" />
-			<input type="text" bind:value={query} placeholder="Search GIPHY" inputmode="search" />
+			<input
+				bind:this={searchInputEl}
+				type="text"
+				bind:value={query}
+				placeholder="Search GIPHY"
+				inputmode="search"
+				onkeydown={handleSearchKeydown}
+			/>
 		</div>
-		<button class="close-btn" onclick={ondismiss}>&times;</button>
 	</div>
 
 	<div class="gif-grid" bind:this={gridEl}>
@@ -149,8 +174,8 @@
 	.gif-picker {
 		display: flex;
 		flex-direction: column;
-		height: 40vh;
-		border-top: 1px solid var(--border);
+		flex: 1;
+		min-height: 0;
 		background: var(--bg-elevated);
 	}
 
@@ -190,16 +215,6 @@
 		color: var(--text-muted);
 	}
 
-	.close-btn {
-		background: none;
-		border: none;
-		color: var(--text-muted);
-		font-size: 1.25rem;
-		cursor: pointer;
-		padding: var(--space-xs);
-		line-height: 1;
-	}
-
 	.gif-grid {
 		flex: 1;
 		overflow-y: auto;
diff --git a/src/lib/components/MentionInput.svelte b/src/lib/components/MentionInput.svelte
index 9852806..ee4e2fc 100644
--- a/src/lib/components/MentionInput.svelte
+++ b/src/lib/components/MentionInput.svelte
@@ -8,6 +8,7 @@
 		members = [],
 		singleLine = false,
 		onchange,
+		onfocus,
 		onsubmit
 	}: {
 		placeholder?: string;
@@ -16,6 +17,7 @@
 		members?: GroupMember[];
 		singleLine?: boolean;
 		onchange?: (text: string) => void;
+		onfocus?: () => void;
 		onsubmit?: () => void;
 	} = $props();
 
@@ -198,7 +200,10 @@
 				oninput={handleInput}
 				onkeydown={handleKeydown}
 				onclick={handleClick}
-				onfocus={() => (isFocused = true)}
+				onfocus={() => {
+					isFocused = true;
+					onfocus?.();
+				}}
 				onblur={() => (isFocused = false)}
 				onscroll={syncScroll}
 			/>
@@ -215,7 +220,10 @@
 				oninput={handleInput}
 				onkeydown={handleKeydown}
 				onclick={handleClick}
-				onfocus={() => (isFocused = true)}
+				onfocus={() => {
+					isFocused = true;
+					onfocus?.();
+				}}
 				onblur={() => (isFocused = false)}
 				onscroll={syncScroll}
 			></textarea>

From a315a9c943f789f0046d280c753382460fbf0362 Mon Sep 17 00:00:00 2001
From: Grayson Adams <51373669+GraysonCAdams@users.noreply.github.com>
Date: Mon, 2 Mar 2026 01:10:22 -0600
Subject: [PATCH 7/7] feat: share shortcut nudge and dev mode GIF placeholders

- Add "Share clips faster from other apps" hint link in AddVideo form
  and upload success screen when shortcut nudge is active
- Enable GIF picker in dev mode with placeholder images
- Generate dev placeholder GIFs when no GIPHY API key is configured
---
 src/lib/components/AddVideo.svelte    | 48 +++++++++++++--------------
 src/routes/(app)/+layout.server.ts    |  3 +-
 src/routes/api/gifs/search/+server.ts | 39 +++++++++++++++++++++-
 3 files changed, 64 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/AddVideo.svelte b/src/lib/components/AddVideo.svelte
index 8b169a3..aa1ed33 100644
--- a/src/lib/components/AddVideo.svelte
+++ b/src/lib/components/AddVideo.svelte
@@ -8,22 +8,21 @@
 		isPlatformAllowed
 	} from '$lib/url-validation';
 	import { addToast } from '$lib/stores/toasts';
+	import { showShortcutNudge } from '$lib/stores/shortcutNudge';
 	import { page } from '$app/stores';
 	import type { GroupMember } from '$lib/types';
 	import DownloadSimpleIcon from 'phosphor-svelte/lib/DownloadSimpleIcon';
 	import ClipboardIcon from 'phosphor-svelte/lib/ClipboardIcon';
 	import XIcon from 'phosphor-svelte/lib/XIcon';
 	import ArrowRightIcon from 'phosphor-svelte/lib/ArrowRightIcon';
+	import LightbulbIcon from 'phosphor-svelte/lib/LightbulbIcon';
 
 	const {
 		onsubmitted,
 		initialUrl,
 		members = []
 	}: {
-		onsubmitted?: (
-			clip: { id: string; status: string; contentType: string },
-			caption: string
-		) => void;
+		onsubmitted?: (clip: { id: string; status: string; contentType: string }) => void;
 		initialUrl?: string;
 		members?: GroupMember[];
 	} = $props();
@@ -132,7 +131,7 @@
 				contentType: data.clip.contentType,
 				autoDismiss: 0
 			});
-			onsubmitted?.(data.clip, '');
+			onsubmitted?.(data.clip);
 		} catch {
 			error = 'Something went wrong';
 		} finally {
@@ -229,6 +228,14 @@
 			<p class="platform-blocked">{platformLabel(url.trim())} links aren't allowed in this group</p>
 		{/if}
 		<InlineError message={error} />
+
+		{#if $showShortcutNudge}
+			<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+			<a href="/share/setup" class="share-hint">
+				<LightbulbIcon size={14} />
+				Share clips faster from other apps
+			</a>
+		{/if}
 	</form>
 {/if}
 
@@ -240,7 +247,6 @@
 		gap: var(--space-md);
 		padding: var(--space-sm) var(--space-lg) var(--space-lg);
 	}
-
 	.clipboard-suggestion {
 		display: flex;
 		align-items: center;
@@ -326,8 +332,6 @@
 			transform: translateY(0);
 		}
 	}
-
-	/* iMessage-style compose fields */
 	.compose-fields {
 		width: 100%;
 		background: var(--bg-elevated);
@@ -338,25 +342,21 @@
 			border-color 0.2s ease,
 			box-shadow 0.2s ease;
 	}
-
 	.compose-fields:focus-within {
 		border-color: var(--accent-primary);
 		box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 15%, transparent);
 	}
-
 	.field-row {
 		display: flex;
 		align-items: center;
 		gap: var(--space-sm);
 		padding: var(--space-xs) var(--space-md);
 	}
-
 	.message-row {
 		align-items: flex-start;
 		padding-top: var(--space-sm);
 		padding-bottom: var(--space-sm);
 	}
-
 	.field-label {
 		font-size: 0.8125rem;
 		font-weight: 600;
@@ -364,28 +364,23 @@
 		flex-shrink: 0;
 		min-width: 56px;
 	}
-
 	.message-row .field-label {
 		padding-top: var(--space-xs);
 	}
-
 	.field-divider {
 		height: 1px;
 		background: var(--border);
 		margin: 0 var(--space-md);
 	}
-
 	.field-input-wrap {
 		display: flex;
 		align-items: center;
 		flex: 1;
 		min-width: 0;
 	}
-
 	.field-input-wrap.has-error input {
 		color: var(--error);
 	}
-
 	.field-input-wrap input {
 		flex: 1;
 		padding: 10px 0;
@@ -439,16 +434,13 @@
 		width: 18px;
 		height: 18px;
 	}
-
 	.submit-btn:active {
 		transform: scale(0.92);
 	}
-
 	.submit-btn:disabled {
 		opacity: 0.35;
 		cursor: not-allowed;
 	}
-
 	.spinner {
 		width: 16px;
 		height: 16px;
@@ -457,13 +449,11 @@
 		border-radius: var(--radius-full);
 		animation: spin 0.6s linear infinite;
 	}
-
 	@keyframes spin {
 		to {
 			transform: rotate(360deg);
 		}
 	}
-
 	.platform-blocked {
 		margin: 0;
 		font-size: 0.8125rem;
@@ -476,7 +466,6 @@
 		text-align: center;
 		padding: var(--space-2xl) var(--space-lg);
 	}
-
 	.no-provider-state :global(.no-provider-icon) {
 		width: 40px;
 		height: 40px;
@@ -484,7 +473,6 @@
 		opacity: 0.4;
 		margin-bottom: var(--space-md);
 	}
-
 	.no-provider-title {
 		font-family: var(--font-display);
 		font-size: 1rem;
@@ -497,4 +485,16 @@
 		color: var(--text-muted);
 		margin: 0;
 	}
+	.share-hint {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs);
+		font-size: 0.75rem;
+		color: var(--text-muted);
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+	.share-hint :global(svg) {
+		flex-shrink: 0;
+	}
 </style>
diff --git a/src/routes/(app)/+layout.server.ts b/src/routes/(app)/+layout.server.ts
index e614671..306b107 100644
--- a/src/routes/(app)/+layout.server.ts
+++ b/src/routes/(app)/+layout.server.ts
@@ -1,4 +1,5 @@
 import { redirect } from '@sveltejs/kit';
+import { dev } from '$app/environment';
 import type { LayoutServerLoad } from './$types';
 import { env } from '$env/dynamic/private';
 
@@ -14,6 +15,6 @@ export const load: LayoutServerLoad = async ({ locals, url }) => {
 		user: locals.user,
 		group: locals.group,
 		vapidPublicKey: env.VAPID_PUBLIC_KEY || '',
-		gifEnabled: !!env.GIPHY_API_KEY
+		gifEnabled: !!env.GIPHY_API_KEY || dev
 	};
 };
diff --git a/src/routes/api/gifs/search/+server.ts b/src/routes/api/gifs/search/+server.ts
index b7586c2..46c333b 100644
--- a/src/routes/api/gifs/search/+server.ts
+++ b/src/routes/api/gifs/search/+server.ts
@@ -1,13 +1,50 @@
 import { json } from '@sveltejs/kit';
+import { dev } from '$app/environment';
 import type { RequestHandler } from './$types';
 import { env } from '$env/dynamic/private';
 import { withAuth, safeInt } from '$lib/server/api-utils';
 
 const GIPHY_BASE = 'https://api.giphy.com/v1/gifs';
 
+// Placeholder GIFs for dev mode when no GIPHY API key is configured
+function generateDevGifs(count: number) {
+	const colors = [
+		'E74C3C',
+		'3498DB',
+		'2ECC71',
+		'F39C12',
+		'9B59B6',
+		'1ABC9C',
+		'E91E63',
+		'00BCD4',
+		'FF5722',
+		'795548'
+	];
+	const widths = [200, 200, 200, 200, 200];
+	const heights = [200, 150, 250, 180, 220];
+	return Array.from({ length: count }, (_, i) => {
+		const w = widths[i % widths.length];
+		const h = heights[i % heights.length];
+		const color = colors[i % colors.length];
+		const url = `https://placehold.co/${w}x${h}/${color}/white?text=GIF+${i + 1}`;
+		return {
+			id: `dev-${i}`,
+			title: `Dev GIF ${i + 1}`,
+			url,
+			stillUrl: url,
+			shareUrl: url,
+			width: w,
+			height: h
+		};
+	});
+}
+
 export const GET: RequestHandler = withAuth(async ({ url }, _auth) => {
 	const apiKey = env.GIPHY_API_KEY;
-	if (!apiKey) return json({ error: 'GIF search not configured' }, { status: 503 });
+	if (!apiKey) {
+		if (dev) return json({ gifs: generateDevGifs(20) });
+		return json({ error: 'GIF search not configured' }, { status: 503 });
+	}
 
 	const q = url.searchParams.get('q')?.trim();
 	const limit = safeInt(url.searchParams.get('limit'), 20, 30);