ci: skip testflight

Signed-off-by: François Martin <f.martin@fastmail.com>

.github/workflows/android.publish.internal.yml

@@ -147,8 +147,10 @@ jobs:
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86.apk
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86_64.apk
 
-      - name: Upload signed aab to Github
-        uses: actions/upload-artifact@v2
+      - name: Upload sourcemaps
+        uses: actions/upload-artifact@v4
         with:
-          name: Notesnook.aab
-          path: ${{steps.sign_app.outputs.signedReleaseFile}}
+          name: sourcemaps
+          path: |
+            apps/mobile/native/android/app/build/**/*.map
+            packages/editor-mobile/sourcemaps/*.map

.github/workflows/android.publish.yml

@@ -133,7 +133,6 @@ jobs:
           status: completed
           whatsNewDirectory: apps/mobile/native/android/releasenotes/
 
-     
       - name: Create release draft on Github
         uses: softprops/action-gh-release@v1
         with:
@@ -148,8 +147,10 @@ jobs:
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86.apk
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86_64.apk
 
-      - name: Upload signed aab to Github
-        uses: actions/upload-artifact@v2
+      - name: Upload sourcemaps
+        uses: actions/upload-artifact@v4
         with:
-          name: Notesnook.aab
-          path: ${{steps.sign_app.outputs.signedReleaseFile}}
+          name: sourcemaps
+          path: |
+            apps/mobile/native/android/app/build/**/*.map
+            packages/editor-mobile/sourcemaps/*.map

.github/workflows/desktop.publish.yml

@@ -97,6 +97,9 @@ jobs:
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
 
+      - name: Install setuptools
+        run: brew install python-setuptools
+
       - name: Setup notarization
         run: |
           mkdir -p ~/private_keys/
@@ -144,7 +147,7 @@ jobs:
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
         run: |
           npx nx run release --project @notesnook/desktop -- --variant=mas
-          npx electron-builder --mac mas --universal -p never
+          yarn electron-builder --mac mas --universal -p never
         working-directory: ./apps/desktop
 
       - name: Build zip and dmg
@@ -158,9 +161,9 @@ jobs:
         run: |
           npx nx run release --project @notesnook/desktop
           if [ ${{ inputs.publish-github }} == true ]; then
-            npx electron-builder --mac zip dmg --arm64 --x64 -p always
+            yarn electron-builder --mac zip dmg --arm64 --x64 -p always
           else
-            npx electron-builder --mac zip dmg --arm64 --x64 -p never
+            yarn electron-builder --mac zip dmg --arm64 --x64 -p never
           fi
         working-directory: ./apps/desktop
 
@@ -216,7 +219,7 @@ jobs:
       - name: Build snap
         if: inputs.publish-snap
         run: |
-          npx electron-builder --linux snap:x64 -p never
+          yarn electron-builder --linux snap:x64 -p never
         working-directory: ./apps/desktop
 
       - name: Build AppImage
@@ -224,9 +227,9 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           if [ ${{ inputs.publish-github }} == true ]; then
-            npx electron-builder --linux AppImage:x64 AppImage:arm64 -p always
+            yarn electron-builder --linux AppImage:x64 AppImage:arm64 -p always
           else
-            npx electron-builder --linux AppImage:x64 AppImage:arm64 -p never
+            yarn electron-builder --linux AppImage:x64 AppImage:arm64 -p never
           fi
         working-directory: ./apps/desktop
 
@@ -251,8 +254,8 @@ jobs:
         with:
           dotnet-version: 6.0.x
 
-      - name: Install AzureCodeSigning
-        run: Install-Module -Name AzureCodeSigning -RequiredVersion 0.3.0 -Force -Repository PSGallery
+      - name: Install TrustedSigning
+        run: Install-Module -Name TrustedSigning -RequiredVersion 0.3.15 -Force -Repository PSGallery
         shell: pwsh
 
       - name: Setup Node

.github/workflows/ios.publish.yml

@@ -89,16 +89,19 @@ jobs:
       - name: CCache Stats After Build
         run: ccache -sv
 
-      - name: "Upload app to TestFlight"
-        uses: apple-actions/upload-testflight-build@v1
-        with:
-          app-path: Notesnook.ipa
-          issuer-id: ${{ secrets.API_KEY_ISSUER_ID }}
-          api-key-id: ${{ secrets.API_KEY_ID }}
-          api-private-key: ${{ secrets.API_KEY }}
+      # - name: "Upload app to TestFlight"
+      #   uses: apple-actions/upload-testflight-build@v1
+      #   with:
+      #     app-path: Notesnook.ipa
+      #     issuer-id: ${{ secrets.API_KEY_ISSUER_ID }}
+      #     api-key-id: ${{ secrets.API_KEY_ID }}
+      #     api-private-key: ${{ secrets.API_KEY }}
 
       - name: Upload Notesnook.ipa to Github
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
-          name: Notesnook.ipa
-          path: Notesnook.ipa
+          name: Notesnook.zip
+          path: |
+            Notesnook.ipa
+            apps/mobile/native/ios/**/*.map
+            packages/editor-mobile/sourcemaps/*.map

.github/workflows/web.beta.publish.yml

@@ -1,69 +0,0 @@
-name: Publish @notesnook/web Beta
-
-on:
-  workflow_dispatch:
-  push:
-    branches:
-      - master
-      - "!v3-beta"
-    paths-ignore:
-      - "apps/mobile/**"
-      - "packages/editor-mobile/**"
-      - "apps/desktop/**"
-      - "apps/vericrypt/**"
-      - "servers/**"
-      - "packages/clipper/**"
-      - "extensions/web-clipper/**"
-  pull_request:
-    types:
-      - closed
-      - ready_for_review
-      - reopened
-      - opened
-      - synchronize
-    branches:
-      - master
-      - "!v3-beta"
-    paths-ignore:
-      - "apps/mobile/**"
-      - "packages/editor-mobile/**"
-      - "apps/desktop/**"
-      - "apps/vericrypt/**"
-      - "servers/**"
-      - "packages/clipper/**"
-      - "extensions/web-clipper/**"
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - 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=web
-
-      - name: Setup environment
-        run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
-          echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
-          echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
-
-      - name: Generate beta build
-        run: npm run build:beta:web
-
-      - name: Publish to Cloudflare Pages
-        uses: unlike-ltd/github-actions-cloudflare-pages@v0.1.1
-        id: pages
-        with:
-          cloudflare-api-token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          cloudflare-account-id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          cloudflare-project-name: notesnook-beta-app
-          directory: ./apps/web/build
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          github-environment: ${{ (github.ref == 'refs/heads/master' && 'beta') || 'preview' }}

.github/workflows/web.tests.yml

@@ -40,7 +40,7 @@ jobs:
         run: npm run build:test:web
 
       - name: Archive build artifact
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: build
           path: apps/web/build/**/*
@@ -56,7 +56,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Download build
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: build
           path: ./apps/web/build
@@ -67,7 +67,7 @@ jobs:
       - name: Install packages
         run: |
           npm ci --ignore-scripts --prefer-offline --no-audit
-          npm install -D @playwright/test otplib
+          npm install -D @playwright/test otplib dayjs @zip.js/zip.js
 
       - name: Validate build extraction
         run: ls -ld ./apps/web/build/index.html
@@ -88,7 +88,7 @@ jobs:
         working-directory: apps/web
 
       - name: Upload test results
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: test-results-${{ matrix.shard }}

.github/workflows/web.v3-beta.publish.yml

@@ -1,32 +0,0 @@
-name: Publish @notesnook/web v3 Beta
-
-on:
-  workflow_dispatch:
-
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - 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=web
-
-      - name: Setup environment
-        run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
-          echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
-          echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
-
-      - name: Build
-        run: npm run build:web
-
-      - name: Publish to Cloudflare Pages
-        run: npx --yes wrangler pages deploy --project-name=notesnook-v3-beta ./apps/web/build/

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.10-beta",
+  "version": "3.0.13",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/index.js",
@@ -14,11 +14,11 @@
     "@notesnook/crypto": "file:../../packages/crypto",
     "@trpc/client": "10.38.3",
     "@trpc/server": "10.38.3",
-    "better-sqlite3-multiple-ciphers": "^9.4.0",
+    "better-sqlite3-multiple-ciphers": "^9.5.0",
     "electron-trpc": "0.5.2",
-    "electron-updater": "6.1.4",
+    "electron-updater": "^6.2.1",
     "icojs": "^0.17.1",
-    "sodium-native": "^4.0.6",
+    "sodium-native": "^4.1.1",
     "typed-emitter": "^2.1.0",
     "yargs": "^17.6.2",
     "zod": "^3.21.4"
@@ -27,11 +27,14 @@
     "@types/node": "18.16.1",
     "@types/yargs": "^17.0.24",
     "chokidar": "^3.5.3",
-    "electron": "^28.2.1",
-    "electron-builder": "^24.9.1",
-    "esbuild": "^0.20.0",
+    "electron": "^29.3.1",
+    "electron-builder": "^24.13.3",
+    "esbuild": "^0.23.0",
+    "kysely": "^0.27.3",
+    "node-gyp-build": "^4.8.0",
+    "prebuildify": "^6.0.1",
     "tree-kill": "^1.2.2",
-    "undici": "^6.6.1"
+    "undici": "^6.14.1"
   },
   "optionalDependencies": {
     "dmg-license": "^1.0.11"
@@ -55,8 +58,8 @@
     "productName": "Notesnook",
     "copyright": "Copyright © 2023 Streetwriters (Private) Limited",
     "artifactName": "notesnook_${os}_${arch}.${ext}",
-    "asar": false,
     "generateUpdatesFilesForAllChannels": true,
+    "asar": false,
     "files": [
       "!*.chunk.js.map",
       "!*.chunk.js.LICENSE.txt",
@@ -219,8 +222,7 @@
       {
         "provider": "github",
         "repo": "notesnook",
-        "owner": "streetwriters",
-        "channel": "beta"
+        "owner": "streetwriters"
       }
     ]
   }

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

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

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import path from "path";
 import fs, { readFile, writeFile } from "fs/promises";
-import { existsSync } from "fs";
+import { existsSync, readFileSync } from "fs";
 import yargs from "yargs-parser";
 import os from "os";
 import * as childProcess from "child_process";
@@ -28,23 +28,29 @@ import { fileURLToPath } from "url";
 const args = yargs(process.argv);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
+const packageJson = JSON.parse(
+  readFileSync(path.join(__dirname, "..", "package.json"), "utf-8")
+);
 
 const webAppPath = path.resolve(path.join(__dirname, "..", "..", "web"));
 
 await fs.rm("./build/", { force: true, recursive: true });
 
 if (args.rebuild || !existsSync(path.join(webAppPath, "build"))) {
-  await exec(`cd ${webAppPath} && npm run build:desktop`);
+  await exec(
+    "yarn nx build:desktop @notesnook/web",
+    path.join(__dirname, "..", "..", "..")
+  );
 }
 
-// temporary until there's support for prebuilt binaries for windows ARM & linux ARM
-await patchBetterSQLite3();
+// 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",
-    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,
@@ -52,19 +58,19 @@ await fs.cp(path.join(webAppPath, "build"), "build", {
 });
 
 if (args.variant === "mas") {
-  await exec(`npm run bundle:mas`);
+  await exec(`yarn run bundle:mas`);
 } else {
-  await exec(`npm run bundle`);
+  await exec(`yarn run bundle`);
 }
 
