mobile: update lock file

Signed-off-by: parthiv-m <parthivmenon.dev@gmail.com>
Co-authored-by: Abdullah Atta <thecodrr@protonmail.com>

.commitlintrc.js

@@ -15,6 +15,7 @@ const SCOPES = [
   "mobile",
   "web",
   "vericrypt",
+  "monograph",
   "desktop",
   "crypto",
   "editor",

.github/workflows/android.publish.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Use specific Java version for the builds
         uses: joschi/setup-jdk@v2
         with:
-          java-version: "11"
+          java-version: "17"
           architecture: "x64"
 
       - name: Install node modules

.github/workflows/monograph.publish.yml

@@ -0,0 +1,83 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+# GitHub recommends pinning actions to a commit SHA.
+# To get a newer version, you will need to update the SHA.
+# You can also reference a tag or branch, but the action may change without warning.
+
+name: Publish @notesnook/monograph
+
+on: workflow_dispatch
+
+jobs:
+  push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      contents: read
+      attestations: write
+      id-token: write
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=monograph
+
+      - name: Generate build
+        run: npx nx build @notesnook/monograph
+
+      # Setup Buildx
+      - name: Docker Setup Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v8
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+          ecr: auto
+          logout: true
+
+      # Pull previous image from docker hub to use it as cache to improve the image build time.
+      - name: docker pull cache image
+        continue-on-error: true
+        run: docker pull streetwriters/monograph:latest
+
+      # Setup QEMU
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: streetwriters/monograph
+
+      - name: Build and push Docker image
+        id: push
+        uses: docker/build-push-action@v6
+        with:
+          context: apps/monograph
+          file: apps/monograph/Dockerfile
+          push: true
+          platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v8
+          tags: ${{ steps.meta.outputs.tags }}
+          cache-from: streetwriters/monograph:latest
+
+      - name: Generate artifact attestation
+        uses: actions/attest-build-provenance@v1
+        with:
+          subject-name: index.docker.io/streetwriters/monograph
+          subject-digest: ${{ steps.push.outputs.digest }}
+          push-to-registry: true

apps/desktop/README.md

@@ -40,12 +40,35 @@ Once you are inside the `./notesnook` directory, run the preparation step:
 npm install
 ```
 
-Now you can finally start the desktop app:
+Now you can finally start the desktop app for development:
 
 ```bash
 npm run start:desktop
 ```
 
+To run the app in release mode:
+
+```bash
+npm run staging -- --rebuild
+```
+
+This will compile and run the app in production mode but it won't generate any packages. To create the final packages, you'll have to run the following commands:
+
+```bash
+npm run release -- --rebuild
+
+# For macOS
+npx electron-builder --mac dmg --arm64 --x64 -publish never
+
+# For Linux (AppImage)
+npx electron-builder --linux AppImage:x64 AppImage:arm64 -publish never
+
+# For Windows
+npx electron-builder --win --publish never
+```
+
+Feel free to play around with the `electron-builder` command to get the packages you need. `npx electron-builder --help` is a great resource to learn different commands & platforms supported by `electron-builder`.
+
 ## Developer guide
 
 ### The tech stack

apps/desktop/app-update.yml

@@ -1,3 +1,4 @@
 owner: streetwriters
 repo: notesnook
 provider: github
+updaterCacheDirName: Notesnook

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "3.0.6",
+  "version": "3.0.18",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/index.js",
@@ -11,29 +11,29 @@
   "repository": "https://github.com/streetwriters/notesnook",
   "license": "GPL-3.0-or-later",
   "dependencies": {
-    "@notesnook/crypto": "file:../../packages/crypto",
-    "@trpc/client": "10.38.3",
-    "@trpc/server": "10.38.3",
-    "better-sqlite3-multiple-ciphers": "^9.5.0",
-    "electron-trpc": "0.5.2",
-    "electron-updater": "6.1.4",
-    "icojs": "^0.17.1",
-    "sodium-native": "^4.1.1",
+    "@trpc/client": "10.45.2",
+    "@trpc/server": "10.45.2",
+    "better-sqlite3-multiple-ciphers": "11.2.1",
+    "electron-trpc": "0.6.1",
+    "electron-updater": "^6.3.4",
+    "icojs": "^0.19.4",
     "typed-emitter": "^2.1.0",
-    "yargs": "^17.6.2",
-    "zod": "^3.21.4"
+    "yargs": "^17.7.2",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@types/node": "18.16.1",
-    "@types/yargs": "^17.0.24",
-    "chokidar": "^3.5.3",
-    "electron": "^29.3.1",
-    "electron-builder": "^24.13.3",
-    "esbuild": "^0.20.0",
-    "node-gyp-build": "^4.8.0",
+    "@streetwriters/kysely": "^0.27.4",
+    "@types/node": "22.7.0",
+    "@types/yargs": "^17.0.33",
+    "chokidar": "^4.0.1",
+    "electron": "^30.5.1",
+    "electron-builder": "^25.0.5",
+    "esbuild": "^0.24.0",
+    "node-abi": "^3.68.0",
+    "node-gyp-build": "^4.8.2",
     "prebuildify": "^6.0.1",
     "tree-kill": "^1.2.2",
-    "undici": "^6.14.1"
+    "undici": "^6.19.8"
   },
   "optionalDependencies": {
     "dmg-license": "^1.0.11"
@@ -158,7 +158,8 @@
     },
     "nsis": {
       "oneClick": true,
-      "createDesktopShortcut": "always"
+      "createDesktopShortcut": "always",
+      "deleteAppDataOnUninstall": true
     },
     "linux": {
       "target": [

apps/desktop/patches/app-builder-lib+25.0.5.patch

@@ -1,8 +1,8 @@
 diff --git a/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js b/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
-index fcb7f54..cb1c7f7 100644
+index 739a48c..7a7b4af 100644
 --- a/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
 +++ b/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
-@@ -116,6 +116,7 @@ class LinuxTargetHelper {
+@@ -117,6 +117,7 @@ class LinuxTargetHelper {
              StartupWMClass: appInfo.productName,
              ...extra,
              ...targetSpecificOptions.desktop,
@@ -10,7 +10,7 @@ index fcb7f54..cb1c7f7 100644
          };
          const description = this.getDescription(targetSpecificOptions);
          if (!(0, builder_util_1.isEmptyOrSpaces)(description)) {
-@@ -159,6 +160,23 @@ class LinuxTargetHelper {
+@@ -160,6 +161,23 @@ class LinuxTargetHelper {
              data += `\n${name}=${desktopMeta[name]}`;
          }
          data += "\n";

apps/desktop/patches/electron-trpc+0.5.2.patch

@@ -1,23 +0,0 @@
-diff --git a/node_modules/electron-trpc/dist/main.mjs b/node_modules/electron-trpc/dist/main.mjs
-index 379cf3b..2644e5d 100644
---- a/node_modules/electron-trpc/dist/main.mjs
-+++ b/node_modules/electron-trpc/dist/main.mjs
-@@ -221,9 +221,16 @@ class G {
-     i(this, c).includes(r) || (i(this, c).push(r), I(this, T, W).call(this, r));
-   }
-   detachWindow(r) {
-+    
-     y(this, c, i(this, c).filter((n) => n !== r));
--    for (const [n, t] of i(this, u).entries())
--      n.startsWith(`${r.webContents.id}-`) && (t.unsubscribe(), i(this, u).delete(n));
-+    for (const [n, t] of i(this, u).entries()) {
-+      try {
-+        n.startsWith(`${r.webContents.id}-`) && (t.unsubscribe(), i(this, u).delete(n));
-+      } catch(e) {
-+        console.error(e);
-+        // ignore
-+      }
-+    }
-   }
- }
- c = new WeakMap(), u = new WeakMap(), T = new WeakSet(), W = function(r) {

apps/desktop/patches/electron-trpc+0.6.1.patch

@@ -0,0 +1,39 @@
+diff --git a/node_modules/electron-trpc/dist/main.mjs b/node_modules/electron-trpc/dist/main.mjs
+index 07971db..b67a3cf 100644
+--- a/node_modules/electron-trpc/dist/main.mjs
++++ b/node_modules/electron-trpc/dist/main.mjs
+@@ -537,8 +537,15 @@ class be {
+   attachWindow(r) {
+     F(this, w).includes(r) || (y("Attaching window", r.id), F(this, w).push(r), v(this, N, Z).call(this, r));
+   }
+-  detachWindow(r) {
+-    y("Detaching window", r.id), L(this, w, F(this, w).filter((e) => e !== r)), v(this, R, M).call(this, { webContentsId: r.webContents.id });
++  detachWindow(r, webContentsId) {
++    y("Detaching window", r.id);
++
++    if (r.isDestroyed() && webContentsId === undefined) {
++      throw new Error('webContentsId is required when calling detachWindow on a destroyed window');
++    }
++
++    L(this, w, F(this, w).filter((e) => e !== r));
++    v(this, R, M).call(this, { webContentsId: webContentsId ?? r.webContents.id });
+   }
+ }
+ w = new WeakMap(), E = new WeakMap(), R = new WeakSet(), M = function({
+@@ -548,6 +555,7 @@ w = new WeakMap(), E = new WeakMap(), R = new WeakSet(), M = function({
+   for (const [i, a] of F(this, E).entries())
+     i.startsWith(`${r}-${e ?? ""}`) && (y("Closing subscription", i), a.unsubscribe(), F(this, E).delete(i));
+ }, N = new WeakSet(), Z = function(r) {
++  const webContentsId = r.webContents.id;
+   r.webContents.on("did-start-navigation", ({ frame: e }) => {
+     y(
+       "Handling webContents `did-start-navigation` event",
+@@ -558,7 +566,7 @@ w = new WeakMap(), E = new WeakMap(), R = new WeakSet(), M = function({
+       frameRoutingId: e.routingId
+     });
+   }), r.webContents.on("destroyed", () => {
+-    y("Handling webContents `destroyed` event"), this.detachWindow(r);
++    y("Handling webContents `destroyed` event"), this.detachWindow(r, webContentsId);
+   });
+ };
+ const me = ({

apps/desktop/patches/node-gyp-build+4.8.0.patch

@@ -1,46 +0,0 @@
-diff --git a/node_modules/node-gyp-build/bin.js b/node_modules/node-gyp-build/bin.js
-index 3fbcdf0..7ca3ab5 100644
---- a/node_modules/node-gyp-build/bin.js
-+++ b/node_modules/node-gyp-build/bin.js
-@@ -16,7 +16,8 @@ if (!buildFromSource()) {
- }
- 
- function build () {
--  var args = [os.platform() === 'win32' ? 'node-gyp.cmd' : 'node-gyp', 'rebuild']
-+  var win32 = os.platform() === 'win32'
-+  var args = [win32 ? 'node-gyp.cmd' : 'node-gyp', 'rebuild']
- 
-   try {
-     var pkg = require('node-gyp/package.json')
-@@ -27,7 +28,7 @@ function build () {
-     ]
-   } catch (_) {}
- 
--  proc.spawn(args[0], args.slice(1), { stdio: 'inherit' }).on('exit', function (code) {
-+  proc.spawn(args[0], args.slice(1), { stdio: 'inherit', shell: win32, windowsHide: true }).on('exit', function (code) {
-     if (code || !process.argv[3]) process.exit(code)
-     exec(process.argv[3]).on('exit', function (code) {
-       process.exit(code)
-@@ -45,15 +46,18 @@ function preinstall () {
- 
- function exec (cmd) {
-   if (process.platform !== 'win32') {
--    var shell = os.platform() === 'android' ? 'sh' : '/bin/sh'
--    return proc.spawn(shell, ['-c', '--', cmd], {
-+    var shell = os.platform() === 'android' ? 'sh' : true
-+    return proc.spawn(cmd, [], {
-+      shell,
-       stdio: 'inherit'
-     })
-   }
- 
--  return proc.spawn(process.env.comspec || 'cmd.exe', ['/s', '/c', '"' + cmd + '"'], {
-+  return proc.spawn(cmd, [], {
-     windowsVerbatimArguments: true,
--    stdio: 'inherit'
-+    stdio: 'inherit',
-+    shell: true,
-+    windowsHide: true
-   })
- }
- 

apps/desktop/scripts/build.mjs

@@ -46,11 +46,11 @@ if (args.rebuild || !existsSync(path.join(webAppPath, "build"))) {
 // temporary until there's support for prebuilt binaries for linux ARM
 if (os.platform() === "linux") await patchBetterSQLite3();
 
-if (os.platform() === "win32")
-  await exec(
-    `npx prebuildify --arch=arm64 --strip -t electron@${packageJson.devDependencies.electron}`,
-    path.join(__dirname, "..", "node_modules", "sodium-native")
-  );
+// if (os.platform() === "win32")
+//   await exec(
+//     `npx prebuildify --arch=arm64 --strip -t electron@${packageJson.devDependencies.electron}`,
+//     path.join(__dirname, "..", "node_modules", "sodium-native")
+//   );
 
 await fs.cp(path.join(webAppPath, "build"), "build", {
   recursive: true,
@@ -94,7 +94,7 @@ async function patchBetterSQLite3() {
   );
   const json = JSON.parse(await readFile(jsonPath, "utf-8"));
 
-  json.version = "9.5.1";
+  json.version = "11.2.2";
   json.homepage = "https://github.com/thecodrr/better-sqlite3-multiple-ciphers";
   json.repository.url =
     "git://github.com/thecodrr/better-sqlite3-multiple-ciphers.git";

apps/desktop/src/api/os-integration.ts

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { initTRPC } from "@trpc/server";
 import { z } from "zod";
-import { dialog, nativeTheme, Notification, shell } from "electron";
+import { app, dialog, nativeTheme, Notification, shell } from "electron";
 import { AutoLaunch } from "../utils/autolaunch";
 import { config, DesktopIntegration } from "../utils/config";
 import { bringToFront } from "../utils/bring-to-front";
@@ -152,6 +152,10 @@ export const osIntegrationRouter = t.router({
     await rm(input);
   }),
 
+  restart: t.procedure.query(() => {
+    app.relaunch();
+    app.exit();
+  }),
   showNotification: t.procedure
     .input(NotificationOptions)
     .query(({ input }) => {
@@ -191,7 +195,10 @@ export const osIntegrationRouter = t.router({
       ({ input: { theme, windowControlsIconColor, backgroundColor } }) => {
         if (windowControlsIconColor) {
           config.windowControlsIconColor = windowControlsIconColor;
-          if (process.platform === "win32")
+          if (
+            process.platform === "win32" &&
+            !config.desktopSettings.nativeTitlebar
+          )
             globalThis.window?.setTitleBarOverlay({
               symbolColor: windowControlsIconColor
             });

apps/desktop/src/api/sqlite-kysely.ts

@@ -0,0 +1,143 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import type { Database, Statement } from "better-sqlite3-multiple-ciphers";
+import type { QueryResult } from "@streetwriters/kysely";
+
+type SQLiteCompatibleType =
+  | number
+  | string
+  | Uint8Array
+  | Array<number>
+  | bigint
+  | null;
+
+export class SQLite {
+  sqlite?: Database;
+  initialized = false;
+  preparedStatements: Map<string, Statement<unknown[]>> = new Map();
+  retryCounter: Record<string, number> = {};
+  constructor() {
+    console.log("new sqlite worker");
+  }
+
+  async open(filePath: string) {
+    if (this.sqlite) {
+      console.error("Database is already initialized");
+      return;
+    }
+
+    this.sqlite = require("better-sqlite3-multiple-ciphers")(
+      filePath
+    ).unsafeMode(true);
+  }
+
+  /**
+   * Wrapper function for preparing SQL statements with caching
+   * to avoid unnecessary computations.
+   */
+  async prepare(sql: string): Promise<Statement | undefined> {
+    if (!this.sqlite) throw new Error("Database is not initialized.");
+    try {
+      const cached = this.preparedStatements.get(sql);
+      if (cached !== undefined) return cached;
+
+      const prepared = this.sqlite.prepare(sql);
+      if (!prepared) return;
+
+      this.preparedStatements.set(sql, prepared);
+
+      // reset retry count on success
+      this.retryCounter[sql] = 0;
+      return prepared;
+    } catch (ex) {
+      console.error(ex);
+
+      // statement prepare process can be flaky so retry at least 5 times
+      // before giving up.
+      if (this.retryCounter[sql] < 5) {
+        this.retryCounter[sql] = (this.retryCounter[sql] || 0) + 1;
+        console.warn("Failed to prepare statement. Retrying:", sql);
+        return this.prepare(sql);
+      } else this.retryCounter[sql] = 0;
+
+      if (ex instanceof Error) ex.message += ` (query: ${sql})`;
+      throw ex;
+    }
+  }
+
+  async exec<R>(
+    sql: string,
+    parameters: SQLiteCompatibleType[] = []
+  ): Promise<QueryResult<R>> {
+    const prepared = await this.prepare(sql);
+    if (!prepared) return { rows: [] };
+    try {
+      if (prepared.reader) {
+        return {
+          rows: prepared.all(parameters) as R[]
+        };
+      } else {
+        const { changes, lastInsertRowid } = prepared.run(parameters);
+        const numAffectedRows =
+          changes !== undefined && changes !== null && !isNaN(changes)
+            ? BigInt(changes)
+            : undefined;
+        return {
+          numAffectedRows,
+          insertId:
+            lastInsertRowid !== undefined && lastInsertRowid !== null
+              ? typeof lastInsertRowid === "bigint"
+                ? lastInsertRowid
+                : BigInt(lastInsertRowid)
+              : undefined,
+          rows: [] as R[]
+        };
+      }
+    } catch (e) {
+      if (e instanceof Error) e.message += ` (query: ${sql})`;
+      throw e;
+    }
+  }
+
+  async run<R>(
+    sql: string,
+    parameters?: SQLiteCompatibleType[]
+  ): Promise<QueryResult<R>> {
+    if (!this.sqlite) throw new Error("No database is not opened.");
+    return await this.exec(sql, parameters);
+  }
+
+  async close() {
+    if (!this.sqlite) return;
+
+    this.preparedStatements.clear();
+    this.sqlite.close();
+    this.sqlite = undefined;
+  }
+
+  async delete(filePath: string) {
+    await this.close();
+    await require("fs/promises").rm(filePath, {
+      force: true,
+      maxRetries: 5,
+      retryDelay: 500
+    });
+  }
+}

apps/desktop/src/api/updater.ts

@@ -29,19 +29,37 @@ type Progress = { percent: number };
 
 const t = initTRPC.create();
 let cancellationToken: CancellationToken | undefined = undefined;
+let downloadTimeout: NodeJS.Timeout | undefined = undefined;
 
 export const updaterRouter = t.router({
   autoUpdates: t.procedure.query(() => config.automaticUpdates),
   install: t.procedure.query(() => autoUpdater.quitAndInstall()),
   download: t.procedure.query(async () => {
     if (cancellationToken) return;
-    cancellationToken = new CancellationToken();
-    await autoUpdater
-      .downloadUpdate(cancellationToken)
-      .finally(() => (cancellationToken = undefined));
+    clearTimeout(downloadTimeout);
+    await new Promise<string[]>((resolve, reject) => {
+      downloadTimeout = setTimeout(async () => {
+        cancellationToken = new CancellationToken();
+        autoUpdater.isUpdaterActive();
+        await autoUpdater
+          .downloadUpdate(cancellationToken)
+          .then(resolve)
+          .catch(reject)
+          .finally(() => (cancellationToken = undefined));
+      }, 1000);
+    });
   }),
   check: t.procedure.query(async () => {
-    await autoUpdater.checkForUpdates().catch(console.error);
+    if (cancellationToken) return;
+    clearTimeout(downloadTimeout);
+    await new Promise<void>((resolve) => {
+      downloadTimeout = setTimeout(async () => {
+        await autoUpdater
+          .checkForUpdates()
+          .catch(console.error)
+          .finally(resolve);
+      }, 1000);
+    });
   }),
 
   toggleAutoUpdates: t.procedure
@@ -61,7 +79,18 @@ export const updaterRouter = t.router({
     "update-not-available"
   ),
   onAvailable: createSubscription<"update-available", UpdateInfo>(
-    "update-available"
+    "update-available",
+    () => {
+      if (!config.automaticUpdates) return false;
+      autoUpdater.emit("download-progress", {
+        bytesPerSecond: 0,
+        delta: 0,
+        percent: 0,
+        total: 100,
+        transferred: 0
+      });
+      return true;
+    }
   ),
   onError: createSubscription("error")
 });
@@ -69,10 +98,11 @@ export const updaterRouter = t.router({
 function createSubscription<
   TName extends keyof AppUpdaterEvents,
   TReturnType = Parameters<AppUpdaterEvents[TName]>[0]
->(eventName: TName) {
+>(eventName: TName, handler?: (args: TReturnType) => boolean) {
   return t.procedure.subscription(() => {
     return observable<TReturnType>((emit) => {
       const listener: AppUpdaterEvents[TName] = (...args: any[]) => {
+        if (handler?.(args[0])) return;
         emit.next(args[0]);
       };
       autoUpdater.removeAllListeners(eventName);

apps/desktop/src/index.ts

@@ -21,3 +21,4 @@ export * from "./constants";
 export type { AppRouter } from "./api";
 export { type UpdateInfo } from "builder-util-runtime";
 export { type DesktopIntegration } from "./utils/config";
+export { SQLite } from "./api/sqlite-kysely.js";

apps/desktop/src/main.ts

@@ -84,22 +84,27 @@ async function createWindow() {
       format: process.platform === "win32" ? "ico" : "png"
     }),
 
-    titleBarStyle: "hidden",
-    frame: process.platform === "win32" || process.platform === "darwin",
-    titleBarOverlay: {
-      height: 37,
-      color: "#00000000",
-      symbolColor: config.windowControlsIconColor
-    },
-    trafficLightPosition: {
-      x: 16,
-      y: 12
-    },
+    ...(config.desktopSettings.nativeTitlebar
+      ? {}
+      : {
+          titleBarStyle: "hidden",
+          frame: process.platform === "win32" || process.platform === "darwin",
+          titleBarOverlay: {
+            height: 37,
+            color: "#00000000",
+            symbolColor: config.windowControlsIconColor
+          },
+          trafficLightPosition: {
+            x: 16,
+            y: 12
+          }
+        }),
 
     webPreferences: {
       zoomFactor: config.zoomFactor,
       nodeIntegration: true,
       contextIsolation: false,
+      nodeIntegrationInWorker: true,
       spellcheck: config.isSpellCheckerEnabled,
       preload: __dirname + "/preload.js"
     }

apps/desktop/src/preload.ts

@@ -20,16 +20,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { ELECTRON_TRPC_CHANNEL } from "electron-trpc/main";
 import { type RendererGlobalElectronTRPC } from "electron-trpc/src/types";
-import type { NNCrypto } from "@notesnook/crypto";
+// import type { NNCrypto } from "@notesnook/crypto";
 import { ipcRenderer } from "electron";
 import { platform } from "os";
-import sqlite3, { Database } from "better-sqlite3-multiple-ciphers";
 
 declare global {
   var os: () => "mas" | ReturnType<typeof platform>;
   var electronTRPC: RendererGlobalElectronTRPC;
-  var NativeNNCrypto: (new () => NNCrypto) | undefined;
-  var createSQLite3Database: (filename: string) => Database;
+  // var NativeNNCrypto: (new () => NNCrypto) | undefined;
 }
 
 process.once("loaded", async () => {
@@ -42,6 +40,5 @@ process.once("loaded", async () => {
   globalThis.electronTRPC = electronTRPC;
 });
 
-globalThis.NativeNNCrypto = require("@notesnook/crypto").NNCrypto;
-globalThis.createSQLite3Database = (filename) => sqlite3(filename);
+// globalThis.NativeNNCrypto = require("@notesnook/crypto").NNCrypto;
 globalThis.os = () => (MAC_APP_STORE ? "mas" : platform());

apps/desktop/src/utils/asset-manager.ts

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { NativeImage, nativeImage } from "electron";
 import path from "path";
 import { isDevelopment } from "./index";
-import { parse, ParsedImage } from "icojs";
+import { ParsedImage, parseICO } from "icojs";
 import { getSystemTheme } from "./theme";
 import { readFile } from "fs/promises";
 
@@ -71,7 +71,7 @@ export class AssetManager {
           `${icon}${prefix}.ico`
         );
         const icoBuffer = await readFile(icoPath);
-        const images = await parse(icoBuffer, "image/png");
+        const images = await parseICO(icoBuffer, "image/png");
         ALL_ICONS.push({ id: icon, images, prefix });
       }
     }

apps/desktop/src/utils/autoupdater.ts

@@ -35,6 +35,7 @@ async function configureAutoUpdater() {
   autoUpdater.allowDowngrade = false;
   autoUpdater.allowPrerelease = false;
   autoUpdater.autoInstallOnAppQuit = true;
+  autoUpdater.disableWebInstaller = true;
 }
 
 export { configureAutoUpdater };

apps/desktop/src/utils/config.ts

@@ -25,7 +25,8 @@ export const DesktopIntegration = z.object({
   autoStart: z.boolean().optional(),
   startMinimized: z.boolean().optional(),
   minimizeToSystemTray: z.boolean().optional(),
-  closeToSystemTray: z.boolean().optional()
+  closeToSystemTray: z.boolean().optional(),
+  nativeTitlebar: z.boolean().optional()
 });
 
 export type DesktopIntegration = z.infer<typeof DesktopIntegration>;
@@ -35,7 +36,8 @@ export const config = {
     autoStart: false,
     startMinimized: false,
     minimizeToSystemTray: false,
-    closeToSystemTray: false
+    closeToSystemTray: false,
+    nativeTitlebar: false
   },
   privacyMode: false,
   isSpellCheckerEnabled: true,

apps/mobile/.gitignore

@@ -38,7 +38,7 @@ DerivedData
 *.ipa
 *.xcuserstate
 *.hprof
-ios/.xcode.env.local
+**/.xcode.env.local
 # Android/IntelliJ
 #
 rn-build-deps/

apps/mobile/app/app.tsx

@@ -16,13 +16,13 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import "react-native-gesture-handler";
 import {
   THEME_COMPATIBILITY_VERSION,
   useThemeEngineStore
 } from "@notesnook/theme";
 import React, { useEffect } from "react";
 import { I18nManager, View } from "react-native";
+import "react-native-gesture-handler";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import AppLockedOverlay from "./components/app-lock-overlay";
@@ -40,30 +40,25 @@ import { useUserStore } from "./stores/use-user-store";
 I18nManager.allowRTL(false);
 I18nManager.forceRTL(false);
 I18nManager.swapLeftAndRightInRTL(false);
+const { appLockEnabled, appLockMode } = SettingsService.get();
+if (appLockEnabled || appLockMode !== "none") {
+  useUserStore.getState().lockApp(true);
+}
 
 const App = () => {
-  const init = useAppEvents();
+  useAppEvents();
+  //@ts-ignore
+  globalThis["IS_MAIN_APP_RUNNING"] = true;
   useEffect(() => {
-    const { appLockEnabled, appLockMode } = SettingsService.get();
-    if (appLockEnabled || appLockMode !== "none") {
-      useUserStore.getState().lockApp(true);
-    }
-
-    //@ts-ignore
-    globalThis["IS_MAIN_APP_RUNNING"] = true;
-    init();
+    SettingsService.onFirstLaunch();
     setTimeout(async () => {
-      SettingsService.onFirstLaunch();
       await Notifications.get();
       if (SettingsService.get().notifNotes) {
         Notifications.pinQuickNote(true);
       }
       TipManager.init();
     }, 100);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
   return (
     <View
       style={{

apps/mobile/app/common/analytics/index.js

@@ -1,156 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import { Platform } from "react-native";
-import { MMKV } from "../database/mmkv";
-import { useSettingStore } from "../../stores/use-setting-store";
-
-const WEBSITE_ID = "3c6890ce-8410-49d5-8831-15fb2eb28a21";
-const baseUrl = "https://analytics.streetwriters.co/api/collect";
-
-const UA =
-  Platform.OS === "ios"
-    ? "Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1"
-    : `
-Mozilla/5.0 (Linux; Android 8.0.0; SM-G960F Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.84 Mobile Safari/537.36`;
-
-/**
- *
- * @param {Routes} route
- * @param {Routes[]} conditions
- * @returns
- */
-async function canUpdateAnalytics(route, conditions = []) {
-  if (!useSettingStore?.getState()?.settings?.telemetry) return false;
-  let eventsList = MMKV.getString("notesnookUserEvents");
-
-  if (eventsList) {
-    eventsList = JSON.parse(eventsList);
-  }
-
-  if (eventsList && eventsList[route]) {
-    console.log("analytics: event already sent", route);
-    return false;
-  }
-  if (route !== "/welcome") {
-    for (let cond of conditions) {
-      if (!eventsList || !eventsList[cond]) {
-        console.log("analytics: conditions not met for event", route, cond);
-        return false;
-      }
-    }
-  }
-  console.log("analytics: will send event", route);
-  return true;
-}
-
-async function saveAnalytics(route, value = true) {
-  let eventsList = MMKV.getString("notesnookUserEvents");
-  if (eventsList) {
-    eventsList = JSON.parse(eventsList);
-  } else {
-    eventsList = {};
-  }
-  eventsList[route] = value;
-  MMKV.setString("notesnookUserEvents", JSON.stringify(eventsList));
-}
-
-/**
- *@typedef {"/welcome" | "/home" | "/signup" | "/first-note" | "/account-created" | "/pro-sheet" | "/pro-plans" | "/iap-native" | "/pro-screen" | "/editor" | "/editor-toolbar" | "/properties" | "/sidemenu"} Routes
- * @param {Routes} prevRoute
- * @param {Routes} route
- * @param {Routes[]} conditions
- * @param {boolean} once
- * @returns
- */
-
-async function pageView(
-  route,
-  prevRoute = "",
-  conditions = ["/welcome"],
-  once = true
-) {
-  if (__DEV__) return;
-  if (!(await canUpdateAnalytics(route, conditions)) && once) return;
-  let body = {
-    payload: {
-      website: WEBSITE_ID,
-      url: `notesnook-${Platform.OS}${prevRoute}${route}`,
-      referrer: `https://notesnook.com/notesnook-${Platform.OS}${prevRoute}`,
-      hostname: `notesnook-${Platform.OS}`,
-      language: "en-US",
-      screen: "1920x1080"
-    },
-    type: "pageview"
-  };
-
-  try {
-    let response = await fetch(baseUrl, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "User-Agent": UA
-      },
-      body: JSON.stringify(body)
-    });
-    console.log("analytics: event sent", route);
-    await saveAnalytics(route);
-    return await response.text();
-  } catch (e) {
-    console.log(e);
-  }
-}
-
-async function sendEvent(type, value, once = true) {
-  if (__DEV__) return;
-  if (!(await canUpdateAnalytics(type)) && once) return;
-  let body = {
-    payload: {
-      website: WEBSITE_ID,
-      url: "/",
-      event_type: type,
-      event_value: value,
-      hostname: "notesnook-android-app",
-      language: "en-US",
-      screen: "1920x1080"
-    },
-    type: "event"
-  };
-
-  try {
-    let response = await fetch(baseUrl, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "User-Agent": UA
-      },
-      body: JSON.stringify(body)
-    });
-    console.log(response.status);
-    return await response.text();
-  } catch (e) {
-    console.log(e);
-  }
-}
-
-export default {
-  sendEvent,
-  pageView,
-  saveAnalytics
-};

