Search: use 'searchbar' where applicable, refactoring

src/UI/Base/DrawerRight.svelte

@@ -33,7 +33,7 @@
         rightOffset="inset-y-0 right-0"
         bind:hidden={hidden}>
 
-  <div class="normal-background h-screen">
+  <div class="low-interaction h-screen">
     <div class="h-full" style={`padding-top: ${height}px`}>
       <div class="flex flex-col h-full overflow-y-auto">
         <slot />

src/UI/Base/Searchbar.svelte

@@ -15,18 +15,35 @@
   $: value.set(_value)
 
   const dispatch = createEventDispatcher<{ search }>()
-  export let placeholder: Translation =  Translations.t.general.search.search
+  export let placeholder: Translation = Translations.t.general.search.search
+  export let isFocused: UIEventSource<boolean> = undefined
+  let inputElement: HTMLInputElement
+
+  isFocused?.addCallback(focussed => {
+    if (focussed) {
+      requestAnimationFrame(() => {
+        if (document.activeElement !== inputElement) {
+          inputElement.focus()
+          inputElement.select()
+        }
+      })
+    }
+  })
+
 </script>
 
 
 <form
-  class="flex justify-center"
+  class="w-full"
   on:submit|preventDefault={() => dispatch("search")}
 >
   <label
-    class="neutral-label my-2 flex w-full items-center rounded-full border-2 border-black sm:w-1/2  box-shadow"
+    class="neutral-label normal-background flex w-full items-center rounded-full border-2 border-black box-shadow"
   >
     <input
+      bind:this={inputElement}
+      on:focus={() => {isFocused?.setData(true)}}
+      on:blur={() => {isFocused?.setData(false)}}
       type="search"
       style=" --tw-ring-color: rgb(0 0 0 / 0) !important;"
       class="ml-4 pl-1 w-full outline-none border-none"
@@ -35,9 +52,9 @@
         }}
       bind:value={_value}
       use:set_placeholder={placeholder}
-      use:ariaLabel={Translations.t.general.search.search}
+      use:ariaLabel={placeholder}
     />
-    <SearchIcon aria-hidden="true" class="h-8 w-8 mx-2" />
+    <SearchIcon aria-hidden="true" class="h-8 w-8 mx-3" />
 
   </label>
 </form>

src/UI/Base/SidebarUnit.svelte

@@ -0,0 +1,55 @@
+<div class="sidebar-unit">
+  <slot/>
+</div>
+
+<style>
+    :global(.sidebar-unit) {
+        display: flex;
+        flex-direction: column;
+        row-gap: 0.25rem;
+        background: var(--background-color);
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+    }
+
+    :global(.sidebar-unit > h3) {
+        margin-top: 0;
+        margin-bottom: 0.5rem;
+        padding: 0.25rem;
+    }
+
+    :global(.sidebar-button svg, .sidebar-button img) {
+        width: 1.5rem;
+        height: 1.5rem;
+        margin-right: 0.5rem;
+        flex-shrink: 0;
+    }
+
+    :global(.sidebar-button .weblate-link > svg) {
+        width: 0.75rem;
+        height: 0.75rem;
+        flex-shrink: 0;
+    }
+
+
+    :global(.sidebar-button, .sidebar-unit > a) {
+        display: flex;
+        align-items: center;
+        border-radius: 0.25rem !important;
+        padding: 0.4rem 0.75rem !important;
+        text-decoration: none !important;
+        width: 100%;
+        text-align: start;
+    }
+
+    :global(.sidebar-button > svg , .sidebar-button > img, .sidebar-unit > a img, .sidebar-unit > a svg) {
+        margin-right: 0.5rem;
+        flex-shrink: 0;
+    }
+
+    :global(.sidebar-button:hover, .sidebar-unit > a:hover) {
+        background: var(--low-interaction-background) !important;
+    }
+
+
+</style>