-await exec(`npx tsc`);
+await exec(`yarn tsc`);
 
 if (args.run) {
-  await exec(`npx electron-builder --dir --x64`);
+  await exec(`yarn electron-builder --dir --x64`);
   if (process.platform === "win32") {
     await exec(`.\\output\\win-unpacked\\Notesnook.exe`);
   } else if (process.platform === "darwin") {
-    await exec(`./output/darwin-unpacked/Notesnook`);
+    await exec(`./output/mac/Notesnook.app/Contents/MacOS/Notesnook`);
   } else {
     await exec(`./output/linux-unpacked/Notesnook`);
   }
@@ -88,7 +94,7 @@ async function patchBetterSQLite3() {
   );
   const json = JSON.parse(await readFile(jsonPath, "utf-8"));
 
-  json.version = "9.4.1";
+  json.version = "9.5.1";
   json.homepage = "https://github.com/thecodrr/better-sqlite3-multiple-ciphers";
   json.repository.url =
     "git://github.com/thecodrr/better-sqlite3-multiple-ciphers.git";

apps/desktop/scripts/dev.mjs

@@ -53,11 +53,11 @@ async function onChange(first) {
   if (first) {
     await fs.rm("./build/", { force: true, recursive: true });
 
-    await exec("npx electron-rebuild");
+    await exec("yarn electron-builder install-app-deps");
   }
 
-  await exec(`npm run bundle`);
-  execAsync(`npx`, [`tsc`]);
+  await exec(`yarn run bundle`);
+  execAsync(`yarn`, [`tsc`]);
 
   if (await isBundleSame()) {
     console.log("Bundle is same. Doing nothing.");
@@ -66,7 +66,7 @@ async function onChange(first) {
 
   if (first) {
     await spawnAndWaitUntil(
-      ["npx", "nx", "start:desktop", "@notesnook/web"],
+      ["yarn", "nx", "start:desktop", "@notesnook/web"],
       path.join(__dirname, "..", "..", ".."),
       (data) => data.includes("Network: use --host to expose")
     );
@@ -78,7 +78,7 @@ async function onChange(first) {
   }
 
   execAsync(
-    "npx",
+    "yarn",
     ["electron", path.join("build", "electron.js")],
     true,
     cleanup

apps/desktop/scripts/sign.js

@@ -33,7 +33,7 @@ module.exports = async function (configuration) {
   const DescriptionUrl = "https://notesnook.com/";
   const FilesCatalog = createCatalog(configuration.path);
 
-  const command = `Invoke-AzureCodeSigning -Endpoint "${Endpoint}" -CodeSigningAccountName "${CodeSigningAccountName}" -CertificateProfileName "${CertificateProfileName}" -FileDigest "${FileDigest}" -TimestampRfc3161 "${TimestampRfc3161}" -TimestampDigest "${TimestampDigest}" -Description "${Description}" -DescriptionUrl "${DescriptionUrl}" -FilesCatalog "${FilesCatalog}"`;
+  const command = `Invoke-TrustedSigning -Endpoint "${Endpoint}" -CodeSigningAccountName "${CodeSigningAccountName}" -CertificateProfileName "${CertificateProfileName}" -FileDigest "${FileDigest}" -TimestampRfc3161 "${TimestampRfc3161}" -TimestampDigest "${TimestampDigest}" -Description "${Description}" -DescriptionUrl "${DescriptionUrl}" -FilesCatalog "${FilesCatalog}"`;
 
   console.debug("Signing", configuration.path, "using command", command);
 

apps/desktop/src/api/index.ts

@@ -24,6 +24,7 @@ import { spellCheckerRouter } from "./spell-checker";
 import { updaterRouter } from "./updater";
 import { bridgeRouter } from "./bridge";
 import { safeStorageRouter } from "./safe-storage";
+import { windowRouter } from "./window";
 
 const t = initTRPC.create();
 
@@ -33,7 +34,8 @@ export const router = t.router({
   spellChecker: spellCheckerRouter,
   updater: updaterRouter,
   bridge: bridgeRouter,
-  safeStorage: safeStorageRouter
+  safeStorage: safeStorageRouter,
+  window: windowRouter
 });
 
 export const api = router.createCaller({});

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";
@@ -32,6 +32,7 @@ import { AssetManager } from "../utils/asset-manager";
 import { isFlatpak } from "../utils";
 import { setupDesktopIntegration } from "../utils/desktop-integration";
 import { rm } from "fs/promises";
+import { disableCustomDns, enableCustomDns } from "../utils/custom-dns";
 
 const t = initTRPC.create();
 
@@ -55,6 +56,15 @@ export const osIntegrationRouter = t.router({
     config.zoomFactor = factor;
   }),
 
+  customDns: t.procedure.query(() => config.customDns),
+  setCustomDns: t.procedure
+    .input(z.boolean().optional())
+    .mutation(({ input: customDns }) => {
+      if (customDns) enableCustomDns();
+      else disableCustomDns();
+      config.customDns = !!customDns;
+    }),
+
   proxyRules: t.procedure.query(() => config.proxyRules),
   setProxyRules: t.procedure
     .input(z.string().optional())
@@ -142,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 }) => {
@@ -170,16 +184,45 @@ export const osIntegrationRouter = t.router({
     }),
   bringToFront: t.procedure.query(() => bringToFront()),
   changeTheme: t.procedure
-    .input(Theme)
-    .mutation(({ input }) => setTheme(input)),
+    .input(
+      z.object({
+        theme: Theme,
+        windowControlsIconColor: z.string().optional(),
+        backgroundColor: z.string().optional()
+      })
+    )
+    .mutation(
+      ({ input: { theme, windowControlsIconColor, backgroundColor } }) => {
+        if (windowControlsIconColor) {
+          config.windowControlsIconColor = windowControlsIconColor;
+          if (
+            process.platform === "win32" &&
+            !config.desktopSettings.nativeTitlebar
+          )
+            globalThis.window?.setTitleBarOverlay({
+              symbolColor: windowControlsIconColor
+            });
+        }
+
+        if (backgroundColor) {
+          config.backgroundColor = backgroundColor;
+        }
+
+        setTheme(theme);
+      }
+    ),
 
   onThemeChanged: t.procedure.subscription(() =>
     observable<"dark" | "light">((emit) => {
-      nativeTheme.on("updated", () => {
+      const updated = () => {
         if (getTheme() === "system") {
           emit.next(nativeTheme.shouldUseDarkColors ? "dark" : "light");
         }
-      });
+      };
+      nativeTheme.on("updated", updated);
+      return () => {
+        nativeTheme.off("updated", updated);
+      };
     })
   )
 });

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

@@ -28,16 +28,20 @@ type UpdateInfo = { version: string };
 type Progress = { percent: number };
 
 const t = initTRPC.create();
+let cancellationToken: CancellationToken | undefined = undefined;
 
 export const updaterRouter = t.router({
   autoUpdates: t.procedure.query(() => config.automaticUpdates),
   install: t.procedure.query(() => autoUpdater.quitAndInstall()),
   download: t.procedure.query(async () => {
-    const cancellationToken = new CancellationToken();
-    await autoUpdater.downloadUpdate(cancellationToken);
+    if (cancellationToken) return;
+    cancellationToken = new CancellationToken();
+    await autoUpdater
+      .downloadUpdate(cancellationToken)
+      .finally(() => (cancellationToken = undefined));
   }),
   check: t.procedure.query(async () => {
-    await autoUpdater.checkForUpdates();
+    await autoUpdater.checkForUpdates().catch(console.error);
   }),
 
   toggleAutoUpdates: t.procedure
@@ -57,7 +61,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")
 });
@@ -65,12 +80,14 @@ 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);
       autoUpdater.addListener(eventName, listener);
       return () => {
         autoUpdater.removeListener(eventName, listener);

apps/desktop/src/api/window.ts

@@ -0,0 +1,83 @@
+/*
+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 { initTRPC } from "@trpc/server";
+import { observable } from "@trpc/server/observable";
+
+const t = initTRPC.create();
+
+export const windowRouter = t.router({
+  maximize: t.procedure.mutation(() => {
+    globalThis.window?.maximize();
+  }),
+  restore: t.procedure.mutation(() => {
+    globalThis.window?.restore();
+  }),
+  minimze: t.procedure.mutation(() => {
+    globalThis.window?.minimize();
+  }),
+  maximized: t.procedure.query(() => globalThis.window?.isMaximized()),
+  fullscreen: t.procedure.query(() => globalThis.window?.isFullScreen()),
+  onWindowStateChanged: t.procedure.subscription(() => {
+    return observable<{ maximized: boolean; fullscreen: boolean }>((emit) => {
+      function listener() {
+        emit.next({
+          maximized: !!globalThis.window?.isMaximized(),
+          fullscreen: !!globalThis.window?.isFullScreen()
+        });
+      }
+      function enterFullscreen() {
+        emit.next({
+          maximized: !!globalThis.window?.isMaximized(),
+          fullscreen: true
+        });
+      }
+      function leaveFullscreen() {
+        emit.next({
+          maximized: !!globalThis.window?.isMaximized(),
+          fullscreen: false
+        });
+      }
+      globalThis.window?.addListener("maximize", listener);
+      globalThis.window?.addListener("minimize", listener);
+      globalThis.window?.addListener("unmaximize", listener);
+      globalThis.window?.addListener("restore", listener);
+      globalThis.window?.addListener("enter-full-screen", enterFullscreen);
+      globalThis.window?.addListener("leave-full-screen", leaveFullscreen);
+      globalThis.window?.addListener("leave-html-full-screen", leaveFullscreen);
+      globalThis.window?.addListener("enter-html-full-screen", enterFullscreen);
+      return () => {
+        globalThis.window?.removeListener("maximize", listener);
+        globalThis.window?.removeListener("minimize", listener);
+        globalThis.window?.removeListener("unmaximize", listener);
+        globalThis.window?.removeListener("restore", listener);
+        globalThis.window?.removeListener("enter-full-screen", enterFullscreen);
+        globalThis.window?.removeListener("leave-full-screen", leaveFullscreen);
+        globalThis.window?.removeListener(
+          "leave-html-full-screen",
+          leaveFullscreen
+        );
+        globalThis.window?.removeListener(
+          "enter-html-full-screen",
+          enterFullscreen
+        );
+      };
+    });
+  })
+});

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

@@ -35,6 +35,7 @@ import path from "path";
 import { bringToFront } from "./utils/bring-to-front";
 import { bridge } from "./api/bridge";
 import { setupDesktopIntegration } from "./utils/desktop-integration";
+import { disableCustomDns, enableCustomDns } from "./utils/custom-dns";
 
 // only run a single instance
 if (!MAC_APP_STORE && !app.requestSingleInstanceLock()) {
@@ -82,10 +83,28 @@ async function createWindow() {
       size: 512,
       format: process.platform === "win32" ? "ico" : "png"
     }),
+
+    ...(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"
     }
@@ -122,7 +141,7 @@ async function createWindow() {
   setupJumplist();
 
   if (isDevelopment())
-    mainWindow.webContents.openDevTools({ mode: "right", activate: true });
+    mainWindow.webContents.openDevTools({ mode: "bottom", activate: true });
 
   mainWindow.webContents.setWindowOpenHandler((details) => {
     shell.openExternal(details.url);
@@ -138,6 +157,9 @@ async function createWindow() {
 app.once("ready", async () => {
   console.info("App ready. Opening window.");
 
+  if (config.customDns) enableCustomDns();
+  else disableCustomDns();
+
   if (!isDevelopment()) registerProtocol();
   await createWindow();
   configureAutoUpdater();

apps/desktop/src/preload.ts

@@ -23,13 +23,11 @@ import { type RendererGlobalElectronTRPC } from "electron-trpc/src/types";
 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;
 }
 
 process.once("loaded", async () => {
@@ -43,5 +41,4 @@ process.once("loaded", async () => {
 });
 
 globalThis.NativeNNCrypto = require("@notesnook/crypto").NNCrypto;
-globalThis.createSQLite3Database = (filename) => sqlite3(filename);
 globalThis.os = () => (MAC_APP_STORE ? "mas" : platform());

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,14 +36,20 @@ export const config = {
     autoStart: false,
     startMinimized: false,
     minimizeToSystemTray: false,
-    closeToSystemTray: false
+    closeToSystemTray: false,
+    nativeTitlebar: false
   },
   privacyMode: false,
   isSpellCheckerEnabled: true,
   zoomFactor: 1,
   theme: nativeTheme.themeSource,
   automaticUpdates: true,
-  proxyRules: ""
+  proxyRules: "",
+  customDns: true,
+
+  backgroundColor: nativeTheme.themeSource === "dark" ? "#0f0f0f" : "#ffffff",
+  windowControlsIconColor:
+    nativeTheme.themeSource === "dark" ? "#ffffff" : "#000000"
 };
 
 type ConfigKey = keyof typeof config;

apps/desktop/src/utils/custom-dns.ts

@@ -0,0 +1,37 @@
+/*
+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 { app } from "electron";
+
+export function enableCustomDns() {
+  app.configureHostResolver({
+    secureDnsServers: [
+      "https://mozilla.cloudflare-dns.com/dns-query",
+      "https://dns.quad9.net/dns-query"
+    ],
+    enableBuiltInResolver: true
+  });
+}
+
+export function disableCustomDns() {
+  app.configureHostResolver({
+    secureDnsServers: [],
+    enableBuiltInResolver: true
+  });
+}

apps/desktop/src/utils/protocol.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 { protocol } from "electron";
+import { net, protocol } from "electron";
 import { isDevelopment } from "./index";
 import { createReadStream } from "fs";
 import { extname, normalize } from "path";
@@ -62,26 +62,7 @@ function registerProtocol() {
         headers: { "Content-Type": extensionToMimeType[fileExtension] }
       });
     } else {
-      if (request.headers.has("X-Content-Length")) {
-        request.headers.set(
-          "Content-Length",
-          request.headers.get("X-Content-Length") || "0"
-        );
-        request.headers.delete("X-Content-Length");
-      }
-      const headers = Object.fromEntries(request.headers.entries());
-
-      return await fetch(request.url, {
-        signal: request.signal,
-        mode: request.mode,
-        headers,
-        method: request.method,
-        body: request.body,
-        credentials: request.credentials,
-        referrer: (request as any).referrer,
-        duplex: "half",
-        redirect: "manual"
-      });
+      return net.fetch(request, { bypassCustomProtocolHandlers: true });
     }
   });
   console.info(`${SCHEME} protocol inteception "successful"`);

apps/desktop/src/utils/theme.ts

@@ -41,7 +41,10 @@ function setTheme(theme: Theme) {
 }
 
 function getBackgroundColor() {
-  return nativeTheme.shouldUseDarkColors ? "#0f0f0f" : "#ffffff";
+  return (
+    config.backgroundColor ||
+    (nativeTheme.shouldUseDarkColors ? "#0f0f0f" : "#ffffff")
+  );
 }
 
 function getSystemTheme() {

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/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
@@ -43,9 +44,8 @@ const IOS_KEYCHAIN_ACCESS_GROUP = "group.org.streetwriters.notesnook";
 const IOS_KEYCHAIN_SERVICE_NAME = "org.streetwriters.notesnook";
 const KEYCHAIN_SERVER_DBKEY = "notesnook:db";
 
-const NOTESNOOK_APPLOCK_KEY_SALT = "3dqclWbOYllfk9kk";
-const NOTESNOOK_DB_KEY_SALT = "2rcgSprDmRvZ1AAa";
-const NOTESNOOK_USER_KEY_SALT = "7qO4qeoM6PbsAJ0Q";
+const NOTESNOOK_APPLOCK_KEY_SALT = "kBwr1Kre86ebOZ8ThLu2OA";
+const NOTESNOOK_DB_KEY_SALT = "SNuzOcEK3amoqL0WvPeKqw";
 
 const DB_KEY_CIPHER = "databaseKeyCipher";
 const USER_KEY_CIPHER = "userKeyCipher";
@@ -117,9 +117,7 @@ export async function setAppLockVerificationCipher(appLockPassword) {
       NOTESNOOK_APPLOCK_KEY_SALT
     );
     const encrypted = await encrypt(appLockCredentials, generatePassword());
-
     CipherStorage.setMap(APPLOCK_CIPHER, encrypted);
-
     DatabaseLogger.info("setAppLockVerificationCipher");
   } catch (e) {
     DatabaseLogger.error(e);
@@ -135,12 +133,9 @@ export async function validateAppLockPassword(appLockPassword) {
   try {
     const appLockCipher = CipherStorage.getMap(APPLOCK_CIPHER);
     if (!appLockCipher) return true;
-    const decrypted = await decrypt(
-      {
-        password: appLockPassword
-      },
-      appLockCipher
-    );
+    const key = await Sodium.deriveKey(appLockPassword, appLockCipher.salt);
+    const decrypted = await decrypt(key, appLockCipher);
+
     DatabaseLogger.info(
       `validateAppLockPassword: ${typeof decrypted === "string"}`
     );
@@ -215,7 +210,7 @@ export async function getDatabaseKey(appLockPassword) {
         const userKeyCipher = await encrypt(
           {
             key: DB_KEY,
-            salt: NOTESNOOK_USER_KEY_SALT
+            salt: NOTESNOOK_DB_KEY_SALT
           },
           userKeyCredentials.password
         );
@@ -228,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;
@@ -240,7 +236,7 @@ export async function deriveCryptoKey(data) {
     const userKeyCipher = await encrypt(
       {
         key: await getDatabaseKey(),
-        salt: NOTESNOOK_USER_KEY_SALT
+        salt: NOTESNOOK_DB_KEY_SALT
       },
       credentials.key
     );
@@ -265,13 +261,12 @@ export async function getCryptoKey(_name) {
 
     const key = await decrypt(
       {
-        key: await getDatabaseKey()
+        key: await getDatabaseKey(),
+        salt: keyCipher.salt
       },
       keyCipher
     );
 
-    DatabaseLogger.info("User key decrypted: ", !!key);
-
     return key;
   } catch (e) {
     console.log("getCryptoKey", e);
@@ -319,7 +314,6 @@ export async function decrypt(password, data) {
   _data.output = "plain";
 
   if (!password.salt) password.salt = data.salt;
-
   return await Sodium.decrypt(password, _data);
 }
 

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

@@ -85,4 +85,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,30 @@ 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";
+import { SqliteAdapter, SqliteIntrospector, SqliteQueryCompiler } from "kysely";
+import { Platform } from "react-native";
+import { setLogger } from ".";
+import { RNSqliteDriver } from "./sqlite.kysely";
 
-const LoggerStorage = new MMKVLoader()
-  .withInstanceID("notesnook_logs")
-  .initialize();
+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;
+};
 
-initialize(new KV(LoggerStorage));
-
-export { LoggerStorage };
+export { initializeLogger };

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

@@ -218,12 +218,7 @@ export default async function downloadAttachment(
     }
 
     if (options.base64 || options.text) {
-      console.log(
-        "starting decrypt base64 file...",
-        options.base64,
-        options.text,
-        attachment.hash
-      );
+      DatabaseLogger.log(`Starting to decrypt... hash: ${attachment.hash}`);
       return await db.attachments.read(
         attachment.hash,
         options.base64 ? "base64" : "text"
@@ -292,7 +287,7 @@ export default async function downloadAttachment(
 
     return fileUri;
   } catch (e) {
-    console.log("download attachment error: ", e);
+    DatabaseLogger.error(e);
     if (attachment.dateUploaded) {
       RNFetchBlob.fs
         .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}`)

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

@@ -22,21 +22,24 @@ 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 { db } from "../database";
+import { DatabaseLogger, db } from "../database";
 import { cacheDir, fileCheck } from "./utils";
 import { createCacheDir, exists } from "./io";
 
 export async function downloadFile(filename, data, cancelToken) {
-  if (!data) return false;
+  if (!data) {
+    DatabaseLogger.log(`Error downloading file: ${filename}, reason: No data`);
+    return false;
+  }
 
-  console.log("Downloading", filename);
+  DatabaseLogger.log(`Downloading ${filename}`);
   await createCacheDir();
   let { url, headers } = data;
   let path = `${cacheDir}/${filename}`;
 
   try {
     if (await exists(filename)) {
-      console.log("Exists already", filename);
+      DatabaseLogger.log(`File Exists already: ${filename}`);
       return true;
     }
 
@@ -44,13 +47,24 @@ export async function downloadFile(filename, data, cancelToken) {
       method: "GET",
       headers
     });
-    if (!res.ok)
+
+    if (!res.ok) {
+      DatabaseLogger.log(
+        `Error downloading file: ${filename}, ${res.status}, ${res.statusText}, reason: Unable to resolve download url`
+      );
       throw new Error(`${res.status}: Unable to resolve download url`);
+    }
+
     const downloadUrl = await res.text();
 
-    if (!downloadUrl) throw new Error("Unable to resolve download url");
+    if (!downloadUrl) {
+      DatabaseLogger.log(
+        `Error downloading file: ${filename}, reason: Unable to resolve download url`
+      );
+      throw new Error("Unable to resolve download url");
+    }
     let totalSize = 0;
-    console.log("Download starting");
+    DatabaseLogger.log(`Download starting: ${filename}`);
     let request = RNFetchBlob.config({
       path: path,
       IOSBackgroundTask: true
@@ -61,13 +75,15 @@ export async function downloadFile(filename, data, cancelToken) {
           .getState()
           .setProgress(0, total, filename, recieved, "download");
         totalSize = total;
-        console.log("downloading: ", recieved, total);
+        DatabaseLogger.log(`Downloading: ${filename}, ${recieved}/${total}`);
       });
 
     cancelToken.cancel = () => {
       useAttachmentStore.getState().remove(filename);
       request.cancel();
+      DatabaseLogger.log(`Download cancelled: ${filename}`);
     };
+
     let response = await request;
     await fileCheck(response, totalSize);
     let status = response.info().status;
@@ -91,7 +107,10 @@ export async function downloadFile(filename, data, cancelToken) {
 
     useAttachmentStore.getState().remove(filename);
     RNFetchBlob.fs.unlink(path).catch(console.log);
-    console.log("Download file error:", e, url, headers);
+    DatabaseLogger.error(e, {
+      url,
+      headers
+    });
     return false;
   }
 }
@@ -100,18 +119,17 @@ 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) {
-    return 0;
+    DatabaseLogger.error(e);
+    return -1;
   }
 }
 
@@ -125,7 +143,9 @@ export async function checkAttachment(hash) {
 
   try {
     const size = await getUploadedFileSize(hash);
-    if (size <= 0) return { failed: "File length is 0." };
+    if (size === -1) return { success: true };
+
+    if (size === 0) return { failed: "File length is 0." };
   } catch (e) {
     return { failed: e?.message };
   }

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

@@ -21,12 +21,12 @@ import Sodium from "@ammarahmed/react-native-sodium";
 import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import { IOS_APPGROUPID } from "../../utils/constants";
-import { db } from "../database";
+import { DatabaseLogger, db } from "../database";
 import { cacheDir, cacheDirOld, getRandomId } from "./utils";
 
 export async function readEncrypted(filename, key, cipherData) {
   await migrateFilesFromCache();
-  console.log("Read encrypted file...");
+  DatabaseLogger.log("Read encrypted file...");
   let path = `${cacheDir}/${filename}`;
 
   try {
@@ -34,8 +34,6 @@ export async function readEncrypted(filename, key, cipherData) {
       return false;
     }
 
-    const attachment = await db.attachments.attachment(filename);
-    console.log("decrypting....");
     let output = await Sodium.decryptFile(
       key,
       {
@@ -45,12 +43,13 @@ export async function readEncrypted(filename, key, cipherData) {
       },
       cipherData.outputType === "base64" ? "base64" : "text"
     );
-    console.log("file decrypted...", attachment?.mimeType);
+
+    DatabaseLogger.log("File decrypted...");
 
     return output;
   } catch (e) {
     RNFetchBlob.fs.unlink(path).catch(console.log);
-    console.log("readEncrypted", e);
+    DatabaseLogger.error(e);
     return false;
   }
 }
@@ -67,7 +66,7 @@ export async function hashBase64(data) {
   };
 }
 
-export async function writeEncryptedBase64({ data, key }) {
+export async function writeEncryptedBase64(data, key) {
   await createCacheDir();
   let filepath = cacheDir + `/${getRandomId("imagecache_")}`;
   await RNFetchBlob.fs.writeFile(filepath, data, "base64");
@@ -77,6 +76,8 @@ export async function writeEncryptedBase64({ data, key }) {
   });
   RNFetchBlob.fs.unlink(filepath).catch(console.log);
   console.log("encrypted file output: ", output);
+  output.size = output.length;
+  delete output.length;
   return {
     ...output,
     alg: "xcha-stream"
@@ -126,7 +127,7 @@ export async function clearFileStorage() {
 export async function createCacheDir() {
   if (!(await RNFetchBlob.fs.exists(cacheDir))) {
     await RNFetchBlob.fs.mkdir(cacheDir);
-    console.log("Cache directory created");
+    DatabaseLogger.log("Cache directory created");
   }
 }
 
@@ -186,6 +187,9 @@ export async function exists(filename) {
     );
 
     if (stat.size !== expectedFileSize) {
+      DatabaseLogger.log(
+        `File size mismatch: ${filename}, expected: ${expectedFileSize}, actual: ${stat.size}`
+      );
       RNFetchBlob.fs
         .unlink(existsInAppGroup ? appGroupPath : path)
         .catch(console.log);

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

@@ -25,6 +25,8 @@ import { isImage, isDocument } from "@notesnook/core/dist/utils/filename";
 import { Platform } from "react-native";
 import { IOS_APPGROUPID } from "../../utils/constants";
 import { createCacheDir } from "./io";
+import { getUploadedFileSize } from "./download";
+import { ToastManager } from "../../services/event-manager";
 
 export async function uploadFile(filename, data, cancelToken) {
   if (!data) return false;
@@ -33,13 +35,31 @@ export async function uploadFile(filename, data, cancelToken) {
   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");
+
+    const uploadUrl = res.ok ? await res.text() : await res.json();
+
+    if (typeof uploadUrl !== "string") {
+      throw new Error(
+        uploadUrl.error || "Unable to resolve attachment upload url."
+      );
+    }
+
     let uploadFilePath = `${cacheDir}/${filename}`;
 
     const iosAppGroup =
@@ -50,7 +70,15 @@ export async function uploadFile(filename, data, cancelToken) {
     let exists = await RNFetchBlob.fs.exists(uploadFilePath);
     if (!exists && Platform.OS === "ios") {
       uploadFilePath = appGroupPath;
+      exists = await RNFetchBlob.fs.exists(uploadFilePath);
     }
+
+    if (!exists) {
+      throw new Error(
+        `Trying to upload file at path ${uploadFilePath} that doest not exist.`
+      );
+    }
+
     DatabaseLogger.info(`Starting upload: ${filename}`);
 
     let request = RNFetchBlob.config({
@@ -104,8 +132,10 @@ export async function uploadFile(filename, data, cancelToken) {
     return result;
   } 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/components/announcements/cta.js

@@ -20,15 +20,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { Linking, View } from "react-native";
 //import SettingsBackupAndRestore from '../../screens/settings/backup-restore';
-import { eSendEvent, presentSheet } from "../../services/event-manager";
-import Sync from "../../services/sync";
 import { useThemeColors } from "@notesnook/theme";
-import { eCloseAnnouncementDialog, eCloseSheet } from "../../utils/events";
+import { eSendEvent, presentSheet } from "../../services/event-manager";
+import { eCloseAnnouncementDialog } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { PricingPlans } from "../premium/pricing-plans";
 import SheetProvider from "../sheet-provider";
-import { Progress } from "../sheets/progress";
 import { Button } from "../ui/button";
 import { allowedOnPlatform, getStyle } from "./functions";
 
@@ -56,13 +54,6 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
           />
         )
       });
-    } else if (item.type === "force-sync") {
-      eSendEvent(eCloseSheet);
-      await sleep(300);
-      Progress.present();
-      Sync.run("global", true, true, () => {
-        eSendEvent(eCloseSheet);
-      });
     }
   };
   return (

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 { 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,
@@ -34,17 +39,20 @@ import {
 import { MMKV } from "../../common/database/mmkv";
 import { useAppState } from "../../hooks/use-app-state";
 import BiometricService from "../../services/biometrics";
+import { ToastManager } from "../../services/event-manager";
 import SettingsService from "../../services/settings";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { NotesnookModule } from "../../utils/notesnook-module";
 import { SIZE } from "../../utils/size";
+import { Toast } from "../toast";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 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");
@@ -74,6 +82,7 @@ const verifyUserPassword = async (password: string) => {
 };
 
 const AppLockedOverlay = () => {
+  const initialLaunchBiometricRequest = useRef(true);
   const { colors } = useThemeColors();
   const user = getUser();
   const appLocked = useUserStore((state) => state.appLocked);
@@ -82,7 +91,9 @@ const AppLockedOverlay = () => {
   const passwordInputRef = useRef<TextInput>(null);
   const password = useRef<string>();
   const appState = useAppState();
+  const lastAppState = useRef<AppStateStatus>(appState);
   const biometricUnlockAwaitingUserInput = useRef(false);
+  const { height } = useWindowDimensions();
   const keyboardType = useSettingStore(
     (state) => state.settings.applockKeyboardType
   );
@@ -117,7 +128,6 @@ const AppLockedOverlay = () => {
     );
     if (unlocked) {
       lockApp(false);
-      enabled(false);
       password.current = undefined;
     }
     biometricUnlockAwaitingUserInput.current = false;
@@ -131,9 +141,8 @@ const AppLockedOverlay = () => {
     if (!password.current) return;
     try {
       const unlocked = appLockHasPasswordSecurity
-        ? validateAppLockPassword(password.current)
+        ? await validateAppLockPassword(password.current)
         : await verifyUserPassword(password.current);
-
       if (unlocked) {
         if (!appLockHasPasswordSecurity) {
           await setAppLockVerificationCipher(password.current);
@@ -145,8 +154,13 @@ const AppLockedOverlay = () => {
         }
 
         lockApp(false);
-        enabled(false);
         password.current = undefined;
+      } else {
+        ToastManager.show({
+          heading: `Invalid ${keyboardType === "numeric" ? "pin" : "password"}`,
+          type: "error",
+          context: "local"
+        });
       }
     } catch (e) {
       console.error(e);
@@ -154,32 +168,53 @@ const AppLockedOverlay = () => {
   };
 
   useEffect(() => {
+    const prevState = lastAppState.current;
+    lastAppState.current = appState;
+
     if (
-      biometricUnlockAwaitingUserInput.current ||
-      useUserStore.getState().disableAppLockRequests
-    )
-      return;
-    if (
-      appLocked &&
       appState === "active" &&
-      !useSettingStore.getState().requestBiometrics
+      (prevState === "background" || initialLaunchBiometricRequest.current)
     ) {
-      biometricUnlockAwaitingUserInput.current = true;
-      onUnlockAppRequested();
+      if (SettingsService.shouldLockAppOnEnterForeground()) {
+        DatabaseLogger.info("Locking app on entering foreground");
+        useUserStore.getState().lockApp(true);
+      }
+
+      if (
+        !(
+          biometricUnlockAwaitingUserInput.current ||
+          useUserStore.getState().disableAppLockRequests ||
+          !appLocked ||
+          useSettingStore.getState().requestBiometrics ||
+          useSettingStore.getState().appDidEnterBackgroundForAction
+        )
+      ) {
+        initialLaunchBiometricRequest.current = false;
+        DatabaseLogger.info("Biometric unlock request");
+        onUnlockAppRequested();
+      }
+    } else {
+      SettingsService.appEnteredBackground();
     }
   }, [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
         style={{
           flex: 1,
@@ -292,7 +327,7 @@ const AppLockedOverlay = () => {
           </View>
         </View>
       </View>
-    </View>
+    </KeyboardAwareScrollView>
   ) : null;
 };
 

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

@@ -56,6 +56,7 @@ 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,
@@ -218,10 +219,11 @@ const Actions = ({
       }}
     >
       <Dialog context={contextId} />
+      <SheetProvider context={contextId} />
       <View
         style={{
           borderBottomWidth: 1,
-          borderBottomColor: colors.secondary.background,
+          borderBottomColor: colors.primary.border,
           marginBottom: notes && notes.length > 0 ? 0 : 12
         }}
       >
@@ -238,36 +240,20 @@ const Actions = ({
           style={{
             flexDirection: "row",
             marginBottom: 10,
-            paddingHorizontal: 12
+            paddingHorizontal: 12,
+            marginTop: 6,
+            gap: 10
           }}
         >
-          <Paragraph
-            size={SIZE.xs}
-            style={{
-              marginRight: 10
-            }}
-            color={colors.secondary.paragraph}
-          >
-            {attachment.type}
+          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+            {attachment.mimeType}
           </Paragraph>
-          <Paragraph
-            style={{
-              marginRight: 10
-            }}
-            size={SIZE.xs}
-            color={colors.secondary.paragraph}
-          >
+          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
             {formatBytes(attachment.size)}
           </Paragraph>
 
           {notes.length ? (
-            <Paragraph
-              style={{
-                marginRight: 10
-              }}
-              size={SIZE.xs}
-              color={colors.secondary.paragraph}
-            >
+            <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
               {notes.length} note
               {notes.length > 1 ? "s" : ""}
             </Paragraph>
@@ -295,7 +281,7 @@ const Actions = ({
         <View
           style={{
             borderBottomWidth: 1,
-            borderBottomColor: colors.secondary.background,
+            borderBottomColor: colors.primary.border,
             marginBottom: 12,
             paddingVertical: 12
           }}
@@ -366,7 +352,7 @@ const Actions = ({
         {failed ? (
           <Notice
             type="alert"
-            text={`File check failed with error: ${attachment.failed} Try reuploading the file to fix the issue.`}
+            text={`File check failed: ${failed} Try reuploading the file to fix the issue.`}
             size="small"
           />
         ) : null}

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

@@ -177,7 +177,7 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
       case "audio":
         items = note
           ? db.attachments.ofNote(note.id, "audio")
-          : db.attachments.all;
+          : db.attachments.audios;
         break;
       case "documents":
         items = note
@@ -355,6 +355,7 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
 
 AttachmentDialog.present = (note?: Note) => {
   presentSheet({
-    component: () => <AttachmentDialog note={note} />
+    component: () => <AttachmentDialog note={note} />,
+    keyboardHandlerDisabled: true
   });
 };

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,10 +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";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -66,7 +66,7 @@ export const Login = ({ changeMode }) => {
     Progress.present();
     setTimeout(() => {
       if (!useUserStore.getState().syncing) {
-        Sync.run("global", false, true);
+        Sync.run("global", false, "full");
       }
     }, 5000);
   });
@@ -183,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();
+              }
             }}
           />
 
@@ -242,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/session-expired.js

@@ -112,7 +112,11 @@ export const SessionExpired = () => {
       if (!res) throw new Error("no token found");
       if (db.tokenManager._isTokenExpired(res))
         throw new Error("token expired");
-      Sync.run("global", false, true, async (complete) => {
+
+      const key = await db.user.getEncryptionKey();
+      if (!key) throw new Error("No encryption key found.");
+
+      Sync.run("global", false, "full", async (complete) => {
         if (!complete) {
           let user = await db.user.getUser();
           if (!user) return;
@@ -127,7 +131,6 @@ export const SessionExpired = () => {
         setVisible(false);
       });
     } catch (e) {
-      console.log(e);
       let user = await db.user.getUser();
       if (!user) return;
       email.current = user.email;

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/container/floating-button.tsx

@@ -18,6 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { useThemeColors } from "@notesnook/theme";
+import { useRoute } from "@react-navigation/native";
 import React, { useCallback, useEffect } from "react";
 import { Keyboard, View } from "react-native";
 import Animated, {
@@ -54,6 +55,7 @@ const FloatingButton = ({
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
   const translate = useSharedValue(0);
+  const route = useRoute();
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -140,7 +142,13 @@ const FloatingButton = ({
           }}
         >
           <Icon
-            name={title === "Clear all trash" ? "delete" : "plus"}
+            name={
+              route.name === "Notebooks"
+                ? "notebook-plus"
+                : route.name === "Trash"
+                ? "delete"
+                : "plus"
+            }
             color={colors.primary.accentForeground}
             size={SIZE.xxl}
           />

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

@@ -21,14 +21,16 @@ import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 import { Dimensions, Platform, View, useWindowDimensions } from "react-native";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import useKeyboard from "../../hooks/use-keyboard";
+import { useThemeColors } from "@notesnook/theme";
 
 export const Container = ({ children }: PropsWithChildren) => {
+  const { colors } = useThemeColors();
   const insets = useGlobalSafeAreaInsets();
   const keyboard = useKeyboard();
   const [height, setHeight] = useState(0);
   const windowHeightRef = useRef(Dimensions.get("window").height);
   const { height: windowHeight } = useWindowDimensions();
-
+  const timerRef = useRef<NodeJS.Timeout>();
   useEffect(() => {
     if (windowHeight !== windowHeightRef.current) {
       setHeight(0);
@@ -43,12 +45,17 @@ export const Container = ({ children }: PropsWithChildren) => {
         paddingTop: Platform.OS === "android" ? 0 : insets.top,
         paddingBottom: Platform.OS === "android" ? 0 : insets.bottom,
         height: height || "100%",
-        width: "100%"
+        width: "100%",
+        backgroundColor: colors.primary.background
       }}
       onLayout={(event) => {
-        if (!keyboard.keyboardShown) {
-          setHeight(event.nativeEvent.layout.height);
-        }
+        const height = event.nativeEvent.layout.height;
+        clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+          if (!keyboard.keyboardShown) {
+            setHeight(height);
+          }
+        }, 500);
       }}
     >
       {children}

apps/mobile/app/components/dialog/dialog-buttons.js

@@ -45,8 +45,8 @@ const DialogButtons = ({
         {
           backgroundColor: colors.secondary.background,
           height: 60,
-          borderBottomRightRadius: 10,
-          borderBottomLeftRadius: 10,
+          borderBottomRightRadius: 5,
+          borderBottomLeftRadius: 5,
           paddingHorizontal: 12,
           borderTopWidth: 0.7,
           borderTopColor: getColorLinearShade(

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

@@ -44,6 +44,7 @@ type DialogInfo = {
   // eslint-disable-next-line @typescript-eslint/ban-types
   context: "global" | "local" | (string & {});
   secureTextEntry?: boolean;
+  keyboardType?: string;
 };
 
 export function presentDialog(data: Partial<DialogInfo>): void {

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

@@ -36,6 +36,7 @@ import DialogButtons from "./dialog-buttons";
 import DialogHeader from "./dialog-header";
 import { useCallback } from "react";
 import { Button } from "../ui/button";
+import { getContainerBorder } from "../../utils/colors";
 
 export const Dialog = ({ context = "global" }) => {
   const { colors } = useThemeColors();
@@ -121,7 +122,8 @@ export const Dialog = ({ context = "global" }) => {
     maxHeight: 450,
     borderRadius: 5,
     backgroundColor: colors.primary.background,
-    paddingTop: 12
+    paddingTop: 12,
+    ...getContainerBorder(colors.primary.border, 0.5)
   };
 
   return visible ? (
@@ -172,6 +174,7 @@ export const Dialog = ({ context = "global" }) => {
               onSubmit={onPressPositive}
               returnKeyLabel="Done"
               returnKeyType="done"
+              keyboardType={dialogInfo.keyboardType || "default"}
               placeholder={dialogInfo.inputPlaceholder}
             />
           </View>

apps/mobile/app/components/dialogs/applock-password/index.tsx

@@ -19,12 +19,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useRef, useState } from "react";
 import { TextInput, View } from "react-native";
+import { db } from "../../../common/database";
 import {
   clearAppLockVerificationCipher,
   setAppLockVerificationCipher,
   validateAppLockPassword
 } from "../../../common/database/encryption";
-import BiometicService from "../../../services/biometrics";
+import BiometricService from "../../../services/biometrics";
 import { DDS } from "../../../services/device-detection";
 import {
   ToastManager,
@@ -44,6 +45,7 @@ import BaseDialog from "../../dialog/base-dialog";
 import DialogButtons from "../../dialog/dialog-buttons";
 import DialogHeader from "../../dialog/dialog-header";
 import { Toast } from "../../toast";
+import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
 import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
@@ -66,6 +68,7 @@ export const AppLockPassword = () => {
     confirmPassword?: string;
   }>({});
   const [secureTextEntry, setSecureTextEntry] = useState(true);
+  const [accountPass, setAccountPass] = useState(false);
 
   useEffect(() => {
     const subs = [
@@ -73,6 +76,7 @@ export const AppLockPassword = () => {
         eOpenAppLockPasswordDialog,
         (mode: "create" | "change" | "remove") => {
           setMode(mode);
+          setAccountPass(false);
           setVisible(true);
         }
       ),
@@ -126,7 +130,9 @@ export const AppLockPassword = () => {
             mode === "change"
               ? `Change app lock ${keyboardType}`
               : mode === "remove"
-              ? `Remove app lock ${keyboardType}`
+              ? `Enter ${
+                  accountPass ? "account password" : `app lock ${keyboardType}`
+                } to remove ${keyboardType}`
               : `Set up a custom app lock ${keyboardType} to unlock the app`
           }
           icon="shield"
@@ -169,33 +175,39 @@ export const AppLockPassword = () => {
               confirmPasswordInputRef.current?.focus();
             }}
             defaultValue={values.current.password}
-            keyboardType={keyboardType === "pin" ? "number-pad" : "default"}
+            keyboardType={
+              keyboardType === "pin" && !accountPass ? "number-pad" : "default"
+            }
             autoComplete="password"
             returnKeyLabel={mode !== "remove" ? "Next" : "Remove"}
             returnKeyType={mode !== "remove" ? "next" : "done"}
             secureTextEntry={secureTextEntry}
             buttonLeft={
-              <IconButton
-                name={keyboardType === "password" ? "numeric" : "keyboard"}
-                onPress={() => {
-                  setKeyboardType(
-                    keyboardType === "password" ? "pin" : "password"
-                  );
-                  setSecureTextEntry(false);
-                  setImmediate(() => {
-                    setSecureTextEntry(true);
-                  });
-                }}
-                style={{
-                  width: 25,
-                  height: 25,
-                  marginRight: 5
-                }}
-                size={SIZE.lg}
-              />
+              accountPass ? null : (
+                <IconButton
+                  name={keyboardType === "password" ? "numeric" : "keyboard"}
+                  onPress={() => {
+                    setKeyboardType(
+                      keyboardType === "password" ? "pin" : "password"
+                    );
+                    setSecureTextEntry(false);
+                    setImmediate(() => {
+                      setSecureTextEntry(true);
+                    });
+                  }}
+                  style={{
+                    width: 25,
+                    height: 25,
+                    marginRight: 5
+                  }}
+                  size={SIZE.lg}
+                />
+              )
             }
             placeholder={
-              mode === "change"
+              accountPass
+                ? "Account password"
+                : mode === "change"
                 ? `New ${keyboardType}`
                 : `${keyboardType === "pin" ? "Pin" : "Password"}`
             }
@@ -222,6 +234,36 @@ export const AppLockPassword = () => {
               placeholder={`Confirm ${keyboardType}`}
             />
           ) : null}
+
+          {mode === "remove" ? (
+            <>
+              <Button
+                icon={
+                  accountPass ? "checkbox-marked" : "checkbox-blank-outline"
+                }
+                onPress={() => {
+                  setSecureTextEntry(false);
+                  setAccountPass(!accountPass);
+                  setTimeout(() => {
+                    setSecureTextEntry(true);
+                  });
+                }}
+                iconSize={SIZE.lg}
+                type="plain"
+                iconColor={
+                  accountPass ? colors.primary.accent : colors.primary.icon
+                }
+                title="Use account password instead"
+                style={{
+                  width: "100%",
+                  alignSelf: "flex-start",
+                  justifyContent: "flex-start",
+                  paddingHorizontal: 0,
+                  height: 30
+                }}
+              />
+            </>
+          ) : null}
         </View>
 
         <DialogButtons
@@ -249,7 +291,8 @@ export const AppLockPassword = () => {
                 );
                 return;
               }
-              await setAppLockVerificationCipher(values.current.password);
+              const password = values.current.password;
+              setAppLockVerificationCipher(password);
               SettingsService.setProperty("appLockHasPasswordSecurity", true);
             } else if (mode === "change") {
               if (
@@ -277,7 +320,6 @@ export const AppLockPassword = () => {
                 );
                 return;
               }
-
               const isCurrentPasswordCorrect = await validateAppLockPassword(
                 values.current.currentPassword
               );
@@ -293,8 +335,10 @@ export const AppLockPassword = () => {
                 return;
               }
 
+              const password = values.current.password;
+              await clearAppLockVerificationCipher();
               SettingsService.setProperty("appLockHasPasswordSecurity", true);
-              await setAppLockVerificationCipher(values.current.password);
+              await setAppLockVerificationCipher(password);
             } else if (mode === "remove") {
               if (!values.current.password) {
                 ToastManager.error(
@@ -305,15 +349,20 @@ export const AppLockPassword = () => {
                 return;
               }
 
-              const isCurrentPasswordCorrect = await validateAppLockPassword(
-                values.current.password
-              );
+              const isCurrentPasswordCorrect = accountPass
+                ? await db.user.verifyPassword(values.current.password)
+                : await validateAppLockPassword(values.current.password);
 
               if (!isCurrentPasswordCorrect) {
                 ToastManager.error(
                   new Error(
-                    `${keyboardType === "pin" ? "Pin" : "Password"} incorrect`
+                    accountPass
+                      ? "Account password incorrect"
+                      : `${
+                          keyboardType === "pin" ? "Pin" : "Password"
+                        } incorrect`
                   ),
+                  undefined,
                   "local"
                 );
                 return;
@@ -322,10 +371,11 @@ export const AppLockPassword = () => {
               SettingsService.setProperty("appLockHasPasswordSecurity", false);
 
               if (
-                !(await BiometicService.isBiometryAvailable()) ||
+                !(await BiometricService.isBiometryAvailable()) ||
                 SettingsService.getProperty("biometricsAuthEnabled") === false
               ) {
                 SettingsService.setProperty("appLockEnabled", false);
+                SettingsService.setPrivacyScreen(SettingsService.get());
                 ToastManager.show({
                   message: "App lock disabled",
                   type: "success"
@@ -340,7 +390,9 @@ export const AppLockPassword = () => {
 
             close();
           }}
-          positiveTitle="Save"
+          positiveTitle={
+            mode === "remove" ? "Remove" : mode === "change" ? "Change" : "Save"
+          }
           negativeTitle="Cancel"
           positiveType="transparent"
           loading={false}

apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx

@@ -17,8 +17,14 @@ 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, { useState } from "react";
-import { Image, ScrollView, TouchableOpacity, View } from "react-native";
-import { ImagePickerResponse } from "react-native-image-picker";
+import {
+  Image,
+  Platform,
+  ScrollView,
+  TouchableOpacity,
+  View
+} from "react-native";
+import { Image as ImageType } from "react-native-image-crop-picker";
 import { useThemeColors } from "../../../../../../packages/theme/dist";
 import { presentSheet } from "../../../services/event-manager";
 import { SIZE } from "../../../utils/size";
@@ -32,7 +38,7 @@ export default function AttachImage({
   onAttach,
   close
 }: {
-  response: ImagePickerResponse;
+  response: ImageType[];
   onAttach: ({ compress }: { compress: boolean }) => void;
   close: ((ctx?: string | undefined) => void) | undefined;
 }) {
@@ -58,14 +64,17 @@ export default function AttachImage({
         }}
       >
         <Paragraph style={{ color: colors.primary.paragraph, marginBottom: 6 }}>
-          Attaching {response.assets?.length} image(s):
+          Attaching {response?.length} image(s):
         </Paragraph>
         <ScrollView horizontal>
-          {response.assets?.map((item) => (
-            <TouchableOpacity key={item.fileName} activeOpacity={0.9}>
+          {response?.map?.((item) => (
+            <TouchableOpacity key={item.filename} activeOpacity={0.9}>
               <Image
                 source={{
-                  uri: item.uri
+                  uri:
+                    Platform.OS === "ios"
+                      ? item.sourceURL || item.path
+                      : item.path
                 }}
                 style={{
                   width: 100,
@@ -142,7 +151,7 @@ export default function AttachImage({
 
       <Button
         title={`${
-          (response.assets?.length || 0) > 1 ? "Attach Images" : "Attach Image"
+          (response?.length || 0) > 1 ? "Attach Images" : "Attach Image"
         }`}
         type="accent"
         width="100%"
@@ -156,10 +165,16 @@ export default function AttachImage({
   );
 }
 
-AttachImage.present = (response: ImagePickerResponse) => {
-  return new Promise((resolve) => {
+AttachImage.present = (response: ImageType[], context?: string) => {
+  return new Promise<
+    | {
+        compress: boolean;
+      }
+    | undefined
+  >((resolve) => {
     let resolved = false;
     presentSheet({
+      context: context,
       component: (ref, close, update) => (
         <AttachImage
           response={response}

apps/mobile/app/components/dialogs/color-picker/index.tsx

@@ -75,7 +75,7 @@ const ColorPicker = ({
             style={{
               width: "100%",
               height: 250,
-              backgroundColor: selectedColor,
+              backgroundColor: colors.primary.background,
               borderRadius: 10
             }}
           >
@@ -146,12 +146,16 @@ const ColorPicker = ({
               onChangeText={(value) => {
                 title.current = value;
               }}
+              testID="color-title-input"
               defaultValue={title.current}
               placeholder={title.current || "Color title"}
             />
 
             <Button
               title="Add color"
+              style={{
+                marginBottom: 10
+              }}
               onPress={async () => {
                 if (!selectedColor)
                   return ToastManager.error(
@@ -170,7 +174,6 @@ const ColorPicker = ({
                   return ToastManager.error(
                     new Error(`Color #${selectedColor} already exists`)
                   );
-
                 const id = await db.colors.add({
                   title: title.current,
                   colorCode: selectedColor

apps/mobile/app/components/dialogs/vault/index.js

@@ -128,7 +128,7 @@ export class VaultDialog extends Component {
           : this.state.copyNote
           ? "Unlock note to copy it. If biometrics are not working, you can enter device pin to unlock vault."
           : this.state.goToEditor
-          ? "Unlock note to open it in editor. If biometrics are not working, you can enter device pin to unlock vault."
+          ? "Unlock note to open it in editor."
           : "Enter vault password to unlock note. If biometrics are not working, you can enter device pin to unlock vault."
         : "Enter vault password to lock note. If biometrics are not working, you can enter device pin to lock note.");
   }
@@ -586,7 +586,7 @@ export class VaultDialog extends Component {
   }
 
   async _copyNote(note) {
-    Clipboard.setString(await convertNoteToText(note));
+    Clipboard.setString((await convertNoteToText(note, true)) || "");
     ToastManager.show({
       heading: "Note copied",
       type: "success",
@@ -602,7 +602,7 @@ export class VaultDialog extends Component {
       await Share.open({
         heading: "Share note",
         failOnCancel: false,
-        message: await convertNoteToText(note)
+        message: (await convertNoteToText(note)) || ""
       });
     } catch (e) {
       console.error(e);

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

@@ -33,6 +33,7 @@ import { eScrollEvent } from "../../utils/events";
 import { LeftMenus } from "./left-menus";
 import { RightMenus } from "./right-menus";
 import { Title } from "./title";
+import { useNavigation } from "@react-navigation/native";
 
 type HeaderRightButton = {
   title: string;
@@ -66,6 +67,8 @@ 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

@@ -71,7 +71,7 @@ export const RightMenus = ({
           testID={notesnook.ids.default.addBtn}
           icon={renderedInRoute === "Trash" ? "delete" : "plus"}
           iconSize={SIZE.xl}
-          type="shade"
+          type="accent"
           hitSlop={{
             top: 10,
             right: 10,
@@ -82,7 +82,7 @@ export const RightMenus = ({
             marginLeft: 10,
             width: 32,
             height: 32,
-            borderRadius: 5,
+            borderRadius: 100,
             paddingHorizontal: 0,
             borderWidth: 1,
             borderColor: colors.primary.accent

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

@@ -19,10 +19,12 @@ 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 { useThemeColors } from "@notesnook/theme";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Platform, View } from "react-native";
 import ImageViewer from "react-native-image-zoom-viewer";
+import { db } from "../../common/database";
 import downloadAttachment from "../../common/filesystem/download-attachment";
 import { cacheDir } from "../../common/filesystem/utils";
 import {
@@ -32,13 +34,13 @@ import {
 import BaseDialog from "../dialog/base-dialog";
 import { IconButton } from "../ui/icon-button";
 import { ProgressBarComponent } from "../ui/svg/lazy";
-import type { ImageAttributes } from "@notesnook/editor/dist/extensions/image/index";
 const ImagePreview = () => {
   const { colors } = useThemeColors("dialog");
 
   const [visible, setVisible] = useState(false);
   const [image, setImage] = useState<string>();
   const [loading, setLoading] = useState(false);
+  const imageRef = useRef<ImageAttributes>();
 
   useEffect(() => {
     eSubscribeEvent("ImagePreview", open);
@@ -48,6 +50,7 @@ const ImagePreview = () => {
   }, []);
 
   const open = async (image: ImageAttributes) => {
+    imageRef.current = image;
     setVisible(true);
     setLoading(true);
     setTimeout(async () => {
@@ -60,6 +63,9 @@ const ImagePreview = () => {
           type: "base64",
           uri: ""
         });
+        if (imageRef.current) {
+          imageRef.current.hash = hash;
+        }
       }
       if (!hash) return;
       //@ts-ignore // FIX ME
@@ -80,7 +86,13 @@ const ImagePreview = () => {
 
   return (
     visible && (
-      <BaseDialog animation="slide" visible={true} onRequestClose={close}>
+      <BaseDialog
+        background="black"
+        animation="slide"
+        visible={true}
+        onRequestClose={close}
+        transparent
+      >
         <View
           style={{
             width: "100%",
@@ -101,6 +113,21 @@ const ImagePreview = () => {
                 color={colors.primary.accent}
                 borderColor="transparent"
               />
+              <IconButton
+                onPress={() => {
+                  if (imageRef.current?.hash) {
+                    db.fs().cancel(imageRef.current?.hash);
+                  }
+                  close();
+                }}
+                style={{
+                  position: "absolute",
+                  top: Platform.OS === "android" ? 35 : 0,
+                  right: 12
+                }}
+                color={colors.static.white}
+                name="close"
+              />
             </View>
           ) : (
             <ImageViewer
@@ -117,13 +144,12 @@ const ImagePreview = () => {
                     width: "100%",
                     justifyContent: "flex-end",
                     alignItems: "center",
-                    height: 80,
-                    marginTop: 0,
-                    paddingHorizontal: 12,
+                    height: 50,
+                    paddingHorizontal: 24,
                     position: "absolute",
                     zIndex: 999,
                     backgroundColor: "rgba(0,0,0,0.3)",
-                    paddingTop: Platform.OS === "android" ? 30 : 0
+                    marginTop: Platform.OS === "android" ? 30 : 0
                   }}
                 >
                   <IconButton
@@ -137,7 +163,7 @@ const ImagePreview = () => {
               )}
               imageUrls={[
                 {
-                  url: image
+                  url: image as string
                 }
               ]}
             />

apps/mobile/app/components/list-items/footer/index.js

@@ -19,6 +19,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { View } from "react-native";
 import React from "react";
-export const Footer = () => {
-  return <View style={{ height: 150 }} />;
+export const Footer = ({ height = 150 }) => {
+  return <View style={{ height: height }} />;
 };

apps/mobile/app/components/list-items/headers/notebook-header.tsx

@@ -95,7 +95,7 @@ export const NotebookHeader = ({
           style={{
             flexShrink: 1
           }}
-          size={SIZE.xxl}
+          size={SIZE.lg}
         >
           {notebook.title}
         </Heading>
@@ -114,7 +114,7 @@ export const NotebookHeader = ({
               width: 40,
               height: 40
             }}
-            type={isPinnedToMenu ? "secondary" : "secondary"}
+            type="transparent"
             color={isPinnedToMenu ? colors.primary.accent : colors.primary.icon}
             size={SIZE.lg}
           />
@@ -123,7 +123,7 @@ export const NotebookHeader = ({
             onPress={onEditNotebook}
             tooltipText="Edit this notebook"
             name="pencil"
-            type="secondary"
+            type="transparent"
             color={colors.primary.icon}
             style={{
               width: 40,
@@ -134,7 +134,7 @@ export const NotebookHeader = ({
       </View>
 
       {notebook.description ? (
-        <Paragraph size={SIZE.md} color={colors.primary.paragraph}>
+        <Paragraph size={SIZE.sm} color={colors.primary.paragraph}>
           {notebook.description}
         </Paragraph>
       ) : null}
@@ -148,10 +148,6 @@ export const NotebookHeader = ({
         size={SIZE.xs}
         color={colors.secondary.paragraph}
       >
-        {/* {notebook.topics.length === 1
-          ? "1 topic"
-          : `${notebook.topics.length} topics`}
-        ,{" "} */}
         {notebook && totalNotes > 1
           ? totalNotes + " notes"
           : totalNotes === 1

apps/mobile/app/components/list-items/headers/section-header.tsx

@@ -25,7 +25,7 @@ import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enab
 import { presentSheet } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
 import { RouteName } from "../../../stores/use-navigation-store";
-import { ColorValues, getContainerBorder } from "../../../utils/colors";
+import { getContainerBorder } from "../../../utils/colors";
 import { GROUP } from "../../../utils/constants";
 import { SIZE } from "../../../utils/size";
 import Sort from "../../sheets/sort";
@@ -96,13 +96,9 @@ export const SectionHeader = React.memo<
           }}
         >
           <Heading
-            color={
-              ColorValues[color?.toLowerCase() as keyof typeof ColorValues] ||
-              colors.primary.accent
-            }
+            color={color || colors.primary.accent}
             size={SIZE.sm}
             style={{
-              minWidth: 60,
               alignSelf: "center",
               textAlignVertical: "center"
             }}

apps/mobile/app/components/list-items/note/index.tsx

@@ -211,6 +211,31 @@ const NoteItem = ({
                     color={colors.error.accent}
                   />
                 ) : null}
+
+                {item.localOnly ? (
+                  <Icon
+                    testID="sync-off"
+                    name="sync-off"
+                    size={SIZE.sm}
+                    style={{
+                      marginRight: 6
+                    }}
+                    color={primaryColors.icon}
+                  />
+                ) : null}
+
+                {item.readonly ? (
+                  <Icon
+                    testID="pencil-lock"
+                    name="pencil-lock"
+                    size={SIZE.sm}
+                    style={{
+                      marginRight: 6
+                    }}
+                    color={primaryColors.icon}
+                  />
+                ) : null}
+
                 <TimeSince
                   style={{
                     fontSize: SIZE.xs,
@@ -226,12 +251,13 @@ const NoteItem = ({
                     style={{
                       flexDirection: "row",
                       alignItems: "center",
-                      marginRight: 6
+                      marginRight: 6,
+                      gap: 2
                     }}
                   >
                     <Icon
                       name="attachment"
-                      size={SIZE.md}
+                      size={SIZE.sm}
                       color={primaryColors.icon}
                     />
                     <Paragraph
@@ -271,7 +297,7 @@ const NoteItem = ({
                   <Icon
                     testID="icon-star"
                     name="star-outline"
-                    size={SIZE.md}
+                    size={SIZE.sm}
                     style={{
                       marginRight: 6
                     }}
@@ -288,7 +314,8 @@ const NoteItem = ({
                           height={23}
                           type="plain"
                           textStyle={{
-                            textDecorationLine: "underline"
+                            textDecorationLine: "underline",
+                            color: colors.secondary.paragraph
                           }}
                           hitSlop={{ top: 8, bottom: 12, left: 0, right: 0 }}
                           fontSize={SIZE.xs}
@@ -370,7 +397,7 @@ const NoteItem = ({
               <Icon
                 testID="icon-star"
                 name="star-outline"
-                size={SIZE.md}
+                size={SIZE.sm}
                 style={{
                   marginRight: 6
                 }}

apps/mobile/app/components/list-items/note/wrapper.tsx

@@ -28,13 +28,12 @@ import {
   hideSheet,
   presentSheet
 } from "../../../services/event-manager";
-import { useSelectionStore } from "../../../stores/use-selection-store";
 import { eOnLoadNote, eShowMergeDialog } from "../../../utils/events";
 import { tabBarRef } from "../../../utils/global-refs";
 
 import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
 import NotePreview from "../../note-history/preview";
-import SelectionWrapper from "../selection-wrapper";
+import SelectionWrapper, { selectItem } from "../selection-wrapper";
 
 export const openNote = async (
   item: Note,
@@ -47,21 +46,8 @@ export const openNote = async (
   if (!isTrash) {
     note = (await db.notes.note(item.id)) as Note;
   }
-  if (useSelectionStore.getState().selectionMode === item.type) {
-    const {
-      selectedItemsList,
-      selectionMode,
-      clearSelection,
-      setSelectedItem
-    } = useSelectionStore.getState();
 
-    if (selectedItemsList.length > 0 && selectionMode === item.type) {
-      setSelectedItem(note.id);
-    } else {
-      clearSelection();
-    }
-    return;
-  }
+  if (selectItem(item)) return;
 
   if (note.conflicted) {
     eSendEvent(eShowMergeDialog, note);

apps/mobile/app/components/list-items/notebook/wrapper.tsx

@@ -27,18 +27,12 @@ import Navigation from "../../../services/navigation";
 import { useSelectionStore } from "../../../stores/use-selection-store";
 import { useTrashStore } from "../../../stores/use-trash-store";
 import { presentDialog } from "../../dialog/functions";
-import SelectionWrapper from "../selection-wrapper";
+import SelectionWrapper, { selectItem } from "../selection-wrapper";
 
 export const openNotebook = (item: Notebook | BaseTrashItem<Notebook>) => {
   const isTrash = item.type === "trash";
-  const { selectedItemsList, setSelectedItem, selectionMode, clearSelection } =
-    useSelectionStore.getState();
-  if (selectedItemsList.length > 0 && selectionMode === item.type) {
-    setSelectedItem(item.id);
-    return;
-  } else {
-    clearSelection();
-  }
+
+  if (selectItem(item)) return;
 
   if (isTrash) {
     presentDialog({

apps/mobile/app/components/list-items/reminder/index.tsx

@@ -22,7 +22,6 @@ import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../../e2e/test.ids";
-import { useSelectionStore } from "../../../stores/use-selection-store";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import ReminderSheet from "../../sheets/reminder";
@@ -30,7 +29,7 @@ import { IconButton } from "../../ui/icon-button";
 import { ReminderTime } from "../../ui/reminder-time";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import SelectionWrapper from "../selection-wrapper";
+import SelectionWrapper, { selectItem } from "../selection-wrapper";
 
 const ReminderItem = React.memo(
   ({
@@ -44,18 +43,7 @@ const ReminderItem = React.memo(
   }) => {
     const { colors } = useThemeColors();
     const openReminder = () => {
-      const {
-        selectedItemsList,
-        setSelectedItem,
-        selectionMode,
-        clearSelection
-      } = useSelectionStore.getState();
-      if (selectedItemsList.length > 0 && selectionMode === item.type) {
-        setSelectedItem(item.id);
-        return;
-      } else {
-        clearSelection();
-      }
+      if (selectItem(item)) return;
 
       ReminderSheet.present(item, undefined, isSheet);
     };

apps/mobile/app/components/list-items/selection-wrapper/index.tsx

@@ -26,6 +26,23 @@ import { Filler } from "./back-fill";
 import { SelectionIcon } from "./selection";
 import { Item, TrashItem } from "@notesnook/core";
 
+export function selectItem(item: Item) {
+  if (useSelectionStore.getState().selectionMode === item.type) {
+    const { selectionMode, clearSelection, setSelectedItem } =
+      useSelectionStore.getState();
+
+    if (selectionMode === item.type) {
+      setSelectedItem(item.id);
+    }
+
+    if (useSelectionStore.getState().selectedItemsList.length === 0) {
+      clearSelection();
+    }
+    return true;
+  }
+  return false;
+}
+
 type SelectionWrapperProps = PropsWithChildren<{
   item: Item;
   onPress: () => void;

apps/mobile/app/components/list-items/tag/index.tsx

@@ -23,13 +23,12 @@ import React from "react";
 import { View } from "react-native";
 import { notesnook } from "../../../../e2e/test.ids";
 import { TaggedNotes } from "../../../screens/notes/tagged";
-import { useSelectionStore } from "../../../stores/use-selection-store";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import SelectionWrapper from "../selection-wrapper";
+import SelectionWrapper, { selectItem } from "../selection-wrapper";
 
 const TagItem = React.memo(
   ({
@@ -43,18 +42,7 @@ const TagItem = React.memo(
   }) => {
     const { colors } = useThemeColors();
     const onPress = () => {
-      const {
-        selectedItemsList,
-        setSelectedItem,
-        selectionMode,
-        clearSelection
-      } = useSelectionStore.getState();
-      if (selectedItemsList.length > 0 && selectionMode === item.type) {
-        setSelectedItem(item.id);
-        return;
-      } else {
-        clearSelection();
-      }
+      if (selectItem(item)) return;
 
       TaggedNotes.navigate(item, true);
     };

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/index.tsx

@@ -80,7 +80,7 @@ export default function List(props: ListProps) {
   const groupOptions = useGroupOptions(groupType);
 
   const _onRefresh = async () => {
-    Sync.run("global", false, true, () => {
+    Sync.run("global", false, "full", () => {
       props.onRefresh?.();
     });
   };
@@ -192,7 +192,9 @@ export default function List(props: ListProps) {
               />
             ) : null
           }
-          ListFooterComponent={<Footer />}
+          ListFooterComponent={
+            <Footer height={props.renderedInRoute === "Notebook" ? 300 : 150} />
+          }
           ListHeaderComponent={
             <>
               {props.CustomLisHeader ? (

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

@@ -48,6 +48,7 @@ import { NoteWrapper } from "../list-items/note/wrapper";
 import { NotebookWrapper } from "../list-items/notebook/wrapper";
 import ReminderItem from "../list-items/reminder";
 import TagItem from "../list-items/tag";
+import { useIsCompactModeEnabled } from "../../hooks/use-is-compact-mode-enabled";
 
 type ListItemWrapperProps<TItem = Item> = {
   group?: GroupingKey;
@@ -75,6 +76,7 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
   const refreshTimeout = useRef<NodeJS.Timeout>();
   const currentItemId = useRef<string>();
   const locked = useRef(false);
+  const compactMode = useIsCompactModeEnabled(props.dataType as ItemType);
 
   const refreshItem = useCallback((resolvedItem: any) => {
     if (!resolvedItem || !resolvedItem.data) {
@@ -117,14 +119,24 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
       }
       currentItemId.current = resolvedItem.item.id;
       setItem(resolvedItem.item);
+    }
+
+    if (resolvedItem?.group) {
       setGroupHeader(resolvedItem.group);
+    } else {
+      setGroupHeader(undefined);
     }
   }, []);
 
   if (previousIndex.current !== index) {
     previousIndex.current = index;
     const resolvedItem = items?.cacheItem(index);
-    refreshItem(resolvedItem);
+    if (resolvedItem) {
+      refreshItem(resolvedItem);
+    } else {
+      setItem(undefined);
+      setGroupHeader(undefined);
+    }
   }
 
   useEffect(() => {
@@ -132,12 +144,15 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
       try {
         clearTimeout(refreshTimeout.current);
         const idx = index;
-        refreshTimeout.current = setTimeout(async () => {
-          if (idx !== previousIndex.current) return;
-          const resolvedItem = await items?.item(idx, resolveItems);
-          if (idx !== previousIndex.current) return;
-          refreshItem(resolvedItem);
-        }, 100);
+        refreshTimeout.current = setTimeout(
+          async () => {
+            if (idx !== previousIndex.current) return;
+            const resolvedItem = await items?.item(idx, resolveItems);
+            if (idx !== previousIndex.current) return;
+            refreshItem(resolvedItem);
+          },
+          items?.cacheItem(index) ? 100 : 0
+        );
       } catch (e) {
         console.log("Error", e);
       }
@@ -148,7 +163,7 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
     return (
       <View
         style={{
-          height: 120,
+          height: compactMode ? 50 : 120,
           width: "100%"
         }}
       />

apps/mobile/app/components/list/reorderable-list.tsx

@@ -23,9 +23,9 @@ import { FlatList, StyleSheet, View } from "react-native";
 import {
   DraxList,
   DraxListProps,
-  DraxListRenderItemContent,
-  DraxProvider
+  DraxListRenderItemContent
 } from "react-native-drax";
+
 import { tabBarRef } from "../../utils/global-refs";
 import { SIZE } from "../../utils/size";
 import { useSideBarDraggingStore } from "../side-menu/dragging-store";
@@ -74,6 +74,7 @@ function ReorderableList<T extends { id: string }>({
   const renderItemContent: DraxListRenderItemContent<T> = React.useCallback(
     (info, props) => {
       const isHidden = hiddenItemsState.indexOf(info?.item?.id) > -1;
+
       return isHidden && !dragging ? null : (
         <View
           style={{
@@ -136,53 +137,49 @@ function ReorderableList<T extends { id: string }>({
   }
 
   return (
-    <DraxProvider>
-      <View style={styles.container}>
-        <DraxList
-          {...restProps}
-          ref={listRef}
-          data={getOrderedItems()}
-          renderItemContent={renderItemContent}
-          itemStyles={{
-            hoverDragReleasedStyle: {
-              display: "none"
-            },
-            hoverDraggingWithoutReceiverStyle: {
-              opacity: 0.5
-            },
-            dragReleasedStyle: {
-              opacity: 1
-            },
-            hoverDraggingStyle: {
-              backgroundColor: colors.secondary.background
-            }
-          }}
-          longPressDelay={500}
-          onItemDragStart={() =>
-            useSideBarDraggingStore.setState({
-              dragging: true
-            })
+    <View style={styles.container}>
+      <DraxList
+        {...restProps}
+        ref={listRef}
+        data={getOrderedItems()}
+        renderItemContent={renderItemContent}
+        itemStyles={{
+          hoverDragReleasedStyle: {
+            display: "none"
+          },
+          hoverDraggingWithoutReceiverStyle: {
+            opacity: 0.5
+          },
+          dragReleasedStyle: {
+            opacity: 1
+          },
+          hoverDraggingStyle: {
+            backgroundColor: colors.secondary.background
           }
-          itemsDraggable={disableDefaultDrag ? dragging : true}
-          lockItemDragsToMainAxis
-          onItemReorder={({ fromIndex, fromItem, toIndex, toItem }) => {
-            const newOrder = getOrderedItems().map((item) => item.id);
-            const element = newOrder.splice(fromIndex, 1)[0];
-            if (toIndex === 0) {
-              newOrder.unshift(element);
-            } else {
-              newOrder.splice(toIndex, 0, element);
-            }
-            setItemsOrder(newOrder);
-            onListOrderChanged?.(newOrder);
-          }}
-          onItemDragEnd={(e) => {
-            console.log(e.receiver?.receiveOffset);
-          }}
-          keyExtractor={(item) => (item as any).id}
-        />
-      </View>
-    </DraxProvider>
+        }}
+        longPressDelay={500}
+        onItemDragStart={() =>
+          useSideBarDraggingStore.setState({
+            dragging: true
+          })
+        }
+        disableVirtualization
+        itemsDraggable={disableDefaultDrag ? dragging : true}
+        lockItemDragsToMainAxis
+        onItemReorder={({ fromIndex, fromItem, toIndex, toItem }) => {
+          const newOrder = getOrderedItems().map((item) => item.id);
+          const element = newOrder.splice(fromIndex, 1)[0];
+          if (toIndex === 0) {
+            newOrder.unshift(element);
+          } else {
+            newOrder.splice(toIndex, 0, element);
+          }
+          setItemsOrder(newOrder);
+          onListOrderChanged?.(newOrder);
+        }}
+        keyExtractor={(item) => (item as any).id}
+      />
+    </View>
   );
 }
 

apps/mobile/app/components/merge-conflicts/index.js

@@ -313,7 +313,7 @@ const MergeConflicts = () => {
               height: height / 2 - (50 + insets.top / 2),
               backgroundColor: colors.primary.background,
               borderBottomWidth: 1,
-              borderBottomColor: colors.secondary.background
+              borderBottomColor: colors.primary.border
             }}
           >
             <ReadonlyEditor

apps/mobile/app/components/note-history/index.tsx

@@ -199,7 +199,9 @@ export default function NoteHistory({
         Note version history is local only.{" "}
         <Text
           onPress={() => {
-            openLinkInBrowser("https://docs.notesnook.com/versionhistory");
+            openLinkInBrowser(
+              "https://help.notesnook.com/note-version-history"
+            );
           }}
           style={{
             color: colors.primary.accent,

apps/mobile/app/components/note-history/preview.js

@@ -21,10 +21,10 @@ import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
 import { View } from "react-native";
 import { db } from "../../common/database";
-import Editor from "../../screens/editor";
+import { ReadonlyEditor } from "../../screens/editor/readonly-editor";
 import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
 import { editorController } from "../../screens/editor/tiptap/utils";
-import { eSendEvent, ToastManager } from "../../services/event-manager";
+import { ToastManager, eSendEvent } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { useTrashStore } from "../../stores/use-trash-store";
@@ -34,7 +34,7 @@ import DialogHeader from "../dialog/dialog-header";
 import { presentDialog } from "../dialog/functions";
 import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
-import { ReadonlyEditor } from "../../screens/editor/readonly-editor";
+import { diff } from "diffblazer";
 
 /**
  *
@@ -121,12 +121,21 @@ export default function NotePreview({ session, content, note }) {
           <ReadonlyEditor
             editorId="historyPreview"
             onLoad={async (loadContent) => {
-              if (content.data) {
-                const _note = note || (await db.notes.note(session?.noteId));
-                loadContent({
-                  data: content.data,
-                  id: _note.id
-                });
+              try {
+                if (content.data) {
+                  const _note = note || (await db.notes.note(session?.noteId));
+                  const currentContent = await db.content.get(_note.contentId);
+                  loadContent({
+                    data: diff(currentContent.data, content.data),
+                    id: _note.id
+                  });
+                }
+              } catch (e) {
+                ToastManager.error(
+                  e,
+                  "Failed to load history preview",
+                  "local"
+                );
               }
             }}
           />

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

@@ -162,7 +162,7 @@ export const features = [
         platform: "android"
       }
     ],
-    info: "* Free users are limited to keeping 3 notebooks (no limit on topics) and 5 tags."
+    info: "* Free users are limited to keeping 3 notebooks and 5 tags."
   },
 
   {

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

@@ -111,6 +111,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
         visible={visible}
         setVisible={setVisible}
         onColorAdded={async (color) => {
+          await db.relations.to(note, "color").unlink();
           await db.relations.add(color, note);
           useRelationStore.getState().update();
           useMenuStore.getState().setColorNotes();

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

@@ -242,7 +242,6 @@ Properties.present = async (item, buttons = [], isSheet) => {
         "attachments",
         "lock-unlock",
         "trash",
-        "remove-from-topic",
         "remove-from-notebook",
         "history",
         "read-only",
@@ -264,7 +263,8 @@ Properties.present = async (item, buttons = [], isSheet) => {
         "trash",
         "default-notebook",
         "add-notebook",
-        "move-notes"
+        "move-notes",
+        "move-notebook"
       ]);
       break;
     case "tag":

apps/mobile/app/components/properties/synced.js

@@ -48,7 +48,7 @@ export const Synced = ({ item, close }) => {
         paddingTop: 10,
         marginTop: 10,
         borderTopWidth: 1,
-        borderTopColor: colors.secondary.background
+        borderTopColor: colors.primary.border
       }}
     >
       <Icon
@@ -92,7 +92,7 @@ export const Synced = ({ item, close }) => {
             close();
             await sleep(300);
             await openLinkInBrowser(
-              "https://docs.notesnook.com/how-is-my-data-encrypted/",
+              "https://help.notesnook.com/how-is-my-data-encrypted",
               colors
             );
           } catch (e) {

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

@@ -19,14 +19,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Item, ItemType, VirtualizedGrouping } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import {
   BackHandler,
   NativeEventSubscription,
   Platform,
   View
 } from "react-native";
-import Animated, { FadeInUp } from "react-native-reanimated";
+import Menu from "react-native-reanimated-material-menu/src/Menu";
 import { db } from "../../common/database";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { ToastManager } from "../../services/event-manager";
@@ -42,6 +42,8 @@ import { presentDialog } from "../dialog/functions";
 import MoveNoteSheet from "../sheets/add-to";
 import ExportNotesSheet from "../sheets/export-notes";
 import ManageTagsSheet from "../sheets/manage-tags";
+import { MoveNotebookSheet } from "../sheets/move-notebook";
+import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Heading from "../ui/typography/heading";
 
@@ -57,6 +59,8 @@ export const SelectionHeader = React.memo(
     type?: ItemType;
     renderedInRoute?: string;
   }) => {
+    const menuRef = useRef<Menu>(null);
+    const { colors: contextMenuColors } = useThemeColors("contextMenu");
     const { colors } = useThemeColors();
     const selectionMode = useSelectionStore((state) => state.selectionMode);
     const selectedItemsList = useSelectionStore(
@@ -131,8 +135,7 @@ export const SelectionHeader = React.memo(
     }, [clearSelection, selectionMode]);
 
     return selectionMode !== type || focusedRouteId !== id ? null : (
-      <Animated.View
-        entering={FadeInUp}
+      <View
         style={{
           width: "100%",
           height: Platform.OS === "android" ? 50 + insets.top : 50,
@@ -142,8 +145,7 @@ export const SelectionHeader = React.memo(
           alignItems: "center",
           flexDirection: "row",
           zIndex: 999,
-          paddingHorizontal: 12,
-          marginVertical: 10
+          paddingHorizontal: 12
         }}
       >
         <View
@@ -163,18 +165,15 @@ export const SelectionHeader = React.memo(
               borderRadius: 100,
               marginRight: 10
             }}
-            type="secondary"
             onPress={() => {
               clearSelection();
             }}
-            size={SIZE.xl}
             color={colors.primary.icon}
             name="close"
           />
 
           <View
             style={{
-              backgroundColor: colors.secondary.background,
               height: 40,
               borderRadius: 100,
               paddingHorizontal: 16,
@@ -183,11 +182,12 @@ export const SelectionHeader = React.memo(
               alignItems: "center"
             }}
           >
-            <Heading size={SIZE.md} color={colors.primary.accent}>
+            <Heading size={SIZE.lg} color={colors.primary.paragraph}>
               {selectedItemsList.length}
             </Heading>
           </View>
         </View>
+
         <View
           style={{
             flexDirection: "row",
@@ -210,144 +210,142 @@ export const SelectionHeader = React.memo(
               allSelected ? colors.primary.accent : colors.primary.paragraph
             }
             name="select-all"
-            size={SIZE.xl}
           />
 
-          {type !== "note" ? null : (
-            <>
-              <IconButton
-                onPress={async () => {
-                  await sleep(100);
-                  ManageTagsSheet.present(selectedItemsList);
-                }}
-                style={{
-                  marginLeft: 10
-                }}
-                color={colors.primary.icon}
-                tooltipText="Manage tags"
-                tooltipPosition={4}
-                name="pound"
-                size={SIZE.xl}
-              />
-
-              <IconButton
-                onPress={async () => {
-                  ExportNotesSheet.present(selectedItemsList);
-                }}
-                tooltipText="Export"
-                tooltipPosition={4}
-                style={{
-                  marginLeft: 10
-                }}
-                color={colors.primary.paragraph}
-                name="export"
-                size={SIZE.xl}
-              />
-
-              <IconButton
-                onPress={async () => {
-                  MoveNoteSheet.present();
-                }}
-                style={{
-                  marginLeft: 10
-                }}
-                tooltipText="Add to notebooks"
-                tooltipPosition={4}
-                color={colors.primary.paragraph}
-                name="plus"
-                size={SIZE.xl}
-              />
-            </>
-          )}
-
-          {renderedInRoute === "Notebook" ? (
-            <IconButton
-              onPress={async () => {
-                if (selectedItemsList.length > 0) {
-                  if (!id) return;
-                  await db.notes.removeFromNotebook(id, ...selectedItemsList);
-                  updateNotebook(id);
-                  Navigation.queueRoutesForUpdate();
-                  clearSelection();
+          {selectedItemsList.length ? (
+            <Menu
+              ref={menuRef}
+              animationDuration={200}
+              style={{
+                borderRadius: 5,
+                backgroundColor: contextMenuColors.primary.background,
+                marginTop: -20
+              }}
+              onRequestClose={() => {
+                menuRef.current?.hide();
+              }}
+              anchor={
+                <IconButton
+                  onPress={() => {
+                    menuRef.current?.show();
+                  }}
+                  name="dots-vertical"
+                  color={colors.primary.paragraph}
+                />
+              }
+            >
+              {[
+                {
+                  title:
+                    selectedItemsList.length > 1
+                      ? "Move notebooks"
+                      : "Move notebook",
+                  onPress: async () => {
+                    const ids = selectedItemsList;
+                    const notebooks = await db.notebooks.all.items(ids);
+                    MoveNotebookSheet.present(notebooks);
+                  },
+                  visible: renderedInRoute === "Notebooks",
+                  icon: "arrow-right-bold-box-outline"
+                },
+                {
+                  title: "Manage tags",
+                  onPress: async () => {
+                    await sleep(100);
+                    ManageTagsSheet.present(selectedItemsList);
+                  },
+                  visible: type === "note",
+                  icon: "pound"
+                },
+                {
+                  title: "Export",
+                  onPress: async () => {
+                    await sleep(100);
+                    ExportNotesSheet.present(selectedItemsList);
+                  },
+                  visible: type === "note",
+                  icon: "export"
+                },
+                {
+                  title: "Link notebook",
+                  onPress: async () => {
+                    await sleep(100);
+                    MoveNoteSheet.present();
+                  },
+                  visible: type === "note",
+                  icon: "plus"
+                },
+                {
+                  title: "Unlink notebook",
+                  onPress: async () => {
+                    if (!id) return;
+                    await db.notes.removeFromNotebook(id, ...selectedItemsList);
+                    updateNotebook(id);
+                    Navigation.queueRoutesForUpdate();
+                    clearSelection();
+                  },
+                  visible: renderedInRoute === "Notebook",
+                  icon: "minus"
+                },
+                {
+                  title: "Unfavorite",
+                  onPress: addToFavorite,
+                  visible: focusedRouteId === "Favorites",
+                  icon: "star-off"
+                },
+                {
+                  title: `Move to trash`,
+                  onPress: async () => {
+                    deleteItems(
+                      undefined,
+                      useSelectionStore.getState().selectionMode
+                    ).then(() => {
+                      useSelectionStore.getState().clearSelection();
+                      useSelectionStore.getState().setSelectionMode(undefined);
+                    });
+                  },
+                  visible: type !== "trash",
+                  icon: "delete"
+                },
+                {
+                  title: `Restore`,
+                  onPress: restoreItem,
+                  visible: type === "trash",
+                  icon: "delete-restore"
+                },
+                {
+                  title: `Delete`,
+                  onPress: deleteItem,
+                  visible: type === "trash",
+                  icon: "delete"
                 }
-              }}
-              style={{
-                marginLeft: 10
-              }}
-              tooltipText={`Remove from Notebook`}
-              tooltipPosition={4}
-              testID="select-minus"
-              color={colors.primary.paragraph}
-              name="minus"
-              size={SIZE.xl}
-            />
-          ) : null}
-
-          {focusedRouteId === "Favorites" ? (
-            <IconButton
-              onPress={addToFavorite}
-              style={{
-                marginLeft: 10
-              }}
-              tooltipText="Remove from favorites"
-              tooltipPosition={4}
-              color={colors.primary.paragraph}
-              name="star-off"
-              size={SIZE.xl}
-            />
-          ) : null}
-
-          {type === "trash" ? null : (
-            <IconButton
-              style={{
-                marginLeft: 10
-              }}
-              onPress={() => {
-                deleteItems(
-                  undefined,
-                  useSelectionStore.getState().selectionMode
-                ).then(() => {
-                  useSelectionStore.getState().clearSelection();
-                  useSelectionStore.getState().setSelectionMode(undefined);
-                });
-              }}
-              tooltipText="Move to trash"
-              tooltipPosition={1}
-              color={colors.primary.paragraph}
-              name="delete"
-              size={SIZE.xl}
-            />
-          )}
-
-          {type === "trash" ? (
-            <>
-              <IconButton
-                style={{
-                  marginLeft: 10
-                }}
-                color={colors.primary.paragraph}
-                onPress={restoreItem}
-                name="delete-restore"
-                tooltipText="Restore"
-                tooltipPosition={4}
-                size={SIZE.xl - 3}
-              />
-
-              <IconButton
-                style={{
-                  marginLeft: 10
-                }}
-                color={colors.primary.paragraph}
-                onPress={deleteItem}
-                tooltipText="Delete"
-                tooltipPosition={4}
-                name="delete"
-                size={SIZE.xl - 3}
-              />
-            </>
+              ].map((item) =>
+                !item.visible ? null : (
+                  <Button
+                    style={{
+                      width: 150,
+                      justifyContent: "flex-start",
+                      borderRadius: 0
+                    }}
+                    type="plain"
+                    buttonType={{
+                      text: contextMenuColors.primary.paragraph
+                    }}
+                    icon={item.icon}
+                    key={item.title}
+                    title={item.title}
+                    onPress={async () => {
+                      menuRef.current?.hide();
+                      if (Platform.OS === "ios") await sleep(300);
+                      item.onPress();
+                    }}
+                  />
+                )
+              )}
+            </Menu>
           ) : null}
         </View>
-      </Animated.View>
+      </View>
     );
   }
 );

apps/mobile/app/components/sheets/add-notebook/index.tsx

@@ -39,17 +39,22 @@ import Heading from "../../ui/typography/heading";
 import { MoveNotes } from "../move-notes/movenote";
 import { eOnNotebookUpdated } from "../../../utils/events";
 import { getParentNotebookId } from "../../../utils/notebooks";
+import { useNotebookStore } from "../../../stores/use-notebook-store";
 
 export const AddNotebookSheet = ({
   notebook,
   parentNotebook,
-  close
+  close,
+  showMoveNotesOnComplete,
+  defaultTitle
 }: {
   notebook?: Notebook;
   parentNotebook?: Notebook;
-  close: ((context?: string | undefined) => void) | undefined;
+  close?: (didAddNotebook: boolean) => void;
+  showMoveNotesOnComplete: boolean;
+  defaultTitle?: string;
 }) => {
-  const title = useRef(notebook?.title);
+  const title = useRef(notebook?.title || defaultTitle);
   const description = useRef(notebook?.description);
   const titleInput = useRef<TextInput>(null);
   const descriptionInput = useRef<TextInput>(null);
@@ -85,6 +90,7 @@ export const AddNotebookSheet = ({
     useMenuStore.getState().setMenuPins();
     Navigation.queueRoutesForUpdate();
     useRelationStore.getState().update();
+    useNotebookStore.getState().refresh();
 
     const parent =
       parentNotebook?.id || (await getParentNotebookId(notebook?.id || id));
@@ -97,10 +103,10 @@ export const AddNotebookSheet = ({
       });
     }
 
-    if (!notebook) {
+    if (!notebook && showMoveNotesOnComplete) {
       MoveNotes.present(await db.notebooks.notebook(id));
     } else {
-      close?.();
+      close?.(true);
     }
   };
 
@@ -135,7 +141,7 @@ export const AddNotebookSheet = ({
         }}
         returnKeyLabel="Next"
         returnKeyType="next"
-        defaultValue={notebook ? notebook.title : ""}
+        defaultValue={notebook ? notebook.title : title.current}
       />
 
       <Input
@@ -169,7 +175,9 @@ AddNotebookSheet.present = (
   notebook?: Notebook,
   parentNotebook?: Notebook,
   context?: string,
-  onClose?: () => void
+  onClose?: (didAddNotebook: boolean) => void,
+  showMoveNotesOnComplete = true,
+  defaultTitle?: string
 ) => {
   presentSheet({
     context: context,
@@ -177,9 +185,13 @@ AddNotebookSheet.present = (
       <AddNotebookSheet
         notebook={notebook}
         parentNotebook={parentNotebook}
-        close={close}
+        close={(didAddNotebook: boolean) => {
+          close?.();
+          onClose?.(didAddNotebook);
+        }}
+        showMoveNotesOnComplete={showMoveNotesOnComplete || false}
+        defaultTitle={defaultTitle}
       />
-    ),
-    onClose: onClose
+    )
   });
 };

apps/mobile/app/components/sheets/add-to/index.tsx

@@ -19,7 +19,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Note } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
-import React, { RefObject, useCallback, useEffect } from "react";
+import React, {
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
 import {
   ActivityIndicator,
   Keyboard,
@@ -46,6 +52,9 @@ import { IconButton } from "../../ui/icon-button";
 import Paragraph from "../../ui/typography/paragraph";
 import { NotebookItem } from "./notebook-item";
 import { useNotebookItemSelectionStore } from "./store";
+import { AddNotebookSheet } from "../add-notebook";
+import Input from "../../ui/input";
+import { presentDialog } from "../../dialog/functions";
 
 async function updateInitialSelectionState(items: string[]) {
   const relations = await db.relations
@@ -92,7 +101,11 @@ const MoveNoteSheet = ({
   actionSheetRef: RefObject<ActionSheetRef>;
 }) => {
   const { colors } = useThemeColors();
-  const [notebooks, loading] = useNotebooks();
+  const [rootNotebooks, loading] = useNotebooks();
+  const searchQuery = useRef("");
+  const searchTimer = useRef<NodeJS.Timeout>();
+  const [notebooks, setNotebooks] = useState(rootNotebooks);
+
   const dimensions = useSettingStore((state) => state.dimensions);
   const selectedItemsList = useSelectionStore(
     (state) => state.selectedItemsList
@@ -102,6 +115,12 @@ const MoveNoteSheet = ({
     (state) => state.multiSelect
   );
 
+  useEffect(() => {
+    if (!loading) {
+      setNotebooks(rootNotebooks);
+    }
+  }, [loading, rootNotebooks]);
+
   useEffect(() => {
     const items = note ? [note.id] : selectedItemsList;
     updateInitialSelectionState(items);
@@ -141,6 +160,11 @@ const MoveNoteSheet = ({
     actionSheetRef.current?.hide();
   };
 
+  const hasSelected = () => {
+    const selection = useNotebookItemSelectionStore.getState().selection;
+    return Object.keys(selection).some((key) => selection[key] === "selected");
+  };
+
   const renderNotebook = useCallback(
     ({ index }: { item: boolean; index: number }) => (
       <NotebookItem items={notebooks} id={index} index={index} />
@@ -180,7 +204,7 @@ const MoveNoteSheet = ({
             paragraph={
               !multiSelect
                 ? "Long press to enable multi-select."
-                : "Select topics you want to add note(s) to."
+                : "Select notebooks you want to add note(s) to."
             }
           />
 
@@ -190,18 +214,20 @@ const MoveNoteSheet = ({
               columnGap: 10
             }}
           >
-            <IconButton
-              name="restore"
-              type="secondaryAccented"
-              onPress={() => {
-                const items = note ? [note.id] : selectedItemsList;
-                updateInitialSelectionState(items);
-              }}
-              style={{
-                width: 40,
-                height: 40
-              }}
-            />
+            {hasSelected() ? (
+              <IconButton
+                name="restore"
+                color={colors.primary.icon}
+                onPress={() => {
+                  const items = note ? [note.id] : selectedItemsList;
+                  updateInitialSelectionState(items);
+                }}
+                style={{
+                  width: 40,
+                  height: 40
+                }}
+              />
+            ) : null}
 
             <Button
               height={40}
@@ -230,6 +256,51 @@ const MoveNoteSheet = ({
             style={{
               width: "100%"
             }}
+            keyboardShouldPersistTaps="handled"
+            ListHeaderComponent={
+              <View
+                style={{
+                  paddingHorizontal: 12,
+                  width: "100%",
+                  paddingTop: 12
+                }}
+              >
+                <Input
+                  placeholder="Search notebooks...."
+                  button={{
+                    icon: "plus",
+                    onPress: () => {
+                      AddNotebookSheet.present(
+                        undefined,
+                        undefined,
+                        "link-notebooks",
+                        undefined,
+                        false,
+                        searchQuery.current
+                      );
+                    },
+                    color: colors.primary.icon
+                  }}
+                  onChangeText={(value) => {
+                    searchQuery.current = value;
+                    if (!searchQuery.current) {
+                      setNotebooks(rootNotebooks);
+                      return;
+                    }
+                    searchTimer.current = setTimeout(() => {
+                      db.lookup
+                        .notebooks(searchQuery.current)
+                        .sorted()
+                        .then((result) => {
+                          if (searchQuery.current === value) {
+                            setNotebooks(result);
+                          }
+                        });
+                    }, 300);
+                  }}
+                />
+              </View>
+            }
             estimatedItemSize={50}
             renderItem={renderNotebook}
             ListEmptyComponent={
@@ -265,7 +336,8 @@ MoveNoteSheet.present = (note?: Note) => {
   presentSheet({
     component: (ref) => <MoveNoteSheet actionSheetRef={ref} note={note} />,
     enableGesturesInScrollView: false,
-    noBottomPadding: true
+    noBottomPadding: true,
+    keyboardHandlerDisabled: true
   });
 };
 export default MoveNoteSheet;

apps/mobile/app/components/sheets/add-to/notebook-item.tsx

@@ -226,7 +226,13 @@ export const NotebookItem = ({
             testID={notesnook.ids.notebook.menu}
             onPress={() => {
               if (!item) return;
-              AddNotebookSheet.present(undefined, item, "link-notebooks");
+              AddNotebookSheet.present(
+                undefined,
+                item,
+                "link-notebooks",
+                undefined,
+                false
+              );
             }}
             left={0}
             right={0}

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

@@ -43,6 +43,7 @@ type TabItem = {
   locked?: boolean;
   noteLocked?: boolean;
   readonly?: boolean;
+  pinned?: boolean;
 };
 
 const TabItemComponent = (props: {
@@ -83,7 +84,6 @@ const TabItemComponent = (props: {
       onPress={() => {
         if (!props.isFocused) {
           useTabStore.getState().focusTab(props.tab.id);
-          props.close?.();
           if (props.tab.locked) {
             eSendEvent(eUnlockNote);
           }
@@ -94,6 +94,7 @@ const TabItemComponent = (props: {
             }, 300);
           }
         }
+        props.close?.();
       }}
       onLongPress={() => {
         useTabStore.getState().updateTab(props.tab.id, {
@@ -129,7 +130,9 @@ const TabItemComponent = (props: {
               : colors.primary.paragraph
           }
           style={{
-            fontStyle: props.tab.previewTab ? "italic" : "normal"
+            fontFamily: props.tab.previewTab
+              ? "OpenSans-Italic"
+              : "OpenSans-Regular"
           }}
           numberOfLines={1}
           size={SIZE.md}
@@ -138,24 +141,50 @@ const TabItemComponent = (props: {
         </Paragraph>
       </View>
 
-      <IconButton
-        name="close"
-        size={SIZE.lg}
-        color={colors.primary.icon}
-        onPress={() => {
-          const isLastTab = useTabStore.getState().tabs.length === 1;
-          useTabStore.getState().removeTab(props.tab.id);
-          // The last tab is not actually removed, it is just cleaned up.
-          if (isLastTab) {
-            editorController.current?.reset(props.tab.id, true, true);
-            props.close?.();
-          }
+      <View
+        style={{
+          flexDirection: "row",
+          gap: 5,
+          paddingRight: 12
         }}
-        top={0}
-        left={0}
-        right={20}
-        bottom={0}
-      />
+      >
+        <IconButton
+          name="pin"
+          size={SIZE.lg}
+          color={props.tab.pinned ? colors.primary.accent : colors.primary.icon}
+          onPress={() => {
+            useTabStore.getState().updateTab(props.tab.id, {
+              pinned: !props.tab.pinned,
+              previewTab: false
+            });
+          }}
+          top={0}
+          left={0}
+          right={20}
+          bottom={0}
+        />
+
+        {!props.tab?.pinned ? (
+          <IconButton
+            name="close"
+            size={SIZE.lg}
+            color={colors.primary.icon}
+            onPress={() => {
+              const isLastTab = useTabStore.getState().tabs.length === 1;
+              useTabStore.getState().removeTab(props.tab.id);
+              // The last tab is not actually removed, it is just cleaned up.
+              if (isLastTab) {
+                editorController.current?.reset(props.tab.id, true, true);
+                props.close?.();
+              }
+            }}
+            top={0}
+            left={0}
+            right={20}
+            bottom={0}
+          />
+        ) : null}
+      </View>
     </Pressable>
   );
 };
@@ -223,7 +252,16 @@ export default function EditorTabs({
         />
       </View>
 
-      <FlatList windowSize={3} data={tabs} renderItem={renderTabItem} />
+      <FlatList
+        windowSize={3}
+        data={tabs.sort((t1, t2) => {
+          if (t1.pinned && t2.pinned) return 0;
+          if (t1.pinned) return -1;
+          if (t2.pinned) return 1;
+          return 0;
+        })}
+        renderItem={renderTabItem}
+      />
     </View>
   );
 }

apps/mobile/app/components/sheets/export-notes/index.tsx

@@ -19,7 +19,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useThemeColors } from "@notesnook/theme";
 import React, { Fragment, useState } from "react";
-import { ActivityIndicator, Platform, StyleSheet, View } from "react-native";
+import {
+  ActivityIndicator,
+  Linking,
+  Platform,
+  StyleSheet,
+  View
+} from "react-native";
 import FileViewer from "react-native-file-viewer";
 import Share from "react-native-share";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
@@ -29,16 +35,15 @@ import { requestInAppReview } from "../../../services/app-review";
 import {
   PresentSheetOptions,
   ToastManager,
-  eSendEvent,
   presentSheet
 } from "../../../services/event-manager";
 import Exporter from "../../../services/exporter";
 import PremiumService from "../../../services/premium";
 import { useUserStore } from "../../../stores/use-user-store";
 import { getElevationStyle } from "../../../utils/elevation";
-import { eCloseSheet } from "../../../utils/events";
 import { SIZE, ph, pv } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
+import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
 import { ProTag } from "../../premium/pro-tag";
 import { Button } from "../../ui/button";
@@ -47,7 +52,6 @@ import { Pressable } from "../../ui/pressable";
 import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { Dialog } from "../../dialog";
 
 const ExportNotesSheet = ({
   ids,
@@ -65,13 +69,14 @@ const ExportNotesSheet = ({
         filePath: string;
         name: string;
         type: string;
+        fileDir: string;
       }
     | undefined
   >();
   const [status, setStatus] = useState<string>();
   const premium = useUserStore((state) => state.premium);
 
-  const save = async (
+  const exportNoteAs = async (
     type: "pdf" | "txt" | "md" | "html" | "md-frontmatter"
   ) => {
     if (exporting) return;
@@ -81,9 +86,18 @@ const ExportNotesSheet = ({
     setComplete(false);
     let result;
     if (ids.length > 1) {
-      result = await Exporter.bulkExport(ids, type, setStatus);
+      result = await Exporter.bulkExport(
+        db.notes.all.where((eb) => eb("id", "in", ids)),
+        type,
+        setStatus
+      );
     } else {
-      result = await Exporter.exportNote(ids[0], type);
+      const note = await db.notes.note(ids[0]);
+      if (!note) {
+        setExporting(false);
+        return;
+      }
+      result = await Exporter.exportNote(note, type, setStatus);
       await sleep(1000);
     }
     if (!result) {
@@ -101,7 +115,7 @@ const ExportNotesSheet = ({
     {
       title: "PDF",
       func: async () => {
-        await save("pdf");
+        await exportNoteAs("pdf");
       },
       icon: "file-pdf-box",
       desc: "View in any pdf reader app",
@@ -111,7 +125,7 @@ const ExportNotesSheet = ({
     {
       title: "Markdown",
       func: async () => {
-        await save("md");
+        await exportNoteAs("md");
       },
       icon: "language-markdown",
       desc: "View in any text or markdown editor",
@@ -121,7 +135,7 @@ const ExportNotesSheet = ({
     {
       title: "Markdown + Frontmatter",
       func: async () => {
-        await save("md-frontmatter");
+        await exportNoteAs("md-frontmatter");
       },
       icon: "language-markdown",
       desc: "View in any text or markdown editor",
@@ -131,7 +145,7 @@ const ExportNotesSheet = ({
     {
       title: "Plain Text",
       func: async () => {
-        await save("txt");
+        await exportNoteAs("txt");
       },
       icon: "card-text",
       desc: "View in any text editor",
@@ -141,7 +155,7 @@ const ExportNotesSheet = ({
     {
       title: "HTML",
       func: async () => {
-        await save("html");
+        await exportNoteAs("html");
       },
       icon: "language-html5",
       desc: "View in any web browser & html reader",
@@ -250,11 +264,9 @@ const ExportNotesSheet = ({
               <>
                 <ActivityIndicator />
                 <Paragraph>
-                  {ids.length === 1
-                    ? "Exporting note... Please wait"
-                    : `Exporting notes${
-                        status ? ` (${status})` : ``
-                      }... Please wait`}
+                  {`${
+                    status ? `${status})` : `Exporting notes`
+                  }... Please wait`}
                 </Paragraph>
               </>
             ) : (
@@ -288,7 +300,9 @@ const ExportNotesSheet = ({
                   successfully as {result?.fileName}
                 </Paragraph>
                 <Button
-                  title="Open"
+                  title={
+                    Platform.OS === "android" ? "Open file location" : "Open"
+                  }
                   type="accent"
                   width={250}
                   fontSize={SIZE.md}
@@ -298,20 +312,23 @@ const ExportNotesSheet = ({
                   }}
                   onPress={async () => {
                     if (!result?.filePath) return;
-                    eSendEvent(eCloseSheet);
-                    await sleep(500);
-                    FileViewer.open(result?.filePath, {
-                      showOpenWithDialog: true,
-                      showAppsSuggestions: true
-                    }).catch((e) => {
-                      console.log(e);
-                      ToastManager.show({
-                        heading: "Cannot open",
-                        message: `No application found to open ${result.name} file.`,
-                        type: "success",
-                        context: "local"
+                    if (Platform.OS === "android") {
+                      Linking.openURL(result.fileDir).catch((e) => {
+                        ToastManager.error(e as Error);
                       });
-                    });
+                    } else {
+                      FileViewer.open(result?.filePath, {
+                        showOpenWithDialog: true,
+                        showAppsSuggestions: true
+                      }).catch((e) => {
+                        ToastManager.show({
+                          heading: "Cannot open",
+                          message: `No application found to open ${result.name} file.`,
+                          type: "success",
+                          context: "local"
+                        });
+                      });
+                    }
                   }}
                 />
                 <Button
@@ -324,10 +341,10 @@ const ExportNotesSheet = ({
                     borderRadius: 100
                   }}
                   onPress={async () => {
-                    if (!result?.filePath) return;
+                    if (!result) return;
                     if (Platform.OS === "ios") {
                       Share.open({
-                        url: result.filePath
+                        url: result?.fileDir + result.fileName
                       }).catch(console.log);
                     } else {
                       FileViewer.open(result.filePath, {
@@ -340,7 +357,7 @@ const ExportNotesSheet = ({
                 />
                 <Button
                   title="Export in another format"
-                  type="secondaryAccented"
+                  type="inverted"
                   width={250}
                   fontSize={SIZE.md}
                   style={{

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

@@ -18,35 +18,33 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Debug } from "@notesnook/core/dist/api/debug";
+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.secondary.background,
-          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.secondary.background,
-          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

@@ -35,7 +35,10 @@ 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 { editorController } from "../../../screens/editor/tiptap/utils";
+import {
+  EditorEvents,
+  editorController
+} from "../../../screens/editor/tiptap/utils";
 
 const ListNoteItem = ({
   id,
@@ -190,13 +193,13 @@ export default function LinkNote(props: {
           }
         : undefined
     );
-    editorController.current.commands.createInternalLink(
-      {
+    editorController.current?.postMessage(EditorEvents.resolve, {
+      data: {
         href: link,
         title: selectedNote.title
       },
-      props.resolverId
-    );
+      resolverId: props.resolverId
+    });
   };
 
   const onSelectNote = async (note: Note) => {
@@ -219,7 +222,7 @@ export default function LinkNote(props: {
     <View
       style={{
         paddingHorizontal: 12,
-        minHeight: 400,
+        minHeight: "100%",
         maxHeight: "100%"
       }}
     >
@@ -311,6 +314,7 @@ export default function LinkNote(props: {
           style={{
             marginTop: 10
           }}
+          keyboardShouldPersistTaps="handled"
           windowSize={3}
           keyExtractor={(item) => item.id}
           data={nodes}
@@ -324,6 +328,7 @@ export default function LinkNote(props: {
               onSelectNote={onSelectNote}
             />
           )}
+          keyboardShouldPersistTaps="handled"
           style={{
             marginTop: 10
           }}

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

@@ -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}`;
@@ -96,9 +93,12 @@ export default function Migrate() {
       });
       setLoading(true);
       await sleep(1);
-      const { error } = await BackupService.run(false, "local");
+      const { error, report } = await BackupService.run(false, "local");
       if (error) {
         ToastManager.error(error, "Backup failed");
+        if (report) {
+          reportError(error);
+        }
         setLoading(false);
         return;
       }
@@ -159,13 +159,14 @@ export default function Migrate() {
               }}
             >
               Migrating database{progress ? `(${progress?.collection})` : null}
-              {progress ? `(${progress.current}/${progress.total}) ` : null}...
-              please wait
+              {progress ? `(${progress.current}/${progress.total}) ` : null}
+              ... please wait
             </Paragraph>
 
             <View
               style={{
-                width: 200
+                width: 200,
+                alignSelf: "center"
               }}
             >
               <ProgressBarComponent