✨ nicer filemanager and layout

src/components/Dropzone/Dropzone.vue

@@ -0,0 +1,71 @@
+<template>
+  <div
+    @drop="onDrop"
+    @dragover.prevent="onDragOver"
+    @dragleave="onDragLeave"
+    @dragenter="onDragEnter"
+  >
+    <slot :isDragOver="isDragOver"></slot>
+  </div>
+</template>
+<script setup lang="ts">
+
+import { ref } from 'vue';
+import {VirtualFile} from '../../model/FileSystem/types';
+
+const isDragOver = ref(false);
+const emit = defineEmits<{
+  onDrop: [VirtualFile],
+}>();
+
+const props = defineProps<{
+  accept?: string,
+}>();
+
+const slot = defineSlots<{
+  default(props: {isDragOver: boolean}): any
+}>()
+
+function onDragEnter(event: DragEvent) {
+  console.log('drag enter');
+  isDragOver.value = true;
+}
+
+function onDragLeave(event: DragEvent) {
+  console.log('drag leave');
+  isDragOver.value = false;
+}
+
+function onDragOver(event: DragEvent) {
+  event.preventDefault();
+
+}
+
+function parseMeta(event: DragEvent): VirtualFile | null {
+  try {
+    const file = event.dataTransfer?.files?.[0];
+    if (file) {
+      return {
+        type: 'file',
+        source: 'drop',
+        path: [] as string[],
+        name: file.name,
+        mimeType: file.type
+      } as const;
+    } else if (event.dataTransfer?.getData('application/json')) {
+      return JSON.parse(event.dataTransfer?.getData('application/json'));
+    }
+  } catch (e) {
+  }
+  return null;
+}
+
+
+function onDrop(event: DragEvent) {
+  event.preventDefault();
+  isDragOver.value = false;
+  const drop = parseMeta(event);
+  
+  console.log('drop', drop);
+}
+</script>