Improve login screen

src/lib/components/Divider.svelte

@@ -1,4 +1,4 @@
-<div class="flex items-center gap-2 p-2 text-xs opacity-50">
+<div class="flex items-center gap-2 p-2 text-xs opacity-50 uppercase">
   <div class="h-px flex-grow bg-base-content opacity-25" />
   <p><slot /></p>
   <div class="h-px flex-grow bg-base-content opacity-25" />

src/lib/components/Field.svelte

@@ -1,4 +1,4 @@
-<div class="flex flex-col gap-2">
+<div class="flex flex-col gap-2 {$$props.class}">
   <label class="flex items-center gap-2 font-bold">
     <slot name="label" />
   </label>

src/lib/components/Icon.svelte

@@ -46,6 +46,7 @@
   import InfoCircle from "@assets/icons/Info Circle.svg?dataurl"
   import InfoSquare from "@assets/icons/Info Square.svg?dataurl"
   import Key from "@assets/icons/Key.svg?dataurl"
+  import KeyMinimalisticSquare3 from "@assets/icons/Key Minimalistic Square 3.svg?dataurl"
   import LinkRound from "@assets/icons/Link Round.svg?dataurl"
   import Login from "@assets/icons/Login.svg?dataurl"
   import Login2 from "@assets/icons/Login 2.svg?dataurl"
@@ -117,6 +118,7 @@
     "info-circle": InfoCircle,
     "info-square": InfoSquare,
     key: Key,
+    'key-minimalistic-square-3': KeyMinimalisticSquare3,
     "link-round": LinkRound,
     login: Login,
     "login-2": Login2,

src/lib/components/SearchSelect.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import type {SvelteComponent} from "svelte"
+  import {readable} from 'svelte/store'
+  import {type Instance} from "tippy.js"
+  import {append, identity, remove, uniq} from "@welshman/lib"
+  import {createSearch} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import Tippy from "@lib/components/Tippy.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Suggestions from "@lib/editor/Suggestions.svelte"
+  import SuggestionString from "@lib/editor/SuggestionString.svelte"
+
+  export let value: string
+  export let options: string[]
+  export let allowCreate = false
+
+  let input: Element
+  let popover: Instance
+  let instance: SvelteComponent
+
+  const search = readable(
+    createSearch(options, {
+      getValue: identity,
+      fuseOptions: {keys: [""]},
+    })
+  )
+
+  const select = (newValue: string) => {
+    popover.hide()
+    value = newValue
+  }
+
+  const onKeyDown = (e: Event) => {
+    if (instance.onKeyDown(e)) {
+      e.preventDefault()
+    }
+  }
+
+  const onFocus = () => {
+    popover.show()
+  }
+
+  const onBlur = () => {
+    popover.hide()
+  }
+</script>
+
+<div class={$$props.class}>
+  <label class="input input-bordered flex w-full items-center gap-3" bind:this={input}>
+    <slot name="before" />
+    <input class="grow" type="text" bind:value={value} on:keydown={onKeyDown} on:focus={onFocus} on:blur={onBlur} />
+    <Icon icon="alt-arrow-down" class="cursor-pointer" />
+  </label>
+  <Tippy
+    bind:popover
+    bind:instance
+    component={Suggestions}
+    props={{
+      search,
+      select,
+      allowCreate,
+      term: value,
+      component: SuggestionString,
+      class: "rounded-box",
+      style: `left: 4px; width: ${input?.clientWidth + 12}px`,
+    }}
+    params={{
+      trigger: "manual",
+      interactive: true,
+      maxWidth: "none",
+      getReferenceClientRect: () => input.getBoundingClientRect(),
+    }} />
+</div>

src/lib/components/Tippy.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import 'tippy.js/animations/shift-away.css'
+
   import {onMount} from "svelte"
   import type {SvelteComponent, ComponentType, ComponentProps} from "svelte"
   import tippy, {type Instance, type Props} from "tippy.js"
@@ -17,7 +19,7 @@
     if (element) {
       const target = document.createElement("div")
 
-      popover = tippy(element, {content: target, ...params})
+      popover = tippy(element, {content: target, animation: 'shift-away', ...params})
 
       instance = new component({target, props})