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>

frontend/layouts/default.vue

@@ -2,6 +2,7 @@
 import TextEditor from '~/components/viewers/TextEditor.vue';
 import ImageViewer from '@/components/viewers/ImageViewer.vue';
 import { Separator } from '@/components/ui/separator';
+import CreateFileDialog from '~/components/actions/CreateFileDialog.vue';
 import CreateDirectoryDialog from '~/components/actions/CreateDirectoryDialog.vue';
 import UploadDialog from '~/components/actions/UploadDialog.vue';
 import { getWarrens } from '~/lib/api/warrens';
@@ -82,6 +83,15 @@ await useAsyncData('warrens', async () => {
                                 ></div>
                             </Button>
                         </UploadDialog>
+                        <CreateFileDialog>
+                            <Button
+                                v-if="route.path.startsWith('/warrens/')"
+                                variant="outline"
+                                size="icon"
+                            >
+                                <Icon name="lucide:file-plus" />
+                            </Button>
+                        </CreateFileDialog>
                         <CreateDirectoryDialog>
                             <Button
                                 v-if="route.path.startsWith('/warrens/')"

frontend/stores/index.ts

@@ -198,7 +198,23 @@ export const useWarrenStore = defineStore('warrens', {
     },
 });
 
-export const useCreateDirectoryDialog = defineStore('create_directory_dialog', {
+export const useCreateDirectoryDialog = defineStore('create-directory-dialog', {
+    state: () => ({
+        open: false,
+        value: '',
+    }),
+    actions: {
+        openDialog() {
+            this.open = true;
+        },
+        reset() {
+            this.open = false;
+            this.value = '';
+        },
+    },
+});
+
+export const useCreateFileDialog = defineStore('create-file-dialog', {
     state: () => ({
         open: false,
         value: '',