directory back up (parent) button + drag entry into parent to move

frontend/components/DirectoryBackEntry.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { DirectoryEntry } from '~/shared/types';
+
+const { entry } = defineProps<{ entry: DirectoryEntry }>();
+
+const warrenStore = useWarrenStore();
+
+const onDrop = onDirectoryEntryDrop(entry, true);
+</script>
+
+<template>
+    <button
+        class="bg-accent/30 border-border flex w-52 translate-0 flex-row gap-4 overflow-hidden rounded-md border-1 px-4 py-2 select-none"
+        @contextmenu.prevent
+        @click="() => warrenStore.backCurrentPath()"
+        @drop="onDrop"
+    >
+        <div class="flex flex-row items-center">
+            <Icon class="size-6" name="lucide:folder-up" />
+        </div>
+        <div
+            class="flex w-full flex-col items-start justify-stretch gap-0 overflow-hidden text-left leading-6"
+        >
+            <span class="w-full truncate"
+                >..
+                <span class="text-muted-foreground truncate text-sm"
+                    >({{ entry.name }})</span
+                ></span
+            >
+            <NuxtTime
+                v-if="entry.createdAt != null"
+                :datetime="entry.createdAt * 1000"
+                class="text-muted-foreground w-full truncate text-sm"
+                relative
+            ></NuxtTime>
+        </div>
+    </button>
+</template>

frontend/components/DirectoryEntry.vue

@@ -89,28 +89,7 @@ function onDragStart(e: DragEvent) {
     e.dataTransfer.dropEffect = 'move';
 }
 
-async function onDrop(e: DragEvent) {
-    if (e.dataTransfer == null || warrenStore.current == null) {
-        return;
-    }
-
-    if (entry.fileType !== 'directory') {
-        return;
-    }
-
-    const fileName = e.dataTransfer.getData('application/warren');
-
-    if (entry.name === fileName) {
-        return;
-    }
-
-    await moveFile(
-        warrenStore.current.warrenId,
-        warrenStore.current.path,
-        fileName,
-        `${warrenStore.current.path}/${entry.name}`
-    );
-}
+const onDrop = onDirectoryEntryDrop(entry);
 </script>
 
 <template>
@@ -118,7 +97,7 @@ async function onDrop(e: DragEvent) {
         <ContextMenuTrigger>
             <button
                 :disabled="warrenStore.loading || disabled"
-                class="bg-accent/30 border-border select-none, flex w-52 translate-0 flex-row gap-4 overflow-hidden rounded-md border-1 px-4 py-2"
+                class="bg-accent/30 border-border flex w-52 translate-0 flex-row gap-4 overflow-hidden rounded-md border-1 px-4 py-2 select-none"
                 draggable="true"
                 @dragstart="onDragStart"
                 @drop="onDrop"

frontend/components/DirectoryList.vue

@@ -2,8 +2,9 @@
 import { ScrollArea } from '@/components/ui/scroll-area';
 import type { DirectoryEntry } from '#shared/types';
 
-const { entries, isOverDropZone } = defineProps<{
+const { entries, parent, isOverDropZone } = defineProps<{
     entries: DirectoryEntry[];
+    parent: DirectoryEntry | null;
     isOverDropZone?: boolean;
 }>();
 
@@ -23,6 +24,7 @@ const sortedEntries = computed(() =>
             <Icon class="size-16 animate-pulse" name="lucide:upload" />
         </div>
         <div class="flex flex-row flex-wrap gap-2">
+            <DirectoryBackEntry v-if="parent != null" :entry="parent" />
             <DirectoryEntry
                 v-for="entry in sortedEntries"
                 :key="entry.name"