mobile: fix android toolbar

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

.commitlintrc.js

@@ -10,7 +10,7 @@ const authors = readFileSync("AUTHORS", "utf-8");
 const isAuthor = authors.includes(`<${authorEmail}>`);
 
 const SCOPES = [
-  // for full list of scopes + details see: https://github.com/streetwriters/notesnook-private/blob/master/CONTRIBUTING.md#commit-guidelines
+  // for full list of scopes + details see: https://github.com/streetwriters/notesnook/blob/master/CONTRIBUTING.md#commit-guidelines
 
   "mobile",
   "web",
@@ -36,7 +36,8 @@ const SCOPES = [
   "global",
   "docs",
   "themebuilder",
-  "intl"
+  "intl",
+  "webclipper"
 ];
 
 module.exports = {

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

@@ -14,6 +14,8 @@ runs:
           apps/mobile/package-lock.json
           apps/desktop/package-lock.json
           apps/web/package-lock.json
+          apps/monograph/package-lock.json
+          apps/theme-builder/package-lock.json
           extensions/web-clipper/package-lock.json
           packages/core/package-lock.json
           packages/crypto/package-lock.json
@@ -24,3 +26,4 @@ runs:
           packages/logger/package-lock.json
           packages/streamable-fs/package-lock.json
           packages/theme/package-lock.json
+          packages/intl/package-lock.json

.github/workflows/android.e2e.yml

@@ -0,0 +1,100 @@
+name: e2e-android
+on: workflow_dispatch
+
+jobs:
+  e2e-android:
+    runs-on: ubuntu-latest
+    env:
+      API_LEVEL: 34
+      ARCH: x86_64
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Enable KVM
+        run: |
+          echo 'KERNEL=="kvm", GROUP="kvm", MODE="0666", OPTIONS+="static_node=kvm"' | sudo tee /etc/udev/rules.d/99-kvm4all.rules
+          sudo udevadm control --reload-rules
+          sudo udevadm trigger --name-match=kvm
+
+      - name: Free Disk Space
+        uses: jlumbroso/free-disk-space@main
+        with:
+          tool-cache: false
+          android: false
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Install node modules
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=mobile
+
+      - name: Setup Gradle
+        uses: gradle/actions/setup-gradle@v3
+        with:
+          gradle-version: wrapper
+          cache-read-only: false
+
+      - name: Use specific Java version for the builds
+        uses: joschi/setup-jdk@v2
+        with:
+          java-version: "17"
+          architecture: "x64"
+
+      - name: Install Detox CLI
+        run: npm install detox-cli --global
+
+      - name: Detox build
+        run: |
+          yarn build:android
+          ls apps/mobile/native/android/app/build/outputs/apk
+          ls apps/mobile/native/android/app/build/outputs/apk/release
+
+      - name: Get device name
+        id: device
+        run: |
+          AVD_NAME=$(node -p "require('./apps/mobile/native/.detoxrc.js').devices.emulator.device.avdName")
+          echo "AVD_NAME=$AVD_NAME" >> $GITHUB_OUTPUT
+
+      - name: AVD cache
+        uses: actions/cache@v4
+        id: avd-cache
+        with:
+          path: |
+            ~/.android/avd/*
+            ~/.android/adb*
+          key: ${{ steps.device.outputs.AVD_NAME }}
+
+      - name: create AVD and generate snapshot for caching
+        if: steps.avd-cache.outputs.cache-hit != 'true'
+        uses: reactivecircus/android-emulator-runner@v2
+        with:
+          api-level: ${{ env.API_LEVEL }}
+          arch: ${{ env.ARCH }}
+          avd-name: ${{ steps.device.outputs.AVD_NAME }}
+          force-avd-creation: false
+          emulator-options: -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none
+          disable-animations: true
+          script: echo "Generated AVD snapshot for caching."
+
+      - name: Detox test
+        uses: reactivecircus/android-emulator-runner@v2
+        with:
+          api-level: ${{ env.API_LEVEL }}
+          arch: ${{ env.ARCH }}
+          avd-name: ${{ steps.device.outputs.AVD_NAME }}
+          disable-animations: true
+          emulator-options: -no-snapshot-save -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none
+          force-avd-creation: false
+          script: yarn test:android --headless --record-logs failing --record-videos failing --take-screenshots failing
+
+      - name: Upload artifacts
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: detox-artifacts
+          path: artifacts
+          retention-days: 14

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

@@ -4,7 +4,7 @@ on: workflow_dispatch
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     timeout-minutes: 40
     env:
       CMAKE_C_COMPILER_LAUNCHER: ccache
@@ -22,7 +22,7 @@ jobs:
       - name: Use specific Java version for the builds
         uses: joschi/setup-jdk@v2
         with:
-          java-version: "11"
+          java-version: "17"
           architecture: "x64"
 
       - name: Install node modules
@@ -58,7 +58,7 @@ jobs:
           ccache -p
 
       - name: Cache gradle
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             ~/.gradle/caches
@@ -69,8 +69,6 @@ jobs:
         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
@@ -129,7 +127,7 @@ jobs:
           serviceAccountJsonPlainText: ${{ secrets.SERVICE_ACCOUNT_JSON }}
           packageName: com.streetwriters.notesnook
           releaseFiles: ${{steps.sign_app.outputs.signedReleaseFile}}
-          track: alpha
+          track: beta
           status: completed
           whatsNewDirectory: apps/mobile/native/android/releasenotes/
 
@@ -138,7 +136,7 @@ jobs:
         with:
           draft: true
           tag_name: ${{ steps.package-version.outputs.current-version}}-beta-android
-          name: Notesnook Android v${{ steps.package-version.outputs.current-version}} Beta
+          name: Notesnook Android v${{ steps.package-version.outputs.current-version}}
           repository: streetwriters/notesnook
           token: ${{ secrets.GITHUB_TOKEN }}
           files: |
@@ -146,6 +144,7 @@ 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
+            ${{steps.sign_app.outputs.signedReleaseFile}}
 
       - name: Upload sourcemaps
         uses: actions/upload-artifact@v4

.github/workflows/android.publish.yml

@@ -4,7 +4,7 @@ on: workflow_dispatch
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     timeout-minutes: 40
     env:
       CMAKE_C_COMPILER_LAUNCHER: ccache
@@ -58,7 +58,7 @@ jobs:
           ccache -p
 
       - name: Cache gradle
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             ~/.gradle/caches
@@ -69,8 +69,6 @@ jobs:
         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

.github/workflows/core.tests.yml

@@ -18,10 +18,10 @@ on:
 
 jobs:
   test:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache

.github/workflows/desktop.publish.yml

@@ -33,14 +33,22 @@ on:
         required: true
         default: true
         description: "Build for macOS?"
+      release-track:
+        type: choice
+        required: true
+        default: stable
+        description: "Select the release track"
+        options:
+          - stable
+          - beta
 
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
@@ -49,14 +57,30 @@ jobs:
         run: |
           npm ci --ignore-scripts --prefer-offline --no-audit
           npm run bootstrap -- --scope=web
+          npm run bootstrap -- --scope=desktop
+
+      - name: Install sqlite-better-trigram for all arch
+        run: |
+          npm i --cpu arm64 sqlite-better-trigram
+          npm i --cpu x64 sqlite-better-trigram
+        working-directory: ./apps/desktop
 
       - name: Setup environment
         run: |
           echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
 
-      - name: Generate desktop build
+      - name: Generate desktop build (stable)
+        if: ${{ inputs.release-track == 'stable' }}
         run: npx nx build:desktop @notesnook/web
 
+      - name: Generate desktop build (beta)
+        if: ${{ inputs.release-track == 'beta' }}
+        run: BETA=true npx nx build:desktop @notesnook/web
+
+      - name: Build desktop bundle
+        working-directory: ./apps/desktop
+        run: npm run bundle
+
       - name: Archive build artifact
         uses: actions/upload-artifact@v4
         with:
@@ -71,7 +95,8 @@ jobs:
 
       - name: Package desktop build
         run: |
-          zip -r ./notesnook_build_v${{ steps.app_metadata.outputs.app_version }}.zip ./apps/web/build/
+          cp -r ./apps/web/build ./apps/desktop/
+          zip -r ./notesnook_build_v${{ steps.app_metadata.outputs.app_version }}.zip ./apps/desktop/build/
           echo "Build folder archived to ./notesnook_build_v${{ steps.app_metadata.outputs.app_version }}.zip"
 
       - name: Upload desktop build
@@ -82,6 +107,28 @@ 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: ${{ inputs.release-track == 'beta' }}
+          target_commitish: ${{ github.ref }}
+
+      - name: Generate flatpak sources
+        if: inputs.publish-github && inputs.build-linux
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y --quiet flatpak flatpak-builder pipx
+          git clone https://github.com/flatpak/flatpak-builder-tools.git /tmp/flatpak-builder-tools
+          cd /tmp/flatpak-builder-tools/node
+          pipx install .
+          cd -
+          node scripts/generate-sources.mjs
+
+      - name: Upload flatpak sources
+        uses: softprops/action-gh-release@v1
+        if: inputs.publish-github && inputs.build-linux
+        with:
+          draft: true
+          name: Notesnook Desktop v${{ steps.app_metadata.outputs.app_version }}
+          tag_name: v${{ steps.app_metadata.outputs.app_version }}
+          files: ./generated-sources.json
           prerelease: ${{ endsWith(steps.app_metadata.outputs.app_version, '-beta') }}
 
   build-macos:
@@ -92,7 +139,7 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
@@ -136,6 +183,12 @@ jobs:
           npm ci --ignore-scripts --prefer-offline --no-audit
           npm run bootstrap -- --scope=desktop
 
+      - name: Install sqlite-better-trigram for all arch
+        run: |
+          npm i --cpu arm64 sqlite-better-trigram
+          npm i --cpu x64 sqlite-better-trigram
+        working-directory: ./apps/desktop
+
       - name: Install provisioning profile
         run: echo "${{ secrets.MAC_PROVISIONING_PROFILE }}" | base64 --decode > embedded.provisionprofile
         working-directory: ./apps/desktop
@@ -147,7 +200,7 @@ jobs:
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
         run: |
           npx nx run release --project @notesnook/desktop -- --variant=mas
-          yarn electron-builder --mac mas --universal -p never
+          yarn electron-builder --config=electron-builder.config.js --mac mas --universal -p never
         working-directory: ./apps/desktop
 
       - name: Build zip and dmg
@@ -161,9 +214,9 @@ jobs:
         run: |
           npx nx run release --project @notesnook/desktop
           if [ ${{ inputs.publish-github }} == true ]; then
-            yarn electron-builder --mac zip dmg --arm64 --x64 -p always
+            yarn electron-builder --config=electron-builder.config.js --mac zip dmg --arm64 --x64 -p always
           else
-            yarn electron-builder --mac zip dmg --arm64 --x64 -p never
+            yarn electron-builder --config=electron-builder.config.js --mac zip dmg --arm64 --x64 -p never
           fi
         working-directory: ./apps/desktop
 
@@ -180,15 +233,15 @@ jobs:
           xcrun altool --upload-package $package -t osx --apiKey $API_KEY_ID --apiIssuer $API_KEY_ISSUER_ID --apple-id ${{ steps.app_metadata.outputs.apple_app_id }} --bundle-id ${{ steps.app_metadata.outputs.app_bundle_id }} --bundle-short-version-string ${{ steps.app_metadata.outputs.app_version }} --bundle-version ${{ steps.app_metadata.outputs.bundle_version }}
         working-directory: ./apps/desktop
 
-  build-linux:
-    name: Build for Linux
+  build-linux-x64:
+    name: Build for Linux x64
     needs: build
     if: inputs.build-linux
     runs-on: ubuntu-22.04
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
@@ -198,7 +251,7 @@ jobs:
         run: echo "SNAPCRAFT_STORE_CREDENTIALS=${{ secrets.snapcraft_token }}" >> $GITHUB_ENV
 
       - name: Install Snapcraft
-        uses: samuelmeuli/action-snapcraft@v1
+        uses: samuelmeuli/action-snapcraft@v3
         if: inputs.publish-snap
 
       - name: Download build
@@ -212,6 +265,11 @@ jobs:
           npm ci --ignore-scripts --prefer-offline --no-audit
           npm run bootstrap -- --scope=desktop
 
+      - name: Install sqlite-better-trigram for all arch
+        run: |
+          npm i --cpu x64 sqlite-better-trigram
+        working-directory: ./apps/desktop
+
       - name: Build Electron wrapper
         run: npx nx run release --project @notesnook/desktop
         working-directory: ./apps/desktop
@@ -219,7 +277,7 @@ jobs:
       - name: Build snap
         if: inputs.publish-snap
         run: |
-          yarn electron-builder --linux snap:x64 -p never
+          yarn electron-builder --config=electron-builder.config.js --linux snap:x64 -p never
         working-directory: ./apps/desktop
 
       - name: Build AppImage
@@ -227,18 +285,86 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           if [ ${{ inputs.publish-github }} == true ]; then
-            yarn electron-builder --linux AppImage:x64 AppImage:arm64 -p always
+            yarn electron-builder --config=electron-builder.config.js --linux AppImage:x64 -p always
           else
-            yarn electron-builder --linux AppImage:x64 AppImage:arm64 -p never
+            yarn electron-builder --config=electron-builder.config.js --linux AppImage:x64 -p never
           fi
         working-directory: ./apps/desktop
 
       - name: Publish on Snapcraft
         if: inputs.publish-snap
         run: |
-          snapcraft upload --release=stable ./output/notesnook_linux_amd64.snap
+          if [ ${{ inputs.release-track }} == 'beta' ]; then
+            snapcraft upload --release=beta ./output/notesnook_linux_amd64.snap
+          else
+            snapcraft upload --release=stable ./output/notesnook_linux_amd64.snap
+          fi
         working-directory: ./apps/desktop
 
+  build-linux-arm64:
+    name: Build for Linux arm64
+    needs: build
+    if: inputs.build-linux
+    runs-on: ubuntu-22.04-arm
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      # - name: Setup Snapcraft Auth
+      #   if: inputs.publish-snap
+      #   run: echo "SNAPCRAFT_STORE_CREDENTIALS=${{ secrets.snapcraft_token }}" >> $GITHUB_ENV
+
+      # - name: Install Snapcraft
+      #   uses: samuelmeuli/action-snapcraft@v1
+      #   if: inputs.publish-snap
+
+      - name: Download build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: ./apps/web/build
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
+
+      - name: Install sqlite-better-trigram for all arch
+        run: |
+          npm i --cpu arm64 sqlite-better-trigram
+        working-directory: ./apps/desktop
+
+      - name: Build Electron wrapper
+        run: npx nx run release --project @notesnook/desktop
+        working-directory: ./apps/desktop
+
+      # - name: Build snap
+      #   if: inputs.publish-snap
+      #   run: |
+      #     yarn electron-builder --config=electron-builder.config.js --linux snap:arm64 -p never
+      #   working-directory: ./apps/desktop
+
+      - name: Build AppImage
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          if [ ${{ inputs.publish-github }} == true ]; then
+            yarn electron-builder --config=electron-builder.config.js --linux AppImage:arm64 -p always
+          else
+            yarn electron-builder --config=electron-builder.config.js --linux AppImage:arm64 -p never
+          fi
+        working-directory: ./apps/desktop
+
+      # - name: Publish on Snapcraft
+      #   if: inputs.publish-snap
+      #   run: |
+      #     snapcraft upload --release=stable ./output/notesnook_linux_arm64.snap
+      #   working-directory: ./apps/desktop
+
   build-windows:
     name: Build for Windows
     needs: build
@@ -247,7 +373,7 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup .NET Core SDK
         uses: actions/setup-dotnet@v2
@@ -272,6 +398,12 @@ jobs:
           npm ci --ignore-scripts --prefer-offline --no-audit
           npm run bootstrap -- --scope=desktop
 
+      - name: Install sqlite-better-trigram for all arch
+        run: |
+          npm i --cpu arm64 sqlite-better-trigram
+          npm i --cpu x64 sqlite-better-trigram
+        working-directory: ./apps/desktop
+
       - name: Build
         run: npx nx run release --project @notesnook/desktop
 
@@ -283,8 +415,8 @@ jobs:
           AZURE_CLIENT_SECRET: ${{ secrets.AZURE_CLIENT_SECRET }}
         run: |
           if ($${{ inputs.publish-github }} -eq $true) {
-            yarn electron-builder --win --publish always
+            yarn electron-builder --config=electron-builder.config.js --win --publish always
           } else {
-            yarn electron-builder --win --publish never
+            yarn electron-builder --config=electron-builder.config.js --win --publish never
           }
         working-directory: ./apps/desktop

.github/workflows/desktop.tests.yml

@@ -0,0 +1,229 @@
+name: Test @notesnook/desktop
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - "master"
+    paths:
+      - "app/desktop/**"
+      # re-run workflow if workflow file changes
+      - ".github/workflows/desktop.tests.yml"
+  pull_request:
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=web
+
+      - name: Setup environment
+        run: |
+          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
+
+      - name: Generate desktop build
+        run: npx nx build:desktop @notesnook/web
+
+      - name: Archive build artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: apps/web/build/**/*
+
+  test-macos-x64:
+    name: Test macOS x64
+    needs: build
+    runs-on: macos-13
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Download build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: ./apps/web/build
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
+
+      - name: Build Electron wrapper
+        run: npx nx run release --project @notesnook/desktop
+        working-directory: ./apps/desktop
+
+      - name: Build app
+        run: |
+          yarn electron-builder --config=electron-builder.config.js --mac --dir --x64
+        working-directory: ./apps/desktop
+
+      - name: Run tests x64
+        run: npm run test
+        working-directory: ./apps/desktop
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: test-results-macos-x64
+          path: apps/desktop/test-results
+          retention-days: 5
+
+  test-macos:
+    name: Test macOS
+    needs: build
+    runs-on: macos-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Download build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: ./apps/web/build
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
+
+      - name: Build Electron wrapper
+        run: npx nx run release --project @notesnook/desktop
+        working-directory: ./apps/desktop
+
+      - name: Build app
+        run: |
+          yarn electron-builder --config=electron-builder.config.js --mac --dir --arm64
+        working-directory: ./apps/desktop
+
+      - name: Run tests arm64
+        run: npm run test
+        working-directory: ./apps/desktop
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: test-results-macos
+          path: apps/desktop/test-results
+          retention-days: 5
+
+  test-linux:
+    name: Test for Linux
+    needs: build
+    runs-on: ubuntu-22.04
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Download build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: ./apps/web/build
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
+
+      - name: Install sqlite-better-trigram for all arch
+        run: |
+          npm i --cpu arm64 sqlite-better-trigram
+          npm i --cpu x64 sqlite-better-trigram
+        working-directory: ./apps/desktop
+
+      - name: Build Electron wrapper
+        run: npx nx run release --project @notesnook/desktop
+        working-directory: ./apps/desktop
+
+      - name: Build app
+        run: |
+          yarn electron-builder --config=electron-builder.config.js --linux --dir --arm64 --x64
+        working-directory: ./apps/desktop
+
+      - name: Run tests
+        run: xvfb-run --auto-servernum --server-args="-screen 0 1920x1080x24" -- npm run test
+        working-directory: ./apps/desktop
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: test-results-linux
+          path: apps/desktop/test-results
+          retention-days: 5
+
+  test-windows:
+    name: Test for Windows
+    needs: build
+    runs-on: windows-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Download build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: ./apps/web/build
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
+
+      - name: Install sqlite-better-trigram for all arch
+        run: |
+          npm i --cpu arm64 sqlite-better-trigram
+          npm i --cpu x64 sqlite-better-trigram
+        working-directory: ./apps/desktop
+
+      - name: Build Electron wrapper
+        run: npx nx run release --project @notesnook/desktop
+        working-directory: ./apps/desktop
+
+      - name: Build app
+        run: |
+          npx cross-env NOTESNOOK_STAGING=true yarn electron-builder --config=electron-builder.config.js --win --dir --arm64 --x64
+        working-directory: ./apps/desktop
+
+      - name: Run tests
+        run: npm run test
+        working-directory: ./apps/desktop
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: test-results-win
+          path: apps/desktop/test-results
+          retention-days: 5

.github/workflows/editor.tests.yml

@@ -19,10 +19,10 @@ on:
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache

.github/workflows/help.publish.yml

@@ -1,6 +1,6 @@
 name: Publish Notesnook Help
 
-on: 
+on:
   workflow_dispatch:
   push:
     branches:
@@ -11,10 +11,10 @@ on:
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - uses: actions-rs/toolchain@v1
         with:
           toolchain: stable

.github/workflows/ios.publish.yml

@@ -4,16 +4,21 @@ on: workflow_dispatch
 
 jobs:
   build:
-    runs-on: macos-13
+    runs-on: macos-14
     timeout-minutes: 60
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
 
+      - name: Setup Xcode
+        uses: maxim-lobanov/setup-xcode@v1
+        with:
+          xcode-version: "16.1"
+
       - name: Install node modules
         run: |
           npm ci --ignore-scripts --prefer-offline --no-audit
@@ -47,14 +52,17 @@ jobs:
           ccache -p
 
       - name: Cache Pods
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         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
+        run: |
+          cd apps/mobile/native/ios
+          bundle install
+          RCT_NEW_ARCH_ENABLED=0 bundle exec pod install
 
       - name: CCache Stats Before Build
         run: ccache -sv

.github/workflows/monograph.publish.yml

@@ -14,7 +14,7 @@ on: workflow_dispatch
 jobs:
   push_to_registry:
     name: Push Docker image to Docker Hub
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     permissions:
       packages: write
       contents: read

.github/workflows/theme-builder.publish.yml

@@ -5,10 +5,10 @@ on: workflow_dispatch
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache

.github/workflows/vericrypt.publish.yml

@@ -5,10 +5,10 @@ on: workflow_dispatch
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache

.github/workflows/web.benchmarks.yml

@@ -0,0 +1,44 @@
+name: Benchmark @notesnook/web
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - "master"
+    paths:
+      - "apps/web/**"
+      # re-run workflow if workflow file changes
+      - ".github/workflows/web.benchmarks.yml"
+  pull_request:
+
+jobs:
+  bench:
+    name: Bench
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=web
+
+      - name: Setup environment
+        run: |
+          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
+
+      - name: Build
+        run: npm run build:web
+
+      - name: Install Playwright Browsers
+        run: npx playwright install chromium --with-deps
+        working-directory: apps/web
+
+      - name: Run benchmarks
+        id: benchmark
+        run: node __bench__/app.bench.mjs
+        working-directory: apps/web

.github/workflows/web.publish.yml

@@ -1,14 +1,24 @@
 name: Publish @notesnook/web
 
-on: workflow_dispatch
+on:
+  workflow_dispatch:
+    inputs:
+      release-track:
+        type: choice
+        required: true
+        default: stable
+        description: "Select the release track"
+        options:
+          - stable
+          - beta
 
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
@@ -24,8 +34,20 @@ jobs:
           echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
           echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
 
-      - name: Generate build
+      - name: Generate build (stable)
+        if: ${{ inputs.release-track == 'stable' }}
         run: npm run build:web
 
-      - name: Publish to Cloudflare Pages
-        run: npx --yes wrangler pages deploy --project-name=notesnook-app ./apps/web/build/
+      - name: Publish to Cloudflare Pages (stable)
+        if: ${{ inputs.release-track == 'stable' }}
+        working-directory: ./apps/web
+        run: npx --yes wrangler pages deploy --project-name=notesnook-app ./build/
+
+      - name: Generate build (beta)
+        if: ${{ inputs.release-track == 'beta' }}
+        run: npm run build:beta:web
+
+      - name: Publish to Cloudflare Pages (beta)
+        if: ${{ inputs.release-track == 'beta' }}
+        working-directory: ./apps/web
+        run: npx --yes wrangler pages deploy --branch=beta --project-name=notesnook-app-beta ./build/

.github/workflows/web.tests.yml

@@ -19,10 +19,10 @@ on:
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
@@ -49,11 +49,11 @@ jobs:
     name: 🧪 Test (${{ matrix.shard }}/${{ strategy.job-total }})
     strategy:
       matrix:
-        shard: [1, 2, 3, 4]
+        shard: [1, 2, 3, 4, 5]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Download build
         uses: actions/download-artifact@v4

.gitignore

@@ -11,3 +11,4 @@ nx-cloud.env
 site
 node_modules.backup
 .nx
+/*.patch

README.md

@@ -66,7 +66,7 @@ We take all queries, issues and bug reports that you might have. Feel free to as
 
 ## Additional Resources
 
-- [Migrating & Importing your data from other apps — Importer](https://importer.notesnook.com/)
+- [Migrating & Importing your data from other apps — Importer](https://help.notesnook.com/importing-notes)
 - [Privacy policy](https://notesnook.com/privacy) & [Terms of service](https://notesnook.com/terms)
 - [Verify Notesnook encryption claims yourself — Vericrypt](https://vericrypt.notesnook.com/)
 - [Why Notesnook requires an email address?](https://blog.notesnook.com/why-notesnook-requires-an-email-address/)

apps/desktop/.gitignore

@@ -2,4 +2,6 @@ node_modules
 build
 output
 dist
-_catalog
+_catalog
+test-results
+test-artifacts

apps/desktop/README.md

@@ -58,13 +58,13 @@ This will compile and run the app in production mode but it won't generate any p
 npm run release -- --rebuild
 
 # For macOS
-npx electron-builder --mac dmg --arm64 --x64 -publish never
+npx electron-builder --config=electron-builder.config.js --mac dmg --arm64 --x64 --publish never
 
 # For Linux (AppImage)
-npx electron-builder --linux AppImage:x64 AppImage:arm64 -publish never
+npx electron-builder --config=electron-builder.config.js --linux AppImage:x64 AppImage:arm64 --publish never
 
 # For Windows
-npx electron-builder --win --publish never
+npx electron-builder --config=electron-builder.config.js --win --publish never
 ```
 
 Feel free to play around with the `electron-builder` command to get the packages you need. `npx electron-builder --help` is a great resource to learn different commands & platforms supported by `electron-builder`.

apps/desktop/__tests__/auto-updates.test.ts

@@ -0,0 +1,246 @@
+/*
+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 { test } from "vitest";
+import { harness } from "./utils.js";
+import { writeFile } from "fs/promises";
+import { Page } from "playwright";
+import { gt, lt } from "semver";
+
+test("update starts downloading if version is outdated", async (t) => {
+  await harness(
+    t,
+    async ({ page }) => {
+      await page.waitForSelector("#authForm");
+
+      t.expect(
+        await page.getByRole("button", { name: "Create account" }).isVisible()
+      ).toBe(true);
+
+      await page
+        .getByRole("button", { name: "Skip & go directly to the app" })
+        .click();
+
+      await skipDialog(page);
+
+      await page.waitForSelector(".ProseMirror");
+
+      await page
+        .locator(".theme-scope-statusBar")
+        .getByRole("button", { name: /updating/i })
+        .waitFor({ state: "attached" });
+    },
+    { version: "3.0.0" }
+  );
+});
+
+test("update is only shown if version is outdated and auto updates are disabled", async (t) => {
+  await harness(
+    t,
+    async (ctx) => {
+      await ctx.app.close();
+      await writeFile(
+        ctx.configPath,
+        JSON.stringify({
+          automaticUpdates: false
+        })
+      );
+
+      await ctx.relaunch();
+
+      const { page } = ctx;
+
+      await page.waitForSelector("#authForm");
+
+      t.expect(
+        await page.getByRole("button", { name: "Create account" }).isVisible()
+      ).toBe(true);
+
+      await page
+        .getByRole("button", { name: "Skip & go directly to the app" })
+        .click();
+
+      await skipDialog(page);
+
+      await page.waitForSelector(".ProseMirror");
+
+      await page
+        .locator(".theme-scope-statusBar")
+        .getByRole("button", { name: /available/i })
+        .waitFor({ state: "attached" });
+    },
+    { version: "3.0.0" }
+  );
+});
+
+test("update to stable if it is newer", async (t) => {
+  await harness(
+    t,
+    async (ctx) => {
+      await ctx.app.close();
+      await writeFile(
+        ctx.configPath,
+        JSON.stringify({
+          automaticUpdates: false,
+          releaseTrack: "beta"
+        })
+      );
+
+      await ctx.relaunch();
+
+      const { page } = ctx;
+
+      await page.waitForSelector("#authForm");
+
+      t.expect(
+        await page.getByRole("button", { name: "Create account" }).isVisible()
+      ).toBe(true);
+
+      await page
+        .getByRole("button", { name: "Skip & go directly to the app" })
+        .click();
+
+      await skipDialog(page);
+
+      await page.waitForSelector(".ProseMirror");
+
+      const updateButton = page
+        .locator(".theme-scope-statusBar")
+        .getByRole("button", { name: /available/i });
+      await updateButton.waitFor({ state: "visible" });
+      const content = await updateButton.textContent();
+      const version = content?.split(" ")?.[0] || "";
+      t.expect(gt(version, "3.0.0-beta.0")).toBe(true);
+    },
+    { version: "3.0.0-beta.0" }
+  );
+});
+
+test("update is not available if it latest stable version is older", async (t) => {
+  await harness(
+    t,
+    async (ctx) => {
+      await ctx.app.close();
+      await writeFile(
+        ctx.configPath,
+        JSON.stringify({
+          automaticUpdates: false,
+          releaseTrack: "beta"
+        })
+      );
+
+      await ctx.relaunch();
+
+      const { page } = ctx;
+
+      await page.waitForSelector("#authForm");
+
+      t.expect(
+        await page.getByRole("button", { name: "Create account" }).isVisible()
+      ).toBe(true);
+
+      await page
+        .getByRole("button", { name: "Skip & go directly to the app" })
+        .click();
+
+      await skipDialog(page);
+
+      await page.waitForSelector(".ProseMirror");
+
+      await page
+        .locator(".theme-scope-statusBar")
+        .getByRole("button", { name: /checking for updates/i })
+        .waitFor({ state: "hidden" });
+
+      t.expect(
+        await page
+          .locator(".theme-scope-statusBar")
+          .getByRole("button", { name: /available/i })
+          .isHidden()
+      ).toBe(true);
+    },
+    { version: "99.0.0-beta.0" }
+  );
+});
+
+test("downgrade to stable on switching to stable release track", async (t) => {
+  await harness(
+    t,
+    async (ctx) => {
+      await ctx.app.close();
+      await writeFile(
+        ctx.configPath,
+        JSON.stringify({
+          automaticUpdates: false,
+          releaseTrack: "stable"
+        })
+      );
+
+      await ctx.relaunch();
+
+      const { page } = ctx;
+
+      await page.waitForSelector("#authForm");
+
+      t.expect(
+        await page.getByRole("button", { name: "Create account" }).isVisible()
+      ).toBe(true);
+
+      await page
+        .getByRole("button", { name: "Skip & go directly to the app" })
+        .click();
+
+      await skipDialog(page);
+
+      await page.waitForSelector(".ProseMirror");
+
+      await page
+        .locator(".theme-scope-statusBar")
+        .getByRole("button", { name: /checking for updates/i })
+        .waitFor({ state: "hidden" });
+
+      const updateButton = page
+        .locator(".theme-scope-statusBar")
+        .getByRole("button", { name: /available/i });
+      await updateButton.waitFor({ state: "visible" });
+      const content = await updateButton.textContent();
+      const version = content?.split(" ")?.[0] || "";
+      t.expect(lt(version, "99.0.0-beta.0")).toBe(true);
+    },
+    { version: "99.0.0-beta.0" }
+  );
+});
+
+async function skipDialog(page: Page) {
+  await page
+    .waitForSelector(".ReactModal__Content", {
+      timeout: 1000
+    })
+    .catch(() => {})
+    .then(async () => {
+      const positiveButton = page.locator(
+        "button[data-role='positive-button']"
+      );
+      const negativeButton = page.locator(
+        "button[data-role='negative-button']"
+      );
+      if (await positiveButton.isVisible()) await positiveButton.click();
+      else if (await negativeButton.isVisible()) await negativeButton.click();
+    });
+}

apps/desktop/__tests__/launch.test.ts

@@ -0,0 +1,38 @@
+/*
+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 { test } from "vitest";
+import { harness } from "./utils.js";
+import assert from "assert";
+
+test("make sure app loads", async (t) => {
+  await harness(t, async ({ page }) => {
+    await page.waitForSelector("#authForm");
+
+    assert.ok(
+      await page.getByRole("button", { name: "Create account" }).isVisible()
+    );
+
+    await page
+      .getByRole("button", { name: "Skip & go directly to the app" })
+      .click();
+
+    await page.waitForSelector(".ProseMirror");
+  });
+});

apps/desktop/__tests__/utils.ts

@@ -0,0 +1,172 @@
+/*
+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 { execSync } from "child_process";
+import { mkdir } from "fs/promises";
+import { fileURLToPath } from "node:url";
+import path from "path";
+import { _electron as electron } from "playwright";
+import slugify from "slugify";
+import { TaskContext } from "vitest";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const IS_DEBUG = process.env.NN_DEBUG === "true" || process.env.CI === "true";
+
+interface AppContext {
+  app: import("playwright").ElectronApplication;
+  page: import("playwright").Page;
+  configPath: string;
+  relaunch: () => Promise<void>;
+}
+
+interface TestOptions {
+  version: string;
+}
+
+export async function harness(
+  t: TaskContext,
+  cb: (ctx: AppContext) => Promise<void>,
+  options?: TestOptions
+) {
+  const ctx = await buildAndLaunchApp(options);
+
+  t.onTestFinished(async (result) => {
+    if (result.state === "fail") {
+      await mkdir("test-results", { recursive: true });
+      await ctx.page.screenshot({
+        path: path.join(
+          "test-results",
+          `${slugify(t.task.name)}-${process.platform}-${
+            process.arch
+          }-error.png`
+        )
+      });
+    }
+    await ctx.app.close();
+  });
+
+  await cb(ctx);
+}
+
+async function buildAndLaunchApp(options?: TestOptions): Promise<AppContext> {
+  const productName = makeid(10);
+  const executablePath = await buildApp({ ...options, productName });
+  const { app, page, configPath } = await launchApp(executablePath);
+  const ctx: AppContext = {
+    app,
+    page,
+    configPath,
+    relaunch: async () => {
+      const { app, page, configPath } = await launchApp(executablePath);
+      ctx.app = app;
+      ctx.page = page;
+      ctx.configPath = configPath;
+    }
+  };
+  return ctx;
+}
+
+async function launchApp(executablePath: string) {
+  const app = await electron.launch({
+    executablePath,
+    args: IS_DEBUG ? [] : ["--hidden"],
+    env:
+      process.platform === "linux"
+        ? {
+            ...(process.env as Record<string, string>),
+            APPIMAGE: "true"
+          }
+        : (process.env as Record<string, string>)
+  });
+
+  const page = await app.firstWindow();
+
+  const userDataDirectory = await app.evaluate((a) => {
+    return a.app.getPath("userData");
+  });
+  const configPath = path.join(userDataDirectory, "config.json");
+  return {
+    app,
+    page,
+    configPath
+  };
+}
+
+async function buildApp({
+  version,
+  productName
+}: {
+  version?: string;
+  productName: string;
+}) {
+  const buildRoot = path.join("test-artifacts", `${productName}-build`);
+  const output = path.join("test-artifacts", `${productName}-output`);
+  execSync(`npm run release -- --root ${buildRoot} --skip-tsc-build`, {
+    stdio: IS_DEBUG ? "inherit" : "ignore"
+  });
+
+  const args = [
+    `--config electron-builder.config.js`,
+    `--c.extraMetadata.productName=${productName}`,
+    "--publish=never"
+  ];
+  if (version) args.push(`--c.extraMetadata.version=${version}`);
+
+  execSync(`npx electron-builder --dir --${process.arch} ${args.join(" ")}`, {
+    stdio: IS_DEBUG ? "inherit" : "ignore",
+    env: {
+      ...process.env,
+      NOTESNOOK_STAGING: "true",
+      NN_BUILD_ROOT: buildRoot,
+      NN_PRODUCT_NAME: productName,
+      NN_APP_ID: `com.notesnook.test.${productName}`,
+      NN_OUTPUT_DIR: output
+    }
+  });
+
+  return path.join(
+    __dirname,
+    "..",
+    output,
+    process.platform === "linux"
+      ? process.arch === "arm64"
+        ? "linux-arm64-unpacked"
+        : "linux-unpacked"
+      : process.platform === "darwin"
+      ? process.arch === "arm64"
+        ? `mac-arm64/${productName}.app/Contents/MacOS/`
+        : `mac/${productName}.app/Contents/MacOS/`
+      : "win-unpacked",
+    process.platform === "win32" ? `${productName}.exe` : productName
+  );
+}
+
+function makeid(length: number) {
+  let result = "";
+  const characters =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const charactersLength = characters.length;
+  let counter = 0;
+  while (counter < length) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    counter += 1;
+  }
+  return result.toLowerCase();
+}

apps/desktop/electron-builder.config.js

@@ -0,0 +1,219 @@
+/*
+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/>.
+*/
+
+const path = require("path");
+const pkg = require("./package.json");
+
+const buildRoot = process.env.NN_BUILD_ROOT || ".";
+const buildFiles = [
+  `${buildRoot}/build/`,
+  `!${buildRoot}/build/screenshots\${/*}`,
+  `!${buildRoot}/build/banner.jpg`,
+  `!${buildRoot}/build/*.ico`,
+  `!${buildRoot}/build/*.png`
+];
+
+const productName = process.env.NN_PRODUCT_NAME || "Notesnook";
+const appId = process.env.NN_APP_ID || "org.streetwriters.notesnook";
+const outputDir = process.env.NN_OUTPUT_DIR || "output";
+const linuxExecutableName = process.env.NN_PRODUCT_NAME
+  ? process.env.NN_PRODUCT_NAME.toLowerCase().replace(/\s+/g, "-")
+  : "notesnook";
+const year = new Date().getFullYear();
+const isBeta = pkg.version.includes("-beta");
+
+/**
+ * @type {import("app-builder-lib").Configuration}
+ */
+module.exports = {
+  appId: appId,
+  productName: productName,
+  copyright: `Copyright © ${year} Streetwriters (Private) Limited`,
+  artifactName: "notesnook_${os}_${arch}.${ext}",
+  generateUpdatesFilesForAllChannels: true,
+  asar: false,
+  files: [
+    "!*.chunk.js.map",
+    "!*.chunk.js.LICENSE.txt",
+    ...buildFiles,
+    "!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/sqlite-better-trigram",
+    "node_modules/sqlite3-fts5-html",
+    "node_modules/sodium-native/prebuilds/${platform}-${arch}",
+    {
+      from: "node_modules/sqlite-better-trigram-linux-${arch}",
+      to: "node_modules/sqlite-better-trigram-linux-${arch}"
+    },
+    {
+      from: "node_modules/sqlite-better-trigram-darwin-${arch}",
+      to: "node_modules/sqlite-better-trigram-darwin-${arch}"
+    },
+    {
+      from: "node_modules/sqlite-better-trigram-windows-${arch}",
+      to: "node_modules/sqlite-better-trigram-windows-${arch}"
+    },
+
+    {
+      from: "node_modules/sqlite3-fts5-html-linux-${arch}",
+      to: "node_modules/sqlite3-fts5-html-linux-${arch}"
+    },
+    {
+      from: "node_modules/sqlite3-fts5-html-darwin-${arch}",
+      to: "node_modules/sqlite3-fts5-html-darwin-${arch}"
+    },
+    {
+      from: "node_modules/sqlite3-fts5-html-windows-${arch}",
+      to: "node_modules/sqlite3-fts5-html-windows-${arch}"
+    },
+
+    "node_modules/sodium-native/index.js",
+    "node_modules/sodium-native/package.json"
+  ],
+  afterPack: "./scripts/removeLocales.js",
+  mac: {
+    bundleVersion: "240",
+    minimumSystemVersion: "10.12.0",
+    target: [
+      {
+        target: "dmg",
+        arch: ["arm64", "x64"]
+      },
+      {
+        target: "zip",
+        arch: ["arm64", "x64"]
+      }
+    ],
+    category: "public.app-category.productivity",
+    darkModeSupport: true,
+    type: "distribution",
+    hardenedRuntime: true,
+    entitlements: "assets/entitlements.mac.plist",
+    entitlementsInherit: "assets/entitlements.mac.plist",
+    gatekeeperAssess: false,
+    icon: "assets/icons/app.icns",
+    notarize: true
+  },
+  dmg: {
+    contents: [
+      {
+        x: 130,
+        y: 220
+      },
+      {
+        x: 410,
+        y: 220,
+        type: "link",
+        path: "/Applications"
+      }
+    ],
+    icon: "assets/icons/app.icns",
+    title: "Install Notesnook"
+  },
+  mas: {
+    entitlements: "assets/entitlements.mas.plist",
+    entitlementsInherit: "assets/entitlements.mas.inherit.plist",
+    entitlementsLoginHelper: "assets/entitlements.mas.loginhelper.plist",
+    hardenedRuntime: true
+  },
+  win: {
+    target: [
+      {
+        target: "nsis",
+        arch: ["x64", "arm64"]
+      },
+      {
+        target: "portable",
+        arch: ["x64", "arm64"]
+      }
+    ],
+    signtoolOptions: {
+      signingHashAlgorithms: ["sha256"],
+      sign: "./scripts/sign.js"
+    },
+    icon: "assets/icons/app.ico"
+  },
+  portable: {
+    artifactName: "notesnook_${os}_${arch}_portable.${ext}"
+  },
+  nsis: {
+    oneClick: true,
+    createDesktopShortcut: "always",
+    deleteAppDataOnUninstall: true
+  },
+  linux: {
+    target: [
+      {
+        target: "AppImage",
+        arch: ["x64", "arm64"]
+      },
+      {
+        target: "snap",
+        arch: ["x64", "arm64"]
+      }
+    ],
+    category: "Office",
+    icon: "assets/icons/app.icns",
+    description: "Your private note taking space",
+    executableName: linuxExecutableName,
+    desktop: {
+      desktopActions: {
+        "new-note": {
+          Name: "New note",
+          Exec: `${linuxExecutableName} new note`
+        },
+        "new-notebook": {
+          Name: "New notebook",
+          Exec: `${linuxExecutableName} new notebook`
+        },
+        "new-reminder": {
+          Name: "New reminder",
+          Exec: `${linuxExecutableName} new reminder`
+        }
+      }
+    }
+  },
+  snap: {
+    autoStart: false,
+    confinement: "strict",
+    allowNativeWayland: true,
+    base: "core22"
+  },
+  extraResources: ["app-update.yml", "./assets/**"],
+  extraMetadata: {
+    main: path.join(buildRoot, "build", "electron.js")
+  },
+  directories: {
+    buildResources: "assets",
+    output: outputDir
+  },
+  publish: [
+    {
+      provider: "github",
+      repo: "notesnook",
+      owner: "streetwriters",
+      channel: isBeta ? "beta" : "latest"
+    }
+  ]
+};

apps/desktop/package.json

@@ -2,230 +2,80 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "3.0.18",
+  "version": "3.2.1",
   "appAppleId": "1544027013",
   "private": true,
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      },
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    }
+  },
   "homepage": "https://notesnook.com/",
   "repository": "https://github.com/streetwriters/notesnook",
   "license": "GPL-3.0-or-later",
   "dependencies": {
-    "@lingui/core": "4.11.4",
+    "@lingui/core": "5.1.2",
     "@notesnook/intl": "file:../../packages/intl",
+    "@notesnook/ui": "file:../../packages/ui",
     "@trpc/client": "10.45.2",
     "@trpc/server": "10.45.2",
-    "better-sqlite3-multiple-ciphers": "11.2.1",
-    "electron-trpc": "0.6.1",
-    "electron-updater": "^6.3.4",
-    "icojs": "^0.19.4",
+    "better-sqlite3-multiple-ciphers": "11.3.0",
+    "electron-trpc": "0.7.1",
+    "electron-updater": "^6.6.2",
+    "icojs": "^0.19.5",
+    "sqlite-better-trigram": "0.0.3",
+    "sqlite3-fts5-html": "^0.0.3",
     "typed-emitter": "^2.1.0",
     "yargs": "^17.7.2",
-    "zod": "^3.23.8"
+    "zod": "3.24.3"
   },
   "devDependencies": {
     "@streetwriters/kysely": "^0.27.4",
-    "@types/node": "22.7.0",
+    "@types/node": "22.15.3",
     "@types/yargs": "^17.0.33",
-    "chokidar": "^4.0.1",
-    "electron": "^30.5.1",
-    "electron-builder": "^25.1.7",
-    "esbuild": "^0.24.0",
-    "node-abi": "^3.68.0",
-    "node-gyp-build": "^4.8.2",
+    "chokidar": "^4.0.3",
+    "electron": "^34.0.0",
+    "electron-builder": "^26.0.12",
+    "esbuild": "0.21.5",
+    "node-abi": "^4.5.0",
+    "node-gyp-build": "^4.8.4",
+    "playwright": "1.48.2",
     "prebuildify": "^6.0.1",
+    "slugify": "1.6.6",
     "tree-kill": "^1.2.2",
-    "undici": "^6.19.8"
+    "undici": "^7.8.0",
+    "vitest": "2.1.8"
   },
   "optionalDependencies": {
     "dmg-license": "^1.0.11"
   },
