From aea324988d9dd7fd77ec9448193c7bcda3fb4041 Mon Sep 17 00:00:00 2001
From: Zias van Nes <vanneszias@icloud.com>
Date: Thu, 16 Oct 2025 17:29:05 +0200
Subject: [PATCH] fix:likes;UI:find card&list

---
 src/lib/components/FindCard.svelte            | 337 +++++++-----
 src/lib/components/FindsList.svelte           | 104 ++--
 src/lib/components/LikeButton.svelte          |  53 +-
 src/routes/api/finds/[findId]/like/+server.ts |  31 +-
 src/routes/finds/+page.server.ts              | 155 ------
 src/routes/finds/+page.svelte                 | 518 ------------------
 6 files changed, 320 insertions(+), 878 deletions(-)
 delete mode 100644 src/routes/finds/+page.server.ts
 delete mode 100644 src/routes/finds/+page.svelte

diff --git a/src/lib/components/FindCard.svelte b/src/lib/components/FindCard.svelte
index c72c2c0..b7957e6 100644
--- a/src/lib/components/FindCard.svelte
+++ b/src/lib/components/FindCard.svelte
@@ -3,6 +3,8 @@
 	import { Badge } from '$lib/components/badge';
 	import LikeButton from '$lib/components/LikeButton.svelte';
 	import VideoPlayer from '$lib/components/VideoPlayer.svelte';
+	import { Avatar, AvatarFallback } from '$lib/components/avatar';
+	import { MoreHorizontal, MessageCircle, Share } from '@lucide/svelte';
 
 	interface FindCardProps {
 		id: string;
@@ -40,14 +42,62 @@
 		onExplore?.(id);
 	}
 
