diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index e51997b8..e8c83858 100644
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -4,7 +4,7 @@
     "node": true
   },
   "extends": [
-    "plugin:vue/essential",
+    "plugin:vue/vue3-essential",
     "eslint:recommended",
     "@vue/eslint-config-prettier"
   ],
diff --git a/frontend/index.html b/frontend/index.html
index a201a6c9..7d0b8bc9 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,25 +8,19 @@
       content="width=device-width, initial-scale=1, user-scalable=no"
     />
 
-    [{[ if .ReCaptcha -]}]
-    <script src="[{[ .ReCaptchaHost ]}]/recaptcha/api.js?render=explicit"></script>
-    [{[ end ]}]
-
-    <title>
-      [{[ if .Name -]}][{[ .Name ]}][{[ else ]}]File Browser[{[ end ]}]
-    </title>
+    <title>File Browser</title>
 
     <link
       rel="icon"
       type="image/png"
       sizes="32x32"
-      href="[{[ .StaticURL ]}]/img/icons/favicon-32x32.png"
+      href="/img/icons/favicon-32x32.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="16x16"
-      href="[{[ .StaticURL ]}]/img/icons/favicon-16x16.png"
+      href="/img/icons/favicon-16x16.png"
     />
 
     <!-- Add to home screen for Android and modern mobile browsers -->
@@ -35,49 +29,63 @@
       id="manifestPlaceholder"
       crossorigin="use-credentials"
     />
-    <meta
-      name="theme-color"
-      content="[{[ if .Color -]}][{[ .Color ]}][{[ else ]}]#2979ff[{[ end ]}]"
-    />
+    <meta name="theme-color" content="#2979ff" />
 
     <!-- Add to home screen for Safari on iOS/iPadOS -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
     <meta name="apple-mobile-web-app-title" content="assets" />
-    <link
-      rel="apple-touch-icon"
-      href="[{[ .StaticURL ]}]/img/icons/apple-touch-icon.png"
-    />
+    <link rel="apple-touch-icon" href="/img/icons/apple-touch-icon.png" />
 
     <!-- Add to home screen for Windows -->
     <meta
       name="msapplication-TileImage"
-      content="[{[ .StaticURL ]}]/img/icons/mstile-144x144.png"
-    />
-    <meta
-      name="msapplication-TileColor"
-      content="[{[ if .Color -]}][{[ .Color ]}][{[ else ]}]#2979ff[{[ end ]}]"
+      content="/img/icons/mstile-144x144.png"
     />
+    <meta name="msapplication-TileColor" content="#2979ff" />
 
     <!-- Inject Some Variables and generate the manifest json -->
     <script>
-      <!-- Json is actually a JS object, assign it directly -->
-      window.FileBrowser = [{[ .Json ]}];
-      <!-- Global function to prepend static url -->
+      // We can assign JSON directly
+      window.FileBrowser = {
+        AuthMethod: "json",
+        BaseURL: "",
+        CSS: false,
+        Color: "",
+        DisableExternal: false,
+        DisableUsedPercentage: false,
+        EnableExec: true,
+        EnableThumbs: true,
+        LoginPage: true,
+        Name: "",
+        NoAuth: false,
+        ReCaptcha: false,
+        ResizePreview: true,
+        Signup: false,
+        StaticURL: "",
+        Theme: "",
+        TusSettings: { chunkSize: 10485760, retryCount: 5 },
+        Version: "(untracked)",
+      };
+      // Global function to prepend static url
       window.__prependStaticUrl = (url) => {
-        return `${window.FileBrowser.StaticURL}/${url.replace(/^\/+/, '')}`;
+        return `${window.FileBrowser.StaticURL}/${url.replace(/^\/+/, "")}`;
       };
       var dynamicManifest = {
         name: window.FileBrowser.Name || "File Browser",
         short_name: window.FileBrowser.Name || "File Browser",
         icons: [
           {
-            src: window.__prependStaticUrl("/img/icons/android-chrome-192x192.png"),
+            src: window.__prependStaticUrl(
+              "/img/icons/android-chrome-192x192.png"
+            ),
             sizes: "192x192",
             type: "image/png",
           },
           {
-            src: window.__prependStaticUrl("/img/icons/android-chrome-512x512.png"),
+            src: window.__prependStaticUrl(
+              "/img/icons/android-chrome-512x512.png"
+            ),
             sizes: "512x512",
             type: "image/png",
           },
@@ -180,14 +188,5 @@
     </div>
 
     <script type="module" src="/src/main.js"></script>
-
-    [{[ if .Theme -]}]
-    <link
-      rel="stylesheet"
-      href="[{[ .StaticURL ]}]/themes/[{[ .Theme ]}].css"
-    />
-    [{[ end ]}] [{[ if .CSS -]}]
-    <link rel="stylesheet" href="[{[ .StaticURL ]}]/custom.css" />
-    [{[ end ]}]
   </body>
 </html>
diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json
new file mode 100644
index 00000000..2b82f870
--- /dev/null
+++ b/frontend/jsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a4e9d673..77dccd42 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,46 +9,48 @@
       "version": "2.0.0",
       "dependencies": {
         "@vue/compat": "^3.3.4",
-        "ace-builds": "^1.23.4",
+        "@vueuse/core": "^10.4.1",
+        "ace-builds": "^1.24.1",
         "clipboard": "^2.0.11",
-        "core-js": "^3.32.0",
+        "core-js": "^3.32.1",
         "css-vars-ponyfill": "^2.4.8",
-        "filesize": "^10.0.8",
+        "filesize": "^10.0.12",
         "js-base64": "^3.7.5",
+        "jwt-decode": "^3.1.2",
         "lodash.clonedeep": "^4.5.0",
         "lodash.throttle": "^4.1.1",
-        "material-icons": "^1.13.9",
+        "material-icons": "^1.13.10",
         "moment": "^2.29.4",
         "normalize.css": "^8.0.1",
         "noty": "^3.2.0-beta",
+        "pinia": "^2.1.6",
         "pretty-bytes": "^6.1.1",
         "qrcode.vue": "^3.4.1",
         "tus-js-client": "^3.1.1",
         "utif": "^3.1.0",
         "vue": "^3.3.4",
-        "vue-async-computed": "^3.9.0",
         "vue-i18n": "^9.2.2",
-        "vue-lazyload": "^1.3.5",
+        "vue-lazyload": "^3.0.0",
         "vue-router": "^4.2.4",
         "vue-simple-progress": "^1.1.1",
-        "vuex": "^4.1.0",
         "whatwg-fetch": "^3.6.17"
       },
       "devDependencies": {
-        "@intlify/unplugin-vue-i18n": "^0.12.2",
+        "@intlify/unplugin-vue-i18n": "^0.12.3",
         "@vitejs/plugin-legacy": "^4.1.1",
-        "@vitejs/plugin-vue": "^4.2.3",
+        "@vitejs/plugin-vue": "^4.3.3",
         "@vue/eslint-config-prettier": "^8.0.0",
-        "autoprefixer": "^10.4.14",
-        "eslint": "^8.46.0",
+        "autoprefixer": "^10.4.15",
+        "eslint": "^8.48.0",
         "eslint-plugin-prettier": "^5.0.0",
-        "eslint-plugin-vue": "^9.16.1",
+        "eslint-plugin-vue": "^9.17.0",
         "jsdom": "^22.1.0",
-        "postcss": "^8.4.27",
-        "prettier": "^3.0.1",
+        "postcss": "^8.4.28",
+        "prettier": "^3.0.2",
         "terser": "^5.19.2",
         "vite": "^4.4.9",
-        "vite-plugin-compression2": "^0.10.3"
+        "vite-plugin-compression2": "^0.10.4",
+        "vite-plugin-rewrite-all": "^1.0.1"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -96,9 +98,9 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.10.tgz",
-      "integrity": "sha512-fTmqbbUBAwCcre6zPzNngvsI0aNrPZe77AeqvDxWM9Nm+04RrJ3CAmGHA9f7lJQY6ZMhRztNemy4uslDxTX4Qw==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.11.tgz",
+      "integrity": "sha512-lh7RJrtPdhibbxndr6/xx0w8+CVlY5FJZiaSz908Fpy+G0xkBFTvwLcKJFF4PJxVfGhVWNebikpWGnOoC71juQ==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
@@ -106,15 +108,15 @@
         "@babel/generator": "^7.22.10",
         "@babel/helper-compilation-targets": "^7.22.10",
         "@babel/helper-module-transforms": "^7.22.9",
-        "@babel/helpers": "^7.22.10",
-        "@babel/parser": "^7.22.10",
+        "@babel/helpers": "^7.22.11",
+        "@babel/parser": "^7.22.11",
         "@babel/template": "^7.22.5",
-        "@babel/traverse": "^7.22.10",
-        "@babel/types": "^7.22.10",
+        "@babel/traverse": "^7.22.11",
+        "@babel/types": "^7.22.11",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.2",
+        "json5": "^2.2.3",
         "semver": "^6.3.1"
       },
       "engines": {
@@ -181,9 +183,9 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.10.tgz",
-      "integrity": "sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.11.tgz",
+      "integrity": "sha512-y1grdYL4WzmUDBRGK0pDbIoFd7UZKoDurDzWEoNMYoj1EL+foGRQNyPWDcC+YyegN5y1DUsFFmzjGijB3nSVAQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.22.5",
@@ -446,14 +448,14 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.10.tgz",
-      "integrity": "sha512-a41J4NW8HyZa1I1vAndrraTlPZ/eZoga2ZgS7fEr0tZJGVU4xqdE80CEm0CcNjha5EZ8fTBYLKHF0kqDUuAwQw==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.11.tgz",
+      "integrity": "sha512-vyOXC8PBWaGc5h7GMsNx68OH33cypkEDJCHvYVVgVbbxJDROYVtexSk0gK5iCF1xNjRIN2s8ai7hwkWDq5szWg==",
       "dev": true,
       "dependencies": {
         "@babel/template": "^7.22.5",
-        "@babel/traverse": "^7.22.10",
-        "@babel/types": "^7.22.10"
+        "@babel/traverse": "^7.22.11",
+        "@babel/types": "^7.22.11"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -474,9 +476,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-      "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.11.tgz",
+      "integrity": "sha512-R5zb8eJIBPJriQtbH/htEQy4k7E2dHWlD2Y2VT07JCzwYZHBxV5ZYtM0UhXSNMT74LyxuM+b1jdL7pSesXbC/g==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -779,9 +781,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-async-generator-functions": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.10.tgz",
-      "integrity": "sha512-eueE8lvKVzq5wIObKK/7dvoeKJ+xc6TvRn6aysIjS6pSCeLy7S/eVi7pEQknZqyqvzaNKdDtem8nUNTBgDVR2g==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.11.tgz",
+      "integrity": "sha512-0pAlmeRJn6wU84zzZsEOx1JV1Jf8fqO9ok7wofIJwUnplYo247dcd24P+cMJht7ts9xkzdtB0EPHmOb7F+KzXw==",
       "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.22.5",
@@ -860,12 +862,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-class-static-block": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.5.tgz",
-      "integrity": "sha512-SPToJ5eYZLxlnp1UzdARpOGeC2GbHvr9d/UV0EukuVx8atktg194oe+C5BqQ8jRTkgLRVOPYeXRSBg1IlMoVRA==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.11.tgz",
+      "integrity": "sha512-GMM8gGmqI7guS/llMFk1bJDkKfn3v3C4KHK9Yg1ey5qcHcOlKb0QvcMrgzvxo+T03/4szNh5lghY+fEC98Kq9g==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.22.5",
+        "@babel/helper-create-class-features-plugin": "^7.22.11",
         "@babel/helper-plugin-utils": "^7.22.5",
         "@babel/plugin-syntax-class-static-block": "^7.14.5"
       },
@@ -962,9 +964,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-dynamic-import": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.5.tgz",
-      "integrity": "sha512-0MC3ppTB1AMxd8fXjSrbPa7LT9hrImt+/fcj+Pg5YMD7UQyWp/02+JWpdnCymmsXwIx5Z+sYn1bwCn4ZJNvhqQ==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.11.tgz",
+      "integrity": "sha512-g/21plo58sfteWjaO0ZNVb+uEOkJNjAaHhbejrnBmu011l/eNDScmkbjCC3l4FKb10ViaGU4aOkFznSu2zRHgA==",
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5",
@@ -994,9 +996,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-export-namespace-from": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.5.tgz",
-      "integrity": "sha512-X4hhm7FRnPgd4nDA4b/5V280xCx6oL7Oob5+9qVS5C13Zq4bh1qq7LU0GgRU6b5dBWBvhGaXYVB4AcN6+ol6vg==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.11.tgz",
+      "integrity": "sha512-xa7aad7q7OiT8oNZ1mU7NrISjlSkVdMbNxn9IuLZyL9AJEhs1Apba3I+u5riX1dIkdptP5EKDG5XDPByWxtehw==",
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5",
@@ -1042,9 +1044,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-json-strings": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.5.tgz",
-      "integrity": "sha512-DuCRB7fu8MyTLbEQd1ew3R85nx/88yMoqo2uPSjevMj3yoN7CDM8jkgrY0wmVxfJZyJ/B9fE1iq7EQppWQmR5A==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.11.tgz",
+      "integrity": "sha512-CxT5tCqpA9/jXFlme9xIBCc5RPtdDq3JpkkhgHQqtDdiTnTI0jtZ0QzXhr5DILeYifDPp2wvY2ad+7+hLMW5Pw==",
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5",
@@ -1073,9 +1075,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-logical-assignment-operators": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.5.tgz",
-      "integrity": "sha512-MQQOUW1KL8X0cDWfbwYP+TbVbZm16QmQXJQ+vndPtH/BoO0lOKpVoEDMI7+PskYxH+IiE0tS8xZye0qr1lGzSA==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.11.tgz",
+      "integrity": "sha512-qQwRTP4+6xFCDV5k7gZBF3C31K34ut0tbEcTKxlX/0KXxm9GLcO14p570aWxFvVzx6QAfPgq7gaeIHXJC8LswQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5",
@@ -1120,12 +1122,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.5.tgz",
-      "integrity": "sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.11.tgz",
+      "integrity": "sha512-o2+bg7GDS60cJMgz9jWqRUsWkMzLCxp+jFDeDUT5sjRlAxcJWZ2ylNdI7QQ2+CH5hWu7OnN+Cv3htt7AkSf96g==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-module-transforms": "^7.22.9",
         "@babel/helper-plugin-utils": "^7.22.5",
         "@babel/helper-simple-access": "^7.22.5"
       },
@@ -1137,13 +1139,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-systemjs": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.5.tgz",
-      "integrity": "sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.11.tgz",
+      "integrity": "sha512-rIqHmHoMEOhI3VkVf5jQ15l539KrwhzqcBO6wdCNWPWc/JWt9ILNYNUssbRpeq0qWns8svuw8LnMNCvWBIJ8wA==",
       "dev": true,
       "dependencies": {
         "@babel/helper-hoist-variables": "^7.22.5",
-        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-module-transforms": "^7.22.9",
         "@babel/helper-plugin-utils": "^7.22.5",
         "@babel/helper-validator-identifier": "^7.22.5"
       },
@@ -1202,9 +1204,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.5.tgz",
-      "integrity": "sha512-6CF8g6z1dNYZ/VXok5uYkkBBICHZPiGEl7oDnAx2Mt1hlHVHOSIKWJaXHjQJA5VB43KZnXZDIexMchY4y2PGdA==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.11.tgz",
+      "integrity": "sha512-YZWOw4HxXrotb5xsjMJUDlLgcDXSfO9eCmdl1bgW4+/lAGdkjaEvOnQ4p5WKKdUgSzO39dgPl0pTnfxm0OAXcg==",
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5",
@@ -1218,9 +1220,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-numeric-separator": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.5.tgz",
-      "integrity": "sha512-NbslED1/6M+sXiwwtcAB/nieypGw02Ejf4KtDeMkCEpP6gWFMX1wI9WKYua+4oBneCCEmulOkRpwywypVZzs/g==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.11.tgz",
+      "integrity": "sha512-3dzU4QGPsILdJbASKhF/V2TVP+gJya1PsueQCxIPCEcerqF21oEcrob4mzjsp2Py/1nLfF5m+xYNMDpmA8vffg==",
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5",
@@ -1234,13 +1236,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-object-rest-spread": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.5.tgz",
-      "integrity": "sha512-Kk3lyDmEslH9DnvCDA1s1kkd3YWQITiBOHngOtDL9Pt6BZjzqb6hiOlb8VfjiiQJ2unmegBqZu0rx5RxJb5vmQ==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.11.tgz",
+      "integrity": "sha512-nX8cPFa6+UmbepISvlf5jhQyaC7ASs/7UxHmMkuJ/k5xSHvDPPaibMo+v3TXwU/Pjqhep/nFNpd3zn4YR59pnw==",
       "dev": true,
       "dependencies": {
-        "@babel/compat-data": "^7.22.5",
-        "@babel/helper-compilation-targets": "^7.22.5",
+        "@babel/compat-data": "^7.22.9",
+        "@babel/helper-compilation-targets": "^7.22.10",
         "@babel/helper-plugin-utils": "^7.22.5",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
         "@babel/plugin-transform-parameters": "^7.22.5"
@@ -1269,9 +1271,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-optional-catch-binding": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.5.tgz",
-      "integrity": "sha512-pH8orJahy+hzZje5b8e2QIlBWQvGpelS76C63Z+jhZKsmzfNaPQ+LaW6dcJ9bxTpo1mtXbgHwy765Ro3jftmUg==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.11.tgz",
+      "integrity": "sha512-rli0WxesXUeCJnMYhzAglEjLWVDF6ahb45HuprcmQuLidBJFWjNnOzssk2kuc6e33FlLaiZhG/kUIzUMWdBKaQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5",
@@ -1285,9 +1287,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-optional-chaining": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.10.tgz",
-      "integrity": "sha512-MMkQqZAZ+MGj+jGTG3OTuhKeBpNcO+0oCEbrGNEaOmiEn+1MzRyQlYsruGiU8RTK3zV6XwrVJTmwiDOyYK6J9g==",
+      "version": "7.22.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.12.tgz",
+      "integrity": "sha512-7XXCVqZtyFWqjDsYDY4T45w4mlx1rf7aOgkc/Ww76xkgBiOlmjPkx36PBLHa1k1rwWvVgYMPsbuVnIamx2ZQJw==",
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5",
@@ -1333,13 +1335,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-private-property-in-object": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.5.tgz",
-      "integrity": "sha512-/9xnaTTJcVoBtSSmrVyhtSvO3kbqS2ODoh2juEU72c3aYonNF0OMGiaz2gjukyKM2wBBYJP38S4JiE0Wfb5VMQ==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.11.tgz",
+      "integrity": "sha512-sSCbqZDBKHetvjSwpyWzhuHkmW5RummxJBVbYLkGkaiTOWGxml7SXt0iWa03bzxFIx7wOj3g/ILRd0RcJKBeSQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-create-class-features-plugin": "^7.22.5",
+        "@babel/helper-create-class-features-plugin": "^7.22.11",
         "@babel/helper-plugin-utils": "^7.22.5",
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
       },
@@ -1650,9 +1652,9 @@
       "dev": true
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.10.tgz",
-      "integrity": "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.11.tgz",
+      "integrity": "sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA==",
       "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
@@ -1682,9 +1684,9 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.10.tgz",
-      "integrity": "sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.11.tgz",
+      "integrity": "sha512-mzAenteTfomcB7mfPtyi+4oe5BZ6MXxWcn4CX+h4IRJ+OOGXBrWU6jDQavkQI9Vuc5P+donFabBfFCcmWka9lQ==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.22.10",
@@ -1693,8 +1695,8 @@
         "@babel/helper-function-name": "^7.22.5",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.22.10",
-        "@babel/types": "^7.22.10",
+        "@babel/parser": "^7.22.11",
+        "@babel/types": "^7.22.11",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -1703,9 +1705,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.10.tgz",
-      "integrity": "sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==",
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz",
+      "integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==",
       "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.22.5",
@@ -2083,31 +2085,19 @@
         "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
       }
     },
-    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
-      "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.6.2.tgz",
-      "integrity": "sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.8.0.tgz",
+      "integrity": "sha512-JylOEEzDiOryeUnFbQz+oViCXS0KsvR1mvHkoMiu5+UiBvy+RYX7tzlIIIEstF/gVa2tj9AQXk3dgnxv6KxhFg==",
       "dev": true,
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.1.tgz",
-      "integrity": "sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz",
+      "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
@@ -2128,9 +2118,9 @@
       }
     },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "13.20.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
