added predefined mime types list and other minor ui improvements

ui/src/components/base/CopyIcon.svelte

@@ -0,0 +1,41 @@
+<script>
+    import { onMount } from "svelte";
+    import CommonHelper from "@/utils/CommonHelper";
+    import tooltip from "@/actions/tooltip";
+
+    export let value = "";
+    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
+
+    let copyTimeout;
+
+    function copy() {
+        if (!value) {
+            return;
+        }
+
+        CommonHelper.copyToClipboard(value);
+
+        clearTimeout(copyTimeout);
+        copyTimeout = setTimeout(() => {
+            clearTimeout(copyTimeout);
+            copyTimeout = null;
+        }, successDuration);
+    }
+
+    onMount(() => {
+        return () => {
+            if (copyTimeout) {
+                clearTimeout(copyTimeout);
+            }
+        };
+    });
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<i
+    class={copyTimeout ? successClasses : idleClasses}
+    use:tooltip={!copyTimeout ? "Copy" : ""}
+    on:click|stopPropagation={copy}
+/>

ui/src/components/base/MimeTypeSelectOption.svelte

@@ -0,0 +1,6 @@
+<script>
+    export let item = {}; // {ext, mimeType}
+</script>
+
+<span class="txt">{item.ext || "N/A"}</span>
+<small class="txt-hint">{item.mimeType}</small>

ui/src/components/base/OverlayPanel.svelte

@@ -93,13 +93,13 @@
             dispatch("show");
             document.body.classList.add("overlay-active");
         } else {
-            clearTimeout(contentScrollThrottle);
-            oldFocusedElem?.focus();
-            dispatch("hide");
-
             if (getHolder().querySelectorAll(".overlay-panel-container.active").length <= 1) {
                 document.body.classList.remove("overlay-active");
             }
+
+            clearTimeout(contentScrollThrottle);
+            oldFocusedElem?.focus();
+            dispatch("hide");
         }
 
         await tick();

ui/src/components/base/Select.svelte

@@ -11,9 +11,9 @@
     export let items = [];
     export let multiple = false;
     export let disabled = false;
-    export let closable = true;
     export let selected = multiple ? [] : undefined;
     export let toggle = multiple; // toggle option on click
+    export let closable = true; // close the dropdown on option select/deselect
     export let labelComponent = undefined; // custom component to use for each selected option label
     export let labelComponentProps = {}; // props to pass to the custom option component
     export let optionComponent = undefined; // custom component to use for each dropdown option item