implements trail sharing

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

@@ -8,6 +8,7 @@
 
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
+    import { fly } from "svelte/transition";
 
     export let items: DropdownItem[] = [];
     export let size: string = "regular";
@@ -30,26 +31,38 @@
         dispatch("change", item);
         closeMenu();
     }
+
+    function handleWindowClick(e: MouseEvent) {
+        if ((e.target as HTMLElement).parentElement?.classList.contains("dropdown-toggle")) {
+            return;
+        }
+
+        isOpen = false;
+    }
 </script>
 
-<svelte:window on:mouseup={() => (isOpen = false)} />
+<svelte:window on:mouseup={handleWindowClick} />
 
 <div class="dropdown relative">
-    <slot {toggleMenu}>
-        <button
-            class="btn-icon flex items-center justify-center"
-            on:click={toggleMenu}
-            type="button"
-        >
-            <i class="fa fa-ellipsis-vertical text-{size}"></i>
-        </button>
-    </slot>
+    <div class="dropdown-toggle">
+        <slot {toggleMenu}>
+            <button
+                class="btn-icon flex items-center justify-center"
+                on:click={toggleMenu}
+                type="button"
+            >
+                <i class="fa fa-ellipsis-vertical text-{size}"></i>
+            </button>
+        </slot>
+    </div>
 
     {#if isOpen}
         <ul
             class="menu absolute bg-menu-background border border-input-border rounded-l-xl rounded-b-xl shadow-md right-0 overflow-hidden mt-2"
             class:none={isOpen}
             style="z-index: 1001"
+            in:fly={{ y: -10, duration: 150 }}
+            out:fly={{ y: -10, duration: 150 }}
         >
             {#each items as item}
                 <li

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

@@ -28,7 +28,7 @@
     class="relative w-full {size} max-h-full rounded-xl text-content"
 >
     <!-- Modal content -->
-    <div class="relative bg-background shadow">
+    <div class="relative bg-background shadow rounded-xl">
         <!-- Modal header -->
         <div
             class="flex items-center justify-between p-4 md:p-5 border-b border-separator rounded-t"

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

@@ -97,7 +97,9 @@
                     on:mousedown|stopPropagation={() => handleItemClick(item)}
                     on:keydown|stopPropagation={() => handleItemClick(item)}
                 >
-                    <i class="fa fa-{item.icon} mr-6"></i>
+                    <slot name="item-header" {item}>
+                        <i class="fa fa-{item.icon} mr-6"></i>
+                    </slot>
 
                     <div>
                         <p>{item.text}</p>