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">

frontend/components/ImageViewer.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const warrenStore = useWarrenStore();
+
+function onOpenUpdate(state: boolean) {
+    if (!state) {
+        warrenStore.imageViewer.src = null;
+    }
+}
+</script>
+
+<template>
+    <Dialog
+        :open="warrenStore.imageViewer.src != null"
+        @update:open="onOpenUpdate"
+    >
+        <DialogTrigger>
+            <slot />
+        </DialogTrigger>
+        <DialogContent
+            class="w-full overflow-hidden p-0 sm:!max-h-[90vh] sm:!max-w-[90vw]"
+        >
+            <img
+                v-if="warrenStore.imageViewer.src"
+                class="h-full w-full overflow-hidden !object-contain"
+                :src="warrenStore.imageViewer.src"
+            />
+        </DialogContent>
+    </Dialog>
+</template>