ui: fix right clicking when menu is open doesn't close it

Signed-off-by: Ammar Ahmed <40239442+ammarahm-ed@users.noreply.github.com>

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

@@ -147,10 +147,8 @@ 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 sourcemaps
-        uses: actions/upload-artifact@v4
+      - name: Upload signed aab to Github
+        uses: actions/upload-artifact@v2
         with:
-          name: sourcemaps
-          path: |
-            apps/mobile/native/android/app/build/**/*.map
-            packages/editor-mobile/sourcemaps/*.map
+          name: Notesnook.aab
+          path: ${{steps.sign_app.outputs.signedReleaseFile}}

.github/workflows/android.publish.yml

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

.github/workflows/desktop.publish.yml

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

.github/workflows/ios.publish.yml

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

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

@@ -0,0 +1,69 @@
+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@v4
+        uses: actions/upload-artifact@v2
         with:
           name: build
           path: apps/web/build/**/*
@@ -56,7 +56,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Download build
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v3
         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 dayjs @zip.js/zip.js
+          npm install -D @playwright/test otplib
 
       - 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@v4
+        uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: test-results-${{ matrix.shard }}

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

@@ -0,0 +1,32 @@
+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
+.nx/cache

apps/desktop/README.md

@@ -40,35 +40,12 @@ Once you are inside the `./notesnook` directory, run the preparation step:
 npm install
 ```
 
-Now you can finally start the desktop app for development:
+Now you can finally start the desktop app:
 
 ```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,4 +1,3 @@
 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.13",
+  "version": "3.0.2-beta",
   "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.5.0",
+    "better-sqlite3-multiple-ciphers": "^9.4.0",
     "electron-trpc": "0.5.2",
-    "electron-updater": "^6.2.1",
+    "electron-updater": "6.1.4",
     "icojs": "^0.17.1",
-    "sodium-native": "^4.1.1",
+    "sodium-native": "^4.0.6",
     "typed-emitter": "^2.1.0",
     "yargs": "^17.6.2",
     "zod": "^3.21.4"
@@ -27,14 +27,11 @@
     "@types/node": "18.16.1",
     "@types/yargs": "^17.0.24",
     "chokidar": "^3.5.3",
-    "electron": "^29.3.1",
-    "electron-builder": "^24.13.3",
-    "esbuild": "^0.23.0",
-    "kysely": "^0.27.3",
-    "node-gyp-build": "^4.8.0",
-    "prebuildify": "^6.0.1",
+    "electron": "^28.2.1",
+    "electron-builder": "^24.9.1",
+    "esbuild": "^0.20.0",
     "tree-kill": "^1.2.2",
-    "undici": "^6.14.1"
+    "undici": "^6.6.1"
   },
   "optionalDependencies": {
     "dmg-license": "^1.0.11"
@@ -58,8 +55,8 @@
     "productName": "Notesnook",
     "copyright": "Copyright © 2023 Streetwriters (Private) Limited",
     "artifactName": "notesnook_${os}_${arch}.${ext}",
-    "generateUpdatesFilesForAllChannels": true,
     "asar": false,
+    "generateUpdatesFilesForAllChannels": true,
     "files": [
       "!*.chunk.js.map",
       "!*.chunk.js.LICENSE.txt",
@@ -222,7 +219,8 @@
       {
         "provider": "github",
         "repo": "notesnook",
-        "owner": "streetwriters"
+        "owner": "streetwriters",
+        "channel": "beta"
       }
     ]
   }

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

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

apps/desktop/scripts/build.mjs

@@ -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, readFileSync } from "fs";
+import { existsSync } from "fs";
 import yargs from "yargs-parser";
 import os from "os";
 import * as childProcess from "child_process";
@@ -28,29 +28,23 @@ 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(
-    "yarn nx build:desktop @notesnook/web",
-    path.join(__dirname, "..", "..", "..")
-  );
+  await exec(`cd ${webAppPath} && npm run build:desktop`);
 }
 
-// temporary until there's support for prebuilt binaries for linux ARM
-if (os.platform() === "linux") await patchBetterSQLite3();
+// temporary until there's support for prebuilt binaries for windows ARM & linux ARM
+await patchBetterSQLite3();
 
