mobile: fix ts errors

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

@@ -7,7 +7,7 @@ runs:
     - name: Setup Node
       uses: actions/setup-node@v4
       with:
-        node-version: 22.x
+        node-version: 20.x
         cache: "npm"
         cache-dependency-path: |
           package-lock.json

.github/workflows/android.e2e.yml

@@ -47,21 +47,16 @@ jobs:
       - name: Install Detox CLI
         run: npm install detox-cli --global
 
-      - name: Check for typescript errors
-        run: |
-          cd apps/mobile
-          npx tsc --noEmit
-
       - name: Detox build
         run: |
           yarn build:android
-          ls apps/mobile/android/app/build/outputs/apk
-          ls apps/mobile/android/app/build/outputs/apk/release
+          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/.detoxrc.js').devices.emulator.device.avdName")
+          AVD_NAME=$(node -p "require('./apps/mobile/native/.detoxrc.js').devices.emulator.device.avdName")
           echo "AVD_NAME=$AVD_NAME" >> $GITHUB_OUTPUT
 
       - name: AVD cache

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

@@ -4,7 +4,8 @@ on: workflow_dispatch
 
 jobs:
   build:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
+    timeout-minutes: 40
     env:
       CMAKE_C_COMPILER_LAUNCHER: ccache
       CMAKE_CXX_COMPILER_LAUNCHER: ccache
@@ -21,7 +22,7 @@ jobs:
       - name: Use specific Java version for the builds
         uses: joschi/setup-jdk@v2
         with:
-          java-version: "17"
+          java-version: "11"
           architecture: "x64"
 
       - name: Install node modules
@@ -30,23 +31,7 @@ jobs:
           npm run bootstrap -- --scope=mobile
 
       - name: Make Gradlew Executable
-        run: cd apps/mobile/android && chmod +x ./gradlew
-
-      - name: Free Disk Space (Ubuntu)
-        uses: jlumbroso/free-disk-space@main
-        with:
-          # this might remove tools that are actually needed,
-          # if set to "true" but frees about 6 GB
-          tool-cache: false
-
-          # all of these default to true, but feel free to set to
-          # "false" if necessary for your workflow
-          android: false
-          dotnet: true
-          haskell: true
-          large-packages: true
-          docker-images: true
-          swap-storage: true
+        run: cd apps/mobile/native/android && chmod +x ./gradlew
 
       - name: Install CCache
         uses: hendrikmuhs/ccache-action@v1.2.11
@@ -73,7 +58,7 @@ jobs:
           ccache -p
 
       - name: Cache gradle
-        uses: actions/cache@v3
+        uses: actions/cache@v2
         with:
           path: |
             ~/.gradle/caches
@@ -84,19 +69,12 @@ 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
 
-      - name: Check for typescript errors
-        run: |
-          npm run tx mobile:build
-          cd apps/mobile
-          npx tsc --noEmit
-
-      - name: Remove debug keystore
-        run: rm -rf apps/mobile/android/app/debug.keystore
-
       - name: Build unsigned app bundle
         run: yarn release:android:bundle
 
@@ -107,7 +85,7 @@ jobs:
         id: sign_app
         uses: r0adkll/sign-android-release@master
         with:
-          releaseDirectory: apps/mobile/android/app/build/outputs/bundle/release
+          releaseDirectory: apps/mobile/native/android/app/build/outputs/bundle/release
           signingKeyBase64: ${{ secrets.SIGNING_KEY }}
           alias: ${{ secrets.ALIAS }}
           keyStorePassword: ${{ secrets.KEY_PASSWORD }}
@@ -122,7 +100,7 @@ jobs:
         id: sign_apk
         uses: r0adkll/sign-android-release@master
         with:
-          releaseDirectory: apps/mobile/android/app/build/outputs/apk/release
+          releaseDirectory: apps/mobile/native/android/app/build/outputs/apk/release
           signingKeyBase64: ${{ secrets.PUBLIC_SIGNING_KEY }}
           alias: ${{ secrets.PUBLIC_ALIAS }}
           keyStorePassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
@@ -132,7 +110,7 @@ jobs:
 
       - name: Rename apk files
         run: |
-          cd apps/mobile/android/app/build/outputs/apk/release/
+          cd apps/mobile/native/android/app/build/outputs/apk/release/
           mv app-arm64-v8a-release-unsigned-signed.apk notesnook-arm64-v8a.apk
           mv app-armeabi-v7a-release-unsigned-signed.apk notesnook-armeabi-v7a.apk
           mv app-x86-release-unsigned-signed.apk notesnook-x86.apk
@@ -140,7 +118,7 @@ jobs:
 
       - name: Get app version
         id: package-version
-        uses: saionaro/extract-package-version@master
+        uses: martinbeentjes/npm-get-version-action@master
         with:
           path: apps/mobile
 
@@ -151,29 +129,28 @@ jobs:
           serviceAccountJsonPlainText: ${{ secrets.SERVICE_ACCOUNT_JSON }}
           packageName: com.streetwriters.notesnook
           releaseFiles: ${{steps.sign_app.outputs.signedReleaseFile}}
-          track: beta
+          track: alpha
           status: completed
-          whatsNewDirectory: apps/mobile/android/releasenotes/
+          whatsNewDirectory: apps/mobile/native/android/releasenotes/
 
       - name: Create release draft on Github
         uses: softprops/action-gh-release@v1
         with:
           draft: true
-          tag_name: ${{ steps.package-version.outputs.version}}-beta-android
-          name: Notesnook Android v${{ steps.package-version.outputs.version}}
+          tag_name: ${{ steps.package-version.outputs.current-version}}-beta-android
+          name: Notesnook Android v${{ steps.package-version.outputs.current-version}} Beta
           repository: streetwriters/notesnook
           token: ${{ secrets.GITHUB_TOKEN }}
           files: |
-            apps/mobile/android/app/build/outputs/apk/release/notesnook-arm64-v8a.apk
-            apps/mobile/android/app/build/outputs/apk/release/notesnook-armeabi-v7a.apk
-            apps/mobile/android/app/build/outputs/apk/release/notesnook-x86.apk
-            apps/mobile/android/app/build/outputs/apk/release/notesnook-x86_64.apk
-            ${{steps.sign_app.outputs.signedReleaseFile}}
+            apps/mobile/native/android/app/build/outputs/apk/release/notesnook-arm64-v8a.apk
+            apps/mobile/native/android/app/build/outputs/apk/release/notesnook-armeabi-v7a.apk
+            apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86.apk
+            apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86_64.apk
 
       - name: Upload sourcemaps
         uses: actions/upload-artifact@v4
         with:
           name: sourcemaps
           path: |
-            apps/mobile/android/app/build/**/*.map
+            apps/mobile/native/android/app/build/**/*.map
             packages/editor-mobile/sourcemaps/*.map

.github/workflows/android.publish.yml

@@ -5,6 +5,7 @@ on: workflow_dispatch
 jobs:
   build:
     runs-on: ubuntu-22.04
+    timeout-minutes: 40
     env:
       CMAKE_C_COMPILER_LAUNCHER: ccache
       CMAKE_CXX_COMPILER_LAUNCHER: ccache
@@ -24,29 +25,13 @@ jobs:
           java-version: "17"
           architecture: "x64"
 
-      - name: Free Disk Space (Ubuntu)
-        uses: jlumbroso/free-disk-space@main
-        with:
-          # this might remove tools that are actually needed,
-          # if set to "true" but frees about 6 GB
-          tool-cache: false
-
-          # all of these default to true, but feel free to set to
-          # "false" if necessary for your workflow
-          android: false
-          dotnet: true
-          haskell: true
-          large-packages: true
-          docker-images: true
-          swap-storage: true
-
       - name: Install node modules
         run: |
           npm ci --ignore-scripts --prefer-offline --no-audit
           npm run bootstrap -- --scope=mobile
 
       - name: Make Gradlew Executable
-        run: cd apps/mobile/android && chmod +x ./gradlew
+        run: cd apps/mobile/native/android && chmod +x ./gradlew
 
       - name: Install CCache
         uses: hendrikmuhs/ccache-action@v1.2.11
@@ -73,7 +58,7 @@ jobs:
           ccache -p
 
       - name: Cache gradle
-        uses: actions/cache@v3
+        uses: actions/cache@v2
         with:
           path: |
             ~/.gradle/caches
@@ -84,19 +69,12 @@ 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
 
-      - name: Check for typescript errors
-        run: |
-          npm run tx mobile:build
-          cd apps/mobile
-          npx tsc --noEmit
-
-      - name: Remove debug keystore
-        run: rm -rf apps/mobile/android/app/debug.keystore
-
       - name: Build unsigned app bundle
         run: yarn release:android:bundle
 
@@ -107,7 +85,7 @@ jobs:
         id: sign_app
         uses: r0adkll/sign-android-release@master
         with:
-          releaseDirectory: apps/mobile/android/app/build/outputs/bundle/release
+          releaseDirectory: apps/mobile/native/android/app/build/outputs/bundle/release
           signingKeyBase64: ${{ secrets.SIGNING_KEY }}
           alias: ${{ secrets.ALIAS }}
           keyStorePassword: ${{ secrets.KEY_PASSWORD }}
@@ -122,7 +100,7 @@ jobs:
         id: sign_apk
         uses: r0adkll/sign-android-release@master
         with:
-          releaseDirectory: apps/mobile/android/app/build/outputs/apk/release
+          releaseDirectory: apps/mobile/native/android/app/build/outputs/apk/release
           signingKeyBase64: ${{ secrets.PUBLIC_SIGNING_KEY }}
           alias: ${{ secrets.PUBLIC_ALIAS }}
           keyStorePassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
@@ -132,7 +110,7 @@ jobs:
 
       - name: Rename apk files
         run: |
-          cd apps/mobile/android/app/build/outputs/apk/release/
+          cd apps/mobile/native/android/app/build/outputs/apk/release/
           mv app-arm64-v8a-release-unsigned-signed.apk notesnook-arm64-v8a.apk
           mv app-armeabi-v7a-release-unsigned-signed.apk notesnook-armeabi-v7a.apk
           mv app-x86-release-unsigned-signed.apk notesnook-x86.apk
@@ -140,7 +118,7 @@ jobs:
 
       - name: Get app version
         id: package-version
-        uses: saionaro/extract-package-version@master
+        uses: martinbeentjes/npm-get-version-action@master
         with:
           path: apps/mobile
 
@@ -153,26 +131,26 @@ jobs:
           releaseFiles: ${{steps.sign_app.outputs.signedReleaseFile}}
           track: production
           status: completed
-          whatsNewDirectory: apps/mobile/android/releasenotes/
+          whatsNewDirectory: apps/mobile/native/android/releasenotes/
 
       - name: Create release draft on Github
         uses: softprops/action-gh-release@v1
         with:
           draft: true
-          tag_name: ${{ steps.package-version.outputs.version}}-android
-          name: Notesnook Android v${{ steps.package-version.outputs.version}}
+          tag_name: ${{ steps.package-version.outputs.current-version}}-android
+          name: Notesnook Android v${{ steps.package-version.outputs.current-version}}
           repository: streetwriters/notesnook
           token: ${{ secrets.GITHUB_TOKEN }}
           files: |
-            apps/mobile/android/app/build/outputs/apk/release/notesnook-arm64-v8a.apk
-            apps/mobile/android/app/build/outputs/apk/release/notesnook-armeabi-v7a.apk
-            apps/mobile/android/app/build/outputs/apk/release/notesnook-x86.apk
-            apps/mobile/android/app/build/outputs/apk/release/notesnook-x86_64.apk
+            apps/mobile/native/android/app/build/outputs/apk/release/notesnook-arm64-v8a.apk
+            apps/mobile/native/android/app/build/outputs/apk/release/notesnook-armeabi-v7a.apk
+            apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86.apk
+            apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86_64.apk
 
       - name: Upload sourcemaps
         uses: actions/upload-artifact@v4
         with:
           name: sourcemaps
           path: |
-            apps/mobile/android/app/build/**/*.map
+            apps/mobile/native/android/app/build/**/*.map
             packages/editor-mobile/sourcemaps/*.map

.github/workflows/core.tests.yml

@@ -9,13 +9,7 @@ on:
       - "packages/core/**"
       # re-run workflow if workflow file changes
       - ".github/workflows/core.tests.yml"
-  pull_request_target:
-    branches:
-      - "master"
-    paths:
-      - "packages/core/**"
-      # re-run workflow if workflow file changes
-      - ".github/workflows/core.tests.yml"
+  pull_request:
     types:
       - "ready_for_review"
       - "opened"
@@ -23,21 +17,11 @@ on:
       - "reopened"
 
 jobs:
-  authorize:
-    environment: ${{ github.event_name == 'pull_request_target' &&
-      github.event.pull_request.head.repo.full_name != github.repository &&
-      'external' || 'internal' }}
-    runs-on: ubuntu-latest
-    steps:
-      - run: echo true
-
   test:
-    needs: authorize
     runs-on: ubuntu-22.04
+
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.ref }}
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
@@ -52,6 +36,7 @@ jobs:
           echo "USER_PASSWORD=${{ secrets.USER_PASSWORD }}" >> $GITHUB_ENV
           echo "USER_TOTP_SECRET=${{ secrets.USER_TOTP_SECRET }}" >> $GITHUB_ENV
           echo "USER_HASHED_PASSWORD=${{ secrets.USER_HASHED_PASSWORD }}" >> $GITHUB_ENV
+          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
 
       - name: Run all @notesnook/core tests
-        run: npm run tx @notesnook/core:test:e2e
+        run: npx nx test:e2e @notesnook/core

.github/workflows/desktop.publish.yml

@@ -33,14 +33,6 @@ 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:
@@ -65,13 +57,12 @@ jobs:
           npm i --cpu x64 sqlite-better-trigram
         working-directory: ./apps/desktop
 
-      - name: Generate desktop build (stable)
-        if: ${{ inputs.release-track == 'stable' }}
-        run: npm run tx @notesnook/web:build:desktop
+      - name: Setup environment
+        run: |
+          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
 
-      - name: Generate desktop build (beta)
-        if: ${{ inputs.release-track == 'beta' }}
-        run: BETA=true npm run tx @notesnook/web:build:desktop
+      - name: Generate desktop build
+        run: npx nx build:desktop @notesnook/web
 
       - name: Build desktop bundle
         working-directory: ./apps/desktop
@@ -103,14 +94,12 @@ 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 }}
+          prerelease: ${{ endsWith(steps.app_metadata.outputs.app_version, '-beta') }}
 
       - 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
+          sudo apt-get install -y 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 .
@@ -195,9 +184,9 @@ jobs:
           CSC_LINK: ${{ secrets.mac_certs }}
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
         run: |
-          npm run tx @notesnook/desktop:release -- --variant=mas
-          cd apps/desktop
-          yarn electron-builder --config=electron-builder.config.js --mac mas --universal -p never
+          npx nx run release --project @notesnook/desktop -- --variant=mas
+          yarn electron-builder --mac mas --universal -p never
+        working-directory: ./apps/desktop
 
       - name: Build zip and dmg
         env:
@@ -208,13 +197,13 @@ jobs:
           APPLE_API_KEY_ID: ${{ secrets.api_key_id }}
           APPLE_API_ISSUER: ${{ secrets.api_key_issuer_id }}
         run: |
-          npm run tx @notesnook/desktop:release
-          cd apps/desktop
+          npx nx run release --project @notesnook/desktop
           if [ ${{ inputs.publish-github }} == true ]; then
-            yarn electron-builder --config=electron-builder.config.js --mac zip dmg --arm64 --x64 -p always
+            yarn electron-builder --mac zip dmg --arm64 --x64 -p always
           else
-            yarn electron-builder --config=electron-builder.config.js --mac zip dmg --arm64 --x64 -p never
+            yarn electron-builder --mac zip dmg --arm64 --x64 -p never
           fi
+        working-directory: ./apps/desktop
 
       - name: Deploy to Testflight
         if: inputs.publish-apple && steps.appstore.outputs.app-version-latest != steps.app_metadata.outputs.app_version
@@ -229,8 +218,8 @@ 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-x64:
-    name: Build for Linux x64
+  build-linux:
+    name: Build for Linux
     needs: build
     if: inputs.build-linux
     runs-on: ubuntu-22.04
@@ -247,76 +236,9 @@ jobs:
         run: echo "SNAPCRAFT_STORE_CREDENTIALS=${{ secrets.snapcraft_token }}" >> $GITHUB_ENV
 
       - name: Install Snapcraft
-        uses: samuelmeuli/action-snapcraft@v3
+        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 x64 sqlite-better-trigram
-        working-directory: ./apps/desktop
-
-      - name: Build Electron wrapper
-        run: npm run tx @notesnook/desktop:release
-
-      - name: Build snap
-        if: inputs.publish-snap
-        run: |
-          yarn electron-builder --config=electron-builder.config.js --linux snap:x64 -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:x64 -p always
-          else
-            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: |
-          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:
@@ -331,33 +253,35 @@ jobs:
       - 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: npm run tx @notesnook/desktop:release
+        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 snap
+        if: inputs.publish-snap
+        run: |
+          yarn electron-builder --linux snap:x64 -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
+            yarn electron-builder --linux AppImage:x64 AppImage:arm64 -p always
           else
-            yarn electron-builder --config=electron-builder.config.js --linux AppImage:arm64 -p never
+            yarn electron-builder --linux AppImage:x64 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
+      - name: Publish on Snapcraft
+        if: inputs.publish-snap
+        run: |
+          snapcraft upload --release=stable ./output/notesnook_linux_amd64.snap
+        working-directory: ./apps/desktop
 
   build-windows:
     name: Build for Windows
@@ -396,13 +320,10 @@ jobs:
         run: |
           npm i --cpu arm64 sqlite-better-trigram
           npm i --cpu x64 sqlite-better-trigram
-
-          npm i --cpu arm64 sqlite3-fts5-html
-          npm i --cpu x64 sqlite3-fts5-html
         working-directory: ./apps/desktop
 
       - name: Build
-        run: node scripts/execute.mjs @notesnook/desktop:release
+        run: npx nx run release --project @notesnook/desktop
 
       - name: Publish
         env:
@@ -412,8 +333,8 @@ jobs:
           AZURE_CLIENT_SECRET: ${{ secrets.AZURE_CLIENT_SECRET }}
         run: |
           if ($${{ inputs.publish-github }} -eq $true) {
-            yarn electron-builder --config=electron-builder.config.js --win --publish always
+            yarn electron-builder --win --publish always
           } else {
-            yarn electron-builder --config=electron-builder.config.js --win --publish never
+            yarn electron-builder --win --publish never
           }
         working-directory: ./apps/desktop

.github/workflows/desktop.tests.yml

@@ -6,16 +6,10 @@ on:
     branches:
       - "master"
     paths:
-      - "apps/desktop/**"
+      - "app/desktop/**"
       # re-run workflow if workflow file changes
       - ".github/workflows/desktop.tests.yml"
   pull_request:
-    branches:
-      - "master"
-    paths:
-      - "apps/desktop/**"
-      # re-run workflow if workflow file changes
-      - ".github/workflows/desktop.tests.yml"
 
 jobs:
   build:
@@ -33,8 +27,12 @@ jobs:
           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: npm run tx @notesnook/web:build:desktop
+        run: npx nx build:desktop @notesnook/web
 
       - name: Archive build artifact
         uses: actions/upload-artifact@v4
@@ -66,15 +64,17 @@ jobs:
           npm run bootstrap -- --scope=desktop
 
       - name: Build Electron wrapper
-        run: npm run tx @notesnook/desktop:release
+        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
+          yarn electron-builder --mac --dir --x64
         working-directory: ./apps/desktop
 
       - name: Run tests x64
-        run: npm run test
+        run: |
+          EXECUTABLE_PATH=output/mac/Notesnook.app/Contents/MacOS/Notesnook npm run test
         working-directory: ./apps/desktop
 
       - name: Upload test results
@@ -109,15 +109,17 @@ jobs:
           npm run bootstrap -- --scope=desktop
 
       - name: Build Electron wrapper
-        run: npm run tx @notesnook/desktop:release
+        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
+          yarn electron-builder --mac --dir --arm64
         working-directory: ./apps/desktop
 
       - name: Run tests arm64
-        run: npm run test
+        run: |
+          EXECUTABLE_PATH=output/mac-arm64/Notesnook.app/Contents/MacOS/Notesnook npm run test
         working-directory: ./apps/desktop
 
       - name: Upload test results
@@ -158,15 +160,17 @@ jobs:
         working-directory: ./apps/desktop
 
       - name: Build Electron wrapper
-        run: npm run tx @notesnook/desktop:release
+        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
+          yarn electron-builder --linux --dir --arm64 --x64
         working-directory: ./apps/desktop
 
       - name: Run tests
-        run: xvfb-run --auto-servernum --server-args="-screen 0 1920x1080x24" -- npm run test
+        run: |
+          EXECUTABLE_PATH=output/linux-unpacked/notesnook xvfb-run --auto-servernum --server-args="-screen 0 1920x1080x24" -- npm run test
         working-directory: ./apps/desktop
 
       - name: Upload test results
@@ -204,21 +208,20 @@ jobs:
         run: |
           npm i --cpu arm64 sqlite-better-trigram
           npm i --cpu x64 sqlite-better-trigram
-
-          npm i --cpu arm64 sqlite3-fts5-html
-          npm i --cpu x64 sqlite3-fts5-html
         working-directory: ./apps/desktop
 
       - name: Build Electron wrapper
-        run: node scripts/execute.mjs @notesnook/desktop:release
+        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
+          npx cross-env NOTESNOOK_STAGING=true yarn electron-builder --win --dir --arm64 --x64
         working-directory: ./apps/desktop
 
       - name: Run tests
-        run: npm run test
+        run: |
+          npx cross-env EXECUTABLE_PATH=output/win-unpacked/Notesnook.exe npm run test
         working-directory: ./apps/desktop
 
       - name: Upload test results

.github/workflows/editor.tests.yml

@@ -10,12 +10,6 @@ on:
       # re-run workflow if workflow file changes
       - ".github/workflows/editor.tests.yml"
   pull_request:
-    branches:
-      - "master"
-    paths:
-      - "packages/editor/**"
-      # re-run workflow if workflow file changes
-      - ".github/workflows/editor.tests.yml"
     types:
       - "ready_for_review"
       - "opened"
@@ -38,8 +32,12 @@ jobs:
           npm ci --ignore-scripts --prefer-offline --no-audit
           npm run bootstrap -- --scope=editor
 
+      - name: Setup environment
+        run: |
+          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
+
       - name: Build editor
-        run: npm run tx @notesnook/editor:build
+        run: npx nx build @notesnook/editor
 
       - name: Run all @notesnook/editor tests
-        run: npm run tx @notesnook/editor:test
+        run: npx nx test @notesnook/editor

.github/workflows/ios.publish.yml

@@ -4,33 +4,28 @@ on: workflow_dispatch
 
 jobs:
   build:
-    runs-on: macos-26
+    runs-on: macos-latest
     timeout-minutes: 60
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
 
-      - name: Setup Xcode
-        uses: maxim-lobanov/setup-xcode@v1
-        with:
-          xcode-version: "26.1.1"
-
       - name: Install node modules
         run: |
           npm ci --ignore-scripts --prefer-offline --no-audit
           npm run bootstrap -- --scope=mobile
 
       - name: Build packages
-        run: npm run tx @notesnook/mobile:build
+        run: npx nx run @notesnook/mobile:build
 
       - name: ccache
         uses: hendrikmuhs/ccache-action@v1.2.11
         with:
-          key: ${{ runner.os }}-ccache-${{ hashFiles(format('apps/mobile/ios/Podfile.lock')) }}
+          key: ${{ runner.os }}-ccache-${{ hashFiles(format('apps/mobile/native/ios/Podfile.lock')) }}
           max-size: 1500M
           restore-keys: |
             ${{ runner.os }}-ccache-
@@ -52,22 +47,14 @@ jobs:
           ccache -p
 
       - name: Cache Pods
-        uses: actions/cache@v3
+        uses: actions/cache@v2
         id: pods-cache
         with:
-          path: apps/mobile/ios/Pods
-          key: ${{ runner.os }}-pods-${{ hashFiles('apps/mobile/ios/Podfile.lock') }}
+          path: apps/mobile/native/ios/Pods
+          key: ${{ runner.os }}-pods-${{ hashFiles('apps/mobile/native/ios/Podfile.lock') }}
 
       - name: Install Pods
-        run: |
-          cd apps/mobile/ios
-          pod install
-
-      - name: Check for typescript errors
-        run: |
-          npm run tx mobile:build
-          cd apps/mobile
-          npx tsc --noEmit
+        run: npm run prepare:ios
 
       - name: CCache Stats Before Build
         run: ccache -sv
@@ -78,9 +65,9 @@ jobs:
           bundle-identifier: org.streetwriters.notesnook
           scheme: Notesnook
           configuration: "Release"
-          export-options: apps/mobile/ios/ExportOptions.plist
-          project-path: apps/mobile/ios/Notesnook.xcodeproj
-          workspace-path: apps/mobile/ios/Notesnook.xcworkspace
+          export-options: apps/mobile/native/ios/ExportOptions.plist
+          project-path: apps/mobile/native/ios/Notesnook.xcodeproj
+          workspace-path: apps/mobile/native/ios/Notesnook.xcworkspace
           update-targets: |
             Notesnook
             Make Note
@@ -116,5 +103,5 @@ jobs:
           name: Notesnook.zip
           path: |
             Notesnook.ipa
-            apps/mobile/ios/**/*.map
+            apps/mobile/native/ios/**/*.map
             packages/editor-mobile/sourcemaps/*.map

.github/workflows/monograph.publish.yml

@@ -39,13 +39,13 @@ jobs:
           echo ::set-output name=app_version::$(cat package.json | jq -r .version)
 
       - name: Generate build
-        run: npm run tx @notesnook/monograph:build
+        run: npx nx build @notesnook/monograph
 
       # Setup Buildx
       - name: Docker Setup Buildx
         uses: docker/setup-buildx-action@v3
         with:
-          platforms: linux/amd64,linux/arm64
+          platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v8
 
       - name: Log in to Docker Hub
         uses: docker/login-action@v3
@@ -77,7 +77,7 @@ jobs:
           context: apps/monograph
           file: apps/monograph/Dockerfile
           push: true
-          platforms: linux/amd64,linux/arm64
+          platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v8
           tags: streetwriters/monograph:${{ steps.package_metadata.outputs.app_version }},streetwriters/monograph:latest
           cache-from: streetwriters/monograph:latest
 

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

@@ -20,6 +20,7 @@ jobs:
 
       - name: Setup environment
         run: |
+          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
           echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
           echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
 

.github/workflows/vericrypt.publish.yml

@@ -20,6 +20,7 @@ jobs:
 
       - name: Setup environment
         run: |
+          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
           echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
           echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
 

.github/workflows/web.benchmarks.yml

@@ -27,6 +27,10 @@ jobs:
           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
 

.github/workflows/web.publish.yml

@@ -1,16 +1,6 @@
 name: Publish @notesnook/web
 
-on:
-  workflow_dispatch:
-    inputs:
-      release-track:
-        type: choice
-        required: true
-        default: stable
-        description: "Select the release track"
-        options:
-          - stable
-          - beta
+on: workflow_dispatch
 
 jobs:
   build:
@@ -30,23 +20,12 @@ jobs:
 
       - name: Setup environment
         run: |
+          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
           echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
           echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
 
-      - name: Generate build (stable)
-        if: ${{ inputs.release-track == 'stable' }}
+      - name: Generate build
         run: npm run build:web
 
-      - 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/
+      - name: Publish to Cloudflare Pages
+        run: npx --yes wrangler pages deploy --project-name=notesnook-app ./apps/web/build/

.github/workflows/web.tests.yml

@@ -9,13 +9,7 @@ on:
       - "apps/web/**"
       # re-run workflow if workflow file changes
       - ".github/workflows/web.tests.yml"
-  pull_request_target:
-    branches:
-      - "master"
-    paths:
-      - "apps/web/**"
-      # re-run workflow if workflow file changes
-      - ".github/workflows/web.tests.yml"
+  pull_request:
     types:
       - "ready_for_review"
       - "opened"
@@ -23,23 +17,12 @@ on:
       - "reopened"
 
 jobs:
-  authorize:
-    environment: ${{ github.event_name == 'pull_request_target' &&
-      github.event.pull_request.head.repo.full_name != github.repository &&
-      'external' || 'internal' }}
-    runs-on: ubuntu-latest
-    steps:
-      - run: echo true
-
   build:
-    needs: authorize
     name: Build
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.ref }}
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
@@ -49,6 +32,10 @@ jobs:
           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 test build
         run: npm run build:test:web
 
@@ -62,13 +49,11 @@ jobs:
     name: 🧪 Test (${{ matrix.shard }}/${{ strategy.job-total }})
     strategy:
       matrix:
-        shard: [1, 2, 3, 4, 5]
+        shard: [1, 2, 3, 4]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.ref }}
 
       - name: Download build
         uses: actions/download-artifact@v4

.gitignore

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

.vscode/settings.json

@@ -11,5 +11,5 @@
     "cache": true,
     "cacheStrategy": "content"
   },
-  "git.rebaseWhenSync": false
+  "git.rebaseWhenSync": true
 }

README.md

@@ -27,6 +27,7 @@ Notesnook is built using the following technologies:
 3. React Native — For mobile apps we are using React Native
 4. Electron — For desktop app
 5. NPM — listed here because we **don't** use Yarn or PNPM or XYZ across any of our projects.
+6. Nx — maintaining monorepos is hard but Nx makes it easier.
 
 > **Note: Each project in the monorepo contains its own architecture details which you can refer to.**
 
@@ -65,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://help.notesnook.com/importing-notes)
+- [Migrating & Importing your data from other apps — Importer](https://importer.notesnook.com/)
 - [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,6 +2,4 @@ node_modules
 build
 output
 dist
-_catalog
-test-results
-test-artifacts
+_catalog

apps/desktop/README.md

@@ -24,7 +24,7 @@ Requirements:
 
 Before you can do anything, you'll need to [install Node.js](https://nodejs.org/en/download/) v16 or later on your system.
 
-1. `clone` the monorepo:
+Once you have completed the setup, the first step is to `clone` the monorepo:
 
 ```bash
 git clone https://github.com/streetwriters/notesnook.git
@@ -33,28 +33,19 @@ git clone https://github.com/streetwriters/notesnook.git
 cd notesnook
 ```
 
-2. Install dependencies:
+Once you are inside the `./notesnook` directory, run the preparation step:
 
 ```bash
 # this might take a while to complete
 npm install
 ```
 
-3. Run the webapp for desktop environment:
-
-```bash
-cd apps/web
-npm run start:desktop
-```
-
-4. In a separate terminal session, run the desktop app from the root of the project:
+Now you can finally start the desktop app for development:
 
 ```bash
 npm run start:desktop
 ```
 
-### Release mode
-
 To run the app in release mode:
 
 ```bash
@@ -67,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 --config=electron-builder.config.js --mac dmg --arm64 --x64 --publish never
+npx electron-builder --mac dmg --arm64 --x64 -publish never
 
 # For Linux (AppImage)
-npx electron-builder --config=electron-builder.config.js --linux AppImage:x64 AppImage:arm64 --publish never
+npx electron-builder --linux AppImage:x64 AppImage:arm64 -publish never
 
 # For Windows
-npx electron-builder --config=electron-builder.config.js --win --publish never
+npx electron-builder --win --publish never
 ```
 
 Feel free to play around with the `electron-builder` command to get the packages you need. `npx electron-builder --help` is a great resource to learn different commands & platforms supported by `electron-builder`.

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

@@ -1,242 +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 { testCleanup, test } from "./test-override.js";
-import { writeFile } from "fs/promises";
-import { Page } from "playwright";
-import { gt, lt } from "semver";
-import { describe } from "vitest";
-
-test("update starts downloading if version is outdated", async ({
-  ctx: { page },
-  expect,
-  onTestFinished
-}) => {
-  onTestFinished(testCleanup);
-
-  await page.waitForSelector("#authForm");
-  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" });
-});
-
-test("update is only shown if version is outdated and auto updates are disabled", async ({
-  ctx,
-  expect,
-  onTestFinished
-}) => {
-  onTestFinished(testCleanup);
-
-  await ctx.app.close();
-  await writeFile(
-    ctx.configPath,
-    JSON.stringify({
-      automaticUpdates: false
-    })
-  );
-
-  await ctx.relaunch();
-
-  const { page } = ctx;
-
-  await page.waitForSelector("#authForm");
-
-  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" });
-});
-
-describe("update to stable if it is newer", () => {
-  test.scoped({ options: { version: "3.0.0-beta.0" } });
-  test("test", async ({ ctx, expect, onTestFinished }) => {
-    onTestFinished(testCleanup);
-
-    await ctx.app.close();
-    await writeFile(
-      ctx.configPath,
-      JSON.stringify({
-        automaticUpdates: false,
-        releaseTrack: "beta"
-      })
-    );
-
-    await ctx.relaunch();
-
-    const { page } = ctx;
-
-    await page.waitForSelector("#authForm");
-
-    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] || "";
-    expect(gt(version, "3.0.0-beta.0")).toBe(true);
-  });
-});
-
-describe("update is not available if it latest stable version is older", () => {
-  test.scoped({ options: { version: "99.0.0-beta.0" } });
-  test("test", async ({ ctx, expect, onTestFinished }) => {
-    onTestFinished(testCleanup);
-
-    await ctx.app.close();
-    await writeFile(
-      ctx.configPath,
-      JSON.stringify({
-        automaticUpdates: false,
-        releaseTrack: "beta"
-      })
-    );
-
-    await ctx.relaunch();
-
-    const { page } = ctx;
-
-    await page.waitForSelector("#authForm");
-
-    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" });
-
-    expect(
-      await page
-        .locator(".theme-scope-statusBar")
-        .getByRole("button", { name: /available/i })
-        .isHidden()
-    ).toBe(true);
-  });
-});
-
-describe("downgrade to stable on switching to stable release track", () => {
-  test.scoped({ options: { version: "99.0.0-beta.0" } });
-  test("test", async ({ ctx, expect, onTestFinished }) => {
-    onTestFinished(testCleanup);
-
-    await ctx.app.close();
-    await writeFile(
-      ctx.configPath,
-      JSON.stringify({
-        automaticUpdates: false,
-        releaseTrack: "stable"
-      })
-    );
-
-    await ctx.relaunch();
-
-    const { page } = ctx;
-
-    await page.waitForSelector("#authForm");
-
-    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] || "";
-    expect(lt(version, "99.0.0-beta.0")).toBe(true);
-  });
-});
-
-async function skipDialog(page: Page) {
-  try {
-    const dialog = page.locator(".ReactModal__Content");
-    const positiveButton = dialog.locator(
-      "button[data-role='positive-button']"
-    );
-    const negativeButton = dialog.locator(
-      "button[data-role='negative-button']"
-    );
-    if (await positiveButton.isVisible())
-      await positiveButton.click({ timeout: 1000 });
-    else if (await negativeButton.isVisible())
-      await negativeButton.click({ timeout: 1000 });
-  } catch (e) {
-    // ignore error
-  }
-}

apps/desktop/__tests__/global-setup.ts

@@ -1,24 +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 { buildApp } from "./utils";
-
-export default async function setup() {
-  await buildApp();
-}

apps/desktop/__tests__/launch.test.mjs

@@ -0,0 +1,53 @@
+/*
+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 "node:test";
+import { launchApp } from "./utils.mjs";
+import assert from "assert";
+import slugify from "slugify";
+import path from "path";
+import { mkdir } from "fs/promises";
+
+test("make sure app loads", async (t) => {
+  const { app, page } = await launchApp();
+  try {
+    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");
+  } catch (e) {
+    await mkdir("test-results", { recursive: true });
+    await page.screenshot({
+      path: path.join(
+        "test-results",
+        `${slugify(t.name)}-${process.platform}-${process.arch}-error.png`
+      )
+    });
+    throw e;
+  } finally {
+    await app.close();
+  }
+});

apps/desktop/__tests__/launch.test.ts

@@ -1,40 +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 { testCleanup, test } from "./test-override.js";
-
-test("make sure app loads", async ({
-  ctx: { page },
-  expect,
-  onTestFinished
-}) => {
-  onTestFinished(testCleanup);
-
-  await page.waitForSelector("#authForm");
-
-  expect(
-    await page.getByRole("button", { name: "Create account" }).isVisible()
-  ).toBe(true);
-
-  await page
-    .getByRole("button", { name: "Skip & go directly to the app" })
-    .click();
-
-  await page.waitForSelector(".ProseMirror");
-});

apps/desktop/__tests__/test-override.ts

@@ -1,64 +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 { test as vitestTest, TestContext } from "vitest";
-import { buildAndLaunchApp, Fixtures, TestOptions } from "./utils";
-import { mkdir, rm } from "fs/promises";
-import path from "path";
-import slugify from "slugify";
-
-export const test = vitestTest.extend<Fixtures>({
-  options: { version: "3.0.0" } as TestOptions,
-  ctx: async ({ options }, use) => {
-    const ctx = await buildAndLaunchApp(options);
-    await use(ctx);
-  }
-});
-
-export async function testCleanup(context: TestContext) {
-  const ctx = (context.task.context as unknown as Fixtures).ctx;
-  if (context.task.result?.state === "fail") {
-    await mkdir("test-results", { recursive: true });
-    await ctx.page.screenshot({
-      path: path.join(
-        "test-results",
-        `${slugify(context.task.name)}-${process.platform}-${
-          process.arch
-        }-error.png`
-      )
-    });
-  }
-  await ctx.app.close();
-  await rm(ctx.userDataDir, {
-    force: true,
-    recursive: true,
-    maxRetries: 3,
-    retryDelay: 5000
-  }).catch(() => {
-    /*ignore */
-  });
-  await rm(ctx.outputDir, {
-    force: true,
-    recursive: true,
-    maxRetries: 3,
-    retryDelay: 5000
-  }).catch(() => {
-    /*ignore */
-  });
-}

