From 3063b54a69038cc1636616044efa960594d4ed2f Mon Sep 17 00:00:00 2001
From: GMrrc <143954951+GMrrc@users.noreply.github.com>
Date: Tue, 26 Nov 2024 14:15:26 +0100
Subject: [PATCH 1/5] draw zip on list

---
 src/.gitignore                      |  1 +
 src/App.vue                         |  8 +++-
 src/components/WebContentViewer.vue | 63 ++++++++++++++++++++---------
 3 files changed, 50 insertions(+), 22 deletions(-)
 create mode 100644 src/.gitignore

diff --git a/src/.gitignore b/src/.gitignore
new file mode 100644
index 0000000..147d7d2
--- /dev/null
+++ b/src/.gitignore
@@ -0,0 +1 @@
+output.css
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 78fd1f0..b1148bc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,12 +5,12 @@
 			<!-- Première section -->
 			<div 
 				class="w-full sm:w-1/3 max-sm:h-2/5 p-4 sm:m-6 rounded-xl bg-NcBlack/40">
-				<WebContentViewer @file-upload="handleFileUpload" zipUrl="http://localhost:8000/dummyZip.zip"/>
+				<WebContentViewer @zip-upload="handleZipUpload" @file-upload="handleFileUpload" zipUrl="http://localhost:8000/dummyZip.zip"/>
 			</div>
 			<!-- Deuxième section -->
 			<div 
 				class="w-full sm:w-2/3 max-sm:h-3/5 p-4 sm:m-6 bg-NcBlack rounded-xl">
-				<FileTable :file="sharedFile"/>
+				<FileTable :file="sharedFile" :zip="zip"/>
 			</div>
 		</div>
 	</div>
@@ -30,12 +30,16 @@ export default {
 	data() {
 		return {
 		sharedFile: null,
+		zipUrl: null,
 		};
 	},
 	methods: {
 		handleFileUpload(file) {
 		this.sharedFile = file;
 		},
+		handleZipUpload(zip) {
+		this.zip = zip;
+		},
 	},
 }
 </script>
diff --git a/src/components/WebContentViewer.vue b/src/components/WebContentViewer.vue
index 5ccc6b7..ed591cb 100644
--- a/src/components/WebContentViewer.vue
+++ b/src/components/WebContentViewer.vue
@@ -4,16 +4,33 @@
             <div class="w-4/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
             <div class="w-2/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
         </div>
+
+        <div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
+            draggable="true" @dragstart="dragZip()">
+            <template>
+                <div class="flex items-center justify-center cursor-pointer">
+                    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="w-10 h-10"
+                        style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
+                        <path
+                            d="M6 22c-.55 0-1.021-.196-1.412-.587A1.927 1.927 0 0 1 4 20V4c0-.55.196-1.021.588-1.413A1.926 1.926 0 0 1 6 2h8l6 6v12a1.93 1.93 0 0 1-.587 1.413A1.93 1.93 0 0 1 18 22H6Z"
+                            style="fill:#969696;fill-rule:nonzero" transform="matrix(.7 0 0 .7 -.43 -.388)" />
+                    </svg>
+                </div>
+            </template>
+            <div class="w-4/6 flex items-center px-4 py-2  cursor-pointer">
+                <div class="truncate max-sm:max-w-32 max-w-64">{{ zipName }}</div>
+
+            </div>
+            <div class="w-2/6 py-2 cursor-pointer">
+                {{ formatFileSize(zipSize) }}
+            </div>
+        </div>
+
         <div v-if="!isLoading && zipContent.length !== 0" class="overflow-y-auto h-full">
             <div v-for="(file, index) in sortedFiles" :key="file.fullPath" class="flex flex-col">
 
