From c35795144e3f2928cdc6a2ea167a0ecd79137ff6 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 17 Aug 2024 17:34:52 -0400
Subject: [PATCH] chore: Refactor CollectionCard component and improve dropdown
 menu styling

---
 .../src/lib/components/CollectionCard.svelte  | 87 ++++++++++---------
 .../src/lib/components/EditAdventure.svelte   | 11 +++
 .../src/routes/adventures/[id]/+page.svelte   | 21 -----
 3 files changed, 55 insertions(+), 64 deletions(-)

diff --git a/frontend/src/lib/components/CollectionCard.svelte b/frontend/src/lib/components/CollectionCard.svelte
index df07f46..0270eb7 100644
--- a/frontend/src/lib/components/CollectionCard.svelte
+++ b/frontend/src/lib/components/CollectionCard.svelte
@@ -112,50 +112,51 @@
 			</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" />
+			{#if type == 'link'}
+				<button class="btn btn-primary" on:click={() => dispatch('link', collection.id)}>
+					<Plus class="w-5 h-5 mr-1" />
+				</button>
+			{:else}
+				<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
+								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-neutral mb-2" on:click={editAdventure}>
+									<FileDocumentEdit class="w-6 h-6" />Edit Collection
+								</button>
+							{/if}
+							{#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}
+					</ul>
 				</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
-							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-neutral mb-2" on:click={editAdventure}>
-								<FileDocumentEdit class="w-6 h-6" />Edit Collection
-							</button>
-						{/if}
-						{#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'}
-						<button class="btn btn-primary" on:click={() => dispatch('link', collection.id)}>
-							<Plus class="w-5 h-5 mr-1" />
-						</button>
-					{/if}
-				</ul>
-			</div>
+			{/if}
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/EditAdventure.svelte
index 23e3872..985ef5b 100644
--- a/frontend/src/lib/components/EditAdventure.svelte
+++ b/frontend/src/lib/components/EditAdventure.svelte
@@ -32,6 +32,17 @@
 
 	images = adventureToEdit.images || [];
 
+	if (adventureToEdit.longitude && adventureToEdit.latitude) {
+		markers = [
+			{
+				lngLat: { lng: adventureToEdit.longitude, lat: adventureToEdit.latitude },
+				location: adventureToEdit.location || '',
+				name: adventureToEdit.name,
+				activity_type: ''
+			}
+		];
+	}
+
 	if (longitude && latitude) {
 		adventureToEdit.latitude = latitude;
 		adventureToEdit.longitude = longitude;
diff --git a/frontend/src/routes/adventures/[id]/+page.svelte b/frontend/src/routes/adventures/[id]/+page.svelte
index 6b9ff2a..bbb0afb 100644
--- a/frontend/src/routes/adventures/[id]/+page.svelte
+++ b/frontend/src/routes/adventures/[id]/+page.svelte
@@ -98,18 +98,6 @@
 		<main class="flex-1">
 			<div class="max-w-5xl mx-auto p-4 md:p-6 lg:p-8">
 				<div class="grid gap-8">
-					<!-- {#if adventure.images && adventure.images.length > 0}
-						<div>
-							<img
-								src={adventure.images[0].image}
-								alt={adventure.name}
-								width="1200"
-								height="600"
-								class="w-full h-auto object-cover rounded-lg"
-								style="aspect-ratio: 1200 / 600; object-fit: cover;"
-							/>
-						</div>
-					{/if} -->
 					{#if adventure.images && adventure.images.length > 0}
 						<div class="carousel w-full">
 							{#each adventure.images as image, i}
@@ -136,21 +124,12 @@
 								</div>
 							{/each}
 						</div>
-					{:else}
-						<!-- svelte-ignore a11y-img-redundant-alt -->
-						<img
-							src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}
-							alt="No image available"
-							class="w-full h-48 object-cover"
-						/>
 					{/if}
-
 					<div class="grid gap-4">
 						<div class="flex items-center justify-between">
 							<div>
 								<h1 class="text-4xl mt-2 font-bold">{adventure.name}</h1>
 							</div>
-
 							<div class="flex items-center gap-1">
 								{#if adventure.rating !== undefined && adventure.rating !== null}
 									<div class="flex justify-center items-center">