web: changed isChecked to checked

.eslintignore

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

.eslintrc.js

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

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

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

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

@@ -6,11 +6,6 @@ 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
@@ -29,126 +24,30 @@ 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@master
+        uses: r0adkll/sign-android-release@v1
         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.1.1
+        uses: r0adkll/upload-google-play@v1
         with:
           serviceAccountJsonPlainText: ${{ secrets.SERVICE_ACCOUNT_JSON }}
           packageName: com.streetwriters.notesnook
-          releaseFiles: ${{steps.sign_app.outputs.signedReleaseFile}}
-          track: alpha
+          releaseFile: ${{steps.sign_app.outputs.signedReleaseFile}}
+          track: internal
           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

@@ -6,11 +6,6 @@ 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
@@ -33,54 +28,9 @@ jobs:
       - name: Make Gradlew Executable
         run: cd apps/mobile/native/android && chmod +x ./gradlew
 
-      - name: Install CCache
-        uses: hendrikmuhs/ccache-action@v1.2.11
-        with:
-          key: ${{ runner.os }}-ccache-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
-          max-size: 1500M
-          restore-keys: |
-            ${{ runner.os }}-ccache-
-
-      - name: Setup CCache
-        run: |
-          ln -s $(which ccache) /usr/local/bin/gcc
-          ln -s $(which ccache) /usr/local/bin/g++
-          ln -s $(which ccache) /usr/local/bin/cc
-          ln -s $(which ccache) /usr/local/bin/c++
-          ln -s $(which ccache) /usr/local/bin/clang
-          ln -s $(which ccache) /usr/local/bin/clang++
-          ccache --set-config=base_dir=$PWD
-          ccache --set-config=inode_cache=true
-          ccache --set-config=compiler_check=content
-          ccache --set-config=depend_mode=true
-          ccache --set-config=file_clone=true
-          ccache --set-config=sloppiness=clang_index_store,file_stat_matches,include_file_ctime,include_file_mtime,ivfsoverlay,pch_defines,modules,system_headers,time_macros
-          ccache -p
-
-      - name: Cache gradle
-        uses: actions/cache@v2
-        with:
-          path: |
-            ~/.gradle/caches
-            ~/.gradle/wrapper
-          key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
-
-      - name: Patch CPP Projects to use CCache
-        run: |
-          sed -i -e 's/arguments/arguments "-DCMAKE_CXX_COMPILER_LAUNCHER=ccache",/g' apps/mobile/node_modules/react-native-mmkv-storage/android/build.gradle
-          sed -i -e 's/arguments/arguments "-DCMAKE_CXX_COMPILER_LAUNCHER=ccache",/g' apps/mobile/node_modules/react-native-reanimated/android/build.gradle
-          sed -i -e 's/defaultConfig {/ndkVersion safeExtGet('ndkVersion', "25.2.9519653")\n  defaultConfig {/g' apps/mobile/node_modules/react-native-reanimated//android/build.gradle
-          sed -i -e 's/defaultConfig {/ndkVersion safeExtGet('ndkVersion', "25.2.9519653")\n  defaultConfig {/g' apps/mobile/node_modules/react-native-mmkv-storage/android/build.gradle
-
-      - name: CCache Stats Before Build
-        run: ccache -sv
-
       - name: Build unsigned app bundle
         run: yarn release:android:bundle
 
-      - name: CCache Stats after build
-        run: ccache -sv
-
       - name: Sign app bundle for Playstore release
         id: sign_app
         uses: r0adkll/sign-android-release@master
@@ -93,6 +43,17 @@ jobs:
         env:
           BUILD_TOOLS_VERSION: "33.0.0"
 
+      - 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: Build apks for Github release
         run: yarn release:android
 
@@ -122,18 +83,6 @@ 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:
@@ -147,9 +96,3 @@ 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

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

.github/workflows/ios.publish.yml

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

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

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

.github/workflows/web.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 dayjs @zip.js/zip.js
+          npm install -D @playwright/test otplib
 
       - name: Validate build extraction
         run: ls -ld ./apps/web/build/index.html

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

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

.gitignore

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

.prettierignore

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

apps/desktop/.gitignore

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

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "3.0.2",
+  "version": "2.6.17",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/index.js",
@@ -14,11 +14,9 @@
     "@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"
@@ -27,13 +25,12 @@
     "@types/node": "18.16.1",
     "@types/yargs": "^17.0.24",
     "chokidar": "^3.5.3",
-    "electron": "^29.3.1",
-    "electron-builder": "^24.13.3",
-    "esbuild": "^0.20.0",
-    "node-gyp-build": "^4.8.0",
-    "prebuildify": "^6.0.1",
+    "electron": "25.9.8",
+    "electron-builder": "^24.9.1",
+    "electron-builder-notarize": "^1.5.1",
+    "esbuild": "^0.17.19",
     "tree-kill": "^1.2.2",
-    "undici": "^6.14.1"
+    "undici": "^5.23.0"
   },
   "optionalDependencies": {
     "dmg-license": "^1.0.11"
@@ -43,7 +40,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 --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": "esbuild electron=./src/main.ts ./src/preload.ts --external:electron --external:fsevents --minify --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=false --define:RELEASE=true",
     "bundle:mas": "esbuild electron=./src/main.ts ./src/preload.ts --minify --external:electron --external:fsevents --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=true --define:RELEASE=true",
     "postinstall": "patch-package"
   },
@@ -57,7 +54,7 @@
     "productName": "Notesnook",
     "copyright": "Copyright © 2023 Streetwriters (Private) Limited",
     "artifactName": "notesnook_${os}_${arch}.${ext}",
-    "generateUpdatesFilesForAllChannels": true,
+    "npmRebuild": false,
     "asar": false,
     "files": [
       "!*.chunk.js.map",
@@ -67,17 +64,9 @@
       "!build/banner.jpg",
       "!build/*.ico",
       "!build/*.png",
-      "!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"
+      "!node_modules${/*}"
     ],
+    "afterSign": "electron-builder-notarize",
     "afterPack": "./scripts/removeLocales.js",
     "mac": {
       "bundleVersion": "240",
@@ -105,8 +94,7 @@
       "entitlements": "assets/entitlements.mac.plist",
       "entitlementsInherit": "assets/entitlements.mac.plist",
       "gatekeeperAssess": false,
-      "icon": "assets/icons/app.icns",
-      "notarize": true
+      "icon": "assets/icons/app.icns"
     },
     "dmg": {
       "contents": [
@@ -150,7 +138,7 @@
       "signingHashAlgorithms": [
         "sha256"
       ],
-      "sign": "./scripts/sign.js",
+      "sign": "./sign.js",
       "icon": "assets/icons/app.ico"
     },
     "portable": {

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

@@ -1,46 +0,0 @@
-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, { readFile, writeFile } from "fs/promises";
-import { existsSync, readFileSync } from "fs";
+import fs from "fs/promises";
+import { existsSync } from "fs";
 import yargs from "yargs-parser";
 import os from "os";
 import * as childProcess from "child_process";
@@ -28,30 +28,27 @@ import { fileURLToPath } from "url";
 const args = yargs(process.argv);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const packageJson = JSON.parse(
-  readFileSync(path.join(__dirname, "..", "package.json"), "utf-8")
-);
-
+const sodiumNativePrebuildPath = (arch) =>
+  path.join(
+    `node_modules`,
+    `@notesnook`,
+    `crypto`,
+    `node_modules`,
+    `@notesnook`,
+    `sodium`,
+    `node_modules`,
+    `sodium-native`,
+    `prebuilds`,
+    `${os.platform()}-${arch}`
+  );
 const webAppPath = path.resolve(path.join(__dirname, "..", "..", "web"));
 
 await fs.rm("./build/", { force: true, recursive: true });
 
 if (args.rebuild || !existsSync(path.join(webAppPath, "build"))) {
-  await exec(
-    "npx nx build:desktop @notesnook/web",
-    path.join(__dirname, "..", "..", "..")
-  );
+  await exec(`cd ${webAppPath} && npm run build:desktop`);
 }
 
-// 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
@@ -65,39 +62,56 @@ 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/mac/Notesnook.app/Contents/MacOS/Notesnook`);
+    await exec(`./output/darwin-unpacked/Notesnook`);
   } else {
     await exec(`./output/linux-unpacked/Notesnook`);
   }
 }
 
-async function exec(cmd, cwd) {
+async function exec(cmd) {
   return childProcess.execSync(cmd, {
-    env: { ...process.env, NOTESNOOK_STAGING: true },
-    stdio: "inherit",
-    cwd: cwd || process.cwd()
+    env: process.env,
+    stdio: "inherit"
   });
 }
-
-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,15 +27,21 @@ 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...");
@@ -52,8 +58,6 @@ 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`);
@@ -64,6 +68,13 @@ 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"],
@@ -91,7 +102,7 @@ function spawnAndWaitUntil(cmd, cwd, predicate) {
 
     const s = spawn(cmd[0], cmd.slice(1), {
       cwd,
-      env: ENV,
+      env: { ...process.env, NO_COLOR: "true" },
       shell: false
     });
 
@@ -105,15 +116,14 @@ function spawnAndWaitUntil(cmd, cwd, predicate) {
   });
 }
 