-                <div
-                    class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
-                    @click="toggleFolder(file)"
-                    v-if="file.isDirectory"
-                    draggable="true" 
-                    @dragstart="onDragStart(file)"
-                >
+                <div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
+                    @click="toggleFolder(file)" v-if="file.isDirectory" draggable="true" @dragstart="onDragStart(file)">
                     <div class="w-4/6 flex items-center py-2 border-r border-gray-300 cursor-pointer">
                         <div class="w-12 h-12 flex items-center justify-center cursor-pointer">
                             <template>
@@ -27,10 +44,8 @@
                         <div class="w-4/6 flex items-center py-2 border-r border-gray-300 cursor-pointer">
                             <!-- Icône dynamique pour plié/déplié -->
                             <div class="w-12 h-12 flex items-center justify-center cursor-pointer">
-                                <component 
-                                    :is="folderMap[file.fullPath] ? ChevronDownIcon : ChevronRightIcon" 
-                                    class="text-NcBlue w-6 h-6"
-                                />
+                                <component :is="folderMap[file.fullPath] ? ChevronDownIcon : ChevronRightIcon"
+                                    class="text-NcBlue w-6 h-6" />
                             </div>
                             <span class="ml-2 truncate cursor-pointer">{{ file.name }}</span>
                         </div>
@@ -38,12 +53,8 @@
                     <div class="w-1/6 px-4 py-2 cursor-pointer">-</div>
                 </div>
 
-                <div
-                    class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
-                    v-else
-                    draggable="true"
-                    @dragstart="onDragStart(file, $event)"
-                >
+                <div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
+                    v-else draggable="true" @dragstart="onDragStart(file, $event)">
                     <template>
                         <div class="flex items-center justify-center cursor-pointer">
                             <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
@@ -57,7 +68,7 @@
                     </template>
                     <div class="w-4/6 flex items-center px-4 py-2  cursor-pointer">
                         <div class="truncate max-sm:max-w-32 max-w-64">{{ file.name }}</div>
-                        
+
                     </div>
                     <div class="w-2/6 py-2 cursor-pointer">
                         {{ formatFileSize(file.size) }}
@@ -67,7 +78,7 @@
             </div>
         </div>
         <div v-if="isLoading" class="flex h-full items-center justify-center">
-            <component :is="Loading" class="text-white w-24 h-24 animate-spin" :size="40"/>
+            <component :is="Loading" class="text-white w-24 h-24 animate-spin" :size="40" />
         </div>
         <div v-if="!isLoading && zipContent.length === 0" class="flex h-full items-center justify-center">
             <span class="text-gray-500">Aucun contenu à afficher</span>
