✨ nicer filemanager and layout

src/modules/controls/ControlApp.vue

@@ -1,6 +1,6 @@
 
 <template>
-  <div>
+  <AppLayout>
     <div style="background-color: white; display: flex; flex-direction: row;gap: 0.5rem;padding: 0.5rem;margin-bottom:0.5rem; color: black">
       <FilesAside />
       <!-- <div style="max-width: 32px; height: 32px; overflow: hidden;">
@@ -9,13 +9,15 @@
       <button @click="openMapWindow">Open map window</button>
       <button @click="onStreamImage">Stream image</button> -->
     </div>
-    <FilesAside />
-    <ScreenManager />
+    <template v-slot:overview>
+      <ScreenManager />
+    </template>
     <Tabs
       :tabs="[
         {label: 'Sounds', key: 'sounds'},
         {label: 'Settings', key: 'settings'},
         {label: 'Devices', key: 'devices'},
+        {label: 'Map', key: 'map'},
       ]"
     >
       <template v-slot:settings>
@@ -40,8 +42,12 @@
           <Soundboard />
         </div>
       </template>
+      <template v-slot:map>
+        
+        <MapControl />
+      </template> 
     </Tabs>
-  </div>
+  </AppLayout>
 </template>
 <script setup lang="ts">
 import FileManager from '../../components/FileManager/FileManager.vue';
@@ -54,6 +60,8 @@ import ScreenManager from '../../components/ScreenManager/ScreenManager.vue';
 import RemoteDevices from '../../components/RemoteDevices/RemoteDevices.vue';
 import Soundboard from '../../components/Audio/Soundboard.vue';
 import FilesAside from '../../components/Files/FilesAside.vue';
+import MapControl from '../../components/Map/MapControl.vue';
+import AppLayout from '../../components/Common/AppLayout.vue';
 
 const openedFile = ref<FileWithMeta>()
 const sender = inject(SenderSymbol);