Add renovate.json

set manifest display to fullscreen so PWAs on android can start fullscreen

.dockerignore

@@ -0,0 +1,28 @@
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.git
+.gitignore
+README.md
+.env
+.nyc_output
+coverage
+.nyc_output
+.coverage
+coverage.json
+*.lcov
+.cache
+.parcel-cache
+.next
+.nuxt
+dist
+build
+.DS_Store
+*.tgz
+*.tar.gz
+.vscode
+.idea
+*.swp
+*.swo
+*~

.gitea/workflows/docker-build-push.yml

@@ -0,0 +1,64 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches:
+      - "main"
+    tags:
+      - "v*"
+  workflow_dispatch:
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    if: ${{ !contains(github.event.head_commit.message, '[skip ci]') }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          # Ensure full history and all tags are available
+          fetch-depth: 0
+
+      - name: Set up QEMU (multi-arch)
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: gitea.suda.codes/${{ github.repository }}
+          tags: |
+            type=ref,event=tag
+
+      - name: Determine latest Git tag
+        id: latest
+        shell: bash
+        run: |
+          set -euo pipefail
+          # Fetch tags in case the runner's mirror is stale
+          git fetch --tags --force --quiet || true
+          if tag=$(git describe --tags --abbrev=0 2>/dev/null); then
+            echo "tag=$tag" >> "$GITHUB_OUTPUT"
+          else
+            # Fallback when no tags exist
+            echo "tag=latest" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Log in to container registry
+        uses: docker/login-action@v3
+        with:
+          registry: gitea.suda.codes
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          platforms: linux/amd64
+          tags: |
+            ${{ steps.meta.outputs.tags }}
+            gitea.suda.codes/${{ github.repository }}:${{ steps.latest.outputs.tag }}

Dockerfile

@@ -0,0 +1,41 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Production image, copy all the files and run the app
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 svelte
+
+COPY --from=builder --chown=svelte:nodejs /app/build ./build
+COPY --from=builder --chown=svelte:nodejs /app/package.json ./package.json
+COPY --from=builder --chown=svelte:nodejs /app/node_modules ./node_modules
+
+USER svelte
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["npm", "start"]

README.md

@@ -10,7 +10,7 @@ https://github.com/ZXY101/mokuro-reader/assets/39561296/45a214a8-3f69-461c-87d7-
 - Anki connect integration & image cropping
 - Installation and offline support
 
-## Useage:
+## Usage:
 You can find the reader hosted [here](https://reader.mokuro.app/).
 
 To import your manga, process it with mokuro and then upload your manga along with the generated `.mokuro` file.

docker-compose.yml

@@ -0,0 +1,38 @@
+version: '3.8'
+
+services:
+  app:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - DATABASE_URL=postgresql://mokuro:password@postgres:5432/mokuro
+      - HOSTNAME=0.0.0.0
+      - PORT=3000
+    depends_on:
+      - postgres
+    restart: unless-stopped
+    networks:
+      - mokuro-network
+
+  postgres:
+    image: postgres:16-alpine
+    environment:
+      - POSTGRES_DB=mokuro
+      - POSTGRES_USER=mokuro
+      - POSTGRES_PASSWORD=password
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    ports:
+      - "5432:5432"
+    restart: unless-stopped
+    networks:
+      - mokuro-network
+
+volumes:
+  postgres_data:
+
+networks:
+  mokuro-network:
+    driver: bridge

package.json

@@ -1,11 +1,12 @@
 {
   "name": "z-reader",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "private": true,
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
+    "start": "node build",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
@@ -14,6 +15,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,10 +38,15 @@
   },
   "type": "module",
   "dependencies": {
+    "@sveltejs/adapter-node": "^1.3.1",
+    "@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",
+    "pg": "^8.16.3",
     "svelte-easy-crop": "^2.0.1"
   }
 }

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended"
+  ]
+}

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"
     />
+    <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"
+      id="popupAbout"
-    class="pageContainer"
+      class="pageContainer"
-    style="display: contents; background-image: url('https://reader.mokuro.app/_app/immutable/assets/icon.06fcfdd6.webp');">%sveltekit.body%</div>
+      style="
+        display: contents;
+        background-image: url('https://reader.mokuro.app/_app/immutable/assets/icon.06fcfdd6.webp');
+      "
+    >
+      %sveltekit.body%
+    </div>
   </body>
 </html>

src/lib/anki-connect/cropper.ts

@@ -1,6 +1,7 @@
 import { showSnackbar } from '$lib/util';
 import { writable } from 'svelte/store';
