create dirs + delete dirs + delete files

frontend/components/DirectoryEntry.vue

@@ -1,30 +1,59 @@
 <script setup lang="ts">
+import {
+    ContextMenu,
+    ContextMenuTrigger,
+    ContextMenuContent,
+    ContextMenuItem,
+} from '@/components/ui/context-menu';
+import { deleteWarrenEntry } from '~/lib/api/warrens';
 import type { FileType } from '~/types';
 
 const route = useRoute();
+const warrenRoute = useWarrenRoute();
 
-const { name, entryType, disabled } = defineProps<{
+const { name, fileType, disabled } = defineProps<{
     name: string;
-    entryType: FileType;
-	disabled: boolean,
+    fileType: FileType;
+    disabled: boolean;
 }>();
 
-const iconName = entryType === 'file' ? 'lucide:file' : 'lucide:folder';
+const iconName = computed(() =>
+    fileType === 'file' ? 'lucide:file' : 'lucide:folder'
+);
+const deleting = ref(false);
+
+async function submitDelete() {
+    deleting.value = true;
+
+    await deleteWarrenEntry(warrenRoute.value, name, fileType);
+
+    deleting.value = false;
+}
 </script>
 
 <template>
-    <NuxtLink
-        :to="joinPaths(route.path, name)"
-        :class="['select-none', { 'pointer-events-none': disabled }]"
-    >
-        <Button
-            class="w-44 h-12"
-            variant="outline"
-            size="lg"
-            :disabled="disabled"
-        >
-            <Icon :name="iconName" />
-            <span class="truncate">{{ name }}</span>
-        </Button>
-    </NuxtLink>
+    <ContextMenu>
+        <ContextMenuTrigger>
+            <NuxtLink
+                :to="joinPaths(route.path, name)"
+                :class="['select-none', { 'pointer-events-none': disabled }]"
+            >
+                <Button
+                    class="w-44 h-12"
+                    variant="outline"
+                    size="lg"
+                    :disabled="disabled"
+                >
+                    <Icon :name="iconName" />
+                    <span class="truncate">{{ name }}</span>
+                </Button>
+            </NuxtLink>
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+            <ContextMenuItem @select="submitDelete">
+                <Icon name="lucide:trash-2" />
+                Delete
+            </ContextMenuItem>
+        </ContextMenuContent>
+    </ContextMenu>
 </template>