zip file (errors)

js/main.js

@@ -1046,6 +1046,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var jszip__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jszip */ "./node_modules/jszip/dist/jszip.min.js");
 /* harmony import */ var jszip__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jszip__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var vue_material_design_icons_ChevronRight_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-material-design-icons/ChevronRight.vue */ "./node_modules/vue-material-design-icons/ChevronRight.vue");
+/* harmony import */ var vue_material_design_icons_ChevronDown_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vue-material-design-icons/ChevronDown.vue */ "./node_modules/vue-material-design-icons/ChevronDown.vue");
+
+
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   name: 'WebContentViewer',
@@ -1053,7 +1057,12 @@ __webpack_require__.r(__webpack_exports__);
     return {
       zipContent: [],
       pathTable: [],
-      folderMap: {} // Map to track folder open/close state
+      folderMap: {},
+      // Map to track folder open/close state
+      archiveUrl: '',
+      token: '',
+      ChevronRightIcon: vue_material_design_icons_ChevronRight_vue__WEBPACK_IMPORTED_MODULE_1__["default"],
+      ChevronDownIcon: vue_material_design_icons_ChevronDown_vue__WEBPACK_IMPORTED_MODULE_2__["default"]
     };
   },
   props: {
@@ -1399,14 +1408,14 @@ var render = function render() {
     _c = _vm._self._c;
   return _c("div", {
     staticClass: "flex flex-col h-full w-full border"
-  }, [_c("div", {
+  }, [_vm._m(0), _vm._v(" "), _c("div", {
     staticClass: "overflow-y-auto"
   }, _vm._l(_vm.sortedFiles, function (file, index) {
     return _c("div", {
       key: file.fullPath,
       staticClass: "flex flex-col"
     }, [file.isDirectory ? _c("div", {
-      staticClass: "flex items-center pl-4 cursor-pointer",
+      staticClass: "flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300",
       attrs: {
         draggable: "true"
       },
@@ -1419,13 +1428,32 @@ var render = function render() {
         }
       }
     }, [_c("div", {
-      staticClass: "w-5/6 flex items-center px-4 py-2 truncate"
+      staticClass: "w-4/6 flex items-center py-2 border-r border-gray-300 cursor-pointer"
-    }, [_c("span", {
+    }, [_c("div", {
-      staticClass: "mr-2"
+      staticClass: "w-12 h-12 flex items-center justify-center cursor-pointer"
-    }, [_vm._v(_vm._s(_vm.folderMap[file.fullPath] ? "-" : "+"))]), _vm._v("\n                    " + _vm._s(file.fullPath) + "\n                ")]), _vm._v(" "), _c("div", {
+    }, [[_c("svg", {
-      staticClass: "w-1/6 px-4 py-2"
+      staticClass: "text-NcBlue w-10 h-10",
+      attrs: {
+        fill: "currentColor",
+        viewBox: "0 0 24 24"
+      }
+    }, [_c("path", {
+      attrs: {
+        d: "M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
+      }
+    })])]], 2), _vm._v(" "), _c("div", {
+      staticClass: "w-4/6 flex items-center py-2 border-r border-gray-300 cursor-pointer"
+    }, [_c("div", {
+      staticClass: "w-12 h-12 flex items-center justify-center cursor-pointer"
+    }, [_c(_vm.folderMap[file.fullPath] ? _vm.ChevronDownIcon : _vm.ChevronRightIcon, {
+      tag: "component",
+      staticClass: "text-NcBlue w-6 h-6"
+    })], 1), _vm._v(" "), _c("span", {
+      staticClass: "ml-2 truncate cursor-pointer"
+    }, [_vm._v(_vm._s(file.fullPath))])])]), _vm._v(" "), _c("div", {
+      staticClass: "w-1/6 px-4 py-2 cursor-pointer"
     }, [_vm._v("-")])]) : _c("div", {
-      staticClass: "flex items-center pl-4",
+      staticClass: "flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300",
       attrs: {
         draggable: "true"
       },
@@ -1434,14 +1462,48 @@ var render = function render() {
           return _vm.onDragStart(file, $event);
         }
       }
-    }, [_c("div", {
+    }, [[_c("div", {
-      staticClass: "w-5/6 flex items-center px-4 py-2 truncate"
+      staticClass: "flex items-center justify-center cursor-pointer"
+    }, [_c("svg", {
+      staticClass: "w-10 h-10",
+      staticStyle: {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        "stroke-linejoin": "round",
+        "stroke-miterlimit": "2"
+      },
+      attrs: {
+        viewBox: "0 0 16 16",
+        xmlns: "http://www.w3.org/2000/svg",
+        "xml:space": "preserve"
+      }
+    }, [_c("path", {
+      staticStyle: {
+        fill: "#969696",
+        "fill-rule": "nonzero"
+      },
+      attrs: {
+        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",
+        transform: "matrix(.7 0 0 .7 -.43 -.388)"
+      }
+    })])])], _vm._v(" "), _c("div", {
+      staticClass: "w-4/6 flex items-center px-4 py-2 truncate cursor-pointer"
     }, [_vm._v("\n                    " + _vm._s(file.fullPath) + "\n                ")]), _vm._v(" "), _c("div", {
-      staticClass: "w-1/6 px-4 py-2"
+      staticClass: "w-2/6 py-2 cursor-pointer"
-    }, [_vm._v("\n                    " + _vm._s(_vm.formatFileSize(file.size)) + "\n                ")])])]);
+    }, [_vm._v("\n                    " + _vm._s(_vm.formatFileSize(file.size)) + "\n                ")])], 2)]);
   }), 0)]);
 };