-import { blobToBase64 } from '.';
+import { blobToBase64, imageResize } from '.';
+import { Settings } from '$lib/settings';
 
 type CropperModal = {
   open: boolean;
@@ -34,7 +35,7 @@ function getRadianAngle(degreeValue: number) {
 
 export type Pixels = { width: number; height: number; x: number; y: number }
 
-export async function getCroppedImg(imageSrc: string, pixelCrop: Pixels, rotation = 0) {
+export async function getCroppedImg(imageSrc: string, pixelCrop: Pixels, settings: Settings, rotation = 0 ) {
   const image = await createImage(imageSrc);
   const canvas = new OffscreenCanvas(image.width, image.height);
   const ctx = canvas.getContext('2d');
@@ -71,8 +72,9 @@ export async function getCroppedImg(imageSrc: string, pixelCrop: Pixels, rotatio
     Math.round(0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x),
     Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y)
   );
-
+  
-  const blob = await canvas.convertToBlob({ type: 'image/webp' });
+  await imageResize(canvas, ctx, settings.ankiConnectSettings.widthField, settings.ankiConnectSettings.heightField);
+  const blob = await canvas.convertToBlob({ type: 'image/webp', quality: settings.ankiConnectSettings.qualityField });
 
   return await blobToBase64(blob)
 }

src/lib/anki-connect/index.ts

@@ -1,4 +1,4 @@
-import { settings } from "$lib/settings";
+import { Settings, settings } from "$lib/settings";
 import { showSnackbar } from "$lib/util"
 import { get } from "svelte/store";
 
@@ -50,20 +50,44 @@ export async function blobToBase64(blob: Blob) {
   });
 }
 
-export async function imageToWebp(source: File) {
+export async function imageToWebp(source: File, settings: Settings) {
   const image = await createImageBitmap(source);
   const canvas = new OffscreenCanvas(image.width, image.height);
   const context = canvas.getContext("2d");
 
   if (context) {
     context.drawImage(image, 0, 0);
-    const blob = await canvas.convertToBlob({ type: 'image/webp' });
+    await imageResize(canvas, context, settings.ankiConnectSettings.widthField, settings.ankiConnectSettings.heightField);
+    const blob = await canvas.convertToBlob({ type: 'image/webp', quality: settings.ankiConnectSettings.qualityField });
     image.close();
 
     return await blobToBase64(blob);
   }
 }
 
+export async function imageResize(canvas: OffscreenCanvas,  ctx: OffscreenCanvasRenderingContext2D, maxWidth: number, maxHeight: number): Promise<OffscreenCanvas> {
+  return new Promise((resolve, reject) => {
+    const widthRatio = maxWidth <= 0 ? 1 : maxWidth / canvas.width;
+    const heightRatio = maxHeight <= 0 ? 1 : maxHeight / canvas.height;
+    const ratio = Math.min(1, Math.min(widthRatio, heightRatio));
+
+    if (ratio < 1) {
+        const newWidth = canvas.width * ratio;
+        const newHeight = canvas.height * ratio;
+        createImageBitmap(canvas, { resizeWidth: newWidth, resizeHeight: newHeight, resizeQuality: 'high' })
+            .then((sprite) => {
+                canvas.width = newWidth;
+                canvas.height = newHeight;
+                ctx.drawImage(sprite, 0, 0);
+                resolve(canvas);
+            })
+            .catch((e) => reject(e));
+    } else {
+        resolve(canvas);
+    }
+  });
+}
+
 export async function updateLastCard(imageData: string | null | undefined, sentence?: string) {
   const {
     overwriteImage,
@@ -102,7 +126,7 @@ export async function updateLastCard(imageData: string | null | undefined, sente
         id,
         fields,
         picture: {
-          filename: `_${id}.webp`,
+          filename: `mokuro_${id}.webp`,
           data: imageData.split(';base64,')[1],
           fields: [pictureField],
         },

src/lib/components/CatalogItem.svelte

@@ -18,7 +18,9 @@
           class="object-contain sm:w-[250px] sm:h-[350px] bg-black border-gray-900 border"
         />
       {/if}
-      <p class="font-semibold">{manga.mokuroData.title}</p>
+      <p class="font-semibold sm:w-[250px] line-clamp-1">
+        {manga.mokuroData.title}
+      </p>
     </div>
   </a>
 {/if}

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 { UserSettingsSolid, UploadSolid, CloudArrowUpOutline } from 'flowbite-svelte-icons';
-  import { afterNavigate } from '$app/navigation';
+  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/Cropper.svelte

@@ -37,7 +37,7 @@
   async function onCrop() {
     if ($cropperStore?.image && pixels) {
       loading = true;
-      const imageData = await getCroppedImg($cropperStore.image, pixels);
+      const imageData = await getCroppedImg($cropperStore.image, pixels, $settings);
       updateLastCard(imageData, $cropperStore.sentence);
       close();
     }

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,13 +34,13 @@
     open = false;
   }
 
-  async function onUpdateCard() {
+  async function onUpdateCard(src: File | undefined) {
-    if ($settings.ankiConnectSettings.enabled) {
+    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);
+          const imageData = await imageToWebp(src, $settings);
           updateLastCard(imageData);
         });
       }
@@ -52,15 +54,22 @@
     tooltip="none"
     trigger="click"
     defaultClass="absolute end-3 bottom-3 z-50"
-    outline
+    color="transparent"
-    color="dark"
     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,8 @@
   import SettingsButton from './SettingsButton.svelte';
   import { getCharCount } from '$lib/util/count-chars';
   import QuickActions from './QuickActions.svelte';
+  import { beforeNavigate } from '$app/navigation';
+  import { onMount } from 'svelte';
 
   // TODO: Refactor this whole mess
   export let volumeSettings: VolumeSettings;
@@ -65,10 +67,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 +126,7 @@
         return;
       case 'ArrowDown':
       case 'PageDown':
+      case 'Space':
         changePage(page + navAmount, true);
         return;
       case 'Home':
@@ -132,11 +137,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 +145,9 @@
     }
   }
 
-  $: charCount = $settings.charCount ? getCharCount(pages, page) : 0;
+  $: charCount = $settings.charCount ? getCharCount(pages, page).charCount : 0;
-  $: maxCharCount = getCharCount(pages);
+  $: maxCharCount = getCharCount(pages).charCount;
+  $: totalLineCount = getCharCount(pages).lineCount;
 
   let startX = 0;
   let startY = 0;
@@ -202,6 +203,50 @@
       }
     }
   }
