added presentable file field fallback

ui/src/components/base/CopyIcon.svelte

@@ -1,9 +1,10 @@
 <script>
     import { onMount } from "svelte";
     import CommonHelper from "@/utils/CommonHelper";
-    import tooltip from "@/actions/tooltip";
+    import tooltipAction from "@/actions/tooltip";
 
     export let value = "";
+    export let tooltip = "Copy";
     export let idleClasses = "ri-file-copy-line txt-sm link-hint";
     export let successClasses = "ri-check-line txt-sm txt-success";
     export let successDuration = 500; // ms
@@ -34,9 +35,10 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <i
     class={copyTimeout ? successClasses : idleClasses}
-    aria-label={"Copy"}
+    aria-label={"Copy to clipboard"}
-    use:tooltip={!copyTimeout ? "Copy" : ""}
+    use:tooltipAction={!copyTimeout ? tooltip : undefined}
     on:click|stopPropagation={copy}
 />

ui/src/components/collections/CollectionSidebarItem.svelte

@@ -2,9 +2,7 @@
     import { link } from "svelte-spa-router";
     import CommonHelper from "@/utils/CommonHelper";
     import tooltip from "@/actions/tooltip";
-    import { hideControls } from "@/stores/app";
+    import { activeCollection } from "@/stores/collections";
-    import { collections, activeCollection, isCollectionsLoading } from "@/stores/collections";
-    import CollectionUpsertPanel from "@/components/collections/CollectionUpsertPanel.svelte";
 
     export let collection;
     export let pinnedIds;

ui/src/components/records/RecordInfo.svelte

@@ -6,13 +6,37 @@
 
     export let record;
 
+    let fileDisplayFields = [];
+    let nonFileDisplayFields = [];
+
     $: collection = $collections?.find((item) => item.id == record?.collectionId);
 
-    $: fileDisplayFields =
+    $: if (collection) {
-        collection?.schema?.filter((f) => f.presentable && f.type == "file")?.map((f) => f.name) || [];
+        loadDisplayFields();
+    }
 
-    $: textDisplayFields =
+    function loadDisplayFields() {
-        collection?.schema?.filter((f) => f.presentable && f.type != "file")?.map((f) => f.name) || [];
+        const fields = collection?.schema || [];
+
+        // reset
+        fileDisplayFields = fields.filter((f) => f.presentable && f.type == "file").map((f) => f.name);
+        nonFileDisplayFields = fields.filter((f) => f.presentable && f.type != "file").map((f) => f.name);
+
+        // fallback to the first single file field that accept images
+        // if no presentable field is available
+        if (!fileDisplayFields.length && !nonFileDisplayFields.length) {
+            const fallbackFileField = fields.find((f) => {
+                return (
+                    f.type == "file" &&
+                    f.options?.maxSelect == 1 &&
+                    f.options?.mimeTypes?.find((t) => t.startsWith("image/"))
+                );
+            });
+            if (fallbackFileField) {
+                fileDisplayFields.push(fallbackFileField.name);
+            }
+        }
+    }
 </script>
 
 <div class="record-info">
@@ -22,7 +46,7 @@
             text: CommonHelper.truncate(
                 JSON.stringify(CommonHelper.truncateObject(record), null, 2),
                 800,
-                true
+                true,
             ),
             class: "code",
             position: "left",
@@ -39,7 +63,7 @@
     {/each}
 
     <span class="txt txt-ellipsis">
-        {CommonHelper.truncate(CommonHelper.displayValue(record, textDisplayFields), 70)}
+        {CommonHelper.truncate(CommonHelper.displayValue(record, nonFileDisplayFields), 70)}
     </span>
 </div>
 
@@ -51,10 +75,6 @@
         max-width: 100%;
         min-width: 0;
         gap: 5px;
-        line-height: normal;
-        > * {
-            line-height: inherit;
-        }
         :global(.thumb) {
             box-shadow: none;
         }

ui/src/components/records/RecordsList.svelte

@@ -83,7 +83,7 @@
             return { id: f.id, name: f.name };
         }),
         hasCreated ? { id: "@created", name: "created" } : [],
-        hasUpdated ? { id: "@updated", name: "updated" } : []
+        hasUpdated ? { id: "@updated", name: "updated" } : [],
     );
 
     function updateStoredHiddenColumns() {
@@ -282,7 +282,7 @@
         return Promise.all(promises)
             .then(() => {
                 addSuccessToast(
-                    `Successfully deleted the selected ${totalBulkSelected === 1 ? "record" : "records"}.`
+                    `Successfully deleted the selected ${totalBulkSelected === 1 ? "record" : "records"}.`,
                 );
 
                 dispatch("delete", bulkSelected);

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

@@ -76,7 +76,7 @@
                     filter: filters.join("||"),
                     fields: "*:excerpt(200)",
                     requestKey: null,
-                })
+                }),
             );
         }
 

ui/src/scss/_base.scss

@@ -489,7 +489,7 @@ a,
     background: var(--baseAlt2Color);
     color: var(--txtPrimaryColor);
     white-space: nowrap;
-    border-radius: 30px;
+    border-radius: 15px;
 
     .btn:last-child {
         margin-right: calc(-0.5 * var(--labelHPadding));