mobile: cleanup

Show confirm dialog before deleting attachment in attachment manager

.github/pull_request_template.md

@@ -0,0 +1,30 @@
+## Description
+<!-- Add a detailed summary of what this feature/bugfix does -->
+
+## Type of Change
+- [ ] Bug fix
+- [ ] Feature
+
+## Visuals
+- [ ] Attached relevant screenshots / screen recording / GIF
+- [ ] N/A (not a feature or no UI changes)
+
+## Testing
+- [ ] Ran all E2E tests
+- [ ] Ran all integration tests
+- [ ] Added/updated tests for this change (if needed)
+- [ ] N/A (tests not needed — explanation provided below)
+
+### If tests were not added, explain why
+<!-- explanation -->
+
+## Platform
+<!-- Describe which platforms this PR is related to -->
+
+- [ ] Web
+- [ ] Mobile
+- [ ] Desktop
+
+## Sign-off
+- [ ] QA passed
+- [ ] UI/UX passed

.github/workflows/android.preview.firebase.yml

@@ -0,0 +1,135 @@
+name: Notesnook Android Preview
+
+on:
+  pull_request_target:
+    types: [opened, reopened, synchronize]
+    branches: [master, beta]
+    paths:
+      - "apps/mobile/**"
+      - "packages/**"
+      - ".github/workflows/android.preview.firebase.yml"
+
+jobs:
+  authorize:
+    environment: ${{ github.event_name == 'pull_request_target' &&
+      github.event.pull_request.head.repo.full_name != github.repository &&
+      'external' || 'internal' }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo true
+
+  build:
+    needs: authorize
+    runs-on: ubuntu-22.04
+    env:
+      STAGING_BUILD: true
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.ref }}
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Use specific Java version for the builds
+        uses: joschi/setup-jdk@v2
+        with:
+          java-version: "17"
+          architecture: "x64"
+
+      - name: Free Disk Space (Ubuntu)
+        uses: jlumbroso/free-disk-space@main
+        with:
+          # this might remove tools that are actually needed,
+          # if set to "true" but frees about 6 GB
+          tool-cache: false
+
+          # all of these default to true, but feel free to set to
+          # "false" if necessary for your workflow
+          android: false
+          dotnet: true
+          haskell: true
+          large-packages: true
+          docker-images: true
+          swap-storage: true
+
+      - name: Install node modules
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=mobile
+
+      - name: Make Gradlew Executable
+        run: cd apps/mobile/android && chmod +x ./gradlew
+
+      - name: Get build number
+        id: build-number
+        run: echo "timestamp=$(($(date +%s) - 1774851180 ))" >> $GITHUB_OUTPUT
+
+      - name: Check for typescript errors
+        run: |
+          npm run tx mobile:build
+          cd apps/mobile
+          npx tsc --noEmit
+
+      - name: Build arm64-v8a apk
+        run: |
+          cd apps/mobile/android
+          ./gradlew assembleRelease -PreactNativeArchitectures=arm64-v8a -PstagingReleaseBuild=true -PprBuildNumber=${{ steps.build-number.outputs.timestamp }}
+
+      - name: Get app version
+        id: package-version
+        uses: saionaro/extract-package-version@master
+        with:
+          path: apps/mobile
+
+      - name: Publish to firebase CLI
+        id: firebase-output
+        uses: wzieba/Firebase-Distribution-Github-Action@v1
+        with:
+          appId: ${{secrets.FIREBASE_APP_ID}}
+          serviceCredentialsFileContent: ${{ secrets.QA_SERVICE_ACCOUNT }}
+          groups: testers
+          file: apps/mobile/android/app/build/outputs/apk/release/app-arm64-v8a-release.apk
+          releaseNotes: Preview for https://github.com/streetwriters/notesnook/pull/${{github.event.number}}
+
+      - name: Post or update PR comment
+        uses: actions/github-script@v6
+        env:
+          preview_url: ${{ steps.firebase-output.outputs.TESTING_URI }}
+        with:
+          script: |
+            const marker = '<!-- android-preview-comment -->';
+            const prNumber = context.issue.number;
+            const previewUrl = process.env.preview_url || '';
+            const body = `${marker}\n**Android App Preview**\n\n${previewUrl || 'Preview URL unavailable — check workflow logs.'}\n\nCommit: ${process.env.GITHUB_SHA}\n`;
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: prNumber,
+            });
+            const existing = comments.find(c => c.body && c.body.includes(marker));
+            if (existing) {
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: existing.id,
+                body,
+              });
+            } else {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: prNumber,
+                body,
+              });
+            }
+
+      - name: Upload sourcemaps
+        uses: actions/upload-artifact@v4
+        with:
+          name: sourcemaps
+          path: |
+            apps/mobile/android/app/build/generated/sourcemaps/**/*.map

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

@@ -113,7 +113,7 @@ jobs:
           keyStorePassword: ${{ secrets.KEY_PASSWORD }}
           keyPassword: ${{ secrets.KEY_PASSWORD }}
         env:
-          BUILD_TOOLS_VERSION: "33.0.0"
+          BUILD_TOOLS_VERSION: "36.0.0"
 
       - name: Build apks for Github release
         run: yarn release:android
@@ -128,7 +128,7 @@ jobs:
           keyStorePassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
           keyPassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
         env:
-          BUILD_TOOLS_VERSION: "33.0.0"
+          BUILD_TOOLS_VERSION: "36.0.0"
 
       - name: Rename apk files
         run: |

.github/workflows/android.publish.yml

@@ -113,7 +113,7 @@ jobs:
           keyStorePassword: ${{ secrets.KEY_PASSWORD }}
           keyPassword: ${{ secrets.KEY_PASSWORD }}
         env:
-          BUILD_TOOLS_VERSION: "33.0.0"
+          BUILD_TOOLS_VERSION: "36.0.0"
 
       - name: Build apks for Github release
         run: yarn release:android
@@ -128,7 +128,7 @@ jobs:
           keyStorePassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
           keyPassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
         env:
-          BUILD_TOOLS_VERSION: "33.0.0"
+          BUILD_TOOLS_VERSION: "36.0.0"
 
       - name: Rename apk files
         run: |

.github/workflows/desktop.preview.yml