-      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "version": "13.21.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.21.0.tgz",
+      "integrity": "sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -2143,9 +2133,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.46.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.46.0.tgz",
-      "integrity": "sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==",
+      "version": "8.48.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.48.0.tgz",
+      "integrity": "sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2213,34 +2203,6 @@
         }
       }
     },
-    "node_modules/@intlify/bundle-utils/node_modules/@intlify/message-compiler": {
-      "version": "9.3.0-beta.24",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.3.0-beta.24.tgz",
-      "integrity": "sha512-prhHATkgp0mpPqoVgiAtLmUc1JMvs8fMH6w53AVEBn+VF87dLhzanfmWY5FoZWORG51ag54gBDBOoM/VFv3m3A==",
-      "dev": true,
-      "dependencies": {
-        "@intlify/shared": "9.3.0-beta.24",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
-    "node_modules/@intlify/bundle-utils/node_modules/@intlify/shared": {
-      "version": "9.3.0-beta.24",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.3.0-beta.24.tgz",
-      "integrity": "sha512-AKxJ8s7eKIQWkNaf4wyyoLRwf4puCuQgjSChlDJm5JBEt6T8HGgnYTJLRXu6LD/JACn3Qwu6hM/XRX1c9yvjmQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
     "node_modules/@intlify/core-base": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
@@ -2255,6 +2217,26 @@
         "node": ">= 14"
       }
     },
+    "node_modules/@intlify/core-base/node_modules/@intlify/message-compiler": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
+      "integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/core-base/node_modules/@intlify/shared": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
+      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/@intlify/devtools-if": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
@@ -2266,19 +2248,7 @@
         "node": ">= 14"
       }
     },
-    "node_modules/@intlify/message-compiler": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
-      "integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
-      "dependencies": {
-        "@intlify/shared": "9.2.2",
-        "source-map": "0.6.1"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/@intlify/shared": {
+    "node_modules/@intlify/devtools-if/node_modules/@intlify/shared": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
       "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==",
@@ -2286,10 +2256,38 @@
         "node": ">= 14"
       }
     },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.3.0-beta.24",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.3.0-beta.24.tgz",
+      "integrity": "sha512-prhHATkgp0mpPqoVgiAtLmUc1JMvs8fMH6w53AVEBn+VF87dLhzanfmWY5FoZWORG51ag54gBDBOoM/VFv3m3A==",
+      "dev": true,
+      "dependencies": {
+        "@intlify/shared": "9.3.0-beta.24",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.3.0-beta.24",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.3.0-beta.24.tgz",
+      "integrity": "sha512-AKxJ8s7eKIQWkNaf4wyyoLRwf4puCuQgjSChlDJm5JBEt6T8HGgnYTJLRXu6LD/JACn3Qwu6hM/XRX1c9yvjmQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@intlify/unplugin-vue-i18n": {
-      "version": "0.12.2",
-      "resolved": "https://registry.npmjs.org/@intlify/unplugin-vue-i18n/-/unplugin-vue-i18n-0.12.2.tgz",
-      "integrity": "sha512-IIgzLRSPUKZM1FBdUAZ9NwVPiLUr4ea5g/HLWe2lB7gNtPDz4FOfUNUllIT504hT+3pDoJmjaYJ6pyqT7F4Wuw==",
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/@intlify/unplugin-vue-i18n/-/unplugin-vue-i18n-0.12.3.tgz",
+      "integrity": "sha512-0riPtSfTM58JmGNMmJho/aHD2z3K24BESYAmkLvKlo61/LbaPvnjYU1DbSbJEm6bSjE2oEjUj+di3QaYxXei/w==",
       "dev": true,
       "dependencies": {
         "@intlify/bundle-utils": "^7.0.2",
@@ -2325,18 +2323,6 @@
         }
       }
     },
-    "node_modules/@intlify/unplugin-vue-i18n/node_modules/@intlify/shared": {
-      "version": "9.3.0-beta.24",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.3.0-beta.24.tgz",
-      "integrity": "sha512-AKxJ8s7eKIQWkNaf4wyyoLRwf4puCuQgjSChlDJm5JBEt6T8HGgnYTJLRXu6LD/JACn3Qwu6hM/XRX1c9yvjmQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
     "node_modules/@intlify/vue-devtools": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
@@ -2349,6 +2335,14 @@
         "node": ">= 14"
       }
     },
+    "node_modules/@intlify/vue-devtools/node_modules/@intlify/shared": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
+      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -2461,99 +2455,10 @@
         "url": "https://opencollective.com/unts"
       }
     },
-    "node_modules/@pkgr/utils/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@pkgr/utils/node_modules/define-lazy-prop": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
-      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@pkgr/utils/node_modules/open": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/open/-/open-9.1.0.tgz",
-      "integrity": "sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==",
-      "dev": true,
-      "dependencies": {
-        "default-browser": "^4.0.0",
-        "define-lazy-prop": "^3.0.0",
-        "is-inside-container": "^1.0.0",
-        "is-wsl": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@pkgr/utils/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@pkgr/utils/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@pkgr/utils/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@pkgr/utils/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/@rollup/pluginutils": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
-      "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.4.tgz",
+      "integrity": "sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==",
       "dev": true,
       "dependencies": {
         "@types/estree": "^1.0.0",
@@ -2581,39 +2486,16 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@types/eslint": {
-      "version": "8.44.1",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.1.tgz",
-      "integrity": "sha512-XpNDc4Z5Tb4x+SW1MriMVeIsMoONHCkWFMkR/aPJbzEsxqHy+4Glu/BqTdPrApfDeMaXbtNh6bseNgl5KaWrSg==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
       "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
       "dev": true
     },
-    "node_modules/@types/json-schema": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
-      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/@types/node": {
-      "version": "20.4.8",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.8.tgz",
-      "integrity": "sha512-0mHckf6D2DiIAzh8fM8f3HQCvMKDpK94YQ0DSVkfWTG9BZleYIWudw9cJxX8oCk9bM+vAkDyujDV6dmKHbvQpg==",
-      "dev": true,
-      "optional": true,
-      "peer": true
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
+      "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
     },
     "node_modules/@vitejs/plugin-legacy": {
       "version": "4.1.1",
@@ -2641,9 +2523,9 @@
       }
     },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz",
-      "integrity": "sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.3.3.tgz",
+      "integrity": "sha512-ssxyhIAZqB0TrpUg6R0cBpCuMk9jTIlO1GNSKKQD6S8VjnXi6JXKfUXjSsxey9IwQiaRGsO1WnW9Rkl1L6AJVw==",
       "dev": true,
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
@@ -2787,6 +2669,89 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
       "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.4.1.tgz",
+      "integrity": "sha512-DkHIfMIoSIBjMgRRvdIvxsyboRZQmImofLyOHADqiVbQVilP8VVHDhBX2ZqoItOgu7dWa8oXiNnScOdPLhdEXg==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.17",
+        "@vueuse/metadata": "10.4.1",
+        "@vueuse/shared": "10.4.1",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.4.1.tgz",
+      "integrity": "sha512-2Sc8X+iVzeuMGHr6O2j4gv/zxvQGGOYETYXEc41h0iZXIRnRbJZGmY/QP8dvzqUelf8vg0p/yEA5VpCEu+WpZg==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.4.1.tgz",
+      "integrity": "sha512-vz5hbAM4qA0lDKmcr2y3pPdU+2EVw/yzfRsBdu+6+USGa4PxqSQRYIUC9/NcT06y+ZgaTsyURw2I9qOFaaXHAg==",
+      "dependencies": {
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -2794,9 +2759,9 @@
       "dev": true
     },
     "node_modules/ace-builds": {
-      "version": "1.23.4",
-      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.23.4.tgz",
-      "integrity": "sha512-a4hKAT2T7KNUQC4LQPW2peuoEsZmLYTn4Dwjkh26A3Z+fQ8/fA2JZNs3V6CqvivhbyMQXQJD1u/0qTCoSS6deA=="
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.24.1.tgz",
+      "integrity": "sha512-TLcxMxiTRX5Eq9bBVSd/bTJlanCBULiv/IULLohJDDaCAfcpZKJBVSd4OWfN/j2c2jCLc+jhpNWGELiJZw3wPw=="
     },
     "node_modules/acorn": {
       "version": "8.10.0",
@@ -2894,9 +2859,9 @@
       "dev": true
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.14",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
-      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+      "version": "10.4.15",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
+      "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==",
       "dev": true,
       "funding": [
         {
@@ -2906,11 +2871,15 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "browserslist": "^4.21.5",
-        "caniuse-lite": "^1.0.30001464",
+        "browserslist": "^4.21.10",
+        "caniuse-lite": "^1.0.30001520",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -3080,10 +3049,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001519",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz",
-      "integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==",
+      "version": "1.0.30001524",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001524.tgz",
+      "integrity": "sha512-Jj917pJtYg9HSJBF95HVX3Cdr89JUyLT4IZ8SvM5aDRni95swKgYi3TgYLH5hnGfPE/U1dg6IfZ50UsIlLkwSA==",
       "dev": true,
       "funding": [
         {
@@ -3211,6 +3189,15 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/connect-history-api-fallback": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
+      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
@@ -3218,9 +3205,9 @@
       "dev": true
     },
     "node_modules/core-js": {
-      "version": "3.32.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.32.0.tgz",
-      "integrity": "sha512-rd4rYZNlF3WuoYuRIDEmbR/ga9CeuWX9U05umAvgrrZoHY4Z++cp/xwPQMvUpBB4Ag6J8KfD80G0zwCyaSxDww==",
+      "version": "3.32.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.32.1.tgz",
+      "integrity": "sha512-lqufgNn9NLnESg5mQeYsxQP5w7wrViSj0jr/kv6ECQiByzQkrn1MKvV0L3acttpDqfQrHLwr2KCMgX5b8X+lyQ==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -3228,18 +3215,32 @@
       }
     },
     "node_modules/core-js-compat": {
-      "version": "3.32.0",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.32.0.tgz",
-      "integrity": "sha512-7a9a3D1k4UCVKnLhrgALyFcP7YCsLOQIxPd0dKjf/6GuPcgyiGP70ewWdCGrSK7evyhymi0qO4EqCmSJofDeYw==",
+      "version": "3.32.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.32.1.tgz",
+      "integrity": "sha512-GSvKDv4wE0bPnQtjklV101juQ85g6H3rm5PDP20mqlS5j0kXF3pP97YvAu5hl+uFHqMictp3b2VxOHljWMAtuA==",
       "dev": true,
       "dependencies": {
-        "browserslist": "^4.21.9"
+        "browserslist": "^4.21.10"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/css-vars-ponyfill": {
       "version": "2.4.8",
       "resolved": "https://registry.npmjs.org/css-vars-ponyfill/-/css-vars-ponyfill-2.4.8.tgz",
@@ -3360,80 +3361,10 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/default-browser/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/default-browser/node_modules/execa": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
-      "integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.1",
-        "human-signals": "^4.3.0",
-        "is-stream": "^3.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^5.1.0",
-        "onetime": "^6.0.0",
-        "signal-exit": "^3.0.7",
-        "strip-final-newline": "^3.0.0"
-      },
-      "engines": {
-        "node": "^14.18.0 || ^16.14.0 || >=18.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/default-browser/node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/default-browser/node_modules/human-signals": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
-      "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=14.18.0"
-      }
-    },
-    "node_modules/default-browser/node_modules/is-stream": {
+    "node_modules/define-lazy-prop": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
-      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
-      "dev": true,
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/default-browser/node_modules/mimic-fn": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
-      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
+      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
       "dev": true,
       "engines": {
         "node": ">=12"
@@ -3442,105 +3373,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/default-browser/node_modules/npm-run-path": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
-      "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^4.0.0"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/default-browser/node_modules/npm-run-path/node_modules/path-key": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
-      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/default-browser/node_modules/onetime": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
-      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
-      "dev": true,
-      "dependencies": {
-        "mimic-fn": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/default-browser/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/default-browser/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/default-browser/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/default-browser/node_modules/strip-final-newline": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
-      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/default-browser/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -3580,9 +3412,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.487",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.487.tgz",
-      "integrity": "sha512-XbCRs/34l31np/p33m+5tdBrdXu9jJkZxSbNxj5I0H1KtV2ZMSB+i/HYqDiRzHaFx2T5EdytjoBRe8QRJE2vQg==",
+      "version": "1.4.503",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.503.tgz",
+      "integrity": "sha512-LF2IQit4B0VrUHFeQkWhZm97KuJSGF2WJqq1InpY+ECpFRkXd8yTIaTtJxsO0OKDmiBYwWqcrNaXOurn2T2wiA==",
       "dev": true
     },
     "node_modules/entities": {
@@ -3674,15 +3506,15 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.46.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.46.0.tgz",
-      "integrity": "sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==",
+      "version": "8.48.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.48.0.tgz",
+      "integrity": "sha512-sb6DLeIuRXxeM1YljSe1KEx9/YYeZFQWcV8Rq9HfigmdDEugjLEVEa1ozDjL6YDjBpQHPJxJzze+alxi4T3OLg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.1",
-        "@eslint/js": "^8.46.0",
+        "@eslint/eslintrc": "^2.1.2",
+        "@eslint/js": "8.48.0",
         "@humanwhocodes/config-array": "^0.11.10",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -3693,7 +3525,7 @@
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
         "eslint-scope": "^7.2.2",
-        "eslint-visitor-keys": "^3.4.2",
+        "eslint-visitor-keys": "^3.4.3",
         "espree": "^9.6.1",
         "esquery": "^1.4.2",
         "esutils": "^2.0.2",
@@ -3769,9 +3601,9 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "9.16.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.16.1.tgz",
-      "integrity": "sha512-2FtnTqazA6aYONfDuOZTk0QzwhAwi7Z4+uJ7+GHeGxcKapjqWlDsRWDenvyG/utyOfAS5bVRmAG3cEWiYEz2bA==",
+      "version": "9.17.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.17.0.tgz",
+      "integrity": "sha512-r7Bp79pxQk9I5XDP0k2dpUC7Ots3OSWgvGZNu3BxmKK6Zg7NgVtcOB6OCna5Kb9oQwJPl5hq183WD0SY5tZtIQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
@@ -3822,6 +3654,22 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/eslint-utils": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
@@ -3837,7 +3685,7 @@
         "url": "https://github.com/sponsors/mysticatea"
       }
     },
-    "node_modules/eslint-visitor-keys": {
+    "node_modules/eslint-utils/node_modules/eslint-visitor-keys": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
       "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
@@ -3846,6 +3694,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/eslint/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -3895,20 +3755,6 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
-    "node_modules/eslint/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/eslint/node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -3921,54 +3767,10 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint/node_modules/eslint-scope": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
-      "dev": true,
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint/node_modules/eslint-visitor-keys": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
-      "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint/node_modules/find-up": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^6.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/eslint/node_modules/globals": {
-      "version": "13.20.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
-      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "version": "13.21.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.21.0.tgz",
+      "integrity": "sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -3989,81 +3791,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/eslint/node_modules/locate-path": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint/node_modules/p-limit": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-      "dev": true,
-      "dependencies": {
-        "yocto-queue": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint/node_modules/p-locate": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/eslint/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/eslint/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/eslint/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -4076,21 +3803,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/eslint/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/espree": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
@@ -4108,18 +3820,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/espree/node_modules/eslint-visitor-keys": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
-      "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -4180,6 +3880,29 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/execa": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
+      "integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.1",
+        "human-signals": "^4.3.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^3.0.7",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || ^16.14.0 || >=18.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4254,9 +3977,9 @@
       }
     },
     "node_modules/filesize": {
-      "version": "10.0.8",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.0.8.tgz",
-      "integrity": "sha512-/ylBrxZ1GAjgh2CEemKKLwTtmXfWqTtN1jRl6iqLwnMEucUX5cmaCCUPGstQOHVCcK9uYL6o1cPNakLQU2sasQ==",
+      "version": "10.0.12",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.0.12.tgz",
+      "integrity": "sha512-6RS9gDchbn+qWmtV2uSjo5vmKizgfCQeb5jKmqx8HyzA3MoLqqyQxN+QcjkGBJt7FjJ9qFce67Auyya5rRRbpw==",
       "engines": {
         "node": ">= 10.4.0"
       }
@@ -4273,17 +3996,34 @@
         "node": ">=8"
       }
     },
-    "node_modules/flat-cache": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
-      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
       "dev": true,
       "dependencies": {
-        "flatted": "^3.1.0",
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.1.0.tgz",
+      "integrity": "sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==",
+      "dev": true,
+      "dependencies": {
+        "flatted": "^3.2.7",
+        "keyv": "^4.5.3",
         "rimraf": "^3.0.2"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": ">=12.0.0"
       }
     },
     "node_modules/flatted": {
@@ -4307,9 +4047,9 @@
       }
     },
     "node_modules/fraction.js": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
-      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.1.tgz",
+      "integrity": "sha512-/KxoyCnPM0GwYI4NN0Iag38Tqt+od3/mLuguepLgCAKPn0ZhC544nssAW0tG2/00zXEYl9W+7hwAIpLHo6Oc7Q==",
       "dev": true,
       "engines": {
         "node": "*"
@@ -4326,9 +4066,9 @@
       "dev": true
     },
     "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "dev": true,
       "hasInstallScript": true,
       "optional": true,
@@ -4359,6 +4099,18 @@
       "resolved": "https://registry.npmjs.org/get-css-data/-/get-css-data-2.1.0.tgz",
       "integrity": "sha512-HtPrzGk8aBF9rLeQNuImcXci7YVqsMEKzVflEWaCJu25ehxyDNiZRWoSxqSFUBfma8LERqKo70t/TcaGjIsM9g=="
     },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -4480,12 +4232,12 @@
       }
     },
     "node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
+      "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
       "dev": true,
       "engines": {
-        "node": ">=10.17.0"
+        "node": ">=14.18.0"
       }
     },
     "node_modules/iconv-lite": {
@@ -4575,15 +4327,15 @@
       }
     },
     "node_modules/is-docker": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
+      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
       "dev": true,
       "bin": {
         "is-docker": "cli.js"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -4628,21 +4380,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/is-inside-container/node_modules/is-docker": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
-      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
-      "dev": true,
-      "bin": {
-        "is-docker": "cli.js"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -4667,6 +4404,18 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "dev": true
     },
+    "node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -4679,6 +4428,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-wsl/node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -4762,6 +4526,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -4814,6 +4584,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/jsonc-eslint-parser/node_modules/eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/jsonc-eslint-parser/node_modules/espree": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
@@ -4834,6 +4613,20 @@
       "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
       "dev": true
     },
+    "node_modules/jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
+    "node_modules/keyv": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz",
+      "integrity": "sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==",
+      "dev": true,
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -4847,6 +4640,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -4934,9 +4742,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.2",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.2.tgz",
-      "integrity": "sha512-lNZdu7pewtq/ZvWUp9Wpf/x7WzMTsR26TWV03BRZrXFsv+BI6dy8RAiKgm1uM/kyR0rCfUcqvOlXKG66KhIGug==",
+      "version": "0.30.3",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
+      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -4945,9 +4753,9 @@
       }
     },
     "node_modules/material-icons": {
-      "version": "1.13.9",
-      "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-1.13.9.tgz",
-      "integrity": "sha512-dwuf2C8LR07FcrjRDx0vWnDEcHiDuamXOmtAck8bdONUv5Fi6wR/ubQwPfG1NbcqgPg+y0fHN8Unj5DO+5fV4w=="
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-1.13.10.tgz",
+      "integrity": "sha512-XSESl/zo7XzD9nz8ihUq5HO0DzsvnVex9t8hpH8pqY1SFlESAdHlMQQbcCyyP58mPp6Wm1tyt0OaDNZhBT9lXQ=="
     },
     "node_modules/merge-stream": {
       "version": "2.0.0",
@@ -4999,12 +4807,15 @@
       }
     },
     "node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
       "dev": true,
       "engines": {
-        "node": ">=6"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/minimatch": {
@@ -5020,15 +4831,15 @@
       }
     },
     "node_modules/mlly": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.0.tgz",
-      "integrity": "sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.1.tgz",
+      "integrity": "sha512-SCDs78Q2o09jiZiE2WziwVBEqXQ02XkGdUy45cbJf+BpYRIjArXRJ1Wbowxkb+NaM9DWvS3UC9GiO/6eqvQ/pg==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.9.0",
+        "acorn": "^8.10.0",
         "pathe": "^1.1.1",
         "pkg-types": "^1.0.3",
