mobile: set sticky state if not set already

Signed-off-by: Abdullah Atta <abdullahatta@streetwriters.co>

.commitlintrc.js

@@ -15,6 +15,7 @@ const SCOPES = [
   "mobile",
   "web",
   "vericrypt",
+  "monograph",
   "desktop",
   "crypto",
   "editor",
@@ -34,7 +35,8 @@ const SCOPES = [
   "common",
   "global",
   "docs",
-  "themebuilder"
+  "themebuilder",
+  "intl"
 ];
 
 module.exports = {

.eslintignore

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

.eslintrc.js

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

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,8 +1,6 @@
 name: Bug Report
 description: Are you facing a bug or a crash in Notesnook?
-labels: ["Type: Bug", "Status: Pending"]
-assignees:
-  - thecodrr
+type: Bug
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,5 @@
 blank_issues_enabled: true
 contact_links:
   - name: Notesnook Discord Community
-    url: https://discord.gg/6mHHyncHJE
+    url: https://go.notesnook.com/discord
     about: Reach out to us directly & discuss your issues, suggestions & other feedback!

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,6 +1,6 @@
 name: Feature request
 description: Suggest a feature you are missing in Notesnook
-labels: ["Type: Feature Request", "Status: Pending"]
+type: Feature
 body:
   - type: markdown
     attributes:

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

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

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

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

.github/workflows/android.publish.yml

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

.github/workflows/desktop.publish.yml

@@ -58,7 +58,7 @@ jobs:
         run: npx nx build:desktop @notesnook/web
 
       - name: Archive build artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: build
           path: apps/web/build/**/*
@@ -82,12 +82,13 @@ jobs:
           name: Notesnook Desktop v${{ steps.app_metadata.outputs.app_version }}
           tag_name: v${{ steps.app_metadata.outputs.app_version }}
           files: ./notesnook_build_v${{ steps.app_metadata.outputs.app_version }}.zip
+          prerelease: ${{ endsWith(steps.app_metadata.outputs.app_version, '-beta') }}
 
   build-macos:
     name: Build for macOS
     needs: build
     if: inputs.build-mac
-    runs-on: macos-12
+    runs-on: macos-14
 
     steps:
       - name: Check out Git repository
@@ -96,6 +97,9 @@ jobs:
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
 
+      - name: Install setuptools
+        run: brew install python-setuptools
+
       - name: Setup notarization
         run: |
           mkdir -p ~/private_keys/
@@ -122,7 +126,7 @@ jobs:
           platform: "MAC_OS"
 
       - name: Download build
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: build
           path: ./apps/web/build
@@ -143,7 +147,7 @@ jobs:
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
         run: |
           npx nx run release --project @notesnook/desktop -- --variant=mas
-          npx electron-builder --mac mas --universal -p never
+          yarn electron-builder --mac mas --universal -p never
         working-directory: ./apps/desktop
 
       - name: Build zip and dmg
@@ -153,13 +157,13 @@ jobs:
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
           APPLE_API_KEY: ~/private_keys/AuthKey_${{ secrets.api_key_id }}.p8
           APPLE_API_KEY_ID: ${{ secrets.api_key_id }}
-          APPLE_API_KEY_ISSUER: ${{ secrets.api_key_issuer_id }}
+          APPLE_API_ISSUER: ${{ secrets.api_key_issuer_id }}
         run: |
           npx nx run release --project @notesnook/desktop
           if [ ${{ inputs.publish-github }} == true ]; then
-            npx electron-builder --mac zip dmg --arm64 --x64 -p always
+            yarn electron-builder --mac zip dmg --arm64 --x64 -p always
           else
-            npx electron-builder --mac zip dmg --arm64 --x64 -p never
+            yarn electron-builder --mac zip dmg --arm64 --x64 -p never
           fi
         working-directory: ./apps/desktop
 
@@ -198,7 +202,7 @@ jobs:
         if: inputs.publish-snap
 
       - name: Download build
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: build
           path: ./apps/web/build
@@ -215,7 +219,7 @@ jobs:
       - name: Build snap
         if: inputs.publish-snap
         run: |
-          npx electron-builder --linux snap:x64 -p never
+          yarn electron-builder --linux snap:x64 -p never
         working-directory: ./apps/desktop
 
       - name: Build AppImage
@@ -223,9 +227,9 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           if [ ${{ inputs.publish-github }} == true ]; then
-            npx electron-builder --linux AppImage:x64 AppImage:arm64 -p always
+            yarn electron-builder --linux AppImage:x64 AppImage:arm64 -p always
           else
-            npx electron-builder --linux AppImage:x64 AppImage:arm64 -p never
+            yarn electron-builder --linux AppImage:x64 AppImage:arm64 -p never
           fi
         working-directory: ./apps/desktop
 
@@ -250,15 +254,15 @@ jobs:
         with:
           dotnet-version: 6.0.x
 
-      - name: Install AzureCodeSigning
-        run: Install-Module -Name AzureCodeSigning -RequiredVersion 0.3.0 -Force -Repository PSGallery
+      - name: Install TrustedSigning
+        run: Install-Module -Name TrustedSigning -RequiredVersion 0.3.15 -Force -Repository PSGallery
         shell: pwsh
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
 
       - name: Download build
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: build
           path: ./apps/web/build

.github/workflows/ios.publish.yml

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

.github/workflows/monograph.publish.yml

@@ -0,0 +1,89 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+# GitHub recommends pinning actions to a commit SHA.
+# To get a newer version, you will need to update the SHA.
+# You can also reference a tag or branch, but the action may change without warning.
+
+name: Publish @notesnook/monograph
+
+on: workflow_dispatch
+
+jobs:
+  push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      contents: read
+      attestations: write
+      id-token: write
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=monograph
+
+      - name: Collect package metadata
+        id: package_metadata
+        working-directory: ./apps/monograph
+        run: |
+          echo ::set-output name=app_version::$(cat package.json | jq -r .version)
+
+      - name: Generate 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,linux/arm/v7,linux/arm/v8
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+          ecr: auto
+          logout: true
+
+      # Pull previous image from docker hub to use it as cache to improve the image build time.
+      - name: docker pull cache image
+        continue-on-error: true
+        run: docker pull streetwriters/monograph:latest
+
+      # Setup QEMU
+      # - name: Set up QEMU
+      #   uses: docker/setup-qemu-action@v2
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: streetwriters/monograph
+
+      - name: Build and push Docker image
+        id: push
+        uses: docker/build-push-action@v6
+        with:
+          context: apps/monograph
+          file: apps/monograph/Dockerfile
+          push: true
+          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
+
+      - name: Generate artifact attestation
+        uses: actions/attest-build-provenance@v1
+        with:
+          subject-name: index.docker.io/streetwriters/monograph
+          subject-digest: ${{ steps.push.outputs.digest }}
+          push-to-registry: true

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

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

.github/workflows/web.tests.yml

@@ -40,7 +40,7 @@ jobs:
         run: npm run build:test:web
 
       - name: Archive build artifact
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: build
           path: apps/web/build/**/*
@@ -56,7 +56,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Download build
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: build
           path: ./apps/web/build
@@ -67,7 +67,7 @@ jobs:
       - name: Install packages
         run: |
           npm ci --ignore-scripts --prefer-offline --no-audit
-          npm install -D @playwright/test otplib
+          npm install -D @playwright/test otplib dayjs @zip.js/zip.js
 
       - name: Validate build extraction
         run: ls -ld ./apps/web/build/index.html
@@ -88,7 +88,7 @@ jobs:
         working-directory: apps/web
 
       - name: Upload test results
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: test-results-${{ matrix.shard }}

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

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

.gitignore

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

.prettierignore

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

apps/desktop/.gitignore

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

apps/desktop/README.md

@@ -40,12 +40,35 @@ Once you are inside the `./notesnook` directory, run the preparation step:
 npm install
 ```
 
-Now you can finally start the desktop app:
+Now you can finally start the desktop app for development:
 
 ```bash
 npm run start:desktop
 ```
 
+To run the app in release mode:
+
+```bash
+npm run staging -- --rebuild
+```
+
+This will compile and run the app in production mode but it won't generate any packages. To create the final packages, you'll have to run the following commands:
+
+```bash
+npm run release -- --rebuild
+
+# For macOS
+npx electron-builder --mac dmg --arm64 --x64 -publish never
+
+# For Linux (AppImage)
+npx electron-builder --linux AppImage:x64 AppImage:arm64 -publish never
+
+# For Windows
+npx electron-builder --win --publish never
+```
+
+Feel free to play around with the `electron-builder` command to get the packages you need. `npx electron-builder --help` is a great resource to learn different commands & platforms supported by `electron-builder`.
+
 ## Developer guide
 
 ### The tech stack

apps/desktop/app-update.yml

@@ -1,3 +1,4 @@
 owner: streetwriters
 repo: notesnook
 provider: github
+updaterCacheDirName: Notesnook

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "2.6.15",
+  "version": "3.0.18",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/index.js",
@@ -11,26 +11,31 @@
   "repository": "https://github.com/streetwriters/notesnook",
   "license": "GPL-3.0-or-later",
   "dependencies": {
-    "@notesnook/crypto": "file:../../packages/crypto",
-    "@trpc/client": "10.38.3",
-    "@trpc/server": "10.38.3",
-    "electron-trpc": "0.5.2",
-    "electron-updater": "6.1.4",
-    "icojs": "^0.17.1",
+    "@lingui/core": "4.11.4",
+    "@notesnook/intl": "file:../../packages/intl",
+    "@trpc/client": "10.45.2",
+    "@trpc/server": "10.45.2",
+    "better-sqlite3-multiple-ciphers": "11.2.1",
+    "electron-trpc": "0.6.1",
+    "electron-updater": "^6.3.4",
+    "icojs": "^0.19.4",
     "typed-emitter": "^2.1.0",
-    "yargs": "^17.6.2",
-    "zod": "^3.21.4"
+    "yargs": "^17.7.2",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@types/node": "18.16.1",
-    "@types/yargs": "^17.0.24",
-    "chokidar": "^3.5.3",
-    "electron": "25.9.8",
-    "electron-builder": "^24.9.1",
-    "electron-builder-notarize": "^1.5.1",
-    "esbuild": "^0.17.19",
+    "@streetwriters/kysely": "^0.27.4",
+    "@types/node": "22.7.0",
+    "@types/yargs": "^17.0.33",
+    "chokidar": "^4.0.1",
+    "electron": "^30.5.1",
+    "electron-builder": "^25.1.7",
+    "esbuild": "^0.24.0",
+    "node-abi": "^3.68.0",
+    "node-gyp-build": "^4.8.2",
+    "prebuildify": "^6.0.1",
     "tree-kill": "^1.2.2",
-    "undici": "^5.23.0"
+    "undici": "^6.19.8"
   },
   "optionalDependencies": {
     "dmg-license": "^1.0.11"
@@ -40,7 +45,7 @@
     "staging": "node scripts/build.mjs --run",
     "release": "node scripts/build.mjs",
     "build": "tsc",
-    "bundle": "esbuild electron=./src/main.ts ./src/preload.ts --external:electron --external:fsevents --minify --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=false --define:RELEASE=true",
+    "bundle": "esbuild electron=./src/main.ts ./src/preload.ts --external:electron --external:fsevents --external:better-sqlite3-multiple-ciphers --external:sodium-native --minify --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=false --define:RELEASE=true",
     "bundle:mas": "esbuild electron=./src/main.ts ./src/preload.ts --minify --external:electron --external:fsevents --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=true --define:RELEASE=true",
     "postinstall": "patch-package"
   },
@@ -54,7 +59,7 @@
     "productName": "Notesnook",
     "copyright": "Copyright © 2023 Streetwriters (Private) Limited",
     "artifactName": "notesnook_${os}_${arch}.${ext}",
-    "npmRebuild": false,
+    "generateUpdatesFilesForAllChannels": true,
     "asar": false,
     "files": [
       "!*.chunk.js.map",
@@ -64,9 +69,17 @@
       "!build/banner.jpg",
       "!build/*.ico",
       "!build/*.png",
-      "!node_modules${/*}"
+      "!node_modules${/*}",
+      "node_modules/better-sqlite3-multiple-ciphers/build/Release/better_sqlite3.node",
+      "node_modules/better-sqlite3-multiple-ciphers/lib",
+      "node_modules/better-sqlite3-multiple-ciphers/package.json",
+      "node_modules/file-uri-to-path",
+      "node_modules/bindings",
+      "node_modules/node-gyp-build",
+      "node_modules/sodium-native/prebuilds/${platform}-${arch}",
+      "node_modules/sodium-native/index.js",
+      "node_modules/sodium-native/package.json"
     ],
-    "afterSign": "electron-builder-notarize",
     "afterPack": "./scripts/removeLocales.js",
     "mac": {
       "bundleVersion": "240",
@@ -94,7 +107,8 @@
       "entitlements": "assets/entitlements.mac.plist",
       "entitlementsInherit": "assets/entitlements.mac.plist",
       "gatekeeperAssess": false,
-      "icon": "assets/icons/app.icns"
+      "icon": "assets/icons/app.icns",
+      "notarize": true
     },
     "dmg": {
       "contents": [
@@ -138,7 +152,7 @@
       "signingHashAlgorithms": [
         "sha256"
       ],
-      "sign": "./sign.js",
+      "sign": "./scripts/sign.js",
       "icon": "assets/icons/app.ico"
     },
     "portable": {
@@ -146,7 +160,8 @@
     },
     "nsis": {
       "oneClick": true,
-      "createDesktopShortcut": "always"
+      "createDesktopShortcut": "always",
+      "deleteAppDataOnUninstall": true
     },
     "linux": {
       "target": [

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

@@ -1,8 +1,8 @@
 diff --git a/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js b/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
-index fcb7f54..cb1c7f7 100644
+index 739a48c..7a7b4af 100644
 --- a/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
 +++ b/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
-@@ -116,6 +116,7 @@ class LinuxTargetHelper {
+@@ -117,6 +117,7 @@ class LinuxTargetHelper {
              StartupWMClass: appInfo.productName,
              ...extra,
              ...targetSpecificOptions.desktop,
@@ -10,7 +10,7 @@ index fcb7f54..cb1c7f7 100644
          };
          const description = this.getDescription(targetSpecificOptions);
          if (!(0, builder_util_1.isEmptyOrSpaces)(description)) {
-@@ -159,6 +160,23 @@ class LinuxTargetHelper {
+@@ -160,6 +161,23 @@ class LinuxTargetHelper {
              data += `\n${name}=${desktopMeta[name]}`;
          }
          data += "\n";

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

@@ -1,23 +0,0 @@
-diff --git a/node_modules/electron-trpc/dist/main.mjs b/node_modules/electron-trpc/dist/main.mjs
-index 379cf3b..2644e5d 100644
---- a/node_modules/electron-trpc/dist/main.mjs
-+++ b/node_modules/electron-trpc/dist/main.mjs
-@@ -221,9 +221,16 @@ class G {
-     i(this, c).includes(r) || (i(this, c).push(r), I(this, T, W).call(this, r));
-   }
-   detachWindow(r) {
-+    
-     y(this, c, i(this, c).filter((n) => n !== r));
--    for (const [n, t] of i(this, u).entries())
--      n.startsWith(`${r.webContents.id}-`) && (t.unsubscribe(), i(this, u).delete(n));
-+    for (const [n, t] of i(this, u).entries()) {
-+      try {
-+        n.startsWith(`${r.webContents.id}-`) && (t.unsubscribe(), i(this, u).delete(n));
-+      } catch(e) {
-+        console.error(e);
-+        // ignore
-+      }
-+    }
-   }
- }
- c = new WeakMap(), u = new WeakMap(), T = new WeakSet(), W = function(r) {

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

@@ -18,8 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import path from "path";
-import fs from "fs/promises";
-import { existsSync } from "fs";
+import fs, { readFile, writeFile } from "fs/promises";
+import { existsSync, readFileSync } from "fs";
 import yargs from "yargs-parser";
 import os from "os";
 import * as childProcess from "child_process";
@@ -28,90 +28,76 @@ import { fileURLToPath } from "url";
 const args = yargs(process.argv);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const sodiumNativePrebuildPath = (arch) =>
-  path.join(
-    `node_modules`,
-    `@notesnook`,
-    `crypto`,
-    `node_modules`,
-    `@notesnook`,
-    `sodium`,
-    `node_modules`,
-    `sodium-native`,
-    `prebuilds`,
-    `${os.platform()}-${arch}`
-  );
+const packageJson = JSON.parse(
+  readFileSync(path.join(__dirname, "..", "package.json"), "utf-8")
+);
+
 const webAppPath = path.resolve(path.join(__dirname, "..", "..", "web"));
 
 await fs.rm("./build/", { force: true, recursive: true });
 
 if (args.rebuild || !existsSync(path.join(webAppPath, "build"))) {
-  await exec(`cd ${webAppPath} && npm run build:desktop`);
+  await exec(
+    "yarn nx build:desktop @notesnook/web",
+    path.join(__dirname, "..", "..", "..")
+  );
 }
 
+// temporary until there's support for prebuilt binaries for linux ARM
+if (os.platform() === "linux") await patchBetterSQLite3();
+
+// if (os.platform() === "win32")
+//   await exec(
+//     `npx prebuildify --arch=arm64 --strip -t electron@${packageJson.devDependencies.electron}`,
+//     path.join(__dirname, "..", "node_modules", "sodium-native")
+//   );
+
 await fs.cp(path.join(webAppPath, "build"), "build", {
   recursive: true,
   force: true
 });
 
 if (args.variant === "mas") {
-  await exec(`npm run bundle:mas`);
+  await exec(`yarn run bundle:mas`);
 } else {
-  await exec(`npm run bundle`);
+  await exec(`yarn run bundle`);
 }
 
-await exec(`npx tsc`);
-
-if (existsSync(sodiumNativePrebuildPath("x64"))) {
-  console.log("copying sodium-native-x64");
-  await fs.cp(
-    sodiumNativePrebuildPath("x64"),
-    path.join("build", "prebuilds", `${process.platform}-x64`),
-    {
-      recursive: true,
-      force: true
-    }
-  );
-}
-
-if (existsSync(sodiumNativePrebuildPath("ia32"))) {
-  console.log("copying sodium-native-ia32");
-  await fs.cp(
-    sodiumNativePrebuildPath("ia32"),
-    path.join("build", "prebuilds", `${process.platform}-ia32`),
-    {
-      recursive: true,
-      force: true
-    }
-  );
-}
-
-if (existsSync(sodiumNativePrebuildPath("arm64"))) {
-  console.log("copying sodium-native-arm64");
-  await fs.cp(
-    sodiumNativePrebuildPath("arm64"),
-    path.join("build", "prebuilds", `${process.platform}-arm64`),
-    {
-      recursive: true,
-      force: true
-    }
-  );
-}
+await exec(`yarn tsc`);
 
 if (args.run) {
-  await exec(`npx electron-builder --dir --x64`);
+  await exec(`yarn electron-builder --dir --x64`);
   if (process.platform === "win32") {
     await exec(`.\\output\\win-unpacked\\Notesnook.exe`);
   } else if (process.platform === "darwin") {
-    await exec(`./output/darwin-unpacked/Notesnook`);
+    await exec(`./output/mac/Notesnook.app/Contents/MacOS/Notesnook`);
   } else {
     await exec(`./output/linux-unpacked/Notesnook`);
   }
 }
 
-async function exec(cmd) {
+async function exec(cmd, cwd) {
   return childProcess.execSync(cmd, {
-    env: process.env,
-    stdio: "inherit"
+    env: { ...process.env, NOTESNOOK_STAGING: true },
+    stdio: "inherit",
+    cwd: cwd || process.cwd()
   });
 }
+
+async function patchBetterSQLite3() {
+  const jsonPath = path.join(
+    __dirname,
+    "..",
+    "node_modules",
+    "better-sqlite3-multiple-ciphers",
+    "package.json"
+  );
+  const json = JSON.parse(await readFile(jsonPath, "utf-8"));
+
+  json.version = "11.2.2";
+  json.homepage = "https://github.com/thecodrr/better-sqlite3-multiple-ciphers";
+  json.repository.url =
+    "git://github.com/thecodrr/better-sqlite3-multiple-ciphers.git";
+
+  await writeFile(jsonPath, JSON.stringify(json));
+}

apps/desktop/scripts/dev.mjs

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

apps/desktop/scripts/sign.js

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

apps/desktop/src/api/index.ts

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

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

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { initTRPC } from "@trpc/server";
 import { z } from "zod";
-import { dialog, 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";
@@ -31,6 +31,8 @@ import { observable } from "@trpc/server/observable";
 import { AssetManager } from "../utils/asset-manager";
 import { isFlatpak } from "../utils";
 import { setupDesktopIntegration } from "../utils/desktop-integration";
+import { rm } from "fs/promises";
+import { disableCustomDns, enableCustomDns } from "../utils/custom-dns";
 
 const t = initTRPC.create();
 
@@ -54,6 +56,23 @@ export const osIntegrationRouter = t.router({
     config.zoomFactor = factor;
   }),
 
+  customDns: t.procedure.query(() => config.customDns),
+  setCustomDns: t.procedure
+    .input(z.boolean().optional())
+    .mutation(({ input: customDns }) => {
+      if (customDns) enableCustomDns();
+      else disableCustomDns();
+      config.customDns = !!customDns;
+    }),
+
+  proxyRules: t.procedure.query(() => config.proxyRules),
+  setProxyRules: t.procedure
+    .input(z.string().optional())
+    .mutation(({ input: proxyRules }) => {
+      globalThis.window?.webContents.session.setProxy({ proxyRules });
+      config.proxyRules = proxyRules || "";
+    }),
+
   privacyMode: t.procedure.query(() => config.privacyMode),
   setPrivacyMode: t.procedure
     .input(z.object({ enabled: z.boolean() }))
@@ -126,10 +145,17 @@ export const osIntegrationRouter = t.router({
     .input(z.object({ filePath: z.string() }))
     .query(({ input }) => {
       const { filePath } = input;
-      if (!filePath) return;
       return resolvePath(filePath);
     }),
 
+  deleteFile: t.procedure.input(z.string()).query(async ({ input }) => {
+    await rm(input);
+  }),
+
+  restart: t.procedure.query(() => {
+    app.relaunch();
+    app.exit();
+  }),
   showNotification: t.procedure
     .input(NotificationOptions)
     .query(({ input }) => {
@@ -158,16 +184,45 @@ export const osIntegrationRouter = t.router({
     }),
   bringToFront: t.procedure.query(() => bringToFront()),
   changeTheme: t.procedure
-    .input(Theme)
-    .mutation(({ input }) => setTheme(input)),
+    .input(
+      z.object({
+        theme: Theme,
+        windowControlsIconColor: z.string().optional(),
+        backgroundColor: z.string().optional()
+      })
+    )
+    .mutation(
+      ({ input: { theme, windowControlsIconColor, backgroundColor } }) => {
+        if (windowControlsIconColor) {
+          config.windowControlsIconColor = windowControlsIconColor;
+          if (
+            process.platform === "win32" &&
+            !config.desktopSettings.nativeTitlebar
+          )
+            globalThis.window?.setTitleBarOverlay({
+              symbolColor: windowControlsIconColor
+            });
+        }
+
+        if (backgroundColor) {
+          config.backgroundColor = backgroundColor;
+        }
+
+        setTheme(theme);
+      }
+    ),
 
   onThemeChanged: t.procedure.subscription(() =>
     observable<"dark" | "light">((emit) => {
-      nativeTheme.on("updated", () => {
+      const updated = () => {
         if (getTheme() === "system") {
           emit.next(nativeTheme.shouldUseDarkColors ? "dark" : "light");
         }
-      });
+      };
+      nativeTheme.on("updated", updated);
+      return () => {
+        nativeTheme.off("updated", updated);
+      };
     })
   )
 });

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

@@ -0,0 +1,44 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import { safeStorage } from "electron";
+import { initTRPC } from "@trpc/server";
+import { z } from "zod";
+
+const t = initTRPC.create();
+
+export const safeStorageRouter = t.router({
+  isEncryptionAvailable: t.procedure.query(() => {
+    return (
+      !process.env.PORTABLE_EXECUTABLE_DIR &&
+      safeStorage.isEncryptionAvailable()
+    );
+  }),
+  /**
+   * Takes a string and returns an encrypted base64 string
+   */
+  encryptString: t.procedure.input(z.string()).query(({ input }) => {
+    return safeStorage.encryptString(input).toString("base64");
+  }),
+  /**
+   * Takes an encrypted base64 string and returns a string
+   */
+  decryptString: t.procedure.input(z.string()).query(({ input }) => {
+    return safeStorage.decryptString(Buffer.from(input, "base64"));
+  })
+});

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

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

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

@@ -0,0 +1,143 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import type { Database, Statement } from "better-sqlite3-multiple-ciphers";
+import type { QueryResult } from "@streetwriters/kysely";
+
+type SQLiteCompatibleType =
+  | number
+  | string
+  | Uint8Array
+  | Array<number>
+  | bigint
+  | null;
+
+export class SQLite {
+  sqlite?: Database;
+  initialized = false;
+  preparedStatements: Map<string, Statement<unknown[]>> = new Map();
+  retryCounter: Record<string, number> = {};
+  constructor() {
+    console.log("new sqlite worker");
+  }
+
+  async open(filePath: string) {
+    if (this.sqlite) {
+      console.error("Database is already initialized");
+      return;
+    }
+
+    this.sqlite = require("better-sqlite3-multiple-ciphers")(
+      filePath
+    ).unsafeMode(true);
+  }
+
+  /**
+   * Wrapper function for preparing SQL statements with caching
+   * to avoid unnecessary computations.
+   */
+  async prepare(sql: string): Promise<Statement | undefined> {
+    if (!this.sqlite) throw new Error("Database is not initialized.");
+    try {
+      const cached = this.preparedStatements.get(sql);
+      if (cached !== undefined) return cached;
+
+      const prepared = this.sqlite.prepare(sql);
+      if (!prepared) return;
+
+      this.preparedStatements.set(sql, prepared);
+
+      // reset retry count on success
+      this.retryCounter[sql] = 0;
+      return prepared;
+    } catch (ex) {
+      console.error(ex);
+
+      // statement prepare process can be flaky so retry at least 5 times
+      // before giving up.
+      if (this.retryCounter[sql] < 5) {
+        this.retryCounter[sql] = (this.retryCounter[sql] || 0) + 1;
+        console.warn("Failed to prepare statement. Retrying:", sql);
+        return this.prepare(sql);
+      } else this.retryCounter[sql] = 0;
+
+      if (ex instanceof Error) ex.message += ` (query: ${sql})`;
+      throw ex;
+    }
+  }
+
+  async exec<R>(
+    sql: string,
+    parameters: SQLiteCompatibleType[] = []
+  ): Promise<QueryResult<R>> {
+    const prepared = await this.prepare(sql);
+    if (!prepared) return { rows: [] };
+    try {
+      if (prepared.reader) {
+        return {
+          rows: prepared.all(parameters) as R[]
+        };
+      } else {
+        const { changes, lastInsertRowid } = prepared.run(parameters);
+        const numAffectedRows =
+          changes !== undefined && changes !== null && !isNaN(changes)
+            ? BigInt(changes)
+            : undefined;
+        return {
+          numAffectedRows,
+          insertId:
+            lastInsertRowid !== undefined && lastInsertRowid !== null
+              ? typeof lastInsertRowid === "bigint"
+                ? lastInsertRowid
+                : BigInt(lastInsertRowid)
+              : undefined,
+          rows: [] as R[]
+        };
+      }
+    } catch (e) {
+      if (e instanceof Error) e.message += ` (query: ${sql})`;
+      throw e;
+    }
+  }
+
+  async run<R>(
+    sql: string,
+    parameters?: SQLiteCompatibleType[]
+  ): Promise<QueryResult<R>> {
+    if (!this.sqlite) throw new Error("No database is not opened.");
+    return await this.exec(sql, parameters);
+  }
+
+  async close() {
+    if (!this.sqlite) return;
+
+    this.preparedStatements.clear();
+    this.sqlite.close();
+    this.sqlite = undefined;
+  }
+
+  async delete(filePath: string) {
+    await this.close();
+    await require("fs/promises").rm(filePath, {
+      force: true,
+      maxRetries: 5,
+      retryDelay: 500
+    });
+  }
+}

apps/desktop/src/api/updater.ts

@@ -28,16 +28,38 @@ type UpdateInfo = { version: string };
 type Progress = { percent: number };
 
 const t = initTRPC.create();
+let cancellationToken: CancellationToken | undefined = undefined;
+let downloadTimeout: NodeJS.Timeout | undefined = undefined;
 
 export const updaterRouter = t.router({
   autoUpdates: t.procedure.query(() => config.automaticUpdates),
   install: t.procedure.query(() => autoUpdater.quitAndInstall()),
   download: t.procedure.query(async () => {
-    const cancellationToken = new CancellationToken();
-    await autoUpdater.downloadUpdate(cancellationToken);
+    if (cancellationToken) return;
+    clearTimeout(downloadTimeout);
+    await new Promise<string[]>((resolve, reject) => {
+      downloadTimeout = setTimeout(async () => {
+        cancellationToken = new CancellationToken();
+        autoUpdater.isUpdaterActive();
+        await autoUpdater
+          .downloadUpdate(cancellationToken)
+          .then(resolve)
+          .catch(reject)
+          .finally(() => (cancellationToken = undefined));
+      }, 1000);
+    });
   }),
   check: t.procedure.query(async () => {
-    await autoUpdater.checkForUpdates();
+    if (cancellationToken) return;
+    clearTimeout(downloadTimeout);
+    await new Promise<void>((resolve) => {
+      downloadTimeout = setTimeout(async () => {
+        await autoUpdater
+          .checkForUpdates()
+          .catch(console.error)
+          .finally(resolve);
+      }, 1000);
+    });
   }),
 
   toggleAutoUpdates: t.procedure
@@ -57,7 +79,18 @@ export const updaterRouter = t.router({
     "update-not-available"
   ),
   onAvailable: createSubscription<"update-available", UpdateInfo>(
-    "update-available"
+    "update-available",
+    () => {
+      if (!config.automaticUpdates) return false;
+      autoUpdater.emit("download-progress", {
+        bytesPerSecond: 0,
+        delta: 0,
+        percent: 0,
+        total: 100,
+        transferred: 0
+      });
+      return true;
+    }
   ),
   onError: createSubscription("error")
 });
@@ -65,12 +98,14 @@ export const updaterRouter = t.router({
 function createSubscription<
   TName extends keyof AppUpdaterEvents,
   TReturnType = Parameters<AppUpdaterEvents[TName]>[0]
->(eventName: TName) {
+>(eventName: TName, handler?: (args: TReturnType) => boolean) {
   return t.procedure.subscription(() => {
     return observable<TReturnType>((emit) => {
       const listener: AppUpdaterEvents[TName] = (...args: any[]) => {
+        if (handler?.(args[0])) return;
         emit.next(args[0]);
       };
+      autoUpdater.removeAllListeners(eventName);
       autoUpdater.addListener(eventName, listener);
       return () => {
         autoUpdater.removeListener(eventName, listener);

apps/desktop/src/api/window.ts

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

apps/desktop/src/index.ts

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

apps/desktop/src/main.ts

@@ -35,6 +35,21 @@ import path from "path";
 import { bringToFront } from "./utils/bring-to-front";
 import { bridge } from "./api/bridge";
 import { setupDesktopIntegration } from "./utils/desktop-integration";
+import { disableCustomDns, enableCustomDns } from "./utils/custom-dns";
+import { Messages, setI18nGlobal } from "@notesnook/intl";
+import { i18n } from "@lingui/core";
+
+const locale =
+  process.env.NODE_ENV === "development"
+    ? import("@notesnook/intl/locales/$pseudo-LOCALE.json")
+    : import("@notesnook/intl/locales/$en.json");
+locale.then(({ default: locale }) => {
+  i18n.load({
+    en: locale.messages as unknown as Messages
+  });
+  i18n.activate("en");
+});
+setI18nGlobal(i18n);
 
 // only run a single instance
 if (!MAC_APP_STORE && !app.requestSingleInstanceLock()) {
@@ -82,10 +97,28 @@ async function createWindow() {
       size: 512,
       format: process.platform === "win32" ? "ico" : "png"
     }),
+
+    ...(config.desktopSettings.nativeTitlebar
+      ? {}
+      : {
+          titleBarStyle: "hidden",
+          frame: process.platform === "win32" || process.platform === "darwin",
+          titleBarOverlay: {
+            height: 37,
+            color: "#00000000",
+            symbolColor: config.windowControlsIconColor
+          },
+          trafficLightPosition: {
+            x: 16,
+            y: 12
+          }
+        }),
+
     webPreferences: {
       zoomFactor: config.zoomFactor,
       nodeIntegration: true,
       contextIsolation: false,
+      nodeIntegrationInWorker: true,
       spellcheck: config.isSpellCheckerEnabled,
       preload: __dirname + "/preload.js"
     }
@@ -112,6 +145,7 @@ async function createWindow() {
   mainWindow.webContents.session.setSpellCheckerDictionaryDownloadURL(
     "http://dictionaries.notesnook.com/"
   );
+  mainWindow.webContents.session.setProxy({ proxyRules: config.proxyRules });
 
   mainWindow.once("closed", () => {
     globalThis.window = null;
@@ -121,7 +155,7 @@ async function createWindow() {
   setupJumplist();
 
   if (isDevelopment())
-    mainWindow.webContents.openDevTools({ mode: "right", activate: true });
+    mainWindow.webContents.openDevTools({ mode: "bottom", activate: true });
 
   mainWindow.webContents.setWindowOpenHandler((details) => {
     shell.openExternal(details.url);
@@ -137,6 +171,9 @@ async function createWindow() {
 app.once("ready", async () => {
   console.info("App ready. Opening window.");
 
+  if (config.customDns) enableCustomDns();
+  else disableCustomDns();
+
   if (!isDevelopment()) registerProtocol();
   await createWindow();
   configureAutoUpdater();

apps/desktop/src/preload.ts

@@ -20,14 +20,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { ELECTRON_TRPC_CHANNEL } from "electron-trpc/main";
 import { type RendererGlobalElectronTRPC } from "electron-trpc/src/types";
-import type { NNCrypto } from "@notesnook/crypto";
+// import type { NNCrypto } from "@notesnook/crypto";
 import { ipcRenderer } from "electron";
 import { platform } from "os";
 
 declare global {
   var os: () => "mas" | ReturnType<typeof platform>;
   var electronTRPC: RendererGlobalElectronTRPC;
-  var NativeNNCrypto: (new () => NNCrypto) | undefined;
+  // var NativeNNCrypto: (new () => NNCrypto) | undefined;
 }
 
 process.once("loaded", async () => {
@@ -40,11 +40,5 @@ process.once("loaded", async () => {
   globalThis.electronTRPC = electronTRPC;
 });
 
-globalThis.NativeNNCrypto =
-  process.platform === "win32" &&
-  process.arch !== "x64" &&
-  process.arch !== "ia32"
-    ? undefined
-    : require("@notesnook/crypto").NNCrypto;
-
+// globalThis.NativeNNCrypto = require("@notesnook/crypto").NNCrypto;
 globalThis.os = () => (MAC_APP_STORE ? "mas" : platform());

apps/desktop/src/utils/asset-manager.ts

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { NativeImage, nativeImage } from "electron";
 import path from "path";
 import { isDevelopment } from "./index";
-import { parse, ParsedImage } from "icojs";
+import { ParsedImage, parseICO } from "icojs";
 import { getSystemTheme } from "./theme";
 import { readFile } from "fs/promises";
 
@@ -71,7 +71,7 @@ export class AssetManager {
           `${icon}${prefix}.ico`
         );
         const icoBuffer = await readFile(icoPath);
-        const images = await parse(icoBuffer, "image/png");
+        const images = await parseICO(icoBuffer, "image/png");
         ALL_ICONS.push({ id: icon, images, prefix });
       }
     }

apps/desktop/src/utils/autolaunch.ts

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

apps/desktop/src/utils/autoupdater.ts

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

apps/desktop/src/utils/config.ts

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

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

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

apps/desktop/src/utils/menu.ts

@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { strings } from "@notesnook/intl";
 import { Menu, MenuItem, clipboard, shell } from "electron";
 
 function setupMenu() {
@@ -40,7 +41,7 @@ function setupMenu() {
     if (params.misspelledWord) {
       menu.append(
         new MenuItem({
-          label: "Add to dictionary",
+          label: strings.addToDictionary(),
           click: () =>
             globalThis.window?.webContents.session.addWordToSpellCheckerDictionary(
               params.misspelledWord
@@ -59,7 +60,7 @@ function setupMenu() {
     if (params.linkURL.length) {
       menu.append(
         new MenuItem({
-          label: "Open in browser",
+          label: strings.openInBrowser(),
           click: () => shell.openExternal(params.linkURL)
         })
       );
@@ -68,7 +69,7 @@ function setupMenu() {
     if (params.isEditable) {
       menu.append(
         new MenuItem({
-          label: "Undo",
+          label: strings.undo(),
           role: "undo",
           enabled: params.isEditable,
           accelerator: "CommandOrControl+Z"
@@ -77,7 +78,7 @@ function setupMenu() {
 
       menu.append(
         new MenuItem({
-          label: "Redo",
+          label: strings.redo(),
           role: "redo",
           enabled: params.isEditable,
           accelerator: "CommandOrControl+Y"
@@ -94,7 +95,7 @@ function setupMenu() {
     if (params.isEditable)
       menu.append(
         new MenuItem({
-          label: "Cut",
+          label: strings.cut(),
           role: "cut",
           enabled: params.selectionText.length > 0,
           accelerator: "CommandOrControl+X"
@@ -104,7 +105,7 @@ function setupMenu() {
     if (params.linkURL?.length) {
       menu.append(
         new MenuItem({
-          label: "Copy link",
+          label: strings.copyLink(),
           click() {
             clipboard.writeText(params.linkURL);
           }
@@ -113,7 +114,7 @@ function setupMenu() {
 
       menu.append(
         new MenuItem({
-          label: "Copy link text",
+          label: strings.copyLinkText(),
           click() {
             clipboard.writeText(params.linkText);
           }
@@ -124,17 +125,28 @@ function setupMenu() {
     if (params.selectionText.length) {
       menu.append(
         new MenuItem({
-          label: "Copy",
+          label: strings.copy(),
           role: "copy",
           accelerator: "CommandOrControl+C"
         })
       );
     }
 
+    if (params.mediaType === "image")
+      menu.append(
+        new MenuItem({
+          id: "copy-image",
+          label: strings.copyImage(),
+          click() {
+            globalThis.window?.webContents.copyImageAt(params.x, params.y);
+          }
+        })
+      );
+
     if (params.isEditable)
       menu.append(
         new MenuItem({
-          label: "Paste",
+          label: strings.paste(),
           role: "pasteAndMatchStyle",
           enabled: clipboard.readText("clipboard").length > 0,
           accelerator: "CommandOrControl+V"

apps/desktop/src/utils/protocol.ts

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

apps/desktop/src/utils/theme.ts

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

apps/mobile/.gitignore

@@ -38,7 +38,7 @@ DerivedData
 *.ipa
 *.xcuserstate
 *.hprof
-ios/.xcode.env.local
+**/.xcode.env.local
 # Android/IntelliJ
 #
 rn-build-deps/

apps/mobile/app/app.tsx

@@ -16,7 +16,8 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import "@azure/core-asynciterator-polyfill";
+import { i18n } from "@lingui/core";
+import { I18nProvider } from "@lingui/react";
 import {
   THEME_COMPATIBILITY_VERSION,
   useThemeEngineStore
@@ -41,34 +42,32 @@ import { useUserStore } from "./stores/use-user-store";
 I18nManager.allowRTL(false);
 I18nManager.forceRTL(false);
 I18nManager.swapLeftAndRightInRTL(false);
+const { appLockEnabled, appLockMode } = SettingsService.get();
+if (appLockEnabled || appLockMode !== "none") {
+  useUserStore.getState().lockApp(true);
+}
 
-SettingsService.checkOrientation();
 const App = () => {
-  const init = useAppEvents();
+  useAppEvents();
+  //@ts-ignore
+  globalThis["IS_MAIN_APP_RUNNING"] = true;
   useEffect(() => {
-    let { appLockMode } = SettingsService.get();
-    if (appLockMode && appLockMode !== "none") {
-      useUserStore.getState().lockApp(true);
-    }
-    globalThis["IS_MAIN_APP_RUNNING"] = true;
-    init();
+    SettingsService.onFirstLaunch();
     setTimeout(async () => {
-      SettingsService.onFirstLaunch();
       await Notifications.get();
       if (SettingsService.get().notifNotes) {
         Notifications.pinQuickNote(true);
       }
       TipManager.init();
     }, 100);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
   return (
     <View
       style={{
         height: "100%",
-        width: "100%"
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center"
       }}
     >
       <View
@@ -101,10 +100,10 @@ const App = () => {
 let currTheme =
   useThemeStore.getState().colorScheme === "dark"
     ? SettingsService.getProperty("darkTheme")
-    : SettingsService.getProperty("lightTheme");
+    : SettingsService.getProperty("lighTheme");
 useThemeEngineStore.getState().setTheme(currTheme);
 
-export const withTheme = (Element) => {
+export const withTheme = (Element: () => JSX.Element) => {
   return function AppWithThemeProvider() {
     const [colorScheme, darkTheme, lightTheme] = useThemeStore((state) => [
       state.colorScheme,
@@ -143,7 +142,11 @@ export const withTheme = (Element) => {
       currTheme = nextTheme;
     }
 
-    return <Element />;
+    return (
+      <I18nProvider i18n={i18n}>
+        <Element />
+      </I18nProvider>
+    );
   };
 };
 

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

@@ -1,156 +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 { Platform } from "react-native";
-import { MMKV } from "../database/mmkv";
-import { useSettingStore } from "../../stores/use-setting-store";
-
-const WEBSITE_ID = "3c6890ce-8410-49d5-8831-15fb2eb28a21";
-const baseUrl = "https://analytics.streetwriters.co/api/collect";
-
-const UA =
-  Platform.OS === "ios"
-    ? "Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1"
-    : `
-Mozilla/5.0 (Linux; Android 8.0.0; SM-G960F Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.84 Mobile Safari/537.36`;
-
-/**
- *
- * @param {Routes} route
- * @param {Routes[]} conditions
- * @returns
- */
-async function canUpdateAnalytics(route, conditions = []) {
-  if (!useSettingStore?.getState()?.settings?.telemetry) return false;
-  let eventsList = MMKV.getString("notesnookUserEvents");
-
-  if (eventsList) {
-    eventsList = JSON.parse(eventsList);
-  }
-
-  if (eventsList && eventsList[route]) {
-    console.log("analytics: event already sent", route);
-    return false;
-  }
-  if (route !== "/welcome") {
-    for (let cond of conditions) {
-      if (!eventsList || !eventsList[cond]) {
-        console.log("analytics: conditions not met for event", route, cond);
-        return false;
-      }
-    }
-  }
-  console.log("analytics: will send event", route);
-  return true;
-}
-
-async function saveAnalytics(route, value = true) {
-  let eventsList = MMKV.getString("notesnookUserEvents");
-  if (eventsList) {
-    eventsList = JSON.parse(eventsList);
-  } else {
-    eventsList = {};
-  }
-  eventsList[route] = value;
-  MMKV.setString("notesnookUserEvents", JSON.stringify(eventsList));
-}
-
-/**
- *@typedef {"/welcome" | "/home" | "/signup" | "/first-note" | "/account-created" | "/pro-sheet" | "/pro-plans" | "/iap-native" | "/pro-screen" | "/editor" | "/editor-toolbar" | "/properties" | "/sidemenu"} Routes
- * @param {Routes} prevRoute
- * @param {Routes} route
- * @param {Routes[]} conditions
- * @param {boolean} once
- * @returns
- */
-
-async function pageView(
-  route,
-  prevRoute = "",
-  conditions = ["/welcome"],
-  once = true
-) {
-  if (__DEV__) return;
-  if (!(await canUpdateAnalytics(route, conditions)) && once) return;
-  let body = {
-    payload: {
-      website: WEBSITE_ID,
-      url: `notesnook-${Platform.OS}${prevRoute}${route}`,
-      referrer: `https://notesnook.com/notesnook-${Platform.OS}${prevRoute}`,
-      hostname: `notesnook-${Platform.OS}`,
-      language: "en-US",
-      screen: "1920x1080"
-    },
-    type: "pageview"
-  };
-
-  try {
-    let response = await fetch(baseUrl, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "User-Agent": UA
-      },
-      body: JSON.stringify(body)
-    });
-    console.log("analytics: event sent", route);
-    await saveAnalytics(route);
-    return await response.text();
-  } catch (e) {
-    console.log(e);
-  }
-}
-
-async function sendEvent(type, value, once = true) {
-  if (__DEV__) return;
-  if (!(await canUpdateAnalytics(type)) && once) return;
-  let body = {
-    payload: {
-      website: WEBSITE_ID,
-      url: "/",
-      event_type: type,
-      event_value: value,
-      hostname: "notesnook-android-app",
-      language: "en-US",
-      screen: "1920x1080"
-    },
-    type: "event"
-  };
-
-  try {
-    let response = await fetch(baseUrl, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "User-Agent": UA
-      },
-      body: JSON.stringify(body)
-    });
-    console.log(response.status);
-    return await response.text();
-  } catch (e) {
-    console.log(e);
-  }
-}
-
-export default {
-  sendEvent,
-  pageView,
-  saveAnalytics
-};

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

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

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