@@ -0,0 +1,301 @@
+name: Preview @notesnook/desktop
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+    branches: [master, beta]
+    paths:
+      - "apps/desktop/**"
+      - "apps/web/**"
+      - "packages/**"
+      # re-run workflow if workflow file changes
+      - ".github/workflows/desktop.preview.yml"
+
+jobs:
+  build:
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
+    name: Build
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=web
+          npm run bootstrap -- --scope=desktop
+
+      - name: Install sqlite-better-trigram for all arch
+        run: |
+          npm i --cpu arm64 sqlite-better-trigram
+          npm i --cpu x64 sqlite-better-trigram
+        working-directory: ./apps/desktop
+
+      - name: Generate desktop build (stable)
+        run: npm run tx @notesnook/web:build:desktop
+
+      - name: Build desktop bundle
+        working-directory: ./apps/desktop
+        run: npm run bundle
+
+      - name: Archive build artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: apps/web/build/**/*
+
+  build-macos:
+    name: Build for macOS
+    needs: build
+    runs-on: macos-14
+    outputs:
+      macos-artifact-url: ${{ steps.artifact-upload-step.outputs.artifact-url }}
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - 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/
+          echo '${{ secrets.api_key }}' > ~/private_keys/AuthKey_${{ secrets.api_key_id }}.p8
+
+      - name: Collect app metadata
+        id: app_metadata
+        working-directory: ./apps/desktop
+        run: |
+          echo ::set-output name=apple_app_id::$(cat package.json | jq -r .appAppleId)
+          echo ::set-output name=app_bundle_id::$(cat package.json | jq -r .build.appId)
+          echo ::set-output name=app_version::$(cat package.json | jq -r .version)
+          echo ::set-output name=bundle_version::$(cat package.json | jq -r .build.mac.bundleVersion)
+
+      - name: Download build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: ./apps/web/build
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
+
+      - name: Install sqlite-better-trigram for all arch
+        run: |
+          npm i --cpu arm64 sqlite-better-trigram
+          npm i --cpu x64 sqlite-better-trigram
+        working-directory: ./apps/desktop
+
+      - name: Install provisioning profile
+        run: echo "${{ secrets.MAC_PROVISIONING_PROFILE }}" | base64 --decode > embedded.provisionprofile
+        working-directory: ./apps/desktop
+
+      - name: Build dmg
+        env:
+          CSC_LINK: ${{ secrets.mac_certs }}
+          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_ISSUER: ${{ secrets.api_key_issuer_id }}
+          CSC_FOR_PULL_REQUEST: true
+        run: |
+          npm run tx @notesnook/desktop:release
+          cd apps/desktop
+          yarn electron-builder --config=electron-builder.config.js --mac dmg --arm64 -p never
+
+      - name: Upload dmg artifact
+        id: artifact-upload-step
+        uses: actions/upload-artifact@v4
+        with:
+          name: macos-build
+          path: apps/desktop/output/*.dmg
+
+  build-linux-x64:
+    name: Build for Linux x64
+    needs: build
+    runs-on: ubuntu-22.04
+    outputs:
+      linux-x64-artifact-url: ${{ steps.artifact-upload-step.outputs.artifact-url }}
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Download build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: ./apps/web/build
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
+
+      - name: Install sqlite-better-trigram for all arch
+        run: |
+          npm i --cpu x64 sqlite-better-trigram
+        working-directory: ./apps/desktop
+
+      - name: Build Electron wrapper
+        run: npm run tx @notesnook/desktop:release
+
+      - name: Build AppImage
+        run: yarn electron-builder --config=electron-builder.config.js --linux AppImage:x64 -p never
+        working-directory: ./apps/desktop
+
+      - name: Upload AppImage artifact
+        id: artifact-upload-step
+        uses: actions/upload-artifact@v4
+        with:
+          name: linux-x64-build
+          path: apps/desktop/output/*.AppImage
+
+  build-linux-arm64:
+    name: Build for Linux arm64
+    needs: build
+    runs-on: ubuntu-22.04-arm
+    outputs:
+      linux-arm64-artifact-url: ${{ steps.artifact-upload-step.outputs.artifact-url }}
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Download build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: ./apps/web/build
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
+
+      - name: Install sqlite-better-trigram for all arch
+        run: |
+          npm i --cpu arm64 sqlite-better-trigram
+        working-directory: ./apps/desktop
+
+      - name: Build Electron wrapper
+        run: npm run tx @notesnook/desktop:release
+
+      - name: Build AppImage
+        run: yarn electron-builder --config=electron-builder.config.js --linux AppImage:arm64 -p never
+        working-directory: ./apps/desktop
+
+      - name: Upload AppImage artifact
+        id: artifact-upload-step
+        uses: actions/upload-artifact@v4
+        with:
+          name: linux-arm64-build
+          path: apps/desktop/output/*.AppImage
+
+  build-windows:
+    name: Build for Windows
+    needs: build
+    runs-on: windows-latest
+    outputs:
+      windows-artifact-url: ${{ steps.artifact-upload-step.outputs.artifact-url }}
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Download build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: ./apps/web/build
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
+
+      - name: Install sqlite-better-trigram for all arch
+        run: |
+          npm i --cpu arm64 sqlite-better-trigram
+          npm i --cpu x64 sqlite-better-trigram
+
+          npm i --cpu arm64 sqlite3-fts5-html
+          npm i --cpu x64 sqlite3-fts5-html
+        working-directory: ./apps/desktop
+
+      - name: Build
+        run: node scripts/execute.mjs @notesnook/desktop:release
+
+      - name: Publish
+        env:
+          NOTESNOOK_STAGING: true
+        run: yarn electron-builder --config=electron-builder.config.js --win nsis:x64 --publish never
+        working-directory: ./apps/desktop
+
+      - name: Upload exe artifact
+        id: artifact-upload-step
+        uses: actions/upload-artifact@v4
+        with:
+          name: windows-build
+          path: apps/desktop/output/*.exe
+
+  post-pr-comment:
+    name: Post PR comment with preview URLs
+    needs:
+      [build, build-macos, build-linux-x64, build-linux-arm64, build-windows]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Post or update PR comment
+        uses: actions/github-script@v6
+        env:
+          macos_artifact_url: ${{ needs.build-macos.outputs.macos-artifact-url }}
+          linux_x64_artifact_url: ${{ needs.build-linux-x64.outputs.linux-x64-artifact-url }}
+          linux_arm64_artifact_url: ${{ needs.build-linux-arm64.outputs.linux-arm64-artifact-url }}
+          windows_artifact_url: ${{ needs.build-windows.outputs.windows-artifact-url }}
+        with:
+          script: |
+            const marker = '<!-- desktop-preview-comment -->';
+            const prNumber = context.issue.number;
+            const previewUrl = [
+              { platform: 'macOS', url: process.env.macos_artifact_url },
+              { platform: 'Linux x64', url: process.env.linux_x64_artifact_url },
+              { platform: 'Linux arm64', url: process.env.linux_arm64_artifact_url },
+              { platform: 'Windows x64', url: process.env.windows_artifact_url },
+            ].filter(u => u.url).map(u => `- [${u.platform}](${u.url})`).join('\n');
+            const body = `${marker}\n**Desktop Previews**\n\n${previewUrl || 'Preview URL unavailable — check workflow logs.'}\n\nCommit: ${process.env.GITHUB_SHA}\n`;
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: prNumber,
+            });
+            const existing = comments.find(c => c.body && c.body.includes(marker));
+            if (existing) {
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: existing.id,
+                body,
+              });
+            } else {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: prNumber,
+                body,
+              });
+            }

.github/workflows/ios.preview.firebase.yml

@@ -0,0 +1,168 @@
+name: Notesnook iOS Preview
+
+on:
+  pull_request_target:
+    types: [opened, reopened, synchronize]
+    branches: [master, beta]
+    paths:
+      - "apps/mobile/**"
+      - "packages/**"
+      - ".github/workflows/ios.preview.firebase.yml"
+
+jobs:
+  authorize:
+    environment: ${{ github.event_name == 'pull_request_target' &&
+      github.event.pull_request.head.repo.full_name != github.repository &&
+      'external' || 'internal' }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo true
+
+  build:
+    needs: authorize
+    runs-on: macos-26
+    timeout-minutes: 60
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.ref }}
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Setup Xcode
+        uses: maxim-lobanov/setup-xcode@v1
+        with:
+          xcode-version: "26.1.1"
+
+      - name: Install node modules
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=mobile
+
+      - name: Build packages
+        run: npm run tx @notesnook/mobile:build
+
+      - name: Cache Pods
+        uses: actions/cache@v3
+        id: pods-cache
+        with:
+          path: apps/mobile/ios/Pods
+          key: ${{ runner.os }}-pods-${{ hashFiles('apps/mobile/ios/Podfile.lock') }}
+
+      - name: Install Pods
+        run: |
+          cd apps/mobile/ios
+          pod install
+
+      - name: Check for typescript errors
+        run: |
+          npm run tx mobile:build
+          cd apps/mobile
+          npx tsc --noEmit
+
+      - name: Get marketing version
+        id: marketing-version
+        run: echo "version=$(grep "IOS_MARKETING_VERSION" apps/mobile/ios/build-configs/ios-build.staging.xcconfig | awk -F'=' '{print $2}' | xargs)" >> $GITHUB_OUTPUT
+
+      - name: Get build number
+        id: build-number
+        run: echo "timestamp=$(($(date +%s) - 1774851180 ))" >> $GITHUB_OUTPUT
+
+      - name: Make staging xcconfig active
+        run: |
+          cd apps/mobile/ios/build-configs
+          ./use-ios-build-config.sh staging --marketing-version ${{steps.marketing-version.outputs.version}} --build-number ${{steps.build-number.outputs.timestamp}}
+
+      - name: Build iOS App
+        uses: ammarahm-ed/ios-build-action@master
+        with:
+          bundle-identifier: org.streetwriters.notesnook
+          scheme: Notesnook
+          configuration: "Release"
+          export-options: apps/mobile/ios/ExportOptionsStaging.plist
+          export-method: "ad-hoc"
+          project-path: apps/mobile/ios/Notesnook.xcodeproj
+          workspace-path: apps/mobile/ios/Notesnook.xcworkspace
+          update-targets: |
+            Notesnook
+            Make Note
+            NotesWidgetExtension
+          disable-targets: Notesnook-tvOS,Notesnook-tvOSTests,NotesnookTests
+          code-signing-identity: Apple Distribution
+          team-id: ${{ secrets.APPLE_TEAM_ID }}
+          p12-base64: ${{ secrets.APPLE_CERTIFICATE_P12 }}
+          certificate-password: ${{ secrets.APPLE_CERTIFICATE_P12_PASSWORD }}
+          app-store-connect-api-key-issuer-id: ${{ secrets.API_KEY_ISSUER_ID }}
+          app-store-connect-api-key-id: ${{ secrets.APPSTORE_KEY_ID }}
+          app-store-connect-api-key-base64: ${{ secrets.APPSTORE_CONNECT_API_KEY_BASE64 }}
+          output-path: Notesnook.ipa
+          mobileprovision-base64: |
+            ${{ secrets.APPLE_MOBILE_PROVISION_ADHOC_APP }}
+            ${{ secrets.APPLE_MOBILE_PROVISION_ADHOC_SHARE }}
+            ${{ secrets.APPLE_MOBILE_PROVISION_ADHOC_WIDGET }}
+
+      - name: Upload IPA artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: ios-preview-ipa
+          path: Notesnook.ipa
+          if-no-files-found: error
+          retention-days: 1
+
+  publish:
+    runs-on: ubuntu-latest
+    needs: build
+    timeout-minutes: 20
+
+    steps:
+      - name: Download IPA artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: ios-preview-ipa
+          path: .
+
+      - name: Publish to firebase CLI
+        id: firebase-output
+        uses: wzieba/Firebase-Distribution-Github-Action@v1
+        with:
+          appId: ${{secrets.FIREBASE_IOS_APP_ID}}
+          serviceCredentialsFileContent: ${{ secrets.QA_SERVICE_ACCOUNT }}
+          groups: testers
+          file: Notesnook.ipa
+          releaseNotes: Preview for https://github.com/streetwriters/notesnook/pull/${{github.event.number}}
+
+      - name: Post or update PR comment
+        uses: actions/github-script@v6
+        env:
+          preview_url: ${{ steps.firebase-output.outputs.TESTING_URI }}
+        with:
+          script: |
+            const marker = '<!-- ios-preview-comment -->';
+            const prNumber = context.issue.number;
+            const previewUrl = process.env.preview_url || '';
+            const body = `${marker}\n**iOS App Preview**\n\n${previewUrl || 'Preview URL unavailable — check workflow logs.'}\n\nCommit: ${process.env.GITHUB_SHA}\n`;
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: prNumber,
+            });
+            const existing = comments.find(c => c.body && c.body.includes(marker));
+            if (existing) {
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: existing.id,
+                body,
+              });
+            } else {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: prNumber,
+                body,
+              });
+            }

.github/workflows/themes.publish.yml

@@ -0,0 +1,78 @@
+# 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/themes-server
+
+on: workflow_dispatch
+
+jobs:
+  push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-22.04
+    permissions:
+      packages: write
+      contents: read
+      attestations: write
+      id-token: write
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+
+      - name: Collect package metadata
+        id: package_metadata
+        working-directory: ./servers/themes
+        run: |
+          echo ::set-output name=app_version::$(cat package.json | jq -r .version)
+
+      # Setup Buildx
+      - name: Docker Setup Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          platforms: linux/amd64,linux/arm64
+
+      - 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/themes-server: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/themes-server
+
+      - name: Build and push Docker image
+        id: push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: servers/themes/Dockerfile
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: streetwriters/themes-server:${{ steps.package_metadata.outputs.app_version }},streetwriters/themes-server:latest
+          cache-from: streetwriters/themes-server:latest
+
+      - name: Generate artifact attestation
+        uses: actions/attest-build-provenance@v1
+        with:
+          subject-name: index.docker.io/streetwriters/themes-server
+          subject-digest: ${{ steps.push.outputs.digest }}
+          push-to-registry: true

.github/workflows/web.benchmarks.yml

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

.github/workflows/web.preview.yml

@@ -0,0 +1,80 @@
+name: Notesnook Web PR Preview
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+    branches: [master, beta]
+    paths:
+      - "apps/web/**"
+      - "packages/**"
+      # re-run workflow if workflow file changes
+      - ".github/workflows/web.preview.yml"
+
+jobs:
+  build-and-deploy:
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
+    runs-on: ubuntu-latest
+    env:
+      CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+      CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build web
+        run: npm run build:web
+
+      - name: Deploy to Cloudflare Pages
+        id: deploy
+        working-directory: ./apps/web
+        run: |
+          set -euo pipefail
+          BRANCH=pr-${{ github.event.number }}-$(echo "${{ github.sha }}" | cut -c1-7)
+          echo "Deploying branch: $BRANCH"
+          DEPLOY_OUT=$(npx --yes wrangler pages deploy --project-name=notesnook-app --branch="$BRANCH" ./build 2>&1) || { echo "$DEPLOY_OUT"; exit 1; }
+          echo "$DEPLOY_OUT"
+          PREVIEW_URL=$(printf "%s" "$DEPLOY_OUT" | grep -Eo 'https?://[^ ]+' | head -1 || true)
+          if [ -z "$PREVIEW_URL" ]; then
+            echo "WARNING: could not parse preview URL from wrangler output"
+          fi
+          echo "preview_url=$PREVIEW_URL" >> $GITHUB_ENV
+
+      - name: Post or update PR comment
+        uses: actions/github-script@v6
+        env:
+          preview_url: ${{ env.preview_url }}
+        with:
+          script: |
+            const marker = '<!-- pages-preview-comment -->';
+            const prNumber = context.issue.number;
+            const previewUrl = process.env.preview_url || '';
+            const body = `${marker}\n**Cloudflare Pages Preview**\n\n${previewUrl || 'Preview URL unavailable — check workflow logs.'}\n\nCommit: ${process.env.GITHUB_SHA}\n`;
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: prNumber,
+            });
+            const existing = comments.find(c => c.body && c.body.includes(marker));
+            if (existing) {
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: existing.id,
+                body,
+              });
+            } else {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: prNumber,
+                body,
+              });
+            }

.npmrc

@@ -0,0 +1,2 @@
+min-release-age=7 # days
+# ignore-scripts=true

apps/desktop/electron-builder.config.js

@@ -198,6 +198,9 @@ module.exports = {
       }
     }
   },
+  toolsets: {
+    appimage: "1.0.2"
+  },
   snap: {
     autoStart: false,
     confinement: "strict",

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "3.3.7",
+  "version": "3.3.17",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/cjs/index.js",
@@ -48,7 +48,7 @@
     "@types/yargs": "^17.0.33",
     "chokidar": "^4.0.3",
     "electron": "^37.0.0",
-    "electron-builder": "^26.0.12",
+    "electron-builder": "^26.8.1",
     "esbuild": "0.21.5",
     "node-abi": "^4.5.0",
     "node-gyp-build": "^4.8.4",

apps/desktop/scripts/dev.mjs

@@ -27,6 +27,7 @@ import crypto from "crypto";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
+const root = path.join(__dirname, "..");
 const RUNNING_PROCESSES = [];
 const RESTARTABLE_PROCESSES = [];
 let lastBundleHash = null;
@@ -36,7 +37,7 @@ const ENV = {
   FORCE_COLOR: "false",
   COLOR: "0"
 };
-process.chdir(path.join(__dirname, ".."));
+process.chdir(root);
 
 await onChange(true);
 
@@ -55,13 +56,16 @@ async function onChange(first) {
   if (first) {
     await fs.rm("./build/", { force: true, recursive: true });
 
-    await exec("npm rebuild electron --verbose --foreground-scripts");
+    await exec(
+      "npm run postinstall --verbose",
+      path.join(root, "node_modules", "electron")
+    );
 
-    await exec("yarn electron-builder install-app-deps");
+    await exec("yarn electron-builder install-app-deps", root);
   }
 
-  await exec(`yarn run bundle`);
-  await exec(`yarn run build`);
+  await exec(`yarn run bundle`, root);
+  await exec(`yarn run build`, root);
 
   if (await isBundleSame()) {
     console.log("Bundle is same. Doing nothing.");
@@ -111,7 +115,7 @@ function spawnAndWaitUntil(cmd, cwd, predicate) {
 
 async function exec(cmd, cwd) {
   try {
-    console.log(">", cmd);
+    console.log(">", cmd, cwd);
 
     return execSync(cmd, {
       env: ENV,

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

@@ -178,7 +178,9 @@ export const osIntegrationRouter = t.router({
         })
       });
       notification.show();
-      if (input.urgency === "critical") {
+      if (input.urgency === "critical" && process.platform !== "linux") {
+        // due to an Electron bug in versions below 40.x, shell.beep() causes a segfault on Linux.
+        // TODO: Remove when migrating to Electron 40.x or newer.
         shell.beep();
       }
 
@@ -252,6 +254,7 @@ export const osIntegrationRouter = t.router({
           if (menuItem) menu.append(menuItem);
         }
         if (menu.items.length > 0) menu.popup();
+        menu.on("menu-will-close", () => emit.next([]));
         return () => {
           menu.removeAllListeners();
           menu.closePopup();

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

@@ -113,7 +113,8 @@ export class SQLite {
         };
       }
     } catch (e) {
-      if (e instanceof Error) e.message += ` (query: ${sql})`;
+      if (e instanceof Error)
+        throw rewriteError(e, `${e.message} (query: ${sql})`);
       throw e;
     } finally {
       // Since SQLite 3.48.0 (SQLite3MC v2.0.2) it's not possible to load fts5
@@ -212,3 +213,11 @@ function getExtensionPath(extensionName: string, entryPoint: string) {
   }
   return loadablePath;
 }
+
+function rewriteError(e: Error, message: string) {
+  const error = new Error(message);
+  error.stack = e.stack;
+  error.name = e.name;
+  error.cause = e.cause;
+  return error;
+}

apps/desktop/src/api/window.ts

@@ -34,6 +34,17 @@ export const windowRouter = t.router({
   }),
   maximized: t.procedure.query(() => globalThis.window?.isMaximized()),
   fullscreen: t.procedure.query(() => globalThis.window?.isFullScreen()),
+  onClose: t.procedure.subscription(() => {
+    return observable<void>((emit) => {
+      function listener() {
+        emit.next();
+      }
+      globalThis.window?.addListener("close", listener);
+      return () => {
+        globalThis.window?.removeListener("close", listener);
+      };
+    });
+  }),
   onWindowStateChanged: t.procedure.subscription(() => {
     return observable<{ maximized: boolean; fullscreen: boolean }>((emit) => {
       function listener() {

apps/desktop/src/main.ts

@@ -52,6 +52,9 @@ locale.then(({ default: locale }) => {
 });
 setI18nGlobal(i18n);
 
+const appHostnames = isDevelopment()
+  ? ["localhost", "127.0.0.1"]
+  : ["app.notesnook.com"];
 // only run a single instance
 if (!MAC_APP_STORE && !app.requestSingleInstanceLock()) {
   console.log("Another instance is already running!");
@@ -173,6 +176,19 @@ async function createWindow() {
     return { action: "deny" };
   });
 
+  mainWindow.webContents.on("will-navigate", (event, url) => {
+    try {
+      const parsedUrl = new URL(url);
+      if (!appHostnames.includes(parsedUrl.hostname)) {
+        event.preventDefault();
+        shell.openExternal(url);
+      }
+    } catch (e) {
+      console.error("will-navigate: failed to parse URL", url, e);
+      event.preventDefault();
+    }
+  });
+
   nativeTheme.on("updated", () => {
     setupTray();
     setupJumplist();

apps/desktop/src/utils/autolaunch.ts

@@ -39,7 +39,7 @@ const LINUX_AUTOSTART_DIRECTORY_PATH = path.join(
   "autostart"
 );
 
-const STARTUP_ARGS = ["--hidden"];
+const HIDDEN_ARG = "--hidden";
 
 export class AutoLaunch {
   static enable(hidden: boolean) {
@@ -54,13 +54,13 @@ export class AutoLaunch {
       );
     } else {
       const loginItemSettings = app.getLoginItemSettings({
-        args: STARTUP_ARGS
+        args: hidden ? [HIDDEN_ARG] : undefined
       });
       if (loginItemSettings.openAtLogin) return;
       app.setLoginItemSettings({
         openAtLogin: true,
         openAsHidden: hidden,
-        args: STARTUP_ARGS
+        args: hidden ? [HIDDEN_ARG] : undefined
       });
     }
   }

apps/desktop/src/utils/autoupdater.ts

@@ -37,7 +37,11 @@ async function configureAutoUpdater() {
     config.releaseTrack === "stable" &&
     autoUpdater.currentVersion.prerelease.length > 0;
   autoUpdater.allowPrerelease = false;
-  autoUpdater.autoInstallOnAppQuit = true;
+  // Do NOT auto-install on quit. On Windows, if the system shuts down while
+  // the NSIS installer is running, it first removes all old files and then
+  // gets killed before copying new ones — leaving an empty install directory.
+  // Updates should only be installed when the user explicitly triggers it.
+  autoUpdater.autoInstallOnAppQuit = false;
   autoUpdater.disableWebInstaller = true;
 }
 

apps/desktop/src/utils/protocol.ts

@@ -62,7 +62,17 @@ function registerProtocol() {
         headers: { "Content-Type": extensionToMimeType[fileExtension] }
       });
     } else {
-      return net.fetch(request, { bypassCustomProtocolHandlers: true });
+      const requestHeaders = new Headers(request.headers);
+      if (!requestHeaders.has("referer"))
+        requestHeaders.set("referer", PROTOCOL_URL);
+      return await net.fetch(
+        new Request(request, {
+          headers: requestHeaders
+        }),
+        {
+          bypassCustomProtocolHandlers: true
+        }
+      );
     }
   });
   console.info(`${SCHEME} protocol inteception "successful"`);

apps/mobile/README.md

@@ -3,10 +3,8 @@
 </p>
 
 <h1 align="center">Notesnook Mobile</h1>
-<h3 align="center">The mobile app is built using React Native, Typescript & Javascript for both iOS & Android.</h3>
-<p align="center">
-<a href="#developer-guide">Developer guide</a> | <a href="#build-instructions">How to build?</a>
-</p>
+<h3 align="center">The mobile app is built with React Native for both iOS and Android.</h3>
+<p align="center"><a href="#build-instructions">Build instructions</a> | <a href="#developer-guide">Developer guide</a> | <a href="#running-e2e-tests-detox">E2E tests</a></p>
 
 <p align="center">
     <a href="https://play.google.com/store/apps/details?id=com.streetwriters.notesnook">
@@ -25,21 +23,21 @@
 
 Requirements:
 
-1. [Node.js](https://nodejs.org/en/download/)
+1. [Node.js](https://nodejs.org/en/download/) 20+ (the repo is pinned to Node `22.20.0` via Volta)
 2. [git](https://git-scm.com/downloads)
-3. NPM (not yarn or pnpm)
-4. [React Native](https://reactnative.dev/docs/environment-setup)
+3. `npm`
+4. [React Native environment setup](https://reactnative.dev/docs/set-up-your-environment)
 
-To run the app locally, you will need to setup React Native on your system:
+To run the app locally, first complete React Native native tooling setup:
 
-1. Open the official [environment setup guide here](https://reactnative.dev/docs/environment-setup)
+1. Open [React Native environment setup](https://reactnative.dev/docs/set-up-your-environment)
 2. Select `React Native CLI Quickstart`
-3. Select your OS & the platform to run the app on (iOS or Android)
+3. Select your OS and target platform(s): iOS and/or Android
 4. Follow the steps listed.
 
-> Please keep in mind that **Expo is not supported**.
+> Expo is not used in this project.
 
-Once you have completed the setup, the first step is to `clone` the monorepo:
+Clone the monorepo:
 
 ```bash
 git clone https://github.com/streetwriters/notesnook.git
@@ -48,26 +46,27 @@ git clone https://github.com/streetwriters/notesnook.git
 cd notesnook
 ```
 
-Once you are inside the `./notesnook` directory, run the preparation step:
+Install dependencies and bootstrap the mobile workspace:
 
 ```bash
 # this might take a while to complete
 npm install
+npm run bootstrap -- --scope=mobile
 ```
 
 ### Running the app on Android
 
-[Setup an Android emulator from Android Studio](https://developer.android.com/studio/run/managing-avds) if you haven't already, and then run the following command to start the app in the Emulator:
+[Set up an Android emulator from Android Studio](https://developer.android.com/studio/run/managing-avds) (or connect a physical device), then run:
 
 ```bash
 npm run start:android
 ```
 
-If you want to run the app on your phone, make sure to [enable USB debugging](https://developer.android.com/studio/debug/dev-options).
+If you are using a physical device, enable [USB debugging](https://developer.android.com/studio/debug/dev-options).
 
 ### Running the app on iOS
 
-To run the app on iOS:
+Install CocoaPods dependencies first, then run the iOS app:
 
 ```bash
 # this might take a while to complete
@@ -76,90 +75,87 @@ npm run prepare:ios
 npm run start:ios
 ```
 
+### Useful development commands
+
+```bash
+# start Metro only
+npm run start:metro
+
+# start Re.Pack bundler
+npm run start:repack
+```
+
 ## Developer guide
 
-> This project is in a transition state between Javascript & Typescript. We are gradually porting everything over to Typescript, so if you can help with that, it'd be great!
+> The mobile app is a mixed TypeScript/JavaScript codebase.
 
 ### The tech stack
 
 We try to keep the stack as lean as possible:
 
-1. React Native
-2. Typescript/Javascript
-3. Zustand: State management
-4. Detox: Runs all our e2e tests
-5. React Native MMKV: Database & persistence
-6. libsodium: Encryption
+1. React Native `0.82`
+2. React `19`
+3. TypeScript + JavaScript
+4. Zustand (state management)
+5. Detox (end-to-end testing)
+6. libsodium (encryption)
 
 ### Project structure
 
-The app codebase is distributed over two primary directories. `native/` and `app/`.
+Top-level directories in `apps/mobile/`:
 
-- `native/`: Includes `android/` and `ios/` folders and everything related to react native core functionality like bundling, development, and packaging. Any react-native dependency with native code, i.e., android & ios folders, is installed here.
+- `app/`: Main React Native app source (`components`, `common`, `hooks`, `navigation`, `screens`, `services`, `stores`, `utils`, etc.)
+- `android/`: Android native project
+- `ios/`: iOS native project
+- `e2e/`: Detox test suite and config
+- `patches/`: `patch-package` patches
+- `scripts/`: Mobile-specific scripts
 
-- `app/`: Includes all the app code other than the native part. All JS-only dependencies are installed here.
-  - `components/`: Each component serves a specific purpose in the app UI. For example, the `Paragraph` component is used to render paragraphs in the app, and a `Header` component is used to render a `header` on all screens.
-  - `common/`: Features that are integral to the app's functionality. For example, the notesnook core is initialized here.
-  - `hooks/`: Hooks for different app logic
-  - `navigation/`: Includes app navigation-specific code. Here the app navigation, editor & side menu are rendered side by side in fluid tabs.
-  - `screens`: Navigator screens.
-  - `services`: Parts of code that do a specific function. For example, the `sync` service runs Sync from anywhere in the app.
-  - `stores`: We use `zustand` for global state management in the app. Multiple stores provide the state for different parts of the app.
-  - `utils`: General purpose stuff such as constant values, utility functions, etc.
+## Running E2E tests (Detox)
 
-There are several other folders at the root:
+Detox device defaults in this repo:
 
-- `share/`: Code for the iOS Share Extension and Android widget.
-- `e2e/`: Detox End to end tests
-- `patches/`: Patches for various react native dependencies.
-
-### Running the tests
-
-When you are done making the required changes, you must run the tests to ensure you didn't break anything. We use Detox as the testing framework & the tests can be started as follows:
+- Android emulator: `Pixel_5_API_36`
+- iOS simulator: `iPhone 17 Pro Max`
 
 ### Android
 
-To run the tests on Android, you will need to create an emulator device on your system:
+Build and run Android Detox tests:
 
-```
-$ANDROID_HOME/tools/bin/avdmanager create avd -n Pixel_5_API_31 -d pixel --package "system-images;android-31;default;x86_64"
-```
-
-If you face problems, follow the detailed guide in [Detox documentation](https://wix.github.io/Detox/docs/introduction/android-dev-env). Keep the emulator name set to `Pixel_5_API_31`.
-
-Once you have created an emulator device, build the Android apks:
-
-```
+```bash
 npm run build:android
-```
-
-Finally, run the tests:
-
-```
 npm run test:android
 ```
 
+For debug configuration:
+
+```bash
+npm run build:android:debug
+npm run start:metro
+npm run test:android:debug
+```
+
 ### iOS
 
-To run e2e tests on the iOS simulator, you must be on a Mac with XCode installed.
-
-First, install [AppleSimulatorUtils](https://github.com/wix/AppleSimulatorUtils):
+Build and run iOS Detox tests:
 
+```bash
+npm run build:ios
+npm run test:ios
 ```
+
+If simulator tooling is missing, install [AppleSimulatorUtils](https://github.com/wix/AppleSimulatorUtils):
+
+```bash
 brew tap wix/brew
 brew install applesimutils
 ```
 
-Now build the iOS app for testing:
+## Release commands
 
-```
-npm run build:ios
-```
-
-Finally, run the tests:
+Android release helpers:
 
+```bash
+npm run release:android
+npm run release:android:bundle
 ```
-npm run test:ios
-```
-
-All tests on iOS are configured to run on `iPhone 8` simulator.

apps/mobile/android/app/build.gradle

@@ -5,6 +5,7 @@ apply plugin: 'kotlin-parcelize'
 
 apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
 
+
 import com.android.build.OutputFile
 import groovy.json.JsonSlurper
 import org.apache.tools.ant.taskdefs.condition.Os
@@ -94,6 +95,18 @@ def fdroidBuild() {
     return project.hasProperty("fdroidBuild") && project.fdroidBuild == "true"
 }
 
+def prBuildNumber() {
+    def value = project.getProperties().get("prBuildNumber")
+    return value ? value : "1000"
+}
+
+def stagingReleaseBuild() {
+    // Enable with STAGING_BUILDtrue or -PstagingReleaseBuild=true
+    def fromEnv = System.getenv("STAGING_BUILD") == "true"
+    def fromProp = project.hasProperty("stagingReleaseBuild") && project.stagingReleaseBuild == "true"
+    return fromEnv || fromProp
+}
+
 def getNpmVersion() {
     def inputFile = file("$rootDir/../package.json")
     def jsonPackage = new JsonSlurper().parseText(inputFile.text)
@@ -118,14 +131,17 @@ android {
         sourceCompatibility JavaVersion.VERSION_1_8
         targetCompatibility JavaVersion.VERSION_1_8
     }
-    
     namespace "com.streetwriters.notesnook"
     defaultConfig {
         applicationId "com.streetwriters.notesnook"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled true
-        versionCode 3087
+        if (project.hasProperty("prBuildNumber")) {
+            versionCode Integer.parseInt(prBuildNumber())
+        } else {
+            versionCode 3103
+        }
         versionName getNpmVersion()
         testBuildType System.getProperty('testBuildType', 'debug')
         testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
@@ -192,6 +208,8 @@ android {
                     output.versionCodeOverride =
                        defaultConfig.versionCode * 5 + versionCodes.get(abi)
                     println("Fdroid Version code: ${output.versionCodeOverride} for abi ${versionCodes.get(abi)}");
+                } else if (stagingReleaseBuild()) {
+                    output.versionCodeOverride = defaultConfig.versionCode + versionCodes.get(abi)
                 } else {
                     if (isBuildingAAB) {
                         output.versionCodeOverride = 4 * 1048576 + defaultConfig.versionCode
@@ -233,7 +251,6 @@ dependencies {
     } else {
         implementation jscFlavor
     }
-    
 
 }
 

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

@@ -199,11 +199,7 @@
             </intent-filter>
         </activity>
 
-        <service
-            android:name=".OnClearFromRecentService"
-            android:enabled="true"
-            android:exported="true"
-            android:stopWithTask="false" />
+
         <service android:name="com.asterinet.react.bgactions.RNBackgroundActionsTask" />
 
         <service

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

@@ -39,28 +39,32 @@ public class BootTaskService extends HeadlessJsTaskService {
 
     @Override
     public int onStartCommand(Intent intent, int flags, int startId) {
-        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
-            NotificationChannel channel = new NotificationChannel("com.streetwriters.notesnook",
-                    "Default",
-                    NotificationManager.IMPORTANCE_DEFAULT);
+        try {
+            if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
+                NotificationChannel channel = new NotificationChannel("com.streetwriters.notesnook",
+                        "Default",
+                        NotificationManager.IMPORTANCE_DEFAULT);
+
+                ((NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE)).createNotificationChannel(channel);
+                notification = new NotificationCompat.Builder(this, channel.getId())
+                        .setContentTitle("Sync on boot")
+                        .setContentText("")
+                        .setSmallIcon(R.drawable.ic_stat_name)
+                        .build();
+                if (android.os.Build.VERSION.SDK_INT >= 34) {
+                    this.startForeground(
+                            1,
+                            notification,
+                            ServiceInfo.FOREGROUND_SERVICE_TYPE_SPECIAL_USE);
+                } else {
+                    this.startForeground(
+                            1,
+                            notification);
+                }
 
-            ((NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE)).createNotificationChannel(channel);
-            notification = new NotificationCompat.Builder(this, channel.getId())
-                    .setContentTitle("Sync on boot")
-                    .setContentText("")
-                    .setSmallIcon(R.drawable.ic_stat_name)
-                    .build();
-            if (android.os.Build.VERSION.SDK_INT >= 34) {
-                this.startForeground(
-                        1,
-                        notification,
-                        ServiceInfo.FOREGROUND_SERVICE_TYPE_SPECIAL_USE);
-            } else {
-                this.startForeground(
-                        1,
-                        notification);
             }
-
+        } catch (Exception ignored) {
+            stopSelf(startId);
         }
 
         return super.onStartCommand(intent, flags, startId);

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

@@ -28,10 +28,6 @@ public class MainActivity extends ReactActivity {
       WebView.setWebContentsDebuggingEnabled(true);
     }
 
-    try {
-      startService(new Intent(getBaseContext(), OnClearFromRecentService.class));
-    } catch (Exception ignored) {}
-
   }
 
   /**

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

@@ -1,36 +0,0 @@
-package com.streetwriters.notesnook;
-import android.app.Service;
-import android.content.Intent;
-import android.content.SharedPreferences;
-import android.os.IBinder;
-import android.util.Log;
-
-public class OnClearFromRecentService extends Service {
-
-    @Override
-    public IBinder onBind(Intent intent) {
-        return null;
-    }
-
-    @Override
-    public int onStartCommand(Intent intent, int flags, int startId) {
-        return START_NOT_STICKY;
-    }
-
-    @Override
-    public void onDestroy() {
-        super.onDestroy();
-    }
-
-    @Override
-    public void onTaskRemoved(Intent rootIntent) {
-        try {
-            SharedPreferences appStateDetails = getApplicationContext().getSharedPreferences("appStateDetails", MODE_PRIVATE);
-            SharedPreferences.Editor edit = appStateDetails.edit();
-            edit.remove("appState");
-            edit.apply();
-            stopSelf();
-        } catch (UnsatisfiedLinkError | Exception e) {
-        }
-    }
-}

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

@@ -6,7 +6,14 @@ import android.content.ComponentName;
 import android.content.Context;
 import android.content.Intent;
 import android.content.SharedPreferences;
+import android.content.pm.ShortcutInfo;
+import android.content.pm.ShortcutManager;
+import android.graphics.Bitmap;
+import android.graphics.Canvas;
 import android.graphics.Color;
+import android.graphics.Paint;
+import android.graphics.RectF;
+import android.graphics.drawable.Icon;
 import android.os.Build;
 import android.os.Bundle;
 import android.provider.Settings;
@@ -29,6 +36,7 @@ import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
 import java.util.Objects;
+import java.util.Set;
 
 
 public class RCTNNativeModule extends ReactContextBaseJavaModule {
@@ -85,21 +93,6 @@ public class RCTNNativeModule extends ReactContextBaseJavaModule {
         }
     }
 
-    @ReactMethod
-    public void setAppState(final String appState) {
-        SharedPreferences appStateDetails = getReactApplicationContext().getSharedPreferences("appStateDetails", Context.MODE_PRIVATE);
-        SharedPreferences.Editor edit = appStateDetails.edit();
-        edit.putString("appState", appState);
-        edit.apply();
-    }
-
-    @ReactMethod(isBlockingSynchronousMethod = true)
-    public String getAppState() {
-        SharedPreferences appStateDetails = getReactApplicationContext().getSharedPreferences("appStateDetails", Context.MODE_PRIVATE);
-        String appStateValue = appStateDetails.getString("appState", "");
-        return appStateValue.isEmpty() ? null : appStateValue;
-    }
-
     @ReactMethod(isBlockingSynchronousMethod = true)
     public int getWidgetId() {
         return NotePreviewConfigureActivity.appWidgetId;
@@ -237,6 +230,221 @@ public class RCTNNativeModule extends ReactContextBaseJavaModule {
         }
     }
 
+    @ReactMethod
+    public void addShortcut(final String id, final String type, final String title, final String description, final String color, Promise promise) {
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
+            promise.reject("UNSUPPORTED", "Pinned launcher shortcuts require Android 8.0 or higher");
+            return;
+        }
 
+        try {
+            ShortcutManager shortcutManager = mContext.getSystemService(ShortcutManager.class);
+            if (shortcutManager == null) {
+                promise.reject("ERROR", "ShortcutManager not available");
+                return;
+            }
+
+            String uri = "https://app.notesnook.com/open_" + type + "?id=" + id;
+            Intent intent = new Intent(Intent.ACTION_VIEW, android.net.Uri.parse(uri));
+            intent.setPackage(mContext.getPackageName());
+
+            Icon icon = createLetterIcon(type, title, color);
+            ShortcutInfo shortcut = new ShortcutInfo.Builder(mContext, id)
+                    .setShortLabel(title)
+                    .setLongLabel(description != null && !description.isEmpty() ? description : title)
+                    .setIcon(icon)
+                    .setCategories(Set.of(type))
+                    .setIntent(intent)
+                    .build();
+
+            shortcutManager.requestPinShortcut(shortcut, null);
+            promise.resolve(true);
+        } catch (Exception e) {
+            promise.reject("ERROR", e.getMessage());
+        }
+    }
+
+    @ReactMethod
+    public void removeShortcut(final String id, Promise promise) {
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
+            promise.reject("UNSUPPORTED", "Pinned launcher shortcuts require Android 8.0 or higher");
+            return;
+        }
+
+        try {
+            ShortcutManager shortcutManager = mContext.getSystemService(ShortcutManager.class);
+            if (shortcutManager == null) {
+                promise.reject("ERROR", "ShortcutManager not available");
+                return;
+            }
+
+            shortcutManager.disableShortcuts(java.util.Collections.singletonList(id));
+            promise.resolve(true);
+        } catch (Exception e) {
+            promise.reject("ERROR", e.getMessage());
+        }
+    }
+
+    @ReactMethod
+    public void updateShortcut(final String id, final String type, final String title, final String description,final String color, Promise promise) {
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
+            promise.reject("UNSUPPORTED", "Pinned launcher shortcuts require Android 8.0 or higher");
+            return;
+        }
+
+        try {
+            ShortcutManager shortcutManager = mContext.getSystemService(ShortcutManager.class);
+            if (shortcutManager == null) {
+                promise.reject("ERROR", "ShortcutManager not available");
+                return;
+            }
+
+            // Get existing shortcut to preserve icon and intent
+            List<ShortcutInfo> shortcuts = shortcutManager.getPinnedShortcuts();
+            ShortcutInfo existingShortcut = null;
+            for (ShortcutInfo s : shortcuts) {
+                if (s.getId().equals(id)) {
+                    existingShortcut = s;
+                    break;
+                }
+            }
+
+            if (existingShortcut == null) {
+                return;
+            }
+            Icon icon = createLetterIcon(type, title, color);
+            ShortcutInfo updatedShortcut = new ShortcutInfo.Builder(mContext, id)
+                    .setShortLabel(title)
+                    .setIcon(icon)
+                    .setLongLabel(description != null && !description.isEmpty() ? description : title)
+                    .setIntent(existingShortcut.getIntent())
+                    .build();
+
+            shortcutManager.updateShortcuts(java.util.Collections.singletonList(updatedShortcut));
+            promise.resolve(true);
+        } catch (Exception e) {
+            promise.reject("ERROR", e.getMessage());
+        }
+    }
+
+    @ReactMethod
+    public void removeAllShortcuts(Promise promise) {
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
+            promise.reject("UNSUPPORTED", "Pinned launcher shortcuts require Android 8.0 or higher");
+            return;
+        }
+
+        try {
+            ShortcutManager shortcutManager = mContext.getSystemService(ShortcutManager.class);
+            if (shortcutManager == null) {
+                promise.reject("ERROR", "ShortcutManager not available");
+                return;
+            }
+
+            List<ShortcutInfo> pinnedShortcuts = shortcutManager.getPinnedShortcuts();
+            if (!pinnedShortcuts.isEmpty()) {
+                List<String> ids = new ArrayList<>();
+                for (ShortcutInfo shortcut : pinnedShortcuts) {
+                    ids.add(shortcut.getId());
+                }
+                shortcutManager.disableShortcuts(ids);
+            }
+            promise.resolve(true);
+        } catch (Exception e) {
+            promise.reject("ERROR", e.getMessage());
+        }
+    }
+
+    @ReactMethod
+    public void getAllShortcuts(Promise promise) {
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
+            return;
+        }
+        ShortcutManager shortcutManager = mContext.getSystemService(ShortcutManager.class);
+        WritableArray shortcuts = Arguments.createArray();
+        List<ShortcutInfo> infos = shortcutManager.getPinnedShortcuts();
+
+        for (ShortcutInfo info: infos) {
+            WritableMap data = Arguments.createMap();
+            data.putString("id", info.getId());
+            if (info.getShortLabel() != null) {
+                data.putString("title", info.getShortLabel().toString());
+            }
+
+            if (info.getLongLabel() != null) {
+                data.putString("description", info.getLongLabel().toString());
+            }
+
+
+            if (!Objects.requireNonNull(info.getCategories()).isEmpty()) {
+                if (info.getCategories().contains("note")) {
+                    data.putString("type", "note");
+                } else if (info.getCategories().contains("notebook")) {
+                    data.putString("type", "notebook");
+                } else if (info.getCategories().contains("tag")) {
+                    data.putString("type", "tag");
+                } else if (info.getCategories().contains("color")) {
+                    data.putString("type", "color");
+                }
+            }
+            shortcuts.pushMap(data);
+        }
+        promise.resolve(shortcuts);
+    }
+
+    private Icon createLetterIcon(String type, String title, String colorCode) {
+
+        String letter = type.contains("tag") ? "#" : title != null && !title.isEmpty()
+                ? title.substring(0, 1).toUpperCase()
+                : "?";
+        int color = type.equals("color") ? Color.parseColor(colorCode) : getColorForLetter(letter);
+        
+        if (type.equals("notebook")) return Icon.createWithResource(mContext, R.drawable.ic_notebook);
+        // Use a larger canvas and fill it completely to avoid white borders from launcher masking.
+        int iconSize = 256;
+        Bitmap bitmap = Bitmap.createBitmap(iconSize, iconSize, Bitmap.Config.ARGB_8888);
+        Canvas canvas = new Canvas(bitmap);
+
+        if (type.equals("color")) {
+            Paint backgroundPaint = new Paint();
+            backgroundPaint.setColor(color);
+            backgroundPaint.setAntiAlias(true);
+            canvas.drawCircle(iconSize / 2, iconSize / 2, iconSize/2, backgroundPaint);
+        } else {
+            Paint textPaint = new Paint();
+            textPaint.setColor(color);
+            textPaint.setTextSize(130);
+            textPaint.setAntiAlias(true);
+            textPaint.setTextAlign(Paint.Align.CENTER);
+            textPaint.setTypeface(android.graphics.Typeface.create(android.graphics.Typeface.DEFAULT, android.graphics.Typeface.BOLD));
+
+            float x = iconSize / 2f;
+            float y = (iconSize / 2f) - ((textPaint.descent() + textPaint.ascent()) / 2f);
+
+            canvas.drawText(letter, x, y, textPaint);
+        }
+
+        return Icon.createWithBitmap(bitmap);
+    }
+
+    private int getColorForLetter(String letter) {
+        int[] colors = {
+            0xFF1976D2, // Blue
+            0xFFD32F2F, // Red
+            0xFF388E3C, // Green
+            0xFFF57C00, // Orange
+            0xFF7B1FA2, // Purple
+            0xFF0097A7, // Cyan
+            0xFFC2185B, // Pink
+            0xFF455A64, // Blue Grey
+            0xFF6A1B9A, // Deep Purple
+            0xFF00796B, // Teal
+            0xFF512DA8, // Indigo
+            0xFF1565C0  // Dark Blue
+        };
+        
+        int hash = Math.abs(letter.hashCode());
+        return colors[hash % colors.length];
+    }
 
 }

apps/mobile/android/app/src/main/res/drawable-anydpi/ic_notebook.xml

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="#008837"
+    android:alpha="1">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M240,880Q207,880 183.5,856.5Q160,833 160,800L160,160Q160,127 183.5,103.5Q207,80 240,80L720,80Q753,80 776.5,103.5Q800,127 800,160L800,800Q800,833 776.5,856.5Q753,880 720,880L240,880ZM240,800L720,800Q720,800 720,800Q720,800 720,800L720,160Q720,160 720,160Q720,160 720,160L640,160L640,440L540,380L440,440L440,160L240,160Q240,160 240,160Q240,160 240,160L240,800Q240,800 240,800Q240,800 240,800ZM240,800Q240,800 240,800Q240,800 240,800L240,160Q240,160 240,160Q240,160 240,160L240,160Q240,160 240,160Q240,160 240,160L240,800Q240,800 240,800Q240,800 240,800ZM440,440L540,380L640,440L640,440L540,380L440,440Z"/>
+</vector>

apps/mobile/android/app/src/main/res/xml/network_security_config.xml

@@ -4,4 +4,10 @@
         <domain includeSubdomains="true">10.0.2.2</domain>
         <domain includeSubdomains="true">localhost</domain>
     </domain-config>
+    <base-config>
+        <trust-anchors>
+            <certificates src="system" />
+            <certificates src="user" />
+        </trust-anchors>
+    </base-config>
 </network-security-config>

apps/mobile/android/build.gradle

@@ -36,6 +36,8 @@ allprojects {
             url "$rootDir/../node_modules/detox/Detox-android"
         }
 
+        google()
+        mavenCentral()
         maven { url 'https://www.jitpack.io' }
     }
 }

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

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

apps/mobile/app.json

@@ -1,4 +1,4 @@
 {
   "name": "Notesnook",
   "displayName": "Notesnook"
-}
+}

apps/mobile/app/app.tsx

@@ -23,8 +23,8 @@ import {
   THEME_COMPATIBILITY_VERSION,
   useThemeEngineStore
 } from "@notesnook/theme";
-import React, { useEffect } from "react";
-import { Appearance, I18nManager, StatusBar } from "react-native";
+import React, { PropsWithChildren, useEffect } from "react";
+import { Appearance, I18nManager, Linking, StatusBar } from "react-native";
 import "react-native-gesture-handler";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -43,7 +43,7 @@ import { changeSystemBarColors, useThemeStore } from "./stores/use-theme-store";
 import { useUserStore } from "./stores/use-user-store";
 import RNBootSplash from "react-native-bootsplash";
 import AppLocked from "./components/app-lock";
-
+import { useSettingStore } from "./stores/use-setting-store";
 I18nManager.allowRTL(false);
 I18nManager.forceRTL(false);
 I18nManager.swapLeftAndRightInRTL(false);
@@ -54,13 +54,21 @@ if (appLockEnabled || appLockMode !== "none") {
 RNBootSplash.hide({
   fade: true
 });
+Linking.getInitialURL().then((url) => {
+  useSettingStore.setState({
+    initialUrl: url
+  });
+});
 const App = (props: { configureMode: "note-preview" }) => {
   useAppEvents();
   //@ts-ignore
   globalThis["IS_MAIN_APP_RUNNING"] = true;
   useEffect(() => {
-    changeSystemBarColors();
     SettingsService.onFirstLaunch();
+    changeSystemBarColors();
+    SettingsService.setPrivacyScreen(
+      SettingsService.getProperty("privacyScreen")
+    );
     setTimeout(async () => {
       await Notifications.get();
       if (SettingsService.get().notifNotes) {
@@ -101,8 +109,10 @@ let currTheme =
     : SettingsService.getProperty("lighTheme");
 useThemeEngineStore.getState().setTheme(currTheme);
 
-export const withTheme = (Element: (props: any) => JSX.Element) => {
-  return function AppWithThemeProvider(props: any) {
+export const withTheme = (
+  Element: (props: PropsWithChildren) => JSX.Element
+) => {
+  return function AppWithThemeProvider(props: PropsWithChildren) {
     const [colorScheme, darkTheme, lightTheme] = useThemeStore((state) => [
       state.colorScheme,
       state.darkTheme,
@@ -122,8 +132,12 @@ export const withTheme = (Element: (props: any) => JSX.Element) => {
           .then((theme) => {
             if (theme) {
               theme.colorScheme === "dark"
-                ? useThemeStore.getState().setDarkTheme(theme)
-                : useThemeStore.getState().setLightTheme(theme);
+                ? useThemeStore.setState({
+                    darkTheme: theme
+                  })
+                : useThemeStore.setState({
+                    lightTheme: theme
+                  });
             }
           })
           .catch(() => {
@@ -133,9 +147,9 @@ export const withTheme = (Element: (props: any) => JSX.Element) => {
 
       const listener = Appearance.addChangeListener(({ colorScheme }) => {
         if (colorScheme && SettingsService.getProperty("useSystemTheme")) {
-          useThemeStore
-            .getState()
-            .setColorScheme(colorScheme as "light" | "dark");
+          useThemeStore.setState({
+            colorScheme: colorScheme as "light" | "dark"
+          });
         }
       });
       return () => {

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

@@ -25,7 +25,6 @@ import * as Keychain from "react-native-keychain";
 import { MMKVLoader, ProcessingModes } from "react-native-mmkv-storage";
 import { generateSecureRandom } from "react-native-securerandom";
 import { DatabaseLogger } from ".";
-import { ToastManager } from "../../services/event-manager";
 import { MMKV } from "./mmkv";
 
 // Database key cipher is persisted across different user sessions hence it has

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

@@ -109,8 +109,8 @@ class RNSqliteConnection implements DatabaseConnection {
       query.kind === "SelectQueryNode"
         ? "query"
         : query.kind === "RawNode"
-        ? "raw"
-        : "exec";
+          ? "raw"
+          : "exec";
 
     const result = await this.db.executeAsync(sql, parameters as any[]);
 

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

@@ -30,7 +30,8 @@ import {
   getCacheSize,
   hashBase64,
   readEncrypted,
-  writeEncryptedBase64
+  writeEncryptedBase64,
+  bulkDeleteFiles
 } from "./io";
 import { uploadFile } from "./upload";
 import {
@@ -61,5 +62,6 @@ export const FileStorage: IFileStorage = {
   exists,
   clearFileStorage,
   getUploadedFileSize,
-  bulkExists
+  bulkExists,
+  bulkDeleteFiles
 };

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

@@ -30,7 +30,14 @@ import RNFetchBlob from "react-native-blob-util";
 import { eSendEvent } from "../../services/event-manager";
 import { IOS_APPGROUPID } from "../../utils/constants";
 import { DatabaseLogger, db } from "../database";
-import { ABYTES, cacheDir, cacheDirOld, getRandomId } from "./utils";
+import {
+  ABYTES,
+  cacheDir,
+  cacheDirOld,
+  getRandomId,
+  isSuccessStatusCode,
+  parseS3Error
+} from "./utils";
 
 export async function readEncrypted<TOutputFormat extends DataFormat>(
   filename: string,
@@ -102,16 +109,41 @@ export async function writeEncryptedBase64(
   };
 }
 
+async function deleteLocalFile(filename: string) {
+  try {
+    await createCacheDir();
+    const path = cacheDir + `/${filename}`;
+    const exists = await RNFetchBlob.fs.exists(path);
+    if (Platform.OS === "ios" && !exists) {
+      const iosAppGroup =
+        Platform.OS === "ios"
+          ? await (RNFetchBlob.fs as any).pathForAppGroup(IOS_APPGROUPID)
+          : null;
+      const appGroupPath = `${iosAppGroup}/${filename}`;
+      if (await RNFetchBlob.fs.exists(appGroupPath)) {
+        RNFetchBlob.fs.unlink(appGroupPath).catch(() => {
+          /* empty */
+        });
+        return;
+      }
+    }
+    if (exists) {
+      RNFetchBlob.fs.unlink(path).catch(() => {
+        /* empty */
+      });
+    }
+  } catch (e) {
+    DatabaseLogger.error(e as Error, "deleteLocalFile");
+  }
+}
+
 export async function deleteFile(
   filename: string,
   requestOptions?: RequestOptions
 ): Promise<boolean> {
   await createCacheDir();
-  const localFilePath = cacheDir + `/${filename}`;
   if (!requestOptions) {
-    RNFetchBlob.fs.unlink(localFilePath).catch(() => {
-      /* empty */
-    });
+    deleteLocalFile(filename);
     return true;
   }
 
@@ -122,9 +154,7 @@ export async function deleteFile(
     const status = response.info().status;
     const ok = status >= 200 && status < 300;
     if (ok) {
-      RNFetchBlob.fs.unlink(localFilePath).catch(() => {
-        /* empty */
-      });
+      deleteLocalFile(filename);
     }
     return ok;
   } catch (e) {
@@ -135,6 +165,49 @@ export async function deleteFile(
   }
 }
 
+export async function bulkDeleteFiles(
+  filenames: string[],
+  requestOptions?: RequestOptions
+) {
+  await createCacheDir();
+  if (!requestOptions) {
+    filenames.forEach((filename) => {
+      deleteLocalFile(filename);
+    });
+    return true;
+  }
+
+  try {
+    const { url, headers } = requestOptions;
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        ...headers,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        names: filenames
+      })
+    });
+
+    const result = isSuccessStatusCode(response.status);
+    if (result) {
+      filenames.forEach((filename) => {
+        deleteLocalFile(filename);
+      });
+    } else {
+      throw await response.text();
+    }
+    return result;
+  } catch (e) {
+    DatabaseLogger.error(
+      typeof e === "string" ? parseS3Error(e as string) : (e as Error),
+      "Could not bulk delete files"
+    );
+    return false;
+  }
+}
+
 export async function clearFileStorage() {
   try {
     await createCacheDir();
@@ -236,7 +309,9 @@ export async function deleteDCacheFiles() {
         });
       }
     }
