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
+      - name: Upload sourcemaps
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
-          name: Notesnook.aab
+          name: sourcemaps
-          path: ${{steps.sign_app.outputs.signedReleaseFile}}
+          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
+      - name: Upload sourcemaps
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
-          name: Notesnook.aab
+          name: sourcemaps
-          path: ${{steps.sign_app.outputs.signedReleaseFile}}
+          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
+      - name: Install TrustedSigning
-        run: Install-Module -Name AzureCodeSigning -RequiredVersion 0.3.0 -Force -Repository PSGallery
+        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"
+      # - name: "Upload app to TestFlight"
-        uses: apple-actions/upload-testflight-build@v1
+      #   uses: apple-actions/upload-testflight-build@v1
-        with:
+      #   with:
-          app-path: Notesnook.ipa
+      #     app-path: Notesnook.ipa
-          issuer-id: ${{ secrets.API_KEY_ISSUER_ID }}
+      #     issuer-id: ${{ secrets.API_KEY_ISSUER_ID }}
-          api-key-id: ${{ secrets.API_KEY_ID }}
+      #     api-key-id: ${{ secrets.API_KEY_ID }}
-          api-private-key: ${{ secrets.API_KEY }}
+      #     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
+          name: Notesnook.zip
-          path: Notesnook.ipa
+          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/

.gitignore

@@ -10,4 +10,4 @@ nx-cloud.env
 .nyc_output
 site
 node_modules.backup
-.nx/cache
+.nx

apps/desktop/README.md

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

apps/desktop/app-update.yml

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

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "3.0.6-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": "^29.3.1",
-    "electron-builder": "^24.9.1",
+    "electron-builder": "^24.13.3",
-    "esbuild": "^0.20.0",
+    "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",
+        "owner": "streetwriters"
-        "channel": "beta"
       }
     ]
   }

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
+// temporary until there's support for prebuilt binaries for linux ARM
-await patchBetterSQLite3();
+if (os.platform() === "linux") await patchBetterSQLite3();
 
-if (os.platform() === "win32")
+// if (os.platform() === "win32")
-  await exec(
+//   await exec(
-    "npx prebuildify --arch=arm64 --strip",
+//     `npx prebuildify --arch=arm64 --strip -t electron@${packageJson.devDependencies.electron}`,
-    path.join(__dirname, "..", "node_modules", "sodium-native")
+//     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`);
+  await exec(`yarn run bundle`);
-  execAsync(`npx`, [`tsc`]);
+  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,23 @@ 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())
+    .mutation(({ input: proxyRules }) => {
+      globalThis.window?.webContents.session.setProxy({ proxyRules });
+      config.proxyRules = proxyRules || "";
+    }),
+
   privacyMode: t.procedure.query(() => config.privacyMode),
   setPrivacyMode: t.procedure
     .input(z.object({ enabled: z.boolean() }))
