From db376537484e183affbd735d95dbb36cc42d690a Mon Sep 17 00:00:00 2001
From: lexx <alexlingris@gmail.com>
Date: Fri, 16 Aug 2024 21:11:01 +0300
Subject: [PATCH] fixed zindex thing - brightness was the problem

---
 front/js/svelte/Channel.svelte                |   2 -
 .../svelte/autocomplete/Autocomplete.svelte   |  52 +++++
 .../js/svelte/autocomplete/Selectlist.svelte  |  60 ++++++
 front/js/svelte/records/Edit.svelte           |   2 +-
 .../records/elements/BrowseModal.svelte       | 114 ----------
 front/js/svelte/records/elements/Color.svelte |  25 ++-
 .../svelte/records/elements/Datalist.svelte   |  70 ------
 front/js/svelte/records/elements/Date.svelte  |  63 +-----
 .../svelte/records/elements/Datetime.svelte   |  67 +-----
 .../js/svelte/records/elements/Number.svelte  |  53 +----
 .../elements/ReferenceInlineButtons.svelte    |   1 -
 .../records/elements/ReferenceTags.svelte     | 114 +++++-----
 .../svelte/records/elements/Selectlist.svelte |  39 ----
 front/js/svelte/records/elements/Slug.svelte  |   4 +-
 front/js/svelte/records/elements/Text.svelte  |  95 +--------
 front/package-lock.json                       |   9 +
 front/package.json                            |   1 +
 front/sass/_autocomplete.scss                 |  47 ++++
 front/sass/_button.scss                       |   5 +-
 front/sass/_dialog.scss                       |   2 +-
 front/sass/_form.scss                         |   4 +-
 front/sass/_layout.scss                       |   4 +-
 front/sass/_preview.scss                      |   6 +-
 front/sass/_record-edit.scss                  |  50 +++--
 front/sass/_reference-tags.scss               |  46 ++++
 front/sass/app.scss                           | 201 ++++++++++--------
 26 files changed, 466 insertions(+), 670 deletions(-)
 create mode 100644 front/js/svelte/autocomplete/Autocomplete.svelte
 create mode 100644 front/js/svelte/autocomplete/Selectlist.svelte
 delete mode 100644 front/js/svelte/records/elements/BrowseModal.svelte
 delete mode 100644 front/js/svelte/records/elements/Datalist.svelte
 delete mode 100644 front/js/svelte/records/elements/Selectlist.svelte
 create mode 100644 front/sass/_autocomplete.scss
 create mode 100644 front/sass/_reference-tags.scss

diff --git a/front/js/svelte/Channel.svelte b/front/js/svelte/Channel.svelte
index 5e85f1c..fa0216b 100644
--- a/front/js/svelte/Channel.svelte
+++ b/front/js/svelte/Channel.svelte
@@ -8,8 +8,6 @@
     import HomeIndex from "./home/Index.svelte";
     import BuildReport from "./build/Report.svelte";
     import Header from "./layout/Header.svelte";
