New reader testing

.dockerignore

@@ -1,28 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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
 
-## Usage:
+## Useage:
 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

@@ -1,38 +0,0 @@
-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,12 +1,11 @@
 {
   "name": "z-reader",
-  "version": "0.9.1",
+  "version": "0.9.0",
   "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 .",
@@ -38,15 +37,12 @@
   },
   "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

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

src/app.html

@@ -6,7 +6,7 @@
     <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>

src/lib/anki-connect/cropper.ts

@@ -1,7 +1,6 @@
 import { showSnackbar } from '$lib/util';
 import { writable } from 'svelte/store';
-import { blobToBase64, imageResize } from '.';
+import { blobToBase64 } from '.';
-import { Settings } from '$lib/settings';
 
 type CropperModal = {
   open: boolean;
@@ -35,7 +34,7 @@ function getRadianAngle(degreeValue: number) {
 
 export type Pixels = { width: number; height: number; x: number; y: number }
 
-export async function getCroppedImg(imageSrc: string, pixelCrop: Pixels, settings: Settings, rotation = 0 ) {
+export async function getCroppedImg(imageSrc: string, pixelCrop: Pixels, rotation = 0) {
   const image = await createImage(imageSrc);
   const canvas = new OffscreenCanvas(image.width, image.height);
   const ctx = canvas.getContext('2d');
@@ -73,8 +72,7 @@ export async function getCroppedImg(imageSrc: string, pixelCrop: Pixels, setting
     Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y)
   );
 
-  await imageResize(canvas, ctx, settings.ankiConnectSettings.widthField, settings.ankiConnectSettings.heightField);
+  const blob = await canvas.convertToBlob({ type: 'image/webp' });
-  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, settings } from "$lib/settings";
+import { settings } from "$lib/settings";
 import { showSnackbar } from "$lib/util"
 import { get } from "svelte/store";
 
@@ -50,44 +50,20 @@ export async function blobToBase64(blob: Blob) {
   });
 }
 
-export async function imageToWebp(source: File, settings: Settings) {
+export async function imageToWebp(source: File) {
   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);
-    await imageResize(canvas, context, settings.ankiConnectSettings.widthField, settings.ankiConnectSettings.heightField);
+    const blob = await canvas.convertToBlob({ type: 'image/webp' });
-    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,
@@ -126,7 +102,7 @@ export async function updateLastCard(imageData: string | null | undefined, sente
         id,
         fields,
         picture: {
-          filename: `mokuro_${id}.webp`,
+          filename: `_${id}.webp`,
           data: imageData.split(';base64,')[1],
           fields: [pictureField],
         },

src/lib/components/CatalogItem.svelte

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

src/lib/components/NavBar.svelte

@@ -37,7 +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')} />
+      <!-- <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, $settings);
+      const imageData = await getCroppedImg($cropperStore.image, pixels);
       updateLastCard(imageData, $cropperStore.sentence);
       close();
     }

src/lib/components/Reader/MangaPage.svelte

@@ -35,10 +35,17 @@
 
 <div
   draggable="false"