apps/desktop/__tests__/utils.mjs

@@ -17,14 +17,22 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { db } from "../common/database";
-import createDBCollectionStore from "./create-db-collection-store";
+import { _electron as electron } from "playwright";
 
-const { useStore: useArchivedStore, useCollection: useArchived } =
-  createDBCollectionStore({
-    getCollection: () =>
-      db.notes.archived.grouped(db.settings.getGroupOptions("archive")),
-    eagerlyFetchFirstBatch: true
+const executablePath = process.env.EXECUTABLE_PATH;
+
+// process.platform === "linux"
+//   ? "output/linux-unpacked/Notesnook"
+//   : process.platform === "darwin"
+//   ? "output/mac/Notesnook.app/Contents/MacOS/Notesnook"
+//   : "output/win-unpacked/Notesnook.exe";
+
+export async function launchApp() {
+  const app = await electron.launch({
+    executablePath
   });
 
-export { useArchivedStore, useArchived };
+  const page = await app.firstWindow();
+
+  return { app, page };
+}

apps/desktop/__tests__/utils.ts

@@ -1,226 +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 { execSync } from "child_process";
-import { cp } from "fs/promises";
-import { fileURLToPath } from "node:url";
-import path, { join, resolve } from "path";
-import { _electron as electron } from "playwright";
-import { existsSync } from "fs";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const IS_DEBUG = process.env.NN_DEBUG === "true" || process.env.CI === "true";
-const productName = `NotesnookTestHarness`;
-const SOURCE_DIR = resolve("output", productName);
-
-export interface AppContext {
-  app: import("playwright").ElectronApplication;
-  page: import("playwright").Page;
-  configPath: string;
-  userDataDir: string;
-  outputDir: string;
-  relaunch: () => Promise<void>;
-}
-
-export interface TestOptions {
-  version: string;
-}
-
-export interface Fixtures {
-  options: TestOptions;
-  ctx: AppContext;
-}
-
-export async function buildAndLaunchApp(
-  options?: TestOptions
-): Promise<AppContext> {
-  const productName = `notesnooktest${makeid(10)}`;
-  const outputDir = path.join("test-artifacts", `${productName}-output`);
-  const executablePath = await copyBuild({
-    ...options,
-    outputDir
-  });
-  const { app, page, configPath, userDataDir } = await launchApp(
-    executablePath,
-    productName,
-    options?.version
-  );
-  const ctx: AppContext = {
-    app,
-    page,
-    configPath,
-    userDataDir,
-    outputDir,
-    relaunch: async () => {
-      const { app, page, configPath, userDataDir } = await launchApp(
-        executablePath,
-        productName,
-        options?.version
-      );
-      ctx.app = app;
-      ctx.page = page;
-      ctx.userDataDir = userDataDir;
-      ctx.configPath = configPath;
-    }
-  };
-  return ctx;
-}
-
-async function launchApp(
-  executablePath: string,
-  packageName: string,
-  version?: string
-) {
-  const userDataDir = resolve(
-    __dirname,
-    "..",
-    "test-artifacts",
-    "user_data_dirs",
-    packageName
-  );
-  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>)),
-      CUSTOM_USER_DATA_DIR: userDataDir,
-      ...(version
-        ? {
-            CUSTOM_APP_VERSION: version
-          }
-        : {})
-    }
-  });
-
-  const page = await app.firstWindow();
-
-  const configPath = path.join(userDataDir, "UserData", "config.json");
-  return {
-    app,
-    page,
-    configPath,
-    userDataDir
-  };
-}
-
-let MAX_RETRIES = 3;
-export async function buildApp(version?: string) {
-  if (!existsSync(SOURCE_DIR)) {
-    const args = [
-      "electron-builder",
-      "--dir",
-      `--${process.arch}`,
-      `--config electron-builder.config.js`,
-      `--c.extraMetadata.productName=${productName}`,
-      `--c.compression=store`,
-      "--publish=never"
-    ];
-    if (version) args.push(`--c.extraMetadata.version=${version}`);
-    try {
-      execSync(`npx ${args.join(" ")}`, {
-        stdio: IS_DEBUG ? "inherit" : "ignore",
-        env: {
-          ...process.env,
-          NOTESNOOK_STAGING: "true",
-          NN_PRODUCT_NAME: productName,
-          NN_APP_ID: `com.notesnook.test.${productName}`,
-          NN_OUTPUT_DIR: SOURCE_DIR
-        }
-      });
-    } catch (e) {
-      if (--MAX_RETRIES) {
-        console.log("retrying...");
-        return await buildApp(version);
-      } else throw e;
-    }
-  }
-}
-
-async function copyBuild({ outputDir }: { outputDir: string }) {
-  return process.platform === "win32"
-    ? await makeBuildCopyWindows(outputDir, productName)
-    : process.platform === "darwin"
-    ? await makeBuildCopyMacOS(outputDir, productName)
-    : await makeBuildCopyLinux(outputDir, productName);
-}
-
-async function makeBuildCopyLinux(outputDir: string, productName: string) {
-  const platformDir =
-    process.arch === "arm64" ? "linux-arm64-unpacked" : "linux-unpacked";
-  const appDir = await makeBuildCopy(outputDir, platformDir);
-  return resolve(
-    __dirname,
-    "..",
-    appDir,
-    productName.toLowerCase().replace(/\s+/g, "-")
-  );
-}
-
-async function makeBuildCopyWindows(outputDir: string, productName: string) {
-  const platformDir =
-    process.arch === "arm64" ? "win-arm64-unpacked" : "win-unpacked";
-  const appDir = await makeBuildCopy(outputDir, platformDir);
-  return resolve(__dirname, "..", appDir, `${productName}.exe`);
-}
-
-async function makeBuildCopyMacOS(outputDir: string, productName: string) {
-  const platformDir = process.arch === "arm64" ? "mac-arm64" : "mac";
-  const appDir = await makeBuildCopy(outputDir, platformDir);
-  return resolve(
-    __dirname,
-    "..",
-    appDir,
-    `${productName}.app`,
-    "Contents",
-    "MacOS",
-    productName
-  );
-}
-
-async function makeBuildCopy(outputDir: string, platformDir: string) {
-  const appDir = outputDir;
-  await cp(join(SOURCE_DIR, platformDir), outputDir, {
-    recursive: true,
-    preserveTimestamps: true,
-    verbatimSymlinks: true,
-    dereference: false,
-    force: true
-  });
-
-  return appDir;
-}
-
-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

