mobile: fix notebook-sheet position

this utility resolves attachments & internal links

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

@@ -5,7 +5,7 @@ runs:
   using: "composite"
   steps:
     - name: Setup Node
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: 20.x
         cache: "npm"

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

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

.github/workflows/android.publish.yml

@@ -1,4 +1,4 @@
-name: Publish @notesnook/mobile
+name: Publish @notesnook/android
 
 on: workflow_dispatch
 
@@ -6,6 +6,11 @@ jobs:
   build:
     runs-on: ubuntu-latest
     timeout-minutes: 40
+    env:
+      CMAKE_C_COMPILER_LAUNCHER: ccache
+      CMAKE_CXX_COMPILER_LAUNCHER: ccache
+      NDK_CCACHE: ccache
+      USE_CCACHE: 1
 
     steps:
       - name: Checkout
@@ -28,29 +33,65 @@ jobs:
       - name: Make Gradlew Executable
         run: cd apps/mobile/native/android && chmod +x ./gradlew
 
+      - name: Install CCache
+        uses: hendrikmuhs/ccache-action@v1.2.11
+        with:
+          key: ${{ runner.os }}-ccache-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
+          max-size: 1500M
+          restore-keys: |
+            ${{ runner.os }}-ccache-
+
+      - name: Setup CCache
+        run: |
+          ln -s $(which ccache) /usr/local/bin/gcc
+          ln -s $(which ccache) /usr/local/bin/g++
+          ln -s $(which ccache) /usr/local/bin/cc
+          ln -s $(which ccache) /usr/local/bin/c++
+          ln -s $(which ccache) /usr/local/bin/clang
+          ln -s $(which ccache) /usr/local/bin/clang++
+          ccache --set-config=base_dir=$PWD
+          ccache --set-config=inode_cache=true
+          ccache --set-config=compiler_check=content
+          ccache --set-config=depend_mode=true
+          ccache --set-config=file_clone=true
+          ccache --set-config=sloppiness=clang_index_store,file_stat_matches,include_file_ctime,include_file_mtime,ivfsoverlay,pch_defines,modules,system_headers,time_macros
+          ccache -p
+
+      - name: Cache gradle
+        uses: actions/cache@v2
+        with:
+          path: |
+            ~/.gradle/caches
+            ~/.gradle/wrapper
+          key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
+
+      - name: Patch CPP Projects to use CCache
+        run: |
+          sed -i -e 's/arguments/arguments "-DCMAKE_CXX_COMPILER_LAUNCHER=ccache",/g' apps/mobile/node_modules/react-native-mmkv-storage/android/build.gradle
+          sed -i -e 's/arguments/arguments "-DCMAKE_CXX_COMPILER_LAUNCHER=ccache",/g' apps/mobile/node_modules/react-native-reanimated/android/build.gradle
+          sed -i -e 's/defaultConfig {/ndkVersion safeExtGet('ndkVersion', "25.2.9519653")\n  defaultConfig {/g' apps/mobile/node_modules/react-native-reanimated//android/build.gradle
+          sed -i -e 's/defaultConfig {/ndkVersion safeExtGet('ndkVersion', "25.2.9519653")\n  defaultConfig {/g' apps/mobile/node_modules/react-native-mmkv-storage/android/build.gradle
+
+      - name: CCache Stats Before Build
+        run: ccache -sv
+
       - name: Build unsigned app bundle
         run: yarn release:android:bundle
 
+      - name: CCache Stats after build
+        run: ccache -sv
+
       - name: Sign app bundle for Playstore release
         id: sign_app
-        uses: r0adkll/sign-android-release@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 }}
-
-      - name: Publish to Playstore
-        id: deploy
-        uses: r0adkll/upload-google-play@v1.1.1
-        with:
-          serviceAccountJsonPlainText: ${{ secrets.SERVICE_ACCOUNT_JSON }}
-          packageName: com.streetwriters.notesnook
-          releaseFiles: ${{steps.sign_app.outputs.signedReleaseFile}}
-          track: production
-          status: completed
-          whatsNewDirectory: apps/mobile/native/android/releasenotes/
+        env:
+          BUILD_TOOLS_VERSION: "33.0.0"
 
       - name: Build apks for Github release
         run: yarn release:android
@@ -64,6 +105,8 @@ jobs:
           alias: ${{ secrets.PUBLIC_ALIAS }}
           keyStorePassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
           keyPassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
+        env:
+          BUILD_TOOLS_VERSION: "33.0.0"
 
       - name: Rename apk files
         run: |
@@ -79,6 +122,18 @@ jobs:
         with:
           path: apps/mobile
 
+      - name: Publish to Playstore
+        id: deploy
+        uses: r0adkll/upload-google-play@v1.1.1
+        with:
+          serviceAccountJsonPlainText: ${{ secrets.SERVICE_ACCOUNT_JSON }}
+          packageName: com.streetwriters.notesnook
+          releaseFiles: ${{steps.sign_app.outputs.signedReleaseFile}}
+          track: production
+          status: completed
+          whatsNewDirectory: apps/mobile/native/android/releasenotes/
+
+     
       - name: Create release draft on Github
         uses: softprops/action-gh-release@v1
         with:
@@ -92,3 +147,9 @@ jobs:
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-armeabi-v7a.apk
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86.apk
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86_64.apk
+
+      - name: Upload signed aab to Github
+        uses: actions/upload-artifact@v2
+        with:
+          name: Notesnook.aab
+          path: ${{steps.sign_app.outputs.signedReleaseFile}}

.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:
@@ -43,7 +58,7 @@ jobs:
         run: npx nx build:desktop @notesnook/web
 
       - name: Archive build artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: build
           path: apps/web/build/**/*
@@ -67,11 +82,13 @@ jobs:
           name: Notesnook Desktop v${{ steps.app_metadata.outputs.app_version }}
           tag_name: v${{ steps.app_metadata.outputs.app_version }}
           files: ./notesnook_build_v${{ steps.app_metadata.outputs.app_version }}.zip
+          prerelease: ${{ endsWith(steps.app_metadata.outputs.app_version, '-beta') }}
 
   build-macos:
     name: Build for macOS
     needs: build
-    runs-on: macos-12
+    if: inputs.build-mac
+    runs-on: macos-14
 
     steps:
       - name: Check out Git repository
@@ -80,6 +97,9 @@ jobs:
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
 
+      - name: Install setuptools
+        run: brew install python-setuptools
+
       - name: Setup notarization
         run: |
           mkdir -p ~/private_keys/
@@ -106,7 +126,7 @@ jobs:
           platform: "MAC_OS"
 
       - name: Download build
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: build
           path: ./apps/web/build
@@ -127,7 +147,7 @@ jobs:
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
         run: |
           npx nx run release --project @notesnook/desktop -- --variant=mas
-          npx electron-builder --mac mas --universal -p never
+          yarn electron-builder --mac mas --universal -p never
         working-directory: ./apps/desktop
 
       - name: Build zip and dmg
@@ -137,13 +157,13 @@ jobs:
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
           APPLE_API_KEY: ~/private_keys/AuthKey_${{ secrets.api_key_id }}.p8
           APPLE_API_KEY_ID: ${{ secrets.api_key_id }}
-          APPLE_API_KEY_ISSUER: ${{ secrets.api_key_issuer_id }}
+          APPLE_API_ISSUER: ${{ secrets.api_key_issuer_id }}
         run: |
           npx nx run release --project @notesnook/desktop
           if [ ${{ inputs.publish-github }} == true ]; then
-            npx electron-builder --mac zip dmg --arm64 --x64 -p always
+            yarn electron-builder --mac zip dmg --arm64 --x64 -p always
           else
-            npx electron-builder --mac zip dmg --arm64 --x64 -p never
+            yarn electron-builder --mac zip dmg --arm64 --x64 -p never
           fi
         working-directory: ./apps/desktop
 
@@ -163,6 +183,7 @@ jobs:
   build-linux:
     name: Build for Linux
     needs: build
+    if: inputs.build-linux
     runs-on: ubuntu-22.04
 
     steps:
@@ -181,7 +202,7 @@ jobs:
         if: inputs.publish-snap
 
       - name: Download build
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: build
           path: ./apps/web/build
@@ -198,7 +219,7 @@ jobs:
       - name: Build snap
         if: inputs.publish-snap
         run: |
-          npx electron-builder --linux snap:x64 -p never
+          yarn electron-builder --linux snap:x64 -p never
         working-directory: ./apps/desktop
 
       - name: Build AppImage
@@ -206,9 +227,9 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           if [ ${{ inputs.publish-github }} == true ]; then
-            npx electron-builder --linux AppImage:x64 AppImage:arm64 -p always
+            yarn electron-builder --linux AppImage:x64 AppImage:arm64 -p always
           else
-            npx electron-builder --linux AppImage:x64 AppImage:arm64 -p never
+            yarn electron-builder --linux AppImage:x64 AppImage:arm64 -p never
           fi
         working-directory: ./apps/desktop
 
@@ -221,17 +242,27 @@ 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 TrustedSigning
+        run: Install-Module -Name TrustedSigning -RequiredVersion 0.3.15 -Force -Repository PSGallery
+        shell: pwsh
+
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
 
       - name: Download build
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: build
           path: ./apps/web/build
@@ -247,6 +278,9 @@ jobs:
       - 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

.github/workflows/ios.publish.yml

@@ -0,0 +1,104 @@
+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: ccache
+        uses: hendrikmuhs/ccache-action@v1.2.11
+        with:
+          key: ${{ runner.os }}-ccache-${{ hashFiles(format('apps/mobile/native/ios/Podfile.lock')) }}
+          max-size: 1500M
+          restore-keys: |
+            ${{ runner.os }}-ccache-
+
+      - name: Setup ccache
+        run: |
+          ccache --set-config=base_dir=$PWD
+          ccache --set-config=inode_cache=true
+          ccache --set-config=compiler_check=content
+          ccache --set-config=depend_mode=true
+          ccache --set-config=file_clone=true
+          ccache --set-config=sloppiness=clang_index_store,file_stat_matches,include_file_ctime,include_file_mtime,ivfsoverlay,pch_defines,modules,system_headers,time_macros
+          ln -s $(which ccache) /usr/local/bin/gcc
+          ln -s $(which ccache) /usr/local/bin/g++
+          ln -s $(which ccache) /usr/local/bin/cc
+          ln -s $(which ccache) /usr/local/bin/c++
+          ln -s $(which ccache) /usr/local/bin/clang
+          ln -s $(which ccache) /usr/local/bin/clang++
+          ccache -p
+
+      - name: Cache Pods
+        uses: actions/cache@v2
+        id: pods-cache
+        with:
+          path: apps/mobile/native/ios/Pods
+          key: ${{ runner.os }}-pods-${{ hashFiles('apps/mobile/native/ios/Podfile.lock') }}
+
+      - name: Install Pods
+        run: npm run prepare:ios
+
+      - name: CCache Stats Before Build
+        run: ccache -sv
+
+      - name: Build iOS App
+        uses: ammarahm-ed/ios-build-action@master
+        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: CCache Stats After Build
+        run: ccache -sv
+
+      - 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 Notesnook.ipa to Github
+        uses: actions/upload-artifact@v2
+        with:
+          name: Notesnook.ipa
+          path: Notesnook.ipa

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

@@ -1,10 +1,11 @@
 name: Publish @notesnook/web Beta
 
-on: 
+on:
   workflow_dispatch:
   push:
     branches:
       - master
+      - "!v3-beta"
     paths-ignore:
       - "apps/mobile/**"
       - "packages/editor-mobile/**"
@@ -22,6 +23,7 @@ on:
       - synchronize
     branches:
       - master
+      - "!v3-beta"
     paths-ignore:
       - "apps/mobile/**"
       - "packages/editor-mobile/**"

.github/workflows/web.tests.yml

@@ -67,7 +67,7 @@ jobs:
       - name: Install packages
         run: |
           npm ci --ignore-scripts --prefer-offline --no-audit
-          npm install -D @playwright/test otplib
+          npm install -D @playwright/test otplib dayjs @zip.js/zip.js
 
       - name: Validate build extraction
         run: ls -ld ./apps/web/build/index.html

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

@@ -0,0 +1,32 @@
+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: Build
+        run: npm run build:web
+
+      - name: Publish to Cloudflare Pages
+        run: npx --yes wrangler pages deploy --project-name=notesnook-v3-beta ./apps/web/build/

.gitignore

@@ -9,4 +9,5 @@ nx-cloud.env
 .env.local
 .nyc_output
 site
-node_modules.backup
+node_modules.backup
+.nx

.prettierignore

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

apps/desktop/.gitignore

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

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "2.6.13",
+  "version": "3.0.0",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/index.js",
@@ -14,9 +14,11 @@
     "@notesnook/crypto": "file:../../packages/crypto",
     "@trpc/client": "10.38.3",
     "@trpc/server": "10.38.3",
+    "better-sqlite3-multiple-ciphers": "^9.5.0",
     "electron-trpc": "0.5.2",
     "electron-updater": "6.1.4",
     "icojs": "^0.17.1",
+    "sodium-native": "^4.1.1",
     "typed-emitter": "^2.1.0",
     "yargs": "^17.6.2",
     "zod": "^3.21.4"
@@ -25,12 +27,13 @@
     "@types/node": "18.16.1",
     "@types/yargs": "^17.0.24",
     "chokidar": "^3.5.3",
-    "electron": "25.9.8",
-    "electron-builder": "^24.9.1",
-    "electron-builder-notarize": "^1.5.1",
-    "esbuild": "^0.17.19",
+    "electron": "^29.3.1",
+    "electron-builder": "^24.13.3",
+    "esbuild": "^0.20.0",
+    "node-gyp-build": "^4.8.0",
+    "prebuildify": "^6.0.1",
     "tree-kill": "^1.2.2",
-    "undici": "^5.23.0"
+    "undici": "^6.14.1"
   },
   "optionalDependencies": {
     "dmg-license": "^1.0.11"
@@ -40,7 +43,7 @@
     "staging": "node scripts/build.mjs --run",
     "release": "node scripts/build.mjs",
     "build": "tsc",
-    "bundle": "esbuild electron=./src/main.ts ./src/preload.ts --external:electron --external:fsevents --minify --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=false --define:RELEASE=true",
+    "bundle": "esbuild electron=./src/main.ts ./src/preload.ts --external:electron --external:fsevents --external:better-sqlite3-multiple-ciphers --external:sodium-native --minify --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=false --define:RELEASE=true",
     "bundle:mas": "esbuild electron=./src/main.ts ./src/preload.ts --minify --external:electron --external:fsevents --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=true --define:RELEASE=true",
     "postinstall": "patch-package"
   },
@@ -54,7 +57,7 @@
     "productName": "Notesnook",
     "copyright": "Copyright © 2023 Streetwriters (Private) Limited",
     "artifactName": "notesnook_${os}_${arch}.${ext}",
-    "npmRebuild": false,
+    "generateUpdatesFilesForAllChannels": true,
     "asar": false,
     "files": [
       "!*.chunk.js.map",
@@ -64,9 +67,17 @@
       "!build/banner.jpg",
       "!build/*.ico",
       "!build/*.png",
-      "!node_modules${/*}"
+      "!node_modules${/*}",
+      "node_modules/better-sqlite3-multiple-ciphers/build/Release/better_sqlite3.node",
+      "node_modules/better-sqlite3-multiple-ciphers/lib",
+      "node_modules/better-sqlite3-multiple-ciphers/package.json",
+      "node_modules/file-uri-to-path",
+      "node_modules/bindings",
+      "node_modules/node-gyp-build",
+      "node_modules/sodium-native/prebuilds/${platform}-${arch}",
+      "node_modules/sodium-native/index.js",
+      "node_modules/sodium-native/package.json"
     ],
-    "afterSign": "electron-builder-notarize",
     "afterPack": "./scripts/removeLocales.js",
     "mac": {
       "bundleVersion": "240",
@@ -94,7 +105,8 @@
       "entitlements": "assets/entitlements.mac.plist",
       "entitlementsInherit": "assets/entitlements.mac.plist",
       "gatekeeperAssess": false,
-      "icon": "assets/icons/app.icns"
+      "icon": "assets/icons/app.icns",
+      "notarize": true
     },
     "dmg": {
       "contents": [
@@ -135,6 +147,10 @@
           ]
         }
       ],
