create new file dialog in nav and context menu

frontend/components/DirectoryListContextMenu.vue

@@ -9,6 +9,7 @@ import {
 const warrenStore = useWarrenStore();
 const copyStore = useCopyStore();
 const createDirectoryDialog = useCreateDirectoryDialog();
+const createFileDialog = useCreateFileDialog();
 
 const pasting = ref<boolean>(false);
 const validPaste = computed(
@@ -51,6 +52,10 @@ async function onPaste() {
                 <Icon name="lucide:clipboard-paste" />
                 Paste
             </ContextMenuItem>
+            <ContextMenuItem @select="createFileDialog.openDialog">
+                <Icon name="lucide:file-plus" />
+                Create file
+            </ContextMenuItem>
             <ContextMenuItem @select="createDirectoryDialog.openDialog">
                 <Icon name="lucide:folder-plus" />
                 Create directory

frontend/components/actions/CreateFileDialog.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import {
+    Dialog,
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+    DialogFooter,
+} from '@/components/ui/dialog';
+import { uploadToWarren } from '~/lib/api/warrens';
+
+const warrenStore = useWarrenStore();
+const dialog = useCreateFileDialog();
+
+const creating = ref(false);
+const fileNameValid = computed(() => dialog.value.trim().length > 0);
+
+async function submit() {
+    if (!fileNameValid.value || creating.value || warrenStore.current == null) {
+        return;
+    }
+
+    creating.value = true;
+
+    const dt = new DataTransfer();
+    dt.items.add(new File([], dialog.value));
+
+    const { success } = await uploadToWarren(
+        warrenStore.current.warrenId,
+        warrenStore.current.path,
+        dt.files,
+        undefined
+    );
+
+    creating.value = false;
+
+    if (success) {
+        dialog.reset();
+    }
+}
+
+function onKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+        submit();
+    }
+}
+
+function onOpenChange(state: boolean) {
+    if (!state) {
+        dialog.reset();
+    }
+}
+</script>
+
+<template>
+    <Dialog v-model:open="dialog.open" @update:open="onOpenChange">
+        <DialogTrigger as-child>
+            <slot />
+        </DialogTrigger>
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Create a file</DialogTitle>
+                <DialogDescription
+                    >Give your file a memorable name</DialogDescription
+                >
+            </DialogHeader>
+
+            <Input
+                v-model="dialog.value"
+                type="text"
+                name="file-name"
+                placeholder="my-awesome-file"
+                aria-required="true"
+                autocomplete="off"
+                required
+                @keydown="onKeyDown"
+            />
+
+            <DialogFooter>
+                <Button :disabled="!fileNameValid || creating" @click="submit"
+                    >Create</Button
+                >
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>