-  } catch (e) {}
+  } catch (e) {
+    /** Empty */
+  }
 }
 
 export async function getCachePathForFile(filename: string) {

apps/mobile/app/common/filesystem/upload.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 { isImage, RequestOptions } from "@notesnook/core";
+import { isImage, RequestOptions, hosts } from "@notesnook/core";
 import { PermissionsAndroid, Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import { ToastManager } from "../../services/event-manager";
@@ -32,6 +32,137 @@ import {
   getUploadedFileSize
 } from "./utils";
 import Upload from "@ammarahmed/react-native-upload";
+import { CloudUploader } from "react-native-nitro-cloud-uploader";
+import { useUserStore } from "../../stores/use-user-store";
+import { sleep } from "../../utils/time";
+import { isFeatureAvailable } from "@notesnook/common";
+import { strings } from "@notesnook/intl";
+
+// Upload constants
+const CHUNK_SIZE = 10 * 1024 * 1024; // 10 MB
+const MINIMUM_MULTIPART_FILE_SIZE = 25 * 1024 * 1024; // 25MB
+
+interface InitiateMultipartResponse {
+  uploadId: string;
+  parts: string[];
+  error?: string;
+}
+
+async function initiateMultipartUpload(
+  filename: string,
+  fileSize: number,
+  headers: Record<string, string>
+): Promise<InitiateMultipartResponse> {
+  const totalParts = Math.ceil(fileSize / CHUNK_SIZE);
+
+  const url = `${hosts.API_HOST}/s3/multipart?name=${filename}&parts=${totalParts}&uploadId=`;
+  const response = await fetch(url, { headers });
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to initiate multipart upload: ${response.statusText}`
+    );
+  }
+
+  const data = await response.json();
+
+  if (data.error) {
+    throw new Error(data.error);
+  }
+
+  if (!data.uploadId || !data.parts) {
+    throw new Error("Failed to initiate multipart upload: invalid response.");
+  }
+
+  DatabaseLogger.info(
+    `Initiated multipart upload for ${filename} with upload ID: ${data.uploadId}`
+  );
+
+  return data;
+}
+
+async function multipartUploadFile(
+  filename: string,
+  filePath: string,
+  fileSize: number,
+  requestOptions: RequestOptions,
+  cancelToken: { cancel: (reason?: string) => Promise<void> }
+): Promise<Response> {
+  const { headers } = requestOptions;
+
+  try {
+    const uploadData = await initiateMultipartUpload(
+      filename,
+      fileSize,
+      headers
+    );
+    const { uploadId, parts } = uploadData;
+
+    DatabaseLogger.info(
+      `Starting upload for ${filename} with ${parts.length} parts`
+    );
+
+    cancelToken.cancel = async () => {
+      useAttachmentStore.getState().remove(filename);
+      await CloudUploader.cancelUpload(uploadId);
+    };
+
+    CloudUploader.addListener("upload-progress", (event) => {
+      useAttachmentStore
+        .getState()
+        .setProgress(
+          event.bytesUploaded || 0,
+          event.totalBytes || fileSize,
+          filename,
+          0,
+          "upload"
+        );
+      DatabaseLogger.info(
+        `File upload progress: ${filename}, ${event.bytesUploaded}/${
+          event.totalBytes || fileSize
+        }, chunk: ${event.chunkIndex}, progress: ${event.progress}`
+      );
+    });
+    // CloudUploader handles chunking and uploading all parts internally
+    const result = await CloudUploader.startUpload(
+      filename,
+      filePath,
+      parts,
+      3, // maxParallel
+      true // showNotification
+    );
+
+    CloudUploader.removeListener("upload-progress");
+
+    if (!result.success) {
+      throw new Error("Failed to upload multipart file");
+    }
+
+    DatabaseLogger.info(
+      `Multipart upload completed for ${filename} with upload ID: ${uploadId}`
+    );
+
+    const response = await fetch(`${hosts.API_HOST}/s3/multipart`, {
+      method: "POST",
+      body: JSON.stringify({
+        Key: filename,
+        UploadId: uploadId,
+        PartETags: result.etags.map((etag, index) => ({
+          partNumber: index + 1,
+          etag: etag
+        }))
+      }),
+      headers: { ...headers, "Content-Type": "application/json" }
+    });
+
+    return response;
+  } catch (error) {
+    DatabaseLogger.error(error, "Multipart upload failed", { filename });
+    CloudUploader.removeListener("upload-progress");
+    useAttachmentStore.getState().remove(filename);
+    throw error;
+  }
+}
 
 export async function uploadFile(
   filename: string,
@@ -70,6 +201,20 @@ export async function uploadFile(
     const remoteFileSize = await getUploadedFileSize(filename);
     if (remoteFileSize === FileSizeResult.Error) return false;
 
+    const featureResult = await isFeatureAvailable(
+      "fileSize",
+      fileInfo.size || 0
+    );
+
+    if (!featureResult.isAllowed) {
+      ToastManager.show({
+        heading: strings.fileTooLarge(),
+        message: featureResult.error,
+        type: "error"
+      });
+      return false;
+    }
+
     if (
       remoteFileSize > FileSizeResult.Empty &&
       remoteFileSize === fileInfo.size
@@ -85,6 +230,9 @@ export async function uploadFile(
     );
 
     if (Platform.OS === "android") {
+      useUserStore.setState({
+        disableAppLockRequests: true
+      });
       const status = await PermissionsAndroid.request(
         "android.permission.POST_NOTIFICATIONS"
       );
@@ -94,74 +242,117 @@ export async function uploadFile(
           type: "info"
         });
       }
+      await sleep(500);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
     }
 
-    const upload = Upload.create({
-      customUploadId: filename,
-      path: Platform.OS === "ios" ? "file://" + fileInfo.path : fileInfo.path,
-      url: url,
-      method: "PUT",
-      headers: {
-        ...headers,
-        "content-type": "application/octet-stream"
-      },
-      appGroup: IOS_APPGROUPID,
-      notification: {
-        filename:
-          attachmentInfo && isImage(attachmentInfo?.mimeType)
-            ? "image"
-            : attachmentInfo?.filename || "file",
-        enabled: true,
-        enableRingTone: true,
-        autoClear: true
-      }
-    }).onChange((event) => {
-      switch (event.status) {
-        case "running":
-        case "pending":
-          useAttachmentStore
-            .getState()
-            .setProgress(
-              event.uploadedBytes || 0,
-              event.totalBytes || fileInfo.size,
-              filename,
-              0,
-              "upload"
-            );
-          DatabaseLogger.info(
-            `File upload progress: ${filename}, ${event.uploadedBytes}/${
-              event.totalBytes || fileInfo.size
-            }`
-          );
-          break;
-        case "completed":
-          console.log("Upload completed");
-          break;
-      }
-    });
-    const result = await upload.start();
-    cancelToken.cancel = async () => {
-      useAttachmentStore.getState().remove(filename);
-      upload.cancel();
-    };
+    let uploaded = false;
 
-    const status = result.responseCode || 0;
-    const uploaded = status >= 200 && status < 300;
+    // Use multipart upload for files larger than MINIMUM_MULTIPART_FILE_SIZE
+    if (fileInfo.size >= MINIMUM_MULTIPART_FILE_SIZE) {
+      DatabaseLogger.info(
+        `Using multipart upload for large file: ${filename} (${fileInfo.size} bytes)`
+      );
+      const result = await multipartUploadFile(
+        filename,
+        filePath,
+        fileInfo.size,
+        requestOptions,
+        cancelToken
+      );
+      const status = result.status || 0;
+      uploaded = status >= 200 && status < 300;
+
+      if (!uploaded) {
+        const fileInfo = await RNFetchBlob.fs.stat(filePath);
+        throw new Error(
+          `${status}, name: ${fileInfo.filename}, length: ${
+            fileInfo.size
+          }, info: ${JSON.stringify(await result.text())}`
+        );
+      }
+    } else {
+      // Use single-part upload for smaller files
+      DatabaseLogger.info(
+        `Using single-part upload for file: ${filename} (${fileInfo.size} bytes)`
+      );
+      const upload = Upload.create({
+        customUploadId: filename,
+        path: Platform.OS === "ios" ? "file://" + fileInfo.path : fileInfo.path,
+        url: url,
+        method: "PUT",
+        headers: {
+          ...headers,
+          "content-type": "application/octet-stream"
+        },
+        appGroup: IOS_APPGROUPID,
+        notification: {
+          filename:
+            attachmentInfo && isImage(attachmentInfo?.mimeType)
+              ? "image"
+              : attachmentInfo?.filename || "file",
+          enabled: true,
+          enableRingTone: true,
+          autoClear: true
+        }
+      }).onChange((event) => {
+        switch (event.status) {
+          case "running":
+          case "pending":
+            useAttachmentStore
+              .getState()
+              .setProgress(
+                event.uploadedBytes || 0,
+                event.totalBytes || fileInfo.size,
+                filename,
+                0,
+                "upload"
+              );
+            DatabaseLogger.info(
+              `File upload progress: ${filename}, ${event.uploadedBytes}/${
+                event.totalBytes || fileInfo.size
+              }`
+            );
+            break;
+          case "completed":
+            DatabaseLogger.info("Upload completed");
+            break;
+        }
+      });
+      const result = await upload.start();
+      cancelToken.cancel = async () => {
+        useAttachmentStore.getState().remove(filename);
+        upload.cancel();
+      };
+
+      const status = result.responseCode || 0;
+      uploaded = status >= 200 && status < 300;
+
+      if (!uploaded) {
+        const fileInfo = await RNFetchBlob.fs.stat(filePath);
+        throw new Error(
+          `${status}, name: ${fileInfo.filename}, length: ${
+            fileInfo.size
+          }, info: ${JSON.stringify(result.error)}`
+        );
+      }
+    }
 
     useAttachmentStore.getState().remove(filename);
 
-    if (!uploaded) {
-      const fileInfo = await RNFetchBlob.fs.stat(filePath);
-      throw new Error(
-        `${status}, name: ${fileInfo.filename}, length: ${
-          fileInfo.size
-        }, info: ${JSON.stringify(result.error)}`
+    if (uploaded) {
+      attachmentInfo = await db.attachments.attachment(filename);
+      if (!attachmentInfo) return false;
+      await checkUpload(
+        filename,
+        requestOptions.chunkSize,
+        attachmentInfo.size
       );
+      DatabaseLogger.info(`File upload status: ${filename}, success`);
     }
-    attachmentInfo = await db.attachments.attachment(filename);
-    if (!attachmentInfo) return false;
-    await checkUpload(filename, requestOptions.chunkSize, attachmentInfo.size);
-    DatabaseLogger.info(`File upload status: ${filename}, ${status}`);
+
     return uploaded;
   } catch (e) {
     useAttachmentStore.getState().remove(filename);

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

@@ -161,10 +161,10 @@ export async function checkUpload(
     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;
+      ? `File verification check failed.`
+      : expectedSize !== decryptedLength
+      ? `File size mismatch. Expected ${size} bytes but got ${decryptedLength} bytes.`
+      : undefined;
   if (error) throw new Error(error);
 }
 
@@ -193,3 +193,7 @@ export async function checkAndCreateDir(path: string) {
 export const santizeUri = (uri: string) => {
   return Platform.OS === "ios" ? decodeURI(uri).replace("file:///", "/") : uri;
 };
+
+export function isSuccessStatusCode(statusCode: number) {
+  return statusCode >= 200 && statusCode <= 299;
+}

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

@@ -36,7 +36,7 @@ export const Announcement = () => {
     state.announcements,
     state.remove
   ]);
-  let announcement = announcements.length > 0 ? announcements[0] : null;
+  const announcement = announcements.length > 0 ? announcements[0] : null;
   const selectionMode = useSelectionStore((state) => state.selectionMode);
 
   return !announcement || selectionMode ? null : (

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

@@ -32,7 +32,7 @@ import { Action } from "../../stores/use-message-store";
 
 export const Cta = (props: BodyItemProps) => {
   const { colors } = useThemeColors();
-  let buttons =
+  const buttons =
     props.item.actions.filter((item) => allowedOnPlatform(item.platforms)) ||
     [];
 

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

@@ -53,7 +53,6 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { strings } from "@notesnook/intl";
-import { AppFontSize } from "../../utils/size";
 import { editorController } from "../../screens/editor/tiptap/utils";
 import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
 

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

@@ -46,7 +46,6 @@ import {
   eOnLoadNote
 } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
-import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
 import { openNote } from "../list-items/note/wrapper";
@@ -59,6 +58,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../utils/styles";
+import Navigation from "../../services/navigation";
 
 const Actions = ({
   attachment,
@@ -177,26 +177,52 @@ const Actions = ({
     {
       name: strings.delete(),
       onPress: async () => {
-        const relations = await db.relations.to(attachment, "note").get();
-        await db.attachments.remove(attachment.hash, false);
-        setAttachments();
-        eSendEvent(eDBItemUpdate, attachment.id);
-        relations
-          .map((relation) => relation.fromId)
-          .forEach(async (id) => {
-            useTabStore.getState().forEachNoteTab(id, async (tab) => {
-              const isFocused = useTabStore.getState().currentTab === tab.id;
-              if (isFocused) {
-                eSendEvent(eOnLoadNote, {
-                  item: await db.notes.note(id),
-                  forced: true
-                });
-              } else {
-                editorController.current.commands.setLoading(true, tab.id);
-              }
-            });
-          });
         close?.();
+        setTimeout(() => {
+          presentDialog({
+            title: strings.deleteAttachment(),
+            paragraph: strings.deleteAttachmentConfirm(),
+            positiveText: strings.yes(),
+            negativeText: strings.no(),
+            positiveType: "errorShade",
+            positivePress: async () => {
+              try {
+                const relations = await db.relations
+                  .to(attachment, "note")
+                  .get();
+                await db.attachments.remove(attachment.hash, false);
+                ToastManager.show({
+                  type: "success",
+                  message: strings.attachmentDeleted()
+                });
+                setAttachments();
+                eSendEvent(eDBItemUpdate, attachment.id);
+                relations
+                  .map((relation) => relation.fromId)
+                  .forEach(async (id) => {
+                    useTabStore.getState().forEachNoteTab(id, async (tab) => {
+                      const isFocused =
+                        useTabStore.getState().currentTab === tab.id;
+                      if (isFocused) {
+                        eSendEvent(eOnLoadNote, {
+                          item: await db.notes.note(id),
+                          forced: true
+                        });
+                      } else {
+                        editorController.current.commands.setLoading(
+                          true,
+                          tab.id
+                        );
+                      }
+                    });
+                  });
+                return true;
+              } catch (e) {
+                return false;
+              }
+            }
+          });
+        }, 500);
       },
       icon: "delete-outline"
     }
@@ -304,9 +330,9 @@ const Actions = ({
               <Pressable
                 onPress={async () => {
                   eSendEvent(eCloseSheet, contextId);
-                  await sleep(150);
+                  close?.();
                   eSendEvent(eCloseAttachmentDialog);
-                  await sleep(300);
+                  Navigation.navigate("FluidPanelsView");
                   openNote(item, (item as any).type === "trash");
                 }}
                 style={{

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

@@ -17,7 +17,6 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { LegendList } from "@legendapp/list";
 import {
   Attachment,
   FilteredSelector,
@@ -28,7 +27,7 @@ import {
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useRef, useState } from "react";
-import { ActivityIndicator, View } from "react-native";
+import { ActivityIndicator, FlatList, View } from "react-native";
 import { ScrollView } from "react-native-actions-sheet";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import create from "zustand";
@@ -313,6 +312,10 @@ export const AttachmentDialog = ({
     });
   };
 
+  db.attachments.orphaned.items().then((r) => {
+    console.log(r);
+  });
+
   return (
     <>
       {isSheet ? (
@@ -509,7 +512,7 @@ export const AttachmentDialog = ({
           </ScrollView>
         </View>
 
-        <LegendList
+        <FlatList
           renderScrollComponent={(props) => <ScrollView {...props} />}
           keyboardDismissMode="none"
           keyboardShouldPersistTaps="always"
@@ -543,7 +546,6 @@ export const AttachmentDialog = ({
               }}
             />
           }
-          estimatedItemSize={50}
           data={loading ? [] : attachments?.placeholders || []}
           extraData={attachments}
           renderItem={renderItem}

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

@@ -73,7 +73,15 @@ export const ChangePassword = () => {
         throw new Error(strings.backupFailed() + `: ${result.error}`);
       }
 
-      await db.user.changePassword(oldPassword.current, password.current);
+      const passwordChanged = await db.user.changePassword(
+        oldPassword.current,
+        password.current
+      );
+
+      if (!passwordChanged) {
+        throw new Error("Could not change user account password.");
+      }
+
       ToastManager.show({
         heading: strings.passwordChangedSuccessfully(),
         type: "success",

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

@@ -39,7 +39,7 @@ export function hideAuth(context?: AuthParams["context"]) {
     initialAuthMode.current === AuthMode.welcomeLogin ||
     context === "intro"
   ) {
-    Navigation.replace("FluidPanelsView", {});
+    Navigation.navigate("FluidPanelsView", {});
   } else {
     Navigation.goBack();
   }

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

@@ -19,7 +19,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useRef, useState } from "react";
 import { TextInput, View } from "react-native";
-import ActionSheet from "react-native-actions-sheet";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { ToastManager } from "../../services/event-manager";
@@ -28,40 +27,41 @@ import { useThemeColors } from "@notesnook/theme";
 import DialogHeader from "../dialog/dialog-header";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
-import Input from "../ui/input";
+import FormInput, { createFormRef, validators } from "../ui/input/form-input";
 import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../utils/styles";
 
-export const ForgotPassword = () => {
+export const ForgotPassword = ({ userEmail }: { userEmail: string }) => {
   const { colors } = useThemeColors("sheet");
-  const email = useRef<string>(undefined);
+  const formRef = useRef(
+    createFormRef({
+      email: userEmail || ""
+    })
+  );
   const emailInputRef = useRef<TextInput>(null);
-  const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
   const [sent, setSent] = useState(false);
 
   const sendRecoveryEmail = async () => {
-    if (!email.current || error) {
-      ToastManager.show({
-        heading: strings.emailRequired(),
-        type: "error",
-        context: "local"
-      });
+    if (formRef.current.validateField("email")) {
       return;
     }
+
+    const values = formRef.current.getValues();
+
     setLoading(true);
     try {
-      let lastRecoveryEmailTime = SettingsService.get().lastRecoveryEmailTime;
+      const lastRecoveryEmailTime = SettingsService.get().lastRecoveryEmailTime;
       if (
         lastRecoveryEmailTime &&
         Date.now() - lastRecoveryEmailTime < 60000 * 3
       ) {
         throw new Error(strings.pleaseWaitBeforeSendEmail());
       }
-      await db.user.recoverAccount(email.current.toLowerCase());
+      await db.user.recoverAccount(values.email.toLowerCase());
       SettingsService.set({
         lastRecoveryEmailTime: Date.now()
       });
@@ -76,105 +76,85 @@ export const ForgotPassword = () => {
       setSent(true);
     } catch (e) {
       setLoading(false);
-      ToastManager.show({
-        heading: strings.recoveryEmailFailed(),
-        message: (e as Error).message,
-        type: "error",
-        context: "local"
-      });
+      formRef.current.setError("email", (e as Error).message);
     }
   };
 
   return (
     <>
-      <ActionSheet
-        onBeforeShow={(data) => (email.current = data)}
-        onClose={() => {
-          setSent(false);
-          setLoading(false);
-        }}
-        onOpen={() => {
-          emailInputRef.current?.setNativeProps({
-            text: email.current
-          });
-        }}
-        indicatorStyle={{
-          width: 100
-        }}
-        gestureEnabled
-        id="forgotpassword_sheet"
-      >
-        {sent ? (
-          <View
+      {sent ? (
+        <View
+          style={{
+            padding: DefaultAppStyles.GAP,
+            justifyContent: "center",
+            alignItems: "center",
+            paddingBottom: 50
+          }}
+        >
+          <IconButton
             style={{
-              padding: DefaultAppStyles.GAP,
-              justifyContent: "center",
-              alignItems: "center",
-              paddingBottom: 50
+              width: null,
+              height: null
+            }}
+            color={colors.primary.accent}
+            name="email"
+            size={50}
+          />
+          <Heading>{strings.recoveryEmailSent()}</Heading>
+          <Paragraph
+            style={{
+              textAlign: "center"
             }}
           >
-            <IconButton
-              style={{
-                width: null,
-                height: null
-              }}
-              color={colors.primary.accent}
-              name="email"
-              size={50}
-            />
-            <Heading>{strings.recoveryEmailSent()}</Heading>
-            <Paragraph
-              style={{
-                textAlign: "center"
-              }}
-            >
-              {strings.recoveryEmailSentDesc()}
-            </Paragraph>
-          </View>
-        ) : (
-          <View
-            style={{
-              borderRadius: DDS.isTab ? 5 : 0,
-              backgroundColor: colors.primary.background,
-              zIndex: 10,
-              width: "100%",
-              padding: DefaultAppStyles.GAP
+            {strings.recoveryEmailSentDesc()}
+          </Paragraph>
+        </View>
+      ) : (
+        <View
+          style={{
+            borderRadius: DDS.isTab ? 5 : 0,
+            backgroundColor: colors.primary.background,
+            zIndex: 10,
+            width: "100%",
+            padding: DefaultAppStyles.GAP
+          }}
+        >
+          <DialogHeader title={strings.accountRecovery()} />
+          <Seperator />
+
+          <FormInput
+            name="email"
+            formRef={formRef}
+            fwdRef={emailInputRef}
+            loading={loading}
+            returnKeyLabel={strings.next()}
+            returnKeyType="next"
+            autoComplete="email"
+            keyboardType="email-address"
+            autoCorrect={false}
+            autoCapitalize="none"
+            placeholder={strings.email()}
+            validators={[
+              validators.required(strings.emailRequired()),
+              validators.email(strings.enterAValidEmailAddress())
+            ]}
+            onSubmitEditing={() => {
+              sendRecoveryEmail();
             }}
-          >
-            <DialogHeader title={strings.accountRecovery()} />
-            <Seperator />
+          />
 
-            <Input
-              fwdRef={emailInputRef}
-              onChangeText={(value) => {
-                email.current = value;
-              }}
-              defaultValue={email.current}
-              onErrorCheck={(e) => setError(e)}
-              returnKeyLabel={strings.next()}
-              returnKeyType="next"
-              autoComplete="email"
-              validationType="email"
-              autoCorrect={false}
-              autoCapitalize="none"
-              errorMessage={strings.emailInvalid()}
-              placeholder={strings.email()}
-              onSubmit={() => {}}
-            />
-
-            <Button
-              style={{
-                marginTop: DefaultAppStyles.GAP_VERTICAL,
-                width: "100%"
-              }}
-              loading={loading}
-              onPress={sendRecoveryEmail}
-              type="accent"
-              title={loading ? null : strings.next()}
-            />
-          </View>
-        )}
-      </ActionSheet>
+          <Button
+            style={{
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
+              width: "100%"
+            }}
+            loading={loading}
+            onPress={sendRecoveryEmail}
+            type="accent"
+            title={loading ? null : strings.next()}
+          />
+        </View>
+      )}
     </>
   );
 };

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

@@ -22,10 +22,9 @@ import { useThemeColors } from "@notesnook/theme";
 import { RouteProp, useRoute } from "@react-navigation/native";
 import React, { useEffect, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
-import { SheetManager } from "react-native-actions-sheet";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { DDS } from "../../services/device-detection";
-import { eSendEvent } from "../../services/event-manager";
+import { eSendEvent, presentSheet } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
@@ -38,8 +37,9 @@ import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import { Progress } from "../sheets/progress";
+import AppIcon from "../ui/AppIcon";
 import { Button } from "../ui/button";
-import Input from "../ui/input";
+import FormInput, { validators } from "../ui/input/form-input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
@@ -64,14 +64,13 @@ export const Login = ({
   const {
     step,
     setStep,
-    password,
-    email,
     emailInputRef,
     passwordInputRef,
     loading,
     setLoading,
-    setError,
-    login
+    login,
+    error,
+    formRef
   } = useLogin(async () => {
     eSendEvent(eUserLoggedIn, true);
     await sleep(500);
@@ -94,6 +93,11 @@ export const Login = ({
   });
   const { width, height } = useWindowDimensions();
   const isTablet = width > 600;
+
+  const onContinue = () => {
+    login();
+  };
+
   useEffect(() => {
     async () => {
       setStep(LoginSteps.emailAuth);
@@ -110,7 +114,6 @@ export const Login = ({
   return (
     <>
       <AuthHeader />
-      <ForgotPassword />
       <Dialog context="two_factor_verify" />
       <KeyboardAwareScrollView
         style={{
@@ -200,27 +203,27 @@ export const Login = ({
               gap: DefaultAppStyles.GAP_VERTICAL
             }}
           >
-            <Input
+            <FormInput
+              name="email"
+              formRef={formRef}
               fwdRef={emailInputRef}
-              onChangeText={(value) => {
-                email.current = value;
-              }}
               testID="input.email"
-              onErrorCheck={(e) => setError(e)}
               returnKeyLabel="Next"
               returnKeyType="next"
               autoComplete="email"
-              validationType="email"
+              keyboardType="email-address"
               marginBottom={0}
               autoCorrect={false}
               autoCapitalize="none"
-              errorMessage={strings.emailInvalid()}
               placeholder={strings.email()}
-              defaultValue={email.current}
               editable={step === LoginSteps.emailAuth && !loading}
-              onSubmit={() => {
+              validators={[
+                validators.required(strings.emailRequired()),
+                validators.email(strings.enterAValidEmailAddress())
+              ]}
+              onSubmitEditing={() => {
                 if (step === LoginSteps.emailAuth) {
-                  login();
+                  onContinue();
                 } else {
                   passwordInputRef.current?.focus();
                 }
@@ -229,11 +232,10 @@ export const Login = ({
 
             {step === LoginSteps.passwordAuth && (
               <>
-                <Input
+                <FormInput
+                  name="password"
+                  formRef={formRef}
                   fwdRef={passwordInputRef}
-                  onChangeText={(value) => {
-                    password.current = value;
-                  }}
                   testID="input.password"
                   returnKeyLabel={strings.done()}
                   returnKeyType="done"
@@ -244,9 +246,9 @@ export const Login = ({
                   placeholder={strings.password()}
                   marginBottom={0}
                   editable={!loading}
-                  defaultValue={password.current}
-                  onSubmit={() => {
-                    login();
+                  validators={[validators.required(strings.passwordRequired())]}
+                  onSubmitEditing={() => {
+                    onContinue();
                   }}
                 />
                 <Button
@@ -257,8 +259,14 @@ export const Login = ({
                     paddingHorizontal: 0
                   }}
                   onPress={() => {
-                    if (loading || !email.current) return;
-                    SheetManager.show("forgotpassword_sheet");
+                    if (loading) return;
+                    presentSheet({
+                      component: (
+                        <ForgotPassword
+                          userEmail={formRef.current.getValue("email")}
+                        />
+                      )
+                    });
                   }}
                   textStyle={{
                     textDecorationLine: "underline"
@@ -273,8 +281,7 @@ export const Login = ({
               <Button
                 loading={loading}
                 onPress={() => {
-                  if (loading) return;
-                  login();
+                  onContinue();
                 }}
                 style={{
                   width: "100%"
@@ -328,6 +335,25 @@ export const Login = ({
                   </Paragraph>
                 </TouchableOpacity>
               ) : null}
+
+              {error ? (
+                <Paragraph
+                  numberOfLines={4}
+                  onPress={() => {}}
+                  color={colors.error.accent}
+                  style={{
+                    textAlign: "center",
+                    marginTop: DefaultAppStyles.GAP_VERTICAL
+                  }}
+                >
+                  <AppIcon
+                    color={colors.error.accent}
+                    name="alert-circle-outline"
+                    size={AppFontSize.sm - 1}
+                  />{" "}
+                  {error.message}
+                </Paragraph>
+              ) : null}
             </View>
           </View>
         </View>

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

@@ -43,29 +43,26 @@ import SheetProvider from "../sheet-provider";
 import { Toast } from "../toast";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
-import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
 import { strings } from "@notesnook/intl";
 import { getObfuscatedEmail } from "../../utils/functions";
 import { DefaultAppStyles } from "../../utils/styles";
+import FormInput, { validators } from "../ui/input/form-input";
 
 export const SessionExpired = () => {
   const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [focused, setFocused] = useState(false);
-  const { step, password, email, passwordInputRef, loading, login } = useLogin(
-    () => {
-      eSendEvent(eUserLoggedIn, true);
-      setVisible(false);
-      setFocused(false);
-      useUserStore.setState({
-        disableAppLockRequests: false
-      });
-    },
-    true
-  );
+  const { step, passwordInputRef, loading, login, formRef } = useLogin(() => {
+    eSendEvent(eUserLoggedIn, true);
+    setVisible(false);
+    setFocused(false);
+    useUserStore.setState({
+      disableAppLockRequests: false
+    });
+  }, true);
 
   const logout = async () => {
     try {
@@ -92,19 +89,19 @@ export const SessionExpired = () => {
 
   const open = React.useCallback(async () => {
     try {
-      let res = await db.tokenManager.getToken();
+      const res = await db.tokenManager.getToken();
       if (!res) throw new Error("no token found");
       if (db.tokenManager._isTokenExpired(res))
         throw new Error("token expired");
 
-      const key = await db.user.getEncryptionKey();
+      const key = await db.user.getDataEncryptionKeys();
       if (!key) throw new Error("No encryption key found.");
 
       Sync.run("global", false, "full", async (complete) => {
         if (!complete) {
-          let user = await db.user.getUser();
+          const user = await db.user.getUser();
           if (!user) return;
-          email.current = user.email;
+          formRef.current.setValue("email", user.email);
           setVisible(true);
           setFocused(false);
           return;
@@ -115,16 +112,16 @@ export const SessionExpired = () => {
         setVisible(false);
       });
     } catch (e) {
-      let user = await db.user.getUser();
+      const user = await db.user.getUser();
       if (!user) return;
-      email.current = user.email;
+      formRef.current.setValue("email", user.email);
       setFocused(false);
       setVisible(true);
       useUserStore.setState({
         disableAppLockRequests: true
       });
     }
-  }, [email]);
+  }, [formRef]);
 
   useEffect(() => {
     const sub = eSubscribeEvent(eLoginSessionExpired, open);
@@ -155,6 +152,7 @@ export const SessionExpired = () => {
         enableSheetKeyboardHandler={true}
         visible={true}
       >
+        <Dialog context="two_factor_verify" />
         <View
           style={{
             width: focused ? "100%" : "99.9%",
@@ -192,17 +190,17 @@ export const SessionExpired = () => {
               }}
             >
               {strings.sessionExpiredDesc(
-                getObfuscatedEmail(email.current as string)
+                getObfuscatedEmail(formRef.current.getValue("email") as string)
               )}
             </Paragraph>
           </View>
 
           {step === LoginSteps.passwordAuth ? (
-            <Input
+            <FormInput
               fwdRef={passwordInputRef}
-              onChangeText={(value) => {
-                password.current = value;
-              }}
+              formRef={formRef}
+              name="password"
+              validators={[validators.required(strings.passwordRequired())]}
               returnKeyLabel={strings.done()}
               returnKeyType="next"
               secureTextEntry
@@ -210,7 +208,7 @@ export const SessionExpired = () => {
               autoCapitalize="none"
               autoCorrect={false}
               placeholder={strings.password()}
-              onSubmit={() => {
+              onSubmitEditing={() => {
                 login();
               }}
             />

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

@@ -30,7 +30,6 @@ import {
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
-import { ToastManager } from "../../services/event-manager";
 import { clearMessage, setEmailVerifyMessage } from "../../services/message";
 import Navigation from "../../services/navigation";
 import { useUserStore } from "../../stores/use-user-store";
@@ -39,13 +38,14 @@ import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Loading } from "../loading";
 import { Button } from "../ui/button";
-import Input from "../ui/input";
+import FormInput, { createFormRef, validators } from "../ui/input/form-input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { AuthHeader } from "./header";
 import { SignupContext } from "./signup-context";
 import { RouteParams } from "../../stores/use-navigation-store";
 import SettingsService from "../../services/settings";
+import AppIcon from "../ui/AppIcon";
 
 const SignupSteps = {
   signup: 0,
@@ -62,13 +62,17 @@ export const Signup = ({
 }) => {
   const [currentStep, setCurrentStep] = useState(SignupSteps.signup);
   const { colors } = useThemeColors();
-  const email = useRef<string>(undefined);
+  const formRef = useRef(
+    createFormRef({
+      email: "",
+      password: "",
+      confirmPassword: ""
+    })
+  );
   const emailInputRef = useRef<TextInput>(null);
   const passwordInputRef = useRef<TextInput>(null);
-  const password = useRef<string>(undefined);
   const confirmPasswordInputRef = useRef<TextInput>(null);
-  const confirmPassword = useRef<string>(undefined);
-  const [error, setError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string>();
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
   const setLastSynced = useUserStore((state) => state.setLastSynced);
@@ -76,30 +80,18 @@ export const Signup = ({
   const isTablet = width > 600;
   const route = useRoute<RouteProp<RouteParams, "Auth">>();
 
-  const validateInfo = () => {
-    if (!password.current || !email.current || !confirmPassword.current) {
-      ToastManager.show({
-        heading: strings.allFieldsRequired(),
-        message: strings.allFieldsRequiredDesc(),
-        type: "error",
-        context: "local"
-      });
-
-      return false;
-    }
-
-    return true;
-  };
-
   const signup = async () => {
-    if (!validateInfo() || error) return;
+    setErrorMessage(undefined);
+    if (!formRef.current.validate()) return;
     if (loading) return;
 
+    const values = formRef.current.getValues();
+
     setLoading(true);
     try {
       setCurrentStep(SignupSteps.createAccount);
-      await db.user.signup(email.current!.toLowerCase(), password.current!);
-      let user = await db.user.getUser();
+      await db.user.signup(values.email.toLowerCase(), values.password);
+      const user = await db.user.getUser();
       setUser(user);
       setLastSynced(await db.lastSynced());
       clearMessage();
@@ -115,12 +107,14 @@ export const Signup = ({
     } catch (e) {
       setCurrentStep(SignupSteps.signup);
       setLoading(false);
-      ToastManager.show({
-        heading: strings.signupFailed(),
-        message: (e as Error).message,
-        type: "error",
-        context: "local"
-      });
+      if (
+        (e as Error).message === "Unable to create an account on this email."
+      ) {
+        formRef.current.setError("email", (e as Error).message);
+      } else {
+        setErrorMessage((e as Error).message);
+      }
+
       return false;
     }
   };
@@ -215,60 +209,55 @@ export const Signup = ({
                   alignSelf: "center"
                 }}
               >
-                <Input
+                <FormInput
+                  name="email"
+                  formRef={formRef}
                   fwdRef={emailInputRef}
-                  onChangeText={(value) => {
-                    email.current = value;
-                  }}
-                  defaultValue={email.current}
+                  loading={loading}
                   testID="input.email"
-                  onErrorCheck={(e) => setError(e)}
                   returnKeyLabel="Next"
                   returnKeyType="next"
                   autoComplete="email"
-                  validationType="email"
+                  keyboardType="email-address"
                   autoCorrect={false}
                   autoCapitalize="none"
-                  errorMessage={strings.emailInvalid()}
                   placeholder={strings.email()}
                   blurOnSubmit={false}
-                  onSubmit={() => {
-                    if (!email.current) return;
+                  validators={[
+                    validators.required(strings.emailRequired()),
+                    validators.email(strings.enterAValidEmailAddress())
+                  ]}
+                  onSubmitEditing={() => {
                     passwordInputRef.current?.focus();
                   }}
                 />
 
-                <Input
+                <FormInput
+                  name="password"
+                  formRef={formRef}
                   fwdRef={passwordInputRef}
-                  onChangeText={(value) => {
-                    password.current = value;
-                  }}
-                  defaultValue={password.current}
+                  loading={loading}
                   testID="input.password"
-                  onErrorCheck={(e) => setError(e)}
                   returnKeyLabel="Next"
                   returnKeyType="next"
                   secureTextEntry
                   autoComplete="password"
                   autoCapitalize="none"
                   blurOnSubmit={false}
-                  validationType="password"
                   autoCorrect={false}
                   placeholder={strings.password()}
-                  onSubmit={() => {
-                    if (!password.current) return;
+                  validators={[validators.required(strings.passwordRequired())]}
+                  onSubmitEditing={() => {
                     confirmPasswordInputRef.current?.focus();
                   }}
                 />
 
-                <Input
+                <FormInput
+                  name="confirmPassword"
+                  formRef={formRef}
                   fwdRef={confirmPasswordInputRef}
-                  onChangeText={(value) => {
-                    confirmPassword.current = value;
-                  }}
-                  defaultValue={confirmPassword.current}
+                  loading={loading}
                   testID="input.confirmPassword"
-                  onErrorCheck={(e) => setError(e)}
                   returnKeyLabel="Signup"
                   returnKeyType="done"
                   secureTextEntry
@@ -276,17 +265,22 @@ export const Signup = ({
                   autoCapitalize="none"
                   autoCorrect={false}
                   blurOnSubmit={false}
-                  validationType="confirmPassword"
-                  customValidator={() => password.current!}
                   placeholder={strings.confirmPassword()}
                   marginBottom={12}
-                  onSubmit={() => {
+                  validators={[
+                    validators.required(strings.confirmPasswordRequired()),
+                    validators.matchField(
+                      "password",
+                      strings.passwordNotMatched()
+                    )
+                  ]}
+                  onSubmitEditing={() => {
                     signup();
                   }}
                 />
 
                 <Button
-                  title={!loading ? "Continue" : null}
+                  title={!loading ? strings.continue() : null}
                   type="accent"
                   loading={loading}
                   onPress={() => {
@@ -320,6 +314,25 @@ export const Signup = ({
                     </Paragraph>
                   </Paragraph>
                 </TouchableOpacity>
+
+                {errorMessage ? (
+                  <Paragraph
+                    numberOfLines={4}
+                    onPress={() => {}}
+                    color={colors.error.accent}
+                    style={{
+                      textAlign: "center",
+                      marginTop: DefaultAppStyles.GAP_VERTICAL
+                    }}
+                  >
+                    <AppIcon
+                      color={colors.error.accent}
+                      name="alert-circle-outline"
+                      size={AppFontSize.sm - 1}
+                    />{" "}
+                    {errorMessage}
+                  </Paragraph>
+                ) : null}
               </View>
 
               <View

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

@@ -27,14 +27,15 @@ import useTimer from "../../hooks/use-timer";
 import { eSendEvent, ToastManager } from "../../services/event-manager";
 import { eCloseSimpleDialog } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
+import { presentDialog } from "../dialog/functions";
+import AppIcon from "../ui/AppIcon";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
 import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { DefaultAppStyles } from "../../utils/styles";
-import { presentDialog } from "../dialog/functions";
 
 type MFAInfo = {
   primaryMethod: string;
@@ -52,7 +53,8 @@ const TwoFactorVerification = ({
       method: string;
       code: string;
     },
-    callback: (result: any) => void
+    callback: (result: any) => void,
+    onerror: (e: Error) => void
   ) => Promise<void>;
   mfaInfo: MFAInfo;
   onCancel: () => void;
@@ -66,15 +68,26 @@ const TwoFactorVerification = ({
     method: mfaInfo?.primaryMethod,
     isPrimary: true
   });
-  const { seconds, start, reset } = useTimer(currentMethod.method!);
+  const { seconds, start, reset, secondsRef } = useTimer(currentMethod.method!);
   const [loading, setLoading] = useState(false);
   const inputRef = useRef<TextInput>(null);
   const [sending, setSending] = useState(false);
+  const [error, setError] = useState<Error | undefined>(undefined);
 
   const onNext = async () => {
-    if (!code.current || code.current.length < 6 || !currentMethod.method)
+    if (!code.current || code.current.length < 6) {
+      setError(
+        new Error("Please provide a valid multi-factor authentication code.")
+      );
       return;
+    }
+
+    if (!currentMethod.method) {
+      return;
+    }
+
     setLoading(true);
+    setError(undefined);
     inputRef.current?.blur();
     await onMfaLogin(
       {
@@ -86,6 +99,9 @@ const TwoFactorVerification = ({
           eSendEvent(eCloseSimpleDialog, "two_factor_verify");
         }
         setLoading(false);
+      },
+      (e) => {
+        setError(e);
       }
     );
     setLoading(false);
@@ -131,7 +147,7 @@ const TwoFactorVerification = ({
   };
 
   const onSendCode = useCallback(async () => {
-    if (seconds || sending) return;
+    if (secondsRef.current || sending) return;
     setSending(true);
     try {
       await db.mfa.sendCode(currentMethod.method as "sms" | "email");
@@ -139,15 +155,18 @@ const TwoFactorVerification = ({
       setSending(false);
     } catch (e) {
       setSending(false);
-      ToastManager.error(e as Error, "Error sending 2FA Code", "local");
+      setError(
+        new Error(`Error sending 2FA Code. Tap "Send code" to try again `)
+      );
     }
-  }, [currentMethod.method, mfaInfo.token, seconds, sending, start]);
+  }, [currentMethod.method, secondsRef, sending, start]);
 
   useEffect(() => {
     if (currentMethod.method === "sms" || currentMethod.method === "email") {
       onSendCode();
     }
-  }, [currentMethod.method, onSendCode]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentMethod.method]);
 
   return (
     <ScrollView
@@ -234,6 +253,7 @@ const TwoFactorVerification = ({
               fwdRef={inputRef}
               textAlign="center"
               onChangeText={(value) => {
+                setError(undefined);
                 code.current = value;
               }}
               cursorColor={colors.selected.accent}
@@ -241,6 +261,7 @@ const TwoFactorVerification = ({
               selectionColor={colors.selected.accent}
               onSubmitEditing={onNext}
               height={60}
+              marginBottom={0}
               inputStyle={{
                 fontSize: AppFontSize.lg,
                 textAlign: "center",
@@ -254,10 +275,26 @@ const TwoFactorVerification = ({
               containerStyle={{
                 minWidth: "50%"
               }}
-              wrapperStyle={{
-                height: 60
-              }}
             />
+            {error ? (
+              <Paragraph
+                numberOfLines={4}
+                onPress={() => {}}
+                color={colors.error.accent}
+                style={{
+                  textAlign: "center",
+                  marginVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
+                  maxWidth: 250
+                }}
+              >
+                <AppIcon
+                  color={colors.error.accent}
+                  name="alert-circle-outline"
+                  size={AppFontSize.sm - 1}
+                />{" "}
+                {error?.message}
+              </Paragraph>
+            ) : null}
 
             <Button
               title={loading ? null : strings.next()}
@@ -338,7 +375,8 @@ TwoFactorVerification.present = (
       method: string;
       code: string;
     },
-    callback: (result: any) => void
+    callback: (result: any) => void,
+    onerror: (e: Error) => void
   ) => Promise<void>,
   data: MFAInfo,
   onCancel: () => void,

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

@@ -28,6 +28,7 @@ import SettingsService from "../../services/settings";
 import { useUserStore } from "../../stores/use-user-store";
 import { eCloseSimpleDialog } from "../../utils/events";
 import TwoFactorVerification from "./two-factor";
+import { createFormRef } from "../ui/input/form-input";
 
 export const LoginSteps = {
   emailAuth: 1,
@@ -39,49 +40,37 @@ export const useLogin = (
   onFinishLogin?: () => void,
   sessionExpired = false
 ) => {
-  const [error, setError] = useState(false);
+  const [error, setError] = useState<Error>();
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
   const [step, setStep] = useState(LoginSteps.emailAuth);
-  const email = useRef<string>(undefined);
-  const password = useRef<string>(undefined);
   const emailInputRef = useRef<TextInput>(null);
   const passwordInputRef = useRef<TextInput>(null);
-
-  const validateInfo = () => {
-    if (
-      (!password.current && step === LoginSteps.passwordAuth) ||
-      (!email.current && step === LoginSteps.emailAuth)
-    ) {
-      ToastManager.show({
-        heading: strings.allFieldsRequired(),
-        message: strings.allFieldsRequiredDesc(),
-        type: "error",
-        context: "local"
-      });
-
-      return false;
-    }
-
-    return true;
-  };
+  const formRef = useRef(
+    createFormRef({
+      email: "",
+      password: ""
+    })
+  );
 
   const login = async () => {
-    if (!validateInfo() || error) return;
     try {
       if (loading) return;
+      setError(undefined);
       setLoading(true);
       switch (step) {
         case LoginSteps.emailAuth: {
-          if (!email.current) {
+          if (formRef.current.validateField("email")) {
             setLoading(false);
             return;
           }
-          const mfaInfo = await db.user.authenticateEmail(email.current);
+          const mfaInfo = await db.user.authenticateEmail(
+            formRef.current.getValue("email")
+          );
 
           if (mfaInfo) {
             TwoFactorVerification.present(
-              async (mfa: any, callback: (success: boolean) => void) => {
+              async (mfa: any, callback: (success: boolean) => void, onerror: (e: Error) => void) => {
                 try {
                   const success = await db.user.authenticateMultiFactorCode(
                     mfa.code,
@@ -103,6 +92,9 @@ export const useLogin = (
                     eSendEvent(eCloseSimpleDialog, "two_factor_verify");
                     setLoading(false);
                     setStep(LoginSteps.emailAuth);
+                    ToastManager.error(new Error("Token expired, try logging in again"));
+                  } else {
+                    onerror(e as Error);
                   }
                 }
               },
@@ -119,13 +111,14 @@ export const useLogin = (
           break;
         }
         case LoginSteps.passwordAuth: {
-          if (!email.current || !password.current) {
+          if (!formRef.current.validate()) {
             setLoading(false);
             return;
           }
+          const values = formRef.current.getValues();
           await db.user.authenticatePassword(
-            email.current,
-            password.current,
+            values.email,
+            values.password,
             undefined,
             sessionExpired
           );
@@ -142,12 +135,11 @@ export const useLogin = (
   const finishWithError = async (e: Error) => {
     if (e.message === "invalid_grant") setStep(LoginSteps.emailAuth);
     setLoading(false);
-    ToastManager.show({
-      heading: strings.loginFailed(),
-      message: e.message,
-      type: "error",
-      context: "local"
-    });
+    if (e.message === "Password is incorrect.") {
+      formRef.current.setError("password", e.message);
+    } else {
+      setError(e);
+    }
   };
 
   const finishLogin = async () => {
@@ -174,13 +166,12 @@ export const useLogin = (
     login,
     step,
     setStep,
-    email,
-    password,
     passwordInputRef,
     emailInputRef,
     loading,
     setLoading,
     error,
-    setError
+    setError,
+    formRef
   };
 };

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

@@ -161,10 +161,10 @@ const FloatingButton = ({
               icon
                 ? icon
                 : route.name === "Notebooks"
-                  ? "notebook-plus"
-                  : route.name === "Trash"
-                    ? "delete"
-                    : "plus"
+                ? "notebook-plus"
+                : route.name === "Trash"
+                ? "delete"
+                : "plus"
             }
             color={color || colors.primary.accent}
             size={size === "small" ? AppFontSize.xl : AppFontSize.xxxl}

apps/mobile/app/components/date-picker/index.tsx

@@ -0,0 +1,85 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import React from "react";
+import { useThemeColors } from "@notesnook/theme";
+import { useRef } from "react";
+import { View } from "react-native";
+import { defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
+import DatePicker from "react-native-date-picker";
+import dayjs from "dayjs";
+import { strings } from "@notesnook/intl";
+import { Button } from "../ui/button";
+
+export default function DatePickerComponent(props: {
+  onConfirm: (date: Date) => void;
+  onCancel: () => void;
+}) {
+  const { colors, isDark } = useThemeColors();
+  const dateRef = useRef<Date>(dayjs().add(1, "day").toDate());
+  return (
+    <View
+      style={{
+        backgroundColor: colors.primary.background,
+        borderRadius: defaultBorderRadius,
+        padding: DefaultAppStyles.GAP,
+        borderWidth: 0.5,
+        borderColor: colors.primary.border,
+        width: "80%",
+        gap: DefaultAppStyles.GAP_VERTICAL
+      }}
+    >
+      <DatePicker
+        theme={isDark ? "dark" : "light"}
+        mode="date"
+        minimumDate={dayjs().add(1, "day").toDate()}
+        onCancel={() => {
+          close?.();
+        }}
+        date={dateRef.current}
+        onDateChange={(date) => {
+          dateRef.current = date;
+        }}
+      />
+
+      <Button
+        title={strings.setExpiry()}
+        type="accent"
+        style={{
+          width: "100%"
+        }}
+        onPress={async () => {
+          if (!dateRef.current) return;
+          props.onConfirm(dateRef.current);
+        }}
+      />
+
+      <Button
+        title={strings.cancel()}
+        type="secondary"
+        style={{
+          width: "100%"
+        }}
+        onPress={async () => {
+          props.onCancel();
+        }}
+      />
+    </View>
+  );
+}

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

@@ -23,7 +23,6 @@ import {
   ColorValue,
   KeyboardAvoidingView,
   Modal,
-  Platform,
   SafeAreaView,
   StyleSheet,
   TouchableOpacity,
@@ -137,7 +136,7 @@ const BaseDialog = ({
               ? background
               : transparent
                 ? "transparent"
-                : "rgba(0,0,0,0.3)"
+                : "rgba(0,0,0,0.1)"
           }}
         >
           <KeyboardAvoidingView

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

@@ -22,7 +22,6 @@ import { Text, View, ViewStyle } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
 import { AppFontSize } from "../../utils/size";
 import { Button, ButtonProps } from "../ui/button";
-import { PressableProps } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { DefaultAppStyles } from "../../utils/styles";

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

@@ -17,10 +17,12 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { KeyboardTypeOptions } from "react-native";
+import { KeyboardTypeOptions, TextInput } from "react-native";
 import { eSendEvent } from "../../services/event-manager";
 import { eCloseSimpleDialog, eOpenSimpleDialog } from "../../utils/events";
 import { ButtonProps } from "../ui/button";
+import { FieldValidator, FormRef } from "../ui/input/form-input";
+import { RefObject } from "react";
 
 export type DialogInfo = {
   title?: string;
@@ -43,6 +45,18 @@ export type DialogInfo = {
     | "errorShade";
   icon?: string;
   paragraphColor: string;
+  form?: {
+    formRef: FormRef;
+    items: {
+      name: string;
+      placeholder: string;
+      label?: string;
+      validators: FieldValidator[];
+      defaultValue?: string;
+      ref: RefObject<TextInput | null>;
+    }[];
+    onFormSubmit?: (form: FormRef) => Promise<boolean>;
+  };
   input: boolean;
   inputPlaceholder: string;
   defaultValue: string;

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

@@ -17,9 +17,14 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  RefObject
+} from "react";
 import { TextInput, View, ViewStyle } from "react-native";
 import { DDS } from "../../services/device-detection";
 import {
@@ -35,6 +40,7 @@ import { sleep } from "../../utils/time";
 import { Toast } from "../toast";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
+import { FormInput, type FormRef } from "../ui/input/form-input";
 import { Notice } from "../ui/notice";
 import Seperator from "../ui/seperator";
 import BaseDialog from "./base-dialog";
@@ -54,9 +60,34 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
   });
   const inputRef = useRef<TextInput>(null);
   const [dialogInfo, setDialogInfo] = useState<DialogInfo>();
+  const formRef = useRef(dialogInfo?.form?.formRef);
+  formRef.current = dialogInfo?.form?.formRef;
 
   const onPressPositive = async () => {
-    if (dialogInfo?.positivePress) {
+    // Handle form submission if form is available
+    if (dialogInfo?.form && formRef.current) {
+      inputRef.current?.blur();
+      setLoading(true);
+      try {
+        const isValid = await formRef.current.validate();
+        if (!isValid) {
+          setLoading(false);
+          return;
+        }
+
+        if (dialogInfo.form.onFormSubmit) {
+          const result = await dialogInfo.form.onFormSubmit(formRef.current);
+          if (result === false) {
+            setLoading(false);
+            return;
+          }
+        }
+      } catch (e) {
+        /** Empty */
+      }
+      setLoading(false);
+    } else if (dialogInfo?.positivePress) {
+      // Handle old input-based submission
       inputRef.current?.blur();
       setLoading(true);
       let result = false;
@@ -77,6 +108,7 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
 
     setChecked(false);
     values.current.inputValue = undefined;
+    formRef.current = undefined;
     setVisible(false);
   };
 
@@ -86,6 +118,7 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
       if (data.context !== context) return;
       setDialogInfo(data);
       setChecked(data.check?.defaultValue);
+      formRef.current = data?.form?.formRef;
       values.current.inputValue = data.defaultValue;
       setVisible(true);
     },
@@ -95,6 +128,7 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
   const hide = React.useCallback(() => {
     setChecked(false);
     values.current.inputValue = undefined;
+    formRef.current = undefined;
     setVisible(false);
     setDialogInfo(undefined);
     dialogInfo?.onClose?.();
@@ -135,19 +169,30 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
           ? false
           : dialogInfo.statusBarTranslucent
       }
-      bounce={!dialogInfo.input}
+      bounce={!dialogInfo.input && !dialogInfo.form}
       closeOnTouch={!dialogInfo.disableBackdropClosing}
       background={dialogInfo.background}
       transparent={
-        dialogInfo.transparent === undefined ? true : dialogInfo.transparent
+        dialogInfo.transparent === undefined ? false : dialogInfo.transparent
       }
       onShow={async () => {
-        if (dialogInfo.input) {
+        if (dialogInfo.input && !dialogInfo.form) {
           inputRef.current?.setNativeProps({
             text: dialogInfo.defaultValue
           });
           await sleep(300);
           inputRef.current?.focus();
+        } else if (dialogInfo.form) {
+          const items = dialogInfo.form?.items;
+          const firstItem = items[0];
+          for (const item of items) {
+            if (item.defaultValue) {
+              item.ref.current?.setNativeProps({
+                text: dialogInfo.defaultValue
+              });
+            }
+          }
+          firstItem?.ref?.current?.focus();
         }
       }}
       visible={true}
@@ -171,7 +216,36 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
           />
           <Seperator half />
 
-          {dialogInfo.input ? (
+          {dialogInfo.form ? (
+            <View
+              style={{
+                paddingHorizontal: DefaultAppStyles.GAP,
+                gap: DefaultAppStyles.GAP / 2
+              }}
+            >
+              {dialogInfo.form.items.map((item, index) => (
+                <FormInput
+                  key={item.name}
+                  fwdRef={item.ref}
+                  name={item.name}
+                  autoFocus={index === 0}
+                  placeholder={item.placeholder}
+                  formRef={formRef as RefObject<FormRef>}
+                  validators={item.validators}
+                  defaultValue={item.defaultValue}
+                  secureTextEntry={dialogInfo.secureTextEntry}
+                  onSubmitEditing={() => {
+                    const nextItem = dialogInfo?.form?.items?.[index + 1];
+                    if (nextItem) {
+                      nextItem?.ref.current?.focus();
+                    } else {
+                      onPressPositive();
+                    }
+                  }}
+                />
+              ))}
+            </View>
+          ) : dialogInfo.input ? (
             <View
               style={{
                 paddingHorizontal: DefaultAppStyles.GAP
@@ -185,7 +259,7 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
                 }}
                 testID="input-value"
                 secureTextEntry={dialogInfo.secureTextEntry}
-                //defaultValue={dialogInfo.defaultValue}
+                defaultValue={dialogInfo.defaultValue}
                 onSubmit={() => {
                   onPressPositive();
                 }}
@@ -238,7 +312,10 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
 
           <DialogButtons
             onPressNegative={onNegativePress}
-            onPressPositive={dialogInfo.positivePress && onPressPositive}
+            onPressPositive={
+              (dialogInfo.positivePress || dialogInfo.form?.onFormSubmit) &&
+              onPressPositive
+            }
             loading={loading}
             positiveTitle={dialogInfo.positiveText}
             negativeTitle={dialogInfo.negativeText}

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

@@ -366,7 +366,9 @@ export const AppLockPassword = () => {
                 SettingsService.getProperty("biometricsAuthEnabled") === false
               ) {
                 SettingsService.setProperty("appLockEnabled", false);
-                SettingsService.setPrivacyScreen(SettingsService.get());
+                SettingsService.setPrivacyScreen(
+                  SettingsService.getProperty("privacyScreen")
+                );
                 ToastManager.show({
                   message: strings.applockDisabled(),
                   type: "success"

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

@@ -167,14 +167,16 @@ const ColorPicker = ({
                   );
                 if (!title.current)
                   return ToastManager.error(
-                    new Error(strings.allFieldsRequired())
+                    new Error(strings.allFieldsRequired()),
+                    "color-picker"
                   );
                 const exists = await db.colors.all.find((v) =>
                   v.and([v(`colorCode`, "==", selectedColor)])
                 );
                 if (exists)
                   return ToastManager.error(
-                    new Error(strings.colorExists(selectedColor))
+                    new Error(strings.colorExists(selectedColor)),
+                    "color-picker"
                   );
                 const id = await db.colors.add({
                   title: title.current,

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

@@ -1,900 +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 Clipboard from "@react-native-clipboard/clipboard";
-import React, { Component, createRef } from "react";
-import { InteractionManager, View } from "react-native";
-import Share from "react-native-share";
-import { notesnook } from "../../../../e2e/test.ids";
-import { db } from "../../../common/database";
-import BiometricService from "../../../services/biometrics";
-import { DDS } from "../../../services/device-detection";
-import {
-  ToastManager,
-  eSendEvent,
-  eSubscribeEvent,
-  eUnSubscribeEvent
-} from "../../../services/event-manager";
-import Navigation from "../../../services/navigation";
-import { getElevationStyle } from "../../../utils/elevation";
-import {
-  eCloseActionSheet,
-  eCloseVaultDialog,
-  eOnLoadNote,
-  eOpenVaultDialog,
-  eUpdateNoteInEditor
-} from "../../../utils/events";
-import { deleteItems } from "../../../utils/functions";
-import { fluidTabsRef } from "../../../utils/global-refs";
-import { convertNoteToText } from "../../../utils/note-to-text";
-import { sleep } from "../../../utils/time";
-import BaseDialog from "../../dialog/base-dialog";
-import DialogButtons from "../../dialog/dialog-buttons";
-import DialogHeader from "../../dialog/dialog-header";
-import { Toast } from "../../toast";
-import { Button } from "../../ui/button";
-import Input from "../../ui/input";
-import Seperator from "../../ui/seperator";
-import Paragraph from "../../ui/typography/paragraph";
-import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../../utils/styles";
-
-export class VaultDialog extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      visible: false,
-      wrongPassword: false,
-      loading: false,
-      note: {},
-      vault: false,
-      locked: true,
-      permanant: false,
-      goToEditor: false,
-      share: false,
-      passwordsDontMatch: false,
-      deleteNote: false,
-      focusIndex: null,
-      biometricUnlock: false,
-      isBiometryEnrolled: false,
-      isBiometryAvailable: false,
-      fingerprintAccess: false,
-      changePassword: false,
-      copyNote: false,
-      revokeFingerprintAccess: false,
-      title: strings.goToEditor(),
-      description: null,
-      clearVault: false,
-      deleteVault: false,
-      deleteAll: false,
-      noteLocked: false
-    };
-
-    this.passInputRef = createRef();
-    this.confirmPassRef = createRef();
-    this.changePassInputRef = createRef();
-
-    this.password = null;
-    this.confirmPassword = null;
-    this.newPassword = null;
-    this.title = !this.state.novault
-      ? strings.createVault()
-      : this.state.fingerprintAccess
-        ? strings.vaultFingerprintUnlock()
-        : this.state.revokeFingerprintAccess
-          ? strings.revokeVaultFingerprintUnlock()
-          : this.state.changePassword
-            ? strings.changeVaultPassword()
-            : this.state.noteLocked
-              ? this.state.deleteNote
-                ? strings.deleteNote()
-                : this.state.share
-                  ? strings.shareNote()
-                  : this.state.copyNote
-                    ? strings.copyNote()
-                    : this.state.goToEditor
-                      ? strings.goToEditor()
-                      : strings.goToEditor()
-              : strings.lockNote();
-  }
-
-  componentDidMount() {
-    eSubscribeEvent(eOpenVaultDialog, this.open);
-    eSubscribeEvent(eCloseVaultDialog, this.close);
-  }
-
-  componentWillUnmount() {
-    eUnSubscribeEvent(eOpenVaultDialog, this.open);
-    eUnSubscribeEvent(eCloseVaultDialog, this.close);
-  }
-
-  /**
-   *
-   * @param {import('../../../services/event-manager').vaultType} data
-   */
-  open = async (data) => {
-    let biometry = await BiometricService.isBiometryAvailable();
-    let available = false;
-    let fingerprint = await BiometricService.hasInternetCredentials("nn_vault");
-
-    if (biometry) {
-      available = true;
-    }
-
-    this.setState({
-      note: data.item,
-      novault: data.novault,
-      locked: data.locked,
-      permanant: data.permanant,
-      goToEditor: data.goToEditor,
-      share: data.share,
-      deleteNote: data.deleteNote,
-      copyNote: data.copyNote,
-      isBiometryAvailable: available,
-      biometricUnlock: fingerprint,
-      isBiometryEnrolled: fingerprint,
-      fingerprintAccess: data.fingerprintAccess,
-      changePassword: data.changePassword,
-      revokeFingerprintAccess: data.revokeFingerprintAccess,
-      title: data.title,
-      description: data.description,
-      clearVault: data.clearVault,
-      deleteVault: data.deleteVault,
-      noteLocked: data.item && (await db.vaults.itemExists(data.item))
-    });
-
-    if (
-      fingerprint &&
-      data.novault &&
-      !data.fingerprintAccess &&
-      !data.revokeFingerprintAccess &&
-      !data.changePassword &&
-      !data.clearVault &&
-      !data.deleteVault
-    ) {
-      await this._onPressFingerprintAuth(data.title, data.description);
-    } else {
-      this.setState({
-        visible: true
-      });
-    }
-  };
-
-  close = () => {
-    if (this.state.loading) {
-      ToastManager.show({
-        heading: this.state.title,
-        message: strings.pleaseWait() + "...",
-        type: "success",
-        context: "local"
-      });
-      return;
-    }
-
-    Navigation.queueRoutesForUpdate();
-
-    this.password = null;
-    this.confirmPassword = null;
-    this.setState({
-      visible: false,
-      note: {},
-      locked: false,
-      permanant: false,
-      goToEditor: false,
-      share: false,
-      novault: false,
-      deleteNote: false,
-      passwordsDontMatch: false
-    });
-  };
-
-  onPress = async () => {
-    if (this.state.revokeFingerprintAccess) {
-      await this._revokeFingerprintAccess();
-
-      this.close();
-      return;
-    }
-    if (this.state.loading) return;
-
-    if (!this.password) {
-      ToastManager.show({
-        heading: strings.passwordNotEntered(),
-        type: "error",
-        context: "local"
-      });
-      return;
-    }
-
-    if (!this.state.novault) {
-      if (this.password !== this.confirmPassword) {
-        ToastManager.show({
-          heading: strings.passwordNotMatched(),
-          type: "error",
-          context: "local"
-        });
-        this.setState({
-          passwordsDontMatch: true
-        });
-        return;
-      }
-
-      this._createVault();
-    } else if (this.state.changePassword) {
-      this.setState({
-        loading: true
-      });
-
-      db.vault
-        .changePassword(this.password, this.newPassword)
-        .then(() => {
-          this.setState({
-            loading: false
-          });
-          if (this.state.biometricUnlock) {
-            this._enrollFingerprint(this.newPassword);
-          }
-          ToastManager.show({
-            heading: strings.passwordUpdated(),
-            type: "success",
-            context: "global"
-          });
-          this.close();
-        })
-        .catch((e) => {
-          this.setState({
-            loading: false
-          });
-          if (e.message === db.vault.ERRORS.wrongPassword) {
-            ToastManager.show({
-              heading: strings.passwordIncorrect(),
-              type: "error",
-              context: "local"
-            });
-          } else {
-            ToastManager.error(e);
-          }
-        });
-    } else if (this.state.locked) {
-      if (!this.password || this.password.trim() === 0) {
-        ToastManager.show({
-          heading: strings.passwordIncorrect(),
-          type: "error",
-          context: "local"
-        });
-        this.setState({
-          wrongPassword: true
-        });
-        return;
-      }
-      if (this.state.noteLocked) {
-        await this._unlockNote();
-      } else {
-        db.vault
-          .unlock(this.password)
-          .then(async () => {
-            this.setState({
-              wrongPassword: false
-            });
-            await this._lockNote();
-          })
-          .catch((e) => {
-            this._takeErrorAction(e);
-          });
-      }
-    } else if (this.state.fingerprintAccess) {
-      this._enrollFingerprint(this.password);
-    } else if (this.state.clearVault) {
-      await this.clearVault();
-    } else if (this.state.deleteVault) {
-      await this.deleteVault();
-    }
-  };
-
-  deleteVault = async () => {
-    this.setState({
-      loading: true
-    });
-    try {
-      let verified = true;
-      if (await db.user.getUser()) {
-        verified = await db.user.verifyPassword(this.password);
-      }
-      if (verified) {
-        let noteIds = [];
-        if (this.state.deleteAll) {
-          const vault = await db.vaults.default();
-          const relations = await db.relations.from(vault, "note").get();
-          noteIds = relations.map((item) => item.toId);
-        }
-        await db.vault.delete(this.state.deleteAll);
-
-        if (this.state.deleteAll) {
-          noteIds.forEach((id) => {
-            eSendEvent(
-              eUpdateNoteInEditor,
-              {
-                id: id,
-                deleted: true
-              },
-              true
-            );
-          });
-        }
-        eSendEvent("vaultUpdated");
-        this.setState({
-          loading: false
-        });
-        setTimeout(() => {
-          this.close();
-        }, 100);
-      } else {
-        ToastManager.show({
-          heading: strings.passwordIncorrect(),
-          type: "error",
-          context: "local"
-        });
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  clearVault = async () => {
-    this.setState({
-      loading: true
-    });
-    try {
-      const vault = await db.vaults.default();
-      const relations = await db.relations.from(vault, "note").get();
-      const noteIds = relations.map((item) => item.toId);
-
-      await db.vault.clear(this.password);
-
-      noteIds.forEach((id) => {
-        eSendEvent(
-          eUpdateNoteInEditor,
-          {
-            id: id,
-            deleted: true
-          },
-          true
-        );
-      });
-      this.setState({
-        loading: false
-      });
-      this.close();
-      eSendEvent("vaultUpdated");
-    } catch (e) {
-      ToastManager.show({
-        heading: strings.passwordIncorrect(),
-        type: "error",
-        context: "local"
-      });
-    }
-    this.setState({
-      loading: false
-    });
-  };
-
-  async _lockNote() {
-    if (!this.password || this.password.trim() === 0) {
-      ToastManager.show({
-        heading: strings.passwordIncorrect(),
-        type: "error",
-        context: "local"
-      });
-      return;
-    } else {
-      await db.vault.add(this.state.note.id);
-
-      eSendEvent(eUpdateNoteInEditor, this.state.note, true);
-
-      this.close();
-      ToastManager.show({
-        message: strings.noteLocked(),
-        type: "error",
-        context: "local"
-      });
-      this.setState({
-        loading: false
-      });
-    }
-  }
-
-  async _unlockNote() {
-    if (!this.password || this.password.trim() === 0) {
-      ToastManager.show({
-        heading: strings.passwordIncorrect(),
-        type: "error",
-        context: "local"
-      });
-      return;
-    }
-    if (this.state.permanant) {
-      this._permanantUnlock();
-    } else {
-      await this._openNote();
-    }
-  }
-
-  _openNote = async () => {
-    try {
-      let note = await db.vault.open(this.state.note.id, this.password);
-      if (this.state.biometricUnlock && !this.state.isBiometryEnrolled) {
-        await this._enrollFingerprint(this.password);
-      }
-
-      if (this.state.goToEditor) {
-        this._openInEditor(note);
-      } else if (this.state.share) {
-        await this._shareNote(note);
-      } else if (this.state.deleteNote) {
-        await this._deleteNote();
-      } else if (this.state.copyNote) {
-        await this._copyNote(note);
-      }
-    } catch (e) {
-      this._takeErrorAction(e);
-    }
-  };
-  async _deleteNote() {
-    try {
-      await db.vault.remove(this.state.note.id, this.password);
-      await deleteItems("note", [this.state.note.id]);
-      this.close();
-    } catch (e) {
-      this._takeErrorAction(e);
-    }
-  }
-
-  async _enrollFingerprint(password) {
-    this.setState(
-      {
-        loading: true
-      },
-      async () => {
-        try {
-          await db.vault.unlock(password);
-          await BiometricService.storeCredentials(password);
-          this.setState({
-            loading: false
-          });
-          eSendEvent("vaultUpdated");
-          ToastManager.show({
-            heading: strings.biometricUnlockEnabled(),
-            type: "success",
-            context: "global"
-          });
-          this.close();
-        } catch (e) {
-          this.close();
-          ToastManager.show({
-            heading: strings.passwordIncorrect(),
-            type: "error",
-            context: "local"
-          });
-          this.setState({
-            loading: false
-          });
-        }
-      }
-    );
-  }
-
-  async _createVault() {
-    await db.vault.create(this.password);
-
-    if (this.state.biometricUnlock) {
-      await this._enrollFingerprint(this.password);
-    }
-    if (this.state.note?.id) {
-      await db.vault.add(this.state.note.id);
-      eSendEvent(eUpdateNoteInEditor, this.state.note, true);
-      this.setState({
-        loading: false
-      });
-      ToastManager.show({
-        heading: strings.noteLocked(),
-        type: "success",
-        context: "global"
-      });
-      this.close();
-    } else {
-      ToastManager.show({
-        heading: strings.vaultCreated(),
-        type: "success",
-        context: "global"
-      });
-      this.close();
-    }
-    eSendEvent("vaultUpdated");
-  }
-
-  _permanantUnlock() {
-    db.vault
-      .remove(this.state.note.id, this.password)
-      .then(() => {
-        ToastManager.show({
-          heading: strings.noteUnlocked(),
-          type: "success",
-          context: "global"
-        });
-        eSendEvent(eUpdateNoteInEditor, this.state.note, true);
-        this.close();
-      })
-      .catch((e) => {
-        this._takeErrorAction(e);
-      });
-  }
-
-  _openInEditor(note) {
-    this.close();
-    InteractionManager.runAfterInteractions(async () => {
-      eSendEvent(eOnLoadNote, {
-        item: note
-      });
-      if (!DDS.isTab) {
-        fluidTabsRef.current?.goToPage("editor");
-      }
-    });
-  }
-
-  async _copyNote(note) {
-    Clipboard.setString((await convertNoteToText(note, true)) || "");
-    ToastManager.show({
-      heading: strings.noteCopied(),
-      type: "success",
-      context: "global"
-    });
-    this.close();
-  }
-
-  async _shareNote(note) {
-    this.close();
-    try {
-      await Share.open({
-        heading: note.title,
-        failOnCancel: false,
-        message: (await convertNoteToText(note)) || ""
-      });
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  _takeErrorAction(e) {
-    this.setState({
-      wrongPassword: true,
-      visible: true
-    });
-    setTimeout(() => {
-      ToastManager.show({
-        heading: strings.passwordIncorrect(),
-        type: "error",
-        context: "local"
-      });
-    }, 500);
-  }
-
-  _revokeFingerprintAccess = async () => {
-    try {
-      await BiometricService.resetCredentials();
-      eSendEvent("vaultUpdated");
-      ToastManager.show({
-        heading: strings.biometricUnlockDisabled(),
-        type: "success",
-        context: "global"
-      });
-    } catch (e) {
-      ToastManager.show({
-        heading: e.message,
-        type: "success",
-        context: "global"
-      });
-    }
-  };
-
-  _onPressFingerprintAuth = async (title, description) => {
-    try {
-      let credentials = await BiometricService.getCredentials(
-        title || this.state.title,
-        description || this.state.description
-      );
-
-      if (credentials?.password) {
-        this.password = credentials.password;
-        this.onPress();
-      } else {
-        eSendEvent(eCloseActionSheet);
-        await sleep(300);
-        this.setState({
-          visible: true
-        });
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  render() {
-    const { colors } = this.props;
-    const {
-      note,
-      visible,
-      novault,
-      deleteNote,
-      share,
-      goToEditor,
-      fingerprintAccess,
-      changePassword,
-      loading,
-      deleteVault,
-      clearVault
-    } = this.state;
-
-    if (!visible) return null;
-    return (
-      <BaseDialog
-        onShow={async () => {
-          await sleep(100);
-
-          this.passInputRef.current?.focus();
-        }}
-        statusBarTranslucent={false}
-        onRequestClose={this.close}
-        visible={true}
-      >
-        <View
-          style={{
-            ...getElevationStyle(5),
-            width: DDS.isTab ? 350 : "85%",
-            borderRadius: 10,
-            backgroundColor: colors.primary.background,
-            paddingTop: 12
-          }}
-        >
-          <DialogHeader title={this.state.title} icon="shield" padding={12} />
-          <Seperator half />
-
-          <View
-            style={{
-              paddingHorizontal: DefaultAppStyles.GAP
-            }}
-          >
-            {(novault ||
-              changePassword ||
-              this.state.clearVault ||
-              this.state.deleteVault) &&
-            !this.state.revokeFingerprintAccess ? (
-              <>
-                <Input
-                  fwdRef={this.passInputRef}
-                  editable={!loading}
-                  autoCapitalize="none"
-                  testID={notesnook.ids.dialogs.vault.pwd}
-                  onChangeText={(value) => {
-                    this.password = value;
-                  }}
-                  marginBottom={
-                    !this.state.biometricUnlock ||
-                    !this.state.isBiometryEnrolled ||
-                    !novault ||
-                    changePassword
-                      ? 0
-                      : 10
-                  }
-                  onSubmit={() => {
-                    changePassword
-                      ? this.confirmPassRef.current?.focus()
-                      : this.onPress;
-                  }}
-                  autoComplete="password"
-                  returnKeyLabel={
-                    changePassword ? strings.next() : this.state.title
-                  }
-                  returnKeyType={changePassword ? "next" : "done"}
-                  secureTextEntry
-                  placeholder={
-                    changePassword
-                      ? strings.currentPassword()
-                      : strings.password()
-                  }
-                />
-
-                {!this.state.biometricUnlock ||
-                !this.state.isBiometryEnrolled ||
-                !novault ||
-                changePassword ? null : (
-                  <Button
-                    onPress={() =>
-                      this._onPressFingerprintAuth(strings.unlockNote(), "")
-                    }
-                    icon="fingerprint"
-                    width="100%"
-                    title={strings.unlockWithBiometrics()}
-                    type="transparent"
-                  />
-                )}
-              </>
-            ) : null}
-
-            {this.state.deleteVault && (
-              <Button
-                onPress={() =>
-                  this.setState({
-                    deleteAll: !this.state.deleteAll
-                  })
-                }
-                icon={
-                  this.state.deleteAll
-                    ? "check-circle-outline"
-                    : "checkbox-blank-circle-outline"
-                }
-                style={{
-                  marginTop: DefaultAppStyles.GAP_VERTICAL
-                }}
-                width="100%"
-                title={strings.deleteAllNotes()}
-                type="errorShade"
-              />
-            )}
-
-            {changePassword ? (
-              <>
-                <Seperator half />
-                <Input
-                  ref={this.confirmPassRef}
-                  editable={!loading}
-                  testID={notesnook.ids.dialogs.vault.changePwd}
-                  autoCapitalize="none"
-                  onChangeText={(value) => {
-                    this.newPassword = value;
-                  }}
-                  autoComplete="password"
-                  onSubmit={this.onPress}
-                  returnKeyLabel="Change"
-                  returnKeyType="done"
-                  secureTextEntry
-                  placeholder={strings.newPassword()}
-                />
-              </>
-            ) : null}
-
-            {!novault ? (
-              <View>
-                <Input
-                  fwdRef={this.passInputRef}
-                  autoCapitalize="none"
-                  testID={notesnook.ids.dialogs.vault.pwd}
-                  onChangeText={(value) => {
-                    this.password = value;
-                  }}
-                  autoComplete="password"
-                  returnKeyLabel={strings.next()}
-                  returnKeyType="next"
-                  secureTextEntry
-                  onSubmit={() => {
-                    this.confirmPassRef.current?.focus();
-                  }}
-                  placeholder={strings.password()}
-                />
-
-                <Input
-                  fwdRef={this.confirmPassRef}
-                  autoCapitalize="none"
-                  testID={notesnook.ids.dialogs.vault.pwdAlt}
-                  secureTextEntry
-                  validationType="confirmPassword"
-                  customValidator={() => this.password}
-                  errorMessage="Passwords do not match."
-                  onErrorCheck={() => null}
-                  marginBottom={0}
-                  autoComplete="password"
-                  returnKeyLabel="Create"
-                  returnKeyType="done"
-                  onChangeText={(value) => {
-                    this.confirmPassword = value;
-                    if (value !== this.password) {
-                      this.setState({
-                        passwordsDontMatch: true
-                      });
-                    } else {
-                      this.setState({
-                        passwordsDontMatch: false
-                      });
-                    }
-                  }}
-                  onSubmit={this.onPress}
-                  placeholder={strings.confirmPassword()}
-                />
-              </View>
-            ) : null}
-
-            {this.state.biometricUnlock &&
-            !this.state.isBiometryEnrolled &&
-            novault ? (
-              <Paragraph>{strings.vaultEnableBiometrics()}</Paragraph>
-            ) : null}
-
-            {this.state.isBiometryAvailable &&
-            !this.state.fingerprintAccess &&
-            !this.state.clearVault &&
-            !this.state.deleteVault &&
-            ((!this.state.biometricUnlock && !changePassword) || !novault) ? (
-              <Button
-                onPress={() => {
-                  this.setState({
-                    biometricUnlock: !this.state.biometricUnlock
-                  });
-                }}
-                style={{
-                  marginTop: DefaultAppStyles.GAP_VERTICAL
-                }}
-                icon="fingerprint"
-                width="100%"
-                title={strings.unlockWithBiometrics()}
-                iconColor={
-                  this.state.biometricUnlock
-                    ? colors.selected.accent
-                    : colors.primary.icon
-                }
-                type={this.state.biometricUnlock ? "transparent" : "plain"}
-              />
-            ) : null}
-          </View>
-
-          <DialogButtons
-            onPressNegative={this.close}
-            onPressPositive={this.onPress}
-            loading={loading}
-            positiveType={
-              deleteVault || clearVault ? "errorShade" : "transparent"
-            }
-            positiveTitle={
-              deleteVault
-                ? strings.delete()
-                : clearVault
-                  ? strings.clear()
-                  : fingerprintAccess
-                    ? strings.enable()
-                    : this.state.revokeFingerprintAccess
-                      ? strings.revoke()
-                      : changePassword
-                        ? strings.change()
-                        : this.state.noteLocked
-                          ? deleteNote
-                            ? strings.delete()
-                            : share
-                              ? strings.share()
-                              : goToEditor
-                                ? strings.open()
-                                : strings.unlock()
-                          : !note.id
-                            ? strings.create()
-                            : strings.lock()
-            }
-          />
-        </View>
-        <Toast context="local" />
-      </BaseDialog>
-    );
-  }
-}

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

@@ -0,0 +1,963 @@
+/*
+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 Clipboard from "@react-native-clipboard/clipboard";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { InteractionManager, View, TextInput } from "react-native";
+import Share from "react-native-share";
+import { notesnook } from "../../../../e2e/test.ids";
+import { db } from "../../../common/database";
+import BiometricService from "../../../services/biometrics";
+import { DDS } from "../../../services/device-detection";
+import {
+  ToastManager,
+  Vault,
+  VaultRequestType,
+  eSendEvent,
+  eSubscribeEvent,
+  eUnSubscribeEvent
+} from "../../../services/event-manager";
+import Navigation from "../../../services/navigation";
+import { getElevationStyle } from "../../../utils/elevation";
+import {
+  eCloseActionSheet,
+  eCloseVaultDialog,
+  eOnLoadNote,
+  eOpenVaultDialog,
+  eUpdateNoteInEditor
+} from "../../../utils/events";
+import { deleteItems } from "../../../utils/functions";
+import { fluidTabsRef } from "../../../utils/global-refs";
+import { convertNoteToText } from "../../../utils/note-to-text";
+import { sleep } from "../../../utils/time";
+import BaseDialog from "../../dialog/base-dialog";
+import DialogButtons from "../../dialog/dialog-buttons";
+import DialogHeader from "../../dialog/dialog-header";
+import { Toast } from "../../toast";
+import { Button } from "../../ui/button";
+import Input from "../../ui/input";
+import Seperator from "../../ui/seperator";
+import Paragraph from "../../ui/typography/paragraph";
+import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
+import {
+  isEncryptedContent,
+  Note,
+  NoteContent,
+  VAULT_ERRORS
+} from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
+
+export const VaultDialog: React.FC = () => {
+  const { colors } = useThemeColors();
+
+  // UI State
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [wrongPassword, setWrongPassword] = useState(false);
+  const [passwordsDontMatch, setPasswordsDontMatch] = useState(false);
+  const [deleteAll, setDeleteAll] = useState(false);
+  const [biometricUnlock, setBiometricUnlock] = useState(false);
+  const [isBiometryAvailable, setIsBiometryAvailable] = useState(false);
+  const [isBiometryEnrolled, setIsBiometryEnrolled] = useState(false);
+
+  // Refs for non-UI state
+  const requestTypeRef = useRef<VaultRequestType | null>(null);
+  const noteRef = useRef<Note | undefined>(undefined);
+  const titleRef = useRef<string>(strings.goToEditor());
+  const descriptionRef = useRef<string | null>(null);
+  const paragraphRef = useRef<string | null>(null);
+  const buttonTitleRef = useRef<string | null>(null);
+  const positiveButtonTypeRef = useRef<"errorShade" | "transparent" | "accent">(
+    "transparent"
+  );
+  const customActionTitleRef = useRef<string | null>(null);
+  const customActionParagraphRef = useRef<string | null>(null);
+  const noteLockedRef = useRef(false);
+  const onUnlockRef = useRef<
+    | ((
+        item: Note & {
+          content?: NoteContent<false>;
+        },
+        password: string
+      ) => void)
+    | undefined
+  >(undefined);
+
+  // Input refs
+  const passInputRef = useRef<TextInput>(null);
+  const confirmPassRef = useRef<TextInput>(null);
+  const changePassInputRef = useRef<TextInput>(null);
+
+  // Password refs
+  const passwordRef = useRef<string | null>(null);
+  const confirmPasswordRef = useRef<string | null>(null);
+  const newPasswordRef = useRef<string | null>(null);
+
+  const close = useCallback(() => {
+    if (loading) {
+      ToastManager.show({
+        heading: titleRef.current,
+        message: strings.pleaseWait() + "...",
+        type: "success",
+        context: "local"
+      });
+      return;
+    }
+
+    Navigation.queueRoutesForUpdate();
+
+    // Reset password refs
+    passwordRef.current = null;
+    confirmPasswordRef.current = null;
+    newPasswordRef.current = null;
+
+    // Reset refs
+    requestTypeRef.current = null;
+    noteRef.current = undefined;
+    titleRef.current = strings.goToEditor();
+    descriptionRef.current = null;
+    paragraphRef.current = null;
+    buttonTitleRef.current = null;
+    positiveButtonTypeRef.current = "transparent";
+    customActionTitleRef.current = null;
+    customActionParagraphRef.current = null;
+    noteLockedRef.current = false;
+    onUnlockRef.current = undefined;
+
+    // Reset UI state
+    setVisible(false);
+    setLoading(false);
+    setWrongPassword(false);
+    setPasswordsDontMatch(false);
+    setDeleteAll(false);
+    setBiometricUnlock(false);
+    setIsBiometryAvailable(false);
+    setIsBiometryEnrolled(false);
+  }, [loading]);
+
+  const deleteVault = useCallback(async () => {
+    setLoading(true);
+    try {
+      let verified = true;
+      if (await db.user.getUser()) {
+        verified = await db.user.verifyPassword(passwordRef.current || "");
+      }
+      if (verified) {
+        let noteIds: string[] = [];
+        if (deleteAll) {
+          const vault = await db.vaults.default();
+          const relations = await db.relations
+            .from(
+              {
+                type: "vault",
+                id: vault!.id
+              },
+              "note"
+            )
+            .get();
+          noteIds = relations.map((item) => item.toId);
+        }
+        await db.vault.delete(deleteAll);
+
+        if (deleteAll) {
+          noteIds.forEach((id) => {
+            eSendEvent(
+              eUpdateNoteInEditor,
+              {
+                id: id,
+                deleted: true
+              },
+              true
+            );
+          });
+        }
+        eSendEvent("vaultUpdated");
+        setLoading(false);
+        setTimeout(() => {
+          close();
+        }, 100);
+      } else {
+        setLoading(false);
+        ToastManager.show({
+          heading: strings.passwordIncorrect(),
+          type: "error",
+          context: "local"
+        });
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }, [deleteAll, close]);
+
+  const clearVault = useCallback(async () => {
+    setLoading(true);
+    try {
+      const vault = await db.vaults.default();
+      const relations = await db.relations.from(vault!, "note").get();
+      const noteIds = relations.map((item) => item.toId);
+
+      await db.vault.clear(passwordRef.current || "");
+
+      noteIds.forEach((id) => {
+        eSendEvent(
+          eUpdateNoteInEditor,
+          {
+            id: id,
+            deleted: true
+          },
+          true
+        );
+      });
+      setLoading(false);
+      close();
+      eSendEvent("vaultUpdated");
+      ToastManager.show({
+        message: strings.vaultCleared(),
+        type: "success"
+      });
+    } catch (e) {
+      ToastManager.show({
+        heading: strings.passwordIncorrect(),
+        type: "error",
+        context: "local"
+      });
+    }
+    setLoading(false);
+  }, [close]);
+
+  const enrollFingerprint = useCallback(
+    async (password: string) => {
+      setLoading(true);
+      try {
+        await db.vault.unlock(password);
+        await BiometricService.storeCredentials(password);
+        setLoading(false);
+        eSendEvent("vaultUpdated");
+        ToastManager.show({
+          heading: strings.biometricUnlockEnabled(),
+          type: "success",
+          context: "global"
+        });
+        close();
+      } catch (e) {
+        close();
+        ToastManager.show({
+          heading: strings.passwordIncorrect(),
+          type: "error",
+          context: "local"
+        });
+        setLoading(false);
+      }
+    },
+    [close]
+  );
+
+  const takeErrorAction = useCallback(() => {
+    setWrongPassword(true);
+    setVisible(true);
+    setTimeout(() => {
+      ToastManager.show({
+        heading: strings.passwordIncorrect(),
+        type: "error",
+        context: "local"
+      });
+    }, 500);
+  }, []);
+
+  const lockNote = useCallback(async () => {
+    if (!passwordRef.current || passwordRef.current.trim() === "") {
+      ToastManager.show({
+        heading: strings.passwordIncorrect(),
+        type: "error",
+        context: "local"
+      });
+      return;
+    } else {
+      await db.vault.add(noteRef.current!.id);
+
+      eSendEvent(eUpdateNoteInEditor, noteRef.current, true);
+
+      close();
+      ToastManager.show({
+        message: strings.noteLocked(),
+        type: "error",
+        context: "local"
+      });
+      setLoading(false);
+    }
+  }, [close]);
+
+  const permanantUnlock = useCallback(() => {
+    db.vault
+      .remove(noteRef.current!.id, passwordRef.current || "")
+      .then(async () => {
+        ToastManager.show({
+          heading: strings.noteUnlocked(),
+          type: "success",
+          context: "global"
+        });
+        eSendEvent(eUpdateNoteInEditor, noteRef.current, true);
+        if (biometricUnlock && !isBiometryEnrolled) {
+          await enrollFingerprint(passwordRef.current || "");
+        }
+        close();
+      })
+      .catch((e) => {
+        takeErrorAction();
+      });
+  }, [
+    biometricUnlock,
+    isBiometryEnrolled,
+    close,
+    enrollFingerprint,
+    takeErrorAction
+  ]);
+
+  const openInEditor = useCallback(
+    (note: Note & { content?: NoteContent<false> }) => {
+      close();
+      InteractionManager.runAfterInteractions(async () => {
+        eSendEvent(eOnLoadNote, {
+          item: note
+        });
+        if (!DDS.isTab) {
+          fluidTabsRef.current?.goToPage("editor");
+        }
+      });
+    },
+    [close]
+  );
+
+  const copyNote = useCallback(
+    async (note: Note & { content?: NoteContent<false> }) => {
+      Clipboard.setString((await convertNoteToText(note, true)) || "");
+      ToastManager.show({
+        heading: strings.noteCopied(),
+        type: "success",
+        context: "global"
+      });
+      close();
+    },
+    [close]
+  );
+
+  const shareNote = useCallback(
+    async (note: Note & { content?: NoteContent<false> }) => {
+      close();
+      try {
+        await Share.open({
+          title: note.title,
+          failOnCancel: false,
+          message: (await convertNoteToText(note)) || ""
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    [close]
+  );
+
+  const deleteNote = useCallback(async () => {
+    try {
+      await db.vault.remove(noteRef.current!.id, passwordRef.current || "");
+      await deleteItems("note", [noteRef.current!.id]);
+      close();
+    } catch (e) {
+      takeErrorAction();
+    }
+  }, [close, takeErrorAction]);
+
+  const openNote = useCallback(async () => {
+    try {
+      if (!passwordRef.current) throw new Error("Invalid password");
+
+      const note = await db.vault.open(
+        noteRef.current!.id,
+        passwordRef.current
+      );
+      if (!note) throw new Error("Failed to unlock note.");
+      if (biometricUnlock && !isBiometryEnrolled) {
+        await enrollFingerprint(passwordRef.current || "");
+      }
+
+      const requestType = requestTypeRef.current;
+
+      if (requestType === VaultRequestType.GoToEditor) {
+        openInEditor(note);
+      } else if (requestType === VaultRequestType.ShareNote) {
+        await shareNote(note);
+      } else if (requestType === VaultRequestType.DeleteNote) {
+        await deleteNote();
+      } else if (requestType === VaultRequestType.CopyNote) {
+        await copyNote(note);
+      } else if (
+        requestType === VaultRequestType.CustomAction &&
+        onUnlockRef.current
+      ) {
+        const password = passwordRef.current;
+        const unlock = onUnlockRef.current;
+        close();
+        await sleep(500);
+        unlock(note, password);
+      }
+    } catch (e) {
+      takeErrorAction();
+    }
+  }, [
+    biometricUnlock,
+    isBiometryEnrolled,
+    enrollFingerprint,
+    openInEditor,
+    shareNote,
+    deleteNote,
+    copyNote,
+    close,
+    takeErrorAction
+  ]);
+
+  const unlockNote = useCallback(async () => {
+    if (!passwordRef.current || passwordRef.current.trim() === "") {
+      ToastManager.show({
+        heading: strings.passwordIncorrect(),
+        type: "error",
+        context: "local"
+      });
+      return;
+    }
+    if (requestTypeRef.current === VaultRequestType.PermanentUnlock) {
+      permanantUnlock();
+    } else {
+      await openNote();
+    }
+  }, [permanantUnlock, openNote]);
+
+  const createVault = useCallback(async () => {
+    await db.vault.create(passwordRef.current || "");
+
+    if (biometricUnlock) {
+      await enrollFingerprint(passwordRef.current || "");
+    }
+    if (noteRef.current?.id) {
+      await db.vault.add(noteRef.current.id);
+      eSendEvent(eUpdateNoteInEditor, noteRef.current, true);
+      setLoading(false);
+      ToastManager.show({
+        heading: strings.noteLocked(),
+        type: "success",
+        context: "global"
+      });
+      close();
+    } else {
+      ToastManager.show({
+        heading: strings.vaultCreated(),
+        type: "success",
+        context: "global"
+      });
+      close();
+    }
+    eSendEvent("vaultUpdated");
+  }, [biometricUnlock, enrollFingerprint, close]);
+
+  const revokeFingerprintAccess = useCallback(async () => {
+    try {
+      await BiometricService.resetCredentials();
+      eSendEvent("vaultUpdated");
+      ToastManager.show({
+        heading: strings.biometricUnlockDisabled(),
+        type: "success",
+        context: "global"
+      });
+    } catch (e: any) {
+      ToastManager.show({
+        heading: e.message,
+        type: "success",
+        context: "global"
+      });
+    }
+  }, []);
+
+  const onPress = useCallback(async () => {
+    const requestType = requestTypeRef.current;
+
+    if (requestType === VaultRequestType.RevokeFingerprint) {
+      await revokeFingerprintAccess();
+      close();
+      return;
+    }
+
+    if (loading) return;
+
+    if (!passwordRef.current) {
+      ToastManager.show({
+        heading: strings.passwordNotEntered(),
+        type: "error",
+        context: "local"
+      });
+      return;
+    }
+
+    if (requestType === VaultRequestType.CreateVault) {
+      if (passwordRef.current !== confirmPasswordRef.current) {
+        ToastManager.show({
+          heading: strings.passwordNotMatched(),
+          type: "error",
+          context: "local"
+        });
+        setPasswordsDontMatch(true);
+        return;
+      }
+
+      createVault();
+    } else if (requestType === VaultRequestType.ChangePassword) {
+      setLoading(true);
+
+      db.vault
+        .changePassword(passwordRef.current, newPasswordRef.current || "")
+        .then(() => {
+          setLoading(false);
+          if (biometricUnlock) {
+            enrollFingerprint(newPasswordRef.current || "");
+          }
+          ToastManager.show({
+            heading: strings.passwordUpdated(),
+            type: "success",
+            context: "global"
+          });
+          close();
+        })
+        .catch((e) => {
+          setLoading(false);
+          if (e.message === VAULT_ERRORS.wrongPassword) {
+            ToastManager.show({
+              heading: strings.passwordIncorrect(),
+              type: "error",
+              context: "local"
+            });
+          } else {
+            ToastManager.error(e);
+          }
+        });
+    } else if (requestType === VaultRequestType.LockNote) {
+      if (!passwordRef.current || passwordRef.current.trim() === "") {
+        ToastManager.show({
+          heading: strings.passwordIncorrect(),
+          type: "error",
+          context: "local"
+        });
+        setWrongPassword(true);
+        return;
+      }
+      db.vault
+        .unlock(passwordRef.current)
+        .then(async (unlocked) => {
+          if (unlocked) {
+            setWrongPassword(false);
+            await lockNote();
+          } else {
+            takeErrorAction();
+          }
+        })
+        .catch((e) => {
+          takeErrorAction();
+        });
+    } else if (
+      requestType === VaultRequestType.UnlockNote ||
+      requestType === VaultRequestType.PermanentUnlock ||
+      requestType === VaultRequestType.GoToEditor ||
+      requestType === VaultRequestType.ShareNote ||
+      requestType === VaultRequestType.CopyNote ||
+      requestType === VaultRequestType.DeleteNote ||
+      requestType === VaultRequestType.CustomAction
+    ) {
+      if (!passwordRef.current || passwordRef.current.trim() === "") {
+        ToastManager.show({
+          heading: strings.passwordIncorrect(),
+          type: "error",
+          context: "local"
+        });
+        setWrongPassword(true);
+        return;
+      }
+      if (noteLockedRef.current) {
+        await unlockNote();
+      } else {
+        console.log("Error: Note should be locked for this operation");
+      }
+    } else if (requestType === VaultRequestType.EnableFingerprint) {
+      enrollFingerprint(passwordRef.current);
+    } else if (requestType === VaultRequestType.ClearVault) {
+      await clearVault();
+    } else if (requestType === VaultRequestType.DeleteVault) {
+      await deleteVault();
+    }
+  }, [
+    loading,
+    biometricUnlock,
+    revokeFingerprintAccess,
+    close,
+    createVault,
+    enrollFingerprint,
+    unlockNote,
+    lockNote,
+    takeErrorAction,
+    clearVault,
+    deleteVault
+  ]);
+
+  const onPressFingerprintAuth = useCallback(
+    async (title?: string, description?: string) => {
+      try {
+        const credentials = await BiometricService.getCredentials(
+          title || titleRef.current,
+          description || descriptionRef.current || ""
+        );
+
+        if (!credentials) throw new Error("Failed to get user credentials");
+
+        if (credentials?.password) {
+          passwordRef.current = credentials.password;
+          onPress();
+        } else {
+          eSendEvent(eCloseActionSheet);
+          await sleep(300);
+          setVisible(true);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    [onPress]
+  );
+
+  const open = useCallback(
+    async (data: Vault) => {
+      const biometry = await BiometricService.isBiometryAvailable();
+      const available = !!biometry;
+      const fingerprint = await BiometricService.hasInternetCredentials();
+
+      if (data.item) {
+        const locked = await db.vaults.itemExists(data.item);
+        noteLockedRef.current = locked;
+        if (!locked) {
+          const content = await db.content.findByNoteId(data.item!.id);
+          if (content && isEncryptedContent(content)) {
+            noteLockedRef.current = true;
+          }
+        }
+      }
+
+      // Set refs
+      noteRef.current = data.item;
+      titleRef.current = data.title || strings.goToEditor();
+      descriptionRef.current = data.description || null;
+      paragraphRef.current = data.paragraph || null;
+      buttonTitleRef.current = data.buttonTitle || null;
+      positiveButtonTypeRef.current = data.positiveButtonType || "transparent";
+      customActionTitleRef.current = data.customActionTitle || null;
+      customActionParagraphRef.current = data.customActionParagraph || null;
+      onUnlockRef.current = data.onUnlock;
+      requestTypeRef.current = data.requestType;
+
+      // Set UI state
+      setIsBiometryAvailable(available);
+      setIsBiometryEnrolled(fingerprint);
+      setBiometricUnlock(fingerprint);
+      setWrongPassword(false);
+      setPasswordsDontMatch(false);
+      setDeleteAll(false);
+      setLoading(false);
+
+      // Auto-unlock with fingerprint if applicable
+      const canAutoUnlock =
+        fingerprint &&
+        data.requestType !== VaultRequestType.EnableFingerprint &&
+        data.requestType !== VaultRequestType.RevokeFingerprint &&
+        data.requestType !== VaultRequestType.ChangePassword &&
+        data.requestType !== VaultRequestType.ClearVault &&
+        data.requestType !== VaultRequestType.DeleteVault &&
+        data.requestType !== VaultRequestType.CustomAction &&
+        data.requestType !== VaultRequestType.PermanentUnlock;
+
+      if (canAutoUnlock) {
+        await onPressFingerprintAuth(data.title, data.description);
+      } else {
+        setVisible(true);
+      }
+    },
+    [onPressFingerprintAuth]
+  );
+
+  useEffect(() => {
+    eSubscribeEvent(eOpenVaultDialog, open);
+    eSubscribeEvent(eCloseVaultDialog, close);
+
+    return () => {
+      eUnSubscribeEvent(eOpenVaultDialog, open);
+      eUnSubscribeEvent(eCloseVaultDialog, close);
+    };
+  }, [open, close]);
+
+  if (!visible) return null;
+
+  const requestType = requestTypeRef.current;
+  const isCreateVault = requestType === VaultRequestType.CreateVault;
+  const isChangePassword = requestType === VaultRequestType.ChangePassword;
+  const isClearVault = requestType === VaultRequestType.ClearVault;
+  const isDeleteVault = requestType === VaultRequestType.DeleteVault;
+  const isRevokeFingerprint =
+    requestType === VaultRequestType.RevokeFingerprint;
+  const isEnableFingerprint =
+    requestType === VaultRequestType.EnableFingerprint;
+  const isCustomAction = requestType === VaultRequestType.CustomAction;
+  const isDeleteNote = requestType === VaultRequestType.DeleteNote;
+  const isShareNote = requestType === VaultRequestType.ShareNote;
+  const isGoToEditor = requestType === VaultRequestType.GoToEditor;
+
+  return (
+    <BaseDialog
+      onShow={async () => {
+        await sleep(100);
+        passInputRef.current?.focus();
+      }}
+      statusBarTranslucent={false}
+      onRequestClose={close}
+      visible={true}
+    >
+      <View
+        style={{
+          ...getElevationStyle(5),
+          width: DDS.isTab ? 350 : "85%",
+          borderRadius: 10,
+          backgroundColor: colors.primary.background,
+          paddingTop: 12,
+          overflow: "hidden"
+        }}
+      >
+        <DialogHeader
+          title={titleRef.current}
+          paragraph={
+            paragraphRef.current || customActionParagraphRef.current || ""
+          }
+          icon="shield"
+          padding={12}
+        />
+        <Seperator half />
+
+        <View
+          style={{
+            paddingHorizontal: DefaultAppStyles.GAP
+          }}
+        >
+          {(isChangePassword ||
+            isClearVault ||
+            !isCreateVault ||
+            isDeleteVault ||
+            isCustomAction) &&
+          !isRevokeFingerprint ? (
+            <>
+              <Input
+                fwdRef={passInputRef}
+                editable={!loading}
+                autoCapitalize="none"
+                testID={notesnook.ids.dialogs.vault.pwd}
+                onChangeText={(value) => {
+                  passwordRef.current = value;
+                }}
+                marginBottom={
+                  !biometricUnlock ||
+                  !isBiometryEnrolled ||
+                  isCreateVault ||
+                  isChangePassword ||
+                  isCustomAction
+                    ? 0
+                    : 10
+                }
+                onSubmit={() => {
+                  if (isChangePassword) {
+                    confirmPassRef.current?.focus();
+                  } else {
+                    onPress();
+                  }
+                }}
+                autoComplete="password"
+                returnKeyLabel={
+                  isChangePassword ? strings.next() : titleRef.current
+                }
+                returnKeyType={isChangePassword ? "next" : "done"}
+                secureTextEntry
+                placeholder={
+                  isChangePassword
+                    ? strings.currentPassword()
+                    : strings.password()
+                }
+              />
+
+              {!biometricUnlock ||
+              !isBiometryEnrolled ||
+              !isBiometryAvailable ||
+              isCreateVault ||
+              isChangePassword ||
+              isCustomAction ||
+              isDeleteVault ? null : (
+                <Button
+                  onPress={() =>
+                    onPressFingerprintAuth(strings.unlockNote(), "")
+                  }
+                  icon="fingerprint"
+                  width="100%"
+                  title={strings.unlockWithBiometrics()}
+                  type="transparent"
+                />
+              )}
+            </>
+          ) : null}
+
+          {isDeleteVault && (
+            <Button
+              onPress={() => setDeleteAll(!deleteAll)}
+              icon={
+                deleteAll
+                  ? "check-circle-outline"
+                  : "checkbox-blank-circle-outline"
+              }
+              style={{
+                marginTop: DefaultAppStyles.GAP_VERTICAL
+              }}
+              width="100%"
+              title={strings.deleteAllNotes()}
+              type="errorShade"
+            />
+          )}
+
+          {isChangePassword ? (
+            <>
+              <Seperator half />
+              <Input
+                fwdRef={confirmPassRef}
+                editable={!loading}
+                testID={notesnook.ids.dialogs.vault.changePwd}
+                autoCapitalize="none"
+                onChangeText={(value) => {
+                  newPasswordRef.current = value;
+                }}
+                autoComplete="password"
+                onSubmit={() => {
+                  onPress();
+                }}
+                returnKeyLabel="Change"
+                returnKeyType="done"
+                secureTextEntry
+                placeholder={strings.newPassword()}
+              />
+            </>
+          ) : null}
+
+          {isCreateVault ? (
+            <View>
+              <Input
+                fwdRef={passInputRef}
+                autoCapitalize="none"
+                testID={notesnook.ids.dialogs.vault.pwd}
+                onChangeText={(value) => {
+                  passwordRef.current = value;
+                }}
+                autoComplete="password"
+                returnKeyLabel={strings.next()}
+                returnKeyType="next"
+                secureTextEntry
+                onSubmit={() => {
+                  confirmPassRef.current?.focus();
+                }}
+                placeholder={strings.password()}
+              />
+
+              <Input
+                fwdRef={confirmPassRef}
+                autoCapitalize="none"
+                testID={notesnook.ids.dialogs.vault.pwdAlt}
+                secureTextEntry
+                validationType="confirmPassword"
+                customValidator={() => passwordRef.current || ""}
+                errorMessage="Passwords do not match."
+                onErrorCheck={() => null}
+                marginBottom={0}
+                autoComplete="password"
+                returnKeyLabel="Create"
+                returnKeyType="done"
+                onChangeText={(value) => {
+                  confirmPasswordRef.current = value;
+                  if (value !== passwordRef.current) {
+                    setPasswordsDontMatch(true);
+                  } else {
+                    setPasswordsDontMatch(false);
+                  }
+                }}
+                onSubmit={() => {
+                  onPress();
+                }}
+                placeholder={strings.confirmPassword()}
+              />
+            </View>
+          ) : null}
+
+          {biometricUnlock && !isBiometryEnrolled && !isCreateVault ? (
+            <Paragraph>{strings.vaultEnableBiometrics()}</Paragraph>
+          ) : null}
+
+          {!biometricUnlock &&
+          !isBiometryEnrolled &&
+          isBiometryAvailable &&
+          (requestType === VaultRequestType.CopyNote ||
+            requestType === VaultRequestType.DeleteNote ||
+            requestType === VaultRequestType.ShareNote ||
+            requestType === VaultRequestType.CustomAction ||
+            requestType === VaultRequestType.GoToEditor ||
+            requestType === VaultRequestType.PermanentUnlock ||
+            requestType === VaultRequestType.LockNote) ? (
+            <Button
+              onPress={() => {
+                setBiometricUnlock(!biometricUnlock);
+              }}
+              style={{
+                marginTop: DefaultAppStyles.GAP_VERTICAL
+              }}
+              icon="fingerprint"
+              width="100%"
+              title={strings.unlockWithBiometrics()}
+              iconColor={
+                biometricUnlock ? colors.selected.accent : colors.primary.icon
+              }
+              type={biometricUnlock ? "transparent" : "plain"}
+            />
+          ) : null}
+        </View>
+
+        <DialogButtons
+          onPressNegative={close}
+          onPressPositive={onPress}
+          loading={loading}
+          positiveType={positiveButtonTypeRef.current}
+          positiveTitle={buttonTitleRef.current || strings.unlock()}
+        />
+      </View>
+      <Toast context="local" />
+    </BaseDialog>
+  );
+};

apps/mobile/app/components/fluid-panels/index.tsx

@@ -22,7 +22,6 @@ import React, {
   RefObject,
   useEffect,
   useImperativeHandle,
-  useMemo,
   useRef,
   useState
 } from "react";
@@ -39,8 +38,6 @@ import Animated, {
   WithSpringConfig,
   withTiming
 } from "react-native-reanimated";
-import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
-import { getAppState } from "../../screens/editor/tiptap/utils";
 import { eSendEvent } from "../../services/event-manager";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { eClearEditor } from "../../utils/events";
@@ -84,18 +81,9 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
   }: TabProps,
   ref
 ) {
-  const appState = useMemo(() => getAppState(), []);
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const fullscreen = useSettingStore((state) => state.fullscreen);
-  const translateX = useSharedValue(
-    widths
-      ? appState &&
-        appState?.movedAway === false &&
-        useTabStore.getState().getCurrentNoteId()
-        ? widths.sidebar + widths.list
-        : widths.sidebar
-      : 0
-  );
+  const translateX = useSharedValue(widths ? widths.sidebar : 0);
   const startX = useSharedValue(0);
   const currentTab = useSharedValue(1);
   const previousTab = useSharedValue(1);
@@ -125,10 +113,7 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
       translateX.value = 0;
     } else {
       if (prevWidths.current?.sidebar !== widths.sidebar) {
-        translateX.value =
-          appState && appState?.movedAway === false
-            ? editorPosition
-            : widths.sidebar;
+        translateX.value = widths.sidebar;
         if (translateX.value === editorPosition) {
           onChangeTab?.({ i: 2, from: 1 });
         }
@@ -136,15 +121,7 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
     }
     isLoaded.current = true;
     prevWidths.current = widths;
-  }, [
-    deviceMode,
-    widths,
-    fullscreen,
-    translateX,
-    editorPosition,
-    appState,
-    onChangeTab
-  ]);
+  }, [deviceMode, widths, fullscreen, translateX, editorPosition, onChangeTab]);
 
   useEffect(() => {
     const sub = BackHandler.addEventListener("hardwareBackPress", () => {

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

@@ -50,7 +50,7 @@ export const Header = ({
   onLeftMenuButtonPress?: () => void;
   renderedInRoute?: RouteName;
   id?: string;
-  title: string;
+  title?: string;
   canGoBack?: boolean;
   onPressDefaultRightButton?: () => void;
   hasSearch?: boolean;
@@ -114,7 +114,16 @@ export const Header = ({
           onLeftButtonPress={onLeftMenuButtonPress}
         />
 
-        {hasSearch ? (
+        {!title ? (
+          <View
+            style={{
+              width: 100,
+              backgroundColor: colors.primary.hover,
+              height: 10,
+              borderRadius: 100
+            }}
+          />
+        ) : hasSearch ? (
           <Paragraph>
             {selectionMode
               ? `${selectedItemsList.length} selected`

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

@@ -17,7 +17,12 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { GroupHeader, GroupOptions, ItemType } from "@notesnook/core";
+import {
+  GroupHeader,
+  GroupingKey,
+  GroupOptions,
+  ItemType
+} from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
@@ -40,7 +45,9 @@ type SectionHeaderProps = {
   color?: string;
   screen?: RouteName;
   groupOptions: GroupOptions;
+  group: GroupingKey;
   onOpenJumpToDialog: () => void;
+  itemCount?: number;
 };
 
 export const SectionHeader = React.memo<
@@ -53,11 +60,13 @@ export const SectionHeader = React.memo<
     color,
     screen,
     groupOptions,
-    onOpenJumpToDialog
+    group,
+    onOpenJumpToDialog,
+    itemCount
   }: SectionHeaderProps) {
     const { colors } = useThemeColors();
     const isCompactModeEnabled = useIsCompactModeEnabled(
-      dataType as "note" | "notebook"
+      dataType as "note" | "notebook" | "searchResult"
     );
 
     return (
@@ -104,7 +113,9 @@ export const SectionHeader = React.memo<
               color={color || colors.primary.accent}
             >
               {!item.title || item.title === ""
-                ? strings.pinned().toUpperCase()
+                ? screen === "Search"
+                  ? strings.results(itemCount || 0)
+                  : strings.pinned().toUpperCase()
                 : item.title.toUpperCase()}
             </Heading>
           </Pressable>
@@ -133,6 +144,7 @@ export const SectionHeader = React.memo<
                         <Sort
                           screen={screen}
                           type={dataType}
+                          group={group}
                           hideGroupOptions={
                             screen === "Reminders" || screen === "Search"
                           }
@@ -150,7 +162,8 @@ export const SectionHeader = React.memo<
                   hidden={
                     dataType !== "note" &&
                     dataType !== "notebook" &&
-                    screen !== "Notes"
+                    screen !== "Notes" &&
+                    screen !== "Search"
                   }
                   style={{
                     width: 25,
@@ -163,9 +176,11 @@ export const SectionHeader = React.memo<
                   }
                   onPress={() => {
                     SettingsService.set({
-                      [dataType !== "notebook"
-                        ? "notesListMode"
-                        : "notebooksListMode"]: !isCompactModeEnabled
+                      [dataType === "notebook"
+                        ? "notebooksListMode"
+                        : dataType === "searchResult"
+                          ? "searchListMode"
+                          : "notesListMode"]: !isCompactModeEnabled
                         ? "compact"
                         : "normal"
                     });
@@ -191,6 +206,7 @@ export const SectionHeader = React.memo<
   },
   (prev, next) => {
     if (prev.item.title !== next.item.title) return false;
+    if (prev.itemCount !== next.itemCount) return false;
     if (prev.groupOptions?.groupBy !== next.groupOptions.groupBy) return false;
     if (prev.groupOptions?.sortDirection !== next.groupOptions.sortDirection)
       return false;

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

@@ -252,14 +252,16 @@ const NoteItem = ({
                 {reminder ? (
                   <ReminderTime
                     reminder={reminder}
-                    disabled
                     color={color?.colorCode}
                     textStyle={{
-                      fontSize: AppFontSize.xxxs
+                      fontSize: AppFontSize.xxs
                     }}
-                    iconSize={AppFontSize.xxxs}
+                    short
+                    iconSize={AppFontSize.xxs}
                     style={{
-                      height: "auto"
+                      justifyContent: "flex-start",
+                      paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2,
+                      alignSelf: "flex-start"
                     }}
                   />
                 ) : null}

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

@@ -32,9 +32,11 @@ import { eOnLoadNote, eShowMergeDialog } from "../../../utils/events";
 import { fluidTabsRef } from "../../../utils/global-refs";
 
 import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
+import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store";
+import { editorController } from "../../../screens/editor/tiptap/utils";
+import { RouteParams } from "../../../stores/use-navigation-store";
 import NotePreview from "../../note-history/preview";
 import SelectionWrapper, { selectItem } from "../selection-wrapper";
-import { RouteParams } from "../../../stores/use-navigation-store";
 
 export const openNote = async (
   item: Note,
@@ -63,11 +65,19 @@ export const openNote = async (
       component: <NotePreview note={item} content={content} />
     });
   } else {
+    if (!useTabStore.getState().hasTabForNote(note.id!)) {
+      editorController.current.commands.setLoading(
+        true,
+        useTabStore.getState().currentTab
+      );
+    }
     eSendEvent(eOnLoadNote, {
       item: note
     });
     if (!DDS.isTab) {
-      fluidTabsRef.current?.goToPage("editor");
+      setTimeout(() => {
+        fluidTabsRef.current?.goToPage("editor");
+      }, 32);
     }
   }
 };

apps/mobile/app/components/list-items/search-result/index.tsx

@@ -31,6 +31,7 @@ import { eSendEvent } from "../../../services/event-manager";
 import { eOnLoadNote } from "../../../utils/events";
 import { IconButton } from "../../ui/icon-button";
 import { fluidTabsRef } from "../../../utils/global-refs";
+import { useSettingStore } from "../../../stores/use-setting-store";
 type SearchResultProps = {
   item: HighlightedResult;
 };
@@ -38,6 +39,9 @@ type SearchResultProps = {
 export const SearchResult = (props: SearchResultProps) => {
   const [expanded, setExpanded] = React.useState(true);
   const { colors } = useThemeColors();
+  const compactMode = useSettingStore(
+    (state) => state.settings.searchListMode === "compact"
+  );
 
   const openNote = async (index?: number) => {
     const note = await db.notes.note(props.item.id);
@@ -87,7 +91,7 @@ export const SearchResult = (props: SearchResultProps) => {
             flexShrink: 1
           }}
         >
-          {props.item.content?.length ? (
+          {props.item.content?.length && !compactMode ? (
             <IconButton
               name={!expanded ? "chevron-right" : "chevron-down"}
               onPress={() => setExpanded((prev) => !prev)}
@@ -130,6 +134,7 @@ export const SearchResult = (props: SearchResultProps) => {
       </View>
 
       {expanded &&
+        !compactMode &&
         props.item.content.map((content, index) => (
           <Pressable
             key={props.item.id + index}

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

@@ -53,6 +53,7 @@ type ListProps = {
   isRenderedInActionSheet?: boolean;
   CustomListComponent?: React.JSX.ElementType;
   placeholder?: PlaceholderData;
+  groupType: GroupingKey;
   id?: string;
 };
 
@@ -73,16 +74,7 @@ export default function List(props: ListProps) {
     props.dataType === "notebook" ||
     notebooksListMode === "compact";
 
-  const groupType =
-    props.renderedInRoute === "Notes"
-      ? "home"
-      : props.renderedInRoute === "Favorites"
-        ? "favorites"
-        : props.renderedInRoute === "Trash" || props.dataType === "trash"
-          ? "trash"
-          : `${props.dataType}s`;
-
-  const groupOptions = useGroupOptions(groupType);
+  const groupOptions = useGroupOptions(props.groupType);
 
   const _onRefresh = async () => {
     Sync.run("global", false, "full", () => {
@@ -94,7 +86,7 @@ export default function List(props: ListProps) {
     (item: number | boolean, index: number) => {
       return props.data?.type(index);
     },
-    []
+    [props.data]
   );
 
   const renderItem = React.useCallback(
@@ -105,7 +97,7 @@ export default function List(props: ListProps) {
           isSheet={props.isRenderedInActionSheet || false}
           items={props.data}
           groupOptions={groupOptions}
-          group={groupType as GroupingKey}
+          group={props.groupType as GroupingKey}
           renderedInRoute={props.renderedInRoute}
           customAccentColor={props.customAccentColor}
           dataType={props.dataType}
@@ -115,7 +107,7 @@ export default function List(props: ListProps) {
     },
     [
       groupOptions,
-      groupType,
+      props.groupType,
       props.customAccentColor,
       props.data,
       props.dataType,

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

@@ -53,7 +53,7 @@ import TagItem from "../list-items/tag";
 import { SearchResult } from "../list-items/search-result";
 
 type ListItemWrapperProps<TItem = Item> = {
-  group?: GroupingKey;
+  group: GroupingKey;
   items: VirtualizedGrouping<TItem> | undefined;
   isSheet: boolean;
   index: number;
@@ -182,6 +182,7 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
               item={groupHeader}
               index={index}
               dataType={item.type}
+              group={group}
               color={props.customAccentColor}
               groupOptions={groupOptions}
               onOpenJumpToDialog={() => {
@@ -218,6 +219,7 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
               item={groupHeader}
               index={index}
               dataType={item.type}
+              group={group}
               color={props.customAccentColor}
               groupOptions={groupOptions}
               onOpenJumpToDialog={() => {
@@ -245,6 +247,7 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
               screen={props.renderedInRoute}
               item={groupHeader}
               index={index}
+              group={group}
               dataType={item.type}
               color={props.customAccentColor}
               groupOptions={groupOptions}
@@ -271,6 +274,7 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
               screen={props.renderedInRoute}
               item={groupHeader}
               index={index}
+              group={group}
               dataType={item.type}
               color={props.customAccentColor}
               groupOptions={groupOptions}
@@ -297,9 +301,11 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
               screen={props.renderedInRoute}
               item={groupHeader}
               index={index}
+              group={group}
               dataType={item.type}
               color={props.customAccentColor}
               groupOptions={groupOptions}
+              itemCount={items?.placeholders.length}
               onOpenJumpToDialog={() => {
                 eSendEvent(eOpenJumpToDialog, {
                   ref: props.scrollRef,

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

@@ -30,7 +30,7 @@ import { fluidTabsRef } from "../../utils/global-refs";
 import { AppFontSize } from "../../utils/size";
 import { useSideBarDraggingStore } from "../side-menu/dragging-store";
 import { IconButton } from "../ui/icon-button";
-import { isFeatureAvailable, useIsFeatureAvailable } from "@notesnook/common";
+import { useIsFeatureAvailable } from "@notesnook/common";
 import PaywallSheet from "../sheets/paywall";
 import { strings } from "@notesnook/intl";
 import { ToastManager } from "../../services/event-manager";
@@ -131,7 +131,7 @@ function ReorderableList<T extends { id: string }>({
     ]
   );
 
-  function getOrderedItems() {
+  const getOrderedItems = React.useCallback(() => {
     if (!customizableSidebarFeature?.isAllowed) return data;
     const items: T[] = [];
     itemOrderState.forEach((id) => {
@@ -142,7 +142,7 @@ function ReorderableList<T extends { id: string }>({
 
     items.push(...data.filter((i) => !itemOrderState.includes(i.id)));
     return items;
-  }
+  }, [customizableSidebarFeature?.isAllowed, data, itemOrderState]);
 
   return (
     <View style={styles.container}>

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

@@ -18,8 +18,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { getFormattedDate } from "@notesnook/common";
+import {
+  EncryptedContentItem,
+  Note,
+  UnencryptedContentItem
+} from "@notesnook/core";
+import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import KeepAwake from "@sayem314/react-native-keep-awake";
+import { diff } from "diffblazer";
 import React, { useEffect, useRef, useState } from "react";
 import { SafeAreaView, Text, View } from "react-native";
 import Animated from "react-native-reanimated";
@@ -32,13 +39,17 @@ import { DDS } from "../../services/device-detection";
 import {
   eSendEvent,
   eSubscribeEvent,
-  eUnSubscribeEvent
+  eUnSubscribeEvent,
+  openVault,
+  VaultRequestType
 } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import Sync from "../../services/sync";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { eOnLoadNote, eShowMergeDialog } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
+import { Dialog } from "../dialog";
 import BaseDialog from "../dialog/base-dialog";
 import DialogButtons from "../dialog/dialog-buttons";
 import DialogContainer from "../dialog/dialog-container";
@@ -47,46 +58,67 @@ import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Seperator from "../ui/seperator";
 import Paragraph from "../ui/typography/paragraph";
-import { diff } from "diffblazer";
-import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../utils/styles";
+import { presentDialog } from "../dialog/functions";
+import { Cipher } from "@notesnook/crypto";
 
 const MergeConflicts = () => {
   const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
-  const [keep, setKeep] = useState(null);
-  const [copy, setCopy] = useState(null);
+  const [selectedContent, setSelectedContent] =
+    useState<UnencryptedContentItem>();
+  const [copyOfDiscardedContent, setCopyOfDiscardedContent] =
+    useState<UnencryptedContentItem>();
   const [dialogVisible, setDialogVisible] = useState(false);
   const insets = useGlobalSafeAreaInsets();
-  const content = useRef(null);
-  const isKeepingConflicted = !keep?.conflicted;
-  const isKeeping = !!keep;
+  const content = useRef<UnencryptedContentItem>(null);
   const { height } = useSettingStore((state) => state.dimensions);
 
   const applyChanges = async () => {
-    let _content = keep;
-    let note = await db.notes.note(_content.noteId);
+    const contentToSave = selectedContent;
+    if (!contentToSave) return;
+    const note = await db.notes.note(
+      (content.current as UnencryptedContentItem).noteId
+    );
+    if (!note) return;
     await db.notes.add({
       id: note.id,
       conflicted: false,
-      dateEdited: _content.dateEdited
+      dateEdited: contentToSave.dateEdited
     });
 
-    await db.content.add({
-      id: note.contentId,
-      data: _content.data,
-      type: _content.type,
-      dateResolved: content.current?.conflicted?.dateModified || Date.now(),
-      sessionId: Date.now(),
-      conflicted: false
-    });
+    const noteContent = await db.content.findByNoteId(note.id);
 
-    if (copy) {
+    if (noteContent?.locked) {
+      const selectedContent = contentToSave.conflicted
+        ? noteContent
+        : noteContent.conflicted;
+
+      await db.content.add({
+        id: note.contentId,
+        dateResolved: noteContent?.conflicted?.dateModified || Date.now(),
+        sessionId: `${Date.now()}`,
+        data: selectedContent?.data as Cipher<"base64">,
+        type: selectedContent?.type,
+        locked: true,
+        conflicted: undefined
+      });
+    } else {
+      await db.content.add({
+        id: note.contentId,
+        data: contentToSave.data,
+        type: contentToSave.type,
+        dateResolved: content.current?.conflicted?.dateModified || Date.now(),
+        sessionId: `${Date.now()}`,
+        conflicted: undefined
+      });
+    }
+
+    if (copyOfDiscardedContent) {
       await db.notes.add({
         title: note.title + " (Copy)",
         content: {
-          data: copy.data,
-          type: copy.type
+          data: copyOfDiscardedContent.data,
+          type: copyOfDiscardedContent.type
         }
       });
     }
@@ -103,15 +135,87 @@ const MergeConflicts = () => {
     Sync.run();
   };
 
-  const show = async (item) => {
-    let noteContent = await db.content.get(item.contentId);
-    content.current = { ...noteContent };
-    if (__DEV__) {
-      if (!noteContent.conflicted) {
-        content.current.conflicted = { ...noteContent };
+  const show = async (item: Note) => {
+    const isLocked = await db.vaults.itemExists(item);
+    let noteContent: UnencryptedContentItem;
+    if (isLocked) {
+      openVault({
+        requestType: VaultRequestType.CustomAction,
+        item: item,
+        title: strings.unlockNote(),
+        customActionTitle: strings.unlockNote(),
+        customActionParagraph: strings.unlockNoteToMergeConflicts(),
+        buttonTitle: strings.unlock(),
+        onUnlock: async (item, password) => {
+          if (!item || !password) return;
+          const currentContent = await db.content.get(item.contentId!);
+          try {
+            noteContent = {
+              ...(await db.content.get(item.contentId!)),
+              ...item.content,
+              conflicted: currentContent?.conflicted
+                ? await db.vault.decryptContent(
+                    currentContent?.conflicted as EncryptedContentItem,
+                    password
+                  )
+                : undefined
+            } as UnencryptedContentItem;
+
+            content.current = noteContent;
+            if (__DEV__) {
+              if (!noteContent?.conflicted) {
+                content.current.conflicted = noteContent;
+              }
+            }
+            setVisible(true);
+          } catch (e) {
+            presentDialog({
+              input: true,
+              inputPlaceholder: strings.enterPassword(),
+              title: strings.unlockIncomingNote(),
+              paragraph: strings.unlockIncomingNoteDesc(),
+              positiveText: "Unlock",
+              positivePress: async (password) => {
+                try {
+                  noteContent = {
+                    ...(await db.content.get(item.contentId!)),
+                    ...item.content,
+                    conflicted: currentContent?.conflicted
+                      ? await db.vault.decryptContent(
+                          currentContent?.conflicted as EncryptedContentItem,
+                          password
+                        )
+                      : undefined
+                  } as UnencryptedContentItem;
+
+                  content.current = noteContent;
+                  if (__DEV__) {
+                    if (!noteContent?.conflicted) {
+                      content.current.conflicted = noteContent;
+                    }
+                  }
+                  setVisible(true);
+                  return true;
+                } catch (e) {
+                  return false;
+                }
+              }
+            });
+          }
+        }
+      });
+    } else {
+      noteContent = (await db.content.get(
+        item.contentId!
+      )) as UnencryptedContentItem;
+      content.current = noteContent;
+      if (__DEV__) {
+        if (!noteContent?.conflicted) {
+          content.current.conflicted = noteContent;
+        }
       }
+      setVisible(true);
     }
-    setVisible(true);
   };
 
   useEffect(() => {
@@ -123,8 +227,8 @@ const MergeConflicts = () => {
 
   const close = () => {
     setVisible(false);
-    setCopy(null);
-    setKeep(null);
+    setCopyOfDiscardedContent(undefined);
+    setSelectedContent(undefined);
     setDialogVisible(false);
   };
 
@@ -134,6 +238,12 @@ const MergeConflicts = () => {
     back,
     isCurrent,
     contentToKeep
+  }: {
+    isDiscarded: boolean;
+    keeping: boolean;
+    back: boolean;
+    isCurrent: boolean;
+    contentToKeep: UnencryptedContentItem;
   }) => {
     return (
       <View
@@ -194,7 +304,7 @@ const MergeConflicts = () => {
           {isDiscarded ? (
             <Button
               onPress={() => {
-                setCopy(contentToKeep);
+                setCopyOfDiscardedContent(contentToKeep);
                 setDialogVisible(true);
               }}
               title={strings.saveACopy()}
@@ -222,7 +332,6 @@ const MergeConflicts = () => {
                 paddingHorizontal: DefaultAppStyles.GAP
               }}
               fontSize={AppFontSize.xs}
-              color={colors.error.paragraph}
               onPress={() => {
                 setDialogVisible(true);
               }}
@@ -244,7 +353,9 @@ const MergeConflicts = () => {
                   keeping && !isDiscarded ? strings.undo() : strings.keep()
                 }
                 onPress={() => {
-                  setKeep(keeping && !isDiscarded ? null : contentToKeep);
+                  setSelectedContent(
+                    keeping && !isDiscarded ? undefined : contentToKeep
+                  );
                 }}
               />
             </>
@@ -258,7 +369,6 @@ const MergeConflicts = () => {
     <BaseDialog
       statusBarTranslucent
       transparent={false}
-      animationType="slide"
       animated={false}
       bounce={false}
       onRequestClose={() => {
@@ -266,15 +376,9 @@ const MergeConflicts = () => {
       }}
       centered={false}
       background={colors?.primary.background}
-      supportedOrientations={[
-        "portrait",
-        "portrait-upside-down",
-        "landscape",
-        "landscape-left",
-        "landscape-right"
-      ]}
       visible={true}
     >
+      <Dialog context="merge-conflicts" />
       <SafeAreaView
         style={{
           backgroundColor: colors.primary.background,
@@ -301,15 +405,15 @@ const MergeConflicts = () => {
           style={{
             height: "100%",
             width: "100%",
-            backgroundColor: DDS.isLargeTablet() ? "rgba(0,0,0,0.3)" : null
+            backgroundColor: DDS.isLargeTablet() ? "rgba(0,0,0,0.3)" : undefined
           }}
         >
           <ConfigBar
             back={true}
             isCurrent={true}
-            isDiscarded={isKeeping && isKeepingConflicted}
-            keeping={isKeeping}
-            contentToKeep={content.current}
+            isDiscarded={!!selectedContent && !selectedContent.conflicted}
+            keeping={!!selectedContent}
+            contentToKeep={content.current!}
           />
 
           <Animated.View
@@ -323,15 +427,18 @@ const MergeConflicts = () => {
             <ReadonlyEditor
               editorId="conflictPrimary"
               onLoad={async (loadContent) => {
-                const note = await db.notes.note(content.current?.noteId);
+                const note = await db.notes.note(content.current!.noteId);
                 if (!note) return;
-                loadContent({
-                  id: note.id,
-                  data: diff(
-                    content.current.conflicted.data,
-                    content.current.data
-                  )
-                });
+                if (content.current && content.current.conflicted) {
+                  loadContent({
+                    id: note.id,
+                    data: diff(
+                      (content.current.conflicted as UnencryptedContentItem)
+                        .data,
+                      content.current.data
+                    )
+                  });
+                }
               }}
             />
           </Animated.View>
@@ -339,9 +446,11 @@ const MergeConflicts = () => {
           <ConfigBar
             back={false}
             isCurrent={false}
-            isDiscarded={isKeeping && !isKeepingConflicted}
-            keeping={isKeeping}
-            contentToKeep={content.current.conflicted}
+            isDiscarded={!!selectedContent && !!selectedContent.conflicted}
+            keeping={!!selectedContent}
+            contentToKeep={
+              content.current!.conflicted! as UnencryptedContentItem
+            }
           />
 
           <Animated.View
@@ -354,11 +463,13 @@ const MergeConflicts = () => {
             <ReadonlyEditor
               editorId="conflictSecondary"
               onLoad={async (loadContent) => {
+                if (!content.current?.noteId) return;
                 const note = await db.notes.note(content.current?.noteId);
                 if (!note) return;
                 loadContent({
                   id: note.id,
-                  data: content.current.conflicted.data
+                  data: (content.current!.conflicted as UnencryptedContentItem)
+                    .data
                 });
               }}
             />

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

@@ -47,7 +47,7 @@ const HistoryItem = ({
 }: {
   index: number;
   items?: VirtualizedGrouping<HistorySession>;
-  note?: Note;
+  note: Note;
 }) => {
   const [item] = useDBItem(index, "noteHistory", items);
   const { colors } = useThemeColors();
@@ -63,21 +63,25 @@ const HistoryItem = ({
     }${_end_time}`;
   };
 
-  const preview = useCallback(async (item: HistorySession) => {
-    const content = await db.noteHistory.content(item.id);
-    presentSheet({
-      component: (
-        <NotePreview
-          session={{
-            ...item,
-            session: getDate(item.dateCreated, item.dateModified)
-          }}
-          content={content}
-        />
-      ),
-      context: "note_history"
-    });
-  }, []);
+  const preview = useCallback(
+    async (item: HistorySession) => {
+      const content = await db.noteHistory.content(item.id);
+      presentSheet({
+        component: (
+          <NotePreview
+            session={{
+              ...item,
+              session: getDate(item.dateCreated, item.dateModified)
+            }}
+            content={content}
+            note={note}
+          />
+        ),
+        context: "note_history"
+      });
+    },
+    [note]
+  );
 
   return (
     <Pressable
@@ -135,9 +139,9 @@ export default function NoteHistory({
 
   const renderItem = useCallback(
     ({ index }: { index: number }) => (
-      <HistoryItem index={index} items={history} />
+      <HistoryItem index={index} items={history} note={note} />
     ),
-    [history]
+    [history, note]
   );
 
   return (

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

@@ -37,21 +37,42 @@ import Paragraph from "../ui/typography/paragraph";
 import { diff } from "diffblazer";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../utils/styles";
+import {
+  HistorySession,
+  isEncryptedContent,
+  Note,
+  NoteContent,
+  TrashOrItem
+} from "@notesnook/core";
 
 /**
  *
  * @param {any} param0
  * @returns
  */
-export default function NotePreview({ session, content, note }) {
+export default function NotePreview({
+  session,
+  content,
+  note
+}: {
+  session?: HistorySession & { session: string };
+  content:
+    | Partial<
+        NoteContent<boolean> & {
+          title: string;
+        }
+      >
+    | undefined;
+  note: TrashOrItem<Note>;
+}) {
   const { colors } = useThemeColors();
   const [locked, setLocked] = useState(false);
 
   async function restore() {
     if (note && note.type === "trash") {
-      if ((await db.trash.restore(note.id)) === false) return;
+      await db.trash.restore(note.id);
       Navigation.queueRoutesForUpdate();
-      useSelectionStore.getState().setSelectionMode(false);
+      useSelectionStore.getState().setSelectionMode();
       ToastManager.show({
         heading: strings.noteRestored(),
         type: "success"
@@ -59,24 +80,26 @@ export default function NotePreview({ session, content, note }) {
       eSendEvent(eCloseSheet);
       return;
     }
-    await db.noteHistory.restore(session.id);
-    if (useTabStore.getState().hasTabForNote(session?.noteId)) {
-      const note = editorController.current.note.current[session?.noteId];
-      if (note) {
-        eSendEvent(eOnLoadNote, {
-          item: note,
-          forced: true
-        });
+    if (session) {
+      await db.noteHistory.restore(session.id);
+      if (useTabStore.getState().hasTabForNote(session?.noteId)) {
+        const note = editorController.current.note.current[session?.noteId];
+        if (note) {
+          eSendEvent(eOnLoadNote, {
+            item: note,
+            forced: true
+          });
+        }
       }
-    }
-    eSendEvent(eCloseSheet, "note_history");
-    eSendEvent(eCloseSheet);
-    Navigation.queueRoutesForUpdate();
+      eSendEvent(eCloseSheet, "note_history");
+      eSendEvent(eCloseSheet);
+      Navigation.queueRoutesForUpdate();
 
-    ToastManager.show({
-      heading: strings.noteRestoredFromHistory(),
-      type: "success"
-    });
+      ToastManager.show({
+        heading: strings.noteRestoredFromHistory(),
+        type: "success"
+      });
+    }
   }
 
   useEffect(() => {
@@ -91,15 +114,17 @@ export default function NotePreview({ session, content, note }) {
       negativeText: strings.cancel(),
       context: "local",
       positivePress: async () => {
-        await db.trash.delete(note.id);
-        useTrashStore.getState().refresh();
-        useSelectionStore.getState().setSelectionMode(false);
-        ToastManager.show({
-          heading: strings.noteDeleted(),
-          type: "success",
-          context: "local"
-        });
-        eSendEvent(eCloseSheet);
+        if (note) {
+          await db.trash.delete(note.id);
+          useTrashStore.getState().refresh();
+          useSelectionStore.getState().setSelectionMode();
+          ToastManager.show({
+            heading: strings.noteDeleted(),
+            type: "success",
+            context: "local"
+          });
+          eSendEvent(eCloseSheet);
+        }
       },
       positiveType: "error"
     });
@@ -113,8 +138,11 @@ export default function NotePreview({ session, content, note }) {
       }}
     >
       <Dialog context="local" />
-      <DialogHeader padding={12} title={note?.title || session?.session} />
-      {!session?.locked && !locked ? (
+      <DialogHeader
+        padding={12}
+        title={content?.title || note.title || session?.session}
+      />
+      {!session?.locked && !locked && content?.data ? (
         <View
           style={{
             flex: 1,
@@ -125,17 +153,27 @@ export default function NotePreview({ session, content, note }) {
             editorId="historyPreview"
             onLoad={async (loadContent) => {
               try {
-                if (content.data) {
-                  const _note = note || (await db.notes.note(session?.noteId));
-                  const currentContent = await db.content.get(_note.contentId);
-                  loadContent({
-                    data: diff(currentContent.data, content.data),
-                    id: _note.id
-                  });
+                if (content?.data) {
+                  const currentContent = note?.contentId
+                    ? await db.content.get(note.contentId)
+                    : undefined;
+
+                  if (
+                    currentContent?.data &&
+                    !isEncryptedContent(currentContent)
+                  ) {
+                    loadContent({
+                      data: diff(
+                        currentContent?.data || "<p></p>",
+                        content.data as string
+                      ),
+                      id: session?.noteId || note.id
+                    });
+                  }
                 }
               } catch (e) {
                 ToastManager.error(
-                  e,
+                  e as Error,
                   "Failed to load history preview",
                   "local"
                 );
@@ -153,7 +191,9 @@ export default function NotePreview({ session, content, note }) {
           }}
         >
           <Paragraph color={colors.secondary.paragraph}>
-            {strings.encryptedNoteHistoryNotice()}
+            {!content?.data
+              ? strings.noContent()
+              : strings.encryptedNoteHistoryNotice()}
           </Paragraph>
         </View>
       )}

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

@@ -18,14 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { getFeaturesTable } from "@notesnook/common";
-import {
-  EV,
-  EVENTS,
-  Plan,
-  SKUResponse,
-  SubscriptionPlan,
-  User
-} from "@notesnook/core";
+import { EVENTS, Plan, SubscriptionPlan, User } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
@@ -55,6 +48,7 @@ import {
   TECHLORE_SVG,
   XDA_SVG
 } from "../../assets/images/assets";
+import { db } from "../../common/database";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
 import usePricingPlans, {
   PlanOverView,
@@ -118,7 +112,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
       }
       setStep(Steps.buy);
     }
-  }, [routeParams.state]);
+  }, [pricingPlans, routeParams.state]);
 
   useEffect(() => {
     let listener: NativeEventSubscription;
@@ -136,15 +130,15 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
     return () => {
       listener?.remove();
     };
-  }, [isFocused, step]);
+  }, [isFocused, routeParams.context, step]);
 
   useEffect(() => {
-    const sub = EV.subscribe(
+    const sub = db.eventManager.subscribe(
       EVENTS.userSubscriptionUpdated,
       (sub: User["subscription"]) => {
         if (sub.plan === SubscriptionPlan.FREE) return;
         if (routeParams.context === "signup") {
-          Navigation.replace("FluidPanelsView", {});
+          Navigation.navigate("FluidPanelsView", {});
         } else {
           Navigation.goBack();
         }
@@ -153,7 +147,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
     return () => {
       sub?.unsubscribe();
     };
-  }, []);
+  }, [routeParams.context]);
 
   const is5YearPlanSelected = (
     isGithubRelease
@@ -182,8 +176,9 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
         >
           <IconButton
             name="close"
+            color={colors.primary.icon}
             onPress={() => {
-              Navigation.replace("FluidPanelsView", {});
+              Navigation.navigate("FluidPanelsView", {});
             }}
           />
         </View>
@@ -196,7 +191,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
               return;
             }
             if (routeParams.context === "signup") {
-              Navigation.replace("FluidPanelsView", {});
+              Navigation.navigate("FluidPanelsView", {});
             } else {
               Navigation.goBack();
             }
@@ -654,7 +649,7 @@ After trying all the privacy security oriented note taking apps, for the price a
             type="accent"
             onPress={() => {
               if (routeParams.context === "signup") {
-                Navigation.replace("FluidPanelsView", {});
+                Navigation.navigate("FluidPanelsView", {});
               } else {
                 Navigation.goBack();
               }
@@ -934,7 +929,10 @@ const PricingPlanCard = ({
   setStep: (step: number) => void;
 }) => {
   const { colors } = useThemeColors();
-  const [regionalDiscount, setRegionaDiscount] = useState<SKUResponse>();
+  const regionalDiscount =
+    annualBilling && plan.id === "pro"
+      ? pricingPlans?.regionalDiscount
+      : undefined;
   const { width } = useWindowDimensions();
   const isTablet = width > 600;
 
@@ -957,26 +955,6 @@ const PricingPlanCard = ({
     annualBilling
   );
 
-  useEffect(() => {
-    if (pricingPlans?.isGithubRelease || !annualBilling) return;
-    pricingPlans
-      ?.getRegionalDiscount(
-        plan.id,
-        pricingPlans.isGithubRelease
-          ? (WebPlan?.period as string)
-          : `notesnook.${plan.id}.${annualBilling ? "yearly" : "monthly"}`
-      )
-      .then((value) => {
-        setRegionaDiscount(value);
-      });
-  }, [annualBilling]);
-
-  useEffect(() => {
-    if (!annualBilling) {
-      setRegionaDiscount(undefined);
-    }
-  }, [annualBilling]);
-
   const isSubscribed =
     product?.productId &&
     pricingPlans?.user?.subscription?.productId?.includes(plan.id) &&

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

@@ -27,7 +27,11 @@ import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
 import { db } from "../../common/database";
-import { eSendEvent, ToastManager } from "../../services/event-manager";
+import {
+  eSendEvent,
+  sendItemUpdateEvent,
+  ToastManager
+} from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import { useMenuStore } from "../../stores/use-menu-store";
 import { useRelationStore } from "../../stores/use-relation-store";
@@ -63,6 +67,7 @@ const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
     useRelationStore.getState().update();
     setColorNotes();
     Navigation.queueRoutesForUpdate();
+    sendItemUpdateEvent(item.id, "color");
     eSendEvent(refreshNotesPage);
   };
 
@@ -127,7 +132,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
     }
     useSettingStore.getState().setSheetKeyboardHandler(false);
     setVisible(true);
-  }, []);
+  }, [colorFeature]);
 
   return (
     <>
@@ -140,6 +145,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
           useRelationStore.getState().update();
           useMenuStore.getState().setColorNotes();
           Navigation.queueRoutesForUpdate();
+          sendItemUpdateEvent(color.id, "color");
           eSendEvent(refreshNotesPage);
         }}
       />

apps/mobile/app/components/properties/date-meta.jsx

@@ -1,72 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import React from "react";
-import { View } from "react-native";
-import { useThemeColors } from "@notesnook/theme";
-import { AppFontSize } from "../../utils/size";
-import Paragraph from "../ui/typography/paragraph";
-import { getFormattedDate } from "@notesnook/common";
-import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../utils/styles";
-export const DateMeta = ({ item }) => {
-  const { colors } = useThemeColors();
-
-  function getDateMeta() {
-    let keys = Object.keys(item);
-    if (keys.includes("dateEdited"))
-      keys.splice(
-        keys.findIndex((k) => k === "dateModified"),
-        1
-      );
-    return keys.filter((key) => key.startsWith("date") && key !== "date");
-  }
-
-  const renderItem = (key) =>
-    !item[key] ? null : (
-      <View
-        key={key}
-        style={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2
-        }}
-      >
-        <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
-          {strings.dateDescFromKey(key)}
-        </Paragraph>
-        <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
-          {getFormattedDate(item[key], "date-time")}
-        </Paragraph>
-      </View>
-    );
-
-  return (
-    <View
-      style={{
-        borderTopWidth: 1,
-        borderTopColor: colors.primary.border,
-        paddingHorizontal: DefaultAppStyles.GAP,
-        paddingTop: DefaultAppStyles.GAP_VERTICAL_SMALL
-      }}
-    >
-      {getDateMeta().map(renderItem)}
-    </View>
-  );
-};

apps/mobile/app/components/properties/date-meta.tsx

@@ -0,0 +1,130 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { useState } from "react";
+import { View } from "react-native";
+import { useThemeColors } from "@notesnook/theme";
+import { AppFontSize } from "../../utils/size";
+import Paragraph from "../ui/typography/paragraph";
+import { getFormattedDate } from "@notesnook/common";
+import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
+import DateTimePickerModal from "react-native-modal-datetime-picker";
+import { db } from "../../common/database";
+import { Item, Note } from "@notesnook/core";
+import AppIcon from "../ui/AppIcon";
+export const DateMeta = ({ item }: { item: Item }) => {
+  const { colors, isDark } = useThemeColors();
+  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
+  const [dateCreated, setDateCreated] = useState(item.dateCreated);
+
+  function getDateMeta() {
+    const keys = Object.keys(item);
+    if (keys.includes("dateEdited"))
+      keys.splice(
+        keys.findIndex((k) => k === "dateModified"),
+        1
+      );
+    return keys.filter((key) => key.startsWith("date") && key !== "date");
+  }
+
+  const renderItem = (key: string) =>
+    !item[key as keyof Item] ? null : (
+      <View
+        key={key}
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2
+        }}
+      >
+        <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
+          {strings.dateDescFromKey(
+            key as
+              | "dateDeleted"
+              | "dateEdited"
+              | "dateModified"
+              | "dateCreated"
+              | "dateUploaded"
+          )}
+        </Paragraph>
+        <Paragraph
+          size={AppFontSize.xs}
+          color={colors.secondary.paragraph}
+          onPress={
+            item.type !== "note"
+              ? undefined
+              : () => {
+                  setIsDatePickerVisible(true);
+                }
+          }
+        >
+          {getFormattedDate(
+            key === "dateCreated"
+              ? dateCreated
+              : (item[key as keyof Item] as string),
+            "date-time"
+          )}
+          {key === "dateCreated" && item.type === "note" ? (
+            <>
+              {" "}
+              <AppIcon name="pencil" size={AppFontSize.md} />
+            </>
+          ) : null}
+        </Paragraph>
+      </View>
+    );
+
+  return (
+    <>
+      {item.type === "note" ? (
+        <DateTimePickerModal
+          isVisible={isDatePickerVisible}
+          mode="datetime"
+          onConfirm={async (date: Date) => {
+            await db.notes.add({
+              id: item.id,
+              dateCreated: date.getTime()
+            });
+            setDateCreated(date.getTime());
+            setIsDatePickerVisible(false);
+          }}
+          onCancel={() => {
+            setIsDatePickerVisible(false);
+          }}
+          maximumDate={new Date((item as Note).dateEdited)}
+          isDarkModeEnabled={isDark}
+          is24Hour={db.settings.getTimeFormat() === "24-hour"}
+          date={new Date(dateCreated)}
+        />
+      ) : null}
+
+      <View
+        style={{
+          borderTopWidth: 1,
+          borderTopColor: colors.primary.border,
+          paddingHorizontal: DefaultAppStyles.GAP,
+          paddingTop: DefaultAppStyles.GAP_VERTICAL_SMALL
+        }}
+      >
+        {getDateMeta().map(renderItem)}
+      </View>
+    </>
+  );
+};

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

@@ -39,6 +39,7 @@ import { DateMeta } from "./date-meta";
 import { Items } from "./items";
 import Notebooks from "./notebooks";
 import { TagStrip, Tags } from "./tags";
+import { Dialog } from "../dialog";
 
 const Line = ({ top = 6, bottom = 6 }) => {
   const { colors } = useThemeColors();
@@ -203,6 +204,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
             />
           ) : null}
           <SheetProvider context="properties" />
+          <Dialog context="properties" />
         </View>
       )}
     />

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

@@ -57,6 +57,8 @@ const BOTTOM_BAR_ITEMS: ActionId[] = [
   "export",
   "copy-link",
   "duplicate",
+  "launcher-shortcut",
+  "expiry-date",
   "trash"
 ];
 
@@ -76,6 +78,7 @@ const COLUMN_BAR_ITEMS: ActionId[] = [
   "reorder",
   "rename-color",
   "rename-tag",
+  "launcher-shortcut",
   "restore",
   "trash",
   "delete"
@@ -170,15 +173,15 @@ export const Items = ({
               DDS.isTab
                 ? AppFontSize.xxl
                 : shouldShrink
-                ? AppFontSize.xxl
-                : AppFontSize.lg
+                  ? AppFontSize.xxl
+                  : AppFontSize.lg
             }
             color={
               item.checked
                 ? item.activeColor || colors.primary.accent
                 : item.id.match(/(delete|trash)/g)
-                ? colors.error.icon
-                : colors.secondary.icon
+                  ? colors.error.icon
+                  : colors.secondary.icon
             }
           />
         </Pressable>
@@ -209,8 +212,8 @@ export const Items = ({
           text: item.checked
             ? item.activeColor || colors.primary.accent
             : item.id === "delete" || item.id === "trash"
-            ? colors.error.paragraph
-            : colors.primary.paragraph
+              ? colors.error.paragraph
+              : colors.primary.paragraph
         }}
         testID={"icon-" + item.id}
         onPress={item.onPress}
@@ -274,8 +277,8 @@ export const Items = ({
                 item.checked
                   ? item.activeColor || colors.primary.accent
                   : item.id === "delete" || item.id === "trash"
-                  ? colors.error.icon
-                  : colors.secondary.icon
+                    ? colors.error.icon
+                    : colors.secondary.icon
               }
             />
 
@@ -315,7 +318,9 @@ export const Items = ({
     [
       colors.error.icon,
       colors.primary.accent,
+      colors.primary.border,
       colors.secondary.icon,
+      colors.static.orange,
       columnItemWidth,
       topBarSorting
     ]
@@ -323,8 +328,9 @@ export const Items = ({
 
   const getTopBarItemChunksOfFour = () => {
     const chunks = [];
-    for (let i = 0; i < topBarItems.length; i += 5) {
-      chunks.push(topBarItems.slice(i, i + 5));
+    const itemCount = shouldShrink ? 4 : 5;
+    for (let i = 0; i < topBarItems.length; i += itemCount) {
+      chunks.push(topBarItems.slice(i, i + itemCount));
     }
     return chunks;
   };
@@ -371,7 +377,8 @@ export const Items = ({
                   style={{
                     flexDirection: "row",
                     paddingHorizontal: DefaultAppStyles.GAP,
-                    gap: 5
+                    gap: 5,
+                    width: width
                   }}
                 >
                   {item.map(renderTopBarItem)}

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

@@ -77,7 +77,7 @@ export const TagStrip = ({ item, close }) => {
       .then((tags) => {
         setTags(tags);
       });
-  }, []);
+  }, [item]);
 
   return tags?.length > 0 ? (
     <View

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

@@ -42,8 +42,6 @@ import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { presentDialog } from "../dialog/functions";
 import ExportNotesSheet from "../sheets/export-notes";
-
-import { MoveNotebook } from "../../screens/move-notebook";
 import { IconButton } from "../ui/icon-button";
 import NativeTooltip from "../../utils/tooltip";
 import ManageTags from "../../screens/manage-tags";

apps/mobile/app/components/sheets/buy-plan/index.tsx

@@ -16,13 +16,14 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { Plan, SKUResponse } from "@notesnook/core";
+import { Plan } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import dayjs from "dayjs";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import {
   Linking,
+  Platform,
   ScrollView,
   Text,
   TouchableOpacity,
@@ -31,7 +32,6 @@ import {
 import Config from "react-native-config";
 import * as RNIap from "react-native-iap";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { WebView } from "react-native-webview";
 import { db } from "../../../common/database";
 import usePricingPlans from "../../../hooks/use-pricing-plans";
 import { ToastManager } from "../../../services/event-manager";
@@ -211,16 +211,19 @@ export const BuyPlan = (props: {
               ? strings["5yearPlanConditions"]()
               : [
                   strings.trialPlanConditions[0](
-                    billingDuration?.duration as number
+                    billingDuration?.duration as number as never
                   ),
-                  strings.trialPlanConditions[1](0)
+                  ...(isGithubRelease
+                    ? []
+                    : [strings.trialPlanConditions[1](Platform.OS as never)])
                 ]
             ).map((item) => (
               <View
                 style={{
                   flexDirection: "row",
                   alignItems: "center",
-                  gap: 10
+                  gap: 10,
+                  flex: 1
                 }}
                 key={item}
               >
@@ -229,7 +232,13 @@ export const BuyPlan = (props: {
                   size={AppFontSize.lg}
                   name="check"
                 />
-                <Paragraph>{item}</Paragraph>
+                <Paragraph
+                  style={{
+                    flexShrink: 1
+                  }}
+                >
+                  {item}
+                </Paragraph>
               </View>
             ))}
           </View>
@@ -243,8 +252,8 @@ export const BuyPlan = (props: {
             is5YearPlanSelected
               ? strings.purchase()
               : pricingPlans?.userCanRequestTrial
-              ? strings.subscribeAndStartTrial()
-              : strings.subscribe()
+                ? strings.subscribeAndStartTrial()
+                : strings.subscribe()
           }
           onPress={async () => {
             if (isGithubRelease) {
@@ -321,7 +330,10 @@ const ProductItem = (props: {
   productId: string;
 }) => {
   const { colors } = useThemeColors();
-  const [regionalDiscount, setRegionaDiscount] = useState<SKUResponse>();
+  const regionalDiscount =
+    props.productId === "notesnook.pro.yearly"
+      ? props.pricingPlans.regionalDiscount
+      : undefined;
   const product =
     props.pricingPlans?.currentPlan?.subscriptions?.[
       regionalDiscount?.sku || props.productId
@@ -356,29 +368,21 @@ const ProductItem = (props: {
         (product as RNIap.Subscription)?.productId
       ) ||
       props.pricingPlans.user?.subscription?.productId ===
-        (product as Plan).id);
+        (product as Plan)?.id);
 
-  useEffect(() => {
-    props.pricingPlans
-      ?.getRegionalDiscount(
-        props.pricingPlans.currentPlan?.id as string,
-        props.pricingPlans.isGithubRelease
-          ? ((product as Plan)?.period as string)
-          : props.productId
-      )
-      .then((value) => {
-        if (
-          value &&
-          value.sku?.startsWith(
-            (props.pricingPlans.selectedProduct as RNIap.Subscription)
-              ?.productId
-          )
-        ) {
-          props.pricingPlans.selectProduct(value?.sku as string);
-        }
-        setRegionaDiscount(value);
-      });
-  }, []);
+  const discountValue =
+    (isAnnual && !isGithubRelease) ||
+    (isGithubRelease && (product as Plan)?.discount?.amount)
+      ? regionalDiscount
+        ? regionalDiscount.discount
+        : isGithubRelease
+          ? (product as Plan).discount?.amount
+          : props.pricingPlans.compareProductPrice(
+              props.pricingPlans.currentPlan?.id as string,
+              `notesnook.${props.pricingPlans.currentPlan?.id}.yearly`,
+              `notesnook.${props.pricingPlans.currentPlan?.id}.monthly`
+            )
+      : undefined;
 
   return (
     <TouchableOpacity
@@ -420,12 +424,11 @@ const ProductItem = (props: {
             {isAnnual
               ? strings.yearly()
               : is5YearProduct
-              ? strings.fiveYearPlan()
-              : strings.monthly()}
+                ? strings.fiveYearPlan()
+                : strings.monthly()}
           </Heading>
 
-          {(isAnnual && !isGithubRelease) ||
-          (isGithubRelease && (product as Plan)?.discount?.amount) ? (
+          {discountValue ? (
             <View
               style={{
                 backgroundColor: colors.static.red,
@@ -436,18 +439,7 @@ const ProductItem = (props: {
               }}
             >
               <Heading color={colors.static.white} size={AppFontSize.xs}>
-                {strings.bestValue()} -{" "}
-                {strings.percentOff(
-                  (regionalDiscount
-                    ? regionalDiscount.discount
-                    : isGithubRelease
-                    ? (product as Plan).discount?.amount
-                    : props.pricingPlans.compareProductPrice(
-                        props.pricingPlans.currentPlan?.id as string,
-                        `notesnook.${props.pricingPlans.currentPlan?.id}.yearly`,
-                        `notesnook.${props.pricingPlans.currentPlan?.id}.monthly`
-                      )) as string
-                )}
+                {strings.bestValue()} - {strings.percentOff(`${discountValue}`)}
               </Heading>
             </View>
           ) : null}

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

@@ -102,9 +102,17 @@ const TabItemComponent = (props: {
         {props.tab.session?.noteLocked ? (
           <>
             {props.tab.session?.locked ? (
-              <Icon size={AppFontSize.md} name="lock" />
+              <Icon
+                size={AppFontSize.md}
+                name="lock"
+                color={colors.primary.icon}
+              />
             ) : (
-              <Icon size={AppFontSize.md} name="lock-open-outline" />
+              <Icon
+                size={AppFontSize.md}
+                name="lock-open-outline"
+                color={colors.primary.icon}
+              />
             )}
           </>
         ) : null}

apps/mobile/app/components/sheets/export-notes/share.jsx

@@ -21,7 +21,6 @@ import React from "react";
 import { View } from "react-native";
 import FileViewer from "react-native-file-viewer";
 import { ToastManager } from "../../../services/event-manager";
-import { AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../../utils/styles";

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

@@ -17,18 +17,18 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Debug } from "@notesnook/core";
+import { Debug, IssueReportResponse } from "@notesnook/core";
 import { getModel, getBrand, getSystemVersion } from "react-native-device-info";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useRef, useState } from "react";
 import { Linking, Platform, Text, TextInput, View } from "react-native";
 import { getVersion } from "react-native-device-info";
 import { useStoredRef } from "../../../hooks/use-stored-ref";
-import { ToastManager } from "../../../services/event-manager";
+import { eSendEvent, ToastManager } from "../../../services/event-manager";
 import PremiumService from "../../../services/premium";
 import { useUserStore } from "../../../stores/use-user-store";
 import { openLinkInBrowser } from "../../../utils/functions";
-import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size/index";
 import DialogHeader from "../../dialog/dialog-header";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
@@ -37,17 +37,26 @@ import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../../utils/styles";
 import Config from "react-native-config";
+import { eCloseSheet } from "../../../utils/events";
 
-export const Issue = ({ defaultTitle, defaultBody, issueTitle }) => {
+export const Issue = ({
+  defaultTitle,
+  defaultBody,
+  issueTitle
+}: {
+  defaultTitle?: string;
+  defaultBody?: string;
+  issueTitle?: string;
+}) => {
   const { colors } = useThemeColors();
-  const body = useStoredRef("issueBody");
+  const body = useStoredRef("issueBody", "");
   const title = useStoredRef("issueTitle", defaultTitle);
   const [done, setDone] = useState(false);
   const user = useUserStore((state) => state.user);
   const [loading, setLoading] = useState(false);
-  const bodyRef = useRef();
+  const bodyRef = useRef<TextInput>(null);
   const initialLayout = useRef(false);
-  const issueUrl = useRef();
+  const issueReportResponse = useRef<IssueReportResponse>(undefined);
 
   const onPress = async () => {
     if (loading) return;
@@ -57,7 +66,7 @@ export const Issue = ({ defaultTitle, defaultBody, issueTitle }) => {
 
     try {
       setLoading(true);
-      issueUrl.current = await Debug.report({
+      issueReportResponse.current = await Debug.report({
         title: title.current,
         body:
           body.current +
@@ -72,7 +81,7 @@ Logged in: ${user ? "yes" : "no"}
 Github Release: ${Config.GITHUB_RELEASE === "true" ? "Yes" : "No"}`,
         userId: user?.id
       });
-      if (!issueUrl.current) {
+      if (!issueReportResponse.current) {
         setLoading(false);
         ToastManager.show({
           heading: "Failed to report issue on github",
@@ -88,12 +97,46 @@ Github Release: ${Config.GITHUB_RELEASE === "true" ? "Yes" : "No"}`,
     } catch (e) {
       setLoading(false);
       ToastManager.show({
-        heading: e.message,
+        heading: (e as Error).message,
         type: "error"
       });
     }
   };
 
+  function getResponseInfo(response?: IssueReportResponse) {
+    if (!response || "error" in response) return;
+    switch (response.type) {
+      case "email": {
+        return {
+          title: strings.yourSupportRequestHasBeenForwarded(),
+          message: strings.supportEmailMessage()
+        };
+      }
+      case "discussion": {
+        const url = response.url;
+        return {
+          title: strings.thankYouForFeedback(),
+          positiveButtonText: strings.copyLink(),
+          message: strings.featureRequestMessage(url),
+          url: url
+        };
+      }
+      case "issue": {
+        const url = response.url;
+        return {
+          title: strings.thankYouForReporting(),
+          positiveButtonText: strings.copyLink(),
+          message: strings.bugReportMessage(url),
+          url: url
+        };
+      }
+    }
+  }
+
+  const responseInfo = getResponseInfo(issueReportResponse.current);
+
+  console.log(responseInfo, issueReportResponse.current);
+
   return (
     <View
       style={{
@@ -105,38 +148,28 @@ Github Release: ${Config.GITHUB_RELEASE === "true" ? "Yes" : "No"}`,
         <>
           <View
             style={{
-              height: 250,
               justifyContent: "center",
               alignItems: "center",
               gap: 10
             }}
           >
-            <Heading>{strings.issueCreatedHeading()}</Heading>
+            <Heading>{responseInfo?.title}</Heading>
             <Paragraph
               style={{
                 textAlign: "center"
               }}
               selectable={true}
             >
-              {strings.issueCreatedDesc[0]()}
-              <Paragraph
-                style={{
-                  textDecorationLine: "underline",
-                  color: colors.primary.accent
-                }}
-                onPress={() => {
-                  Linking.openURL(issueUrl.current);
-                }}
-              >
-                {issueUrl.current}
-              </Paragraph>
-              . {strings.issueCreatedDesc[1]()}
+              {responseInfo?.message}
             </Paragraph>
 
             <Button
-              title={strings.openIssue()}
+              title={responseInfo?.positiveButtonText || "Done"}
               onPress={() => {
-                Linking.openURL(issueUrl.current);
+                if (responseInfo?.url) {
+                  Linking.openURL(responseInfo?.url);
+                }
+                eSendEvent(eCloseSheet);
               }}
               type="accent"
               width="100%"
@@ -248,10 +281,7 @@ Github Release: ${Config.GITHUB_RELEASE === "true" ? "Yes" : "No"}`,
               }}
               onPress={async () => {
                 try {
-                  await openLinkInBrowser(
-                    "https://discord.gg/zQBK97EE22",
-                    colors
-                  );
+                  await openLinkInBrowser("https://discord.gg/zQBK97EE22");
                 } catch (e) {
                   console.error(e);
                 }

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

@@ -118,8 +118,8 @@ const ListBlockItem = ({
           {item?.content.length > 200
             ? item?.content.slice(0, 200) + "..."
             : !item.content || item.content.trim() === ""
-              ? strings.linkNoteEmptyBlock()
-              : item.content}
+            ? strings.linkNoteEmptyBlock()
+            : item.content}
         </Paragraph>
 
         <View

apps/mobile/app/components/sheets/menu-item-properties/index.tsx

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useAreFeaturesAvailable } from "@notesnook/common";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
-import React from "react";
+import React, { useEffect } from "react";
 import { View } from "react-native";
 import {
   eSendEvent,
@@ -28,7 +28,11 @@ import {
   ToastManager
 } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
-import { eCloseSheet } from "../../../utils/events";
+import {
+  eAfterSync,
+  eCloseSheet,
+  eMenuItemUpdate
+} from "../../../utils/events";
 import { SideMenuItem } from "../../../utils/menu-items";
 import { AppFontSize } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
@@ -37,12 +41,25 @@ import AppIcon from "../../ui/AppIcon";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
 import PaywallSheet from "../paywall";
+import { presentDialog } from "../../dialog/functions";
+import { db } from "../../../common/database";
+import { useTrashStore } from "../../../stores/use-trash-store";
+import { useSettingStore } from "../../../stores/use-setting-store";
 export const MenuItemProperties = ({ item }: { item: SideMenuItem }) => {
   const { colors } = useThemeColors();
   const featuresAvailable = useAreFeaturesAvailable([
     "customHomepage",
     "customizableSidebar"
   ]);
+  const isAppLoading = useSettingStore((state) => state.isAppLoading);
+  const trash = useTrashStore((state) => state.items);
+
+  useEffect(() => {
+    if (!isAppLoading) {
+      useTrashStore.getState().refresh();
+    }
+  }, [isAppLoading]);
+
   return !featuresAvailable ? null : (
     <View
       style={{
@@ -100,7 +117,38 @@ export const MenuItemProperties = ({ item }: { item: SideMenuItem }) => {
           },
           icon: "sort-ascending",
           locked: !featuresAvailable?.customizableSidebar.isAllowed
-        }
+        },
+        ...(item.id === "Trash"
+          ? [
+              {
+                title: strings.clearTrash(),
+                onPress: async () => {
+                  if (!trash || trash?.length === 0) return;
+                  eSendEvent(eCloseSheet);
+                  setTimeout(() => {
+                    presentDialog({
+                      title: strings.clearTrashConfirm(),
+                      paragraph: strings.clearTrashDesc(),
+                      positiveText: strings.clear(),
+                      positivePress: async () => {
+                        await db.trash.clear();
+                        useTrashStore.getState().clear();
+                        eSendEvent(eMenuItemUpdate);
+                        eSendEvent(eAfterSync);
+                        ToastManager.show({
+                          message: strings.trashCleared(),
+                          type: "success"
+                        });
+                        return true;
+                      }
+                    });
+                  }, 500);
+                },
+                icon: "delete-sweep-outline",
+                disabled: !trash || trash?.length === 0
+              }
+            ]
+          : [])
       ].map((item) => (
         <Pressable
           key={item.title}
@@ -112,7 +160,7 @@ export const MenuItemProperties = ({ item }: { item: SideMenuItem }) => {
             gap: DefaultAppStyles.GAP_SMALL,
             borderRadius: 0,
             paddingHorizontal: DefaultAppStyles.GAP,
-            opacity: item.locked ? 0.6 : 1
+            opacity: item.disabled || item.locked ? 0.6 : 1
           }}
           onPress={() => {
             item.onPress();

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

@@ -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 { Notebook, VirtualizedGrouping } from "@notesnook/core";
+import { Notebook } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";

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

@@ -1,3 +1,22 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import React from "react";
 import { FeatureId, FeatureResult } from "@notesnook/common";
 import { SubscriptionPlan, SubscriptionProvider } from "@notesnook/core";
 import { strings } from "@notesnook/intl";

apps/mobile/app/components/sheets/plan-limits/index.tsx

@@ -1,3 +1,22 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import React from "react";
 import {
   FeatureUsage,
   formatBytes,
@@ -76,10 +95,10 @@ export function PlanLimits() {
               {item.total === Infinity
                 ? strings.unlimited()
                 : item.id === "storage"
-                ? `${formatBytes(item.used)}/${formatBytes(
-                    item.total
-                  )} ${strings.used()}`
-                : `${item.used}/${item.total} ${strings.used()}`}
+                  ? `${formatBytes(item.used)}/${formatBytes(
+                      item.total
+                    )} ${strings.used()}`
+                  : `${item.used}/${item.total} ${strings.used()}`}
             </Paragraph>
           </View>
         </View>

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

@@ -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 { hosts, Monograph, Note } from "@notesnook/core";
+import { hosts, Note } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import Clipboard from "@react-native-clipboard/clipboard";
@@ -28,12 +28,15 @@ import {
   TouchableOpacity,
   View
 } from "react-native";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 //@ts-ignore
 import ToggleSwitch from "toggle-switch-react-native";
 import { db } from "../../../common/database";
 import { requestInAppReview } from "../../../services/app-review";
-import { presentSheet, ToastManager } from "../../../services/event-manager";
+import {
+  eSendEvent,
+  presentSheet,
+  ToastManager
+} from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { useAttachmentStore } from "../../../stores/use-attachment-store";
 import { openLinkInBrowser } from "../../../utils/functions";
@@ -46,22 +49,17 @@ import Input from "../../ui/input";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { useAsync } from "react-async-hook";
-import { isFeatureAvailable, useIsFeatureAvailable } from "@notesnook/common";
+import { eMenuItemUpdate } from "../../../utils/events";
+import { useIsFeatureAvailable } from "@notesnook/common";
 
 async function fetchMonographData(noteId: string) {
   const monographId = db.monographs.monograph(noteId);
   const monograph = monographId
     ? await db.monographs.get(monographId)
     : undefined;
-  const analyticsFeature = await isFeatureAvailable("monographAnalytics");
-  const analytics =
-    monographId && analyticsFeature
-      ? await db.monographs.analytics(monographId)
-      : undefined;
   return {
     monograph,
-    monographId,
-    analytics
+    monographId
   };
 }
 
@@ -78,12 +76,15 @@ const PublishNoteSheet = ({
   const isFeatureAvailable = useIsFeatureAvailable("monographAnalytics");
   const [isLocked, setIsLocked] = useState(false);
   const [publishing, setPublishing] = useState(false);
+  const customTitle = useRef<string>("");
   const pwdInput = useRef<TextInput>(null);
+  const titleInput = useRef<TextInput>(null);
   const passwordValue = useRef<string>(undefined);
   const monographData = useAsync(async () => {
     return fetchMonographData(note?.id);
   }, []);
   const monograph = monographData.result?.monograph;
+  customTitle.current = monograph?.title || note.title || "";
   const publishUrl = monograph && `${hosts.MONOGRAPH_HOST}/${monograph?.id}`;
   const isPublished = db.monographs.monograph(note?.id);
 
@@ -108,13 +109,14 @@ const PublishNoteSheet = ({
     try {
       if (note?.id) {
         if (isLocked && !passwordValue.current) return;
-        await db.monographs.publish(note.id, {
+        await db.monographs.publish(note.id, customTitle.current, {
           selfDestruct: selfDestruct,
           password: isLocked ? passwordValue.current : undefined
         });
 
         await monographData.execute();
         Navigation.queueRoutesForUpdate();
+        eSendEvent(eMenuItemUpdate);
         setPublishLoading(false);
       }
       requestInAppReview();
@@ -129,7 +131,6 @@ const PublishNoteSheet = ({
 
     setPublishLoading(false);
   };
-
   const setPublishLoading = (value: boolean) => {
     setPublishing(value);
   };
@@ -142,6 +143,7 @@ const PublishNoteSheet = ({
         await db.monographs.unpublish(note.id);
         monographData.execute();
         Navigation.queueRoutesForUpdate();
+        eSendEvent(eMenuItemUpdate);
         setPublishLoading(false);
       }
     } catch (e) {
@@ -245,6 +247,13 @@ const PublishNoteSheet = ({
             </TouchableOpacity>
           ) : null}
 
+          <Input
+            fwdRef={titleInput}
+            onChangeText={(value) => (customTitle.current = value)}
+            defaultValue={customTitle.current}
+            placeholder={strings.noteTitle()}
+          />
+
           <TouchableOpacity
             onPress={() => {
               if (publishing) return;
@@ -372,9 +381,6 @@ const PublishNoteSheet = ({
                   }}
                 >
                   <Paragraph size={AppFontSize.sm}>{strings.views()}</Paragraph>
-                  <Paragraph>
-                    {monographData?.result?.analytics?.totalViews || 0}
-                  </Paragraph>
                 </View>
               </View>
             </View>

apps/mobile/app/components/sheets/recovery-key/index.jsx

@@ -169,7 +169,7 @@ class RecoveryKeySheet extends React.Component {
   };
 
   onOpen = async () => {
-    let k = await db.user.getEncryptionKey();
+    let k = await db.user.getMasterKey();
     this.user = await db.user.getUser();
     if (k) {
       this.setState({

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

@@ -104,8 +104,8 @@ const ListBlockItem = ({
           {item?.content.length > 200
             ? item?.content.slice(0, 200) + "..."
             : !item.content || item.content.trim() === ""
-              ? strings.linkNoteEmptyBlock()
-              : item.content}
+            ? strings.linkNoteEmptyBlock()
+            : item.content}
         </Paragraph>
 
         <View

apps/mobile/app/components/sheets/relations-list/index.tsx

@@ -121,6 +121,17 @@ export const RelationsList = ({
         <List
           data={items}
           loading={false}
+          groupType={
+            referenceType === "note"
+              ? "notes"
+              : referenceType === "tag"
+                ? "tags"
+                : referenceType === "notebook"
+                  ? "notebooks"
+                  : referenceType === "reminder"
+                    ? "reminders"
+                    : "notes"
+          }
           dataType={referenceType as any}
           isRenderedInActionSheet={true}
         />