web: changed isChecked to checked

Signed-off-by: Licaon_Kter <licaon-kter@users.noreply.github.com>

.commitlintrc.js

@@ -14,13 +14,16 @@ const SCOPES = [
 
   "mobile",
   "web",
+  "vericrypt",
   "desktop",
   "crypto",
   "editor",
   "logger",
   "theme",
+  "server",
   "core",
   "fs",
+  "ui",
   "clipper",
   "config",
   "ci",
@@ -28,7 +31,10 @@ const SCOPES = [
   "docs",
   "refactor",
   "misc",
-  "global"
+  "common",
+  "global",
+  "docs",
+  "themebuilder"
 ];
 
 module.exports = {

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

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

@@ -1,5 +1,5 @@
-name: 'Setup node with cache action'
-description: 'Setups node with cache'
+name: "Setup node with cache action"
+description: "Setups node with cache"
 
 runs:
   using: "composite"
@@ -19,9 +19,8 @@ runs:
           packages/crypto/package-lock.json
           packages/sodium/package-lock.json
           packages/clipper/package-lock.json
-          packages/crypto-worker/package-lock.json
           packages/editor-mobile/package-lock.json
           packages/editor/package-lock.json
           packages/logger/package-lock.json
           packages/streamable-fs/package-lock.json
-          packages/theme/package-lock.json
+          packages/theme/package-lock.json

.github/dco.yml

@@ -1,4 +0,0 @@
-allowRemediationCommits:
-  individual: true
-require:
-  members: false

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

@@ -17,12 +17,14 @@ jobs:
       - name: Use specific Java version for the builds
         uses: joschi/setup-jdk@v2
         with:
-          java-version: '11'
-          architecture: 'x64'
+          java-version: "11"
+          architecture: "x64"
 
       - name: Install node modules
         run: |
-          npm ci
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=mobile
+          
       - name: Make Gradlew Executable
         run: cd apps/mobile/native/android && chmod +x ./gradlew
 
@@ -37,7 +39,7 @@ jobs:
           signingKeyBase64: ${{ secrets.SIGNING_KEY }}
           alias: ${{ secrets.ALIAS }}
           keyStorePassword: ${{ secrets.KEY_PASSWORD }}
-          keyPassword: ${{ secrets.KEY_PASSWORD }}   
+          keyPassword: ${{ secrets.KEY_PASSWORD }}
 
       - name: Publish to Playstore
         id: deploy
@@ -48,4 +50,4 @@ jobs:
           releaseFile: ${{steps.sign_app.outputs.signedReleaseFile}}
           track: internal
           status: completed
-          whatsNewDirectory: apps/mobile/native/android/releasenotes/             
+          whatsNewDirectory: apps/mobile/native/android/releasenotes/

.github/workflows/android.publish.yml

@@ -1,4 +1,4 @@
-name: Publish @notesnook/mobile
+name: Publish @notesnook/android
 
 on: workflow_dispatch
 
@@ -17,12 +17,14 @@ jobs:
       - name: Use specific Java version for the builds
         uses: joschi/setup-jdk@v2
         with:
-          java-version: '11'
-          architecture: 'x64'
+          java-version: "11"
+          architecture: "x64"
 
       - name: Install node modules
         run: |
-          npm ci
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=mobile
+
       - name: Make Gradlew Executable
         run: cd apps/mobile/native/android && chmod +x ./gradlew
 
@@ -31,13 +33,15 @@ jobs:
 
       - name: Sign app bundle for Playstore release
         id: sign_app
-        uses: r0adkll/sign-android-release@v1
+        uses: r0adkll/sign-android-release@master
         with:
           releaseDirectory: apps/mobile/native/android/app/build/outputs/bundle/release
           signingKeyBase64: ${{ secrets.SIGNING_KEY }}
           alias: ${{ secrets.ALIAS }}
           keyStorePassword: ${{ secrets.KEY_PASSWORD }}
-          keyPassword: ${{ secrets.KEY_PASSWORD }}  
+          keyPassword: ${{ secrets.KEY_PASSWORD }}
+        env:
+          BUILD_TOOLS_VERSION: "33.0.0"
 
       - name: Publish to Playstore
         id: deploy
@@ -48,7 +52,7 @@ jobs:
           releaseFiles: ${{steps.sign_app.outputs.signedReleaseFile}}
           track: production
           status: completed
-          whatsNewDirectory: apps/mobile/native/android/releasenotes/      
+          whatsNewDirectory: apps/mobile/native/android/releasenotes/
 
       - name: Build apks for Github release
         run: yarn release:android
@@ -61,7 +65,9 @@ jobs:
           signingKeyBase64: ${{ secrets.PUBLIC_SIGNING_KEY }}
           alias: ${{ secrets.PUBLIC_ALIAS }}
           keyStorePassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
-          keyPassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}    
+          keyPassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
+        env:
+          BUILD_TOOLS_VERSION: "33.0.0"
 
       - name: Rename apk files
         run: |
@@ -89,4 +95,4 @@ jobs:
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-arm64-v8a.apk
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-armeabi-v7a.apk
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86.apk
-            apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86_64.apk           
+            apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86_64.apk

.github/workflows/core.tests.yml

@@ -8,7 +8,7 @@ on:
     paths:
       - "packages/core/**"
       # re-run workflow if workflow file changes
-      - ".github/workflows/core.tests.yml" 
+      - ".github/workflows/core.tests.yml"
   pull_request:
     types:
       - "ready_for_review"
@@ -28,7 +28,8 @@ jobs:
 
       - name: Prepare environment
         run: |
-          npm ci --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=core
       - name: Add environment variables
         run: |
           echo "USER_EMAIL=${{ secrets.USER_EMAIL }}" >> $GITHUB_ENV

.github/workflows/desktop.publish.yml

@@ -18,6 +18,21 @@ on:
         required: true
         default: true
         description: "Publish on GitHub releases?"
+      build-windows:
+        type: boolean
+        required: true
+        default: true
+        description: "Build for Windows?"
+      build-linux:
+        type: boolean
+        required: true
+        default: true
+        description: "Build for Linux?"
+      build-mac:
+        type: boolean
+        required: true
+        default: true
+        description: "Build for macOS?"
 
 jobs:
   build:
@@ -32,8 +47,8 @@ jobs:
 
       - name: Install packages
         run: |
-          npm i --ignore-scripts --prefer-offline --no-audit
-          npx lerna bootstrap --ignore=@notesnook/mobile -- --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=web
 
       - name: Setup environment
         run: |
@@ -71,6 +86,7 @@ jobs:
   build-macos:
     name: Build for macOS
     needs: build
+    if: inputs.build-mac
     runs-on: macos-12
 
     steps:
@@ -93,10 +109,11 @@ jobs:
           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: Get App Store Version
         id: appstore
         uses: streetwriters/appstore-connect-app-version@develop
+        if: inputs.publish-apple
         with:
           app-id: ${{ steps.app_metadata.outputs.apple_app_id }}
           key-id: ${{ secrets.api_key_id }}
@@ -108,13 +125,13 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: build
-          path: ./apps/desktop/build
+          path: ./apps/web/build
 
       - name: Install packages
         run: |
-          npm i --ignore-scripts --prefer-offline --no-audit
-          npx lerna bootstrap --ignore=@notesnook/mobile -- --prefer-offline --no-audit
-      
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
+
       - name: Install provisioning profile
         run: echo "${{ secrets.MAC_PROVISIONING_PROFILE }}" | base64 --decode > embedded.provisionprofile
         working-directory: ./apps/desktop
@@ -126,7 +143,7 @@ jobs:
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
         run: |
           npx nx run release --project @notesnook/desktop -- --variant=mas
-          npm run builder -- --mac mas --universal -p never
+          npx electron-builder --mac mas --universal -p never
         working-directory: ./apps/desktop
 
       - name: Build zip and dmg
@@ -140,9 +157,9 @@ jobs:
         run: |
           npx nx run release --project @notesnook/desktop
           if [ ${{ inputs.publish-github }} == true ]; then
-            npm run builder -- --mac zip dmg --arm64 --x64 -p always
+            npx electron-builder --mac zip dmg --arm64 --x64 -p always
           else
-            npm run builder -- --mac zip dmg --arm64 --x64 -p never
+            npx electron-builder --mac zip dmg --arm64 --x64 -p never
           fi
         working-directory: ./apps/desktop
 
@@ -151,7 +168,7 @@ jobs:
         env:
           API_KEY_ID: ${{ secrets.api_key_id }}
           API_KEY_ISSUER_ID: ${{ secrets.api_key_issuer_id }}
-        run: |       
+        run: |
           package=$(find ./output/mas-universal/notesnook*.pkg)
 
           echo "Uploading ${package} using altool..."
@@ -162,6 +179,7 @@ jobs:
   build-linux:
     name: Build for Linux
     needs: build
+    if: inputs.build-linux
     runs-on: ubuntu-22.04
 
     steps:
@@ -183,12 +201,12 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: build
-          path: ./apps/desktop/build
+          path: ./apps/web/build
 
       - name: Install packages
         run: |
-          npm i --ignore-scripts --prefer-offline --no-audit
-          npx lerna bootstrap --ignore=@notesnook/mobile -- --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
 
       - name: Build Electron wrapper
         run: npx nx run release --project @notesnook/desktop
@@ -197,7 +215,7 @@ jobs:
       - name: Build snap
         if: inputs.publish-snap
         run: |
-          npm run builder -- --linux snap:x64 -p never
+          npx electron-builder --linux snap:x64 -p never
         working-directory: ./apps/desktop
 
       - name: Build AppImage
@@ -205,9 +223,9 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           if [ ${{ inputs.publish-github }} == true ]; then
-            npm run builder -- --linux AppImage:x64 AppImage:arm64 -p always
+            npx electron-builder --linux AppImage:x64 AppImage:arm64 -p always
           else
-            npm run builder -- --linux AppImage:x64 AppImage:arm64 -p never
+            npx electron-builder --linux AppImage:x64 AppImage:arm64 -p never
           fi
         working-directory: ./apps/desktop
 
@@ -220,12 +238,22 @@ jobs:
   build-windows:
     name: Build for Windows
     needs: build
+    if: inputs.build-windows
     runs-on: windows-latest
 
     steps:
       - name: Check out Git repository
         uses: actions/checkout@v3
 
+      - name: Setup .NET Core SDK
+        uses: actions/setup-dotnet@v2
+        with:
+          dotnet-version: 6.0.x
+
+      - name: Install AzureCodeSigning
+        run: Install-Module -Name AzureCodeSigning -RequiredVersion 0.3.0 -Force -Repository PSGallery
+        shell: pwsh
+
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
 
@@ -233,24 +261,26 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: build
-          path: ./apps/desktop/build
+          path: ./apps/web/build
 
       - name: Install packages
         run: |
-          npm i --ignore-scripts --prefer-offline --no-audit
-          npx lerna bootstrap --ignore=@notesnook/mobile -- --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
 
-      - name: Build Electron wrapper
+      - name: Build
         run: npx nx run release --project @notesnook/desktop
-        working-directory: ./apps/desktop
 
-      - name: Build app
+      - name: Publish
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
+          AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
+          AZURE_CLIENT_SECRET: ${{ secrets.AZURE_CLIENT_SECRET }}
         run: |
           if ($${{ inputs.publish-github }} -eq $true) {
             yarn electron-builder --win --publish always
           } else {
             yarn electron-builder --win --publish never
           }
-        working-directory: ./apps/desktop
+        working-directory: ./apps/desktop

.github/workflows/editor.tests.yml

@@ -29,8 +29,8 @@ jobs:
 
       - name: Install packages
         run: |
-          npm i --ignore-scripts --prefer-offline --no-audit
-          npx lerna bootstrap --ignore=@notesnook/mobile -- --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=editor
 
       - name: Setup environment
         run: |

.github/workflows/help.publish.yml

@@ -0,0 +1,35 @@
+name: Publish Notesnook Help
+
+on: 
+  workflow_dispatch:
+  push:
+    branches:
+      - "master"
+    paths:
+      - "docs/help/**"
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - uses: actions-rs/toolchain@v1
+        with:
+          toolchain: stable
+
+      - name: Install docgen
+        run: cargo install --git https://github.com/thecodrr/docgen
+
+      - name: Build site
+        run: docgen build --release
+        working-directory: docs/help
+
+      - name: Setup environment
+        run: |
+          echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
+          echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
+
+      - name: Publish on Cloudflare Pages
+        run: npx --yes wrangler pages deploy --project-name notesnook-help ./docs/help/site/ --branch main

.github/workflows/ios.publish.yml

@@ -0,0 +1,67 @@
+name: Publish @notesnook/ios
+
+on: workflow_dispatch
+
+jobs:
+  build:
+    runs-on: macos-13
+    timeout-minutes: 60
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Install node modules
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=mobile
+
+      - name: Build packages
+        run: npx nx run @notesnook/mobile:build
+
+      - name: Install Pods
+        run: npm run prepare:ios
+
+      - name: Build iOS App
+        uses: yukiarrr/ios-build-action@v1.11.2
+        with:
+          bundle-identifier: org.streetwriters.notesnook
+          scheme: Notesnook
+          configuration: "Release"
+          export-options: apps/mobile/native/ios/ExportOptions.plist
+          project-path: apps/mobile/native/ios/Notesnook.xcodeproj
+          workspace-path: apps/mobile/native/ios/Notesnook.xcworkspace
+          update-targets: |
+            Notesnook
+            Make Note
+            NotesWidgetExtension
+          disable-targets: Notesnook-tvOS,Notesnook-tvOSTests,NotesnookTests
+          code-signing-identity: Apple Distribution
+          team-id: ${{ secrets.APPLE_TEAM_ID }}
+          p12-base64: ${{ secrets.APPLE_CERTIFICATE_P12 }}
+          certificate-password: ${{ secrets.APPLE_CERTIFICATE_P12_PASSWORD }}
+          app-store-connect-api-key-issuer-id: ${{ secrets.API_KEY_ISSUER_ID }}
+          app-store-connect-api-key-id: ${{ secrets.APPSTORE_KEY_ID }}
+          app-store-connect-api-key-base64: ${{ secrets.APPSTORE_CONNECT_API_KEY_BASE64 }}
+          output-path: Notesnook.ipa
+          mobileprovision-base64: |
+            ${{ secrets.APPLE_MOBILE_PROVISION_APP }}
+            ${{ secrets.APPLE_MOBILE_PROVISION_SHARE }}
+            ${{ secrets.APPLE_MOBILE_PROVISION_WIDGET }}
+
+      - name: 'Upload app to TestFlight'
+        uses: apple-actions/upload-testflight-build@v1
+        with: 
+          app-path: Notesnook.ipa
+          issuer-id: ${{ secrets.API_KEY_ISSUER_ID }}
+          api-key-id: ${{ secrets.API_KEY_ID }}
+          api-private-key: ${{ secrets.API_KEY }}
+
+      - name: Upload to Github
+        uses: actions/upload-artifact@v2
+        with:
+          name: Notesnook.ipa
+          path: Notesnook.ipa

.github/workflows/nscurl.test.yml

@@ -11,4 +11,4 @@ jobs:
 
     steps:
       - name: Run ats-diagnostics
-        run: nscurl --ats-diagnostics https://payments.streetwriters.co
+        run: nscurl --ats-diagnostics https://payments.streetwriters.co

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

@@ -0,0 +1,31 @@
+name: Publish @notesnook/theme-builder
+
+on: workflow_dispatch
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=themebuilder
+
+      - name: Setup environment
+        run: |
+          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
+          echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
+          echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
+
+      - name: Generate build
+        run: npm run build:theme-builder
+
+      - name: Publish to Cloudflare Pages
+        run: npx --yes wrangler pages deploy --project-name=notesnook-theme-builder ./apps/theme-builder/build/

.github/workflows/vericrypt.publish.yml

@@ -0,0 +1,31 @@
+name: Publish @notesnook/vericrypt
+
+on: workflow_dispatch
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=vericrypt
+
+      - name: Setup environment
+        run: |
+          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
+          echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
+          echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
+
+      - name: Generate build
+        run: npm run build:vericrypt
+
+      - name: Publish on Cloudflare Pages
+        run: npx --yes wrangler pages deploy --project-name=vericrypt ./apps/vericrypt/build/

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

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

.github/workflows/web.publish.yml

@@ -15,8 +15,8 @@ jobs:
 
       - name: Install packages
         run: |
-          npm i --ignore-scripts --prefer-offline --no-audit
-          npx lerna bootstrap --ignore=@notesnook/mobile -- --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=web
 
       - name: Setup environment
         run: |
@@ -24,8 +24,8 @@ jobs:
           echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
           echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
 
-      - name: Generate desktop build
+      - name: Generate build
         run: npm run build:web
 
-      - name: Publish on Cloudflare Pages
-        run: npx --yes wrangler pages publish --project-name=notesnook-app ./apps/web/build/
+      - name: Publish to Cloudflare Pages
+        run: npx --yes wrangler pages deploy --project-name=notesnook-app ./apps/web/build/

.github/workflows/web.tests.yml

@@ -29,8 +29,8 @@ jobs:
 
       - name: Install packages
         run: |
-          npm i --ignore-scripts --prefer-offline --no-audit
-          npx lerna bootstrap --ignore=@notesnook/mobile -- --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=web
 
       - name: Setup environment
         run: |
@@ -66,7 +66,7 @@ jobs:
 
       - name: Install packages
         run: |
-          npm i --ignore-scripts --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
           npm install -D @playwright/test otplib
 
       - name: Validate build extraction

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

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

.gitignore

@@ -7,4 +7,7 @@ nx-cloud.env
 .idea
 .eslintcache
 .env.local
-.nyc_output
+.nyc_output
+site
+node_modules.backup
+.nx

.prettierrc.js

@@ -5,5 +5,6 @@ module.exports = {
   printWidth: 80,
   useTabs: false,
   tabWidth: 2,
-  bracketSpacing: true
+  bracketSpacing: true,
+  endOfLine: "lf"
 };

.vscode/notesnook.code-workspace

@@ -1,72 +0,0 @@
-{
-  "folders": [
-    {
-      "name": "✨ notesnook",
-      "path": ".."
-    },
-    {
-      "name": "🚀 @notesnook/mobile",
-      "path": "../apps/mobile"
-    },
-    {
-      "name": "🚀 @notesnook/web",
-      "path": "../apps/web"
-    },
-    {
-      "name": "🚀 @notesnook/desktop",
-      "path": "../apps/web/desktop"
-    },
-    {
-      "name": "🚀 @notesnook/web-clipper",
-      "path": "../extensions/web-clipper"
-    },
-    {
-      "name": "📦 @notesnook/clipper",
-      "path": "../packages/clipper"
-    },
-    {
-      "name": "📦 @notesnook/core",
-      "path": "../packages/core"
-    },
-    {
-      "name": "📦 @notesnook/crypto",
-      "path": "../packages/crypto"
-    },
-    {
-      "name": "📦 @notesnook/crypto-worker",
-      "path": "../packages/crypto-worker"
-    },
-    {
-      "name": "📦 @notesnook/editor",
-      "path": "../packages/editor"
-    },
-    {
-      "name": "📦 @notesnook/editor-mobile",
-      "path": "../packages/editor-mobile"
-    },
-    {
-      "name": "📦 @notesnook/logger",
-      "path": "../packages/logger"
-    },
-    {
-      "name": "📦 @notesnook/streamable-fs",
-      "path": "../packages/streamable-fs"
-    },
-    {
-      "name": "📦 @notesnook/theme",
-      "path": "../packages/theme"
-    }
-  ],
-  "settings": {
-    "typescript.tsdk": "node_modules/typescript/lib",
-    "javascript.format.enable": true,
-    "editor.formatOnSave": true,
-    "editor.formatOnSaveMode": "modificationsIfAvailable",
-    "eslint.packageManager": "npm",
-    "eslint.run": "onSave",
-    "[javascript]": {
-      "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "eslint.execArgv": ["--cache"]
-  }
-}

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "files.eol": "\n",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file",
+  "eslint.run": "onSave",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "eslint.options": {
+    "cache": true,
+    "cacheStrategy": "content"
+  },
+  "git.rebaseWhenSync": true
+}

CONTRIBUTING.md

@@ -103,7 +103,7 @@ All commits must include valid scopes in the commit message. **Valid commit scop
 
 **Packages:**
 
-1. `crypto`: changes related to the cryptographic core (including `@notesnook/crypto-worker`)
+1. `crypto`: changes related to the cryptographic core
 2. `editor`: changes related to the editor (including `@notesnook/editor-mobile`)
 3. `logger`: changes related to the logger
 4. `theme`: changes related to the theme

README.md

@@ -27,7 +27,7 @@ Notesnook is built using the following technologies:
 3. React Native — For mobile apps we are using React Native
 4. Electron — For desktop app
 5. NPM — listed here because we **don't** use Yarn or PNPM or XYZ across any of our projects.
-6. Lerna & Nx — maintaining monorepos is hard but Nx makes it easier.
+6. Nx — maintaining monorepos is hard but Nx makes it easier.
 
 > **Note: Each project in the monorepo contains its own architecture details which you can refer to.**
 
@@ -46,7 +46,6 @@ Notesnook is built using the following technologies:
 | `@notesnook/editor-mobile` | [/packages/editor-mobile](/packages/editor-mobile) | A very thin wrapper around `@notesnook/editor` for mobile clients    |
 | `@notesnook/logger`        | [/packages/logger](/packages/logger)               | Simple & pluggable logger                                            |
 | `@notesnook/sodium`        | [/packages/sodium](/packages/sodium)               | Wrapper around libsodium to support Node.js & Browser                |
-| `@notesnook/crypto-worker` | [/packages/crypto-worker](/packages/crypto-worker) | Helpers to use `@notesnook/crypto` from a Worker                     |
 | `@notesnook/streamable-fs` | [/packages/streamable-fs](/packages/streamable-fs) | Streaming interface around an IndexedDB based file system            |
 | `@notesnook/theme`         | [/packages/theme](/packages/theme)                 | The core theme used in web & desktop clients                         |
 

apps/desktop/app-update.yml

@@ -0,0 +1,3 @@
+owner: streetwriters
+repo: notesnook
+provider: github

apps/desktop/global.d.ts

@@ -19,34 +19,40 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 /* eslint-disable no-var */
 
 import { BrowserWindow } from "electron";
-import * as undici_types from "undici";
+import {
+  type FormData as FormDataType,
+  type Headers as HeadersType,
+  type Request as RequestType,
+  type Response as ResponseType
+} from "undici";
 
 declare global {
-  export const {
-    fetch,
-    FormData,
-    Headers,
-    Request,
-    Response
-  }: typeof import("undici");
-
-  type FormData = undici_types.FormData;
-  type Headers = undici_types.Headers;
-  type HeadersInit = undici_types.HeadersInit;
-  type BodyInit = undici_types.BodyInit;
-  type Request = undici_types.Request;
-  type RequestInit = undici_types.RequestInit;
-  type RequestInfo = undici_types.RequestInfo;
-  type RequestMode = undici_types.RequestMode;
-  type RequestRedirect = undici_types.RequestRedirect;
-  type RequestCredentials = undici_types.RequestCredentials;
-  type RequestDestination = undici_types.RequestDestination;
-  type ReferrerPolicy = undici_types.ReferrerPolicy;
-  type Response = undici_types.Response;
-  type ResponseInit = undici_types.ResponseInit;
-  type ResponseType = undici_types.ResponseType;
-
   var window: BrowserWindow | null;
   var RELEASE: boolean;
   var MAC_APP_STORE: boolean;
+
+  // Re-export undici fetch function and various classes to global scope.
+  // These are classes and functions expected to be at global scope according to Node.js v18 API
+  // documentation.
+  // See: https://nodejs.org/dist/latest-v18.x/docs/api/globals.html
+  // eslint-disable-next-line no-var
+  export var {
+    FormData,
+    Headers,
+    Request,
+    Response,
+    fetch
+  }: typeof import("undici");
+
+  type FormData = FormDataType;
+  type Headers = HeadersType;
+  type Request = RequestType;
+  type Response = ResponseType;
 }
+
+// NOTE: the import in the global block above needs to be a var for this to work properly.
+globalThis.fetch = fetch;
+globalThis.FormData = FormData;
+globalThis.Headers = Headers;
+globalThis.Request = Request;
+globalThis.Response = Response;

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "2.5.2",
+  "version": "2.6.17",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/index.js",
@@ -11,38 +11,37 @@
   "repository": "https://github.com/streetwriters/notesnook",
   "license": "GPL-3.0-or-later",
   "dependencies": {
-    "@notesnook/crypto": "*",
-    "@trpc/client": "^10.29.1",
-    "@trpc/server": "^10.29.1",
-    "diary": "^0.3.1",
-    "electron-trpc": "^0.5.0",
-    "electron-updater": "^5.3.0",
+    "@notesnook/crypto": "file:../../packages/crypto",
+    "@trpc/client": "10.38.3",
+    "@trpc/server": "10.38.3",
+    "electron-trpc": "0.5.2",
+    "electron-updater": "6.1.4",
     "icojs": "^0.17.1",
     "typed-emitter": "^2.1.0",
     "yargs": "^17.6.2",
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@electron/rebuild": "^3.2.13",
-    "@types/node": "^18.15.0",
-    "electron": "^24.4.0",
-    "electron-builder": "^23.6.0",
+    "@types/node": "18.16.1",
+    "@types/yargs": "^17.0.24",
+    "chokidar": "^3.5.3",
+    "electron": "25.9.8",
+    "electron-builder": "^24.9.1",
     "electron-builder-notarize": "^1.5.1",
-    "electron-reloader": "^1.2.3",
     "esbuild": "^0.17.19",
-    "undici": "^5.22.1"
+    "tree-kill": "^1.2.2",
+    "undici": "^5.23.0"
   },
   "optionalDependencies": {
     "dmg-license": "^1.0.11"
   },
   "scripts": {
-    "start": "turbowatch scripts/dev.ts",
-    "staging": "zx scripts/build.mjs --run",
-    "release": "zx scripts/build.mjs",
+    "start": "node scripts/dev.mjs",
+    "staging": "node scripts/build.mjs --run",
+    "release": "node scripts/build.mjs",
     "build": "tsc",
     "bundle": "esbuild electron=./src/main.ts ./src/preload.ts --external:electron --external:fsevents --minify --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=false --define:RELEASE=true",
     "bundle:mas": "esbuild electron=./src/main.ts ./src/preload.ts --minify --external:electron --external:fsevents --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=true --define:RELEASE=true",
-    "builder": "./node_modules/.bin/electron-builder",
     "postinstall": "patch-package"
   },
   "author": {
@@ -55,11 +54,16 @@
     "productName": "Notesnook",
     "copyright": "Copyright © 2023 Streetwriters (Private) Limited",
     "artifactName": "notesnook_${os}_${arch}.${ext}",
+    "npmRebuild": false,
+    "asar": false,
     "files": [
       "!*.chunk.js.map",
       "!*.chunk.js.LICENSE.txt",
       "build/",
       "!build/screenshots${/*}",
+      "!build/banner.jpg",
+      "!build/*.ico",
+      "!build/*.png",
       "!node_modules${/*}"
     ],
     "afterSign": "electron-builder-notarize",
@@ -131,6 +135,10 @@
           ]
         }
       ],
