fix container sizes

app.vue

@@ -3,7 +3,7 @@ import { getElementInfo } from "moveable";
 import { VueSelecto } from "vue3-selecto";
 import { useDisplay } from 'vuetify/lib/framework.mjs';
 import { HistoryManager } from './composables/history-manager';
-import { FilesManager } from './composables/files-manager';
+import { FilesManager, supportedExtensions } from './composables/files-manager';
 import type { iFile } from "composables/worker/7zip-manager"
 import { videoExtensions, binaryExtensions } from '#imports';
 
@@ -19,13 +19,21 @@ let selectedList = ref<any>([]);
 let filesManager = new FilesManager(filesList);
 let history = new HistoryManager(filesManager);
 let mediaBlobUrl = ref('');
+let errorDialog = ref(false);
+let errorMessage = ref('');
 
 watchEffect(async () => {
   if (files.value?.[0]) {
     loadingModel.value = true;
     filesList.value = [];
 
-    await filesManager.loadArchive(files.value?.[0]);
+    try {
+      await filesManager.loadArchive(files.value?.[0]);
+    } catch (error: any) {
+      errorMessage.value = error.message;
+      errorDialog.value = true;
+      files.value = [];
+    }
     loadingModel.value = false;
   }
 })
@@ -164,7 +172,7 @@ function stepUp(path: string) {
       </v-toolbar>
       <v-container>
         <template v-if="filesManager.getFile(selectedPath)?.isFolder">
-          <v-list :selected="[selectedPath]">
+          <v-list :selected="[selectedPath]" style="height: calc(100vh - 120px);">
             <v-row no-gutters>
               <v-col cols="6" lg="2" md="3" sm="6" v-for="file of filesGridList" style="text-align: center;">
                 <v-list-item class="position-relative ma-2 pa-5 selectable" active-color="light-blue-darken-4"
@@ -205,7 +213,7 @@ function stepUp(path: string) {
         </template>
         <template v-if="!files.length">
           <!-- tutorial drag and drop zipped file here and review it securely -->
-          <v-row align="center" justify="center">
+          <v-row align="center" justify="center" style="height: calc(100vh - 120px)">
             <v-col cols="12">
               <v-card variant="flat" class="mx-auto" max-width="768">
                 <!-- v-icon for file -->
@@ -221,7 +229,7 @@ function stepUp(path: string) {
                 </v-card-text>
 
                 <!-- file input -->
-                <v-file-input class="mx-5" v-model="files" accept=".zip,.7z,.rar,.tar.bz2,.tar.gz,.tar.xz"
+                <v-file-input class="mx-5" v-model="files" :accept="supportedExtensions.map(extension => `.${extension}`).join(',')"
                   label="or select a file..." variant="outlined"></v-file-input>
               </v-card>
             </v-col>
@@ -241,6 +249,22 @@ function stepUp(path: string) {
         </v-card-text>
       </v-card>
     </v-dialog>
+    <v-dialog v-model="errorDialog" width="auto">
+      <v-card>
+        <v-card-title class="text-error">
+          Error
+        </v-card-title>
+        <v-card-text>
+          {{ errorMessage }}
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary" variant="text" @click="errorDialog = false">
+            Close
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-layout>
 </template>
 <style>
@@ -251,4 +275,9 @@ function stepUp(path: string) {
 .selected {
   background: rgba(48, 150, 243, 0.1);
 }
+
+.v-container {
+  height: calc(100vh - 120px);
+  padding: 0;
+}
 </style>

components/binary-viewer.vue

@@ -103,7 +103,7 @@ onMounted(async () => {
   white-space: pre;
   padding: 1rem;
   background-color: var(--v-theme-surface);
-  height: calc(100vh - 150px);
+  height: calc(100vh - 120px);
 }
 
 .hex-container {

components/text-editor.vue

@@ -35,6 +35,6 @@ onMounted(async () => {
 <style scoped>
 #editor {
   width: 100vw;
-  height: 100vh;
+  height: calc(100vh - 120px);
 }
 </style>

composables/files-manager.ts

@@ -12,6 +12,12 @@ export const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
 export const audioExtensions = ['mp3', 'wav', 'ogg', 'flac'];
 export const textExtensions = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'md', 'js', 'ts', 'php', 'c', 'cpp', 'py', 'html', 'css', 'scss', 'sass', 'less', 'json', 'xml', 'sql', 'java', 'go', 'rb', 'sh', 'bat', 'ps1', 'cmd', 'yml', 'yaml', 'ini', 'toml', 'csv', 'tsv', 'gitignore', 'lock', 'htaccess', 'htpasswd', 'env', 'dockerfile', 'gitattributes', 'gitmodules', 'editorconfig', 'babelrc', 'eslintrc', 'eslintignore', 'prettierrc', 'prettierignore', 'stylelintrc', 'stylelintignore', 'postcssrc', 'postcss.config', 'jsx', 'tsx', 'license'];
 export const binaryExtensions = ['exe', 'dll', 'so', 'dylib', 'bin', 'dat', 'db', 'sqlite', 'o', 'class', 'pyc'];
+export const supportedExtensions = [
+    '7z', 'xz', 'bz2', 'gz', 'tar', 'zip', 'wim',
+    'apfs', 'ar', 'arj', 'cab', 'chm', 'cpio', 'dmg', 'ext', 'fat', 'gpt', 'hfs',
+    'ihex', 'iso', 'lzh', 'lzma', 'mbr', 'msi', 'nsis', 'ntfs', 'qcow2', 'rar',
+    'rpm', 'squashfs', 'udf', 'uefi', 'vdi', 'vhd', 'vhdx', 'vmdk', 'xar', 'z'
+];
 
 export class FilesManager {
     consoleOutputBuffer: string[] = [];
@@ -28,6 +34,12 @@ export class FilesManager {
 
     async loadArchive(file: File) {
         if (!this.remoteSevenZipManager) return;
+        
+        const extension = file.name.split('.').pop()?.toLowerCase();
+        if (!extension || !supportedExtensions.includes(extension)) {
+            throw new Error('Unsupported file format. Please use a supported archive format.');
+        }
+
         this.filesList.value = await this.remoteSevenZipManager.loadArchive(file) || [];
     }