+  "overrides": {
+    "@electron/node-gyp": "^10.2.0-electron.2"
+  },
   "scripts": {
     "start": "node scripts/dev.mjs",
     "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 --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",
+    "build": "node ../../scripts/build.mjs",
+    "bundle": "esbuild electron=./src/main.ts ./src/preload.ts --external:electron --external:fsevents --external:better-sqlite3-multiple-ciphers --external:sodium-native --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"
+    "postinstall": "patch-package",
+    "test": "vitest run"
   },
   "author": {
     "name": "Streetwriters (Private) Limited",
     "email": "support@streetwriters.co",
     "url": "https://streetwriters.co"
-  },
-  "build": {
-    "appId": "org.streetwriters.notesnook",
-    "productName": "Notesnook",
-    "copyright": "Copyright © 2023 Streetwriters (Private) Limited",
-    "artifactName": "notesnook_${os}_${arch}.${ext}",
-    "generateUpdatesFilesForAllChannels": true,
-    "asar": false,
-    "files": [
-      "!*.chunk.js.map",
-      "!*.chunk.js.LICENSE.txt",
-      "build/",
-      "!build/screenshots${/*}",
-      "!build/banner.jpg",
-      "!build/*.ico",
-      "!build/*.png",
-      "!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"
-    ],
-    "afterPack": "./scripts/removeLocales.js",
-    "mac": {
-      "bundleVersion": "240",
-      "minimumSystemVersion": "10.12.0",
-      "target": [
-        {
-          "target": "dmg",
-          "arch": [
-            "arm64",
-            "x64"
-          ]
-        },
-        {
-          "target": "zip",
-          "arch": [
-            "arm64",
-            "x64"
-          ]
-        }
-      ],
-      "category": "public.app-category.productivity",
-      "darkModeSupport": true,
-      "type": "distribution",
-      "hardenedRuntime": true,
-      "entitlements": "assets/entitlements.mac.plist",
-      "entitlementsInherit": "assets/entitlements.mac.plist",
-      "gatekeeperAssess": false,
-      "icon": "assets/icons/app.icns",
-      "notarize": true
-    },
-    "dmg": {
-      "contents": [
-        {
-          "x": 130,
-          "y": 220
-        },
-        {
-          "x": 410,
-          "y": 220,
-          "type": "link",
-          "path": "/Applications"
-        }
-      ],
-      "icon": "assets/icons/app.icns",
-      "title": "Install Notesnook"
-    },
-    "mas": {
-      "entitlements": "assets/entitlements.mas.plist",
-      "entitlementsInherit": "assets/entitlements.mas.inherit.plist",
-      "entitlementsLoginHelper": "assets/entitlements.mas.loginhelper.plist",
-      "hardenedRuntime": true
-    },
-    "win": {
-      "target": [
-        {
-          "target": "nsis",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
-        },
-        {
-          "target": "portable",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
-        }
-      ],
-      "signingHashAlgorithms": [
-        "sha256"
-      ],
-      "sign": "./scripts/sign.js",
-      "icon": "assets/icons/app.ico"
-    },
-    "portable": {
-      "artifactName": "notesnook_${os}_${arch}_portable.${ext}"
-    },
-    "nsis": {
-      "oneClick": true,
-      "createDesktopShortcut": "always",
-      "deleteAppDataOnUninstall": true
-    },
-    "linux": {
-      "target": [
-        {
-          "target": "AppImage",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
-        },
-        {
-          "target": "snap",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
-        }
-      ],
-      "category": "Office",
-      "icon": "assets/icons/app.icns",
-      "description": "Your private note taking space",
-      "executableName": "notesnook",
-      "desktop": {
-        "actions": [
-          {
-            "id": "new-note",
-            "name": "New note",
-            "args": "new note"
-          },
-          {
-            "id": "new-notebook",
-            "name": "New notebook",
-            "args": "new notebook"
-          },
-          {
-            "id": "new-reminder",
-            "name": "New reminder",
-            "args": "new reminder"
-          }
-        ]
-      }
-    },
-    "snap": {
-      "autoStart": false,
-      "confinement": "strict",
-      "allowNativeWayland": true
-    },
-    "extraResources": [
-      "app-update.yml",
-      "./assets/**"
-    ],
-    "extraMetadata": {
-      "main": "./build/electron.js"
-    },
-    "directories": {
-      "buildResources": "assets",
-      "output": "./output/"
-    },
-    "publish": [
-      {
-        "provider": "github",
-        "repo": "notesnook",
-        "owner": "streetwriters"
-      }
-    ]
   }
 }

apps/desktop/patches/app-builder-lib+25.0.5.patch

@@ -1,36 +0,0 @@
-diff --git a/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js b/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
-index 739a48c..7a7b4af 100644
---- a/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
-+++ b/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
-@@ -117,6 +117,7 @@ class LinuxTargetHelper {
-             StartupWMClass: appInfo.productName,
-             ...extra,
-             ...targetSpecificOptions.desktop,
-+            actions: undefined
-         };
-         const description = this.getDescription(targetSpecificOptions);
-         if (!(0, builder_util_1.isEmptyOrSpaces)(description)) {
-@@ -160,6 +161,23 @@ class LinuxTargetHelper {
-             data += `\n${name}=${desktopMeta[name]}`;
-         }
-         data += "\n";
-+               
-+        if (targetSpecificOptions.desktop.actions) {
-+            let actionsData = "";
-+            const validActions = [];
-+            for (const action of targetSpecificOptions.desktop.actions) {
-+                if (!action.id || !action.name || !action.args) continue;
-+                actionsData += "\n";
-+                actionsData += `[Desktop Action ${action.id}]
-+Name=${action.name}
-+Exec=${desktopMeta.Exec} ${action.args}`;
-+                actionsData += "\n";
-+
-+                validActions.push(action.id);
-+            }
-+
-+            data += `Actions=${validActions.join(";")};\n${actionsData}`
-+        }
-         return Promise.resolve(data);
-     }
- }

