web: re-enable service worker

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

.github/workflows/desktop.publish.yml

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

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

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

.github/workflows/web.tests.yml

@@ -67,7 +67,7 @@ jobs:
       - name: Install packages
         run: |
           npm ci --ignore-scripts --prefer-offline --no-audit
-          npm install -D @playwright/test otplib
+          npm install -D @playwright/test otplib dayjs @zip.js/zip.js
 
       - name: Validate build extraction
         run: ls -ld ./apps/web/build/index.html

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

@@ -1,32 +0,0 @@
-name: Publish @notesnook/web v3 Beta
-
-on:
-  workflow_dispatch:
-
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup Node
-        uses: ./.github/actions/setup-node-with-cache
-
-      - name: Install packages
-        run: |
-          npm ci --ignore-scripts --prefer-offline --no-audit
-          npm run bootstrap -- --scope=web
-
-      - name: Setup environment
-        run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
-          echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
-          echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
-
-      - name: Build
-        run: npm run build:web
-
-      - name: Publish to Cloudflare Pages
-        run: npx --yes wrangler pages deploy --project-name=notesnook-v3-beta ./apps/web/build/

.gitignore

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

apps/desktop/package-lock.json

@@ -1,23 +1,23 @@
 {
   "name": "@notesnook/desktop",
-  "version": "3.0.6-beta",
+  "version": "3.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@notesnook/desktop",
-      "version": "3.0.6-beta",
+      "version": "3.0.1",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@notesnook/crypto": "file:../../packages/crypto",
         "@trpc/client": "10.38.3",
         "@trpc/server": "10.38.3",
-        "better-sqlite3-multiple-ciphers": "^9.4.0",
+        "better-sqlite3-multiple-ciphers": "^9.5.0",
         "electron-trpc": "0.5.2",
         "electron-updater": "6.1.4",
         "icojs": "^0.17.1",
-        "sodium-native": "^4.0.6",
+        "sodium-native": "^4.1.1",
         "typed-emitter": "^2.1.0",
         "yargs": "^17.6.2",
         "zod": "^3.21.4"
@@ -26,11 +26,13 @@
         "@types/node": "18.16.1",
         "@types/yargs": "^17.0.24",
         "chokidar": "^3.5.3",
-        "electron": "^28.2.1",
-        "electron-builder": "^24.9.1",
+        "electron": "^29.3.1",
+        "electron-builder": "^24.13.3",
         "esbuild": "^0.20.0",
+        "node-gyp-build": "^4.8.0",
+        "prebuildify": "^6.0.1",
         "tree-kill": "^1.2.2",
-        "undici": "^6.6.1"
+        "undici": "^6.14.1"
       },
       "optionalDependencies": {
         "dmg-license": "^1.0.11"
@@ -68,9 +70,9 @@
       }
     },
     "node_modules/@electron/asar": {
-      "version": "3.2.8",
-      "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.2.8.tgz",
-      "integrity": "sha512-cmskk5M06ewHMZAplSiF4AlME3IrnnZhKnWbtwKVLRkdJkKyUVjMLhDIiPIx/+6zQWVlKX/LtmK9xDme7540Sg==",
+      "version": "3.2.9",
+      "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.2.9.tgz",
+      "integrity": "sha512-Vu2P3X2gcZ3MY9W7yH72X9+AMXwUQZEJBrsPIbX0JsdllLtoh62/Q8Wg370/DawIEVKOyfD6KtTLo645ezqxUA==",
       "dev": true,
       "dependencies": {
         "commander": "^5.0.0",
@@ -169,9 +171,9 @@
       }
     },
     "node_modules/@electron/notarize": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@electron/notarize/-/notarize-2.1.0.tgz",
-      "integrity": "sha512-Q02xem1D0sg4v437xHgmBLxI2iz/fc0D4K7fiVWHa/AnW8o7D751xyKNXgziA6HrTOme9ul1JfWN5ark8WH1xA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@electron/notarize/-/notarize-2.2.1.tgz",
+      "integrity": "sha512-aL+bFMIkpR0cmmj5Zgy0LMKEpgy43/hw5zadEArgmAMWWlKc5buwFvFT9G/o/YJkvXAJm5q3iuTuLaiaXW39sg==",
       "dev": true,
       "dependencies": {
         "debug": "^4.1.1",
@@ -231,9 +233,9 @@
       }
     },
     "node_modules/@electron/universal": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@electron/universal/-/universal-1.4.1.tgz",
-      "integrity": "sha512-lE/U3UNw1YHuowNbTmKNs9UlS3En3cPgwM5MI+agIgr/B1hSze9NdOP0qn7boZaI9Lph8IDv3/24g9IxnJP7aQ==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@electron/universal/-/universal-1.5.1.tgz",
+      "integrity": "sha512-kbgXxyEauPJiQQUNG2VgUeyfQNFk6hBF11ISN2PNI6agUgPl55pv4eQmaqHzTAzchBvqZ2tQuRVaPStGf0mxGw==",
       "dev": true,
       "dependencies": {
         "@electron/asar": "^3.2.1",
@@ -653,13 +655,100 @@
         "node": ">=12"
       }
     },
-    "node_modules/@fastify/busboy": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.0.tgz",
-      "integrity": "sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA==",
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
       "dev": true,
       "engines": {
-        "node": ">=14"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
     "node_modules/@malept/cross-spawn-promise": {
@@ -718,6 +807,16 @@
       "resolved": "../../packages/crypto",
       "link": true
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@sindresorhus/is": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
@@ -967,26 +1066,25 @@
       "dev": true
     },
     "node_modules/app-builder-lib": {
-      "version": "24.9.1",
-      "resolved": "https://registry.npmjs.org/app-builder-lib/-/app-builder-lib-24.9.1.tgz",
-      "integrity": "sha512-Q1nYxZcio4r+W72cnIRVYofEAyjBd3mG47o+zms8HlD51zWtA/YxJb01Jei5F+jkWhge/PTQK+uldsPh6d0/4g==",
+      "version": "24.13.3",
+      "resolved": "https://registry.npmjs.org/app-builder-lib/-/app-builder-lib-24.13.3.tgz",
+      "integrity": "sha512-FAzX6IBit2POXYGnTCT8YHFO/lr5AapAII6zzhQO3Rw4cEDOgK+t1xhLc5tNcKlicTHlo9zxIwnYCX9X2DLkig==",
       "dev": true,
       "dependencies": {
         "@develar/schema-utils": "~2.6.5",
-        "@electron/notarize": "2.1.0",
+        "@electron/notarize": "2.2.1",
         "@electron/osx-sign": "1.0.5",
-        "@electron/universal": "1.4.1",
+        "@electron/universal": "1.5.1",
         "@malept/flatpak-bundler": "^0.4.0",
         "@types/fs-extra": "9.0.13",
-        "7zip-bin": "~5.2.0",
         "async-exit-hook": "^2.0.1",
         "bluebird-lst": "^1.0.9",
-        "builder-util": "24.8.1",
-        "builder-util-runtime": "9.2.3",
+        "builder-util": "24.13.1",
+        "builder-util-runtime": "9.2.4",
         "chromium-pickle-js": "^0.2.0",
         "debug": "^4.3.4",
         "ejs": "^3.1.8",
-        "electron-publish": "24.8.1",
+        "electron-publish": "24.13.1",
         "form-data": "^4.0.0",
         "fs-extra": "^10.1.0",
         "hosted-git-info": "^4.1.0",
@@ -1003,12 +1101,16 @@
       },
       "engines": {
         "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "dmg-builder": "24.13.3",
+        "electron-builder-squirrel-windows": "24.13.3"
       }
     },
     "node_modules/app-builder-lib/node_modules/builder-util-runtime": {
-      "version": "9.2.3",
-      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.3.tgz",
-      "integrity": "sha512-FGhkqXdFFZ5dNC4C+yuQB9ak311rpGAw+/ASz8ZdxwODCv1GGMWgLDeofRkdi0F3VCHQEWy/aXcJQozx2nOPiw==",
+      "version": "9.2.4",
+      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.4.tgz",
+      "integrity": "sha512-upp+biKpN/XZMLim7aguUyW8s0FUpDvOtK6sbanMFDAMBzpHDqdhgVYm6zc9HJ6nWo7u2Lxk60i2M6Jd3aiNrA==",
       "dev": true,
       "dependencies": {
         "debug": "^4.3.4",
@@ -1097,9 +1199,9 @@
       ]
     },
     "node_modules/better-sqlite3-multiple-ciphers": {
-      "version": "9.4.0",
-      "resolved": "https://registry.npmjs.org/better-sqlite3-multiple-ciphers/-/better-sqlite3-multiple-ciphers-9.4.0.tgz",
-      "integrity": "sha512-uQoBdShnpCdAPUmCPuLSrHtfSHAxjIFQvLnMbXHsvbWkfBP3sPfnnIaUTz7KHYRqgWNLlcQfs+9F9uqvMqau6Q==",
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/better-sqlite3-multiple-ciphers/-/better-sqlite3-multiple-ciphers-9.5.0.tgz",
+      "integrity": "sha512-6A9xBRvssONJW07Lur6pmkaUwlCGz1bnjFmXrrAR3qXETUBk92OI4C/+LhMOatn5wQ8AQzLScFZC/CKUpxkTaw==",
       "hasInstallScript": true,
       "dependencies": {
         "bindings": "^1.5.0",
@@ -1232,16 +1334,16 @@
       "dev": true
     },
     "node_modules/builder-util": {
-      "version": "24.8.1",
-      "resolved": "https://registry.npmjs.org/builder-util/-/builder-util-24.8.1.tgz",
-      "integrity": "sha512-ibmQ4BnnqCnJTNrdmdNlnhF48kfqhNzSeqFMXHLIl+o9/yhn6QfOaVrloZ9YUu3m0k3rexvlT5wcki6LWpjTZw==",
+      "version": "24.13.1",
+      "resolved": "https://registry.npmjs.org/builder-util/-/builder-util-24.13.1.tgz",
+      "integrity": "sha512-NhbCSIntruNDTOVI9fdXz0dihaqX2YuE1D6zZMrwiErzH4ELZHE6mdiB40wEgZNprDia+FghRFgKoAqMZRRjSA==",
       "dev": true,
       "dependencies": {
         "@types/debug": "^4.1.6",
         "7zip-bin": "~5.2.0",
         "app-builder-bin": "4.0.0",
         "bluebird-lst": "^1.0.9",
-        "builder-util-runtime": "9.2.3",
+        "builder-util-runtime": "9.2.4",
         "chalk": "^4.1.2",
         "cross-spawn": "^7.0.3",
         "debug": "^4.3.4",
@@ -1268,9 +1370,9 @@
       }
     },
     "node_modules/builder-util/node_modules/builder-util-runtime": {
-      "version": "9.2.3",
-      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.3.tgz",
-      "integrity": "sha512-FGhkqXdFFZ5dNC4C+yuQB9ak311rpGAw+/ASz8ZdxwODCv1GGMWgLDeofRkdi0F3VCHQEWy/aXcJQozx2nOPiw==",
+      "version": "9.2.4",
+      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.4.tgz",
+      "integrity": "sha512-upp+biKpN/XZMLim7aguUyW8s0FUpDvOtK6sbanMFDAMBzpHDqdhgVYm6zc9HJ6nWo7u2Lxk60i2M6Jd3aiNrA==",
       "dev": true,
       "dependencies": {
         "debug": "^4.3.4",
@@ -1474,13 +1576,59 @@
       "dev": true
     },
     "node_modules/config-file-ts": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/config-file-ts/-/config-file-ts-0.2.4.tgz",
-      "integrity": "sha512-cKSW0BfrSaAUnxpgvpXPLaaW/umg4bqg4k3GO1JqlRfpx+d5W0GDXznCMkWotJQek5Mmz1MJVChQnz3IVaeMZQ==",
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/config-file-ts/-/config-file-ts-0.2.6.tgz",
+      "integrity": "sha512-6boGVaglwblBgJqGyxm4+xCmEGcWgnWHSWHY5jad58awQhB6gftq0G8HbzU39YqCIYHMLAiL1yjwiZ36m/CL8w==",
       "dev": true,
       "dependencies": {
-        "glob": "^7.1.6",
-        "typescript": "^4.0.2"
+        "glob": "^10.3.10",
+        "typescript": "^5.3.3"
+      }
+    },
+    "node_modules/config-file-ts/node_modules/glob": {
+      "version": "10.3.12",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
+      "integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
+      "dev": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.3.6",
+        "minimatch": "^9.0.1",
+        "minipass": "^7.0.4",
+        "path-scurry": "^1.10.2"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/config-file-ts/node_modules/minimatch": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
+      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/config-file-ts/node_modules/minipass": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
       }
     },
     "node_modules/core-util-is": {
@@ -1669,14 +1817,14 @@
       }
     },
     "node_modules/dmg-builder": {
-      "version": "24.9.1",
-      "resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-24.9.1.tgz",
-      "integrity": "sha512-huC+O6hvHd24Ubj3cy2GMiGLe2xGFKN3klqVMLAdcbB6SWMd1yPSdZvV8W1O01ICzCCRlZDHiv4VrNUgnPUfbQ==",
+      "version": "24.13.3",
+      "resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-24.13.3.tgz",
+      "integrity": "sha512-rcJUkMfnJpfCboZoOOPf4L29TRtEieHNOeAbYPWPxlaBw/Z1RKrRA86dOI9rwaI4tQSc/RD82zTNHprfUHXsoQ==",
       "dev": true,
       "dependencies": {
-        "app-builder-lib": "24.9.1",
-        "builder-util": "24.8.1",
-        "builder-util-runtime": "9.2.3",
+        "app-builder-lib": "24.13.3",
+        "builder-util": "24.13.1",
+        "builder-util-runtime": "9.2.4",
         "fs-extra": "^10.1.0",
         "iconv-lite": "^0.6.2",
         "js-yaml": "^4.1.0"
@@ -1686,9 +1834,9 @@
       }
     },
     "node_modules/dmg-builder/node_modules/builder-util-runtime": {
-      "version": "9.2.3",
-      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.3.tgz",
-      "integrity": "sha512-FGhkqXdFFZ5dNC4C+yuQB9ak311rpGAw+/ASz8ZdxwODCv1GGMWgLDeofRkdi0F3VCHQEWy/aXcJQozx2nOPiw==",
+      "version": "9.2.4",
+      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.4.tgz",
+      "integrity": "sha512-upp+biKpN/XZMLim7aguUyW8s0FUpDvOtK6sbanMFDAMBzpHDqdhgVYm6zc9HJ6nWo7u2Lxk60i2M6Jd3aiNrA==",
       "dev": true,
       "dependencies": {
         "debug": "^4.3.4",
@@ -1723,16 +1871,31 @@
         "node": ">=8"
       }
     },
