show image preview + single file downloads

frontend/components/DirectoryEntry.vue

@@ -12,6 +12,7 @@ import {
     fetchFile,
 } from '~/lib/api/warrens';
 import type { DirectoryEntry } from '#shared/types';
+import { toast } from 'vue-sonner';
 
 const warrenStore = useWarrenStore();
 const copyStore = useCopyStore();
@@ -110,6 +111,30 @@ function onCopy() {
         entry.name
     );
 }
+
+async function onDownload() {
+    if (warrenStore.current == null) {
+        return;
+    }
+
+    if (entry.fileType !== 'file') {
+        toast.warning('Download', {
+            description: 'Directory downloads are not supported yet',
+        });
+        return;
+    }
+
+    const anchor = document.createElement('a');
+
+    anchor.download = entry.name;
+    anchor.href = getApiUrl(
+        `warrens/files/cat?warrenId=${warrenStore.current.warrenId}&path=${joinPaths(warrenStore.current.path, entry.name)}`
+    );
+    anchor.rel = 'noopener';
+    anchor.target = '_blank';
+
+    anchor.click();
+}
 </script>
 
 <template>
@@ -128,6 +153,11 @@ function onCopy() {
             >
                 <div class="flex flex-row items-center">
                     <Icon
+                        v-if="
+                            entry.fileType !== 'file' ||
+                            entry.mimeType == null ||
+                            !entry.mimeType.startsWith('image/')
+                        "
                         class="size-6"
                         :name="
                             entry.fileType === 'file'
@@ -135,6 +165,23 @@ function onCopy() {
                                 : 'lucide:folder'
                         "
                     />
+                    <object
+                        v-else
+                        :type="entry.mimeType"
+                        class="size-6 object-cover"
+                        width="24"
+                        height="24"
+                        :data="
+                            getApiUrl(
+                                `warrens/files/cat?warrenId=${warrenStore.current!.warrenId}&path=${joinPaths(warrenStore.current!.path, entry.name)}`
+                            )
+                        "
+                    >
+                        <Icon
+                            class="size-6"
+                            :name="getFileIcon(entry.mimeType)"
+                        />
+                    </object>
                 </div>
 
                 <div
@@ -159,6 +206,13 @@ function onCopy() {
                 <Icon name="lucide:copy" />
                 Copy
             </ContextMenuItem>
+            <ContextMenuItem
+                :disabled="entry.fileType !== 'file'"
+                @select="onDownload"
+            >
+                <Icon name="lucide:download" />
+                Download
+            </ContextMenuItem>
 
             <ContextMenuSeparator />