Complete Gdrive integration

Add title to cloud route
Update drive styling
2024-05-18 15:44:16 +02:00 · 2024-03-26 02:17:47 +02:00 · 2024-03-26 02:16:29 +02:00 · 2024-03-26 01:57:17 +02:00 · 2024-03-26 01:55:39 +02:00 · 2024-03-26 01:23:40 +02:00
48 changed files with 1539 additions and 363 deletions
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ As of the moment base mokuro does not generate the `.mokuro` file, you need to i
 pip install git+https://github.com/kha-white/mokuro.git@web-reader
 ```

-Once installed and your manga is processed, import it your manga to the reader.
+Once installed and your manga is processed, import your manga into the reader.

 ## Development:

@@ -33,7 +33,7 @@ cd mokuro-reader

 Install dependencies:
 ```bash
-npm run install
+npm install
 ```

 Start the dev server:
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,17 @@
 {
  "name": "z-reader",
-  "version": "0.0.1",
+  "version": "1.0.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "z-reader",
-      "version": "0.0.1",
+      "version": "0.9.0",
      "dependencies": {
+        "@types/gapi": "^0.0.47",
+        "@types/google.accounts": "^0.0.14",
+        "@types/google.picker": "^0.0.42",
+        "@vercel/analytics": "^1.1.0",
        "@zip.js/zip.js": "^2.7.20",
        "dexie": "^4.0.1-alpha.25",
        "panzoom": "^9.4.3",
@@ -16,6 +20,7 @@
      "devDependencies": {
        "@sveltejs/adapter-auto": "^2.0.0",
        "@sveltejs/kit": "^1.20.4",
+        "@types/gapi.client.drive-v3": "^0.0.4",
        "@typescript-eslint/eslint-plugin": "^5.45.0",
        "@typescript-eslint/parser": "^5.45.0",
        "autoprefixer": "^10.4.14",
@@ -479,6 +484,15 @@
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
+    "node_modules/@fastify/busboy": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.0.tgz",
+      "integrity": "sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
    "node_modules/@floating-ui/core": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz",
@@ -591,6 +605,26 @@
      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
      "dev": true
    },
+    "node_modules/@maxim_mazurok/gapi.client.discovery-v1": {
+      "version": "0.1.20200806",
+      "resolved": "https://registry.npmjs.org/@maxim_mazurok/gapi.client.discovery-v1/-/gapi.client.discovery-v1-0.1.20200806.tgz",
+      "integrity": "sha512-Wl6UfmZVDdWbY3PUu8E2ULk9RPLjnMqp/iOA4tcK8Ne+U/GmlnWP/e34IaZNGArfl7iXJNOG+/3Rj9L9jQyF9Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/gapi.client": "*",
+        "@types/gapi.client.discovery-v1": "*"
+      }
+    },
+    "node_modules/@maxim_mazurok/gapi.client.drive-v3": {
+      "version": "0.0.20240304",
+      "resolved": "https://registry.npmjs.org/@maxim_mazurok/gapi.client.drive-v3/-/gapi.client.drive-v3-0.0.20240304.tgz",
+      "integrity": "sha512-PuGvDvRE70XsyUqnQCq5M2VJ7/E7u5pDvHZfBXunVlf5mYmkyAdbZg+ygJDJ2243wWpUXjmEcuxLDY2yamIq4g==",
+      "dev": true,
+      "dependencies": {
+        "@types/gapi.client": "*",
+        "@types/gapi.client.discovery-v1": "*"
+      }
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -655,24 +689,25 @@
      }
    },
    "node_modules/@sveltejs/kit": {
-      "version": "1.22.3",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.22.3.tgz",
-      "integrity": "sha512-IpHD5wvuoOIHYaHQUBJ1zERD2Iz+fB/rBXhXjl8InKw6X4VKE9BSus+ttHhE7Ke+Ie9ecfilzX8BnWE3FeQyng==",
+      "version": "1.30.3",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.30.3.tgz",
+      "integrity": "sha512-0DzVXfU4h+tChFvoc8C61IqErCyskD4ydSIDjpKS2lYlEzIYrtYrY7juSqACFxqcvZAnOEXvSY+zZ8br0+ZMMg==",
      "dev": true,
      "hasInstallScript": true,
      "dependencies": {
-        "@sveltejs/vite-plugin-svelte": "^2.4.1",
+        "@sveltejs/vite-plugin-svelte": "^2.5.0",
        "@types/cookie": "^0.5.1",
        "cookie": "^0.5.0",
        "devalue": "^4.3.1",
        "esm-env": "^1.0.0",
        "kleur": "^4.1.5",
        "magic-string": "^0.30.0",
-        "mime": "^3.0.0",
+        "mrmime": "^1.0.1",
        "sade": "^1.8.1",
        "set-cookie-parser": "^2.6.0",
        "sirv": "^2.0.2",
-        "undici": "~5.22.0"
+        "tiny-glob": "^0.2.9",
+        "undici": "~5.26.2"
      },
      "bin": {
        "svelte-kit": "svelte-kit.js"
@@ -681,36 +716,36 @@
        "node": "^16.14 || >=18"
      },
      "peerDependencies": {
-        "svelte": "^3.54.0 || ^4.0.0-next.0",
+        "svelte": "^3.54.0 || ^4.0.0-next.0 || ^5.0.0-next.0",
        "vite": "^4.0.0"
      }
    },
    "node_modules/@sveltejs/vite-plugin-svelte": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.4.3.tgz",
-      "integrity": "sha512-NY2h+B54KHZO3kDURTdARqthn6D4YSIebtfW75NvZ/fwyk4G+AJw3V/i0OBjyN4406Ht9yZcnNWMuRUFnDNNiA==",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.5.3.tgz",
+      "integrity": "sha512-erhNtXxE5/6xGZz/M9eXsmI7Pxa6MS7jyTy06zN3Ck++ldrppOnOlJwHHTsMC7DHDQdgUp4NAc4cDNQ9eGdB/w==",
      "dev": true,
      "dependencies": {
-        "@sveltejs/vite-plugin-svelte-inspector": "^1.0.3",
+        "@sveltejs/vite-plugin-svelte-inspector": "^1.0.4",
        "debug": "^4.3.4",
        "deepmerge": "^4.3.1",
        "kleur": "^4.1.5",
-        "magic-string": "^0.30.1",
-        "svelte-hmr": "^0.15.2",
+        "magic-string": "^0.30.3",
+        "svelte-hmr": "^0.15.3",
        "vitefu": "^0.2.4"
      },
      "engines": {
        "node": "^14.18.0 || >= 16"
      },
      "peerDependencies": {
-        "svelte": "^3.54.0 || ^4.0.0",
+        "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0",
        "vite": "^4.0.0"
      }
    },
    "node_modules/@sveltejs/vite-plugin-svelte-inspector": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.3.tgz",
-      "integrity": "sha512-Khdl5jmmPN6SUsVuqSXatKpQTMIifoQPDanaxC84m9JxIibWvSABJyHpyys0Z+1yYrxY5TTEQm+6elh0XCMaOA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz",
+      "integrity": "sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==",
      "dev": true,
      "dependencies": {
        "debug": "^4.3.4"
@@ -736,6 +771,45 @@
      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
      "dev": true
    },
+    "node_modules/@types/gapi": {
+      "version": "0.0.47",
+      "resolved": "https://registry.npmjs.org/@types/gapi/-/gapi-0.0.47.tgz",
+      "integrity": "sha512-/ZsLuq6BffMgbKMtZyDZ8vwQvTyKhKQ1G2K6VyWCgtHHhfSSXbk4+4JwImZiTjWNXfI2q1ZStAwFFHSkNoTkHA=="
+    },
+    "node_modules/@types/gapi.client": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/gapi.client/-/gapi.client-1.0.8.tgz",
+      "integrity": "sha512-qJQUmmumbYym3Amax0S8CVzuSngcXsC1fJdwRS2zeW5lM63zXkw4wJFP+bG0jzgi0R6EsJKoHnGNVTDbOyG1ng==",
+      "dev": true
+    },
+    "node_modules/@types/gapi.client.discovery-v1": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@types/gapi.client.discovery-v1/-/gapi.client.discovery-v1-0.0.4.tgz",
+      "integrity": "sha512-uevhRumNE65F5mf2gABLaReOmbFSXONuzFZjNR3dYv6BmkHg+wciubHrfBAsp3554zNo3Dcg6dUAlwMqQfpwjQ==",
+      "dev": true,
+      "dependencies": {
+        "@maxim_mazurok/gapi.client.discovery-v1": "latest"
+      }
+    },
+    "node_modules/@types/gapi.client.drive-v3": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@types/gapi.client.drive-v3/-/gapi.client.drive-v3-0.0.4.tgz",
+      "integrity": "sha512-jE37dJ0EzAdY0aJPFOp20xmec/aO0P4HtUIA9k07RMPyedFDOcuMlSac1r0PklwQdgXF7BHaMoObNHNAnwSQUQ==",
+      "dev": true,
+      "dependencies": {
+        "@maxim_mazurok/gapi.client.drive-v3": "latest"
+      }
+    },
+    "node_modules/@types/google.accounts": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@types/google.accounts/-/google.accounts-0.0.14.tgz",
+      "integrity": "sha512-HqIVkVzpiLWhlajhQQd4rIV7czanFvXblJI2J1fSrL+VKQuQwwZ63m35D/mI0flsqKE6p/hNrAG0Yn4FD6JvNA=="
+    },
+    "node_modules/@types/google.picker": {
+      "version": "0.0.42",
+      "resolved": "https://registry.npmjs.org/@types/google.picker/-/google.picker-0.0.42.tgz",
+      "integrity": "sha512-7Ut1zDLCGNhyN+0fuIcncpBP9eUsIjLKz6qmVKvdkBUi1EzAskxTcIZcU/w2cO1ens/hEXlqeLd5qAKs/Kqqyw=="
+    },
    "node_modules/@types/json-schema": {
      "version": "7.0.12",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
@@ -942,6 +1016,14 @@
        "url": "https://opencollective.com/typescript-eslint"
      }
    },
+    "node_modules/@vercel/analytics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.1.0.tgz",
+      "integrity": "sha512-k5ePYZPxitxxD1eJenPUUuH3qK+EtaA9OVD3oO0BRbyT/LarmZF0qdkptRSidip1arQxsTEIWvHbTuj1oksl+Q==",
+      "dependencies": {
+        "server-only": "^0.0.1"
+      }
+    },
    "node_modules/@yr/monotone-cubic-spline": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
@@ -1219,18 +1301,6 @@
        "node": "*"
      }
    },
-    "node_modules/busboy": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
-      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
-      "dev": true,
-      "dependencies": {
-        "streamsearch": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=10.16.0"
-      }
-    },
    "node_modules/callsites": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1250,9 +1320,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001525",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001525.tgz",
-      "integrity": "sha512-/3z+wB4icFt3r0USMwxujAqRvaD/B7rvGTsKhbhSQErVrJvkZCLhgNLJxU8MevahQVH6hCU9FsHdNUFbiwmE7Q==",
+      "version": "1.0.30001597",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001597.tgz",
+      "integrity": "sha512-7LjJvmQU6Sj7bL0j5b5WY/3n7utXUJvAe1lxhsHDbLmwX9mdL86Yjtr+5SRCyf8qME4M7pU2hswj0FpyBVCv9w==",
      "dev": true,
      "funding": [
        {
@@ -2105,6 +2175,12 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/globalyzer": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
+      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==",
+      "dev": true
+    },
    "node_modules/globby": {
      "version": "11.1.0",
      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -2125,6 +2201,12 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+      "dev": true
+    },
    "node_modules/graceful-fs": {
      "version": "4.2.11",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -2418,9 +2500,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.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
      "dev": true,
      "dependencies": {
        "@jridgewell/sourcemap-codec": "^1.4.15"
@@ -2457,18 +2539,6 @@
        "node": ">=8.6"
      }
    },
-    "node_modules/mime": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
-      "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
-      "dev": true,
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
    "node_modules/min-indent": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -2556,9 +2626,9 @@
      }
    },
    "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
      "dev": true,
      "funding": [
        {
@@ -2800,9 +2870,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.33",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
+      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
      "dev": true,
      "funding": [
        {
@@ -2819,7 +2889,7 @@
        }
      ],
      "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
        "picocolors": "^1.0.0",
        "source-map-js": "^1.0.2"
      },
@@ -3104,9 +3174,9 @@
      }
    },
    "node_modules/rollup": {
-      "version": "3.27.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.27.0.tgz",
-      "integrity": "sha512-aOltLCrYZ0FhJDm7fCqwTjIUEVjWjcydKBV/Zeid6Mn8BWgDCUBBWT5beM5ieForYNo/1ZHuGJdka26kvQ3Gzg==",
+      "version": "3.29.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
+      "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
      "dev": true,
      "bin": {
        "rollup": "dist/bin/rollup"
@@ -3210,6 +3280,11 @@
        "node": ">=10"
      }
    },
+    "node_modules/server-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz",
+      "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA=="
+    },
    "node_modules/set-cookie-parser": {
      "version": "2.6.0",
      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
@@ -3284,15 +3359,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/streamsearch": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
-      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
    "node_modules/strip-ansi": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -3499,15 +3565,15 @@
      }
    },
    "node_modules/svelte-hmr": {
-      "version": "0.15.2",
-      "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.2.tgz",
-      "integrity": "sha512-q/bAruCvFLwvNbeE1x3n37TYFb3mTBJ6TrCq6p2CoFbSTNhDE9oAtEfpy+wmc9So8AG0Tja+X0/mJzX9tSfvIg==",
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",
+      "integrity": "sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==",
      "dev": true,
      "engines": {
        "node": "^12.20 || ^14.13.1 || >= 16"
      },
      "peerDependencies": {
-        "svelte": "^3.19.0 || ^4.0.0-next.0"
+        "svelte": "^3.19.0 || ^4.0.0"
      }
    },
    "node_modules/svelte-preprocess": {
@@ -3749,6 +3815,16 @@
        "node": ">=0.8"
      }
    },
+    "node_modules/tiny-glob": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
+      "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
+      "dev": true,
+      "dependencies": {
+        "globalyzer": "0.1.0",
+        "globrex": "^0.1.2"
+      }
+    },
    "node_modules/to-regex-range": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3841,12 +3917,12 @@
      }
    },
    "node_modules/undici": {
-      "version": "5.22.1",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.22.1.tgz",
-      "integrity": "sha512-Ji2IJhFXZY0x/0tVBXeQwgPlLWw13GVzpsWPQ3rV50IFMMof2I55PZZxtm4P6iNq+L5znYN9nSTAq0ZyE6lSJw==",
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.26.5.tgz",
+      "integrity": "sha512-cSb4bPFd5qgR7qr2jYAi0hlX9n5YKK2ONKkLFkxl+v/9BvC0sOpZjBHDBSXc5lWAf5ty9oZdRXytBIHzgUcerw==",
      "dev": true,
      "dependencies": {
-        "busboy": "^1.6.0"
+        "@fastify/busboy": "^2.0.0"
      },
      "engines": {
        "node": ">=14.0"
@@ -3898,14 +3974,14 @@
      "dev": true
    },
    "node_modules/vite": {
-      "version": "4.4.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz",
-      "integrity": "sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==",
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
+      "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
      "dev": true,
      "dependencies": {
        "esbuild": "^0.18.10",
-        "postcss": "^8.4.26",
-        "rollup": "^3.25.2"
+        "postcss": "^8.4.27",
+        "rollup": "^3.27.1"
      },
      "bin": {
        "vite": "bin/vite.js"
@@ -3953,12 +4029,12 @@
      }
    },
    "node_modules/vitefu": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.4.tgz",
-      "integrity": "sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==",
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
+      "integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
      "dev": true,
      "peerDependencies": {
-        "vite": "^3.0.0 || ^4.0.0"
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
      },
      "peerDependenciesMeta": {
        "vite": {
@@ -4235,6 +4311,12 @@
      "integrity": "sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==",
      "dev": true
    },
+    "@fastify/busboy": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.0.tgz",
+      "integrity": "sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA==",
+      "dev": true
+    },
    "@floating-ui/core": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz",
@@ -4330,6 +4412,26 @@
        }
      }
    },
+    "@maxim_mazurok/gapi.client.discovery-v1": {
+      "version": "0.1.20200806",
+      "resolved": "https://registry.npmjs.org/@maxim_mazurok/gapi.client.discovery-v1/-/gapi.client.discovery-v1-0.1.20200806.tgz",
+      "integrity": "sha512-Wl6UfmZVDdWbY3PUu8E2ULk9RPLjnMqp/iOA4tcK8Ne+U/GmlnWP/e34IaZNGArfl7iXJNOG+/3Rj9L9jQyF9Q==",
+      "dev": true,
+      "requires": {
+        "@types/gapi.client": "*",
+        "@types/gapi.client.discovery-v1": "*"
+      }
+    },
+    "@maxim_mazurok/gapi.client.drive-v3": {
+      "version": "0.0.20240304",
+      "resolved": "https://registry.npmjs.org/@maxim_mazurok/gapi.client.drive-v3/-/gapi.client.drive-v3-0.0.20240304.tgz",
+      "integrity": "sha512-PuGvDvRE70XsyUqnQCq5M2VJ7/E7u5pDvHZfBXunVlf5mYmkyAdbZg+ygJDJ2243wWpUXjmEcuxLDY2yamIq4g==",
+      "dev": true,
+      "requires": {
+        "@types/gapi.client": "*",
+        "@types/gapi.client.discovery-v1": "*"
+      }
+    },
    "@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4378,44 +4480,45 @@
      }
    },
    "@sveltejs/kit": {
-      "version": "1.22.3",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.22.3.tgz",
-      "integrity": "sha512-IpHD5wvuoOIHYaHQUBJ1zERD2Iz+fB/rBXhXjl8InKw6X4VKE9BSus+ttHhE7Ke+Ie9ecfilzX8BnWE3FeQyng==",
+      "version": "1.30.3",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.30.3.tgz",
+      "integrity": "sha512-0DzVXfU4h+tChFvoc8C61IqErCyskD4ydSIDjpKS2lYlEzIYrtYrY7juSqACFxqcvZAnOEXvSY+zZ8br0+ZMMg==",
      "dev": true,
      "requires": {
-        "@sveltejs/vite-plugin-svelte": "^2.4.1",
+        "@sveltejs/vite-plugin-svelte": "^2.5.0",
        "@types/cookie": "^0.5.1",
        "cookie": "^0.5.0",
        "devalue": "^4.3.1",
        "esm-env": "^1.0.0",
        "kleur": "^4.1.5",
        "magic-string": "^0.30.0",
-        "mime": "^3.0.0",
+        "mrmime": "^1.0.1",
        "sade": "^1.8.1",
        "set-cookie-parser": "^2.6.0",
        "sirv": "^2.0.2",
-        "undici": "~5.22.0"
+        "tiny-glob": "^0.2.9",
+        "undici": "~5.26.2"
      }
    },
    "@sveltejs/vite-plugin-svelte": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.4.3.tgz",
-      "integrity": "sha512-NY2h+B54KHZO3kDURTdARqthn6D4YSIebtfW75NvZ/fwyk4G+AJw3V/i0OBjyN4406Ht9yZcnNWMuRUFnDNNiA==",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.5.3.tgz",
+      "integrity": "sha512-erhNtXxE5/6xGZz/M9eXsmI7Pxa6MS7jyTy06zN3Ck++ldrppOnOlJwHHTsMC7DHDQdgUp4NAc4cDNQ9eGdB/w==",
      "dev": true,
      "requires": {
-        "@sveltejs/vite-plugin-svelte-inspector": "^1.0.3",
+        "@sveltejs/vite-plugin-svelte-inspector": "^1.0.4",
        "debug": "^4.3.4",
        "deepmerge": "^4.3.1",
        "kleur": "^4.1.5",
-        "magic-string": "^0.30.1",
-        "svelte-hmr": "^0.15.2",
+        "magic-string": "^0.30.3",
+        "svelte-hmr": "^0.15.3",
        "vitefu": "^0.2.4"
      }
    },
    "@sveltejs/vite-plugin-svelte-inspector": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.3.tgz",
-      "integrity": "sha512-Khdl5jmmPN6SUsVuqSXatKpQTMIifoQPDanaxC84m9JxIibWvSABJyHpyys0Z+1yYrxY5TTEQm+6elh0XCMaOA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz",
+      "integrity": "sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==",
      "dev": true,
      "requires": {
        "debug": "^4.3.4"
@@ -4433,6 +4536,45 @@
      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
      "dev": true
    },
+    "@types/gapi": {
+      "version": "0.0.47",
+      "resolved": "https://registry.npmjs.org/@types/gapi/-/gapi-0.0.47.tgz",
+      "integrity": "sha512-/ZsLuq6BffMgbKMtZyDZ8vwQvTyKhKQ1G2K6VyWCgtHHhfSSXbk4+4JwImZiTjWNXfI2q1ZStAwFFHSkNoTkHA=="
+    },
+    "@types/gapi.client": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/gapi.client/-/gapi.client-1.0.8.tgz",
+      "integrity": "sha512-qJQUmmumbYym3Amax0S8CVzuSngcXsC1fJdwRS2zeW5lM63zXkw4wJFP+bG0jzgi0R6EsJKoHnGNVTDbOyG1ng==",
+      "dev": true
+    },
+    "@types/gapi.client.discovery-v1": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@types/gapi.client.discovery-v1/-/gapi.client.discovery-v1-0.0.4.tgz",
+      "integrity": "sha512-uevhRumNE65F5mf2gABLaReOmbFSXONuzFZjNR3dYv6BmkHg+wciubHrfBAsp3554zNo3Dcg6dUAlwMqQfpwjQ==",
+      "dev": true,
+      "requires": {
+        "@maxim_mazurok/gapi.client.discovery-v1": "latest"
+      }
+    },
+    "@types/gapi.client.drive-v3": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@types/gapi.client.drive-v3/-/gapi.client.drive-v3-0.0.4.tgz",
+      "integrity": "sha512-jE37dJ0EzAdY0aJPFOp20xmec/aO0P4HtUIA9k07RMPyedFDOcuMlSac1r0PklwQdgXF7BHaMoObNHNAnwSQUQ==",
+      "dev": true,
+      "requires": {
+        "@maxim_mazurok/gapi.client.drive-v3": "latest"
+      }
+    },
+    "@types/google.accounts": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@types/google.accounts/-/google.accounts-0.0.14.tgz",
+      "integrity": "sha512-HqIVkVzpiLWhlajhQQd4rIV7czanFvXblJI2J1fSrL+VKQuQwwZ63m35D/mI0flsqKE6p/hNrAG0Yn4FD6JvNA=="
+    },
+    "@types/google.picker": {
+      "version": "0.0.42",
+      "resolved": "https://registry.npmjs.org/@types/google.picker/-/google.picker-0.0.42.tgz",
+      "integrity": "sha512-7Ut1zDLCGNhyN+0fuIcncpBP9eUsIjLKz6qmVKvdkBUi1EzAskxTcIZcU/w2cO1ens/hEXlqeLd5qAKs/Kqqyw=="
+    },
    "@types/json-schema": {
      "version": "7.0.12",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
@@ -4550,6 +4692,14 @@
        "eslint-visitor-keys": "^3.3.0"
      }
    },
+    "@vercel/analytics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.1.0.tgz",
+      "integrity": "sha512-k5ePYZPxitxxD1eJenPUUuH3qK+EtaA9OVD3oO0BRbyT/LarmZF0qdkptRSidip1arQxsTEIWvHbTuj1oksl+Q==",
+      "requires": {
+        "server-only": "^0.0.1"
+      }
+    },
    "@yr/monotone-cubic-spline": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
@@ -4744,15 +4894,6 @@
      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
      "dev": true
    },
-    "busboy": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
-      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
-      "dev": true,
-      "requires": {
-        "streamsearch": "^1.1.0"
-      }
-    },
    "callsites": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -4766,9 +4907,9 @@
      "dev": true
    },
    "caniuse-lite": {
-      "version": "1.0.30001525",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001525.tgz",
-      "integrity": "sha512-/3z+wB4icFt3r0USMwxujAqRvaD/B7rvGTsKhbhSQErVrJvkZCLhgNLJxU8MevahQVH6hCU9FsHdNUFbiwmE7Q==",
+      "version": "1.0.30001597",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001597.tgz",
+      "integrity": "sha512-7LjJvmQU6Sj7bL0j5b5WY/3n7utXUJvAe1lxhsHDbLmwX9mdL86Yjtr+5SRCyf8qME4M7pU2hswj0FpyBVCv9w==",
      "dev": true
    },
    "chalk": {
@@ -5385,6 +5526,12 @@
        "type-fest": "^0.20.2"
      }
    },
+    "globalyzer": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
+      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==",
+      "dev": true
+    },
    "globby": {
      "version": "11.1.0",
      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -5399,6 +5546,12 @@
        "slash": "^3.0.0"
      }
    },
+    "globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+      "dev": true
+    },
    "graceful-fs": {
      "version": "4.2.11",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -5628,9 +5781,9 @@
      }
    },
    "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.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
      "dev": true,
      "requires": {
        "@jridgewell/sourcemap-codec": "^1.4.15"
@@ -5658,12 +5811,6 @@
        "picomatch": "^2.3.1"
      }
    },
-    "mime": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
-      "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
-      "dev": true
-    },
    "min-indent": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -5730,9 +5877,9 @@
      }
    },
    "nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
      "dev": true
    },
    "natural-compare": {
@@ -5908,12 +6055,12 @@
      "dev": true
    },
    "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.33",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
+      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
      "dev": true,
      "requires": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
        "picocolors": "^1.0.0",
        "source-map-js": "^1.0.2"
      }
@@ -6069,9 +6216,9 @@
      }
    },
    "rollup": {
-      "version": "3.27.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.27.0.tgz",
-      "integrity": "sha512-aOltLCrYZ0FhJDm7fCqwTjIUEVjWjcydKBV/Zeid6Mn8BWgDCUBBWT5beM5ieForYNo/1ZHuGJdka26kvQ3Gzg==",
+      "version": "3.29.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
+      "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
      "dev": true,
      "requires": {
        "fsevents": "~2.3.2"
@@ -6138,6 +6285,11 @@
        "lru-cache": "^6.0.0"
      }
    },
+    "server-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz",
+      "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA=="
+    },
    "set-cookie-parser": {
      "version": "2.6.0",
      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
@@ -6194,12 +6346,6 @@
      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
      "dev": true
    },
-    "streamsearch": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
-      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
-      "dev": true
-    },
    "strip-ansi": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -6344,9 +6490,9 @@
      }
    },
    "svelte-hmr": {
-      "version": "0.15.2",
-      "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.2.tgz",
-      "integrity": "sha512-q/bAruCvFLwvNbeE1x3n37TYFb3mTBJ6TrCq6p2CoFbSTNhDE9oAtEfpy+wmc9So8AG0Tja+X0/mJzX9tSfvIg==",
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",
+      "integrity": "sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==",
      "dev": true,
      "requires": {}
    },
@@ -6506,6 +6652,16 @@
        "thenify": ">= 3.1.0 < 4"
      }
    },
+    "tiny-glob": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
+      "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
+      "dev": true,
+      "requires": {
+        "globalyzer": "0.1.0",
+        "globrex": "^0.1.2"
+      }
+    },
    "to-regex-range": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -6572,12 +6728,12 @@
      "dev": true
    },
    "undici": {
-      "version": "5.22.1",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.22.1.tgz",
-      "integrity": "sha512-Ji2IJhFXZY0x/0tVBXeQwgPlLWw13GVzpsWPQ3rV50IFMMof2I55PZZxtm4P6iNq+L5znYN9nSTAq0ZyE6lSJw==",
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.26.5.tgz",
+      "integrity": "sha512-cSb4bPFd5qgR7qr2jYAi0hlX9n5YKK2ONKkLFkxl+v/9BvC0sOpZjBHDBSXc5lWAf5ty9oZdRXytBIHzgUcerw==",
      "dev": true,
      "requires": {
-        "busboy": "^1.6.0"
+        "@fastify/busboy": "^2.0.0"
      }
    },
    "update-browserslist-db": {
@@ -6606,21 +6762,21 @@
      "dev": true
    },
    "vite": {
-      "version": "4.4.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz",
-      "integrity": "sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==",
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
+      "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
      "dev": true,
      "requires": {
        "esbuild": "^0.18.10",
        "fsevents": "~2.3.2",
-        "postcss": "^8.4.26",
-        "rollup": "^3.25.2"
+        "postcss": "^8.4.27",
+        "rollup": "^3.27.1"
      }
    },
    "vitefu": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.4.tgz",
-      "integrity": "sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==",
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
+      "integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
      "dev": true,
      "requires": {}
    },
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
  "devDependencies": {
    "@sveltejs/adapter-auto": "^2.0.0",
    "@sveltejs/kit": "^1.20.4",
+    "@types/gapi.client.drive-v3": "^0.0.4",
    "@typescript-eslint/eslint-plugin": "^5.45.0",
    "@typescript-eslint/parser": "^5.45.0",
    "autoprefixer": "^10.4.14",
@@ -36,6 +37,10 @@
  },
  "type": "module",
  "dependencies": {
+    "@types/gapi": "^0.0.47",
+    "@types/google.accounts": "^0.0.14",
+    "@types/google.picker": "^0.0.42",
+    "@vercel/analytics": "^1.1.0",
    "@zip.js/zip.js": "^2.7.20",
    "dexie": "^4.0.1-alpha.25",
    "panzoom": "^9.4.3",
--- a/src/app.html
+++ b/src/app.html
@@ -3,14 +3,25 @@
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <link rel="manifest" crossorigin="use-credentials" href="manifest.json">
+    <link rel="manifest" crossorigin="use-credentials" href="manifest.json" />
    <meta
      name="viewport"
      content="width=device-width, height=device-height,initial-scale=1, minimum-scale=1, user-scalable=no"
    />
+    <script src="https://apis.google.com/js/api.js"></script>
+    <script src="https://accounts.google.com/gsi/client"></script>
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover" class="bg-white dark:bg-gray-950 dark:text-white">
-    <div style="display: contents">%sveltekit.body%</div>
+    <div
+      id="popupAbout"
+      class="pageContainer"
+      style="
+        display: contents;
+        background-image: url('https://reader.mokuro.app/_app/immutable/assets/icon.06fcfdd6.webp');
+      "
+    >
+      %sveltekit.body%
+    </div>
  </body>
 </html>
--- a/src/lib/anki-connect/cropper.ts
+++ b/src/lib/anki-connect/cropper.ts
@@ -10,7 +10,7 @@ type CropperModal = {

 export const cropperStore = writable<CropperModal | undefined>(undefined);

-export function showCropper(image: string, sentence: string) {
+export function showCropper(image: string, sentence?: string) {
  cropperStore.set({
    open: true,
    image,
--- a/src/lib/anki-connect/index.ts
+++ b/src/lib/anki-connect/index.ts
@@ -64,7 +64,7 @@ export async function imageToWebp(source: File) {
  }
 }

-export async function updateLastCard(imageData: string | null | undefined, sentence: string) {
+export async function updateLastCard(imageData: string | null | undefined, sentence?: string) {
  const {
    overwriteImage,
    enabled,
@@ -88,7 +88,7 @@ export async function updateLastCard(imageData: string | null | undefined, sente

  const fields: Record<string, any> = {};

-  if (grabSentence) {
+  if (grabSentence && sentence) {
    fields[sentenceField] = sentence;
  }

--- a/src/lib/catalog/index.ts
+++ b/src/lib/catalog/index.ts
@@ -1,4 +1,30 @@
-import { db } from '$lib/catalog/db';
+import { page } from '$app/stores';
+import { db, type Catalog } from '$lib/catalog/db';
+import type { Volume } from '$lib/types';
 import { liveQuery } from 'dexie';
+import { derived, type Readable } from 'svelte/store';

 export const catalog = liveQuery(() => db.catalog.toArray());
+
+function sortManga(a: Volume, b: Volume) {
+  if (a.volumeName < b.volumeName) {
+    return -1;
+  }
+  if (a.volumeName > b.volumeName) {
+    return 1;
+  }
+  return 0;
+}
+
+
+export const manga = derived([page, catalog as unknown as Readable<Catalog[]>], ([$page, $catalog]) => {
+  if ($page && $catalog) {
+    return $catalog.find((item) => item.id === $page.params.manga)?.manga.sort(sortManga)
+  }
+});
+
+export const volume = derived(([page, manga]), ([$page, $manga]) => {
+  if ($page && $manga) {
+    return $manga.find((item) => item.mokuroData.volume_uuid === $page.params.volume)
+  }
+})
--- a/src/lib/components/Catalog.svelte
+++ b/src/lib/components/Catalog.svelte
@@ -1,17 +1,78 @@
 <script lang="ts">
  import { catalog } from '$lib/catalog';
+  import { Button, Search, Listgroup } from 'flowbite-svelte';
  import CatalogItem from './CatalogItem.svelte';
  import Loader from './Loader.svelte';
+  import { GridOutline, SortOutline, ListOutline } from 'flowbite-svelte-icons';
+  import { miscSettings, updateMiscSetting } from '$lib/settings';
+  import CatalogListItem from './CatalogListItem.svelte';
+
+  $: sortedCatalog = $catalog
+    ?.sort((a, b) => {
+      if ($miscSettings.gallerySorting === 'ASC') {
+        return a.manga[0].mokuroData.title.localeCompare(b.manga[0].mokuroData.title);
+      } else {
+        return b.manga[0].mokuroData.title.localeCompare(a.manga[0].mokuroData.title);
+      }
+    })
+    .filter((item) => {
+      return item.manga[0].mokuroData.title.toLowerCase().indexOf(search.toLowerCase()) !== -1;
+    });
+
+  let search = '';
+
+  function onLayout() {
+    if ($miscSettings.galleryLayout === 'list') {
+      updateMiscSetting('galleryLayout', 'grid');
+    } else {
+      updateMiscSetting('galleryLayout', 'list');
+    }
+  }
+
+  function onOrder() {
+    if ($miscSettings.gallerySorting === 'ASC') {
+      updateMiscSetting('gallerySorting', 'DESC');
+    } else {
+      updateMiscSetting('gallerySorting', 'ASC');
+    }
+  }
 </script>

 {#if $catalog}
  {#if $catalog.length > 0}
    <div class="flex flex-col gap-5">
-      <div class="flex sm:flex-row flex-col gap-5 flex-wrap justify-center sm:justify-start">
-        {#each $catalog as { id } (id)}
-          <CatalogItem {id} />
-        {/each}
+      <div class="flex gap-1 py-2">
+        <Search bind:value={search} />
+        <Button size="sm" color="alternative" on:click={onLayout}>
+          {#if $miscSettings.galleryLayout === 'list'}
+            <GridOutline />
+          {:else}
+            <ListOutline />
+          {/if}
+        </Button>
+        <Button size="sm" color="alternative" on:click={onOrder}>
+          <SortOutline />
+        </Button>
      </div>
+      {#if search && sortedCatalog.length === 0}
+        <div class="text-center p-20">
+          <p>No results found.</p>
+        </div>
+      {:else}
+        <div class="flex sm:flex-row flex-col gap-5 flex-wrap justify-center sm:justify-start">
+          {#if $miscSettings.galleryLayout === 'grid'}
+            {#each sortedCatalog as { id } (id)}
+              <CatalogItem {id} />
+            {/each}
+          {:else}
+            <Listgroup active class="w-full">
+              {#each sortedCatalog as { id } (id)}
+                <CatalogListItem {id} />
+              {/each}
+            </Listgroup>
+          {/if}
+        </div>
+      {/if}
    </div>
  {:else}
    <div class="text-center p-20">
--- a/src/lib/components/CatalogItem.svelte
+++ b/src/lib/components/CatalogItem.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
  import { catalog } from '$lib/catalog';
-  import { P } from 'flowbite-svelte';

  export let id: string;

--- a/src/lib/components/CatalogListItem.svelte
+++ b/src/lib/components/CatalogListItem.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { catalog } from '$lib/catalog';
+  import { ListgroupItem } from 'flowbite-svelte';
+
+  export let id: string;
+
+  $: manga = $catalog?.find((item) => item.id === id)?.manga[0];
+</script>
+
+{#if manga}
+  <div>
+    <ListgroupItem>
+      <a href={id} class="h-full w-full">
+        <div class="flex justify-between items-center">
+          <p class="font-semibold text-white">{manga.mokuroData.title}</p>
+          <img
+            src={URL.createObjectURL(Object.values(manga.files)[0])}
+            alt="img"
+            class="object-contain w-[50px] h-[70px] bg-black border-gray-900 border"
+          />
+        </div>
+      </a>
+    </ListgroupItem>
+  </div>
+{/if}
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { Navbar, NavBrand } from 'flowbite-svelte';
-  import { UserSettingsSolid, UploadSolid } from 'flowbite-svelte-icons';
-  import { afterNavigate } from '$app/navigation';
+  import { UserSettingsSolid, UploadSolid, CloudArrowUpOutline } from 'flowbite-svelte-icons';
+  import { afterNavigate, goto } from '$app/navigation';
  import { page } from '$app/stores';
  import Settings from './Settings/Settings.svelte';
  import UploadModal from './UploadModal.svelte';
@@ -37,6 +37,7 @@
    <div class="flex md:order-2 gap-5">
      <UserSettingsSolid class="hover:text-primary-700" on:click={openSettings} />
      <UploadSolid class="hover:text-primary-700" on:click={() => (uploadModalOpen = true)} />
+      <CloudArrowUpOutline class="hover:text-primary-700" on:click={() => goto('/cloud')} />
    </div>
  </Navbar>
 </div>
--- a/src/lib/components/Reader/Cropper.svelte
+++ b/src/lib/components/Reader/Cropper.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { afterNavigate } from '$app/navigation';
+  import { afterNavigate, beforeNavigate } from '$app/navigation';
  import { cropperStore, getCroppedImg, updateLastCard, type Pixels } from '$lib/anki-connect';
+  import { settings } from '$lib/settings';
  import { Button, Modal, Spinner } from 'flowbite-svelte';
  import { onMount } from 'svelte';
  import Cropper from 'svelte-easy-crop';
@@ -13,6 +14,13 @@
    close();
  });

+  beforeNavigate((nav) => {
+    if (open) {
+      nav.cancel();
+      close();
+    }
+  });
+
  onMount(() => {
    cropperStore.subscribe((value) => {
      if (value) {
@@ -27,7 +35,7 @@
  }

  async function onCrop() {
-    if ($cropperStore?.image && $cropperStore?.sentence && pixels) {
+    if ($cropperStore?.image && pixels) {
      loading = true;
      const imageData = await getCroppedImg($cropperStore.image, pixels);
      updateLastCard(imageData, $cropperStore.sentence);
@@ -43,7 +51,7 @@
 <Modal title="Crop image" bind:open on:{close}>
  {#if $cropperStore?.image && !loading}
    <div class=" flex flex-col gap-2">
-      <div class="relative w-full h-[55svh] sm:h-[70svh]">
+      <div class="relative w-full h-[55svh] sm:h-[65svh]">
        <Cropper
          zoomSpeed={0.5}
          maxZoom={10}
@@ -51,6 +59,12 @@
          on:cropcomplete={onCropComplete}
        />
      </div>
+      {#if $settings.ankiConnectSettings.grabSentence && $cropperStore?.sentence}
+        <p>
+          <b>Sentence:</b>
+          {$cropperStore?.sentence}
+        </p>
+      {/if}
      <Button on:click={onCrop}>Crop</Button>
      <Button on:click={close} outline color="light">Close</Button>
    </div>
--- a/src/lib/components/Reader/MangaPage.svelte
+++ b/src/lib/components/Reader/MangaPage.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import type { Page } from '$lib/types';
-  import { onMount } from 'svelte';
+  import { afterUpdate, onMount, onDestroy } from 'svelte';
  import TextBoxes from './TextBoxes.svelte';
  import { zoomDefault } from '$lib/panzoom';

@@ -9,7 +9,26 @@

  $: url = src ? `url(${URL.createObjectURL(src)})` : '';

+  let legacy: HTMLElement | null;
+
  onMount(() => {
+    legacy = document.getElementById('popupAbout');
+    zoomDefault();
+
+    return () => {
+      setTimeout(() => {
+        zoomDefault();
+      }, 10);
+    };
+  });
+
+  $: {
+    if (legacy) {
+      legacy.style.backgroundImage = url;
+    }
+  }
+
+  afterUpdate(() => {
    zoomDefault();
  });
 </script>
--- a/src/lib/components/Reader/QuickActions.svelte
+++ b/src/lib/components/Reader/QuickActions.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { toggleFullScreen, zoomFitToScreen } from '$lib/panzoom';
+  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
+  import { settings } from '$lib/settings';
+  import {
+    ArrowLeftOutline,
+    ArrowRightOutline,
+    CompressOutline,
+    ImageOutline,
+    ZoomOutOutline
+  } from 'flowbite-svelte-icons';
+  import { imageToWebp, showCropper, updateLastCard } from '$lib/anki-connect';
+  import { promptConfirmation } from '$lib/util';
+
+  export let left: (_e: any, ingoreTimeOut?: boolean) => void;
+  export let right: (_e: any, ingoreTimeOut?: boolean) => void;
+  export let src1: File;
+  export let src2: File | undefined;
+
+  let open = false;
+
+  function handleZoom() {
+    zoomFitToScreen();
+    open = false;
+  }
+
+  function handleLeft(_e: Event) {
+    left(_e, true);
+    open = false;
+  }
+
+  function handleRight(_e: Event) {
+    right(_e, true);
+    open = false;
+  }
+
+  async function onUpdateCard(src: File | undefined) {
+    if ($settings.ankiConnectSettings.enabled && src) {
+      if ($settings.ankiConnectSettings.cropImage) {
+        showCropper(URL.createObjectURL(src));
+      } else {
+        promptConfirmation('Add image to last created anki card?', async () => {
+          const imageData = await imageToWebp(src);
+          updateLastCard(imageData);
+        });
+      }
+    }
+    open = false;
+  }
+</script>
+
+{#if $settings.quickActions}
+  <SpeedDial
+    tooltip="none"
+    trigger="click"
+    defaultClass="absolute end-3 bottom-3 z-50"
+    color="transparent"
+    bind:open
+  >
+    {#if $settings.ankiConnectSettings.enabled}
+      <SpeedDialButton name={src2 ? '1' : undefined} on:click={() => onUpdateCard(src1)}>
+        <ImageOutline />
+      </SpeedDialButton>
+    {/if}
+    {#if $settings.ankiConnectSettings.enabled && src2}
+      <SpeedDialButton name="2" on:click={() => onUpdateCard(src2)}>
+        <ImageOutline />
+      </SpeedDialButton>
+    {/if}
+    <SpeedDialButton on:click={toggleFullScreen}>
+      <CompressOutline />
+    </SpeedDialButton>
+    <SpeedDialButton on:click={handleZoom}>
+      <ZoomOutOutline />
+    </SpeedDialButton>
+    <SpeedDialButton on:click={handleRight}>
+      <ArrowRightOutline />
+    </SpeedDialButton>
+    <SpeedDialButton on:click={handleLeft}>
+      <ArrowLeftOutline />
+    </SpeedDialButton>
+  </SpeedDial>
+{/if}
--- a/src/lib/components/Reader/Reader.svelte
+++ b/src/lib/components/Reader/Reader.svelte
@@ -8,7 +8,7 @@
    zoomFitToScreen
  } from '$lib/panzoom';
  import { progress, settings, updateProgress, type VolumeSettings } from '$lib/settings';
-  import { clamp, debounce } from '$lib/util';
+  import { clamp, debounce, fireExstaticEvent } from '$lib/util';
  import { Input, Popover, Range, Spinner } from 'flowbite-svelte';
  import MangaPage from './MangaPage.svelte';
  import {
@@ -21,6 +21,8 @@
  import { page as pageStore } from '$app/stores';
  import SettingsButton from './SettingsButton.svelte';
  import { getCharCount } from '$lib/util/count-chars';
+  import QuickActions from './QuickActions.svelte';
+  import { beforeNavigate } from '$app/navigation';

  // TODO: Refactor this whole mess
  export let volumeSettings: VolumeSettings;
@@ -64,11 +66,13 @@
        return;
      }
      const pageClamped = clamp(newPage, 1, pages?.length);
+      const { charCount } = getCharCount(pages, pageClamped);
+
      updateProgress(
        volume.mokuroData.volume_uuid,
        pageClamped,
-        getCharCount(pages, pageClamped) || 0,
-        pageClamped === pages.length
+        charCount,
+        pageClamped === pages.length || pageClamped === pages.length - 1
      );
      zoomDefault();
    }
@@ -110,14 +114,19 @@

    switch (action) {
      case 'ArrowLeft':
-      case 'ArrowUp':
-      case 'PageUp':
        left(event, true);
        return;
+      case 'ArrowUp':
+      case 'PageUp':
+        changePage(page - navAmount, true);
+        return;
      case 'ArrowRight':
+        right(event, true);
+        return;
      case 'ArrowDown':
      case 'PageDown':
-        right(event, true);
+      case 'Space':
+        changePage(page + navAmount, true);
        return;
      case 'Home':
        changePage(1, true);
@@ -127,11 +136,6 @@
          changePage(pages.length, true);
        }
        return;
-      case 'Space':
-        if (pages && page + 1 <= pages.length) {
-          changePage(page + 1, true);
-        }
-        return;
      case 'KeyF':
        toggleFullScreen();
        return;
@@ -140,8 +144,9 @@
    }
  }

-  $: charCount = $settings.charCount ? getCharCount(pages, page) : 0;
-  $: maxCharCount = getCharCount(pages);
+  $: charCount = $settings.charCount ? getCharCount(pages, page).charCount : 0;
+  $: maxCharCount = getCharCount(pages).charCount;
+  $: totalLineCount = getCharCount(pages).lineCount;

  let startX = 0;
  let startY = 0;
@@ -190,13 +195,47 @@
      const { clientX, clientY } = event;
      const { scale } = $panzoomStore.getTransform();

-      if (scale < 0.5) {
-        $panzoomStore.zoomTo(clientX, clientY, 3);
+      if (scale < 1) {
+        $panzoomStore.zoomTo(clientX, clientY, 1.5);
      } else {
        zoomFitToScreen();
      }
    }
  }
+
+  $: {
+    if (volume) {
+      const { charCount, lineCount } = getCharCount(pages, page);
+
+      fireExstaticEvent('mokuro-reader:page.change', {
+        title: volume.mokuroData.title,
+        volumeName: volume.mokuroData.volume,
+        currentCharCount: charCount,
+        currentPage: page,
+        totalPages: pages.length,
+        totalCharCount: maxCharCount || 0,
+        currentLineCount: lineCount,
+        totalLineCount
+      });
+    }
+  }
+
+  beforeNavigate(() => {
+    if (volume) {
+      const { charCount, lineCount } = getCharCount(pages, page);
+
+      fireExstaticEvent('mokuro-reader:reader.closed', {
+        title: volume.mokuroData.title,
+        volumeName: volume.mokuroData.volume,
+        currentCharCount: charCount,
+        currentPage: page,
+        totalPages: pages.length,
+        totalCharCount: maxCharCount || 0,
+        currentLineCount: lineCount,
+        totalLineCount
+      });
+    }
+  });
 </script>

 <svelte:window
@@ -208,8 +247,14 @@
 <svelte:head>
  <title>{volume?.mokuroData.volume || 'Volume'}</title>
 </svelte:head>
-<SettingsButton />
 {#if volume && pages}
+  <QuickActions
+    {left}
+    {right}
+    src1={Object.values(volume?.files)[index]}
+    src2={!volumeSettings.singlePageView ? Object.values(volume?.files)[index + 1] : undefined}
+  />
+  <SettingsButton />
  <Cropper />
  <Popover placement="bottom" trigger="click" triggeredBy="#page-num" class="z-20 w-full max-w-xs">
    <div class="flex flex-col gap-3">
@@ -261,11 +306,13 @@
    <Panzoom>
      <button
        class="h-full fixed -left-full z-10 w-full hover:bg-slate-400 opacity-[0.01]"
+        style:margin-left={`${$settings.edgeButtonWidth}px`}
        on:mousedown={mouseDown}
        on:mouseup={left}
      />
      <button
        class="h-full fixed -right-full z-10 w-full hover:bg-slate-400 opacity-[0.01]"
+        style:margin-right={`${$settings.edgeButtonWidth}px`}
        on:mousedown={mouseDown}
        on:mouseup={right}
      />
@@ -284,6 +331,7 @@
        class:flex-row-reverse={!volumeSettings.rightToLeft}
        on:dblclick={onDoubleTap}
        role="none"
+        id="manga-panel"
      >
        {#if showSecondPage()}
          <MangaPage page={pages[index + 1]} src={Object.values(volume?.files)[index + 1]} />
@@ -297,11 +345,13 @@
      on:mousedown={mouseDown}
      on:mouseup={left}
      class="left-0 top-0 absolute h-full w-16 hover:bg-slate-400 opacity-[0.01]"
+      style:width={`${$settings.edgeButtonWidth}px`}
    />
    <button
      on:mousedown={mouseDown}
      on:mouseup={right}
      class="right-0 top-0 absolute h-full w-16 hover:bg-slate-400 opacity-[0.01]"
+      style:width={`${$settings.edgeButtonWidth}px`}
    />
  {/if}
 {:else}
--- a/src/lib/components/Reader/TextBoxes.svelte
+++ b/src/lib/components/Reader/TextBoxes.svelte
@@ -7,38 +7,46 @@
  export let page: Page;
  export let src: File;

-  $: textBoxes = page.blocks.map((block) => {
-    const { img_height, img_width } = page;
-    const { box, font_size, lines, vertical } = block;
+  $: textBoxes = page.blocks
+    .map((block) => {
+      const { img_height, img_width } = page;
+      const { box, font_size, lines, vertical } = block;

-    let [_xmin, _ymin, _xmax, _ymax] = box;
+      let [_xmin, _ymin, _xmax, _ymax] = box;

-    const xmin = clamp(_xmin, 0, img_width);
-    const ymin = clamp(_ymin, 0, img_height);
-    const xmax = clamp(_xmax, 0, img_width);
-    const ymax = clamp(_ymax, 0, img_height);
+      const xmin = clamp(_xmin, 0, img_width);
+      const ymin = clamp(_ymin, 0, img_height);
+      const xmax = clamp(_xmax, 0, img_width);
+      const ymax = clamp(_ymax, 0, img_height);

-    const width = xmax - xmin;
-    const height = ymax - ymin;
+      const width = xmax - xmin;
+      const height = ymax - ymin;
+      const area = width * height;

-    const textBox = {
-      left: `${xmin}px`,
-      top: `${ymin}px`,
-      width: `${width}px`,
-      height: `${height}px`,
-      fontSize: $settings.fontSize === 'auto' ? `${font_size}px` : `${$settings.fontSize}pt`,
-      writingMode: vertical ? 'vertical-rl' : 'horizontal-tb',
-      lines
-    };
+      const textBox = {
+        left: `${xmin}px`,
+        top: `${ymin}px`,
+        width: `${width}px`,
+        height: `${height}px`,
+        fontSize: $settings.fontSize === 'auto' ? `${font_size}px` : `${$settings.fontSize}pt`,
+        writingMode: vertical ? 'vertical-rl' : 'horizontal-tb',
+        lines,
+        area
+      };

-    return textBox;
-  });
+      return textBox;
+    })
+    .sort(({ area: a }, { area: b }) => {
+      return b - a;
+    });

  $: fontWeight = $settings.boldFont ? 'bold' : '400';
  $: display = $settings.displayOCR ? 'block' : 'none';
  $: border = $settings.textBoxBorders ? '1px solid red' : 'none';
  $: contenteditable = $settings.textEditable;

+  $: triggerMethod = $settings.ankiConnectSettings.triggerMethod || 'both';
+
  async function onUpdateCard(lines: string[]) {
    if ($settings.ankiConnectSettings.enabled) {
      const sentence = lines.join(' ');
@@ -54,16 +62,23 @@
  }

  function onContextMenu(event: Event, lines: string[]) {
-    if ($settings.ankiConnectSettings.enabled) {
+    if (triggerMethod === 'both' || triggerMethod === 'rightClick') {
+      event.preventDefault();
+      onUpdateCard(lines);
+    }
+  }
+
+  function onDoubleTap(event: Event, lines: string[]) {
+    if (triggerMethod === 'both' || triggerMethod === 'doubleTap') {
      event.preventDefault();
      onUpdateCard(lines);
    }
  }
 </script>

-{#each textBoxes as { fontSize, height, left, lines, top, width, writingMode }, index (`text-box-${index}`)}
+{#each textBoxes as { fontSize, height, left, lines, top, width, writingMode }, index (`textBox-${index}`)}
  <div
-    class="text-box"
+    class="textBox"
    style:width
    style:height
    style:left
@@ -75,7 +90,7 @@
    style:writing-mode={writingMode}
    role="none"
    on:contextmenu={(e) => onContextMenu(e, lines)}
-    on:dblclick={() => onUpdateCard(lines)}
+    on:dblclick={(e) => onDoubleTap(e, lines)}
    {contenteditable}
  >
    {#each lines as line}
@@ -85,7 +100,7 @@
 {/each}

 <style>
-  .text-box {
+  .textBox {
    color: black;
    padding: 0;
    position: absolute;
@@ -96,13 +111,13 @@
    z-index: 11;
  }

-  .text-box:focus,
-  .text-box:hover {
+  .textBox:focus,
+  .textBox:hover {
    background: rgb(255, 255, 255);
    border: 1px solid rgba(0, 0, 0, 0);
  }

-  .text-box p {
+  .textBox p {
    display: none;
    white-space: nowrap;
    letter-spacing: 0.1em;
@@ -113,8 +128,8 @@
    z-index: 11;
  }

-  .text-box:focus p,
-  .text-box:hover p {
+  .textBox:focus p,
+  .textBox:hover p {
    display: table;
  }
 </style>
--- a/src/lib/components/Reader/Timer.svelte
+++ b/src/lib/components/Reader/Timer.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { startCount, volumeStats } from '$lib/settings';
+
+  export let count: number | undefined;
+  export let volumeId: string;
+
+  $: active = Boolean(count);
+
+  function onClick() {
+    if (count) {
+      clearInterval(count);
+      count = undefined;
+    } else {
+      count = startCount(volumeId);
+    }
+  }
+</script>
+
+<button
+  class:text-primary-700={!active}
+  class="mix-blend-difference z-10 fixed opacity-50 right-20 top-5 p-10 m-[-2.5rem]"
+  on:click={onClick}
+>
+  <p>
+    {active ? 'Active' : 'Paused'} | Minutes read: {$volumeStats?.timeReadInMinutes}
+  </p>
+</button>
--- a/src/lib/components/Settings/About.svelte
+++ b/src/lib/components/Settings/About.svelte
@@ -1,15 +1,8 @@
 <script lang="ts">
  import { READER_VERSION } from '$lib/consts';
-  import { showSnackbar } from '$lib/util';
+  import { toClipboard } from '$lib/util';
  import { A, AccordionItem, Badge, Helper, Span } from 'flowbite-svelte';
  import { GithubSolid } from 'flowbite-svelte-icons';
-
-  function toClipboard() {
-    navigator.clipboard.writeText(
-      'pip install git+https://github.com/kha-white/mokuro.git@web-reader'
-    );
-    showSnackbar('Copied to clipboard');
-  }
 </script>

 <AccordionItem>
@@ -38,7 +31,7 @@
      </p>
      <div role="none" on:click={toClipboard}>
        <code class="text-primary-600 bg-slate-900"
-          >pip install git+https://github.com/kha-white/mokuro.git@web-reader</code
+          >pip3 install git+https://github.com/kha-white/mokuro.git@web-reader</code
        >
      </div>
    </div>
@@ -48,7 +41,7 @@
    </p>
    <Helper
      >Created by <A href="https://github.com/ZXY101">ZXY101</A> & <A
-        class="https://github.com/kha-white/mokuro">kha-white</A
+        href="https://github.com/kha-white">kha-white</A
      ></Helper
    >
  </div>
--- a/src/lib/components/Settings/AnkiConnectSettings.svelte
+++ b/src/lib/components/Settings/AnkiConnectSettings.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+  import { page } from '$app/stores';
  import { settings, updateAnkiSetting } from '$lib/settings';
-  import { AccordionItem, Label, Toggle, Input, Helper } from 'flowbite-svelte';
+  import { AccordionItem, Label, Toggle, Input, Helper, Select } from 'flowbite-svelte';

  $: disabled = !$settings.ankiConnectSettings.enabled;

@@ -11,16 +12,29 @@

  let pictureField = $settings.ankiConnectSettings.pictureField;
  let sentenceField = $settings.ankiConnectSettings.sentenceField;
+
+  let triggerMethod = $settings.ankiConnectSettings.triggerMethod;
+
+  const triggerOptions = [
+    { value: 'rightClick', name: 'Right click (long press on mobile)' },
+    { value: 'doubleTap', name: 'Double tap' },
+    { value: 'both', name: 'Both' },
+    { value: 'neither', name: 'Neither' }
+  ];
 </script>

 <AccordionItem>
  <span slot="header">Anki Connect</span>
  <div class="flex flex-col gap-5">
    <Helper
-      >For anki connect integration to work, you must add the reader to your anki connect <code
-        class="text-primary-500">webCorsOriginList</code
-      > list</Helper
+      >For anki connect integration to work, you must add the reader (<code class="text-primary-500"
+        >{$page.url.origin}</code
+      >) to your anki connect <b class="text-primary-500">webCorsOriginList</b> list</Helper
    >
+    <Helper>
+      To trigger the anki connect integration, double click or right click (long press on mobile)
+      any text box.
+    </Helper>
    <div>
      <Toggle bind:checked={enabled} on:change={() => updateAnkiSetting('enabled', enabled)}
        >AnkiConnect Integration Enabled</Toggle
@@ -66,5 +80,15 @@
        on:change={() => updateAnkiSetting('grabSentence', grabSentence)}>Grab sentence</Toggle
      >
    </div>
+    <div>
+      <Label>
+        Trigger method:
+        <Select
+          on:change={() => updateAnkiSetting('triggerMethod', triggerMethod)}
+          items={triggerOptions}
+          bind:value={triggerMethod}
+        />
+      </Label>
+    </div>
  </div>
 </AccordionItem>
--- a/src/lib/components/Settings/Profiles/ManageProfilesModal.svelte
+++ b/src/lib/components/Settings/Profiles/ManageProfilesModal.svelte
@@ -7,7 +7,7 @@
    renameProfile
  } from '$lib/settings';
  import { promptConfirmation, showSnackbar } from '$lib/util';
-  import { Listgroup, ListgroupItem, Modal, Input, Popover } from 'flowbite-svelte';
+  import { Listgroup, ListgroupItem, Modal, Input } from 'flowbite-svelte';
  import {
    CirclePlusSolid,
    CopySolid,
--- a/src/lib/components/Settings/Profiles/Profiles.svelte
+++ b/src/lib/components/Settings/Profiles/Profiles.svelte
@@ -2,6 +2,7 @@
  import { changeProfile, currentProfile, profiles } from '$lib/settings';
  import { AccordionItem, Button, Select } from 'flowbite-svelte';
  import ManageProfilesModal from './ManageProfilesModal.svelte';
+  import { showSnackbar } from '$lib/util';

  export let onClose: () => void;

@@ -16,6 +17,37 @@
    onClose();
  }

+  function exportProfiles() {
+    const link = document.createElement('a');
+    const json = localStorage.getItem('profiles') || '';
+    link.href = URL.createObjectURL(new Blob([json], { type: 'application/json' }));
+    link.download = 'profiles.json';
+    link.click();
+    showSnackbar('Profiles exported');
+  }
+
+  let files: FileList;
+  function importProfile() {
+    const [file] = files;
+    const reader = new FileReader();
+
+    reader.onloadend = () => {
+      const imported = JSON.parse(reader.result?.toString() || '');
+      profiles.update((prev) => {
+        return {
+          ...prev,
+          ...imported
+        };
+      });
+      onClose();
+      showSnackbar('Profiles imported');
+    };
+
+    if (file) {
+      reader.readAsText(file);
+    }
+  }
+
  let manageModalOpen = false;
 </script>

@@ -30,5 +62,13 @@
        >Manage profiles</Button
      >
    </div>
+    <hr class="border-gray-100 opacity-10" />
+    <div class="flex flex-col gap-2">
+      <input class="border border-slate-700 rounded-lg" type="file" accept=".json" bind:files />
+      <Button on:click={importProfile} disabled={!files} size="sm" outline color="blue"
+        >Import profiles</Button
+      >
+      <Button on:click={exportProfiles} size="sm" color="light">Export profiles</Button>
+    </div>
  </div>
 </AccordionItem>
--- a/src/lib/components/Settings/QuickAccess.svelte
+++ b/src/lib/components/Settings/QuickAccess.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { toggleFullScreen } from '$lib/panzoom';
+  import { isReader } from '$lib/util';
+
+  import { Button } from 'flowbite-svelte';
+
+  export let hidden = false;
+
+  function onClose() {
+    hidden = true;
+    history.back();
+  }
+</script>
+
+{#if isReader()}
+  <div class="flex flex-col gap-2">
+    <Button color="alternative" on:click={toggleFullScreen}>Toggle fullscreen</Button>
+    <Button color="alternative" on:click={onClose}>Close reader</Button>
+  </div>
+{/if}
--- a/src/lib/components/Settings/Reader/ReaderSettings.svelte
+++ b/src/lib/components/Settings/Reader/ReaderSettings.svelte
@@ -4,9 +4,14 @@
  import ReaderToggles from './ReaderToggles.svelte';
  import { settings, updateSetting } from '$lib/settings';

-  let value = $settings.swipeThreshold;
-  function onChange() {
-    updateSetting('swipeThreshold', value);
+  let swipeThresholdValue = $settings.swipeThreshold;
+  let edgeButtonWidthValue = $settings.edgeButtonWidth;
+  function onSwipeChange() {
+    updateSetting('swipeThreshold', swipeThresholdValue);
+  }
+
+  function onWidthChange() {
+    updateSetting('edgeButtonWidth', edgeButtonWidthValue);
  }
 </script>

@@ -18,7 +23,17 @@
    <ReaderToggles />
    <div>
      <Label>Swipe threshold</Label>
-      <Range on:change={onChange} min={20} max={90} disabled={!$settings.mobile} bind:value />
+      <Range
+        on:change={onSwipeChange}
+        min={20}
+        max={90}
+        disabled={!$settings.mobile}
+        bind:value={swipeThresholdValue}
+      />
+    </div>
+    <div>
+      <Label>Edge button width</Label>
+      <Range on:change={onWidthChange} min={1} max={100} bind:value={edgeButtonWidthValue} />
    </div>
  </div>
 </AccordionItem>
--- a/src/lib/components/Settings/Reader/ReaderToggles.svelte
+++ b/src/lib/components/Settings/Reader/ReaderToggles.svelte
@@ -9,7 +9,10 @@
    { key: 'boldFont', text: 'Bold font', value: $settings.boldFont },
    { key: 'pageNum', text: 'Show page number', value: $settings.pageNum },
    { key: 'charCount', text: 'Show character count', value: $settings.charCount },
-    { key: 'mobile', text: 'Mobile', value: $settings.mobile }
+    { key: 'bounds', text: 'Bounds', value: $settings.bounds },
+    { key: 'mobile', text: 'Mobile', value: $settings.mobile },
+    { key: 'showTimer', text: 'Show timer', value: $settings.showTimer },
+    { key: 'quickActions', text: 'Show quick actions', value: $settings.quickActions }
  ] as { key: SettingsKey; text: string; value: any }[];
 </script>

--- a/src/lib/components/Settings/Settings.svelte
+++ b/src/lib/components/Settings/Settings.svelte
@@ -12,6 +12,8 @@
  import VolumeDefaults from './Volume/VolumeDefaults.svelte';
  import VolumeSettings from './Volume/VolumeSettings.svelte';
  import About from './About.svelte';
+  import QuickAccess from './QuickAccess.svelte';
+  import { beforeNavigate } from '$app/navigation';

  let transitionParams = {
    x: 320,
@@ -29,6 +31,13 @@
  function onClose() {
    hidden = true;
  }
+
+  beforeNavigate((nav) => {
+    if (!hidden) {
+      nav.cancel();
+      hidden = true;
+    }
+  });
 </script>

 <Drawer
@@ -47,6 +56,7 @@
  </div>
  <div class="flex flex-col gap-5">
    <Accordion flush>
+      <QuickAccess bind:hidden />
      {#if isReader()}
        <VolumeSettings />
      {:else}
--- a/src/lib/components/Settings/Stats.svelte
+++ b/src/lib/components/Settings/Stats.svelte
@@ -1,44 +1,14 @@
 <script lang="ts">
-  import { volumes } from '$lib/settings';
-  import { AccordionItem, P } from 'flowbite-svelte';
-
-  $: completed = $volumes
-    ? Object.values($volumes).reduce((total: number, { completed }) => {
-        if (completed) {
-          total++;
-        }
-        return total;
-      }, 0)
-    : 0;
-
-  $: pagesRead = $volumes
-    ? Object.values($volumes).reduce((total: number, { progress }) => {
-        total += progress;
-        return total;
-      }, 0)
-    : 0;
-
-  $: charsRead = $volumes
-    ? Object.values($volumes).reduce((total: number, { chars }) => {
-        total += chars;
-        return total;
-      }, 0)
-    : 0;
-
-  $: minutesRead = $volumes
-    ? Object.values($volumes).reduce((total: number, { timeReadInMinutes }) => {
-        total += timeReadInMinutes;
-        return total;
-      }, 0)
-    : 0;
+  import { totalStats } from '$lib/settings';
+  import { AccordionItem } from 'flowbite-svelte';
 </script>

 <AccordionItem>
  <span slot="header">Stats</span>
  <div>
-    <p>Completed volumes: {completed}</p>
-    <p>Pages read: {pagesRead}</p>
-    <p>Characters read: {charsRead}</p>
-    <p>Minutes read: {minutesRead}</p>
+    <p>Completed volumes: {$totalStats?.completed || 0}</p>
+    <p>Pages read: {$totalStats?.pagesRead || 0}</p>
+    <p>Characters read: {$totalStats?.charsRead || 0}</p>
+    <p>Minutes read: {$totalStats?.minutesRead || 0}</p>
  </div>
 </AccordionItem>
--- a/src/lib/components/Settings/Volume/VolumeDefaults.svelte
+++ b/src/lib/components/Settings/Volume/VolumeDefaults.svelte
@@ -3,13 +3,13 @@
  import { AccordionItem, Helper, Toggle } from 'flowbite-svelte';

  $: toggles = [
-    { key: 'rightToLeft', text: 'Right to left', value: $settings.volumeDefaults.rightToLeft },
+    { key: 'rightToLeft', text: 'Right to left', value: $settings.volumeDefaults?.rightToLeft },
    {
      key: 'singlePageView',
      text: 'Single page view',
-      value: $settings.volumeDefaults.singlePageView
+      value: $settings.volumeDefaults?.singlePageView
    },
-    { key: 'hasCover', text: 'First page is cover', value: $settings.volumeDefaults.hasCover }
+    { key: 'hasCover', text: 'First page is cover', value: $settings.volumeDefaults?.hasCover }
  ] as { key: VolumeDefaultsKey; text: string; value: any }[];
 </script>

--- a/src/lib/components/Settings/Volume/VolumeSettings.svelte
+++ b/src/lib/components/Settings/Volume/VolumeSettings.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { page } from '$app/stores';
-  import { toggleFullScreen, zoomDefault } from '$lib/panzoom';
+  import { zoomDefault } from '$lib/panzoom';
  import {
    updateProgress,
    updateVolumeSetting,
@@ -8,7 +8,7 @@
    volumeSettings,
    type VolumeSettingsKey
  } from '$lib/settings';
-  import { AccordionItem, Button, Helper, Toggle } from 'flowbite-svelte';
+  import { AccordionItem, Helper, Toggle } from 'flowbite-svelte';

  const volumeId = $page.params.volume;

@@ -37,6 +37,5 @@
    {#each toggles as { key, text, value }}
      <Toggle size="small" checked={value} on:change={() => onChange(key, value)}>{text}</Toggle>
    {/each}
-    <Button color="alternative" on:click={toggleFullScreen}>Toggle fullscreen</Button>
  </div>
 </AccordionItem>
--- a/src/lib/components/UploadModal.svelte
+++ b/src/lib/components/UploadModal.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-  import { Button, Dropzone, Modal, Spinner } from 'flowbite-svelte';
+  import { Button, Dropzone, Modal, Spinner, Accordion, AccordionItem } from 'flowbite-svelte';
  import FileUpload from './FileUpload.svelte';
  import { processFiles } from '$lib/upload';
  import { onMount } from 'svelte';
  import { scanFiles } from '$lib/upload';
  import { formatBytes } from '$lib/util/upload';
+  import { toClipboard } from '$lib/util';

  export let open = false;

@@ -90,6 +91,33 @@
    <h2 class="justify-center flex">Loading...</h2>
    <div class="text-center"><Spinner /></div>
  {:then}
+    <Accordion flush>
+      <AccordionItem>
+        <span slot="header">What to upload?</span>
+        <div class="flex flex-col gap-5">
+          <div>
+            <p>
+              Firstly, ensure that you process your manga with the <b>0.2.0-beta.6</b> of mokuro, you
+              can install it by running the following command:
+            </p>
+            <div role="none" on:click={toClipboard}>
+              <code class="text-primary-600 bg-slate-900"
+                >pip3 install git+https://github.com/kha-white/mokuro.git@web-reader</code
+              >
+            </div>
+          </div>
+          <p>
+            This will generate a <code>.mokuro</code> file for each volume processed, upload your
+            manga along with the <code>.mokuro</code> files.
+          </p>
+          <p>
+            On mobile, uploading via directory is not supported so you will need to zip your manga
+            first and then upload it via
+            <code class="text-primary-600 bg-slate-900">choose files</code>.
+          </p>
+        </div>
+      </AccordionItem>
+    </Accordion>
    <Dropzone
      id="dropzone"
      on:drop={dropHandle}
@@ -141,7 +169,6 @@
        </p>
      {/if}
    </Dropzone>
-
    <p class=" text-sm text-gray-500 dark:text-gray-400 text-center">{storageSpace}</p>
    <div class="flex flex-1 flex-col gap-2">
      <Button outline on:click={reset} {disabled} color="dark">Reset</Button>
--- a/src/lib/components/VolumeItem.svelte
+++ b/src/lib/components/VolumeItem.svelte
@@ -1,34 +1,72 @@
 <script lang="ts">
  import { page } from '$app/stores';
-  import { progress } from '$lib/settings';
+  import { deleteVolume, progress } from '$lib/settings';
  import type { Volume } from '$lib/types';
-  import { ListgroupItem } from 'flowbite-svelte';
-  import { CheckCircleSolid } from 'flowbite-svelte-icons';
-  import type { ListGroupItemType } from 'flowbite-svelte/dist/types';
+  import { promptConfirmation } from '$lib/util';
+  import { ListgroupItem, Frame } from 'flowbite-svelte';
+  import { CheckCircleSolid, TrashBinSolid } from 'flowbite-svelte-icons';
+  import { goto } from '$app/navigation';
+  import { db } from '$lib/catalog/db';

-  export let item: string | ListGroupItemType;
-  const volume = item as Volume;
+  export let volume: Volume;

  const { volumeName, mokuroData } = volume as Volume;
+  const { title_uuid, volume_uuid } = mokuroData;
+  const volName = decodeURI(volumeName);

-  $: currentPage = $progress?.[volume?.mokuroData.volume_uuid || 0] || 1;
-  $: progressDisplay = `${currentPage} / ${volume.mokuroData.pages.length}`;
-  $: isComplete = currentPage === volume.mokuroData.pages.length;
+  $: currentPage = $progress?.[volume_uuid || 0] || 1;
+  $: progressDisplay = `${
+    currentPage === volume.mokuroData.pages.length - 1 ? currentPage + 1 : currentPage
+  } / ${volume.mokuroData.pages.length}`;
+  $: isComplete =
+    currentPage === volume.mokuroData.pages.length ||
+    currentPage === volume.mokuroData.pages.length - 1;
+
+  async function onDeleteClicked(e: Event) {
+    e.stopPropagation();
+
+    promptConfirmation(`Delete ${volName}?`, async () => {
+      const existingCatalog = await db.catalog.get(title_uuid);
+      const updated = existingCatalog?.manga.filter(({ mokuroData }) => {
+        return mokuroData.volume_uuid !== volume_uuid;
+      });
+
+      deleteVolume(volume_uuid);
+      if (updated && updated.length > 0) {
+        await db.catalog.update(title_uuid, { manga: updated });
+        goto(`/${$page.params.manga}`);
+      } else {
+        db.catalog.delete(title_uuid);
+        goto('/');
+      }
+    });
+  }
 </script>

-<a href={`${$page.params.manga}/${mokuroData.volume_uuid}`} class="h-full w-full">
-  <ListgroupItem>
-    <div
-      class:text-green-400={isComplete}
-      class="flex flex-row gap-5 items-center justify-between w-full"
+{#if $page.params.manga}
+  <Frame rounded border class="divide-y divide-gray-200 dark:divide-gray-600">
+    <ListgroupItem
+      on:click={() => goto(`/${$page.params.manga}/${volume_uuid}`)}
+      normalClass="py-4"
    >
-      <div>
-        <p class="font-semibold" class:text-white={!isComplete}>{decodeURI(volumeName)}</p>
-        <p>{progressDisplay}</p>
+      <div
+        class:text-green-400={isComplete}
+        class="flex flex-row gap-5 items-center justify-between w-full"
+      >
+        <div>
+          <p class="font-semibold" class:text-white={!isComplete}>{volName}</p>
+          <p>{progressDisplay}</p>
+        </div>
+        <div class="flex gap-2">
+          <TrashBinSolid
+            class="text-red-400 hover:text-red-500 z-10 poin"
+            on:click={onDeleteClicked}
+          />
+          {#if isComplete}
+            <CheckCircleSolid />
+          {/if}
+        </div>
      </div>
-      {#if isComplete}
-        <CheckCircleSolid />
-      {/if}
-    </div>
-  </ListgroupItem>
-</a>
+    </ListgroupItem>
+  </Frame>
+{/if}
--- a/src/lib/panzoom/util.ts
+++ b/src/lib/panzoom/util.ts
@@ -147,9 +147,9 @@ export function keepInBounds() {
    return
  }

-  const { mobile } = get(settings)
+  const { mobile, bounds } = get(settings)

-  if (!mobile) {
+  if (!mobile && !bounds) {
    return
  }

@@ -161,7 +161,7 @@ export function keepInBounds() {
  const width = container.offsetWidth * scale;
  const height = container.offsetHeight * scale;

-  const marginX = innerWidth * 0.01;
+  const marginX = innerWidth * 0.001;
  const marginY = innerHeight * 0.01;

  let minX = innerWidth - width - marginX;
@@ -190,7 +190,6 @@ export function keepInBounds() {

  if (x < minX) {
    transform.x = minX;
-
  }
  if (x > maxX) {
    transform.x = maxX;
--- a/src/lib/settings/index.ts
+++ b/src/lib/settings/index.ts
@@ -1,2 +1,3 @@
 export * from './volume-data'
 export * from './settings'
+export * from './misc'
--- a/src/lib/settings/misc.ts
+++ b/src/lib/settings/misc.ts
@@ -0,0 +1,33 @@
+import { browser } from '$app/environment';
+import { writable } from 'svelte/store';
+
+export type MiscSettings = {
+  galleryLayout: 'grid' | 'list';
+  gallerySorting: 'ASC' | 'DESC';
+};
+
+export type MiscSettingsKey = keyof MiscSettings;
+
+const defaultSettings: MiscSettings = {
+  galleryLayout: 'grid',
+  gallerySorting: 'ASC',
+}
+
+const stored = browser ? window.localStorage.getItem('miscSettings') : undefined;
+
+export const miscSettings = writable<MiscSettings>(stored ? JSON.parse(stored) : defaultSettings);
+
+miscSettings.subscribe((miscSettings) => {
+  if (browser) {
+    window.localStorage.setItem('miscSettings', JSON.stringify(miscSettings));
+  }
+});
+
+export function updateMiscSetting(key: MiscSettingsKey, value: any) {
+  miscSettings.update((miscSettings) => {
+    return {
+      ...miscSettings,
+      [key]: value
+    };
+  });
+}
--- a/src/lib/settings/settings.ts
+++ b/src/lib/settings/settings.ts
@@ -1,5 +1,4 @@
 import { browser } from '$app/environment';
-import { zoomDefault } from '$lib/panzoom';
 import { derived, get, writable } from 'svelte/store';

 export type FontSize =
@@ -32,6 +31,7 @@ export type AnkiConnectSettings = {
  cropImage: boolean;
  overwriteImage: boolean;
  grabSentence: boolean;
+  triggerMethod: 'rightClick' | 'doubleTap' | 'both'
 }

 export type VolumeDefaults = {
@@ -47,9 +47,13 @@ export type Settings = {
  boldFont: boolean;
  pageNum: boolean;
  charCount: boolean;
+  bounds: boolean;
  mobile: boolean;
  backgroundColor: string;
  swipeThreshold: number;
+  edgeButtonWidth: number;
+  showTimer: boolean;
+  quickActions: boolean;
  fontSize: FontSize;
  zoomDefault: ZoomModes;
  volumeDefaults: VolumeDefaults;
@@ -70,8 +74,12 @@ const defaultSettings: Settings = {
  pageNum: true,
  charCount: false,
  mobile: false,
+  bounds: false,
  backgroundColor: '#030712',
  swipeThreshold: 50,
+  edgeButtonWidth: 40,
+  showTimer: false,
+  quickActions: true,
  fontSize: 'auto',
  zoomDefault: 'zoomFitToScreen',
  volumeDefaults: {
@@ -85,7 +93,8 @@ const defaultSettings: Settings = {
    grabSentence: false,
    overwriteImage: true,
    pictureField: 'Picture',
-    sentenceField: 'Sentence'
+    sentenceField: 'Sentence',
+    triggerMethod: 'both'
  }
 };

--- a/src/lib/settings/volume-data.ts
+++ b/src/lib/settings/volume-data.ts
@@ -1,7 +1,9 @@
 import { browser } from '$app/environment';
 import { derived, get, writable } from 'svelte/store';
-import { settings } from './settings';
+import { settings, updateSetting, } from './settings';
 import { zoomDefault } from '$lib/panzoom';
+import { page } from '$app/stores';
+import { manga, volume } from '$lib/catalog';

 export type VolumeSettings = {
  rightToLeft: boolean;
@@ -21,6 +23,13 @@ type VolumeData = {
  settings: VolumeSettings;
 }

+type TotalStats = {
+  completed: number;
+  pagesRead: number;
+  charsRead: number;
+  minutesRead: number;
+}
+
 type Volumes = Record<string, VolumeData>;


@@ -30,7 +39,17 @@ const initial: Volumes = stored && browser ? JSON.parse(stored) : {};
 export const volumes = writable<Volumes>(initial);

 export function initializeVolume(volume: string) {
-  const { hasCover, rightToLeft, singlePageView } = get(settings).volumeDefaults
+  const volumeDefaults = get(settings).volumeDefaults;
+
+  if (!volumeDefaults) {
+    updateSetting('volumeDefaults', {
+      singlePageView: false,
+      rightToLeft: true,
+      hasCover: false
+    })
+  }
+
+  const { hasCover, rightToLeft, singlePageView } = volumeDefaults
  volumes.update((prev) => {
    return {
      ...prev,
@@ -133,3 +152,50 @@ export function updateVolumeSetting(volume: string, key: VolumeSettingsKey, valu
  });
  zoomDefault();
 }
+
+export const totalStats = derived([volumes, page], ([$volumes, $page]) => {
+  if ($page && $volumes) {
+    return Object.values($volumes).reduce<TotalStats>((stats, { chars, completed, timeReadInMinutes, progress }) => {
+      if (completed) {
+        stats.completed++;
+      }
+
+      stats.pagesRead += progress;
+      stats.minutesRead += timeReadInMinutes;
+      stats.charsRead += chars
+
+      return stats;
+    }, {
+      charsRead: 0,
+      completed: 0,
+      pagesRead: 0,
+      minutesRead: 0
+    })
+  }
+})
+
+export const mangaStats = derived([manga, volumes], ([$manga, $volumes]) => {
+  if ($manga && $volumes) {
+    return $manga.map((vol) => vol.mokuroData.volume_uuid).reduce(
+      (stats: any, volumeId) => {
+        const timeReadInMinutes = $volumes[volumeId]?.timeReadInMinutes || 0;
+        const chars = $volumes[volumeId]?.chars || 0;
+        const completed = $volumes[volumeId]?.completed || 0;
+
+        stats.timeReadInMinutes = stats.timeReadInMinutes + timeReadInMinutes;
+        stats.chars = stats.chars + chars;
+        stats.completed = stats.completed + completed;
+
+        return stats;
+      },
+      { timeReadInMinutes: 0, chars: 0, completed: 0 }
+    );
+  }
+});
+
+export const volumeStats = derived([volume, volumes], ([$volume, $volumes]) => {
+  if ($volume && $volumes) {
+    const { chars, completed, timeReadInMinutes, progress } = $volumes[$volume.mokuroData.volume_uuid]
+    return { chars, completed, timeReadInMinutes, progress }
+  }
+});
--- a/src/lib/upload/index.ts
+++ b/src/lib/upload/index.ts
@@ -2,27 +2,41 @@ import { db } from '$lib/catalog/db';
 import type { Volume } from '$lib/types';
 import { showSnackbar } from '$lib/util/snackbar';
 import { requestPersistentStorage } from '$lib/util/upload';
-import { BlobReader, ZipReader, BlobWriter, getMimeType } from '@zip.js/zip.js';
+import { ZipReader, BlobWriter, getMimeType, Uint8ArrayReader } from '@zip.js/zip.js';

 export * from './web-import'

 const zipTypes = ['zip', 'cbz', 'ZIP', 'CBZ'];
 const imageTypes = ['image/jpeg', 'image/png', 'image/webp'];

-
 export async function unzipManga(file: File) {
-  const zipFileReader = new BlobReader(file);
+  const zipFileReader = new Uint8ArrayReader(new Uint8Array(await file.arrayBuffer()));
  const zipReader = new ZipReader(zipFileReader);

  const entries = await zipReader.getEntries();
  const unzippedFiles: Record<string, File> = {};

-  for (const entry of entries) {
+  const sortedEntries = entries.sort((a, b) => {
+    return a.filename.localeCompare(b.filename, undefined, {
+      numeric: true,
+      sensitivity: 'base'
+    });
+  })
+
+  for (const entry of sortedEntries) {
    const mime = getMimeType(entry.filename);
-    if (imageTypes.includes(mime)) {
+    const isMokuroFile = entry.filename.split('.').pop() === 'mokuro'
+
+    if (imageTypes.includes(mime) || isMokuroFile) {
      const blob = await entry.getData?.(new BlobWriter(mime));
      if (blob) {
-        const file = new File([blob], entry.filename, { type: mime });
+        const fileName = entry.filename.split('/').pop() || entry.filename;
+        const file = new File([blob], fileName, { type: mime });
+        if (!file.webkitRelativePath) {
+          Object.defineProperty(file, 'webkitRelativePath', {
+            value: entry.filename
+          })
+        }
        unzippedFiles[entry.filename] = file;
      }
    }
@@ -90,10 +104,17 @@ export async function scanFiles(item: FileSystemEntry, files: Promise<File | und
  }
 }

-export async function processFiles(files: File[]) {
+export async function processFiles(_files: File[]) {
  const volumes: Record<string, Volume> = {};
  const mangas: string[] = [];

+  const files = _files.sort((a, b) => {
+    return decodeURI(a.name).localeCompare(decodeURI(b.name), undefined, {
+      numeric: true,
+      sensitivity: 'base'
+    });
+  })
+
  for (const file of files) {
    const { ext, filename, path } = getDetails(file);

@@ -148,6 +169,11 @@ export async function processFiles(files: File[]) {
    if (ext && zipTypes.includes(ext)) {
      const unzippedFiles = await unzipManga(file);

+      if (files.length === 1) {
+        processFiles(Object.values(unzippedFiles))
+        return;
+      }
+
      volumes[path] = {
        ...volumes[path],
        files: unzippedFiles
--- a/src/lib/util/cloud.ts
+++ b/src/lib/util/cloud.ts
@@ -0,0 +1,32 @@
+type FileInfo = {
+  accessToken: string;
+  metadata: any;
+  fileId?: string;
+  localStorageId: string;
+  type: string;
+}
+
+const FILES_API_URL = 'https://www.googleapis.com/upload/drive/v3/files';
+
+export async function uploadFile({ accessToken, fileId, localStorageId, metadata, type }: FileInfo) {
+  const json = localStorage.getItem(localStorageId) || '';
+  const blob = new Blob([json], { type });
+
+  const form = new FormData();
+
+  form.append('resource', new Blob([JSON.stringify(metadata)], { type }));
+  form.append('file', blob);
+
+
+  const res = await fetch(
+    `${FILES_API_URL}${fileId ? `/${fileId}` : ''}?uploadType=multipart`,
+    {
+      method: fileId ? 'PATCH' : 'POST',
+      headers: new Headers({ Authorization: 'Bearer ' + accessToken }),
+      body: form
+    }
+  );
+
+  return await res.json()
+}
+
--- a/src/lib/util/count-chars.ts
+++ b/src/lib/util/count-chars.ts
@@ -12,24 +12,28 @@ import type { Page } from "$lib/types";
 export function countChars(line: string) {
  const isNotJapaneseRegex = /[^0-9A-Z○◯々-〇〻ぁ-ゖゝ-ゞァ-ヺー０-９Ａ-Ｚｦ-ﾝ\p{Radical}\p{Unified_Ideograph}]+/gimu
  const cleaned = line.replace(isNotJapaneseRegex, '')
-  return cleaned.length;
+
+  return Array.from(cleaned).length;
 }

 export function getCharCount(pages: Page[], currentPage?: number) {
+  let charCount = 0;
+  let lineCount = 0;
+
  if (pages && pages.length > 0) {
    const max = currentPage || pages.length
-    let charCount = 0;

    for (let i = 0; i < max; i++) {
      const blocks = pages[i].blocks;

      blocks.forEach((block) => {
+        lineCount += block.lines.length;
        block.lines.forEach((line) => {
          charCount += countChars(line);
        });
      });
    }
-
-    return charCount;
  }
+
+  return { charCount, lineCount };
 }
--- a/src/lib/util/index.ts
+++ b/src/lib/util/index.ts
@@ -2,3 +2,5 @@ export * from './snackbar';
 export * from './upload';
 export * from './misc';
 export * from './modals';
+export * from './zip'
+export * from './cloud'
--- a/src/lib/util/misc.ts
+++ b/src/lib/util/misc.ts
@@ -1,5 +1,7 @@
 import { page } from "$app/stores";
 import { get } from "svelte/store";
+import { showSnackbar } from "./snackbar";
+import { browser } from "$app/environment";

 export function clamp(num: number, min: number, max: number) {
  return Math.min(Math.max(num, min), max);
@@ -23,3 +25,29 @@ export function debounce(func: () => void, timeout = 50) {
    timer = undefined;
  }
 }
+
+export function toClipboard() {
+  navigator.clipboard.writeText(
+    'pip3 install git+https://github.com/kha-white/mokuro.git@web-reader'
+  );
+  showSnackbar('Copied to clipboard');
+}
+
+type ExtaticPayload = {
+  title: string;
+  volumeName: string;
+  currentCharCount: number;
+  totalCharCount: number;
+  currentPage: number;
+  totalPages: number;
+  currentLineCount: number;
+  totalLineCount: number;
+}
+
+type ExtaticEvent = 'mokuro-reader:page.change' | 'mokuro-reader:reader.closed'
+
+export function fireExstaticEvent(event: ExtaticEvent, payload: ExtaticPayload) {
+  if (browser) {
+    document.dispatchEvent(new CustomEvent(event, { detail: payload }))
+  }
+}
--- a/src/lib/util/zip.ts
+++ b/src/lib/util/zip.ts
@@ -0,0 +1,33 @@
+import type { Volume } from "$lib/types";
+import {
+  BlobReader,
+  BlobWriter,
+  TextReader,
+  ZipWriter,
+} from "@zip.js/zip.js";
+
+export async function zipManga(manga: Volume[]) {
+  const zipWriter = new ZipWriter(new BlobWriter("application/zip"));
+
+  const promises = manga.map((volume) => {
+    const imagePromises = Object.values(volume.files).map((file) => {
+      return zipWriter.add(`${volume.volumeName}/${file.name}`, new BlobReader(file))
+    })
+
+    return [
+      zipWriter.add(`${volume.volumeName}.mokuro`, new TextReader(JSON.stringify(volume.mokuroData))),
+      ...imagePromises,
+    ]
+  })
+
+  await Promise.all(promises);
+
+  const zipFileBlob = await zipWriter.close();
+
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(zipFileBlob);
+  link.download = `${manga[0].mokuroData.title}.zip`;
+  link.click();
+
+  return false
+}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
  import '../app.postcss';
+  import { dev } from '$app/environment';
+  import { inject } from '@vercel/analytics';
+
  import NavBar from '$lib/components/NavBar.svelte';
  import Snackbar from '$lib/components/Snackbar.svelte';
  import ConfirmationPopup from '$lib/components/ConfirmationPopup.svelte';
-  import { settings } from '$lib/settings';
+
+  inject({ mode: dev ? 'development' : 'production' });
 </script>

 <div class=" h-full min-h-[100svh] text-white">
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
  import Catalog from '$lib/components/Catalog.svelte';
-  import { createProfile, deleteProfile } from '$lib/settings';
 </script>

 <svelte:head>
--- a/src/routes/[manga]/+page.svelte
+++ b/src/routes/[manga]/+page.svelte
@@ -4,39 +4,21 @@
  import VolumeItem from '$lib/components/VolumeItem.svelte';
  import { Button, Listgroup } from 'flowbite-svelte';
  import { db } from '$lib/catalog/db';
-  import { promptConfirmation } from '$lib/util';
+  import { promptConfirmation, zipManga } from '$lib/util';
  import { page } from '$app/stores';
  import type { Volume } from '$lib/types';
-  import { deleteVolume, volumes } from '$lib/settings';
+  import { deleteVolume, mangaStats, volumes } from '$lib/settings';

  function sortManga(a: Volume, b: Volume) {
-    if (a.volumeName < b.volumeName) {
-      return -1;
-    }
-    if (a.volumeName > b.volumeName) {
-      return 1;
-    }
-    return 0;
+    return a.mokuroData.volume.localeCompare(b.mokuroData.volume, undefined, {
+      numeric: true,
+      sensitivity: 'base'
+    });
  }

  $: manga = $catalog?.find((item) => item.id === $page.params.manga)?.manga.sort(sortManga);

-  $: stats = manga
-    ?.map((vol) => vol.mokuroData.volume_uuid)
-    ?.reduce(
-      (stats: any, volumeId) => {
-        const timeReadInMinutes = $volumes[volumeId]?.timeReadInMinutes || 0;
-        const chars = $volumes[volumeId]?.chars || 0;
-        const completed = $volumes[volumeId]?.completed || 0;
-
-        stats.timeReadInMinutes = stats.timeReadInMinutes + timeReadInMinutes;
-        stats.chars = stats.chars + chars;
-        stats.completed = stats.completed + completed;
-
-        return stats;
-      },
-      { timeReadInMinutes: 0, chars: 0, completed: 0 }
-    );
+  $: loading = false;

  async function confirmDelete() {
    const title = manga?.[0].mokuroData.title_uuid;
@@ -52,28 +34,40 @@
  function onDelete() {
    promptConfirmation('Are you sure you want to delete this manga?', confirmDelete);
  }
+
+  async function onExtract() {
+    if (manga) {
+      loading = true;
+      loading = await zipManga(manga);
+    }
+  }
 </script>

 <svelte:head>
  <title>{manga?.[0].mokuroData.title || 'Manga'}</title>
 </svelte:head>
-{#if manga}
+{#if manga && $mangaStats}
  <div class="p-2 flex flex-col gap-5">
    <div class="flex flex-row justify-between">
      <div class="flex flex-col gap-2">
        <h3 class="font-bold">{manga[0].mokuroData.title}</h3>
        <div class="flex flex-col gap-0 sm:flex-row sm:gap-5">
-          <p>Volumes: {stats.completed} / {manga.length}</p>
-          <p>Characters read: {stats.chars}</p>
-          <p>Minutes read: {stats.timeReadInMinutes}</p>
+          <p>Volumes: {$mangaStats.completed} / {manga.length}</p>
+          <p>Characters read: {$mangaStats.chars}</p>
+          <p>Minutes read: {$mangaStats.timeReadInMinutes}</p>
        </div>
      </div>
-      <div>
+      <div class="sm:block flex-col flex gap-2">
        <Button color="alternative" on:click={onDelete}>Remove manga</Button>
+        <Button color="light" on:click={onExtract} disabled={loading}>
+          {loading ? 'Extracting...' : 'Extract manga'}
+        </Button>
      </div>
    </div>
-    <Listgroup items={manga} let:item active class="flex-1 h-full w-full">
-      <VolumeItem {item} />
+    <Listgroup active class="flex-1 h-full w-full">
+      {#each manga as volume (volume.mokuroData.volume_uuid)}
+        <VolumeItem {volume} />
+      {/each}
    </Listgroup>
  </div>
 {:else}
--- a/src/routes/[manga]/[volume]/+layout.svelte
+++ b/src/routes/[manga]/[volume]/+layout.svelte
@@ -3,5 +3,6 @@
 <style>
  :global(body.reader) {
    overflow: hidden !important;
+    overscroll-behavior: contain;
  }
 </style>
--- a/src/routes/[manga]/[volume]/+page.svelte
+++ b/src/routes/[manga]/[volume]/+page.svelte
@@ -1,24 +1,30 @@
 <script lang="ts">
  import { page } from '$app/stores';
  import Reader from '$lib/components/Reader/Reader.svelte';
-  import { initializeVolume, startCount, volumeSettings, volumes } from '$lib/settings';
+  import Timer from '$lib/components/Reader/Timer.svelte';
+  import { initializeVolume, settings, startCount, volumeSettings, volumes } from '$lib/settings';
  import { onMount } from 'svelte';

  const volumeId = $page.params.volume;
+  let count: undefined | number = undefined;

  onMount(() => {
    if (!$volumes?.[volumeId]) {
      initializeVolume(volumeId);
    }

-    const count = startCount(volumeId);
+    count = startCount(volumeId);

    return () => {
      clearInterval(count);
+      count = undefined;
    };
  });
 </script>

 {#if $volumeSettings[volumeId]}
+  {#if $settings.showTimer}
+    <Timer bind:count {volumeId} />
+  {/if}
  <Reader volumeSettings={$volumeSettings[volumeId]} />
 {/if}
--- a/src/routes/cloud/+page.svelte
+++ b/src/routes/cloud/+page.svelte
@@ -0,0 +1,307 @@
+<script lang="ts">
+  import { processFiles } from '$lib/upload';
+  import Loader from '$lib/components/Loader.svelte';
+  import { showSnackbar, uploadFile } from '$lib/util';
+  import { Button } from 'flowbite-svelte';
+  import { onMount } from 'svelte';
+  import { promptConfirmation } from '$lib/util';
+  import { GoogleSolid } from 'flowbite-svelte-icons';
+  import { profiles, volumes } from '$lib/settings';
+
+  const CLIENT_ID = import.meta.env.VITE_GDRIVE_CLIENT_ID;
+  const API_KEY = import.meta.env.VITE_GDRIVE_API_KEY;
+
+  const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';
+  const SCOPES = 'https://www.googleapis.com/auth/drive.file';
+
+  const FOLDER_MIME_TYPE = 'application/vnd.google-apps.folder';
+  const READER_FOLDER = 'mokuro-reader';
+  const VOLUME_DATA_FILE = 'volume-data.json';
+  const PROFILES_FILE = 'profiles.json';
+
+  const type = 'application/json';
+
+  let tokenClient: any;
+  let loadingMessage = '';
+  let readerFolderId = '';
+  let volumeDataId = '';
+  let profilesId = '';
+  let accessToken = '';
+
+  async function connectDrive(resp?: any) {
+    if (resp?.error !== undefined) {
+      throw resp;
+    }
+
+    accessToken = resp?.access_token;
+    loadingMessage = 'Connecting to drive';
+
+    const { result: readerFolderRes } = await gapi.client.drive.files.list({
+      q: `mimeType='application/vnd.google-apps.folder' and name='${READER_FOLDER}'`,
+      fields: 'files(id)'
+    });
+
+    if (readerFolderRes.files?.length === 0) {
+      const { result: createReaderFolderRes } = await gapi.client.drive.files.create({
+        resource: { mimeType: FOLDER_MIME_TYPE, name: READER_FOLDER },
+        fields: 'id'
+      });
+
+      readerFolderId = createReaderFolderRes.id || '';
+    } else {
+      const id = readerFolderRes.files?.[0]?.id || '';
+
+      readerFolderId = id || '';
+    }
+
+    const { result: volumeDataRes } = await gapi.client.drive.files.list({
+      q: `'${readerFolderId}' in parents and name='${VOLUME_DATA_FILE}'`,
+      fields: 'files(id, name)'
+    });
+
+    if (volumeDataRes.files?.length !== 0) {
+      volumeDataId = volumeDataRes.files?.[0].id || '';
+    }
+
+    const { result: profilesRes } = await gapi.client.drive.files.list({
+      q: `'${readerFolderId}' in parents and name='${PROFILES_FILE}'`,
+      fields: 'files(id, name)'
+    });
+
+    if (profilesRes.files?.length !== 0) {
+      profilesId = profilesRes.files?.[0].id || '';
+    }
+
+    loadingMessage = '';
+
+    if (accessToken) {
+      showSnackbar('Connected to Google Drive');
+    }
+  }
+
+  function signIn() {
+    if (gapi.client.getToken() === null) {
+      tokenClient.requestAccessToken({ prompt: 'consent' });
+    } else {
+      tokenClient.requestAccessToken({ prompt: '' });
+    }
+  }
+
+  onMount(() => {
+    gapi.load('client', async () => {
+      await gapi.client.init({
+        apiKey: API_KEY,
+        discoveryDocs: [DISCOVERY_DOC]
+      });
+    });
+
+    gapi.load('picker', () => {});
+
+    tokenClient = google.accounts.oauth2.initTokenClient({
+      client_id: CLIENT_ID,
+      scope: SCOPES,
+      callback: connectDrive
+    });
+  });
+
+  function createPicker() {
+    const docsView = new google.picker.DocsView(google.picker.ViewId.DOCS)
+      .setMimeTypes('application/zip,application/x-zip-compressed')
+      .setMode(google.picker.DocsViewMode.LIST)
+      .setIncludeFolders(true)
+      .setParent(readerFolderId);
+
+    const picker = new google.picker.PickerBuilder()
+      .addView(docsView)
+      .setOAuthToken(accessToken)
+      .setAppId(CLIENT_ID)
+      .setDeveloperKey(API_KEY)
+      .enableFeature(google.picker.Feature.NAV_HIDDEN)
+      .setCallback(pickerCallback)
+      .build();
+    picker.setVisible(true);
+  }
+
+  async function pickerCallback(data: google.picker.ResponseObject) {
+    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
+      loadingMessage = 'Downloading from drive';
+      const docs = data[google.picker.Response.DOCUMENTS];
+      const { body, headers } = await gapi.client.drive.files.get({
+        fileId: docs[0].id,
+        alt: 'media'
+      });
+
+      const type = headers?.['Content-Type'] || '';
+
+      const blob = new Blob([new Uint8Array(body.length).map((_, i) => body.charCodeAt(i))], {
+        type
+      });
+
+      const file = new File([blob], docs[0].name);
+
+      await processFiles([file]);
+      loadingMessage = '';
+    }
+  }
+
+  async function onUploadVolumeData() {
+    const metadata = {
+      mimeType: type,
+      name: VOLUME_DATA_FILE,
+      parents: [volumeDataId ? null : readerFolderId]
+    };
+
+    loadingMessage = 'Uploading volume data';
+
+    const res = await uploadFile({
+      accessToken,
+      fileId: volumeDataId,
+      metadata,
+      localStorageId: 'volumes',
+      type
+    });
+
+    volumeDataId = res.id;
+    loadingMessage = '';
+
+    if (volumeDataId) {
+      showSnackbar('Volume data uploaded');
+    }
+  }
+
+  async function onUploadProfiles() {
+    const metadata = {
+      mimeType: type,
+      name: PROFILES_FILE,
+      parents: [profilesId ? null : readerFolderId]
+    };
+
+    loadingMessage = 'Uploading profiles';
+
+    const res = await uploadFile({
+      accessToken,
+      fileId: profilesId,
+      metadata,
+      localStorageId: 'profiles',
+      type
+    });
+
+    profilesId = res.id;
+    loadingMessage = '';
+
+    if (profilesId) {
+      showSnackbar('Profiles uploaded');
+    }
+  }
+
+  async function onDownloadVolumeData() {
+    loadingMessage = 'Downloading volume data';
+
+    const { body } = await gapi.client.drive.files.get({
+      fileId: volumeDataId,
+      alt: 'media'
+    });
+
+    const downloaded = JSON.parse(body);
+
+    volumes.update((prev) => {
+      return {
+        ...prev,
+        ...downloaded
+      };
+    });
+
+    loadingMessage = '';
+    showSnackbar('Volume data downloaded');
+  }
+
+  async function onDownloadProfiles() {
+    loadingMessage = 'Downloading profiles';
+
+    const { body } = await gapi.client.drive.files.get({
+      fileId: profilesId,
+      alt: 'media'
+    });
+
+    const downloaded = JSON.parse(body);
+
+    profiles.update((prev) => {
+      return {
+        ...prev,
+        ...downloaded
+      };
+    });
+
+    loadingMessage = '';
+    showSnackbar('Profiles downloaded');
+  }
+</script>
+
+<svelte:head>
+  <title>Cloud</title>
+</svelte:head>
+
+<div class="p-2 h-[90svh]">
+  {#if loadingMessage}
+    <Loader>
+      {loadingMessage}
+    </Loader>
+  {:else if accessToken}
+    <div class="flex justify-between items-center gap-6 flex-col">
+      <h2 class="text-3xl font-semibold text-center pt-2">Google Drive:</h2>
+      <p class="text-center">
+        Add your zipped manga files to the <span class="text-primary-700">{READER_FOLDER}</span> folder
+        in your Google Drive.
+      </p>
+      <div class="flex flex-col gap-4 w-full max-w-3xl">
+        <Button color="blue" on:click={createPicker}>Download manga</Button>
+        <div class="flex-col gap-2 flex">
+          <Button
+            color="dark"
+            on:click={() => promptConfirmation('Upload volume data?', onUploadVolumeData)}
+          >
+            Upload volume data
+          </Button>
+          {#if volumeDataId}
+            <Button
+              color="alternative"
+              on:click={() =>
+                promptConfirmation('Download and overwrite volume data?', onDownloadVolumeData)}
+            >
+              Download volume data
+            </Button>
+          {/if}
+        </div>
+        <div class="flex-col gap-2 flex">
+          <Button
+            color="dark"
+            on:click={() => promptConfirmation('Upload profiles?', onUploadProfiles)}
+          >
+            Upload profiles
+          </Button>
+          {#if profilesId}
+            <Button
+              color="alternative"
+              on:click={() =>
+                promptConfirmation('Download and overwrite profiles?', onDownloadProfiles)}
+            >
+              Download profiles
+            </Button>
+          {/if}
+        </div>
+      </div>
+    </div>
+  {:else}
+    <div class="flex justify-center pt-0 sm:pt-32">
+      <button
+        class="w-full border rounded-lg border-slate-600 p-10 border-opacity-50 hover:bg-slate-800 max-w-3xl"
+        on:click={signIn}
+      >
+        <div class="flex sm:flex-row flex-col gap-2 items-center justify-center">
+          <GoogleSolid size="lg" />
+          <h2 class="text-lg">Connect to Google Drive</h2>
+        </div>
+      </button>
+    </div>
+  {/if}
+</div>
--- a/src/routes/upload/+page.svelte
+++ b/src/routes/upload/+page.svelte
@@ -41,7 +41,8 @@
    max = items.length;

    for (const item of items) {
-      if (imageTypes.includes('.' + item.pathname.split('.').at(-1) || '')) {
+      const itemFileExtension = ('.' + item.pathname.split('.').at(-1)).toLowerCase();
+      if (imageTypes.includes(itemFileExtension || '')) {
        const image = await fetch(url + item.pathname);
        const blob = await image.blob();
        const file = new File([blob], item.pathname.substring(1));
Author	SHA1	Message	Date
ZXY101	b4573fd955	Complete Gdrive integration	2024-05-18 15:44:16 +02:00
ZXY101	08eee8f62c	Add title to cloud route	2024-03-26 02:17:47 +02:00
ZXY101	37c4aa1572	Update drive styling	2024-03-26 02:16:29 +02:00
ZXY101	3b237e15f5	Update scope	2024-03-26 01:57:17 +02:00
ZXY101	edea5aea08	Update scope	2024-03-26 01:55:39 +02:00
Shaun Tenner	940313310b	Merge pull request #13 from ZXY101/google-drive Add Google drive functionality	2024-03-26 01:23:40 +02:00
ZXY101	6daeb966c5	Add profile uploading + cleanup	2024-03-26 01:21:20 +02:00
ZXY101	8ecc96e92e	Update drive styling	2024-03-14 07:53:42 +02:00
ZXY101	cc3448f6ba	Add gdrive volume data uploading/downloading	2024-03-14 07:31:13 +02:00
ZXY101	491b9603af	Add google drive support	2024-03-13 09:35:44 +02:00
ZXY101	bec5e84067	Update edge buttons	2024-03-13 05:05:51 +02:00
ZXY101	8ef7f6447f	Reverse textbox sorting	2024-03-12 10:49:31 +02:00
ZXY101	d57de2ec56	Vix volume sorting	2024-03-12 10:31:56 +02:00
ZXY101	1007b3e4ae	Update anki connect quick action	2024-03-12 10:27:17 +02:00
ZXY101	39d4e0f072	Update bounds	2024-03-12 10:17:35 +02:00
ZXY101	5d3f17679b	Add id for manga panel	2024-03-10 05:42:01 +02:00
ZXY101	032d56a20e	Improve unzip speed	2024-03-10 04:54:29 +02:00
ZXY101	282cad6558	Add line count	2024-03-10 03:32:24 +02:00
ZXY101	5bc486660c	Update extatic events	2024-03-10 03:06:46 +02:00
ZXY101	e511a0a39b	Add exSTATic support	2024-03-09 12:02:13 +02:00
ZXY101	18f5e3ae46	Fix spacebar navigation	2024-03-01 01:02:09 +02:00
ZXY101	050228765e	Fix sort	2024-02-28 00:32:50 +02:00
ZXY101	89acdddccb	Fix volume screen sorting	2024-02-28 00:22:13 +02:00
ZXY101	1946b12623	Add single volume deletion	2024-02-28 00:15:36 +02:00
Shaun Tenner	1df387526a	Merge pull request #12 from ZXY101/jidoujisho-testing Temporary Jidoujisho compatibility	2024-02-14 23:55:59 +02:00
ZXY101	491c4efab2	More QOL changes	2024-02-11 08:45:21 +02:00
ZXY101	04dd68b242	Ensure there are always volume defaults	2024-02-11 07:51:11 +02:00
ZXY101	83843ff5dd	Various QOL changes	2024-02-11 07:25:41 +02:00
ZXY101	66e8dc6683	Merge branch 'master' of https://github.com/ZXY101/z-reader into jidoujisho-testing	2024-02-08 16:28:54 +02:00
ZXY101	b1c4029345	Fix zoomDefault on count up	2024-02-08 16:28:37 +02:00
ZXY101	49969caff7	Update default image for jidoujisho	2024-02-08 12:50:05 +02:00
ZXY101	34e3dbbe1b	Merge branch 'master' of https://github.com/ZXY101/z-reader into jidoujisho-testing	2024-02-08 12:46:27 +02:00
ZXY101	47228f2b96	Fix arrow direction	2024-02-08 12:41:38 +02:00
ZXY101	87be518e02	Dont zoomDefault on timer update	2024-02-08 11:00:59 +02:00
ZXY101	a1a582f786	Minor QOL fixes	2024-02-07 17:18:38 +02:00
ZXY101	50ef5c9f40	Attemp to get jidoujisho support working	2024-02-07 11:19:18 +02:00
ZXY101	28155496fc	Make timer controls manual	2024-02-05 18:02:20 +02:00
ZXY101	1c92a749be	Refactor stats, add derived catalog stores, improve timer	2024-02-05 15:39:22 +02:00
ZXY101	2e28843a07	Fix ordering of smaller text boxes	2024-02-05 12:43:36 +02:00
ZXY101	159a6d50d4	Ensure images extract into volume folders	2024-02-04 16:15:27 +02:00
ZXY101	28587e15c6	Add upload instructions	2024-02-04 05:53:25 +02:00
ZXY101	5226393eac	Allow single zip upload + improve manga extraction	2024-02-04 04:48:15 +02:00
ZXY101	3b2c0bedc3	Remove extra line	2024-01-30 10:30:35 +02:00
ZXY101	6ecf57ccbe	Merge https://github.com/ZXY101/z-reader	2024-01-30 10:30:12 +02:00
ZXY101	8757804140	Another attempt to fix import order	2024-01-30 10:29:39 +02:00
ZXY101	dd881da036	Another attempt to fix import order	2024-01-30 10:27:34 +02:00
Shaun Tenner	14d0043bb7	Merge pull request #11 from precondition/patch-1 Lowercase extension of item before comparing with accepted imageTypes	2024-01-30 10:09:47 +02:00
precondition	5bb2a4033a	Lowercase extension of item before comparing with valid imageTypes	2024-01-30 01:04:54 +01:00
ZXY101	692071eea0	Fix zip image ordering	2024-01-17 00:17:11 +02:00
ZXY101	eeef343027	Fix the fix	2024-01-13 18:21:39 +02:00
ZXY101	487a591fb6	Another attempt to fix 404	2024-01-13 18:16:49 +02:00
Shaun Tenner	edbd443137	Merge pull request #9 from ZXY101/zxy101/improvements Catalog search, sort, order + misc cleanup	2024-01-13 17:54:21 +02:00
ZXY101	28201f5d88	Add misc settings + misc cleanup	2024-01-13 17:53:21 +02:00
ZXY101	c817cc8681	Add catalog search, fix sorting	2024-01-08 06:47:30 +02:00
ZXY101	a18f66ca37	uri decode zip namem	2024-01-07 10:05:46 +02:00
ZXY101	801ecf929e	Add manga extracting	2024-01-06 17:32:37 +02:00
ZXY101	dffc3cbed0	Update package lock	2024-01-06 15:55:23 +02:00
Shaun Tenner	b07d98a1c1	Another attempt to fix order issues	2023-12-14 11:52:53 +09:00
Shaun Tenner	224f73d053	Attempt to fix order issues	2023-12-14 11:36:11 +09:00
Shaun	a2f59640af	Adjust settings buttons	2023-11-13 15:20:00 +09:00
Shaun	58a4b6be16	Adjust double tap zoom	2023-11-13 14:31:32 +09:00
Shaun	5e7ec34300	Fix order for unzipped manga	2023-11-13 14:01:03 +09:00
Shaun	03370f1b9f	Prevent edge swipe in reader	2023-11-09 16:29:42 +09:00
Shaun	a4e1e6f54a	Add clearer anki connect instructions	2023-11-09 16:05:46 +09:00
Shaun Tenner	942d5d39f7	Update README.md	2023-10-10 03:40:03 +09:00
ZXY101	aa1f4703f1	Add vercel analytics	2023-10-07 09:58:50 +02:00
ZXY101	137ea85d1a	Fix credits	2023-10-06 04:12:25 +02:00
ZXY101	40deec881b	Merge https://github.com/ZXY101/z-reader	2023-10-06 01:53:31 +02:00
ZXY101	a92828dde0	Add profile importing/exporting	2023-10-06 01:53:18 +02:00