-// if (os.platform() === "win32")
-//   await exec(
-//     `npx prebuildify --arch=arm64 --strip -t electron@${packageJson.devDependencies.electron}`,
-//     path.join(__dirname, "..", "node_modules", "sodium-native")
-//   );
+if (os.platform() === "win32")
+  await exec(
+    "npx prebuildify --arch=arm64 --strip",
+    path.join(__dirname, "..", "node_modules", "sodium-native")
+  );
 
 await fs.cp(path.join(webAppPath, "build"), "build", {
   recursive: true,
@@ -58,19 +52,19 @@ await fs.cp(path.join(webAppPath, "build"), "build", {
 });
 
 if (args.variant === "mas") {
-  await exec(`yarn run bundle:mas`);
+  await exec(`npm run bundle:mas`);
 } else {
-  await exec(`yarn run bundle`);
+  await exec(`npm run bundle`);
 }
 
-await exec(`yarn tsc`);
+await exec(`npx tsc`);
 
 if (args.run) {
-  await exec(`yarn electron-builder --dir --x64`);
+  await exec(`npx electron-builder --dir --x64`);
   if (process.platform === "win32") {
     await exec(`.\\output\\win-unpacked\\Notesnook.exe`);
   } else if (process.platform === "darwin") {
-    await exec(`./output/mac/Notesnook.app/Contents/MacOS/Notesnook`);
+    await exec(`./output/darwin-unpacked/Notesnook`);
   } else {
     await exec(`./output/linux-unpacked/Notesnook`);
   }
@@ -94,7 +88,7 @@ async function patchBetterSQLite3() {
   );
   const json = JSON.parse(await readFile(jsonPath, "utf-8"));
 
-  json.version = "9.5.1";
+  json.version = "9.4.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("yarn electron-builder install-app-deps");
+    await exec("npx electron-rebuild");
   }
 
-  await exec(`yarn run bundle`);
-  execAsync(`yarn`, [`tsc`]);
+  await exec(`npm run bundle`);
+  execAsync(`npx`, [`tsc`]);
 
   if (await isBundleSame()) {
     console.log("Bundle is same. Doing nothing.");
@@ -66,7 +66,7 @@ async function onChange(first) {
 
   if (first) {
     await spawnAndWaitUntil(
-      ["yarn", "nx", "start:desktop", "@notesnook/web"],
+      ["npx", "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(
-    "yarn",
+    "npx",
     ["electron", path.join("build", "electron.js")],
     true,
     cleanup
@@ -169,10 +169,9 @@ async function cleanup() {
 }
 
 async function isBundleSame() {
-  const bundle = Buffer.concat([
-    await fs.readFile(path.join(__dirname, "..", "build", "electron.js")),
-    await fs.readFile(path.join(__dirname, "..", "build", "preload.js"))
-  ]);
+  const bundle = await fs.readFile(
+    path.join(__dirname, "..", "build", "electron.js")
+  );
 
   const hashSum = crypto.createHash("sha256");
   hashSum.update(bundle);

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-TrustedSigning -Endpoint "${Endpoint}" -CodeSigningAccountName "${CodeSigningAccountName}" -CertificateProfileName "${CertificateProfileName}" -FileDigest "${FileDigest}" -TimestampRfc3161 "${TimestampRfc3161}" -TimestampDigest "${TimestampDigest}" -Description "${Description}" -DescriptionUrl "${DescriptionUrl}" -FilesCatalog "${FilesCatalog}"`;
+  const command = `Invoke-AzureCodeSigning -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,7 +24,6 @@ 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();
 
@@ -34,8 +33,7 @@ export const router = t.router({
   spellChecker: spellCheckerRouter,
   updater: updaterRouter,
   bridge: bridgeRouter,
-  safeStorage: safeStorageRouter,
-  window: windowRouter
+  safeStorage: safeStorageRouter
 });
 
 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 { app, dialog, nativeTheme, Notification, shell } from "electron";
+import { 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,7 +32,6 @@ 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();
 
@@ -56,23 +55,6 @@ 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() }))
@@ -152,10 +134,6 @@ export const osIntegrationRouter = t.router({
     await rm(input);
   }),
 
-  restart: t.procedure.query(() => {
-    app.relaunch();
-    app.exit();
-  }),
   showNotification: t.procedure
     .input(NotificationOptions)
     .query(({ input }) => {
@@ -184,45 +162,16 @@ export const osIntegrationRouter = t.router({
     }),
   bringToFront: t.procedure.query(() => bringToFront()),
   changeTheme: t.procedure
-    .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);
-      }
-    ),
+    .input(Theme)
+    .mutation(({ input }) => setTheme(input)),
 
   onThemeChanged: t.procedure.subscription(() =>
     observable<"dark" | "light">((emit) => {
-      const updated = () => {
+      nativeTheme.on("updated", () => {
         if (getTheme() === "system") {
           emit.next(nativeTheme.shouldUseDarkColors ? "dark" : "light");
         }
-      };
-      nativeTheme.on("updated", updated);
-      return () => {
-        nativeTheme.off("updated", updated);
-      };
+      });
     })
   )
 });

apps/desktop/src/api/safe-storage.ts

@@ -23,22 +23,16 @@ import { z } from "zod";
 const t = initTRPC.create();
 
 export const safeStorageRouter = t.router({
-  isEncryptionAvailable: t.procedure.query(() => {
-    return (
-      !process.env.PORTABLE_EXECUTABLE_DIR &&
-      safeStorage.isEncryptionAvailable()
-    );
-  }),
   /**
    * Takes a string and returns an encrypted base64 string
    */
-  encryptString: t.procedure.input(z.string()).query(({ input }) => {
+  encryptString: t.procedure.input(z.string()).query(async ({ input }) => {
     return safeStorage.encryptString(input).toString("base64");
   }),
   /**
    * Takes an encrypted base64 string and returns a string
    */
-  decryptString: t.procedure.input(z.string()).query(({ input }) => {
+  decryptString: t.procedure.input(z.string()).query(async ({ input }) => {
     return safeStorage.decryptString(Buffer.from(input, "base64"));
   })
 });

apps/desktop/src/api/spell-checker.ts

@@ -118,13 +118,5 @@ 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

@@ -1,143 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import 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,20 +28,16 @@ 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 () => {
-    if (cancellationToken) return;
-    cancellationToken = new CancellationToken();
-    await autoUpdater
-      .downloadUpdate(cancellationToken)
-      .finally(() => (cancellationToken = undefined));
+    const cancellationToken = new CancellationToken();
+    await autoUpdater.downloadUpdate(cancellationToken);
   }),
   check: t.procedure.query(async () => {
-    await autoUpdater.checkForUpdates().catch(console.error);
+    await autoUpdater.checkForUpdates();
   }),
 
   toggleAutoUpdates: t.procedure
@@ -61,18 +57,7 @@ export const updaterRouter = t.router({
     "update-not-available"
   ),
   onAvailable: createSubscription<"update-available", UpdateInfo>(
-    "update-available",
-    () => {
-      if (!config.automaticUpdates) return false;
-      autoUpdater.emit("download-progress", {
-        bytesPerSecond: 0,
-        delta: 0,
-        percent: 0,
-        total: 100,
-        transferred: 0
-      });
-      return true;
-    }
+    "update-available"
   ),
   onError: createSubscription("error")
 });
@@ -80,14 +65,12 @@ export const updaterRouter = t.router({
 function createSubscription<
   TName extends keyof AppUpdaterEvents,
   TReturnType = Parameters<AppUpdaterEvents[TName]>[0]
->(eventName: TName, handler?: (args: TReturnType) => boolean) {
+>(eventName: TName) {
   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

@@ -1,83 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import { 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,4 +21,3 @@ 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,7 +35,6 @@ 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()) {
@@ -83,28 +82,10 @@ 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"
     }
@@ -131,7 +112,6 @@ async function createWindow() {
   mainWindow.webContents.session.setSpellCheckerDictionaryDownloadURL(
     "http://dictionaries.notesnook.com/"
   );
-  mainWindow.webContents.session.setProxy({ proxyRules: config.proxyRules });
 
   mainWindow.once("closed", () => {
     globalThis.window = null;
@@ -141,7 +121,7 @@ async function createWindow() {
   setupJumplist();
 
   if (isDevelopment())
-    mainWindow.webContents.openDevTools({ mode: "bottom", activate: true });
+    mainWindow.webContents.openDevTools({ mode: "right", activate: true });
 
   mainWindow.webContents.setWindowOpenHandler((details) => {
     shell.openExternal(details.url);
@@ -157,9 +137,6 @@ 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,11 +23,13 @@ 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 () => {
@@ -41,4 +43,5 @@ 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,11 +25,7 @@ Type=Application
 Version=${app.getVersion()}
 Name=${app.getName()}
 Comment=${app.getName()} startup script
-Exec=${
-  process.env.APPIMAGE
-    ? `${process.env.APPIMAGE}${hidden ? " --hidden" : ""}`
-    : `${process.execPath}${hidden ? " --hidden" : ""}`
-}
+Exec=${process.execPath}${hidden ? " --hidden" : ""}
 StartupNotify=false
 Terminal=false`;
 

apps/desktop/src/utils/autoupdater.ts

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

apps/desktop/src/utils/config.ts

@@ -25,8 +25,7 @@ export const DesktopIntegration = z.object({
   autoStart: z.boolean().optional(),
   startMinimized: z.boolean().optional(),
   minimizeToSystemTray: z.boolean().optional(),
-  closeToSystemTray: z.boolean().optional(),
-  nativeTitlebar: z.boolean().optional()
+  closeToSystemTray: z.boolean().optional()
 });
 
 export type DesktopIntegration = z.infer<typeof DesktopIntegration>;
@@ -36,20 +35,13 @@ export const config = {
     autoStart: false,
     startMinimized: false,
     minimizeToSystemTray: false,
-    closeToSystemTray: false,
-    nativeTitlebar: false
+    closeToSystemTray: false
   },
   privacyMode: false,
   isSpellCheckerEnabled: true,
   zoomFactor: 1,
   theme: nativeTheme.themeSource,
-  automaticUpdates: true,
-  proxyRules: "",
-  customDns: true,
-
-  backgroundColor: nativeTheme.themeSource === "dark" ? "#0f0f0f" : "#ffffff",
-  windowControlsIconColor:
-    nativeTheme.themeSource === "dark" ? "#ffffff" : "#000000"
+  automaticUpdates: true
 };
 
 type ConfigKey = keyof typeof config;

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

@@ -1,37 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import { 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,17 +131,6 @@ 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 { net, protocol } from "electron";
+import { protocol } from "electron";
 import { isDevelopment } from "./index";
 import { createReadStream } from "fs";
 import { extname, normalize } from "path";
@@ -62,7 +62,26 @@ function registerProtocol() {
         headers: { "Content-Type": extensionToMimeType[fileExtension] }
       });
     } else {
-      return net.fetch(request, { bypassCustomProtocolHandlers: true });
+      if (request.headers.has("X-Content-Length")) {
+        request.headers.set(
+          "Content-Length",
+          request.headers.get("X-Content-Length") || "0"
+        );
+        request.headers.delete("X-Content-Length");
+      }
+      const headers = Object.fromEntries(request.headers.entries());
+
+      return await fetch(request.url, {
+        signal: request.signal,
+        mode: request.mode,
+        headers,
+        method: request.method,
+        body: request.body,
+        credentials: request.credentials,
+        referrer: (request as any).referrer,
+        duplex: "half",
+        redirect: "manual"
+      });
     }
   });
   console.info(`${SCHEME} protocol inteception "successful"`);

apps/desktop/src/utils/theme.ts

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

apps/mobile/app/app.tsx

@@ -16,6 +16,8 @@ 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
@@ -40,25 +42,42 @@ import { useUserStore } from "./stores/use-user-store";
 I18nManager.allowRTL(false);
 I18nManager.forceRTL(false);
 I18nManager.swapLeftAndRightInRTL(false);
-const { appLockEnabled, appLockMode } = SettingsService.get();
-if (appLockEnabled || appLockMode !== "none") {
-  useUserStore.getState().lockApp(true);
-}
+
+// How app lock works
+// 1. User goes to settings and setup app lock with a Pin/Password.
+// 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 = () => {
-  useAppEvents();
-  //@ts-ignore
-  globalThis["IS_MAIN_APP_RUNNING"] = true;
+  const init = useAppEvents();
   useEffect(() => {
-    SettingsService.onFirstLaunch();
+    const { appLockEnabled, appLockMode } = SettingsService.get();
+    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,7 +25,6 @@ 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,10 +42,8 @@ export const CipherStorage = new MMKVLoader()
 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 = "kBwr1Kre86ebOZ8ThLu2OA";
-const NOTESNOOK_DB_KEY_SALT = "SNuzOcEK3amoqL0WvPeKqw";
-
+const NOTESNOOK_APPLOCK_KEY_SALT = "notesnook_applock_key_salt";
+const NOTESNOOK_DB_KEY_SALT = "notesnook_database_key";
 const DB_KEY_CIPHER = "databaseKeyCipher";
 const USER_KEY_CIPHER = "userKeyCipher";
 const APPLOCK_CIPHER = "applockCipher";
@@ -117,7 +114,9 @@ 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);
@@ -133,9 +132,12 @@ export async function validateAppLockPassword(appLockPassword) {
   try {
     const appLockCipher = CipherStorage.getMap(APPLOCK_CIPHER);
     if (!appLockCipher) return true;
-    const key = await Sodium.deriveKey(appLockPassword, appLockCipher.salt);
-    const decrypted = await decrypt(key, appLockCipher);
-
+    const decrypted = await decrypt(
+      {
+        password: appLockPassword
+      },
+      appLockCipher
+    );
     DatabaseLogger.info(
       `validateAppLockPassword: ${typeof decrypted === "string"}`
     );
@@ -165,66 +167,54 @@ export async function getDatabaseKey(appLockPassword) {
       );
       DatabaseLogger.info("Getting database key from cipher");
       DB_KEY = databaseKey;
+      return databaseKey;
     }
 
-    if (!DB_KEY) {
-      const hasKey = await Keychain.hasInternetCredentials(
-        KEYCHAIN_SERVER_DBKEY
-      );
-      if (hasKey) {
-        let credentials = await Keychain.getInternetCredentials(
-          KEYCHAIN_SERVER_DBKEY,
-          KEYSTORE_CONFIG
-        );
-
-        DatabaseLogger.info("Getting database key from Keychain");
-        DB_KEY = credentials.password;
-      }
-    }
-
-    if (!DB_KEY) {
-      DatabaseLogger.info("Generating new database key");
-      const password = generatePassword();
-      const derivedDatabaseKey = await Sodium.deriveKey(
-        password,
-        NOTESNOOK_DB_KEY_SALT
-      );
-
-      DB_KEY = derivedDatabaseKey.key;
-
-      await Keychain.setInternetCredentials(
+    const hasKey = await Keychain.hasInternetCredentials(KEYCHAIN_SERVER_DBKEY);
+    if (hasKey) {
+      let credentials = await Keychain.getInternetCredentials(
         KEYCHAIN_SERVER_DBKEY,
-        "notesnook",
-        DB_KEY,
         KEYSTORE_CONFIG
       );
+      DatabaseLogger.info("Getting database key from Keychain");
+      DB_KEY = credentials.password;
+      return credentials.password;
     }
+    DatabaseLogger.info("Generating new database key");
+    const password = generatePassword();
+    const derivedDatabaseKey = await Sodium.deriveKey(
+      password,
+      NOTESNOOK_DB_KEY_SALT
+    );
+    await Keychain.setInternetCredentials(
+      KEYCHAIN_SERVER_DBKEY,
+      "notesnook",
+      derivedDatabaseKey.key,
+      KEYSTORE_CONFIG
+    );
 
-    if (await Keychain.hasInternetCredentials("notesnook")) {
-      const userKeyCredentials = await Keychain.getInternetCredentials(
-        "notesnook",
-        KEYSTORE_CONFIG
+    const userKeyCredentials = await Keychain.getInternetCredentials(
+      "notesnook",
+      KEYSTORE_CONFIG
+    );
+
+    if (userKeyCredentials) {
+      const userKeyCipher = await encrypt(
+        {
+          key: derivedDatabaseKey.key
+        },
+        userKeyCredentials.password
       );
-
-      if (userKeyCredentials) {
-        const userKeyCipher = await encrypt(
-          {
-            key: DB_KEY,
-            salt: NOTESNOOK_DB_KEY_SALT
-          },
-          userKeyCredentials.password
-        );
-        // Store encrypted user key in MMKV
-        MMKV.setMap(USER_KEY_CIPHER, userKeyCipher);
-        await Keychain.resetInternetCredentials("notesnook");
-      }
+      // Store encrypted user key in MMKV
+      MMKV.setMap(USER_KEY_CIPHER, userKeyCipher);
+      await Keychain.resetInternetCredentials("notesnook");
       DatabaseLogger.info("Migrated user credentials to cipher storage");
     }
 
-    return DB_KEY;
+    DB_KEY = derivedDatabaseKey.key;
+
+    return derivedDatabaseKey.key;
   } catch (e) {
-    ToastManager.error(e, "Error getting database key");
-    console.log(e, "error");
     DatabaseLogger.error(e);
     return null;
   }
@@ -235,12 +225,11 @@ export async function deriveCryptoKey(data) {
     let credentials = await Sodium.deriveKey(data.password, data.salt);
     const userKeyCipher = await encrypt(
       {
-        key: await getDatabaseKey(),
-        salt: NOTESNOOK_DB_KEY_SALT
+        key: await getDatabaseKey()
       },
       credentials.key
     );
-    DatabaseLogger.info("User key stored: ", !!userKeyCipher);
+    DatabaseLogger.info("User key stored: ", !!userKeyCipher, credentials);
 
     // Store encrypted user key in MMKV
     MMKV.setMap(USER_KEY_CIPHER, userKeyCipher);
@@ -261,15 +250,15 @@ export async function getCryptoKey(_name) {
 
     const key = await decrypt(
       {
-        key: await getDatabaseKey(),
-        salt: keyCipher.salt
+        key: await getDatabaseKey()
       },
       keyCipher
     );
 
+    DatabaseLogger.info("User key decrypted: ", !!key);
+
     return key;
   } catch (e) {
-    console.log("getCryptoKey", e);
     DatabaseLogger.error(e);
   }
 }
@@ -312,8 +301,6 @@ export async function decrypt(password, data) {
     return undefined;
   let _data = { ...data };
   _data.output = "plain";
-
-  if (!password.salt) password.salt = data.salt;
   return await Sodium.decrypt(password, _data);
 }
 
@@ -326,11 +313,6 @@ export async function decryptMulti(password, data) {
     d.output = "plain";
     return d;
   });
-
-  if (data.length && !password.salt) {
-    password.salt = data[0].salt;
-  }
-
   return await Sodium.decryptMulti(password, data);
 }
 

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

@@ -85,10 +85,4 @@ export async function setupDatabase(password) {
 }
 
 export const db = database;
-let DatabaseLogger = dbLogger.scope(Platform.OS);
-
-const setLogger = () => {
-  DatabaseLogger = dbLogger.scope(Platform.OS);
-};
-
-export { DatabaseLogger, setLogger };
+export const DatabaseLogger = dbLogger;

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

@@ -16,30 +16,14 @@ 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 { SqliteAdapter, SqliteIntrospector, SqliteQueryCompiler } from "kysely";
-import { Platform } from "react-native";
-import { setLogger } from ".";
-import { RNSqliteDriver } from "./sqlite.kysely";
+import { KV } from "./storage";
 
-let loggerLoaded = false;
-const initializeLogger = async () => {
-  if (loggerLoaded) return;
-  await initialize({
-    dialect: (name) => ({
-      createDriver: () => {
-        return new RNSqliteDriver({ async: true, dbName: name });
-      },
-      createAdapter: () => new SqliteAdapter(),
-      createIntrospector: (db) => new SqliteIntrospector(db),
-      createQueryCompiler: () => new SqliteQueryCompiler()
-    }),
-    tempStore: "memory",
-    journalMode: Platform.OS === "ios" ? "DELETE" : "WAL"
-  });
-  setLogger();
-  loggerLoaded = true;
-};
+const LoggerStorage = new MMKVLoader()
+  .withInstanceID("notesnook_logs")
+  .initialize();
 
-export { initializeLogger };
+initialize(new KV(LoggerStorage));
+
+export { LoggerStorage };

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

@@ -16,61 +16,20 @@ 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 { Dimensions, Image, Platform } from "react-native";
+import { Dimensions, Platform } from "react-native";
 import ImageResizer from "@bam.tech/react-native-image-resizer";
 import RNFetchBlob from "react-native-blob-util";
-
-console.log("hello world");
 /**
  * Scale down & compress images to screen width
  * for loading in editor.
  * @returns
  */
 export async function compressToBase64(path, type) {
-  const { width: screenWidth, scale } = Dimensions.get("window");
-  console.log("COMPRESSING TO BASE64...");
-  return new Promise((resolve) => {
-    console.log(path, "image path...");
-
-    Image.getSize(path, async (width) => {
-      console.log("image width", width);
-
-      const response = await ImageResizer.createResizedImage(
-        path,
-        screenWidth * scale,
-        99999,
-        type,
-        width <= 1920 ? 100 : 90,
-        0,
-        undefined,
-        true,
-        {
-          mode: "contain",
-          onlyScaleDown: true
-        }
-      );
-
-      const base64 = await RNFetchBlob.fs.readFile(
-        Platform.OS === "ios"
-          ? response.uri?.replace("file://", "")
-          : response.uri,
-        "base64"
-      );
-      RNFetchBlob.fs.unlink(path.replace("file://", "")).catch(console.log);
-      RNFetchBlob.fs
-        .unlink(response.uri.replace("file://", ""))
-        .catch(console.log);
-
-      resolve(base64);
-    });
-  });
-}
-
-export async function compressToFile(path, type) {
+  const { width, scale } = Dimensions.get("window");
   const response = await ImageResizer.createResizedImage(
     path,
-    1920,
-    99999,
+    width * scale,
+    9999,
     type,
     80,
     0,
@@ -81,6 +40,11 @@ export async function compressToFile(path, type) {
       onlyScaleDown: true
     }
   );
+  const base64 = await RNFetchBlob.fs.readFile(
+    Platform.OS === "ios" ? response.uri?.replace("file://", "") : response.uri,
+    "base64"
+  );
   RNFetchBlob.fs.unlink(path.replace("file://", "")).catch(console.log);
-  return response.uri;
+  RNFetchBlob.fs.unlink(response.uri.replace("file://", "")).catch(console.log);
+  return base64;
 }

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 { DatabaseLogger, db } from "../database";
+import { db } from "../database";
 import Storage from "../database/storage";
 import { cacheDir, copyFileAsync, releasePermissions } from "./utils";
 import { createCacheDir, exists } from "./io";
@@ -84,10 +84,8 @@ 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++) {
@@ -129,7 +127,7 @@ export async function downloadAttachments(
         status: FileDownloadStatus.Fail,
         reason: e
       });
-      ToastManager.error(e, "Error downloading attachment");
+      console.log("Error downloading attachment", e);
     }
   }
   if (canceled.current) {
@@ -166,7 +164,7 @@ export async function downloadAttachments(
     } catch (e) {
       releasePermissions(outputFolder);
       sub?.remove();
-      ToastManager.error(e, "Error zipping attachments");
+      console.log("Error zipping attachments", e);
     }
     // Remove source & zip file from cache.
     RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
@@ -194,7 +192,7 @@ export default async function downloadAttachment(
 
   let attachment = await db.attachments.attachment(hash);
   if (!attachment) {
-    DatabaseLogger.log("Attachment not found");
+    console.log("attachment not found");
     return;
   }
 
@@ -209,16 +207,19 @@ 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"
@@ -231,7 +232,6 @@ export default async function downloadAttachment(
     );
 
     let key = await db.attachments.decryptKey(attachment.key);
-
     let info = {
       iv: attachment.iv,
       salt: attachment.salt,
@@ -245,6 +245,7 @@ export default async function downloadAttachment(
       chunkSize: attachment.chunkSize,
       appGroupId: IOS_APPGROUPID
     };
+
     let fileUri = await Sodium.decryptFile(
       key,
       info,
@@ -287,7 +288,7 @@ export default async function downloadAttachment(
 
     return fileUri;
   } catch (e) {
-    DatabaseLogger.error(e);
+    console.log("download attachment error: ", e);
     if (attachment.dateUploaded) {
       RNFetchBlob.fs
         .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}`)

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

@@ -22,24 +22,20 @@ import NetInfo from "@react-native-community/netinfo";
 import RNFetchBlob from "react-native-blob-util";
 import { ToastManager } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { DatabaseLogger, db } from "../database";
+import { db } from "../database";
 import { cacheDir, fileCheck } from "./utils";
 import { createCacheDir, exists } from "./io";
 
 export async function downloadFile(filename, data, cancelToken) {
-  if (!data) {
-    DatabaseLogger.log(`Error downloading file: ${filename}, reason: No data`);
-    return false;
-  }
+  if (!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;
     }
 
@@ -47,24 +43,13 @@ export async function downloadFile(filename, data, cancelToken) {
       method: "GET",
       headers
     });
-
-    if (!res.ok) {
-      DatabaseLogger.log(
-        `Error downloading file: ${filename}, ${res.status}, ${res.statusText}, reason: Unable to resolve download url`
-      );
+    if (!res.ok)
       throw new Error(`${res.status}: Unable to resolve download url`);
-    }
-
     const downloadUrl = await res.text();
 
-    if (!downloadUrl) {
-      DatabaseLogger.log(
-        `Error downloading file: ${filename}, reason: Unable to resolve download url`
-      );
-      throw new Error("Unable to resolve download url");
-    }
+    if (!downloadUrl) throw new Error("Unable to resolve download url");
     let totalSize = 0;
-    DatabaseLogger.log(`Download starting: ${filename}`);
+    console.log("Download starting");
     let request = RNFetchBlob.config({
       path: path,
       IOSBackgroundTask: true
@@ -75,15 +60,13 @@ export async function downloadFile(filename, data, cancelToken) {
           .getState()
           .setProgress(0, total, filename, recieved, "download");
         totalSize = total;
-        DatabaseLogger.log(`Downloading: ${filename}, ${recieved}/${total}`);
+        console.log("downloading: ", 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;
@@ -107,10 +90,7 @@ export async function downloadFile(filename, data, cancelToken) {
 
     useAttachmentStore.getState().remove(filename);
     RNFetchBlob.fs.unlink(path).catch(console.log);
-    DatabaseLogger.error(e, {
-      url,
-      headers
-    });
+    console.log("Download file error:", e, url, headers);
     return false;
   }
 }
@@ -119,17 +99,18 @@ export async function getUploadedFileSize(hash) {
   try {
     const url = `${hosts.API_HOST}/s3?name=${hash}`;
     const token = await db.tokenManager.getAccessToken();
+
     const attachmentInfo = await fetch(url, {
       method: "HEAD",
       headers: { Authorization: `Bearer ${token}` }
     });
+
     const contentLength = parseInt(
       attachmentInfo.headers?.get("content-length")
     );
     return isNaN(contentLength) ? 0 : contentLength;
   } catch (e) {
-    DatabaseLogger.error(e);
-    return -1;
+    return 0;
   }
 }
 
@@ -143,9 +124,7 @@ export async function checkAttachment(hash) {
 
   try {
     const size = await getUploadedFileSize(hash);
-    if (size === -1) return { success: true };
-
-    if (size === 0) return { failed: "File length is 0." };
+    if (size <= 0) return { failed: "File length is 0." };
   } catch (e) {
     return { failed: e?.message };
   }

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

@@ -17,16 +17,17 @@ 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 Sodium from "@ammarahmed/react-native-sodium";
 import { Platform } from "react-native";
+import Sodium from "@ammarahmed/react-native-sodium";
 import RNFetchBlob from "react-native-blob-util";
-import { IOS_APPGROUPID } from "../../utils/constants";
-import { DatabaseLogger, db } from "../database";
 import { cacheDir, cacheDirOld, getRandomId } from "./utils";
+import { db } from "../database";
+import { compressToBase64 } from "./compress";
+import { IOS_APPGROUPID } from "../../utils/constants";
 
 export async function readEncrypted(filename, key, cipherData) {
   await migrateFilesFromCache();
-  DatabaseLogger.log("Read encrypted file...");
+  console.log("Read encrypted file...");
   let path = `${cacheDir}/${filename}`;
 
   try {
@@ -34,6 +35,10 @@ export async function readEncrypted(filename, key, cipherData) {
       return false;
     }
 
+    const attachment = await db.attachments.attachment(filename);
+    const isPng = /(png)/g.test(attachment?.mimeType || "");
+    const isJpeg = /(jpeg|jpg)/g.test(attachment?.mimeType || "");
+    console.log("decrypting....");
     let output = await Sodium.decryptFile(
       key,
       {
@@ -41,15 +46,25 @@ export async function readEncrypted(filename, key, cipherData) {
         hash: filename,
         appGroupId: IOS_APPGROUPID
       },
-      cipherData.outputType === "base64" ? "base64" : "text"
+      cipherData.outputType === "base64"
+        ? isPng || isJpeg
+          ? "cache"
+          : "base64"
+        : "text"
     );
-
-    DatabaseLogger.log("File decrypted...");
+    console.log("file decrypted...");
+    if (cipherData.outputType === "base64" && (isPng || isJpeg)) {
+      const dCachePath = `${cacheDir}/${output}`;
+      output = await compressToBase64(
+        `file://${dCachePath}`,
+        isPng ? "PNG" : "JPEG"
+      );
+    }
 
     return output;
   } catch (e) {
     RNFetchBlob.fs.unlink(path).catch(console.log);
-    DatabaseLogger.error(e);
+    console.log("readEncrypted", e);
     return false;
   }
 }
@@ -66,7 +81,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");
@@ -76,8 +91,6 @@ 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"
@@ -127,7 +140,7 @@ export async function clearFileStorage() {
 export async function createCacheDir() {
   if (!(await RNFetchBlob.fs.exists(cacheDir))) {
     await RNFetchBlob.fs.mkdir(cacheDir);
-    DatabaseLogger.log("Cache directory created");
+    console.log("Cache directory created");
   }
 }
 
@@ -187,9 +200,6 @@ 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,8 +25,6 @@ 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;
@@ -35,31 +33,13 @@ 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
     });
-
-    const uploadUrl = res.ok ? await res.text() : await res.json();
-
-    if (typeof uploadUrl !== "string") {
-      throw new Error(
-        uploadUrl.error || "Unable to resolve attachment upload url."
-      );
-    }
-
+    if (!res.ok) throw new Error(`${res.status}: Unable to resolve upload url`);
+    const uploadUrl = await res.text();
+    if (!uploadUrl) throw new Error("Unable to resolve attachment upload url");
     let uploadFilePath = `${cacheDir}/${filename}`;
 
     const iosAppGroup =
@@ -70,15 +50,7 @@ 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({
@@ -132,10 +104,8 @@ export async function uploadFile(filename, data, cancelToken) {
     return result;
   } catch (e) {
     useAttachmentStore.getState().remove(filename);
-    ToastManager.error(e, "File upload failed");
-    DatabaseLogger.error(e, "File upload failed", {
-      filename
-    });
+    DatabaseLogger.info(`File upload error: ${filename}, ${e}`);
+    DatabaseLogger.error(e);
     return false;
   }
 }

apps/mobile/app/components/announcements/announcement.js

@@ -23,14 +23,12 @@ import { View } from "react-native";
 import { useMessageStore } from "../../stores/use-message-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { allowedOnPlatform, renderItem } from "./functions";
-import { getContainerBorder } from "../../utils/colors";
 
 export const Announcement = ({ color }) => {
   const { colors } = useThemeColors();
   const announcements = useMessageStore((state) => state.announcements);
   let announcement = announcements.length > 0 ? announcements[0] : null;
   const selectionMode = useSelectionStore((state) => state.selectionMode);
-
   return !announcement || selectionMode ? null : (
     <View
       style={{
@@ -47,8 +45,7 @@ export const Announcement = ({ color }) => {
           borderRadius: 10,
           overflow: "hidden",
           backgroundColor: colors.secondary.background,
-          paddingBottom: 12,
-          ...getContainerBorder(colors.secondary.background)
+          paddingBottom: 12
         }}
       >
         <View

apps/mobile/app/components/announcements/cta.js

@@ -20,13 +20,15 @@ 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 { useThemeColors } from "@notesnook/theme";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
-import { eCloseAnnouncementDialog } from "../../utils/events";
+import Sync from "../../services/sync";
+import { useThemeColors } from "@notesnook/theme";
+import { eCloseAnnouncementDialog, eCloseSheet } 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";
 
@@ -54,6 +56,13 @@ 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 (
@@ -94,7 +103,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 key={item.title}
                 title={item.title}
                 fontSize={SIZE.sm}
-                type="plain"
+                type="gray"
                 onPress={() => onPress(item)}
                 width={null}
                 height={30}
@@ -140,7 +149,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 key={item.title}
                 title={item.title}
                 fontSize={SIZE.xs}
-                type="plain"
+                type="gray"
                 onPress={() => onPress(item)}
                 width={null}
                 height={30}

apps/mobile/app/components/announcements/title.js

@@ -54,7 +54,7 @@ export const Title = ({ text, style = {}, inline }) => {
       </Heading>
 
       <Button
-        type="plain"
+        type="gray"
         icon="close"
         height={null}
         onPress={() => {

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

@@ -18,15 +18,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useCallback, useEffect, useRef } from "react";
-import {
-  AppStateStatus,
-  Platform,
-  TextInput,
-  useWindowDimensions,
-  View
-} from "react-native";
+import { Platform, TextInput, 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,
@@ -39,20 +34,17 @@ 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");
@@ -82,7 +74,6 @@ const verifyUserPassword = async (password: string) => {
 };
 
 const AppLockedOverlay = () => {
-  const initialLaunchBiometricRequest = useRef(true);
   const { colors } = useThemeColors();
   const user = getUser();
   const appLocked = useUserStore((state) => state.appLocked);
@@ -91,9 +82,7 @@ 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
   );
@@ -114,8 +103,6 @@ const AppLockedOverlay = () => {
     )
       return;
 
-    biometricUnlockAwaitingUserInput.current = true;
-
     if (Platform.OS === "android") {
       const activityName = await NotesnookModule.getActivityName();
       if (activityName !== "MainActivity") return;
@@ -128,21 +115,22 @@ const AppLockedOverlay = () => {
     );
     if (unlocked) {
       lockApp(false);
+      enabled(false);
       password.current = undefined;
     }
-    biometricUnlockAwaitingUserInput.current = false;
     setTimeout(() => {
-      if (biometricUnlockAwaitingUserInput.current) return;
+      biometricUnlockAwaitingUserInput.current = false;
       useSettingStore.getState().setRequestBiometrics(false);
-    }, 500);
+    }, 1);
   }, [biometricsAuthEnabled, lockApp]);
 
   const onSubmit = async () => {
     if (!password.current) return;
     try {
       const unlocked = appLockHasPasswordSecurity
-        ? await validateAppLockPassword(password.current)
+        ? validateAppLockPassword(password.current)
         : await verifyUserPassword(password.current);
+
       if (unlocked) {
         if (!appLockHasPasswordSecurity) {
           await setAppLockVerificationCipher(password.current);
@@ -154,13 +142,8 @@ 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);
@@ -168,53 +151,28 @@ const AppLockedOverlay = () => {
   };
 
   useEffect(() => {
-    const prevState = lastAppState.current;
-    lastAppState.current = appState;
-
     if (
-      appState === "active" &&
-      (prevState === "background" || initialLaunchBiometricRequest.current)
-    ) {
-      if (SettingsService.shouldLockAppOnEnterForeground()) {
-        DatabaseLogger.info("Locking app on entering foreground");
-        useUserStore.getState().lockApp(true);
-      }
-
-      if (
-        !(
-          biometricUnlockAwaitingUserInput.current ||
-          useUserStore.getState().disableAppLockRequests ||
-          !appLocked ||
-          useSettingStore.getState().requestBiometrics ||
-          useSettingStore.getState().appDidEnterBackgroundForAction
-        )
-      ) {
-        initialLaunchBiometricRequest.current = false;
-        DatabaseLogger.info("Biometric unlock request");
-        onUnlockAppRequested();
-      }
-    } else {
-      SettingsService.appEnteredBackground();
+      biometricUnlockAwaitingUserInput.current ||
+      useUserStore.getState().disableAppLockRequests
+    )
+      return;
+    if (appLocked && appState === "active") {
+      biometricUnlockAwaitingUserInput.current = true;
+      onUnlockAppRequested();
     }
   }, [appState, onUnlockAppRequested, appLocked]);
 
   return appLocked ? (
-    <KeyboardAwareScrollView
+    <View
       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,
@@ -234,7 +192,7 @@ const AppLockedOverlay = () => {
         <IconButton
           name="fingerprint"
           size={100}
-          style={{
+          customStyle={{
             width: 100,
             height: 100,
             marginBottom: 20,
@@ -327,7 +285,7 @@ const AppLockedOverlay = () => {
           </View>
         </View>
       </View>
-    </KeyboardAwareScrollView>
+    </View>
   ) : null;
 };
 

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

@@ -40,8 +40,7 @@ import { useAttachmentStore } from "../../stores/use-attachment-store";
 import {
   eCloseAttachmentDialog,
   eCloseSheet,
-  eDBItemUpdate,
-  eOnLoadNote
+  eDBItemUpdate
 } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
@@ -51,12 +50,9 @@ import { openNote } from "../list-items/note/wrapper";
 import { DateMeta } from "../properties/date-meta";
 import { Button } from "../ui/button";
 import { Notice } from "../ui/notice";
-import { Pressable } from "../ui/pressable";
+import { PressableButton } 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,
@@ -66,7 +62,7 @@ const Actions = ({
 }: {
   attachment: Attachment;
   setAttachments: (attachments?: VirtualizedGrouping<Attachment>) => void;
-  close?: () => void;
+  close: () => void;
   fwdRef: RefObject<ActionSheetRef>;
 }) => {
   const { colors } = useThemeColors();
@@ -107,7 +103,7 @@ const Actions = ({
           reupload: true,
           hash: attachment.hash,
           context: contextId,
-          type: attachment.mimeType.startsWith("image") ? "image" : "file"
+          type: attachment.type
         });
       },
       icon: "upload"
@@ -118,7 +114,7 @@ const Actions = ({
         setLoading({
           name: "Run file check"
         });
-        const res = await filesystem.checkAttachment(attachment.hash);
+        let res = await filesystem.checkAttachment(attachment.hash);
         if (res.failed) {
           db.attachments.markAsFailed(attachment.id, res.failed);
           setFailed(res.failed);
@@ -173,27 +169,10 @@ 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);
-        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?.();
+        close();
       },
       icon: "delete-outline"
     }
@@ -219,11 +198,10 @@ const Actions = ({
       }}
     >
       <Dialog context={contextId} />
-      <SheetProvider context={contextId} />
       <View
         style={{
           borderBottomWidth: 1,
-          borderBottomColor: colors.primary.border,
+          borderBottomColor: colors.secondary.background,
           marginBottom: notes && notes.length > 0 ? 0 : 12
         }}
       >
@@ -240,20 +218,36 @@ const Actions = ({
           style={{
             flexDirection: "row",
             marginBottom: 10,
-            paddingHorizontal: 12,
-            marginTop: 6,
-            gap: 10
+            paddingHorizontal: 12
           }}
         >
-          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
-            {attachment.mimeType}
+          <Paragraph
+            size={SIZE.xs}
+            style={{
+              marginRight: 10
+            }}
+            color={colors.secondary.paragraph}
+          >
+            {attachment.type}
           </Paragraph>
-          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+          <Paragraph
+            style={{
+              marginRight: 10
+            }}
+            size={SIZE.xs}
+            color={colors.secondary.paragraph}
+          >
             {formatBytes(attachment.size)}
           </Paragraph>
 
           {notes.length ? (
-            <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+            <Paragraph
+              style={{
+                marginRight: 10
+              }}
+              size={SIZE.xs}
+              color={colors.secondary.paragraph}
+            >
               {notes.length} note
               {notes.length > 1 ? "s" : ""}
             </Paragraph>
@@ -281,7 +275,7 @@ const Actions = ({
         <View
           style={{
             borderBottomWidth: 1,
-            borderBottomColor: colors.primary.border,
+            borderBottomColor: colors.secondary.background,
             marginBottom: 12,
             paddingVertical: 12
           }}
@@ -297,7 +291,7 @@ const Actions = ({
             </Heading>
 
             {notes.map((item) => (
-              <Pressable
+              <PressableButton
                 onPress={async () => {
                   eSendEvent(eCloseSheet, contextId);
                   await sleep(150);
@@ -305,7 +299,7 @@ const Actions = ({
                   await sleep(300);
                   openNote(item, (item as any).type === "trash");
                 }}
-                style={{
+                customStyle={{
                   paddingVertical: 12,
                   alignItems: "flex-start",
 
@@ -314,7 +308,7 @@ const Actions = ({
                 key={item.id}
               >
                 <Paragraph size={SIZE.xs}>{item.title}</Paragraph>
-              </Pressable>
+              </PressableButton>
             ))}
           </>
         </View>
@@ -325,7 +319,7 @@ const Actions = ({
           key={item.name}
           buttonType={{
             text:
-              item.name === "Delete"
+              item.name === "Delete" || item.name === "PermDelete"
                 ? colors.error.paragraph
                 : colors.primary.paragraph
           }}
@@ -333,7 +327,7 @@ const Actions = ({
           title={item.name}
           icon={item.icon}
           loading={loading?.name === item.name}
-          type="plain"
+          type="gray"
           fontSize={SIZE.sm}
           style={{
             borderRadius: 0,
@@ -352,7 +346,7 @@ const Actions = ({
         {failed ? (
           <Notice
             type="alert"
-            text={`File check failed: ${failed} Try reuploading the file to fix the issue.`}
+            text={`File check failed with error: ${attachment.failed} Try reuploading the file to fix the issue.`}
             size="small"
           />
         ) : null}

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

@@ -67,8 +67,9 @@ export const AttachmentItem = ({
     Actions.present(attachment, setAttachments, context);
   };
 
-  return hideWhenNotDownloading &&
-    (!currentProgress || !currentProgress.value) ? null : (
+  return (hideWhenNotDownloading &&
+    (!currentProgress || !currentProgress.value)) ||
+    !attachment ? null : (
     <TouchableOpacity
       activeOpacity={0.9}
       onPress={onPress}
@@ -79,111 +80,104 @@ export const AttachmentItem = ({
         padding: 12,
         paddingVertical: 6,
         borderRadius: 5,
-        backgroundColor: colors.secondary.background,
-        minHeight: 45
+        backgroundColor: colors.secondary.background
       }}
     >
-      {!attachment ? null : (
-        <>
-          <View
+      <View
+        style={{
+          flexShrink: 1,
+          flexDirection: "row",
+          alignItems: "center"
+        }}
+      >
+        <View
+          style={{
+            justifyContent: "center",
+            alignItems: "center",
+            marginLeft: -5
+          }}
+        >
+          <Icon name="file" size={SIZE.xxxl} color={colors.primary.icon} />
+
+          <Paragraph
+            adjustsFontSizeToFit
+            size={6}
+            color={colors.static.white}
             style={{
-              flexShrink: 1,
-              flexDirection: "row",
-              alignItems: "center"
+              position: "absolute"
             }}
           >
-            <View
-              style={{
-                justifyContent: "center",
-                alignItems: "center",
-                marginLeft: -5
-              }}
-            >
-              <Icon name="file" size={SIZE.xxxl} color={colors.primary.icon} />
+            {getFileExtension(attachment.filename).toUpperCase()}
+          </Paragraph>
+        </View>
 
-              <Paragraph
-                adjustsFontSizeToFit
-                size={6}
-                color={colors.static.white}
-                style={{
-                  position: "absolute"
-                }}
-              >
-                {getFileExtension(attachment.filename).toUpperCase()}
-              </Paragraph>
-            </View>
+        <View
+          style={{
+            flexShrink: 1,
+            marginLeft: 10
+          }}
+        >
+          <Paragraph
+            size={SIZE.sm - 1}
+            style={{
+              flexWrap: "wrap",
+              marginBottom: 2.5
+            }}
+            numberOfLines={1}
+            lineBreakMode="middle"
+            color={colors.primary.paragraph}
+          >
+            {attachment.filename}
+          </Paragraph>
 
-            <View
-              style={{
-                flexShrink: 1,
-                marginLeft: 10
-              }}
-            >
-              <Paragraph
-                size={SIZE.sm - 1}
-                style={{
-                  flexWrap: "wrap",
-                  marginBottom: 2.5
-                }}
-                numberOfLines={1}
-                lineBreakMode="middle"
-                color={colors.primary.paragraph}
-              >
-                {attachment.filename}
-              </Paragraph>
+          {!hideWhenNotDownloading ? (
+            <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+              {formatBytes(attachment.size)}{" "}
+              {currentProgress?.type
+                ? "(" + currentProgress.type + "ing - tap to cancel)"
+                : ""}
+            </Paragraph>
+          ) : null}
+        </View>
+      </View>
 
-              {!hideWhenNotDownloading ? (
-                <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
-                  {formatBytes(attachment.size)}{" "}
-                  {currentProgress?.type
-                    ? "(" + currentProgress.type + "ing - tap to cancel)"
-                    : ""}
-                </Paragraph>
-              ) : null}
-            </View>
-          </View>
-
-          {currentProgress ? (
-            <TouchableOpacity
-              activeOpacity={0.9}
-              onPress={() => {
-                if (encryption || !pressable) return;
-                db.fs().cancel(attachment.hash);
-                setCurrentProgress(undefined);
-              }}
-              style={{
-                justifyContent: "center",
-                marginLeft: 5,
-                marginTop: 5,
-                marginRight: -5
-              }}
-            >
-              <ProgressCircleComponent
-                size={SIZE.xxl}
-                progress={
-                  currentProgress?.value ? currentProgress?.value / 100 : 0
-                }
-                showsText
-                textStyle={{
-                  fontSize: 10
-                }}
-                color={colors.primary.accent}
-                formatText={(progress) => (progress * 100).toFixed(0)}
-                borderWidth={0}
-                thickness={2}
-              />
-            </TouchableOpacity>
-          ) : (
-            <>
-              {attachment.failed ? (
-                <IconButton
-                  onPress={onPress}
-                  name="alert-circle-outline"
-                  color={colors.error.paragraph}
-                />
-              ) : null}
-            </>
-          )}
+      {currentProgress ? (
+        <TouchableOpacity
+          activeOpacity={0.9}
+          onPress={() => {
+            if (encryption || !pressable) return;
+            db.fs().cancel(attachment.metadata.hash);
+            setCurrentProgress(undefined);
+          }}
+          style={{
+            justifyContent: "center",
+            marginLeft: 5,
+            marginTop: 5,
+            marginRight: -5
+          }}
+        >
+          <ProgressCircleComponent
+            size={SIZE.xxl}
+            progress={currentProgress?.value ? currentProgress?.value / 100 : 0}
+            showsText
+            textStyle={{
+              fontSize: 10
+            }}
+            color={colors.primary.accent}
+            formatText={(progress) => (progress * 100).toFixed(0)}
+            borderWidth={0}
+            thickness={2}
+          />
+        </TouchableOpacity>
+      ) : (
+        <>
+          {attachment.failed ? (
+            <IconButton
+              onPress={onPress}
+              name="alert-circle-outline"
+              color={colors.error.paragraph}
+            />
+          ) : null}
         </>
       )}
     </TouchableOpacity>

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

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

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

@@ -61,21 +61,10 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
 
   const refresh = React.useCallback(() => {
     if (note) {
-      db.attachments
-        .ofNote(note.id, "all")
-        .sorted({
-          ...DEFAULT_SORTING,
-          sortBy: "dateModified"
-        })
-        .then((attachments) => {
-          setAttachments(attachments);
-        });
+      db.attachments.ofNote(note.id, "all").sorted(DEFAULT_SORTING);
     } else {
       db.attachments.all
-        .sorted({
-          ...DEFAULT_SORTING,
-          sortBy: "dateModified"
-        })
+        .sorted(DEFAULT_SORTING)
         .then((attachments) => setAttachments(attachments));
     }
   }, [note]);
@@ -160,9 +149,7 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
 
     switch (type) {
       case "all":
-        items = note
-          ? db.attachments.ofNote(note.id, "all")
-          : db.attachments.all;
+        items = db.attachments.all;
         break;
       case "images":
         items = note
@@ -171,24 +158,19 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
         break;
       case "video":
         items = items = note
-          ? db.attachments.ofNote(note.id, "videos")
+          ? db.attachments.ofNote(note.id, "all")
           : db.attachments.videos;
         break;
       case "audio":
-        items = note
-          ? db.attachments.ofNote(note.id, "audio")
-          : db.attachments.audios;
+        items = db.attachments.all;
         break;
       case "documents":
         items = note
-          ? db.attachments.ofNote(note.id, "documents")
+          ? db.attachments.ofNote(note.id, "all")
           : db.attachments.documents;
     }
 
-    return await items.sorted({
-      ...DEFAULT_SORTING,
-      sortBy: "dateModified"
-    });
+    return await items.sorted(DEFAULT_SORTING);
   };
 
   return (
@@ -227,7 +209,7 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
           ) : (
             <IconButton
               name="check-all"
-              style={{
+              customStyle={{
                 height: 40,
                 width: 40,
                 marginRight: 10
@@ -240,7 +222,7 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
 
           <IconButton
             name="download"
-            style={{
+            customStyle={{
               height: 40,
               width: 40
             }}
@@ -283,9 +265,7 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
         >
           {attachmentTypes.map((item) => (
             <Button
-              type={
-                currentFilter === item.filterBy ? "secondaryAccented" : "plain"
-              }
+              type={currentFilter === item.filterBy ? "grayAccent" : "gray"}
               key={item.title}
               title={item.title}
               style={{
@@ -355,7 +335,6 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
 
 AttachmentDialog.present = (note?: Note) => {
   presentSheet({
-    component: () => <AttachmentDialog note={note} />,
-    keyboardHandlerDisabled: true
+    component: () => <AttachmentDialog note={note} />
   });
 };

apps/mobile/app/components/auth/auth-modal.js

@@ -158,7 +158,7 @@ const AuthModal = () => {
                 hideAuth();
               }}
               iconSize={16}
-              type="plain"
+              type="gray"
               iconPosition="right"
               icon="chevron-right"
               height={25}

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

@@ -26,15 +26,12 @@ import {
   ToastManager
 } from "../../services/event-manager";
 import { useUserStore } from "../../stores/use-user-store";
-import { eCloseSheet, eOpenRecoveryKeyDialog } from "../../utils/events";
+import { eCloseSheet } 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();
@@ -67,9 +64,6 @@ 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({
@@ -79,8 +73,6 @@ export const ChangePassword = () => {
       });
       setLoading(false);
       eSendEvent(eCloseSheet);
-      await sleep(300);
-      eSendEvent(eOpenRecoveryKeyDialog);
     } catch (e) {
       setLoading(false);
       ToastManager.show({
@@ -100,7 +92,6 @@ export const ChangePassword = () => {
         padding: 12
       }}
     >
-      <Dialog context="change-password-dialog" />
       <DialogHeader
         title="Change password"
         paragraph="Enter your old and new passwords"
@@ -138,14 +129,7 @@ export const ChangePassword = () => {
       />
 
       <Notice
-        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.`}
+        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."
         type="alert"
       />
 

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

@@ -113,7 +113,7 @@ export const ForgotPassword = () => {
             }}
           >
             <IconButton
-              style={{
+              customStyle={{
                 width: null,
                 height: null
               }}

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

@@ -59,6 +59,22 @@ const Auth = ({ navigation, route }) => {
         />
       )}
 
+      {/* {initialAuthMode.current === AuthMode.welcomeSignup ? null : (
+        <IconButton
+          name="arrow-left"
+          onPress={() => {
+            hideAuth();
+          }}
+          color={colors.primary.paragraph}
+          customStyle={{
+            position: 'absolute',
+            zIndex: 999,
+            left: 12,
+            top: Platform.OS === 'ios' ? 12 + insets.top : insets.top
+          }}
+        />
+      )} */}
+
       <Toast context="local" />
     </View>
   );

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

@@ -17,16 +17,12 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { 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 Sync from "../../services/sync";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { useUserStore } from "../../stores/use-user-store";
-import { eUserLoggedIn } from "../../utils/events";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import SheetProvider from "../sheet-provider";
@@ -38,6 +34,10 @@ 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, "full");
+        Sync.run("global", false, true);
       }
     }, 5000);
   });
@@ -103,7 +103,7 @@ export const Login = ({ changeMode }) => {
             justifyContent: "flex-end",
             paddingHorizontal: 20,
             backgroundColor: colors.secondary.background,
-            borderBottomWidth: 0.8,
+            borderBottomWidth: 1,
             marginBottom: 12,
             borderBottomColor: colors.primary.border,
             alignSelf: deviceMode !== "mobile" ? "center" : undefined,
@@ -183,11 +183,7 @@ export const Login = ({ changeMode }) => {
             defaultValue={email.current}
             editable={step === LoginSteps.emailAuth && !loading}
             onSubmit={() => {
-              if (step === LoginSteps.emailAuth) {
-                login();
-              } else {
-                passwordInputRef.current?.focus();
-              }
+              passwordInputRef.current?.focus();
             }}
           />
 
@@ -226,7 +222,7 @@ export const Login = ({ changeMode }) => {
                   textDecorationLine: "underline"
                 }}
                 fontSize={SIZE.xs}
-                type="plain"
+                type="gray"
               />
             </>
           )}
@@ -246,7 +242,6 @@ 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,9 +69,6 @@ export const SessionExpired = () => {
       eSendEvent(eUserLoggedIn, true);
       setVisible(false);
       setFocused(false);
-      useUserStore.setState({
-        disableAppLockRequests: false
-      });
     },
     true
   );
@@ -87,9 +84,6 @@ export const SessionExpired = () => {
       MMKV.clearStore();
       clearAllStores();
       setVisible(false);
-      useUserStore.setState({
-        disableAppLockRequests: false
-      });
     } catch (e) {
       ToastManager.show({
         heading: e.message,
@@ -112,11 +106,7 @@ export const SessionExpired = () => {
       if (!res) throw new Error("no token found");
       if (db.tokenManager._isTokenExpired(res))
         throw new Error("token expired");
-
-      const key = await db.user.getEncryptionKey();
-      if (!key) throw new Error("No encryption key found.");
-
-      Sync.run("global", false, "full", async (complete) => {
+      Sync.run("global", false, true, async (complete) => {
         if (!complete) {
           let user = await db.user.getUser();
           if (!user) return;
@@ -131,14 +121,12 @@ 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]);
 
@@ -151,15 +139,9 @@ 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}
@@ -184,7 +166,7 @@ export const SessionExpired = () => {
             }}
           >
             <IconButton
-              style={{
+              customStyle={{
                 width: 60,
                 height: 60
               }}

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

@@ -111,7 +111,7 @@ export const Signup = ({ changeMode, trial }) => {
             paddingHorizontal: 20,
             backgroundColor: colors.secondary.background,
             marginBottom: 20,
-            borderBottomWidth: 0.8,
+            borderBottomWidth: 1,
             borderBottomColor: colors.primary.border,
             alignSelf: deviceMode !== "mobile" ? "center" : undefined,
             borderWidth: deviceMode !== "mobile" ? 1 : null,

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

@@ -32,12 +32,11 @@ import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
-import { Pressable } from "../ui/pressable";
+import { PressableButton } from "../ui/pressable";
 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();
@@ -144,10 +143,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
   }, [currentMethod.method, mfaInfo.token, seconds, sending, start]);
 
   return (
-    <ScrollView
-      keyboardShouldPersistTaps="handled"
-      keyboardDismissMode="interactive"
-    >
+    <View>
       <View
         style={{
           alignItems: "center",
@@ -155,7 +151,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
         }}
       >
         <IconButton
-          style={{
+          customStyle={{
             width: 70,
             height: 70
           }}
@@ -187,7 +183,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
         {currentMethod.method === "sms" || currentMethod.method === "email" ? (
           <Button
             onPress={onSendCode}
-            type={seconds ? "plain" : "transparent"}
+            type={seconds ? "gray" : "transparent"}
             title={
               sending
                 ? ""
@@ -218,7 +214,6 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 code.current = value;
                 //onNext();
               }}
-              onSubmitEditing={onNext}
               caretHidden
               inputStyle={{
                 fontSize: SIZE.lg,
@@ -230,7 +225,6 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
               keyboardType={
                 currentMethod.method === "recoveryCode" ? "default" : "numeric"
               }
-              enablesReturnKeyAutomatically
               containerStyle={{
                 height: 60,
                 borderWidth: 0,
@@ -253,7 +247,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
 
             <Button
               title={secondaryMethodsText[currentMethod.method]}
-              type="plain"
+              type="gray"
               onPress={onRequestSecondaryMethod}
               height={30}
             />
@@ -261,7 +255,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
         ) : (
           <>
             {getMethods().map((item) => (
-              <Pressable
+              <PressableButton
                 key={item.title}
                 onPress={() => {
                   setCurrentMethod({
@@ -269,7 +263,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                     isPrimary: false
                   });
                 }}
-                style={{
+                customStyle={{
                   paddingHorizontal: 12,
                   paddingVertical: 12,
                   marginTop: 0,
@@ -281,8 +275,8 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 }}
               >
                 <IconButton
-                  type="secondaryAccented"
-                  style={{
+                  type="grayAccent"
+                  customStyle={{
                     width: 40,
                     height: 40,
                     marginRight: 10
@@ -298,12 +292,12 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 >
                   <Paragraph size={SIZE.md}>{item.title}</Paragraph>
                 </View>
-              </Pressable>
+              </PressableButton>
             ))}
           </>
         )}
       </View>
-    </ScrollView>
+    </View>
   );
 };
 

apps/mobile/app/components/container/floating-button.tsx

@@ -18,7 +18,6 @@ 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, {
@@ -35,7 +34,7 @@ import { useSettingStore } from "../../stores/use-setting-store";
 import { getElevationStyle } from "../../utils/elevation";
 import { SIZE, normalize } from "../../utils/size";
 import NativeTooltip from "../../utils/tooltip";
-import { Pressable } from "../ui/pressable";
+import { PressableButton } from "../ui/pressable";
 
 interface FloatingButtonProps {
   title: string;
@@ -55,7 +54,6 @@ 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 {
@@ -118,11 +116,11 @@ const FloatingButton = ({
         animatedStyle
       ]}
     >
-      <Pressable
+      <PressableButton
         testID={notesnook.buttons.add}
         type="accent"
         accentColor={color}
-        style={{
+        customStyle={{
           ...getElevationStyle(5),
           borderRadius: 100
         }}
@@ -142,18 +140,12 @@ const FloatingButton = ({
           }}
         >
           <Icon
-            name={
-              route.name === "Notebooks"
-                ? "notebook-plus"
-                : route.name === "Trash"
-                ? "delete"
-                : "plus"
-            }
+            name={title === "Clear all trash" ? "delete" : "plus"}
             color={colors.primary.accentForeground}
             size={SIZE.xxl}
           />
         </View>
-      </Pressable>
+      </PressableButton>
     </Animated.View>
   );
 };

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

@@ -21,16 +21,14 @@ 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);
@@ -45,17 +43,12 @@ export const Container = ({ children }: PropsWithChildren) => {
         paddingTop: Platform.OS === "android" ? 0 : insets.top,
         paddingBottom: Platform.OS === "android" ? 0 : insets.bottom,
         height: height || "100%",
-        width: "100%",
-        backgroundColor: colors.primary.background
+        width: "100%"
       }}
       onLayout={(event) => {
-        const height = event.nativeEvent.layout.height;
-        clearTimeout(timerRef.current);
-        timerRef.current = setTimeout(() => {
-          if (!keyboard.keyboardShown) {
-            setHeight(height);
-          }
-        }, 500);
+        if (!keyboard.keyboardShown) {
+          setHeight(event.nativeEvent.layout.height);
+        }
       }}
     >
       {children}

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

@@ -43,7 +43,6 @@ const DialogProvider = () => {
 
   return (
     <>
-      <AppLockPassword />
       <LoadingDialog />
       <Dialog context="global" />
       <PremiumDialog colors={colors} />
@@ -62,6 +61,7 @@ const DialogProvider = () => {
       <SessionExpired />
       <PDFPreview />
       <JumpToSectionDialog />
+      <AppLockPassword />
     </>
   );
 };

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

@@ -25,7 +25,6 @@ import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
-import { getColorLinearShade } from "../../utils/colors";
 
 const DialogButtons = ({
   onPressPositive,
@@ -36,7 +35,7 @@ const DialogButtons = ({
   doneText,
   positiveType
 }) => {
-  const { colors, isDark } = useThemeColors();
+  const { colors } = useThemeColors();
 
   return (
     <View
@@ -45,15 +44,9 @@ const DialogButtons = ({
         {
           backgroundColor: colors.secondary.background,
           height: 60,
-          borderBottomRightRadius: 5,
-          borderBottomLeftRadius: 5,
-          paddingHorizontal: 12,
-          borderTopWidth: 0.7,
-          borderTopColor: getColorLinearShade(
-            colors.secondary.background,
-            0.05,
-            isDark
-          )
+          borderBottomRightRadius: 10,
+          borderBottomLeftRadius: 10,
+          paddingHorizontal: 12
         }
       ]}
     >
@@ -87,7 +80,7 @@ const DialogButtons = ({
           onPress={onPressNegative}
           fontSize={SIZE.md}
           testID={notesnook.ids.default.dialog.no}
-          type="plain"
+          type="gray"
           bold
           title={negativeTitle}
         />

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

@@ -22,7 +22,6 @@ import { View, ViewProps } from "react-native";
 import { DDS } from "../../services/device-detection";
 import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../utils/elevation";
-import { getContainerBorder } from "../../utils/colors";
 
 const DialogContainer = ({
   width,
@@ -38,15 +37,17 @@ const DialogContainer = ({
   return (
     <View
       {...restProps}
-      style={{
-        ...getElevationStyle(5),
-        width: width || DDS.isTab ? 500 : "85%",
-        maxHeight: height || 450,
-        borderRadius: 10,
-        backgroundColor: colors.primary.background,
-        paddingTop: 12,
-        ...getContainerBorder(colors.secondary.background, 0.8, 0.05)
-      }}
+      style={[
+        {
+          ...getElevationStyle(5),
+          width: width || DDS.isTab ? 500 : "85%",
+          maxHeight: height || 450,
+          borderRadius: 10,
+          backgroundColor: colors.primary.background,
+          paddingTop: 12
+        },
+        style
+      ]}
     />
   );
 };

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

@@ -22,7 +22,7 @@ import { Text, View, ViewStyle } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
-import { PressableProps } from "../ui/pressable";
+import { PressableButtonProps } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 
@@ -34,7 +34,7 @@ type DialogHeaderProps = {
     onPress?: () => void;
     loading?: boolean;
     title?: string;
-    type?: PressableProps["type"];
+    type?: PressableButtonProps["type"];
     icon?: string;
   };
   paragraphColor?: string;
@@ -86,9 +86,7 @@ const DialogHeader = ({
             >
               {title}{" "}
               {titlePart ? (
-                <Text style={{ color: colors.primary.accent }}>
-                  {titlePart}
-                </Text>
+                <Text style={{ color: colors.primary.accent }}>{titlePart}</Text>
               ) : null}
             </Heading>
 
@@ -103,8 +101,8 @@ const DialogHeader = ({
                 fontSize={13}
                 title={button.title}
                 icon={button.icon}
-                type={button.type || "secondary"}
-                height={30}
+                type={button.type || "grayBg"}
+                height={25}
               />
             ) : null}
           </View>

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

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

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

@@ -19,13 +19,12 @@ 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 BiometricService from "../../../services/biometrics";
+import BiometicService from "../../../services/biometrics";
 import { DDS } from "../../../services/device-detection";
 import {
   ToastManager,
@@ -45,7 +44,6 @@ 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";
@@ -68,7 +66,6 @@ export const AppLockPassword = () => {
     confirmPassword?: string;
   }>({});
   const [secureTextEntry, setSecureTextEntry] = useState(true);
-  const [accountPass, setAccountPass] = useState(false);
 
   useEffect(() => {
     const subs = [
@@ -76,7 +73,6 @@ export const AppLockPassword = () => {
         eOpenAppLockPasswordDialog,
         (mode: "create" | "change" | "remove") => {
           setMode(mode);
-          setAccountPass(false);
           setVisible(true);
         }
       ),
@@ -95,7 +91,7 @@ export const AppLockPassword = () => {
     setVisible(false);
   };
 
-  return !visible ? null : (
+  return (
     <BaseDialog
       onShow={async () => {
         await sleep(100);
@@ -130,9 +126,7 @@ export const AppLockPassword = () => {
             mode === "change"
               ? `Change app lock ${keyboardType}`
               : mode === "remove"
-              ? `Enter ${
-                  accountPass ? "account password" : `app lock ${keyboardType}`
-                } to remove ${keyboardType}`
+              ? `Remove app lock ${keyboardType}`
               : `Set up a custom app lock ${keyboardType} to unlock the app`
           }
           icon="shield"
@@ -175,39 +169,33 @@ export const AppLockPassword = () => {
               confirmPasswordInputRef.current?.focus();
             }}
             defaultValue={values.current.password}
-            keyboardType={
-              keyboardType === "pin" && !accountPass ? "number-pad" : "default"
-            }
+            keyboardType={keyboardType === "pin" ? "number-pad" : "default"}
             autoComplete="password"
             returnKeyLabel={mode !== "remove" ? "Next" : "Remove"}
             returnKeyType={mode !== "remove" ? "next" : "done"}
             secureTextEntry={secureTextEntry}
             buttonLeft={
-              accountPass ? null : (
-                <IconButton
-                  name={keyboardType === "password" ? "numeric" : "keyboard"}
-                  onPress={() => {
-                    setKeyboardType(
-                      keyboardType === "password" ? "pin" : "password"
-                    );
-                    setSecureTextEntry(false);
-                    setImmediate(() => {
-                      setSecureTextEntry(true);
-                    });
-                  }}
-                  style={{
-                    width: 25,
-                    height: 25,
-                    marginRight: 5
-                  }}
-                  size={SIZE.lg}
-                />
-              )
+              <IconButton
+                name={keyboardType === "password" ? "numeric" : "keyboard"}
+                onPress={() => {
+                  setKeyboardType(
+                    keyboardType === "password" ? "pin" : "password"
+                  );
+                  setSecureTextEntry(false);
+                  setImmediate(() => {
+                    setSecureTextEntry(true);
+                  });
+                }}
+                customStyle={{
+                  width: 25,
+                  height: 25,
+                  marginRight: 5
+                }}
+                size={SIZE.lg}
+              />
             }
             placeholder={
-              accountPass
-                ? "Account password"
-                : mode === "change"
+              mode === "change"
                 ? `New ${keyboardType}`
                 : `${keyboardType === "pin" ? "Pin" : "Password"}`
             }
@@ -234,36 +222,6 @@ 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
@@ -291,8 +249,7 @@ export const AppLockPassword = () => {
                 );
                 return;
               }
-              const password = values.current.password;
-              setAppLockVerificationCipher(password);
+              await setAppLockVerificationCipher(values.current.password);
               SettingsService.setProperty("appLockHasPasswordSecurity", true);
             } else if (mode === "change") {
               if (
@@ -320,6 +277,7 @@ export const AppLockPassword = () => {
                 );
                 return;
               }
+
               const isCurrentPasswordCorrect = await validateAppLockPassword(
                 values.current.currentPassword
               );
@@ -335,10 +293,8 @@ export const AppLockPassword = () => {
                 return;
               }
 
-              const password = values.current.password;
-              await clearAppLockVerificationCipher();
               SettingsService.setProperty("appLockHasPasswordSecurity", true);
-              await setAppLockVerificationCipher(password);
+              await setAppLockVerificationCipher(values.current.password);
             } else if (mode === "remove") {
               if (!values.current.password) {
                 ToastManager.error(
@@ -349,20 +305,15 @@ export const AppLockPassword = () => {
                 return;
               }
 
-              const isCurrentPasswordCorrect = accountPass
-                ? await db.user.verifyPassword(values.current.password)
-                : await validateAppLockPassword(values.current.password);
+              const isCurrentPasswordCorrect = await validateAppLockPassword(
+                values.current.password
+              );
 
               if (!isCurrentPasswordCorrect) {
                 ToastManager.error(
                   new Error(
-                    accountPass
-                      ? "Account password incorrect"
-                      : `${
-                          keyboardType === "pin" ? "Pin" : "Password"
-                        } incorrect`
+                    `${keyboardType === "pin" ? "Pin" : "Password"} incorrect`
                   ),
-                  undefined,
                   "local"
                 );
                 return;
@@ -371,11 +322,10 @@ export const AppLockPassword = () => {
               SettingsService.setProperty("appLockHasPasswordSecurity", false);
 
               if (
-                !(await BiometricService.isBiometryAvailable()) ||
+                !(await BiometicService.isBiometryAvailable()) ||
                 SettingsService.getProperty("biometricsAuthEnabled") === false
               ) {
                 SettingsService.setProperty("appLockEnabled", false);
-                SettingsService.setPrivacyScreen(SettingsService.get());
                 ToastManager.show({
                   message: "App lock disabled",
                   type: "success"
@@ -390,9 +340,7 @@ export const AppLockPassword = () => {
 
             close();
           }}
-          positiveTitle={
-            mode === "remove" ? "Remove" : mode === "change" ? "Change" : "Save"
-          }
+          positiveTitle="Save"
           negativeTitle="Cancel"
           positiveType="transparent"
           loading={false}

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

@@ -1,196 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-import React, { useState } from "react";
-import {
-  Image,
-  Platform,
-  ScrollView,
-  TouchableOpacity,
-  View
-} from "react-native";
-import { Image as ImageType } from "react-native-image-crop-picker";
-import { useThemeColors } from "../../../../../../packages/theme/dist";
-import { presentSheet } from "../../../services/event-manager";
-import { SIZE } from "../../../utils/size";
-import { Button } from "../../ui/button";
-import { IconButton } from "../../ui/icon-button";
-import { Notice } from "../../ui/notice";
-import Paragraph from "../../ui/typography/paragraph";
-
-export default function AttachImage({
-  response,
-  onAttach,
-  close
-}: {
-  response: ImageType[];
-  onAttach: ({ compress }: { compress: boolean }) => void;
-  close: ((ctx?: string | undefined) => void) | undefined;
-}) {
-  const { colors } = useThemeColors();
-  const [compress, setCompress] = useState(true);
-
-  return (
-    <View
-      style={{
-        alignItems: "center",
-        paddingHorizontal: 12
-      }}
-    >
-      <View
-        style={{
-          backgroundColor: colors.secondary.background,
-          marginBottom: 12,
-          height: 140,
-          width: "100%",
-          borderRadius: 10,
-          padding: 5,
-          paddingHorizontal: 12
-        }}
-      >
-        <Paragraph style={{ color: colors.primary.paragraph, marginBottom: 6 }}>
-          Attaching {response?.length} image(s):
-        </Paragraph>
-        <ScrollView horizontal>
-          {response?.map?.((item) => (
-            <TouchableOpacity key={item.filename} activeOpacity={0.9}>
-              <Image
-                source={{
-                  uri:
-                    Platform.OS === "ios"
-                      ? item.sourceURL || item.path
-                      : item.path
-                }}
-                style={{
-                  width: 100,
-                  height: 100,
-                  borderRadius: 5,
-                  backgroundColor: "black",
-                  marginRight: 6
-                }}
-                resizeMode="cover"
-              />
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-      </View>
-
-      <TouchableOpacity
-        activeOpacity={1}
-        style={{
-          flexDirection: "row",
-          alignSelf: "center",
-          marginBottom: 12,
-          alignItems: "center",
-          width: "100%"
-        }}
-        onPress={() => {
-          setCompress(!compress);
-        }}
-      >
-        <IconButton
-          size={SIZE.lg}
-          name={compress ? "checkbox-marked" : "checkbox-blank-outline"}
-          color={compress ? colors.primary.accent : colors.primary.icon}
-          style={{
-            width: 25,
-            height: 25
-          }}
-          onPress={() => {
-            setCompress(!compress);
-          }}
-        />
-
-        <Paragraph
-          style={{
-            flexShrink: 1,
-            marginLeft: 3
-          }}
-          size={SIZE.sm}
-        >
-          Compress (recommended)
-        </Paragraph>
-      </TouchableOpacity>
-
-      {!compress ? (
-        <Notice
-          type="alert"
-          text="Images uploaded without compression are slow to load and take more bandwidth. We recommend compressing images unless you need image in original quality."
-          size="small"
-          style={{
-            width: "100%",
-            marginBottom: 12
-          }}
-        />
-      ) : (
-        <Notice
-          type="information"
-          text="Compressed images are uploaded in Full HD resolution and usually are good enough for most use cases."
-          size="small"
-          style={{
-            width: "100%",
-            marginBottom: 12
-          }}
-        />
-      )}
-
-      <Button
-        title={`${
-          (response?.length || 0) > 1 ? "Attach Images" : "Attach Image"
-        }`}
-        type="accent"
-        width="100%"
-        onPress={() => {
-          onAttach({
-            compress
-          });
-        }}
-      />
-    </View>
-  );
-}
-
-AttachImage.present = (response: ImageType[], context?: string) => {
-  return new Promise<
-    | {
-        compress: boolean;
-      }
-    | undefined
-  >((resolve) => {
-    let resolved = false;
-    presentSheet({
-      context: context,
-      component: (ref, close, update) => (
-        <AttachImage
-          response={response}
-          close={close}
-          onAttach={(result) => {
-            resolved = true;
-            console.log("closing");
-            resolve(result);
-            close?.();
-          }}
-        />
-      ),
-      onClose: () => {
-        if (resolved) return;
-        resolve(undefined);
-      }
-    });
-  });
-};

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

@@ -32,7 +32,7 @@ import DialogContainer from "../../dialog/dialog-container";
 import { Toast } from "../../toast";
 import { Button } from "../../ui/button";
 import Input from "../../ui/input";
-import { Pressable } from "../../ui/pressable";
+import { PressableButton } from "../../ui/pressable";
 
 const HEX_COLOR_REGEX_ALPHA =
   /^#(?:(?:[\da-fA-F]{3}){1,2}|(?:[\da-fA-F]{4}){1,2})$/;
@@ -56,7 +56,6 @@ const ColorPicker = ({
     <BaseDialog
       visible={visible}
       onRequestClose={() => {
-        title.current = undefined;
         setVisible(false);
         useSettingStore.getState().setSheetKeyboardHandler(true);
       }}
@@ -75,7 +74,7 @@ const ColorPicker = ({
             style={{
               width: "100%",
               height: 250,
-              backgroundColor: colors.primary.background,
+              backgroundColor: selectedColor,
               borderRadius: 10
             }}
           >
@@ -128,10 +127,10 @@ const ColorPicker = ({
                 }}
                 defaultValue={colorRef.current}
               />
-              <Pressable
+              <PressableButton
                 type="accent"
                 accentColor={selectedColor || colors.secondary.background}
-                style={{
+                customStyle={{
                   width: 45,
                   height: 45,
                   borderRadius: 100,
@@ -146,16 +145,12 @@ 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(
@@ -174,6 +169,7 @@ const ColorPicker = ({
                   return ToastManager.error(
                     new Error(`Color #${selectedColor} already exists`)
                   );
+
                 const id = await db.colors.add({
                   title: title.current,
                   colorCode: selectedColor
@@ -186,7 +182,7 @@ const ColorPicker = ({
                   onColorAdded?.(color);
                 }
               }}
-              type={selectedColor ? "secondaryAccented" : "secondary"}
+              type={selectedColor ? "grayAccent" : "grayBg"}
               width="100%"
             />
           </View>

apps/mobile/app/components/dialogs/jump-to-section/index.tsx

@@ -41,7 +41,7 @@ import {
 } from "../../../utils/events";
 import { SIZE } from "../../../utils/size";
 import BaseDialog from "../../dialog/base-dialog";
-import { Pressable } from "../../ui/pressable";
+import { PressableButton } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
 
 const JumpToSectionDialog = () => {
@@ -181,11 +181,11 @@ const JumpToSectionDialog = () => {
             >
               {groups?.map((item, index) => {
                 return (
-                  <Pressable
+                  <PressableButton
                     key={item.group.id}
                     onPress={() => onPress(item)}
                     type={currentIndex === index ? "accent" : "transparent"}
-                    style={{
+                    customStyle={{
                       minWidth: "20%",
                       width: null,
                       paddingHorizontal: 12,
@@ -208,7 +208,7 @@ const JumpToSectionDialog = () => {
                     >
                       {item.group.title}
                     </Paragraph>
-                  </Pressable>
+                  </PressableButton>
                 );
               })}
             </View>

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

@@ -211,7 +211,7 @@ const PDFPreview = () => {
                     color={colors.static.white}
                     name="arrow-left"
                     onPress={close}
-                    style={{
+                    customStyle={{
                       marginRight: 12
                     }}
                     size={SIZE.xxl}

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

@@ -23,6 +23,7 @@ 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 {
@@ -34,11 +35,11 @@ import {
 import Navigation from "../../../services/navigation";
 import { getElevationStyle } from "../../../utils/elevation";
 import {
+  eClearEditor,
   eCloseActionSheet,
   eCloseVaultDialog,
   eOnLoadNote,
-  eOpenVaultDialog,
-  eUpdateNoteInEditor
+  eOpenVaultDialog
 } from "../../../utils/events";
 import { deleteItems } from "../../../utils/functions";
 import { tabBarRef } from "../../../utils/global-refs";
@@ -128,7 +129,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."
+          ? "Unlock note to open it in editor. If biometrics are not working, you can enter device pin to unlock vault."
           : "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.");
   }
@@ -241,6 +242,16 @@ export class VaultDialog extends Component {
       });
       return;
     }
+    if (this.password && this.password.length < 3) {
+      ToastManager.show({
+        heading: "Password too short",
+        message: "Password must be longer than 3 characters.",
+        type: "error",
+        context: "local"
+      });
+
+      return;
+    }
 
     if (!this.state.novault) {
       if (this.password !== this.confirmPassword) {
@@ -337,26 +348,7 @@ 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
@@ -383,22 +375,7 @@ 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
       });
@@ -427,10 +404,9 @@ export class VaultDialog extends Component {
       return;
     } else {
       await db.vault.add(this.state.note.id);
-
-      console.log("update note event...");
-      eSendEvent(eUpdateNoteInEditor, this.state.note, true);
-
+      if (this.state.note.id === editorController.current?.note?.id) {
+        eSendEvent(eClearEditor);
+      }
       this.close();
       ToastManager.show({
         message: "Note locked successfully",
@@ -535,7 +511,9 @@ export class VaultDialog extends Component {
     }
     if (this.state.note?.id) {
       await db.vault.add(this.state.note.id);
-      eSendEvent(eUpdateNoteInEditor, this.state.note, true);
+      if (this.state.note.id === editorController.current?.note?.id) {
+        eSendEvent(eClearEditor);
+      }
       this.setState({
         loading: false
       });
@@ -565,7 +543,6 @@ export class VaultDialog extends Component {
           type: "success",
           context: "global"
         });
-        eSendEvent(eUpdateNoteInEditor, this.state.note, true);
         this.close();
       })
       .catch((e) => {
@@ -586,7 +563,7 @@ export class VaultDialog extends Component {
   }
 
   async _copyNote(note) {
-    Clipboard.setString((await convertNoteToText(note, true)) || "");
+    Clipboard.setString(await convertNoteToText(note));
     ToastManager.show({
       heading: "Note copied",
       type: "success",
@@ -602,7 +579,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);
@@ -891,10 +868,10 @@ export class VaultDialog extends Component {
                 title="Biometric unlocking"
                 iconColor={
                   this.state.biometricUnlock
-                    ? colors.selected.accent
+                    ? colors.selected.icon
                     : colors.primary.icon
                 }
-                type={this.state.biometricUnlock ? "transparent" : "plain"}
+                type={this.state.biometricUnlock ? "transparent" : "selected"}
               />
             ) : null}
           </View>

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

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

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

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

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

@@ -54,7 +54,7 @@ export const LeftMenus = ({
   return isTablet && !canGoBack ? null : (
     <IconButton
       testID={notesnook.ids.default.header.buttons.left}
-      style={{
+      customStyle={{
         justifyContent: "center",
         alignItems: "center",
         height: 40,

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

@@ -23,6 +23,8 @@ import { Platform, StyleSheet, View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
 import Menu from "react-native-reanimated-material-menu";
 import { notesnook } from "../../../e2e/test.ids";
+import Navigation from "../../services/navigation";
+import SearchService from "../../services/search";
 import {
   HeaderRightButton,
   RouteName
@@ -61,7 +63,7 @@ export const RightMenus = ({
           testID="icon-search"
           name="magnify"
           color={colors.primary.paragraph}
-          style={styles.rightBtn}
+          customStyle={styles.rightBtn}
         />
       ) : null}
 
@@ -71,7 +73,7 @@ export const RightMenus = ({
           testID={notesnook.ids.default.addBtn}
           icon={renderedInRoute === "Trash" ? "delete" : "plus"}
           iconSize={SIZE.xl}
-          type="accent"
+          type="shade"
           hitSlop={{
             top: 10,
             right: 10,
@@ -82,7 +84,7 @@ export const RightMenus = ({
             marginLeft: 10,
             width: 32,
             height: 32,
-            borderRadius: 100,
+            borderRadius: 5,
             paddingHorizontal: 0,
             borderWidth: 1,
             borderColor: colors.primary.accent
@@ -108,7 +110,7 @@ export const RightMenus = ({
               }}
               name="dots-vertical"
               color={colors.primary.paragraph}
-              style={styles.rightBtn}
+              customStyle={styles.rightBtn}
             />
           }
         >
@@ -119,7 +121,7 @@ export const RightMenus = ({
                 justifyContent: "flex-start",
                 borderRadius: 0
               }}
-              type="plain"
+              type="gray"
               buttonType={{
                 text: contextMenuColors.primary.paragraph
               }}

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

@@ -19,12 +19,10 @@ 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, useRef, useState } from "react";
+import React, { useEffect, 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 {
@@ -34,13 +32,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);
@@ -50,12 +48,11 @@ const ImagePreview = () => {
   }, []);
 
   const open = async (image: ImageAttributes) => {
-    imageRef.current = image;
     setVisible(true);
     setLoading(true);
     setTimeout(async () => {
       let hash = image.hash;
-      if (!hash && image.src && dataurl.toObject(image.src)) {
+      if (!hash && dataurl.toObject(image.src)) {
         const data = dataurl.toObject(image.src);
         if (!data) return;
         hash = await Sodium.hashFile({
@@ -63,9 +60,6 @@ const ImagePreview = () => {
           type: "base64",
           uri: ""
         });
-        if (imageRef.current) {
-          imageRef.current.hash = hash;
-        }
       }
       if (!hash) return;
       //@ts-ignore // FIX ME
@@ -86,13 +80,7 @@ const ImagePreview = () => {
 
   return (
     visible && (
-      <BaseDialog
-        background="black"
-        animation="slide"
-        visible={true}
-        onRequestClose={close}
-        transparent
-      >
+      <BaseDialog animation="slide" visible={true} onRequestClose={close}>
         <View
           style={{
             width: "100%",
@@ -113,21 +101,6 @@ 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
@@ -144,12 +117,13 @@ const ImagePreview = () => {
                     width: "100%",
                     justifyContent: "flex-end",
                     alignItems: "center",
-                    height: 50,
-                    paddingHorizontal: 24,
+                    height: 80,
+                    marginTop: 0,
+                    paddingHorizontal: 12,
                     position: "absolute",
                     zIndex: 999,
                     backgroundColor: "rgba(0,0,0,0.3)",
-                    marginTop: Platform.OS === "android" ? 30 : 0
+                    paddingTop: Platform.OS === "android" ? 30 : 0
                   }}
                 >
                   <IconButton
@@ -163,7 +137,7 @@ const ImagePreview = () => {
               )}
               imageUrls={[
                 {
-                  url: image as string
+                  url: image
                 }
               ]}
             />

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

@@ -108,7 +108,7 @@ export const WelcomeNotice = () => {
           eSendEvent(eCloseLoading);
         }}
         iconSize={20}
-        type="plain"
+        type="gray"
         iconPosition="right"
         icon="chevron-right"
         height={25}

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 = ({ height = 150 }) => {
-  return <View style={{ height: height }} />;
+export const Footer = () => {
+  return <View style={{ height: 150 }} />;
 };

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

@@ -95,7 +95,7 @@ export const NotebookHeader = ({
           style={{
             flexShrink: 1
           }}
-          size={SIZE.lg}
+          size={SIZE.xxl}
         >
           {notebook.title}
         </Heading>
@@ -109,12 +109,12 @@ export const NotebookHeader = ({
             name={isPinnedToMenu ? "link-variant-off" : "link-variant"}
             onPress={onPinNotebook}
             tooltipText={"Create shortcut in side menu"}
-            style={{
+            customStyle={{
               marginRight: 15,
               width: 40,
               height: 40
             }}
-            type="transparent"
+            type={isPinnedToMenu ? "grayBg" : "grayBg"}
             color={isPinnedToMenu ? colors.primary.accent : colors.primary.icon}
             size={SIZE.lg}
           />
@@ -123,9 +123,9 @@ export const NotebookHeader = ({
             onPress={onEditNotebook}
             tooltipText="Edit this notebook"
             name="pencil"
-            type="transparent"
+            type="grayBg"
             color={colors.primary.icon}
-            style={{
+            customStyle={{
               width: 40,
               height: 40
             }}
@@ -134,7 +134,7 @@ export const NotebookHeader = ({
       </View>
 
       {notebook.description ? (
-        <Paragraph size={SIZE.sm} color={colors.primary.paragraph}>
+        <Paragraph size={SIZE.md} color={colors.primary.paragraph}>
           {notebook.description}
         </Paragraph>
       ) : null}
@@ -148,6 +148,10 @@ 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 { getContainerBorder } from "../../../utils/colors";
+import { ColorValues } from "../../../utils/colors";
 import { GROUP } from "../../../utils/constants";
 import { SIZE } from "../../../utils/size";
 import Sort from "../../sheets/sort";
@@ -80,8 +80,7 @@ export const SectionHeader = React.memo<
           backgroundColor: colors.secondary.background,
           alignSelf: "center",
           borderRadius: 5,
-          marginVertical: 5,
-          ...getContainerBorder(colors.secondary.background, 0.8)
+          marginVertical: 5
         }}
       >
         <TouchableOpacity
@@ -96,9 +95,13 @@ export const SectionHeader = React.memo<
           }}
         >
           <Heading
-            color={color || colors.primary.accent}
+            color={
+              ColorValues[color?.toLowerCase() as keyof typeof ColorValues] ||
+              colors.primary.accent
+            }
             size={SIZE.sm}
             style={{
+              minWidth: 60,
               alignSelf: "center",
               textAlignVertical: "center"
             }}
@@ -113,7 +116,7 @@ export const SectionHeader = React.memo<
             alignItems: "center"
           }}
         >
-          {index === 0 ? (
+          {index === 0 && (
             <>
               <Button
                 onPress={() => {
@@ -122,6 +125,7 @@ export const SectionHeader = React.memo<
                     component: <Sort screen={screen} type={dataType} />
                   });
                 }}
+                hidden={screen === "Reminders"}
                 tooltipText="Change sorting of items in list"
                 title={groupBy}
                 icon={
@@ -141,12 +145,12 @@ export const SectionHeader = React.memo<
                       ? 10
                       : 0
                 }}
-                type="plain"
+                type="gray"
                 iconPosition="right"
               />
 
               <IconButton
-                style={{
+                customStyle={{
                   width: 25,
                   height: 25
                 }}
@@ -175,7 +179,7 @@ export const SectionHeader = React.memo<
                 size={SIZE.lg - 2}
               />
             </>
-          ) : null}
+          )}
         </View>
       </View>
     );

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

@@ -33,12 +33,11 @@ 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";
@@ -46,6 +45,7 @@ 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,9 +73,8 @@ const NoteItem = ({
   locked,
   noOpen = false
 }: NoteItemProps) => {
-  const isEditingNote = useTabStore(
-    (state) =>
-      state.tabs.find((t) => t.id === state.currentTab)?.noteId === item.id
+  const isEditingNote = useEditorStore(
+    (state) => state.currentEditingNote === item.id
   );
   const { colors } = useThemeColors();
   const compactMode = useIsCompactModeEnabled(
@@ -118,8 +117,8 @@ const NoteItem = ({
                   tooltipText={item.title}
                   key={item.id}
                   height={25}
-                  icon="book-outline"
-                  type="secondary"
+                  icon={item.type === "notebook" ? "bookmark" : "book-outline"}
+                  type="grayBg"
                   fontSize={SIZE.xs}
                   iconSize={SIZE.sm}
                   textStyle={{
@@ -128,6 +127,8 @@ const NoteItem = ({
                   style={{
                     borderRadius: 5,
                     marginRight: 5,
+                    borderWidth: 0.5,
+                    borderColor: primaryColors.border,
                     paddingHorizontal: 6,
                     marginBottom: 5
                   }}
@@ -211,31 +212,6 @@ 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,
@@ -251,13 +227,12 @@ const NoteItem = ({
                     style={{
                       flexDirection: "row",
                       alignItems: "center",
-                      marginRight: 6,
-                      gap: 2
+                      marginRight: 6
                     }}
                   >
                     <Icon
                       name="attachment"
-                      size={SIZE.sm}
+                      size={SIZE.md}
                       color={primaryColors.icon}
                     />
                     <Paragraph
@@ -297,7 +272,7 @@ const NoteItem = ({
                   <Icon
                     testID="icon-star"
                     name="star-outline"
-                    size={SIZE.sm}
+                    size={SIZE.md}
                     style={{
                       marginRight: 6
                     }}
@@ -312,10 +287,9 @@ const NoteItem = ({
                           title={"#" + item.title}
                           key={item.id}
                           height={23}
-                          type="plain"
+                          type="gray"
                           textStyle={{
-                            textDecorationLine: "underline",
-                            color: colors.secondary.paragraph
+                            textDecorationLine: "underline"
                           }}
                           hitSlop={{ top: 8, bottom: 12, left: 0, right: 0 }}
                           fontSize={SIZE.xs}
@@ -397,7 +371,7 @@ const NoteItem = ({
               <Icon
                 testID="icon-star"
                 name="star-outline"
-                size={SIZE.sm}
+                size={SIZE.md}
                 style={{
                   marginRight: 6
                 }}
@@ -423,7 +397,7 @@ const NoteItem = ({
           name="dots-horizontal"
           size={SIZE.xl}
           onPress={() => !noOpen && Properties.present(item)}
-          style={{
+          customStyle={{
             justifyContent: "center",
             height: 35,
             width: 35,

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

@@ -26,14 +26,17 @@ 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 { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
 import NotePreview from "../../note-history/preview";
-import SelectionWrapper, { selectItem } from "../selection-wrapper";
+import SelectionWrapper from "../selection-wrapper";
+import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
 
 export const openNote = async (
   item: Note,
@@ -46,22 +49,51 @@ 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 (selectItem(item)) return;
+    if (selectedItemsList.length > 0 && selectionMode === item.type) {
+      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: <NotePreview note={item} content={content} />
+      component: (
+        <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/index.tsx

@@ -198,7 +198,7 @@ export const NotebookItem = ({
           testID={notesnook.ids.notebook.menu}
           size={SIZE.xl}
           onPress={() => Properties.present(item)}
-          style={{
+          customStyle={{
             justifyContent: "center",
             height: 35,
             width: 35,