[#976] added optional RelationOptions.DisplayFields and refactored the relation picker UI

ui/src/components/collections/CollectionFieldsTab.svelte

@@ -1,8 +1,8 @@
 <script>
-    import { SchemaField } from "pocketbase";
+    import { Collection, SchemaField } from "pocketbase";
     import FieldAccordion from "@/components/collections/FieldAccordion.svelte";
 
-    export let collection = {};
+    export let collection = new Collection();
 
     const baseReservedNames = [
         "id",
@@ -36,8 +36,8 @@
         reservedNames = baseReservedNames.slice(0);
     }
 
-    $: if (typeof collection?.schema === "undefined") {
-        collection = collection || {};
+    $: if (typeof collection.schema === "undefined") {
+        collection = collection || new Collection();
         collection.schema = [];
     }
 
@@ -159,7 +159,7 @@
 
 <button
     type="button"
-    class="btn btn-block {collection?.isAuth || collection.schema?.length ? 'btn-secondary' : 'btn-warning'}"
+    class="btn btn-block {collection.schema.length ? 'btn-transparent' : 'btn-secondary'}"
     on:click={newField}
 >
     <i class="ri-add-line" />