+      "signingHashAlgorithms": [
+        "sha256"
+      ],
+      "sign": "./scripts/sign.js",
       "icon": "assets/icons/app.ico"
     },
     "portable": {

apps/desktop/patches/node-gyp-build+4.8.0.patch

@@ -0,0 +1,46 @@
+diff --git a/node_modules/node-gyp-build/bin.js b/node_modules/node-gyp-build/bin.js
+index 3fbcdf0..7ca3ab5 100644
+--- a/node_modules/node-gyp-build/bin.js
++++ b/node_modules/node-gyp-build/bin.js
+@@ -16,7 +16,8 @@ if (!buildFromSource()) {
+ }
+ 
+ function build () {
+-  var args = [os.platform() === 'win32' ? 'node-gyp.cmd' : 'node-gyp', 'rebuild']
++  var win32 = os.platform() === 'win32'
++  var args = [win32 ? 'node-gyp.cmd' : 'node-gyp', 'rebuild']
+ 
+   try {
+     var pkg = require('node-gyp/package.json')
+@@ -27,7 +28,7 @@ function build () {
+     ]
+   } catch (_) {}
+ 
+-  proc.spawn(args[0], args.slice(1), { stdio: 'inherit' }).on('exit', function (code) {
++  proc.spawn(args[0], args.slice(1), { stdio: 'inherit', shell: win32, windowsHide: true }).on('exit', function (code) {
+     if (code || !process.argv[3]) process.exit(code)
+     exec(process.argv[3]).on('exit', function (code) {
+       process.exit(code)
+@@ -45,15 +46,18 @@ function preinstall () {
+ 
+ function exec (cmd) {
+   if (process.platform !== 'win32') {
+-    var shell = os.platform() === 'android' ? 'sh' : '/bin/sh'
+-    return proc.spawn(shell, ['-c', '--', cmd], {
++    var shell = os.platform() === 'android' ? 'sh' : true
++    return proc.spawn(cmd, [], {
++      shell,
+       stdio: 'inherit'
+     })
+   }
+ 
+-  return proc.spawn(process.env.comspec || 'cmd.exe', ['/s', '/c', '"' + cmd + '"'], {
++  return proc.spawn(cmd, [], {
+     windowsVerbatimArguments: true,
+-    stdio: 'inherit'
++    stdio: 'inherit',
++    shell: true,
++    windowsHide: true
+   })
+ }
+ 

apps/desktop/scripts/build.mjs

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

apps/desktop/scripts/dev.mjs

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

apps/desktop/scripts/sign.js

@@ -0,0 +1,59 @@
+/*
+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 } = require("fs");
+const { execSync } = require("child_process");
+const { relative, join } = require("path");
+
+module.exports = async function (configuration) {
+  if (process.env.NOTESNOOK_STAGING) return;
+
+  const Endpoint = "https://weu.codesigning.azure.net";
+  const CodeSigningAccountName = "Notesnook";
+  const CertificateProfileName = "Notesnook";
+  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-TrustedSigning -Endpoint "${Endpoint}" -CodeSigningAccountName "${CodeSigningAccountName}" -CertificateProfileName "${CertificateProfileName}" -FileDigest "${FileDigest}" -TimestampRfc3161 "${TimestampRfc3161}" -TimestampDigest "${TimestampDigest}" -Description "${Description}" -DescriptionUrl "${DescriptionUrl}" -FilesCatalog "${FilesCatalog}"`;
+
+  console.debug("Signing", configuration.path, "using command", command);
+
+  psexec(command);
+
+  console.debug("Signed", configuration.path);
+
+  rmSync(FilesCatalog);
+};
+
+function createCatalog(path) {
+  const catalogPath = join(__dirname, "_catalog");
+  writeFileSync(catalogPath, relative(__dirname, path));
+  return catalogPath;
+}
+
+function psexec(cmd) {
+  return execSync(cmd, {
+    env: process.env,
+    stdio: "inherit",
+    shell: "pwsh"
+  });
+}

apps/desktop/src/api/index.ts

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

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

@@ -31,6 +31,7 @@ import { observable } from "@trpc/server/observable";
 import { AssetManager } from "../utils/asset-manager";
 import { isFlatpak } from "../utils";
 import { setupDesktopIntegration } from "../utils/desktop-integration";
+import { rm } from "fs/promises";
 
 const t = initTRPC.create();
 
@@ -54,6 +55,14 @@ export const osIntegrationRouter = t.router({
     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.object({ enabled: z.boolean() }))
@@ -126,10 +135,13 @@ export const osIntegrationRouter = t.router({
     .input(z.object({ filePath: z.string() }))
     .query(({ input }) => {
       const { filePath } = input;
-      if (!filePath) return;
       return resolvePath(filePath);
     }),
 
+  deleteFile: t.procedure.input(z.string()).query(async ({ input }) => {
+    await rm(input);
+  }),
+
   showNotification: t.procedure
     .input(NotificationOptions)
     .query(({ input }) => {
@@ -158,16 +170,42 @@ export const osIntegrationRouter = t.router({
     }),
   bringToFront: t.procedure.query(() => bringToFront()),
   changeTheme: t.procedure
-    .input(Theme)
-    .mutation(({ input }) => setTheme(input)),
+    .input(
+      z.object({
+        theme: Theme,
+        windowControlsIconColor: z.string().optional(),
+        backgroundColor: z.string().optional()
+      })
+    )
+    .mutation(
+      ({ input: { theme, windowControlsIconColor, backgroundColor } }) => {
+        if (windowControlsIconColor) {
+          config.windowControlsIconColor = windowControlsIconColor;
+          if (process.platform === "win32")
+            globalThis.window?.setTitleBarOverlay({
+              symbolColor: windowControlsIconColor
+            });
+        }
+
+        if (backgroundColor) {
+          config.backgroundColor = backgroundColor;
+        }
+
+        setTheme(theme);
+      }
+    ),
 
   onThemeChanged: t.procedure.subscription(() =>
     observable<"dark" | "light">((emit) => {
-      nativeTheme.on("updated", () => {
+      const updated = () => {
         if (getTheme() === "system") {
           emit.next(nativeTheme.shouldUseDarkColors ? "dark" : "light");
         }
-      });
+      };
+      nativeTheme.on("updated", updated);
+      return () => {
+        nativeTheme.off("updated", updated);
+      };
     })
   )
 });

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

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

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

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

apps/desktop/src/api/updater.ts

@@ -28,16 +28,20 @@ type UpdateInfo = { version: string };
 type Progress = { percent: number };
 
 const t = initTRPC.create();
+let cancellationToken: CancellationToken | undefined = undefined;
 
 export const updaterRouter = t.router({
   autoUpdates: t.procedure.query(() => config.automaticUpdates),
   install: t.procedure.query(() => autoUpdater.quitAndInstall()),
   download: t.procedure.query(async () => {
-    const cancellationToken = new CancellationToken();
-    await autoUpdater.downloadUpdate(cancellationToken);
+    if (cancellationToken) return;
+    cancellationToken = new CancellationToken();
+    await autoUpdater
+      .downloadUpdate(cancellationToken)
+      .finally(() => (cancellationToken = undefined));
   }),
   check: t.procedure.query(async () => {
-    await autoUpdater.checkForUpdates();
+    await autoUpdater.checkForUpdates().catch(console.error);
   }),
 
   toggleAutoUpdates: t.procedure
@@ -71,6 +75,7 @@ function createSubscription<
       const listener: AppUpdaterEvents[TName] = (...args: any[]) => {
         emit.next(args[0]);
       };
+      autoUpdater.removeAllListeners(eventName);
       autoUpdater.addListener(eventName, listener);
       return () => {
         autoUpdater.removeListener(eventName, listener);

apps/desktop/src/api/window.ts

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

apps/desktop/src/main.ts

@@ -82,6 +82,19 @@ async function createWindow() {
       size: 512,
       format: process.platform === "win32" ? "ico" : "png"
     }),
+
+    titleBarStyle: "hidden",
+    frame: process.platform === "win32" || process.platform === "darwin",
+    titleBarOverlay: {
+      height: 37,
+      color: "#00000000",
+      symbolColor: config.windowControlsIconColor
+    },
+    trafficLightPosition: {
+      x: 16,
+      y: 12
+    },
+
     webPreferences: {
       zoomFactor: config.zoomFactor,
       nodeIntegration: true,
@@ -112,6 +125,7 @@ async function createWindow() {
   mainWindow.webContents.session.setSpellCheckerDictionaryDownloadURL(
     "http://dictionaries.notesnook.com/"
   );
+  mainWindow.webContents.session.setProxy({ proxyRules: config.proxyRules });
 
   mainWindow.once("closed", () => {
     globalThis.window = null;
@@ -121,7 +135,7 @@ async function createWindow() {
   setupJumplist();
 
   if (isDevelopment())
-    mainWindow.webContents.openDevTools({ mode: "right", activate: true });
+    mainWindow.webContents.openDevTools({ mode: "bottom", activate: true });
 
   mainWindow.webContents.setWindowOpenHandler((details) => {
     shell.openExternal(details.url);
@@ -137,6 +151,15 @@ async function createWindow() {
 app.once("ready", async () => {
   console.info("App ready. Opening window.");
 
+  app.configureHostResolver({
+    secureDnsServers: [
+      "https://mozilla.cloudflare-dns.com/dns-query",
+      "https://dns.quad9.net/dns-query"
+    ],
+    enableBuiltInResolver: true,
+    secureDnsMode: "automatic"
+  });
+
   if (!isDevelopment()) registerProtocol();
   await createWindow();
   configureAutoUpdater();

apps/desktop/src/preload.ts

@@ -23,11 +23,13 @@ import { type RendererGlobalElectronTRPC } from "electron-trpc/src/types";
 import type { NNCrypto } from "@notesnook/crypto";
 import { ipcRenderer } from "electron";
 import { platform } from "os";
+import sqlite3, { Database } from "better-sqlite3-multiple-ciphers";
 
 declare global {
   var os: () => "mas" | ReturnType<typeof platform>;
   var electronTRPC: RendererGlobalElectronTRPC;
   var NativeNNCrypto: (new () => NNCrypto) | undefined;
+  var createSQLite3Database: (filename: string) => Database;
 }
 
 process.once("loaded", async () => {
@@ -40,11 +42,6 @@ process.once("loaded", async () => {
   globalThis.electronTRPC = electronTRPC;
 });
 
-globalThis.NativeNNCrypto =
-  process.platform === "win32" &&
-  process.arch !== "x64" &&
-  process.arch !== "ia32"
-    ? undefined
-    : require("@notesnook/crypto").NNCrypto;
-
+globalThis.NativeNNCrypto = require("@notesnook/crypto").NNCrypto;
+globalThis.createSQLite3Database = (filename) => sqlite3(filename);
 globalThis.os = () => (MAC_APP_STORE ? "mas" : platform());

apps/desktop/src/utils/autolaunch.ts

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

apps/desktop/src/utils/autoupdater.ts

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

apps/desktop/src/utils/config.ts

@@ -41,7 +41,12 @@ export const config = {
   isSpellCheckerEnabled: true,
   zoomFactor: 1,
   theme: nativeTheme.themeSource,
-  automaticUpdates: true
+  automaticUpdates: true,
+  proxyRules: "",
+
+  backgroundColor: nativeTheme.themeSource === "dark" ? "#0f0f0f" : "#ffffff",
+  windowControlsIconColor:
+    nativeTheme.themeSource === "dark" ? "#ffffff" : "#000000"
 };
 
 type ConfigKey = keyof typeof config;

apps/desktop/src/utils/menu.ts

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

apps/desktop/src/utils/theme.ts

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

apps/mobile/app/app.tsx

@@ -16,15 +16,13 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import "@azure/core-asynciterator-polyfill";
 import "react-native-gesture-handler";
-import SettingsService from "./services/settings";
 import {
   THEME_COMPATIBILITY_VERSION,
   useThemeEngineStore
 } from "@notesnook/theme";
 import React, { useEffect } from "react";
-import { View } from "react-native";
+import { I18nManager, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import AppLockedOverlay from "./components/app-lock-overlay";
@@ -32,23 +30,16 @@ import { withErrorBoundry } from "./components/exception-handler";
 import GlobalSafeAreaProvider from "./components/globalsafearea";
 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 { themeTrpcClient } from "./screens/settings/theme-selector";
 
-// How app lock works
-// 1. User goes to settings and setup app lock with a Pin/Password.
-// 2. The Pin/Password is used to encrypt a random value or user's encryption key.
-// 3. The encrypted value is stored in MMKV
-// 4. When the app launches, the same value is decrypted with user provided key, if it works, we launch the app otherwise it remains locked.
-// 5. If Biometrics are enabled, the app lock pin/password is stored in keychain. the value can be accessed if fingerprint auth works ONLY.
-// 6. User can  manually enter the pin if biometrics fails.
-// 7. There is no way to enter the app if user forgets the PIN. The only way is to reset app data and start fresh again.
-
-// How to handle app lock for existing users...
-// 1.
+I18nManager.allowRTL(false);
+I18nManager.forceRTL(false);
+I18nManager.swapLeftAndRightInRTL(false);
 
 const App = () => {
   const init = useAppEvents();

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

@@ -21,9 +21,10 @@ import Sodium from "@ammarahmed/react-native-sodium";
 import { Platform } from "react-native";
 import "react-native-get-random-values";
 import * as Keychain from "react-native-keychain";
+import { MMKVLoader, ProcessingModes } from "react-native-mmkv-storage";
 import { generateSecureRandom } from "react-native-securerandom";
+import { DatabaseLogger } from ".";
 import { MMKV } from "./mmkv";
-import { ProcessingModes, MMKVLoader } from "react-native-mmkv-storage";
 
 // Database key cipher is persisted across different user sessions hence it has
 // it's independent storage which we will never clear. This is only used when application has
@@ -42,6 +43,14 @@ const IOS_KEYCHAIN_ACCESS_GROUP = "group.org.streetwriters.notesnook";
 const IOS_KEYCHAIN_SERVICE_NAME = "org.streetwriters.notesnook";
 const KEYCHAIN_SERVER_DBKEY = "notesnook:db";
 
+const NOTESNOOK_APPLOCK_KEY_SALT = "3dqclWbOYllfk9kk";
+const NOTESNOOK_DB_KEY_SALT = "2rcgSprDmRvZ1AAa";
+const NOTESNOOK_USER_KEY_SALT = "7qO4qeoM6PbsAJ0Q";
+
+const DB_KEY_CIPHER = "databaseKeyCipher";
+const USER_KEY_CIPHER = "userKeyCipher";
+const APPLOCK_CIPHER = "applockCipher";
+
 const KEYSTORE_CONFIG = Platform.select({
   ios: {
     accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED_THIS_DEVICE_ONLY,
@@ -73,17 +82,17 @@ export async function encryptDatabaseKeyWithPassword(appLockPassword) {
   const key = getDatabaseKey();
   const appLockCredentials = await Sodium.deriveKey(
     appLockPassword,
-    "notesnook_applock_key"
+    NOTESNOOK_APPLOCK_KEY_SALT
   );
   const databaseKeyCipher = await encrypt(appLockCredentials, key);
-  MMKV.setMap("databaseKeyCipher", databaseKeyCipher);
+  MMKV.setMap(DB_KEY_CIPHER, databaseKeyCipher);
   // We reset the database key from keychain once app lock password is set.
-  await Keychain.resetInternetCredentials("notesnook:db");
+  await Keychain.resetInternetCredentials(KEYCHAIN_SERVER_DBKEY);
   return true;
 }
 
 export async function restoreDatabaseKeyToKeyChain(appLockPassword) {
-  const databaseKeyCipher = CipherStorage.getMap("databaseKeyCipher");
+  const databaseKeyCipher = CipherStorage.getMap(DB_KEY_CIPHER);
   const databaseKey = await decrypt(
     {
       password: appLockPassword
@@ -97,42 +106,46 @@ export async function restoreDatabaseKeyToKeyChain(appLockPassword) {
     databaseKey,
     KEYSTORE_CONFIG
   );
-  MMKV.removeItem("databaseKeyCipher");
+  MMKV.removeItem(DB_KEY_CIPHER);
   return true;
 }
 
 export async function setAppLockVerificationCipher(appLockPassword) {
   try {
-    console.log("key", appLockPassword);
     const appLockCredentials = await Sodium.deriveKey(
       appLockPassword,
-      "notesnook_applock_key_salt"
+      NOTESNOOK_APPLOCK_KEY_SALT
     );
-    const encrypted = await encrypt(appLockCredentials, "applock_password");
+    const encrypted = await encrypt(appLockCredentials, generatePassword());
 
-    CipherStorage.setMap("appLockCipher", encrypted);
+    CipherStorage.setMap(APPLOCK_CIPHER, encrypted);
+
+    DatabaseLogger.info("setAppLockVerificationCipher");
   } catch (e) {
+    DatabaseLogger.error(e);
     console.log(e);
   }
 }
 
 export async function clearAppLockVerificationCipher() {
-  CipherStorage.removeItem("appLockCipher");
+  CipherStorage.removeItem(APPLOCK_CIPHER);
 }
 
 export async function validateAppLockPassword(appLockPassword) {
   try {
-    const appLockCipher = CipherStorage.getMap("appLockCipher");
+    const appLockCipher = CipherStorage.getMap(APPLOCK_CIPHER);
     if (!appLockCipher) return true;
     const decrypted = await decrypt(
-      {
-        password: appLockPassword
-      },
+      await Sodium.deriveKey(appLockPassword, NOTESNOOK_APPLOCK_KEY_SALT),
       appLockCipher
     );
-    return decrypted === "applock_password";
+
+    DatabaseLogger.info(
+      `validateAppLockPassword: ${typeof decrypted === "string"}`
+    );
+    return typeof decrypted === "string";
   } catch (e) {
-    console.error(e);
+    DatabaseLogger.error(e);
     return false;
   }
 }
@@ -140,6 +153,7 @@ export async function validateAppLockPassword(appLockPassword) {
 let DB_KEY;
 export function clearDatabaseKey() {
   DB_KEY = undefined;
+  DatabaseLogger.info("Cleared database key");
 }
 
 export async function getDatabaseKey(appLockPassword) {
@@ -153,104 +167,124 @@ export async function getDatabaseKey(appLockPassword) {
         },
         databaseKeyCipher
       );
-      console.log("Getting database key from cipher");
+      DatabaseLogger.info("Getting database key from cipher");
       DB_KEY = databaseKey;
-      return databaseKey;
     }
 
-    const hasKey = await Keychain.hasInternetCredentials(KEYCHAIN_SERVER_DBKEY);
-    if (hasKey) {
-      let credentials = await Keychain.getInternetCredentials(
+    if (!DB_KEY) {
+      const hasKey = await Keychain.hasInternetCredentials(
+        KEYCHAIN_SERVER_DBKEY
+      );
+      if (hasKey) {
+        let credentials = await Keychain.getInternetCredentials(
+          KEYCHAIN_SERVER_DBKEY,
+          KEYSTORE_CONFIG
+        );
+
+        DatabaseLogger.info("Getting database key from Keychain");
+        DB_KEY = credentials.password;
+      }
+    }
+
+    if (!DB_KEY) {
+      DatabaseLogger.info("Generating new database key");
+      const password = generatePassword();
+      const derivedDatabaseKey = await Sodium.deriveKey(
+        password,
+        NOTESNOOK_DB_KEY_SALT
+      );
+
+      DB_KEY = derivedDatabaseKey.key;
+
+      await Keychain.setInternetCredentials(
         KEYCHAIN_SERVER_DBKEY,
+        "notesnook",
+        DB_KEY,
         KEYSTORE_CONFIG
       );
-      console.log("Getting database key from Keychain");
-      DB_KEY = credentials.password;
-      return credentials.password;
     }
-    console.log("Generating new database key");
-    const password = generatePassword();
-    const derivedDatabaseKey = await Sodium.deriveKey(
-      password,
-      "notesnook_database_key"
-    );
-    await Keychain.setInternetCredentials(
-      KEYCHAIN_SERVER_DBKEY,
-      "notesnook",
-      derivedDatabaseKey.key,
-      KEYSTORE_CONFIG
-    );
 
-    const userKeyCredentials = await Keychain.getInternetCredentials(
-      "notesnook",
-      KEYSTORE_CONFIG
-    );
-
-    if (userKeyCredentials) {
-      const userKeyCipher = await encrypt(
-        {
-          key: derivedDatabaseKey.key
-        },
-        userKeyCredentials.password
+    if (await Keychain.hasInternetCredentials("notesnook")) {
+      const userKeyCredentials = await Keychain.getInternetCredentials(
+        "notesnook",
+        KEYSTORE_CONFIG
       );
-      // Store encrypted user key in MMKV
-      MMKV.setMap("userKeyCipher", userKeyCipher);
-      await Keychain.resetInternetCredentials("notesnook");
-      console.log("Migrated user credentials to cipher");
+
+      if (userKeyCredentials) {
+        const userKeyCipher = await encrypt(
+          {
+            key: DB_KEY,
+            salt: NOTESNOOK_USER_KEY_SALT
+          },
+          userKeyCredentials.password
+        );
+        // Store encrypted user key in MMKV
+        MMKV.setMap(USER_KEY_CIPHER, userKeyCipher);
+        await Keychain.resetInternetCredentials("notesnook");
+      }
+      DatabaseLogger.info("Migrated user credentials to cipher storage");
     }
 
-    DB_KEY = derivedDatabaseKey.key;
-
-    return derivedDatabaseKey.key;
+    return DB_KEY;
   } catch (e) {
-    console.log(e);
+    console.log(e, "error");
+    DatabaseLogger.error(e);
     return null;
   }
 }
 
-export async function deriveCryptoKey(name, data) {
+export async function deriveCryptoKey(data) {
   try {
     let credentials = await Sodium.deriveKey(data.password, data.salt);
-
     const userKeyCipher = await encrypt(
       {
-        key: await getDatabaseKey()
+        key: await getDatabaseKey(),
+        salt: NOTESNOOK_USER_KEY_SALT
       },
       credentials.key
     );
+    DatabaseLogger.info("User key stored: ", !!userKeyCipher);
+
     // Store encrypted user key in MMKV
-    MMKV.setMap("userKeyCipher", userKeyCipher);
+    MMKV.setMap(USER_KEY_CIPHER, userKeyCipher);
     return credentials.key;
   } catch (e) {
-    console.error(e);
+    DatabaseLogger.error(e);
   }
 }
 
 export async function getCryptoKey(_name) {
   try {
-    const keyCipher = MMKV.getMap("userKeyCipher");
-    if (!key) return null;
+    const keyCipher = MMKV.getMap(USER_KEY_CIPHER);
 
-    const key = decrypt(
+    if (!keyCipher) {
+      DatabaseLogger.info("User key cipher is null");
+      return null;
+    }
+
+    const key = await decrypt(
       {
         key: await getDatabaseKey()
       },
       keyCipher
     );
 
+    DatabaseLogger.info("User key decrypted: ", !!key);
+
     return key;
   } catch (e) {
-    console.error(e);
+    console.log("getCryptoKey", e);
+    DatabaseLogger.error(e);
   }
 }
 
 export async function removeCryptoKey(_name) {
   try {
-    MMKV.removeItem("userKeyCipher");
+    MMKV.removeItem(USER_KEY_CIPHER);
     await Keychain.resetInternetCredentials("notesnook");
     return true;
   } catch (e) {
-    console.error(e);
+    DatabaseLogger.error(e);
   }
 }
 
@@ -268,7 +302,7 @@ export async function generateCryptoKey(password, salt) {
     let credentials = await Sodium.deriveKey(password, salt || null);
     return credentials;
   } catch (e) {
-    console.log("generateCryptoKey: ", e);
+    DatabaseLogger.error(e);
   }
 }
 
@@ -282,6 +316,8 @@ export async function decrypt(password, data) {
     return undefined;
   let _data = { ...data };
   _data.output = "plain";
+
+  if (!password.salt) password.salt = data.salt;
   return await Sodium.decrypt(password, _data);
 }
 
@@ -294,6 +330,11 @@ export async function decryptMulti(password, data) {
     d.output = "plain";
     return d;
   });
+
+  if (data.length && !password.salt) {
+    password.salt = data[0].salt;
+  }
+
   return await Sodium.decryptMulti(password, data);
 }
 

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

@@ -32,16 +32,16 @@ import { getDatabaseKey } from "./encryption";
 database.host(
   __DEV__
     ? {
-        // API_HOST: "https://api.notesnook.com",
-        // AUTH_HOST: "https://auth.streetwriters.co",
-        // SSE_HOST: "https://events.streetwriters.co",
-        // SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
-        // ISSUES_HOST: "https://issues.streetwriters.co"
-        API_HOST: "http://192.168.43.5:5264",
-        AUTH_HOST: "http://192.168.43.5:8264",
-        SSE_HOST: "http://192.168.43.5:7264",
-        SUBSCRIPTIONS_HOST: "http://192.168.43.5:9264",
-        ISSUES_HOST: "http://192.168.43.5:2624"
+        API_HOST: "https://api.notesnook.com",
+        AUTH_HOST: "https://auth.streetwriters.co",
+        SSE_HOST: "https://events.streetwriters.co",
+        SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
+        ISSUES_HOST: "https://issues.streetwriters.co"
+        // API_HOST: "http://192.168.43.5:5264",
+        // AUTH_HOST: "http://192.168.43.5:8264",
+        // SSE_HOST: "http://192.168.43.5:7264",
+        // SUBSCRIPTIONS_HOST: "http://192.168.43.5:9264",
+        // ISSUES_HOST: "http://192.168.43.5:2624"
       }
     : {
         API_HOST: "https://api.notesnook.com",
@@ -57,7 +57,8 @@ export async function setupDatabase(password) {
   if (!key)
     throw new Error("Database setup failed, could not get database key");
 
-  console.log("Opening database with key:", key);
+  console.log("Opening database with key:", !!key);
+
   database.setup({
     storage: Storage,
     eventsource: Platform.OS === "ios" ? EventSource : AndroidEventSource,
@@ -77,6 +78,7 @@ export async function setupDatabase(password) {
         createQueryCompiler: () => new SqliteQueryCompiler()
       }),
       tempStore: "memory",
+      journalMode: Platform.OS === "ios" ? "DELETE" : "WAL",
       password: key
     }
   });

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

@@ -106,9 +106,9 @@ class RNSqliteConnection implements DatabaseConnection {
         : query.kind === "RawNode"
         ? "raw"
         : "exec";
+
     const result = await this.db.executeAsync(sql, parameters as any[]);
 
-    // console.log("SQLITE result:", result?.rows?._array);
     if (mode === "query" || !result.insertId)
       return {
         rows: result.rows?._array || []

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

@@ -91,7 +91,8 @@ export class KV {
   }
 
   async removeMulti(keys) {
-    return this.storage.removeItems(...keys);
+    if (!keys) return true;
+    return this.storage.removeItems(keys);
   }
 
   async clear() {

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

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

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

@@ -31,10 +31,11 @@ import RNFetchBlob from "react-native-blob-util";
 import { ShareComponent } from "../../components/sheets/export-notes/share";
 import { ToastManager, presentSheet } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { db } from "../database";
+import { DatabaseLogger, db } from "../database";
 import Storage from "../database/storage";
 import { cacheDir, copyFileAsync, releasePermissions } from "./utils";
-import { createCacheDir } from "./io";
+import { createCacheDir, exists } from "./io";
+import { IOS_APPGROUPID } from "../../utils/constants";
 
 export const FileDownloadStatus = {
   Success: 1,
@@ -83,8 +84,10 @@ export async function downloadAttachments(
     Platform.OS === "ios"
       ? `${outputFolder}/notesnook-attachments-${Date.now()}.zip`
       : `${cacheDir}/notesnook-attachments.zip`;
-  if (await RNFetchBlob.fs.exists(zipSourceFolder))
+  if (await RNFetchBlob.fs.exists(zipSourceFolder)) {
     await RNFetchBlob.fs.unlink(zipSourceFolder);
+  }
+
   await RNFetchBlob.fs.mkdir(zipSourceFolder);
 
   for (let i = 0; i < attachments.length; i++) {
@@ -126,7 +129,7 @@ export async function downloadAttachments(
         status: FileDownloadStatus.Fail,
         reason: e
       });
-      console.log("Error downloading attachment", e);
+      ToastManager.error(e, "Error downloading attachment");
     }
   }
   if (canceled.current) {
@@ -163,7 +166,7 @@ export async function downloadAttachments(
     } catch (e) {
       releasePermissions(outputFolder);
       sub?.remove();
-      console.log("Error zipping attachments", e);
+      ToastManager.error(e, "Error zipping attachments");
     }
     // Remove source & zip file from cache.
     RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
@@ -182,14 +185,16 @@ export default async function downloadAttachment(
     silent: false,
     cache: false,
     throwError: false,
-    groupId: undefined
+    groupId: undefined,
+    base64: false,
+    text: false
   }
 ) {
   await createCacheDir();
 
   let attachment = await db.attachments.attachment(hash);
   if (!attachment) {
-    console.log("attachment not found");
+    DatabaseLogger.log("Attachment not found");
     return;
   }
 
@@ -204,16 +209,26 @@ export default async function downloadAttachment(
   }
 
   try {
-    console.log(
-      "starting download attachment",
-      attachment.hash,
-      options.groupId
-    );
     await db
       .fs()
       .downloadFile(options.groupId || attachment.hash, attachment.hash);
-    if (!(await RNFetchBlob.fs.exists(`${cacheDir}/${attachment.hash}`)))
+    if (!(await exists(attachment.hash))) {
+      DatabaseLogger.log("Attachment does not exist after download.");
       return;
+    }
+
+    if (options.base64 || options.text) {
+      console.log(
+        "starting decrypt base64 file...",
+        options.base64,
+        options.text,
+        attachment.hash
+      );
+      return await db.attachments.read(
+        attachment.hash,
+        options.base64 ? "base64" : "text"
+      );
+    }
 
     let filename = getFileNameWithExtension(
       attachment.filename,
@@ -221,6 +236,7 @@ export default async function downloadAttachment(
     );
 
     let key = await db.attachments.decryptKey(attachment.key);
+
     let info = {
       iv: attachment.iv,
       salt: attachment.salt,
@@ -231,9 +247,9 @@ export default async function downloadAttachment(
       mime: attachment.mimeType,
       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(
       key,
       info,

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

@@ -29,13 +29,14 @@ import { createCacheDir, exists } from "./io";
 export async function downloadFile(filename, data, cancelToken) {
   if (!data) return false;
 
+  console.log("Downloading", filename);
   await createCacheDir();
-
   let { url, headers } = data;
   let path = `${cacheDir}/${filename}`;
 
   try {
     if (await exists(filename)) {
+      console.log("Exists already", filename);
       return true;
     }
 

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

@@ -17,13 +17,12 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Platform } from "react-native";
 import Sodium from "@ammarahmed/react-native-sodium";
+import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
-import { cacheDir, cacheDirOld, getRandomId } from "./utils";
-import { db } from "../database";
-import { compressToBase64 } from "./compress";
 import { IOS_APPGROUPID } from "../../utils/constants";
+import { db } from "../database";
+import { cacheDir, cacheDirOld, getRandomId } from "./utils";
 
 export async function readEncrypted(filename, key, cipherData) {
   await migrateFilesFromCache();
@@ -36,8 +35,6 @@ export async function readEncrypted(filename, key, cipherData) {
     }
 
     const attachment = await db.attachments.attachment(filename);
-    const isPng = /(png)/g.test(attachment?.mimeType);
-    const isJpeg = /(jpeg|jpg)/g.test(attachment?.mimeType);
     console.log("decrypting....");
     let output = await Sodium.decryptFile(
       key,
@@ -46,20 +43,9 @@ export async function readEncrypted(filename, key, cipherData) {
         hash: filename,
         appGroupId: IOS_APPGROUPID
       },
-      cipherData.outputType === "base64"
-        ? isPng || isJpeg
-          ? "cache"
-          : "base64"
-        : "text"
+      cipherData.outputType === "base64" ? "base64" : "text"
     );
-    console.log("file decrypted...");
-    if (cipherData.outputType === "base64" && (isPng || isJpeg)) {
-      const dCachePath = `${cacheDir}/${output}`;
-      output = await compressToBase64(
-        `file://${dCachePath}`,
-        isPng ? "PNG" : "JPEG"
-      );
-    }
+    console.log("file decrypted...", attachment?.mimeType);
 
     return output;
   } catch (e) {
@@ -81,7 +67,7 @@ export async function hashBase64(data) {
   };
 }
 
-export async function writeEncryptedBase64({ data, key }) {
+export async function writeEncryptedBase64(data, key) {
   await createCacheDir();
   let filepath = cacheDir + `/${getRandomId("imagecache_")}`;
   await RNFetchBlob.fs.writeFile(filepath, data, "base64");
@@ -91,6 +77,8 @@ export async function writeEncryptedBase64({ data, key }) {
   });
   RNFetchBlob.fs.unlink(filepath).catch(console.log);
   console.log("encrypted file output: ", output);
+  output.size = output.length;
+  delete output.length;
   return {
     ...output,
     alg: "xcha-stream"

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

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

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

@@ -103,7 +103,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 key={item.title}
                 title={item.title}
                 fontSize={SIZE.sm}
-                type="gray"
+                type="plain"
                 onPress={() => onPress(item)}
                 width={null}
                 height={30}
@@ -149,7 +149,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 key={item.title}
                 title={item.title}
                 fontSize={SIZE.xs}
-                type="gray"
+                type="plain"
                 onPress={() => onPress(item)}
                 width={null}
                 height={30}

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

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

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

@@ -18,14 +18,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useCallback, useEffect, useRef } from "react";
-import { Platform, TextInput, View } from "react-native";
+import { AppStateStatus, Platform, TextInput, View } from "react-native";
 //@ts-ignore
+import { useThemeColors } from "@notesnook/theme";
 import { enabled } from "react-native-privacy-snapshot";
-import { db } from "../../common/database";
+import { DatabaseLogger } from "../../common/database";
+import {
+  decrypt,
+  encrypt,
+  getCryptoKey,
+  getDatabaseKey,
+  setAppLockVerificationCipher,
+  validateAppLockPassword
+} from "../../common/database/encryption";
+import { MMKV } from "../../common/database/mmkv";
 import { useAppState } from "../../hooks/use-app-state";
 import BiometricService from "../../services/biometrics";
+import SettingsService from "../../services/settings";
 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";
@@ -35,18 +45,49 @@ import Input from "../ui/input";
 import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { validateAppLockPassword } from "../../common/database/encryption";
+
+const getUser = () => {
+  const user = MMKV.getString("user");
+  if (user) {
+    return JSON.parse(user);
+  }
+};
+
+const verifyUserPassword = async (password: string) => {
+  try {
+    await getDatabaseKey();
+    const key = await getCryptoKey();
+    const user = getUser();
+    const cipher = await encrypt(
+      {
+        key: key,
+        salt: user.salt
+      },
+      "notesnook"
+    );
+    const plainText = await decrypt({ password }, cipher);
+    return plainText === "notesnook";
+  } catch (e) {
+    DatabaseLogger.error(e as Error);
+    return false;
+  }
+};
 
 const AppLockedOverlay = () => {
+  const initialLaunchBiometricRequest = useRef(true);
   const { colors } = useThemeColors();
-  const user = useUserStore((state) => state.user);
+  const user = getUser();
   const appLocked = useUserStore((state) => state.appLocked);
   const lockApp = useUserStore((state) => state.lockApp);
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const passwordInputRef = useRef<TextInput>(null);
   const password = useRef<string>();
   const appState = useAppState();
+  const lastAppState = useRef<AppStateStatus>(appState);
   const biometricUnlockAwaitingUserInput = useRef(false);
+  const keyboardType = useSettingStore(
+    (state) => state.settings.applockKeyboardType
+  );
   const appLockHasPasswordSecurity = useSettingStore(
     (state) => state.settings.appLockHasPasswordSecurity
   );
@@ -64,6 +105,8 @@ const AppLockedOverlay = () => {
     )
       return;
 
+    biometricUnlockAwaitingUserInput.current = true;
+
     if (Platform.OS === "android") {
       const activityName = await NotesnookModule.getActivityName();
       if (activityName !== "MainActivity") return;
@@ -79,20 +122,29 @@ const AppLockedOverlay = () => {
       enabled(false);
       password.current = undefined;
     }
+    biometricUnlockAwaitingUserInput.current = false;
     setTimeout(() => {
-      biometricUnlockAwaitingUserInput.current = false;
+      if (biometricUnlockAwaitingUserInput.current) return;
       useSettingStore.getState().setRequestBiometrics(false);
-    }, 1);
+    }, 500);
   }, [biometricsAuthEnabled, lockApp]);
 
   const onSubmit = async () => {
     if (!password.current) return;
     try {
       const unlocked = appLockHasPasswordSecurity
-        ? validateAppLockPassword(password.current)
-        : await db.user.verifyPassword(password.current);
-
+        ? await validateAppLockPassword(password.current)
+        : await verifyUserPassword(password.current);
       if (unlocked) {
+        if (!appLockHasPasswordSecurity) {
+          await setAppLockVerificationCipher(password.current);
+          SettingsService.set({
+            appLockHasPasswordSecurity: true,
+            applockKeyboardType: "default"
+          });
+          DatabaseLogger.info("App lock migrated to password security");
+        }
+
         lockApp(false);
         enabled(false);
         password.current = undefined;
@@ -103,14 +155,46 @@ const AppLockedOverlay = () => {
   };
 
   useEffect(() => {
+    if (appState === "active") {
+      enabled(false);
+    }
+
+    const prevState = lastAppState.current;
+    lastAppState.current = appState;
+
     if (
-      biometricUnlockAwaitingUserInput.current ||
-      useUserStore.getState().disableAppLockRequests
-    )
-      return;
-    if (appLocked && appState === "active") {
-      biometricUnlockAwaitingUserInput.current = true;
-      onUnlockAppRequested();
+      appState === "active" &&
+      (prevState === "background" || initialLaunchBiometricRequest.current)
+    ) {
+      if (SettingsService.shouldLockAppOnEnterForeground()) {
+        DatabaseLogger.info("Locking app on entering foreground");
+        useUserStore.getState().lockApp(true);
+      }
+
+      if (
+        !(
+          biometricUnlockAwaitingUserInput.current ||
+          useUserStore.getState().disableAppLockRequests ||
+          !appLocked ||
+          useSettingStore.getState().requestBiometrics ||
+          useSettingStore.getState().appDidEnterBackgroundForAction
+        )
+      ) {
+        initialLaunchBiometricRequest.current = false;
+        DatabaseLogger.info("Biometric unlock request");
+        onUnlockAppRequested();
+      }
+
+      enabled(false);
+    } else {
+      SettingsService.appEnteredBackground();
+
+      if (
+        SettingsService.get().privacyScreen ||
+        SettingsService.getProperty("appLockEnabled")
+      ) {
+        enabled(true);
+      }
     }
   }, [appState, onUnlockAppRequested, appLocked]);
 
@@ -144,7 +228,7 @@ const AppLockedOverlay = () => {
         <IconButton
           name="fingerprint"
           size={100}
-          customStyle={{
+          style={{
             width: 100,
             height: 100,
             marginBottom: 20,
@@ -186,11 +270,13 @@ const AppLockedOverlay = () => {
                 fwdRef={passwordInputRef}
                 secureTextEntry
                 keyboardType={
-                  appLockHasPasswordSecurity ? "number-pad" : "default"
+                  appLockHasPasswordSecurity ? keyboardType : "default"
                 }
                 placeholder={`Enter ${
                   appLockHasPasswordSecurity
-                    ? `app lock pin`
+                    ? `app lock ${
+                        keyboardType === "numeric" ? "pin" : "password"
+                      }`
                     : "account password"
                 }`}
                 onChangeText={(v) => (password.current = v)}

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

@@ -40,7 +40,8 @@ import { useAttachmentStore } from "../../stores/use-attachment-store";
 import {
   eCloseAttachmentDialog,
   eCloseSheet,
-  eDBItemUpdate
+  eDBItemUpdate,
+  eOnLoadNote
 } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
@@ -50,15 +51,21 @@ import { openNote } from "../list-items/note/wrapper";
 import { DateMeta } from "../properties/date-meta";
 import { Button } from "../ui/button";
 import { Notice } from "../ui/notice";
-import { PressableButton } from "../ui/pressable";
+import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
+import { editorController } from "../../screens/editor/tiptap/utils";
 
 const Actions = ({
   attachment,
+  close,
+  setAttachments,
   fwdRef
 }: {
   attachment: Attachment;
+  setAttachments: (attachments?: VirtualizedGrouping<Attachment>) => void;
+  close?: () => void;
   fwdRef: RefObject<ActionSheetRef>;
 }) => {
   const { colors } = useThemeColors();
@@ -76,7 +83,7 @@ const Actions = ({
       name: "Download",
       onPress: async () => {
         if (currentProgress) {
-          await db.fs().cancel(attachment.hash, "download");
+          await db.fs().cancel(attachment.hash);
           useAttachmentStore.getState().remove(attachment.hash);
         }
         downloadAttachment(attachment.hash, false);
@@ -99,7 +106,7 @@ const Actions = ({
           reupload: true,
           hash: attachment.hash,
           context: contextId,
-          type: attachment.type
+          type: attachment.mimeType.startsWith("image") ? "image" : "file"
         });
       },
       icon: "upload"
@@ -110,7 +117,7 @@ const Actions = ({
         setLoading({
           name: "Run file check"
         });
-        let res = await filesystem.checkAttachment(attachment.hash);
+        const res = await filesystem.checkAttachment(attachment.hash);
         if (res.failed) {
           db.attachments.markAsFailed(attachment.id, res.failed);
           setFailed(res.failed);
@@ -130,6 +137,7 @@ const Actions = ({
           });
         }
 
+        setAttachments();
         setLoading({
           name: undefined
         });
@@ -152,6 +160,7 @@ const Actions = ({
                 filename: value
               });
               setFilename(value);
+              setAttachments();
               eSendEvent(eDBItemUpdate, attachment.id);
             }
           },
@@ -163,9 +172,27 @@ const Actions = ({
     {
       name: "Delete",
       onPress: async () => {
+        const relations = await db.relations.to(attachment, "note").get();
         await db.attachments.remove(attachment.hash, false);
+        setAttachments();
         eSendEvent(eDBItemUpdate, attachment.id);
-        eSendEvent(eCloseSheet, contextId);
+        relations
+          .map((relation) => relation.fromId)
+          .forEach(async (id) => {
+            const tab = useTabStore.getState().getTabForNote(id);
+            if (tab !== undefined) {
+              const isFocused = useTabStore.getState().currentTab === tab;
+              if (isFocused) {
+                eSendEvent(eOnLoadNote, {
+                  item: await db.notes.note(id),
+                  forced: true
+                });
+              } else {
+                editorController.current.commands.setLoading(true, tab);
+              }
+            }
+          });
+        close?.();
       },
       icon: "delete-outline"
     }
@@ -194,7 +221,7 @@ const Actions = ({
       <View
         style={{
           borderBottomWidth: 1,
-          borderBottomColor: colors.secondary.background,
+          borderBottomColor: colors.primary.border,
           marginBottom: notes && notes.length > 0 ? 0 : 12
         }}
       >
@@ -268,7 +295,7 @@ const Actions = ({
         <View
           style={{
             borderBottomWidth: 1,
-            borderBottomColor: colors.secondary.background,
+            borderBottomColor: colors.primary.border,
             marginBottom: 12,
             paddingVertical: 12
           }}
@@ -284,7 +311,7 @@ const Actions = ({
             </Heading>
 
             {notes.map((item) => (
-              <PressableButton
+              <Pressable
                 onPress={async () => {
                   eSendEvent(eCloseSheet, contextId);
                   await sleep(150);
@@ -292,7 +319,7 @@ const Actions = ({
                   await sleep(300);
                   openNote(item, (item as any).type === "trash");
                 }}
-                customStyle={{
+                style={{
                   paddingVertical: 12,
                   alignItems: "flex-start",
 
@@ -301,7 +328,7 @@ const Actions = ({
                 key={item.id}
               >
                 <Paragraph size={SIZE.xs}>{item.title}</Paragraph>
-              </PressableButton>
+              </Pressable>
             ))}
           </>
         </View>
@@ -312,7 +339,7 @@ const Actions = ({
           key={item.name}
           buttonType={{
             text:
-              item.name === "Delete" || item.name === "PermDelete"
+              item.name === "Delete"
                 ? colors.error.paragraph
                 : colors.primary.paragraph
           }}
@@ -320,7 +347,7 @@ const Actions = ({
           title={item.name}
           icon={item.icon}
           loading={loading?.name === item.name}
-          type="gray"
+          type="plain"
           fontSize={SIZE.sm}
           style={{
             borderRadius: 0,
@@ -350,12 +377,19 @@ const Actions = ({
 
 Actions.present = (
   attachment: Attachment,
-  set: (attachments: VirtualizedGrouping<Attachment>) => void,
+  set: (attachments?: VirtualizedGrouping<Attachment>) => void,
   context?: string
 ) => {
   presentSheet({
     context: context,
-    component: (ref) => <Actions fwdRef={ref} attachment={attachment} />
+    component: (ref, close) => (
+      <Actions
+        fwdRef={ref}
+        setAttachments={set}
+        close={close}
+        attachment={attachment}
+      />
+    )
   });
 };
 

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

@@ -67,9 +67,8 @@ export const AttachmentItem = ({
     Actions.present(attachment, setAttachments, context);
   };
 
-  return (hideWhenNotDownloading &&
-    (!currentProgress || !currentProgress.value)) ||
-    !attachment ? null : (
+  return hideWhenNotDownloading &&
+    (!currentProgress || !currentProgress.value) ? null : (
     <TouchableOpacity
       activeOpacity={0.9}
       onPress={onPress}
@@ -80,104 +79,111 @@ export const AttachmentItem = ({
         padding: 12,
         paddingVertical: 6,
         borderRadius: 5,
-        backgroundColor: colors.secondary.background
+        backgroundColor: colors.secondary.background,
+        minHeight: 45
       }}
     >
-      <View
-        style={{
-          flexShrink: 1,
-          flexDirection: "row",
-          alignItems: "center"
-        }}
-      >
-        <View
-          style={{
-            justifyContent: "center",
-            alignItems: "center",
-            marginLeft: -5
-          }}
-        >
-          <Icon name="file" size={SIZE.xxxl} color={colors.primary.icon} />
-
-          <Paragraph
-            adjustsFontSizeToFit
-            size={6}
-            color={colors.static.white}
-            style={{
-              position: "absolute"
-            }}
-          >
-            {getFileExtension(attachment.filename).toUpperCase()}
-          </Paragraph>
-        </View>
-
-        <View
-          style={{
-            flexShrink: 1,
-            marginLeft: 10
-          }}
-        >
-          <Paragraph
-            size={SIZE.sm - 1}
-            style={{
-              flexWrap: "wrap",
-              marginBottom: 2.5
-            }}
-            numberOfLines={1}
-            lineBreakMode="middle"
-            color={colors.primary.paragraph}
-          >
-            {attachment.filename}
-          </Paragraph>
-
-          {!hideWhenNotDownloading ? (
-            <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
-              {formatBytes(attachment.size)}{" "}
-              {currentProgress?.type
-                ? "(" + currentProgress.type + "ing - tap to cancel)"
-                : ""}
-            </Paragraph>
-          ) : null}
-        </View>
-      </View>
-
-      {currentProgress ? (
-        <TouchableOpacity
-          activeOpacity={0.9}
-          onPress={() => {
-            if (encryption || !pressable) return;
-            db.fs().cancel(attachment.hash, currentProgress?.type as any);
-            setCurrentProgress(undefined);
-          }}
-          style={{
-            justifyContent: "center",
-            marginLeft: 5,
-            marginTop: 5,
-            marginRight: -5
-          }}
-        >
-          <ProgressCircleComponent
-            size={SIZE.xxl}
-            progress={currentProgress?.value ? currentProgress?.value / 100 : 0}
-            showsText
-            textStyle={{
-              fontSize: 10
-            }}
-            color={colors.primary.accent}
-            formatText={(progress) => (progress * 100).toFixed(0)}
-            borderWidth={0}
-            thickness={2}
-          />
-        </TouchableOpacity>
-      ) : (
+      {!attachment ? null : (
         <>
-          {attachment.failed ? (
-            <IconButton
-              onPress={onPress}
-              name="alert-circle-outline"
-              color={colors.error.paragraph}
-            />
-          ) : null}
+          <View
+            style={{
+              flexShrink: 1,
+              flexDirection: "row",
+              alignItems: "center"
+            }}
+          >
+            <View
+              style={{
+                justifyContent: "center",
+                alignItems: "center",
+                marginLeft: -5
+              }}
+            >
+              <Icon name="file" size={SIZE.xxxl} color={colors.primary.icon} />
+
+              <Paragraph
+                adjustsFontSizeToFit
+                size={6}
+                color={colors.static.white}
+                style={{
+                  position: "absolute"
+                }}
+              >
+                {getFileExtension(attachment.filename).toUpperCase()}
+              </Paragraph>
+            </View>
+
+            <View
+              style={{
+                flexShrink: 1,
+                marginLeft: 10
+              }}
+            >
+              <Paragraph
+                size={SIZE.sm - 1}
+                style={{
+                  flexWrap: "wrap",
+                  marginBottom: 2.5
+                }}
+                numberOfLines={1}
+                lineBreakMode="middle"
+                color={colors.primary.paragraph}
+              >
+                {attachment.filename}
+              </Paragraph>
+
+              {!hideWhenNotDownloading ? (
+                <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+                  {formatBytes(attachment.size)}{" "}
+                  {currentProgress?.type
+                    ? "(" + currentProgress.type + "ing - tap to cancel)"
+                    : ""}
+                </Paragraph>
+              ) : null}
+            </View>
+          </View>
+
+          {currentProgress ? (
+            <TouchableOpacity
+              activeOpacity={0.9}
+              onPress={() => {
+                if (encryption || !pressable) return;
+                db.fs().cancel(attachment.hash);
+                setCurrentProgress(undefined);
+              }}
+              style={{
+                justifyContent: "center",
+                marginLeft: 5,
+                marginTop: 5,
+                marginRight: -5
+              }}
+            >
+              <ProgressCircleComponent
+                size={SIZE.xxl}
+                progress={
+                  currentProgress?.value ? currentProgress?.value / 100 : 0
+                }
+                showsText
+                textStyle={{
+                  fontSize: 10
+                }}
+                color={colors.primary.accent}
+                formatText={(progress) => (progress * 100).toFixed(0)}
+                borderWidth={0}
+                thickness={2}
+              />
+            </TouchableOpacity>
+          ) : (
+            <>
+              {attachment.failed ? (
+                <IconButton
+                  onPress={onPress}
+                  name="alert-circle-outline"
+                  color={colors.error.paragraph}
+                />
+              ) : null}
+            </>
+          )}
         </>
       )}
     </TouchableOpacity>

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

@@ -84,8 +84,9 @@ const DownloadAttachments = ({
     canceled.current = true;
     if (!groupId.current) return;
     console.log(groupId.current, "canceling groupId downloads");
-    await db.fs().cancel(groupId.current, "download");
+    await db.fs().cancel(groupId.current);
     setDownloading(false);
+    setResult(new Map());
     groupId.current = undefined;
   };
 
@@ -201,7 +202,7 @@ const DownloadAttachments = ({
             </Paragraph>
           </View>
         }
-        keyExtractor={(index) => "attachment" + index}
+        keyExtractor={(index) => "attachment_download" + index}
         renderItem={({ index }) => {
           return (
             <AttachmentItem
@@ -245,7 +246,7 @@ const DownloadAttachments = ({
             onPress={() => {
               close?.();
             }}
-            type="grayBg"
+            type="secondary"
             title="No"
           />
           <Button

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

@@ -61,10 +61,21 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
 
   const refresh = React.useCallback(() => {
     if (note) {
-      db.attachments.ofNote(note.id, "all").sorted(DEFAULT_SORTING);
+      db.attachments
+        .ofNote(note.id, "all")
+        .sorted({
+          ...DEFAULT_SORTING,
+          sortBy: "dateModified"
+        })
+        .then((attachments) => {
+          setAttachments(attachments);
+        });
     } else {
       db.attachments.all
-        .sorted(DEFAULT_SORTING)
+        .sorted({
+          ...DEFAULT_SORTING,
+          sortBy: "dateModified"
+        })
         .then((attachments) => setAttachments(attachments));
     }
   }, [note]);
@@ -73,12 +84,13 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
     refresh();
   }, [note, refresh]);
 
-  const onChangeText = (text: string) => {
+  const onChangeText = async (text: string) => {
     attachmentSearchValue.current = text;
     if (
       !attachmentSearchValue.current ||
       attachmentSearchValue.current === ""
     ) {
+      setAttachments(await filterAttachments(currentFilter));
       refresh();
     }
     clearTimeout(searchTimer.current);
@@ -86,13 +98,16 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
       const results = await db.lookup
         .attachments(attachmentSearchValue.current as string)
         .sorted();
+      if (results.length === 0) return;
       setAttachments(results);
     }, 300);
   };
 
   const renderItem = ({ index }: { item: boolean; index: number }) => (
     <AttachmentItem
-      setAttachments={setAttachments}
+      setAttachments={async () => {
+        setAttachments(await filterAttachments(currentFilter));
+      }}
       attachments={attachments}
       id={index}
       context="attachments-list"
@@ -145,7 +160,9 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
 
     switch (type) {
       case "all":
-        items = db.attachments.all;
+        items = note
+          ? db.attachments.ofNote(note.id, "all")
+          : db.attachments.all;
         break;
       case "images":
         items = note
@@ -154,19 +171,24 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
         break;
       case "video":
         items = items = note
-          ? db.attachments.ofNote(note.id, "all")
+          ? db.attachments.ofNote(note.id, "videos")
           : db.attachments.videos;
         break;
       case "audio":
-        items = db.attachments.all;
+        items = note
+          ? db.attachments.ofNote(note.id, "audio")
+          : db.attachments.all;
         break;
       case "documents":
         items = note
-          ? db.attachments.ofNote(note.id, "all")
+          ? db.attachments.ofNote(note.id, "documents")
           : db.attachments.documents;
     }
 
-    return await items.sorted(DEFAULT_SORTING);
+    return await items.sorted({
+      ...DEFAULT_SORTING,
+      sortBy: "dateModified"
+    });
   };
 
   return (
@@ -205,7 +227,7 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
           ) : (
             <IconButton
               name="check-all"
-              customStyle={{
+              style={{
                 height: 40,
                 width: 40,
                 marginRight: 10
@@ -218,7 +240,7 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
 
           <IconButton
             name="download"
-            customStyle={{
+            style={{
               height: 40,
               width: 40
             }}
@@ -261,7 +283,9 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
         >
           {attachmentTypes.map((item) => (
             <Button
-              type={currentFilter === item.filterBy ? "grayAccent" : "gray"}
+              type={
+                currentFilter === item.filterBy ? "secondaryAccented" : "plain"
+              }
               key={item.title}
               title={item.title}
               style={{

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

@@ -158,7 +158,7 @@ const AuthModal = () => {
                 hideAuth();
               }}
               iconSize={16}
-              type="gray"
+              type="plain"
               iconPosition="right"
               icon="chevron-right"
               height={25}

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

@@ -26,12 +26,15 @@ import {
   ToastManager
 } from "../../services/event-manager";
 import { useUserStore } from "../../stores/use-user-store";
-import { eCloseSheet } from "../../utils/events";
+import { eCloseSheet, eOpenRecoveryKeyDialog } from "../../utils/events";
 import DialogHeader from "../dialog/dialog-header";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
 import { Notice } from "../ui/notice";
 import Seperator from "../ui/seperator";
+import { Dialog } from "../dialog";
+import BackupService from "../../services/backup";
+import { sleep } from "../../utils/time";
 
 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);
       ToastManager.show({
@@ -73,6 +79,8 @@ export const ChangePassword = () => {
       });
       setLoading(false);
       eSendEvent(eCloseSheet);
+      await sleep(300);
+      eSendEvent(eOpenRecoveryKeyDialog);
     } catch (e) {
       setLoading(false);
       ToastManager.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

@@ -113,7 +113,7 @@ export const ForgotPassword = () => {
             }}
           >
             <IconButton
-              customStyle={{
+              style={{
                 width: null,
                 height: null
               }}

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

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

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

@@ -38,6 +38,7 @@ import { useSettingStore } from "../../stores/use-setting-store";
 import { eUserLoggedIn } from "../../utils/events";
 import { useUserStore } from "../../stores/use-user-store";
 import Sync from "../../services/sync";
+import { Notice } from "../ui/notice";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -103,7 +104,7 @@ export const Login = ({ changeMode }) => {
             justifyContent: "flex-end",
             paddingHorizontal: 20,
             backgroundColor: colors.secondary.background,
-            borderBottomWidth: 1,
+            borderBottomWidth: 0.8,
             marginBottom: 12,
             borderBottomColor: colors.primary.border,
             alignSelf: deviceMode !== "mobile" ? "center" : undefined,
@@ -222,7 +223,7 @@ export const Login = ({ changeMode }) => {
                   textDecorationLine: "underline"
                 }}
                 fontSize={SIZE.xs}
-                type="gray"
+                type="plain"
               />
             </>
           )}

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

@@ -19,7 +19,7 @@ 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";
@@ -37,6 +37,7 @@ import { eLoginSessionExpired, eUserLoggedIn } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
+import BaseDialog from "../dialog/base-dialog";
 import { presentDialog } from "../dialog/functions";
 import SheetProvider from "../sheet-provider";
 import { Toast } from "../toast";
@@ -46,7 +47,6 @@ import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
-import BaseDialog from "../dialog/base-dialog";
 
 function getObfuscatedEmail(email) {
   if (!email) return "";
@@ -69,6 +69,9 @@ export const SessionExpired = () => {
       eSendEvent(eUserLoggedIn, true);
       setVisible(false);
       setFocused(false);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
     },
     true
   );
@@ -84,6 +87,9 @@ export const SessionExpired = () => {
       MMKV.clearStore();
       clearAllStores();
       setVisible(false);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
     } catch (e) {
       ToastManager.show({
         heading: e.message,
@@ -127,6 +133,9 @@ export const SessionExpired = () => {
       email.current = user.email;
       setFocused(false);
       setVisible(true);
+      useUserStore.setState({
+        disableAppLockRequests: true
+      });
     }
   }, [email]);
 
@@ -139,9 +148,15 @@ export const SessionExpired = () => {
         animated={false}
         centered={false}
         onShow={async () => {
+          useUserStore.setState({
+            disableAppLockRequests: true
+          });
           await sleep(300);
           passwordInputRef.current?.focus();
           setFocused(true);
+          useUserStore.setState({
+            disableAppLockRequests: true
+          });
         }}
         enableSheetKeyboardHandler={true}
         visible={true}
@@ -166,7 +181,7 @@ export const SessionExpired = () => {
             }}
           >
             <IconButton
-              customStyle={{
+              style={{
                 width: 60,
                 height: 60
               }}

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

@@ -111,7 +111,7 @@ export const Signup = ({ changeMode, trial }) => {
             paddingHorizontal: 20,
             backgroundColor: colors.secondary.background,
             marginBottom: 20,
-            borderBottomWidth: 1,
+            borderBottomWidth: 0.8,
             borderBottomColor: colors.primary.border,
             alignSelf: deviceMode !== "mobile" ? "center" : undefined,
             borderWidth: deviceMode !== "mobile" ? 1 : null,

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

@@ -32,7 +32,7 @@ import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
-import { PressableButton } from "../ui/pressable";
+import { Pressable } from "../ui/pressable";
 import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
@@ -151,7 +151,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
         }}
       >
         <IconButton
-          customStyle={{
+          style={{
             width: 70,
             height: 70
           }}
@@ -183,7 +183,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
         {currentMethod.method === "sms" || currentMethod.method === "email" ? (
           <Button
             onPress={onSendCode}
-            type={seconds ? "gray" : "transparent"}
+            type={seconds ? "plain" : "transparent"}
             title={
               sending
                 ? ""
@@ -247,7 +247,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
 
             <Button
               title={secondaryMethodsText[currentMethod.method]}
-              type="gray"
+              type="plain"
               onPress={onRequestSecondaryMethod}
               height={30}
             />
@@ -255,7 +255,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
         ) : (
           <>
             {getMethods().map((item) => (
-              <PressableButton
+              <Pressable
                 key={item.title}
                 onPress={() => {
                   setCurrentMethod({
@@ -263,7 +263,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                     isPrimary: false
                   });
                 }}
-                customStyle={{
+                style={{
                   paddingHorizontal: 12,
                   paddingVertical: 12,
                   marginTop: 0,
@@ -275,8 +275,8 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 }}
               >
                 <IconButton
-                  type="grayAccent"
-                  customStyle={{
+                  type="secondaryAccented"
+                  style={{
                     width: 40,
                     height: 40,
                     marginRight: 10
@@ -292,7 +292,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 >
                   <Paragraph size={SIZE.md}>{item.title}</Paragraph>
                 </View>
-              </PressableButton>
+              </Pressable>
             ))}
           </>
         )}

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

@@ -18,6 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { useThemeColors } from "@notesnook/theme";
+import { useRoute } from "@react-navigation/native";
 import React, { useCallback, useEffect } from "react";
 import { Keyboard, View } from "react-native";
 import Animated, {
@@ -34,7 +35,7 @@ import { useSettingStore } from "../../stores/use-setting-store";
 import { getElevationStyle } from "../../utils/elevation";
 import { SIZE, normalize } from "../../utils/size";
 import NativeTooltip from "../../utils/tooltip";
-import { PressableButton } from "../ui/pressable";
+import { Pressable } from "../ui/pressable";
 
 interface FloatingButtonProps {
   title: string;
@@ -54,6 +55,7 @@ const FloatingButton = ({
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
   const translate = useSharedValue(0);
+  const route = useRoute();
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -116,11 +118,11 @@ const FloatingButton = ({
         animatedStyle
       ]}
     >
-      <PressableButton
+      <Pressable
         testID={notesnook.buttons.add}
         type="accent"
         accentColor={color}
-        customStyle={{
+        style={{
           ...getElevationStyle(5),
           borderRadius: 100
         }}
@@ -140,12 +142,18 @@ const FloatingButton = ({
           }}
         >
           <Icon
-            name={title === "Clear all trash" ? "delete" : "plus"}
+            name={
+              route.name === "Notebooks"
+                ? "notebook-plus"
+                : route.name === "Trash"
+                ? "delete"
+                : "plus"
+            }
             color={colors.primary.accentForeground}
             size={SIZE.xxl}
           />
         </View>
-      </PressableButton>
+      </Pressable>
     </Animated.View>
   );
 };

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

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

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

@@ -43,6 +43,7 @@ const DialogProvider = () => {
 
   return (
     <>
+      <AppLockPassword />
       <LoadingDialog />
       <Dialog context="global" />
       <PremiumDialog colors={colors} />
@@ -61,7 +62,6 @@ const DialogProvider = () => {
       <SessionExpired />
       <PDFPreview />
       <JumpToSectionDialog />
-      <AppLockPassword />
     </>
   );
 };

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

@@ -25,6 +25,7 @@ import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
+import { getColorLinearShade } from "../../utils/colors";
 
 const DialogButtons = ({
   onPressPositive,
@@ -35,7 +36,7 @@ const DialogButtons = ({
   doneText,
   positiveType
 }) => {
-  const { colors } = useThemeColors();
+  const { colors, isDark } = useThemeColors();
 
   return (
     <View
@@ -44,9 +45,15 @@ const DialogButtons = ({
         {
           backgroundColor: colors.secondary.background,
           height: 60,
-          borderBottomRightRadius: 10,
-          borderBottomLeftRadius: 10,
-          paddingHorizontal: 12
+          borderBottomRightRadius: 5,
+          borderBottomLeftRadius: 5,
+          paddingHorizontal: 12,
+          borderTopWidth: 0.7,
+          borderTopColor: getColorLinearShade(
+            colors.secondary.background,
+            0.05,
+            isDark
+          )
         }
       ]}
     >
@@ -80,7 +87,7 @@ const DialogButtons = ({
           onPress={onPressNegative}
           fontSize={SIZE.md}
           testID={notesnook.ids.default.dialog.no}
-          type="gray"
+          type="plain"
           bold
           title={negativeTitle}
         />

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

@@ -18,12 +18,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { View } from "react-native";
+import { View, ViewProps } from "react-native";
 import { DDS } from "../../services/device-detection";
 import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../utils/elevation";
+import { getContainerBorder } from "../../utils/colors";
 
-const DialogContainer = ({ width, height, ...restProps }) => {
+const DialogContainer = ({
+  width,
+  height,
+  style,
+  ...restProps
+}: ViewProps & {
+  width?: any;
+  height?: any;
+}) => {
   const { colors } = useThemeColors();
 
   return (
@@ -35,7 +44,8 @@ const DialogContainer = ({ width, height, ...restProps }) => {
         maxHeight: height || 450,
         borderRadius: 10,
         backgroundColor: colors.primary.background,
-        paddingTop: 12
+        paddingTop: 12,
+        ...getContainerBorder(colors.secondary.background, 0.8, 0.05)
       }}
     />
   );

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

@@ -22,7 +22,7 @@ import { Text, View, ViewStyle } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
-import { PressableButtonProps } from "../ui/pressable";
+import { PressableProps } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 
@@ -34,7 +34,7 @@ type DialogHeaderProps = {
     onPress?: () => void;
     loading?: boolean;
     title?: string;
-    type?: PressableButtonProps["type"];
+    type?: PressableProps["type"];
     icon?: string;
   };
   paragraphColor?: string;
@@ -86,7 +86,9 @@ const DialogHeader = ({
             >
               {title}{" "}
               {titlePart ? (
-                <Text style={{ color: colors.primary.accent }}>{titlePart}</Text>
+                <Text style={{ color: colors.primary.accent }}>
+                  {titlePart}
+                </Text>
               ) : null}
             </Heading>
 
@@ -101,8 +103,8 @@ const DialogHeader = ({
                 fontSize={13}
                 title={button.title}
                 icon={button.icon}
-                type={button.type || "grayBg"}
-                height={25}
+                type={button.type || "secondary"}
+                height={30}
               />
             ) : null}
           </View>

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

@@ -29,8 +29,8 @@ type DialogInfo = {
   onClose?: () => void;
   positiveType?:
     | "transparent"
-    | "gray"
-    | "grayBg"
+    | "plain"
+    | "secondary"
     | "accent"
     | "inverted"
     | "shade"
@@ -41,7 +41,8 @@ type DialogInfo = {
   input: boolean;
   inputPlaceholder: string;
   defaultValue: string;
-  context: "global" | "local";
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  context: "global" | "local" | (string & {});
   secureTextEntry?: boolean;
 };
 

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

@@ -36,11 +36,15 @@ import DialogButtons from "./dialog-buttons";
 import DialogHeader from "./dialog-header";
 import { useCallback } from "react";
 import { Button } from "../ui/button";
+import { getContainerBorder } from "../../utils/colors";
 
 export const Dialog = ({ context = "global" }) => {
   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: "",
@@ -66,7 +70,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;
@@ -81,8 +86,9 @@ 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]
   );
@@ -98,7 +104,8 @@ export const Dialog = ({ context = "global" }) => {
   }, [show]);
 
   const hide = () => {
-    setInputValue(null);
+    setChecked(false);
+    values.current.inputValue = undefined;
     setVisible(false);
   };
 
@@ -106,7 +113,6 @@ export const Dialog = ({ context = "global" }) => {
     if (dialogInfo.onClose) {
       await dialogInfo.onClose();
     }
-
     hide();
   };
 
@@ -116,7 +122,8 @@ export const Dialog = ({ context = "global" }) => {
     maxHeight: 450,
     borderRadius: 5,
     backgroundColor: colors.primary.background,
-    paddingTop: 12
+    paddingTop: 12,
+    ...getContainerBorder(colors.primary.border, 0.5)
   };
 
   return visible ? (
@@ -159,7 +166,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 +183,10 @@ export const Dialog = ({ context = "global" }) => {
           <>
             <Button
               onPress={() => {
-                setInputValue(!inputValue);
+                setChecked(!checked);
               }}
               icon={
-                inputValue
+                checked
                   ? "check-circle-outline"
                   : "checkbox-blank-circle-outline"
               }
@@ -187,9 +194,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 || "selected" : "plain"}
             />
           </>
         ) : null}

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

@@ -24,6 +24,7 @@ import {
   setAppLockVerificationCipher,
   validateAppLockPassword
 } from "../../../common/database/encryption";
+import BiometicService from "../../../services/biometrics";
 import { DDS } from "../../../services/device-detection";
 import {
   ToastManager,
@@ -31,22 +32,30 @@ import {
   eSubscribeEvent
 } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
+import { useSettingStore } from "../../../stores/use-setting-store";
 import { getElevationStyle } from "../../../utils/elevation";
 import {
   eCloseAppLocKPasswordDailog,
   eOpenAppLockPasswordDialog
 } from "../../../utils/events";
+import { SIZE } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import BaseDialog from "../../dialog/base-dialog";
 import DialogButtons from "../../dialog/dialog-buttons";
 import DialogHeader from "../../dialog/dialog-header";
 import { Toast } from "../../toast";
+import { IconButton } from "../../ui/icon-button";
 import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 
 export const AppLockPassword = () => {
   const { colors } = useThemeColors();
   const [mode, setMode] = useState<"create" | "change" | "remove">("create");
+  const [keyboardType, setKeyboardType] = useState<"pin" | "password">(
+    useSettingStore.getState().settings.applockKeyboardType === "default"
+      ? "password"
+      : "pin"
+  );
   const [visible, setVisible] = useState(false);
   const currentPasswordInputRef = useRef<TextInput>(null);
   const passwordInputRef = useRef<TextInput>(null);
@@ -56,6 +65,7 @@ export const AppLockPassword = () => {
     password?: string;
     confirmPassword?: string;
   }>({});
+  const [secureTextEntry, setSecureTextEntry] = useState(true);
 
   useEffect(() => {
     const subs = [
@@ -72,7 +82,7 @@ export const AppLockPassword = () => {
       })
     ];
     return () => {
-      subs.forEach((sub) => sub.unsubscribe());
+      subs.forEach((sub) => sub?.unsubscribe());
     };
   }, []);
 
@@ -81,11 +91,15 @@ export const AppLockPassword = () => {
     setVisible(false);
   };
 
-  return (
+  return !visible ? null : (
     <BaseDialog
       onShow={async () => {
         await sleep(100);
-        passwordInputRef.current?.focus();
+        if (mode !== "change") {
+          passwordInputRef.current?.focus();
+        } else {
+          currentPasswordInputRef.current?.focus();
+        }
       }}
       statusBarTranslucent={false}
       onRequestClose={close}
@@ -103,17 +117,17 @@ export const AppLockPassword = () => {
         <DialogHeader
           title={
             mode === "change"
-              ? "Change app lock pin"
+              ? `Change app lock ${keyboardType}`
               : mode === "remove"
-              ? "Remove app lock pin"
-              : "Set up app lock pin"
+              ? `Remove app lock ${keyboardType}`
+              : `Set up app lock ${keyboardType}`
           }
           paragraph={
             mode === "change"
-              ? "Change app lock pin"
+              ? `Change app lock ${keyboardType}`
               : mode === "remove"
-              ? "Remove app lock pin"
-              : "Set up a custom app lock pin to unlock the app"
+              ? `Remove app lock ${keyboardType}`
+              : `Set up a custom app lock ${keyboardType} to unlock the app`
           }
           icon="shield"
           padding={12}
@@ -135,12 +149,13 @@ export const AppLockPassword = () => {
               onSubmit={() => {
                 passwordInputRef.current?.focus();
               }}
+              defaultValue={values.current.currentPassword}
               autoComplete="password"
               returnKeyLabel="Next"
-              keyboardType="number-pad"
+              keyboardType={keyboardType === "pin" ? "number-pad" : "default"}
               returnKeyType="next"
-              secureTextEntry
-              placeholder={"Current pin"}
+              secureTextEntry={secureTextEntry}
+              placeholder={`Current ${keyboardType}`}
             />
           ) : null}
 
@@ -153,12 +168,37 @@ export const AppLockPassword = () => {
             onSubmit={() => {
               confirmPasswordInputRef.current?.focus();
             }}
-            keyboardType="number-pad"
+            defaultValue={values.current.password}
+            keyboardType={keyboardType === "pin" ? "number-pad" : "default"}
             autoComplete="password"
             returnKeyLabel={mode !== "remove" ? "Next" : "Remove"}
             returnKeyType={mode !== "remove" ? "next" : "done"}
-            secureTextEntry
-            placeholder={mode === "change" ? "New pin" : "Pin"}
+            secureTextEntry={secureTextEntry}
+            buttonLeft={
+              <IconButton
+                name={keyboardType === "password" ? "numeric" : "keyboard"}
+                onPress={() => {
+                  setKeyboardType(
+                    keyboardType === "password" ? "pin" : "password"
+                  );
+                  setSecureTextEntry(false);
+                  setImmediate(() => {
+                    setSecureTextEntry(true);
+                  });
+                }}
+                style={{
+                  width: 25,
+                  height: 25,
+                  marginRight: 5
+                }}
+                size={SIZE.lg}
+              />
+            }
+            placeholder={
+              mode === "change"
+                ? `New ${keyboardType}`
+                : `${keyboardType === "pin" ? "Pin" : "Password"}`
+            }
           />
 
           {mode !== "remove" ? (
@@ -171,14 +211,15 @@ export const AppLockPassword = () => {
               onSubmit={() => {
                 confirmPasswordInputRef.current?.focus();
               }}
-              keyboardType="number-pad"
+              defaultValue={values.current.confirmPassword}
+              keyboardType={keyboardType === "pin" ? "number-pad" : "default"}
               customValidator={() => values.current.password || ""}
               validationType="confirmPassword"
               autoComplete="password"
               returnKeyLabel="Done"
               returnKeyType="done"
-              secureTextEntry
-              placeholder={"Confirm pin"}
+              secureTextEntry={secureTextEntry}
+              placeholder={`Confirm ${keyboardType}`}
             />
           ) : null}
         </View>
@@ -198,7 +239,11 @@ export const AppLockPassword = () => {
 
               if (values.current.password !== values.current.confirmPassword) {
                 ToastManager.error(
-                  new Error("Pin does not match"),
+                  new Error(
+                    `${
+                      keyboardType === "pin" ? "Pin" : "Password"
+                    } does not match`
+                  ),
                   undefined,
                   "local"
                 );
@@ -222,7 +267,11 @@ export const AppLockPassword = () => {
 
               if (values.current.password !== values.current.confirmPassword) {
                 ToastManager.error(
-                  new Error("Pin does not match"),
+                  new Error(
+                    `${
+                      keyboardType === "pin" ? "Pin" : "Password"
+                    } does not match`
+                  ),
                   undefined,
                   "local"
                 );
@@ -235,7 +284,9 @@ export const AppLockPassword = () => {
 
               if (!isCurrentPasswordCorrect) {
                 ToastManager.error(
-                  new Error("Pin incorrect"),
+                  new Error(
+                    `${keyboardType === "pin" ? "Pin" : "Password"} incorrect`
+                  ),
                   undefined,
                   "local"
                 );
@@ -259,13 +310,36 @@ export const AppLockPassword = () => {
               );
 
               if (!isCurrentPasswordCorrect) {
-                ToastManager.error(new Error("Pin incorrect"), "local");
+                ToastManager.error(
+                  new Error(
+                    `${keyboardType === "pin" ? "Pin" : "Password"} incorrect`
+                  ),
+                  undefined,
+                  "local"
+                );
                 return;
               }
               clearAppLockVerificationCipher();
               SettingsService.setProperty("appLockHasPasswordSecurity", false);
+
+              if (
+                !(await BiometicService.isBiometryAvailable()) ||
+                SettingsService.getProperty("biometricsAuthEnabled") === false
+              ) {
+                SettingsService.setProperty("appLockEnabled", false);
+                SettingsService.setPrivacyScreen(SettingsService.get());
+                ToastManager.show({
+                  message: "App lock disabled",
+                  type: "success"
+                });
+              }
             }
 
+            SettingsService.setProperty(
+              "applockKeyboardType",
+              keyboardType === "password" ? "default" : "numeric"
+            );
+
             close();
           }}
           positiveTitle="Save"

apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx

@@ -0,0 +1,181 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import React, { useState } from "react";
+import { Image, ScrollView, TouchableOpacity, View } from "react-native";
+import { ImagePickerResponse } from "react-native-image-picker";
+import { useThemeColors } from "../../../../../../packages/theme/dist";
+import { presentSheet } from "../../../services/event-manager";
+import { SIZE } from "../../../utils/size";
+import { Button } from "../../ui/button";
+import { IconButton } from "../../ui/icon-button";
+import { Notice } from "../../ui/notice";
+import Paragraph from "../../ui/typography/paragraph";
+
+export default function AttachImage({
+  response,
+  onAttach,
+  close
+}: {
+  response: ImagePickerResponse;
+  onAttach: ({ compress }: { compress: boolean }) => void;
+  close: ((ctx?: string | undefined) => void) | undefined;
+}) {
+  const { colors } = useThemeColors();
+  const [compress, setCompress] = useState(true);
+
+  return (
+    <View
+      style={{
+        alignItems: "center",
+        paddingHorizontal: 12
+      }}
+    >
+      <View
+        style={{
+          backgroundColor: colors.secondary.background,
+          marginBottom: 12,
+          height: 140,
+          width: "100%",
+          borderRadius: 10,
+          padding: 5,
+          paddingHorizontal: 12
+        }}
+      >
+        <Paragraph style={{ color: colors.primary.paragraph, marginBottom: 6 }}>
+          Attaching {response.assets?.length} image(s):
+        </Paragraph>
+        <ScrollView horizontal>
+          {response.assets?.map((item) => (
+            <TouchableOpacity key={item.fileName} activeOpacity={0.9}>
+              <Image
+                source={{
+                  uri: item.uri
+                }}
+                style={{
+                  width: 100,
+                  height: 100,
+                  borderRadius: 5,
+                  backgroundColor: "black",
+                  marginRight: 6
+                }}
+                resizeMode="cover"
+              />
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+
+      <TouchableOpacity
+        activeOpacity={1}
+        style={{
+          flexDirection: "row",
+          alignSelf: "center",
+          marginBottom: 12,
+          alignItems: "center",
+          width: "100%"
+        }}
+        onPress={() => {
+          setCompress(!compress);
+        }}
+      >
+        <IconButton
+          size={SIZE.lg}
+          name={compress ? "checkbox-marked" : "checkbox-blank-outline"}
+          color={compress ? colors.primary.accent : colors.primary.icon}
+          style={{
+            width: 25,
+            height: 25
+          }}
+          onPress={() => {
+            setCompress(!compress);
+          }}
+        />
+
+        <Paragraph
+          style={{
+            flexShrink: 1,
+            marginLeft: 3
+          }}
+          size={SIZE.sm}
+        >
+          Compress (recommended)
+        </Paragraph>
+      </TouchableOpacity>
+
+      {!compress ? (
+        <Notice
+          type="alert"
+          text="Images uploaded without compression are slow to load and take more bandwidth. We recommend compressing images unless you need image in original quality."
+          size="small"
+          style={{
+            width: "100%",
+            marginBottom: 12
+          }}
+        />
+      ) : (
+        <Notice
+          type="information"
+          text="Compressed images are uploaded in Full HD resolution and usually are good enough for most use cases."
+          size="small"
+          style={{
+            width: "100%",
+            marginBottom: 12
+          }}
+        />
+      )}
+
+      <Button
+        title={`${
+          (response.assets?.length || 0) > 1 ? "Attach Images" : "Attach Image"
+        }`}
+        type="accent"
+        width="100%"
+        onPress={() => {
+          onAttach({
+            compress
+          });
+        }}
+      />
+    </View>
+  );
+}
+
+AttachImage.present = (response: ImagePickerResponse) => {
+  return new Promise((resolve) => {
+    let resolved = false;
+    presentSheet({
+      component: (ref, close, update) => (
+        <AttachImage
+          response={response}
+          close={close}
+          onAttach={(result) => {
+            resolved = true;
+            console.log("closing");
+            resolve(result);
+            close?.();
+          }}
+        />
+      ),
+      onClose: () => {
+        if (resolved) return;
+        resolve(undefined);
+      }
+    });
+  });
+};

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

@@ -0,0 +1,199 @@
+/*
+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 { Color } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
+import React, { useRef, useState } from "react";
+import { TextInput, View } from "react-native";
+import ColorPickerWheel from "react-native-wheel-color-picker";
+import { db } from "../../../common/database";
+import { useStoredRef } from "../../../hooks/use-stored-ref";
+import { ToastManager } from "../../../services/event-manager";
+import { useMenuStore } from "../../../stores/use-menu-store";
+import { useRelationStore } from "../../../stores/use-relation-store";
+import { useSettingStore } from "../../../stores/use-setting-store";
+import BaseDialog from "../../dialog/base-dialog";
+import DialogContainer from "../../dialog/dialog-container";
+import { Toast } from "../../toast";
+import { Button } from "../../ui/button";
+import Input from "../../ui/input";
+import { Pressable } from "../../ui/pressable";
+
+const HEX_COLOR_REGEX_ALPHA =
+  /^#(?:(?:[\da-fA-F]{3}){1,2}|(?:[\da-fA-F]{4}){1,2})$/;
+
+const ColorPicker = ({
+  visible,
+  setVisible,
+  onColorAdded
+}: {
+  visible: boolean;
+  setVisible: (value: boolean) => void;
+  onColorAdded: (color: Color) => void;
+}) => {
+  const [selectedColor, setSelectedColor] = useState<string>();
+  const { colors } = useThemeColors();
+  const inputRef = useRef<TextInput>(null);
+  const title = useRef<string>();
+  const colorRef = useStoredRef("color-ref", "#f0f0f0");
+
+  return (
+    <BaseDialog
+      visible={visible}
+      onRequestClose={() => {
+        title.current = undefined;
+        setVisible(false);
+        useSettingStore.getState().setSheetKeyboardHandler(true);
+      }}
+      statusBarTranslucent={false}
+      centered
+    >
+      <Toast context="color-picker" />
+      <DialogContainer
+        style={{
+          paddingTop: 0,
+          maxHeight: 600
+        }}
+      >
+        <View>
+          <View
+            style={{
+              width: "100%",
+              height: 250,
+              backgroundColor: colors.primary.background,
+              borderRadius: 10
+            }}
+          >
+            <ColorPickerWheel
+              onColorChangeComplete={(color) => {
+                if (color === selectedColor) return;
+                colorRef.current = color;
+                setSelectedColor(color);
+                inputRef.current?.setNativeProps({
+                  placeholder: color,
+                  text: color
+                });
+              }}
+              useNativeLayout={true}
+              autoResetSlider={true}
+              color={colorRef.current}
+              sliderSize={30}
+              thumbSize={25}
+              shadeWheelThumb
+              shadeSliderThumb={true}
+              swatchesOnly={false}
+              swatches={false}
+              useNativeDriver={true}
+            />
+          </View>
+
+          <View
+            style={{
+              paddingHorizontal: 12
+            }}
+          >
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                paddingTop: 10,
+                columnGap: 10,
+                marginBottom: 10
+              }}
+            >
+              <Input
+                fwdRef={inputRef}
+                placeholder="#f0f0f0"
+                marginBottom={0}
+                onChangeText={(value) => {
+                  if (HEX_COLOR_REGEX_ALPHA.test(value)) {
+                    colorRef.current = value;
+                    setSelectedColor(value);
+                  }
+                }}
+                defaultValue={colorRef.current}
+              />
+              <Pressable
+                type="accent"
+                accentColor={selectedColor || colors.secondary.background}
+                style={{
+                  width: 45,
+                  height: 45,
+                  borderRadius: 100,
+                  justifyContent: "center",
+                  alignItems: "center"
+                }}
+              />
+            </View>
+
+            <Input
+              marginBottom={10}
+              onChangeText={(value) => {
+                title.current = value;
+              }}
+              testID="color-title-input"
+              defaultValue={title.current}
+              placeholder={title.current || "Color title"}
+            />
+
+            <Button
+              title="Add color"
+              style={{
+                marginBottom: 10
+              }}
+              onPress={async () => {
+                if (!selectedColor)
+                  return ToastManager.error(
+                    new Error("Select a color"),
+                    undefined,
+                    "color-picker"
+                  );
+                if (!title.current)
+                  return ToastManager.error(
+                    new Error("Enter a title for the color")
+                  );
+                const exists = await db.colors.all.find((v) =>
+                  v.and([v(`colorCode`, "==", selectedColor)])
+                );
+                if (exists)
+                  return ToastManager.error(
+                    new Error(`Color #${selectedColor} already exists`)
+                  );
+                const id = await db.colors.add({
+                  title: title.current,
+                  colorCode: selectedColor
+                });
+                useRelationStore.getState().update();
+                useMenuStore.getState().setColorNotes();
+                setVisible(false);
+                const color = await db.colors.color(id);
+                if (color) {
+                  onColorAdded?.(color);
+                }
+              }}
+              type={selectedColor ? "secondaryAccented" : "secondary"}
+              width="100%"
+            />
+          </View>
+        </View>
+      </DialogContainer>
+    </BaseDialog>
+  );
+};
+
+export default ColorPicker;

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

@@ -41,7 +41,7 @@ import {
 } from "../../../utils/events";
 import { SIZE } from "../../../utils/size";
 import BaseDialog from "../../dialog/base-dialog";
-import { PressableButton } from "../../ui/pressable";
+import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
 
 const JumpToSectionDialog = () => {
@@ -181,11 +181,11 @@ const JumpToSectionDialog = () => {
             >
               {groups?.map((item, index) => {
                 return (
-                  <PressableButton
+                  <Pressable
                     key={item.group.id}
                     onPress={() => onPress(item)}
                     type={currentIndex === index ? "accent" : "transparent"}
-                    customStyle={{
+                    style={{
                       minWidth: "20%",
                       width: null,
                       paddingHorizontal: 12,
@@ -208,7 +208,7 @@ const JumpToSectionDialog = () => {
                     >
                       {item.group.title}
                     </Paragraph>
-                  </PressableButton>
+                  </Pressable>
                 );
               })}
             </View>

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

@@ -211,7 +211,7 @@ const PDFPreview = () => {
                     color={colors.static.white}
                     name="arrow-left"
                     onPress={close}
-                    customStyle={{
+                    style={{
                       marginRight: 12
                     }}
                     size={SIZE.xxl}

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

@@ -23,7 +23,6 @@ import { InteractionManager, View } from "react-native";
 import Share from "react-native-share";
 import { notesnook } from "../../../../e2e/test.ids";
 import { db } from "../../../common/database";
-import { editorController } from "../../../screens/editor/tiptap/utils";
 import BiometricService from "../../../services/biometrics";
 import { DDS } from "../../../services/device-detection";
 import {
@@ -35,11 +34,11 @@ import {
 import Navigation from "../../../services/navigation";
 import { getElevationStyle } from "../../../utils/elevation";
 import {
-  eClearEditor,
   eCloseActionSheet,
   eCloseVaultDialog,
   eOnLoadNote,
-  eOpenVaultDialog
+  eOpenVaultDialog,
+  eUpdateNoteInEditor
 } from "../../../utils/events";
 import { deleteItems } from "../../../utils/functions";
 import { tabBarRef } from "../../../utils/global-refs";
@@ -81,7 +80,8 @@ export class VaultDialog extends Component {
       description: null,
       clearVault: false,
       deleteVault: false,
-      deleteAll: false
+      deleteAll: false,
+      noteLocked: false
     };
 
     this.passInputRef = createRef();
@@ -99,7 +99,7 @@ export class VaultDialog extends Component {
       ? "Revoke Vault Fingerprint Unlock"
       : this.state.changePassword
       ? "Change Vault Password"
-      : this.state.note.locked
+      : this.state.noteLocked
       ? this.state.deleteNote
         ? "Delete note"
         : this.state.share
@@ -120,7 +120,7 @@ export class VaultDialog extends Component {
         ? "Setup a new password for the vault."
         : this.state.permanant
         ? "Enter password to remove note from vault."
-        : this.state.note.locked
+        : this.state.noteLocked
         ? this.state.deleteNote
           ? "Unlock note to delete it. If biometrics are not working, you can enter device pin to unlock vault."
           : this.state.share
@@ -174,7 +174,8 @@ export class VaultDialog extends Component {
       title: data.title,
       description: data.description,
       clearVault: data.clearVault,
-      deleteVault: data.deleteVault
+      deleteVault: data.deleteVault,
+      noteLocked: data.item && (await db.vaults.itemExists(data.item))
     });
 
     if (
@@ -240,16 +241,6 @@ export class VaultDialog extends Component {
       });
       return;
     }
-    if (this.password && this.password.length < 3) {
-      ToastManager.show({
-        heading: "Password too short",
-        message: "Password must be longer than 3 characters.",
-        type: "error",
-        context: "local"
-      });
-
-      return;
-    }
 
     if (!this.state.novault) {
       if (this.password !== this.confirmPassword) {
@@ -314,7 +305,7 @@ export class VaultDialog extends Component {
         });
         return;
       }
-      if (this.state.note.locked) {
+      if (this.state.noteLocked) {
         await this._unlockNote();
       } else {
         db.vault
@@ -346,7 +337,26 @@ export class VaultDialog extends Component {
       let verified = await db.user.verifyPassword(this.password);
       if (!(await db.user.getUser())) verified = true;
       if (verified) {
+        let noteIds = [];
+        if (this.state.deleteAll) {
+          const vault = await db.vaults.default();
+          const relations = await db.relations.from(vault, "note").get();
+          noteIds = relations.map((item) => item.toId);
+        }
+
         await db.vault.delete(this.state.deleteAll);
+
+        noteIds.forEach((id) => {
+          eSendEvent(
+            eUpdateNoteInEditor,
+            {
+              id: id,
+              deleted: true
+            },
+            true
+          );
+        });
+
         eSendEvent("vaultUpdated");
         this.setState({
           loading: false
@@ -373,7 +383,22 @@ export class VaultDialog extends Component {
       loading: true
     });
     try {
+      const vault = await db.vaults.default();
+      const relations = await db.relations.from(vault, "note").get();
+      const noteIds = relations.map((item) => item.toId);
+
       await db.vault.clear(this.password);
+
+      noteIds.forEach((id) => {
+        eSendEvent(
+          eUpdateNoteInEditor,
+          {
+            id: id,
+            deleted: true
+          },
+          true
+        );
+      });
       this.setState({
         loading: false
       });
@@ -402,9 +427,10 @@ export class VaultDialog extends Component {
       return;
     } else {
       await db.vault.add(this.state.note.id);
-      if (this.state.note.id === editorController.current?.note?.id) {
-        eSendEvent(eClearEditor);
-      }
+
+      console.log("update note event...");
+      eSendEvent(eUpdateNoteInEditor, this.state.note, true);
+
       this.close();
       ToastManager.show({
         message: "Note locked successfully",
@@ -509,9 +535,7 @@ export class VaultDialog extends Component {
     }
     if (this.state.note?.id) {
       await db.vault.add(this.state.note.id);
-      if (this.state.note.id === editorController.current?.note?.id) {
-        eSendEvent(eClearEditor);
-      }
+      eSendEvent(eUpdateNoteInEditor, this.state.note, true);
       this.setState({
         loading: false
       });
@@ -541,6 +565,7 @@ export class VaultDialog extends Component {
           type: "success",
           context: "global"
         });
+        eSendEvent(eUpdateNoteInEditor, this.state.note, true);
         this.close();
       })
       .catch((e) => {
@@ -866,10 +891,10 @@ export class VaultDialog extends Component {
                 title="Biometric unlocking"
                 iconColor={
                   this.state.biometricUnlock
-                    ? colors.selected.icon
+                    ? colors.selected.accent
                     : colors.primary.icon
                 }
-                type={this.state.biometricUnlock ? "transparent" : "selected"}
+                type={this.state.biometricUnlock ? "transparent" : "plain"}
               />
             ) : null}
           </View>
@@ -892,7 +917,7 @@ export class VaultDialog extends Component {
                 ? "Revoke"
                 : changePassword
                 ? "Change"
-                : note.locked
+                : this.state.noteLocked
                 ? deleteNote
                   ? "Delete"
                   : share

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

@@ -33,6 +33,7 @@ import { eScrollEvent } from "../../utils/events";
 import { LeftMenus } from "./left-menus";
 import { RightMenus } from "./right-menus";
 import { Title } from "./title";
+import { useNavigation } from "@react-navigation/native";
 
 type HeaderRightButton = {
   title: string;
@@ -66,6 +67,8 @@ export const Header = ({
   hasSearch?: boolean;
   onSearch?: () => void;
 }) => {
+  const navigation = useNavigation();
+
   const { colors } = useThemeColors();
   const insets = useGlobalSafeAreaInsets();
   const [borderHidden, setBorderHidden] = useState(true);

apps/mobile/app/components/header/left-menus.tsx

@@ -54,7 +54,7 @@ export const LeftMenus = ({
   return isTablet && !canGoBack ? null : (
     <IconButton
       testID={notesnook.ids.default.header.buttons.left}
-      customStyle={{
+      style={{
         justifyContent: "center",
         alignItems: "center",
         height: 40,

apps/mobile/app/components/header/right-menus.tsx

@@ -23,8 +23,6 @@ import { Platform, StyleSheet, View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
 import Menu from "react-native-reanimated-material-menu";
 import { notesnook } from "../../../e2e/test.ids";
-import Navigation from "../../services/navigation";
-import SearchService from "../../services/search";
 import {
   HeaderRightButton,
   RouteName
@@ -63,7 +61,7 @@ export const RightMenus = ({
           testID="icon-search"
           name="magnify"
           color={colors.primary.paragraph}
-          customStyle={styles.rightBtn}
+          style={styles.rightBtn}
         />
       ) : null}
 
@@ -73,7 +71,7 @@ export const RightMenus = ({
           testID={notesnook.ids.default.addBtn}
           icon={renderedInRoute === "Trash" ? "delete" : "plus"}
           iconSize={SIZE.xl}
-          type="shade"
+          type="accent"
           hitSlop={{
             top: 10,
             right: 10,
@@ -84,7 +82,7 @@ export const RightMenus = ({
             marginLeft: 10,
             width: 32,
             height: 32,
-            borderRadius: 5,
+            borderRadius: 100,
             paddingHorizontal: 0,
             borderWidth: 1,
             borderColor: colors.primary.accent
@@ -110,7 +108,7 @@ export const RightMenus = ({
               }}
               name="dots-vertical"
               color={colors.primary.paragraph}
-              customStyle={styles.rightBtn}
+              style={styles.rightBtn}
             />
           }
         >
@@ -121,7 +119,7 @@ export const RightMenus = ({
                 justifyContent: "flex-start",
                 borderRadius: 0
               }}
-              type="gray"
+              type="plain"
               buttonType={{
                 text: contextMenuColors.primary.paragraph
               }}

apps/mobile/app/components/image-preview/index.tsx

@@ -52,7 +52,7 @@ const ImagePreview = () => {
     setLoading(true);
     setTimeout(async () => {
       let hash = image.hash;
-      if (!hash && dataurl.toObject(image.src)) {
+      if (!hash && image.src && dataurl.toObject(image.src)) {
         const data = dataurl.toObject(image.src);
         if (!data) return;
         hash = await Sodium.hashFile({

apps/mobile/app/components/intro/welcome.js

@@ -108,7 +108,7 @@ export const WelcomeNotice = () => {
           eSendEvent(eCloseLoading);
         }}
         iconSize={20}
-        type="gray"
+        type="plain"
         iconPosition="right"
         icon="chevron-right"
         height={25}

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

@@ -109,12 +109,12 @@ export const NotebookHeader = ({
             name={isPinnedToMenu ? "link-variant-off" : "link-variant"}
             onPress={onPinNotebook}
             tooltipText={"Create shortcut in side menu"}
-            customStyle={{
+            style={{
               marginRight: 15,
               width: 40,
               height: 40
             }}
-            type={isPinnedToMenu ? "grayBg" : "grayBg"}
+            type={isPinnedToMenu ? "secondary" : "secondary"}
             color={isPinnedToMenu ? colors.primary.accent : colors.primary.icon}
             size={SIZE.lg}
           />
@@ -123,9 +123,9 @@ export const NotebookHeader = ({
             onPress={onEditNotebook}
             tooltipText="Edit this notebook"
             name="pencil"
-            type="grayBg"
+            type="secondary"
             color={colors.primary.icon}
-            customStyle={{
+            style={{
               width: 40,
               height: 40
             }}
@@ -148,10 +148,6 @@ export const NotebookHeader = ({
         size={SIZE.xs}
         color={colors.secondary.paragraph}
       >
-        {/* {notebook.topics.length === 1
-          ? "1 topic"
-          : `${notebook.topics.length} topics`}
-        ,{" "} */}
         {notebook && totalNotes > 1
           ? totalNotes + " notes"
           : totalNotes === 1

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

@@ -25,7 +25,7 @@ import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enab
 import { presentSheet } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
 import { RouteName } from "../../../stores/use-navigation-store";
-import { ColorValues } from "../../../utils/colors";
+import { getContainerBorder } from "../../../utils/colors";
 import { GROUP } from "../../../utils/constants";
 import { SIZE } from "../../../utils/size";
 import Sort from "../../sheets/sort";
@@ -80,7 +80,8 @@ export const SectionHeader = React.memo<
           backgroundColor: colors.secondary.background,
           alignSelf: "center",
           borderRadius: 5,
-          marginVertical: 5
+          marginVertical: 5,
+          ...getContainerBorder(colors.secondary.background, 0.8)
         }}
       >
         <TouchableOpacity
@@ -95,13 +96,9 @@ export const SectionHeader = React.memo<
           }}
         >
           <Heading
-            color={
-              ColorValues[color?.toLowerCase() as keyof typeof ColorValues] ||
-              colors.primary.accent
-            }
+            color={color || colors.primary.accent}
             size={SIZE.sm}
             style={{
-              minWidth: 60,
               alignSelf: "center",
               textAlignVertical: "center"
             }}
@@ -116,7 +113,7 @@ export const SectionHeader = React.memo<
             alignItems: "center"
           }}
         >
-          {index === 0 && (
+          {index === 0 ? (
             <>
               <Button
                 onPress={() => {
@@ -125,7 +122,6 @@ export const SectionHeader = React.memo<
                     component: <Sort screen={screen} type={dataType} />
                   });
                 }}
-                hidden={screen === "Reminders"}
                 tooltipText="Change sorting of items in list"
                 title={groupBy}
                 icon={
@@ -145,12 +141,12 @@ export const SectionHeader = React.memo<
                       ? 10
                       : 0
                 }}
-                type="gray"
+                type="plain"
                 iconPosition="right"
               />
 
               <IconButton
-                customStyle={{
+                style={{
                   width: 25,
                   height: 25
                 }}
@@ -179,7 +175,7 @@ export const SectionHeader = React.memo<
                 size={SIZE.lg - 2}
               />
             </>
-          )}
+          ) : null}
         </View>
       </View>
     );

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

@@ -33,11 +33,12 @@ import { notesnook } from "../../../../e2e/test.ids";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 import NotebookScreen from "../../../screens/notebook";
 import { TaggedNotes } from "../../../screens/notes/tagged";
-import { useEditorStore } from "../../../stores/use-editor-store";
 import useNavigationStore from "../../../stores/use-navigation-store";
 import { useRelationStore } from "../../../stores/use-relation-store";
 import { SIZE } from "../../../utils/size";
 
+import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store";
+import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
 import { Properties } from "../../properties";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
@@ -45,10 +46,6 @@ import { ReminderTime } from "../../ui/reminder-time";
 import { TimeSince } from "../../ui/time-since";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import {
-  NotebooksWithDateEdited,
-  TagsWithDateEdited
-} from "../../../stores/resolve-items";
 
 type NoteItemProps = {
   item: Note | BaseTrashItem<Note>;
@@ -61,6 +58,7 @@ type NoteItemProps = {
   date: number;
   isTrash?: boolean;
   noOpen?: boolean;
+  locked?: boolean;
 };
 
 const NoteItem = ({
@@ -72,10 +70,12 @@ const NoteItem = ({
   reminder,
   tags,
   attachmentsCount,
+  locked,
   noOpen = false
 }: NoteItemProps) => {
-  const isEditingNote = useEditorStore(
-    (state) => state.currentEditingNote === item.id
+  const isEditingNote = useTabStore(
+    (state) =>
+      state.tabs.find((t) => t.id === state.currentTab)?.noteId === item.id
   );
   const { colors } = useThemeColors();
   const compactMode = useIsCompactModeEnabled(
@@ -118,8 +118,8 @@ const NoteItem = ({
                   tooltipText={item.title}
                   key={item.id}
                   height={25}
-                  icon={item.type === "notebook" ? "bookmark" : "book-outline"}
-                  type="grayBg"
+                  icon="book-outline"
+                  type="secondary"
                   fontSize={SIZE.xs}
                   iconSize={SIZE.sm}
                   textStyle={{
@@ -128,8 +128,6 @@ const NoteItem = ({
                   style={{
                     borderRadius: 5,
                     marginRight: 5,
-                    borderWidth: 0.5,
-                    borderColor: primaryColors.border,
                     paddingHorizontal: 6,
                     marginBottom: 5
                   }}
@@ -213,6 +211,31 @@ const NoteItem = ({
                     color={colors.error.accent}
                   />
                 ) : null}
+
+                {item.localOnly ? (
+                  <Icon
+                    testID="sync-off"
+                    name="sync-off"
+                    size={SIZE.sm}
+                    style={{
+                      marginRight: 6
+                    }}
+                    color={primaryColors.icon}
+                  />
+                ) : null}
+
+                {item.readonly ? (
+                  <Icon
+                    testID="pencil-lock"
+                    name="pencil-lock"
+                    size={SIZE.sm}
+                    style={{
+                      marginRight: 6
+                    }}
+                    color={primaryColors.icon}
+                  />
+                ) : null}
+
                 <TimeSince
                   style={{
                     fontSize: SIZE.xs,
@@ -228,12 +251,13 @@ const NoteItem = ({
                     style={{
                       flexDirection: "row",
                       alignItems: "center",
-                      marginRight: 6
+                      marginRight: 6,
+                      gap: 2
                     }}
                   >
                     <Icon
                       name="attachment"
-                      size={SIZE.md}
+                      size={SIZE.sm}
                       color={primaryColors.icon}
                     />
                     <Paragraph
@@ -257,7 +281,7 @@ const NoteItem = ({
                   />
                 ) : null}
 
-                {item.locked ? (
+                {locked ? (
                   <Icon
                     name="lock"
                     testID="note-locked-icon"
@@ -273,7 +297,7 @@ const NoteItem = ({
                   <Icon
                     testID="icon-star"
                     name="star-outline"
-                    size={SIZE.md}
+                    size={SIZE.sm}
                     style={{
                       marginRight: 6
                     }}
@@ -288,9 +312,10 @@ const NoteItem = ({
                           title={"#" + item.title}
                           key={item.id}
                           height={23}
-                          type="gray"
+                          type="plain"
                           textStyle={{
-                            textDecorationLine: "underline"
+                            textDecorationLine: "underline",
+                            color: colors.secondary.paragraph
                           }}
                           hitSlop={{ top: 8, bottom: 12, left: 0, right: 0 }}
                           fontSize={SIZE.xs}
@@ -356,7 +381,7 @@ const NoteItem = ({
               />
             ) : null}
 
-            {item.locked ? (
+            {locked ? (
               <Icon
                 name="lock"
                 testID="note-locked-icon"
@@ -372,7 +397,7 @@ const NoteItem = ({
               <Icon
                 testID="icon-star"
                 name="star-outline"
-                size={SIZE.md}
+                size={SIZE.sm}
                 style={{
                   marginRight: 6
                 }}
@@ -398,7 +423,7 @@ const NoteItem = ({
           name="dots-horizontal"
           size={SIZE.xl}
           onPress={() => !noOpen && Properties.present(item)}
-          customStyle={{
+          style={{
             justifyContent: "center",
             height: 35,
             width: 35,

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

@@ -26,20 +26,14 @@ import { DDS } from "../../../services/device-detection";
 import {
   eSendEvent,
   hideSheet,
-  openVault,
   presentSheet
 } from "../../../services/event-manager";
-import { useEditorStore } from "../../../stores/use-editor-store";
-import { useSelectionStore } from "../../../stores/use-selection-store";
 import { eOnLoadNote, eShowMergeDialog } from "../../../utils/events";
 import { tabBarRef } from "../../../utils/global-refs";
 
+import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
 import NotePreview from "../../note-history/preview";
-import SelectionWrapper from "../selection-wrapper";
-import {
-  NotebooksWithDateEdited,
-  TagsWithDateEdited
-} from "../../../stores/resolve-items";
+import SelectionWrapper, { selectItem } from "../selection-wrapper";
 
 export const openNote = async (
   item: Note,
@@ -52,51 +46,22 @@ export const openNote = async (
   if (!isTrash) {
     note = (await db.notes.note(item.id)) as Note;
   }
-  if (useSelectionStore.getState().selectionMode === item.type) {
-    const {
-      selectedItemsList,
-      selectionMode,
-      clearSelection,
-      setSelectedItem
-    } = useSelectionStore.getState();
 
-    if (selectedItemsList.length > 0 && selectionMode === item.type) {
-      setSelectedItem(note.id);
-    } else {
-      clearSelection();
-    }
-    return;
-  }
+  if (selectItem(item)) return;
 
   if (note.conflicted) {
     eSendEvent(eShowMergeDialog, note);
     return;
   }
 
-  if (note.locked) {
-    openVault({
-      item: note,
-      novault: true,
-      locked: true,
-      goToEditor: true,
-      title: "Open note",
-      description: "Unlock note to open it in editor."
-    });
-    return;
-  }
   if (isTrash) {
     if (!note.contentId) return;
 
     const content = await db.content.get(note.contentId as string);
     presentSheet({
-      component: (
-        <NotePreview note={item} content={{ type: "tiptap", data: content }} />
-      )
+      component: <NotePreview note={item} content={content} />
     });
   } else {
-    if (note?.readonly) {
-      useEditorStore.getState().setReadonly(note?.readonly);
-    }
     eSendEvent(eOnLoadNote, {
       item: note
     });
@@ -116,6 +81,7 @@ type NoteWrapperProps = {
   attachmentsCount: number;
   date: number;
   isRenderedInActionSheet: boolean;
+  locked?: boolean;
 };
 
 export const NoteWrapper = React.memo<

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

@@ -198,7 +198,7 @@ export const NotebookItem = ({
           testID={notesnook.ids.notebook.menu}
           size={SIZE.xl}
           onPress={() => Properties.present(item)}
-          customStyle={{
+          style={{
             justifyContent: "center",
             height: 35,
             width: 35,

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

@@ -27,18 +27,12 @@ import Navigation from "../../../services/navigation";
 import { useSelectionStore } from "../../../stores/use-selection-store";
 import { useTrashStore } from "../../../stores/use-trash-store";
 import { presentDialog } from "../../dialog/functions";
-import SelectionWrapper from "../selection-wrapper";
+import SelectionWrapper, { selectItem } from "../selection-wrapper";
 
 export const openNotebook = (item: Notebook | BaseTrashItem<Notebook>) => {
   const isTrash = item.type === "trash";
-  const { selectedItemsList, setSelectedItem, selectionMode, clearSelection } =
-    useSelectionStore.getState();
-  if (selectedItemsList.length > 0 && selectionMode === item.type) {
-    setSelectedItem(item.id);
-    return;
-  } else {
-    clearSelection();
-  }
+
+  if (selectItem(item)) return;
 
   if (isTrash) {
     presentDialog({

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

@@ -22,7 +22,6 @@ import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../../e2e/test.ids";
-import { useSelectionStore } from "../../../stores/use-selection-store";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import ReminderSheet from "../../sheets/reminder";
@@ -30,7 +29,7 @@ import { IconButton } from "../../ui/icon-button";
 import { ReminderTime } from "../../ui/reminder-time";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import SelectionWrapper from "../selection-wrapper";
+import SelectionWrapper, { selectItem } from "../selection-wrapper";
 
 const ReminderItem = React.memo(
   ({
@@ -44,18 +43,7 @@ const ReminderItem = React.memo(
   }) => {
     const { colors } = useThemeColors();
     const openReminder = () => {
-      const {
-        selectedItemsList,
-        setSelectedItem,
-        selectionMode,
-        clearSelection
-      } = useSelectionStore.getState();
-      if (selectedItemsList.length > 0 && selectionMode === item.type) {
-        setSelectedItem(item.id);
-        return;
-      } else {
-        clearSelection();
-      }
+      if (selectItem(item)) return;
 
       ReminderSheet.present(item, undefined, isSheet);
     };
@@ -63,8 +51,9 @@ const ReminderItem = React.memo(
       <SelectionWrapper onPress={openReminder} item={item} isSheet={isSheet}>
         <View
           style={{
-            flexShrink: 1,
-            opacity: item.disabled ? 0.5 : 1
+            opacity: item.disabled ? 0.5 : 1,
+            maxWidth: "80%",
+            flexGrow: 1
           }}
         >
           <Heading
@@ -175,7 +164,7 @@ const ReminderItem = React.memo(
           name="dots-horizontal"
           size={SIZE.xl}
           onPress={() => Properties.present(item, [], isSheet)}
-          customStyle={{
+          style={{
             justifyContent: "center",
             height: 35,
             width: 35,

apps/mobile/app/components/list-items/selection-wrapper/back-fill.tsx

@@ -17,17 +17,18 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { Item } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
 import useIsSelected from "../../../hooks/use-selected";
-import { useEditorStore } from "../../../stores/use-editor-store";
-import { Item } from "@notesnook/core";
+import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store";
 
 export const Filler = ({ item, color }: { item: Item; color?: string }) => {
   const { colors } = useThemeColors();
-  const isEditingNote = useEditorStore(
-    (state) => state.currentEditingNote === item.id
+  const isEditingNote = useTabStore(
+    (state) =>
+      state.tabs.find((t) => t.id === state.currentTab)?.noteId === item.id
   );
 
   const [selected] = useIsSelected(item);
@@ -41,8 +42,8 @@ export const Filler = ({ item, color }: { item: Item; color?: string }) => {
         backgroundColor: colors.selected.background,
         borderLeftWidth: 5,
         borderLeftColor: isEditingNote
-          ? item.color
-            ? colors.static[item.color]
+          ? color
+            ? color
             : colors.selected.accent
           : "transparent"
       }}

apps/mobile/app/components/list-items/selection-wrapper/index.tsx

@@ -21,11 +21,28 @@ import { useThemeColors } from "@notesnook/theme";
 import React, { PropsWithChildren, useRef } from "react";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 import { useSelectionStore } from "../../../stores/use-selection-store";
-import { PressableButton } from "../../ui/pressable";
+import { Pressable } from "../../ui/pressable";
 import { Filler } from "./back-fill";
 import { SelectionIcon } from "./selection";
 import { Item, TrashItem } from "@notesnook/core";
 
+export function selectItem(item: Item) {
+  if (useSelectionStore.getState().selectionMode === item.type) {
+    const { selectionMode, clearSelection, setSelectedItem } =
+      useSelectionStore.getState();
+
+    if (selectionMode === item.type) {
+      setSelectedItem(item.id);
+    }
+
+    if (useSelectionStore.getState().selectedItemsList.length === 0) {
+      clearSelection();
+    }
+    return true;
+  }
+  return false;
+}
+
 type SelectionWrapperProps = PropsWithChildren<{
   item: Item;
   onPress: () => void;
@@ -60,7 +77,7 @@ const SelectionWrapper = ({
   };
 
   return (
-    <PressableButton
+    <Pressable
       customColor={isSheet ? colors.primary.hover : "transparent"}
       testID={testID}
       onLongPress={onLongPress}
@@ -68,7 +85,7 @@ const SelectionWrapper = ({
       customSelectedColor={colors.primary.hover}
       customAlpha={!isDark ? -0.02 : 0.02}
       customOpacity={1}
-      customStyle={{
+      style={{
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
@@ -83,7 +100,7 @@ const SelectionWrapper = ({
       {item.type === "note" ? <Filler item={item} color={color} /> : null}
       <SelectionIcon item={item} />
       {children}
-    </PressableButton>
+    </Pressable>
   );
 };