-        "ufo": "^1.1.2"
+        "ufo": "^1.3.0"
       }
     },
     "node_modules/moment": {
@@ -5103,6 +4914,33 @@
       "integrity": "sha512-ntRbHuQ9SnnnVFZm/oq5L1DBCaHQUvsU24AwZH3PGjAWx2YqR/IhOadMk11vmJovYiQo00oqTj6Hp+D6PGtmLA==",
       "deprecated": "no longer supported"
     },
+    "node_modules/npm-run-path": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
+      "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm-run-path/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -5131,15 +4969,33 @@
       }
     },
     "node_modules/onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
       "dev": true,
       "dependencies": {
-        "mimic-fn": "^2.1.0"
+        "mimic-fn": "^4.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/open": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-9.1.0.tgz",
+      "integrity": "sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==",
+      "dev": true,
+      "dependencies": {
+        "default-browser": "^4.0.0",
+        "define-lazy-prop": "^3.0.0",
+        "is-inside-container": "^1.0.0",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=14.16"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -5162,6 +5018,36 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
@@ -5179,15 +5065,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/parent-module/node_modules/callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/parse5": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
@@ -5218,6 +5095,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -5247,6 +5133,56 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.6.tgz",
+      "integrity": "sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-types": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
@@ -5259,9 +5195,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.27",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
-      "integrity": "sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==",
+      "version": "8.4.28",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
+      "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
       "funding": [
         {
           "type": "opencollective",
@@ -5314,9 +5250,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.1.tgz",
-      "integrity": "sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.2.tgz",
+      "integrity": "sha512-o2YR9qtniXvwEZlOKbveKfDQVyqxbEIWn48Z8m3ZJjBjcCmUy3xZGIv+7AkaeuaTr6yPXJjwv07ZWlsWbEy1rQ==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -5557,9 +5493,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.27.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.27.2.tgz",
-      "integrity": "sha512-YGwmHf7h2oUHkVBT248x0yt6vZkYQ3/rvE5iQuVBh3WO8GcJ6BNeOkpoX1yMHIiBm18EMLjBPIoUDkhgnyxGOQ==",
+      "version": "3.28.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.1.tgz",
+      "integrity": "sha512-R9OMQmIHJm9znrU3m3cpE8uhN0fGdXiawME7aZIpQqvpS/85+Vt1Hq1/yVIcYfOmaQiHjvXkQAoJukvLpau6Yw==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -5593,20 +5529,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/run-applescript/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/run-applescript/node_modules/execa": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@@ -5630,16 +5552,13 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
-    "node_modules/run-applescript/node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+    "node_modules/run-applescript/node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
       "dev": true,
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=10.17.0"
       }
     },
     "node_modules/run-applescript/node_modules/is-stream": {
@@ -5654,6 +5573,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/run-applescript/node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/run-applescript/node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -5666,49 +5594,28 @@
         "node": ">=8"
       }
     },
-    "node_modules/run-applescript/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+    "node_modules/run-applescript/node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
       "dev": true,
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/run-applescript/node_modules/shebang-command": {
+    "node_modules/run-applescript/node_modules/strip-final-newline": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/run-applescript/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "dev": true,
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/run-applescript/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
+        "node": ">=6"
       }
     },
     "node_modules/run-parallel": {
@@ -5766,6 +5673,27 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -5810,12 +5738,15 @@
       }
     },
     "node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
       "dev": true,
       "engines": {
-        "node": ">=6"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/strip-json-comments": {
@@ -5877,9 +5808,9 @@
       }
     },
     "node_modules/systemjs": {
-      "version": "6.14.1",
-      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.14.1.tgz",
-      "integrity": "sha512-8ftwWd+XnQtZ/aGbatrN4QFNGrKJzmbtixW+ODpci7pyoTajg4sonPP8aFLESAcuVxaC1FyDESt+SpfFCH9rZQ==",
+      "version": "6.14.2",
+      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.14.2.tgz",
+      "integrity": "sha512-1TlOwvKWdXxAY9vba+huLu99zrQURDWA8pUTYsRIYDZYQbGyK+pyEP4h4dlySsqo7ozyJBmYD20F+iUHhAltEg==",
       "dev": true
     },
     "node_modules/terser": {
@@ -5972,9 +5903,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
-      "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
       "dev": true
     },
     "node_modules/tus-js-client": {
@@ -6027,9 +5958,9 @@
       }
     },
     "node_modules/ufo": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.2.0.tgz",
-      "integrity": "sha512-RsPyTbqORDNDxqAdQPQBpgqhWle1VcTSou/FraClYlHf6TZnQcGslpLcAphNR+sQW4q5lLWLbOsRlh9j24baQg==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.0.tgz",
+      "integrity": "sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==",
       "dev": true
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
@@ -6220,14 +6151,29 @@
       }
     },
     "node_modules/vite-plugin-compression2": {
-      "version": "0.10.3",
-      "resolved": "https://registry.npmjs.org/vite-plugin-compression2/-/vite-plugin-compression2-0.10.3.tgz",
-      "integrity": "sha512-QhEfkA8qoEekcclWJEyC+YLI5bI4pC4eLCjb254dXmKHScsrwHBOL1NiOielKFvrxdTMnoAFaiB72668VvAvlw==",
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/vite-plugin-compression2/-/vite-plugin-compression2-0.10.4.tgz",
+      "integrity": "sha512-9YcESw0n1j8KxxY1NJKEcItlT0bLS+K/NKa/xPqZGEHW/qwgigIeRF/bCTUdZ/bn/mg2+PeERWgRmK8G1L0tyg==",
       "dev": true,
       "dependencies": {
         "@rollup/pluginutils": "^5.0.2"
       }
     },
+    "node_modules/vite-plugin-rewrite-all": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-rewrite-all/-/vite-plugin-rewrite-all-1.0.1.tgz",
+      "integrity": "sha512-W0DAchC8ynuQH0lYLIu5/5+JGfYlUTRD8GGNtHFXRJX4FzzB9MajtqHBp26zq/ly9sDt5BqrfdT08rv3RbB0LQ==",
+      "dev": true,
+      "dependencies": {
+        "connect-history-api-fallback": "^1.6.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^2.0.0 || ^3.0.0 || ^4.0.0"
+      }
+    },
     "node_modules/vue": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
@@ -6240,14 +6186,6 @@
         "@vue/shared": "3.3.4"
       }
     },
-    "node_modules/vue-async-computed": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/vue-async-computed/-/vue-async-computed-3.9.0.tgz",
-      "integrity": "sha512-ac6m/9zxHHNGGKNOU1en8qNk+fAmEbJLuWL7qyQTFuH3vjv3V4urv//QHcVzCobROM6btnaDG2b+XYMncF/ETA==",
-      "peerDependencies": {
-        "vue": "~2"
-      }
-    },
     "node_modules/vue-eslint-parser": {
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.1.tgz",
@@ -6272,34 +6210,6 @@
         "eslint": ">=6.0.0"
       }
     },
-    "node_modules/vue-eslint-parser/node_modules/eslint-scope": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
-      "dev": true,
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/vue-eslint-parser/node_modules/eslint-visitor-keys": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
-      "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/vue-eslint-parser/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -6350,10 +6260,18 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vue-i18n/node_modules/@intlify/shared": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
+      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/vue-lazyload": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.3.5.tgz",
-      "integrity": "sha512-SCO/LWgCCbjaregHO4wg2buzITBdPBZRlIS104vERGpT88uxXsK26veuzZpgGAXMR8WpkaR+JDqz80OedpaLiA=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-3.0.0.tgz",
+      "integrity": "sha512-h2keL/Rj550dLgesgOtXJS9qOiSMmuJNeVlfNAYV1/IYwOQYaWk5mFJlwRxmZDK9YC5gECcFLYYj7z1lKSf9ug=="
     },
     "node_modules/vue-router": {
       "version": "4.2.4",
@@ -6374,17 +6292,6 @@
       "resolved": "https://registry.npmjs.org/vue-simple-progress/-/vue-simple-progress-1.1.1.tgz",
       "integrity": "sha512-ltLWYBA5eVQHWyt1NwZeGeK0VQC69JVh1oqUdro0po7r8Hc8SEMEyEfuwyCO4s27h5I3jbD99BKKkyPSQZgoZA=="
     },
-    "node_modules/vuex": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
-      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
-      "dependencies": {
-        "@vue/devtools-api": "^6.0.0-beta.11"
-      },
-      "peerDependencies": {
-        "vue": "^3.2.0"
-      }
-    },
     "node_modules/w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
@@ -6460,6 +6367,21 @@
         "node": ">=14"
       }
     },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -6528,6 +6450,15 @@
         "yaml": "^1.10.0"
       }
     },
+    "node_modules/yaml-eslint-parser/node_modules/eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 4c586148..4b5189c7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,46 +14,48 @@
   },
   "dependencies": {
     "@vue/compat": "^3.3.4",
-    "ace-builds": "^1.23.4",
+    "@vueuse/core": "^10.4.1",
+    "ace-builds": "^1.24.1",
     "clipboard": "^2.0.11",
-    "core-js": "^3.32.0",
+    "core-js": "^3.32.1",
     "css-vars-ponyfill": "^2.4.8",
-    "filesize": "^10.0.8",
+    "filesize": "^10.0.12",
     "js-base64": "^3.7.5",
+    "jwt-decode": "^3.1.2",
     "lodash.clonedeep": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "material-icons": "^1.13.9",
+    "material-icons": "^1.13.10",
     "moment": "^2.29.4",
     "normalize.css": "^8.0.1",
     "noty": "^3.2.0-beta",
+    "pinia": "^2.1.6",
     "pretty-bytes": "^6.1.1",
     "qrcode.vue": "^3.4.1",
     "tus-js-client": "^3.1.1",
     "utif": "^3.1.0",
     "vue": "^3.3.4",
-    "vue-async-computed": "^3.9.0",
     "vue-i18n": "^9.2.2",
-    "vue-lazyload": "^1.3.5",
+    "vue-lazyload": "^3.0.0",
     "vue-router": "^4.2.4",
     "vue-simple-progress": "^1.1.1",
-    "vuex": "^4.1.0",
     "whatwg-fetch": "^3.6.17"
   },
   "devDependencies": {
-    "@intlify/unplugin-vue-i18n": "^0.12.2",
+    "@intlify/unplugin-vue-i18n": "^0.12.3",
     "@vitejs/plugin-legacy": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^4.3.3",
     "@vue/eslint-config-prettier": "^8.0.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.46.0",
+    "autoprefixer": "^10.4.15",
+    "eslint": "^8.48.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-vue": "^9.16.1",
+    "eslint-plugin-vue": "^9.17.0",
     "jsdom": "^22.1.0",
-    "postcss": "^8.4.27",
-    "prettier": "^3.0.1",
+    "postcss": "^8.4.28",
+    "prettier": "^3.0.2",
     "terser": "^5.19.2",
     "vite": "^4.4.9",
-    "vite-plugin-compression2": "^0.10.3"
+    "vite-plugin-compression2": "^0.10.4",
+    "vite-plugin-rewrite-all": "^1.0.1"
   },
   "browserslist": [
     "> 1%",
diff --git a/frontend/public/index.html b/frontend/public/index.html
index d6986bf1..39d926d8 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -1,144 +1,193 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, user-scalable=no"
+    />
 
-  [{[ if .ReCaptcha -]}]
+    [{[ if .ReCaptcha -]}]
     <script src="[{[ .ReCaptchaHost ]}]/recaptcha/api.js?render=explicit"></script>
-  [{[ end ]}]
+    [{[ end ]}]
 
-  <title>[{[ if .Name -]}][{[ .Name ]}][{[ else ]}]File Browser[{[ end ]}]</title>
+    <title>
+      [{[ if .Name -]}][{[ .Name ]}][{[ else ]}]File Browser[{[ end ]}]
+    </title>
 
-  <link rel="icon" type="image/png" sizes="32x32" href="[{[ .StaticURL ]}]/img/icons/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="[{[ .StaticURL ]}]/img/icons/favicon-16x16.png">
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="[{[ .StaticURL ]}]/img/icons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="[{[ .StaticURL ]}]/img/icons/favicon-16x16.png"
+    />
 
-  <!-- Add to home screen for Android and modern mobile browsers -->
-  <link rel="manifest" id="manifestPlaceholder" crossorigin="use-credentials">
-  <meta name="theme-color" content="[{[ if .Color -]}][{[ .Color ]}][{[ else ]}]#2979ff[{[ end ]}]">
+    <!-- Add to home screen for Android and modern mobile browsers -->
+    <link
+      rel="manifest"
+      id="manifestPlaceholder"
+      crossorigin="use-credentials"
+    />
+    <meta
+      name="theme-color"
+      content="[{[ if .Color -]}][{[ .Color ]}][{[ else ]}]#2979ff[{[ end ]}]"
+    />
 
-  <!-- Add to home screen for Safari on iOS/iPadOS -->
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="apple-mobile-web-app-title" content="assets">
-  <link rel="apple-touch-icon" href="[{[ .StaticURL ]}]/img/icons/apple-touch-icon.png">
+    <!-- Add to home screen for Safari on iOS/iPadOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta name="apple-mobile-web-app-title" content="assets" />
+    <link
+      rel="apple-touch-icon"
+      href="[{[ .StaticURL ]}]/img/icons/apple-touch-icon.png"
+    />
 
-  <!-- Add to home screen for Windows -->
-  <meta name="msapplication-TileImage" content="[{[ .StaticURL ]}]/img/icons/mstile-144x144.png">
-  <meta name="msapplication-TileColor" content="[{[ if .Color -]}][{[ .Color ]}][{[ else ]}]#2979ff[{[ end ]}]">
+    <!-- Add to home screen for Windows -->
+    <meta
+      name="msapplication-TileImage"
+      content="[{[ .StaticURL ]}]/img/icons/mstile-144x144.png"
+    />
+    <meta
+      name="msapplication-TileColor"
+      content="[{[ if .Color -]}][{[ .Color ]}][{[ else ]}]#2979ff[{[ end ]}]"
+    />
 
-  <!-- Inject Some Variables and generate the manifest json -->
-  <script>
-    window.FileBrowser = JSON.parse('[{[ .Json ]}]');
+    <!-- Inject Some Variables and generate the manifest json -->
+    <script>
+      // We can assign JSON directly
+      window.FileBrowser = [{[ .Json ]}];
+      // Global function to prepend static url
+      window.__prependStaticUrl = (url) => {
+        return `${window.FileBrowser.StaticURL}/${url.replace(/^\/+/, "")}`;
+      };
+      var dynamicManifest = {
+        name: window.FileBrowser.Name || "File Browser",
+        short_name: window.FileBrowser.Name || "File Browser",
+        icons: [
+          {
+            src: window.__prependStaticUrl("/img/icons/android-chrome-192x192.png"),
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: window.__prependStaticUrl("/img/icons/android-chrome-512x512.png"),
+            sizes: "512x512",
+            type: "image/png",
+          },
+        ],
+        start_url: window.location.origin + window.FileBrowser.BaseURL,
+        display: "standalone",
+        background_color: "#ffffff",
+        theme_color: window.FileBrowser.Color || "#455a64",
+      };
 
-    var fullStaticURL = window.location.origin + window.FileBrowser.StaticURL;
-    var dynamicManifest = {
-      "name": window.FileBrowser.Name || 'File Browser',
-      "short_name": window.FileBrowser.Name || 'File Browser',
-      "icons": [
-        {
-          "src": fullStaticURL + "/img/icons/android-chrome-192x192.png",
-          "sizes": "192x192",
-          "type": "image/png"
-        },
-        {
-          "src": fullStaticURL + "/img/icons/android-chrome-512x512.png",
-          "sizes": "512x512",
-          "type": "image/png"
+      const stringManifest = JSON.stringify(dynamicManifest);
+      const blob = new Blob([stringManifest], { type: "application/json" });
+      const manifestURL = URL.createObjectURL(blob);
+      document
+        .querySelector("#manifestPlaceholder")
+        .setAttribute("href", manifestURL);
+    </script>
+
+    <style>
+      #loading {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        z-index: 9999;
+        transition: 0.1s ease opacity;
+        -webkit-transition: 0.1s ease opacity;
+      }
+
+      #loading.done {
+        opacity: 0;
+      }
+
+      #loading .spinner {
+        width: 70px;
+        text-align: center;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+      }
+
+      #loading .spinner > div {
+        width: 18px;
+        height: 18px;
+        background-color: #333;
+        border-radius: 100%;
+        display: inline-block;
+        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+      }
+
+      #loading .spinner .bounce1 {
+        -webkit-animation-delay: -0.32s;
+        animation-delay: -0.32s;
+      }
+
+      #loading .spinner .bounce2 {
+        -webkit-animation-delay: -0.16s;
+        animation-delay: -0.16s;
+      }
+
+      @-webkit-keyframes sk-bouncedelay {
+        0%,
+        80%,
+        100% {
+          -webkit-transform: scale(0);
         }
-      ],
-      "start_url": window.location.origin + window.FileBrowser.BaseURL,
-      "display": "standalone",
-      "background_color": "#ffffff",
-      "theme_color": window.FileBrowser.Color || "#455a64"
-    }
+        40% {
+          -webkit-transform: scale(1);
+        }
+      }
 
-    const stringManifest = JSON.stringify(dynamicManifest);
-    const blob = new Blob([stringManifest], {type: 'application/json'});
-    const manifestURL = URL.createObjectURL(blob);
-    document.querySelector('#manifestPlaceholder').setAttribute('href', manifestURL);
-  </script>
+      @keyframes sk-bouncedelay {
+        0%,
+        80%,
+        100% {
+          -webkit-transform: scale(0);
+          transform: scale(0);
+        }
+        40% {
+          -webkit-transform: scale(1);
+          transform: scale(1);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
 
-  <style>
-  #loading {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: #fff;
-    z-index: 9999;
-    transition: .1s ease opacity;
-    -webkit-transition: .1s ease opacity;
-  }
-
-  #loading.done {
-    opacity: 0;
-  }
-
-  #loading .spinner {
-    width: 70px;
-    text-align: center;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-            transform: translate(-50%, -50%);
-  }
-
-  #loading .spinner > div {
-    width: 18px;
-    height: 18px;
-    background-color: #333;
-    border-radius: 100%;
-    display: inline-block;
-    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-  }
-
-  #loading .spinner .bounce1 {
-    -webkit-animation-delay: -0.32s;
-    animation-delay: -0.32s;
-  }
-
-  #loading .spinner .bounce2 {
-    -webkit-animation-delay: -0.16s;
-    animation-delay: -0.16s;
-  }
-
-  @-webkit-keyframes sk-bouncedelay {
-    0%, 80%, 100% { -webkit-transform: scale(0) }
-    40% { -webkit-transform: scale(1.0) }
-  }
-
-  @keyframes sk-bouncedelay {
-    0%, 80%, 100% {
-      -webkit-transform: scale(0);
-      transform: scale(0);
-    } 40% {
-      -webkit-transform: scale(1.0);
-      transform: scale(1.0);
-    }
-  }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-
-  <div id="loading">
-    <div class="spinner">
-      <div class="bounce1"></div>
-      <div class="bounce2"></div>
-      <div class="bounce3"></div>
+    <div id="loading">
+      <div class="spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+      </div>
     </div>
-  </div>
 
-  [{[ if .Theme -]}]
-    <link rel="stylesheet" href="[{[ .StaticURL ]}]/themes/[{[ .Theme ]}].css" />
-  [{[ end ]}]
-  [{[ if .CSS -]}]
+    <script type="module" src="/src/main.js"></script>
+
+    [{[ if .Theme -]}]
+    <link
+      rel="stylesheet"
+      href="[{[ .StaticURL ]}]/themes/[{[ .Theme ]}].css"
+    />
+    [{[ end ]}] [{[ if .CSS -]}]
     <link rel="stylesheet" href="[{[ .StaticURL ]}]/custom.css" />
-  [{[ end ]}]
-</body>
+    [{[ end ]}]
+  </body>
 </html>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3bea6856..2bec8332 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -5,9 +5,6 @@
 </template>
 
 <script>