-var staticRenderFns = [];
+var staticRenderFns = [function () {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c("div", {
+    staticClass: "flex h-12 items-center border-b border-gray-300"
+  }, [_c("div", {
+    staticClass: "w-4/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300"
+  }, [_vm._v("Nom")]), _vm._v(" "), _c("div", {
+    staticClass: "w-2/6 px-4 py-2 text-gray-500 font-semibold"
+  }, [_vm._v("Taille")])]);
+}];
 render._withStripped = true;
 
 
@@ -5760,6 +5822,10 @@ video {
   height: 1.25rem;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
 .max-h-8 {
   max-height: 2rem;
 }
@@ -5796,6 +5862,18 @@ video {
   width: 83.333333%;
 }
 
+.w-2\\/6 {
+  width: 33.333333%;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -15407,6 +15485,150 @@ var fragment = {
 
 
 
+/***/ }),
+
+/***/ "./node_modules/vue-material-design-icons/ChevronDown.vue":
+/*!****************************************************************!*\
+  !*** ./node_modules/vue-material-design-icons/ChevronDown.vue ***!
+  \****************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _ChevronDown_vue_vue_type_template_id_621dfb81__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ChevronDown.vue?vue&type=template&id=621dfb81 */ "./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=template&id=621dfb81");
+/* harmony import */ var _ChevronDown_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ChevronDown.vue?vue&type=script&lang=js */ "./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=script&lang=js");
+/* harmony import */ var _vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
+
+
+
+
+
+/* normalize component */
+;
+var component = (0,_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
+  _ChevronDown_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"],
+  _ChevronDown_vue_vue_type_template_id_621dfb81__WEBPACK_IMPORTED_MODULE_0__.render,
+  _ChevronDown_vue_vue_type_template_id_621dfb81__WEBPACK_IMPORTED_MODULE_0__.staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "node_modules/vue-material-design-icons/ChevronDown.vue"
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (component.exports);
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/index.js??vue-loader-options!./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=script&lang=js":
+/*!***************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/index.js??vue-loader-options!./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=script&lang=js ***!
+  \***************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  name: "ChevronDownIcon",
+  emits: ['click'],
+  props: {
+    title: {
+      type: String,
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+});
+
+
+/***/ }),
+
+/***/ "./node_modules/vue-material-design-icons/ChevronRight.vue":
+/*!*****************************************************************!*\
+  !*** ./node_modules/vue-material-design-icons/ChevronRight.vue ***!
+  \*****************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _ChevronRight_vue_vue_type_template_id_39316a4d__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ChevronRight.vue?vue&type=template&id=39316a4d */ "./node_modules/vue-material-design-icons/ChevronRight.vue?vue&type=template&id=39316a4d");
+/* harmony import */ var _ChevronRight_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ChevronRight.vue?vue&type=script&lang=js */ "./node_modules/vue-material-design-icons/ChevronRight.vue?vue&type=script&lang=js");
+/* harmony import */ var _vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
+
+
+
+
+
+/* normalize component */
+;
+var component = (0,_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
+  _ChevronRight_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"],
+  _ChevronRight_vue_vue_type_template_id_39316a4d__WEBPACK_IMPORTED_MODULE_0__.render,
+  _ChevronRight_vue_vue_type_template_id_39316a4d__WEBPACK_IMPORTED_MODULE_0__.staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "node_modules/vue-material-design-icons/ChevronRight.vue"
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (component.exports);
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/index.js??vue-loader-options!./node_modules/vue-material-design-icons/ChevronRight.vue?vue&type=script&lang=js":
+/*!****************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/index.js??vue-loader-options!./node_modules/vue-material-design-icons/ChevronRight.vue?vue&type=script&lang=js ***!
+  \****************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  name: "ChevronRightIcon",
+  emits: ['click'],
+  props: {
+    title: {
+      type: String,
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+});
+
+
 /***/ }),
 
 /***/ "./node_modules/vue-material-design-icons/Plus.vue":
