chore: Update app version to v0.5.1 and fix toast component styling

frontend/src/lib/components/AdventureCard.svelte

@@ -17,12 +17,14 @@
 	import Plus from '~icons/mdi/plus';
 	import CollectionLink from './CollectionLink.svelte';
 	import DotsHorizontal from '~icons/mdi/dots-horizontal';
+	import DeleteWarning from './DeleteWarning.svelte';
 
 	export let type: string;
 
 	export let user: User | null;
 
 	let isCollectionModalOpen: boolean = false;
+	let isWarningModalOpen: boolean = false;
 
 	let keyword: string = '';
 
@@ -136,6 +138,17 @@
 	<CollectionLink on:link={linkCollection} on:close={() => (isCollectionModalOpen = false)} />
 {/if}
 
+{#if isWarningModalOpen}
+	<DeleteWarning
+		title="Delete Adventure"
+		button_text="Delete"
+		description="Are you sure you want to delete this adventure? This action cannot be undone."
+		is_warning={false}
+		on:close={() => (isWarningModalOpen = false)}
+		on:confirm={deleteAdventure}
+	/>
+{/if}
+
 <div
 	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl text-base-content"
 >
@@ -249,7 +262,8 @@
 								id="delete_adventure"
 								data-umami-event="Delete Adventure"
 								class="btn btn-warning"
-								on:click={deleteAdventure}><TrashCan class="w-6 h-6" />Delete</button
+								on:click={() => (isWarningModalOpen = true)}
+								><TrashCan class="w-6 h-6" />Delete</button
 							>
 						</ul>
 					</div>

frontend/src/lib/components/CollectionCard.svelte

@@ -13,7 +13,8 @@
 	import { addToast } from '$lib/toasts';
 
 	import Plus from '~icons/mdi/plus';
-	import { json } from '@sveltejs/kit';
+	import DotsHorizontal from '~icons/mdi/dots-horizontal';
+	import TrashCan from '~icons/mdi/trashcan';
 	import DeleteWarning from './DeleteWarning.svelte';
 
 	const dispatch = createEventDispatcher();
@@ -69,7 +70,7 @@
 	<DeleteWarning
 		title="Delete Collection"
 		button_text="Delete"
-		description="Are you sure you want to delete this collection? This action cannot be undone."
+		description="Are you sure you want to delete this collection? This will also delete all of the linked adventures. This action cannot be undone."
 		is_warning={true}
 		on:close={() => (isWarningModalOpen = false)}
 		on:confirm={deleteCollection}
@@ -77,7 +78,7 @@
 {/if}
 
 <div
-	class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
+	class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl text-base-content"
 >
 	<div class="card-body">
 		<div class="flex justify-between">
@@ -111,17 +112,41 @@
 			</p>{/if}
 
 		<div class="card-actions justify-end">
+			<div class="dropdown dropdown-end">
+				<div tabindex="0" role="button" class="btn btn-neutral">
+					<DotsHorizontal class="w-6 h-6" />
+				</div>
+				<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+				<ul
+					tabindex="0"
+					class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
+				>
 					{#if type != 'link'}
-				<button on:click={() => (isWarningModalOpen = true)} class="btn btn-secondary"
-					><TrashCanOutline class="w-5 h-5 mr-1" /></button
+						<button
+							class="btn btn-neutral mb-2"
+							on:click={() => goto(`/collections/${collection.id}`)}
+							><Launch class="w-5 h-5 mr-1" />Open Details</button
 						>
 						{#if !collection.is_archived}
-					<button class="btn btn-primary" on:click={editAdventure}>
-						<FileDocumentEdit class="w-6 h-6" />
+							<button class="btn btn-neutral mb-2" on:click={editAdventure}>
+								<FileDocumentEdit class="w-6 h-6" />Edit Collection
 							</button>
 						{/if}
-				<button class="btn btn-primary" on:click={() => goto(`/collections/${collection.id}`)}
-					><Launch class="w-5 h-5 mr-1" /></button
+						{#if collection.is_archived}
+							<button class="btn btn-neutral mb-2" on:click={() => archiveCollection(false)}>
+								<ArchiveArrowUp class="w-6 h-6 mr-1" />Unarchive
+							</button>
+						{:else}
+							<button class="btn btn-neutral mb-2" on:click={() => archiveCollection(true)}>
+								<ArchiveArrowDown class="w-6 h-6 mr" />Archive
+							</button>
+						{/if}
+						<button
+							id="delete_adventure"
+							data-umami-event="Delete Adventure"
+							class="btn btn-warning"
+							on:click={() => (isWarningModalOpen = true)}
+							><TrashCan class="w-6 h-6" />Delete</button
 						>
 					{/if}
 					{#if type == 'link'}
@@ -129,15 +154,8 @@
 							<Plus class="w-5 h-5 mr-1" />
 						</button>
 					{/if}
-			{#if collection.is_archived}
-				<button class="btn btn-primary" on:click={() => archiveCollection(false)}>
-					<ArchiveArrowUp class="w-5 h-5 mr-1" />
-				</button>
-			{:else}
-				<button class="btn btn-primary" on:click={() => archiveCollection(true)}>
-					<ArchiveArrowDown class="w-5 h-5 mr" />
-				</button>
-			{/if}
+				</ul>
+			</div>
 		</div>
 	</div>
 </div>

frontend/src/lib/components/Toast.svelte

@@ -11,8 +11,25 @@
 
 <div class="toast toast-top toast-end z-50 min-w-20">
 	{#each toastList as { type, message, id, duration }}
-		<div class="alert alert-{type}">
+		{#if type == 'success'}
+			<div class="alert alert-success">
 				<span>{message}</span>
 			</div>
+		{/if}
+		{#if type == 'error'}
+			<div class="alert alert-error">
+				<span>{message}</span>
+			</div>
+		{/if}
+		{#if type == 'info'}
+			<div class="alert alert-info">
+				<span>{message}</span>
+			</div>
+		{/if}
+		{#if type == 'warning'}
+			<div class="alert alert-warning">
+				<span>{message}</span>
+			</div>
+		{/if}
 	{/each}
 </div>

frontend/src/lib/config.ts

@@ -1,4 +1,4 @@
-export let appVersion = 'Web v0.5.0';
-export let versionChangelog = 'https://github.com/seanmorley15/AdventureLog/releases/tag/v0.5.0';
+export let appVersion = 'Web v0.5.1';
+export let versionChangelog = 'https://github.com/seanmorley15/AdventureLog/releases/tag/v0.5.1';
 export let appTitle = 'AdventureLog';
 export let copyrightYear = '2024';

frontend/src/routes/search/+page.server.ts

@@ -1,11 +1,12 @@
-import type { Adventure } from '$lib/types';
+import type { Adventure, OpenStreetMapPlace } from '$lib/types';
+import { fail } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
+import { appVersion } from '$lib/config';
 
 const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
 const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
 
 export const load = (async (event) => {
-	// get url param query
 	const query = event.url.searchParams.get('query');
 	const property = event.url.searchParams.get('property') || 'all';
 
@@ -23,19 +24,33 @@ export const load = (async (event) => {
 		}
 	);
 
-	if (res.ok) {
-		let data = await res.json();
-		console.log('Search data:', data);
-
-		return {
-			props: {
-				adventures: data,
-				query
-			}
-		};
-	} else {
+	if (!res.ok) {
 		console.error('Failed to fetch search data');
 		let error = await res.json();
 		return { error: error.error };
 	}
+
+	let adventures: Adventure[] = await res.json();
+
+	let osmRes = await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=jsonv2`, {
+		headers: {
+			'User-Agent': `AdventureLog / ${appVersion} `
+		}
+	});
+
+	if (!osmRes.ok) {
+		console.error('Failed to fetch OSM data');
+		let error = await res.json();
+		return { error: error.error };
+	}
+
+	let osmData = (await osmRes.json()) as OpenStreetMapPlace[];
+
+	return {
+		props: {
+			adventures,
+			query,
+			osmData
+		}
+	};
 }) satisfies PageServerLoad;

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

@@ -32,28 +32,6 @@
 	onMount(() => {
 		const urlParams = new URLSearchParams(window.location.search);
 		query = urlParams.get('query');
-
-		fetchData();
-	});
-
-	async function fetchData() {
-		let res = await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=jsonv2`, {
-			headers: {
-				'User-Agent': `AdventureLog / ${appVersion} `
-			}
-		});
-		const data = await res.json();
-		osmResults = data;
-	}
-
-	onMount(async () => {
-		let res = await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=jsonv2`, {
-			headers: {
-				'User-Agent': `AdventureLog / ${appVersion} `
-			}
-		});
-		const data = await res.json();
-		osmResults = data;
 	});
 
 	console.log(data);
@@ -73,12 +51,15 @@
 			publicAdventures = publicAdventures.filter(
 				(adventure) => adventure.user_id !== data.user?.pk
 			);
+
+			if (data.props.osmData) {
+				osmResults = data.props.osmData;
+			}
 		}
 	}
 
 	let adventureToEdit: Adventure;
 	let isEditModalOpen: boolean = false;
-	let isShowingCreateModal: boolean = false;
 
 	function editAdventure(event: CustomEvent<Adventure>) {
 		adventureToEdit = event.detail;
@@ -108,7 +89,7 @@
 	<NotFound error={data.error} />
 {/if}
 
-{#if myAdventures.length !== 0 && publicAdventures.length !== 0}
+{#if myAdventures.length !== 0}
 	<h2 class="text-center font-bold text-2xl mb-4">AdventureLog Results</h2>
 	<div class="flex items-center justify-center mt-2 mb-2">
 		<div class="join">