New reader testing

Add Google drive functionality

package-lock.json

@@ -8,6 +8,8 @@
       "name": "z-reader",
       "version": "0.9.0",
       "dependencies": {
+        "@types/gapi": "^0.0.47",
+        "@types/google.accounts": "^0.0.14",
         "@vercel/analytics": "^1.1.0",
         "@zip.js/zip.js": "^2.7.20",
         "dexie": "^4.0.1-alpha.25",
@@ -17,6 +19,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",
@@ -601,6 +604,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",
@@ -747,6 +770,40 @@
       "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/json-schema": {
       "version": "7.0.12",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
@@ -1257,9 +1314,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": [
         {
@@ -4349,6 +4406,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",
@@ -4453,6 +4530,40 @@
       "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/json-schema": {
       "version": "7.0.12",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
@@ -4785,9 +4896,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": {

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,8 @@
   },
   "type": "module",
   "dependencies": {
+    "@types/gapi": "^0.0.47",
+    "@types/google.accounts": "^0.0.14",
     "@vercel/analytics": "^1.1.0",
     "@zip.js/zip.js": "^2.7.20",
     "dexie": "^4.0.1-alpha.25",

src/app.html

@@ -3,17 +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"
+      content="width=device-width, height=device-height,initial-scale=1, minimum-scale=1"
     />
+    <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
-    id="popupAbout"
-    class="pageContainer"
-    style="display: contents; background-image: url('https://reader.mokuro.app/_app/immutable/assets/icon.06fcfdd6.webp');">%sveltekit.body%</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>

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>

src/lib/components/Reader/MangaPage.svelte

@@ -35,10 +35,17 @@
 
 <div
   draggable="false"
-  style:width={`${page.img_width}px`}
-  style:height={`${page.img_height}px`}
+  style:width={`${window.innerWidth}px`}
+  style:height={`${(window.innerWidth * page.img_height) / page.img_width}px`}
   style:background-image={url}
   class="relative"
 >
   <TextBoxes {page} {src} />
 </div>
+
+<style>
+  div {
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+</style>

src/lib/components/Reader/QuickActions.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import { zoomFitToScreen } from '$lib/panzoom';
+  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';
@@ -13,7 +14,8 @@
 
   export let left: (_e: any, ingoreTimeOut?: boolean) => void;
   export let right: (_e: any, ingoreTimeOut?: boolean) => void;
-  export let src: File;
+  export let src1: File;
+  export let src2: File | undefined;
 
   let open = false;
 
@@ -32,8 +34,8 @@
     open = false;
   }
 
-  async function onUpdateCard() {
-    if ($settings.ankiConnectSettings.enabled) {
+  async function onUpdateCard(src: File | undefined) {
+    if ($settings.ankiConnectSettings.enabled && src) {
       if ($settings.ankiConnectSettings.cropImage) {
         showCropper(URL.createObjectURL(src));
       } else {
@@ -52,15 +54,22 @@
     tooltip="none"
     trigger="click"
     defaultClass="absolute end-3 bottom-3 z-50"
-    outline
-    color="dark"
+    color="transparent"
     bind:open
   >
     {#if $settings.ankiConnectSettings.enabled}
-      <SpeedDialButton on:click={onUpdateCard}>
+      <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>

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 {
@@ -22,6 +22,7 @@
   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;
@@ -65,10 +66,12 @@
         return;
       }
       const pageClamped = clamp(newPage, 1, pages?.length);
+      const { charCount } = getCharCount(pages, pageClamped);
+
       updateProgress(
         volume.mokuroData.volume_uuid,
         pageClamped,
-        getCharCount(pages, pageClamped) || 0,
+        charCount,
         pageClamped === pages.length || pageClamped === pages.length - 1
       );
       zoomDefault();
@@ -122,6 +125,7 @@
         return;
       case 'ArrowDown':
       case 'PageDown':
+      case 'Space':
         changePage(page + navAmount, true);
         return;
       case 'Home':
@@ -132,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;
@@ -145,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;
@@ -202,6 +202,40 @@
       }
     }
   }
+
+  $: {
+    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
@@ -214,7 +248,12 @@
   <title>{volume?.mokuroData.volume || 'Volume'}</title>
 </svelte:head>
 {#if volume && pages}
-  <QuickActions {left} {right} src={Object.values(volume?.files)[index]} />
+  <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">
@@ -292,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]} />
@@ -305,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}

src/lib/components/Reader/TextBoxes.svelte

@@ -9,15 +9,20 @@
 
   $: textBoxes = page.blocks
     .map((block) => {
-      const { img_height, img_width } = page;
+      const { img_height: imgh, img_width: imgw } = page;
+      const img_height = (window.innerWidth * imgh) / imgw;
+      const img_width = window.innerWidth;
       const { box, font_size, lines, vertical } = block;
 
-      let [_xmin, _ymin, _xmax, _ymax] = box;
+      const resizeFactor = window.innerWidth / imgw;
 
-      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);
+      let [_xmin, _ymin, _xmax, _ymax] = box;
+      console.log(box);
+
+      const xmin = clamp(_xmin * resizeFactor, 0, img_width);
+      const ymin = clamp(_ymin * resizeFactor, 0, img_height);
+      const xmax = clamp(_xmax * resizeFactor, 0, img_width);
+      const ymax = clamp(_ymax * resizeFactor, 0, img_height);
 
       const width = xmax - xmin;
       const height = ymax - ymin;
@@ -37,7 +42,7 @@
       return textBox;
     })
     .sort(({ area: a }, { area: b }) => {
-      return a - b;
+      return b - a;
     });
 
   $: fontWeight = $settings.boldFont ? 'bold' : '400';

src/lib/components/ReaderV2/ReaderV2.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { volume } from '$lib/catalog';
+  import MangaPage from '../Reader/MangaPage.svelte';
+
+  $: files = $volume ? Object.values($volume?.files).slice(0, 10) : [];
+  $: pages = $volume?.mokuroData?.pages || [];
+
+  $: {
+    const { innerWidth, innerHeight } = window;
+    console.log(innerWidth, innerHeight);
+  }
+</script>
+
+<section>
+  {#each files as file, i}
+    <MangaPage src={file} page={pages[i]} />
+  {/each}
+</section>
+
+<style>
+  section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+</style>

src/lib/components/Settings/AnkiConnectSettings.svelte

@@ -18,7 +18,8 @@
   const triggerOptions = [
     { value: 'rightClick', name: 'Right click (long press on mobile)' },
     { value: 'doubleTap', name: 'Double tap' },
-    { value: 'both', name: 'Both' }
+    { value: 'both', name: 'Both' },
+    { value: 'neither', name: 'Neither' }
   ];
 </script>
 

src/lib/components/Settings/QuickAccess.svelte

@@ -3,11 +3,18 @@
   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={() => history.back()}>Close reader</Button>
+    <Button color="alternative" on:click={onClose}>Close reader</Button>
   </div>
 {/if}

src/lib/components/Settings/Reader/ReaderSelects.svelte

@@ -5,6 +5,12 @@
 
   $: zoomModeValue = $settings.zoomDefault;
   $: fontSizeValue = $settings.fontSize;
+  $: readerValue = $settings.reader || 'classic';
+
+  let readers = [
+    { value: 'classic', name: 'Classic' },
+    { value: 'v2', name: 'V2' }
+  ];
 
   let zoomModes = [
     { value: 'zoomFitToScreen', name: 'Fit to screen' },
@@ -40,6 +46,11 @@
   }
 </script>
 
+<div>
+  <Label>Reader:</Label>
+  <Select items={readers} value={readerValue} on:change={(e) => onSelectChange(e, 'reader')} />
+</div>
+
 <div>
   <Label>On page zoom:</Label>
   <Select

src/lib/components/Settings/Reader/ReaderToggles.svelte

@@ -9,6 +9,7 @@
     { 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: '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 }

src/lib/components/Settings/Settings.svelte

@@ -56,7 +56,7 @@
   </div>
   <div class="flex flex-col gap-5">
     <Accordion flush>
-      <QuickAccess />
+      <QuickAccess bind:hidden />
       {#if isReader()}
         <VolumeSettings />
       {:else}

src/lib/components/VolumeItem.svelte

@@ -1,40 +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;
+  $: 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>
 
 {#if $page.params.manga}
-  <a href={`/${$page.params.manga}/${mokuroData.volume_uuid}`} class="h-full w-full">
-    <ListgroupItem>
+  <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
         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}>{decodeURI(volumeName)}</p>
+          <p class="font-semibold" class:text-white={!isComplete}>{volName}</p>
           <p>{progressDisplay}</p>
         </div>
-        {#if isComplete}
-          <CheckCircleSolid />
-        {/if}
+        <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>
     </ListgroupItem>
-  </a>
+  </Frame>
 {/if}

src/lib/consts/index.ts

@@ -1 +1 @@
-export const READER_VERSION = '0.9.0'
+export const READER_VERSION = '1.0.0'

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;

src/lib/settings/settings.ts

@@ -1,6 +1,8 @@
 import { browser } from '$app/environment';
 import { derived, get, writable } from 'svelte/store';
 
+export type Readers = 'classic' | 'v2'
+
 export type FontSize =
   | 'auto'
   | '9'
@@ -41,12 +43,14 @@ export type VolumeDefaults = {
 }
 
 export type Settings = {
+  reader: Readers,
   textEditable: boolean;
   textBoxBorders: boolean;
   displayOCR: boolean;
   boldFont: boolean;
   pageNum: boolean;
   charCount: boolean;
+  bounds: boolean;
   mobile: boolean;
   backgroundColor: string;
   swipeThreshold: number;
@@ -66,6 +70,7 @@ export type AnkiSettingsKey = keyof AnkiConnectSettings;
 export type VolumeDefaultsKey = keyof VolumeDefaults;
 
 const defaultSettings: Settings = {
+  reader: 'classic',
   displayOCR: true,
   textEditable: false,
   textBoxBorders: false,
@@ -73,9 +78,10 @@ const defaultSettings: Settings = {
   pageNum: true,
   charCount: false,
   mobile: false,
+  bounds: false,
   backgroundColor: '#030712',
   swipeThreshold: 50,
-  edgeButtonWidth: 10,
+  edgeButtonWidth: 40,
   showTimer: false,
   quickActions: true,
   fontSize: 'auto',

src/lib/upload/index.ts

@@ -2,16 +2,15 @@ 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();

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()
+}
+

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 };
 }

src/lib/util/index.ts

@@ -2,4 +2,5 @@ export * from './snackbar';
 export * from './upload';
 export * from './misc';
 export * from './modals';
-export * from './zip'
+export * from './zip'
+export * from './cloud'

src/lib/util/misc.ts

@@ -1,6 +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);
@@ -30,4 +31,23 @@ export function toClipboard() {
     '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 }))
+  }
 }

src/routes/[manga]/+page.svelte

@@ -10,34 +10,14 @@
   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() {
@@ -84,8 +64,10 @@
         </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}

src/routes/[manga]/[volume]/+layout.svelte

@@ -1,8 +1,8 @@
 <slot />
 
 <style>
-  :global(body.reader) {
+  /* :global(body.reader) {
     overflow: hidden !important;
     overscroll-behavior: contain;
-  }
+  } */
 </style>

src/routes/[manga]/[volume]/+page.svelte

@@ -4,6 +4,7 @@
   import Timer from '$lib/components/Reader/Timer.svelte';
   import { initializeVolume, settings, startCount, volumeSettings, volumes } from '$lib/settings';
   import { onMount } from 'svelte';
+  import ReaderV2 from '$lib/components/ReaderV2/ReaderV2.svelte';
 
   const volumeId = $page.params.volume;
   let count: undefined | number = undefined;
@@ -26,5 +27,9 @@
   {#if $settings.showTimer}
     <Timer bind:count {volumeId} />
   {/if}
-  <Reader volumeSettings={$volumeSettings[volumeId]} />
+  {#if $settings.reader === 'classic'}
+    <Reader volumeSettings={$volumeSettings[volumeId]} />
+  {:else}
+    <ReaderV2 />
+  {/if}
 {/if}

src/routes/cloud/+page.svelte

@@ -0,0 +1,337 @@
+<script lang="ts">
+  import { processFiles } from '$lib/upload';
+  import Loader from '$lib/components/Loader.svelte';
+  import { formatBytes, showSnackbar, uploadFile } from '$lib/util';
+  import { Button, Frame, Listgroup, ListgroupItem } 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 zips: gapi.client.drive.File[];
+  let loadingMessage = '';
+  let readerFolderId = '';
+  let volumeDataId = '';
+  let profilesId = '';
+
+  async function fetchZips(folderId: string) {
+    const { result } = await gapi.client.drive.files.list({
+      q: `'${folderId}' in parents and (mimeType='${FOLDER_MIME_TYPE}' or (fileExtension='zip' or fileExtension='cbz'))`,
+      fields: 'files(id, name, mimeType, size)'
+    });
+
+    if (!result.files) return;
+
+    let zipFiles: gapi.client.drive.File[] = [];
+
+    for (const file of result.files) {
+      if (!file.id) continue;
+
+      if (file.mimeType === FOLDER_MIME_TYPE) {
+        zipFiles = [...zipFiles, ...((await fetchZips(file.id)) || [])];
+      } else {
+        zipFiles.push(file);
+      }
+    }
+
+    return zipFiles;
+  }
+
+  async function downloadFile(fileId: string) {
+    loadingMessage = 'Downloading from drive';
+
+    const { body, headers } = await gapi.client.drive.files.get({
+      fileId,
+      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], fileId + '.zip');
+
+    loadingMessage = 'Adding to catalog';
+
+    await processFiles([file]);
+    loadingMessage = '';
+  }
+
+  function onClick({ id, name }: gapi.client.drive.File) {
+    if (id) {
+      promptConfirmation(`Would you like to download and add ${name} to your collection?`, () => {
+        downloadFile(id);
+      });
+    }
+  }
+
+  async function connectDrive(resp?: any) {
+    if (resp?.error !== undefined) {
+      throw resp;
+    }
+
+    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 || '';
+      zips = [...((await fetchZips(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 = '';
+    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]
+      });
+
+      if (gapi.client.getToken() !== null) {
+        loadingMessage = 'Connecting to drive';
+        connectDrive();
+      }
+    });
+
+    tokenClient = google.accounts.oauth2.initTokenClient({
+      client_id: CLIENT_ID,
+      scope: SCOPES,
+      callback: connectDrive
+    });
+  });
+
+  async function onUploadVolumeData() {
+    const metadata = {
+      mimeType: type,
+      name: VOLUME_DATA_FILE,
+      parents: [volumeDataId ? null : readerFolderId]
+    };
+    const { access_token } = gapi.auth.getToken();
+
+    loadingMessage = 'Uploading volume data';
+
+    const res = await uploadFile({
+      accessToken: access_token,
+      fileId: volumeDataId,
+      metadata,
+      localStorageId: 'volumes',
+      type
+    });
+
+    volumeDataId = res.id;
+    loadingMessage = '';
+
+    showSnackbar('Volume data uploaded');
+  }
+
+  async function onUploadProfiles() {
+    const metadata = {
+      mimeType: type,
+      name: PROFILES_FILE,
+      parents: [profilesId ? null : readerFolderId]
+    };
+    const { access_token } = gapi.auth.getToken();
+
+    loadingMessage = 'Uploading profiles';
+
+    const res = await uploadFile({
+      accessToken: access_token,
+      fileId: profilesId,
+      metadata,
+      localStorageId: 'profiles',
+      type
+    });
+
+    profilesId = res.id;
+    loadingMessage = '';
+
+    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 zips}
+    <div class="flex flex-col gap-2">
+      <div class="flex justify-between items-center gap-2 flex-col sm:flex-row">
+        <h2 class="text-2xl font-semibold text-center">Google Drive:</h2>
+        <div class="flex flex-col sm:flex-row gap-2 sm:w-auto w-full">
+          <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}
+          <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 class="flex gap-2 justify-center flex-wrap">
+        {#if zips.length > 0}
+          <Listgroup active class="w-full">
+            {#each zips as zip}
+              <Frame
+                on:click={() => onClick(zip)}
+                rounded
+                border
+                class="divide-y divide-gray-200 dark:divide-gray-600"
+              >
+                <ListgroupItem normalClass="py-4">
+                  <div class="flex flex-col gap-2">
+                    <h2 class="font-semibold">{zip.name}</h2>
+                    <p>{formatBytes(parseInt(zip.size || '0'))}</p>
+                  </div>
+                </ListgroupItem>
+              </Frame>
+            {/each}
+          </Listgroup>
+        {:else}
+          <div class="h-[70svh] items-center justify-center flex">
+            <p class="text-center">
+              Add your zip files to the <span class="text-primary-700">{READER_FOLDER}</span> folder
+              in your Google Drive.
+            </p>
+          </div>
+        {/if}
+      </div>
+    </div>
+  {:else}
+    <button
+      class="w-full border rounded-lg border-slate-600 p-10 border-opacity-50 hover:bg-slate-800"
+      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>
+  {/if}
+</div>