-  style:width={`${page.img_width}px`}
+  style:width={`${window.innerWidth}px`}
-  style:height={`${page.img_height}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

@@ -40,7 +40,7 @@
         showCropper(URL.createObjectURL(src));
       } else {
         promptConfirmation('Add image to last created anki card?', async () => {
-          const imageData = await imageToWebp(src, $settings);
+          const imageData = await imageToWebp(src);
           updateLastCard(imageData);
         });
       }

src/lib/components/Reader/Reader.svelte

@@ -23,7 +23,6 @@
   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;
@@ -221,17 +220,7 @@
     }
   }
 
-  onMount(() => {
-    if ($settings.defaultFullscreen) {
-      document.documentElement.requestFullscreen();
-    }
-  });
-
   beforeNavigate(() => {
-    if (document.exitFullscreen) {
-      document.exitFullscreen();
-    }
-
     if (volume) {
       const { charCount, lineCount } = getCharCount(pages, page);
 
@@ -340,17 +329,14 @@
       <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"
       >
-        {#key page}
+        {#if showSecondPage()}
-          {#if showSecondPage()}
+          <MangaPage page={pages[index + 1]} src={Object.values(volume?.files)[index + 1]} />
-            <MangaPage page={pages[index + 1]} src={Object.values(volume?.files)[index + 1]} />
+        {/if}
-          {/if}
+        <MangaPage page={pages[index]} src={Object.values(volume?.files)[index]} />
-          <MangaPage page={pages[index]} src={Object.values(volume?.files)[index]} />
-        {/key}
       </div>
     </Panzoom>
   </div>

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);
+      let [_xmin, _ymin, _xmax, _ymax] = box;
-      const ymin = clamp(_ymin, 0, img_height);
+      console.log(box);
-      const xmax = clamp(_xmax, 0, img_width);
+
-      const ymax = clamp(_ymax, 0, img_height);
+      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;
@@ -54,7 +59,7 @@
         showCropper(URL.createObjectURL(src), sentence);
       } else {
         promptConfirmation('Add image to last created anki card?', async () => {
-          const imageData = await imageToWebp(src, $settings);
+          const imageData = await imageToWebp(src);
           updateLastCard(imageData, sentence);
         });
       }

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

@@ -13,10 +13,6 @@
   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 = [
@@ -94,40 +90,5 @@
         />
       </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

@@ -1,59 +0,0 @@
-<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/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

@@ -3,7 +3,6 @@
   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 },
@@ -13,8 +12,7 @@
     { 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,7 +13,6 @@
   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 = {
@@ -34,8 +33,7 @@
   }
 
   beforeNavigate((nav) => {
-    // Only block navigation if settings drawer is open and we're trying to navigate away
+    if (!hidden) {
-    if (!hidden && nav.type !== 'popstate') {
       nav.cancel();
       hidden = true;
     }
@@ -65,7 +63,6 @@
         <VolumeDefaults />
       {/if}
       <Profiles {onClose} />
-      <CloudSync />
       <ReaderSettings />
       <AnkiConnectSettings />
       <CatalogSettings />

src/lib/consts/index.ts

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

src/lib/server/db.ts

@@ -1,77 +0,0 @@
-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,4 +1,3 @@
 export * from './volume-data'
 export * from './settings'
 export * from './misc'
-export * from './sync'

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'
@@ -28,9 +30,6 @@ export type AnkiConnectSettings = {
   enabled: boolean;
   pictureField: string;
   sentenceField: string;
-  heightField: number;
-  widthField: number;
-  qualityField: number;
   cropImage: boolean;
   overwriteImage: boolean;
   grabSentence: boolean;
@@ -44,7 +43,7 @@ export type VolumeDefaults = {
 }
 
 export type Settings = {
-  defaultFullscreen: boolean;
+  reader: Readers,
   textEditable: boolean;
   textBoxBorders: boolean;
   displayOCR: boolean;
@@ -60,7 +59,6 @@ export type Settings = {
   quickActions: boolean;
   fontSize: FontSize;
   zoomDefault: ZoomModes;
-  invertColors: boolean;
   volumeDefaults: VolumeDefaults;
   ankiConnectSettings: AnkiConnectSettings;
 };
@@ -72,7 +70,7 @@ export type AnkiSettingsKey = keyof AnkiConnectSettings;
 export type VolumeDefaultsKey = keyof VolumeDefaults;
 
 const defaultSettings: Settings = {
-  defaultFullscreen: false,
+  reader: 'classic',
   displayOCR: true,
   textEditable: false,
   textBoxBorders: false,
@@ -88,7 +86,6 @@ const defaultSettings: Settings = {
   quickActions: true,
   fontSize: 'auto',
   zoomDefault: 'zoomFitToScreen',
-  invertColors: false,
   volumeDefaults: {
     singlePageView: false,
     rightToLeft: true,
@@ -101,9 +98,6 @@ const defaultSettings: Settings = {
     overwriteImage: true,
     pictureField: 'Picture',
     sentenceField: 'Sentence',
-    heightField: 0,
-    widthField: 0,
-    qualityField: 1,
     triggerMethod: 'both'
   }
 };

src/lib/settings/sync.ts

@@ -1,109 +0,0 @@
-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/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/api/sync/+server.ts

@@ -1,29 +0,0 @@
-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

@@ -2,7 +2,7 @@
   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 { Button, Frame, Listgroup, ListgroupItem } from 'flowbite-svelte';
   import { onMount } from 'svelte';
   import { promptConfirmation } from '$lib/util';
   import { GoogleSolid } from 'flowbite-svelte-icons';
@@ -22,70 +22,63 @@
   const type = 'application/json';
 
   let tokenClient: any;
-  let accessToken = '';
+  let zips: gapi.client.drive.File[];
-  let gapiLoaded = false;
+  let loadingMessage = '';
-  let googleLoaded = false;
-
   let readerFolderId = '';
   let volumeDataId = '';
   let profilesId = '';
 
-  let loadingMessage = '';
+  async function fetchZips(folderId: string) {
-  let errorMessage = '';
+    const { result } = await gapi.client.drive.files.list({
-
+      q: `'${folderId}' in parents and (mimeType='${FOLDER_MIME_TYPE}' or (fileExtension='zip' or fileExtension='cbz'))`,
-  let completed = 0;
+      fields: 'files(id, name, mimeType, size)'
-  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();
     });
+
+    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) {
@@ -93,64 +86,50 @@
       throw resp;
     }
 
-    accessToken = resp?.access_token;
     loadingMessage = 'Connecting to drive';
 
-    try {
+    const { result: readerFolderRes } = await gapi.client.drive.files.list({
-      const { result: readerFolderRes } = await gapi.client.drive.files.list({
+      q: `mimeType='application/vnd.google-apps.folder' and name='${READER_FOLDER}'`,
-        q: `mimeType='application/vnd.google-apps.folder' and name='${READER_FOLDER}'`,
+      fields: 'files(id)'
-        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'
       });
 
-      if (readerFolderRes.files?.length === 0) {
+      readerFolderId = createReaderFolderRes.id || '';
-        const { result: createReaderFolderRes } = await gapi.client.drive.files.create({
+    } else {
-          resource: { mimeType: FOLDER_MIME_TYPE, name: READER_FOLDER },
+      const id = readerFolderRes.files?.[0]?.id || '';
-          fields: 'id'
+      zips = [...((await fetchZips(id)) || [])];
-        });
 
-        readerFolderId = createReaderFolderRes.id || '';
+      readerFolderId = 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 = '';
     }
+
+    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 (!gapiLoaded || !googleLoaded) {
-      errorMessage = 'Google APIs not loaded yet. Please wait and try again.';
-      return;
-    }
-
     if (gapi.client.getToken() === null) {
       tokenClient.requestAccessToken({ prompt: 'consent' });
     } else {
@@ -159,87 +138,24 @@
   }
 
   onMount(() => {
-    // Check if environment variables are set
+    gapi.load('client', async () => {
-    if (!CLIENT_ID || !API_KEY) {
+      await gapi.client.init({
-      errorMessage = 'Google Drive integration not configured. Please set VITE_GDRIVE_CLIENT_ID and VITE_GDRIVE_API_KEY environment variables.';
+        apiKey: API_KEY,
-      return;
+        discoveryDocs: [DISCOVERY_DOC]
-    }
-
-    // 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', () => {});
+      if (gapi.client.getToken() !== null) {
-    } else {
+        loadingMessage = 'Connecting to drive';
-      errorMessage = 'Google APIs not loaded. Please check your internet connection.';
+        connectDrive();
-    }
-
-    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 = '';
+    tokenClient = google.accounts.oauth2.initTokenClient({
-      console.error(error);
+      client_id: CLIENT_ID,
-    }
+      scope: SCOPES,
-  }
+      callback: connectDrive
+    });
+  });
 
   async function onUploadVolumeData() {
     const metadata = {
@@ -247,11 +163,12 @@
       name: VOLUME_DATA_FILE,
       parents: [volumeDataId ? null : readerFolderId]
     };
+    const { access_token } = gapi.auth.getToken();
 
     loadingMessage = 'Uploading volume data';
 
     const res = await uploadFile({
-      accessToken,
+      accessToken: access_token,
       fileId: volumeDataId,
       metadata,
       localStorageId: 'volumes',
@@ -261,9 +178,7 @@
     volumeDataId = res.id;
     loadingMessage = '';
 
-    if (volumeDataId) {
+    showSnackbar('Volume data uploaded');
-      showSnackbar('Volume data uploaded');
-    }
   }
 
   async function onUploadProfiles() {
@@ -272,11 +187,12 @@
       name: PROFILES_FILE,
       parents: [profilesId ? null : readerFolderId]
     };
+    const { access_token } = gapi.auth.getToken();
 
     loadingMessage = 'Uploading profiles';
 
     const res = await uploadFile({
-      accessToken,
+      accessToken: access_token,
       fileId: profilesId,
       metadata,
       localStorageId: 'profiles',
@@ -286,9 +202,7 @@
     profilesId = res.id;
     loadingMessage = '';
 
-    if (profilesId) {
+    showSnackbar('Profiles uploaded');
-      showSnackbar('Profiles uploaded');
-    }
   }
 
   async function onDownloadVolumeData() {
@@ -339,31 +253,15 @@
 </svelte:head>
 
 <div class="p-2 h-[90svh]">
-  {#if errorMessage}
+  {#if loadingMessage}
-    <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}
+      {loadingMessage}
-        <P>{formatBytes(completed)} / {formatBytes(totalSize)}</P>
-        <Progressbar {progress} />
-      {:else}
-        {loadingMessage}
-      {/if}
     </Loader>
-  {:else if accessToken}
+  {:else if zips}
-    <div class="flex justify-between items-center gap-6 flex-col">
+    <div class="flex flex-col gap-2">
-      <h2 class="text-3xl font-semibold text-center pt-2">Google Drive:</h2>
+      <div class="flex justify-between items-center gap-2 flex-col sm:flex-row">
-      <p class="text-center">
+        <h2 class="text-2xl font-semibold text-center">Google Drive:</h2>
-        Add your zipped manga files to the <span class="text-primary-700">{READER_FOLDER}</span> folder
+        <div class="flex flex-col sm:flex-row gap-2 sm:w-auto w-full">
-        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)}
@@ -379,8 +277,6 @@
               Download volume data
             </Button>
           {/if}
-        </div>
-        <div class="flex-col gap-2 flex">
           <Button
             color="dark"
             on:click={() => promptConfirmation('Upload profiles?', onUploadProfiles)}
@@ -398,22 +294,44 @@
           {/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}
-    <div class="flex justify-center pt-0 sm:pt-32">
+    <button
-      <button
+      class="w-full border rounded-lg border-slate-600 p-10 border-opacity-50 hover:bg-slate-800"
-        class="w-full border rounded-lg border-slate-600 p-10 border-opacity-50 hover:bg-slate-800 max-w-3xl"
+      on:click={signIn}
-        on:click={signIn}
+    >
-        disabled={!gapiLoaded || !googleLoaded}
+      <div class="flex sm:flex-row flex-col gap-2 items-center justify-center">
-      >
+        <GoogleSolid size="lg" />
-        <div class="flex sm:flex-row flex-col gap-2 items-center justify-center">
+        <h2 class="text-lg">Connect to Google Drive</h2>
-          <GoogleSolid size="lg" />
+      </div>
-          <h2 class="text-lg">Connect to Google Drive</h2>
+    </button>
-        </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 = $page.url.searchParams.get('source') || 'https://mokuro.moe/manga';
+  export const BASE_URL = 'https://www.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": "fullscreen",
+  "display": "standalone",
   "scope": "/",
   "theme_color": "#030712",
   "description": "Reader for Mokuro processed manga"

svelte.config.js

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