@@ -15725,6 +15947,38 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_WebContentViewer_vue_vue_type_style_index_0_id_4ef514b2_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./WebContentViewer.vue?vue&type=style&index=0&id=4ef514b2&scoped=true&lang=css */ "./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/WebContentViewer.vue?vue&type=style&index=0&id=4ef514b2&scoped=true&lang=css");
 
 
+/***/ }),
+
+/***/ "./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=script&lang=js":
+/*!****************************************************************************************!*\
+  !*** ./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=script&lang=js ***!
+  \****************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _vue_loader_lib_index_js_vue_loader_options_ChevronDown_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../vue-loader/lib/index.js??vue-loader-options!./ChevronDown.vue?vue&type=script&lang=js */ "./node_modules/vue-loader/lib/index.js??vue-loader-options!./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=script&lang=js");
+ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_vue_loader_lib_index_js_vue_loader_options_ChevronDown_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"]); 
+
+/***/ }),
+
+/***/ "./node_modules/vue-material-design-icons/ChevronRight.vue?vue&type=script&lang=js":
+/*!*****************************************************************************************!*\
+  !*** ./node_modules/vue-material-design-icons/ChevronRight.vue?vue&type=script&lang=js ***!
+  \*****************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _vue_loader_lib_index_js_vue_loader_options_ChevronRight_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../vue-loader/lib/index.js??vue-loader-options!./ChevronRight.vue?vue&type=script&lang=js */ "./node_modules/vue-loader/lib/index.js??vue-loader-options!./node_modules/vue-material-design-icons/ChevronRight.vue?vue&type=script&lang=js");
+ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_vue_loader_lib_index_js_vue_loader_options_ChevronRight_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"]); 
+
 /***/ }),
 
 /***/ "./node_modules/vue-material-design-icons/Plus.vue?vue&type=script&lang=js":
@@ -15741,6 +15995,40 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _vue_loader_lib_index_js_vue_loader_options_Plus_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../vue-loader/lib/index.js??vue-loader-options!./Plus.vue?vue&type=script&lang=js */ "./node_modules/vue-loader/lib/index.js??vue-loader-options!./node_modules/vue-material-design-icons/Plus.vue?vue&type=script&lang=js");
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_vue_loader_lib_index_js_vue_loader_options_Plus_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"]); 
 
