From cef77e86b7c5bd565b7c98c851a724c44721fbf7 Mon Sep 17 00:00:00 2001
From: 409 <409dev@protonmail.com>
Date: Sat, 6 Sep 2025 01:29:05 +0200
Subject: [PATCH] create new file dialog in nav and context menu

---
 .../components/DirectoryListContextMenu.vue   |  5 ++
 .../components/actions/CreateFileDialog.vue   | 87 +++++++++++++++++++
 frontend/layouts/default.vue                  | 10 +++
 frontend/stores/index.ts                      | 18 +++-
 4 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 frontend/components/actions/CreateFileDialog.vue

diff --git a/frontend/components/DirectoryListContextMenu.vue b/frontend/components/DirectoryListContextMenu.vue
index cfda9df..17f1e99 100644
--- a/frontend/components/DirectoryListContextMenu.vue
+++ b/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
diff --git a/frontend/components/actions/CreateFileDialog.vue b/frontend/components/actions/CreateFileDialog.vue
new file mode 100644
index 0000000..eea4086
--- /dev/null
+++ b/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>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 18e3051..d70246e 100644
--- a/frontend/layouts/default.vue
+++ b/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/')"
diff --git a/frontend/stores/index.ts b/frontend/stores/index.ts
index 65983bb..58e522c 100644
--- a/frontend/stores/index.ts
+++ b/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: '',