finishes profile page

web/src/lib/components/base/calendar.svelte

@@ -2,7 +2,7 @@
 	import type { SummitLog } from "$lib/models/summit_log";
 	import { createEventDispatcher } from "svelte";
 	import { isSameDay, isToday } from "../../util/date_util";
-
+	import { _ } from "svelte-i18n";
 	export let logs: SummitLog[] = [];
 	export let colorMap: Record<string, string> = {};
 
@@ -15,6 +15,7 @@
 			start: Date;
 			end: Date;
 		};
+		click: Date;
 	}>();
 
 	const weekdays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
@@ -74,9 +75,11 @@
 					i + 1 - firstDay,
 				);
 				const today = isToday(date);
+
 				const logAtDate = logs.find((l) =>
 					isSameDay(date, new Date(l.date)),
 				);
+
 				a.push({ date: date, today: today, log: logAtDate });
 			}
 		}
@@ -108,6 +111,21 @@
 			end: new Date(currentYear, currentMonth + 1, 0),
 		});
 	}
+
+	function colorKey(i: number) {
+		return $_(
+			currentMonthArray[i]?.log?.expand.trails_via_summit_logs?.at(0)
+				?.expand?.category?.name ?? "",
+		);
+	}
+
+	function handleDateClick(date?: Date) {
+		if (!date) {
+			return;
+		}
+
+		dispatch("click", date);
+	}
 </script>
 
 <div class="calendar-header w-full flex items-center justify-between mb-6">
@@ -134,18 +152,14 @@
 	</div>
 	<div class="grid grid-cols-7 grid-rows-6" style="aspect-ratio: 1.17/1">
 		{#each { length: 42 } as _, i}
-			<div
-				class="calendar-day flex items-center justify-center rounded-xl cursor-pointer"
+			<button
+				class="calendar-day flex items-center justify-center rounded-xl"
+				on:click={() => handleDateClick(currentMonthArray[i]?.date)}
 				class:today={currentMonthArray[i]?.today}
-				style="background-color: {colorMap[
-					currentMonthArray[
-						i
-					]?.log?.expand.trails_via_summit_logs?.at(0)?.expand
-						?.category?.name ?? ''
-				] ?? ''}"
+				style="background-color: {colorMap[colorKey(i)] ?? ''}"
 			>
 				{currentMonthArray[i]?.date?.getDate() ?? ""}
-			</div>
+			</button>
 		{/each}
 	</div>
 </div>

web/src/lib/components/base/multi_select.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    import { writable } from "svelte/store";
+    import type { SelectItem } from "./select.svelte";
+    import { createEventDispatcher } from "svelte";
+
+    export let items: SelectItem[] = [];
+    export let value: SelectItem[] = [];
+    export let label: string = "";
+    export let name: string = "";
+    export let placeholder: string = "";
+
+    let showDropdown = false;
+    let dropdownRef;
+
+    const dispatch = createEventDispatcher();
+
+    function toggleItem(item: SelectItem) {
+        if (value.includes(item)) {
+            value = value.filter((i) => i !== item);
+        } else {
+            value = [...value, item];
+        }
+
+        dispatch("change", value);
+    }
+
+    function removeItem(item: SelectItem) {
+        value = value.filter((i) => i !== item);
+        dispatch("change", value);
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="relative max-w-full">
+    {#if label.length}
+        <label for={name} class="text-sm font-medium pb-1 block">
+            {label}
+        </label>
+    {/if}
+    <button
+        class="min-w-44 flex flex-wrap items-center gap-2 border bg-input-background min-h-[50px] p-3 rounded-md transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0"
+        on:click={() => (showDropdown = !showDropdown)}
+    >
+        {#if value.length === 0}
+            <span class="text-gray-400">{placeholder}</span>
+        {/if}
+        {#each value as item}
+            <div
+                class="bg-primary text-white px-2 py-1 rounded-full flex items-center gap-1"
+            >
+                <span class="text-sm">{item.text}</span>
+                <button
+                    on:click|stopPropagation={() => removeItem(item)}
+                    class="text-white hover:bg-primary-hover rounded-full w-4 h-4 flex items-center justify-center"
+                >
+                    <i class="fa fa-close"></i>
+                </button>
+            </div>
+        {/each}
+    </button>
+
+    <!-- Dropdown menu -->
+    {#if showDropdown}
+        <div
+            bind:this={dropdownRef}
+            class="absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded shadow-lg max-h-40 overflow-y-auto"
+        >
+            {#each items as item}
+                <button
+                    on:click={() => toggleItem(item)}
+                    class="px-3 py-2 hover:bg-blue-100 cursor-pointer flex justify-between items-center w-full"
+                >
+                    <span>{item.text}</span>
+                    {#if value.includes(item)}
+                        <div class="ml-auto">
+                            <i class="fa fa-check"></i>
+                        </div>
+                    {/if}
+                </button>
+            {/each}
+        </div>
+    {/if}
+</div>