new schema and indexes ui

ui/src/components/base/Field.svelte

@@ -1,6 +1,7 @@
 <script>
     import { onMount } from "svelte";
-    import { slide } from "svelte/transition";
+    import { slide, scale } from "svelte/transition";
+    import tooltip from "@/actions/tooltip";
     import { errors, removeError } from "@/stores/errors";
     import CommonHelper from "@/utils/CommonHelper";
 
@@ -8,6 +9,7 @@
     const defaultError = "Invalid value";
 
     export let name = "";
+    export let inlineError = false;
 
     let classes = undefined;
     export { classes as class }; // export reserved keyword
@@ -32,19 +34,36 @@
             container.removeEventListener("change", changed);
         };
     });
+
+    function getErrorMessage(err) {
+        if (typeof err === "object") {
+            return err?.message || err?.code || defaultError;
+        }
+
+        return err || defaultError;
+    }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div bind:this={container} class={classes} class:error={fieldErrors.length} on:click>
     <slot {uniqueId} />
 
-    {#each fieldErrors as error}
-        <div class="help-block help-block-error" transition:slide|local={{ duration: 150 }}>
-            {#if typeof error === "object"}
-                <pre>{error?.message || error?.code || defaultError}</pre>
-            {:else}
-                {error || defaultError}
-            {/if}
+    {#if inlineError && fieldErrors.length}
+        <div class="form-field-addon">
+            <i
+                class="ri-error-warning-fill txt-danger"
+                transition:scale|local={{ duration: 150, start: 0.7 }}
+                use:tooltip={{
+                    position: "left",
+                    text: fieldErrors.map(getErrorMessage).join("\n"),
+                }}
+            />
         </div>
-    {/each}
+    {:else}
+        {#each fieldErrors as error}
+            <div class="help-block help-block-error" transition:slide|local={{ duration: 150 }}>
+                <pre>{getErrorMessage(error)}</pre>
+            </div>
+        {/each}
+    {/if}
 </div>