+/***/ }),
+
+/***/ "./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=template&id=621dfb81":
+/*!**********************************************************************************************!*\
+  !*** ./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=template&id=621dfb81 ***!
+  \**********************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   render: () => (/* reexport safe */ _vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_3_vue_loader_lib_index_js_vue_loader_options_ChevronDown_vue_vue_type_template_id_621dfb81__WEBPACK_IMPORTED_MODULE_0__.render),
+/* harmony export */   staticRenderFns: () => (/* reexport safe */ _vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_3_vue_loader_lib_index_js_vue_loader_options_ChevronDown_vue_vue_type_template_id_621dfb81__WEBPACK_IMPORTED_MODULE_0__.staticRenderFns)
+/* harmony export */ });
+/* harmony import */ var _vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_3_vue_loader_lib_index_js_vue_loader_options_ChevronDown_vue_vue_type_template_id_621dfb81__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!../vue-loader/lib/index.js??vue-loader-options!./ChevronDown.vue?vue&type=template&id=621dfb81 */ "./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=template&id=621dfb81");
+
+
+/***/ }),
+
+/***/ "./node_modules/vue-material-design-icons/ChevronRight.vue?vue&type=template&id=39316a4d":
+/*!***********************************************************************************************!*\
+  !*** ./node_modules/vue-material-design-icons/ChevronRight.vue?vue&type=template&id=39316a4d ***!
+  \***********************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   render: () => (/* reexport safe */ _vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_3_vue_loader_lib_index_js_vue_loader_options_ChevronRight_vue_vue_type_template_id_39316a4d__WEBPACK_IMPORTED_MODULE_0__.render),
+/* harmony export */   staticRenderFns: () => (/* reexport safe */ _vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_3_vue_loader_lib_index_js_vue_loader_options_ChevronRight_vue_vue_type_template_id_39316a4d__WEBPACK_IMPORTED_MODULE_0__.staticRenderFns)
+/* harmony export */ });
+/* harmony import */ var _vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_3_vue_loader_lib_index_js_vue_loader_options_ChevronRight_vue_vue_type_template_id_39316a4d__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!../vue-loader/lib/index.js??vue-loader-options!./ChevronRight.vue?vue&type=template&id=39316a4d */ "./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./node_modules/vue-material-design-icons/ChevronRight.vue?vue&type=template&id=39316a4d");
+
+
 /***/ }),
 
 /***/ "./node_modules/vue-material-design-icons/Plus.vue?vue&type=template&id=18bbb6c6":
