removed unused IdLabel component

ui/src/components/admins/PageAdmins.svelte

@@ -8,7 +8,6 @@
     import Searchbar from "@/components/base/Searchbar.svelte";
     import RefreshButton from "@/components/base/RefreshButton.svelte";
     import SortHeader from "@/components/base/SortHeader.svelte";
-    import IdLabel from "@/components/base/IdLabel.svelte";
     import FormattedDate from "@/components/base/FormattedDate.svelte";
     import HorizontalScroller from "@/components/base/HorizontalScroller.svelte";
     import SettingsSidebar from "@/components/settings/SettingsSidebar.svelte";
@@ -149,7 +148,7 @@
                         </td>
 
                         <td class="col-type-text col-field-id">
-                            <IdLabel id={admin.id} />
+                            <span class="label">{admin.id}</span>
                             {#if admin.id === $loggedAdmin.id}
                                 <span class="label label-warning m-l-5">You</span>
                             {/if}

ui/src/components/base/IdLabel.svelte

@@ -1,15 +0,0 @@
-<script>
-    export let id = "";
-
-    let shortId = id;
-
-    $: if (typeof id === "string" && id.length > 27) {
-        shortId = id.substring(0, 5) + "..." + id.substring(id.length - 10);
-    }
-</script>
-
-{#if id}
-    <span class="label txt-base txt-mono" title={id}>{shortId}</span>
-{:else}
-    <span class="txt txt-hint">N/A</span>
-{/if}

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

@@ -113,7 +113,7 @@
                 <i
                     class="ri-information-line link-hint"
                     use:tooltip={{
-                        text: "Optional select the field(s) that will be used in the listings UI. Leave empty for auto.",
+                        text: "Optionally select the field(s) that will be used in the listings UI. Leave empty for auto.",
                         position: "top",
                     }}
                 />
@@ -122,6 +122,7 @@
                 multiple
                 searchable
                 id={uniqueId}
+                selectPlaceholder="Auto"
                 items={displayFieldsList}
                 bind:selected={options.displayFields}
             />

ui/src/components/logs/LogsList.svelte

@@ -221,7 +221,7 @@
     <div class="block txt-center m-t-xs">
         <button
             type="button"
-            class="btn btn-lg btn-transparent btn-expanded"
+            class="btn btn-lg btn-secondary btn-expanded"
             class:btn-loading={isLoading}
             class:btn-disabled={isLoading}
             on:click={() => load(currentPage + 1)}

ui/src/components/records/RecordFieldCell.svelte

@@ -2,7 +2,6 @@
     import CommonHelper from "@/utils/CommonHelper";
     import tooltip from "@/actions/tooltip";
     import FormattedDate from "@/components/base/FormattedDate.svelte";
-    import IdLabel from "@/components/base/IdLabel.svelte";
     import RecordFileThumb from "@/components/records/RecordFileThumb.svelte";
     import RecordInfo from "@/components/records/RecordInfo.svelte";
 
@@ -55,8 +54,8 @@
                     </span>
                 {/each}
             {:else}
-                {#each relations.slice(0, 20) as item, i (i + item)}
-                    <IdLabel id={item} />
+                {#each relations.slice(0, 20) as id}
+                    <span class="label">{id}</span>
                 {/each}
             {/if}
             {#if relations.length > 20}

ui/src/components/records/RecordsList.svelte

@@ -10,7 +10,6 @@
     import Toggler from "@/components/base/Toggler.svelte";
     import Field from "@/components/base/Field.svelte";
     import FormattedDate from "@/components/base/FormattedDate.svelte";
-    import IdLabel from "@/components/base/IdLabel.svelte";
     import HorizontalScroller from "@/components/base/HorizontalScroller.svelte";
     import RecordFieldCell from "@/components/records/RecordFieldCell.svelte";
 
@@ -21,7 +20,6 @@
     export let sort = "";
     export let filter = "";
 
-    let recordPanel;
     let records = [];
     let currentPage = 1;
     let totalRecords = 0;
@@ -381,7 +379,7 @@
                     {#if !hiddenColumns.includes("@id")}
                         <td class="col-type-text col-field-id">
                             <div class="flex flex-gap-5">
-                                <IdLabel id={record.id} />
+                                <span class="label">{record.id}</span>
 
                                 {#if collection.isAuth}
                                     {#if record.verified}
@@ -490,7 +488,7 @@
     <div class="block txt-center m-t-xs">
         <button
             type="button"
-            class="btn btn-lg btn-transparent btn-expanded"
+            class="btn btn-lg btn-secondary btn-expanded"
             class:btn-loading={isLoading}
             class:btn-disabled={isLoading}
             on:click={() => load(currentPage + 1)}

ui/src/components/records/fields/RelationField.svelte

@@ -118,8 +118,13 @@
         </div>
 
         <div class="list-item list-item-btn">
-            <button type="button" class="btn btn-transparent btn-sm btn-block" on:click={() => picker?.show()}>
-                <i class="ri-layout-line" />
+            <button
+                type="button"
+                class="btn btn-transparent btn-sm btn-block"
+                on:click={() => picker?.show()}
+            >
+                <i class="ri-magic-line" />
+                <!-- <i class="ri-layout-line" /> -->
                 <span class="txt">Open picker</span>
             </button>
         </div>
@@ -132,7 +137,7 @@
     {field}
     on:save={(e) => {
         list = e.detail || [];
-        value = isMultiple ? list.map((r) => r.id) : list[0] || "";
+        value = isMultiple ? list.map((r) => r.id) : list[0].id || "";
     }}
 />