Refactor CategoryFilterDropdown and update location page integration

- Enhanced error handling in CategoryFilterDropdown for category fetching, ensuring a fallback to an empty array on failure.
- Improved sorting logic to handle potential undefined display names.
- Updated location page to bind category types correctly and streamline the category change event handling.
- Removed unnecessary variables and improved code readability in the locations component.

frontend/src/lib/components/CategoryFilterDropdown.svelte

@@ -12,13 +12,18 @@
 	$: sortedAdventureTypes = [...adventure_types].sort((a, b) => {
 		const usageDiff = (b.num_locations || 0) - (a.num_locations || 0);
 		if (usageDiff !== 0) return usageDiff;
-		return a.display_name.localeCompare(b.display_name);
+		return (a.display_name || '').localeCompare(b.display_name || '');
 	});
 
 	onMount(async () => {
-		const categoryFetch = await fetch('/api/categories');
-		const categoryData = await categoryFetch.json();
-		adventure_types = categoryData;
+		try {
+			const categoryFetch = await fetch('/api/categories');
+			const categoryData = await categoryFetch.json();
+			adventure_types = Array.isArray(categoryData) ? categoryData : [];
+		} catch (err) {
+			console.error('Failed to load categories:', err);
+			adventure_types = [];
+		}
 	});
 
 	$: {
@@ -26,20 +31,17 @@
 	}
 
 	function clearTypes() {
-		types = '';
 		types_arr = [];
-		dispatch('change', { types });
+		dispatch('change', { types: '' });
 	}
 
 	function toggleSelect(type: string) {
-		if (types_arr.indexOf(type) > -1) {
+		if (types_arr.includes(type)) {
 			types_arr = types_arr.filter((item) => item !== type);
 		} else {
-			types_arr.push(type);
+			types_arr = [...types_arr, type];
 		}
-		types_arr = types_arr.filter((item) => item !== '');
-		types = types_arr.join(',');
-		dispatch('change', { types });
+		dispatch('change', { types: types_arr.join(',') });
 	}
 </script>
 

frontend/src/routes/locations/+page.svelte

@@ -5,7 +5,6 @@
 	import CategoryFilterDropdown from '$lib/components/CategoryFilterDropdown.svelte';
 	import CategoryModal from '$lib/components/CategoryModal.svelte';
 	import type { Location } from '$lib/types';
-	import { tick } from 'svelte';
 	import { t } from 'svelte-i18n';
 
 	import Plus from '~icons/mdi/plus';
@@ -24,12 +23,11 @@
 	let adventures: Location[] = [];
 	let count = 0;
 	let totalPages = 1;
-	let typeString = '';
 
 	$: adventures = data?.props?.adventures ?? [];
 	$: count = data?.props?.count ?? 0;
 	$: totalPages = Math.max(1, Math.ceil(count / resultsPerPage));
-	$: typeString = $page.url.searchParams.get('types') ?? '';
+	$: categoryTypes = $page.url.searchParams.get('types') ?? '';
 	$: orderBy = $page.url.searchParams.get('order_by') || 'updated_at';
 	$: orderDirection = $page.url.searchParams.get('order_direction') || 'asc';
 	$: isVisitedFilter = $page.url.searchParams.get('is_visited') || 'all';
@@ -70,9 +68,7 @@
 		const url = new URL($page.url);
 
 		const types =
-			overrides.types !== undefined
-				? overrides.types
-				: (url.searchParams.get('types') ?? typeString);
+			overrides.types !== undefined ? overrides.types : (url.searchParams.get('types') ?? '');
 		const nextIsVisited = overrides.is_visited ?? url.searchParams.get('is_visited') ?? 'all';
 		const nextOrderBy = overrides.order_by ?? url.searchParams.get('order_by') ?? 'updated_at';
 		const nextOrderDirection =
@@ -103,9 +99,8 @@
 		await invalidate('locations:list');
 	}
 
-	async function onCategoryChange() {
-		await tick();
-		await applyLocationFilters({ types: typeString });
+	async function onCategoryChange(event: CustomEvent<{ types: string }>) {
+		await applyLocationFilters({ types: event.detail.types });
 	}
 
 	async function updateVisitedFilter(value: string) {
@@ -288,7 +283,12 @@
 
 		<!-- Sidebar -->
 		<div class="drawer-side z-50">
-			<label for="my-drawer" class="drawer-overlay"></label>
+			<label
+				for="my-drawer"
+				class="drawer-overlay lg:hidden"
+				class:pointer-events-none={!sidebarOpen}
+				aria-hidden={!sidebarOpen}
+			></label>
 			<div class="w-80 min-h-full bg-base-100 shadow-2xl">
 				<div class="p-6">
 					<div class="flex items-center gap-3 mb-8">
@@ -304,7 +304,7 @@
 								<Tag class="w-5 h-5" />
 								{$t('adventures.categories')}
 							</h3>
-							<CategoryFilterDropdown bind:types={typeString} on:change={onCategoryChange} />
+							<CategoryFilterDropdown types={categoryTypes} on:change={onCategoryChange} />
 							<button
 								type="button"
 								on:click={() => (is_category_modal_open = true)}