+      "signingHashAlgorithms": [
+        "sha256"
+      ],
+      "sign": "./sign.js",
       "icon": "assets/icons/app.ico"
     },
     "portable": {
@@ -187,6 +195,7 @@
       "allowNativeWayland": true
     },
     "extraResources": [
+      "app-update.yml",
       "./assets/**"
     ],
     "extraMetadata": {

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

@@ -1,20 +1,20 @@
 diff --git a/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js b/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
-index ffcc8bd..7e57c9e 100644
+index fcb7f54..cb1c7f7 100644
 --- a/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
 +++ b/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
-@@ -105,6 +105,7 @@ class LinuxTargetHelper {
+@@ -116,6 +116,7 @@ class LinuxTargetHelper {
              StartupWMClass: appInfo.productName,
              ...extra,
              ...targetSpecificOptions.desktop,
 +            actions: undefined
          };
          const description = this.getDescription(targetSpecificOptions);
-         if (!builder_util_1.isEmptyOrSpaces(description)) {
-@@ -148,6 +149,23 @@ class LinuxTargetHelper {
+         if (!(0, builder_util_1.isEmptyOrSpaces)(description)) {
+@@ -159,6 +160,23 @@ class LinuxTargetHelper {
              data += `\n${name}=${desktopMeta[name]}`;
          }
          data += "\n";
-+       
++               
 +        if (targetSpecificOptions.desktop.actions) {
 +            let actionsData = "";
 +            const validActions = [];

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

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

apps/desktop/scripts/build.mjs

@@ -19,54 +19,99 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import path from "path";
 import fs from "fs/promises";
-import { $, argv, os } from "zx";
+import { existsSync } from "fs";
+import yargs from "yargs-parser";
+import os from "os";
+import * as childProcess from "child_process";
+import { fileURLToPath } from "url";
 
-$.env = process.env;
+const args = yargs(process.argv);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const sodiumNativePrebuildPath = (arch) =>
+  path.join(
+    `node_modules`,
+    `@notesnook`,
+    `crypto`,
+    `node_modules`,
+    `@notesnook`,
+    `sodium`,
+    `node_modules`,
+    `sodium-native`,
+    `prebuilds`,
+    `${os.platform()}-${arch}`
+  );
+const webAppPath = path.resolve(path.join(__dirname, "..", "..", "web"));
 
-const sodiumNativePrebuildPath = path.join(
-  `node_modules`,
-  `@notesnook`,
-  `crypto`,
-  `node_modules`,
-  `@notesnook`,
-  `sodium`,
-  `node_modules`,
-  `sodium-native`,
-  `prebuilds`,
-  `${os.platform()}-x64`
-);
+await fs.rm("./build/", { force: true, recursive: true });
 
-if (argv.rebuild) {
-  await fs.rm("./build/", { force: true, recursive: true });
+if (args.rebuild || !existsSync(path.join(webAppPath, "build"))) {
+  await exec(`cd ${webAppPath} && npm run build:desktop`);
+}
 
-  await $`cd ../web/ && npm run build:desktop`;
+await fs.cp(path.join(webAppPath, "build"), "build", {
+  recursive: true,
+  force: true
+});
 
-  await fs.cp(path.join("..", "web", "build"), "build", {
-    recursive: true,
-    force: true
+if (args.variant === "mas") {
+  await exec(`npm run bundle:mas`);
+} else {
+  await exec(`npm run bundle`);
+}
+
+await exec(`npx tsc`);
+
+if (existsSync(sodiumNativePrebuildPath("x64"))) {
+  console.log("copying sodium-native-x64");
+  await fs.cp(
+    sodiumNativePrebuildPath("x64"),
+    path.join("build", "prebuilds", `${process.platform}-x64`),
+    {
+      recursive: true,
+      force: true
+    }
+  );
+}
+
+if (existsSync(sodiumNativePrebuildPath("ia32"))) {
+  console.log("copying sodium-native-ia32");
+  await fs.cp(
+    sodiumNativePrebuildPath("ia32"),
+    path.join("build", "prebuilds", `${process.platform}-ia32`),
+    {
+      recursive: true,
+      force: true
+    }
+  );
+}
+
+if (existsSync(sodiumNativePrebuildPath("arm64"))) {
+  console.log("copying sodium-native-arm64");
+  await fs.cp(
+    sodiumNativePrebuildPath("arm64"),
+    path.join("build", "prebuilds", `${process.platform}-arm64`),
+    {
+      recursive: true,
+      force: true
+    }
+  );
+}
+
+if (args.run) {
+  await exec(`npx electron-builder --dir --x64`);
+  if (process.platform === "win32") {
+    await exec(`.\\output\\win-unpacked\\Notesnook.exe`);
+  } else if (process.platform === "darwin") {
+    await exec(`./output/darwin-unpacked/Notesnook`);
+  } else {
+    await exec(`./output/linux-unpacked/Notesnook`);
+  }
+}
+
+async function exec(cmd) {
+  return childProcess.execSync(cmd, {
+    env: process.env,
+    stdio: "inherit"
   });
 }
-
-if (argv.variant === "mas") {
-  await $`npm run bundle:mas`;
-} else {
-  await $`npm run bundle`;
-}
-
-await $`tsc`;
-await $`npm rebuild`;
-
-await fs.cp(
-  sodiumNativePrebuildPath,
-  path.join("build", "prebuilds", `${process.platform}-x64`),
-  {
-    recursive: true,
-    force: true
-  }
-);
-
-if (argv.run) {
-  await $`npm run builder -- --linux AppImage:x64`;
-
-  await $`./output/notesnook_linux_x86_64.AppImage`;
-}

apps/desktop/scripts/dev.mjs

@@ -0,0 +1,197 @@
+/*
+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 path from "path";
+import fs from "fs/promises";
+import chokidar from "chokidar";
+import { execSync, spawn } from "child_process";
+import { fileURLToPath } from "url";
+import treekill from "tree-kill";
+import crypto from "crypto";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const sodiumNativePrebuildPath = path.join(
+  `node_modules`,
+  `@notesnook`,
+  `crypto`,
+  `node_modules`,
+  `@notesnook`,
+  `sodium`,
+  `node_modules`,
+  `sodium-native`,
+  `prebuilds`
+);
+const RUNNING_PROCESSES = [];
+const RESTARTABLE_PROCESSES = [];
+let lastBundleHash = null;
+
+await onChange(true);
+
+console.log("Watching...");
+
+const watcher = chokidar.watch("src/", { ignoreInitial: true });
+watcher.on("all", () => {
+  onChange(false);
+});
+
+process.on("SIGINT", async (s) => {
+  await cleanup();
+});
+
+async function onChange(first) {
+  if (first) {
+    await fs.rm("./build/", { force: true, recursive: true });
+  }
+
+  await exec(`npm run bundle`);
+  execAsync(`npx`, [`tsc`]);
+
+  if (await isBundleSame()) {
+    console.log("Bundle is same. Doing nothing.");
+    return;
+  }
+
+  if (first) {
+    await fs.cp(sodiumNativePrebuildPath, "build/prebuilds", {
+      recursive: true,
+      force: true
+    });
+  }
+
+  if (first) {
+    await spawnAndWaitUntil(
+      ["npx", "nx", "start:desktop", "@notesnook/web"],
+      path.join(__dirname, "..", "..", ".."),
+      (data) => data.includes("Network: use --host to expose")
+    );
+  }
+
+  if (!first) {
+    console.log("Restarting...", RESTARTABLE_PROCESSES.length);
+    await killProcesses(RESTARTABLE_PROCESSES);
+  }
+
+  execAsync(
+    "npx",
+    ["electron", path.join("build", "electron.js")],
+    true,
+    cleanup
+  );
+}
+
+function spawnAndWaitUntil(cmd, cwd, predicate) {
+  return new Promise((resolve) => {
+    console.log(">", ...cmd);
+
+    const s = spawn(cmd[0], cmd.slice(1), {
+      cwd,
+      env: { ...process.env, NO_COLOR: "true" },
+      shell: false
+    });
+
+    RUNNING_PROCESSES.push(s);
+
+    s.stderr.pipe(process.stderr);
+    s.stdout.on("data", (data) => {
+      process.stdout.write(data);
+      if (predicate(data)) resolve(undefined); //
+    });
+  });
+}
+
+async function exec(cmd) {
+  try {
+    console.log(">", cmd);
+
+    return execSync(cmd, {
+      env: process.env,
+      stdio: "inherit",
+      shell: false
+    });
+  } catch {
+    //ignore
+  }
+}
+
+function execAsync(cmd, args, restartable, onExit) {
+  try {
+    console.log(">", cmd, ...args);
+
+    const proc = spawn(cmd, args, {
+      stdio: "inherit",
+      env: process.env,
+      shell: false
+    });
+
+    const array = restartable ? RESTARTABLE_PROCESSES : RUNNING_PROCESSES;
+    array.push(proc);
+    proc.on("exit", (code, signal) => {
+      console.log(cmd, ...args, "closed with code", code);
+      if (code === 0 && !signal) {
+        array.splice(array.indexOf(proc), 1);
+        onExit && onExit();
+      }
+    });
+  } catch {
+    //ignore
+  }
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function killProcesses(processes) {
+  for (const process of processes.slice()) {
+    processes.splice(processes.indexOf(process), 1);
+    await new Promise((resolve, reject) =>
+      treekill(process.pid, (err) => (err ? reject(err) : resolve()))
+    );
+  }
+}
+
+async function cleanup() {
+  console.log("Cleaning up");
+
+  await killProcesses(RESTARTABLE_PROCESSES);
+  await killProcesses(RUNNING_PROCESSES);
+  await sleep(1000);
+
+  await fs.rm("./build/", { force: true, recursive: true });
+  process.exit();
+}
+
+async function isBundleSame() {
+  const bundle = await fs.readFile(
+    path.join(__dirname, "..", "build", "electron.js")
+  );
+
+  const hashSum = crypto.createHash("sha256");
+  hashSum.update(bundle);
+  const hex = hashSum.digest("hex");
+
+  if (!lastBundleHash) {
+    lastBundleHash = hex;
+    return false;
+  }
+  if (hex === lastBundleHash) return true;
+  lastBundleHash = hex;
+  return false;
+}

apps/desktop/scripts/dev.ts

@@ -1,117 +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 path from "path";
-import fs from "fs/promises";
-import { watch } from "turbowatch";
-import { $, within } from "zx";
-
-const sodiumNativePrebuildPath = path.join(
-  `node_modules`,
-  `@notesnook`,
-  `crypto`,
-  `node_modules`,
-  `@notesnook`,
-  `sodium`,
-  `node_modules`,
-  `sodium-native`,
-  `prebuilds`
-);
-let isServerRunning = false;
-
-async function main() {
-  const { shutdown } = await watch({
-    project: path.join(__dirname, ".."),
-    cwd: path.join(__dirname, ".."),
-    triggers: [
-      {
-        expression: [
-          "allof",
-          ["not", ["dirname", "node_modules"]],
-          ["match", "*.ts", "basename"]
-        ],
-        name: "dev",
-        // retry: { retries: 0 },
-        onTeardown: async () => {
-          await fs.rm("./build/", { force: true, recursive: true });
-        },
-        onChange: async ({ spawn: $, first, log }) => {
-          if (first) {
-            await fs.rm("./build/", { force: true, recursive: true });
-          }
-
-          await $`npm run build:electron`;
-          await $`tsc`;
-
-          if (first) {
-            await fs.cp(sodiumNativePrebuildPath, "build/prebuilds", {
-              recursive: true,
-              force: true
-            });
-          }
-
-          if (!isServerRunning) {
-            await spawnAndWaitUntil(
-              path.join(__dirname, "..", "..", "web"),
-              "npm run start:desktop",
-              (data) => data.includes("Compiled successfully!")
-            );
-            isServerRunning = true;
-          }
-
-          log("Starting desktop app!");
-
-          await $`npx electron ${path.join("build", "electron.js")}`;
-        }
-      }
-    ]
-  });
-
-  // SIGINT is the signal sent when we press Ctrl+C
-  process.once("SIGINT", () => {
-    void shutdown();
-  });
-}
-
-main();
-
-function spawnAndWaitUntil(
-  cwd: string,
-  cmd: string,
-  predicate: (data: string) => boolean
-) {
-  return new Promise((resolve) => {
-    within(async () => {
-      $.env = process.env;
-      $.quote = (c) => c;
-
-      try {
-        const s = $`cd ${cwd} && ${cmd}`;
-        s.stdout.on("data", (data) => {
-          if (predicate(data)) resolve(undefined); //
-        });
-        await s;
-      } catch (e) {
-        //ignore
-      } finally {
-        isServerRunning = false;
-      }
-    });
-  });
-}

apps/desktop/sign.js

@@ -0,0 +1,60 @@
+/*
+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 { writeFileSync, rmSync, readFileSync } = require("fs");
+const { execSync } = require("child_process");
+const { relative, join } = require("path");
+
+module.exports = async function (configuration) {
+  const Endpoint = "https://weu.codesigning.azure.net";
+  const CodeSigningAccountName = "Notesnook";
+  const CertificateProfileName = "Notesnook";
+  const FileDigest = configuration.hash.toUpperCase();
+  const TimestampRfc3161 = "http://timestamp.acs.microsoft.com";
+  const TimestampDigest = configuration.hash.toUpperCase();
+  const Description = "The Notesnook app";
+  const DescriptionUrl = "https://notesnook.com/";
+  const FilesCatalog = createCatalog(configuration.path);
+
+  const command = `Invoke-AzureCodeSigning -Endpoint "${Endpoint}" -CodeSigningAccountName "${CodeSigningAccountName}" -CertificateProfileName "${CertificateProfileName}" -FileDigest "${FileDigest}" -TimestampRfc3161 "${TimestampRfc3161}" -TimestampDigest "${TimestampDigest}" -Description "${Description}" -DescriptionUrl "${DescriptionUrl}" -FilesCatalog "${FilesCatalog}"`;
+
+  console.debug("Signing", configuration.path, "using command", command);
+
+  psexec(command);
+
+  console.debug("Signed", configuration.path);
+
+  deleteCatalog();
+};
+
+function createCatalog(path) {
+  writeFileSync("_catalog", relative(__dirname, path));
+  return join(__dirname, "_catalog");
+}
+
+function deleteCatalog() {
+  rmSync("_catalog");
+}
+
+function psexec(cmd) {
+  return execSync(cmd, {
+    env: process.env,
+    stdio: "inherit",
+    shell: "pwsh"
+  });
+}

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

@@ -25,10 +25,12 @@ import { config, DesktopIntegration } from "../utils/config";
 import { bringToFront } from "../utils/bring-to-front";
 import { getTheme, setTheme, Theme } from "../utils/theme";
 import { mkdirSync, writeFileSync } from "fs";
-import { dirname, join } from "path";
-import { platform } from "os";
+import { dirname } from "path";
 import { resolvePath } from "../utils/resolve-path";
 import { observable } from "@trpc/server/observable";
+import { AssetManager } from "../utils/asset-manager";
+import { isFlatpak } from "../utils";
+import { setupDesktopIntegration } from "../utils/desktop-integration";
 
 const t = initTRPC.create();
 
@@ -44,29 +46,39 @@ const NotificationOptions = z.object({
 });
 
 export const osIntegrationRouter = t.router({
+  isFlatpak: t.procedure.query(() => isFlatpak()),
+
   zoomFactor: t.procedure.query(() => config.zoomFactor),
   setZoomFactor: t.procedure.input(z.number()).mutation(({ input: factor }) => {
     globalThis.window?.webContents.setZoomFactor(factor);
     config.zoomFactor = factor;
   }),
 
+  proxyRules: t.procedure.query(() => config.proxyRules),
+  setProxyRules: t.procedure
+    .input(z.string().optional())
+    .mutation(({ input: proxyRules }) => {
+      globalThis.window?.webContents.session.setProxy({ proxyRules });
+      config.proxyRules = proxyRules || "";
+    }),
+
   privacyMode: t.procedure.query(() => config.privacyMode),
   setPrivacyMode: t.procedure
-    .input(z.boolean())
-    .mutation(({ input: privacyMode }) => {
+    .input(z.object({ enabled: z.boolean() }))
+    .mutation(({ input: { enabled } }) => {
       if (!globalThis.window || !["win32", "darwin"].includes(process.platform))
         return;
 
-      globalThis.window.setContentProtection(privacyMode);
+      globalThis.window.setContentProtection(enabled);
 
       if (process.platform === "win32") {
         globalThis.window.setThumbnailClip(
-          privacyMode
+          enabled
             ? { x: 0, y: 0, width: 1, height: 1 }
             : { x: 0, y: 0, width: 0, height: 0 }
         );
       }
-      config.privacyMode = privacyMode;
+      config.privacyMode = enabled;
     }),
 
   desktopIntegration: t.procedure.query(() => config.desktopSettings),
@@ -74,11 +86,12 @@ export const osIntegrationRouter = t.router({
     .input(DesktopIntegration)
     .mutation(({ input: settings }) => {
       if (settings.autoStart) {
-        AutoLaunch.enable(settings.startMinimized);
+        AutoLaunch.enable(!!settings.startMinimized);
       } else {
         AutoLaunch.disable();
       }
       config.desktopSettings = settings;
+      setupDesktopIntegration(settings);
     }),
 
   selectDirectory: t.procedure
@@ -117,15 +130,23 @@ export const osIntegrationRouter = t.router({
       writeFileSync(resolvedPath, data);
     }),
 
+  resolvePath: t.procedure
+    .input(z.object({ filePath: z.string() }))
+    .query(({ input }) => {
+      const { filePath } = input;
+      if (!filePath) return;
+      return resolvePath(filePath);
+    }),
+
   showNotification: t.procedure
     .input(NotificationOptions)
     .query(({ input }) => {
       const notification = new Notification({
         ...input,
-        icon: join(
-          __dirname,
-          platform() === "win32" ? "app.ico" : "favicon-72x72.png"
-        )
+        icon: AssetManager.appIcon({
+          size: 64,
+          format: process.platform === "win32" ? "ico" : "png"
+        })
       });
       notification.show();
       if (input.urgency === "critical") {

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

@@ -113,8 +113,18 @@ export const spellCheckerRouter = t.router({
     .mutation(({ input: languages }) =>
       globalThis.window?.webContents.session.setSpellCheckerLanguages(languages)
     ),
-  toggle: t.procedure.input(z.boolean()).mutation(({ input: enabled }) => {
-    globalThis.window?.webContents.session.setSpellCheckerEnabled(enabled);
-    config.isSpellCheckerEnabled = enabled;
+  toggle: t.procedure
+    .input(z.object({ enabled: z.boolean() }))
+    .mutation(({ input: { enabled } }) => {
+      globalThis.window?.webContents.session.setSpellCheckerEnabled(enabled);
+      config.isSpellCheckerEnabled = enabled;
+    }),
+  words: t.procedure.query(() =>
+    globalThis.window?.webContents.session.listWordsInSpellCheckerDictionary()
+  ),
+  deleteWord: t.procedure.input(z.string()).mutation(({ input: word }) => {
+    globalThis.window?.webContents.session.removeWordFromSpellCheckerDictionary(
+      word
+    );
   })
 });

apps/desktop/src/api/updater.ts

@@ -21,6 +21,8 @@ import { initTRPC } from "@trpc/server";
 import { observable } from "@trpc/server/observable";
 import { CancellationToken, autoUpdater } from "electron-updater";
 import type { AppUpdaterEvents } from "electron-updater/out/AppUpdater";
+import { z } from "zod";
+import { config } from "../utils/config";
 
 type UpdateInfo = { version: string };
 type Progress = { percent: number };
@@ -28,6 +30,7 @@ type Progress = { percent: number };
 const t = initTRPC.create();
 
 export const updaterRouter = t.router({
+  autoUpdates: t.procedure.query(() => config.automaticUpdates),
   install: t.procedure.query(() => autoUpdater.quitAndInstall()),
   download: t.procedure.query(async () => {
     const cancellationToken = new CancellationToken();
@@ -37,6 +40,12 @@ export const updaterRouter = t.router({
     await autoUpdater.checkForUpdates();
   }),
 
+  toggleAutoUpdates: t.procedure
+    .input(z.object({ enabled: z.boolean() }))
+    .mutation(({ input: { enabled } }) => {
+      config.automaticUpdates = enabled;
+    }),
+
   onChecking: createSubscription("checking-for-update"),
   onDownloaded: createSubscription<"update-downloaded", UpdateInfo>(
     "update-downloaded"

apps/desktop/src/cli.ts

@@ -27,19 +27,23 @@ export type CLIOptions = {
   hidden: boolean;
 };
 
-export async function parseArguments(): Promise<CLIOptions> {
+export async function parseArguments(argv: string[]): Promise<CLIOptions> {
   const result: CLIOptions = {
     note: false,
     notebook: false,
     reminder: false,
     hidden: false
   };
-  const { hidden } = await yargs(hideBin(process.argv))
+  const { hidden } = await yargs(hideBin(argv))
     .boolean("hidden")
+    // have to account for this flag added on Windows when launching
+    // via Jumplist
+    .boolean("allow-file-access-from-files")
     .command("new", "Create a new item", (yargs) => {
       return yargs
         .command("note", "Create a new note", {}, () => {
           result.note = true;
+          console.log("HERE!");
         })
         .command("notebook", "Create a new notebook", {}, () => {
           result.notebook = true;

apps/desktop/src/main.ts

@@ -16,7 +16,6 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-/* global MAC_APP_STORE, RELEASE */
 
 import { app, BrowserWindow, nativeTheme, shell } from "electron";
 import { isDevelopment } from "./utils";
@@ -25,7 +24,6 @@ import { configureAutoUpdater } from "./utils/autoupdater";
 import { getBackgroundColor, getTheme, setTheme } from "./utils/theme";
 import { setupMenu } from "./utils/menu";
 import { WindowState } from "./utils/window-state";
-import { AutoLaunch } from "./utils/autolaunch";
 import { setupJumplist } from "./utils/jumplist";
 import { setupTray } from "./utils/tray";
 import { CLIOptions, parseArguments } from "./cli";
@@ -33,82 +31,99 @@ import { AssetManager } from "./utils/asset-manager";
 import { createIPCHandler } from "electron-trpc/main";
 import { router, api } from "./api";
 import { config } from "./utils/config";
-
-if (!RELEASE) {
-  require("electron-reloader")(module);
-}
+import path from "path";
+import { bringToFront } from "./utils/bring-to-front";
+import { bridge } from "./api/bridge";
+import { setupDesktopIntegration } from "./utils/desktop-integration";
 
 // only run a single instance
-
 if (!MAC_APP_STORE && !app.requestSingleInstanceLock()) {
+  console.log("Another instance is already running!");
   app.exit();
 }
 
+if (process.platform == "win32" && process.env.PORTABLE_EXECUTABLE_DIR) {
+  console.log("Portable app: true");
+  const root = path.join(process.env.PORTABLE_EXECUTABLE_DIR, "Notesnook");
+  app.setPath("appData", path.join(root, "AppData"));
+  app.setPath("documents", path.join(root, "Documents"));
+  app.setPath("userData", path.join(root, "UserData"));
+}
+
 if (process.platform === "win32") {
   app.setAppUserModelId(app.name);
 }
 
-async function createWindow() {
-  await AssetManager.loadIcons();
-  const cliOptions = await parseArguments();
+process.on("uncaughtException", (error) => {
+  console.error("uncaughtException:", error);
+});
+process.on("unhandledRejection", (reason) => {
+  console.error("unhandledRejection:", reason);
+});
 
-  const mainWindowState = new WindowState({});
+app.commandLine.appendSwitch("lang", "en-US");
+
+async function createWindow() {
+  const cliOptions = await parseArguments(process.argv);
   setTheme(getTheme());
 
+  const mainWindowState = new WindowState({});
   const mainWindow = new BrowserWindow({
-    show: false,
+    show: !cliOptions.hidden,
     x: mainWindowState.x,
     y: mainWindowState.y,
     width: mainWindowState.width,
     height: mainWindowState.height,
     darkTheme: getTheme() === "dark",
     backgroundColor: getBackgroundColor(),
-
-    autoHideMenuBar: true,
+    opacity: 0,
+    autoHideMenuBar: false,
     icon: AssetManager.appIcon({
       size: 512,
       format: process.platform === "win32" ? "ico" : "png"
     }),
     webPreferences: {
       zoomFactor: config.zoomFactor,
-      devTools: true, // isDev,
-      nodeIntegration: true, //true,
+      nodeIntegration: true,
       contextIsolation: false,
       spellcheck: config.isSpellCheckerEnabled,
       preload: __dirname + "/preload.js"
     }
   });
 
-  mainWindow.on("show", async () => {
-    if (config.privacyMode) {
-      await api.integration.setPrivacyMode(config.privacyMode);
-    }
-  });
-
-  mainWindowState.manage(mainWindow);
-  globalThis.window = mainWindow;
-  setupMenu();
-  setupJumplist();
-  setupDesktopIntegration(cliOptions.hidden);
   createIPCHandler({ router, windows: [mainWindow] });
+  globalThis.window = mainWindow;
+  mainWindow.setMenuBarVisibility(false);
+  mainWindowState.manage(mainWindow);
+
+  if (cliOptions.hidden && !config.desktopSettings.minimizeToSystemTray)
+    mainWindow.minimize();
+
+  await mainWindow.webContents.loadURL(`${createURL(cliOptions, "/")}`);
+  mainWindow.setOpacity(1);
+
+  if (config.privacyMode) {
+    await api.integration.setPrivacyMode({ enabled: config.privacyMode });
+  }
+
+  await AssetManager.loadIcons();
+  setupDesktopIntegration(config.desktopSettings);
 
   mainWindow.webContents.session.setSpellCheckerDictionaryDownloadURL(
     "http://dictionaries.notesnook.com/"
   );
+  mainWindow.webContents.session.setProxy({ proxyRules: config.proxyRules });
+
+  mainWindow.once("closed", () => {
+    globalThis.window = null;
+  });
+
+  setupMenu();
+  setupJumplist();
 
   if (isDevelopment())
     mainWindow.webContents.openDevTools({ mode: "right", activate: true });
 
-  try {
-    await mainWindow.loadURL(`${createURL(cliOptions)}`);
-  } catch (e) {
-    if (e instanceof Error) console.error(e);
-  }
-
-  mainWindow.on("closed", () => {
-    globalThis.window = null;
-  });
-
   mainWindow.webContents.setWindowOpenHandler((details) => {
     shell.openExternal(details.url);
     return { action: "deny" };
@@ -120,8 +135,7 @@ async function createWindow() {
   });
 }
 
-app.commandLine.appendSwitch("lang", "en-US");
-app.on("ready", async () => {
+app.once("ready", async () => {
   console.info("App ready. Opening window.");
 
   if (!isDevelopment()) registerProtocol();
@@ -129,21 +143,31 @@ app.on("ready", async () => {
   configureAutoUpdater();
 });
 
-app.on("window-all-closed", () => {
+app.once("window-all-closed", () => {
   if (process.platform !== "darwin" || MAC_APP_STORE) {
     app.quit();
   }
 });
 
+app.on("second-instance", async (_ev, argv) => {
+  if (!globalThis.window) return;
+  const cliOptions = await parseArguments(argv);
+  if (cliOptions.note) bridge.onCreateItem("note");
+  if (cliOptions.notebook) bridge.onCreateItem("notebook");
+  if (cliOptions.reminder) bridge.onCreateItem("reminder");
+  bringToFront();
+});
+
 app.on("activate", () => {
   if (globalThis.window === null) {
     createWindow();
   }
 });
 
-function createURL(options: CLIOptions) {
+function createURL(options: CLIOptions, path = "/") {
   const url = new URL(isDevelopment() ? "http://localhost:3000" : PROTOCOL_URL);
 
+  url.pathname = path;
   if (options.note === true) url.hash = "/notes/create/1";
   else if (options.notebook === true) url.hash = "/notebooks/create";
   else if (options.reminder === true) url.hash = "/reminders/create";
@@ -154,60 +178,3 @@ function createURL(options: CLIOptions) {
 
   return url;
 }
-
-function setupDesktopIntegration(hidden: boolean) {
-  const desktopIntegration = config.desktopSettings;
-
-  if (
-    desktopIntegration.closeToSystemTray ||
-    desktopIntegration.minimizeToSystemTray
-  ) {
-    setupTray();
-  }
-
-  globalThis.window?.on("ready-to-show", () => {
-    if (!hidden) {
-      globalThis.window?.show();
-    }
-
-    if (hidden && !desktopIntegration.minimizeToSystemTray) {
-      globalThis.window?.show();
-      globalThis.window?.minimize();
-    }
-  });
-
-  // when close to system tray is enabled, it becomes nigh impossible
-  // to "quit" the app. This is necessary in order to fix that.
-  if (desktopIntegration.closeToSystemTray) {
-    app.on("before-quit", () => app.exit(0));
-  }
-
-  globalThis.window?.on("close", (e) => {
-    if (config.desktopSettings.closeToSystemTray) {
-      e.preventDefault();
-      if (process.platform == "darwin") {
-        // on macOS window cannot be minimized/hidden if it is already fullscreen
-        // so we just close it.
-        if (globalThis.window?.isFullScreen()) app.exit(0);
-        else app.hide();
-      } else {
-        globalThis.window?.minimize();
-        globalThis.window?.hide();
-      }
-    }
-  });
-
-  globalThis.window?.on("minimize", () => {
-    if (config.desktopSettings.minimizeToSystemTray) {
-      if (process.platform == "darwin") {
-        app.hide();
-      } else {
-        globalThis.window?.hide();
-      }
-    }
-  });
-
-  if (desktopIntegration.autoStart) {
-    AutoLaunch.enable(desktopIntegration.startMinimized);
-  }
-}

apps/desktop/src/preload.ts

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

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

@@ -21,8 +21,8 @@ import { NativeImage, nativeImage } from "electron";
 import path from "path";
 import { isDevelopment } from "./index";
 import { parse, ParsedImage } from "icojs";
-import { readFileSync } from "fs";
 import { getSystemTheme } from "./theme";
+import { readFile } from "fs/promises";
 
 type Formats = "ico" | "png" | "icns";
 type IconOptions<TFormat extends Formats> = {
@@ -70,7 +70,7 @@ export class AssetManager {
           "icons",
           `${icon}${prefix}.ico`
         );
-        const icoBuffer = readFileSync(icoPath);
+        const icoBuffer = await readFile(icoPath);
         const images = await parse(icoBuffer, "image/png");
         ALL_ICONS.push({ id: icon, images, prefix });
       }
@@ -80,10 +80,10 @@ export class AssetManager {
   static appIcon(options: IconOptions<Formats>) {
     const { size = 32, format = "png" } = options;
 
-    if (format === "ico") return path.join("assets", "icons", "app.ico");
-    if (format === "icns") return path.join("assets", "icons", "app.icns");
+    if (format === "ico") return "assets\\icons\\app.ico";
+    if (format === "icns") return "assets/icons/app.icns";
 
-    return path.join("assets", "icons", `${size}x${size}.png`);
+    return `assets/icons/${size}x${size}.png`;
   }
 
   static icon<TFormat extends Formats>(

apps/desktop/src/utils/autolaunch.ts

@@ -25,7 +25,11 @@ Type=Application
 Version=${app.getVersion()}
 Name=${app.getName()}
 Comment=${app.getName()} startup script
-Exec=${process.execPath}${hidden ? " --hidden" : ""}
+Exec=${
+  process.env.APPIMAGE
+    ? `${process.env.APPIMAGE}${hidden ? " --hidden" : ""}`
+    : `${process.execPath}${hidden ? " --hidden" : ""}`
+}
 StartupNotify=false
 Terminal=false`;
 
@@ -35,6 +39,8 @@ const LINUX_AUTOSTART_DIRECTORY_PATH = path.join(
   "autostart"
 );
 
+const STARTUP_ARGS = ["--hidden"];
+
 export class AutoLaunch {
   static enable(hidden: boolean) {
     if (process.platform === "linux") {
@@ -47,10 +53,14 @@ export class AutoLaunch {
         LINUX_DESKTOP_ENTRY(hidden)
       );
     } else {
+      const loginItemSettings = app.getLoginItemSettings({
+        args: STARTUP_ARGS
+      });
+      if (loginItemSettings.openAtLogin) return;
       app.setLoginItemSettings({
         openAtLogin: true,
         openAsHidden: hidden,
-        args: ["--hidden"]
+        args: STARTUP_ARGS
       });
     }
   }

apps/desktop/src/utils/autoupdater.ts

@@ -18,6 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { autoUpdater } from "electron-updater";
+import { config } from "./config";
 
 async function configureAutoUpdater() {
   autoUpdater.setFeedURL({
@@ -26,7 +27,7 @@ async function configureAutoUpdater() {
     useMultipleRangeRequest: false
   });
 
-  autoUpdater.autoDownload = false;
+  autoUpdater.autoDownload = config.automaticUpdates;
   autoUpdater.allowDowngrade = false;
   autoUpdater.allowPrerelease = false;
   autoUpdater.autoInstallOnAppQuit = true;

apps/desktop/src/utils/config.ts

@@ -22,10 +22,10 @@ import { JSONStorage } from "./json-storage";
 import { z } from "zod";
 
 export const DesktopIntegration = z.object({
-  autoStart: z.boolean(),
-  startMinimized: z.boolean(),
-  minimizeToSystemTray: z.boolean(),
-  closeToSystemTray: z.boolean()
+  autoStart: z.boolean().optional(),
+  startMinimized: z.boolean().optional(),
+  minimizeToSystemTray: z.boolean().optional(),
+  closeToSystemTray: z.boolean().optional()
 });
 
 export type DesktopIntegration = z.infer<typeof DesktopIntegration>;
@@ -38,9 +38,11 @@ export const config = {
     closeToSystemTray: false
   },
   privacyMode: false,
-  isSpellCheckerEnabled: false,
-  zoomFactor: 0,
-  theme: nativeTheme.themeSource
+  isSpellCheckerEnabled: true,
+  zoomFactor: 1,
+  theme: nativeTheme.themeSource,
+  automaticUpdates: true,
+  proxyRules: ""
 };
 
 type ConfigKey = keyof typeof config;

apps/desktop/src/utils/desktop-integration.ts

@@ -0,0 +1,74 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import { app } from "electron";
+import { DesktopIntegration, config } from "./config";
+import { setupTray, destroyTray } from "./tray";
+import { AutoLaunch } from "./autolaunch";
+
+export function setupDesktopIntegration(
+  desktopIntegration: DesktopIntegration
+) {
+  if (
+    desktopIntegration.closeToSystemTray ||
+    desktopIntegration.minimizeToSystemTray
+  ) {
+    setupTray();
+  } else {
+    destroyTray();
+  }
+
+  // when close to system tray is enabled, it becomes nigh impossible
+  // to "quit" the app. This is necessary in order to fix that.
+  app.on("before-quit", () =>
+    desktopIntegration.closeToSystemTray ? app.exit(0) : null
+  );
+
+  globalThis.window?.on("close", (e) => {
+    if (config.desktopSettings.closeToSystemTray) {
+      e.preventDefault();
+      if (process.platform == "darwin") {
+        // on macOS window cannot be minimized/hidden if it is already fullscreen
+        // so we just close it.
+        if (globalThis.window?.isFullScreen()) app.exit(0);
+        else app.hide();
+      } else {
+        try {
+          globalThis.window?.minimize();
+          globalThis.window?.hide();
+        } catch (error) {
+          console.error(error);
+        }
+      }
+    }
+  });
+
+  globalThis.window?.on("minimize", () => {
+    if (config.desktopSettings.minimizeToSystemTray) {
+      if (process.platform == "darwin") {
+        app.hide();
+      } else {
+        globalThis.window?.hide();
+      }
+    }
+  });
+
+  if (desktopIntegration.autoStart) {
+    AutoLaunch.enable(!!desktopIntegration.startMinimized);
+  }
+}

apps/desktop/src/utils/index.ts

@@ -18,14 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { app } from "electron";
-import { join } from "path";
 import { existsSync } from "fs";
 
-export const APP_ICON_PATH = join(
-  __dirname,
-  process.platform === "win32" ? "app.ico" : "favicon-72x72.png"
-);
-
 export function isDevelopment() {
   return process.env.ELECTRON_IS_DEV
     ? Number.parseInt(process.env.ELECTRON_IS_DEV, 10) === 1

apps/desktop/src/utils/menu.ts

@@ -101,6 +101,26 @@ function setupMenu() {
         })
       );
 
+    if (params.linkURL?.length) {
+      menu.append(
+        new MenuItem({
+          label: "Copy link",
+          click() {
+            clipboard.writeText(params.linkURL);
+          }
+        })
+      );
+
+      menu.append(
+        new MenuItem({
+          label: "Copy link text",
+          click() {
+            clipboard.writeText(params.linkText);
+          }
+        })
+      );
+    }
+
     if (params.selectionText.length) {
       menu.append(
         new MenuItem({
@@ -111,6 +131,17 @@ function setupMenu() {
       );
     }
 
+    if (params.mediaType === "image")
+      menu.append(
+        new MenuItem({
+          id: "copy-image",
+          label: "Copy Image",
+          click() {
+            globalThis.window?.webContents.copyImageAt(params.x, params.y);
+          }
+        })
+      );
+
     if (params.isEditable)
       menu.append(
         new MenuItem({

apps/desktop/src/utils/protocol.ts

@@ -17,16 +17,14 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { protocol, ProtocolRequest } from "electron";
+import { protocol } from "electron";
 import { isDevelopment } from "./index";
-import { createReadStream, statSync } from "fs";
-import { extname, join, normalize } from "path";
+import { createReadStream } from "fs";
+import { extname, normalize } from "path";
 import { URL } from "url";
-import { Readable } from "stream";
 
 const BASE_PATH = isDevelopment() ? "../public" : "";
 const HOSTNAME = `app.notesnook.com`;
-const FILE_NOT_FOUND = -6;
 const SCHEME = "https";
 const extensionToMimeType: Record<string, string> = {
   html: "text/html",
@@ -34,102 +32,59 @@ const extensionToMimeType: Record<string, string> = {
   js: "application/javascript",
   css: "text/css",
   svg: "image/svg+xml",
-  png: "image/png"
+  png: "image/png",
+  jpg: "image/jpg",
+  ttf: "font/ttf",
+  woff: "font/woff",
+  woff2: "font/woff2"
 };
 
 function registerProtocol() {
-  const protocolInterceptionResult = protocol.interceptStreamProtocol(
-    SCHEME,
-    async (request, callback) => {
-      const url = new URL(request.url);
-      if (shouldInterceptRequest(url)) {
-        console.info("Intercepting request:", request.url);
-
-        const loadIndex = !extname(url.pathname);
-        const absoluteFilePath = normalize(
-          `${__dirname}${
-            loadIndex
-              ? `${BASE_PATH}/index.html`
-              : `${BASE_PATH}/${url.pathname}`
-          }`
-        );
-        const filePath = getPath(absoluteFilePath);
-        if (!filePath) {
-          console.error("Local asset file not found at", filePath);
-          callback({ error: FILE_NOT_FOUND });
-          return;
-        }
-        const fileExtension = extname(filePath).replace(".", "");
-
-        const data = createReadStream(filePath);
-        callback({
-          data,
-          mimeType: extensionToMimeType[fileExtension]
-        });
-      } else {
-        let response: Response;
-        try {
-          const body = await getBody(request);
-          response = await fetch(request.url, {
-            ...request,
-            body,
-            headers: {
-              ...request.headers
-              // origin: `${PROTOCOL}://${HOSTNAME}/`
-            },
-            referrer: request.referrer,
-            redirect: "manual"
-          });
-        } catch (e) {
-          console.error(e);
-          console.error(`Error sending request to `, request.url, "Error: ", e);
-          callback({ statusCode: 400 });
-          return;
-        }
-        callback({
-          statusCode: response.status,
-          data: response.body ? Readable.fromWeb(response.body) : undefined,
-          headers: Object.fromEntries(response.headers.entries()),
-          mimeType: response.headers.get("Content-Type") || undefined
+  protocol.handle(SCHEME, async (request) => {
+    const url = new URL(request.url);
+    if (shouldInterceptRequest(url)) {
+      console.info("Intercepting request:", request.url);
+      const loadIndex = !extname(url.pathname);
+      const filePath = normalize(
+        `${__dirname}${
+          loadIndex ? `${BASE_PATH}/index.html` : `${BASE_PATH}/${url.pathname}`
+        }`
+      );
+      if (!filePath) {
+        console.error("Local asset file not found at", filePath);
+        return new Response(undefined, {
+          status: 404,
+          statusText: "FILE_NOT_FOUND"
         });
       }
+      const fileExtension = extname(filePath).replace(".", "");
+      return new Response(createReadStream(filePath), {
+        headers: { "Content-Type": extensionToMimeType[fileExtension] }
+      });
+    } else {
+      if (request.headers.has("X-Content-Length")) {
+        request.headers.set(
+          "Content-Length",
+          request.headers.get("X-Content-Length") || "0"
+        );
+        request.headers.delete("X-Content-Length");
+      }
+      const headers = Object.fromEntries(request.headers.entries());
+
+      return await fetch(request.url, {
+        signal: request.signal,
+        mode: request.mode,
+        headers,
+        method: request.method,
+        body: request.body,
+        credentials: request.credentials,
+        referrer: (request as any).referrer,
+        duplex: "half",
+        redirect: "manual"
+      });
     }
-  );
-
-  console.info(
-    `${SCHEME} protocol inteception ${
-      protocolInterceptionResult ? "successful" : "failed"
-    }.`
-  );
-
-  // protocol.handle(SCHEME, (request) => {
-  //   const url = new URL(request.url);
-  //   if (shouldInterceptRequest(url)) {
-  //     console.info("Intercepting request:", request.url);
-  //     const loadIndex = !extname(url.pathname);
-  //     const absoluteFilePath = normalize(
-  //       `${__dirname}${
-  //         loadIndex ? `${BASE_PATH}/index.html` : `${BASE_PATH}/${url.pathname}`
-  //       }`
-  //     );
-  //     const filePath = getPath(absoluteFilePath);
-  //     if (!filePath) {
-  //       console.error("Local asset file not found at", filePath);
-  //       return new Response(undefined, {
-  //         status: 404,
-  //         statusText: "FILE_NOT_FOUND"
-  //       });
-  //     }
-  //     const fileExtension = extname(filePath).replace(".", "");
-  //     const data = createReadStream(filePath);
-  //     return new Response(data, {
-  //       headers: { "Content-Type": extensionToMimeType[fileExtension] }
-  //     });
-  //   } else {
-  //     return net.fetch(request);
-  //   }
-  // });
-  // console.info(`${SCHEME} protocol inteception "successful"`);
+  });
+  console.info(`${SCHEME} protocol inteception "successful"`);
 }
 
 const bypassedRoutes: string[] = [];
@@ -140,37 +95,3 @@ function shouldInterceptRequest(url: URL) {
 
 const PROTOCOL_URL = `${SCHEME}://${HOSTNAME}/`;
 export { registerProtocol, PROTOCOL_URL };
-
-async function getBody(request: ProtocolRequest) {
-  const session = globalThis?.window?.webContents?.session;
-
-  const blobParts = [];
-  if (!request.uploadData || !request.uploadData.length) return null;
-  for (const data of request.uploadData) {
-    if (data.bytes) {
-      blobParts.push(new Uint8Array(data.bytes));
-    } else if (session && data.blobUUID) {
-      const buffer = await session.getBlobData(data.blobUUID);
-      if (!buffer) continue;
-      blobParts.push(new Uint8Array(buffer));
-    }
-  }
-  const blob = new Blob(blobParts);
-  return await blob.arrayBuffer();
-}
-
-function getPath(filePath: string): string | undefined {
-  try {
-    const result = statSync(filePath);
-
-    if (result.isFile()) {
-      return filePath;
-    }
-
-    if (result.isDirectory()) {
-      return getPath(join(filePath, "index.html"));
-    }
-  } catch (_) {
-    // ignore
-  }
-}

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

@@ -17,15 +17,6 @@ jobs:
         with:
           persist-credentials: false
 
-      - name: Setup npmrc
-        run: |
-          echo "registry=https://npm.pkg.github.com" > .npmrc
-          echo "@streetwriters:registry=https://npm.pkg.github.com" >> .npmrc
-          echo "//npm.pkg.github.com/:_authToken=${{secrets.PACKAGES_TOKEN}}" >> .npmrc
-
-      - name: Setup yarnrc
-        run: echo "\"@streetwriters:registry\" \"https://npm.pkg.github.com\"" > .yarnrc
-
       - uses: actions/setup-node@master
         with:
           node-version: "16"

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

@@ -17,15 +17,6 @@ jobs:
         with:
           persist-credentials: false
 
-      - name: Setup npmrc
-        run: |
-          echo "registry=https://npm.pkg.github.com" > .npmrc
-          echo "@streetwriters:registry=https://npm.pkg.github.com" >> .npmrc
-          echo "//npm.pkg.github.com/:_authToken=${{secrets.PACKAGES_TOKEN}}" >> .npmrc
-
-      - name: Setup yarnrc
-        run: echo "\"@streetwriters:registry\" \"https://npm.pkg.github.com\"" > .yarnrc
-
       - uses: actions/setup-node@master
         with:
           node-version: "16"

apps/mobile/.gitignore

@@ -5,7 +5,6 @@ artifacts/
 .DS_Store
 
 native/android/app/src/main/assets/
-
 *Issues.md
 build_cache/
 #
@@ -14,7 +13,9 @@ build_cache/
 .yarnrc.yml
 .yarn
 *.log
-
+.cxx/
+*.keystore
+!debug.keystore
 
 # Xcode
 #

apps/mobile/.vscode/launch.json

@@ -25,4 +25,4 @@
       "request": "attach"
     }
   ]
-}
+}

apps/mobile/__tests__/App-test.js

@@ -3,6 +3,7 @@
  */
 
 import "react-native";
+import { it } from "@jest/globals";
 // Note: test renderer must be required after react-native.
 import renderer from "react-test-renderer";
 import Heading from "../app/components/ui/typography/heading";

apps/mobile/app/app.js

@@ -16,34 +16,42 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import "react-native-gesture-handler";
+import "@azure/core-asynciterator-polyfill";
+import {
+  THEME_COMPATIBILITY_VERSION,
+  useThemeEngineStore
+} from "@notesnook/theme";
 import React, { useEffect } from "react";
+import { I18nManager, View } from "react-native";
+import "react-native-gesture-handler";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
+import AppLockedOverlay from "./components/app-lock-overlay";
 import { withErrorBoundry } from "./components/exception-handler";
 import GlobalSafeAreaProvider from "./components/globalsafearea";
-import Launcher from "./components/launcher";
 import { useAppEvents } from "./hooks/use-app-events";
 import { ApplicationHolder } from "./navigation";
+import { themeTrpcClient } from "./screens/settings/theme-selector";
 import Notifications from "./services/notifications";
 import SettingsService from "./services/settings";
 import { TipManager } from "./services/tip-manager";
+import { useThemeStore } from "./stores/use-theme-store";
 import { useUserStore } from "./stores/use-user-store";
-import { View } from "react-native";
-import { useState } from "react";
 
-SettingsService.init();
+I18nManager.allowRTL(false);
+I18nManager.forceRTL(false);
+I18nManager.swapLeftAndRightInRTL(false);
+
 SettingsService.checkOrientation();
 const App = () => {
-  useAppEvents();
-  const [init, setInit] = useState(false);
+  const init = useAppEvents();
   useEffect(() => {
     let { appLockMode } = SettingsService.get();
     if (appLockMode && appLockMode !== "none") {
-      useUserStore.getState().setVerifyUser(true);
+      useUserStore.getState().lockApp(true);
     }
-    //BackgroundSync.start();
-    setInit(true);
+    globalThis["IS_MAIN_APP_RUNNING"] = true;
+    init();
     setTimeout(async () => {
       SettingsService.onFirstLaunch();
       await Notifications.get();
@@ -52,7 +60,10 @@ const App = () => {
       }
       TipManager.init();
     }, 100);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
   return (
     <View
       style={{
@@ -81,10 +92,59 @@ const App = () => {
         }}
       >
         <ApplicationHolder />
-        {init && <Launcher />}
       </GestureHandlerRootView>
+      <AppLockedOverlay />
     </View>
   );
 };
 
-export default withErrorBoundry(App, "App");
+let currTheme =
+  useThemeStore.getState().colorScheme === "dark"
+    ? SettingsService.getProperty("darkTheme")
+    : SettingsService.getProperty("lightTheme");
+useThemeEngineStore.getState().setTheme(currTheme);
+
+export const withTheme = (Element) => {
+  return function AppWithThemeProvider() {
+    const [colorScheme, darkTheme, lightTheme] = useThemeStore((state) => [
+      state.colorScheme,
+      state.darkTheme,
+      state.lightTheme
+    ]);
+
+    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) {
+              console.log(theme.version, "theme updated");
+              theme.colorScheme === "dark"
+                ? useThemeStore.getState().setDarkTheme(theme)
+                : useThemeStore.getState().setLightTheme(theme);
+            }
+          })
+          .catch(console.log);
+      }, 1000);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const nextTheme = colorScheme === "dark" ? darkTheme : lightTheme;
+    if (JSON.stringify(nextTheme) !== JSON.stringify(currTheme)) {
+      useThemeEngineStore
+        .getState()
+        .setTheme(colorScheme === "dark" ? darkTheme : lightTheme);
+      currTheme = nextTheme;
+    }
+
+    return <Element />;
+  };
+};
+
+export default withTheme(withErrorBoundry(App, "App"));

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

@@ -126,6 +126,18 @@ export async function decrypt(password, data) {
   return await Sodium.decrypt(password, _data);
 }
 
+export async function decryptMulti(password, data) {
+  if (!password.password && !password.key) return undefined;
+  if (password.password && password.password === "" && !password.key)
+    return undefined;
+
+  data = data.map((d) => {
+    d.output = "plain";
+    return d;
+  });
+  return await Sodium.decryptMulti(password, data);
+}
+
 export function parseAlgorithm(alg) {
   if (!alg) return {};
   const [enc, kdf, compressed, compressionAlg, base64variant] = alg.split("-");
@@ -154,3 +166,24 @@ export async function encrypt(password, data) {
     alg: getAlgorithm(7)
   };
 }
+
+export async function encryptMulti(password, data) {
+  if (!password.password && !password.key) return undefined;
+  if (password.password && password.password === "" && !password.key)
+    return undefined;
+
+  let results = await Sodium.encryptMulti(
+    password,
+    data.map((item) => ({
+      type: "plain",
+      data: item
+    }))
+  );
+
+  return !results
+    ? []
+    : results.map((result) => ({
+        ...result,
+        alg: getAlgorithm(7)
+      }));
+}

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

@@ -16,37 +16,17 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-
-import Database from "@notesnook/core/api/index";
-import { initalize, logger as dbLogger } from "@notesnook/core/logger";
+import { database } from "@notesnook/common";
+import { logger as dbLogger } from "@notesnook/core/dist/logger";
 import { Platform } from "react-native";
-import { MMKVLoader } from "react-native-mmkv-storage";
-import filesystem from "../filesystem";
+import * as Gzip from "react-native-gzip";
 import EventSource from "../../utils/sse/even-source-ios";
 import AndroidEventSource from "../../utils/sse/event-source";
-import Storage, { KV } from "./storage";
-import * as Gzip from "react-native-gzip";
+import filesystem from "../filesystem";
+import "./logger";
+import Storage from "./storage";
 
-const LoggerStorage = new MMKVLoader()
-  .withInstanceID("notesnook_logs")
-  .initialize();
-initalize(new KV(LoggerStorage), true);
-export const DatabaseLogger = dbLogger;
-
-/**
- * @type {import("@notesnook/core/api/index").default}
- */
-export var db = new Database(
-  Storage,
-  Platform.OS === "ios" ? EventSource : AndroidEventSource,
-  filesystem,
-  {
-    compress: Gzip.deflate,
-    decompress: Gzip.inflate
-  }
-);
-
-db.host(
+database.host(
   __DEV__
     ? {
         API_HOST: "https://api.notesnook.com",
@@ -54,11 +34,11 @@ db.host(
         SSE_HOST: "https://events.streetwriters.co",
         SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
         ISSUES_HOST: "https://issues.streetwriters.co"
-        // API_HOST: "http://192.168.8.101:5264",
-        // AUTH_HOST: "http://192.168.8.101:8264",
-        // SSE_HOST: "http://192.168.8.101:7264",
-        // SUBSCRIPTIONS_HOST: "http://192.168.8.101:9264",
-        // ISSUES_HOST: "http://192.168.8.101:2624"
+        // API_HOST: "http://192.168.43.108:5264",
+        // AUTH_HOST: "http://192.168.43.108:8264",
+        // SSE_HOST: "http://192.168.43.108:7264",
+        // SUBSCRIPTIONS_HOST: "http://192.168.43.108:9264",
+        // ISSUES_HOST: "http://192.168.43.108:2624"
       }
     : {
         API_HOST: "https://api.notesnook.com",
@@ -68,3 +48,16 @@ db.host(
         ISSUES_HOST: "https://issues.streetwriters.co"
       }
 );
+
+database.setup(
+  Storage,
+  Platform.OS === "ios" ? EventSource : AndroidEventSource,
+  filesystem,
+  {
+    compress: Gzip.deflate,
+    decompress: Gzip.inflate
+  }
+);
+
+export const db = database;
+export const DatabaseLogger = dbLogger;

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

@@ -0,0 +1,29 @@
+/*
+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 { initalize } from "@notesnook/core/dist/logger";
+import { MMKVLoader } from "react-native-mmkv-storage";
+import { KV } from "./storage";
+
+const LoggerStorage = new MMKVLoader()
+  .withInstanceID("notesnook_logs")
+  .initialize();
+
+initalize(new KV(LoggerStorage));
+
+export { LoggerStorage };

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

@@ -18,12 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Platform } from "react-native";
-import MMKVStorage, { ProcessingModes } from "react-native-mmkv-storage";
+import { ProcessingModes, MMKVLoader } from "react-native-mmkv-storage";
 
-export const MMKV = new MMKVStorage.Loader()
+export const MMKV = new MMKVLoader()
   .setProcessingMode(
     Platform.OS === "ios"
       ? ProcessingModes.MULTI_PROCESS
       : ProcessingModes.SINGLE_PROCESS
   )
+  .disableIndexing()
   .initialize();

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

@@ -27,11 +27,16 @@ import {
   getCryptoKey,
   getRandomBytes,
   hash,
-  removeCryptoKey
+  removeCryptoKey,
+  decryptMulti,
+  encryptMulti
 } from "./encryption";
 import { MMKV } from "./mmkv";
 
 export class KV {
+  /**
+   * @type {typeof MMKV}
+   */
   storage = null;
   constructor(storage) {
     this.storage = storage;
@@ -53,6 +58,7 @@ export class KV {
       key,
       typeof data === "string" ? data : JSON.stringify(data)
     );
+
     return true;
   }
 
@@ -60,27 +66,36 @@ export class KV {
     if (keys.length <= 0) {
       return [];
     } else {
-      let data = await this.storage.getMultipleItemsAsync(keys.slice());
-
-      return data.map(([key, value]) => {
-        let obj;
-        try {
-          obj = JSON.parse(value);
-        } catch (e) {
-          obj = value;
-        }
-
-        return [key, obj];
-      });
+      try {
+        let data = await this.storage.getMultipleItemsAsync(
+          keys.slice(),
+          "string"
+        );
+        return data.map(([key, value]) => {
+          let obj;
+          try {
+            obj = JSON.parse(value);
+          } catch (e) {
+            obj = value;
+          }
+          return [key, obj];
+        });
+      } catch (e) {
+        console.log(e);
+      }
     }
   }
 
   async remove(key) {
-    return await this.storage.removeItem(key);
+    return this.storage.removeItem(key);
+  }
+
+  async removeMulti(keys) {
+    return this.storage.removeItems(...keys);
   }
 
   async clear() {
-    return await this.storage.clearStore();
+    return this.storage.clearStore();
   }
 
   async getAllKeys() {
@@ -96,6 +111,10 @@ export class KV {
     );
     return keys;
   }
+
+  async writeMulti(items) {
+    return this.storage.setMultipleItemsAsync(items, "object");
+  }
 }
 
 const DefaultStorage = new KV(MMKV);
@@ -129,8 +148,11 @@ export default {
   remove: (key) => DefaultStorage.remove(key),
   clear: () => DefaultStorage.clear(),
   getAllKeys: () => DefaultStorage.getAllKeys(),
+  writeMulti: (items) => DefaultStorage.writeMulti(items),
+  removeMulti: (keys) => DefaultStorage.removeMulti(keys),
   encrypt,
   decrypt,
+  decryptMulti,
   getRandomBytes,
   checkAndCreateDir,
   requestPermission,
@@ -138,5 +160,6 @@ export default {
   getCryptoKey,
   removeCryptoKey,
   hash,
-  generateCryptoKey
+  generateCryptoKey,
+  encryptMulti
 };

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

@@ -22,7 +22,7 @@ import {
   getFileNameWithExtension,
   isImage,
   isDocument
-} from "@notesnook/core/utils/filename";
+} from "@notesnook/core/dist/utils/filename";
 import React from "react";
 import { Platform } from "react-native";
 import * as ScopedStorage from "react-native-scoped-storage";
@@ -34,6 +34,8 @@ import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { db } from "../database";
 import Storage from "../database/storage";
 import { cacheDir, copyFileAsync, releasePermissions } from "./utils";
+import { createCacheDir, exists } from "./io";
+import { IOS_APPGROUPID } from "../../utils/constants";
 
 export const FileDownloadStatus = {
   Success: 1,
@@ -62,6 +64,7 @@ export async function downloadAttachments(
   canceled,
   groupId
 ) {
+  await createCacheDir();
   if (!attachments || !attachments.length) return;
   const result = new Map();
 
@@ -179,9 +182,13 @@ export default async function downloadAttachment(
     silent: false,
     cache: false,
     throwError: false,
-    groupId: undefined
+    groupId: undefined,
+    base64: false,
+    text: false
   }
 ) {
+  await createCacheDir();
+
   let attachment = db.attachments.attachment(hash);
   if (!attachment) {
     console.log("attachment not found");
@@ -208,10 +215,17 @@ export default async function downloadAttachment(
       options.groupId || attachment.metadata.hash,
       attachment.metadata.hash
     );
-    if (
-      !(await RNFetchBlob.fs.exists(`${cacheDir}/${attachment.metadata.hash}`))
-    )
+
+    if (!(await exists(attachment.metadata.hash))) {
       return;
+    }
+
+    if (options.base64 || options.text) {
+      return await db.attachments.read(
+        attachment.metadata.hash,
+        options.base64 ? "base64" : "text"
+      );
+    }
 
     let filename = getFileNameWithExtension(
       attachment.metadata.filename,
@@ -229,7 +243,8 @@ export default async function downloadAttachment(
       mime: attachment.metadata.type,
       fileName: options.cache ? undefined : filename,
       uri: options.cache ? undefined : folder.uri,
-      chunkSize: attachment.chunkSize
+      chunkSize: attachment.chunkSize,
+      appGroupId: IOS_APPGROUPID
     };
 
     let fileUri = await Sodium.decryptFile(

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

@@ -17,22 +17,25 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import hosts from "@notesnook/core/utils/constants";
+import hosts from "@notesnook/core/dist/utils/constants";
 import NetInfo from "@react-native-community/netinfo";
 import RNFetchBlob from "react-native-blob-util";
 import { ToastEvent } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { db } from "../database";
 import { cacheDir, fileCheck } from "./utils";
+import { createCacheDir, exists } from "./io";
 
 export async function downloadFile(filename, data, cancelToken) {
   if (!data) return false;
-  let { url, headers } = data;
 
+  await createCacheDir();
+
+  let { url, headers } = data;
   let path = `${cacheDir}/${filename}`;
+
   try {
-    let exists = await RNFetchBlob.fs.exists(path);
-    if (exists) {
+    if (await exists(filename)) {
       return true;
     }
 
@@ -46,6 +49,7 @@ export async function downloadFile(filename, data, cancelToken) {
 
     if (!downloadUrl) throw new Error("Unable to resolve download url");
     let totalSize = 0;
+    console.log("Download starting");
     let request = RNFetchBlob.config({
       path: path,
       IOSBackgroundTask: true
@@ -59,44 +63,55 @@ export async function downloadFile(filename, data, cancelToken) {
         console.log("downloading: ", recieved, total);
       });
 
-    cancelToken.cancel = request.cancel;
+    cancelToken.cancel = () => {
+      useAttachmentStore.getState().remove(filename);
+      request.cancel();
+    };
     let response = await request;
     await fileCheck(response, totalSize);
     let status = response.info().status;
     useAttachmentStore.getState().remove(filename);
     return status >= 200 && status < 300;
   } catch (e) {
-    ToastEvent.show({
-      heading: "Error downloading file",
-      message: e.message,
-      type: "error",
-      context: "global"
-    });
-    ToastEvent.show({
-      heading: "Error downloading file",
-      message: e.message,
-      type: "error",
-      context: "local"
-    });
+    if (e.message !== "canceled") {
+      ToastEvent.show({
+        heading: "Error downloading file",
+        message: e.message,
+        type: "error",
+        context: "global"
+      });
+      ToastEvent.show({
+        heading: "Error downloading file",
+        message: e.message,
+        type: "error",
+        context: "local"
+      });
+    }
 
     useAttachmentStore.getState().remove(filename);
     RNFetchBlob.fs.unlink(path).catch(console.log);
-    console.log("download file error: ", e, url, headers);
+    console.log("Download file error:", e, url, headers);
     return false;
   }
 }
 
 export async function getUploadedFileSize(hash) {
-  const url = `${hosts.API_HOST}/s3?name=${hash}`;
-  const token = await db.user.tokenManager.getAccessToken();
+  try {
+    const url = `${hosts.API_HOST}/s3?name=${hash}`;
+    const token = await db.user.tokenManager.getAccessToken();
 
-  const attachmentInfo = await fetch(url, {
-    method: "HEAD",
-    headers: { Authorization: `Bearer ${token}` }
-  });
+    const attachmentInfo = await fetch(url, {
+      method: "HEAD",
+      headers: { Authorization: `Bearer ${token}` }
+    });
 
-  const contentLength = parseInt(attachmentInfo.headers?.get("content-length"));
-  return isNaN(contentLength) ? 0 : contentLength;
+    const contentLength = parseInt(
+      attachmentInfo.headers?.get("content-length")
+    );
+    return isNaN(contentLength) ? 0 : contentLength;
+  } catch (e) {
+    return 0;
+  }
 }
 
 export async function checkAttachment(hash) {

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

@@ -20,31 +20,28 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Platform } from "react-native";
 import Sodium from "@ammarahmed/react-native-sodium";
 import RNFetchBlob from "react-native-blob-util";
-import { cacheDir, getRandomId } from "./utils";
+import { cacheDir, cacheDirOld, getRandomId } from "./utils";
 import { db } from "../database";
 import { compressToBase64 } from "./compress";
 import { IOS_APPGROUPID } from "../../utils/constants";
 
 export async function readEncrypted(filename, key, cipherData) {
+  await migrateFilesFromCache();
+  console.log("Read encrypted file...");
   let path = `${cacheDir}/${filename}`;
+
   try {
-    const iosAppGroup =
-      Platform.OS === "ios"
-        ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
-        : null;
-
-    const appGroupPath = `${iosAppGroup}/${filename}`;
-    let exists =
-      (await RNFetchBlob.fs.exists(path)) ||
-      (Platform.OS === "ios" && (await RNFetchBlob.fs.exists(appGroupPath)));
-
-    if (!exists) {
+    if (!(await exists(filename))) {
       return false;
     }
 
     const attachment = db.attachments.attachment(filename);
-    const isPng = /(png)/g.test(attachment?.metadata.type);
-    const isJpeg = /(jpeg|jpg)/g.test(attachment?.metadata.type);
+    const isPng = !attachment.metadata.type
+      ? false
+      : /(png)/g.test(attachment?.metadata.type);
+    const isJpeg = !attachment.metadata.type
+      ? false
+      : /(jpeg|jpg)/g.test(attachment?.metadata.type);
 
     let output = await Sodium.decryptFile(
       key,
@@ -59,6 +56,7 @@ export async function readEncrypted(filename, key, cipherData) {
           : "base64"
         : "text"
     );
+    console.log("file decrypted...");
     if (cipherData.outputType === "base64" && (isPng || isJpeg)) {
       const dCachePath = `${cacheDir}/${output}`;
       output = await compressToBase64(
@@ -70,7 +68,7 @@ export async function readEncrypted(filename, key, cipherData) {
     return output;
   } catch (e) {
     RNFetchBlob.fs.unlink(path).catch(console.log);
-    console.log(e);
+    console.log("readEncrypted", e);
     return false;
   }
 }
@@ -88,6 +86,7 @@ export async function hashBase64(data) {
 }
 
 export async function writeEncryptedBase64({ data, key }) {
+  await createCacheDir();
   let filepath = cacheDir + `/${getRandomId("imagecache_")}`;
   await RNFetchBlob.fs.writeFile(filepath, data, "base64");
   let output = await Sodium.encryptFile(key, {
@@ -103,6 +102,7 @@ export async function writeEncryptedBase64({ data, key }) {
 }
 
 export async function deleteFile(filename, data) {
+  await createCacheDir();
   let delFilePath = cacheDir + `/${filename}`;
   if (!data) {
     if (!filename) return;
@@ -128,19 +128,89 @@ export async function deleteFile(filename, data) {
 export async function clearFileStorage() {
   try {
     let files = await RNFetchBlob.fs.ls(cacheDir);
+    let oldCache = await RNFetchBlob.fs.ls(cacheDirOld);
+
     for (let file of files) {
-      try {
-        await RNFetchBlob.fs.unlink(cacheDir + `/${file}`);
-      } catch (e) {
-        console.log(e);
-      }
+      await RNFetchBlob.fs.unlink(cacheDir + `/${file}`).catch(console.log);
+    }
+    for (let file of oldCache) {
+      await RNFetchBlob.fs.unlink(cacheDirOld + `/${file}`).catch(console.log);
     }
   } catch (e) {
-    console.log(e);
+    console.log("clearFileStorage", e);
   }
 }
 
+export async function createCacheDir() {
+  if (!(await RNFetchBlob.fs.exists(cacheDir))) {
+    await RNFetchBlob.fs.mkdir(cacheDir);
+    console.log("Cache directory created");
+  }
+}
+
+export async function migrateFilesFromCache() {
+  try {
+    await createCacheDir();
+    const migratedFilesPath = cacheDir + "/.migrated_1";
+    const migrated = await RNFetchBlob.fs.exists(migratedFilesPath);
+    if (migrated) {
+      console.log("Files migrated already");
+      return;
+    }
+
+    let files = await RNFetchBlob.fs.ls(cacheDir);
+    console.log("Files to migrate:", files.join(","));
+
+    let oldCache = await RNFetchBlob.fs.ls(cacheDirOld);
+    for (let file of oldCache) {
+      if (file.startsWith("org.") || file.startsWith("com.")) continue;
+      RNFetchBlob.fs
+        .mv(cacheDirOld + `/${file}`, cacheDir + `/${file}`)
+        .catch(console.log);
+      console.log("Moved", file);
+    }
+    await RNFetchBlob.fs.createFile(migratedFilesPath, "1", "utf8");
+  } catch (e) {
+    console.log("migrateFilesFromCache", e);
+  }
+}
+
+const ABYTES = 17;
 export async function exists(filename) {
-  let exists = await RNFetchBlob.fs.exists(`${cacheDir}/${filename}`);
+  let path = `${cacheDir}/${filename}`;
+
+  const iosAppGroup =
+    Platform.OS === "ios"
+      ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+      : null;
+  const appGroupPath = `${iosAppGroup}/${filename}`;
+
+  let exists = await RNFetchBlob.fs.exists(path);
+
+  // Check if file is present in app group path.
+  let existsInAppGroup = false;
+  if (!exists && Platform.OS === "ios") {
+    existsInAppGroup = await RNFetchBlob.fs.exists(appGroupPath);
+  }
+
+  if (exists || existsInAppGroup) {
+    const attachment = db.attachments.attachment(filename);
+    const totalChunks = Math.ceil(attachment.length / attachment.chunkSize);
+    const totalAbytes = totalChunks * ABYTES;
+    const expectedFileSize = attachment.length + totalAbytes;
+
+    const stat = await RNFetchBlob.fs.stat(
+      existsInAppGroup ? appGroupPath : path
+    );
+
+    if (stat.size !== expectedFileSize) {
+      RNFetchBlob.fs
+        .unlink(existsInAppGroup ? appGroupPath : path)
+        .catch(console.log);
+      return false;
+    }
+
+    exists = true;
+  }
   return exists;
 }

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

@@ -19,17 +19,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import RNFetchBlob from "react-native-blob-util";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { db } from "../database";
+import { DatabaseLogger, db } from "../database";
 import { cacheDir } from "./utils";
-import { isImage, isDocument } from "@notesnook/core/utils/filename";
+import { isImage, isDocument } from "@notesnook/core/dist/utils/filename";
 import { Platform } from "react-native";
 import { IOS_APPGROUPID } from "../../utils/constants";
+import { createCacheDir } from "./io";
 
 export async function uploadFile(filename, data, cancelToken) {
   if (!data) return false;
   let { url, headers } = data;
+  await createCacheDir();
+  DatabaseLogger.info(`Preparing to upload file: ${filename}`);
 
-  console.log("uploading file: ", filename, headers);
   try {
     let res = await fetch(url, {
       method: "PUT",
@@ -37,7 +39,7 @@ export async function uploadFile(filename, data, cancelToken) {
     });
     if (!res.ok) throw new Error(`${res.status}: Unable to resolve upload url`);
     const uploadUrl = await res.text();
-    if (!uploadUrl) throw new Error("Unable to resolve upload url");
+    if (!uploadUrl) throw new Error("Unable to resolve attachment upload url");
     let uploadFilePath = `${cacheDir}/${filename}`;
 
     const iosAppGroup =
@@ -49,6 +51,8 @@ export async function uploadFile(filename, data, cancelToken) {
     if (!exists && Platform.OS === "ios") {
       uploadFilePath = appGroupPath;
     }
+    DatabaseLogger.info(`Starting upload: ${filename}`);
+
     let request = RNFetchBlob.config({
       IOSBackgroundTask: !globalThis["IS_SHARE_EXTENSION"]
     })
@@ -64,9 +68,15 @@ export async function uploadFile(filename, data, cancelToken) {
         useAttachmentStore
           .getState()
           .setProgress(sent, total, filename, 0, "upload");
-        console.log("uploading: ", sent, total);
+        DatabaseLogger.info(
+          `File upload progress: ${filename}, ${sent}/${total}`
+        );
       });
-    cancelToken.cancel = request.cancel;
+
+    cancelToken.cancel = () => {
+      useAttachmentStore.getState().remove(filename);
+      request.cancel();
+    };
     let response = await request;
 
     let status = response.info().status;
@@ -74,6 +84,9 @@ export async function uploadFile(filename, data, cancelToken) {
     let result = status >= 200 && status < 300 && text.length === 0;
     useAttachmentStore.getState().remove(filename);
     if (result) {
+      DatabaseLogger.info(
+        `File upload status: ${filename}, ${status}, ${text}`
+      );
       let attachment = db.attachments.attachment(filename);
       if (!attachment) return result;
       if (
@@ -82,12 +95,20 @@ export async function uploadFile(filename, data, cancelToken) {
       ) {
         RNFetchBlob.fs.unlink(`${cacheDir}/${filename}`).catch(console.log);
       }
+    } else {
+      const fileInfo = await RNFetchBlob.fs.stat(uploadFilePath);
+      throw new Error(
+        `${status}, ${text}, name: ${fileInfo.filename}, length: ${
+          fileInfo.size
+        }, info: ${JSON.stringify(response.info())}`
+      );
     }
 
     return result;
   } catch (e) {
     useAttachmentStore.getState().remove(filename);
-    console.log("upload file: ", e, url, headers);
+    DatabaseLogger.info(`File upload error: ${filename}, ${e}`);
+    DatabaseLogger.error(e);
     return false;
   }
 }

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

@@ -21,7 +21,12 @@ import * as ScopedStorage from "react-native-scoped-storage";
 import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 
-export const cacheDir = RNFetchBlob.fs.dirs.CacheDir;
+export const cacheDirOld = RNFetchBlob.fs.dirs.CacheDir;
+
+export const cacheDir =
+  Platform.OS == "ios"
+    ? RNFetchBlob.fs.dirs.LibraryDir + "/.cache"
+    : RNFetchBlob.fs.dirs.DocumentDir + "/.cache";
 
 export function getRandomId(prefix) {
   return Math.random()
@@ -66,9 +71,12 @@ export function cancelable(operation) {
 }
 
 export function copyFileAsync(source, dest) {
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
     ScopedStorage.copyFile(source, dest, (e, r) => {
-      console.log(e, r);
+      if (e) {
+        reject(e);
+        return;
+      }
       resolve();
     });
   });

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

@@ -21,18 +21,18 @@ import React from "react";
 import { FlatList, View } from "react-native";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { useMessageStore } from "../../stores/use-message-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { allowedOnPlatform, renderItem } from "./functions";
 
 export const Announcement = ({ color }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const announcements = useMessageStore((state) => state.announcements);
   let announcement = announcements.length > 0 ? announcements[0] : null;
   const selectionMode = useSelectionStore((state) => state.selectionMode);
   return !announcement || selectionMode ? null : (
     <View
       style={{
-        backgroundColor: colors.bg,
+        backgroundColor: colors.primary.background,
         width: "100%",
         paddingHorizontal: 12,
         paddingTop: 12,
@@ -44,28 +44,26 @@ export const Announcement = ({ color }) => {
           width: "100%",
           borderRadius: 10,
           overflow: "hidden",
-          backgroundColor: colors.nav,
+          backgroundColor: colors.secondary.background,
           paddingBottom: 12
         }}
       >
-        <View>
-          <FlatList
-            style={{
-              width: "100%",
-              marginTop: 12
-            }}
-            data={announcement?.body.filter((item) =>
-              allowedOnPlatform(item.platforms)
-            )}
-            renderItem={({ item, index }) =>
+        <View
+          style={{
+            width: "100%",
+            marginTop: 12
+          }}
+        >
+          {announcement?.body
+            .filter((item) => allowedOnPlatform(item.platforms))
+            .map((item, index) =>
               renderItem({
                 item: item,
                 index: index,
                 color: colors[color],
                 inline: true
               })
-            }
-          />
+            )}
         </View>
       </View>
     </View>

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

@@ -22,7 +22,7 @@ import { Linking, View } from "react-native";
 //import SettingsBackupAndRestore from '../../screens/settings/backup-restore';
 import { eSendEvent, presentSheet } from "../../services/event-manager";
 import Sync from "../../services/sync";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { eCloseAnnouncementDialog, eCloseSheet } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
@@ -33,7 +33,7 @@ import { Button } from "../ui/button";
 import { allowedOnPlatform, getStyle } from "./functions";
 
 export const Cta = ({ actions, style = {}, color, inline }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   let buttons =
     actions.filter((item) => allowedOnPlatform(item.platforms)) || [];
 
@@ -92,8 +92,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 style={{
                   height: 30,
                   alignSelf: "flex-start",
-                  paddingHorizontal: 0,
-                  marginTop: -6
+                  paddingHorizontal: 0
                 }}
               />
             ))}
@@ -111,7 +110,6 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 style={{
                   alignSelf: "flex-start",
                   paddingHorizontal: 0,
-                  marginTop: -6,
                   marginLeft: 12
                 }}
                 textStyle={{
@@ -129,9 +127,11 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 title={item.title}
                 fontSize={SIZE.md}
                 buttonType={{
-                  color: color ? color : colors.accent,
-                  text: colors.light,
-                  selected: color ? color : colors.accent,
+                  color: color ? color : colors.primary.accent,
+                  text: color
+                    ? colors.static.white
+                    : colors.primary.accentForeground,
+                  selected: color ? color : colors.primary.accent,
                   opacity: 1
                 }}
                 onPress={() => onPress(item)}

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

@@ -25,7 +25,7 @@ import {
   eUnSubscribeEvent
 } from "../../services/event-manager";
 import { useMessageStore } from "../../stores/use-message-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import {
   eCloseAnnouncementDialog,
   eOpenAnnouncementDialog
@@ -34,10 +34,69 @@ import BaseDialog from "../dialog/base-dialog";
 import { allowedOnPlatform, renderItem } from "./functions";
 import { useCallback } from "react";
 
+/**
+ * Test announcement
+ * {
+    id: "some-announcement",
+    type: "dialog",
+    body: [
+      {
+        type: "title",
+        text: "This is a title",
+        platforms: ["all"]
+      },
+      {
+        type: "description",
+        text: "Most of you are too busy to keep up to date with what's happening in Notesnook. That is unfortunate because Notesnook has come a looooong way.",
+        style: {
+          marginBottom: 1
+        },
+        platforms: ["all"]
+      },
+      {
+        type: "description",
+        text: "To solve this, we are launching the Notesnook Digest — a newsletter to help you stay updated about Notesnook development. And to keep things interesting I'll also sprinkle this newsletter with other interesting stuff like privacy tips & news, interesting books, things I am looking forward to etc.",
+        style: {
+          marginBottom: 1
+        },
+        platforms: ["all"]
+      },
+      {
+        type: "description",
+        text: "So be sure to subscribe. There won't be a proper schedule to this (yet) maybe once or twice a month. I promise no spam — only more awesomeness.",
+        style: {
+          marginBottom: 1
+        },
+        platforms: ["all"]
+      },
+      {
+        type: "description",
+        text: "— May privacy reign.",
+        style: {
+          marginBottom: 1
+        },
+        platforms: ["all"]
+      },
+      {
+        type: "callToActions",
+        actions: [
+          {
+            type: "promo",
+            title: "15% Off",
+            platforms: ["android"],
+            data: "com.streetwriters.notesnook.sub.yr.15"
+          }
+        ],
+        platforms: ["all"]
+      }
+    ]
+  }
+ */
+
 export const AnnouncementDialog = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
-  const [info, setInfo] = useState(null);
+  const [info, setInfo] = useState();
   const remove = useMessageStore((state) => state.remove);
 
   useEffect(() => {
@@ -51,7 +110,9 @@ export const AnnouncementDialog = () => {
 
   const open = (data) => {
     setInfo(data);
-    setVisible(true);
+    setImmediate(() => {
+      setVisible(true);
+    });
   };
 
   const close = useCallback(() => {
@@ -73,7 +134,7 @@ export const AnnouncementDialog = () => {
       <View
         style={{
           width: DDS.isTab ? 600 : "100%",
-          backgroundColor: colors.bg,
+          backgroundColor: colors.primary.background,
           maxHeight: DDS.isTab ? "90%" : "100%",
           borderRadius: DDS.isTab ? 10 : 0,
           overflow: "hidden",

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

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

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

@@ -33,8 +33,7 @@ import {
 } from "../../services/event-manager";
 import PremiumService from "../../services/premium";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { formatBytes } from "../../utils";
+import { useThemeColors } from "@notesnook/theme";
 import { eCloseAttachmentDialog, eCloseSheet } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
@@ -47,9 +46,10 @@ import { Notice } from "../ui/notice";
 import { PressableButton } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { formatBytes } from "@notesnook/common";
 
-const Actions = ({ attachment, setAttachments, fwdRef }) => {
-  const colors = useThemeStore((state) => state.colors);
+const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
+  const { colors } = useThemeColors();
   const contextId = attachment.metadata.hash;
   const [filename, setFilename] = useState(attachment.metadata.filename);
   const [currentProgress] = useAttachmentProgress(attachment);
@@ -64,7 +64,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
       name: "Download",
       onPress: async () => {
         if (currentProgress) {
-          await db.fs.cancel(attachment.metadata.hash, "download");
+          await db.fs.cancel(attachment.metadata.hash);
           useAttachmentStore.getState().remove(attachment.metadata.hash);
         }
         downloadAttachment(attachment.metadata.hash, false);
@@ -117,7 +117,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
           });
         }
 
-        setAttachments([...db.attachments.all]);
+        setAttachments();
         setLoading({
           name: null
         });
@@ -140,7 +140,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
                 filename: value
               });
               setFilename(value);
-              setAttachments([...db.attachments.all]);
+              setAttachments();
             }
           },
           positiveText: "Rename"
@@ -152,8 +152,8 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
       name: "Delete",
       onPress: async () => {
         await db.attachments.remove(attachment.metadata.hash, false);
-        setAttachments([...db.attachments.all]);
-        eSendEvent(eCloseSheet, contextId);
+        setAttachments();
+        close();
       },
       icon: "delete-outline"
     }
@@ -194,7 +194,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
       <View
         style={{
           borderBottomWidth: 1,
-          borderBottomColor: colors.nav,
+          borderBottomColor: colors.secondary.background,
           marginBottom: notes && notes.length > 0 ? 0 : 12
         }}
       >
@@ -219,7 +219,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
             style={{
               marginRight: 10
             }}
-            color={colors.icon}
+            color={colors.secondary.paragraph}
           >
             {attachment.metadata.type}
           </Paragraph>
@@ -228,7 +228,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
               marginRight: 10
             }}
             size={SIZE.xs}
-            color={colors.icon}
+            color={colors.secondary.paragraph}
           >
             {formatBytes(attachment.length)}
           </Paragraph>
@@ -239,7 +239,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
                 marginRight: 10
               }}
               size={SIZE.xs}
-              color={colors.icon}
+              color={colors.secondary.paragraph}
             >
               {attachment.noteIds.length} note
               {attachment.noteIds.length > 1 ? "s" : ""}
@@ -255,7 +255,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
               });
             }}
             size={SIZE.xs}
-            color={colors.icon}
+            color={colors.secondary.paragraph}
           >
             {attachment.metadata.hash}
           </Paragraph>
@@ -268,7 +268,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
         <View
           style={{
             borderBottomWidth: 1,
-            borderBottomColor: colors.nav,
+            borderBottomColor: colors.secondary.background,
             marginBottom: 12,
             paddingVertical: 12
           }}
@@ -322,10 +322,10 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
           key={item.name}
           buttonType={{
             text: item.on
-              ? colors.accent
+              ? colors.primary.accent
               : item.name === "Delete" || item.name === "PermDelete"
-              ? colors.errorText
-              : colors.pri
+              ? colors.error.paragraph
+              : colors.primary.paragraph
           }}
           onPress={item.onPress}
           title={item.name}
@@ -362,8 +362,13 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
 Actions.present = (attachment, set, context) => {
   presentSheet({
     context: context,
-    component: (ref) => (
-      <Actions fwdRef={ref} setAttachments={set} attachment={attachment} />
+    component: (ref, close) => (
+      <Actions
+        fwdRef={ref}
+        setAttachments={set}
+        close={close}
+        attachment={attachment}
+      />
     )
   });
 };

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

@@ -17,15 +17,14 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { formatBytes } from "@notesnook/common";
 import React from "react";
 import { TouchableOpacity, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { formatBytes } from "../../utils";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
-import SheetProvider from "../sheet-provider";
 import { IconButton } from "../ui/icon-button";
 import { ProgressCircleComponent } from "../ui/svg/lazy";
 import Paragraph from "../ui/typography/paragraph";
@@ -41,17 +40,17 @@ export const AttachmentItem = ({
   encryption,
   setAttachments,
   pressable = true,
-  hideWhenNotDownloading
+  hideWhenNotDownloading,
+  context
 }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [currentProgress, setCurrentProgress] = useAttachmentProgress(
     attachment,
     encryption
   );
-
   const onPress = () => {
     if (!pressable) return;
-    Actions.present(attachment, setAttachments, attachment.metadata.hash);
+    Actions.present(attachment, setAttachments, context);
   };
 
   return hideWhenNotDownloading &&
@@ -66,11 +65,10 @@ export const AttachmentItem = ({
         padding: 12,
         paddingVertical: 6,
         borderRadius: 5,
-        backgroundColor: colors.nav
+        backgroundColor: colors.secondary.background
       }}
       type="grayBg"
     >
-      <SheetProvider context={attachment.metadata.hash} />
       <View
         style={{
           flexShrink: 1,
@@ -85,12 +83,12 @@ export const AttachmentItem = ({
             marginLeft: -5
           }}
         >
-          <Icon name="file" size={SIZE.xxxl} color={colors.icon} />
+          <Icon name="file" size={SIZE.xxxl} color={colors.primary.icon} />
 
           <Paragraph
             adjustsFontSizeToFit
             size={6}
-            color={colors.light}
+            color={colors.static.white}
             style={{
               position: "absolute"
             }}
@@ -113,13 +111,13 @@ export const AttachmentItem = ({
             }}
             numberOfLines={1}
             lineBreakMode="middle"
-            color={colors.pri}
+            color={colors.primary.paragraph}
           >
             {attachment.metadata.filename}
           </Paragraph>
 
           {!hideWhenNotDownloading ? (
-            <Paragraph color={colors.icon} size={SIZE.xs}>
+            <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
               {formatBytes(attachment.length)}{" "}
               {currentProgress?.type
                 ? "(" + currentProgress.type + "ing - tap to cancel)"
@@ -151,7 +149,7 @@ export const AttachmentItem = ({
             textStyle={{
               fontSize: 10
             }}
-            color={colors.accent}
+            color={colors.primary.accent}
             formatText={(progress) => (progress * 100).toFixed(0)}
             borderWidth={0}
             thickness={2}
@@ -163,7 +161,7 @@ export const AttachmentItem = ({
             <IconButton
               onPress={onPress}
               name="alert-circle-outline"
-              color={colors.errorText}
+              color={colors.error.paragraph}
             />
           ) : null}
         </>

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

@@ -26,12 +26,12 @@ import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { ProgressBarComponent } from "../ui/svg/lazy";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { FlatList } from "react-native-actions-sheet";
 import { AttachmentItem } from "./attachment-item";
 
 const DownloadAttachments = ({ close, attachments, isNote, update }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [downloading, setDownloading] = useState(false);
   const [progress, setProgress] = useState({
     value: 0,
@@ -158,8 +158,8 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
             animated={true}
             useNativeDriver
             progress={progress.value ? progress.value / attachments.length : 0}
-            unfilledColor={colors.nav}
-            color={colors.accent}
+            unfilledColor={colors.secondary.background}
+            color={colors.primary.accent}
             borderWidth={0}
           />
         </View>
@@ -170,7 +170,7 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
           maxHeight: 300,
           width: "100%",
           minHeight: 60,
-          backgroundColor: colors.nav,
+          backgroundColor: colors.secondary.background,
           borderRadius: 5,
           marginVertical: 12
         }}
@@ -184,7 +184,9 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
               height: 60
             }}
           >
-            <Paragraph color={colors.icon}>No downloads in progress.</Paragraph>
+            <Paragraph color={colors.secondary.paragraph}>
+              No downloads in progress.
+            </Paragraph>
           </View>
         }
         keyExtractor={(item) => item.id}

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

@@ -19,12 +19,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useRef, useState } from "react";
 import { ActivityIndicator, ScrollView, View } from "react-native";
-import { FlatList } from "react-native-actions-sheet";
+
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import filesystem from "../../common/filesystem";
 import { presentSheet } from "../../services/event-manager";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import SheetProvider from "../sheet-provider";
 import { IconButton } from "../ui/icon-button";
@@ -40,14 +40,16 @@ import {
   isDocument,
   isImage,
   isVideo
-} from "@notesnook/core/utils/filename";
+} from "@notesnook/core/dist/utils/filename";
+import { useSettingStore } from "../../stores/use-setting-store";
+import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
 
 export const AttachmentDialog = ({ note }) => {
-  const colors = useThemeStore((state) => state.colors);
-
+  const { colors } = useThemeColors();
+  const { height } = useSettingStore((state) => state.dimensions);
   const [attachments, setAttachments] = useState(
     note
-      ? db.attachments.ofNote(note.id, "all")
+      ? db.attachments.ofNote(note?.id, "all")
       : [...(db.attachments.all || [])]
   );
 
@@ -57,8 +59,8 @@ export const AttachmentDialog = ({ note }) => {
   const [currentFilter, setCurrentFilter] = useState("all");
 
   const onChangeText = (text) => {
-    const attachments = note
-      ? db.attachments.ofNote(note.id, "all")
+    const attachments = note?.id
+      ? db.attachments.ofNote(note?.id, "all")
       : [...(db.attachments.all || [])];
 
     attachmentSearchValue.current = text;
@@ -66,7 +68,7 @@ export const AttachmentDialog = ({ note }) => {
       !attachmentSearchValue.current ||
       attachmentSearchValue.current === ""
     ) {
-      setAttachments([...attachments]);
+      setAttachments(filterAttachments(currentFilter));
     }
     clearTimeout(searchTimer.current);
     searchTimer.current = setTimeout(() => {
@@ -75,12 +77,19 @@ export const AttachmentDialog = ({ note }) => {
         attachmentSearchValue.current
       );
       if (results.length === 0) return;
-      setAttachments(results);
+
+      setAttachments(filterAttachments(currentFilter, results));
     }, 300);
   };
 
   const renderItem = ({ item }) => (
-    <AttachmentItem setAttachments={setAttachments} attachment={item} />
+    <AttachmentItem
+      setAttachments={() => {
+        setAttachments(filterAttachments(currentFilter));
+      }}
+      attachment={item}
+      context="attachments-list"
+    />
   );
 
   const onCheck = async () => {
@@ -127,11 +136,13 @@ export const AttachmentDialog = ({ note }) => {
     }
   ];
 
-  const filterAttachments = (type) => {
-    const attachments = note
-      ? db.attachments.ofNote(note.id, "all")
+  const filterAttachments = (type, _attachments) => {
+    const attachments = _attachments
+      ? _attachments
+      : note
+      ? db.attachments.ofNote(note?.id, "all")
       : [...(db.attachments.all || [])];
-    isDocument;
+
     switch (type) {
       case "all":
         return attachments;
@@ -159,7 +170,8 @@ export const AttachmentDialog = ({ note }) => {
       style={{
         width: "100%",
         alignSelf: "center",
-        paddingHorizontal: 12
+        paddingHorizontal: 12,
+        height: height * 0.85
       }}
     >
       <SheetProvider context="attachments-list" />
@@ -194,7 +206,7 @@ export const AttachmentDialog = ({ note }) => {
                 width: 40,
                 marginRight: 10
               }}
-              color={colors.pri}
+              color={colors.primary.paragraph}
               size={SIZE.lg}
               onPress={onCheck}
             />
@@ -206,7 +218,7 @@ export const AttachmentDialog = ({ note }) => {
               height: 40,
               width: 40
             }}
-            color={colors.pri}
+            color={colors.primary.paragraph}
             onPress={() => {
               DownloadAttachments.present(
                 "attachments-list",
@@ -228,51 +240,48 @@ export const AttachmentDialog = ({ note }) => {
         }}
       />
 
-      <FlatList
+      <View>
+        <ScrollView
+          style={{
+            width: "100%",
+            height: 50,
+            flexDirection: "row",
+            backgroundColor: colors.primary.background
+          }}
+          contentContainerStyle={{
+            minWidth: "100%",
+            height: 50
+          }}
+          horizontal
+        >
+          {attachmentTypes.map((item) => (
+            <Button
+              type={currentFilter === item.filterBy ? "grayAccent" : "gray"}
+              key={item.title}
+              title={
+                item.title +
+                ` (${filterAttachments(item.filterBy)?.length || 0})`
+              }
+              style={{
+                borderRadius: 0,
+                borderBottomWidth: 1,
+                flexGrow: 1,
+                borderBottomColor:
+                  currentFilter !== item.filterBy
+                    ? "transparent"
+                    : colors.primary.accent
+              }}
+              onPress={() => {
+                setCurrentFilter(item.filterBy);
+                setAttachments(filterAttachments(item.filterBy));
+              }}
+            />
+          ))}
+        </ScrollView>
+      </View>
+      <FlashList
         keyboardDismissMode="none"
         keyboardShouldPersistTaps="always"
-        maxToRenderPerBatch={10}
-        initialNumToRender={10}
-        windowSize={5}
-        stickyHeaderIndices={[0]}
-        ListHeaderComponent={
-          <ScrollView
-            style={{
-              width: "100%",
-              height: 50,
-              flexDirection: "row",
-              backgroundColor: colors.bg
-            }}
-            contentContainerStyle={{
-              minWidth: "100%"
-            }}
-            horizontal
-          >
-            {attachmentTypes.map((item) => (
-              <Button
-                type={currentFilter === item.filterBy ? "grayAccent" : "gray"}
-                key={item.title}
-                title={
-                  item.title +
-                  ` (${filterAttachments(item.filterBy)?.length || 0})`
-                }
-                style={{
-                  borderRadius: 0,
-                  borderBottomWidth: 1,
-                  flexGrow: 1,
-                  borderBottomColor:
-                    currentFilter !== item.filterBy
-                      ? "transparent"
-                      : colors.accent
-                }}
-                onPress={() => {
-                  setCurrentFilter(item.filterBy);
-                  setAttachments(filterAttachments(item.filterBy));
-                }}
-              />
-            ))}
-          </ScrollView>
-        }
         ListEmptyComponent={
           <View
             style={{
@@ -281,7 +290,7 @@ export const AttachmentDialog = ({ note }) => {
               alignItems: "center"
             }}
           >
-            <Icon name="attachment" size={60} color={colors.icon} />
+            <Icon name="attachment" size={60} color={colors.secondary.icon} />
             <Paragraph>
               {note ? "No attachments on this note" : "No attachments"}
             </Paragraph>
@@ -294,20 +303,24 @@ export const AttachmentDialog = ({ note }) => {
             }}
           />
         }
+        estimatedItemSize={50}
         data={attachments}
-        keyExtractor={(item) => item.id}
         renderItem={renderItem}
       />
 
       <Paragraph
-        color={colors.icon}
+        color={colors.secondary.paragraph}
         size={SIZE.xs}
         style={{
           textAlign: "center",
           marginTop: 10
         }}
       >
-        <Icon name="shield-key-outline" size={SIZE.xs} color={colors.icon} />
+        <Icon
+          name="shield-key-outline"
+          size={SIZE.xs}
+          color={colors.primary.icon}
+        />
         {"  "}All attachments are end-to-end encrypted.
       </Paragraph>
     </View>

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

@@ -17,14 +17,16 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useRef, useState } from "react";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useUserStore } from "../../stores/use-user-store";
 import { eCloseLoginDialog, eOpenLoginDialog } from "../../utils/events";
 import { sleep } from "../../utils/time";
 import BaseDialog from "../dialog/base-dialog";
@@ -43,7 +45,7 @@ export const AuthMode = {
 };
 
 const AuthModal = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [currentAuthMode, setCurrentAuthMode] = useState(AuthMode.login);
   const actionSheetRef = useRef();
@@ -67,6 +69,9 @@ const AuthModal = () => {
   }
 
   const close = () => {
+    useUserStore.setState({
+      disableAppLockRequests: false
+    });
     actionSheetRef.current?.hide();
     setCurrentAuthMode(AuthMode.login);
     setVisible(false);
@@ -75,75 +80,97 @@ const AuthModal = () => {
   return !visible ? null : (
     <BaseDialog
       overlayOpacity={0}
-      statusBarTranslucent={true}
+      statusBarTranslucent={false}
+      onShow={() => {
+        useUserStore.setState({
+          disableAppLockRequests: true
+        });
+      }}
       onRequestClose={currentAuthMode !== AuthMode.welcomeSignup && close}
       visible={true}
       onClose={close}
       useSafeArea={false}
       bounce={false}
-      background={colors.bg}
+      background={colors.primary.background}
       transparent={false}
       animated={false}
-      avoidKeyboardResize
+      centered={false}
+      enableSheetKeyboardHandler
     >
-      {currentAuthMode !== AuthMode.login ? (
-        <Signup
-          changeMode={(mode) => setCurrentAuthMode(mode)}
-          trial={AuthMode.trialSignup === currentAuthMode}
-          welcome={initialAuthMode.current === AuthMode.welcomeSignup}
-        />
-      ) : (
-        <Login
-          welcome={initialAuthMode.current === AuthMode.welcomeSignup}
-          changeMode={(mode) => setCurrentAuthMode(mode)}
-        />
-      )}
+      <KeyboardAwareScrollView
+        style={{
+          width: "100%"
+        }}
+        enableAutomaticScroll={false}
+        keyboardShouldPersistTaps="handled"
+      >
+        {currentAuthMode !== AuthMode.login ? (
+          <Signup
+            changeMode={(mode) => setCurrentAuthMode(mode)}
+            trial={AuthMode.trialSignup === currentAuthMode}
+            welcome={initialAuthMode.current === AuthMode.welcomeSignup}
+          />
+        ) : (
+          <Login
+            welcome={initialAuthMode.current === AuthMode.welcomeSignup}
+            changeMode={(mode) => setCurrentAuthMode(mode)}
+          />
+        )}
+      </KeyboardAwareScrollView>
 
       <View
         style={{
           position: "absolute",
-          top: insets.top,
+          paddingTop: Platform.OS === "android" ? 0 : insets.top,
+          top: 0,
           zIndex: 999,
-          flexDirection: "row",
-          alignItems: "center",
-          paddingHorizontal: 12,
-          width: "100%",
-          height: 50,
-          justifyContent:
-            initialAuthMode.current !== AuthMode.welcomeSignup
-              ? "space-between"
-              : "flex-end"
+          backgroundColor: colors.secondary.background,
+          width: "100%"
         }}
       >
-        {initialAuthMode.current === AuthMode.welcomeSignup ? null : (
-          <IconButton
-            name="arrow-left"
-            onPress={() => {
-              hideAuth();
-            }}
-            color={colors.pri}
-          />
-        )}
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            paddingHorizontal: 12,
+            width: "100%",
+            height: 50,
+            justifyContent:
+              initialAuthMode.current !== AuthMode.welcomeSignup
+                ? "space-between"
+                : "flex-end"
+          }}
+        >
+          {initialAuthMode.current === AuthMode.welcomeSignup ? null : (
+            <IconButton
+              name="arrow-left"
+              onPress={() => {
+                hideAuth();
+              }}
+              color={colors.primary.paragraph}
+            />
+          )}
 
-        {initialAuthMode.current !== AuthMode.welcomeSignup ? null : (
-          <Button
-            title="Skip"
-            onPress={() => {
-              hideAuth();
-            }}
-            iconSize={16}
-            type="gray"
-            iconPosition="right"
-            icon="chevron-right"
-            height={25}
-            iconStyle={{
-              marginTop: 2
-            }}
-            style={{
-              paddingHorizontal: 6
-            }}
-          />
-        )}
+          {initialAuthMode.current !== AuthMode.welcomeSignup ? null : (
+            <Button
+              title="Skip"
+              onPress={() => {
+                hideAuth();
+              }}
+              iconSize={16}
+              type="gray"
+              iconPosition="right"
+              icon="chevron-right"
+              height={25}
+              iconStyle={{
+                marginTop: 2
+              }}
+              style={{
+                paddingHorizontal: 6
+              }}
+            />
+          )}
+        </View>
       </View>
 
       <Toast context="local" />

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

@@ -26,12 +26,15 @@ import {
   ToastEvent
 } from "../../services/event-manager";
 import { useUserStore } from "../../stores/use-user-store";
-import { eCloseSheet } from "../../utils/events";
+import { eCloseSheet, eOpenRecoveryKeyDialog } from "../../utils/events";
 import DialogHeader from "../dialog/dialog-header";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
 import { Notice } from "../ui/notice";
 import Seperator from "../ui/seperator";
+import { Dialog } from "../dialog";
+import BackupService from "../../services/backup";
+import { sleep } from "../../utils/time";
 
 export const ChangePassword = () => {
   const passwordInputRef = useRef();
@@ -64,6 +67,9 @@ export const ChangePassword = () => {
     }
     setLoading(true);
     try {
+      const result = await BackupService.run(false, "change-password-dialog");
+      if (!result) throw new Error("Failed to create backup");
+
       await db.user.clearSessions();
       await db.user.changePassword(oldPassword.current, password.current);
       ToastEvent.show({
@@ -73,6 +79,8 @@ export const ChangePassword = () => {
       });
       setLoading(false);
       eSendEvent(eCloseSheet);
+      await sleep(300);
+      eSendEvent(eOpenRecoveryKeyDialog);
     } catch (e) {
       setLoading(false);
       ToastEvent.show({
@@ -92,6 +100,7 @@ export const ChangePassword = () => {
         padding: 12
       }}
     >
+      <Dialog context="change-password-dialog" />
       <DialogHeader
         title="Change password"
         paragraph="Enter your old and new passwords"
@@ -129,7 +138,14 @@ export const ChangePassword = () => {
       />
 
       <Notice
-        text="Changing password is a non-undoable process. You will be logged out from all your devices. Please make sure you do not close the app while your password is changing and have good internet connection."
+        text={`Changing password is an irreversible process. You will be logged out from all your devices. Please make sure you do not close the app while your password is changing and have good internet connection.`}
+        type="alert"
+      />
+
+      <View style={{ height: 10 }} />
+
+      <Notice
+        text={`Once your password is changed, please make sure to save the new account recovery key.`}
         type="alert"
       />
 

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

@@ -24,7 +24,7 @@ import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { ToastEvent } from "../../services/event-manager";
 import SettingsService from "../../services/settings";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import DialogHeader from "../dialog/dialog-header";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
@@ -34,7 +34,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 
 export const ForgotPassword = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors("sheet");
   const email = useRef();
   const emailInputRef = useRef();
   const [error, setError] = useState(false);
@@ -117,7 +117,7 @@ export const ForgotPassword = () => {
                 width: null,
                 height: null
               }}
-              color={colors.accent}
+              color={colors.primary.accent}
               name="email"
               size={50}
             />
@@ -134,7 +134,7 @@ export const ForgotPassword = () => {
           <View
             style={{
               borderRadius: DDS.isTab ? 5 : 0,
-              backgroundColor: colors.bg,
+              backgroundColor: colors.primary.background,
               zIndex: 10,
               width: "100%",
               padding: 12

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

@@ -65,7 +65,7 @@ const Auth = ({ navigation, route }) => {
           onPress={() => {
             hideAuth();
           }}
-          color={colors.pri}
+          color={colors.primary.paragraph}
           customStyle={{
             position: 'absolute',
             zIndex: 999,

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

@@ -18,11 +18,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 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 { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import SheetProvider from "../sheet-provider";
@@ -35,6 +35,9 @@ import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
 import { useLogin } from "./use-login";
 import { useSettingStore } from "../../stores/use-setting-store";
+import { eUserLoggedIn } from "../../utils/events";
+import { useUserStore } from "../../stores/use-user-store";
+import Sync from "../../services/sync";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -43,7 +46,7 @@ const LoginSteps = {
 };
 
 export const Login = ({ changeMode }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [focused, setFocused] = useState(false);
   const {
     step,
@@ -58,12 +61,17 @@ export const Login = ({ changeMode }) => {
     login
   } = useLogin(async () => {
     hideAuth();
-    eSendEvent("userLoggedIn", true);
+    eSendEvent(eUserLoggedIn, true);
     await sleep(500);
     Progress.present();
+    setTimeout(() => {
+      if (!useUserStore.getState().syncing) {
+        Sync.run("global", false, true);
+      }
+    }, 5000);
   });
   const deviceMode = useSettingStore((state) => state.deviceMode);
-
+  const { width, height } = useWindowDimensions();
   useEffect(() => {
     async () => {
       setStep(LoginSteps.emailAuth);
@@ -84,29 +92,27 @@ export const Login = ({ changeMode }) => {
       <View
         style={{
           borderRadius: DDS.isTab ? 5 : 0,
-          backgroundColor: colors.bg,
+          backgroundColor: colors.primary.background,
           zIndex: 10,
           width: "100%",
-          alignSelf: "center",
-          height: "100%",
-          minHeight: "100%"
+          alignSelf: "center"
         }}
       >
         <View
           style={{
-            flexGrow: 0.8,
             justifyContent: "flex-end",
             paddingHorizontal: 20,
-            backgroundColor: colors.nav,
+            backgroundColor: colors.secondary.background,
             borderBottomWidth: 1,
             marginBottom: 12,
-            borderBottomColor: colors.border,
+            borderBottomColor: colors.primary.border,
             alignSelf: deviceMode !== "mobile" ? "center" : undefined,
             borderWidth: deviceMode !== "mobile" ? 1 : null,
-            borderColor: deviceMode !== "mobile" ? colors.border : null,
+            borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
             borderRadius: deviceMode !== "mobile" ? 20 : null,
             marginTop: deviceMode !== "mobile" ? 50 : null,
-            width: deviceMode === "mobile" ? null : "50%"
+            width: deviceMode === "mobile" ? null : "50%",
+            minHeight: height * 0.4
           }}
         >
           <View
@@ -118,7 +124,7 @@ export const Login = ({ changeMode }) => {
               style={{
                 width: 100,
                 height: 5,
-                backgroundColor: colors.accent,
+                backgroundColor: colors.primary.accent,
                 borderRadius: 2,
                 marginRight: 7
               }}
@@ -128,7 +134,7 @@ export const Login = ({ changeMode }) => {
               style={{
                 width: 20,
                 height: 5,
-                backgroundColor: colors.nav,
+                backgroundColor: colors.secondary.background,
                 borderRadius: 2
               }}
             />
@@ -154,10 +160,9 @@ export const Login = ({ changeMode }) => {
               : focused
               ? "100%"
               : "99.9%",
-            backgroundColor: colors.bg,
+            backgroundColor: colors.primary.background,
             alignSelf: "center",
-            paddingHorizontal: 20,
-            flexGrow: 1
+            paddingHorizontal: 20
           }}
         >
           <Input
@@ -276,11 +281,14 @@ export const Login = ({ changeMode }) => {
                   paddingVertical: 12
                 }}
               >
-                <Paragraph size={SIZE.xs + 1} color={colors.icon}>
+                <Paragraph
+                  size={SIZE.xs + 1}
+                  color={colors.secondary.paragraph}
+                >
                   Don't have an account?{" "}
                   <Paragraph
                     size={SIZE.xs + 1}
-                    style={{ color: colors.accent }}
+                    style={{ color: colors.primary.accent }}
                   >
                     Sign up
                   </Paragraph>

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

@@ -17,22 +17,27 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
-import { Modal, View } from "react-native";
+import { View } from "react-native";
 import { db } from "../../common/database";
+import { MMKV } from "../../common/database/mmkv";
 import BiometricService from "../../services/biometrics";
 import {
+  ToastEvent,
   eSendEvent,
-  eSubscribeEvent,
-  eUnSubscribeEvent,
-  ToastEvent
+  eSubscribeEvent
 } from "../../services/event-manager";
+import { setLoginMessage } from "../../services/message";
 import SettingsService from "../../services/settings";
 import Sync from "../../services/sync";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { clearAllStores } from "../../stores";
+import { useUserStore } from "../../stores/use-user-store";
+import { eLoginSessionExpired, eUserLoggedIn } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
+import BaseDialog from "../dialog/base-dialog";
 import { presentDialog } from "../dialog/functions";
 import SheetProvider from "../sheet-provider";
 import { Toast } from "../toast";
@@ -56,24 +61,35 @@ function getObfuscatedEmail(email) {
 }
 
 export const SessionExpired = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [focused, setFocused] = useState(false);
   const { step, password, email, passwordInputRef, loading, login } = useLogin(
     () => {
-      eSendEvent("userLoggedIn", true);
+      eSendEvent(eUserLoggedIn, true);
       setVisible(false);
-    }
+      setFocused(false);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
+    },
+    true
   );
 
   const logout = async () => {
     try {
       await db.user.logout();
       await BiometricService.resetCredentials();
-      SettingsService.set({
-        introCompleted: true
-      });
+      setLoginMessage();
+      SettingsService.resetSettings();
+      useUserStore.getState().setUser(null);
+      useUserStore.getState().setSyncing(false);
+      MMKV.clearStore();
+      clearAllStores();
       setVisible(false);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
     } catch (e) {
       ToastEvent.show({
         heading: e.message,
@@ -84,10 +100,9 @@ export const SessionExpired = () => {
   };
 
   useEffect(() => {
-    eSubscribeEvent("session_expired", open);
+    const sub = eSubscribeEvent(eLoginSessionExpired, open);
     return () => {
-      eUnSubscribeEvent("session_expired", open);
-      setFocused(false);
+      sub.unsubscribe?.();
     };
   }, [visible, open]);
 
@@ -103,6 +118,7 @@ export const SessionExpired = () => {
           if (!user) return;
           email.current = user.email;
           setVisible(true);
+          setFocused(false);
           return;
         }
         SettingsService.set({
@@ -115,28 +131,40 @@ export const SessionExpired = () => {
       let user = await db.user.getUser();
       if (!user) return;
       email.current = user.email;
+      setFocused(false);
       setVisible(true);
+      useUserStore.setState({
+        disableAppLockRequests: true
+      });
     }
   }, [email]);
 
   return (
     visible && (
-      <Modal
+      <BaseDialog
+        transparent={false}
+        background={colors.primary.background}
+        bounce={false}
+        animated={false}
+        centered={false}
         onShow={async () => {
           await sleep(300);
           passwordInputRef.current?.focus();
           setFocused(true);
+          useUserStore.setState({
+            disableAppLockRequests: true
+          });
         }}
+        enableSheetKeyboardHandler={true}
         visible={true}
       >
-        <SheetProvider context="two_factor_verify" />
         <View
           style={{
             width: focused ? "100%" : "99.9%",
             padding: 12,
             justifyContent: "center",
             flex: 1,
-            backgroundColor: colors.bg
+            backgroundColor: colors.primary.background
           }}
         >
           <View
@@ -155,10 +183,10 @@ export const SessionExpired = () => {
                 height: 60
               }}
               name="alert"
-              color={colors.errorText}
+              color={colors.error.icon}
               size={50}
             />
-            <Heading size={SIZE.xxxl} color={colors.heading}>
+            <Heading size={SIZE.xxxl} color={colors.primary.heading}>
               Session expired
             </Heading>
             <Paragraph
@@ -222,7 +250,9 @@ export const SessionExpired = () => {
         </View>
         <Toast context="local" />
         <Dialog context="session_expiry" />
-      </Modal>
+
+        <SheetProvider context="two_factor_verify" />
+      </BaseDialog>
     )
   );
 };

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

@@ -18,13 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useRef, useState } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { ToastEvent } from "../../services/event-manager";
 import { clearMessage, setEmailVerifyMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { useUserStore } from "../../stores/use-user-store";
 import { openLinkInBrowser } from "../../utils/functions";
 import { SIZE } from "../../utils/size";
@@ -37,7 +37,7 @@ import { hideAuth } from "./common";
 import { useSettingStore } from "../../stores/use-setting-store";
 
 export const Signup = ({ changeMode, trial }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const email = useRef();
   const emailInputRef = useRef();
   const passwordInputRef = useRef();
@@ -49,7 +49,7 @@ export const Signup = ({ changeMode, trial }) => {
   const setUser = useUserStore((state) => state.setUser);
   const setLastSynced = useUserStore((state) => state.setLastSynced);
   const deviceMode = useSettingStore((state) => state.deviceMode);
-
+  const { width, height } = useWindowDimensions();
   const validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
       ToastEvent.show({
@@ -67,6 +67,7 @@ export const Signup = ({ changeMode, trial }) => {
 
   const signup = async () => {
     if (!validateInfo() || error) return;
+    if (loading) return;
     setLoading(true);
     try {
       await db.user.signup(email.current.toLowerCase(), password.current);
@@ -98,29 +99,27 @@ export const Signup = ({ changeMode, trial }) => {
       <View
         style={{
           borderRadius: DDS.isTab ? 5 : 0,
-          backgroundColor: colors.bg,
+          backgroundColor: colors.primary.background,
           zIndex: 10,
           width: "100%",
-          alignSelf: "center",
-          height: "100%",
-          minHeight: "100%"
+          alignSelf: "center"
         }}
       >
         <View
           style={{
-            flexGrow: 1,
             justifyContent: "flex-end",
             paddingHorizontal: 20,
-            backgroundColor: colors.nav,
+            backgroundColor: colors.secondary.background,
             marginBottom: 20,
             borderBottomWidth: 1,
-            borderBottomColor: colors.border,
+            borderBottomColor: colors.primary.border,
             alignSelf: deviceMode !== "mobile" ? "center" : undefined,
             borderWidth: deviceMode !== "mobile" ? 1 : null,
-            borderColor: deviceMode !== "mobile" ? colors.border : null,
+            borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
             borderRadius: deviceMode !== "mobile" ? 20 : null,
             marginTop: deviceMode !== "mobile" ? 50 : null,
-            width: deviceMode === "mobile" ? null : "50%"
+            width: deviceMode === "mobile" ? null : "50%",
+            minHeight: height * 0.4
           }}
         >
           <View
@@ -132,7 +131,7 @@ export const Signup = ({ changeMode, trial }) => {
               style={{
                 width: 100,
                 height: 5,
-                backgroundColor: colors.accent,
+                backgroundColor: colors.primary.accent,
                 borderRadius: 2,
                 marginRight: 7
               }}
@@ -142,7 +141,7 @@ export const Signup = ({ changeMode, trial }) => {
               style={{
                 width: 20,
                 height: 5,
-                backgroundColor: colors.nav,
+                backgroundColor: colors.secondary.background,
                 borderRadius: 2
               }}
             />
@@ -163,9 +162,8 @@ export const Signup = ({ changeMode, trial }) => {
           style={{
             width: DDS.isTab ? "50%" : "100%",
             paddingHorizontal: 20,
-            backgroundColor: colors.bg,
-            alignSelf: "center",
-            flexGrow: 0.5
+            backgroundColor: colors.primary.background,
+            alignSelf: "center"
           }}
         >
           <Input
@@ -233,7 +231,7 @@ export const Signup = ({ changeMode, trial }) => {
               marginBottom: 25
             }}
             size={SIZE.xs}
-            color={colors.icon}
+            color={colors.secondary.paragraph}
           >
             By signing up, you agree to our{" "}
             <Paragraph
@@ -244,7 +242,7 @@ export const Signup = ({ changeMode, trial }) => {
               style={{
                 textDecorationLine: "underline"
               }}
-              color={colors.accent}
+              color={colors.primary.accent}
             >
               Terms of Service{" "}
             </Paragraph>
@@ -257,7 +255,7 @@ export const Signup = ({ changeMode, trial }) => {
               style={{
                 textDecorationLine: "underline"
               }}
-              color={colors.accent}
+              color={colors.primary.accent}
             >
               Privacy Policy.
             </Paragraph>{" "}
@@ -290,9 +288,12 @@ export const Signup = ({ changeMode, trial }) => {
               paddingVertical: 12
             }}
           >
-            <Paragraph size={SIZE.xs + 1} color={colors.icon}>
+            <Paragraph size={SIZE.xs + 1} color={colors.secondary.paragraph}>
               Already have an account?{" "}
-              <Paragraph size={SIZE.xs + 1} style={{ color: colors.accent }}>
+              <Paragraph
+                size={SIZE.xs + 1}
+                style={{ color: colors.primary.accent }}
+              >
                 Login
               </Paragraph>
             </Paragraph>

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

@@ -26,7 +26,7 @@ import {
   presentSheet,
   ToastEvent
 } from "../../services/event-manager";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { eCloseSheet } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
@@ -39,7 +39,7 @@ import Paragraph from "../ui/typography/paragraph";
 import { useCallback } from "react";
 
 const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const code = useRef();
   const [currentMethod, setCurrentMethod] = useState({
     method: mfaInfo?.primaryMethod,
@@ -157,7 +157,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
           }}
           size={50}
           name="key"
-          color={colors.accent}
+          color={colors.primary.accent}
         />
         <Heading
           style={{
@@ -214,6 +214,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 code.current = value;
                 //onNext();
               }}
+              caretHidden
               inputStyle={{
                 fontSize: SIZE.lg,
                 height: 60,
@@ -281,7 +282,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                     marginRight: 10
                   }}
                   size={15}
-                  color={colors.accent}
+                  color={colors.primary.accent}
                   name={item.icon}
                 />
                 <View

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

@@ -33,7 +33,7 @@ export const LoginSteps = {
   passwordAuth: 3
 };
 
-export const useLogin = (onFinishLogin) => {
+export const useLogin = (onFinishLogin, sessionExpired = false) => {
   const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
@@ -64,10 +64,12 @@ export const useLogin = (onFinishLogin) => {
   const login = async () => {
     if (!validateInfo() || error) return;
     try {
+      if (loading) return;
       setLoading(true);
       switch (step) {
         case LoginSteps.emailAuth: {
           const mfaInfo = await db.user.authenticateEmail(email.current);
+          console.log("email auth", mfaInfo);
           if (mfaInfo) {
             TwoFactorVerification.present(async (mfa, callback) => {
               try {
@@ -100,7 +102,12 @@ export const useLogin = (onFinishLogin) => {
           break;
         }
         case LoginSteps.passwordAuth: {
-          await db.user.authenticatePassword(email.current, password.current);
+          await db.user.authenticatePassword(
+            email.current,
+            password.current,
+            null,
+            sessionExpired
+          );
           finishLogin();
           break;
         }

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

@@ -17,24 +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 React from "react";
+import React, { PropsWithChildren } from "react";
 import { View } from "react-native";
 import { useSelectionStore } from "../../stores/use-selection-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 
-export const ContainerHeader = ({ children }) => {
-  const colors = useThemeStore((state) => state.colors);
+export const ContainerHeader = (props: PropsWithChildren) => {
+  const { colors } = useThemeColors();
   const selectionMode = useSelectionStore((state) => state.selectionMode);
 
   return !selectionMode ? (
     <View
       style={{
-        backgroundColor: colors.bg,
+        backgroundColor: colors.primary.background,
         width: "100%",
         overflow: "hidden"
       }}
     >
-      {children}
+      {props.children}
     </View>
   ) : null;
 };

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

@@ -17,8 +17,9 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useEffect } from "react";
-import { Keyboard, Platform, View } from "react-native";
+import { useThemeColors } from "@notesnook/theme";
+import React, { useCallback, useEffect } from "react";
+import { Keyboard, View } from "react-native";
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -30,17 +31,25 @@ import { notesnook } from "../../../e2e/test.ids";
 import { editorState } from "../../screens/editor/tiptap/utils";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { getElevation, showTooltip, TOOLTIP_POSITIONS } from "../../utils";
-import { normalize, SIZE } from "../../utils/size";
+import { getElevationStyle } from "../../utils/elevation";
+import { SIZE, normalize } from "../../utils/size";
+import NativeTooltip from "../../utils/tooltip";
 import { PressableButton } from "../ui/pressable";
-import { useCallback } from "react";
 
-export const FloatingButton = ({
+interface FloatingButton {
+  title?: string;
+  onPress: () => void;
+  color?: string;
+  alwaysVisible?: boolean;
+}
+
+const FloatingButton = ({
   title,
   onPress,
-  color = "accent",
-  shouldShow = false
-}) => {
+  color,
+  alwaysVisible = false
+}: FloatingButton) => {
+  const { colors } = useThemeColors();
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
   const translate = useSharedValue(0);
@@ -58,12 +67,8 @@ export const FloatingButton = ({
     };
   });
 
-  useEffect(() => {
-    animate(selectionMode ? 150 : 0);
-  }, [animate, selectionMode]);
-
   const animate = useCallback(
-    (toValue) => {
+    (toValue: number) => {
       translate.value = withTiming(toValue, {
         duration: 250,
         easing: Easing.elastic(1)
@@ -72,39 +77,39 @@ export const FloatingButton = ({
     [translate]
   );
 
-  const onKeyboardHide = useCallback(async () => {
-    editorState().keyboardState = false;
-    if (deviceMode !== "mobile") return;
-    animate(0);
-  }, [animate, deviceMode]);
-
-  const onKeyboardShow = useCallback(async () => {
-    editorState().keyboardState = true;
-    if (deviceMode !== "mobile") return;
-    animate(150);
-  }, [animate, deviceMode]);
+  useEffect(() => {
+    animate(selectionMode ? 150 : 0);
+  }, [animate, selectionMode]);
 
   useEffect(() => {
-    let sub1 = Keyboard.addListener("keyboardDidShow", onKeyboardShow);
-    let sub2 = Keyboard.addListener("keyboardDidHide", onKeyboardHide);
-    return () => {
-      sub1?.remove();
-      sub2?.remove();
+    const onKeyboardHide = () => {
+      editorState().keyboardState = false;
+      if (deviceMode !== "mobile") return;
+      animate(0);
     };
-  }, [deviceMode, onKeyboardHide, onKeyboardShow]);
-  const paddings = {
-    ios: 20,
-    android: 20,
-    iPad: 20
-  };
 
-  return deviceMode !== "mobile" && !shouldShow ? null : (
+    const onKeyboardShow = () => {
+      editorState().keyboardState = true;
+      if (deviceMode !== "mobile") return;
+      animate(150);
+    };
+
+    const sub = [
+      Keyboard.addListener("keyboardDidShow", onKeyboardShow),
+      Keyboard.addListener("keyboardDidHide", onKeyboardHide)
+    ];
+    return () => {
+      sub.forEach((sub) => sub?.remove?.());
+    };
+  }, [deviceMode, animate]);
+
+  return deviceMode !== "mobile" && !alwaysVisible ? null : (
     <Animated.View
       style={[
         {
           position: "absolute",
           right: 12,
-          bottom: paddings[Platform.isPad ? "iPad" : Platform.OS],
+          bottom: 20,
           zIndex: 10
         },
         animatedStyle
@@ -113,14 +118,15 @@ export const FloatingButton = ({
       <PressableButton
         testID={notesnook.buttons.add}
         type="accent"
-        accentColor={color || "accent"}
-        accentText="light"
+        accentColor={colors.static[color as keyof typeof colors.static]}
         customStyle={{
-          ...getElevation(5),
+          ...getElevationStyle(5),
           borderRadius: 100
         }}
         onLongPress={(event) => {
-          showTooltip(event, title, TOOLTIP_POSITIONS.LEFT);
+          if (title) {
+            NativeTooltip.show(event, title, NativeTooltip.POSITIONS.LEFT);
+          }
         }}
         onPress={onPress}
       >
@@ -134,7 +140,7 @@ export const FloatingButton = ({
         >
           <Icon
             name={title === "Clear all trash" ? "delete" : "plus"}
-            color="white"
+            color={colors.primary.accentForeground}
             size={SIZE.xxl}
           />
         </View>
@@ -142,3 +148,5 @@ export const FloatingButton = ({
     </Animated.View>
   );
 };
+
+export { FloatingButton };

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

@@ -17,44 +17,40 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React from "react";
-import { KeyboardAvoidingView, Platform, View } from "react-native";
+import React, { PropsWithChildren } from "react";
+import { KeyboardAvoidingView, Platform } from "react-native";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { Header } from "../header";
 import SelectionHeader from "../selection-header";
-export const Container = ({ children }) => {
+
+export const Container = ({ children }: PropsWithChildren) => {
   const floating = useIsFloatingKeyboard();
   const introCompleted = useSettingStore(
     (state) => state.settings.introCompleted
   );
   const insets = useGlobalSafeAreaInsets();
+
   return (
     <KeyboardAvoidingView
       behavior="padding"
       enabled={Platform.OS === "ios" && !floating}
       style={{
-        flex: 1
+        flex: 1,
+        overflow: "hidden",
+        paddingTop: Platform.OS === "android" ? 0 : insets.top,
+        paddingBottom: Platform.OS === "android" ? 0 : insets.bottom
       }}
     >
-      <View
-        style={{
-          flex: 1,
-          overflow: "hidden",
-          paddingTop: Platform.OS === "android" ? 0 : insets.top,
-          paddingBottom: Platform.OS === "android" ? 0 : insets.bottom
-        }}
-      >
-        {!introCompleted ? null : (
-          <>
-            <SelectionHeader />
-            <Header title="Header" screen="Header" />
-          </>
-        )}
+      {!introCompleted ? null : (
+        <>
+          <SelectionHeader />
+          <Header />
+        </>
+      )}
 
-        {children}
-      </View>
+      {children}
     </KeyboardAvoidingView>
   );
 };

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

@@ -20,21 +20,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { useMessageStore } from "../../stores/use-message-store";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { COLORS_NOTE } from "../../utils/color-scheme";
-import { hexToRGBA } from "../../utils/color-scheme/utils";
+import { useThemeColors } from "@notesnook/theme";
+import { ColorValues } from "../../utils/colors";
+import { hexToRGBA } from "../../utils/colors";
 
 export const DefaultPlaceholder = ({ color }: { color: string }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const message = useMessageStore((state) => state.message);
   const annoucements = useMessageStore((state) => state.announcements);
   const hasAnnoucements = annoucements.length > 0;
   const shadeColor = color
     ? hexToRGBA(
-        COLORS_NOTE[color?.toLowerCase() as keyof typeof COLORS_NOTE],
+        ColorValues[color?.toLowerCase() as keyof typeof ColorValues],
         0.15
       )
-    : colors.shade;
+    : colors.primary.shade;
 
   return (
     <View
@@ -50,7 +50,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             height: 100,
             borderRadius: 10,
             marginBottom: 20,
-            backgroundColor: colors.nav,
+            backgroundColor: colors.secondary.background,
             padding: 12
           }}
         >
@@ -58,7 +58,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             style={{
               width: 150,
               height: 20,
-              backgroundColor: colors.transGray,
+              backgroundColor: colors.primary.hover,
               borderRadius: 5,
               marginBottom: 10
             }}
@@ -67,7 +67,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             style={{
               width: 250,
               height: 14,
-              backgroundColor: colors.transGray,
+              backgroundColor: colors.primary.hover,
               borderRadius: 5
             }}
           />
@@ -110,7 +110,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               style={{
                 width: 150,
                 height: 12,
-                backgroundColor: colors.nav,
+                backgroundColor: colors.secondary.background,
                 borderRadius: 5,
                 marginBottom: 10
               }}
@@ -119,7 +119,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               style={{
                 width: 250,
                 height: 16,
-                backgroundColor: colors.nav,
+                backgroundColor: colors.secondary.background,
                 borderRadius: 5
               }}
             />
@@ -131,7 +131,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
         style={{
           width: "100%",
           height: 30,
-          backgroundColor: colors.nav,
+          backgroundColor: colors.secondary.background,
           borderRadius: 10,
           marginBottom: 20,
           padding: 5,
@@ -158,7 +158,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             style={{
               width: 15,
               height: 15,
-              backgroundColor: colors.transGray,
+              backgroundColor: colors.primary.hover,
               borderRadius: 100,
               marginRight: 10
             }}
@@ -167,7 +167,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             style={{
               width: 60,
               height: 15,
-              backgroundColor: colors.transGray,
+              backgroundColor: colors.primary.hover,
               borderRadius: 3
             }}
           />
@@ -178,7 +178,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
         style={{
           width: 200,
           height: 16,
-          backgroundColor: colors.nav,
+          backgroundColor: colors.secondary.background,
           borderRadius: 5
         }}
       />
@@ -186,7 +186,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
         style={{
           width: "85%",
           height: 13,
-          backgroundColor: colors.nav,
+          backgroundColor: colors.secondary.background,
           borderRadius: 5,
           marginTop: 10
         }}
@@ -202,7 +202,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           style={{
             width: 50,
             height: 10,
-            backgroundColor: colors.nav,
+            backgroundColor: colors.secondary.background,
             borderRadius: 5
           }}
         />
@@ -210,7 +210,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           style={{
             width: 60,
             height: 10,
-            backgroundColor: colors.nav,
+            backgroundColor: colors.secondary.background,
             borderRadius: 5,
             marginLeft: 10
           }}

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

@@ -21,7 +21,7 @@ import React from "react";
 import { ViewProps } from "react-native";
 import Animated, { FadeOutUp } from "react-native-reanimated";
 import { useDelayLayout } from "../../hooks/use-delay-layout";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { DefaultPlaceholder } from "./default-placeholder";
 import { SettingsPlaceholder } from "./settings-placeholder";
 
@@ -42,7 +42,7 @@ export default function DelayLayout({
   animated = true,
   ...props
 }: IDelayLayoutProps) {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const loading = useDelayLayout(
     !props.delay || props.delay < 300 ? 300 : props.delay
   );
@@ -52,12 +52,12 @@ export default function DelayLayout({
     <Animated.View
       exiting={animated ? FadeOutUp : undefined}
       style={{
-        backgroundColor: colors.bg,
+        backgroundColor: colors.primary.background,
         flex: 1,
         paddingTop: 20
       }}
     >
-      <Placeholder color={props.color || colors.accent} />
+      <Placeholder color={props.color || colors.primary.accent} />
     </Animated.View>
   ) : (
     <>{props.children}</>

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

@@ -19,10 +19,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { View } from "react-native";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 
 export const SettingsPlaceholder = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
 
   return (
     <View>
@@ -30,7 +30,7 @@ export const SettingsPlaceholder = () => {
         style={{
           width: 100,
           height: 12,
-          backgroundColor: colors.shade,
+          backgroundColor: colors.primary.shade,
           borderRadius: 5,
           marginLeft: 12,
           marginBottom: 12
@@ -51,7 +51,7 @@ export const SettingsPlaceholder = () => {
           style={{
             width: 40,
             height: 40,
-            backgroundColor: colors.transGray,
+            backgroundColor: colors.primary.hover,
             borderRadius: 100,
             marginRight: 20
           }}
@@ -61,7 +61,7 @@ export const SettingsPlaceholder = () => {
             style={{
               width: 150,
               height: 12,
-              backgroundColor: colors.nav,
+              backgroundColor: colors.secondary.background,
               borderRadius: 5,
               marginBottom: 10
             }}
@@ -70,7 +70,7 @@ export const SettingsPlaceholder = () => {
             style={{
               width: 250,
               height: 16,
-              backgroundColor: colors.nav,
+              backgroundColor: colors.secondary.background,
               borderRadius: 5
             }}
           />
@@ -93,7 +93,7 @@ export const SettingsPlaceholder = () => {
           style={{
             width: 40,
             height: 40,
-            backgroundColor: colors.shade,
+            backgroundColor: colors.primary.shade,
             borderRadius: 100,
             marginRight: 20
           }}
@@ -103,7 +103,7 @@ export const SettingsPlaceholder = () => {
             style={{
               width: 150,
               height: 12,
-              backgroundColor: colors.nav,
+              backgroundColor: colors.secondary.background,
               borderRadius: 5,
               marginBottom: 10
             }}
@@ -112,7 +112,7 @@ export const SettingsPlaceholder = () => {
             style={{
               width: 250,
               height: 16,
-              backgroundColor: colors.nav,
+              backgroundColor: colors.secondary.background,
               borderRadius: 5
             }}
           />
@@ -122,7 +122,7 @@ export const SettingsPlaceholder = () => {
           style={{
             width: 40,
             height: 20,
-            backgroundColor: colors.nav,
+            backgroundColor: colors.secondary.background,
             borderRadius: 100,
             marginLeft: 15,
             alignItems: "flex-end",
@@ -134,7 +134,7 @@ export const SettingsPlaceholder = () => {
             style={{
               width: 15,
               height: 15,
-              backgroundColor: colors.shade,
+              backgroundColor: colors.primary.shade,
               borderRadius: 100,
               marginLeft: 15
             }}

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

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { useNoteStore } from "../../stores/use-notes-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { AnnouncementDialog } from "../announcements";
 import AuthModal from "../auth/auth-modal";
 import { SessionExpired } from "../auth/session-expired";
@@ -39,7 +39,7 @@ import RestoreDataSheet from "../sheets/restore-data";
 import PDFPreview from "../dialogs/pdf-preview";
 
 const DialogProvider = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const loading = useNoteStore((state) => state.loading);
 
   return (

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

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   KeyboardAvoidingView,
   Modal,
@@ -30,6 +30,10 @@ import {
 import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { BouncingView } from "../ui/transitions/bouncing-view";
+import { ScopedThemeProvider } from "@notesnook/theme";
+import SettingsService from "../../services/settings";
+import { useUserStore } from "../../stores/use-user-store";
+import { useAppState } from "../../hooks/use-app-state";
 
 const BaseDialog = ({
   visible,
@@ -47,9 +51,13 @@ const BaseDialog = ({
   bounce = true,
   closeOnTouch = true,
   useSafeArea = true,
-  avoidKeyboardResize = false
+  avoidKeyboardResize = false,
+  enableSheetKeyboardHandler = false
 }) => {
   const floating = useIsFloatingKeyboard();
+  const appState = useAppState();
+  const lockEvents = useRef(false);
+  const [internalVisible, setIntervalVisible] = useState(true);
 
   useEffect(() => {
     return () => {
@@ -57,72 +65,99 @@ const BaseDialog = ({
     };
   }, []);
 
+  useEffect(() => {
+    if (useUserStore.getState().disableAppLockRequests) return;
+    if (SettingsService.get().appLockMode === "background") {
+      if (appState === "background") {
+        setIntervalVisible(false);
+        if (useUserStore.getState().appLocked) {
+          lockEvents.current = true;
+          const unsub = useUserStore.subscribe((state) => {
+            if (!state.appLocked) {
+              setIntervalVisible(true);
+              unsub();
+              setTimeout(() => {
+                lockEvents.current = false;
+              });
+            }
+          });
+        }
+      }
+    }
+  }, [appState]);
+
   const Wrapper = useSafeArea ? SafeAreaView : View;
 
   return (
-    <Modal
-      visible={visible}
-      transparent={true}
-      animated
-      statusBarTranslucent={statusBarTranslucent}
-      supportedOrientations={[
-        "portrait",
-        "portrait-upside-down",
-        "landscape",
-        "landscape-left",
-        "landscape-right"
-      ]}
-      onShow={() => {
-        if (onShow) {
-          onShow();
-          useSettingStore.getState().setSheetKeyboardHandler(false);
-        }
-      }}
-      animationType={animation}
-      onRequestClose={() => {
-        if (!closeOnTouch) return null;
-        useSettingStore.getState().setSheetKeyboardHandler(true);
-        onRequestClose && onRequestClose();
-      }}
-    >
-      <Wrapper
-        style={{
-          backgroundColor: background
-            ? background
-            : transparent
-            ? "transparent"
-            : "rgba(0,0,0,0.3)"
+    <ScopedThemeProvider value="dialog">
+      <Modal
+        visible={visible && internalVisible}
+        transparent={true}
+        statusBarTranslucent={statusBarTranslucent}
+        supportedOrientations={[
+          "portrait",
+          "portrait-upside-down",
+          "landscape",
+          "landscape-left",
+          "landscape-right"
+        ]}
+        onShow={() => {
+          if (lockEvents.current) return;
+          if (onShow) {
+            onShow();
+            if (!enableSheetKeyboardHandler) {
+              useSettingStore.getState().setSheetKeyboardHandler(false);
+            }
+          }
+        }}
+        animationType={animation}
+        onRequestClose={() => {
+          if (lockEvents.current) return;
+          if (!closeOnTouch) return null;
+          useSettingStore.getState().setSheetKeyboardHandler(true);
+          onRequestClose && onRequestClose();
         }}
       >
-        <KeyboardAvoidingView
-          enabled={!floating && Platform.OS === "ios" && !avoidKeyboardResize}
-          behavior="padding"
+        <Wrapper
+          style={{
+            backgroundColor: background
+              ? background
+              : transparent
+              ? "transparent"
+              : "rgba(0,0,0,0.3)"
+          }}
         >
-          <BouncingView
-            duration={400}
-            animated={animated}
-            initialScale={bounce ? 0.9 : 1}
-            style={[
-              styles.backdrop,
-              {
-                justifyContent: centered
-                  ? "center"
-                  : bottom
-                  ? "flex-end"
-                  : "flex-start"
-              }
-            ]}
+          <KeyboardAvoidingView
+            enabled={!floating && Platform.OS === "ios" && !avoidKeyboardResize}
+            behavior="padding"
           >
-            <TouchableOpacity
-              onPress={closeOnTouch ? onRequestClose : null}
-              style={styles.overlayButton}
-            />
-            {premium}
-            {children}
-          </BouncingView>
-        </KeyboardAvoidingView>
-      </Wrapper>
-    </Modal>
+            <BouncingView
+              duration={400}
+              animated={animated}
+              initialScale={bounce ? 0.9 : 1}
+              style={[
+                styles.backdrop,
+                {
+                  alignItems: centered ? "center" : undefined,
+                  justifyContent: centered
+                    ? "center"
+                    : bottom
+                    ? "flex-end"
+                    : "flex-start"
+                }
+              ]}
+            >
+              <TouchableOpacity
+                onPress={closeOnTouch ? onRequestClose : null}
+                style={styles.overlayButton}
+              />
+              {premium}
+              {children}
+            </BouncingView>
+          </KeyboardAvoidingView>
+        </Wrapper>
+      </Modal>
+    </ScopedThemeProvider>
   );
 };
 
@@ -130,8 +165,7 @@ const styles = StyleSheet.create({
   backdrop: {
     width: "100%",
     height: "100%",
-    justifyContent: "center",
-    alignItems: "center"
+    justifyContent: "center"
   },
   overlayButton: {
     width: "100%",

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

@@ -21,7 +21,7 @@ import React from "react";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
@@ -35,14 +35,14 @@ const DialogButtons = ({
   doneText,
   positiveType
 }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
 
   return (
     <View
       style={[
         styles.container,
         {
-          backgroundColor: colors.nav,
+          backgroundColor: colors.secondary.background,
           height: 60,
           borderBottomRightRadius: 10,
           borderBottomLeftRadius: 10,
@@ -51,7 +51,7 @@ const DialogButtons = ({
       ]}
     >
       {loading ? (
-        <ActivityIndicator color={colors.accent} size={SIZE.lg} />
+        <ActivityIndicator color={colors.primary.accent} size={SIZE.lg} />
       ) : doneText ? (
         <View
           style={{
@@ -60,11 +60,11 @@ const DialogButtons = ({
           }}
         >
           <Icon
-            color={colors.accent}
+            color={colors.primary.accent}
             name="check-circle-outline"
             size={SIZE.md}
           />
-          <Paragraph color={colors.accent}>{" " + doneText}</Paragraph>
+          <Paragraph color={colors.primary.accent}>{" " + doneText}</Paragraph>
         </View>
       ) : (
         <View />

apps/mobile/app/components/dialog/dialog-container.js

@@ -20,21 +20,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { DDS } from "../../services/device-detection";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { getElevation } from "../../utils";
+import { useThemeColors } from "@notesnook/theme";
+import { getElevationStyle } from "../../utils/elevation";
 
 const DialogContainer = ({ width, height, ...restProps }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
 
   return (
     <View
       {...restProps}
       style={{
-        ...getElevation(5),
+        ...getElevationStyle(5),
         width: width || DDS.isTab ? 500 : "85%",
         maxHeight: height || 450,
         borderRadius: 10,
-        backgroundColor: colors.bg,
+        backgroundColor: colors.primary.background,
         paddingTop: 12
       }}
     />

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

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { Text, View, ViewStyle } from "react-native";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { PressableButtonProps } from "../ui/pressable";
@@ -54,7 +54,7 @@ const DialogHeader = ({
   titlePart,
   style
 }: DialogHeaderProps) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
 
   return (
     <>
@@ -86,7 +86,7 @@ const DialogHeader = ({
             >
               {title}{" "}
               {titlePart ? (
-                <Text style={{ color: colors.accent }}>{titlePart}</Text>
+                <Text style={{ color: colors.primary.accent }}>{titlePart}</Text>
               ) : null}
             </Heading>
 
@@ -114,7 +114,7 @@ const DialogHeader = ({
                 maxWidth: centered ? "90%" : "100%",
                 alignSelf: centered ? "center" : "flex-start"
               }}
-              color={paragraphColor || colors.icon}
+              color={paragraphColor || colors.secondary.paragraph}
             >
               {paragraph}
             </Paragraph>

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

@@ -24,8 +24,8 @@ import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { getElevation } from "../../utils";
+import { useThemeColors } from "@notesnook/theme";
+import { getElevationStyle } from "../../utils/elevation";
 import { eCloseSimpleDialog, eOpenSimpleDialog } from "../../utils/events";
 import { sleep } from "../../utils/time";
 import { Toast } from "../toast";
@@ -38,9 +38,12 @@ import { useCallback } from "react";
 import { Button } from "../ui/button";
 
 export const Dialog = ({ context = "global" }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
-  const [inputValue, setInputValue] = useState(null);
+  const [checked, setChecked] = useState(false);
+  const values = useRef({
+    inputValue: undefined
+  });
   const inputRef = useRef();
   const [dialogInfo, setDialogInfo] = useState({
     title: "",
@@ -51,7 +54,7 @@ export const Dialog = ({ context = "global" }) => {
     onClose: () => {},
     positiveType: "transparent",
     icon: null,
-    paragraphColor: colors.pri,
+    paragraphColor: colors.primary.paragraph,
     input: false,
     inputPlaceholder: "Enter some text",
     defaultValue: "",
@@ -76,7 +79,8 @@ export const Dialog = ({ context = "global" }) => {
     if (dialogInfo.positivePress) {
       inputRef.current?.blur();
       let result = await dialogInfo.positivePress(
-        inputValue || dialogInfo.defaultValue
+        values.current.inputValue || dialogInfo.defaultValue,
+        checked
       );
       if (result === false) {
         return;
@@ -91,14 +95,16 @@ export const Dialog = ({ context = "global" }) => {
       if (!data.context) data.context = "global";
       if (data.context !== context) return;
       setDialogInfo(data);
+      setChecked(false);
+      values.current.inputValue = data.defaultValue;
       setVisible(true);
-      setInputValue(data.defaultValue);
     },
     [context]
   );
 
   const hide = () => {
-    setInputValue(null);
+    setChecked(false);
+    values.current.inputValue = undefined;
     setVisible(false);
   };
 
@@ -106,16 +112,15 @@ export const Dialog = ({ context = "global" }) => {
     if (dialogInfo.onClose) {
       await dialogInfo.onClose();
     }
-
     hide();
   };
 
   const style = {
-    ...getElevation(5),
+    ...getElevationStyle(5),
     width: DDS.isTab ? 400 : "85%",
     maxHeight: 450,
     borderRadius: 5,
-    backgroundColor: colors.bg,
+    backgroundColor: colors.primary.background,
     paddingTop: 12
   };
 
@@ -159,7 +164,7 @@ export const Dialog = ({ context = "global" }) => {
               fwdRef={inputRef}
               autoCapitalize="none"
               onChangeText={(value) => {
-                setInputValue(value);
+                values.current.inputValue = value;
               }}
               testID="input-value"
               secureTextEntry={dialogInfo.secureTextEntry}
@@ -176,10 +181,10 @@ export const Dialog = ({ context = "global" }) => {
           <>
             <Button
               onPress={() => {
-                setInputValue(!inputValue);
+                setChecked(!checked);
               }}
               icon={
-                inputValue
+                checked
                   ? "check-circle-outline"
                   : "checkbox-blank-circle-outline"
               }
@@ -187,9 +192,10 @@ export const Dialog = ({ context = "global" }) => {
                 justifyContent: "flex-start"
               }}
               height={35}
+              iconSize={20}
               width="100%"
               title={dialogInfo.check.info}
-              type={inputValue ? dialogInfo.check.type : "gray"}
+              type={checked ? dialogInfo.check.type : "gray"}
             />
           </>
         ) : null}

apps/mobile/app/components/dialogs/jump-to-section/index.js

@@ -25,8 +25,8 @@ import {
   eUnSubscribeEvent
 } from "../../../services/event-manager";
 import { useMessageStore } from "../../../stores/use-message-store";
-import { useThemeStore } from "../../../stores/use-theme-store";
-import { getElevation } from "../../../utils";
+import { useThemeColors } from "@notesnook/theme";
+import { getElevationStyle } from "../../../utils/elevation";
 import {
   eCloseJumpToDialog,
   eOpenJumpToDialog,
@@ -41,10 +41,10 @@ import { useCallback } from "react";
 const offsets = [];
 let timeout = null;
 const JumpToSectionDialog = ({ scrollRef, data, type }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const notes = data;
   const [visible, setVisible] = useState(false);
-  const [currentIndex, setCurrentIndex] = useState(null);
+  const [currentIndex, setCurrentIndex] = useState(0);
 
   const onPress = (item) => {
     let ind = notes.findIndex(
@@ -77,7 +77,7 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
     }
     timeout = setTimeout(() => {
       let index = offsets.findIndex((o, i) => o <= y && offsets[i + 1] > y);
-      setCurrentIndex(index);
+      setCurrentIndex(index || 0);
     }, 200);
   };
 
@@ -113,7 +113,6 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
         offsets.push(offset);
       });
   }, [notes]);
-
   return !visible ? null : (
     <BaseDialog
       onShow={() => {
@@ -124,9 +123,9 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
     >
       <View
         style={{
-          ...getElevation(5),
+          ...getElevationStyle(5),
           width: DDS.isTab ? 500 : "85%",
-          backgroundColor: colors.bg,
+          backgroundColor: colors.primary.background,
           zIndex: 100,
           bottom: 20,
           maxHeight: "65%",
@@ -157,7 +156,7 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
                   <PressableButton
                     key={item.title}
                     onPress={() => onPress(item, index)}
-                    type={currentIndex === index ? "accent" : "transparent"}
+                    type={currentIndex === index ? "selected" : "transparent"}
                     customStyle={{
                       minWidth: "20%",
                       width: null,
@@ -171,7 +170,9 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
                     <Paragraph
                       size={SIZE.sm}
                       color={
-                        currentIndex === index ? colors.light : colors.accent
+                        currentIndex === index
+                          ? colors.selected.accent
+                          : colors.primary.accent
                       }
                       style={{
                         textAlign: "center"

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

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import React from "react";
 import { View } from "react-native";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import BaseDialog from "../../dialog/base-dialog";
 import { ProgressBarComponent } from "../../ui/svg/lazy";
 import { useEffect } from "react";
@@ -30,7 +30,7 @@ import { useState } from "react";
 import { eCloseLoading, eOpenLoading } from "../../../utils/events";
 
 export const LoadingDialog = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
 
   useEffect(() => {
@@ -58,7 +58,7 @@ export const LoadingDialog = () => {
         style={{
           width: "100%",
           height: "100%",
-          backgroundColor: colors.bg,
+          backgroundColor: colors.primary.background,
           justifyContent: "center",
           alignItems: "center"
         }}
@@ -77,8 +77,8 @@ export const LoadingDialog = () => {
             useNativeDriver
             indeterminate
             indeterminateAnimationDuration={2000}
-            unfilledColor={colors.nav}
-            color={colors.accent}
+            unfilledColor={colors.secondary.background}
+            color={colors.primary.accent}
             borderWidth={0}
           />
         </View>

apps/mobile/app/components/dialogs/pdf-preview/index.js

@@ -33,7 +33,7 @@ import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../../services/event-manager";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../../utils/size";
 import { Dialog } from "../../dialog";
 import BaseDialog from "../../dialog/base-dialog";
@@ -64,7 +64,7 @@ const usePDFSnapshot = (attachment) => {
 };
 
 const PDFPreview = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [pdfSource, setPDFSource] = useState();
   const [loading, setLoading] = useState(false);
@@ -172,7 +172,7 @@ const PDFPreview = () => {
             >
               <ProgressBarComponent
                 indeterminate={!progress}
-                color={colors.accent}
+                color={colors.primary.accent}
                 borderColor="transparent"
                 progress={parseInt(progress?.value || "100") / 100}
               />
@@ -180,7 +180,7 @@ const PDFPreview = () => {
                 style={{
                   marginTop: 10
                 }}
-                color={colors.light}
+                color={colors.static.white}
               >
                 Loading {`${progress?.percent ? `(${progress?.percent})` : ""}`}
                 ... Please wait
@@ -205,7 +205,7 @@ const PDFPreview = () => {
                   }}
                 >
                   <IconButton
-                    color={colors.light}
+                    color={colors.static.white}
                     name="arrow-left"
                     onPress={close}
                     customStyle={{
@@ -226,7 +226,7 @@ const PDFPreview = () => {
                     ref={inputRef}
                     defaultValue={currentPage + ""}
                     style={{
-                      color: colors.pri,
+                      color: colors.primary.paragraph,
                       padding: 0,
                       paddingTop: 0,
                       paddingBottom: 0,
@@ -234,7 +234,7 @@ const PDFPreview = () => {
                       marginBottom: 0,
                       paddingVertical: 0,
                       height: 25,
-                      backgroundColor: colors.nav,
+                      backgroundColor: colors.secondary.background,
                       width: 40,
                       textAlign: "center",
                       marginRight: 4,
@@ -249,7 +249,7 @@ const PDFPreview = () => {
                     }}
                     blurOnSubmit
                   />
-                  <Paragraph color={colors.light}>/{numPages}</Paragraph>
+                  <Paragraph color={colors.static.white}>/{numPages}</Paragraph>
                 </View>
 
                 <View
@@ -258,7 +258,7 @@ const PDFPreview = () => {
                   }}
                 >
                   <IconButton
-                    color={colors.light}
+                    color={colors.static.white}
                     name="download"
                     onPress={() => {
                       downloadAttachment(attachment.metadata.hash, false);

apps/mobile/app/components/dialogs/result/index.js

@@ -24,8 +24,8 @@ import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../../services/event-manager";
-import { useThemeStore } from "../../../stores/use-theme-store";
-import { getElevation } from "../../../utils";
+import { useThemeColors } from "@notesnook/theme";
+import { getElevationStyle } from "../../../utils/elevation";
 import { eCloseResultDialog, eOpenResultDialog } from "../../../utils/events";
 import { SIZE } from "../../../utils/size";
 import BaseDialog from "../../dialog/base-dialog";
@@ -36,7 +36,7 @@ import Paragraph from "../../ui/typography/paragraph";
 import { ProFeatures } from "./pro-features";
 
 const ResultDialog = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [dialogData, setDialogData] = useState({
     title: "Thank you for signing up!",
@@ -68,11 +68,11 @@ const ResultDialog = () => {
     <BaseDialog visible={true} onRequestClose={close}>
       <View
         style={{
-          ...getElevation(5),
+          ...getElevationStyle(5),
           width: DDS.isTab ? 350 : "85%",
           maxHeight: 500,
           borderRadius: 10,
-          backgroundColor: colors.bg,
+          backgroundColor: colors.primary.background,
           paddingTop: 20,
           justifyContent: "center",
           alignItems: "center"
@@ -94,7 +94,7 @@ const ResultDialog = () => {
         </Heading>
 
         <Paragraph
-          color={colors.icon}
+          color={colors.secondary.paragraph}
           size={SIZE.md}
           style={{
             alignSelf: "center",
@@ -121,7 +121,7 @@ const ResultDialog = () => {
         <Seperator />
         <View
           style={{
-            backgroundColor: colors.nav,
+            backgroundColor: colors.secondary.background,
             width: "100%",
             borderBottomRightRadius: 10,
             borderBottomLeftRadius: 10,

apps/mobile/app/components/dialogs/result/pro-features.js

@@ -21,7 +21,7 @@ import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { eSendEvent } from "../../../services/event-manager";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import {
   eCloseSheet,
   eCloseResultDialog,
@@ -31,7 +31,7 @@ import { SIZE } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import Paragraph from "../../ui/typography/paragraph";
 export const ProFeatures = ({ count = 6 }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
 
   return (
     <>
@@ -48,7 +48,7 @@ export const ProFeatures = ({ count = 6 }) => {
           content: "Instantly sync to unlimited devices"
         },
         {
-          content: "A private vault to keep everything imporant always locked"
+          content: "A private vault to keep everything important always locked"
         },
         {
           content:
@@ -73,7 +73,7 @@ export const ProFeatures = ({ count = 6 }) => {
               justifyContent: "flex-start"
             }}
           >
-            <Icon size={SIZE.lg} color={colors.accent} name="check" />
+            <Icon size={SIZE.lg} color={colors.primary.accent} name="check" />
             <Paragraph style={{ marginLeft: 5, flexShrink: 1 }}>
               {item.content}
             </Paragraph>
@@ -89,7 +89,7 @@ export const ProFeatures = ({ count = 6 }) => {
         size={SIZE.xs}
         style={{
           textDecorationLine: "underline",
-          color: colors.icon
+          color: colors.secondary.paragraph
         }}
       >
         See all features included in Notesnook Pro

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

@@ -34,7 +34,8 @@ import {
 } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import SearchService from "../../../services/search";
-import { getElevation, toTXT } from "../../../utils";
+import { convertNoteToText } from "../../../utils/note-to-text";
+import { getElevationStyle } from "../../../utils/elevation";
 import {
   eClearEditor,
   eCloseActionSheet,
@@ -441,6 +442,7 @@ export class VaultDialog extends Component {
       if (this.state.biometricUnlock && !this.state.isBiometryEnrolled) {
         await this._enrollFingerprint(this.password);
       }
+
       if (this.state.goToEditor) {
         this._openInEditor(note);
       } else if (this.state.share) {
@@ -451,7 +453,6 @@ export class VaultDialog extends Component {
         await this._copyNote(note);
       }
     } catch (e) {
-      console.log(e);
       this._takeErrorAction(e);
     }
   };
@@ -466,44 +467,40 @@ export class VaultDialog extends Component {
   }
 
   async _enrollFingerprint(password) {
-    try {
-      this.setState(
-        {
-          loading: true
-        },
-        async () => {
-          try {
-            await db.vault.unlock(password);
-            await BiometricService.storeCredentials(password);
-            this.setState({
-              loading: false
-            });
-            eSendEvent("vaultUpdated");
-            ToastEvent.show({
-              heading: "Biometric unlocking enabled!",
-              message: "Now you can unlock notes in vault with biometrics.",
-              type: "success",
-              context: "global"
-            });
-            this.close();
-          } catch (e) {
-            ToastEvent.show({
-              heading: "Incorrect password",
-              message:
-                "Please enter the correct vault password to enable biometrics.",
-              type: "error",
-              context: "local"
-            });
-            this.setState({
-              loading: false
-            });
-            return;
-          }
+    this.setState(
+      {
+        loading: true
+      },
+      async () => {
+        try {
+          await db.vault.unlock(password);
+          await BiometricService.storeCredentials(password);
+          this.setState({
+            loading: false
+          });
+          eSendEvent("vaultUpdated");
+          ToastEvent.show({
+            heading: "Biometric unlocking enabled!",
+            message: "Now you can unlock notes in vault with biometrics.",
+            type: "success",
+            context: "global"
+          });
+          this.close();
+        } catch (e) {
+          this.close();
+          ToastEvent.show({
+            heading: "Incorrect password",
+            message:
+              "Please enter the correct vault password to enable biometrics.",
+            type: "error",
+            context: "local"
+          });
+          this.setState({
+            loading: false
+          });
         }
-      );
-    } catch (e) {
-      this._takeErrorAction(e);
-    }
+      }
+    );
   }
 
   async _createVault() {
@@ -542,7 +539,7 @@ export class VaultDialog extends Component {
       .remove(this.state.note.id, this.password)
       .then(() => {
         ToastEvent.show({
-          heading: "Note permanantly unlocked.",
+          heading: "Note permanently unlocked.",
           type: "success",
           context: "global"
         });
@@ -564,7 +561,7 @@ export class VaultDialog extends Component {
   }
 
   async _copyNote(note) {
-    Clipboard.setString(await toTXT(note));
+    Clipboard.setString(await convertNoteToText(note));
     ToastEvent.show({
       heading: "Note copied",
       type: "success",
@@ -580,7 +577,7 @@ export class VaultDialog extends Component {
       await Share.open({
         heading: "Share note",
         failOnCancel: false,
-        message: await toTXT(note)
+        message: await convertNoteToText(note)
       });
     } catch (e) {
       console.error(e);
@@ -678,10 +675,10 @@ export class VaultDialog extends Component {
       >
         <View
           style={{
-            ...getElevation(5),
+            ...getElevationStyle(5),
             width: DDS.isTab ? 350 : "85%",
             borderRadius: 10,
-            backgroundColor: colors.bg,
+            backgroundColor: colors.primary.background,
             paddingTop: 12
           }}
         >
@@ -866,7 +863,12 @@ export class VaultDialog extends Component {
                 icon="fingerprint"
                 width="100%"
                 title="Biometric unlocking"
-                type={this.state.biometricUnlock ? "transparent" : "gray"}
+                iconColor={
+                  this.state.biometricUnlock
+                    ? colors.selected.icon
+                    : colors.primary.icon
+                }
+                type={this.state.biometricUnlock ? "transparent" : "selected"}
               />
             ) : null}
           </View>

apps/mobile/app/components/exception-handler/index.tsx

@@ -39,9 +39,9 @@ class ExceptionHandler extends React.Component<{
     error: Error | null;
     hasError: boolean;
   } = {
-    hasError: false,
-    error: null
-  };
+      hasError: false,
+      error: null
+    };
   static getDerivedStateFromError(error: Error) {
     return { hasError: true, error: error };
   }
@@ -69,7 +69,7 @@ class ExceptionHandler extends React.Component<{
               this.props.component
             )}
             defaultTitle={this.state.error?.message}
-            issueTitle="An exception occured"
+            issueTitle="An exception occurred"
           />
           <Dialog />
         </SafeAreaView>