file upload drop zones

frontend/pages/warrens/files.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useDropZone } from '@vueuse/core';
+import { toast } from 'vue-sonner';
 import DirectoryListContextMenu from '~/components/DirectoryListContextMenu.vue';
 import RenameEntryDialog from '~/components/actions/RenameEntryDialog.vue';
 import { getWarrenDirectory } from '~/lib/api/warrens';
@@ -9,8 +11,16 @@ definePageMeta({
 
 const warrenStore = useWarrenStore();
 const loadingIndicator = useLoadingIndicator();
+const uploadStore = useUploadStore();
 const warrenPath = computed(() => useWarrenPath());
 
+const dropZoneRef = ref<HTMLElement>();
+
+const dropZone = useDropZone(dropZoneRef, {
+    onDrop,
+    multiple: true,
+});
+
 if (warrenStore.current == null) {
     await navigateTo({
         path: '/warrens',
@@ -39,12 +49,41 @@ const entries = useAsyncData(
     },
     { watch: [warrenPath] }
 ).data;
+
+function onDrop(files: File[] | null, e: DragEvent) {
+    if (files == null) {
+        return;
+    }
+
+    e.preventDefault();
+
+    if (warrenStore.current == null) {
+        toast.warning('Upload', {
+            description: 'Enter a warren before attempting to upload files',
+        });
+        return;
+    }
+
+    const added = uploadStore.addFiles(
+        warrenStore.current.warrenId,
+        warrenStore.current.path,
+        files
+    );
+
+    if (added) {
+        uploadStore.dialogOpen = true;
+    }
+}
 </script>
 
 <template>
-    <div class="grow">
+    <div ref="dropZoneRef" class="grow">
         <DirectoryListContextMenu class="w-full grow">
-            <DirectoryList v-if="entries != null" :entries="entries" />
+            <DirectoryList
+                v-if="entries != null"
+                :is-over-drop-zone="dropZone.isOverDropZone.value"
+                :entries="entries"
+            />
         </DirectoryListContextMenu>
         <RenameEntryDialog />
     </div>