@@ -87,13 +98,15 @@ export default {
     data() {
         return {
             zipContent: [],
-            folderMap: {}, 
+            folderMap: {},
             archiveUrl: '',
             token: '',
             ChevronRightIcon,
             ChevronDownIcon,
             isLoading: ref(false),
             Loading,
+            zipName: '',
+            zipSize: 0,
         };
     },
     props: {
@@ -146,7 +159,9 @@ export default {
             try {
                 const response = await fetch(this.zipUrl);
                 const zipData = await response.blob();
+                this.zipName = this.zipUrl.split('/').pop();
                 const zip = await JSZip.loadAsync(zipData);
+                this.zipSize = zipData.size;
 
                 const files = [];
 
@@ -219,6 +234,14 @@ export default {
             const currentState = this.folderMap[file.fullPath];
             this.$set(this.folderMap, file.fullPath, !currentState);
         },
+        async dragZip() {
+            try {
+                const zip = {name: this.zipName, url: this.zipUrl};
+                this.$emit('zip-upload', zip);
+            } catch (error) {
+                console.error('Erreur lors du drag du ZIP :', error);
+            }
+        },
         async onDragStart(file) {
 
             const getFilesFromFolder = (folder) => {

From 57f3bf4a05863e20d23effbc8f96b6e1ce830b0d Mon Sep 17 00:00:00 2001
From: GMrrc <143954951+GMrrc@users.noreply.github.com>
Date: Tue, 26 Nov 2024 14:35:33 +0100
Subject: [PATCH 2/5] zip transfer

---
 src/App.vue                  |   2 +-
 src/components/FileTable.vue | 154 ++++++++++++++++++++---------------
 src/output.css               |   8 --
 3 files changed, 91 insertions(+), 73 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b1148bc..197896f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,7 +30,7 @@ export default {
 	data() {
 		return {
 		sharedFile: null,
-		zipUrl: null,
+		zip: null,
 		};
 	},
 	methods: {
diff --git a/src/components/FileTable.vue b/src/components/FileTable.vue
index 4da6eed..2d0401e 100644
--- a/src/components/FileTable.vue
+++ b/src/components/FileTable.vue
@@ -1,4 +1,4 @@
-<template> 
+<template>
     <div class="flex flex-col h-full w-full border">
         <!-- Breadcrumb -->
         <div class="flex flex-row mt-1 ml-3 items-start container">
@@ -56,7 +56,8 @@
         <div :class="[
             'overflow-y-auto h-full rounded-xl',
             isDragging ? 'border-green-500 border-4 border-dashed transition-all ease-in-out' : ''
-        ]" @drop.prevent="onDrop" @dragover.prevent="onDragOver" @dragenter.prevent @dragleave.prevent="onDragLeave($event)" >
+        ]" @drop.prevent="onDrop" @dragover.prevent="onDragOver" @dragenter.prevent
+            @dragleave.prevent="onDragLeave($event)">
 
             <div v-for="file in files" :key="file.filename"
                 class="flex h-16 items-center hover:bg-NcGray rounded-lg border-b last:border-b-0 border-gray-300"
@@ -118,9 +119,11 @@
             </div>
         </div>
 
-        <EditFileName v-if="!editDialogDisabled" :initialFileName="initialFileName" :isDirectory="isDirectory" @update="updateFileName" @close="closeEditDialog">
+        <EditFileName v-if="!editDialogDisabled" :initialFileName="initialFileName" :isDirectory="isDirectory"
+            @update="updateFileName" @close="closeEditDialog">
         </EditFileName>
-        <FileExistsDialog v-if="!fileExistDialogDisabled" :fileName="initialFileName" @overwrite="" @rename="" @cancel="closeFileExistsDialog">
+        <FileExistsDialog v-if="!fileExistDialogDisabled" :fileName="initialFileName" @overwrite="" @rename=""
+            @cancel="closeFileExistsDialog">
         </FileExistsDialog>
     </div>
 </template>
@@ -128,9 +131,11 @@
 
 
 <script>
-import { getClient, getRootPath } from '@nextcloud/files/dav';
+// Other imports
+import JSZip from 'jszip';
 
 // NextCloud Components
+import { getClient, getRootPath } from '@nextcloud/files/dav';
 import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js';
 import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js';
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js';
@@ -165,6 +170,10 @@ export default {
             type: Object,
             default: null,
         },
+        zip: {
+            type: Object,
+            default: null,
+        },
     },
     data() {
         return {
@@ -177,11 +186,11 @@ export default {
             isTransfering: false,
             isDragging: false,
             editDialogDisabled: true,
-            fileExistDialogDisabled:true,
+            fileExistDialogDisabled: true,
             initialFileName: '', // Nom originel du fichier/dossier a edite
             isDirectory: false, // Si l'element a edite est un dossier ou non
             transferProgress: 0,
-            transferStatus: 'bg-blue-500',
+            transferStatus: 'bg-blue-500'
         };
     },
     async mounted() {
@@ -241,30 +250,30 @@ export default {
         },
         async createNewFile() {
             if (!this.newFileName) return;
-            
-                try {
-                    const client = getClient();
-                    let filePath = '';
-                    console.log(this.newFileName)
-                    if(this.current_dir[this.current_dir.length - 1] === '/') {
-                        filePath = `${this.root_path}${this.current_dir}${this.newFileName}`;
-                    }
-                    else{
-                        filePath = `${this.root_path}${this.current_dir}/${this.newFileName}`;
-                    }
-                    const alreadyExists = await this.elemtAlreadyExists(filePath);
-                    if (!alreadyExists) {
-                        await client.createDirectory(filePath, '');
-                        this.newFileName = '';
-                        this.isAddFilePopupVisible = false;
-                        await this.fetchFiles();
-                    }
-                    else{
-                        alert(`Vous ne pouvez pas creer le dossier : ${this.newFileName} car un autre dossier porte deja le meme nom.`);
-                    }
-                } catch (error) {
-                    console.error('Erreur lors de la création du fichier :', error);
+
+            try {
+                const client = getClient();
+                let filePath = '';
+                console.log(this.newFileName)
+                if (this.current_dir[this.current_dir.length - 1] === '/') {
+                    filePath = `${this.root_path}${this.current_dir}${this.newFileName}`;
                 }
+                else {
+                    filePath = `${this.root_path}${this.current_dir}/${this.newFileName}`;
+                }
+                const alreadyExists = await this.elemtAlreadyExists(filePath);
+                if (!alreadyExists) {
+                    await client.createDirectory(filePath, '');
+                    this.newFileName = '';
+                    this.isAddFilePopupVisible = false;
+                    await this.fetchFiles();
+                }
+                else {
+                    alert(`Vous ne pouvez pas creer le dossier : ${this.newFileName} car un autre dossier porte deja le meme nom.`);
+                }
+            } catch (error) {
+                console.error('Erreur lors de la création du fichier :', error);
+            }
         },
         toggleAddFilePopup() {
             this.isAddFilePopupVisible = !this.isAddFilePopupVisible;
@@ -282,7 +291,7 @@ export default {
             event.preventDefault();
             if (event.target === event.currentTarget) {
                 this.isDragging = false;
-            } 
+            }
         },
         async onDrop(event) {
             event.preventDefault();
@@ -290,21 +299,38 @@ export default {
                 this.isDragging = false;
                 this.isTransfering = true;
                 const file = this.file;
+                const zip = this.zip;
                 console.log(file);
-                if (!file) return;
+                console.log(zip);
 
-                if (file.isDirectory) {
-                    await this.moveFilesOfFolder(file,'');
-                } else {
-                    this.transferProgress = 25;
-                    if (file.content && typeof file.content.arrayBuffer === 'function') {
-                        file.content = await file.content.arrayBuffer();
+
+                if (!file && !zip) return;
+
+                if (zip) {
+                    const response = await fetch(zip.url);
+                    if (!response.ok) {
+                        throw new Error(`Erreur lors du téléchargement : ${response.statusText}`);
                     }
-                    this.transferProgress = 50;
-                    await this.moveFileToTarget(file, '');
-                    this.transferProgress = 100;      
-                }
+                    const zipFile = await response.arrayBuffer();
 
+                    await this.moveFileToTarget({
+                        name: zip.name,
+                        content: zipFile
+                    }, '');
+                    this.transferProgress = 100;
+                } else {
+                    if (file.isDirectory) {
+                        await this.moveFilesOfFolder(file, '');
+                    } else {
+                        this.transferProgress = 25;
+                        if (file.content && typeof file.content.arrayBuffer === 'function') {
+                            file.content = await file.content.arrayBuffer();
+                        }
+                        this.transferProgress = 50;
+                        await this.moveFileToTarget(file, '');
+                        this.transferProgress = 100;
+                    }
+                }
                 this.isTransfering = false;
                 this.transferProgress = 0;
 
@@ -344,26 +370,26 @@ export default {
             try {
                 const client = getClient();
                 // Assurez-vous que le chemin parent est correctement formaté
-                
+
                 let fullPath = '';
                 fullPath = `${this.root_path}${this.current_dir}${parentPath}${file.name}`;
 
                 if (ArrayBuffer.isView(file.content)) {
                     file.content = Buffer.from(file.content);
                 }
-                
+
                 const alreadyExists = await this.elemtAlreadyExists(fullPath);
-                if(!alreadyExists) {
+                if (!alreadyExists) {
                     // Évitez les chemins incorrects en utilisant `path.normalize` si disponible
                     await client.putFileContents(fullPath, file.content);
 
                     // Recharge les fichiers après l'opération
                     await this.fetchFiles();
                 }
-                else{
+                else {
                     this.initialFileName = file.name;
                     this.fileExistDialogDisabled = false;
-                    while(!this.fileExistDialogDisabled) {
+                    while (!this.fileExistDialogDisabled) {
                         await this.sleep(50);
                     }
                 }
@@ -378,14 +404,14 @@ export default {
                 fullPath = `${this.root_path}${this.current_dir}${parentPath}${folder.name}`;
 
                 const alreadyExists = await this.elemtAlreadyExists(fullPath);
-                if(!alreadyExists) {
+                if (!alreadyExists) {
                     await client.createDirectory(fullPath);
                     await this.fetchFiles();
                 }
-                else{
+                else {
                     this.initialFileName = folder.name;
                     this.fileExistDialogDisabled = false;
-                    while(!this.fileExistDialogDisabled) {
+                    while (!this.fileExistDialogDisabled) {
                         await this.sleep();
                     }
                 }
@@ -393,16 +419,16 @@ export default {
                 console.error('Erreur lors de la création du dossier :', error);
             }
         },
-        async deleteElem(file){
+        async deleteElem(file) {
             const client = getClient()
-            try{
+            try {
                 let path = this.root_path + this.current_dir + "/" + file.basename;
                 await client.deleteFile(path);
             }
-            catch(error){
+            catch (error) {
                 console.error('Erreur lors de la suppression d\'un element : ', error);
             }
-            
+
             await this.fetchFiles();
         },
         /**
@@ -410,10 +436,10 @@ export default {
          * @param file le ficher/dossier dont on veut editer le nom
          */
         async editElem(file) {
-            if(file.type === 'file'){
+            if (file.type === 'file') {
                 this.isDirectory = false;
             }
-            else{
+            else {
                 this.isDirectory = true;
             }
             this.initialFileName = file.basename;
@@ -432,21 +458,21 @@ export default {
          * Change le nom du fichier sur le serveur Cloud via un client WebDAV
          * @param names Contient un initialFileName et un newFileName
          */
-        async updateFileName(names){
-            if(names.initialFileName !== names.newFileName){
+        async updateFileName(names) {
+            if (names.initialFileName !== names.newFileName) {
                 const client = getClient()
-                try{
+                try {
                     const oldName = this.root_path + this.current_dir + names.initialFileName;
                     const newName = this.root_path + this.current_dir + names.newFileName;
                     let alreadyExists = await this.elemtAlreadyExists(newName);
-                    if(!alreadyExists) {
-                        await client.moveFile(oldName,newName);
+                    if (!alreadyExists) {
+                        await client.moveFile(oldName, newName);
                     }
-                    else{
+                    else {
                         alert(`Vous ne pouvez pas renommez le fichier/dossier : ${names.newFileName} car un autre fichier/dossier porte deja le meme nom.`);
                     }
                 }
-                catch(error){
+                catch (error) {
                     console.error('Erreur lors du renommage d\'un element : ', error);
                 }
                 await this.fetchFiles();
@@ -456,7 +482,7 @@ export default {
          * Check si un fichier ou un dossier existe deja sur le serveur
          * @param path le chemin du fichier/dossier
          */
-        async elemtAlreadyExists(path){
+        async elemtAlreadyExists(path) {
             const client = getClient();
             let exists = await client.exists(path);
 
diff --git a/src/output.css b/src/output.css
index 9457292..d287891 100644
--- a/src/output.css
+++ b/src/output.css
@@ -579,10 +579,6 @@ video {
   }
 }
 
-.visible {
-  visibility: visible;
-}
-
 .fixed {
   position: fixed;
 }
@@ -741,10 +737,6 @@ video {
   flex-direction: column;
 }
 
-.content-center {
-  align-content: center;
-}
-
 .content-evenly {
   align-content: space-evenly;
 }

From f17901b699bc0e6c137a0aa2facba8f5b8b0ca1e Mon Sep 17 00:00:00 2001
From: GMrrc <143954951+GMrrc@users.noreply.github.com>
Date: Tue, 26 Nov 2024 14:42:36 +0100
Subject: [PATCH 3/5] add icon for zip

---
 src/assets/package-x-generic.svg    |  1 +
 src/components/FileTable.vue        | 10 +++++++++-
 src/components/WebContentViewer.vue |  7 ++-----
 src/output.css                      |  5 +++++
 4 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/package-x-generic.svg

diff --git a/src/assets/package-x-generic.svg b/src/assets/package-x-generic.svg
new file mode 100644
index 0000000..5803a00
--- /dev/null
+++ b/src/assets/package-x-generic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#969696" d="M5.12,5H18.87L17.93,4H5.93L5.12,5M20.54,5.23C20.83,5.57 21,6 21,6.5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V6.5C3,6 3.17,5.57 3.46,5.23L4.84,3.55C5.12,3.21 5.53,3 6,3H18C18.47,3 18.88,3.21 19.15,3.55L20.54,5.23M6,18H12V15H6V18Z"/></svg>
\ No newline at end of file
diff --git a/src/components/FileTable.vue b/src/components/FileTable.vue
index 2d0401e..8616329 100644
--- a/src/components/FileTable.vue
+++ b/src/components/FileTable.vue
@@ -73,7 +73,7 @@
                                 </path>
                             </svg>
                         </template>
-                        <template v-else>
+                        <template v-if="file.type === 'file' && file.basename.split('.').pop() !== 'zip'">
                             <div class="flex items-center justify-center cursor-pointer">
                                 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
                                     class="w-10 h-10"
@@ -85,6 +85,12 @@
                                 </svg>
                             </div>
                         </template>
+                        <template v-if="file.type === 'file' && file.basename.split('.').pop() === 'zip'">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-10 h-10 ">
+                                <path fill="#969696"
+                                    d="M5.12,5H18.87L17.93,4H5.93L5.12,5M20.54,5.23C20.83,5.57 21,6 21,6.5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V6.5C3,6 3.17,5.57 3.46,5.23L4.84,3.55C5.12,3.21 5.53,3 6,3H18C18.47,3 18.88,3.21 19.15,3.55L20.54,5.23M6,18H12V15H6V18Z" />
+                            </svg>
+                        </template>
                     </div>
                     <div class="ml-4 cursor-pointer max-sm:max-w-32 truncate">{{ file.basename }}</div>
                 </div>
@@ -308,10 +314,12 @@ export default {
 
                 if (zip) {
                     const response = await fetch(zip.url);
+                    this.transferProgress = 25;
                     if (!response.ok) {
                         throw new Error(`Erreur lors du téléchargement : ${response.statusText}`);
                     }
                     const zipFile = await response.arrayBuffer();
+                    this.transferProgress = 50;
 
                     await this.moveFileToTarget({
                         name: zip.name,
diff --git a/src/components/WebContentViewer.vue b/src/components/WebContentViewer.vue
index ed591cb..9389263 100644
--- a/src/components/WebContentViewer.vue
+++ b/src/components/WebContentViewer.vue
@@ -9,11 +9,8 @@
             draggable="true" @dragstart="dragZip()">
             <template>
                 <div class="flex items-center justify-center cursor-pointer">
-                    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="w-10 h-10"
-                        style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
-                        <path
-                            d="M6 22c-.55 0-1.021-.196-1.412-.587A1.927 1.927 0 0 1 4 20V4c0-.55.196-1.021.588-1.413A1.926 1.926 0 0 1 6 2h8l6 6v12a1.93 1.93 0 0 1-.587 1.413A1.93 1.93 0 0 1 18 22H6Z"
-                            style="fill:#969696;fill-rule:nonzero" transform="matrix(.7 0 0 .7 -.43 -.388)" />
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-10 h-10 ">
+                        <path fill="#969696" d="M5.12,5H18.87L17.93,4H5.93L5.12,5M20.54,5.23C20.83,5.57 21,6 21,6.5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V6.5C3,6 3.17,5.57 3.46,5.23L4.84,3.55C5.12,3.21 5.53,3 6,3H18C18.47,3 18.88,3.21 19.15,3.55L20.54,5.23M6,18H12V15H6V18Z"/>
                     </svg>
                 </div>
             </template>
diff --git a/src/output.css b/src/output.css
index d287891..241f194 100644
--- a/src/output.css
+++ b/src/output.css
@@ -934,6 +934,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.text-yellow-500 {
+  --tw-text-opacity: 1;
+  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);

From c728eec67a82f49333f999cbe7268350405f75a5 Mon Sep 17 00:00:00 2001
From: GMrrc <143954951+GMrrc@users.noreply.github.com>
Date: Tue, 26 Nov 2024 14:44:25 +0100
Subject: [PATCH 4/5] fix loading of zip

---
 src/components/FileTable.vue        | 3 ---
 src/components/WebContentViewer.vue | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/FileTable.vue b/src/components/FileTable.vue
index 8616329..5bef5e9 100644
--- a/src/components/FileTable.vue
+++ b/src/components/FileTable.vue
@@ -137,9 +137,6 @@
 
 
 <script>
-// Other imports
-import JSZip from 'jszip';
-
 // NextCloud Components
 import { getClient, getRootPath } from '@nextcloud/files/dav';
 import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js';
diff --git a/src/components/WebContentViewer.vue b/src/components/WebContentViewer.vue
index 9389263..f2886a1 100644
--- a/src/components/WebContentViewer.vue
+++ b/src/components/WebContentViewer.vue
@@ -5,7 +5,7 @@
             <div class="w-2/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
         </div>
 
-        <div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
+        <div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300" v-if="!isLoading"
             draggable="true" @dragstart="dragZip()">
             <template>
                 <div class="flex items-center justify-center cursor-pointer">

From c07171539e9095a63bbf37be4ac3c3eb4b1f0633 Mon Sep 17 00:00:00 2001
From: GMrrc <143954951+GMrrc@users.noreply.github.com>
Date: Tue, 26 Nov 2024 15:07:37 +0100
Subject: [PATCH 5/5] css hover fix

---
 src/components/WebContentViewer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/WebContentViewer.vue b/src/components/WebContentViewer.vue
index f2886a1..4b422e6 100644
--- a/src/components/WebContentViewer.vue
+++ b/src/components/WebContentViewer.vue
@@ -15,7 +15,7 @@
                 </div>
             </template>
             <div class="w-4/6 flex items-center px-4 py-2  cursor-pointer">
-                <div class="truncate max-sm:max-w-32 max-w-64">{{ zipName }}</div>
+                <div class="truncate max-sm:max-w-32 max-w-64 cursor-pointer">{{ zipName }}</div>
 
             </div>
             <div class="w-2/6 py-2 cursor-pointer">
@@ -64,7 +64,7 @@
                         </div>
                     </template>
                     <div class="w-4/6 flex items-center px-4 py-2  cursor-pointer">
-                        <div class="truncate max-sm:max-w-32 max-w-64">{{ file.name }}</div>
+                        <div class="truncate max-sm:max-w-32 max-w-64 cursor-pointer">{{ file.name }}</div>
 
                     </div>
                     <div class="w-2/6 py-2 cursor-pointer">