add postgres integration to save progress across devices

.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
+*~

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"]

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

@@ -6,6 +6,7 @@
     "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 .",
@@ -37,6 +38,7 @@
   },
   "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",
@@ -44,6 +46,7 @@
     "@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"
   }
 }

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/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;
     }
@@ -63,6 +65,7 @@
         <VolumeDefaults />
       {/if}
       <Profiles {onClose} />
+      <CloudSync />
       <ReaderSettings />
       <AnkiConnectSettings />
       <CatalogSettings />

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/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/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

@@ -23,12 +23,15 @@
 
   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;
@@ -36,6 +39,11 @@
 
   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();
 
@@ -88,50 +96,61 @@
     accessToken = resp?.access_token;
     loadingMessage = 'Connecting to drive';
 
-    const { result: readerFolderRes } = await gapi.client.drive.files.list({
-      q: `mimeType='application/vnd.google-apps.folder' and name='${READER_FOLDER}'`,
-      fields: 'files(id)'
-    });
-
-    if (readerFolderRes.files?.length === 0) {
-      const { result: createReaderFolderRes } = await gapi.client.drive.files.create({
-        resource: { mimeType: FOLDER_MIME_TYPE, name: READER_FOLDER },
-        fields: 'id'
+    try {
+      const { result: readerFolderRes } = await gapi.client.drive.files.list({
+        q: `mimeType='application/vnd.google-apps.folder' and name='${READER_FOLDER}'`,
+        fields: 'files(id)'
       });
 
-      readerFolderId = createReaderFolderRes.id || '';
-    } else {
-      const id = readerFolderRes.files?.[0]?.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 = 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)'
-    });
+      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 || '';
-    }
+      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)'
-    });
+      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 || '';
-    }
+      if (profilesRes.files?.length !== 0) {
+        profilesId = profilesRes.files?.[0].id || '';
+      }
 
-    loadingMessage = '';
+      loadingMessage = '';
+      errorMessage = '';
 
-    if (accessToken) {
-      showSnackbar('Connected to Google Drive');
+      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 {
@@ -140,23 +159,50 @@
   }
 
   onMount(() => {
-    gapi.load('client', async () => {
-      await gapi.client.init({
-        apiKey: API_KEY,
-        discoveryDocs: [DISCOVERY_DOC]
+    // 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', () => {});
+      gapi.load('picker', () => {});
+    } else {
+      errorMessage = 'Google APIs not loaded. Please check your internet connection.';
+    }
 
-    tokenClient = google.accounts.oauth2.initTokenClient({
-      client_id: CLIENT_ID,
-      scope: SCOPES,
-      callback: 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)
@@ -293,6 +339,12 @@
 </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}
@@ -352,12 +404,16 @@
       <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>

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} */