@@ -1,223 +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/>.
-*/
-
-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: true,
-  asarUnpack: [
-    "node_modules/sqlite-better-trigram-@(linux|darwin|windows)-${arch}/**/*",
-    "node_modules/sqlite3-fts5-html-@(linux|darwin|windows)-${arch}/**/*"
-  ],
-  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,15 +2,13 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "3.3.6-beta.3",
+  "version": "3.0.25",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
-  "sideEffects": [
-    "src/overrides.ts"
-  ],
+  "sideEffects": false,
   "exports": {
     ".": {
       "require": {
@@ -29,55 +27,239 @@
   "dependencies": {
     "@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": "^12.4.1",
-    "electron-trpc": "0.7.1",
-    "electron-updater": "^6.6.2",
-    "icojs": "^0.19.5",
-    "sqlite-better-trigram": "0.0.5",
-    "sqlite3-fts5-html": "^0.0.4",
+    "better-sqlite3-multiple-ciphers": "11.5.0",
+    "electron-trpc": "0.6.1",
+    "electron-updater": "^6.3.4",
+    "icojs": "^0.19.4",
+    "sqlite-better-trigram": "0.0.2",
     "typed-emitter": "^2.1.0",
     "yargs": "^17.7.2",
-    "zod": "3.24.3"
+    "zod": "3.23.8"
   },
   "devDependencies": {
     "@streetwriters/kysely": "^0.27.4",
-    "@types/node": "22.15.3",
+    "@types/node": "22.7.0",
     "@types/yargs": "^17.0.33",
-    "chokidar": "^4.0.3",
-    "electron": "^37.0.0",
-    "electron-builder": "^26.0.12",
+    "chokidar": "^4.0.1",
+    "electron": "^31.7.4",
+    "electron-builder": "^25.1.8",
     "esbuild": "0.21.5",
-    "node-abi": "^4.5.0",
-    "node-gyp-build": "^4.8.4",
-    "playwright": "1.48.2",
+    "vitest": "2.1.8",
+    "node-abi": "^3.68.0",
+    "node-gyp-build": "^4.8.2",
+    "playwright": "^1.48.2",
     "prebuildify": "^6.0.1",
     "slugify": "1.6.6",
     "tree-kill": "^1.2.2",
-    "undici": "^7.8.0",
-    "vitest": "^3.2.4"
+    "undici": "^6.19.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": "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": "esbuild electron=./src/main.ts ./src/preload.ts --external:electron --external:fsevents --external:better-sqlite3-multiple-ciphers --external:sodium-native --minify --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=false --define:RELEASE=true",
     "bundle:mas": "esbuild electron=./src/main.ts ./src/preload.ts --minify --external:electron --external:fsevents --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=true --define:RELEASE=true",
     "postinstall": "patch-package",
-    "test": "vitest run"
+    "test": "node --test --test-timeout 30000 --test-force-exit"
   },
   "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/sqlite-better-trigram",
+      "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}"
+      },
+      "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": "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

@@ -0,0 +1,36 @@
+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

@@ -1,13 +0,0 @@
-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.10.0.patch

@@ -1,11 +0,0 @@
-diff --git a/node_modules/better-sqlite3-multiple-ciphers/deps/defines.gypi b/node_modules/better-sqlite3-multiple-ciphers/deps/defines.gypi
-index 1a14ecd..ff938f1 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

@@ -0,0 +1,39 @@
+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

@@ -17,7 +17,6 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-console.log("starting build...");
 import path from "path";
 import fs from "fs/promises";
 import { existsSync } from "fs";
@@ -27,56 +26,39 @@ import * as childProcess from "child_process";
 import { fileURLToPath } from "url";
 import { patchBetterSQLite3 } from "./patch-better-sqlite3.mjs";
 
-console.log("imports done...");
 const args = yargs(process.argv);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const root = args.root || path.join(__dirname, "..");
-const skipTscBuild = args.skipTscBuild || false;
 
 const webAppPath = path.resolve(path.join(__dirname, "..", "..", "web"));
 
-console.log("loaded args", {
-  args,
-  __filename,
-  __dirname,
-  root,
-  skipTscBuild,
-  webAppPath
-});
-await fs.rm(path.join(root, "build"), { force: true, recursive: true });
-
-console.log("removed build folder");
+await fs.rm("./build/", { force: true, recursive: true });
 
 if (args.rebuild || !existsSync(path.join(webAppPath, "build"))) {
-  console.log("rebuilding...");
   await exec(
-    "node scripts/execute.mjs @notesnook/web:build:desktop",
+    "npx nx build:desktop @notesnook/web",
     path.join(__dirname, "..", "..", "..")
   );
 }
 
-await patchBetterSQLite3();
+// temporary until there's support for prebuilt binaries for linux ARM
+if (os.platform() === "linux") await patchBetterSQLite3();
 
-await fs.cp(path.join(webAppPath, "build"), path.join(root, "build"), {
+await fs.cp(path.join(webAppPath, "build"), "build", {
   recursive: true,
   force: true
 });
 
 if (args.variant === "mas") {
-  await exec(`yarn run bundle:mas --outdir=${path.join(root, "build")}`);
+  await exec(`yarn run bundle:mas`);
 } else {
-  await exec(`yarn run bundle --outdir=${path.join(root, "build")}`);
+  await exec(`yarn run bundle`);
 }
 
-if (!skipTscBuild) {
-  await exec(`yarn run build`);
-}
+await exec(`yarn run build`);
 
 if (args.run) {
-  await exec(
-    `yarn electron-builder --dir --${process.arch} --config=electron-builder.config.js`
-  );
+  await exec(`yarn electron-builder --dir --${process.arch}`);
   if (process.platform === "win32") {
     await exec(`.\\output\\win-unpacked\\Notesnook.exe`);
   } else if (process.platform === "darwin") {

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

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { readFile, rm, writeFile } from "fs/promises";
+import { readFile, writeFile } from "fs/promises";
 import path from "path";
 import { fileURLToPath } from "url";
 
@@ -25,8 +25,6 @@ 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,
     "..",
@@ -36,23 +34,15 @@ export async function patchBetterSQLite3() {
   );
   const json = JSON.parse(await readFile(jsonPath, "utf-8"));
 
-  delete json.homepage;
-  delete json.repository;
+  json.version = "11.5.1";
+  json.homepage = "https://github.com/thecodrr/better-sqlite3-multiple-ciphers";
+  json.repository.url =
+    "git://github.com/thecodrr/better-sqlite3-multiple-ciphers.git";
 
   await writeFile(jsonPath, JSON.stringify(json));
-
-  await rm(
-    path.join(
-      __dirname,
-      "..",
-      "node_modules",
-      "better-sqlite3-multiple-ciphers",
-      "build"
-    ),
-    { force: true, recursive: true }
-  );
 }
 
 if (process.argv[1] === __filename) {
+  console.log("Patching better-sqlite3");
   patchBetterSQLite3();
 }

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

@@ -19,16 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { initTRPC } from "@trpc/server";
 import { z } from "zod";
-import {
-  app,
-  dialog,
-  Menu,
-  MenuItem,
-  nativeImage,
-  nativeTheme,
-  Notification,
-  shell
-} from "electron";
+import { app, dialog, nativeTheme, Notification, shell } from "electron";
 import { AutoLaunch } from "../utils/autolaunch";
 import { config, DesktopIntegration } from "../utils/config";
 import { bringToFront } from "../utils/bring-to-front";
@@ -38,11 +29,10 @@ import { dirname } from "path";
 import { resolvePath } from "../utils/resolve-path";
 import { observable } from "@trpc/server/observable";
 import { AssetManager } from "../utils/asset-manager";
-import { isFlatpak, isSnap } from "../utils";
+import { isFlatpak } 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();
 
@@ -59,7 +49,6 @@ 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 }) => {
@@ -235,63 +224,5 @@ 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

@@ -33,8 +33,6 @@ export class SQLite {
   initialized = false;
   preparedStatements: Map<string, Statement<unknown[]>> = new Map();
   retryCounter: Record<string, number> = {};
-  extensionsLoaded = false;
-
   constructor() {
     console.log("new sqlite worker");
   }
@@ -48,6 +46,8 @@ export class SQLite {
     this.sqlite = require("better-sqlite3-multiple-ciphers")(
       filePath
     ).unsafeMode(true);
+    const betterTrigram = require("sqlite-better-trigram");
+    betterTrigram.load(this.sqlite);
   }
 
   /**
@@ -115,29 +115,9 @@ export class SQLite {
     } catch (e) {
       if (e instanceof Error) e.message += ` (query: ${sql})`;
       throw e;
-    } finally {
-      // Since SQLite 3.48.0 (SQLite3MC v2.0.2) it's not possible to load fts5
-      // extensions before database has been decrypting. This is because
-      // executing a `SELECT` now accesses the underlying databases resulting in
-      // an error. Since FTS5 extensions depend on `SELECT fts5` to load the
-      // fts5 API, we must wait decrypt the database before we can load
-      // the extensions.
-      if (!this.extensionsLoaded && (await this.isDatabaseReady())) {
-        this.loadExtensions();
-      }
     }
   }
 
-  private loadExtensions() {
-    this.sqlite?.loadExtension(
-      getExtensionPath("sqlite-better-trigram", "better-trigram")
-    );
-    this.sqlite?.loadExtension(
-      getExtensionPath("sqlite3-fts5-html", "fts5-html")
-    );
-    this.extensionsLoaded = true;
-  }
-
   async run<R>(
     sql: string,
     parameters?: SQLiteCompatibleType[]
@@ -162,53 +142,4 @@ export class SQLite {
       retryDelay: 500
     });
   }
-
-  /**
-   * This just executes `SELECT 1` on the database to make sure its ready.
-   * On an encrypted database, this will fail until `PRAGMA key` has been
-   * called.
-   */
-  private async isDatabaseReady() {
-    // return this.exec(`SELECT 1;`)
-    //   .then(() => true)
-    //   .catch(() => false);
-    if (!this.sqlite) return false;
-    try {
-      this.sqlite.prepare(`SELECT 1;`).run();
-      return true;
-    } catch {
-      return false;
-    }
-  }
-}
-
-function getExtensionPath(extensionName: string, entryPoint: string) {
-  const path = require("path");
-  const { statSync } = require("fs");
-
-  const os = process.platform === "win32" ? "windows" : process.platform;
-  const packageName = `${extensionName}-${os}-${process.arch}`;
-  const extensionSuffix =
-    process.platform === "win32"
-      ? "dll"
-      : process.platform === "darwin"
-      ? "dylib"
-      : "so";
-  let loadablePath = path.join(
-    require.resolve(extensionName),
-    "..",
-    "..",
-    packageName,
-    `${entryPoint}.${extensionSuffix}`
-  );
-
-  if (loadablePath.includes(".asar"))
-    loadablePath = loadablePath
-      .replace("electron.asar", "app.asar")
-      .replace(".asar", ".asar.unpacked");
-
-  if (!statSync(loadablePath, { throwIfNoEntry: false })) {
-    throw new Error(`${extensionName} not found at ${loadablePath}.`);
-  }
-  return loadablePath;
 }

apps/desktop/src/api/updater.ts

@@ -23,7 +23,6 @@ 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 };
@@ -34,7 +33,6 @@ 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;
@@ -69,13 +67,7 @@ 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/main.ts

@@ -17,8 +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 "./overrides";
-import { app, BrowserWindow, nativeTheme, shell, dialog } from "electron";
+import { app, BrowserWindow, nativeTheme, shell } from "electron";
 import { isDevelopment } from "./utils";
 import { registerProtocol, PROTOCOL_URL } from "./utils/protocol";
 import { configureAutoUpdater } from "./utils/autoupdater";
@@ -86,8 +85,6 @@ 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,
@@ -104,10 +101,7 @@ async function createWindow() {
     ...(config.desktopSettings.nativeTitlebar
       ? {}
       : {
-          titleBarStyle:
-            process.platform === "win32" || process.platform === "darwin"
-              ? "hidden"
-              : "default",
+          titleBarStyle: process.platform === "win32" || process.platform === "darwin" ? "hidden" : "default",
           frame: process.platform === "win32" || process.platform === "darwin",
           titleBarOverlay: {
             height: 37,
@@ -148,11 +142,6 @@ 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/"
   );
@@ -182,17 +171,6 @@ async function createWindow() {
 app.once("ready", async () => {
   console.info("App ready. Opening window.");
 
-  if (app.runningUnderARM64Translation) {
-    console.log("App is running under ARM64 translation");
-    dialog.showMessageBoxSync({
-      message:
-        "Notesnook detected that it is running under ARM64 translation. For the best performance, please download the ARM64 build of Notesnook from our website.",
-      type: "warning",
-      buttons: ["Okay"],
-      title: "Degraded Performance Warning"
-    });
-  }
-
   if (config.customDns) enableCustomDns();
   else disableCustomDns();
 

apps/desktop/src/overrides.ts

@@ -1,41 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-import { app } from "electron";
-import path from "path";
-
-const customVersion = process.env.CUSTOM_APP_VERSION;
-if (customVersion) {
-  app.getVersion = () => customVersion;
-  console.log("setting custom version:", customVersion);
-}
-
-if (process.env.CUSTOM_USER_DATA_DIR) {
-  app.setPath(
-    "appData",
-    path.join(process.env.CUSTOM_USER_DATA_DIR, "AppData")
-  );
-  app.setPath(
-    "userData",
-    path.join(process.env.CUSTOM_USER_DATA_DIR, "UserData")
-  );
-  app.setPath(
-    "documents",
-    path.join(process.env.CUSTOM_USER_DATA_DIR, "Documents")
-  );
-}

apps/desktop/src/utils/autoupdater.ts

@@ -20,22 +20,19 @@ 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}/${releaseTrack}`,
+    url: `https://notesnook.com/api/v1/releases/${process.platform}/${CHANNEL}`,
     useMultipleRangeRequest: false,
-    channel: releaseTrack
+    channel: CHANNEL
   });
 
   autoUpdater.autoDownload = config.automaticUpdates;
-  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.allowDowngrade = false;
   autoUpdater.allowPrerelease = false;
   autoUpdater.autoInstallOnAppQuit = true;
   autoUpdater.disableWebInstaller = true;

apps/desktop/src/utils/config.ts

@@ -20,7 +20,6 @@ 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(),
@@ -47,9 +46,6 @@ 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,7 +29,3 @@ 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,44 +143,16 @@ function setupMenu() {
         })
       );
 
-    if (params.isEditable) {
+    if (params.isEditable)
       menu.append(
         new MenuItem({
           label: strings.paste(),
-          role: "paste",
+          role: "pasteAndMatchStyle",
           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/vitest.config.ts

@@ -1,42 +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 { defineConfig } from "vitest/config";
-
-export default defineConfig({
-  test: {
-    testTimeout: 120 * 1000,
-    hookTimeout: 120 * 1000,
-    sequence: {
-      concurrent: true,
-      shuffle: true
-    },
-    globalSetup: "./__tests__/global-setup.ts",
-    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/.detoxrc.js

@@ -1,92 +0,0 @@
-/** @type {Detox.DetoxConfig} */
-module.exports = {
-  testRunner: {
-    args: {
-      $0: "jest",
-      config: "e2e/jest.config.js"
-    },
-    jest: {
-      setupTimeout: 120000
-    }
-  },
-  apps: {
-    "ios.debug": {
-      type: "ios.app",
-      binaryPath:
-        "ios/build/Build/Products/Debug-iphonesimulator/Notesnook.app",
-      build:
-        "xcodebuild -workspace ios/Notesnook.xcworkspace -scheme YOUR_APP -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build"
-    },
-    "ios.release": {
-      type: "ios.app",
-      binaryPath:
-        "ios/build/Build/Products/Release-iphonesimulator/Notesnook.app",
-      build:
-        "xcodebuild -workspace ios/Notesnook.xcworkspace -scheme YOUR_APP -configuration Release -sdk iphonesimulator -derivedDataPath ios/build"
-    },
-    "android.debug": {
-      type: "android.apk",
-      binaryPath: "android/app/build/outputs/apk/debug/app-arm64-v8a-debug.apk",
-      testBinaryPath:
-        "android/app/build/outputs/apk/androidTest/debug/app-debug-androidTest.apk",
-      build:
-        "cd android ; ENVFILE=.env.test ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
-      reversePorts: [8081]
-    },
-    "android.release": {
-      type: "android.apk",
-      binaryPath:
-        "android/app/build/outputs/apk/release/app-arm64-v8a-release.apk",
-      testBinaryPath:
-        "android/app/build/outputs/apk/androidTest/release/app-release-androidTest.apk",
-      build:
-        "cd android ; ENVFILE=.env.test ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release ; cd .."
-    }
-  },
-  devices: {
-    simulator: {
-      type: "ios.simulator",
-      device: {
-        type: "iPhone 17 Pro Max"
-      }
-    },
-    attached: {
-      type: "android.attached",
-      device: {
-        adbName: ".*"
-      }
-    },
-    emulator: {
-      type: "android.emulator",
-      device: {
-        avdName: "Pixel_5_API_36"
-      }
-    }
-  },
-  configurations: {
-    "ios.sim.debug": {
-      device: "simulator",
-      app: "ios.debug"
-    },
-    "ios.sim.release": {
-      device: "simulator",
-      app: "ios.release"
-    },
-    "android.att.debug": {
-      device: "attached",
-      app: "android.debug"
-    },
-    "android.att.release": {
-      device: "attached",
-      app: "android.release"
-    },
-    "android.emu.debug": {
-      device: "emulator",
-      app: "android.debug"
-    },
-    "android.emu.release": {
-      device: "emulator",
-      app: "android.release"
-    }
-  }
-};

apps/mobile/.gitignore

@@ -4,7 +4,7 @@ artifacts/
 #
 .DS_Store
 
-android/app/src/main/assets/
+native/android/app/src/main/assets/
 *Issues.md
 build_cache/
 #
@@ -16,12 +16,11 @@ build_cache/
 .cxx/
 *.keystore
 !debug.keystore
-.kotlin/
 
 # Xcode
 #
-ios/Pods
-ios/DerivedData
+native/ios/Pods
+native/ios/DerivedData
 build/
 *.pbxuser
 !default.pbxuser
@@ -40,7 +39,7 @@ DerivedData
 *.xcuserstate
 *.hprof
 **/.xcode.env.local
-cache
+native/cache
 # Android/IntelliJ
 #
 rn-build-deps/
@@ -58,7 +57,7 @@ yarn-error.log
 # BUCK
 buck-out/
 \.buckd/
-
+*.keystore
 
 # fastlane
 #
@@ -70,7 +69,6 @@ buck-out/
 */fastlane/report.xml
 */fastlane/Preview.html
 */fastlane/screenshots
-vendor
 
 # Bundle artifact
 *.jsbundle

apps/mobile/Gemfile

@@ -1,16 +0,0 @@
-source 'https://rubygems.org'
-
-# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby ">= 2.6.10"
-
-# Exclude problematic versions of cocoapods and activesupport that causes build failures.
-gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
-gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
-gem 'xcodeproj', '< 1.26.0'
-gem 'concurrent-ruby', '< 1.3.4'
-
-# Ruby 3.4.0 has removed some libraries from the standard library.
-gem 'bigdecimal'
-gem 'logger'
-gem 'benchmark'
-gem 'mutex_m'

apps/mobile/android/app/src/main/java/com/streetwriters/notesnook/MainApplication.kt

@@ -1,28 +0,0 @@
-package com.streetwriters.notesnook
- 
-import android.app.Application
-import com.facebook.react.PackageList
-import com.facebook.react.ReactApplication
-import com.facebook.react.ReactHost
-import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
-import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
-import org.wonday.orientation.OrientationActivityLifecycle;
-class MainApplication : Application(), ReactApplication {
-    override val reactHost: ReactHost by lazy {
-    getDefaultReactHost(
-      context = applicationContext,
-      packageList =
-        PackageList(this).packages.apply {
-          // Packages that cannot be autolinked yet can be added manually here, for example:
-          // add(MyReactNativePackage())
-          add(NNativeModulePackage());
-        },
-    )
-  }
- 
-  override fun onCreate() {
-    super.onCreate()
-      registerActivityLifecycleCallbacks(OrientationActivityLifecycle.getInstance());
-    loadReactNative(this)
-  }
-}

apps/mobile/android/app/src/release/AndroidManifest.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <application android:networkSecurityConfig="@xml/network_security_config">
-    </application>
-</manifest>

apps/mobile/android/releasenotes/whatsnew-en-US

@@ -1,6 +0,0 @@
-- Get an overview of your year with Notesnook with Wrapped 2025
-- Cell selection and column resizing in tables
-- Added support for uploading large files in background
-- Bug fixes and minor improvements
-
-Thank you for using Notesnook!

apps/mobile/android/settings.gradle

@@ -1,11 +0,0 @@
-pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
-plugins { id("com.facebook.react.settings") }
-extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
-rootProject.name = 'Notesnook'
-include ':app'
-includeBuild('../node_modules/@react-native/gradle-plugin')
-
-include ":react-native-config"
-project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')
-include ":lazysodium-android"
-project(':lazysodium-android').projectDir = new File(rootProject.projectDir, '../node_modules/@ammarahmed/react-native-sodium/android/lazysodium-android/app')

apps/mobile/app/app.tsx

@@ -19,30 +19,26 @@ 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 { Appearance, I18nManager, StatusBar } from "react-native";
+import { I18nManager, View } from "react-native";
 import "react-native-gesture-handler";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
-import DialogProvider from "./components/dialog-provider";
+import AppLockedOverlay from "./components/app-lock-overlay";
 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 { changeSystemBarColors, useThemeStore } from "./stores/use-theme-store";
+import { 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);
@@ -51,15 +47,12 @@ const { appLockEnabled, appLockMode } = SettingsService.get();
 if (appLockEnabled || appLockMode !== "none") {
   useUserStore.getState().lockApp(true);
 }
-RNBootSplash.hide({
-  fade: true
-});
+
 const App = (props: { configureMode: "note-preview" }) => {
   useAppEvents();
   //@ts-ignore
   globalThis["IS_MAIN_APP_RUNNING"] = true;
   useEffect(() => {
-    changeSystemBarColors();
     SettingsService.onFirstLaunch();
     setTimeout(async () => {
       await Notifications.get();
@@ -71,27 +64,42 @@ const App = (props: { configureMode: "note-preview" }) => {
   }, []);
 
   return (
-    <SafeAreaProvider>
-      <StatusBar translucent={true} backgroundColor="transparent" />
+    <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>
+
       <GestureHandlerRootView
         style={{
           height: "100%",
           width: "100%"
         }}
       >
-        <GlobalSafeAreaProvider />
         {props.configureMode === "note-preview" ? (
           <NotePreviewConfigure />
         ) : (
-          <RootNavigation />
+          <ApplicationHolder />
         )}
-        <ScopedThemeProvider value="dialog">
-          <Toast />
-        </ScopedThemeProvider>
-        <DialogProvider />
-        <AppLocked />
       </GestureHandlerRootView>
-    </SafeAreaProvider>
+      <AppLockedOverlay />
+    </View>
   );
 };
 
@@ -130,29 +138,16 @@ export const withTheme = (Element: (props: any) => JSX.Element) => {
             /* empty */
           });
       }, 1000);
-
-      const listener = Appearance.addChangeListener(({ colorScheme }) => {
-        if (colorScheme && SettingsService.getProperty("useSystemTheme")) {
-          useThemeStore
-            .getState()
-            .setColorScheme(colorScheme as "light" | "dark");
-        }
-      });
-      return () => {
-        listener.remove();
-      };
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    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]);
+    const nextTheme = colorScheme === "dark" ? darkTheme : lightTheme;
+    if (JSON.stringify(nextTheme) !== JSON.stringify(currTheme)) {
+      useThemeEngineStore
+        .getState()
+        .setTheme(colorScheme === "dark" ? darkTheme : lightTheme);
+      currTheme = nextTheme;
+    }
 
     return (
       <I18nProvider i18n={i18n}>

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

@@ -94,7 +94,7 @@ export async function encryptDatabaseKeyWithPassword(appLockPassword: string) {
 }
 
 export async function restoreDatabaseKeyToKeyChain(appLockPassword: string) {
-  const databaseKeyCipher = CipherStorage.getMap(DB_KEY_CIPHER) as Cipher;
+  const databaseKeyCipher: Cipher = CipherStorage.getMap(DB_KEY_CIPHER);
   const databaseKey = (await decrypt(
     {
       password: appLockPassword
@@ -135,9 +135,7 @@ export async function clearAppLockVerificationCipher() {
 
 export async function validateAppLockPassword(appLockPassword: string) {
   try {
-    const appLockCipher: Cipher = CipherStorage.getMap(
-      APPLOCK_CIPHER
-    ) as Cipher;
+    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);
@@ -161,9 +159,7 @@ export function clearDatabaseKey() {
 export async function getDatabaseKey(appLockPassword?: string) {
   if (DB_KEY) return DB_KEY;
   if (appLockPassword) {
-    const databaseKeyCipher: Cipher = CipherStorage.getMap(
-      "databaseKeyCipher"
-    ) as Cipher;
+    const databaseKeyCipher: Cipher = CipherStorage.getMap("databaseKeyCipher");
     const databaseKey = await decrypt(
       {
         password: appLockPassword
@@ -205,8 +201,9 @@ export async function getDatabaseKey(appLockPassword?: string) {
   }
 
   if (await Keychain.hasInternetCredentials("notesnook")) {
-    const userKeyCredentials =
-      await Keychain.getInternetCredentials("notesnook");
+    const userKeyCredentials = await Keychain.getInternetCredentials(
+      "notesnook"
+    );
 
     if (userKeyCredentials) {
       const userKeyCipher: Cipher = (await encrypt(
@@ -296,7 +293,7 @@ export async function deriveCryptoKey(data: SerializedKey) {
 
 export async function getCryptoKey() {
   try {
-    const keyCipher: Cipher = MMKV.getMap(USER_KEY_CIPHER) as Cipher;
+    const keyCipher: Cipher = MMKV.getMap(USER_KEY_CIPHER);
     if (!keyCipher) {
       DatabaseLogger.info("User key cipher is null");
       return undefined;

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

@@ -16,7 +16,7 @@ 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 { database, getFeature, getFeatureLimit } from "@notesnook/common";
+import { database } from "@notesnook/common";
 import { logger as dbLogger, ICompressor } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import {
@@ -26,6 +26,7 @@ import {
 } from "@streetwriters/kysely";
 import { Platform } from "react-native";
 import * as Gzip from "react-native-gzip";
+import SettingsService from "../../services/settings";
 import EventSource from "../../utils/sse/even-source-ios";
 import AndroidEventSource from "../../utils/sse/event-source";
 import { FileStorage } from "../filesystem";
@@ -33,24 +34,11 @@ import { getDatabaseKey } from "./encryption";
 import "./logger";
 import { RNSqliteDriver } from "./sqlite.kysely";
 import { Storage } from "./storage";
-import SettingsService from "../../services/settings";
 
 export async function setupDatabase(password?: string) {
   const key = await getDatabaseKey(password);
   if (!key) throw new Error(strings.databaseSetupFailed());
 
-  // const base = `http://192.168.100.92`;
-
-  // database.host({
-  //   API_HOST: `${base}:5264`,
-  //   AUTH_HOST: `${base}:8264`,
-  //   SSE_HOST: `${base}:7264`,
-  //   ISSUES_HOST: `${base}:2624`,
-  //   SUBSCRIPTIONS_HOST: `${base}:9264`,
-  //   MONOGRAPH_HOST: `${base}:6264`,
-  //   NOTESNOOK_HOST: `${base}:8788`
-  // });
-
   database.host({
     API_HOST: "https://api.notesnook.com",
     AUTH_HOST: "https://auth.streetwriters.co",
@@ -58,7 +46,6 @@ export async function setupDatabase(password?: string) {
     SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
     ISSUES_HOST: "https://issues.streetwriters.co",
     MONOGRAPH_HOST: "https://monogr.ph",
-    NOTESNOOK_HOST: "https://notesnook.com",
     ...(SettingsService.getProperty("serverUrls") || {})
   });
 
@@ -72,8 +59,8 @@ export async function setupDatabase(password?: string) {
       ({
         compress: Gzip.deflate,
         decompress: Gzip.inflate
-      }) as ICompressor,
-    batchSize: 50,
+      } as ICompressor),
+    batchSize: 100,
     sqliteOptions: {
       dialect: (name) => ({
         createDriver: () => {
@@ -86,10 +73,6 @@ export async function setupDatabase(password?: string) {
       tempStore: "memory",
       journalMode: Platform.OS === "ios" ? "DELETE" : "WAL",
       password: key
-    },
-    maxNoteVersions: async () => {
-      const limit = await getFeatureLimit(getFeature("maxNoteVersions"));
-      return typeof limit.caption === "number" ? limit.caption : undefined;
     }
   });
 }

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

@@ -136,12 +136,6 @@ export const Storage: IStorage = {
   clear(): Promise<void> {
     return DefaultStorage.clear();
   },
-  generateCryptoKeyPair() {
-    throw new Error("Not implemented");
-  },
-  decryptAsymmetric() {
-    throw new Error("Not implemented");
-  },
   getAllKeys(): Promise<string[]> {
     return DefaultStorage.getAllKeys();
   },

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

@@ -70,7 +70,7 @@ export async function downloadFile(
       throw new Error(error);
     }
 
-    const totalChunks = Math.ceil(size / (chunkSize + ABYTES));
+    const totalChunks = Math.ceil(size / chunkSize);
     const decryptedLength = size - totalChunks * ABYTES;
 
     if (attachment && attachment.size !== decryptedLength) {
@@ -115,13 +115,7 @@ export async function downloadFile(
       .progress(async (recieved, total) => {
         useAttachmentStore
           .getState()
-          .setProgress(
-            0,
-            parseInt(total),
-            filename,
-            parseInt(recieved),
-            "download"
-          );
+          .setProgress(0, total, filename, recieved, "download");
 
         DatabaseLogger.log(`Downloading: ${filename}, ${recieved}/${total}`);
       });
@@ -155,9 +149,7 @@ export async function downloadFile(
       });
     }
 
-    await RNFetchBlob.fs.mv(tempFilePath, originalFilePath).catch(() => {
-      /* empty */
-    });
+    await RNFetchBlob.fs.mv(tempFilePath, originalFilePath);
 
     if (!(await exists(filename))) {
       throw new Error("File size mismatch");

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

@@ -137,7 +137,6 @@ export async function deleteFile(
 
 export async function clearFileStorage() {
   try {
-    await createCacheDir();
     const files = await RNFetchBlob.fs.ls(cacheDir);
     const oldCache = await RNFetchBlob.fs.ls(cacheDirOld);
 
@@ -222,7 +221,6 @@ export async function deleteCacheFileByName(name: string) {
 }
 
 export async function deleteDCacheFiles() {
-  await createCacheDir();
   const files = await RNFetchBlob.fs.ls(cacheDir);
   for (const file of files) {
     if (file.includes("_dcache") || file.startsWith("NN_")) {
@@ -233,26 +231,6 @@ export async function deleteDCacheFiles() {
   }
 }
 
-export async function getCachePathForFile(filename: string) {
-  const path = `${cacheDir}/${filename}`;
-
-  const iosAppGroup =
-    Platform.OS === "ios"
-      ? 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}`;
 

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

@@ -17,8 +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 { isImage, RequestOptions } from "@notesnook/core";
-import { PermissionsAndroid, Platform } from "react-native";
+import { RequestOptions } from "@notesnook/core";
+import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import { ToastManager } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
@@ -31,7 +31,6 @@ import {
   FileSizeResult,
   getUploadedFileSize
 } from "./utils";
-import Upload from "@ammarahmed/react-native-upload";
 
 export async function uploadFile(
   filename: string,
@@ -65,87 +64,61 @@ export async function uploadFile(
       );
     }
 
-    const fileInfo = await RNFetchBlob.fs.stat(filePath);
+    const fileSize = (await RNFetchBlob.fs.stat(filePath)).size;
 
     const remoteFileSize = await getUploadedFileSize(filename);
     if (remoteFileSize === FileSizeResult.Error) return false;
 
-    if (
-      remoteFileSize > FileSizeResult.Empty &&
-      remoteFileSize === fileInfo.size
-    ) {
+    if (remoteFileSize > FileSizeResult.Empty && remoteFileSize === fileSize) {
       DatabaseLogger.log(`File ${filename} is already uploaded.`);
       return true;
     }
 
-    let attachmentInfo = await db.attachments.attachment(filename);
+    const uploadUrlResponse = await fetch(url, {
+      method: "PUT",
+      headers
+    });
 
-    DatabaseLogger.info(
-      `Starting upload of ${filename} at path: ${fileInfo.path} ${fileInfo.size}`
-    );
+    const uploadUrl = uploadUrlResponse.ok
+      ? await uploadUrlResponse.text()
+      : await uploadUrlResponse.json();
 
-    if (Platform.OS === "android") {
-      const status = await PermissionsAndroid.request(
-        "android.permission.POST_NOTIFICATIONS"
+    if (typeof uploadUrl !== "string") {
+      throw new Error(
+        uploadUrl.error || "Unable to resolve attachment upload url."
       );
-      if (status !== "granted") {
-        ToastManager.show({
-          message: `The permission to show file upload notification was disallowed by the user.`,
-          type: "info"
-        });
-      }
     }
 
-    const upload = Upload.create({
-      customUploadId: filename,
-      path: Platform.OS === "ios" ? "file://" + fileInfo.path : fileInfo.path,
-      url: url,
-      method: "PUT",
-      headers: {
-        ...headers,
-        "content-type": "application/octet-stream"
-      },
-      appGroup: IOS_APPGROUPID,
-      notification: {
-        filename:
-          attachmentInfo && isImage(attachmentInfo?.mimeType)
-            ? "image"
-            : attachmentInfo?.filename || "file",
-        enabled: true,
-        enableRingTone: true,
-        autoClear: true
-      }
-    }).onChange((event) => {
-      switch (event.status) {
-        case "running":
-        case "pending":
-          useAttachmentStore
-            .getState()
-            .setProgress(
-              event.uploadedBytes || 0,
-              event.totalBytes || fileInfo.size,
-              filename,
-              0,
-              "upload"
-            );
-          DatabaseLogger.info(
-            `File upload progress: ${filename}, ${event.uploadedBytes}/${
-              event.totalBytes || fileInfo.size
-            }`
-          );
-          break;
-        case "completed":
-          console.log("Upload completed");
-          break;
-      }
-    });
-    const result = await upload.start();
+    DatabaseLogger.info(`Starting upload: ${filename}`);
+
+    const uploadRequest = RNFetchBlob.config({
+      //@ts-ignore
+      IOSBackgroundTask: !globalThis["IS_SHARE_EXTENSION"]
+    })
+      .fetch(
+        "PUT",
+        uploadUrl,
+        {
+          "content-type": ""
+        },
+        RNFetchBlob.wrap(filePath)
+      )
+      .uploadProgress((sent, total) => {
+        useAttachmentStore
+          .getState()
+          .setProgress(sent, total, filename, 0, "upload");
+        DatabaseLogger.info(
+          `File upload progress: ${filename}, ${sent}/${total}`
+        );
+      });
+
     cancelToken.cancel = async () => {
       useAttachmentStore.getState().remove(filename);
-      upload.cancel();
+      uploadRequest.cancel();
     };
 
-    const status = result.responseCode || 0;
+    const uploadResponse = await uploadRequest;
+    const status = uploadResponse.info().status;
     const uploaded = status >= 200 && status < 300;
 
     useAttachmentStore.getState().remove(filename);
@@ -155,12 +128,12 @@ export async function uploadFile(
       throw new Error(
         `${status}, name: ${fileInfo.filename}, length: ${
           fileInfo.size
-        }, info: ${JSON.stringify(result.error)}`
+        }, info: ${JSON.stringify(uploadResponse.info())}`
       );
     }
-    attachmentInfo = await db.attachments.attachment(filename);
-    if (!attachmentInfo) return false;
-    await checkUpload(filename, requestOptions.chunkSize, attachmentInfo.size);
+    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) {

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

@@ -155,7 +155,7 @@ export async function checkUpload(
   expectedSize: number
 ) {
   const size = await getUploadedFileSize(filename);
-  const totalChunks = Math.ceil(size / (chunkSize + ABYTES));
+  const totalChunks = Math.ceil(size / chunkSize);
   const decryptedLength = size - totalChunks * ABYTES;
   const error =
     size === 0

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

@@ -24,18 +24,10 @@ 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";
-import Heading from "../ui/typography/heading";
-import { AppFontSize } from "../../utils/size";
-import { Button } from "../ui/button";
-import { strings } from "@notesnook/intl";
 
-export const Announcement = () => {
+export const Announcement = ({ color }) => {
   const { colors } = useThemeColors();
-  const [announcements, remove] = useMessageStore((state) => [
-    state.announcements,
-    state.remove
-  ]);
+  const announcements = useMessageStore((state) => state.announcements);
   let announcement = announcements.length > 0 ? announcements[0] : null;
   const selectionMode = useSelectionStore((state) => state.selectionMode);
 
@@ -44,8 +36,9 @@ export const Announcement = () => {
       style={{
         backgroundColor: colors.primary.background,
         width: "100%",
-        paddingHorizontal: DefaultAppStyles.GAP,
-        paddingVertical: DefaultAppStyles.GAP_VERTICAL
+        paddingHorizontal: 12,
+        paddingTop: 12,
+        paddingBottom: 12
       }}
     >
       <View
@@ -61,46 +54,16 @@ export const Announcement = () => {
         <View
           style={{
             width: "100%",
-            marginTop: DefaultAppStyles.GAP_VERTICAL
+            marginTop: 12
           }}
         >
-          <View
-            style={{
-              flexDirection: "row",
-              justifyContent: "space-between",
-              alignItems: "center",
-              paddingHorizontal: DefaultAppStyles.GAP,
-              borderBottomWidth: 1,
-              borderBottomColor: colors.primary.border,
-              paddingBottom: DefaultAppStyles.GAP_VERTICAL_SMALL
-            }}
-          >
-            <Heading color={colors.secondary.heading} size={AppFontSize.xxs}>
-              {strings.announcement()}
-            </Heading>
-
-            <Button
-              type="plain"
-              icon="close"
-              onPress={() => {
-                remove(announcement.id);
-              }}
-              iconSize={20}
-              fontSize={AppFontSize.xs}
-              style={{
-                paddingVertical: 0,
-                paddingHorizontal: 0,
-                zIndex: 10
-              }}
-            />
-          </View>
-
           {announcement?.body
             .filter((item) => allowedOnPlatform(item.platforms))
             .map((item, index) =>
               renderItem({
                 item: item,
                 index: index,
+                color: colors[color],
                 inline: true
               })
             )}

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

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

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

@@ -19,25 +19,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { Linking, View } from "react-native";
+//import SettingsBackupAndRestore from '../../screens/settings/backup-restore';
 import { useThemeColors } from "@notesnook/theme";
-import { eSendEvent } from "../../services/event-manager";
+import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { eCloseAnnouncementDialog } from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
+import { SIZE } 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, BodyItemProps, getStyle } from "./functions";
-import { DefaultAppStyles } from "../../utils/styles";
-import { Action } from "../../stores/use-message-store";
+import { allowedOnPlatform, getStyle } from "./functions";
 
-export const Cta = (props: BodyItemProps) => {
+export const Cta = ({ actions, style = {}, color, inline }) => {
   const { colors } = useThemeColors();
   let buttons =
-    props.item.actions.filter((item) => allowedOnPlatform(item.platforms)) ||
-    [];
+    actions.filter((item) => allowedOnPlatform(item.platforms)) || [];
 
-  const onPress = async (item: Action) => {
-    if (!props.inline) {
+  const onPress = async (item) => {
+    if (!inline) {
       eSendEvent(eCloseAnnouncementDialog);
       await sleep(500);
     }
@@ -45,27 +44,38 @@ export const Cta = (props: BodyItemProps) => {
       Linking.openURL(item.data).catch(() => {
         /* empty */
       });
+    } else if (item.type === "promo") {
+      presentSheet({
+        component: (
+          <PricingPlans
+            marginTop={1}
+            promo={{
+              promoCode: item.data,
+              text: item.title
+            }}
+          />
+        )
+      });
     }
   };
   return (
     <View
       style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
-        ...getStyle(props.item.style),
-        flexDirection: props.inline ? "row" : "column",
-        gap: DefaultAppStyles.GAP_SMALL
+        paddingHorizontal: 12,
+        ...getStyle(style),
+        flexDirection: inline ? "row" : "column"
       }}
     >
       <SheetProvider context="premium_cta" />
 
-      {props.inline ? (
+      {inline ? (
         <>
           {buttons.length > 0 &&
             buttons.slice(0, 1).map((item) => (
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={AppFontSize.sm}
+                fontSize={SIZE.sm}
                 type="transparent"
                 textStyle={{
                   textDecorationLine: "underline"
@@ -73,7 +83,7 @@ export const Cta = (props: BodyItemProps) => {
                 onPress={() => onPress(item)}
                 bold
                 style={{
-                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
+                  height: 30,
                   alignSelf: "flex-start",
                   paddingHorizontal: 0
                 }}
@@ -85,13 +95,15 @@ export const Cta = (props: BodyItemProps) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={AppFontSize.sm}
+                fontSize={SIZE.sm}
                 type="plain"
                 onPress={() => onPress(item)}
+                width={null}
+                height={30}
                 style={{
-                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
                   alignSelf: "flex-start",
-                  paddingHorizontal: 0
+                  paddingHorizontal: 0,
+                  marginLeft: 12
                 }}
                 textStyle={{
                   textDecorationLine: "underline"
@@ -106,15 +118,20 @@ export const Cta = (props: BodyItemProps) => {
               <Button
                 key={item.title}
                 title={item.title}
+                fontSize={SIZE.md}
                 buttonType={{
-                  color: colors.primary.accent,
-                  text: colors.primary.accentForeground,
-                  selected: colors.primary.accent,
+                  color: color ? color : colors.primary.accent,
+                  text: color
+                    ? colors.static.white
+                    : colors.primary.accentForeground,
+                  selected: color ? color : colors.primary.accent,
                   opacity: 1
                 }}
                 onPress={() => onPress(item)}
+                width={250}
                 style={{
-                  width: "100%"
+                  marginBottom: 5,
+                  borderRadius: 100
                 }}
               />
             ))}
@@ -124,14 +141,14 @@ export const Cta = (props: BodyItemProps) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={AppFontSize.xs}
+                fontSize={SIZE.xs}
                 type="plain"
                 onPress={() => onPress(item)}
                 width={null}
                 height={30}
                 style={{
                   minWidth: "50%",
-                  width: "100%"
+                  marginTop: 5
                 }}
                 textStyle={{
                   textDecorationLine: "underline"

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

@@ -18,22 +18,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
-import { BodyItemProps, getStyle } from "./functions";
-import { DefaultAppStyles } from "../../utils/styles";
+import { getStyle } from "./functions";
 
-export const Description = (props: BodyItemProps) => {
+export const Description = ({ text, style = {}, inline }) => {
   return (
     <Paragraph
       style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
-        ...getStyle(props.item.style),
-        textAlign: props.inline ? "left" : props.item.style?.textAlign
+        marginHorizontal: 12,
+        ...getStyle(style),
+        textAlign: inline ? "left" : style?.textAlign
       }}
-      size={AppFontSize.sm}
+      size={inline ? SIZE.sm : SIZE.md}
     >
-      {props.item.text}
+      {text}
     </Paragraph>
   );
 };

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

@@ -19,8 +19,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
 import { View } from "react-native";
-import { allowedPlatforms, BodyItem } from "../../stores/use-message-store";
-import { DefaultAppStyles } from "../../utils/styles";
+import { allowedPlatforms } from "../../stores/use-message-store";
+import { ProFeatures } from "../dialogs/result/pro-features";
 import { Body } from "./body";
 import { Cta } from "./cta";
 import { Description } from "./description";
@@ -29,7 +29,7 @@ import { Photo } from "./photo";
 import { SubHeading } from "./subheading";
 import { Title } from "./title";
 
-export function allowedOnPlatform(platforms: string[]) {
+export function allowedOnPlatform(platforms) {
   if (!platforms) return true;
   return platforms.some((platform) => allowedPlatforms.indexOf(platform) > -1);
 }
@@ -40,15 +40,11 @@ export const margins = {
   2: 20
 };
 
-export const getStyle = (style: BodyItem["style"]) => {
+export const getStyle = (style) => {
   if (!style) return {};
   return {
-    marginTop: style.marginTop
-      ? margins[style.marginTop as keyof typeof margins] || 0
-      : 0,
-    marginBottom: style.marginBottom
-      ? margins[style.marginBottom as keyof typeof margins] || 0
-      : 0,
+    marginTop: margins[style.marginTop] || 0,
+    marginBottom: margins[style.marginBottom] || 0,
     textAlign: style.textAlign || "left"
   };
 };
@@ -57,11 +53,13 @@ const Features = () => {
   return (
     <View
       style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
+        paddingHorizontal: 12,
         alignItems: "center",
         width: "100%"
       }}
-    ></View>
+    >
+      <ProFeatures />
+    </View>
   );
 };
 
@@ -77,25 +75,16 @@ const renderItems = {
   callToActions: Cta
 };
 
-export const renderItem = ({
-  item,
-  index,
-  inline
-}: {
-  item: BodyItem;
-  index: number;
-  inline?: boolean;
-}) => {
-  const Item = renderItems[item.type as keyof typeof renderItems] || Fragment;
+export const renderItem = ({ item, index, color, inline }) => {
+  const Item = renderItems[item.type] || Fragment;
 
   return (
     <Item
       key={item.text || item.src || item.type}
-      item={item}
+      {...item}
       index={index}
+      color={color}
       inline={inline}
     />
   );
 };
-
-export type BodyItemProps = { item: BodyItem; index: number; inline?: boolean };

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

@@ -24,7 +24,7 @@ import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import { Announcement, useMessageStore } from "../../stores/use-message-store";
+import { useMessageStore } from "../../stores/use-message-store";
 import { useThemeColors } from "@notesnook/theme";
 import {
   eCloseAnnouncementDialog,
@@ -33,7 +33,6 @@ import {
 import BaseDialog from "../dialog/base-dialog";
 import { allowedOnPlatform, renderItem } from "./functions";
 import { useCallback } from "react";
-import { DefaultAppStyles } from "../../utils/styles";
 
 /**
  * Test announcement
@@ -97,24 +96,9 @@ import { DefaultAppStyles } from "../../utils/styles";
 export const AnnouncementDialog = () => {
   const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
-  const [info, setInfo] = useState<Announcement | undefined>(undefined);
+  const [info, setInfo] = useState();
   const remove = useMessageStore((state) => state.remove);
 
-  const open = (data: Announcement) => {
-    setInfo(data);
-    setImmediate(() => {
-      setVisible(true);
-    });
-  };
-
-  const close = useCallback(() => {
-    if (visible) {
-      if (info?.id) remove(info?.id);
-      setInfo(undefined);
-      setVisible(false);
-    }
-  }, [info?.id, remove, visible]);
-
   useEffect(() => {
     eSubscribeEvent(eOpenAnnouncementDialog, open);
     eSubscribeEvent(eCloseAnnouncementDialog, close);
@@ -124,6 +108,21 @@ export const AnnouncementDialog = () => {
     };
   }, [close, visible]);
 
+  const open = (data) => {
+    setInfo(data);
+    setImmediate(() => {
+      setVisible(true);
+    });
+  };
+
+  const close = useCallback(() => {
+    if (visible) {
+      remove(info?.id);
+      setInfo(null);
+      setVisible(false);
+    }
+  }, [info?.id, remove, visible]);
+
   return (
     <BaseDialog
       animated={false}
@@ -139,9 +138,9 @@ export const AnnouncementDialog = () => {
           maxHeight: DDS.isTab ? "90%" : "100%",
           borderRadius: DDS.isTab ? 10 : 0,
           overflow: "hidden",
-          paddingVertical: DefaultAppStyles.GAP,
-          borderTopRightRadius: 15,
-          borderTopLeftRadius: 15
+          marginBottom: DDS.isTab ? 20 : 0,
+          borderTopRightRadius: 10,
+          borderTopLeftRadius: 10
         }}
       >
         <FlatList

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

@@ -21,27 +21,26 @@ import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import Paragraph from "../ui/typography/paragraph";
-import { BodyItemProps, getStyle } from "./functions";
-import { DefaultAppStyles } from "../../utils/styles";
+import { getStyle } from "./functions";
 
-export const List = (props: BodyItemProps) => {
+export const List = ({ items, listType, style = {} }) => {
   return (
     <View
       style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
-        paddingLeft: props.item.listType === "ordered" ? 25 : 25,
-        ...getStyle(props.item.style)
+        paddingHorizontal: 12,
+        paddingLeft: listType === "ordered" ? 25 : 25,
+        ...getStyle(style)
       }}
     >
-      {props.item.items?.map((item, index) => (
+      {items.map((item, index) => (
         <View
           key={item.text}
           style={{
-            paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+            paddingVertical: 6,
             flexDirection: "row"
           }}
         >
-          {props.item.listType === "ordered" ? (
+          {listType === "ordered" ? (
             <Paragraph
               style={{
                 marginRight: 5

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

@@ -19,18 +19,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { Image } from "react-native";
-import { BodyItemProps, getStyle } from "./functions";
+import { getStyle } from "./functions";
 
-export const Photo = (props: BodyItemProps) => {
-  return props.item.src ? (
+export const Photo = ({ src, style = {} }) => {
+  return src ? (
     <Image
-      source={{ uri: props.item.src }}
+      source={{ uri: src }}
       resizeMode="cover"
       style={{
         width: "100%",
         height: 200,
         alignSelf: "center",
-        ...getStyle(props.item.style)
+        ...getStyle(style)
       }}
     />
   ) : null;

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

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

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

@@ -0,0 +1,91 @@
+/*
+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 from "react";
+import { View } from "react-native";
+import { useMessageStore } from "../../stores/use-message-store";
+import { SIZE } from "../../utils/size";
+import { Button } from "../ui/button";
+import Heading from "../ui/typography/heading";
+import { getStyle } from "./functions";
+
+export const Title = ({ text, style = {}, inline }) => {
+  const announcements = useMessageStore((state) => state.announcements);
+  let announcement = announcements.length > 0 ? announcements[0] : null;
+  const remove = useMessageStore((state) => state.remove);
+
+  return inline ? (
+    <View
+      style={{
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: inline ? 5 : 0
+      }}
+    >
+      <Heading
+        style={{
+          marginHorizontal: 12,
+          marginTop: 12,
+          ...getStyle(style),
+          textAlign: inline ? "left" : style?.textAlign,
+          flexShrink: 1
+        }}
+        numberOfLines={1}
+        size={inline ? SIZE.md : SIZE.xl}
+      >
+        {inline ? text?.toUpperCase() : text}
+      </Heading>
+
+      <Button
+        type="plain"
+        icon="close"
+        height={null}
+        onPress={() => {
+          remove(announcement.id);
+        }}
+        hitSlop={{
+          left: 15,
+          top: 10,
+          bottom: 10,
+          right: 0
+        }}
+        iconSize={24}
+        fontSize={SIZE.xs}
+        style={{
+          borderRadius: 100,
+          paddingVertical: 0,
+          paddingHorizontal: 0,
+          marginRight: 12,
+          zIndex: 10
+        }}
+      />
+    </View>
+  ) : (
+    <Heading
+      style={{
+        marginHorizontal: 12,
+        ...getStyle(style),
+        marginTop: style?.marginTop || 12
+      }}
+    >
+      {text}
+    </Heading>
+  );
+};

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

@@ -1,60 +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 from "react";
-import { View } from "react-native";
-import { AppFontSize } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
-import Heading from "../ui/typography/heading";
-import { BodyItemProps, getStyle } from "./functions";
-
-export const Title = (props: BodyItemProps) => {
-  return props.inline ? (
-    <View
-      style={{
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        marginBottom: props.inline ? DefaultAppStyles.GAP_VERTICAL_SMALL : 0
-      }}
-    >
-      <Heading
-        style={{
-          paddingHorizontal: DefaultAppStyles.GAP,
-          marginTop: DefaultAppStyles.GAP_VERTICAL,
-          ...getStyle(props.item.style),
-          textAlign: props.inline ? "left" : props.item.style?.textAlign,
-          flexShrink: 1
-        }}
-        size={props.inline ? AppFontSize.md : AppFontSize.xl}
-      >
-        {props.item.text?.toUpperCase()}
-      </Heading>
-    </View>
-  ) : (
-    <Heading
-      style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
-        ...getStyle(props.item.style)
-      }}
-    >
-      {props.item.text}
-    </Heading>
-  );
-};

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

@@ -44,6 +44,7 @@ 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";
@@ -53,9 +54,6 @@ 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");
@@ -84,7 +82,7 @@ const verifyUserPassword = async (password: string) => {
   }
 };
 
-const AppLocked = () => {
+const AppLockedOverlay = () => {
   const initialLaunchBiometricRequest = useRef(true);
   const { colors } = useThemeColors();
   const user = getUser();
@@ -92,7 +90,7 @@ const AppLocked = () => {
   const lockApp = useUserStore((state) => state.lockApp);
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const passwordInputRef = useRef<TextInput>(null);
-  const password = useRef<string>(undefined);
+  const password = useRef<string>();
   const appState = useAppState();
   const lastAppState = useRef<AppStateStatus>(appState);
   const biometricUnlockAwaitingUserInput = useRef(false);
@@ -111,9 +109,6 @@ const AppLocked = () => {
   );
 
   const onUnlockAppRequested = useCallback(async () => {
-    editorController.current?.commands.blur(useTabStore.getState().currentTab);
-    editorController.current?.commands.blurPassInput();
-
     if (
       !biometricsAuthEnabled ||
       !(await BiometricService.isBiometryAvailable())
@@ -187,13 +182,7 @@ const AppLocked = () => {
       (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 (
@@ -239,8 +228,8 @@ const AppLocked = () => {
             deviceMode !== "mobile"
               ? "50%"
               : Platform.OS == "ios"
-                ? "95%"
-                : "100%",
+              ? "95%"
+              : "100%",
           paddingHorizontal: 12,
           marginBottom: 30,
           marginTop: 15,
@@ -294,16 +283,6 @@ const AppLocked = () => {
                 keyboardType={
                   appLockHasPasswordSecurity ? keyboardType : "default"
                 }
-                onLayout={async () => {
-                  if (
-                    !biometricsAuthEnabled ||
-                    !(await BiometricService.isBiometryAvailable())
-                  ) {
-                    setTimeout(() => {
-                      passwordInputRef.current?.focus();
-                    }, 32);
-                  }
-                }}
                 placeholder={
                   appLockHasPasswordSecurity
                     ? keyboardType === "numeric"
@@ -336,6 +315,7 @@ const AppLocked = () => {
                     borderRadius: 150,
                     marginBottom: 10
                   }}
+                  fontSize={SIZE.md}
                 />
               </>
             ) : null}
@@ -356,4 +336,4 @@ const AppLocked = () => {
   ) : null;
 };
 
-export default AppLocked;
+export default AppLockedOverlay;

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

@@ -45,7 +45,7 @@ import {
   eDBItemUpdate,
   eOnLoadNote
 } from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
@@ -58,7 +58,6 @@ 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,
@@ -167,7 +166,6 @@ const Actions = ({
               setAttachments();
               eSendEvent(eDBItemUpdate, attachment.id);
             }
-            return true;
           },
           positiveText: strings.rename()
         });
@@ -228,15 +226,14 @@ const Actions = ({
         style={{
           borderBottomWidth: 1,
           borderBottomColor: colors.primary.border,
-          marginBottom:
-            notes && notes.length > 0 ? 0 : DefaultAppStyles.GAP_VERTICAL
+          marginBottom: notes && notes.length > 0 ? 0 : 12
         }}
       >
         <Heading
           style={{
-            paddingHorizontal: DefaultAppStyles.GAP
+            paddingHorizontal: 12
           }}
-          size={AppFontSize.lg}
+          size={SIZE.lg}
         >
           {filename}
         </Heading>
@@ -244,21 +241,21 @@ const Actions = ({
         <View
           style={{
             flexDirection: "row",
-            marginBottom: DefaultAppStyles.GAP_VERTICAL,
-            paddingHorizontal: DefaultAppStyles.GAP,
-            marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
+            marginBottom: 10,
+            paddingHorizontal: 12,
+            marginTop: 6,
             gap: 10
           }}
         >
-          <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
+          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
             {attachment.mimeType}
           </Paragraph>
-          <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
+          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
             {formatBytes(attachment.size)}
           </Paragraph>
 
           {notes.length ? (
-            <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
+            <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
               {strings.notes(notes.length)}
             </Paragraph>
           ) : null}
@@ -271,7 +268,7 @@ const Actions = ({
                 context: "local"
               });
             }}
-            size={AppFontSize.xs}
+            size={SIZE.xs}
             color={colors.secondary.paragraph}
           >
             {attachment.hash}
@@ -286,16 +283,16 @@ const Actions = ({
           style={{
             borderBottomWidth: 1,
             borderBottomColor: colors.primary.border,
-            marginBottom: DefaultAppStyles.GAP_VERTICAL,
-            paddingVertical: DefaultAppStyles.GAP_VERTICAL
+            marginBottom: 12,
+            paddingVertical: 12
           }}
         >
           <>
             <Heading
               style={{
-                paddingHorizontal: DefaultAppStyles.GAP
+                paddingHorizontal: 12
               }}
-              size={AppFontSize.sm}
+              size={SIZE.sm}
             >
               {strings.listOf()} {strings.dataTypesPlural.note()}:
             </Heading>
@@ -310,14 +307,14 @@ const Actions = ({
                   openNote(item, (item as any).type === "trash");
                 }}
                 style={{
-                  paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+                  paddingVertical: 12,
                   alignItems: "flex-start",
 
-                  paddingHorizontal: DefaultAppStyles.GAP
+                  paddingHorizontal: 12
                 }}
                 key={item.id}
               >
-                <Paragraph size={AppFontSize.xs}>{item.title}</Paragraph>
+                <Paragraph size={SIZE.xs}>{item.title}</Paragraph>
               </Pressable>
             ))}
           </>
@@ -338,7 +335,7 @@ const Actions = ({
           icon={item.icon}
           loading={loading?.name === item.name}
           type="plain"
-          fontSize={AppFontSize.sm}
+          fontSize={SIZE.sm}
           style={{
             borderRadius: 0,
             justifyContent: "flex-start",
@@ -350,7 +347,7 @@ const Actions = ({
 
       <View
         style={{
-          paddingHorizontal: DefaultAppStyles.GAP
+          paddingHorizontal: 12
         }}
       >
         {failed ? (

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

@@ -25,14 +25,13 @@ 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 { defaultBorderRadius, AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import { IconButton } from "../ui/icon-button";
 import { ProgressCircleComponent } from "../ui/svg/lazy";
 import Paragraph from "../ui/typography/paragraph";
 import Actions from "./actions";
 import { strings } from "@notesnook/intl";
 import { Pressable } from "../ui/pressable";
-import { DefaultAppStyles } from "../../utils/styles";
 
 function getFileExtension(filename: string) {
   const ext = /^.+\.([^.]+)$/.exec(filename);
@@ -77,8 +76,8 @@ export const AttachmentItem = ({
         flexDirection: "row",
         marginVertical: 5,
         justifyContent: "space-between",
-        padding: DefaultAppStyles.GAP,
-        paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+        padding: 12,
+        paddingVertical: 6,
         minHeight: 45
       }}
     >
@@ -102,7 +101,7 @@ export const AttachmentItem = ({
                 paddingHorizontal: 2,
                 width: 30,
                 height: 30,
-                borderRadius: defaultBorderRadius
+                borderRadius: 5
               }}
             >
               <Paragraph
@@ -125,7 +124,7 @@ export const AttachmentItem = ({
               }}
             >
               <Paragraph
-                size={AppFontSize.sm}
+                size={SIZE.sm}
                 style={{
                   flexWrap: "wrap"
                 }}
@@ -137,10 +136,7 @@ export const AttachmentItem = ({
               </Paragraph>
 
               {!hideWhenNotDownloading ? (
-                <Paragraph
-                  color={colors.secondary.paragraph}
-                  size={AppFontSize.xxs}
-                >
+                <Paragraph color={colors.secondary.paragraph} size={SIZE.xxs}>
                   {strings.fileSize()}: {formatBytes(attachment.size)}
                 </Paragraph>
               ) : null}
@@ -163,7 +159,7 @@ export const AttachmentItem = ({
               }}
             >
               <ProgressCircleComponent
-                size={AppFontSize.xxl}
+                size={SIZE.xxl}
                 progress={
                   currentProgress?.value ? currentProgress?.value / 100 : 0
                 }

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

@@ -17,7 +17,6 @@ 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 { LegendList } from "@legendapp/list";
 import {
   Attachment,
   FilteredSelector,
@@ -29,17 +28,17 @@ import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useRef, useState } from "react";
 import { ActivityIndicator, View } from "react-native";
-import { ScrollView } from "react-native-actions-sheet";
+import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
+import { ScrollView } from "react-native-gesture-handler";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import create from "zustand";
+import create, { State } from "zustand";
 import { db } from "../../common/database";
 import filesystem from "../../common/filesystem";
 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 { AppFontSize } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
+import { SIZE } from "../../utils/size";
 import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
 import { Header } from "../header";
@@ -65,7 +64,7 @@ type RecheckerProgress = {
   filter: string;
 };
 
-interface RecheckerState {
+interface RecheckerState extends State {
   progress: {
     [key: string]: RecheckerProgress;
   };
@@ -135,9 +134,9 @@ export const AttachmentDialog = ({
   const { colors } = useThemeColors();
   const [attachments, setAttachments] =
     useState<VirtualizedGrouping<Attachment>>();
-  const attachmentSearchValue = useRef<string>(undefined);
+  const attachmentSearchValue = useRef<string>();
   const [loading, setLoading] = useState(true);
-  const searchTimer = useRef<NodeJS.Timeout>(undefined);
+  const searchTimer = useRef<NodeJS.Timeout>();
   const [currentFilter, setCurrentFilter] = useState("all");
   const rechecker = useRechecker((state) =>
     note ? state.progress[note.id] || {} : state.progress.all
@@ -199,7 +198,7 @@ export const AttachmentDialog = ({
     }, 300);
   };
 
-  const renderItem = ({ index }: { item: boolean | number; index: number }) => (
+  const renderItem = ({ index }: { item: boolean; index: number }) => (
     <AttachmentItem
       setAttachments={async () => {
         setAttachments(await filterAttachments(currentFilter));
@@ -326,6 +325,30 @@ export const AttachmentDialog = ({
           title={strings.manageAttachments()}
           renderedInRoute="SettingsGroup"
           canGoBack
+          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
@@ -333,7 +356,7 @@ export const AttachmentDialog = ({
             flexDirection: "row",
             justifyContent: "space-between",
             alignItems: "center",
-            paddingHorizontal: DefaultAppStyles.GAP
+            paddingHorizontal: 12
           }}
         >
           <Heading>{strings.dataTypesPluralCamelCase.attachment()}</Heading>
@@ -346,15 +369,21 @@ export const AttachmentDialog = ({
             <IconButton
               name="check-all"
               style={{
+                height: 40,
+                width: 40,
                 marginRight: 10
               }}
               color={colors.primary.paragraph}
-              size={AppFontSize.lg}
+              size={SIZE.lg}
               onPress={onCheck}
             />
 
             <IconButton
               name="download"
+              style={{
+                height: 40,
+                width: 40
+              }}
               color={colors.primary.paragraph}
               onPress={() => {
                 if (!attachments) return;
@@ -369,7 +398,7 @@ export const AttachmentDialog = ({
                   negativeText: strings.cancel()
                 });
               }}
-              size={AppFontSize.lg}
+              size={SIZE.lg}
             />
           </View>
         </View>
@@ -379,7 +408,7 @@ export const AttachmentDialog = ({
         style={{
           width: "100%",
           alignSelf: "center",
-          paddingHorizontal: DefaultAppStyles.GAP,
+          paddingHorizontal: 12,
           height: "100%"
         }}
       >
@@ -399,7 +428,7 @@ export const AttachmentDialog = ({
               alignItems: "center",
               width: "100%",
               borderRadius: 10,
-              padding: DefaultAppStyles.GAP_SMALL,
+              padding: 10,
               borderWidth: 1,
               borderColor: colors.primary.border,
               gap: 12,
@@ -444,7 +473,7 @@ export const AttachmentDialog = ({
             <IconButton
               type={rechecker.isWorking ? "errorShade" : "plain"}
               name={rechecker.isWorking ? "close" : "check"}
-              size={AppFontSize.lg}
+              size={SIZE.lg}
               color={
                 rechecker.isWorking ? colors.error.icon : colors.primary.accent
               }
@@ -465,7 +494,7 @@ export const AttachmentDialog = ({
               backgroundColor: colors.primary.background,
               flexWrap: "wrap",
               flexDirection: "row",
-              paddingVertical: DefaultAppStyles.GAP_VERTICAL
+              paddingVertical: 12
             }}
             contentContainerStyle={{
               alignItems: "center"
@@ -482,10 +511,10 @@ export const AttachmentDialog = ({
                   }
                   key={item.title}
                   title={item.title}
-                  fontSize={AppFontSize.sm}
+                  fontSize={SIZE.sm}
                   style={{
                     borderRadius: 100,
-                    paddingHorizontal: DefaultAppStyles.GAP,
+                    paddingHorizontal: 12,
                     height: 40,
                     minWidth: 80
                   }}
@@ -509,8 +538,7 @@ export const AttachmentDialog = ({
           </ScrollView>
         </View>
 
-        <LegendList
-          renderScrollComponent={(props) => <ScrollView {...props} />}
+        <FlashList
           keyboardDismissMode="none"
           keyboardShouldPersistTaps="always"
           ListEmptyComponent={
@@ -544,8 +572,7 @@ export const AttachmentDialog = ({
             />
           }
           estimatedItemSize={50}
-          data={loading ? [] : attachments?.placeholders || []}
-          extraData={attachments}
+          data={loading ? [] : attachments?.placeholders}
           renderItem={renderItem}
         />
       </View>

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

@@ -0,0 +1,182 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { useThemeColors } from "@notesnook/theme";
+import React, { useEffect, useRef, useState } from "react";
+import { Platform, View } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
+import {
+  eSubscribeEvent,
+  eUnSubscribeEvent
+} from "../../services/event-manager";
+import { useUserStore } from "../../stores/use-user-store";
+import { eCloseLoginDialog, eOpenLoginDialog } from "../../utils/events";
+import { sleep } from "../../utils/time";
+import BaseDialog from "../dialog/base-dialog";
+import { Toast } from "../toast";
+import { Button } from "../ui/button";
+import { IconButton } from "../ui/icon-button";
+import { hideAuth, initialAuthMode } from "./common";
+import { Login } from "./login";
+import { Signup } from "./signup";
+import { strings } from "@notesnook/intl";
+
+export const AuthMode = {
+  login: 0,
+  signup: 1,
+  welcomeSignup: 2,
+  trialSignup: 3
+};
+
+const AuthModal = () => {
+  const { colors } = useThemeColors();
+  const [visible, setVisible] = useState(false);
+  const [currentAuthMode, setCurrentAuthMode] = useState(AuthMode.login);
+  const actionSheetRef = useRef();
+  const insets = useGlobalSafeAreaInsets();
+
+  useEffect(() => {
+    eSubscribeEvent(eOpenLoginDialog, open);
+    eSubscribeEvent(eCloseLoginDialog, close);
+    return () => {
+      eUnSubscribeEvent(eOpenLoginDialog, open);
+      eUnSubscribeEvent(eCloseLoginDialog, close);
+    };
+  }, []);
+
+  async function open(mode) {
+    setCurrentAuthMode(mode ? mode : AuthMode.login);
+    initialAuthMode.current = mode ? mode : AuthMode.login;
+    setVisible(true);
+    await sleep(10);
+    actionSheetRef.current?.show();
+  }
+
+  const close = () => {
+    useUserStore.setState({
+      disableAppLockRequests: false
+    });
+    actionSheetRef.current?.hide();
+    setCurrentAuthMode(AuthMode.login);
+    setVisible(false);
+  };
+
+  return !visible ? null : (
+    <BaseDialog
+      overlayOpacity={0}
+      statusBarTranslucent={false}
+      onShow={() => {
+        useUserStore.setState({
+          disableAppLockRequests: true
+        });
+      }}
+      onRequestClose={currentAuthMode !== AuthMode.welcomeSignup && close}
+      visible={true}
+      onClose={close}
+      useSafeArea={false}
+      bounce={false}
+      background={colors.primary.background}
+      transparent={false}
+      animated={false}
+      centered={false}
+      enableSheetKeyboardHandler
+    >
+      <KeyboardAwareScrollView
+        style={{
+          width: "100%"
+        }}
+        enableAutomaticScroll={false}
+        keyboardShouldPersistTaps="handled"
+      >
+        {currentAuthMode !== AuthMode.login ? (
+          <Signup
+            changeMode={(mode) => setCurrentAuthMode(mode)}
+            trial={AuthMode.trialSignup === currentAuthMode}
+            welcome={initialAuthMode.current === AuthMode.welcomeSignup}
+          />
+        ) : (
+          <Login
+            welcome={initialAuthMode.current === AuthMode.welcomeSignup}
+            changeMode={(mode) => setCurrentAuthMode(mode)}
+          />
+        )}
+      </KeyboardAwareScrollView>
+
+      <View
+        style={{
+          position: "absolute",
+          paddingTop: Platform.OS === "android" ? 0 : insets.top,
+          top: 0,
+          zIndex: 999,
+          backgroundColor: colors.secondary.background,
+          width: "100%"
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            paddingHorizontal: 12,
+            width: "100%",
+            height: 50,
+            justifyContent:
+              initialAuthMode.current !== AuthMode.welcomeSignup
+                ? "space-between"
+                : "flex-end"
+          }}
+        >
+          {initialAuthMode.current === AuthMode.welcomeSignup ? null : (
+            <IconButton
+              name="arrow-left"
+              onPress={() => {
+                hideAuth();
+              }}
+              color={colors.primary.paragraph}
+            />
+          )}
+
+          {initialAuthMode.current !== AuthMode.welcomeSignup ? null : (
+            <Button
+              title={strings.skip()}
+              onPress={() => {
+                hideAuth();
+              }}
+              iconSize={16}
+              type="plain"
+              iconPosition="right"
+              icon="chevron-right"
+              height={25}
+              iconStyle={{
+                marginTop: 2
+              }}
+              style={{
+                paddingHorizontal: 6
+              }}
+            />
+          )}
+        </View>
+      </View>
+
+      <Toast context="local" />
+    </BaseDialog>
+  );
+};
+
+export default AuthModal;

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

@@ -0,0 +1,21 @@
+/*
+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/>.
+*/
+
+export const SVG = (color) =>
+  `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="1920" height="1080" preserveAspectRatio="none" viewBox="0 0 1920 1080"><g fill="none"><path d="M684.78-215.3C516.78-49.87 619.54 659.12 349.29 666.13 79.03 673.14-116.04 204.76-321.7 180.13" stroke="${color}" stroke-width="2"></path><path d="M1337.71-20.29C1105.2 122.03 1140.53 887.64 809.58 933.71 478.63 979.78 545.52 798.71 281.45 798.71 17.39 798.71-110.41 932.65-246.68 933.71" stroke="${color}" stroke-width="2"></path><path d="M1631.89-52.3C1379.35-21.93 1283.05 511.66 808.42 545.28 333.79 578.9 209.15 894.14-15.05 901.68" stroke="${color}" stroke-width="2"></path><path d="M1523.21-71.7C1244.4-46.38 1056.2 532.95 581.02 533.49 105.84 534.03-109.4 182.98-361.17 177.09" stroke="${color}" stroke-width="2"></path><path d="M1333.35-39.1C1041.86 57 974.42 893.52 550.36 906.48 126.3 919.44-23.8 619.56-232.63 614.88" stroke="${color}" stroke-width="2"></path></g><defs><mask id="SvgjsMask1032"><rect width="1920" height="1080" fill="#ffffff"></rect></mask></defs></svg>`;

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

@@ -17,27 +17,31 @@ 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 React, { useRef, useState } from "react";
 import { View } from "react-native";
 import { db } from "../../common/database";
-import BackupService from "../../services/backup";
-import { eSendEvent, ToastManager } from "../../services/event-manager";
-import Navigation from "../../services/navigation";
+import {
+  eSendEvent,
+  presentSheet,
+  ToastManager
+} from "../../services/event-manager";
 import { useUserStore } from "../../stores/use-user-store";
-import { eOpenRecoveryKeyDialog } from "../../utils/events";
-import { DefaultAppStyles } from "../../utils/styles";
-import { Dialog } from "../dialog";
+import { eCloseSheet, eOpenRecoveryKeyDialog } from "../../utils/events";
+import DialogHeader from "../dialog/dialog-header";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
 import { Notice } from "../ui/notice";
-import { TextInput } from "react-native-gesture-handler";
+import Seperator from "../ui/seperator";
+import { Dialog } from "../dialog";
+import BackupService from "../../services/backup";
+import { sleep } from "../../utils/time";
+import { strings } from "@notesnook/intl";
 
 export const ChangePassword = () => {
-  const passwordInputRef = useRef<TextInput>(null);
-  const password = useRef<string>(undefined);
-  const oldPasswordInputRef = useRef<TextInput>(null);
-  const oldPassword = useRef<string>(undefined);
+  const passwordInputRef = useRef();
+  const password = useRef();
+  const oldPasswordInputRef = useRef();
+  const oldPassword = useRef();
 
   const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -80,13 +84,14 @@ export const ChangePassword = () => {
         context: "global"
       });
       setLoading(false);
-      Navigation.goBack();
+      eSendEvent(eCloseSheet);
+      await sleep(300);
       eSendEvent(eOpenRecoveryKeyDialog);
     } catch (e) {
       setLoading(false);
       ToastManager.show({
         heading: strings.passwordChangeFailed(),
-        message: (e as Error).message,
+        message: e.message,
         type: "error",
         context: "local"
       });
@@ -98,10 +103,13 @@ export const ChangePassword = () => {
     <View
       style={{
         width: "100%",
-        padding: DefaultAppStyles.GAP
+        padding: 12
       }}
     >
       <Dialog context="change-password-dialog" />
+      <DialogHeader title={strings.changePassword()} />
+      <Seperator />
+
       <Input
         fwdRef={oldPasswordInputRef}
         onChangeText={(value) => {
@@ -140,7 +148,7 @@ export const ChangePassword = () => {
 
       <Button
         style={{
-          marginTop: DefaultAppStyles.GAP_VERTICAL,
+          marginTop: 10,
           width: "100%"
         }}
         loading={loading}
@@ -151,3 +159,9 @@ export const ChangePassword = () => {
     </View>
   );
 };
+
+ChangePassword.present = () => {
+  presentSheet({
+    component: <ChangePassword />
+  });
+};

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

@@ -20,27 +20,23 @@ 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";
-import { AuthParams } from "../../stores/use-navigation-store";
-export const AuthMode = {
-  login: 0,
-  signup: 1,
-  welcomeSignup: 2,
-  welcomeLogin: 3,
-  trialSignup: 4
-};
 
-export const initialAuthMode = createRef<number>();
-initialAuthMode.current = AuthMode.login;
-export function hideAuth(context?: AuthParams["context"]) {
+export const initialAuthMode = createRef(0);
+export function hideAuth() {
   eSendEvent(eCloseLoginDialog);
-  if (
-    initialAuthMode.current === AuthMode.welcomeSignup ||
-    initialAuthMode.current === AuthMode.welcomeLogin ||
-    context === "intro"
-  ) {
-    Navigation.replace("FluidPanelsView", {});
-  } else {
-    Navigation.goBack();
-  }
+
+  // if (initialAuthMode.current === 2) {
+  //   Navigation.replace(
+  //     {
+  //       name: 'Notes'
+  //     },
+  //     {
+  //       menu: true
+  //     }
+  //   );
+  // } else {
+  //   Navigation.goBack();
+  // }
+
+  // tabBarRef.current?.unlock();
 }

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

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useRef, useState } from "react";
-import { TextInput, View } from "react-native";
+import { View } from "react-native";
 import ActionSheet from "react-native-actions-sheet";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
@@ -33,12 +33,11 @@ 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");
-  const email = useRef<string>(undefined);
-  const emailInputRef = useRef<TextInput>(null);
+  const email = useRef();
+  const emailInputRef = useRef();
   const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
   const [sent, setSent] = useState(false);
@@ -57,7 +56,7 @@ export const ForgotPassword = () => {
       let lastRecoveryEmailTime = SettingsService.get().lastRecoveryEmailTime;
       if (
         lastRecoveryEmailTime &&
-        Date.now() - lastRecoveryEmailTime < 60000 * 3
+        Date.now() - JSON.parse(lastRecoveryEmailTime) < 60000 * 3
       ) {
         throw new Error(strings.pleaseWaitBeforeSendEmail());
       }
@@ -78,7 +77,7 @@ export const ForgotPassword = () => {
       setLoading(false);
       ToastManager.show({
         heading: strings.recoveryEmailFailed(),
-        message: (e as Error).message,
+        message: e.message,
         type: "error",
         context: "local"
       });
@@ -93,6 +92,7 @@ export const ForgotPassword = () => {
           setSent(false);
           setLoading(false);
         }}
+        keyboardShouldPersistTaps="always"
         onOpen={() => {
           emailInputRef.current?.setNativeProps({
             text: email.current
@@ -107,7 +107,7 @@ export const ForgotPassword = () => {
         {sent ? (
           <View
             style={{
-              padding: DefaultAppStyles.GAP,
+              padding: 12,
               justifyContent: "center",
               alignItems: "center",
               paddingBottom: 50
@@ -138,7 +138,7 @@ export const ForgotPassword = () => {
               backgroundColor: colors.primary.background,
               zIndex: 10,
               width: "100%",
-              padding: DefaultAppStyles.GAP
+              padding: 12
             }}
           >
             <DialogHeader title={strings.accountRecovery()} />
@@ -164,7 +164,7 @@ export const ForgotPassword = () => {
 
             <Button
               style={{
-                marginTop: DefaultAppStyles.GAP_VERTICAL,
+                marginTop: 10,
                 width: "100%"
               }}
               loading={loading}

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

@@ -1,79 +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 { useThemeColors } from "@notesnook/theme";
-import { useRoute } from "@react-navigation/native";
-import React from "react";
-import { View } from "react-native";
-import { Button } from "../ui/button";
-import { IconButton } from "../ui/icon-button";
-import { hideAuth } from "./common";
-import { AuthParams } from "../../stores/use-navigation-store";
-export const AuthHeader = (props: { welcome?: boolean }) => {
-  const { colors } = useThemeColors();
-  const route = useRoute();
-
-  return (
-    <View
-      style={{
-        width: "100%"
-      }}
-    >
-      <View
-        style={{
-          flexDirection: "row",
-          alignItems: "center",
-          paddingHorizontal: 12,
-          width: "100%",
-          height: 50,
-          justifyContent: !props.welcome ? "space-between" : "flex-end"
-        }}
-      >
-        {props.welcome ? null : (
-          <IconButton
-            name="arrow-left"
-            onPress={() => {
-              hideAuth((route.params as AuthParams)?.context);
-            }}
-            color={colors.primary.paragraph}
-          />
-        )}
-
-        {!props.welcome ? null : (
-          <Button
-            title="Skip"
-            onPress={() => {
-              hideAuth();
-            }}
-            iconSize={16}
-            type="plain"
-            iconPosition="right"
-            icon="chevron-right"
-            height={25}
-            iconStyle={{
-              marginTop: 2
-            }}
-            style={{
-              paddingHorizontal: 6
-            }}
-          />
-        )}
-      </View>
-    </View>
-  );
-};

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

@@ -18,39 +18,49 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useState } from "react";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { View } from "react-native";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
 import { Toast } from "../toast";
-import { AuthMode, initialAuthMode } from "./common";
+import { initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
-import { useThemeColors } from "@notesnook/theme";
-import { NavigationProps } from "../../services/navigation";
 
-const Auth = ({ navigation, route }: NavigationProps<"Auth">) => {
+export const AuthMode = {
+  login: 0,
+  signup: 1,
+  welcomeSignup: 2,
+  trialSignup: 3
+};
+
+const Auth = ({ navigation, route }) => {
   const [currentAuthMode, setCurrentAuthMode] = useState(
     route?.params?.mode || AuthMode.login
   );
-  const { colors } = useThemeColors();
   initialAuthMode.current = route?.params.mode || AuthMode.login;
-  useNavigationFocus(navigation, {});
+  useNavigationFocus(navigation, {
+    onFocus: () => {
+      //tabBarRef?.current.lock();
+      initialAuthMode.current = route?.params.mode || AuthMode.login;
+    }
+  });
 
   return (
-    <SafeAreaView
-      style={{ flex: 1, backgroundColor: colors.primary.background }}
-    >
-      {currentAuthMode !== AuthMode.login &&
-      currentAuthMode !== AuthMode.welcomeLogin ? (
+    <View style={{ flex: 1 }}>
+      {currentAuthMode !== AuthMode.login ? (
         <Signup
           changeMode={(mode) => setCurrentAuthMode(mode)}
+          trial={AuthMode.trialSignup === currentAuthMode}
           welcome={initialAuthMode.current === AuthMode.welcomeSignup}
         />
       ) : (
-        <Login changeMode={(mode) => setCurrentAuthMode(mode)} />
+        <Login
+          welcome={initialAuthMode.current}
+          changeMode={(mode) => setCurrentAuthMode(mode)}
+        />
       )}
 
       <Toast context="local" />
-    </SafeAreaView>
+    </View>
   );
 };
 

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

@@ -0,0 +1,309 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { useThemeColors } from "@notesnook/theme";
+import React, { useEffect, useState } from "react";
+import { TouchableOpacity, View, useWindowDimensions } from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
+import { DDS } from "../../services/device-detection";
+import { eSendEvent } from "../../services/event-manager";
+import Sync from "../../services/sync";
+import { useSettingStore } from "../../stores/use-setting-store";
+import { useUserStore } from "../../stores/use-user-store";
+import { eUserLoggedIn } from "../../utils/events";
+import { SIZE } from "../../utils/size";
+import { sleep } from "../../utils/time";
+import SheetProvider from "../sheet-provider";
+import { Progress } from "../sheets/progress";
+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 { ForgotPassword } from "./forgot-password";
+import { useLogin } from "./use-login";
+import { strings } from "@notesnook/intl";
+
+const LoginSteps = {
+  emailAuth: 1,
+  mfaAuth: 2,
+  passwordAuth: 3
+};
+
+export const Login = ({ changeMode }) => {
+  const { colors } = useThemeColors();
+  const [focused, setFocused] = useState(false);
+  const {
+    step,
+    setStep,
+    password,
+    email,
+    emailInputRef,
+    passwordInputRef,
+    loading,
+    setLoading,
+    setError,
+    login
+  } = useLogin(async () => {
+    hideAuth();
+    eSendEvent(eUserLoggedIn, true);
+    await sleep(500);
+    Progress.present();
+    setTimeout(() => {
+      if (!useUserStore.getState().syncing) {
+        Sync.run("global", false, "full");
+      }
+    }, 5000);
+  });
+  const deviceMode = useSettingStore((state) => state.deviceMode);
+  const { width, height } = useWindowDimensions();
+  useEffect(() => {
+    async () => {
+      setStep(LoginSteps.emailAuth);
+      await sleep(500);
+      emailInputRef.current?.focus();
+      setFocused(true);
+    };
+    return () => {
+      setStep(LoginSteps.emailAuth);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <ForgotPassword />
+      <SheetProvider context="two_factor_verify" />
+      <View
+        style={{
+          borderRadius: DDS.isTab ? 5 : 0,
+          backgroundColor: colors.primary.background,
+          zIndex: 10,
+          width: "100%",
+          alignSelf: "center"
+        }}
+      >
+        <View
+          style={{
+            justifyContent: "flex-end",
+            paddingHorizontal: 20,
+            backgroundColor: colors.secondary.background,
+            borderBottomWidth: 0.8,
+            marginBottom: 12,
+            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%",
+            minHeight: height * 0.4
+          }}
+        >
+          <View
+            style={{
+              flexDirection: "row"
+            }}
+          >
+            <View
+              style={{
+                width: 100,
+                height: 5,
+                backgroundColor: colors.primary.accent,
+                borderRadius: 2,
+                marginRight: 7
+              }}
+            />
+
+            <View
+              style={{
+                width: 20,
+                height: 5,
+                backgroundColor: colors.secondary.background,
+                borderRadius: 2
+              }}
+            />
+          </View>
+          <Heading
+            style={{
+              marginBottom: 25,
+              marginTop: 10
+            }}
+            extraBold
+            size={SIZE.xxl}
+          >
+            {strings.loginToYourAccount()}
+          </Heading>
+        </View>
+
+        <View
+          style={{
+            width: DDS.isTab
+              ? focused
+                ? "50%"
+                : "49.99%"
+              : focused
+              ? "100%"
+              : "99.9%",
+            backgroundColor: colors.primary.background,
+            alignSelf: "center",
+            paddingHorizontal: 20
+          }}
+        >
+          <Input
+            fwdRef={emailInputRef}
+            onChangeText={(value) => {
+              email.current = value;
+            }}
+            testID="input.email"
+            onErrorCheck={(e) => setError(e)}
+            returnKeyLabel="Next"
+            returnKeyType="next"
+            autoComplete="email"
+            validationType="email"
+            autoCorrect={false}
+            autoCapitalize="none"
+            errorMessage={strings.emailInvalid()}
+            placeholder={strings.email()}
+            defaultValue={email.current}
+            editable={step === LoginSteps.emailAuth && !loading}
+            onSubmit={() => {
+              if (step === LoginSteps.emailAuth) {
+                login();
+              } else {
+                passwordInputRef.current?.focus();
+              }
+            }}
+          />
+
+          {step === LoginSteps.passwordAuth && (
+            <>
+              <Input
+                fwdRef={passwordInputRef}
+                onChangeText={(value) => {
+                  password.current = value;
+                }}
+                testID="input.password"
+                returnKeyLabel={strings.done()}
+                returnKeyType="done"
+                secureTextEntry
+                autoComplete="password"
+                autoCapitalize="none"
+                autoCorrect={false}
+                placeholder={strings.password()}
+                marginBottom={0}
+                editable={!loading}
+                defaultValue={password.current}
+                onSubmit={() => login()}
+              />
+              <Button
+                title={strings.forgotPassword()}
+                style={{
+                  alignSelf: "flex-end",
+                  height: 30,
+                  paddingHorizontal: 0
+                }}
+                onPress={() => {
+                  if (loading) return;
+                  SheetManager.show("forgotpassword_sheet", email.current);
+                }}
+                textStyle={{
+                  textDecorationLine: "underline"
+                }}
+                fontSize={SIZE.xs}
+                type="plain"
+              />
+            </>
+          )}
+
+          <View
+            style={{
+              marginTop: 25
+            }}
+          >
+            <Button
+              loading={loading}
+              onPress={() => {
+                if (loading) return;
+                login();
+              }}
+              style={{
+                width: 250,
+                borderRadius: 100
+              }}
+              height={50}
+              fontSize={SIZE.md}
+              type="accent"
+              title={!loading ? strings.continue() : null}
+            />
+
+            {step === LoginSteps.passwordAuth && (
+              <Button
+                title={strings.cancelLogin()}
+                style={{
+                  alignSelf: "center",
+                  height: 30,
+                  marginTop: 10
+                }}
+                onPress={() => {
+                  if (loading) return;
+                  setStep(LoginSteps.emailAuth);
+                  setLoading(false);
+                }}
+                textStyle={{
+                  textDecorationLine: "underline"
+                }}
+                fontSize={SIZE.xs}
+                type="errorShade"
+              />
+            )}
+
+            {!loading ? (
+              <TouchableOpacity
+                onPress={() => {
+                  if (loading) return;
+                  changeMode(1);
+                }}
+                activeOpacity={0.8}
+                style={{
+                  alignSelf: "center",
+                  marginTop: 12,
+                  paddingVertical: 12
+                }}
+              >
+                <Paragraph
+                  size={SIZE.xs + 1}
+                  color={colors.secondary.paragraph}
+                >
+                  {strings.dontHaveAccount()}{" "}
+                  <Paragraph
+                    size={SIZE.xs + 1}
+                    style={{ color: colors.primary.accent }}
+                  >
+                    {strings.signUp()}
+                  </Paragraph>
+                </Paragraph>
+              </TouchableOpacity>
+            ) : null}
+          </View>
+        </View>
+      </View>
+    </>
+  );
+};

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

@@ -1,337 +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 { strings } from "@notesnook/intl";
-import { useThemeColors } from "@notesnook/theme";
-import { RouteProp, useRoute } from "@react-navigation/native";
-import React, { useEffect, useState } from "react";
-import { TouchableOpacity, View, useWindowDimensions } from "react-native";
-import { SheetManager } from "react-native-actions-sheet";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-import { DDS } from "../../services/device-detection";
-import { eSendEvent } from "../../services/event-manager";
-import Navigation from "../../services/navigation";
-import PremiumService from "../../services/premium";
-import SettingsService from "../../services/settings";
-import Sync from "../../services/sync";
-import { RouteParams } from "../../stores/use-navigation-store";
-import { useUserStore } from "../../stores/use-user-store";
-import { eUserLoggedIn } from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
-import { sleep } from "../../utils/time";
-import { Dialog } from "../dialog";
-import { Progress } from "../sheets/progress";
-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 { ForgotPassword } from "./forgot-password";
-import { AuthHeader } from "./header";
-import { useLogin } from "./use-login";
-
-const LoginSteps = {
-  emailAuth: 1,
-  mfaAuth: 2,
-  passwordAuth: 3
-};
-
-export const Login = ({
-  changeMode
-}: {
-  changeMode: (mode: number) => void;
-}) => {
-  const { colors } = useThemeColors();
-  const [focused, setFocused] = useState(false);
-  const route = useRoute<RouteProp<RouteParams, "Auth">>();
-  const {
-    step,
-    setStep,
-    password,
-    email,
-    emailInputRef,
-    passwordInputRef,
-    loading,
-    setLoading,
-    setError,
-    login
-  } = useLogin(async () => {
-    eSendEvent(eUserLoggedIn, true);
-    await sleep(500);
-    hideAuth();
-    setTimeout(() => {
-      if (!useUserStore.getState().syncing) {
-        Sync.run("global", false, "full");
-      }
-    }, 5000);
-
-    if (!PremiumService.get() && !SettingsService.getProperty("serverUrls")) {
-      Navigation.navigate("PayWall", {
-        context: "signup",
-        state: route.params?.state,
-        canGoBack: false
-      });
-    } else {
-      Progress.present();
-    }
-  });
-  const { width, height } = useWindowDimensions();
-  const isTablet = width > 600;
-  useEffect(() => {
-    async () => {
-      setStep(LoginSteps.emailAuth);
-      await sleep(500);
-      emailInputRef.current?.focus();
-      setFocused(true);
-    };
-    return () => {
-      setStep(LoginSteps.emailAuth);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <>
-      <AuthHeader />
-      <ForgotPassword />
-      <Dialog context="two_factor_verify" />
-      <KeyboardAwareScrollView
-        style={{
-          width: "100%"
-        }}
-        contentContainerStyle={{
-          minHeight: "90%"
-        }}
-        nestedScrollEnabled
-        enableAutomaticScroll={true}
-        keyboardShouldPersistTaps="handled"
-      >
-        <View
-          style={{
-            borderRadius: DDS.isTab ? 5 : 0,
-            backgroundColor: colors.primary.background,
-            zIndex: 10,
-            width: "100%",
-            height: "100%",
-            alignSelf: "center"
-          }}
-        >
-          <View
-            style={{
-              justifyContent: "flex-end",
-              paddingHorizontal: DefaultAppStyles.GAP,
-              borderBottomWidth: 0.8,
-              marginBottom: DefaultAppStyles.GAP_VERTICAL,
-              borderBottomColor: colors.primary.border,
-              alignSelf: isTablet ? "center" : undefined,
-              borderWidth: isTablet ? 1 : undefined,
-              borderColor: isTablet ? colors.primary.border : undefined,
-              borderRadius: isTablet ? 20 : undefined,
-              marginTop: isTablet ? 50 : undefined,
-              width: !isTablet ? undefined : "50%",
-              minHeight: height * 0.4
-            }}
-          >
-            <View
-              style={{
-                flexDirection: "row"
-              }}
-            >
-              <View
-                style={{
-                  width: 100,
-                  height: 5,
-                  backgroundColor: colors.primary.accent,
-                  borderRadius: 2,
-                  marginRight: 7
-                }}
-              />
-
-              <View
-                style={{
-                  width: 20,
-                  height: 5,
-                  backgroundColor: colors.secondary.background,
-                  borderRadius: 2
-                }}
-              />
-            </View>
-            <Heading
-              style={{
-                marginBottom: 25,
-                marginTop: DefaultAppStyles.GAP_VERTICAL
-              }}
-              extraBold
-              size={AppFontSize.xxl}
-            >
-              {strings.loginToYourAccount()}
-            </Heading>
-          </View>
-
-          <View
-            style={{
-              width: DDS.isTab
-                ? focused
-                  ? "50%"
-                  : "49.99%"
-                : focused
-                  ? "100%"
-                  : "99.9%",
-              backgroundColor: colors.primary.background,
-              alignSelf: "center",
-              paddingHorizontal: DDS.isTab ? 0 : DefaultAppStyles.GAP,
-              gap: DefaultAppStyles.GAP_VERTICAL
-            }}
-          >
-            <Input
-              fwdRef={emailInputRef}
-              onChangeText={(value) => {
-                email.current = value;
-              }}
-              testID="input.email"
-              onErrorCheck={(e) => setError(e)}
-              returnKeyLabel="Next"
-              returnKeyType="next"
-              autoComplete="email"
-              validationType="email"
-              marginBottom={0}
-              autoCorrect={false}
-              autoCapitalize="none"
-              errorMessage={strings.emailInvalid()}
-              placeholder={strings.email()}
-              defaultValue={email.current}
-              editable={step === LoginSteps.emailAuth && !loading}
-              onSubmit={() => {
-                if (step === LoginSteps.emailAuth) {
-                  login();
-                } else {
-                  passwordInputRef.current?.focus();
-                }
-              }}
-            />
-
-            {step === LoginSteps.passwordAuth && (
-              <>
-                <Input
-                  fwdRef={passwordInputRef}
-                  onChangeText={(value) => {
-                    password.current = value;
-                  }}
-                  testID="input.password"
-                  returnKeyLabel={strings.done()}
-                  returnKeyType="done"
-                  secureTextEntry
-                  autoComplete="password"
-                  autoCapitalize="none"
-                  autoCorrect={false}
-                  placeholder={strings.password()}
-                  marginBottom={0}
-                  editable={!loading}
-                  defaultValue={password.current}
-                  onSubmit={() => {
-                    login();
-                  }}
-                />
-                <Button
-                  title={strings.forgotPassword()}
-                  style={{
-                    alignSelf: "flex-end",
-                    paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
-                    paddingHorizontal: 0
-                  }}
-                  onPress={() => {
-                    if (loading || !email.current) return;
-                    SheetManager.show("forgotpassword_sheet");
-                  }}
-                  textStyle={{
-                    textDecorationLine: "underline"
-                  }}
-                  fontSize={AppFontSize.xs}
-                  type="plain"
-                />
-              </>
-            )}
-
-            <View>
-              <Button
-                loading={loading}
-                onPress={() => {
-                  if (loading) return;
-                  login();
-                }}
-                style={{
-                  width: "100%"
-                }}
-                type="accent"
-                title={!loading ? strings.continue() : null}
-                fontSize={AppFontSize.sm}
-              />
-
-              {step === LoginSteps.passwordAuth && (
-                <Button
-                  title={strings.cancelLogin()}
-                  style={{
-                    alignSelf: "center",
-                    marginTop: DefaultAppStyles.GAP_VERTICAL,
-                    width: "100%"
-                  }}
-                  onPress={() => {
-                    if (loading) return;
-                    setStep(LoginSteps.emailAuth);
-                    setLoading(false);
-                  }}
-                  type="secondaryAccented"
-                />
-              )}
-
-              {!loading ? (
-                <TouchableOpacity
-                  onPress={() => {
-                    if (loading) return;
-                    changeMode(1);
-                  }}
-                  activeOpacity={0.8}
-                  style={{
-                    alignSelf: "center",
-                    marginTop: DefaultAppStyles.GAP_VERTICAL,
-                    paddingVertical: DefaultAppStyles.GAP_VERTICAL
-                  }}
-                >
-                  <Paragraph
-                    size={AppFontSize.xs}
-                    color={colors.secondary.paragraph}
-                  >
-                    {strings.dontHaveAccount()}{" "}
-                    <Paragraph
-                      size={AppFontSize.xs}
-                      style={{ color: colors.primary.accent }}
-                    >
-                      {strings.signUp()}
-                    </Paragraph>
-                  </Paragraph>
-                </TouchableOpacity>
-              ) : null}
-            </View>
-          </View>
-        </View>
-      </KeyboardAwareScrollView>
-    </>
-  );
-};

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 { AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import BaseDialog from "../dialog/base-dialog";
@@ -48,8 +48,18 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
 import { strings } from "@notesnook/intl";
-import { getObfuscatedEmail } from "../../utils/functions";
-import { DefaultAppStyles } from "../../utils/styles";
+
+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;
+  });
+}
 
 export const SessionExpired = () => {
   const { colors } = useThemeColors();
@@ -83,13 +93,20 @@ export const SessionExpired = () => {
       });
     } catch (e) {
       ToastManager.show({
-        heading: (e as Error).message,
+        heading: e.message,
         type: "error",
         context: "local"
       });
     }
   };
 
+  useEffect(() => {
+    const sub = eSubscribeEvent(eLoginSessionExpired, open);
+    return () => {
+      sub.unsubscribe?.();
+    };
+  }, [visible, open]);
+
   const open = React.useCallback(async () => {
     try {
       let res = await db.tokenManager.getToken();
@@ -126,13 +143,6 @@ export const SessionExpired = () => {
     }
   }, [email]);
 
-  useEffect(() => {
-    const sub = eSubscribeEvent(eLoginSessionExpired, open);
-    return () => {
-      sub?.unsubscribe?.();
-    };
-  }, [visible, open]);
-
   return (
     visible && (
       <BaseDialog
@@ -158,7 +168,7 @@ export const SessionExpired = () => {
         <View
           style={{
             width: focused ? "100%" : "99.9%",
-            padding: DefaultAppStyles.GAP,
+            padding: 12,
             justifyContent: "center",
             flex: 1,
             backgroundColor: colors.primary.background
@@ -183,7 +193,7 @@ export const SessionExpired = () => {
               color={colors.error.icon}
               size={50}
             />
-            <Heading size={AppFontSize.xxxl} color={colors.primary.heading}>
+            <Heading size={SIZE.xxxl} color={colors.primary.heading}>
               {strings.sessionExpired()}
             </Heading>
             <Paragraph
@@ -191,9 +201,7 @@ export const SessionExpired = () => {
                 textAlign: "center"
               }}
             >
-              {strings.sessionExpiredDesc(
-                getObfuscatedEmail(email.current as string)
-              )}
+              {strings.sessionExpiredDesc(getObfuscatedEmail(email.current))}
             </Paragraph>
           </View>
 
@@ -210,15 +218,13 @@ export const SessionExpired = () => {
               autoCapitalize="none"
               autoCorrect={false}
               placeholder={strings.password()}
-              onSubmit={() => {
-                login();
-              }}
+              onSubmit={() => login()}
             />
           ) : null}
 
           <Button
             style={{
-              marginTop: DefaultAppStyles.GAP_VERTICAL,
+              marginTop: 10,
               width: 250,
               borderRadius: 100
             }}
@@ -230,7 +236,7 @@ export const SessionExpired = () => {
 
           <Button
             style={{
-              marginTop: DefaultAppStyles.GAP_VERTICAL,
+              marginTop: 10,
               width: "100%"
             }}
             onPress={() => {

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

@@ -0,0 +1,307 @@
+/*
+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, { useRef, useState } from "react";
+import { TouchableOpacity, View, useWindowDimensions } from "react-native";
+import { db } from "../../common/database";
+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 { useUserStore } from "../../stores/use-user-store";
+import { openLinkInBrowser } from "../../utils/functions";
+import { SIZE } 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";
+
+export const Signup = ({ changeMode, trial }) => {
+  const { colors } = useThemeColors();
+  const email = useRef();
+  const emailInputRef = useRef();
+  const passwordInputRef = useRef();
+  const password = useRef();
+  const confirmPasswordInputRef = useRef();
+  const confirmPassword = useRef();
+  const [error, setError] = useState(false);
+  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 validateInfo = () => {
+    if (!password.current || !email.current || !confirmPassword.current) {
+      ToastManager.show({
+        heading: strings.allFieldsRequired(),
+        message: strings.allFieldsRequiredDesc(),
+        type: "error",
+        context: "local"
+      });
+
+      return false;
+    }
+
+    return true;
+  };
+
+  const signup = async () => {
+    if (!validateInfo() || error) return;
+    if (loading) return;
+    setLoading(true);
+    try {
+      await db.user.signup(email.current.toLowerCase(), password.current);
+      let user = await db.user.getUser();
+      setUser(user);
+      setLastSynced(await db.lastSynced());
+      clearMessage();
+      setEmailVerifyMessage();
+      hideAuth();
+      SettingsService.setProperty("encryptedBackup", true);
+      await sleep(300);
+      if (trial) {
+        PremiumService.sheet(null, null, true);
+      } else {
+        PremiumService.showVerifyEmailDialog();
+      }
+    } catch (e) {
+      setLoading(false);
+      ToastManager.show({
+        heading: strings.signupFailed(),
+        message: e.message,
+        type: "error",
+        context: "local"
+      });
+    }
+  };
+
+  return (
+    <>
+      <View
+        style={{
+          borderRadius: DDS.isTab ? 5 : 0,
+          backgroundColor: colors.primary.background,
+          zIndex: 10,
+          width: "100%",
+          alignSelf: "center"
+        }}
+      >
+        <View
+          style={{
+            justifyContent: "flex-end",
+            paddingHorizontal: 20,
+            backgroundColor: colors.secondary.background,
+            marginBottom: 20,
+            borderBottomWidth: 0.8,
+            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%",
+            minHeight: height * 0.4
+          }}
+        >
+          <View
+            style={{
+              flexDirection: "row"
+            }}
+          >
+            <View
+              style={{
+                width: 100,
+                height: 5,
+                backgroundColor: colors.primary.accent,
+                borderRadius: 2,
+                marginRight: 7
+              }}
+            />
+
+            <View
+              style={{
+                width: 20,
+                height: 5,
+                backgroundColor: colors.secondary.background,
+                borderRadius: 2
+              }}
+            />
+          </View>
+          <Heading
+            extraBold
+            style={{
+              marginBottom: 25,
+              marginTop: 10
+            }}
+            size={SIZE.xxl}
+          >
+            {strings.createYourAccount()}
+          </Heading>
+        </View>
+
+        <View
+          style={{
+            width: DDS.isTab ? "50%" : "100%",
+            paddingHorizontal: 20,
+            backgroundColor: colors.primary.background,
+            alignSelf: "center"
+          }}
+        >
+          <Input
+            fwdRef={emailInputRef}
+            onChangeText={(value) => {
+              email.current = value;
+            }}
+            testID="input.email"
+            onErrorCheck={(e) => setError(e)}
+            returnKeyLabel={strings.next()}
+            returnKeyType="next"
+            autoComplete="email"
+            validationType="email"
+            autoCorrect={false}
+            autoCapitalize="none"
+            errorMessage={strings.email()}
+            placeholder={strings.email()}
+            onSubmit={() => {
+              passwordInputRef.current?.focus();
+            }}
+          />
+
+          <Input
+            fwdRef={passwordInputRef}
+            onChangeText={(value) => {
+              password.current = value;
+            }}
+            testID="input.password"
+            onErrorCheck={(e) => setError(e)}
+            returnKeyLabel={strings.next()}
+            returnKeyType="next"
+            secureTextEntry
+            autoComplete="password"
+            autoCapitalize="none"
+            validationType="password"
+            autoCorrect={false}
+            placeholder={strings.password()}
+            onSubmit={() => {
+              confirmPasswordInputRef.current?.focus();
+            }}
+          />
+
+          <Input
+            fwdRef={confirmPasswordInputRef}
+            onChangeText={(value) => {
+              confirmPassword.current = value;
+            }}
+            testID="input.confirmPassword"
+            onErrorCheck={(e) => setError(e)}
+            returnKeyLabel={strings.done()}
+            returnKeyType="done"
+            secureTextEntry
+            autoComplete="password"
+            autoCapitalize="none"
+            autoCorrect={false}
+            validationType="confirmPassword"
+            customValidator={() => password.current}
+            placeholder={strings.confirmPassword()}
+            marginBottom={12}
+            onSubmit={signup}
+          />
+
+          <Paragraph
+            style={{
+              marginBottom: 25
+            }}
+            size={SIZE.xs}
+            color={colors.secondary.paragraph}
+          >
+            {strings.signupAgreement[0]()}
+            <Paragraph
+              size={SIZE.xs}
+              onPress={() => {
+                openLinkInBrowser("https://notesnook.com/tos", colors);
+              }}
+              style={{
+                textDecorationLine: "underline"
+              }}
+              color={colors.primary.accent}
+            >
+              {strings.signupAgreement[1]()}
+            </Paragraph>
+            {strings.signupAgreement[2]()}
+            <Paragraph
+              size={SIZE.xs}
+              onPress={() => {
+                openLinkInBrowser("https://notesnook.com/privacy", colors);
+              }}
+              style={{
+                textDecorationLine: "underline"
+              }}
+              color={colors.primary.accent}
+            >
+              {strings.signupAgreement[3]()}
+            </Paragraph>
+            {strings.signupAgreement[4]()}
+          </Paragraph>
+
+          <Button
+            title={!loading ? strings.continue() : null}
+            type="accent"
+            loading={loading}
+            onPress={signup}
+            fontSize={SIZE.md}
+            style={{
+              marginRight: 12,
+              width: 250,
+              borderRadius: 100
+            }}
+          />
+
+          <TouchableOpacity
+            onPress={() => {
+              if (loading) return;
+              changeMode(0);
+            }}
+            activeOpacity={0.8}
+            style={{
+              alignSelf: "center",
+              marginTop: 12,
+              paddingVertical: 12
+            }}
+          >
+            <Paragraph size={SIZE.xs + 1} color={colors.secondary.paragraph}>
+              {strings.alreadyHaveAccount()}{" "}
+              <Paragraph
+                size={SIZE.xs + 1}
+                style={{ color: colors.primary.accent }}
+              >
+                {strings.login()}
+              </Paragraph>
+            </Paragraph>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </>
+  );
+};

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

@@ -1,384 +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 { strings } from "@notesnook/intl";
-import { useThemeColors } from "@notesnook/theme";
-import { RouteProp, useRoute } from "@react-navigation/native";
-import React, { useRef, useState } from "react";
-import {
-  TextInput,
-  TouchableOpacity,
-  View,
-  useWindowDimensions
-} from "react-native";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-import { db } from "../../common/database";
-import { DDS } from "../../services/device-detection";
-import { ToastManager } from "../../services/event-manager";
-import { clearMessage, setEmailVerifyMessage } from "../../services/message";
-import Navigation from "../../services/navigation";
-import { useUserStore } from "../../stores/use-user-store";
-import { openLinkInBrowser } from "../../utils/functions";
-import { AppFontSize } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
-import { Loading } from "../loading";
-import { Button } from "../ui/button";
-import Input from "../ui/input";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import { AuthHeader } from "./header";
-import { SignupContext } from "./signup-context";
-import { RouteParams } from "../../stores/use-navigation-store";
-import SettingsService from "../../services/settings";
-
-const SignupSteps = {
-  signup: 0,
-  selectPlan: 1,
-  createAccount: 2
-};
-
-export const Signup = ({
-  changeMode,
-  welcome
-}: {
-  changeMode: (mode: number) => void;
-  welcome: boolean;
-}) => {
-  const [currentStep, setCurrentStep] = useState(SignupSteps.signup);
-  const { colors } = useThemeColors();
-  const email = useRef<string>(undefined);
-  const emailInputRef = useRef<TextInput>(null);
-  const passwordInputRef = useRef<TextInput>(null);
-  const password = useRef<string>(undefined);
-  const confirmPasswordInputRef = useRef<TextInput>(null);
-  const confirmPassword = useRef<string>(undefined);
-  const [error, setError] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const setUser = useUserStore((state) => state.setUser);
-  const setLastSynced = useUserStore((state) => state.setLastSynced);
-  const { width, height } = useWindowDimensions();
-  const isTablet = width > 600;
-  const route = useRoute<RouteProp<RouteParams, "Auth">>();
-
-  const validateInfo = () => {
-    if (!password.current || !email.current || !confirmPassword.current) {
-      ToastManager.show({
-        heading: strings.allFieldsRequired(),
-        message: strings.allFieldsRequiredDesc(),
-        type: "error",
-        context: "local"
-      });
-
-      return false;
-    }
-
-    return true;
-  };
-
-  const signup = async () => {
-    if (!validateInfo() || error) return;
-    if (loading) return;
-
-    setLoading(true);
-    try {
-      setCurrentStep(SignupSteps.createAccount);
-      await db.user.signup(email.current!.toLowerCase(), password.current!);
-      let user = await db.user.getUser();
-      setUser(user);
-      setLastSynced(await db.lastSynced());
-      clearMessage();
-      setEmailVerifyMessage();
-      if (!SettingsService.getProperty("serverUrls")) {
-        Navigation.navigate("PayWall", {
-          canGoBack: false,
-          state: route.params.state,
-          context: "signup"
-        });
-      }
-      return true;
-    } catch (e) {
-      setCurrentStep(SignupSteps.signup);
-      setLoading(false);
-      ToastManager.show({
-        heading: strings.signupFailed(),
-        message: (e as Error).message,
-        type: "error",
-        context: "local"
-      });
-      return false;
-    }
-  };
-
-  return (
-    <SignupContext.Provider
-      value={{
-        signup: signup
-      }}
-    >
-      {currentStep === SignupSteps.signup ? (
-        <>
-          <AuthHeader welcome={welcome} />
-          <KeyboardAwareScrollView
-            style={{
-              width: "100%"
-            }}
-            contentContainerStyle={{
-              minHeight: "90%"
-            }}
-            nestedScrollEnabled
-            keyboardShouldPersistTaps="handled"
-          >
-            <View
-              style={{
-                borderRadius: DDS.isTab ? 5 : 0,
-                backgroundColor: colors.primary.background,
-                zIndex: 10,
-                width: "100%",
-                alignSelf: "center",
-                height: "100%"
-              }}
-            >
-              <View
-                style={{
-                  justifyContent: "flex-end",
-                  paddingHorizontal: 16,
-                  marginBottom: DefaultAppStyles.GAP_VERTICAL,
-                  borderBottomWidth: 0.8,
-                  borderBottomColor: colors.primary.border,
-                  alignSelf: isTablet ? "center" : undefined,
-                  borderWidth: isTablet ? 1 : undefined,
-                  borderColor: isTablet ? colors.primary.border : undefined,
-                  borderRadius: isTablet ? 20 : undefined,
-                  marginTop: isTablet ? 50 : undefined,
-                  width: !isTablet ? undefined : "50%",
-                  minHeight: height * 0.25
-                }}
-              >
-                <View
-                  style={{
-                    flexDirection: "row"
-                  }}
-                >
-                  <View
-                    style={{
-                      width: 100,
-                      height: 5,
-                      backgroundColor: colors.primary.accent,
-                      borderRadius: 2,
-                      marginRight: 7
-                    }}
-                  />
-
-                  <View
-                    style={{
-                      width: 20,
-                      height: 5,
-                      backgroundColor: colors.secondary.background,
-                      borderRadius: 2
-                    }}
-                  />
-                </View>
-                <Heading
-                  extraBold
-                  style={{
-                    marginBottom: 25,
-                    marginTop: 10
-                  }}
-                  size={AppFontSize.xxl}
-                >
-                  {strings.createAccount()}
-                </Heading>
-              </View>
-
-              <View
-                style={{
-                  width: DDS.isTab ? "50%" : "100%",
-                  paddingHorizontal: DDS.isTab ? 0 : 16,
-                  backgroundColor: colors.primary.background,
-                  flexGrow: 1,
-                  alignSelf: "center"
-                }}
-              >
-                <Input
-                  fwdRef={emailInputRef}
-                  onChangeText={(value) => {
-                    email.current = value;
-                  }}
-                  defaultValue={email.current}
-                  testID="input.email"
-                  onErrorCheck={(e) => setError(e)}
-                  returnKeyLabel="Next"
-                  returnKeyType="next"
-                  autoComplete="email"
-                  validationType="email"
-                  autoCorrect={false}
-                  autoCapitalize="none"
-                  errorMessage={strings.emailInvalid()}
-                  placeholder={strings.email()}
-                  blurOnSubmit={false}
-                  onSubmit={() => {
-                    if (!email.current) return;
-                    passwordInputRef.current?.focus();
-                  }}
-                />
-
-                <Input
-                  fwdRef={passwordInputRef}
-                  onChangeText={(value) => {
-                    password.current = value;
-                  }}
-                  defaultValue={password.current}
-                  testID="input.password"
-                  onErrorCheck={(e) => setError(e)}
-                  returnKeyLabel="Next"
-                  returnKeyType="next"
-                  secureTextEntry
-                  autoComplete="password"
-                  autoCapitalize="none"
-                  blurOnSubmit={false}
-                  validationType="password"
-                  autoCorrect={false}
-                  placeholder={strings.password()}
-                  onSubmit={() => {
-                    if (!password.current) return;
-                    confirmPasswordInputRef.current?.focus();
-                  }}
-                />
-
-                <Input
-                  fwdRef={confirmPasswordInputRef}
-                  onChangeText={(value) => {
-                    confirmPassword.current = value;
-                  }}
-                  defaultValue={confirmPassword.current}
-                  testID="input.confirmPassword"
-                  onErrorCheck={(e) => setError(e)}
-                  returnKeyLabel="Signup"
-                  returnKeyType="done"
-                  secureTextEntry
-                  autoComplete="password"
-                  autoCapitalize="none"
-                  autoCorrect={false}
-                  blurOnSubmit={false}
-                  validationType="confirmPassword"
-                  customValidator={() => password.current!}
-                  placeholder={strings.confirmPassword()}
-                  marginBottom={12}
-                  onSubmit={() => {
-                    signup();
-                  }}
-                />
-
-                <Button
-                  title={!loading ? "Continue" : null}
-                  type="accent"
-                  loading={loading}
-                  onPress={() => {
-                    signup();
-                  }}
-                  width="100%"
-                />
-
-                <TouchableOpacity
-                  onPress={() => {
-                    if (loading) return;
-                    changeMode(0);
-                  }}
-                  activeOpacity={0.8}
-                  style={{
-                    alignSelf: "center",
-                    marginTop: 12,
-                    paddingVertical: 12
-                  }}
-                >
-                  <Paragraph
-                    size={AppFontSize.xs + 1}
-                    color={colors.secondary.paragraph}
-                  >
-                    {strings.alreadyHaveAccount()}{" "}
-                    <Paragraph
-                      size={AppFontSize.xs + 1}
-                      style={{ color: colors.primary.accent }}
-                    >
-                      {strings.login()}
-                    </Paragraph>
-                  </Paragraph>
-                </TouchableOpacity>
-              </View>
-
-              <View
-                style={{
-                  paddingHorizontal: DefaultAppStyles.GAP,
-                  width: DDS.isTab ? "50%" : "100%",
-                  alignSelf: "center"
-                }}
-              >
-                <Paragraph
-                  style={{
-                    marginBottom: 25,
-                    textAlign: "center"
-                  }}
-                  size={AppFontSize.xxs}
-                  color={colors.secondary.paragraph}
-                >
-                  {strings.signupAgreement[0]()}
-                  <Paragraph
-                    size={AppFontSize.xxs}
-                    onPress={() => {
-                      openLinkInBrowser("https://notesnook.com/tos");
-                    }}
-                    style={{
-                      textDecorationLine: "underline"
-                    }}
-                    color={colors.primary.accent}
-                  >
-                    {" "}
-                    {strings.signupAgreement[1]()}
-                  </Paragraph>{" "}
-                  {strings.signupAgreement[2]()}
-                  <Paragraph
-                    size={AppFontSize.xxs}
-                    onPress={() => {
-                      openLinkInBrowser("https://notesnook.com/privacy");
-                    }}
-                    style={{
-                      textDecorationLine: "underline"
-                    }}
-                    color={colors.primary.accent}
-                  >
-                    {" "}
-                    {strings.signupAgreement[3]()}
-                  </Paragraph>{" "}
-                  {strings.signupAgreement[4]()}
-                </Paragraph>
-              </View>
-            </View>
-          </KeyboardAwareScrollView>
-        </>
-      ) : (
-        <>
-          <Loading
-            title={"Setting up your account..."}
-            description="Your account is almost ready, please wait..."
-          />
-        </>
-      )}
-    </SignupContext.Provider>
-  );
-};

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

@@ -20,60 +20,38 @@ 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 } from "react-native";
+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 { eSendEvent, ToastManager } from "../../services/event-manager";
-import { eCloseSimpleDialog } from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
+import {
+  eSendEvent,
+  presentSheet,
+  ToastManager
+} from "../../services/event-manager";
+import { eCloseSheet } from "../../utils/events";
+import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
 import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { DefaultAppStyles } from "../../utils/styles";
-import { presentDialog } from "../dialog/functions";
 
-type MFAInfo = {
-  primaryMethod: string;
-  secondaryMethod: string;
-  token: string;
-};
-
-const TwoFactorVerification = ({
-  onMfaLogin,
-  mfaInfo,
-  onCancel
-}: {
-  onMfaLogin: (
-    login: {
-      method: string;
-      code: string;
-    },
-    callback: (result: any) => void
-  ) => Promise<void>;
-  mfaInfo: MFAInfo;
-  onCancel: () => void;
-}) => {
+const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
   const { colors } = useThemeColors();
-  const code = useRef<string>(undefined);
-  const [currentMethod, setCurrentMethod] = useState<{
-    isPrimary: boolean;
-    method: string | null;
-  }>({
+  const code = useRef();
+  const [currentMethod, setCurrentMethod] = useState({
     method: mfaInfo?.primaryMethod,
     isPrimary: true
   });
-  const { seconds, start, reset } = useTimer(currentMethod.method!);
+  const { seconds, start } = useTimer(currentMethod.method);
   const [loading, setLoading] = useState(false);
-  const inputRef = useRef<TextInput>(null);
+  const inputRef = useRef();
   const [sending, setSending] = useState(false);
 
   const onNext = async () => {
-    if (!code.current || code.current.length < 6 || !currentMethod.method)
-      return;
+    if (!code.current || code.current.length < 6) return;
     setLoading(true);
     inputRef.current?.blur();
     await onMfaLogin(
@@ -83,7 +61,7 @@ const TwoFactorVerification = ({
       },
       (result) => {
         if (result) {
-          eSendEvent(eCloseSimpleDialog, "two_factor_verify");
+          eSendEvent(eCloseSheet, "two_factor_verify");
         }
         setLoading(false);
       }
@@ -130,40 +108,30 @@ const TwoFactorVerification = ({
     );
   };
 
-  const onSendCode = useCallback(async () => {
-    if (seconds || sending) return;
-    setSending(true);
-    try {
-      await db.mfa.sendCode(currentMethod.method as "sms" | "email");
-      start(60);
-      setSending(false);
-    } catch (e) {
-      setSending(false);
-      ToastManager.error(e as Error, "Error sending 2FA Code", "local");
-    }
-  }, [currentMethod.method, mfaInfo.token, seconds, sending, start]);
-
   useEffect(() => {
     if (currentMethod.method === "sms" || currentMethod.method === "email") {
       onSendCode();
     }
   }, [currentMethod.method, onSendCode]);
 
+  const onSendCode = useCallback(async () => {
+    if (seconds || sending) return;
+    // TODO
+    setSending(true);
+    try {
+      await db.mfa.sendCode(currentMethod.method, mfaInfo.token);
+      start(60);
+      setSending(false);
+    } catch (e) {
+      setSending(false);
+      ToastManager.error(e, "Error sending 2FA Code", "local");
+    }
+  }, [currentMethod.method, mfaInfo.token, seconds, sending, start]);
+
   return (
     <ScrollView
       keyboardShouldPersistTaps="handled"
       keyboardDismissMode="interactive"
-      style={{
-        width: "100%",
-        height: "100%",
-        backgroundColor: colors.primary.background,
-        paddingTop: 60
-      }}
-      onLayout={() => {
-        setTimeout(() => {
-          inputRef.current?.focus();
-        }, 500);
-      }}
     >
       <View
         style={{
@@ -194,11 +162,8 @@ const TwoFactorVerification = ({
             textAlign: "center"
           }}
         >
-          {currentMethod.method
-            ? strings["2faCodeHelpText"][
-                currentMethod.method as keyof (typeof strings)["2faCodeHelpText"]
-              ]?.() || strings.select2faCodeHelpText()
-            : strings.select2faCodeHelpText()}
+          {strings["2faCodeHelpText"][currentMethod.method]?.() ||
+            strings.select2faCodeHelpText()}
         </Paragraph>
 
         {currentMethod.method === "sms" || currentMethod.method === "email" ? (
@@ -210,7 +175,7 @@ const TwoFactorVerification = ({
                 ? ""
                 : `${
                     seconds
-                      ? strings.resend2faCode(`${seconds}`)
+                      ? strings.resend2faCode(seconds)
                       : strings.sendCode()
                   }`
             }
@@ -235,16 +200,15 @@ const TwoFactorVerification = ({
               textAlign="center"
               onChangeText={(value) => {
                 code.current = value;
+                //onNext();
               }}
-              cursorColor={colors.selected.accent}
-              selectionHandleColor={colors.selected.accent}
-              selectionColor={colors.selected.accent}
               onSubmitEditing={onNext}
-              height={60}
+              caretHidden
               inputStyle={{
-                fontSize: AppFontSize.lg,
+                fontSize: SIZE.lg,
+                height: 60,
                 textAlign: "center",
-                letterSpacing: 7,
+                letterSpacing: 10,
                 width: 250
               }}
               keyboardType={
@@ -252,11 +216,11 @@ const TwoFactorVerification = ({
               }
               enablesReturnKeyAutomatically
               containerStyle={{
+                height: 60,
+                borderWidth: 0,
+                width: undefined,
                 minWidth: "50%"
               }}
-              wrapperStyle={{
-                height: 60
-              }}
             />
 
             <Button
@@ -265,25 +229,26 @@ const TwoFactorVerification = ({
               width={250}
               loading={loading}
               onPress={onNext}
-            />
-            <Button
-              title={strings.cancel()}
-              type="secondaryAccented"
-              onPress={() => {
-                reset();
-                onCancel();
+              style={{
+                borderRadius: 100
               }}
-              width={250}
             />
 
             <Button
               title={strings["2faCodeSecondaryMethodText"][
-                currentMethod.method as keyof (typeof strings)["2faCodeSecondaryMethodText"]
+                currentMethod.method
               ]()}
               type="plain"
               onPress={onRequestSecondaryMethod}
               height={30}
             />
+
+            <Button
+              title={strings.cancel()}
+              type="plain"
+              onPress={onCancel}
+              height={30}
+            />
           </>
         ) : (
           <>
@@ -297,8 +262,8 @@ const TwoFactorVerification = ({
                   });
                 }}
                 style={{
-                  paddingHorizontal: DefaultAppStyles.GAP,
-                  paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+                  paddingHorizontal: 12,
+                  paddingVertical: 12,
                   marginTop: 0,
                   flexDirection: "row",
                   borderRadius: 0,
@@ -310,6 +275,8 @@ const TwoFactorVerification = ({
                 <IconButton
                   type="secondaryAccented"
                   style={{
+                    width: 40,
+                    height: 40,
                     marginRight: 10
                   }}
                   size={15}
@@ -321,7 +288,7 @@ const TwoFactorVerification = ({
                     flexShrink: 1
                   }}
                 >
-                  <Paragraph size={AppFontSize.md}>{item.title}</Paragraph>
+                  <Paragraph size={SIZE.md}>{item.title}</Paragraph>
                 </View>
               </Pressable>
             ))}
@@ -332,19 +299,8 @@ const TwoFactorVerification = ({
   );
 };
 
-TwoFactorVerification.present = (
-  onMfaLogin: (
-    login: {
-      method: string;
-      code: string;
-    },
-    callback: (result: any) => void
-  ) => Promise<void>,
-  data: MFAInfo,
-  onCancel: () => void,
-  context?: string
-) => {
-  presentDialog({
+TwoFactorVerification.present = (onMfaLogin, data, onCancel, context) => {
+  presentSheet({
     component: () => (
       <TwoFactorVerification
         onMfaLogin={onMfaLogin}
@@ -353,8 +309,7 @@ TwoFactorVerification.present = (
       />
     ),
     context: context || "two_factor_verify",
-    transparent: false,
-    statusBarTranslucent: true
+    disableClosing: true
   });
 };
 

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

@@ -17,17 +17,16 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { strings } from "@notesnook/intl";
 import { useRef, useState } from "react";
-import { TextInput } from "react-native";
 import { db } from "../../common/database";
-import { ToastManager, eSendEvent } from "../../services/event-manager";
+import { eSendEvent, ToastManager } from "../../services/event-manager";
 import { clearMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
 import { useUserStore } from "../../stores/use-user-store";
-import { eCloseSimpleDialog } from "../../utils/events";
+import { eCloseSheet } from "../../utils/events";
 import TwoFactorVerification from "./two-factor";
+import { strings } from "@notesnook/intl";
 
 export const LoginSteps = {
   emailAuth: 1,
@@ -35,18 +34,15 @@ export const LoginSteps = {
   passwordAuth: 3
 };
 
-export const useLogin = (
-  onFinishLogin?: () => void,
-  sessionExpired = false
-) => {
+export const useLogin = (onFinishLogin, sessionExpired = false) => {
   const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
   const [step, setStep] = useState(LoginSteps.emailAuth);
-  const email = useRef<string>(undefined);
-  const password = useRef<string>(undefined);
-  const emailInputRef = useRef<TextInput>(null);
-  const passwordInputRef = useRef<TextInput>(null);
+  const email = useRef();
+  const password = useRef();
+  const emailInputRef = useRef();
+  const passwordInputRef = useRef();
 
   const validateInfo = () => {
     if (
@@ -73,15 +69,11 @@ export const useLogin = (
       setLoading(true);
       switch (step) {
         case LoginSteps.emailAuth: {
-          if (!email.current) {
-            setLoading(false);
-            return;
-          }
           const mfaInfo = await db.user.authenticateEmail(email.current);
 
           if (mfaInfo) {
             TwoFactorVerification.present(
-              async (mfa: any, callback: (success: boolean) => void) => {
+              async (mfa, callback) => {
                 try {
                   const success = await db.user.authenticateMultiFactorCode(
                     mfa.code,
@@ -99,8 +91,8 @@ export const useLogin = (
                   callback && callback(false);
                 } catch (e) {
                   callback && callback(false);
-                  if ((e as Error).message === "invalid_grant") {
-                    eSendEvent(eCloseSimpleDialog, "two_factor_verify");
+                  if (e.message === "invalid_grant") {
+                    eSendEvent(eCloseSheet, "two_factor_verify");
                     setLoading(false);
                     setStep(LoginSteps.emailAuth);
                   }
@@ -108,7 +100,7 @@ export const useLogin = (
               },
               mfaInfo,
               () => {
-                eSendEvent(eCloseSimpleDialog, "two_factor_verify");
+                eSendEvent(eCloseSheet, "two_factor_verify");
                 setLoading(false);
                 setStep(LoginSteps.emailAuth);
               }
@@ -119,14 +111,10 @@ export const useLogin = (
           break;
         }
         case LoginSteps.passwordAuth: {
-          if (!email.current || !password.current) {
-            setLoading(false);
-            return;
-          }
           await db.user.authenticatePassword(
             email.current,
             password.current,
-            undefined,
+            null,
             sessionExpired
           );
           finishLogin();
@@ -135,11 +123,11 @@ export const useLogin = (
       }
       setLoading(false);
     } catch (e) {
-      finishWithError(e as Error);
+      finishWithError(e);
     }
   };
 
-  const finishWithError = async (e: Error) => {
+  const finishWithError = async (e) => {
     if (e.message === "invalid_grant") setStep(LoginSteps.emailAuth);
     setLoading(false);
     ToastManager.show({
@@ -158,7 +146,7 @@ export const useLogin = (
     clearMessage();
     ToastManager.show({
       heading: strings.loginSuccess(),
-      message: strings.loginSuccessDesc(user.email),
+      message: strings.loginSuccessDesc(),
       type: "success",
       context: "global"
     });

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

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

@@ -30,7 +30,7 @@ export const Container = ({ children }: PropsWithChildren) => {
   const [height, setHeight] = useState(0);
   const windowHeightRef = useRef(Dimensions.get("window").height);
   const { height: windowHeight } = useWindowDimensions();
-  const timerRef = useRef<NodeJS.Timeout>(undefined);
+  const timerRef = useRef<NodeJS.Timeout>();
   useEffect(() => {
     if (windowHeight !== windowHeightRef.current) {
       setHeight(0);

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

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

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

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

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

@@ -20,8 +20,6 @@ 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();
@@ -33,7 +31,7 @@ export const SettingsPlaceholder = () => {
           width: 100,
           height: 12,
           backgroundColor: colors.primary.shade,
-          borderRadius: defaultBorderRadius,
+          borderRadius: 5,
           marginLeft: 12,
           marginBottom: 12
         }}
@@ -46,7 +44,7 @@ export const SettingsPlaceholder = () => {
           marginBottom: 20,
           flexDirection: "row",
           alignItems: "center",
-          paddingHorizontal: DefaultAppStyles.GAP
+          paddingHorizontal: 16
         }}
       >
         <View
@@ -64,7 +62,7 @@ export const SettingsPlaceholder = () => {
               width: 150,
               height: 12,
               backgroundColor: colors.secondary.background,
-              borderRadius: defaultBorderRadius,
+              borderRadius: 5,
               marginBottom: 10
             }}
           />
@@ -73,7 +71,7 @@ export const SettingsPlaceholder = () => {
               width: 250,
               height: 16,
               backgroundColor: colors.secondary.background,
-              borderRadius: defaultBorderRadius
+              borderRadius: 5
             }}
           />
         </View>
@@ -87,7 +85,7 @@ export const SettingsPlaceholder = () => {
           marginBottom: 20,
           flexDirection: "row",
           alignItems: "center",
-          paddingHorizontal: DefaultAppStyles.GAP,
+          paddingHorizontal: 16,
           justifyContent: "space-between"
         }}
       >
@@ -106,7 +104,7 @@ export const SettingsPlaceholder = () => {
               width: 150,
               height: 12,
               backgroundColor: colors.secondary.background,
-              borderRadius: defaultBorderRadius,
+              borderRadius: 5,
               marginBottom: 10
             }}
           />
@@ -115,7 +113,7 @@ export const SettingsPlaceholder = () => {
               width: 250,
               height: 16,
               backgroundColor: colors.secondary.background,
-              borderRadius: defaultBorderRadius
+              borderRadius: 5
             }}
           />
         </View>

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

@@ -20,47 +20,48 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { AnnouncementDialog } from "../announcements";
+import AuthModal from "../auth/auth-modal";
 import { SessionExpired } from "../auth/session-expired";
 import { Dialog } from "../dialog";
 import { AppLockPassword } from "../dialogs/applock-password";
 import JumpToSectionDialog from "../dialogs/jump-to-section";
 import { LoadingDialog } from "../dialogs/loading";
 import PDFPreview from "../dialogs/pdf-preview";
+import ResultDialog from "../dialogs/result";
 import { VaultDialog } from "../dialogs/vault";
 import ImagePreview from "../image-preview";
 import MergeConflicts from "../merge-conflicts";
+import PremiumDialog from "../premium";
+import { Expiring } from "../premium/expiring";
 import SheetProvider from "../sheet-provider";
 import RateAppSheet from "../sheets/rate-app";
 import RecoveryKeySheet from "../sheets/recovery-key";
 import Progress from "../dialogs/progress";
-import { useSettingStore } from "../../stores/use-setting-store";
 
 const DialogProvider = () => {
   const { colors } = useThemeColors();
-  const isAppLoading = useSettingStore((state) => state.isAppLoading);
 
   return (
     <>
       <AppLockPassword />
       <LoadingDialog />
+      <Dialog context="global" />
+      <PremiumDialog colors={colors} />
+      <AuthModal colors={colors} />
+      <MergeConflicts />
+      <RecoveryKeySheet colors={colors} />
       <SheetProvider />
       <SheetProvider context="sync_progress" />
-      <Dialog context="global" />
+      <ResultDialog />
+      <VaultDialog colors={colors} />
+      <RateAppSheet />
+      <ImagePreview />
+      <Expiring />
+      <AnnouncementDialog />
+      <SessionExpired />
+      <PDFPreview />
+      <JumpToSectionDialog />
       <Progress />
-
-      {isAppLoading ? null : (
-        <>
-          <MergeConflicts />
-          <RecoveryKeySheet colors={colors} />
-          <VaultDialog colors={colors} />
-          <RateAppSheet />
-          <ImagePreview />
-          <AnnouncementDialog />
-          <SessionExpired />
-          <PDFPreview />
-          <JumpToSectionDialog />
-        </>
-      )}
     </>
   );
 };