Merge pull request #45 from injoon5/claude/liking-process-inspection-1dtmY

Harden client IP resolution and drop dead LikeButton ref

Author: injoon5

src/lib/LikeButton.svelte

@@ -7,20 +7,25 @@
 	import Heart from '@lucide/svelte/icons/heart';
 	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
 
-	// Pages are prerendered, so the layout's ipHash is frozen at build time and
-	// never matches a real visitor — the liked state would always read false.
-	// Fetch the visitor's real hash at runtime and re-subscribe with it.
-	let clientIpHash = $state($page.data.ipHash ?? '');
+	// Pages are prerendered, so any ipHash baked in at build time never matches a
+	// real visitor. We fetch the visitor's real hash at runtime; until that
+	// resolves we must NOT trust the `liked` flag — the query would report
+	// `liked: false` for a page the visitor has actually liked, and clicking the
+	// button would then silently remove that like (the count drops).
+	let clientIpHash = $state('');
+	let hashReal = $state(false);
+	let hashAttempted = $state(false);
 
 	const query = useQuery(
 		api.likes.get,
 		() => ({
 			url: $page.url.pathname,
 			ipHash: clientIpHash
 		}),
-		// The runtime ipHash re-subscription (see onMount) swaps the query args
-		// on every visit. Keep the prior result so the count doesn't flash back
-		// to the loading skeleton each load.
+		// Keep the prior result so the count doesn't flash to the skeleton when
+		// the ipHash re-subscription fires. `isStale` (below) tells us when the
+		// retained data belongs to different args so we never treat data from a
+		// previous page — or the pre-resolution hash — as authoritative.
 		{ keepPreviousData: true }
 	);
 
@@ -29,10 +34,15 @@
 			const res = await fetch('/api/ip-hash');
 			if (res.ok) {
 				const data = await res.json();
-				if (data.ipHash) clientIpHash = data.ipHash;
+				if (data.ipHash) {
+					clientIpHash = data.ipHash;
+					hashReal = true;
+				}
 			}
 		} catch {
-			// keep the fallback hash
+			// keep the empty hash; liked state stays unknown
+		} finally {
+			hashAttempted = true;
 		}
 	});
 
@@ -41,11 +51,34 @@
 	let likeErrorTimer = null;
 	let particles = $state([]);
 	let particleId = 0;
-	let buttonEl;
 
