basic file sharing

frontend/pages/warrens/files.vue

@@ -3,7 +3,8 @@ import { useDropZone } from '@vueuse/core';
 import { toast } from 'vue-sonner';
 import DirectoryListContextMenu from '~/components/DirectoryListContextMenu.vue';
 import RenameEntryDialog from '~/components/actions/RenameEntryDialog.vue';
-import { getWarrenDirectory } from '~/lib/api/warrens';
+import { fetchFile, getWarrenDirectory } from '~/lib/api/warrens';
+import type { DirectoryEntry } from '~/shared/types';
 
 definePageMeta({
     middleware: ['authenticated'],
@@ -31,7 +32,10 @@ const dirData = useAsyncData(
     'current-directory',
     async () => {
         if (warrenStore.current == null) {
-            return [];
+            return {
+                files: [],
+                parent: null,
+            };
         }
 
         loadingIndicator.start();
@@ -74,6 +78,57 @@ function onDrop(files: File[] | null, e: DragEvent) {
         uploadStore.dialogOpen = true;
     }
 }
+
+async function onEntryClicked(entry: DirectoryEntry) {
+    if (warrenStore.loading || warrenStore.current == null) {
+        return;
+    }
+
+    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;
+        }
+    }
+}
+
+function onEntryDownload(entry: DirectoryEntry) {
+    if (warrenStore.current == null) {
+        return;
+    }
+
+    if (entry.fileType !== 'file') {
+        toast.warning('Download', {
+            description: 'Directory downloads are not supported yet',
+        });
+        return;
+    }
+
+    downloadFile(
+        entry.name,
+        getApiUrl(
+            `warrens/files/cat?warrenId=${warrenStore.current.warrenId}&path=${joinPaths(warrenStore.current.path, entry.name)}`
+        )
+    );
+}
+
+function onBack() {
+    warrenStore.backCurrentPath();
+}
 </script>
 
 <template>
@@ -87,6 +142,9 @@ function onDrop(files: File[] | null, e: DragEvent) {
                 "
                 :entries="dirData.files"
                 :parent="dirData.parent"
+                @entry-click="onEntryClicked"
+                @entry-download="onEntryDownload"
+                @back="onBack"
             />
         </DirectoryListContextMenu>
         <RenameEntryDialog />