✨ nicer filemanager and layout

src/components/Files/FilesAside.vue

@@ -2,13 +2,15 @@
 
 <template>
   <div class="files">
-    <div @click="openAside" style="cursor: pointer;">Files</div>
+    <div @click="openAside" style="cursor: pointer;">
+      <slot name="handle">Files</slot>
+    </div>
+
     <div
       popover
       ref="popover"
       class="files__aside"
       :class="{ 'files__aside--dragging': dragging }"
-
     >
       <div
         class="files__aside-content"
@@ -17,7 +19,7 @@
         @dragleave="onDragLeave"
         @dragover.prevent
       >
-        <FileManager />
+        <FileManager @filePreview="loadFilePreview" />
       </div>
     </div>
   </div>
@@ -25,13 +27,22 @@
 <script setup lang="ts">
 import {onUnmounted, ref} from 'vue';
 import FileManager from '../FileManager/FileManager.vue';
+import FilePreview from '../FileManager/FilePreview.vue';
+import {VirtualFile} from '../../model/FileSystem/types';
 
 const popover = ref<HTMLDivElement>()
 const content = ref<HTMLDivElement>()
+const filePreview = ref<VirtualFile>();
+
 function openAside(){
   popover.value?.showPopover();
 }
 
+function loadFilePreview(file: VirtualFile){
+  filePreview.value = file;
+}
+
+
 const dragging = ref(false);
 
 function onDragStart(){
@@ -48,6 +59,7 @@ function onDragLeave(event) {
 function onDragEnd(){
   console.log('dragend');
   dragging.value = false;
+  showPreview();
 }
 
 window.addEventListener('dragend', onDragEnd, {passive: true});
@@ -60,17 +72,19 @@ onUnmounted(() => {
 
 .files__aside {
   --animation-duration: 200ms;
+  display: flex;
+  flex-direction: column;
   position: fixed;
   inset: auto;
   height: auto;
-  left: 0;
-  top: 10px;
-  bottom: 10px;
+  right: 0;
+  top: 0;
+  bottom: 0;
   width: 500px;
   max-width: 100vw;
   background: rgba(255, 255, 255, 0.5);
   backdrop-filter: blur(10px);
-  transform: translateX(-100%);
+  transform: translateX(100%);
   border: none;
   transition: all var(--animation-duration) allow-discrete;
 }
@@ -78,8 +92,7 @@ onUnmounted(() => {
 .files__aside-content {
   position: absolute;
   inset: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
 }
 
 .files__aside:popover-open {
@@ -89,12 +102,20 @@ onUnmounted(() => {
 
 @starting-style {
   .files__aside:popover-open {
-    transform: translateX(-100%);
+    transform: translateX(100%);
   }
 }
 
 .files__aside--dragging:popover-open {
-  transform: translateX(-25%);
+  transform: translateX(25%);
+}
+
+.files__file-preview {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100px;
+  height: 100px;
 }
 
 </style>