@@ -16,48 +16,70 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
+import "./logger";
 import { database } from "@notesnook/common";
-import { logger as dbLogger } from "@notesnook/core/dist/logger";
+import { logger as dbLogger } from "@notesnook/core";
 import { Platform } from "react-native";
 import * as Gzip from "react-native-gzip";
 import EventSource from "../../utils/sse/even-source-ios";
 import AndroidEventSource from "../../utils/sse/event-source";
+import {
+  SqliteAdapter,
+  SqliteIntrospector,
+  SqliteQueryCompiler
+} from "@streetwriters/kysely";
 import filesystem from "../filesystem";
-import "./logger";
 import Storage from "./storage";
+import { RNSqliteDriver } from "./sqlite.kysely";
+import { getDatabaseKey } from "./encryption";
+import SettingsService from "../../services/settings";
+import { strings } from "@notesnook/intl";
 
-database.host(
-  __DEV__
-    ? {
-        API_HOST: "https://api.notesnook.com",
-        AUTH_HOST: "https://auth.streetwriters.co",
-        SSE_HOST: "https://events.streetwriters.co",
-        SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
-        ISSUES_HOST: "https://issues.streetwriters.co"
-        // API_HOST: "http://192.168.43.108:5264",
-        // AUTH_HOST: "http://192.168.43.108:8264",
-        // SSE_HOST: "http://192.168.43.108:7264",
-        // SUBSCRIPTIONS_HOST: "http://192.168.43.108:9264",
-        // ISSUES_HOST: "http://192.168.43.108:2624"
-      }
-    : {
-        API_HOST: "https://api.notesnook.com",
-        AUTH_HOST: "https://auth.streetwriters.co",
-        SSE_HOST: "https://events.streetwriters.co",
-        SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
-        ISSUES_HOST: "https://issues.streetwriters.co"
-      }
-);
+export async function setupDatabase(password) {
+  const key = await getDatabaseKey(password);
+  if (!key) throw new Error(strings.databaseSetupFailed());
 
-database.setup(
-  Storage,
-  Platform.OS === "ios" ? EventSource : AndroidEventSource,
-  filesystem,
-  {
-    compress: Gzip.deflate,
-    decompress: Gzip.inflate
-  }
-);
+  console.log("Opening database with key:", !!key);
+
+  database.host({
+    API_HOST: "https://api.notesnook.com",
+    AUTH_HOST: "https://auth.streetwriters.co",
+    SSE_HOST: "https://events.streetwriters.co",
+    SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
+    ISSUES_HOST: "https://issues.streetwriters.co",
+    ...(SettingsService.getProperty("serverUrls") || {})
+  });
+
+  database.setup({
+    storage: Storage,
+    eventsource: Platform.OS === "ios" ? EventSource : AndroidEventSource,
+    fs: filesystem,
+    compressor: {
+      compress: Gzip.deflate,
+      decompress: Gzip.inflate
+    },
+    batchSize: 100,
+    sqliteOptions: {
+      dialect: (name) => ({
+        createDriver: () => {
+          return new RNSqliteDriver({ async: true, dbName: name });
+        },
+        createAdapter: () => new SqliteAdapter(),
+        createIntrospector: (db) => new SqliteIntrospector(db),
+        createQueryCompiler: () => new SqliteQueryCompiler()
+      }),
+      tempStore: "memory",
+      journalMode: Platform.OS === "ios" ? "DELETE" : "WAL",
+      password: key
+    }
+  });
+}
 
 export const db = database;