-	const likeCount = $derived(query.data?.count ?? 0);
-	const isLiked = $derived(query.data?.liked ?? false);
-	const loading = $derived(query.isLoading);
+	// Pathname of the most recent fresh (non-stale) result, so we can tell
+	// whether retained stale data still applies to the current page (an ipHash
+	// swap on the same URL) or belongs to a post we navigated away from.
+	let dataUrl = $state(null);
+	$effect(() => {
+		if (query.data && !query.isStale) dataUrl = $page.url.pathname;
+	});
+
+	const path = $derived($page.url.pathname);
+	// The count is independent of the visitor's hash, so retained same-URL data
+	// is still correct; only data carried over from another URL must be hidden.
+	const countApplies = $derived(!query.isStale || dataUrl === path);
+	// `liked` is per-visitor: trust it only once the real hash is in use and the
+	// subscription holds fresh data for the current page.
+	const likedReady = $derived(hashReal && !query.isStale && !!query.data && dataUrl === path);
+
+	const likeCount = $derived(countApplies ? (query.data?.count ?? 0) : 0);
+	const isLiked = $derived(likedReady ? query.data.liked : false);
+	const showCount = $derived(countApplies && !!query.data);
+	// Allow clicks once liked is trustworthy, or once we've attempted the hash
+	// fetch and it failed (so a broken /api/ip-hash doesn't disable the button
+	// forever — the toggle itself is computed from the real IP server-side).
+	const interactive = $derived(
+		countApplies &&
+			(likedReady || (hashAttempted && !hashReal && !query.isStale && !!query.data))
+	);
+	const busy = $derived(!interactive || toggling);
 
 	function showLikeError(message) {
 		likeError = message;
@@ -101,7 +134,7 @@
 </script>
 
 <div class="flex items-center justify-between">
-	{#if loading}
+	{#if !showCount}
 		<span class="shimmer mr-2 inline-block h-6 w-16 rounded"></span>
 	{:else}
 		<span
@@ -125,16 +158,15 @@
 		{/each}
 
 		<button
-			bind:this={buttonEl}
 			onclick={toggleLike}
-			disabled={loading || toggling}
+			disabled={busy}
 			aria-pressed={isLiked}
 			class="inline-flex items-center justify-center gap-1.5 rounded-full border px-4 py-2 text-sm font-medium transition-[background-color,border-color,color,transform] duration-200 ease-out active:scale-[0.94] disabled:cursor-not-allowed disabled:opacity-60
 			{isLiked
 				? 'border-rose-300/70 bg-rose-50 text-rose-600 hover:bg-rose-100 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-300 dark:hover:bg-rose-950/60'
 				: 'border-neutral-200 bg-transparent text-neutral-700 hover:border-rose-200 hover:bg-rose-50 hover:text-rose-600 dark:border-neutral-800 dark:text-neutral-300 dark:hover:border-rose-900/50 dark:hover:bg-rose-950/30 dark:hover:text-rose-300'}"
 		>
-			{#if toggling}
+			{#if busy}
 				<LoaderCircle size="14" strokeWidth="2" class="animate-spin" aria-hidden="true" />
 			{:else}
 				<Heart

src/lib/comments/CommentNode.svelte

@@ -16,6 +16,8 @@
 		setActiveForm,
 		votingIds,
 		votingAnim,
+		canVote = true,
+		voteKnown = true,
 		onVote,
 		onHaptic
 	} = $props();
@@ -42,6 +44,10 @@
 
 	const isDeleted = $derived(comment.text === '[deleted]');
 	const isVoting = $derived(votingIds.has(comment.id));
+	// Only reflect the visitor's vote once it's trustworthy (see CommentsSection);
+	// otherwise show neutral arrows so a stale/unknown state can't be mis-toggled.
+	const myVote = $derived(voteKnown ? comment.myVote : null);
+	const voteDisabled = $derived(isVoting || !canVote);
 	const replyCharsLeft = $derived(MAX_LENGTH - replyText.length);
 	const showReplyCharsLeft = $derived(replyText.length > MAX_LENGTH - CHAR_THRESHOLD);
 	const replyDisabled = $derived(
@@ -199,12 +205,12 @@
 
 				<button
 					onclick={() => handleVote('up')}
-					disabled={isVoting}
+					disabled={voteDisabled}
 					aria-label="Upvote"
-					aria-pressed={comment.myVote === 'up'}
+					aria-pressed={myVote === 'up'}
 					class="rounded-full p-1.5 transition-[background-color,color,transform] duration-150 ease-out active:scale-90 disabled:cursor-not-allowed disabled:opacity-60
 						{votingAnim.id === comment.id && votingAnim.side === 'up' ? 'vote-pop' : ''}
-						{comment.myVote === 'up'
+						{myVote === 'up'
 						? 'text-emerald-600 dark:text-emerald-400'
 						: 'text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100'}"
 				>
@@ -217,12 +223,12 @@
 
 				<button
 					onclick={() => handleVote('down')}
-					disabled={isVoting}
+					disabled={voteDisabled}
 					aria-label="Downvote"
-					aria-pressed={comment.myVote === 'down'}
+					aria-pressed={myVote === 'down'}
 					class="rounded-full p-1.5 transition-[background-color,color,transform] duration-150 ease-out active:scale-90 disabled:cursor-not-allowed disabled:opacity-60
 						{votingAnim.id === comment.id && votingAnim.side === 'down' ? 'vote-pop' : ''}
-						{comment.myVote === 'down'
+						{myVote === 'down'
 						? 'text-rose-600 dark:text-rose-400'
 						: 'text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100'}"
 				>
@@ -418,6 +424,8 @@
 					{setActiveForm}
 					{votingIds}
 					{votingAnim}
+					{canVote}
+					{voteKnown}
 					{onVote}
 					{onHaptic}
 				/>

src/lib/comments/CommentsSection.svelte

@@ -48,20 +48,29 @@
 	}
 	const fallbackHandle = makeHandle();
 
-	// Pages are prerendered, so the layout's ipHash is frozen at build time and
-	// never matches a real visitor — per-user vote state would always read wrong.
-	// Fetch the visitor's real hash at runtime and re-subscribe with it.
-	let clientIpHash = $state($page.data.ipHash ?? '');
+	// Pages are prerendered, so any ipHash baked in at build time never matches a
+	// real visitor. We fetch the visitor's real hash at runtime; until that
+	// resolves we must NOT trust each comment's `myVote` — it would read null for
+	// a comment the visitor has actually voted on, and clicking the arrow would
+	// then silently remove that vote (the score drops).
+	let clientIpHash = $state('');
+	let hashReal = $state(false);
+	let hashAttempted = $state(false);
 
 	onMount(async () => {
 		try {
 			const res = await fetch('/api/ip-hash');
 			if (res.ok) {
 				const data = await res.json();
-				if (data.ipHash) clientIpHash = data.ipHash;
+				if (data.ipHash) {
+					clientIpHash = data.ipHash;
+					hashReal = true;
+				}
 			}
 		} catch {
-			// keep the fallback hash
+			// keep the empty hash; vote state stays unknown
+		} finally {
+			hashAttempted = true;
 		}
 	});
 
@@ -97,6 +106,7 @@
 	}
 
 	async function vote(commentId, voteType) {
+		if (!canVote) return;
 		if (votingIds.has(commentId)) return;
 
 		if (votingAnimTimer) clearTimeout(votingAnimTimer);
@@ -160,6 +170,16 @@
 
 	const commentTree = $derived(buildTree(query.data ?? []));
 
+	// `myVote` is per-visitor: trust the highlight only once the real hash is in
+	// use and the subscription holds fresh (non-stale) data. Allow clicking once
+	// trusted, or once a failed /api/ip-hash leaves us with fresh data and no
+	// real hash (the vote itself is computed from the real IP server-side, so a
+	// broken hash fetch must not lock voting forever).
+	const voteKnown = $derived(hashReal && !query.isStale && !!query.data);
+	const canVote = $derived(
+		voteKnown || (hashAttempted && !hashReal && !query.isStale && !!query.data)
+	);
+
 	// Reset transient form state on path change
 	let currentPath = $state($page.url.pathname);
 	$effect(() => {
@@ -291,6 +311,8 @@
 					{setActiveForm}
 					{votingIds}
 					{votingAnim}
+					{canVote}
+					{voteKnown}
 					onVote={vote}
 					onHaptic={haptic}
 				/>

src/lib/server/ip.ts

@@ -1,11 +1,18 @@
 import { createHash } from 'crypto';
 
 export function getClientIp(request: Request): string {
+	// Prefer x-real-ip: on Vercel (and most reverse proxies) it is set by the
+	// platform from the TCP connection and is not overridable by the caller.
+	// The leftmost x-forwarded-for entry is attacker-controlled, so trusting it
+	// first lets a caller forge a fresh identity per request — inflating like
+	// counts and evading per-IP bans and rate limits.
+	const realIp = request.headers.get('x-real-ip');
+	if (realIp) return realIp.trim();
+
 	const forwarded = request.headers.get('x-forwarded-for');
-	if (forwarded) {
-		return forwarded.split(',')[0].trim();
-	}
-	return request.headers.get('x-real-ip') ?? '127.0.0.1';
+	if (forwarded) return forwarded.split(',')[0].trim();
+
+	return '127.0.0.1';
 }
 
 export function hashIp(ip: string): string {