view image files

frontend/components/DirectoryEntry.vue

@@ -6,7 +6,11 @@ import {
     ContextMenuItem,
     ContextMenuSeparator,
 } from '@/components/ui/context-menu';
-import { deleteWarrenDirectory, deleteWarrenFile } from '~/lib/api/warrens';
+import {
+    deleteWarrenDirectory,
+    deleteWarrenFile,
+    fetchFile,
+} from '~/lib/api/warrens';
 import type { DirectoryEntry } from '#shared/types';
 
 const warrenStore = useWarrenStore();
@@ -49,11 +53,30 @@ async function openRenameDialog() {
 }
 
 async function onClick() {
-    if (warrenStore.loading) {
+    if (warrenStore.loading || warrenStore.current == null) {
         return;
     }
 
-    warrenStore.addToCurrentWarrenPath(entry.name);
+    if (entry.fileType === 'directory') {
+        warrenStore.addToCurrentWarrenPath(entry.name);
+        return;
+    }
+
+    if (entry.mimeType == null) {
+        return;
+    }
+
+    if (entry.mimeType.startsWith('image/')) {
+        const result = await fetchFile(
+            warrenStore.current.warrenId,
+            warrenStore.current.path,
+            entry.name
+        );
+        if (result.success) {
+            const url = URL.createObjectURL(result.data);
+            warrenStore.imageViewer.src = url;
+        }
+    }
 }
 </script>
 
@@ -62,12 +85,7 @@ async function onClick() {
         <ContextMenuTrigger>
             <button
                 :disabled="warrenStore.loading || disabled"
-                :class="[
-                    'bg-accent/30 border-border flex w-52 flex-row gap-4 overflow-hidden rounded-md border-1 px-4 py-2 select-none',
-                    {
-                        'pointer-events-none': entry.fileType === 'file',
-                    },
-                ]"
+                class="bg-accent/30 border-border select-none, flex w-52 flex-row gap-4 overflow-hidden rounded-md border-1 px-4 py-2"
                 @click="onClick"
             >
                 <div class="flex flex-row items-center">