-// eslint-disable-next-line no-undef
-// __webpack_public_path__ = window.FileBrowser.StaticURL + "/";
-
 export default {
   name: "app",
   mounted() {
diff --git a/frontend/src/api/commands.js b/frontend/src/api/commands.js
index 790c22a7..ffa87dc7 100644
--- a/frontend/src/api/commands.js
+++ b/frontend/src/api/commands.js
@@ -1,13 +1,15 @@
 import { removePrefix } from "./utils";
 import { baseURL } from "@/utils/constants";
-import store from "@/store";
+import { useAuthStore } from "@/stores/auth";
 
 const ssl = window.location.protocol === "https:";
 const protocol = ssl ? "wss:" : "ws:";
 
 export default function command(url, command, onmessage, onclose) {
+  const authStore = useAuthStore();
+
   url = removePrefix(url);
-  url = `${protocol}//${window.location.host}${baseURL}/api/command${url}?auth=${store.state.jwt}`;
+  url = `${protocol}//${window.location.host}${baseURL}/api/command${url}?auth=${authStore.jwt}`;
 
   let conn = new window.WebSocket(url);
   conn.onopen = () => conn.send(command);
diff --git a/frontend/src/api/files.js b/frontend/src/api/files.js
index 1c2ea80a..65a61e6a 100644
--- a/frontend/src/api/files.js
+++ b/frontend/src/api/files.js
@@ -1,6 +1,6 @@
 import { createURL, fetchURL, removePrefix } from "./utils";
 import { baseURL } from "@/utils/constants";
-import store from "@/store";
+import { useAuthStore } from "@/stores/auth";
 import { upload as postTus, useTus } from "./tus";
 
 export async function fetch(url) {
@@ -71,8 +71,9 @@ export function download(format, ...files) {
     url += `algo=${format}&`;
   }
 
-  if (store.state.jwt) {
-    url += `auth=${store.state.jwt}&`;
+  const authStore = useAuthStore();
+  if (authStore.jwt) {
+    url += `auth=${authStore.jwt}&`;
   }
 
   window.open(url);
@@ -104,6 +105,7 @@ async function postResources(url, content = "", overwrite = false, onupload) {
     bufferContent = await new Response(content).arrayBuffer();
   }
 
+  const authStore = useAuthStore();
   return new Promise((resolve, reject) => {
     let request = new XMLHttpRequest();
     request.open(
@@ -111,7 +113,7 @@ async function postResources(url, content = "", overwrite = false, onupload) {
       `${baseURL}/api/resources${url}?override=${overwrite}`,
       true
     );
-    request.setRequestHeader("X-Auth", store.state.jwt);
+    request.setRequestHeader("X-Auth", authStore.jwt);
 
     if (typeof onupload === "function") {
       request.upload.onprogress = onupload;
diff --git a/frontend/src/api/tus.js b/frontend/src/api/tus.js
index bda4f40c..83cb607a 100644
--- a/frontend/src/api/tus.js
+++ b/frontend/src/api/tus.js
@@ -1,6 +1,6 @@
 import * as tus from "tus-js-client";
 import { baseURL, tusEndpoint, tusSettings } from "@/utils/constants";
-import store from "@/store";
+import { useAuthStore } from "@/stores/auth";
 import { removePrefix } from "@/api/utils";
 import { fetchURL } from "./utils";
 
@@ -23,6 +23,7 @@ export async function upload(
 
   await createUpload(resourcePath);
 
+  const authStore = useAuthStore();
   return new Promise((resolve, reject) => {
     let upload = new tus.Upload(content, {
       uploadUrl: `${baseURL}${resourcePath}`,
@@ -31,7 +32,7 @@ export async function upload(
       parallelUploads: 1,
       storeFingerprintForResuming: false,
       headers: {
-        "X-Auth": store.state.jwt,
+        "X-Auth": authStore.jwt,
       },
       onError: function (error) {
         reject("Upload failed: " + error);
diff --git a/frontend/src/api/utils.js b/frontend/src/api/utils.js
index 7883c4ce..26b62d4f 100644
--- a/frontend/src/api/utils.js
+++ b/frontend/src/api/utils.js
@@ -1,9 +1,11 @@
-import store from "@/store";
+import { useAuthStore } from "@/stores/auth";
 import { renew, logout } from "@/utils/auth";
 import { baseURL } from "@/utils/constants";
 import { encodePath } from "@/utils/url";
 
 export async function fetchURL(url, opts, auth = true) {
+  const authStore = useAuthStore();
+
   opts = opts || {};
   opts.headers = opts.headers || {};
 
@@ -12,7 +14,7 @@ export async function fetchURL(url, opts, auth = true) {
   try {
     res = await fetch(`${baseURL}${url}`, {
       headers: {
-        "X-Auth": store.state.jwt,
+        "X-Auth": authStore.jwt,
         ...headers,
       },
       ...rest,
@@ -25,7 +27,7 @@ export async function fetchURL(url, opts, auth = true) {
   }
 
   if (auth && res.headers.get("X-Renew-Token") === "true") {
-    await renew(store.state.jwt);
+    await renew(authStore.jwt);
   }
 
   if (res.status < 200 || res.status > 299) {
@@ -61,6 +63,8 @@ export function removePrefix(url) {
 }
 
 export function createURL(endpoint, params = {}, auth = true) {
+  const authStore = useAuthStore();
+
   let prefix = baseURL;
   if (!prefix.endsWith("/")) {
     prefix = prefix + "/";
@@ -68,7 +72,7 @@ export function createURL(endpoint, params = {}, auth = true) {
   const url = new URL(prefix + encodePath(endpoint), origin);
 
   const searchParams = {
-    ...(auth && { auth: store.state.jwt }),
+    ...(auth && { auth: authStore.jwt }),
     ...params,
   };
 
diff --git a/frontend/src/components/Search.vue b/frontend/src/components/Search.vue
index 6b498218..cc4cc33f 100644
--- a/frontend/src/components/Search.vue
+++ b/frontend/src/components/Search.vue
@@ -49,7 +49,7 @@
         </template>
         <ul v-show="results.length > 0">
           <li v-for="(s, k) in filteredResults" :key="k">
-            <router-link @click.native="close" :to="s.url">
+            <router-link v-on:click="close" :to="s.url">
               <i v-if="s.dir" class="material-icons">folder</i>
               <i v-else class="material-icons">insert_drive_file</i>
               <span>./{{ s.path }}</span>
@@ -65,7 +65,10 @@
 </template>
 
 <script>
-import { mapState, mapGetters, mapMutations } from "vuex";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
 import url from "@/utils/url";
 import { search } from "@/api";
 
@@ -95,7 +98,7 @@ export default {
 
       if (old === "search" && !this.active) {
         if (this.reload) {
-          this.setReload(true);
+          this.sReload = true;
         }
 
         document.body.style.overflow = "auto";
@@ -116,8 +119,9 @@ export default {
     },
   },
   computed: {
-    ...mapState(["user", "show"]),
-    ...mapGetters(["isListing"]),
+    ...mapState(useFileStore, ["isListing"]),
+    ...mapState(useLayoutStore, ["show"]),
+    ...mapWritableState(useFileStore, { sReload: "reload" }),
     boxes() {
       return boxes;
     },
@@ -148,7 +152,7 @@ export default {
     });
   },
   methods: {
-    ...mapMutations(["showHover", "closeHovers", "setReload"]),
+    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
     open() {
       this.showHover("search");
     },
@@ -199,3 +203,4 @@ export default {
   },
 };
 </script>
+@/stores/file@/stores/layout
diff --git a/frontend/src/components/Shell.vue b/frontend/src/components/Shell.vue
index dd5bf319..84b3c125 100644
--- a/frontend/src/components/Shell.vue
+++ b/frontend/src/components/Shell.vue
@@ -20,9 +20,9 @@
         tabindex="0"
         ref="input"
         class="shell__text"
-        contenteditable="true"
-        @keydown.prevent.38="historyUp"
-        @keydown.prevent.40="historyDown"
+        :contenteditable="true"
+        @keydown.prevent.arrow-up="historyUp"
+        @keydown.prevent.arrow-down="historyDown"
         @keypress.prevent.enter="submit"
       />
     </div>
@@ -30,14 +30,17 @@
 </template>
 
 <script>
-import { mapMutations, mapState, mapGetters } from "vuex";
+import { mapState, mapActions } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
 import { commands } from "@/api";
 
 export default {
   name: "shell",
   computed: {
-    ...mapState(["user", "showShell"]),
-    ...mapGetters(["isFiles", "isLogged"]),
+    ...mapState(useLayoutStore, ["showShell"]),
+    ...mapState(useFileStore, ["isFiles"]),
     path: function () {
       if (this.isFiles) {
         return this.$route.path;
@@ -53,7 +56,7 @@ export default {
     canInput: true,
   }),
   methods: {
-    ...mapMutations(["toggleShell"]),
+    ...mapActions(useLayoutStore, ["toggleShell"]),
     scroll: function () {
       this.$refs.scrollable.scrollTop = this.$refs.scrollable.scrollHeight;
     },
@@ -126,3 +129,4 @@ export default {
   },
 };
 </script>
+@/stores/file@/stores/layout
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index 4394f55a..8bb3b5bf 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <nav :class="{ active }">
-    <template v-if="isLogged">
+    <template v-if="isLoggedIn">
       <button
         class="action"
         @click="toRoot"
@@ -13,7 +13,7 @@
 
       <div v-if="user.perm.create">
         <button
-          @click="$store.commit('showHover', 'newDir')"
+          @click="showHover('newDir')"
           class="action"
           :aria-label="$t('sidebar.newFolder')"
           :title="$t('sidebar.newFolder')"
@@ -23,7 +23,7 @@
         </button>
 
         <button
-          @click="$store.commit('showHover', 'newFile')"
+          @click="showHover('newFile')"
           class="action"
           :aria-label="$t('sidebar.newFile')"
           :title="$t('sidebar.newFile')"
@@ -83,7 +83,7 @@
     <div
       class="credits"
       v-if="
-        $router.currentRoute.path.includes('/files/') && !disableUsedPercentage
+        $router.currentRoute.path?.includes('/files/') && !disableUsedPercentage
       "
       style="width: 90%; margin: 2em 2.5em 3em 2.5em"
     >
@@ -112,7 +112,10 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useAuthStore } from "@/stores/auth";
+import { useLayoutStore } from "@/stores/layout";
+
 import * as auth from "@/utils/auth";
 import {
   version,
@@ -132,10 +135,10 @@ export default {
     ProgressBar,
   },
   computed: {
-    ...mapState(["user"]),
-    ...mapGetters(["isLogged"]),
+    ...mapState(useAuthStore, ["user", "isLoggedIn"]),
+    ...mapState(useLayoutStore, ["show"]),
     active() {
-      return this.$store.state.show === "sidebar";
+      return this.show === "sidebar";
     },
     signup: () => signup,
     version: () => version,
@@ -172,18 +175,20 @@ export default {
     },
   },
   methods: {
+    ...mapActions(useLayoutStore, ["closeHovers", "showHover"]),
     toRoot() {
-      this.$router.push({ path: "/files/" }, () => {});
-      this.$store.commit("closeHovers");
+      this.$router.push({ path: "/files/" });
+      this.closeHovers();
     },
     toSettings() {
-      this.$router.push({ path: "/settings" }, () => {});
-      this.$store.commit("closeHovers");
+      this.$router.push({ path: "/settings" });
+      this.closeHovers();
     },
     help() {
-      this.$store.commit("showHover", "help");
+      this.showHover("help");
     },
     logout: auth.logout,
   },
 };
 </script>
+@/stores/auth@/stores/layout
diff --git a/frontend/src/components/files/ExtendedImage.vue b/frontend/src/components/files/ExtendedImage.vue
index bccc2156..dc3aebd6 100644
--- a/frontend/src/components/files/ExtendedImage.vue
+++ b/frontend/src/components/files/ExtendedImage.vue
@@ -10,12 +10,7 @@
     @mouseup="mouseUp"
     @wheel="wheelMove"
   >
-    <img
-      src=""
-      class="image-ex-img image-ex-img-center"
-      ref="imgex"
-      @load="onLoad"
-    />
+    <img class="image-ex-img image-ex-img-center" ref="imgex" @load="onLoad" />
   </div>
 </template>
 <script>
@@ -73,7 +68,7 @@ export default {
 
     window.addEventListener("resize", this.onResize);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("resize", this.onResize);
     document.removeEventListener("mouseup", this.onMouseUp);
   },
diff --git a/frontend/src/components/files/ListingItem.vue b/frontend/src/components/files/ListingItem.vue
index 677d30e9..11e4ab27 100644
--- a/frontend/src/components/files/ListingItem.vue
+++ b/frontend/src/components/files/ListingItem.vue
@@ -35,8 +35,12 @@
 </template>
 
 <script>
+import { mapState, mapActions, mapWritableState } from "pinia";
+import { useAuthStore } from "@/stores/auth";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
 import { enableThumbs } from "@/utils/constants";
-import { mapMutations, mapGetters, mapState } from "vuex";
 import { filesize } from "filesize";
 import moment from "moment";
 import { files as api } from "@/api";
@@ -44,6 +48,9 @@ import * as upload from "@/utils/upload";
 
 export default {
   name: "item",
+  compatConfig: {
+    ATTR_FALSE_VALUE: "suppress-warning",
+  },
   data: function () {
     return {
       touches: 0,
@@ -61,8 +68,9 @@ export default {
     "path",
   ],
   computed: {
-    ...mapState(["user", "selected", "req", "jwt"]),
-    ...mapGetters(["selectedCount"]),
+    ...mapState(useAuthStore, ["user", "jwt"]),
+    ...mapState(useFileStore, ["req", "selectedCount", "multiple"]),
+    ...mapWritableState(useFileStore, ["reload", "selected"]),
     singleClick() {
       return this.readOnly == undefined && this.user.singleClick;
     },
@@ -96,7 +104,8 @@ export default {
     },
   },
   methods: {
-    ...mapMutations(["addSelected", "removeSelected", "resetSelected"]),
+    ...mapActions(useFileStore, ["removeSelected"]),
+    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
     humanSize: function () {
       return this.type == "invalid_link" ? "invalid link" : filesize(this.size);
     },
@@ -108,13 +117,13 @@ export default {
     },
     dragStart: function () {
       if (this.selectedCount === 0) {
-        this.addSelected(this.index);
+        this.selected.push(this.index);
         return;
       }
 
       if (!this.isSelected) {
-        this.resetSelected();
-        this.addSelected(this.index);
+        this.selected = [];
+        this.selected.push(this.index);
       }
     },
     dragOver: function (event) {
@@ -162,7 +171,7 @@ export default {
         api
           .move(items, overwrite, rename)
           .then(() => {
-            this.$store.commit("setReload", true);
+            this.reload = true;
           })
           .catch(this.$showError);
       };
@@ -173,14 +182,14 @@ export default {
       let rename = false;
 
       if (conflict) {
-        this.$store.commit("showHover", {
+        this.showHover({
           prompt: "replace-rename",
           confirm: (event, option) => {
             overwrite = option == "overwrite";
             rename = option == "rename";
 
             event.preventDefault();
-            this.$store.commit("closeHovers");
+            this.closeHovers();
             action(overwrite, rename);
           },
         });
@@ -191,7 +200,7 @@ export default {
       action(overwrite, rename);
     },
     itemClick: function (event) {
-      if (this.singleClick && !this.$store.state.multiple) this.open();
+      if (this.singleClick && !this.multiple) this.open();
       else this.click(event);
     },
     click: function (event) {
@@ -206,7 +215,7 @@ export default {
         this.open();
       }
 
-      if (this.$store.state.selected.indexOf(this.index) !== -1) {
+      if (this.selected.indexOf(this.index) !== -1) {
         this.removeSelected(this.index);
         return;
       }
@@ -224,8 +233,8 @@ export default {
         }
 
         for (; fi <= la; fi++) {
-          if (this.$store.state.selected.indexOf(fi) == -1) {
-            this.addSelected(fi);
+          if (this.selected.indexOf(fi) == -1) {
+            this.selected.push(fi);
           }
         }
 
@@ -236,10 +245,11 @@ export default {
         !this.singleClick &&
         !event.ctrlKey &&
         !event.metaKey &&
-        !this.$store.state.multiple
-      )
-        this.resetSelected();
-      this.addSelected(this.index);
+        !this.multiple
+      ) {
+        this.selected = [];
+      }
+      this.selected.push(this.index);
     },
     open: function () {
       this.$router.push({ path: this.url });
@@ -247,3 +257,4 @@ export default {
   },
 };
 </script>
+@/stores/auth@/stores/file@/stores/layout
diff --git a/frontend/src/components/header/Action.vue b/frontend/src/components/header/Action.vue
index 516b56d3..b74f31f7 100644
--- a/frontend/src/components/header/Action.vue
+++ b/frontend/src/components/header/Action.vue
@@ -7,13 +7,17 @@
 </template>
 
 <script>
+import { mapActions } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
+
 export default {
   name: "action",
   props: ["icon", "label", "counter", "show"],
   methods: {
+    ...mapActions(useLayoutStore, ["showHover"]),
     action: function () {
       if (this.show) {
-        this.$store.commit("showHover", this.show);
+        this.showHover(this.show);
       }
 
       this.$emit("action");
@@ -23,3 +27,4 @@ export default {
 </script>
 
 <style></style>
+@/stores/layout
diff --git a/frontend/src/components/header/HeaderBar.vue b/frontend/src/components/header/HeaderBar.vue
index 65c144a9..55b3d115 100644
--- a/frontend/src/components/header/HeaderBar.vue
+++ b/frontend/src/components/header/HeaderBar.vue
@@ -6,12 +6,12 @@
       class="menu-button"
       icon="menu"
       :label="$t('buttons.toggleSidebar')"
-      @action="openSidebar()"
+      @action="showHover('sidebar')"
     />
 
     <slot />
 
-    <div id="dropdown" :class="{ active: this.$store.state.show === 'more' }">
+    <div id="dropdown" :class="{ active: this.show === 'more' }">
       <slot name="actions" />
     </div>
 
@@ -20,18 +20,17 @@
       id="more"
       icon="more_vert"
       :label="$t('buttons.more')"
-      @action="$store.commit('showHover', 'more')"
+      @action="showHover('more')"
     />
 
-    <div
-      class="overlay"
-      v-show="this.$store.state.show == 'more'"
-      @click="$store.commit('closeHovers')"
-    />
+    <div class="overlay" v-show="this.show == 'more'" @click="closeHovers" />
   </header>
 </template>
 
 <script>
+import { mapActions, mapState } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
+
 import { logoURL } from "@/utils/constants";
 
 import Action from "@/components/header/Action.vue";
@@ -47,12 +46,14 @@ export default {
       logoURL,
     };
   },
+  computed: {
+    ...mapState(useLayoutStore, ["show"]),
+  },
   methods: {
-    openSidebar() {
-      this.$store.commit("showHover", "sidebar");
-    },
+    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
   },
 };
 </script>
 
 <style></style>
+@/stores/layout
diff --git a/frontend/src/components/prompts/Copy.vue b/frontend/src/components/prompts/Copy.vue
index 4f556e5d..b668ace0 100644
--- a/frontend/src/components/prompts/Copy.vue
+++ b/frontend/src/components/prompts/Copy.vue
@@ -12,7 +12,7 @@
     <div class="card-action">
       <button
         class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')"
       >
@@ -31,11 +31,13 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import { useFileStore } from "@/stores/file";
 import FileList from "./FileList.vue";
 import { files as api } from "@/api";
 import buttons from "@/utils/buttons";
 import * as upload from "@/utils/upload";
+import { useLayoutStore } from "@/stores/layout";
 
 export default {
   name: "copy",
@@ -46,8 +48,12 @@ export default {
       dest: null,
     };
   },
-  computed: mapState(["req", "selected"]),
+  computed: {
+    ...mapState(useFileStore, ["req", "selected"]),
+    ...mapWritableState(useFileStore, ["reload"]),
+  },
   methods: {
+    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
     copy: async function (event) {
       event.preventDefault();
       let items = [];
@@ -70,7 +76,7 @@ export default {
             buttons.success("copy");
 
             if (this.$route.path === this.dest) {
-              this.$store.commit("setReload", true);
+              this.reload = true;
 
               return;
             }
@@ -84,7 +90,7 @@ export default {
       };
 
       if (this.$route.path === this.dest) {
-        this.$store.commit("closeHovers");
+        this.closeHovers();
         action(false, true);
 
         return;
@@ -97,14 +103,14 @@ export default {
       let rename = false;
 
       if (conflict) {
-        this.$store.commit("showHover", {
+        this.showHover({
           prompt: "replace-rename",
           confirm: (event, option) => {
             overwrite = option == "overwrite";
             rename = option == "rename";
 
             event.preventDefault();
-            this.$store.commit("closeHovers");
+            this.closeHovers();
             action(overwrite, rename);
           },
         });
@@ -117,3 +123,4 @@ export default {
   },
 };
 </script>
+@/stores/file@/stores/layout
diff --git a/frontend/src/components/prompts/Delete.vue b/frontend/src/components/prompts/Delete.vue
index 0540b1d8..f5967c76 100644
--- a/frontend/src/components/prompts/Delete.vue
+++ b/frontend/src/components/prompts/Delete.vue
@@ -10,7 +10,7 @@
     </div>
     <div class="card-action">
       <button
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         class="button button--flat button--grey"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')"
@@ -30,18 +30,26 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations, mapState } from "vuex";
+import { mapActions, mapState, mapWritableState } from "pinia";
 import { files as api } from "@/api";
 import buttons from "@/utils/buttons";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
 
 export default {
   name: "delete",
   computed: {
-    ...mapGetters(["isListing", "selectedCount"]),
-    ...mapState(["req", "selected", "showConfirm"]),
+    ...mapState(useFileStore, [
+      "isListing",
+      "selectedCount",
+      "req",
+      "selected",
+    ]),
+    ...mapWritableState(useFileStore, ["reload"]),
+    ...mapState(useLayoutStore, ["showConfirm"]),
   },
   methods: {
-    ...mapMutations(["closeHovers"]),
+    ...mapActions(useLayoutStore, ["closeHovers"]),
     submit: async function () {
       buttons.loading("delete");
 
@@ -68,13 +76,14 @@ export default {
 
         await Promise.all(promises);
         buttons.success("delete");
-        this.$store.commit("setReload", true);
+        this.reload = true;
       } catch (e) {
         buttons.done("delete");
         this.$showError(e);
-        if (this.isListing) this.$store.commit("setReload", true);
+        if (this.isListing) this.reload = true;
       }
     },
   },
 };
 </script>
+@/stores/file@/stores/layout
diff --git a/frontend/src/components/prompts/Download.vue b/frontend/src/components/prompts/Download.vue
index 8c5a570d..d374bebf 100644
--- a/frontend/src/components/prompts/Download.vue
+++ b/frontend/src/components/prompts/Download.vue
@@ -21,7 +21,8 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
 
 export default {
   name: "download",
@@ -38,6 +39,7 @@ export default {
       },
     };
   },
-  computed: mapState(["showConfirm"]),
+  computed: mapState(useLayoutStore, ["showConfirm"]),
 };
 </script>
+@/stores/layout
diff --git a/frontend/src/components/prompts/FileList.vue b/frontend/src/components/prompts/FileList.vue
index 7a5c9f56..8383def0 100644
--- a/frontend/src/components/prompts/FileList.vue
+++ b/frontend/src/components/prompts/FileList.vue
@@ -25,7 +25,10 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState } from "pinia";
+import { useAuthStore } from "@/stores/auth";
+import { useFileStore } from "@/stores/file";
+
 import url from "@/utils/url";
 import { files } from "@/api";
 
@@ -43,7 +46,8 @@ export default {
     };
   },
   computed: {
-    ...mapState(["req", "user"]),
+    ...mapState(useAuthStore, ["user"]),
+    ...mapState(useFileStore, ["req"]),
     nav() {
       return decodeURIComponent(this.current);
     },
@@ -136,3 +140,4 @@ export default {
   },
 };
 </script>
+@/stores/auth@/stores/file
diff --git a/frontend/src/components/prompts/Help.vue b/frontend/src/components/prompts/Help.vue
index a86767d0..5fa0e32e 100644
--- a/frontend/src/components/prompts/Help.vue
+++ b/frontend/src/components/prompts/Help.vue
@@ -21,7 +21,7 @@
     <div class="card-action">
       <button
         type="submit"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         class="button button--flat"
         :aria-label="$t('buttons.ok')"
         :title="$t('buttons.ok')"
@@ -33,5 +33,14 @@
 </template>
 
 <script>
-export default { name: "help" };
+import { mapActions } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
+
+export default {
+  name: "help",
+  methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+  },
+};
 </script>
+@/stores/layout
diff --git a/frontend/src/components/prompts/Info.vue b/frontend/src/components/prompts/Info.vue
index 1372a8c3..0fee9746 100644
--- a/frontend/src/components/prompts/Info.vue
+++ b/frontend/src/components/prompts/Info.vue
@@ -68,7 +68,7 @@
     <div class="card-action">
       <button
         type="submit"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         class="button button--flat"
         :aria-label="$t('buttons.ok')"
         :title="$t('buttons.ok')"
@@ -80,7 +80,9 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
 import { filesize } from "filesize";
 import moment from "moment";
 import { files as api } from "@/api";
@@ -88,8 +90,12 @@ import { files as api } from "@/api";
 export default {
   name: "info",
   computed: {
-    ...mapState(["req", "selected"]),
-    ...mapGetters(["selectedCount", "isListing"]),
+    ...mapState(useFileStore, [
+      "req",
+      "selected",
+      "selectedCount",
+      "isListing",
+    ]),
     humanSize: function () {
       if (this.selectedCount === 0 || !this.isListing) {
         return filesize(this.req.size);
@@ -128,6 +134,7 @@ export default {
     },
   },
   methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
     checksum: async function (event, algo) {
       event.preventDefault();
 
@@ -142,7 +149,7 @@ export default {
       try {
         const hash = await api.checksum(link, algo);
         // eslint-disable-next-line
-        event.target.innerHTML = hash
+        event.target.innerHTML = hash;
       } catch (e) {
         this.$showError(e);
       }
@@ -150,3 +157,4 @@ export default {
   },
 };
 </script>
+@/stores/file@/stores/layout
diff --git a/frontend/src/components/prompts/Move.vue b/frontend/src/components/prompts/Move.vue
index 1e0cf868..477b7a59 100644
--- a/frontend/src/components/prompts/Move.vue
+++ b/frontend/src/components/prompts/Move.vue
@@ -11,7 +11,7 @@
     <div class="card-action">
       <button
         class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')"
       >
@@ -31,11 +31,13 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useFileStore } from "@/stores/file";
 import FileList from "./FileList.vue";
 import { files as api } from "@/api";
 import buttons from "@/utils/buttons";
 import * as upload from "@/utils/upload";
+import { useLayoutStore } from "@/stores/layout";
 
 export default {
   name: "move",
@@ -46,8 +48,9 @@ export default {
       dest: null,
     };
   },
-  computed: mapState(["req", "selected"]),
+  computed: mapState(useFileStore, ["req", "selected"]),
   methods: {
+    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
     move: async function (event) {
       event.preventDefault();
       let items = [];
@@ -82,14 +85,14 @@ export default {
       let rename = false;
 
       if (conflict) {
-        this.$store.commit("showHover", {
+        this.showHover({
           prompt: "replace-rename",
           confirm: (event, option) => {
             overwrite = option == "overwrite";
             rename = option == "rename";
 
             event.preventDefault();
-            this.$store.commit("closeHovers");
+            this.closeHovers();
             action(overwrite, rename);
           },
         });
@@ -102,3 +105,4 @@ export default {
   },
 };
 </script>
+@/stores/file@/stores/layout
diff --git a/frontend/src/components/prompts/NewDir.vue b/frontend/src/components/prompts/NewDir.vue
index bdcae64a..7bbb5a7d 100644
--- a/frontend/src/components/prompts/NewDir.vue
+++ b/frontend/src/components/prompts/NewDir.vue
@@ -18,7 +18,7 @@
     <div class="card-action">
       <button
         class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')"
       >
@@ -37,7 +37,10 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
 import { files as api } from "@/api";
 import url from "@/utils/url";
 
@@ -49,9 +52,10 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["isFiles", "isListing"]),
+    ...mapState(useFileStore, ["isFiles", "isListing"]),
   },
   methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
     submit: async function (event) {
       event.preventDefault();
       if (this.new === "") return;
@@ -73,8 +77,9 @@ export default {
         this.$showError(e);
       }
 
-      this.$store.commit("closeHovers");
+      this.closeHovers();
     },
   },
 };
 </script>
+@/stores/file@/stores/layout
diff --git a/frontend/src/components/prompts/NewFile.vue b/frontend/src/components/prompts/NewFile.vue
index 8b6fc582..06049bff 100644
--- a/frontend/src/components/prompts/NewFile.vue
+++ b/frontend/src/components/prompts/NewFile.vue
@@ -18,7 +18,7 @@
     <div class="card-action">
       <button
         class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')"
       >
@@ -37,7 +37,10 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
 import { files as api } from "@/api";
 import url from "@/utils/url";
 
@@ -49,9 +52,10 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["isFiles", "isListing"]),
+    ...mapState(useFileStore, ["isFiles", "isListing"]),
   },
   methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
     submit: async function (event) {
       event.preventDefault();
       if (this.new === "") return;
@@ -73,8 +77,9 @@ export default {
         this.$showError(e);
       }
 
-      this.$store.commit("closeHovers");
+      this.closeHovers();
     },
   },
 };
 </script>
+@/stores/file@/stores/layout
diff --git a/frontend/src/components/prompts/Prompts.vue b/frontend/src/components/prompts/Prompts.vue
index 4a96f471..f9e94966 100644
--- a/frontend/src/components/prompts/Prompts.vue
+++ b/frontend/src/components/prompts/Prompts.vue
@@ -1,11 +1,14 @@
 <template>
   <div>
     <component ref="currentComponent" :is="currentComponent"></component>
-    <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
+    <div v-show="showOverlay" @click="closeHovers" class="overlay"></div>
   </div>
 </template>
 
 <script>
+import { mapActions, mapState } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
+
 import Help from "./Help.vue";
 import Info from "./Info.vue";
 import Delete from "./Delete.vue";
@@ -20,7 +23,6 @@ import ReplaceRename from "./ReplaceRename.vue";
 import Share from "./Share.vue";
 import Upload from "./Upload.vue";
 import ShareDelete from "./ShareDelete.vue";
-import { mapState } from "vuex";
 import buttons from "@/utils/buttons";
 
 export default {
@@ -45,8 +47,6 @@ export default {
     return {
       pluginData: {
         buttons,
-        store: this.$store,
-        router: this.$router,
       },
     };
   },
@@ -59,7 +59,7 @@ export default {
       // Esc!
       if (event.keyCode === 27) {
         event.stopImmediatePropagation();
-        this.$store.commit("closeHovers");
+        this.closeHovers();
       }
 
       // Enter
@@ -82,7 +82,7 @@ export default {
     });
   },
   computed: {
-    ...mapState(["show", "plugins"]),
+    ...mapState(useLayoutStore, ["show", "showConfirm"]),
     currentComponent: function () {
       const matched =
         [
@@ -111,9 +111,8 @@ export default {
     },
   },
   methods: {
-    resetPrompts() {
-      this.$store.commit("closeHovers");
-    },
+    ...mapActions(useLayoutStore, ["closeHovers"]),
   },
 };
 </script>
+@/stores/layout
diff --git a/frontend/src/components/prompts/Rename.vue b/frontend/src/components/prompts/Rename.vue
index b6fb38ed..334a6493 100644
--- a/frontend/src/components/prompts/Rename.vue
+++ b/frontend/src/components/prompts/Rename.vue
@@ -21,7 +21,7 @@
     <div class="card-action">
       <button
         class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')"
       >
@@ -41,7 +41,9 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
 import url from "@/utils/url";
 import { files as api } from "@/api";
 
@@ -56,12 +58,18 @@ export default {
     this.name = this.oldName();
   },
   computed: {
-    ...mapState(["req", "selected", "selectedCount"]),
-    ...mapGetters(["isListing"]),
+    ...mapState(useFileStore, [
+      "req",
+      "selected",
+      "selectedCount",
+      "isListing",
+    ]),
+    ...mapWritableState(useFileStore, ["reload"]),
   },
   methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
     cancel: function () {
-      this.$store.commit("closeHovers");
+      this.closeHovers();
     },
     oldName: function () {
       if (!this.isListing) {
@@ -95,13 +103,14 @@ export default {
           return;
         }
 
-        this.$store.commit("setReload", true);
+        this.reload = true;
       } catch (e) {
         this.$showError(e);
       }
 
-      this.$store.commit("closeHovers");
+      this.closeHovers();
     },
   },
 };
 </script>
+@/stores/file@/stores/layout
diff --git a/frontend/src/components/prompts/Replace.vue b/frontend/src/components/prompts/Replace.vue
index a525bbbc..d3e9391b 100644
--- a/frontend/src/components/prompts/Replace.vue
+++ b/frontend/src/components/prompts/Replace.vue
@@ -11,7 +11,7 @@
     <div class="card-action">
       <button
         class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')"
       >
@@ -38,10 +38,17 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
 
 export default {
   name: "replace",
-  computed: mapState(["showConfirm", "showAction"]),
+  computed: {
+    ...mapState(useLayoutStore, ["showConfirm", "showAction"]),
+  },
+  methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+  },
 };
 </script>
+@/stores/layout
diff --git a/frontend/src/components/prompts/ReplaceRename.vue b/frontend/src/components/prompts/ReplaceRename.vue
index e6331388..8913d9c2 100644
--- a/frontend/src/components/prompts/ReplaceRename.vue
+++ b/frontend/src/components/prompts/ReplaceRename.vue
@@ -11,7 +11,7 @@
     <div class="card-action">
       <button
         class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')"
       >
@@ -38,10 +38,17 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
 
 export default {
   name: "replace-rename",
-  computed: mapState(["showConfirm"]),
+  computed: {
+    ...mapState(useLayoutStore, ["showConfirm"]),
+  },
+  methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+  },
 };
 </script>
+@/stores/layout
diff --git a/frontend/src/components/prompts/Share.vue b/frontend/src/components/prompts/Share.vue
index c0c3c083..8ce28388 100644
--- a/frontend/src/components/prompts/Share.vue
+++ b/frontend/src/components/prompts/Share.vue
@@ -59,7 +59,7 @@
       <div class="card-action">
         <button
           class="button button--flat button--grey"
-          @click="$store.commit('closeHovers')"
+          @click="closeHovers"
           :aria-label="$t('buttons.close')"
           :title="$t('buttons.close')"
         >
@@ -126,10 +126,12 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useFileStore } from "@/stores/file";
 import { share as api, pub as pub_api } from "@/api";
 import moment from "moment";
 import Clipboard from "clipboard";
+import { useLayoutStore } from "@/stores/layout";
 
 export default {
   name: "share",
@@ -144,8 +146,12 @@ export default {
     };
   },
   computed: {
-    ...mapState(["req", "selected", "selectedCount"]),
-    ...mapGetters(["isListing"]),
+    ...mapState(useFileStore, [
+      "req",
+      "selected",
+      "selectedCount",
+      "isListing",
+    ]),
     url() {
       if (!this.isListing) {
         return this.$route.path;
@@ -178,10 +184,11 @@ export default {
       this.$showSuccess(this.$t("success.linkCopied"));
     });
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.clip.destroy();
   },
   methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
     submit: async function () {
       let isPermanent = !this.time || this.time == 0;
 
@@ -242,7 +249,7 @@ export default {
     },
     switchListing() {
       if (this.links.length == 0 && !this.listing) {
-        this.$store.commit("closeHovers");
+        this.closeHovers();
       }
 
       this.listing = !this.listing;
@@ -250,3 +257,4 @@ export default {
   },
 };
 </script>
+@/stores/file@/stores/layout
diff --git a/frontend/src/components/prompts/ShareDelete.vue b/frontend/src/components/prompts/ShareDelete.vue
index cdc242c6..ed158d3e 100644
--- a/frontend/src/components/prompts/ShareDelete.vue
+++ b/frontend/src/components/prompts/ShareDelete.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="card-action">
       <button
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         class="button button--flat button--grey"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')"
@@ -25,17 +25,20 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
 
 export default {
   name: "share-delete",
   computed: {
-    ...mapState(["showConfirm"]),
+    ...mapState(useLayoutStore, ["showConfirm"]),
   },
   methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
     submit: function () {
       this.showConfirm();
     },
   },
 };
 </script>
+@/stores/layout
diff --git a/frontend/src/components/prompts/UploadFiles.vue b/frontend/src/components/prompts/UploadFiles.vue
index 37ea3a36..49a9fb25 100644
--- a/frontend/src/components/prompts/UploadFiles.vue
+++ b/frontend/src/components/prompts/UploadFiles.vue
@@ -42,7 +42,8 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapState } from "pinia";
+import { useUploadStore } from "@/stores/upload";
 
 export default {
   name: "uploadFiles",
@@ -52,7 +53,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["filesInUpload", "filesInUploadCount"]),
+    ...mapState(useUploadStore, ["filesInUpload", "filesInUploadCount"]),
   },
   methods: {
     toggle: function () {
@@ -61,3 +62,4 @@ export default {
   },
 };
 </script>
+@/stores/upload
diff --git a/frontend/src/components/settings/UserForm.vue b/frontend/src/components/settings/UserForm.vue
index c9337504..dd250cf2 100644
--- a/frontend/src/components/settings/UserForm.vue
+++ b/frontend/src/components/settings/UserForm.vue
@@ -42,7 +42,7 @@
       <languages
         class="input input--block"
         id="locale"
-        :locale.sync="user.locale"
+        v-model:locale="user.locale"
       ></languages>
     </p>
 
@@ -55,13 +55,13 @@
       {{ $t("settings.lockPassword") }}
     </p>
 
-    <permissions :perm.sync="user.perm" />
-    <commands v-if="isExecEnabled" :commands.sync="user.commands" />
+    <permissions v-model:perm="user.perm" />
+    <commands v-if="isExecEnabled" v-model:commands="user.commands" />
 
     <div v-if="!isDefault">
       <h3>{{ $t("settings.rules") }}</h3>
       <p class="small">{{ $t("settings.rulesHelp") }}</p>
-      <rules :rules.sync="user.rules" />
+      <rules v-model:rules="user.rules" />
     </div>
   </div>
 </template>
diff --git a/frontend/src/i18n/index.js b/frontend/src/i18n/index.js
index 3232076e..ae86da28 100644
--- a/frontend/src/i18n/index.js
+++ b/frontend/src/i18n/index.js
@@ -103,7 +103,7 @@ const removeEmpty = (obj) =>
 
 export const rtlLanguages = ["he", "ar"];
 
-const i18n = createI18n({
+export const i18n = createI18n({
   locale: detectLocale(),
   fallbackLocale: "en",
   messages: {
diff --git a/frontend/src/main.js b/frontend/src/main.js
index fa7cf574..f570746b 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,51 +1,36 @@
 import "whatwg-fetch";
 import cssVars from "css-vars-ponyfill";
-import { createApp, configureCompat } from "vue";
-import store from "@/store";
+import { createApp } from "vue";
+import VueLazyload from "vue-lazyload";
+import createPinia from "@/stores";
 import router from "@/router";
 import i18n from "@/i18n";
-import { recaptcha, loginPage } from "@/utils/constants";
-import { login, validateLogin } from "@/utils/auth";
 import App from "@/App.vue";
 
 cssVars();
 
-configureCompat({
-  MODE: 2,
-});
+const pinia = createPinia(router);
 
 const app = createApp(App);
 
-app.use(store);
-app.use(router);
+app.use(VueLazyload);
 app.use(i18n);
+app.use(pinia);
+app.use(router);
 
-async function start() {
-  try {
-    if (loginPage) {
-      await validateLogin();
-    } else {
-      await login("", "", "");
-    }
-  } catch (e) {
-    console.log(e);
-  }
+app.mixin({
+  mounted() {
+    // expose vue instance to components
+    this.$el.__vue__ = this;
+  },
+});
 
-  if (recaptcha) {
-    await new Promise((resolve) => {
-      const check = () => {
-        if (typeof window.grecaptcha === "undefined") {
-          setTimeout(check, 100);
-        } else {
-          resolve();
-        }
-      };
+// provide v-focus for components
+app.directive("focus", {
+  mounted: (el) => {
+    // initiate focus for the element
+    el.focus();
+  },
+});
 
-      check();
-    });
-  }
-
-  router.isReady().then(() => app.mount("#app"));
-}
-
-start();
+router.isReady().then(() => app.mount("#app"));
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index ad71ec30..972d1a48 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -10,9 +10,11 @@ import GlobalSettings from "@/views/settings/Global.vue";
 import ProfileSettings from "@/views/settings/Profile.vue";
 import Shares from "@/views/settings/Shares.vue";
 import Errors from "@/views/Errors.vue";
-import store from "@/store";
+import { useAuthStore } from "@/stores/auth";
 import { baseURL, name } from "@/utils/constants";
-import i18n, { rtlLanguages } from "@/i18n";
+import { i18n, rtlLanguages } from "@/i18n";
+import { recaptcha, loginPage } from "@/utils/constants";
+import { login, validateLogin } from "@/utils/auth";
 
 const titles = {
   Login: "sidebar.login",
@@ -34,20 +36,13 @@ const routes = [
     path: "/login",
     name: "Login",
     component: Login,
-    beforeEnter: (to, from, next) => {
-      if (store.getters.isLogged) {
-        return next({ path: "/files" });
-      }
-
-      next();
-    },
   },
   {
     path: "/share",
     component: Layout,
     children: [
       {
-        path: ":pathMatch(.*)*",
+        path: ":path*",
         name: "Share",
         component: Share,
       },
@@ -56,20 +51,23 @@ const routes = [
   {
     path: "/files",
     component: Layout,
+    meta: {
+      requiresAuth: true,
+    },
     children: [
       {
-        path: ":pathMatch(.*)*",
+        path: ":path*",
         name: "Files",
         component: Files,
-        meta: {
-          requiresAuth: true,
-        },
       },
     ],
   },
   {
     path: "/settings",
     component: Layout,
+    meta: {
+      requiresAuth: true,
+    },
     children: [
       {
         path: "",
@@ -78,9 +76,6 @@ const routes = [
         redirect: {
           path: "/settings/profile",
         },
-        meta: {
-          requiresAuth: true,
-        },
         children: [
           {
             path: "profile",
@@ -159,21 +154,50 @@ const routes = [
   },
 ];
 
+async function start() {
+  try {
+    if (loginPage) {
+      await validateLogin();
+    } else {
+      await login("", "", "");
+    }
+  } catch (e) {
+    console.log(e);
+  }
+
+  if (recaptcha) {
+    await new Promise((resolve) => {
+      const check = () => {
+        if (typeof window.grecaptcha === "undefined") {
+          setTimeout(check, 100);
+        } else {
+          resolve();
+        }
+      };
+
+      check();
+    });
+  }
+}
+
 const router = createRouter({
   history: createWebHistory(baseURL),
   routes,
 });
 
-router.beforeEach((to, from, next) => {
-  // const title = i18n.t(titles[to.name]);
-  const title = titles[to.name];
+router.beforeResolve(async (to, from, next) => {
+  let title;
+  try {
+    title = i18n.global.t(titles[to.name]);
+  } catch (error) {
+    title = to.name;
+  }
+  // const title = titles[to.name];
   document.title = title + " - " + name;
 
-  console.log({ from, to });
-
   /*** RTL related settings per route ****/
   const rtlSet = document.querySelector("body").classList.contains("rtl");
-  const shouldSetRtl = rtlLanguages.includes(i18n.locale);
+  const shouldSetRtl = rtlLanguages.includes(i18n.global.locale);
   switch (true) {
     case shouldSetRtl && !rtlSet:
       document.querySelector("body").classList.add("rtl");
@@ -183,8 +207,19 @@ router.beforeEach((to, from, next) => {
       break;
   }
 
+  const authStore = useAuthStore();
+
+  if (from.name == null) {
+    await start();
+  }
+
+  if (to.path.endsWith("/login") && authStore.isLoggedIn) {
+    next({ path: "/files/" });
+    return;
+  }
+
   if (to.matched.some((record) => record.meta.requiresAuth)) {
-    if (!store.getters.isLogged) {
+    if (!authStore.isLoggedIn) {
       next({
         path: "/login",
         query: { redirect: to.fullPath },
@@ -194,7 +229,7 @@ router.beforeEach((to, from, next) => {
     }
 
     if (to.matched.some((record) => record.meta.requiresAdmin)) {
-      if (!store.state.user.perm.admin) {
+      if (!authStore.user.perm.admin) {
         next({ path: "/403" });
         return;
       }
@@ -204,4 +239,4 @@ router.beforeEach((to, from, next) => {
   next();
 });
 
-export default router;
+export { router, router as default };
diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js
deleted file mode 100644
index 6bee9bcd..00000000
--- a/frontend/src/store/getters.js
+++ /dev/null
@@ -1,48 +0,0 @@
-const getters = {
-  isLogged: (state) => state.user !== null,
-  isFiles: (state) => !state.loading && state.route.name === "Files",
-  isListing: (state, getters) => getters.isFiles && state.req.isDir,
-  selectedCount: (state) => state.selected.length,
-  progress: (state) => {
-    if (state.upload.progress.length == 0) {
-      return 0;
-    }
-
-    let totalSize = state.upload.sizes.reduce((a, b) => a + b, 0);
-
-    let sum = state.upload.progress.reduce((acc, val) => acc + val);
-    return Math.ceil((sum / totalSize) * 100);
-  },
-  filesInUploadCount: (state) => {
-    let total =
-      Object.keys(state.upload.uploads).length + state.upload.queue.length;
-    return total;
-  },
-  filesInUpload: (state) => {
-    let files = [];
-
-    for (let index in state.upload.uploads) {
-      let upload = state.upload.uploads[index];
-      let id = upload.id;
-      let type = upload.type;
-      let name = upload.file.name;
-      let size = state.upload.sizes[id];
-      let isDir = upload.file.isDir;
-      let progress = isDir
-        ? 100
-        : Math.ceil((state.upload.progress[id] / size) * 100);
-
-      files.push({
-        id,
-        name,
-        progress,
-        type,
-        isDir,
-      });
-    }
-
-    return files.sort((a, b) => a.progress - b.progress);
-  },
-};
-
-export default getters;
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
deleted file mode 100644
index 93c11a6a..00000000
--- a/frontend/src/store/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { createStore } from "vuex";
-import mutations from "./mutations";
-import getters from "./getters";
-import upload from "./modules/upload";
-import router from "@/router";
-
-const state = {
-  user: null,
-  req: {},
-  oldReq: {},
-  clipboard: {
-    key: "",
-    items: [],
-  },
-  jwt: "",
-  progress: 0,
-  loading: false,
-  reload: false,
-  selected: [],
-  multiple: false,
-  show: null,
-  showShell: false,
-  showConfirm: null,
-  showAction: null,
-  get route() {
-    return router.currentRoute.value;
-  },
-};
-
-const store = createStore({
-  strict: true,
-  state,
-  getters,
-  mutations,
-  modules: { upload },
-});
-
-export default store;
diff --git a/frontend/src/store/modules/upload.js b/frontend/src/store/modules/upload.js
deleted file mode 100644
index 4110cb33..00000000
--- a/frontend/src/store/modules/upload.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import Vue from "vue";
-import { files as api } from "@/api";
-import throttle from "lodash.throttle";
-import buttons from "@/utils/buttons";
-
-const UPLOADS_LIMIT = 5;
-
-const state = {
-  id: 0,
-  sizes: [],
-  progress: [],
-  queue: [],
-  uploads: {},
-};
-
-const mutations = {
-  setProgress(state, { id, loaded }) {
-    Vue.set(state.progress, id, loaded);
-  },
-  reset: (state) => {
-    state.id = 0;
-    state.sizes = [];
-    state.progress = [];
-  },
-  addJob: (state, item) => {
-    state.queue.push(item);
-    state.sizes[state.id] = item.file.size;
-    state.id++;
-  },
-  moveJob(state) {
-    const item = state.queue[0];
-    state.queue.shift();
-    Vue.set(state.uploads, item.id, item);
-  },
-  removeJob(state, id) {
-    Vue.delete(state.uploads, id);
-    delete state.uploads[id];
-  },
-};
-
-const beforeUnload = (event) => {
-  event.preventDefault();
-  event.returnValue = "";
-};
-
-const actions = {
-  upload: (context, item) => {
-    let uploadsCount = Object.keys(context.state.uploads).length;
-
-    let isQueueEmpty = context.state.queue.length == 0;
-    let isUploadsEmpty = uploadsCount == 0;
-
-    if (isQueueEmpty && isUploadsEmpty) {
-      window.addEventListener("beforeunload", beforeUnload);
-      buttons.loading("upload");
-    }
-
-    context.commit("addJob", item);
-    context.dispatch("processUploads");
-  },
-  finishUpload: (context, item) => {
-    context.commit("setProgress", { id: item.id, loaded: item.file.size });
-    context.commit("removeJob", item.id);
-    context.dispatch("processUploads");
-  },
-  processUploads: async (context) => {
-    let uploadsCount = Object.keys(context.state.uploads).length;
-
-    let isBellowLimit = uploadsCount < UPLOADS_LIMIT;
-    let isQueueEmpty = context.state.queue.length == 0;
-    let isUploadsEmpty = uploadsCount == 0;
-
-    let isFinished = isQueueEmpty && isUploadsEmpty;
-    let canProcess = isBellowLimit && !isQueueEmpty;
-
-    if (isFinished) {
-      window.removeEventListener("beforeunload", beforeUnload);
-      buttons.success("upload");
-      context.commit("reset");
-      context.commit("setReload", true, { root: true });
-    }
-
-    if (canProcess) {
-      const item = context.state.queue[0];
-      context.commit("moveJob");
-
-      if (item.file.isDir) {
-        await api.post(item.path).catch(Vue.prototype.$showError);
-      } else {
-        let onUpload = throttle(
-          (event) =>
-            context.commit("setProgress", {
-              id: item.id,
-              loaded: event.loaded,
-            }),
-          100,
-          { leading: true, trailing: false }
-        );
-
-        await api
-          .post(item.path, item.file, item.overwrite, onUpload)
-          .catch(Vue.prototype.$showError);
-      }
-
-      context.dispatch("finishUpload", item);
-    }
-  },
-};
-
-export default { state, mutations, actions, namespaced: true };
diff --git a/frontend/src/store/mutations.js b/frontend/src/store/mutations.js
deleted file mode 100644
index e3818c85..00000000
--- a/frontend/src/store/mutations.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as i18n from "@/i18n";
-import moment from "moment";
-
-const mutations = {
-  closeHovers: (state) => {
-    state.show = null;
-    state.showConfirm = null;
-    state.showAction = null;
-  },
-  toggleShell: (state) => {
-    state.showShell = !state.showShell;
-  },
-  showHover: (state, value) => {
-    if (typeof value !== "object") {
-      state.show = value;
-      return;
-    }
-
-    state.show = value.prompt;
-    state.showConfirm = value.confirm;
-    if (value.action !== undefined) {
-      state.showAction = value.action;
-    }
-  },
-  showError: (state) => {
-    state.show = "error";
-  },
-  showSuccess: (state) => {
-    state.show = "success";
-  },
-  setLoading: (state, value) => {
-    state.loading = value;
-  },
-  setReload: (state, value) => {
-    state.reload = value;
-  },
-  setUser: (state, value) => {
-    if (value === null) {
-      state.user = null;
-      return;
-    }
-
-    let locale = value.locale;
-
-    if (locale === "") {
-      locale = i18n.detectLocale();
-    }
-
-    moment.locale(locale);
-    i18n.default.locale = locale;
-    state.user = value;
-  },
-  setJWT: (state, value) => (state.jwt = value),
-  multiple: (state, value) => (state.multiple = value),
-  addSelected: (state, value) => state.selected.push(value),
-  removeSelected: (state, value) => {
-    let i = state.selected.indexOf(value);
-    if (i === -1) return;
-    state.selected.splice(i, 1);
-  },
-  resetSelected: (state) => {
-    state.selected = [];
-  },
-  updateUser: (state, value) => {
-    if (typeof value !== "object") return;
-
-    for (let field in value) {
-      if (field === "locale") {
-        moment.locale(value[field]);
-        i18n.default.locale = value[field];
-      }
-
-      state.user[field] = value[field];
-    }
-  },
-  updateRequest: (state, value) => {
-    state.oldReq = state.req;
-    state.req = value;
-  },
-  updateClipboard: (state, value) => {
-    state.clipboard.key = value.key;
-    state.clipboard.items = value.items;
-    state.clipboard.path = value.path;
-  },
-  resetClipboard: (state) => {
-    state.clipboard.key = "";
-    state.clipboard.items = [];
-  },
-};
-
-export default mutations;
diff --git a/frontend/src/stores/auth.js b/frontend/src/stores/auth.js
new file mode 100644
index 00000000..a2d8b9c8
--- /dev/null
+++ b/frontend/src/stores/auth.js
@@ -0,0 +1,45 @@
+import { defineStore } from "pinia";
+// import { useAuthPreferencesStore } from "./auth-preferences";
+// import { useAuthEmailStore } from "./auth-email";
+
+export const useAuthStore = defineStore("auth", {
+  // convert to a function
+  state: () => ({
+    user: null,
+    jwt: "",
+  }),
+  getters: {
+    // user and jwt getter removed, no longer needed
+    isLoggedIn: (state) => state.user !== null,
+  },
+  actions: {
+    // no context as first argument, use `this` instead
+    setUser(value) {
+      if (value === null) {
+        this.user = null;
+        return;
+      }
+
+      // const locale = value.locale || i18n.detectLocale();
+      // moment.locale(locale);
+      // i18n.default.locale = locale;
+      this.user = value;
+    },
+    updateUser(value) {
+      if (typeof value !== "object") return;
+
+      for (let field in value) {
+        // if (field === "locale") {
+        //   moment.locale(value[field]);
+        //   i18n.default.locale = value[field];
+        // }
+
+        this.user[field] = structuredClone(value[field]);
+      }
+    },
+    // easily reset state using `$reset`
+    clearUser() {
+      this.$reset();
+    },
+  },
+});
diff --git a/frontend/src/stores/clipboard.js b/frontend/src/stores/clipboard.js
new file mode 100644
index 00000000..4b016d9b
--- /dev/null
+++ b/frontend/src/stores/clipboard.js
@@ -0,0 +1,25 @@
+import { defineStore } from "pinia";
+
+export const useClipboardStore = defineStore("clipboard", {
+  // convert to a function
+  state: () => ({
+    key: "",
+    items: [],
+    path: undefined,
+  }),
+  getters: {
+    // user and jwt getter removed, no longer needed
+  },
+  actions: {
+    // no context as first argument, use `this` instead
+    updateClipboard(value) {
+      this.key = value.key;
+      this.items = value.items;
+      this.path = value.path;
+    },
+    // easily reset state using `$reset`
+    resetClipboard() {
+      this.$reset();
+    },
+  },
+});
diff --git a/frontend/src/stores/file.js b/frontend/src/stores/file.js
new file mode 100644
index 00000000..74826889
--- /dev/null
+++ b/frontend/src/stores/file.js
@@ -0,0 +1,48 @@
+import { defineStore } from "pinia";
+import { useRouterStore } from "./router";
+// import { useAuthPreferencesStore } from "./auth-preferences";
+// import { useAuthEmailStore } from "./auth-email";
+
+export const useFileStore = defineStore("file", {
+  // convert to a function
+  state: () => ({
+    req: {},
+    oldReq: {},
+    reload: false,
+    selected: [],
+    multiple: false,
+  }),
+  getters: {
+    // user and jwt getter removed, no longer needed
+    selectedCount: (state) => state.selected.length,
+    route: () => {
+      const routerStore = useRouterStore();
+      return routerStore.router.currentRoute;
+    },
+    isFiles(state) {
+      return !state.loading && this.route.name === "Files";
+    },
+    isListing(state) {
+      return this.isFiles && state.req.isDir;
+    },
+  },
+  actions: {
+    // no context as first argument, use `this` instead
+    toggleMultiple() {
+      this.multiple = !this.multiple;
+    },
+    updateRequest(value) {
+      this.oldReq = this.req;
+      this.req = value;
+    },
+    removeSelected(value) {
+      let i = this.selected.indexOf(value);
+      if (i === -1) return;
+      this.selected.splice(i, 1);
+    },
+    // easily reset state using `$reset`
+    clearFile() {
+      this.$reset();
+    },
+  },
+});
diff --git a/frontend/src/stores/index.js b/frontend/src/stores/index.js
new file mode 100644
index 00000000..3ab005bc
--- /dev/null
+++ b/frontend/src/stores/index.js
@@ -0,0 +1,11 @@
+import { createPinia as _createPinia } from "pinia";
+import { markRaw } from "vue";
+
+export default function createPinia(router) {
+  const pinia = _createPinia();
+  pinia.use(({ store }) => {
+    store.router = markRaw(router);
+  });
+
+  return pinia;
+}
diff --git a/frontend/src/stores/layout.js b/frontend/src/stores/layout.js
new file mode 100644
index 00000000..267a27e9
--- /dev/null
+++ b/frontend/src/stores/layout.js
@@ -0,0 +1,50 @@
+import { defineStore } from "pinia";
+// import { useAuthPreferencesStore } from "./auth-preferences";
+// import { useAuthEmailStore } from "./auth-email";
+
+export const useLayoutStore = defineStore("layout", {
+  // convert to a function
+  state: () => ({
+    loading: false,
+    show: null,
+    showConfirm: null,
+    showAction: null,
+    showShell: false,
+  }),
+  getters: {
+    // user and jwt getter removed, no longer needed
+  },
+  actions: {
+    // no context as first argument, use `this` instead
+    toggleShell() {
+      this.showShell = !this.showShell;
+    },
+    showHover(value) {
+      if (typeof value !== "object") {
+        this.show = value;
+        return;
+      }
+
+      this.show = value.prompt;
+      this.showConfirm = value.confirm;
+      if (value.action !== undefined) {
+        this.showAction = value.action;
+      }
+    },
+    showError() {
+      this.show = "error";
+    },
+    showSuccess() {
+      this.show = "success";
+    },
+    closeHovers() {
+      this.show = null;
+      this.showConfirm = null;
+      this.showAction = null;
+    },
+    // easily reset state using `$reset`
+    clearLayout() {
+      this.$reset();
+    },
+  },
+});
diff --git a/frontend/src/stores/router.js b/frontend/src/stores/router.js
new file mode 100644
index 00000000..e12f3de3
--- /dev/null
+++ b/frontend/src/stores/router.js
@@ -0,0 +1,6 @@
+import { defineStore } from "pinia";
+
+export const useRouterStore = defineStore("routerStore", () => {
+  // can be an empty definition
+  return {};
+});
diff --git a/frontend/src/stores/upload.js b/frontend/src/stores/upload.js
new file mode 100644
index 00000000..e37cd3cb
--- /dev/null
+++ b/frontend/src/stores/upload.js
@@ -0,0 +1,157 @@
+import Vue from "vue";
+import { defineStore } from "pinia";
+import { useFileStore } from "./file";
+import { files as api } from "@/api";
+import throttle from "lodash.throttle";
+import buttons from "@/utils/buttons";
+
+const UPLOADS_LIMIT = 5;
+
+const beforeUnload = (event) => {
+  event.preventDefault();
+  event.returnValue = "";
+};
+
+export const useUploadStore = defineStore("upload", {
+  // convert to a function
+  state: () => ({
+    id: 0,
+    sizes: [],
+    progress: [],
+    queue: [],
+    uploads: {},
+  }),
+  getters: {
+    // user and jwt getter removed, no longer needed
+    getProgress: (state) => {
+      if (state.progress.length == 0) {
+        return 0;
+      }
+
+      const totalSize = state.sizes.reduce((a, b) => a + b, 0);
+
+      const sum = state.progress.reduce((acc, val) => acc + val);
+      return Math.ceil((sum / totalSize) * 100);
+    },
+    filesInUploadCount: (state) => {
+      const total = Object.keys(state.uploads).length + state.queue.length;
+      return total;
+    },
+    filesInUpload: (state) => {
+      const files = [];
+
+      for (let index in state.uploads) {
+        const upload = state.uploads[index];
+        const id = upload.id;
+        const type = upload.type;
+        const name = upload.file.name;
+        const size = state.sizes[id];
+        const isDir = upload.file.isDir;
+        const progress = isDir
+          ? 100
+          : Math.ceil((state.progress[id] / size) * 100);
+
+        files.push({
+          id,
+          name,
+          progress,
+          type,
+          isDir,
+        });
+      }
+
+      return files.sort((a, b) => a.progress - b.progress);
+    },
+  },
+  actions: {
+    // no context as first argument, use `this` instead
+    setProgress({ id, loaded }) {
+      Vue.set(this.progress, id, loaded);
+    },
+    reset() {
+      this.id = 0;
+      this.sizes = [];
+      this.progress = [];
+    },
+    addJob(item) {
+      this.queue.push(item);
+      this.sizes[this.id] = item.file.size;
+      this.id++;
+    },
+    moveJob() {
+      const item = this.queue[0];
+      this.queue.shift();
+      Vue.set(this.uploads, item.id, item);
+    },
+    removeJob(id) {
+      Vue.delete(this.uploads, id);
+      delete this.uploads[id];
+    },
+    upload(item) {
+      let uploadsCount = Object.keys(this.uploads).length;
+
+      let isQueueEmpty = this.queue.length == 0;
+      let isUploadsEmpty = uploadsCount == 0;
+
+      if (isQueueEmpty && isUploadsEmpty) {
+        window.addEventListener("beforeunload", beforeUnload);
+        buttons.loading("upload");
+      }
+
+      this.addJob(item);
+      this.processUploads();
+    },
+    finishUpload(item) {
+      this.setProgress({ id: item.id, loaded: item.file.size });
+      this.removeJob(item.id);
+      this.processUploads();
+    },
+    async processUploads() {
+      const uploadsCount = Object.keys(this.uploads).length;
+
+      const isBellowLimit = uploadsCount < UPLOADS_LIMIT;
+      const isQueueEmpty = this.queue.length == 0;
+      const isUploadsEmpty = uploadsCount == 0;
+
+      const isFinished = isQueueEmpty && isUploadsEmpty;
+      const canProcess = isBellowLimit && !isQueueEmpty;
+
+      if (isFinished) {
+        const fileStore = useFileStore();
+        window.removeEventListener("beforeunload", beforeUnload);
+        buttons.success("upload");
+        this.reset();
+        fileStore.reload = true;
+      }
+
+      if (canProcess) {
+        const item = this.queue[0];
+        this.moveJob();
+
+        if (item.file.isDir) {
+          await api.post(item.path).catch(Vue.prototype.$showError);
+        } else {
+          let onUpload = throttle(
+            (event) =>
+              this.setProgress({
+                id: item.id,
+                loaded: event.loaded,
+              }),
+            100,
+            { leading: true, trailing: false }
+          );
+
+          await api
+            .post(item.path, item.file, item.overwrite, onUpload)
+            .catch(Vue.prototype.$showError);
+        }
+
+        this.finishUpload(item);
+      }
+    },
+    // easily reset state using `$reset`
+    clearUpload() {
+      this.$reset();
+    },
+  },
+});
diff --git a/frontend/src/utils/auth.js b/frontend/src/utils/auth.js
index 31cb57c4..a7302cb2 100644
--- a/frontend/src/utils/auth.js
+++ b/frontend/src/utils/auth.js
@@ -1,22 +1,20 @@
-import store from "@/store";
+import { useAuthStore } from "@/stores/auth";
 import router from "@/router";
-import { Base64 } from "js-base64";
+import jwt_decode from "jwt-decode";
 import { baseURL } from "@/utils/constants";
 
 export function parseToken(token) {
-  const parts = token.split(".");
+  // falsy or malformed jwt will throw InvalidTokenError
+  const data = jwt_decode(token);
+  console.log(data);
 
-  if (parts.length !== 3) {
-    throw new Error("token malformed");
-  }
-
-  const data = JSON.parse(Base64.decode(parts[1]));
-
-  document.cookie = `auth=${token}; path=/`;
+  document.cookie = `auth=${token}; Path=/; SameSite=Strict;`;
 
   localStorage.setItem("jwt", token);
-  store.commit("setJWT", token);
-  store.commit("setUser", data.user);
+
+  const authStore = useAuthStore();
+  authStore.jwt = token;
+  authStore.setUser(data.user);
 }
 
 export async function validateLogin() {
@@ -25,7 +23,7 @@ export async function validateLogin() {
       await renew(localStorage.getItem("jwt"));
     }
   } catch (_) {
-    console.warn('Invalid JWT token in storage') // eslint-disable-line
+    console.warn("Invalid JWT token in storage"); // eslint-disable-line
   }
 }
 
@@ -83,10 +81,11 @@ export async function signup(username, password) {
 }
 
 export function logout() {
-  document.cookie = "auth=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/";
+  document.cookie = "auth=; Max-Age=0; Path=/; SameSite=Strict;";
+
+  const authStore = useAuthStore();
+  authStore.clearUser();
 
-  store.commit("setJWT", "");
-  store.commit("setUser", null);
   localStorage.setItem("jwt", null);
   router.push({ path: "/login" });
 }
diff --git a/frontend/src/utils/upload.js b/frontend/src/utils/upload.js
index 2184072f..88a08b7b 100644
--- a/frontend/src/utils/upload.js
+++ b/frontend/src/utils/upload.js
@@ -1,4 +1,4 @@
-import store from "@/store";
+import { useUploadStore } from "@/stores/upload";
 import url from "@/utils/url";
 
 export function checkConflict(files, items) {
@@ -110,8 +110,10 @@ function detectType(mimetype) {
 }
 
 export function handleFiles(files, base, overwrite = false) {
+  const uploadStore = useUploadStore();
+
   for (let i = 0; i < files.length; i++) {
-    let id = store.state.upload.id;
+    let id = uploadStore.id;
     let path = base;
     let file = files[i];
 
@@ -133,6 +135,6 @@ export function handleFiles(files, base, overwrite = false) {
       ...(!file.isDir && { type: detectType(file.type) }),
     };
 
-    store.dispatch("upload/upload", item);
+    uploadStore.upload(item);
   }
 }
diff --git a/frontend/src/utils/url.js b/frontend/src/utils/url.js
index 33d124a2..bf30a17c 100644
--- a/frontend/src/utils/url.js
+++ b/frontend/src/utils/url.js
@@ -7,18 +7,24 @@ export function removeLastDir(url) {
   return arr.join("/");
 }
 
-// this code borrow from mozilla
+// this function is taken from mozilla
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent#Examples
 export function encodeRFC5987ValueChars(str) {
   return (
     encodeURIComponent(str)
-      // Note that although RFC3986 reserves "!", RFC5987 does not,
-      // so we do not need to escape it
-      .replace(/['()]/g, escape) // i.e., %27 %28 %29
-      .replace(/\*/g, "%2A")
+      // The following creates the sequences %27 %28 %29 %2A (Note that
+      // the valid encoding of "*" is %2A, which necessitates calling
+      // toUpperCase() to properly encode). Although RFC3986 reserves "!",
+      // RFC5987 does not, so we do not need to escape it.
+      .replace(
+        /['()*]/g,
+        (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`
+      )
       // The following are not required for percent-encoding per RFC5987,
       // so we can allow for a little better readability over the wire: |`^
-      .replace(/%(?:7C|60|5E)/g, unescape)
+      .replace(/%(7C|60|5E)/g, (str, hex) =>
+        String.fromCharCode(parseInt(hex, 16))
+      )
   );
 }
 
diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue
index 5bac7b6e..189bb6b0 100644
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@@ -21,7 +21,9 @@
 
 <script>
 import { files as api } from "@/api";
-import { mapState, mapMutations } from "vuex";
+import { mapState, mapActions, mapWritableState } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
 
 import HeaderBar from "@/components/header/HeaderBar.vue";
 import Breadcrumbs from "@/components/Breadcrumbs.vue";
@@ -50,7 +52,14 @@ export default {
     };
   },
   computed: {
-    ...mapState(["req", "reload", "loading", "show"]),
+    ...mapWritableState(useFileStore, [
+      "req",
+      "reload",
+      "selected",
+      "multiple",
+    ]),
+    ...mapState(useLayoutStore, ["show", "showShell"]),
+    ...mapWritableState(useLayoutStore, ["loading"]),
     currentView() {
       if (this.req.type == undefined) {
         return null;
@@ -82,26 +91,27 @@ export default {
   mounted() {
     window.addEventListener("keydown", this.keyEvent);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("keydown", this.keyEvent);
   },
-  destroyed() {
-    if (this.$store.state.showShell) {
-      this.$store.commit("toggleShell");
+  unmounted() {
+    if (this.showShell) {
+      this.toggleShell();
     }
-    this.$store.commit("updateRequest", {});
+    this.updateRequest({});
   },
   methods: {
-    ...mapMutations(["setLoading"]),
+    ...mapActions(useLayoutStore, ["toggleShell", "showHover", "closeHovers"]),
+    ...mapActions(useFileStore, ["updateRequest"]),
     async fetchData() {
       // Reset view information.
-      this.$store.commit("setReload", false);
-      this.$store.commit("resetSelected");
-      this.$store.commit("multiple", false);
-      this.$store.commit("closeHovers");
+      this.reload = false;
+      this.selected = [];
+      this.multiple = false;
+      this.closeHovers();
 
       // Set loading to true and reset the error.
-      this.setLoading(true);
+      this.loading = true;
       this.error = null;
 
       let url = this.$route.path;
@@ -111,25 +121,29 @@ export default {
       try {
         const res = await api.fetch(url);
 
-        if (clean(res.path) !== clean(`/${this.$route.params.pathMatch}`)) {
-          return;
+        if (
+          clean(res.path) !==
+          clean(`/${this.$route.params.path}`).replace(/,/g, "/")
+        ) {
+          throw new Error("Data Mismatch!");
         }
 
-        this.$store.commit("updateRequest", res);
+        this.updateRequest(res);
         document.title = `${res.name} - ${document.title}`;
       } catch (e) {
         this.error = e;
       } finally {
-        this.setLoading(false);
+        this.loading = false;
       }
     },
     keyEvent(event) {
       // F1!
       if (event.keyCode === 112) {
         event.preventDefault();
-        this.$store.commit("showHover", "help");
+        this.showHover("help");
       }
     },
   },
 };
 </script>
+@/stores/file@/stores/layout
diff --git a/frontend/src/views/Layout.vue b/frontend/src/views/Layout.vue
index 0642fed6..76e40d7a 100644
--- a/frontend/src/views/Layout.vue
+++ b/frontend/src/views/Layout.vue
@@ -6,7 +6,7 @@
     <sidebar></sidebar>
     <main>
       <router-view></router-view>
-      <shell v-if="isExecEnabled && isLogged && user.perm.execute" />
+      <shell v-if="isExecEnabled && isLoggedIn && user.perm.execute" />
     </main>
     <prompts></prompts>
     <upload-files></upload-files>
@@ -14,11 +14,14 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import { useAuthStore } from "@/stores/auth";
+import { useLayoutStore } from "@/stores/layout";
+import { useFileStore } from "@/stores/file";
 import Sidebar from "@/components/Sidebar.vue";
 import Prompts from "@/components/prompts/Prompts.vue";
 import Shell from "@/components/Shell.vue";
-import UploadFiles from "../components/prompts/UploadFiles.vue";
+import UploadFiles from "@/components/prompts/UploadFiles.vue";
 import { enableExec } from "@/utils/constants";
 
 export default {
@@ -30,17 +33,23 @@ export default {
     UploadFiles,
   },
   computed: {
-    ...mapGetters(["isLogged", "progress"]),
-    ...mapState(["user"]),
+    ...mapState(useAuthStore, ["isLoggedIn", "user"]),
+    ...mapState(useLayoutStore, ["progress", "show"]),
+    ...mapWritableState(useFileStore, ["selected", "multiple"]),
     isExecEnabled: () => enableExec,
   },
+  methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+  },
   watch: {
     $route: function () {
-      this.$store.commit("resetSelected");
-      this.$store.commit("multiple", false);
-      if (this.$store.state.show !== "success")
-        this.$store.commit("closeHovers");
+      this.selected = [];
+      this.multiple = false;
+      if (this.show !== "success") {
+        this.closeHovers();
+      }
     },
   },
 };
 </script>
+@/stores/auth@/stores/layout@/stores/file
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index 51e5d1cb..9b372cbb 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -117,6 +117,7 @@ export default {
         await auth.login(this.username, this.password, captcha);
         this.$router.push({ path: redirect });
       } catch (e) {
+        console.error(e);
         if (e.message == 409) {
           this.error = this.$t("login.usernameTaken");
         } else {
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
index 15c62fab..37b6aa51 100644
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -50,9 +50,10 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
-
+import { mapState } from "pinia";
+import { useAuthStore } from "@/stores/auth";
 import HeaderBar from "@/components/header/HeaderBar.vue";
+import { useLayoutStore } from "@/stores/layout";
 
 export default {
   name: "settings",
@@ -60,7 +61,9 @@ export default {
     HeaderBar,
   },
   computed: {
-    ...mapState(["user", "loading"]),
+    ...mapState(useAuthStore, ["user"]),
+    ...mapState(useLayoutStore, ["loading"]),
   },
 };
 </script>
+@/stores/auth@/stores/file
diff --git a/frontend/src/views/Share.vue b/frontend/src/views/Share.vue
index 096c4a5c..d3ab0d34 100644
--- a/frontend/src/views/Share.vue
+++ b/frontend/src/views/Share.vue
@@ -147,13 +147,10 @@
               </div>
             </div>
 
-            <div
-              :class="{ active: $store.state.multiple }"
-              id="multiple-selection"
-            >
+            <div :class="{ active: multiple }" id="multiple-selection">
               <p>{{ $t("files.multipleSelectionEnabled") }}</p>
               <div
-                @click="$store.commit('multiple', false)"
+                @click="() => (multiple = false)"
                 tabindex="0"
                 role="button"
                 :title="$t('files.clear')"
@@ -180,10 +177,11 @@
 </template>
 
 <script>
-import { mapState, mapMutations, mapGetters } from "vuex";
+import { mapState, mapActions, mapWritableState } from "pinia";
 import { pub as api } from "@/api";
 import { filesize } from "filesize";
 import moment from "moment";
+import { Base64 } from "js-base64";
 
 import HeaderBar from "@/components/header/HeaderBar.vue";
 import Action from "@/components/header/Action.vue";
@@ -192,6 +190,8 @@ import Errors from "@/views/Errors.vue";
 import QrcodeVue from "qrcode.vue";
 import Item from "@/components/files/ListingItem.vue";
 import Clipboard from "clipboard";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
 
 export default {
   name: "share",
@@ -231,13 +231,14 @@ export default {
       this.$showSuccess(this.$t("success.linkCopied"));
     });
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("keydown", this.keyEvent);
     this.clip.destroy();
   },
   computed: {
-    ...mapState(["req", "loading", "multiple", "selected"]),
-    ...mapGetters(["selectedCount"]),
+    ...mapState(useFileStore, ["req", "selectedCount"]),
+    ...mapWritableState(useFileStore, ["reload", "multiple", "selected"]),
+    ...mapWritableState(useLayoutStore, ["loading"]),
     icon: function () {
       if (this.req.isDir) return "folder";
       if (this.req.type === "image") return "insert_photo";
@@ -266,19 +267,20 @@ export default {
     },
   },
   methods: {
-    ...mapMutations(["resetSelected", "updateRequest", "setLoading"]),
+    ...mapActions(useFileStore, ["updateRequest", "toggleMultiple"]),
+    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
     base64: function (name) {
-      return window.btoa(unescape(encodeURIComponent(name)));
+      return Base64.encodeURI(name);
     },
     fetchData: async function () {
       // Reset view information.
-      this.$store.commit("setReload", false);
-      this.$store.commit("resetSelected");
-      this.$store.commit("multiple", false);
-      this.$store.commit("closeHovers");
+      this.reload = false;
+      this.selected = [];
+      this.multiple = false;
+      this.closeHovers();
 
       // Set loading to true and reset the error.
-      this.setLoading(true);
+      this.loading = true;
       this.error = null;
 
       if (this.password !== "") {
@@ -300,7 +302,7 @@ export default {
       } catch (e) {
         this.error = e;
       } finally {
-        this.setLoading(false);
+        this.loading = false;
       }
     },
     keyEvent(event) {
@@ -309,12 +311,12 @@ export default {
         // If we're on a listing, unselect all
         // files and folders.
         if (this.selectedCount > 0) {
-          this.resetSelected();
+          this.selected = [];
         }
       }
     },
     toggleMultipleSelection() {
-      this.$store.commit("multiple", !this.multiple);
+      this.toggleMultiple();
     },
     isSingleFile: function () {
       return (
@@ -332,10 +334,10 @@ export default {
         return;
       }
 
-      this.$store.commit("showHover", {
+      this.showHover({
         prompt: "download",
         confirm: (format) => {
-          this.$store.commit("closeHovers");
+          this.closeHovers();
 
           let files = [];
 
@@ -358,3 +360,4 @@ export default {
   },
 };
 </script>
+@/stores/file@/stores/layout
diff --git a/frontend/src/views/files/Editor.vue b/frontend/src/views/files/Editor.vue
index e4ed49ae..80d0bb79 100644
--- a/frontend/src/views/files/Editor.vue
+++ b/frontend/src/views/files/Editor.vue
@@ -20,18 +20,21 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapActions, mapState } from "pinia";
 import { files as api } from "@/api";
 import { theme } from "@/utils/constants";
 import buttons from "@/utils/buttons";
 import url from "@/utils/url";
 
+import { version as ace_version } from "ace-builds";
 import ace from "ace-builds/src-min-noconflict/ace.js";
 import modelist from "ace-builds/src-min-noconflict/ext-modelist.js";
 
 import HeaderBar from "@/components/header/HeaderBar.vue";
 import Action from "@/components/header/Action.vue";
 import Breadcrumbs from "@/components/Breadcrumbs.vue";
+import { useAuthStore } from "@/stores/auth";
+import { useFileStore } from "@/stores/file";
 
 export default {
   name: "editor",
@@ -44,7 +47,8 @@ export default {
     return {};
   },
   computed: {
-    ...mapState(["req", "user"]),
+    ...mapState(useAuthStore, ["user"]),
+    ...mapState(useFileStore, ["req"]),
     breadcrumbs() {
       let parts = this.$route.path.split("/");
 
@@ -78,13 +82,18 @@ export default {
   created() {
     window.addEventListener("keydown", this.keyEvent);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("keydown", this.keyEvent);
     this.editor.destroy();
   },
   mounted: function () {
     const fileContent = this.req.content || "";
 
+    ace.config.set(
+      "basePath",
+      `https://cdn.jsdelivr.net/npm/ace-builds@${ace_version}/src-min-noconflict/`
+    );
+
     this.editor = ace.edit("editor", {
       value: fileContent,
       showPrintMargin: false,
@@ -99,6 +108,7 @@ export default {
     }
   },
   methods: {
+    ...mapActions(useFileStore, ["updateRequest"]),
     back() {
       let uri = url.removeLastDir(this.$route.path) + "/";
       this.$router.push({ path: uri });
@@ -128,7 +138,7 @@ export default {
       }
     },
     close() {
-      this.$store.commit("updateRequest", {});
+      this.updateRequest({});
 
       let uri = url.removeLastDir(this.$route.path) + "/";
       this.$router.push({ path: uri });
@@ -136,3 +146,4 @@ export default {
   },
 };
 </script>
+@/stores/auth@/stores/file
diff --git a/frontend/src/views/files/Listing.vue b/frontend/src/views/files/Listing.vue
index 4b267c7e..10f94aad 100644
--- a/frontend/src/views/files/Listing.vue
+++ b/frontend/src/views/files/Listing.vue
@@ -51,7 +51,7 @@
           v-if="headerButtons.shell"
           icon="code"
           :label="$t('buttons.shell')"
-          @action="$store.commit('toggleShell')"
+          @action="toggleShell"
         />
         <action
           :icon="viewIcon"
@@ -248,10 +248,10 @@
           multiple
         />
 
-        <div :class="{ active: $store.state.multiple }" id="multiple-selection">
+        <div :class="{ active: multiple }" id="multiple-selection">
           <p>{{ $t("files.multipleSelectionEnabled") }}</p>
           <div
-            @click="$store.commit('multiple', false)"
+            @click="() => (multiple = false)"
             tabindex="0"
             role="button"
             :title="$t('files.clear')"
@@ -268,12 +268,18 @@
 
 <script>
 import Vue from "vue";
-import { mapState, mapGetters, mapMutations } from "vuex";
+import { mapState, mapWritableState, mapActions, mapStores } from "pinia";
+import { useAuthStore } from "@/stores/auth";
+import { useClipboardStore } from "@/stores/clipboard";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
 import { users, files as api } from "@/api";
 import { enableExec } from "@/utils/constants";
 import * as upload from "@/utils/upload";
 import css from "@/utils/css";
 import throttle from "lodash.throttle";
+import { Base64 } from "js-base64";
 
 import HeaderBar from "@/components/header/HeaderBar.vue";
 import Action from "@/components/header/Action.vue";
@@ -298,16 +304,17 @@ export default {
     };
   },
   computed: {
-    ...mapState([
+    ...mapStores(useClipboardStore),
+    ...mapState(useAuthStore, ["user"]),
+    ...mapState(useFileStore, ["selectedCount", "toggleMultiple"]),
+    ...mapState(useLayoutStore, ["show"]),
+    ...mapWritableState(useFileStore, [
       "req",
       "selected",
-      "user",
-      "show",
       "multiple",
-      "selected",
       "loading",
+      "reload",
     ]),
-    ...mapGetters(["selectedCount"]),
     nameSorted() {
       return this.req.sorting.by === "name";
     },
@@ -425,7 +432,7 @@ export default {
     document.addEventListener("dragleave", this.dragLeave);
     document.addEventListener("drop", this.drop);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     // Remove event listeners before destroying this page.
     window.removeEventListener("keydown", this.keyEvent);
     window.removeEventListener("scroll", this.scrollEvent);
@@ -438,9 +445,10 @@ export default {
     document.removeEventListener("drop", this.drop);
   },
   methods: {
-    ...mapMutations(["updateUser", "addSelected"]),
+    ...mapActions(useAuthStore, ["updateUser"]),
+    ...mapActions(useLayoutStore, ["showHover", "closeHovers", "toggleShell"]),
     base64: function (name) {
-      return window.btoa(unescape(encodeURIComponent(name)));
+      return Base64.encodeURI(name);
     },
     keyEvent(event) {
       // No prompts are shown
@@ -451,7 +459,7 @@ export default {
       // Esc!
       if (event.keyCode === 27) {
         // Reset files selection.
-        this.$store.commit("resetSelected");
+        this.selected = [];
       }
 
       // Del!
@@ -459,7 +467,7 @@ export default {
         if (!this.user.perm.delete || this.selectedCount == 0) return;
 
         // Show delete prompt.
-        this.$store.commit("showHover", "delete");
+        this.showHover("delete");
       }
 
       // F2!
@@ -467,7 +475,7 @@ export default {
         if (!this.user.perm.rename || this.selectedCount !== 1) return;
 
         // Show rename prompt.
-        this.$store.commit("showHover", "rename");
+        this.showHover("rename");
       }
 
       // Ctrl is pressed
@@ -480,7 +488,7 @@ export default {
       switch (key) {
         case "f":
           event.preventDefault();
-          this.$store.commit("showHover", "search");
+          this.showHover("search");
           break;
         case "c":
         case "x":
@@ -492,13 +500,13 @@ export default {
         case "a":
           event.preventDefault();
           for (let file of this.items.files) {
-            if (this.$store.state.selected.indexOf(file.index) === -1) {
-              this.addSelected(file.index);
+            if (this.selected.indexOf(file.index) === -1) {
+              this.selected.push(file.index);
             }
           }
           for (let dir of this.items.dirs) {
-            if (this.$store.state.selected.indexOf(dir.index) === -1) {
-              this.addSelected(dir.index);
+            if (this.selected.indexOf(dir.index) === -1) {
+              this.selected.push(dir.index);
             }
           }
           break;
@@ -530,7 +538,7 @@ export default {
         return;
       }
 
-      this.$store.commit("updateClipboard", {
+      this.clipboardStore.updateClipboard({
         key: key,
         items: items,
         path: this.$route.path,
@@ -543,7 +551,7 @@ export default {
 
       let items = [];
 
-      for (let item of this.$store.state.clipboard.items) {
+      for (let item of this.clipboardStore.items) {
         const from = item.from.endsWith("/")
           ? item.from.slice(0, -1)
           : item.from;
@@ -559,24 +567,24 @@ export default {
         api
           .copy(items, overwrite, rename)
           .then(() => {
-            this.$store.commit("setReload", true);
+            this.reload = true;
           })
           .catch(this.$showError);
       };
 
-      if (this.$store.state.clipboard.key === "x") {
+      if (this.clipboardStore.key === "x") {
         action = (overwrite, rename) => {
           api
             .move(items, overwrite, rename)
             .then(() => {
-              this.$store.commit("resetClipboard");
-              this.$store.commit("setReload", true);
+              this.clipboardStore.resetClipboard();
+              this.reload = true;
             })
             .catch(this.$showError);
         };
       }
 
-      if (this.$store.state.clipboard.path == this.$route.path) {
+      if (this.clipboardStore.path == this.$route.path) {
         action(false, true);
 
         return;
@@ -588,14 +596,14 @@ export default {
       let rename = false;
 
       if (conflict) {
-        this.$store.commit("showHover", {
+        this.showHover({
           prompt: "replace-rename",
           confirm: (event, option) => {
             overwrite = option == "overwrite";
             rename = option == "rename";
 
             event.preventDefault();
-            this.$store.commit("closeHovers");
+            this.closeHovers();
             action(overwrite, rename);
           },
         });
@@ -695,16 +703,16 @@ export default {
       let conflict = upload.checkConflict(files, items);
 
       if (conflict) {
-        this.$store.commit("showHover", {
+        this.showHover({
           prompt: "replace",
           action: (event) => {
             event.preventDefault();
-            this.$store.commit("closeHovers");
+            this.closeHovers();
             upload.handleFiles(files, path, false);
           },
           confirm: (event) => {
             event.preventDefault();
-            this.$store.commit("closeHovers");
+            this.closeHovers();
             upload.handleFiles(files, path, true);
           },
         });
@@ -715,7 +723,7 @@ export default {
       upload.handleFiles(files, path);
     },
     uploadInput(event) {
-      this.$store.commit("closeHovers");
+      this.closeHovers();
 
       let files = event.currentTarget.files;
       let folder_upload =
@@ -735,16 +743,16 @@ export default {
       let conflict = upload.checkConflict(files, this.req.items);
 
       if (conflict) {
-        this.$store.commit("showHover", {
+        this.showHover({
           prompt: "replace",
           action: (event) => {
             event.preventDefault();
-            this.$store.commit("closeHovers");
+            this.closeHovers();
             upload.handleFiles(files, path, false);
           },
           confirm: (event) => {
             event.preventDefault();
-            this.$store.commit("closeHovers");
+            this.closeHovers();
             upload.handleFiles(files, path, true);
           },
         });
@@ -786,14 +794,14 @@ export default {
         this.$showError(e);
       }
 
-      this.$store.commit("setReload", true);
+      this.reload = true;
     },
     openSearch() {
-      this.$store.commit("showHover", "search");
+      this.showHover("search");
     },
     toggleMultipleSelection() {
-      this.$store.commit("multiple", !this.multiple);
-      this.$store.commit("closeHovers");
+      this.toggleMultiple();
+      this.closeHovers();
     },
     windowsResize: throttle(function () {
       this.colunmsResize();
@@ -814,10 +822,10 @@ export default {
         return;
       }
 
-      this.$store.commit("showHover", {
+      this.showHover({
         prompt: "download",
         confirm: (format) => {
-          this.$store.commit("closeHovers");
+          this.closeHovers();
 
           let files = [];
 
@@ -834,7 +842,7 @@ export default {
       });
     },
     switchView: async function () {
-      this.$store.commit("closeHovers");
+      this.closeHovers();
 
       const modes = {
         list: "mosaic",
@@ -850,7 +858,7 @@ export default {
       users.update(data, ["viewMode"]).catch(this.$showError);
 
       // Await ensures correct value for setItemWeight()
-      await this.$store.commit("updateUser", data);
+      await this.updateUser(data);
 
       this.setItemWeight();
       this.fillWindow();
@@ -860,7 +868,7 @@ export default {
         typeof window.DataTransferItem !== "undefined" &&
         typeof DataTransferItem.prototype.webkitGetAsEntry !== "undefined"
       ) {
-        this.$store.commit("showHover", "upload");
+        this.showHover("upload");
       } else {
         document.getElementById("upload-input").click();
       }
@@ -897,3 +905,4 @@ export default {
   },
 };
 </script>
+@/stores/auth@/stores/clipboard@/stores/file@/stores/layout
diff --git a/frontend/src/views/files/Preview.vue b/frontend/src/views/files/Preview.vue
index c956f9d9..a5f494a6 100644
--- a/frontend/src/views/files/Preview.vue
+++ b/frontend/src/views/files/Preview.vue
@@ -143,7 +143,11 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useAuthStore } from "@/stores/auth";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
 import { files as api } from "@/api";
 import { resizePreview } from "@/utils/constants";
 import url from "@/utils/url";
@@ -177,7 +181,9 @@ export default {
     };
   },
   computed: {
-    ...mapState(["req", "user", "oldReq", "jwt", "loading", "show"]),
+    ...mapState(useAuthStore, ["user", "jwt"]),
+    ...mapState(useFileStore, ["req", "oldReq", "loading"]),
+    ...mapState(useLayoutStore, ["show"]),
     hasPrevious() {
       return this.previousLink !== "";
     },
@@ -195,7 +201,7 @@ export default {
       return api.getDownloadURL(this.req, true);
     },
     showMore() {
-      return this.$store.state.show === "more";
+      return this.show === "more";
     },
     isResizeEnabled() {
       return resizePreview;
@@ -218,12 +224,14 @@ export default {
     this.listing = this.oldReq.items;
     this.updatePreview();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("keydown", this.key);
   },
   methods: {
+    ...mapActions(useFileStore, ["updateRequest"]),
+    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
     deleteFile() {
-      this.$store.commit("showHover", {
+      this.showHover({
         prompt: "delete",
         confirm: () => {
           this.listing = this.listing.filter((item) => item.name !== this.name);
@@ -320,10 +328,10 @@ export default {
         : api.getPreviewURL(item, "big");
     },
     openMore() {
-      this.$store.commit("showHover", "more");
+      this.showHover("more");
     },
     resetPrompts() {
-      this.$store.commit("closeHovers");
+      this.closeHovers();
     },
     toggleSize() {
       this.fullSize = !this.fullSize;
@@ -341,7 +349,7 @@ export default {
       }, 1500);
     }, 500),
     close() {
-      this.$store.commit("updateRequest", {});
+      this.updateRequest({});
 
       let uri = url.removeLastDir(this.$route.path) + "/";
       this.$router.push({ path: uri });
@@ -352,3 +360,4 @@ export default {
   },
 };
 </script>
+@/stores/auth@/stores/file@/stores/layout
diff --git a/frontend/src/views/settings/Global.vue b/frontend/src/views/settings/Global.vue
index 12f3d606..f5f491ce 100644
--- a/frontend/src/views/settings/Global.vue
+++ b/frontend/src/views/settings/Global.vue
@@ -29,7 +29,7 @@
 
           <h3>{{ $t("settings.rules") }}</h3>
           <p class="small">{{ $t("settings.globalRules") }}</p>
-          <rules :rules.sync="settings.rules" />
+          <rules v-model:rules="settings.rules" />
 
           <div v-if="isExecEnabled">
             <h3>{{ $t("settings.executeOnShell") }}</h3>
@@ -75,7 +75,7 @@
             <label for="theme">{{ $t("settings.themes.title") }}</label>
             <themes
               class="input input--block"
-              :theme.sync="settings.branding.theme"
+              v-model:theme="settings.branding.theme"
               id="theme"
             ></themes>
           </p>
@@ -156,7 +156,7 @@
           <user-form
             :isNew="false"
             :isDefault="true"
-            :user.sync="settings.defaults"
+            v-model:user="settings.defaults"
           />
         </div>
 
@@ -220,7 +220,9 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from "vuex";
+import { mapState, mapWritableState } from "pinia";
+import { useAuthStore } from "@/stores/auth";
+import { useLayoutStore } from "@/stores/layout";
 import { settings as api } from "@/api";
 import { enableExec } from "@/utils/constants";
 import UserForm from "@/components/settings/UserForm.vue";
@@ -245,7 +247,8 @@ export default {
     };
   },
   computed: {
-    ...mapState(["user", "loading"]),
+    ...mapState(useAuthStore, ["user"]),
+    ...mapWritableState(useLayoutStore, ["loading"]),
     isExecEnabled: () => enableExec,
     formattedChunkSize: {
       get() {
@@ -268,7 +271,7 @@ export default {
   },
   async created() {
     try {
-      this.setLoading(true);
+      this.loading = true;
 
       const original = await api.get();
       let settings = { ...original, commands: [] };
@@ -287,11 +290,10 @@ export default {
     } catch (e) {
       this.error = e;
     } finally {
-      this.setLoading(false);
+      this.loading = false;
     }
   },
   methods: {
-    ...mapMutations(["setLoading"]),
     capitalize(name, where = "_") {
       if (where === "caps") where = /(?=[A-Z])/;
       let splitted = name.split(where);
@@ -358,7 +360,7 @@ export default {
       return `${size}${units[unitIndex]}`;
     },
     // Clear the debounce timeout when the component is destroyed
-    beforeDestroy() {
+    beforeUnmount() {
       if (this.debounceTimeout) {
         clearTimeout(this.debounceTimeout);
       }
@@ -366,3 +368,4 @@ export default {
   },
 };
 </script>
+@/stores/auth@/stores/file
diff --git a/frontend/src/views/settings/Profile.vue b/frontend/src/views/settings/Profile.vue
index 9873801f..502ab41f 100644
--- a/frontend/src/views/settings/Profile.vue
+++ b/frontend/src/views/settings/Profile.vue
@@ -22,7 +22,7 @@
           <h3>{{ $t("settings.language") }}</h3>
           <languages
             class="input input--block"
-            :locale.sync="locale"
+            v-model:locale="locale"
           ></languages>
         </div>
 
@@ -72,7 +72,9 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from "vuex";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import { useAuthStore } from "@/stores/auth";
+import { useLayoutStore } from "@/stores/layout";
 import { users as api } from "@/api";
 import Languages from "@/components/settings/Languages.vue";
 import i18n, { rtlLanguages } from "@/i18n";
@@ -93,7 +95,8 @@ export default {
     };
   },
   computed: {
-    ...mapState(["user"]),
+    ...mapState(useAuthStore, ["user"]),
+    ...mapWritableState(useLayoutStore, ["loading"]),
     passwordClass() {
       const baseClass = "input input--block";
 
@@ -109,14 +112,14 @@ export default {
     },
   },
   created() {
-    this.setLoading(false);
+    this.loading = true;
     this.locale = this.user.locale;
     this.hideDotfiles = this.user.hideDotfiles;
     this.singleClick = this.user.singleClick;
     this.dateFormat = this.user.dateFormat;
   },
   methods: {
-    ...mapMutations(["updateUser", "setLoading"]),
+    ...mapActions(useAuthStore, ["updateUser"]),
     async updatePassword(event) {
       event.preventDefault();
 
@@ -165,3 +168,4 @@ export default {
   },
 };
 </script>
+@/stores/auth@/stores/file
diff --git a/frontend/src/views/settings/Shares.vue b/frontend/src/views/settings/Shares.vue
index 200577c2..53a2943f 100644
--- a/frontend/src/views/settings/Shares.vue
+++ b/frontend/src/views/settings/Shares.vue
@@ -61,8 +61,10 @@
 </template>
 
 <script>
+import { mapState, mapWritableState } from "pinia";
+import { useAuthStore } from "@/stores/auth";
+import { useLayoutStore } from "@/stores/layout";
 import { share as api, users } from "@/api";
-import { mapState, mapMutations } from "vuex";
 import moment from "moment";
 import Clipboard from "clipboard";
 import Errors from "@/views/Errors.vue";
@@ -72,7 +74,10 @@ export default {
   components: {
     Errors,
   },
-  computed: mapState(["user", "loading"]),
+  computed: {
+    ...mapState(useAuthStore, ["user"]),
+    ...mapWritableState(useLayoutStore, ["loading"]),
+  },
   data: function () {
     return {
       error: null,
@@ -81,7 +86,7 @@ export default {
     };
   },
   async created() {
-    this.setLoading(true);
+    this.loading = true;
 
     try {
       let links = await api.list();
@@ -98,7 +103,7 @@ export default {
     } catch (e) {
       this.error = e;
     } finally {
-      this.setLoading(false);
+      this.loading = false;
     }
   },
   mounted() {
@@ -107,18 +112,17 @@ export default {
       this.$showSuccess(this.$t("success.linkCopied"));
     });
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.clip.destroy();
   },
   methods: {
-    ...mapMutations(["setLoading"]),
     deleteLink: async function (event, link) {
       event.preventDefault();
 
-      this.$store.commit("showHover", {
+      this.showHover({
         prompt: "share-delete",
         confirm: () => {
-          this.$store.commit("closeHovers");
+          this.closeHovers();
 
           try {
             api.remove(link.hash);
@@ -139,3 +143,4 @@ export default {
   },
 };
 </script>
+@/stores/auth@/stores/file
diff --git a/frontend/src/views/settings/User.vue b/frontend/src/views/settings/User.vue
index e26c6fd0..f4aa3d1d 100644
--- a/frontend/src/views/settings/User.vue
+++ b/frontend/src/views/settings/User.vue
@@ -10,8 +10,8 @@
 
         <div class="card-content">
           <user-form
-            :user.sync="user"
-            :createUserDir.sync="createUserDir"
+            v-model:user="user"
+            v-model:createUserDir="createUserDir"
             :isDefault="false"
             :isNew="isNew"
           />
@@ -37,7 +37,7 @@
       </form>
     </div>
 
-    <div v-if="$store.state.show === 'deleteUser'" class="card floating">
+    <div v-if="show === 'deleteUser'" class="card floating">
       <div class="card-content">
         <p>Are you sure you want to delete this user?</p>
       </div>
@@ -61,7 +61,9 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from "vuex";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import { useAuthStore } from "@/stores/auth";
+import { useLayoutStore } from "@/stores/layout";
 import { users as api, settings } from "@/api";
 import UserForm from "@/components/settings/UserForm.vue";
 import Errors from "@/views/Errors.vue";
@@ -85,10 +87,12 @@ export default {
     this.fetchData();
   },
   computed: {
+    ...mapState(useAuthStore, ["user"]),
+    ...mapState(useLayoutStore, ["show"]),
+    ...mapWritableState(useLayoutStore, ["loading"]),
     isNew() {
       return this.$route.path === "/settings/users/new";
     },
-    ...mapState(["loading"]),
   },
   watch: {
     $route: "fetchData",
@@ -98,9 +102,10 @@ export default {
     },
   },
   methods: {
-    ...mapMutations(["closeHovers", "showHover", "setUser", "setLoading"]),
+    ...mapActions(useAuthStore, ["setUser"]),
+    ...mapActions(useLayoutStore, ["closeHovers", "showHover"]),
     async fetchData() {
-      this.setLoading(true);
+      this.loading = true;
 
       try {
         if (this.isNew) {
@@ -121,7 +126,7 @@ export default {
       } catch (e) {
         this.error = e;
       } finally {
-        this.setLoading(false);
+        this.loading = false;
       }
     },
     deletePrompt() {
@@ -155,7 +160,7 @@ export default {
         } else {
           await api.update(user);
 
-          if (user.id === this.$store.state.user.id) {
+          if (user.id === this.user.id) {
             this.setUser({ ...deepClone(user) });
           }
 
@@ -168,3 +173,4 @@ export default {
   },
 };
 </script>
+@/stores/auth@/stores/file@/stores/layout
diff --git a/frontend/src/views/settings/Users.vue b/frontend/src/views/settings/Users.vue
index 15b6e51c..ccab7883 100644
--- a/frontend/src/views/settings/Users.vue
+++ b/frontend/src/views/settings/Users.vue
@@ -42,7 +42,8 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from "vuex";
+import { mapWritableState } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
 import { users as api } from "@/api";
 import Errors from "@/views/Errors.vue";
 
@@ -58,21 +59,19 @@ export default {
     };
   },
   async created() {
-    this.setLoading(true);
+    this.loading = true;
 
     try {
       this.users = await api.getAll();
     } catch (e) {
       this.error = e;
     } finally {
-      this.setLoading(false);
+      this.loading = false;
     }
   },
   computed: {
-    ...mapState(["loading"]),
-  },
-  methods: {
-    ...mapMutations(["setLoading"]),
+    ...mapWritableState(useLayoutStore, ["loading"]),
   },
 };
 </script>
+@/stores/file
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 91690f9c..272ed970 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -4,6 +4,7 @@ import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
 import { compression } from "vite-plugin-compression2";
+import pluginRewriteAll from "vite-plugin-rewrite-all";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -19,6 +20,7 @@ export default defineConfig({
     }),
     VueI18nPlugin(),
     compression({ include: /\.js$/i, deleteOriginalAssets: true }),
+    pluginRewriteAll(), // Fixes 404 error with paths containing dot (will be fixed in Vite 5)
   ],
   resolve: {
     alias: {
@@ -26,6 +28,15 @@ export default defineConfig({
       "@/": fileURLToPath(new URL("./src/", import.meta.url)),
     },
   },
+  server: {
+    proxy: {
+      "/api/command": {
+        target: "ws://127.0.0.1:8080",
+        ws: true,
+      },
+      "/api": "http://127.0.0.1:8080",
+    },
+  },
   base: "",
   experimental: {
     renderBuiltUrl(filename, { hostType }) {