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.
feat:implement a sync-service
2025-10-29 00:14:26 +01:00 · 2025-10-29 00:09:01 +01:00 · 2025-10-27 15:07:24 +01:00 · 2025-10-27 14:57:54 +01:00 · 2025-10-21 14:49:55 +02:00
15 changed files with 1742 additions and 86 deletions
--- a/.env.example
+++ b/.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"
--- a/logs/logboek.md
+++ b/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
-**Werkdagen:** 10 dagen
-**Gemiddelde uren per dag:** 6.1 uur
+**Totale geschatte uren:** 67 uren
+**Werkdagen:** 12 dagen
+**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:

--- a/src/lib/components/CreateFindModal.svelte
+++ b/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">
-						<Label for="location-name">Location name</Label>
-						<Input
-							name="location-name"
-							placeholder="Café Central, Brussels"
-							bind:value={locationName}
-						/>
+					<div class="location-section">
+						<div class="location-header">
+							<Label>Location</Label>
+							<button type="button" onclick={toggleLocationMode} class="toggle-button">
+								{useManualLocation ? 'Use Search' : 'Manual Entry'}
+							</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">
-						<div class="field">
-							<Label for="latitude">Latitude</Label>
-							<Input name="latitude" type="text" required bind:value={latitude} />
+					{#if useManualLocation || (!latitude && !longitude)}
+						<div class="field-group">
+							<div class="field">
+								<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">
-							<Label for="longitude">Longitude</Label>
-							<Input name="longitude" type="text" required bind:value={longitude} />
+					{:else if latitude && longitude}
+						<div class="coordinates-display">
+							<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;
--- a/src/lib/components/LikeButton.svelte
+++ b/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
-	let serverIsLiked = $state(isLiked);
-	let serverLikeCount = $state(likeCount);
+	// Local state stores for this like button - start with props but will be overridden by global state
+	const likeState = writable({
+		isLiked: isLiked,
+		likeCount: likeCount,
+		isLoading: false
+	});

-	// Track optimistic state during loading
-	let isLoading = $state(false);
-	let optimisticIsLiked = $state(isLiked);
-	let optimisticLikeCount = $state(likeCount);
+	let apiSync: any = null;

-	// Derived state for display
-	let displayIsLiked = $derived(isLoading ? optimisticIsLiked : serverIsLiked);
-	let displayLikeCount = $derived(isLoading ? optimisticLikeCount : serverLikeCount);
+	// Initialize API sync and subscribe to global state
+	onMount(async () => {
+		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
-		optimisticIsLiked = !serverIsLiked;
-		optimisticLikeCount = serverLikeCount + (optimisticIsLiked ? 1 : -1);
-		isLoading = true;
+		const currentState = likeState;
+		if (currentState && (currentState as any).isLoading) return;

 		try {
-			const method = optimisticIsLiked ? 'POST' : 'DELETE';
-			const response = await fetch(`/api/finds/${findId}/like`, {
-				method,
-				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;
+			await apiSync.toggleLike(findId);
+		} catch (error) {
+			console.error('Failed to toggle like:', error);
 		}
 	}
-
-	// 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>
--- a/src/lib/components/LocationButton.svelte
+++ b/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() {
-		const result = await locationActions.getCurrentLocation({
-			enableHighAccuracy: true,
-			timeout: 15000,
-			maximumAge: 300000
-		});
+	// Track if location watching is active from the derived store

-		if (!result && $locationError) {
-			toast.error($locationError.message);
+	async function handleLocationClick() {
+		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;
 	}
--- a/src/lib/components/LocationManager.svelte
+++ b/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 -->
--- a/src/lib/components/Map.svelte
+++ b/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="marker-pulse"></div>
-						<div class="marker-outer">
-							<div class="marker-inner"></div>
+					<div class="location-marker" class:watching={$isWatching}>
+						<div class="marker-pulse" class:watching={$isWatching}></div>
+						<div class="marker-outer" class:watching={$isWatching}>
+							<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;
--- a/src/lib/components/POISearch.svelte
+++ b/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>
--- a/src/lib/index.ts
+++ b/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';
--- a/src/lib/stores/api-sync.ts
+++ b/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();
--- a/src/lib/stores/location.ts
+++ b/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 = {
--- a/src/lib/utils/places.ts
+++ b/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);
+}
--- a/src/routes/+layout.svelte
+++ b/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}
--- a/src/routes/+page.svelte
+++ b/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) => ({
--- a/src/routes/api/places/+server.ts
+++ b/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');
+	}
+};
Author	SHA1	Message	Date
Zias van Nes	d7fe9091ce	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.	2025-10-29 00:14:26 +01:00
Zias van Nes	6620cc6078	feat:implement a sync-service this new feature make sure that serverside actions are all in sync with client. when a client is multiple times subscribed to the same server side action it needs to be synced on all children. this implementation gives access to one client synced status that will handle all api actions in a queue.	2025-10-29 00:09:01 +01:00
Zias van Nes	3b3ebc2873	fix:continuously watch location	2025-10-27 15:07:24 +01:00
Zias van Nes	fef7c160e2	feat:use GMaps places api for searching poi's	2025-10-27 14:57:54 +01:00
Zias van Nes	43afa6dacc	update:logboek	2025-10-21 14:49:55 +02:00