rename directory entries

frontend/components/DirectoryEntry.vue

@@ -4,13 +4,14 @@ import {
     ContextMenuTrigger,
     ContextMenuContent,
     ContextMenuItem,
+    ContextMenuSeparator,
 } from '@/components/ui/context-menu';
 import { deleteWarrenDirectory, deleteWarrenFile } from '~/lib/api/warrens';
 import type { DirectoryEntry } from '~/types';
-import { buttonVariants } from '@/components/ui/button';
 
 const route = useRoute();
 const warrenRoute = useWarrenRoute();
+const renameDialog = useRenameDirectoryDialog();
 
 const { entry, disabled } = defineProps<{
     entry: DirectoryEntry;
@@ -30,6 +31,10 @@ async function submitDelete(force: boolean = false) {
 
     deleting.value = false;
 }
+
+async function openRenameDialog() {
+    renameDialog.openDialog(entry);
+}
 </script>
 
 <template>
@@ -62,6 +67,13 @@ async function submitDelete(force: boolean = false) {
             </NuxtLink>
         </ContextMenuTrigger>
         <ContextMenuContent>
+            <ContextMenuItem @select="openRenameDialog">
+                <Icon name="lucide:pencil" />
+                Rename
+            </ContextMenuItem>
+
+            <ContextMenuSeparator />
+
             <ContextMenuItem @select="() => submitDelete(false)">
                 <Icon name="lucide:trash-2" />
                 Delete

frontend/components/actions/CreateDirectoryDialog.vue

@@ -14,24 +14,17 @@ const warrenRoute = useWarrenRoute();
 const dialog = useCreateDirectoryDialog();
 
 const creating = ref(false);
-const directoryName = ref('');
-const directoryNameValid = computed(
-    () => directoryName.value.trim().length > 0
-);
+const directoryNameValid = computed(() => dialog.value.trim().length > 0);
 
 async function submit() {
     creating.value = true;
 
-    const { success } = await createDirectory(
-        warrenRoute.value,
-        directoryName.value
-    );
+    const { success } = await createDirectory(warrenRoute.value, dialog.value);
 
     creating.value = false;
 
     if (success) {
-        directoryName.value = '';
-        dialog.open = false;
+        dialog.reset();
     }
 }
 </script>
@@ -50,7 +43,7 @@ async function submit() {
             </DialogHeader>
 
             <Input
-                v-model="directoryName"
+                v-model="dialog.value"
                 type="text"
                 name="directory-name"
                 placeholder="my-awesome-directory"

frontend/components/actions/RenameEntryDialog.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+    DialogFooter,
+} from '@/components/ui/dialog';
+import { renameWarrenEntry } from '~/lib/api/warrens';
+
+const warrenRoute = useWarrenRoute();
+const dialog = useRenameDirectoryDialog();
+
+const renaming = ref(false);
+const directoryNameValid = computed(() => dialog.value.trim().length > 0);
+
+async function submit() {
+    if (dialog.entry == null) {
+        return;
+    }
+
+    renaming.value = true;
+
+    const { success } = await renameWarrenEntry(
+        warrenRoute.value,
+        dialog.entry.name,
+        dialog.value
+    );
+
+    renaming.value = false;
+
+    if (success) {
+        dialog.reset();
+    }
+}
+</script>
+
+<template>
+    <Dialog v-model:open="dialog.open">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Rename your directory</DialogTitle>
+                <DialogDescription
+                    >Give your directory a new memorable name</DialogDescription
+                >
+            </DialogHeader>
+
+            <Input
+                v-model="dialog.value"
+                type="text"
+                name="directory-name"
+                placeholder="my-awesome-directory"
+                aria-required="true"
+                autocomplete="off"
+                required
+            />
+
+            <DialogFooter>
+                <Button
+                    :disabled="!directoryNameValid || renaming"
+                    @click="submit"
+                    >Rename</Button
+                >
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>