-export const DatabaseLogger = dbLogger;
+let DatabaseLogger = dbLogger.scope(Platform.OS);
+
+const setLogger = () => {
+  DatabaseLogger = dbLogger.scope(Platform.OS);
+};
+
+export { DatabaseLogger, setLogger };

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

@@ -16,14 +16,34 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { initalize } from "@notesnook/core/dist/logger";
-import { MMKVLoader } from "react-native-mmkv-storage";
-import { KV } from "./storage";
 
-const LoggerStorage = new MMKVLoader()
-  .withInstanceID("notesnook_logs")
-  .initialize();
+import { initialize } from "@notesnook/core";
+import {
+  SqliteAdapter,
+  SqliteIntrospector,
+  SqliteQueryCompiler
+} from "@streetwriters/kysely";
+import { Platform } from "react-native";
+import { setLogger } from ".";
+import { RNSqliteDriver } from "./sqlite.kysely";
 
-initalize(new KV(LoggerStorage));
+let loggerLoaded = false;
+const initializeLogger = async () => {
+  if (loggerLoaded) return;
+  await initialize({
+    dialect: (name) => ({
+      createDriver: () => {
+        return new RNSqliteDriver({ async: true, dbName: name });
+      },
+      createAdapter: () => new SqliteAdapter(),
+      createIntrospector: (db) => new SqliteIntrospector(db),
+      createQueryCompiler: () => new SqliteQueryCompiler()
+    }),
+    tempStore: "memory",
+    journalMode: Platform.OS === "ios" ? "DELETE" : "WAL"
+  });
+  setLogger();
+  loggerLoaded = true;
+};
 
-export { LoggerStorage };
+export { initializeLogger };

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

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

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

@@ -21,15 +21,15 @@ import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import {
   decrypt,
+  decryptMulti,
   deriveCryptoKey,
   encrypt,
+  encryptMulti,
   generateCryptoKey,
   getCryptoKey,
   getRandomBytes,
   hash,
-  removeCryptoKey,
-  decryptMulti,
-  encryptMulti
+  removeCryptoKey
 } from "./encryption";
 import { MMKV } from "./mmkv";
 