@@ -15758,6 +16046,144 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_3_vue_loader_lib_index_js_vue_loader_options_Plus_vue_vue_type_template_id_18bbb6c6__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!../vue-loader/lib/index.js??vue-loader-options!./Plus.vue?vue&type=template&id=18bbb6c6 */ "./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./node_modules/vue-material-design-icons/Plus.vue?vue&type=template&id=18bbb6c6");
 
 
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=template&id=621dfb81":
+/*!**************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=template&id=621dfb81 ***!
+  \**************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   render: () => (/* binding */ render),
+/* harmony export */   staticRenderFns: () => (/* binding */ staticRenderFns)
+/* harmony export */ });
+var render = function render() {
+  var _vm = this,
+    _c = _vm._self._c
+  return _c(
+    "span",
+    _vm._b(
+      {
+        staticClass: "material-design-icon chevron-down-icon",
+        attrs: {
+          "aria-hidden": _vm.title ? null : "true",
+          "aria-label": _vm.title,
+          role: "img",
+        },
+        on: {
+          click: function ($event) {
+            return _vm.$emit("click", $event)
+          },
+        },
+      },
+      "span",
+      _vm.$attrs,
+      false
+    ),
+    [
+      _c(
+        "svg",
+        {
+          staticClass: "material-design-icon__svg",
+          attrs: {
+            fill: _vm.fillColor,
+            width: _vm.size,
+            height: _vm.size,
+            viewBox: "0 0 24 24",
+          },
+        },
+        [
+          _c(
+            "path",
+            {
+              attrs: {
+                d: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z",
+              },
+            },
+            [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()]
+          ),
+        ]
+      ),
+    ]
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+
+
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./node_modules/vue-material-design-icons/ChevronRight.vue?vue&type=template&id=39316a4d":
+/*!***************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./node_modules/vue-material-design-icons/ChevronRight.vue?vue&type=template&id=39316a4d ***!
+  \***************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   render: () => (/* binding */ render),
+/* harmony export */   staticRenderFns: () => (/* binding */ staticRenderFns)
+/* harmony export */ });
+var render = function render() {
+  var _vm = this,
+    _c = _vm._self._c
+  return _c(
+    "span",
+    _vm._b(
+      {
+        staticClass: "material-design-icon chevron-right-icon",
+        attrs: {
+          "aria-hidden": _vm.title ? null : "true",
+          "aria-label": _vm.title,
+          role: "img",
+        },
+        on: {
+          click: function ($event) {
+            return _vm.$emit("click", $event)
+          },
+        },
+      },
+      "span",
+      _vm.$attrs,
+      false
+    ),
+    [
+      _c(
+        "svg",
+        {
+          staticClass: "material-design-icon__svg",
+          attrs: {
+            fill: _vm.fillColor,
+            width: _vm.size,
+            height: _vm.size,
+            viewBox: "0 0 24 24",
+          },
+        },
+        [
+          _c(
+            "path",
+            {
+              attrs: {
+                d: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z",
+              },
+            },
+            [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()]
+          ),
+        ]
+      ),
+    ]
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+
+
+
 /***/ }),
 
 /***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./node_modules/vue-material-design-icons/Plus.vue?vue&type=template&id=18bbb6c6":

src/components/WebContentViewer.vue

@@ -1,34 +1,68 @@
 <template>
     <div class="flex flex-col h-full w-full border">
-        <!-- ... -->
+        <div class="flex h-12 items-center border-b border-gray-300">
+            <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="overflow-y-auto">
             <div v-for="(file, index) in sortedFiles" :key="file.fullPath" class="flex flex-col">
+
                 <div
-                    class="flex items-center pl-4 cursor-pointer"
+                    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, $event)"
                 >
-                    <div class="w-5/6 flex items-center px-4 py-2 truncate">
+                    <div class="w-4/6 flex items-center py-2 border-r border-gray-300 cursor-pointer">
-                        <span class="mr-2">{{ folderMap[file.fullPath] ? '-' : '+' }}</span>
+                        <div class="w-12 h-12 flex items-center justify-center cursor-pointer">
-                        {{ file.fullPath }}
+                            <template>
+                                <svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
+                                    <path
+                                        d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z">
+                                    </path>
+                                </svg>
+                            </template>
                         </div>
-                    <div class="w-1/6 px-4 py-2">-</div>
+                        <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"
+                                />
                             </div>
+                            <span class="ml-2 truncate cursor-pointer">{{ file.fullPath }}</span>
+                        </div>
+                    </div>
+                    <div class="w-1/6 px-4 py-2 cursor-pointer">-</div>
+                </div>
+
                 <div
-                    class="flex items-center pl-4"
+                    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="w-5/6 flex items-center px-4 py-2 truncate">
+                    <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 truncate cursor-pointer">
                         {{ file.fullPath }}
                     </div>
-                    <div class="w-1/6 px-4 py-2">
+                    <div class="w-2/6 py-2 cursor-pointer">
                         {{ formatFileSize(file.size) }}
                     </div>
                 </div>
+
             </div>
         </div>
     </div>
@@ -36,6 +70,9 @@
 
 <script>
 import JSZip from 'jszip';
+import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue';
+import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
+
 
 export default {
     name: 'WebContentViewer',
@@ -44,6 +81,10 @@ export default {
             zipContent: [],
             pathTable: [],
             folderMap: {}, // Map to track folder open/close state
+            archiveUrl: '',
+            token: '',
+            ChevronRightIcon,
+            ChevronDownIcon,
         };
     },
     props: {

src/output.css

@@ -651,6 +651,10 @@ video {
   height: 1.25rem;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
 .max-h-8 {
   max-height: 2rem;
 }
@@ -687,6 +691,18 @@ video {
   width: 83.333333%;
 }
 
+.w-2\/6 {
+  width: 33.333333%;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
 .flex-grow {
   flex-grow: 1;
 }