feat: Add hotel management functionality with serializer and UI integration

frontend/src/lib/components/HotelModal.svelte

@@ -6,6 +6,7 @@
 	import { appVersion } from '$lib/config';
 	import { DefaultMarker, MapEvents, MapLibre } from 'svelte-maplibre';
 	import type { Collection, Hotel, ReverseGeocode, OpenStreetMapPlace, Point } from '$lib/types';
+	import LocationDropdown from './LocationDropdown.svelte';
 
 	const dispatch = createEventDispatcher();
 
@@ -17,7 +18,7 @@
 	let hotel: Hotel = { ...initializeHotel(hotelToEdit) };
 	let fullStartDate: string = '';
 	let fullEndDate: string = '';
-	let reverseGeocodePlace: ReverseGeocode | null = null;
+	let reverseGeocodePlace: any | null = null;
 	let query: string = '';
 	let places: OpenStreetMapPlace[] = [];
 	let noPlaces: boolean = false;
@@ -83,34 +84,6 @@
 		if (event.key === 'Escape') close();
 	}
 
-	// Geocode location search
-	async function geocode(e: Event | null) {
-		if (e) e.preventDefault();
-		if (!query) {
-			alert($t('adventures.no_location'));
-			return;
-		}
-		const res = await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=jsonv2`, {
-			headers: { 'User-Agent': `AdventureLog / ${appVersion}` }
-		});
-		const data = (await res.json()) as OpenStreetMapPlace[];
-		places = data;
-		noPlaces = data.length === 0;
-	}
-
-	// Set custom location flag based on hotel location
-	$: is_custom_location = hotel.location !== (reverseGeocodePlace?.display_name || '');
-
-	// Add marker to map
-	async function addMarker(e: CustomEvent<any>) {
-		markers = [{ lngLat: e.detail.lngLat, name: '', location: '', activity_type: '' }];
-	}
-
-	// Clear all markers from the map
-	function clearMap() {
-		markers = [];
-	}
-
 	// Handle form submission (save hotel)
 	async function handleSubmit(event: Event) {
 		event.preventDefault();
@@ -325,106 +298,7 @@
 				</div>
 
 				<!-- Location Information -->
-				<div class="collapse collapse-plus bg-base-200 mb-4">
-					<input type="checkbox" />
-					<div class="collapse-title text-xl font-medium">
-						{$t('adventures.location_information')}
-					</div>
-					<div class="collapse-content">
-						<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> -->
-						<div>
-							<label for="latitude">{$t('adventures.location')}</label><br />
-							<div class="flex items-center">
-								<input
-									type="text"
-									id="location"
-									name="location"
-									bind:value={hotel.location}
-									class="input input-bordered w-full"
-								/>
-								{#if is_custom_location}
-									<button
-										class="btn btn-primary ml-2"
-										type="button"
-										on:click={() => (hotel.location = reverseGeocodePlace?.display_name)}
-										>{$t('adventures.set_to_pin')}</button
-									>
-								{/if}
-							</div>
-						</div>
-
-						<div>
-							<form on:submit={geocode} class="mt-2">
-								<input
-									type="text"
-									placeholder={$t('adventures.search_for_location')}
-									class="input input-bordered w-full max-w-xs mb-2"
-									id="search"
-									name="search"
-									bind:value={query}
-								/>
-								<button class="btn btn-neutral -mt-1" type="submit">{$t('navbar.search')}</button>
-								<button class="btn btn-neutral -mt-1" type="button" on:click={clearMap}
-									>{$t('adventures.clear_map')}</button
-								>
-							</form>
-						</div>
-						{#if places.length > 0}
-							<div class="mt-4 max-w-full">
-								<h3 class="font-bold text-lg mb-4">{$t('adventures.search_results')}</h3>
-
-								<div class="flex flex-wrap">
-									{#each places as place}
-										<button
-											type="button"
-											class="btn btn-neutral mb-2 mr-2 max-w-full break-words whitespace-normal text-left"
-											on:click={() => {
-												markers = [
-													{
-														lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
-														location: place.display_name,
-														name: place.name,
-														activity_type: place.type
-													}
-												];
-											}}
-										>
-											{place.display_name}
-										</button>
-									{/each}
-								</div>
-							</div>
-						{:else if noPlaces}
-							<p class="text-error text-lg">{$t('adventures.no_results')}</p>
-						{/if}
-						<!-- </div> -->
-						<div>
-							<MapLibre
-								style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
-								class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full rounded-lg"
-								standardControls
-							>
-								<!-- MapEvents gives you access to map events even from other components inside the map,
-where you might not have access to the top-level `MapLibre` component. In this case
-it would also work to just use on:click on the MapLibre component itself. -->
-								<MapEvents on:click={addMarker} />
-
-								{#each markers as marker}
-									<DefaultMarker lngLat={marker.lngLat} />
-								{/each}
-							</MapLibre>
-						</div>
-					</div>
-				</div>
-
-				<div class="collapse collapse-plus bg-base-200 mb-4">
-					<input type="checkbox" checked />
-					<div class="collapse-title text-xl font-medium">
-						{$t('adventures.location_information')}
-					</div>
-
-					<div class="collapse-content"></div>
-				</div>
+				<LocationDropdown bind:item={hotel} />
 
 				<!-- Form Actions -->
 				<div class="mt-4">