fix:new child subscription

this fix makes sure that when the client initializes a new child that
needs to subscribe for updates, it first checks whether this item
already has a currrent state and uses this, so that a new child always
starts in sync with the global state.

.env.example

@@ -35,3 +35,6 @@ R2_ACCOUNT_ID=""
 R2_ACCESS_KEY_ID=""
 R2_SECRET_ACCESS_KEY=""
 R2_BUCKET_NAME=""
+
+# Google Maps API for Places search
+GOOGLE_MAPS_API_KEY="your_google_maps_api_key_here"

logs/logboek.md

@@ -2,6 +2,52 @@
 
 ## Oktober 2025
 
+### 21 Oktober 2025 (Maandag) - 4 uren
+
+**Werk uitgevoerd:**
+
+- **UI Refinement & Bug Fixes**
+- Create Find Modal UI refactoring met verbeterde layout
+- Finds list en header layout updates voor betere UX
+- Friends filtering logica fixes
+- Friends en users search functionaliteit verbeteringen
+- Modal interface optimalisaties
+
+**Commits:**
+
+- aa9ed77 - UI:Refactor create find modal UI and update finds list/header layout
+- e1c5846 - fix:friends filtering
+
+**Details:**
+
+- Verbeterde modal interface met consistente styling
+- Fixed filtering logica voor vriendensysteem
+- Enhanced search functionaliteit voor gebruikers en vrienden
+- UI/UX verbeteringen voor betere gebruikerservaring
+
+---
+
+### 20 Oktober 2025 (Zondag) - 2 uren
+
+**Werk uitgevoerd:**
+
+- **Search Logic Improvements**
+- Friends en users search logica geoptimaliseerd
+- Filtering verbeteringen voor vriendschapssysteem
+- Backend search algoritmes verfijnd
+
+**Commits:**
+
+- 634ce8a - fix:logic of friends and users search
+
+**Details:**
+
+- Verbeterde zoekalgoritmes voor gebruikers
+- Geoptimaliseerde filtering voor vriendensysteem
+- Backend logica verfijning voor betere performance
+
+---
+
 ### 16 Oktober 2025 (Woensdag) - 6 uren
 
 **Werk uitgevoerd:**
@@ -17,7 +63,14 @@
 - ProfilePanel uitgebreid met Friends navigatielink
 - Type-safe implementatie met volledige error handling
 
-**Commits:** Nog niet gecommit (staged changes)
+**Commits:**
+
+- f547ee5 - add:logs
+- a01d183 - feat:friends
+- fdbd495 - add:cache for r2 storage
+- e54c4fb - feat:profile pictures
+- bee03a5 - feat:use dynamic sheet for findpreview
+- aea3249 - fix:likes;UI:find card&list
 
 **Details:**
 
@@ -46,7 +99,9 @@
 - CSP headers bijgewerkt voor video support
 - Volledige UI integratie in FindCard en FindPreview componenten
 
-**Commits:** Nog niet gecommit (staged changes)
+**Commits:**
+
+- 067e228 - feat:video player, like button, and media fallbacks
 
 **Details:**
 
@@ -267,9 +322,9 @@
 
 ## Totaal Overzicht
 
-**Totale geschatte uren:** 61 uren
+**Totale geschatte uren:** 67 uren
-**Werkdagen:** 10 dagen
+**Werkdagen:** 12 dagen
-**Gemiddelde uren per dag:** 6.1 uur
+**Gemiddelde uren per dag:** 5.6 uur
 
 ### Project Milestones:
 
@@ -283,6 +338,8 @@
 8. **13 Okt**: API architectuur verbetering
 9. **14 Okt**: Modern media support en social interactions
 10. **16 Okt**: Friends & Privacy System implementatie
+11. **20 Okt**: Search logic improvements
+12. **21 Okt**: UI refinement en bug fixes
 
 ### Hoofdfunctionaliteiten geïmplementeerd:
 

src/lib/components/CreateFindModal.svelte

@@ -4,6 +4,8 @@
 	import { Label } from '$lib/components/label';
 	import { Button } from '$lib/components/button';
 	import { coordinates } from '$lib/stores/location';
+	import POISearch from './POISearch.svelte';
+	import type { PlaceResult } from '$lib/utils/places';
 
 	interface Props {
 		isOpen: boolean;
@@ -23,6 +25,7 @@
 	let selectedFiles = $state<FileList | null>(null);
 	let isSubmitting = $state(false);
 	let uploadedMedia = $state<Array<{ type: string; url: string; thumbnailUrl: string }>>([]);
+	let useManualLocation = $state(false);
 
 	const categories = [
 		{ value: 'cafe', label: 'Café' },
@@ -136,14 +139,31 @@
 		}
 	}
 
