minor collection ui adjustments

ui/src/components/collections/CollectionFieldsTab.svelte

@@ -159,6 +159,6 @@
 
 <NewField class="btn btn-block btn-outline" on:select={(e) => newField(e.detail)} />
 
-<div class="clearfix m-b-base" />
+<hr />
 
 <IndexesList bind:collection />

ui/src/components/collections/CollectionUpsertPanel.svelte

@@ -240,6 +240,7 @@
             if (!CommonHelper.isEmpty(clone.indexes)) {
                 for (let i = 0; i < clone.indexes.length; i++) {
                     const parsed = CommonHelper.parseIndex(clone.indexes[i]);
+                    parsed.indexName = "idx_" + CommonHelper.randomString(7);
                     parsed.tableName = clone.name;
                     clone.indexes[i] = CommonHelper.buildIndex(parsed);
                 }

ui/src/components/collections/IndexesList.svelte

@@ -32,7 +32,7 @@
         {@const parsed = CommonHelper.parseIndex(rawIndex)}
         <button
             type="button"
-            class="label link-primary {$errors.indexes?.[i]?.message ? 'label-danger' : 'label-info'}"
+            class="label link-primary {$errors.indexes?.[i]?.message ? 'label-danger' : ''}"
             use:tooltip={$errors.indexes?.[i]?.message || ""}
             on:click={() => upsertPanel?.show(rawIndex, i)}
         >
@@ -44,7 +44,11 @@
             </span>
         </button>
     {/each}
-    <button type="button" class="label label-primary link-fade" on:click={() => upsertPanel?.show()}>
+    <button
+        type="button"
+        class="btn btn-xs btn-transparent btn-pill btn-outline"
+        on:click={() => upsertPanel?.show()}
+    >
         <span class="txt">+</span>
         <span class="txt">New index</span>
     </button>

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

@@ -1,5 +1,6 @@
 <script>
     import { createEventDispatcher } from "svelte";
+    import { slide } from "svelte/transition";
     import { SchemaField } from "pocketbase";
     import CommonHelper from "@/utils/CommonHelper";
     import tooltip from "@/actions/tooltip";
@@ -73,6 +74,7 @@
     draggable={true}
     class="schema-field"
     class:drag-over={isDragOver}
+    transition:slide|local={{ duration: 150 }}
     on:dragstart={(e) => {
         if (!e.target.classList.contains("drag-handle-wrapper")) {
             e.preventDefault();

ui/src/scss/_form.scss

@@ -246,6 +246,11 @@ button {
         width: 100%;
     }
 
+    // pill
+    &.btn-pill {
+        border-radius: 30px;
+    }
+
     // circle
     &.btn-circle {
         border-radius: 50%;