added required field marker

ui/src/components/collections/schema/SchemaField.svelte

@@ -8,8 +8,6 @@
     import Toggler from "@/components/base/Toggler.svelte";
     import Field from "@/components/base/Field.svelte";
 
-    const dispatch = createEventDispatcher();
-
     export let key = "";
     export let field = new SchemaField();
 
@@ -17,6 +15,13 @@
     let optionsTrigger;
     let isDragOver = false;
 
+    const dispatch = createEventDispatcher();
+    const customRequiredLabels = {
+        // type => label
+        bool: "Nonfalsey",
+        number: "Nonzero",
+    };
+
     $: if (field.toDelete) {
         // reset the name if it was previously deleted
         if (field.originalName && field.name !== field.originalName) {
@@ -40,6 +45,8 @@
 
     $: hasErrors = !CommonHelper.isEmpty(CommonHelper.getNestedVal($errors, `schema.${key}`));
 
+    $: requiredLabel = customRequiredLabels[field?.type] || "Nonempty";
+
     function remove() {
         if (!field.id) {
             dispatch("remove");
@@ -59,17 +66,6 @@
         return CommonHelper.slugify(name);
     }
 
-    function requiredLabel(field) {
-        switch (field?.type) {
-            case "bool":
-                return "Nonfalsey";
-            case "number":
-                return "Nonzero";
-            default:
-                return "Nonempty";
-        }
-    }
-
     onMount(() => {
         if (field.onMountSelect) {
             field.onMountSelect = false;
@@ -124,10 +120,15 @@
             name="schema.{key}.name"
             inlineError
         >
+            <div class="markers">
+                {#if field.required}
+                    <span class="marker marker-required" use:tooltip={requiredLabel} />
+                {/if}
+            </div>
+
             <div
                 class="form-field-addon prefix no-pointer-events field-type-icon"
                 class:txt-disabled={!interactive}
-                class:new={!field.id}
             >
                 <i class={CommonHelper.getFieldTypeIcon(field.type)} />
             </div>
@@ -190,7 +191,7 @@
                     <Field class="form-field form-field-toggle m-0" name="requried" let:uniqueId>
                         <input type="checkbox" id={uniqueId} bind:checked={field.required} />
                         <label for={uniqueId}>
-                            <span class="txt">{requiredLabel(field)}</span>
+                            <span class="txt">{requiredLabel}</span>
                             <i
                                 class="ri-information-line link-hint"
                                 use:tooltip={{

ui/src/scss/_schema_field.scss

@@ -20,17 +20,6 @@
     .form-field {
         margin: 0;
     }
-    .field-type-icon.new:after {
-        $size: 4px;
-        content: "";
-        position: absolute;
-        left: -6px;
-        top: 9px;
-        width: $size;
-        height: $size;
-        border-radius: $size;
-        background: var(--baseAlt4Color);
-    }
     .options-trigger {
         i {
             transition: transform var(--baseAnimationSpeed);
@@ -63,6 +52,25 @@
         }
     }
 
+    // markers
+    .markers {
+        position: absolute;
+        z-index: 1;
+        left: 7px;
+        top: 6px;
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        .marker {
+            $size: 4px;
+            display: block;
+            width: $size;
+            height: $size;
+            border-radius: $size;
+            background: var(--baseAlt4Color);
+        }
+    }
+
     // states
     &:hover,
     &:active {