Enhance category management: update adventure category assignment logic, improve category display in UI components, and add dynamic sorting for category dropdown

documentation/.vitepress/config.mts

@@ -122,6 +122,7 @@ export default defineConfig({
       },
       {
         text: "Changelogs",
+        collapsed: false,
         items: [
           {
             text: "v0.7.1",

frontend/src/lib/components/AdventureModal.svelte

@@ -405,8 +405,11 @@
 		console.log(adventure);
 		if (adventure.id === '') {
 			console.log(categories);
+			if (adventure.category?.display_name == '') {
 				if (categories.some((category) => category.name === 'general')) {
-				adventure.category = categories.find((category) => category.name === 'general') as Category;
+					adventure.category = categories.find(
+						(category) => category.name === 'general'
+					) as Category;
 				} else {
 					adventure.category = {
 						id: '',
@@ -416,6 +419,7 @@
 						user_id: ''
 					};
 				}
+			}
 			let res = await fetch('/api/adventures', {
 				method: 'POST',
 				headers: {

frontend/src/lib/components/CategoryDropdown.svelte

@@ -77,16 +77,19 @@
 				>
 			</div>
 			<div class="flex flex-wrap gap-2 mt-2">
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				{#each categories as category}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
-					<div
+				<!-- Sort the categories dynamically before rendering -->
+				{#each categories
+					.slice()
+					.sort((a, b) => (b.num_adventures || 0) - (a.num_adventures || 0)) as category}
+					<button
+						type="button"
 						class="btn btn-neutral flex items-center space-x-2"
 						on:click={() => selectCategory(category)}
+						role="option"
+						aria-selected={selected_category && selected_category.id === category.id}
 					>
 						<span>{category.display_name} {category.icon} ({category.num_adventures})</span>
-					</div>
+					</button>
 				{/each}
 			</div>
 		</div>

frontend/src/lib/components/CategoryModal.svelte

@@ -6,6 +6,8 @@
 	let modal: HTMLDialogElement;
 	import { t } from 'svelte-i18n';
 
+	import InformationSlabCircle from '~icons/mdi/information-slab-circle';
+
 	export let categories: Category[] = [];
 
 	let category_to_edit: Category | null = null;
@@ -86,6 +88,8 @@
 						<button on:click={removeCategory(category)} class="btn btn-warning btn-sm"
 							>{$t('adventures.remove')}</button
 						>
+					{:else}
+						<button class="btn btn-warning btn-sm btn-disabled">{$t('adventures.remove')}</button>
 					{/if}
 				</div>
 			</div>

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

@@ -126,7 +126,7 @@
 				on:click={togglePopup}
 			>
 				<span class="text-xl">
-					{adventure.category?.display_name + ' ' + adventure.category?.icon}
+					{adventure.category?.icon}
 				</span>
 				{#if isPopupOpen}
 					<Popup openOn="click" offset={[0, -10]} on:close={() => (isPopupOpen = false)}>