-    import BrowseModal from "./records/elements/BrowseModal.svelte";
-    import Dialog from "./dialog/Dialog.svelte";
 
     const components = {
         members: Members,
diff --git a/front/js/svelte/autocomplete/Autocomplete.svelte b/front/js/svelte/autocomplete/Autocomplete.svelte
new file mode 100644
index 0000000..57f0669
--- /dev/null
+++ b/front/js/svelte/autocomplete/Autocomplete.svelte
@@ -0,0 +1,52 @@
+<script>
+
+    import Selectlist from "./Selectlist.svelte";
+    import Icon from "../common/Icon.svelte";
+
+    let searchEl;
+    let search;
+    export let value;
+    export let field;
+
+    function handleSelect(){
+        searchEl.focus();
+        searchEl.blur()
+    }
+</script>
+
+
+<div class="autocomplete">
+    <input
+            type="search"
+            bind:value={search}
+            bind:this={searchEl}
+            placeholder="Search for options"
+            autocomplete="off"
+    />
+    <div class="autocomplete-results">
+        <Selectlist
+                {field}
+                bind:value
+                bind:search
+                on:selected={handleSelect}
+        />
+    </div>
+</div>
+{#if value}
+    <div  class="autocomplete-selected-value">
+        {#if Array.isArray(field.selectOptions)}
+            {value}
+        {:else}
+            {field.selectOptions[value]}
+        {/if}
+        <button
+                on:click|preventDefault={(e) => (value = "")}
+                type="button"
+                class="button-text"
+                aria-label="Close"
+        >
+            <Icon width={12} height={12} icon="close"></Icon>
+        </button>
+
+    </div>
+{/if}
\ No newline at end of file
diff --git a/front/js/svelte/autocomplete/Selectlist.svelte b/front/js/svelte/autocomplete/Selectlist.svelte
new file mode 100644
index 0000000..2da674c
--- /dev/null
+++ b/front/js/svelte/autocomplete/Selectlist.svelte
@@ -0,0 +1,60 @@
+<script>
+    import Fuse from "fuse.js";
+    import {createEventDispatcher} from "svelte";
+
+    export let field;
+    export let value;
+    export let search = "";
+
+    const dispatch = createEventDispatcher();
+
+
+    function select(e, option) {
+        e.preventDefault();
+        value = option.value;
+        search = "";
+        dispatch("selected", {option: option})
+    }
+
+
+    function formatOptionsForSearch(listOptions) {
+        if (Array.isArray(listOptions)) {
+            return listOptions.map(value => {
+                return {
+                    value: value,
+                    label: value,
+                }
+            })
+        }
+
+        return Object.entries(listOptions).map(([k, v]) => {
+            return {
+                value: k,
+                label: v,
+            }
+        })
+    }
+
+    let formattedOptions = formatOptionsForSearch(field.selectOptions);
+    const fuse = new Fuse(formattedOptions, {
+        includeScore: false,
+        keys: ['value', 'label']
+    })
+    $: result = search === "" ? formattedOptions : fuse.search(search).map(resItem => resItem.item)
+</script>
+
+{#if result}
+    {#each result as suggestion (suggestion.value)}
+        <div
+                class="autocomplete-option"
+                role="button"
+                tabindex="0"
+                on:click={(e) => select(e, suggestion)}
+                on:keypress={(e) => select(e, suggestion)}
+        >
+            <span class="dropdown-item">
+               {suggestion.label}
+            </span>
+        </div>
+    {/each}
+{/if}
diff --git a/front/js/svelte/records/Edit.svelte b/front/js/svelte/records/Edit.svelte
index e3d7bfe..f5612a1 100644
--- a/front/js/svelte/records/Edit.svelte
+++ b/front/js/svelte/records/Edit.svelte
@@ -188,7 +188,7 @@
 
     <ErrorAlert message={errorMessage}/>
 
-    <div class=" mt-4" style="margin-bottom:150px">
+    <div class=" mt-4" style="margin-bottom:150px;position:relative;">
         <ContentTabs
                 {schema}
                 {isCreateMode}
diff --git a/front/js/svelte/records/elements/BrowseModal.svelte b/front/js/svelte/records/elements/BrowseModal.svelte
deleted file mode 100644
index a6c7a10..0000000
--- a/front/js/svelte/records/elements/BrowseModal.svelte
+++ /dev/null
@@ -1,114 +0,0 @@
-<script>
-    import {createEventDispatcher, getContext} from "svelte";
-    import Index from "../../content/Index.svelte";
-
-    const dispatch = createEventDispatcher();
-    const channel = getContext("channel");
-    $: data = {};
-    let isOpen = false;
-    let selectedRecords = [];
-    // onMount(() => {
-    //     load();
-    // });
-
-    export function open(schema) {
-        isOpen = true;
-        load(schema);
-    }
-
-    export function close() {
-        isOpen = false;
-        selectedRecords = [];
-    }
-
-    function load(schema) {
-        axios
-            .get(channel.lucentUrl + "/content/" + schema)
-            .then((response) => {
-                data = response.data;
-            })
-            .catch((error) => console.log(error));
-    }
-
-    function insert(e) {
-        e.preventDefault();
-        dispatch("insert", {
-            records: selectedRecords,
-            action: "insert",
-        });
-    }
-
-    function replace(e) {
-        e.preventDefault();
-        dispatch("insert", {
-            records: selectedRecords,
-            action: "replace",
-        });
-    }
-</script>
-
-{#if data.schema}
-    <div
-        class="modal fade show"
-        tabindex="-1"
-        class:d-block={isOpen}
-        aria-modal="true"
-        role="dialog"
-        style="background: rgba(100,100,100,.6);"
-    >
-        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <div class="d-flex align-items-center">
-                        <button
-                            type="button"
-                            class="btn btn-primary me-1"
-                            on:click={insert}
-                            disabled={selectedRecords.length === 0}
-                        >
-                            Insert
-                        </button>
-                        <button
-                            type="button"
-                            class="btn btn-outline-primary  me-3"
-                            on:click={replace}
-                            disabled={selectedRecords.length === 0}
-                        >
-                            Replace
-                        </button>
-                        {#if selectedRecords.length > 0}
-                            <span class="">
-                                {selectedRecords.length} records selected
-                            </span>
-                        {/if}
-                    </div>
-
-                    <button
-                        on:click|preventDefault={(e) => (isOpen = false)}
-                        type="button"
-                        class="btn-close"
-                        data-bs-dismiss="modal"
-                        aria-label="Close"
-                    />
-                </div>
-                <div class="modal-body">
-                    <Index {...data} bind:selected={selectedRecords}/>
-                </div>
-            </div>
-        </div>
-    </div>
-{/if}
-
-<style>
-    .modal-dialog {
-        width: auto;
-        max-width: 100%;
-
-    }
-
-    .modal-content {
-        margin: 40px auto;
-        width: auto;
-        height: 100%;
-    }
-</style>
diff --git a/front/js/svelte/records/elements/Color.svelte b/front/js/svelte/records/elements/Color.svelte
index e5826a3..eac48dc 100644
--- a/front/js/svelte/records/elements/Color.svelte
+++ b/front/js/svelte/records/elements/Color.svelte
@@ -1,5 +1,6 @@
 <script>
-    import { getErrorMessage } from "./errorMessage";
+    import {getErrorMessage} from "./errorMessage";
+
     export let field;
     export let value;
     export let isCreateMode;
@@ -9,23 +10,21 @@
 </script>
 
 <div class="mb-0">
-    <div class="input-group ">
-        <div style="width:64px;">
-            <input
+    <div style="display: flex; align-items: center;gap: 10px">
+        <input
                 type="color"
                 {id}
-                class="form-control form-control-color"
+                style="border: none;background: transparent;padding: 0;width:64px;"
                 disabled={field.readonly && !isCreateMode}
                 bind:value
-            />
-        </div>
+        />
         <input
-            type="text"
-            class:is-invalid={errorMessage}
-            {id}
-            class="form-control"
-            bind:value
-            readonly={field.readonly && !isCreateMode}
+                type="text"
+                class:is-invalid={errorMessage}
+                {id}
+                class="form-control"
+                bind:value
+                readonly={field.readonly && !isCreateMode}
         />
     </div>
 
diff --git a/front/js/svelte/records/elements/Datalist.svelte b/front/js/svelte/records/elements/Datalist.svelte
deleted file mode 100644
index 1141c32..0000000
--- a/front/js/svelte/records/elements/Datalist.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script>
-    import {getContext} from "svelte";
-    import {debounce} from "lodash";
-    import {previewTitle} from "../Preview";
-
-    const channel = getContext("channel");
-    export let field;
-
-    export let value;
-    export let search;
-    $: options = [];
-    export const update = debounce((e) => {
-        axios
-            .get("/records/suggestions", {
-                params: {
-                    schema: field.optionsFrom,
-                    field: field.optionsField,
-                    value: search,
-                    ui: field.ui,
-                },
-            })
-            .then((response) => {
-                options = response.data;
-            })
-            .catch((error) => {
-                console.log(error);
-            });
-    }, 500);
-
-    function select(e, option) {
-        e.preventDefault();
-        value = option.data[field.optionsField];
-        search = "";
-    }
-</script>
-
-{#if field.optionsFrom}
-    {#each options as option (option.id)}
-        <div
-                on:click={(e) => select(e, option)}
-                on:keypress={(e) => select(e, option)}
-        >
-            <span class="dropdown-item">
-                {previewTitle(channel.schemas, option)}
-                <small class="text-muted "
-                >{option.data[field.optionsField]}</small
-                >
-            </span>
-        </div>
-    {:else}
-        {#if search && field.optionsSuggest}
-            <div
-                on:click={(e) => {
-                    value = search;
-                    search = "";
-                }}
-                on:keypress={(e) => {
-                    value = search;
-                    search = "";
-                }}
-            >
-                <span class="dropdown-item">
-                    Add "{search}"
-                </span>
-            </div>
-        {:else}
-            No results
-        {/if}
-    {/each}
-{/if}
diff --git a/front/js/svelte/records/elements/Date.svelte b/front/js/svelte/records/elements/Date.svelte
index 7d77c0d..f056a4f 100644
--- a/front/js/svelte/records/elements/Date.svelte
+++ b/front/js/svelte/records/elements/Date.svelte
@@ -1,21 +1,16 @@
 <script>
-    import Datalist from "./Datalist.svelte";
     import {onMount} from "svelte";
     import flatpickr from "flatpickr";
     import "flatpickr/dist/flatpickr.css";
     import "flatpickr/dist/themes/light.css";
     import {getErrorMessage} from "./errorMessage";
-    import Icon from "../../common/Icon.svelte";
 
     export let field;
     export let value;
     export let id;
     export let isCreateMode;
     export let validationErrors;
-    $: search = "";
-    $: listMode = field.optionsFrom && !(field.readonly && !isCreateMode);
     $: errorMessage = getErrorMessage(validationErrors, field.name);
-    let list;
     let pickerInput;
     let pickerInstance;
     let flatpickrOptions = {
@@ -34,9 +29,7 @@
 
     onMount(() => {
         if (!field.readonly || isCreateMode) {
-            if (listMode) {
-                flatpickrOptions.clickOpens = false;
-            }
+
             pickerInstance = flatpickr(pickerInput, flatpickrOptions);
         }
     });
@@ -44,55 +37,8 @@
 
 <div class="mb-0">
 
-    {#if listMode}
-        <div class="dropdown d-flex">
-            <input
-                type="search"
-                {id}
-                on:keyup={list.update}
-                on:focus={list.update}
-                class="form-control dropdown-toggle"
-                class:is-invalid={errorMessage}
-                bind:value={search}
-                bind:this={pickerInput}
-                placeholder="Search for options"
-                data-bs-toggle="dropdown"
-                autocomplete="off"
-                readonly={field.readonly && !isCreateMode}
-            />
-            <button
-                class="btn btn-light ms-1"
-                on:click|preventDefault={(e) => pickerInstance.open()}
-            >
-                <Icon icon="calendar"/>
-            </button>
-            <ul class="dropdown-menu w-100">
-                {#if field.optionsFrom}
-                    <Datalist
-                        {field}
-                        bind:this={list}
-                        bind:value
-                        bind:search
-                    />
-                {/if}
-            </ul>
-        </div>
-        {#if value}
-            <span class="badge rounded-pill bg-light text-dark  fs-6 mt-3">
-                <div class="d-flex align-items-center ">
-                    {value}
-                    <button
-                        on:click|preventDefault={(e) => (value = "")}
-                        type="button"
-                        class="btn-close btn-sm  ms-1"
-                        style="font-size:10px"
-                        aria-label="Close"
-                    />
-                </div>
-            </span>
-        {/if}
-    {:else}
-        <input
+
+    <input
             type="text"
             {id}
             class="form-control"
@@ -101,8 +47,7 @@
             bind:this={pickerInput}
             autocomplete="off"
             readonly={field.readonly && !isCreateMode}
-        />
-    {/if}
+    />
 
     {#if errorMessage}
         <div class="invalid-feedback d-block">
diff --git a/front/js/svelte/records/elements/Datetime.svelte b/front/js/svelte/records/elements/Datetime.svelte
index 54c0f66..821a8f1 100644
--- a/front/js/svelte/records/elements/Datetime.svelte
+++ b/front/js/svelte/records/elements/Datetime.svelte
@@ -1,27 +1,21 @@
 <script>
-    import Datalist from "./Datalist.svelte";
     import {onMount} from "svelte";
     import flatpickr from "flatpickr";
     import "flatpickr/dist/flatpickr.css";
     import "flatpickr/dist/themes/light.css";
     import {getErrorMessage} from "./errorMessage";
-    import Icon from "../../common/Icon.svelte";
 
     export let field;
     export let value;
     export let isCreateMode;
     export let validationErrors;
     const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    $: search = "";
-    $: listMode = field.optionsFrom && !(field.readonly && !isCreateMode);
     $: errorMessage = getErrorMessage(validationErrors, field.name);
 
     export let id;
-    let list;
     let pickerInput;
     let pickerInstance;
     let flatpickrOptions = {
-        enableTime: false,
         allowInput: true,
         altInput: true,
         altFormat: "Y-m-d H:i:S",
@@ -41,64 +35,14 @@
 
     onMount(() => {
         if (!field.readonly || isCreateMode) {
-            if (listMode) {
-                flatpickrOptions.clickOpens = false;
-            }
             pickerInstance = flatpickr(pickerInput, flatpickrOptions);
         }
     });
 </script>
 
 <div class="mb-0">
-    {#if listMode}
-        <div class="dropdown d-flex">
-            <input
-                type="search"
-                {id}
-                on:keyup={list.update}
-                on:focus={list.update}
-                class="form-control dropdown-toggle"
-                class:is-invalid={errorMessage}
-                bind:value={search}
-                bind:this={pickerInput}
-                placeholder="Search for options"
-                data-bs-toggle="dropdown"
-                autocomplete="off"
-                readonly={field.readonly && !isCreateMode}
-            />
-            <button
-                class="btn btn-light ms-1"
-                on:click|preventDefault={(e) => pickerInstance.open()}
-            >
-                <Icon icon="calendar"/>
-            </button>
-            <ul class="dropdown-menu w-100">
-                {#if field.optionsFrom}
-                    <Datalist
-                        {field}
-                        bind:this={list}
-                        bind:value
-                        bind:search
-                    />
-                {/if}
-            </ul>
-        </div>
-        {#if value}
-            <span class="badge rounded-pill bg-light text-dark  fs-6 mt-3">
-                <div class="d-flex align-items-center ">
-                    {value}
-                    <button
-                        on:click|preventDefault={(e) => (value = "")}
-                        type="button"
-                        class="btn-close btn-sm  ms-1"
-                        style="font-size:10px"
-                        aria-label="Close"
-                    />
-                </div>
-            </span>
-        {/if}
-    {:else}
-        <input
+
+    <input
             type="text"
             {id}
             class="form-control"
@@ -107,10 +51,9 @@
             bind:this={pickerInput}
             autocomplete="off"
             readonly={field.readonly && !isCreateMode}
-        />
-    {/if}
-    <small class=" text-primary  opacity-50"
-    >Dates are displayed according to your timezone: {timezone}</small
+    />
+    <span class="system-help-text"
+    >Dates are displayed according to your timezone: {timezone}</span
     >
 
     {#if errorMessage}
diff --git a/front/js/svelte/records/elements/Number.svelte b/front/js/svelte/records/elements/Number.svelte
index 583e394..a5d0090 100644
--- a/front/js/svelte/records/elements/Number.svelte
+++ b/front/js/svelte/records/elements/Number.svelte
@@ -1,14 +1,11 @@
 <script>
-    import Datalist from "./Datalist.svelte";
     import {getErrorMessage} from "./errorMessage";
 
     export let field;
     export let value;
-    export let schemas;
     export let validationErrors;
     export let isCreateMode;
     export let id;
-    $: search = "";
     $: errorMessage = getErrorMessage(validationErrors, field.name);
 
     let list;
@@ -23,56 +20,11 @@
         return parseFloat(number).toFixed(field.decimals);
     }
 
-    $: listMode = field.optionsFrom && !(field.readonly && !isCreateMode);
 </script>
 
 <div class="mb-0">
 
-    {#if listMode}
-        <div class="dropdown">
-            <input
-                type="number"
-                {id}
-                on:keyup={list.update}
-                on:focus={list.update}
-                bind:value={search}
-                placeholder="Search for options"
-                class="form-control dropdown-toggle"
-                class:is-invalid={errorMessage}
-                data-bs-toggle="dropdown"
-                autocomplete="off"
-                readonly={field.readonly && !isCreateMode}
-            />
-
-            <ul class="dropdown-menu w-100">
-                {#if field.optionsFrom}
-                    <Datalist
-                        {field}
-                        bind:this={list}
-                        {schemas}
-                        bind:value
-                        bind:search
-                    />
-                {/if}
-            </ul>
-        </div>
-
-        {#if value}
-            <span class="badge rounded-pill bg-light text-dark  fs-6 mt-3">
-                <div class="d-flex align-items-center ">
-                    {value}
-                    <button
-                        on:click|preventDefault={(e) => (value = "")}
-                        type="button"
-                        class="btn-close btn-sm  ms-1"
-                        style="font-size:10px"
-                        aria-label="Close"
-                    />
-                </div>
-            </span>
-        {/if}
-    {:else}
-        <input
+    <input
             type="number"
             {id}
             class="form-control"
@@ -81,8 +33,7 @@
             bind:value
             autocomplete="off"
             readonly={field.readonly && !isCreateMode}
-        />
-    {/if}
+    />
 
     {#if errorMessage}
         <div class="invalid-feedback d-block">
diff --git a/front/js/svelte/records/elements/ReferenceInlineButtons.svelte b/front/js/svelte/records/elements/ReferenceInlineButtons.svelte
index d1867c4..1cb502a 100644
--- a/front/js/svelte/records/elements/ReferenceInlineButtons.svelte
+++ b/front/js/svelte/records/elements/ReferenceInlineButtons.svelte
@@ -2,7 +2,6 @@
     import {createEventDispatcher, getContext} from "svelte";
     import Icon from "../../common/Icon.svelte";
     import InlineEdit from "../InlineEdit.svelte";
-    import BrowseModal from "./BrowseModal.svelte";
     import Dialog from "../../dialog/Dialog.svelte";
 
     const dispatch = createEventDispatcher();
diff --git a/front/js/svelte/records/elements/ReferenceTags.svelte b/front/js/svelte/records/elements/ReferenceTags.svelte
index 792b0d5..e58ab18 100644
--- a/front/js/svelte/records/elements/ReferenceTags.svelte
+++ b/front/js/svelte/records/elements/ReferenceTags.svelte
@@ -4,13 +4,14 @@
     import {previewTitle} from "../Preview";
     import {getErrorMessage} from "./errorMessage";
     import {insertEdges} from "./reference.js";
+    import Icon from "../../common/Icon.svelte";
 
     const channel = getContext("channel");
     export let field;
     export let id;
     export let record;
     export let graph;
-
+    let searchEl;
     export let validationErrors;
     $: errorMessage = getErrorMessage(validationErrors, field.name);
 
@@ -58,6 +59,9 @@
     function insert(e, insertRecord) {
         e.preventDefault();
         graph = insertEdges(graph, record, [insertRecord], field.name, e.detail.action);
+        search = ""
+        searchEl.focus()
+        searchEl.blur()
     }
 
     const updateResults = debounce((e) => {
@@ -81,71 +85,81 @@
 
 
 </script>
+<div class="reference-tags">
+    {#if errorMessage}
+        <div class="invalid-feedback d-block mb-3">
+            {errorMessage}
+        </div>
+    {/if}
 
-{#if errorMessage}
-    <div class="invalid-feedback d-block mb-3">
-        {errorMessage}
-    </div>
-{/if}
+    <input
+            type="search"
+            bind:this={searchEl}
+            {id}
+            on:keyup={updateResults}
+            class:is-invalid={errorMessage}
+            bind:value={search}
+            placeholder={"Search for "+field.label}
+            autocomplete="off"
+    />
 
-<input
-        type="search"
-        {id}
-        on:keyup={updateResults}
-        class="form-control dropdown-toggle"
-        class:is-invalid={errorMessage}
-        bind:value={search}
-        placeholder={"Search for "+field.label}
-        data-bs-toggle="dropdown"
-        autocomplete="off"
-        readonly={field.readonly && !isCreateMode}
-/>
+    <div class="reference-tags-results">
 
-<div class="dropdown-menu w-100">
-
-    {#if searchOptions}
-        {#each searchOptions as option (option.id)}
-            <div
-                    on:click={(e) => insert(e, option)}
-                    on:keypress={(e) => insert(e, option)}
-            >
+        {#if searchOptions}
+            {#each searchOptions as option (option.id)}
+                <div
+                        class="reference-tags-option"
+                        role="button"
+                        tabindex="0"
+                        on:click={(e) => insert(e, option)}
+                        on:keypress={(e) => insert(e, option)}
+                >
             <span class="dropdown-item">
                 {previewTitle(channel.schemas, option)}
             </span>
-            </div>
+                </div>
 
-        {:else}
+            {:else}
 
-            Start typing...
-        {/each}
-    {/if}
-    {#if search }
-        <div
-                on:click={(e) => saveNew(e,search)}
-                on:keypress={(e) => saveNew(e,search)}
-        >
+                Start typing...
+            {/each}
+        {/if}
+        {#if search }
+            <div
+                    class="reference-tags-option"
+                    role="button"
+                    tabindex="0"
+                    on:click={(e) => saveNew(e,search)}
+                    on:keypress={(e) => saveNew(e,search)}
+            >
                 <span class="dropdown-item">
                     Add "{search}"
                 </span>
-        </div>
-    {/if}
+            </div>
+        {/if}
+    </div>
 </div>
 
-
 {#if references.length > 0}
-    <div class="d-flex">
+    <div style="display: flex;align-items: center;gap: 4px">
         {#each references as record (record.id)}
-            <span class="badge rounded-pill bg-light text-dark  fs-6 mt-3">
-                <div class="d-flex align-items-center ">
+            <span class="autocomplete-selected-value">
+                 <a
+                         class="record-title"
+                         href="{channel.lucentUrl}/records/{record.id}"
+                 >
                       {previewTitle(channel.schemas, record)}
-                    <button
-                            on:click|preventDefault={(e) => removeReference(e, record.id)}
-                            type="button"
-                            class="btn-close btn-sm  ms-1"
-                            style="font-size:10px"
-                            aria-label="Close"
-                    />
-                </div>
+                    </a>
+
+                <button
+                        on:click|preventDefault={(e) => removeReference(e, record.id)}
+                        type="button"
+                        class="button-text"
+                        aria-label="Close"
+                >
+            <Icon width={12} height={12} icon="close"></Icon>
+        </button>
+
             </span>
         {/each}
     </div>
diff --git a/front/js/svelte/records/elements/Selectlist.svelte b/front/js/svelte/records/elements/Selectlist.svelte
deleted file mode 100644
index f0da807..0000000
--- a/front/js/svelte/records/elements/Selectlist.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-    export let field;
-    export let value;
-    export let search;
-
-    function select(e, option) {
-        e.preventDefault();
-        value = option;
-        search = "";
-    }
-
-
-</script>
-
-{#if field.selectOptions}
-    {#if Array.isArray(field.selectOptions)}
-        {#each field.selectOptions as suggestion (suggestion)}
-            <div
-                    on:click={(e) => select(e, suggestion)}
-                    on:keypress={(e) => select(e, suggestion)}
-            >
-            <span class="dropdown-item">
-               {suggestion}
-            </span>
-            </div>
-        {/each}
-    {:else}
-        {#each Object.entries(field.selectOptions) as [k, v] (k)}
-            <div
-                    on:click={(e) => select(e, k)}
-                    on:keypress={(e) => select(e, k)}
-            >
-            <span class="dropdown-item">
-               {v}
-            </span>
-            </div>
-        {/each}
-    {/if}
-{/if}
diff --git a/front/js/svelte/records/elements/Slug.svelte b/front/js/svelte/records/elements/Slug.svelte
index 4874a09..4f36142 100644
--- a/front/js/svelte/records/elements/Slug.svelte
+++ b/front/js/svelte/records/elements/Slug.svelte
@@ -20,7 +20,9 @@
             autocomplete="off"
             readonly={field.readonly && !isCreateMode}
     />
-
+    <div class="system-help-text">
+        Leave this empty to autogenerate from <i>{field.source}</i>
+    </div>
     {#if errorMessage}
         <div class="invalid-feedback d-block">
             {errorMessage}
diff --git a/front/js/svelte/records/elements/Text.svelte b/front/js/svelte/records/elements/Text.svelte
index ec56ac5..daf741c 100644
--- a/front/js/svelte/records/elements/Text.svelte
+++ b/front/js/svelte/records/elements/Text.svelte
@@ -1,7 +1,6 @@
 <script>
-    import Datalist from "./Datalist.svelte";
-    import Selectlist from "./Selectlist.svelte";
     import {getErrorMessage} from "./errorMessage";
+    import Autocomplete from "../../autocomplete/Autocomplete.svelte";
 
     export let field;
     export let value;
@@ -9,99 +8,13 @@
     export let validationErrors;
 
     $: errorMessage = getErrorMessage(validationErrors, field.name);
-    $: search = "";
     export let id;
-    let list;
-
-    $: listMode = field.optionsFrom && !(field.readonly && !isCreateMode);
-
-
-
 
 </script>
 
-<div class="mb-0">
-    {#if listMode}
-        <div class="dropdown">
-            <input
-                type="search"
-                {id}
-                on:keyup={list.update}
-                on:focus={list.update}
-                class="form-control dropdown-toggle"
-                class:is-invalid={errorMessage}
-                bind:value={search}
-                placeholder="Search for options"
-                data-bs-toggle="dropdown"
-                autocomplete="off"
-                readonly={field.readonly && !isCreateMode}
-            />
-
-            <div class="dropdown-menu w-100">
-                {#if field.optionsFrom}
-                    <Datalist
-                        {field}
-                        bind:this={list}
-                        bind:value
-                        bind:search
-                    />
-                {/if}
-            </div>
-        </div>
-        {#if value}
-            <span class="badge rounded-pill bg-light text-dark  fs-6 mt-3">
-                <div class="d-flex align-items-center ">
-                    {value}
-                    <button
-                        on:click|preventDefault={(e) => (value = "")}
-                        type="button"
-                        class="btn-close btn-sm  ms-1"
-                        style="font-size:10px"
-                        aria-label="Close"
-                    />
-                </div>
-            </span>
-        {/if}
-    {:else if   field.selectOptions}
-        <div class="dropdown">
-            <input
-                    type="search"
-                    {id}
-                    class="form-control dropdown-toggle"
-                    class:is-invalid={errorMessage}
-                    bind:value={search}
-                    placeholder="Search for options"
-                    data-bs-toggle="dropdown"
-                    autocomplete="off"
-                    readonly={field.readonly && !isCreateMode}
-            />
-            <div class="dropdown-menu w-100">
-                    <Selectlist
-                            {field}
-                            bind:value
-                            bind:search
-                    />
-            </div>
-        </div>
-        {#if value}
-            <span class="badge rounded-pill bg-light text-dark  fs-6 mt-3">
-                <div class="d-flex align-items-center ">
-                    {#if Array.isArray(field.selectOptions)}
-                        {value}
-                        {:else}
-                        {field.selectOptions[value]}
-                        {/if}
-
-                    <button
-                            on:click|preventDefault={(e) => (value = "")}
-                            type="button"
-                            class="btn-close btn-sm  ms-1"
-                            style="font-size:10px"
-                            aria-label="Close"
-                    />
-                </div>
-            </span>
-        {/if}
+<div style="position: relative;">
+    {#if  field.selectOptions}
+        <Autocomplete {field} bind:value={value}></Autocomplete>
     {:else}
         <input
             type="text"
diff --git a/front/package-lock.json b/front/package-lock.json
index 991f81b..4704562 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -6,6 +6,7 @@
         "": {
             "dependencies": {
                 "@codemirror/lang-markdown": "^6.2.5",
+                "fuse.js": "^7.0.0",
                 "htmx.org": "^2.0.1"
             },
             "devDependencies": {
@@ -1259,6 +1260,14 @@
                 "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
             }
         },
+        "node_modules/fuse.js": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
+            "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==",
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/glob-parent": {
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
diff --git a/front/package.json b/front/package.json
index b9d5feb..f06998c 100644
--- a/front/package.json
+++ b/front/package.json
@@ -27,6 +27,7 @@
     },
     "dependencies": {
         "@codemirror/lang-markdown": "^6.2.5",
+        "fuse.js": "^7.0.0",
         "htmx.org": "^2.0.1"
     }
 }
diff --git a/front/sass/_autocomplete.scss b/front/sass/_autocomplete.scss
new file mode 100644
index 0000000..a91c427
--- /dev/null
+++ b/front/sass/_autocomplete.scss
@@ -0,0 +1,47 @@
+.autocomplete {
+  position: relative;
+  z-index: 1000;
+  overflow: visible;
+  .autocomplete-option {
+    cursor: pointer;
+  }
+  &:focus-within {
+    .autocomplete-results{
+      display: flex;
+    }
+  }
+
+
+}
+.autocomplete-selected-value {
+  font-size: 13px;
+  margin-top: 10px;
+  border-radius: 12px;
+  background: var(--background);
+  filter: brightness(97%);
+  padding: 3px 10px;
+  display: inline-flex;
+  justify-content: center;
+  gap: 4px;
+  line-height: 22px;
+}
+
+.autocomplete-selected-value:hover {
+  opacity: .8;
+  background-color: #eee;
+}
+.autocomplete-results {
+  display: none;
+  flex-direction: column;
+  padding: 10px;
+  overflow: visible;
+  position: absolute;
+  border-radius: 12px;
+  z-index: 20;
+  background: var(--background);
+  filter: brightness(97%);
+  transition: 600ms;
+  flex-grow: 1;
+  top: 45px;
+  min-width: max-content;
+}
\ No newline at end of file
diff --git a/front/sass/_button.scss b/front/sass/_button.scss
index 5ad8f71..7f36906 100644
--- a/front/sass/_button.scss
+++ b/front/sass/_button.scss
@@ -1,10 +1,9 @@
 .button{
   border-radius: 12px;
-  background: var(--background);
+  background: var(--background-button);
   padding: 3px 10px;
   cursor: pointer;
-  filter: brightness(97%);
-  border: none;
+  border: 1px solid var(--border-color);
   font-size: 14px;
   min-height: 27px;
   display: flex;
diff --git a/front/sass/_dialog.scss b/front/sass/_dialog.scss
index 8aa95b2..3e78c23 100644
--- a/front/sass/_dialog.scss
+++ b/front/sass/_dialog.scss
@@ -22,7 +22,7 @@ dialog {
   overflow: auto;
   max-height: 96vh;
   //position: relative;
-
+z-index: 2;
   .close {
     position: absolute;
     top: 10px;
diff --git a/front/sass/_form.scss b/front/sass/_form.scss
index 3ca6913..30f8fa5 100644
--- a/front/sass/_form.scss
+++ b/front/sass/_form.scss
@@ -5,11 +5,11 @@ label {
   margin-bottom: 4px;
 }
 
-input[type=text]{
+input[type=text],input[type=number],input[type=search],textarea{
   width: 100%;
 }
 
-input[type=text],textarea{
+input[type=text],input[type=number],input[type=search],textarea{
   background: var(--input-bg);
   border: 1px solid var(--border-color);
   border-radius: 5px;
diff --git a/front/sass/_layout.scss b/front/sass/_layout.scss
index 6aaa10d..3575663 100644
--- a/front/sass/_layout.scss
+++ b/front/sass/_layout.scss
@@ -1,11 +1,12 @@
 .sidebar-content{
   min-width: 300px;
   max-width: 400px;
+  position: relative;
 }
 
 .main-content {
   width: 100%;
-
+  position: relative;
 
 }
 
@@ -13,4 +14,5 @@
   display: flex;
   gap: 40px;
   padding: 20px;
+  position: relative;
 }
\ No newline at end of file
diff --git a/front/sass/_preview.scss b/front/sass/_preview.scss
index 3028611..f020f2f 100644
--- a/front/sass/_preview.scss
+++ b/front/sass/_preview.scss
@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 10px;
-  background: var(--background);
+  background: var(--background-2);
   border-radius: 12px;
   .image{
 
@@ -18,14 +18,14 @@
   }
 
   &:hover{
-    filter: brightness(95%);
+    background: var(--background-3);
     .trash-action{
       display: block;
     }
   }
 }
 .preview-reference{
-  filter: brightness(97%);
+  background: var(--background-2);
   padding: 10px 20px;
   margin-bottom: 4px;
 }
diff --git a/front/sass/_record-edit.scss b/front/sass/_record-edit.scss
index 9c29bc2..53cfa1e 100644
--- a/front/sass/_record-edit.scss
+++ b/front/sass/_record-edit.scss
@@ -1,7 +1,7 @@
 .record-edit {
   position: relative;
 
-  .invalid-feedback{
+  .invalid-feedback {
     color: var(--error);
     font-size: 15px;
     line-height: 20px;
@@ -38,43 +38,69 @@
 }
 
 .editor-field {
-  background: var(--background);
-  filter: brightness(97%);
+  background: var(--background-stack);
   padding: 18px;
+  position: relative;
   border-radius: 12px;
   margin: 6px 0;
   border-color: transparent;
 }
 
-.field-header{
+.field-header {
   margin-bottom: 4px;
-  .labels{
+  position: relative;
+
+  .labels {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
-  .label-and-help{
+
+  .label-and-help {
     display: flex;
     align-items: center;
     gap: 6px;
   }
-  label{font-size: 14px;line-height: 14px;margin: 0;font-weight: 700;}
-  .help-text{font-size: 14px;opacity: .7;line-height: 14px}
-  code{}
+
+  label {
+    font-size: 14px;
+    line-height: 14px;
+    margin: 0;
+    font-weight: 700;
+  }
+
+  .help-text {
+    font-size: 14px;
+    opacity: .7;
+    line-height: 14px
+  }
+
+  code {
+  }
+
+
 }
 
-.field-checkbox{
+.system-help-text {
+  font-size: 14px;
+  opacity: .7;
+  line-height: 14px;
+  margin-top: 10px;
+}
+
+
+.field-checkbox {
   display: flex;
   gap: 20px;
   align-items: center;
 
-  .form-check-inline{
+  .form-check-inline {
     display: flex;
     align-items: center;
     gap: 4px;
   }
 
-  .form-check-label{
+  .form-check-label {
     font-size: 14px;
     line-height: 14px;
   }
diff --git a/front/sass/_reference-tags.scss b/front/sass/_reference-tags.scss
new file mode 100644
index 0000000..0b49717
--- /dev/null
+++ b/front/sass/_reference-tags.scss
@@ -0,0 +1,46 @@
+.reference-tags {
+  position: relative;
+  z-index: 20;
+  .reference-tags-option {
+    cursor: pointer;
+  }
+  &:focus-within {
+    .reference-tags-results{
+      display: flex;
+    }
+  }
+
+
+}
+.reference-tags-selected-value {
+  font-size: 13px;
+  margin-top: 10px;
+  border-radius: 12px;
+  background: var(--background);
+  filter: brightness(97%);
+  padding: 3px 10px;
+  display: inline-flex;
+  justify-content: center;
+  gap: 4px;
+  line-height: 22px;
+}
+
+.reference-tags-selected-value:hover {
+  opacity: .8;
+  background-color: #eee;
+}
+.reference-tags-results {
+  display: none;
+  flex-direction: column;
+  padding: 10px;
+  overflow: visible;
+  position: absolute;
+  border-radius: 12px;
+  z-index: 20;
+  background: var(--background);
+  filter: brightness(97%);
+  transition: 600ms;
+  flex-grow: 1;
+  top: 45px;
+  min-width: max-content;
+}
\ No newline at end of file
diff --git a/front/sass/app.scss b/front/sass/app.scss
index b37be2a..69ce208 100644
--- a/front/sass/app.scss
+++ b/front/sass/app.scss
@@ -13,81 +13,82 @@ $danger: red;
 
 /* SCSS Gradient */
 $gradient-top: linear-gradient(
-    0deg,
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
+                0deg,
+                #0dab76ff,
+                #139a43ff,
+                #0b5d1eff,
+                #053b06ff,
+                #000000ff
 );
 $gradient-right: linear-gradient(
-    90deg,
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
+                90deg,
+                #0dab76ff,
+                #139a43ff,
+                #0b5d1eff,
+                #053b06ff,
+                #000000ff
 );
 $gradient-bottom: linear-gradient(
-    180deg,
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
+                180deg,
+                #0dab76ff,
+                #139a43ff,
+                #0b5d1eff,
+                #053b06ff,
+                #000000ff
 );
 $gradient-left: linear-gradient(
-    270deg,
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
+                270deg,
+                #0dab76ff,
+                #139a43ff,
+                #0b5d1eff,
+                #053b06ff,
+                #000000ff
 );
 $gradient-top-right: linear-gradient(
-    45deg,
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
+                45deg,
+                #0dab76ff,
+                #139a43ff,
+                #0b5d1eff,
+                #053b06ff,
+                #000000ff
 );
 $gradient-bottom-right: linear-gradient(
-    135deg,
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
+                135deg,
+                #0dab76ff,
+                #139a43ff,
+                #0b5d1eff,
+                #053b06ff,
+                #000000ff
 );
 $gradient-top-left: linear-gradient(
-    225deg,
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
+                225deg,
+                #0dab76ff,
+                #139a43ff,
+                #0b5d1eff,
+                #053b06ff,
+                #000000ff
 );
 $gradient-bottom-left: linear-gradient(
-    315deg,
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
+                315deg,
+                #0dab76ff,
+                #139a43ff,
+                #0b5d1eff,
+                #053b06ff,
+                #000000ff
 );
 $gradient-radial: radial-gradient(
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
+                #0dab76ff,
+                #139a43ff,
+                #0b5d1eff,
+                #053b06ff,
+                #000000ff
 );
 
 $primary: #5b86be;
 $secondary: #d9cca1;
 $success: #80c671;
 $background: #f4f6fa;
+
 $table-striped-bg-factor: 0.03;
 $dropdown-bg: rgb(206, 223, 210);
 
@@ -109,24 +110,28 @@ $themes: (
                 accent: #488e39,
         ),
 );
-:root{
-    --linearPrimarySecondary: linear-gradient(#5b86be, #d9cca1);
-    --linearPrimaryAccent: linear-gradient(#5b86be, #80c671);
-    --linearSecondaryAccent: linear-gradient(#d9cca1, #80c671);
-    --radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1);
-    --radialPrimaryAccent: radial-gradient(#5b86be, #80c671);
-    --radialSecondaryAccent: radial-gradient(#d9cca1, #80c671);
-    --border-color: #ccc;
-    --main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
-    --main-font-color: #444;
-    --input-bg: rgb(245,245,249);
-    --text: #010b05;
-    --background: #f7fefa;
-    --primary: #1ce776;
-    --secondary: #7bc8f1;
-    --accent: #5086ed;
-    --success: #80c671;
-    --error: red;
+:root {
+  --linearPrimarySecondary: linear-gradient(#5b86be, #d9cca1);
+  --linearPrimaryAccent: linear-gradient(#5b86be, #80c671);
+  --linearSecondaryAccent: linear-gradient(#d9cca1, #80c671);
+  --radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1);
+  --radialPrimaryAccent: radial-gradient(#5b86be, #80c671);
+  --radialSecondaryAccent: radial-gradient(#d9cca1, #80c671);
+  --border-color: #cecece;
+  --main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
+  --main-font-color: #444;
+  --input-bg: rgb(245, 245, 249);
+  --text: #010b05;
+  --background: #f7fefa;
+  --background-stack: #f0f6f3;
+  --background-2: #E8EBEAFF;
+  --background-3: #C2C7C5FF;
+  --background-button: #ddd;
+  --primary: #1ce776;
+  --secondary: #7bc8f1;
+  --accent: #5086ed;
+  --success: #80c671;
+  --error: red;
 
 }
 
@@ -154,45 +159,53 @@ $themes: (
 @import "./switch";
 @import "./preview";
 @import "./dialog";
+@import "./autocomplete";
+@import "./reference-tags";
 
 body {
-    background-color: var(--background);
-    font-family: var(--main-font), sans-serif;
+  background-color: var(--background);
+  font-family: var(--main-font), sans-serif;
 }
 
 .btn-spinner .spinner-border {
-    display: none;
+  display: none;
 }
+
 .btn-spinner.spinner-on .spinner-border {
-    display: inline-block;
+  display: inline-block;
 }
 
 .cursor-pointer {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 
-a{
-    color: var(--text);
-    text-decoration: none;
+a {
+  color: var(--text);
+  text-decoration: none;
 }
 
 .spinner-border {
-    width: 9px;
-    height: 9px;
-    border: 2px solid #FFF;
-    border-bottom-color: #FF3D00;
-    border-radius: 50%;
-    display: inline-block;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
+  width: 9px;
+  height: 9px;
+  border: 2px solid #FFF;
+  border-bottom-color: #FF3D00;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
 }
 
 @keyframes rotation {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
\ No newline at end of file
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.lucent-component {
+  position: relative;
+}
+