feat:use GMaps places api for searching poi's

update:logboek
UI:Refactor create find modal UI and update finds list/header layout
2025-10-27 14:57:54 +01:00 · 2025-10-21 14:49:55 +02:00 · 2025-10-21 14:44:25 +02:00 · 2025-10-21 14:11:28 +02:00
9 changed files with 1234 additions and 263 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
@@ -1,8 +1,11 @@
 <script lang="ts">
-	import Modal from '$lib/components/Modal.svelte';
-	import Input from '$lib/components/Input.svelte';
-	import Button from '$lib/components/Button.svelte';
+	import { Sheet, SheetContent, SheetHeader, SheetTitle } from '$lib/components/sheet';
+	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 POISearch from './POISearch.svelte';
+	import type { PlaceResult } from '$lib/utils/places';

 	interface Props {
 		isOpen: boolean;
@@ -12,7 +15,6 @@

 	let { isOpen, onClose, onFindCreated }: Props = $props();

-	// Form state
 	let title = $state('');
 	let description = $state('');
 	let latitude = $state('');
@@ -23,8 +25,8 @@
 	let selectedFiles = $state<FileList | null>(null);
 	let isSubmitting = $state(false);
 	let uploadedMedia = $state<Array<{ type: string; url: string; thumbnailUrl: string }>>([]);
+	let useManualLocation = $state(false);

-	// Categories
 	const categories = [
 		{ value: 'cafe', label: 'Café' },
 		{ value: 'restaurant', label: 'Restaurant' },
@@ -35,21 +37,40 @@
 		{ value: 'other', label: 'Other' }
 	];

-	// Auto-fill location when modal opens
+	let showModal = $state(true);
+	let isMobile = $state(false);
+
 	$effect(() => {
-		if (isOpen && $coordinates) {
+		if (typeof window === 'undefined') return;
+
+		const checkIsMobile = () => {
+			isMobile = window.innerWidth < 768;
+		};
+
+		checkIsMobile();
+		window.addEventListener('resize', checkIsMobile);
+
+		return () => window.removeEventListener('resize', checkIsMobile);
+	});
+
+	$effect(() => {
+		if (!showModal) {
+			onClose();
+		}
+	});
+
+	$effect(() => {
+		if (showModal && $coordinates) {
 			latitude = $coordinates.latitude.toString();
 			longitude = $coordinates.longitude.toString();
 		}
 	});

-	// Handle file selection
 	function handleFileChange(event: Event) {
 		const target = event.target as HTMLInputElement;
 		selectedFiles = target.files;
 	}

-	// Upload media files
 	async function uploadMedia(): Promise<void> {
 		if (!selectedFiles || selectedFiles.length === 0) return;

@@ -71,7 +92,6 @@
 		uploadedMedia = result.media;
 	}

-	// Submit form
 	async function handleSubmit() {
 		const lat = parseFloat(latitude);
 		const lng = parseFloat(longitude);
@@ -83,12 +103,10 @@
 		isSubmitting = true;

 		try {
-			// Upload media first if any
 			if (selectedFiles && selectedFiles.length > 0) {
 				await uploadMedia();
 			}

-			// Create the find
 			const response = await fetch('/api/finds', {
 				method: 'POST',
 				headers: {
@@ -110,11 +128,8 @@
 				throw new Error('Failed to create find');
 			}

-			// Reset form and close modal
 			resetForm();
-			onClose();
-
-			// Notify parent about new find creation
+			showModal = false;
 			onFindCreated(new CustomEvent('findCreated', { detail: { reload: true } }));
 		} catch (error) {
 			console.error('Error creating find:', error);
@@ -124,16 +139,32 @@
 		}
 	}

+	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;

-		// Reset file input
 		const fileInput = document.querySelector('#media-files') as HTMLInputElement;
 		if (fileInput) {
 			fileInput.value = '';
@@ -142,291 +173,443 @@

 	function closeModal() {
 		resetForm();
-		onClose();
+		showModal = false;
 	}
 </script>

 {#if isOpen}
-	<Modal bind:showModal={isOpen} positioning="center">
-		{#snippet header()}
-			<h2>Create Find</h2>
-		{/snippet}
+	<Sheet open={showModal} onOpenChange={(open) => (showModal = open)}>
+		<SheetContent side={isMobile ? 'bottom' : 'right'} class="create-find-sheet">
+			<SheetHeader>
+				<SheetTitle>Create Find</SheetTitle>
+			</SheetHeader>

-		<div class="form-container">
 			<form
 				onsubmit={(e) => {
 					e.preventDefault();
 					handleSubmit();
 				}}
+				class="form"
 			>
-				<div class="form-group">
-					<label for="title">Title *</label>
-					<Input name="title" placeholder="What did you find?" required bind:value={title} />
-					<span class="char-count">{title.length}/100</span>
-				</div>
-
-				<div class="form-group">
-					<label for="description">Description</label>
-					<textarea
-						name="description"
-						placeholder="Tell us about this place..."
-						maxlength="500"
-						bind:value={description}
-					></textarea>
-					<span class="char-count">{description.length}/500</span>
-				</div>
-
-				<div class="form-group">
-					<label for="location-name">Location Name</label>
-					<Input
-						name="location-name"
-						placeholder="e.g., Café Belga, Brussels"
-						bind:value={locationName}
-					/>
-				</div>
-
-				<div class="form-row">
-					<div class="form-group">
-						<label for="latitude">Latitude *</label>
-						<Input name="latitude" type="text" required bind:value={latitude} />
+				<div class="form-content">
+					<div class="field">
+						<Label for="title">What did you find?</Label>
+						<Input name="title" placeholder="Amazing coffee shop..." required bind:value={title} />
 					</div>
-					<div class="form-group">
-						<label for="longitude">Longitude *</label>
-						<Input name="longitude" type="text" required bind:value={longitude} />
+
+					<div class="field">
+						<Label for="description">Tell us about it</Label>
+						<textarea
+							name="description"
+							placeholder="The best cappuccino in town..."
+							maxlength="500"
+							bind:value={description}
+						></textarea>
 					</div>
-				</div>

-				<div class="form-group">
-					<label for="category">Category</label>
-					<select name="category" bind:value={category}>
-						{#each categories as cat (cat.value)}
-							<option value={cat.value}>{cat.label}</option>
-						{/each}
-					</select>
-				</div>
+					<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>

-				<div class="form-group">
-					<label for="media-files">Photos/Videos (max 5)</label>
-					<input
-						id="media-files"
-						type="file"
-						accept="image/jpeg,image/png,image/webp,video/mp4,video/quicktime"
-						multiple
-						max="5"
-						onchange={handleFileChange}
-					/>
-					{#if selectedFiles && selectedFiles.length > 0}
-						<div class="file-preview">
-							{#each Array.from(selectedFiles) as file (file.name)}
-								<span class="file-name">{file.name}</span>
-							{/each}
+						{#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">
+						<div class="field">
+							<Label for="category">Category</Label>
+							<select name="category" bind:value={category} class="select">
+								{#each categories as cat (cat.value)}
+									<option value={cat.value}>{cat.label}</option>
+								{/each}
+							</select>
+						</div>
+						<div class="field">
+							<Label>Privacy</Label>
+							<label class="privacy-toggle">
+								<input type="checkbox" bind:checked={isPublic} />
+								<span>{isPublic ? 'Public' : 'Private'}</span>
+							</label>
+						</div>
+					</div>
+
+					<div class="field">
+						<Label for="media-files">Add photo or video</Label>
+						<div class="file-upload">
+							<input
+								id="media-files"
+								type="file"
+								accept="image/jpeg,image/png,image/webp,video/mp4,video/quicktime"
+								onchange={handleFileChange}
+								class="file-input"
+							/>
+							<div class="file-content">
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+									<path
+										d="M14.5 4H6A2 2 0 0 0 4 6V18A2 2 0 0 0 6 20H18A2 2 0 0 0 20 18V9.5L14.5 4Z"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+									<path
+										d="M14 4V10H20"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+								</svg>
+								<span>Click to upload</span>
+							</div>
+						</div>
+						{#if selectedFiles && selectedFiles.length > 0}
+							<div class="file-selected">
+								<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+									<path
+										d="M14.5 4H6A2 2 0 0 0 4 6V18A2 2 0 0 0 6 20H18A2 2 0 0 0 20 18V9.5L14.5 4Z"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+									<path
+										d="M14 4V10H20"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+								</svg>
+								<span>{selectedFiles[0].name}</span>
+							</div>
+						{/if}
+					</div>
+
+					{#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>
+					{: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>
 					{/if}
 				</div>

-				<div class="form-group">
-					<label class="privacy-toggle">
-						<input type="checkbox" bind:checked={isPublic} />
-						<span class="checkmark"></span>
-						Make this find public
-					</label>
-					<p class="privacy-help">
-						{isPublic ? 'Everyone can see this find' : 'Only your friends can see this find'}
-					</p>
-				</div>
-
-				<div class="form-actions">
-					<button
-						type="button"
-						class="button secondary"
-						onclick={closeModal}
-						disabled={isSubmitting}
-					>
+				<div class="actions">
+					<Button variant="ghost" type="button" onclick={closeModal} disabled={isSubmitting}>
 						Cancel
-					</button>
+					</Button>
 					<Button type="submit" disabled={isSubmitting || !title.trim()}>
 						{isSubmitting ? 'Creating...' : 'Create Find'}
 					</Button>
 				</div>
 			</form>
-		</div>
-	</Modal>
+		</SheetContent>
+	</Sheet>
 {/if}

 <style>
-	.form-container {
-		padding: 24px;
-		max-height: 70vh;
+	:global(.create-find-sheet) {
+		padding: 0 !important;
+		width: 100%;
+		max-width: 500px;
+		height: 100vh;
+		border-radius: 0;
+	}
+
+	@media (max-width: 767px) {
+		:global(.create-find-sheet) {
+			height: 90vh;
+			border-radius: 12px 12px 0 0;
+		}
+	}
+
+	.form {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.form-content {
+		flex: 1;
+		padding: 1.5rem;
 		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
 	}

-	.form-group {
-		margin-bottom: 20px;
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
 	}

-	.form-row {
+	.field-group {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
-		gap: 16px;
+		gap: 1rem;
 	}

-	label {
-		display: block;
-		margin-bottom: 8px;
-		font-weight: 500;
-		color: #333;
-		font-size: 0.9rem;
-		font-family: 'Washington', serif;
+	@media (max-width: 640px) {
+		.field-group {
+			grid-template-columns: 1fr;
+		}
 	}

 	textarea {
-		width: 100%;
-		padding: 1.25rem 1.5rem;
-		border: none;
-		border-radius: 2rem;
-		background-color: #e0e0e0;
-		font-size: 1rem;
-		color: #333;
-		outline: none;
-		transition: background-color 0.2s ease;
-		resize: vertical;
-		min-height: 100px;
-		font-family: inherit;
-	}
-
-	textarea:focus {
-		background-color: #d5d5d5;
-	}
-
-	textarea::placeholder {
-		color: #888;
-	}
-
-	select {
-		width: 100%;
-		padding: 1.25rem 1.5rem;
-		border: none;
-		border-radius: 2rem;
-		background-color: #e0e0e0;
-		font-size: 1rem;
-		color: #333;
-		outline: none;
-		transition: background-color 0.2s ease;
-		cursor: pointer;
-	}
-
-	select:focus {
-		background-color: #d5d5d5;
-	}
-
-	input[type='file'] {
-		width: 100%;
-		padding: 12px;
-		border: 2px dashed #ccc;
+		min-height: 80px;
+		padding: 0.75rem;
+		border: 1px solid hsl(var(--border));
 		border-radius: 8px;
-		background-color: #f9f9f9;
-		cursor: pointer;
+		background: hsl(var(--background));
+		font-family: inherit;
+		font-size: 0.875rem;
+		resize: vertical;
+		outline: none;
 		transition: border-color 0.2s ease;
 	}

-	input[type='file']:hover {
-		border-color: #999;
+	textarea:focus {
+		border-color: hsl(var(--primary));
+		box-shadow: 0 0 0 1px hsl(var(--primary));
 	}

-	.char-count {
-		font-size: 0.8rem;
-		color: #666;
-		text-align: right;
-		display: block;
-		margin-top: 4px;
+	textarea::placeholder {
+		color: hsl(var(--muted-foreground));
 	}

-	.file-preview {
-		margin-top: 8px;
-		display: flex;
-		flex-wrap: wrap;
-		gap: 8px;
+	.select {
+		padding: 0.75rem;
+		border: 1px solid hsl(var(--border));
+		border-radius: 8px;
+		background: hsl(var(--background));
+		font-size: 0.875rem;
+		outline: none;
+		transition: border-color 0.2s ease;
+		cursor: pointer;
 	}

-	.file-name {
-		background-color: #f0f0f0;
-		padding: 4px 8px;
-		border-radius: 12px;
-		font-size: 0.8rem;
-		color: #666;
+	.select:focus {
+		border-color: hsl(var(--primary));
+		box-shadow: 0 0 0 1px hsl(var(--primary));
 	}

 	.privacy-toggle {
 		display: flex;
 		align-items: center;
+		gap: 0.5rem;
 		cursor: pointer;
-		font-weight: normal;
+		font-size: 0.875rem;
+		padding: 0.75rem;
+		border: 1px solid hsl(var(--border));
+		border-radius: 8px;
+		background: hsl(var(--background));
+		transition: background-color 0.2s ease;
+	}
+
+	.privacy-toggle:hover {
+		background: hsl(var(--muted));
 	}

 	.privacy-toggle input[type='checkbox'] {
-		margin-right: 8px;
-		width: 18px;
-		height: 18px;
+		width: 16px;
+		height: 16px;
+		accent-color: hsl(var(--primary));
 	}

-	.privacy-help {
-		font-size: 0.8rem;
-		color: #666;
-		margin-top: 4px;
-		margin-left: 26px;
-	}
-
-	.form-actions {
-		display: flex;
-		gap: 12px;
-		margin-top: 32px;
-		padding-top: 20px;
-		border-top: 1px solid #e5e5e5;
-	}
-
-	.button {
-		flex: 1;
-		padding: 1.25rem 2rem;
-		border: none;
-		border-radius: 2rem;
-		font-size: 1rem;
-		font-weight: 500;
+	.file-upload {
+		position: relative;
+		border: 2px dashed hsl(var(--border));
+		border-radius: 8px;
+		background: hsl(var(--muted) / 0.3);
 		transition: all 0.2s ease;
 		cursor: pointer;
-		height: 3.5rem;
 	}

-	.button:disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
-		transform: none;
+	.file-upload:hover {
+		border-color: hsl(var(--primary));
+		background: hsl(var(--muted) / 0.5);
 	}

-	.button:disabled:hover {
-		transform: none;
+	.file-input {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		cursor: pointer;
 	}

-	.button.secondary {
-		background-color: #6c757d;
-		color: white;
+	.file-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 2rem;
+		text-align: center;
+		gap: 0.5rem;
+		color: hsl(var(--muted-foreground));
 	}

-	.button.secondary:hover:not(:disabled) {
-		background-color: #5a6268;
-		transform: translateY(-1px);
+	.file-content span {
+		font-size: 0.875rem;
+	}
+
+	.file-selected {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.75rem;
+		background: hsl(var(--muted));
+		border: 1px solid hsl(var(--border));
+		border-radius: 8px;
+		font-size: 0.875rem;
+		margin-top: 0.5rem;
+	}
+
+	.file-selected svg {
+		color: hsl(var(--primary));
+		flex-shrink: 0;
+	}
+
+	.file-selected span {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.actions {
+		display: flex;
+		gap: 1rem;
+		padding: 1.5rem;
+		border-top: 1px solid hsl(var(--border));
+		background: hsl(var(--background));
+	}
+
+	.actions :global(button) {
+		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-container {
-			padding: 16px;
+		.form-content {
+			padding: 1rem;
+			gap: 1rem;
 		}

-		.form-row {
-			grid-template-columns: 1fr;
-		}
-
-		.form-actions {
+		.actions {
+			padding: 1rem;
 			flex-direction: column;
 		}
+
+		.actions :global(button) {
+			flex: none;
+		}
 	}
 </style>
--- a/src/lib/components/FindsList.svelte
+++ b/src/lib/components/FindsList.svelte
@@ -26,6 +26,7 @@
 		title?: string;
 		showEmpty?: boolean;
 		emptyMessage?: string;
+		hideTitle?: boolean;
 	}

 	let {
@@ -33,7 +34,8 @@
 		onFindExplore,
 		title = 'Finds',
 		showEmpty = true,
-		emptyMessage = 'No finds to display'
+		emptyMessage = 'No finds to display',
+		hideTitle = false
 	}: FindsListProps = $props();

 	function handleFindExplore(id: string) {
@@ -42,9 +44,11 @@
 </script>

 <section class="finds-feed">
-	<div class="feed-header">
-		<h2 class="feed-title">{title}</h2>
-	</div>
+	{#if !hideTitle}
+		<div class="feed-header">
+			<h2 class="feed-title">{title}</h2>
+		</div>
+	{/if}

 	{#if finds.length > 0}
 		<div class="feed-container">
@@ -98,6 +102,7 @@
 <style>
 	.finds-feed {
 		width: 100%;
+		padding: 0 24px 24px 24px;
 	}

 	.feed-header {
--- 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/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/+page.svelte
+++ b/src/routes/+page.svelte
@@ -24,6 +24,7 @@
 		profilePictureUrl?: string | null;
 		likeCount?: number;
 		isLikedByUser?: boolean;
+		isFromFriend?: boolean;
 		media: Array<{
 			id: string;
 			findId: string;
@@ -53,6 +54,7 @@
 		};
 		likeCount?: number;
 		isLiked?: boolean;
+		isFromFriend?: boolean;
 		media?: Array<{
 			type: string;
 			url: string;
@@ -102,6 +104,7 @@
 			},
 			likeCount: serverFind.likeCount,
 			isLiked: serverFind.isLikedByUser,
+			isFromFriend: serverFind.isFromFriend,
 			media: serverFind.media?.map(
 				(m: { type: string; url: string; thumbnailUrl: string | null }) => ({
 					type: m.type,
@@ -120,7 +123,7 @@
 			case 'public':
 				return allFinds.filter((find) => find.isPublic === 1);
 			case 'friends':
-				return allFinds.filter((find) => find.isPublic === 0 && find.userId !== data.user!.id);
+				return allFinds.filter((find) => find.isFromFriend === true);
 			case 'mine':
 				return allFinds.filter((find) => find.userId === data.user!.id);
 			case 'all':
@@ -217,19 +220,22 @@
 		</div>

 		<div class="finds-section">
-			<div class="finds-header">
-				<div class="finds-title-section">
-					<FindsFilter {currentFilter} onFilterChange={handleFilterChange} />
+			<div class="finds-sticky-header">
+				<div class="finds-header-content">
+					<div class="finds-title-section">
+						<h2 class="finds-title">Finds</h2>
+						<FindsFilter {currentFilter} onFilterChange={handleFilterChange} />
+					</div>
+					<Button onclick={openCreateModal} class="create-find-button">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" class="mr-2">
+							<line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2" />
+							<line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" />
+						</svg>
+						Create Find
+					</Button>
 				</div>
-				<FindsList {finds} onFindExplore={handleFindExplore} />
-				<Button onclick={openCreateModal} class="create-find-button">
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" class="mr-2">
-						<line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2" />
-						<line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" />
-					</svg>
-					Create Find
-				</Button>
 			</div>
+			<FindsList {finds} onFindExplore={handleFindExplore} hideTitle={true} />
 		</div>
 	</main>

@@ -285,27 +291,44 @@
 	.finds-section {
 		background: white;
 		border-radius: 12px;
-		padding: 24px;
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 		position: relative;
 	}

-	.finds-header {
-		position: relative;
+	.finds-sticky-header {
+		position: sticky;
+		top: 0;
+		z-index: 50;
+		background: white;
+		border-bottom: 1px solid hsl(var(--border));
+		padding: 24px 24px 16px 24px;
+		border-radius: 12px 12px 0 0;
+	}
+
+	.finds-header-content {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 1rem;
 	}

 	.finds-title-section {
 		display: flex;
-		justify-content: space-between;
 		align-items: center;
-		margin-bottom: 20px;
+		gap: 1rem;
+		flex: 1;
+	}
+
+	.finds-title {
+		font-family: 'Washington', serif;
+		font-size: 1.875rem;
+		font-weight: 700;
+		margin: 0;
+		color: hsl(var(--foreground));
 	}

 	:global(.create-find-button) {
-		position: absolute;
-		top: 0;
-		right: 0;
-		z-index: 10;
+		flex-shrink: 0;
 	}

 	.fab {
@@ -338,14 +361,25 @@
 			gap: 16px;
 		}

-		.finds-section {
-			padding: 16px;
+		.finds-sticky-header {
+			padding: 16px 16px 12px 16px;
+		}
+
+		.finds-header-content {
+			flex-direction: column;
+			align-items: stretch;
+			gap: 12px;
 		}

 		.finds-title-section {
-			flex-direction: column;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
 			gap: 12px;
-			align-items: stretch;
+		}
+
+		.finds-title {
+			font-size: 1.5rem;
 		}

 		:global(.create-find-button) {
@@ -366,8 +400,8 @@
 			padding: 12px;
 		}

-		.finds-section {
-			padding: 12px;
+		.finds-sticky-header {
+			padding: 12px 12px 8px 12px;
 		}
 	}
 </style>
--- a/src/routes/api/finds/+server.ts
+++ b/src/routes/api/finds/+server.ts
@@ -107,7 +107,15 @@ export const GET: RequestHandler = async ({ url, locals }) => {
 					SELECT 1 FROM ${findLike}
 					WHERE ${findLike.findId} = ${find.id}
 					AND ${findLike.userId} = ${locals.user.id}
-				) THEN 1 ELSE 0 END`
+				) THEN 1 ELSE 0 END`,
+				isFromFriend: sql<boolean>`CASE WHEN ${
+					friendIds.length > 0
+						? sql`${find.userId} IN (${sql.join(
+								friendIds.map((id) => sql`${id}`),
+								sql`, `
+							)})`
+						: sql`FALSE`
+				} THEN 1 ELSE 0 END`
 			})
 			.from(find)
 			.innerJoin(user, eq(find.userId, user.id))
@@ -199,7 +207,8 @@ export const GET: RequestHandler = async ({ url, locals }) => {
 					...findItem,
 					profilePictureUrl: userProfilePictureUrl,
 					media: mediaWithSignedUrls,
-					isLikedByUser: Boolean(findItem.isLikedByUser)
+					isLikedByUser: Boolean(findItem.isLikedByUser),
+					isFromFriend: Boolean(findItem.isFromFriend)
 				};
 			})
 		);
--- 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	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
Zias van Nes	aa9ed77499	UI:Refactor create find modal UI and update finds list/header layout - Replace Modal with Sheet for create find modal - Redesign form fields and file upload UI - Add responsive mobile support for modal - Update FindsList to support optional title hiding - Move finds section header to sticky header in main page - Adjust styles for improved layout and responsiveness	2025-10-21 14:44:25 +02:00
Zias van Nes	e1c5846fa4	fix:friends filtering	2025-10-21 14:11:28 +02:00