apps/mobile/app/common/database/encryption.js

@@ -25,6 +25,7 @@ import { MMKVLoader, ProcessingModes } from "react-native-mmkv-storage";
 import { generateSecureRandom } from "react-native-securerandom";
 import { DatabaseLogger } from ".";
 import { MMKV } from "./mmkv";
+import { ToastManager } from "../../services/event-manager";
 
 // Database key cipher is persisted across different user sessions hence it has
 // it's independent storage which we will never clear. This is only used when application has
@@ -208,7 +209,8 @@ export async function getDatabaseKey(appLockPassword) {
       if (userKeyCredentials) {
         const userKeyCipher = await encrypt(
           {
-            key: DB_KEY
+            key: DB_KEY,
+            salt: NOTESNOOK_DB_KEY_SALT
           },
           userKeyCredentials.password
         );
@@ -221,6 +223,7 @@ export async function getDatabaseKey(appLockPassword) {
 
     return DB_KEY;
   } catch (e) {
+    ToastManager.error(e, "Error getting database key");
     console.log(e, "error");
     DatabaseLogger.error(e);
     return null;

apps/mobile/app/common/database/index.js

@@ -18,39 +18,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import "./logger";
 import { database } from "@notesnook/common";
-import { logger as dbLogger } from "@notesnook/core/dist/logger";
+import { logger as dbLogger } from "@notesnook/core";
 import { Platform } from "react-native";
 import * as Gzip from "react-native-gzip";
 import EventSource from "../../utils/sse/even-source-ios";
 import AndroidEventSource from "../../utils/sse/event-source";
-import { SqliteAdapter, SqliteIntrospector, SqliteQueryCompiler } from "kysely";
+import {
+  SqliteAdapter,
+  SqliteIntrospector,
+  SqliteQueryCompiler
+} from "@streetwriters/kysely";
 import filesystem from "../filesystem";
 import Storage from "./storage";
 import { RNSqliteDriver } from "./sqlite.kysely";
 import { getDatabaseKey } from "./encryption";
-
-database.host(
-  __DEV__
-    ? {
-        API_HOST: "https://api.notesnook.com",
-        AUTH_HOST: "https://auth.streetwriters.co",
-        SSE_HOST: "https://events.streetwriters.co",
-        SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
-        ISSUES_HOST: "https://issues.streetwriters.co"
-        // API_HOST: "http://192.168.43.5:5264",
-        // AUTH_HOST: "http://192.168.43.5:8264",
-        // SSE_HOST: "http://192.168.43.5:7264",
-        // SUBSCRIPTIONS_HOST: "http://192.168.43.5:9264",
-        // ISSUES_HOST: "http://192.168.43.5:2624"
-      }
-    : {
-        API_HOST: "https://api.notesnook.com",
-        AUTH_HOST: "https://auth.streetwriters.co",
-        SSE_HOST: "https://events.streetwriters.co",
-        SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
-        ISSUES_HOST: "https://issues.streetwriters.co"
-      }
-);
+import SettingsService from "../../services/settings";
 
 export async function setupDatabase(password) {
   const key = await getDatabaseKey(password);
@@ -59,6 +41,15 @@ export async function setupDatabase(password) {
 
   console.log("Opening database with key:", !!key);
 
+  database.host({
+    API_HOST: "https://api.notesnook.com",
+    AUTH_HOST: "https://auth.streetwriters.co",
+    SSE_HOST: "https://events.streetwriters.co",
+    SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
+    ISSUES_HOST: "https://issues.streetwriters.co",
+    ...(SettingsService.getProperty("serverUrls") || {})
+  });
+
   database.setup({
     storage: Storage,
     eventsource: Platform.OS === "ios" ? EventSource : AndroidEventSource,
@@ -85,4 +76,10 @@ export async function setupDatabase(password) {
 }
 
 export const db = database;
-export const DatabaseLogger = dbLogger;
+let DatabaseLogger = dbLogger.scope(Platform.OS);
+
+const setLogger = () => {
+  DatabaseLogger = dbLogger.scope(Platform.OS);
+};
+
+export { DatabaseLogger, setLogger };

apps/mobile/app/common/database/logger.js

@@ -16,14 +16,34 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { MMKVLoader } from "react-native-mmkv-storage";
-import { initialize } from "@notesnook/core/dist/logger";
-import { KV } from "./storage";
 
-const LoggerStorage = new MMKVLoader()
-  .withInstanceID("notesnook_logs")
-  .initialize();
+import { initialize } from "@notesnook/core";
+import {
+  SqliteAdapter,
+  SqliteIntrospector,
+  SqliteQueryCompiler
+} from "@streetwriters/kysely";
+import { Platform } from "react-native";
+import { setLogger } from ".";
+import { RNSqliteDriver } from "./sqlite.kysely";
 
-initialize(new KV(LoggerStorage));
+let loggerLoaded = false;
+const initializeLogger = async () => {
+  if (loggerLoaded) return;
+  await initialize({
+    dialect: (name) => ({
+      createDriver: () => {
+        return new RNSqliteDriver({ async: true, dbName: name });
+      },
+      createAdapter: () => new SqliteAdapter(),
+      createIntrospector: (db) => new SqliteIntrospector(db),
+      createQueryCompiler: () => new SqliteQueryCompiler()
+    }),
+    tempStore: "memory",
+    journalMode: Platform.OS === "ios" ? "DELETE" : "WAL"
+  });
+  setLogger();
+  loggerLoaded = true;
+};
 
-export { LoggerStorage };
+export { initializeLogger };

apps/mobile/app/common/database/sqlite.kysely.ts

@@ -17,8 +17,12 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import type { DatabaseConnection, Driver, QueryResult } from "kysely";
-import { CompiledQuery } from "kysely";
+import type {
+  DatabaseConnection,
+  Driver,
+  QueryResult
+} from "@streetwriters/kysely";
+import { CompiledQuery } from "@streetwriters/kysely";
 import { QuickSQLiteConnection, open } from "react-native-quick-sqlite";
 
 type Config = { dbName: string; async: boolean; location: string };

apps/mobile/app/common/database/storage.js

@@ -21,15 +21,15 @@ import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import {
   decrypt,
+  decryptMulti,
   deriveCryptoKey,
   encrypt,
+  encryptMulti,
   generateCryptoKey,
   getCryptoKey,
   getRandomBytes,
   hash,
-  removeCryptoKey,
-  decryptMulti,
-  encryptMulti
+  removeCryptoKey
 } from "./encryption";
 import { MMKV } from "./mmkv";
 

apps/mobile/app/common/filesystem/compress.js

@@ -20,7 +20,6 @@ import { Dimensions, Image, Platform } from "react-native";
 import ImageResizer from "@bam.tech/react-native-image-resizer";
 import RNFetchBlob from "react-native-blob-util";
 
-console.log("hello world");
 /**
  * Scale down & compress images to screen width
  * for loading in editor.

apps/mobile/app/common/filesystem/download-attachment.js

@@ -18,24 +18,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import Sodium from "@ammarahmed/react-native-sodium";
-import {
-  getFileNameWithExtension,
-  isImage,
-  isDocument
-} from "@notesnook/core/dist/utils/filename";
+import { getFileNameWithExtension } from "@notesnook/core";
 import React from "react";
 import { Platform } from "react-native";
+import RNFetchBlob from "react-native-blob-util";
 import * as ScopedStorage from "react-native-scoped-storage";
 import { subscribe, zip } from "react-native-zip-archive";
-import RNFetchBlob from "react-native-blob-util";
 import { ShareComponent } from "../../components/sheets/export-notes/share";
 import { ToastManager, presentSheet } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
+import { IOS_APPGROUPID } from "../../utils/constants";
 import { DatabaseLogger, db } from "../database";
 import Storage from "../database/storage";
-import { cacheDir, copyFileAsync, releasePermissions } from "./utils";
 import { createCacheDir, exists } from "./io";
-import { IOS_APPGROUPID } from "../../utils/constants";
+import { cacheDir, copyFileAsync, releasePermissions } from "./utils";
 
 export const FileDownloadStatus = {
   Success: 1,
@@ -58,15 +54,10 @@ export async function downloadAllAttachments() {
  * @param onProgress
  * @returns
  */
-export async function downloadAttachments(
-  attachments,
-  onProgress,
-  canceled,
-  groupId
-) {
+export async function downloadAttachments(attachments) {
   await createCacheDir();
   if (!attachments || !attachments.length) return;
-  const result = new Map();
+  const groupId = `download-all-${Date.now()}`;
 
   let outputFolder;
   if (Platform.OS === "android") {
@@ -90,92 +81,117 @@ export async function downloadAttachments(
 
   await RNFetchBlob.fs.mkdir(zipSourceFolder);
 
+  const isCancelled = () => {
+    if (useAttachmentStore.getState().downloading[groupId]?.canceled) {
+      RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
+      useAttachmentStore.getState().setDownloading({
+        groupId,
+        current: 0,
+        total: 0,
+        success: false,
+        message: "Download cancelled",
+        canceled: true
+      });
+      return true;
+    }
+  };
+
   for (let i = 0; i < attachments.length; i++) {
+    if (isCancelled()) return;
     let attachment = await db.attachments.attachment(attachments[i]);
     const hash = attachment.hash;
     try {
-      if (canceled.current) {
-        RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
-        return;
-      }
-      onProgress?.(
-        i + 1 / attachments.length,
-        `Downloading attachments (${i + 1}/${
-          attachments.length
-        })... Please wait`
-      );
+      useAttachmentStore.getState().setDownloading({
+        groupId: groupId,
+        current: i + 1,
+        total: attachments.length,
+        filename: attachment.hash
+      });
       // Download to cache
       let uri = await downloadAttachment(hash, false, {
         silent: true,
         cache: true,
         groupId: groupId
       });
-      if (canceled.current) {
-        RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
-        return;
-      }
+
+      if (isCancelled()) return;
+
       if (!uri) throw new Error("Failed to download file");
       // Move file to the source folder we will zip eventually and rename the file to it's actual name.
       const filePath = `${zipSourceFolder}/${attachment.filename}`;
       await RNFetchBlob.fs.mv(`${cacheDir}/${uri}`, filePath);
-      result.set(hash, {
-        filename: attachment.filename,
-        status: FileDownloadStatus.Success,
-        attachment: attachment
-      });
     } catch (e) {
-      result.set(hash, {
-        filename: attachment.filename,
-        status: FileDownloadStatus.Fail,
-        reason: e
-      });
-      ToastManager.error(e, "Error downloading attachment");
+      DatabaseLogger.error(e);
     }
   }
-  if (canceled.current) {
-    RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
-    return;
-  }
-  if (result?.size) {
-    let sub;
-    try {
-      onProgress?.(0, `Zipping... Please wait`);
-      // If all goes well, zip the notesnook-attachments folder in cache.
 
-      sub = subscribe(({ progress }) => {
-        onProgress(
-          progress,
-          `Saving zip file (${(progress * 100).toFixed(1)}%)... Please wait`
-        );
+  useAttachmentStore.getState().setDownloading({
+    groupId: groupId,
+    current: 0,
+    total: 0,
+    success: true
+  });
+
+  if (isCancelled()) return;
+
+  let sub;
+  try {
+    useAttachmentStore.getState().setDownloading({
+      current: 0,
+      total: 1,
+      message: "Saving zip file... Please wait",
+      groupId
+    });
+    // If all goes well, zip the notesnook-attachments folder in cache.
+
+    sub = subscribe(({ progress }) => {
+      useAttachmentStore.getState().setDownloading({
+        groupId,
+        current: progress,
+        total: 1,
+        message: `Saving zip file (${(progress * 100).toFixed(
+          1
+        )}%)... Please wait`
       });
-      await zip(zipSourceFolder, zipOutputFile);
-      sub?.remove();
-      onProgress(1, `Saving zip file... Please wait`);
-      if (Platform.OS === "android") {
-        // Move the zip to user selected directory.
-        const file = await ScopedStorage.createFile(
-          outputFolder,
-          `notesnook-attachments-${Date.now()}.zip`,
-          "application/zip"
-        );
-        await copyFileAsync(`file://${zipOutputFile}`, file.uri);
-      }
+    });
+    await zip(zipSourceFolder, zipOutputFile);
+    sub?.remove();
 
-      onProgress?.(1, `Done`);
-      releasePermissions(outputFolder);
-    } catch (e) {
-      releasePermissions(outputFolder);
-      sub?.remove();
-      ToastManager.error(e, "Error zipping attachments");
-    }
-    // Remove source & zip file from cache.
-    RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
     if (Platform.OS === "android") {
-      RNFetchBlob.fs.unlink(zipOutputFile).catch(console.log);
+      // Move the zip to user selected directory.
+      const file = await ScopedStorage.createFile(
+        outputFolder,
+        `notesnook-attachments-${Date.now()}.zip`,
+        "application/zip"
+      );
+      await copyFileAsync(`file://${zipOutputFile}`, file.uri);
     }
-  }
 
-  return result;
+    useAttachmentStore.getState().setDownloading({
+      current: 0,
+      total: 0,
+      message: undefined,
+      success: true,
+      groupId
+    });
+    releasePermissions(outputFolder);
+  } catch (e) {
+    useAttachmentStore.getState().setDownloading({
+      current: 0,
+      total: 0,
+      message: undefined,
+      success: false,
+      groupId
+    });
+    releasePermissions(outputFolder);
+    sub?.remove();
+    ToastManager.error(e, "Error zipping attachments");
+  }
+  // Remove source & zip file from cache.
+  RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
+  if (Platform.OS === "android") {
+    RNFetchBlob.fs.unlink(zipOutputFile).catch(console.log);
+  }
 }
 
 export default async function downloadAttachment(
@@ -211,7 +227,11 @@ export default async function downloadAttachment(
   try {
     await db
       .fs()
-      .downloadFile(options.groupId || attachment.hash, attachment.hash);
+      .downloadFile(
+        options.groupId || attachment.hash,
+        attachment.hash,
+        attachment.chunkSize
+      );
     if (!(await exists(attachment.hash))) {
       DatabaseLogger.log("Attachment does not exist after download.");
       return;
@@ -259,15 +279,6 @@ export default async function downloadAttachment(
       });
     }
 
-    if (
-      attachment.dateUploaded &&
-      !isImage(attachment.mimeType) &&
-      !isDocument(attachment.mimeType)
-    ) {
-      RNFetchBlob.fs
-        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}`)
-        .catch(console.log);
-    }
     if (Platform.OS === "ios" && !options.cache) {
       fileUri = folder.uri + `/${filename}`;
     }
@@ -287,7 +298,6 @@ export default async function downloadAttachment(
 
     return fileUri;
   } catch (e) {
-    DatabaseLogger.error(e);
     if (attachment.dateUploaded) {
       RNFetchBlob.fs
         .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}`)
@@ -296,6 +306,7 @@ export default async function downloadAttachment(
         .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}_dcache`)
         .catch(console.log);
     }
+    DatabaseLogger.error(e);
     useAttachmentStore.getState().remove(attachment.hash);
     if (options.throwError) {
       throw e;

apps/mobile/app/common/filesystem/download.js

@@ -17,32 +17,56 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import hosts from "@notesnook/core/dist/utils/constants";
 import NetInfo from "@react-native-community/netinfo";
 import RNFetchBlob from "react-native-blob-util";
 import { ToastManager } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { DatabaseLogger, db } from "../database";
-import { cacheDir, fileCheck } from "./utils";
 import { createCacheDir, exists } from "./io";
+import { ABYTES, cacheDir, getUploadedFileSize, parseS3Error } from "./utils";
 
-export async function downloadFile(filename, data, cancelToken) {
-  if (!data) {
-    DatabaseLogger.log(`Error downloading file: ${filename}, reason: No data`);
+export async function downloadFile(filename, requestOptions, cancelToken) {
+  if (!requestOptions) {
+    DatabaseLogger.log(
+      `Error downloading file: ${filename}, reason: No requestOptions`
+    );
     return false;
   }
 
   DatabaseLogger.log(`Downloading ${filename}`);
   await createCacheDir();
-  let { url, headers } = data;
-  let path = `${cacheDir}/${filename}`;
-
+  let { url, headers, chunkSize } = requestOptions;
+  let tempFilePath = `${cacheDir}/${filename}_temp`;
+  let originalFilePath = `${cacheDir}/${filename}`;
   try {
     if (await exists(filename)) {
       DatabaseLogger.log(`File Exists already: ${filename}`);
       return true;
     }
 
+    const attachment = await db.attachments.attachment(filename);
+    const size = await getUploadedFileSize(filename);
+
+    if (size === -1) {
+      const error = `Uploaded file verification failed. (File hash: ${filename})`;
+      throw new Error(error);
+    }
+
+    if (size === 0) {
+      const error = `File length is 0. Please upload this file again from the attachment manager. (File hash: ${filename})`;
+      await db.attachments.markAsFailed(attachment.id, error);
+      throw new Error(error);
+    }
+
+    const totalChunks = Math.ceil(size / chunkSize);
+    const decryptedLength = size - totalChunks * ABYTES;
+
+    if (attachment && attachment.size !== decryptedLength) {
+      const error = `File length mismatch. Expected ${attachment.size} but got ${decryptedLength} bytes. Please upload this file again from the attachment manager. (File hash: ${filename})`;
+      await db.attachments.markAsFailed(attachment.id, error);
+      throw new Error(error);
+    }
+
     let res = await fetch(url, {
       method: "GET",
       headers
@@ -63,34 +87,57 @@ export async function downloadFile(filename, data, cancelToken) {
       );
       throw new Error("Unable to resolve download url");
     }
-    let totalSize = 0;
+
     DatabaseLogger.log(`Download starting: ${filename}`);
     let request = RNFetchBlob.config({
-      path: path,
-      IOSBackgroundTask: true
+      path: tempFilePath,
+      IOSBackgroundTask: true,
+      overwrite: true
     })
       .fetch("GET", downloadUrl, null)
-      .progress((recieved, total) => {
+      .progress(async (recieved, total) => {
         useAttachmentStore
           .getState()
           .setProgress(0, total, filename, recieved, "download");
-        totalSize = total;
+
         DatabaseLogger.log(`Downloading: ${filename}, ${recieved}/${total}`);
       });
 
     cancelToken.cancel = () => {
       useAttachmentStore.getState().remove(filename);
       request.cancel();
+      RNFetchBlob.fs.unlink(tempFilePath).catch(console.log);
       DatabaseLogger.log(`Download cancelled: ${filename}`);
     };
 
     let response = await request;
-    await fileCheck(response, totalSize);
+    console.log(response.info().headers);
+
+    const contentType =
+      response.info().headers?.["content-type"] ||
+      response.info().headers?.["Content-Type"];
+
+    if (contentType === "application/xml") {
+      const error = parseS3Error(await response.text());
+      throw new Error(`[${error.Code}] ${error.Message}`);
+    }
+
     let status = response.info().status;
     useAttachmentStore.getState().remove(filename);
+
+    if (exists(originalFilePath)) {
+      await RNFetchBlob.fs.unlink(originalFilePath).catch(console.log);
+    }
+
+    await RNFetchBlob.fs.mv(tempFilePath, originalFilePath);
+
+    if (!(await exists(filename))) {
+      throw new Error("File size mismatch");
+    }
+
     return status >= 200 && status < 300;
   } catch (e) {
-    if (e.message !== "canceled") {
+    if (e.message !== "canceled" && !e.message.includes("NoSuchKey")) {
       ToastManager.show({
         heading: "Error downloading file",
         message: e.message,
@@ -106,7 +153,8 @@ export async function downloadFile(filename, data, cancelToken) {
     }
 
     useAttachmentStore.getState().remove(filename);
-    RNFetchBlob.fs.unlink(path).catch(console.log);
+    RNFetchBlob.fs.unlink(tempFilePath).catch(console.log);
+    RNFetchBlob.fs.unlink(originalFilePath).catch(console.log);
     DatabaseLogger.error(e, {
       url,
       headers
@@ -115,37 +163,23 @@ export async function downloadFile(filename, data, cancelToken) {
   }
 }
 
-export async function getUploadedFileSize(hash) {
-  try {
-    const url = `${hosts.API_HOST}/s3?name=${hash}`;
-    const token = await db.tokenManager.getAccessToken();
-    const attachmentInfo = await fetch(url, {
-      method: "HEAD",
-      headers: { Authorization: `Bearer ${token}` }
-    });
-    const contentLength = parseInt(
-      attachmentInfo.headers?.get("content-length")
-    );
-    return isNaN(contentLength) ? 0 : contentLength;
-  } catch (e) {
-    DatabaseLogger.error(e);
-    return -1;
-  }
-}
-
 export async function checkAttachment(hash) {
   const internetState = await NetInfo.fetch();
   const isInternetReachable =
     internetState.isConnected && internetState.isInternetReachable;
-  if (!isInternetReachable) return { success: true };
+  if (!isInternetReachable) return;
   const attachment = await db.attachments.attachment(hash);
   if (!attachment) return { failed: "Attachment not found." };
 
   try {
     const size = await getUploadedFileSize(hash);
+    console.log("File Size", size);
     if (size === -1) return { success: true };
 
-    if (size === 0) return { failed: "File length is 0." };
+    if (size === 0)
+      return {
+        failed: `File length is 0. Please upload this file again from the attachment manager. (File hash: ${hash})`
+      };
   } catch (e) {
     return { failed: e?.message };
   }

apps/mobile/app/common/filesystem/index.js

@@ -17,17 +17,22 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { checkAttachment, downloadFile, getUploadedFileSize } from "./download";
+import { checkAttachment, downloadFile } from "./download";
 import {
   clearFileStorage,
   deleteFile,
   exists,
   readEncrypted,
   writeEncryptedBase64,
-  hashBase64
+  hashBase64,
+  clearCache,
+  deleteCacheFileByName,
+  deleteCacheFileByPath,
+  bulkExists,
+  getCacheSize
 } from "./io";
 import { uploadFile } from "./upload";
-import { cancelable } from "./utils";
+import { cancelable, getUploadedFileSize } from "./utils";
 
 export default {
   readEncrypted,
@@ -39,5 +44,10 @@ export default {
   exists,
   clearFileStorage,
   getUploadedFileSize,
-  checkAttachment
+  checkAttachment,
+  clearCache,
+  deleteCacheFileByName,
+  deleteCacheFileByPath,
+  bulkExists,
+  getCacheSize
 };

apps/mobile/app/common/filesystem/io.js

@@ -20,9 +20,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import Sodium from "@ammarahmed/react-native-sodium";
 import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
+import { eSendEvent } from "../../services/event-manager";
 import { IOS_APPGROUPID } from "../../utils/constants";
 import { DatabaseLogger, db } from "../database";
-import { cacheDir, cacheDirOld, getRandomId } from "./utils";
+import { ABYTES, cacheDir, cacheDirOld, getRandomId } from "./utils";
 
 export async function readEncrypted(filename, key, cipherData) {
   await migrateFilesFromCache();
@@ -125,9 +126,13 @@ export async function clearFileStorage() {
 }
 
 export async function createCacheDir() {
-  if (!(await RNFetchBlob.fs.exists(cacheDir))) {
-    await RNFetchBlob.fs.mkdir(cacheDir);
-    DatabaseLogger.log("Cache directory created");
+  try {
+    if (!(await RNFetchBlob.fs.exists(cacheDir))) {
+      await RNFetchBlob.fs.mkdir(cacheDir);
+      DatabaseLogger.log("Cache directory created");
+    }
+  } catch (e) {
+    DatabaseLogger.error(e);
   }
 }
 
@@ -158,7 +163,35 @@ export async function migrateFilesFromCache() {
   }
 }
 
-const ABYTES = 17;
+export async function clearCache() {
+  await RNFetchBlob.fs.unlink(cacheDir).catch(console.log);
+  await createCacheDir();
+  eSendEvent("cache-cleared");
+}
+
+export async function deleteCacheFileByPath(path) {
+  await RNFetchBlob.fs.unlink(path).catch(console.log);
+}
+
+export async function deleteCacheFileByName(name) {
+  const iosAppGroup =
+    Platform.OS === "ios"
+      ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+      : null;
+  const appGroupPath = `${iosAppGroup}/${name}`;
+  await RNFetchBlob.fs.unlink(appGroupPath).catch(console.log);
+  await RNFetchBlob.fs.unlink(`${cacheDir}/${name}`).catch(console.log);
+}
+
+export async function deleteDCacheFiles() {
+  const files = await RNFetchBlob.fs.ls(cacheDir);
+  for (const file of files) {
+    if (file.includes("_dcache")) {
+      await RNFetchBlob.fs.unlink(file).catch(console.log);
+    }
+  }
+}
+
 export async function exists(filename) {
   let path = `${cacheDir}/${filename}`;
 
@@ -200,3 +233,37 @@ export async function exists(filename) {
   }
   return exists;
 }
+
+export async function bulkExists(files) {
+  try {
+    await createCacheDir();
+    const cacheFiles = await RNFetchBlob.fs.ls(cacheDir);
+    let missingFiles = files.filter((file) => !cacheFiles.includes(file));
+
+    if (Platform.OS === "ios") {
+      const iosAppGroup =
+        Platform.OS === "ios"
+          ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+          : null;
+      const appGroupFiles = await RNFetchBlob.fs.ls(iosAppGroup);
+      missingFiles = missingFiles.filter(
+        (file) => !appGroupFiles.includes(file)
+      );
+    }
+    return missingFiles;
+  } catch (e) {
+    DatabaseLogger.error(e);
+    return [];
+  }
+}
+
+export async function getCacheSize() {
+  await createCacheDir();
+  const stat = await RNFetchBlob.fs.lstat(`file://` + cacheDir);
+  let total = 0;
+  console.log("Total files", stat.length);
+  stat.forEach((s) => {
+    total += parseInt(s.size);
+  });
+  return total;
+}

apps/mobile/app/common/filesystem/upload.js

@@ -17,64 +17,68 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import RNFetchBlob from "react-native-blob-util";
-import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { DatabaseLogger, db } from "../database";
-import { cacheDir } from "./utils";
-import { isImage, isDocument } from "@notesnook/core/dist/utils/filename";
 import { Platform } from "react-native";
+import RNFetchBlob from "react-native-blob-util";
+import { ToastManager } from "../../services/event-manager";
+import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { IOS_APPGROUPID } from "../../utils/constants";
+import { DatabaseLogger, db } from "../database";
 import { createCacheDir } from "./io";
-import { getUploadedFileSize } from "./download";
+import { cacheDir, checkUpload, getUploadedFileSize } from "./utils";
 
-export async function uploadFile(filename, data, cancelToken) {
-  if (!data) return false;
-  let { url, headers } = data;
+export async function uploadFile(filename, requestOptions, cancelToken) {
+  if (!requestOptions) return false;
+  let { url, headers } = requestOptions;
   await createCacheDir();
   DatabaseLogger.info(`Preparing to upload file: ${filename}`);
 
   try {
-    const uploadedFileSize = await getUploadedFileSize(filename);
-    if (uploadedFileSize === -1) {
-      DatabaseLogger.log("Upload verification failed.");
-      return false;
-    }
-
-    const isUploaded = uploadedFileSize !== 0;
-    if (isUploaded) {
-      DatabaseLogger.log(`File ${filename} is already uploaded.`);
-      return true;
-    }
-
-    let res = await fetch(url, {
-      method: "PUT",
-      headers
-    });
-    if (!res.ok) throw new Error(`${res.status}: Unable to resolve upload url`);
-    const uploadUrl = await res.text();
-    if (!uploadUrl) throw new Error("Unable to resolve attachment upload url");
-    let uploadFilePath = `${cacheDir}/${filename}`;
-
-    const iosAppGroup =
-      Platform.OS === "ios"
-        ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
-        : null;
-    const appGroupPath = `${iosAppGroup}/${filename}`;
-    let exists = await RNFetchBlob.fs.exists(uploadFilePath);
+    let filePath = `${cacheDir}/${filename}`;
+    let exists = await RNFetchBlob.fs.exists(filePath);
+    // Check for file in appGroupPath if it doesn't exist in cacheDir
     if (!exists && Platform.OS === "ios") {
-      uploadFilePath = appGroupPath;
-      exists = await RNFetchBlob.fs.exists(uploadFilePath);
+      const iosAppGroup =
+        Platform.OS === "ios"
+          ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+          : null;
+      const appGroupPath = `${iosAppGroup}/${filename}`;
+      filePath = appGroupPath;
+      exists = await RNFetchBlob.fs.exists(filePath);
     }
 
     if (!exists) {
       throw new Error(
-        `Trying to upload file at path ${uploadFilePath} that doest not exist.`
+        `Trying to upload file at path ${filePath} that doest not exist.`
+      );
+    }
+
+    const fileSize = (await RNFetchBlob.fs.stat(filePath)).size;
+
+    let remoteFileSize = await getUploadedFileSize(filename);
+    if (remoteFileSize === -1) return false;
+    if (remoteFileSize > 0 && remoteFileSize === fileSize) {
+      DatabaseLogger.log(`File ${filename} is already uploaded.`);
+      return true;
+    }
+
+    let uploadUrlResponse = await fetch(url, {
+      method: "PUT",
+      headers
+    });
+
+    const uploadUrl = uploadUrlResponse.ok
+      ? await uploadUrlResponse.text()
+      : await uploadUrlResponse.json();
+
+    if (typeof uploadUrl !== "string") {
+      throw new Error(
+        uploadUrl.error || "Unable to resolve attachment upload url."
       );
     }
 
     DatabaseLogger.info(`Starting upload: ${filename}`);
 
-    let request = RNFetchBlob.config({
+    let uploadRequest = RNFetchBlob.config({
       IOSBackgroundTask: !globalThis["IS_SHARE_EXTENSION"]
     })
       .fetch(
@@ -83,7 +87,7 @@ export async function uploadFile(filename, data, cancelToken) {
         {
           "content-type": ""
         },
-        RNFetchBlob.wrap(uploadFilePath)
+        RNFetchBlob.wrap(filePath)
       )
       .uploadProgress((sent, total) => {
         useAttachmentStore
@@ -96,37 +100,33 @@ export async function uploadFile(filename, data, cancelToken) {
 
     cancelToken.cancel = () => {
       useAttachmentStore.getState().remove(filename);
-      request.cancel();
+      uploadRequest.cancel();
     };
-    let response = await request;
 
-    let status = response.info().status;
-    let text = await response.text();
-    let result = status >= 200 && status < 300 && text.length === 0;
+    let uploadResponse = await uploadRequest;
+    let status = uploadResponse.info().status;
+    let uploaded = status >= 200 && status < 300;
+
     useAttachmentStore.getState().remove(filename);
-    if (result) {
-      DatabaseLogger.info(
-        `File upload status: ${filename}, ${status}, ${text}`
-      );
-      let attachment = await db.attachments.attachment(filename);
-      if (!attachment) return result;
-      if (!isImage(attachment.mimeType) && !isDocument(attachment.mimeType)) {
-        RNFetchBlob.fs.unlink(`${cacheDir}/${filename}`).catch(console.log);
-      }
-    } else {
-      const fileInfo = await RNFetchBlob.fs.stat(uploadFilePath);
+
+    if (!uploaded) {
+      const fileInfo = await RNFetchBlob.fs.stat(filePath);
       throw new Error(
-        `${status}, ${text}, name: ${fileInfo.filename}, length: ${
+        `${status}, name: ${fileInfo.filename}, length: ${
           fileInfo.size
-        }, info: ${JSON.stringify(response.info())}`
+        }, info: ${JSON.stringify(uploadResponse.info())}`
       );
     }
-
-    return result;
+    const attachment = await db.attachments.attachment(filename);
+    await checkUpload(filename, requestOptions.chunkSize, attachment.size);
+    DatabaseLogger.info(`File upload status: ${filename}, ${status}`);
+    return uploaded;
   } catch (e) {
     useAttachmentStore.getState().remove(filename);
-    DatabaseLogger.info(`File upload error: ${filename}, ${e}`);
-    DatabaseLogger.error(e);
+    ToastManager.error(e, "File upload failed");
+    DatabaseLogger.error(e, "File upload failed", {
+      filename
+    });
     return false;
   }
 }

apps/mobile/app/common/filesystem/utils.js

@@ -17,10 +17,13 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import * as ScopedStorage from "react-native-scoped-storage";
 import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
+import * as ScopedStorage from "react-native-scoped-storage";
+import { DatabaseLogger, db } from "../database";
+import { hosts } from "@notesnook/core";
 
+export const ABYTES = 17;
 export const cacheDirOld = RNFetchBlob.fs.dirs.CacheDir;
 
 export const cacheDir =
@@ -34,24 +37,36 @@ export function getRandomId(prefix) {
     .replace("0.", prefix || "");
 }
 
-export function extractValueFromXmlTag(code, xml) {
-  if (!xml.includes(code)) return `Unknown ${code}`;
-  return xml.slice(
-    xml.indexOf(`<${code}>`) + code.length + 2,
-    xml.indexOf(`</${code}>`)
-  );
-}
+/**
+ *
+ * @param {string | undefined} data
+ * @returns
+ */
+export function parseS3Error(data) {
+  const xml = typeof data === "string" ? data : null;
 
-export async function fileCheck(response, totalSize) {
-  if (totalSize < 1000) {
-    let text = await response.text();
-    if (text.startsWith("<?xml")) {
-      let errorJson = {
-        Code: extractValueFromXmlTag("Code", text),
-        Message: extractValueFromXmlTag("Message", text)
-      };
-      throw new Error(`${errorJson.Code}: ${errorJson.Message}`);
+  const error = {
+    Code: "UNKNOWN",
+    Message: xml
+  };
+
+  try {
+    if (!xml) return error;
+    const doc = new DOMParser().parseFromString(xml, "text/xml");
+
+    const ErrorElement = doc.getElementsByTagName("Error")[0];
+    if (!ErrorElement) return error;
+
+    for (const child of ErrorElement.children) {
+      if (
+        child.textContent &&
+        (child.tagName === "Code" || child.tagName === "Message")
+      )
+        error[child.tagName] = child.textContent;
     }
+    return error;
+  } catch (e) {
+    return error;
   }
 }
 
@@ -59,12 +74,11 @@ export function cancelable(operation) {
   const cancelToken = {
     cancel: () => {}
   };
-  return (filename, { url, headers }) => {
+  return (filename, requestOptions) => {
     return {
-      execute: () => operation(filename, { url, headers }, cancelToken),
+      execute: () => operation(filename, requestOptions, cancelToken),
       cancel: async () => {
         await cancelToken.cancel();
-        RNFetchBlob.fs.unlink(`${cacheDir}/${filename}`).catch(console.log);
       }
     };
   };
@@ -91,3 +105,36 @@ export async function releasePermissions(path) {
     }
   }
 }
+
+export async function getUploadedFileSize(hash) {
+  try {
+    const url = `${hosts.API_HOST}/s3?name=${hash}`;
+    const token = await db.tokenManager.getAccessToken();
+    const attachmentInfo = await fetch(url, {
+      method: "HEAD",
+      headers: { Authorization: `Bearer ${token}` }
+    });
+    const contentLength = parseInt(
+      attachmentInfo.headers?.get("content-length")
+    );
+    return isNaN(contentLength) ? 0 : contentLength;
+  } catch (e) {
+    DatabaseLogger.error(e);
+    return -1;
+  }
+}
+
+export async function checkUpload(filename, chunkSize, expectedSize) {
+  const size = await getUploadedFileSize(filename);
+  const totalChunks = Math.ceil(size / chunkSize);
+  const decryptedLength = size - totalChunks * ABYTES;
+  const error =
+    size === 0
+      ? `File size is 0.`
+      : size === -1
+      ? `File verification check failed.`
+      : expectedSize !== decryptedLength
+      ? `File size mismatch. Expected ${size} bytes but got ${decryptedLength} bytes.`
+      : undefined;
+  if (error) throw new Error(error);
+}

apps/mobile/app/components/app-lock-overlay/index.tsx

@@ -18,10 +18,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useCallback, useEffect, useRef } from "react";
-import { AppStateStatus, Platform, TextInput, View } from "react-native";
+import {
+  AppStateStatus,
+  Platform,
+  TextInput,
+  useWindowDimensions,
+  View
+} from "react-native";
 //@ts-ignore
 import { useThemeColors } from "@notesnook/theme";
-import { enabled } from "react-native-privacy-snapshot";
 import { DatabaseLogger } from "../../common/database";
 import {
   decrypt,
@@ -47,6 +52,7 @@ import Input from "../ui/input";
 import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
 const getUser = () => {
   const user = MMKV.getString("user");
@@ -87,6 +93,7 @@ const AppLockedOverlay = () => {
   const appState = useAppState();
   const lastAppState = useRef<AppStateStatus>(appState);
   const biometricUnlockAwaitingUserInput = useRef(false);
+  const { height } = useWindowDimensions();
   const keyboardType = useSettingStore(
     (state) => state.settings.applockKeyboardType
   );
@@ -121,7 +128,6 @@ const AppLockedOverlay = () => {
     );
     if (unlocked) {
       lockApp(false);
-      enabled(false);
       password.current = undefined;
     }
     biometricUnlockAwaitingUserInput.current = false;
@@ -148,7 +154,6 @@ const AppLockedOverlay = () => {
         }
 
         lockApp(false);
-        enabled(false);
         password.current = undefined;
       } else {
         ToastManager.show({
@@ -163,10 +168,6 @@ const AppLockedOverlay = () => {
   };
 
   useEffect(() => {
-    if (appState === "active") {
-      enabled(false);
-    }
-
     const prevState = lastAppState.current;
     lastAppState.current = appState;
 
@@ -192,26 +193,26 @@ const AppLockedOverlay = () => {
         DatabaseLogger.info("Biometric unlock request");
         onUnlockAppRequested();
       }
-
-      enabled(false);
     } else {
       SettingsService.appEnteredBackground();
-      if (SettingsService.get().privacyScreen) {
-        enabled(true);
-      }
     }
   }, [appState, onUnlockAppRequested, appLocked]);
 
   return appLocked ? (
-    <View
+    <KeyboardAwareScrollView
       style={{
         backgroundColor: colors.primary.background,
         width: "100%",
         height: "100%",
         position: "absolute",
-        zIndex: 999,
-        justifyContent: "center"
+        zIndex: 999
       }}
+      contentContainerStyle={{
+        justifyContent: "center",
+        minHeight: height
+      }}
+      keyboardDismissMode="interactive"
+      keyboardShouldPersistTaps="handled"
     >
       <Toast context="local" />
       <View
@@ -326,7 +327,7 @@ const AppLockedOverlay = () => {
           </View>
         </View>
       </View>
-    </View>
+    </KeyboardAwareScrollView>
   ) : null;
 };
 

apps/mobile/app/components/attachments/actions.tsx

@@ -30,6 +30,8 @@ import filesystem from "../../common/filesystem";
 import downloadAttachment from "../../common/filesystem/download-attachment";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
 import picker from "../../screens/editor/tiptap/picker";
+import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
+import { editorController } from "../../screens/editor/tiptap/utils";
 import {
   ToastManager,
   eSendEvent,
@@ -49,14 +51,12 @@ import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
 import { openNote } from "../list-items/note/wrapper";
 import { DateMeta } from "../properties/date-meta";
+import SheetProvider from "../sheet-provider";
 import { Button } from "../ui/button";
 import { Notice } from "../ui/notice";
 import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
-import { editorController } from "../../screens/editor/tiptap/utils";
-import SheetProvider from "../sheet-provider";
 
 const Actions = ({
   attachment,
@@ -88,7 +88,7 @@ const Actions = ({
           useAttachmentStore.getState().remove(attachment.hash);
         }
         downloadAttachment(attachment.hash, false);
-        eSendEvent(eCloseSheet, contextId);
+        fwdRef.current?.hide();
       },
       icon: "download"
     },
@@ -118,12 +118,14 @@ const Actions = ({
         setLoading({
           name: "Run file check"
         });
-        const res = await filesystem.checkAttachment(attachment.hash);
-        if (res.failed) {
-          db.attachments.markAsFailed(attachment.id, res.failed);
-          setFailed(res.failed);
+        const result = await filesystem.checkAttachment(attachment.hash);
+        if (!result) return;
+
+        if (result.failed) {
+          db.attachments.markAsFailed(attachment.id, result.failed);
+          setFailed(result.failed);
           ToastManager.show({
-            heading: "File check failed with error: " + res.failed,
+            heading: "File check failed with error: " + result.failed,
             type: "error",
             context: "local"
           });
@@ -147,9 +149,8 @@ const Actions = ({
     },
     {
       name: "Rename",
-      onPress: () => {
+      onPress: async () => {
         presentDialog({
-          context: contextId as any,
           input: true,
           title: "Rename file",
           paragraph: "Enter a new name for the file",
@@ -217,6 +218,7 @@ const Actions = ({
       style={{
         maxHeight: "100%"
       }}
+      keyboardShouldPersistTaps="never"
     >
       <Dialog context={contextId} />
       <SheetProvider context={contextId} />

apps/mobile/app/components/attachments/attachment-item.tsx

@@ -22,7 +22,6 @@ import { Attachment, VirtualizedGrouping } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { TouchableOpacity, View } from "react-native";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
 import { useDBItem } from "../../hooks/use-db-item";
@@ -44,7 +43,8 @@ export const AttachmentItem = ({
   setAttachments,
   pressable = true,
   hideWhenNotDownloading,
-  context
+  context,
+  errorOnly
 }: {
   id: string | number;
   attachments?: VirtualizedGrouping<Attachment>;
@@ -53,9 +53,9 @@ export const AttachmentItem = ({
   pressable?: boolean;
   hideWhenNotDownloading?: boolean;
   context?: string;
+  errorOnly?: boolean;
 }) => {
   const [attachment] = useDBItem(id, "attachment", attachments);
-
   const { colors } = useThemeColors();
   const [currentProgress, setCurrentProgress] = useAttachmentProgress(
     attachment,
@@ -67,8 +67,7 @@ export const AttachmentItem = ({
     Actions.present(attachment, setAttachments, context);
   };
 
-  return hideWhenNotDownloading &&
-    (!currentProgress || !currentProgress.value) ? null : (
+  return errorOnly && attachment && !attachment?.failed ? null : (
     <TouchableOpacity
       activeOpacity={0.9}
       onPress={onPress}
@@ -78,8 +77,6 @@ export const AttachmentItem = ({
         justifyContent: "space-between",
         padding: 12,
         paddingVertical: 6,
-        borderRadius: 5,
-        backgroundColor: colors.secondary.background,
         minHeight: 45
       }}
     >
@@ -89,41 +86,46 @@ export const AttachmentItem = ({
             style={{
               flexShrink: 1,
               flexDirection: "row",
-              alignItems: "center"
+              alignItems: "center",
+              gap: 10
             }}
           >
             <View
               style={{
                 justifyContent: "center",
                 alignItems: "center",
-                marginLeft: -5
+                marginLeft: -5,
+                borderWidth: 1,
+                borderColor: colors.secondary.border,
+                paddingHorizontal: 2,
+                width: 30,
+                height: 30,
+                borderRadius: 5
               }}
             >
-              <Icon name="file" size={SIZE.xxxl} color={colors.primary.icon} />
-
               <Paragraph
                 adjustsFontSizeToFit
-                size={6}
-                color={colors.static.white}
+                size={8}
+                color={colors.secondary.paragraph}
                 style={{
-                  position: "absolute"
+                  maxWidth: 30
                 }}
+                numberOfLines={1}
               >
-                {getFileExtension(attachment.filename).toUpperCase()}
+                {getFileExtension(attachment.filename).toUpperCase() ||
+                  attachment.mimeType.split("/")?.[1]?.toUpperCase()}
               </Paragraph>
             </View>
 
             <View
               style={{
-                flexShrink: 1,
-                marginLeft: 10
+                flexShrink: 1
               }}
             >
               <Paragraph
-                size={SIZE.sm - 1}
+                size={SIZE.sm}
                 style={{
-                  flexWrap: "wrap",
-                  marginBottom: 2.5
+                  flexWrap: "wrap"
                 }}
                 numberOfLines={1}
                 lineBreakMode="middle"
@@ -133,11 +135,8 @@ export const AttachmentItem = ({
               </Paragraph>
 
               {!hideWhenNotDownloading ? (
-                <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
-                  {formatBytes(attachment.size)}{" "}
-                  {currentProgress?.type
-                    ? "(" + currentProgress.type + "ing - tap to cancel)"
-                    : ""}
+                <Paragraph color={colors.secondary.paragraph} size={SIZE.xxs}>
+                  File size: {formatBytes(attachment.size)}
                 </Paragraph>
               ) : null}
             </View>

apps/mobile/app/components/attachments/download-attachments.tsx

@@ -1,297 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import React, { useRef, useState } from "react";
-import { Platform, View } from "react-native";
-import { db } from "../../common/database";
-import { downloadAttachments } from "../../common/filesystem/download-attachment";
-import {
-  PresentSheetOptions,
-  presentSheet
-} from "../../services/event-manager";
-import { Button } from "../ui/button";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import { ProgressBarComponent } from "../ui/svg/lazy";
-import { useThemeColors } from "@notesnook/theme";
-import { FlatList } from "react-native-actions-sheet";
-import { AttachmentItem } from "./attachment-item";
-import { Attachment, VirtualizedGrouping } from "@notesnook/core";
-
-const DownloadAttachments = ({
-  close,
-  attachments,
-  isNote,
-  update
-}: {
-  attachments: VirtualizedGrouping<Attachment>;
-  close?: ((ctx?: string | undefined) => void) | undefined;
-  isNote?: boolean;
-  update?: (props: PresentSheetOptions) => void;
-}) => {
-  const { colors } = useThemeColors();
-  const [downloading, setDownloading] = useState(false);
-  const [progress, setProgress] = useState({
-    value: 0,
-    statusText: "Download started... Please wait"
-  });
-  const [result, setResult] = useState(new Map());
-  const canceled = useRef(false);
-  const groupId = useRef<string>();
-
-  const onDownload = async () => {
-    update?.({
-      disableClosing: true
-    } as PresentSheetOptions);
-    setDownloading(true);
-    canceled.current = false;
-    groupId.current = Date.now().toString();
-    const result = await downloadAttachments(
-      await attachments.ids(),
-      (progress: number, statusText: string) =>
-        setProgress({ value: progress, statusText }),
-      canceled,
-      groupId.current
-    );
-    if (canceled.current) return;
-    setResult(result || new Map());
-    setDownloading(false);
-    update?.({
-      disableClosing: false
-    } as PresentSheetOptions);
-  };
-
-  const cancel = async () => {
-    update?.({
-      disableClosing: false
-    } as PresentSheetOptions);
-    canceled.current = true;
-    if (!groupId.current) return;
-    console.log(groupId.current, "canceling groupId downloads");
-    await db.fs().cancel(groupId.current);
-    setDownloading(false);
-    setResult(new Map());
-    groupId.current = undefined;
-  };
-
-  const failedResults = () => {
-    const results = [];
-    for (const value of result.values()) {
-      if (value.status === 0) results.push(value.attachment);
-    }
-    return results;
-  };
-
-  function getResultText() {
-    const downloadedAttachmentsCount =
-      attachments?.placeholders?.length - failedResults().length;
-    if (downloadedAttachmentsCount === 0)
-      return "Failed to download all attachments";
-    return `Successfully downloaded ${downloadedAttachmentsCount}/${
-      attachments?.placeholders.length
-    } attachments as a zip file at ${
-      Platform.OS === "android" ? "the selected folder" : "Notesnook/downloads"
-    }`;
-  }
-
-  return (
-    <View
-      style={{
-        alignItems: "center",
-        width: "100%",
-        paddingVertical: 12,
-        paddingHorizontal: 12
-      }}
-    >
-      <Heading>
-        {downloading
-          ? "Downloading attachments"
-          : result?.size
-          ? "Downloaded attachments"
-          : "Download attachments"}
-      </Heading>
-
-      {downloading ? (
-        <Paragraph
-          style={{
-            textAlign: "center"
-          }}
-        >
-          {progress.statusText}
-        </Paragraph>
-      ) : result?.size ? (
-        <Paragraph
-          style={{
-            textAlign: "center"
-          }}
-        >
-          {getResultText()}
-        </Paragraph>
-      ) : (
-        <Paragraph
-          style={{
-            textAlign: "center"
-          }}
-        >
-          Are you sure you want to download all attachments
-          {isNote ? " of this note?" : "?"}
-        </Paragraph>
-      )}
-
-      {downloading ? (
-        <View
-          style={{
-            width: 200,
-            marginTop: 10
-          }}
-        >
-          <ProgressBarComponent
-            height={5}
-            width={null}
-            animated={true}
-            useNativeDriver
-            progress={
-              progress.value
-                ? progress.value / attachments.placeholders?.length
-                : 0
-            }
-            unfilledColor={colors.secondary.background}
-            color={colors.primary.accent}
-            borderWidth={0}
-          />
-        </View>
-      ) : null}
-
-      <FlatList
-        style={{
-          maxHeight: 300,
-          width: "100%",
-          minHeight: 60,
-          backgroundColor: colors.secondary.background,
-          borderRadius: 5,
-          marginVertical: 12
-        }}
-        data={downloading ? attachments.placeholders : undefined}
-        ListEmptyComponent={
-          <View
-            style={{
-              width: "100%",
-              justifyContent: "center",
-              alignItems: "center",
-              height: 60
-            }}
-          >
-            <Paragraph color={colors.secondary.paragraph}>
-              No downloads in progress.
-            </Paragraph>
-          </View>
-        }
-        keyExtractor={(index) => "attachment_download" + index}
-        renderItem={({ index }) => {
-          return (
-            <AttachmentItem
-              id={index}
-              setAttachments={() => {}}
-              pressable={false}
-              hideWhenNotDownloading={true}
-              attachments={attachments}
-            />
-          );
-        }}
-      />
-
-      {result?.size ? (
-        <Button
-          style={{
-            width: 250,
-            borderRadius: 100,
-            marginTop: 20
-          }}
-          onPress={() => {
-            close?.();
-          }}
-          type="accent"
-          title="Done"
-        />
-      ) : !downloading ? (
-        <View
-          style={{
-            flexDirection: "row",
-            width: "100%",
-            marginTop: 20
-          }}
-        >
-          <Button
-            style={{
-              flex: 1,
-              borderRadius: 100,
-              marginRight: 5
-            }}
-            onPress={() => {
-              close?.();
-            }}
-            type="secondary"
-            title="No"
-          />
-          <Button
-            style={{
-              flex: 1,
-              borderRadius: 100,
-              marginLeft: 5
-            }}
-            onPress={onDownload}
-            type="accent"
-            title="Yes"
-          />
-        </View>
-      ) : (
-        <Button
-          style={{
-            width: 250,
-            borderRadius: 100,
-            marginTop: 20
-          }}
-          onPress={cancel}
-          type="error"
-          title="Cancel"
-        />
-      )}
-    </View>
-  );
-};
-
-DownloadAttachments.present = (
-  context: string,
-  attachments: VirtualizedGrouping<Attachment>,
-  isNote?: boolean
-) => {
-  presentSheet({
-    context: context,
-    component: (ref, close, update) => (
-      <DownloadAttachments
-        close={close}
-        attachments={attachments}
-        isNote={isNote}
-        update={update}
-      />
-    )
-  });
-};
-
-export default DownloadAttachments;

apps/mobile/app/components/attachments/index.tsx

@@ -19,21 +19,28 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import {
   Attachment,
+  FilteredSelector,
   Note,
   SortOptions,
   VirtualizedGrouping
 } from "@notesnook/core";
-import { FilteredSelector } from "@notesnook/core/dist/database/sql-collection";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useRef, useState } from "react";
-import { ActivityIndicator, ScrollView, View } from "react-native";
+import { ActivityIndicator, View } from "react-native";
 import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
+import { ScrollView } from "react-native-gesture-handler";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import create, { State } from "zustand";
 import { db } from "../../common/database";
 import filesystem from "../../common/filesystem";
-import { presentSheet } from "../../services/event-manager";
-import { useSettingStore } from "../../stores/use-setting-store";
+import { downloadAttachments } from "../../common/filesystem/download-attachment";
+import { AttachmentGroupProgress } from "../../screens/settings/attachment-group-progress";
+import { presentSheet, ToastManager } from "../../services/event-manager";
+import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { SIZE } from "../../utils/size";
+import { Dialog } from "../dialog";
+import { presentDialog } from "../dialog/functions";
+import { Header } from "../header";
 import SheetProvider from "../sheet-provider";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
@@ -42,22 +49,105 @@ import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { AttachmentItem } from "./attachment-item";
-import DownloadAttachments from "./download-attachments";
 
 const DEFAULT_SORTING: SortOptions = {
   sortBy: "dateEdited",
   sortDirection: "desc"
 };
 
-export const AttachmentDialog = ({ note }: { note?: Note }) => {
+type RecheckerProgress = {
+  failed: number;
+  passed: number;
+  isWorking: boolean;
+  shown: boolean;
+  filter: string;
+};
+
+interface RecheckerState extends State {
+  progress: {
+    [key: string]: RecheckerProgress;
+  };
+  setProgress: (key: string, progress: RecheckerProgress) => void;
+  currentFilter: string;
+}
+
+const useRechecker = create<RecheckerState>((set) => ({
+  progress: {
+    all: {
+      failed: 0,
+      passed: 0,
+      isWorking: false,
+      shown: false,
+      filter: "all"
+    }
+  },
+  currentFilter: "all",
+  setProgress: (key: string, progress: RecheckerProgress) => {
+    set((state) => ({
+      progress: {
+        ...state.progress,
+        [key]: progress
+      }
+    }));
+  }
+}));
+
+const attachmentTypes = [
+  {
+    title: "All",
+    filterBy: "all"
+  },
+  {
+    title: "Images",
+    filterBy: "images"
+  },
+  {
+    title: "Docs",
+    filterBy: "documents"
+  },
+  {
+    title: "Video",
+    filterBy: "video"
+  },
+  {
+    title: "Audio",
+    filterBy: "audio"
+  },
+  {
+    title: "Orphaned",
+    filterBy: "orphaned"
+  },
+  {
+    title: "Errors",
+    filterBy: "errors"
+  }
+];
+
+export const AttachmentDialog = ({
+  note,
+  isSheet
+}: {
+  note?: Note;
+  isSheet: boolean;
+}) => {
   const { colors } = useThemeColors();
-  const { height } = useSettingStore((state) => state.dimensions);
   const [attachments, setAttachments] =
     useState<VirtualizedGrouping<Attachment>>();
   const attachmentSearchValue = useRef<string>();
+  const [loading, setLoading] = useState(true);
   const searchTimer = useRef<NodeJS.Timeout>();
-  const [loading, setLoading] = useState(false);
   const [currentFilter, setCurrentFilter] = useState("all");
+  const rechecker = useRechecker((state) =>
+    note ? state.progress[note.id] || {} : state.progress.all
+  );
+  const currentFilterRef = useRef(currentFilter);
+  currentFilterRef.current = currentFilter;
+
+  useEffect(() => {
+    useRechecker.setState({
+      currentFilter: currentFilter
+    });
+  }, [currentFilter]);
 
   const refresh = React.useCallback(() => {
     if (note) {
@@ -68,6 +158,7 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
           sortBy: "dateModified"
         })
         .then((attachments) => {
+          setLoading(false);
           setAttachments(attachments);
         });
     } else {
@@ -76,7 +167,10 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
           ...DEFAULT_SORTING,
           sortBy: "dateModified"
         })
-        .then((attachments) => setAttachments(attachments));
+        .then((attachments) => {
+          setAttachments(attachments);
+          setLoading(false);
+        });
     }
   }, [note]);
 
@@ -108,52 +202,70 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
       setAttachments={async () => {
         setAttachments(await filterAttachments(currentFilter));
       }}
+      errorOnly={currentFilter === "errors"}
       attachments={attachments}
       id={index}
-      context="attachments-list"
+      context="global"
     />
   );
 
   const onCheck = async () => {
-    if (!attachments) return;
-    setLoading(true);
+    const getState = () =>
+      useRechecker.getState().progress[note?.id || "all"] || {};
+    const setState = (state: Partial<RecheckerProgress>) =>
+      useRechecker.getState().setProgress(note?.id || "all", {
+        ...getState(),
+        ...state
+      });
 
-    for (let i = 0; i < attachments.placeholders.length; i++) {
+    if (!attachments || getState().isWorking) return;
+    setState({
+      isWorking: true,
+      failed: 0,
+      passed: 0,
+      shown: true,
+      filter: currentFilterRef.current
+    });
+    const filter = currentFilterRef.current;
+    const filteredAttachments = await filterAttachments(
+      currentFilterRef.current
+    );
+
+    for (let i = 0; i < filteredAttachments.placeholders.length; i++) {
+      if (!getState().isWorking) {
+        ToastManager.show({
+          message: "Attachment recheck cancelled",
+          type: "info",
+          context: isSheet ? "local" : "global"
+        });
+        return;
+      }
       const attachment = (await attachments.item(i))?.item;
+      if (currentFilter == "errors" && !attachment?.failed) continue;
+
       if (!attachment) continue;
       const result = await filesystem.checkAttachment(attachment.hash);
+      if (!result) return;
       if (result.failed) {
+        setState({
+          failed: getState().failed + 1
+        });
         await db.attachments.markAsFailed(attachment.hash, result.failed);
       } else {
-        await db.attachments.markAsFailed(attachment.id, undefined);
+        setState({
+          passed: getState().passed + 1
+        });
+        await db.attachments.markAsFailed(attachment.id);
       }
     }
-    refresh();
-    setLoading(false);
-  };
-
-  const attachmentTypes = [
-    {
-      title: "All",
-      filterBy: "all"
-    },
-    {
-      title: "Images",
-      filterBy: "images"
-    },
-    {
-      title: "Documents",
-      filterBy: "documents"
-    },
-    {
-      title: "Video",
-      filterBy: "video"
-    },
-    {
-      title: "Audio",
-      filterBy: "audio"
+    if (filter === useRechecker.getState().currentFilter) {
+      setAttachments(await filterAttachments(currentFilter));
     }
-  ];
+
+    setState({
+      isWorking: false
+    });
+  };
 
   const filterAttachments = async (type: string) => {
     let items: FilteredSelector<Attachment> = db.attachments.all;
@@ -183,6 +295,14 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
         items = note
           ? db.attachments.ofNote(note.id, "documents")
           : db.attachments.documents;
+        break;
+      case "orphaned":
+        items = db.attachments.orphaned;
+        break;
+      case "errors":
+        items = items = note
+          ? db.attachments.ofNote(note.id, "all")
+          : db.attachments.all;
     }
 
     return await items.sorted({
@@ -192,39 +312,59 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
   };
 
   return (
-    <View
-      style={{
-        width: "100%",
-        alignSelf: "center",
-        paddingHorizontal: 12,
-        height: height * 0.85
-      }}
-    >
-      <SheetProvider context="attachments-list" />
-      <View
-        style={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center"
-        }}
-      >
-        <Heading>Attachments</Heading>
-
+    <>
+      {isSheet ? (
+        <>
+          <SheetProvider context="attachments-list" />
+          <Dialog context="local" />
+        </>
+      ) : null}
+      {!isSheet ? (
+        <Header
+          title="Manage attachments"
+          renderedInRoute="SettingsGroup"
+          canGoBack
+          headerRightButtons={[
+            {
+              onPress() {
+                onCheck();
+              },
+              title: "Recheck all"
+            },
+            {
+              onPress() {
+                if (!attachments) return;
+                presentDialog({
+                  title: `Download ${attachments.placeholders.length} attachments`,
+                  paragraph:
+                    "Are you sure you want to download all attachments?",
+                  positiveText: "Download",
+                  positivePress: async () => {
+                    downloadAttachments(await attachments.ids());
+                  },
+                  negativeText: "Cancel"
+                });
+              },
+              title: "Download all"
+            }
+          ]}
+        />
+      ) : (
         <View
           style={{
-            flexDirection: "row"
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            paddingHorizontal: 12
           }}
         >
-          {loading ? (
-            <ActivityIndicator
-              style={{
-                height: 40,
-                width: 40,
-                marginRight: 10
-              }}
-              size={SIZE.lg}
-            />
-          ) : (
+          <Heading>Attachments</Heading>
+
+          <View
+            style={{
+              flexDirection: "row"
+            }}
+          >
             <IconButton
               name="check-all"
               style={{
@@ -236,125 +376,243 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
               size={SIZE.lg}
               onPress={onCheck}
             />
-          )}
 
-          <IconButton
-            name="download"
-            style={{
-              height: 40,
-              width: 40
-            }}
-            color={colors.primary.paragraph}
-            onPress={() => {
-              if (!attachments) return;
-              DownloadAttachments.present(
-                "attachments-list",
-                attachments,
-                !!note
-              );
-            }}
-            size={SIZE.lg}
-          />
-        </View>
-      </View>
-
-      <Seperator />
-      <Input
-        placeholder="Filter attachments by filename, type or hash"
-        onChangeText={onChangeText}
-        onSubmit={() => {
-          onChangeText(attachmentSearchValue.current as string);
-        }}
-      />
-
-      <View>
-        <ScrollView
-          style={{
-            width: "100%",
-            height: 50,
-            flexDirection: "row",
-            backgroundColor: colors.primary.background
-          }}
-          contentContainerStyle={{
-            minWidth: "100%",
-            height: 50
-          }}
-          horizontal
-        >
-          {attachmentTypes.map((item) => (
-            <Button
-              type={
-                currentFilter === item.filterBy ? "secondaryAccented" : "plain"
-              }
-              key={item.title}
-              title={item.title}
+            <IconButton
+              name="download"
               style={{
-                borderRadius: 0,
-                borderBottomWidth: 1,
-                flexGrow: 1,
-                borderBottomColor:
-                  currentFilter !== item.filterBy
-                    ? "transparent"
-                    : colors.primary.accent
+                height: 40,
+                width: 40
               }}
-              onPress={async () => {
-                setCurrentFilter(item.filterBy);
-                setAttachments(await filterAttachments(item.filterBy));
+              color={colors.primary.paragraph}
+              onPress={() => {
+                if (!attachments) return;
+                presentDialog({
+                  title: `Download ${attachments.placeholders.length} attachments`,
+                  paragraph:
+                    "Are you sure you want to download all attachments?",
+                  context: "local",
+                  positiveText: "Download",
+                  positivePress: async () => {
+                    downloadAttachments(await attachments.ids());
+                  },
+                  negativeText: "Cancel"
+                });
               }}
+              size={SIZE.lg}
             />
-          ))}
-        </ScrollView>
-      </View>
-      <FlashList
-        keyboardDismissMode="none"
-        keyboardShouldPersistTaps="always"
-        ListEmptyComponent={
-          <View
-            style={{
-              height: 150,
-              justifyContent: "center",
-              alignItems: "center"
-            }}
-          >
-            <Icon name="attachment" size={60} color={colors.secondary.icon} />
-            <Paragraph>
-              {note ? "No attachments on this note" : "No attachments"}
-            </Paragraph>
           </View>
-        }
-        ListFooterComponent={
-          <View
-            style={{
-              height: 350
-            }}
-          />
-        }
-        estimatedItemSize={50}
-        data={attachments?.placeholders}
-        renderItem={renderItem}
-      />
+        </View>
+      )}
 
-      <Paragraph
-        color={colors.secondary.paragraph}
-        size={SIZE.xs}
+      <View
         style={{
-          textAlign: "center",
-          marginTop: 10
+          width: "100%",
+          alignSelf: "center",
+          paddingHorizontal: 12,
+          height: "100%"
         }}
       >
-        <Icon
-          name="shield-key-outline"
-          size={SIZE.xs}
-          color={colors.primary.icon}
+        <Seperator />
+        <Input
+          placeholder="Filter attachments by filename, type or hash"
+          onChangeText={onChangeText}
+          onSubmit={() => {
+            onChangeText(attachmentSearchValue.current as string);
+          }}
         />
-        {"  "}All attachments are end-to-end encrypted.
-      </Paragraph>
+
+        {rechecker.shown ? (
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              width: "100%",
+              borderRadius: 10,
+              padding: 10,
+              borderWidth: 1,
+              borderColor: colors.primary.border,
+              gap: 12,
+              justifyContent: "space-between"
+            }}
+          >
+            <View
+              style={{
+                flexDirection: "row",
+                gap: 12,
+                alignItems: "center"
+              }}
+            >
+              {rechecker.isWorking ? (
+                <ActivityIndicator color={colors.primary.accent} />
+              ) : (
+                <Icon
+                  name="file-check"
+                  size={30}
+                  color={colors.primary.accent}
+                />
+              )}
+
+              <View>
+                <Paragraph>
+                  {rechecker.isWorking
+                    ? note
+                      ? `Checking ${rechecker.filter.toLowerCase()} note attachments`
+                      : `Checking ${rechecker.filter.toLowerCase()} attachments`
+                    : "Attachments recheck complete"}
+                </Paragraph>
+                <Paragraph>
+                  {`${rechecker.isWorking ? "Please wait... " : ""}Passed: ${
+                    rechecker.passed
+                  }, Failed: ${rechecker.failed}`}
+                </Paragraph>
+              </View>
+            </View>
+
+            <IconButton
+              type={rechecker.isWorking ? "errorShade" : "plain"}
+              name={rechecker.isWorking ? "close" : "check"}
+              size={SIZE.lg}
+              color={
+                rechecker.isWorking ? colors.error.icon : colors.primary.accent
+              }
+              onPress={() => {
+                useRechecker.getState().setProgress(note?.id || "all", {
+                  ...useRechecker.getState().progress[note?.id || "all"],
+                  shown: false,
+                  isWorking: false
+                });
+              }}
+            />
+          </View>
+        ) : null}
+
+        <View>
+          <ScrollView
+            style={{
+              backgroundColor: colors.primary.background,
+              flexWrap: "wrap",
+              flexDirection: "row",
+              paddingVertical: 12
+            }}
+            contentContainerStyle={{
+              alignItems: "center"
+            }}
+            horizontal
+          >
+            {attachmentTypes.map((item) =>
+              item.filterBy === "orphaned" && note ? null : (
+                <Button
+                  type={
+                    currentFilter === item.filterBy
+                      ? "secondaryAccented"
+                      : "plain"
+                  }
+                  key={item.title}
+                  title={item.title}
+                  fontSize={SIZE.sm}
+                  style={{
+                    borderRadius: 100,
+                    paddingHorizontal: 12,
+                    height: 40,
+                    minWidth: 80
+                  }}
+                  onPress={async () => {
+                    const filterBy = item.filterBy;
+                    setCurrentFilter(filterBy);
+                    setLoading(true);
+                    filterAttachments(filterBy)
+                      .then((results) => {
+                        if (filterBy !== currentFilterRef.current) return;
+                        setAttachments(results);
+                        setLoading(false);
+                      })
+                      .catch(console.log);
+                  }}
+                />
+              )
+            )}
+          </ScrollView>
+        </View>
+
+        <FlashList
+          keyboardDismissMode="none"
+          keyboardShouldPersistTaps="always"
+          ListEmptyComponent={
+            <View
+              style={{
+                height: "100%",
+                justifyContent: "center",
+                alignItems: "center"
+              }}
+            >
+              {loading ? (
+                <ActivityIndicator size={40} color={colors.primary.accent} />
+              ) : (
+                <>
+                  <Icon
+                    name="attachment"
+                    size={60}
+                    color={colors.secondary.icon}
+                  />
+                  <Paragraph>
+                    {note ? "No attachments on this note" : "No attachments"}
+                  </Paragraph>
+                </>
+              )}
+            </View>
+          }
+          ListHeaderComponent={<AllProgress note={note} />}
+          ListFooterComponent={
+            <View
+              style={{
+                height: 350
+              }}
+            />
+          }
+          estimatedItemSize={50}
+          data={loading ? [] : attachments?.placeholders}
+          renderItem={renderItem}
+        />
+      </View>
+    </>
+  );
+};
+
+const AllProgress = ({ note }: { note?: Note }) => {
+  const progress = useAttachmentStore((state) =>
+    note
+      ? {
+          downloading: {
+            [note.id]: state.downloading?.[note.id]
+          },
+          uploading: {
+            [note.id]: state.uploading?.[note.id]
+          }
+        }
+      : state
+  );
+
+  return (
+    <View
+      style={{
+        gap: 10,
+        width: "100%"
+      }}
+    >
+      {Object.keys(progress.downloading || {}).map((groupId) => (
+        <AttachmentGroupProgress key={groupId} groupId={groupId} />
+      ))}
+
+      {Object.keys(progress.uploading || {}).map((groupId) => (
+        <AttachmentGroupProgress key={groupId} groupId={groupId} />
+      ))}
     </View>
   );
 };
 
 AttachmentDialog.present = (note?: Note) => {
   presentSheet({
-    component: () => <AttachmentDialog note={note} />
+    component: () => <AttachmentDialog note={note} isSheet={true} />,
+    keyboardHandlerDisabled: true
   });
 };

apps/mobile/app/components/auth/change-password.js

@@ -68,7 +68,8 @@ export const ChangePassword = () => {
     setLoading(true);
     try {
       const result = await BackupService.run(false, "change-password-dialog");
-      if (!result) throw new Error("Failed to create backup");
+      if (result.error)
+        throw new Error(`Failed to create backup: ${result.error}`);
 
       await db.user.clearSessions();
       await db.user.changePassword(oldPassword.current, password.current);

apps/mobile/app/components/auth/login.js

@@ -17,12 +17,16 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
+import Sync from "../../services/sync";
+import { useSettingStore } from "../../stores/use-setting-store";
+import { useUserStore } from "../../stores/use-user-store";
+import { eUserLoggedIn } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import SheetProvider from "../sheet-provider";
@@ -34,11 +38,6 @@ import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
 import { useLogin } from "./use-login";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { eUserLoggedIn } from "../../utils/events";
-import { useUserStore } from "../../stores/use-user-store";
-import Sync from "../../services/sync";
-import { Notice } from "../ui/notice";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -184,7 +183,11 @@ export const Login = ({ changeMode }) => {
             defaultValue={email.current}
             editable={step === LoginSteps.emailAuth && !loading}
             onSubmit={() => {
-              passwordInputRef.current?.focus();
+              if (step === LoginSteps.emailAuth) {
+                login();
+              } else {
+                passwordInputRef.current?.focus();
+              }
             }}
           />
 
@@ -243,6 +246,7 @@ export const Login = ({ changeMode }) => {
                 width: 250,
                 borderRadius: 100
               }}
+              height={50}
               fontSize={SIZE.md}
               type="accent"
               title={!loading ? "Continue" : null}

apps/mobile/app/components/auth/signup.js

@@ -35,6 +35,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
 import { useSettingStore } from "../../stores/use-setting-store";
+import SettingsService from "../../services/settings";
 
 export const Signup = ({ changeMode, trial }) => {
   const { colors } = useThemeColors();
@@ -77,6 +78,7 @@ export const Signup = ({ changeMode, trial }) => {
       clearMessage();
       setEmailVerifyMessage();
       hideAuth();
+      SettingsService.setProperty("encryptedBackup", true);
       await sleep(300);
       if (trial) {
         PremiumService.sheet(null, null, true);

apps/mobile/app/components/auth/two-factor.js

@@ -37,6 +37,7 @@ import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { useCallback } from "react";
+import { ScrollView } from "react-native-actions-sheet";
 
 const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
   const { colors } = useThemeColors();
@@ -143,7 +144,10 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
   }, [currentMethod.method, mfaInfo.token, seconds, sending, start]);
 
   return (
-    <View>
+    <ScrollView
+      keyboardShouldPersistTaps="handled"
+      keyboardDismissMode="interactive"
+    >
       <View
         style={{
           alignItems: "center",
@@ -214,6 +218,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 code.current = value;
                 //onNext();
               }}
+              onSubmitEditing={onNext}
               caretHidden
               inputStyle={{
                 fontSize: SIZE.lg,
@@ -225,6 +230,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
               keyboardType={
                 currentMethod.method === "recoveryCode" ? "default" : "numeric"
               }
+              enablesReturnKeyAutomatically
               containerStyle={{
                 height: 60,
                 borderWidth: 0,
@@ -297,7 +303,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
           </>
         )}
       </View>
-    </View>
+    </ScrollView>
   );
 };
 

apps/mobile/app/components/auth/use-login.js

@@ -83,7 +83,7 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
                   setLoading(false);
                   setTimeout(() => {
                     passwordInputRef.current?.focus();
-                  }, 1);
+                  }, 500);
                   callback && callback(true);
                 }
                 callback && callback(false);

apps/mobile/app/components/dialog-provider/index.js

@@ -23,6 +23,7 @@ import { AnnouncementDialog } from "../announcements";
 import AuthModal from "../auth/auth-modal";
 import { SessionExpired } from "../auth/session-expired";
 import { Dialog } from "../dialog";
+import { AppLockPassword } from "../dialogs/applock-password";
 import JumpToSectionDialog from "../dialogs/jump-to-section";
 import { LoadingDialog } from "../dialogs/loading";
 import PDFPreview from "../dialogs/pdf-preview";
@@ -35,8 +36,7 @@ import { Expiring } from "../premium/expiring";
 import SheetProvider from "../sheet-provider";
 import RateAppSheet from "../sheets/rate-app";
 import RecoveryKeySheet from "../sheets/recovery-key";
-import RestoreDataSheet from "../sheets/restore-data";
-import { AppLockPassword } from "../dialogs/applock-password";
+import Progress from "../dialogs/progress";
 
 const DialogProvider = () => {
   const { colors } = useThemeColors();
@@ -52,7 +52,6 @@ const DialogProvider = () => {
       <RecoveryKeySheet colors={colors} />
       <SheetProvider />
       <SheetProvider context="sync_progress" />
-      <RestoreDataSheet />
       <ResultDialog />
       <VaultDialog colors={colors} />
       <RateAppSheet />
@@ -62,6 +61,7 @@ const DialogProvider = () => {
       <SessionExpired />
       <PDFPreview />
       <JumpToSectionDialog />
+      <Progress />
     </>
   );
 };

apps/mobile/app/components/dialog/dialog-container.tsx

@@ -32,21 +32,29 @@ const DialogContainer = ({
 }: ViewProps & {
   width?: any;
   height?: any;
+  noBorder?: boolean;
 }) => {
   const { colors } = useThemeColors();
 
   return (
     <View
       {...restProps}
-      style={{
-        ...getElevationStyle(5),
-        width: width || DDS.isTab ? 500 : "85%",
-        maxHeight: height || 450,
-        borderRadius: 10,
-        backgroundColor: colors.primary.background,
-        paddingTop: 12,
-        ...getContainerBorder(colors.secondary.background, 0.8, 0.05)
-      }}
+      style={[
+        style,
+        {
+          width: width || DDS.isTab ? 500 : "85%",
+          maxHeight: height || 450,
+          borderRadius: 10,
+          backgroundColor: colors.primary.background,
+          paddingTop: 12
+        },
+        restProps?.noBorder
+          ? {}
+          : {
+              ...getElevationStyle(5),
+              ...getContainerBorder(colors.secondary.background, 0.8, 0.05)
+            }
+      ]}
     />
   );
 };

apps/mobile/app/components/dialog/functions.ts

@@ -25,7 +25,7 @@ type DialogInfo = {
   paragraph?: string;
   positiveText?: string;
   negativeText?: string;
-  positivePress?: (value: any) => void;
+  positivePress?: (...args: any[]) => void;
   onClose?: () => void;
   positiveType?:
     | "transparent"
@@ -45,6 +45,15 @@ type DialogInfo = {
   context: "global" | "local" | (string & {});
   secureTextEntry?: boolean;
   keyboardType?: string;
+  check?: {
+    info: string;
+    type?: string;
+    defaultValue?: boolean;
+  };
+  notice: {
+    text: string;
+    type: "alert" | "information";
+  };
 };
 
 export function presentDialog(data: Partial<DialogInfo>): void {

apps/mobile/app/components/dialog/index.js

@@ -37,6 +37,7 @@ import DialogHeader from "./dialog-header";
 import { useCallback } from "react";
 import { Button } from "../ui/button";
 import { getContainerBorder } from "../../utils/colors";
+import { Notice } from "../ui/notice";
 
 export const Dialog = ({ context = "global" }) => {
   const { colors } = useThemeColors();
@@ -62,7 +63,8 @@ export const Dialog = ({ context = "global" }) => {
     disableBackdropClosing: false,
     check: {
       info: "Check",
-      type: "transparent"
+      type: "transparent",
+      defaultValue: false
     }
   });
 
@@ -86,7 +88,7 @@ export const Dialog = ({ context = "global" }) => {
       if (!data.context) data.context = "global";
       if (data.context !== context) return;
       setDialogInfo(data);
-      setChecked(false);
+      setChecked(data.check?.defaultValue);
       values.current.inputValue = data.defaultValue;
       setVisible(true);
     },
@@ -180,6 +182,19 @@ export const Dialog = ({ context = "global" }) => {
           </View>
         ) : null}
 
+        {dialogInfo?.notice ? (
+          <View
+            style={{
+              paddingHorizontal: 12
+            }}
+          >
+            <Notice
+              type={dialogInfo.notice.type || "information"}
+              text={dialogInfo.notice.text}
+            />
+          </View>
+        ) : null}
+
         {dialogInfo.check ? (
           <>
             <Button
@@ -198,7 +213,7 @@ export const Dialog = ({ context = "global" }) => {
               iconSize={20}
               width="100%"
               title={dialogInfo.check.info}
-              type={checked ? dialogInfo.check.type || "selected" : "plain"}
+              type={checked ? dialogInfo.check.type || "plain" : "plain"}
             />
           </>
         ) : null}

apps/mobile/app/components/dialogs/pdf-preview/index.js

@@ -44,6 +44,7 @@ import { ProgressBarComponent } from "../../ui/svg/lazy";
 import Paragraph from "../../ui/typography/paragraph";
 import { sleep } from "../../../utils/time";
 import { MMKV } from "../../../common/database/mmkv";
+import { deleteCacheFileByPath } from "../../../common/filesystem/io";
 
 const WIN_WIDTH = Dimensions.get("window").width;
 const WIN_HEIGHT = Dimensions.get("window").height;
@@ -124,6 +125,7 @@ const PDFPreview = () => {
   );
 
   const close = () => {
+    deleteCacheFileByPath(pdfSource);
     setPDFSource(null);
     setVisible(false);
     setPassword("");

apps/mobile/app/components/dialogs/progress/index.tsx

@@ -0,0 +1,198 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { useThemeColors } from "@notesnook/theme";
+import React, { useEffect } from "react";
+import { View } from "react-native";
+import { eSendEvent, eSubscribeEvent } from "../../../services/event-manager";
+import { SIZE } from "../../../utils/size";
+import { Dialog } from "../../dialog";
+import BaseDialog from "../../dialog/base-dialog";
+import DialogContainer from "../../dialog/dialog-container";
+import { Button } from "../../ui/button";
+import { ProgressBarComponent } from "../../ui/svg/lazy";
+import Heading from "../../ui/typography/heading";
+import Paragraph from "../../ui/typography/paragraph";
+
+export type ProgressOptions = {
+  progress?: string;
+  cancelCallback?: () => void;
+  title?: string;
+  paragraph?: string;
+  fillBackground?: boolean;
+  canHideProgress?: boolean;
+};
+
+export const PROGRESS_EVENTS = {
+  start: "startProgress",
+  end: "endProgress",
+  update: "updateProgress"
+};
+
+export default function Progress() {
+  const { colors } = useThemeColors();
+  const [progress, setProgress] = React.useState<string | undefined>();
+  const [visible, setVisible] = React.useState(false);
+  const cancelCallback = React.useRef<() => void>();
+  const [data, setData] = React.useState<{
+    title?: string;
+    paragraph?: string;
+    fillBackground?: boolean;
+    canHideProgress?: boolean;
+  }>();
+
+  useEffect(() => {
+    const events = [
+      eSubscribeEvent(PROGRESS_EVENTS.start, (options: ProgressOptions) => {
+        setProgress(options.progress);
+        cancelCallback.current = options.cancelCallback;
+        console.log("options", options.fillBackground);
+        setData({
+          title: options.title,
+          paragraph: options.paragraph,
+          fillBackground: options.fillBackground,
+          canHideProgress: options.canHideProgress
+        });
+        setVisible(true);
+      }),
+      eSubscribeEvent(PROGRESS_EVENTS.end, () => {
+        setProgress(undefined);
+        setVisible(false);
+        setData(undefined);
+        cancelCallback.current?.();
+        cancelCallback.current = undefined;
+      }),
+      eSubscribeEvent(PROGRESS_EVENTS.update, (options: ProgressOptions) => {
+        setProgress(options.progress);
+        if (options.cancelCallback) {
+          cancelCallback.current = options.cancelCallback;
+        }
+
+        const data: ProgressOptions = {};
+        if (options.title) data.title = options.title;
+        if (options.paragraph) data.paragraph = options.paragraph;
+        if (options.fillBackground)
+          data.fillBackground = options.fillBackground;
+
+        setData((current) => {
+          return {
+            ...current,
+            ...data
+          };
+        });
+      })
+    ];
+    return () => {
+      events.forEach((event) => event?.unsubscribe());
+      cancelCallback.current = undefined;
+    };
+  }, []);
+
+  return !visible ? null : (
+    <BaseDialog
+      background={data?.fillBackground ? colors.primary.background : undefined}
+      visible
+    >
+      <DialogContainer
+        style={{
+          paddingHorizontal: 12,
+          paddingBottom: 10
+        }}
+        noBorder={data?.fillBackground ? true : false}
+      >
+        <Dialog context="local" />
+        <View
+          style={{
+            justifyContent: "center",
+            alignItems: "center",
+            paddingHorizontal: 12,
+            gap: 10,
+            paddingBottom: 20
+          }}
+        >
+          <Heading
+            style={{
+              textAlign: "center"
+            }}
+            color={colors.primary.paragraph}
+            size={SIZE.lg}
+          >
+            {data?.title}
+          </Heading>
+          <Paragraph
+            style={{
+              textAlign: "center"
+            }}
+            color={colors.secondary.paragraph}
+          >
+            {progress ? progress : data?.paragraph}
+          </Paragraph>
+
+          <View
+            style={{
+              flexDirection: "row",
+              width: 100,
+              paddingVertical: 12
+            }}
+          >
+            <ProgressBarComponent
+              height={5}
+              width={100}
+              animated={true}
+              useNativeDriver
+              indeterminate
+              indeterminateAnimationDuration={2000}
+              unfilledColor={colors.secondary.background}
+              color={colors.primary.accent}
+              borderWidth={0}
+            />
+          </View>
+
+          {data?.canHideProgress ? null : (
+            <Button
+              title={cancelCallback.current ? "Cancel" : "Hide"}
+              type="secondaryAccented"
+              onPress={() => {
+                if (cancelCallback.current) {
+                  cancelCallback.current?.();
+                }
+                setVisible(false);
+                setProgress(undefined);
+                setData(undefined);
+              }}
+              width="100%"
+            />
+          )}
+        </View>
+      </DialogContainer>
+    </BaseDialog>
+  );
+}
+
+export function startProgress(options: ProgressOptions) {
+  eSendEvent(PROGRESS_EVENTS.start, options);
+}
+
+export function endProgress() {
+  eSendEvent(PROGRESS_EVENTS.end);
+}
+
+export function updateProgress(options: ProgressOptions) {
+  eSendEvent(PROGRESS_EVENTS.update, options);
+}

apps/mobile/app/components/exception-handler/index.tsx

@@ -23,10 +23,7 @@ import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
 import { Dialog } from "../dialog";
 import { Issue } from "../sheets/github/issue";
 
-const error = (
-  stack: string,
-  component: string
-) => `Please let us know what happened. What steps we can take to reproduce the issue here.
+const error = (stack: string, component: string) => `
 
 _______________________________
 Stacktrace: In ${component}::${stack}`;
@@ -39,9 +36,9 @@ class ExceptionHandler extends React.Component<{
     error: Error | null;
     hasError: boolean;
   } = {
-      hasError: false,
-      error: null
-    };
+    hasError: false,
+    error: null
+  };
   static getDerivedStateFromError(error: Error) {
     return { hasError: true, error: error };
   }

apps/mobile/app/components/header/index.tsx

@@ -67,8 +67,6 @@ export const Header = ({
   hasSearch?: boolean;
   onSearch?: () => void;
 }) => {
-  const navigation = useNavigation();
-
   const { colors } = useThemeColors();
   const insets = useGlobalSafeAreaInsets();
   const [borderHidden, setBorderHidden] = useState(true);

apps/mobile/app/components/header/right-menus.tsx

@@ -96,7 +96,8 @@ export const RightMenus = ({
           animationDuration={200}
           style={{
             borderRadius: 5,
-            backgroundColor: contextMenuColors.primary.background
+            backgroundColor: contextMenuColors.primary.background,
+            marginTop: -40
           }}
           onRequestClose={() => {
             menuRef.current?.hide();

apps/mobile/app/components/image-preview/index.tsx

@@ -18,8 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import Sodium from "@ammarahmed/react-native-sodium";
-import dataurl from "@notesnook/core/dist/utils/dataurl";
-import type { ImageAttributes } from "@notesnook/editor/dist/extensions/image/index";
+import { DataURL } from "@notesnook/core";
+import type { ImageAttributes } from "@notesnook/editor";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useRef, useState } from "react";
 import { Platform, View } from "react-native";
@@ -55,8 +55,8 @@ const ImagePreview = () => {
     setLoading(true);
     setTimeout(async () => {
       let hash = image.hash;
-      if (!hash && image.src && dataurl.toObject(image.src)) {
-        const data = dataurl.toObject(image.src);
+      if (!hash && image.src && DataURL.toObject(image.src)) {
+        const data = DataURL.toObject(image.src);
         if (!data) return;
         hash = await Sodium.hashFile({
           data: data.data,

apps/mobile/app/components/intro/index.js

@@ -43,9 +43,6 @@ import { eSendEvent } from "../../services/event-manager";
 
 const Intro = ({ navigation }) => {
   const { colors } = useThemeColors();
-  const isTelemetryEnabled = useSettingStore(
-    (state) => state.settings.telemetry
-  );
   const { width, height } = useWindowDimensions();
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const insets = useGlobalSafeAreaInsets();
@@ -217,44 +214,6 @@ const Intro = ({ navigation }) => {
           type="accent"
           title="Get started"
         />
-
-        <TouchableOpacity
-          activeOpacity={1}
-          style={{
-            flexDirection: "row",
-            alignSelf: "center",
-            width: "90%",
-            marginBottom: 12,
-            paddingHorizontal: 12,
-            justifyContent: "center",
-            padding: 12,
-            maxWidth: 500
-          }}
-          onPress={() => {
-            SettingsService.set({ telemetry: !isTelemetryEnabled });
-          }}
-        >
-          <Icon
-            size={SIZE.md}
-            name={
-              isTelemetryEnabled ? "checkbox-marked" : "checkbox-blank-outline"
-            }
-            color={
-              isTelemetryEnabled ? colors.primary.accent : colors.primary.icon
-            }
-          />
-
-          <Paragraph
-            style={{
-              flexShrink: 1,
-              marginLeft: 6
-            }}
-            size={SIZE.xs}
-          >
-            Help improve Notesnook by sending completely anonymized{" "}
-            <Heading size={SIZE.xs}>private analytics and bug reports.</Heading>
-          </Paragraph>
-        </TouchableOpacity>
       </View>
     </ScrollView>
   );

apps/mobile/app/components/list/card.tsx

@@ -49,7 +49,8 @@ export const Card = ({ color }: { color?: string }) => {
           flexDirection: "row",
           alignItems: "center",
           justifyContent: "space-between",
-          paddingHorizontal: 0
+          paddingHorizontal: 0,
+          width: "100%"
         }}
       >
         <View
@@ -91,7 +92,6 @@ export const Card = ({ color }: { color?: string }) => {
           <View
             style={{
               marginLeft: 10,
-              flexShrink: 1,
               marginRight: 10
             }}
           >

apps/mobile/app/components/list/list-item.wrapper.tsx

@@ -36,7 +36,7 @@ import {
   TrashItem,
   VirtualizedGrouping
 } from "@notesnook/core";
-import { getSortValue } from "@notesnook/core/dist/utils/grouping";
+import { getSortValue } from "@notesnook/core";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import { db } from "../../common/database";

apps/mobile/app/components/premium/component.js

@@ -167,7 +167,7 @@ export const Component = ({ close, promo }) => {
           >
             (
             {Platform.OS === "android"
-              ? pricing.product?.subscriptionOfferDetails[0].pricingPhases
+              ? pricing.product?.subscriptionOfferDetails[0]?.pricingPhases
                   .pricingPhaseList?.[0].formattedPrice
               : pricing.product?.localizedPrice}{" "}
             / mo)

apps/mobile/app/components/premium/pricing-item.tsx

@@ -85,7 +85,7 @@ export const PricingItem = ({
           >
             {Platform.OS === "android"
               ? (product.data as RNIap.SubscriptionAndroid | undefined)
-                  ?.subscriptionOfferDetails[0].pricingPhases
+                  ?.subscriptionOfferDetails?.[0]?.pricingPhases
                   .pricingPhaseList?.[0]?.formattedPrice
               : (product.data as RNIap.SubscriptionIOS | undefined)
                   ?.localizedPrice}

apps/mobile/app/components/premium/pricing-plans.tsx

@@ -393,7 +393,7 @@ export const PricingPlans = ({
                 >
                   {Platform.OS === "android"
                     ? (product.data as RNIap.SubscriptionAndroid)
-                        ?.subscriptionOfferDetails[0].pricingPhases
+                        ?.subscriptionOfferDetails[0]?.pricingPhases
                         .pricingPhaseList?.[0]?.formattedPrice
                     : (product.data as RNIap.SubscriptionIOS)
                         ?.introductoryPrice ||

apps/mobile/app/components/properties/color-tags.tsx

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Color, Note } from "@notesnook/core/dist/types";
+import { Color, Note } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useCallback, useEffect, useState } from "react";
 import { View } from "react-native";

apps/mobile/app/components/sheets/editor-tabs/index.tsx

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import { Note } from "@notesnook/core";
-import { EVENTS } from "@notesnook/core/dist/common";
+import { EVENTS } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect } from "react";
 import { View } from "react-native";

apps/mobile/app/components/sheets/github/issue.js

@@ -17,36 +17,34 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Debug } from "@notesnook/core/dist/api/debug";
+import { Debug } from "@notesnook/core";
+import { getModel, getBrand, getSystemVersion } from "react-native-device-info";
 import { useThemeColors } from "@notesnook/theme";
-import Clipboard from "@react-native-clipboard/clipboard";
 import React, { useRef, useState } from "react";
 import { Linking, Platform, Text, TextInput, View } from "react-native";
 import { getVersion } from "react-native-device-info";
 import { useStoredRef } from "../../../hooks/use-stored-ref";
-import { ToastManager, eSendEvent } from "../../../services/event-manager";
+import { ToastManager } from "../../../services/event-manager";
 import PremiumService from "../../../services/premium";
 import { useUserStore } from "../../../stores/use-user-store";
-import { eCloseSheet } from "../../../utils/events";
 import { openLinkInBrowser } from "../../../utils/functions";
 import { SIZE } from "../../../utils/size";
-import { sleep } from "../../../utils/time";
 import DialogHeader from "../../dialog/dialog-header";
-import { presentDialog } from "../../dialog/functions";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
+import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 
 export const Issue = ({ defaultTitle, defaultBody, issueTitle }) => {
   const { colors } = useThemeColors();
-
-  const body = useStoredRef("issueBody", defaultBody);
+  const body = useStoredRef("issueBody");
   const title = useStoredRef("issueTitle", defaultTitle);
-
+  const [done, setDone] = useState(false);
   const user = useUserStore((state) => state.user);
   const [loading, setLoading] = useState(false);
   const bodyRef = useRef();
   const initialLayout = useRef(false);
+  const issueUrl = useRef();
 
   const onPress = async () => {
     if (loading) return;
@@ -56,57 +54,24 @@ export const Issue = ({ defaultTitle, defaultBody, issueTitle }) => {
 
     try {
       setLoading(true);
-      let issue_url = await Debug.report({
+      issueUrl.current = await Debug.report({
         title: title.current,
         body:
           body.current +
+          `\n${defaultBody || ""}` +
           `\n_______________
 **Device information:**
 App version: ${getVersion()}
 Platform: ${Platform.OS}
-Model: ${Platform.constants.Brand || ""}-${Platform.constants.Model || ""}-${
-            Platform.constants.Version || ""
-          }
+Device: ${getBrand() || ""}-${getModel() || ""}-${getSystemVersion() || ""}
 Pro: ${PremiumService.get()}
 Logged in: ${user ? "yes" : "no"}`,
         userId: user?.id
       });
       setLoading(false);
-      eSendEvent(eCloseSheet);
       body.reset();
       title.reset();
-      await sleep(300);
-      presentDialog({
-        title: "Issue reported",
-        paragraph: (
-          <Text>
-            You can track your issue at{" "}
-            <Text
-              style={{
-                textDecorationLine: "underline",
-                color: colors.primary.accent
-              }}
-              onPress={() => {
-                Linking.openURL(issue_url);
-              }}
-            >
-              {issue_url}.
-            </Text>{" "}
-            Please note that we will respond to your issue on the given link. We
-            recommend that you save it.
-          </Text>
-        ),
-        positiveText: "Copy link",
-        positivePress: () => {
-          Clipboard.setString(issue_url);
-          ToastManager.show({
-            heading: "Issue url copied!",
-            type: "success",
-            context: "global"
-          });
-        },
-        negativeText: "Close"
-      });
+      setDone(true);
     } catch (e) {
       setLoading(false);
       ToastManager.show({
@@ -124,125 +89,177 @@ Logged in: ${user ? "yes" : "no"}`,
         width: "100%"
       }}
     >
-      <DialogHeader
-        title={issueTitle || "Report issue"}
-        paragraph={
-          issueTitle
-            ? "We are sorry, it seems that the app crashed due to an error. You can submit a bug report below so we can fix this asap."
-            : "Let us know if you have faced any issue/bug while using Notesnook."
-        }
-      />
+      {done ? (
+        <>
+          <View
+            style={{
+              height: 250,
+              justifyContent: "center",
+              alignItems: "center",
+              gap: 10
+            }}
+          >
+            <Heading>Issue submitted</Heading>
+            <Paragraph
+              style={{
+                textAlign: "center"
+              }}
+              selectable={true}
+            >
+              You can track your issue at{" "}
+              <Paragraph
+                style={{
+                  textDecorationLine: "underline",
+                  color: colors.primary.accent
+                }}
+                onPress={() => {
+                  Linking.openURL(issueUrl.current);
+                }}
+              >
+                {issueUrl.current}
+              </Paragraph>
+              . Please note that we will respond to your issue on the given
+              link. We recommend that you save it.
+            </Paragraph>
 
-      <Seperator half />
-
-      <TextInput
-        placeholder="Title"
-        onChangeText={(v) => (title.current = v)}
-        defaultValue={title.current}
-        style={{
-          borderWidth: 1,
-          borderColor: colors.primary.border,
-          borderRadius: 5,
-          padding: 12,
-          fontFamily: "OpenSans-Regular",
-          marginBottom: 10,
-          fontSize: SIZE.md,
-          color: colors.primary.heading
-        }}
-        placeholderTextColor={colors.primary.placeholder}
-      />
-
-      <TextInput
-        ref={bodyRef}
-        placeholder={`Tell us more about the issue you are facing.
-        
-For example:
-- Steps to reproduce the issue
-- Things you have tried etc.`}
-        multiline
-        numberOfLines={5}
-        textAlignVertical="top"
-        onChangeText={(v) => (body.current = v)}
-        onLayout={() => {
-          if (initialLayout.current) return;
-          initialLayout.current = true;
-          if (body.current) {
-            bodyRef.current?.setNativeProps({
-              text: body.current,
-              selection: {
-                start: 0,
-                end: 0
-              }
-            });
-          }
-        }}
-        style={{
-          borderWidth: 1,
-          borderColor: colors.primary.border,
-          borderRadius: 5,
-          padding: 12,
-          fontFamily: "OpenSans-Regular",
-          maxHeight: 200,
-          fontSize: SIZE.sm,
-          marginBottom: 2.5,
-          color: colors.primary.paragraph
-        }}
-        placeholderTextColor={colors.primary.placeholder}
-      />
-      <Paragraph
-        size={SIZE.xs}
-        color={colors.secondary.paragraph}
-      >{`App version: ${getVersion()} Platform: ${Platform.OS} Model: ${
-        Platform.constants.Brand
-      }-${Platform.constants.Model}-${Platform.constants.Version}`}</Paragraph>
-
-      <Seperator />
-      <Button
-        onPress={onPress}
-        title={loading ? null : "Submit"}
-        loading={loading}
-        width="100%"
-        type="accent"
-      />
-
-      <Paragraph
-        color={colors.secondary.paragraph}
-        size={SIZE.xs}
-        style={{
-          marginTop: 10,
-          textAlign: "center"
-        }}
-      >
-        The information above will be publically available at{" "}
-        <Text
-          onPress={() => {
-            Linking.openURL("https://github.com/streetwriters/notesnook");
-          }}
-          style={{
-            textDecorationLine: "underline",
-            color: colors.primary.accent
-          }}
-        >
-          github.com/streetwriters/notesnook.
-        </Text>{" "}
-        If you want to ask something in general or need some assistance, we
-        would suggest that you{" "}
-        <Text
-          style={{
-            textDecorationLine: "underline",
-            color: colors.primary.accent
-          }}
-          onPress={async () => {
-            try {
-              await openLinkInBrowser("https://discord.gg/zQBK97EE22", colors);
-            } catch (e) {
-              console.error(e);
+            <Button
+              title="Open issue"
+              onPress={() => {
+                Linking.openURL(issueUrl.current);
+              }}
+              type="accent"
+              width="100%"
+            />
+          </View>
+        </>
+      ) : (
+        <>
+          <DialogHeader
+            title={issueTitle || "Report issue"}
+            paragraph={
+              issueTitle
+                ? "We are sorry, it seems that the app crashed due to an error. You can submit a bug report below so we can fix this asap."
+                : "Let us know if you have faced any issue/bug while using Notesnook."
             }
-          }}
-        >
-          join our community on Discord.
-        </Text>
-      </Paragraph>
+          />
+
+          <Seperator half />
+
+          <TextInput
+            placeholder="Title"
+            onChangeText={(v) => (title.current = v)}
+            defaultValue={title.current}
+            style={{
+              borderWidth: 1,
+              borderColor: colors.primary.border,
+              borderRadius: 5,
+              padding: 12,
+              fontFamily: "OpenSans-Regular",
+              marginBottom: 10,
+              fontSize: SIZE.md,
+              color: colors.primary.heading
+            }}
+            placeholderTextColor={colors.primary.placeholder}
+          />
+
+          <TextInput
+            ref={bodyRef}
+            multiline
+            placeholder={`Tell us more about the issue you are facing. 
+
+For example:
+- What were you trying to do in the app?
+- What did you expect to happen?
+- Steps to reproduce the issue 
+- Things you have tried etc.`}
+            numberOfLines={5}
+            textAlignVertical="top"
+            onChangeText={(v) => (body.current = v)}
+            onLayout={() => {
+              if (initialLayout.current) return;
+              initialLayout.current = true;
+              if (body.current) {
+                bodyRef.current?.setNativeProps({
+                  text: body.current,
+                  selection: {
+                    start: 0,
+                    end: 0
+                  }
+                });
+              }
+            }}
+            style={{
+              borderWidth: 1,
+              borderColor: colors.primary.border,
+              borderRadius: 5,
+              padding: 12,
+              fontFamily: "OpenSans-Regular",
+              maxHeight: 200,
+              fontSize: SIZE.sm,
+              marginBottom: 2.5,
+              color: colors.primary.paragraph
+            }}
+            placeholderTextColor={colors.primary.placeholder}
+          />
+          <Paragraph
+            size={SIZE.xs}
+            color={colors.secondary.paragraph}
+          >{`App version: ${getVersion()} Platform: ${
+            Platform.OS
+          } Model: ${getBrand()}-${getModel()}-${getSystemVersion()}`}</Paragraph>
+
+          <Seperator />
+          <Button
+            onPress={onPress}
+            title={loading ? null : "Submit"}
+            loading={loading}
+            width="100%"
+            type="accent"
+          />
+
+          <Paragraph
+            color={colors.secondary.paragraph}
+            size={SIZE.xs}
+            style={{
+              marginTop: 10,
+              textAlign: "center"
+            }}
+          >
+            The information above will be publically available at{" "}
+            <Text
+              onPress={() => {
+                Linking.openURL("https://github.com/streetwriters/notesnook");
+              }}
+              style={{
+                textDecorationLine: "underline",
+                color: colors.primary.accent
+              }}
+            >
+              github.com/streetwriters/notesnook.
+            </Text>{" "}
+            If you want to ask something in general or need some assistance, we
+            would suggest that you{" "}
+            <Text
+              style={{
+                textDecorationLine: "underline",
+                color: colors.primary.accent
+              }}
+              onPress={async () => {
+                try {
+                  await openLinkInBrowser(
+                    "https://discord.gg/zQBK97EE22",
+                    colors
+                  );
+                } catch (e) {
+                  console.error(e);
+                }
+              }}
+            >
+              join our community on Discord.
+            </Text>
+          </Paragraph>
+        </>
+      )}
     </View>
   );
 };

apps/mobile/app/components/sheets/link-note/index.tsx

@@ -34,7 +34,7 @@ import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
-import type { LinkAttributes } from "@notesnook/editor/dist/extensions/link";
+import type { LinkAttributes } from "@notesnook/editor";
 import {
   EditorEvents,
   editorController

apps/mobile/app/components/sheets/manage-tags/index.tsx

@@ -18,8 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { VirtualizedGrouping } from "@notesnook/core";
-import { Tags } from "@notesnook/core/dist/collections/tags";
-import { Tag } from "@notesnook/core/dist/types";
+import { sanitizeTag } from "@notesnook/core";
+import { Tag } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React, {
   RefObject,
@@ -268,8 +268,8 @@ const ManageTagsSheet = (props: {
         fwdRef={inputRef}
         autoCapitalize="none"
         onChangeText={(v) => {
-          setQuery(Tags.sanitize(v));
-          checkQueryExists(Tags.sanitize(v));
+          setQuery(sanitizeTag(v));
+          checkQueryExists(sanitizeTag(v));
         }}
         onFocusInput={() => {
           setFocus(true);

apps/mobile/app/components/sheets/migrate/index.tsx

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { EVENTS } from "@notesnook/core/dist/common";
+import { EVENTS } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useCallback, useEffect, useState } from "react";
 import { Platform, View } from "react-native";
@@ -42,10 +42,7 @@ import { ProgressBarComponent } from "../../ui/svg/lazy";
 import Paragraph from "../../ui/typography/paragraph";
 import { Issue } from "../github/issue";
 
-export const makeError = (
-  stack: string,
-  component: string
-) => `Please let us know what happened. What steps we can take to reproduce the issue here.
+export const makeError = (stack: string, component: string) => `
 
 _______________________________
 Stacktrace: In ${component}::${stack}`;
@@ -98,9 +95,9 @@ export default function Migrate() {
       await sleep(1);
       const { error, report } = await BackupService.run(false, "local");
       if (error) {
-        ToastManager.error(error, "Backup failed");
+        ToastManager.error(error as Error, "Backup failed");
         if (report) {
-          reportError(error);
+          reportError(error as Error);
         }
         setLoading(false);
         return;

apps/mobile/app/components/sheets/move-notes/movenote.tsx

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { VirtualizedGrouping } from "@notesnook/core";
-import { Note, Notebook } from "@notesnook/core/dist/types";
+import { Note, Notebook } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React, { RefObject, useEffect, useRef, useState } from "react";
 import { ActivityIndicator, TextInput, View } from "react-native";

apps/mobile/app/components/sheets/references/index.tsx

@@ -23,7 +23,7 @@ import {
   createInternalLink,
   highlightInternalLinks
 } from "@notesnook/core";
-import { ContentBlock, ItemReference, Note } from "@notesnook/core/dist/types";
+import { ContentBlock, ItemReference, Note } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
 import { ActivityIndicator, View } from "react-native";

apps/mobile/app/components/sheets/relations-list/index.tsx

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import { VirtualizedGrouping } from "@notesnook/core";
-import { Item, ItemReference } from "@notesnook/core/dist/types";
+import { Item, ItemReference } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React, { RefObject, useEffect, useState } from "react";
 import { View } from "react-native";

apps/mobile/app/components/sheets/restore-data/index.js

@@ -1,600 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import { getFormattedDate } from "@notesnook/common";
-import { EVENTS } from "@notesnook/core/dist/common";
-import { useThemeColors } from "@notesnook/theme";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { ActivityIndicator, Platform, View } from "react-native";
-import { FlatList } from "react-native-actions-sheet";
-import RNFetchBlob from "react-native-blob-util";
-import DocumentPicker from "react-native-document-picker";
-import * as ScopedStorage from "react-native-scoped-storage";
-import { unzip } from "react-native-zip-archive";
-import { db } from "../../../common/database";
-import storage from "../../../common/database/storage";
-import { cacheDir, copyFileAsync } from "../../../common/filesystem/utils";
-import {
-  ToastManager,
-  eSubscribeEvent,
-  eUnSubscribeEvent
-} from "../../../services/event-manager";
-import Navigation from "../../../services/navigation";
-import SettingsService from "../../../services/settings";
-import { refreshAllStores } from "../../../stores/create-db-collection-store";
-import { eCloseRestoreDialog, eOpenRestoreDialog } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
-import { Dialog } from "../../dialog";
-import DialogHeader from "../../dialog/dialog-header";
-import { presentDialog } from "../../dialog/functions";
-import { Toast } from "../../toast";
-import { Button } from "../../ui/button";
-import Seperator from "../../ui/seperator";
-import SheetWrapper from "../../ui/sheet";
-import Paragraph from "../../ui/typography/paragraph";
-import { useUserStore } from "../../../stores/use-user-store";
-
-const RestoreDataSheet = () => {
-  const [visible, setVisible] = useState(false);
-  const [restoring, setRestoring] = useState(false);
-  const sheet = useRef();
-  useEffect(() => {
-    const open = async () => {
-      setVisible(true);
-      setTimeout(() => {
-        sheet.current?.show();
-      }, 1);
-    };
-    eSubscribeEvent(eOpenRestoreDialog, open);
-    eSubscribeEvent(eCloseRestoreDialog, close);
-    return () => {
-      eUnSubscribeEvent(eOpenRestoreDialog, open);
-      eUnSubscribeEvent(eCloseRestoreDialog, close);
-    };
-  }, [close]);
-
-  const close = useCallback(() => {
-    if (restoring) {
-      showIsWorking();
-      return;
-    }
-    sheet.current?.hide();
-    setTimeout(() => {
-      setVisible(false);
-    }, 150);
-  }, [restoring]);
-
-  const showIsWorking = () => {
-    ToastManager.show({
-      heading: "Restoring Backup",
-      message: "Your backup data is being restored. please wait.",
-      type: "error",
-      context: "local"
-    });
-  };
-
-  return !visible ? null : (
-    <SheetWrapper
-      fwdRef={sheet}
-      gestureEnabled={!restoring}
-      closeOnTouchBackdrop={!restoring}
-      onClose={() => {
-        setVisible(false);
-        close();
-      }}
-    >
-      <RestoreDataComponent
-        close={close}
-        restoring={restoring}
-        setRestoring={setRestoring}
-        actionSheetRef={sheet}
-      />
-      <Toast context="local" />
-    </SheetWrapper>
-  );
-};
-
-export default RestoreDataSheet;
-
-const RestoreDataComponent = ({ close, setRestoring, restoring }) => {
-  const { colors } = useThemeColors();
-  const [files, setFiles] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [backupDirectoryAndroid, setBackupDirectoryAndroid] = useState(false);
-  const [progress, setProgress] = useState();
-  useEffect(() => {
-    const subscription = db.eventManager.subscribe(
-      EVENTS.migrationProgress,
-      (progress) => {
-        setProgress(progress);
-      }
-    );
-    return () => {
-      subscription?.unsubscribe();
-    };
-  }, []);
-
-  useEffect(() => {
-    setTimeout(() => {
-      checkBackups();
-    }, 1000);
-  }, []);
-
-  const restore = async (item) => {
-    if (restoring) {
-      return;
-    }
-
-    try {
-      const file = Platform.OS === "ios" ? item.path : item.uri;
-      console.log(file);
-      if (file.endsWith(".nnbackupz")) {
-        setRestoring(true);
-
-        if (Platform.OS === "android") {
-          const cacheFile = `file://${RNFetchBlob.fs.dirs.CacheDir}/backup.zip`;
-          if (await RNFetchBlob.fs.exists(cacheFile)) {
-            await RNFetchBlob.fs.unlink(cacheFile);
-          }
-          await RNFetchBlob.fs.createFile(cacheFile, "", "utf8");
-          console.log("copying");
-          await copyFileAsync(file, cacheFile);
-          console.log("copied");
-          await restoreFromZip(cacheFile);
-        } else {
-          await restoreFromZip(file, false);
-        }
-      } else if (file.endsWith(".nnbackup")) {
-        let backup;
-        if (Platform.OS === "android") {
-          backup = await ScopedStorage.readFile(file, "utf8");
-        } else {
-          backup = await RNFetchBlob.fs.readFile(file, "utf8");
-        }
-        await restoreFromNNBackup(JSON.parse(backup));
-      }
-    } catch (e) {
-      console.log("error", e);
-      setRestoring(false);
-      backupError(e);
-    }
-  };
-
-  const withPassword = () => {
-    return new Promise((resolve) => {
-      let resolved = false;
-      presentDialog({
-        context: "local",
-        title: "Encrypted backup",
-        input: true,
-        inputPlaceholder: "Password",
-        paragraph: "Please enter password of this backup file",
-        positiveText: "Restore",
-        secureTextEntry: true,
-        onClose: () => {
-          if (resolved) return;
-          resolve(undefined);
-        },
-        negativeText: "Cancel",
-        positivePress: async (password, isEncryptionKey) => {
-          resolve({
-            value: password,
-            isEncryptionKey
-          });
-          resolved = true;
-          return true;
-        },
-        check: {
-          info: "Use encryption key",
-          type: "transparent"
-        }
-      });
-    });
-  };
-
-  const checkBackups = async () => {
-    try {
-      let files = [];
-      if (Platform.OS === "android") {
-        let backupDirectory = SettingsService.get().backupDirectoryAndroid;
-        if (backupDirectory) {
-          setBackupDirectoryAndroid(backupDirectory);
-          files = await ScopedStorage.listFiles(backupDirectory.uri);
-        } else {
-          setLoading(false);
-          return;
-        }
-      } else {
-        let path = await storage.checkAndCreateDir("/backups/");
-        files = await RNFetchBlob.fs.lstat(path);
-      }
-      files = files
-        .filter((file) => {
-          const name = Platform.OS === "android" ? file.name : file.filename;
-          return name.endsWith(".nnbackup") || name.endsWith(".nnbackupz");
-        })
-        .sort(function (a, b) {
-          let timeA = a.lastModified;
-          let timeB = b.lastModified;
-          return timeB - timeA;
-        });
-      setFiles(files);
-      setLoading(false);
-    } catch (e) {
-      console.log(e);
-      setLoading(false);
-    }
-  };
-
-  const restoreBackup = async (backup, password, key) => {
-    await db.transaction(async () => {
-      await db.backup.import(backup, password, key);
-    });
-    await db.initCollections();
-    refreshAllStores();
-    ToastManager.show({
-      heading: "Backup restored successfully.",
-      type: "success",
-      context: "global"
-    });
-    Navigation.queueRoutesForUpdate();
-    return true;
-  };
-
-  const backupError = (e) => {
-    console.log(e.stack);
-    ToastManager.show({
-      heading: "Restore failed",
-      message:
-        e.message ||
-        "The selected backup data file is invalid. You must select a *.nnbackup file to restore.",
-      type: "error",
-      context: "local"
-    });
-  };
-
-  /**
-   *
-   * @param {string} file
-   */
-  async function restoreFromZip(file, remove) {
-    try {
-      const zipOutputFolder = `${cacheDir}/backup_extracted`;
-      if (await RNFetchBlob.fs.exists(zipOutputFolder)) {
-        await RNFetchBlob.fs.unlink(zipOutputFolder);
-        await RNFetchBlob.fs.mkdir(zipOutputFolder);
-      }
-      await unzip(file, zipOutputFolder);
-      console.log("Unzipped files successfully to", zipOutputFolder);
-
-      const backupFiles = await RNFetchBlob.fs.ls(zipOutputFolder);
-
-      // if (backupFiles.findIndex((file) => file === ".nnbackup") === -1) {
-      //   throw new Error("Backup file is invalid");
-      // }
-
-      await db.transaction(async () => {
-        let password;
-        let key;
-        console.log(
-          `Found ${backupFiles?.length} files to restore from backup`
-        );
-        for (const path of backupFiles) {
-          if (path === ".nnbackup") continue;
-          const filePath = `${zipOutputFolder}/${path}`;
-          const data = await RNFetchBlob.fs.readFile(filePath, "utf8");
-          const parsed = JSON.parse(data);
-
-          if (parsed.encrypted && !password) {
-            console.log("Backup is encrypted...", "requesting password");
-            const { value, isEncryptionKey } = await withPassword();
-
-            if (isEncryptionKey) {
-              key = value;
-            } else {
-              password = value;
-            }
-            if (!password && !key) throw new Error("Failed to decrypt backup");
-          }
-          await db.backup.import(parsed, password, key);
-          console.log("Imported", path);
-        }
-      });
-      // Remove files from cache
-      RNFetchBlob.fs.unlink(zipOutputFolder).catch(console.log);
-      if (remove) {
-        RNFetchBlob.fs.unlink(file).catch(console.log);
-      }
-
-      refreshAllStores();
-      Navigation.queueRoutesForUpdate();
-      setRestoring(false);
-      close();
-      ToastManager.show({
-        heading: "Backup restored successfully.",
-        type: "success",
-        context: "global"
-      });
-    } catch (e) {
-      backupError(e);
-      setRestoring(false);
-    }
-  }
-
-  /**
-   *
-   * @param {string} file
-   */
-  async function restoreFromNNBackup(backup) {
-    try {
-      if (backup.data.iv && backup.data.salt) {
-        const { value, isEncryptionKey } = await withPassword();
-
-        let key;
-        let password;
-        if (isEncryptionKey) {
-          key = value;
-        } else {
-          password = value;
-        }
-
-        if (key || password) {
-          try {
-            await restoreBackup(backup, password, key);
-            close();
-            setRestoring(false);
-          } catch (e) {
-            setRestoring(false);
-            backupError(e);
-          }
-        } else {
-          setRestoring(false);
-        }
-      } else {
-        await restoreBackup(backup);
-        setRestoring(false);
-        close();
-      }
-    } catch (e) {
-      setRestoring(false);
-      backupError(e);
-    }
-  }
-
-  const button = {
-    title: "Restore from files",
-    onPress: async () => {
-      if (restoring) {
-        return;
-      }
-      try {
-        useUserStore.setState({
-          disableAppLockRequests: true
-        });
-        console.log("disabled...");
-        const file = await DocumentPicker.pickSingle({
-          copyTo: "cachesDirectory"
-        });
-
-        setTimeout(() => {
-          useUserStore.setState({
-            disableAppLockRequests: false
-          });
-        }, 1000);
-
-        if (file.name.endsWith(".nnbackupz")) {
-          setRestoring(true);
-          await restoreFromZip(file.fileCopyUri, true);
-        } else if (file.name.endsWith(".nnbackup")) {
-          RNFetchBlob.fs.unlink(file.fileCopyUri).catch(console.log);
-          setRestoring(true);
-          const data = await fetch(file.uri);
-          await restoreFromNNBackup(await data.json());
-        }
-      } catch (e) {
-        console.log("error", e.stack);
-        setTimeout(() => {
-          useUserStore.setState({
-            disableAppLockRequests: false
-          });
-        }, 1000);
-        setRestoring(false);
-        backupError(e);
-      }
-    }
-  };
-
-  const renderItem = ({ item, index }) => (
-    <View
-      style={{
-        minHeight: 50,
-        justifyContent: "space-between",
-        alignItems: "center",
-        width: "100%",
-        borderRadius: 0,
-        flexDirection: "row",
-        borderBottomWidth: 0.5,
-        borderBottomColor: colors.primary.border
-      }}
-    >
-      <View
-        style={{
-          maxWidth: "75%"
-        }}
-      >
-        <Paragraph size={SIZE.sm} style={{ width: "100%", maxWidth: "100%" }}>
-          {getFormattedDate(item?.lastModified * 1)}
-        </Paragraph>
-        <Paragraph size={SIZE.xs}>
-          {(item.filename || item.name).replace(".nnbackup", "")}
-        </Paragraph>
-      </View>
-      <Button
-        title="Restore"
-        height={30}
-        type="accent"
-        style={{
-          borderRadius: 100,
-          paddingHorizontal: 12
-        }}
-        fontSize={SIZE.sm - 1}
-        onPress={() => restore(item, index)}
-      />
-    </View>
-  );
-
-  return (
-    <>
-      <View>
-        <Dialog context="local" />
-        <View
-          style={{
-            flexDirection: "row",
-            justifyContent: "space-between",
-            paddingHorizontal: 8,
-            paddingRight: 8,
-            alignItems: "center",
-            paddingTop: restoring ? 8 : 0
-          }}
-        >
-          <DialogHeader
-            title="Backups"
-            paragraph={`All the backups are stored in ${
-              Platform.OS === "ios"
-                ? "File Manager/Notesnook/Backups"
-                : "selected backups folder."
-            }`}
-            button={button}
-          />
-        </View>
-        <Seperator half />
-        <FlatList
-          ListEmptyComponent={
-            !restoring ? (
-              loading ? (
-                <View
-                  style={{
-                    justifyContent: "center",
-                    alignItems: "center",
-                    height: 100
-                  }}
-                >
-                  <ActivityIndicator
-                    color={colors.primary.accent}
-                    size={SIZE.lg}
-                  />
-                </View>
-              ) : (
-                <View
-                  style={{
-                    justifyContent: "center",
-                    alignItems: "center",
-                    height: 100
-                  }}
-                >
-                  {Platform.OS === "android" && !backupDirectoryAndroid ? (
-                    <>
-                      <Button
-                        title="Select backups folder"
-                        icon="folder"
-                        onPress={async () => {
-                          let folder = await ScopedStorage.openDocumentTree(
-                            true
-                          );
-                          let subfolder;
-                          if (folder.name !== "Notesnook backups") {
-                            subfolder = await ScopedStorage.createDirectory(
-                              folder.uri,
-                              "Notesnook backups"
-                            );
-                          } else {
-                            subfolder = folder;
-                          }
-                          SettingsService.set({
-                            backupDirectoryAndroid: subfolder
-                          });
-                          setBackupDirectoryAndroid(subfolder);
-                          setLoading(true);
-                          checkBackups();
-                        }}
-                        style={{
-                          marginTop: 10,
-                          paddingHorizontal: 12
-                        }}
-                        height={30}
-                        width={null}
-                      />
-
-                      <Paragraph
-                        style={{
-                          textAlign: "center",
-                          marginTop: 5
-                        }}
-                        size={SIZE.xs}
-                        textBreakStrategy="balanced"
-                        color={colors.secondary.paragraph}
-                      >
-                        Select the folder that includes your backup files to
-                        list them here.
-                      </Paragraph>
-                    </>
-                  ) : (
-                    <Paragraph color={colors.secondary.paragraph}>
-                      No backups found
-                    </Paragraph>
-                  )}
-                </View>
-              )
-            ) : (
-              <View
-                style={{
-                  justifyContent: "center",
-                  alignItems: "center",
-                  height: 200
-                }}
-              >
-                <ActivityIndicator color={colors.primary.accent} />
-                <Paragraph color={colors.secondary.paragraph}>
-                  Restoring {progress ? progress?.collection : null}
-                  {progress ? `(${progress.current}/${progress.total}) ` : null}
-                  ...Please wait.
-                </Paragraph>
-              </View>
-            )
-          }
-          keyExtractor={(item) => item.name || item.filename}
-          style={{
-            paddingHorizontal: 12
-          }}
-          data={restoring || loading ? [] : files}
-          renderItem={renderItem}
-          ListFooterComponent={
-            restoring || loading || files.length === 0 ? null : (
-              <View
-                style={{
-                  height: 200
-                }}
-              />
-            )
-          }
-        />
-      </View>
-    </>
-  );
-};

apps/mobile/app/components/tabs/index.tsx

@@ -42,6 +42,7 @@ import { eSendEvent } from "../../services/event-manager";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { eClearEditor } from "../../utils/events";
 import { useSideBarDraggingStore } from "../side-menu/dragging-store";
+import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
 
 interface TabProps extends ViewProps {
   dimensions: { width: number; height: number };
@@ -85,7 +86,9 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
   );
   const translateX = useSharedValue(
     widths
-      ? appState && !appState?.movedAway
+      ? appState &&
+        appState?.movedAway === false &&
+        useTabStore.getState().getCurrentNoteId()
         ? widths.sidebar + widths.list
         : widths.sidebar
       : 0
@@ -121,9 +124,9 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
       } else {
         if (prevWidths.current?.sidebar !== widths.sidebar) {
           translateX.value =
-            !appState || (appState && appState?.movedAway)
-              ? widths.sidebar
-              : editorPosition;
+            appState && appState?.movedAway === false
+              ? editorPosition
+              : widths.sidebar;
           if (translateX.value === editorPosition) {
             onChangeTab?.({ i: 2, from: 1 });
           }

apps/mobile/app/components/toast/index.js

@@ -1,235 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { TouchableOpacity, View } from "react-native";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { notesnook } from "../../../e2e/test.ids";
-import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
-import { DDS } from "../../services/device-detection";
-import {
-  eSubscribeEvent,
-  eUnSubscribeEvent
-} from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
-import { getElevationStyle } from "../../utils/elevation";
-import { eHideToast, eShowToast } from "../../utils/events";
-import { SIZE } from "../../utils/size";
-import { Button } from "../ui/button";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-export const Toast = ({ context = "global" }) => {
-  const { colors } = useThemeColors();
-  const [data, setData] = useState({});
-  const insets = useGlobalSafeAreaInsets();
-  const hideTimeout = useRef();
-  const [visible, setVisible] = useState(false);
-  const toastMessages = useRef([]);
-
-  const show = useCallback(
-    async (data) => {
-      if (!data) return;
-      if (data.context !== context) return;
-      if (
-        toastMessages.current.findIndex((m) => m.message === data.message) >= 0
-      ) {
-        return;
-      }
-      toastMessages.current.push(data);
-      if (toastMessages.current?.length > 1) return;
-      setData(data);
-
-      setVisible(true);
-      if (hideTimeout.current) {
-        clearTimeout(hideTimeout.current);
-      }
-      hideTimeout.current = setTimeout(() => {
-        hide();
-      }, data.duration);
-    },
-    [context, hide]
-  );
-
-  const next = useCallback(
-    (data) => {
-      if (!data) {
-        hide();
-        return;
-      }
-      setData(data);
-      if (hideTimeout.current) {
-        clearTimeout(hideTimeout.current);
-      }
-      hideTimeout.current = setTimeout(() => {
-        hide();
-      }, data?.duration);
-    },
-    [hide]
-  );
-
-  const hide = useCallback(() => {
-    if (hideTimeout.current) {
-      clearTimeout(hideTimeout.current);
-    }
-    let msg =
-      toastMessages.current.length > 1 ? toastMessages.current.shift() : null;
-
-    if (msg) {
-      setVisible(false);
-      next(msg);
-      setTimeout(() => {
-        setVisible(true);
-      }, 300);
-    } else {
-      setVisible(false);
-      toastMessages.current.shift();
-      setTimeout(() => {
-        setData({});
-        if (hideTimeout.current) {
-          clearTimeout(hideTimeout.current);
-        }
-      }, 100);
-    }
-  }, [next]);
-
-  useEffect(() => {
-    eSubscribeEvent(eShowToast, show);
-    eSubscribeEvent(eHideToast, hide);
-    return () => {
-      toastMessages.current = [];
-      eUnSubscribeEvent(eShowToast, show);
-      eUnSubscribeEvent(eHideToast, hide);
-    };
-  }, [hide, show]);
-
-  return (
-    visible && (
-      <TouchableOpacity
-        onPress={hide}
-        activeOpacity={1}
-        style={{
-          width: DDS.isTab ? 400 : "100%",
-          alignItems: "center",
-          alignSelf: "center",
-          minHeight: 30,
-          top: insets.top + 10,
-          position: "absolute",
-          zIndex: 999,
-          elevation: 15
-        }}
-      >
-        <View
-          style={{
-            ...getElevationStyle(5),
-            maxWidth: "95%",
-            backgroundColor: colors.secondary.background,
-            minWidth: data?.func ? "95%" : "50%",
-            alignSelf: "center",
-            borderRadius: 5,
-            minHeight: 30,
-            paddingVertical: 10,
-            paddingLeft: 12,
-            paddingRight: 5,
-            justifyContent: "space-between",
-            flexDirection: "row",
-            alignItems: "center",
-            width: "95%"
-          }}
-        >
-          <View
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              flexGrow: 1,
-              flex: 1
-            }}
-          >
-            <View
-              style={{
-                height: 30,
-                borderRadius: 100,
-                justifyContent: "center",
-                alignItems: "center",
-                marginRight: 10
-              }}
-            >
-              <Icon
-                name={data?.type === "success" ? "check" : "close"}
-                size={SIZE.lg}
-                color={
-                  data?.type === "error"
-                    ? colors.error.icon
-                    : colors.primary.accent
-                }
-              />
-            </View>
-
-            <View
-              style={{
-                flexGrow: 1,
-                paddingRight: 25
-              }}
-            >
-              {data?.heading ? (
-                <Heading
-                  color={colors.primary.paragraph}
-                  size={SIZE.md}
-                  onPress={() => {
-                    hide();
-                  }}
-                >
-                  {data.heading}
-                </Heading>
-              ) : null}
-
-              {data?.message ? (
-                <Paragraph
-                  color={colors.primary.paragraph}
-                  style={{
-                    maxWidth: "100%",
-                    paddingRight: 10
-                  }}
-                  onPress={() => {
-                    hide();
-                  }}
-                >
-                  {data.message}
-                </Paragraph>
-              ) : null}
-            </View>
-          </View>
-
-          {data.func ? (
-            <Button
-              testID={notesnook.toast.button}
-              fontSize={SIZE.md}
-              type={data.type === "error" ? "errorShade" : "transparent"}
-              onPress={data.func}
-              title={data.actionText}
-              height={30}
-              style={{
-                zIndex: 10
-              }}
-            />
-          ) : null}
-        </View>
-      </TouchableOpacity>
-    )
-  );
-};

apps/mobile/app/components/toast/index.tsx

@@ -0,0 +1,219 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { useThemeColors } from "@notesnook/theme";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Platform,
+  TouchableOpacity,
+  useWindowDimensions,
+  View
+} from "react-native";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { notesnook } from "../../../e2e/test.ids";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
+import useKeyboard from "../../hooks/use-keyboard";
+import { DDS } from "../../services/device-detection";
+import {
+  eSubscribeEvent,
+  eUnSubscribeEvent,
+  ToastOptions
+} from "../../services/event-manager";
+import { getElevationStyle } from "../../utils/elevation";
+import { eHideToast, eShowToast } from "../../utils/events";
+import { SIZE } from "../../utils/size";
+import { Button } from "../ui/button";
+import Heading from "../ui/typography/heading";
+import Paragraph from "../ui/typography/paragraph";
+
+export const Toast = ({ context = "global" }) => {
+  const { colors, isDark } = useThemeColors();
+  const [toastOptions, setToastOptions] = useState<ToastOptions | undefined>();
+  const hideTimeout = useRef<NodeJS.Timeout | undefined>();
+  const insets = useGlobalSafeAreaInsets();
+  const [visible, setVisible] = useState(false);
+  const toastMessages = useRef<ToastOptions[]>([]);
+  const dimensions = useWindowDimensions();
+  const keyboard = useKeyboard();
+
+  const hideToast = useCallback(() => {
+    const nextToastMessage = toastMessages.current.shift();
+    if (nextToastMessage) {
+      if (hideTimeout.current) {
+        clearTimeout(hideTimeout.current);
+      }
+      setVisible(true);
+      setToastOptions(nextToastMessage);
+      hideTimeout.current = setTimeout(() => {
+        hideToast();
+      }, nextToastMessage?.duration);
+    } else {
+      setVisible(false);
+      setToastOptions(undefined);
+      if (hideTimeout.current) {
+        clearTimeout(hideTimeout.current);
+      }
+    }
+  }, []);
+
+  const showToast = useCallback(
+    (data?: ToastOptions) => {
+      if (
+        !data ||
+        data.context !== context ||
+        toastMessages.current.findIndex((m) => m.message === data.message) != -1
+      )
+        return;
+
+      toastMessages.current.push(data);
+      if (toastMessages.current?.length > 1) return;
+
+      if (hideTimeout.current) {
+        clearTimeout(hideTimeout.current);
+      }
+      setVisible(true);
+      const nextToastMessage = toastMessages.current.shift();
+      setToastOptions(nextToastMessage);
+      hideTimeout.current = setTimeout(() => {
+        hideToast();
+      }, nextToastMessage?.duration);
+    },
+    [context, hideToast]
+  );
+
+  useEffect(() => {
+    eSubscribeEvent(eShowToast, showToast);
+    eSubscribeEvent(eHideToast, hideToast);
+    return () => {
+      eUnSubscribeEvent(eShowToast, showToast);
+      eUnSubscribeEvent(eHideToast, hideToast);
+    };
+  }, [hideToast, showToast]);
+
+  const isFullToastMessage = toastOptions?.heading && toastOptions?.message;
+
+  return visible && toastOptions ? (
+    <TouchableOpacity
+      onPress={() => {
+        hideToast();
+      }}
+      activeOpacity={1}
+      style={{
+        width: DDS.isTab ? dimensions.width / 2 : "100%",
+        alignItems: "center",
+        alignSelf: "center",
+        bottom:
+          Platform.OS === "android"
+            ? Math.max(insets.bottom, 40)
+            : Math.max(insets.bottom, 40) +
+              (keyboard.keyboardShown ? keyboard.keyboardHeight : 0),
+        position: "absolute",
+        zIndex: 999,
+        elevation: 15
+      }}
+    >
+      <View
+        style={{
+          ...getElevationStyle(5),
+          backgroundColor: isDark ? colors.static.black : colors.static.white,
+          alignSelf: "center",
+          borderRadius: 100,
+          paddingVertical: 12,
+          paddingHorizontal: 12,
+          justifyContent: "space-between",
+          flexDirection: "row",
+          alignItems: "center",
+          maxWidth: "95%",
+          gap: 10,
+          flexShrink: 1
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 10,
+            flexShrink: 1
+          }}
+        >
+          <Icon
+            name={
+              toastOptions.type === "success"
+                ? "check"
+                : toastOptions.type === "info"
+                ? "information"
+                : "close"
+            }
+            size={isFullToastMessage ? SIZE.xxxl : SIZE.xl}
+            color={
+              toastOptions?.icon
+                ? toastOptions?.icon
+                : toastOptions.type === "error"
+                ? colors.error.icon
+                : toastOptions.type === "info"
+                ? isDark
+                  ? colors.static.white
+                  : colors.static.black
+                : colors.success.icon
+            }
+          />
+
+          <View
+            style={{
+              paddingRight: toastOptions?.func ? 0 : 12,
+              flexShrink: 1
+            }}
+          >
+            {isFullToastMessage ? (
+              <Heading
+                color={!isDark ? colors.static.black : colors.static.white}
+                size={SIZE.sm}
+              >
+                {toastOptions.heading}
+              </Heading>
+            ) : null}
+
+            {toastOptions.message || toastOptions.heading ? (
+              <Paragraph
+                color={!isDark ? colors.static.black : colors.static.white}
+                size={SIZE.xs}
+              >
+                {toastOptions.message || toastOptions.heading}
+              </Paragraph>
+            ) : null}
+          </View>
+        </View>
+
+        {toastOptions.func ? (
+          <Button
+            testID={notesnook.toast.button}
+            fontSize={SIZE.md}
+            type={toastOptions.type === "error" ? "errorShade" : "transparent"}
+            onPress={toastOptions.func}
+            title={toastOptions.actionText}
+            height={35}
+            style={{
+              zIndex: 10
+            }}
+          />
+        ) : null}
+      </View>
+    </TouchableOpacity>
+  ) : null;
+};

apps/mobile/app/components/ui/button/index.tsx

@@ -25,7 +25,8 @@ import {
   DimensionValue,
   TextStyle,
   View,
-  ViewStyle
+  ViewStyle,
+  useWindowDimensions
 } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useUserStore } from "../../../stores/use-user-store";
@@ -92,6 +93,9 @@ export const Button = ({
   });
   const textColor = buttonType?.text ? buttonType.text : text;
 
+  const { fontScale } = useWindowDimensions();
+  const growFactor = 1 + (fontScale - 1) / 10;
+
   const Component = bold ? Heading : Paragraph;
 
   return (
@@ -108,7 +112,7 @@ export const Button = ({
           NativeTooltip.show(event, tooltipText, NativeTooltip.POSITIONS.TOP);
         }
       }}
-      disabled={loading}
+      disabled={loading || restProps.disabled}
       type={type}
       accentColor={accentColor}
       accentText={accentText}
@@ -117,14 +121,18 @@ export const Button = ({
       customOpacity={buttonType?.opacity}
       customAlpha={buttonType?.alpha}
       style={{
-        height: height,
-        width: (width as DimensionValue) || undefined,
+        height: typeof height === "number" ? height * growFactor : height,
+        width:
+          typeof width === "number"
+            ? width * growFactor
+            : (width as DimensionValue) || undefined,
         paddingHorizontal: 12,
         borderRadius: 5,
         alignSelf: "center",
         justifyContent: "center",
         alignItems: "center",
         flexDirection: "row",
+        opacity: restProps?.disabled ? 0.5 : 1,
         ...(style as ViewStyle)
       }}
     >

apps/mobile/app/components/ui/input/index.tsx

@@ -41,6 +41,7 @@ import { SIZE } from "../../../utils/size";
 import { IconButton } from "../icon-button";
 import Paragraph from "../typography/paragraph";
 import phone from "phone";
+import isURL from "validator/lib/isURL";
 
 interface InputProps extends TextInputProps {
   fwdRef?: RefObject<TextInput>;
@@ -49,7 +50,8 @@ interface InputProps extends TextInputProps {
     | "email"
     | "confirmPassword"
     | "username"
-    | "phonenumber";
+    | "phonenumber"
+    | "url";
   loading?: boolean;
   onSubmit?: (
     event: NativeSyntheticEvent<TextInputSubmitEditingEventData>
@@ -151,6 +153,9 @@ const Input = ({
       case "confirmPassword":
         isError = customValidator && value === customValidator();
         break;
+      case "url":
+        isError = isURL(value);
+        break;
       case "phonenumber": {
         const result = phone(value, {
           strictDetection: true,

apps/mobile/app/components/ui/pressable/index.tsx

@@ -21,11 +21,12 @@ import { VariantsWithStaticColors, useThemeColors } from "@notesnook/theme";
 import React, { RefObject, useCallback } from "react";
 import {
   ColorValue,
+  PressableStateCallbackType,
   Pressable as RNPressable,
   PressableProps as RNPressableProps,
-  PressableStateCallbackType,
   View,
-  ViewStyle
+  ViewStyle,
+  useWindowDimensions
 } from "react-native";
 import {
   RGB_Linear_Shade,
@@ -256,6 +257,8 @@ export const Pressable = ({
     ? 1
     : colorOpacity;
   const alpha = customAlpha ? customAlpha : isDark ? 0.03 : -0.03;
+  const { fontScale } = useWindowDimensions();
+  const growFactor = 1 + (fontScale - 1) / 8;
 
   const getStyle = useCallback(
     ({ pressed }: PressableStateCallbackType): ViewStyle | ViewStyle[] => [
@@ -276,7 +279,13 @@ export const Pressable = ({
           : borderColor || "transparent",
         borderWidth: borderWidth
       },
-      style
+      style,
+      {
+        height:
+          typeof style.height === "number"
+            ? style.height * growFactor
+            : style.height
+      }
     ],
     [
       alpha,
@@ -288,7 +297,8 @@ export const Pressable = ({
       borderSelectedColor,
       borderColor,
       borderWidth,
-      style
+      style,
+      growFactor
     ]
   );
 

apps/mobile/app/components/ui/reminder-time/index.tsx

@@ -16,7 +16,7 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { isReminderActive } from "@notesnook/core/dist/collections/reminders";
+import { isReminderActive } from "@notesnook/core";
 import React from "react";
 import { ViewStyle } from "react-native";
 
@@ -24,7 +24,7 @@ import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../../utils/size";
 import { Button, ButtonProps } from "../button";
 import { getFormattedReminderTime } from "@notesnook/common";
-import { Reminder } from "@notesnook/core/dist/types";
+import { Reminder } from "@notesnook/core";
 
 export const ReminderTime = ({
   checkIsActive = true,

apps/mobile/app/hooks/use-actions.tsx

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 /* eslint-disable no-inner-declarations */
-import { VAULT_ERRORS } from "@notesnook/core/dist/api/vault";
+import { VAULT_ERRORS } from "@notesnook/core";
 import {
   Color,
   ItemReference,
@@ -26,13 +26,13 @@ import {
   Reminder,
   Tag,
   TrashItem
-} from "@notesnook/core/dist/types";
+} from "@notesnook/core";
 import { DisplayedNotification } from "@notifee/react-native";
 import Clipboard from "@react-native-clipboard/clipboard";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { InteractionManager, Platform } from "react-native";
 import Share from "react-native-share";
-import { db } from "../common/database";
+import { DatabaseLogger, db } from "../common/database";
 import { AttachmentDialog } from "../components/attachments";
 import { presentDialog } from "../components/dialog/functions";
 import NoteHistory from "../components/note-history";
@@ -650,37 +650,42 @@ export const useActions = ({
     }
 
     async function shareNote() {
-      if (item.type !== "note") return;
-
-      if (processingId.current === "shareNote") {
-        ToastManager.show({
-          heading: "Please wait...",
-          message: "We are preparing your note for sharing",
-          context: "local"
-        });
-        return;
-      }
-      if (!checkItemSynced()) return;
-      if (locked) {
-        close();
-        await sleep(300);
-        openVault({
-          item: item,
-          novault: true,
-          locked: true,
-          share: true,
-          title: "Share note",
-          description: "Unlock note to share it."
-        });
-      } else {
-        processingId.current = "shareNote";
-        const convertedText = await convertNoteToText(item);
+      try {
+        if (item.type !== "note") return;
+        if (processingId.current === "shareNote") {
+          ToastManager.show({
+            heading: "Please wait...",
+            message: "We are preparing your note for sharing",
+            context: "local"
+          });
+          return;
+        }
+        if (!checkItemSynced()) return;
+        if (locked) {
+          close();
+          await sleep(300);
+          openVault({
+            item: item,
+            novault: true,
+            locked: true,
+            share: true,
+            title: "Share note",
+            description: "Unlock note to share it."
+          });
+        } else {
+          processingId.current = "shareNote";
+          const convertedText = await convertNoteToText(item);
+          processingId.current = undefined;
+          Share.open({
+            title: "Share note to",
+            failOnCancel: false,
+            message: convertedText || ""
+          });
+        }
+      } catch (e) {
+        DatabaseLogger.error(e);
+        ToastManager.error(e as Error);
         processingId.current = undefined;
-        Share.open({
-          title: "Share note to",
-          failOnCancel: false,
-          message: convertedText || ""
-        });
       }
     }
 
@@ -768,7 +773,8 @@ export const useActions = ({
           });
         }
       } catch (e) {
-        console.error(e);
+        processingId.current = undefined;
+        DatabaseLogger.error(e);
         ToastManager.error(e as Error);
       }
     }

apps/mobile/app/hooks/use-app-events.tsx

@@ -18,18 +18,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { User } from "@notesnook/core";
-import {
-  EV,
-  EVENTS,
-  SYNC_CHECK_IDS,
-  SyncStatusEvent
-} from "@notesnook/core/dist/common";
-import { EventManagerSubscription } from "@notesnook/core/dist/utils/event-manager";
+import { EV, EVENTS, SYNC_CHECK_IDS, SyncStatusEvent } from "@notesnook/core";
+import { EventManagerSubscription } from "@notesnook/core";
 import notifee from "@notifee/react-native";
-import NetInfo, {
-  NetInfoState,
-  NetInfoSubscription
-} from "@react-native-community/netinfo";
+import NetInfo, { NetInfoSubscription } from "@react-native-community/netinfo";
 import React, { useCallback, useEffect, useRef } from "react";
 import {
   AppState,
@@ -47,6 +39,7 @@ import { checkVersion } from "react-native-check-version";
 import Config from "react-native-config";
 import * as RNIap from "react-native-iap";
 import { DatabaseLogger, db, setupDatabase } from "../common/database";
+import { initializeLogger } from "../common/database/logger";
 import { MMKV } from "../common/database/mmkv";
 import Migrate from "../components/sheets/migrate";
 import NewFeature from "../components/sheets/new-feature";
@@ -97,6 +90,8 @@ import {
 import { getGithubVersion } from "../utils/github-version";
 import { tabBarRef } from "../utils/global-refs";
 import { sleep } from "../utils/time";
+import { NotesnookModule } from "../utils/notesnook-module";
+import { changeSystemBarColors } from "../stores/use-theme-store";
 
 const onCheckSyncStatus = async (type: SyncStatusEvent) => {
   const { disableSync, disableAutoSync } = SettingsService.get();
@@ -256,9 +251,9 @@ async function saveEditorState() {
       movedAway: editorState().movedAway,
       timestamp: Date.now()
     });
-    MMKV.setString("appState", state);
+    NotesnookModule.setAppState(state);
   } else {
-    MMKV.removeItem("appState");
+    NotesnookModule.setAppState("");
   }
 }
 
@@ -280,8 +275,111 @@ const onSubscriptionError = async (error: RNIap.PurchaseError) => {
 
 const SodiumEventEmitter = new NativeEventEmitter(NativeModules.Sodium);
 
+const doAppLoadActions = async () => {
+  if (SettingsService.get().sessionExpired) {
+    eSendEvent(eLoginSessionExpired);
+    return;
+  }
+  notifee.setBadgeCount(0);
+
+  if (!(await db.user.getUser())) {
+    setLoginMessage();
+    return;
+  }
+
+  await useMessageStore.getState().setAnnouncement();
+  if (NewFeature.present()) return;
+  if (await checkAppUpdateAvailable()) return;
+  if (await checkForRateAppRequest()) return;
+  if (await PremiumService.getRemainingTrialDaysStatus()) return;
+  if (SettingsService.get().introCompleted) {
+    useMessageStore.subscribe((state) => {
+      const dialogs = state.dialogs;
+      if (dialogs.length > 0) {
+        eSendEvent(eOpenAnnouncementDialog, dialogs[0]);
+      }
+    });
+  }
+};
+
+const checkAppUpdateAvailable = async () => {
+  if (__DEV__ || Config.isTesting === "true" || Config.FDROID_BUILD || BETA)
+    return;
+  try {
+    const version =
+      Config.GITHUB_RELEASE === "true"
+        ? await getGithubVersion()
+        : await checkVersion();
+    if (!version || !version?.needsUpdate) return false;
+
+    setUpdateAvailableMessage(version);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+const checkForRateAppRequest = async () => {
+  const rateApp = SettingsService.get().rateApp as number;
+  if (
+    rateApp &&
+    rateApp < Date.now() &&
+    !useMessageStore.getState().message?.visible
+  ) {
+    setRateAppMessage();
+    return false;
+  }
+  return false;
+};
+
+const IsDatabaseMigrationRequired = () => {
+  if (!db.migrations.required() || useUserStore.getState().appLocked)
+    return false;
+
+  presentSheet({
+    component: <Migrate />,
+    onClose: () => {
+      if (!db.migrations.required()) {
+        initializeDatabase();
+      }
+    },
+    disableClosing: true
+  });
+  return true;
+};
+
+const initializeDatabase = async (password?: string) => {
+  if (useUserStore.getState().appLocked) return;
+  if (!db.isInitialized) {
+    RNBootSplash.hide({ fade: false });
+    changeSystemBarColors();
+
+    DatabaseLogger.info("Initializing database");
+    try {
+      await setupDatabase(password);
+      await db.init();
+      Sync.run();
+    } catch (e) {
+      DatabaseLogger.error(e as Error);
+      ToastManager.error(e as Error, "Error initializing database", "global");
+    }
+  }
+
+  if (IsDatabaseMigrationRequired()) return;
+
+  if (db.isInitialized) {
+    Notifications.setupReminders(true);
+    if (SettingsService.get().notifNotes) {
+      Notifications.pinQuickNote(false);
+    }
+    useSettingStore.getState().setAppLoading(false);
+    DatabaseLogger.info("Database initialized");
+  }
+  Walkthrough.init();
+};
+
 export const useAppEvents = () => {
-  const loading = useSettingStore((state) => state.isAppLoading);
+  const isAppLoading = useSettingStore((state) => state.isAppLoading);
   const [setLastSynced, setUser, appLocked, syncing] = useUserStore((state) => [
     state.setLastSynced,
     state.setUser,
@@ -290,18 +388,15 @@ export const useAppEvents = () => {
   ]);
 
   const syncedOnLaunch = useRef(false);
-
   const refValues = useRef<
     Partial<{
       subsriptionSuccessListener: EmitterSubscription;
       subsriptionErrorListener: EmitterSubscription;
-      isUserReady: boolean;
       prevState: AppStateStatus;
-      showingDialog: boolean;
       removeInternetStateListener: NetInfoSubscription;
-      isReconnecting: boolean;
       initialUrl: string;
       backupDidWait: boolean;
+      isConnectingSSE: boolean;
     }>
   >({});
 
@@ -312,7 +407,7 @@ export const useAppEvents = () => {
   }, [setLastSynced]);
 
   useEffect(() => {
-    if (loading) return;
+    if (isAppLoading) return;
 
     let subscriptions: EventManagerSubscription[] = [];
     const eventManager = db.eventManager;
@@ -327,7 +422,7 @@ export const useAppEvents = () => {
     return () => {
       subscriptions.forEach((sub) => sub?.unsubscribe?.());
     };
-  }, [loading, onSyncComplete]);
+  }, [isAppLoading, onSyncComplete]);
 
   const subscribeToPurchaseListeners = useCallback(async () => {
     if (Platform.OS === "android") {
@@ -364,14 +459,31 @@ export const useAppEvents = () => {
     const user = await db.user.getUser();
     if (PremiumService.get() && user) {
       if (
-        await BackupService.checkBackupRequired(SettingsService.get().reminder)
+        SettingsService.get().backupDirectoryAndroid ||
+        Platform.OS !== "android"
       ) {
-        if (
-          !SettingsService.get().backupDirectoryAndroid &&
-          Platform.OS === "android"
-        )
-          return;
-        sleep(2000).then(() => BackupService.run());
+        const partialBackup = await BackupService.checkBackupRequired(
+          SettingsService.get().reminder,
+          "lastBackupDate"
+        );
+        const fullBackup = await BackupService.checkBackupRequired(
+          SettingsService.get().fullBackupReminder,
+          "lastFullBackupDate"
+        );
+
+        await sleep(2000);
+
+        if (partialBackup) {
+          await BackupService.run();
+        }
+
+        if (fullBackup) {
+          await BackupService.run(true, undefined, "full");
+        }
+      }
+
+      if (SettingsService.getProperty("offlineMode")) {
+        db.attachments.cacheAttachments().catch(console.log);
       }
     }
   }, []);
@@ -432,7 +544,6 @@ export const useAppEvents = () => {
         setRecoveryKeyMessage();
       }
       if (!user?.isEmailConfirmed) setEmailVerifyMessage();
-      refValues.current.isUserReady = true;
 
       syncedOnLaunch.current = true;
       if (!isLogin) {
@@ -506,20 +617,21 @@ export const useAppEvents = () => {
   }, [onSyncComplete, onUserUpdated]);
 
   useEffect(() => {
-    const onInternetStateChanged = async (state: NetInfoState) => {
+    const onInternetStateChanged = async () => {
       if (!syncedOnLaunch.current) return;
-      reconnectSSE(state);
+      Sync.run("global", false, "full");
+      reconnectSSE();
     };
 
     const onAppStateChanged = async (state: AppStateStatus) => {
       if (state === "active") {
         notifee.setBadgeCount(0);
         updateStatusBarColor();
-
         checkAutoBackup();
-        await reconnectSSE();
+        Sync.run("global", false, "full");
+        reconnectSSE();
         await checkForShareExtensionLaunchedInBackground();
-        MMKV.removeItem("appState");
+        NotesnookModule.setAppState("");
         let user = await db.user.getUser();
         if (user && !user?.isEmailConfirmed) {
           try {
@@ -572,7 +684,7 @@ export const useAppEvents = () => {
       });
     }
     let sub: NativeEventSubscription;
-    if (!loading && !appLocked) {
+    if (!isAppLoading && !appLocked) {
       setTimeout(() => {
         sub = AppState.addEventListener("change", onAppStateChanged);
         if (
@@ -594,7 +706,7 @@ export const useAppEvents = () => {
       sub?.remove();
       unsubscribePurchaseListeners();
     };
-  }, [loading, appLocked, checkAutoBackup]);
+  }, [isAppLoading, appLocked, checkAutoBackup]);
 
   useEffect(() => {
     if (!appLocked && !syncing && refValues.current.backupDidWait) {
@@ -603,167 +715,35 @@ export const useAppEvents = () => {
     }
   }, [appLocked, syncing, checkAutoBackup]);
 
-  async function reconnectSSE(connection?: NetInfoState) {
-    if (refValues.current?.isReconnecting || !refValues.current?.isUserReady)
-      return;
-
-    if (useSettingStore.getState().appDidEnterBackgroundForAction) {
-      useSettingStore.getState().setAppDidEnterBackgroundForAction(false);
-      console.log("AppDidEnterForegroundAfterAction");
-      return;
-    }
-
-    if (SettingsService.get().sessionExpired) {
-      refValues.current.isReconnecting = false;
-      return;
-    }
-
-    refValues.current.isReconnecting = true;
-    let connectionState = connection;
+  async function reconnectSSE() {
     try {
-      if (!connectionState) {
-        connectionState = await NetInfo.fetch();
-      }
-
-      const user = await db.user.getUser();
-      if (
-        user &&
-        connectionState.isConnected &&
-        connectionState.isInternetReachable
-      ) {
-        await db.connectSSE();
-      } else {
-        useUserStore.getState().setSyncing(false);
-        await db.syncer.stop();
-      }
-      refValues.current.isReconnecting = false;
+      if (refValues.current?.isConnectingSSE) return;
+      refValues.current.isConnectingSSE = true;
+      await db.connectSSE();
+      refValues.current.isConnectingSSE = false;
     } catch (e) {
-      refValues.current.isReconnecting = false;
+      refValues.current.isConnectingSSE = false;
+      DatabaseLogger.error(e as Error);
     }
   }
 
   useEffect(() => {
-    if (!loading) {
+    if (!isAppLoading) {
       onUserUpdated();
       doAppLoadActions();
     }
-  }, [loading, onUserUpdated]);
-
-  const initializeDatabase = useCallback(async (password?: string) => {
-    const IsDatabaseMigrationRequired = () => {
-      if (!db.migrations.required() || useUserStore.getState().appLocked)
-        return false;
-
-      presentSheet({
-        component: <Migrate />,
-        onClose: () => {
-          if (!db.migrations.required()) {
-            initializeDatabase();
-          }
-        },
-        disableClosing: true
-      });
-      return true;
-    };
-
-    if (useUserStore.getState().appLocked) return;
-    if (!db.isInitialized) {
-      RNBootSplash.hide({ fade: true });
-      DatabaseLogger.info("Initializing database");
-      try {
-        await setupDatabase(password);
-        await db.init();
-      } catch (e) {
-        DatabaseLogger.error(e as Error);
-        ToastManager.error(e as Error, "Error initializing database", "global");
-      }
-    }
-
-    if (IsDatabaseMigrationRequired()) return;
-
-    if (db.isInitialized) {
-      Notifications.setupReminders(true);
-      if (SettingsService.get().notifNotes) {
-        Notifications.pinQuickNote(false);
-      }
-      useSettingStore.getState().setAppLoading(false);
-      DatabaseLogger.info("Database initialized");
-    }
-    Walkthrough.init();
-  }, []);
+  }, [isAppLoading, onUserUpdated]);
 
   useEffect(() => {
-    let sub: () => void;
-    if (appLocked) {
-      const sub = useUserStore.subscribe((state) => {
-        if (!state.appLocked && useSettingStore.getState().isAppLoading) {
-          console.log("DB initialized");
+    if (!appLocked && isAppLoading) {
+      initializeLogger()
+        .catch((e) => {
+          console.log(e);
+        })
+        .finally(() => {
+          //@ts-ignore
           initializeDatabase();
-          sub();
-        }
-      });
+        });
     }
-    return () => {
-      sub?.();
-    };
-  }, [appLocked, initializeDatabase]);
-
-  return initializeDatabase;
-};
-
-const doAppLoadActions = async () => {
-  if (SettingsService.get().sessionExpired) {
-    eSendEvent(eLoginSessionExpired);
-    return;
-  }
-  notifee.setBadgeCount(0);
-
-  if (!(await db.user.getUser())) {
-    setLoginMessage();
-    return;
-  }
-
-  await useMessageStore.getState().setAnnouncement();
-  if (NewFeature.present()) return;
-  if (await checkAppUpdateAvailable()) return;
-  if (await checkForRateAppRequest()) return;
-  if (await PremiumService.getRemainingTrialDaysStatus()) return;
-  if (SettingsService.get().introCompleted) {
-    useMessageStore.subscribe((state) => {
-      const dialogs = state.dialogs;
-      if (dialogs.length > 0) {
-        eSendEvent(eOpenAnnouncementDialog, dialogs[0]);
-      }
-    });
-  }
-};
-
-const checkAppUpdateAvailable = async () => {
-  if (__DEV__ || Config.isTesting === "true" || Config.FDROID_BUILD || BETA)
-    return;
-  try {
-    const version =
-      Config.GITHUB_RELEASE === "true"
-        ? await getGithubVersion()
-        : await checkVersion();
-    if (!version || !version?.needsUpdate) return false;
-
-    setUpdateAvailableMessage(version);
-    return true;
-  } catch (e) {
-    return false;
-  }
-};
-
-const checkForRateAppRequest = async () => {
-  const rateApp = SettingsService.get().rateApp as number;
-  if (
-    rateApp &&
-    rateApp < Date.now() &&
-    !useMessageStore.getState().message?.visible
-  ) {
-    setRateAppMessage();
-    return false;
-  }
-  return false;
+  }, [appLocked, isAppLoading]);
 };

apps/mobile/app/hooks/use-pricing.ts

@@ -22,7 +22,7 @@ import { Platform } from "react-native";
 import { Subscription } from "react-native-iap";
 import PremiumService from "../services/premium";
 import { db } from "../common/database";
-import { Product } from "@notesnook/core/dist/api/pricing";
+import { Product } from "@notesnook/core";
 
 const skuInfos: { [name: string]: Product | undefined } = {};
 

apps/mobile/app/hooks/use-sync-progress.ts

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { EVENTS } from "@notesnook/core/dist/common";
+import { EVENTS } from "@notesnook/core";
 import { useCallback, useEffect, useState } from "react";
 import { db } from "../common/database";
 

apps/mobile/app/navigation/tabs-holder.js

@@ -24,7 +24,6 @@ import {
 } from "@sayem314/react-native-keep-awake";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Dimensions, Platform, StatusBar, View } from "react-native";
-import changeNavigationBarColor from "react-native-navigation-bar-color";
 import {
   addOrientationListener,
   addSpecificOrientationListener,
@@ -62,7 +61,6 @@ import {
 } from "../services/event-manager";
 import { useSettingStore } from "../stores/use-setting-store";
 import {
-  eClearEditor,
   eCloseFullscreenEditor,
   eOnEnterEditor,
   eOnExitEditor,
@@ -75,7 +73,7 @@ import { sleep } from "../utils/time";
 import { NavigationStack } from "./navigation-stack";
 
 const _TabsHolder = () => {
-  const { colors, isDark } = useThemeColors();
+  const { colors } = useThemeColors();
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const setFullscreen = useSettingStore((state) => state.setFullscreen);
   const fullscreen = useSettingStore((state) => state.fullscreen);
@@ -271,32 +269,29 @@ const _TabsHolder = () => {
     }
 
     const state = getAppState();
-
-    setTimeout(() => {
-      switch (current) {
-        case "tablet":
-          tabBarRef.current?.goToIndex(0, false);
-          break;
-        case "smallTablet":
-          if (!fullscreen) {
-            tabBarRef.current?.closeDrawer(false);
-          } else {
-            tabBarRef.current?.openDrawer(false);
-          }
-          break;
-        case "mobile":
-          if (
-            state &&
-            !state?.movedAway &&
-            useTabStore.getState().getCurrentNoteId()
-          ) {
-            tabBarRef.current?.goToIndex(2, false);
-          } else {
-            tabBarRef.current?.goToIndex(1, false);
-          }
-          break;
-      }
-    }, 1000);
+    switch (current) {
+      case "tablet":
+        tabBarRef.current?.goToIndex(0, false);
+        break;
+      case "smallTablet":
+        if (!fullscreen) {
+          tabBarRef.current?.closeDrawer(false);
+        } else {
+          tabBarRef.current?.openDrawer(false);
+        }
+        break;
+      case "mobile":
+        if (
+          state &&
+          editorState().movedAway === false &&
+          useTabStore.getState().getCurrentNoteId()
+        ) {
+          tabBarRef.current?.goToIndex(2, false);
+        } else {
+          tabBarRef.current?.goToIndex(1, false);
+        }
+        break;
+    }
   }
 
   const onScroll = (scrollOffset) => {
@@ -386,18 +381,12 @@ const _TabsHolder = () => {
     };
   }, []);
 
-  useEffect(() => {
-    function updateSystemBars() {
-      changeNavigationBarColor(colors.primary.background, isDark, true);
-      StatusBar.setBackgroundColor("transparent");
-      StatusBar.setTranslucent(true);
-      StatusBar.setBarStyle(isDark ? "light-content" : "dark-content");
-    }
-    updateSystemBars();
-    setTimeout(() => {
-      updateSystemBars();
-    }, 1000);
-  }, [colors.primary.background, isDark]);
+  // useEffect(() => {
+  //   changeSystemBarColors();
+  //   setTimeout(() => {
+  //     changeSystemBarColors();
+  //   }, 1000);
+  // }, [colors.primary.background, isDark]);
 
   return (
     <View

apps/mobile/app/package.json

@@ -16,7 +16,7 @@
     "html-to-text": "9.0.5",
     "phone": "^3.1.14",
     "qclone": "^1.2.0",
-    "react-native-actions-sheet": "0.9.3",
+    "react-native-actions-sheet": "0.9.7",
     "react-native-check-version": "https://github.com/flexible-agency/react-native-check-version",
     "react-native-drax": "^0.10.2",
     "react-native-image-zoom-viewer": "^3.0.1",
@@ -36,11 +36,11 @@
     "react-native-wheel-color-picker": "^1.3.1",
     "tinycolor2": "1.6.0",
     "@azure/core-asynciterator-polyfill": "^1.0.2",
-    "@tanstack/react-query": "^4.29.19",
-    "@trpc/client": "10.38.3",
-    "@trpc/react-query": "10.38.3",
-    "@trpc/server": "10.38.3",
-    "kysely": "^0.26.3",
+    "@tanstack/react-query": "^4.36.1",
+    "@trpc/client": "10.45.2",
+    "@trpc/react-query": "10.45.2",
+    "@trpc/server": "10.45.2",
+    "@streetwriters/kysely": "^0.27.4",
     "pathe": "1.1.2"
   },
   "sideEffects": false

apps/mobile/app/screens/editor/tiptap/commands.ts

@@ -17,10 +17,10 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Note } from "@notesnook/core/dist/types";
-import type { Attachment } from "@notesnook/editor/dist/extensions/attachment/index";
-import type { ImageAttributes } from "@notesnook/editor/dist/extensions/image/index";
-import type { LinkAttributes } from "@notesnook/editor/dist/extensions/link";
+import { Note } from "@notesnook/core";
+import type { Attachment } from "@notesnook/editor";
+import type { ImageAttributes } from "@notesnook/editor";
+import type { LinkAttributes } from "@notesnook/editor";
 import { createRef, RefObject } from "react";
 import { Platform } from "react-native";
 import { EdgeInsets } from "react-native-safe-area-context";

apps/mobile/app/screens/editor/tiptap/picker.ts

@@ -18,7 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import Sodium from "@ammarahmed/react-native-sodium";
-import { isImage } from "@notesnook/core/dist/utils/filename";
+import { isImage } from "@notesnook/core";
+import { basename } from "pathe";
 import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import DocumentPicker, {
@@ -41,7 +42,6 @@ import { FILE_SIZE_LIMIT, IMAGE_SIZE_LIMIT } from "../../../utils/constants";
 import { eCloseSheet } from "../../../utils/events";
 import { useTabStore } from "./use-tab-store";
 import { editorController, editorState } from "./utils";
-import { basename } from "pathe";
 
 const showEncryptionSheet = (file: DocumentPickerResponse) => {
   presentSheet({
@@ -123,13 +123,13 @@ const file = async (fileOptions: PickerOptions) => {
         file.name,
         fileOptions
       ))
-    )
-      return;
+    ) {
+      throw new Error("Failed to attach file");
+    }
     if (Platform.OS === "ios") await RNFetchBlob.fs.unlink(uri);
 
-    if (!fileOptions.tabId) return;
     if (
-      fileOptions.tabId &&
+      fileOptions.tabId !== undefined &&
       fileOptions.noteId &&
       useTabStore.getState().getNoteIdForTab(fileOptions.tabId) ===
         fileOptions.noteId
@@ -158,16 +158,16 @@ const file = async (fileOptions: PickerOptions) => {
           fileOptions.tabId
         );
       }
+    } else {
+      throw new Error("Failed to attach file, no tabId is set");
     }
 
-    setTimeout(() => {
-      eSendEvent(eCloseSheet);
-    }, 1000);
+    eSendEvent(eCloseSheet);
   } catch (e) {
     eSendEvent(eCloseSheet);
     ToastManager.show({
-      heading: (e as Error).message,
-      message: "You need internet access to attach a file",
+      heading: "Failed to attach file",
+      message: (e as Error).message,
       type: "error",
       context: "global"
     });
@@ -185,7 +185,8 @@ const camera = async (options: PickerOptions) => {
       cropping: false,
       multiple: true,
       maxFiles: 10,
-      writeTempFile: true
+      writeTempFile: true,
+      compressImageQuality: 1
     })
       .then((response) => {
         handleImageResponse(
@@ -202,7 +203,6 @@ const camera = async (options: PickerOptions) => {
       type: "error",
       context: "global"
     });
-    console.log("attachment error:", e);
   }
 };
 
@@ -215,7 +215,8 @@ const gallery = async (options: PickerOptions) => {
       mediaType: "photo",
       maxFiles: 10,
       cropping: false,
-      multiple: true
+      multiple: true,
+      compressImageQuality: 1
     })
       .then((response) =>
         handleImageResponse(
@@ -266,7 +267,6 @@ const handleImageResponse = async (
   response: Image[],
   options: PickerOptions
 ) => {
-  console.log(response, "result-file-picker");
   const result = await AttachImage.present(response, options.context);
   if (!result) return;
   const compress = result.compress;
@@ -302,10 +302,15 @@ const handleImageResponse = async (
       type: "url"
     });
 
-    const fileName = image.sourceURL
+    let fileName = image.sourceURL
       ? basename(image.sourceURL)
       : image.filename || "image";
 
+    fileName =
+      image.mime === "image/jpeg"
+        ? fileName.replace(/HEIC|HEIF/, "jpeg")
+        : fileName;
+
     console.log("attaching image...", fileName);
 
     console.log("attaching file...");

apps/mobile/app/screens/editor/tiptap/types.ts

@@ -17,9 +17,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import type { ToolbarGroupDefinition } from "@notesnook/editor/dist/toolbar/types";
+import type { ToolbarGroupDefinition } from "@notesnook/editor";
 import { useEditor } from "./use-editor";
-import { Note } from "@notesnook/core/dist/types";
 export type useEditorType = ReturnType<typeof useEditor>;
 
 export type EditorState = {
@@ -91,7 +90,6 @@ export type SavePayload = {
 };
 
 export type AppState = {
-  note?: Note;
   editing: boolean;
   movedAway: boolean;
   timestamp: number;

apps/mobile/app/screens/editor/tiptap/use-editor-events.tsx

@@ -19,8 +19,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 /* eslint-disable no-case-declarations */
 /* eslint-disable @typescript-eslint/no-var-requires */
-import { ItemReference } from "@notesnook/core/dist/types";
-import type { Attachment } from "@notesnook/editor/dist/extensions/attachment/index";
+import { ItemReference } from "@notesnook/core";
+import type { Attachment } from "@notesnook/editor";
 import { getDefaultPresets } from "@notesnook/editor/dist/toolbar/tool-definitions";
 import Clipboard from "@react-native-clipboard/clipboard";
 import React, { useCallback, useEffect, useRef } from "react";

apps/mobile/app/screens/editor/tiptap/use-editor.ts

@@ -18,10 +18,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { getFormattedDate } from "@notesnook/common";
-import { isEncryptedContent } from "@notesnook/core/dist/collections/content";
-import { NoteContent } from "@notesnook/core/dist/collections/session-content";
-import { EVENTS } from "@notesnook/core/dist/common";
 import {
+  EVENTS,
+  isEncryptedContent,
+  NoteContent,
   ContentItem,
   ContentType,
   DeletedItem,
@@ -31,7 +31,7 @@ import {
   UnencryptedContentItem,
   isDeleted,
   isTrashItem
-} from "@notesnook/core/dist/types";
+} from "@notesnook/core";
 import { useThemeEngineStore } from "@notesnook/theme";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import WebView from "react-native-webview";
@@ -569,7 +569,7 @@ export const useEditor = (
           return;
         }
 
-        lastContentChangeTime.current[item.id] = item.dateEdited;
+        lastContentChangeTime.current[item.id] = 0;
         currentLoadingNoteId.current = item.id;
         currentNotes.current[item.id] = item;
 
@@ -660,9 +660,9 @@ export const useEditor = (
           lock.current = true;
 
           // Handle this case where note was locked on another device and synced.
-          const locked = await db.vaults.itemExists(
-            currentNotes.current[noteId] as ItemReference
-          );
+          const locked = note
+            ? await db.vaults.itemExists(note as ItemReference)
+            : false;
 
           if (note) {
             if (!locked && tab?.noteLocked) {

apps/mobile/app/screens/editor/tiptap/utils.ts

@@ -17,20 +17,20 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { parseInternalLink } from "@notesnook/core";
 import { createRef, MutableRefObject, RefObject } from "react";
 import { TextInput } from "react-native";
 import WebView from "react-native-webview";
-import { MMKV } from "../../../common/database/mmkv";
+import { db } from "../../../common/database";
 import {
   eSendEvent,
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../../services/event-manager";
+import { eOnLoadNote } from "../../../utils/events";
+import { NotesnookModule } from "../../../utils/notesnook-module";
 import { AppState, EditorState, useEditorType } from "./types";
 import { useTabStore } from "./use-tab-store";
-import { parseInternalLink } from "@notesnook/core";
-import { eOnLoadNote } from "../../../utils/events";
-import { db } from "../../../common/database";
 export const textInput = createRef<TextInput>();
 export const editorController =
   createRef<useEditorType>() as MutableRefObject<useEditorType>;
@@ -154,18 +154,13 @@ export function isContentInvalid(content: string | undefined) {
 }
 
 const canRestoreAppState = (appState: AppState) => {
-  return (
-    appState.editing &&
-    !appState.note?.locked &&
-    appState.note?.id &&
-    Date.now() < appState.timestamp + 3600000
-  );
+  return appState.editing && Date.now() < appState.timestamp + 3600000;
 };
 
 let appState: AppState | undefined;
 export function getAppState() {
   if (appState && canRestoreAppState(appState)) return appState as AppState;
-  const json = MMKV.getString("appState");
+  const json = NotesnookModule.getAppState();
   if (json) {
     appState = JSON.parse(json) as AppState;
     if (canRestoreAppState(appState)) {
@@ -180,7 +175,7 @@ export function getAppState() {
 
 export function clearAppState() {
   appState = undefined;
-  MMKV.removeItem("appState");
+  NotesnookModule.setAppState("");
 }
 
 export async function openInternalLink(url: string) {

apps/mobile/app/screens/notebook/index.tsx

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import { resolveItems } from "@notesnook/common";
 import { VirtualizedGrouping } from "@notesnook/core";
-import { Note, Notebook } from "@notesnook/core/dist/types";
+import { Note, Notebook } from "@notesnook/core";
 import React, { useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import { db } from "../../common/database";

apps/mobile/app/screens/notes/colored.tsx

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Color } from "@notesnook/core/dist/types";
+import { Color } from "@notesnook/core";
 import React from "react";
 import NotesPage from ".";
 import { db } from "../../common/database";

apps/mobile/app/screens/notes/index.tsx

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { resolveItems } from "@notesnook/common";
 import { VirtualizedGrouping } from "@notesnook/core";
-import { Color, Note } from "@notesnook/core/dist/types";
+import { Color, Note } from "@notesnook/core";
 import React, { useEffect, useRef, useState } from "react";
 import { db } from "../../common/database";
 import { FloatingButton } from "../../components/container/floating-button";

apps/mobile/app/screens/notes/tagged.tsx

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Tag } from "@notesnook/core/dist/types";
+import { Tag } from "@notesnook/core";
 import React from "react";
 import NotesPage from ".";
 import { db } from "../../common/database";

apps/mobile/app/screens/search/index.tsx

@@ -32,7 +32,7 @@ import { NavigationProps } from "../../services/navigation";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { eOnRefreshSearch } from "../../utils/events";
 import { SearchBar } from "./search-bar";
-import { FilteredSelector } from "@notesnook/core/dist/database/sql-collection";
+import { FilteredSelector } from "@notesnook/core";
 export const Search = ({ route, navigation }: NavigationProps<"Search">) => {
   const [results, setResults] = useState<VirtualizedGrouping<Item>>();
   const [loading, setLoading] = useState(false);

apps/mobile/app/screens/settings/attachment-group-progress.tsx

@@ -0,0 +1,123 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import { formatBytes } from "@notesnook/common";
+import { useThemeColors } from "@notesnook/theme";
+import React from "react";
+import { View } from "react-native";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { db } from "../../common/database";
+import { IconButton } from "../../components/ui/icon-button";
+import { ProgressBarComponent } from "../../components/ui/svg/lazy";
+import Paragraph from "../../components/ui/typography/paragraph";
+import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
+import { useDBItem } from "../../hooks/use-db-item";
+import { useAttachmentStore } from "../../stores/use-attachment-store";
+import { SIZE } from "../../utils/size";
+
+export const AttachmentGroupProgress = (props: { groupId?: string }) => {
+  const { colors } = useThemeColors();
+  const progress = useAttachmentStore((state) =>
+    !props.groupId ? undefined : state.downloading?.[props.groupId]
+  );
+  const [file] = useDBItem(progress?.filename, "attachment");
+  const [fileProgress] = useAttachmentProgress(file, false);
+
+  return !progress ||
+    progress.canceled ||
+    progress.current === progress.total ? null : (
+    <View
+      style={{
+        borderWidth: 1,
+        borderColor: colors.primary.border,
+        borderRadius: 10,
+        padding: 12,
+        flexDirection: "row",
+        gap: 10
+      }}
+    >
+      <Icon name="download" size={SIZE.xxxl} />
+      <View
+        style={{
+          gap: 5,
+          flex: 1
+        }}
+      >
+        <Paragraph>
+          {progress.message || "Downloading files"} ({progress?.current}/
+          {progress?.total})
+        </Paragraph>
+
+        {progress && progress.current && progress.total ? (
+          <View
+            style={{
+              width: "100%",
+              marginTop: 10
+            }}
+          >
+            <ProgressBarComponent
+              height={5}
+              width={null}
+              animated={true}
+              useNativeDriver
+              progress={progress.current / progress.total}
+              unfilledColor={colors.secondary.background}
+              color={colors.primary.accent}
+              borderWidth={0}
+            />
+          </View>
+        ) : null}
+
+        <Paragraph
+          style={{
+            fontSize: 10,
+            color: colors.secondary.paragraph
+          }}
+          numberOfLines={1}
+        >
+          Downloading {file?.filename} {formatBytes(file?.size || 0)}{" "}
+          {fileProgress?.percent ? `(${fileProgress.percent})` : ""}
+        </Paragraph>
+        <Paragraph size={10} color={colors.secondary.paragraph}>
+          Group: {props.groupId}
+        </Paragraph>
+      </View>
+      {props.groupId === "offline-mode" ? null : (
+        <IconButton
+          name="close"
+          onPress={() => {
+            if (props.groupId) {
+              useAttachmentStore.getState().setDownloading({
+                groupId: props.groupId,
+                canceled: true,
+                current: 0,
+                total: 0,
+                message: undefined
+              });
+              setTimeout(() => {
+                if (props.groupId) {
+                  db.fs().cancel(props.groupId);
+                }
+              });
+            }
+          }}
+        />
+      )}
+    </View>
+  );
+};

apps/mobile/app/screens/settings/components.tsx

@@ -18,23 +18,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { ReactElement } from "react";
+import { AttachmentDialog } from "../../components/attachments";
 import { AccentColorPicker } from "./appearance";
 import DebugLogs from "./debug";
 import { ConfigureToolbar } from "./editor/configure-toolbar";
 import { Licenses } from "./licenses";
-import SoundPicker from "./sound-picker";
-import { Subscription } from "./subscription";
-import { TitleFormat } from "./title-format";
+import { AttachmentGroupProgress } from "./attachment-group-progress";
 import {
-  HomePicker,
+  ApplockTimerPicker,
+  BackupReminderPicker,
+  BackupWithAttachmentsReminderPicker,
   DateFormatPicker,
   FontPicker,
+  HomePicker,
   TimeFormatPicker,
-  TrashIntervalPicker,
-  BackupReminderPicker,
-  ApplockTimerPicker
+  TrashIntervalPicker
 } from "./picker/pickers";
+import { RestoreBackup } from "./restore-backup";
+import { ServersConfiguration } from "./server-config";
+import SoundPicker from "./sound-picker";
+import { Subscription } from "./subscription";
 import ThemeSelector from "./theme-selector";
+import { TitleFormat } from "./title-format";
+import { View } from "react-native";
 
 export const components: { [name: string]: ReactElement } = {
   colorpicker: <AccentColorPicker />,
@@ -51,5 +57,14 @@ export const components: { [name: string]: ReactElement } = {
   "date-format-selector": <DateFormatPicker />,
   "time-format-selector": <TimeFormatPicker />,
   "theme-selector": <ThemeSelector />,
-  "applock-timer": <ApplockTimerPicker />
+  "applock-timer": <ApplockTimerPicker />,
+  autobackupsattachments: <BackupWithAttachmentsReminderPicker />,
+  backuprestore: <RestoreBackup />,
+  "server-config": <ServersConfiguration />,
+  "attachments-manager": <AttachmentDialog note={undefined} isSheet={false} />,
+  "offline-mode-progress": (
+    <View style={{ paddingHorizontal: 12 }}>
+      <AttachmentGroupProgress groupId="offline-mode" />
+    </View>
+  )
 };

apps/mobile/app/screens/settings/debug.tsx

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import Clipboard from "@react-native-clipboard/clipboard";
 import { LogMessage } from "@notesnook/logger";
-import { format, LogLevel, logManager } from "@notesnook/core/dist/logger";
+import { format, LogLevel, logManager } from "@notesnook/core";
 import React, { useEffect, useRef, useState } from "react";
 import { FlatList, Platform, TouchableOpacity, View } from "react-native";
 import * as ScopedStorage from "react-native-scoped-storage";
@@ -122,7 +122,8 @@ export default function DebugLogs() {
       colors.primary.paragraph,
       colors.error.paragraph,
       colors.static.black,
-      colors.static.orange
+      colors.static.orange,
+      colors.primary.border
     ]
   );
 

apps/mobile/app/screens/settings/editor/group.tsx

@@ -32,7 +32,7 @@ import { DraggableItem, useDragState } from "./state";
 import ToolSheet from "./tool-sheet";
 
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { ToolId } from "@notesnook/editor/dist/toolbar/tools";
+import type { ToolId } from "@notesnook/editor";
 import PremiumService from "../../../services/premium";
 
 export const Group = ({