Enhance adventure management: add error handling for category fetch, implement unique email constraint in user model, and update adventure save logic to ensure category assignment

frontend/src/lib/components/AdventureModal.svelte

@@ -2,6 +2,7 @@
 	import { createEventDispatcher } from 'svelte';
 	import type {
 		Adventure,
+		Category,
 		Collection,
 		OpenStreetMapPlace,
 		Point,
@@ -17,7 +18,7 @@
 	export let latitude: number | null = null;
 	export let collection: Collection | null = null;
 
-	import { DefaultMarker, FillLayer, MapEvents, MapLibre } from 'svelte-maplibre';
+	import { DefaultMarker, MapEvents, MapLibre } from 'svelte-maplibre';
 
 	let query: string = '';
 	let places: OpenStreetMapPlace[] = [];
@@ -25,9 +26,11 @@
 	let warningMessage: string = '';
 	let constrainDates: boolean = false;
 
+	let categories: Category[] = [];
+
 	import ActivityComplete from './ActivityComplete.svelte';
 	import { appVersion } from '$lib/config';
-	import { ADVENTURE_TYPES } from '$lib';
+	import CategoryDropdown from './CategoryDropdown.svelte';
 
 	let wikiError: string = '';
 
@@ -53,13 +56,7 @@
 		images: [],
 		user_id: null,
 		collection: collection?.id || null,
-		category: {
-			id: '',
-			name: '',
-			display_name: '',
-			icon: '',
-			user_id: ''
-		}
+		category: ''
 	};
 
 	export let adventureToEdit: Adventure | null = null;
@@ -81,13 +78,7 @@
 		collection: adventureToEdit?.collection || collection?.id || null,
 		visits: adventureToEdit?.visits || [],
 		is_visited: adventureToEdit?.is_visited || false,
-		category: adventureToEdit?.category || {
-			id: '',
-			name: '',
-			display_name: '',
-			icon: '',
-			user_id: ''
-		}
+		category: adventureToEdit?.category || ''
 	};
 
 	let markers: Point[] = [];
@@ -336,6 +327,12 @@
 		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
 		modal.showModal();
 		console.log('open');
+		let categoryFetch = await fetch('/api/categories/categories');
+		if (categoryFetch.ok) {
+			categories = await categoryFetch.json();
+		} else {
+			addToast('error', $t('adventures.category_fetch_error'));
+		}
 	});
 
 	function close() {
@@ -465,12 +462,8 @@
 							</div>
 							<div>
 								<label for="link">{$t('adventures.category')}</label><br />
-								<select class="select select-bordered w-full max-w-xs" bind:value={adventure.type}>
-									<option disabled selected>{$t('adventures.select_adventure_category')}</option>
-									{#each ADVENTURE_TYPES as type}
-										<option value={type.type}>{type.label}</option>
-									{/each}
-								</select>
+
+								<CategoryDropdown bind:categories bind:category_id={adventure.category} />
 							</div>
 							<div>
 								<label for="rating">{$t('adventures.rating')}</label><br />

frontend/src/lib/components/CategoryDropdown.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Category } from '$lib/types';
+	import { t } from 'svelte-i18n';
+
+	export let categories: Category[] = [];
+	let selected_category: Category | null = null;
+
+	export let category_id:
+		| {
+				id: string;
+				name: string;
+				display_name: string;
+				icon: string;
+				user_id: string;
+		  }
+		| string;
+	let isOpen = false;
+
+	function toggleDropdown() {
+		isOpen = !isOpen;
+	}
+
+	function selectCategory(category: Category) {
+		selected_category = category;
+		category_id = category.id;
+		isOpen = false;
+	}
+
+	function removeCategory(categoryName: string) {
+		categories = categories.filter((category) => category.name !== categoryName);
+		if (selected_category && selected_category.name === categoryName) {
+			selected_category = null;
+		}
+	}
+
+	// Close dropdown when clicking outside
+	let dropdownRef: HTMLDivElement;
+	onMount(() => {
+		if (category_id) {
+			// when category_id is passed, it will be the full object not just the id that is why we can use it directly as selected_category
+			selected_category = category_id as Category;
+		}
+		const handleClickOutside = (event: MouseEvent) => {
+			if (dropdownRef && !dropdownRef.contains(event.target as Node)) {
+				isOpen = false;
+			}
+		};
+		document.addEventListener('click', handleClickOutside);
+		return () => {
+			document.removeEventListener('click', handleClickOutside);
+		};
+	});
+</script>
+
+<div class="mt-2 relative" bind:this={dropdownRef}>
+	<button type="button" class="btn btn-outline w-full text-left" on:click={toggleDropdown}>
+		{selected_category
+			? selected_category.display_name + ' ' + selected_category.icon
+			: 'Select Category'}
+	</button>
+
+	{#if isOpen}
+		<div class="absolute z-10 w-full mt-1 bg-base-300 rounded shadow-lg p-2 flex flex-wrap gap-2">
+			{#each categories as category}
+				<div
+					class="btn btn-neutral flex items-center space-x-2"
+					on:click={() => selectCategory(category)}
+				>
+					<span>{category.display_name} {category.icon}</span>
+					<button
+						type="button"
+						class="btn btn-xs btn-error"
+						on:click|stopPropagation={() => removeCategory(category.name)}
+					>
+						{$t('adventures.remove')}
+					</button>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>