+    "node_modules/dotenv": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-9.0.2.tgz",
+      "integrity": "sha512-I9OvvrHp4pIARv4+x9iuewrWycX6CcZtoAu1XrzPxc5UygMJXJZYmBsynku8IkrJwgypE5DGNjDPmPRhDCptUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/dotenv-expand": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
+    },
     "node_modules/ejs": {
-      "version": "3.1.9",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz",
-      "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==",
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
       "dev": true,
       "dependencies": {
         "jake": "^10.8.5"
@@ -1745,14 +1908,14 @@
       }
     },
     "node_modules/electron": {
-      "version": "28.2.1",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-28.2.1.tgz",
-      "integrity": "sha512-wlzXf+OvOiVlBf9dcSeMMf7Q+N6DG+wtgFbMK0sA/JpIJcdosRbLMQwLg/LTwNVKIbmayqFLDp4FmmFkEMhbYA==",
+      "version": "29.3.1",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-29.3.1.tgz",
+      "integrity": "sha512-auge1/6RVqgUd6TgIq88wKdUCJi2cjESi3jy7d+6X4JzvBGprKBqMJ8JSSFpu/Px1YJrFUKAxfy6SC+TQf1uLw==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
         "@electron/get": "^2.0.0",
-        "@types/node": "^18.11.18",
+        "@types/node": "^20.9.0",
         "extract-zip": "^2.0.1"
       },
       "bin": {
@@ -1763,16 +1926,16 @@
       }
     },
     "node_modules/electron-builder": {
-      "version": "24.9.1",
-      "resolved": "https://registry.npmjs.org/electron-builder/-/electron-builder-24.9.1.tgz",
-      "integrity": "sha512-v7BuakDuY6sKMUYM8mfQGrwyjBpZ/ObaqnenU0H+igEL10nc6ht049rsCw2HghRBdEwJxGIBuzs3jbEhNaMDmg==",
+      "version": "24.13.3",
+      "resolved": "https://registry.npmjs.org/electron-builder/-/electron-builder-24.13.3.tgz",
+      "integrity": "sha512-yZSgVHft5dNVlo31qmJAe4BVKQfFdwpRw7sFp1iQglDRCDD6r22zfRJuZlhtB5gp9FHUxCMEoWGq10SkCnMAIg==",
       "dev": true,
       "dependencies": {
-        "app-builder-lib": "24.9.1",
-        "builder-util": "24.8.1",
-        "builder-util-runtime": "9.2.3",
+        "app-builder-lib": "24.13.3",
+        "builder-util": "24.13.1",
+        "builder-util-runtime": "9.2.4",
         "chalk": "^4.1.2",
-        "dmg-builder": "24.9.1",
+        "dmg-builder": "24.13.3",
         "fs-extra": "^10.1.0",
         "is-ci": "^3.0.0",
         "lazy-val": "^1.0.5",
@@ -1789,9 +1952,9 @@
       }
     },
     "node_modules/electron-builder/node_modules/builder-util-runtime": {
-      "version": "9.2.3",
-      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.3.tgz",
-      "integrity": "sha512-FGhkqXdFFZ5dNC4C+yuQB9ak311rpGAw+/ASz8ZdxwODCv1GGMWgLDeofRkdi0F3VCHQEWy/aXcJQozx2nOPiw==",
+      "version": "9.2.4",
+      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.4.tgz",
+      "integrity": "sha512-upp+biKpN/XZMLim7aguUyW8s0FUpDvOtK6sbanMFDAMBzpHDqdhgVYm6zc9HJ6nWo7u2Lxk60i2M6Jd3aiNrA==",
       "dev": true,
       "dependencies": {
         "debug": "^4.3.4",
@@ -1802,14 +1965,14 @@
       }
     },
     "node_modules/electron-publish": {
-      "version": "24.8.1",
-      "resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-24.8.1.tgz",
-      "integrity": "sha512-IFNXkdxMVzUdweoLJNXSupXkqnvgbrn3J4vognuOY06LaS/m0xvfFYIf+o1CM8if6DuWYWoQFKPcWZt/FUjZPw==",
+      "version": "24.13.1",
+      "resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-24.13.1.tgz",
+      "integrity": "sha512-2ZgdEqJ8e9D17Hwp5LEq5mLQPjqU3lv/IALvgp+4W8VeNhryfGhYEQC/PgDPMrnWUp+l60Ou5SJLsu+k4mhQ8A==",
       "dev": true,
       "dependencies": {
         "@types/fs-extra": "^9.0.11",
-        "builder-util": "24.8.1",
-        "builder-util-runtime": "9.2.3",
+        "builder-util": "24.13.1",
+        "builder-util-runtime": "9.2.4",
         "chalk": "^4.1.2",
         "fs-extra": "^10.1.0",
         "lazy-val": "^1.0.5",
@@ -1817,9 +1980,9 @@
       }
     },
     "node_modules/electron-publish/node_modules/builder-util-runtime": {
-      "version": "9.2.3",
-      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.3.tgz",
-      "integrity": "sha512-FGhkqXdFFZ5dNC4C+yuQB9ak311rpGAw+/ASz8ZdxwODCv1GGMWgLDeofRkdi0F3VCHQEWy/aXcJQozx2nOPiw==",
+      "version": "9.2.4",
+      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.4.tgz",
+      "integrity": "sha512-upp+biKpN/XZMLim7aguUyW8s0FUpDvOtK6sbanMFDAMBzpHDqdhgVYm6zc9HJ6nWo7u2Lxk60i2M6Jd3aiNrA==",
       "dev": true,
       "dependencies": {
         "debug": "^4.3.4",
@@ -1857,6 +2020,15 @@
         "tiny-typed-emitter": "^2.1.0"
       }
     },
+    "node_modules/electron/node_modules/@types/node": {
+      "version": "20.12.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
+      "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -2051,6 +2223,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
+      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -2561,12 +2749,12 @@
       }
     },
     "node_modules/isbinaryfile": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-5.0.0.tgz",
-      "integrity": "sha512-UDdnyGvMajJUWCkib7Cei/dvyJrrvo4FIrsvSFWdPpXSUorzXrDJ0S+X5Q4ZlasfPjca4yqCNNsjbCeiy8FFeg==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-5.0.2.tgz",
+      "integrity": "sha512-GvcjojwonMjWbTkfMpnVHVqXW/wKMYDfEpY94/8zy8HFMOqb/VL6oeONq9v87q4ttVlaTLnGXnJD4B5B1OTGIg==",
       "dev": true,
       "engines": {
-        "node": ">= 14.0.0"
+        "node": ">= 18.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/gjtorikian/"
@@ -2578,6 +2766,24 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/jackspeak": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
+      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "dev": true,
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/jake": {
       "version": "10.8.7",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz",
@@ -2910,6 +3116,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/npm-run-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-3.1.0.tgz",
+      "integrity": "sha512-Dbl4A/VfiVGLgQv29URL9xshU8XDY1GeLy+fsaZ1AA8JDSfjvr5P5+pzRbWqRSBxk6/DW7MIh8lTM/PaGnP2kg==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@@ -2955,6 +3173,31 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-scurry": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.2.tgz",
+      "integrity": "sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.1.tgz",
+      "integrity": "sha512-tS24spDe/zXhWbNPErCHs/AGOzbKGHT+ybSBqmdLm8WZ1xXLWvH8Qn71QPAlqVhd0qUTWjy+Kl9JmISgDdEjsA==",
+      "dev": true,
+      "engines": {
+        "node": "14 || >=16.14"
+      }
+    },
     "node_modules/peek-readable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/peek-readable/-/peek-readable-4.1.0.tgz",
@@ -3031,6 +3274,23 @@
         "node": ">=10"
       }
     },
+    "node_modules/prebuildify": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/prebuildify/-/prebuildify-6.0.1.tgz",
+      "integrity": "sha512-8Y2oOOateom/s8dNBsGIcnm6AxPmLH4/nanQzL5lQMU+sC0CMhzARZHizwr36pUPLdvBnOkCNQzxg4djuFSgIw==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.5",
+        "mkdirp-classic": "^0.5.3",
+        "node-abi": "^3.3.0",
+        "npm-run-path": "^3.1.0",
+        "pump": "^3.0.0",
+        "tar-fs": "^2.1.0"
+      },
+      "bin": {
+        "prebuildify": "bin.js"
+      }
+    },
     "node_modules/progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
@@ -3114,15 +3374,6 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/read-config-file/node_modules/dotenv": {
-      "version": "9.0.2",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-9.0.2.tgz",
-      "integrity": "sha512-I9OvvrHp4pIARv4+x9iuewrWycX6CcZtoAu1XrzPxc5UygMJXJZYmBsynku8IkrJwgypE5DGNjDPmPRhDCptUg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -3198,21 +3449,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/roarr": {
       "version": "2.15.4",
       "resolved": "https://registry.npmjs.org/roarr/-/roarr-2.15.4.tgz",
@@ -3350,6 +3586,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/simple-concat": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
@@ -3430,12 +3678,12 @@
       }
     },
     "node_modules/sodium-native": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/sodium-native/-/sodium-native-4.0.6.tgz",
-      "integrity": "sha512-uYsyycwcz9kYDwpXxJmL2YZosynsxcP6RPySbARVJdC9uNDa2CMjzJ7/WsMMvThKgvAYsBWdZc7L/WSVj9lTcA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/sodium-native/-/sodium-native-4.1.1.tgz",
+      "integrity": "sha512-LXkAfRd4FHtkQS4X6g+nRcVaN7mWVNepV06phIsC6+IZFvGh1voW5TNQiQp2twVaMf05gZqQjuS+uWLM6gHhNQ==",
       "hasInstallScript": true,
       "dependencies": {
-        "node-gyp-build": "^4.6.0"
+        "node-gyp-build": "^4.8.0"
       }
     },
     "node_modules/source-map": {
@@ -3458,9 +3706,9 @@
       }
     },
     "node_modules/sprintf-js": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz",
-      "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
       "dev": true,
       "optional": true
     },
@@ -3494,6 +3742,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -3505,6 +3768,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
@@ -3554,9 +3830,9 @@
       }
     },
     "node_modules/tar": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.0.tgz",
-      "integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
       "dev": true,
       "dependencies": {
         "chownr": "^2.0.0",
@@ -3617,15 +3893,12 @@
       "integrity": "sha512-qVtvMxeXbVej0cQWKqVSSAHmKZEHAvxdF8HEUBFWts8h+xEo5m/lEiPakuyZ3BnCBjOD8i24kzNOiOLLgsSxhA=="
     },
     "node_modules/tmp": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
-      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
+      "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
       "dev": true,