@@ -91,7 +91,8 @@ export class KV {
   }
 
   async removeMulti(keys) {
-    return this.storage.removeItems(...keys);
+    if (!keys) return true;
+    return this.storage.removeItems(keys);
   }
 
   async clear() {

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

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

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

@@ -18,24 +18,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import Sodium from "@ammarahmed/react-native-sodium";
-import {
-  getFileNameWithExtension,
-  isImage,
-  isDocument
-} from "@notesnook/core/dist/utils/filename";
+import { getFileNameWithExtension } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
 import React from "react";
 import { Platform } from "react-native";
+import RNFetchBlob from "react-native-blob-util";
 import * as ScopedStorage from "react-native-scoped-storage";
 import { subscribe, zip } from "react-native-zip-archive";
-import RNFetchBlob from "react-native-blob-util";
 import { ShareComponent } from "../../components/sheets/export-notes/share";
-import { ToastEvent, presentSheet } from "../../services/event-manager";
+import { ToastManager, presentSheet } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { db } from "../database";
-import Storage from "../database/storage";
-import { cacheDir, copyFileAsync, releasePermissions } from "./utils";
-import { createCacheDir, exists } from "./io";
 import { IOS_APPGROUPID } from "../../utils/constants";
+import { DatabaseLogger, db } from "../database";
+import Storage from "../database/storage";
+import { createCacheDir, exists } from "./io";
+import { cacheDir, copyFileAsync, releasePermissions } from "./utils";
 
 export const FileDownloadStatus = {
   Success: 1,
@@ -46,27 +43,22 @@ export const FileDownloadStatus = {
  * Download all user's attachments
  * @returns
  */
-export function downloadAllAttachments() {
-  const attachments = db.attachments.all;
+export async function downloadAllAttachments() {
+  const attachments = await db.attachments.all.ids();
   return downloadAttachments(attachments);
 }
 
 /**
  * Downloads provided attachments to a .zip file
  * on user's device.
- * @param attachments
+ * @param {string[]} attachments
  * @param onProgress
  * @returns
  */
-export async function downloadAttachments(
-  attachments,
-  onProgress,
-  canceled,
-  groupId
-) {
+export async function downloadAttachments(attachments) {
   await createCacheDir();
   if (!attachments || !attachments.length) return;
-  const result = new Map();
+  const groupId = `download-all-${Date.now()}`;
 
   let outputFolder;
   if (Platform.OS === "android") {
@@ -84,95 +76,123 @@ export async function downloadAttachments(
     Platform.OS === "ios"
       ? `${outputFolder}/notesnook-attachments-${Date.now()}.zip`
       : `${cacheDir}/notesnook-attachments.zip`;
-  if (await RNFetchBlob.fs.exists(zipSourceFolder))
+  if (await RNFetchBlob.fs.exists(zipSourceFolder)) {
     await RNFetchBlob.fs.unlink(zipSourceFolder);
+  }
+
   await RNFetchBlob.fs.mkdir(zipSourceFolder);
 
+  const isCancelled = () => {
+    if (useAttachmentStore.getState().downloading[groupId]?.canceled) {
+      RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
+      useAttachmentStore.getState().setDownloading({
+        groupId,
+        current: 0,
+        total: 0,
+        success: false,
+        message: strings.network.dowloadCancelled(),
+        canceled: true
+      });
+      return true;
+    }
+  };
+
   for (let i = 0; i < attachments.length; i++) {
-    let attachment = attachments[i];
-    const hash = attachment.metadata.hash;
+    if (isCancelled()) return;
+    let attachment = await db.attachments.attachment(attachments[i]);
+    const hash = attachment.hash;
     try {
-      if (canceled.current) {
-        RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
-        return;
-      }
-      onProgress?.(
-        i + 1 / attachments.length,
-        `Downloading attachments (${i + 1}/${
-          attachments.length
-        })... Please wait`
-      );
+      useAttachmentStore.getState().setDownloading({
+        groupId: groupId,
+        current: i + 1,
+        total: attachments.length,
+        filename: attachment.hash
+      });
       // Download to cache
       let uri = await downloadAttachment(hash, false, {
         silent: true,
         cache: true,
         groupId: groupId
       });
-      if (canceled.current) {
-        RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
-        return;
-      }
-      if (!uri) throw new Error("Failed to download file");
+
+      if (isCancelled()) return;
+
+      if (!uri) throw new Error(strings.failedToDownloadFile());
       // Move file to the source folder we will zip eventually and rename the file to it's actual name.
-      const filePath = `${zipSourceFolder}/${attachment.metadata.filename}`;
+      const filePath = `${zipSourceFolder}/${attachment.filename}`;
       await RNFetchBlob.fs.mv(`${cacheDir}/${uri}`, filePath);
-      result.set(hash, {
-        filename: attachment.metadata.filename,
-        status: FileDownloadStatus.Success
-      });
     } catch (e) {
-      result.set(hash, {
-        filename: attachment.metadata.filename,
-        status: FileDownloadStatus.Fail,
-        reason: e
-      });
-      console.log("Error downloading attachment", e);
+      DatabaseLogger.error(e);
     }
   }
-  if (canceled.current) {
-    RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
-    return;
-  }
-  if (result?.size) {
-    let sub;
-    try {
-      onProgress?.(0, `Zipping... Please wait`);
-      // If all goes well, zip the notesnook-attachments folder in cache.
 
-      sub = subscribe(({ progress }) => {
-        onProgress(
-          progress,
-          `Saving zip file (${(progress * 100).toFixed(1)}%)... Please wait`
-        );
+  useAttachmentStore.getState().setDownloading({
+    groupId: groupId,
+    current: 0,
+    total: 0,
+    success: true
+  });
+
+  if (isCancelled()) return;
+
+  let sub;
+  try {
+    useAttachmentStore.getState().setDownloading({
+      current: 0,
+      total: 1,
+      message: `${strings.savingZipFile()}... ${strings.pleaseWait()}`,
+      groupId
+    });
+    // If all goes well, zip the notesnook-attachments folder in cache.
+
+    sub = subscribe(({ progress }) => {
+      useAttachmentStore.getState().setDownloading({
+        groupId,
+        current: progress,
+        total: 1,
+        message: `${strings.savingZipFile()} (${(progress * 100).toFixed(
+          1
+        )}%)... ${strings.pleaseWait()}`
       });
-      await zip(zipSourceFolder, zipOutputFile);
-      sub?.remove();
-      onProgress(1, `Saving zip file... Please wait`);
-      if (Platform.OS === "android") {
-        // Move the zip to user selected directory.
-        const file = await ScopedStorage.createFile(
-          outputFolder,
-          `notesnook-attachments-${Date.now()}.zip`,
-          "application/zip"
-        );
-        await copyFileAsync(`file://${zipOutputFile}`, file.uri);
-      }
+    });
+    await zip(zipSourceFolder, zipOutputFile);
+    sub?.remove();
 
-      onProgress?.(1, `Done`);
-      releasePermissions(outputFolder);
-    } catch (e) {
-      releasePermissions(outputFolder);
-      sub?.remove();
-      console.log("Error zipping attachments", e);
-    }
-    // Remove source & zip file from cache.
-    RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
     if (Platform.OS === "android") {
-      RNFetchBlob.fs.unlink(zipOutputFile).catch(console.log);
+      // Move the zip to user selected directory.
+      const file = await ScopedStorage.createFile(
+        outputFolder,
+        `notesnook-attachments-${Date.now()}.zip`,
+        "application/zip"
+      );
+      await copyFileAsync(`file://${zipOutputFile}`, file.uri);
     }
-  }
 
-  return result;
+    useAttachmentStore.getState().setDownloading({
+      current: 0,
+      total: 0,
+      message: undefined,
+      success: true,
+      groupId
+    });
+    releasePermissions(outputFolder);
+  } catch (e) {
+    useAttachmentStore.getState().setDownloading({
+      current: 0,
+      total: 0,
+      message: undefined,
+      success: false,
+      groupId
+    });
+    releasePermissions(outputFolder);
+    sub?.remove();
+    ToastManager.error(e, "Error zipping attachments");
+  }
+  // Remove source & zip file from cache.
+  RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
+  if (Platform.OS === "android") {
+    RNFetchBlob.fs.unlink(zipOutputFile).catch(console.log);
+  }
 }
 
 export default async function downloadAttachment(
@@ -189,9 +209,9 @@ export default async function downloadAttachment(
 ) {
   await createCacheDir();
 
-  let attachment = db.attachments.attachment(hash);
+  let attachment = await db.attachments.attachment(hash);
   if (!attachment) {
-    console.log("attachment not found");
+    DatabaseLogger.log("Attachment not found");
     return;
   }
 
@@ -206,47 +226,46 @@ export default async function downloadAttachment(
   }
 
   try {
-    console.log(
-      "starting download attachment",
-      attachment.metadata.hash,
-      options.groupId
-    );
-    await db.fs.downloadFile(
-      options.groupId || attachment.metadata.hash,
-      attachment.metadata.hash
-    );
-
-    if (!(await exists(attachment.metadata.hash))) {
+    await db
+      .fs()
+      .downloadFile(
+        options.groupId || attachment.hash,
+        attachment.hash,
+        attachment.chunkSize
+      );
+    if (!(await exists(attachment.hash))) {
+      DatabaseLogger.log("Attachment does not exist after download.");
       return;
     }
 
     if (options.base64 || options.text) {
+      DatabaseLogger.log(`Starting to decrypt... hash: ${attachment.hash}`);
       return await db.attachments.read(
-        attachment.metadata.hash,
+        attachment.hash,
         options.base64 ? "base64" : "text"
       );
     }
 
     let filename = getFileNameWithExtension(
-      attachment.metadata.filename,
-      attachment.metadata.type
+      attachment.filename,
+      attachment.mimeType
     );
 
     let key = await db.attachments.decryptKey(attachment.key);
+
     let info = {
       iv: attachment.iv,
       salt: attachment.salt,
-      length: attachment.length,
+      length: attachment.size,
       alg: attachment.alg,
-      hash: attachment.metadata.hash,
-      hashType: attachment.metadata.hashType,
-      mime: attachment.metadata.type,
+      hash: attachment.hash,
+      hashType: attachment.hashType,
+      mime: attachment.mimeType,
       fileName: options.cache ? undefined : filename,
       uri: options.cache ? undefined : folder.uri,
       chunkSize: attachment.chunkSize,
       appGroupId: IOS_APPGROUPID
     };
-
     let fileUri = await Sodium.decryptFile(
       key,
       info,
@@ -254,48 +273,38 @@ export default async function downloadAttachment(
     );
 
     if (!options.silent) {
-      ToastEvent.show({
-        heading: "Download successful",
-        message: filename + " downloaded",
+      ToastManager.show({
+        heading: strings.network.downloadSuccess(),
+        message: strings.network.fileDownloaded(filename),
         type: "success"
       });
     }
 
-    if (
-      attachment.dateUploaded &&
-      !isImage(attachment.metadata?.type) &&
-      !isDocument(attachment.metadata?.type)
-    ) {
-      RNFetchBlob.fs
-        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.metadata.hash}`)
-        .catch(console.log);
-    }
     if (Platform.OS === "ios" && !options.cache) {
       fileUri = folder.uri + `/${filename}`;
     }
     if (!options.silent) {
       presentSheet({
-        title: "File downloaded",
-        paragraph: `${filename} saved to ${
-          Platform.OS === "android"
-            ? "selected path"
-            : "File Manager/Notesnook/downloads"
-        }`,
+        title: strings.network.fileDownloaded(),
+        paragraph: strings.fileSaved(filename, Platform.OS),
         icon: "download",
-        context: global ? null : attachment.metadata.hash,
+        context: global ? null : attachment.hash,
         component: <ShareComponent uri={fileUri} name={filename} padding={12} />
       });
     }
 
     return fileUri;
   } catch (e) {
-    console.log("download attachment error: ", e);
     if (attachment.dateUploaded) {
       RNFetchBlob.fs
-        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.metadata.hash}`)
+        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}`)
+        .catch(console.log);
+      RNFetchBlob.fs
+        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}_dcache`)
         .catch(console.log);
     }
-    useAttachmentStore.getState().remove(attachment.metadata.hash);
+    DatabaseLogger.error(e);
+    useAttachmentStore.getState().remove(attachment.hash);
     if (options.throwError) {
       throw e;
     }

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

@@ -17,100 +17,152 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import hosts from "@notesnook/core/dist/utils/constants";
+import { strings } from "@notesnook/intl";
 import NetInfo from "@react-native-community/netinfo";
 import RNFetchBlob from "react-native-blob-util";
-import { ToastEvent } from "../../services/event-manager";
+import { ToastManager } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { db } from "../database";
-import { cacheDir, fileCheck } from "./utils";
+import { DatabaseLogger, db } from "../database";
 import { createCacheDir, exists } from "./io";
+import { ABYTES, cacheDir, getUploadedFileSize, parseS3Error } from "./utils";
 
-export async function downloadFile(filename, data, cancelToken) {
-  if (!data) return false;
+export async function downloadFile(filename, requestOptions, cancelToken) {
+  if (!requestOptions) {
+    DatabaseLogger.log(
+      `Error downloading file: ${filename}, reason: No requestOptions`
+    );
+    return false;
+  }
 
+  DatabaseLogger.log(`Downloading ${filename}`);
   await createCacheDir();
-
-  let { url, headers } = data;
-  let path = `${cacheDir}/${filename}`;
-
+  let { url, headers, chunkSize } = requestOptions;
+  let tempFilePath = `${cacheDir}/${filename}_temp`;
+  let originalFilePath = `${cacheDir}/${filename}`;
   try {
     if (await exists(filename)) {
+      DatabaseLogger.log(`File Exists already: ${filename}`);
       return true;
     }
 
+    const attachment = await db.attachments.attachment(filename);
+    const size = await getUploadedFileSize(filename);
+
+    if (size === -1) {
+      const error = `${strings.fileVerificationFailed()} (File hash: ${filename})`;
+      throw new Error(error);
+    }
+
+    if (size === 0) {
+      const error = `${strings.fileLengthError()} (File hash: ${filename})`;
+      await db.attachments.markAsFailed(attachment.id, error);
+      throw new Error(error);
+    }
+
+    const totalChunks = Math.ceil(size / chunkSize);
+    const decryptedLength = size - totalChunks * ABYTES;
+
+    if (attachment && attachment.size !== decryptedLength) {
+      const error = `${strings.fileLengthMismatch(
+        attachment.size,
+        decryptedLength
+      )} (File hash: ${filename})`;
+      await db.attachments.markAsFailed(attachment.id, error);
+      throw new Error(error);
+    }
+
     let res = await fetch(url, {
       method: "GET",
       headers
     });
-    if (!res.ok)
-      throw new Error(`${res.status}: Unable to resolve download url`);
+
+    if (!res.ok) {
+      DatabaseLogger.log(
+        `Error downloading file: ${filename}, ${res.status}, ${res.statusText}, reason: Unable to resolve download url`
+      );
+      throw new Error(
+        `${res.status}: ${strings.failedToResolvedDownloadUrl()}`
+      );
+    }
+
     const downloadUrl = await res.text();
 
-    if (!downloadUrl) throw new Error("Unable to resolve download url");
-    let totalSize = 0;
-    console.log("Download starting");
+    if (!downloadUrl) {
+      DatabaseLogger.log(
+        `Error downloading file: ${filename}, reason: Unable to resolve download url`
+      );
+      throw new Error(strings.failedToResolvedDownloadUrl());
+    }
+
+    DatabaseLogger.log(`Download starting: ${filename}`);
     let request = RNFetchBlob.config({
-      path: path,
-      IOSBackgroundTask: true
+      path: tempFilePath,
+      IOSBackgroundTask: true,
+      overwrite: true
     })
       .fetch("GET", downloadUrl, null)
-      .progress((recieved, total) => {
+      .progress(async (recieved, total) => {
         useAttachmentStore
           .getState()
           .setProgress(0, total, filename, recieved, "download");
-        totalSize = total;
-        console.log("downloading: ", recieved, total);
+
+        DatabaseLogger.log(`Downloading: ${filename}, ${recieved}/${total}`);
       });
 
     cancelToken.cancel = () => {
       useAttachmentStore.getState().remove(filename);
       request.cancel();
+      RNFetchBlob.fs.unlink(tempFilePath).catch(console.log);
+      DatabaseLogger.log(`Download cancelled: ${filename}`);
     };
+
     let response = await request;
-    await fileCheck(response, totalSize);
+    console.log(response.info().headers);
+
+    const contentType =
+      response.info().headers?.["content-type"] ||
+      response.info().headers?.["Content-Type"];
+
+    if (contentType === "application/xml") {
+      const error = parseS3Error(await response.text());
+      throw new Error(`[${error.Code}] ${error.Message}`);
+    }
+
     let status = response.info().status;
     useAttachmentStore.getState().remove(filename);
+
+    if (exists(originalFilePath)) {
+      await RNFetchBlob.fs.unlink(originalFilePath).catch(console.log);
+    }
+
+    await RNFetchBlob.fs.mv(tempFilePath, originalFilePath);
+
+    if (!(await exists(filename))) {
+      throw new Error("File size mismatch");
+    }
+
     return status >= 200 && status < 300;
   } catch (e) {
-    if (e.message !== "canceled") {
-      ToastEvent.show({
-        heading: "Error downloading file",
+    if (e.message !== "canceled" && !e.message.includes("NoSuchKey")) {
+      const toast = {
+        heading: strings.downloadError(),
         message: e.message,
         type: "error",
         context: "global"
-      });
-      ToastEvent.show({
-        heading: "Error downloading file",
-        message: e.message,
-        type: "error",
-        context: "local"
-      });
+      };
+      ToastManager.show(toast);
+      toast.context = "local";
+      ToastManager.show(toast);
     }
 
     useAttachmentStore.getState().remove(filename);
-    RNFetchBlob.fs.unlink(path).catch(console.log);
-    console.log("Download file error:", e, url, headers);
-    return false;
-  }
-}
-
-export async function getUploadedFileSize(hash) {
-  try {
-    const url = `${hosts.API_HOST}/s3?name=${hash}`;
-    const token = await db.user.tokenManager.getAccessToken();
-
-    const attachmentInfo = await fetch(url, {
-      method: "HEAD",
-      headers: { Authorization: `Bearer ${token}` }
+    RNFetchBlob.fs.unlink(tempFilePath).catch(console.log);
+    RNFetchBlob.fs.unlink(originalFilePath).catch(console.log);
+    DatabaseLogger.error(e, {
+      url,
+      headers
     });
-
-    const contentLength = parseInt(
-      attachmentInfo.headers?.get("content-length")
-    );
-    return isNaN(contentLength) ? 0 : contentLength;
-  } catch (e) {
-    return 0;
+    return false;
   }
 }
 
@@ -118,13 +170,19 @@ export async function checkAttachment(hash) {
   const internetState = await NetInfo.fetch();
   const isInternetReachable =
     internetState.isConnected && internetState.isInternetReachable;
-  if (!isInternetReachable) return { success: true };
-  const attachment = db.attachments.attachment(hash);
+  if (!isInternetReachable) return;
+  const attachment = await db.attachments.attachment(hash);
   if (!attachment) return { failed: "Attachment not found." };
 
   try {
     const size = await getUploadedFileSize(hash);
-    if (size <= 0) return { failed: "File length is 0." };
+    console.log("File Size", size);
+    if (size === -1) return { success: true };
+
+    if (size === 0)
+      return {
+        failed: `File length is 0. Please upload this file again from the attachment manager. (File hash: ${hash})`
+      };
   } catch (e) {
     return { failed: e?.message };
   }

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

@@ -17,17 +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 { checkAttachment, downloadFile, getUploadedFileSize } from "./download";
+import { checkAttachment, downloadFile } from "./download";
 import {
   clearFileStorage,
   deleteFile,
   exists,
   readEncrypted,
   writeEncryptedBase64,
-  hashBase64
+  hashBase64,
+  clearCache,
+  deleteCacheFileByName,
+  deleteCacheFileByPath,
+  bulkExists,
+  getCacheSize
 } from "./io";
 import { uploadFile } from "./upload";
-import { cancelable } from "./utils";
+import { cancelable, getUploadedFileSize } from "./utils";
 
 export default {
   readEncrypted,
@@ -39,5 +44,10 @@ export default {
   exists,
   clearFileStorage,
   getUploadedFileSize,
-  checkAttachment
+  checkAttachment,
+  clearCache,
+  deleteCacheFileByName,
+  deleteCacheFileByPath,
+  bulkExists,
+  getCacheSize
 };

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

@@ -17,17 +17,17 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Platform } from "react-native";
 import Sodium from "@ammarahmed/react-native-sodium";
+import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
-import { cacheDir, cacheDirOld, getRandomId } from "./utils";
-import { db } from "../database";
-import { compressToBase64 } from "./compress";
+import { eSendEvent } from "../../services/event-manager";
 import { IOS_APPGROUPID } from "../../utils/constants";
+import { DatabaseLogger, db } from "../database";
+import { ABYTES, cacheDir, cacheDirOld, getRandomId } from "./utils";
 
 export async function readEncrypted(filename, key, cipherData) {
   await migrateFilesFromCache();
-  console.log("Read encrypted file...");
+  DatabaseLogger.log("Read encrypted file...");
   let path = `${cacheDir}/${filename}`;
 
   try {
@@ -35,14 +35,6 @@ export async function readEncrypted(filename, key, cipherData) {
       return false;
     }
 
-    const attachment = db.attachments.attachment(filename);
-    const isPng = !attachment.metadata.type
-      ? false
-      : /(png)/g.test(attachment?.metadata.type);
-    const isJpeg = !attachment.metadata.type
-      ? false
-      : /(jpeg|jpg)/g.test(attachment?.metadata.type);
-
     let output = await Sodium.decryptFile(
       key,
       {
@@ -50,25 +42,15 @@ export async function readEncrypted(filename, key, cipherData) {
         hash: filename,
         appGroupId: IOS_APPGROUPID
       },
-      cipherData.outputType === "base64"
-        ? isPng || isJpeg
-          ? "cache"
-          : "base64"
-        : "text"
+      cipherData.outputType === "base64" ? "base64" : "text"
     );
-    console.log("file decrypted...");
-    if (cipherData.outputType === "base64" && (isPng || isJpeg)) {
-      const dCachePath = `${cacheDir}/${output}`;
-      output = await compressToBase64(
-        `file://${dCachePath}`,
-        isPng ? "PNG" : "JPEG"
-      );
-    }
+
+    DatabaseLogger.log("File decrypted...");
 
     return output;
   } catch (e) {
     RNFetchBlob.fs.unlink(path).catch(console.log);
-    console.log("readEncrypted", e);
+    DatabaseLogger.error(e);
     return false;
   }
 }
@@ -85,7 +67,7 @@ export async function hashBase64(data) {
   };
 }
 
-export async function writeEncryptedBase64({ data, key }) {
+export async function writeEncryptedBase64(data, key) {
   await createCacheDir();
   let filepath = cacheDir + `/${getRandomId("imagecache_")}`;
   await RNFetchBlob.fs.writeFile(filepath, data, "base64");
@@ -95,6 +77,8 @@ export async function writeEncryptedBase64({ data, key }) {
   });
   RNFetchBlob.fs.unlink(filepath).catch(console.log);
   console.log("encrypted file output: ", output);
+  output.size = output.length;
+  delete output.length;
   return {
     ...output,
     alg: "xcha-stream"
@@ -142,9 +126,13 @@ export async function clearFileStorage() {
 }
 
 export async function createCacheDir() {
-  if (!(await RNFetchBlob.fs.exists(cacheDir))) {
-    await RNFetchBlob.fs.mkdir(cacheDir);
-    console.log("Cache directory created");
+  try {
+    if (!(await RNFetchBlob.fs.exists(cacheDir))) {
+      await RNFetchBlob.fs.mkdir(cacheDir);
+      DatabaseLogger.log("Cache directory created");
+    }
+  } catch (e) {
+    DatabaseLogger.error(e);
   }
 }
 
@@ -175,7 +163,35 @@ export async function migrateFilesFromCache() {
   }
 }
 
-const ABYTES = 17;
+export async function clearCache() {
+  await RNFetchBlob.fs.unlink(cacheDir).catch(console.log);
+  await createCacheDir();
+  eSendEvent("cache-cleared");
+}
+
+export async function deleteCacheFileByPath(path) {
+  await RNFetchBlob.fs.unlink(path).catch(console.log);
+}
+
+export async function deleteCacheFileByName(name) {
+  const iosAppGroup =
+    Platform.OS === "ios"
+      ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+      : null;
+  const appGroupPath = `${iosAppGroup}/${name}`;
+  await RNFetchBlob.fs.unlink(appGroupPath).catch(console.log);
+  await RNFetchBlob.fs.unlink(`${cacheDir}/${name}`).catch(console.log);
+}
+
+export async function deleteDCacheFiles() {
+  const files = await RNFetchBlob.fs.ls(cacheDir);
+  for (const file of files) {
+    if (file.includes("_dcache")) {
+      await RNFetchBlob.fs.unlink(file).catch(console.log);
+    }
+  }
+}
+
 export async function exists(filename) {
   let path = `${cacheDir}/${filename}`;
 
@@ -194,16 +210,19 @@ export async function exists(filename) {
   }
 
   if (exists || existsInAppGroup) {
-    const attachment = db.attachments.attachment(filename);
-    const totalChunks = Math.ceil(attachment.length / attachment.chunkSize);
+    const attachment = await db.attachments.attachment(filename);
+    const totalChunks = Math.ceil(attachment.size / attachment.chunkSize);
     const totalAbytes = totalChunks * ABYTES;
-    const expectedFileSize = attachment.length + totalAbytes;
+    const expectedFileSize = attachment.size + totalAbytes;
 
     const stat = await RNFetchBlob.fs.stat(
       existsInAppGroup ? appGroupPath : path
     );
 
     if (stat.size !== expectedFileSize) {
+      DatabaseLogger.log(
+        `File size mismatch: ${filename}, expected: ${expectedFileSize}, actual: ${stat.size}`
+      );
       RNFetchBlob.fs
         .unlink(existsInAppGroup ? appGroupPath : path)
         .catch(console.log);
@@ -214,3 +233,37 @@ export async function exists(filename) {
   }
   return exists;
 }
+
+export async function bulkExists(files) {
+  try {
+    await createCacheDir();
+    const cacheFiles = await RNFetchBlob.fs.ls(cacheDir);
+    let missingFiles = files.filter((file) => !cacheFiles.includes(file));
+
+    if (Platform.OS === "ios") {
+      const iosAppGroup =
+        Platform.OS === "ios"
+          ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+          : null;
+      const appGroupFiles = await RNFetchBlob.fs.ls(iosAppGroup);
+      missingFiles = missingFiles.filter(
+        (file) => !appGroupFiles.includes(file)
+      );
+    }
+    return missingFiles;
+  } catch (e) {
+    DatabaseLogger.error(e);
+    return [];
+  }
+}
+
+export async function getCacheSize() {
+  await createCacheDir();
+  const stat = await RNFetchBlob.fs.lstat(`file://` + cacheDir);
+  let total = 0;
+  console.log("Total files", stat.length);
+  stat.forEach((s) => {
+    total += parseInt(s.size);
+  });
+  return total;
+}

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

@@ -17,43 +17,68 @@ 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 RNFetchBlob from "react-native-blob-util";
-import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { DatabaseLogger, db } from "../database";
-import { cacheDir } from "./utils";
-import { isImage, isDocument } from "@notesnook/core/dist/utils/filename";
 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";
 import { IOS_APPGROUPID } from "../../utils/constants";
+import { DatabaseLogger, db } from "../database";
 import { createCacheDir } from "./io";
+import { cacheDir, checkUpload, getUploadedFileSize } from "./utils";
 
-export async function uploadFile(filename, data, cancelToken) {
-  if (!data) return false;
-  let { url, headers } = data;
+export async function uploadFile(filename, requestOptions, cancelToken) {
+  if (!requestOptions) return false;
+  let { url, headers } = requestOptions;
   await createCacheDir();
   DatabaseLogger.info(`Preparing to upload file: ${filename}`);
 
   try {
-    let res = await fetch(url, {
+    let filePath = `${cacheDir}/${filename}`;
+    let exists = await RNFetchBlob.fs.exists(filePath);
+    // Check for file in appGroupPath if it doesn't exist in cacheDir
+    if (!exists && Platform.OS === "ios") {
+      const iosAppGroup =
+        Platform.OS === "ios"
+          ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+          : null;
+      const appGroupPath = `${iosAppGroup}/${filename}`;
+      filePath = appGroupPath;
+      exists = await RNFetchBlob.fs.exists(filePath);
+    }
+
+    if (!exists) {
+      throw new Error(
+        `Trying to upload file at path ${filePath} that doest not exist.`
+      );
+    }
+
+    const fileSize = (await RNFetchBlob.fs.stat(filePath)).size;
+
+    let remoteFileSize = await getUploadedFileSize(filename);
+    if (remoteFileSize === -1) return false;
+    if (remoteFileSize > 0 && remoteFileSize === fileSize) {
+      DatabaseLogger.log(`File ${filename} is already uploaded.`);
+      return true;
+    }
+
+    let uploadUrlResponse = await fetch(url, {
       method: "PUT",
       headers
     });
-    if (!res.ok) throw new Error(`${res.status}: Unable to resolve upload url`);
-    const uploadUrl = await res.text();
-    if (!uploadUrl) throw new Error("Unable to resolve attachment upload url");
-    let uploadFilePath = `${cacheDir}/${filename}`;
 
-    const iosAppGroup =
-      Platform.OS === "ios"
-        ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
-        : null;
-    const appGroupPath = `${iosAppGroup}/${filename}`;
-    let exists = await RNFetchBlob.fs.exists(uploadFilePath);
-    if (!exists && Platform.OS === "ios") {
-      uploadFilePath = appGroupPath;
+    const uploadUrl = uploadUrlResponse.ok
+      ? await uploadUrlResponse.text()
+      : await uploadUrlResponse.json();
+
+    if (typeof uploadUrl !== "string") {
+      throw new Error(
+        uploadUrl.error || "Unable to resolve attachment upload url."
+      );
     }
+
     DatabaseLogger.info(`Starting upload: ${filename}`);
 
-    let request = RNFetchBlob.config({
+    let uploadRequest = RNFetchBlob.config({
       IOSBackgroundTask: !globalThis["IS_SHARE_EXTENSION"]
     })
       .fetch(
@@ -62,7 +87,7 @@ export async function uploadFile(filename, data, cancelToken) {
         {
           "content-type": ""
         },
-        RNFetchBlob.wrap(uploadFilePath)
+        RNFetchBlob.wrap(filePath)
       )
       .uploadProgress((sent, total) => {
         useAttachmentStore
@@ -75,40 +100,33 @@ export async function uploadFile(filename, data, cancelToken) {
 
     cancelToken.cancel = () => {
       useAttachmentStore.getState().remove(filename);
-      request.cancel();
+      uploadRequest.cancel();
     };
-    let response = await request;
 
-    let status = response.info().status;
-    let text = await response.text();
-    let result = status >= 200 && status < 300 && text.length === 0;
+    let uploadResponse = await uploadRequest;
+    let status = uploadResponse.info().status;
+    let uploaded = status >= 200 && status < 300;
+
     useAttachmentStore.getState().remove(filename);
-    if (result) {
-      DatabaseLogger.info(
-        `File upload status: ${filename}, ${status}, ${text}`
-      );
-      let attachment = db.attachments.attachment(filename);
-      if (!attachment) return result;
-      if (
-        !isImage(attachment.metadata.type) &&
-        !isDocument(attachment.metadata?.type)
-      ) {
-        RNFetchBlob.fs.unlink(`${cacheDir}/${filename}`).catch(console.log);
-      }
-    } else {
-      const fileInfo = await RNFetchBlob.fs.stat(uploadFilePath);
+
+    if (!uploaded) {
+      const fileInfo = await RNFetchBlob.fs.stat(filePath);
       throw new Error(
-        `${status}, ${text}, name: ${fileInfo.filename}, length: ${
+        `${status}, name: ${fileInfo.filename}, length: ${
           fileInfo.size
-        }, info: ${JSON.stringify(response.info())}`
+        }, info: ${JSON.stringify(uploadResponse.info())}`
       );
     }
-
-    return result;
+    const attachment = await db.attachments.attachment(filename);
+    await checkUpload(filename, requestOptions.chunkSize, attachment.size);
+    DatabaseLogger.info(`File upload status: ${filename}, ${status}`);
+    return uploaded;
   } catch (e) {
     useAttachmentStore.getState().remove(filename);
-    DatabaseLogger.info(`File upload error: ${filename}, ${e}`);
-    DatabaseLogger.error(e);
+    ToastManager.error(e, "File upload failed");
+    DatabaseLogger.error(e, "File upload failed", {
+      filename
+    });
     return false;
   }
 }

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

@@ -17,10 +17,13 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import * as ScopedStorage from "react-native-scoped-storage";
 import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
+import * as ScopedStorage from "react-native-scoped-storage";
+import { DatabaseLogger, db } from "../database";
+import { hosts } from "@notesnook/core";
 
+export const ABYTES = 17;
 export const cacheDirOld = RNFetchBlob.fs.dirs.CacheDir;
 
 export const cacheDir =
@@ -34,24 +37,36 @@ export function getRandomId(prefix) {
     .replace("0.", prefix || "");
 }
 
-export function extractValueFromXmlTag(code, xml) {
-  if (!xml.includes(code)) return `Unknown ${code}`;
-  return xml.slice(
-    xml.indexOf(`<${code}>`) + code.length + 2,
-    xml.indexOf(`</${code}>`)
-  );
-}
+/**
+ *
+ * @param {string | undefined} data
+ * @returns
+ */
+export function parseS3Error(data) {
+  const xml = typeof data === "string" ? data : null;
 
-export async function fileCheck(response, totalSize) {
-  if (totalSize < 1000) {
-    let text = await response.text();
-    if (text.startsWith("<?xml")) {
-      let errorJson = {
-        Code: extractValueFromXmlTag("Code", text),
-        Message: extractValueFromXmlTag("Message", text)
-      };
-      throw new Error(`${errorJson.Code}: ${errorJson.Message}`);
+  const error = {
+    Code: "UNKNOWN",
+    Message: xml
+  };
+
+  try {
+    if (!xml) return error;
+    const doc = new DOMParser().parseFromString(xml, "text/xml");
+
+    const ErrorElement = doc.getElementsByTagName("Error")[0];
+    if (!ErrorElement) return error;
+
+    for (const child of ErrorElement.children) {
+      if (
+        child.textContent &&
+        (child.tagName === "Code" || child.tagName === "Message")
+      )
+        error[child.tagName] = child.textContent;
     }
+    return error;
+  } catch (e) {
+    return error;
   }
 }
 
@@ -59,12 +74,11 @@ export function cancelable(operation) {
   const cancelToken = {
     cancel: () => {}
   };
-  return (filename, { url, headers }) => {
+  return (filename, requestOptions) => {
     return {
-      execute: () => operation(filename, { url, headers }, cancelToken),
+      execute: () => operation(filename, requestOptions, cancelToken),
       cancel: async () => {
         await cancelToken.cancel();
-        RNFetchBlob.fs.unlink(`${cacheDir}/${filename}`).catch(console.log);
       }
     };
   };
@@ -91,3 +105,36 @@ export async function releasePermissions(path) {
     }
   }
 }
+
+export async function getUploadedFileSize(hash) {
+  try {
+    const url = `${hosts.API_HOST}/s3?name=${hash}`;
+    const token = await db.tokenManager.getAccessToken();
+    const attachmentInfo = await fetch(url, {
+      method: "HEAD",
+      headers: { Authorization: `Bearer ${token}` }
+    });
+    const contentLength = parseInt(
+      attachmentInfo.headers?.get("content-length")
+    );
+    return isNaN(contentLength) ? 0 : contentLength;
+  } catch (e) {
+    DatabaseLogger.error(e);
+    return -1;
+  }
+}
+
+export async function checkUpload(filename, chunkSize, expectedSize) {
+  const size = await getUploadedFileSize(filename);
+  const totalChunks = Math.ceil(size / chunkSize);
+  const decryptedLength = size - totalChunks * ABYTES;
+  const error =
+    size === 0
+      ? `File size is 0.`
+      : size === -1
+      ? `File verification check failed.`
+      : expectedSize !== decryptedLength
+      ? `File size mismatch. Expected ${size} bytes but got ${decryptedLength} bytes.`
+      : undefined;
+  if (error) throw new Error(error);
+}

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

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

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

@@ -20,15 +20,13 @@ 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 { eSendEvent, presentSheet } from "../../services/event-manager";
-import Sync from "../../services/sync";
 import { useThemeColors } from "@notesnook/theme";
-import { eCloseAnnouncementDialog, eCloseSheet } from "../../utils/events";
+import { eSendEvent, presentSheet } from "../../services/event-manager";
+import { eCloseAnnouncementDialog } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { PricingPlans } from "../premium/pricing-plans";
 import SheetProvider from "../sheet-provider";
-import { Progress } from "../sheets/progress";
 import { Button } from "../ui/button";
 import { allowedOnPlatform, getStyle } from "./functions";
 
@@ -56,13 +54,6 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
           />
         )
       });
-    } else if (item.type === "force-sync") {
-      eSendEvent(eCloseSheet);
-      await sleep(300);
-      Progress.present();
-      Sync.run("global", true, true, () => {
-        eSendEvent(eCloseSheet);
-      });
     }
   };
   return (
@@ -103,7 +94,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 key={item.title}
                 title={item.title}
                 fontSize={SIZE.sm}
-                type="gray"
+                type="plain"
                 onPress={() => onPress(item)}
                 width={null}
                 height={30}
@@ -149,7 +140,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 key={item.title}
                 title={item.title}
                 fontSize={SIZE.xs}
-                type="gray"
+                type="plain"
                 onPress={() => onPress(item)}
                 width={null}
                 height={30}

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

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

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

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

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

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

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

@@ -17,67 +17,88 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { formatBytes } from "@notesnook/common";
+import { Attachment, Note, VirtualizedGrouping } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
 import Clipboard from "@react-native-clipboard/clipboard";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { RefObject, useEffect, useState } from "react";
 import { View } from "react-native";
+import { ActionSheetRef } from "react-native-actions-sheet";
 import { ScrollView } from "react-native-gesture-handler";
 import { db } from "../../common/database";
 import filesystem from "../../common/filesystem";
 import downloadAttachment from "../../common/filesystem/download-attachment";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
 import picker from "../../screens/editor/tiptap/picker";
+import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
+import { editorController } from "../../screens/editor/tiptap/utils";
 import {
+  ToastManager,
   eSendEvent,
-  presentSheet,
-  ToastEvent
+  presentSheet
 } from "../../services/event-manager";
 import PremiumService from "../../services/premium";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { useThemeColors } from "@notesnook/theme";
-import { eCloseAttachmentDialog, eCloseSheet } from "../../utils/events";
+import {
+  eCloseAttachmentDialog,
+  eCloseSheet,
+  eDBItemUpdate,
+  eOnLoadNote
+} from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
 import { openNote } from "../list-items/note/wrapper";
 import { DateMeta } from "../properties/date-meta";
+import SheetProvider from "../sheet-provider";
 import { Button } from "../ui/button";
 import { Notice } from "../ui/notice";
-import { PressableButton } from "../ui/pressable";
+import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { formatBytes } from "@notesnook/common";
+import { strings } from "@notesnook/intl";
 
-const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
+const Actions = ({
+  attachment,
+  close,
+  setAttachments,
+  fwdRef
+}: {
+  attachment: Attachment;
+  setAttachments: (attachments?: VirtualizedGrouping<Attachment>) => void;
+  close?: () => void;
+  fwdRef: RefObject<ActionSheetRef>;
+}) => {
   const { colors } = useThemeColors();
-  const contextId = attachment.metadata.hash;
-  const [filename, setFilename] = useState(attachment.metadata.filename);
+  const contextId = attachment.hash;
+  const [filename, setFilename] = useState(attachment.filename);
   const [currentProgress] = useAttachmentProgress(attachment);
-  const [failed, setFailed] = useState(attachment.failed);
-  const [notes, setNotes] = useState([]);
-  const [loading, setLoading] = useState({
-    name: null
-  });
+  const [failed, setFailed] = useState<string | undefined>(attachment.failed);
+  const [notes, setNotes] = useState<Note[]>([]);
+  const [loading, setLoading] = useState<{
+    name?: string;
+  }>({});
 
   const actions = [
     {
-      name: "Download",
+      name: strings.network.download(),
       onPress: async () => {
         if (currentProgress) {
-          await db.fs.cancel(attachment.metadata.hash);
-          useAttachmentStore.getState().remove(attachment.metadata.hash);
+          await db.fs().cancel(attachment.hash);
+          useAttachmentStore.getState().remove(attachment.hash);
         }
-        downloadAttachment(attachment.metadata.hash, false);
-        eSendEvent(eCloseSheet, contextId);
+        downloadAttachment(attachment.hash, false);
+        fwdRef.current?.hide();
       },
       icon: "download"
     },
     {
-      name: "Reupload",
+      name: strings.network.reupload(),
       onPress: async () => {
         if (!PremiumService.get()) {
-          ToastEvent.show({
-            heading: "Upgrade to pro",
+          ToastManager.show({
+            heading: strings.upgradeToPro(),
             type: "error",
             context: "local"
           });
@@ -85,33 +106,36 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
         }
         await picker.pick({
           reupload: true,
-          hash: attachment.metadata.hash,
+          hash: attachment.hash,
           context: contextId,
-          type: attachment.metadata.type
+          type: attachment.mimeType.startsWith("image") ? "image" : "file"
         });
       },
       icon: "upload"
     },
     {
-      name: "Run file check",
+      name: strings.fileCheck(),
       onPress: async () => {
         setLoading({
-          name: "Run file check"
+          name: strings.fileCheck()
         });
-        let res = await filesystem.checkAttachment(attachment.metadata.hash);
-        if (res.failed) {
-          db.attachments.markAsFailed(attachment.id, res.failed);
-          setFailed(res.failed);
-          ToastEvent.show({
-            heading: "File check failed with error: " + res.failed,
+        const result = await filesystem.checkAttachment(attachment.hash);
+        if (!result) return;
+
+        if (result.failed) {
+          db.attachments.markAsFailed(attachment.id, result.failed);
+          setFailed(result.failed);
+          ToastManager.show({
+            heading: strings.fileCheckFailed(result.failed),
             type: "error",
             context: "local"
           });
         } else {
-          setFailed(null);
-          db.attachments.markAsFailed(attachment.id, null);
-          ToastEvent.show({
-            heading: "File check passed",
+          setFailed(undefined);
+          db.attachments.markAsFailed(attachment.id);
+          eSendEvent(eDBItemUpdate, attachment.id);
+          ToastManager.show({
+            heading: strings.fileCheckPassed(),
             type: "success",
             context: "local"
           });
@@ -119,66 +143,71 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
 
         setAttachments();
         setLoading({
-          name: null
+          name: undefined
         });
       },
       icon: "file-check"
     },
     {
-      name: "Rename",
+      name: strings.rename(),
       onPress: () => {
         presentDialog({
-          context: contextId,
           input: true,
-          title: "Rename file",
-          paragraph: "Enter a new name for the file",
-          defaultValue: attachment.metadata.filename,
+          title: strings.renameFile(),
+          defaultValue: attachment.filename,
           positivePress: async (value) => {
             if (value && value.length > 0) {
               await db.attachments.add({
-                hash: attachment.metadata.hash,
+                hash: attachment.hash,
                 filename: value
               });
               setFilename(value);
               setAttachments();
+              eSendEvent(eDBItemUpdate, attachment.id);
             }
           },
-          positiveText: "Rename"
+          positiveText: strings.rename()
         });
       },
       icon: "form-textbox"
     },
     {
-      name: "Delete",
+      name: strings.delete(),
       onPress: async () => {
-        await db.attachments.remove(attachment.metadata.hash, false);
+        const relations = await db.relations.to(attachment, "note").get();
+        await db.attachments.remove(attachment.hash, false);
         setAttachments();
-        close();
+        eSendEvent(eDBItemUpdate, attachment.id);
+        relations
+          .map((relation) => relation.fromId)
+          .forEach(async (id) => {
+            const tab = useTabStore.getState().getTabForNote(id);
+            if (tab !== undefined) {
+              const isFocused = useTabStore.getState().currentTab === tab;
+              if (isFocused) {
+                eSendEvent(eOnLoadNote, {
+                  item: await db.notes.note(id),
+                  forced: true
+                });
+              } else {
+                editorController.current.commands.setLoading(true, tab);
+              }
+            }
+          });
+        close?.();
       },
       icon: "delete-outline"
     }
   ];
 
-  const getNotes = useCallback(() => {
-    let allNotes = db.notes.all;
-    let attachmentNotes = attachment.noteIds?.map((id) => {
-      let index = allNotes?.findIndex((note) => id === note.id);
-      if (index !== -1) {
-        return allNotes[index];
-      } else {
-        return {
-          type: "notfound",
-          title: `Note with id ${id} does not exist.`,
-          id: id
-        };
-      }
-    });
-    return attachmentNotes;
-  }, [attachment.noteIds]);
-
   useEffect(() => {
-    setNotes(getNotes());
-  }, [attachment, getNotes]);
+    db.relations
+      .to(attachment, "note")
+      .selector.items()
+      .then((items) => {
+        setNotes(items);
+      });
+  }, [attachment]);
 
   return (
     <ScrollView
@@ -189,12 +218,14 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
       style={{
         maxHeight: "100%"
       }}
+      keyboardShouldPersistTaps="never"
     >
       <Dialog context={contextId} />
+      <SheetProvider context={contextId} />
       <View
         style={{
           borderBottomWidth: 1,
-          borderBottomColor: colors.secondary.background,
+          borderBottomColor: colors.primary.border,
           marginBottom: notes && notes.length > 0 ? 0 : 12
         }}
       >
@@ -211,53 +242,36 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
           style={{
             flexDirection: "row",
             marginBottom: 10,
-            paddingHorizontal: 12
+            paddingHorizontal: 12,
+            marginTop: 6,
+            gap: 10
           }}
         >
-          <Paragraph
-            size={SIZE.xs}
-            style={{
-              marginRight: 10
-            }}
-            color={colors.secondary.paragraph}
-          >
-            {attachment.metadata.type}
+          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+            {attachment.mimeType}
           </Paragraph>
-          <Paragraph
-            style={{
-              marginRight: 10
-            }}
-            size={SIZE.xs}
-            color={colors.secondary.paragraph}
-          >
-            {formatBytes(attachment.length)}
+          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+            {formatBytes(attachment.size)}
           </Paragraph>
 
-          {attachment.noteIds ? (
-            <Paragraph
-              style={{
-                marginRight: 10
-              }}
-              size={SIZE.xs}
-              color={colors.secondary.paragraph}
-            >
-              {attachment.noteIds.length} note
-              {attachment.noteIds.length > 1 ? "s" : ""}
+          {notes.length ? (
+            <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+              {strings.notes(notes.length)}
             </Paragraph>
           ) : null}
           <Paragraph
             onPress={() => {
-              Clipboard.setString(attachment.metadata.hash);
-              ToastEvent.show({
+              Clipboard.setString(attachment.hash);
+              ToastManager.show({
                 type: "success",
-                heading: "Attachment hash copied",
+                heading: strings.hashCopied(),
                 context: "local"
               });
             }}
             size={SIZE.xs}
             color={colors.secondary.paragraph}
           >
-            {attachment.metadata.hash}
+            {attachment.hash}
           </Paragraph>
         </View>
 
@@ -268,7 +282,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
         <View
           style={{
             borderBottomWidth: 1,
-            borderBottomColor: colors.secondary.background,
+            borderBottomColor: colors.primary.border,
             marginBottom: 12,
             paddingVertical: 12
           }}
@@ -280,29 +294,19 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
               }}
               size={SIZE.sm}
             >
-              List of notes:
+              {strings.listOf()} {strings.dataTypesPlural.note()}:
             </Heading>
 
             {notes.map((item) => (
-              <PressableButton
+              <Pressable
                 onPress={async () => {
-                  if (item.type === "notfound") {
-                    ToastEvent.show({
-                      heading: "Note not found",
-                      message:
-                        "A note with the given id was not found. Maybe you have deleted the note or moved it to trash already.",
-                      type: "error",
-                      context: "local"
-                    });
-                    return;
-                  }
                   eSendEvent(eCloseSheet, contextId);
                   await sleep(150);
                   eSendEvent(eCloseAttachmentDialog);
                   await sleep(300);
-                  openNote(item, item.type === "trash");
+                  openNote(item, (item as any).type === "trash");
                 }}
-                customStyle={{
+                style={{
                   paddingVertical: 12,
                   alignItems: "flex-start",
 
@@ -311,7 +315,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
                 key={item.id}
               >
                 <Paragraph size={SIZE.xs}>{item.title}</Paragraph>
-              </PressableButton>
+              </Pressable>
             ))}
           </>
         </View>
@@ -321,17 +325,16 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
         <Button
           key={item.name}
           buttonType={{
-            text: item.on
-              ? colors.primary.accent
-              : item.name === "Delete" || item.name === "PermDelete"
-              ? colors.error.paragraph
-              : colors.primary.paragraph
+            text:
+              item.name === "Delete"
+                ? colors.error.paragraph
+                : colors.primary.paragraph
           }}
           onPress={item.onPress}
           title={item.name}
           icon={item.icon}
           loading={loading?.name === item.name}
-          type={item.on ? "shade" : "gray"}
+          type="plain"
           fontSize={SIZE.sm}
           style={{
             borderRadius: 0,
@@ -350,7 +353,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
         {failed ? (
           <Notice
             type="alert"
-            text={`File check failed with error: ${attachment.failed} Try reuploading the file to fix the issue.`}
+            text={strings.fileCheckFailed(failed)}
             size="small"
           />
         ) : null}
@@ -359,7 +362,11 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
   );
 };
 
-Actions.present = (attachment, set, context) => {
+Actions.present = (
+  attachment: Attachment,
+  set: (attachments?: VirtualizedGrouping<Attachment>) => void,
+  context?: string
+) => {
   presentSheet({
     context: context,
     component: (ref, close) => (

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

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

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

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

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

@@ -1,275 +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, { useRef, useState } from "react";
-import { Platform, View } from "react-native";
-import { db } from "../../common/database";
-import { downloadAttachments } from "../../common/filesystem/download-attachment";
-import { presentSheet } from "../../services/event-manager";
-import { Button } from "../ui/button";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import { ProgressBarComponent } from "../ui/svg/lazy";
-import { useThemeColors } from "@notesnook/theme";
-import { FlatList } from "react-native-actions-sheet";
-import { AttachmentItem } from "./attachment-item";
-
-const DownloadAttachments = ({ close, attachments, isNote, update }) => {
-  const { colors } = useThemeColors();
-  const [downloading, setDownloading] = useState(false);
-  const [progress, setProgress] = useState({
-    value: 0,
-    statusText: "Download started... Please wait"
-  });
-  const [result, setResult] = useState(new Map());
-  const canceled = useRef(false);
-  const groupId = useRef();
-
-  const onDownload = async () => {
-    update({
-      disableClosing: true
-    });
-    setDownloading(true);
-    canceled.current = false;
-    groupId.current = Date.now().toString();
-    const result = await downloadAttachments(
-      attachments,
-      (progress, statusText) => setProgress({ value: progress, statusText }),
-      canceled,
-      groupId.current
-    );
-    if (canceled.current) return;
-    setResult(result || new Map());
-    setDownloading(false);
-    update({
-      disableClosing: false
-    });
-  };
-
-  const cancel = async () => {
-    update({
-      disableClosing: false
-    });
-    canceled.current = true;
-    console.log(groupId.current, "canceling groupId downloads");
-    await db.fs.cancel(groupId.current);
-    setDownloading(false);
-    groupId.current = null;
-  };
-
-  const successResults = () => {
-    const results = [];
-    for (let [key, value] of result.entries()) {
-      if (value.status === 1) results.push(db.attachments.attachment(key));
-    }
-    return results;
-  };
-
-  const failedResults = () => {
-    const results = [];
-    for (let [key, value] of result.entries()) {
-      if (value.status === 0) results.push(db.attachments.attachment(key));
-    }
-    return results;
-  };
-
-  function getResultText() {
-    const downloadedAttachmentsCount =
-      attachments.length - failedResults().length;
-    if (downloadedAttachmentsCount === 0)
-      return "Failed to download all attachments";
-    return `Successfully downloaded ${downloadedAttachmentsCount}/${
-      attachments.length
-    } attachments as a zip file at ${
-      Platform.OS === "android" ? "the selected folder" : "Notesnook/downloads"
-    }`;
-  }
-
-  return (
-    <View
-      style={{
-        alignItems: "center",
-        width: "100%",
-        paddingVertical: 12,
-        paddingHorizontal: 12
-      }}
-    >
-      <Heading>
-        {downloading
-          ? "Downloading attachments"
-          : result?.size
-          ? "Downloaded attachments"
-          : "Download attachments"}
-      </Heading>
-
-      {downloading ? (
-        <Paragraph
-          style={{
-            textAlign: "center"
-          }}
-        >
-          {progress.statusText}
-        </Paragraph>
-      ) : result?.size ? (
-        <Paragraph
-          style={{
-            textAlign: "center"
-          }}
-        >
-          {getResultText()}
-        </Paragraph>
-      ) : (
-        <Paragraph
-          style={{
-            textAlign: "center"
-          }}
-        >
-          Are you sure you want to download all attachments
-          {isNote ? " of this note?" : "?"}
-        </Paragraph>
-      )}
-
-      {downloading ? (
-        <View
-          style={{
-            width: 200,
-            marginTop: 10
-          }}
-        >
-          <ProgressBarComponent
-            height={5}
-            width={null}
-            animated={true}
-            useNativeDriver
-            progress={progress.value ? progress.value / attachments.length : 0}
-            unfilledColor={colors.secondary.background}
-            color={colors.primary.accent}
-            borderWidth={0}
-          />
-        </View>
-      ) : null}
-
-      <FlatList
-        style={{
-          maxHeight: 300,
-          width: "100%",
-          minHeight: 60,
-          backgroundColor: colors.secondary.background,
-          borderRadius: 5,
-          marginVertical: 12
-        }}
-        data={downloading ? attachments : []}
-        ListEmptyComponent={
-          <View
-            style={{
-              width: "100%",
-              justifyContent: "center",
-              alignItems: "center",
-              height: 60
-            }}
-          >
-            <Paragraph color={colors.secondary.paragraph}>
-              No downloads in progress.
-            </Paragraph>
-          </View>
-        }
-        keyExtractor={(item) => item.id}
-        renderItem={({ item }) => {
-          return (
-            <AttachmentItem
-              attachment={item}
-              setAttachments={() => {}}
-              pressable={false}
-              hideWhenNotDownloading={true}
-            />
-          );
-        }}
-      />
-
-      {result?.size ? (
-        <Button
-          style={{
-            width: 250,
-            borderRadius: 100,
-            marginTop: 20
-          }}
-          onPress={close}
-          type="accent"
-          title="Done"
-        />
-      ) : !downloading ? (
-        <View
-          style={{
-            flexDirection: "row",
-            width: "100%",
-            marginTop: 20
-          }}
-        >
-          <Button
-            style={{
-              flex: 1,
-              borderRadius: 100,
-              marginRight: 5
-            }}
-            onPress={close}
-            type="grayBg"
-            title="No"
-          />
-          <Button
-            style={{
-              flex: 1,
-              borderRadius: 100,
-              marginLeft: 5
-            }}
-            onPress={onDownload}
-            type="accent"
-            title="Yes"
-          />
-        </View>
-      ) : (
-        <Button
-          style={{
-            width: 250,
-            borderRadius: 100,
-            marginTop: 20
-          }}
-          onPress={cancel}
-          type="error"
-          title="Cancel"
-        />
-      )}
-    </View>
-  );
-};
-
-DownloadAttachments.present = (context, attachments, isNote) => {
-  presentSheet({
-    context: context,
-    component: (ref, close, update) => (
-      <DownloadAttachments
-        close={close}
-        attachments={attachments}
-        isNote={isNote}
-        update={update}
-      />
-    )
-  });
-};
-
-export default DownloadAttachments;

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

@@ -1,333 +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, { useRef, useState } from "react";
-import { ActivityIndicator, ScrollView, View } from "react-native";
-
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { db } from "../../common/database";
-import filesystem from "../../common/filesystem";
-import { presentSheet } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
-import SheetProvider from "../sheet-provider";
-import { IconButton } from "../ui/icon-button";
-import Input from "../ui/input";
-import Seperator from "../ui/seperator";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import { AttachmentItem } from "./attachment-item";
-import DownloadAttachments from "./download-attachments";
-import { Button } from "../ui/button";
-import {
-  isAudio,
-  isDocument,
-  isImage,
-  isVideo
-} from "@notesnook/core/dist/utils/filename";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
-
-export const AttachmentDialog = ({ note }) => {
-  const { colors } = useThemeColors();
-  const { height } = useSettingStore((state) => state.dimensions);
-  const [attachments, setAttachments] = useState(
-    note
-      ? db.attachments.ofNote(note.id, "all")
-      : [...(db.attachments.all || [])]
-  );
-
-  const attachmentSearchValue = useRef();
-  const searchTimer = useRef();
-  const [loading, setLoading] = useState(false);
-  const [currentFilter, setCurrentFilter] = useState("all");
-
-  const onChangeText = (text) => {
-    const attachments = note
-      ? db.attachments.ofNote(note.id, "all")
-      : [...(db.attachments.all || [])];
-
-    attachmentSearchValue.current = text;
-    if (
-      !attachmentSearchValue.current ||
-      attachmentSearchValue.current === ""
-    ) {
-      setAttachments(filterAttachments(currentFilter));
-    }
-    clearTimeout(searchTimer.current);
-    searchTimer.current = setTimeout(() => {
-      let results = db.lookup.attachments(
-        attachments,
-        attachmentSearchValue.current
-      );
-      if (results.length === 0) return;
-
-      setAttachments(filterAttachments(currentFilter, results));
-    }, 300);
-  };
-
-  const renderItem = ({ item }) => (
-    <AttachmentItem
-      setAttachments={() => {
-        setAttachments(filterAttachments(currentFilter));
-      }}
-      attachment={item}
-      context="attachments-list"
-    />
-  );
-
-  const onCheck = async () => {
-    setLoading(true);
-    const checkedAttachments = [];
-    for (let attachment of attachments) {
-      let result = await filesystem.checkAttachment(attachment.metadata.hash);
-      if (result.failed) {
-        await db.attachments.markAsFailed(
-          attachment.metadata.hash,
-          result.failed
-        );
-      } else {
-        await db.attachments.markAsFailed(attachment.id, null);
-      }
-      checkedAttachments.push(
-        db.attachments.attachment(attachment.metadata.hash)
-      );
-      setAttachments([...checkedAttachments]);
-    }
-    setLoading(false);
-  };
-
-  const attachmentTypes = [
-    {
-      title: "All",
-      filterBy: "all"
-    },
-    {
-      title: "Images",
-      filterBy: "images"
-    },
-    {
-      title: "Documents",
-      filterBy: "documents"
-    },
-    {
-      title: "Video",
-      filterBy: "video"
-    },
-    {
-      title: "Audio",
-      filterBy: "audio"
-    }
-  ];
-
-  const filterAttachments = (type, _attachments) => {
-    const attachments =
-      _attachments || note
-        ? db.attachments.ofNote(note.id, "all")
-        : [...(db.attachments.all || [])];
-
-    switch (type) {
-      case "all":
-        return attachments;
-      case "images":
-        return attachments.filter((attachment) =>
-          isImage(attachment.metadata.type)
-        );
-      case "video":
-        return attachments.filter((attachment) =>
-          isVideo(attachment.metadata.type)
-        );
-      case "audio":
-        return attachments.filter((attachment) =>
-          isAudio(attachment.metadata.type)
-        );
-      case "documents":
-        return attachments.filter((attachment) =>
-          isDocument(attachment.metadata.type)
-        );
-    }
-  };
-
-  return (
-    <View
-      style={{
-        width: "100%",
-        alignSelf: "center",
-        paddingHorizontal: 12,
-        height: height * 0.85
-      }}
-    >
-      <SheetProvider context="attachments-list" />
-      <View
-        style={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center"
-        }}
-      >
-        <Heading>Attachments</Heading>
-
-        <View
-          style={{
-            flexDirection: "row"
-          }}
-        >
-          {loading ? (
-            <ActivityIndicator
-              style={{
-                height: 40,
-                width: 40,
-                marginRight: 10
-              }}
-              size={SIZE.lg}
-            />
-          ) : (
-            <IconButton
-              name="check-all"
-              customStyle={{
-                height: 40,
-                width: 40,
-                marginRight: 10
-              }}
-              color={colors.primary.paragraph}
-              size={SIZE.lg}
-              onPress={onCheck}
-            />
-          )}
-
-          <IconButton
-            name="download"
-            customStyle={{
-              height: 40,
-              width: 40
-            }}
-            color={colors.primary.paragraph}
-            onPress={() => {
-              DownloadAttachments.present(
-                "attachments-list",
-                attachments,
-                !!note
-              );
-            }}
-            size={SIZE.lg}
-          />
-        </View>
-      </View>
-
-      <Seperator />
-      <Input
-        placeholder="Filter attachments by filename, type or hash"
-        onChangeText={onChangeText}
-        onSubmit={() => {
-          onChangeText(attachmentSearchValue.current);
-        }}
-      />
-
-      <View>
-        <ScrollView
-          style={{
-            width: "100%",
-            height: 50,
-            flexDirection: "row",
-            backgroundColor: colors.primary.background
-          }}
-          contentContainerStyle={{
-            minWidth: "100%",
-            height: 50
-          }}
-          horizontal
-        >
-          {attachmentTypes.map((item) => (
-            <Button
-              type={currentFilter === item.filterBy ? "grayAccent" : "gray"}
-              key={item.title}
-              title={
-                item.title +
-                ` (${filterAttachments(item.filterBy)?.length || 0})`
-              }
-              style={{
-                borderRadius: 0,
-                borderBottomWidth: 1,
-                flexGrow: 1,
-                borderBottomColor:
-                  currentFilter !== item.filterBy
-                    ? "transparent"
-                    : colors.primary.accent
-              }}
-              onPress={() => {
-                setCurrentFilter(item.filterBy);
-                setAttachments(filterAttachments(item.filterBy));
-              }}
-            />
-          ))}
-        </ScrollView>
-      </View>
-      <FlashList
-        keyboardDismissMode="none"
-        keyboardShouldPersistTaps="always"
-        ListEmptyComponent={
-          <View
-            style={{
-              height: 150,
-              justifyContent: "center",
-              alignItems: "center"
-            }}
-          >
-            <Icon name="attachment" size={60} color={colors.secondary.icon} />
-            <Paragraph>
-              {note ? "No attachments on this note" : "No attachments"}
-            </Paragraph>
-          </View>
-        }
-        ListFooterComponent={
-          <View
-            style={{
-              height: 350
-            }}
-          />
-        }
-        estimatedItemSize={50}
-        data={attachments}
-        renderItem={renderItem}
-      />
-
-      <Paragraph
-        color={colors.secondary.paragraph}
-        size={SIZE.xs}
-        style={{
-          textAlign: "center",
-          marginTop: 10
-        }}
-      >
-        <Icon
-          name="shield-key-outline"
-          size={SIZE.xs}
-          color={colors.primary.icon}
-        />
-        {"  "}All attachments are end-to-end encrypted.
-      </Paragraph>
-    </View>
-  );
-};
-
-AttachmentDialog.present = (note) => {
-  presentSheet({
-    component: () => <AttachmentDialog note={note} />
-  });
-};

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

@@ -0,0 +1,617 @@
+/*
+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 {
+  Attachment,
+  FilteredSelector,
+  Note,
+  SortOptions,
+  VirtualizedGrouping
+} from "@notesnook/core";
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
+import React, { useEffect, useRef, useState } from "react";
+import { ActivityIndicator, View } from "react-native";
+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, { 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 { SIZE } from "../../utils/size";
+import { Dialog } from "../dialog";
+import { presentDialog } from "../dialog/functions";
+import { Header } from "../header";
+import SheetProvider from "../sheet-provider";
+import { Button } from "../ui/button";
+import { IconButton } from "../ui/icon-button";
+import Input from "../ui/input";
+import Seperator from "../ui/seperator";
+import Heading from "../ui/typography/heading";
+import Paragraph from "../ui/typography/paragraph";
+import { AttachmentItem } from "./attachment-item";
+
+const DEFAULT_SORTING: SortOptions = {
+  sortBy: "dateEdited",
+  sortDirection: "desc"
+};
+
+type RecheckerProgress = {
+  failed: number;
+  passed: number;
+  isWorking: boolean;
+  shown: boolean;
+  filter: string;
+};
+
+interface RecheckerState extends State {
+  progress: {
+    [key: string]: RecheckerProgress;
+  };
+  setProgress: (key: string, progress: RecheckerProgress) => void;
+  currentFilter: string;
+}
+
+const useRechecker = create<RecheckerState>((set) => ({
+  progress: {
+    all: {
+      failed: 0,
+      passed: 0,
+      isWorking: false,
+      shown: false,
+      filter: "all"
+    }
+  },
+  currentFilter: "all",
+  setProgress: (key: string, progress: RecheckerProgress) => {
+    set((state) => ({
+      progress: {
+        ...state.progress,
+        [key]: progress
+      }
+    }));
+  }
+}));
+
+const attachmentTypes = [
+  {
+    title: strings.mediaTypes.all(),
+    filterBy: "all"
+  },
+  {
+    title: strings.mediaTypes.image(),
+    filterBy: "images"
+  },
+  {
+    title: strings.mediaTypes.audio(),
+    filterBy: "audio"
+  },
+  {
+    title: strings.mediaTypes.video(),
+    filterBy: "video"
+  },
+  {
+    title: strings.mediaTypes.document(),
+    filterBy: "documents"
+  },
+  {
+    title: strings.mediaTypes.orphaned(),
+    filterBy: "orphaned"
+  },
+  {
+    title: strings.mediaTypes.errors(),
+    filterBy: "errors"
+  }
+];
+
+export const AttachmentDialog = ({
+  note,
+  isSheet
+}: {
+  note?: Note;
+  isSheet: boolean;
+}) => {
+  const { colors } = useThemeColors();
+  const [attachments, setAttachments] =
+    useState<VirtualizedGrouping<Attachment>>();
+  const attachmentSearchValue = useRef<string>();
+  const [loading, setLoading] = useState(true);
+  const searchTimer = useRef<NodeJS.Timeout>();
+  const [currentFilter, setCurrentFilter] = useState("all");
+  const rechecker = useRechecker((state) =>
+    note ? state.progress[note.id] || {} : state.progress.all
+  );
+  const currentFilterRef = useRef(currentFilter);
+  currentFilterRef.current = currentFilter;
+
+  useEffect(() => {
+    useRechecker.setState({
+      currentFilter: currentFilter
+    });
+  }, [currentFilter]);
+
+  const refresh = React.useCallback(() => {
+    if (note) {
+      db.attachments
+        .ofNote(note.id, "all")
+        .sorted({
+          ...DEFAULT_SORTING,
+          sortBy: "dateModified"
+        })
+        .then((attachments) => {
+          setLoading(false);
+          setAttachments(attachments);
+        });
+    } else {
+      db.attachments.all
+        .sorted({
+          ...DEFAULT_SORTING,
+          sortBy: "dateModified"
+        })
+        .then((attachments) => {
+          setAttachments(attachments);
+          setLoading(false);
+        });
+    }
+  }, [note]);
+
+  useEffect(() => {
+    refresh();
+  }, [note, refresh]);
+
+  const onChangeText = async (text: string) => {
+    attachmentSearchValue.current = text;
+    if (
+      !attachmentSearchValue.current ||
+      attachmentSearchValue.current === ""
+    ) {
+      setAttachments(await filterAttachments(currentFilter));
+      refresh();
+    }
+    clearTimeout(searchTimer.current);
+    searchTimer.current = setTimeout(async () => {
+      const results = await db.lookup
+        .attachments(attachmentSearchValue.current as string)
+        .sorted();
+      if (results.length === 0) return;
+      setAttachments(results);
+    }, 300);
+  };
+
+  const renderItem = ({ index }: { item: boolean; index: number }) => (
+    <AttachmentItem
+      setAttachments={async () => {
+        setAttachments(await filterAttachments(currentFilter));
+      }}
+      errorOnly={currentFilter === "errors"}
+      attachments={attachments}
+      id={index}
+      context="global"
+    />
+  );
+
+  const onCheck = async () => {
+    const getState = () =>
+      useRechecker.getState().progress[note?.id || "all"] || {};
+    const setState = (state: Partial<RecheckerProgress>) =>
+      useRechecker.getState().setProgress(note?.id || "all", {
+        ...getState(),
+        ...state
+      });
+
+    if (!attachments || getState().isWorking) return;
+    setState({
+      isWorking: true,
+      failed: 0,
+      passed: 0,
+      shown: true,
+      filter: currentFilterRef.current
+    });
+    const filter = currentFilterRef.current;
+    const filteredAttachments = await filterAttachments(
+      currentFilterRef.current
+    );
+
+    for (let i = 0; i < filteredAttachments.placeholders.length; i++) {
+      if (!getState().isWorking) {
+        ToastManager.show({
+          message: "Attachment recheck cancelled",
+          type: "info",
+          context: isSheet ? "local" : "global"
+        });
+        return;
+      }
+      const attachment = (await attachments.item(i))?.item;
+      if (currentFilter == "errors" && !attachment?.failed) continue;
+
+      if (!attachment) continue;
+      const result = await filesystem.checkAttachment(attachment.hash);
+      if (!result) return;
+      if (result.failed) {
+        setState({
+          failed: getState().failed + 1
+        });
+        await db.attachments.markAsFailed(attachment.hash, result.failed);
+      } else {
+        setState({
+          passed: getState().passed + 1
+        });
+        await db.attachments.markAsFailed(attachment.id);
+      }
+    }
+    if (filter === useRechecker.getState().currentFilter) {
+      setAttachments(await filterAttachments(currentFilter));
+    }
+
+    setState({
+      isWorking: false
+    });
+  };
+
+  const filterAttachments = async (type: string) => {
+    let items: FilteredSelector<Attachment> = db.attachments.all;
+
+    switch (type) {
+      case "all":
+        items = note
+          ? db.attachments.ofNote(note.id, "all")
+          : db.attachments.all;
+        break;
+      case "images":
+        items = note
+          ? db.attachments.ofNote(note.id, "images")
+          : db.attachments.images;
+        break;
+      case "video":
+        items = items = note
+          ? db.attachments.ofNote(note.id, "videos")
+          : db.attachments.videos;
+        break;
+      case "audio":
+        items = note
+          ? db.attachments.ofNote(note.id, "audio")
+          : db.attachments.audios;
+        break;
+      case "documents":
+        items = note
+          ? db.attachments.ofNote(note.id, "documents")
+          : db.attachments.documents;
+        break;
+      case "orphaned":
+        items = db.attachments.orphaned;
+        break;
+      case "errors":
+        items = items = note
+          ? db.attachments.ofNote(note.id, "all")
+          : db.attachments.all;
+    }
+
+    return await items.sorted({
+      ...DEFAULT_SORTING,
+      sortBy: "dateModified"
+    });
+  };
+
+  return (
+    <>
+      {isSheet ? (
+        <>
+          <SheetProvider context="attachments-list" />
+          <Dialog context="local" />
+        </>
+      ) : null}
+      {!isSheet ? (
+        <Header
+          title="Manage attachments"
+          renderedInRoute="SettingsGroup"
+          canGoBack
+          headerRightButtons={[
+            {
+              onPress() {
+                onCheck();
+              },
+              title: "Recheck all"
+            },
+            {
+              onPress() {
+                if (!attachments) return;
+                presentDialog({
+                  title: `Download ${attachments.placeholders.length} attachments`,
+                  paragraph:
+                    "Are you sure you want to download all attachments?",
+                  positiveText: "Download",
+                  positivePress: async () => {
+                    downloadAttachments(await attachments.ids());
+                  },
+                  negativeText: "Cancel"
+                });
+              },
+              title: "Download all"
+            }
+          ]}
+        />
+      ) : (
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            paddingHorizontal: 12
+          }}
+        >
+          <Heading>{strings.dataTypesPluralCamelCase.attachment()}</Heading>
+
+          <View
+            style={{
+              flexDirection: "row"
+            }}
+          >
+            <IconButton
+              name="check-all"
+              style={{
+                height: 40,
+                width: 40,
+                marginRight: 10
+              }}
+              color={colors.primary.paragraph}
+              size={SIZE.lg}
+              onPress={onCheck}
+            />
+
+            <IconButton
+              name="download"
+              style={{
+                height: 40,
+                width: 40
+              }}
+              color={colors.primary.paragraph}
+              onPress={() => {
+                if (!attachments) return;
+                presentDialog({
+                  title: `Download ${attachments.placeholders.length} attachments`,
+                  paragraph:
+                    "Are you sure you want to download all attachments?",
+                  context: "local",
+                  positiveText: "Download",
+                  positivePress: async () => {
+                    downloadAttachments(await attachments.ids());
+                  },
+                  negativeText: "Cancel"
+                });
+              }}
+              size={SIZE.lg}
+            />
+          </View>
+        </View>
+      )}
+
+      <View
+        style={{
+          width: "100%",
+          alignSelf: "center",
+          paddingHorizontal: 12,
+          height: "100%"
+        }}
+      >
+        <Seperator />
+        <Input
+          placeholder={strings.filterAttachments()}
+          onChangeText={onChangeText}
+          onSubmit={() => {
+            onChangeText(attachmentSearchValue.current as string);
+          }}
+        />
+
+        {rechecker.shown ? (
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              width: "100%",
+              borderRadius: 10,
+              padding: 10,
+              borderWidth: 1,
+              borderColor: colors.primary.border,
+              gap: 12,
+              justifyContent: "space-between"
+            }}
+          >
+            <View
+              style={{
+                flexDirection: "row",
+                gap: 12,
+                alignItems: "center"
+              }}
+            >
+              {rechecker.isWorking ? (
+                <ActivityIndicator color={colors.primary.accent} />
+              ) : (
+                <Icon
+                  name="file-check"
+                  size={30}
+                  color={colors.primary.accent}
+                />
+              )}
+
+              <View>
+                <Paragraph>
+                  {rechecker.isWorking
+                    ? note
+                      ? `Checking ${rechecker.filter.toLowerCase()} note attachments`
+                      : `Checking ${rechecker.filter.toLowerCase()} attachments`
+                    : "Attachments recheck complete"}
+                </Paragraph>
+                <Paragraph>
+                  {`${rechecker.isWorking ? "Please wait... " : ""}Passed: ${
+                    rechecker.passed
+                  }, Failed: ${rechecker.failed}`}
+                </Paragraph>
+              </View>
+            </View>
+
+            <IconButton
+              type={rechecker.isWorking ? "errorShade" : "plain"}
+              name={rechecker.isWorking ? "close" : "check"}
+              size={SIZE.lg}
+              color={
+                rechecker.isWorking ? colors.error.icon : colors.primary.accent
+              }
+              onPress={() => {
+                useRechecker.getState().setProgress(note?.id || "all", {
+                  ...useRechecker.getState().progress[note?.id || "all"],
+                  shown: false,
+                  isWorking: false
+                });
+              }}
+            />
+          </View>
+        ) : null}
+
+        <View>
+          <ScrollView
+            style={{
+              backgroundColor: colors.primary.background,
+              flexWrap: "wrap",
+              flexDirection: "row",
+              paddingVertical: 12
+            }}
+            contentContainerStyle={{
+              alignItems: "center"
+            }}
+            horizontal
+          >
+            {attachmentTypes.map((item) =>
+              item.filterBy === "orphaned" && note ? null : (
+                <Button
+                  type={
+                    currentFilter === item.filterBy
+                      ? "secondaryAccented"
+                      : "plain"
+                  }
+                  key={item.title}
+                  title={item.title}
+                  fontSize={SIZE.sm}
+                  style={{
+                    borderRadius: 100,
+                    paddingHorizontal: 12,
+                    height: 40,
+                    minWidth: 80
+                  }}
+                  onPress={async () => {
+                    const filterBy = item.filterBy;
+                    setCurrentFilter(filterBy);
+                    setLoading(true);
+                    filterAttachments(filterBy)
+                      .then((results) => {
+                        if (filterBy !== currentFilterRef.current) return;
+                        setAttachments(results);
+                        setLoading(false);
+                      })
+                      .catch(console.log);
+                  }}
+                />
+              )
+            )}
+          </ScrollView>
+        </View>
+
+        <FlashList
+          keyboardDismissMode="none"
+          keyboardShouldPersistTaps="always"
+          ListEmptyComponent={
+            <View
+              style={{
+                height: "100%",
+                justifyContent: "center",
+                alignItems: "center"
+              }}
+            >
+              {loading ? (
+                <ActivityIndicator size={40} color={colors.primary.accent} />
+              ) : (
+                <>
+                  <Icon
+                    name="attachment"
+                    size={60}
+                    color={colors.secondary.icon}
+                  />
+                  <Paragraph>{strings.noAttachments()}</Paragraph>
+                </>
+              )}
+            </View>
+          }
+          ListHeaderComponent={<AllProgress note={note} />}
+          ListFooterComponent={
+            <View
+              style={{
+                height: 350
+              }}
+            />
+          }
+          estimatedItemSize={50}
+          data={loading ? [] : attachments?.placeholders}
+          renderItem={renderItem}
+        />
+      </View>
+    </>
+  );
+};
+
+const AllProgress = ({ note }: { note?: Note }) => {
+  const progress = useAttachmentStore((state) =>
+    note
+      ? {
+          downloading: {
+            [note.id]: state.downloading?.[note.id]
+          },
+          uploading: {
+            [note.id]: state.uploading?.[note.id]
+          }
+        }
+      : state
+  );
+
+  return (
+    <View
+      style={{
+        gap: 10,
+        width: "100%"
+      }}
+    >
+      {Object.keys(progress.downloading || {}).map((groupId) => (
+        <AttachmentGroupProgress key={groupId} groupId={groupId} />
+      ))}
+
+      {Object.keys(progress.uploading || {}).map((groupId) => (
+        <AttachmentGroupProgress key={groupId} groupId={groupId} />
+      ))}
+    </View>
+  );
+};
+
+AttachmentDialog.present = (note?: Note) => {
+  presentSheet({
+    component: () => <AttachmentDialog note={note} isSheet={true} />,
+    keyboardHandlerDisabled: true
+  });
+};

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

@@ -36,6 +36,7 @@ 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,
@@ -153,12 +154,12 @@ const AuthModal = () => {
 
           {initialAuthMode.current !== AuthMode.welcomeSignup ? null : (
             <Button
-              title="Skip"
+              title={strings.skip()}
               onPress={() => {
                 hideAuth();
               }}
               iconSize={16}
-              type="gray"
+              type="plain"
               iconPosition="right"
               icon="chevron-right"
               height={25}

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

@@ -23,15 +23,19 @@ import { db } from "../../common/database";
 import {
   eSendEvent,
   presentSheet,
-  ToastEvent
+  ToastManager
 } from "../../services/event-manager";
 import { useUserStore } from "../../stores/use-user-store";
-import { eCloseSheet } from "../../utils/events";
+import { eCloseSheet, eOpenRecoveryKeyDialog } from "../../utils/events";
 import DialogHeader from "../dialog/dialog-header";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
 import { Notice } from "../ui/notice";
 import Seperator from "../ui/seperator";
+import { Dialog } from "../dialog";
+import BackupService from "../../services/backup";
+import { sleep } from "../../utils/time";
+import { strings } from "@notesnook/intl";
 
 export const ChangePassword = () => {
   const passwordInputRef = useRef();
@@ -45,18 +49,18 @@ export const ChangePassword = () => {
 
   const changePassword = async () => {
     if (!user?.isEmailConfirmed) {
-      ToastEvent.show({
-        heading: "Email not confirmed",
-        message: "Please confirm your email to change account password",
+      ToastManager.show({
+        heading: strings.emailNotConfirmed(),
+        message: strings.emailNotConfirmedDesc(),
         type: "error",
         context: "local"
       });
       return;
     }
     if (error || !oldPassword.current || !password.current) {
-      ToastEvent.show({
-        heading: "All fields required",
-        message: "Fill all the fields and try again.",
+      ToastManager.show({
+        heading: strings.allFieldsRequired(),
+        message: strings.allFieldsRequiredDesc(),
         type: "error",
         context: "local"
       });
@@ -64,19 +68,25 @@ export const ChangePassword = () => {
     }
     setLoading(true);
     try {
+      const result = await BackupService.run(false, "change-password-dialog");
+      if (!result.error)
+        throw new Error(strings.backupFailed() + `: ${result.error}`);
+
       await db.user.clearSessions();
       await db.user.changePassword(oldPassword.current, password.current);
-      ToastEvent.show({
-        heading: "Account password updated",
+      ToastManager.show({
+        heading: strings.passwordChangedSuccessfully(),
         type: "success",
         context: "global"
       });
       setLoading(false);
       eSendEvent(eCloseSheet);
+      await sleep(300);
+      eSendEvent(eOpenRecoveryKeyDialog);
     } catch (e) {
       setLoading(false);
-      ToastEvent.show({
-        heading: "Failed to change password",
+      ToastManager.show({
+        heading: strings.passwordChangeFailed(),
         message: e.message,
         type: "error",
         context: "local"
@@ -92,10 +102,8 @@ export const ChangePassword = () => {
         padding: 12
       }}
     >
-      <DialogHeader
-        title="Change password"
-        paragraph="Enter your old and new passwords"
-      />
+      <Dialog context="change-password-dialog" />
+      <DialogHeader title={strings.changePassword()} />
       <Seperator />
 
       <Input
@@ -109,7 +117,7 @@ export const ChangePassword = () => {
         autoComplete="password"
         autoCapitalize="none"
         autoCorrect={false}
-        placeholder="Old Password"
+        placeholder={strings.oldPassword()}
       />
 
       <Input
@@ -118,20 +126,21 @@ export const ChangePassword = () => {
           password.current = value;
         }}
         onErrorCheck={(e) => setError(e)}
-        returnKeyLabel="Next"
+        returnKeyLabel={strings.next()}
         returnKeyType="next"
         secureTextEntry
         validationType="password"
         autoComplete="password"
         autoCapitalize="none"
         autoCorrect={false}
-        placeholder="New password"
+        placeholder={strings.newPassword()}
       />
 
-      <Notice
-        text="Changing password is a non-undoable process. You will be logged out from all your devices. Please make sure you do not close the app while your password is changing and have good internet connection."
-        type="alert"
-      />
+      <Notice text={strings.changePasswordNotice()} type="alert" />
+
+      <View style={{ height: 10 }} />
+
+      <Notice text={strings.changePasswordNotice2()} type="alert" />
 
       <Button
         style={{
@@ -141,7 +150,7 @@ export const ChangePassword = () => {
         loading={loading}
         onPress={changePassword}
         type="accent"
-        title={loading ? null : "I understand, change my password"}
+        title={loading ? null : strings.changePasswordConfirm()}
       />
     </View>
   );

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

@@ -22,7 +22,7 @@ import { View } from "react-native";
 import ActionSheet from "react-native-actions-sheet";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
-import { ToastEvent } from "../../services/event-manager";
+import { ToastManager } from "../../services/event-manager";
 import SettingsService from "../../services/settings";
 import { useThemeColors } from "@notesnook/theme";
 import DialogHeader from "../dialog/dialog-header";
@@ -32,6 +32,7 @@ import Input from "../ui/input";
 import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { strings } from "@notesnook/intl";
 
 export const ForgotPassword = () => {
   const { colors } = useThemeColors("sheet");
@@ -43,8 +44,8 @@ export const ForgotPassword = () => {
 
   const sendRecoveryEmail = async () => {
     if (!email.current || error) {
-      ToastEvent.show({
-        heading: "Account email is required.",
+      ToastManager.show({
+        heading: strings.emailRequired(),
         type: "error",
         context: "local"
       });
@@ -57,15 +58,15 @@ export const ForgotPassword = () => {
         lastRecoveryEmailTime &&
         Date.now() - JSON.parse(lastRecoveryEmailTime) < 60000 * 3
       ) {
-        throw new Error("Please wait before requesting another email");
+        throw new Error(strings.pleaseWaitBeforeSendEmail());
       }
       await db.user.recoverAccount(email.current.toLowerCase());
       SettingsService.set({
         lastRecoveryEmailTime: Date.now()
       });
-      ToastEvent.show({
-        heading: "Check your email to reset password",
-        message: `Recovery email has been sent to ${email.current.toLowerCase()}`,
+      ToastManager.show({
+        heading: strings.recoveryEmailSent(),
+        message: strings.recoveryEmailSentDesc(),
         type: "success",
         context: "local",
         duration: 7000
@@ -74,8 +75,8 @@ export const ForgotPassword = () => {
       setSent(true);
     } catch (e) {
       setLoading(false);
-      ToastEvent.show({
-        heading: "Recovery email not sent",
+      ToastManager.show({
+        heading: strings.recoveryEmailFailed(),
         message: e.message,
         type: "error",
         context: "local"
@@ -113,7 +114,7 @@ export const ForgotPassword = () => {
             }}
           >
             <IconButton
-              customStyle={{
+              style={{
                 width: null,
                 height: null
               }}
@@ -121,13 +122,13 @@ export const ForgotPassword = () => {
               name="email"
               size={50}
             />
-            <Heading>Recovery email sent!</Heading>
+            <Heading>{strings.recoveryEmailSent()}</Heading>
             <Paragraph
               style={{
                 textAlign: "center"
               }}
             >
-              Please follow the link in the email to recover your account.
+              {strings.recoveryEmailSentDesc()}
             </Paragraph>
           </View>
         ) : (
@@ -140,10 +141,7 @@ export const ForgotPassword = () => {
               padding: 12
             }}
           >
-            <DialogHeader
-              title="Account recovery"
-              paragraph="We will send you an email with steps on how to reset your password."
-            />
+            <DialogHeader title={strings.accountRecovery()} />
             <Seperator />
 
             <Input
@@ -153,14 +151,14 @@ export const ForgotPassword = () => {
               }}
               defaultValue={email.current}
               onErrorCheck={(e) => setError(e)}
-              returnKeyLabel="Next"
+              returnKeyLabel={strings.next()}
               returnKeyType="next"
               autoComplete="email"
               validationType="email"
               autoCorrect={false}
               autoCapitalize="none"
-              errorMessage="Email is invalid"
-              placeholder="Email"
+              errorMessage={strings.emailInvalid()}
+              placeholder={strings.email()}
               onSubmit={() => {}}
             />
 
@@ -172,7 +170,7 @@ export const ForgotPassword = () => {
               loading={loading}
               onPress={sendRecoveryEmail}
               type="accent"
-              title={loading ? null : "Next"}
+              title={loading ? null : strings.next()}
             />
           </View>
         )}

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

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

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

@@ -17,12 +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 { 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 { useThemeColors } from "@notesnook/theme";
+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";
@@ -34,10 +38,7 @@ import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
 import { useLogin } from "./use-login";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { eUserLoggedIn } from "../../utils/events";
-import { useUserStore } from "../../stores/use-user-store";
-import Sync from "../../services/sync";
+import { strings } from "@notesnook/intl";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -66,7 +67,7 @@ export const Login = ({ changeMode }) => {
     Progress.present();
     setTimeout(() => {
       if (!useUserStore.getState().syncing) {
-        Sync.run("global", false, true);
+        Sync.run("global", false, "full");
       }
     }, 5000);
   });
@@ -103,7 +104,7 @@ export const Login = ({ changeMode }) => {
             justifyContent: "flex-end",
             paddingHorizontal: 20,
             backgroundColor: colors.secondary.background,
-            borderBottomWidth: 1,
+            borderBottomWidth: 0.8,
             marginBottom: 12,
             borderBottomColor: colors.primary.border,
             alignSelf: deviceMode !== "mobile" ? "center" : undefined,
@@ -147,7 +148,7 @@ export const Login = ({ changeMode }) => {
             extraBold
             size={SIZE.xxl}
           >
-            Login to your {"\n"}account
+            {strings.loginToYourAccount()}
           </Heading>
         </View>
 
@@ -178,12 +179,16 @@ export const Login = ({ changeMode }) => {
             validationType="email"
             autoCorrect={false}
             autoCapitalize="none"
-            errorMessage="Email is invalid"
-            placeholder="Enter your email"
+            errorMessage={strings.emailInvalid()}
+            placeholder={strings.email()}
             defaultValue={email.current}
             editable={step === LoginSteps.emailAuth && !loading}
             onSubmit={() => {
-              passwordInputRef.current?.focus();
+              if (step === LoginSteps.emailAuth) {
+                login();
+              } else {
+                passwordInputRef.current?.focus();
+              }
             }}
           />
 
@@ -195,20 +200,20 @@ export const Login = ({ changeMode }) => {
                   password.current = value;
                 }}
                 testID="input.password"
-                returnKeyLabel="Done"
+                returnKeyLabel={strings.done()}
                 returnKeyType="done"
                 secureTextEntry
                 autoComplete="password"
                 autoCapitalize="none"
                 autoCorrect={false}
-                placeholder="Password"
+                placeholder={strings.password()}
                 marginBottom={0}
                 editable={!loading}
                 defaultValue={password.current}
                 onSubmit={() => login()}
               />
               <Button
-                title="Forgot your password?"
+                title={strings.forgotPassword()}
                 style={{
                   alignSelf: "flex-end",
                   height: 30,
@@ -222,7 +227,7 @@ export const Login = ({ changeMode }) => {
                   textDecorationLine: "underline"
                 }}
                 fontSize={SIZE.xs}
-                type="gray"
+                type="plain"
               />
             </>
           )}
@@ -242,14 +247,15 @@ export const Login = ({ changeMode }) => {
                 width: 250,
                 borderRadius: 100
               }}
+              height={50}
               fontSize={SIZE.md}
               type="accent"
-              title={!loading ? "Continue" : null}
+              title={!loading ? strings.continue() : null}
             />
 
             {step === LoginSteps.passwordAuth && (
               <Button
-                title="Cancel logging in"
+                title={strings.cancelLogin()}
                 style={{
                   alignSelf: "center",
                   height: 30,
@@ -285,12 +291,12 @@ export const Login = ({ changeMode }) => {
                   size={SIZE.xs + 1}
                   color={colors.secondary.paragraph}
                 >
-                  Don't have an account?{" "}
+                  {strings.dontHaveAccount()}{" "}
                   <Paragraph
                     size={SIZE.xs + 1}
                     style={{ color: colors.primary.accent }}
                   >
-                    Sign up
+                    {strings.signUp()}
                   </Paragraph>
                 </Paragraph>
               </TouchableOpacity>

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

@@ -19,12 +19,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
-import { Modal, View } from "react-native";
+import { View } from "react-native";
 import { db } from "../../common/database";
 import { MMKV } from "../../common/database/mmkv";
 import BiometricService from "../../services/biometrics";
 import {
-  ToastEvent,
+  ToastManager,
   eSendEvent,
   eSubscribeEvent
 } from "../../services/event-manager";
@@ -37,6 +37,7 @@ import { eLoginSessionExpired, eUserLoggedIn } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
+import BaseDialog from "../dialog/base-dialog";
 import { presentDialog } from "../dialog/functions";
 import SheetProvider from "../sheet-provider";
 import { Toast } from "../toast";
@@ -46,7 +47,7 @@ import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
-import BaseDialog from "../dialog/base-dialog";
+import { strings } from "@notesnook/intl";
 
 function getObfuscatedEmail(email) {
   if (!email) return "";
@@ -69,6 +70,9 @@ export const SessionExpired = () => {
       eSendEvent(eUserLoggedIn, true);
       setVisible(false);
       setFocused(false);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
     },
     true
   );
@@ -84,8 +88,11 @@ export const SessionExpired = () => {
       MMKV.clearStore();
       clearAllStores();
       setVisible(false);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
     } catch (e) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: e.message,
         type: "error",
         context: "local"
@@ -102,11 +109,15 @@ export const SessionExpired = () => {
 
   const open = React.useCallback(async () => {
     try {
-      let res = await db.user.tokenManager.getToken();
+      let res = await db.tokenManager.getToken();
       if (!res) throw new Error("no token found");
-      if (db.user.tokenManager._isTokenExpired(res))
+      if (db.tokenManager._isTokenExpired(res))
         throw new Error("token expired");
-      Sync.run("global", false, true, async (complete) => {
+
+      const key = await db.user.getEncryptionKey();
+      if (!key) throw new Error("No encryption key found.");
+
+      Sync.run("global", false, "full", async (complete) => {
         if (!complete) {
           let user = await db.user.getUser();
           if (!user) return;
@@ -121,12 +132,14 @@ export const SessionExpired = () => {
         setVisible(false);
       });
     } catch (e) {
-      console.log(e);
       let user = await db.user.getUser();
       if (!user) return;
       email.current = user.email;
       setFocused(false);
       setVisible(true);
+      useUserStore.setState({
+        disableAppLockRequests: true
+      });
     }
   }, [email]);
 
@@ -139,9 +152,15 @@ export const SessionExpired = () => {
         animated={false}
         centered={false}
         onShow={async () => {
+          useUserStore.setState({
+            disableAppLockRequests: true
+          });
           await sleep(300);
           passwordInputRef.current?.focus();
           setFocused(true);
+          useUserStore.setState({
+            disableAppLockRequests: true
+          });
         }}
         enableSheetKeyboardHandler={true}
         visible={true}
@@ -166,7 +185,7 @@ export const SessionExpired = () => {
             }}
           >
             <IconButton
-              customStyle={{
+              style={{
                 width: 60,
                 height: 60
               }}
@@ -175,15 +194,14 @@ export const SessionExpired = () => {
               size={50}
             />
             <Heading size={SIZE.xxxl} color={colors.primary.heading}>
-              Session expired
+              {strings.sessionExpired()}
             </Heading>
             <Paragraph
               style={{
                 textAlign: "center"
               }}
             >
-              Your session on this device has expired. Please enter password for{" "}
-              {getObfuscatedEmail(email.current)} to continue.
+              {strings.sessionExpiredDesc(getObfuscatedEmail(email.current))}
             </Paragraph>
           </View>
 
@@ -193,13 +211,13 @@ export const SessionExpired = () => {
               onChangeText={(value) => {
                 password.current = value;
               }}
-              returnKeyLabel="Next"
+              returnKeyLabel={strings.done()}
               returnKeyType="next"
               secureTextEntry
               autoComplete="password"
               autoCapitalize="none"
               autoCorrect={false}
-              placeholder="Password"
+              placeholder={strings.password()}
               onSubmit={() => login()}
             />
           ) : null}
@@ -213,7 +231,7 @@ export const SessionExpired = () => {
             loading={loading}
             onPress={() => login()}
             type="accent"
-            title={loading ? null : "Login"}
+            title={loading ? null : strings.login()}
           />
 
           <Button
@@ -224,16 +242,15 @@ export const SessionExpired = () => {
             onPress={() => {
               presentDialog({
                 context: "session_expiry",
-                title: "Logout",
-                paragraph:
-                  "Are you sure you want to logout from this device? Any unsynced changes will be lost.",
-                positiveText: "Logout",
+                title: strings.logoutFromDevice(),
+                paragraph: strings.logoutDesc(),
+                positiveText: strings.logout(),
                 positiveType: "errorShade",
                 positivePress: logout
               });
             }}
             type="errorShade"
-            title={loading ? null : "Logout from this device"}
+            title={loading ? null : strings.logoutFromDevice()}
           />
         </View>
         <Toast context="local" />

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

@@ -21,7 +21,7 @@ import React, { useRef, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
-import { ToastEvent } from "../../services/event-manager";
+import { ToastManager } from "../../services/event-manager";
 import { clearMessage, setEmailVerifyMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
 import { useThemeColors } from "@notesnook/theme";
@@ -35,6 +35,8 @@ 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();
@@ -52,9 +54,9 @@ export const Signup = ({ changeMode, trial }) => {
   const { width, height } = useWindowDimensions();
   const validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
-      ToastEvent.show({
-        heading: "All fields required",
-        message: "Fill all the fields and try again",
+      ToastManager.show({
+        heading: strings.allFieldsRequired(),
+        message: strings.allFieldsRequiredDesc(),
         type: "error",
         context: "local"
       });
@@ -77,6 +79,7 @@ export const Signup = ({ changeMode, trial }) => {
       clearMessage();
       setEmailVerifyMessage();
       hideAuth();
+      SettingsService.setProperty("encryptedBackup", true);
       await sleep(300);
       if (trial) {
         PremiumService.sheet(null, null, true);
@@ -85,8 +88,8 @@ export const Signup = ({ changeMode, trial }) => {
       }
     } catch (e) {
       setLoading(false);
-      ToastEvent.show({
-        heading: "Signup failed",
+      ToastManager.show({
+        heading: strings.signupFailed(),
         message: e.message,
         type: "error",
         context: "local"
@@ -111,7 +114,7 @@ export const Signup = ({ changeMode, trial }) => {
             paddingHorizontal: 20,
             backgroundColor: colors.secondary.background,
             marginBottom: 20,
-            borderBottomWidth: 1,
+            borderBottomWidth: 0.8,
             borderBottomColor: colors.primary.border,
             alignSelf: deviceMode !== "mobile" ? "center" : undefined,
             borderWidth: deviceMode !== "mobile" ? 1 : null,
@@ -154,7 +157,7 @@ export const Signup = ({ changeMode, trial }) => {
             }}
             size={SIZE.xxl}
           >
-            Create your {"\n"}account
+            {strings.createYourAccount()}
           </Heading>
         </View>
 
@@ -173,14 +176,14 @@ export const Signup = ({ changeMode, trial }) => {
             }}
             testID="input.email"
             onErrorCheck={(e) => setError(e)}
-            returnKeyLabel="Next"
+            returnKeyLabel={strings.next()}
             returnKeyType="next"
             autoComplete="email"
             validationType="email"
             autoCorrect={false}
             autoCapitalize="none"
-            errorMessage="Email is invalid"
-            placeholder="Email"
+            errorMessage={strings.email()}
+            placeholder={strings.email()}
             onSubmit={() => {
               passwordInputRef.current?.focus();
             }}
@@ -193,14 +196,14 @@ export const Signup = ({ changeMode, trial }) => {
             }}
             testID="input.password"
             onErrorCheck={(e) => setError(e)}
-            returnKeyLabel="Next"
+            returnKeyLabel={strings.next()}
             returnKeyType="next"
             secureTextEntry
             autoComplete="password"
             autoCapitalize="none"
             validationType="password"
             autoCorrect={false}
-            placeholder="Password"
+            placeholder={strings.password()}
             onSubmit={() => {
               confirmPasswordInputRef.current?.focus();
             }}
@@ -213,7 +216,7 @@ export const Signup = ({ changeMode, trial }) => {
             }}
             testID="input.confirmPassword"
             onErrorCheck={(e) => setError(e)}
-            returnKeyLabel="Signup"
+            returnKeyLabel={strings.done()}
             returnKeyType="done"
             secureTextEntry
             autoComplete="password"
@@ -221,7 +224,7 @@ export const Signup = ({ changeMode, trial }) => {
             autoCorrect={false}
             validationType="confirmPassword"
             customValidator={() => password.current}
-            placeholder="Confirm password"
+            placeholder={strings.confirmPassword()}
             marginBottom={12}
             onSubmit={signup}
           />
@@ -233,7 +236,7 @@ export const Signup = ({ changeMode, trial }) => {
             size={SIZE.xs}
             color={colors.secondary.paragraph}
           >
-            By signing up, you agree to our{" "}
+            {strings.signupAgreement[0]()}
             <Paragraph
               size={SIZE.xs}
               onPress={() => {
@@ -244,9 +247,9 @@ export const Signup = ({ changeMode, trial }) => {
               }}
               color={colors.primary.accent}
             >
-              Terms of Service{" "}
+              {strings.signupAgreement[1]()}
             </Paragraph>
-            and{" "}
+            {strings.signupAgreement[2]()}
             <Paragraph
               size={SIZE.xs}
               onPress={() => {
@@ -257,14 +260,13 @@ export const Signup = ({ changeMode, trial }) => {
               }}
               color={colors.primary.accent}
             >
-              Privacy Policy.
-            </Paragraph>{" "}
-            You also agree to recieve marketing emails from us which you can
-            opt-out of from app settings.
+              {strings.signupAgreement[3]()}
+            </Paragraph>
+            {strings.signupAgreement[4]()}
           </Paragraph>
 
           <Button
-            title={!loading ? "Continue" : null}
+            title={!loading ? strings.continue() : null}
             type="accent"
             loading={loading}
             onPress={signup}
@@ -289,12 +291,12 @@ export const Signup = ({ changeMode, trial }) => {
             }}
           >
             <Paragraph size={SIZE.xs + 1} color={colors.secondary.paragraph}>
-              Already have an account?{" "}
+              {strings.alreadyHaveAccount()}{" "}
               <Paragraph
                 size={SIZE.xs + 1}
                 style={{ color: colors.primary.accent }}
               >
-                Login
+                {strings.login()}
               </Paragraph>
             </Paragraph>
           </TouchableOpacity>

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

@@ -24,7 +24,7 @@ import useTimer from "../../hooks/use-timer";
 import {
   eSendEvent,
   presentSheet,
-  ToastEvent
+  ToastManager
 } from "../../services/event-manager";
 import { useThemeColors } from "@notesnook/theme";
 import { eCloseSheet } from "../../utils/events";
@@ -32,13 +32,15 @@ import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
-import { PressableButton } from "../ui/pressable";
+import { Pressable } from "../ui/pressable";
 import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { useCallback } from "react";
+import { ScrollView } from "react-native-actions-sheet";
+import { strings } from "@notesnook/intl";
 
-const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
+const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
   const { colors } = useThemeColors();
   const code = useRef();
   const [currentMethod, setCurrentMethod] = useState({
@@ -50,20 +52,6 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
   const inputRef = useRef();
   const [sending, setSending] = useState(false);
 
-  const codeHelpText = {
-    app: "Enter the 6 digit code from your authenticator app to continue logging in",
-    sms: "Enter the 6 digit code sent to your phone number to continue logging in",
-    email: "Enter the 6 digit code sent to your email to continue logging in",
-    recoveryCode: "Enter the recovery code to continue logging in"
-  };
-
-  const secondaryMethodsText = {
-    app: "I don't have access to authenticator app",
-    sms: "I don't have access to my phone",
-    email: "I don't have access to email",
-    recoveryCode: "I don't have recovery codes"
-  };
-
   const onNext = async () => {
     if (!code.current || code.current.length < 6) return;
     setLoading(true);
@@ -93,22 +81,22 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
   const methods = [
     {
       id: "sms",
-      title: "Send code via SMS",
+      title: strings.sendCodeSms(),
       icon: "message-plus-outline"
     },
     {
       id: "email",
-      title: "Send code via email",
+      title: strings.sendCodeEmail(),
       icon: "email-outline"
     },
     {
       id: "app",
-      title: "Enter code from authenticator app",
+      title: strings.authAppCode(),
       icon: "cellphone-key"
     },
     {
       id: "recoveryCode",
-      title: "I have a recovery code",
+      title: strings.recoveryCode(),
       icon: "key"
     }
   ];
@@ -138,20 +126,24 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
       setSending(false);
     } catch (e) {
       setSending(false);
-      ToastEvent.error(e, "Error sending 2FA Code", "local");
+      ToastManager.error(e, "Error sending 2FA Code", "local");
     }
   }, [currentMethod.method, mfaInfo.token, seconds, sending, start]);
 
   return (
-    <View>
+    <ScrollView
+      keyboardShouldPersistTaps="handled"
+      keyboardDismissMode="interactive"
+    >
       <View
         style={{
           alignItems: "center",
-          paddingHorizontal: currentMethod.method ? 12 : 0
+          paddingHorizontal: currentMethod.method ? 12 : 0,
+          gap: 12
         }}
       >
         <IconButton
-          customStyle={{
+          style={{
             width: 70,
             height: 70
           }}
@@ -164,9 +156,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
             textAlign: "center"
           }}
         >
-          {currentMethod.method
-            ? "Two factor authentication"
-            : "Select methods for two-factor authentication"}
+          {currentMethod.method ? strings["2fa"]() : strings.select2faMethod()}
         </Heading>
         <Paragraph
           style={{
@@ -174,28 +164,28 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
             textAlign: "center"
           }}
         >
-          {codeHelpText[currentMethod.method] ||
-            "Select how you would like to recieve the code"}
+          {strings["2faCodeHelpText"][currentMethod.method]() ||
+            strings.select2faCodeHelpText()}
         </Paragraph>
 
-        <Seperator />
-
         {currentMethod.method === "sms" || currentMethod.method === "email" ? (
           <Button
             onPress={onSendCode}
-            type={seconds ? "gray" : "transparent"}
+            type={seconds ? "plain" : "transparent"}
             title={
               sending
                 ? ""
-                : `${seconds ? `Resend code in (${seconds})` : "Send code"}`
+                : `${
+                    seconds
+                      ? strings.resend2faCode(seconds)
+                      : strings.sendCode()
+                  }`
             }
             loading={sending}
             height={30}
           />
         ) : null}
 
-        <Seperator />
-
         {currentMethod.method ? (
           <>
             <Input
@@ -214,6 +204,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 code.current = value;
                 //onNext();
               }}
+              onSubmitEditing={onNext}
               caretHidden
               inputStyle={{
                 fontSize: SIZE.lg,
@@ -225,6 +216,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
               keyboardType={
                 currentMethod.method === "recoveryCode" ? "default" : "numeric"
               }
+              enablesReturnKeyAutomatically
               containerStyle={{
                 height: 60,
                 borderWidth: 0,
@@ -232,30 +224,38 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 minWidth: "50%"
               }}
             />
-            <Seperator />
+
             <Button
-              title={loading ? null : "Next"}
+              title={loading ? null : strings.next()}
               type="accent"
               width={250}
               loading={loading}
               onPress={onNext}
               style={{
-                borderRadius: 100,
-                marginBottom: 10
+                borderRadius: 100
               }}
             />
 
             <Button
-              title={secondaryMethodsText[currentMethod.method]}
-              type="gray"
+              title={strings["2faCodeSecondaryMethodText"][
+                currentMethod.method
+              ]()}
+              type="plain"
               onPress={onRequestSecondaryMethod}
               height={30}
             />
+
+            <Button
+              title={strings.cancel()}
+              type="plain"
+              onPress={onCancel}
+              height={30}
+            />
           </>
         ) : (
           <>
             {getMethods().map((item) => (
-              <PressableButton
+              <Pressable
                 key={item.title}
                 onPress={() => {
                   setCurrentMethod({
@@ -263,7 +263,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                     isPrimary: false
                   });
                 }}
-                customStyle={{
+                style={{
                   paddingHorizontal: 12,
                   paddingVertical: 12,
                   marginTop: 0,
@@ -275,8 +275,8 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 }}
               >
                 <IconButton
-                  type="grayAccent"
-                  customStyle={{
+                  type="secondaryAccented"
+                  style={{
                     width: 40,
                     height: 40,
                     marginRight: 10
@@ -292,24 +292,25 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 >
                   <Paragraph size={SIZE.md}>{item.title}</Paragraph>
                 </View>
-              </PressableButton>
+              </Pressable>
             ))}
           </>
         )}
       </View>
-    </View>
+    </ScrollView>
   );
 };
 
-TwoFactorVerification.present = (onMfaLogin, data, context) => {
+TwoFactorVerification.present = (onMfaLogin, data, onCancel, context) => {
   presentSheet({
     component: () => (
-      <TwoFactorVerification onMfaLogin={onMfaLogin} mfaInfo={data} />
+      <TwoFactorVerification
+        onMfaLogin={onMfaLogin}
+        mfaInfo={data}
+        onCancel={onCancel}
+      />
     ),
     context: context || "two_factor_verify",
-    onClose: () => {
-      onMfaLogin();
-    },
     disableClosing: true
   });
 };

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

@@ -19,13 +19,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useRef, useState } from "react";
 import { db } from "../../common/database";
-import { eSendEvent, ToastEvent } from "../../services/event-manager";
+import { eSendEvent, ToastManager } from "../../services/event-manager";
 import { clearMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
 import { useUserStore } from "../../stores/use-user-store";
 import { eCloseSheet } from "../../utils/events";
 import TwoFactorVerification from "./two-factor";
+import { strings } from "@notesnook/intl";
 
 export const LoginSteps = {
   emailAuth: 1,
@@ -48,9 +49,9 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
       (!password.current && step === LoginSteps.passwordAuth) ||
       (!email.current && step === LoginSteps.emailAuth)
     ) {
-      ToastEvent.show({
-        heading: "All fields required",
-        message: "Fill all the fields and try again",
+      ToastManager.show({
+        heading: strings.allFieldsRequired(),
+        message: strings.allFieldsRequiredDesc(),
         type: "error",
         context: "local"
       });
@@ -71,33 +72,41 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
           const mfaInfo = await db.user.authenticateEmail(email.current);
           console.log("email auth", mfaInfo);
           if (mfaInfo) {
-            TwoFactorVerification.present(async (mfa, callback) => {
-              try {
-                const success = await db.user.authenticateMultiFactorCode(
-                  mfa.code,
-                  mfa.method
-                );
+            TwoFactorVerification.present(
+              async (mfa, callback) => {
+                try {
+                  const success = await db.user.authenticateMultiFactorCode(
+                    mfa.code,
+                    mfa.method
+                  );
 
-                if (success) {
-                  setStep(LoginSteps.passwordAuth);
-                  setLoading(false);
-                  setTimeout(() => {
-                    passwordInputRef.current?.focus();
-                  }, 1);
-                  callback && callback(true);
-                }
-                callback && callback(false);
-              } catch (e) {
-                callback && callback(false);
-                if (e.message === "invalid_grant") {
-                  eSendEvent(eCloseSheet, "two_factor_verify");
-                  setLoading(false);
-                  setStep(LoginSteps.emailAuth);
+                  if (success) {
+                    setStep(LoginSteps.passwordAuth);
+                    setLoading(false);
+                    setTimeout(() => {
+                      passwordInputRef.current?.focus();
+                    }, 500);
+                    callback && callback(true);
+                  }
+                  callback && callback(false);
+                } catch (e) {
+                  callback && callback(false);
+                  if (e.message === "invalid_grant") {
+                    eSendEvent(eCloseSheet, "two_factor_verify");
+                    setLoading(false);
+                    setStep(LoginSteps.emailAuth);
+                  }
                 }
+              },
+              mfaInfo,
+              () => {
+                eSendEvent(eCloseSheet, "two_factor_verify");
+                setLoading(false);
+                setStep(LoginSteps.emailAuth);
               }
-            }, mfaInfo);
+            );
           } else {
-            finishWithError(new Error("Unable to send 2FA code"));
+            finishWithError(new Error(strings.unableToSend2faCode()));
           }
           break;
         }
@@ -121,8 +130,8 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
   const finishWithError = async (e) => {
     if (e.message === "invalid_grant") setStep(LoginSteps.emailAuth);
     setLoading(false);
-    ToastEvent.show({
-      heading: "Login failed",
+    ToastManager.show({
+      heading: strings.loginFailed(),
       message: e.message,
       type: "error",
       context: "local"
@@ -131,13 +140,13 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
 
   const finishLogin = async () => {
     const user = await db.user.getUser();
-    if (!user) throw new Error("Email or password incorrect!");
+    if (!user) throw new Error(strings.emailOrPasswordIncorrect());
     PremiumService.setPremiumStatus();
     setUser(user);
     clearMessage();
-    ToastEvent.show({
-      heading: "Login successful",
-      message: `Logged in as ${user.email}`,
+    ToastManager.show({
+      heading: strings.loginSuccess(),
+      message: strings.loginSuccessDesc(),
       type: "success",
       context: "global"
     });

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

@@ -18,6 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { useThemeColors } from "@notesnook/theme";
+import { useRoute } from "@react-navigation/native";
 import React, { useCallback, useEffect } from "react";
 import { Keyboard, View } from "react-native";
 import Animated, {
@@ -33,26 +34,25 @@ import { useSelectionStore } from "../../stores/use-selection-store";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { getElevationStyle } from "../../utils/elevation";
 import { SIZE, normalize } from "../../utils/size";
-import NativeTooltip from "../../utils/tooltip";
-import { PressableButton } from "../ui/pressable";
+import { Pressable } from "../ui/pressable";
 
-interface FloatingButton {
-  title?: string;
+interface FloatingButtonProps {
   onPress: () => void;
   color?: string;
+  shouldShow?: boolean;
   alwaysVisible?: boolean;
 }
 
 const FloatingButton = ({
-  title,
   onPress,
   color,
   alwaysVisible = false
-}: FloatingButton) => {
+}: FloatingButtonProps) => {
   const { colors } = useThemeColors();
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
   const translate = useSharedValue(0);
+  const route = useRoute();
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -115,19 +115,14 @@ const FloatingButton = ({
         animatedStyle
       ]}
     >
-      <PressableButton
+      <Pressable
         testID={notesnook.buttons.add}
         type="accent"
-        accentColor={colors.static[color as keyof typeof colors.static]}
-        customStyle={{
+        accentColor={color}
+        style={{
           ...getElevationStyle(5),
           borderRadius: 100
         }}
-        onLongPress={(event) => {
-          if (title) {
-            NativeTooltip.show(event, title, NativeTooltip.POSITIONS.LEFT);
-          }
-        }}
         onPress={onPress}
       >
         <View
@@ -139,12 +134,18 @@ const FloatingButton = ({
           }}
         >
           <Icon
-            name={title === "Clear all trash" ? "delete" : "plus"}
+            name={
+              route.name === "Notebooks"
+                ? "notebook-plus"
+                : route.name === "Trash"
+                ? "delete"
+                : "plus"
+            }
             color={colors.primary.accentForeground}
             size={SIZE.xxl}
           />
         </View>
-      </PressableButton>
+      </Pressable>
     </Animated.View>
   );
 };

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

@@ -17,41 +17,49 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { PropsWithChildren } from "react";
-import { KeyboardAvoidingView, Platform } from "react-native";
+import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
+import { Dimensions, Platform, View, useWindowDimensions } from "react-native";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
-import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { Header } from "../header";
-import SelectionHeader from "../selection-header";
+import useKeyboard from "../../hooks/use-keyboard";
+import { useThemeColors } from "@notesnook/theme";
 
 export const Container = ({ children }: PropsWithChildren) => {
-  const floating = useIsFloatingKeyboard();
-  const introCompleted = useSettingStore(
-    (state) => state.settings.introCompleted
-  );
+  const { colors } = useThemeColors();
   const insets = useGlobalSafeAreaInsets();
+  const keyboard = useKeyboard();
+  const [height, setHeight] = useState(0);
+  const windowHeightRef = useRef(Dimensions.get("window").height);
+  const { height: windowHeight } = useWindowDimensions();
+  const timerRef = useRef<NodeJS.Timeout>();
+  useEffect(() => {
+    if (windowHeight !== windowHeightRef.current) {
+      setHeight(0);
+      windowHeightRef.current = windowHeight;
+    }
+  }, [windowHeight]);
 
   return (
-    <KeyboardAvoidingView
-      behavior="padding"
-      enabled={Platform.OS === "ios" && !floating}
+    <View
       style={{
-        flex: 1,
         overflow: "hidden",
         paddingTop: Platform.OS === "android" ? 0 : insets.top,
-        paddingBottom: Platform.OS === "android" ? 0 : insets.bottom
+        paddingBottom: Platform.OS === "android" ? 0 : insets.bottom,
+        height: height || "100%",
+        width: "100%",
+        backgroundColor: colors.primary.background
+      }}
+      onLayout={(event) => {
+        const height = event.nativeEvent.layout.height;
+        clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+          if (!keyboard.keyboardShown) {
+            setHeight(height);
+          }
+        }, 500);
       }}
     >
-      {!introCompleted ? null : (
-        <>
-          <SelectionHeader />
-          <Header />
-        </>
-      )}
-
       {children}
-    </KeyboardAvoidingView>
+    </View>
   );
 };
 

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

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