apps/desktop/patches/app-builder-lib+26.0.12.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/app-builder-lib/out/targets/snap.js b/node_modules/app-builder-lib/out/targets/snap.js
+index 0b5405e..753f6c6 100644
+--- a/node_modules/app-builder-lib/out/targets/snap.js
++++ b/node_modules/app-builder-lib/out/targets/snap.js
+@@ -115,7 +115,7 @@ class SnapTarget extends core_1.Target {
+         else {
+             const archTriplet = archNameToTriplet(arch);
+             appDescriptor.environment = {
+-                DISABLE_WAYLAND: options.allowNativeWayland ? "" : "1",
++                DISABLE_WAYLAND: options.allowNativeWayland ? "0" : "1",
+                 PATH: "$SNAP/usr/sbin:$SNAP/usr/bin:$SNAP/sbin:$SNAP/bin:$PATH",
+                 SNAP_DESKTOP_RUNTIME: "$SNAP/gnome-platform",
+                 LD_LIBRARY_PATH: [

apps/desktop/patches/better-sqlite3-multiple-ciphers+11.3.0.patch

@@ -0,0 +1,11 @@
+diff --git a/node_modules/better-sqlite3-multiple-ciphers/deps/defines.gypi b/node_modules/better-sqlite3-multiple-ciphers/deps/defines.gypi
+index 1a14ecd..dabcce2 100644
+--- a/node_modules/better-sqlite3-multiple-ciphers/deps/defines.gypi
++++ b/node_modules/better-sqlite3-multiple-ciphers/deps/defines.gypi
+@@ -38,5 +38,6 @@
+     'SQLITE_TRACE_SIZE_LIMIT=32',
+     'SQLITE_USER_AUTHENTICATION=0',
+     'SQLITE_USE_URI=0',
++    'SQLITE_ENABLE_REGEXP',
+   ],
+ }

apps/desktop/patches/electron-trpc+0.6.1.patch

@@ -1,39 +0,0 @@
-diff --git a/node_modules/electron-trpc/dist/main.mjs b/node_modules/electron-trpc/dist/main.mjs
-index 07971db..b67a3cf 100644
---- a/node_modules/electron-trpc/dist/main.mjs
-+++ b/node_modules/electron-trpc/dist/main.mjs
-@@ -537,8 +537,15 @@ class be {
-   attachWindow(r) {
-     F(this, w).includes(r) || (y("Attaching window", r.id), F(this, w).push(r), v(this, N, Z).call(this, r));
-   }
--  detachWindow(r) {
--    y("Detaching window", r.id), L(this, w, F(this, w).filter((e) => e !== r)), v(this, R, M).call(this, { webContentsId: r.webContents.id });
-+  detachWindow(r, webContentsId) {
-+    y("Detaching window", r.id);
-+
-+    if (r.isDestroyed() && webContentsId === undefined) {
-+      throw new Error('webContentsId is required when calling detachWindow on a destroyed window');
-+    }
-+
-+    L(this, w, F(this, w).filter((e) => e !== r));
-+    v(this, R, M).call(this, { webContentsId: webContentsId ?? r.webContents.id });
-   }
- }
- w = new WeakMap(), E = new WeakMap(), R = new WeakSet(), M = function({
-@@ -548,6 +555,7 @@ w = new WeakMap(), E = new WeakMap(), R = new WeakSet(), M = function({
-   for (const [i, a] of F(this, E).entries())
-     i.startsWith(`${r}-${e ?? ""}`) && (y("Closing subscription", i), a.unsubscribe(), F(this, E).delete(i));
- }, N = new WeakSet(), Z = function(r) {
-+  const webContentsId = r.webContents.id;
-   r.webContents.on("did-start-navigation", ({ frame: e }) => {
-     y(
-       "Handling webContents `did-start-navigation` event",
-@@ -558,7 +566,7 @@ w = new WeakMap(), E = new WeakMap(), R = new WeakSet(), M = function({
-       frameRoutingId: e.routingId
-     });
-   }), r.webContents.on("destroyed", () => {
--    y("Handling webContents `destroyed` event"), this.detachWindow(r);
-+    y("Handling webContents `destroyed` event"), this.detachWindow(r, webContentsId);
-   });
- };
- const me = ({

apps/desktop/scripts/build.mjs

@@ -18,59 +18,58 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import path from "path";
-import fs, { readFile, writeFile } from "fs/promises";
-import { existsSync, readFileSync } from "fs";
+import fs from "fs/promises";
+import { existsSync } from "fs";
 import yargs from "yargs-parser";
 import os from "os";
 import * as childProcess from "child_process";
 import { fileURLToPath } from "url";
+import { patchBetterSQLite3 } from "./patch-better-sqlite3.mjs";
 
 const args = yargs(process.argv);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const packageJson = JSON.parse(
-  readFileSync(path.join(__dirname, "..", "package.json"), "utf-8")
-);
+const root = args.root || path.join(__dirname, "..");
+const skipTscBuild = args.skipTscBuild || false;
 
 const webAppPath = path.resolve(path.join(__dirname, "..", "..", "web"));
 
-await fs.rm("./build/", { force: true, recursive: true });
+await fs.rm(path.join(root, "build"), { force: true, recursive: true });
 
 if (args.rebuild || !existsSync(path.join(webAppPath, "build"))) {
   await exec(
-    "yarn nx build:desktop @notesnook/web",
+    "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();
+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", {
+await fs.cp(path.join(webAppPath, "build"), path.join(root, "build"), {
   recursive: true,
   force: true
 });
 
 if (args.variant === "mas") {
-  await exec(`yarn run bundle:mas`);
+  await exec(`yarn run bundle:mas --outdir=${path.join(root, "build")}`);
 } else {
-  await exec(`yarn run bundle`);
+  await exec(`yarn run bundle --outdir=${path.join(root, "build")}`);
 }
 
-await exec(`yarn tsc`);
+if (!skipTscBuild) {
+  await exec(`yarn run build`);
+}
 
 if (args.run) {
-  await exec(`yarn electron-builder --dir --x64`);
+  await exec(
+    `yarn electron-builder --dir --${process.arch} --config=electron-builder.config.js`
+  );
   if (process.platform === "win32") {
     await exec(`.\\output\\win-unpacked\\Notesnook.exe`);
   } else if (process.platform === "darwin") {
-    await exec(`./output/mac/Notesnook.app/Contents/MacOS/Notesnook`);
+    if (process.arch === "arm64")
+      await exec(`./output/mac-arm64/Notesnook.app/Contents/MacOS/Notesnook`);
+    else await exec(`./output/mac/Notesnook.app/Contents/MacOS/Notesnook`);
   } else {
     await exec(`./output/linux-unpacked/Notesnook`);
   }
@@ -83,21 +82,3 @@ async function exec(cmd, cwd) {
     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 = "11.2.2";
-  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

@@ -36,6 +36,8 @@ const ENV = {
   FORCE_COLOR: "false",
   COLOR: "0"
 };
+process.chdir(path.join(__dirname, ".."));
+
 await onChange(true);
 
 console.log("Watching...");
@@ -53,11 +55,13 @@ async function onChange(first) {
   if (first) {
     await fs.rm("./build/", { force: true, recursive: true });
 
+    await exec("npm rebuild electron --verbose --foreground-scripts");
+
     await exec("yarn electron-builder install-app-deps");
   }
 
   await exec(`yarn run bundle`);
-  execAsync(`yarn`, [`tsc`]);
+  await exec(`yarn run build`);
 
   if (await isBundleSame()) {
     console.log("Bundle is same. Doing nothing.");
@@ -66,8 +70,8 @@ async function onChange(first) {
 
   if (first) {
     await spawnAndWaitUntil(
-      ["yarn", "nx", "start:desktop", "@notesnook/web"],
-      path.join(__dirname, "..", "..", ".."),
+      ["npm", "run", "start:desktop"],
+      path.join(__dirname, "..", "..", "web"),
       (data) => data.includes("Network: use --host to expose")
     );
   }

apps/desktop/scripts/patch-better-sqlite3.mjs

@@ -0,0 +1,58 @@
+/*
+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 { readFile, rm, writeFile } from "fs/promises";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export async function patchBetterSQLite3() {
+  console.log("Patching better-sqlite3");
+
+  const jsonPath = path.join(
+    __dirname,
+    "..",
+    "node_modules",
+    "better-sqlite3-multiple-ciphers",
+    "package.json"
+  );
+  const json = JSON.parse(await readFile(jsonPath, "utf-8"));
+
+  delete json.homepage;
+  delete json.repository;
+
+  await writeFile(jsonPath, JSON.stringify(json));
+
+  await rm(
+    path.join(
+      __dirname,
+      "..",
+      "node_modules",
+      "better-sqlite3-multiple-ciphers",
+      "build"
+    ),
+    { force: true, recursive: true }
+  );
+}
+
+if (process.argv[1] === __filename) {
+  patchBetterSQLite3();
+}

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

@@ -19,7 +19,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { initTRPC } from "@trpc/server";
 import { z } from "zod";
-import { app, dialog, nativeTheme, Notification, shell } from "electron";
+import {
+  app,
+  dialog,
+  Menu,
+  MenuItem,
+  nativeImage,
+  nativeTheme,
+  Notification,
+  shell
+} from "electron";
 import { AutoLaunch } from "../utils/autolaunch";
 import { config, DesktopIntegration } from "../utils/config";
 import { bringToFront } from "../utils/bring-to-front";
@@ -29,10 +38,11 @@ import { dirname } from "path";
 import { resolvePath } from "../utils/resolve-path";
 import { observable } from "@trpc/server/observable";
 import { AssetManager } from "../utils/asset-manager";
-import { isFlatpak } from "../utils";
+import { isFlatpak, isSnap } from "../utils";
 import { setupDesktopIntegration } from "../utils/desktop-integration";
 import { rm } from "fs/promises";
 import { disableCustomDns, enableCustomDns } from "../utils/custom-dns";
+import type { MenuItem as NNMenuItem } from "@notesnook/ui";
 
 const t = initTRPC.create();
 
@@ -49,6 +59,7 @@ const NotificationOptions = z.object({
 
 export const osIntegrationRouter = t.router({
   isFlatpak: t.procedure.query(() => isFlatpak()),
+  isSnap: t.procedure.query(() => isSnap()),
 
   zoomFactor: t.procedure.query(() => config.zoomFactor),
   setZoomFactor: t.procedure.input(z.number()).mutation(({ input: factor }) => {
@@ -224,5 +235,63 @@ export const osIntegrationRouter = t.router({
         nativeTheme.off("updated", updated);
       };
     })
-  )
+  ),
+
+  showMenu: t.procedure
+    .input(
+      z.object({
+        menuItems: z.array(z.any())
+      })
+    )
+    .subscription(({ input: { menuItems } }) =>
+      observable<string[]>((emit) => {
+        const items = menuItems as NNMenuItem[];
+        const menu = new Menu();
+        for (const item of items) {
+          const menuItem = toMenuItem(item, (id) => emit.next(id));
+          if (menuItem) menu.append(menuItem);
+        }
+        if (menu.items.length > 0) menu.popup();
+        return () => {
+          menu.removeAllListeners();
+          menu.closePopup();
+        };
+      })
+    )
 });
+
+function toMenuItem(
+  item: NNMenuItem,
+  onClick: (id: string[]) => void,
+  parentKey?: string
+): MenuItem | undefined {
+  switch (item.type) {
+    case "lazy-loader":
+      return undefined;
+    case "separator":
+      return new MenuItem({ type: "separator" });
+    case "button": {
+      const submenu = item.menu ? new Menu() : undefined;
+      if (submenu && item.menu) {
+        for (const subitem of item.menu.items) {
+          const subMenuItem = toMenuItem(subitem, onClick, item.key);
+          if (subMenuItem) submenu.append(subMenuItem);
+        }
+      }
+
+      return new MenuItem({
+        label: item.title,
+        enabled: !item.isDisabled,
+        visible: !item.isHidden,
+        toolTip: item.tooltip,
+        sublabel: item.tooltip,
+        checked: item.isChecked,
+        type: submenu ? "submenu" : item.isChecked ? "checkbox" : "normal",
+        id: item.key,
+        submenu,
+        click: () => onClick(parentKey ? [parentKey, item.key] : [item.key]),
+        accelerator: item.modifier?.replace("Mod", "CommandOrControl")
+      });
+    }
+  }
+}

apps/desktop/src/api/sqlite-kysely.ts

@@ -46,6 +46,10 @@ export class SQLite {
     this.sqlite = require("better-sqlite3-multiple-ciphers")(
       filePath
     ).unsafeMode(true);
+    const betterTrigram = require("sqlite-better-trigram");
+    const fts5Html = require("sqlite3-fts5-html");
+    betterTrigram.load(this.sqlite);
+    fts5Html.load(this.sqlite);
   }
 
   /**

apps/desktop/src/api/updater.ts

@@ -23,6 +23,7 @@ import { CancellationToken, autoUpdater } from "electron-updater";
 import type { AppUpdaterEvents } from "electron-updater/out/AppUpdater";
 import { z } from "zod";
 import { config } from "../utils/config";
+import { app } from "electron";
 
 type UpdateInfo = { version: string };
 type Progress = { percent: number };
@@ -33,6 +34,7 @@ let downloadTimeout: NodeJS.Timeout | undefined = undefined;
 
 export const updaterRouter = t.router({
   autoUpdates: t.procedure.query(() => config.automaticUpdates),
+  releaseTrack: t.procedure.query(() => config.releaseTrack),
   install: t.procedure.query(() => autoUpdater.quitAndInstall()),
   download: t.procedure.query(async () => {
     if (cancellationToken) return;
@@ -67,7 +69,13 @@ export const updaterRouter = t.router({
     .mutation(({ input: { enabled } }) => {
       config.automaticUpdates = enabled;
     }),
-
+  changeReleaseTrack: t.procedure
+    .input(z.object({ track: z.string() }))
+    .mutation(({ input: { track } }) => {
+      config.releaseTrack = track;
+      app.relaunch();
+      app.exit();
+    }),
   onChecking: createSubscription("checking-for-update"),
   onDownloaded: createSubscription<"update-downloaded", UpdateInfo>(
     "update-downloaded"

apps/desktop/src/index.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/>.
 */
 
-export * from "./constants";
+export { PATHS } 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

@@ -85,6 +85,8 @@ async function createWindow() {
   const mainWindowState = new WindowState({});
   const mainWindow = new BrowserWindow({
     show: !cliOptions.hidden,
+    paintWhenInitiallyHidden: cliOptions.hidden,
+    skipTaskbar: cliOptions.hidden,
     x: mainWindowState.x,
     y: mainWindowState.y,
     width: mainWindowState.width,
@@ -101,7 +103,10 @@ async function createWindow() {
     ...(config.desktopSettings.nativeTitlebar
       ? {}
       : {
-          titleBarStyle: "hidden",
+          titleBarStyle:
+            process.platform === "win32" || process.platform === "darwin"
+              ? "hidden"
+              : "default",
           frame: process.platform === "win32" || process.platform === "darwin",
           titleBarOverlay: {
             height: 37,
@@ -142,6 +147,11 @@ async function createWindow() {
   await AssetManager.loadIcons();
   setupDesktopIntegration(config.desktopSettings);
 
+  mainWindow.webContents.session.setPermissionRequestHandler(
+    (webContents, permission, callback) => {
+      callback(permission === "geolocation" ? false : true);
+    }
+  );
   mainWindow.webContents.session.setSpellCheckerDictionaryDownloadURL(
     "http://dictionaries.notesnook.com/"
   );

apps/desktop/src/preload.ts

@@ -19,22 +19,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 /* eslint-disable no-var */
 
 import { ELECTRON_TRPC_CHANNEL } from "electron-trpc/main";
-import { type RendererGlobalElectronTRPC } from "electron-trpc/src/types";
 // import type { NNCrypto } from "@notesnook/crypto";
 import { ipcRenderer } from "electron";
 import { platform } from "os";
 
 declare global {
   var os: () => "mas" | ReturnType<typeof platform>;
-  var electronTRPC: RendererGlobalElectronTRPC;
+  var electronTRPC: any;
   // var NativeNNCrypto: (new () => NNCrypto) | undefined;
 }
 
 process.once("loaded", async () => {
-  const electronTRPC: RendererGlobalElectronTRPC = {
-    sendMessage: (operation) =>
+  const electronTRPC = {
+    sendMessage: (operation: any) =>
       ipcRenderer.send(ELECTRON_TRPC_CHANNEL, operation),
-    onMessage: (callback) =>
+    onMessage: (callback: any) =>
       ipcRenderer.on(ELECTRON_TRPC_CHANNEL, (_event, args) => callback(args))
   };
   globalThis.electronTRPC = electronTRPC;

apps/desktop/src/utils/autoupdater.ts

@@ -20,19 +20,22 @@ 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() {
+  const releaseTrack =
+    config.releaseTrack === "stable" ? "latest" : config.releaseTrack;
   autoUpdater.setFeedURL({
     provider: "generic",
-    url: `https://notesnook.com/api/v1/releases/${process.platform}/${CHANNEL}`,
+    url: `https://notesnook.com/api/v1/releases/${process.platform}/${releaseTrack}`,
     useMultipleRangeRequest: false,
-    channel: CHANNEL
+    channel: releaseTrack
   });
 
   autoUpdater.autoDownload = config.automaticUpdates;
-  autoUpdater.allowDowngrade = false;
+  autoUpdater.allowDowngrade =
+    // only allow downgrade if the current version is a prerelease
+    // and the user has changed the release track to stable
+    config.releaseTrack === "stable" &&
+    autoUpdater.currentVersion.prerelease.length > 0;
   autoUpdater.allowPrerelease = false;
   autoUpdater.autoInstallOnAppQuit = true;
   autoUpdater.disableWebInstaller = true;

apps/desktop/src/utils/config.ts

@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { nativeTheme } from "electron";
 import { JSONStorage } from "./json-storage";
 import { z } from "zod";
+import { autoUpdater } from "electron-updater";
 
 export const DesktopIntegration = z.object({
   autoStart: z.boolean().optional(),
@@ -46,6 +47,9 @@ export const config = {
   automaticUpdates: true,
   proxyRules: "",
   customDns: true,
+  releaseTrack: autoUpdater.currentVersion.raw.includes("-beta")
+    ? "beta"
+    : "stable",
 
   backgroundColor: nativeTheme.themeSource === "dark" ? "#0f0f0f" : "#ffffff",
   windowControlsIconColor:

apps/desktop/src/utils/index.ts

@@ -29,3 +29,7 @@ export function isDevelopment() {
 export function isFlatpak() {
   return existsSync("/.flatpak-info");
 }
+
+export function isSnap() {
+  return process.env.SNAP !== undefined;
+}

apps/desktop/src/utils/menu.ts

@@ -143,16 +143,44 @@ function setupMenu() {
         })
       );
 
-    if (params.isEditable)
+    if (params.isEditable) {
       menu.append(
         new MenuItem({
           label: strings.paste(),
-          role: "pasteAndMatchStyle",
+          role: "paste",
           enabled: clipboard.readText("clipboard").length > 0,
           accelerator: "CommandOrControl+V"
         })
       );
 
+      menu.append(
+        new MenuItem({
+          label:
+            process.platform === "darwin"
+              ? strings.pasteAndMatchStyle()
+              : strings.pasteWithoutFormatting(),
+          role: "pasteAndMatchStyle",
+          enabled: clipboard.readText("clipboard").length > 0,
+          accelerator:
+            process.platform === "darwin"
+              ? "Option+Shift+Command+V"
+              : "Shift+CommandOrControl+V"
+        })
+      );
+
+      menu.append(
+        new MenuItem({
+          type: "separator"
+        })
+      );
+      menu.append(
+        new MenuItem({
+          label: strings.spellCheck(),
+          role: "toggleSpellChecker"
+        })
+      );
+    }
+
     if (menu.items.length > 0) menu.popup();
   });
 }

apps/desktop/src/utils/theme.ts

@@ -57,7 +57,8 @@ function getSystemTheme() {
   nativeTheme.themeSource = oldThemeSource;
 
   setTimeout(
-    () => listeners.forEach((a) => nativeTheme.addListener("updated", a)),
+    () =>
+      listeners.forEach((a) => nativeTheme.addListener("updated", () => a())),
     1000
   );
   return currentTheme;
@@ -72,7 +73,8 @@ function changeTheme(theme: Theme) {
   nativeTheme.themeSource = theme;
 
   setTimeout(
-    () => listeners.forEach((a) => nativeTheme.addListener("updated", a)),
+    () =>
+      listeners.forEach((a) => nativeTheme.addListener("updated", () => a())),
     1000
   );
 }

apps/desktop/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../../tsconfig",
   "compilerOptions": {
     "outDir": "./dist/",
-    "lib": ["ESNext"]
+    "lib": ["ESNext"],
+    "moduleResolution": "Bundler"
   },
   "include": ["src", "global.d.ts"]
 }

apps/desktop/vitest.config.ts

@@ -0,0 +1,40 @@
+/*
+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 { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    testTimeout: process.env.CI ? 120 * 1000 : 120 * 1000,
+    sequence: {
+      concurrent: true,
+      shuffle: true
+    },
+    dir: "./__tests__/",
+    exclude: [
+      "**/node_modules/**",
+      "**/dist/**",
+      "**/cypress/**",
+      "**/.{idea,git,cache,output,temp}/**",
+      "**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.*",
+      "**/test-results/**",
+      "**/test-artifacts/**"
+    ]
+  }
+});

apps/mobile/.gitignore

@@ -39,6 +39,7 @@ DerivedData
 *.xcuserstate
 *.hprof
 **/.xcode.env.local
+native/cache
 # Android/IntelliJ
 #
 rn-build-deps/
@@ -68,6 +69,7 @@ buck-out/
 */fastlane/report.xml
 */fastlane/Preview.html
 */fastlane/screenshots
+native/vendor
 
 # Bundle artifact
 *.jsbundle

apps/mobile/app/app.tsx

@@ -19,25 +19,30 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { i18n } from "@lingui/core";
 import { I18nProvider } from "@lingui/react";
 import {
+  ScopedThemeProvider,
   THEME_COMPATIBILITY_VERSION,
   useThemeEngineStore
 } from "@notesnook/theme";
 import React, { useEffect } from "react";
-import { I18nManager, View } from "react-native";
+import { Appearance, I18nManager, StatusBar } 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";
+import DialogProvider from "./components/dialog-provider";
 import { withErrorBoundry } from "./components/exception-handler";
 import GlobalSafeAreaProvider from "./components/globalsafearea";
+import { Toast } from "./components/toast";
 import { useAppEvents } from "./hooks/use-app-events";
-import { ApplicationHolder } from "./navigation";
+import { NotePreviewConfigure } from "./screens/note-preview-configure";
+import { RootNavigation } from "./navigation/navigation-stack";
 import { themeTrpcClient } from "./screens/settings/theme-selector";
 import Notifications from "./services/notifications";
 import SettingsService from "./services/settings";
 import { TipManager } from "./services/tip-manager";
-import { useThemeStore } from "./stores/use-theme-store";
+import { changeSystemBarColors, useThemeStore } from "./stores/use-theme-store";
 import { useUserStore } from "./stores/use-user-store";
+import RNBootSplash from "react-native-bootsplash";
+import AppLocked from "./components/app-lock";
 
 I18nManager.allowRTL(false);
 I18nManager.forceRTL(false);
@@ -47,11 +52,13 @@ if (appLockEnabled || appLockMode !== "none") {
   useUserStore.getState().lockApp(true);
 }
 
-const App = () => {
+RNBootSplash.hide();
+const App = (props: { configureMode: "note-preview" }) => {
   useAppEvents();
   //@ts-ignore
   globalThis["IS_MAIN_APP_RUNNING"] = true;
   useEffect(() => {
+    changeSystemBarColors();
     SettingsService.onFirstLaunch();
     setTimeout(async () => {
       await Notifications.get();
@@ -61,39 +68,29 @@ const App = () => {
       TipManager.init();
     }, 100);
   }, []);
-  return (
-    <View
-      style={{
-        height: "100%",
-        width: "100%",
-        justifyContent: "center",
-        alignItems: "center"
-      }}
-    >
-      <View
-        style={{
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          zIndex: -1
-        }}
-        pointerEvents="none"
-      >
-        <SafeAreaProvider>
-          <GlobalSafeAreaProvider />
-        </SafeAreaProvider>
-      </View>
 
+  return (
+    <SafeAreaProvider>
+      <StatusBar translucent={true} backgroundColor="transparent" />
       <GestureHandlerRootView
         style={{
           height: "100%",
           width: "100%"
         }}
       >
-        <ApplicationHolder />
+        <GlobalSafeAreaProvider />
+        {props.configureMode === "note-preview" ? (
+          <NotePreviewConfigure />
+        ) : (
+          <RootNavigation />
+        )}
+        <ScopedThemeProvider value="dialog">
+          <Toast />
+        </ScopedThemeProvider>
+        <DialogProvider />
+        <AppLocked />
       </GestureHandlerRootView>
-      <AppLockedOverlay />
-    </View>
+    </SafeAreaProvider>
   );
 };
 
@@ -103,8 +100,8 @@ let currTheme =
     : SettingsService.getProperty("lighTheme");
 useThemeEngineStore.getState().setTheme(currTheme);
 
-export const withTheme = (Element: () => JSX.Element) => {
-  return function AppWithThemeProvider() {
+export const withTheme = (Element: (props: any) => JSX.Element) => {
+  return function AppWithThemeProvider(props: any) {
     const [colorScheme, darkTheme, lightTheme] = useThemeStore((state) => [
       state.colorScheme,
       state.darkTheme,
@@ -123,28 +120,40 @@ export const withTheme = (Element: () => JSX.Element) => {
           })
           .then((theme) => {
             if (theme) {
-              console.log(theme.version, "theme updated");
               theme.colorScheme === "dark"
                 ? useThemeStore.getState().setDarkTheme(theme)
                 : useThemeStore.getState().setLightTheme(theme);
             }
           })
-          .catch(console.log);
+          .catch(() => {
+            /* empty */
+          });
       }, 1000);
+
+      const listener = Appearance.addChangeListener(({ colorScheme }) => {
+        if (colorScheme && SettingsService.getProperty("useSystemTheme")) {
+          useThemeStore.getState().setColorScheme(colorScheme);
+        }
+      });
+      return () => {
+        listener.remove();
+      };
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const nextTheme = colorScheme === "dark" ? darkTheme : lightTheme;
-    if (JSON.stringify(nextTheme) !== JSON.stringify(currTheme)) {
-      useThemeEngineStore
-        .getState()
-        .setTheme(colorScheme === "dark" ? darkTheme : lightTheme);
-      currTheme = nextTheme;
-    }
+    useEffect(() => {
+      const nextTheme = colorScheme === "dark" ? darkTheme : lightTheme;
+      if (JSON.stringify(nextTheme) !== JSON.stringify(currTheme)) {
+        useThemeEngineStore
+          .getState()
+          .setTheme(colorScheme === "dark" ? darkTheme : lightTheme);
+        currTheme = nextTheme;
+      }
+    }, [colorScheme, darkTheme, lightTheme]);
 
     return (
       <I18nProvider i18n={i18n}>
-        <Element />
+        <Element {...props} />
       </I18nProvider>
     );
   };

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

@@ -1,385 +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 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 { DatabaseLogger } from ".";
-import { MMKV } from "./mmkv";
-import { ToastManager } from "../../services/event-manager";
-
-// Database key cipher is persisted across different user sessions hence it has
-// it's independent storage which we will never clear. This is only used when application has
-// 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 KEYCHAIN_SERVER_DBKEY = "notesnook:db";
-
-const NOTESNOOK_APPLOCK_KEY_SALT = "kBwr1Kre86ebOZ8ThLu2OA";
-const NOTESNOOK_DB_KEY_SALT = "SNuzOcEK3amoqL0WvPeKqw";
-
-const DB_KEY_CIPHER = "databaseKeyCipher";
-const USER_KEY_CIPHER = "userKeyCipher";
-const APPLOCK_CIPHER = "applockCipher";
-
-const KEYSTORE_CONFIG = Platform.select({
-  ios: {
-    accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED_THIS_DEVICE_ONLY,
-    accessGroup: IOS_KEYCHAIN_ACCESS_GROUP,
-    service: IOS_KEYCHAIN_SERVICE_NAME
-  },
-  android: {}
-});
-
-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"
-    );
-  }
-  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) {
-    DatabaseLogger.error(e);
-    console.log(e);
-  }
-}
-
-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 key = await Sodium.deriveKey(appLockPassword, appLockCipher.salt);
-    const decrypted = await decrypt(key, appLockCipher);
-
-    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_DB_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) {
-    ToastManager.error(e, "Error getting database key");
-    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_DB_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 {
-    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(),
-        salt: keyCipher.salt
-      },
-      keyCipher
-    );
-
-    return key;
-  } catch (e) {
-    console.log("getCryptoKey", e);
-    DatabaseLogger.error(e);
-  }
-}
-
-export async function removeCryptoKey(_name) {
-  try {
-    MMKV.removeItem(USER_KEY_CIPHER);
-    await Keychain.resetInternetCredentials("notesnook");
-    return true;
-  } catch (e) {
-    DatabaseLogger.error(e);
-  }
-}
-
-export async function getRandomBytes(length) {
-  return await generateSecureRandom(length);
-}
-
-export async function hash(password, email) {
-  let result = await Sodium.hashPassword(password, email);
-  return result;
-}
-
-export async function generateCryptoKey(password, salt) {
-  try {
-    let credentials = await Sodium.deriveKey(password, salt || null);
-    return credentials;
-  } catch (e) {
-    DatabaseLogger.error(e);
-  }
-}
-
-export function getAlgorithm(base64Variant) {
-  return `xcha-argon2i13-${base64Variant}`;
-}
-
-export async function decrypt(password, data) {
-  if (!password.password && !password.key) return undefined;
-  if (password.password && password.password === "" && !password.key)
-    return undefined;
-  let _data = { ...data };
-  _data.output = "plain";
-
-  if (!password.salt) password.salt = data.salt;
-  return await Sodium.decrypt(password, _data);
-}
-
-export async function decryptMulti(password, data) {
-  if (!password.password && !password.key) return undefined;
-  if (password.password && password.password === "" && !password.key)
-    return undefined;
-
-  data = data.map((d) => {
-    d.output = "plain";
-    return d;
-  });
-
-  if (data.length && !password.salt) {
-    password.salt = data[0].salt;
-  }
-
-  return await Sodium.decryptMulti(password, data);
-}
-
-export function parseAlgorithm(alg) {
-  if (!alg) return {};
-  const [enc, kdf, compressed, compressionAlg, base64variant] = alg.split("-");
-  return {
-    encryptionAlgorithm: enc,
-    kdfAlgorithm: kdf,
-    compressionAlgorithm: compressionAlg,
-    isCompress: compressed === "1",
-    base64_variant: base64variant
-  };
-}
-
-export async function encrypt(password, data) {
-  if (!password.password && !password.key) return undefined;
-  if (password.password && password.password === "" && !password.key)
-    return undefined;
-
-  let message = {
-    type: "plain",
-    data: data
-  };
-  let result = await Sodium.encrypt(password, message);
-
-  return {
-    ...result,
-    alg: getAlgorithm(7)
-  };
-}
-
-export async function encryptMulti(password, data) {
-  if (!password.password && !password.key) return undefined;
-  if (password.password && password.password === "" && !password.key)
-    return undefined;
-
-  let results = await Sodium.encryptMulti(
-    password,
-    data.map((item) => ({
-      type: "plain",
-      data: item
-    }))
-  );
-
-  return !results
-    ? []
-    : results.map((result) => ({
-        ...result,
-        alg: getAlgorithm(7)
-      }));
-}

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

@@ -0,0 +1,473 @@
+/*
+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 Sodium, { Cipher, Password } from "@ammarahmed/react-native-sodium";
+import { SerializedKey } from "@notesnook/crypto";
+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 { DatabaseLogger } from ".";
+import { ToastManager } from "../../services/event-manager";
+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 KEYCHAIN_SERVER_DBKEY = "notesnook:db";
+
+const NOTESNOOK_APPLOCK_KEY_SALT = "kBwr1Kre86ebOZ8ThLu2OA";
+const NOTESNOOK_DB_KEY_SALT = "SNuzOcEK3amoqL0WvPeKqw";
+
+const DB_KEY_CIPHER = "databaseKeyCipher";
+const USER_KEY_CIPHER = "userKeyCipher";
+const APPLOCK_CIPHER = "applockCipher";
+
+const KEYSTORE_CONFIG = Platform.select({
+  ios: {
+    accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED_THIS_DEVICE_ONLY,
+    accessGroup: IOS_KEYCHAIN_ACCESS_GROUP,
+    service: IOS_KEYCHAIN_SERVICE_NAME
+  },
+  android: {}
+});
+
+function generatePassword() {
+  const length = 80;
+  //@ts-ignore
+  const crypto = window.crypto || window.msCrypto;
+  if (typeof crypto === "undefined") {
+    throw new Error(
+      "Crypto API is not supported. Please upgrade your web browser"
+    );
+  }
+  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: string) {
+  const key = (await getDatabaseKey()) as string;
+  const appLockCredentials = await Sodium.deriveKey(
+    appLockPassword,
+    NOTESNOOK_APPLOCK_KEY_SALT
+  );
+  const databaseKeyCipher = (await encrypt(appLockCredentials, key)) as Cipher;
+  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: string) {
+  const databaseKeyCipher: Cipher = CipherStorage.getMap(DB_KEY_CIPHER);
+  const databaseKey = (await decrypt(
+    {
+      password: appLockPassword
+    },
+    databaseKeyCipher
+  )) as string;
+
+  await Keychain.setInternetCredentials(
+    KEYCHAIN_SERVER_DBKEY,
+    "notesnook",
+    databaseKey,
+    KEYSTORE_CONFIG
+  );
+  MMKV.removeItem(DB_KEY_CIPHER);
+  return true;
+}
+
+export async function setAppLockVerificationCipher(appLockPassword: string) {
+  try {
+    const appLockCredentials = await Sodium.deriveKey(
+      appLockPassword,
+      NOTESNOOK_APPLOCK_KEY_SALT
+    );
+    const encrypted = (await encrypt(
+      appLockCredentials,
+      generatePassword()
+    )) as Cipher;
+    CipherStorage.setMap(APPLOCK_CIPHER, encrypted);
+    DatabaseLogger.info("setAppLockVerificationCipher");
+  } catch (e) {
+    DatabaseLogger.error(e);
+  }
+}
+
+export async function clearAppLockVerificationCipher() {
+  CipherStorage.removeItem(APPLOCK_CIPHER);
+}
+
+export async function validateAppLockPassword(appLockPassword: string) {
+  try {
+    const appLockCipher: Cipher = CipherStorage.getMap(APPLOCK_CIPHER);
+    if (!appLockCipher) return true;
+    const key = await Sodium.deriveKey(appLockPassword, appLockCipher.salt);
+    const decrypted = await decrypt(key, appLockCipher);
+
+    DatabaseLogger.info(
+      `validateAppLockPassword: ${typeof decrypted === "string"}`
+    );
+    return typeof decrypted === "string";
+  } catch (e) {
+    DatabaseLogger.error(e);
+    return false;
+  }
+}
+
+let DB_KEY: string | undefined;
+export function clearDatabaseKey() {
+  DB_KEY = undefined;
+  DatabaseLogger.info("Cleared database key");
+}
+
+export async function getDatabaseKey(appLockPassword?: string) {
+  if (DB_KEY) return DB_KEY;
+  if (appLockPassword) {
+    const databaseKeyCipher: Cipher = 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) {
+      const credentials = await Keychain.getInternetCredentials(
+        KEYCHAIN_SERVER_DBKEY
+      );
+
+      DatabaseLogger.info("Getting database key from Keychain");
+      DB_KEY = (credentials as Keychain.UserCredentials).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 as string;
+
+    await Keychain.setInternetCredentials(
+      KEYCHAIN_SERVER_DBKEY,
+      "notesnook",
+      DB_KEY,
+      KEYSTORE_CONFIG
+    );
+  }
+
+  if (await Keychain.hasInternetCredentials("notesnook")) {
+    const userKeyCredentials = await Keychain.getInternetCredentials(
+      "notesnook"
+    );
+
+    if (userKeyCredentials) {
+      const userKeyCipher: Cipher = (await encrypt(
+        {
+          key: DB_KEY,
+          salt: NOTESNOOK_DB_KEY_SALT
+        },
+        userKeyCredentials.password
+      )) as Cipher;
+      // Store encrypted user key in MMKV
+      MMKV.setMap(USER_KEY_CIPHER, userKeyCipher);
+      await Keychain.resetInternetCredentials("notesnook");
+    }
+    DatabaseLogger.info("Migrated user credentials to cipher storage");
+  }
+
+  if (!DB_KEY) {
+    throw new Error(
+      `Failed to get database key, ${await Keychain.hasInternetCredentials(
+        KEYCHAIN_SERVER_DBKEY
+      )}`
+    );
+  }
+
+  return DB_KEY;
+}
+
+export async function deriveCryptoKeyFallback(data: SerializedKey) {
+  if (Platform.OS !== "ios") return;
+  try {
+    if (!data.password || !data.salt)
+      throw new Error(
+        "Invalid password and salt provided to deriveCryptoKeyFallback"
+      );
+
+    const credentials = await Sodium.deriveKeyFallback?.(
+      data.password,
+      data.salt
+    );
+
+    if (!credentials) return;
+
+    const userKeyCipher = (await encrypt(
+      {
+        key: (await getDatabaseKey()) as string,
+        salt: NOTESNOOK_DB_KEY_SALT
+      },
+      credentials.key as string
+    )) as Cipher<"base64">;
+    DatabaseLogger.info("User key fallback stored: ", {
+      userKeyCipher: !!userKeyCipher
+    });
+
+    // Store encrypted user key in MMKV
+    MMKV.setMap(USER_KEY_CIPHER, userKeyCipher);
+  } catch (e) {
+    DatabaseLogger.error(e);
+  }
+}
+
+export async function deriveCryptoKey(data: SerializedKey) {
+  try {
+    if (!data.password || !data.salt)
+      throw new Error("Invalid password and salt provided to deriveCryptoKey");
+
+    const credentials = (await Sodium.deriveKey(
+      data.password,
+      data.salt
+    )) as Password;
+    const userKeyCipher = (await encrypt(
+      {
+        key: (await getDatabaseKey()) as string,
+        salt: NOTESNOOK_DB_KEY_SALT
+      },
+      credentials.key as string
+    )) as Cipher<"base64">;
+    DatabaseLogger.info("User key stored: ", {
+      userKeyCipher: !!userKeyCipher
+    });
+
+    // Store encrypted user key in MMKV
+    MMKV.setMap(USER_KEY_CIPHER, userKeyCipher);
+  } catch (e) {
+    DatabaseLogger.error(e);
+  }
+}
+
+export async function getCryptoKey() {
+  try {
+    const keyCipher: Cipher = MMKV.getMap(USER_KEY_CIPHER);
+    if (!keyCipher) {
+      DatabaseLogger.info("User key cipher is null");
+      return undefined;
+    }
+
+    const key = await decrypt(
+      {
+        key: (await getDatabaseKey()) as string,
+        salt: keyCipher.salt
+      },
+      keyCipher
+    );
+
+    return key;
+  } catch (e) {
+    DatabaseLogger.error(e);
+  }
+}
+
+export async function removeCryptoKey() {
+  try {
+    MMKV.removeItem(USER_KEY_CIPHER);
+    await Keychain.resetInternetCredentials("notesnook");
+    return true;
+  } catch (e) {
+    DatabaseLogger.error(e);
+  }
+}
+
+export async function getRandomBytes(length: number) {
+  return await generateSecureRandom(length);
+}
+
+export async function hash(
+  password: string,
+  email: string,
+  options?: { usesFallback?: boolean }
+) {
+  DatabaseLogger.log(`Hashing password: fallback: ${options?.usesFallback}`);
+
+  if (options?.usesFallback && Platform.OS !== "ios") {
+    return "";
+  }
+
+  return (
+    options?.usesFallback
+      ? await Sodium.hashPasswordFallback?.(password, email)
+      : await Sodium.hashPassword(password, email)
+  ) as string;
+}
+
+export async function generateCryptoKey(password: string, salt?: string) {
+  return Sodium.deriveKey(password, salt) as Promise<SerializedKey>;
+}
+
+export async function generateCryptoKeyFallback(
+  password: string,
+  salt?: string
+): Promise<SerializedKey> {
+  return Sodium.deriveKeyFallback?.(
+    password,
+    salt as string
+  ) as Promise<SerializedKey>;
+}
+
+export function getAlgorithm(base64Variant: number) {
+  return `xcha-argon2i13-${base64Variant}`;
+}
+
+export async function decrypt(password: SerializedKey, data: Cipher<"base64">) {
+  const _data = { ...data };
+  _data.output = "plain";
+
+  if (!password.salt) password.salt = data.salt;
+
+  if (Platform.OS === "ios" && !password.key && password.password) {
+    const key = await Sodium.deriveKey(password.password, password.salt);
+    try {
+      return await Sodium.decrypt(key, _data);
+    } catch (e) {
+      const fallbackKey = await Sodium.deriveKeyFallback?.(
+        password.password,
+        password.salt
+      );
+      if (Platform.OS === "ios" && fallbackKey) {
+        DatabaseLogger.info("Using fallback key for decryption");
+      }
+      if (fallbackKey) {
+        return await Sodium.decrypt(fallbackKey, _data);
+      } else {
+        throw e;
+      }
+    }
+  }
+
+  return await Sodium.decrypt(password, _data);
+}
+
+export async function decryptMulti(
+  password: Password,
+  data: Cipher<"base64">[]
+) {
+  data = data.map((d) => {
+    d.output = "plain";
+    return d;
+  });
+
+  if (data.length && !password.salt) {
+    password.salt = data[0].salt;
+  }
+
+  if (Platform.OS === "ios" && !password.key && password.password) {
+    const key = await Sodium.deriveKey(password.password, password.salt);
+    try {
+      return await Sodium.decryptMulti(key, data);
+    } catch (e) {
+      const fallbackKey = await Sodium.deriveKeyFallback?.(
+        password.password,
+        password.salt as string
+      );
+      if (Platform.OS === "ios" && fallbackKey) {
+        DatabaseLogger.info("Using fallback key for decryption");
+      }
+      if (fallbackKey) {
+        return await Sodium.decryptMulti(fallbackKey, data);
+      } else {
+        throw e;
+      }
+    }
+  }
+
+  return await Sodium.decryptMulti(password, data);
+}
+
+export function parseAlgorithm(alg: string) {
+  if (!alg) return {};
+  const [enc, kdf, compressed, compressionAlg, base64variant] = alg.split("-");
+  return {
+    encryptionAlgorithm: enc,
+    kdfAlgorithm: kdf,
+    compressionAlgorithm: compressionAlg,
+    isCompress: compressed === "1",
+    base64_variant: base64variant
+  };
+}
+
+export async function encrypt(password: SerializedKey, plainText: string) {
+  const result = await Sodium.encrypt<"base64">(password, {
+    type: "plain",
+    data: plainText
+  });
+
+  return {
+    ...result,
+    alg: getAlgorithm(7)
+  };
+}
+
+export async function encryptMulti(
+  password: SerializedKey,
+  plainText: string[]
+) {
+  const results = await Sodium.encryptMulti<"base64">(
+    password,
+    plainText.map((item) => ({
+      type: "plain",
+      data: item
+    }))
+  );
+
+  return !results
+    ? []
+    : results.map((result) => ({
+        ...result,
+        alg: getAlgorithm(7)
+      }));
+}

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

@@ -16,48 +16,50 @@ 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";
-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 { logger as dbLogger, ICompressor } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
 import {
   SqliteAdapter,
   SqliteIntrospector,
   SqliteQueryCompiler
 } from "@streetwriters/kysely";
-import filesystem from "../filesystem";
-import Storage from "./storage";
-import { RNSqliteDriver } from "./sqlite.kysely";
-import { getDatabaseKey } from "./encryption";
+import { Platform } from "react-native";
+import * as Gzip from "react-native-gzip";
 import SettingsService from "../../services/settings";
-import { strings } from "@notesnook/intl";
+import EventSource from "../../utils/sse/even-source-ios";
+import AndroidEventSource from "../../utils/sse/event-source";
+import { FileStorage } from "../filesystem";
+import { getDatabaseKey } from "./encryption";
+import "./logger";
+import { RNSqliteDriver } from "./sqlite.kysely";
+import { Storage } from "./storage";
 
-export async function setupDatabase(password) {
+export async function setupDatabase(password?: string) {
   const key = await getDatabaseKey(password);
   if (!key) throw new Error(strings.databaseSetupFailed());
 
-  console.log("Opening database with key:", !!key);
-
   database.host({
     API_HOST: "https://api.notesnook.com",
     AUTH_HOST: "https://auth.streetwriters.co",
     SSE_HOST: "https://events.streetwriters.co",
     SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
     ISSUES_HOST: "https://issues.streetwriters.co",
+    MONOGRAPH_HOST: "https://monogr.ph",
     ...(SettingsService.getProperty("serverUrls") || {})
   });
 
   database.setup({
     storage: Storage,
-    eventsource: Platform.OS === "ios" ? EventSource : AndroidEventSource,
-    fs: filesystem,
-    compressor: {
-      compress: Gzip.deflate,
-      decompress: Gzip.inflate
-    },
+    eventsource: (Platform.OS === "ios"
+      ? EventSource
+      : AndroidEventSource) as any,
+    fs: FileStorage,
+    compressor: async () =>
+      ({
+        compress: Gzip.deflate,
+        decompress: Gzip.inflate
+      } as ICompressor),
     batchSize: 100,
     sqliteOptions: {
       dialect: (name) => ({

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

@@ -26,7 +26,7 @@ import { CompiledQuery } from "@streetwriters/kysely";
 import { QuickSQLiteConnection, open } from "react-native-quick-sqlite";
 import { strings } from "@notesnook/intl";
 
-type Config = { dbName: string; async: boolean; location: string };
+type Config = { dbName: string; async: boolean; location?: string };
 
 export class RNSqliteDriver implements Driver {
   private connection?: DatabaseConnection;

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

@@ -16,58 +16,52 @@ 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 { Platform } from "react-native";
-import RNFetchBlob from "react-native-blob-util";
+import { IStorage } from "@notesnook/core";
+import { MMKVInstance } from "react-native-mmkv-storage";
 import {
   decrypt,
   decryptMulti,
   deriveCryptoKey,
+  deriveCryptoKeyFallback,
   encrypt,
   encryptMulti,
   generateCryptoKey,
   getCryptoKey,
-  getRandomBytes,
   hash,
-  removeCryptoKey
+  generateCryptoKeyFallback
 } from "./encryption";
 import { MMKV } from "./mmkv";
 
 export class KV {
-  /**
-   * @type {typeof MMKV}
-   */
-  storage = null;
-  constructor(storage) {
+  storage: MMKVInstance;
+  constructor(storage: MMKVInstance) {
     this.storage = storage;
   }
-  async read(key) {
-    if (!key) return null;
-    let data = this.storage.getString(key);
-    if (!data) return null;
+
+  async read<T>(key: string, isArray?: boolean) {
+    if (!key) return undefined;
+    const data = this.storage.getString(key);
+    if (!data) return undefined;
     try {
-      let parse = JSON.parse(data);
-      return parse;
+      return JSON.parse(data) as T;
     } catch (e) {
-      return data;
+      return data as T;
     }
   }
 
-  async write(key, data) {
+  async write<T>(key: string, data: T) {
     this.storage.setString(
       key,
       typeof data === "string" ? data : JSON.stringify(data)
     );
-
-    return true;
   }
 
-  async readMulti(keys) {
+  async readMulti<T>(keys: string[]) {
     if (keys.length <= 0) {
       return [];
     } else {
       try {
-        let data = await this.storage.getMultipleItemsAsync(
+        const data = await this.storage.getMultipleItemsAsync<any>(
           keys.slice(),
           "string"
         );
@@ -79,24 +73,24 @@ export class KV {
             obj = value;
           }
           return [key, obj];
-        });
+        }) as [string, T][];
       } catch (e) {
-        console.log(e);
+        return [];
       }
     }
   }
 
-  async remove(key) {
-    return this.storage.removeItem(key);
+  async remove(key: string) {
+    this.storage.removeItem(key);
   }
 
-  async removeMulti(keys) {
-    if (!keys) return true;
-    return this.storage.removeItems(keys);
+  async removeMulti(keys: string[]) {
+    if (!keys) return;
+    this.storage.removeItems(keys);
   }
 
   async clear() {
-    return this.storage.clearStore();
+    this.storage.clearStore();
   }
 
   async getAllKeys() {
@@ -113,54 +107,46 @@ export class KV {
     return keys;
   }
 
-  async writeMulti(items) {
-    return this.storage.setMultipleItemsAsync(items, "object");
+  async writeMulti(items: [string, any][]) {
+    await this.storage.setMultipleItemsAsync(items, "object");
   }
 }
 
 const DefaultStorage = new KV(MMKV);
 
-async function requestPermission() {
-  if (Platform.OS === "ios") return true;
-  return true;
-}
-async function checkAndCreateDir(path) {
-  let dir =
-    Platform.OS === "ios"
-      ? RNFetchBlob.fs.dirs.DocumentDir + path
-      : RNFetchBlob.fs.dirs.SDCardDir + "/Notesnook/" + path;
-
-  try {
-    let exists = await RNFetchBlob.fs.exists(dir);
-    let isDir = await RNFetchBlob.fs.isDir(dir);
-    if (!exists || !isDir) {
-      await RNFetchBlob.fs.mkdir(dir);
-    }
-  } catch (e) {
-    await RNFetchBlob.fs.mkdir(dir);
-  }
-  return dir;
-}
-
-export default {
-  read: (key) => DefaultStorage.read(key),
-  write: (key, value) => DefaultStorage.write(key, value),
-  readMulti: (keys) => DefaultStorage.readMulti(keys),
-  remove: (key) => DefaultStorage.remove(key),
-  clear: () => DefaultStorage.clear(),
-  getAllKeys: () => DefaultStorage.getAllKeys(),
-  writeMulti: (items) => DefaultStorage.writeMulti(items),
-  removeMulti: (keys) => DefaultStorage.removeMulti(keys),
+export const Storage: IStorage = {
+  write<T>(key: string, data: T): Promise<void> {
+    return DefaultStorage.write(key, data);
+  },
+  writeMulti<T>(entries: [string, T][]): Promise<void> {
+    return DefaultStorage.writeMulti(entries);
+  },
+  readMulti<T>(keys: string[]): Promise<[string, T][]> {
+    return DefaultStorage.readMulti(keys);
+  },
+  read<T>(key: string, isArray?: boolean): Promise<T | undefined> {
+    return DefaultStorage.read(key, isArray);
+  },
+  remove(key: string): Promise<void> {
+    return DefaultStorage.remove(key);
+  },
+  removeMulti(keys: string[]): Promise<void> {
+    return DefaultStorage.removeMulti(keys);
+  },
+  clear(): Promise<void> {
+    return DefaultStorage.clear();
+  },
+  getAllKeys(): Promise<string[]> {
+    return DefaultStorage.getAllKeys();
+  },
+  hash,
+  getCryptoKey,
   encrypt,
+  encryptMulti,
   decrypt,
   decryptMulti,
-  getRandomBytes,
-  checkAndCreateDir,
-  requestPermission,
   deriveCryptoKey,
-  getCryptoKey,
-  removeCryptoKey,
-  hash,
   generateCryptoKey,
-  encryptMulti
+  generateCryptoKeyFallback,
+  deriveCryptoKeyFallback
 };

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

@@ -27,13 +27,9 @@ import RNFetchBlob from "react-native-blob-util";
  */
 export async function compressToBase64(path, type) {
   const { width: screenWidth, scale } = Dimensions.get("window");
-  console.log("COMPRESSING TO BASE64...");
+
   return new Promise((resolve) => {
-    console.log(path, "image path...");
-
     Image.getSize(path, async (width) => {
-      console.log("image width", width);
-
       const response = await ImageResizer.createResizedImage(
         path,
         screenWidth * scale,
@@ -55,10 +51,12 @@ export async function compressToBase64(path, type) {
           : response.uri,
         "base64"
       );
-      RNFetchBlob.fs.unlink(path.replace("file://", "")).catch(console.log);
-      RNFetchBlob.fs
-        .unlink(response.uri.replace("file://", ""))
-        .catch(console.log);
+      RNFetchBlob.fs.unlink(path.replace("file://", "")).catch(() => {
+        /* empty */
+      });
+      RNFetchBlob.fs.unlink(response.uri.replace("file://", "")).catch(() => {
+        /* empty */
+      });
 
       resolve(base64);
     });
@@ -80,6 +78,8 @@ export async function compressToFile(path, type) {
       onlyScaleDown: true
     }
   );
-  RNFetchBlob.fs.unlink(path.replace("file://", "")).catch(console.log);
+  RNFetchBlob.fs.unlink(path.replace("file://", "")).catch(() => {
+    /* empty */
+  });
   return response.uri;
 }

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

@@ -16,7 +16,6 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-
 import Sodium from "@ammarahmed/react-native-sodium";
 import { getFileNameWithExtension } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
@@ -25,12 +24,12 @@ import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import * as ScopedStorage from "react-native-scoped-storage";
 import { subscribe, zip } from "react-native-zip-archive";
+import filesystem from ".";
 import { ShareComponent } from "../../components/sheets/export-notes/share";
-import { ToastManager, presentSheet } from "../../services/event-manager";
+import { presentSheet, ToastManager } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { IOS_APPGROUPID } from "../../utils/constants";
 import { DatabaseLogger, db } from "../database";
-import Storage from "../database/storage";
 import { createCacheDir, exists } from "./io";
 import { cacheDir, copyFileAsync, releasePermissions } from "./utils";
 
@@ -51,23 +50,23 @@ export async function downloadAllAttachments() {
 /**
  * Downloads provided attachments to a .zip file
  * on user's device.
- * @param {string[]} attachments
+ * @param {string[]} attachmentIds
  * @param onProgress
  * @returns
  */
-export async function downloadAttachments(attachments) {
+export async function downloadAttachments(attachmentIds: string[]) {
   await createCacheDir();
-  if (!attachments || !attachments.length) return;
+  if (!attachmentIds || !attachmentIds.length) return;
   const groupId = `download-all-${Date.now()}`;
 
   let outputFolder;
   if (Platform.OS === "android") {
     // Ask the user to select a directory to store the file
-    let file = await ScopedStorage.openDocumentTree(true);
+    const file = await ScopedStorage.openDocumentTree(true);
     outputFolder = file.uri;
     if (!outputFolder) return;
   } else {
-    outputFolder = await Storage.checkAndCreateDir("/downloads/");
+    outputFolder = await filesystem.checkAndCreateDir("/downloads/");
   }
 
   // Create the folder to zip;
@@ -83,8 +82,10 @@ export async function downloadAttachments(attachments) {
   await RNFetchBlob.fs.mkdir(zipSourceFolder);
 
   const isCancelled = () => {
-    if (useAttachmentStore.getState().downloading[groupId]?.canceled) {
-      RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
+    if (useAttachmentStore.getState().downloading?.[groupId]?.canceled) {
+      RNFetchBlob.fs.unlink(zipSourceFolder).catch(() => {
+        /* empty */
+      });
       useAttachmentStore.getState().setDownloading({
         groupId,
         current: 0,
@@ -97,19 +98,21 @@ export async function downloadAttachments(attachments) {
     }
   };
 
-  for (let i = 0; i < attachments.length; i++) {
+  for (let i = 0; i < attachmentIds.length; i++) {
     if (isCancelled()) return;
-    let attachment = await db.attachments.attachment(attachments[i]);
+    const attachment = await db.attachments.attachment(attachmentIds[i]);
+    if (!attachment) continue;
+
     const hash = attachment.hash;
     try {
       useAttachmentStore.getState().setDownloading({
         groupId: groupId,
         current: i + 1,
-        total: attachments.length,
+        total: attachmentIds.length,
         filename: attachment.hash
       });
       // Download to cache
-      let uri = await downloadAttachment(hash, false, {
+      const uri = await downloadAttachment(hash, false, {
         silent: true,
         cache: true,
         groupId: groupId
@@ -140,7 +143,7 @@ export async function downloadAttachments(attachments) {
     useAttachmentStore.getState().setDownloading({
       current: 0,
       total: 1,
-      message: `${strings.savingZipFile()}... ${strings.pleaseWait()}`,
+      message: strings.savingZipFile(),
       groupId
     });
     // If all goes well, zip the notesnook-attachments folder in cache.
@@ -150,9 +153,7 @@ export async function downloadAttachments(attachments) {
         groupId,
         current: progress,
         total: 1,
-        message: `${strings.savingZipFile()} (${(progress * 100).toFixed(
-          1
-        )}%)... ${strings.pleaseWait()}`
+        message: strings.savingZipFile((progress * 100).toFixed(1))
       });
     });
     await zip(zipSourceFolder, zipOutputFile);
@@ -186,59 +187,85 @@ export async function downloadAttachments(attachments) {
     });
     releasePermissions(outputFolder);
     sub?.remove();
-    ToastManager.error(e, "Error zipping attachments");
+    ToastManager.error(e as Error, "Error zipping attachments");
   }
   // Remove source & zip file from cache.
-  RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
+  RNFetchBlob.fs.unlink(zipSourceFolder).catch(() => {
+    /* empty */
+  });
   if (Platform.OS === "android") {
-    RNFetchBlob.fs.unlink(zipOutputFile).catch(console.log);
+    RNFetchBlob.fs.unlink(zipOutputFile).catch(() => {
+      /* empty */
+    });
   }
 }
 
 export default async function downloadAttachment(
-  hash,
+  hashOrId: string,
   global = true,
-  options = {
-    silent: false,
-    cache: false,
-    throwError: false,
-    groupId: undefined,
-    base64: false,
-    text: false
+  options?: {
+    silent?: boolean;
+    cache?: boolean;
+    throwError?: boolean;
+    groupId?: string;
+    base64?: boolean;
+    text?: boolean;
   }
 ) {
   await createCacheDir();
 
-  let attachment = await db.attachments.attachment(hash);
+  const attachment = await db.attachments.attachment(hashOrId);
   if (!attachment) {
-    DatabaseLogger.log("Attachment not found");
+    DatabaseLogger.log("Attachment not found", {
+      hash: hashOrId
+    });
     return;
   }
 
-  let folder = {};
-  if (!options.cache) {
+  let folder: {
+    uri: string;
+  } | null = null;
+  if (!options?.cache) {
     if (Platform.OS === "android") {
       folder = await ScopedStorage.openDocumentTree();
       if (!folder) return;
     } else {
-      folder.uri = await Storage.checkAndCreateDir("/downloads/");
+      folder = {
+        uri: await filesystem.checkAndCreateDir("/downloads/")
+      };
     }
   }
 
   try {
+    useAttachmentStore.getState().setDownloading({
+      groupId: options?.groupId || attachment.hash,
+      current: 0,
+      total: 1,
+      filename: attachment.filename
+    });
+
     await db
       .fs()
       .downloadFile(
-        options.groupId || attachment.hash,
+        options?.groupId || attachment.hash,
         attachment.hash,
         attachment.chunkSize
       );
+
+    useAttachmentStore.getState().setDownloading({
+      groupId: options?.groupId || attachment.hash,
+      current: 1,
+      total: 1,
+      filename: attachment.filename,
+      success: true
+    });
+
     if (!(await exists(attachment.hash))) {
       DatabaseLogger.log("Attachment does not exist after download.");
       return;
     }
 
-    if (options.base64 || options.text) {
+    if (options?.base64 || options?.text) {
       DatabaseLogger.log(`Starting to decrypt... hash: ${attachment.hash}`);
       return await db.attachments.read(
         attachment.hash,
@@ -246,14 +273,16 @@ export default async function downloadAttachment(
       );
     }
 
-    let filename = getFileNameWithExtension(
+    const filename = await getFileNameWithExtension(
       attachment.filename,
       attachment.mimeType
     );
 
-    let key = await db.attachments.decryptKey(attachment.key);
+    const key = await db.attachments.decryptKey(attachment.key);
 
-    let info = {
+    if (!key) return;
+
+    const info = {
       iv: attachment.iv,
       salt: attachment.salt,
       length: attachment.size,
@@ -261,18 +290,18 @@ export default async function downloadAttachment(
       hash: attachment.hash,
       hashType: attachment.hashType,
       mime: attachment.mimeType,
-      fileName: options.cache ? undefined : filename,
-      uri: options.cache ? undefined : folder.uri,
+      fileName: options?.cache ? undefined : filename,
+      uri: options?.cache ? undefined : folder?.uri,
       chunkSize: attachment.chunkSize,
       appGroupId: IOS_APPGROUPID
     };
     let fileUri = await Sodium.decryptFile(
       key,
       info,
-      options.cache ? "cache" : "file"
+      options?.cache ? "cache" : "file"
     );
 
-    if (!options.silent) {
+    if (!options?.silent) {
       ToastManager.show({
         heading: strings.network.downloadSuccess(),
         message: strings.network.fileDownloaded(filename),
@@ -280,15 +309,15 @@ export default async function downloadAttachment(
       });
     }
 
-    if (Platform.OS === "ios" && !options.cache) {
-      fileUri = folder.uri + `/${filename}`;
+    if (Platform.OS === "ios" && !options?.cache) {
+      fileUri = folder?.uri + `/${filename}`;
     }
-    if (!options.silent) {
+    if (!options?.silent) {
       presentSheet({
         title: strings.network.fileDownloaded(),
         paragraph: strings.fileSaved(filename, Platform.OS),
         icon: "download",
-        context: global ? null : attachment.hash,
+        context: global ? "global" : attachment.hash,
         component: <ShareComponent uri={fileUri} name={filename} padding={12} />
       });
     }
@@ -298,14 +327,26 @@ export default async function downloadAttachment(
     if (attachment.dateUploaded) {
       RNFetchBlob.fs
         .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}`)
-        .catch(console.log);
+        .catch(() => {
+          /* empty */
+        });
       RNFetchBlob.fs
         .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}_dcache`)
-        .catch(console.log);
+        .catch(() => {
+          /* empty */
+        });
     }
+
+    useAttachmentStore.getState().setDownloading({
+      groupId: options?.groupId || attachment.hash,
+      current: 0,
+      total: 0,
+      filename: attachment.filename,
+      success: false
+    });
     DatabaseLogger.error(e);
     useAttachmentStore.getState().remove(attachment.hash);
-    if (options.throwError) {
+    if (options?.throwError) {
       throw e;
     }
   }

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

@@ -17,6 +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 { RequestOptions } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import NetInfo from "@react-native-community/netinfo";
 import RNFetchBlob from "react-native-blob-util";
@@ -26,7 +27,13 @@ import { DatabaseLogger, db } from "../database";
 import { createCacheDir, exists } from "./io";
 import { ABYTES, cacheDir, getUploadedFileSize, parseS3Error } from "./utils";
 
-export async function downloadFile(filename, requestOptions, cancelToken) {
+export async function downloadFile(
+  filename: string,
+  requestOptions: RequestOptions,
+  cancelToken: {
+    cancel: (reason?: string) => Promise<void>;
+  }
+) {
   if (!requestOptions) {
     DatabaseLogger.log(
       `Error downloading file: ${filename}, reason: No requestOptions`
@@ -36,9 +43,11 @@ export async function downloadFile(filename, requestOptions, cancelToken) {
 
   DatabaseLogger.log(`Downloading ${filename}`);
   await createCacheDir();
-  let { url, headers, chunkSize } = requestOptions;
-  let tempFilePath = `${cacheDir}/${filename}_temp`;
-  let originalFilePath = `${cacheDir}/${filename}`;
+
+  const { url, headers, chunkSize } = requestOptions;
+  const tempFilePath = `${cacheDir}/${filename}_temp`;
+  const originalFilePath = `${cacheDir}/${filename}`;
+
   try {
     if (await exists(filename)) {
       DatabaseLogger.log(`File Exists already: ${filename}`);
@@ -46,6 +55,8 @@ export async function downloadFile(filename, requestOptions, cancelToken) {
     }
 
     const attachment = await db.attachments.attachment(filename);
+    if (!attachment) return false;
+
     const size = await getUploadedFileSize(filename);
 
     if (size === -1) {
@@ -71,21 +82,21 @@ export async function downloadFile(filename, requestOptions, cancelToken) {
       throw new Error(error);
     }
 
-    let res = await fetch(url, {
+    const resolveUrlResponse = await fetch(url, {
       method: "GET",
       headers
     });
 
-    if (!res.ok) {
+    if (!resolveUrlResponse.ok) {
       DatabaseLogger.log(
-        `Error downloading file: ${filename}, ${res.status}, ${res.statusText}, reason: Unable to resolve download url`
+        `Error downloading file: ${filename}, ${resolveUrlResponse.status}, ${resolveUrlResponse.statusText}, reason: Unable to resolve download url`
       );
       throw new Error(
-        `${res.status}: ${strings.failedToResolvedDownloadUrl()}`
+        `${resolveUrlResponse.status}: ${strings.failedToResolvedDownloadUrl()}`
       );
     }
 
-    const downloadUrl = await res.text();
+    const downloadUrl = await resolveUrlResponse.text();
 
     if (!downloadUrl) {
       DatabaseLogger.log(
@@ -95,12 +106,12 @@ export async function downloadFile(filename, requestOptions, cancelToken) {
     }
 
     DatabaseLogger.log(`Download starting: ${filename}`);
-    let request = RNFetchBlob.config({
+    const request = RNFetchBlob.config({
       path: tempFilePath,
       IOSBackgroundTask: true,
       overwrite: true
     })
-      .fetch("GET", downloadUrl, null)
+      .fetch("GET", downloadUrl)
       .progress(async (recieved, total) => {
         useAttachmentStore
           .getState()
@@ -109,15 +120,16 @@ export async function downloadFile(filename, requestOptions, cancelToken) {
         DatabaseLogger.log(`Downloading: ${filename}, ${recieved}/${total}`);
       });
 
-    cancelToken.cancel = () => {
+    cancelToken.cancel = async (reason) => {
       useAttachmentStore.getState().remove(filename);
       request.cancel();
-      RNFetchBlob.fs.unlink(tempFilePath).catch(console.log);
-      DatabaseLogger.log(`Download cancelled: ${filename}`);
+      RNFetchBlob.fs.unlink(tempFilePath).catch(() => {
+        /* empty */
+      });
+      DatabaseLogger.log(`Download cancelled: ${reason} ${filename}`);
     };
 
-    let response = await request;
-    console.log(response.info().headers);
+    const response = await request;
 
     const contentType =
       response.info().headers?.["content-type"] ||
@@ -128,14 +140,18 @@ export async function downloadFile(filename, requestOptions, cancelToken) {
       throw new Error(`[${error.Code}] ${error.Message}`);
     }
 
-    let status = response.info().status;
+    const status = response.info().status;
     useAttachmentStore.getState().remove(filename);
 
-    if (exists(originalFilePath)) {
-      await RNFetchBlob.fs.unlink(originalFilePath).catch(console.log);
+    if (await exists(originalFilePath)) {
+      await RNFetchBlob.fs.unlink(originalFilePath).catch(() => {
+        /* empty */
+      });
     }
 
-    await RNFetchBlob.fs.mv(tempFilePath, originalFilePath);
+    await RNFetchBlob.fs.mv(tempFilePath, originalFilePath).catch(() => {
+      /* empty */
+    });
 
     if (!(await exists(filename))) {
       throw new Error("File size mismatch");
@@ -143,11 +159,14 @@ export async function downloadFile(filename, requestOptions, cancelToken) {
 
     return status >= 200 && status < 300;
   } catch (e) {
-    if (e.message !== "canceled" && !e.message.includes("NoSuchKey")) {
+    if (
+      (e as Error).message !== "canceled" &&
+      !(e as Error).message.includes("NoSuchKey")
+    ) {
       const toast = {
-        heading: strings.downloadError(),
-        message: e.message,
-        type: "error",
+        heading: strings.downloadError((e as Error).message),
+        message: (e as Error).message,
+        type: "error" as const,
         context: "global"
       };
       ToastManager.show(toast);
@@ -156,17 +175,20 @@ export async function downloadFile(filename, requestOptions, cancelToken) {
     }
 
     useAttachmentStore.getState().remove(filename);
-    RNFetchBlob.fs.unlink(tempFilePath).catch(console.log);
-    RNFetchBlob.fs.unlink(originalFilePath).catch(console.log);
-    DatabaseLogger.error(e, {
-      url,
-      headers
+    RNFetchBlob.fs.unlink(tempFilePath).catch(() => {
+      /* empty */
+    });
+    RNFetchBlob.fs.unlink(originalFilePath).catch(() => {
+      /* empty */
+    });
+    DatabaseLogger.error(e, "Download failed: ", {
+      url
     });
     return false;
   }
 }
 
-export async function checkAttachment(hash) {
+export async function checkAttachment(hash: string) {
   const internetState = await NetInfo.fetch();
   const isInternetReachable =
     internetState.isConnected && internetState.isInternetReachable;
@@ -176,7 +198,7 @@ export async function checkAttachment(hash) {
 
   try {
     const size = await getUploadedFileSize(hash);
-    console.log("File Size", size);
+
     if (size === -1) return { success: true };
 
     if (size === 0)
@@ -184,7 +206,7 @@ export async function checkAttachment(hash) {
         failed: `File length is 0. Please upload this file again from the attachment manager. (File hash: ${hash})`
       };
   } catch (e) {
-    return { failed: e?.message };
+    return { failed: (e as Error)?.message };
   }
   return { success: true };
 }

apps/mobile/app/common/filesystem/index.ts

@@ -17,24 +17,41 @@ 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 { IFileStorage } from "@notesnook/core";
 import { checkAttachment, downloadFile } from "./download";
 import {
+  bulkExists,
+  clearCache,
   clearFileStorage,
+  deleteCacheFileByName,
+  deleteCacheFileByPath,
   deleteFile,
   exists,
-  readEncrypted,
-  writeEncryptedBase64,
+  getCacheSize,
   hashBase64,
+  readEncrypted,
+  writeEncryptedBase64
+} from "./io";
+import { uploadFile } from "./upload";
+import {
+  cancelable,
+  checkAndCreateDir,
+  getUploadedFileSize,
+  requestPermission
+} from "./utils";
+
+export default {
+  checkAttachment,
   clearCache,
   deleteCacheFileByName,
   deleteCacheFileByPath,
-  bulkExists,
-  getCacheSize
-} from "./io";
-import { uploadFile } from "./upload";
-import { cancelable, getUploadedFileSize } from "./utils";
+  getCacheSize,
+  requestPermission,
+  checkAndCreateDir,
+  getUploadedFileSize
+};
 
-export default {
+export const FileStorage: IFileStorage = {
   readEncrypted,
   writeEncryptedBase64,
   hashBase64,
@@ -44,10 +61,5 @@ export default {
   exists,
   clearFileStorage,
   getUploadedFileSize,
-  checkAttachment,
-  clearCache,
-  deleteCacheFileByName,
-  deleteCacheFileByPath,
-  bulkExists,
-  getCacheSize
+  bulkExists
 };

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

@@ -18,6 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import Sodium from "@ammarahmed/react-native-sodium";
+import {
+  FileEncryptionMetadataWithHash,
+  FileEncryptionMetadataWithOutputType,
+  Output,
+  RequestOptions
+} from "@notesnook/core";
+import { DataFormat, SerializedKey } from "@notesnook/crypto";
 import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import { eSendEvent } from "../../services/event-manager";
@@ -25,17 +32,21 @@ import { IOS_APPGROUPID } from "../../utils/constants";
 import { DatabaseLogger, db } from "../database";
 import { ABYTES, cacheDir, cacheDirOld, getRandomId } from "./utils";
 
-export async function readEncrypted(filename, key, cipherData) {
+export async function readEncrypted<TOutputFormat extends DataFormat>(
+  filename: string,
+  key: SerializedKey,
+  cipherData: FileEncryptionMetadataWithOutputType<TOutputFormat>
+) {
   await migrateFilesFromCache();
   DatabaseLogger.log("Read encrypted file...");
-  let path = `${cacheDir}/${filename}`;
+  const path = `${cacheDir}/${filename}`;
 
   try {
     if (!(await exists(filename))) {
-      return false;
+      return;
     }
 
-    let output = await Sodium.decryptFile(
+    const output = await Sodium.decryptFile(
       key,
       {
         ...cipherData,
@@ -47,15 +58,16 @@ export async function readEncrypted(filename, key, cipherData) {
 
     DatabaseLogger.log("File decrypted...");
 
-    return output;
+    return output as Output<TOutputFormat>;
   } catch (e) {
-    RNFetchBlob.fs.unlink(path).catch(console.log);
+    RNFetchBlob.fs.unlink(path).catch(() => {
+      /* empty */
+    });
     DatabaseLogger.error(e);
-    return false;
   }
 }
 
-export async function hashBase64(data) {
+export async function hashBase64(data: string) {
   const hash = await Sodium.hashFile({
     type: "base64",
     data,
@@ -67,61 +79,79 @@ export async function hashBase64(data) {
   };
 }
 
-export async function writeEncryptedBase64(data, key) {
+export async function writeEncryptedBase64(
+  data: string,
+  encryptionKey: SerializedKey,
+  mimeType: string
+): Promise<FileEncryptionMetadataWithHash> {
   await createCacheDir();
-  let filepath = cacheDir + `/${getRandomId("imagecache_")}`;
+  const filepath = cacheDir + `/${getRandomId("imagecache_")}`;
   await RNFetchBlob.fs.writeFile(filepath, data, "base64");
-  let output = await Sodium.encryptFile(key, {
+  const output = await Sodium.encryptFile(encryptionKey, {
     uri: Platform.OS === "ios" ? filepath : "file://" + filepath,
     type: "url"
   });
-  RNFetchBlob.fs.unlink(filepath).catch(console.log);
-  console.log("encrypted file output: ", output);
-  output.size = output.length;
-  delete output.length;
+
+  RNFetchBlob.fs.unlink(filepath).catch(() => {
+    /* empty */
+  });
+
   return {
     ...output,
     alg: "xcha-stream"
   };
 }
 
-export async function deleteFile(filename, data) {
+export async function deleteFile(
+  filename: string,
+  requestOptions?: RequestOptions
+): Promise<boolean> {
   await createCacheDir();
-  let delFilePath = cacheDir + `/${filename}`;
-  if (!data) {
-    if (!filename) return;
-    RNFetchBlob.fs.unlink(delFilePath).catch(console.log);
+  const localFilePath = cacheDir + `/${filename}`;
+  if (!requestOptions) {
+    RNFetchBlob.fs.unlink(localFilePath).catch(() => {
+      /* empty */
+    });
     return true;
   }
 
-  let { url, headers } = data;
+  const { url, headers } = requestOptions;
+
   try {
-    let response = await RNFetchBlob.fetch("DELETE", url, headers);
-    let status = response.info().status;
-    let ok = status >= 200 && status < 300;
+    const response = await RNFetchBlob.fetch("DELETE", url, headers);
+    const status = response.info().status;
+    const ok = status >= 200 && status < 300;
     if (ok) {
-      RNFetchBlob.fs.unlink(delFilePath).catch(console.log);
+      RNFetchBlob.fs.unlink(localFilePath).catch(() => {
+        /* empty */
+      });
     }
     return ok;
   } catch (e) {
-    console.log("delete file: ", e, url, headers);
+    DatabaseLogger.error(e, "Delete file", {
+      url: url
+    });
     return false;
   }
 }
 
 export async function clearFileStorage() {
   try {
-    let files = await RNFetchBlob.fs.ls(cacheDir);
-    let oldCache = await RNFetchBlob.fs.ls(cacheDirOld);
+    const files = await RNFetchBlob.fs.ls(cacheDir);
+    const oldCache = await RNFetchBlob.fs.ls(cacheDirOld);
 
-    for (let file of files) {
-      await RNFetchBlob.fs.unlink(cacheDir + `/${file}`).catch(console.log);
+    for (const file of files) {
+      await RNFetchBlob.fs.unlink(cacheDir + `/${file}`).catch(() => {
+        /* empty */
+      });
     }
-    for (let file of oldCache) {
-      await RNFetchBlob.fs.unlink(cacheDirOld + `/${file}`).catch(console.log);
+    for (const file of oldCache) {
+      await RNFetchBlob.fs.unlink(cacheDirOld + `/${file}`).catch(() => {
+        /* empty */
+      });
     }
   } catch (e) {
-    console.log("clearFileStorage", e);
+    DatabaseLogger.error(e, "clearFileStorage");
   }
 }
 
@@ -142,62 +172,91 @@ export async function migrateFilesFromCache() {
     const migratedFilesPath = cacheDir + "/.migrated_1";
     const migrated = await RNFetchBlob.fs.exists(migratedFilesPath);
     if (migrated) {
-      console.log("Files migrated already");
       return;
     }
 
-    let files = await RNFetchBlob.fs.ls(cacheDir);
-    console.log("Files to migrate:", files.join(","));
+    const files = await RNFetchBlob.fs.ls(cacheDir);
 
-    let oldCache = await RNFetchBlob.fs.ls(cacheDirOld);
-    for (let file of oldCache) {
+    const oldCache = await RNFetchBlob.fs.ls(cacheDirOld);
+    for (const file of oldCache) {
       if (file.startsWith("org.") || file.startsWith("com.")) continue;
       RNFetchBlob.fs
         .mv(cacheDirOld + `/${file}`, cacheDir + `/${file}`)
-        .catch(console.log);
-      console.log("Moved", file);
+        .catch(() => {
+          /* empty */
+        });
     }
     await RNFetchBlob.fs.createFile(migratedFilesPath, "1", "utf8");
   } catch (e) {
-    console.log("migrateFilesFromCache", e);
+    DatabaseLogger.error(e, "migrateFilesFromCache");
   }
 }
 
 export async function clearCache() {
-  await RNFetchBlob.fs.unlink(cacheDir).catch(console.log);
+  await RNFetchBlob.fs.unlink(cacheDir).catch(() => {
+    /* empty */
+  });
   await createCacheDir();
   eSendEvent("cache-cleared");
 }
 
-export async function deleteCacheFileByPath(path) {
-  await RNFetchBlob.fs.unlink(path).catch(console.log);
+export async function deleteCacheFileByPath(path: string) {
+  await RNFetchBlob.fs.unlink(path).catch(() => {
+    /* empty */
+  });
 }
 
-export async function deleteCacheFileByName(name) {
+export async function deleteCacheFileByName(name: string) {
   const iosAppGroup =
     Platform.OS === "ios"
-      ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+      ? await (RNFetchBlob.fs as any).pathForAppGroup(IOS_APPGROUPID)
       : null;
   const appGroupPath = `${iosAppGroup}/${name}`;
-  await RNFetchBlob.fs.unlink(appGroupPath).catch(console.log);
-  await RNFetchBlob.fs.unlink(`${cacheDir}/${name}`).catch(console.log);
+  await RNFetchBlob.fs.unlink(appGroupPath).catch(() => {
+    /* empty */
+  });
+  await RNFetchBlob.fs.unlink(`${cacheDir}/${name}`).catch(() => {
+    /* empty */
+  });
 }
 
 export async function deleteDCacheFiles() {
   const files = await RNFetchBlob.fs.ls(cacheDir);
   for (const file of files) {
-    if (file.includes("_dcache")) {
-      await RNFetchBlob.fs.unlink(file).catch(console.log);
+    if (file.includes("_dcache") || file.startsWith("NN_")) {
+      await RNFetchBlob.fs.unlink(file).catch(() => {
+        /* empty */
+      });
     }
   }
 }
 
-export async function exists(filename) {
-  let path = `${cacheDir}/${filename}`;
+export async function getCachePathForFile(filename: string) {
+  const path = `${cacheDir}/${filename}`;
 
   const iosAppGroup =
     Platform.OS === "ios"
-      ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+      ? await (RNFetchBlob.fs as any).pathForAppGroup(IOS_APPGROUPID)
+      : null;
+  const appGroupPath = `${iosAppGroup}/${filename}`;
+
+  const exists = await RNFetchBlob.fs.exists(path);
+
+  // Check if file is present in app group path.
+  let existsInAppGroup = false;
+  if (!exists && Platform.OS === "ios") {
+    existsInAppGroup = await RNFetchBlob.fs.exists(appGroupPath);
+  }
+
+  return existsInAppGroup ? appGroupPath : path;
+}
+
+export async function exists(filename: string) {
+  const path = `${cacheDir}/${filename}`;
+
+  const iosAppGroup =
+    Platform.OS === "ios"
+      ? await (RNFetchBlob.fs as any).pathForAppGroup(IOS_APPGROUPID)
       : null;
   const appGroupPath = `${iosAppGroup}/${filename}`;
 
@@ -211,6 +270,7 @@ export async function exists(filename) {
 
   if (exists || existsInAppGroup) {
     const attachment = await db.attachments.attachment(filename);
+    if (!attachment) return false;
     const totalChunks = Math.ceil(attachment.size / attachment.chunkSize);
     const totalAbytes = totalChunks * ABYTES;
     const expectedFileSize = attachment.size + totalAbytes;
@@ -225,7 +285,9 @@ export async function exists(filename) {
       );
       RNFetchBlob.fs
         .unlink(existsInAppGroup ? appGroupPath : path)
-        .catch(console.log);
+        .catch(() => {
+          /* empty */
+        });
       return false;
     }
 
@@ -234,7 +296,7 @@ export async function exists(filename) {
   return exists;
 }
 
-export async function bulkExists(files) {
+export async function bulkExists(files: string[]) {
   try {
     await createCacheDir();
     const cacheFiles = await RNFetchBlob.fs.ls(cacheDir);
@@ -243,7 +305,7 @@ export async function bulkExists(files) {
     if (Platform.OS === "ios") {
       const iosAppGroup =
         Platform.OS === "ios"
-          ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+          ? await (RNFetchBlob.fs as any).pathForAppGroup(IOS_APPGROUPID)
           : null;
       const appGroupFiles = await RNFetchBlob.fs.ls(iosAppGroup);
       missingFiles = missingFiles.filter(
@@ -261,9 +323,9 @@ export async function getCacheSize() {
   await createCacheDir();
   const stat = await RNFetchBlob.fs.lstat(`file://` + cacheDir);
   let total = 0;
-  console.log("Total files", stat.length);
-  stat.forEach((s) => {
-    total += parseInt(s.size);
+
+  stat.forEach((file) => {
+    total += parseInt(file.size as unknown as string);
   });
   return total;
 }

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

@@ -17,6 +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 { RequestOptions } from "@notesnook/core";
 import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import { ToastManager } from "../../services/event-manager";
@@ -24,11 +25,22 @@ import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { IOS_APPGROUPID } from "../../utils/constants";
 import { DatabaseLogger, db } from "../database";
 import { createCacheDir } from "./io";
-import { cacheDir, checkUpload, getUploadedFileSize } from "./utils";
+import {
+  cacheDir,
+  checkUpload,
+  FileSizeResult,
+  getUploadedFileSize
+} from "./utils";
 
-export async function uploadFile(filename, requestOptions, cancelToken) {
+export async function uploadFile(
+  filename: string,
+  requestOptions: RequestOptions,
+  cancelToken: {
+    cancel: (reason?: string) => Promise<void>;
+  }
+) {
   if (!requestOptions) return false;
-  let { url, headers } = requestOptions;
+  const { url, headers } = requestOptions;
   await createCacheDir();
   DatabaseLogger.info(`Preparing to upload file: ${filename}`);
 
@@ -39,7 +51,7 @@ export async function uploadFile(filename, requestOptions, cancelToken) {
     if (!exists && Platform.OS === "ios") {
       const iosAppGroup =
         Platform.OS === "ios"
-          ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+          ? await (RNFetchBlob.fs as any).pathForAppGroup(IOS_APPGROUPID)
           : null;
       const appGroupPath = `${iosAppGroup}/${filename}`;
       filePath = appGroupPath;
@@ -54,14 +66,15 @@ export async function uploadFile(filename, requestOptions, cancelToken) {
 
     const fileSize = (await RNFetchBlob.fs.stat(filePath)).size;
 
-    let remoteFileSize = await getUploadedFileSize(filename);
-    if (remoteFileSize === -1) return false;
-    if (remoteFileSize > 0 && remoteFileSize === fileSize) {
+    const remoteFileSize = await getUploadedFileSize(filename);
+    if (remoteFileSize === FileSizeResult.Error) return false;
+
+    if (remoteFileSize > FileSizeResult.Empty && remoteFileSize === fileSize) {
       DatabaseLogger.log(`File ${filename} is already uploaded.`);
       return true;
     }
 
-    let uploadUrlResponse = await fetch(url, {
+    const uploadUrlResponse = await fetch(url, {
       method: "PUT",
       headers
     });
@@ -78,7 +91,8 @@ export async function uploadFile(filename, requestOptions, cancelToken) {
 
     DatabaseLogger.info(`Starting upload: ${filename}`);
 
-    let uploadRequest = RNFetchBlob.config({
+    const uploadRequest = RNFetchBlob.config({
+      //@ts-ignore
       IOSBackgroundTask: !globalThis["IS_SHARE_EXTENSION"]
     })
       .fetch(
@@ -98,14 +112,14 @@ export async function uploadFile(filename, requestOptions, cancelToken) {
         );
       });
 
-    cancelToken.cancel = () => {
+    cancelToken.cancel = async () => {
       useAttachmentStore.getState().remove(filename);
       uploadRequest.cancel();
     };
 
-    let uploadResponse = await uploadRequest;
-    let status = uploadResponse.info().status;
-    let uploaded = status >= 200 && status < 300;
+    const uploadResponse = await uploadRequest;
+    const status = uploadResponse.info().status;
+    const uploaded = status >= 200 && status < 300;
 
     useAttachmentStore.getState().remove(filename);
 
@@ -118,12 +132,13 @@ export async function uploadFile(filename, requestOptions, cancelToken) {
       );
     }
     const attachment = await db.attachments.attachment(filename);
+    if (!attachment) return false;
     await checkUpload(filename, requestOptions.chunkSize, attachment.size);
     DatabaseLogger.info(`File upload status: ${filename}, ${status}`);
     return uploaded;
   } catch (e) {
     useAttachmentStore.getState().remove(filename);
-    ToastManager.error(e, "File upload failed");
+    ToastManager.error(e as Error, "File upload failed");
     DatabaseLogger.error(e, "File upload failed", {
       filename
     });

apps/mobile/app/common/filesystem/utils.ts

@@ -17,11 +17,11 @@ 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 { hosts, RequestOptions } from "@notesnook/core";
 import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import * as ScopedStorage from "react-native-scoped-storage";
 import { DatabaseLogger, db } from "../database";
-import { hosts } from "@notesnook/core";
 
 export const ABYTES = 17;
 export const cacheDirOld = RNFetchBlob.fs.dirs.CacheDir;
@@ -31,18 +31,13 @@ export const cacheDir =
     ? RNFetchBlob.fs.dirs.LibraryDir + "/.cache"
     : RNFetchBlob.fs.dirs.DocumentDir + "/.cache";
 
-export function getRandomId(prefix) {
+export function getRandomId(prefix: string) {
   return Math.random()
     .toString(36)
     .replace("0.", prefix || "");
 }
 
-/**
- *
- * @param {string | undefined} data
- * @returns
- */
-export function parseS3Error(data) {
+export function parseS3Error(data?: string) {
   const xml = typeof data === "string" ? data : null;
 
   const error = {
@@ -70,11 +65,19 @@ export function parseS3Error(data) {
   }
 }
 
-export function cancelable(operation) {
+export function cancelable(
+  operation: (
+    filename: string,
+    requestOptions: RequestOptions,
+    cancelToken: {
+      cancel: (reason?: string) => Promise<void>;
+    }
+  ) => Promise<boolean>
+) {
   const cancelToken = {
-    cancel: () => {}
+    cancel: async (reason?: string) => {}
   };
-  return (filename, requestOptions) => {
+  return (filename: string, requestOptions: RequestOptions) => {
     return {
       execute: () => operation(filename, requestOptions, cancelToken),
       cancel: async () => {
@@ -84,29 +87,35 @@ export function cancelable(operation) {
   };
 }
 
-export function copyFileAsync(source, dest) {
+export function copyFileAsync(source: string, dest: string) {
   return new Promise((resolve, reject) => {
-    ScopedStorage.copyFile(source, dest, (e, r) => {
+    //@ts-ignore
+    ScopedStorage.copyFile(source, dest, (e: any, r: any) => {
       if (e) {
         reject(e);
         return;
       }
-      resolve();
+      resolve(true);
     });
   });
 }
 
-export async function releasePermissions(path) {
+export async function releasePermissions(path: string) {
   if (Platform.OS === "ios") return;
   const uris = await ScopedStorage.getPersistedUriPermissions();
-  for (let uri of uris) {
+  for (const uri of uris) {
     if (path.startsWith(uri)) {
       await ScopedStorage.releasePersistableUriPermission(uri);
     }
   }
 }
 
-export async function getUploadedFileSize(hash) {
+export const FileSizeResult = {
+  Empty: 0,
+  Error: -1
+};
+
+export async function getUploadedFileSize(hash: string, retry = 0) {
   try {
     const url = `${hosts.API_HOST}/s3?name=${hash}`;
     const token = await db.tokenManager.getAccessToken();
@@ -114,17 +123,37 @@ export async function getUploadedFileSize(hash) {
       method: "HEAD",
       headers: { Authorization: `Bearer ${token}` }
     });
+
+    if (
+      !attachmentInfo.ok ||
+      attachmentInfo.headers?.get("content-length") === null
+    ) {
+      if (retry < 3) {
+        DatabaseLogger.log(`Retrying file size check: ${hash}, ${retry}`);
+        return getUploadedFileSize(hash, retry + 1);
+      }
+      throw new Error(
+        `File size check failed: ${hash}, ${
+          attachmentInfo.status
+        }, ${attachmentInfo.headers?.get("content-length")}`
+      );
+    }
+
     const contentLength = parseInt(
-      attachmentInfo.headers?.get("content-length")
+      attachmentInfo.headers?.get("content-length") as string
     );
-    return isNaN(contentLength) ? 0 : contentLength;
+    return isNaN(contentLength) ? FileSizeResult.Empty : contentLength;
   } catch (e) {
     DatabaseLogger.error(e);
-    return -1;
+    return FileSizeResult.Error;
   }
 }
 
-export async function checkUpload(filename, chunkSize, expectedSize) {
+export async function checkUpload(
+  filename: string,
+  chunkSize: number,
+  expectedSize: number
+) {
   const size = await getUploadedFileSize(filename);
   const totalChunks = Math.ceil(size / chunkSize);
   const decryptedLength = size - totalChunks * ABYTES;
@@ -138,3 +167,25 @@ export async function checkUpload(filename, chunkSize, expectedSize) {
       : undefined;
   if (error) throw new Error(error);
 }
+
+export async function requestPermission() {
+  if (Platform.OS === "ios") return true;
+  return true;
+}
+export async function checkAndCreateDir(path: string) {
+  const dir =
+    Platform.OS === "ios"
+      ? RNFetchBlob.fs.dirs.DocumentDir + path
+      : RNFetchBlob.fs.dirs.SDCardDir + "/Notesnook/" + path;
+
+  try {
+    const exists = await RNFetchBlob.fs.exists(dir);
+    const isDir = await RNFetchBlob.fs.isDir(dir);
+    if (!exists || !isDir) {
+      await RNFetchBlob.fs.mkdir(dir);
+    }
+  } catch (e) {
+    await RNFetchBlob.fs.mkdir(dir);
+  }
+  return dir;
+}

apps/mobile/app/common/logger/index.ts

@@ -17,9 +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/>.
 */
 
-function info(context: string, ...logs: unknown[]) {
-  console.log(`${new Date().toLocaleDateString()}::info::${context}:`, ...logs);
-}
+function info(context: string, ...logs: unknown[]) {}
 
 function error(context: string, ...logs: unknown[]) {
   console.log(

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

@@ -24,6 +24,7 @@ import { useMessageStore } from "../../stores/use-message-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { allowedOnPlatform, renderItem } from "./functions";
 import { getContainerBorder } from "../../utils/colors";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Announcement = ({ color }) => {
   const { colors } = useThemeColors();
@@ -36,9 +37,8 @@ export const Announcement = ({ color }) => {
       style={{
         backgroundColor: colors.primary.background,
         width: "100%",
-        paddingHorizontal: 12,
-        paddingTop: 12,
-        paddingBottom: 12
+        paddingHorizontal: DefaultAppStyles.GAP,
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       <View
@@ -54,7 +54,7 @@ export const Announcement = ({ color }) => {
         <View
           style={{
             width: "100%",
-            marginTop: 12
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           {announcement?.body

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

@@ -20,12 +20,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Body = ({ text, style = {} }) => {
   return (
     <Paragraph
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style)
       }}
     >

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

@@ -23,12 +23,13 @@ import { Linking, View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { eCloseAnnouncementDialog } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { PricingPlans } from "../premium/pricing-plans";
 import SheetProvider from "../sheet-provider";
 import { Button } from "../ui/button";
 import { allowedOnPlatform, getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Cta = ({ actions, style = {}, color, inline }) => {
   const { colors } = useThemeColors();
@@ -41,7 +42,9 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
       await sleep(500);
     }
     if (item.type === "link") {
-      Linking.openURL(item.data).catch(console.log);
+      Linking.openURL(item.data).catch(() => {
+        /* empty */
+      });
     } else if (item.type === "promo") {
       presentSheet({
         component: (
@@ -59,7 +62,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
         flexDirection: inline ? "row" : "column"
       }}
@@ -73,7 +76,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={SIZE.sm}
+                fontSize={AppFontSize.sm}
                 type="transparent"
                 textStyle={{
                   textDecorationLine: "underline"
@@ -81,7 +84,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 onPress={() => onPress(item)}
                 bold
                 style={{
-                  height: 30,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
                   alignSelf: "flex-start",
                   paddingHorizontal: 0
                 }}
@@ -93,7 +96,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={SIZE.sm}
+                fontSize={AppFontSize.sm}
                 type="plain"
                 onPress={() => onPress(item)}
                 width={null}
@@ -116,7 +119,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={SIZE.md}
+                fontSize={AppFontSize.md}
                 buttonType={{
                   color: color ? color : colors.primary.accent,
                   text: color
@@ -128,7 +131,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 onPress={() => onPress(item)}
                 width={250}
                 style={{
-                  marginBottom: 5,
+                  marginBottom: DefaultAppStyles.GAP_VERTICAL,
                   borderRadius: 100
                 }}
               />
@@ -139,14 +142,14 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
                 type="plain"
                 onPress={() => onPress(item)}
                 width={null}
                 height={30}
                 style={{
                   minWidth: "50%",
-                  marginTop: 5
+                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
                 }}
                 textStyle={{
                   textDecorationLine: "underline"

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

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
 
@@ -30,7 +30,7 @@ export const Description = ({ text, style = {}, inline }) => {
         ...getStyle(style),
         textAlign: inline ? "left" : style?.textAlign
       }}
-      size={inline ? SIZE.sm : SIZE.md}
+      size={inline ? AppFontSize.sm : AppFontSize.md}
     >
       {text}
     </Paragraph>

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

@@ -28,6 +28,7 @@ import { List } from "./list";
 import { Photo } from "./photo";
 import { SubHeading } from "./subheading";
 import { Title } from "./title";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export function allowedOnPlatform(platforms) {
   if (!platforms) return true;
@@ -53,7 +54,7 @@ const Features = () => {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         alignItems: "center",
         width: "100%"
       }}

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

@@ -22,12 +22,13 @@ import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const List = ({ items, listType, style = {} }) => {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         paddingLeft: listType === "ordered" ? 25 : 25,
         ...getStyle(style)
       }}
@@ -36,7 +37,7 @@ export const List = ({ items, listType, style = {} }) => {
         <View
           key={item.text}
           style={{
-            paddingVertical: 6,
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL,
             flexDirection: "row"
           }}
         >

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

@@ -18,17 +18,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import Heading from "../ui/typography/heading";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const SubHeading = ({ text, style = {} }) => {
   return (
     <Heading
-      size={SIZE.md + 2}
+      size={AppFontSize.md + 2}
       style={{
-        marginHorizontal: 12,
-        marginTop: 12,
+        marginHorizontal: DefaultAppStyles.GAP,
+        marginTop: DefaultAppStyles.GAP_VERTICAL,
         ...getStyle(style)
       }}
     >

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

@@ -20,10 +20,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { useMessageStore } from "../../stores/use-message-store";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Title = ({ text, style = {}, inline }) => {
   const announcements = useMessageStore((state) => state.announcements);
@@ -36,19 +37,19 @@ export const Title = ({ text, style = {}, inline }) => {
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
-        marginBottom: inline ? 5 : 0
+        marginBottom: inline ? DefaultAppStyles.GAP_VERTICAL_SMALL : 0
       }}
     >
       <Heading
         style={{
-          marginHorizontal: 12,
-          marginTop: 12,
+          marginHorizontal: DefaultAppStyles.GAP,
+          marginTop: DefaultAppStyles.GAP_VERTICAL,
           ...getStyle(style),
           textAlign: inline ? "left" : style?.textAlign,
           flexShrink: 1
         }}
         numberOfLines={1}
-        size={inline ? SIZE.md : SIZE.xl}
+        size={inline ? AppFontSize.md : AppFontSize.xl}
       >
         {inline ? text?.toUpperCase() : text}
       </Heading>
@@ -67,7 +68,7 @@ export const Title = ({ text, style = {}, inline }) => {
           right: 0
         }}
         iconSize={24}
-        fontSize={SIZE.xs}
+        fontSize={AppFontSize.xs}
         style={{
           borderRadius: 100,
           paddingVertical: 0,
@@ -80,9 +81,9 @@ export const Title = ({ text, style = {}, inline }) => {
   ) : (
     <Heading
       style={{
-        marginHorizontal: 12,
+        marginHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
-        marginTop: style?.marginTop || 12
+        marginTop: style?.marginTop || DefaultAppStyles.GAP_VERTICAL
       }}
     >
       {text}

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

@@ -44,7 +44,6 @@ import SettingsService from "../../services/settings";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { NotesnookModule } from "../../utils/notesnook-module";
-import { SIZE } from "../../utils/size";
 import { Toast } from "../toast";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
@@ -54,6 +53,9 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { strings } from "@notesnook/intl";
+import { AppFontSize } from "../../utils/size";
+import { editorController } from "../../screens/editor/tiptap/utils";
+import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
 
 const getUser = () => {
   const user = MMKV.getString("user");
@@ -82,7 +84,7 @@ const verifyUserPassword = async (password: string) => {
   }
 };
 
-const AppLockedOverlay = () => {
+const AppLocked = () => {
   const initialLaunchBiometricRequest = useRef(true);
   const { colors } = useThemeColors();
   const user = getUser();
@@ -109,17 +111,25 @@ const AppLockedOverlay = () => {
   );
 
   const onUnlockAppRequested = useCallback(async () => {
+    editorController.current?.commands.blur(useTabStore.getState().currentTab);
+    editorController.current?.commands.blurPassInput();
+
     if (
       !biometricsAuthEnabled ||
       !(await BiometricService.isBiometryAvailable())
-    )
+    ) {
       return;
+    }
 
     biometricUnlockAwaitingUserInput.current = true;
 
     if (Platform.OS === "android") {
       const activityName = await NotesnookModule.getActivityName();
-      if (activityName !== "MainActivity") return;
+      if (
+        activityName !== "MainActivity" &&
+        activityName !== "NotePreviewConfigureActivity"
+      )
+        return;
     }
     useSettingStore.getState().setRequestBiometrics(true);
 
@@ -177,10 +187,15 @@ const AppLockedOverlay = () => {
       (prevState === "background" || initialLaunchBiometricRequest.current)
     ) {
       if (SettingsService.shouldLockAppOnEnterForeground()) {
+        if (useSettingStore.getState().appDidEnterBackgroundForAction) {
+          useSettingStore.getState().setAppDidEnterBackgroundForAction(false);
+          return;
+        }
+
         DatabaseLogger.info("Locking app on entering foreground");
+
         useUserStore.getState().lockApp(true);
       }
-
       if (
         !(
           biometricUnlockAwaitingUserInput.current ||
@@ -279,6 +294,16 @@ const AppLockedOverlay = () => {
                 keyboardType={
                   appLockHasPasswordSecurity ? keyboardType : "default"
                 }
+                onLayout={async () => {
+                  if (
+                    !biometricsAuthEnabled ||
+                    !(await BiometricService.isBiometryAvailable())
+                  ) {
+                    setTimeout(() => {
+                      passwordInputRef.current?.focus();
+                    }, 32);
+                  }
+                }}
                 placeholder={
                   appLockHasPasswordSecurity
                     ? keyboardType === "numeric"
@@ -311,7 +336,7 @@ const AppLockedOverlay = () => {
                     borderRadius: 150,
                     marginBottom: 10
                   }}
-                  fontSize={SIZE.md}
+                  fontSize={AppFontSize.md}
                 />
               </>
             ) : null}
@@ -332,4 +357,4 @@ const AppLockedOverlay = () => {
   ) : null;
 };
 
-export default AppLockedOverlay;
+export default AppLocked;

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

@@ -45,7 +45,7 @@ import {
   eDBItemUpdate,
   eOnLoadNote
 } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
@@ -58,14 +58,17 @@ import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const Actions = ({
   attachment,
   close,
   setAttachments,
-  fwdRef
+  fwdRef,
+  context
 }: {
   attachment: Attachment;
+  context: string;
   setAttachments: (attachments?: VirtualizedGrouping<Attachment>) => void;
   close?: () => void;
   fwdRef: RefObject<ActionSheetRef>;
@@ -79,7 +82,6 @@ const Actions = ({
   const [loading, setLoading] = useState<{
     name?: string;
   }>({});
-
   const actions = [
     {
       name: strings.network.download(),
@@ -88,7 +90,7 @@ const Actions = ({
           await db.fs().cancel(attachment.hash);
           useAttachmentStore.getState().remove(attachment.hash);
         }
-        downloadAttachment(attachment.hash, false);
+        downloadAttachment(attachment.hash, context === "global");
         fwdRef.current?.hide();
       },
       icon: "download"
@@ -165,6 +167,7 @@ const Actions = ({
               setAttachments();
               eSendEvent(eDBItemUpdate, attachment.id);
             }
+            return true;
           },
           positiveText: strings.rename()
         });
@@ -181,18 +184,17 @@ const Actions = ({
         relations
           .map((relation) => relation.fromId)
           .forEach(async (id) => {
-            const tab = useTabStore.getState().getTabForNote(id);
-            if (tab !== undefined) {
-              const isFocused = useTabStore.getState().currentTab === tab;
+            useTabStore.getState().forEachNoteTab(id, async (tab) => {
+              const isFocused = useTabStore.getState().currentTab === tab.id;
               if (isFocused) {
                 eSendEvent(eOnLoadNote, {
                   item: await db.notes.note(id),
                   forced: true
                 });
               } else {
-                editorController.current.commands.setLoading(true, tab);
+                editorController.current.commands.setLoading(true, tab.id);
               }
-            }
+            });
           });
         close?.();
       },
@@ -226,14 +228,15 @@ const Actions = ({
         style={{
           borderBottomWidth: 1,
           borderBottomColor: colors.primary.border,
-          marginBottom: notes && notes.length > 0 ? 0 : 12
+          marginBottom:
+            notes && notes.length > 0 ? 0 : DefaultAppStyles.GAP_VERTICAL
         }}
       >
         <Heading
           style={{
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
-          size={SIZE.lg}
+          size={AppFontSize.lg}
         >
           {filename}
         </Heading>
@@ -241,21 +244,21 @@ const Actions = ({
         <View
           style={{
             flexDirection: "row",
-            marginBottom: 10,
-            paddingHorizontal: 12,
-            marginTop: 6,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
+            paddingHorizontal: DefaultAppStyles.GAP,
+            marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
             gap: 10
           }}
         >
-          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+          <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
             {attachment.mimeType}
           </Paragraph>
-          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+          <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
             {formatBytes(attachment.size)}
           </Paragraph>
 
           {notes.length ? (
-            <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+            <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
               {strings.notes(notes.length)}
             </Paragraph>
           ) : null}
@@ -268,7 +271,7 @@ const Actions = ({
                 context: "local"
               });
             }}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             color={colors.secondary.paragraph}
           >
             {attachment.hash}
@@ -283,16 +286,16 @@ const Actions = ({
           style={{
             borderBottomWidth: 1,
             borderBottomColor: colors.primary.border,
-            marginBottom: 12,
-            paddingVertical: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           <>
             <Heading
               style={{
-                paddingHorizontal: 12
+                paddingHorizontal: DefaultAppStyles.GAP
               }}
-              size={SIZE.sm}
+              size={AppFontSize.sm}
             >
               {strings.listOf()} {strings.dataTypesPlural.note()}:
             </Heading>
@@ -307,14 +310,14 @@ const Actions = ({
                   openNote(item, (item as any).type === "trash");
                 }}
                 style={{
-                  paddingVertical: 12,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL,
                   alignItems: "flex-start",
 
-                  paddingHorizontal: 12
+                  paddingHorizontal: DefaultAppStyles.GAP
                 }}
                 key={item.id}
               >
-                <Paragraph size={SIZE.xs}>{item.title}</Paragraph>
+                <Paragraph size={AppFontSize.xs}>{item.title}</Paragraph>
               </Pressable>
             ))}
           </>
@@ -335,7 +338,7 @@ const Actions = ({
           icon={item.icon}
           loading={loading?.name === item.name}
           type="plain"
-          fontSize={SIZE.sm}
+          fontSize={AppFontSize.sm}
           style={{
             borderRadius: 0,
             justifyContent: "flex-start",
@@ -347,7 +350,7 @@ const Actions = ({
 
       <View
         style={{
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         {failed ? (
@@ -375,6 +378,7 @@ Actions.present = (
         setAttachments={set}
         close={close}
         attachment={attachment}
+        context={context || "global"}
       />
     )
   });

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

@@ -25,12 +25,14 @@ import { TouchableOpacity, View } from "react-native";
 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 { defaultBorderRadius, AppFontSize } 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";
 import { strings } from "@notesnook/intl";
+import { Pressable } from "../ui/pressable";
+import { DefaultAppStyles } from "../../utils/styles";
 
 function getFileExtension(filename: string) {
   const ext = /^.+\.([^.]+)$/.exec(filename);
@@ -69,15 +71,14 @@ export const AttachmentItem = ({
   };
 
   return errorOnly && attachment && !attachment?.failed ? null : (
-    <TouchableOpacity
-      activeOpacity={0.9}
+    <Pressable
       onPress={onPress}
       style={{
         flexDirection: "row",
         marginVertical: 5,
         justifyContent: "space-between",
-        padding: 12,
-        paddingVertical: 6,
+        padding: DefaultAppStyles.GAP,
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL,
         minHeight: 45
       }}
     >
@@ -101,7 +102,7 @@ export const AttachmentItem = ({
                 paddingHorizontal: 2,
                 width: 30,
                 height: 30,
-                borderRadius: 5
+                borderRadius: defaultBorderRadius
               }}
             >
               <Paragraph
@@ -124,7 +125,7 @@ export const AttachmentItem = ({
               }}
             >
               <Paragraph
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 style={{
                   flexWrap: "wrap"
                 }}
@@ -136,7 +137,10 @@ export const AttachmentItem = ({
               </Paragraph>
 
               {!hideWhenNotDownloading ? (
-                <Paragraph color={colors.secondary.paragraph} size={SIZE.xxs}>
+                <Paragraph
+                  color={colors.secondary.paragraph}
+                  size={AppFontSize.xxs}
+                >
                   {strings.fileSize()}: {formatBytes(attachment.size)}
                 </Paragraph>
               ) : null}
@@ -159,7 +163,7 @@ export const AttachmentItem = ({
               }}
             >
               <ProgressCircleComponent
-                size={SIZE.xxl}
+                size={AppFontSize.xxl}
                 progress={
                   currentProgress?.value ? currentProgress?.value / 100 : 0
                 }
@@ -186,6 +190,6 @@ export const AttachmentItem = ({
           )}
         </>
       )}
-    </TouchableOpacity>
+    </Pressable>
   );
 };

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

@@ -38,7 +38,7 @@ import { downloadAttachments } from "../../common/filesystem/download-attachment
 import { AttachmentGroupProgress } from "../../screens/settings/attachment-group-progress";
 import { presentSheet, ToastManager } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
 import { Header } from "../header";
@@ -50,6 +50,7 @@ import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { AttachmentItem } from "./attachment-item";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const DEFAULT_SORTING: SortOptions = {
   sortBy: "dateEdited",
@@ -206,7 +207,7 @@ export const AttachmentDialog = ({
       errorOnly={currentFilter === "errors"}
       attachments={attachments}
       id={index}
-      context="global"
+      context={!isSheet ? "global" : "attachments-list"}
     />
   );
 
@@ -235,7 +236,7 @@ export const AttachmentDialog = ({
     for (let i = 0; i < filteredAttachments.placeholders.length; i++) {
       if (!getState().isWorking) {
         ToastManager.show({
-          message: "Attachment recheck cancelled",
+          message: strings.attachmentRecheckCancelled(),
           type: "info",
           context: isSheet ? "local" : "global"
         });
@@ -322,33 +323,34 @@ export const AttachmentDialog = ({
       ) : null}
       {!isSheet ? (
         <Header
-          title="Manage attachments"
+          title={strings.manageAttachments()}
           renderedInRoute="SettingsGroup"
           canGoBack
-          headerRightButtons={[
-            {
-              onPress() {
-                onCheck();
-              },
-              title: "Recheck all"
-            },
-            {
-              onPress() {
-                if (!attachments) return;
-                presentDialog({
-                  title: `Download ${attachments.placeholders.length} attachments`,
-                  paragraph:
-                    "Are you sure you want to download all attachments?",
-                  positiveText: "Download",
-                  positivePress: async () => {
-                    downloadAttachments(await attachments.ids());
-                  },
-                  negativeText: "Cancel"
-                });
-              },
-              title: "Download all"
-            }
-          ]}
+          // TODO: Add headerRightButtons
+          // headerRightButtons={[
+          //   {
+          //     onPress() {
+          //       onCheck();
+          //     },
+          //     title: strings.recheckAll()
+          //   },
+          //   {
+          //     onPress() {
+          //       if (!attachments) return;
+          //       presentDialog({
+          //         title: strings.doActions.download.attachment(
+          //           attachments.placeholders.length
+          //         ),
+          //         positiveText: strings.network.download(),
+          //         positivePress: async () => {
+          //           downloadAttachments(await attachments.ids());
+          //         },
+          //         negativeText: strings.cancel()
+          //       });
+          //     },
+          //     title: strings.downloadAllAttachments()
+          //   }
+          // ]}
         />
       ) : (
         <View
@@ -356,7 +358,7 @@ export const AttachmentDialog = ({
             flexDirection: "row",
             justifyContent: "space-between",
             alignItems: "center",
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           <Heading>{strings.dataTypesPluralCamelCase.attachment()}</Heading>
@@ -369,37 +371,30 @@ export const AttachmentDialog = ({
             <IconButton
               name="check-all"
               style={{
-                height: 40,
-                width: 40,
                 marginRight: 10
               }}
               color={colors.primary.paragraph}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               onPress={onCheck}
             />
 
             <IconButton
               name="download"
-              style={{
-                height: 40,
-                width: 40
-              }}
               color={colors.primary.paragraph}
               onPress={() => {
                 if (!attachments) return;
                 presentDialog({
-                  title: `Download ${attachments.placeholders.length} attachments`,
-                  paragraph:
-                    "Are you sure you want to download all attachments?",
-                  context: "local",
-                  positiveText: "Download",
+                  title: strings.doActions.download.attachment(
+                    attachments.placeholders.length
+                  ),
+                  positiveText: strings.network.download(),
                   positivePress: async () => {
                     downloadAttachments(await attachments.ids());
                   },
-                  negativeText: "Cancel"
+                  negativeText: strings.cancel()
                 });
               }}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
             />
           </View>
         </View>
@@ -409,7 +404,7 @@ export const AttachmentDialog = ({
         style={{
           width: "100%",
           alignSelf: "center",
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           height: "100%"
         }}
       >
@@ -429,7 +424,7 @@ export const AttachmentDialog = ({
               alignItems: "center",
               width: "100%",
               borderRadius: 10,
-              padding: 10,
+              padding: DefaultAppStyles.GAP_SMALL,
               borderWidth: 1,
               borderColor: colors.primary.border,
               gap: 12,
@@ -457,14 +452,16 @@ export const AttachmentDialog = ({
                 <Paragraph>
                   {rechecker.isWorking
                     ? note
-                      ? `Checking ${rechecker.filter.toLowerCase()} note attachments`
-                      : `Checking ${rechecker.filter.toLowerCase()} attachments`
-                    : "Attachments recheck complete"}
+                      ? strings.checkingNoteAttachments()
+                      : strings.checkingAllAttachments()
+                    : strings.attachmentRecheckComplete()}
                 </Paragraph>
                 <Paragraph>
-                  {`${rechecker.isWorking ? "Please wait... " : ""}Passed: ${
+                  {`${
+                    rechecker.isWorking ? `${strings.pleaseWait()} ` : ""
+                  }${strings.passed()}: ${
                     rechecker.passed
-                  }, Failed: ${rechecker.failed}`}
+                  }, ${strings.failed()}: ${rechecker.failed}`}
                 </Paragraph>
               </View>
             </View>
@@ -472,7 +469,7 @@ export const AttachmentDialog = ({
             <IconButton
               type={rechecker.isWorking ? "errorShade" : "plain"}
               name={rechecker.isWorking ? "close" : "check"}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               color={
                 rechecker.isWorking ? colors.error.icon : colors.primary.accent
               }
@@ -493,7 +490,7 @@ export const AttachmentDialog = ({
               backgroundColor: colors.primary.background,
               flexWrap: "wrap",
               flexDirection: "row",
-              paddingVertical: 12
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
             contentContainerStyle={{
               alignItems: "center"
@@ -510,10 +507,10 @@ export const AttachmentDialog = ({
                   }
                   key={item.title}
                   title={item.title}
-                  fontSize={SIZE.sm}
+                  fontSize={AppFontSize.sm}
                   style={{
                     borderRadius: 100,
-                    paddingHorizontal: 12,
+                    paddingHorizontal: DefaultAppStyles.GAP,
                     height: 40,
                     minWidth: 80
                   }}
@@ -527,7 +524,9 @@ export const AttachmentDialog = ({
                         setAttachments(results);
                         setLoading(false);
                       })
-                      .catch(console.log);
+                      .catch(() => {
+                        /* empty */
+                      });
                   }}
                 />
               )

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

@@ -37,6 +37,7 @@ import { hideAuth, initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const AuthMode = {
   login: 0,
@@ -133,7 +134,7 @@ const AuthModal = () => {
           style={{
             flexDirection: "row",
             alignItems: "center",
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             width: "100%",
             height: 50,
             justifyContent:
@@ -167,7 +168,7 @@ const AuthModal = () => {
                 marginTop: 2
               }}
               style={{
-                paddingHorizontal: 6
+                paddingHorizontal: DefaultAppStyles.GAP_SMALL
               }}
             />
           )}

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

@@ -36,6 +36,7 @@ import { Dialog } from "../dialog";
 import BackupService from "../../services/backup";
 import { sleep } from "../../utils/time";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const ChangePassword = () => {
   const passwordInputRef = useRef();
@@ -68,11 +69,15 @@ export const ChangePassword = () => {
     }
     setLoading(true);
     try {
-      const result = await BackupService.run(false, "change-password-dialog");
-      if (!result.error)
+      const result = await BackupService.run(
+        false,
+        "change-password-dialog",
+        "partial"
+      );
+      if (result.error) {
         throw new Error(strings.backupFailed() + `: ${result.error}`);
+      }
 
-      await db.user.clearSessions();
       await db.user.changePassword(oldPassword.current, password.current);
       ToastManager.show({
         heading: strings.passwordChangedSuccessfully(),
@@ -99,7 +104,7 @@ export const ChangePassword = () => {
     <View
       style={{
         width: "100%",
-        padding: 12
+        padding: DefaultAppStyles.GAP
       }}
     >
       <Dialog context="change-password-dialog" />
@@ -144,7 +149,7 @@ export const ChangePassword = () => {
 
       <Button
         style={{
-          marginTop: 10,
+          marginTop: DefaultAppStyles.GAP_VERTICAL,
           width: "100%"
         }}
         loading={loading}

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

@@ -20,23 +20,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { createRef } from "react";
 import { eSendEvent } from "../../services/event-manager";
 import { eCloseLoginDialog } from "../../utils/events";
+import Navigation from "../../services/navigation";
+export const AuthMode = {
+  login: 0,
+  signup: 1,
+  welcomeSignup: 2,
+  trialSignup: 3
+};
 
 export const initialAuthMode = createRef(0);
 export function hideAuth() {
   eSendEvent(eCloseLoginDialog);
-
-  // if (initialAuthMode.current === 2) {
-  //   Navigation.replace(
-  //     {
-  //       name: 'Notes'
-  //     },
-  //     {
-  //       menu: true
-  //     }
-  //   );
-  // } else {
-  //   Navigation.goBack();
-  // }
-
-  // tabBarRef.current?.unlock();
+  if (initialAuthMode.current === AuthMode.welcomeSignup) {
+    Navigation.replace("FluidPanelsView");
+  } else {
+    Navigation.goBack();
+  }
 }

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

@@ -33,6 +33,7 @@ import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const ForgotPassword = () => {
   const { colors } = useThemeColors("sheet");
@@ -107,7 +108,7 @@ export const ForgotPassword = () => {
         {sent ? (
           <View
             style={{
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               justifyContent: "center",
               alignItems: "center",
               paddingBottom: 50
@@ -138,7 +139,7 @@ export const ForgotPassword = () => {
               backgroundColor: colors.primary.background,
               zIndex: 10,
               width: "100%",
-              padding: 12
+              padding: DefaultAppStyles.GAP
             }}
           >
             <DialogHeader title={strings.accountRecovery()} />
@@ -164,7 +165,7 @@ export const ForgotPassword = () => {
 
             <Button
               style={{
-                marginTop: 10,
+                marginTop: DefaultAppStyles.GAP_VERTICAL,
                 width: "100%"
               }}
               loading={loading}

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

@@ -17,35 +17,98 @@ 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 { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import React, { useState } from "react";
 import { View } from "react-native";
-import { useNavigationFocus } from "../../hooks/use-navigation-focus";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
+import Navigation from "../../services/navigation";
 import { Toast } from "../toast";
-import { initialAuthMode } from "./common";
+import { Button } from "../ui/button";
+import { IconButton } from "../ui/icon-button";
+import { AuthMode, initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
-
-export const AuthMode = {
-  login: 0,
-  signup: 1,
-  welcomeSignup: 2,
-  trialSignup: 3
-};
+import { useNavigationFocus } from "../../hooks/use-navigation-focus";
+import { DefaultAppStyles } from "../../utils/styles";
+import { useSettingStore } from "../../stores/use-setting-store";
 
 const Auth = ({ navigation, route }) => {
   const [currentAuthMode, setCurrentAuthMode] = useState(
     route?.params?.mode || AuthMode.login
   );
+  const deviceMode = useSettingStore((state) => state.deviceMode);
+  const { colors } = useThemeColors();
+  const insets = useGlobalSafeAreaInsets();
   initialAuthMode.current = route?.params.mode || AuthMode.login;
-  useNavigationFocus(navigation, {
-    onFocus: () => {
-      //tabBarRef?.current.lock();
-      initialAuthMode.current = route?.params.mode || AuthMode.login;
-    }
-  });
+  useNavigationFocus(navigation, {});
 
   return (
     <View style={{ flex: 1 }}>
+      <View
+        style={{
+          position: "absolute",
+          paddingTop: insets.top,
+          top: 0,
+          zIndex: 999,
+          backgroundColor:
+            deviceMode === "mobile" ? colors.secondary.background : null,
+          width: "100%"
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            paddingHorizontal: DefaultAppStyles.GAP,
+            width: "100%",
+            height: 50,
+            justifyContent:
+              initialAuthMode.current !== AuthMode.welcomeSignup
+                ? "space-between"
+                : "flex-end"
+          }}
+        >
+          {initialAuthMode.current === AuthMode.welcomeSignup ? null : (
+            <IconButton
+              name="arrow-left"
+              onPress={() => {
+                if (initialAuthMode.current === 2) {
+                  Navigation.replace("FluidPanelsView");
+                } else {
+                  Navigation.goBack();
+                }
+              }}
+              color={colors.primary.paragraph}
+            />
+          )}
+
+          {initialAuthMode.current !== AuthMode.welcomeSignup ? null : (
+            <Button
+              title={strings.skip()}
+              onPress={() => {
+                if (initialAuthMode.current === 2) {
+                  Navigation.replace("FluidPanelsView");
+                } else {
+                  Navigation.goBack();
+                }
+              }}
+              iconSize={16}
+              type="plain"
+              iconPosition="right"
+              icon="chevron-right"
+              height={25}
+              iconStyle={{
+                marginTop: 2
+              }}
+              style={{
+                paddingHorizontal: DefaultAppStyles.GAP_SMALL
+              }}
+            />
+          )}
+        </View>
+      </View>
+
       {currentAuthMode !== AuthMode.login ? (
         <Signup
           changeMode={(mode) => setCurrentAuthMode(mode)}

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

@@ -17,6 +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 { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
@@ -24,10 +25,9 @@ import { SheetManager } from "react-native-actions-sheet";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
 import Sync from "../../services/sync";
-import { useSettingStore } from "../../stores/use-setting-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { eUserLoggedIn } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import SheetProvider from "../sheet-provider";
 import { Progress } from "../sheets/progress";
@@ -38,7 +38,7 @@ import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
 import { useLogin } from "./use-login";
-import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -71,8 +71,8 @@ export const Login = ({ changeMode }) => {
       }
     }, 5000);
   });
-  const deviceMode = useSettingStore((state) => state.deviceMode);
   const { width, height } = useWindowDimensions();
+  const isTablet = width > 600;
   useEffect(() => {
     async () => {
       setStep(LoginSteps.emailAuth);
@@ -96,23 +96,24 @@ export const Login = ({ changeMode }) => {
           backgroundColor: colors.primary.background,
           zIndex: 10,
           width: "100%",
+          height: "100%",
           alignSelf: "center"
         }}
       >
         <View
           style={{
             justifyContent: "flex-end",
-            paddingHorizontal: 20,
+            paddingHorizontal: DefaultAppStyles.GAP,
             backgroundColor: colors.secondary.background,
             borderBottomWidth: 0.8,
-            marginBottom: 12,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
             borderBottomColor: colors.primary.border,
-            alignSelf: deviceMode !== "mobile" ? "center" : undefined,
-            borderWidth: deviceMode !== "mobile" ? 1 : null,
-            borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
-            borderRadius: deviceMode !== "mobile" ? 20 : null,
-            marginTop: deviceMode !== "mobile" ? 50 : null,
-            width: deviceMode === "mobile" ? null : "50%",
+            alignSelf: isTablet ? "center" : undefined,
+            borderWidth: isTablet ? 1 : null,
+            borderColor: isTablet ? colors.primary.border : null,
+            borderRadius: isTablet ? 20 : null,
+            marginTop: isTablet ? 50 : null,
+            width: !isTablet ? null : "70%",
             minHeight: height * 0.4
           }}
         >
@@ -143,10 +144,10 @@ export const Login = ({ changeMode }) => {
           <Heading
             style={{
               marginBottom: 25,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
             extraBold
-            size={SIZE.xxl}
+            size={AppFontSize.xxl}
           >
             {strings.loginToYourAccount()}
           </Heading>
@@ -163,7 +164,7 @@ export const Login = ({ changeMode }) => {
               : "99.9%",
             backgroundColor: colors.primary.background,
             alignSelf: "center",
-            paddingHorizontal: 20
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           <Input
@@ -216,7 +217,7 @@ export const Login = ({ changeMode }) => {
                 title={strings.forgotPassword()}
                 style={{
                   alignSelf: "flex-end",
-                  height: 30,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
                   paddingHorizontal: 0
                 }}
                 onPress={() => {
@@ -226,7 +227,7 @@ export const Login = ({ changeMode }) => {
                 textStyle={{
                   textDecorationLine: "underline"
                 }}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
                 type="plain"
               />
             </>
@@ -244,11 +245,8 @@ export const Login = ({ changeMode }) => {
                 login();
               }}
               style={{
-                width: 250,
-                borderRadius: 100
+                width: 250
               }}
-              height={50}
-              fontSize={SIZE.md}
               type="accent"
               title={!loading ? strings.continue() : null}
             />
@@ -258,19 +256,16 @@ export const Login = ({ changeMode }) => {
                 title={strings.cancelLogin()}
                 style={{
                   alignSelf: "center",
-                  height: 30,
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL,
+                  width: 250
                 }}
                 onPress={() => {
                   if (loading) return;
                   setStep(LoginSteps.emailAuth);
                   setLoading(false);
                 }}
-                textStyle={{
-                  textDecorationLine: "underline"
-                }}
-                fontSize={SIZE.xs}
-                type="errorShade"
+                fontSize={AppFontSize.xs}
+                type="secondaryAccented"
               />
             )}
 
@@ -283,17 +278,17 @@ export const Login = ({ changeMode }) => {
                 activeOpacity={0.8}
                 style={{
                   alignSelf: "center",
-                  marginTop: 12,
-                  paddingVertical: 12
+                  marginTop: DefaultAppStyles.GAP_VERTICAL,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL
                 }}
               >
                 <Paragraph
-                  size={SIZE.xs + 1}
+                  size={AppFontSize.xs}
                   color={colors.secondary.paragraph}
                 >
                   {strings.dontHaveAccount()}{" "}
                   <Paragraph
-                    size={SIZE.xs + 1}
+                    size={AppFontSize.xs}
                     style={{ color: colors.primary.accent }}
                   >
                     {strings.signUp()}

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

@@ -34,7 +34,7 @@ import Sync from "../../services/sync";
 import { clearAllStores } from "../../stores";
 import { useUserStore } from "../../stores/use-user-store";
 import { eLoginSessionExpired, eUserLoggedIn } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import BaseDialog from "../dialog/base-dialog";
@@ -48,18 +48,8 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
 import { strings } from "@notesnook/intl";
-
-function getObfuscatedEmail(email) {
-  if (!email) return "";
-  const [username, provider] = email.split("@");
-  if (username.length === 1) return `****@${provider}`;
-  return email.replace(/(.{1})(.*)(?=@)/, function (gp1, gp2, gp3) {
-    for (let i = 0; i < gp3.length; i++) {
-      gp2 += "*";
-    }
-    return gp2;
-  });
-}
+import { getObfuscatedEmail } from "../../utils/functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const SessionExpired = () => {
   const { colors } = useThemeColors();
@@ -168,7 +158,7 @@ export const SessionExpired = () => {
         <View
           style={{
             width: focused ? "100%" : "99.9%",
-            padding: 12,
+            padding: DefaultAppStyles.GAP,
             justifyContent: "center",
             flex: 1,
             backgroundColor: colors.primary.background
@@ -193,7 +183,7 @@ export const SessionExpired = () => {
               color={colors.error.icon}
               size={50}
             />
-            <Heading size={SIZE.xxxl} color={colors.primary.heading}>
+            <Heading size={AppFontSize.xxxl} color={colors.primary.heading}>
               {strings.sessionExpired()}
             </Heading>
             <Paragraph
@@ -224,7 +214,7 @@ export const SessionExpired = () => {
 
           <Button
             style={{
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               width: 250,
               borderRadius: 100
             }}
@@ -236,7 +226,7 @@ export const SessionExpired = () => {
 
           <Button
             style={{
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               width: "100%"
             }}
             onPress={() => {

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

@@ -17,6 +17,8 @@ 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 { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import React, { useRef, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { db } from "../../common/database";
@@ -24,19 +26,17 @@ import { DDS } from "../../services/device-detection";
 import { ToastManager } from "../../services/event-manager";
 import { clearMessage, setEmailVerifyMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
-import { useThemeColors } from "@notesnook/theme";
+import SettingsService from "../../services/settings";
 import { useUserStore } from "../../stores/use-user-store";
 import { openLinkInBrowser } from "../../utils/functions";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
-import { useSettingStore } from "../../stores/use-setting-store";
-import SettingsService from "../../services/settings";
-import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Signup = ({ changeMode, trial }) => {
   const { colors } = useThemeColors();
@@ -50,8 +50,8 @@ export const Signup = ({ changeMode, trial }) => {
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
   const setLastSynced = useUserStore((state) => state.setLastSynced);
-  const deviceMode = useSettingStore((state) => state.deviceMode);
   const { width, height } = useWindowDimensions();
+  const isTablet = width > 600;
   const validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
       ToastManager.show({
@@ -105,23 +105,24 @@ export const Signup = ({ changeMode, trial }) => {
           backgroundColor: colors.primary.background,
           zIndex: 10,
           width: "100%",
+          height: "100%",
           alignSelf: "center"
         }}
       >
         <View
           style={{
             justifyContent: "flex-end",
-            paddingHorizontal: 20,
+            paddingHorizontal: DefaultAppStyles.GAP,
             backgroundColor: colors.secondary.background,
-            marginBottom: 20,
             borderBottomWidth: 0.8,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
             borderBottomColor: colors.primary.border,
-            alignSelf: deviceMode !== "mobile" ? "center" : undefined,
-            borderWidth: deviceMode !== "mobile" ? 1 : null,
-            borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
-            borderRadius: deviceMode !== "mobile" ? 20 : null,
-            marginTop: deviceMode !== "mobile" ? 50 : null,
-            width: deviceMode === "mobile" ? null : "50%",
+            alignSelf: isTablet ? "center" : undefined,
+            borderWidth: isTablet ? 1 : null,
+            borderColor: isTablet ? colors.primary.border : null,
+            borderRadius: isTablet ? 20 : null,
+            marginTop: isTablet ? 50 : null,
+            width: !isTablet ? null : "70%",
             minHeight: height * 0.4
           }}
         >
@@ -153,9 +154,9 @@ export const Signup = ({ changeMode, trial }) => {
             extraBold
             style={{
               marginBottom: 25,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
-            size={SIZE.xxl}
+            size={AppFontSize.xxl}
           >
             {strings.createYourAccount()}
           </Heading>
@@ -164,7 +165,7 @@ export const Signup = ({ changeMode, trial }) => {
         <View
           style={{
             width: DDS.isTab ? "50%" : "100%",
-            paddingHorizontal: 20,
+            paddingHorizontal: DefaultAppStyles.GAP,
             backgroundColor: colors.primary.background,
             alignSelf: "center"
           }}
@@ -233,12 +234,12 @@ export const Signup = ({ changeMode, trial }) => {
             style={{
               marginBottom: 25
             }}
-            size={SIZE.xs}
+            size={AppFontSize.xxs}
             color={colors.secondary.paragraph}
           >
             {strings.signupAgreement[0]()}
             <Paragraph
-              size={SIZE.xs}
+              size={AppFontSize.xxs}
               onPress={() => {
                 openLinkInBrowser("https://notesnook.com/tos", colors);
               }}
@@ -247,11 +248,12 @@ export const Signup = ({ changeMode, trial }) => {
               }}
               color={colors.primary.accent}
             >
+              {" "}
               {strings.signupAgreement[1]()}
-            </Paragraph>
+            </Paragraph>{" "}
             {strings.signupAgreement[2]()}
             <Paragraph
-              size={SIZE.xs}
+              size={AppFontSize.xxs}
               onPress={() => {
                 openLinkInBrowser("https://notesnook.com/privacy", colors);
               }}
@@ -260,8 +262,9 @@ export const Signup = ({ changeMode, trial }) => {
               }}
               color={colors.primary.accent}
             >
+              {" "}
               {strings.signupAgreement[3]()}
-            </Paragraph>
+            </Paragraph>{" "}
             {strings.signupAgreement[4]()}
           </Paragraph>
 
@@ -270,11 +273,8 @@ export const Signup = ({ changeMode, trial }) => {
             type="accent"
             loading={loading}
             onPress={signup}
-            fontSize={SIZE.md}
             style={{
-              marginRight: 12,
-              width: 250,
-              borderRadius: 100
+              width: 250
             }}
           />
 
@@ -286,14 +286,14 @@ export const Signup = ({ changeMode, trial }) => {
             activeOpacity={0.8}
             style={{
               alignSelf: "center",
-              marginTop: 12,
-              paddingVertical: 12
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
           >
-            <Paragraph size={SIZE.xs + 1} color={colors.secondary.paragraph}>
+            <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
               {strings.alreadyHaveAccount()}{" "}
               <Paragraph
-                size={SIZE.xs + 1}
+                size={AppFontSize.xs}
                 style={{ color: colors.primary.accent }}
               >
                 {strings.login()}

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

@@ -17,8 +17,11 @@ 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 { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { View } from "react-native";
+import { ScrollView } from "react-native-actions-sheet";
 import { db } from "../../common/database/index";
 import useTimer from "../../hooks/use-timer";
 import {
@@ -26,19 +29,15 @@ import {
   presentSheet,
   ToastManager
 } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
 import { eCloseSheet } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
 import { Pressable } from "../ui/pressable";
-import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { useCallback } from "react";
-import { ScrollView } from "react-native-actions-sheet";
-import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
   const { colors } = useThemeColors();
@@ -164,7 +163,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
             textAlign: "center"
           }}
         >
-          {strings["2faCodeHelpText"][currentMethod.method]() ||
+          {strings["2faCodeHelpText"][currentMethod.method]?.() ||
             strings.select2faCodeHelpText()}
         </Paragraph>
 
@@ -206,9 +205,9 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               }}
               onSubmitEditing={onNext}
               caretHidden
+              height={60}
               inputStyle={{
-                fontSize: SIZE.lg,
-                height: 60,
+                fontSize: AppFontSize.lg,
                 textAlign: "center",
                 letterSpacing: 10,
                 width: 250
@@ -218,11 +217,13 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               }
               enablesReturnKeyAutomatically
               containerStyle={{
-                height: 60,
                 borderWidth: 0,
                 width: undefined,
                 minWidth: "50%"
               }}
+              wrapperStyle={{
+                height: 60
+              }}
             />
 
             <Button
@@ -231,9 +232,12 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               width={250}
               loading={loading}
               onPress={onNext}
-              style={{
-                borderRadius: 100
-              }}
+            />
+            <Button
+              title={strings.cancel()}
+              type="secondaryAccented"
+              onPress={onCancel}
+              width={250}
             />
 
             <Button
@@ -244,13 +248,6 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               onPress={onRequestSecondaryMethod}
               height={30}
             />
-
-            <Button
-              title={strings.cancel()}
-              type="plain"
-              onPress={onCancel}
-              height={30}
-            />
           </>
         ) : (
           <>
@@ -264,8 +261,8 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
                   });
                 }}
                 style={{
-                  paddingHorizontal: 12,
-                  paddingVertical: 12,
+                  paddingHorizontal: DefaultAppStyles.GAP,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL,
                   marginTop: 0,
                   flexDirection: "row",
                   borderRadius: 0,
@@ -277,8 +274,6 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
                 <IconButton
                   type="secondaryAccented"
                   style={{
-                    width: 40,
-                    height: 40,
                     marginRight: 10
                   }}
                   size={15}
@@ -290,7 +285,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
                     flexShrink: 1
                   }}
                 >
-                  <Paragraph size={SIZE.md}>{item.title}</Paragraph>
+                  <Paragraph size={AppFontSize.md}>{item.title}</Paragraph>
                 </View>
               </Pressable>
             ))}

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

@@ -70,7 +70,7 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
       switch (step) {
         case LoginSteps.emailAuth: {
           const mfaInfo = await db.user.authenticateEmail(email.current);
-          console.log("email auth", mfaInfo);
+
           if (mfaInfo) {
             TwoFactorVerification.present(
               async (mfa, callback) => {

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

@@ -20,7 +20,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 { Keyboard, TouchableOpacity, View, ViewStyle } from "react-native";
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -33,20 +33,31 @@ import { editorState } from "../../screens/editor/tiptap/utils";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { getElevationStyle } from "../../utils/elevation";
-import { SIZE, normalize } from "../../utils/size";
-import { Pressable } from "../ui/pressable";
+import { AppFontSize, normalize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
+import { hexToRGBA, RGB_Linear_Shade } from "../../utils/colors";
 
 interface FloatingButtonProps {
   onPress: () => void;
   color?: string;
   shouldShow?: boolean;
   alwaysVisible?: boolean;
+  icon?: string;
+  testID?: string;
+  position?: "left" | "right";
+  size?: "small" | "large";
+  style?: ViewStyle;
 }
 
 const FloatingButton = ({
   onPress,
   color,
-  alwaysVisible = false
+  alwaysVisible = false,
+  icon,
+  testID,
+  position = "right",
+  size = "large",
+  style
 }: FloatingButtonProps) => {
   const { colors } = useThemeColors();
   const deviceMode = useSettingStore((state) => state.deviceMode);
@@ -108,20 +119,26 @@ const FloatingButton = ({
       style={[
         {
           position: "absolute",
-          right: 12,
+          right: position === "right" ? DefaultAppStyles.GAP : undefined,
+          left: position === "left" ? DefaultAppStyles.GAP : undefined,
           bottom: 20,
-          zIndex: 10
+          zIndex: 10,
+          ...style
         },
         animatedStyle
       ]}
     >
-      <Pressable
-        testID={notesnook.buttons.add}
-        type="accent"
-        accentColor={color}
+      <TouchableOpacity
+        testID={testID || notesnook.buttons.add}
+        activeOpacity={0.95}
         style={{
           ...getElevationStyle(5),
-          borderRadius: 100
+          borderRadius: size === "small" ? 15 : 20,
+          borderTopWidth: 0,
+          borderBottomWidth: 0,
+          borderLeftWidth: 0,
+          borderRightWidth: 0,
+          backgroundColor: colors.primary.background
         }}
         onPress={onPress}
       >
@@ -129,23 +146,29 @@ const FloatingButton = ({
           style={{
             alignItems: "center",
             justifyContent: "center",
-            height: normalize(60),
-            width: normalize(60)
+            height: normalize(size === "small" ? 40 : 60),
+            width: normalize(size === "small" ? 40 : 60),
+            backgroundColor: color
+              ? RGB_Linear_Shade(0.87, hexToRGBA(color))
+              : colors.primary.shade,
+            borderRadius: size === "small" ? 15 : 20
           }}
         >
           <Icon
             name={
-              route.name === "Notebooks"
+              icon
+                ? icon
+                : route.name === "Notebooks"
                 ? "notebook-plus"
                 : route.name === "Trash"
                 ? "delete"
                 : "plus"
             }
-            color={colors.primary.accentForeground}
-            size={SIZE.xxl}
+            color={color || colors.primary.accent}
+            size={size === "small" ? AppFontSize.xl : AppFontSize.xxxl}
           />
         </View>
-      </Pressable>
+      </TouchableOpacity>
     </Animated.View>
   );
 };

apps/mobile/app/components/delay-layout/default-placeholder.tsx

@@ -23,6 +23,8 @@ import { useMessageStore } from "../../stores/use-message-store";
 import { useThemeColors } from "@notesnook/theme";
 import { ColorValues } from "../../utils/colors";
 import { hexToRGBA } from "../../utils/colors";
+import { defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const DefaultPlaceholder = ({ color }: { color: string }) => {
   const { colors } = useThemeColors();
@@ -40,7 +42,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
     <View
       style={{
         width: "100%",
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       {hasAnnoucements ? (
@@ -51,7 +53,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             borderRadius: 10,
             marginBottom: 20,
             backgroundColor: colors.secondary.background,
-            padding: 12
+            padding: DefaultAppStyles.GAP
           }}
         >
           <View
@@ -59,7 +61,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               width: 150,
               height: 20,
               backgroundColor: colors.primary.hover,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginBottom: 10
             }}
           />
@@ -68,7 +70,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               width: 250,
               height: 14,
               backgroundColor: colors.primary.hover,
-              borderRadius: 5
+              borderRadius: defaultBorderRadius
             }}
           />
 
@@ -78,7 +80,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               height: 15,
               backgroundColor: shadeColor,
               borderRadius: 3,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
           />
         </View>
@@ -93,7 +95,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             marginBottom: 20,
             flexDirection: "row",
             alignItems: "center",
-            paddingHorizontal: 20
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           <View
@@ -111,7 +113,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
                 width: 150,
                 height: 12,
                 backgroundColor: colors.secondary.background,
-                borderRadius: 5,
+                borderRadius: defaultBorderRadius,
                 marginBottom: 10
               }}
             />
@@ -120,7 +122,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
                 width: 250,
                 height: 16,
                 backgroundColor: colors.secondary.background,
-                borderRadius: 5
+                borderRadius: defaultBorderRadius
               }}
             />
           </View>
@@ -134,7 +136,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           backgroundColor: colors.secondary.background,
           borderRadius: 10,
           marginBottom: 20,
-          padding: 5,
+          padding: DefaultAppStyles.GAP_SMALL,
           justifyContent: "space-between",
           flexDirection: "row",
           alignItems: "center"
@@ -179,7 +181,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           width: 200,
           height: 16,
           backgroundColor: colors.secondary.background,
-          borderRadius: 5
+          borderRadius: defaultBorderRadius
         }}
       />
       <View
@@ -187,15 +189,15 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           width: "85%",
           height: 13,
           backgroundColor: colors.secondary.background,
-          borderRadius: 5,
-          marginTop: 10
+          borderRadius: defaultBorderRadius,
+          marginTop: DefaultAppStyles.GAP_VERTICAL
         }}
       />
 
       <View
         style={{
           flexDirection: "row",
-          marginTop: 10
+          marginTop: DefaultAppStyles.GAP_VERTICAL
         }}
       >
         <View
@@ -203,7 +205,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             width: 50,
             height: 10,
             backgroundColor: colors.secondary.background,
-            borderRadius: 5
+            borderRadius: defaultBorderRadius
           }}
         />
         <View
@@ -211,7 +213,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             width: 60,
             height: 10,
             backgroundColor: colors.secondary.background,
-            borderRadius: 5,
+            borderRadius: defaultBorderRadius,
             marginLeft: 10
           }}
         />

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

@@ -17,11 +17,10 @@ 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 { ViewProps } from "react-native";
-import Animated, { FadeOutUp } from "react-native-reanimated";
-import { useDelayLayout } from "../../hooks/use-delay-layout";
 import { useThemeColors } from "@notesnook/theme";
+import React from "react";
+import { View, ViewProps } from "react-native";
+import { useDelayLayout } from "../../hooks/use-delay-layout";
 import { DefaultPlaceholder } from "./default-placeholder";
 import { SettingsPlaceholder } from "./settings-placeholder";
 
@@ -49,8 +48,7 @@ export default function DelayLayout({
   const Placeholder = placeholder[props.type || "default"];
 
   return loading || props.wait ? (
-    <Animated.View
-      exiting={animated ? FadeOutUp : undefined}
+    <View
       style={{
         backgroundColor: colors.primary.background,
         flex: 1,
@@ -58,7 +56,7 @@ export default function DelayLayout({
       }}
     >
       <Placeholder color={props.color || colors.primary.accent} />
-    </Animated.View>
+    </View>
   ) : (
     <>{props.children}</>
   );

apps/mobile/app/components/delay-layout/settings-placeholder.tsx

@@ -20,6 +20,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
+import { defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const SettingsPlaceholder = () => {
   const { colors } = useThemeColors();
@@ -31,7 +33,7 @@ export const SettingsPlaceholder = () => {
           width: 100,
           height: 12,
           backgroundColor: colors.primary.shade,
-          borderRadius: 5,
+          borderRadius: defaultBorderRadius,
           marginLeft: 12,
           marginBottom: 12
         }}
@@ -44,7 +46,7 @@ export const SettingsPlaceholder = () => {
           marginBottom: 20,
           flexDirection: "row",
           alignItems: "center",
-          paddingHorizontal: 16
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         <View
@@ -62,7 +64,7 @@ export const SettingsPlaceholder = () => {
               width: 150,
               height: 12,
               backgroundColor: colors.secondary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginBottom: 10
             }}
           />
@@ -71,7 +73,7 @@ export const SettingsPlaceholder = () => {
               width: 250,
               height: 16,
               backgroundColor: colors.secondary.background,
-              borderRadius: 5
+              borderRadius: defaultBorderRadius
             }}
           />
         </View>
@@ -85,7 +87,7 @@ export const SettingsPlaceholder = () => {
           marginBottom: 20,
           flexDirection: "row",
           alignItems: "center",
-          paddingHorizontal: 16,
+          paddingHorizontal: DefaultAppStyles.GAP,
           justifyContent: "space-between"
         }}
       >
@@ -104,7 +106,7 @@ export const SettingsPlaceholder = () => {
               width: 150,
               height: 12,
               backgroundColor: colors.secondary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginBottom: 10
             }}
           />
@@ -113,7 +115,7 @@ export const SettingsPlaceholder = () => {
               width: 250,
               height: 16,
               backgroundColor: colors.secondary.background,
-              borderRadius: 5
+              borderRadius: defaultBorderRadius
             }}
           />
         </View>

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

@@ -17,6 +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 { ScopedThemeProvider } from "@notesnook/theme";
 import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 import {
   ColorValue,
@@ -30,15 +31,12 @@ import {
 } from "react-native";
 import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { BouncingView } from "../ui/transitions/bouncing-view";
-import { ScopedThemeProvider } from "@notesnook/theme";
-import SettingsService from "../../services/settings";
 import { useUserStore } from "../../stores/use-user-store";
-import { useAppState } from "../../hooks/use-app-state";
+import { BouncingView } from "../ui/transitions/bouncing-view";
 
 export interface BaseDialogProps extends PropsWithChildren {
   animation?: "fade" | "none" | "slide" | undefined;
-  visible: boolean;
+  visible?: boolean;
   onRequestClose?: () => void;
   onShow?: () => void;
   premium?: boolean;
@@ -75,9 +73,9 @@ const BaseDialog = ({
   background
 }: BaseDialogProps) => {
   const floating = useIsFloatingKeyboard();
-  const appState = useAppState();
   const lockEvents = useRef(false);
   const [internalVisible, setIntervalVisible] = useState(true);
+  const locked = useUserStore((state) => state.appLocked);
 
   useEffect(() => {
     return () => {
@@ -86,26 +84,20 @@ const BaseDialog = ({
   }, []);
 
   useEffect(() => {
-    if (useUserStore.getState().disableAppLockRequests) return;
-
-    if (SettingsService.canLockAppInBackground()) {
-      if (appState === "background") {
-        setIntervalVisible(false);
-        if (useUserStore.getState().appLocked) {
-          lockEvents.current = true;
-          const unsub = useUserStore.subscribe((state) => {
-            if (!state.appLocked) {
-              setIntervalVisible(true);
-              unsub();
-              setTimeout(() => {
-                lockEvents.current = false;
-              });
-            }
+    if (locked) {
+      setIntervalVisible(false);
+      lockEvents.current = true;
+      const unsub = useUserStore.subscribe((state) => {
+        if (!state.appLocked) {
+          setIntervalVisible(true);
+          unsub();
+          setTimeout(() => {
+            lockEvents.current = false;
           });
         }
-      }
+      });
     }
-  }, [appState]);
+  }, [locked]);
 
   const Wrapper = useSafeArea ? SafeAreaView : View;
 

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

@@ -17,16 +17,17 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
-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";
-import { strings } from "@notesnook/intl";
+import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
+import { Button, ButtonProps } from "../ui/button";
+import Paragraph from "../ui/typography/paragraph";
 
 const DialogButtons = ({
   onPressPositive,
@@ -36,6 +37,14 @@ const DialogButtons = ({
   loading,
   doneText,
   positiveType
+}: {
+  onPressPositive?: () => void;
+  onPressNegative: () => void;
+  positiveTitle: string;
+  negativeTitle?: string;
+  loading?: boolean;
+  doneText?: string;
+  positiveType?: ButtonProps["type"];
 }) => {
   const { colors, isDark } = useThemeColors();
 
@@ -46,9 +55,7 @@ const DialogButtons = ({
         {
           backgroundColor: colors.secondary.background,
           height: 60,
-          borderBottomRightRadius: 5,
-          borderBottomLeftRadius: 5,
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           borderTopWidth: 0.7,
           borderTopColor: getColorLinearShade(
             colors.secondary.background,
@@ -58,9 +65,7 @@ const DialogButtons = ({
         }
       ]}
     >
-      {loading ? (
-        <ActivityIndicator color={colors.primary.accent} size={SIZE.lg} />
-      ) : doneText ? (
+      {doneText ? (
         <View
           style={{
             flexDirection: "row",
@@ -70,7 +75,7 @@ const DialogButtons = ({
           <Icon
             color={colors.primary.accent}
             name="check-circle-outline"
-            size={SIZE.md}
+            size={AppFontSize.md}
           />
           <Paragraph color={colors.primary.accent}>{" " + doneText}</Paragraph>
         </View>
@@ -86,7 +91,7 @@ const DialogButtons = ({
       >
         <Button
           onPress={onPressNegative}
-          fontSize={SIZE.md}
+          fontSize={AppFontSize.sm}
           testID={notesnook.ids.default.dialog.no}
           type="plain"
           bold
@@ -95,11 +100,12 @@ const DialogButtons = ({
         {onPressPositive ? (
           <Button
             onPress={onPressPositive}
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.sm}
             testID={notesnook.ids.default.dialog.yes}
             style={{
               marginLeft: 10
             }}
+            loading={loading}
             bold
             type={positiveType || "transparent"}
             title={positiveTitle}
@@ -117,6 +123,6 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
     flexDirection: "row",
-    marginTop: 10
+    marginTop: DefaultAppStyles.GAP_VERTICAL
   }
 });

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

@@ -20,11 +20,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { Text, View, ViewStyle } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import { PressableProps } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 type DialogHeaderProps = {
   icon?: string;
@@ -82,7 +83,7 @@ const DialogHeader = ({
           >
             <Heading
               style={{ textAlign: centered ? "center" : "left" }}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
             >
               {title}{" "}
               {titlePart ? (
@@ -97,7 +98,7 @@ const DialogHeader = ({
                 onPress={button.onPress}
                 style={{
                   borderRadius: 100,
-                  paddingHorizontal: 12
+                  paddingHorizontal: DefaultAppStyles.GAP
                 }}
                 loading={button.loading}
                 fontSize={13}

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

@@ -17,15 +17,17 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { KeyboardTypeOptions } from "react-native";
 import { eSendEvent } from "../../services/event-manager";
 import { eCloseSimpleDialog, eOpenSimpleDialog } from "../../utils/events";
+import { ButtonProps } from "../ui/button";
 
-type DialogInfo = {
+export type DialogInfo = {
   title?: string;
   paragraph?: string;
-  positiveText?: string;
-  negativeText?: string;
-  positivePress?: (...args: any[]) => void;
+  positiveText: string;
+  negativeText: string;
+  positivePress?: (...args: any[]) => Promise<any>;
   onClose?: () => void;
   positiveType?:
     | "transparent"
@@ -44,16 +46,18 @@ type DialogInfo = {
   // eslint-disable-next-line @typescript-eslint/ban-types
   context: "global" | "local" | (string & {});
   secureTextEntry?: boolean;
-  keyboardType?: string;
+  keyboardType?: KeyboardTypeOptions;
   check?: {
     info: string;
-    type?: string;
+    type?: ButtonProps["type"];
     defaultValue?: boolean;
   };
   notice: {
     text: string;
     type: "alert" | "information";
   };
+  disableBackdropClosing: boolean;
+  component: JSX.Element | ((close?: () => void) => JSX.Element);
 };
 
 export function presentDialog(data: Partial<DialogInfo>): void {

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

@@ -1,233 +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, { useEffect, useRef, useState } from "react";
-import { View } from "react-native";
-import { DDS } from "../../services/device-detection";
-import {
-  eSubscribeEvent,
-  eUnSubscribeEvent
-} from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
-import { getElevationStyle } from "../../utils/elevation";
-import { eCloseSimpleDialog, eOpenSimpleDialog } from "../../utils/events";
-import { sleep } from "../../utils/time";
-import { Toast } from "../toast";
-import Input from "../ui/input";
-import Seperator from "../ui/seperator";
-import BaseDialog from "./base-dialog";
-import DialogButtons from "./dialog-buttons";
-import DialogHeader from "./dialog-header";
-import { useCallback } from "react";
-import { Button } from "../ui/button";
-import { getContainerBorder } from "../../utils/colors";
-import { Notice } from "../ui/notice";
-import { strings } from "@notesnook/intl";
-
-export const Dialog = ({ context = "global" }) => {
-  const { colors } = useThemeColors();
-  const [visible, setVisible] = useState(false);
-  const [checked, setChecked] = useState(false);
-  const values = useRef({
-    inputValue: undefined
-  });
-  const inputRef = useRef();
-  const [dialogInfo, setDialogInfo] = useState({
-    title: "",
-    paragraph: "",
-    positiveText: strings.done(),
-    negativeText: strings.cancel(),
-    positivePress: () => {},
-    onClose: () => {},
-    positiveType: "transparent",
-    icon: null,
-    paragraphColor: colors.primary.paragraph,
-    input: false,
-    inputPlaceholder: "Enter some text",
-    defaultValue: "",
-    disableBackdropClosing: false,
-    check: {
-      info: "Check",
-      type: "transparent",
-      defaultValue: false
-    }
-  });
-
-  const onPressPositive = async () => {
-    if (dialogInfo.positivePress) {
-      inputRef.current?.blur();
-      let result = await dialogInfo.positivePress(
-        values.current.inputValue || dialogInfo.defaultValue,
-        checked
-      );
-      if (result === false) {
-        return;
-      }
-    }
-
-    hide();
-  };
-
-  const show = useCallback(
-    (data) => {
-      if (!data.context) data.context = "global";
-      if (data.context !== context) return;
-      setDialogInfo(data);
-      setChecked(data.check?.defaultValue);
-      values.current.inputValue = data.defaultValue;
-      setVisible(true);
-    },
-    [context]
-  );
-
-  useEffect(() => {
-    eSubscribeEvent(eOpenSimpleDialog, show);
-    eSubscribeEvent(eCloseSimpleDialog, hide);
-
-    return () => {
-      eUnSubscribeEvent(eOpenSimpleDialog, show);
-      eUnSubscribeEvent(eCloseSimpleDialog, hide);
-    };
-  }, [show]);
-
-  const hide = () => {
-    setChecked(false);
-    values.current.inputValue = undefined;
-    setVisible(false);
-  };
-
-  const onNegativePress = async () => {
-    if (dialogInfo.onClose) {
-      await dialogInfo.onClose();
-    }
-    hide();
-  };
-
-  const style = {
-    ...getElevationStyle(5),
-    width: DDS.isTab ? 400 : "85%",
-    maxHeight: 450,
-    borderRadius: 5,
-    backgroundColor: colors.primary.background,
-    paddingTop: 12,
-    ...getContainerBorder(colors.primary.border, 0.5)
-  };
-
-  return visible ? (
-    <BaseDialog
-      statusBarTranslucent={false}
-      bounce={!dialogInfo.input}
-      closeOnTouch={!dialogInfo.disableBackdropClosing}
-      onShow={async () => {
-        if (dialogInfo.input) {
-          inputRef.current?.setNativeProps({
-            text: dialogInfo.defaultValue
-          });
-          await sleep(300);
-          inputRef.current?.focus();
-        }
-      }}
-      visible={true}
-      onRequestClose={hide}
-    >
-      <View style={style}>
-        <DialogHeader
-          title={dialogInfo.title}
-          icon={dialogInfo.icon}
-          paragraph={dialogInfo.paragraph}
-          paragraphColor={dialogInfo.paragraphColor}
-          padding={12}
-          style={{
-            minHeight: 0
-          }}
-        />
-        <Seperator half />
-
-        {dialogInfo.input ? (
-          <View
-            style={{
-              paddingHorizontal: 12
-            }}
-          >
-            <Input
-              fwdRef={inputRef}
-              autoCapitalize="none"
-              onChangeText={(value) => {
-                values.current.inputValue = value;
-              }}
-              testID="input-value"
-              secureTextEntry={dialogInfo.secureTextEntry}
-              //defaultValue={dialogInfo.defaultValue}
-              onSubmit={onPressPositive}
-              returnKeyLabel="Done"
-              returnKeyType="done"
-              keyboardType={dialogInfo.keyboardType || "default"}
-              placeholder={dialogInfo.inputPlaceholder}
-            />
-          </View>
-        ) : null}
-
-        {dialogInfo?.notice ? (
-          <View
-            style={{
-              paddingHorizontal: 12
-            }}
-          >
-            <Notice
-              type={dialogInfo.notice.type || "information"}
-              text={dialogInfo.notice.text}
-            />
-          </View>
-        ) : null}
-
-        {dialogInfo.check ? (
-          <>
-            <Button
-              onPress={() => {
-                setChecked(!checked);
-              }}
-              icon={
-                checked
-                  ? "check-circle-outline"
-                  : "checkbox-blank-circle-outline"
-              }
-              style={{
-                justifyContent: "flex-start"
-              }}
-              height={35}
-              iconSize={20}
-              width="100%"
-              title={dialogInfo.check.info}
-              type={checked ? dialogInfo.check.type || "plain" : "plain"}
-            />
-          </>
-        ) : null}
-
-        <DialogButtons
-          onPressNegative={onNegativePress}
-          onPressPositive={dialogInfo.positivePress && onPressPositive}
-          positiveTitle={dialogInfo.positiveText}
-          negativeTitle={dialogInfo.negativeText}
-          positiveType={dialogInfo.positiveType}
-        />
-      </View>
-      <Toast context="local" />
-    </BaseDialog>
-  ) : null;
-};

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

@@ -0,0 +1,244 @@
+/*
+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 { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { TextInput, View, ViewStyle } from "react-native";
+import { DDS } from "../../services/device-detection";
+import {
+  eSubscribeEvent,
+  eUnSubscribeEvent
+} from "../../services/event-manager";
+import { getContainerBorder } from "../../utils/colors";
+import { getElevationStyle } from "../../utils/elevation";
+import { eCloseSimpleDialog, eOpenSimpleDialog } from "../../utils/events";
+import { defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
+import { sleep } from "../../utils/time";
+import { Toast } from "../toast";
+import { Button } from "../ui/button";
+import Input from "../ui/input";
+import { Notice } from "../ui/notice";
+import Seperator from "../ui/seperator";
+import BaseDialog from "./base-dialog";
+import DialogButtons from "./dialog-buttons";
+import DialogHeader from "./dialog-header";
+import { DialogInfo } from "./functions";
+
+export const Dialog = ({ context = "global" }: { context?: string }) => {
+  const { colors } = useThemeColors();
+  const [visible, setVisible] = useState<boolean>();
+  const [checked, setChecked] = useState<boolean>();
+  const [loading, setLoading] = useState<boolean>();
+  const values = useRef<{
+    inputValue?: string;
+  }>({
+    inputValue: undefined
+  });
+  const inputRef = useRef<TextInput>(null);
+  const [dialogInfo, setDialogInfo] = useState<DialogInfo>();
+
+  const onPressPositive = async () => {
+    if (dialogInfo?.positivePress) {
+      inputRef.current?.blur();
+      setLoading(true);
+      let result = false;
+      try {
+        result = await dialogInfo.positivePress(
+          values.current.inputValue || dialogInfo.defaultValue,
+          checked
+        );
+      } catch (e) {
+        /** Empty */
+      }
+      setLoading(false);
+
+      if (result === false) {
+        return;
+      }
+    }
+
+    setChecked(false);
+    values.current.inputValue = undefined;
+    setVisible(false);
+  };
+
+  const show = useCallback(
+    (data: DialogInfo) => {
+      if (!data.context) data.context = "global";
+      if (data.context !== context) return;
+      setDialogInfo(data);
+      setChecked(data.check?.defaultValue);
+      values.current.inputValue = data.defaultValue;
+      setVisible(true);
+    },
+    [context]
+  );
+
+  const hide = React.useCallback(() => {
+    setChecked(false);
+    values.current.inputValue = undefined;
+    setVisible(false);
+    setDialogInfo(undefined);
+    dialogInfo?.onClose?.();
+  }, [dialogInfo]);
+
+  useEffect(() => {
+    eSubscribeEvent(eOpenSimpleDialog, show);
+    eSubscribeEvent(eCloseSimpleDialog, hide);
+
+    return () => {
+      eUnSubscribeEvent(eOpenSimpleDialog, show);
+      eUnSubscribeEvent(eCloseSimpleDialog, hide);
+    };
+  }, [hide, show]);
+
+  const onNegativePress = async () => {
+    if (dialogInfo?.onClose) {
+      await dialogInfo.onClose();
+    }
+    hide();
+  };
+
+  const style: ViewStyle = {
+    ...getElevationStyle(5),
+    width: DDS.isTab ? 400 : "85%",
+    maxHeight: 450,
+    borderRadius: defaultBorderRadius,
+    backgroundColor: colors.primary.background,
+    paddingTop: 12,
+    ...getContainerBorder(colors.primary.border, 0.5),
+    overflow: "hidden"
+  };
+
+  return visible && dialogInfo ? (
+    <BaseDialog
+      statusBarTranslucent={false}
+      bounce={!dialogInfo.input}
+      closeOnTouch={!dialogInfo.disableBackdropClosing}
+      onShow={async () => {
+        if (dialogInfo.input) {
+          inputRef.current?.setNativeProps({
+            text: dialogInfo.defaultValue
+          });
+          await sleep(300);
+          inputRef.current?.focus();
+        }
+      }}
+      visible={true}
+      onRequestClose={hide}
+    >
+      {typeof dialogInfo.component === "function"
+        ? dialogInfo.component(() => hide())
+        : dialogInfo.component}
+
+      {dialogInfo.component ? null : (
+        <View style={style}>
+          <DialogHeader
+            title={dialogInfo.title}
+            icon={dialogInfo.icon}
+            paragraph={dialogInfo.paragraph}
+            paragraphColor={dialogInfo.paragraphColor}
+            padding={12}
+            style={{
+              minHeight: 0
+            }}
+          />
+          <Seperator half />
+
+          {dialogInfo.input ? (
+            <View
+              style={{
+                paddingHorizontal: DefaultAppStyles.GAP
+              }}
+            >
+              <Input
+                fwdRef={inputRef}
+                autoCapitalize="none"
+                onChangeText={(value) => {
+                  values.current.inputValue = value;
+                }}
+                testID="input-value"
+                secureTextEntry={dialogInfo.secureTextEntry}
+                //defaultValue={dialogInfo.defaultValue}
+                onSubmit={() => {
+                  onPressPositive();
+                }}
+                returnKeyLabel="Done"
+                returnKeyType="done"
+                keyboardType={dialogInfo.keyboardType || "default"}
+                placeholder={dialogInfo.inputPlaceholder}
+              />
+            </View>
+          ) : null}
+
+          {dialogInfo?.notice ? (
+            <View
+              style={{
+                paddingHorizontal: DefaultAppStyles.GAP
+              }}
+            >
+              <Notice
+                type={dialogInfo.notice.type || "information"}
+                text={dialogInfo.notice.text}
+              />
+            </View>
+          ) : null}
+
+          {dialogInfo.check ? (
+            <>
+              <Button
+                onPress={() => {
+                  setChecked(!checked);
+                }}
+                icon={
+                  checked
+                    ? "check-circle-outline"
+                    : "checkbox-blank-circle-outline"
+                }
+                iconColor={
+                  checked ? colors.secondary.icon : colors.primary.icon
+                }
+                style={{
+                  justifyContent: "flex-start"
+                }}
+                height={35}
+                iconSize={20}
+                width="100%"
+                title={dialogInfo.check.info}
+                type={checked ? dialogInfo.check.type || "plain" : "plain"}
+              />
+            </>
+          ) : null}
+
+          <DialogButtons
+            onPressNegative={onNegativePress}
+            onPressPositive={dialogInfo.positivePress && onPressPositive}
+            loading={loading}
+            positiveTitle={dialogInfo.positiveText}
+            negativeTitle={dialogInfo.negativeText}
+            positiveType={dialogInfo.positiveType}
+          />
+        </View>
+      )}
+      <Toast context="local" />
+    </BaseDialog>
+  ) : null;
+};

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

@@ -39,7 +39,7 @@ import {
   eCloseAppLocKPasswordDailog,
   eOpenAppLockPasswordDialog
 } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import BaseDialog from "../../dialog/base-dialog";
 import DialogButtons from "../../dialog/dialog-buttons";
@@ -50,6 +50,7 @@ import { IconButton } from "../../ui/icon-button";
 import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const AppLockPassword = () => {
   const { colors } = useThemeColors();
@@ -128,7 +129,7 @@ export const AppLockPassword = () => {
 
         <View
           style={{
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           {mode === "change" ? (
@@ -192,7 +193,7 @@ export const AppLockPassword = () => {
                     height: 25,
                     marginRight: 5
                   }}
-                  size={SIZE.lg}
+                  size={AppFontSize.lg}
                 />
               )
             }
@@ -248,7 +249,7 @@ export const AppLockPassword = () => {
                     setSecureTextEntry(true);
                   });
                 }}
-                iconSize={SIZE.lg}
+                iconSize={AppFontSize.lg}
                 type="plain"
                 iconColor={
                   accountPass ? colors.primary.accent : colors.primary.icon
@@ -259,7 +260,7 @@ export const AppLockPassword = () => {
                   alignSelf: "flex-start",
                   justifyContent: "flex-start",
                   paddingHorizontal: 0,
-                  height: 30
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
                 }}
               />
             </>

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

@@ -25,14 +25,15 @@ import {
   View
 } from "react-native";
 import { Image as ImageType } from "react-native-image-crop-picker";
-import { useThemeColors } from "../../../../../../packages/theme/dist";
+import { useThemeColors } from "@notesnook/theme";
 import { presentSheet } from "../../../services/event-manager";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } 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";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export default function AttachImage({
   response,
@@ -50,21 +51,26 @@ export default function AttachImage({
     <View
       style={{
         alignItems: "center",
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <View
         style={{
           backgroundColor: colors.secondary.background,
-          marginBottom: 12,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL,
           height: 140,
           width: "100%",
           borderRadius: 10,
-          padding: 5,
-          paddingHorizontal: 12
+          padding: DefaultAppStyles.GAP_SMALL,
+          paddingHorizontal: DefaultAppStyles.GAP_SMALL
         }}
       >
-        <Paragraph style={{ color: colors.primary.paragraph, marginBottom: 6 }}>
+        <Paragraph
+          style={{
+            color: colors.primary.paragraph,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL_SMALL
+          }}
+        >
           {strings.attachImageHeading(response?.length || 1)}
         </Paragraph>
         <ScrollView horizontal>
@@ -80,7 +86,7 @@ export default function AttachImage({
                 style={{
                   width: 100,
                   height: 100,
-                  borderRadius: 5,
+                  borderRadius: defaultBorderRadius,
                   backgroundColor: "black",
                   marginRight: 6
                 }}
@@ -96,7 +102,7 @@ export default function AttachImage({
         style={{
           flexDirection: "row",
           alignSelf: "center",
-          marginBottom: 12,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL,
           alignItems: "center",
           width: "100%"
         }}
@@ -105,7 +111,7 @@ export default function AttachImage({
         }}
       >
         <IconButton
-          size={SIZE.lg}
+          size={AppFontSize.lg}
           name={compress ? "checkbox-marked" : "checkbox-blank-outline"}
           color={compress ? colors.primary.accent : colors.primary.icon}
           style={{
@@ -122,7 +128,7 @@ export default function AttachImage({
             flexShrink: 1,
             marginLeft: 3
           }}
-          size={SIZE.sm}
+          size={AppFontSize.sm}
         >
           {strings.compress()} ({strings.recommended().toLowerCase()})
         </Paragraph>
@@ -135,7 +141,7 @@ export default function AttachImage({
           size="small"
           style={{
             width: "100%",
-            marginBottom: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL
           }}
         />
       ) : (
@@ -145,7 +151,7 @@ export default function AttachImage({
           size="small"
           style={{
             width: "100%",
-            marginBottom: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL
           }}
         />
       )}
@@ -180,7 +186,7 @@ AttachImage.present = (response: ImageType[], context?: string) => {
           close={close}
           onAttach={(result) => {
             resolved = true;
-            console.log("closing");
+
             resolve(result);
             close?.();
           }}