-	function truncateText(text: string, maxLength: number = 120): string {
-		if (text.length <= maxLength) return text;
-		return text.slice(0, maxLength).trim() + '...';
+	function getUserInitials(username: string): string {
+		return username.slice(0, 2).toUpperCase();
 	}
 </script>
 
 <div class="find-card">
-	<div class="find-card-media">
+	<!-- Post Header -->
+	<div class="post-header">
+		<div class="user-info">
+			<Avatar class="avatar">
+				<AvatarFallback class="avatar-fallback">
+					{getUserInitials(user.username)}
+				</AvatarFallback>
+			</Avatar>
+			<div class="user-details">
+				<div class="username">@{user.username}</div>
+				{#if locationName}
+					<div class="location">
+						<svg width="12" height="12" viewBox="0 0 24 24" fill="none">
+							<path
+								d="M21 10C21 17 12 23 12 23S3 17 3 10A9 9 0 0 1 12 1A9 9 0 0 1 21 10Z"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+							<circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2" />
+						</svg>
+						<span>{locationName}</span>
+					</div>
+				{/if}
+			</div>
+		</div>
+		<Button variant="ghost" size="sm" class="more-button">
+			<MoreHorizontal size={16} />
+		</Button>
+	</div>
+
+	<!-- Post Content -->
+	<div class="post-content">
+		<div class="content-header">
+			<h3 class="post-title">{title}</h3>
+			{#if category}
+				<Badge variant="secondary" class="category-badge">
+					{category}
+				</Badge>
+			{/if}
+		</div>
+
+		{#if description}
+			<p class="post-description">{description}</p>
+		{/if}
+	</div>
+
+	<!-- Media -->
+	<div class="post-media">
 		{#if media && media.length > 0}
 			{#if media[0].type === 'photo'}
 				<img
@@ -62,13 +112,13 @@
 					poster={media[0].thumbnailUrl}
 					muted={true}
 					autoplay={false}
-					controls={false}
+					controls={true}
 					class="media-video"
 				/>
 			{/if}
 		{:else}
 			<div class="no-media">
-				<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+				<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
 					<path
 						d="M21 10C21 17 12 23 12 23S3 17 3 10A9 9 0 0 1 12 1A9 9 0 0 1 21 10Z"
 						stroke="currentColor"
@@ -82,81 +132,134 @@
 		{/if}
 	</div>
 
-	<div class="find-card-content">
-		<div class="find-card-header">
-			<h3 class="find-card-title">{title}</h3>
-			{#if category}
-				<Badge variant="secondary" class="category-badge">
-					{category}
-				</Badge>
-			{/if}
+	<!-- Post Actions -->
+	<div class="post-actions">
+		<div class="action-buttons">
+			<LikeButton findId={id} {isLiked} {likeCount} size="sm" />
+			<Button variant="ghost" size="sm" class="action-button">
+				<MessageCircle size={16} />
+				<span>comment</span>
+			</Button>
+			<Button variant="ghost" size="sm" class="action-button">
+				<Share size={16} />
+				<span>share</span>
+			</Button>
 		</div>
-
-		{#if description}
-			<p class="find-card-description">
-				{truncateText(description)}
-			</p>
-		{/if}
-
-		<div class="find-card-meta">
-			<div class="location-info">
-				{#if locationName}
-					<div class="location">
-						<svg width="12" height="12" viewBox="0 0 24 24" fill="none">
-							<path
-								d="M21 10C21 17 12 23 12 23S3 17 3 10A9 9 0 0 1 12 1A9 9 0 0 1 21 10Z"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-							<circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2" />
-						</svg>
-						<span class="location-text">{locationName}</span>
-					</div>
-				{/if}
-				<div class="author">
-					<svg width="12" height="12" viewBox="0 0 24 24" fill="none">
-						<path
-							d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-						<circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" />
-					</svg>
-					<span class="author-text">@{user.username}</span>
-				</div>
-			</div>
-			<div class="like-container">
-				<LikeButton findId={id} {isLiked} {likeCount} size="sm" />
-			</div>
-		</div>
-	</div>
-
-	<div class="find-card-actions">
-		<Button variant="default" size="sm" onclick={handleExplore} class="explore-button">
-			explore this find
+		<Button variant="outline" size="sm" onclick={handleExplore} class="explore-button">
+			explore
 		</Button>
 	</div>
 </div>
 
 <style>
 	.find-card {
-		display: flex;
 		background: white;
-		align-items: flex-start;
-		padding-top: 1rem;
-		border-top: 1px solid #e5e7eb;
+		border: 1px solid hsl(var(--border));
+		border-radius: 12px;
+		overflow: hidden;
+		margin-bottom: 1rem;
+		transition: box-shadow 0.2s ease;
 	}
 
-	.find-card-media {
+	.find-card:hover {
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	}
+
+	/* Post Header */
+	.post-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1rem 1rem 0.75rem 1rem;
+	}
+
+	.user-info {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+	}
+
+	:global(.avatar) {
+		width: 40px;
+		height: 40px;
+	}
+
+	:global(.avatar-fallback) {
+		background: hsl(var(--primary));
+		color: white;
+		font-size: 0.875rem;
+		font-weight: 600;
+	}
+
+	.user-details {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+	}
+
+	.username {
+		font-weight: 600;
+		font-size: 0.875rem;
+		color: hsl(var(--foreground));
+	}
+
+	.location {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		font-size: 0.75rem;
+		color: hsl(var(--muted-foreground));
+	}
+
+	:global(.more-button) {
+		color: hsl(var(--muted-foreground));
+	}
+
+	/* Post Content */
+	.post-content {
+		padding: 0 1rem 0.75rem 1rem;
+	}
+
+	.content-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.5rem;
+		margin-bottom: 0.5rem;
+		flex-wrap: wrap;
+	}
+
+	.post-title {
+		font-family: 'Washington', serif;
+		font-size: 1.125rem;
+		font-weight: 600;
+		line-height: 1.4;
+		color: hsl(var(--foreground));
+		margin: 0;
+		flex: 1;
+	}
+
+	:global(.category-badge) {
+		font-size: 0.75rem;
+		height: 1.5rem;
 		flex-shrink: 0;
-		width: 120px;
-		height: 80px;
-		border-radius: 8px;
+	}
+
+	.post-description {
+		font-size: 0.875rem;
+		line-height: 1.5;
+		color: hsl(var(--muted-foreground));
+		margin: 0;
+	}
+
+	/* Media */
+	.post-media {
+		width: 100%;
+		aspect-ratio: 16/10;
 		overflow: hidden;
+		background: hsl(var(--muted));
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	.media-image {
@@ -176,106 +279,54 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: hsl(var(--muted));
-	}
-
-	.find-card-content {
-		flex: 1;
-		min-width: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-	}
-
-	.find-card-header {
-		display: flex;
-		align-items: flex-start;
-		gap: 0.75rem;
-		flex-wrap: wrap;
-	}
-
-	.find-card-title {
-		font-family: 'Washington', serif;
-		font-size: 1.125rem;
-		font-weight: 600;
-		line-height: 1.4;
-		color: hsl(var(--foreground));
-		margin: 0;
-	}
-
-	:global(.category-badge) {
-		font-size: 0.75rem;
-		height: 1.5rem;
-	}
-
-	.find-card-description {
-		font-size: 0.875rem;
-		line-height: 1.5;
 		color: hsl(var(--muted-foreground));
-		margin: 0;
+		opacity: 0.5;
 	}
 
-	.find-card-meta {
+	/* Post Actions */
+	.post-actions {
 		display: flex;
+		align-items: center;
 		justify-content: space-between;
-		align-items: center;
+		padding: 0.75rem 1rem 1rem 1rem;
+		border-top: 1px solid hsl(var(--border));
 	}
 
-	.like-container {
-		flex-shrink: 0;
-	}
-
-	.location-info {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-	}
-
-	.location,
-	.author {
+	.action-buttons {
 		display: flex;
 		align-items: center;
+		gap: 0.5rem;
+	}
+
+	:global(.action-button) {
 		gap: 0.375rem;
-		font-size: 0.75rem;
 		color: hsl(var(--muted-foreground));
+		font-size: 0.875rem;
 	}
 
-	.location-text,
-	.author-text {
-		font-weight: 500;
-	}
-
-	.find-card-actions {
-		flex-shrink: 0;
-		display: flex;
-		align-items: center;
+	:global(.action-button:hover) {
+		color: hsl(var(--foreground));
 	}
 
 	:global(.explore-button) {
-		white-space: nowrap;
 		font-weight: 500;
+		font-size: 0.875rem;
 	}
 
 	/* Mobile responsive */
 	@media (max-width: 768px) {
-		.find-card {
+		.post-actions {
 			flex-direction: column;
 			gap: 0.75rem;
+			align-items: stretch;
 		}
 
-		.find-card-media {
+		.action-buttons {
+			justify-content: space-around;
+		}
+
+		:global(.explore-button) {
 			width: 100%;
-			height: 120px;
-		}
-
-		.find-card-header {
-			flex-direction: column;
-			gap: 0.5rem;
-			align-items: flex-start;
-		}
-
-		.find-card-actions {
-			align-self: stretch;
 		}
 	}
 </style>
diff --git a/src/lib/components/FindsList.svelte b/src/lib/components/FindsList.svelte
index 49703fc..ff3c838 100644
--- a/src/lib/components/FindsList.svelte
+++ b/src/lib/components/FindsList.svelte
@@ -40,17 +40,13 @@
 	}
 </script>
 
-<section class="finds-list-section">
-	<div class="finds-header">
-		<h2 class="finds-title">{title}</h2>
-		<div class="finds-count">
-			{finds.length}
-			{finds.length === 1 ? 'find' : 'finds'}
-		</div>
+<section class="finds-feed">
+	<div class="feed-header">
+		<h2 class="feed-title">{title}</h2>
 	</div>
 
 	{#if finds.length > 0}
-		<div class="finds-grid">
+		<div class="feed-container">
 			{#each finds as find (find.id)}
 				<FindCard
 					id={find.id}
@@ -70,8 +66,8 @@
 		<div class="empty-state">
 			<div class="empty-icon">
 				<svg
-					width="48"
-					height="48"
+					width="64"
+					height="64"
 					viewBox="0 0 24 24"
 					fill="none"
 					stroke="currentColor"
@@ -81,25 +77,34 @@
 					<circle cx="12" cy="10" r="3" />
 				</svg>
 			</div>
-			<h3 class="empty-title">No finds yet</h3>
+			<h3 class="empty-title">No finds discovered yet</h3>
 			<p class="empty-message">{emptyMessage}</p>
+			<div class="empty-action">
+				<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+					<path
+						d="M12 5v14M5 12h14"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+					/>
+				</svg>
+				<span>Start exploring to discover finds</span>
+			</div>
 		</div>
 	{/if}
 </section>
 
 <style>
-	.finds-list-section {
+	.finds-feed {
 		width: 100%;
 	}
 
-	.finds-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
+	.feed-header {
 		margin-bottom: 1.5rem;
+		padding: 0 0.5rem;
 	}
 
-	.finds-title {
+	.feed-title {
 		font-family: 'Washington', serif;
 		font-size: 1.875rem;
 		font-weight: 700;
@@ -107,16 +112,10 @@
 		color: hsl(var(--foreground));
 	}
 
-	.finds-count {
-		font-size: 0.875rem;
-		color: hsl(var(--muted-foreground));
-		font-weight: 500;
-	}
-
-	.finds-grid {
+	.feed-container {
 		display: flex;
 		flex-direction: column;
-		gap: 1rem;
+		gap: 0;
 	}
 
 	.empty-state {
@@ -124,44 +123,79 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		padding: 3rem 1rem;
+		padding: 4rem 2rem;
 		text-align: center;
+		background: hsl(var(--card));
+		border-radius: 12px;
+		border: 1px solid hsl(var(--border));
 	}
 
 	.empty-icon {
-		margin-bottom: 1rem;
+		margin-bottom: 1.5rem;
 		color: hsl(var(--muted-foreground));
-		opacity: 0.5;
+		opacity: 0.4;
 	}
 
 	.empty-title {
-		font-size: 1.125rem;
+		font-size: 1.25rem;
 		font-weight: 600;
-		margin: 0 0 0.5rem 0;
+		margin: 0 0 0.75rem 0;
 		color: hsl(var(--foreground));
 	}
 
 	.empty-message {
 		font-size: 0.875rem;
 		color: hsl(var(--muted-foreground));
-		margin: 0;
+		margin: 0 0 1.5rem 0;
+		line-height: 1.5;
+	}
+
+	.empty-action {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		color: hsl(var(--primary));
+		font-size: 0.875rem;
+		font-weight: 500;
 	}
 
 	/* Mobile responsive */
 	@media (max-width: 768px) {
-		.finds-header {
+		.feed-header {
 			flex-direction: column;
 			align-items: flex-start;
-			gap: 0.5rem;
+			gap: 0.75rem;
 			margin-bottom: 1rem;
+			padding: 0;
 		}
 
-		.finds-title {
+		.feed-title {
 			font-size: 1.5rem;
 		}
 
 		.empty-state {
-			padding: 2rem 1rem;
+			padding: 3rem 1.5rem;
+		}
+	}
+
+	/* Smooth scrolling for feed */
+	.feed-container {
+		scroll-behavior: smooth;
+	}
+
+	/* Add subtle animation for new posts */
+	:global(.find-card) {
+		animation: fadeInUp 0.4s ease-out;
+	}
+
+	@keyframes fadeInUp {
+		from {
+			opacity: 0;
+			transform: translateY(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
 		}
 	}
 </style>
diff --git a/src/lib/components/LikeButton.svelte b/src/lib/components/LikeButton.svelte
index 1a56911..8975d20 100644
--- a/src/lib/components/LikeButton.svelte
+++ b/src/lib/components/LikeButton.svelte
@@ -19,24 +19,29 @@
 		class: className = ''
 	}: Props = $props();
 
+	// Track the source of truth - server state
+	let serverIsLiked = $state(isLiked);
+	let serverLikeCount = $state(likeCount);
+
+	// Track optimistic state during loading
 	let isLoading = $state(false);
-	let currentIsLiked = $state(isLiked);
-	let currentLikeCount = $state(likeCount);
+	let optimisticIsLiked = $state(isLiked);
+	let optimisticLikeCount = $state(likeCount);
+
+	// Derived state for display
+	let displayIsLiked = $derived(isLoading ? optimisticIsLiked : serverIsLiked);
+	let displayLikeCount = $derived(isLoading ? optimisticLikeCount : serverLikeCount);
 
 	async function toggleLike() {
 		if (isLoading) return;
 
-		const previousLiked = currentIsLiked;
-		const previousCount = currentLikeCount;
-
-		// Optimistic update
-		currentIsLiked = !currentIsLiked;
-		currentLikeCount += currentIsLiked ? 1 : -1;
-
+		// Set optimistic state
+		optimisticIsLiked = !serverIsLiked;
+		optimisticLikeCount = serverLikeCount + (optimisticIsLiked ? 1 : -1);
 		isLoading = true;
 
 		try {
-			const method = currentIsLiked ? 'POST' : 'DELETE';
+			const method = optimisticIsLiked ? 'POST' : 'DELETE';
 			const response = await fetch(`/api/finds/${findId}/like`, {
 				method,
 				headers: {
@@ -45,16 +50,16 @@
 			});
 
 			if (!response.ok) {
-				const error = (await response.json()) as { message?: string };
-				throw new Error(error.message || 'Failed to update like');
+				const errorData = await response.json().catch(() => ({}));
+				throw new Error(errorData.message || `HTTP ${response.status}`);
 			}
 
-			// Success - optimistic update was correct
-		} catch (error: unknown) {
-			// Revert optimistic update on error
-			currentIsLiked = previousLiked;
-			currentLikeCount = previousCount;
+			const result = await response.json();
 
+			// Update server state with response
+			serverIsLiked = result.isLiked;
+			serverLikeCount = result.likeCount;
+		} catch (error: unknown) {
 			console.error('Error updating like:', error);
 			toast.error('Failed to update like. Please try again.');
 		} finally {
@@ -62,10 +67,10 @@
 		}
 	}
 
-	// Update internal state when props change
+	// Update server state when props change (from parent component)
 	$effect(() => {
-		currentIsLiked = isLiked;
-		currentLikeCount = likeCount;
+		serverIsLiked = isLiked;
+		serverLikeCount = likeCount;
 	});
 </script>
 
@@ -77,19 +82,19 @@
 	disabled={isLoading}
 >
 	<Heart
-		class="h-4 w-4 transition-all duration-200 {currentIsLiked
+		class="h-4 w-4 transition-all duration-200 {displayIsLiked
 			? 'scale-110 fill-red-500 text-red-500'
 			: 'text-gray-500 group-hover:scale-105 group-hover:text-red-400'} {isLoading
 			? 'animate-pulse'
 			: ''}"
 	/>
-	{#if currentLikeCount > 0}
+	{#if displayLikeCount > 0}
 		<span
-			class="text-sm font-medium transition-colors {currentIsLiked
+			class="text-sm font-medium transition-colors {displayIsLiked
 				? 'text-red-500'
 				: 'text-gray-500 group-hover:text-red-400'}"
 		>
-			{currentLikeCount}
+			{displayLikeCount}
 		</span>
 	{/if}
 </Button>
diff --git a/src/routes/api/finds/[findId]/like/+server.ts b/src/routes/api/finds/[findId]/like/+server.ts
index 93c2262..e557834 100644
--- a/src/routes/api/finds/[findId]/like/+server.ts
+++ b/src/routes/api/finds/[findId]/like/+server.ts
@@ -1,7 +1,7 @@
 import { json, error } from '@sveltejs/kit';
 import { db } from '$lib/server/db';
 import { findLike, find } from '$lib/server/db/schema';
-import { eq, and } from 'drizzle-orm';
+import { eq, and, count } from 'drizzle-orm';
 import { encodeBase64url } from '@oslojs/encoding';
 
 function generateLikeId(): string {
@@ -51,7 +51,20 @@ export async function POST({
 		userId: locals.user.id
 	});
 
-	return json({ success: true, likeId });
+	// Get updated like count
+	const likeCountResult = await db
+		.select({ count: count() })
+		.from(findLike)
+		.where(eq(findLike.findId, findId));
+
+	const likeCount = likeCountResult[0]?.count ?? 0;
+
+	return json({
+		success: true,
+		likeId,
+		isLiked: true,
+		likeCount
+	});
 }
 
 export async function DELETE({
@@ -76,5 +89,17 @@ export async function DELETE({
 		.delete(findLike)
 		.where(and(eq(findLike.findId, findId), eq(findLike.userId, locals.user.id)));
 
-	return json({ success: true });
+	// Get updated like count
+	const likeCountResult = await db
+		.select({ count: count() })
+		.from(findLike)
+		.where(eq(findLike.findId, findId));
+
+	const likeCount = likeCountResult[0]?.count ?? 0;
+
+	return json({
+		success: true,
+		isLiked: false,
+		likeCount
+	});
 }
diff --git a/src/routes/finds/+page.server.ts b/src/routes/finds/+page.server.ts
deleted file mode 100644
index 2dc7398..0000000
--- a/src/routes/finds/+page.server.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import { error } from '@sveltejs/kit';
-import type { PageServerLoad } from './$types';
-import { db } from '$lib/server/db';
-import { find, findMedia, user } from '$lib/server/db/schema';
-import { eq, and, sql, desc } from 'drizzle-orm';
-import { getSignedR2Url } from '$lib/server/r2';
-
-export const load: PageServerLoad = async ({ locals, url }) => {
-	if (!locals.user) {
-		throw error(401, 'Authentication required');
-	}
-
-	// Get query parameters for location-based filtering
-	const lat = url.searchParams.get('lat');
-	const lng = url.searchParams.get('lng');
-	const radius = url.searchParams.get('radius') || '50'; // Default 50km radius
-
-	try {
-		// Build where conditions
-		const baseCondition = sql`(${find.isPublic} = 1 OR ${find.userId} = ${locals.user.id})`;
-		let whereConditions = baseCondition;
-
-		// Add location filtering if coordinates provided
-		if (lat && lng) {
-			const radiusKm = parseFloat(radius);
-			// Simple bounding box query for MVP (can upgrade to proper distance calculation later)
-			const latOffset = radiusKm / 111; // Approximate degrees per km for latitude
-			const lngOffset = radiusKm / (111 * Math.cos((parseFloat(lat) * Math.PI) / 180));
-
-			const locationConditions = and(
-				baseCondition,
-				sql`${find.latitude} BETWEEN ${parseFloat(lat) - latOffset} AND ${
-					parseFloat(lat) + latOffset
-				}`,
-				sql`${find.longitude} BETWEEN ${parseFloat(lng) - lngOffset} AND ${
-					parseFloat(lng) + lngOffset
-				}`
-			);
-
-			if (locationConditions) {
-				whereConditions = locationConditions;
-			}
-		}
-
-		// Get all finds with filtering
-		const finds = await db
-			.select({
-				id: find.id,
-				title: find.title,
-				description: find.description,
-				latitude: find.latitude,
-				longitude: find.longitude,
-				locationName: find.locationName,
-				category: find.category,
-				isPublic: find.isPublic,
-				createdAt: find.createdAt,
-				userId: find.userId,
-				username: user.username
-			})
-			.from(find)
-			.innerJoin(user, eq(find.userId, user.id))
-			.where(whereConditions)
-			.orderBy(desc(find.createdAt))
-			.limit(100);
-
-		// Get media for all finds
-		const findIds = finds.map((f) => f.id);
-		let media: Array<{
-			id: string;
-			findId: string;
-			type: string;
-			url: string;
-			thumbnailUrl: string | null;
-			orderIndex: number | null;
-		}> = [];
-
-		if (findIds.length > 0) {
-			media = await db
-				.select({
-					id: findMedia.id,
-					findId: findMedia.findId,
-					type: findMedia.type,
-					url: findMedia.url,
-					thumbnailUrl: findMedia.thumbnailUrl,
-					orderIndex: findMedia.orderIndex
-				})
-				.from(findMedia)
-				.where(
-					sql`${findMedia.findId} IN (${sql.join(
-						findIds.map((id) => sql`${id}`),
-						sql`, `
-					)})`
-				)
-				.orderBy(findMedia.orderIndex);
-		}
-
-		// Group media by find
-		const mediaByFind = media.reduce(
-			(acc, item) => {
-				if (!acc[item.findId]) {
-					acc[item.findId] = [];
-				}
-				acc[item.findId].push(item);
-				return acc;
-			},
-			{} as Record<string, typeof media>
-		);
-
-		// Combine finds with their media and generate signed URLs
-		const findsWithMedia = await Promise.all(
-			finds.map(async (findItem) => {
-				const findMedia = mediaByFind[findItem.id] || [];
-
-				// Generate signed URLs for all media items
-				const mediaWithSignedUrls = await Promise.all(
-					findMedia.map(async (mediaItem) => {
-						// Extract path from URL if it's still a full URL, otherwise use as-is
-						const path = mediaItem.url.startsWith('https://')
-							? mediaItem.url.split('/').slice(3).join('/')
-							: mediaItem.url;
-
-						const thumbnailPath = mediaItem.thumbnailUrl?.startsWith('https://')
-							? mediaItem.thumbnailUrl.split('/').slice(3).join('/')
-							: mediaItem.thumbnailUrl;
-
-						const [signedUrl, signedThumbnailUrl] = await Promise.all([
-							getSignedR2Url(path, 24 * 60 * 60), // 24 hours
-							thumbnailPath ? getSignedR2Url(thumbnailPath, 24 * 60 * 60) : Promise.resolve(null)
-						]);
-
-						return {
-							...mediaItem,
-							url: signedUrl,
-							thumbnailUrl: signedThumbnailUrl
-						};
-					})
-				);
-
-				return {
-					...findItem,
-					media: mediaWithSignedUrls
-				};
-			})
-		);
-
-		return {
-			finds: findsWithMedia
-		};
-	} catch (err) {
-		console.error('Error loading finds:', err);
-		return {
-			finds: []
-		};
-	}
-};
diff --git a/src/routes/finds/+page.svelte b/src/routes/finds/+page.svelte
deleted file mode 100644
index 05f206f..0000000
--- a/src/routes/finds/+page.svelte
+++ /dev/null
@@ -1,518 +0,0 @@
-<script lang="ts">
-	import Map from '$lib/components/Map.svelte';
-	import CreateFindModal from '$lib/components/CreateFindModal.svelte';
-	import FindPreview from '$lib/components/FindPreview.svelte';
-	import type { PageData } from './$types';
-	import { coordinates } from '$lib/stores/location';
-
-	// Server response type
-	interface ServerFind {
-		id: string;
-		title: string;
-		description?: string;
-		latitude: string;
-		longitude: string;
-		locationName?: string;
-		category?: string;
-		isPublic: number;
-		createdAt: Date;
-		userId: string;
-		username: string;
-		media: Array<{
-			id: string;
-			findId: string;
-			type: string;
-			url: string;
-			thumbnailUrl: string | null;
-			orderIndex: number | null;
-		}>;
-	}
-
-	// Map component type
-	interface MapFind {
-		id: string;
-		title: string;
-		description?: string;
-		latitude: string;
-		longitude: string;
-		locationName?: string;
-		category?: string;
-		isPublic: number;
-		createdAt: Date;
-		userId: string;
-		user: {
-			id: string;
-			username: string;
-		};
-		media?: Array<{
-			type: string;
-			url: string;
-			thumbnailUrl: string;
-		}>;
-	}
-
-	// Interface for FindPreview component
-	interface FindPreviewData {
-		id: string;
-		title: string;
-		description?: string;
-		latitude: string;
-		longitude: string;
-		locationName?: string;
-		category?: string;
-		createdAt: string;
-		user: {
-			id: string;
-			username: string;
-		};
-		media?: Array<{
-			type: string;
-			url: string;
-			thumbnailUrl: string;
-		}>;
-	}
-
-	let { data }: { data: PageData } = $props();
-
-	let showCreateModal = $state(false);
-	let selectedFind: FindPreviewData | null = $state(null);
-	let viewMode = $state<'map' | 'list'>('map');
-
-	// Reactive finds list - convert server format to component format
-	let finds = $derived(
-		(data.finds as ServerFind[]).map((serverFind) => ({
-			...serverFind,
-			user: {
-				id: serverFind.userId,
-				username: serverFind.username
-			},
-			media: serverFind.media?.map((m) => ({
-				type: m.type,
-				url: m.url,
-				thumbnailUrl: m.thumbnailUrl || m.url
-			}))
-		})) as MapFind[]
-	);
-
-	function handleFindCreated(event: CustomEvent) {
-		// For now, just close modal and refresh page as in original implementation
-		showCreateModal = false;
-		if (event.detail?.reload) {
-			window.location.reload();
-		}
-	}
-
-	function handleFindClick(find: MapFind) {
-		// Convert MapFind to FindPreviewData format
-		selectedFind = {
-			id: find.id,
-			title: find.title,
-			description: find.description,
-			latitude: find.latitude,
-			longitude: find.longitude,
-			locationName: find.locationName,
-			category: find.category,
-			createdAt: find.createdAt.toISOString(),
-			user: find.user,
-			media: find.media?.map((m) => ({
-				type: m.type,
-				url: m.url,
-				thumbnailUrl: m.thumbnailUrl || m.url
-			}))
-		};
-	}
-
-	function closeFindPreview() {
-		selectedFind = null;
-	}
-
-	function openCreateModal() {
-		showCreateModal = true;
-	}
-
-	function closeCreateModal() {
-		showCreateModal = false;
-	}
-</script>
-
-<svelte:head>
-	<title>Finds - Serengo</title>
-	<meta
-		name="description"
-		content="Discover and share memorable places with the Serengo community"
-	/>
-</svelte:head>
-
-<div class="finds-page">
-	<div class="finds-header">
-		<h1 class="finds-title">Finds</h1>
-		<div class="finds-actions">
-			<div class="view-toggle">
-				<button
-					class="view-button"
-					class:active={viewMode === 'map'}
-					onclick={() => (viewMode = 'map')}
-				>
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-						<path
-							d="M21 10C21 17 12 23 12 23S3 17 3 10A9 9 0 0 1 12 1A9 9 0 0 1 21 10Z"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-						<circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2" />
-					</svg>
-					Map
-				</button>
-				<button
-					class="view-button"
-					class:active={viewMode === 'list'}
-					onclick={() => (viewMode = 'list')}
-				>
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-						<line x1="8" y1="6" x2="21" y2="6" stroke="currentColor" stroke-width="2" />
-						<line x1="8" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="2" />
-						<line x1="8" y1="18" x2="21" y2="18" stroke="currentColor" stroke-width="2" />
-						<line x1="3" y1="6" x2="3.01" y2="6" stroke="currentColor" stroke-width="2" />
-						<line x1="3" y1="12" x2="3.01" y2="12" stroke="currentColor" stroke-width="2" />
-						<line x1="3" y1="18" x2="3.01" y2="18" stroke="currentColor" stroke-width="2" />
-					</svg>
-					List
-				</button>
-			</div>
-			<button class="create-find-button" onclick={openCreateModal}>
-				<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
-					<line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2" />
-					<line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" />
-				</svg>
-				Create Find
-			</button>
-		</div>
-	</div>
-
-	<div class="finds-content">
-		{#if viewMode === 'map'}
-			<div class="map-container">
-				<Map
-					center={[$coordinates?.longitude || 0, $coordinates?.latitude || 51.505]}
-					{finds}
-					onFindClick={handleFindClick}
-				/>
-			</div>
-		{:else}
-			<div class="finds-list">
-				{#each finds as find (find.id)}
-					<!-- svelte-ignore a11y_click_events_have_key_events -->
-					<div class="find-card" role="button" tabindex="0" onclick={() => handleFindClick(find)}>
-						<div class="find-card-media">
-							{#if find.media && find.media.length > 0}
-								{#if find.media[0].type === 'photo'}
-									<img
-										src={find.media[0].thumbnailUrl || find.media[0].url}
-										alt={find.title}
-										loading="lazy"
-									/>
-								{:else}
-									<video src={find.media[0].url} poster={find.media[0].thumbnailUrl} muted>
-										<track kind="captions" />
-									</video>
-								{/if}
-							{:else}
-								<div class="no-media">
-									<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-										<path
-											d="M21 10C21 17 12 23 12 23S3 17 3 10A9 9 0 0 1 12 1A9 9 0 0 1 21 10Z"
-											stroke="currentColor"
-											stroke-width="2"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-										/>
-										<circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2" />
-									</svg>
-								</div>
-							{/if}
-						</div>
-						<div class="find-card-content">
-							<h3 class="find-card-title">{find.title}</h3>
-							<p class="find-card-location">{find.locationName || 'Unknown location'}</p>
-							<p class="find-card-author">by @{find.user.username}</p>
-						</div>
-					</div>
-				{/each}
-
-				{#if finds.length === 0}
-					<div class="empty-state">
-						<svg width="48" height="48" viewBox="0 0 24 24" fill="none">
-							<path
-								d="M21 10C21 17 12 23 12 23S3 17 3 10A9 9 0 0 1 12 1A9 9 0 0 1 21 10Z"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-							<circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2" />
-						</svg>
-						<h3>No finds nearby</h3>
-						<p>Be the first to create a find in this area!</p>
-					</div>
-				{/if}
-			</div>
-		{/if}
-	</div>
-
-	<!-- Floating action button for mobile -->
-	<button class="fab" onclick={openCreateModal} aria-label="Create new find">
-		<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-			<line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2" />
-			<line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" />
-		</svg>
-	</button>
-</div>
-
-<!-- Modals -->
-{#if showCreateModal}
-	<CreateFindModal
-		isOpen={showCreateModal}
-		onClose={closeCreateModal}
-		onFindCreated={handleFindCreated}
-	/>
-{/if}
-
-{#if selectedFind}
-	<FindPreview find={selectedFind} onClose={closeFindPreview} />
-{/if}
-
-<style>
-	.finds-page {
-		height: 100vh;
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-	}
-
-	.finds-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 1rem 2rem;
-		background: white;
-		border-bottom: 1px solid #eee;
-		flex-shrink: 0;
-	}
-
-	.finds-title {
-		font-family: 'Washington', serif;
-		font-size: 2rem;
-		font-weight: bold;
-		margin: 0;
-		color: #333;
-	}
-
-	.finds-actions {
-		display: flex;
-		gap: 1rem;
-		align-items: center;
-	}
-
-	.view-toggle {
-		display: flex;
-		background: #f5f5f5;
-		border-radius: 8px;
-		padding: 2px;
-	}
-
-	.view-button {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem 1rem;
-		border: none;
-		background: transparent;
-		border-radius: 6px;
-		cursor: pointer;
-		font-size: 0.875rem;
-		color: #666;
-		transition: all 0.2s;
-	}
-
-	.view-button.active {
-		background: white;
-		color: #333;
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-	}
-
-	.create-find-button {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.75rem 1.5rem;
-		background: #007bff;
-		color: white;
-		border: none;
-		border-radius: 8px;
-		cursor: pointer;
-		font-weight: 600;
-		transition: background-color 0.2s;
-	}
-
-	.create-find-button:hover {
-		background: #0056b3;
-	}
-
-	.finds-content {
-		flex: 1;
-		overflow: hidden;
-	}
-
-	.map-container {
-		height: 100%;
-		width: 100%;
-	}
-
-	.finds-list {
-		height: 100%;
-		overflow-y: auto;
-		padding: 1rem 2rem;
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-		gap: 1rem;
-	}
-
-	.find-card {
-		background: white;
-		border-radius: 12px;
-		overflow: hidden;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-		cursor: pointer;
-		transition:
-			transform 0.2s,
-			box-shadow 0.2s;
-	}
-
-	.find-card:hover {
-		transform: translateY(-2px);
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-	}
-
-	.find-card-media {
-		aspect-ratio: 16 / 9;
-		overflow: hidden;
-		background: #f8f9fa;
-	}
-
-	.find-card-media img,
-	.find-card-media video {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-
-	.no-media {
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: #666;
-	}
-
-	.find-card-content {
-		padding: 1rem;
-	}
-
-	.find-card-title {
-		font-family: 'Washington', serif;
-		font-size: 1.1rem;
-		font-weight: 600;
-		margin: 0 0 0.5rem 0;
-		color: #333;
-	}
-
-	.find-card-location {
-		color: #666;
-		font-size: 0.875rem;
-		margin: 0 0 0.25rem 0;
-	}
-
-	.find-card-author {
-		color: #999;
-		font-size: 0.75rem;
-		margin: 0;
-	}
-
-	.empty-state {
-		grid-column: 1 / -1;
-		text-align: center;
-		padding: 3rem;
-		color: #666;
-	}
-
-	.empty-state svg {
-		margin-bottom: 1rem;
-	}
-
-	.empty-state h3 {
-		margin: 0 0 0.5rem 0;
-		font-size: 1.25rem;
-	}
-
-	.empty-state p {
-		margin: 0;
-		opacity: 0.7;
-	}
-
-	.fab {
-		position: fixed;
-		bottom: 2rem;
-		right: 2rem;
-		width: 56px;
-		height: 56px;
-		background: #007bff;
-		color: white;
-		border: none;
-		border-radius: 50%;
-		box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
-		cursor: pointer;
-		display: none;
-		align-items: center;
-		justify-content: center;
-		transition: all 0.2s;
-		z-index: 100;
-	}
-
-	.fab:hover {
-		background: #0056b3;
-		transform: scale(1.1);
-	}
-
-	/* Mobile styles */
-	@media (max-width: 768px) {
-		.finds-header {
-			padding: 1rem;
-			flex-wrap: wrap;
-			gap: 1rem;
-		}
-
-		.finds-actions {
-			width: 100%;
-			justify-content: space-between;
-		}
-
-		.create-find-button {
-			display: none;
-		}
-
-		.fab {
-			display: flex;
-		}
-
-		.finds-list {
-			padding: 1rem;
-			grid-template-columns: 1fr;
-		}
-
-		.finds-title {
-			font-size: 1.5rem;
-		}
-	}
-</style>