@@ -134,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 }) => {
@@ -162,16 +184,45 @@ export const osIntegrationRouter = t.router({
     }),
   bringToFront: t.procedure.query(() => bringToFront()),
   changeTheme: t.procedure
-    .input(Theme)
+    .input(
-    .mutation(({ input }) => setTheme(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/spell-checker.ts

@@ -118,5 +118,13 @@ export const spellCheckerRouter = t.router({
     .mutation(({ input: { enabled } }) => {
       globalThis.window?.webContents.session.setSpellCheckerEnabled(enabled);
       config.isSpellCheckerEnabled = enabled;
-    })
+    }),
+  words: t.procedure.query(() =>
+    globalThis.window?.webContents.session.listWordsInSpellCheckerDictionary()
+  ),
+  deleteWord: t.procedure.input(z.string()).mutation(({ input: word }) => {
+    globalThis.window?.webContents.session.removeWordFromSpellCheckerDictionary(
+      word
+    );
+  })
 });

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();
+    if (cancellationToken) return;
-    await autoUpdater.downloadUpdate(cancellationToken);
+    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"
     }
@@ -112,6 +131,7 @@ async function createWindow() {
   mainWindow.webContents.session.setSpellCheckerDictionaryDownloadURL(
     "http://dictionaries.notesnook.com/"
   );
+  mainWindow.webContents.session.setProxy({ proxyRules: config.proxyRules });
 
   mainWindow.once("closed", () => {
     globalThis.window = null;
@@ -121,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);
@@ -137,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/autolaunch.ts

@@ -25,7 +25,11 @@ Type=Application
 Version=${app.getVersion()}
 Name=${app.getName()}
 Comment=${app.getName()} startup script
-Exec=${process.execPath}${hidden ? " --hidden" : ""}
+Exec=${
+  process.env.APPIMAGE
+    ? `${process.env.APPIMAGE}${hidden ? " --hidden" : ""}`
+    : `${process.execPath}${hidden ? " --hidden" : ""}`
+}
 StartupNotify=false
 Terminal=false`;
 

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,13 +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
+  automaticUpdates: true,
+  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/menu.ts

@@ -131,6 +131,17 @@ function setupMenu() {
       );
     }
 
+    if (params.mediaType === "image")
+      menu.append(
+        new MenuItem({
+          id: "copy-image",
+          label: "Copy Image",
+          click() {
+            globalThis.window?.webContents.copyImageAt(params.x, params.y);
+          }
+        })
+      );
+
     if (params.isEditable)
       menu.append(
         new MenuItem({

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")) {
+      return net.fetch(request, { bypassCustomProtocolHandlers: true });
-        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"
-      });
     }
   });
   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,8 +16,6 @@ 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 "@azure/core-asynciterator-polyfill";
-import "react-native-gesture-handler";
 import {
   THEME_COMPATIBILITY_VERSION,
   useThemeEngineStore
@@ -42,42 +40,25 @@ import { useUserStore } from "./stores/use-user-store";
 I18nManager.allowRTL(false);
 I18nManager.forceRTL(false);
 I18nManager.swapLeftAndRightInRTL(false);
-
+const { appLockEnabled, appLockMode } = SettingsService.get();
-// How app lock works
+if (appLockEnabled || appLockMode !== "none") {
-// 1. User goes to settings and setup app lock with a Pin/Password.
+  useUserStore.getState().lockApp(true);
-// 2. The Pin/Password is used to encrypt a random value or user's encryption key.
+}
-// 3. The encrypted value is stored in MMKV
-// 4. When the app launches, the same value is decrypted with user provided key, if it works, we launch the app otherwise it remains locked.
-// 5. If Biometrics are enabled, the app lock pin/password is stored in keychain. the value can be accessed if fingerprint auth works ONLY.
-// 6. User can  manually enter the pin if biometrics fails.
-// 7. There is no way to enter the app if user forgets the PIN. The only way is to reset app data and start fresh again.
-
-// How to handle app lock for existing users...
-// 1.
 
 const App = () => {
-  const init = useAppEvents();
+  useAppEvents();
+  //@ts-ignore
+  globalThis["IS_MAIN_APP_RUNNING"] = true;
   useEffect(() => {
-    const { appLockEnabled, appLockMode } = SettingsService.get();
+    SettingsService.onFirstLaunch();
-    if (appLockEnabled || appLockMode !== "none") {
-      useUserStore.getState().lockApp(true);
-    }
-
-    //@ts-ignore
-    globalThis["IS_MAIN_APP_RUNNING"] = true;
-    init();
     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_APPLOCK_KEY_SALT = "kBwr1Kre86ebOZ8ThLu2OA";
-const NOTESNOOK_DB_KEY_SALT = "2rcgSprDmRvZ1AAa";
+const NOTESNOOK_DB_KEY_SALT = "SNuzOcEK3amoqL0WvPeKqw";
-const NOTESNOOK_USER_KEY_SALT = "7qO4qeoM6PbsAJ0Q";
 
 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(
+    const key = await Sodium.deriveKey(appLockPassword, appLockCipher.salt);
-      {
+    const decrypted = await decrypt(key, appLockCipher);
-        password: appLockPassword
+
-      },
-      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()
+let loggerLoaded = false;
-  .withInstanceID("notesnook_logs")
+const initializeLogger = async () => {
-  .initialize();
+  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 { initializeLogger };
-
-export { LoggerStorage };

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

@@ -31,7 +31,7 @@ import RNFetchBlob from "react-native-blob-util";
 import { ShareComponent } from "../../components/sheets/export-notes/share";
 import { ToastManager, presentSheet } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { db } from "../database";
+import { DatabaseLogger, db } from "../database";
 import Storage from "../database/storage";
 import { cacheDir, copyFileAsync, releasePermissions } from "./utils";
 import { createCacheDir, exists } from "./io";
@@ -84,8 +84,10 @@ export async function downloadAttachments(
     Platform.OS === "ios"
       ? `${outputFolder}/notesnook-attachments-${Date.now()}.zip`
       : `${cacheDir}/notesnook-attachments.zip`;
-  if (await RNFetchBlob.fs.exists(zipSourceFolder))
+  if (await RNFetchBlob.fs.exists(zipSourceFolder)) {
     await RNFetchBlob.fs.unlink(zipSourceFolder);
+  }
+
   await RNFetchBlob.fs.mkdir(zipSourceFolder);
 
   for (let i = 0; i < attachments.length; i++) {
@@ -127,7 +129,7 @@ export async function downloadAttachments(
         status: FileDownloadStatus.Fail,
         reason: e
       });
-      console.log("Error downloading attachment", e);
+      ToastManager.error(e, "Error downloading attachment");
     }
   }
   if (canceled.current) {
@@ -164,7 +166,7 @@ export async function downloadAttachments(
     } catch (e) {
       releasePermissions(outputFolder);
       sub?.remove();
-      console.log("Error zipping attachments", e);
+      ToastManager.error(e, "Error zipping attachments");
     }
     // Remove source & zip file from cache.
     RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
@@ -192,7 +194,7 @@ export default async function downloadAttachment(
 
   let attachment = await db.attachments.attachment(hash);
   if (!attachment) {
-    console.log("attachment not found");
+    DatabaseLogger.log("Attachment not found");
     return;
   }
 
@@ -207,19 +209,16 @@ export default async function downloadAttachment(
   }
 
   try {
-    console.log(
-      "starting download attachment",
-      attachment.hash,
-      options.groupId
-    );
     await db
       .fs()
       .downloadFile(options.groupId || attachment.hash, attachment.hash);
     if (!(await exists(attachment.hash))) {
+      DatabaseLogger.log("Attachment does not exist after download.");
       return;
     }
 
     if (options.base64 || options.text) {
+      DatabaseLogger.log(`Starting to decrypt... hash: ${attachment.hash}`);
       return await db.attachments.read(
         attachment.hash,
         options.base64 ? "base64" : "text"
@@ -232,6 +231,7 @@ export default async function downloadAttachment(
     );
 
     let key = await db.attachments.decryptKey(attachment.key);
+
     let info = {
       iv: attachment.iv,
       salt: attachment.salt,
@@ -245,7 +245,6 @@ export default async function downloadAttachment(
       chunkSize: attachment.chunkSize,
       appGroupId: IOS_APPGROUPID
     };
-
     let fileUri = await Sodium.decryptFile(
       key,
       info,
@@ -288,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,20 +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;
+  }
 
+  DatabaseLogger.log(`Downloading ${filename}`);
   await createCacheDir();
-
   let { url, headers } = data;
   let path = `${cacheDir}/${filename}`;
 
   try {
     if (await exists(filename)) {
+      DatabaseLogger.log(`File Exists already: ${filename}`);
       return true;
     }
 
@@ -43,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
@@ -60,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;
@@ -90,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;
   }
 }
@@ -99,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;
   }
 }
 
@@ -124,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();
+    const uploadUrl = res.ok ? await res.text() : await res.json();
-    if (!uploadUrl) throw new Error("Unable to resolve attachment upload url");
+
+    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}`);
+    ToastManager.error(e, "File upload failed");
-    DatabaseLogger.error(e);
+    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;
+      if (SettingsService.shouldLockAppOnEnterForeground()) {
-      onUnlockAppRequested();
+        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,
+        zIndex: 999
-        justifyContent: "center"
       }}
+      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

@@ -40,7 +40,8 @@ import { useAttachmentStore } from "../../stores/use-attachment-store";
 import {
   eCloseAttachmentDialog,
   eCloseSheet,
-  eDBItemUpdate
+  eDBItemUpdate,
+  eOnLoadNote
 } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
@@ -53,6 +54,9 @@ import { Notice } from "../ui/notice";
 import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
+import { editorController } from "../../screens/editor/tiptap/utils";
+import SheetProvider from "../sheet-provider";
 
 const Actions = ({
   attachment,
@@ -62,7 +66,7 @@ const Actions = ({
 }: {
   attachment: Attachment;
   setAttachments: (attachments?: VirtualizedGrouping<Attachment>) => void;
-  close: () => void;
+  close?: () => void;
   fwdRef: RefObject<ActionSheetRef>;
 }) => {
   const { colors } = useThemeColors();
@@ -103,7 +107,7 @@ const Actions = ({
           reupload: true,
           hash: attachment.hash,
           context: contextId,
-          type: attachment.type
+          type: attachment.mimeType.startsWith("image") ? "image" : "file"
         });
       },
       icon: "upload"
@@ -169,10 +173,27 @@ const Actions = ({
     {
       name: "Delete",
       onPress: async () => {
+        const relations = await db.relations.to(attachment, "note").get();
         await db.attachments.remove(attachment.hash, false);
         setAttachments();
         eSendEvent(eDBItemUpdate, attachment.id);
-        close();
+        relations
+          .map((relation) => relation.fromId)
+          .forEach(async (id) => {
+            const tab = useTabStore.getState().getTabForNote(id);
+            if (tab !== undefined) {
+              const isFocused = useTabStore.getState().currentTab === tab;
+              if (isFocused) {
+                eSendEvent(eOnLoadNote, {
+                  item: await db.notes.note(id),
+                  forced: true
+                });
+              } else {
+                editorController.current.commands.setLoading(true, tab);
+              }
+            }
+          });
+        close?.();
       },
       icon: "delete-outline"
     }
@@ -198,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
         }}
       >
@@ -218,36 +240,20 @@ const Actions = ({
           style={{
             flexDirection: "row",
             marginBottom: 10,
-            paddingHorizontal: 12
+            paddingHorizontal: 12,
+            marginTop: 6,
+            gap: 10
           }}
         >
-          <Paragraph
+          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
-            size={SIZE.xs}
+            {attachment.mimeType}
-            style={{
-              marginRight: 10
-            }}
-            color={colors.secondary.paragraph}
-          >
-            {attachment.type}
           </Paragraph>
-          <Paragraph
+          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
-            style={{
-              marginRight: 10
-            }}
-            size={SIZE.xs}
-            color={colors.secondary.paragraph}
-          >
             {formatBytes(attachment.size)}
           </Paragraph>
 
           {notes.length ? (
-            <Paragraph
+            <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
-              style={{
-                marginRight: 10
-              }}
-              size={SIZE.xs}
-              color={colors.secondary.paragraph}
-            >
               {notes.length} note
               {notes.length > 1 ? "s" : ""}
             </Paragraph>
@@ -275,7 +281,7 @@ const Actions = ({
         <View
           style={{
             borderBottomWidth: 1,
-            borderBottomColor: colors.secondary.background,
+            borderBottomColor: colors.primary.border,
             marginBottom: 12,
             paddingVertical: 12
           }}
@@ -346,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/download-attachments.tsx

@@ -84,8 +84,9 @@ const DownloadAttachments = ({
     canceled.current = true;
     if (!groupId.current) return;
     console.log(groupId.current, "canceling groupId downloads");
-    await db.fs().cancel(groupId.current, "download");
+    await db.fs().cancel(groupId.current);
     setDownloading(false);
+    setResult(new Map());
     groupId.current = undefined;
   };
 
@@ -201,7 +202,7 @@ const DownloadAttachments = ({
             </Paragraph>
           </View>
         }
-        keyExtractor={(index) => "attachment" + index}
+        keyExtractor={(index) => "attachment_download" + index}
         renderItem={({ index }) => {
           return (
             <AttachmentItem

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

@@ -61,10 +61,15 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
 
   const refresh = React.useCallback(() => {
     if (note) {
-      db.attachments.ofNote(note.id, "all").sorted({
+      db.attachments
-        ...DEFAULT_SORTING,
+        .ofNote(note.id, "all")
-        sortBy: "dateModified"
+        .sorted({
-      });
+          ...DEFAULT_SORTING,
+          sortBy: "dateModified"
+        })
+        .then((attachments) => {
+          setAttachments(attachments);
+        });
     } else {
       db.attachments.all
         .sorted({
@@ -155,7 +160,9 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
 
     switch (type) {
       case "all":
-        items = db.attachments.all;
+        items = note
+          ? db.attachments.ofNote(note.id, "all")
+          : db.attachments.all;
         break;
       case "images":
         items = note
@@ -164,15 +171,17 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
         break;
       case "video":
         items = items = note
-          ? db.attachments.ofNote(note.id, "all")
+          ? db.attachments.ofNote(note.id, "videos")
           : db.attachments.videos;
         break;
       case "audio":
-        items = db.attachments.all;
+        items = note
+          ? db.attachments.ofNote(note.id, "audio")
+          : db.attachments.audios;
         break;
       case "documents":
         items = note
-          ? db.attachments.ofNote(note.id, "all")
+          ? db.attachments.ofNote(note.id, "documents")
           : db.attachments.documents;
     }
 
@@ -346,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/change-password.js

@@ -26,12 +26,15 @@ import {
   ToastManager
 } from "../../services/event-manager";
 import { useUserStore } from "../../stores/use-user-store";
-import { eCloseSheet } from "../../utils/events";
+import { eCloseSheet, eOpenRecoveryKeyDialog } from "../../utils/events";
 import DialogHeader from "../dialog/dialog-header";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
 import { Notice } from "../ui/notice";
 import Seperator from "../ui/seperator";
+import { Dialog } from "../dialog";
+import BackupService from "../../services/backup";
+import { sleep } from "../../utils/time";
 
 export const ChangePassword = () => {
   const passwordInputRef = useRef();
@@ -64,6 +67,9 @@ export const ChangePassword = () => {
     }
     setLoading(true);
     try {
+      const result = await BackupService.run(false, "change-password-dialog");
+      if (!result) throw new Error("Failed to create backup");
+
       await db.user.clearSessions();
       await db.user.changePassword(oldPassword.current, password.current);
       ToastManager.show({
@@ -73,6 +79,8 @@ export const ChangePassword = () => {
       });
       setLoading(false);
       eSendEvent(eCloseSheet);
+      await sleep(300);
+      eSendEvent(eOpenRecoveryKeyDialog);
     } catch (e) {
       setLoading(false);
       ToastManager.show({
@@ -92,6 +100,7 @@ export const ChangePassword = () => {
         padding: 12
       }}
     >
+      <Dialog context="change-password-dialog" />
       <DialogHeader
         title="Change password"
         paragraph="Enter your old and new passwords"
@@ -129,7 +138,14 @@ export const ChangePassword = () => {
       />
 
       <Notice
-        text="Changing password is a non-undoable process. You will be logged out from all your devices. Please make sure you do not close the app while your password is changing and have good internet connection."
+        text={`Changing password is an irreversible process. You will be logged out from all your devices. Please make sure you do not close the app while your password is changing and have good internet connection.`}
+        type="alert"
+      />
+
+      <View style={{ height: 10 }} />
+
+      <Notice
+        text={`Once your password is changed, please make sure to save the new account recovery key.`}
         type="alert"
       />
 

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

@@ -69,6 +69,9 @@ export const SessionExpired = () => {
       eSendEvent(eUserLoggedIn, true);
       setVisible(false);
       setFocused(false);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
     },
     true
   );
@@ -84,6 +87,9 @@ export const SessionExpired = () => {
       MMKV.clearStore();
       clearAllStores();
       setVisible(false);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
     } catch (e) {
       ToastManager.show({
         heading: e.message,
@@ -106,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;
@@ -121,12 +131,14 @@ export const SessionExpired = () => {
         setVisible(false);
       });
     } catch (e) {
-      console.log(e);
       let user = await db.user.getUser();
       if (!user) return;
       email.current = user.email;
       setFocused(false);
       setVisible(true);
+      useUserStore.setState({
+        disableAppLockRequests: true
+      });
     }
   }, [email]);
 
@@ -139,9 +151,15 @@ export const SessionExpired = () => {
         animated={false}
         centered={false}
         onShow={async () => {
+          useUserStore.setState({
+            disableAppLockRequests: true
+          });
           await sleep(300);
           passwordInputRef.current?.focus();
           setFocused(true);
+          useUserStore.setState({
+            disableAppLockRequests: true
+          });
         }}
         enableSheetKeyboardHandler={true}
         visible={true}

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

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

apps/mobile/app/components/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) {
+        const height = event.nativeEvent.layout.height;
-          setHeight(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,
+          borderBottomRightRadius: 5,
-          borderBottomLeftRadius: 10,
+          borderBottomLeftRadius: 5,
           paddingHorizontal: 12,
           borderTopWidth: 0.7,
           borderTopColor: getColorLinearShade(

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

@@ -104,7 +104,7 @@ const DialogHeader = ({
                 title={button.title}
                 icon={button.icon}
                 type={button.type || "secondary"}
-                height={25}
+                height={30}
               />
             ) : null}
           </View>

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,11 +36,15 @@ 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();
   const [visible, setVisible] = useState(false);
-  const [inputValue, setInputValue] = useState(null);
+  const [checked, setChecked] = useState(false);
+  const values = useRef({
+    inputValue: undefined
+  });
   const inputRef = useRef();
   const [dialogInfo, setDialogInfo] = useState({
     title: "",
@@ -66,7 +70,8 @@ export const Dialog = ({ context = "global" }) => {
     if (dialogInfo.positivePress) {
       inputRef.current?.blur();
       let result = await dialogInfo.positivePress(
-        inputValue || dialogInfo.defaultValue
+        values.current.inputValue || dialogInfo.defaultValue,
+        checked
       );
       if (result === false) {
         return;
@@ -81,8 +86,9 @@ export const Dialog = ({ context = "global" }) => {
       if (!data.context) data.context = "global";
       if (data.context !== context) return;
       setDialogInfo(data);
+      setChecked(false);
+      values.current.inputValue = data.defaultValue;
       setVisible(true);
-      setInputValue(data.defaultValue);
     },
     [context]
   );
@@ -98,7 +104,8 @@ export const Dialog = ({ context = "global" }) => {
   }, [show]);
 
   const hide = () => {
-    setInputValue(null);
+    setChecked(false);
+    values.current.inputValue = undefined;
     setVisible(false);
   };
 
@@ -106,7 +113,6 @@ export const Dialog = ({ context = "global" }) => {
     if (dialogInfo.onClose) {
       await dialogInfo.onClose();
     }
-
     hide();
   };
 
@@ -116,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 ? (
@@ -159,7 +166,7 @@ export const Dialog = ({ context = "global" }) => {
               fwdRef={inputRef}
               autoCapitalize="none"
               onChangeText={(value) => {
-                setInputValue(value);
+                values.current.inputValue = value;
               }}
               testID="input-value"
               secureTextEntry={dialogInfo.secureTextEntry}
@@ -167,6 +174,7 @@ export const Dialog = ({ context = "global" }) => {
               onSubmit={onPressPositive}
               returnKeyLabel="Done"
               returnKeyType="done"
+              keyboardType={dialogInfo.keyboardType || "default"}
               placeholder={dialogInfo.inputPlaceholder}
             />
           </View>
@@ -176,10 +184,10 @@ export const Dialog = ({ context = "global" }) => {
           <>
             <Button
               onPress={() => {
-                setInputValue(!inputValue);
+                setChecked(!checked);
               }}
               icon={
-                inputValue
+                checked
                   ? "check-circle-outline"
                   : "checkbox-blank-circle-outline"
               }
@@ -187,9 +195,10 @@ export const Dialog = ({ context = "global" }) => {
                 justifyContent: "flex-start"
               }}
               height={35}
+              iconSize={20}
               width="100%"
               title={dialogInfo.check.info}
-              type={inputValue ? dialogInfo.check.type : "plain"}
+              type={checked ? dialogInfo.check.type || "selected" : "plain"}
             />
           </>
         ) : null}

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
+              accountPass ? null : (
-                name={keyboardType === "password" ? "numeric" : "keyboard"}
+                <IconButton
-                onPress={() => {
+                  name={keyboardType === "password" ? "numeric" : "keyboard"}
-                  setKeyboardType(
+                  onPress={() => {
-                    keyboardType === "password" ? "pin" : "password"
+                    setKeyboardType(
-                  );
+                      keyboardType === "password" ? "pin" : "password"
-                  setSecureTextEntry(false);
+                    );
-                  setImmediate(() => {
+                    setSecureTextEntry(false);
-                    setSecureTextEntry(true);
+                    setImmediate(() => {
-                  });
+                      setSecureTextEntry(true);
-                }}
+                    });
-                style={{
+                  }}
-                  width: 25,
+                  style={{
-                  height: 25,
+                    width: 25,
-                  marginRight: 5
+                    height: 25,
-                }}
+                    marginRight: 5
-                size={SIZE.lg}
+                  }}
-              />
+                  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(
+              const isCurrentPasswordCorrect = accountPass
-                values.current.password
+                ? 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 {
-import { ImagePickerResponse } from "react-native-image-picker";
+  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) => (
+          {response?.map?.((item) => (
-            <TouchableOpacity key={item.fileName} activeOpacity={0.9}>
+            <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) => {
+AttachImage.present = (response: ImageType[], context?: string) => {
-  return new Promise((resolve) => {
+  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

@@ -23,7 +23,6 @@ import { InteractionManager, View } from "react-native";
 import Share from "react-native-share";
 import { notesnook } from "../../../../e2e/test.ids";
 import { db } from "../../../common/database";
-import { editorController } from "../../../screens/editor/tiptap/utils";
 import BiometricService from "../../../services/biometrics";
 import { DDS } from "../../../services/device-detection";
 import {
@@ -35,11 +34,11 @@ import {
 import Navigation from "../../../services/navigation";
 import { getElevationStyle } from "../../../utils/elevation";
 import {
-  eClearEditor,
   eCloseActionSheet,
   eCloseVaultDialog,
   eOnLoadNote,
-  eOpenVaultDialog
+  eOpenVaultDialog,
+  eUpdateNoteInEditor
 } from "../../../utils/events";
 import { deleteItems } from "../../../utils/functions";
 import { tabBarRef } from "../../../utils/global-refs";
@@ -129,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.");
   }
@@ -338,7 +337,26 @@ export class VaultDialog extends Component {
       let verified = await db.user.verifyPassword(this.password);
       if (!(await db.user.getUser())) verified = true;
       if (verified) {
+        let noteIds = [];
+        if (this.state.deleteAll) {
+          const vault = await db.vaults.default();
+          const relations = await db.relations.from(vault, "note").get();
+          noteIds = relations.map((item) => item.toId);
+        }
+
         await db.vault.delete(this.state.deleteAll);
+
+        noteIds.forEach((id) => {
+          eSendEvent(
+            eUpdateNoteInEditor,
+            {
+              id: id,
+              deleted: true
+            },
+            true
+          );
+        });
+
         eSendEvent("vaultUpdated");
         this.setState({
           loading: false
@@ -365,7 +383,22 @@ export class VaultDialog extends Component {
       loading: true
     });
     try {
+      const vault = await db.vaults.default();
+      const relations = await db.relations.from(vault, "note").get();
+      const noteIds = relations.map((item) => item.toId);
+
       await db.vault.clear(this.password);
+
+      noteIds.forEach((id) => {
+        eSendEvent(
+          eUpdateNoteInEditor,
+          {
+            id: id,
+            deleted: true
+          },
+          true
+        );
+      });
       this.setState({
         loading: false
       });
@@ -394,9 +427,10 @@ export class VaultDialog extends Component {
       return;
     } else {
       await db.vault.add(this.state.note.id);
-      if (this.state.note.id === editorController.current?.note?.id) {
+
-        eSendEvent(eClearEditor);
+      console.log("update note event...");
-      }
+      eSendEvent(eUpdateNoteInEditor, this.state.note, true);
+
       this.close();
       ToastManager.show({
         message: "Note locked successfully",
@@ -501,9 +535,7 @@ export class VaultDialog extends Component {
     }
     if (this.state.note?.id) {
       await db.vault.add(this.state.note.id);
-      if (this.state.note.id === editorController.current?.note?.id) {
+      eSendEvent(eUpdateNoteInEditor, this.state.note, true);
-        eSendEvent(eClearEditor);
-      }
       this.setState({
         loading: false
       });
@@ -533,6 +565,7 @@ export class VaultDialog extends Component {
           type: "success",
           context: "global"
         });
+        eSendEvent(eUpdateNoteInEditor, this.state.note, true);
         this.close();
       })
       .catch((e) => {
@@ -553,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",
@@ -569,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 = (
+const error = (stack: string, component: string) => `
-  stack: string,
-  component: string
-) => `Please let us know what happened. What steps we can take to reproduce the issue here.
 
 _______________________________
 Stacktrace: In ${component}::${stack}`;
@@ -39,9 +36,9 @@ class ExceptionHandler extends React.Component<{
     error: Error | null;
     hasError: boolean;
   } = {
-      hasError: false,
+    hasError: false,
-      error: null
+    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,
+                    height: 50,
-                    marginTop: 0,
+                    paddingHorizontal: 24,
-                    paddingHorizontal: 12,
                     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 = () => {
+export const Footer = ({ height = 150 }) => {
-  return <View style={{ 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={
+            color={color || colors.primary.accent}
-              ColorValues[color?.toLowerCase() as keyof typeof ColorValues] ||
-              colors.primary.accent
-            }
             size={SIZE.sm}
             style={{
-              minWidth: 60,
               alignSelf: "center",
               textAlignVertical: "center"
             }}
@@ -117,7 +113,7 @@ export const SectionHeader = React.memo<
             alignItems: "center"
           }}
         >
-          {index === 0 && (
+          {index === 0 ? (
             <>
               <Button
                 onPress={() => {
@@ -126,7 +122,6 @@ export const SectionHeader = React.memo<
                     component: <Sort screen={screen} type={dataType} />
                   });
                 }}
-                hidden={screen === "Reminders"}
                 tooltipText="Change sorting of items in list"
                 title={groupBy}
                 icon={
@@ -180,7 +175,7 @@ export const SectionHeader = React.memo<
                 size={SIZE.lg - 2}
               />
             </>
-          )}
+          ) : null}
         </View>
       </View>
     );

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

@@ -33,11 +33,12 @@ import { notesnook } from "../../../../e2e/test.ids";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 import NotebookScreen from "../../../screens/notebook";
 import { TaggedNotes } from "../../../screens/notes/tagged";
-import { useEditorStore } from "../../../stores/use-editor-store";
 import useNavigationStore from "../../../stores/use-navigation-store";
 import { useRelationStore } from "../../../stores/use-relation-store";
 import { SIZE } from "../../../utils/size";
 
+import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store";
+import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
 import { Properties } from "../../properties";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
@@ -45,7 +46,6 @@ import { ReminderTime } from "../../ui/reminder-time";
 import { TimeSince } from "../../ui/time-since";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
 
 type NoteItemProps = {
   item: Note | BaseTrashItem<Note>;
@@ -73,8 +73,9 @@ const NoteItem = ({
   locked,
   noOpen = false
 }: NoteItemProps) => {
-  const isEditingNote = useEditorStore(
+  const isEditingNote = useTabStore(
-    (state) => state.currentEditingNote === item.id
+    (state) =>
+      state.tabs.find((t) => t.id === state.currentTab)?.noteId === item.id
   );
   const { colors } = useThemeColors();
   const compactMode = useIsCompactModeEnabled(
@@ -210,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,
@@ -225,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
@@ -270,7 +297,7 @@ const NoteItem = ({
                   <Icon
                     testID="icon-star"
                     name="star-outline"
-                    size={SIZE.md}
+                    size={SIZE.sm}
                     style={{
                       marginRight: 6
                     }}
@@ -287,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}
@@ -369,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

@@ -26,17 +26,14 @@ import { DDS } from "../../../services/device-detection";
 import {
   eSendEvent,
   hideSheet,
-  openVault,
   presentSheet
 } from "../../../services/event-manager";
-import { useEditorStore } from "../../../stores/use-editor-store";
-import { useSelectionStore } from "../../../stores/use-selection-store";
 import { eOnLoadNote, eShowMergeDialog } from "../../../utils/events";
 import { tabBarRef } from "../../../utils/global-refs";
 
-import NotePreview from "../../note-history/preview";
-import SelectionWrapper from "../selection-wrapper";
 import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
+import NotePreview from "../../note-history/preview";
+import SelectionWrapper, { selectItem } from "../selection-wrapper";
 
 export const openNote = async (
   item: Note,
@@ -49,51 +46,22 @@ 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) {
+  if (selectItem(item)) return;
-      setSelectedItem(note.id);
-    } else {
-      clearSelection();
-    }
-    return;
-  }
 
   if (note.conflicted) {
     eSendEvent(eShowMergeDialog, note);
     return;
   }
 
-  if (await db.vaults.itemExists(note)) {
-    openVault({
-      item: note,
-      novault: true,
-      locked: true,
-      goToEditor: true,
-      title: "Open note",
-      description: "Unlock note to open it in editor."
-    });
-    return;
-  }
   if (isTrash) {
     if (!note.contentId) return;
 
     const content = await db.content.get(note.contentId as string);
     presentSheet({
-      component: (
+      component: <NotePreview note={item} content={content} />
-        <NotePreview note={item} content={{ type: "tiptap", data: content }} />
-      )
     });
   } else {
-    if (note?.readonly) {
-      useEditorStore.getState().setReadonly(note?.readonly);
-    }
     eSendEvent(eOnLoadNote, {
       item: 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 (selectItem(item)) return;
-  if (selectedItemsList.length > 0 && selectionMode === item.type) {
-    setSelectedItem(item.id);
-    return;
-  } else {
-    clearSelection();
-  }
 
   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 {
+      if (selectItem(item)) return;
-        selectedItemsList,
-        setSelectedItem,
-        selectionMode,
-        clearSelection
-      } = useSelectionStore.getState();
-      if (selectedItemsList.length > 0 && selectionMode === item.type) {
-        setSelectedItem(item.id);
-        return;
-      } else {
-        clearSelection();
-      }
 
       ReminderSheet.present(item, undefined, isSheet);
     };

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

@@ -17,17 +17,18 @@ 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 { Item } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
 import useIsSelected from "../../../hooks/use-selected";
-import { useEditorStore } from "../../../stores/use-editor-store";
+import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store";
-import { Item } from "@notesnook/core";
 
 export const Filler = ({ item, color }: { item: Item; color?: string }) => {
   const { colors } = useThemeColors();
-  const isEditingNote = useEditorStore(
+  const isEditingNote = useTabStore(
-    (state) => state.currentEditingNote === item.id
+    (state) =>
+      state.tabs.find((t) => t.id === state.currentTab)?.noteId === item.id
   );
 
   const [selected] = useIsSelected(item);
@@ -41,8 +42,8 @@ export const Filler = ({ item, color }: { item: Item; color?: string }) => {
         backgroundColor: colors.selected.background,
         borderLeftWidth: 5,
         borderLeftColor: isEditingNote
-          ? item.color
+          ? color
-            ? colors.static[item.color]
+            ? color
             : colors.selected.accent
           : "transparent"
       }}

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 {
+      if (selectItem(item)) return;
-        selectedItemsList,
-        setSelectedItem,
-        selectionMode,
-        clearSelection
-      } = useSelectionStore.getState();
-      if (selectedItemsList.length > 0 && selectionMode === item.type) {
-        setSelectedItem(item.id);
-        return;
-      } else {
-        clearSelection();
-      }
 
       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 () => {
+        refreshTimeout.current = setTimeout(
-          if (idx !== previousIndex.current) return;
+          async () => {
-          const resolvedItem = await items?.item(idx, resolveItems);
+            if (idx !== previousIndex.current) return;
-          if (idx !== previousIndex.current) return;
+            const resolvedItem = await items?.item(idx, resolveItems);
-          refreshItem(resolvedItem);
+            if (idx !== previousIndex.current) return;
-        }, 100);
+            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,
+  DraxListRenderItemContent
-  DraxProvider
 } 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}>
-      <View style={styles.container}>
+      <DraxList
-        <DraxList
+        {...restProps}
-          {...restProps}
+        ref={listRef}
-          ref={listRef}
+        data={getOrderedItems()}
-          data={getOrderedItems()}
+        renderItemContent={renderItemContent}
-          renderItemContent={renderItemContent}
+        itemStyles={{
-          itemStyles={{
+          hoverDragReleasedStyle: {
-            hoverDragReleasedStyle: {
+            display: "none"
-              display: "none"
+          },
-            },
+          hoverDraggingWithoutReceiverStyle: {
-            hoverDraggingWithoutReceiverStyle: {
+            opacity: 0.5
-              opacity: 0.5
+          },
-            },
+          dragReleasedStyle: {
-            dragReleasedStyle: {
+            opacity: 1
-              opacity: 1
+          },
-            },
+          hoverDraggingStyle: {
-            hoverDraggingStyle: {
+            backgroundColor: colors.secondary.background
-              backgroundColor: colors.secondary.background
-            }
-          }}
-          longPressDelay={500}
-          onItemDragStart={() =>
-            useSideBarDraggingStore.setState({
-              dragging: true
-            })
           }
-          itemsDraggable={disableDefaultDrag ? dragging : true}
+        }}
-          lockItemDragsToMainAxis
+        longPressDelay={500}
-          onItemReorder={({ fromIndex, fromItem, toIndex, toItem }) => {
+        onItemDragStart={() =>
-            const newOrder = getOrderedItems().map((item) => item.id);
+          useSideBarDraggingStore.setState({
-            const element = newOrder.splice(fromIndex, 1)[0];
+            dragging: true
-            if (toIndex === 0) {
+          })
-              newOrder.unshift(element);
+        }
-            } else {
+        disableVirtualization
-              newOrder.splice(toIndex, 0, element);
+        itemsDraggable={disableDefaultDrag ? dragging : true}
-            }
+        lockItemDragsToMainAxis
-            setItemsOrder(newOrder);
+        onItemReorder={({ fromIndex, fromItem, toIndex, toItem }) => {
-            onListOrderChanged?.(newOrder);
+          const newOrder = getOrderedItems().map((item) => item.id);
-          }}
+          const element = newOrder.splice(fromIndex, 1)[0];
-          onItemDragEnd={(e) => {
+          if (toIndex === 0) {
-            console.log(e.receiver?.receiveOffset);
+            newOrder.unshift(element);
-          }}
+          } else {
-          keyExtractor={(item) => (item as any).id}
+            newOrder.splice(toIndex, 0, element);
-        />
+          }
-      </View>
+          setItemsOrder(newOrder);
-    </DraxProvider>
+          onListOrderChanged?.(newOrder);
+        }}
+        keyExtractor={(item) => (item as any).id}
+      />
+    </View>
   );
 }
 

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

@@ -25,7 +25,8 @@ import { SafeAreaView, Text, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { db } from "../../common/database";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
-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 { DDS } from "../../services/device-detection";
 import {
@@ -38,7 +39,6 @@ import Sync from "../../services/sync";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { eOnLoadNote, eShowMergeDialog } from "../../utils/events";
 import { SIZE } from "../../utils/size";
-import { sleep } from "../../utils/time";
 import BaseDialog from "../dialog/base-dialog";
 import DialogButtons from "../dialog/dialog-buttons";
 import DialogContainer from "../dialog/dialog-container";
@@ -47,6 +47,7 @@ import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Seperator from "../ui/seperator";
 import Paragraph from "../ui/typography/paragraph";
+import { diff } from "diffblazer";
 
 const MergeConflicts = () => {
   const { colors } = useThemeColors();
@@ -88,10 +89,11 @@ const MergeConflicts = () => {
       });
     }
     Navigation.queueRoutesForUpdate();
-    if (editorController.current?.note?.id === note.id) {
+
+    if (useTabStore.getState().getCurrentNoteId() === note.id) {
       // reload the note in editor
       eSendEvent(eOnLoadNote, {
-        item: editorController.current?.note,
+        item: editorController.current.note.current[note.id],
         forced: true
       });
     }
@@ -311,26 +313,20 @@ const MergeConflicts = () => {
               height: height / 2 - (50 + insets.top / 2),
               backgroundColor: colors.primary.background,
               borderBottomWidth: 1,
-              borderBottomColor: colors.secondary.background
+              borderBottomColor: colors.primary.border
             }}
           >
-            <Editor
+            <ReadonlyEditor
-              noHeader
+              editorId="conflictPrimary"
-              noToolbar
+              onLoad={async (loadContent) => {
-              readonly
-              editorId=":conflictPrimary"
-              onLoad={async () => {
                 const note = await db.notes.note(content.current?.noteId);
                 if (!note) return;
-                await sleep(300);
+                loadContent({
-                eSendEvent(eOnLoadNote + ":conflictPrimary", {
+                  id: note.id,
-                  item: {
+                  data: diff(
-                    ...note,
+                    content.current.conflicted.data,
-                    content: {
+                    content.current.data
-                      ...content.current,
+                  )
-                      isPreview: true
-                    }
-                  }
                 });
               }}
             />
@@ -351,20 +347,14 @@ const MergeConflicts = () => {
               borderRadius: 10
             }}
           >
-            <Editor
+            <ReadonlyEditor
-              noHeader
+              editorId="conflictSecondary"
-              noToolbar
+              onLoad={async (loadContent) => {
-              readonly
-              editorId=":conflictSecondary"
-              onLoad={async () => {
                 const note = await db.notes.note(content.current?.noteId);
                 if (!note) return;
-                await sleep(300);
+                loadContent({
-                eSendEvent(eOnLoadNote + ":conflictSecondary", {
+                  id: note.id,
-                  item: {
+                  data: content.current.conflicted.data
-                    ...note,
-                    content: { ...content.current.conflicted, isPreview: true }
-                  }
                 });
               }}
             />

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,11 +21,11 @@ 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 { useEditorStore } from "../../stores/use-editor-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { useTrashStore } from "../../stores/use-trash-store";
 import { eCloseSheet, eOnLoadNote } from "../../utils/events";
@@ -34,6 +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 { diff } from "diffblazer";
 
 /**
  *
@@ -42,7 +43,6 @@ import Paragraph from "../ui/typography/paragraph";
  */
 export default function NotePreview({ session, content, note }) {
   const { colors } = useThemeColors();
-  const editorId = ":noteHistory";
   const [locked, setLocked] = useState(false);
 
   async function restore() {
@@ -58,10 +58,11 @@ export default function NotePreview({ session, content, note }) {
       return;
     }
     await db.noteHistory.restore(session.id);
-    if (useEditorStore.getState()?.currentEditingNote === session?.noteId) {
+    if (useTabStore.getState().hasTabForNote(session?.noteId)) {
-      if (editorController.current?.note) {
+      const note = editorController.current.note.current[session?.noteId];
+      if (note) {
         eSendEvent(eOnLoadNote, {
-          item: editorController.current?.note,
+          item: note,
           forced: true
         });
       }
@@ -117,22 +118,25 @@ export default function NotePreview({ session, content, note }) {
             flex: 1
           }}
         >
-          <Editor
+          <ReadonlyEditor
-            noHeader
+            editorId="historyPreview"
-            noToolbar
+            onLoad={async (loadContent) => {
-            readonly
+              try {
-            editorId={editorId}
+                if (content.data) {
-            onLoad={async () => {
+                  const _note = note || (await db.notes.note(session?.noteId));
-              const _note = note || (await db.notes.note(session?.noteId));
+                  const currentContent = await db.content.get(_note.contentId);
-              eSendEvent(eOnLoadNote + editorId, {
+                  loadContent({
-                item: {
+                    data: diff(currentContent.data, content.data),
-                  ..._note,
+                    id: _note.id
-                  content: {
+                  });
-                    ...content,
-                    isPreview: true
-                  }
                 }
-              });
+              } catch (e) {
+                ToastManager.error(
+                  e,
+                  "Failed to load history preview",
+                  "local"
+                );
+              }
             }}
           />
         </View>

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

@@ -22,11 +22,13 @@ import { Platform, View } from "react-native";
 import { FlatList } from "react-native-actions-sheet";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
-import { presentSheet } from "../../services/event-manager";
+import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { ColorValues } from "../../utils/colors";
+import { eOnLoadNote } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import SheetProvider from "../sheet-provider";
 import { useSideBarDraggingStore } from "../side-menu/dragging-store";
+import { IconButton } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
 import { ReminderTime } from "../ui/reminder-time";
 import Heading from "../ui/typography/heading";
@@ -36,6 +38,7 @@ import { Items } from "./items";
 import Notebooks from "./notebooks";
 import { Synced } from "./synced";
 import { TagStrip, Tags } from "./tags";
+import { tabBarRef } from "../../utils/global-refs";
 
 const Line = ({ top = 6, bottom = 6 }) => {
   const { colors } = useThemeColors();
@@ -74,6 +77,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
         maxHeight: "100%"
       }}
       nestedScrollEnabled
+      bounces={false}
       data={[0]}
       keyExtractor={() => "properties-scroll-item"}
       renderItem={() => (
@@ -89,31 +93,61 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
             <View
               style={{
                 flexDirection: "row",
-                alignItems: "center"
+                justifyContent: "space-between"
               }}
             >
-              {item.type === "color" ? (
+              <View
-                <Pressable
+                style={{
-                  type="accent"
+                  flexDirection: "row",
-                  accentColor={item.colorCode}
+                  alignItems: "center",
-                  accentText={colors.static.white}
+                  flexShrink: 1
+                }}
+              >
+                {item.type === "color" ? (
+                  <Pressable
+                    type="accent"
+                    accentColor={item.colorCode}
+                    accentText={colors.static.white}
+                    style={{
+                      width: 30,
+                      height: 30,
+                      borderRadius: 100,
+                      marginRight: 10
+                    }}
+                  />
+                ) : null}
+
+                <Heading size={SIZE.lg}>
+                  {item.type === "tag" && !isColor ? (
+                    <Heading size={SIZE.xl} color={colors.primary.accent}>
+                      #
+                    </Heading>
+                  ) : null}
+                  {item.title}
+                </Heading>
+              </View>
+
+              {item.type === "note" ? (
+                <IconButton
+                  name="open-in-new"
+                  type="plain"
+                  color={colors.primary.icon}
+                  size={SIZE.lg}
                   style={{
-                    width: 30,
+                    alignSelf: "flex-start"
-                    height: 30,
+                  }}
-                    borderRadius: 100,
+                  onPress={() => {
-                    marginRight: 10
+                    close();
+                    eSendEvent(eOnLoadNote, {
+                      item: item,
+                      presistTab: true
+                    });
+                    if (!DDS.isTab) {
+                      tabBarRef.current?.goToPage(1);
+                    }
                   }}
                 />
               ) : null}
-
-              <Heading size={SIZE.lg}>
-                {item.type === "tag" && !isColor ? (
-                  <Heading size={SIZE.xl} color={colors.primary.accent}>
-                    #
-                  </Heading>
-                ) : null}
-                {item.title}
-              </Heading>
             </View>
 
             {item.type === "notebook" && item.description ? (
@@ -208,13 +242,14 @@ Properties.present = async (item, buttons = [], isSheet) => {
         "attachments",
         "lock-unlock",
         "trash",
-        "remove-from-topic",
         "remove-from-notebook",
         "history",
         "read-only",
         "reminders",
         "local-only",
         "duplicate",
+        "copy-link",
+        "references",
         ...android,
         ...buttons
       ]);
@@ -228,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/items.js

@@ -22,6 +22,7 @@ import React from "react";
 import { Dimensions, ScrollView, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useActions } from "../../hooks/use-actions";
+import { useStoredRef } from "../../hooks/use-stored-ref";
 import { DDS } from "../../services/device-detection";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { SIZE } from "../../utils/size";
@@ -31,6 +32,8 @@ import Paragraph from "../ui/typography/paragraph";
 
 export const Items = ({ item, buttons, close }) => {
   const { colors } = useThemeColors();
+  const topBarSorting = useStoredRef("topbar-sorting-ref", {});
+
   const dimensions = useSettingStore((state) => state.dimensions);
   const actions = useActions({ item, close });
   const data = actions.filter((i) => buttons.indexOf(i.id) > -1 && !i.hidden);
@@ -45,7 +48,6 @@ export const Items = ({ item, buttons, close }) => {
 
   const _renderRowItem = ({ item }) => (
     <View
-      onPress={item.func}
       key={item.id}
       testID={"icon-" + item.id}
       style={{
@@ -71,7 +73,7 @@ export const Items = ({ item, buttons, close }) => {
         <Icon
           allowFontScaling
           name={item.icon}
-          size={DDS.isTab ? SIZE.xxl : SIZE.lg}
+          size={DDS.isTab ? SIZE.xxl : shouldShrink ? SIZE.xxl : SIZE.lg}
           color={
             item.on
               ? colors.primary.accent
@@ -117,16 +119,23 @@ export const Items = ({ item, buttons, close }) => {
   );
 
   const renderTopBarItem = (item, index) => {
-    const isLast = index === topBarItems.length;
     return (
       <Pressable
-        onPress={item.func}
+        onPress={() => {
+          item.func();
+          setImmediate(() => {
+            const currentValue = topBarSorting.current[item.id] || 0;
+            topBarSorting.current = {
+              ...topBarSorting.current,
+              [item.id]: currentValue + 1
+            };
+          });
+        }}
         key={item.id}
         testID={"icon-" + item.id}
         activeOpacity={1}
         style={{
           alignSelf: "flex-start",
-          marginRight: isLast ? 0 : 10,
           paddingHorizontal: 0,
           width: topBarItemWidth
         }}
@@ -174,34 +183,36 @@ export const Items = ({ item, buttons, close }) => {
     "favorite",
     "copy",
     "share",
+    "lock-unlock",
+    "publish",
     "export",
-    "lock-unlock"
+    "copy-link",
+    "duplicate",
+    "local-only",
+    "read-only"
+  ];
+
+  const bottomBarItemsList = [
+    "notebooks",
+    "add-reminder",
+    "pin-to-notifications",
+    "history",
+    "reminders",
+    "attachments",
+    "references",
+    "trash"
   ];
 
   const topBarItems = data
     .filter((item) => topBarItemsList.indexOf(item.id) > -1)
     .sort((a, b) =>
       topBarItemsList.indexOf(a.id) > topBarItemsList.indexOf(b.id) ? 1 : -1
-    );
+    )
-
+    .sort((a, b) => {
-  const bottomBarItemsList = [
+      return (
-    "notebooks",
+        (topBarSorting.current[b.id] || 0) - (topBarSorting.current[a.id] || 0)
-    "add-reminder",
+      );
-    "pin-to-notifications",
+    });
-    "duplicate",
-    "read-only",
-    "local-only",
-    "history",
-    "reminders",
-    "attachments",
-    "trash"
-  ];
-
-  if (!shouldShrink) {
-    topBarItemsList.push("publish");
-  } else {
-    bottomBarItemsList.splice(4, 0, "publish");
-  }
 
   const bottomGridItems = data
     .filter((item) => bottomBarItemsList.indexOf(item.id) > -1)
@@ -215,8 +226,8 @@ export const Items = ({ item, buttons, close }) => {
     (width - (topBarItems.length * 10 + 14)) / topBarItems.length;
   topBarItemWidth;
 
-  if (topBarItemWidth < 55) {
+  if (topBarItemWidth < 60) {
-    topBarItemWidth = 55;
+    topBarItemWidth = 60;
   }
 
   return item.type === "note" ? (
@@ -225,7 +236,13 @@ export const Items = ({ item, buttons, close }) => {
         horizontal
         style={{
           paddingHorizontal: 12,
-          marginTop: 6
+          marginTop: 6,
+          marginBottom: 6
+        }}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{
+          paddingRight: 25,
+          gap: 5
         }}
       >
         {topBarItems.map(renderTopBarItem)}