directory list context menu

frontend/components/DirectoryEntry.vue

@@ -18,11 +18,11 @@ const { entry, disabled } = defineProps<{
 
 const deleting = ref(false);
 
-async function submitDelete() {
+async function submitDelete(force: boolean = false) {
     deleting.value = true;
 
     if (entry.fileType === 'directory') {
-        await deleteWarrenDirectory(warrenRoute.value, entry.name);
+        await deleteWarrenDirectory(warrenRoute.value, entry.name, force);
     } else {
         await deleteWarrenFile(warrenRoute.value, entry.name);
     }
@@ -56,10 +56,20 @@ async function submitDelete() {
             </NuxtLink>
         </ContextMenuTrigger>
         <ContextMenuContent>
-            <ContextMenuItem @select="submitDelete">
+            <ContextMenuItem @select="() => submitDelete(false)">
                 <Icon name="lucide:trash-2" />
                 Delete
             </ContextMenuItem>
+            <ContextMenuItem
+                v-if="entry.fileType === 'directory'"
+                @select="() => submitDelete(true)"
+            >
+                <Icon
+                    class="text-destructive-foreground"
+                    name="lucide:trash-2"
+                />
+                Force delete
+            </ContextMenuItem>
         </ContextMenuContent>
     </ContextMenu>
 </template>

frontend/components/DirectoryListContextMenu.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import {
+    ContextMenu,
+    ContextMenuTrigger,
+    ContextMenuContent,
+    ContextMenuItem,
+} from '@/components/ui/context-menu';
+
+const dialog = useCreateDirectoryDialog();
+
+const props = defineProps<{
+    class?: string;
+}>();
+</script>
+
+<template>
+    <ContextMenu>
+        <ContextMenuTrigger :class="props.class">
+            <slot />
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+            <ContextMenuItem @select="dialog.openDialog">
+                <Icon name="lucide:folder-plus" />
+                Create directory
+            </ContextMenuItem>
+        </ContextMenuContent>
+    </ContextMenu>
+</template>

frontend/components/actions/CreateDirectoryDialog.vue

@@ -11,9 +11,9 @@ import {
 import { createDirectory } from '~/lib/api/warrens';
 
 const warrenRoute = useWarrenRoute();
+const dialog = useCreateDirectoryDialog();
 
 const creating = ref(false);
-const open = ref(false);
 const directoryName = ref('');
 
 async function submit() {
@@ -28,13 +28,13 @@ async function submit() {
 
     if (success) {
         directoryName.value = '';
-        open.value = false;
+        dialog.open = false;
     }
 }
 </script>
 
 <template>
-    <Dialog v-model:open="open">
+    <Dialog v-model:open="dialog.open">
         <DialogTrigger as-child>
             <slot />
         </DialogTrigger>