-async function exec(cmd, cwd) {
+async function exec(cmd) {
   try {
     console.log(">", cmd);
 
     return execSync(cmd, {
-      env: ENV,
+      env: process.env,
       stdio: "inherit",
-      shell: false,
-      cwd: cwd || process.cwd()
+      shell: false
     });
   } catch {
     //ignore
@@ -126,7 +136,7 @@ function execAsync(cmd, args, restartable, onExit) {
 
     const proc = spawn(cmd, args, {
       stdio: "inherit",
-      env: ENV,
+      env: process.env,
       shell: false
     });
 
@@ -169,10 +179,9 @@ async function cleanup() {
 }
 
 async function isBundleSame() {
-  const bundle = Buffer.concat([
-    await fs.readFile(path.join(__dirname, "..", "build", "electron.js")),
-    await fs.readFile(path.join(__dirname, "..", "build", "preload.js"))
-  ]);
+  const bundle = await fs.readFile(
+    path.join(__dirname, "..", "build", "electron.js")
+  );
 
   const hashSum = crypto.createHash("sha256");
   hashSum.update(bundle);

apps/desktop/sign.js

@@ -16,13 +16,11 @@ 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 { writeFileSync, rmSync, readFileSync } = 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";
@@ -33,7 +31,7 @@ module.exports = async function (configuration) {
   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}"`;
+  const command = `Invoke-AzureCodeSigning -Endpoint "${Endpoint}" -CodeSigningAccountName "${CodeSigningAccountName}" -CertificateProfileName "${CertificateProfileName}" -FileDigest "${FileDigest}" -TimestampRfc3161 "${TimestampRfc3161}" -TimestampDigest "${TimestampDigest}" -Description "${Description}" -DescriptionUrl "${DescriptionUrl}" -FilesCatalog "${FilesCatalog}"`;
 
   console.debug("Signing", configuration.path, "using command", command);
 
@@ -41,13 +39,16 @@ module.exports = async function (configuration) {
 
   console.debug("Signed", configuration.path);
 
-  rmSync(FilesCatalog);
+  deleteCatalog();
 };
 
 function createCatalog(path) {
-  const catalogPath = join(__dirname, "_catalog");
-  writeFileSync(catalogPath, relative(__dirname, path));
-  return catalogPath;
+  writeFileSync("_catalog", relative(__dirname, path));
+  return join(__dirname, "_catalog");
+}
+
+function deleteCatalog() {
+  rmSync("_catalog");
 }
 
 function psexec(cmd) {

apps/desktop/src/api/index.ts

@@ -23,8 +23,6 @@ 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();
 
@@ -33,9 +31,7 @@ export const router = t.router({
   integration: osIntegrationRouter,
   spellChecker: spellCheckerRouter,
   updater: updaterRouter,
-  bridge: bridgeRouter,
-  safeStorage: safeStorageRouter,
-  window: windowRouter
+  bridge: bridgeRouter
 });
 
 export const api = router.createCaller({});

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

@@ -31,8 +31,6 @@ import { observable } from "@trpc/server/observable";
 import { AssetManager } from "../utils/asset-manager";
 import { isFlatpak } from "../utils";
 import { setupDesktopIntegration } from "../utils/desktop-integration";
-import { rm } from "fs/promises";
-import { disableCustomDns, enableCustomDns } from "../utils/custom-dns";
 
 const t = initTRPC.create();
 
@@ -56,15 +54,6 @@ export const osIntegrationRouter = t.router({
     config.zoomFactor = factor;
   }),
 
-  customDns: t.procedure.query(() => config.customDns),
-  setCustomDns: t.procedure
-    .input(z.boolean())
-    .mutation(({ input: customDns }) => {
-      if (customDns) enableCustomDns();
-      else disableCustomDns();
-      config.customDns = customDns;
-    }),
-
   proxyRules: t.procedure.query(() => config.proxyRules),
   setProxyRules: t.procedure
     .input(z.string().optional())
@@ -145,13 +134,10 @@ 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 }) => {
@@ -180,42 +166,16 @@ export const osIntegrationRouter = t.router({
     }),
   bringToFront: t.procedure.query(() => bringToFront()),
   changeTheme: t.procedure
-    .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);
-      }
-    ),
+    .input(Theme)
+    .mutation(({ input }) => setTheme(input)),
 
   onThemeChanged: t.procedure.subscription(() =>
     observable<"dark" | "light">((emit) => {
-      const updated = () => {
+      nativeTheme.on("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

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

@@ -28,20 +28,16 @@ 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 () => {
-    if (cancellationToken) return;
-    cancellationToken = new CancellationToken();
-    await autoUpdater
-      .downloadUpdate(cancellationToken)
-      .finally(() => (cancellationToken = undefined));
+    const cancellationToken = new CancellationToken();
+    await autoUpdater.downloadUpdate(cancellationToken);
   }),
   check: t.procedure.query(async () => {
-    await autoUpdater.checkForUpdates().catch(console.error);
+    await autoUpdater.checkForUpdates();
   }),
 
   toggleAutoUpdates: t.procedure
@@ -75,7 +71,6 @@ 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

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

apps/desktop/src/index.ts

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

apps/desktop/src/main.ts

@@ -35,7 +35,6 @@ import path from "path";
 import { bringToFront } from "./utils/bring-to-front";
 import { bridge } from "./api/bridge";
 import { setupDesktopIntegration } from "./utils/desktop-integration";
-import { disableCustomDns, enableCustomDns } from "./utils/custom-dns";
 
 // only run a single instance
 if (!MAC_APP_STORE && !app.requestSingleInstanceLock()) {
@@ -83,19 +82,6 @@ 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,
@@ -136,7 +122,7 @@ async function createWindow() {
   setupJumplist();
 
   if (isDevelopment())
-    mainWindow.webContents.openDevTools({ mode: "bottom", activate: true });
+    mainWindow.webContents.openDevTools({ mode: "right", activate: true });
 
   mainWindow.webContents.setWindowOpenHandler((details) => {
     shell.openExternal(details.url);
@@ -152,9 +138,6 @@ async function createWindow() {
 app.once("ready", async () => {
   console.info("App ready. Opening window.");
 
-  if (config.customDns) enableCustomDns();
-  else disableCustomDns();
-
   if (!isDevelopment()) registerProtocol();
   await createWindow();
   configureAutoUpdater();

apps/desktop/src/preload.ts

@@ -23,13 +23,11 @@ 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 () => {
@@ -42,6 +40,11 @@ process.once("loaded", async () => {
   globalThis.electronTRPC = electronTRPC;
 });
 
-globalThis.NativeNNCrypto = require("@notesnook/crypto").NNCrypto;
-globalThis.createSQLite3Database = (filename) => sqlite3(filename);
+globalThis.NativeNNCrypto =
+  process.platform === "win32" &&
+  process.arch !== "x64" &&
+  process.arch !== "ia32"
+    ? undefined
+    : require("@notesnook/crypto").NNCrypto;
+
 globalThis.os = () => (MAC_APP_STORE ? "mas" : platform());

apps/desktop/src/utils/autoupdater.ts

@@ -20,15 +20,11 @@ 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/api/v1/releases/${process.platform}/${CHANNEL}`,
-    useMultipleRangeRequest: false,
-    channel: CHANNEL
+    url: `https://notesnook.com/releases/${process.platform}/`,
+    useMultipleRangeRequest: false
   });
 
   autoUpdater.autoDownload = config.automaticUpdates;

apps/desktop/src/utils/config.ts

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

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

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

apps/desktop/src/utils/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 { net, protocol } from "electron";
+import { protocol } from "electron";
 import { isDevelopment } from "./index";
 import { createReadStream } from "fs";
 import { extname, normalize } from "path";
@@ -62,7 +62,26 @@ function registerProtocol() {
         headers: { "Content-Type": extensionToMimeType[fileExtension] }
       });
     } else {
-      return net.fetch(request, { bypassCustomProtocolHandlers: true });
+      if (request.headers.has("X-Content-Length")) {
+        request.headers.set(
+          "Content-Length",
+          request.headers.get("X-Content-Length") || "0"
+        );
+        request.headers.delete("X-Content-Length");
+      }
+      const headers = Object.fromEntries(request.headers.entries());
+
+      return await fetch(request.url, {
+        signal: request.signal,
+        mode: request.mode,
+        headers,
+        method: request.method,
+        body: request.body,
+        credentials: request.credentials,
+        referrer: (request as any).referrer,
+        duplex: "half",
+        redirect: "manual"
+      });
     }
   });
   console.info(`${SCHEME} protocol inteception "successful"`);

apps/desktop/src/utils/theme.ts

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

apps/mobile/app/app.js

@@ -16,13 +16,14 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import "react-native-gesture-handler";
+import "@azure/core-asynciterator-polyfill";
 import {
   THEME_COMPATIBILITY_VERSION,
   useThemeEngineStore
 } from "@notesnook/theme";
 import React, { useEffect } from "react";
 import { I18nManager, View } from "react-native";
+import "react-native-gesture-handler";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import AppLockedOverlay from "./components/app-lock-overlay";
@@ -41,15 +42,14 @@ I18nManager.allowRTL(false);
 I18nManager.forceRTL(false);
 I18nManager.swapLeftAndRightInRTL(false);
 
+SettingsService.checkOrientation();
 const App = () => {
   const init = useAppEvents();
   useEffect(() => {
-    const { appLockEnabled, appLockMode } = SettingsService.get();
-    if (appLockEnabled || appLockMode !== "none") {
+    let { appLockMode } = SettingsService.get();
+    if (appLockMode && appLockMode !== "none") {
       useUserStore.getState().lockApp(true);
     }
-
-    //@ts-ignore
     globalThis["IS_MAIN_APP_RUNNING"] = true;
     init();
     setTimeout(async () => {
@@ -101,10 +101,10 @@ const App = () => {
 let currTheme =
   useThemeStore.getState().colorScheme === "dark"
     ? SettingsService.getProperty("darkTheme")
-    : SettingsService.getProperty("lighTheme");
+    : SettingsService.getProperty("lightTheme");
 useThemeEngineStore.getState().setTheme(currTheme);
 
-export const withTheme = (Element: () => JSX.Element) => {
+export const withTheme = (Element) => {
   return function AppWithThemeProvider() {
     const [colorScheme, darkTheme, lightTheme] = useThemeStore((state) => [
       state.colorScheme,

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

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

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

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

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

@@ -16,14 +16,14 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
+import { initalize } from "@notesnook/core/dist/logger";
 import { MMKVLoader } from "react-native-mmkv-storage";
-import { initialize } from "@notesnook/core/dist/logger";
 import { KV } from "./storage";
 
 const LoggerStorage = new MMKVLoader()
   .withInstanceID("notesnook_logs")
   .initialize();
 
-initialize(new KV(LoggerStorage));
+initalize(new KV(LoggerStorage));
 
 export { LoggerStorage };

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

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

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

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

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

@@ -16,61 +16,20 @@ 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, Image, Platform } from "react-native";
+import { Dimensions, 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: 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 { width, scale } = Dimensions.get("window");
   const response = await ImageResizer.createResizedImage(
     path,
-    1920,
-    99999,
+    width * scale,
+    9999,
     type,
     80,
     0,
@@ -81,6 +40,11 @@ export async function compressToFile(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);
-  return response.uri;
+  RNFetchBlob.fs.unlink(response.uri.replace("file://", "")).catch(console.log);
+  return base64;
 }

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

@@ -29,9 +29,9 @@ import * as ScopedStorage from "react-native-scoped-storage";
 import { subscribe, zip } from "react-native-zip-archive";
 import RNFetchBlob from "react-native-blob-util";
 import { ShareComponent } from "../../components/sheets/export-notes/share";
-import { ToastManager, presentSheet } from "../../services/event-manager";
+import { ToastEvent, presentSheet } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { DatabaseLogger, db } from "../database";
+import { db } from "../database";
 import Storage from "../database/storage";
 import { cacheDir, copyFileAsync, releasePermissions } from "./utils";
 import { createCacheDir, exists } from "./io";
@@ -46,15 +46,15 @@ export const FileDownloadStatus = {
  * Download all user's attachments
  * @returns
  */
-export async function downloadAllAttachments() {
-  const attachments = await db.attachments.all.ids();
+export function downloadAllAttachments() {
+  const attachments = db.attachments.all;
   return downloadAttachments(attachments);
 }
 
 /**
  * Downloads provided attachments to a .zip file
  * on user's device.
- * @param {string[]} attachments
+ * @param attachments
  * @param onProgress
  * @returns
  */
@@ -84,15 +84,13 @@ 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++) {
-    let attachment = await db.attachments.attachment(attachments[i]);
-    const hash = attachment.hash;
+    let attachment = attachments[i];
+    const hash = attachment.metadata.hash;
     try {
       if (canceled.current) {
         RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
@@ -116,20 +114,19 @@ export async function downloadAttachments(
       }
       if (!uri) throw new Error("Failed to download file");
       // Move file to the source folder we will zip eventually and rename the file to it's actual name.
-      const filePath = `${zipSourceFolder}/${attachment.filename}`;
+      const filePath = `${zipSourceFolder}/${attachment.metadata.filename}`;
       await RNFetchBlob.fs.mv(`${cacheDir}/${uri}`, filePath);
       result.set(hash, {
-        filename: attachment.filename,
-        status: FileDownloadStatus.Success,
-        attachment: attachment
+        filename: attachment.metadata.filename,
+        status: FileDownloadStatus.Success
       });
     } catch (e) {
       result.set(hash, {
-        filename: attachment.filename,
+        filename: attachment.metadata.filename,
         status: FileDownloadStatus.Fail,
         reason: e
       });
-      ToastManager.error(e, "Error downloading attachment");
+      console.log("Error downloading attachment", e);
     }
   }
   if (canceled.current) {
@@ -166,7 +163,7 @@ export async function downloadAttachments(
     } catch (e) {
       releasePermissions(outputFolder);
       sub?.remove();
-      ToastManager.error(e, "Error zipping attachments");
+      console.log("Error zipping attachments", e);
     }
     // Remove source & zip file from cache.
     RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
@@ -192,9 +189,9 @@ export default async function downloadAttachment(
 ) {
   await createCacheDir();
 
-  let attachment = await db.attachments.attachment(hash);
+  let attachment = db.attachments.attachment(hash);
   if (!attachment) {
-    DatabaseLogger.log("Attachment not found");
+    console.log("attachment not found");
     return;
   }
 
@@ -209,42 +206,47 @@ export default async function downloadAttachment(
   }
 
   try {
-    await db
-      .fs()
-      .downloadFile(options.groupId || attachment.hash, attachment.hash);
-    if (!(await exists(attachment.hash))) {
-      DatabaseLogger.log("Attachment does not exist after download.");
+    console.log(
+      "starting download attachment",
+      attachment.metadata.hash,
+      options.groupId
+    );
+    await db.fs.downloadFile(
+      options.groupId || attachment.metadata.hash,
+      attachment.metadata.hash
+    );
+
+    if (!(await exists(attachment.metadata.hash))) {
       return;
     }
 
     if (options.base64 || options.text) {
-      DatabaseLogger.log(`Starting to decrypt... hash: ${attachment.hash}`);
       return await db.attachments.read(
-        attachment.hash,
+        attachment.metadata.hash,
         options.base64 ? "base64" : "text"
       );
     }
 
     let filename = getFileNameWithExtension(
-      attachment.filename,
-      attachment.mimeType
+      attachment.metadata.filename,
+      attachment.metadata.type
     );
 
     let key = await db.attachments.decryptKey(attachment.key);
-
     let info = {
       iv: attachment.iv,
       salt: attachment.salt,
-      length: attachment.size,
+      length: attachment.length,
       alg: attachment.alg,
-      hash: attachment.hash,
-      hashType: attachment.hashType,
-      mime: attachment.mimeType,
+      hash: attachment.metadata.hash,
+      hashType: attachment.metadata.hashType,
+      mime: attachment.metadata.type,
       fileName: options.cache ? undefined : filename,
       uri: options.cache ? undefined : folder.uri,
       chunkSize: attachment.chunkSize,
       appGroupId: IOS_APPGROUPID
     };
+
     let fileUri = await Sodium.decryptFile(
       key,
       info,
@@ -252,7 +254,7 @@ export default async function downloadAttachment(
     );
 
     if (!options.silent) {
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Download successful",
         message: filename + " downloaded",
         type: "success"
@@ -261,11 +263,11 @@ export default async function downloadAttachment(
 
     if (
       attachment.dateUploaded &&
-      !isImage(attachment.mimeType) &&
-      !isDocument(attachment.mimeType)
+      !isImage(attachment.metadata?.type) &&
+      !isDocument(attachment.metadata?.type)
     ) {
       RNFetchBlob.fs
-        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}`)
+        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.metadata.hash}`)
         .catch(console.log);
     }
     if (Platform.OS === "ios" && !options.cache) {
@@ -280,23 +282,20 @@ export default async function downloadAttachment(
             : "File Manager/Notesnook/downloads"
         }`,
         icon: "download",
-        context: global ? null : attachment.hash,
+        context: global ? null : attachment.metadata.hash,
         component: <ShareComponent uri={fileUri} name={filename} padding={12} />
       });
     }
 
     return fileUri;
   } catch (e) {
-    DatabaseLogger.error(e);
+    console.log("download attachment error: ", e);
     if (attachment.dateUploaded) {
       RNFetchBlob.fs
-        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}`)
-        .catch(console.log);
-      RNFetchBlob.fs
-        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}_dcache`)
+        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.metadata.hash}`)
         .catch(console.log);
     }
-    useAttachmentStore.getState().remove(attachment.hash);
+    useAttachmentStore.getState().remove(attachment.metadata.hash);
     if (options.throwError) {
       throw e;
     }

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

@@ -20,26 +20,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import hosts from "@notesnook/core/dist/utils/constants";
 import NetInfo from "@react-native-community/netinfo";
 import RNFetchBlob from "react-native-blob-util";
-import { ToastManager } from "../../services/event-manager";
+import { ToastEvent } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { DatabaseLogger, db } from "../database";
+import { db } from "../database";
 import { cacheDir, fileCheck } from "./utils";
 import { createCacheDir, exists } from "./io";
 
 export async function downloadFile(filename, data, cancelToken) {
-  if (!data) {
-    DatabaseLogger.log(`Error downloading file: ${filename}, reason: No data`);
-    return false;
-  }
+  if (!data) return false;
 
-  DatabaseLogger.log(`Downloading ${filename}`);
   await createCacheDir();
+
   let { url, headers } = data;
   let path = `${cacheDir}/${filename}`;
 
   try {
     if (await exists(filename)) {
-      DatabaseLogger.log(`File Exists already: ${filename}`);
       return true;
     }
 
@@ -47,24 +43,13 @@ export async function downloadFile(filename, data, cancelToken) {
       method: "GET",
       headers
     });
-
-    if (!res.ok) {
-      DatabaseLogger.log(
-        `Error downloading file: ${filename}, ${res.status}, ${res.statusText}, reason: Unable to resolve download url`
-      );
+    if (!res.ok)
       throw new Error(`${res.status}: Unable to resolve download url`);
-    }
-
     const downloadUrl = await res.text();
 
-    if (!downloadUrl) {
-      DatabaseLogger.log(
-        `Error downloading file: ${filename}, reason: Unable to resolve download url`
-      );
-      throw new Error("Unable to resolve download url");
-    }
+    if (!downloadUrl) throw new Error("Unable to resolve download url");
     let totalSize = 0;
-    DatabaseLogger.log(`Download starting: ${filename}`);
+    console.log("Download starting");
     let request = RNFetchBlob.config({
       path: path,
       IOSBackgroundTask: true
@@ -75,15 +60,13 @@ export async function downloadFile(filename, data, cancelToken) {
           .getState()
           .setProgress(0, total, filename, recieved, "download");
         totalSize = total;
-        DatabaseLogger.log(`Downloading: ${filename}, ${recieved}/${total}`);
+        console.log("downloading: ", recieved, total);
       });
 
     cancelToken.cancel = () => {
       useAttachmentStore.getState().remove(filename);
       request.cancel();
-      DatabaseLogger.log(`Download cancelled: ${filename}`);
     };
-
     let response = await request;
     await fileCheck(response, totalSize);
     let status = response.info().status;
@@ -91,13 +74,13 @@ export async function downloadFile(filename, data, cancelToken) {
     return status >= 200 && status < 300;
   } catch (e) {
     if (e.message !== "canceled") {
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Error downloading file",
         message: e.message,
         type: "error",
         context: "global"
       });
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Error downloading file",
         message: e.message,
         type: "error",
@@ -107,10 +90,7 @@ export async function downloadFile(filename, data, cancelToken) {
 
     useAttachmentStore.getState().remove(filename);
     RNFetchBlob.fs.unlink(path).catch(console.log);
-    DatabaseLogger.error(e, {
-      url,
-      headers
-    });
+    console.log("Download file error:", e, url, headers);
     return false;
   }
 }
@@ -118,18 +98,19 @@ export async function downloadFile(filename, data, cancelToken) {
 export async function getUploadedFileSize(hash) {
   try {
     const url = `${hosts.API_HOST}/s3?name=${hash}`;
-    const token = await db.tokenManager.getAccessToken();
+    const token = await db.user.tokenManager.getAccessToken();
+
     const attachmentInfo = await fetch(url, {
       method: "HEAD",
       headers: { Authorization: `Bearer ${token}` }
     });
+
     const contentLength = parseInt(
       attachmentInfo.headers?.get("content-length")
     );
     return isNaN(contentLength) ? 0 : contentLength;
   } catch (e) {
-    DatabaseLogger.error(e);
-    return -1;
+    return 0;
   }
 }
 
@@ -138,14 +119,12 @@ export async function checkAttachment(hash) {
   const isInternetReachable =
     internetState.isConnected && internetState.isInternetReachable;
   if (!isInternetReachable) return { success: true };
-  const attachment = await db.attachments.attachment(hash);
+  const attachment = db.attachments.attachment(hash);
   if (!attachment) return { failed: "Attachment not found." };
 
   try {
     const size = await getUploadedFileSize(hash);
-    if (size === -1) return { success: true };
-
-    if (size === 0) return { failed: "File length is 0." };
+    if (size <= 0) return { failed: "File length is 0." };
   } catch (e) {
     return { failed: e?.message };
   }

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

@@ -17,16 +17,17 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import Sodium from "@ammarahmed/react-native-sodium";
 import { Platform } from "react-native";
+import Sodium from "@ammarahmed/react-native-sodium";
 import RNFetchBlob from "react-native-blob-util";
-import { IOS_APPGROUPID } from "../../utils/constants";
-import { DatabaseLogger, db } from "../database";
 import { cacheDir, cacheDirOld, getRandomId } from "./utils";
+import { db } from "../database";
+import { compressToBase64 } from "./compress";
+import { IOS_APPGROUPID } from "../../utils/constants";
 
 export async function readEncrypted(filename, key, cipherData) {
   await migrateFilesFromCache();
-  DatabaseLogger.log("Read encrypted file...");
+  console.log("Read encrypted file...");
   let path = `${cacheDir}/${filename}`;
 
   try {
@@ -34,6 +35,14 @@ export async function readEncrypted(filename, key, cipherData) {
       return false;
     }
 
+    const attachment = db.attachments.attachment(filename);
+    const isPng = !attachment.metadata.type
+      ? false
+      : /(png)/g.test(attachment?.metadata.type);
+    const isJpeg = !attachment.metadata.type
+      ? false
+      : /(jpeg|jpg)/g.test(attachment?.metadata.type);
+
     let output = await Sodium.decryptFile(
       key,
       {
@@ -41,15 +50,25 @@ export async function readEncrypted(filename, key, cipherData) {
         hash: filename,
         appGroupId: IOS_APPGROUPID
       },
-      cipherData.outputType === "base64" ? "base64" : "text"
+      cipherData.outputType === "base64"
+        ? isPng || isJpeg
+          ? "cache"
+          : "base64"
+        : "text"
     );
-
-    DatabaseLogger.log("File decrypted...");
+    console.log("file decrypted...");
+    if (cipherData.outputType === "base64" && (isPng || isJpeg)) {
+      const dCachePath = `${cacheDir}/${output}`;
+      output = await compressToBase64(
+        `file://${dCachePath}`,
+        isPng ? "PNG" : "JPEG"
+      );
+    }
 
     return output;
   } catch (e) {
     RNFetchBlob.fs.unlink(path).catch(console.log);
-    DatabaseLogger.error(e);
+    console.log("readEncrypted", e);
     return false;
   }
 }
@@ -66,7 +85,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");
@@ -76,8 +95,6 @@ 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"
@@ -127,7 +144,7 @@ export async function clearFileStorage() {
 export async function createCacheDir() {
   if (!(await RNFetchBlob.fs.exists(cacheDir))) {
     await RNFetchBlob.fs.mkdir(cacheDir);
-    DatabaseLogger.log("Cache directory created");
+    console.log("Cache directory created");
   }
 }
 
@@ -177,19 +194,16 @@ export async function exists(filename) {
   }
 
   if (exists || existsInAppGroup) {
-    const attachment = await db.attachments.attachment(filename);
-    const totalChunks = Math.ceil(attachment.size / attachment.chunkSize);
+    const attachment = db.attachments.attachment(filename);
+    const totalChunks = Math.ceil(attachment.length / attachment.chunkSize);
     const totalAbytes = totalChunks * ABYTES;
-    const expectedFileSize = attachment.size + totalAbytes;
+    const expectedFileSize = attachment.length + totalAbytes;
 
     const stat = await RNFetchBlob.fs.stat(
       existsInAppGroup ? appGroupPath : path
     );
 
     if (stat.size !== expectedFileSize) {
-      DatabaseLogger.log(
-        `File size mismatch: ${filename}, expected: ${expectedFileSize}, actual: ${stat.size}`
-      );
       RNFetchBlob.fs
         .unlink(existsInAppGroup ? appGroupPath : path)
         .catch(console.log);

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

@@ -25,7 +25,6 @@ import { isImage, isDocument } from "@notesnook/core/dist/utils/filename";
 import { Platform } from "react-native";
 import { IOS_APPGROUPID } from "../../utils/constants";
 import { createCacheDir } from "./io";
-import { getUploadedFileSize } from "./download";
 
 export async function uploadFile(filename, data, cancelToken) {
   if (!data) return false;
@@ -34,18 +33,6 @@ export async function uploadFile(filename, data, cancelToken) {
   DatabaseLogger.info(`Preparing to upload file: ${filename}`);
 
   try {
-    const uploadedFileSize = await getUploadedFileSize(filename);
-    if (uploadedFileSize === -1) {
-      DatabaseLogger.log("Upload verification failed.");
-      return false;
-    }
-
-    const isUploaded = uploadedFileSize !== 0;
-    if (isUploaded) {
-      DatabaseLogger.log(`File ${filename} is already uploaded.`);
-      return true;
-    }
-
     let res = await fetch(url, {
       method: "PUT",
       headers
@@ -63,15 +50,7 @@ export async function uploadFile(filename, data, cancelToken) {
     let exists = await RNFetchBlob.fs.exists(uploadFilePath);
     if (!exists && Platform.OS === "ios") {
       uploadFilePath = appGroupPath;
-      exists = await RNFetchBlob.fs.exists(uploadFilePath);
     }
-
-    if (!exists) {
-      throw new Error(
-        `Trying to upload file at path ${uploadFilePath} that doest not exist.`
-      );
-    }
-
     DatabaseLogger.info(`Starting upload: ${filename}`);
 
     let request = RNFetchBlob.config({
@@ -108,9 +87,12 @@ export async function uploadFile(filename, data, cancelToken) {
       DatabaseLogger.info(
         `File upload status: ${filename}, ${status}, ${text}`
       );
-      let attachment = await db.attachments.attachment(filename);
+      let attachment = db.attachments.attachment(filename);
       if (!attachment) return result;
-      if (!isImage(attachment.mimeType) && !isDocument(attachment.mimeType)) {
+      if (
+        !isImage(attachment.metadata.type) &&
+        !isDocument(attachment.metadata?.type)
+      ) {
         RNFetchBlob.fs.unlink(`${cacheDir}/${filename}`).catch(console.log);
       }
     } else {

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

@@ -17,20 +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 { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { View } from "react-native";
-import { useMessageStore } from "../../stores/use-message-store";
+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 { 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={{
@@ -47,8 +45,7 @@ export const Announcement = ({ color }) => {
           borderRadius: 10,
           overflow: "hidden",
           backgroundColor: colors.secondary.background,
-          paddingBottom: 12,
-          ...getContainerBorder(colors.secondary.background)
+          paddingBottom: 12
         }}
       >
         <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="plain"
+                type="gray"
                 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="plain"
+                type="gray"
                 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="plain"
+        type="gray"
         icon="close"
         height={null}
         onPress={() => {

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

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

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

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

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

@@ -17,13 +17,9 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { formatBytes } from "@notesnook/common";
-import { Attachment, Note, VirtualizedGrouping } from "@notesnook/core";
-import { useThemeColors } from "@notesnook/theme";
 import Clipboard from "@react-native-clipboard/clipboard";
-import React, { RefObject, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { View } from "react-native";
-import { ActionSheetRef } from "react-native-actions-sheet";
 import { ScrollView } from "react-native-gesture-handler";
 import { db } from "../../common/database";
 import filesystem from "../../common/filesystem";
@@ -31,18 +27,14 @@ import downloadAttachment from "../../common/filesystem/download-attachment";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
 import picker from "../../screens/editor/tiptap/picker";
 import {
-  ToastManager,
   eSendEvent,
-  presentSheet
+  presentSheet,
+  ToastEvent
 } from "../../services/event-manager";
 import PremiumService from "../../services/premium";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import {
-  eCloseAttachmentDialog,
-  eCloseSheet,
-  eDBItemUpdate,
-  eOnLoadNote
-} from "../../utils/events";
+import { useThemeColors } from "@notesnook/theme";
+import { eCloseAttachmentDialog, eCloseSheet } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
@@ -51,43 +43,31 @@ import { openNote } from "../list-items/note/wrapper";
 import { DateMeta } from "../properties/date-meta";
 import { Button } from "../ui/button";
 import { Notice } from "../ui/notice";
-import { Pressable } from "../ui/pressable";
+import { PressableButton } 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";
-import SheetProvider from "../sheet-provider";
+import { formatBytes } from "@notesnook/common";
 
-const Actions = ({
-  attachment,
-  close,
-  setAttachments,
-  fwdRef
-}: {
-  attachment: Attachment;
-  setAttachments: (attachments?: VirtualizedGrouping<Attachment>) => void;
-  close?: () => void;
-  fwdRef: RefObject<ActionSheetRef>;
-}) => {
+const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
   const { colors } = useThemeColors();
-  const contextId = attachment.hash;
-  const [filename, setFilename] = useState(attachment.filename);
+  const contextId = attachment.metadata.hash;
+  const [filename, setFilename] = useState(attachment.metadata.filename);
   const [currentProgress] = useAttachmentProgress(attachment);
-  const [failed, setFailed] = useState<string | undefined>(attachment.failed);
-  const [notes, setNotes] = useState<Note[]>([]);
-  const [loading, setLoading] = useState<{
-    name?: string;
-  }>({});
+  const [failed, setFailed] = useState(attachment.failed);
+  const [notes, setNotes] = useState([]);
+  const [loading, setLoading] = useState({
+    name: null
+  });
 
   const actions = [
     {
       name: "Download",
       onPress: async () => {
         if (currentProgress) {
-          await db.fs().cancel(attachment.hash);
-          useAttachmentStore.getState().remove(attachment.hash);
+          await db.fs.cancel(attachment.metadata.hash);
+          useAttachmentStore.getState().remove(attachment.metadata.hash);
         }
-        downloadAttachment(attachment.hash, false);
+        downloadAttachment(attachment.metadata.hash, false);
         eSendEvent(eCloseSheet, contextId);
       },
       icon: "download"
@@ -96,7 +76,7 @@ const Actions = ({
       name: "Reupload",
       onPress: async () => {
         if (!PremiumService.get()) {
-          ToastManager.show({
+          ToastEvent.show({
             heading: "Upgrade to pro",
             type: "error",
             context: "local"
@@ -105,9 +85,9 @@ const Actions = ({
         }
         await picker.pick({
           reupload: true,
-          hash: attachment.hash,
+          hash: attachment.metadata.hash,
           context: contextId,
-          type: attachment.mimeType.startsWith("image") ? "image" : "file"
+          type: attachment.metadata.type
         });
       },
       icon: "upload"
@@ -118,20 +98,19 @@ const Actions = ({
         setLoading({
           name: "Run file check"
         });
-        const res = await filesystem.checkAttachment(attachment.hash);
+        let res = await filesystem.checkAttachment(attachment.metadata.hash);
         if (res.failed) {
           db.attachments.markAsFailed(attachment.id, res.failed);
           setFailed(res.failed);
-          ToastManager.show({
+          ToastEvent.show({
             heading: "File check failed with error: " + res.failed,
             type: "error",
             context: "local"
           });
         } else {
-          setFailed(undefined);
-          db.attachments.markAsFailed(attachment.id);
-          eSendEvent(eDBItemUpdate, attachment.id);
-          ToastManager.show({
+          setFailed(null);
+          db.attachments.markAsFailed(attachment.id, null);
+          ToastEvent.show({
             heading: "File check passed",
             type: "success",
             context: "local"
@@ -140,7 +119,7 @@ const Actions = ({
 
         setAttachments();
         setLoading({
-          name: undefined
+          name: null
         });
       },
       icon: "file-check"
@@ -149,20 +128,19 @@ const Actions = ({
       name: "Rename",
       onPress: () => {
         presentDialog({
-          context: contextId as any,
+          context: contextId,
           input: true,
           title: "Rename file",
           paragraph: "Enter a new name for the file",
-          defaultValue: attachment.filename,
+          defaultValue: attachment.metadata.filename,
           positivePress: async (value) => {
             if (value && value.length > 0) {
               await db.attachments.add({
-                hash: attachment.hash,
+                hash: attachment.metadata.hash,
                 filename: value
               });
               setFilename(value);
               setAttachments();
-              eSendEvent(eDBItemUpdate, attachment.id);
             }
           },
           positiveText: "Rename"
@@ -173,40 +151,34 @@ const Actions = ({
     {
       name: "Delete",
       onPress: async () => {
-        const relations = await db.relations.to(attachment, "note").get();
-        await db.attachments.remove(attachment.hash, false);
+        await db.attachments.remove(attachment.metadata.hash, false);
         setAttachments();
-        eSendEvent(eDBItemUpdate, attachment.id);
-        relations
-          .map((relation) => relation.fromId)
-          .forEach(async (id) => {
-            const tab = useTabStore.getState().getTabForNote(id);
-            if (tab !== undefined) {
-              const isFocused = useTabStore.getState().currentTab === tab;
-              if (isFocused) {
-                eSendEvent(eOnLoadNote, {
-                  item: await db.notes.note(id),
-                  forced: true
-                });
-              } else {
-                editorController.current.commands.setLoading(true, tab);
-              }
-            }
-          });
-        close?.();
+        close();
       },
       icon: "delete-outline"
     }
   ];
 
+  const getNotes = useCallback(() => {
+    let allNotes = db.notes.all;
+    let attachmentNotes = attachment.noteIds?.map((id) => {
+      let index = allNotes?.findIndex((note) => id === note.id);
+      if (index !== -1) {
+        return allNotes[index];
+      } else {
+        return {
+          type: "notfound",
+          title: `Note with id ${id} does not exist.`,
+          id: id
+        };
+      }
+    });
+    return attachmentNotes;
+  }, [attachment.noteIds]);
+
   useEffect(() => {
-    db.relations
-      .to(attachment, "note")
-      .selector.items()
-      .then((items) => {
-        setNotes(items);
-      });
-  }, [attachment]);
+    setNotes(getNotes());
+  }, [attachment, getNotes]);
 
   return (
     <ScrollView
@@ -219,11 +191,10 @@ const Actions = ({
       }}
     >
       <Dialog context={contextId} />
-      <SheetProvider context={contextId} />
       <View
         style={{
           borderBottomWidth: 1,
-          borderBottomColor: colors.primary.border,
+          borderBottomColor: colors.secondary.background,
           marginBottom: notes && notes.length > 0 ? 0 : 12
         }}
       >
@@ -240,28 +211,44 @@ const Actions = ({
           style={{
             flexDirection: "row",
             marginBottom: 10,
-            paddingHorizontal: 12,
-            marginTop: 6,
-            gap: 10
+            paddingHorizontal: 12
           }}
         >
-          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
-            {attachment.mimeType}
+          <Paragraph
+            size={SIZE.xs}
+            style={{
+              marginRight: 10
+            }}
+            color={colors.secondary.paragraph}
+          >
+            {attachment.metadata.type}
           </Paragraph>
-          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
-            {formatBytes(attachment.size)}
+          <Paragraph
+            style={{
+              marginRight: 10
+            }}
+            size={SIZE.xs}
+            color={colors.secondary.paragraph}
+          >
+            {formatBytes(attachment.length)}
           </Paragraph>
 
-          {notes.length ? (
-            <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
-              {notes.length} note
-              {notes.length > 1 ? "s" : ""}
+          {attachment.noteIds ? (
+            <Paragraph
+              style={{
+                marginRight: 10
+              }}
+              size={SIZE.xs}
+              color={colors.secondary.paragraph}
+            >
+              {attachment.noteIds.length} note
+              {attachment.noteIds.length > 1 ? "s" : ""}
             </Paragraph>
           ) : null}
           <Paragraph
             onPress={() => {
-              Clipboard.setString(attachment.hash);
-              ToastManager.show({
+              Clipboard.setString(attachment.metadata.hash);
+              ToastEvent.show({
                 type: "success",
                 heading: "Attachment hash copied",
                 context: "local"
@@ -270,7 +257,7 @@ const Actions = ({
             size={SIZE.xs}
             color={colors.secondary.paragraph}
           >
-            {attachment.hash}
+            {attachment.metadata.hash}
           </Paragraph>
         </View>
 
@@ -281,7 +268,7 @@ const Actions = ({
         <View
           style={{
             borderBottomWidth: 1,
-            borderBottomColor: colors.primary.border,
+            borderBottomColor: colors.secondary.background,
             marginBottom: 12,
             paddingVertical: 12
           }}
@@ -297,15 +284,25 @@ const Actions = ({
             </Heading>
 
             {notes.map((item) => (
-              <Pressable
+              <PressableButton
                 onPress={async () => {
+                  if (item.type === "notfound") {
+                    ToastEvent.show({
+                      heading: "Note not found",
+                      message:
+                        "A note with the given id was not found. Maybe you have deleted the note or moved it to trash already.",
+                      type: "error",
+                      context: "local"
+                    });
+                    return;
+                  }
                   eSendEvent(eCloseSheet, contextId);
                   await sleep(150);
                   eSendEvent(eCloseAttachmentDialog);
                   await sleep(300);
-                  openNote(item, (item as any).type === "trash");
+                  openNote(item, item.type === "trash");
                 }}
-                style={{
+                customStyle={{
                   paddingVertical: 12,
                   alignItems: "flex-start",
 
@@ -314,7 +311,7 @@ const Actions = ({
                 key={item.id}
               >
                 <Paragraph size={SIZE.xs}>{item.title}</Paragraph>
-              </Pressable>
+              </PressableButton>
             ))}
           </>
         </View>
@@ -324,16 +321,17 @@ const Actions = ({
         <Button
           key={item.name}
           buttonType={{
-            text:
-              item.name === "Delete"
-                ? colors.error.paragraph
-                : colors.primary.paragraph
+            text: item.on
+              ? colors.primary.accent
+              : item.name === "Delete" || item.name === "PermDelete"
+              ? colors.error.paragraph
+              : colors.primary.paragraph
           }}
           onPress={item.onPress}
           title={item.name}
           icon={item.icon}
           loading={loading?.name === item.name}
-          type="plain"
+          type={item.on ? "shade" : "gray"}
           fontSize={SIZE.sm}
           style={{
             borderRadius: 0,
@@ -352,7 +350,7 @@ const Actions = ({
         {failed ? (
           <Notice
             type="alert"
-            text={`File check failed: ${failed} Try reuploading the file to fix the issue.`}
+            text={`File check failed with error: ${attachment.failed} Try reuploading the file to fix the issue.`}
             size="small"
           />
         ) : null}
@@ -361,11 +359,7 @@ const Actions = ({
   );
 };
 
-Actions.present = (
-  attachment: Attachment,
-  set: (attachments?: VirtualizedGrouping<Attachment>) => void,
-  context?: string
-) => {
+Actions.present = (attachment, set, context) => {
   presentSheet({
     context: context,
     component: (ref, close) => (

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

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

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

@@ -1,191 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import { formatBytes } from "@notesnook/common";
-import { Attachment, VirtualizedGrouping } from "@notesnook/core";
-import { useThemeColors } from "@notesnook/theme";
-import React from "react";
-import { TouchableOpacity, View } from "react-native";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { db } from "../../common/database";
-import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
-import { useDBItem } from "../../hooks/use-db-item";
-import { SIZE } from "../../utils/size";
-import { IconButton } from "../ui/icon-button";
-import { ProgressCircleComponent } from "../ui/svg/lazy";
-import Paragraph from "../ui/typography/paragraph";
-import Actions from "./actions";
-
-function getFileExtension(filename: string) {
-  const ext = /^.+\.([^.]+)$/.exec(filename);
-  return ext == null ? "" : ext[1];
-}
-
-export const AttachmentItem = ({
-  id,
-  attachments,
-  encryption,
-  setAttachments,
-  pressable = true,
-  hideWhenNotDownloading,
-  context
-}: {
-  id: string | number;
-  attachments?: VirtualizedGrouping<Attachment>;
-  encryption?: boolean;
-  setAttachments: (attachments: any) => void;
-  pressable?: boolean;
-  hideWhenNotDownloading?: boolean;
-  context?: string;
-}) => {
-  const [attachment] = useDBItem(id, "attachment", attachments);
-
-  const { colors } = useThemeColors();
-  const [currentProgress, setCurrentProgress] = useAttachmentProgress(
-    attachment,
-    encryption
-  );
-
-  const onPress = () => {
-    if (!pressable || !attachment) return;
-    Actions.present(attachment, setAttachments, context);
-  };
-
-  return hideWhenNotDownloading &&
-    (!currentProgress || !currentProgress.value) ? null : (
-    <TouchableOpacity
-      activeOpacity={0.9}
-      onPress={onPress}
-      style={{
-        flexDirection: "row",
-        marginVertical: 5,
-        justifyContent: "space-between",
-        padding: 12,
-        paddingVertical: 6,
-        borderRadius: 5,
-        backgroundColor: colors.secondary.background,
-        minHeight: 45
-      }}
-    >
-      {!attachment ? 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.js

@@ -21,10 +21,7 @@ import React, { useRef, useState } from "react";
 import { Platform, View } from "react-native";
 import { db } from "../../common/database";
 import { downloadAttachments } from "../../common/filesystem/download-attachment";
-import {
-  PresentSheetOptions,
-  presentSheet
-} from "../../services/event-manager";
+import { presentSheet } from "../../services/event-manager";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
@@ -32,19 +29,8 @@ import { ProgressBarComponent } from "../ui/svg/lazy";
 import { useThemeColors } from "@notesnook/theme";
 import { FlatList } from "react-native-actions-sheet";
 import { AttachmentItem } from "./attachment-item";
-import { Attachment, VirtualizedGrouping } from "@notesnook/core";
 
-const DownloadAttachments = ({
-  close,
-  attachments,
-  isNote,
-  update
-}: {
-  attachments: VirtualizedGrouping<Attachment>;
-  close?: ((ctx?: string | undefined) => void) | undefined;
-  isNote?: boolean;
-  update?: (props: PresentSheetOptions) => void;
-}) => {
+const DownloadAttachments = ({ close, attachments, isNote, update }) => {
   const { colors } = useThemeColors();
   const [downloading, setDownloading] = useState(false);
   const [progress, setProgress] = useState({
@@ -53,58 +39,63 @@ const DownloadAttachments = ({
   });
   const [result, setResult] = useState(new Map());
   const canceled = useRef(false);
-  const groupId = useRef<string>();
+  const groupId = useRef();
 
   const onDownload = async () => {
-    update?.({
+    update({
       disableClosing: true
-    } as PresentSheetOptions);
+    });
     setDownloading(true);
     canceled.current = false;
     groupId.current = Date.now().toString();
     const result = await downloadAttachments(
-      await attachments.ids(),
-      (progress: number, statusText: string) =>
-        setProgress({ value: progress, statusText }),
+      attachments,
+      (progress, statusText) => setProgress({ value: progress, statusText }),
       canceled,
       groupId.current
     );
     if (canceled.current) return;
     setResult(result || new Map());
     setDownloading(false);
-    update?.({
+    update({
       disableClosing: false
-    } as PresentSheetOptions);
+    });
   };
 
   const cancel = async () => {
-    update?.({
+    update({
       disableClosing: false
-    } as PresentSheetOptions);
+    });
     canceled.current = true;
-    if (!groupId.current) return;
     console.log(groupId.current, "canceling groupId downloads");
-    await db.fs().cancel(groupId.current);
+    await db.fs.cancel(groupId.current);
     setDownloading(false);
-    setResult(new Map());
-    groupId.current = undefined;
+    groupId.current = null;
+  };
+
+  const successResults = () => {
+    const results = [];
+    for (let [key, value] of result.entries()) {
+      if (value.status === 1) results.push(db.attachments.attachment(key));
+    }
+    return results;
   };
 
   const failedResults = () => {
     const results = [];
-    for (const value of result.values()) {
-      if (value.status === 0) results.push(value.attachment);
+    for (let [key, value] of result.entries()) {
+      if (value.status === 0) results.push(db.attachments.attachment(key));
     }
     return results;
   };
 
   function getResultText() {
     const downloadedAttachmentsCount =
-      attachments?.placeholders?.length - failedResults().length;
+      attachments.length - failedResults().length;
     if (downloadedAttachmentsCount === 0)
       return "Failed to download all attachments";
     return `Successfully downloaded ${downloadedAttachmentsCount}/${
-      attachments?.placeholders.length
+      attachments.length
     } attachments as a zip file at ${
       Platform.OS === "android" ? "the selected folder" : "Notesnook/downloads"
     }`;
@@ -166,11 +157,7 @@ const DownloadAttachments = ({
             width={null}
             animated={true}
             useNativeDriver
-            progress={
-              progress.value
-                ? progress.value / attachments.placeholders?.length
-                : 0
-            }
+            progress={progress.value ? progress.value / attachments.length : 0}
             unfilledColor={colors.secondary.background}
             color={colors.primary.accent}
             borderWidth={0}
@@ -187,7 +174,7 @@ const DownloadAttachments = ({
           borderRadius: 5,
           marginVertical: 12
         }}
-        data={downloading ? attachments.placeholders : undefined}
+        data={downloading ? attachments : []}
         ListEmptyComponent={
           <View
             style={{
@@ -202,15 +189,14 @@ const DownloadAttachments = ({
             </Paragraph>
           </View>
         }
-        keyExtractor={(index) => "attachment_download" + index}
-        renderItem={({ index }) => {
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => {
           return (
             <AttachmentItem
-              id={index}
+              attachment={item}
               setAttachments={() => {}}
               pressable={false}
               hideWhenNotDownloading={true}
-              attachments={attachments}
             />
           );
         }}
@@ -223,9 +209,7 @@ const DownloadAttachments = ({
             borderRadius: 100,
             marginTop: 20
           }}
-          onPress={() => {
-            close?.();
-          }}
+          onPress={close}
           type="accent"
           title="Done"
         />
@@ -243,10 +227,8 @@ const DownloadAttachments = ({
               borderRadius: 100,
               marginRight: 5
             }}
-            onPress={() => {
-              close?.();
-            }}
-            type="secondary"
+            onPress={close}
+            type="grayBg"
             title="No"
           />
           <Button
@@ -276,11 +258,7 @@ const DownloadAttachments = ({
   );
 };
 
-DownloadAttachments.present = (
-  context: string,
-  attachments: VirtualizedGrouping<Attachment>,
-  isNote?: boolean
-) => {
+DownloadAttachments.present = (context, attachments, isNote) => {
   presentSheet({
     context: context,
     component: (ref, close, update) => (

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

@@ -17,25 +17,16 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import {
-  Attachment,
-  Note,
-  SortOptions,
-  VirtualizedGrouping
-} from "@notesnook/core";
-import { FilteredSelector } from "@notesnook/core/dist/database/sql-collection";
-import { useThemeColors } from "@notesnook/theme";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { ActivityIndicator, ScrollView, View } from "react-native";
-import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
+
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import filesystem from "../../common/filesystem";
 import { presentSheet } from "../../services/event-manager";
-import { useSettingStore } from "../../stores/use-setting-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import SheetProvider from "../sheet-provider";
-import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
 import Seperator from "../ui/seperator";
@@ -43,92 +34,82 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { AttachmentItem } from "./attachment-item";
 import DownloadAttachments from "./download-attachments";
+import { Button } from "../ui/button";
+import {
+  isAudio,
+  isDocument,
+  isImage,
+  isVideo
+} from "@notesnook/core/dist/utils/filename";
+import { useSettingStore } from "../../stores/use-setting-store";
+import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
 
-const DEFAULT_SORTING: SortOptions = {
-  sortBy: "dateEdited",
-  sortDirection: "desc"
-};
-
-export const AttachmentDialog = ({ note }: { note?: Note }) => {
+export const AttachmentDialog = ({ note }) => {
   const { colors } = useThemeColors();
   const { height } = useSettingStore((state) => state.dimensions);
-  const [attachments, setAttachments] =
-    useState<VirtualizedGrouping<Attachment>>();
-  const attachmentSearchValue = useRef<string>();
-  const searchTimer = useRef<NodeJS.Timeout>();
+  const [attachments, setAttachments] = useState(
+    note
+      ? db.attachments.ofNote(note?.id, "all")
+      : [...(db.attachments.all || [])]
+  );
+
+  const attachmentSearchValue = useRef();
+  const searchTimer = useRef();
   const [loading, setLoading] = useState(false);
   const [currentFilter, setCurrentFilter] = useState("all");
 
-  const refresh = React.useCallback(() => {
-    if (note) {
-      db.attachments
-        .ofNote(note.id, "all")
-        .sorted({
-          ...DEFAULT_SORTING,
-          sortBy: "dateModified"
-        })
-        .then((attachments) => {
-          setAttachments(attachments);
-        });
-    } else {
-      db.attachments.all
-        .sorted({
-          ...DEFAULT_SORTING,
-          sortBy: "dateModified"
-        })
-        .then((attachments) => setAttachments(attachments));
-    }
-  }, [note]);
+  const onChangeText = (text) => {
+    const attachments = note?.id
+      ? db.attachments.ofNote(note?.id, "all")
+      : [...(db.attachments.all || [])];
 
-  useEffect(() => {
-    refresh();
-  }, [note, refresh]);
-
-  const onChangeText = async (text: string) => {
     attachmentSearchValue.current = text;
     if (
       !attachmentSearchValue.current ||
       attachmentSearchValue.current === ""
     ) {
-      setAttachments(await filterAttachments(currentFilter));
-      refresh();
+      setAttachments(filterAttachments(currentFilter));
     }
     clearTimeout(searchTimer.current);
-    searchTimer.current = setTimeout(async () => {
-      const results = await db.lookup
-        .attachments(attachmentSearchValue.current as string)
-        .sorted();
+    searchTimer.current = setTimeout(() => {
+      let results = db.lookup.attachments(
+        attachments,
+        attachmentSearchValue.current
+      );
       if (results.length === 0) return;
-      setAttachments(results);
+
+      setAttachments(filterAttachments(currentFilter, results));
     }, 300);
   };
 
-  const renderItem = ({ index }: { item: boolean; index: number }) => (
+  const renderItem = ({ item }) => (
     <AttachmentItem
-      setAttachments={async () => {
-        setAttachments(await filterAttachments(currentFilter));
+      setAttachments={() => {
+        setAttachments(filterAttachments(currentFilter));
       }}
-      attachments={attachments}
-      id={index}
+      attachment={item}
       context="attachments-list"
     />
   );
 
   const onCheck = async () => {
-    if (!attachments) return;
     setLoading(true);
-
-    for (let i = 0; i < attachments.placeholders.length; i++) {
-      const attachment = (await attachments.item(i))?.item;
-      if (!attachment) continue;
-      const result = await filesystem.checkAttachment(attachment.hash);
+    const checkedAttachments = [];
+    for (let attachment of attachments) {
+      let result = await filesystem.checkAttachment(attachment.metadata.hash);
       if (result.failed) {
-        await db.attachments.markAsFailed(attachment.hash, result.failed);
+        await db.attachments.markAsFailed(
+          attachment.metadata.hash,
+          result.failed
+        );
       } else {
-        await db.attachments.markAsFailed(attachment.id, undefined);
+        await db.attachments.markAsFailed(attachment.id, null);
       }
+      checkedAttachments.push(
+        db.attachments.attachment(attachment.metadata.hash)
+      );
+      setAttachments([...checkedAttachments]);
     }
-    refresh();
     setLoading(false);
   };
 
@@ -155,40 +136,33 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
     }
   ];
 
-  const filterAttachments = async (type: string) => {
-    let items: FilteredSelector<Attachment> = db.attachments.all;
+  const filterAttachments = (type, _attachments) => {
+    const attachments = _attachments
+      ? _attachments
+      : note
+      ? db.attachments.ofNote(note?.id, "all")
+      : [...(db.attachments.all || [])];
 
     switch (type) {
       case "all":
-        items = note
-          ? db.attachments.ofNote(note.id, "all")
-          : db.attachments.all;
-        break;
+        return attachments;
       case "images":
-        items = note
-          ? db.attachments.ofNote(note.id, "images")
-          : db.attachments.images;
-        break;
+        return attachments.filter((attachment) =>
+          isImage(attachment.metadata.type)
+        );
       case "video":
-        items = items = note
-          ? db.attachments.ofNote(note.id, "videos")
-          : db.attachments.videos;
-        break;
+        return attachments.filter((attachment) =>
+          isVideo(attachment.metadata.type)
+        );
       case "audio":
-        items = note
-          ? db.attachments.ofNote(note.id, "audio")
-          : db.attachments.audios;
-        break;
+        return attachments.filter((attachment) =>
+          isAudio(attachment.metadata.type)
+        );
       case "documents":
-        items = note
-          ? db.attachments.ofNote(note.id, "documents")
-          : db.attachments.documents;
+        return attachments.filter((attachment) =>
+          isDocument(attachment.metadata.type)
+        );
     }
-
-    return await items.sorted({
-      ...DEFAULT_SORTING,
-      sortBy: "dateModified"
-    });
   };
 
   return (
@@ -227,7 +201,7 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
           ) : (
             <IconButton
               name="check-all"
-              style={{
+              customStyle={{
                 height: 40,
                 width: 40,
                 marginRight: 10
@@ -240,13 +214,12 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
 
           <IconButton
             name="download"
-            style={{
+            customStyle={{
               height: 40,
               width: 40
             }}
             color={colors.primary.paragraph}
             onPress={() => {
-              if (!attachments) return;
               DownloadAttachments.present(
                 "attachments-list",
                 attachments,
@@ -263,7 +236,7 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
         placeholder="Filter attachments by filename, type or hash"
         onChangeText={onChangeText}
         onSubmit={() => {
-          onChangeText(attachmentSearchValue.current as string);
+          onChangeText(attachmentSearchValue.current);
         }}
       />
 
@@ -283,11 +256,12 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
         >
           {attachmentTypes.map((item) => (
             <Button
-              type={
-                currentFilter === item.filterBy ? "secondaryAccented" : "plain"
-              }
+              type={currentFilter === item.filterBy ? "grayAccent" : "gray"}
               key={item.title}
-              title={item.title}
+              title={
+                item.title +
+                ` (${filterAttachments(item.filterBy)?.length || 0})`
+              }
               style={{
                 borderRadius: 0,
                 borderBottomWidth: 1,
@@ -297,9 +271,9 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
                     ? "transparent"
                     : colors.primary.accent
               }}
-              onPress={async () => {
+              onPress={() => {
                 setCurrentFilter(item.filterBy);
-                setAttachments(await filterAttachments(item.filterBy));
+                setAttachments(filterAttachments(item.filterBy));
               }}
             />
           ))}
@@ -330,7 +304,7 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
           />
         }
         estimatedItemSize={50}
-        data={attachments?.placeholders}
+        data={attachments}
         renderItem={renderItem}
       />
 
@@ -353,7 +327,7 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
   );
 };
 
-AttachmentDialog.present = (note?: Note) => {
+AttachmentDialog.present = (note) => {
   presentSheet({
     component: () => <AttachmentDialog note={note} />
   });

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

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

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

@@ -23,7 +23,7 @@ import { db } from "../../common/database";
 import {
   eSendEvent,
   presentSheet,
-  ToastManager
+  ToastEvent
 } from "../../services/event-manager";
 import { useUserStore } from "../../stores/use-user-store";
 import { eCloseSheet, eOpenRecoveryKeyDialog } from "../../utils/events";
@@ -48,7 +48,7 @@ export const ChangePassword = () => {
 
   const changePassword = async () => {
     if (!user?.isEmailConfirmed) {
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Email not confirmed",
         message: "Please confirm your email to change account password",
         type: "error",
@@ -57,7 +57,7 @@ export const ChangePassword = () => {
       return;
     }
     if (error || !oldPassword.current || !password.current) {
-      ToastManager.show({
+      ToastEvent.show({
         heading: "All fields required",
         message: "Fill all the fields and try again.",
         type: "error",
@@ -72,7 +72,7 @@ export const ChangePassword = () => {
 
       await db.user.clearSessions();
       await db.user.changePassword(oldPassword.current, password.current);
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Account password updated",
         type: "success",
         context: "global"
@@ -83,7 +83,7 @@ export const ChangePassword = () => {
       eSendEvent(eOpenRecoveryKeyDialog);
     } catch (e) {
       setLoading(false);
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Failed to change password",
         message: e.message,
         type: "error",

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

@@ -22,7 +22,7 @@ import { View } from "react-native";
 import ActionSheet from "react-native-actions-sheet";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
-import { ToastManager } from "../../services/event-manager";
+import { ToastEvent } from "../../services/event-manager";
 import SettingsService from "../../services/settings";
 import { useThemeColors } from "@notesnook/theme";
 import DialogHeader from "../dialog/dialog-header";
@@ -43,7 +43,7 @@ export const ForgotPassword = () => {
 
   const sendRecoveryEmail = async () => {
     if (!email.current || error) {
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Account email is required.",
         type: "error",
         context: "local"
@@ -63,7 +63,7 @@ export const ForgotPassword = () => {
       SettingsService.set({
         lastRecoveryEmailTime: Date.now()
       });
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Check your email to reset password",
         message: `Recovery email has been sent to ${email.current.toLowerCase()}`,
         type: "success",
@@ -74,7 +74,7 @@ export const ForgotPassword = () => {
       setSent(true);
     } catch (e) {
       setLoading(false);
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Recovery email not sent",
         message: e.message,
         type: "error",
@@ -113,7 +113,7 @@ export const ForgotPassword = () => {
             }}
           >
             <IconButton
-              style={{
+              customStyle={{
                 width: null,
                 height: null
               }}

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

@@ -59,6 +59,22 @@ 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,7 +38,6 @@ 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,
@@ -104,7 +103,7 @@ export const Login = ({ changeMode }) => {
             justifyContent: "flex-end",
             paddingHorizontal: 20,
             backgroundColor: colors.secondary.background,
-            borderBottomWidth: 0.8,
+            borderBottomWidth: 1,
             marginBottom: 12,
             borderBottomColor: colors.primary.border,
             alignSelf: deviceMode !== "mobile" ? "center" : undefined,
@@ -223,7 +222,7 @@ export const Login = ({ changeMode }) => {
                   textDecorationLine: "underline"
                 }}
                 fontSize={SIZE.xs}
-                type="plain"
+                type="gray"
               />
             </>
           )}

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

@@ -24,7 +24,7 @@ import { db } from "../../common/database";
 import { MMKV } from "../../common/database/mmkv";
 import BiometricService from "../../services/biometrics";
 import {
-  ToastManager,
+  ToastEvent,
   eSendEvent,
   eSubscribeEvent
 } from "../../services/event-manager";
@@ -91,7 +91,7 @@ export const SessionExpired = () => {
         disableAppLockRequests: false
       });
     } catch (e) {
-      ToastManager.show({
+      ToastEvent.show({
         heading: e.message,
         type: "error",
         context: "local"
@@ -108,9 +108,9 @@ export const SessionExpired = () => {
 
   const open = React.useCallback(async () => {
     try {
-      let res = await db.tokenManager.getToken();
+      let res = await db.user.tokenManager.getToken();
       if (!res) throw new Error("no token found");
-      if (db.tokenManager._isTokenExpired(res))
+      if (db.user.tokenManager._isTokenExpired(res))
         throw new Error("token expired");
       Sync.run("global", false, true, async (complete) => {
         if (!complete) {
@@ -148,9 +148,6 @@ export const SessionExpired = () => {
         animated={false}
         centered={false}
         onShow={async () => {
-          useUserStore.setState({
-            disableAppLockRequests: true
-          });
           await sleep(300);
           passwordInputRef.current?.focus();
           setFocused(true);
@@ -181,7 +178,7 @@ export const SessionExpired = () => {
             }}
           >
             <IconButton
-              style={{
+              customStyle={{
                 width: 60,
                 height: 60
               }}

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

@@ -21,7 +21,7 @@ import React, { useRef, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
-import { ToastManager } from "../../services/event-manager";
+import { ToastEvent } from "../../services/event-manager";
 import { clearMessage, setEmailVerifyMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
 import { useThemeColors } from "@notesnook/theme";
@@ -52,7 +52,7 @@ export const Signup = ({ changeMode, trial }) => {
   const { width, height } = useWindowDimensions();
   const validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
-      ToastManager.show({
+      ToastEvent.show({
         heading: "All fields required",
         message: "Fill all the fields and try again",
         type: "error",
@@ -85,7 +85,7 @@ export const Signup = ({ changeMode, trial }) => {
       }
     } catch (e) {
       setLoading(false);
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Signup failed",
         message: e.message,
         type: "error",
@@ -111,7 +111,7 @@ export const Signup = ({ changeMode, trial }) => {
             paddingHorizontal: 20,
             backgroundColor: colors.secondary.background,
             marginBottom: 20,
-            borderBottomWidth: 0.8,
+            borderBottomWidth: 1,
             borderBottomColor: colors.primary.border,
             alignSelf: deviceMode !== "mobile" ? "center" : undefined,
             borderWidth: deviceMode !== "mobile" ? 1 : null,

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

@@ -24,7 +24,7 @@ import useTimer from "../../hooks/use-timer";
 import {
   eSendEvent,
   presentSheet,
-  ToastManager
+  ToastEvent
 } from "../../services/event-manager";
 import { useThemeColors } from "@notesnook/theme";
 import { eCloseSheet } from "../../utils/events";
@@ -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 { Pressable } from "../ui/pressable";
+import { PressableButton } from "../ui/pressable";
 import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
@@ -138,7 +138,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
       setSending(false);
     } catch (e) {
       setSending(false);
-      ToastManager.error(e, "Error sending 2FA Code", "local");
+      ToastEvent.error(e, "Error sending 2FA Code", "local");
     }
   }, [currentMethod.method, mfaInfo.token, seconds, sending, start]);
 
@@ -151,7 +151,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
         }}
       >
         <IconButton
-          style={{
+          customStyle={{
             width: 70,
             height: 70
           }}
@@ -183,7 +183,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
         {currentMethod.method === "sms" || currentMethod.method === "email" ? (
           <Button
             onPress={onSendCode}
-            type={seconds ? "plain" : "transparent"}
+            type={seconds ? "gray" : "transparent"}
             title={
               sending
                 ? ""
@@ -247,7 +247,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
 
             <Button
               title={secondaryMethodsText[currentMethod.method]}
-              type="plain"
+              type="gray"
               onPress={onRequestSecondaryMethod}
               height={30}
             />
@@ -255,7 +255,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
         ) : (
           <>
             {getMethods().map((item) => (
-              <Pressable
+              <PressableButton
                 key={item.title}
                 onPress={() => {
                   setCurrentMethod({
@@ -263,7 +263,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                     isPrimary: false
                   });
                 }}
-                style={{
+                customStyle={{
                   paddingHorizontal: 12,
                   paddingVertical: 12,
                   marginTop: 0,
@@ -275,8 +275,8 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 }}
               >
                 <IconButton
-                  type="secondaryAccented"
-                  style={{
+                  type="grayAccent"
+                  customStyle={{
                     width: 40,
                     height: 40,
                     marginRight: 10
@@ -292,7 +292,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 >
                   <Paragraph size={SIZE.md}>{item.title}</Paragraph>
                 </View>
-              </Pressable>
+              </PressableButton>
             ))}
           </>
         )}

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

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useRef, useState } from "react";
 import { db } from "../../common/database";
-import { eSendEvent, ToastManager } from "../../services/event-manager";
+import { eSendEvent, ToastEvent } from "../../services/event-manager";
 import { clearMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
@@ -48,7 +48,7 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
       (!password.current && step === LoginSteps.passwordAuth) ||
       (!email.current && step === LoginSteps.emailAuth)
     ) {
-      ToastManager.show({
+      ToastEvent.show({
         heading: "All fields required",
         message: "Fill all the fields and try again",
         type: "error",
@@ -121,7 +121,7 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
   const finishWithError = async (e) => {
     if (e.message === "invalid_grant") setStep(LoginSteps.emailAuth);
     setLoading(false);
-    ToastManager.show({
+    ToastEvent.show({
       heading: "Login failed",
       message: e.message,
       type: "error",
@@ -135,7 +135,7 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
     PremiumService.setPremiumStatus();
     setUser(user);
     clearMessage();
-    ToastManager.show({
+    ToastEvent.show({
       heading: "Login successful",
       message: `Logged in as ${user.email}`,
       type: "success",

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

@@ -17,23 +17,24 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { ItemMap, ItemType } from "@notesnook/core";
-import {
-  ResolvedItemOptions,
-  useResolvedItem
-} from "../hooks/use-resolved-item";
+import React, { PropsWithChildren } from "react";
+import { View } from "react-native";
+import { useSelectionStore } from "../../stores/use-selection-store";
+import { useThemeColors } from "@notesnook/theme";
 
-type ResolvedItemProps<TItemType extends ItemType> =
-  ResolvedItemOptions<TItemType> & {
-    children: (item: {
-      item: ItemMap[TItemType];
-      data: unknown;
-    }) => React.ReactNode;
-  };
-export function ResolvedItem<TItemType extends ItemType>(
-  props: ResolvedItemProps<TItemType>
-) {
-  const { children } = props;
-  const { item, data } = useResolvedItem(props) || {};
-  return item ? <>{children({ item, data })}</> : null;
-}
+export const ContainerHeader = (props: PropsWithChildren) => {
+  const { colors } = useThemeColors();
+  const selectionMode = useSelectionStore((state) => state.selectionMode);
+
+  return !selectionMode ? (
+    <View
+      style={{
+        backgroundColor: colors.primary.background,
+        width: "100%",
+        overflow: "hidden"
+      }}
+    >
+      {props.children}
+    </View>
+  ) : null;
+};

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

@@ -18,7 +18,6 @@ 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, {
@@ -35,13 +34,12 @@ import { useSettingStore } from "../../stores/use-setting-store";
 import { getElevationStyle } from "../../utils/elevation";
 import { SIZE, normalize } from "../../utils/size";
 import NativeTooltip from "../../utils/tooltip";
-import { Pressable } from "../ui/pressable";
+import { PressableButton } from "../ui/pressable";
 
-interface FloatingButtonProps {
-  title: string;
+interface FloatingButton {
+  title?: string;
   onPress: () => void;
   color?: string;
-  shouldShow?: boolean;
   alwaysVisible?: boolean;
 }
 
@@ -50,12 +48,11 @@ const FloatingButton = ({
   onPress,
   color,
   alwaysVisible = false
-}: FloatingButtonProps) => {
+}: FloatingButton) => {
   const { colors } = useThemeColors();
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
   const translate = useSharedValue(0);
-  const route = useRoute();
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -118,11 +115,11 @@ const FloatingButton = ({
         animatedStyle
       ]}
     >
-      <Pressable
+      <PressableButton
         testID={notesnook.buttons.add}
         type="accent"
-        accentColor={color}
-        style={{
+        accentColor={colors.static[color as keyof typeof colors.static]}
+        customStyle={{
           ...getElevationStyle(5),
           borderRadius: 100
         }}
@@ -142,18 +139,12 @@ const FloatingButton = ({
           }}
         >
           <Icon
-            name={
-              route.name === "Notebooks"
-                ? "notebook-plus"
-                : route.name === "Trash"
-                ? "delete"
-                : "plus"
-            }
+            name={title === "Clear all trash" ? "delete" : "plus"}
             color={colors.primary.accentForeground}
             size={SIZE.xxl}
           />
         </View>
-      </Pressable>
+      </PressableButton>
     </Animated.View>
   );
 };

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

@@ -17,49 +17,41 @@ 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, useEffect, useRef, useState } from "react";
-import { Dimensions, Platform, View, useWindowDimensions } from "react-native";
+import React, { PropsWithChildren } from "react";
+import { KeyboardAvoidingView, Platform } from "react-native";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
-import useKeyboard from "../../hooks/use-keyboard";
-import { useThemeColors } from "@notesnook/theme";
+import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
+import { useSettingStore } from "../../stores/use-setting-store";
+import { Header } from "../header";
+import SelectionHeader from "../selection-header";
 
 export const Container = ({ children }: PropsWithChildren) => {
-  const { colors } = useThemeColors();
+  const floating = useIsFloatingKeyboard();
+  const introCompleted = useSettingStore(
+    (state) => state.settings.introCompleted
+  );
   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 (
-    <View
+    <KeyboardAvoidingView
+      behavior="padding"
+      enabled={Platform.OS === "ios" && !floating}
       style={{
+        flex: 1,
         overflow: "hidden",
         paddingTop: Platform.OS === "android" ? 0 : insets.top,
-        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);
+        paddingBottom: Platform.OS === "android" ? 0 : insets.bottom
       }}
     >
+      {!introCompleted ? null : (
+        <>
+          <SelectionHeader />
+          <Header />
+        </>
+      )}
+
       {children}
-    </View>
+    </KeyboardAvoidingView>
   );
 };
 

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

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

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

@@ -17,15 +17,15 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { useThemeColors } from "@notesnook/theme";
 import React from "react";
+import { useNoteStore } from "../../stores/use-notes-store";
+import { useThemeColors } from "@notesnook/theme";
 import { AnnouncementDialog } from "../announcements";
 import AuthModal from "../auth/auth-modal";
 import { SessionExpired } from "../auth/session-expired";
 import { Dialog } from "../dialog";
-import JumpToSectionDialog from "../dialogs/jump-to-section";
+import { AddTopicDialog } from "../dialogs/add-topic";
 import { LoadingDialog } from "../dialogs/loading";
-import PDFPreview from "../dialogs/pdf-preview";
 import ResultDialog from "../dialogs/result";
 import { VaultDialog } from "../dialogs/vault";
 import ImagePreview from "../image-preview";
@@ -36,16 +36,17 @@ import SheetProvider from "../sheet-provider";
 import RateAppSheet from "../sheets/rate-app";
 import RecoveryKeySheet from "../sheets/recovery-key";
 import RestoreDataSheet from "../sheets/restore-data";
-import { AppLockPassword } from "../dialogs/applock-password";
+import PDFPreview from "../dialogs/pdf-preview";
 
 const DialogProvider = () => {
   const { colors } = useThemeColors();
+  const loading = useNoteStore((state) => state.loading);
 
   return (
     <>
-      <AppLockPassword />
       <LoadingDialog />
       <Dialog context="global" />
+      <AddTopicDialog colors={colors} />
       <PremiumDialog colors={colors} />
       <AuthModal colors={colors} />
       <MergeConflicts />
@@ -57,11 +58,10 @@ const DialogProvider = () => {
       <VaultDialog colors={colors} />
       <RateAppSheet />
       <ImagePreview />
-      <Expiring />
+      {loading ? null : <Expiring />}
       <AnnouncementDialog />
       <SessionExpired />
       <PDFPreview />
-      <JumpToSectionDialog />
     </>
   );
 };

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

@@ -21,9 +21,11 @@ import { eSendEvent } from "../../services/event-manager";
 import {
   eCloseActionSheet,
   eCloseAddNotebookDialog,
+  eCloseAddTopicDialog,
   eCloseMoveNoteDialog,
   eOpenActionSheet,
   eOpenAddNotebookDialog,
+  eOpenAddTopicDialog,
   eOpenMoveNoteDialog
 } from "../../utils/events";
 
@@ -50,3 +52,9 @@ export const AddNotebookEvent = (notebook) => {
 export const HideAddNotebookEvent = (notebook) => {
   eSendEvent(eCloseAddNotebookDialog, notebook);
 };
+export const AddTopicEvent = (topic) => {
+  eSendEvent(eOpenAddTopicDialog, topic);
+};
+export const HideAddTopicEvent = (notebook) => {
+  eSendEvent(eCloseAddTopicDialog, notebook);
+};

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

@@ -17,9 +17,8 @@ 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, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
-  ColorValue,
   KeyboardAvoidingView,
   Modal,
   Platform,
@@ -36,25 +35,6 @@ import SettingsService from "../../services/settings";
 import { useUserStore } from "../../stores/use-user-store";
 import { useAppState } from "../../hooks/use-app-state";
 
-export interface BaseDialogProps extends PropsWithChildren {
-  animation?: "fade" | "none" | "slide" | undefined;
-  visible: boolean;
-  onRequestClose?: () => void;
-  onShow?: () => void;
-  premium?: boolean;
-  statusBarTranslucent?: boolean;
-  transparent?: boolean;
-  centered?: boolean;
-  bottom?: boolean;
-  background?: string | ColorValue;
-  animated?: boolean;
-  bounce?: boolean;
-  closeOnTouch?: boolean;
-  useSafeArea?: boolean;
-  avoidKeyboardResize?: boolean;
-  enableSheetKeyboardHandler?: boolean;
-}
-
 const BaseDialog = ({
   visible,
   onRequestClose,
@@ -66,14 +46,14 @@ const BaseDialog = ({
   transparent,
   centered = true,
   bottom = false,
+  background = null,
   animated = true,
   bounce = true,
   closeOnTouch = true,
   useSafeArea = true,
   avoidKeyboardResize = false,
-  enableSheetKeyboardHandler,
-  background
-}: BaseDialogProps) => {
+  enableSheetKeyboardHandler = false
+}) => {
   const floating = useIsFloatingKeyboard();
   const appState = useAppState();
   const lockEvents = useRef(false);
@@ -87,8 +67,7 @@ const BaseDialog = ({
 
   useEffect(() => {
     if (useUserStore.getState().disableAppLockRequests) return;
-
-    if (SettingsService.canLockAppInBackground()) {
+    if (SettingsService.get().appLockMode === "background") {
       if (appState === "background") {
         setIntervalVisible(false);
         if (useUserStore.getState().appLocked) {
@@ -169,7 +148,7 @@ const BaseDialog = ({
               ]}
             >
               <TouchableOpacity
-                onPress={closeOnTouch ? onRequestClose : undefined}
+                onPress={closeOnTouch ? onRequestClose : null}
                 style={styles.overlayButton}
               />
               {premium}

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

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

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

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

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 { PressableProps } from "../ui/pressable";
+import { PressableButtonProps } 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?: PressableProps["type"];
+    type?: PressableButtonProps["type"];
     icon?: string;
   };
   paragraphColor?: string;
@@ -86,9 +86,7 @@ const DialogHeader = ({
             >
               {title}{" "}
               {titlePart ? (
-                <Text style={{ color: colors.primary.accent }}>
-                  {titlePart}
-                </Text>
+                <Text style={{ color: colors.primary.accent }}>{titlePart}</Text>
               ) : null}
             </Heading>
 
@@ -103,8 +101,8 @@ const DialogHeader = ({
                 fontSize={13}
                 title={button.title}
                 icon={button.icon}
-                type={button.type || "secondary"}
-                height={30}
+                type={button.type || "grayBg"}
+                height={25}
               />
             ) : null}
           </View>

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

@@ -25,12 +25,12 @@ type DialogInfo = {
   paragraph?: string;
   positiveText?: string;
   negativeText?: string;
-  positivePress?: (value: any) => void;
+  positivePress?: (value: unknown) => void;
   onClose?: () => void;
   positiveType?:
     | "transparent"
-    | "plain"
-    | "secondary"
+    | "gray"
+    | "grayBg"
     | "accent"
     | "inverted"
     | "shade"
@@ -41,9 +41,7 @@ type DialogInfo = {
   input: boolean;
   inputPlaceholder: string;
   defaultValue: string;
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  context: "global" | "local" | (string & {});
-  secureTextEntry?: boolean;
+  context: "global" | "local";
 };
 
 export function presentDialog(data: Partial<DialogInfo>): void {

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

@@ -36,7 +36,6 @@ 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();
@@ -66,6 +65,16 @@ export const Dialog = ({ context = "global" }) => {
     }
   });
 
+  useEffect(() => {
+    eSubscribeEvent(eOpenSimpleDialog, show);
+    eSubscribeEvent(eCloseSimpleDialog, hide);
+
+    return () => {
+      eUnSubscribeEvent(eOpenSimpleDialog, show);
+      eUnSubscribeEvent(eCloseSimpleDialog, hide);
+    };
+  }, [show]);
+
   const onPressPositive = async () => {
     if (dialogInfo.positivePress) {
       inputRef.current?.blur();
@@ -93,16 +102,6 @@ export const Dialog = ({ context = "global" }) => {
     [context]
   );
 
-  useEffect(() => {
-    eSubscribeEvent(eOpenSimpleDialog, show);
-    eSubscribeEvent(eCloseSimpleDialog, hide);
-
-    return () => {
-      eUnSubscribeEvent(eOpenSimpleDialog, show);
-      eUnSubscribeEvent(eCloseSimpleDialog, hide);
-    };
-  }, [show]);
-
   const hide = () => {
     setChecked(false);
     values.current.inputValue = undefined;
@@ -122,8 +121,7 @@ export const Dialog = ({ context = "global" }) => {
     maxHeight: 450,
     borderRadius: 5,
     backgroundColor: colors.primary.background,
-    paddingTop: 12,
-    ...getContainerBorder(colors.primary.border, 0.5)
+    paddingTop: 12
   };
 
   return visible ? (
@@ -197,7 +195,7 @@ export const Dialog = ({ context = "global" }) => {
               iconSize={20}
               width="100%"
               title={dialogInfo.check.info}
-              type={checked ? dialogInfo.check.type || "selected" : "plain"}
+              type={checked ? dialogInfo.check.type : "gray"}
             />
           </>
         ) : null}

apps/mobile/app/components/dialogs/add-topic/index.js

@@ -0,0 +1,190 @@
+/*
+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, { createRef } from "react";
+import { View } from "react-native";
+
+import { useMenuStore } from "../../../stores/use-menu-store";
+import {
+  eSendEvent,
+  eSubscribeEvent,
+  eUnSubscribeEvent,
+  ToastEvent
+} from "../../../services/event-manager";
+import Navigation from "../../../services/navigation";
+import { db } from "../../../common/database";
+import {
+  eCloseAddTopicDialog,
+  eOnTopicSheetUpdate,
+  eOpenAddTopicDialog
+} from "../../../utils/events";
+import { sleep } from "../../../utils/time";
+import BaseDialog from "../../dialog/base-dialog";
+import DialogButtons from "../../dialog/dialog-buttons";
+import DialogContainer from "../../dialog/dialog-container";
+import DialogHeader from "../../dialog/dialog-header";
+import Input from "../../ui/input";
+import Seperator from "../../ui/seperator";
+import { Toast } from "../../toast";
+import { useRelationStore } from "../../../stores/use-relation-store";
+
+export class AddTopicDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+      titleFocused: false,
+      loading: false
+    };
+
+    this.ref = createRef();
+    this.title;
+    this.titleRef = createRef();
+    this.notebook = null;
+    this.toEdit = null;
+  }
+
+  addNewTopic = async () => {
+    try {
+      if (!this.title || this.title?.trim() === "") {
+        ToastEvent.show({
+          heading: "Topic title is required",
+          type: "error",
+          context: "local"
+        });
+        return;
+      }
+
+      if (!this.toEdit) {
+        await db.notebooks.notebook(this.notebook.id).topics.add(this.title);
+      } else {
+        let topic = this.toEdit;
+        topic.title = this.title;
+
+        await db.notebooks.notebook(topic.notebookId).topics.add(topic);
+      }
+      this.close();
+      setTimeout(() => {
+        Navigation.queueRoutesForUpdate();
+        useMenuStore.getState().setMenuPins();
+      });
+      eSendEvent(eOnTopicSheetUpdate);
+      useRelationStore.getState().update();
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  componentDidMount() {
+    eSubscribeEvent(eOpenAddTopicDialog, this.open);
+    eSubscribeEvent(eCloseAddTopicDialog, this.close);
+  }
+  componentWillUnmount() {
+    eUnSubscribeEvent(eOpenAddTopicDialog, this.open);
+    eUnSubscribeEvent(eCloseAddTopicDialog, this.close);
+  }
+
+  open = async ({ notebookId, toEdit }) => {
+    let id = notebookId;
+    if (id) {
+      this.notebook = await db.notebooks.notebook(id).data;
+    }
+    this.toEdit = toEdit;
+
+    if (this.toEdit) {
+      this.title = this.toEdit.title;
+    }
+
+    this.setState({
+      visible: true
+    });
+  };
+  close = () => {
+    this.title = null;
+    this.notebook = null;
+    this.toEdit = null;
+    this.setState({
+      visible: false
+    });
+  };
+
+  render() {
+    const { visible } = this.state;
+    if (!visible) return null;
+    return (
+      <BaseDialog
+        onShow={async () => {
+          if (this.toEdit) {
+            this.titleRef.current?.setNativeProps({
+              text: this.toEdit.title
+            });
+          }
+
+          this.ref.current?.animateNextTransition();
+          await sleep(300);
+          this.titleRef.current?.focus();
+        }}
+        bounce={false}
+        statusBarTranslucent={false}
+        visible={true}
+        onRequestClose={this.close}
+      >
+        <DialogContainer>
+          <DialogHeader
+            icon="book-outline"
+            title={this.toEdit ? "Edit topic" : "New topic"}
+            paragraph={
+              this.toEdit
+                ? "Edit title of the topic"
+                : "Add a new topic in " + this.notebook.title
+            }
+            padding={12}
+          />
+          <Seperator half />
+          <View
+            style={{
+              paddingHorizontal: 12,
+              zIndex: 10
+            }}
+          >
+            <Input
+              fwdRef={this.titleRef}
+              testID="input-title"
+              onChangeText={(value) => {
+                this.title = value;
+              }}
+              blurOnSubmit={false}
+              placeholder="Enter title"
+              onSubmit={() => this.addNewTopic()}
+              returnKeyLabel="Done"
+              returnKeyType="done"
+            />
+          </View>
+
+          <DialogButtons
+            positiveTitle={this.toEdit ? "Save" : "Add"}
+            onPressNegative={() => this.close()}
+            onPressPositive={() => this.addNewTopic()}
+          />
+        </DialogContainer>
+        <Toast context="local" />
+      </BaseDialog>
+    );
+  }
+}

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

@@ -1,360 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-import { useThemeColors } from "@notesnook/theme";
-import React, { useEffect, useRef, useState } from "react";
-import { TextInput, View } from "react-native";
-import {
-  clearAppLockVerificationCipher,
-  setAppLockVerificationCipher,
-  validateAppLockPassword
-} from "../../../common/database/encryption";
-import BiometricService from "../../../services/biometrics";
-import { DDS } from "../../../services/device-detection";
-import {
-  ToastManager,
-  eSendEvent,
-  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);
-  const confirmPasswordInputRef = useRef<TextInput>(null);
-  const values = useRef<{
-    currentPassword?: string;
-    password?: string;
-    confirmPassword?: string;
-  }>({});
-  const [secureTextEntry, setSecureTextEntry] = useState(true);
-
-  useEffect(() => {
-    const subs = [
-      eSubscribeEvent(
-        eOpenAppLockPasswordDialog,
-        (mode: "create" | "change" | "remove") => {
-          setMode(mode);
-          setVisible(true);
-        }
-      ),
-      eSubscribeEvent(eCloseAppLocKPasswordDailog, () => {
-        values.current = {};
-        setVisible(false);
-      })
-    ];
-    return () => {
-      subs.forEach((sub) => sub?.unsubscribe());
-    };
-  }, []);
-
-  const close = () => {
-    values.current = {};
-    setVisible(false);
-  };
-
-  return !visible ? null : (
-    <BaseDialog
-      onShow={async () => {
-        await sleep(100);
-        if (mode !== "change") {
-          passwordInputRef.current?.focus();
-        } else {
-          currentPasswordInputRef.current?.focus();
-        }
-      }}
-      statusBarTranslucent={false}
-      onRequestClose={close}
-      visible={visible}
-    >
-      <View
-        style={{
-          ...getElevationStyle(10),
-          width: DDS.isTab ? 350 : "85%",
-          borderRadius: 10,
-          backgroundColor: colors.primary.background,
-          paddingTop: 12
-        }}
-      >
-        <DialogHeader
-          title={
-            mode === "change"
-              ? `Change app lock ${keyboardType}`
-              : mode === "remove"
-              ? `Remove app lock ${keyboardType}`
-              : `Set up app lock ${keyboardType}`
-          }
-          paragraph={
-            mode === "change"
-              ? `Change app lock ${keyboardType}`
-              : mode === "remove"
-              ? `Remove app lock ${keyboardType}`
-              : `Set up a custom app lock ${keyboardType} to unlock the app`
-          }
-          icon="shield"
-          padding={12}
-        />
-        <Seperator half />
-
-        <View
-          style={{
-            paddingHorizontal: 12
-          }}
-        >
-          {mode === "change" ? (
-            <Input
-              fwdRef={currentPasswordInputRef}
-              autoCapitalize="none"
-              onChangeText={(value) => {
-                values.current.currentPassword = value;
-              }}
-              onSubmit={() => {
-                passwordInputRef.current?.focus();
-              }}
-              defaultValue={values.current.currentPassword}
-              autoComplete="password"
-              returnKeyLabel="Next"
-              keyboardType={keyboardType === "pin" ? "number-pad" : "default"}
-              returnKeyType="next"
-              secureTextEntry={secureTextEntry}
-              placeholder={`Current ${keyboardType}`}
-            />
-          ) : null}
-
-          <Input
-            fwdRef={passwordInputRef}
-            autoCapitalize="none"
-            onChangeText={(value) => {
-              values.current.password = value;
-            }}
-            onSubmit={() => {
-              confirmPasswordInputRef.current?.focus();
-            }}
-            defaultValue={values.current.password}
-            keyboardType={keyboardType === "pin" ? "number-pad" : "default"}
-            autoComplete="password"
-            returnKeyLabel={mode !== "remove" ? "Next" : "Remove"}
-            returnKeyType={mode !== "remove" ? "next" : "done"}
-            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" ? (
-            <Input
-              fwdRef={confirmPasswordInputRef}
-              autoCapitalize="none"
-              onChangeText={(value) => {
-                values.current.confirmPassword = value;
-              }}
-              onSubmit={() => {
-                confirmPasswordInputRef.current?.focus();
-              }}
-              defaultValue={values.current.confirmPassword}
-              keyboardType={keyboardType === "pin" ? "number-pad" : "default"}
-              customValidator={() => values.current.password || ""}
-              validationType="confirmPassword"
-              autoComplete="password"
-              returnKeyLabel="Done"
-              returnKeyType="done"
-              secureTextEntry={secureTextEntry}
-              placeholder={`Confirm ${keyboardType}`}
-            />
-          ) : null}
-        </View>
-
-        <DialogButtons
-          onPressNegative={close}
-          onPressPositive={async () => {
-            if (mode === "create") {
-              if (!values.current.password || !values.current.confirmPassword) {
-                ToastManager.error(
-                  new Error("All inputs are required"),
-                  undefined,
-                  "local"
-                );
-                return;
-              }
-
-              if (values.current.password !== values.current.confirmPassword) {
-                ToastManager.error(
-                  new Error(
-                    `${
-                      keyboardType === "pin" ? "Pin" : "Password"
-                    } does not match`
-                  ),
-                  undefined,
-                  "local"
-                );
-                return;
-              }
-              await setAppLockVerificationCipher(values.current.password);
-              SettingsService.setProperty("appLockHasPasswordSecurity", true);
-            } else if (mode === "change") {
-              if (
-                !values.current.currentPassword ||
-                !values.current.password ||
-                !values.current.confirmPassword
-              ) {
-                ToastManager.error(
-                  new Error("All inputs are required"),
-                  undefined,
-                  "local"
-                );
-                return;
-              }
-
-              if (values.current.password !== values.current.confirmPassword) {
-                ToastManager.error(
-                  new Error(
-                    `${
-                      keyboardType === "pin" ? "Pin" : "Password"
-                    } does not match`
-                  ),
-                  undefined,
-                  "local"
-                );
-                return;
-              }
-
-              const isCurrentPasswordCorrect = await validateAppLockPassword(
-                values.current.currentPassword
-              );
-
-              if (!isCurrentPasswordCorrect) {
-                ToastManager.error(
-                  new Error(
-                    `${keyboardType === "pin" ? "Pin" : "Password"} incorrect`
-                  ),
-                  undefined,
-                  "local"
-                );
-                return;
-              }
-
-              SettingsService.setProperty("appLockHasPasswordSecurity", true);
-              await setAppLockVerificationCipher(values.current.password);
-            } else if (mode === "remove") {
-              if (!values.current.password) {
-                ToastManager.error(
-                  new Error("All inputs are required"),
-                  undefined,
-                  "local"
-                );
-                return;
-              }
-
-              const isCurrentPasswordCorrect = await validateAppLockPassword(
-                values.current.password
-              );
-
-              if (!isCurrentPasswordCorrect) {
-                ToastManager.error(
-                  new Error(
-                    `${keyboardType === "pin" ? "Pin" : "Password"} incorrect`
-                  ),
-                  undefined,
-                  "local"
-                );
-                return;
-              }
-              clearAppLockVerificationCipher();
-              SettingsService.setProperty("appLockHasPasswordSecurity", false);
-
-              if (
-                !(await BiometricService.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"
-          negativeTitle="Cancel"
-          positiveType="transparent"
-          loading={false}
-          doneText=""
-        />
-      </View>
-
-      <Toast context="local" />
-    </BaseDialog>
-  );
-};
-
-AppLockPassword.present = (mode: "create" | "change" | "remove") => {
-  eSendEvent(eOpenAppLockPasswordDialog, mode);
-};

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

@@ -1,187 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-import React, { useState } from "react";
-import { Image, ScrollView, TouchableOpacity, View } from "react-native";
-import { Image as ImageType } from "react-native-image-crop-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: ImageType[];
-  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?.length} image(s):
-        </Paragraph>
-        <ScrollView horizontal>
-          {response?.map((item) => (
-            <TouchableOpacity key={item.filename} activeOpacity={0.9}>
-              <Image
-                source={{
-                  uri: item.sourceURL || item.path
-                }}
-                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?.length || 0) > 1 ? "Attach Images" : "Attach Image"
-        }`}
-        type="accent"
-        width="100%"
-        onPress={() => {
-          onAttach({
-            compress
-          });
-        }}
-      />
-    </View>
-  );
-}
-
-AttachImage.present = (response: ImageType[], context?: string) => {
-  return new Promise<
-    | {
-        compress: boolean;
-      }
-    | undefined
-  >((resolve) => {
-    let resolved = false;
-    presentSheet({
-      context: context,
-      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

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

@@ -17,22 +17,15 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { GroupHeader, Item, VirtualizedGrouping } from "@notesnook/core";
-import { useThemeColors } from "@notesnook/theme";
-import React, {
-  RefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-} from "react";
-import { ActivityIndicator, FlatList, ScrollView, View } from "react-native";
+import React, { useEffect, useState } from "react";
+import { ScrollView, View } from "react-native";
 import { DDS } from "../../../services/device-detection";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../../services/event-manager";
 import { useMessageStore } from "../../../stores/use-message-store";
+import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../../utils/elevation";
 import {
   eCloseJumpToDialog,
@@ -41,51 +34,29 @@ import {
 } from "../../../utils/events";
 import { SIZE } from "../../../utils/size";
 import BaseDialog from "../../dialog/base-dialog";
-import { Pressable } from "../../ui/pressable";
+import { PressableButton } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
+import { useCallback } from "react";
 
-const JumpToSectionDialog = () => {
-  const scrollRef = useRef<RefObject<FlatList>>();
-  const [data, setData] = useState<VirtualizedGrouping<Item>>();
+const offsets = [];
+let timeout = null;
+const JumpToSectionDialog = ({ scrollRef, data, type }) => {
   const { colors } = useThemeColors();
   const notes = data;
   const [visible, setVisible] = useState(false);
   const [currentIndex, setCurrentIndex] = useState(0);
-  const currentScrollPosition = useRef(0);
-  const [loading, setLoading] = useState(false);
 
-  const [groups, setGroups] = useState<
-    {
-      index: number;
-      group: GroupHeader;
-    }[]
-  >();
-  const offsets = useRef<number[]>([]);
-
-  const onPress = (item: { index: number; group: GroupHeader }) => {
-    scrollRef.current?.current?.scrollToIndex({
-      index: item.index,
+  const onPress = (item) => {
+    let ind = notes.findIndex(
+      (i) => i.title === item.title && i.type === "header"
+    );
+    scrollRef.current?.scrollToIndex({
+      index: ind,
       animated: true
     });
     close();
   };
 
-  const open = useCallback(
-    ({
-      data,
-      ref
-    }: {
-      data: VirtualizedGrouping<Item>;
-      ref: RefObject<FlatList>;
-    }) => {
-      setLoading(true);
-      setData(data);
-      scrollRef.current = ref;
-      setVisible(true);
-    },
-    []
-  );
-
   useEffect(() => {
     eSubscribeEvent(eOpenJumpToDialog, open);
     eSubscribeEvent(eCloseJumpToDialog, close);
@@ -98,46 +69,54 @@ const JumpToSectionDialog = () => {
     };
   }, [open]);
 
-  const onScroll = (data: { x: number; y: number }) => {
-    currentScrollPosition.current = data.y;
+  const onScroll = (data) => {
+    let y = data.y;
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+    timeout = setTimeout(() => {
+      let index = offsets.findIndex((o, i) => o <= y && offsets[i + 1] > y);
+      setCurrentIndex(index || 0);
+    }, 200);
   };
 
+  const open = useCallback(
+    (_type) => {
+      if (_type !== type) return;
+      setVisible(true);
+    },
+    [type]
+  );
+
   const close = () => {
     setVisible(false);
   };
 
-  const loadGroupsAndOffsets = useCallback(() => {
-    notes?.groups?.().then((groups) => {
-      setGroups(groups);
-      offsets.current = [];
-      groups.map((item, index) => {
+  useEffect(() => {
+    loadOffsets();
+  }, [loadOffsets, notes]);
+
+  const loadOffsets = useCallback(() => {
+    notes
+      .filter((i) => i.type === "header")
+      .map((item, index) => {
         let offset = 35 * index;
-        let groupIndex = item.index;
-        const messageState = useMessageStore.getState().message;
-        const msgOffset = messageState?.visible ? 60 : 10;
-
-        groupIndex = groupIndex + 1;
-        groupIndex = groupIndex - (index + 1);
-        offset = offset + groupIndex * 100 + msgOffset;
-        offsets.current.push(offset);
-      });
-
-      const index = offsets.current?.findIndex((o, i) => {
-        return (
-          o <= currentScrollPosition.current + 100 &&
-          offsets.current[i + 1] - 100 > currentScrollPosition.current
+        let ind = notes.findIndex(
+          (i) => i.title === item.title && i.type === "header"
         );
+        let messageState = useMessageStore.getState().message;
+        let msgOffset = messageState?.visible ? 60 : 10;
+        ind = ind + 1;
+        ind = ind - (index + 1);
+        offset = offset + ind * 100 + msgOffset;
+        offsets.push(offset);
       });
-
-      setCurrentIndex(index < 0 ? 0 : index);
-      setLoading(false);
-    });
   }, [notes]);
-
   return !visible ? null : (
     <BaseDialog
       onShow={() => {
-        loadGroupsAndOffsets();
+        loadOffsets();
       }}
       onRequestClose={close}
       visible={true}
@@ -156,42 +135,35 @@ const JumpToSectionDialog = () => {
           paddingTop: 30
         }}
       >
-        {loading ? (
-          <ActivityIndicator
-            size={SIZE.lg}
-            color={colors.primary.accent}
+        <ScrollView
+          style={{
+            maxHeight: "100%"
+          }}
+        >
+          <View
             style={{
-              marginBottom: 20
-            }}
-          />
-        ) : (
-          <ScrollView
-            style={{
-              maxHeight: "100%"
+              flexDirection: "row",
+              flexWrap: "wrap",
+              alignSelf: "center",
+              justifyContent: "center",
+              paddingBottom: 20
             }}
           >
-            <View
-              style={{
-                flexDirection: "row",
-                flexWrap: "wrap",
-                alignSelf: "center",
-                justifyContent: "center",
-                paddingBottom: 20
-              }}
-            >
-              {groups?.map((item, index) => {
-                return (
-                  <Pressable
-                    key={item.group.id}
-                    onPress={() => onPress(item)}
-                    type={currentIndex === index ? "accent" : "transparent"}
-                    style={{
+            {notes
+              .filter((i) => i.type === "header")
+              .map((item, index) => {
+                return item.title ? (
+                  <PressableButton
+                    key={item.title}
+                    onPress={() => onPress(item, index)}
+                    type={currentIndex === index ? "selected" : "transparent"}
+                    customStyle={{
                       minWidth: "20%",
                       width: null,
                       paddingHorizontal: 12,
                       margin: 5,
                       borderRadius: 100,
-                      height: 30,
+                      height: 25,
                       marginVertical: 10
                     }}
                   >
@@ -199,21 +171,20 @@ const JumpToSectionDialog = () => {
                       size={SIZE.sm}
                       color={
                         currentIndex === index
-                          ? colors.static.white
-                          : colors.primary.paragraph
+                          ? colors.selected.accent
+                          : colors.primary.accent
                       }
                       style={{
                         textAlign: "center"
                       }}
                     >
-                      {item.group.title}
+                      {item.title}
                     </Paragraph>
-                  </Pressable>
-                );
+                  </PressableButton>
+                ) : null;
               })}
-            </View>
-          </ScrollView>
-        )}
+          </View>
+        </ScrollView>
       </View>
     </BaseDialog>
   );

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

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Dimensions, TextInput, View } from "react-native";
 import {
   addOrientationListener,
@@ -85,7 +85,7 @@ const PDFPreview = () => {
     return () => {
       eUnSubscribeEvent("PDFPreview", open);
     };
-  }, [open]);
+  }, []);
 
   const onOrientationChange = (o) => {
     if (o.includes("LANDSCAPE")) {
@@ -102,26 +102,23 @@ const PDFPreview = () => {
     };
   }, []);
 
-  const open = useCallback(
-    async (attachment) => {
-      setVisible(true);
-      setLoading(true);
-      setTimeout(async () => {
-        setAttachment(attachment);
-        let hash = attachment.hash;
-        if (!hash) return;
-        const uri = await downloadAttachment(hash, false, {
-          silent: true,
-          cache: true
-        });
-        const path = `${cacheDir}/${uri}`;
-        snapshotValue.current = snapshot.current;
-        setPDFSource("file://" + path);
-        setLoading(false);
-      }, 100);
-    },
-    [snapshot]
-  );
+  const open = async (attachment) => {
+    setVisible(true);
+    setLoading(true);
+    setTimeout(async () => {
+      setAttachment(attachment);
+      let hash = attachment.metadata.hash;
+      if (!hash) return;
+      const uri = await downloadAttachment(hash, false, {
+        silent: true,
+        cache: true
+      });
+      const path = `${cacheDir}/${uri}`;
+      snapshotValue.current = snapshot.current;
+      setPDFSource("file://" + path);
+      setLoading(false);
+    }, 100);
+  };
 
   const close = () => {
     setPDFSource(null);
@@ -133,7 +130,7 @@ const PDFPreview = () => {
     if (error?.message === "Password required or incorrect password.") {
       await sleep(300);
       presentDialog({
-        context: attachment?.hash,
+        context: attachment?.metadata?.hash,
         input: true,
         inputPlaceholder: "Enter password",
         positiveText: "Unlock",
@@ -154,8 +151,8 @@ const PDFPreview = () => {
   return (
     visible && (
       <BaseDialog animation="fade" visible={true} onRequestClose={close}>
-        <SheetProvider context={attachment?.hash} />
-        <Dialog context={attachment?.hash} />
+        <SheetProvider context={attachment?.metadata?.hash} />
+        <Dialog context={attachment?.metadata?.hash} />
 
         <View
           style={{
@@ -211,7 +208,7 @@ const PDFPreview = () => {
                     color={colors.static.white}
                     name="arrow-left"
                     onPress={close}
-                    style={{
+                    customStyle={{
                       marginRight: 12
                     }}
                     size={SIZE.xxl}
@@ -264,7 +261,7 @@ const PDFPreview = () => {
                     color={colors.static.white}
                     name="download"
                     onPress={() => {
-                      downloadAttachment(attachment.hash, false);
+                      downloadAttachment(attachment.metadata.hash, false);
                     }}
                   />
                 </View>

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

@@ -23,26 +23,28 @@ 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 {
-  ToastManager,
   eSendEvent,
   eSubscribeEvent,
-  eUnSubscribeEvent
+  eUnSubscribeEvent,
+  ToastEvent
 } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
+import SearchService from "../../../services/search";
+import { convertNoteToText } from "../../../utils/note-to-text";
 import { getElevationStyle } from "../../../utils/elevation";
 import {
+  eClearEditor,
   eCloseActionSheet,
   eCloseVaultDialog,
   eOnLoadNote,
-  eOpenVaultDialog,
-  eUpdateNoteInEditor
+  eOpenVaultDialog
 } from "../../../utils/events";
 import { deleteItems } from "../../../utils/functions";
 import { tabBarRef } from "../../../utils/global-refs";
-import { convertNoteToText } from "../../../utils/note-to-text";
 import { sleep } from "../../../utils/time";
 import BaseDialog from "../../dialog/base-dialog";
 import DialogButtons from "../../dialog/dialog-buttons";
@@ -53,6 +55,10 @@ import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import Paragraph from "../../ui/typography/paragraph";
 
+let Keychain;
+const passInputRef = createRef();
+const confirmPassRef = createRef();
+const changePassInputRef = createRef();
 export class VaultDialog extends Component {
   constructor(props) {
     super(props);
@@ -80,14 +86,8 @@ export class VaultDialog extends Component {
       description: null,
       clearVault: false,
       deleteVault: false,
-      deleteAll: false,
-      noteLocked: false
+      deleteAll: false
     };
-
-    this.passInputRef = createRef();
-    this.confirmPassRef = createRef();
-    this.changePassInputRef = createRef();
-
     this.password = null;
     this.confirmPassword = null;
     this.newPassword = null;
@@ -99,7 +99,7 @@ export class VaultDialog extends Component {
       ? "Revoke Vault Fingerprint Unlock"
       : this.state.changePassword
       ? "Change Vault Password"
-      : this.state.noteLocked
+      : this.state.note.locked
       ? 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.noteLocked
+        : this.state.note.locked
         ? this.state.deleteNote
           ? "Unlock note to delete it. If biometrics are not working, you can enter device pin to unlock vault."
           : this.state.share
@@ -128,7 +128,7 @@ export class VaultDialog extends Component {
           : this.state.copyNote
           ? "Unlock note to copy it. If biometrics are not working, you can enter device pin to unlock vault."
           : this.state.goToEditor
-          ? "Unlock note to open it in editor."
+          ? "Unlock note to open it in editor. If biometrics are not working, you can enter device pin to unlock vault."
           : "Enter vault password to unlock note. If biometrics are not working, you can enter device pin to unlock vault."
         : "Enter vault password to lock note. If biometrics are not working, you can enter device pin to lock note.");
   }
@@ -148,6 +148,9 @@ export class VaultDialog extends Component {
    * @param {import('../../../services/event-manager').vaultType} data
    */
   open = async (data) => {
+    if (!Keychain) {
+      Keychain = require("react-native-keychain");
+    }
     let biometry = await BiometricService.isBiometryAvailable();
     let available = false;
     let fingerprint = await BiometricService.hasInternetCredentials("nn_vault");
@@ -174,8 +177,7 @@ export class VaultDialog extends Component {
       title: data.title,
       description: data.description,
       clearVault: data.clearVault,
-      deleteVault: data.deleteVault,
-      noteLocked: data.item && (await db.vaults.itemExists(data.item))
+      deleteVault: data.deleteVault
     });
 
     if (
@@ -197,7 +199,7 @@ export class VaultDialog extends Component {
 
   close = () => {
     if (this.state.loading) {
-      ToastManager.show({
+      ToastEvent.show({
         heading: this.state.title,
         message: "Please wait and do not close the app.",
         type: "success",
@@ -210,6 +212,7 @@ export class VaultDialog extends Component {
 
     this.password = null;
     this.confirmPassword = null;
+    SearchService.updateAndSearch();
     this.setState({
       visible: false,
       note: {},
@@ -233,7 +236,7 @@ export class VaultDialog extends Component {
     if (this.state.loading) return;
 
     if (!this.password) {
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Password not entered",
         message: "Enter a password for the vault and try again.",
         type: "error",
@@ -241,10 +244,20 @@ export class VaultDialog extends Component {
       });
       return;
     }
+    if (this.password && this.password.length < 3) {
+      ToastEvent.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) {
-        ToastManager.show({
+        ToastEvent.show({
           heading: "Passwords do not match",
           type: "error",
           context: "local"
@@ -270,7 +283,7 @@ export class VaultDialog extends Component {
           if (this.state.biometricUnlock) {
             this._enrollFingerprint(this.newPassword);
           }
-          ToastManager.show({
+          ToastEvent.show({
             heading: "Vault password updated successfully",
             type: "success",
             context: "global"
@@ -282,19 +295,17 @@ export class VaultDialog extends Component {
             loading: false
           });
           if (e.message === db.vault.ERRORS.wrongPassword) {
-            ToastManager.show({
+            ToastEvent.show({
               heading: "Incorrect password",
               message: "Please enter the correct password and try again",
               type: "error",
               context: "local"
             });
-          } else {
-            ToastManager.error(e);
           }
         });
     } else if (this.state.locked) {
       if (!this.password || this.password.trim() === 0) {
-        ToastManager.show({
+        ToastEvent.show({
           heading: "Incorrect password",
           message: "Please enter the correct password and try again",
           type: "error",
@@ -305,7 +316,7 @@ export class VaultDialog extends Component {
         });
         return;
       }
-      if (this.state.noteLocked) {
+      if (this.state.note.locked) {
         await this._unlockNote();
       } else {
         db.vault
@@ -337,33 +348,14 @@ 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
         });
         this.close();
       } else {
-        ToastManager.show({
+        ToastEvent.show({
           heading: "Account password incorrect",
           message: "Please enter correct password for your account.",
           type: "error",
@@ -383,29 +375,14 @@ 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
       });
       this.close();
       eSendEvent("vaultUpdated");
     } catch (e) {
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Vault password incorrect",
         message: "Please enter correct password to clear vault.",
         type: "error",
@@ -419,7 +396,7 @@ export class VaultDialog extends Component {
 
   async _lockNote() {
     if (!this.password || this.password.trim() === 0) {
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Incorrect password",
         type: "error",
         context: "local"
@@ -427,12 +404,11 @@ export class VaultDialog extends Component {
       return;
     } else {
       await db.vault.add(this.state.note.id);
-
-      console.log("update note event...");
-      eSendEvent(eUpdateNoteInEditor, this.state.note, true);
-
+      if (this.state.note.id === editorController.current?.note?.id) {
+        eSendEvent(eClearEditor);
+      }
       this.close();
-      ToastManager.show({
+      ToastEvent.show({
         message: "Note locked successfully",
         type: "error",
         context: "local"
@@ -445,7 +421,7 @@ export class VaultDialog extends Component {
 
   async _unlockNote() {
     if (!this.password || this.password.trim() === 0) {
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Incorrect password",
         message: "Please enter the correct password and try again",
         type: "error",
@@ -483,7 +459,7 @@ export class VaultDialog extends Component {
   async _deleteNote() {
     try {
       await db.vault.remove(this.state.note.id, this.password);
-      await deleteItems([this.state.note.id], "note");
+      await deleteItems(this.state.note);
       this.close();
     } catch (e) {
       this._takeErrorAction(e);
@@ -503,7 +479,7 @@ export class VaultDialog extends Component {
             loading: false
           });
           eSendEvent("vaultUpdated");
-          ToastManager.show({
+          ToastEvent.show({
             heading: "Biometric unlocking enabled!",
             message: "Now you can unlock notes in vault with biometrics.",
             type: "success",
@@ -512,7 +488,7 @@ export class VaultDialog extends Component {
           this.close();
         } catch (e) {
           this.close();
-          ToastManager.show({
+          ToastEvent.show({
             heading: "Incorrect password",
             message:
               "Please enter the correct vault password to enable biometrics.",
@@ -535,11 +511,13 @@ export class VaultDialog extends Component {
     }
     if (this.state.note?.id) {
       await db.vault.add(this.state.note.id);
-      eSendEvent(eUpdateNoteInEditor, this.state.note, true);
+      if (this.state.note.id === editorController.current?.note?.id) {
+        eSendEvent(eClearEditor);
+      }
       this.setState({
         loading: false
       });
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Note added to vault",
         type: "success",
         context: "global"
@@ -547,7 +525,7 @@ export class VaultDialog extends Component {
       this.close();
     } else {
       eSendEvent("vaultUpdated");
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Vault created successfully",
         type: "success",
         context: "global"
@@ -560,12 +538,11 @@ export class VaultDialog extends Component {
     db.vault
       .remove(this.state.note.id, this.password)
       .then(() => {
-        ToastManager.show({
+        ToastEvent.show({
           heading: "Note permanently unlocked.",
           type: "success",
           context: "global"
         });
-        eSendEvent(eUpdateNoteInEditor, this.state.note, true);
         this.close();
       })
       .catch((e) => {
@@ -576,9 +553,7 @@ export class VaultDialog extends Component {
   _openInEditor(note) {
     this.close();
     InteractionManager.runAfterInteractions(async () => {
-      eSendEvent(eOnLoadNote, {
-        item: note
-      });
+      eSendEvent(eOnLoadNote, note);
       if (!DDS.isTab) {
         tabBarRef.current?.goToPage(1);
       }
@@ -587,7 +562,7 @@ export class VaultDialog extends Component {
 
   async _copyNote(note) {
     Clipboard.setString(await convertNoteToText(note));
-    ToastManager.show({
+    ToastEvent.show({
       heading: "Note copied",
       type: "success",
       message: "Note has been copied to clipboard!",
@@ -619,7 +594,7 @@ export class VaultDialog extends Component {
         visible: true
       });
       setTimeout(() => {
-        ToastManager.show({
+        ToastEvent.show({
           heading: "Incorrect password",
           type: "error",
           context: "local"
@@ -634,13 +609,13 @@ export class VaultDialog extends Component {
     try {
       await BiometricService.resetCredentials();
       eSendEvent("vaultUpdated");
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Biometric unlocking disabled!",
         type: "success",
         context: "global"
       });
     } catch (e) {
-      ToastManager.show({
+      ToastEvent.show({
         heading: "Failed to disable Biometric unlocking.",
         message: e.message,
         type: "success",
@@ -692,8 +667,7 @@ export class VaultDialog extends Component {
       <BaseDialog
         onShow={async () => {
           await sleep(100);
-
-          this.passInputRef.current?.focus();
+          passInputRef.current?.focus();
         }}
         statusBarTranslucent={false}
         onRequestClose={this.close}
@@ -728,7 +702,7 @@ export class VaultDialog extends Component {
             !this.state.revokeFingerprintAccess ? (
               <>
                 <Input
-                  fwdRef={this.passInputRef}
+                  fwdRef={passInputRef}
                   editable={!loading}
                   autoCapitalize="none"
                   testID={notesnook.ids.dialogs.vault.pwd}
@@ -745,7 +719,7 @@ export class VaultDialog extends Component {
                   }
                   onSubmit={() => {
                     changePassword
-                      ? this.confirmPassRef.current?.focus()
+                      ? changePassInputRef.current?.focus()
                       : this.onPress;
                   }}
                   autoComplete="password"
@@ -797,7 +771,7 @@ export class VaultDialog extends Component {
               <>
                 <Seperator half />
                 <Input
-                  ref={this.confirmPassRef}
+                  ref={changePassInputRef}
                   editable={!loading}
                   testID={notesnook.ids.dialogs.vault.changePwd}
                   autoCapitalize="none"
@@ -817,7 +791,7 @@ export class VaultDialog extends Component {
             {!novault ? (
               <View>
                 <Input
-                  fwdRef={this.passInputRef}
+                  fwdRef={passInputRef}
                   autoCapitalize="none"
                   testID={notesnook.ids.dialogs.vault.pwd}
                   onChangeText={(value) => {
@@ -828,13 +802,13 @@ export class VaultDialog extends Component {
                   returnKeyType="next"
                   secureTextEntry
                   onSubmit={() => {
-                    this.confirmPassRef.current?.focus();
+                    confirmPassRef.current?.focus();
                   }}
                   placeholder="Password"
                 />
 
                 <Input
-                  fwdRef={this.confirmPassRef}
+                  fwdRef={confirmPassRef}
                   autoCapitalize="none"
                   testID={notesnook.ids.dialogs.vault.pwdAlt}
                   secureTextEntry
@@ -891,10 +865,10 @@ export class VaultDialog extends Component {
                 title="Biometric unlocking"
                 iconColor={
                   this.state.biometricUnlock
-                    ? colors.selected.accent
+                    ? colors.selected.icon
                     : colors.primary.icon
                 }
-                type={this.state.biometricUnlock ? "transparent" : "plain"}
+                type={this.state.biometricUnlock ? "transparent" : "selected"}
               />
             ) : null}
           </View>
@@ -917,7 +891,7 @@ export class VaultDialog extends Component {
                 ? "Revoke"
                 : changePassword
                 ? "Change"
-                : this.state.noteLocked
+                : note.locked
                 ? deleteNote
                   ? "Delete"
                   : share

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

@@ -17,76 +17,42 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { useThemeColors } from "@notesnook/theme";
 import React, { useCallback, useEffect, useState } from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
+import { SearchBar } from "../../screens/search/search-bar";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import useNavigationStore, {
-  RouteName
-} from "../../stores/use-navigation-store";
+import useNavigationStore from "../../stores/use-navigation-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
+import { useThemeColors } from "@notesnook/theme";
 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;
-  onPress: () => void;
-};
-
-export const Header = ({
-  renderedInRoute,
-  onLeftMenuButtonPress,
-  title,
-  titleHiddenOnRender,
-  headerRightButtons,
-  id,
-  accentColor,
-  isBeta,
-  canGoBack,
-  onPressDefaultRightButton,
-  hasSearch,
-  onSearch
-}: {
-  onLeftMenuButtonPress?: () => void;
-  renderedInRoute: RouteName;
-  id?: string;
-  title: string;
-  headerRightButtons?: HeaderRightButton[];
-  titleHiddenOnRender?: boolean;
-  accentColor?: string;
-  isBeta?: boolean;
-  canGoBack?: boolean;
-  onPressDefaultRightButton?: () => void;
-  hasSearch?: boolean;
-  onSearch?: () => void;
-}) => {
-  const navigation = useNavigation();
 
+const _Header = () => {
   const { colors } = useThemeColors();
   const insets = useGlobalSafeAreaInsets();
-  const [borderHidden, setBorderHidden] = useState(true);
+  const [hide, setHide] = useState(true);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
-  const isFocused = useNavigationStore((state) => state.focusedRouteId === id);
+  const currentScreen = useNavigationStore(
+    (state) => state.currentScreen?.name
+  );
 
   const onScroll = useCallback(
-    (data: { x: number; y: number; id?: string; route: string }) => {
-      if (data.route !== renderedInRoute || data.id !== id) return;
+    (data: { x: number; y: number }) => {
       if (data.y > 150) {
-        if (!borderHidden) return;
-        setBorderHidden(false);
+        if (!hide) return;
+        setHide(false);
       } else {
-        if (borderHidden) return;
-        setBorderHidden(true);
+        if (hide) return;
+        setHide(true);
       }
     },
-    [borderHidden, id, renderedInRoute]
+    [hide]
   );
 
   useEffect(() => {
@@ -94,9 +60,9 @@ export const Header = ({
     return () => {
       eUnSubscribeEvent(eScrollEvent, onScroll);
     };
-  }, [borderHidden, onScroll]);
+  }, [hide, onScroll]);
 
-  return selectionMode && isFocused ? null : (
+  return selectionMode ? null : (
     <>
       <View
         style={[
@@ -106,42 +72,29 @@ export const Header = ({
             backgroundColor: colors.primary.background,
             overflow: "hidden",
             borderBottomWidth: 1,
-            borderBottomColor: borderHidden
+            borderBottomColor: hide
               ? "transparent"
               : colors.secondary.background,
             justifyContent: "space-between"
           }
         ]}
       >
-        <>
-          <View style={styles.leftBtnContainer}>
-            <LeftMenus
-              canGoBack={canGoBack}
-              onLeftButtonPress={onLeftMenuButtonPress}
-            />
-
-            <Title
-              isHiddenOnRender={titleHiddenOnRender}
-              renderedInRoute={renderedInRoute}
-              id={id}
-              accentColor={accentColor}
-              title={title}
-              isBeta={isBeta}
-            />
-          </View>
-          <RightMenus
-            renderedInRoute={renderedInRoute}
-            id={id}
-            headerRightButtons={headerRightButtons}
-            onPressDefaultRightButton={onPressDefaultRightButton}
-            search={hasSearch}
-            onSearch={onSearch}
-          />
-        </>
+        {currentScreen === "Search" ? (
+          <SearchBar />
+        ) : (
+          <>
+            <View style={styles.leftBtnContainer}>
+              <LeftMenus />
+              <Title />
+            </View>
+            <RightMenus />
+          </>
+        )}
       </View>
     </>
   );
 };
+export const Header = React.memo(_Header, () => true);
 
 const styles = StyleSheet.create({
   container: {

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

@@ -17,29 +17,23 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { notesnook } from "../../../e2e/test.ids";
 import { DDS } from "../../services/device-detection";
 import Navigation from "../../services/navigation";
+import useNavigationStore from "../../stores/use-navigation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
+import { useThemeColors } from "@notesnook/theme";
 import { tabBarRef } from "../../utils/global-refs";
 import { IconButton } from "../ui/icon-button";
 
-export const LeftMenus = ({
-  canGoBack,
-  onLeftButtonPress
-}: {
-  canGoBack?: boolean;
-  onLeftButtonPress?: () => void;
-}) => {
+export const LeftMenus = () => {
   const { colors } = useThemeColors();
   const deviceMode = useSettingStore((state) => state.deviceMode);
+  const canGoBack = useNavigationStore((state) => state.canGoBack);
   const isTablet = deviceMode === "tablet";
 
-  const _onLeftButtonPress = () => {
-    if (onLeftButtonPress) return onLeftButtonPress();
-
+  const onLeftButtonPress = () => {
     if (!canGoBack) {
       if (tabBarRef.current?.isDrawerOpen()) {
         Navigation.closeDrawer();
@@ -54,23 +48,27 @@ export const LeftMenus = ({
   return isTablet && !canGoBack ? null : (
     <IconButton
       testID={notesnook.ids.default.header.buttons.left}
-      style={{
+      customStyle={{
         justifyContent: "center",
         alignItems: "center",
         height: 40,
         width: 40,
         borderRadius: 100,
+        marginLeft: -5,
         marginRight: DDS.isLargeTablet() ? 10 : 7
       }}
       left={40}
       top={40}
       right={DDS.isLargeTablet() ? 10 : 10}
-      onPress={_onLeftButtonPress}
+      onPress={onLeftButtonPress}
       onLongPress={() => {
         Navigation.popToTop();
       }}
       name={canGoBack ? "arrow-left" : "menu"}
       color={colors.primary.paragraph}
+      iconStyle={{
+        marginLeft: canGoBack ? -5 : 0
+      }}
     />
   );
 };

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

@@ -20,58 +20,57 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React, { useRef } from "react";
 import { Platform, StyleSheet, View } from "react-native";
 //@ts-ignore
-import { useThemeColors } from "@notesnook/theme";
 import Menu from "react-native-reanimated-material-menu";
 import { notesnook } from "../../../e2e/test.ids";
-import {
-  HeaderRightButton,
-  RouteName
-} from "../../stores/use-navigation-store";
+import Navigation from "../../services/navigation";
+import SearchService from "../../services/search";
+import useNavigationStore from "../../stores/use-navigation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 
-export const RightMenus = ({
-  headerRightButtons,
-  renderedInRoute,
-  id,
-  onPressDefaultRightButton,
-  search,
-  onSearch
-}: {
-  headerRightButtons?: HeaderRightButton[];
-  renderedInRoute: RouteName;
-  id?: string;
-  onPressDefaultRightButton?: () => void;
-  search?: boolean;
-  onSearch?: () => void;
-}) => {
+export const RightMenus = () => {
   const { colors } = useThemeColors();
   const { colors: contextMenuColors } = useThemeColors("contextMenu");
   const deviceMode = useSettingStore((state) => state.deviceMode);
-  const menuRef = useRef<Menu>(null);
+  const buttons = useNavigationStore((state) => state.headerRightButtons);
+  const currentScreen = useNavigationStore((state) => state.currentScreen.name);
+  const buttonAction = useNavigationStore((state) => state.buttonAction);
+  const menuRef = useRef<{
+    show: () => void;
+    hide: () => void;
+  }>();
 
   return (
     <View style={styles.rightBtnContainer}>
-      {search ? (
+      {!currentScreen.startsWith("Settings") ? (
         <IconButton
-          onPress={onSearch}
+          onPress={async () => {
+            SearchService.prepareSearch();
+            Navigation.navigate(
+              {
+                name: "Search"
+              },
+              {}
+            );
+          }}
           testID="icon-search"
           name="magnify"
           color={colors.primary.paragraph}
-          style={styles.rightBtn}
+          customStyle={styles.rightBtn}
         />
       ) : null}
 
       {deviceMode !== "mobile" ? (
         <Button
-          onPress={onPressDefaultRightButton}
+          onPress={buttonAction}
           testID={notesnook.ids.default.addBtn}
-          icon={renderedInRoute === "Trash" ? "delete" : "plus"}
+          icon={currentScreen === "Trash" ? "delete" : "plus"}
           iconSize={SIZE.xl}
-          type="accent"
+          type="shade"
           hitSlop={{
             top: 10,
             right: 10,
@@ -82,7 +81,7 @@ export const RightMenus = ({
             marginLeft: 10,
             width: 32,
             height: 32,
-            borderRadius: 100,
+            borderRadius: 5,
             paddingHorizontal: 0,
             borderWidth: 1,
             borderColor: colors.primary.accent
@@ -90,7 +89,7 @@ export const RightMenus = ({
         />
       ) : null}
 
-      {headerRightButtons && headerRightButtons.length > 0 ? (
+      {buttons && buttons.length > 0 ? (
         <Menu
           ref={menuRef}
           animationDuration={200}
@@ -108,18 +107,18 @@ export const RightMenus = ({
               }}
               name="dots-vertical"
               color={colors.primary.paragraph}
-              style={styles.rightBtn}
+              customStyle={styles.rightBtn}
             />
           }
         >
-          {headerRightButtons.map((item) => (
+          {buttons.map((item) => (
             <Button
               style={{
                 width: 150,
                 justifyContent: "flex-start",
                 borderRadius: 0
               }}
-              type="plain"
+              type="gray"
               buttonType={{
                 text: contextMenuColors.primary.paragraph
               }}