+
+  $: {
+    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
+      });
+    }
+  }
+
+  onMount(() => {
+    if ($settings.defaultFullscreen) {
+      document.documentElement.requestFullscreen();
+    }
+  });
+
+  beforeNavigate(() => {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+
+    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 +259,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">
@@ -290,13 +340,17 @@
       <div
         class="flex flex-row"
         class:flex-row-reverse={!volumeSettings.rightToLeft}
+        style:filter={`invert(${$settings.invertColors ? 1 : 0})`}
         on:dblclick={onDoubleTap}
         role="none"
+        id="manga-panel"
       >
-        {#if showSecondPage()}
+        {#key page}
-          <MangaPage page={pages[index + 1]} src={Object.values(volume?.files)[index + 1]} />
+          {#if showSecondPage()}
-        {/if}
+            <MangaPage page={pages[index + 1]} src={Object.values(volume?.files)[index + 1]} />
-        <MangaPage page={pages[index]} src={Object.values(volume?.files)[index]} />
+          {/if}
+          <MangaPage page={pages[index]} src={Object.values(volume?.files)[index]} />
+        {/key}
       </div>
     </Panzoom>
   </div>
@@ -305,15 +359,17 @@
       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}
   <div class="fixed z-50 left-1/2 top-1/2">
     <Spinner />
   </div>
-{/if}
+{/if}

src/lib/components/Reader/TextBoxes.svelte

@@ -37,7 +37,7 @@
       return textBox;
     })
     .sort(({ area: a }, { area: b }) => {
-      return a - b;
+      return b - a;
     });
 
   $: fontWeight = $settings.boldFont ? 'bold' : '400';
@@ -54,7 +54,7 @@
         showCropper(URL.createObjectURL(src), sentence);
       } else {
         promptConfirmation('Add image to last created anki card?', async () => {
-          const imageData = await imageToWebp(src);
+          const imageData = await imageToWebp(src, $settings);
           updateLastCard(imageData, sentence);
         });
       }

src/lib/components/Settings/AnkiConnectSettings.svelte

@@ -13,12 +13,17 @@
   let pictureField = $settings.ankiConnectSettings.pictureField;
   let sentenceField = $settings.ankiConnectSettings.sentenceField;
 
+  let heightField = $settings.ankiConnectSettings.heightField;
+  let widthField = $settings.ankiConnectSettings.widthField;
+  let qualityField = $settings.ankiConnectSettings.qualityField;
+
   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: 'both', name: 'Both' },
+    { value: 'neither', name: 'Neither' }
   ];
 </script>
 
@@ -89,5 +94,40 @@
         />
       </Label>
     </div>
