From b95c7dad7baedbdd6c764aa5505c301e31004834 Mon Sep 17 00:00:00 2001
From: Zias van Nes <vanneszias@icloud.com>
Date: Mon, 13 Oct 2025 12:24:20 +0200
Subject: [PATCH] feat:finds on homepage

---
 src/lib/components/FindCard.svelte    | 251 ++++++++++++++++++++++++++
 src/lib/components/FindsList.svelte   | 163 +++++++++++++++++
 src/lib/components/badge/badge.svelte |  32 ++++
 src/lib/components/badge/index.ts     |   9 +
 src/lib/index.ts                      |   2 +
 src/routes/+page.server.ts            | 156 +++++++++++++++-
 src/routes/+page.svelte               | 250 ++++++++++++++++++++++++-
 7 files changed, 855 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/components/FindCard.svelte
 create mode 100644 src/lib/components/FindsList.svelte
 create mode 100644 src/lib/components/badge/badge.svelte
 create mode 100644 src/lib/components/badge/index.ts

diff --git a/src/lib/components/FindCard.svelte b/src/lib/components/FindCard.svelte
new file mode 100644
index 0000000..dad90e3
--- /dev/null
+++ b/src/lib/components/FindCard.svelte
@@ -0,0 +1,251 @@
+<script lang="ts">
+	import { Button } from '$lib/components/button';
+	import { Badge } from '$lib/components/badge';
+
+	interface FindCardProps {
+		id: string;
+		title: string;
+		description?: string;
+		category?: string;
+		locationName?: string;
+		user: {
+			username: string;
+		};
+		media?: Array<{
+			type: string;
+			url: string;
+			thumbnailUrl: string;
+		}>;
+		onExplore?: (id: string) => void;
+	}
+
+	let { id, title, description, category, locationName, user, media, onExplore }: FindCardProps =
+		$props();
+
+	function handleExplore() {
+		onExplore?.(id);
+	}
+
+	function truncateText(text: string, maxLength: number = 120): string {
+		if (text.length <= maxLength) return text;
+		return text.slice(0, maxLength).trim() + '...';
+	}
+</script>
+
+<div class="find-card">
+	<div class="find-card-media">
+		{#if media && media.length > 0}
+			{#if media[0].type === 'photo'}
+				<img
+					src={media[0].thumbnailUrl || media[0].url}
+					alt={title}
+					loading="lazy"
+					class="media-image"
+				/>
+			{:else}
+				<video src={media[0].url} poster={media[0].thumbnailUrl} muted class="media-video">
+					<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">
+		<div class="find-card-header">
+			<h3 class="find-card-title">{title}</h3>
+			{#if category}
+				<Badge variant="secondary" class="category-badge">
+					{category}
+				</Badge>
+			{/if}
+		</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>
+	</div>
+
+	<div class="find-card-actions">
+		<Button variant="default" size="sm" onclick={handleExplore} class="explore-button">
+			explore this find
+		</Button>
+	</div>
+</div>
+
+<style>
+	.find-card {
+		display: flex;
+		background: white;
+		align-items: flex-start;
+		padding-top: 1rem;
+		border-top: 1px solid #e5e7eb;
+	}
+
+	.find-card-media {
+		flex-shrink: 0;
+		width: 120px;
+		height: 80px;
+		border-radius: 8px;
+		overflow: hidden;
+	}
+
+	.media-image,
+	.media-video {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.no-media {
+		width: 100%;
+		height: 100%;
+		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;
+	}
+
+	.find-card-meta {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.location-info {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.location,
+	.author {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		font-size: 0.75rem;
+		color: hsl(var(--muted-foreground));
+	}
+
+	.location-text,
+	.author-text {
+		font-weight: 500;
+	}
+
+	.find-card-actions {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+	}
+
+	:global(.explore-button) {
+		white-space: nowrap;
+		font-weight: 500;
+	}
+
+	/* Mobile responsive */
+	@media (max-width: 768px) {
+		.find-card {
+			flex-direction: column;
+			gap: 0.75rem;
+		}
+
+		.find-card-media {
+			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
new file mode 100644
index 0000000..fdb3474
--- /dev/null
+++ b/src/lib/components/FindsList.svelte
@@ -0,0 +1,163 @@
+<script lang="ts">
+	import FindCard from './FindCard.svelte';
+
+	interface Find {
+		id: string;
+		title: string;
+		description?: string;
+		category?: string;
+		locationName?: string;
+		user: {
+			username: string;
+		};
+		media?: Array<{
+			type: string;
+			url: string;
+			thumbnailUrl: string;
+		}>;
+	}
+
+	interface FindsListProps {
+		finds: Find[];
+		onFindExplore?: (id: string) => void;
+		title?: string;
+		showEmpty?: boolean;
+		emptyMessage?: string;
+	}
+
+	let {
+		finds,
+		onFindExplore,
+		title = 'Finds',
+		showEmpty = true,
+		emptyMessage = 'No finds to display'
+	}: FindsListProps = $props();
+
+	function handleFindExplore(id: string) {
+		onFindExplore?.(id);
+	}
+</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>
+	</div>
+
+	{#if finds.length > 0}
+		<div class="finds-grid">
+			{#each finds as find (find.id)}
+				<FindCard
+					id={find.id}
+					title={find.title}
+					description={find.description}
+					category={find.category}
+					locationName={find.locationName}
+					user={find.user}
+					media={find.media}
+					onExplore={handleFindExplore}
+				/>
+			{/each}
+		</div>
+	{:else if showEmpty}
+		<div class="empty-state">
+			<div class="empty-icon">
+				<svg
+					width="48"
+					height="48"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.5"
+				>
+					<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+					<circle cx="12" cy="10" r="3" />
+				</svg>
+			</div>
+			<h3 class="empty-title">No finds yet</h3>
+			<p class="empty-message">{emptyMessage}</p>
+		</div>
+	{/if}
+</section>
+
+<style>
+	.finds-list-section {
+		width: 100%;
+	}
+
+	.finds-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 1.5rem;
+	}
+
+	.finds-title {
+		font-family: 'Washington', serif;
+		font-size: 1.875rem;
+		font-weight: 700;
+		margin: 0;
+		color: hsl(var(--foreground));
+	}
+
+	.finds-count {
+		font-size: 0.875rem;
+		color: hsl(var(--muted-foreground));
+		font-weight: 500;
+	}
+
+	.finds-grid {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 3rem 1rem;
+		text-align: center;
+	}
+
+	.empty-icon {
+		margin-bottom: 1rem;
+		color: hsl(var(--muted-foreground));
+		opacity: 0.5;
+	}
+
+	.empty-title {
+		font-size: 1.125rem;
+		font-weight: 600;
+		margin: 0 0 0.5rem 0;
+		color: hsl(var(--foreground));
+	}
+
+	.empty-message {
+		font-size: 0.875rem;
+		color: hsl(var(--muted-foreground));
+		margin: 0;
+	}
+
+	/* Mobile responsive */
+	@media (max-width: 768px) {
+		.finds-header {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 0.5rem;
+			margin-bottom: 1rem;
+		}
+
+		.finds-title {
+			font-size: 1.5rem;
+		}
+
+		.empty-state {
+			padding: 2rem 1rem;
+		}
+	}
+</style>
diff --git a/src/lib/components/badge/badge.svelte b/src/lib/components/badge/badge.svelte
new file mode 100644
index 0000000..4d7690c
--- /dev/null
+++ b/src/lib/components/badge/badge.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { Snippet } from 'svelte';
+
+	export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
+
+	interface Props {
+		variant?: BadgeVariant;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { variant = 'default', class: className, children }: Props = $props();
+
+	const badgeVariants = {
+		default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+		secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+		destructive:
+			'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+		outline: 'text-foreground'
+	};
+</script>
+
+<div
+	class={cn(
+		'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none',
+		badgeVariants[variant],
+		className
+	)}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/badge/index.ts b/src/lib/components/badge/index.ts
new file mode 100644
index 0000000..675181a
--- /dev/null
+++ b/src/lib/components/badge/index.ts
@@ -0,0 +1,9 @@
+import Root from './badge.svelte';
+
+export {
+	Root,
+	//
+	Root as Badge
+};
+
+export type { BadgeVariant } from './badge.svelte';
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 20e0355..653a926 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -7,6 +7,8 @@ export { default as Header } from './components/Header.svelte';
 export { default as Modal } from './components/Modal.svelte';
 export { default as Map } from './components/Map.svelte';
 export { default as LocationButton } from './components/LocationButton.svelte';
+export { default as FindCard } from './components/FindCard.svelte';
+export { default as FindsList } from './components/FindsList.svelte';
 
 // Skeleton Loading Components
 export { Skeleton, SkeletonVariants } from './components/skeleton';
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 2e65a49..ce5fd58 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -1,13 +1,155 @@
 import { redirect } 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 (event) => {
-	if (!event.locals.user) {
-		// if not logged in, redirect to login page
-		return redirect(302, '/login');
+export const load: PageServerLoad = async ({ locals, url }) => {
+	if (!locals.user) {
+	return redirect(302, '/login');
 	}
 
-	return {
-		user: event.locals.user
-	};
+	// 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/+page.svelte b/src/routes/+page.svelte
index 27a46c2..3c38125 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,149 @@
 <script lang="ts">
 	import { Map } from '$lib';
+	import FindsList from '$lib/components/FindsList.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';
+	import { Button } from '$lib/components/button';
+
+	// 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 & { finds?: ServerFind[] } } = $props();
+
+	let showCreateModal = $state(false);
+	let selectedFind: FindPreviewData | null = $state(null);
+
+	// Reactive finds list - convert server format to component format
+	let finds = $derived(
+		(data.finds || ([] as ServerFind[])).map((serverFind: ServerFind) => ({
+			...serverFind,
+			user: {
+				id: serverFind.userId,
+				username: serverFind.username
+			},
+			media: serverFind.media?.map(
+				(m: { type: string; url: string; thumbnailUrl: string | null }) => ({
+					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 handleFindExplore(id: string) {
+		// Find the specific find and show preview
+		const find = finds.find((f) => f.id === id);
+		if (find) {
+			handleFindClick(find);
+		}
+	}
+
+	function closeFindPreview() {
+		selectedFind = null;
+	}
+
+	function openCreateModal() {
+		showCreateModal = true;
+	}
+
+	function closeCreateModal() {
+		showCreateModal = false;
+	}
 </script>
 
 <svelte:head>
@@ -25,14 +169,55 @@
 <div class="home-container">
 	<main class="main-content">
 		<div class="map-section">
-			<Map showLocationButton={true} autoCenter={true} />
+			<Map
+				showLocationButton={true}
+				autoCenter={true}
+				center={[$coordinates?.longitude || 0, $coordinates?.latitude || 51.505]}
+				{finds}
+				onFindClick={handleFindClick}
+			/>
+		</div>
+
+		<div class="finds-section">
+			<div class="finds-header">
+				<FindsList {finds} onFindExplore={handleFindExplore} />
+				<Button onclick={openCreateModal} class="create-find-button">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" class="mr-2">
+						<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>
 	</main>
+
+	<!-- Floating action button for mobile -->
+	<button class="fab" onclick={openCreateModal} aria-label="Create new find">
+		<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>
+	</button>
 </div>
 
+<!-- Modals -->
+{#if showCreateModal}
+	<CreateFindModal
+		isOpen={showCreateModal}
+		onClose={closeCreateModal}
+		onFindCreated={handleFindCreated}
+	/>
+{/if}
+
+{#if selectedFind}
+	<FindPreview find={selectedFind} onClose={closeFindPreview} />
+{/if}
+
 <style>
 	.home-container {
 		background-color: #f8f8f8;
+		min-height: 100vh;
 	}
 
 	.main-content {
@@ -56,16 +241,79 @@
 		border-radius: 0;
 	}
 
+	.finds-section {
+		background: white;
+		border-radius: 12px;
+		padding: 24px;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		position: relative;
+	}
+
+	.finds-header {
+		position: relative;
+	}
+
+	:global(.create-find-button) {
+		position: absolute;
+		top: 0;
+		right: 0;
+		z-index: 10;
+	}
+
+	.fab {
+		position: fixed;
+		bottom: 2rem;
+		right: 2rem;
+		width: 56px;
+		height: 56px;
+		background: hsl(var(--primary));
+		color: hsl(var(--primary-foreground));
+		border: none;
+		border-radius: 50%;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		cursor: pointer;
+		display: none;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.2s;
+		z-index: 100;
+	}
+
+	.fab:hover {
+		transform: scale(1.1);
+		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+	}
+
 	@media (max-width: 768px) {
 		.main-content {
 			padding: 16px;
 			gap: 16px;
 		}
+
+		.finds-section {
+			padding: 16px;
+		}
+
+		:global(.create-find-button) {
+			display: none;
+		}
+
+		.fab {
+			display: flex;
+		}
+
+		.map-section :global(.map-container) {
+			height: 300px;
+		}
 	}
 
 	@media (max-width: 480px) {
 		.main-content {
 			padding: 12px;
 		}
+
+		.finds-section {
+			padding: 12px;
+		}
 	}
 </style>