updated files preview ui

ui/src/components/records/RecordFieldCell.svelte

@@ -66,3 +66,9 @@
         </span>
     {/if}
 </td>
+
+<style>
+    .filename {
+        max-width: 200px;
+    }
+</style>

ui/src/components/records/RecordFileThumb.svelte

@@ -3,16 +3,18 @@
     import CommonHelper from "@/utils/CommonHelper";
     import PreviewPopup from "@/components/base/PreviewPopup.svelte";
 
-    export let record;
-    export let filename;
-    export let size;
+    export let record = null;
+    export let filename = "";
+    export let size = ""; // sm/lg/xl
 
     let previewPopup;
     let thumbUrl = "";
-    let originalUrl = ApiClient.getFileUrl(record, `${filename}`);
+    let originalUrl = ApiClient.getFileUrl(record, filename);
 
     $: type = CommonHelper.getFileType(filename);
-    $: hasPreview = ["image", "pdf"].includes(type);
+
+    $: hasPreview = ["image", "audio", "video"].includes(type) || filename.endsWith(".pdf");
+
     $: thumbUrl = originalUrl ? originalUrl + "?thumb=100x100" : "";
 
     function onError() {
@@ -21,23 +23,25 @@
 </script>
 
 <a
-    class="thumb thumb-{size} link-fade"
+    class="thumb {size ? `thumb-${size}` : ''}"
     href={originalUrl}
     target="_blank"
     rel="noreferrer"
+    title={(hasPreview ? "Preview" : "Download") + " " + filename}
     on:click|stopPropagation={(e) => {
-        if (!hasPreview) return;
-        e.preventDefault();
-        previewPopup?.show(originalUrl);
+        if (hasPreview) {
+            e.preventDefault();
+            previewPopup?.show(originalUrl);
+        }
     }}
 >
     {#if type === "image"}
         <img src={thumbUrl} alt={filename} title="Preview {filename}" on:error={onError} />
-    {:else if type === "pdf"}
-        <i class="ri-file-pdf-line" />
+    {:else if type === "video" || type === "audio"}
+        <i class="ri-video-line" />
     {:else}
         <i class="ri-file-3-line" />
     {/if}
 </a>
 
-<PreviewPopup bind:this={previewPopup} {type} />
+<PreviewPopup bind:this={previewPopup} />

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

@@ -86,7 +86,7 @@
                     href={ApiClient.getFileUrl(record, filename)}
                     class="filename link-hint"
                     class:txt-strikethrough={deletedFileIndexes.includes(i)}
-                    use:tooltip={{ position: "right", text: "Download" }}
+                    title="Download"
                     target="_blank"
                     rel="noopener noreferrer"
                 >