+    <hr>
+    <h4>Quality Settings</h4>
+    <Helper>Allows you to customize the file size stored on your devices</Helper>
+    <div>
+      <Label>Max Height (0 = Ignore; 200 Recommended):</Label>
+      <Input
+        {disabled}
+        type="number"
+        bind:value={heightField}
+        on:change={() => {updateAnkiSetting('heightField', heightField); if (heightField < 0) heightField = 0;}}
+        min={0}
+      />
+    </div>
+    <div>
+      <Label>Max Width (0 = Ignore; 200 Recommended):</Label>
+      <Input
+        {disabled}
+        type="number"
+        bind:value={widthField}
+        on:change={() => {updateAnkiSetting('widthField', widthField); if (widthField < 0) widthField = 0;}}
+        min={0}
+      />
+    </div>
+    <div>
+      <Label>Quality (Between 0 and 1; 0.5 Recommended):</Label>
+      <Input
+        {disabled}
+        type="number"
+        bind:value={qualityField}
+        on:change={() => updateAnkiSetting('qualityField', qualityField)}
+        min={0}
+        max={1} 
+        step="0.1"
+      />
+    </div>
   </div>
 </AccordionItem>

src/lib/components/Settings/CloudSync.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { AccordionItem, Button, Label, Input, Toggle } from 'flowbite-svelte';
+  import { syncConfig, pullAll, pushAll } from '$lib/settings/sync';
+  import { get } from 'svelte/store';
+
+  let keyLocal: string = get(syncConfig).key || '';
+
+  function saveKey() {
+    syncConfig.update((cfg) => ({ ...cfg, key: keyLocal || null }));
+  }
+
+  function toggleAuto() {
+    syncConfig.update((cfg) => ({ ...cfg, auto: !cfg.auto }));
+  }
+
+  function toggleNotifications() {
+    syncConfig.update((cfg) => ({ ...cfg, notifications: !cfg.notifications }));
+  }
+
+  async function onPull() {
+    try {
+      await pullAll();
+    } catch (e) {}
+  }
+
+  async function onPush() {
+    try {
+      await pushAll();
+    } catch (e) {}
+  }
+</script>
+
+<AccordionItem>
+  <span slot="header">Cloud Sync</span>
+  <div class="flex flex-col gap-4">
+    <div>
+      <Label>Sync Key</Label>
+      <div class="flex gap-2">
+        <Input class="flex-1" bind:value={keyLocal} placeholder="Enter a shared key" />
+        <Button on:click={saveKey}>Save</Button>
+      </div>
+    </div>
+    <div class="flex items-center gap-3">
+      <Toggle checked={get(syncConfig).auto} on:change={toggleAuto} />
+      <Label>Auto Sync</Label>
+    </div>
+    <div class="flex items-center gap-3">
+      <Toggle checked={get(syncConfig).notifications} on:change={toggleNotifications} />
+      <Label>Show Sync Notifications</Label>
+    </div>
+    <div class="flex gap-2">
+      <Button on:click={onPull} outline>Pull from cloud</Button>
+      <Button on:click={onPush} outline>Push to cloud</Button>
+    </div>
+    <p class="text-sm opacity-80">Use the same sync key across devices to share progress and settings. Manga files remain local or in Google Drive.</p>
+  </div>
+</AccordionItem>
+
+

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/ReaderToggles.svelte

@@ -3,15 +3,18 @@
   import { Toggle } from 'flowbite-svelte';
 
   $: toggles = [
+    { key: 'defaultFullscreen', text: 'Open reader in fullscreen', value: $settings.defaultFullscreen },
     { key: 'textEditable', text: 'Editable text', value: $settings.textEditable },
     { key: 'textBoxBorders', text: 'Text box borders', value: $settings.textBoxBorders },
     { key: 'displayOCR', text: 'OCR enabled', value: $settings.displayOCR },
     { 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 }
+    { key: 'quickActions', text: 'Show quick actions', value: $settings.quickActions },
+    { key: 'invertColors', text: 'Invert colors of the images', value: $settings.invertColors }
   ] as { key: SettingsKey; text: string; value: any }[];
 </script>
 

src/lib/components/Settings/Settings.svelte

@@ -13,6 +13,7 @@
   import VolumeSettings from './Volume/VolumeSettings.svelte';
   import About from './About.svelte';
   import QuickAccess from './QuickAccess.svelte';