-      "dependencies": {
-        "rimraf": "^3.0.0"
-      },
       "engines": {
-        "node": ">=8.17.0"
+        "node": ">=14.14"
       }
     },
     "node_modules/tmp-promise": {
@@ -3714,30 +3987,33 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/undici": {
-      "version": "6.6.1",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-6.6.1.tgz",
-      "integrity": "sha512-J0GaEp0ztu/grIE2Uq57AbK6TRb+bWbOlxu0POCzhFKA6LKbwSAev+hDQaQcgUUA9CPs8Ky+cauzTHnQrtAQEA==",
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.14.1.tgz",
+      "integrity": "sha512-mAel3i4BsYhkeVPXeIPXVGPJKeBzqCieZYoFsbWfUzd68JmHByhc1Plit5WlylxXFaGpgkZB8mExlxnt+Q1p7A==",
       "dev": true,
-      "dependencies": {
-        "@fastify/busboy": "^2.0.0"
-      },
       "engines": {
-        "node": ">=18.0"
+        "node": ">=18.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
     "node_modules/universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -3811,6 +4087,24 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

apps/desktop/package.json

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

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

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

apps/desktop/scripts/build.mjs

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

apps/desktop/scripts/dev.mjs

@@ -53,7 +53,7 @@ async function onChange(first) {
   if (first) {
     await fs.rm("./build/", { force: true, recursive: true });
 
-    await exec("npx electron-rebuild");
+    await exec("npx electron-builder install-app-deps");
   }
 
   await exec(`npm run 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-AzureCodeSigning -Endpoint "${Endpoint}" -CodeSigningAccountName "${CodeSigningAccountName}" -CertificateProfileName "${CertificateProfileName}" -FileDigest "${FileDigest}" -TimestampRfc3161 "${TimestampRfc3161}" -TimestampDigest "${TimestampDigest}" -Description "${Description}" -DescriptionUrl "${DescriptionUrl}" -FilesCatalog "${FilesCatalog}"`;
+  const command = `Invoke-TrustedSigning -Endpoint "${Endpoint}" -CodeSigningAccountName "${CodeSigningAccountName}" -CertificateProfileName "${CertificateProfileName}" -FileDigest "${FileDigest}" -TimestampRfc3161 "${TimestampRfc3161}" -TimestampDigest "${TimestampDigest}" -Description "${Description}" -DescriptionUrl "${DescriptionUrl}" -FilesCatalog "${FilesCatalog}"`;
 
   console.debug("Signing", configuration.path, "using command", command);
 

apps/desktop/src/api/index.ts

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

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

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

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

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

apps/desktop/src/api/updater.ts

@@ -28,16 +28,20 @@ type UpdateInfo = { version: string };
 type Progress = { percent: number };
 
 const t = initTRPC.create();
+let cancellationToken: CancellationToken | undefined = undefined;
 
 export const updaterRouter = t.router({
   autoUpdates: t.procedure.query(() => config.automaticUpdates),
   install: t.procedure.query(() => autoUpdater.quitAndInstall()),
   download: t.procedure.query(async () => {
-    const cancellationToken = new CancellationToken();
-    await autoUpdater.downloadUpdate(cancellationToken);
+    if (cancellationToken) return;
+    cancellationToken = new CancellationToken();
+    await autoUpdater
+      .downloadUpdate(cancellationToken)
+      .finally(() => (cancellationToken = undefined));
   }),
   check: t.procedure.query(async () => {
-    await autoUpdater.checkForUpdates();
+    await autoUpdater.checkForUpdates().catch(console.error);
   }),
 
   toggleAutoUpdates: t.procedure
@@ -71,6 +75,7 @@ function createSubscription<
       const listener: AppUpdaterEvents[TName] = (...args: any[]) => {
         emit.next(args[0]);
       };
+      autoUpdater.removeAllListeners(eventName);
       autoUpdater.addListener(eventName, listener);
       return () => {
         autoUpdater.removeListener(eventName, listener);

apps/desktop/src/api/window.ts

@@ -0,0 +1,83 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { initTRPC } from "@trpc/server";
+import { observable } from "@trpc/server/observable";
+
+const t = initTRPC.create();
+
+export const windowRouter = t.router({
+  maximize: t.procedure.mutation(() => {
+    globalThis.window?.maximize();
+  }),
+  restore: t.procedure.mutation(() => {
+    globalThis.window?.restore();
+  }),
+  minimze: t.procedure.mutation(() => {
+    globalThis.window?.minimize();
+  }),
+  maximized: t.procedure.query(() => globalThis.window?.isMaximized()),
+  fullscreen: t.procedure.query(() => globalThis.window?.isFullScreen()),
+  onWindowStateChanged: t.procedure.subscription(() => {
+    return observable<{ maximized: boolean; fullscreen: boolean }>((emit) => {
+      function listener() {
+        emit.next({
+          maximized: !!globalThis.window?.isMaximized(),
+          fullscreen: !!globalThis.window?.isFullScreen()
+        });
+      }
+      function enterFullscreen() {
+        emit.next({
+          maximized: !!globalThis.window?.isMaximized(),
+          fullscreen: true
+        });
+      }
+      function leaveFullscreen() {
+        emit.next({
+          maximized: !!globalThis.window?.isMaximized(),
+          fullscreen: false
+        });
+      }
+      globalThis.window?.addListener("maximize", listener);
+      globalThis.window?.addListener("minimize", listener);
+      globalThis.window?.addListener("unmaximize", listener);
+      globalThis.window?.addListener("restore", listener);
+      globalThis.window?.addListener("enter-full-screen", enterFullscreen);
+      globalThis.window?.addListener("leave-full-screen", leaveFullscreen);
+      globalThis.window?.addListener("leave-html-full-screen", leaveFullscreen);
+      globalThis.window?.addListener("enter-html-full-screen", enterFullscreen);
+      return () => {
+        globalThis.window?.removeListener("maximize", listener);
+        globalThis.window?.removeListener("minimize", listener);
+        globalThis.window?.removeListener("unmaximize", listener);
+        globalThis.window?.removeListener("restore", listener);
+        globalThis.window?.removeListener("enter-full-screen", enterFullscreen);
+        globalThis.window?.removeListener("leave-full-screen", leaveFullscreen);
+        globalThis.window?.removeListener(
+          "leave-html-full-screen",
+          leaveFullscreen
+        );
+        globalThis.window?.removeListener(
+          "enter-html-full-screen",
+          enterFullscreen
+        );
+      };
+    });
+  })
+});

apps/desktop/src/main.ts

@@ -35,6 +35,7 @@ import path from "path";
 import { bringToFront } from "./utils/bring-to-front";
 import { bridge } from "./api/bridge";
 import { setupDesktopIntegration } from "./utils/desktop-integration";
+import { disableCustomDns, enableCustomDns } from "./utils/custom-dns";
 
 // only run a single instance
 if (!MAC_APP_STORE && !app.requestSingleInstanceLock()) {
@@ -82,6 +83,19 @@ async function createWindow() {
       size: 512,
       format: process.platform === "win32" ? "ico" : "png"
     }),
+
+    titleBarStyle: "hidden",
+    frame: process.platform === "win32" || process.platform === "darwin",
+    titleBarOverlay: {
+      height: 37,
+      color: "#00000000",
+      symbolColor: config.windowControlsIconColor
+    },
+    trafficLightPosition: {
+      x: 16,
+      y: 12
+    },
+
     webPreferences: {
       zoomFactor: config.zoomFactor,
       nodeIntegration: true,
@@ -112,6 +126,7 @@ async function createWindow() {
   mainWindow.webContents.session.setSpellCheckerDictionaryDownloadURL(
     "http://dictionaries.notesnook.com/"
   );
+  mainWindow.webContents.session.setProxy({ proxyRules: config.proxyRules });
 
   mainWindow.once("closed", () => {
     globalThis.window = null;
@@ -121,7 +136,7 @@ async function createWindow() {
   setupJumplist();
 
   if (isDevelopment())
-    mainWindow.webContents.openDevTools({ mode: "right", activate: true });
+    mainWindow.webContents.openDevTools({ mode: "bottom", activate: true });
 
   mainWindow.webContents.setWindowOpenHandler((details) => {
     shell.openExternal(details.url);
@@ -137,6 +152,9 @@ async function createWindow() {
 app.once("ready", async () => {
   console.info("App ready. Opening window.");
 
+  if (config.customDns) enableCustomDns();
+  else disableCustomDns();
+
   if (!isDevelopment()) registerProtocol();
   await createWindow();
   configureAutoUpdater();

apps/desktop/src/utils/autolaunch.ts

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

apps/desktop/src/utils/config.ts

@@ -41,7 +41,13 @@ export const config = {
   isSpellCheckerEnabled: true,
   zoomFactor: 1,
   theme: nativeTheme.themeSource,
-  automaticUpdates: true
+  automaticUpdates: true,
+  proxyRules: "",
+  customDns: true,
+
+  backgroundColor: nativeTheme.themeSource === "dark" ? "#0f0f0f" : "#ffffff",
+  windowControlsIconColor:
+    nativeTheme.themeSource === "dark" ? "#ffffff" : "#000000"
 };
 
 type ConfigKey = keyof typeof config;

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

@@ -0,0 +1,37 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { app } from "electron";
+
+export function enableCustomDns() {
+  app.configureHostResolver({
+    secureDnsServers: [
+      "https://mozilla.cloudflare-dns.com/dns-query",
+      "https://dns.quad9.net/dns-query"
+    ],
+    enableBuiltInResolver: true
+  });
+}
+
+export function disableCustomDns() {
+  app.configureHostResolver({
+    secureDnsServers: [],
+    enableBuiltInResolver: true
+  });
+}

apps/desktop/src/utils/menu.ts

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

apps/desktop/src/utils/protocol.ts

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { protocol } from "electron";
+import { net, protocol } from "electron";
 import { isDevelopment } from "./index";
 import { createReadStream } from "fs";
 import { extname, normalize } from "path";
@@ -62,26 +62,7 @@ function registerProtocol() {
         headers: { "Content-Type": extensionToMimeType[fileExtension] }
       });
     } else {
-      if (request.headers.has("X-Content-Length")) {
-        request.headers.set(
-          "Content-Length",
-          request.headers.get("X-Content-Length") || "0"
-        );
-        request.headers.delete("X-Content-Length");
-      }
-      const headers = Object.fromEntries(request.headers.entries());
-
-      return await fetch(request.url, {
-        signal: request.signal,
-        mode: request.mode,
-        headers,
-        method: request.method,
-        body: request.body,
-        credentials: request.credentials,
-        referrer: (request as any).referrer,
-        duplex: "half",
-        redirect: "manual"
-      });
+      return net.fetch(request, { bypassCustomProtocolHandlers: true });
     }
   });
   console.info(`${SCHEME} protocol inteception "successful"`);

apps/desktop/src/utils/theme.ts

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

apps/mobile/app/app.tsx

@@ -16,7 +16,6 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import "@azure/core-asynciterator-polyfill";
 import "react-native-gesture-handler";
 import {
   THEME_COMPATIBILITY_VERSION,
@@ -24,7 +23,6 @@ import {
 } from "@notesnook/theme";
 import React, { useEffect } from "react";
 import { I18nManager, View } from "react-native";
-import "react-native-gesture-handler";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import AppLockedOverlay from "./components/app-lock-overlay";
@@ -43,18 +41,6 @@ I18nManager.allowRTL(false);
 I18nManager.forceRTL(false);
 I18nManager.swapLeftAndRightInRTL(false);
 
-// 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 = () => {
   const init = useAppEvents();
   useEffect(() => {

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

@@ -136,11 +136,10 @@ export async function validateAppLockPassword(appLockPassword) {
     const appLockCipher = CipherStorage.getMap(APPLOCK_CIPHER);
     if (!appLockCipher) return true;
     const decrypted = await decrypt(
-      {
-        password: appLockPassword
-      },
+      await Sodium.deriveKey(appLockPassword, NOTESNOOK_APPLOCK_KEY_SALT),
       appLockCipher
     );
+
     DatabaseLogger.info(
       `validateAppLockPassword: ${typeof decrypted === "string"}`
     );
@@ -319,7 +318,6 @@ export async function decrypt(password, data) {
   _data.output = "plain";
 
   if (!password.salt) password.salt = data.salt;
-
   return await Sodium.decrypt(password, _data);
 }
 

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

@@ -31,7 +31,7 @@ import RNFetchBlob from "react-native-blob-util";
 import { ShareComponent } from "../../components/sheets/export-notes/share";
 import { ToastManager, presentSheet } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { db } from "../database";
+import { DatabaseLogger, db } from "../database";
 import Storage from "../database/storage";
 import { cacheDir, copyFileAsync, releasePermissions } from "./utils";
 import { createCacheDir, exists } from "./io";
@@ -84,8 +84,10 @@ export async function downloadAttachments(
     Platform.OS === "ios"
       ? `${outputFolder}/notesnook-attachments-${Date.now()}.zip`
       : `${cacheDir}/notesnook-attachments.zip`;
-  if (await RNFetchBlob.fs.exists(zipSourceFolder))
+  if (await RNFetchBlob.fs.exists(zipSourceFolder)) {
     await RNFetchBlob.fs.unlink(zipSourceFolder);
+  }
+
   await RNFetchBlob.fs.mkdir(zipSourceFolder);
 
   for (let i = 0; i < attachments.length; i++) {
@@ -127,7 +129,7 @@ export async function downloadAttachments(
         status: FileDownloadStatus.Fail,
         reason: e
       });
-      console.log("Error downloading attachment", e);
+      ToastManager.error(e, "Error downloading attachment");
     }
   }
   if (canceled.current) {
@@ -164,7 +166,7 @@ export async function downloadAttachments(
     } catch (e) {
       releasePermissions(outputFolder);
       sub?.remove();
-      console.log("Error zipping attachments", e);
+      ToastManager.error(e, "Error zipping attachments");
     }
     // Remove source & zip file from cache.
     RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
@@ -192,7 +194,7 @@ export default async function downloadAttachment(
 
   let attachment = await db.attachments.attachment(hash);
   if (!attachment) {
-    console.log("attachment not found");
+    DatabaseLogger.log("Attachment not found");
     return;
   }
 
@@ -207,19 +209,16 @@ export default async function downloadAttachment(
   }
 
   try {
-    console.log(
-      "starting download attachment",
-      attachment.hash,
-      options.groupId
-    );
     await db
       .fs()
       .downloadFile(options.groupId || attachment.hash, attachment.hash);
     if (!(await exists(attachment.hash))) {
+      DatabaseLogger.log("Attachment does not exist after download.");
       return;
     }
 
     if (options.base64 || options.text) {
+      DatabaseLogger.log(`Starting to decrypt... hash: ${attachment.hash}`);
       return await db.attachments.read(
         attachment.hash,
         options.base64 ? "base64" : "text"
@@ -232,6 +231,7 @@ export default async function downloadAttachment(
     );
 
     let key = await db.attachments.decryptKey(attachment.key);
+
     let info = {
       iv: attachment.iv,
       salt: attachment.salt,
@@ -245,7 +245,6 @@ export default async function downloadAttachment(
       chunkSize: attachment.chunkSize,
       appGroupId: IOS_APPGROUPID
     };
-
     let fileUri = await Sodium.decryptFile(
       key,
       info,
@@ -288,7 +287,7 @@ export default async function downloadAttachment(
 
     return fileUri;
   } catch (e) {
-    console.log("download attachment error: ", e);
+    DatabaseLogger.error(e);
     if (attachment.dateUploaded) {
       RNFetchBlob.fs
         .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}`)

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

@@ -29,13 +29,14 @@ import { createCacheDir, exists } from "./io";
 export async function downloadFile(filename, data, cancelToken) {
   if (!data) return false;
 
+  console.log("Downloading", filename);
   await createCacheDir();
-
   let { url, headers } = data;
   let path = `${cacheDir}/${filename}`;
 
   try {
     if (await exists(filename)) {
+      console.log("Exists already", filename);
       return true;
     }
 

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

@@ -67,7 +67,7 @@ export async function hashBase64(data) {
   };
 }
 
-export async function writeEncryptedBase64({ data, key }) {
+export async function writeEncryptedBase64(data, key) {
   await createCacheDir();
   let filepath = cacheDir + `/${getRandomId("imagecache_")}`;
   await RNFetchBlob.fs.writeFile(filepath, data, "base64");
@@ -77,6 +77,8 @@ export async function writeEncryptedBase64({ data, key }) {
   });
   RNFetchBlob.fs.unlink(filepath).catch(console.log);
   console.log("encrypted file output: ", output);
+  output.size = output.length;
+  delete output.length;
   return {
     ...output,
     alg: "xcha-stream"

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

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useCallback, useEffect, useRef } from "react";
-import { Platform, TextInput, View } from "react-native";
+import { AppStateStatus, Platform, TextInput, View } from "react-native";
 //@ts-ignore
 import { useThemeColors } from "@notesnook/theme";
 import { enabled } from "react-native-privacy-snapshot";
@@ -74,6 +74,7 @@ const verifyUserPassword = async (password: string) => {
 };
 
 const AppLockedOverlay = () => {
+  const initialLaunchBiometricRequest = useRef(true);
   const { colors } = useThemeColors();
   const user = getUser();
   const appLocked = useUserStore((state) => state.appLocked);
@@ -82,6 +83,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 keyboardType = useSettingStore(
     (state) => state.settings.applockKeyboardType
@@ -131,9 +133,8 @@ const AppLockedOverlay = () => {
     if (!password.current) return;
     try {
       const unlocked = appLockHasPasswordSecurity
-        ? validateAppLockPassword(password.current)
+        ? await validateAppLockPassword(password.current)
         : await verifyUserPassword(password.current);
-
       if (unlocked) {
         if (!appLockHasPasswordSecurity) {
           await setAppLockVerificationCipher(password.current);
@@ -154,18 +155,46 @@ const AppLockedOverlay = () => {
   };
 
   useEffect(() => {
+    if (appState === "active") {
+      enabled(false);
+    }
+
+    const prevState = lastAppState.current;
+    lastAppState.current = appState;
+
     if (
-      biometricUnlockAwaitingUserInput.current ||
-      useUserStore.getState().disableAppLockRequests
-    )
-      return;
-    if (
-      appLocked &&
       appState === "active" &&
-      !useSettingStore.getState().requestBiometrics
+      (prevState === "background" || initialLaunchBiometricRequest.current)
     ) {
-      biometricUnlockAwaitingUserInput.current = true;
-      onUnlockAppRequested();
+      if (SettingsService.shouldLockAppOnEnterForeground()) {
+        DatabaseLogger.info("Locking app on entering foreground");
+        useUserStore.getState().lockApp(true);
+      }
+
+      if (
+        !(
+          biometricUnlockAwaitingUserInput.current ||
+          useUserStore.getState().disableAppLockRequests ||
+          !appLocked ||
+          useSettingStore.getState().requestBiometrics ||
+          useSettingStore.getState().appDidEnterBackgroundForAction
+        )
+      ) {
+        initialLaunchBiometricRequest.current = false;
+        DatabaseLogger.info("Biometric unlock request");
+        onUnlockAppRequested();
+      }
+
+      enabled(false);
+    } else {
+      SettingsService.appEnteredBackground();
+
+      if (
+        SettingsService.get().privacyScreen ||
+        SettingsService.getProperty("appLockEnabled")
+      ) {
+        enabled(true);
+      }
     }
   }, [appState, onUnlockAppRequested, appLocked]);
 

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

@@ -40,7 +40,8 @@ import { useAttachmentStore } from "../../stores/use-attachment-store";
 import {
   eCloseAttachmentDialog,
   eCloseSheet,
-  eDBItemUpdate
+  eDBItemUpdate,
+  eOnLoadNote
 } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
@@ -53,6 +54,8 @@ import { Notice } from "../ui/notice";
 import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
+import { editorController } from "../../screens/editor/tiptap/utils";
 
 const Actions = ({
   attachment,
@@ -62,7 +65,7 @@ const Actions = ({
 }: {
   attachment: Attachment;
   setAttachments: (attachments?: VirtualizedGrouping<Attachment>) => void;
-  close: () => void;
+  close?: () => void;
   fwdRef: RefObject<ActionSheetRef>;
 }) => {
   const { colors } = useThemeColors();
@@ -103,7 +106,7 @@ const Actions = ({
           reupload: true,
           hash: attachment.hash,
           context: contextId,
-          type: attachment.type
+          type: attachment.mimeType.startsWith("image") ? "image" : "file"
         });
       },
       icon: "upload"
@@ -169,10 +172,27 @@ const Actions = ({
     {
       name: "Delete",
       onPress: async () => {
+        const relations = await db.relations.to(attachment, "note").get();
         await db.attachments.remove(attachment.hash, false);
         setAttachments();
         eSendEvent(eDBItemUpdate, attachment.id);
-        close();
+        relations
+          .map((relation) => relation.fromId)
+          .forEach(async (id) => {
+            const tab = useTabStore.getState().getTabForNote(id);
+            if (tab !== undefined) {
+              const isFocused = useTabStore.getState().currentTab === tab;
+              if (isFocused) {
+                eSendEvent(eOnLoadNote, {
+                  item: await db.notes.note(id),
+                  forced: true
+                });
+              } else {
+                editorController.current.commands.setLoading(true, tab);
+              }
+            }
+          });
+        close?.();
       },
       icon: "delete-outline"
     }
@@ -201,7 +221,7 @@ const Actions = ({
       <View
         style={{
           borderBottomWidth: 1,
-          borderBottomColor: colors.secondary.background,
+          borderBottomColor: colors.primary.border,
           marginBottom: notes && notes.length > 0 ? 0 : 12
         }}
       >
@@ -275,7 +295,7 @@ const Actions = ({
         <View
           style={{
             borderBottomWidth: 1,
-            borderBottomColor: colors.secondary.background,
+            borderBottomColor: colors.primary.border,
             marginBottom: 12,
             paddingVertical: 12
           }}

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

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

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

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

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

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

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

@@ -38,6 +38,7 @@ import { useSettingStore } from "../../stores/use-setting-store";
 import { eUserLoggedIn } from "../../utils/events";
 import { useUserStore } from "../../stores/use-user-store";
 import Sync from "../../services/sync";
+import { Notice } from "../ui/notice";
 
 const LoginSteps = {
   emailAuth: 1,

apps/mobile/app/components/auth/session-expired.js

@@ -69,6 +69,9 @@ export const SessionExpired = () => {
       eSendEvent(eUserLoggedIn, true);
       setVisible(false);
       setFocused(false);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
     },
     true
   );
@@ -84,6 +87,9 @@ export const SessionExpired = () => {
       MMKV.clearStore();
       clearAllStores();
       setVisible(false);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
     } catch (e) {
       ToastManager.show({
         heading: e.message,
@@ -127,6 +133,9 @@ export const SessionExpired = () => {
       email.current = user.email;
       setFocused(false);
       setVisible(true);
+      useUserStore.setState({
+        disableAppLockRequests: true
+      });
     }
   }, [email]);
 
@@ -139,9 +148,15 @@ export const SessionExpired = () => {
         animated={false}
         centered={false}
         onShow={async () => {
+          useUserStore.setState({
+            disableAppLockRequests: true
+          });
           await sleep(300);
           passwordInputRef.current?.focus();
           setFocused(true);
+          useUserStore.setState({
+            disableAppLockRequests: true
+          });
         }}
         enableSheetKeyboardHandler={true}
         visible={true}

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

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

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

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

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

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

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

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

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

@@ -36,11 +36,15 @@ import DialogButtons from "./dialog-buttons";
 import DialogHeader from "./dialog-header";
 import { useCallback } from "react";
 import { Button } from "../ui/button";
+import { getContainerBorder } from "../../utils/colors";
 
 export const Dialog = ({ context = "global" }) => {
   const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
-  const [inputValue, setInputValue] = useState(null);
+  const [checked, setChecked] = useState(false);
+  const values = useRef({
+    inputValue: undefined
+  });
   const inputRef = useRef();
   const [dialogInfo, setDialogInfo] = useState({
     title: "",
@@ -66,7 +70,8 @@ export const Dialog = ({ context = "global" }) => {
     if (dialogInfo.positivePress) {
       inputRef.current?.blur();
       let result = await dialogInfo.positivePress(
-        inputValue || dialogInfo.defaultValue
+        values.current.inputValue || dialogInfo.defaultValue,
+        checked
       );
       if (result === false) {
         return;
@@ -81,8 +86,9 @@ export const Dialog = ({ context = "global" }) => {
       if (!data.context) data.context = "global";
       if (data.context !== context) return;
       setDialogInfo(data);
+      setChecked(false);
+      values.current.inputValue = data.defaultValue;
       setVisible(true);
-      setInputValue(data.defaultValue);
     },
     [context]
   );
@@ -98,7 +104,8 @@ export const Dialog = ({ context = "global" }) => {
   }, [show]);
 
   const hide = () => {
-    setInputValue(null);
+    setChecked(false);
+    values.current.inputValue = undefined;
     setVisible(false);
   };
 
@@ -106,7 +113,6 @@ export const Dialog = ({ context = "global" }) => {
     if (dialogInfo.onClose) {
       await dialogInfo.onClose();
     }
-
     hide();
   };
 
@@ -116,7 +122,8 @@ export const Dialog = ({ context = "global" }) => {
     maxHeight: 450,
     borderRadius: 5,
     backgroundColor: colors.primary.background,
-    paddingTop: 12
+    paddingTop: 12,
+    ...getContainerBorder(colors.primary.border, 0.5)
   };
 
   return visible ? (
@@ -159,7 +166,7 @@ export const Dialog = ({ context = "global" }) => {
               fwdRef={inputRef}
               autoCapitalize="none"
               onChangeText={(value) => {
-                setInputValue(value);
+                values.current.inputValue = value;
               }}
               testID="input-value"
               secureTextEntry={dialogInfo.secureTextEntry}
@@ -176,10 +183,10 @@ export const Dialog = ({ context = "global" }) => {
           <>
             <Button
               onPress={() => {
-                setInputValue(!inputValue);
+                setChecked(!checked);
               }}
               icon={
-                inputValue
+                checked
                   ? "check-circle-outline"
                   : "checkbox-blank-circle-outline"
               }
@@ -187,9 +194,10 @@ export const Dialog = ({ context = "global" }) => {
                 justifyContent: "flex-start"
               }}
               height={35}
+              iconSize={20}
               width="100%"
               title={dialogInfo.check.info}
-              type={inputValue ? dialogInfo.check.type : "plain"}
+              type={checked ? dialogInfo.check.type || "selected" : "plain"}
             />
           </>
         ) : null}

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

@@ -24,7 +24,7 @@ import {
   setAppLockVerificationCipher,
   validateAppLockPassword
 } from "../../../common/database/encryption";
-import BiometicService from "../../../services/biometrics";
+import BiometricService from "../../../services/biometrics";
 import { DDS } from "../../../services/device-detection";
 import {
   ToastManager,
@@ -314,6 +314,7 @@ export const AppLockPassword = () => {
                   new Error(
                     `${keyboardType === "pin" ? "Pin" : "Password"} incorrect`
                   ),
+                  undefined,
                   "local"
                 );
                 return;
@@ -322,10 +323,11 @@ export const AppLockPassword = () => {
               SettingsService.setProperty("appLockHasPasswordSecurity", false);
 
               if (
-                !(await BiometicService.isBiometryAvailable()) ||
+                !(await BiometricService.isBiometryAvailable()) ||
                 SettingsService.getProperty("biometricsAuthEnabled") === false
               ) {
                 SettingsService.setProperty("appLockEnabled", false);
+                SettingsService.setPrivacyScreen(SettingsService.get());
                 ToastManager.show({
                   message: "App lock disabled",
                   type: "success"

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

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

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

@@ -23,7 +23,6 @@ import { InteractionManager, View } from "react-native";
 import Share from "react-native-share";
 import { notesnook } from "../../../../e2e/test.ids";
 import { db } from "../../../common/database";
-import { editorController } from "../../../screens/editor/tiptap/utils";
 import BiometricService from "../../../services/biometrics";
 import { DDS } from "../../../services/device-detection";
 import {
@@ -35,11 +34,11 @@ import {
 import Navigation from "../../../services/navigation";
 import { getElevationStyle } from "../../../utils/elevation";
 import {
-  eClearEditor,
   eCloseActionSheet,
   eCloseVaultDialog,
   eOnLoadNote,
-  eOpenVaultDialog
+  eOpenVaultDialog,
+  eUpdateNoteInEditor
 } from "../../../utils/events";
 import { deleteItems } from "../../../utils/functions";
 import { tabBarRef } from "../../../utils/global-refs";
@@ -129,7 +128,7 @@ export class VaultDialog extends Component {
           : this.state.copyNote
           ? "Unlock note to copy it. If biometrics are not working, you can enter device pin to unlock vault."
           : this.state.goToEditor
-          ? "Unlock note to open it in editor. If biometrics are not working, you can enter device pin to unlock vault."
+          ? "Unlock note to open it in editor."
           : "Enter vault password to unlock note. If biometrics are not working, you can enter device pin to unlock vault."
         : "Enter vault password to lock note. If biometrics are not working, you can enter device pin to lock note.");
   }
@@ -338,7 +337,26 @@ export class VaultDialog extends Component {
       let verified = await db.user.verifyPassword(this.password);
       if (!(await db.user.getUser())) verified = true;
       if (verified) {
+        let noteIds = [];
+        if (this.state.deleteAll) {
+          const vault = await db.vaults.default();
+          const relations = await db.relations.from(vault, "note").get();
+          noteIds = relations.map((item) => item.toId);
+        }
+
         await db.vault.delete(this.state.deleteAll);
+
+        noteIds.forEach((id) => {
+          eSendEvent(
+            eUpdateNoteInEditor,
+            {
+              id: id,
+              deleted: true
+            },
+            true
+          );
+        });
+
         eSendEvent("vaultUpdated");
         this.setState({
           loading: false
@@ -365,7 +383,22 @@ export class VaultDialog extends Component {
       loading: true
     });
     try {
+      const vault = await db.vaults.default();
+      const relations = await db.relations.from(vault, "note").get();
+      const noteIds = relations.map((item) => item.toId);
+
       await db.vault.clear(this.password);
+
+      noteIds.forEach((id) => {
+        eSendEvent(
+          eUpdateNoteInEditor,
+          {
+            id: id,
+            deleted: true
+          },
+          true
+        );
+      });
       this.setState({
         loading: false
       });
@@ -394,9 +427,10 @@ export class VaultDialog extends Component {
       return;
     } else {
       await db.vault.add(this.state.note.id);
-      if (this.state.note.id === editorController.current?.note?.id) {
-        eSendEvent(eClearEditor);
-      }
+
+      console.log("update note event...");
+      eSendEvent(eUpdateNoteInEditor, this.state.note, true);
+
       this.close();
       ToastManager.show({
         message: "Note locked successfully",
@@ -501,9 +535,7 @@ export class VaultDialog extends Component {
     }
     if (this.state.note?.id) {
       await db.vault.add(this.state.note.id);
-      if (this.state.note.id === editorController.current?.note?.id) {
-        eSendEvent(eClearEditor);
-      }
+      eSendEvent(eUpdateNoteInEditor, this.state.note, true);
       this.setState({
         loading: false
       });
@@ -533,6 +565,7 @@ export class VaultDialog extends Component {
           type: "success",
           context: "global"
         });
+        eSendEvent(eUpdateNoteInEditor, this.state.note, true);
         this.close();
       })
       .catch((e) => {

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

@@ -33,6 +33,7 @@ import { eScrollEvent } from "../../utils/events";
 import { LeftMenus } from "./left-menus";
 import { RightMenus } from "./right-menus";
 import { Title } from "./title";
+import { useNavigation } from "@react-navigation/native";
 
 type HeaderRightButton = {
   title: string;
@@ -66,6 +67,8 @@ export const Header = ({
   hasSearch?: boolean;
   onSearch?: () => void;
 }) => {
+  const navigation = useNavigation();
+
   const { colors } = useThemeColors();
   const insets = useGlobalSafeAreaInsets();
   const [borderHidden, setBorderHidden] = useState(true);

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

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

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

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

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

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

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

@@ -25,7 +25,7 @@ import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enab
 import { presentSheet } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
 import { RouteName } from "../../../stores/use-navigation-store";
-import { ColorValues, getContainerBorder } from "../../../utils/colors";
+import { getContainerBorder } from "../../../utils/colors";
 import { GROUP } from "../../../utils/constants";
 import { SIZE } from "../../../utils/size";
 import Sort from "../../sheets/sort";
@@ -96,13 +96,9 @@ export const SectionHeader = React.memo<
           }}
         >
           <Heading
-            color={
-              ColorValues[color?.toLowerCase() as keyof typeof ColorValues] ||
-              colors.primary.accent
-            }
+            color={color || colors.primary.accent}
             size={SIZE.sm}
             style={{
-              minWidth: 60,
               alignSelf: "center",
               textAlignVertical: "center"
             }}
@@ -117,7 +113,7 @@ export const SectionHeader = React.memo<
             alignItems: "center"
           }}
         >
-          {index === 0 && (
+          {index === 0 ? (
             <>
               <Button
                 onPress={() => {
@@ -126,7 +122,6 @@ export const SectionHeader = React.memo<
                     component: <Sort screen={screen} type={dataType} />
                   });
                 }}
-                hidden={screen === "Reminders"}
                 tooltipText="Change sorting of items in list"
                 title={groupBy}
                 icon={
@@ -180,7 +175,7 @@ export const SectionHeader = React.memo<
                 size={SIZE.lg - 2}
               />
             </>
-          )}
+          ) : null}
         </View>
       </View>
     );

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

@@ -33,11 +33,12 @@ import { notesnook } from "../../../../e2e/test.ids";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 import NotebookScreen from "../../../screens/notebook";
 import { TaggedNotes } from "../../../screens/notes/tagged";
-import { useEditorStore } from "../../../stores/use-editor-store";
 import useNavigationStore from "../../../stores/use-navigation-store";
 import { useRelationStore } from "../../../stores/use-relation-store";
 import { SIZE } from "../../../utils/size";
 
+import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store";
+import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
 import { Properties } from "../../properties";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
@@ -45,7 +46,6 @@ import { ReminderTime } from "../../ui/reminder-time";
 import { TimeSince } from "../../ui/time-since";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
 
 type NoteItemProps = {
   item: Note | BaseTrashItem<Note>;
@@ -73,8 +73,9 @@ const NoteItem = ({
   locked,
   noOpen = false
 }: NoteItemProps) => {
-  const isEditingNote = useEditorStore(
-    (state) => state.currentEditingNote === item.id
+  const isEditingNote = useTabStore(
+    (state) =>
+      state.tabs.find((t) => t.id === state.currentTab)?.noteId === item.id
   );
   const { colors } = useThemeColors();
   const compactMode = useIsCompactModeEnabled(
@@ -210,6 +211,31 @@ const NoteItem = ({
                     color={colors.error.accent}
                   />
                 ) : null}
+
+                {item.localOnly ? (
+                  <Icon
+                    testID="sync-off"
+                    name="sync-off"
+                    size={SIZE.sm}
+                    style={{
+                      marginRight: 6
+                    }}
+                    color={primaryColors.icon}
+                  />
+                ) : null}
+
+                {item.readonly ? (
+                  <Icon
+                    testID="pencil-lock"
+                    name="pencil-lock"
+                    size={SIZE.sm}
+                    style={{
+                      marginRight: 6
+                    }}
+                    color={primaryColors.icon}
+                  />
+                ) : null}
+
                 <TimeSince
                   style={{
                     fontSize: SIZE.xs,
@@ -225,12 +251,13 @@ const NoteItem = ({
                     style={{
                       flexDirection: "row",
                       alignItems: "center",
-                      marginRight: 6
+                      marginRight: 6,
+                      gap: 2
                     }}
                   >
                     <Icon
                       name="attachment"
-                      size={SIZE.md}
+                      size={SIZE.sm}
                       color={primaryColors.icon}
                     />
                     <Paragraph
@@ -270,7 +297,7 @@ const NoteItem = ({
                   <Icon
                     testID="icon-star"
                     name="star-outline"
-                    size={SIZE.md}
+                    size={SIZE.sm}
                     style={{
                       marginRight: 6
                     }}
@@ -287,7 +314,8 @@ const NoteItem = ({
                           height={23}
                           type="plain"
                           textStyle={{
-                            textDecorationLine: "underline"
+                            textDecorationLine: "underline",
+                            color: colors.secondary.paragraph
                           }}
                           hitSlop={{ top: 8, bottom: 12, left: 0, right: 0 }}
                           fontSize={SIZE.xs}
@@ -369,7 +397,7 @@ const NoteItem = ({
               <Icon
                 testID="icon-star"
                 name="star-outline"
-                size={SIZE.md}
+                size={SIZE.sm}
                 style={{
                   marginRight: 6
                 }}

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

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

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

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

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

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

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

@@ -17,17 +17,18 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { Item } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
 import useIsSelected from "../../../hooks/use-selected";
-import { useEditorStore } from "../../../stores/use-editor-store";
-import { Item } from "@notesnook/core";
+import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store";
 
 export const Filler = ({ item, color }: { item: Item; color?: string }) => {
   const { colors } = useThemeColors();
-  const isEditingNote = useEditorStore(
-    (state) => state.currentEditingNote === item.id
+  const isEditingNote = useTabStore(
+    (state) =>
+      state.tabs.find((t) => t.id === state.currentTab)?.noteId === item.id
   );
 
   const [selected] = useIsSelected(item);
@@ -41,8 +42,8 @@ export const Filler = ({ item, color }: { item: Item; color?: string }) => {
         backgroundColor: colors.selected.background,
         borderLeftWidth: 5,
         borderLeftColor: isEditingNote
-          ? item.color
-            ? colors.static[item.color]
+          ? color
+            ? color
             : colors.selected.accent
           : "transparent"
       }}

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

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

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

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

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

@@ -192,7 +192,9 @@ export default function List(props: ListProps) {
               />
             ) : null
           }
-          ListFooterComponent={<Footer />}
+          ListFooterComponent={
+            <Footer height={props.renderedInRoute === "Notebook" ? 300 : 150} />
+          }
           ListHeaderComponent={
             <>
               {props.CustomLisHeader ? (

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

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

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

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

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

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

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

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

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

@@ -22,10 +22,10 @@ import React, { useEffect, useState } from "react";
 import { View } from "react-native";
 import { db } from "../../common/database";
 import Editor from "../../screens/editor";
+import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
 import { editorController } from "../../screens/editor/tiptap/utils";
 import { eSendEvent, ToastManager } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
-import { useEditorStore } from "../../stores/use-editor-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { useTrashStore } from "../../stores/use-trash-store";
 import { eCloseSheet, eOnLoadNote } from "../../utils/events";
@@ -34,6 +34,7 @@ import DialogHeader from "../dialog/dialog-header";
 import { presentDialog } from "../dialog/functions";
 import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
+import { ReadonlyEditor } from "../../screens/editor/readonly-editor";
 
 /**
  *
@@ -42,7 +43,6 @@ import Paragraph from "../ui/typography/paragraph";
  */
 export default function NotePreview({ session, content, note }) {
   const { colors } = useThemeColors();
-  const editorId = ":noteHistory";
   const [locked, setLocked] = useState(false);
 
   async function restore() {
@@ -58,10 +58,11 @@ export default function NotePreview({ session, content, note }) {
       return;
     }
     await db.noteHistory.restore(session.id);
-    if (useEditorStore.getState()?.currentEditingNote === session?.noteId) {
-      if (editorController.current?.note) {
+    if (useTabStore.getState().hasTabForNote(session?.noteId)) {
+      const note = editorController.current.note.current[session?.noteId];
+      if (note) {
         eSendEvent(eOnLoadNote, {
-          item: editorController.current?.note,
+          item: note,
           forced: true
         });
       }
@@ -117,22 +118,16 @@ export default function NotePreview({ session, content, note }) {
             flex: 1
           }}
         >
-          <Editor
-            noHeader
-            noToolbar
-            readonly
-            editorId={editorId}
-            onLoad={async () => {
-              const _note = note || (await db.notes.note(session?.noteId));
-              eSendEvent(eOnLoadNote + editorId, {
-                item: {
-                  ..._note,
-                  content: {
-                    ...content,
-                    isPreview: true
-                  }
-                }
-              });
+          <ReadonlyEditor
+            editorId="historyPreview"
+            onLoad={async (loadContent) => {
+              if (content.data) {
+                const _note = note || (await db.notes.note(session?.noteId));
+                loadContent({
+                  data: content.data,
+                  id: _note.id
+                });
+              }
             }}
           />
         </View>

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

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

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

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

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

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

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

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

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

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

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

@@ -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 React from "react";
+import React, { useEffect, useState } from "react";
 import { View } from "react-native";
 import { db } from "../../common/database";
 import { TaggedNotes } from "../../screens/notes/tagged";
@@ -68,26 +68,38 @@ export const Tags = ({ item, close }) => {
 };
 
 export const TagStrip = ({ item, close }) => {
-  return item.tags?.length > 0 ? (
+  const [tags, setTags] = useState([]);
+
+  useEffect(() => {
+    db.relations
+      .to(item, "tag")
+      .resolve()
+      .then((tags) => {
+        setTags(tags);
+      });
+  });
+
+  return tags?.length > 0 ? (
     <View
       style={{
         flexDirection: "row",
         flexWrap: "wrap",
-        alignItems: "center"
+        alignItems: "center",
+        marginTop: 10,
+        gap: 5
       }}
     >
-      {item.tags.map((tag) =>
-        tag ? <TagItem key={tag} tag={tag} close={close} /> : null
+      {tags?.map((tag) =>
+        tag ? <TagItem key={tag.id} tag={tag} close={close} /> : null
       )}
     </View>
   ) : null;
 };
 
 const TagItem = ({ tag, close }) => {
+  const { colors } = useThemeColors();
   const onPress = async () => {
-    let tags = db.tags.all;
-    let _tag = tags.find((t) => t.title === tag);
-    TaggedNotes.navigate(_tag, true);
+    TaggedNotes.navigate(tag, true);
     await sleep(300);
     close();
   };
@@ -95,20 +107,19 @@ const TagItem = ({ tag, close }) => {
   const style = {
     paddingHorizontal: 0,
     borderRadius: 100,
-    marginRight: 10,
     marginTop: 0,
     backgroundColor: "transparent"
   };
   return (
     <Button
       onPress={onPress}
-      title={"#" + tag}
-      type="secondary"
+      title={"#" + tag.title}
+      type="plain"
       height={20}
       fontSize={SIZE.xs}
       style={style}
       textStyle={{
-        textDecorationLine: "underline"
+        color: colors.secondary.paragraph
       }}
     />
   );

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,273 @@
+/*
+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 { Note } from "@notesnook/core";
+import { EVENTS } from "@notesnook/core/dist/common";
+import { useThemeColors } from "@notesnook/theme";
+import React, { useEffect } from "react";
+import { View } from "react-native";
+import { FlatList } from "react-native-actions-sheet";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { db } from "../../../common/database";
+import { useDBItem } from "../../../hooks/use-db-item";
+import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store";
+import { editorController } from "../../../screens/editor/tiptap/utils";
+import { eSendEvent, presentSheet } from "../../../services/event-manager";
+import { eUnlockNote } from "../../../utils/events";
+import { SIZE } from "../../../utils/size";
+import { Button } from "../../ui/button";
+import { IconButton } from "../../ui/icon-button";
+import { Pressable } from "../../ui/pressable";
+import Heading from "../../ui/typography/heading";
+import Paragraph from "../../ui/typography/paragraph";
+
+type TabItem = {
+  id: number;
+  noteId?: string;
+  previewTab?: boolean;
+  locked?: boolean;
+  noteLocked?: boolean;
+  readonly?: boolean;
+  pinned?: boolean;
+};
+
+const TabItemComponent = (props: {
+  tab: TabItem;
+  isFocused: boolean;
+  close?: (ctx?: string | undefined) => void;
+}) => {
+  const { colors } = useThemeColors();
+  const [item, update] = useDBItem(props.tab.noteId, "note");
+
+  useEffect(() => {
+    const syncCompletedSubscription = db.eventManager?.subscribe(
+      EVENTS.syncItemMerged,
+      (data: Note) => {
+        if (data.type === "note") {
+          const tabId = useTabStore.getState().getTabForNote(data.id);
+          if (tabId !== undefined && item?.title !== data.title) {
+            update();
+          }
+        }
+      }
+    );
+    return () => {
+      syncCompletedSubscription?.unsubscribe();
+    };
+  }, [update, item]);
+
+  return (
+    <Pressable
+      style={{
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        paddingLeft: 12,
+        minHeight: 45
+      }}
+      type={props.isFocused ? "selected" : "transparent"}
+      onPress={() => {
+        if (!props.isFocused) {
+          useTabStore.getState().focusTab(props.tab.id);
+          if (props.tab.locked) {
+            eSendEvent(eUnlockNote);
+          }
+
+          if (!props.tab.noteId) {
+            setTimeout(() => {
+              editorController?.current?.commands?.focus(props.tab.id);
+            }, 300);
+          }
+        }
+        props.close?.();
+      }}
+      onLongPress={() => {
+        useTabStore.getState().updateTab(props.tab.id, {
+          previewTab: false
+        });
+      }}
+    >
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          gap: 10,
+          flexShrink: 1
+        }}
+      >
+        {props.tab.noteLocked ? (
+          <>
+            {props.tab.locked ? (
+              <Icon size={SIZE.md} name="lock" />
+            ) : (
+              <Icon size={SIZE.md} name="lock-open-outline" />
+            )}
+          </>
+        ) : null}
+
+        {props.tab.readonly ? <Icon size={SIZE.md} name="pencil-lock" /> : null}
+
+        <Paragraph
+          color={
+            props.isFocused
+              ? colors.selected.paragraph
+              : colors.primary.paragraph
+          }
+          style={{
+            fontFamily: props.tab.previewTab
+              ? "OpenSans-Italic"
+              : "OpenSans-Regular"
+          }}
+          numberOfLines={1}
+          size={SIZE.md}
+        >
+          {props.tab.noteId ? item?.title || "Untitled note" : "New note"}
+        </Paragraph>
+      </View>
+
+      <View
+        style={{
+          flexDirection: "row",
+          gap: 5,
+          paddingRight: 12
+        }}
+      >
+        <IconButton
+          name="pin"
+          size={SIZE.lg}
+          color={props.tab.pinned ? colors.primary.accent : colors.primary.icon}
+          onPress={() => {
+            useTabStore.getState().updateTab(props.tab.id, {
+              pinned: !props.tab.pinned,
+              previewTab: false
+            });
+          }}
+          top={0}
+          left={0}
+          right={20}
+          bottom={0}
+        />
+
+        {!props.tab?.pinned ? (
+          <IconButton
+            name="close"
+            size={SIZE.lg}
+            color={colors.primary.icon}
+            onPress={() => {
+              const isLastTab = useTabStore.getState().tabs.length === 1;
+              useTabStore.getState().removeTab(props.tab.id);
+              // The last tab is not actually removed, it is just cleaned up.
+              if (isLastTab) {
+                editorController.current?.reset(props.tab.id, true, true);
+                props.close?.();
+              }
+            }}
+            top={0}
+            left={0}
+            right={20}
+            bottom={0}
+          />
+        ) : null}
+      </View>
+    </Pressable>
+  );
+};
+
+export default function EditorTabs({
+  close
+}: {
+  close?: (ctx?: string | undefined) => void;
+}) {
+  const [tabs, currentTab] = useTabStore((state) => [
+    state.tabs,
+    state.currentTab
+  ]);
+
+  const renderTabItem = React.useCallback(
+    ({ item }: { item: TabItem }) => {
+      return (
+        <TabItemComponent
+          key={item.id}
+          tab={item}
+          isFocused={item.id === currentTab}
+          close={close}
+        />
+      );
+    },
+    [close, currentTab]
+  );
+
+  return (
+    <View
+      style={{
+        paddingHorizontal: 12,
+        gap: 12,
+        maxHeight: "100%"
+      }}
+    >
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          width: "100%",
+          alignItems: "center"
+        }}
+      >
+        <Heading size={SIZE.lg}>Tabs</Heading>
+        <Button
+          onPress={() => {
+            useTabStore.getState().newTab();
+            setTimeout(() => {
+              editorController?.current?.commands?.focus(
+                useTabStore.getState().currentTab
+              );
+            }, 500);
+            close?.();
+          }}
+          title="New tab"
+          icon="plus"
+          style={{
+            flexDirection: "row",
+            justifyContent: "flex-start",
+            borderRadius: 100,
+            height: 35
+          }}
+          iconSize={SIZE.lg}
+        />
+      </View>
+
+      <FlatList
+        windowSize={3}
+        data={tabs.sort((t1, t2) => {
+          if (t1.pinned && t2.pinned) return 0;
+          if (t1.pinned) return -1;
+          if (t2.pinned) return 1;
+          return 0;
+        })}
+        renderItem={renderTabItem}
+      />
+    </View>
+  );
+}
+
+EditorTabs.present = () => {
+  presentSheet({
+    component: (ref, close, update) => <EditorTabs close={close} />
+  });
+};

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

@@ -39,6 +39,7 @@ import { getElevationStyle } from "../../../utils/elevation";
 import { eCloseSheet } from "../../../utils/events";
 import { SIZE, ph, pv } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
+import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
 import { ProTag } from "../../premium/pro-tag";
 import { Button } from "../../ui/button";
@@ -47,7 +48,6 @@ import { Pressable } from "../../ui/pressable";
 import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { Dialog } from "../../dialog";
 
 const ExportNotesSheet = ({
   ids,
@@ -71,7 +71,7 @@ const ExportNotesSheet = ({
   const [status, setStatus] = useState<string>();
   const premium = useUserStore((state) => state.premium);
 
-  const save = async (
+  const exportNoteAs = async (
     type: "pdf" | "txt" | "md" | "html" | "md-frontmatter"
   ) => {
     if (exporting) return;
@@ -81,9 +81,18 @@ const ExportNotesSheet = ({
     setComplete(false);
     let result;
     if (ids.length > 1) {
-      result = await Exporter.bulkExport(ids, type, setStatus);
+      result = await Exporter.bulkExport(
+        db.notes.all.where((eb) => eb("id", "in", ids)),
+        type,
+        setStatus
+      );
     } else {
-      result = await Exporter.exportNote(ids[0], type);
+      const note = await db.notes.note(ids[0]);
+      if (!note) {
+        setExporting(false);
+        return;
+      }
+      result = await Exporter.exportNote(note, type, setStatus);
       await sleep(1000);
     }
     if (!result) {
@@ -101,7 +110,7 @@ const ExportNotesSheet = ({
     {
       title: "PDF",
       func: async () => {
-        await save("pdf");
+        await exportNoteAs("pdf");
       },
       icon: "file-pdf-box",
       desc: "View in any pdf reader app",
@@ -111,7 +120,7 @@ const ExportNotesSheet = ({
     {
       title: "Markdown",
       func: async () => {
-        await save("md");
+        await exportNoteAs("md");
       },
       icon: "language-markdown",
       desc: "View in any text or markdown editor",
@@ -121,7 +130,7 @@ const ExportNotesSheet = ({
     {
       title: "Markdown + Frontmatter",
       func: async () => {
-        await save("md-frontmatter");
+        await exportNoteAs("md-frontmatter");
       },
       icon: "language-markdown",
       desc: "View in any text or markdown editor",
@@ -131,7 +140,7 @@ const ExportNotesSheet = ({
     {
       title: "Plain Text",
       func: async () => {
-        await save("txt");
+        await exportNoteAs("txt");
       },
       icon: "card-text",
       desc: "View in any text editor",
@@ -141,7 +150,7 @@ const ExportNotesSheet = ({
     {
       title: "HTML",
       func: async () => {
-        await save("html");
+        await exportNoteAs("html");
       },
       icon: "language-html5",
       desc: "View in any web browser & html reader",
@@ -250,11 +259,9 @@ const ExportNotesSheet = ({
               <>
                 <ActivityIndicator />
                 <Paragraph>
-                  {ids.length === 1
-                    ? "Exporting note... Please wait"
-                    : `Exporting notes${
-                        status ? ` (${status})` : ``
-                      }... Please wait`}
+                  {`${
+                    status ? `${status})` : `Exporting notes`
+                  }... Please wait`}
                 </Paragraph>
               </>
             ) : (

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

@@ -141,7 +141,7 @@ Logged in: ${user ? "yes" : "no"}`,
         defaultValue={title.current}
         style={{
           borderWidth: 1,
-          borderColor: colors.secondary.background,
+          borderColor: colors.primary.border,
           borderRadius: 5,
           padding: 12,
           fontFamily: "OpenSans-Regular",
@@ -178,7 +178,7 @@ For example:
         }}
         style={{
           borderWidth: 1,
-          borderColor: colors.secondary.background,
+          borderColor: colors.primary.border,
           borderRadius: 5,
           padding: 12,
           fontFamily: "OpenSans-Regular",

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

@@ -0,0 +1,377 @@
+/*
+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 {
+  ContentBlock,
+  Note,
+  VirtualizedGrouping,
+  createInternalLink
+} from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
+import React, { useEffect, useRef, useState } from "react";
+import { TextInput, View } from "react-native";
+import { FlatList } from "react-native-actions-sheet";
+import { db } from "../../../common/database";
+import { useDBItem } from "../../../hooks/use-db-item";
+import { presentSheet } from "../../../services/event-manager";
+import { SIZE } from "../../../utils/size";
+import { Button } from "../../ui/button";
+import Input from "../../ui/input";
+import { Pressable } from "../../ui/pressable";
+import Paragraph from "../../ui/typography/paragraph";
+import type { LinkAttributes } from "@notesnook/editor/dist/extensions/link";
+import { editorController } from "../../../screens/editor/tiptap/utils";
+
+const ListNoteItem = ({
+  id,
+  items,
+  onSelectNote
+}: {
+  id: any;
+  items: VirtualizedGrouping<Note> | undefined;
+  onSelectNote: any;
+}) => {
+  const [item] = useDBItem(id, "note", items);
+  return (
+    <Pressable
+      onPress={() => {
+        if (!item) return;
+        onSelectNote(item as Note);
+      }}
+      type={"transparent"}
+      style={{
+        paddingVertical: 12,
+        flexDirection: "row",
+        width: "100%",
+        justifyContent: "flex-start",
+        height: 50
+      }}
+    >
+      <View
+        style={{
+          flexShrink: 1
+        }}
+      >
+        <Paragraph numberOfLines={1}>{item?.title}</Paragraph>
+      </View>
+    </Pressable>
+  );
+};
+
+const ListBlockItem = ({
+  item,
+  onSelectBlock
+}: {
+  item: ContentBlock;
+  onSelectBlock: any;
+}) => {
+  const { colors } = useThemeColors();
+  return (
+    <Pressable
+      onPress={() => {
+        onSelectBlock(item);
+      }}
+      type={"transparent"}
+      style={{
+        flexDirection: "row",
+        width: "100%",
+        justifyContent: "flex-start",
+        minHeight: 45
+      }}
+    >
+      <View
+        style={{
+          flexDirection: "row",
+          width: "100%",
+          columnGap: 10,
+          alignItems: "flex-start",
+          borderBottomWidth: 1,
+          borderBottomColor: colors.primary.border,
+          paddingVertical: 5,
+          justifyContent: "space-between"
+        }}
+      >
+        <Paragraph
+          style={{
+            flexShrink: 1
+          }}
+        >
+          {item?.content.length > 200
+            ? item?.content.slice(0, 200) + "..."
+            : !item.content || item.content.trim() === ""
+            ? "(Empty block)"
+            : item.content}
+        </Paragraph>
+
+        <View
+          style={{
+            borderRadius: 5,
+            backgroundColor: colors.secondary.background,
+            height: 25,
+            minWidth: 25,
+            alignItems: "center",
+            justifyContent: "center"
+          }}
+        >
+          <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+            {item.type.toUpperCase()}
+          </Paragraph>
+        </View>
+      </View>
+    </Pressable>
+  );
+};
+
+export default function LinkNote(props: {
+  attributes: LinkAttributes;
+  resolverId: string;
+  onLinkCreated: () => void;
+  close?: (ctx?: string) => void;
+}) {
+  const { colors } = useThemeColors();
+  const query = useRef<string>();
+  const [notes, setNotes] = useState<VirtualizedGrouping<Note>>();
+  const nodesRef = useRef<ContentBlock[]>([]);
+  const [nodes, setNodes] = useState<ContentBlock[]>([]);
+
+  const inputRef = useRef<TextInput>();
+
+  const [selectedNote, setSelectedNote] = useState<Note>();
+  const [selectedNodeId, setSelectedNodeId] = useState<string>();
+
+  useEffect(() => {
+    db.notes.all.sorted(db.settings.getGroupOptions("notes")).then((notes) => {
+      setNotes(notes);
+    });
+  }, []);
+
+  const onChange = async (value: string) => {
+    query.current = value;
+    if (!selectedNote) {
+      const notes = await db.lookup.notes(value).sorted();
+      setNotes(notes);
+    } else {
+      if (value.startsWith("#")) {
+        const headingNodes = nodesRef.current.filter((n) =>
+          n.type.match(/(h1|h2|h3|h4|h5|h6)/g)
+        );
+        setNodes(
+          headingNodes.filter((n) => n.content.includes(value.slice(1)))
+        );
+      } else {
+        setNodes(nodesRef.current.filter((n) => n.content.includes(value)));
+      }
+    }
+  };
+
+  const onCreateLink = (blockId?: string) => {
+    if (!selectedNote) return;
+    const link = createInternalLink(
+      "note",
+      selectedNote.id,
+      blockId
+        ? {
+            blockId: blockId
+          }
+        : undefined
+    );
+    editorController.current.commands.createInternalLink(
+      {
+        href: link,
+        title: selectedNote.title
+      },
+      props.resolverId
+    );
+  };
+
+  const onSelectNote = async (note: Note) => {
+    setSelectedNote(note);
+    inputRef.current?.clear();
+    setTimeout(async () => {
+      nodesRef.current = await db.notes.contentBlocks(note.id);
+      setNodes(nodesRef.current);
+    });
+    // Fetch and set note's nodes.
+  };
+
+  const onSelectBlock = (block: ContentBlock) => {
+    onCreateLink(block.id);
+    props.onLinkCreated();
+    props.close?.();
+  };
+
+  return (
+    <View
+      style={{
+        paddingHorizontal: 12,
+        minHeight: "100%",
+        maxHeight: "100%"
+      }}
+    >
+      <View
+        style={{
+          flexDirection: "column",
+          width: "100%",
+          alignItems: "flex-start",
+          gap: 10
+        }}
+      >
+        <Input
+          placeholder={
+            selectedNote
+              ? "Search a section of a note to link to"
+              : "Search a note to link to"
+          }
+          containerStyle={{
+            width: "100%"
+          }}
+          marginBottom={0}
+          onChangeText={(value) => {
+            onChange(value);
+          }}
+        />
+
+        {selectedNote ? (
+          <View
+            style={{
+              gap: 10
+            }}
+          >
+            <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+              SELECTED NOTE
+            </Paragraph>
+            <Pressable
+              onPress={() => {
+                setSelectedNote(undefined);
+                setSelectedNodeId(undefined);
+                setNodes([]);
+              }}
+              style={{
+                flexDirection: "row",
+                width: "100%",
+                justifyContent: "flex-start",
+                height: 45,
+                borderWidth: 1,
+                borderColor: colors.primary.accent,
+                paddingHorizontal: 12
+              }}
+              type="secondaryAccented"
+            >
+              <View
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  width: "100%"
+                }}
+              >
+                <Paragraph numberOfLines={1}>{selectedNote?.title}</Paragraph>
+
+                <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+                  Tap to deselect
+                </Paragraph>
+              </View>
+            </Pressable>
+
+            {nodes?.length > 0 ? (
+              <Paragraph
+                style={{
+                  marginBottom: 12
+                }}
+                color={colors.secondary.paragraph}
+                size={SIZE.xs}
+              >
+                LINK TO A SECTION
+              </Paragraph>
+            ) : null}
+          </View>
+        ) : null}
+      </View>
+
+      {selectedNote ? (
+        <FlatList
+          renderItem={({ item, index }) => (
+            <ListBlockItem item={item} onSelectBlock={onSelectBlock} />
+          )}
+          style={{
+            marginTop: 10
+          }}
+          keyboardShouldPersistTaps="handled"
+          windowSize={3}
+          keyExtractor={(item) => item.id}
+          data={nodes}
+        />
+      ) : (
+        <FlatList
+          renderItem={({ item, index }: any) => (
+            <ListNoteItem
+              id={index}
+              items={notes}
+              onSelectNote={onSelectNote}
+            />
+          )}
+          keyboardShouldPersistTaps="handled"
+          style={{
+            marginTop: 10
+          }}
+          windowSize={3}
+          data={notes?.placeholders}
+        />
+      )}
+
+      {selectedNote ? (
+        <Button
+          style={{
+            marginTop: 10
+          }}
+          title="Create link"
+          type="accent"
+          width="100%"
+          onPress={() => {
+            onCreateLink();
+            props.onLinkCreated();
+            props.close?.();
+          }}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+LinkNote.present = (attributes: LinkAttributes, resolverId: string) => {
+  let didCreateLink = false;
+  presentSheet({
+    component: (ref, close) => (
+      <LinkNote
+        attributes={attributes}
+        resolverId={resolverId}
+        onLinkCreated={() => {
+          didCreateLink = true;
+        }}
+        close={close}
+      />
+    ),
+    onClose: () => {
+      if (!didCreateLink) {
+        editorController?.current.commands.dismissCreateInternalLinkRequest(
+          resolverId
+        );
+      }
+    }
+  });
+};

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

@@ -99,6 +99,7 @@ export default function Migrate() {
       const { error } = await BackupService.run(false, "local");
       if (error) {
         ToastManager.error(error, "Backup failed");
+        reportError(error);
         setLoading(false);
         return;
       }
@@ -159,13 +160,14 @@ export default function Migrate() {
               }}
             >
               Migrating database{progress ? `(${progress?.collection})` : null}
-              {progress ? `(${progress.current}/${progress.total}) ` : null}...
-              please wait
+              {progress ? `(${progress.current}/${progress.total}) ` : null}
+              ... please wait
             </Paragraph>
 
             <View
               style={{
-                width: 200
+                width: 200,
+                alignSelf: "center"
               }}
             >
               <ProgressBarComponent

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

@@ -0,0 +1,361 @@
+/*
+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 { Notebook, VirtualizedGrouping } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
+import React, { useCallback, useEffect, useState } from "react";
+import { Text, View } from "react-native";
+import { FlatList } from "react-native-actions-sheet";
+import create from "zustand";
+import { db } from "../../../common/database";
+import { useNotebook } from "../../../hooks/use-notebook";
+import { eSendEvent, presentSheet } from "../../../services/event-manager";
+import {
+  useNotebookStore,
+  useNotebooks
+} from "../../../stores/use-notebook-store";
+import { eOnNotebookUpdated } from "../../../utils/events";
+import {
+  findRootNotebookId,
+  getParentNotebookId
+} from "../../../utils/notebooks";
+import { SIZE } from "../../../utils/size";
+import { Dialog } from "../../dialog";
+import DialogHeader from "../../dialog/dialog-header";
+import { presentDialog } from "../../dialog/functions";
+import SheetProvider from "../../sheet-provider";
+import { Button } from "../../ui/button";
+import { IconButton } from "../../ui/icon-button";
+import { Pressable } from "../../ui/pressable";
+import Seperator from "../../ui/seperator";
+import Paragraph from "../../ui/typography/paragraph";
+import { AddNotebookSheet } from "../add-notebook";
+
+const useNotebookExpandedStore = create<{
+  expanded: {
+    [id: string]: boolean;
+  };
+  setExpanded: (id: string) => void;
+}>((set, get) => ({
+  expanded: {},
+  setExpanded(id: string) {
+    set({
+      expanded: {
+        ...get().expanded,
+        [id]: !get().expanded[id]
+      }
+    });
+  }
+}));
+
+export const MoveNotebookSheet = ({
+  selectedNotebooks,
+  close
+}: {
+  selectedNotebooks: Notebook[];
+  close?: () => void;
+}) => {
+  const [notebooks] = useNotebooks();
+  const { colors } = useThemeColors();
+  const [moveToTop, setMoveToTop] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      for (const notebook of selectedNotebooks) {
+        const root = await findRootNotebookId(notebook.id);
+        if (root !== notebook.id) {
+          setMoveToTop(true);
+          return;
+        }
+      }
+    })();
+  }, [selectedNotebooks]);
+
+  const renderItem = useCallback(
+    ({ index }: { index: number }) => {
+      return (
+        <NotebookItem
+          id={index}
+          items={notebooks}
+          level={0}
+          selectedNotebooks={selectedNotebooks}
+          onPress={async (selectedNotebook) => {
+            presentDialog({
+              title: `Move ${
+                selectedNotebooks.length > 1
+                  ? selectedNotebooks.length + " notebooks"
+                  : selectedNotebooks[0].title
+              }`,
+              paragraph: `Are you sure you want to move ${
+                selectedNotebooks.length > 1
+                  ? selectedNotebooks.length + " notebooks"
+                  : selectedNotebooks[0].title
+              } to ${selectedNotebook.title}?`,
+              positiveText: "Move",
+              context: "move-notebook",
+              positivePress: async () => {
+                for (const notebook of selectedNotebooks) {
+                  const parent = await getParentNotebookId(notebook.id);
+                  const root = await findRootNotebookId(notebook.id);
+
+                  if (selectedNotebook.id === notebook.id) continue;
+
+                  if (root !== notebook.id) {
+                    await db.relations.unlink(
+                      {
+                        type: "notebook",
+                        id: parent
+                      },
+                      notebook
+                    );
+                    eSendEvent(eOnNotebookUpdated, parent);
+                  }
+
+                  await db.relations.add(selectedNotebook, notebook);
+                  eSendEvent(eOnNotebookUpdated, selectedNotebook.id);
+                  eSendEvent(eOnNotebookUpdated, notebook.id);
+                }
+                useNotebookStore.getState().refresh();
+                close?.();
+              }
+            });
+          }}
+        />
+      );
+    },
+    [selectedNotebooks, notebooks, close]
+  );
+
+  return (
+    <View>
+      <SheetProvider context="move-notebook" />
+      <Dialog context="move-notebook" />
+
+      <View
+        style={{
+          paddingHorizontal: 12
+        }}
+      >
+        <DialogHeader
+          title={`Moving ${
+            selectedNotebooks.length > 1
+              ? selectedNotebooks.length + " notebooks"
+              : selectedNotebooks[0].title
+          }`}
+          paragraph={"Select the notebook you want to move this notebook to."}
+        />
+      </View>
+      <Seperator />
+
+      <FlatList
+        data={notebooks?.placeholders}
+        renderItem={renderItem}
+        windowSize={1}
+        ListHeaderComponent={
+          <View
+            style={{
+              paddingHorizontal: 12
+            }}
+          >
+            {moveToTop ? (
+              <Button
+                title="Move to top"
+                style={{
+                  alignSelf: "flex-start",
+                  width: "100%",
+                  justifyContent: "space-between"
+                }}
+                icon="arrow-up-bold"
+                iconPosition="right"
+                type="secondaryAccented"
+                onPress={async () => {
+                  for (const notebook of selectedNotebooks) {
+                    const parent = await getParentNotebookId(notebook.id);
+                    const root = await findRootNotebookId(notebook.id);
+                    if (root !== notebook.id) {
+                      await db.relations.unlink(
+                        {
+                          type: "notebook",
+                          id: parent
+                        },
+                        notebook
+                      );
+                      eSendEvent(eOnNotebookUpdated, parent);
+                      eSendEvent(eOnNotebookUpdated, notebook.id);
+                    }
+                  }
+                  useNotebookStore.getState().refresh();
+                  close?.();
+                }}
+              />
+            ) : null}
+          </View>
+        }
+        ListEmptyComponent={
+          <View
+            style={{
+              flex: 1,
+              justifyContent: "center",
+              alignItems: "center",
+              height: 200
+            }}
+          >
+            <Text
+              style={{
+                color: colors.secondary.icon
+              }}
+            >
+              No notebooks
+            </Text>
+          </View>
+        }
+      />
+    </View>
+  );
+};
+
+const NotebookItem = ({
+  id,
+  onPress,
+  items,
+  level = 0,
+  selectedNotebooks
+}: {
+  id: string | number;
+  level?: number;
+  items?: VirtualizedGrouping<Notebook>;
+  onPress: (item: Notebook) => void;
+  selectedNotebooks: Notebook[];
+}) => {
+  const { nestedNotebooks, notebook } = useNotebook(id, items, true);
+
+  const isExpanded = useNotebookExpandedStore((state) =>
+    !notebook ? false : state.expanded[notebook.id]
+  );
+  const { colors } = useThemeColors();
+
+  return selectedNotebooks.find(
+    (n) => n.id === notebook?.id
+  ) ? null : !notebook ? (
+    <View
+      style={{
+        height: 45
+      }}
+    />
+  ) : (
+    <View
+      style={{
+        minHeight: 45,
+        borderRadius: 0
+      }}
+    >
+      <Pressable
+        onPress={() => onPress(notebook)}
+        style={{
+          flexDirection: "row",
+          paddingHorizontal: 12,
+          height: 45
+        }}
+      >
+        {nestedNotebooks?.placeholders.length ? (
+          <IconButton
+            name={isExpanded ? "chevron-down" : "chevron-right"}
+            color={colors.primary.icon}
+            size={20}
+            onPress={() => {
+              if (!notebook) return;
+              useNotebookExpandedStore.getState().setExpanded(notebook.id);
+            }}
+          />
+        ) : (
+          <View
+            style={{
+              width: 35,
+              height: 30,
+              justifyContent: "center",
+              alignItems: "center"
+            }}
+          />
+        )}
+
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            flexGrow: 1,
+            alignItems: "center"
+          }}
+        >
+          <Paragraph
+            numberOfLines={1}
+            style={{
+              color: colors.primary.paragraph,
+              fontSize: 15
+            }}
+          >
+            {notebook.title}
+          </Paragraph>
+
+          <IconButton
+            name="plus"
+            onPress={() => {
+              if (!notebook) return;
+              AddNotebookSheet.present(
+                undefined,
+                notebook,
+                "move-notebooks",
+                undefined,
+                false
+              );
+            }}
+            size={SIZE.lg}
+          />
+        </View>
+      </Pressable>
+
+      {nestedNotebooks?.placeholders?.length && isExpanded ? (
+        <View
+          style={{
+            paddingLeft: level + 1 > 0 && level + 1 < 5 ? 15 : 0,
+            marginTop: 5
+          }}
+        >
+          {nestedNotebooks.placeholders.map((item, index) => (
+            <NotebookItem
+              key={notebook?.id + index}
+              id={index}
+              onPress={onPress}
+              level={level + 1}
+              items={nestedNotebooks}
+              selectedNotebooks={selectedNotebooks}
+            />
+          ))}
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+MoveNotebookSheet.present = async (notebooks: Notebook[]) => {
+  presentSheet({
+    component: (ref, close) => (
+      <MoveNotebookSheet selectedNotebooks={notebooks} close={close} />
+    ),
+    keyboardHandlerDisabled: true
+  });
+};

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

@@ -20,8 +20,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { VirtualizedGrouping } from "@notesnook/core";
 import { Note, Notebook } from "@notesnook/core/dist/types";
 import { useThemeColors } from "@notesnook/theme";
-import React, { RefObject, useEffect, useState } from "react";
-import { View } from "react-native";
+import React, { RefObject, useEffect, useRef, useState } from "react";
+import { ActivityIndicator, TextInput, View } from "react-native";
 import { ActionSheetRef } from "react-native-actions-sheet";
 import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
 import { db } from "../../../common/database";
@@ -35,6 +35,7 @@ import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
+import Input from "../../ui/input";
 import { Pressable } from "../../ui/pressable";
 import Seperator from "../../ui/seperator";
 import Paragraph from "../../ui/typography/paragraph";
@@ -50,39 +51,60 @@ export const MoveNotes = ({
 }) => {
   const { colors } = useThemeColors();
   const currentNotebook = notebook;
+  const inputRef = useRef<TextInput>(null);
+  const [loading, setLoading] = useState(false);
   const selectionCount = useItemSelectionStore(
     (state) =>
       Object.keys(state.selection).filter(
         (k) =>
-          state.initialState?.[k] !== "selected" &&
-          state.selection[k] !== "deselected"
+          state.selection?.[k] === "selected" ||
+          state.selection[k] === "deselected"
       )?.length > 0
   );
 
   const [notes, setNotes] = useState<VirtualizedGrouping<Note>>();
 
+  const loadNotes = React.useCallback(
+    async (query?: string) => {
+      setLoading(true);
+      const notes = query
+        ? db.lookup.notes(query).sorted()
+        : db.notes?.all.sorted(db.settings.getGroupOptions("notes") as any);
+
+      notes
+        .then(async (notes) => {
+          await notes.item(0);
+          setNotes(notes);
+          setLoading(false);
+        })
+        .catch(() => {
+          setLoading(false);
+        });
+
+      db.relations
+        .from(currentNotebook, "note")
+        .get()
+        .then((existingNotes) => {
+          const selection: { [name: string]: any } = {};
+          existingNotes.forEach((rel) => {
+            selection[rel.toId] = "selected";
+          });
+          useItemSelectionStore.setState({
+            selection: selection,
+            initialState: selection
+          });
+        });
+    },
+    [currentNotebook]
+  );
+
   useEffect(() => {
-    db.notes?.all.sorted(db.settings.getGroupOptions("notes")).then((notes) => {
-      setNotes(notes);
-    });
-    db.relations
-      .from(currentNotebook, "note")
-      .get()
-      .then((existingNotes) => {
-        const selection: { [name: string]: any } = {};
-        existingNotes.forEach((rel) => {
-          selection[rel.toId] = "selected";
-        });
-        useItemSelectionStore.setState({
-          selection: selection,
-          initialState: selection
-        });
-      });
+    loadNotes();
 
     return () => {
       useItemSelectionStore.getState().reset();
     };
-  }, [currentNotebook]);
+  }, [currentNotebook, loadNotes]);
 
   const renderItem = React.useCallback(
     ({ index }: { item: boolean; index: number }) => {
@@ -96,19 +118,33 @@ export const MoveNotes = ({
       style={{
         paddingHorizontal: 12,
         maxHeight: "100%",
-        height: notes?.placeholders.length
-          ? 50 * (notes?.placeholders.length + 2)
-          : 300
+        height: "100%"
       }}
     >
       <Dialog context="local" />
 
       <DialogHeader
         title={`Add notes to ${currentNotebook.title}`}
-        paragraph={"Select the topic in which you would like to move notes."}
+        paragraph={"Select the notes you want to move to this Notebook."}
       />
       <Seperator />
 
+      <Input
+        button={{
+          icon: "magnify",
+          color: colors.primary.accent,
+          size: SIZE.lg,
+          onPress: () => {}
+        }}
+        testID="search-input"
+        fwdRef={inputRef}
+        autoCapitalize="none"
+        onChangeText={(v) => {
+          loadNotes(v && v.trim() === "" ? undefined : v.trim());
+        }}
+        placeholder="Search a note"
+      />
+
       <FlashList
         ListEmptyComponent={
           <View
@@ -118,13 +154,17 @@ export const MoveNotes = ({
               alignItems: "center"
             }}
           >
-            <Paragraph color={colors.secondary.paragraph}>
-              No notes to show
-            </Paragraph>
+            {loading ? (
+              <ActivityIndicator size="large" color={colors.primary.accent} />
+            ) : (
+              <Paragraph color={colors.secondary.paragraph}>
+                No notes to show
+              </Paragraph>
+            )}
           </View>
         }
         estimatedItemSize={50}
-        data={notes?.placeholders}
+        data={loading ? [] : notes?.placeholders}
         renderItem={renderItem}
       />
 
@@ -135,6 +175,12 @@ export const MoveNotes = ({
               currentNotebook.id,
               ...useItemSelectionStore.getState().getSelectedItemIds()
             );
+
+            await db.notes?.removeFromNotebook(
+              currentNotebook.id,
+              ...useItemSelectionStore.getState().getDeselectedItemIds()
+            );
+
             updateNotebook(currentNotebook.id);
             Navigation.queueRoutesForUpdate();
             fwdRef?.current?.hide();
@@ -161,11 +207,12 @@ const SelectableNoteItem = React.memo(
     const selected = useItemSelectionStore((state) =>
       item?.id ? state.selection[item.id] === "selected" : false
     );
+
     const exists = useItemSelectionStore((state) =>
       item?.id ? state.initialState[item.id] === "selected" : false
     );
 
-    return exists ? null : (
+    return (
       <Pressable
         testID="listitem.select"
         onPress={() => {
@@ -205,8 +252,14 @@ const SelectableNoteItem = React.memo(
                   ? "check-circle-outline"
                   : "checkbox-blank-circle-outline"
               }
-              type="selected"
-              color={selected ? colors.selected.icon : colors.primary.icon}
+              type="plain"
+              color={
+                selected
+                  ? colors.selected.icon
+                  : exists && !selected
+                  ? colors.static.red
+                  : colors.primary.icon
+              }
             />
 
             <View

apps/mobile/app/components/sheets/new-feature/index.tsx

@@ -17,13 +17,14 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { Platform, View } from "react-native";
+import { ScrollView } from "react-native-actions-sheet";
 import { getVersion } from "react-native-device-info";
 import { features } from "../../../features";
 import { eSendEvent, presentSheet } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
-import { useThemeColors } from "@notesnook/theme";
 import { eCloseSheet } from "../../../utils/events";
 import { SIZE } from "../../../utils/size";
 import { Button } from "../../ui/button";
@@ -36,7 +37,13 @@ export type FeatureType = {
   platform?: "ios" | "android";
 };
 
-const NewFeature = ({ features }: { features: FeatureType[] }) => {
+const NewFeature = ({
+  features,
+  version
+}: {
+  features: FeatureType[];
+  version?: string | null;
+}) => {
   const { colors } = useThemeColors();
 
   return (
@@ -44,30 +51,33 @@ const NewFeature = ({ features }: { features: FeatureType[] }) => {
       style={{
         alignItems: "center",
         paddingHorizontal: 12,
-        paddingTop: 12
+        paddingTop: 12,
+        maxHeight: "100%"
       }}
     >
       <Heading color={colors.secondary.heading} size={SIZE.md}>
-        New Version Highlights 🎉
+        {!version ? "New version " : `v${version} `}Highlights 🎉
       </Heading>
 
       <Seperator />
 
-      {features.map((item) => (
-        <View
-          key={item.title}
-          style={{
-            backgroundColor: colors.secondary.background,
-            padding: 12,
-            borderRadius: 10,
-            width: "100%",
-            marginBottom: 10
-          }}
-        >
-          <Heading size={SIZE.lg - 2}>{item.title}</Heading>
-          <Paragraph>{item.body}</Paragraph>
-        </View>
-      ))}
+      <ScrollView>
+        {features.map((item) => (
+          <View
+            key={item.title}
+            style={{
+              backgroundColor: colors.secondary.background,
+              padding: 12,
+              borderRadius: 10,
+              width: "100%",
+              marginBottom: 10
+            }}
+          >
+            <Heading size={SIZE.lg - 2}>{item.title}</Heading>
+            <Paragraph selectable>{item.body}</Paragraph>
+          </View>
+        ))}
+      </ScrollView>
       <Seperator />
 
       <Button
@@ -108,7 +118,13 @@ NewFeature.present = () => {
   );
   if (_features.length === 0) return;
   presentSheet({
-    component: <NewFeature features={features} />
+    component: (
+      <NewFeature
+        features={features}
+        version={SettingsService.getProperty("version")}
+      />
+    ),
+    disableClosing: true
   });
   return true;
 };

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

@@ -19,13 +19,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Notebook, VirtualizedGrouping } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useRef, useState } from "react";
-import { RefreshControl, View, useWindowDimensions } from "react-native";
+import {
+  Platform,
+  RefreshControl,
+  View,
+  useWindowDimensions
+} from "react-native";
 import ActionSheet, { ActionSheetRef } from "react-native-actions-sheet";
 import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
 import Config from "react-native-config";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import create from "zustand";
 import { notesnook } from "../../../../e2e/test.ids";
+import { db } from "../../../common/database";
 import { MMKV } from "../../../common/database/mmkv";
 import { useNotebook } from "../../../hooks/use-notebook";
 import NotebookScreen from "../../../screens/notebook";
@@ -43,6 +49,7 @@ import { IconButton } from "../../ui/icon-button";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
 import { AddNotebookSheet } from "../add-notebook";
+import { MoveNotebookSheet } from "../move-notebook";
 import Sort from "../sort";
 
 const useItemSelectionStore = createItemSelectionStore(true, false);
@@ -61,7 +68,8 @@ class NotebookSheetConfig {
   }
 
   static get(item: ConfigItem) {
-    return MMKV.getInt(NotebookSheetConfig.makeId(item)) || 0;
+    const value = MMKV.getInt(NotebookSheetConfig.makeId(item));
+    return typeof value === "number" ? value : 0;
   }
 
   static set(item: ConfigItem, index = 0) {
@@ -124,11 +132,6 @@ export const NotebookSheet = () => {
         if (!focusedRouteId) return;
         const nextRoot = await findRootNotebookId(focusedRouteId);
         if (nextRoot !== currentItem.current) {
-          console.log(
-            "NotebookSheet.useEffect.canShow",
-            "Root changed to",
-            nextRoot
-          );
           useItemSelectionStore.setState({
             enabled: false,
             selection: {}
@@ -137,17 +140,14 @@ export const NotebookSheet = () => {
         currentItem.current = nextRoot;
         const snapPoint = NotebookSheetConfig.get({
           type: "notebook",
-          id: nextRoot as string
+          id: focusedRouteId as string
         });
 
         if (ref.current?.isOpen()) {
           ref.current?.snapToIndex(snapPoint);
         } else {
-          setTimeout(() => {
-            ref.current?.show(snapPoint);
-          }, 150);
+          ref.current?.show(snapPoint);
         }
-        console.log("NotebookSheet.useEffect.didShow", focusedRouteId);
         setRoot(nextRoot);
         onRequestUpdate();
       });
@@ -160,7 +160,7 @@ export const NotebookSheet = () => {
         ref.current?.hide();
       }
     }
-  }, [canShow, onRequestUpdate, focusedRouteId]);
+  }, [canShow, focusedRouteId]);
 
   return (
     <ActionSheet
@@ -196,11 +196,56 @@ export const NotebookSheet = () => {
         backgroundColor: colors.secondary.background
       }}
       keyboardHandlerEnabled={false}
-      snapPoints={Config.isTesting === "true" ? [100] : [20, 100]}
+      snapPoints={
+        Config.isTesting === "true"
+          ? [100]
+          : [Platform.OS === "android" ? 15 : 10, 100]
+      }
       initialSnapIndex={1}
       backgroundInteractionEnabled
       gestureEnabled
     >
+      <View
+        style={{
+          position: "absolute",
+          right: 24 + normalize(50),
+          marginTop: -80
+        }}
+      >
+        <Pressable
+          testID={notesnook.buttons.add}
+          type="secondary"
+          onPress={() => {
+            if (!notebook) return;
+            AddNotebookSheet.present(
+              undefined,
+              notebook,
+              undefined,
+              undefined,
+              false
+            );
+          }}
+          style={{
+            borderRadius: 100
+          }}
+        >
+          <View
+            style={{
+              alignItems: "center",
+              justifyContent: "center",
+              height: normalize(50),
+              width: normalize(50)
+            }}
+          >
+            <Icon
+              name="notebook-plus"
+              color={colors.primary.icon}
+              size={SIZE.xxl}
+            />
+          </View>
+        </Pressable>
+      </View>
+
       <View
         style={{
           position: "absolute",
@@ -220,8 +265,8 @@ export const NotebookSheet = () => {
             style={{
               alignItems: "center",
               justifyContent: "center",
-              height: normalize(60),
-              width: normalize(60)
+              height: normalize(50),
+              width: normalize(50)
             }}
           >
             <Icon name="plus" color="white" size={SIZE.xxl} />
@@ -278,6 +323,26 @@ export const NotebookSheet = () => {
                   size={22}
                 />
 
+                <IconButton
+                  style={{
+                    marginLeft: 10,
+                    width: 40 * fontScale,
+                    height: 40 * fontScale
+                  }}
+                  onPress={async () => {
+                    const ids = useItemSelectionStore
+                      .getState()
+                      .getSelectedItemIds();
+                    const notebooks = await db.notebooks.all.items(ids);
+                    MoveNotebookSheet.present(notebooks);
+                  }}
+                  color={colors.primary.icon}
+                  tooltipText="Clear selection"
+                  tooltipPosition={1}
+                  name="arrow-right-bold-box-outline"
+                  size={22}
+                />
+
                 <IconButton
                   style={{
                     marginLeft: 10,
@@ -319,20 +384,6 @@ export const NotebookSheet = () => {
                     height: 40 * fontScale
                   }}
                 />
-                <IconButton
-                  name="plus"
-                  onPress={() => {
-                    if (!notebook) return;
-                    AddNotebookSheet.present(undefined, notebook, undefined);
-                  }}
-                  testID="add-notebook-button"
-                  color={colors.primary.icon}
-                  size={22}
-                  style={{
-                    width: 40 * fontScale,
-                    height: 40 * fontScale
-                  }}
-                />
 
                 <IconButton
                   name={collapsed ? "chevron-up" : "chevron-down"}

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

@@ -357,7 +357,9 @@ const PublishNoteSheet = ({
         }}
         onPress={async () => {
           try {
-            await openLinkInBrowser("https://docs.notesnook.com/monographs/");
+            await openLinkInBrowser(
+              "https://help.notesnook.com/publish-notes-with-monographs"
+            );
           } catch (e) {
             console.error(e);
           }

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

@@ -0,0 +1,528 @@
+/*
+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 {
+  InternalLink,
+  TextSlice,
+  VirtualizedGrouping,
+  createInternalLink,
+  highlightInternalLinks
+} from "@notesnook/core";
+import { ContentBlock, ItemReference, Note } from "@notesnook/core/dist/types";
+import { useThemeColors } from "@notesnook/theme";
+import React, { MutableRefObject, useEffect, useRef, useState } from "react";
+import { ActivityIndicator, View } from "react-native";
+import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
+import create from "zustand";
+import { db } from "../../../common/database";
+import { useDBItem, useNoteLocked } from "../../../hooks/use-db-item";
+import { eSendEvent, presentSheet } from "../../../services/event-manager";
+import { useRelationStore } from "../../../stores/use-relation-store";
+import { eOnLoadNote } from "../../../utils/events";
+import { tabBarRef } from "../../../utils/global-refs";
+import { SIZE } from "../../../utils/size";
+import SheetProvider from "../../sheet-provider";
+import { Button } from "../../ui/button";
+import { IconButton } from "../../ui/icon-button";
+import { Pressable } from "../../ui/pressable";
+import Paragraph from "../../ui/typography/paragraph";
+
+export const useExpandedStore = create<{
+  expanded: {
+    [id: string]: boolean;
+  };
+  setExpanded: (id: string) => void;
+}>((set, get) => ({
+  expanded: {},
+  setExpanded(id: string) {
+    set({
+      expanded: {
+        ...get().expanded,
+        [id]: !get().expanded[id]
+      }
+    });
+  }
+}));
+
+const ListBlockItem = ({
+  item,
+  onSelectBlock
+}: {
+  item: ContentBlock;
+  onSelectBlock: () => void;
+}) => {
+  const { colors } = useThemeColors();
+  return (
+    <Pressable
+      onPress={() => {
+        onSelectBlock();
+      }}
+      type={"transparent"}
+      style={{
+        flexDirection: "row",
+        width: "100%",
+        paddingLeft: 35,
+        justifyContent: "flex-start",
+        minHeight: 45,
+        paddingHorizontal: 12
+      }}
+    >
+      <View
+        style={{
+          flexDirection: "row",
+          width: "100%",
+          columnGap: 10,
+          justifyContent: "space-between"
+        }}
+      >
+        <Paragraph
+          style={{
+            flexShrink: 1,
+            marginTop: 2
+          }}
+        >
+          {item?.content.length > 200
+            ? item?.content.slice(0, 200) + "..."
+            : !item.content || item.content.trim() === ""
+            ? "(Empty block)"
+            : item.content}
+        </Paragraph>
+
+        <View
+          style={{
+            borderRadius: 5,
+            backgroundColor: colors.secondary.background,
+            width: 25,
+            height: 25,
+            alignItems: "center",
+            justifyContent: "center"
+          }}
+        >
+          <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+            {item.type.toUpperCase()}
+          </Paragraph>
+        </View>
+      </View>
+    </Pressable>
+  );
+};
+
+const ListNoteInternalLink = ({
+  link,
+  onSelect
+}: {
+  link: {
+    blockId: string;
+    highlightedText: [TextSlice, TextSlice, TextSlice][];
+  };
+  onSelect: () => void;
+}) => {
+  const { colors } = useThemeColors();
+  return (
+    <Pressable
+      onPress={() => {
+        onSelect();
+      }}
+      type={"transparent"}
+      style={{
+        flexDirection: "row",
+        width: "100%",
+        paddingLeft: 35,
+        justifyContent: "flex-start",
+        minHeight: 45
+      }}
+    >
+      <View
+        style={{
+          width: "100%",
+          rowGap: 10
+        }}
+      >
+        {link.highlightedText.map((text) => (
+          <Paragraph
+            key={`root_${text[0].text}`}
+            style={{
+              flexShrink: 1,
+              marginTop: 2,
+              flexWrap: "wrap"
+            }}
+          >
+            {text.map((slice) =>
+              !slice.highlighted ? (
+                slice.text
+              ) : (
+                <Paragraph
+                  key={slice.text}
+                  color={colors.selected.accent}
+                  style={{
+                    textDecorationLine: "underline",
+                    textDecorationColor: colors.selected.accent
+                  }}
+                >
+                  {slice.text}
+                </Paragraph>
+              )
+            )}
+          </Paragraph>
+        ))}
+      </View>
+    </Pressable>
+  );
+};
+
+const ListNoteItem = ({
+  id,
+  items,
+  onSelect,
+  reference,
+  internalLinks,
+  listType
+}: {
+  id: number;
+  items: VirtualizedGrouping<Note> | undefined;
+  onSelect: (item: Note, blockId?: string) => void;
+  reference: Note;
+  internalLinks: MutableRefObject<InternalLink<"note">[] | undefined>;
+  listType: "linkedNotes" | "referencedIn";
+}) => {
+  const { colors } = useThemeColors();
+  const [item] = useDBItem(id, "note", items);
+  const expanded = useExpandedStore((state) =>
+    !item ? false : state.expanded[item.id]
+  );
+  const locked = useNoteLocked(item?.id);
+  const [linkedBlocks, setLinkedBlocks] = useState<ContentBlock[]>([]);
+  const [noteInternalLinks, setNoteInternalLinks] = useState<
+    {
+      blockId: string;
+      highlightedText: [TextSlice, TextSlice, TextSlice][];
+    }[]
+  >([]);
+
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (item?.id && expanded) {
+      (async () => {
+        if (listType === "linkedNotes") {
+          if (linkedBlocks.length) return;
+          setLoading(true);
+          if (!internalLinks.current) {
+            internalLinks.current = await db.notes.internalLinks(reference.id);
+          }
+          const noteLinks = internalLinks.current.filter(
+            (link) => link.id === item.id && link.params?.blockId
+          );
+
+          if (noteLinks.length) {
+            const blocks = await db.notes.contentBlocks(item.id);
+
+            setLinkedBlocks(
+              blocks.filter((block) =>
+                noteLinks.find((link) => block.id === link.params?.blockId)
+              )
+            );
+          }
+        } else {
+          if (noteInternalLinks.length) return;
+          setLoading(true);
+
+          const blocks = await db.notes.contentBlocksWithLinks(item.id);
+          setNoteInternalLinks(
+            blocks
+              .filter((block) =>
+                block.content.includes(createInternalLink("note", reference.id))
+              )
+              .map((block) => {
+                return {
+                  blockId: block?.id as string,
+                  highlightedText: highlightInternalLinks(
+                    block as ContentBlock,
+                    reference.id
+                  )
+                };
+              })
+          );
+        }
+
+        setLoading(false);
+      })();
+    }
+  }, [
+    item?.id,
+    expanded,
+    linkedBlocks.length,
+    internalLinks,
+    reference.id,
+    listType,
+    noteInternalLinks.length
+  ]);
+  console.log(noteInternalLinks);
+  const renderBlock = React.useCallback(
+    (block: ContentBlock) => (
+      <ListBlockItem
+        item={block}
+        onSelectBlock={() => {
+          if (!item) return;
+          onSelect(item, block.id);
+        }}
+      />
+    ),
+    [item, onSelect]
+  );
+
+  const renderInternalLink = React.useCallback(
+    (link: {
+      blockId: string;
+      highlightedText: [TextSlice, TextSlice, TextSlice][];
+    }) => (
+      <ListNoteInternalLink
+        link={link}
+        onSelect={() => {
+          if (!item) return;
+          onSelect(item, link.blockId);
+        }}
+      />
+    ),
+    [item, onSelect]
+  );
+
+  return (
+    <View
+      style={{
+        flexDirection: "column",
+        width: "100%",
+        justifyContent: "flex-start",
+        alignItems: "center"
+      }}
+    >
+      <Pressable
+        type={"plain"}
+        onPress={() => {
+          if (!item) return;
+          onSelect(item as Note);
+        }}
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          width: "100%",
+          height: 45
+        }}
+      >
+        <IconButton
+          size={SIZE.xl}
+          onPress={() => {
+            if (!item?.id) return;
+            useExpandedStore.getState().setExpanded(item?.id);
+          }}
+          top={0}
+          left={0}
+          bottom={0}
+          right={0}
+          style={{
+            width: 35,
+            height: 35
+          }}
+          name={expanded ? "chevron-down" : "chevron-right"}
+        />
+        <Paragraph numberOfLines={1}>{item?.title}</Paragraph>
+      </Pressable>
+
+      {expanded && !locked ? (
+        <View
+          style={{
+            justifyContent: "center",
+            alignItems: "center",
+            width: "100%"
+          }}
+        >
+          {loading ? (
+            <ActivityIndicator color={colors.primary.accent} size={SIZE.lg} />
+          ) : (
+            <>
+              {listType === "linkedNotes" ? (
+                <>
+                  {linkedBlocks.length === 0 ? (
+                    <Paragraph color={colors.secondary.paragraph}>
+                      No blocks linked
+                    </Paragraph>
+                  ) : (
+                    linkedBlocks.map(renderBlock)
+                  )}
+                </>
+              ) : (
+                <>
+                  {noteInternalLinks.length === 0 ? (
+                    <Paragraph color={colors.secondary.paragraph}>
+                      No references found of this note
+                    </Paragraph>
+                  ) : (
+                    noteInternalLinks.map(renderInternalLink)
+                  )}
+                </>
+              )}
+            </>
+          )}
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+type ReferencesListProps = {
+  item: { id: string; type: string };
+  close?: (ctx?: any) => void;
+};
+
+export const ReferencesList = ({ item, close }: ReferencesListProps) => {
+  const [tab, setTab] = useState(0);
+  const updater = useRelationStore((state) => state.updater);
+  const { colors } = useThemeColors();
+  const [items, setItems] = useState<VirtualizedGrouping<Note>>();
+  const hasNoRelations = !items || items?.placeholders?.length === 0;
+  const internalLinks = useRef<InternalLink<"note">[]>();
+
+  useEffect(() => {
+    db.relations?.[tab === 0 ? "from" : "to"]?.(
+      { id: item?.id, type: item?.type } as ItemReference,
+      "note"
+    )
+      .selector.sorted({
+        sortBy: "dateEdited",
+        sortDirection: "desc"
+      })
+      .then((items) => {
+        setItems(items);
+      });
+  }, [item?.id, item?.type, tab]);
+
+  const renderNote = React.useCallback(
+    ({ index }: any) => (
+      <ListNoteItem
+        id={index}
+        items={items}
+        onSelect={(note, blockId) => {
+          console.log(note.id, blockId);
+          eSendEvent(eOnLoadNote, {
+            item: note,
+            blockId: blockId
+          });
+          tabBarRef.current?.goToPage(1);
+          close?.();
+        }}
+        reference={item as Note}
+        internalLinks={internalLinks}
+        listType={tab === 0 ? "linkedNotes" : "referencedIn"}
+      />
+    ),
+    [items, item, tab, close]
+  );
+
+  return (
+    <View style={{ height: "100%" }}>
+      <SheetProvider context="local" />
+
+      <View
+        style={{
+          flexDirection: "row",
+          borderBottomWidth: 1,
+          borderBottomColor: colors.primary.border
+        }}
+      >
+        <Button
+          type={"plain"}
+          title="Linked notes"
+          style={{
+            borderRadius: 0,
+            borderWidth: 0,
+            borderBottomWidth: 3,
+            borderColor: tab === 0 ? colors.primary.accent : "transparent",
+            height: 40,
+            width: "50%"
+          }}
+          onPress={() => {
+            setTab(0);
+          }}
+        />
+        <Button
+          type={"plain"}
+          title="Referenced in"
+          style={{
+            width: "50%",
+            borderWidth: 0,
+            borderRadius: 0,
+            borderBottomWidth: 3,
+            borderColor: tab === 1 ? colors.primary.accent : "transparent",
+            height: 40
+          }}
+          onPress={() => {
+            setTab(1);
+          }}
+        />
+      </View>
+
+      {hasNoRelations ? (
+        <View
+          style={{
+            height: "85%",
+            justifyContent: "center",
+            alignItems: "center"
+          }}
+        >
+          <Paragraph color={colors.secondary.paragraph}>
+            {tab === 1
+              ? "This note is not referenced in other notes."
+              : "This note does not link to other notes."}
+          </Paragraph>
+        </View>
+      ) : (
+        <View
+          style={{
+            paddingHorizontal: 12,
+            flex: 1,
+            marginTop: 10
+          }}
+        >
+          <FlashList
+            bounces={false}
+            data={items.placeholders}
+            renderItem={renderNote}
+          />
+        </View>
+      )}
+    </View>
+  );
+};
+
+ReferencesList.present = ({
+  reference
+}: {
+  reference: { id: string; type: string };
+}) => {
+  presentSheet({
+    component: (ref, close, update) => (
+      <ReferencesList item={reference} close={close} />
+    ),
+    onClose: () => {
+      useExpandedStore.setState({
+        expanded: {}
+      });
+    }
+  });
+};

apps/mobile/app/components/sheets/reminder-notify/index.tsx

@@ -159,7 +159,7 @@ export default function ReminderNotify({
                 ? 160 * references?.placeholders?.length
                 : 500,
             borderTopWidth: 1,
-            borderTopColor: colors.secondary.background,
+            borderTopColor: colors.primary.border,
             marginTop: 5,
             paddingTop: 5
           }}

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

@@ -18,7 +18,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import { useThemeColors } from "@notesnook/theme";
 import React, { RefObject, useRef, useState } from "react";
-import { Platform, TextInput, View } from "react-native";
+import {
+  Platform,
+  TextInput,
+  View,
+  ScrollView as RNScrollView
+} from "react-native";
 import { ActionSheetRef, ScrollView } from "react-native-actions-sheet";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
 import {
@@ -364,7 +369,7 @@ export default function ReminderSheet({
               ))}
             </View>
 
-            <ScrollView showsHorizontalScrollIndicator={false} horizontal>
+            <RNScrollView showsHorizontalScrollIndicator={false} horizontal>
               {recurringMode === RecurringModes.Daily ||
               recurringMode === RecurringModes.Year
                 ? null
@@ -425,7 +430,7 @@ export default function ReminderSheet({
                       }}
                     />
                   ))}
-            </ScrollView>
+            </RNScrollView>
           </View>
         ) : null}