+	function handlePlaceSelected(place: PlaceResult) {
+		locationName = place.name;
+		latitude = place.latitude.toString();
+		longitude = place.longitude.toString();
+	}
+
+	function toggleLocationMode() {
+		useManualLocation = !useManualLocation;
+		if (!useManualLocation && $coordinates) {
+			latitude = $coordinates.latitude.toString();
+			longitude = $coordinates.longitude.toString();
+		}
+	}
+
 	function resetForm() {
 		title = '';
 		description = '';
 		locationName = '';
+		latitude = '';
+		longitude = '';
 		category = 'cafe';
 		isPublic = true;
 		selectedFiles = null;
 		uploadedMedia = [];
+		useManualLocation = false;
 
 		const fileInput = document.querySelector('#media-files') as HTMLInputElement;
 		if (fileInput) {
@@ -187,13 +207,31 @@
 						></textarea>
 					</div>
 
-					<div class="field">
+					<div class="location-section">
-						<Label for="location-name">Location name</Label>
+						<div class="location-header">
-						<Input
+							<Label>Location</Label>
-							name="location-name"
+							<button type="button" onclick={toggleLocationMode} class="toggle-button">
-							placeholder="Café Central, Brussels"
+								{useManualLocation ? 'Use Search' : 'Manual Entry'}
-							bind:value={locationName}
+							</button>
-						/>
+						</div>
+
+						{#if useManualLocation}
+							<div class="field">
+								<Label for="location-name">Location name</Label>
+								<Input
+									name="location-name"
+									placeholder="Café Central, Brussels"
+									bind:value={locationName}
+								/>
+							</div>
+						{:else}
+							<POISearch
+								onPlaceSelected={handlePlaceSelected}
+								placeholder="Search for cafés, restaurants, landmarks..."
+								label=""
+								showNearbyButton={true}
+							/>
+						{/if}
 					</div>
 
 					<div class="field-group">
@@ -267,16 +305,33 @@
 						{/if}
 					</div>
 
-					<div class="field-group">
+					{#if useManualLocation || (!latitude && !longitude)}
-						<div class="field">
+						<div class="field-group">
-							<Label for="latitude">Latitude</Label>
+							<div class="field">
-							<Input name="latitude" type="text" required bind:value={latitude} />
+								<Label for="latitude">Latitude</Label>
+								<Input name="latitude" type="text" required bind:value={latitude} />
+							</div>
+							<div class="field">
+								<Label for="longitude">Longitude</Label>
+								<Input name="longitude" type="text" required bind:value={longitude} />
+							</div>
 						</div>
-						<div class="field">
+					{:else if latitude && longitude}
-							<Label for="longitude">Longitude</Label>
+						<div class="coordinates-display">
-							<Input name="longitude" type="text" required bind:value={longitude} />
+							<Label>Selected coordinates</Label>
+							<div class="coordinates-info">
+								<span class="coordinate">Lat: {parseFloat(latitude).toFixed(6)}</span>
+								<span class="coordinate">Lng: {parseFloat(longitude).toFixed(6)}</span>
+								<button
+									type="button"
+									onclick={() => (useManualLocation = true)}
+									class="edit-coords-button"
+								>
+									Edit
+								</button>
+							</div>
 						</div>
-					</div>
+					{/if}
 				</div>
 
 				<div class="actions">
@@ -475,6 +530,73 @@
 		flex: 1;
 	}
 
+	.location-section {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.location-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.toggle-button {
+		font-size: 0.75rem;
+		padding: 0.25rem 0.5rem;
+		height: auto;
+		background: transparent;
+		border: 1px solid hsl(var(--border));
+		border-radius: 6px;
+		color: hsl(var(--foreground));
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	.toggle-button:hover {
+		background: hsl(var(--muted));
+	}
+
+	.coordinates-display {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.coordinates-info {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		padding: 0.75rem;
+		background: hsl(var(--muted) / 0.5);
+		border: 1px solid hsl(var(--border));
+		border-radius: 8px;
+		font-size: 0.875rem;
+	}
+
+	.coordinate {
+		color: hsl(var(--muted-foreground));
+		font-family: monospace;
+	}
+
+	.edit-coords-button {
+		margin-left: auto;
+		font-size: 0.75rem;
+		padding: 0.25rem 0.5rem;
+		height: auto;
+		background: transparent;
+		border: 1px solid hsl(var(--border));
+		border-radius: 6px;
+		color: hsl(var(--foreground));
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	.edit-coords-button:hover {
+		background: hsl(var(--muted));
+	}
+
 	@media (max-width: 640px) {
 		.form-content {
 			padding: 1rem;

src/lib/components/LikeButton.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { Button } from '$lib/components/button';
 	import { Heart } from '@lucide/svelte';
-	import { toast } from 'svelte-sonner';
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import { writable } from 'svelte/store';
 
 	interface Props {
 		findId: string;
@@ -19,59 +21,75 @@
 		class: className = ''
 	}: Props = $props();
 
-	// Track the source of truth - server state
+	// Local state stores for this like button - start with props but will be overridden by global state
-	let serverIsLiked = $state(isLiked);
+	const likeState = writable({
-	let serverLikeCount = $state(likeCount);
+		isLiked: isLiked,
+		likeCount: likeCount,
+		isLoading: false
+	});
 
-	// Track optimistic state during loading
+	let apiSync: any = null;
-	let isLoading = $state(false);
-	let optimisticIsLiked = $state(isLiked);
-	let optimisticLikeCount = $state(likeCount);
 
-	// Derived state for display
+	// Initialize API sync and subscribe to global state
-	let displayIsLiked = $derived(isLoading ? optimisticIsLiked : serverIsLiked);
+	onMount(async () => {
-	let displayLikeCount = $derived(isLoading ? optimisticLikeCount : serverLikeCount);
+		if (browser) {
+			try {
+				// Dynamically import the API sync
+				const module = await import('$lib/stores/api-sync');
+				apiSync = module.apiSync;
+
+				// Check if global state already exists for this find
+				const existingState = apiSync.getEntityState('find', findId);
+
+				if (existingState) {
+					// Use existing global state - it's more current than props
+					console.log(`Using existing global state for find ${findId}`, existingState);
+				} else {
+					// Initialize with minimal data only if no global state exists
+					console.log(`Initializing new minimal state for find ${findId}`);
+					apiSync.setEntityState('find', findId, {
+						id: findId,
+						isLikedByUser: isLiked,
+						likeCount: likeCount,
+						// Minimal data needed for like functionality
+						title: '',
+						latitude: '',
+						longitude: '',
+						isPublic: true,
+						createdAt: new Date(),
+						userId: '',
+						username: '',
+						isFromFriend: false
+					});
+				}
+
+				// Subscribe to global state for this find
+				const globalLikeState = apiSync.subscribeFindLikes(findId);
+				globalLikeState.subscribe((state: any) => {
+					likeState.set({
+						isLiked: state.isLiked,
+						likeCount: state.likeCount,
+						isLoading: state.isLoading
+					});
+				});
+			} catch (error) {
+				console.error('Failed to initialize API sync:', error);
+			}
+		}
+	});
 
 	async function toggleLike() {
-		if (isLoading) return;
+		if (!apiSync || !browser) return;
 
-		// Set optimistic state
+		const currentState = likeState;
-		optimisticIsLiked = !serverIsLiked;
+		if (currentState && (currentState as any).isLoading) return;
-		optimisticLikeCount = serverLikeCount + (optimisticIsLiked ? 1 : -1);
-		isLoading = true;
 
 		try {
-			const method = optimisticIsLiked ? 'POST' : 'DELETE';
+			await apiSync.toggleLike(findId);
-			const response = await fetch(`/api/finds/${findId}/like`, {
+		} catch (error) {
-				method,
+			console.error('Failed to toggle like:', error);
-				headers: {
-					'Content-Type': 'application/json'
-				}
-			});
-
-			if (!response.ok) {
-				const errorData = await response.json().catch(() => ({}));
-				throw new Error(errorData.message || `HTTP ${response.status}`);
-			}
-
-			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 {
-			isLoading = false;
 		}
 	}
-
-	// Update server state when props change (from parent component)
-	$effect(() => {
-		serverIsLiked = isLiked;
-		serverLikeCount = likeCount;
-	});
 </script>
 
 <Button
@@ -79,22 +97,22 @@
 	{size}
 	class="group gap-1.5 {className}"
 	onclick={toggleLike}
-	disabled={isLoading}
+	disabled={$likeState.isLoading}
 >
 	<Heart
-		class="h-4 w-4 transition-all duration-200 {displayIsLiked
+		class="h-4 w-4 transition-all duration-200 {$likeState.isLiked
 			? 'scale-110 fill-red-500 text-red-500'
-			: 'text-gray-500 group-hover:scale-105 group-hover:text-red-400'} {isLoading
+			: 'text-gray-500 group-hover:scale-105 group-hover:text-red-400'} {$likeState.isLoading
 			? 'animate-pulse'
 			: ''}"
 	/>
-	{#if displayLikeCount > 0}
+	{#if $likeState.likeCount > 0}
 		<span
-			class="text-sm font-medium transition-colors {displayIsLiked
+			class="text-sm font-medium transition-colors {$likeState.isLiked
 				? 'text-red-500'
 				: 'text-gray-500 group-hover:text-red-400'}"
 		>
-			{displayLikeCount}
+			{$likeState.likeCount}
 		</span>
 	{/if}
 </Button>

src/lib/components/LocationButton.svelte

@@ -4,7 +4,8 @@
 		locationActions,
 		locationStatus,
 		locationError,
-		isLocationLoading
+		isLocationLoading,
+		isWatching
 	} from '$lib/stores/location';
 	import { Skeleton } from './skeleton';
 
@@ -22,26 +23,45 @@
 		showLabel = true
 	}: Props = $props();
 
-	async function handleLocationClick() {
+	// Track if location watching is active from the derived store
-		const result = await locationActions.getCurrentLocation({
-			enableHighAccuracy: true,
-			timeout: 15000,
-			maximumAge: 300000
-		});
 
-		if (!result && $locationError) {
+	async function handleLocationClick() {
-			toast.error($locationError.message);
+		if ($isWatching) {
+			// Stop watching if currently active
+			locationActions.stopWatching();
+			toast.success('Location watching stopped');
+		} else {
+			// Try to get current location first, then start watching
+			const result = await locationActions.getCurrentLocation({
+				enableHighAccuracy: true,
+				timeout: 15000,
+				maximumAge: 300000
+			});
+
+			if (result) {
+				// Start watching for continuous updates
+				locationActions.startWatching({
+					enableHighAccuracy: true,
+					timeout: 15000,
+					maximumAge: 60000 // Update every minute
+				});
+				toast.success('Location watching started');
+			} else if ($locationError) {
+				toast.error($locationError.message);
+			}
 		}
 	}
 
 	const buttonText = $derived(() => {
 		if ($isLocationLoading) return 'Finding location...';
-		if ($locationStatus === 'success') return 'Update location';
+		if ($isWatching) return 'Stop watching location';
+		if ($locationStatus === 'success') return 'Watch location';
 		return 'Find my location';
 	});
 
 	const iconClass = $derived(() => {
 		if ($isLocationLoading) return 'loading';
+		if ($isWatching) return 'watching';
 		if ($locationStatus === 'success') return 'success';
 		if ($locationStatus === 'error') return 'error';
 		return 'default';
@@ -59,6 +79,22 @@
 			<div class="loading-skeleton">
 				<Skeleton class="h-5 w-5 rounded-full" />
 			</div>
+		{:else if $isWatching}
+			<svg viewBox="0 0 24 24" class="watching-icon">
+				<path
+					d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"
+				/>
+				<circle
+					cx="12"
+					cy="9"
+					r="15"
+					stroke="currentColor"
+					stroke-width="1"
+					fill="none"
+					opacity="0.3"
+					class="pulse-ring"
+				/>
+			</svg>
 		{:else if $locationStatus === 'success'}
 			<svg viewBox="0 0 24 24">
 				<path
@@ -201,6 +237,11 @@
 		fill: #10b981;
 	}
 
+	.icon.watching svg {
+		color: #f59e0b;
+		fill: #f59e0b;
+	}
+
 	.icon.error svg {
 		color: #ef4444;
 		fill: #ef4444;
@@ -219,6 +260,25 @@
 		}
 	}
 
+	.watching-icon .pulse-ring {
+		animation: pulse-ring 2s infinite;
+	}
+
+	@keyframes pulse-ring {
+		0% {
+			transform: scale(0.5);
+			opacity: 0.5;
+		}
+		50% {
+			transform: scale(1);
+			opacity: 0.3;
+		}
+		100% {
+			transform: scale(1.5);
+			opacity: 0;
+		}
+	}
+
 	.label {
 		white-space: nowrap;
 	}

src/lib/components/LocationManager.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import { locationActions, isWatching, coordinates } from '$lib/stores/location';
+
+	interface Props {
+		autoStart?: boolean;
+		enableHighAccuracy?: boolean;
+		timeout?: number;
+		maximumAge?: number;
+	}
+
+	let {
+		autoStart = true,
+		enableHighAccuracy = true,
+		timeout = 15000,
+		maximumAge = 60000
+	}: Props = $props();
+
+	// Location watching options
+	const watchOptions = {
+		enableHighAccuracy,
+		timeout,
+		maximumAge
+	};
+
+	onMount(() => {
+		if (!browser || !autoStart) return;
+
+		// Check if geolocation is supported
+		if (!navigator.geolocation) {
+			console.warn('Geolocation is not supported by this browser');
+			return;
+		}
+
+		// Check if we already have coordinates and aren't watching
+		if ($coordinates && !$isWatching) {
+			// Start watching immediately if we have previous coordinates
+			startLocationWatching();
+			return;
+		}
+
+		// If no coordinates, try to get current location first
+		if (!$coordinates) {
+			getCurrentLocationThenWatch();
+		}
+	});
+
+	async function getCurrentLocationThenWatch() {
+		try {
+			const result = await locationActions.getCurrentLocation(watchOptions);
+			if (result) {
+				// Successfully got location, now start watching
+				startLocationWatching();
+			}
+		} catch {
+			// If we can't get location due to permissions, don't auto-start watching
+			console.log('Could not get initial location, location watching not started automatically');
+		}
+	}
+
+	function startLocationWatching() {
+		if (!$isWatching) {
+			locationActions.startWatching(watchOptions);
+		}
+	}
+
+	// Cleanup function to stop watching when component is destroyed
+	function cleanup() {
+		if ($isWatching) {
+			locationActions.stopWatching();
+		}
+	}
+
+	// Stop watching when the component is destroyed
+	onMount(() => {
+		return cleanup;
+	});
+</script>
+
+<!-- This component doesn't render anything, it just manages location watching -->

src/lib/components/Map.svelte

@@ -6,7 +6,8 @@
 		getMapCenter,
 		getMapZoom,
 		shouldZoomToLocation,
-		locationActions
+		locationActions,
+		isWatching
 	} from '$lib/stores/location';
 	import LocationButton from './LocationButton.svelte';
 	import { Skeleton } from '$lib/components/skeleton';
@@ -139,11 +140,14 @@
 		>
 			{#if $coordinates}
 				<Marker lngLat={[$coordinates.longitude, $coordinates.latitude]}>
-					<div class="location-marker">
+					<div class="location-marker" class:watching={$isWatching}>
-						<div class="marker-pulse"></div>
+						<div class="marker-pulse" class:watching={$isWatching}></div>
-						<div class="marker-outer">
+						<div class="marker-outer" class:watching={$isWatching}>
-							<div class="marker-inner"></div>
+							<div class="marker-inner" class:watching={$isWatching}></div>
 						</div>
+						{#if $isWatching}
+							<div class="watching-ring"></div>
+						{/if}
 					</div>
 				</Marker>
 			{/if}
@@ -243,6 +247,13 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		transition: all 0.3s ease;
+	}
+
+	:global(.marker-outer.watching) {
+		background: rgba(245, 158, 11, 0.2);
+		border-color: #f59e0b;
+		box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1);
 	}
 
 	:global(.marker-inner) {
@@ -250,6 +261,12 @@
 		height: 8px;
 		background: #2563eb;
 		border-radius: 50%;
+		transition: all 0.3s ease;
+	}
+
+	:global(.marker-inner.watching) {
+		background: #f59e0b;
+		animation: pulse-glow 2s infinite;
 	}
 
 	:global(.marker-pulse) {
@@ -263,6 +280,22 @@
 		animation: pulse 2s infinite;
 	}
 
+	:global(.marker-pulse.watching) {
+		border-color: rgba(245, 158, 11, 0.6);
+		animation: pulse-watching 1.5s infinite;
+	}
+
+	:global(.watching-ring) {
+		position: absolute;
+		top: -8px;
+		left: -8px;
+		width: 36px;
+		height: 36px;
+		border: 2px solid rgba(245, 158, 11, 0.4);
+		border-radius: 50%;
+		animation: expand-ring 3s infinite;
+	}
+
 	@keyframes pulse {
 		0% {
 			transform: scale(1);
@@ -274,6 +307,48 @@
 		}
 	}
 
+	@keyframes pulse-watching {
+		0% {
+			transform: scale(1);
+			opacity: 0.8;
+		}
+		50% {
+			transform: scale(1.5);
+			opacity: 0.4;
+		}
+		100% {
+			transform: scale(2);
+			opacity: 0;
+		}
+	}
+
+	@keyframes pulse-glow {
+		0%,
+		100% {
+			opacity: 1;
+			transform: scale(1);
+		}
+		50% {
+			opacity: 0.7;
+			transform: scale(1.2);
+		}
+	}
+
+	@keyframes expand-ring {
+		0% {
+			transform: scale(1);
+			opacity: 0.6;
+		}
+		50% {
+			transform: scale(1.3);
+			opacity: 0.3;
+		}
+		100% {
+			transform: scale(1.6);
+			opacity: 0;
+		}
+	}
+
 	/* Find marker styles */
 	:global(.find-marker) {
 		width: 40px;

src/lib/components/POISearch.svelte

@@ -0,0 +1,403 @@
+<script lang="ts">
+	import { Input } from '$lib/components/input';
+	import { Label } from '$lib/components/label';
+	import { Button } from '$lib/components/button';
+	import { coordinates } from '$lib/stores/location';
+	import type { PlaceResult } from '$lib/utils/places';
+
+	interface Props {
+		onPlaceSelected: (place: PlaceResult) => void;
+		placeholder?: string;
+		label?: string;
+		showNearbyButton?: boolean;
+	}
+
+	let {
+		onPlaceSelected,
+		placeholder = 'Search for a place or address...',
+		label = 'Search location',
+		showNearbyButton = true
+	}: Props = $props();
+
+	let searchQuery = $state('');
+	let suggestions = $state<Array<{ placeId: string; description: string; types: string[] }>>([]);
+	let nearbyPlaces = $state<PlaceResult[]>([]);
+	let isLoading = $state(false);
+	let showSuggestions = $state(false);
+	let showNearby = $state(false);
+	let debounceTimeout: ReturnType<typeof setTimeout>;
+
+	async function searchPlaces(query: string) {
+		if (!query.trim()) {
+			suggestions = [];
+			showSuggestions = false;
+			return;
+		}
+
+		isLoading = true;
+		try {
+			const params = new URLSearchParams({
+				action: 'autocomplete',
+				query: query.trim()
+			});
+
+			if ($coordinates) {
+				params.set('lat', $coordinates.latitude.toString());
+				params.set('lng', $coordinates.longitude.toString());
+			}
+
+			const response = await fetch(`/api/places?${params}`);
+			if (response.ok) {
+				suggestions = await response.json();
+				showSuggestions = true;
+			}
+		} catch (error) {
+			console.error('Error searching places:', error);
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	async function selectPlace(placeId: string, description: string) {
+		isLoading = true;
+		try {
+			const params = new URLSearchParams({
+				action: 'details',
+				placeId
+			});
+
+			const response = await fetch(`/api/places?${params}`);
+			if (response.ok) {
+				const place: PlaceResult = await response.json();
+				onPlaceSelected(place);
+				searchQuery = description;
+				showSuggestions = false;
+			}
+		} catch (error) {
+			console.error('Error getting place details:', error);
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	async function findNearbyPlaces() {
+		if (!$coordinates) {
+			alert('Please enable location access first');
+			return;
+		}
+
+		isLoading = true;
+		showNearby = true;
+		try {
+			const params = new URLSearchParams({
+				action: 'nearby',
+				lat: $coordinates.latitude.toString(),
+				lng: $coordinates.longitude.toString(),
+				radius: '2000' // 2km radius
+			});
+
+			const response = await fetch(`/api/places?${params}`);
+			if (response.ok) {
+				nearbyPlaces = await response.json();
+			}
+		} catch (error) {
+			console.error('Error finding nearby places:', error);
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function handleInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+		searchQuery = target.value;
+
+		clearTimeout(debounceTimeout);
+		debounceTimeout = setTimeout(() => {
+			searchPlaces(searchQuery);
+		}, 300);
+	}
+
+	function selectNearbyPlace(place: PlaceResult) {
+		onPlaceSelected(place);
+		searchQuery = place.name;
+		showNearby = false;
+		showSuggestions = false;
+	}
+
+	function handleClickOutside(event: Event) {
+		const target = event.target as HTMLElement;
+		if (!target.closest('.poi-search-container')) {
+			showSuggestions = false;
+			showNearby = false;
+		}
+	}
+
+	// Close dropdowns when clicking outside
+	if (typeof window !== 'undefined') {
+		document.addEventListener('click', handleClickOutside);
+	}
+</script>
+
+<div class="poi-search-container">
+	<div class="field">
+		<Label for="poi-search">{label}</Label>
+		<div class="search-input-container">
+			<Input id="poi-search" type="text" {placeholder} value={searchQuery} oninput={handleInput} />
+			{#if showNearbyButton && $coordinates}
+				<Button
+					type="button"
+					variant="ghost"
+					size="sm"
+					onclick={findNearbyPlaces}
+					disabled={isLoading}
+				>
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+						<path
+							d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 5.58172 6.58172 2 12 2C17.4183 2 21 5.58172 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>
+					Nearby
+				</Button>
+			{/if}
+		</div>
+	</div>
+
+	{#if showSuggestions && suggestions.length > 0}
+		<div class="suggestions-dropdown">
+			<div class="suggestions-header">Search Results</div>
+			{#each suggestions as suggestion (suggestion.placeId)}
+				<button
+					class="suggestion-item"
+					onclick={() => selectPlace(suggestion.placeId, suggestion.description)}
+					disabled={isLoading}
+				>
+					<div class="suggestion-content">
+						<span class="suggestion-name">{suggestion.description}</span>
+						<div class="suggestion-types">
+							{#each suggestion.types.slice(0, 2) as type}
+								<span class="suggestion-type">{type.replace(/_/g, ' ')}</span>
+							{/each}
+						</div>
+					</div>
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" class="suggestion-icon">
+						<path
+							d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 5.58172 6.58172 2 12 2C17.4183 2 21 5.58172 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>
+				</button>
+			{/each}
+		</div>
+	{/if}
+
+	{#if showNearby && nearbyPlaces.length > 0}
+		<div class="suggestions-dropdown">
+			<div class="suggestions-header">Nearby Places</div>
+			{#each nearbyPlaces as place (place.placeId)}
+				<button
+					class="suggestion-item"
+					onclick={() => selectNearbyPlace(place)}
+					disabled={isLoading}
+				>
+					<div class="suggestion-content">
+						<span class="suggestion-name">{place.name}</span>
+						<span class="suggestion-address">{place.vicinity || place.formattedAddress}</span>
+						{#if place.rating}
+							<div class="suggestion-rating">
+								<span class="rating-stars">★</span>
+								<span>{place.rating.toFixed(1)}</span>
+							</div>
+						{/if}
+					</div>
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" class="suggestion-icon">
+						<path
+							d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 5.58172 6.58172 2 12 2C17.4183 2 21 5.58172 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>
+				</button>
+			{/each}
+		</div>
+	{/if}
+
+	{#if isLoading}
+		<div class="loading-indicator">
+			<svg width="20" height="20" viewBox="0 0 24 24" fill="none" class="loading-spinner">
+				<circle
+					cx="12"
+					cy="12"
+					r="10"
+					stroke="currentColor"
+					stroke-width="4"
+					stroke-linecap="round"
+					stroke-dasharray="32"
+					stroke-dashoffset="32"
+				/>
+			</svg>
+			<span>Searching...</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.poi-search-container {
+		position: relative;
+	}
+
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.search-input-container {
+		position: relative;
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.suggestions-dropdown {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		right: 0;
+		background: hsl(var(--background));
+		border: 1px solid hsl(var(--border));
+		border-radius: 8px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		max-height: 300px;
+		overflow-y: auto;
+		z-index: 1000;
+		margin-top: 0.25rem;
+		backdrop-filter: blur(8px);
+	}
+
+	.suggestions-header {
+		padding: 0.75rem;
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: hsl(var(--muted-foreground));
+		border-bottom: 1px solid hsl(var(--border));
+		background: hsl(var(--muted));
+		backdrop-filter: blur(12px);
+	}
+
+	.suggestion-item {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.75rem;
+		border: none;
+		background: hsl(var(--background));
+		text-align: left;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+		border-bottom: 1px solid hsl(var(--border));
+		backdrop-filter: blur(12px);
+	}
+
+	.suggestion-item:last-child {
+		border-bottom: none;
+	}
+
+	.suggestion-item:hover:not(:disabled) {
+		background: hsl(var(--muted) / 0.5);
+	}
+
+	.suggestion-item:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	.suggestion-content {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		flex: 1;
+	}
+
+	.suggestion-name {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: hsl(var(--foreground));
+	}
+
+	.suggestion-address {
+		font-size: 0.75rem;
+		color: hsl(var(--muted-foreground));
+	}
+
+	.suggestion-types {
+		display: flex;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+	}
+
+	.suggestion-type {
+		font-size: 0.625rem;
+		padding: 0.125rem 0.375rem;
+		background: hsl(var(--muted));
+		color: hsl(var(--muted-foreground));
+		border-radius: 4px;
+		text-transform: capitalize;
+	}
+
+	.suggestion-rating {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		font-size: 0.75rem;
+		color: hsl(var(--muted-foreground));
+	}
+
+	.rating-stars {
+		color: #fbbf24;
+	}
+
+	.suggestion-icon {
+		color: hsl(var(--muted-foreground));
+		flex-shrink: 0;
+	}
+
+	.loading-indicator {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.75rem;
+		color: hsl(var(--muted-foreground));
+		font-size: 0.875rem;
+	}
+
+	.loading-spinner {
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	@media (max-width: 640px) {
+		.search-input-container {
+			flex-direction: column;
+		}
+	}
+</style>

src/lib/index.ts

@@ -8,6 +8,7 @@ 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 LocationManager } from './components/LocationManager.svelte';
 export { default as FindCard } from './components/FindCard.svelte';
 export { default as FindsList } from './components/FindsList.svelte';
 
@@ -24,6 +25,7 @@ export {
 	locationError,
 	isLocationLoading,
 	hasLocationAccess,
+	isWatching,
 	getMapCenter,
 	getMapZoom
 } from './stores/location';

src/lib/stores/api-sync.ts

@@ -0,0 +1,493 @@
+import { writable, derived, type Readable, type Writable } from 'svelte/store';
+import { toast } from 'svelte-sonner';
+
+// Core types for the API sync system
+export interface EntityState<T = unknown> {
+	data: T;
+	isLoading: boolean;
+	error: string | null;
+	lastUpdated: Date;
+}
+
+export interface QueuedOperation {
+	id: string;
+	entityType: string;
+	entityId: string;
+	operation: 'create' | 'update' | 'delete';
+	action?: string;
+	data?: unknown;
+	retry: number;
+	maxRetries: number;
+	timestamp: Date;
+}
+
+export interface APIResponse<T = unknown> {
+	success: boolean;
+	data?: T;
+	error?: string;
+	[key: string]: unknown;
+}
+
+// Specific entity state types
+export interface FindLikeState {
+	isLiked: boolean;
+	likeCount: number;
+	isLoading: boolean;
+	error: string | null;
+}
+
+export interface FindState {
+	id: string;
+	title: string;
+	description?: string;
+	latitude: string;
+	longitude: string;
+	locationName?: string;
+	category?: string;
+	isPublic: boolean;
+	createdAt: Date;
+	userId: string;
+	username: string;
+	profilePictureUrl?: string;
+	media?: Array<{
+		id: string;
+		findId: string;
+		type: string;
+		url: string;
+		thumbnailUrl: string | null;
+		orderIndex: number | null;
+	}>;
+	isLikedByUser: boolean;
+	likeCount: number;
+	isFromFriend: boolean;
+}
+
+// Generate unique operation IDs
+function generateOperationId(): string {
+	return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+// Create operation key for deduplication
+function createOperationKey(
+	entityType: string,
+	entityId: string,
+	operation: string,
+	action?: string
+): string {
+	return `${entityType}:${entityId}:${operation}${action ? `:${action}` : ''}`;
+}
+
+class APISync {
+	// Entity stores - each entity type has its own store
+	private entityStores = new Map<string, Writable<Map<string, EntityState>>>();
+
+	// Operation queue for API calls
+	private operationQueue = new Map<string, QueuedOperation>();
+	private processingQueue = false;
+
+	// Cleanup tracking for memory management
+	private subscriptions = new Map<string, Set<() => void>>();
+
+	constructor() {
+		// Initialize core entity stores
+		this.initializeEntityStore('find');
+		this.initializeEntityStore('user');
+		this.initializeEntityStore('friendship');
+
+		// Start processing queue
+		this.startQueueProcessor();
+	}
+
+	private initializeEntityStore(entityType: string): void {
+		if (!this.entityStores.has(entityType)) {
+			this.entityStores.set(entityType, writable(new Map<string, EntityState>()));
+		}
+	}
+
+	private getEntityStore(entityType: string): Writable<Map<string, EntityState>> {
+		this.initializeEntityStore(entityType);
+		return this.entityStores.get(entityType)!;
+	}
+
+	/**
+	 * Subscribe to a specific entity's state
+	 */
+	subscribe<T>(entityType: string, entityId: string): Readable<EntityState<T>> {
+		const store = this.getEntityStore(entityType);
+
+		return derived(store, ($entities) => {
+			const entity = $entities.get(entityId);
+			if (!entity) {
+				// Return default state if entity doesn't exist
+				return {
+					data: null as T,
+					isLoading: false,
+					error: null,
+					lastUpdated: new Date()
+				};
+			}
+			return entity as EntityState<T>;
+		});
+	}
+
+	/**
+	 * Subscribe specifically to find like state
+	 */
+	subscribeFindLikes(findId: string): Readable<FindLikeState> {
+		const store = this.getEntityStore('find');
+
+		return derived(store, ($entities) => {
+			const entity = $entities.get(findId);
+			if (!entity || !entity.data) {
+				return {
+					isLiked: false,
+					likeCount: 0,
+					isLoading: false,
+					error: null
+				};
+			}
+
+			const findData = entity.data as FindState;
+			return {
+				isLiked: findData.isLikedByUser,
+				likeCount: findData.likeCount,
+				isLoading: entity.isLoading,
+				error: entity.error
+			};
+		});
+	}
+
+	/**
+	 * Check if entity state exists
+	 */
+	hasEntityState(entityType: string, entityId: string): boolean {
+		const store = this.getEntityStore(entityType);
+		let exists = false;
+
+		const unsubscribe = store.subscribe(($entities) => {
+			exists = $entities.has(entityId);
+		});
+		unsubscribe();
+
+		return exists;
+	}
+
+	/**
+	 * Get current entity state
+	 */
+	getEntityState<T>(entityType: string, entityId: string): T | null {
+		const store = this.getEntityStore(entityType);
+		let currentState: T | null = null;
+
+		const unsubscribe = store.subscribe(($entities) => {
+			const entity = $entities.get(entityId);
+			if (entity?.data) {
+				currentState = entity.data as T;
+			}
+		});
+		unsubscribe();
+
+		return currentState;
+	}
+
+	/**
+	 * Initialize entity state with server data (only if no existing state)
+	 */
+	setEntityState<T>(entityType: string, entityId: string, data: T, isLoading = false): void {
+		const store = this.getEntityStore(entityType);
+
+		store.update(($entities) => {
+			const newEntities = new Map($entities);
+			newEntities.set(entityId, {
+				data,
+				isLoading,
+				error: null,
+				lastUpdated: new Date()
+			});
+			return newEntities;
+		});
+	}
+
+	/**
+	 * Initialize entity state only if it doesn't exist yet
+	 */
+	initializeEntityState<T>(entityType: string, entityId: string, data: T, isLoading = false): void {
+		if (!this.hasEntityState(entityType, entityId)) {
+			this.setEntityState(entityType, entityId, data, isLoading);
+		}
+	}
+
+	/**
+	 * Update entity loading state
+	 */
+	private setEntityLoading(entityType: string, entityId: string, isLoading: boolean): void {
+		const store = this.getEntityStore(entityType);
+
+		store.update(($entities) => {
+			const newEntities = new Map($entities);
+			const existing = newEntities.get(entityId);
+			if (existing) {
+				newEntities.set(entityId, {
+					...existing,
+					isLoading
+				});
+			}
+			return newEntities;
+		});
+	}
+
+	/**
+	 * Update entity error state
+	 */
+	private setEntityError(entityType: string, entityId: string, error: string): void {
+		const store = this.getEntityStore(entityType);
+
+		store.update(($entities) => {
+			const newEntities = new Map($entities);
+			const existing = newEntities.get(entityId);
+			if (existing) {
+				newEntities.set(entityId, {
+					...existing,
+					isLoading: false,
+					error
+				});
+			}
+			return newEntities;
+		});
+	}
+
+	/**
+	 * Queue an operation for processing
+	 */
+	async queueOperation(
+		entityType: string,
+		entityId: string,
+		operation: 'create' | 'update' | 'delete',
+		action?: string,
+		data?: Record<string, unknown>
+	): Promise<void> {
+		const operationKey = createOperationKey(entityType, entityId, operation, action);
+
+		// Check if same operation is already queued
+		if (this.operationQueue.has(operationKey)) {
+			console.log(`Operation ${operationKey} already queued, skipping duplicate`);
+			return;
+		}
+
+		const queuedOperation: QueuedOperation = {
+			id: generateOperationId(),
+			entityType,
+			entityId,
+			operation,
+			action,
+			data,
+			retry: 0,
+			maxRetries: 3,
+			timestamp: new Date()
+		};
+
+		this.operationQueue.set(operationKey, queuedOperation);
+
+		// Set entity to loading state
+		this.setEntityLoading(entityType, entityId, true);
+
+		// Process queue if not already processing
+		if (!this.processingQueue) {
+			this.processQueue();
+		}
+	}
+
+	/**
+	 * Process the operation queue
+	 */
+	private async processQueue(): Promise<void> {
+		if (this.processingQueue || this.operationQueue.size === 0) {
+			return;
+		}
+
+		this.processingQueue = true;
+
+		const operations = Array.from(this.operationQueue.entries());
+
+		for (const [operationKey, operation] of operations) {
+			try {
+				await this.executeOperation(operation);
+				this.operationQueue.delete(operationKey);
+			} catch (error) {
+				console.error(`Operation ${operationKey} failed:`, error);
+
+				if (operation.retry < operation.maxRetries) {
+					operation.retry++;
+					console.log(
+						`Retrying operation ${operationKey} (attempt ${operation.retry}/${operation.maxRetries})`
+					);
+				} else {
+					console.error(`Operation ${operationKey} failed after ${operation.maxRetries} retries`);
+					this.operationQueue.delete(operationKey);
+					this.setEntityError(
+						operation.entityType,
+						operation.entityId,
+						'Operation failed after multiple retries'
+					);
+					toast.error('Failed to sync changes. Please try again.');
+				}
+			}
+		}
+
+		this.processingQueue = false;
+
+		// If more operations were added while processing, process again
+		if (this.operationQueue.size > 0) {
+			setTimeout(() => this.processQueue(), 1000); // Wait 1s before retry
+		}
+	}
+
+	/**
+	 * Execute a specific operation
+	 */
+	private async executeOperation(operation: QueuedOperation): Promise<void> {
+		const { entityType, entityId, operation: op, action, data } = operation;
+
+		let response: Response;
+
+		if (entityType === 'find' && action === 'like') {
+			// Handle like operations
+			const method = (data as { isLiked?: boolean })?.isLiked ? 'POST' : 'DELETE';
+			response = await fetch(`/api/finds/${entityId}/like`, {
+				method,
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			});
+		} else {
+			throw new Error(`Unsupported operation: ${entityType}:${op}:${action}`);
+		}
+
+		if (!response.ok) {
+			const errorData = await response.json().catch(() => ({}));
+			throw new Error(errorData.message || `HTTP ${response.status}`);
+		}
+
+		const result = await response.json();
+
+		// Update entity state with successful result
+		if (entityType === 'find' && action === 'like') {
+			this.updateFindLikeState(entityId, result.isLiked, result.likeCount);
+		}
+	}
+
+	/**
+	 * Update find like state after successful API call
+	 */
+	private updateFindLikeState(findId: string, isLiked: boolean, likeCount: number): void {
+		const store = this.getEntityStore('find');
+
+		store.update(($entities) => {
+			const newEntities = new Map($entities);
+			const existing = newEntities.get(findId);
+
+			if (existing && existing.data) {
+				const findData = existing.data as FindState;
+				newEntities.set(findId, {
+					...existing,
+					data: {
+						...findData,
+						isLikedByUser: isLiked,
+						likeCount: likeCount
+					},
+					isLoading: false,
+					error: null,
+					lastUpdated: new Date()
+				});
+			}
+
+			return newEntities;
+		});
+	}
+
+	/**
+	 * Start the queue processor
+	 */
+	private startQueueProcessor(): void {
+		// Process queue every 100ms
+		setInterval(() => {
+			if (this.operationQueue.size > 0 && !this.processingQueue) {
+				this.processQueue();
+			}
+		}, 100);
+	}
+
+	/**
+	 * Toggle like for a find
+	 */
+	async toggleLike(findId: string): Promise<void> {
+		// Get current state for optimistic update
+		const store = this.getEntityStore('find');
+		let currentState: FindState | null = null;
+
+		const unsubscribe = store.subscribe(($entities) => {
+			const entity = $entities.get(findId);
+			if (entity?.data) {
+				currentState = entity.data as FindState;
+			}
+		});
+		unsubscribe();
+
+		if (!currentState) {
+			console.warn(`Cannot toggle like for find ${findId}: find state not found`);
+			return;
+		}
+
+		// Optimistic update
+		const findState = currentState as FindState;
+		const newIsLiked = !findState.isLikedByUser;
+		const newLikeCount = findState.likeCount + (newIsLiked ? 1 : -1);
+
+		// Update state optimistically
+		store.update(($entities) => {
+			const newEntities = new Map($entities);
+			const existing = newEntities.get(findId);
+
+			if (existing && existing.data) {
+				const findData = existing.data as FindState;
+				newEntities.set(findId, {
+					...existing,
+					data: {
+						...findData,
+						isLikedByUser: newIsLiked,
+						likeCount: newLikeCount
+					}
+				});
+			}
+
+			return newEntities;
+		});
+
+		// Queue the operation
+		await this.queueOperation('find', findId, 'update', 'like', { isLiked: newIsLiked });
+	}
+
+	/**
+	 * Initialize find data from server (only if no existing state)
+	 */
+	initializeFindData(finds: FindState[]): void {
+		for (const find of finds) {
+			this.initializeEntityState('find', find.id, find);
+		}
+	}
+
+	/**
+	 * Cleanup unused subscriptions (call this when components unmount)
+	 */
+	cleanup(entityType: string, entityId: string): void {
+		const key = `${entityType}:${entityId}`;
+		const subscriptions = this.subscriptions.get(key);
+		if (subscriptions) {
+			subscriptions.forEach((unsubscribe) => unsubscribe());
+			this.subscriptions.delete(key);
+		}
+	}
+}
+
+// Create singleton instance
+export const apiSync = new APISync();

src/lib/stores/location.ts

@@ -43,6 +43,7 @@ export const shouldZoomToLocation = derived(
 	locationStore,
 	($location) => $location.shouldZoomToLocation
 );
+export const isWatching = derived(locationStore, ($location) => $location.isWatching);
 
 // Location actions
 export const locationActions = {

src/lib/utils/places.ts

@@ -0,0 +1,194 @@
+export interface PlaceResult {
+	placeId: string;
+	name: string;
+	formattedAddress: string;
+	latitude: number;
+	longitude: number;
+	types: string[];
+	vicinity?: string;
+	rating?: number;
+	priceLevel?: number;
+}
+
+interface GooglePlacesPrediction {
+	place_id: string;
+	description: string;
+	types: string[];
+}
+
+interface GooglePlacesResult {
+	place_id: string;
+	name: string;
+	formatted_address?: string;
+	vicinity?: string;
+	geometry: {
+		location: {
+			lat: number;
+			lng: number;
+		};
+	};
+	types?: string[];
+	rating?: number;
+	price_level?: number;
+}
+
+export interface PlaceSearchOptions {
+	query?: string;
+	location?: { lat: number; lng: number };
+	radius?: number;
+	type?: string;
+}
+
+export class GooglePlacesService {
+	private apiKey: string;
+	private baseUrl = 'https://maps.googleapis.com/maps/api/place';
+
+	constructor(apiKey: string) {
+		this.apiKey = apiKey;
+	}
+
+	/**
+	 * Search for places using text query
+	 */
+	async searchPlaces(
+		query: string,
+		location?: { lat: number; lng: number }
+	): Promise<PlaceResult[]> {
+		const url = new URL(`${this.baseUrl}/textsearch/json`);
+		url.searchParams.set('query', query);
+		url.searchParams.set('key', this.apiKey);
+
+		if (location) {
+			url.searchParams.set('location', `${location.lat},${location.lng}`);
+			url.searchParams.set('radius', '50000'); // 50km radius
+		}
+
+		try {
+			const response = await fetch(url.toString());
+			const data = await response.json();
+
+			if (data.status !== 'OK') {
+				throw new Error(`Places API error: ${data.status}`);
+			}
+
+			return data.results.map(this.formatPlaceResult);
+		} catch (error) {
+			console.error('Error searching places:', error);
+			throw error;
+		}
+	}
+
+	/**
+	 * Get place autocomplete suggestions
+	 */
+	async getAutocompleteSuggestions(
+		input: string,
+		location?: { lat: number; lng: number }
+	): Promise<Array<{ placeId: string; description: string; types: string[] }>> {
+		const url = new URL(`${this.baseUrl}/autocomplete/json`);
+		url.searchParams.set('input', input);
+		url.searchParams.set('key', this.apiKey);
+
+		if (location) {
+			url.searchParams.set('location', `${location.lat},${location.lng}`);
+			url.searchParams.set('radius', '50000');
+		}
+
+		try {
+			const response = await fetch(url.toString());
+			const data = await response.json();
+
+			if (data.status !== 'OK' && data.status !== 'ZERO_RESULTS') {
+				throw new Error(`Places API error: ${data.status}`);
+			}
+
+			return (
+				data.predictions?.map((prediction: GooglePlacesPrediction) => ({
+					placeId: prediction.place_id,
+					description: prediction.description,
+					types: prediction.types
+				})) || []
+			);
+		} catch (error) {
+			console.error('Error getting autocomplete suggestions:', error);
+			throw error;
+		}
+	}
+
+	/**
+	 * Get detailed information about a place
+	 */
+	async getPlaceDetails(placeId: string): Promise<PlaceResult> {
+		const url = new URL(`${this.baseUrl}/details/json`);
+		url.searchParams.set('place_id', placeId);
+		url.searchParams.set(
+			'fields',
+			'place_id,name,formatted_address,geometry,types,vicinity,rating,price_level'
+		);
+		url.searchParams.set('key', this.apiKey);
+
+		try {
+			const response = await fetch(url.toString());
+			const data = await response.json();
+
+			if (data.status !== 'OK') {
+				throw new Error(`Places API error: ${data.status}`);
+			}
+
+			return this.formatPlaceResult(data.result);
+		} catch (error) {
+			console.error('Error getting place details:', error);
+			throw error;
+		}
+	}
+
+	/**
+	 * Find nearby places
+	 */
+	async findNearbyPlaces(
+		location: { lat: number; lng: number },
+		radius: number = 5000,
+		type?: string
+	): Promise<PlaceResult[]> {
+		const url = new URL(`${this.baseUrl}/nearbysearch/json`);
+		url.searchParams.set('location', `${location.lat},${location.lng}`);
+		url.searchParams.set('radius', radius.toString());
+		url.searchParams.set('key', this.apiKey);
+
+		if (type) {
+			url.searchParams.set('type', type);
+		}
+
+		try {
+			const response = await fetch(url.toString());
+			const data = await response.json();
+
+			if (data.status !== 'OK' && data.status !== 'ZERO_RESULTS') {
+				throw new Error(`Places API error: ${data.status}`);
+			}
+
+			return data.results?.map(this.formatPlaceResult) || [];
+		} catch (error) {
+			console.error('Error finding nearby places:', error);
+			throw error;
+		}
+	}
+
+	private formatPlaceResult = (place: GooglePlacesResult): PlaceResult => {
+		return {
+			placeId: place.place_id,
+			name: place.name,
+			formattedAddress: place.formatted_address || place.vicinity || '',
+			latitude: place.geometry.location.lat,
+			longitude: place.geometry.location.lng,
+			types: place.types || [],
+			vicinity: place.vicinity,
+			rating: place.rating,
+			priceLevel: place.price_level
+		};
+	};
+}
+
+export function createPlacesService(apiKey: string): GooglePlacesService {
+	return new GooglePlacesService(apiKey);
+}

src/routes/+layout.svelte

@@ -5,6 +5,7 @@
 	import { page } from '$app/state';
 	import { Toaster } from '$lib/components/sonner/index.js';
 	import { Skeleton } from '$lib/components/skeleton';
+	import LocationManager from '$lib/components/LocationManager.svelte';
 
 	let { children, data } = $props();
 	let isLoginRoute = $derived(page.url.pathname.startsWith('/login'));
@@ -32,6 +33,11 @@
 
 <Toaster />
 
+<!-- Auto-start location watching for authenticated users -->
+{#if data?.user && !isLoginRoute}
+	<LocationManager autoStart={true} />
+{/if}
+
 {#if showHeader && data.user}
 	<Header user={data.user} />
 {:else if isLoading}

src/routes/+page.svelte

@@ -7,6 +7,8 @@
 	import type { PageData } from './$types';
 	import { coordinates } from '$lib/stores/location';
 	import { Button } from '$lib/components/button';
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
 
 	// Server response type
 	interface ServerFind {
@@ -92,6 +94,62 @@
 	let selectedFind: FindPreviewData | null = $state(null);
 	let currentFilter = $state('all');
 
+	// Initialize API sync with server data on mount
+	onMount(async () => {
+		if (browser && data.finds && data.finds.length > 0) {
+			// Dynamically import the API sync to avoid SSR issues
+			const { apiSync } = await import('$lib/stores/api-sync');
+
+			// Define the FindState interface locally
+			interface FindState {
+				id: string;
+				title: string;
+				description?: string;
+				latitude: string;
+				longitude: string;
+				locationName?: string;
+				category?: string;
+				isPublic: boolean;
+				createdAt: Date;
+				userId: string;
+				username: string;
+				profilePictureUrl?: string;
+				media: Array<{
+					id: string;
+					findId: string;
+					type: string;
+					url: string;
+					thumbnailUrl: string | null;
+					orderIndex: number | null;
+				}>;
+				isLikedByUser: boolean;
+				likeCount: number;
+				isFromFriend: boolean;
+			}
+
+			const findStates: FindState[] = data.finds.map((serverFind: ServerFind) => ({
+				id: serverFind.id,
+				title: serverFind.title,
+				description: serverFind.description,
+				latitude: serverFind.latitude,
+				longitude: serverFind.longitude,
+				locationName: serverFind.locationName,
+				category: serverFind.category,
+				isPublic: Boolean(serverFind.isPublic),
+				createdAt: new Date(serverFind.createdAt),
+				userId: serverFind.userId,
+				username: serverFind.username,
+				profilePictureUrl: serverFind.profilePictureUrl || undefined,
+				media: serverFind.media,
+				isLikedByUser: Boolean(serverFind.isLikedByUser),
+				likeCount: serverFind.likeCount || 0,
+				isFromFriend: Boolean(serverFind.isFromFriend)
+			}));
+
+			apiSync.initializeFindData(findStates);
+		}
+	});
+
 	// All finds - convert server format to component format
 	let allFinds = $derived(
 		(data.finds || ([] as ServerFind[])).map((serverFind: ServerFind) => ({

src/routes/api/places/+server.ts

@@ -0,0 +1,83 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { env } from '$env/dynamic/private';
+import { createPlacesService } from '$lib/utils/places';
+
+const getPlacesService = () => {
+	const apiKey = env.GOOGLE_MAPS_API_KEY;
+	if (!apiKey) {
+		throw new Error('GOOGLE_MAPS_API_KEY environment variable is not set');
+	}
+	return createPlacesService(apiKey);
+};
+
+export const GET: RequestHandler = async ({ url, locals }) => {
+	if (!locals.user) {
+		throw error(401, 'Unauthorized');
+	}
+
+	const action = url.searchParams.get('action');
+	const query = url.searchParams.get('query');
+	const placeId = url.searchParams.get('placeId');
+	const lat = url.searchParams.get('lat');
+	const lng = url.searchParams.get('lng');
+	const radius = url.searchParams.get('radius');
+	const type = url.searchParams.get('type');
+
+	try {
+		const placesService = getPlacesService();
+
+		let location;
+		if (lat && lng) {
+			location = { lat: parseFloat(lat), lng: parseFloat(lng) };
+		}
+
+		switch (action) {
+			case 'search': {
+				if (!query) {
+					throw error(400, 'Query parameter is required for search');
+				}
+				const searchResults = await placesService.searchPlaces(query, location);
+				return json(searchResults);
+			}
+
+			case 'autocomplete': {
+				if (!query) {
+					throw error(400, 'Query parameter is required for autocomplete');
+				}
+				const suggestions = await placesService.getAutocompleteSuggestions(query, location);
+				return json(suggestions);
+			}
+
+			case 'details': {
+				if (!placeId) {
+					throw error(400, 'PlaceId parameter is required for details');
+				}
+				const placeDetails = await placesService.getPlaceDetails(placeId);
+				return json(placeDetails);
+			}
+
+			case 'nearby': {
+				if (!location) {
+					throw error(400, 'Location parameters (lat, lng) are required for nearby search');
+				}
+				const radiusNum = radius ? parseInt(radius) : 5000;
+				const nearbyResults = await placesService.findNearbyPlaces(
+					location,
+					radiusNum,
+					type || undefined
+				);
+				return json(nearbyResults);
+			}
+
+			default:
+				throw error(400, 'Invalid action parameter');
+		}
+	} catch (err) {
+		console.error('Places API error:', err);
+		if (err instanceof Error) {
+			throw error(500, err.message);
+		}
+		throw error(500, 'Failed to fetch places data');
+	}
+};