Work on dotsmenu

src/UI/Base/DotMenu.svelte

@@ -1,27 +1,58 @@
 <script lang="ts">
-  import DotsCircleHorizontal from "@rgossiaux/svelte-heroicons/solid/DotsCircleHorizontal"
-  import { Dropdown } from "flowbite-svelte"
-  import { TrashIcon } from "@babeard/svelte-heroicons/mini"
-  import SidebarUnit from "./SidebarUnit.svelte"
   import { UIEventSource } from "../../Logic/UIEventSource"
+  import DotsCircleHorizontal from "@rgossiaux/svelte-heroicons/solid/DotsCircleHorizontal"
 
   /**
    * A menu, opened by a dot
    */
   export let dotColor = "var(--background-interactive)"
   export let placement: "left" | "right" | "top" | "bottom" = "left"
+  export let open = new UIEventSource(false)
 
-  export let isOpen : UIEventSource<boolean> = new UIEventSource<boolean>(false)
-  let _isOpen = isOpen.data
-  $: {
-    console.log("is open?", _isOpen)
-    isOpen.set(_isOpen)
+  function toggle() {
+    open.set(!open.data)
   }
 </script>
 
-<DotsCircleHorizontal class="w-6 h-6 dots-menu-themes transition-colors"  color={$isOpen ? "black": "var(--interactive-background)"} />
-<Dropdown placement="left" bind:open={_isOpen} triggeredBy=".dots-menu-themes" containerClass="p-1 border border-2 border-gray button-unstyled">
-  <SidebarUnit>
+<div class="relative" style="z-index: 50">
+  <div
+    class="sidebar-unit absolute right-0 top-0 collapsable normal-background button-unstyled border-2 border-gray-300"
+    class:collapsed={!$open}>
     <slot />
-  </SidebarUnit>
-</Dropdown>
+  </div>
+  <DotsCircleHorizontal class={ `absolute top-0 right-0 w-6 h-6 dots-menu transition-colors ${$open?"dots-menu-opened":""}`} on:click={toggle} />
+</div>
+
+
+<style>
+    .dots-menu{
+        z-index: 50;
+    }
+    :global(.dots-menu > path) {
+        fill: var(--interactive-background);
+        transition: fill 350ms linear;
+
+    }
+
+    :global(.dots-menu:hover > path, .dots-menu-opened > path) {
+        fill: var(--interactive-foreground)
+    }
+
+    .collapsable {
+        max-width: 100rem;
+        max-height: 100rem;
+        transition: max-width 500ms ease-in-out, border 400ms linear;
+        overflow: hidden;
+        flex-wrap: nowrap;
+        text-wrap: none;
+        width: max-content;
+        box-shadow: #ccc ;
+        white-space: nowrap;
+    }
+
+    .collapsed {
+        max-width: 0;
+        border: 2px solid #00000000
+    }
+
+</style>

src/UI/Search/SearchResults.svelte

@@ -91,16 +91,25 @@
 
   {#if $searchTerm.length == 0 && $recentlySeen?.length > 0}
     <SidebarUnit>
-      <h3 class="m-2">
-        <Tr t={Translations.t.general.search.recents} />
-      </h3>
+      <div class="flex justify-between">
+
+        <h3 class="m-2">
+          <Tr t={Translations.t.general.search.recents} />
+        </h3>
+        <DotMenu>
+          <button on:click={() => {state.searchState.recentlySearched.seenThisSession.set([])}}>
+            <TrashIcon />
+            Delete search history
+          </button>
+          <button on:click={() => state.guistate.openUsersettings("sync-visited-locations")}>
+            <CogIcon />
+            Edit sync settings
+          </button>
+        </DotMenu>
+      </div>
       {#each $recentlySeen as entry (entry)}
         <SearchResultSvelte {entry} {state} on:select />
       {/each}
-      <button class="as-link flex self-end" on:click={() => {recentlySeen.set([])}}>
-        <TrashIcon class="w-4 h-4" />
-        Delete history
-      </button>
     </SidebarUnit>
   {/if}
 
@@ -116,8 +125,8 @@
             <TrashIcon />
             Delete earlier visited themes
           </button>
-          <button>
-            <CogIcon/>
+          <button on:click={() => state.guistate.openUsersettings("sync-visited-themes")}>
+            <CogIcon />
             Edit sync settings
           </button>
         </DotMenu>