feat: UI polish — reaction pills, swipe bounds, settings cleanup

src/hooks.server.ts

@@ -4,9 +4,11 @@ import { getAccentColor } from '$lib/colors';
 import { startScheduler } from '$lib/server/scheduler';
 import { createLogger } from '$lib/server/logger';
 import { checkRateLimit, rateLimitResponse } from '$lib/server/rate-limit';
+import { env } from '$env/dynamic/private';
 
 const log = createLogger('http');
 const verboseRequests = process.env.VERBOSE_REQUESTS === 'true';
+const secureSuffix = env.NODE_ENV === 'production' ? ';Secure' : '';
 
 startScheduler();
 
@@ -92,7 +94,7 @@ function setThemeCookies(event: RequestEvent, response: Response): void {
 	if (event.locals.user?.themePreference && !cookies.includes('scrolly_theme=')) {
 		response.headers.append(
 			'Set-Cookie',
-			`scrolly_theme=${event.locals.user.themePreference};Path=/;Max-Age=31536000;SameSite=Lax;Secure`
+			`scrolly_theme=${event.locals.user.themePreference};Path=/;Max-Age=31536000;SameSite=Lax${secureSuffix}`
 		);
 	}
 
@@ -101,7 +103,7 @@ function setThemeCookies(event: RequestEvent, response: Response): void {
 		const accentValue = encodeURIComponent(JSON.stringify({ hex: accent.hex, dark: accent.dark }));
 		response.headers.append(
 			'Set-Cookie',
-			`scrolly_accent=${accentValue};Path=/;Max-Age=31536000;SameSite=Lax;Secure`
+			`scrolly_accent=${accentValue};Path=/;Max-Age=31536000;SameSite=Lax${secureSuffix}`
 		);
 	}
 }

src/lib/components/ActionSidebar.svelte

@@ -100,7 +100,6 @@
 		if (!holdFired) {
 			onsave();
 		}
-		holdFired = false;
 	}
 </script>
 

src/lib/components/BaseSheet.svelte

@@ -11,12 +11,14 @@
 		title = '',
 		sheetId = 'sheet',
 		ondismiss,
+		onclose,
 		header,
 		children
 	}: {
 		title?: string;
 		sheetId?: string;
 		ondismiss: () => void;
+		onclose?: () => void;
 		header?: Snippet;
 		children: Snippet;
 	} = $props();
@@ -122,7 +124,7 @@
 		{:else if title}
 			<div class="base-header">
 				<span class="base-title">{title}</span>
-				<button class="base-close-btn" onclick={dismiss} aria-label="Close">
+				<button class="base-close-btn" onclick={onclose ?? dismiss} aria-label="Close">
 					<XIcon size={18} />
 				</button>
 			</div>

src/lib/components/CommentInput.svelte

@@ -241,6 +241,7 @@
 		height: calc(1.4em + 16px);
 		-webkit-appearance: none;
 		appearance: none;
+		overflow: hidden;
 	}
 
 	/* Action buttons sit to the right of the textarea, vertically centered by the flex parent. */

src/lib/components/CommentRow.svelte

@@ -53,7 +53,12 @@
 	}
 </script>
 
-<div class={isReply ? 'reply' : 'comment'} class:just-posted={isJustPosted} role="listitem">
+<div
+	class={isReply ? 'reply' : 'comment'}
+	class:just-posted={isJustPosted}
+	role="listitem"
+	data-comment-id={comment.id}
+>
 	<div class={isReply ? 'reply-avatar' : 'comment-avatar'}>
 		{#if comment.avatarPath}
 			<img src="/api/profile/avatar/{comment.avatarPath}" alt="" class="avatar-img" />
@@ -90,7 +95,7 @@
 			{/if}
 		{/if}
 		<div class="comment-actions">
-			{#if !isReply}
+			{#if onreply}
 				<button class="reply-btn" onclick={onreply}>Reply</button>
 			{/if}
 			{#if comment.userId !== currentUserId}