mobile: fix multi-selection ux

this utility resolves attachments & internal links

.eslintignore

@@ -15,6 +15,8 @@ apps/mobile/e2e/
 
 # web
 apps/web/public/an.js
+apps/web/src/common/sqlite/wa-sqlite-async.js
+apps/web/src/common/sqlite/wa-sqlite.js
 
 # editor
 packages/editor/styles/

.eslintrc.js

@@ -78,7 +78,13 @@ module.exports = {
     semi: ["error", "always"],
     "@typescript-eslint/no-empty-function": "off",
     "react/prop-types": "off",
-    "header/header": ["error", "block", LICENSE, 1]
+    "header/header": ["error", "block", LICENSE, 1],
+    "@typescript-eslint/no-empty-interface": [
+      "error",
+      {
+        allowSingleExtends: true
+      }
+    ]
   },
   settings: {
     react: {

.github/actions/setup-node-with-cache/action.yml

@@ -5,9 +5,9 @@ runs:
   using: "composite"
   steps:
     - name: Setup Node
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
-        node-version: 16.x
+        node-version: 20.x
         cache: "npm"
         cache-dependency-path: |
           package-lock.json

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

@@ -6,6 +6,11 @@ jobs:
   build:
     runs-on: ubuntu-latest
     timeout-minutes: 40
+    env:
+      CMAKE_C_COMPILER_LAUNCHER: ccache
+      CMAKE_CXX_COMPILER_LAUNCHER: ccache
+      NDK_CCACHE: ccache
+      USE_CCACHE: 1
 
     steps:
       - name: Checkout
@@ -24,30 +29,126 @@ jobs:
         run: |
           npm ci --ignore-scripts --prefer-offline --no-audit
           npm run bootstrap -- --scope=mobile
-          
+
       - name: Make Gradlew Executable
         run: cd apps/mobile/native/android && chmod +x ./gradlew
 
+      - name: Install CCache
+        uses: hendrikmuhs/ccache-action@v1.2.11
+        with:
+          key: ${{ runner.os }}-ccache-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
+          max-size: 1500M
+          restore-keys: |
+            ${{ runner.os }}-ccache-
+
+      - name: Setup CCache
+        run: |
+          ln -s $(which ccache) /usr/local/bin/gcc
+          ln -s $(which ccache) /usr/local/bin/g++
+          ln -s $(which ccache) /usr/local/bin/cc
+          ln -s $(which ccache) /usr/local/bin/c++
+          ln -s $(which ccache) /usr/local/bin/clang
+          ln -s $(which ccache) /usr/local/bin/clang++
+          ccache --set-config=base_dir=$PWD
+          ccache --set-config=inode_cache=true
+          ccache --set-config=compiler_check=content
+          ccache --set-config=depend_mode=true
+          ccache --set-config=file_clone=true
+          ccache --set-config=sloppiness=clang_index_store,file_stat_matches,include_file_ctime,include_file_mtime,ivfsoverlay,pch_defines,modules,system_headers,time_macros
+          ccache -p
+
+      - name: Cache gradle
+        uses: actions/cache@v2
+        with:
+          path: |
+            ~/.gradle/caches
+            ~/.gradle/wrapper
+          key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
+
+      - name: Patch CPP Projects to use CCache
+        run: |
+          sed -i -e 's/arguments/arguments "-DCMAKE_CXX_COMPILER_LAUNCHER=ccache",/g' apps/mobile/node_modules/react-native-mmkv-storage/android/build.gradle
+          sed -i -e 's/arguments/arguments "-DCMAKE_CXX_COMPILER_LAUNCHER=ccache",/g' apps/mobile/node_modules/react-native-reanimated/android/build.gradle
+          sed -i -e 's/defaultConfig {/ndkVersion safeExtGet('ndkVersion', "25.2.9519653")\n  defaultConfig {/g' apps/mobile/node_modules/react-native-reanimated//android/build.gradle
+          sed -i -e 's/defaultConfig {/ndkVersion safeExtGet('ndkVersion', "25.2.9519653")\n  defaultConfig {/g' apps/mobile/node_modules/react-native-mmkv-storage/android/build.gradle
+
+      - name: CCache Stats Before Build
+        run: ccache -sv
+
       - name: Build unsigned app bundle
         run: yarn release:android:bundle
 
+      - name: CCache Stats after build
+        run: ccache -sv
+
       - name: Sign app bundle for Playstore release
         id: sign_app
-        uses: r0adkll/sign-android-release@v1
+        uses: r0adkll/sign-android-release@master
         with:
           releaseDirectory: apps/mobile/native/android/app/build/outputs/bundle/release
           signingKeyBase64: ${{ secrets.SIGNING_KEY }}
           alias: ${{ secrets.ALIAS }}
           keyStorePassword: ${{ secrets.KEY_PASSWORD }}
           keyPassword: ${{ secrets.KEY_PASSWORD }}
+        env:
+          BUILD_TOOLS_VERSION: "33.0.0"
+
+      - name: Build apks for Github release
+        run: yarn release:android
+
+      - name: Sign apk files
+        id: sign_apk
+        uses: r0adkll/sign-android-release@master
+        with:
+          releaseDirectory: apps/mobile/native/android/app/build/outputs/apk/release
+          signingKeyBase64: ${{ secrets.PUBLIC_SIGNING_KEY }}
+          alias: ${{ secrets.PUBLIC_ALIAS }}
+          keyStorePassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
+          keyPassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
+        env:
+          BUILD_TOOLS_VERSION: "33.0.0"
+
+      - name: Rename apk files
+        run: |
+          cd apps/mobile/native/android/app/build/outputs/apk/release/
+          mv app-arm64-v8a-release-unsigned-signed.apk notesnook-arm64-v8a.apk
+          mv app-armeabi-v7a-release-unsigned-signed.apk notesnook-armeabi-v7a.apk
+          mv app-x86-release-unsigned-signed.apk notesnook-x86.apk
+          mv app-x86_64-release-unsigned-signed.apk notesnook-x86_64.apk
+
+      - name: Get app version
+        id: package-version
+        uses: martinbeentjes/npm-get-version-action@master
+        with:
+          path: apps/mobile
 
       - name: Publish to Playstore
         id: deploy
-        uses: r0adkll/upload-google-play@v1
+        uses: r0adkll/upload-google-play@v1.1.1
         with:
           serviceAccountJsonPlainText: ${{ secrets.SERVICE_ACCOUNT_JSON }}
           packageName: com.streetwriters.notesnook
-          releaseFile: ${{steps.sign_app.outputs.signedReleaseFile}}
-          track: internal
+          releaseFiles: ${{steps.sign_app.outputs.signedReleaseFile}}
+          track: alpha
           status: completed
           whatsNewDirectory: apps/mobile/native/android/releasenotes/
+
+      - name: Create release draft on Github
+        uses: softprops/action-gh-release@v1
+        with:
+          draft: true
+          tag_name: ${{ steps.package-version.outputs.current-version}}-beta-android
+          name: Notesnook Android v${{ steps.package-version.outputs.current-version}} Beta
+          repository: streetwriters/notesnook
+          token: ${{ secrets.GITHUB_TOKEN }}
+          files: |
+            apps/mobile/native/android/app/build/outputs/apk/release/notesnook-arm64-v8a.apk
+            apps/mobile/native/android/app/build/outputs/apk/release/notesnook-armeabi-v7a.apk
+            apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86.apk
+            apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86_64.apk
+
+      - name: Upload signed aab to Github
+        uses: actions/upload-artifact@v2
+        with:
+          name: Notesnook.aab
+          path: ${{steps.sign_app.outputs.signedReleaseFile}}

.github/workflows/android.publish.yml

@@ -6,6 +6,11 @@ jobs:
   build:
     runs-on: ubuntu-latest
     timeout-minutes: 40
+    env:
+      CMAKE_C_COMPILER_LAUNCHER: ccache
+      CMAKE_CXX_COMPILER_LAUNCHER: ccache
+      NDK_CCACHE: ccache
+      USE_CCACHE: 1
 
     steps:
       - name: Checkout
@@ -28,6 +33,66 @@ jobs:
       - name: Make Gradlew Executable
         run: cd apps/mobile/native/android && chmod +x ./gradlew
 
+      - name: Install CCache
+        uses: hendrikmuhs/ccache-action@v1.2.11
+        with:
+          key: ${{ runner.os }}-ccache-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
+          max-size: 1500M
+          restore-keys: |
+            ${{ runner.os }}-ccache-
+
+      - name: Setup CCache
+        run: |
+          ln -s $(which ccache) /usr/local/bin/gcc
+          ln -s $(which ccache) /usr/local/bin/g++
+          ln -s $(which ccache) /usr/local/bin/cc
+          ln -s $(which ccache) /usr/local/bin/c++
+          ln -s $(which ccache) /usr/local/bin/clang
+          ln -s $(which ccache) /usr/local/bin/clang++
+          ccache --set-config=base_dir=$PWD
+          ccache --set-config=inode_cache=true
+          ccache --set-config=compiler_check=content
+          ccache --set-config=depend_mode=true
+          ccache --set-config=file_clone=true
+          ccache --set-config=sloppiness=clang_index_store,file_stat_matches,include_file_ctime,include_file_mtime,ivfsoverlay,pch_defines,modules,system_headers,time_macros
+          ccache -p
+
+      - name: Cache gradle
+        uses: actions/cache@v2
+        with:
+          path: |
+            ~/.gradle/caches
+            ~/.gradle/wrapper
+          key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
+
+      - name: Patch CPP Projects to use CCache
+        run: |
+          sed -i -e 's/arguments/arguments "-DCMAKE_CXX_COMPILER_LAUNCHER=ccache",/g' apps/mobile/node_modules/react-native-mmkv-storage/android/build.gradle
+          sed -i -e 's/arguments/arguments "-DCMAKE_CXX_COMPILER_LAUNCHER=ccache",/g' apps/mobile/node_modules/react-native-reanimated/android/build.gradle
+          sed -i -e 's/defaultConfig {/ndkVersion safeExtGet('ndkVersion', "25.2.9519653")\n  defaultConfig {/g' apps/mobile/node_modules/react-native-reanimated//android/build.gradle
+          sed -i -e 's/defaultConfig {/ndkVersion safeExtGet('ndkVersion', "25.2.9519653")\n  defaultConfig {/g' apps/mobile/node_modules/react-native-mmkv-storage/android/build.gradle
+
+      - name: CCache Stats Before Build
+        run: ccache -sv
+
+      - name: Build unsigned app bundle
+        run: yarn release:android:bundle
+
+      - name: CCache Stats after build
+        run: ccache -sv
+
+      - name: Sign app bundle for Playstore release
+        id: sign_app
+        uses: r0adkll/sign-android-release@master
+        with:
+          releaseDirectory: apps/mobile/native/android/app/build/outputs/bundle/release
+          signingKeyBase64: ${{ secrets.SIGNING_KEY }}
+          alias: ${{ secrets.ALIAS }}
+          keyStorePassword: ${{ secrets.KEY_PASSWORD }}
+          keyPassword: ${{ secrets.KEY_PASSWORD }}
+        env:
+          BUILD_TOOLS_VERSION: "33.0.0"
+
       - name: Build apks for Github release
         run: yarn release:android
 
@@ -57,6 +122,18 @@ jobs:
         with:
           path: apps/mobile
 
+      - name: Publish to Playstore
+        id: deploy
+        uses: r0adkll/upload-google-play@v1.1.1
+        with:
+          serviceAccountJsonPlainText: ${{ secrets.SERVICE_ACCOUNT_JSON }}
+          packageName: com.streetwriters.notesnook
+          releaseFiles: ${{steps.sign_app.outputs.signedReleaseFile}}
+          track: production
+          status: completed
+          whatsNewDirectory: apps/mobile/native/android/releasenotes/
+
+     
       - name: Create release draft on Github
         uses: softprops/action-gh-release@v1
         with:
@@ -70,3 +147,9 @@ jobs:
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-armeabi-v7a.apk
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86.apk
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86_64.apk
+
+      - name: Upload signed aab to Github
+        uses: actions/upload-artifact@v2
+        with:
+          name: Notesnook.aab
+          path: ${{steps.sign_app.outputs.signedReleaseFile}}

.github/workflows/desktop.publish.yml

@@ -58,7 +58,7 @@ jobs:
         run: npx nx build:desktop @notesnook/web
 
       - name: Archive build artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: build
           path: apps/web/build/**/*
@@ -82,12 +82,13 @@ jobs:
           name: Notesnook Desktop v${{ steps.app_metadata.outputs.app_version }}
           tag_name: v${{ steps.app_metadata.outputs.app_version }}
           files: ./notesnook_build_v${{ steps.app_metadata.outputs.app_version }}.zip
+          prerelease: ${{ endsWith(steps.app_metadata.outputs.app_version, '-beta') }}
 
   build-macos:
     name: Build for macOS
     needs: build
     if: inputs.build-mac
-    runs-on: macos-12
+    runs-on: macos-14
 
     steps:
       - name: Check out Git repository
@@ -96,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/
@@ -122,7 +126,7 @@ jobs:
           platform: "MAC_OS"
 
       - name: Download build
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: build
           path: ./apps/web/build
@@ -143,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
@@ -153,13 +157,13 @@ jobs:
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
           APPLE_API_KEY: ~/private_keys/AuthKey_${{ secrets.api_key_id }}.p8
           APPLE_API_KEY_ID: ${{ secrets.api_key_id }}
-          APPLE_API_KEY_ISSUER: ${{ secrets.api_key_issuer_id }}
+          APPLE_API_ISSUER: ${{ secrets.api_key_issuer_id }}
         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
 
@@ -198,7 +202,7 @@ jobs:
         if: inputs.publish-snap
 
       - name: Download build
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: build
           path: ./apps/web/build
@@ -215,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
@@ -223,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
 
@@ -250,15 +254,15 @@ 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
         uses: ./.github/actions/setup-node-with-cache
 
       - name: Download build
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: build
           path: ./apps/web/build

.github/workflows/ios.publish.yml

@@ -22,11 +22,45 @@ jobs:
       - name: Build packages
         run: npx nx run @notesnook/mobile:build
 
+      - name: ccache
+        uses: hendrikmuhs/ccache-action@v1.2.11
+        with:
+          key: ${{ runner.os }}-ccache-${{ hashFiles(format('apps/mobile/native/ios/Podfile.lock')) }}
+          max-size: 1500M
+          restore-keys: |
+            ${{ runner.os }}-ccache-
+
+      - name: Setup ccache
+        run: |
+          ccache --set-config=base_dir=$PWD
+          ccache --set-config=inode_cache=true
+          ccache --set-config=compiler_check=content
+          ccache --set-config=depend_mode=true
+          ccache --set-config=file_clone=true
+          ccache --set-config=sloppiness=clang_index_store,file_stat_matches,include_file_ctime,include_file_mtime,ivfsoverlay,pch_defines,modules,system_headers,time_macros
+          ln -s $(which ccache) /usr/local/bin/gcc
+          ln -s $(which ccache) /usr/local/bin/g++
+          ln -s $(which ccache) /usr/local/bin/cc
+          ln -s $(which ccache) /usr/local/bin/c++
+          ln -s $(which ccache) /usr/local/bin/clang
+          ln -s $(which ccache) /usr/local/bin/clang++
+          ccache -p
+
+      - name: Cache Pods
+        uses: actions/cache@v2
+        id: pods-cache
+        with:
+          path: apps/mobile/native/ios/Pods
+          key: ${{ runner.os }}-pods-${{ hashFiles('apps/mobile/native/ios/Podfile.lock') }}
+
       - name: Install Pods
         run: npm run prepare:ios
 
+      - name: CCache Stats Before Build
+        run: ccache -sv
+
       - name: Build iOS App
-        uses: yukiarrr/ios-build-action@v1.11.2
+        uses: ammarahm-ed/ios-build-action@master
         with:
           bundle-identifier: org.streetwriters.notesnook
           scheme: Notesnook
@@ -52,15 +86,18 @@ jobs:
             ${{ secrets.APPLE_MOBILE_PROVISION_SHARE }}
             ${{ secrets.APPLE_MOBILE_PROVISION_WIDGET }}
 
-      - name: 'Upload app to TestFlight'
+      - name: CCache Stats After Build
+        run: ccache -sv
+
+      - name: "Upload app to TestFlight"
         uses: apple-actions/upload-testflight-build@v1
-        with: 
+        with:
           app-path: Notesnook.ipa
           issuer-id: ${{ secrets.API_KEY_ISSUER_ID }}
           api-key-id: ${{ secrets.API_KEY_ID }}
           api-private-key: ${{ secrets.API_KEY }}
 
-      - name: Upload to Github
+      - name: Upload Notesnook.ipa to Github
         uses: actions/upload-artifact@v2
         with:
           name: Notesnook.ipa

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

@@ -5,7 +5,7 @@ on:
   push:
     branches:
       - master
-      - '!v3-beta'
+      - "!v3-beta"
     paths-ignore:
       - "apps/mobile/**"
       - "packages/editor-mobile/**"
@@ -23,7 +23,7 @@ on:
       - synchronize
     branches:
       - master
-      - '!v3-beta'
+      - "!v3-beta"
     paths-ignore:
       - "apps/mobile/**"
       - "packages/editor-mobile/**"

.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

@@ -25,16 +25,8 @@ jobs:
           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: Build
+        run: npm run build: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-v3-app
-          directory: ./apps/web/build
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          github-environment: ${{ (github.ref == 'refs/heads/master' && 'beta') || 'preview' }}
+        run: npx --yes wrangler pages deploy --project-name=notesnook-v3-beta ./apps/web/build/

.gitignore

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

.prettierignore

@@ -11,4 +11,5 @@ apps/mobile/native/
 apps/web/public/an.js
 
 # editor
-packages/editor/styles/
+packages/editor/styles/
+/.nx/cache

apps/desktop/.gitignore

@@ -1,4 +1,5 @@
 node_modules
 build
 output
-dist
+dist
+_catalog

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "2.6.15",
+  "version": "3.0.0",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/index.js",
@@ -14,9 +14,11 @@
     "@notesnook/crypto": "file:../../packages/crypto",
     "@trpc/client": "10.38.3",
     "@trpc/server": "10.38.3",
+    "better-sqlite3-multiple-ciphers": "^9.5.0",
     "electron-trpc": "0.5.2",
     "electron-updater": "6.1.4",
     "icojs": "^0.17.1",
+    "sodium-native": "^4.1.1",
     "typed-emitter": "^2.1.0",
     "yargs": "^17.6.2",
     "zod": "^3.21.4"
@@ -25,12 +27,13 @@
     "@types/node": "18.16.1",
     "@types/yargs": "^17.0.24",
     "chokidar": "^3.5.3",
-    "electron": "25.9.8",
-    "electron-builder": "^24.9.1",
-    "electron-builder-notarize": "^1.5.1",
-    "esbuild": "^0.17.19",
+    "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": "^5.23.0"
+    "undici": "^6.14.1"
   },
   "optionalDependencies": {
     "dmg-license": "^1.0.11"
@@ -40,7 +43,7 @@
     "staging": "node scripts/build.mjs --run",
     "release": "node scripts/build.mjs",
     "build": "tsc",
-    "bundle": "esbuild electron=./src/main.ts ./src/preload.ts --external:electron --external:fsevents --minify --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=false --define:RELEASE=true",
+    "bundle": "esbuild electron=./src/main.ts ./src/preload.ts --external:electron --external:fsevents --external:better-sqlite3-multiple-ciphers --external:sodium-native --minify --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=false --define:RELEASE=true",
     "bundle:mas": "esbuild electron=./src/main.ts ./src/preload.ts --minify --external:electron --external:fsevents --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=true --define:RELEASE=true",
     "postinstall": "patch-package"
   },
@@ -54,7 +57,7 @@
     "productName": "Notesnook",
     "copyright": "Copyright © 2023 Streetwriters (Private) Limited",
     "artifactName": "notesnook_${os}_${arch}.${ext}",
-    "npmRebuild": false,
+    "generateUpdatesFilesForAllChannels": true,
     "asar": false,
     "files": [
       "!*.chunk.js.map",
@@ -64,9 +67,17 @@
       "!build/banner.jpg",
       "!build/*.ico",
       "!build/*.png",
-      "!node_modules${/*}"
+      "!node_modules${/*}",
+      "node_modules/better-sqlite3-multiple-ciphers/build/Release/better_sqlite3.node",
+      "node_modules/better-sqlite3-multiple-ciphers/lib",
+      "node_modules/better-sqlite3-multiple-ciphers/package.json",
+      "node_modules/file-uri-to-path",
+      "node_modules/bindings",
+      "node_modules/node-gyp-build",
+      "node_modules/sodium-native/prebuilds/${platform}-${arch}",
+      "node_modules/sodium-native/index.js",
+      "node_modules/sodium-native/package.json"
     ],
-    "afterSign": "electron-builder-notarize",
     "afterPack": "./scripts/removeLocales.js",
     "mac": {
       "bundleVersion": "240",
@@ -94,7 +105,8 @@
       "entitlements": "assets/entitlements.mac.plist",
       "entitlementsInherit": "assets/entitlements.mac.plist",
       "gatekeeperAssess": false,
-      "icon": "assets/icons/app.icns"
+      "icon": "assets/icons/app.icns",
+      "notarize": true
     },
     "dmg": {
       "contents": [
@@ -138,7 +150,7 @@
       "signingHashAlgorithms": [
         "sha256"
       ],
-      "sign": "./sign.js",
+      "sign": "./scripts/sign.js",
       "icon": "assets/icons/app.ico"
     },
     "portable": {

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

@@ -18,8 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import path from "path";
-import fs from "fs/promises";
-import { existsSync } from "fs";
+import fs, { readFile, writeFile } from "fs/promises";
+import { existsSync, readFileSync } from "fs";
 import yargs from "yargs-parser";
 import os from "os";
 import * as childProcess from "child_process";
@@ -28,27 +28,30 @@ import { fileURLToPath } from "url";
 const args = yargs(process.argv);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const sodiumNativePrebuildPath = (arch) =>
-  path.join(
-    `node_modules`,
-    `@notesnook`,
-    `crypto`,
-    `node_modules`,
-    `@notesnook`,
-    `sodium`,
-    `node_modules`,
-    `sodium-native`,
-    `prebuilds`,
-    `${os.platform()}-${arch}`
-  );
+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 linux ARM
+if (os.platform() === "linux") await patchBetterSQLite3();
+
+if (os.platform() === "win32")
+  await exec(
+    `npx prebuildify --arch=arm64 --strip -t electron@${packageJson.devDependencies.electron}`,
+    path.join(__dirname, "..", "node_modules", "sodium-native")
+  );
+
 await fs.cp(path.join(webAppPath, "build"), "build", {
   recursive: true,
   force: true
@@ -62,56 +65,39 @@ if (args.variant === "mas") {
 
 await exec(`npx tsc`);
 
-if (existsSync(sodiumNativePrebuildPath("x64"))) {
-  console.log("copying sodium-native-x64");
-  await fs.cp(
-    sodiumNativePrebuildPath("x64"),
-    path.join("build", "prebuilds", `${process.platform}-x64`),
-    {
-      recursive: true,
-      force: true
-    }
-  );
-}
-
-if (existsSync(sodiumNativePrebuildPath("ia32"))) {
-  console.log("copying sodium-native-ia32");
-  await fs.cp(
-    sodiumNativePrebuildPath("ia32"),
-    path.join("build", "prebuilds", `${process.platform}-ia32`),
-    {
-      recursive: true,
-      force: true
-    }
-  );
-}
-
-if (existsSync(sodiumNativePrebuildPath("arm64"))) {
-  console.log("copying sodium-native-arm64");
-  await fs.cp(
-    sodiumNativePrebuildPath("arm64"),
-    path.join("build", "prebuilds", `${process.platform}-arm64`),
-    {
-      recursive: true,
-      force: true
-    }
-  );
-}
-
 if (args.run) {
   await exec(`npx electron-builder --dir --x64`);
   if (process.platform === "win32") {
     await exec(`.\\output\\win-unpacked\\Notesnook.exe`);
   } else if (process.platform === "darwin") {
-    await exec(`./output/darwin-unpacked/Notesnook`);
+    await exec(`./output/mac/Notesnook.app/Contents/MacOS/Notesnook`);
   } else {
     await exec(`./output/linux-unpacked/Notesnook`);
   }
 }
 
-async function exec(cmd) {
+async function exec(cmd, cwd) {
   return childProcess.execSync(cmd, {
-    env: process.env,
-    stdio: "inherit"
+    env: { ...process.env, NOTESNOOK_STAGING: true },
+    stdio: "inherit",
+    cwd: cwd || process.cwd()
   });
 }
+
+async function patchBetterSQLite3() {
+  const jsonPath = path.join(
+    __dirname,
+    "..",
+    "node_modules",
+    "better-sqlite3-multiple-ciphers",
+    "package.json"
+  );
+  const json = JSON.parse(await readFile(jsonPath, "utf-8"));
+
+  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";
+
+  await writeFile(jsonPath, JSON.stringify(json));
+}

apps/desktop/scripts/dev.mjs

@@ -27,21 +27,15 @@ import crypto from "crypto";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const sodiumNativePrebuildPath = path.join(
-  `node_modules`,
-  `@notesnook`,
-  `crypto`,
-  `node_modules`,
-  `@notesnook`,
-  `sodium`,
-  `node_modules`,
-  `sodium-native`,
-  `prebuilds`
-);
 const RUNNING_PROCESSES = [];
 const RESTARTABLE_PROCESSES = [];
 let lastBundleHash = null;
-
+const ENV = {
+  ...process.env,
+  NO_COLOR: "true",
+  FORCE_COLOR: "false",
+  COLOR: "0"
+};
 await onChange(true);
 
 console.log("Watching...");
@@ -58,6 +52,8 @@ process.on("SIGINT", async (s) => {
 async function onChange(first) {
   if (first) {
     await fs.rm("./build/", { force: true, recursive: true });
+
+    await exec("npx electron-builder install-app-deps");
   }
 
   await exec(`npm run bundle`);
@@ -68,13 +64,6 @@ async function onChange(first) {
     return;
   }
 
-  if (first) {
-    await fs.cp(sodiumNativePrebuildPath, "build/prebuilds", {
-      recursive: true,
-      force: true
-    });
-  }
-
   if (first) {
     await spawnAndWaitUntil(
       ["npx", "nx", "start:desktop", "@notesnook/web"],
@@ -102,7 +91,7 @@ function spawnAndWaitUntil(cmd, cwd, predicate) {
 
     const s = spawn(cmd[0], cmd.slice(1), {
       cwd,
-      env: { ...process.env, NO_COLOR: "true" },
+      env: ENV,
       shell: false
     });
 
@@ -116,14 +105,15 @@ function spawnAndWaitUntil(cmd, cwd, predicate) {
   });
 }
 
-async function exec(cmd) {
+async function exec(cmd, cwd) {
   try {
     console.log(">", cmd);
 
     return execSync(cmd, {
-      env: process.env,
+      env: ENV,
       stdio: "inherit",
-      shell: false
+      shell: false,
+      cwd: cwd || process.cwd()
     });
   } catch {
     //ignore
@@ -136,7 +126,7 @@ function execAsync(cmd, args, restartable, onExit) {
 
     const proc = spawn(cmd, args, {
       stdio: "inherit",
-      env: process.env,
+      env: ENV,
       shell: false
     });
 
@@ -179,9 +169,10 @@ async function cleanup() {
 }
 
 async function isBundleSame() {
-  const bundle = await fs.readFile(
-    path.join(__dirname, "..", "build", "electron.js")
-  );
+  const bundle = Buffer.concat([
+    await fs.readFile(path.join(__dirname, "..", "build", "electron.js")),
+    await fs.readFile(path.join(__dirname, "..", "build", "preload.js"))
+  ]);
 
   const hashSum = crypto.createHash("sha256");
   hashSum.update(bundle);

apps/desktop/scripts/sign.js

@@ -16,11 +16,13 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-const { writeFileSync, rmSync, readFileSync } = require("fs");
+const { writeFileSync, rmSync } = require("fs");
 const { execSync } = require("child_process");
 const { relative, join } = require("path");
 
 module.exports = async function (configuration) {
+  if (process.env.NOTESNOOK_STAGING) return;
+
   const Endpoint = "https://weu.codesigning.azure.net";
   const CodeSigningAccountName = "Notesnook";
   const CertificateProfileName = "Notesnook";
@@ -31,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);
 
@@ -39,16 +41,13 @@ module.exports = async function (configuration) {
 
   console.debug("Signed", configuration.path);
 
-  deleteCatalog();
+  rmSync(FilesCatalog);
 };
 
 function createCatalog(path) {
-  writeFileSync("_catalog", relative(__dirname, path));
-  return join(__dirname, "_catalog");
-}
-
-function deleteCatalog() {
-  rmSync("_catalog");
+  const catalogPath = join(__dirname, "_catalog");
+  writeFileSync(catalogPath, relative(__dirname, path));
+  return catalogPath;
 }
 
 function psexec(cmd) {

apps/desktop/src/api/index.ts

@@ -23,6 +23,8 @@ import { osIntegrationRouter } from "./os-integration";
 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();
 
@@ -31,7 +33,9 @@ export const router = t.router({
   integration: osIntegrationRouter,
   spellChecker: spellCheckerRouter,
   updater: updaterRouter,
-  bridge: bridgeRouter
+  bridge: bridgeRouter,
+  safeStorage: safeStorageRouter,
+  window: windowRouter
 });
 
 export const api = router.createCaller({});

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

@@ -31,6 +31,7 @@ import { observable } from "@trpc/server/observable";
 import { AssetManager } from "../utils/asset-manager";
 import { isFlatpak } from "../utils";
 import { setupDesktopIntegration } from "../utils/desktop-integration";
+import { rm } from "fs/promises";
 
 const t = initTRPC.create();
 
@@ -54,6 +55,14 @@ export const osIntegrationRouter = t.router({
     config.zoomFactor = factor;
   }),
 
+  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() }))
@@ -126,10 +135,13 @@ export const osIntegrationRouter = t.router({
     .input(z.object({ filePath: z.string() }))
     .query(({ input }) => {
       const { filePath } = input;
-      if (!filePath) return;
       return resolvePath(filePath);
     }),
 
+  deleteFile: t.procedure.input(z.string()).query(async ({ input }) => {
+    await rm(input);
+  }),
+
   showNotification: t.procedure
     .input(NotificationOptions)
     .query(({ input }) => {
@@ -158,16 +170,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/safe-storage.ts

@@ -0,0 +1,44 @@
+/*
+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 { safeStorage } from "electron";
+import { initTRPC } from "@trpc/server";
+import { z } from "zod";
+
+const t = initTRPC.create();
+
+export const safeStorageRouter = t.router({
+  isEncryptionAvailable: t.procedure.query(() => {
+    return (
+      !process.env.PORTABLE_EXECUTABLE_DIR &&
+      safeStorage.isEncryptionAvailable()
+    );
+  }),
+  /**
+   * Takes a string and returns an encrypted base64 string
+   */
+  encryptString: t.procedure.input(z.string()).query(({ input }) => {
+    return safeStorage.encryptString(input).toString("base64");
+  }),
+  /**
+   * Takes an encrypted base64 string and returns a string
+   */
+  decryptString: t.procedure.input(z.string()).query(({ input }) => {
+    return safeStorage.decryptString(Buffer.from(input, "base64"));
+  })
+});

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

@@ -20,3 +20,4 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 export * from "./constants";
 export type { AppRouter } from "./api";
 export { type UpdateInfo } from "builder-util-runtime";
+export { type DesktopIntegration } from "./utils/config";

apps/desktop/src/main.ts

@@ -82,6 +82,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 +125,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 +135,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 +151,15 @@ async function createWindow() {
 app.once("ready", async () => {
   console.info("App ready. Opening window.");
 
+  app.configureHostResolver({
+    secureDnsServers: [
+      "https://mozilla.cloudflare-dns.com/dns-query",
+      "https://dns.quad9.net/dns-query"
+    ],
+    enableBuiltInResolver: true,
+    secureDnsMode: "automatic"
+  });
+
   if (!isDevelopment()) registerProtocol();
   await createWindow();
   configureAutoUpdater();

apps/desktop/src/preload.ts

@@ -23,11 +23,13 @@ import { type RendererGlobalElectronTRPC } from "electron-trpc/src/types";
 import type { NNCrypto } from "@notesnook/crypto";
 import { ipcRenderer } from "electron";
 import { platform } from "os";
+import sqlite3, { Database } from "better-sqlite3-multiple-ciphers";
 
 declare global {
   var os: () => "mas" | ReturnType<typeof platform>;
   var electronTRPC: RendererGlobalElectronTRPC;
   var NativeNNCrypto: (new () => NNCrypto) | undefined;
+  var createSQLite3Database: (filename: string) => Database;
 }
 
 process.once("loaded", async () => {
@@ -40,11 +42,6 @@ process.once("loaded", async () => {
   globalThis.electronTRPC = electronTRPC;
 });
 
-globalThis.NativeNNCrypto =
-  process.platform === "win32" &&
-  process.arch !== "x64" &&
-  process.arch !== "ia32"
-    ? undefined
-    : require("@notesnook/crypto").NNCrypto;
-
+globalThis.NativeNNCrypto = require("@notesnook/crypto").NNCrypto;
+globalThis.createSQLite3Database = (filename) => sqlite3(filename);
 globalThis.os = () => (MAC_APP_STORE ? "mas" : platform());

apps/desktop/src/utils/autolaunch.ts

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

apps/desktop/src/utils/autoupdater.ts

@@ -20,11 +20,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { autoUpdater } from "electron-updater";
 import { config } from "./config";
 
+const CHANNEL = autoUpdater.currentVersion.raw.endsWith("-beta")
+  ? "beta"
+  : "latest";
 async function configureAutoUpdater() {
   autoUpdater.setFeedURL({
     provider: "generic",
-    url: `https://notesnook.com/releases/${process.platform}/`,
-    useMultipleRangeRequest: false
+    url: `https://notesnook.com/api/v1/releases/${process.platform}/${CHANNEL}`,
+    useMultipleRangeRequest: false,
+    channel: CHANNEL
   });
 
   autoUpdater.autoDownload = config.automaticUpdates;

apps/desktop/src/utils/config.ts

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

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,14 +16,13 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import "@azure/core-asynciterator-polyfill";
+import "react-native-gesture-handler";
 import {
   THEME_COMPATIBILITY_VERSION,
   useThemeEngineStore
 } from "@notesnook/theme";
 import React, { useEffect } from "react";
 import { I18nManager, View } from "react-native";
-import "react-native-gesture-handler";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import AppLockedOverlay from "./components/app-lock-overlay";
@@ -42,14 +41,15 @@ I18nManager.allowRTL(false);
 I18nManager.forceRTL(false);
 I18nManager.swapLeftAndRightInRTL(false);
 
-SettingsService.checkOrientation();
 const App = () => {
   const init = useAppEvents();
   useEffect(() => {
-    let { appLockMode } = SettingsService.get();
-    if (appLockMode && appLockMode !== "none") {
+    const { appLockEnabled, appLockMode } = SettingsService.get();
+    if (appLockEnabled || appLockMode !== "none") {
       useUserStore.getState().lockApp(true);
     }
+
+    //@ts-ignore
     globalThis["IS_MAIN_APP_RUNNING"] = true;
     init();
     setTimeout(async () => {
@@ -101,10 +101,10 @@ const App = () => {
 let currTheme =
   useThemeStore.getState().colorScheme === "dark"
     ? SettingsService.getProperty("darkTheme")
-    : SettingsService.getProperty("lightTheme");
+    : SettingsService.getProperty("lighTheme");
 useThemeEngineStore.getState().setTheme(currTheme);
 
-export const withTheme = (Element) => {
+export const withTheme = (Element: () => JSX.Element) => {
   return function AppWithThemeProvider() {
     const [colorScheme, darkTheme, lightTheme] = useThemeStore((state) => [
       state.colorScheme,

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

@@ -17,16 +17,39 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import Sodium from "@ammarahmed/react-native-sodium";
 import { Platform } from "react-native";
 import "react-native-get-random-values";
 import * as Keychain from "react-native-keychain";
+import { MMKVLoader, ProcessingModes } from "react-native-mmkv-storage";
 import { generateSecureRandom } from "react-native-securerandom";
-import Sodium from "@ammarahmed/react-native-sodium";
+import { DatabaseLogger } from ".";
 import { MMKV } from "./mmkv";
 
+// Database key cipher is persisted across different user sessions hence it has
+// it's independent storage which we will never clear. This is only used when application has
+// app lock with password enabled.
+export const CipherStorage = new MMKVLoader()
+  .withInstanceID("cipher_storage")
+  .setProcessingMode(
+    Platform.OS === "ios"
+      ? ProcessingModes.MULTI_PROCESS
+      : ProcessingModes.SINGLE_PROCESS
+  )
+  .disableIndexing()
+  .initialize();
+
 const IOS_KEYCHAIN_ACCESS_GROUP = "group.org.streetwriters.notesnook";
 const IOS_KEYCHAIN_SERVICE_NAME = "org.streetwriters.notesnook";
-const IOS_KEYCHAIN_UPGRAGE_KEY = "keychain-ios:upgraded";
+const KEYCHAIN_SERVER_DBKEY = "notesnook:db";
+
+const NOTESNOOK_APPLOCK_KEY_SALT = "3dqclWbOYllfk9kk";
+const NOTESNOOK_DB_KEY_SALT = "2rcgSprDmRvZ1AAa";
+const NOTESNOOK_USER_KEY_SALT = "7qO4qeoM6PbsAJ0Q";
+
+const DB_KEY_CIPHER = "databaseKeyCipher";
+const USER_KEY_CIPHER = "userKeyCipher";
+const APPLOCK_CIPHER = "applockCipher";
 
 const KEYSTORE_CONFIG = Platform.select({
   ios: {
@@ -37,61 +60,231 @@ const KEYSTORE_CONFIG = Platform.select({
   android: {}
 });
 
-export async function deriveCryptoKey(name, data) {
-  try {
-    let credentials = await Sodium.deriveKey(data.password, data.salt);
-    await Keychain.setInternetCredentials(
-      "notesnook",
-      name,
-      credentials.key,
-      KEYSTORE_CONFIG
+function generatePassword() {
+  const length = 80;
+  const crypto = window.crypto || window.msCrypto;
+  if (typeof crypto === "undefined") {
+    throw new Error(
+      "Crypto API is not supported. Please upgrade your web browser"
     );
-    MMKV.setBool(IOS_KEYCHAIN_UPGRAGE_KEY, true);
-    return credentials.key;
+  }
+  const charset =
+    "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&+_{}[]():<>/?;";
+  const indexes = crypto.getRandomValues(new Uint32Array(length));
+  let secret = "";
+  for (const index of indexes) {
+    secret += charset[index % charset.length];
+  }
+  return secret;
+}
+
+export async function encryptDatabaseKeyWithPassword(appLockPassword) {
+  const key = getDatabaseKey();
+  const appLockCredentials = await Sodium.deriveKey(
+    appLockPassword,
+    NOTESNOOK_APPLOCK_KEY_SALT
+  );
+  const databaseKeyCipher = await encrypt(appLockCredentials, key);
+  MMKV.setMap(DB_KEY_CIPHER, databaseKeyCipher);
+  // We reset the database key from keychain once app lock password is set.
+  await Keychain.resetInternetCredentials(KEYCHAIN_SERVER_DBKEY);
+  return true;
+}
+
+export async function restoreDatabaseKeyToKeyChain(appLockPassword) {
+  const databaseKeyCipher = CipherStorage.getMap(DB_KEY_CIPHER);
+  const databaseKey = await decrypt(
+    {
+      password: appLockPassword
+    },
+    databaseKeyCipher
+  );
+
+  await Keychain.setInternetCredentials(
+    KEYCHAIN_SERVER_DBKEY,
+    "notesnook",
+    databaseKey,
+    KEYSTORE_CONFIG
+  );
+  MMKV.removeItem(DB_KEY_CIPHER);
+  return true;
+}
+
+export async function setAppLockVerificationCipher(appLockPassword) {
+  try {
+    const appLockCredentials = await Sodium.deriveKey(
+      appLockPassword,
+      NOTESNOOK_APPLOCK_KEY_SALT
+    );
+    const encrypted = await encrypt(appLockCredentials, generatePassword());
+
+    CipherStorage.setMap(APPLOCK_CIPHER, encrypted);
+
+    DatabaseLogger.info("setAppLockVerificationCipher");
   } catch (e) {
-    console.error(e);
+    DatabaseLogger.error(e);
+    console.log(e);
   }
 }
 
-async function upgradeIOSKeychain(username, password) {
-  if (Platform.OS !== "ios") return;
-  if (!MMKV.getBool(IOS_KEYCHAIN_UPGRAGE_KEY)) {
-    await Keychain.setInternetCredentials(
-      "notesnook",
-      username,
-      password,
-      KEYSTORE_CONFIG
+export async function clearAppLockVerificationCipher() {
+  CipherStorage.removeItem(APPLOCK_CIPHER);
+}
+
+export async function validateAppLockPassword(appLockPassword) {
+  try {
+    const appLockCipher = CipherStorage.getMap(APPLOCK_CIPHER);
+    if (!appLockCipher) return true;
+    const decrypted = await decrypt(
+      await Sodium.deriveKey(appLockPassword, NOTESNOOK_APPLOCK_KEY_SALT),
+      appLockCipher
     );
-    console.log("IOS KEYCHAIN MIGRATION COMPLETED!");
-    MMKV.setBool(IOS_KEYCHAIN_UPGRAGE_KEY, true);
+
+    DatabaseLogger.info(
+      `validateAppLockPassword: ${typeof decrypted === "string"}`
+    );
+    return typeof decrypted === "string";
+  } catch (e) {
+    DatabaseLogger.error(e);
+    return false;
+  }
+}
+
+let DB_KEY;
+export function clearDatabaseKey() {
+  DB_KEY = undefined;
+  DatabaseLogger.info("Cleared database key");
+}
+
+export async function getDatabaseKey(appLockPassword) {
+  if (DB_KEY) return DB_KEY;
+  try {
+    if (appLockPassword) {
+      const databaseKeyCipher = CipherStorage.getMap("databaseKeyCipher");
+      const databaseKey = await decrypt(
+        {
+          password: appLockPassword
+        },
+        databaseKeyCipher
+      );
+      DatabaseLogger.info("Getting database key from cipher");
+      DB_KEY = databaseKey;
+    }
+
+    if (!DB_KEY) {
+      const hasKey = await Keychain.hasInternetCredentials(
+        KEYCHAIN_SERVER_DBKEY
+      );
+      if (hasKey) {
+        let credentials = await Keychain.getInternetCredentials(
+          KEYCHAIN_SERVER_DBKEY,
+          KEYSTORE_CONFIG
+        );
+
+        DatabaseLogger.info("Getting database key from Keychain");
+        DB_KEY = credentials.password;
+      }
+    }
+
+    if (!DB_KEY) {
+      DatabaseLogger.info("Generating new database key");
+      const password = generatePassword();
+      const derivedDatabaseKey = await Sodium.deriveKey(
+        password,
+        NOTESNOOK_DB_KEY_SALT
+      );
+
+      DB_KEY = derivedDatabaseKey.key;
+
+      await Keychain.setInternetCredentials(
+        KEYCHAIN_SERVER_DBKEY,
+        "notesnook",
+        DB_KEY,
+        KEYSTORE_CONFIG
+      );
+    }
+
+    if (await Keychain.hasInternetCredentials("notesnook")) {
+      const userKeyCredentials = await Keychain.getInternetCredentials(
+        "notesnook",
+        KEYSTORE_CONFIG
+      );
+
+      if (userKeyCredentials) {
+        const userKeyCipher = await encrypt(
+          {
+            key: DB_KEY,
+            salt: NOTESNOOK_USER_KEY_SALT
+          },
+          userKeyCredentials.password
+        );
+        // Store encrypted user key in MMKV
+        MMKV.setMap(USER_KEY_CIPHER, userKeyCipher);
+        await Keychain.resetInternetCredentials("notesnook");
+      }
+      DatabaseLogger.info("Migrated user credentials to cipher storage");
+    }
+
+    return DB_KEY;
+  } catch (e) {
+    console.log(e, "error");
+    DatabaseLogger.error(e);
+    return null;
+  }
+}
+
+export async function deriveCryptoKey(data) {
+  try {
+    let credentials = await Sodium.deriveKey(data.password, data.salt);
+    const userKeyCipher = await encrypt(
+      {
+        key: await getDatabaseKey(),
+        salt: NOTESNOOK_USER_KEY_SALT
+      },
+      credentials.key
+    );
+    DatabaseLogger.info("User key stored: ", !!userKeyCipher);
+
+    // Store encrypted user key in MMKV
+    MMKV.setMap(USER_KEY_CIPHER, userKeyCipher);
+    return credentials.key;
+  } catch (e) {
+    DatabaseLogger.error(e);
   }
 }
 
 export async function getCryptoKey(_name) {
   try {
-    if (await Keychain.hasInternetCredentials("notesnook")) {
-      let credentials = await Keychain.getInternetCredentials(
-        "notesnook",
-        KEYSTORE_CONFIG
-      );
-      // upgrades ios keychain to use accessGroups
-      // so we have access to keychain in share extension.
-      await upgradeIOSKeychain(credentials.username, credentials.password);
-      return credentials.password;
-    } else {
+    const keyCipher = MMKV.getMap(USER_KEY_CIPHER);
+
+    if (!keyCipher) {
+      DatabaseLogger.info("User key cipher is null");
       return null;
     }
+
+    const key = await decrypt(
+      {
+        key: await getDatabaseKey()
+      },
+      keyCipher
+    );
+
+    DatabaseLogger.info("User key decrypted: ", !!key);
+
+    return key;
   } catch (e) {
-    console.error(e);
+    console.log("getCryptoKey", e);
+    DatabaseLogger.error(e);
   }
 }
 
 export async function removeCryptoKey(_name) {
   try {
-    let result = await Keychain.resetInternetCredentials("notesnook");
-    return result;
+    MMKV.removeItem(USER_KEY_CIPHER);
+    await Keychain.resetInternetCredentials("notesnook");
+    return true;
   } catch (e) {
-    console.error(e);
+    DatabaseLogger.error(e);
   }
 }
 
@@ -109,7 +302,7 @@ export async function generateCryptoKey(password, salt) {
     let credentials = await Sodium.deriveKey(password, salt || null);
     return credentials;
   } catch (e) {
-    console.log("generateCryptoKey: ", e);
+    DatabaseLogger.error(e);
   }
 }
 
@@ -123,6 +316,8 @@ export async function decrypt(password, data) {
     return undefined;
   let _data = { ...data };
   _data.output = "plain";
+
+  if (!password.salt) password.salt = data.salt;
   return await Sodium.decrypt(password, _data);
 }
 
@@ -135,6 +330,11 @@ export async function decryptMulti(password, data) {
     d.output = "plain";
     return d;
   });
+
+  if (data.length && !password.salt) {
+    password.salt = data[0].salt;
+  }
+
   return await Sodium.decryptMulti(password, data);
 }
 

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

@@ -16,15 +16,18 @@ 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 "./logger";
 import { database } from "@notesnook/common";
 import { logger as dbLogger } from "@notesnook/core/dist/logger";
 import { Platform } from "react-native";
 import * as Gzip from "react-native-gzip";
 import EventSource from "../../utils/sse/even-source-ios";
 import AndroidEventSource from "../../utils/sse/event-source";
+import { SqliteAdapter, SqliteIntrospector, SqliteQueryCompiler } from "kysely";
 import filesystem from "../filesystem";
-import "./logger";
 import Storage from "./storage";
+import { RNSqliteDriver } from "./sqlite.kysely";
+import { getDatabaseKey } from "./encryption";
 
 database.host(
   __DEV__
@@ -34,11 +37,11 @@ database.host(
         SSE_HOST: "https://events.streetwriters.co",
         SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
         ISSUES_HOST: "https://issues.streetwriters.co"
-        // API_HOST: "http://192.168.43.108:5264",
-        // AUTH_HOST: "http://192.168.43.108:8264",
-        // SSE_HOST: "http://192.168.43.108:7264",
-        // SUBSCRIPTIONS_HOST: "http://192.168.43.108:9264",
-        // ISSUES_HOST: "http://192.168.43.108:2624"
+        // API_HOST: "http://192.168.43.5:5264",
+        // AUTH_HOST: "http://192.168.43.5:8264",
+        // SSE_HOST: "http://192.168.43.5:7264",
+        // SUBSCRIPTIONS_HOST: "http://192.168.43.5:9264",
+        // ISSUES_HOST: "http://192.168.43.5:2624"
       }
     : {
         API_HOST: "https://api.notesnook.com",
@@ -49,15 +52,37 @@ database.host(
       }
 );
 
-database.setup(
-  Storage,
-  Platform.OS === "ios" ? EventSource : AndroidEventSource,
-  filesystem,
-  {
-    compress: Gzip.deflate,
-    decompress: Gzip.inflate
-  }
-);
+export async function setupDatabase(password) {
+  const key = await getDatabaseKey(password);
+  if (!key)
+    throw new Error("Database setup failed, could not get database key");
+
+  console.log("Opening database with key:", !!key);
+
+  database.setup({
+    storage: Storage,
+    eventsource: Platform.OS === "ios" ? EventSource : AndroidEventSource,
+    fs: filesystem,
+    compressor: {
+      compress: Gzip.deflate,
+      decompress: Gzip.inflate
+    },
+    batchSize: 100,
+    sqliteOptions: {
+      dialect: (name) => ({
+        createDriver: () => {
+          return new RNSqliteDriver({ async: true, dbName: name });
+        },
+        createAdapter: () => new SqliteAdapter(),
+        createIntrospector: (db) => new SqliteIntrospector(db),
+        createQueryCompiler: () => new SqliteQueryCompiler()
+      }),
+      tempStore: "memory",
+      journalMode: Platform.OS === "ios" ? "DELETE" : "WAL",
+      password: key
+    }
+  });
+}
 
 export const db = database;
 export const DatabaseLogger = dbLogger;

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

@@ -16,14 +16,14 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { initalize } from "@notesnook/core/dist/logger";
 import { MMKVLoader } from "react-native-mmkv-storage";
+import { initialize } from "@notesnook/core/dist/logger";
 import { KV } from "./storage";
 
 const LoggerStorage = new MMKVLoader()
   .withInstanceID("notesnook_logs")
   .initialize();
 
-initalize(new KV(LoggerStorage));
+initialize(new KV(LoggerStorage));
 
 export { LoggerStorage };

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

@@ -0,0 +1,123 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import type { DatabaseConnection, Driver, QueryResult } from "kysely";
+import { CompiledQuery } from "kysely";
+import { QuickSQLiteConnection, open } from "react-native-quick-sqlite";
+
+type Config = { dbName: string; async: boolean; location: string };
+
+export class RNSqliteDriver implements Driver {
+  private connection?: DatabaseConnection;
+  private connectionMutex = new ConnectionMutex();
+  private db: QuickSQLiteConnection;
+  constructor(private readonly config: Config) {
+    this.db = open({
+      name: config.dbName
+    });
+  }
+
+  async init(): Promise<void> {
+    this.connection = new RNSqliteConnection(this.db);
+  }
+
+  async acquireConnection(): Promise<DatabaseConnection> {
+    // SQLite only has one single connection. We use a mutex here to wait
+    // until the single connection has been released.
+    await this.connectionMutex.lock();
+    return this.connection!;
+  }
+
+  async beginTransaction(connection: DatabaseConnection): Promise<void> {
+    await connection.executeQuery(CompiledQuery.raw("BEGIN TRANSACTION"));
+  }
+
+  async commitTransaction(connection: DatabaseConnection): Promise<void> {
+    await connection.executeQuery(CompiledQuery.raw("COMMIT"));
+  }
+
+  async rollbackTransaction(connection: DatabaseConnection): Promise<void> {
+    await connection.executeQuery(CompiledQuery.raw("ROLLBACK"));
+  }
+
+  async releaseConnection(): Promise<void> {
+    this.connectionMutex.unlock();
+  }
+
+  async destroy(): Promise<void> {
+    this.db.close();
+  }
+}
+
+class ConnectionMutex {
+  private promise?: Promise<void>;
+  private resolve?: () => void;
+
+  async lock(): Promise<void> {
+    while (this.promise) {
+      await this.promise;
+    }
+
+    this.promise = new Promise((resolve) => {
+      this.resolve = resolve;
+    });
+  }
+
+  unlock(): void {
+    const resolve = this.resolve;
+
+    this.promise = undefined;
+    this.resolve = undefined;
+
+    resolve?.();
+  }
+}
+
+class RNSqliteConnection implements DatabaseConnection {
+  constructor(private readonly db: QuickSQLiteConnection) {}
+
+  streamQuery<R>(): AsyncIterableIterator<QueryResult<R>> {
+    throw new Error("wasqlite driver doesn't support streaming");
+  }
+
+  async executeQuery<R>(
+    compiledQuery: CompiledQuery<unknown>
+  ): Promise<QueryResult<R>> {
+    const { parameters, sql, query } = compiledQuery;
+    const mode =
+      query.kind === "SelectQueryNode"
+        ? "query"
+        : query.kind === "RawNode"
+        ? "raw"
+        : "exec";
+
+    const result = await this.db.executeAsync(sql, parameters as any[]);
+
+    if (mode === "query" || !result.insertId)
+      return {
+        rows: result.rows?._array || []
+      };
+
+    return {
+      insertId: BigInt(result.insertId),
+      numAffectedRows: BigInt(result.rowsAffected),
+      rows: mode === "raw" ? result.rows?._array || [] : []
+    };
+  }
+}

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

@@ -91,7 +91,8 @@ export class KV {
   }
 
   async removeMulti(keys) {
-    return this.storage.removeItems(...keys);
+    if (!keys) return true;
+    return this.storage.removeItems(keys);
   }
 
   async clear() {

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

@@ -16,20 +16,61 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { Dimensions, Platform } from "react-native";
+import { Dimensions, Image, Platform } from "react-native";
 import ImageResizer from "@bam.tech/react-native-image-resizer";
 import RNFetchBlob from "react-native-blob-util";
+
+console.log("hello world");
 /**
  * Scale down & compress images to screen width
  * for loading in editor.
  * @returns
  */
 export async function compressToBase64(path, type) {
-  const { width, scale } = Dimensions.get("window");
+  const { width: screenWidth, scale } = Dimensions.get("window");
+  console.log("COMPRESSING TO BASE64...");
+  return new Promise((resolve) => {
+    console.log(path, "image path...");
+
+    Image.getSize(path, async (width) => {
+      console.log("image width", width);
+
+      const response = await ImageResizer.createResizedImage(
+        path,
+        screenWidth * scale,
+        99999,
+        type,
+        width <= 1920 ? 100 : 90,
+        0,
+        undefined,
+        true,
+        {
+          mode: "contain",
+          onlyScaleDown: true
+        }
+      );
+
+      const base64 = await RNFetchBlob.fs.readFile(
+        Platform.OS === "ios"
+          ? response.uri?.replace("file://", "")
+          : response.uri,
+        "base64"
+      );
+      RNFetchBlob.fs.unlink(path.replace("file://", "")).catch(console.log);
+      RNFetchBlob.fs
+        .unlink(response.uri.replace("file://", ""))
+        .catch(console.log);
+
+      resolve(base64);
+    });
+  });
+}
+
+export async function compressToFile(path, type) {
   const response = await ImageResizer.createResizedImage(
     path,
-    width * scale,
-    9999,
+    1920,
+    99999,
     type,
     80,
     0,
@@ -40,11 +81,6 @@ export async function compressToBase64(path, type) {
       onlyScaleDown: true
     }
   );
-  const base64 = await RNFetchBlob.fs.readFile(
-    Platform.OS === "ios" ? response.uri?.replace("file://", "") : response.uri,
-    "base64"
-  );
   RNFetchBlob.fs.unlink(path.replace("file://", "")).catch(console.log);
-  RNFetchBlob.fs.unlink(response.uri.replace("file://", "")).catch(console.log);
-  return base64;
+  return response.uri;
 }

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

@@ -29,9 +29,9 @@ import * as ScopedStorage from "react-native-scoped-storage";
 import { subscribe, zip } from "react-native-zip-archive";
 import RNFetchBlob from "react-native-blob-util";
 import { ShareComponent } from "../../components/sheets/export-notes/share";
-import { ToastEvent, presentSheet } from "../../services/event-manager";
+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";
@@ -46,15 +46,15 @@ export const FileDownloadStatus = {
  * Download all user's attachments
  * @returns
  */
-export function downloadAllAttachments() {
-  const attachments = db.attachments.all;
+export async function downloadAllAttachments() {
+  const attachments = await db.attachments.all.ids();
   return downloadAttachments(attachments);
 }
 
 /**
  * Downloads provided attachments to a .zip file
  * on user's device.
- * @param attachments
+ * @param {string[]} attachments
  * @param onProgress
  * @returns
  */
@@ -84,13 +84,15 @@ 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++) {
-    let attachment = attachments[i];
-    const hash = attachment.metadata.hash;
+    let attachment = await db.attachments.attachment(attachments[i]);
+    const hash = attachment.hash;
     try {
       if (canceled.current) {
         RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
@@ -114,19 +116,20 @@ export async function downloadAttachments(
       }
       if (!uri) throw new Error("Failed to download file");
       // Move file to the source folder we will zip eventually and rename the file to it's actual name.
-      const filePath = `${zipSourceFolder}/${attachment.metadata.filename}`;
+      const filePath = `${zipSourceFolder}/${attachment.filename}`;
       await RNFetchBlob.fs.mv(`${cacheDir}/${uri}`, filePath);
       result.set(hash, {
-        filename: attachment.metadata.filename,
-        status: FileDownloadStatus.Success
+        filename: attachment.filename,
+        status: FileDownloadStatus.Success,
+        attachment: attachment
       });
     } catch (e) {
       result.set(hash, {
-        filename: attachment.metadata.filename,
+        filename: attachment.filename,
         status: FileDownloadStatus.Fail,
         reason: e
       });
-      console.log("Error downloading attachment", e);
+      ToastManager.error(e, "Error downloading attachment");
     }
   }
   if (canceled.current) {
@@ -163,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);
@@ -189,9 +192,9 @@ export default async function downloadAttachment(
 ) {
   await createCacheDir();
 
-  let attachment = db.attachments.attachment(hash);
+  let attachment = await db.attachments.attachment(hash);
   if (!attachment) {
-    console.log("attachment not found");
+    DatabaseLogger.log("Attachment not found");
     return;
   }
 
@@ -206,47 +209,47 @@ export default async function downloadAttachment(
   }
 
   try {
-    console.log(
-      "starting download attachment",
-      attachment.metadata.hash,
-      options.groupId
-    );
-    await db.fs.downloadFile(
-      options.groupId || attachment.metadata.hash,
-      attachment.metadata.hash
-    );
-
-    if (!(await exists(attachment.metadata.hash))) {
+    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) {
+      console.log(
+        "starting decrypt base64 file...",
+        options.base64,
+        options.text,
+        attachment.hash
+      );
       return await db.attachments.read(
-        attachment.metadata.hash,
+        attachment.hash,
         options.base64 ? "base64" : "text"
       );
     }
 
     let filename = getFileNameWithExtension(
-      attachment.metadata.filename,
-      attachment.metadata.type
+      attachment.filename,
+      attachment.mimeType
     );
 
     let key = await db.attachments.decryptKey(attachment.key);
+
     let info = {
       iv: attachment.iv,
       salt: attachment.salt,
-      length: attachment.length,
+      length: attachment.size,
       alg: attachment.alg,
-      hash: attachment.metadata.hash,
-      hashType: attachment.metadata.hashType,
-      mime: attachment.metadata.type,
+      hash: attachment.hash,
+      hashType: attachment.hashType,
+      mime: attachment.mimeType,
       fileName: options.cache ? undefined : filename,
       uri: options.cache ? undefined : folder.uri,
       chunkSize: attachment.chunkSize,
       appGroupId: IOS_APPGROUPID
     };
-
     let fileUri = await Sodium.decryptFile(
       key,
       info,
@@ -254,7 +257,7 @@ export default async function downloadAttachment(
     );
 
     if (!options.silent) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Download successful",
         message: filename + " downloaded",
         type: "success"
@@ -263,11 +266,11 @@ export default async function downloadAttachment(
 
     if (
       attachment.dateUploaded &&
-      !isImage(attachment.metadata?.type) &&
-      !isDocument(attachment.metadata?.type)
+      !isImage(attachment.mimeType) &&
+      !isDocument(attachment.mimeType)
     ) {
       RNFetchBlob.fs
-        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.metadata.hash}`)
+        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}`)
         .catch(console.log);
     }
     if (Platform.OS === "ios" && !options.cache) {
@@ -282,7 +285,7 @@ export default async function downloadAttachment(
             : "File Manager/Notesnook/downloads"
         }`,
         icon: "download",
-        context: global ? null : attachment.metadata.hash,
+        context: global ? null : attachment.hash,
         component: <ShareComponent uri={fileUri} name={filename} padding={12} />
       });
     }
@@ -292,10 +295,13 @@ export default async function downloadAttachment(
     console.log("download attachment error: ", e);
     if (attachment.dateUploaded) {
       RNFetchBlob.fs
-        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.metadata.hash}`)
+        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}`)
+        .catch(console.log);
+      RNFetchBlob.fs
+        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}_dcache`)
         .catch(console.log);
     }
-    useAttachmentStore.getState().remove(attachment.metadata.hash);
+    useAttachmentStore.getState().remove(attachment.hash);
     if (options.throwError) {
       throw e;
     }

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

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import hosts from "@notesnook/core/dist/utils/constants";
 import NetInfo from "@react-native-community/netinfo";
 import RNFetchBlob from "react-native-blob-util";
-import { ToastEvent } from "../../services/event-manager";
+import { ToastManager } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { db } from "../database";
 import { cacheDir, fileCheck } from "./utils";
@@ -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;
     }
 
@@ -74,13 +75,13 @@ export async function downloadFile(filename, data, cancelToken) {
     return status >= 200 && status < 300;
   } catch (e) {
     if (e.message !== "canceled") {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Error downloading file",
         message: e.message,
         type: "error",
         context: "global"
       });
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Error downloading file",
         message: e.message,
         type: "error",
@@ -98,7 +99,7 @@ export async function downloadFile(filename, data, cancelToken) {
 export async function getUploadedFileSize(hash) {
   try {
     const url = `${hosts.API_HOST}/s3?name=${hash}`;
-    const token = await db.user.tokenManager.getAccessToken();
+    const token = await db.tokenManager.getAccessToken();
 
     const attachmentInfo = await fetch(url, {
       method: "HEAD",
@@ -119,7 +120,7 @@ export async function checkAttachment(hash) {
   const isInternetReachable =
     internetState.isConnected && internetState.isInternetReachable;
   if (!isInternetReachable) return { success: true };
-  const attachment = db.attachments.attachment(hash);
+  const attachment = await db.attachments.attachment(hash);
   if (!attachment) return { failed: "Attachment not found." };
 
   try {

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

@@ -17,13 +17,12 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Platform } from "react-native";
 import Sodium from "@ammarahmed/react-native-sodium";
+import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
-import { cacheDir, cacheDirOld, getRandomId } from "./utils";
-import { db } from "../database";
-import { compressToBase64 } from "./compress";
 import { IOS_APPGROUPID } from "../../utils/constants";
+import { db } from "../database";
+import { cacheDir, cacheDirOld, getRandomId } from "./utils";
 
 export async function readEncrypted(filename, key, cipherData) {
   await migrateFilesFromCache();
@@ -35,14 +34,8 @@ export async function readEncrypted(filename, key, cipherData) {
       return false;
     }
 
-    const attachment = db.attachments.attachment(filename);
-    const isPng = !attachment.metadata.type
-      ? false
-      : /(png)/g.test(attachment?.metadata.type);
-    const isJpeg = !attachment.metadata.type
-      ? false
-      : /(jpeg|jpg)/g.test(attachment?.metadata.type);
-
+    const attachment = await db.attachments.attachment(filename);
+    console.log("decrypting....");
     let output = await Sodium.decryptFile(
       key,
       {
@@ -50,20 +43,9 @@ export async function readEncrypted(filename, key, cipherData) {
         hash: filename,
         appGroupId: IOS_APPGROUPID
       },
-      cipherData.outputType === "base64"
-        ? isPng || isJpeg
-          ? "cache"
-          : "base64"
-        : "text"
+      cipherData.outputType === "base64" ? "base64" : "text"
     );
-    console.log("file decrypted...");
-    if (cipherData.outputType === "base64" && (isPng || isJpeg)) {
-      const dCachePath = `${cacheDir}/${output}`;
-      output = await compressToBase64(
-        `file://${dCachePath}`,
-        isPng ? "PNG" : "JPEG"
-      );
-    }
+    console.log("file decrypted...", attachment?.mimeType);
 
     return output;
   } catch (e) {
@@ -85,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");
@@ -95,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"
@@ -194,10 +178,10 @@ export async function exists(filename) {
   }
 
   if (exists || existsInAppGroup) {
-    const attachment = db.attachments.attachment(filename);
-    const totalChunks = Math.ceil(attachment.length / attachment.chunkSize);
+    const attachment = await db.attachments.attachment(filename);
+    const totalChunks = Math.ceil(attachment.size / attachment.chunkSize);
     const totalAbytes = totalChunks * ABYTES;
-    const expectedFileSize = attachment.length + totalAbytes;
+    const expectedFileSize = attachment.size + totalAbytes;
 
     const stat = await RNFetchBlob.fs.stat(
       existsInAppGroup ? appGroupPath : path

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

@@ -87,12 +87,9 @@ export async function uploadFile(filename, data, cancelToken) {
       DatabaseLogger.info(
         `File upload status: ${filename}, ${status}, ${text}`
       );
-      let attachment = db.attachments.attachment(filename);
+      let attachment = await db.attachments.attachment(filename);
       if (!attachment) return result;
-      if (
-        !isImage(attachment.metadata.type) &&
-        !isDocument(attachment.metadata?.type)
-      ) {
+      if (!isImage(attachment.mimeType) && !isDocument(attachment.mimeType)) {
         RNFetchBlob.fs.unlink(`${cacheDir}/${filename}`).catch(console.log);
       }
     } else {

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

@@ -17,18 +17,20 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React from "react";
-import { FlatList, View } from "react-native";
-import { useSelectionStore } from "../../stores/use-selection-store";
-import { useMessageStore } from "../../stores/use-message-store";
 import { useThemeColors } from "@notesnook/theme";
+import React from "react";
+import { View } from "react-native";
+import { useMessageStore } from "../../stores/use-message-store";
+import { useSelectionStore } from "../../stores/use-selection-store";
 import { allowedOnPlatform, renderItem } from "./functions";
+import { getContainerBorder } from "../../utils/colors";
 
 export const Announcement = ({ color }) => {
   const { colors } = useThemeColors();
   const announcements = useMessageStore((state) => state.announcements);
   let announcement = announcements.length > 0 ? announcements[0] : null;
   const selectionMode = useSelectionStore((state) => state.selectionMode);
+
   return !announcement || selectionMode ? null : (
     <View
       style={{
@@ -45,7 +47,8 @@ export const Announcement = ({ color }) => {
           borderRadius: 10,
           overflow: "hidden",
           backgroundColor: colors.secondary.background,
-          paddingBottom: 12
+          paddingBottom: 12,
+          ...getContainerBorder(colors.secondary.background)
         }}
       >
         <View

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

@@ -103,7 +103,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 key={item.title}
                 title={item.title}
                 fontSize={SIZE.sm}
-                type="gray"
+                type="plain"
                 onPress={() => onPress(item)}
                 width={null}
                 height={30}
@@ -149,7 +149,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 key={item.title}
                 title={item.title}
                 fontSize={SIZE.xs}
-                type="gray"
+                type="plain"
                 onPress={() => onPress(item)}
                 width={null}
                 height={30}

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

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

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

@@ -1,215 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import React, { useCallback, useEffect, useRef } from "react";
-import { Platform, View } from "react-native";
-import { enabled } from "react-native-privacy-snapshot";
-import { db } from "../../common/database";
-import { useAppState } from "../../hooks/use-app-state";
-import BiometricService from "../../services/biometrics";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { useThemeColors } from "@notesnook/theme";
-import { useUserStore } from "../../stores/use-user-store";
-import { NotesnookModule } from "../../utils/notesnook-module";
-import { SIZE } from "../../utils/size";
-import { Button } from "../ui/button";
-import { IconButton } from "../ui/icon-button";
-import Input from "../ui/input";
-import Seperator from "../ui/seperator";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-
-const AppLockedOverlay = () => {
-  const { colors } = useThemeColors();
-  const user = useUserStore((state) => state.user);
-  const appLocked = useUserStore((state) => state.appLocked);
-  const lockApp = useUserStore((state) => state.lockApp);
-  const deviceMode = useSettingStore((state) => state.deviceMode);
-  const passwordInputRef = useRef();
-  const password = useRef();
-  const appState = useAppState();
-
-  const biometricUnlockAwaitingUserInput = useRef(false);
-
-  const onUnlockAppRequested = useCallback(async () => {
-    if (!(await BiometricService.isBiometryAvailable())) return;
-    if (Platform.OS === "android") {
-      const activityName = await NotesnookModule.getActivityName();
-      if (activityName !== "MainActivity") return;
-    }
-    useSettingStore.getState().setRequestBiometrics(true);
-
-    let unlocked = await BiometricService.validateUser(
-      "Unlock to access your notes",
-      ""
-    );
-    if (unlocked) {
-      lockApp(false);
-      enabled(false);
-      password.current = null;
-    }
-    setTimeout(() => {
-      biometricUnlockAwaitingUserInput.current = false;
-      useSettingStore.getState().setRequestBiometrics(false);
-    }, 1);
-  }, [lockApp]);
-
-  const onSubmit = async () => {
-    if (!password.current) return;
-    try {
-      let unlocked = await db.user.verifyPassword(password.current);
-      if (unlocked) {
-        lockApp(false);
-        enabled(false);
-        password.current = null;
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  useEffect(() => {
-    if (
-      biometricUnlockAwaitingUserInput.current ||
-      useUserStore.getState().disableAppLockRequests
-    )
-      return;
-    if (appLocked && appState === "active") {
-      biometricUnlockAwaitingUserInput.current = true;
-      onUnlockAppRequested();
-    }
-  }, [appState, onUnlockAppRequested, appLocked]);
-
-  return (
-    appLocked && (
-      <View
-        style={{
-          backgroundColor: colors.primary.background,
-          width: "100%",
-          height: "100%",
-          position: "absolute",
-          zIndex: 999,
-          justifyContent: "center"
-        }}
-      >
-        <View
-          style={{
-            flex: 1,
-            justifyContent: "center",
-            width:
-              deviceMode !== "mobile"
-                ? "50%"
-                : Platform.OS == "ios"
-                ? "95%"
-                : "100%",
-            paddingHorizontal: 12,
-            marginBottom: 30,
-            marginTop: 15,
-            alignSelf: "center"
-          }}
-        >
-          <IconButton
-            name="fingerprint"
-            size={100}
-            customStyle={{
-              width: 100,
-              height: 100,
-              marginBottom: 20,
-              marginTop: user ? 0 : 50
-            }}
-            onPress={onUnlockAppRequested}
-            color={colors.primary.border}
-          />
-          <Heading
-            color={colors.primary.heading}
-            style={{
-              alignSelf: "center",
-              textAlign: "center"
-            }}
-          >
-            Unlock your notes
-          </Heading>
-
-          <Paragraph
-            style={{
-              alignSelf: "center",
-              textAlign: "center",
-              maxWidth: "90%"
-            }}
-          >
-            {"Please verify it's you"}
-          </Paragraph>
-          <Seperator />
-          <View
-            style={{
-              width: "100%",
-              padding: 12,
-              backgroundColor: colors.primary.background
-            }}
-          >
-            {user ? (
-              <>
-                <Input
-                  fwdRef={passwordInputRef}
-                  secureTextEntry
-                  placeholder="Enter account password"
-                  onChangeText={(v) => (password.current = v)}
-                  onSubmit={onSubmit}
-                />
-              </>
-            ) : null}
-
-            <View
-              style={{
-                marginTop: user ? 25 : 25
-              }}
-            >
-              {user ? (
-                <>
-                  <Button
-                    title="Continue"
-                    type="accent"
-                    onPress={onSubmit}
-                    width={250}
-                    height={45}
-                    style={{
-                      borderRadius: 150,
-                      marginBottom: 10
-                    }}
-                    fontSize={SIZE.md}
-                  />
-                </>
-              ) : null}
-
-              <Button
-                title="Unlock with Biometrics"
-                width={250}
-                onPress={onUnlockAppRequested}
-                icon={"fingerprint"}
-                type="transparent"
-              />
-            </View>
-          </View>
-        </View>
-      </View>
-    )
-  );
-};
-
-export default AppLockedOverlay;

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

@@ -0,0 +1,328 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { useCallback, useEffect, useRef } from "react";
+import { AppStateStatus, Platform, TextInput, View } from "react-native";
+//@ts-ignore
+import { useThemeColors } from "@notesnook/theme";
+import { enabled } from "react-native-privacy-snapshot";
+import { DatabaseLogger } from "../../common/database";
+import {
+  decrypt,
+  encrypt,
+  getCryptoKey,
+  getDatabaseKey,
+  setAppLockVerificationCipher,
+  validateAppLockPassword
+} from "../../common/database/encryption";
+import { MMKV } from "../../common/database/mmkv";
+import { useAppState } from "../../hooks/use-app-state";
+import BiometricService from "../../services/biometrics";
+import SettingsService from "../../services/settings";
+import { useSettingStore } from "../../stores/use-setting-store";
+import { useUserStore } from "../../stores/use-user-store";
+import { NotesnookModule } from "../../utils/notesnook-module";
+import { SIZE } from "../../utils/size";
+import { Button } from "../ui/button";
+import { IconButton } from "../ui/icon-button";
+import Input from "../ui/input";
+import Seperator from "../ui/seperator";
+import Heading from "../ui/typography/heading";
+import Paragraph from "../ui/typography/paragraph";
+
+const getUser = () => {
+  const user = MMKV.getString("user");
+  if (user) {
+    return JSON.parse(user);
+  }
+};
+
+const verifyUserPassword = async (password: string) => {
+  try {
+    await getDatabaseKey();
+    const key = await getCryptoKey();
+    const user = getUser();
+    const cipher = await encrypt(
+      {
+        key: key,
+        salt: user.salt
+      },
+      "notesnook"
+    );
+    const plainText = await decrypt({ password }, cipher);
+    return plainText === "notesnook";
+  } catch (e) {
+    DatabaseLogger.error(e as Error);
+    return false;
+  }
+};
+
+const AppLockedOverlay = () => {
+  const initialLaunchBiometricRequest = useRef(true);
+  const { colors } = useThemeColors();
+  const user = getUser();
+  const appLocked = useUserStore((state) => state.appLocked);
+  const lockApp = useUserStore((state) => state.lockApp);
+  const deviceMode = useSettingStore((state) => state.deviceMode);
+  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
+  );
+  const appLockHasPasswordSecurity = useSettingStore(
+    (state) => state.settings.appLockHasPasswordSecurity
+  );
+  const biometricsAuthEnabled = useSettingStore(
+    (state) =>
+      state.settings.biometricsAuthEnabled === true ||
+      (state.settings.biometricsAuthEnabled === undefined &&
+        !state.settings.appLockHasPasswordSecurity)
+  );
+
+  const onUnlockAppRequested = useCallback(async () => {
+    if (
+      !biometricsAuthEnabled ||
+      !(await BiometricService.isBiometryAvailable())
+    )
+      return;
+
+    biometricUnlockAwaitingUserInput.current = true;
+
+    if (Platform.OS === "android") {
+      const activityName = await NotesnookModule.getActivityName();
+      if (activityName !== "MainActivity") return;
+    }
+    useSettingStore.getState().setRequestBiometrics(true);
+
+    const unlocked = await BiometricService.validateUser(
+      "Unlock to access your notes",
+      ""
+    );
+    if (unlocked) {
+      lockApp(false);
+      enabled(false);
+      password.current = undefined;
+    }
+    biometricUnlockAwaitingUserInput.current = false;
+    setTimeout(() => {
+      if (biometricUnlockAwaitingUserInput.current) return;
+      useSettingStore.getState().setRequestBiometrics(false);
+    }, 500);
+  }, [biometricsAuthEnabled, lockApp]);
+
+  const onSubmit = async () => {
+    if (!password.current) return;
+    try {
+      const unlocked = appLockHasPasswordSecurity
+        ? await validateAppLockPassword(password.current)
+        : await verifyUserPassword(password.current);
+      if (unlocked) {
+        if (!appLockHasPasswordSecurity) {
+          await setAppLockVerificationCipher(password.current);
+          SettingsService.set({
+            appLockHasPasswordSecurity: true,
+            applockKeyboardType: "default"
+          });
+          DatabaseLogger.info("App lock migrated to password security");
+        }
+
+        lockApp(false);
+        enabled(false);
+        password.current = undefined;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  useEffect(() => {
+    if (appState === "active") {
+      enabled(false);
+    }
+
+    const prevState = lastAppState.current;
+    lastAppState.current = appState;
+
+    if (
+      appState === "active" &&
+      (prevState === "background" || initialLaunchBiometricRequest.current)
+    ) {
+      if (SettingsService.shouldLockAppOnEnterForeground()) {
+        DatabaseLogger.info("Locking app on entering foreground");
+        useUserStore.getState().lockApp(true);
+      }
+
+      if (
+        !(
+          biometricUnlockAwaitingUserInput.current ||
+          useUserStore.getState().disableAppLockRequests ||
+          !appLocked ||
+          useSettingStore.getState().requestBiometrics ||
+          useSettingStore.getState().appDidEnterBackgroundForAction
+        )
+      ) {
+        initialLaunchBiometricRequest.current = false;
+        DatabaseLogger.info("Biometric unlock request");
+        onUnlockAppRequested();
+      }
+
+      enabled(false);
+    } else {
+      SettingsService.appEnteredBackground();
+
+      if (
+        SettingsService.get().privacyScreen ||
+        SettingsService.getProperty("appLockEnabled")
+      ) {
+        enabled(true);
+      }
+    }
+  }, [appState, onUnlockAppRequested, appLocked]);
+
+  return appLocked ? (
+    <View
+      style={{
+        backgroundColor: colors.primary.background,
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+        zIndex: 999,
+        justifyContent: "center"
+      }}
+    >
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          width:
+            deviceMode !== "mobile"
+              ? "50%"
+              : Platform.OS == "ios"
+              ? "95%"
+              : "100%",
+          paddingHorizontal: 12,
+          marginBottom: 30,
+          marginTop: 15,
+          alignSelf: "center"
+        }}
+      >
+        <IconButton
+          name="fingerprint"
+          size={100}
+          style={{
+            width: 100,
+            height: 100,
+            marginBottom: 20,
+            marginTop: user ? 0 : 50
+          }}
+          onPress={onUnlockAppRequested}
+          color={colors.primary.border}
+        />
+        <Heading
+          color={colors.primary.heading}
+          style={{
+            alignSelf: "center",
+            textAlign: "center"
+          }}
+        >
+          Unlock your notes
+        </Heading>
+
+        <Paragraph
+          style={{
+            alignSelf: "center",
+            textAlign: "center",
+            maxWidth: "90%"
+          }}
+        >
+          {"Please verify it's you"}
+        </Paragraph>
+        <Seperator />
+        <View
+          style={{
+            width: "100%",
+            padding: 12,
+            backgroundColor: colors.primary.background
+          }}
+        >
+          {user || appLockHasPasswordSecurity ? (
+            <>
+              <Input
+                fwdRef={passwordInputRef}
+                secureTextEntry
+                keyboardType={
+                  appLockHasPasswordSecurity ? keyboardType : "default"
+                }
+                placeholder={`Enter ${
+                  appLockHasPasswordSecurity
+                    ? `app lock ${
+                        keyboardType === "numeric" ? "pin" : "password"
+                      }`
+                    : "account password"
+                }`}
+                onChangeText={(v) => (password.current = v)}
+                onSubmit={() => {
+                  onSubmit();
+                }}
+              />
+            </>
+          ) : null}
+
+          <View
+            style={{
+              marginTop: user ? 25 : 25
+            }}
+          >
+            {user || appLockHasPasswordSecurity ? (
+              <>
+                <Button
+                  title="Continue"
+                  type="accent"
+                  onPress={onSubmit}
+                  width={250}
+                  height={45}
+                  style={{
+                    borderRadius: 150,
+                    marginBottom: 10
+                  }}
+                  fontSize={SIZE.md}
+                />
+              </>
+            ) : null}
+
+            {biometricsAuthEnabled ? (
+              <Button
+                title="Unlock with Biometrics"
+                width={250}
+                onPress={onUnlockAppRequested}
+                icon={"fingerprint"}
+                type="transparent"
+              />
+            ) : null}
+          </View>
+        </View>
+      </View>
+    </View>
+  ) : null;
+};
+
+export default AppLockedOverlay;

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

@@ -17,9 +17,13 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { formatBytes } from "@notesnook/common";
+import { Attachment, Note, VirtualizedGrouping } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
 import Clipboard from "@react-native-clipboard/clipboard";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { RefObject, useEffect, useState } from "react";
 import { View } from "react-native";
+import { ActionSheetRef } from "react-native-actions-sheet";
 import { ScrollView } from "react-native-gesture-handler";
 import { db } from "../../common/database";
 import filesystem from "../../common/filesystem";
@@ -27,14 +31,18 @@ import downloadAttachment from "../../common/filesystem/download-attachment";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
 import picker from "../../screens/editor/tiptap/picker";
 import {
+  ToastManager,
   eSendEvent,
-  presentSheet,
-  ToastEvent
+  presentSheet
 } from "../../services/event-manager";
 import PremiumService from "../../services/premium";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { useThemeColors } from "@notesnook/theme";
-import { eCloseAttachmentDialog, eCloseSheet } from "../../utils/events";
+import {
+  eCloseAttachmentDialog,
+  eCloseSheet,
+  eDBItemUpdate,
+  eOnLoadNote
+} from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
@@ -43,31 +51,42 @@ import { openNote } from "../list-items/note/wrapper";
 import { DateMeta } from "../properties/date-meta";
 import { Button } from "../ui/button";
 import { Notice } from "../ui/notice";
-import { PressableButton } from "../ui/pressable";
+import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { formatBytes } from "@notesnook/common";
+import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
+import { editorController } from "../../screens/editor/tiptap/utils";
 
-const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
+const Actions = ({
+  attachment,
+  close,
+  setAttachments,
+  fwdRef
+}: {
+  attachment: Attachment;
+  setAttachments: (attachments?: VirtualizedGrouping<Attachment>) => void;
+  close?: () => void;
+  fwdRef: RefObject<ActionSheetRef>;
+}) => {
   const { colors } = useThemeColors();
-  const contextId = attachment.metadata.hash;
-  const [filename, setFilename] = useState(attachment.metadata.filename);
+  const contextId = attachment.hash;
+  const [filename, setFilename] = useState(attachment.filename);
   const [currentProgress] = useAttachmentProgress(attachment);
-  const [failed, setFailed] = useState(attachment.failed);
-  const [notes, setNotes] = useState([]);
-  const [loading, setLoading] = useState({
-    name: null
-  });
+  const [failed, setFailed] = useState<string | undefined>(attachment.failed);
+  const [notes, setNotes] = useState<Note[]>([]);
+  const [loading, setLoading] = useState<{
+    name?: string;
+  }>({});
 
   const actions = [
     {
       name: "Download",
       onPress: async () => {
         if (currentProgress) {
-          await db.fs.cancel(attachment.metadata.hash);
-          useAttachmentStore.getState().remove(attachment.metadata.hash);
+          await db.fs().cancel(attachment.hash);
+          useAttachmentStore.getState().remove(attachment.hash);
         }
-        downloadAttachment(attachment.metadata.hash, false);
+        downloadAttachment(attachment.hash, false);
         eSendEvent(eCloseSheet, contextId);
       },
       icon: "download"
@@ -76,7 +95,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
       name: "Reupload",
       onPress: async () => {
         if (!PremiumService.get()) {
-          ToastEvent.show({
+          ToastManager.show({
             heading: "Upgrade to pro",
             type: "error",
             context: "local"
@@ -85,9 +104,9 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
         }
         await picker.pick({
           reupload: true,
-          hash: attachment.metadata.hash,
+          hash: attachment.hash,
           context: contextId,
-          type: attachment.metadata.type
+          type: attachment.mimeType.startsWith("image") ? "image" : "file"
         });
       },
       icon: "upload"
@@ -98,19 +117,20 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
         setLoading({
           name: "Run file check"
         });
-        let res = await filesystem.checkAttachment(attachment.metadata.hash);
+        const res = await filesystem.checkAttachment(attachment.hash);
         if (res.failed) {
           db.attachments.markAsFailed(attachment.id, res.failed);
           setFailed(res.failed);
-          ToastEvent.show({
+          ToastManager.show({
             heading: "File check failed with error: " + res.failed,
             type: "error",
             context: "local"
           });
         } else {
-          setFailed(null);
-          db.attachments.markAsFailed(attachment.id, null);
-          ToastEvent.show({
+          setFailed(undefined);
+          db.attachments.markAsFailed(attachment.id);
+          eSendEvent(eDBItemUpdate, attachment.id);
+          ToastManager.show({
             heading: "File check passed",
             type: "success",
             context: "local"
@@ -119,7 +139,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
 
         setAttachments();
         setLoading({
-          name: null
+          name: undefined
         });
       },
       icon: "file-check"
@@ -128,19 +148,20 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
       name: "Rename",
       onPress: () => {
         presentDialog({
-          context: contextId,
+          context: contextId as any,
           input: true,
           title: "Rename file",
           paragraph: "Enter a new name for the file",
-          defaultValue: attachment.metadata.filename,
+          defaultValue: attachment.filename,
           positivePress: async (value) => {
             if (value && value.length > 0) {
               await db.attachments.add({
-                hash: attachment.metadata.hash,
+                hash: attachment.hash,
                 filename: value
               });
               setFilename(value);
               setAttachments();
+              eSendEvent(eDBItemUpdate, attachment.id);
             }
           },
           positiveText: "Rename"
@@ -151,34 +172,40 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
     {
       name: "Delete",
       onPress: async () => {
-        await db.attachments.remove(attachment.metadata.hash, false);
+        const relations = await db.relations.to(attachment, "note").get();
+        await db.attachments.remove(attachment.hash, false);
         setAttachments();
-        close();
+        eSendEvent(eDBItemUpdate, attachment.id);
+        relations
+          .map((relation) => relation.fromId)
+          .forEach(async (id) => {
+            const tab = useTabStore.getState().getTabForNote(id);
+            if (tab !== undefined) {
+              const isFocused = useTabStore.getState().currentTab === tab;
+              if (isFocused) {
+                eSendEvent(eOnLoadNote, {
+                  item: await db.notes.note(id),
+                  forced: true
+                });
+              } else {
+                editorController.current.commands.setLoading(true, tab);
+              }
+            }
+          });
+        close?.();
       },
       icon: "delete-outline"
     }
   ];
 
-  const getNotes = useCallback(() => {
-    let allNotes = db.notes.all;
-    let attachmentNotes = attachment.noteIds?.map((id) => {
-      let index = allNotes?.findIndex((note) => id === note.id);
-      if (index !== -1) {
-        return allNotes[index];
-      } else {
-        return {
-          type: "notfound",
-          title: `Note with id ${id} does not exist.`,
-          id: id
-        };
-      }
-    });
-    return attachmentNotes;
-  }, [attachment.noteIds]);
-
   useEffect(() => {
-    setNotes(getNotes());
-  }, [attachment, getNotes]);
+    db.relations
+      .to(attachment, "note")
+      .selector.items()
+      .then((items) => {
+        setNotes(items);
+      });
+  }, [attachment]);
 
   return (
     <ScrollView
@@ -194,7 +221,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
       <View
         style={{
           borderBottomWidth: 1,
-          borderBottomColor: colors.secondary.background,
+          borderBottomColor: colors.primary.border,
           marginBottom: notes && notes.length > 0 ? 0 : 12
         }}
       >
@@ -221,7 +248,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
             }}
             color={colors.secondary.paragraph}
           >
-            {attachment.metadata.type}
+            {attachment.type}
           </Paragraph>
           <Paragraph
             style={{
@@ -230,10 +257,10 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
             size={SIZE.xs}
             color={colors.secondary.paragraph}
           >
-            {formatBytes(attachment.length)}
+            {formatBytes(attachment.size)}
           </Paragraph>
 
-          {attachment.noteIds ? (
+          {notes.length ? (
             <Paragraph
               style={{
                 marginRight: 10
@@ -241,14 +268,14 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
               size={SIZE.xs}
               color={colors.secondary.paragraph}
             >
-              {attachment.noteIds.length} note
-              {attachment.noteIds.length > 1 ? "s" : ""}
+              {notes.length} note
+              {notes.length > 1 ? "s" : ""}
             </Paragraph>
           ) : null}
           <Paragraph
             onPress={() => {
-              Clipboard.setString(attachment.metadata.hash);
-              ToastEvent.show({
+              Clipboard.setString(attachment.hash);
+              ToastManager.show({
                 type: "success",
                 heading: "Attachment hash copied",
                 context: "local"
@@ -257,7 +284,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
             size={SIZE.xs}
             color={colors.secondary.paragraph}
           >
-            {attachment.metadata.hash}
+            {attachment.hash}
           </Paragraph>
         </View>
 
@@ -268,7 +295,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
         <View
           style={{
             borderBottomWidth: 1,
-            borderBottomColor: colors.secondary.background,
+            borderBottomColor: colors.primary.border,
             marginBottom: 12,
             paddingVertical: 12
           }}
@@ -284,25 +311,15 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
             </Heading>
 
             {notes.map((item) => (
-              <PressableButton
+              <Pressable
                 onPress={async () => {
-                  if (item.type === "notfound") {
-                    ToastEvent.show({
-                      heading: "Note not found",
-                      message:
-                        "A note with the given id was not found. Maybe you have deleted the note or moved it to trash already.",
-                      type: "error",
-                      context: "local"
-                    });
-                    return;
-                  }
                   eSendEvent(eCloseSheet, contextId);
                   await sleep(150);
                   eSendEvent(eCloseAttachmentDialog);
                   await sleep(300);
-                  openNote(item, item.type === "trash");
+                  openNote(item, (item as any).type === "trash");
                 }}
-                customStyle={{
+                style={{
                   paddingVertical: 12,
                   alignItems: "flex-start",
 
@@ -311,7 +328,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
                 key={item.id}
               >
                 <Paragraph size={SIZE.xs}>{item.title}</Paragraph>
-              </PressableButton>
+              </Pressable>
             ))}
           </>
         </View>
@@ -321,17 +338,16 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
         <Button
           key={item.name}
           buttonType={{
-            text: item.on
-              ? colors.primary.accent
-              : item.name === "Delete" || item.name === "PermDelete"
-              ? colors.error.paragraph
-              : colors.primary.paragraph
+            text:
+              item.name === "Delete"
+                ? colors.error.paragraph
+                : colors.primary.paragraph
           }}
           onPress={item.onPress}
           title={item.name}
           icon={item.icon}
           loading={loading?.name === item.name}
-          type={item.on ? "shade" : "gray"}
+          type="plain"
           fontSize={SIZE.sm}
           style={{
             borderRadius: 0,
@@ -359,7 +375,11 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
   );
 };
 
-Actions.present = (attachment, set, context) => {
+Actions.present = (
+  attachment: Attachment,
+  set: (attachments?: VirtualizedGrouping<Attachment>) => void,
+  context?: string
+) => {
   presentSheet({
     context: context,
     component: (ref, close) => (

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

@@ -1,171 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import { formatBytes } from "@notesnook/common";
-import React from "react";
-import { TouchableOpacity, View } from "react-native";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { db } from "../../common/database";
-import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
-import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
-import { IconButton } from "../ui/icon-button";
-import { ProgressCircleComponent } from "../ui/svg/lazy";
-import Paragraph from "../ui/typography/paragraph";
-import Actions from "./actions";
-
-function getFileExtension(filename) {
-  var ext = /^.+\.([^.]+)$/.exec(filename);
-  return ext == null ? "" : ext[1];
-}
-
-export const AttachmentItem = ({
-  attachment,
-  encryption,
-  setAttachments,
-  pressable = true,
-  hideWhenNotDownloading,
-  context
-}) => {
-  const { colors } = useThemeColors();
-  const [currentProgress, setCurrentProgress] = useAttachmentProgress(
-    attachment,
-    encryption
-  );
-  const onPress = () => {
-    if (!pressable) return;
-    Actions.present(attachment, setAttachments, context);
-  };
-
-  return hideWhenNotDownloading &&
-    (!currentProgress || !currentProgress.value) ? null : (
-    <TouchableOpacity
-      activeOpacity={0.9}
-      onPress={onPress}
-      style={{
-        flexDirection: "row",
-        marginVertical: 5,
-        justifyContent: "space-between",
-        padding: 12,
-        paddingVertical: 6,
-        borderRadius: 5,
-        backgroundColor: colors.secondary.background
-      }}
-      type="grayBg"
-    >
-      <View
-        style={{
-          flexShrink: 1,
-          flexDirection: "row",
-          alignItems: "center"
-        }}
-      >
-        <View
-          style={{
-            justifyContent: "center",
-            alignItems: "center",
-            marginLeft: -5
-          }}
-        >
-          <Icon name="file" size={SIZE.xxxl} color={colors.primary.icon} />
-
-          <Paragraph
-            adjustsFontSizeToFit
-            size={6}
-            color={colors.static.white}
-            style={{
-              position: "absolute"
-            }}
-          >
-            {getFileExtension(attachment.metadata.filename).toUpperCase()}
-          </Paragraph>
-        </View>
-
-        <View
-          style={{
-            flexShrink: 1,
-            marginLeft: 10
-          }}
-        >
-          <Paragraph
-            size={SIZE.sm - 1}
-            style={{
-              flexWrap: "wrap",
-              marginBottom: 2.5
-            }}
-            numberOfLines={1}
-            lineBreakMode="middle"
-            color={colors.primary.paragraph}
-          >
-            {attachment.metadata.filename}
-          </Paragraph>
-
-          {!hideWhenNotDownloading ? (
-            <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
-              {formatBytes(attachment.length)}{" "}
-              {currentProgress?.type
-                ? "(" + currentProgress.type + "ing - tap to cancel)"
-                : ""}
-            </Paragraph>
-          ) : null}
-        </View>
-      </View>
-
-      {currentProgress ? (
-        <TouchableOpacity
-          activeOpacity={0.9}
-          onPress={() => {
-            if (encryption || !pressable) return;
-            db.fs.cancel(attachment.metadata.hash);
-            setCurrentProgress(null);
-          }}
-          style={{
-            justifyContent: "center",
-            marginLeft: 5,
-            marginTop: 5,
-            marginRight: -5
-          }}
-        >
-          <ProgressCircleComponent
-            size={SIZE.xxl}
-            progress={currentProgress?.value ? currentProgress?.value / 100 : 0}
-            showsText
-            textStyle={{
-              fontSize: 10
-            }}
-            color={colors.primary.accent}
-            formatText={(progress) => (progress * 100).toFixed(0)}
-            borderWidth={0}
-            thickness={2}
-          />
-        </TouchableOpacity>
-      ) : (
-        <>
-          {attachment.failed ? (
-            <IconButton
-              onPress={onPress}
-              name="alert-circle-outline"
-              color={colors.error.paragraph}
-            />
-          ) : null}
-        </>
-      )}
-    </TouchableOpacity>
-  );
-};

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

@@ -0,0 +1,191 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { formatBytes } from "@notesnook/common";
+import { Attachment, VirtualizedGrouping } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
+import React from "react";
+import { TouchableOpacity, View } from "react-native";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { db } from "../../common/database";
+import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
+import { useDBItem } from "../../hooks/use-db-item";
+import { SIZE } from "../../utils/size";
+import { IconButton } from "../ui/icon-button";
+import { ProgressCircleComponent } from "../ui/svg/lazy";
+import Paragraph from "../ui/typography/paragraph";
+import Actions from "./actions";
+
+function getFileExtension(filename: string) {
+  const ext = /^.+\.([^.]+)$/.exec(filename);
+  return ext == null ? "" : ext[1];
+}
+
+export const AttachmentItem = ({
+  id,
+  attachments,
+  encryption,
+  setAttachments,
+  pressable = true,
+  hideWhenNotDownloading,
+  context
+}: {
+  id: string | number;
+  attachments?: VirtualizedGrouping<Attachment>;
+  encryption?: boolean;
+  setAttachments: (attachments: any) => void;
+  pressable?: boolean;
+  hideWhenNotDownloading?: boolean;
+  context?: string;
+}) => {
+  const [attachment] = useDBItem(id, "attachment", attachments);
+
+  const { colors } = useThemeColors();
+  const [currentProgress, setCurrentProgress] = useAttachmentProgress(
+    attachment,
+    encryption
+  );
+
+  const onPress = () => {
+    if (!pressable || !attachment) return;
+    Actions.present(attachment, setAttachments, context);
+  };
+
+  return hideWhenNotDownloading &&
+    (!currentProgress || !currentProgress.value) ? null : (
+    <TouchableOpacity
+      activeOpacity={0.9}
+      onPress={onPress}
+      style={{
+        flexDirection: "row",
+        marginVertical: 5,
+        justifyContent: "space-between",
+        padding: 12,
+        paddingVertical: 6,
+        borderRadius: 5,
+        backgroundColor: colors.secondary.background,
+        minHeight: 45
+      }}
+    >
+      {!attachment ? null : (
+        <>
+          <View
+            style={{
+              flexShrink: 1,
+              flexDirection: "row",
+              alignItems: "center"
+            }}
+          >
+            <View
+              style={{
+                justifyContent: "center",
+                alignItems: "center",
+                marginLeft: -5
+              }}
+            >
+              <Icon name="file" size={SIZE.xxxl} color={colors.primary.icon} />
+
+              <Paragraph
+                adjustsFontSizeToFit
+                size={6}
+                color={colors.static.white}
+                style={{
+                  position: "absolute"
+                }}
+              >
+                {getFileExtension(attachment.filename).toUpperCase()}
+              </Paragraph>
+            </View>
+
+            <View
+              style={{
+                flexShrink: 1,
+                marginLeft: 10
+              }}
+            >
+              <Paragraph
+                size={SIZE.sm - 1}
+                style={{
+                  flexWrap: "wrap",
+                  marginBottom: 2.5
+                }}
+                numberOfLines={1}
+                lineBreakMode="middle"
+                color={colors.primary.paragraph}
+              >
+                {attachment.filename}
+              </Paragraph>
+
+              {!hideWhenNotDownloading ? (
+                <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+                  {formatBytes(attachment.size)}{" "}
+                  {currentProgress?.type
+                    ? "(" + currentProgress.type + "ing - tap to cancel)"
+                    : ""}
+                </Paragraph>
+              ) : null}
+            </View>
+          </View>
+
+          {currentProgress ? (
+            <TouchableOpacity
+              activeOpacity={0.9}
+              onPress={() => {
+                if (encryption || !pressable) return;
+                db.fs().cancel(attachment.hash);
+                setCurrentProgress(undefined);
+              }}
+              style={{
+                justifyContent: "center",
+                marginLeft: 5,
+                marginTop: 5,
+                marginRight: -5
+              }}
+            >
+              <ProgressCircleComponent
+                size={SIZE.xxl}
+                progress={
+                  currentProgress?.value ? currentProgress?.value / 100 : 0
+                }
+                showsText
+                textStyle={{
+                  fontSize: 10
+                }}
+                color={colors.primary.accent}
+                formatText={(progress) => (progress * 100).toFixed(0)}
+                borderWidth={0}
+                thickness={2}
+              />
+            </TouchableOpacity>
+          ) : (
+            <>
+              {attachment.failed ? (
+                <IconButton
+                  onPress={onPress}
+                  name="alert-circle-outline"
+                  color={colors.error.paragraph}
+                />
+              ) : null}
+            </>
+          )}
+        </>
+      )}
+    </TouchableOpacity>
+  );
+};

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

@@ -21,7 +21,10 @@ import React, { useRef, useState } from "react";
 import { Platform, View } from "react-native";
 import { db } from "../../common/database";
 import { downloadAttachments } from "../../common/filesystem/download-attachment";
-import { presentSheet } from "../../services/event-manager";
+import {
+  PresentSheetOptions,
+  presentSheet
+} from "../../services/event-manager";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
@@ -29,8 +32,19 @@ import { ProgressBarComponent } from "../ui/svg/lazy";
 import { useThemeColors } from "@notesnook/theme";
 import { FlatList } from "react-native-actions-sheet";
 import { AttachmentItem } from "./attachment-item";
+import { Attachment, VirtualizedGrouping } from "@notesnook/core";
 
-const DownloadAttachments = ({ close, attachments, isNote, update }) => {
+const DownloadAttachments = ({
+  close,
+  attachments,
+  isNote,
+  update
+}: {
+  attachments: VirtualizedGrouping<Attachment>;
+  close?: ((ctx?: string | undefined) => void) | undefined;
+  isNote?: boolean;
+  update?: (props: PresentSheetOptions) => void;
+}) => {
   const { colors } = useThemeColors();
   const [downloading, setDownloading] = useState(false);
   const [progress, setProgress] = useState({
@@ -39,63 +53,58 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
   });
   const [result, setResult] = useState(new Map());
   const canceled = useRef(false);
-  const groupId = useRef();
+  const groupId = useRef<string>();
 
   const onDownload = async () => {
-    update({
+    update?.({
       disableClosing: true
-    });
+    } as PresentSheetOptions);
     setDownloading(true);
     canceled.current = false;
     groupId.current = Date.now().toString();
     const result = await downloadAttachments(
-      attachments,
-      (progress, statusText) => setProgress({ value: progress, statusText }),
+      await attachments.ids(),
+      (progress: number, statusText: string) =>
+        setProgress({ value: progress, statusText }),
       canceled,
       groupId.current
     );
     if (canceled.current) return;
     setResult(result || new Map());
     setDownloading(false);
-    update({
+    update?.({
       disableClosing: false
-    });
+    } as PresentSheetOptions);
   };
 
   const cancel = async () => {
-    update({
+    update?.({
       disableClosing: false
-    });
+    } as PresentSheetOptions);
     canceled.current = true;
+    if (!groupId.current) return;
     console.log(groupId.current, "canceling groupId downloads");
-    await db.fs.cancel(groupId.current);
+    await db.fs().cancel(groupId.current);
     setDownloading(false);
-    groupId.current = null;
-  };
-
-  const successResults = () => {
-    const results = [];
-    for (let [key, value] of result.entries()) {
-      if (value.status === 1) results.push(db.attachments.attachment(key));
-    }
-    return results;
+    setResult(new Map());
+    groupId.current = undefined;
   };
 
   const failedResults = () => {
     const results = [];
-    for (let [key, value] of result.entries()) {
-      if (value.status === 0) results.push(db.attachments.attachment(key));
+    for (const value of result.values()) {
+      if (value.status === 0) results.push(value.attachment);
     }
     return results;
   };
 
   function getResultText() {
     const downloadedAttachmentsCount =
-      attachments.length - failedResults().length;
+      attachments?.placeholders?.length - failedResults().length;
     if (downloadedAttachmentsCount === 0)
       return "Failed to download all attachments";
     return `Successfully downloaded ${downloadedAttachmentsCount}/${
-      attachments.length
+      attachments?.placeholders.length
     } attachments as a zip file at ${
       Platform.OS === "android" ? "the selected folder" : "Notesnook/downloads"
     }`;
@@ -157,7 +166,11 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
             width={null}
             animated={true}
             useNativeDriver
-            progress={progress.value ? progress.value / attachments.length : 0}
+            progress={
+              progress.value
+                ? progress.value / attachments.placeholders?.length
+                : 0
+            }
             unfilledColor={colors.secondary.background}
             color={colors.primary.accent}
             borderWidth={0}
@@ -174,7 +187,7 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
           borderRadius: 5,
           marginVertical: 12
         }}
-        data={downloading ? attachments : []}
+        data={downloading ? attachments.placeholders : undefined}
         ListEmptyComponent={
           <View
             style={{
@@ -189,14 +202,15 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
             </Paragraph>
           </View>
         }
-        keyExtractor={(item) => item.id}
-        renderItem={({ item }) => {
+        keyExtractor={(index) => "attachment_download" + index}
+        renderItem={({ index }) => {
           return (
             <AttachmentItem
-              attachment={item}
+              id={index}
               setAttachments={() => {}}
               pressable={false}
               hideWhenNotDownloading={true}
+              attachments={attachments}
             />
           );
         }}
@@ -209,7 +223,9 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
             borderRadius: 100,
             marginTop: 20
           }}
-          onPress={close}
+          onPress={() => {
+            close?.();
+          }}
           type="accent"
           title="Done"
         />
@@ -227,8 +243,10 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
               borderRadius: 100,
               marginRight: 5
             }}
-            onPress={close}
-            type="grayBg"
+            onPress={() => {
+              close?.();
+            }}
+            type="secondary"
             title="No"
           />
           <Button
@@ -258,7 +276,11 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
   );
 };
 
-DownloadAttachments.present = (context, attachments, isNote) => {
+DownloadAttachments.present = (
+  context: string,
+  attachments: VirtualizedGrouping<Attachment>,
+  isNote?: boolean
+) => {
   presentSheet({
     context: context,
     component: (ref, close, update) => (

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

@@ -17,16 +17,25 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useRef, useState } from "react";
+import {
+  Attachment,
+  Note,
+  SortOptions,
+  VirtualizedGrouping
+} from "@notesnook/core";
+import { FilteredSelector } from "@notesnook/core/dist/database/sql-collection";
+import { useThemeColors } from "@notesnook/theme";
+import React, { useEffect, useRef, useState } from "react";
 import { ActivityIndicator, ScrollView, View } from "react-native";
-
+import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import filesystem from "../../common/filesystem";
 import { presentSheet } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
+import { useSettingStore } from "../../stores/use-setting-store";
 import { SIZE } from "../../utils/size";
 import SheetProvider from "../sheet-provider";
+import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
 import Seperator from "../ui/seperator";
@@ -34,82 +43,92 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { AttachmentItem } from "./attachment-item";
 import DownloadAttachments from "./download-attachments";
-import { Button } from "../ui/button";
-import {
-  isAudio,
-  isDocument,
-  isImage,
-  isVideo
-} from "@notesnook/core/dist/utils/filename";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
 
-export const AttachmentDialog = ({ note }) => {
+const DEFAULT_SORTING: SortOptions = {
+  sortBy: "dateEdited",
+  sortDirection: "desc"
+};
+
+export const AttachmentDialog = ({ note }: { note?: Note }) => {
   const { colors } = useThemeColors();
   const { height } = useSettingStore((state) => state.dimensions);
-  const [attachments, setAttachments] = useState(
-    note
-      ? db.attachments.ofNote(note.id, "all")
-      : [...(db.attachments.all || [])]
-  );
-
-  const attachmentSearchValue = useRef();
-  const searchTimer = useRef();
+  const [attachments, setAttachments] =
+    useState<VirtualizedGrouping<Attachment>>();
+  const attachmentSearchValue = useRef<string>();
+  const searchTimer = useRef<NodeJS.Timeout>();
   const [loading, setLoading] = useState(false);
   const [currentFilter, setCurrentFilter] = useState("all");
 
-  const onChangeText = (text) => {
-    const attachments = note
-      ? db.attachments.ofNote(note.id, "all")
-      : [...(db.attachments.all || [])];
+  const refresh = React.useCallback(() => {
+    if (note) {
+      db.attachments
+        .ofNote(note.id, "all")
+        .sorted({
+          ...DEFAULT_SORTING,
+          sortBy: "dateModified"
+        })
+        .then((attachments) => {
+          setAttachments(attachments);
+        });
+    } else {
+      db.attachments.all
+        .sorted({
+          ...DEFAULT_SORTING,
+          sortBy: "dateModified"
+        })
+        .then((attachments) => setAttachments(attachments));
+    }
+  }, [note]);
 
+  useEffect(() => {
+    refresh();
+  }, [note, refresh]);
+
+  const onChangeText = async (text: string) => {
     attachmentSearchValue.current = text;
     if (
       !attachmentSearchValue.current ||
       attachmentSearchValue.current === ""
     ) {
-      setAttachments(filterAttachments(currentFilter));
+      setAttachments(await filterAttachments(currentFilter));
+      refresh();
     }
     clearTimeout(searchTimer.current);
-    searchTimer.current = setTimeout(() => {
-      let results = db.lookup.attachments(
-        attachments,
-        attachmentSearchValue.current
-      );
+    searchTimer.current = setTimeout(async () => {
+      const results = await db.lookup
+        .attachments(attachmentSearchValue.current as string)
+        .sorted();
       if (results.length === 0) return;
-
-      setAttachments(filterAttachments(currentFilter, results));
+      setAttachments(results);
     }, 300);
   };
 
-  const renderItem = ({ item }) => (
+  const renderItem = ({ index }: { item: boolean; index: number }) => (
     <AttachmentItem
-      setAttachments={() => {
-        setAttachments(filterAttachments(currentFilter));
+      setAttachments={async () => {
+        setAttachments(await filterAttachments(currentFilter));
       }}
-      attachment={item}
+      attachments={attachments}
+      id={index}
       context="attachments-list"
     />
   );
 
   const onCheck = async () => {
+    if (!attachments) return;
     setLoading(true);
-    const checkedAttachments = [];
-    for (let attachment of attachments) {
-      let result = await filesystem.checkAttachment(attachment.metadata.hash);
+
+    for (let i = 0; i < attachments.placeholders.length; i++) {
+      const attachment = (await attachments.item(i))?.item;
+      if (!attachment) continue;
+      const result = await filesystem.checkAttachment(attachment.hash);
       if (result.failed) {
-        await db.attachments.markAsFailed(
-          attachment.metadata.hash,
-          result.failed
-        );
+        await db.attachments.markAsFailed(attachment.hash, result.failed);
       } else {
-        await db.attachments.markAsFailed(attachment.id, null);
+        await db.attachments.markAsFailed(attachment.id, undefined);
       }
-      checkedAttachments.push(
-        db.attachments.attachment(attachment.metadata.hash)
-      );
-      setAttachments([...checkedAttachments]);
     }
+    refresh();
     setLoading(false);
   };
 
@@ -136,32 +155,40 @@ export const AttachmentDialog = ({ note }) => {
     }
   ];
 
-  const filterAttachments = (type, _attachments) => {
-    const attachments =
-      _attachments || note
-        ? db.attachments.ofNote(note.id, "all")
-        : [...(db.attachments.all || [])];
+  const filterAttachments = async (type: string) => {
+    let items: FilteredSelector<Attachment> = db.attachments.all;
 
     switch (type) {
       case "all":
-        return attachments;
+        items = note
+          ? db.attachments.ofNote(note.id, "all")
+          : db.attachments.all;
+        break;
       case "images":
-        return attachments.filter((attachment) =>
-          isImage(attachment.metadata.type)
-        );
+        items = note
+          ? db.attachments.ofNote(note.id, "images")
+          : db.attachments.images;
+        break;
       case "video":
-        return attachments.filter((attachment) =>
-          isVideo(attachment.metadata.type)
-        );
+        items = items = note
+          ? db.attachments.ofNote(note.id, "videos")
+          : db.attachments.videos;
+        break;
       case "audio":
-        return attachments.filter((attachment) =>
-          isAudio(attachment.metadata.type)
-        );
+        items = note
+          ? db.attachments.ofNote(note.id, "audio")
+          : db.attachments.all;
+        break;
       case "documents":
-        return attachments.filter((attachment) =>
-          isDocument(attachment.metadata.type)
-        );
+        items = note
+          ? db.attachments.ofNote(note.id, "documents")
+          : db.attachments.documents;
     }
+
+    return await items.sorted({
+      ...DEFAULT_SORTING,
+      sortBy: "dateModified"
+    });
   };
 
   return (
@@ -200,7 +227,7 @@ export const AttachmentDialog = ({ note }) => {
           ) : (
             <IconButton
               name="check-all"
-              customStyle={{
+              style={{
                 height: 40,
                 width: 40,
                 marginRight: 10
@@ -213,12 +240,13 @@ export const AttachmentDialog = ({ note }) => {
 
           <IconButton
             name="download"
-            customStyle={{
+            style={{
               height: 40,
               width: 40
             }}
             color={colors.primary.paragraph}
             onPress={() => {
+              if (!attachments) return;
               DownloadAttachments.present(
                 "attachments-list",
                 attachments,
@@ -235,7 +263,7 @@ export const AttachmentDialog = ({ note }) => {
         placeholder="Filter attachments by filename, type or hash"
         onChangeText={onChangeText}
         onSubmit={() => {
-          onChangeText(attachmentSearchValue.current);
+          onChangeText(attachmentSearchValue.current as string);
         }}
       />
 
@@ -255,12 +283,11 @@ export const AttachmentDialog = ({ note }) => {
         >
           {attachmentTypes.map((item) => (
             <Button
-              type={currentFilter === item.filterBy ? "grayAccent" : "gray"}
-              key={item.title}
-              title={
-                item.title +
-                ` (${filterAttachments(item.filterBy)?.length || 0})`
+              type={
+                currentFilter === item.filterBy ? "secondaryAccented" : "plain"
               }
+              key={item.title}
+              title={item.title}
               style={{
                 borderRadius: 0,
                 borderBottomWidth: 1,
@@ -270,9 +297,9 @@ export const AttachmentDialog = ({ note }) => {
                     ? "transparent"
                     : colors.primary.accent
               }}
-              onPress={() => {
+              onPress={async () => {
                 setCurrentFilter(item.filterBy);
-                setAttachments(filterAttachments(item.filterBy));
+                setAttachments(await filterAttachments(item.filterBy));
               }}
             />
           ))}
@@ -303,7 +330,7 @@ export const AttachmentDialog = ({ note }) => {
           />
         }
         estimatedItemSize={50}
-        data={attachments}
+        data={attachments?.placeholders}
         renderItem={renderItem}
       />
 
@@ -326,7 +353,7 @@ export const AttachmentDialog = ({ note }) => {
   );
 };
 
-AttachmentDialog.present = (note) => {
+AttachmentDialog.present = (note?: Note) => {
   presentSheet({
     component: () => <AttachmentDialog note={note} />
   });

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

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

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

@@ -23,15 +23,18 @@ import { db } from "../../common/database";
 import {
   eSendEvent,
   presentSheet,
-  ToastEvent
+  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();
@@ -45,7 +48,7 @@ export const ChangePassword = () => {
 
   const changePassword = async () => {
     if (!user?.isEmailConfirmed) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Email not confirmed",
         message: "Please confirm your email to change account password",
         type: "error",
@@ -54,7 +57,7 @@ export const ChangePassword = () => {
       return;
     }
     if (error || !oldPassword.current || !password.current) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "All fields required",
         message: "Fill all the fields and try again.",
         type: "error",
@@ -64,18 +67,23 @@ 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);
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Account password updated",
         type: "success",
         context: "global"
       });
       setLoading(false);
       eSendEvent(eCloseSheet);
+      await sleep(300);
+      eSendEvent(eOpenRecoveryKeyDialog);
     } catch (e) {
       setLoading(false);
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Failed to change password",
         message: e.message,
         type: "error",
@@ -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/forgot-password.js

@@ -22,7 +22,7 @@ import { View } from "react-native";
 import ActionSheet from "react-native-actions-sheet";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
-import { ToastEvent } from "../../services/event-manager";
+import { ToastManager } from "../../services/event-manager";
 import SettingsService from "../../services/settings";
 import { useThemeColors } from "@notesnook/theme";
 import DialogHeader from "../dialog/dialog-header";
@@ -43,7 +43,7 @@ export const ForgotPassword = () => {
 
   const sendRecoveryEmail = async () => {
     if (!email.current || error) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Account email is required.",
         type: "error",
         context: "local"
@@ -63,7 +63,7 @@ export const ForgotPassword = () => {
       SettingsService.set({
         lastRecoveryEmailTime: Date.now()
       });
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Check your email to reset password",
         message: `Recovery email has been sent to ${email.current.toLowerCase()}`,
         type: "success",
@@ -74,7 +74,7 @@ export const ForgotPassword = () => {
       setSent(true);
     } catch (e) {
       setLoading(false);
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Recovery email not sent",
         message: e.message,
         type: "error",
@@ -113,7 +113,7 @@ export const ForgotPassword = () => {
             }}
           >
             <IconButton
-              customStyle={{
+              style={{
                 width: null,
                 height: null
               }}

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

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

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

@@ -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,
@@ -103,7 +104,7 @@ export const Login = ({ changeMode }) => {
             justifyContent: "flex-end",
             paddingHorizontal: 20,
             backgroundColor: colors.secondary.background,
-            borderBottomWidth: 1,
+            borderBottomWidth: 0.8,
             marginBottom: 12,
             borderBottomColor: colors.primary.border,
             alignSelf: deviceMode !== "mobile" ? "center" : undefined,
@@ -222,7 +223,7 @@ export const Login = ({ changeMode }) => {
                   textDecorationLine: "underline"
                 }}
                 fontSize={SIZE.xs}
-                type="gray"
+                type="plain"
               />
             </>
           )}

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

@@ -19,12 +19,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
-import { Modal, View } from "react-native";
+import { View } from "react-native";
 import { db } from "../../common/database";
 import { MMKV } from "../../common/database/mmkv";
 import BiometricService from "../../services/biometrics";
 import {
-  ToastEvent,
+  ToastManager,
   eSendEvent,
   eSubscribeEvent
 } from "../../services/event-manager";
@@ -37,6 +37,7 @@ import { eLoginSessionExpired, eUserLoggedIn } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
+import BaseDialog from "../dialog/base-dialog";
 import { presentDialog } from "../dialog/functions";
 import SheetProvider from "../sheet-provider";
 import { Toast } from "../toast";
@@ -46,7 +47,6 @@ import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
-import BaseDialog from "../dialog/base-dialog";
 
 function getObfuscatedEmail(email) {
   if (!email) return "";
@@ -69,6 +69,9 @@ export const SessionExpired = () => {
       eSendEvent(eUserLoggedIn, true);
       setVisible(false);
       setFocused(false);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
     },
     true
   );
@@ -84,8 +87,11 @@ export const SessionExpired = () => {
       MMKV.clearStore();
       clearAllStores();
       setVisible(false);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
     } catch (e) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: e.message,
         type: "error",
         context: "local"
@@ -102,9 +108,9 @@ export const SessionExpired = () => {
 
   const open = React.useCallback(async () => {
     try {
-      let res = await db.user.tokenManager.getToken();
+      let res = await db.tokenManager.getToken();
       if (!res) throw new Error("no token found");
-      if (db.user.tokenManager._isTokenExpired(res))
+      if (db.tokenManager._isTokenExpired(res))
         throw new Error("token expired");
       Sync.run("global", false, true, async (complete) => {
         if (!complete) {
@@ -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}
@@ -166,7 +181,7 @@ export const SessionExpired = () => {
             }}
           >
             <IconButton
-              customStyle={{
+              style={{
                 width: 60,
                 height: 60
               }}

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

@@ -21,7 +21,7 @@ import React, { useRef, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
-import { ToastEvent } from "../../services/event-manager";
+import { ToastManager } from "../../services/event-manager";
 import { clearMessage, setEmailVerifyMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
 import { useThemeColors } from "@notesnook/theme";
@@ -52,7 +52,7 @@ export const Signup = ({ changeMode, trial }) => {
   const { width, height } = useWindowDimensions();
   const validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "All fields required",
         message: "Fill all the fields and try again",
         type: "error",
@@ -85,7 +85,7 @@ export const Signup = ({ changeMode, trial }) => {
       }
     } catch (e) {
       setLoading(false);
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Signup failed",
         message: e.message,
         type: "error",
@@ -111,7 +111,7 @@ export const Signup = ({ changeMode, trial }) => {
             paddingHorizontal: 20,
             backgroundColor: colors.secondary.background,
             marginBottom: 20,
-            borderBottomWidth: 1,
+            borderBottomWidth: 0.8,
             borderBottomColor: colors.primary.border,
             alignSelf: deviceMode !== "mobile" ? "center" : undefined,
             borderWidth: deviceMode !== "mobile" ? 1 : null,

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

@@ -24,7 +24,7 @@ import useTimer from "../../hooks/use-timer";
 import {
   eSendEvent,
   presentSheet,
-  ToastEvent
+  ToastManager
 } from "../../services/event-manager";
 import { useThemeColors } from "@notesnook/theme";
 import { eCloseSheet } from "../../utils/events";
@@ -32,7 +32,7 @@ import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
-import { PressableButton } from "../ui/pressable";
+import { Pressable } from "../ui/pressable";
 import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
@@ -138,7 +138,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
       setSending(false);
     } catch (e) {
       setSending(false);
-      ToastEvent.error(e, "Error sending 2FA Code", "local");
+      ToastManager.error(e, "Error sending 2FA Code", "local");
     }
   }, [currentMethod.method, mfaInfo.token, seconds, sending, start]);
 
@@ -151,7 +151,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
         }}
       >
         <IconButton
-          customStyle={{
+          style={{
             width: 70,
             height: 70
           }}
@@ -183,7 +183,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
         {currentMethod.method === "sms" || currentMethod.method === "email" ? (
           <Button
             onPress={onSendCode}
-            type={seconds ? "gray" : "transparent"}
+            type={seconds ? "plain" : "transparent"}
             title={
               sending
                 ? ""
@@ -247,7 +247,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
 
             <Button
               title={secondaryMethodsText[currentMethod.method]}
-              type="gray"
+              type="plain"
               onPress={onRequestSecondaryMethod}
               height={30}
             />
@@ -255,7 +255,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
         ) : (
           <>
             {getMethods().map((item) => (
-              <PressableButton
+              <Pressable
                 key={item.title}
                 onPress={() => {
                   setCurrentMethod({
@@ -263,7 +263,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                     isPrimary: false
                   });
                 }}
-                customStyle={{
+                style={{
                   paddingHorizontal: 12,
                   paddingVertical: 12,
                   marginTop: 0,
@@ -275,8 +275,8 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 }}
               >
                 <IconButton
-                  type="grayAccent"
-                  customStyle={{
+                  type="secondaryAccented"
+                  style={{
                     width: 40,
                     height: 40,
                     marginRight: 10
@@ -292,7 +292,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 >
                   <Paragraph size={SIZE.md}>{item.title}</Paragraph>
                 </View>
-              </PressableButton>
+              </Pressable>
             ))}
           </>
         )}

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

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useRef, useState } from "react";
 import { db } from "../../common/database";
-import { eSendEvent, ToastEvent } from "../../services/event-manager";
+import { eSendEvent, ToastManager } from "../../services/event-manager";
 import { clearMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
@@ -48,7 +48,7 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
       (!password.current && step === LoginSteps.passwordAuth) ||
       (!email.current && step === LoginSteps.emailAuth)
     ) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "All fields required",
         message: "Fill all the fields and try again",
         type: "error",
@@ -121,7 +121,7 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
   const finishWithError = async (e) => {
     if (e.message === "invalid_grant") setStep(LoginSteps.emailAuth);
     setLoading(false);
-    ToastEvent.show({
+    ToastManager.show({
       heading: "Login failed",
       message: e.message,
       type: "error",
@@ -135,7 +135,7 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
     PremiumService.setPremiumStatus();
     setUser(user);
     clearMessage();
-    ToastEvent.show({
+    ToastManager.show({
       heading: "Login successful",
       message: `Logged in as ${user.email}`,
       type: "success",

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, {
@@ -34,12 +35,13 @@ import { useSettingStore } from "../../stores/use-setting-store";
 import { getElevationStyle } from "../../utils/elevation";
 import { SIZE, normalize } from "../../utils/size";
 import NativeTooltip from "../../utils/tooltip";
-import { PressableButton } from "../ui/pressable";
+import { Pressable } from "../ui/pressable";
 
-interface FloatingButton {
-  title?: string;
+interface FloatingButtonProps {
+  title: string;
   onPress: () => void;
   color?: string;
+  shouldShow?: boolean;
   alwaysVisible?: boolean;
 }
 
@@ -48,11 +50,12 @@ const FloatingButton = ({
   onPress,
   color,
   alwaysVisible = false
-}: FloatingButton) => {
+}: FloatingButtonProps) => {
   const { colors } = useThemeColors();
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
   const translate = useSharedValue(0);
+  const route = useRoute();
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -115,11 +118,11 @@ const FloatingButton = ({
         animatedStyle
       ]}
     >
-      <PressableButton
+      <Pressable
         testID={notesnook.buttons.add}
         type="accent"
-        accentColor={colors.static[color as keyof typeof colors.static]}
-        customStyle={{
+        accentColor={color}
+        style={{
           ...getElevationStyle(5),
           borderRadius: 100
         }}
@@ -139,12 +142,18 @@ 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}
           />
         </View>
-      </PressableButton>
+      </Pressable>
     </Animated.View>
   );
 };

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

@@ -17,41 +17,49 @@ 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, { PropsWithChildren } from "react";
-import { KeyboardAvoidingView, Platform } from "react-native";
+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 useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { Header } from "../header";
-import SelectionHeader from "../selection-header";
+import useKeyboard from "../../hooks/use-keyboard";
+import { useThemeColors } from "@notesnook/theme";
 
 export const Container = ({ children }: PropsWithChildren) => {
-  const floating = useIsFloatingKeyboard();
-  const introCompleted = useSettingStore(
-    (state) => state.settings.introCompleted
-  );
+  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);
+      windowHeightRef.current = windowHeight;
+    }
+  }, [windowHeight]);
 
   return (
-    <KeyboardAvoidingView
-      behavior="padding"
-      enabled={Platform.OS === "ios" && !floating}
+    <View
       style={{
-        flex: 1,
         overflow: "hidden",
         paddingTop: Platform.OS === "android" ? 0 : insets.top,
-        paddingBottom: Platform.OS === "android" ? 0 : insets.bottom
+        paddingBottom: Platform.OS === "android" ? 0 : insets.bottom,
+        height: height || "100%",
+        width: "100%",
+        backgroundColor: colors.primary.background
+      }}
+      onLayout={(event) => {
+        const height = event.nativeEvent.layout.height;
+        clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+          if (!keyboard.keyboardShown) {
+            setHeight(height);
+          }
+        }, 500);
       }}
     >
-      {!introCompleted ? null : (
-        <>
-          <SelectionHeader />
-          <Header />
-        </>
-      )}
-
       {children}
-    </KeyboardAvoidingView>
+    </View>
   );
 };
 

apps/mobile/app/components/delay-layout/index.tsx

@@ -44,7 +44,7 @@ export default function DelayLayout({
 }: IDelayLayoutProps) {
   const { colors } = useThemeColors();
   const loading = useDelayLayout(
-    !props.delay || props.delay < 300 ? 300 : props.delay
+    !props.delay || props.delay < 300 ? 0 : props.delay
   );
   const Placeholder = placeholder[props.type || "default"];
 

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

@@ -17,15 +17,15 @@ 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 { useNoteStore } from "../../stores/use-notes-store";
 import { useThemeColors } from "@notesnook/theme";
+import React from "react";
 import { AnnouncementDialog } from "../announcements";
 import AuthModal from "../auth/auth-modal";
 import { SessionExpired } from "../auth/session-expired";
 import { Dialog } from "../dialog";
-import { AddTopicDialog } from "../dialogs/add-topic";
+import JumpToSectionDialog from "../dialogs/jump-to-section";
 import { LoadingDialog } from "../dialogs/loading";
+import PDFPreview from "../dialogs/pdf-preview";
 import ResultDialog from "../dialogs/result";
 import { VaultDialog } from "../dialogs/vault";
 import ImagePreview from "../image-preview";
@@ -36,17 +36,16 @@ import SheetProvider from "../sheet-provider";
 import RateAppSheet from "../sheets/rate-app";
 import RecoveryKeySheet from "../sheets/recovery-key";
 import RestoreDataSheet from "../sheets/restore-data";
-import PDFPreview from "../dialogs/pdf-preview";
+import { AppLockPassword } from "../dialogs/applock-password";
 
 const DialogProvider = () => {
   const { colors } = useThemeColors();
-  const loading = useNoteStore((state) => state.loading);
 
   return (
     <>
+      <AppLockPassword />
       <LoadingDialog />
       <Dialog context="global" />
-      <AddTopicDialog colors={colors} />
       <PremiumDialog colors={colors} />
       <AuthModal colors={colors} />
       <MergeConflicts />
@@ -58,10 +57,11 @@ const DialogProvider = () => {
       <VaultDialog colors={colors} />
       <RateAppSheet />
       <ImagePreview />
-      {loading ? null : <Expiring />}
+      <Expiring />
       <AnnouncementDialog />
       <SessionExpired />
       <PDFPreview />
+      <JumpToSectionDialog />
     </>
   );
 };

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

@@ -21,11 +21,9 @@ import { eSendEvent } from "../../services/event-manager";
 import {
   eCloseActionSheet,
   eCloseAddNotebookDialog,
-  eCloseAddTopicDialog,
   eCloseMoveNoteDialog,
   eOpenActionSheet,
   eOpenAddNotebookDialog,
-  eOpenAddTopicDialog,
   eOpenMoveNoteDialog
 } from "../../utils/events";
 
@@ -52,9 +50,3 @@ export const AddNotebookEvent = (notebook) => {
 export const HideAddNotebookEvent = (notebook) => {
   eSendEvent(eCloseAddNotebookDialog, notebook);
 };
-export const AddTopicEvent = (topic) => {
-  eSendEvent(eOpenAddTopicDialog, topic);
-};
-export const HideAddTopicEvent = (notebook) => {
-  eSendEvent(eCloseAddTopicDialog, notebook);
-};

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

@@ -17,8 +17,9 @@ 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, { useEffect, useRef, useState } from "react";
+import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 import {
+  ColorValue,
   KeyboardAvoidingView,
   Modal,
   Platform,
@@ -35,6 +36,25 @@ import SettingsService from "../../services/settings";
 import { useUserStore } from "../../stores/use-user-store";
 import { useAppState } from "../../hooks/use-app-state";
 
+export interface BaseDialogProps extends PropsWithChildren {
+  animation?: "fade" | "none" | "slide" | undefined;
+  visible: boolean;
+  onRequestClose?: () => void;
+  onShow?: () => void;
+  premium?: boolean;
+  statusBarTranslucent?: boolean;
+  transparent?: boolean;
+  centered?: boolean;
+  bottom?: boolean;
+  background?: string | ColorValue;
+  animated?: boolean;
+  bounce?: boolean;
+  closeOnTouch?: boolean;
+  useSafeArea?: boolean;
+  avoidKeyboardResize?: boolean;
+  enableSheetKeyboardHandler?: boolean;
+}
+
 const BaseDialog = ({
   visible,
   onRequestClose,
@@ -46,14 +66,14 @@ const BaseDialog = ({
   transparent,
   centered = true,
   bottom = false,
-  background = null,
   animated = true,
   bounce = true,
   closeOnTouch = true,
   useSafeArea = true,
   avoidKeyboardResize = false,
-  enableSheetKeyboardHandler = false
-}) => {
+  enableSheetKeyboardHandler,
+  background
+}: BaseDialogProps) => {
   const floating = useIsFloatingKeyboard();
   const appState = useAppState();
   const lockEvents = useRef(false);
@@ -67,7 +87,8 @@ const BaseDialog = ({
 
   useEffect(() => {
     if (useUserStore.getState().disableAppLockRequests) return;
-    if (SettingsService.get().appLockMode === "background") {
+
+    if (SettingsService.canLockAppInBackground()) {
       if (appState === "background") {
         setIntervalVisible(false);
         if (useUserStore.getState().appLocked) {
@@ -148,7 +169,7 @@ const BaseDialog = ({
               ]}
             >
               <TouchableOpacity
-                onPress={closeOnTouch ? onRequestClose : null}
+                onPress={closeOnTouch ? onRequestClose : undefined}
                 style={styles.overlayButton}
               />
               {premium}

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

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

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

@@ -18,12 +18,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { View } from "react-native";
+import { View, ViewProps } from "react-native";
 import { DDS } from "../../services/device-detection";
 import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../utils/elevation";
+import { getContainerBorder } from "../../utils/colors";
 
-const DialogContainer = ({ width, height, ...restProps }) => {
+const DialogContainer = ({
+  width,
+  height,
+  style,
+  ...restProps
+}: ViewProps & {
+  width?: any;
+  height?: any;
+}) => {
   const { colors } = useThemeColors();
 
   return (
@@ -35,7 +44,8 @@ const DialogContainer = ({ width, height, ...restProps }) => {
         maxHeight: height || 450,
         borderRadius: 10,
         backgroundColor: colors.primary.background,
-        paddingTop: 12
+        paddingTop: 12,
+        ...getContainerBorder(colors.secondary.background, 0.8, 0.05)
       }}
     />
   );

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

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

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

@@ -25,12 +25,12 @@ type DialogInfo = {
   paragraph?: string;
   positiveText?: string;
   negativeText?: string;
-  positivePress?: (value: unknown) => void;
+  positivePress?: (value: any) => void;
   onClose?: () => void;
   positiveType?:
     | "transparent"
-    | "gray"
-    | "grayBg"
+    | "plain"
+    | "secondary"
     | "accent"
     | "inverted"
     | "shade"
@@ -41,7 +41,9 @@ type DialogInfo = {
   input: boolean;
   inputPlaceholder: string;
   defaultValue: string;
-  context: "global" | "local";
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  context: "global" | "local" | (string & {});
+  secureTextEntry?: boolean;
 };
 
 export function presentDialog(data: Partial<DialogInfo>): void {

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

@@ -36,11 +36,15 @@ import DialogButtons from "./dialog-buttons";
 import DialogHeader from "./dialog-header";
 import { useCallback } from "react";
 import { Button } from "../ui/button";
+import { getContainerBorder } from "../../utils/colors";
 
 export const Dialog = ({ context = "global" }) => {
   const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
-  const [inputValue, setInputValue] = useState(null);
+  const [checked, setChecked] = useState(false);
+  const values = useRef({
+    inputValue: undefined
+  });
   const inputRef = useRef();
   const [dialogInfo, setDialogInfo] = useState({
     title: "",
@@ -62,21 +66,12 @@ export const Dialog = ({ context = "global" }) => {
     }
   });
 
-  useEffect(() => {
-    eSubscribeEvent(eOpenSimpleDialog, show);
-    eSubscribeEvent(eCloseSimpleDialog, hide);
-
-    return () => {
-      eUnSubscribeEvent(eOpenSimpleDialog, show);
-      eUnSubscribeEvent(eCloseSimpleDialog, hide);
-    };
-  }, [show]);
-
   const onPressPositive = async () => {
     if (dialogInfo.positivePress) {
       inputRef.current?.blur();
       let result = await dialogInfo.positivePress(
-        inputValue || dialogInfo.defaultValue
+        values.current.inputValue || dialogInfo.defaultValue,
+        checked
       );
       if (result === false) {
         return;
@@ -91,14 +86,26 @@ 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]
   );
 
+  useEffect(() => {
+    eSubscribeEvent(eOpenSimpleDialog, show);
+    eSubscribeEvent(eCloseSimpleDialog, hide);
+
+    return () => {
+      eUnSubscribeEvent(eOpenSimpleDialog, show);
+      eUnSubscribeEvent(eCloseSimpleDialog, hide);
+    };
+  }, [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 : "gray"}
+              type={checked ? dialogInfo.check.type || "selected" : "plain"}
             />
           </>
         ) : null}

apps/mobile/app/components/dialogs/add-topic/index.js

@@ -1,190 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import React, { createRef } from "react";
-import { View } from "react-native";
-
-import { useMenuStore } from "../../../stores/use-menu-store";
-import {
-  eSendEvent,
-  eSubscribeEvent,
-  eUnSubscribeEvent,
-  ToastEvent
-} from "../../../services/event-manager";
-import Navigation from "../../../services/navigation";
-import { db } from "../../../common/database";
-import {
-  eCloseAddTopicDialog,
-  eOnTopicSheetUpdate,
-  eOpenAddTopicDialog
-} from "../../../utils/events";
-import { sleep } from "../../../utils/time";
-import BaseDialog from "../../dialog/base-dialog";
-import DialogButtons from "../../dialog/dialog-buttons";
-import DialogContainer from "../../dialog/dialog-container";
-import DialogHeader from "../../dialog/dialog-header";
-import Input from "../../ui/input";
-import Seperator from "../../ui/seperator";
-import { Toast } from "../../toast";
-import { useRelationStore } from "../../../stores/use-relation-store";
-
-export class AddTopicDialog extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      visible: false,
-      titleFocused: false,
-      loading: false
-    };
-
-    this.ref = createRef();
-    this.title;
-    this.titleRef = createRef();
-    this.notebook = null;
-    this.toEdit = null;
-  }
-
-  addNewTopic = async () => {
-    try {
-      if (!this.title || this.title?.trim() === "") {
-        ToastEvent.show({
-          heading: "Topic title is required",
-          type: "error",
-          context: "local"
-        });
-        return;
-      }
-
-      if (!this.toEdit) {
-        await db.notebooks.notebook(this.notebook.id).topics.add(this.title);
-      } else {
-        let topic = this.toEdit;
-        topic.title = this.title;
-
-        await db.notebooks.notebook(topic.notebookId).topics.add(topic);
-      }
-      this.close();
-      setTimeout(() => {
-        Navigation.queueRoutesForUpdate();
-        useMenuStore.getState().setMenuPins();
-      });
-      eSendEvent(eOnTopicSheetUpdate);
-      useRelationStore.getState().update();
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  componentDidMount() {
-    eSubscribeEvent(eOpenAddTopicDialog, this.open);
-    eSubscribeEvent(eCloseAddTopicDialog, this.close);
-  }
-  componentWillUnmount() {
-    eUnSubscribeEvent(eOpenAddTopicDialog, this.open);
-    eUnSubscribeEvent(eCloseAddTopicDialog, this.close);
-  }
-
-  open = async ({ notebookId, toEdit }) => {
-    let id = notebookId;
-    if (id) {
-      this.notebook = await db.notebooks.notebook(id).data;
-    }
-    this.toEdit = toEdit;
-
-    if (this.toEdit) {
-      this.title = this.toEdit.title;
-    }
-
-    this.setState({
-      visible: true
-    });
-  };
-  close = () => {
-    this.title = null;
-    this.notebook = null;
-    this.toEdit = null;
-    this.setState({
-      visible: false
-    });
-  };
-
-  render() {
-    const { visible } = this.state;
-    if (!visible) return null;
-    return (
-      <BaseDialog
-        onShow={async () => {
-          if (this.toEdit) {
-            this.titleRef.current?.setNativeProps({
-              text: this.toEdit.title
-            });
-          }
-
-          this.ref.current?.animateNextTransition();
-          await sleep(300);
-          this.titleRef.current?.focus();
-        }}
-        bounce={false}
-        statusBarTranslucent={false}
-        visible={true}
-        onRequestClose={this.close}
-      >
-        <DialogContainer>
-          <DialogHeader
-            icon="book-outline"
-            title={this.toEdit ? "Edit topic" : "New topic"}
-            paragraph={
-              this.toEdit
-                ? "Edit title of the topic"
-                : "Add a new topic in " + this.notebook.title
-            }
-            padding={12}
-          />
-          <Seperator half />
-          <View
-            style={{
-              paddingHorizontal: 12,
-              zIndex: 10
-            }}
-          >
-            <Input
-              fwdRef={this.titleRef}
-              testID="input-title"
-              onChangeText={(value) => {
-                this.title = value;
-              }}
-              blurOnSubmit={false}
-              placeholder="Enter title"
-              onSubmit={() => this.addNewTopic()}
-              returnKeyLabel="Done"
-              returnKeyType="done"
-            />
-          </View>
-
-          <DialogButtons
-            positiveTitle={this.toEdit ? "Save" : "Add"}
-            onPressNegative={() => this.close()}
-            onPressPositive={() => this.addNewTopic()}
-          />
-        </DialogContainer>
-        <Toast context="local" />
-      </BaseDialog>
-    );
-  }
-}

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

@@ -0,0 +1,360 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import { useThemeColors } from "@notesnook/theme";
+import React, { useEffect, useRef, useState } from "react";
+import { TextInput, View } from "react-native";
+import {
+  clearAppLockVerificationCipher,
+  setAppLockVerificationCipher,
+  validateAppLockPassword
+} from "../../../common/database/encryption";
+import BiometicService from "../../../services/biometrics";
+import { DDS } from "../../../services/device-detection";
+import {
+  ToastManager,
+  eSendEvent,
+  eSubscribeEvent
+} from "../../../services/event-manager";
+import SettingsService from "../../../services/settings";
+import { useSettingStore } from "../../../stores/use-setting-store";
+import { getElevationStyle } from "../../../utils/elevation";
+import {
+  eCloseAppLocKPasswordDailog,
+  eOpenAppLockPasswordDialog
+} 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 DialogHeader from "../../dialog/dialog-header";
+import { Toast } from "../../toast";
+import { IconButton } from "../../ui/icon-button";
+import Input from "../../ui/input";
+import Seperator from "../../ui/seperator";
+
+export const AppLockPassword = () => {
+  const { colors } = useThemeColors();
+  const [mode, setMode] = useState<"create" | "change" | "remove">("create");
+  const [keyboardType, setKeyboardType] = useState<"pin" | "password">(
+    useSettingStore.getState().settings.applockKeyboardType === "default"
+      ? "password"
+      : "pin"
+  );
+  const [visible, setVisible] = useState(false);
+  const currentPasswordInputRef = useRef<TextInput>(null);
+  const passwordInputRef = useRef<TextInput>(null);
+  const confirmPasswordInputRef = useRef<TextInput>(null);
+  const values = useRef<{
+    currentPassword?: string;
+    password?: string;
+    confirmPassword?: string;
+  }>({});
+  const [secureTextEntry, setSecureTextEntry] = useState(true);
+
+  useEffect(() => {
+    const subs = [
+      eSubscribeEvent(
+        eOpenAppLockPasswordDialog,
+        (mode: "create" | "change" | "remove") => {
+          setMode(mode);
+          setVisible(true);
+        }
+      ),
+      eSubscribeEvent(eCloseAppLocKPasswordDailog, () => {
+        values.current = {};
+        setVisible(false);
+      })
+    ];
+    return () => {
+      subs.forEach((sub) => sub?.unsubscribe());
+    };
+  }, []);
+
+  const close = () => {
+    values.current = {};
+    setVisible(false);
+  };
+
+  return !visible ? null : (
+    <BaseDialog
+      onShow={async () => {
+        await sleep(100);
+        if (mode !== "change") {
+          passwordInputRef.current?.focus();
+        } else {
+          currentPasswordInputRef.current?.focus();
+        }
+      }}
+      statusBarTranslucent={false}
+      onRequestClose={close}
+      visible={visible}
+    >
+      <View
+        style={{
+          ...getElevationStyle(10),
+          width: DDS.isTab ? 350 : "85%",
+          borderRadius: 10,
+          backgroundColor: colors.primary.background,
+          paddingTop: 12
+        }}
+      >
+        <DialogHeader
+          title={
+            mode === "change"
+              ? `Change app lock ${keyboardType}`
+              : mode === "remove"
+              ? `Remove app lock ${keyboardType}`
+              : `Set up app lock ${keyboardType}`
+          }
+          paragraph={
+            mode === "change"
+              ? `Change app lock ${keyboardType}`
+              : mode === "remove"
+              ? `Remove app lock ${keyboardType}`
+              : `Set up a custom app lock ${keyboardType} to unlock the app`
+          }
+          icon="shield"
+          padding={12}
+        />
+        <Seperator half />
+
+        <View
+          style={{
+            paddingHorizontal: 12
+          }}
+        >
+          {mode === "change" ? (
+            <Input
+              fwdRef={currentPasswordInputRef}
+              autoCapitalize="none"
+              onChangeText={(value) => {
+                values.current.currentPassword = value;
+              }}
+              onSubmit={() => {
+                passwordInputRef.current?.focus();
+              }}
+              defaultValue={values.current.currentPassword}
+              autoComplete="password"
+              returnKeyLabel="Next"
+              keyboardType={keyboardType === "pin" ? "number-pad" : "default"}
+              returnKeyType="next"
+              secureTextEntry={secureTextEntry}
+              placeholder={`Current ${keyboardType}`}
+            />
+          ) : null}
+
+          <Input
+            fwdRef={passwordInputRef}
+            autoCapitalize="none"
+            onChangeText={(value) => {
+              values.current.password = value;
+            }}
+            onSubmit={() => {
+              confirmPasswordInputRef.current?.focus();
+            }}
+            defaultValue={values.current.password}
+            keyboardType={keyboardType === "pin" ? "number-pad" : "default"}
+            autoComplete="password"
+            returnKeyLabel={mode !== "remove" ? "Next" : "Remove"}
+            returnKeyType={mode !== "remove" ? "next" : "done"}
+            secureTextEntry={secureTextEntry}
+            buttonLeft={
+              <IconButton
+                name={keyboardType === "password" ? "numeric" : "keyboard"}
+                onPress={() => {
+                  setKeyboardType(
+                    keyboardType === "password" ? "pin" : "password"
+                  );
+                  setSecureTextEntry(false);
+                  setImmediate(() => {
+                    setSecureTextEntry(true);
+                  });
+                }}
+                style={{
+                  width: 25,
+                  height: 25,
+                  marginRight: 5
+                }}
+                size={SIZE.lg}
+              />
+            }
+            placeholder={
+              mode === "change"
+                ? `New ${keyboardType}`
+                : `${keyboardType === "pin" ? "Pin" : "Password"}`
+            }
+          />
+
+          {mode !== "remove" ? (
+            <Input
+              fwdRef={confirmPasswordInputRef}
+              autoCapitalize="none"
+              onChangeText={(value) => {
+                values.current.confirmPassword = value;
+              }}
+              onSubmit={() => {
+                confirmPasswordInputRef.current?.focus();
+              }}
+              defaultValue={values.current.confirmPassword}
+              keyboardType={keyboardType === "pin" ? "number-pad" : "default"}
+              customValidator={() => values.current.password || ""}
+              validationType="confirmPassword"
+              autoComplete="password"
+              returnKeyLabel="Done"
+              returnKeyType="done"
+              secureTextEntry={secureTextEntry}
+              placeholder={`Confirm ${keyboardType}`}
+            />
+          ) : null}
+        </View>
+
+        <DialogButtons
+          onPressNegative={close}
+          onPressPositive={async () => {
+            if (mode === "create") {
+              if (!values.current.password || !values.current.confirmPassword) {
+                ToastManager.error(
+                  new Error("All inputs are required"),
+                  undefined,
+                  "local"
+                );
+                return;
+              }
+
+              if (values.current.password !== values.current.confirmPassword) {
+                ToastManager.error(
+                  new Error(
+                    `${
+                      keyboardType === "pin" ? "Pin" : "Password"
+                    } does not match`
+                  ),
+                  undefined,
+                  "local"
+                );
+                return;
+              }
+              await setAppLockVerificationCipher(values.current.password);
+              SettingsService.setProperty("appLockHasPasswordSecurity", true);
+            } else if (mode === "change") {
+              if (
+                !values.current.currentPassword ||
+                !values.current.password ||
+                !values.current.confirmPassword
+              ) {
+                ToastManager.error(
+                  new Error("All inputs are required"),
+                  undefined,
+                  "local"
+                );
+                return;
+              }
+
+              if (values.current.password !== values.current.confirmPassword) {
+                ToastManager.error(
+                  new Error(
+                    `${
+                      keyboardType === "pin" ? "Pin" : "Password"
+                    } does not match`
+                  ),
+                  undefined,
+                  "local"
+                );
+                return;
+              }
+
+              const isCurrentPasswordCorrect = await validateAppLockPassword(
+                values.current.currentPassword
+              );
+
+              if (!isCurrentPasswordCorrect) {
+                ToastManager.error(
+                  new Error(
+                    `${keyboardType === "pin" ? "Pin" : "Password"} incorrect`
+                  ),
+                  undefined,
+                  "local"
+                );
+                return;
+              }
+
+              SettingsService.setProperty("appLockHasPasswordSecurity", true);
+              await setAppLockVerificationCipher(values.current.password);
+            } else if (mode === "remove") {
+              if (!values.current.password) {
+                ToastManager.error(
+                  new Error("All inputs are required"),
+                  undefined,
+                  "local"
+                );
+                return;
+              }
+
+              const isCurrentPasswordCorrect = await validateAppLockPassword(
+                values.current.password
+              );
+
+              if (!isCurrentPasswordCorrect) {
+                ToastManager.error(
+                  new Error(
+                    `${keyboardType === "pin" ? "Pin" : "Password"} incorrect`
+                  ),
+                  undefined,
+                  "local"
+                );
+                return;
+              }
+              clearAppLockVerificationCipher();
+              SettingsService.setProperty("appLockHasPasswordSecurity", false);
+
+              if (
+                !(await BiometicService.isBiometryAvailable()) ||
+                SettingsService.getProperty("biometricsAuthEnabled") === false
+              ) {
+                SettingsService.setProperty("appLockEnabled", false);
+                SettingsService.setPrivacyScreen(SettingsService.get());
+                ToastManager.show({
+                  message: "App lock disabled",
+                  type: "success"
+                });
+              }
+            }
+
+            SettingsService.setProperty(
+              "applockKeyboardType",
+              keyboardType === "password" ? "default" : "numeric"
+            );
+
+            close();
+          }}
+          positiveTitle="Save"
+          negativeTitle="Cancel"
+          positiveType="transparent"
+          loading={false}
+          doneText=""
+        />
+      </View>
+
+      <Toast context="local" />
+    </BaseDialog>
+  );
+};
+
+AppLockPassword.present = (mode: "create" | "change" | "remove") => {
+  eSendEvent(eOpenAppLockPasswordDialog, mode);
+};

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

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

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

@@ -0,0 +1,199 @@
+/*
+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 { Color } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
+import React, { useRef, useState } from "react";
+import { TextInput, View } from "react-native";
+import ColorPickerWheel from "react-native-wheel-color-picker";
+import { db } from "../../../common/database";
+import { useStoredRef } from "../../../hooks/use-stored-ref";
+import { ToastManager } from "../../../services/event-manager";
+import { useMenuStore } from "../../../stores/use-menu-store";
+import { useRelationStore } from "../../../stores/use-relation-store";
+import { useSettingStore } from "../../../stores/use-setting-store";
+import BaseDialog from "../../dialog/base-dialog";
+import DialogContainer from "../../dialog/dialog-container";
+import { Toast } from "../../toast";
+import { Button } from "../../ui/button";
+import Input from "../../ui/input";
+import { Pressable } from "../../ui/pressable";
+
+const HEX_COLOR_REGEX_ALPHA =
+  /^#(?:(?:[\da-fA-F]{3}){1,2}|(?:[\da-fA-F]{4}){1,2})$/;
+
+const ColorPicker = ({
+  visible,
+  setVisible,
+  onColorAdded
+}: {
+  visible: boolean;
+  setVisible: (value: boolean) => void;
+  onColorAdded: (color: Color) => void;
+}) => {
+  const [selectedColor, setSelectedColor] = useState<string>();
+  const { colors } = useThemeColors();
+  const inputRef = useRef<TextInput>(null);
+  const title = useRef<string>();
+  const colorRef = useStoredRef("color-ref", "#f0f0f0");
+
+  return (
+    <BaseDialog
+      visible={visible}
+      onRequestClose={() => {
+        title.current = undefined;
+        setVisible(false);
+        useSettingStore.getState().setSheetKeyboardHandler(true);
+      }}
+      statusBarTranslucent={false}
+      centered
+    >
+      <Toast context="color-picker" />
+      <DialogContainer
+        style={{
+          paddingTop: 0,
+          maxHeight: 600
+        }}
+      >
+        <View>
+          <View
+            style={{
+              width: "100%",
+              height: 250,
+              backgroundColor: colors.primary.background,
+              borderRadius: 10
+            }}
+          >
+            <ColorPickerWheel
+              onColorChangeComplete={(color) => {
+                if (color === selectedColor) return;
+                colorRef.current = color;
+                setSelectedColor(color);
+                inputRef.current?.setNativeProps({
+                  placeholder: color,
+                  text: color
+                });
+              }}
+              useNativeLayout={true}
+              autoResetSlider={true}
+              color={colorRef.current}
+              sliderSize={30}
+              thumbSize={25}
+              shadeWheelThumb
+              shadeSliderThumb={true}
+              swatchesOnly={false}
+              swatches={false}
+              useNativeDriver={true}
+            />
+          </View>
+
+          <View
+            style={{
+              paddingHorizontal: 12
+            }}
+          >
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                paddingTop: 10,
+                columnGap: 10,
+                marginBottom: 10
+              }}
+            >
+              <Input
+                fwdRef={inputRef}
+                placeholder="#f0f0f0"
+                marginBottom={0}
+                onChangeText={(value) => {
+                  if (HEX_COLOR_REGEX_ALPHA.test(value)) {
+                    colorRef.current = value;
+                    setSelectedColor(value);
+                  }
+                }}
+                defaultValue={colorRef.current}
+              />
+              <Pressable
+                type="accent"
+                accentColor={selectedColor || colors.secondary.background}
+                style={{
+                  width: 45,
+                  height: 45,
+                  borderRadius: 100,
+                  justifyContent: "center",
+                  alignItems: "center"
+                }}
+              />
+            </View>
+
+            <Input
+              marginBottom={10}
+              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(
+                    new Error("Select a color"),
+                    undefined,
+                    "color-picker"
+                  );
+                if (!title.current)
+                  return ToastManager.error(
+                    new Error("Enter a title for the color")
+                  );
+                const exists = await db.colors.all.find((v) =>
+                  v.and([v(`colorCode`, "==", selectedColor)])
+                );
+                if (exists)
+                  return ToastManager.error(
+                    new Error(`Color #${selectedColor} already exists`)
+                  );
+                const id = await db.colors.add({
+                  title: title.current,
+                  colorCode: selectedColor
+                });
+                useRelationStore.getState().update();
+                useMenuStore.getState().setColorNotes();
+                setVisible(false);
+                const color = await db.colors.color(id);
+                if (color) {
+                  onColorAdded?.(color);
+                }
+              }}
+              type={selectedColor ? "secondaryAccented" : "secondary"}
+              width="100%"
+            />
+          </View>
+        </View>
+      </DialogContainer>
+    </BaseDialog>
+  );
+};
+
+export default ColorPicker;

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

@@ -17,15 +17,22 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useEffect, useState } from "react";
-import { ScrollView, View } from "react-native";
+import { GroupHeader, Item, VirtualizedGrouping } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
+import React, {
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { ActivityIndicator, FlatList, ScrollView, View } from "react-native";
 import { DDS } from "../../../services/device-detection";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../../services/event-manager";
 import { useMessageStore } from "../../../stores/use-message-store";
-import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../../utils/elevation";
 import {
   eCloseJumpToDialog,
@@ -34,29 +41,51 @@ import {
 } from "../../../utils/events";
 import { SIZE } from "../../../utils/size";
 import BaseDialog from "../../dialog/base-dialog";
-import { PressableButton } from "../../ui/pressable";
+import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
-import { useCallback } from "react";
 
-const offsets = [];
-let timeout = null;
-const JumpToSectionDialog = ({ scrollRef, data, type }) => {
+const JumpToSectionDialog = () => {
+  const scrollRef = useRef<RefObject<FlatList>>();
+  const [data, setData] = useState<VirtualizedGrouping<Item>>();
   const { colors } = useThemeColors();
   const notes = data;
   const [visible, setVisible] = useState(false);
   const [currentIndex, setCurrentIndex] = useState(0);
+  const currentScrollPosition = useRef(0);
+  const [loading, setLoading] = useState(false);
 
-  const onPress = (item) => {
-    let ind = notes.findIndex(
-      (i) => i.title === item.title && i.type === "header"
-    );
-    scrollRef.current?.scrollToIndex({
-      index: ind,
+  const [groups, setGroups] = useState<
+    {
+      index: number;
+      group: GroupHeader;
+    }[]
+  >();
+  const offsets = useRef<number[]>([]);
+
+  const onPress = (item: { index: number; group: GroupHeader }) => {
+    scrollRef.current?.current?.scrollToIndex({
+      index: item.index,
       animated: true
     });
     close();
   };
 
+  const open = useCallback(
+    ({
+      data,
+      ref
+    }: {
+      data: VirtualizedGrouping<Item>;
+      ref: RefObject<FlatList>;
+    }) => {
+      setLoading(true);
+      setData(data);
+      scrollRef.current = ref;
+      setVisible(true);
+    },
+    []
+  );
+
   useEffect(() => {
     eSubscribeEvent(eOpenJumpToDialog, open);
     eSubscribeEvent(eCloseJumpToDialog, close);
@@ -69,54 +98,46 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
     };
   }, [open]);
 
-  const onScroll = (data) => {
-    let y = data.y;
-    if (timeout) {
-      clearTimeout(timeout);
-      timeout = null;
-    }
-    timeout = setTimeout(() => {
-      let index = offsets.findIndex((o, i) => o <= y && offsets[i + 1] > y);
-      setCurrentIndex(index || 0);
-    }, 200);
+  const onScroll = (data: { x: number; y: number }) => {
+    currentScrollPosition.current = data.y;
   };
 
-  const open = useCallback(
-    (_type) => {
-      if (_type !== type) return;
-      setVisible(true);
-    },
-    [type]
-  );
-
   const close = () => {
     setVisible(false);
   };
 
-  useEffect(() => {
-    loadOffsets();
-  }, [loadOffsets, notes]);
-
-  const loadOffsets = useCallback(() => {
-    notes
-      .filter((i) => i.type === "header")
-      .map((item, index) => {
+  const loadGroupsAndOffsets = useCallback(() => {
+    notes?.groups?.().then((groups) => {
+      setGroups(groups);
+      offsets.current = [];
+      groups.map((item, index) => {
         let offset = 35 * index;
-        let ind = notes.findIndex(
-          (i) => i.title === item.title && i.type === "header"
-        );
-        let messageState = useMessageStore.getState().message;
-        let msgOffset = messageState?.visible ? 60 : 10;
-        ind = ind + 1;
-        ind = ind - (index + 1);
-        offset = offset + ind * 100 + msgOffset;
-        offsets.push(offset);
+        let groupIndex = item.index;
+        const messageState = useMessageStore.getState().message;
+        const msgOffset = messageState?.visible ? 60 : 10;
+
+        groupIndex = groupIndex + 1;
+        groupIndex = groupIndex - (index + 1);
+        offset = offset + groupIndex * 100 + msgOffset;
+        offsets.current.push(offset);
       });
+
+      const index = offsets.current?.findIndex((o, i) => {
+        return (
+          o <= currentScrollPosition.current + 100 &&
+          offsets.current[i + 1] - 100 > currentScrollPosition.current
+        );
+      });
+
+      setCurrentIndex(index < 0 ? 0 : index);
+      setLoading(false);
+    });
   }, [notes]);
+
   return !visible ? null : (
     <BaseDialog
       onShow={() => {
-        loadOffsets();
+        loadGroupsAndOffsets();
       }}
       onRequestClose={close}
       visible={true}
@@ -135,35 +156,42 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
           paddingTop: 30
         }}
       >
-        <ScrollView
-          style={{
-            maxHeight: "100%"
-          }}
-        >
-          <View
+        {loading ? (
+          <ActivityIndicator
+            size={SIZE.lg}
+            color={colors.primary.accent}
             style={{
-              flexDirection: "row",
-              flexWrap: "wrap",
-              alignSelf: "center",
-              justifyContent: "center",
-              paddingBottom: 20
+              marginBottom: 20
+            }}
+          />
+        ) : (
+          <ScrollView
+            style={{
+              maxHeight: "100%"
             }}
           >
-            {notes
-              .filter((i) => i.type === "header")
-              .map((item, index) => {
-                return item.title ? (
-                  <PressableButton
-                    key={item.title}
-                    onPress={() => onPress(item, index)}
-                    type={currentIndex === index ? "selected" : "transparent"}
-                    customStyle={{
+            <View
+              style={{
+                flexDirection: "row",
+                flexWrap: "wrap",
+                alignSelf: "center",
+                justifyContent: "center",
+                paddingBottom: 20
+              }}
+            >
+              {groups?.map((item, index) => {
+                return (
+                  <Pressable
+                    key={item.group.id}
+                    onPress={() => onPress(item)}
+                    type={currentIndex === index ? "accent" : "transparent"}
+                    style={{
                       minWidth: "20%",
                       width: null,
                       paddingHorizontal: 12,
                       margin: 5,
                       borderRadius: 100,
-                      height: 25,
+                      height: 30,
                       marginVertical: 10
                     }}
                   >
@@ -171,20 +199,21 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
                       size={SIZE.sm}
                       color={
                         currentIndex === index
-                          ? colors.selected.accent
-                          : colors.primary.accent
+                          ? colors.static.white
+                          : colors.primary.paragraph
                       }
                       style={{
                         textAlign: "center"
                       }}
                     >
-                      {item.title}
+                      {item.group.title}
                     </Paragraph>
-                  </PressableButton>
-                ) : null;
+                  </Pressable>
+                );
               })}
-          </View>
-        </ScrollView>
+            </View>
+          </ScrollView>
+        )}
       </View>
     </BaseDialog>
   );

apps/mobile/app/components/dialogs/pdf-preview/index.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, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Dimensions, TextInput, View } from "react-native";
 import {
   addOrientationListener,
@@ -85,7 +85,7 @@ const PDFPreview = () => {
     return () => {
       eUnSubscribeEvent("PDFPreview", open);
     };
-  }, []);
+  }, [open]);
 
   const onOrientationChange = (o) => {
     if (o.includes("LANDSCAPE")) {
@@ -102,23 +102,26 @@ const PDFPreview = () => {
     };
   }, []);
 
-  const open = async (attachment) => {
-    setVisible(true);
-    setLoading(true);
-    setTimeout(async () => {
-      setAttachment(attachment);
-      let hash = attachment.metadata.hash;
-      if (!hash) return;
-      const uri = await downloadAttachment(hash, false, {
-        silent: true,
-        cache: true
-      });
-      const path = `${cacheDir}/${uri}`;
-      snapshotValue.current = snapshot.current;
-      setPDFSource("file://" + path);
-      setLoading(false);
-    }, 100);
-  };
+  const open = useCallback(
+    async (attachment) => {
+      setVisible(true);
+      setLoading(true);
+      setTimeout(async () => {
+        setAttachment(attachment);
+        let hash = attachment.hash;
+        if (!hash) return;
+        const uri = await downloadAttachment(hash, false, {
+          silent: true,
+          cache: true
+        });
+        const path = `${cacheDir}/${uri}`;
+        snapshotValue.current = snapshot.current;
+        setPDFSource("file://" + path);
+        setLoading(false);
+      }, 100);
+    },
+    [snapshot]
+  );
 
   const close = () => {
     setPDFSource(null);
@@ -130,7 +133,7 @@ const PDFPreview = () => {
     if (error?.message === "Password required or incorrect password.") {
       await sleep(300);
       presentDialog({
-        context: attachment?.metadata?.hash,
+        context: attachment?.hash,
         input: true,
         inputPlaceholder: "Enter password",
         positiveText: "Unlock",
@@ -151,8 +154,8 @@ const PDFPreview = () => {
   return (
     visible && (
       <BaseDialog animation="fade" visible={true} onRequestClose={close}>
-        <SheetProvider context={attachment?.metadata?.hash} />
-        <Dialog context={attachment?.metadata?.hash} />
+        <SheetProvider context={attachment?.hash} />
+        <Dialog context={attachment?.hash} />
 
         <View
           style={{
@@ -208,7 +211,7 @@ const PDFPreview = () => {
                     color={colors.static.white}
                     name="arrow-left"
                     onPress={close}
-                    customStyle={{
+                    style={{
                       marginRight: 12
                     }}
                     size={SIZE.xxl}
@@ -261,7 +264,7 @@ const PDFPreview = () => {
                     color={colors.static.white}
                     name="download"
                     onPress={() => {
-                      downloadAttachment(attachment.metadata.hash, false);
+                      downloadAttachment(attachment.hash, false);
                     }}
                   />
                 </View>

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

@@ -23,28 +23,26 @@ 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 {
+  ToastManager,
   eSendEvent,
   eSubscribeEvent,
-  eUnSubscribeEvent,
-  ToastEvent
+  eUnSubscribeEvent
 } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
-import SearchService from "../../../services/search";
-import { convertNoteToText } from "../../../utils/note-to-text";
 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";
+import { convertNoteToText } from "../../../utils/note-to-text";
 import { sleep } from "../../../utils/time";
 import BaseDialog from "../../dialog/base-dialog";
 import DialogButtons from "../../dialog/dialog-buttons";
@@ -55,10 +53,6 @@ import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import Paragraph from "../../ui/typography/paragraph";
 
-let Keychain;
-const passInputRef = createRef();
-const confirmPassRef = createRef();
-const changePassInputRef = createRef();
 export class VaultDialog extends Component {
   constructor(props) {
     super(props);
@@ -86,8 +80,14 @@ export class VaultDialog extends Component {
       description: null,
       clearVault: false,
       deleteVault: false,
-      deleteAll: false
+      deleteAll: false,
+      noteLocked: false
     };
+
+    this.passInputRef = createRef();
+    this.confirmPassRef = createRef();
+    this.changePassInputRef = createRef();
+
     this.password = null;
     this.confirmPassword = null;
     this.newPassword = null;
@@ -99,7 +99,7 @@ export class VaultDialog extends Component {
       ? "Revoke Vault Fingerprint Unlock"
       : this.state.changePassword
       ? "Change Vault Password"
-      : this.state.note.locked
+      : this.state.noteLocked
       ? this.state.deleteNote
         ? "Delete note"
         : this.state.share
@@ -120,7 +120,7 @@ export class VaultDialog extends Component {
         ? "Setup a new password for the vault."
         : this.state.permanant
         ? "Enter password to remove note from vault."
-        : this.state.note.locked
+        : this.state.noteLocked
         ? this.state.deleteNote
           ? "Unlock note to delete it. If biometrics are not working, you can enter device pin to unlock vault."
           : this.state.share
@@ -148,9 +148,6 @@ export class VaultDialog extends Component {
    * @param {import('../../../services/event-manager').vaultType} data
    */
   open = async (data) => {
-    if (!Keychain) {
-      Keychain = require("react-native-keychain");
-    }
     let biometry = await BiometricService.isBiometryAvailable();
     let available = false;
     let fingerprint = await BiometricService.hasInternetCredentials("nn_vault");
@@ -177,7 +174,8 @@ export class VaultDialog extends Component {
       title: data.title,
       description: data.description,
       clearVault: data.clearVault,
-      deleteVault: data.deleteVault
+      deleteVault: data.deleteVault,
+      noteLocked: data.item && (await db.vaults.itemExists(data.item))
     });
 
     if (
@@ -199,7 +197,7 @@ export class VaultDialog extends Component {
 
   close = () => {
     if (this.state.loading) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: this.state.title,
         message: "Please wait and do not close the app.",
         type: "success",
@@ -212,7 +210,6 @@ export class VaultDialog extends Component {
 
     this.password = null;
     this.confirmPassword = null;
-    SearchService.updateAndSearch();
     this.setState({
       visible: false,
       note: {},
@@ -236,7 +233,7 @@ export class VaultDialog extends Component {
     if (this.state.loading) return;
 
     if (!this.password) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Password not entered",
         message: "Enter a password for the vault and try again.",
         type: "error",
@@ -244,20 +241,10 @@ export class VaultDialog extends Component {
       });
       return;
     }
-    if (this.password && this.password.length < 3) {
-      ToastEvent.show({
-        heading: "Password too short",
-        message: "Password must be longer than 3 characters.",
-        type: "error",
-        context: "local"
-      });
-
-      return;
-    }
 
     if (!this.state.novault) {
       if (this.password !== this.confirmPassword) {
-        ToastEvent.show({
+        ToastManager.show({
           heading: "Passwords do not match",
           type: "error",
           context: "local"
@@ -283,7 +270,7 @@ export class VaultDialog extends Component {
           if (this.state.biometricUnlock) {
             this._enrollFingerprint(this.newPassword);
           }
-          ToastEvent.show({
+          ToastManager.show({
             heading: "Vault password updated successfully",
             type: "success",
             context: "global"
@@ -295,17 +282,19 @@ export class VaultDialog extends Component {
             loading: false
           });
           if (e.message === db.vault.ERRORS.wrongPassword) {
-            ToastEvent.show({
+            ToastManager.show({
               heading: "Incorrect password",
               message: "Please enter the correct password and try again",
               type: "error",
               context: "local"
             });
+          } else {
+            ToastManager.error(e);
           }
         });
     } else if (this.state.locked) {
       if (!this.password || this.password.trim() === 0) {
-        ToastEvent.show({
+        ToastManager.show({
           heading: "Incorrect password",
           message: "Please enter the correct password and try again",
           type: "error",
@@ -316,7 +305,7 @@ export class VaultDialog extends Component {
         });
         return;
       }
-      if (this.state.note.locked) {
+      if (this.state.noteLocked) {
         await this._unlockNote();
       } else {
         db.vault
@@ -348,14 +337,33 @@ 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
         });
         this.close();
       } else {
-        ToastEvent.show({
+        ToastManager.show({
           heading: "Account password incorrect",
           message: "Please enter correct password for your account.",
           type: "error",
@@ -375,14 +383,29 @@ 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
       });
       this.close();
       eSendEvent("vaultUpdated");
     } catch (e) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Vault password incorrect",
         message: "Please enter correct password to clear vault.",
         type: "error",
@@ -396,7 +419,7 @@ export class VaultDialog extends Component {
 
   async _lockNote() {
     if (!this.password || this.password.trim() === 0) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Incorrect password",
         type: "error",
         context: "local"
@@ -404,11 +427,12 @@ 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();
-      ToastEvent.show({
+      ToastManager.show({
         message: "Note locked successfully",
         type: "error",
         context: "local"
@@ -421,7 +445,7 @@ export class VaultDialog extends Component {
 
   async _unlockNote() {
     if (!this.password || this.password.trim() === 0) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Incorrect password",
         message: "Please enter the correct password and try again",
         type: "error",
@@ -459,7 +483,7 @@ export class VaultDialog extends Component {
   async _deleteNote() {
     try {
       await db.vault.remove(this.state.note.id, this.password);
-      await deleteItems(this.state.note);
+      await deleteItems([this.state.note.id], "note");
       this.close();
     } catch (e) {
       this._takeErrorAction(e);
@@ -479,7 +503,7 @@ export class VaultDialog extends Component {
             loading: false
           });
           eSendEvent("vaultUpdated");
-          ToastEvent.show({
+          ToastManager.show({
             heading: "Biometric unlocking enabled!",
             message: "Now you can unlock notes in vault with biometrics.",
             type: "success",
@@ -488,7 +512,7 @@ export class VaultDialog extends Component {
           this.close();
         } catch (e) {
           this.close();
-          ToastEvent.show({
+          ToastManager.show({
             heading: "Incorrect password",
             message:
               "Please enter the correct vault password to enable biometrics.",
@@ -511,13 +535,11 @@ 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
       });
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Note added to vault",
         type: "success",
         context: "global"
@@ -525,7 +547,7 @@ export class VaultDialog extends Component {
       this.close();
     } else {
       eSendEvent("vaultUpdated");
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Vault created successfully",
         type: "success",
         context: "global"
@@ -538,11 +560,12 @@ export class VaultDialog extends Component {
     db.vault
       .remove(this.state.note.id, this.password)
       .then(() => {
-        ToastEvent.show({
+        ToastManager.show({
           heading: "Note permanently unlocked.",
           type: "success",
           context: "global"
         });
+        eSendEvent(eUpdateNoteInEditor, this.state.note, true);
         this.close();
       })
       .catch((e) => {
@@ -553,7 +576,9 @@ export class VaultDialog extends Component {
   _openInEditor(note) {
     this.close();
     InteractionManager.runAfterInteractions(async () => {
-      eSendEvent(eOnLoadNote, note);
+      eSendEvent(eOnLoadNote, {
+        item: note
+      });
       if (!DDS.isTab) {
         tabBarRef.current?.goToPage(1);
       }
@@ -562,7 +587,7 @@ export class VaultDialog extends Component {
 
   async _copyNote(note) {
     Clipboard.setString(await convertNoteToText(note));
-    ToastEvent.show({
+    ToastManager.show({
       heading: "Note copied",
       type: "success",
       message: "Note has been copied to clipboard!",
@@ -594,7 +619,7 @@ export class VaultDialog extends Component {
         visible: true
       });
       setTimeout(() => {
-        ToastEvent.show({
+        ToastManager.show({
           heading: "Incorrect password",
           type: "error",
           context: "local"
@@ -609,13 +634,13 @@ export class VaultDialog extends Component {
     try {
       await BiometricService.resetCredentials();
       eSendEvent("vaultUpdated");
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Biometric unlocking disabled!",
         type: "success",
         context: "global"
       });
     } catch (e) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Failed to disable Biometric unlocking.",
         message: e.message,
         type: "success",
@@ -667,7 +692,8 @@ export class VaultDialog extends Component {
       <BaseDialog
         onShow={async () => {
           await sleep(100);
-          passInputRef.current?.focus();
+
+          this.passInputRef.current?.focus();
         }}
         statusBarTranslucent={false}
         onRequestClose={this.close}
@@ -702,7 +728,7 @@ export class VaultDialog extends Component {
             !this.state.revokeFingerprintAccess ? (
               <>
                 <Input
-                  fwdRef={passInputRef}
+                  fwdRef={this.passInputRef}
                   editable={!loading}
                   autoCapitalize="none"
                   testID={notesnook.ids.dialogs.vault.pwd}
@@ -719,7 +745,7 @@ export class VaultDialog extends Component {
                   }
                   onSubmit={() => {
                     changePassword
-                      ? changePassInputRef.current?.focus()
+                      ? this.confirmPassRef.current?.focus()
                       : this.onPress;
                   }}
                   autoComplete="password"
@@ -771,7 +797,7 @@ export class VaultDialog extends Component {
               <>
                 <Seperator half />
                 <Input
-                  ref={changePassInputRef}
+                  ref={this.confirmPassRef}
                   editable={!loading}
                   testID={notesnook.ids.dialogs.vault.changePwd}
                   autoCapitalize="none"
@@ -791,7 +817,7 @@ export class VaultDialog extends Component {
             {!novault ? (
               <View>
                 <Input
-                  fwdRef={passInputRef}
+                  fwdRef={this.passInputRef}
                   autoCapitalize="none"
                   testID={notesnook.ids.dialogs.vault.pwd}
                   onChangeText={(value) => {
@@ -802,13 +828,13 @@ export class VaultDialog extends Component {
                   returnKeyType="next"
                   secureTextEntry
                   onSubmit={() => {
-                    confirmPassRef.current?.focus();
+                    this.confirmPassRef.current?.focus();
                   }}
                   placeholder="Password"
                 />
 
                 <Input
-                  fwdRef={confirmPassRef}
+                  fwdRef={this.confirmPassRef}
                   autoCapitalize="none"
                   testID={notesnook.ids.dialogs.vault.pwdAlt}
                   secureTextEntry
@@ -865,10 +891,10 @@ export class VaultDialog extends Component {
                 title="Biometric unlocking"
                 iconColor={
                   this.state.biometricUnlock
-                    ? colors.selected.icon
+                    ? colors.selected.accent
                     : colors.primary.icon
                 }
-                type={this.state.biometricUnlock ? "transparent" : "selected"}
+                type={this.state.biometricUnlock ? "transparent" : "plain"}
               />
             ) : null}
           </View>
@@ -891,7 +917,7 @@ export class VaultDialog extends Component {
                 ? "Revoke"
                 : changePassword
                 ? "Change"
-                : note.locked
+                : this.state.noteLocked
                 ? deleteNote
                   ? "Delete"
                   : share

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

@@ -17,42 +17,73 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { useThemeColors } from "@notesnook/theme";
 import React, { useCallback, useEffect, useState } from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
-import { SearchBar } from "../../screens/search/search-bar";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import useNavigationStore from "../../stores/use-navigation-store";
+import useNavigationStore, {
+  RouteName
+} from "../../stores/use-navigation-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
-import { useThemeColors } from "@notesnook/theme";
 import { eScrollEvent } from "../../utils/events";
 import { LeftMenus } from "./left-menus";
 import { RightMenus } from "./right-menus";
 import { Title } from "./title";
 
-const _Header = () => {
+type HeaderRightButton = {
+  title: string;
+  onPress: () => void;
+};
+
+export const Header = ({
+  renderedInRoute,
+  onLeftMenuButtonPress,
+  title,
+  titleHiddenOnRender,
+  headerRightButtons,
+  id,
+  accentColor,
+  isBeta,
+  canGoBack,
+  onPressDefaultRightButton,
+  hasSearch,
+  onSearch
+}: {
+  onLeftMenuButtonPress?: () => void;
+  renderedInRoute: RouteName;
+  id?: string;
+  title: string;
+  headerRightButtons?: HeaderRightButton[];
+  titleHiddenOnRender?: boolean;
+  accentColor?: string;
+  isBeta?: boolean;
+  canGoBack?: boolean;
+  onPressDefaultRightButton?: () => void;
+  hasSearch?: boolean;
+  onSearch?: () => void;
+}) => {
   const { colors } = useThemeColors();
   const insets = useGlobalSafeAreaInsets();
-  const [hide, setHide] = useState(true);
+  const [borderHidden, setBorderHidden] = useState(true);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
-  const currentScreen = useNavigationStore(
-    (state) => state.currentScreen?.name
-  );
+  const isFocused = useNavigationStore((state) => state.focusedRouteId === id);
 
   const onScroll = useCallback(
-    (data: { x: number; y: number }) => {
+    (data: { x: number; y: number; id?: string; route: string }) => {
+      if (data.route !== renderedInRoute || data.id !== id) return;
       if (data.y > 150) {
-        if (!hide) return;
-        setHide(false);
+        if (!borderHidden) return;
+        setBorderHidden(false);
       } else {
-        if (hide) return;
-        setHide(true);
+        if (borderHidden) return;
+        setBorderHidden(true);
       }
     },
-    [hide]
+    [borderHidden, id, renderedInRoute]
   );
 
   useEffect(() => {
@@ -60,9 +91,9 @@ const _Header = () => {
     return () => {
       eUnSubscribeEvent(eScrollEvent, onScroll);
     };
-  }, [hide, onScroll]);
+  }, [borderHidden, onScroll]);
 
-  return selectionMode ? null : (
+  return selectionMode && isFocused ? null : (
     <>
       <View
         style={[
@@ -72,29 +103,42 @@ const _Header = () => {
             backgroundColor: colors.primary.background,
             overflow: "hidden",
             borderBottomWidth: 1,
-            borderBottomColor: hide
+            borderBottomColor: borderHidden
               ? "transparent"
               : colors.secondary.background,
             justifyContent: "space-between"
           }
         ]}
       >
-        {currentScreen === "Search" ? (
-          <SearchBar />
-        ) : (
-          <>
-            <View style={styles.leftBtnContainer}>
-              <LeftMenus />
-              <Title />
-            </View>
-            <RightMenus />
-          </>
-        )}
+        <>
+          <View style={styles.leftBtnContainer}>
+            <LeftMenus
+              canGoBack={canGoBack}
+              onLeftButtonPress={onLeftMenuButtonPress}
+            />
+
+            <Title
+              isHiddenOnRender={titleHiddenOnRender}
+              renderedInRoute={renderedInRoute}
+              id={id}
+              accentColor={accentColor}
+              title={title}
+              isBeta={isBeta}
+            />
+          </View>
+          <RightMenus
+            renderedInRoute={renderedInRoute}
+            id={id}
+            headerRightButtons={headerRightButtons}
+            onPressDefaultRightButton={onPressDefaultRightButton}
+            search={hasSearch}
+            onSearch={onSearch}
+          />
+        </>
       </View>
     </>
   );
 };
-export const Header = React.memo(_Header, () => true);
 
 const styles = StyleSheet.create({
   container: {

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

@@ -17,23 +17,29 @@ 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 { notesnook } from "../../../e2e/test.ids";
 import { DDS } from "../../services/device-detection";
 import Navigation from "../../services/navigation";
-import useNavigationStore from "../../stores/use-navigation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { useThemeColors } from "@notesnook/theme";
 import { tabBarRef } from "../../utils/global-refs";
 import { IconButton } from "../ui/icon-button";
 
-export const LeftMenus = () => {
+export const LeftMenus = ({
+  canGoBack,
+  onLeftButtonPress
+}: {
+  canGoBack?: boolean;
+  onLeftButtonPress?: () => void;
+}) => {
   const { colors } = useThemeColors();
   const deviceMode = useSettingStore((state) => state.deviceMode);
-  const canGoBack = useNavigationStore((state) => state.canGoBack);
   const isTablet = deviceMode === "tablet";
 
-  const onLeftButtonPress = () => {
+  const _onLeftButtonPress = () => {
+    if (onLeftButtonPress) return onLeftButtonPress();
+
     if (!canGoBack) {
       if (tabBarRef.current?.isDrawerOpen()) {
         Navigation.closeDrawer();
@@ -48,27 +54,23 @@ export const LeftMenus = () => {
   return isTablet && !canGoBack ? null : (
     <IconButton
       testID={notesnook.ids.default.header.buttons.left}
-      customStyle={{
+      style={{
         justifyContent: "center",
         alignItems: "center",
         height: 40,
         width: 40,
         borderRadius: 100,
-        marginLeft: -5,
         marginRight: DDS.isLargeTablet() ? 10 : 7
       }}
       left={40}
       top={40}
       right={DDS.isLargeTablet() ? 10 : 10}
-      onPress={onLeftButtonPress}
+      onPress={_onLeftButtonPress}
       onLongPress={() => {
         Navigation.popToTop();
       }}
       name={canGoBack ? "arrow-left" : "menu"}
       color={colors.primary.paragraph}
-      iconStyle={{
-        marginLeft: canGoBack ? -5 : 0
-      }}
     />
   );
 };