+  import CloudSync from './CloudSync.svelte';
   import { beforeNavigate } from '$app/navigation';
 
   let transitionParams = {
@@ -33,7 +34,8 @@
   }
 
   beforeNavigate((nav) => {
-    if (!hidden) {
+    // Only block navigation if settings drawer is open and we're trying to navigate away
+    if (!hidden && nav.type !== 'popstate') {
       nav.cancel();
       hidden = true;
     }
@@ -56,13 +58,14 @@
   </div>
   <div class="flex flex-col gap-5">
     <Accordion flush>
-      <QuickAccess />
+      <QuickAccess bind:hidden />
       {#if isReader()}
         <VolumeSettings />
       {:else}
         <VolumeDefaults />
       {/if}
       <Profiles {onClose} />
+      <CloudSync />
       <ReaderSettings />
       <AnkiConnectSettings />
       <CatalogSettings />

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 { promptConfirmation } from '$lib/util';
-  import { CheckCircleSolid } from 'flowbite-svelte-icons';
+  import { ListgroupItem, Frame } from 'flowbite-svelte';
-  import type { ListGroupItemType } from 'flowbite-svelte/dist/types';
+  import { CheckCircleSolid, TrashBinSolid } from 'flowbite-svelte-icons';
+  import { goto } from '$app/navigation';
+  import { db } from '$lib/catalog/db';
 
-  export let item: string | ListGroupItemType;
+  export let volume: Volume;
-  const volume = item as 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">
+  <Frame rounded border class="divide-y divide-gray-200 dark:divide-gray-600">
-    <ListgroupItem>
+    <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}
+        <div class="flex gap-2">
-          <CheckCircleSolid />
+          <TrashBinSolid
-        {/if}
+            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 = '0.9.1'

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/server/db.ts

@@ -0,0 +1,77 @@
+import { Pool } from 'pg';
+import { env } from '$env/dynamic/private';
+
+let pool: Pool | undefined;
+
+function getPool(): Pool {
+  if (!pool) {
+    const connectionString = env.DATABASE_URL;
+    if (!connectionString) {
+      throw new Error('DATABASE_URL is not set');
+    }
+    pool = new Pool({ connectionString, max: 5 });
+  }
+  return pool;
+}
+
+export async function ensureSchema(): Promise<void> {
+  const client = await getPool().connect();
+  try {
+    await client.query(
+      `create table if not exists user_sync (
+        sync_key text primary key,
+        profiles jsonb,
+        current_profile text,
+        misc_settings jsonb,
+        volumes jsonb,
+        updated_at timestamptz default now()
+      )`
+    );
+  } finally {
+    client.release();
+  }
+}
+
+export type SyncRow = {
+  sync_key: string;
+  profiles: any | null;
+  current_profile: string | null;
+  misc_settings: any | null;
+  volumes: any | null;
+  updated_at: string;
+};
+
+export async function getSyncRow(syncKey: string): Promise<SyncRow | null> {
+  await ensureSchema();
+  const { rows } = await getPool().query('select * from user_sync where sync_key = $1', [syncKey]);
+  return rows[0] ?? null;
+}
+
+export async function upsertSyncRow(
+  syncKey: string,
+  data: Partial<Omit<SyncRow, 'sync_key' | 'updated_at'>>
+): Promise<SyncRow> {
+  await ensureSchema();
+  const { rows } = await getPool().query(
+    `insert into user_sync (sync_key, profiles, current_profile, misc_settings, volumes)
+     values ($1, $2, $3, $4, $5)
+     on conflict (sync_key) do update set
+       profiles = coalesce(excluded.profiles, user_sync.profiles),
+       current_profile = coalesce(excluded.current_profile, user_sync.current_profile),
+       misc_settings = coalesce(excluded.misc_settings, user_sync.misc_settings),
+       volumes = coalesce(excluded.volumes, user_sync.volumes),
+       updated_at = now()
+     returning *`,
+    [
+      syncKey,
+      data.profiles ?? null,
+      data.current_profile ?? null,
+      data.misc_settings ?? null,
+      data.volumes ?? null
+    ]
+  );
+  return rows[0];
+}
+
+
+

src/lib/settings/index.ts

@@ -1,3 +1,4 @@
 export * from './volume-data'
 export * from './settings'
-export * from './misc'
+export * from './misc'
+export * from './sync'

src/lib/settings/settings.ts

@@ -28,6 +28,9 @@ export type AnkiConnectSettings = {
   enabled: boolean;
   pictureField: string;
   sentenceField: string;
+  heightField: number;
+  widthField: number;
+  qualityField: number;
   cropImage: boolean;
   overwriteImage: boolean;
   grabSentence: boolean;
@@ -41,12 +44,14 @@ export type VolumeDefaults = {
 }
 
 export type Settings = {
+  defaultFullscreen: boolean;
   textEditable: boolean;
   textBoxBorders: boolean;
   displayOCR: boolean;
   boldFont: boolean;
   pageNum: boolean;
   charCount: boolean;
+  bounds: boolean;
   mobile: boolean;
   backgroundColor: string;
   swipeThreshold: number;
@@ -55,6 +60,7 @@ export type Settings = {
   quickActions: boolean;
   fontSize: FontSize;
   zoomDefault: ZoomModes;
+  invertColors: boolean;
   volumeDefaults: VolumeDefaults;
   ankiConnectSettings: AnkiConnectSettings;
 };
@@ -66,6 +72,7 @@ export type AnkiSettingsKey = keyof AnkiConnectSettings;
 export type VolumeDefaultsKey = keyof VolumeDefaults;
 
 const defaultSettings: Settings = {
+  defaultFullscreen: false,
   displayOCR: true,
   textEditable: false,
   textBoxBorders: false,
@@ -73,13 +80,15 @@ 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',
   zoomDefault: 'zoomFitToScreen',
+  invertColors: false,
   volumeDefaults: {
     singlePageView: false,
     rightToLeft: true,
@@ -92,6 +101,9 @@ const defaultSettings: Settings = {
     overwriteImage: true,
     pictureField: 'Picture',
     sentenceField: 'Sentence',
+    heightField: 0,
+    widthField: 0,
+    qualityField: 1,
     triggerMethod: 'both'
   }
 };
@@ -223,4 +235,4 @@ export function copyProfile(profileToCopy: string, newName: string) {
 
 export function changeProfile(profileId: string) {
   currentProfile.set(profileId)
-}
+}

src/lib/settings/sync.ts

@@ -0,0 +1,109 @@
+import { browser } from '$app/environment';
+import { derived, get, writable } from 'svelte/store';
+import { debounce, showSnackbar } from '$lib/util';
+import { currentProfile, profiles } from './settings';
+import { miscSettings } from './misc';
+import { volumes } from './volume-data';
+
+export type SyncConfig = {
+  key: string | null;
+  auto: boolean;
+  notifications: boolean;
+};
+
+const stored = browser ? window.localStorage.getItem('syncConfig') : undefined;
+const initial: SyncConfig = stored ? JSON.parse(stored) : { key: null, auto: false, notifications: true };
+export const syncConfig = writable<SyncConfig>(initial);
+
+syncConfig.subscribe((value) => {
+  if (browser) {
+    window.localStorage.setItem('syncConfig', JSON.stringify(value));
+  }
+});
+
+export const isSyncEnabled = derived(syncConfig, ($cfg) => Boolean($cfg.key));
+
+async function callApi(method: 'GET' | 'POST', payload?: any) {
+  if (!browser) return null;
+  const url = method === 'GET' ? `/api/sync?key=${encodeURIComponent(get(syncConfig).key || '')}` : '/api/sync';
+  const res = await fetch(url, {
+    method,
+    headers: { 'Content-Type': 'application/json' },
+    body: method === 'POST' ? JSON.stringify(payload) : undefined
+  });
+  if (!res.ok) throw new Error(await res.text());
+  return res.json();
+}
+
+export async function pullAll() {
+  const cfg = get(syncConfig);
+  if (!cfg.key) throw new Error('No sync key configured');
+  const data = await callApi('GET');
+  if (!data) return;
+
+  if (data.profiles) {
+    profiles.set(data.profiles);
+  }
+  if (data.current_profile) {
+    currentProfile.set(data.current_profile);
+  }
+  if (data.misc_settings) {
+    miscSettings.set(data.misc_settings);
+  }
+  if (data.volumes) {
+    volumes.set(data.volumes);
+  }
+  if (cfg.notifications) {
+    showSnackbar('Pulled from server');
+  }
+}
+
+export async function pushAll() {
+  const cfg = get(syncConfig);
+  if (!cfg.key) throw new Error('No sync key configured');
+
+  const payload = {
+    key: cfg.key,
+    profiles: get(profiles),
+    current_profile: get(currentProfile),
+    misc_settings: get(miscSettings),
+    volumes: get(volumes)
+  };
+  await callApi('POST', payload);
+  if (cfg.notifications) {
+    showSnackbar('Pushed to server');
+  }
+}
+
+function setupAutoSync() {
+  if (!browser) return;
+  let unsubscribeFns: Array<() => void> = [];
+
+  function resubscribe() {
+    unsubscribeFns.forEach((fn) => fn());
+    unsubscribeFns = [];
+
+    if (!get(syncConfig).auto || !get(syncConfig).key) return;
+
+    const schedulePush = () => debounce(() => {
+      pushAll().catch((error) => {
+        console.error('Auto-sync failed:', error);
+      });
+    }, 300);
+
+    unsubscribeFns.push(profiles.subscribe(() => schedulePush()));
+    unsubscribeFns.push(currentProfile.subscribe(() => schedulePush()));
+    unsubscribeFns.push(miscSettings.subscribe(() => schedulePush()));
+    unsubscribeFns.push(volumes.subscribe(() => schedulePush()));
+  }
+
+  resubscribe();
+  unsubscribeFns.push(syncConfig.subscribe(() => resubscribe()));
+}
+
+if (browser) {
+  setupAutoSync();
+}
+
+
+

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 a.mokuroData.volume.localeCompare(b.mokuroData.volume, undefined, {
-      return -1;
+      numeric: true,
-    }
+      sensitivity: 'base'
-    if (a.volumeName > b.volumeName) {
+    });
-      return 1;
-    }
-    return 0;
   }
 
   $: 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">
+    <Listgroup active class="flex-1 h-full w-full">
-      <VolumeItem {item} />
+      {#each manga as volume (volume.mokuroData.volume_uuid)}
+        <VolumeItem {volume} />
+      {/each}
     </Listgroup>
   </div>
 {:else}

src/routes/api/sync/+server.ts

@@ -0,0 +1,29 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { json } from '@sveltejs/kit';
+import { getSyncRow, upsertSyncRow } from '$lib/server/db';
+
+export const GET: RequestHandler = async ({ url }) => {
+  const syncKey = url.searchParams.get('key');
+  if (!syncKey) {
+    return json({ error: 'Missing key' }, { status: 400 });
+  }
+
+  const row = await getSyncRow(syncKey);
+  if (!row) {
+    return json({ profiles: null, current_profile: null, misc_settings: null, volumes: null, updated_at: null });
+  }
+  return json(row);
+};
+
+export const POST: RequestHandler = async ({ request }) => {
+  const body = await request.json();
+  const { key, profiles, current_profile, misc_settings, volumes } = body ?? {};
+  if (!key) {
+    return json({ error: 'Missing key' }, { status: 400 });
+  }
+  const row = await upsertSyncRow(key, { profiles, current_profile, misc_settings, volumes });
+  return json(row);
+};
+
+
+

src/routes/cloud/+page.svelte

@@ -0,0 +1,419 @@
+<script lang="ts">
+  import { processFiles } from '$lib/upload';
+  import Loader from '$lib/components/Loader.svelte';
+  import { formatBytes, showSnackbar, uploadFile } from '$lib/util';
+  import { Button, P, Progressbar } 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 accessToken = '';
+  let gapiLoaded = false;
+  let googleLoaded = false;
+
+  let readerFolderId = '';
+  let volumeDataId = '';
+  let profilesId = '';
+
+  let loadingMessage = '';
+  let errorMessage = '';
+
+  let completed = 0;
+  let totalSize = 0;
+  $: progress = Math.floor((completed / totalSize) * 100).toString();
+
+  function xhrDownloadFileId(fileId: string) {
+    return new Promise<Blob>((resolve, reject) => {
+      if (!gapiLoaded || !gapi.auth.getToken()) {
+        reject(new Error('Not authenticated'));
+        return;
+      }
+
+      const { access_token } = gapi.auth.getToken();
+      const xhr = new XMLHttpRequest();
+
+      completed = 0;
+      totalSize = 0;
+
+      xhr.open('GET', `https://www.googleapis.com/drive/v3/files/${fileId}?alt=media`);
+      xhr.setRequestHeader('Authorization', `Bearer ${access_token}`);
+      xhr.responseType = 'blob';
+
+      xhr.onprogress = ({ loaded, total }) => {
+        loadingMessage = '';
+        completed = loaded;
+        totalSize = total;
+      };
+
+      xhr.onabort = (event) => {
+        console.warn(`xhr ${fileId}: download aborted at ${event.loaded} of ${event.total}`);
+        showSnackbar('Download failed');
+        reject(new Error('Download aborted'));
+      };
+
+      xhr.onerror = (event) => {
+        console.error(`xhr ${fileId}: download error at ${event.loaded} of ${event.total}`);
+        showSnackbar('Download failed');
+        reject(new Error('Error downloading file'));
+      };
+
+      xhr.onload = () => {
+        completed = 0;
+        totalSize = 0;
+        resolve(xhr.response);
+      };
+
+      xhr.ontimeout = (event) => {
+        console.warn(`xhr ${fileId}: download timeout after ${event.loaded} of ${event.total}`);
+        showSnackbar('Download timed out');
+        reject(new Error('Timout downloading file'));
+      };
+
+      xhr.send();
+    });
+  }
+
+  async function connectDrive(resp?: any) {
+    if (resp?.error !== undefined) {
+      throw resp;
+    }
+
+    accessToken = resp?.access_token;
+    loadingMessage = 'Connecting to drive';
+
+    try {
+      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 = '';
+      errorMessage = '';
+
+      if (accessToken) {
+        showSnackbar('Connected to Google Drive');
+      }
+    } catch (error) {
+      console.error('Error connecting to Drive:', error);
+      errorMessage = 'Failed to connect to Google Drive. Please check your credentials.';
+      loadingMessage = '';
+    }
+  }
+
+  function signIn() {
+    if (!gapiLoaded || !googleLoaded) {
+      errorMessage = 'Google APIs not loaded yet. Please wait and try again.';
+      return;
+    }
+
+    if (gapi.client.getToken() === null) {
+      tokenClient.requestAccessToken({ prompt: 'consent' });
+    } else {
+      tokenClient.requestAccessToken({ prompt: '' });
+    }
+  }
+
+  onMount(() => {
+    // Check if environment variables are set
+    if (!CLIENT_ID || !API_KEY) {
+      errorMessage = 'Google Drive integration not configured. Please set VITE_GDRIVE_CLIENT_ID and VITE_GDRIVE_API_KEY environment variables.';
+      return;
+    }
+
+    // Load Google APIs
+    if (typeof gapi !== 'undefined') {
+      gapiLoaded = true;
+      gapi.load('client', async () => {
+        try {
+          await gapi.client.init({
+            apiKey: API_KEY,
+            discoveryDocs: [DISCOVERY_DOC]
+          });
+        } catch (error) {
+          console.error('Error initializing gapi client:', error);
+          errorMessage = 'Failed to initialize Google Drive client.';
+        }
+      });
+
+      gapi.load('picker', () => {});
+    } else {
+      errorMessage = 'Google APIs not loaded. Please check your internet connection.';
+    }
+
+    if (typeof google !== 'undefined') {
+      googleLoaded = true;
+      tokenClient = google.accounts.oauth2.initTokenClient({
+        client_id: CLIENT_ID,
+        scope: SCOPES,
+        callback: connectDrive
+      });
+    } else {
+      errorMessage = 'Google OAuth not loaded. Please check your internet connection.';
+    }
+  });
+
+  function createPicker() {
+    if (!googleLoaded || !accessToken) {
+      showSnackbar('Not connected to Google Drive');
+      return;
+    }
+
+    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) {
+    try {
+      if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
+        loadingMessage = 'Downloading from drive...';
+        const docs = data[google.picker.Response.DOCUMENTS];
+        const blob = await xhrDownloadFileId(docs[0].id);
+
+        loadingMessage = 'Adding to catalog...';
+
+        const file = new File([blob], docs[0].name);
+
+        await processFiles([file]);
+        loadingMessage = '';
+      }
+    } catch (error) {
+      showSnackbar('Something went wrong');
+      loadingMessage = '';
+      console.error(error);
+    }
+  }
+
+  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 errorMessage}
+    <div class="bg-red-900/20 border border-red-700 rounded-lg p-4 mb-4">
+      <p class="text-red-400">{errorMessage}</p>
+    </div>
+  {/if}
+
+  {#if loadingMessage || completed > 0}
+    <Loader>
+      {#if completed > 0}
+        <P>{formatBytes(completed)} / {formatBytes(totalSize)}</P>
+        <Progressbar {progress} />
+      {:else}
+        {loadingMessage}
+      {/if}
+    </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}
+        disabled={!gapiLoaded || !googleLoaded}
+      >
+        <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 !gapiLoaded || !googleLoaded}
+        <p class="text-sm text-gray-400 mt-2">Loading Google APIs...</p>
+      {/if}
+    </div>
+  {/if}
+</div>

src/routes/upload/+page.svelte

@@ -6,7 +6,7 @@
   import { promptConfirmation, showSnackbar } from '$lib/util';
   import { P, Progressbar } from 'flowbite-svelte';
   import { onMount } from 'svelte';
-  export const BASE_URL = 'https://www.mokuro.moe/manga';
+  export const BASE_URL = $page.url.searchParams.get('source') || 'https://mokuro.moe/manga';
 
   const manga = $page.url.searchParams.get('manga');
   const volume = $page.url.searchParams.get('volume');

static/manifest.json

@@ -53,7 +53,7 @@
   ],
   "start_url": "/",
   "background_color": "#030712",
-  "display": "standalone",
+  "display": "fullscreen",
   "scope": "/",
   "theme_color": "#030712",
   "description": "Reader for Mokuro processed manga"

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */