clipper(web): remove node-sass and sass-loader

.github/workflows/android.e2e.yml

@@ -10,7 +10,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Enable KVM
         run: |

.github/workflows/android.preview.build.yml

@@ -1,104 +0,0 @@
-name: Notesnook Android Preview Build
-
-# UNTRUSTED stage. Runs on `pull_request`, so fork code is checked out and
-# compiled with a read-only GITHUB_TOKEN and NO repository secrets. The release
-# APK is built without any signing secret (the same as before). Firebase
-# distribution and the PR comment happen in android.preview.publish.yml, which
-# runs in the trusted `workflow_run` context and never executes fork code.
-# Because no secrets are exposed here, the build runs automatically for every
-# PR (including forks) with no authorization gate.
-
-on:
-  pull_request:
-    types: [opened, reopened, synchronize]
-    branches: [master, beta]
-    paths:
-      - "apps/mobile/**"
-      - "packages/**"
-      - ".github/workflows/android.preview.build.yml"
-      - ".github/workflows/android.preview.publish.yml"
-
-concurrency:
-  group: android-preview-${{ github.event.pull_request.number }}
-  cancel-in-progress: true
-
-jobs:
-  build:
-    runs-on: ubuntu-22.04
-    env:
-      STAGING_BUILD: true
-
-    steps:
-      - name: Checkout PR code
-        uses: actions/checkout@v5
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-
-      - 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:
-          tool-cache: false
-          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: Stage build artifact
-        run: |
-          set -euo pipefail
-          mkdir -p "$RUNNER_TEMP/artifact"
-          cp apps/mobile/android/app/build/outputs/apk/release/app-arm64-v8a-release.apk \
-            "$RUNNER_TEMP/artifact/app-preview.apk"
-          {
-            echo "PR_NUMBER=${{ github.event.pull_request.number }}"
-            echo "HEAD_SHA=${{ github.event.pull_request.head.sha }}"
-          } > "$RUNNER_TEMP/artifact/pr-meta.env"
-
-      - name: Upload build artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: android-preview-build
-          path: ${{ runner.temp }}/artifact
-          if-no-files-found: error
-          retention-days: 1
-
-      - name: Upload sourcemaps
-        uses: actions/upload-artifact@v4
-        with:
-          name: sourcemaps
-          path: |
-            apps/mobile/android/app/build/generated/sourcemaps/**/*.map

.github/workflows/android.preview.publish.yml

@@ -1,72 +0,0 @@
-name: Notesnook Android Preview Publish
-
-# TRUSTED stage. Runs via `workflow_run` after the build workflow finishes, so
-# it has the base repo's secrets and a write-scoped token. It downloads the APK
-# the build produced and distributes it + posts the PR comment. It never checks
-# out or executes fork code.
-
-on:
-  workflow_run:
-    workflows: ["Notesnook Android Preview Build"]
-    types: [completed]
-
-jobs:
-  publish:
-    if: github.event.workflow_run.conclusion == 'success'
-    runs-on: ubuntu-latest
-    timeout-minutes: 20
-
-    steps:
-      - name: Download build artifact
-        uses: actions/download-artifact@v4
-        with:
-          name: android-preview-build
-          path: ${{ runner.temp }}/artifact
-          run-id: ${{ github.event.workflow_run.id }}
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Load PR metadata
-        run: cat "$RUNNER_TEMP/artifact/pr-meta.env" >> "$GITHUB_ENV"
-
-      - name: Publish to Firebase
-        id: firebase-output
-        uses: wzieba/Firebase-Distribution-Github-Action@v1
-        with:
-          appId: ${{ secrets.FIREBASE_APP_ID }}
-          serviceCredentialsFileContent: ${{ secrets.QA_SERVICE_ACCOUNT }}
-          groups: testers
-          file: ${{ runner.temp }}/artifact/app-preview.apk
-          releaseNotes: Preview for https://github.com/${{ github.repository }}/pull/${{ env.PR_NUMBER }}
-
-      - name: Post or update PR comment
-        uses: actions/github-script@v7
-        env:
-          preview_url: ${{ steps.firebase-output.outputs.TESTING_URI }}
-        with:
-          script: |
-            const marker = '<!-- android-preview-comment -->';
-            const prNumber = Number(process.env.PR_NUMBER);
-            if (!prNumber) return;
-            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.HEAD_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/android.publish.internal.yml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v2
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache

.github/workflows/android.publish.yml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v2
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache

.github/workflows/core.tests.yml

@@ -35,7 +35,7 @@ jobs:
     needs: authorize
     runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
         with:
           ref: ${{ github.event.pull_request.head.sha || github.ref }}
 

.github/workflows/desktop.preview.yml

@@ -1,303 +0,0 @@
-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@v5
-
-      - 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@v5
-
-      - 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@v5
-
-      - 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
-          npm i --cpu x64 sqlite3-fts5-html
-        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@v5
-
-      - 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 arm64 sqlite3-fts5-html
-        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-2022
-    outputs:
-      windows-artifact-url: ${{ steps.artifact-upload-step.outputs.artifact-url }}
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v5
-
-      - 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/desktop.publish.yml

@@ -48,7 +48,7 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
@@ -107,7 +107,7 @@ jobs:
           target_commitish: ${{ github.ref }}
 
       - name: Generate flatpak sources
-        if: inputs.build-linux
+        if: inputs.publish-github && inputs.build-linux
         run: |
           sudo apt-get update
           sudo apt-get install -y --quiet flatpak flatpak-builder pipx
@@ -127,13 +127,6 @@ jobs:
           files: ./generated-sources.json
           prerelease: ${{ endsWith(steps.app_metadata.outputs.app_version, '-beta') }}
 
-      - name: Upload generated-sources.json as artifact
-        uses: actions/upload-artifact@v4
-        if: inputs.build-linux
-        with:
-          name: generated-sources
-          path: ./generated-sources.json
-
   build-macos:
     name: Build for macOS
     needs: build
@@ -142,7 +135,7 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
@@ -189,9 +182,7 @@ jobs:
       - name: Install sqlite-better-trigram for all arch
         run: |
           npm i --cpu arm64 sqlite-better-trigram
-          npm i --cpu arm64 sqlite3-fts5-html
           npm i --cpu x64 sqlite-better-trigram
-          npm i --cpu x64 sqlite3-fts5-html
         working-directory: ./apps/desktop
 
       - name: Install provisioning profile
@@ -246,7 +237,7 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
@@ -273,7 +264,6 @@ jobs:
       - name: Install sqlite-better-trigram for all arch
         run: |
           npm i --cpu x64 sqlite-better-trigram
-          npm i --cpu x64 sqlite3-fts5-html
         working-directory: ./apps/desktop
 
       - name: Build Electron wrapper
@@ -314,7 +304,7 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
@@ -341,7 +331,6 @@ jobs:
       - name: Install sqlite-better-trigram for all arch
         run: |
           npm i --cpu arm64 sqlite-better-trigram
-          npm i --cpu arm64 sqlite3-fts5-html
         working-directory: ./apps/desktop
 
       - name: Build Electron wrapper
@@ -374,11 +363,11 @@ jobs:
     name: Build for Windows
     needs: build
     if: inputs.build-windows
-    runs-on: windows-2022
+    runs-on: windows-latest
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Setup .NET Core SDK
         uses: actions/setup-dotnet@v2

.github/workflows/desktop.tests.yml

@@ -18,13 +18,12 @@ on:
       - ".github/workflows/desktop.tests.yml"
 
 jobs:
-  test-macos-x64:
-    name: Test macOS x64
-    runs-on: macos-15-intel
-
+  build:
+    name: Build
+    runs-on: ubuntu-22.04
     steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v5
+      - name: Checkout
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
@@ -34,10 +33,44 @@ jobs:
           npm ci --ignore-scripts --prefer-offline --no-audit
           npm run bootstrap -- --scope=web
 
-      - name: Install sqlite-better-trigram for all arch
+      - name: Generate desktop build
+        run: npm run tx @notesnook/web:build:desktop
+
+      - name: Archive build artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: apps/web/build/**/*
+
+  test-macos-x64:
+    name: Test macOS x64
+    needs: build
+    runs-on: macos-15-intel
+
+    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 i --cpu x64 sqlite-better-trigram
-          npm i --cpu x64 sqlite3-fts5-html
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
+
+      - name: Build Electron wrapper
+        run: npm run tx @notesnook/desktop:release
+
+      - name: Build app
+        run: |
+          yarn electron-builder --config=electron-builder.config.js --mac --dir --x64
         working-directory: ./apps/desktop
 
       - name: Run tests x64
@@ -54,24 +87,33 @@ jobs:
 
   test-macos:
     name: Test macOS
+    needs: build
     runs-on: macos-latest
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v5
+        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=web
+          npm run bootstrap -- --scope=desktop
 
-      - name: Install sqlite-better-trigram for all arch
+      - name: Build Electron wrapper
+        run: npm run tx @notesnook/desktop:release
+
+      - name: Build app
         run: |
-          npm i --cpu arm64 sqlite-better-trigram
-          npm i --cpu arm64 sqlite3-fts5-html
+          yarn electron-builder --config=electron-builder.config.js --mac --dir --arm64
         working-directory: ./apps/desktop
 
       - name: Run tests arm64
@@ -88,24 +130,39 @@ jobs:
 
   test-linux:
     name: Test for Linux
+    needs: build
     runs-on: ubuntu-22.04
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v5
+        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=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
-          npm i --cpu x64 sqlite3-fts5-html
+        working-directory: ./apps/desktop
+
+      - name: Build Electron wrapper
+        run: npm run tx @notesnook/desktop:release
+
+      - name: Build app
+        run: |
+          yarn electron-builder --config=electron-builder.config.js --linux --dir --arm64 --x64
         working-directory: ./apps/desktop
 
       - name: Run tests
@@ -122,26 +179,44 @@ jobs:
 
   test-windows:
     name: Test for Windows
-    runs-on: windows-2022
+    needs: build
+    runs-on: windows-latest
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v5
+        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=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
+
+          npm i --cpu arm64 sqlite3-fts5-html
           npm i --cpu x64 sqlite3-fts5-html
         working-directory: ./apps/desktop
 
+      - name: Build Electron wrapper
+        run: node scripts/execute.mjs @notesnook/desktop:release
+
+      - name: Build app
+        run: |
+          npx cross-env NOTESNOOK_STAGING=true yarn electron-builder --config=electron-builder.config.js --win --dir --arm64 --x64
+        working-directory: ./apps/desktop
+
       - name: Run tests
         run: npm run test
         working-directory: ./apps/desktop

.github/workflows/editor.tests.yml

@@ -28,7 +28,7 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache

.github/workflows/help.publish.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
       - uses: actions-rs/toolchain@v1
         with:
           toolchain: stable

.github/workflows/ios.preview.build.yml

@@ -1,152 +0,0 @@
-name: Notesnook iOS Preview Build
-
-# UNTRUSTED stage. Runs on `pull_request`, so fork code is checked out and
-# compiled with a read-only GITHUB_TOKEN and NO repository secrets. It only
-# produces an *unsigned* archive. Signing, Firebase distribution and PR
-# comments happen in ios.preview.publish.yml, which runs in the trusted
-# `workflow_run` context and never executes fork code. Because no secrets are
-# exposed here, the build runs automatically for every PR (including forks)
-# with no authorization gate.
-
-on:
-  pull_request:
-    types: [opened, reopened, synchronize]
-    branches: [master, beta]
-    paths:
-      - "apps/mobile/**"
-      - "packages/**"
-      - ".github/workflows/ios.preview.build.yml"
-      - ".github/workflows/ios.preview.publish.yml"
-
-# A fork that spams pushes shouldn't queue up macOS builds.
-concurrency:
-  group: ios-preview-${{ github.event.pull_request.number }}
-  cancel-in-progress: true
-
-jobs:
-  build:
-    runs-on: macos-26
-    timeout-minutes: 60
-
-    steps:
-      - name: Checkout PR code
-        uses: actions/checkout@v5
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-
-      - 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: Setup iOS Platform
-        run: |
-          # GitHub runs this as `/bin/bash -e`, so `set +e` is required -- without
-          # it the first failure aborts the step before any retry can happen.
-          # Both commands hit "Unable to connect to simulator" (exit 70) when
-          # CoreSimulatorService is wedged, so retry each and bounce it between.
-          set +e
-          DL_DIR="$RUNNER_TEMP/ios-platform"
-
-          retry() {
-            for i in 1 2 3; do
-              "$@" && return 0
-              echo "Attempt $i failed ($*); resetting CoreSimulator..."
-              sudo killall -9 com.apple.CoreSimulator.CoreSimulatorService simdiskimaged 2>/dev/null
-              sleep 20
-              xcrun simctl list runtimes >/dev/null 2>&1
-            done
-            echo "::error::Failed after 3 attempts: $*"
-            exit 1
-          }
-
-          xcrun simctl list runtimes >/dev/null 2>&1
-          retry xcodebuild -downloadPlatform iOS -exportPath "$DL_DIR"
-
-          # Find the dmg; its name embeds a build number that changes.
-          DMG="$(find "$DL_DIR" -name '*.dmg' | head -n1)"
-          [ -n "$DMG" ] || { echo "::error::No dmg in $DL_DIR"; exit 1; }
-          retry xcodebuild -importPlatform "$DMG"
-
-      - 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@v4
-        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}}
-
-      # Archive unsigned: this job has no certs/profiles (secrets), and the iOS
-      # device SDK forbids ad-hoc signing, so real signing happens in the trusted
-      # publish workflow (ios.preview.publish.yml). Do NOT pass
-      # CODE_SIGN_ENTITLEMENTS="" -- each target must keep its own entitlements so
-      # the archive records them; blanking them dropped the App Group and crashed
-      # MMKV on launch.
-      - name: Archive (unsigned)
-        run: |
-          set -euo pipefail
-          xcodebuild \
-            -workspace apps/mobile/ios/Notesnook.xcworkspace \
-            -scheme Notesnook \
-            -configuration Release \
-            -sdk iphoneos \
-            -destination 'generic/platform=iOS' \
-            -archivePath "$RUNNER_TEMP/Notesnook.xcarchive" \
-            CODE_SIGNING_ALLOWED=NO \
-            CODE_SIGNING_REQUIRED=NO \
-            CODE_SIGN_IDENTITY="" \
-            archive
-
-      - name: Stage build artifact
-        run: |
-          set -euo pipefail
-          mkdir -p "$RUNNER_TEMP/artifact"
-          tar -czf "$RUNNER_TEMP/artifact/Notesnook.xcarchive.tar.gz" \
-            -C "$RUNNER_TEMP" Notesnook.xcarchive
-          # Carry the PR context forward; workflow_run cannot see it reliably for forks.
-          {
-            echo "PR_NUMBER=${{ github.event.pull_request.number }}"
-            echo "HEAD_SHA=${{ github.event.pull_request.head.sha }}"
-          } > "$RUNNER_TEMP/artifact/pr-meta.env"
-
-      - name: Upload build artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: ios-preview-build
-          path: ${{ runner.temp }}/artifact
-          if-no-files-found: error
-          retention-days: 1

.github/workflows/ios.preview.publish.yml

@@ -1,222 +0,0 @@
-name: Notesnook iOS Preview Publish
-
-# TRUSTED stage. Runs via `workflow_run` after the build workflow finishes, so
-# it has the base repo's secrets and a write-scoped token. It checks out the
-# BASE repository (never fork code), downloads the unsigned archive the build
-# produced, then signs + distributes it and posts the PR comment. Signing is
-# done directly with `codesign` on the prebuilt archive -- no app build phases
-# run here, so fork code is never executed in this trusted context.
-#
-# Split into two jobs on purpose: signing needs macOS, but the Firebase
-# distribution action is a Docker container action and only runs on Linux.
-
-on:
-  workflow_run:
-    workflows: ["Notesnook iOS Preview Build"]
-    types: [completed]
-
-jobs:
-  export:
-    # Only publish previews for builds that actually succeeded.
-    if: github.event.workflow_run.conclusion == 'success'
-    runs-on: macos-26
-    timeout-minutes: 30
-    outputs:
-      pr_number: ${{ steps.meta.outputs.PR_NUMBER }}
-      head_sha: ${{ steps.meta.outputs.HEAD_SHA }}
-
-    steps:
-      - name: Checkout base repo (trusted)
-        uses: actions/checkout@v5
-        # No `ref` -> checks out the default branch, i.e. trusted base code.
-
-      - name: Setup Xcode
-        uses: maxim-lobanov/setup-xcode@v1
-        with:
-          xcode-version: "26.1.1"
-
-      - name: Download build artifact
-        uses: actions/download-artifact@v4
-        with:
-          name: ios-preview-build
-          path: ${{ runner.temp }}/artifact
-          run-id: ${{ github.event.workflow_run.id }}
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Load PR metadata & extract archive
-        id: meta
-        run: |
-          set -euo pipefail
-          cat "$RUNNER_TEMP/artifact/pr-meta.env" >> "$GITHUB_OUTPUT"
-          tar -xzf "$RUNNER_TEMP/artifact/Notesnook.xcarchive.tar.gz" -C "$RUNNER_TEMP"
-
-      - name: Import signing certificate
-        uses: apple-actions/import-codesign-certs@v3
-        with:
-          p12-file-base64: ${{ secrets.APPLE_CERTIFICATE_P12 }}
-          p12-password: ${{ secrets.APPLE_CERTIFICATE_P12_PASSWORD }}
-
-      - name: Install provisioning profiles
-        env:
-          PROFILE_APP: ${{ secrets.APPLE_MOBILE_PROVISION_ADHOC_APP }}
-          PROFILE_SHARE: ${{ secrets.APPLE_MOBILE_PROVISION_ADHOC_SHARE }}
-          PROFILE_WIDGET: ${{ secrets.APPLE_MOBILE_PROVISION_ADHOC_WIDGET }}
-        run: |
-          set -euo pipefail
-          PROFILE_DIR="$HOME/Library/MobileDevice/Provisioning Profiles"
-          mkdir -p "$PROFILE_DIR"
-          i=0
-          for p in "$PROFILE_APP" "$PROFILE_SHARE" "$PROFILE_WIDGET"; do
-            echo "$p" | base64 --decode > "$PROFILE_DIR/preview-$i.mobileprovision"
-            i=$((i + 1))
-          done
-
-      # Sign the unsigned archive by hand. `xcodebuild -exportArchive` re-signs
-      # from the archive's `archived-expanded-entitlements.xcent`, which an
-      # unsigned archive does not contain, so it dropped the App Group and the
-      # app crashed on launch. Instead we sign each bundle directly, taking the
-      # entitlements from each provisioning profile (exactly what Apple
-      # provisioned -- App Group, keychain groups with the right team prefix).
-      # Runs on macOS but executes NO fork build phases, so it stays trusted.
-      - name: Sign IPA
-        run: |
-          set -euo pipefail
-          PROFILES="$HOME/Library/MobileDevice/Provisioning Profiles"
-          APP="$(find "$RUNNER_TEMP/Notesnook.xcarchive/Products/Applications" -maxdepth 1 -name '*.app' | head -n1)"
-          [ -n "$APP" ] || { echo "::error::No .app in archive"; exit 1; }
-
-          # Single Apple Distribution identity from the imported keychain.
-          IDENTITY="$(security find-identity -v -p codesigning | awk '/Apple Distribution/{print $2; exit}')"
-          [ -n "$IDENTITY" ] || { echo "::error::No Apple Distribution identity found"; exit 1; }
-          echo "Signing identity: $IDENTITY"
-
-          TMP="$RUNNER_TEMP/sign"; mkdir -p "$TMP"
-
-          # Decode a profile's bundle id (application-identifier minus team prefix).
-          profile_bundle_id() {
-            security cms -D -i "$1" -o "$TMP/_p.plist" 2>/dev/null
-            local appid; appid="$(plutil -extract Entitlements.application-identifier raw -o - "$TMP/_p.plist")"
-            echo "${appid#*.}"
-          }
-          # Find the profile matching a bundle id; echoes its path.
-          profile_for() {
-            local want="$1" p
-            for p in "$PROFILES"/*.mobileprovision; do
-              [ -e "$p" ] || continue
-              [ "$(profile_bundle_id "$p")" = "$want" ] && { echo "$p"; return 0; }
-            done
-            return 1
-          }
-          # Embed the matching profile and sign a bundle with the profile's entitlements.
-          sign_bundle() {
-            local bundle="$1" bid prof ent
-            bid="$(/usr/libexec/PlistBuddy -c 'Print :CFBundleIdentifier' "$bundle/Info.plist")"
-            prof="$(profile_for "$bid")" || { echo "::error::No provisioning profile for $bid"; exit 1; }
-            ent="$TMP/ent-$bid.plist"
-            security cms -D -i "$prof" -o "$TMP/_p.plist"
-            plutil -extract Entitlements xml1 -o "$ent" "$TMP/_p.plist"
-            cp "$prof" "$bundle/embedded.mobileprovision"
-            echo "Signing $(basename "$bundle") ($bid)"
-            codesign --force --sign "$IDENTITY" --entitlements "$ent" "$bundle"
-          }
-
-          # Sign inside-out: nested code first, then extensions, then the app.
-          if [ -d "$APP/Frameworks" ]; then
-            find "$APP/Frameworks" -maxdepth 1 \( -name '*.framework' -o -name '*.dylib' \) -print0 \
-              | while IFS= read -r -d '' f; do codesign --force --sign "$IDENTITY" "$f"; done
-          fi
-          if [ -d "$APP/PlugIns" ]; then
-            for appex in "$APP/PlugIns"/*.appex; do
-              [ -e "$appex" ] || continue
-              if [ -d "$appex/Frameworks" ]; then
-                find "$appex/Frameworks" -maxdepth 1 \( -name '*.framework' -o -name '*.dylib' \) -print0 \
-                  | while IFS= read -r -d '' f; do codesign --force --sign "$IDENTITY" "$f"; done
-              fi
-              sign_bundle "$appex"
-            done
-          fi
-          sign_bundle "$APP"
-
-          codesign --verify --deep --strict --verbose=2 "$APP"
-
-          # Package into an IPA.
-          rm -rf "$TMP/Payload"; mkdir -p "$TMP/Payload"
-          cp -R "$APP" "$TMP/Payload/"
-          ( cd "$TMP" && zip -qry "$RUNNER_TEMP/Notesnook.ipa" Payload )
-
-          # Fail fast if the App Group didn't make it into the signed app -- its
-          # absence is the launch crash (MMKV nil group path). Never distribute
-          # a build without it.
-          echo "::group::Signed app entitlements"
-          codesign -d --entitlements :- "$APP" 2>/dev/null || true
-          echo "::endgroup::"
-          codesign -d --entitlements :- "$APP" 2>/dev/null | grep -q "group.org.streetwriters.notesnook" \
-            || { echo "::error::Signed app is missing the App Group entitlement; it would crash on launch."; exit 1; }
-          echo "App Group entitlement present."
-
-      - name: Upload signed IPA
-        uses: actions/upload-artifact@v4
-        with:
-          name: ios-preview-ipa
-          path: ${{ runner.temp }}/Notesnook.ipa
-          if-no-files-found: error
-          retention-days: 1
-
-  # Must be Linux: wzieba/Firebase-Distribution-Github-Action is a Docker
-  # container action, which GitHub only supports on Linux runners.
-  distribute:
-    needs: export
-    runs-on: ubuntu-latest
-    timeout-minutes: 20
-
-    steps:
-      - name: Download signed IPA
-        uses: actions/download-artifact@v4
-        with:
-          name: ios-preview-ipa
-          path: ${{ runner.temp }}
-
-      - name: Publish to Firebase
-        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: ${{ runner.temp }}/Notesnook.ipa
-          releaseNotes: Preview for https://github.com/${{ github.repository }}/pull/${{ needs.export.outputs.pr_number }}
-
-      - name: Post or update PR comment
-        uses: actions/github-script@v7
-        env:
-          preview_url: ${{ steps.firebase-output.outputs.TESTING_URI }}
-          PR_NUMBER: ${{ needs.export.outputs.pr_number }}
-          HEAD_SHA: ${{ needs.export.outputs.head_sha }}
-        with:
-          script: |
-            const marker = '<!-- ios-preview-comment -->';
-            const prNumber = Number(process.env.PR_NUMBER);
-            if (!prNumber) return;
-            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.HEAD_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.publish.yml

@@ -9,7 +9,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v3
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
@@ -19,11 +19,6 @@ jobs:
         with:
           xcode-version: "26.1.1"
 
-      - name: Setup iOS Platform
-        run: |
-          xcodebuild -downloadPlatform iOS -exportPath ~/Downloads
-          xcodebuild -importPlatform ~/Downloads/iphonesimulator_26.1_23B86.dmg
-
       - name: Install node modules
         run: |
           npm ci --ignore-scripts --prefer-offline --no-audit
@@ -116,7 +111,6 @@ jobs:
           api-private-key: ${{ secrets.API_KEY }}
 
       - name: Upload Notesnook.ipa to Github
-        continue-on-error: true
         uses: actions/upload-artifact@v4
         with:
           name: Notesnook.zip

.github/workflows/monograph.publish.yml

@@ -22,7 +22,7 @@ jobs:
       id-token: write
     steps:
       - name: Check out the repo
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache

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

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache

.github/workflows/themes.publish.yml

@@ -22,7 +22,7 @@ jobs:
       id-token: write
     steps:
       - name: Check out the repo
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Collect package metadata
         id: package_metadata

.github/workflows/vericrypt.publish.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache

.github/workflows/web.benchmarks.yml

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

@@ -1,80 +0,0 @@
-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@v5
-        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,
-              });
-            }

.github/workflows/web.publish.yml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache

.github/workflows/web.tests.yml

@@ -37,7 +37,7 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
           ref: ${{ github.event.pull_request.head.sha || github.ref }}
 
@@ -66,7 +66,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
           ref: ${{ github.event.pull_request.head.sha || github.ref }}
 

.npmrc

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

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

@@ -17,91 +17,155 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { test, expect } from "@nn/test";
+import { testCleanup, test } from "./test-override.js";
+import { writeFile } from "fs/promises";
+import { Page } from "playwright";
 import { gt, lt } from "semver";
-import { AppModel } from "../../web/__e2e__/models/app.model.js";
+import { describe } from "vitest";
 
-test.extend({ options: { version: "3.0.0" } })(
-  "update starts downloading if version is outdated",
-  async ({ page }) => {
-    await page.waitForSelector(".ProseMirror");
+test("update starts downloading if version is outdated", async ({
+  ctx: { page },
+  expect,
+  onTestFinished
+}) => {
+  onTestFinished(testCleanup);
 
-    await page
-      .locator(".theme-scope-statusBar")
-      .getByRole("button", { name: /updating/i })
-      .waitFor({ state: "attached" });
-  }
-);
+  await page.waitForSelector("#authForm");
+  expect(
+    await page.getByRole("button", { name: "Create account" }).isVisible()
+  ).toBe(true);
 
-test.extend({
-  options: {
-    version: "3.0.0",
-    config: {
-      automaticUpdates: false
-    }
-  }
-})(
-  "update is only shown if version is outdated and auto updates are disabled",
-  async ({ page }) => {
-    await page.waitForSelector(".ProseMirror");
+  await page
+    .getByRole("button", { name: "Skip & go directly to the app" })
+    .click();
 
-    const app = new AppModel(page);
-    const settings = await app.goToSettings();
+  await skipDialog(page);
 
-    await settings.checkForUpdates();
-    await settings.close();
-
-    await page
-      .locator(".theme-scope-statusBar")
-      .getByRole("button", { name: /available/i })
-      .waitFor({ state: "attached" });
-  }
-);
-
-test.extend({
-  options: {
-    version: "3.0.0-beta.0",
-    config: {
-      automaticUpdates: false,
-      releaseTrack: "beta"
-    }
-  }
-})("update to stable if it is newer", async ({ page }) => {
   await page.waitForSelector(".ProseMirror");
 
-  const app = new AppModel(page);
-  const settings = await app.goToSettings();
-
-  await settings.checkForUpdates();
-  await settings.close();
-
-  const updateButton = page
+  await page
     .locator(".theme-scope-statusBar")
-    .getByRole("button", { name: /available/i });
-  await updateButton.waitFor({ state: "visible" });
-  const content = await updateButton.textContent();
-  const version = content?.split(" ")?.[0] || "";
-  expect(gt(version, "3.0.0-beta.0")).toBe(true);
+    .getByRole("button", { name: /updating/i })
+    .waitFor({ state: "attached" });
 });
 
-test.extend({
-  options: {
-    version: "99.0.0-beta.0",
-    config: {
-      automaticUpdates: false,
-      releaseTrack: "beta"
-    }
-  }
-})(
-  "update is not available if it latest stable version is older",
-  async ({ page }) => {
+test("update is only shown if version is outdated and auto updates are disabled", async ({
+  ctx,
+  expect,
+  onTestFinished
+}) => {
+  onTestFinished(testCleanup);
+
+  await ctx.app.close();
+  await writeFile(
+    ctx.configPath,
+    JSON.stringify({
+      automaticUpdates: false
+    })
+  );
+
+  await ctx.relaunch();
+
+  const { page } = ctx;
+
+  await page.waitForSelector("#authForm");
+
+  expect(
+    await page.getByRole("button", { name: "Create account" }).isVisible()
+  ).toBe(true);
+
+  await page
+    .getByRole("button", { name: "Skip & go directly to the app" })
+    .click();
+
+  await skipDialog(page);
+
+  await page.waitForSelector(".ProseMirror");
+
+  await page
+    .locator(".theme-scope-statusBar")
+    .getByRole("button", { name: /available/i })
+    .waitFor({ state: "attached" });
+});
+
+describe("update to stable if it is newer", () => {
+  test.scoped({ options: { version: "3.0.0-beta.0" } });
+  test("test", async ({ ctx, expect, onTestFinished }) => {
+    onTestFinished(testCleanup);
+
+    await ctx.app.close();
+    await writeFile(
+      ctx.configPath,
+      JSON.stringify({
+        automaticUpdates: false,
+        releaseTrack: "beta"
+      })
+    );
+
+    await ctx.relaunch();
+
+    const { page } = ctx;
+
+    await page.waitForSelector("#authForm");
+
+    expect(
+      await page.getByRole("button", { name: "Create account" }).isVisible()
+    ).toBe(true);
+
+    await page
+      .getByRole("button", { name: "Skip & go directly to the app" })
+      .click();
+
+    await skipDialog(page);
+
     await page.waitForSelector(".ProseMirror");
 
-    const app = new AppModel(page);
-    const settings = await app.goToSettings();
+    const updateButton = page
+      .locator(".theme-scope-statusBar")
+      .getByRole("button", { name: /available/i });
+    await updateButton.waitFor({ state: "visible" });
+    const content = await updateButton.textContent();
+    const version = content?.split(" ")?.[0] || "";
+    expect(gt(version, "3.0.0-beta.0")).toBe(true);
+  });
+});
 
-    await settings.checkForUpdates();
-    await settings.close();
+describe("update is not available if it latest stable version is older", () => {
+  test.scoped({ options: { version: "99.0.0-beta.0" } });
+  test("test", async ({ ctx, expect, onTestFinished }) => {
+    onTestFinished(testCleanup);
+
+    await ctx.app.close();
+    await writeFile(
+      ctx.configPath,
+      JSON.stringify({
+        automaticUpdates: false,
+        releaseTrack: "beta"
+      })
+    );
+
+    await ctx.relaunch();
+
+    const { page } = ctx;
+
+    await page.waitForSelector("#authForm");
+
+    expect(
+      await page.getByRole("button", { name: "Create account" }).isVisible()
+    ).toBe(true);
+
+    await page
+      .getByRole("button", { name: "Skip & go directly to the app" })
+      .click();
+
+    await skipDialog(page);
+
+    await page.waitForSelector(".ProseMirror");
+
+    await page
+      .locator(".theme-scope-statusBar")
+      .getByRole("button", { name: /checking for updates/i })
+      .waitFor({ state: "hidden" });
 
     expect(
       await page
@@ -109,24 +173,45 @@ test.extend({
         .getByRole("button", { name: /available/i })
         .isHidden()
     ).toBe(true);
-  }
-);
+  });
+});
+
+describe("downgrade to stable on switching to stable release track", () => {
+  test.scoped({ options: { version: "99.0.0-beta.0" } });
+  test("test", async ({ ctx, expect, onTestFinished }) => {
+    onTestFinished(testCleanup);
+
+    await ctx.app.close();
+    await writeFile(
+      ctx.configPath,
+      JSON.stringify({
+        automaticUpdates: false,
+        releaseTrack: "stable"
+      })
+    );
+
+    await ctx.relaunch();
+
+    const { page } = ctx;
+
+    await page.waitForSelector("#authForm");
+
+    expect(
+      await page.getByRole("button", { name: "Create account" }).isVisible()
+    ).toBe(true);
+
+    await page
+      .getByRole("button", { name: "Skip & go directly to the app" })
+      .click();
+
+    await skipDialog(page);
 
-test.extend({
-  options: {
-    version: "99.0.0-beta.0",
-    config: { automaticUpdates: false, releaseTrack: "stable" }
-  }
-})(
-  "downgrade to stable on switching to stable release track",
-  async ({ page }) => {
     await page.waitForSelector(".ProseMirror");
 
-    const app = new AppModel(page);
-    const settings = await app.goToSettings();
-
-    await settings.checkForUpdates();
-    await settings.close();
+    await page
+      .locator(".theme-scope-statusBar")
+      .getByRole("button", { name: /checking for updates/i })
+      .waitFor({ state: "hidden" });
 
     const updateButton = page
       .locator(".theme-scope-statusBar")
@@ -135,5 +220,23 @@ test.extend({
     const content = await updateButton.textContent();
     const version = content?.split(" ")?.[0] || "";
     expect(lt(version, "99.0.0-beta.0")).toBe(true);
+  });
+});
+
+async function skipDialog(page: Page) {
+  try {
+    const dialog = page.locator(".ReactModal__Content");
+    const positiveButton = dialog.locator(
+      "button[data-role='positive-button']"
+    );
+    const negativeButton = dialog.locator(
+      "button[data-role='negative-button']"
+    );
+    if (await positiveButton.isVisible())
+      await positiveButton.click({ timeout: 1000 });
+    else if (await negativeButton.isVisible())
+      await negativeButton.click({ timeout: 1000 });
+  } catch (e) {
+    // ignore error
   }
-);
+}

apps/desktop/__tests__/electron-test/base-test.ts

@@ -1,63 +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 { mergeTests, test } from "@playwright/test";
-import type { CommonFixtures, CommonWorkerFixtures } from "./common-fixtures";
-import { commonFixtures } from "./common-fixtures";
-import { platformTest } from "./platform-fixtures";
-import { testModeTest } from "./test-mode-fixtures";
-
-export const base = test;
-
-export const baseTest = mergeTests(base, platformTest, testModeTest).extend<
-  CommonFixtures,
-  CommonWorkerFixtures
->(commonFixtures);
-
-export function step<
-  This extends NonNullable<unknown>,
-  Args extends any[],
-  Return
->(
-  target: (this: This, ...args: Args) => Promise<Return>,
-  context: ClassMethodDecoratorContext<
-    This,
-    (this: This, ...args: Args) => Promise<Return>
-  >
-) {
-  function replacementMethod(this: This, ...args: Args): Promise<Return> {
-    const name =
-      this.constructor.name +
-      "." +
-      (context.name as string) +
-      "(" +
-      args.map((a) => JSON.stringify(a)).join(",") +
-      ")";
-    return test.step(name, async () => {
-      return await target.call(this, ...args);
-    });
-  }
-  return replacementMethod;
-}
-
-// declare global {
-//   interface Window {
-//     builtins: Builtins;
-//   }
-// }

apps/desktop/__tests__/electron-test/common-fixtures.ts

@@ -1,347 +0,0 @@
-/* eslint-disable header/header */
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { Fixtures } from "@playwright/test";
-import type { ChildProcess } from "child_process";
-import { execSync, spawn } from "child_process";
-import net from "net";
-import fs from "fs";
-import { stripAnsi } from "./playwright-utils";
-
-type TestChildParams = {
-  command: string[];
-  cwd?: string;
-  env?: NodeJS.ProcessEnv;
-  shell?: boolean;
-  onOutput?: () => void;
-};
-
-import childProcess from "child_process";
-
-type ProcessData = {
-  pid: number; // process ID
-  pgrp: number; // process group ID
-  children: Set<ProcessData>; // direct children of the process
-};
-
-function readAllProcessesLinux(): {
-  pid: number;
-  ppid: number;
-  pgrp: number;
-}[] {
-  const result: { pid: number; ppid: number; pgrp: number }[] = [];
-  for (const dir of fs.readdirSync("/proc")) {
-    const pid = +dir;
-    if (isNaN(pid)) continue;
-    try {
-      const statFile = fs.readFileSync(`/proc/${pid}/stat`, "utf8");
-      // Format of /proc/*/stat is described https://man7.org/linux/man-pages/man5/proc.5.html
-      const match = statFile.match(
-        /^(?<pid>\d+)\s+\((?<comm>.*)\)\s+(?<state>R|S|D|Z|T|t|W|X|x|K|W|P)\s+(?<ppid>\d+)\s+(?<pgrp>\d+)/
-      );
-      if (match && match.groups) {
-        result.push({
-          pid: +match.groups.pid,
-          ppid: +match.groups.ppid,
-          pgrp: +match.groups.pgrp
-        });
-      }
-    } catch (e) {
-      // We don't have access to some /proc/<pid>/stat file.
-    }
-  }
-  return result;
-}
-
-function readAllProcessesMacOS(): {
-  pid: number;
-  ppid: number;
-  pgrp: number;
-}[] {
-  const result: { pid: number; ppid: number; pgrp: number }[] = [];
-  const processTree = childProcess.spawnSync("ps", ["-eo", "pid,pgid,ppid"]);
-  const lines = processTree.stdout.toString().trim().split("\n");
-  for (const line of lines) {
-    const [pid, pgrp, ppid] = line
-      .trim()
-      .split(/\s+/)
-      .map((token) => +token);
-    // On linux, the very first line of `ps` is the header with "PID PGID PPID".
-    if (isNaN(pid) || isNaN(pgrp) || isNaN(ppid)) continue;
-    result.push({ pid, ppid, pgrp });
-  }
-  return result;
-}
-
-function buildProcessTreePosix(pid: number): ProcessData | undefined {
-  // Certain Linux distributions might not have `ps` installed.
-  const allProcesses =
-    process.platform === "darwin"
-      ? readAllProcessesMacOS()
-      : readAllProcessesLinux();
-  const pidToProcess = new Map<number, ProcessData>();
-  for (const { pid, pgrp } of allProcesses)
-    pidToProcess.set(pid, { pid, pgrp, children: new Set() });
-  for (const { pid, ppid } of allProcesses) {
-    const parent = pidToProcess.get(ppid);
-    const child = pidToProcess.get(pid);
-    // On POSIX, certain processes might not have parent (e.g. PID=1 and occasionally PID=2)
-    // or we might not have access to it proc info.
-    if (parent && child) parent.children.add(child);
-  }
-  return pidToProcess.get(pid);
-}
-
-export class TestChildProcess {
-  params: TestChildParams;
-  process: ChildProcess;
-  output = "";
-  stdout = "";
-  stderr = "";
-  fullOutput = "";
-  onOutput?: (chunk: string | Buffer) => void;
-  exited: Promise<{ exitCode: number | null; signal: string | null }>;
-  exitCode: Promise<number | null>;
-
-  private _outputCallbacks = new Set<() => void>();
-
-  constructor(params: TestChildParams) {
-    this.params = params;
-    // See https://nodejs.org/api/deprecations.html#DEP0190
-    const command = params.shell ? params.command.join(" ") : params.command[0];
-    const args = params.shell ? [] : params.command.slice(1);
-    this.process = spawn(command, args, {
-      env: {
-        ...process.env,
-        ...params.env
-      },
-      cwd: params.cwd,
-      shell: params.shell,
-      // On non-windows platforms, `detached: true` makes child process a leader of a new
-      // process group, making it possible to kill child process tree with `.kill(-pid)` command.
-      // @see https://nodejs.org/api/child_process.html#child_process_options_detached
-      detached: process.platform !== "win32"
-    });
-    if (process.env.PWTEST_DEBUG)
-      process.stdout.write(`\n\nLaunching ${params.command.join(" ")}\n`);
-    this.onOutput = params.onOutput;
-
-    const appendChunk = (type: "stdout" | "stderr", chunk: string | Buffer) => {
-      this.output += String(chunk);
-      if (type === "stderr") this.stderr += String(chunk);
-      else this.stdout += String(chunk);
-      if (process.env.PWTEST_DEBUG) process.stdout.write(String(chunk));
-      else this.fullOutput += String(chunk);
-      this.onOutput?.(chunk);
-      for (const cb of this._outputCallbacks) cb();
-      this._outputCallbacks.clear();
-    };
-
-    this.process.stderr!.on("data", appendChunk.bind(null, "stderr"));
-    this.process.stdout!.on("data", appendChunk.bind(null, "stdout"));
-
-    const killProcessGroup = this._killProcessTree.bind(this, "SIGKILL");
-    process.on("exit", killProcessGroup);
-    this.exited = new Promise((f) => {
-      this.process.on("exit", (exitCode, signal) => f({ exitCode, signal }));
-      process.off("exit", killProcessGroup);
-    });
-    this.exitCode = this.exited.then((r) => r.exitCode);
-  }
-
-  outputLines(): string[] {
-    const strippedOutput = stripAnsi(this.output);
-    return strippedOutput
-      .split("\n")
-      .filter((line) => line.startsWith("%%"))
-      .map((line) => line.substring(2).trim());
-  }
-
-  async kill(signal: "SIGINT" | "SIGKILL" = "SIGKILL") {
-    this._killProcessTree(signal);
-    return this.exited;
-  }
-
-  private _killProcessTree(signal: "SIGINT" | "SIGKILL") {
-    if (!this.process.pid || !this.process.kill(0)) return;
-    killProcessGroup(this.process.pid, signal);
-  }
-
-  async cleanExit() {
-    const r = await this.exited;
-    if (r.exitCode)
-      throw new Error(
-        `Process failed with exit code ${r.exitCode}. Output:\n${this.output}`
-      );
-    if (r.signal)
-      throw new Error(
-        `Process received signal: ${r.signal}. Output:\n${this.output}`
-      );
-  }
-
-  async waitForOutput(substring: string, count = 1) {
-    while (countTimes(stripAnsi(this.output), substring) < count)
-      await new Promise<void>((f) => this._outputCallbacks.add(f));
-  }
-
-  clearOutput() {
-    this.output = "";
-  }
-
-  write(chars: string) {
-    this.process.stdin!.write(chars);
-  }
-}
-
-export function killProcessGroup(
-  pid: number,
-  signal: "SIGINT" | "SIGKILL" = "SIGKILL"
-) {
-  // On Windows, we always call `taskkill` no matter signal.
-  if (process.platform === "win32") {
-    try {
-      execSync(`taskkill /pid ${pid} /T /F /FI "MEMUSAGE gt 0"`, {
-        stdio: "ignore"
-      });
-    } catch (e) {
-      // the process might have already stopped
-    }
-    return;
-  }
-
-  // In case of POSIX and `SIGINT` signal, send it to the main process group only.
-  if (signal === "SIGINT") {
-    try {
-      process.kill(-pid, "SIGINT");
-    } catch (e) {
-      // the process might have already stopped
-    }
-    return;
-  }
-
-  // In case of POSIX and `SIGKILL` signal, we should send it to all descendant process groups.
-  const rootProcess = buildProcessTreePosix(pid);
-  if (!rootProcess) return;
-
-  const descendantProcessGroups = (function flatten(
-    processData: ProcessData,
-    result: Set<number> = new Set()
-  ) {
-    // Process can nullify its own process group with `setpgid`. Use its PID instead.
-    result.add(processData.pgrp || processData.pid);
-    processData.children.forEach((child) => flatten(child, result));
-    return result;
-  })(rootProcess);
-  for (const pgrp of descendantProcessGroups) {
-    try {
-      process.kill(-pgrp, "SIGKILL");
-    } catch (e) {
-      // the process might have already stopped
-    }
-  }
-}
-
-export type CommonFixtures = {
-  childProcess: (params: TestChildParams) => TestChildProcess;
-  waitForPort: (port: number) => Promise<void>;
-  findFreePort: () => Promise<number>;
-};
-
-export type CommonWorkerFixtures = {
-  daemonProcess: (params: TestChildParams) => TestChildProcess;
-};
-
-export const commonFixtures: Fixtures<CommonFixtures, CommonWorkerFixtures> = {
-  childProcess: async ({}, use, testInfo) => {
-    const processes: TestChildProcess[] = [];
-    await use((params) => {
-      const process = new TestChildProcess(params);
-      processes.push(process);
-      return process;
-    });
-    await Promise.all(processes.map(async (child) => child.kill()));
-    if (
-      testInfo.status !== "passed" &&
-      testInfo.status !== "skipped" &&
-      !process.env.PWTEST_DEBUG
-    ) {
-      for (const process of processes) {
-        console.log("====== " + process.params.command.join(" "));
-        console.log(process.fullOutput.replace(/\x1Bc/g, ""));
-        console.log("=========================================");
-      }
-    }
-  },
-
-  daemonProcess: [
-    async ({}, use) => {
-      const processes: TestChildProcess[] = [];
-      await use((params) => {
-        const process = new TestChildProcess(params);
-        processes.push(process);
-        return process;
-      });
-      await Promise.all(processes.map((child) => child.kill("SIGINT")));
-    },
-    { scope: "worker" }
-  ],
-
-  waitForPort: async ({}, use) => {
-    const token = { canceled: false };
-    await use(async (port) => {
-      while (!token.canceled) {
-        const promise = new Promise<boolean>((resolve) => {
-          const conn = net
-            .connect(port, "127.0.0.1")
-            .on("error", () => resolve(false))
-            .on("connect", () => {
-              conn.end();
-              resolve(true);
-            });
-        });
-        if (await promise) return;
-        await new Promise((x) => setTimeout(x, 100));
-      }
-    });
-    token.canceled = true;
-  },
-
-  findFreePort: async ({}, use) => {
-    await use(async () => {
-      return new Promise((resolve, reject) => {
-        const server = net.createServer();
-        server.listen(0, "127.0.0.1", () => {
-          const { port } = server.address() as net.AddressInfo;
-          server.close(() => resolve(port));
-        });
-        server.on("error", reject);
-      });
-    });
-  }
-};
-
-export function countTimes(s: string, sub: string): number {
-  let result = 0;
-  for (let index = 0; index !== -1; ) {
-    index = s.indexOf(sub, index);
-    if (index !== -1) {
-      result++;
-      index += sub.length;
-    }
-  }
-  return result;
-}

apps/desktop/__tests__/electron-test/index.ts

@@ -1,152 +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/>.
-*/
-/* eslint-disable no-empty-pattern */
-
-import { AppContext, buildAndLaunchApp, TestOptions } from "./utils";
-import path from "path";
-import { version } from "../../package.json";
-import type { ElectronApplication, Page } from "@playwright/test";
-import type { TraceViewerFixtures } from "./trace-viewer-fixtures";
-import { traceViewerFixtures } from "./trace-viewer-fixtures";
-import { PageTestFixtures, PageWorkerFixtures } from "./page-test-api";
-import fs from "fs";
-import { tmpdir } from "os";
-import { baseTest } from "./base-test";
-
-export type ElectronTestFixtures = PageTestFixtures & {
-  electronApp: ElectronApplication;
-  launchElectronApp: (options?: TestOptions) => Promise<ElectronApplication>;
-  createUserDataDir: () => Promise<string>;
-  options: TestOptions;
-  newPage: () => Promise<Page>;
-};
-
-export type { Page, Browser } from "@playwright/test";
-export { expect } from "@playwright/test";
-export const test = baseTest
-  .extend<TraceViewerFixtures>(traceViewerFixtures)
-  .extend<ElectronTestFixtures, PageWorkerFixtures>({
-    browserVersion: [
-      ({}, use) => use(process.env.ELECTRON_CHROMIUM_VERSION!),
-      { scope: "worker" }
-    ],
-    browserMajorVersion: [
-      ({}, use) =>
-        use(Number(process.env.ELECTRON_CHROMIUM_VERSION!.split(".")[0])),
-      { scope: "worker" }
-    ],
-    electronMajorVersion: [
-      ({}, use) =>
-        use(
-          parseInt(require("electron/package.json").version.split(".")[0], 10)
-        ),
-      { scope: "worker" }
-    ],
-    isBidi: [false, { scope: "worker" }],
-    isAndroid: [false, { scope: "worker" }],
-    isElectron: [true, { scope: "worker" }],
-    isHeadlessShell: [false, { scope: "worker" }],
-    isFrozenWebkit: [false, { scope: "worker" }],
-
-    createUserDataDir: async ({}, run) => {
-      const dirs: string[] = [];
-      // We do not put user data dir in testOutputPath,
-      // because we do not want to upload them as test result artifacts.
-      await run(async () => {
-        const dir = await fs.promises.mkdtemp(
-          path.join(tmpdir(), "playwright-test-")
-        );
-        dirs.push(dir);
-        return dir;
-      });
-      await removeFolders(dirs);
-    },
-
-    launchElectronApp: async ({ createUserDataDir }, use) => {
-      // This env prevents 'Electron Security Policy' console message.
-      process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";
-      const apps: AppContext[] = [];
-      await use(async (options?: TestOptions) => {
-        const userDataDir = await createUserDataDir();
-        const ctx = await buildAndLaunchApp(
-          userDataDir,
-          options || {
-            version,
-            config: {}
-          }
-        );
-        apps.push(ctx);
-        return ctx.app;
-      });
-      for (const ctx of apps) {
-        await ctx.app.close();
-      }
-      await removeFolders(apps.map((ctx) => ctx.outputDir));
-    },
-
-    electronApp: async ({ launchElectronApp, options }, use) => {
-      await use(await launchElectronApp(options));
-    },
-
-    page: async ({ electronApp, viewport }, run) => {
-      const page = await electronApp.firstWindow();
-      if (viewport) {
-        await page.setViewportSize(viewport);
-        await electronApp.evaluate((p, viewport) => {
-          const mainWindow = p.BrowserWindow.getAllWindows()[0];
-          mainWindow.setSize(viewport.width, viewport.height);
-        }, viewport);
-      }
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      page.context().app = electronApp;
-      await run(page);
-    },
-
-    context: async ({ electronApp }, run) => {
-      await run(electronApp.context());
-    },
-
-    newPage: async ({ launchElectronApp, options }, use) => {
-      await use(async () => {
-        const app = await launchElectronApp(options);
-        return app.firstWindow();
-      });
-    },
-
-    options: async ({}, use) => {
-      await use({
-        version,
-        config: {}
-      });
-    }
-  });
-
-async function removeFolders(folders: string[]) {
-  await Promise.all(
-    folders.map((folder) =>
-      fs.promises.rm(folder, {
-        force: true,
-        recursive: true,
-        maxRetries: 3,
-        retryDelay: 5000
-      })
-    )
-  );
-}

apps/desktop/__tests__/electron-test/page-test-api.ts

@@ -1,58 +0,0 @@
-/* eslint-disable header/header */
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { Browser, Page, ViewportSize } from "playwright-core";
-import type {
-  PageScreenshotOptions,
-  ScreenshotMode,
-  VideoMode
-} from "@playwright/test";
-export { expect } from "@playwright/test";
-
-// Page test does not guarantee an isolated context, just a new page (because Android).
-export type PageTestFixtures = {
-  page: Page;
-};
-
-export type PageWorkerFixtures = {
-  headless: boolean;
-  channel: string | undefined;
-  screenshot:
-    | ScreenshotMode
-    | ({ mode: ScreenshotMode } & Pick<
-        PageScreenshotOptions,
-        "fullPage" | "omitBackground"
-      >);
-  trace:
-    | "off"
-    | "on"
-    | "retain-on-failure"
-    | "on-first-retry"
-    | "retain-on-first-failure"
-    | "on-all-retries"
-    | /** deprecated */ "retry-with-trace";
-  video: VideoMode | { mode: VideoMode; size: ViewportSize };
-  browserName: "chromium" | "firefox" | "webkit";
-  browserVersion: string;
-  browserMajorVersion: number;
-  electronMajorVersion: number;
-  isBidi: boolean;
-  isAndroid: boolean;
-  isElectron: boolean;
-  isHeadlessShell: boolean;
-  isFrozenWebkit: boolean;
-};

apps/desktop/__tests__/electron-test/platform-fixtures.ts

@@ -1,47 +0,0 @@
-/* eslint-disable header/header */
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { test } from "@playwright/test";
-import os from "os";
-
-export type PlatformWorkerFixtures = {
-  platform: "win32" | "darwin" | "linux";
-  isWindows: boolean;
-  isMac: boolean;
-  isLinux: boolean;
-  macVersion: number; // major only, 11 or later, zero if not mac
-};
-
-function platform(): "win32" | "darwin" | "linux" {
-  if (process.env.PLAYWRIGHT_SERVICE_OS === "linux") return "linux";
-  if (process.env.PLAYWRIGHT_SERVICE_OS === "windows") return "win32";
-  if (process.env.PLAYWRIGHT_SERVICE_OS === "macos") return "darwin";
-  return process.platform as "win32" | "darwin" | "linux";
-}
-
-function macVersion() {
-  if (process.platform !== "darwin") return 0;
-  return +os.release().split(".")[0] - 9;
-}
-
-export const platformTest = test.extend<{}, PlatformWorkerFixtures>({
-  platform: [platform(), { scope: "worker" }],
-  isWindows: [platform() === "win32", { scope: "worker" }],
-  isMac: [platform() === "darwin", { scope: "worker" }],
-  isLinux: [platform() === "linux", { scope: "worker" }],
-  macVersion: [macVersion(), { scope: "worker" }]
-});

apps/desktop/__tests__/electron-test/playwright-utils.ts

@@ -1,26 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-const ansiRegex = new RegExp(
-  "[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:[a-zA-Z\\d]*(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)|(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-ntqry=><~]))",
-  "g"
-);
-export function stripAnsi(str: string): string {
-  return str.replace(ansiRegex, "");
-}

apps/desktop/__tests__/electron-test/test-mode-fixtures.ts

@@ -1,75 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import { test } from "@playwright/test";
-import type { TestModeName } from "./test-mode";
-import { DefaultTestMode, DriverTestMode } from "./test-mode";
-
-export type TestModeWorkerOptions = {
-  mode: TestModeName;
-};
-
-export type TestModeTestFixtures = {
-  toImpl: (rpcObject?: any) => any;
-};
-
-export type TestModeWorkerFixtures = {
-  toImplInWorkerScope: (rpcObject?: any) => any;
-  playwright: typeof import("@playwright/test");
-};
-
-export const testModeTest = test.extend<
-  TestModeTestFixtures,
-  TestModeWorkerOptions & TestModeWorkerFixtures
->({
-  mode: ["default", { scope: "worker", option: true }],
-  playwright: [
-    async ({ mode }, run) => {
-      const testMode = {
-        default: new DefaultTestMode(),
-        service: new DefaultTestMode(),
-        service2: new DefaultTestMode(),
-        "service-grid": new DefaultTestMode(),
-        wsl: new DefaultTestMode(),
-        driver: new DriverTestMode()
-      }[mode];
-      const playwright = await testMode.setup();
-      await run(playwright);
-      await testMode.teardown();
-    },
-    { scope: "worker" }
-  ],
-
-  toImplInWorkerScope: [
-    async ({ playwright }, use) => {
-      await use((playwright as any)._connection.toImpl);
-    },
-    { scope: "worker" }
-  ],
-
-  toImpl: async (
-    { toImplInWorkerScope: toImplWorker, mode },
-    use,
-    testInfo
-  ) => {
-    if (mode !== "default" || process.env.PW_TEST_REUSE_CONTEXT)
-      testInfo.skip();
-    await use(toImplWorker);
-  }
-});

apps/desktop/__tests__/electron-test/test-mode.ts

@@ -1,52 +0,0 @@
-/* eslint-disable header/header */
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-/// @ts-ignore
-import { oop, client } from "playwright-core/lib/coreBundle";
-
-export type TestModeName = "default" | "driver";
-
-const { start } = oop;
-
-interface TestMode {
-  setup(): Promise<client.Playwright>;
-  teardown(): Promise<void>;
-}
-
-export class DriverTestMode implements TestMode {
-  private _impl: { playwright: client.Playwright; stop: () => Promise<void> };
-
-  async setup() {
-    this._impl = await start({
-      NODE_OPTIONS: undefined // Hide driver process while debugging.
-    });
-    return this._impl.playwright;
-  }
-
-  async teardown() {
-    await this._impl.stop();
-  }
-}
-
-export class DefaultTestMode implements TestMode {
-  async setup() {
-    return require("playwright-core");
-  }
-
-  async teardown() {}
-}

apps/desktop/__tests__/electron-test/trace-viewer-fixtures.ts

@@ -1,243 +0,0 @@
-/* eslint-disable header/header */
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type {
-  Fixtures,
-  FrameLocator,
-  Locator,
-  Page,
-  Browser,
-  BrowserContext
-} from "@playwright/test";
-import { step } from "./base-test";
-import path from "path";
-import { CommonFixtures, TestChildProcess } from "./common-fixtures";
-
-type BaseTestFixtures = CommonFixtures & {
-  context: BrowserContext;
-};
-
-type BaseWorkerFixtures = {
-  headless: boolean;
-  browser: Browser;
-  browserName: "chromium" | "firefox" | "webkit";
-  playwright: typeof import("@playwright/test");
-};
-
-export type TraceViewerFixtures = {
-  showTraceViewer: (
-    trace: string | undefined,
-    options?: { host?: string; port?: number; stdin?: boolean }
-  ) => Promise<TraceViewerPage>;
-  runAndTrace: (
-    body: () => Promise<void>,
-    optsOverrides?: Parameters<BrowserContext["tracing"]["start"]>[0]
-  ) => Promise<TraceViewerPage>;
-};
-
-class TraceViewerPage {
-  actionTitles: Locator;
-  actionsTree: Locator;
-  callLines: Locator;
-  consoleLines: Locator;
-  logLines: Locator;
-  errorMessages: Locator;
-  consoleLineMessages: Locator;
-  consoleStacks: Locator;
-  networkRequests: Locator;
-  metadataTab: Locator;
-  snapshotContainer: Locator;
-  sourceCodeTab: Locator;
-  networkTab: Locator;
-
-  settingsDialog: Locator;
-  themeSetting: Locator;
-  displayCanvasContentSetting: Locator;
-
-  constructor(public page: Page, public process: TestChildProcess) {
-    this.actionTitles = page.locator(".action-title");
-    this.actionsTree = page.getByTestId("actions-tree");
-    this.callLines = page.locator(".call-tab .call-line");
-    this.logLines = page
-      .getByRole("list", { name: "Log entries" })
-      .getByRole("listitem");
-    this.consoleLines = page
-      .getByRole("tabpanel", { name: "Console" })
-      .getByRole("listitem");
-    this.consoleLineMessages = page.locator(".console-line-message");
-    this.errorMessages = page.locator(".error-message");
-    this.consoleStacks = page.locator(".console-stack");
-    this.networkRequests = page
-      .getByRole("list", { name: "Network requests" })
-      .getByRole("listitem");
-    this.snapshotContainer = page.locator(
-      ".snapshot-container iframe.snapshot-visible[name=snapshot]"
-    );
-    this.metadataTab = page.getByRole("tabpanel", { name: "Metadata" });
-    this.sourceCodeTab = page.getByRole("tabpanel", { name: "Source" });
-    this.networkTab = page.getByRole("tabpanel", { name: "Network" });
-
-    this.settingsDialog = page.getByTestId("settings-toolbar-dialog");
-    this.themeSetting = this.settingsDialog.getByRole("combobox", {
-      name: "Theme"
-    });
-    this.displayCanvasContentSetting = page
-      .locator(".setting")
-      .getByText("Display canvas content");
-  }
-
-  @step
-  async showAllActions() {
-    await this.page.getByRole("button", { name: "Filter actions" }).click();
-    await this.page.locator(".setting").getByText("Network routes").click();
-    await this.page.locator(".setting").getByText("Getters").click();
-    await this.page.locator(".setting").getByText("Configuration").click();
-    await this.page.getByRole("button", { name: "Filter actions" }).click();
-  }
-
-  stackFrames(options: { selected?: boolean } = {}) {
-    const entry = this.page
-      .getByRole("list", { name: "Stack trace" })
-      .getByRole("listitem");
-    if (options.selected) return entry.locator(":scope.selected");
-    return entry;
-  }
-
-  actionIconsText(action: string) {
-    const entry = this.actionsTree.getByRole("treeitem", { name: action });
-    return entry.locator(".action-icon-value").filter({ visible: true });
-  }
-
-  actionIcons(action: string) {
-    return this.actionsTree
-      .getByRole("treeitem", { name: action })
-      .locator(".action-icons")
-      .filter({ visible: true });
-  }
-
-  @step
-  async expandAction(title: string) {
-    await this.actionsTree
-      .getByRole("treeitem", { name: title })
-      .locator(".codicon-chevron-right")
-      .click();
-  }
-
-  @step
-  async selectAction(title: string, ordinal: number = 0) {
-    await this.actionsTree.getByTitle(title).nth(ordinal).click();
-  }
-
-  @step
-  async hoverAction(title: string, ordinal: number = 0) {
-    await this.actionsTree
-      .getByRole("treeitem", { name: title })
-      .nth(ordinal)
-      .hover();
-  }
-
-  @step
-  async selectSnapshot(name: string) {
-    await this.page.getByRole("tab", { name }).click();
-  }
-
-  async showErrorsTab() {
-    await this.page.getByRole("tab", { name: "Errors" }).click();
-  }
-
-  async showConsoleTab() {
-    await this.page.getByRole("tab", { name: "Console" }).click();
-  }
-
-  async showSourceTab() {
-    await this.page.getByRole("tab", { name: "Source" }).click();
-  }
-
-  async showNetworkTab() {
-    await this.page.getByRole("tab", { name: "Network" }).click();
-  }
-
-  async showMetadataTab() {
-    await this.page.getByRole("tab", { name: "Metadata" }).click();
-  }
-
-  async showSettings() {
-    await this.page.getByRole("button", { name: "Settings" }).click();
-  }
-
-  @step
-  async snapshotFrame(
-    actionName: string,
-    ordinal: number = 0,
-    hasSubframe: boolean = false
-  ): Promise<FrameLocator> {
-    await this.selectAction(actionName, ordinal);
-    while (this.page.frames().length < (hasSubframe ? 4 : 3))
-      await this.page.waitForEvent("frameattached");
-    return this.page.frameLocator("iframe.snapshot-visible[name=snapshot]");
-  }
-}
-
-export const traceViewerFixtures: Fixtures<
-  TraceViewerFixtures,
-  {},
-  BaseTestFixtures,
-  BaseWorkerFixtures
-> = {
-  showTraceViewer: async ({ playwright, childProcess, browserName }, use) => {
-    const browsers: Browser[] = [];
-    await use(async (trace: string | undefined, { host, port, stdin } = {}) => {
-      const command = [
-        "node",
-        path.join(__dirname, "../../node_modules/playwright-core/cli.js"),
-        "show-trace",
-        "--port",
-        "" + (port ?? "0")
-      ];
-      if (host) command.push("--host", host);
-      if (stdin) command.push("--stdin");
-      if (trace) command.push(trace);
-      const cp = childProcess({ command });
-      await cp.waitForOutput("Listening on");
-      const browser = await playwright.chromium.launch({
-        ...(browserName === "chromium" ? {} : { channel: "chromium" }),
-        executablePath: process.env.CRPATH // without this, setting FFPATH makes us launch Firefox with Chromium args
-      });
-      browsers.push(browser);
-      const page = await browser.newPage();
-      const url = cp.output.match(/Listening on (http:\/\/[^\s]+)/)![1];
-      await page.goto(url);
-      return new TraceViewerPage(page, cp);
-    });
-    for (const browser of browsers) await browser.close();
-  },
-
-  runAndTrace: async ({ context, showTraceViewer }, use, testInfo) => {
-    await use(async (body: () => Promise<void>, optsOverrides = {}) => {
-      const traceFile = testInfo.outputPath("trace.zip");
-      await context.tracing.start({
-        snapshots: true,
-        screenshots: true,
-        sources: true,
-        ...optsOverrides
-      });
-      await body();
-      await context.tracing.stop({ path: traceFile });
-      return showTraceViewer(traceFile);
-    });
-  }
-};

apps/desktop/__tests__/global-setup.ts

@@ -19,7 +19,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { buildApp } from "./utils";
 
-export default async function globalSetup() {
-  console.log("Building the app...");
+export default async function setup() {
   await buildApp();
 }

apps/desktop/__tests__/launch.test.ts

@@ -17,65 +17,24 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { test, expect } from "@nn/test";
-import type { ElectronApplication } from "@playwright/test";
+import { testCleanup, test } from "./test-override.js";
 
-async function getMainWindowState(app: ElectronApplication) {
-  return await app.evaluate((window) => {
-    const { BrowserWindow } = window;
-    const mainWindow = BrowserWindow.getAllWindows()[0];
-    if (!mainWindow) throw new Error("Main window not found");
-    return {
-      isMinimized: mainWindow.isMinimized(),
-      isVisible: mainWindow.isVisible()
-    };
-  });
-}
-
-test("make sure app loads", async ({ page }) => {
-  await page.waitForSelector(".ProseMirror");
-});
-
-test("hidden launch minimizes when tray is disabled", async ({
-  launchElectronApp,
-  options
+test("make sure app loads", async ({
+  ctx: { page },
+  expect,
+  onTestFinished
 }) => {
-  const app = await launchElectronApp({
-    version: options.version,
-    args: ["--hidden"],
-    config: {
-      desktopSettings: {
-        minimizeToSystemTray: false,
-        closeToSystemTray: false
-      }
-    }
-  });
+  onTestFinished(testCleanup);
+
+  await page.waitForSelector("#authForm");
+
+  expect(
+    await page.getByRole("button", { name: "Create account" }).isVisible()
+  ).toBe(true);
+
+  await page
+    .getByRole("button", { name: "Skip & go directly to the app" })
+    .click();
 
-  const page = await app.firstWindow();
   await page.waitForSelector(".ProseMirror");
-
-  const state = await getMainWindowState(app);
-  expect(state.isMinimized).toBe(true);
-});
-
-test("hidden launch does not minimize when close-to-tray is enabled", async ({
-  launchElectronApp,
-  options
-}) => {
-  const app = await launchElectronApp({
-    version: options.version,
-    args: ["--hidden"],
-    config: {
-      desktopSettings: {
-        minimizeToSystemTray: false,
-        closeToSystemTray: true
-      }
-    }
-  });
-
-  const page = await app.firstWindow();
-  await page.waitForSelector(".ProseMirror");
-
-  const state = await getMainWindowState(app);
-  expect(state.isMinimized).toBe(false);
 });

apps/desktop/__tests__/test-override.ts

@@ -0,0 +1,64 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { test as vitestTest, TestContext } from "vitest";
+import { buildAndLaunchApp, Fixtures, TestOptions } from "./utils";
+import { mkdir, rm } from "fs/promises";
+import path from "path";
+import slugify from "slugify";
+
+export const test = vitestTest.extend<Fixtures>({
+  options: { version: "3.0.0" } as TestOptions,
+  ctx: async ({ options }, use) => {
+    const ctx = await buildAndLaunchApp(options);
+    await use(ctx);
+  }
+});
+
+export async function testCleanup(context: TestContext) {
+  const ctx = (context.task.context as unknown as Fixtures).ctx;
+  if (context.task.result?.state === "fail") {
+    await mkdir("test-results", { recursive: true });
+    await ctx.page.screenshot({
+      path: path.join(
+        "test-results",
+        `${slugify(context.task.name)}-${process.platform}-${
+          process.arch
+        }-error.png`
+      )
+    });
+  }
+  await ctx.app.close();
+  await rm(ctx.userDataDir, {
+    force: true,
+    recursive: true,
+    maxRetries: 3,
+    retryDelay: 5000
+  }).catch(() => {
+    /*ignore */
+  });
+  await rm(ctx.outputDir, {
+    force: true,
+    recursive: true,
+    maxRetries: 3,
+    retryDelay: 5000
+  }).catch(() => {
+    /*ignore */
+  });
+}

apps/desktop/__tests__/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "noEmit": true,
-    "lib": ["ESNext"],
-    "moduleResolution": "Bundler",
-    "paths": {
-      "@nn/test": ["./electron-test/index.ts"]
-    }
-  }
-}

apps/desktop/__tests__/utils.ts

@@ -19,22 +19,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { execSync } from "child_process";
 import { cp } from "fs/promises";
+import { fileURLToPath } from "node:url";
 import path, { join, resolve } from "path";
-import {
-  _electron as electron,
-  ElectronApplication,
-  Page
-} from "@playwright/test";
+import { _electron as electron } from "playwright";
 import { existsSync } from "fs";
-import { mkdir, writeFile } from "node:fs/promises";
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 const IS_DEBUG = process.env.NN_DEBUG === "true" || process.env.CI === "true";
 const productName = `NotesnookTestHarness`;
-const root = path.resolve(__dirname, "..", "..");
-const SOURCE_DIR = resolve(root, "output", productName);
+const SOURCE_DIR = resolve("output", productName);
 
 export interface AppContext {
-  app: ElectronApplication;
+  app: import("playwright").ElectronApplication;
+  page: import("playwright").Page;
+  configPath: string;
   userDataDir: string;
   outputDir: string;
   relaunch: () => Promise<void>;
@@ -42,8 +41,6 @@ export interface AppContext {
 
 export interface TestOptions {
   version: string;
-  args?: string[];
-  config?: Record<string, unknown>;
 }
 
 export interface Fixtures {
@@ -52,43 +49,35 @@ export interface Fixtures {
 }
 
 export async function buildAndLaunchApp(
-  userDataDir: string,
   options?: TestOptions
 ): Promise<AppContext> {
-  await buildApp(options?.version);
-
   const productName = `notesnooktest${makeid(10)}`;
-  const outputDir = path.join(root, "test-artifacts", `${productName}-output`);
+  const outputDir = path.join("test-artifacts", `${productName}-output`);
   const executablePath = await copyBuild({
     ...options,
     outputDir
   });
-
-  const configPath = path.join(userDataDir, "UserData", "config.json");
-  if (options?.config) {
-    await mkdir(path.dirname(configPath), { recursive: true });
-    await writeFile(configPath, JSON.stringify(options.config));
-  }
-
-  const { app } = await launchApp(
+  const { app, page, configPath, userDataDir } = await launchApp(
     executablePath,
-    userDataDir,
-    options?.version,
-    options?.args
+    productName,
+    options?.version
   );
   const ctx: AppContext = {
     app,
+    page,
+    configPath,
     userDataDir,
     outputDir,
     relaunch: async () => {
-      const { app } = await launchApp(
+      const { app, page, configPath, userDataDir } = await launchApp(
         executablePath,
-        userDataDir,
-        options?.version,
-        options?.args
+        productName,
+        options?.version
       );
       ctx.app = app;
+      ctx.page = page;
       ctx.userDataDir = userDataDir;
+      ctx.configPath = configPath;
     }
   };
   return ctx;
@@ -96,15 +85,19 @@ export async function buildAndLaunchApp(
 
 async function launchApp(
   executablePath: string,
-  userDataDir: string,
-  version?: string,
-  args: string[] = []
+  packageName: string,
+  version?: string
 ) {
+  const userDataDir = resolve(
+    __dirname,
+    "..",
+    "test-artifacts",
+    "user_data_dirs",
+    packageName
+  );
   const app = await electron.launch({
     executablePath,
-    args: IS_DEBUG ? [...args] : ["--hidden", ...args],
-    baseURL: "https://app.notesnook.com",
-    acceptDownloads: true,
+    args: IS_DEBUG ? [] : ["--hidden"],
     env: {
       ...(process.platform === "linux"
         ? {
@@ -121,28 +114,20 @@ async function launchApp(
     }
   });
 
+  const page = await app.firstWindow();
+
+  const configPath = path.join(userDataDir, "UserData", "config.json");
   return {
     app,
+    page,
+    configPath,
     userDataDir
   };
 }
 
-export function getAppFromPage(page: Page) {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  return page.context().app as ElectronApplication;
-}
-
 let MAX_RETRIES = 3;
 export async function buildApp(version?: string) {
   if (!existsSync(SOURCE_DIR)) {
-    execSync(
-      `node ${path.join(root, "scripts", "build.mjs")} --test --rebuild`,
-      {
-        stdio: IS_DEBUG ? "inherit" : "ignore"
-      }
-    );
-
     const args = [
       "electron-builder",
       "--dir",
@@ -158,7 +143,6 @@ export async function buildApp(version?: string) {
         stdio: IS_DEBUG ? "inherit" : "ignore",
         env: {
           ...process.env,
-          CSC_IDENTITY_AUTO_DISCOVERY: "false",
           NOTESNOOK_STAGING: "true",
           NN_PRODUCT_NAME: productName,
           NN_APP_ID: `com.notesnook.test.${productName}`,
@@ -167,7 +151,7 @@ export async function buildApp(version?: string) {
       });
     } catch (e) {
       if (--MAX_RETRIES) {
-        console.log("retrying...", e);
+        console.log("retrying...");
         return await buildApp(version);
       } else throw e;
     }
@@ -205,7 +189,8 @@ async function makeBuildCopyMacOS(outputDir: string, productName: string) {
   const platformDir = process.arch === "arm64" ? "mac-arm64" : "mac";
   const appDir = await makeBuildCopy(outputDir, platformDir);
   return resolve(
-    root,
+    __dirname,
+    "..",
     appDir,
     `${productName}.app`,
     "Contents",

apps/desktop/electron-builder.config.js

@@ -96,7 +96,6 @@ module.exports = {
     "node_modules/sodium-native/package.json"
   ],
   afterPack: "./scripts/removeLocales.js",
-  protocols: [{ name: "Notesnook", schemes: ["nn"] }],
   mac: {
     bundleVersion: "240",
     minimumSystemVersion: "10.12.0",
@@ -182,7 +181,6 @@ module.exports = {
     icon: "assets/icons/app.icns",
     description: "Your private note taking space",
     executableName: linuxExecutableName,
-    mimeTypes: ["x-scheme-handler/nn"],
     desktop: {
       desktopActions: {
         "new-note": {
@@ -200,9 +198,6 @@ 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.4.5",
+  "version": "3.3.10",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/cjs/index.js",
@@ -21,17 +21,6 @@
         "types": "./dist/types/index.d.ts",
         "default": "./dist/esm/index.js"
       }
-    },
-    "./testutils": "./__tests__/test-override.ts",
-    "./*": {
-      "require": {
-        "types": "./dist/types/*",
-        "default": "./dist/cjs/*"
-      },
-      "import": {
-        "types": "./dist/types/*",
-        "default": "./dist/esm/*"
-      }
     }
   },
   "homepage": "https://notesnook.com/",
@@ -54,18 +43,16 @@
     "zod": "3.24.3"
   },
   "devDependencies": {
-    "@playwright/test": "1.61.1",
     "@streetwriters/kysely": "^0.27.4",
     "@types/node": "22.15.3",
     "@types/yargs": "^17.0.33",
     "chokidar": "^4.0.3",
-    "electron": "^37.10.3",
-    "electron-builder": "^26.8.1",
+    "electron": "^37.0.0",
+    "electron-builder": "^26.0.12",
     "esbuild": "0.21.5",
-    "fkill": "^10.0.3",
     "node-abi": "^4.5.0",
     "node-gyp-build": "^4.8.4",
-    "playwright-core": "1.61.1",
+    "playwright": "1.48.2",
     "prebuildify": "^6.0.1",
     "slugify": "1.6.6",
     "tree-kill": "^1.2.2",
@@ -86,7 +73,7 @@
     "bundle": "esbuild electron=./src/main.ts ./src/preload.ts --external:electron --external:fsevents --external:better-sqlite3-multiple-ciphers --external:sodium-native --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=false --define:RELEASE=true",
     "bundle:mas": "esbuild electron=./src/main.ts ./src/preload.ts --minify --external:electron --external:fsevents --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=true --define:RELEASE=true",
     "postinstall": "patch-package",
-    "test": "playwright test --tsconfig __tests__/tsconfig.json --project notesnook-desktop"
+    "test": "vitest run"
   },
   "author": {
     "name": "Streetwriters (Private) Limited",

apps/desktop/patches/@playwright+test++playwright-core+1.61.1.patch

@@ -1,24 +0,0 @@
-diff --git a/node_modules/@playwright/test/node_modules/playwright-core/lib/coreBundle.js b/node_modules/@playwright/test/node_modules/playwright-core/lib/coreBundle.js
-index 7d8468f..ab252ef 100644
---- a/node_modules/@playwright/test/node_modules/playwright-core/lib/coreBundle.js
-+++ b/node_modules/@playwright/test/node_modules/playwright-core/lib/coreBundle.js
-@@ -16010,6 +16010,7 @@ var init_validator = __esm({
-       args: tOptional(tArray(tString)),
-       chromiumSandbox: tOptional(tBoolean),
-       cwd: tOptional(tString),
-+      baseURL: tOptional(tString),
-       env: tOptional(tArray(tType("NameValue"))),
-       timeout: tFloat,
-       acceptDownloads: tOptional(tEnum(["accept", "deny", "internal-browser-default"])),
-diff --git a/node_modules/@playwright/test/node_modules/playwright-core/types/types.d.ts b/node_modules/@playwright/test/node_modules/playwright-core/types/types.d.ts
-index 0bff9d3..d195697 100644
---- a/node_modules/@playwright/test/node_modules/playwright-core/types/types.d.ts
-+++ b/node_modules/@playwright/test/node_modules/playwright-core/types/types.d.ts
-@@ -21813,6 +21813,7 @@ export interface Electron {
-      * Additional arguments to pass to the application when launching. You typically pass the main script name here.
-      */
-     args?: Array<string>;
-+    baseURL?: string;
- 
-     /**
-      * If specified, artifacts (traces, videos, downloads, HAR files, etc.) are saved into this directory. The directory

apps/desktop/playwright.config.ts

@@ -1,92 +0,0 @@
-/* eslint-disable header/header */
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type {
-  Config,
-  PlaywrightTestOptions,
-  PlaywrightWorkerOptions
-} from "@playwright/test";
-import * as path from "path";
-
-process.env.PWPAGE_IMPL = "electron";
-process.env.TEST_DESKTOP = "true";
-const outputDir = path.join(__dirname, "test-results");
-const testDir = path.join(__dirname, "__tests__");
-const config: Config<PlaywrightWorkerOptions & PlaywrightTestOptions> = {
-  testDir,
-  outputDir,
-  expect: {
-    timeout: 10000
-  },
-  use: {
-    acceptDownloads: true,
-    trace: "retain-on-failure",
-    screenshot: "only-on-failure",
-    video: "retry-with-video",
-    viewport: {
-      width: 1920,
-      height: 1080
-    }
-  },
-  timeout: 60000,
-  globalTimeout: 5400000,
-  workers: process.env.CI ? 1 : undefined,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 1 : 0,
-  reporter: process.env.CI
-    ? [["dot"], ["json", { outputFile: path.join(outputDir, "report.json") }]]
-    : "line",
-  projects: [],
-  globalSetup: "./__tests__/electron-test/global-setup.ts"
-};
-
-const metadata = {
-  platform: process.platform,
-  headless: "headed",
-  browserName: "electron",
-  channel: undefined,
-  mode: "default",
-  video: false
-};
-
-config.projects?.push({
-  name: "notesnook-desktop",
-  // Share screenshots with chromium.
-  snapshotPathTemplate:
-    "{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}-electron{ext}",
-  use: {
-    browserName: "chromium",
-    headless: false
-  },
-  testDir: "__tests__",
-  metadata
-});
-
-config.projects?.push({
-  name: "notesnook-web",
-  // Share screenshots with chromium.
-  snapshotPathTemplate:
-    "{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}-electron{ext}",
-  use: {
-    browserName: "chromium",
-    headless: false
-  },
-  testDir: path.resolve(__dirname, "../web/__e2e__"),
-  metadata
-});
-
-export default config;

apps/desktop/scripts/build.mjs

@@ -33,7 +33,6 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const root = args.root || path.join(__dirname, "..");
 const skipTscBuild = args.skipTscBuild || false;
-const buildForTesting = args.test || false;
 
 const webAppPath = path.resolve(path.join(__dirname, "..", "..", "web"));
 
@@ -52,11 +51,7 @@ console.log("removed build folder");
 if (args.rebuild || !existsSync(path.join(webAppPath, "build"))) {
   console.log("rebuilding...");
   await exec(
-    `node scripts/execute.mjs ${
-      buildForTesting
-        ? "@notesnook/web:build:test:desktop"
-        : "@notesnook/web:build:desktop"
-    }`,
+    "node scripts/execute.mjs @notesnook/web:build:desktop",
     path.join(__dirname, "..", "..", "..")
   );
 }

apps/desktop/scripts/dev.mjs

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

apps/desktop/src/api/backups.ts

@@ -1,108 +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 { initTRPC } from "@trpc/server";
-import { createWriteStream, mkdirSync } from "node:fs";
-import path from "node:path";
-import { z } from "zod";
-import { config } from "../utils/config";
-import { resolvePath } from "../utils/resolve-path";
-import { app } from "electron";
-
-const t = initTRPC.create();
-
-const activeStreams = new Map<string, NodeJS.WritableStream>();
-
-function generateId() {
-  return Math.random().toString(36).slice(2);
-}
-
-function getStreamOrThrow(id: string, operation: "write" | "close") {
-  const stream = activeStreams.get(id);
-  if (!stream) {
-    throw new Error(
-      `Backup stream not found during ${operation}. The stream may have already been closed or was never opened. Stream id: ${id}`
-    );
-  }
-  return stream;
-}
-
-export const backupsRouter = t.router({
-  open: t.procedure
-    .input(z.object({ filename: z.string() }))
-    .mutation(({ input }) => {
-      const { filename } = input;
-      if (!filename.trim()) {
-        throw new Error("Invalid backup filename: filename cannot be empty.");
-      }
-      if (filename.includes(path.sep) || filename.includes("\\"))
-        throw new Error(
-          `Invalid backup filename: expected a plain file name without path separators, received "${filename}".`
-        );
-      const resolvedBackupDir = resolvePath(config.backupDirectory);
-      const backupPath = path.resolve(resolvedBackupDir, filename);
-      const relativeBackupPath = path.relative(resolvedBackupDir, backupPath);
-      if (
-        relativeBackupPath.startsWith("..") ||
-        path.isAbsolute(relativeBackupPath)
-      )
-        throw new Error(
-          `Invalid backup filename: resolved path "${backupPath}" is outside the configured backup directory "${resolvedBackupDir}". The configured backup directory may be invalid.`
-        );
-
-      mkdirSync(resolvedBackupDir, { recursive: true });
-      const stream = createWriteStream(backupPath, { encoding: "utf-8" });
-      const id = generateId();
-      activeStreams.set(id, stream);
-      return id;
-    }),
-
-  write: t.procedure
-    .input(z.object({ id: z.string(), chunk: z.string() }))
-    .mutation(({ input }) => {
-      const stream = getStreamOrThrow(input.id, "write");
-      return new Promise<void>((resolve, reject) => {
-        stream.write(Buffer.from(input.chunk, "base64"), (err) =>
-          err ? reject(err) : resolve()
-        );
-      });
-    }),
-
-  close: t.procedure
-    .input(z.object({ id: z.string() }))
-    .mutation(({ input }) => {
-      const stream = getStreamOrThrow(input.id, "close");
-      return new Promise<void>((resolve) => {
-        stream.end(() => {
-          activeStreams.delete(input.id);
-          resolve();
-        });
-      });
-    })
-});
-
-app.on("before-quit", () => {
-  try {
-    for (const stream of activeStreams.values()) {
-      stream.end();
-    }
-  } catch {
-    // ignore
-  }
-});

apps/desktop/src/api/bridge.ts

@@ -24,43 +24,21 @@ import TypedEventEmitter from "typed-emitter";
 
 export type AppEvents = {
   onCreateItem(name: "note" | "notebook" | "reminder"): void;
-  onOpenLink(url: string): void;
-  bridgeReady(): void;
 };
-let isBridgeReady = false;
-const pendingEvents: { name: string; args: unknown[] }[] = [];
-const _emitter = new EventEmitter();
-const emitter = _emitter as TypedEventEmitter<AppEvents>;
+
+const emitter = new EventEmitter();
+const typedEmitter = emitter as TypedEventEmitter<AppEvents>;
 const t = initTRPC.create();
 
 export const bridgeRouter = t.router({
-  onCreateItem: createSubscription("onCreateItem"),
-  onOpenLink: createSubscription("onOpenLink"),
-  ready: t.procedure.query(() => {
-    isBridgeReady = true;
-    if (pendingEvents.length > 0) {
-      console.log(
-        "Emitting pending events",
-        pendingEvents.map((e) => e.name)
-      );
-      pendingEvents.forEach((event) => {
-        emitter.emit(event.name as any, ...(event.args as any[]));
-      });
-      pendingEvents.length = 0;
-    }
-    return true;
-  })
+  onCreateItem: createSubscription("onCreateItem")
 });
 
 export const bridge: AppEvents = new Proxy({} as AppEvents, {
   get(_t, name) {
     if (typeof name === "symbol") return;
     return (...args: unknown[]) => {
-      if (!isBridgeReady) {
-        pendingEvents.push({ name, args });
-        return;
-      }
-      _emitter.emit(name, ...args);
+      emitter.emit(name, ...args);
     };
   }
 });
@@ -71,9 +49,9 @@ function createSubscription<TName extends keyof AppEvents>(eventName: TName) {
       const listener: AppEvents[TName] = (...args: any[]) => {
         emit.next(args[0]);
       };
-      emitter.addListener(eventName, listener);
+      typedEmitter.addListener(eventName, listener);
       return () => {
-        emitter.removeListener(eventName, listener);
+        typedEmitter.removeListener(eventName, listener);
       };
     });
   });

apps/desktop/src/api/index.ts

@@ -25,8 +25,6 @@ import { updaterRouter } from "./updater";
 import { bridgeRouter } from "./bridge";
 import { safeStorageRouter } from "./safe-storage";
 import { windowRouter } from "./window";
-import { sqliteRouter } from "./sqlite-kysely";
-import { backupsRouter } from "./backups";
 
 const t = initTRPC.create();
 
@@ -37,13 +35,10 @@ export const router = t.router({
   updater: updaterRouter,
   bridge: bridgeRouter,
   safeStorage: safeStorageRouter,
-  window: windowRouter,
-  sqlite: sqliteRouter,
-  backups: backupsRouter
+  window: windowRouter
 });
 
-const createCaller = t.createCallerFactory(router);
-export const api = createCaller({});
+export const api = router.createCaller({});
 
 // Export type router type signature,
 // NOT the router itself.

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

@@ -24,6 +24,7 @@ import {
   dialog,
   Menu,
   MenuItem,
+  nativeImage,
   nativeTheme,
   Notification,
   shell
@@ -32,16 +33,16 @@ import { AutoLaunch } from "../utils/autolaunch";
 import { config, DesktopIntegration } from "../utils/config";
 import { bringToFront } from "../utils/bring-to-front";
 import { getTheme, setTheme, Theme } from "../utils/theme";
-import { existsSync } from "fs";
-import { normalizePathString, resolvePath } from "../utils/resolve-path";
+import { mkdirSync, writeFileSync } from "fs";
+import { dirname } from "path";
+import { resolvePath } from "../utils/resolve-path";
 import { observable } from "@trpc/server/observable";
 import { AssetManager } from "../utils/asset-manager";
-import { isFlatpak, isPortable, isSnap } from "../utils";
+import { isFlatpak, isSnap } from "../utils";
 import { setupDesktopIntegration } from "../utils/desktop-integration";
+import { rm } from "fs/promises";
 import { disableCustomDns, enableCustomDns } from "../utils/custom-dns";
 import type { MenuItem as NNMenuItem } from "@notesnook/ui";
-import { platform } from "os";
-import { strings } from "@notesnook/intl";
 
 const t = initTRPC.create();
 
@@ -59,14 +60,6 @@ const NotificationOptions = z.object({
 export const osIntegrationRouter = t.router({
   isFlatpak: t.procedure.query(() => isFlatpak()),
   isSnap: t.procedure.query(() => isSnap()),
-  isPortable: t.procedure.query(() => isPortable()),
-  backupDirectory: t.procedure.query(() => {
-    const backupDirectory = normalizePathString(config.backupDirectory);
-    if (backupDirectory !== config.backupDirectory) {
-      config.backupDirectory = backupDirectory;
-    }
-    return backupDirectory;
-  }),
 
   zoomFactor: t.procedure.query(() => config.zoomFactor),
   setZoomFactor: t.procedure.input(z.number()).mutation(({ input: factor }) => {
@@ -123,19 +116,53 @@ export const osIntegrationRouter = t.router({
       setupDesktopIntegration(settings);
     }),
 
-  selectBackupDirectory: t.procedure.input(z.undefined()).query(async () => {
-    if (!globalThis.window) return undefined;
+  selectDirectory: t.procedure
+    .input(
+      z.object({
+        title: z.string().optional(),
+        buttonLabel: z.string().optional(),
+        defaultPath: z.string().optional()
+      })
+    )
+    .query(async ({ input }) => {
+      if (!globalThis.window) return undefined;
 
-    const result = await dialog.showOpenDialog(globalThis.window, {
-      title: strings.selectBackupDir(),
-      buttonLabel: strings.select(),
-      properties: ["openDirectory"],
-      defaultPath: config.backupDirectory && resolvePath(config.backupDirectory)
-    });
-    if (result.canceled) return undefined;
+      const { title, buttonLabel, defaultPath } = input;
 
-    config.backupDirectory = result.filePaths[0];
+      const result = await dialog.showOpenDialog(globalThis.window, {
+        title,
+        buttonLabel,
+        properties: ["openDirectory"],
+        defaultPath: defaultPath && resolvePath(defaultPath)
+      });
+      if (result.canceled) return undefined;
+
+      return result.filePaths[0];
+    }),
+
+  saveFile: t.procedure
+    .input(z.object({ data: z.string(), filePath: z.string() }))
+    .query(({ input }) => {
+      const { data, filePath } = input;
+      if (!data || !filePath) return;
+
+      const resolvedPath = resolvePath(filePath);
+
+      mkdirSync(dirname(resolvedPath), { recursive: true });
+      writeFileSync(resolvedPath, data);
+    }),
+
+  resolvePath: t.procedure
+    .input(z.object({ filePath: z.string() }))
+    .query(({ input }) => {
+      const { filePath } = input;
+      return resolvePath(filePath);
+    }),
+
+  deleteFile: t.procedure.input(z.string()).query(async ({ input }) => {
+    await rm(input);
   }),
+
   restart: t.procedure.query(() => {
     app.relaunch();
     app.exit();
@@ -151,9 +178,7 @@ export const osIntegrationRouter = t.router({
         })
       });
       notification.show();
-      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.
+      if (input.urgency === "critical") {
         shell.beep();
       }
 
@@ -164,38 +189,9 @@ export const osIntegrationRouter = t.router({
     }),
   openPath: t.procedure
     .input(z.object({ type: z.literal("path"), link: z.string() }))
-    .query(async ({ input }) => {
-      if (isFlatpak()) return;
-
+    .query(({ input }) => {
       const { type, link } = input;
-      if (type !== "path") return;
-
-      const path = decodeURIComponent(new URL(link).pathname);
-      const resolvedPath = resolvePath(
-        // remove leading slash from path on windows
-        platform() === "win32" ? path.slice(1) : path
-      );
-
-      if (!existsSync(resolvedPath)) {
-        if (globalThis.window) {
-          await dialog.showMessageBox(globalThis.window, {
-            type: "error",
-            title: "Path not found",
-            message: `The path does not exist:\n${wrapPath(resolvedPath)}`
-          });
-        }
-        return;
-      }
-
-      const result = await dialog.showMessageBox(globalThis.window!, {
-        message: strings.openingLocalFileDesc(resolvedPath),
-        title: strings.openingLocalFile(),
-        buttons: [strings.cancel(), strings.open()],
-        defaultId: 1,
-        cancelId: 0,
-        type: "question"
-      });
-      result.response === 1 && (await shell.openPath(resolvedPath));
+      if (type === "path") return shell.openPath(resolvePath(link));
     }),
   bringToFront: t.procedure.query(() => bringToFront()),
   changeTheme: t.procedure
@@ -256,7 +252,6 @@ 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();
@@ -300,7 +295,3 @@ function toMenuItem(
     }
   }
 }
-
-function wrapPath(path: string, maxLineLength = 100): string {
-  return path.replace(new RegExp(`(.{${maxLineLength}})`, "g"), "$1\n");
-}

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

@@ -84,55 +84,35 @@ const LANGUAGES: Record<string, string> = {
 
 type Language = { code: string; name: string };
 
-const LANGUAGE_REDIRECT_MAP: Record<string, string> = {
-  es: "es-MX",
-  "es-419": "es-MX",
-  "es-ES": "es-AR"
-};
-
 export const spellCheckerRouter = t.router({
   isEnabled: t.procedure.query(() => config.isSpellCheckerEnabled),
-  languages: t.procedure.query(() => {
-    const available =
-      globalThis.window?.webContents.session.availableSpellCheckerLanguages ||
-      [];
-
-    return <Language[]>available
-      .map((code) => ({
-        code,
-        name: LANGUAGES[code] || code
-      }))
-      .sort((a, b) => a.name.localeCompare(b.name));
-  }),
-
-  enabledLanguages: t.procedure.query(() => {
-    const enabled =
-      globalThis.window?.webContents.session.getSpellCheckerLanguages() || [];
-    const available =
-      globalThis.window?.webContents.session.availableSpellCheckerLanguages ||
-      [];
-
-    const resolved = enabled
-      .map((code) => resolveLanguage(code, available))
-      .filter(Boolean) as string[];
-
-    return <Language[]>resolved.map((code) => ({
-      code,
-      name: LANGUAGES[code] || code
-    }));
-  }),
-
-  setLanguages: t.procedure.input(z.array(z.string())).mutation(({ input }) => {
-    const available =
-      globalThis.window?.webContents.session.availableSpellCheckerLanguages ||
-      [];
-
-    const resolved = input
-      .map((code) => resolveLanguage(code, available))
-      .filter(Boolean) as string[];
-
-    globalThis.window?.webContents.session.setSpellCheckerLanguages(resolved);
-  }),
+  languages: t.procedure.query(
+    () =>
+      <Language[]>(
+        globalThis.window?.webContents.session.availableSpellCheckerLanguages.map(
+          (code) => ({
+            code,
+            name: LANGUAGES[code]
+          })
+        )
+      )
+  ),
+  enabledLanguages: t.procedure.query(
+    () =>
+      <Language[]>(
+        globalThis.window?.webContents.session
+          .getSpellCheckerLanguages()
+          .map((code) => ({
+            code,
+            name: LANGUAGES[code]
+          }))
+      )
+  ),
+  setLanguages: t.procedure
+    .input(z.array(z.string()))
+    .mutation(({ input: languages }) =>
+      globalThis.window?.webContents.session.setSpellCheckerLanguages(languages)
+    ),
   toggle: t.procedure
     .input(z.object({ enabled: z.boolean() }))
     .mutation(({ input: { enabled } }) => {
@@ -148,16 +128,3 @@ export const spellCheckerRouter = t.router({
     );
   })
 });
-
-function resolveLanguage(code: string, available: string[]) {
-  if (LANGUAGE_REDIRECT_MAP[code]) {
-    const working = LANGUAGE_REDIRECT_MAP[code];
-    return available.includes(working) ? working : code;
-  }
-  const fallback = code.split("-")[0];
-  return available.includes(code)
-    ? code
-    : available.includes(fallback)
-    ? fallback
-    : undefined;
-}

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

@@ -19,9 +19,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import type { Database, Statement } from "better-sqlite3-multiple-ciphers";
 import type { QueryResult } from "@streetwriters/kysely";
-import { app } from "electron";
-import path from "node:path";
-import { initTRPC } from "@trpc/server";
 
 type SQLiteCompatibleType =
   | number
@@ -31,32 +28,25 @@ type SQLiteCompatibleType =
   | bigint
   | null;
 
-class SQLite {
+export class SQLite {
   sqlite?: Database;
   initialized = false;
   preparedStatements: Map<string, Statement<unknown[]>> = new Map();
   retryCounter: Record<string, number> = {};
   extensionsLoaded = false;
-  private filePath?: string;
 
   constructor() {
     console.log("new sqlite worker");
   }
 
-  async open(filename: string) {
+  async open(filePath: string) {
     if (this.sqlite) {
       console.error("Database is already initialized");
       return;
     }
 
-    this.filePath =
-      filename === ":memory:"
-        ? filename
-        : path.join(app.getPath("userData"), filename) + ".sql";
-    if (!isPathAllowed(this.filePath))
-      throw new Error("Database path is not allowed: " + this.filePath);
     this.sqlite = require("better-sqlite3-multiple-ciphers")(
-      this.filePath
+      filePath
     ).unsafeMode(true);
   }
 
@@ -165,11 +155,9 @@ class SQLite {
     this.sqlite = undefined;
   }
 
-  async delete() {
-    if (!this.filePath) return;
-
+  async delete(filePath: string) {
     await this.close();
-    await require("node:fs/promises").rm(this.filePath, {
+    await require("fs/promises").rm(filePath, {
       force: true,
       maxRetries: 5,
       retryDelay: 500
@@ -233,67 +221,3 @@ function rewriteError(e: Error, message: string) {
   error.cause = e.cause;
   return error;
 }
-
-function isPathAllowed(databasePath: string) {
-  if (databasePath === ":memory:") return true;
-  const base = app.getPath("userData");
-  const resolved = path.resolve(databasePath);
-  return resolved.startsWith(base + path.sep);
-}
-
-const t = initTRPC.create();
-
-const databases: Record<string, SQLite> = {};
-
-export const sqliteRouter = t.router({
-  open: t.procedure
-    .input((v) => v)
-    .mutation(async ({ input }) => {
-      const { filePath } = input as { filePath: string };
-      if (databases[filePath]) return filePath;
-      const sqlite = new SQLite();
-      await sqlite.open(filePath);
-      databases[filePath] = sqlite;
-      return filePath;
-    }),
-  run: t.procedure
-    .input((v) => v)
-    .mutation(async ({ input }) => {
-      const { id, sql, parameters } = input as {
-        id: string;
-        sql: string;
-        parameters?: SQLiteCompatibleType[];
-      };
-      const sqlite = databases[id];
-      if (!sqlite) throw new Error("Database not found for id: " + id);
-      return await sqlite.run(sql, parameters);
-    }),
-  close: t.procedure
-    .input((v) => v)
-    .mutation(async ({ input }) => {
-      const { id } = input as { id: string };
-      const sqlite = databases[id];
-      if (!sqlite) throw new Error("Database not found for id: " + id);
-      await sqlite.close();
-      delete databases[id];
-    }),
-  delete: t.procedure
-    .input((v) => v)
-    .mutation(async ({ input }) => {
-      const { id } = input as { id: string };
-      const sqlite = databases[id];
-      if (!sqlite) throw new Error("Database not found for id: " + id);
-      await sqlite.delete();
-      delete databases[id];
-    })
-});
-
-app.on("before-quit", async () => {
-  for (const db of Object.values(databases)) {
-    try {
-      await db.close();
-    } catch (e) {
-      console.error("Error closing database:", e);
-    }
-  }
-});

apps/desktop/src/api/updater.ts

@@ -24,7 +24,6 @@ import type { AppUpdaterEvents } from "electron-updater/out/AppUpdater";
 import { z } from "zod";
 import { config } from "../utils/config";
 import { app } from "electron";
-import { isFlatpak, isPortable, isSnap } from "../utils";
 
 type UpdateInfo = { version: string };
 type Progress = { percent: number };
@@ -32,15 +31,13 @@ type Progress = { percent: number };
 const t = initTRPC.create();
 let cancellationToken: CancellationToken | undefined = undefined;
 let downloadTimeout: NodeJS.Timeout | undefined = undefined;
-const updatesSupported = !isFlatpak() && !isSnap() && !isPortable();
+
 export const updaterRouter = t.router({
-  autoUpdates: t.procedure.query(
-    () => updatesSupported && config.automaticUpdates
-  ),
+  autoUpdates: t.procedure.query(() => config.automaticUpdates),
   releaseTrack: t.procedure.query(() => config.releaseTrack),
   install: t.procedure.query(() => autoUpdater.quitAndInstall()),
   download: t.procedure.query(async () => {
-    if (!updatesSupported || cancellationToken) return;
+    if (cancellationToken) return;
     clearTimeout(downloadTimeout);
     await new Promise<string[]>((resolve, reject) => {
       downloadTimeout = setTimeout(async () => {
@@ -55,7 +52,7 @@ export const updaterRouter = t.router({
     });
   }),
   check: t.procedure.query(async () => {
-    if (!updatesSupported || cancellationToken) return;
+    if (cancellationToken) return;
     clearTimeout(downloadTimeout);
     await new Promise<void>((resolve) => {
       downloadTimeout = setTimeout(async () => {

apps/desktop/src/index.ts

@@ -21,3 +21,4 @@ export { PATHS } from "./constants";
 export type { AppRouter } from "./api";
 export { type UpdateInfo } from "builder-util-runtime";
 export { type DesktopIntegration } from "./utils/config";
+export { SQLite } from "./api/sqlite-kysely.js";

apps/desktop/src/main.ts

@@ -39,8 +39,6 @@ import { setupDesktopIntegration } from "./utils/desktop-integration";
 import { disableCustomDns, enableCustomDns } from "./utils/custom-dns";
 import { Messages, setI18nGlobal } from "@notesnook/intl";
 import { i18n } from "@lingui/core";
-import { PATHS } from "./constants";
-import { normalizePathString } from "./utils/resolve-path";
 
 const locale =
   process.env.NODE_ENV === "development"
@@ -57,10 +55,6 @@ setI18nGlobal(i18n);
 const appHostnames = isDevelopment()
   ? ["localhost", "127.0.0.1"]
   : ["app.notesnook.com"];
-// Pending nn:// link to open once the window is ready (used on Windows/Linux
-// when the app is launched via the nn:// protocol for the first time).
-let pendingNNLink: string | undefined = findNNLink(process.argv);
-
 // only run a single instance
 if (!MAC_APP_STORE && !app.requestSingleInstanceLock()) {
   console.log("Another instance is already running!");
@@ -92,17 +86,6 @@ async function createWindow() {
   const cliOptions = await parseArguments(process.argv);
   setTheme(getTheme());
 
-  // this workaround is necessary because macos doesn't support
-  // the --hidden flag when launching the app on startup
-  if (
-    process.platform === "darwin" &&
-    app.getLoginItemSettings().wasOpenedAtLogin &&
-    config.desktopSettings.autoStart &&
-    config.desktopSettings.startMinimized
-  ) {
-    cliOptions.hidden = true;
-  }
-
   const mainWindowState = new WindowState({});
   const mainWindow = new BrowserWindow({
     show: !cliOptions.hidden,
@@ -142,6 +125,9 @@ async function createWindow() {
 
     webPreferences: {
       zoomFactor: config.zoomFactor,
+      nodeIntegration: true,
+      contextIsolation: false,
+      nodeIntegrationInWorker: true,
       spellcheck: config.isSpellCheckerEnabled,
       preload: __dirname + "/preload.js"
     }
@@ -152,13 +138,7 @@ async function createWindow() {
   mainWindow.setMenuBarVisibility(false);
   mainWindowState.manage(mainWindow);
 
-  if (
-    cliOptions.hidden &&
-    !(
-      config.desktopSettings.minimizeToSystemTray ||
-      config.desktopSettings.closeToSystemTray
-    )
-  )
+  if (cliOptions.hidden && !config.desktopSettings.minimizeToSystemTray)
     mainWindow.minimize();
 
   await mainWindow.webContents.loadURL(`${createURL(cliOptions, "/")}`);
@@ -181,14 +161,6 @@ async function createWindow() {
   );
   mainWindow.webContents.session.setProxy({ proxyRules: config.proxyRules });
 
-  mainWindow.on("show", () =>
-    /**
-     * We may set `skipTaskbar` to true at startup.
-     * This also removes the window from the Alt-Tab switcher.
-     * To fix that, whenever the app is shown, we set `skipTaskbar` to false.
-     */
-    mainWindow.setSkipTaskbar(false)
-  );
   mainWindow.once("closed", () => {
     globalThis.window = null;
   });
@@ -221,11 +193,6 @@ async function createWindow() {
     setupTray();
     setupJumplist();
   });
-
-  if (pendingNNLink) {
-    bridge.onOpenLink(pendingNNLink);
-    pendingNNLink = undefined;
-  }
 }
 
 app.once("ready", async () => {
@@ -245,12 +212,9 @@ app.once("ready", async () => {
   if (config.customDns) enableCustomDns();
   else disableCustomDns();
 
-  if (!MAC_APP_STORE) app.setAsDefaultProtocolClient("nn");
-
   if (!isDevelopment()) registerProtocol();
   await createWindow();
-  await migrateBackupDirectory();
-  await configureAutoUpdater();
+  configureAutoUpdater();
 });
 
 app.once("window-all-closed", () => {
@@ -261,12 +225,6 @@ app.once("window-all-closed", () => {
 
 app.on("second-instance", async (_ev, argv) => {
   if (!globalThis.window) return;
-  const nnLink = findNNLink(argv);
-  if (nnLink) {
-    bridge.onOpenLink(nnLink);
-    bringToFront();
-    return;
-  }
   const cliOptions = await parseArguments(argv);
   if (cliOptions.note) bridge.onCreateItem("note");
   if (cliOptions.notebook) bridge.onCreateItem("notebook");
@@ -274,29 +232,12 @@ app.on("second-instance", async (_ev, argv) => {
   bringToFront();
 });
 
-// macOS opens URLs via this event. The app may or may not be fully loaded yet.
-app.on("open-url", (event, url) => {
-  event.preventDefault();
-  if (!url.startsWith("nn://")) return;
-  if (globalThis.window) {
-    bridge.onOpenLink(url);
-    bringToFront();
-  } else {
-    // Window not ready yet — store for when createWindow finishes loading.
-    pendingNNLink = url;
-  }
-});
-
 app.on("activate", () => {
   if (globalThis.window === null) {
     createWindow();
   }
 });
 
-function findNNLink(argv: string[]): string | undefined {
-  return argv.find((arg) => arg.startsWith("nn://"));
-}
-
 function createURL(options: CLIOptions, path = "/") {
   const url = new URL(isDevelopment() ? "http://localhost:3000" : PROTOCOL_URL);
 
@@ -307,31 +248,7 @@ function createURL(options: CLIOptions, path = "/") {
   else if (typeof options.note === "string")
     url.hash = `/notes/${options.note}/edit`;
   else if (typeof options.notebook === "string")
-    url.pathname = `/notebooks/${options.notebook}`;
+    url.hash = `/notebooks/${options.notebook}`;
 
   return url;
 }
-
-async function migrateBackupDirectory() {
-  if (!globalThis.window) return;
-  try {
-    if (config.backupDirectory !== PATHS.backupsDirectory) return;
-    const oldPath = await globalThis.window?.webContents.executeJavaScript(
-      `localStorage.getItem("backupStorageLocation")`
-    );
-    if (!oldPath || oldPath === PATHS.backupsDirectory) return;
-    config.backupDirectory = normalizePathString(oldPath);
-  } catch (e) {
-    console.error("Failed to migrate backup directory", e);
-    const pressedButton = dialog.showMessageBoxSync(globalThis.window, {
-      message:
-        "Failed to migrate backup directory. It has been reset to default.",
-      title: "Backup Directory Migration Failed",
-      type: "error",
-      buttons: ["Set backup directory", "Ignore"]
-    });
-    if (pressedButton === 0) {
-      await api.integration.selectBackupDirectory();
-    }
-  }
-}

apps/desktop/src/preload.ts

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

apps/desktop/src/utils/autoupdater.ts

@@ -37,11 +37,7 @@ async function configureAutoUpdater() {
     config.releaseTrack === "stable" &&
     autoUpdater.currentVersion.prerelease.length > 0;
   autoUpdater.allowPrerelease = false;
-  // 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.autoInstallOnAppQuit = true;
   autoUpdater.disableWebInstaller = true;
 }
 

apps/desktop/src/utils/config.ts

@@ -21,7 +21,6 @@ import { nativeTheme } from "electron";
 import { JSONStorage } from "./json-storage";
 import { z } from "zod";
 import { autoUpdater } from "electron-updater";
-import { PATHS } from "../constants";
 
 export const DesktopIntegration = z.object({
   autoStart: z.boolean().optional(),
@@ -54,8 +53,7 @@ export const config = {
 
   backgroundColor: nativeTheme.themeSource === "dark" ? "#0f0f0f" : "#ffffff",
   windowControlsIconColor:
-    nativeTheme.themeSource === "dark" ? "#ffffff" : "#000000",
-  backupDirectory: PATHS.backupsDirectory
+    nativeTheme.themeSource === "dark" ? "#ffffff" : "#000000"
 };
 
 type ConfigKey = keyof typeof config;

apps/desktop/src/utils/index.ts

@@ -33,7 +33,3 @@ export function isFlatpak() {
 export function isSnap() {
   return process.env.SNAP !== undefined;
 }
-
-export function isPortable() {
-  return process.env.PORTABLE_EXECUTABLE_DIR !== undefined;
-}

apps/desktop/src/utils/protocol.ts

@@ -62,17 +62,7 @@ function registerProtocol() {
         headers: { "Content-Type": extensionToMimeType[fileExtension] }
       });
     } else {
-      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
-        }
-      );
+      return net.fetch(request, { bypassCustomProtocolHandlers: true });
     }
   });
   console.info(`${SCHEME} protocol inteception "successful"`);

apps/desktop/src/utils/resolve-path.ts

@@ -20,30 +20,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { app } from "electron";
 import { isAbsolute, join } from "path";
 
-export function normalizePathString(_path: string) {
-  let normalizedPath = _path.trim();
-
-  try {
-    const parsedPath = JSON.parse(normalizedPath);
-    if (typeof parsedPath === "string") normalizedPath = parsedPath;
-  } catch {
-    // ignore invalid JSON and keep the original path string
-  }
-
-  if (normalizedPath === "~") return app.getPath("home");
-  if (/^~[\\/]/.test(normalizedPath)) {
-    return join(app.getPath("home"), normalizedPath.slice(2));
-  }
-
-  return normalizedPath;
-}
-
 export function resolvePath(_path: string) {
-  const normalizedPath = normalizePathString(_path);
-  if (isAbsolute(normalizedPath)) return normalizedPath;
+  if (isAbsolute(_path)) return _path;
 
   return join(
-    ...normalizedPath.split("/").map((segment) => {
+    ..._path.split("/").map((segment) => {
       let resolved = segment;
       try {
         resolved = app.getPath(resolved as any);

apps/desktop/tsconfig.json

@@ -1,11 +1,9 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig",
   "compilerOptions": {
     "outDir": "./dist/",
     "lib": ["ESNext"],
     "moduleResolution": "Bundler"
   },
-  "files": ["global.d.ts"],
-  "include": ["src"],
-  "exclude": ["__tests__"]
+  "include": ["src", "global.d.ts"]
 }

apps/desktop/vitest.config.ts

@@ -17,23 +17,26 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-export function getSandboxFeatures(src: string) {
-  const features = [];
-  try {
-    const url = new URL(src);
-    if (url.protocol === "http:" || url.protocol === "https:")
-      features.push(
-        "allow-scripts",
-        "allow-same-origin",
-        "allow-popups",
-        "allow-popups-to-escape-sandbox",
-        "allow-forms",
-        "allow-modals",
-        "allow-downloads",
-        "allow-presentation"
-      );
-  } catch {
-    // ignore
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    testTimeout: 120 * 1000,
+    hookTimeout: 120 * 1000,
+    sequence: {
+      concurrent: true,
+      shuffle: true
+    },
+    globalSetup: "./__tests__/global-setup.ts",
+    dir: "./__tests__/",
+    exclude: [
+      "**/node_modules/**",
+      "**/dist/**",
+      "**/cypress/**",
+      "**/.{idea,git,cache,output,temp}/**",
+      "**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.*",
+      "**/test-results/**",
+      "**/test-artifacts/**"
+    ]
   }
-  return features.join(" ");
-}
+});

apps/mobile/.detoxrc.js

@@ -30,7 +30,7 @@ module.exports = {
       testBinaryPath:
         "android/app/build/outputs/apk/androidTest/debug/app-debug-androidTest.apk",
       build:
-        "cd android ; ENVFILE=.env.test ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug -PreactNativeArchitectures=arm64-v8a && cd ..",
+        "cd android ; ENVFILE=.env.test ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
       reversePorts: [8081]
     },
     "android.release": {

apps/mobile/.github/workflows/android-public-release.yml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v2
         with:
           persist-credentials: false
 

apps/mobile/.github/workflows/android-release.yml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v2
         with:
           persist-credentials: false
 

apps/mobile/.gitignore

@@ -1,5 +1,4 @@
 .yarnrc.yml
-tsconfig.tsbuildinfo
 artifacts/
 # OSX
 #

apps/mobile/.nanoicons.json

@@ -1,9 +0,0 @@
-{
-  "iconSets": [
-    {
-      "inputDir": "../../packages/icons/svgs",
-      "fontFamily": "notesnook-icons",
-      "outputDir": "./fonts"
-    }
-  ]
-}

apps/mobile/android/app/build.gradle

@@ -5,7 +5,6 @@ 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
@@ -95,18 +94,6 @@ 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)
@@ -131,17 +118,14 @@ 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
-        if (project.hasProperty("prBuildNumber")) {
-            versionCode Integer.parseInt(prBuildNumber())
-        } else {
-            versionCode 3113
-        }
+        versionCode 3096
         versionName getNpmVersion()
         testBuildType System.getProperty('testBuildType', 'debug')
         testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
@@ -208,8 +192,6 @@ 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
@@ -251,6 +233,7 @@ dependencies {
     } else {
         implementation jscFlavor
     }
+    
 
 }
 

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

@@ -155,15 +155,6 @@
                 <data android:scheme="notesnook" />
             </intent-filter>
 
-            <intent-filter android:label="Notesnook">
-                <action android:name="android.intent.action.VIEW" />
-
-                <category android:name="android.intent.category.DEFAULT" />
-                <category android:name="android.intent.category.BROWSABLE" />
-
-                <data android:scheme="nn" />
-            </intent-filter>
-
         </activity>
         <activity
             android:name="com.facebook.react.devsupport.DevSettingsActivity"
@@ -208,7 +199,11 @@
             </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/MainActivity.java

@@ -28,6 +28,10 @@ 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/NotePreviewWidget.java

@@ -33,7 +33,7 @@ public class NotePreviewWidget extends AppWidgetProvider {
         intent.putExtra(OpenNoteId, note.getId());
         intent.setAction(Intent.ACTION_VIEW);
         intent.putExtra(RCTNNativeModule.IntentType, "OpenNote");
-        intent.setData(Uri.parse("nn://note/" + note.getId()));
+        intent.setData(Uri.parse("https://app.notesnook.com/open_note?id=" + note.getId()));
         PendingIntent pendingIntent = PendingIntent.getActivity(context, appWidgetId, intent, PendingIntent.FLAG_UPDATE_CURRENT | PendingIntent.FLAG_IMMUTABLE, getActivityOptionsBundle());
         views.setOnClickPendingIntent(R.id.open_note, pendingIntent);
 

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

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

@@ -93,6 +93,21 @@ 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;
@@ -244,7 +259,7 @@ public class RCTNNativeModule extends ReactContextBaseJavaModule {
                 return;
             }
 
-            String uri = "nn://" + type + "/" + id;
+            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());
 

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

@@ -4,10 +4,4 @@
         <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,8 +36,6 @@ allprojects {
             url "$rootDir/../node_modules/detox/Detox-android"
         }
 
-        google()
-        mavenCentral()
         maven { url 'https://www.jitpack.io' }
     }
 }

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

@@ -1,4 +1,8 @@
-- Add option to clear note version history
-- Minor bug fixes and improvements
+- Add support audio playback in editor
+- Sort tags assigned to a note on top when viewing and managing note tags
+- Fix account password changing and account recovery
+- Fix title is editable in readonly mode
+- Allow attaching image as file
+- Minor bug fixes and performance improvements
 
 Thank you for using Notesnook!

apps/mobile/app.json

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

apps/mobile/app/app.tsx

@@ -23,7 +23,7 @@ import {
   THEME_COMPATIBILITY_VERSION,
   useThemeEngineStore
 } from "@notesnook/theme";
-import React, { PropsWithChildren, useEffect } from "react";
+import React, { useEffect } from "react";
 import { Appearance, I18nManager, Linking, StatusBar } from "react-native";
 import "react-native-gesture-handler";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
@@ -35,7 +35,7 @@ import { Toast } from "./components/toast";
 import { useAppEvents } from "./hooks/use-app-events";
 import { NotePreviewConfigure } from "./screens/note-preview-configure";
 import { RootNavigation } from "./navigation/navigation-stack";
-import { themeTrpcClient } from "./screens/settings/components/theme-selector";
+import { themeTrpcClient } from "./screens/settings/theme-selector";
 import Notifications from "./services/notifications";
 import SettingsService from "./services/settings";
 import { TipManager } from "./services/tip-manager";
@@ -44,7 +44,6 @@ 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";
-import { THEME_DARK, THEME_LIGHT } from "./common/design/theme";
 I18nManager.allowRTL(false);
 I18nManager.forceRTL(false);
 I18nManager.swapLeftAndRightInRTL(false);
@@ -67,9 +66,6 @@ const App = (props: { configureMode: "note-preview" }) => {
   useEffect(() => {
     SettingsService.onFirstLaunch();
     changeSystemBarColors();
-    SettingsService.setPrivacyScreen(
-      SettingsService.getProperty("privacyScreen")
-    );
     setTimeout(async () => {
       await Notifications.get();
       if (SettingsService.get().notifNotes) {
@@ -110,10 +106,8 @@ let currTheme =
     : SettingsService.getProperty("lighTheme");
 useThemeEngineStore.getState().setTheme(currTheme);
 
-export const withTheme = (
-  Element: (props: PropsWithChildren) => JSX.Element
-) => {
-  return function AppWithThemeProvider(props: PropsWithChildren) {
+export const withTheme = (Element: (props: any) => JSX.Element) => {
+  return function AppWithThemeProvider(props: any) {
     const [colorScheme, darkTheme, lightTheme] = useThemeStore((state) => [
       state.colorScheme,
       state.darkTheme,
@@ -121,30 +115,30 @@ export const withTheme = (
     ]);
 
     useEffect(() => {
-      // setTimeout(() => {
-      //   const currentTheme = colorScheme === "dark" ? darkTheme : lightTheme;
-      //   if (!currentTheme) return;
-      //   themeTrpcClient.updateTheme
-      //     .query({
-      //       version: currentTheme.version,
-      //       compatibilityVersion: THEME_COMPATIBILITY_VERSION,
-      //       id: currentTheme.id
-      //     })
-      //     .then((theme) => {
-      //       if (theme) {
-      //         theme.colorScheme === "dark"
-      //           ? useThemeStore.setState({
-      //               darkTheme: theme
-      //             })
-      //           : useThemeStore.setState({
-      //               lightTheme: theme
-      //             });
-      //       }
-      //     })
-      //     .catch(() => {
-      //       /* empty */
-      //     });
-      // }, 1000);
+      setTimeout(() => {
+        const currentTheme = colorScheme === "dark" ? darkTheme : lightTheme;
+        if (!currentTheme) return;
+        themeTrpcClient.updateTheme
+          .query({
+            version: currentTheme.version,
+            compatibilityVersion: THEME_COMPATIBILITY_VERSION,
+            id: currentTheme.id
+          })
+          .then((theme) => {
+            if (theme) {
+              theme.colorScheme === "dark"
+                ? useThemeStore.setState({
+                    darkTheme: theme
+                  })
+                : useThemeStore.setState({
+                    lightTheme: theme
+                  });
+            }
+          })
+          .catch(() => {
+            /* empty */
+          });
+      }, 1000);
 
       const listener = Appearance.addChangeListener(({ colorScheme }) => {
         if (colorScheme && SettingsService.getProperty("useSystemTheme")) {
@@ -160,11 +154,11 @@ export const withTheme = (
     }, []);
 
     useEffect(() => {
-      const nextTheme = colorScheme === "dark" ? THEME_DARK : THEME_LIGHT;
+      const nextTheme = colorScheme === "dark" ? darkTheme : lightTheme;
       if (JSON.stringify(nextTheme) !== JSON.stringify(currTheme)) {
         useThemeEngineStore
           .getState()
-          .setTheme(colorScheme === "dark" ? THEME_DARK : THEME_LIGHT);
+          .setTheme(colorScheme === "dark" ? darkTheme : lightTheme);
         currTheme = nextTheme;
       }
     }, [colorScheme, darkTheme, lightTheme]);

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

@@ -25,6 +25,7 @@ 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/database/storage.ts

@@ -31,8 +31,6 @@ import {
   generateCryptoKeyFallback
 } from "./encryption";
 import { MMKV } from "./mmkv";
-import OpenPGP from "react-native-fast-openpgp";
-import { strings } from "@notesnook/intl";
 
 export class KV {
   storage: MMKVInstance;
@@ -138,41 +136,11 @@ export const Storage: IStorage = {
   clear(): Promise<void> {
     return DefaultStorage.clear();
   },
-  async generatePGPKeyPair() {
-    const keys = await OpenPGP.generate({
-      name: "NN",
-      email: "NN@NN.NN"
-    });
-    return { publicKey: keys.publicKey, privateKey: keys.privateKey };
+  generateCryptoKeyPair() {
+    throw new Error("Not implemented");
   },
-  async validatePGPKeyPair(keys): Promise<{
-    isValid: boolean;
-    message: string;
-  }> {
-    try {
-      const dummyData = JSON.stringify({
-        favorite: true,
-        title: "Hello world"
-      });
-      const encrypted = await OpenPGP.encrypt(dummyData, keys.publicKey);
-      const decrypted = await OpenPGP.decrypt(encrypted, keys.privateKey, "");
-
-      const isValid = decrypted === dummyData;
-
-      return {
-        isValid,
-        message: isValid ? "" : strings.invalidPgpKeyPair()
-      };
-    } catch (e) {
-      console.error("PGP key pair validation error:", e);
-      return {
-        isValid: false,
-        message: strings.invalidPgpKeyPair()
-      };
-    }
-  },
-  async decryptPGPMessage(privateKeyArmored, encryptedMessage) {
-    return await OpenPGP.decrypt(encryptedMessage, privateKeyArmored, "");
+  decryptAsymmetric() {
+    throw new Error("Not implemented");
   },
   getAllKeys(): Promise<string[]> {
     return DefaultStorage.getAllKeys();

apps/mobile/app/common/design/font.ts

@@ -1,56 +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/>.
-*/
-export const FontSizes = {
-  XXS: 10,
-  XS: 12,
-  SM: 14,
-  MD: 16,
-  LG: 18,
-  XL: 20,
-  XXL: 32
-};
-
-export const FontFamily = {
-  REGULAR: "Inter-Regular", // 400
-  MEDIUM: "Inter-Medium", // 500
-  SEMI_BOLD: "Inter-SemiBold", // 600
-  BOLD: "Inter-Bold" // 700
-};
-
-const LineHeightMultipliers = {
-  "100%": 1,
-  "110%": 1.1,
-  "120%": 1.2,
-  "130%": 1.3,
-  "140%": 1.4,
-  "150%": 1.5
-};
-export type LineHeightVariants =
-  | "100%"
-  | "110%"
-  | "120%"
-  | "130%"
-  | "140%"
-  | "150%";
-export const getLineHeight = (
-  fontSize: keyof typeof FontSizes,
-  type: LineHeightVariants
-) => {
-  return FontSizes[fontSize] * LineHeightMultipliers[type];
-};

apps/mobile/app/common/design/spacing.ts

@@ -1,39 +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/>.
-*/
-export const Spacing = {
-  LEVEL_0: 4,
-  LEVEL_1: 8,
-  LEVEL_2: 12,
-  LEVEL_3: 16,
-  LEVEL_4: 20,
-  LEVEL_5: 24,
-  LEVEL_6: 28,
-  LEVEL_7: 32,
-  LEVEL_8: 40
-};
-
-export const Radius = {
-  XXS: 4,
-  XS: 8,
-  S: 12,
-  MD: 16,
-  LG: 20,
-  LG_2: 32,
-  XXL: 40
-};

apps/mobile/app/common/design/theme.ts

@@ -1,283 +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 { ThemeDefinition } from "@notesnook/theme";
-
-export const THEME_LIGHT: any = {
-  $schema:
-    "https://raw.githubusercontent.com/streetwriters/notesnook-themes/main/schemas/v1.schema.json",
-  name: "Notesnook Light",
-  id: "default-light",
-  version: 2.1,
-  license: "GPL-3.0-or-later",
-  homepage: "https://notesnook.com",
-  description: "The default light theme for Notesnook app.",
-  colorScheme: "light",
-  codeBlockCSS: ``,
-  compatibilityVersion: 1,
-  authors: [
-    {
-      name: "Streetwriters",
-      email: "support@streetwriters.co",
-      url: "https://streetwriters.co"
-    }
-  ],
-  scopes: {
-    base: {
-      primary: {
-        accent: "#008836",
-        accentForeground: "#ffffff",
-        paragraph: "#666666",
-        background: "#ffffff",
-        border: "#E2E2E2",
-        heading: "#181818",
-        icon: "#181818",
-        separator: "#F0F0F0",
-        placeholder: "#858585",
-        hover: "#eee",
-        backdrop: "#0000001a",
-        buttonForeground: "#181818"
-      },
-      secondary: {
-        accent: "#0D9E46",
-        accentForeground: "#ffffff",
-        paragraph: "#858585",
-        background: "#F7F7F7",
-        border: "#EFEFEF",
-        heading: "#4B4B4B",
-        icon: "#666666",
-        separator: "#E8E8E8",
-        placeholder: "#999999",
-        hover: "#dbdbdb",
-        backdrop: "#0000001a",
-        buttonForeground: "#181818"
-      },
-      tertiary: {
-        accent: "#008836",
-        accentForeground: "#ffffff",
-        paragraph: "#777",
-        background: "#ECECEC",
-        border: "#E8E8E8",
-        heading: "#666",
-        icon: "#777",
-        separator: "#E8E8E8",
-        placeholder: "#a9a9a9",
-        hover: "#dbdbdb",
-        backdrop: "#0000001a"
-      },
-      disabled: {
-        accent: "#008836",
-        accentForeground: "#ffffff",
-        paragraph: "#A6A6A6",
-        background: "#ffffff",
-        border: "#E8E8E8",
-        heading: "#212121",
-        icon: "#DADADA",
-        separator: "#E8E8E8",
-        placeholder: "#a9a9a9",
-        hover: "#00000010",
-        backdrop: "#0000001a"
-      },
-      selected: {
-        accent: "#008836",
-        accentForeground: "#ffffff",
-        paragraph: "#181818",
-        background: "#00883610",
-        border: "#008836",
-        heading: "#212121",
-        icon: "#181818",
-        separator: "#E8E8E8",
-        placeholder: "#a9a9a9",
-        hover: "#eee",
-        backdrop: "#0000001a"
-      },
-      error: {
-        accent: "#f54b42",
-        accentForeground: "#ffffff",
-        paragraph: "#FF242E",
-        background: "#FFEDEE",
-        border: "#F7999D",
-        heading: "#f54b42",
-        icon: "#FB2C36",
-        separator: "#E8E8E8",
-        placeholder: "#a9a9a9",
-        hover: "#00000010",
-        backdrop: "#0000001a"
-      },
-      success: {
-        accent: "#4F8A10",
-        accentForeground: "#ffffff",
-        paragraph: "#4F8A10",
-        background: "#85ce68",
-        border: "#E8E8E8",
-        heading: "#4F8A10",
-        icon: "#4F8A10",
-        separator: "#E8E8E8",
-        placeholder: "#a9a9a9",
-        hover: "#00000010",
-        backdrop: "#0000001a"
-      }
-    },
-    statusBar: {
-      primary: { paragraph: "#5E5E5E", background: "#f7f7f7" }
-    },
-    navigationMenu: {
-      primary: {
-        background: "#f7f7f7",
-        paragraph: "#666",
-        icon: "#666",
-        hover: "#eee"
-      },
-      secondary: { background: "#EEEEEE" },
-      selected: {
-        background: "#00883610",
-        hover: "#eee"
-      }
-    },
-    contextMenu: { primary: { background: "#f7f7f7" } },
-    editor: { selected: { background: "#e1e1e1" } },
-    sheet: { selected: { paragraph: "#008836" } },
-    list: {
-      secondary: {
-        heading: "#A6A6A6"
-      }
-    }
-  }
-};
-
-export const THEME_DARK: any = {
-  name: "Notesnook Dark",
-  id: "default-dark",
-  version: 2.1,
-  license: "GPL-3.0-or-later",
-  homepage: "https://notesnook.com",
-  description: "The default dark theme for the Notesnook app",
-  colorScheme: "dark",
-  codeBlockCSS: ``,
-  compatibilityVersion: 1,
-  authors: [
-    {
-      name: "Streetwriters",
-      email: "support@streetwriters.co",
-      url: "https://streetwriters.co"
-    }
-  ],
-  scopes: {
-    base: {
-      primary: {
-        accent: "#008836",
-        accentForeground: "#ffffff",
-        paragraph: "#F2F2F2",
-        background: "#181818",
-        border: "#2A2A2A",
-        heading: "#FFFFFF",
-        icon: "#FFFFFF",
-        separator: "#383838",
-        placeholder: "#404040",
-        hover: "#2b2b2b",
-        backdrop: "#35353580",
-        buttonForeground: "#FFFFFF"
-      },
-      secondary: {
-        accent: "#0D9E46",
-        accentForeground: "#ffffff",
-        paragraph: "#A1A1A1",
-        background: "#252525",
-        border: "#0A5729",
-        heading: "#C0BFBF",
-        icon: "#808080",
-        separator: "#383838",
-        placeholder: "#404040",
-        hover: "#ffffff10",
-        backdrop: "#35353580",
-        buttonForeground: "#BFBFBF"
-      },
-      tertiary: {
-        accent: "#0D9E46",
-        accentForeground: "#ffffff",
-        paragraph: "#818589",
-        background: "#2C2C2C",
-        border: "#2b2b2b",
-        heading: "#808080",
-        icon: "#808080",
-        separator: "#383838",
-        placeholder: "#404040",
-        hover: "#ffffff10",
-        backdrop: "#35353580"
-      },
-      disabled: {
-        accent: "#008836",
-        accentForeground: "#ffffff",
-        paragraph: "#505050",
-        background: "#ffffff",
-        border: "#383838",
-        heading: "#212121",
-        icon: "#FFFFFF",
-        separator: "#383838",
-        placeholder: "#404040",
-        hover: "#ffffff10",
-        backdrop: "#35353580"
-      },
-      selected: {
-        accent: "#008836",
-        accentForeground: "#ffffff",
-        paragraph: "#FBFBFB",
-        background: "#494949",
-        border: "#008836",
-        heading: "#e3e3e3",
-        icon: "#008836",
-        separator: "#383838",
-        placeholder: "#404040",
-        hover: "#ffffff10",
-        backdrop: "#35353580"
-      },
-      error: {
-        accent: "#f54b42",
-        accentForeground: "#ffffff",
-        paragraph: "#f54b42",
-        background: "#250b0a",
-        border: "#F7999D",
-        heading: "#f54b42",
-        icon: "#f54b42",
-        separator: "#383838",
-        placeholder: "#404040",
-        hover: "#ffffff10",
-        backdrop: "#35353580"
-      },
-      success: {
-        accent: "#4F8A10",
-        accentForeground: "#ffffff",
-        paragraph: "#4F8A10",
-        background: "#132204",
-        border: "#383838",
-        heading: "#4F8A10",
-        icon: "#4F8A10",
-        separator: "#383838",
-        placeholder: "#404040",
-        hover: "#ffffff10",
-        backdrop: "#35353580"
-      }
-    },
-    list: { selected: { background: "#202020" } },
-    contextMenu: { primary: { background: "#202020" } },
-    sheet: { selected: { paragraph: "#008836" } }
-  },
-  $schema:
-    "https://raw.githubusercontent.com/streetwriters/notesnook-themes/main/schemas/v1.schema.json"
-};

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

@@ -112,8 +112,8 @@ export async function writeEncryptedBase64(
 async function deleteLocalFile(filename: string) {
   try {
     await createCacheDir();
-    const path = cacheDir + `/${filename}`;
-    const exists = await RNFetchBlob.fs.exists(path);
+    let path = cacheDir + `/${filename}`;
+    let exists = await RNFetchBlob.fs.exists(path);
     if (Platform.OS === "ios" && !exists) {
       const iosAppGroup =
         Platform.OS === "ios"
@@ -309,9 +309,7 @@ export async function deleteDCacheFiles() {
         });
       }
     }
-  } catch (e) {
-    /** Empty */
-  }
+  } catch (e) {}
 }
 
 export async function getCachePathForFile(filename: string) {

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

@@ -33,10 +33,6 @@ import {
 } 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
@@ -201,20 +197,6 @@ 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
@@ -230,9 +212,6 @@ export async function uploadFile(
     );
 
     if (Platform.OS === "android") {
-      useUserStore.setState({
-        disableAppLockRequests: true
-      });
       const status = await PermissionsAndroid.request(
         "android.permission.POST_NOTIFICATIONS"
       );
@@ -242,10 +221,6 @@ export async function uploadFile(
           type: "info"
         });
       }
-      await sleep(500);
-      useUserStore.setState({
-        disableAppLockRequests: false
-      });
     }
 
     let uploaded = false;

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

@@ -115,10 +115,6 @@ export const FileSizeResult = {
   Error: -1
 };
 
-function getFileSizeFromHeaders(headers: Headers) {
-  return headers.get("x-object-size") || headers.get("content-length");
-}
-
 export async function getUploadedFileSize(hash: string, retry = 0) {
   try {
     const url = `${hosts.API_HOST}/s3?name=${hash}`;
@@ -128,21 +124,24 @@ export async function getUploadedFileSize(hash: string, retry = 0) {
       headers: { Authorization: `Bearer ${token}` }
     });
 
-    const fileSize = getFileSizeFromHeaders(attachmentInfo.headers);
-
-    if (!attachmentInfo.ok || fileSize === null) {
+    if (
+      !attachmentInfo.ok ||
+      attachmentInfo.headers?.get("content-length") === null
+    ) {
       if (retry < 3) {
         DatabaseLogger.log(`Retrying file size check: ${hash}, ${retry}`);
         return getUploadedFileSize(hash, retry + 1);
       }
       throw new Error(
-        `File size check failed: ${hash}, ${attachmentInfo.status}, ${fileSize}`
+        `File size check failed: ${hash}, ${
+          attachmentInfo.status
+        }, ${attachmentInfo.headers?.get("content-length")}`
       );
     }
 
-    console.log(attachmentInfo.headers);
-
-    const contentLength = parseInt(fileSize as string);
+    const contentLength = parseInt(
+      attachmentInfo.headers?.get("content-length") as string
+    );
     return isNaN(contentLength) ? FileSizeResult.Empty : contentLength;
   } catch (e) {
     DatabaseLogger.error(e);
@@ -192,8 +191,7 @@ export async function checkAndCreateDir(path: string) {
 }
 
 export const santizeUri = (uri: string) => {
-  const decoded = decodeURI(uri);
-  return Platform.OS === "ios" ? decoded.replace("file:///", "/") : decoded;
+  return Platform.OS === "ios" ? decodeURI(uri).replace("file:///", "/") : uri;
 };
 
 export function isSuccessStatusCode(statusCode: number) {

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

@@ -36,7 +36,7 @@ export const Announcement = () => {
     state.announcements,
     state.remove
   ]);
-  const announcement = announcements.length > 0 ? announcements[0] : null;
+  let announcement = announcements.length > 0 ? announcements[0] : null;
   const selectionMode = useSelectionStore((state) => state.selectionMode);
 
   return !announcement || selectionMode ? null : (
@@ -71,7 +71,7 @@ export const Announcement = () => {
               alignItems: "center",
               paddingHorizontal: DefaultAppStyles.GAP,
               borderBottomWidth: 1,
-              borderBottomColor: colors.primary.separator,
+              borderBottomColor: colors.primary.border,
               paddingBottom: DefaultAppStyles.GAP_VERTICAL_SMALL
             }}
           >

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();
-  const buttons =
+  let buttons =
     props.item.actions.filter((item) => allowedOnPlatform(item.platforms)) ||
     [];
 

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

@@ -53,9 +53,9 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { strings } from "@notesnook/intl";
+import { AppFontSize } from "../../utils/size";
 import { editorController } from "../../screens/editor/tiptap/utils";
 import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
-import { PASSWORD_PLACEHOLDER } from "../../utils/constants";
 
 const getUser = () => {
   const user = MMKV.getString("user");
@@ -97,6 +97,9 @@ const AppLocked = () => {
   const lastAppState = useRef<AppStateStatus>(appState);
   const biometricUnlockAwaitingUserInput = useRef(false);
   const { height } = useWindowDimensions();
+  const keyboardType = useSettingStore(
+    (state) => state.settings.applockKeyboardType
+  );
   const appLockHasPasswordSecurity = useSettingStore(
     (state) => state.settings.appLockHasPasswordSecurity
   );
@@ -155,7 +158,8 @@ const AppLocked = () => {
         if (!appLockHasPasswordSecurity) {
           await setAppLockVerificationCipher(password.current);
           SettingsService.set({
-            appLockHasPasswordSecurity: true
+            appLockHasPasswordSecurity: true,
+            applockKeyboardType: "default"
           });
           DatabaseLogger.info("App lock migrated to password security");
         }
@@ -164,7 +168,7 @@ const AppLocked = () => {
         password.current = undefined;
       } else {
         ToastManager.show({
-          heading: strings.invalid("password"),
+          heading: strings.invalid(keyboardType),
           type: "error",
           context: "local"
         });
@@ -287,7 +291,9 @@ const AppLocked = () => {
               <Input
                 fwdRef={passwordInputRef}
                 secureTextEntry
-                keyboardType={"default"}
+                keyboardType={
+                  appLockHasPasswordSecurity ? keyboardType : "default"
+                }
                 onLayout={async () => {
                   if (
                     !biometricsAuthEnabled ||
@@ -298,7 +304,13 @@ const AppLocked = () => {
                     }, 32);
                   }
                 }}
-                placeholder={PASSWORD_PLACEHOLDER}
+                placeholder={
+                  appLockHasPasswordSecurity
+                    ? keyboardType === "numeric"
+                      ? strings.enterApplockPassword()
+                      : strings.enterApplockPin()
+                    : strings.enterAccountPassword()
+                }
                 onChangeText={(v) => (password.current = v)}
                 onSubmit={() => {
                   onSubmit();

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

@@ -19,15 +19,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { formatBytes } from "@notesnook/common";
 import { Attachment, Note, VirtualizedGrouping } from "@notesnook/core";
-import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import Clipboard from "@react-native-clipboard/clipboard";
 import React, { RefObject, useEffect, useState } from "react";
-import { TextInput, View } from "react-native";
+import { View } from "react-native";
 import { ActionSheetRef } from "react-native-actions-sheet";
 import { ScrollView } from "react-native-gesture-handler";
 import { db } from "../../common/database";
-import { Radius, Spacing } from "../../common/design/spacing";
 import filesystem from "../../common/filesystem";
 import downloadAttachment from "../../common/filesystem/download-attachment";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
@@ -39,7 +37,6 @@ import {
   eSendEvent,
   presentSheet
 } from "../../services/event-manager";
-import Navigation from "../../services/navigation";
 import PremiumService from "../../services/premium";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import {
@@ -49,19 +46,19 @@ import {
   eOnLoadNote
 } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
+import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
 import { openNote } from "../list-items/note/wrapper";
 import { DateMeta } from "../properties/date-meta";
 import SheetProvider from "../sheet-provider";
-import AppIcon from "../ui/AppIcon";
-import { createFormRef, validators } from "../ui/input/form-input";
+import { Button } from "../ui/button";
 import { Notice } from "../ui/notice";
 import { Pressable } from "../ui/pressable";
-import LineSeparator from "../ui/seperator/line-separator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const Actions = ({
   attachment,
@@ -96,7 +93,7 @@ const Actions = ({
         downloadAttachment(attachment.hash, context === "global");
         fwdRef.current?.hide();
       },
-      icon: "download-simple"
+      icon: "download"
     },
     {
       name: strings.network.reupload(),
@@ -116,7 +113,7 @@ const Actions = ({
           type: attachment.mimeType.startsWith("image") ? "image" : "file"
         });
       },
-      icon: "upload-simple"
+      icon: "upload"
     },
     {
       name: strings.fileCheck(),
@@ -151,107 +148,57 @@ const Actions = ({
           name: undefined
         });
       },
-      icon: "file"
+      icon: "file-check"
     },
     {
       name: strings.rename(),
       onPress: () => {
-        close?.();
-        setTimeout(() => {
-          presentDialog({
-            title: strings.renameFile(),
-            form: {
-              formRef: createFormRef({
-                name: attachment.filename
-              }),
-              items: [
-                {
-                  name: "name",
-                  defaultValue: attachment.filename,
-                  placeholder: strings.enterTitle(),
-                  ref: React.createRef<TextInput | null>(),
-                  validators: [validators.required(strings.nameIsRequired())]
-                }
-              ],
-              onFormSubmit: async (form) => {
-                try {
-                  const value = form.getValue("name");
-                  await db.attachments.add({
-                    hash: attachment.hash,
-                    filename: value
-                  });
-                  setFilename(value);
-                  setAttachments();
-                  eSendEvent(eDBItemUpdate, attachment.id);
-                  ToastManager.show({
-                    message: `Attachment renamed to ${value}`,
-                    type: "success"
-                  });
-
-                  return true;
-                } catch (e) {
-                  form.setError("name", (e as Error).message);
-                  return false;
-                }
-              }
-            },
-            positiveText: strings.rename()
-          });
-        }, 500);
+        presentDialog({
+          input: true,
+          title: strings.renameFile(),
+          defaultValue: attachment.filename,
+          positivePress: async (value) => {
+            if (value && value.length > 0) {
+              await db.attachments.add({
+                hash: attachment.hash,
+                filename: value
+              });
+              setFilename(value);
+              setAttachments();
+              eSendEvent(eDBItemUpdate, attachment.id);
+            }
+            return true;
+          },
+          positiveText: strings.rename()
+        });
       },
-      icon: "pencil-simple"
+      icon: "form-textbox"
     },
     {
       name: strings.delete(),
       onPress: async () => {
-        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()
+        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
                 });
-                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;
+              } else {
+                editorController.current.commands.setLoading(true, tab.id);
               }
-            }
+            });
           });
-        }, 500);
+        close?.();
       },
-      icon: "trash"
+      icon: "delete-outline"
     }
   ];
 
@@ -269,7 +216,6 @@ const Actions = ({
       onMomentumScrollEnd={() => {
         fwdRef?.current?.handleChildScrollEnd();
       }}
-      bounces={false}
       nestedScrollEnabled={true}
       style={{
         maxHeight: "100%"
@@ -280,34 +226,42 @@ const Actions = ({
       <SheetProvider context={contextId} />
       <View
         style={{
-          paddingHorizontal: Spacing.LEVEL_3,
-          paddingTop: Spacing.LEVEL_4,
-          gap: Spacing.LEVEL_1
+          borderBottomWidth: 1,
+          borderBottomColor: colors.primary.border,
+          marginBottom:
+            notes && notes.length > 0 ? 0 : DefaultAppStyles.GAP_VERTICAL
         }}
       >
-        <Heading fontSize="LG">{filename}</Heading>
+        <Heading
+          style={{
+            paddingHorizontal: DefaultAppStyles.GAP
+          }}
+          size={AppFontSize.lg}
+        >
+          {filename}
+        </Heading>
 
         <View
           style={{
             flexDirection: "row",
-            gap: Spacing.LEVEL_1,
-            alignItems: "center"
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
+            paddingHorizontal: DefaultAppStyles.GAP,
+            marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
+            gap: 10
           }}
         >
-          <Paragraph fontSize="XS" color={colors.secondary.paragraph}>
+          <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
             {attachment.mimeType}
           </Paragraph>
-          <Paragraph fontSize="XS">•</Paragraph>
           <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
             {formatBytes(attachment.size)}
           </Paragraph>
-          <Paragraph fontSize="XS">•</Paragraph>
+
           {notes.length ? (
-            <Paragraph fontSize="XS" color={colors.secondary.paragraph}>
+            <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
               {strings.notes(notes.length)}
             </Paragraph>
           ) : null}
-          <Paragraph fontSize="XS">•</Paragraph>
           <Paragraph
             onPress={() => {
               Clipboard.setString(attachment.hash);
@@ -317,123 +271,82 @@ const Actions = ({
                 context: "local"
               });
             }}
-            fontSize="XS"
+            size={AppFontSize.xs}
             color={colors.secondary.paragraph}
           >
-            <AppIcon
-              name="copy"
-              size={10}
-              color={colors.secondary.paragraph}
-              iconFamily="notesnook"
-            />{" "}
             {attachment.hash}
           </Paragraph>
         </View>
 
-        <LineSeparator paddingVertical={Spacing.LEVEL_2} />
-
         <DateMeta item={attachment} />
       </View>
 
       {notes && notes.length > 0 ? (
-        <>
-          <LineSeparator
-            paddingHorizontal={Spacing.LEVEL_3}
-            paddingVertical={Spacing.LEVEL_3}
-          />
-          <View
-            style={{
-              paddingHorizontal: Spacing.LEVEL_3,
-              gap: Spacing.LEVEL_2
-            }}
-          >
-            <>
-              <Heading size={AppFontSize.sm}>
-                {strings.notes(notes.length)}
-              </Heading>
+        <View
+          style={{
+            borderBottomWidth: 1,
+            borderBottomColor: colors.primary.border,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL
+          }}
+        >
+          <>
+            <Heading
+              style={{
+                paddingHorizontal: DefaultAppStyles.GAP
+              }}
+              size={AppFontSize.sm}
+            >
+              {strings.listOf()} {strings.dataTypesPlural.note()}:
+            </Heading>
 
-              {notes.map((item) => (
-                <Pressable
-                  onPress={async () => {
-                    eSendEvent(eCloseSheet, contextId);
-                    close?.();
-                    eSendEvent(eCloseAttachmentDialog);
-                    Navigation.navigate("FluidPanelsView");
-                    openNote(item, (item as any).type === "trash");
-                  }}
-                  style={{
-                    alignItems: "flex-start"
-                  }}
-                  key={item.id}
-                >
-                  <Paragraph fontSize="XS">{item.title}</Paragraph>
-                </Pressable>
-              ))}
-            </>
-          </View>
-        </>
+            {notes.map((item) => (
+              <Pressable
+                onPress={async () => {
+                  eSendEvent(eCloseSheet, contextId);
+                  await sleep(150);
+                  eSendEvent(eCloseAttachmentDialog);
+                  await sleep(300);
+                  openNote(item, (item as any).type === "trash");
+                }}
+                style={{
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+                  alignItems: "flex-start",
+
+                  paddingHorizontal: DefaultAppStyles.GAP
+                }}
+                key={item.id}
+              >
+                <Paragraph size={AppFontSize.xs}>{item.title}</Paragraph>
+              </Pressable>
+            ))}
+          </>
+        </View>
       ) : null}
 
-      <LineSeparator
-        paddingHorizontal={Spacing.LEVEL_3}
-        paddingVertical={Spacing.LEVEL_3}
-      />
-
-      <View
-        style={{
-          gap: Spacing.LEVEL_2
-        }}
-      >
-        {actions.map((item) => (
-          <Pressable
-            key={item.name}
-            onPress={item.onPress}
-            type="plain"
-            style={{
-              borderRadius: 0,
-              flexDirection: "row",
-              width: "100%",
-              gap: Spacing.LEVEL_1,
-              justifyContent: "flex-start",
-              paddingHorizontal: Spacing.LEVEL_3
-            }}
-          >
-            <View
-              style={{
-                width: 32,
-                height: 32,
-                backgroundColor: colors.secondary.background,
-                borderRadius: Radius.XS,
-                justifyContent: "center",
-                alignItems: "center"
-              }}
-            >
-              <AppIcon
-                color={
-                  item.icon === "trash"
-                    ? colors.error.accent
-                    : colors.primary.icon
-                }
-                name={item.icon}
-                iconFamily="notesnook"
-                size={16}
-              />
-            </View>
-
-            <Paragraph
-              color={
-                item.icon === "trash"
-                  ? colors.error.accent
-                  : colors.primary.heading
-              }
-              fontSize="SM"
-              fontFamily="MEDIUM"
-            >
-              {item.name}
-            </Paragraph>
-          </Pressable>
-        ))}
-      </View>
+      {actions.map((item) => (
+        <Button
+          key={item.name}
+          buttonType={{
+            text:
+              item.name === "Delete"
+                ? colors.error.paragraph
+                : colors.primary.paragraph
+          }}
+          onPress={item.onPress}
+          title={item.name}
+          icon={item.icon}
+          loading={loading?.name === item.name}
+          type="plain"
+          fontSize={AppFontSize.sm}
+          style={{
+            borderRadius: 0,
+            justifyContent: "flex-start",
+            alignSelf: "flex-start",
+            width: "100%"
+          }}
+        />
+      ))}
 
       <View
         style={{

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

@@ -17,29 +17,26 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { formatBytes, getFormattedDate } from "@notesnook/common";
+import { formatBytes } from "@notesnook/common";
 import { Attachment, VirtualizedGrouping } from "@notesnook/core";
-import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { View } from "react-native";
-import { Radius, Spacing } from "../../common/design/spacing";
+import { TouchableOpacity, View } from "react-native";
+import { db } from "../../common/database";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
 import { useDBItem } from "../../hooks/use-db-item";
-import AppIcon from "../ui/AppIcon";
-import { Pressable } from "../ui/pressable";
-import { ProgressBarComponent } from "../ui/svg/lazy";
-import Heading from "../ui/typography/heading";
+import { defaultBorderRadius, AppFontSize } from "../../utils/size";
+import { IconButton } from "../ui/icon-button";
+import { ProgressCircleComponent } from "../ui/svg/lazy";
 import Paragraph from "../ui/typography/paragraph";
 import Actions from "./actions";
-import { IconButton } from "../ui/icon-button";
+import { strings } from "@notesnook/intl";
+import { Pressable } from "../ui/pressable";
+import { DefaultAppStyles } from "../../utils/styles";
 
-function getAttachmentIcon(attachment: Attachment) {
-  const mimeType = attachment.mimeType || "";
-  if (mimeType.startsWith("image/")) return "image";
-  if (mimeType.startsWith("video/")) return "video-camera";
-  if (mimeType.startsWith("audio/")) return "music-notes";
-  return "file-text";
+function getFileExtension(filename: string) {
+  const ext = /^.+\.([^.]+)$/.exec(filename);
+  return ext == null ? "" : ext[1];
 }
 
 export const AttachmentItem = ({
@@ -78,15 +75,11 @@ export const AttachmentItem = ({
       onPress={onPress}
       style={{
         flexDirection: "row",
-        alignItems: "center",
+        marginVertical: 5,
         justifyContent: "space-between",
-        gap: Spacing.LEVEL_2,
-        borderWidth: 1,
-        borderColor: colors.primary.border,
-        borderRadius: Radius.S,
-        paddingHorizontal: Spacing.LEVEL_2,
-        paddingVertical: Spacing.LEVEL_3,
-        marginBottom: Spacing.LEVEL_2
+        padding: DefaultAppStyles.GAP,
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+        minHeight: 45
       }}
     >
       {!attachment ? null : (
@@ -96,112 +89,107 @@ export const AttachmentItem = ({
               flexShrink: 1,
               flexDirection: "row",
               alignItems: "center",
-              gap: Spacing.LEVEL_2
+              gap: 10
             }}
           >
             <View
               style={{
-                width: 40,
-                height: 40,
-                borderRadius: Radius.XS,
-                backgroundColor: colors.secondary.background,
                 justifyContent: "center",
-                alignItems: "center"
+                alignItems: "center",
+                marginLeft: -5,
+                borderWidth: 1,
+                borderColor: colors.secondary.border,
+                paddingHorizontal: 2,
+                width: 30,
+                height: 30,
+                borderRadius: defaultBorderRadius
               }}
             >
-              <AppIcon
-                name={getAttachmentIcon(attachment)}
-                iconFamily="notesnook"
-                size={20}
-                color={colors.primary.icon}
-              />
+              <Paragraph
+                adjustsFontSizeToFit
+                size={8}
+                color={colors.secondary.paragraph}
+                style={{
+                  maxWidth: 30
+                }}
+                numberOfLines={1}
+              >
+                {getFileExtension(attachment.filename).toUpperCase() ||
+                  attachment.mimeType.split("/")?.[1]?.toUpperCase()}
+              </Paragraph>
             </View>
 
             <View
               style={{
-                flexShrink: 1,
-                width: "100%",
-                gap: Spacing.LEVEL_1
+                flexShrink: 1
               }}
             >
-              <Heading
-                fontSize="MD"
-                lineBreakMode="middle"
-                color={colors.primary.heading}
-              >
-                book.pdf
-              </Heading>
-
-              <View
+              <Paragraph
+                size={AppFontSize.sm}
                 style={{
-                  flexDirection: "row",
-                  gap: Spacing.LEVEL_1
+                  flexWrap: "wrap"
                 }}
+                numberOfLines={1}
+                lineBreakMode="middle"
+                color={colors.primary.paragraph}
               >
-                {attachment.failed ? (
-                  <AppIcon
-                    size={13}
-                    name="alert-circle-outline"
-                    color={colors.error.paragraph}
-                  />
-                ) : null}
-                {!hideWhenNotDownloading ? (
-                  <Paragraph
-                    fontSize="XS"
-                    numberOfLines={1}
-                    color={colors.secondary.paragraph}
-                  >
-                    {getFormattedDate(attachment.dateModified)} |{" "}
-                    {formatBytes(attachment.size)}
-                  </Paragraph>
-                ) : null}
-              </View>
+                {attachment.filename}
+              </Paragraph>
 
-              {currentProgress ? (
-                <View
-                  style={{
-                    width: "100%",
-                    gap: Spacing.LEVEL_0,
-                    flexGrow: 1
-                  }}
+              {!hideWhenNotDownloading ? (
+                <Paragraph
+                  color={colors.secondary.paragraph}
+                  size={AppFontSize.xxs}
                 >
-                  <ProgressBarComponent
-                    height={6}
-                    width={null}
-                    animated={true}
-                    useNativeDriver
-                    progress={currentProgress.value}
-                    unfilledColor={colors.secondary.background}
-                    color={colors.primary.accent}
-                    borderWidth={0}
-                  />
-                  <Paragraph color={colors.secondary.paragraph} fontSize="XS">
-                    {currentProgress.percent} |{" "}
-                    {currentProgress.type === "upload"
-                      ? strings.uploading()
-                      : strings.downloading()}
-                  </Paragraph>
-                </View>
+                  {strings.fileSize()}: {formatBytes(attachment.size)}
+                </Paragraph>
               ) : null}
             </View>
           </View>
+
+          {currentProgress ? (
+            <TouchableOpacity
+              activeOpacity={0.9}
+              onPress={() => {
+                if (encryption || !pressable) return;
+                db.fs().cancel(attachment.hash);
+                setCurrentProgress(undefined);
+              }}
+              style={{
+                justifyContent: "center",
+                marginLeft: 5,
+                marginTop: 5,
+                marginRight: -5
+              }}
+            >
+              <ProgressCircleComponent
+                size={AppFontSize.xxl}
+                progress={
+                  currentProgress?.value ? currentProgress?.value / 100 : 0
+                }
+                showsText
+                textStyle={{
+                  fontSize: 10
+                }}
+                color={colors.primary.accent}
+                formatText={(progress) => (progress * 100).toFixed(0)}
+                borderWidth={0}
+                thickness={2}
+              />
+            </TouchableOpacity>
+          ) : (
+            <>
+              {attachment.failed ? (
+                <IconButton
+                  onPress={onPress}
+                  name="alert-circle-outline"
+                  color={colors.error.paragraph}
+                />
+              ) : null}
+            </>
+          )}
         </>
       )}
-
-      <IconButton
-        color={colors.secondary.icon}
-        name="dots-three"
-        iconFamily="notesnook"
-        size={20}
-        onPress={onPress}
-        style={{
-          justifyContent: "center",
-          height: undefined,
-          width: undefined,
-          borderRadius: 100,
-          alignItems: "center"
-        }}
-      />
     </Pressable>
   );
 };

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

@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { LegendList } from "@legendapp/list";
 import {
   Attachment,
   FilteredSelector,
@@ -27,32 +28,32 @@ import {
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useRef, useState } from "react";
-import { ActivityIndicator, FlatList, ScrollView, View } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+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";
 import { db } from "../../common/database";
-import { FontSizes } from "../../common/design/font";
-import { Radius, Spacing } from "../../common/design/spacing";
 import filesystem from "../../common/filesystem";
 import { downloadAttachments } from "../../common/filesystem/download-attachment";
-import { AttachmentItem } from "../../components/attachments/attachment-item";
-import { presentDialog } from "../../components/dialog/functions";
-import { Header } from "../../components/header";
-import AppIcon from "../../components/ui/AppIcon";
-import { Button } from "../../components/ui/button";
-import { IconButton } from "../../components/ui/icon-button";
-import Input from "../../components/ui/input";
-import { Pressable } from "../../components/ui/pressable";
-import LineSeparator from "../../components/ui/seperator/line-separator";
-import Heading from "../../components/ui/typography/heading";
-import Paragraph from "../../components/ui/typography/paragraph";
-import { ToastManager } from "../../services/event-manager";
-import { NavigationProps } from "../../services/navigation";
+import { AttachmentGroupProgress } from "../../screens/settings/attachment-group-progress";
+import { presentSheet, ToastManager } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { AttachmentGroupProgress } from "../settings/components/attachment-group-progress";
+import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
+import { Dialog } from "../dialog";
+import { presentDialog } from "../dialog/functions";
+import { Header } from "../header";
+import SheetProvider from "../sheet-provider";
+import { Button } from "../ui/button";
+import { IconButton } from "../ui/icon-button";
+import Input from "../ui/input";
+import Seperator from "../ui/seperator";
+import Heading from "../ui/typography/heading";
+import Paragraph from "../ui/typography/paragraph";
+import { AttachmentItem } from "./attachment-item";
 
 const DEFAULT_SORTING: SortOptions = {
-  sortBy: "dateModified",
+  sortBy: "dateEdited",
   sortDirection: "desc"
 };
 
@@ -124,13 +125,17 @@ const attachmentTypes = [
   }
 ];
 
-const Attachments = (props: NavigationProps<"Attachments">) => {
-  const note = props.route.params?.note;
+export const AttachmentDialog = ({
+  note,
+  isSheet
+}: {
+  note?: Note;
+  isSheet: boolean;
+}) => {
   const { colors } = useThemeColors();
   const [attachments, setAttachments] =
     useState<VirtualizedGrouping<Attachment>>();
   const attachmentSearchValue = useRef<string>(undefined);
-  const [searchVisible, setSearchVisible] = useState(false);
   const [loading, setLoading] = useState(true);
   const searchTimer = useRef<NodeJS.Timeout>(undefined);
   const [currentFilter, setCurrentFilter] = useState("all");
@@ -150,16 +155,24 @@ const Attachments = (props: NavigationProps<"Attachments">) => {
     if (note) {
       db.attachments
         .ofNote(note.id, "all")
-        .sorted(DEFAULT_SORTING)
+        .sorted({
+          ...DEFAULT_SORTING,
+          sortBy: "dateModified"
+        })
         .then((attachments) => {
           setLoading(false);
           setAttachments(attachments);
         });
     } else {
-      db.attachments.all.sorted(DEFAULT_SORTING).then((attachments) => {
-        setAttachments(attachments);
-        setLoading(false);
-      });
+      db.attachments.all
+        .sorted({
+          ...DEFAULT_SORTING,
+          sortBy: "dateModified"
+        })
+        .then((attachments) => {
+          setAttachments(attachments);
+          setLoading(false);
+        });
     }
   }, [note]);
 
@@ -194,7 +207,7 @@ const Attachments = (props: NavigationProps<"Attachments">) => {
       errorOnly={currentFilter === "errors"}
       attachments={attachments}
       id={index}
-      context="global"
+      context={!isSheet ? "global" : "attachments-list"}
     />
   );
 
@@ -225,7 +238,7 @@ const Attachments = (props: NavigationProps<"Attachments">) => {
         ToastManager.show({
           message: strings.attachmentRecheckCancelled(),
           type: "info",
-          context: "global"
+          context: isSheet ? "local" : "global"
         });
         return;
       }
@@ -271,7 +284,7 @@ const Attachments = (props: NavigationProps<"Attachments">) => {
           : db.attachments.images;
         break;
       case "video":
-        items = note
+        items = items = note
           ? db.attachments.ofNote(note.id, "videos")
           : db.attachments.videos;
         break;
@@ -289,94 +302,198 @@ const Attachments = (props: NavigationProps<"Attachments">) => {
         items = db.attachments.orphaned;
         break;
       case "errors":
-        items = note
+        items = items = note
           ? db.attachments.ofNote(note.id, "all")
           : db.attachments.all;
     }
 
-    return await items.sorted(DEFAULT_SORTING);
-  };
-
-  const downloadAll = () => {
-    if (!attachments) return;
-    presentDialog({
-      title: strings.doActions.download.attachment(
-        attachments.placeholders.length
-      ),
-      positiveText: strings.network.download(),
-      positivePress: async () => {
-        downloadAttachments(await attachments.ids());
-      },
-      negativeText: strings.cancel()
+    return await items.sorted({
+      ...DEFAULT_SORTING,
+      sortBy: "dateModified"
     });
   };
 
-  const currentType = attachmentTypes.find(
-    (item) => item.filterBy === currentFilter
-  );
-  const sectionTitle =
-    currentFilter === "all"
-      ? strings.allAttachments()
-      : currentType?.title || strings.allAttachments();
+  db.attachments.orphaned.items().then((r) => {
+    console.log(r);
+  });
 
   return (
-    <SafeAreaView
-      style={{ flex: 1, backgroundColor: colors.primary.background }}
-    >
-      <Header
-        renderedInRoute="Attachments"
-        id="Attachments"
-        title={strings.dataTypesPluralCamelCase.attachment()}
-        canGoBack
-        style={{
-          backgroundColor: colors.primary.background
-        }}
-      />
+    <>
+      {isSheet ? (
+        <>
+          <SheetProvider context="attachments-list" />
+          <Dialog context="local" />
+        </>
+      ) : null}
+      {!isSheet ? (
+        <Header
+          title={strings.manageAttachments()}
+          renderedInRoute="SettingsGroup"
+          canGoBack
+        />
+      ) : (
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            paddingHorizontal: DefaultAppStyles.GAP
+          }}
+        >
+          <Heading>{strings.dataTypesPluralCamelCase.attachment()}</Heading>
+
+          <View
+            style={{
+              flexDirection: "row"
+            }}
+          >
+            <IconButton
+              name="check-all"
+              style={{
+                marginRight: 10
+              }}
+              color={colors.primary.paragraph}
+              size={AppFontSize.lg}
+              onPress={onCheck}
+            />
+
+            <IconButton
+              name="download"
+              color={colors.primary.paragraph}
+              onPress={() => {
+                if (!attachments) return;
+                presentDialog({
+                  title: strings.doActions.download.attachment(
+                    attachments.placeholders.length
+                  ),
+                  positiveText: strings.network.download(),
+                  positivePress: async () => {
+                    downloadAttachments(await attachments.ids());
+                  },
+                  negativeText: strings.cancel()
+                });
+              }}
+              size={AppFontSize.lg}
+            />
+          </View>
+        </View>
+      )}
 
       <View
         style={{
-          flex: 1,
-          paddingHorizontal: Spacing.LEVEL_3,
-          gap: Spacing.LEVEL_3
+          width: "100%",
+          alignSelf: "center",
+          paddingHorizontal: DefaultAppStyles.GAP,
+          height: "100%"
         }}
       >
+        <Seperator />
         <Input
           placeholder={strings.filterAttachments()}
           onChangeText={onChangeText}
-          containerStyle={{
-            borderWidth: 0,
-            backgroundColor: colors.secondary.background
-          }}
           onSubmit={() => {
             onChangeText(attachmentSearchValue.current as string);
           }}
-          button={{
-            icon: "search",
-            iconFamily: "notesnook",
-            color: colors.primary.icon,
-            size: 16,
-            onPress: () => {}
-          }}
         />
 
-        <LineSeparator />
+        {rechecker.shown ? (
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              width: "100%",
+              borderRadius: 10,
+              padding: DefaultAppStyles.GAP_SMALL,
+              borderWidth: 1,
+              borderColor: colors.primary.border,
+              gap: 12,
+              justifyContent: "space-between"
+            }}
+          >
+            <View
+              style={{
+                flexDirection: "row",
+                gap: 12,
+                alignItems: "center"
+              }}
+            >
+              {rechecker.isWorking ? (
+                <ActivityIndicator color={colors.primary.accent} />
+              ) : (
+                <Icon
+                  name="file-check"
+                  size={30}
+                  color={colors.primary.accent}
+                />
+              )}
+
+              <View>
+                <Paragraph>
+                  {rechecker.isWorking
+                    ? note
+                      ? strings.checkingNoteAttachments()
+                      : strings.checkingAllAttachments()
+                    : strings.attachmentRecheckComplete()}
+                </Paragraph>
+                <Paragraph>
+                  {`${
+                    rechecker.isWorking ? `${strings.pleaseWait()} ` : ""
+                  }${strings.passed()}: ${
+                    rechecker.passed
+                  }, ${strings.failed()}: ${rechecker.failed}`}
+                </Paragraph>
+              </View>
+            </View>
+
+            <IconButton
+              type={rechecker.isWorking ? "errorShade" : "plain"}
+              name={rechecker.isWorking ? "close" : "check"}
+              size={AppFontSize.lg}
+              color={
+                rechecker.isWorking ? colors.error.icon : colors.primary.accent
+              }
+              onPress={() => {
+                useRechecker.getState().setProgress(note?.id || "all", {
+                  ...useRechecker.getState().progress[note?.id || "all"],
+                  shown: false,
+                  isWorking: false
+                });
+              }}
+            />
+          </View>
+        ) : null}
 
         <View>
           <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={{
-              gap: Spacing.LEVEL_1
+            style={{
+              backgroundColor: colors.primary.background,
+              flexWrap: "wrap",
+              flexDirection: "row",
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
+            contentContainerStyle={{
+              alignItems: "center"
+            }}
+            horizontal
           >
             {attachmentTypes.map((item) =>
               item.filterBy === "orphaned" && note ? null : (
-                <Pressable
-                  key={item.filterBy}
+                <Button
                   type={
-                    currentFilter === item.filterBy ? "selected" : "transparent"
+                    currentFilter === item.filterBy
+                      ? "secondaryAccented"
+                      : "plain"
                   }
-                  onPress={() => {
+                  key={item.title}
+                  title={item.title}
+                  fontSize={AppFontSize.sm}
+                  style={{
+                    borderRadius: 100,
+                    paddingHorizontal: DefaultAppStyles.GAP,
+                    height: 40,
+                    minWidth: 80
+                  }}
+                  onPress={async () => {
                     const filterBy = item.filterBy;
                     setCurrentFilter(filterBy);
                     setLoading(true);
@@ -390,168 +507,52 @@ const Attachments = (props: NavigationProps<"Attachments">) => {
                         /* empty */
                       });
                   }}
-                  style={{
-                    borderRadius: Radius.XXL,
-                    borderWidth: currentFilter === item.filterBy ? 0 : 1,
-                    borderColor: colors.primary.border,
-                    paddingHorizontal: Spacing.LEVEL_3,
-                    paddingVertical: Spacing.LEVEL_1,
-                    width: "auto"
-                  }}
-                >
-                  <Paragraph
-                    fontFamily="MEDIUM"
-                    fontSize="SM"
-                    color={
-                      currentFilter === item.filterBy
-                        ? colors.primary.heading
-                        : colors.secondary.paragraph
-                    }
-                  >
-                    {item.title}
-                  </Paragraph>
-                </Pressable>
+                />
               )
             )}
           </ScrollView>
         </View>
 
-        {rechecker.shown ? (
-          <View
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              width: "100%",
-              borderRadius: Radius.S,
-              padding: Spacing.LEVEL_2,
-              gap: Spacing.LEVEL_2,
-              justifyContent: "space-between",
-              backgroundColor: colors.primary.shade
-            }}
-          >
-            <View
-              style={{
-                flexDirection: "row",
-                gap: Spacing.LEVEL_2,
-                alignItems: "center",
-                flexShrink: 1
-              }}
-            >
-              <View
-                style={{
-                  width: 32,
-                  height: 32,
-                  backgroundColor: colors.secondary.background,
-                  borderRadius: Radius.XS,
-                  justifyContent: "center",
-                  alignItems: "center"
-                }}
-              >
-                <AppIcon
-                  name="check-circle"
-                  iconFamily="notesnook"
-                  size={20}
-                  color={colors.primary.icon}
-                />
-              </View>
-
-              <View style={{ flexShrink: 1, gap: Spacing.LEVEL_0 }}>
-                <Heading color={colors.primary.heading} fontSize="SM">
-                  {rechecker.isWorking
-                    ? note
-                      ? strings.checkingNoteAttachments()
-                      : strings.checkingAllAttachments()
-                    : strings.attachmentRecheckComplete()}
-                </Heading>
-                <Paragraph fontSize="XS" color={colors.secondary.paragraph}>
-                  {`${
-                    rechecker.isWorking ? `${strings.pleaseWait()} ` : ""
-                  }${strings.passed()}: ${
-                    rechecker.passed
-                  }, ${strings.failed()}: ${rechecker.failed}`}
-                </Paragraph>
-              </View>
-            </View>
-
-            <IconButton
-              type={rechecker.isWorking ? "errorShade" : "plain"}
-              name={"close"}
-              iconFamily="notesnook"
-              size={12}
-              color={colors.secondary.icon}
-              onPress={() => {
-                useRechecker.getState().setProgress(note?.id || "all", {
-                  ...useRechecker.getState().progress[note?.id || "all"],
-                  shown: false,
-                  isWorking: false
-                });
-              }}
-            />
-          </View>
-        ) : null}
-
-        <View
-          style={{
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "space-between"
-          }}
-        >
-          <Heading fontSize="LG">{sectionTitle}</Heading>
-
-          <Button
-            title={strings.verifyFiles()}
-            icon="shield-check"
-            iconFamily="notesnook"
-            type="accent"
-            fontSize={FontSizes.XS}
-            loading={rechecker.isWorking}
-            style={{
-              paddingVertical: Spacing.LEVEL_2,
-              paddingHorizontal: Spacing.LEVEL_2
-            }}
-            onPress={onCheck}
-          />
-        </View>
-
         <FlatList
-          style={{ flex: 1 }}
+          renderScrollComponent={(props) => <ScrollView {...props} />}
           keyboardDismissMode="none"
           keyboardShouldPersistTaps="always"
           ListEmptyComponent={
             <View
               style={{
-                height: 250,
+                height: "100%",
                 justifyContent: "center",
-                alignItems: "center",
-                gap: Spacing.LEVEL_2
+                alignItems: "center"
               }}
             >
               {loading ? (
                 <ActivityIndicator size={40} color={colors.primary.accent} />
               ) : (
                 <>
-                  <AppIcon
-                    name="paperclip"
-                    iconFamily="notesnook"
-                    size={50}
+                  <Icon
+                    name="attachment"
+                    size={60}
                     color={colors.secondary.icon}
                   />
-                  <Paragraph color={colors.secondary.paragraph}>
-                    {strings.noAttachments()}
-                  </Paragraph>
+                  <Paragraph>{strings.noAttachments()}</Paragraph>
                 </>
               )}
             </View>
           }
           ListHeaderComponent={<AllProgress note={note} />}
-          ListFooterComponent={<View style={{ height: 350 }} />}
+          ListFooterComponent={
+            <View
+              style={{
+                height: 350
+              }}
+            />
+          }
           data={loading ? [] : attachments?.placeholders || []}
           extraData={attachments}
           renderItem={renderItem}
         />
       </View>
-    </SafeAreaView>
+    </>
   );
 };
 
@@ -572,7 +573,7 @@ const AllProgress = ({ note }: { note?: Note }) => {
   return (
     <View
       style={{
-        gap: Spacing.LEVEL_2,
+        gap: 10,
         width: "100%"
       }}
     >
@@ -587,4 +588,9 @@ const AllProgress = ({ note }: { note?: Note }) => {
   );
 };
 
-export default Attachments;
+AttachmentDialog.present = (note?: Note) => {
+  presentSheet({
+    component: () => <AttachmentDialog note={note} isSheet={true} />,
+    keyboardHandlerDisabled: true
+  });
+};

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

@@ -18,55 +18,50 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { strings } from "@notesnook/intl";
-import { useThemeColors } from "@notesnook/theme";
 import React, { useRef, useState } from "react";
 import { View } from "react-native";
-import { TextInput } from "react-native-gesture-handler";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { db } from "../../common/database";
-import { Spacing } from "../../common/design/spacing";
 import BackupService from "../../services/backup";
-import { ToastManager } from "../../services/event-manager";
+import { eSendEvent, ToastManager } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import { useUserStore } from "../../stores/use-user-store";
-import { AppFontSize } from "../../utils/size";
+import { eOpenRecoveryKeyDialog } from "../../utils/events";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Dialog } from "../dialog";
-import RecoveryKeySheet from "../sheets/recovery-key";
-import AppIcon from "../ui/AppIcon";
 import { Button } from "../ui/button";
-import FormInput, { createFormRef, validators } from "../ui/input/form-input";
+import Input from "../ui/input";
 import { Notice } from "../ui/notice";
-import Paragraph from "../ui/typography/paragraph";
+import { TextInput } from "react-native-gesture-handler";
 
 export const ChangePassword = () => {
-  const { colors } = useThemeColors();
-  const formRef = useRef(
-    createFormRef({
-      oldPassword: "",
-      password: ""
-    })
-  );
-  const oldPasswordInputRef = useRef<TextInput>(null);
   const passwordInputRef = useRef<TextInput>(null);
+  const password = useRef<string>(undefined);
+  const oldPasswordInputRef = useRef<TextInput>(null);
+  const oldPassword = useRef<string>(undefined);
+
+  const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string>();
   const user = useUserStore((state) => state.user);
 
   const changePassword = async () => {
-    setError(undefined);
-    formRef.current.clearErrors();
-
     if (!user?.isEmailConfirmed) {
-      setError(strings.emailNotConfirmedDesc());
+      ToastManager.show({
+        heading: strings.emailNotConfirmed(),
+        message: strings.emailNotConfirmedDesc(),
+        type: "error",
+        context: "local"
+      });
       return;
     }
-    if (!formRef.current.validate()) {
+    if (error || !oldPassword.current || !password.current) {
+      ToastManager.show({
+        heading: strings.allFieldsRequired(),
+        message: strings.allFieldsRequiredDesc(),
+        type: "error",
+        context: "local"
+      });
       return;
     }
-
-    const values = formRef.current.getValues();
-
     setLoading(true);
     try {
       const result = await BackupService.run(
@@ -79,8 +74,8 @@ export const ChangePassword = () => {
       }
 
       const passwordChanged = await db.user.changePassword(
-        values.oldPassword,
-        values.password
+        oldPassword.current,
+        password.current
       );
 
       if (!passwordChanged) {
@@ -94,144 +89,73 @@ export const ChangePassword = () => {
       });
       setLoading(false);
       Navigation.goBack();
-      RecoveryKeySheet.present();
+      eSendEvent(eOpenRecoveryKeyDialog);
     } catch (e) {
-      const message = (e as Error).message;
       setLoading(false);
-
-      if (/old password/i.test(message)) {
-        formRef.current.setError("oldPassword", message);
-      } else {
-        setError(message);
-      }
+      ToastManager.show({
+        heading: strings.passwordChangeFailed(),
+        message: (e as Error).message,
+        type: "error",
+        context: "local"
+      });
     }
+    setLoading(false);
   };
 
   return (
-    <KeyboardAwareScrollView
+    <View
       style={{
-        width: "100%"
+        width: "100%",
+        padding: DefaultAppStyles.GAP
       }}
-      contentContainerStyle={{
-        paddingTop: Spacing.LEVEL_4,
-        paddingHorizontal: Spacing.LEVEL_3,
-        gap: Spacing.LEVEL_2
-      }}
-      keyboardShouldPersistTaps="handled"
-      keyboardDismissMode="interactive"
     >
       <Dialog context="change-password-dialog" />
-      <FormInput
-        name="oldPassword"
-        label={strings.oldPassword()}
-        formRef={formRef}
+      <Input
         fwdRef={oldPasswordInputRef}
-        loading={loading}
-        validators={[validators.required(strings.currentPasswordRequired())]}
+        onChangeText={(value) => {
+          oldPassword.current = value;
+        }}
         returnKeyLabel="Next"
         returnKeyType="next"
         secureTextEntry
         autoComplete="password"
         autoCapitalize="none"
         autoCorrect={false}
-        placeholder={"•••••••••"}
-        onSubmitEditing={() => {
-          passwordInputRef.current?.focus();
-        }}
+        placeholder={strings.oldPassword()}
       />
 
-      <FormInput
-        name="password"
-        label={strings.newPassword()}
-        formRef={formRef}
+      <Input
         fwdRef={passwordInputRef}
-        loading={loading}
-        validators={[validators.required(strings.passwordRequired())]}
+        onChangeText={(value) => {
+          password.current = value;
+        }}
+        onErrorCheck={(e) => setError(e)}
         returnKeyLabel={strings.next()}
         returnKeyType="next"
         secureTextEntry
+        validationType="password"
         autoComplete="password"
         autoCapitalize="none"
         autoCorrect={false}
-        placeholder={"•••••••••"}
-        onSubmitEditing={() => {
-          changePassword();
-        }}
+        placeholder={strings.newPassword()}
       />
 
-      <FormInput
-        name="confirmPassword"
-        label={strings.confirmPassword()}
-        formRef={formRef}
-        fwdRef={passwordInputRef}
-        loading={loading}
-        validators={[
-          validators.matchField("password", strings.confirmPasswordRequired())
-        ]}
-        returnKeyLabel={strings.next()}
-        returnKeyType="next"
-        secureTextEntry
-        autoComplete="password"
-        autoCapitalize="none"
-        autoCorrect={false}
-        placeholder={"•••••••••"}
-        onSubmitEditing={() => {
-          changePassword();
-        }}
-      />
+      <Notice text={strings.changePasswordNotice()} type="alert" />
 
-      {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}
-        </Paragraph>
-      ) : null}
+      <View style={{ height: 10 }} />
 
-      <Notice
-        text={strings.changePasswordNotice()}
-        type="information"
-        size="small"
-      />
+      <Notice text={strings.changePasswordNotice2()} type="alert" />
 
       <Button
         style={{
-          width: "100%",
-          marginTop: Spacing.LEVEL_1
+          marginTop: DefaultAppStyles.GAP_VERTICAL,
+          width: "100%"
         }}
         loading={loading}
         onPress={changePassword}
         type="accent"
         title={loading ? null : strings.changePasswordConfirm()}
       />
-
-      <View
-        style={{
-          flexDirection: "row",
-          gap: Spacing.LEVEL_1,
-          alignSelf: "center",
-          marginTop: Spacing.LEVEL_0
-        }}
-      >
-        <AppIcon
-          size={15}
-          name="shield-check"
-          iconFamily="notesnook"
-          color={colors.secondary.icon}
-        />
-        <Paragraph>{strings.yourSecurityIsPriority()}</Paragraph>
-      </View>
-    </KeyboardAwareScrollView>
+    </View>
   );
 };

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

@@ -27,7 +27,7 @@ import { useThemeColors } from "@notesnook/theme";
 import DialogHeader from "../dialog/dialog-header";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
-import FormInput, { createFormRef, validators } from "../ui/input/form-input";
+import Input from "../ui/input";
 import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
@@ -36,32 +36,31 @@ import { DefaultAppStyles } from "../../utils/styles";
 
 export const ForgotPassword = ({ userEmail }: { userEmail: string }) => {
   const { colors } = useThemeColors("sheet");
-  const formRef = useRef(
-    createFormRef({
-      email: userEmail || ""
-    })
-  );
+  const email = useRef<string>(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 (formRef.current.validateField("email")) {
+    if (!email.current || error) {
+      ToastManager.show({
+        heading: strings.emailRequired(),
+        type: "error",
+        context: "local"
+      });
       return;
     }
-
-    const values = formRef.current.getValues();
-
     setLoading(true);
     try {
-      const lastRecoveryEmailTime = SettingsService.get().lastRecoveryEmailTime;
+      let lastRecoveryEmailTime = SettingsService.get().lastRecoveryEmailTime;
       if (
         lastRecoveryEmailTime &&
         Date.now() - lastRecoveryEmailTime < 60000 * 3
       ) {
         throw new Error(strings.pleaseWaitBeforeSendEmail());
       }
-      await db.user.recoverAccount(values.email.toLowerCase());
+      await db.user.recoverAccount(email.current.toLowerCase());
       SettingsService.set({
         lastRecoveryEmailTime: Date.now()
       });
@@ -76,7 +75,12 @@ export const ForgotPassword = ({ userEmail }: { userEmail: string }) => {
       setSent(true);
     } catch (e) {
       setLoading(false);
-      formRef.current.setError("email", (e as Error).message);
+      ToastManager.show({
+        heading: strings.recoveryEmailFailed(),
+        message: (e as Error).message,
+        type: "error",
+        context: "local"
+      });
     }
   };
 
@@ -122,25 +126,22 @@ export const ForgotPassword = ({ userEmail }: { userEmail: string }) => {
           <DialogHeader title={strings.accountRecovery()} />
           <Seperator />
 
-          <FormInput
-            name="email"
-            formRef={formRef}
+          <Input
             fwdRef={emailInputRef}
-            loading={loading}
+            onChangeText={(value) => {
+              email.current = value;
+            }}
+            defaultValue={email.current}
+            onErrorCheck={(e) => setError(e)}
             returnKeyLabel={strings.next()}
             returnKeyType="next"
             autoComplete="email"
-            keyboardType="email-address"
+            validationType="email"
             autoCorrect={false}
             autoCapitalize="none"
+            errorMessage={strings.emailInvalid()}
             placeholder={strings.email()}
-            validators={[
-              validators.required(strings.emailRequired()),
-              validators.email(strings.enterAValidEmailAddress())
-            ]}
-            onSubmitEditing={() => {
-              sendRecoveryEmail();
-            }}
+            onSubmit={() => {}}
           />
 
           <Button

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

@@ -24,9 +24,6 @@ import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import { hideAuth } from "./common";
 import { AuthParams } from "../../stores/use-navigation-store";
-import { ProgressPills } from "../intro/progress-pills";
-import { FontSizes } from "../../common/design/font";
-import { Spacing } from "../../common/design/spacing";
 export const AuthHeader = (props: { welcome?: boolean }) => {
   const { colors } = useThemeColors();
   const route = useRoute();
@@ -40,22 +37,19 @@ export const AuthHeader = (props: { welcome?: boolean }) => {
       <View
         style={{
           flexDirection: "row",
-          paddingHorizontal: Spacing.LEVEL_3,
+          alignItems: "center",
+          paddingHorizontal: 12,
           width: "100%",
-          justifyContent: "space-between",
-          alignItems: "center"
+          height: 50,
+          justifyContent: !props.welcome ? "space-between" : "flex-end"
         }}
       >
-        {props.welcome ? (
-          <ProgressPills activePillIndex={1} />
-        ) : (
+        {props.welcome ? null : (
           <IconButton
-            name="arrow-back"
-            iconFamily="notesnook"
+            name="arrow-left"
             onPress={() => {
               hideAuth((route.params as AuthParams)?.context);
             }}
-            size={24}
             color={colors.primary.paragraph}
           />
         )}
@@ -66,16 +60,16 @@ export const AuthHeader = (props: { welcome?: boolean }) => {
             onPress={() => {
               hideAuth();
             }}
-            iconSize={24}
-            fontSize={FontSizes.SM}
+            iconSize={16}
             type="plain"
-            fontFamily="REGULAR"
             iconPosition="right"
             icon="chevron-right"
+            height={25}
+            iconStyle={{
+              marginTop: 2
+            }}
             style={{
-              paddingRight: 0,
-              paddingHorizontal: 0,
-              paddingVertical: 0
+              paddingHorizontal: 6
             }}
           />
         )}

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

@@ -17,15 +17,15 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { useThemeColors } from "@notesnook/theme";
 import React, { useState } from "react";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
-import { NavigationProps } from "../../services/navigation";
 import { Toast } from "../toast";
 import { AuthMode, initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
+import { useThemeColors } from "@notesnook/theme";
+import { NavigationProps } from "../../services/navigation";
 
 const Auth = ({ navigation, route }: NavigationProps<"Auth">) => {
   const [currentAuthMode, setCurrentAuthMode] = useState(

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

@@ -21,12 +21,15 @@ import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import { RouteProp, useRoute } from "@react-navigation/native";
 import React, { useEffect, useState } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View, useWindowDimensions } from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-import { db } from "../../common/database";
-import { Spacing } from "../../common/design/spacing";
 import { DDS } from "../../services/device-detection";
-import { eSendEvent, presentSheet } from "../../services/event-manager";
+import {
+  eSendEvent,
+  presentSheet,
+  ToastManager
+} from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
@@ -35,20 +38,18 @@ import { RouteParams } from "../../stores/use-navigation-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { eUserLoggedIn } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
-import { ProgressPills } from "../intro/progress-pills";
+import { Dialog } from "../dialog";
 import { Progress } from "../sheets/progress";
 import { Button } from "../ui/button";
+import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
 import { AuthHeader } from "./header";
-import TwoFactorVerification from "./two-factor";
 import { useLogin } from "./use-login";
-import FormInput, { validators } from "../ui/input/form-input";
-import AppIcon from "../ui/AppIcon";
-import { PASSWORD_PLACEHOLDER } from "../../utils/constants";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -67,14 +68,14 @@ export const Login = ({
   const {
     step,
     setStep,
+    password,
+    email,
     emailInputRef,
     passwordInputRef,
     loading,
     setLoading,
-    error,
-    login,
-    mfaData,
-    formRef
+    setError,
+    login
   } = useLogin(async () => {
     eSendEvent(eUserLoggedIn, true);
     await sleep(500);
@@ -95,11 +96,8 @@ export const Login = ({
       Progress.present();
     }
   });
-
-  const onContinue = () => {
-    login();
-  };
-
+  const { width, height } = useWindowDimensions();
+  const isTablet = width > 600;
   useEffect(() => {
     async () => {
       setStep(LoginSteps.emailAuth);
@@ -116,257 +114,228 @@ export const Login = ({
   return (
     <>
       <AuthHeader />
-
-      <View
-        style={{
-          paddingHorizontal: Spacing.LEVEL_3,
-          marginTop: Spacing.LEVEL_4
-        }}
-      >
-        <ProgressPills
-          count={2}
-          activePillIndex={step === LoginSteps.emailAuth ? 0 : 1}
-        />
-      </View>
-
+      <Dialog context="two_factor_verify" />
       <KeyboardAwareScrollView
         style={{
           width: "100%"
         }}
         contentContainerStyle={{
-          minHeight: "99%"
+          minHeight: "90%"
         }}
         nestedScrollEnabled
         enableAutomaticScroll={true}
         keyboardShouldPersistTaps="handled"
       >
-        {step === LoginSteps.emailAuth || step === LoginSteps.passwordAuth ? (
+        <View
+          style={{
+            borderRadius: DDS.isTab ? 5 : 0,
+            backgroundColor: colors.primary.background,
+            zIndex: 10,
+            width: "100%",
+            height: "100%",
+            alignSelf: "center"
+          }}
+        >
           <View
             style={{
-              borderRadius: DDS.isTab ? 5 : 0,
-              backgroundColor: colors.primary.background,
-              zIndex: 10,
-              width: "100%",
-              alignSelf: "center",
-              height: "100%",
-              paddingHorizontal: Spacing.LEVEL_3,
-              paddingTop: Spacing.LEVEL_6
+              justifyContent: "flex-end",
+              paddingHorizontal: DefaultAppStyles.GAP,
+              borderBottomWidth: 0.8,
+              marginBottom: DefaultAppStyles.GAP_VERTICAL,
+              borderBottomColor: colors.primary.border,
+              alignSelf: isTablet ? "center" : undefined,
+              borderWidth: isTablet ? 1 : undefined,
+              borderColor: isTablet ? colors.primary.border : undefined,
+              borderRadius: isTablet ? 20 : undefined,
+              marginTop: isTablet ? 50 : undefined,
+              width: !isTablet ? undefined : "50%",
+              minHeight: height * 0.4
             }}
           >
-            <Heading
-              style={{
-                paddingBottom: Spacing.LEVEL_4
-              }}
-              fontSize="XL"
-            >
-              {strings.loginToYourAccount()}
-            </Heading>
             <View
               style={{
-                width: DDS.isTab
-                  ? focused
-                    ? "50%"
-                    : "49.99%"
-                  : focused
-                    ? "100%"
-                    : "99.9%",
-                backgroundColor: colors.primary.background,
-                alignSelf: "center",
-                gap: Spacing.LEVEL_2
+                flexDirection: "row"
               }}
             >
-              <FormInput
-                name="email"
-                formRef={formRef}
-                fwdRef={emailInputRef}
-                testID="input.email"
-                label={strings.email()}
-                returnKeyLabel="Next"
-                returnKeyType="next"
-                autoComplete="email"
-                keyboardType="email-address"
-                marginBottom={0}
-                autoCorrect={false}
-                autoCapitalize="none"
-                placeholder={strings.email()}
-                editable={step === LoginSteps.emailAuth && !loading}
-                validators={[
-                  validators.required(strings.emailRequired()),
-                  validators.email(strings.enterAValidEmailAddress())
-                ]}
-                onSubmitEditing={() => {
-                  passwordInputRef.current?.focus();
-                }}
-              />
-
-              <FormInput
-                name="password"
-                formRef={formRef}
-                fwdRef={passwordInputRef}
-                label={strings.password()}
-                testID="input.password"
-                returnKeyLabel={strings.done()}
-                returnKeyType="done"
-                secureTextEntry
-                autoComplete="password"
-                autoCapitalize="none"
-                autoCorrect={false}
-                placeholder={PASSWORD_PLACEHOLDER}
-                marginBottom={0}
-                editable={!loading}
-                validators={[validators.required(strings.passwordRequired())]}
-                onSubmitEditing={() => {
-                  onContinue();
-                }}
-              />
-
-              <Button
-                title={strings.forgotPassword()}
+              <View
                 style={{
-                  alignSelf: "flex-end",
-                  paddingVertical: 0,
-                  paddingHorizontal: 0
-                }}
-                onPress={() => {
-                  if (loading || !formRef.current.getValue("email")) return;
-                  presentSheet({
-                    component: (
-                      <ForgotPassword
-                        userEmail={formRef.current.getValue("email")}
-                      />
-                    )
-                  });
-                }}
-                fontFamily="REGULAR"
-                fontSize={AppFontSize.sm}
-                type="plain"
-                textStyle={{
-                  color: colors.secondary.paragraph
+                  width: 100,
+                  height: 5,
+                  backgroundColor: colors.primary.accent,
+                  borderRadius: 2,
+                  marginRight: 7
                 }}
               />
 
               <View
                 style={{
-                  marginTop: Spacing.LEVEL_1,
-                  gap: Spacing.LEVEL_2
+                  width: 20,
+                  height: 5,
+                  backgroundColor: colors.secondary.background,
+                  borderRadius: 2
                 }}
-              >
-                <Button
-                  loading={loading}
-                  onPress={() => {
-                    if (loading) return;
-                    login();
-                  }}
-                  style={{
-                    width: "100%"
-                  }}
-                  type="accent"
-                  title={!loading ? strings.continue() : null}
-                  fontSize={AppFontSize.sm}
-                />
-
-                {!loading ? (
-                  <TouchableOpacity
-                    onPress={() => {
-                      if (loading) return;
-                      changeMode(1);
-                    }}
-                    activeOpacity={0.8}
-                    style={{
-                      alignSelf: "center",
-                      paddingVertical: 0
-                    }}
-                  >
-                    <Paragraph fontSize="SM" color={colors.secondary.paragraph}>
-                      {strings.dontHaveAccount()}{" "}
-                      <Paragraph
-                        fontSize="SM"
-                        style={{ color: colors.primary.accent }}
-                        fontFamily="SEMI_BOLD"
-                      >
-                        {strings.signUp()}
-                      </Paragraph>
-                    </Paragraph>
-                  </TouchableOpacity>
-                ) : null}
-
-                {error ? (
-                  <Paragraph
-                    numberOfLines={4}
-                    onPress={() => {}}
-                    color={colors.error.accent}
-                    style={{
-                      textAlign: "center",
-                      marginTop: Spacing.LEVEL_2
-                    }}
-                  >
-                    <AppIcon
-                      color={colors.error.accent}
-                      name="alert-circle-outline"
-                      size={AppFontSize.sm - 1}
-                    />{" "}
-                    {error.message}
-                  </Paragraph>
-                ) : null}
-              </View>
+              />
             </View>
+            <Heading
+              style={{
+                marginBottom: 25,
+                marginTop: DefaultAppStyles.GAP_VERTICAL
+              }}
+              extraBold
+              size={AppFontSize.xxl}
+            >
+              {strings.loginToYourAccount()}
+            </Heading>
           </View>
-        ) : (
+
           <View
             style={{
-              borderRadius: DDS.isTab ? 5 : 0,
+              width: DDS.isTab
+                ? focused
+                  ? "50%"
+                  : "49.99%"
+                : focused
+                  ? "100%"
+                  : "99.9%",
               backgroundColor: colors.primary.background,
-              zIndex: 10,
-              width: "100%",
               alignSelf: "center",
-              height: "100%",
-              paddingHorizontal: Spacing.LEVEL_3,
-              paddingTop: Spacing.LEVEL_6
+              paddingHorizontal: DDS.isTab ? 0 : DefaultAppStyles.GAP,
+              gap: DefaultAppStyles.GAP_VERTICAL
             }}
           >
-            <TwoFactorVerification
-              onMfaLogin={async (
-                mfa: any,
-                callback: (success: boolean) => void,
-                onerror: (error: Error) => void
-              ) => {
-                try {
-                  const success = await db.user.authenticateMultiFactorCode(
-                    mfa.code,
-                    mfa.method
-                  );
-
-                  await login();
-
-                  if (success) {
-                    setLoading(false);
-                    callback && callback(true);
-                  }
-                  callback && callback(false);
-                } catch (e) {
-                  callback && callback(false);
-                  if ((e as Error).message === "invalid_grant") {
-                    setLoading(false);
-                    setStep(LoginSteps.emailAuth);
-                  } else {
-                    onerror(e as Error);
-                  }
-                }
+            <Input
+              fwdRef={emailInputRef}
+              onChangeText={(value) => {
+                email.current = value;
               }}
-              mfaInfo={
-                mfaData.current || {
-                  primaryMethod: "email",
-                  secondaryMethod: "sms",
-                  token: ""
+              testID="input.email"
+              onErrorCheck={(e) => setError(e)}
+              returnKeyLabel="Next"
+              returnKeyType="next"
+              autoComplete="email"
+              validationType="email"
+              marginBottom={0}
+              autoCorrect={false}
+              autoCapitalize="none"
+              errorMessage={strings.emailInvalid()}
+              placeholder={strings.email()}
+              defaultValue={email.current}
+              editable={step === LoginSteps.emailAuth && !loading}
+              onSubmit={() => {
+                if (step === LoginSteps.emailAuth) {
+                  login();
+                } else {
+                  passwordInputRef.current?.focus();
                 }
-              }
-              onCancel={() => {
-                setLoading(false);
-                setStep(LoginSteps.emailAuth);
               }}
             />
+
+            {step === LoginSteps.passwordAuth && (
+              <>
+                <Input
+                  fwdRef={passwordInputRef}
+                  onChangeText={(value) => {
+                    password.current = value;
+                  }}
+                  testID="input.password"
+                  returnKeyLabel={strings.done()}
+                  returnKeyType="done"
+                  secureTextEntry
+                  autoComplete="password"
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  placeholder={strings.password()}
+                  marginBottom={0}
+                  editable={!loading}
+                  defaultValue={password.current}
+                  onSubmit={() => {
+                    login();
+                  }}
+                />
+                <Button
+                  title={strings.forgotPassword()}
+                  style={{
+                    alignSelf: "flex-end",
+                    paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
+                    paddingHorizontal: 0
+                  }}
+                  onPress={() => {
+                    if (loading || !email.current) return;
+                    presentSheet({
+                      component: <ForgotPassword userEmail={email.current} />
+                    });
+                  }}
+                  textStyle={{
+                    textDecorationLine: "underline"
+                  }}
+                  fontSize={AppFontSize.xs}
+                  type="plain"
+                />
+              </>
+            )}
+
+            <View>
+              <Button
+                loading={loading}
+                onPress={() => {
+                  if (loading) return;
+                  login();
+                }}
+                style={{
+                  width: "100%"
+                }}
+                type="accent"
+                title={!loading ? strings.continue() : null}
+                fontSize={AppFontSize.sm}
+              />
+
+              {step === LoginSteps.passwordAuth && (
+                <Button
+                  title={strings.cancelLogin()}
+                  style={{
+                    alignSelf: "center",
+                    marginTop: DefaultAppStyles.GAP_VERTICAL,
+                    width: "100%"
+                  }}
+                  onPress={() => {
+                    if (loading) return;
+                    setStep(LoginSteps.emailAuth);
+                    setLoading(false);
+                  }}
+                  type="secondaryAccented"
+                />
+              )}
+
+              {!loading ? (
+                <TouchableOpacity
+                  onPress={() => {
+                    if (loading) return;
+                    changeMode(1);
+                  }}
+                  activeOpacity={0.8}
+                  style={{
+                    alignSelf: "center",
+                    marginTop: DefaultAppStyles.GAP_VERTICAL,
+                    paddingVertical: DefaultAppStyles.GAP_VERTICAL
+                  }}
+                >
+                  <Paragraph
+                    size={AppFontSize.xs}
+                    color={colors.secondary.paragraph}
+                  >
+                    {strings.dontHaveAccount()}{" "}
+                    <Paragraph
+                      size={AppFontSize.xs}
+                      style={{ color: colors.primary.accent }}
+                    >
+                      {strings.signUp()}
+                    </Paragraph>
+                  </Paragraph>
+                </TouchableOpacity>
+              ) : null}
+            </View>
           </View>
-        )}
+        </View>
       </KeyboardAwareScrollView>
     </>
   );

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

@@ -34,35 +34,38 @@ import Sync from "../../services/sync";
 import { clearAllStores } from "../../stores";
 import { useUserStore } from "../../stores/use-user-store";
 import { eLoginSessionExpired, eUserLoggedIn } from "../../utils/events";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import BaseDialog from "../dialog/base-dialog";
 import { presentDialog } from "../dialog/functions";
 import SheetProvider from "../sheet-provider";
 import { Toast } from "../toast";
-import AppIcon from "../ui/AppIcon";
 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 { useLogin } from "./use-login";
+import { LoginSteps, useLogin } from "./use-login";
 import { strings } from "@notesnook/intl";
 import { getObfuscatedEmail } from "../../utils/functions";
 import { DefaultAppStyles } from "../../utils/styles";
-import { Spacing } from "../../common/design/spacing";
-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, passwordInputRef, loading, login, formRef } = useLogin(() => {
-    eSendEvent(eUserLoggedIn, true);
-    setVisible(false);
-    setFocused(false);
-    useUserStore.setState({
-      disableAppLockRequests: false
-    });
-  }, true);
+  const { step, password, email, passwordInputRef, loading, login } = useLogin(
+    () => {
+      eSendEvent(eUserLoggedIn, true);
+      setVisible(false);
+      setFocused(false);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
+    },
+    true
+  );
 
   const logout = async () => {
     try {
@@ -89,7 +92,7 @@ export const SessionExpired = () => {
 
   const open = React.useCallback(async () => {
     try {
-      const res = await db.tokenManager.getToken();
+      let res = await db.tokenManager.getToken();
       if (!res) throw new Error("no token found");
       if (db.tokenManager._isTokenExpired(res))
         throw new Error("token expired");
@@ -99,9 +102,9 @@ export const SessionExpired = () => {
 
       Sync.run("global", false, "full", async (complete) => {
         if (!complete) {
-          const user = await db.user.getUser();
+          let user = await db.user.getUser();
           if (!user) return;
-          formRef.current.setValue("email", user.email);
+          email.current = user.email;
           setVisible(true);
           setFocused(false);
           return;
@@ -112,16 +115,16 @@ export const SessionExpired = () => {
         setVisible(false);
       });
     } catch (e) {
-      const user = await db.user.getUser();
+      let user = await db.user.getUser();
       if (!user) return;
-      formRef.current.setValue("email", user.email);
+      email.current = user.email;
       setFocused(false);
       setVisible(true);
       useUserStore.setState({
         disableAppLockRequests: true
       });
     }
-  }, [formRef]);
+  }, [email]);
 
   useEffect(() => {
     const sub = eSubscribeEvent(eLoginSessionExpired, open);
@@ -152,125 +155,97 @@ export const SessionExpired = () => {
         enableSheetKeyboardHandler={true}
         visible={true}
       >
-        <Dialog context="two_factor_verify" />
         <View
           style={{
             width: focused ? "100%" : "99.9%",
             padding: DefaultAppStyles.GAP,
             justifyContent: "center",
-            gap: Spacing.LEVEL_7,
             flex: 1,
             backgroundColor: colors.primary.background
           }}
         >
-          <View style={{ gap: Spacing.LEVEL_7, alignItems: "center" }}>
-            <View
+          <View
+            style={{
+              justifyContent: "center",
+              alignItems: "center",
+              width: "100%",
+              marginBottom: 20,
+              borderRadius: 10,
+              paddingVertical: 20
+            }}
+          >
+            <IconButton
               style={{
-                width: 100,
-                height: 100,
-                borderRadius: 50,
-                alignItems: "center",
-                justifyContent: "center",
-                backgroundColor: colors.error.background
+                width: 60,
+                height: 60
+              }}
+              name="alert"
+              color={colors.error.icon}
+              size={50}
+            />
+            <Heading size={AppFontSize.xxxl} color={colors.primary.heading}>
+              {strings.sessionExpired()}
+            </Heading>
+            <Paragraph
+              style={{
+                textAlign: "center"
               }}
             >
-              <View
-                style={{
-                  width: 56,
-                  height: 56,
-                  borderRadius: 28,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  backgroundColor: colors.error.accent
-                }}
-              >
-                <AppIcon
-                  name="warning"
-                  iconFamily="notesnook"
-                  size={30}
-                  color={colors.static.white}
-                />
-              </View>
-            </View>
-
-            <View style={{ width: "100%", gap: Spacing.LEVEL_3 }}>
-              <View
-                style={{
-                  alignItems: "center",
-                  gap: DefaultAppStyles.GAP_VERTICAL_SMALL
-                }}
-              >
-                <Heading
-                  fontSize="XL"
-                  lineHeight="100%"
-                  color={colors.primary.heading}
-                >
-                  {strings.sessionExpired()}
-                </Heading>
-                <Paragraph
-                  fontSize="SM"
-                  color={colors.primary.paragraph}
-                  style={{
-                    textAlign: "center"
-                  }}
-                >
-                  {strings.sessionExpiredDesc(
-                    getObfuscatedEmail(
-                      formRef.current.getValue("email") as string
-                    )
-                  )}
-                </Paragraph>
-              </View>
-
-              <FormInput
-                fwdRef={passwordInputRef}
-                formRef={formRef}
-                name="password"
-                label={strings.enterYourPassword()}
-                validators={[validators.required(strings.passwordRequired())]}
-                returnKeyLabel={strings.done()}
-                returnKeyType="next"
-                secureTextEntry
-                autoComplete="password"
-                autoCapitalize="none"
-                autoCorrect={false}
-                placeholder={strings.password()}
-                onSubmitEditing={() => {
-                  login();
-                }}
-              />
-            </View>
+              {strings.sessionExpiredDesc(
+                getObfuscatedEmail(email.current as string)
+              )}
+            </Paragraph>
           </View>
 
-          <View style={{ gap: Spacing.LEVEL_2 }}>
-            <Button
-              style={{
-                width: "100%"
+          {step === LoginSteps.passwordAuth ? (
+            <Input
+              fwdRef={passwordInputRef}
+              onChangeText={(value) => {
+                password.current = value;
+              }}
+              returnKeyLabel={strings.done()}
+              returnKeyType="next"
+              secureTextEntry
+              autoComplete="password"
+              autoCapitalize="none"
+              autoCorrect={false}
+              placeholder={strings.password()}
+              onSubmit={() => {
+                login();
               }}
-              loading={loading}
-              onPress={() => login()}
-              type="accent"
-              title={loading ? null : strings.login()}
             />
+          ) : null}
 
-            <Button
-              style={{
-                width: "100%"
-              }}
-              onPress={() => {
-                presentDialog({
-                  context: "session_expiry",
-                  title: strings.logoutFromDevice(),
-                  paragraph: strings.logoutDesc(),
-                  positiveText: strings.logout(),
-                  positiveType: "error-shade-outline",
-                  positivePress: logout
-                });
-              }}
-              type="plain-outline"
-              title={strings.logoutFromDevice()}
-            />
-          </View>
+          <Button
+            style={{
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
+              width: 250,
+              borderRadius: 100
+            }}
+            loading={loading}
+            onPress={() => login()}
+            type="accent"
+            title={loading ? null : strings.login()}
+          />
+
+          <Button
+            style={{
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
+              width: "100%"
+            }}
+            onPress={() => {
+              presentDialog({
+                context: "session_expiry",
+                title: strings.logoutFromDevice(),
+                paragraph: strings.logoutDesc(),
+                positiveText: strings.logout(),
+                positiveType: "errorShade",
+                positivePress: logout
+              });
+            }}
+            type="errorShade"
+            title={loading ? null : strings.logoutFromDevice()}
+          />
         </View>
         <Toast context="local" />
         <Dialog context="session_expiry" />