mobile: exclude deps with "android"

keyword on ios

.commitlintrc.js

@@ -20,6 +20,7 @@ const SCOPES = [
   "logger",
   "theme",
   "core",
+  "clipper",
   "config",
   "ci",
   "setup",

.eslintignore

@@ -18,6 +18,10 @@ apps/web/public/an.js
 
 # editor
 packages/editor/styles/
+packages/editor/languages/
 
 # editor mobile
-packages/editor-mobile/build.bundle
+packages/editor-mobile/build.bundle
+
+# snapshots
+tap-snapshots

.eslintrc.js

@@ -2,7 +2,7 @@ const LICENSE = [
   "",
   "This file is part of the Notesnook project (https://notesnook.com/)",
   "",
-  "Copyright (C) 2022 Streetwriters (Private) Limited",
+  "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",

.github/dco.yml

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

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

@@ -0,0 +1,64 @@
+name: Publish @notesnook/android-internal
+
+on: workflow_dispatch
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    timeout-minutes: 40
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - uses: actions/setup-node@master
+        with:
+          node-version: '16'
+          cache: 'npm'
+          cache-dependency-path: |
+            apps/mobile/package-lock.json
+            apps/web/package-lock.json
+            packages/core/package-lock.json
+            packages/crypto/package-lock.json
+            packages/crypto-worker/package-lock.json
+            packages/editor-mobile/package-lock.json
+            packages/editor/package-lock.json
+            packages/logger/package-lock.json
+            packages/streamable-fs/package-lock.json
+            packages/theme/package-lock.json
+
+      - name: Use specific Java version for the builds
+        uses: joschi/setup-jdk@v2
+        with:
+          java-version: '11'
+          architecture: 'x64'
+
+      - name: Install node modules
+        run: |
+          npm ci
+      - name: Make Gradlew Executable
+        run: cd apps/mobile/native/android && chmod +x ./gradlew
+
+      - name: Build unsigned app bundle
+        run: yarn release:android:bundle
+
+      - name: Sign app bundle for Playstore release
+        id: sign_app
+        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 }}   
+
+      - name: Publish to Playstore
+        id: deploy
+        uses: r0adkll/upload-google-play@v1
+        with:
+          serviceAccountJsonPlainText: ${{ secrets.SERVICE_ACCOUNT_JSON }}
+          packageName: com.streetwriters.notesnook
+          releaseFile: ${{steps.sign_app.outputs.signedReleaseFile}}
+          track: internal
+          status: completed
+          whatsNewDirectory: apps/mobile/native/android/releasenotes/             

.github/workflows/android.publish.yml

@@ -50,7 +50,18 @@ jobs:
           signingKeyBase64: ${{ secrets.SIGNING_KEY }}
           alias: ${{ secrets.ALIAS }}
           keyStorePassword: ${{ secrets.KEY_PASSWORD }}
-          keyPassword: ${{ secrets.KEY_PASSWORD }}        
+          keyPassword: ${{ secrets.KEY_PASSWORD }}  
+
+      - name: Publish to Playstore
+        id: deploy
+        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
@@ -91,15 +102,4 @@ jobs:
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-arm64-v8a.apk
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-armeabi-v7a.apk
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86.apk
-            apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86_64.apk
-
-      - name: Publish to Playstore
-        id: deploy
-        uses: r0adkll/upload-google-play@v1
-        with:
-          serviceAccountJsonPlainText: ${{ secrets.SERVICE_ACCOUNT_JSON }}
-          packageName: com.streetwriters.notesnook
-          releaseFile: ${{steps.sign_app.outputs.signedReleaseFile}}
-          track: production
-          status: completed
-          whatsNewDirectory: apps/mobile/native/android/releasenotes/             
+            apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86_64.apk           

.github/workflows/core.tests.yml

@@ -45,9 +45,10 @@ jobs:
           npm ci --prefer-offline --no-audit
       - name: Add environment variables
         run: |
-          echo "EMAIL=${{ secrets.USER_EMAIL }}" >> $GITHUB_ENV
-          echo "PASSWORD='${{ secrets.USER_PASSWORD }}'" >> $GITHUB_ENV
-          echo "HASHED_PASSWORD=${{ secrets.USER_HASHED_PASSWORD }}" >> $GITHUB_ENV
+          echo "USER_EMAIL=${{ secrets.USER_EMAIL }}" >> $GITHUB_ENV
+          echo "USER_PASSWORD=${{ secrets.USER_PASSWORD }}" >> $GITHUB_ENV
+          echo "USER_TOTP_SECRET=${{ secrets.USER_TOTP_SECRET }}" >> $GITHUB_ENV
+          echo "USER_HASHED_PASSWORD=${{ secrets.USER_HASHED_PASSWORD }}" >> $GITHUB_ENV
           echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
 
       - name: Run all @notesnook/core tests

.github/workflows/desktop.publish.yml

@@ -62,6 +62,26 @@ jobs:
           name: build
           path: apps/web/build/**/*
 
+      - name: Collect app metadata
+        id: app_metadata
+        working-directory: ./apps/web/desktop
+        run: |
+          echo ::set-output name=app_version::$(cat package.json | jq -r .version)
+
+      - name: Package desktop build
+        run: |
+          zip -r ./notesnook_build_v${{ steps.app_metadata.outputs.app_version }}.zip ./apps/web/build/
+          echo "Build folder archived to ./notesnook_build_v${{ steps.app_metadata.outputs.app_version }}.zip"
+
+      - name: Upload desktop build
+        uses: softprops/action-gh-release@v1
+        if: inputs.publish-github
+        with:
+          draft: true
+          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
+
   build-macos:
     name: Build for macOS
     needs: build
@@ -107,7 +127,9 @@ jobs:
           path: ./apps/web/desktop/build
 
       - name: Install packages
-        run: npm i
+        run: |
+          npm i
+          npm i dmg-license
         working-directory: ./apps/web/desktop
       
       - name: Install provisioning profile
@@ -129,6 +151,9 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CSC_LINK: ${{ secrets.mac_certs }}
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
+          APPLE_API_KEY: ~/private_keys/AuthKey_${{ secrets.api_key_id }}.p8
+          APPLE_API_KEY_ID: ${{ secrets.api_key_id }}
+          APPLE_API_KEY_ISSUER: ${{ secrets.api_key_issuer_id }}
         run: |
           npm run build
           if [ ${{ inputs.publish-github }} == true ]; then
@@ -148,7 +173,7 @@ jobs:
 
           echo "Uploading ${package} using altool..."
 
-          xcrun altool --upload-package $package -t osx --apiKey $API_KEY_ID --apiIssuer $API_KEY_ISSUER_ID --apple-id ${{ steps.app_metadata.outputs.apple_app_id }} --bundle-id ${{ steps.app_metadata.outputs.app_bundle_id }}--bundle-short-version-string ${{ steps.app_metadata.outputs.app_version }} --bundle-version ${{ steps.app_metadata.outputs.bundle_version }}
+          xcrun altool --upload-package $package -t osx --apiKey $API_KEY_ID --apiIssuer $API_KEY_ISSUER_ID --apple-id ${{ steps.app_metadata.outputs.apple_app_id }} --bundle-id ${{ steps.app_metadata.outputs.app_bundle_id }} --bundle-short-version-string ${{ steps.app_metadata.outputs.app_version }} --bundle-version ${{ steps.app_metadata.outputs.bundle_version }}
         working-directory: ./apps/web/desktop
 
   build-linux:
@@ -160,12 +185,6 @@ jobs:
       - name: Check out Git repository
         uses: actions/checkout@v3
 
-      - name: Collect app metadata
-        id: app_metadata
-        working-directory: ./apps/web/desktop
-        run: |
-          echo ::set-output name=app_version::$(cat package.json | jq -r .version)
-
       - name: Setup Snapcraft Auth
         if: inputs.publish-snap
         run: echo "SNAPCRAFT_STORE_CREDENTIALS=${{ secrets.snapcraft_token }}" >> $GITHUB_ENV
@@ -173,13 +192,6 @@ jobs:
       - name: Install Snapcraft
         uses: samuelmeuli/action-snapcraft@v1
         if: inputs.publish-snap
-
-      - name: Get version info from Snapcraft
-        if: inputs.publish-snap
-        id: snapcraft
-        run:
-          echo ::set-output name=is_published::$(snapcraft status notesnook | grep ${{ steps.app_metadata.outputs.app_version }} | wc -l)
-          echo $is_published
         
       - name: Setup Node
         uses: actions/setup-node@v3
@@ -201,7 +213,7 @@ jobs:
         working-directory: ./apps/web/desktop
 
       - name: Build snap
-        if: inputs.publish-snap && steps.snapcraft.outputs.is_published <= 0
+        if: inputs.publish-snap
         run: |
           npx electron-builder --linux snap -p never
         working-directory: ./apps/web/desktop
@@ -218,7 +230,7 @@ jobs:
         working-directory: ./apps/web/desktop
 
       - name: Publish on Snapcraft
-        if: inputs.publish-snap && steps.snapcraft.outputs.is_published <= 0
+        if: inputs.publish-snap
         run: |
           snapcraft upload --release=stable ./dist/notesnook_linux_amd64.snap
         working-directory: ./apps/web/desktop

.github/workflows/editor.tests.yml

@@ -0,0 +1,54 @@
+name: Test @notesnook/editor
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - "master"
+    paths:
+      - "packages/editor/**"
+      # re-run workflow if workflow file changes
+      - ".github/workflows/editor.tests.yml"
+  pull_request:
+    types:
+      - "ready_for_review"
+      - "opened"
+      - "synchronize"
+      - "reopened"
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: "npm"
+          cache-dependency-path: |
+            apps/mobile/package-lock.json
+            apps/web/package-lock.json
+            packages/core/package-lock.json
+            packages/crypto/package-lock.json
+            packages/crypto-worker/package-lock.json
+            packages/editor-mobile/package-lock.json
+            packages/editor/package-lock.json
+            packages/logger/package-lock.json
+            packages/streamable-fs/package-lock.json
+            packages/theme/package-lock.json
+
+      - name: Install packages
+        run: |
+          npm i --ignore-scripts --prefer-offline --no-audit
+          npx lerna bootstrap --ignore=@notesnook/mobile -- --prefer-offline --no-audit
+
+      - name: Setup environment
+        run: |
+          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
+
+      - name: Run all @notesnook/editor tests
+        run: npx nx test @notesnook/editor

.github/workflows/web.tests.yml

@@ -63,7 +63,7 @@ jobs:
     name: 🧪 Test (${{ matrix.shard }}/${{ strategy.job-total }})
     strategy:
       matrix:
-        shard: [1, 2, 3]
+        shard: [1, 2, 3, 4]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -95,7 +95,7 @@ jobs:
       - name: Install packages
         run: |
           npm i --ignore-scripts --prefer-offline --no-audit
-          npm install -D @playwright/test
+          npm install -D @playwright/test otplib
 
       - name: Validate build extraction
         run: ls -ld ./apps/web/build/index.html
@@ -107,8 +107,9 @@ jobs:
       - name: Add environment variables
         run: |
           echo "USER_EMAIL=${{ secrets.USER_EMAIL }}" >> $GITHUB_ENV
-          echo "CURRENT_USER_PASSWORD=${{ secrets.USER_PASSWORD }}" >> $GITHUB_ENV
-          echo "CURRENT_USER_KEY=${{ secrets.USER_KEY }}" >> $GITHUB_ENV
+          echo "USER_PASSWORD=${{ secrets.USER_PASSWORD }}" >> $GITHUB_ENV
+          echo "USER_TOTP_SECRET=${{ secrets.USER_TOTP_SECRET }}" >> $GITHUB_ENV
+          echo "USER_KEY=${{ secrets.USER_KEY }}" >> $GITHUB_ENV
 
       - name: Run tests
         run: npx playwright test --shard=${{ matrix.shard }}/${{ strategy.job-total }}

.gitignore

@@ -3,4 +3,8 @@ coverage
 node_modules
 dist
 .DS_STORE
-nx-cloud.env
+nx-cloud.env
+.idea
+.eslintcache
+.env.local
+.nyc_output

.prettierrc.js

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

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "ms-playwright.playwright",
+    "firefox-devtools.vscode-firefox-debug",
+    "msjsdiag.vscode-react-native"
+  ]
+}

.vscode/notesnook.code-workspace

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

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "typescript.tsdk": "node_modules/typescript/lib"
-}

AUTHORS

@@ -1,3 +1,4 @@
 Notesnook is written & maintained by:
   - Abdullah Atta <abdullahatta@streetwriters.co>
   - Ammar Ahmed <ammarahmed6506@gmail.com>
+  - Muhammad Ali <alihamuh@gmail.com>

CONTRIBUTING.md

@@ -28,12 +28,6 @@ If you've thought of a way that Notesnook could be better, we want to hear about
 
 Before you open a new feature request, please make sure it's not a duplicate. **Duplicate feature requests & bug reports are closed immediately.**
 
-### Improving documentation
-
-All app related documentation can be found in the `docs/` directory. All the files in this directory are simple markdown files which you can edit either directly on GitHub, or in your favorite text editor.
-
-If you find a mistake in the documentation or would like to contribute something new to the documentation, feel free to open a pull request; creating an issue for this is not required.
-
 ### Helping out in the issue tracker
 
 There are always new issues getting opened that need to be triaged, sorted & organized, so the developers can easily find the most critical and/or relevant bugs to fix. Any help in this regard is appreciated.
@@ -91,7 +85,11 @@ The DCO is a declaration attached to every contribution made by every developer
 Signed-off-by: Jane Smith <jane.smith@email.com>
 ```
 
-You may type this line on your own when writing your commit messages. However, if your [user.name](http://user.name) and [user.email](http://user.email) are set in your git configs, you can use `-s` or `--signoff` to add the `Signed-off-by` line to the end of the commit message.
+On VSCode, it looks like this:
+
+![](resources/vscode-signed-off-commit.png)
+
+You may type this line on your own when writing your commit messages. However, if your [user.name](http://user.name) and [user.email](http://user.email) are set in your git configs, you can use `-s` or `--signoff` to add the `Signed-off-by` line to the end of the commit message automatically.
 
 #### Include `<scope>:` in your commit message
 

apps/mobile/.vscode/launch.json

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

apps/mobile/app/app.js

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -16,7 +16,7 @@ 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 React, { useEffect } from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -30,16 +30,28 @@ import SettingsService from "./services/settings";
 import { TipManager } from "./services/tip-manager";
 import { useUserStore } from "./stores/use-user-store";
 import { View } from "react-native";
+import { useState } from "react";
+import NetInfo from "@react-native-community/netinfo";
+NetInfo.configure({
+  reachabilityUrl: "https://notesnook.com",
+  reachabilityTest: (response) => {
+    if (!response) return false;
+    return response?.status >= 200 && response?.status < 300;
+  }
+});
 
 SettingsService.init();
 SettingsService.checkOrientation();
 const App = () => {
   useAppEvents();
+  const [init, setInit] = useState(false);
   useEffect(() => {
     let { appLockMode } = SettingsService.get();
     if (appLockMode && appLockMode !== "none") {
       useUserStore.getState().setVerifyUser(true);
     }
+    //BackgroundSync.start();
+    setInit(true);
     setTimeout(async () => {
       SettingsService.onFirstLaunch();
       await Notifications.get();
@@ -77,7 +89,7 @@ const App = () => {
         }}
       >
         <ApplicationHolder />
-        <Launcher />
+        {init && <Launcher />}
       </GestureHandlerRootView>
     </View>
   );

apps/mobile/app/assets/images/assets.js

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -21,7 +21,7 @@ import { Platform } from "react-native";
 import "react-native-get-random-values";
 import * as Keychain from "react-native-keychain";
 import { generateSecureRandom } from "react-native-securerandom";
-import Sodium from "react-native-sodium";
+import Sodium from "@ammarahmed/react-native-sodium";
 
 const KEYSTORE_CONFIG = Platform.select({
   ios: {

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -25,10 +25,12 @@ import filesystem from "../filesystem";
 import EventSource from "../../utils/sse/even-source-ios";
 import AndroidEventSource from "../../utils/sse/event-source";
 import Storage, { KV } from "./storage";
+import * as Gzip from "react-native-gzip";
+
 const LoggerStorage = new MMKVLoader()
   .withInstanceID("notesnook_logs")
   .initialize();
-initalize(new KV(LoggerStorage));
+initalize(new KV(LoggerStorage), true);
 export const DatabaseLogger = dbLogger;
 
 /**
@@ -37,7 +39,11 @@ export const DatabaseLogger = dbLogger;
 export var db = new Database(
   Storage,
   Platform.OS === "ios" ? EventSource : AndroidEventSource,
-  filesystem
+  filesystem,
+  {
+    compress: Gzip.deflate,
+    decompress: Gzip.inflate
+  }
 );
 
 db.host(
@@ -48,11 +54,11 @@ db.host(
         SSE_HOST: "https://events.streetwriters.co",
         SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
         ISSUES_HOST: "https://issues.streetwriters.co"
-        // API_HOST: 'http://192.168.10.29:5264',
-        // AUTH_HOST: 'http://192.168.10.29:8264',
-        // SSE_HOST: 'http://192.168.10.29:7264',
-        // SUBSCRIPTIONS_HOST: 'http://192.168.10.29:9264',
-        // ISSUES_HOST: 'http://192.168.10.29:2624'
+        // API_HOST: "http://192.168.8.101:5264",
+        // AUTH_HOST: "http://192.168.8.101:8264",
+        // SSE_HOST: "http://192.168.8.101:7264",
+        // SUBSCRIPTIONS_HOST: "http://192.168.8.101:9264",
+        // ISSUES_HOST: "http://192.168.8.101:2624"
       }
     : {
         API_HOST: "https://api.notesnook.com",

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -0,0 +1,50 @@
+/*
+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 { Dimensions, Platform } from "react-native";
+import ImageResizer from "@bam.tech/react-native-image-resizer";
+import RNFetchBlob from "rn-fetch-blob";
+/**
+ * Scale down & compress images to screen width
+ * for loading in editor.
+ * @returns
+ */
+export async function compressToBase64(path, type) {
+  const { width, scale } = Dimensions.get("window");
+  const response = await ImageResizer.createResizedImage(
+    path,
+    width * scale,
+    9999,
+    type,
+    80,
+    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);
+  return base64;
+}

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { Platform } from "react-native";
 import * as ScopedStorage from "react-native-scoped-storage";
-import Sodium from "react-native-sodium";
+import Sodium from "@ammarahmed/react-native-sodium";
 import RNFetchBlob from "rn-fetch-blob";
 import { ShareComponent } from "../../components/sheets/export-notes/share";
 import { presentSheet, ToastEvent } from "../../services/event-manager";
@@ -68,7 +68,7 @@ export default async function downloadAttachment(hash, global = true) {
       chunkSize: attachment.chunkSize
     };
 
-    let fileUri = await Sodium.decryptFile(key, info, false);
+    let fileUri = await Sodium.decryptFile(key, info, "file");
     ToastEvent.show({
       heading: "Download successful",
       message: attachment.metadata.filename + " downloaded",

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -17,10 +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 {
-  checkAttachment, downloadFile,
-  getUploadedFileSize
-} from "./download";
+import { checkAttachment, downloadFile, getUploadedFileSize } from "./download";
 import {
   clearFileStorage,
   deleteFile,

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -18,9 +18,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Platform } from "react-native";
-import Sodium from "react-native-sodium";
+import Sodium from "@ammarahmed/react-native-sodium";
 import RNFetchBlob from "rn-fetch-blob";
 import { cacheDir, getRandomId } from "./utils";
+import { db } from "../database";
+import { compressToBase64 } from "./compress";
 
 export async function readEncrypted(filename, key, cipherData) {
   let path = `${cacheDir}/${filename}`;
@@ -29,6 +31,9 @@ export async function readEncrypted(filename, key, cipherData) {
     if (!exists) {
       return false;
     }
+    const attachment = db.attachments.attachment(filename);
+    const isPng = /(png)/g.test(attachment?.metadata.type);
+    const isJpeg = /(jpeg|jpg)/g.test(attachment?.metadata.type);
 
     let output = await Sodium.decryptFile(
       key,
@@ -36,13 +41,24 @@ export async function readEncrypted(filename, key, cipherData) {
         ...cipherData,
         hash: filename
       },
-      true
+      cipherData.outputType === "base64"
+        ? isPng || isJpeg
+          ? "cache"
+          : "base64"
+        : "text"
     );
+    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);
     console.log(e);
-    console.log("error");
     return false;
   }
 }

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -23,10 +23,7 @@ import { Linking, View } from "react-native";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
 import Sync from "../../services/sync";
 import { useThemeStore } from "../../stores/use-theme-store";
-import {
-  eCloseAnnouncementDialog,
-  eCloseProgressDialog
-} from "../../utils/events";
+import { eCloseAnnouncementDialog, eCloseSheet } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { PricingPlans } from "../premium/pricing-plans";
@@ -60,11 +57,11 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
         )
       });
     } else if (item.type === "force-sync") {
-      eSendEvent(eCloseProgressDialog);
+      eSendEvent(eCloseSheet);
       await sleep(300);
       Progress.present();
       Sync.run("global", true, true, () => {
-        eSendEvent(eCloseProgressDialog);
+        eSendEvent(eCloseSheet);
       });
     }
   };

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -35,10 +35,7 @@ import PremiumService from "../../services/premium";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { formatBytes } from "../../utils";
-import {
-  eCloseAttachmentDialog,
-  eCloseProgressDialog
-} from "../../utils/events";
+import { eCloseAttachmentDialog, eCloseSheet } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
@@ -71,7 +68,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
           useAttachmentStore.getState().remove(attachment.metadata.hash);
         }
         downloadAttachment(attachment.metadata.hash, false);
-        eSendEvent(eCloseProgressDialog, contextId);
+        eSendEvent(eCloseSheet, contextId);
       },
       icon: "download"
     },
@@ -150,7 +147,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
       onPress: async () => {
         await db.attachments.remove(attachment.metadata.hash, false);
         setAttachments([...db.attachments.all]);
-        eSendEvent(eCloseProgressDialog, contextId);
+        eSendEvent(eCloseSheet, contextId);
       },
       icon: "delete-outline"
     }
@@ -230,16 +227,18 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
             {formatBytes(attachment.length)}
           </Paragraph>
 
-          <Paragraph
-            style={{
-              marginRight: 10
-            }}
-            size={SIZE.xs + 1}
-            color={colors.icon}
-          >
-            {attachment.noteIds.length} note
-            {attachment.noteIds.length > 1 ? "s" : ""}
-          </Paragraph>
+          {attachment.noteIds ? (
+            <Paragraph
+              style={{
+                marginRight: 10
+              }}
+              size={SIZE.xs + 1}
+              color={colors.icon}
+            >
+              {attachment.noteIds.length} note
+              {attachment.noteIds.length > 1 ? "s" : ""}
+            </Paragraph>
+          ) : null}
           <Paragraph
             onPress={() => {
               Clipboard.setString(attachment.metadata.hash);
@@ -291,7 +290,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
                     });
                     return;
                   }
-                  eSendEvent(eCloseProgressDialog, contextId);
+                  eSendEvent(eCloseSheet, contextId);
                   await sleep(150);
                   eSendEvent(eCloseAttachmentDialog);
                   await sleep(300);

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -26,7 +26,7 @@ import {
   ToastEvent
 } from "../../services/event-manager";
 import { useUserStore } from "../../stores/use-user-store";
-import { eCloseProgressDialog } from "../../utils/events";
+import { eCloseSheet } from "../../utils/events";
 import DialogHeader from "../dialog/dialog-header";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
@@ -72,7 +72,7 @@ export const ChangePassword = () => {
         context: "global"
       });
       setLoading(false);
-      eSendEvent(eCloseProgressDialog);
+      eSendEvent(eCloseSheet);
     } catch (e) {
       setLoading(false);
       ToastEvent.show({

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -97,6 +97,9 @@ export const ForgotPassword = () => {
             text: email.current
           });
         }}
+        indicatorStyle={{
+          width: 100
+        }}
         gestureEnabled
         id="forgotpassword_sheet"
       >

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -17,21 +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 React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { View } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import Animated, { FadeInDown, FadeOutUp } from "react-native-reanimated";
-import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
-import { eSendEvent, ToastEvent } from "../../services/event-manager";
-import { clearMessage } from "../../services/message";
-import PremiumService from "../../services/premium";
-import SettingsService from "../../services/settings";
+import { eSendEvent } from "../../services/event-manager";
 import { useThemeStore } from "../../stores/use-theme-store";
-import { useUserStore } from "../../stores/use-user-store";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
-import BaseDialog from "../dialog/base-dialog";
 import SheetProvider from "../sheet-provider";
 import { Progress } from "../sheets/progress";
 import { Button } from "../ui/button";
@@ -42,108 +36,52 @@ import Paragraph from "../ui/typography/paragraph";
 import { SVG } from "./background";
 import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
-import TwoFactorVerification from "./two-factor";
+import { useLogin } from "./use-login";
+
+const LoginSteps = {
+  emailAuth: 1,
+  mfaAuth: 2,
+  passwordAuth: 3
+};
+
 export const Login = ({ changeMode }) => {
   const colors = useThemeStore((state) => state.colors);
-  const email = useRef();
-  const emailInputRef = useRef();
-  const passwordInputRef = useRef();
-  const password = useRef();
   const [focused, setFocused] = useState(false);
-  const [error, setError] = useState(false);
-  const [loading, setLoading] = useState(false);
-
-  const setUser = useUserStore((state) => state.setUser);
-
-  const validateInfo = () => {
-    if (!password.current || !email.current) {
-      ToastEvent.show({
-        heading: "All fields required",
-        message: "Fill all the fields and try again",
-        type: "error",
-        context: "local"
-      });
-
-      return false;
-    }
-
-    return true;
-  };
+  const {
+    step,
+    setStep,
+    password,
+    email,
+    emailInputRef,
+    passwordInputRef,
+    loading,
+    setLoading,
+    setError,
+    login
+  } = useLogin(async () => {
+    hideAuth();
+    eSendEvent("userLoggedIn", true);
+    await sleep(500);
+    Progress.present();
+  });
 
   useEffect(() => {
     async () => {
+      setStep(LoginSteps.emailAuth);
       await sleep(500);
       emailInputRef.current?.focus();
       setFocused(true);
     };
+    return () => {
+      setStep(LoginSteps.emailAuth);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const login = async (mfa, callback) => {
-    if (!validateInfo() || error) return;
-    setLoading(true);
-    let user;
-    try {
-      if (mfa) {
-        await db.user.mfaLogin(
-          email.current.toLowerCase(),
-          password.current,
-          mfa
-        );
-      } else {
-        await db.user.login(email.current.toLowerCase(), password.current);
-      }
-      callback && callback(true);
-
-      user = await db.user.getUser();
-      if (!user) throw new Error("Email or password incorrect!");
-      PremiumService.setPremiumStatus();
-      setUser(user);
-      clearMessage();
-      ToastEvent.show({
-        heading: "Login successful",
-        message: `Logged in as ${user.email}`,
-        type: "success",
-        context: "global"
-      });
-      hideAuth();
-      SettingsService.set({
-        sessionExpired: false,
-        userEmailConfirmed: user?.isEmailConfirmed
-      });
-      eSendEvent("userLoggedIn", true);
-      await sleep(500);
-      Progress.present();
-    } catch (e) {
-      callback && callback(false);
-      if (e.message === "Multifactor authentication required.") {
-        setLoading(false);
-        await sleep(300);
-        TwoFactorVerification.present(async (mfa) => {
-          if (mfa) {
-            await login(mfa);
-          } else {
-            setLoading(false);
-          }
-        }, e.data);
-      } else {
-        setLoading(false);
-        ToastEvent.show({
-          heading: user ? "Failed to sync" : "Login failed",
-          message: e.message,
-          type: "error",
-          context: "local"
-        });
-      }
-    }
-  };
-
   return (
     <>
       <ForgotPassword />
       <SheetProvider context="two_factor_verify" />
-      {loading ? (
-        <BaseDialog transparent={true} visible={true} animation="fade" />
-      ) : null}
       <Animated.View
         entering={FadeInDown}
         exiting={FadeOutUp}
@@ -192,6 +130,7 @@ export const Login = ({ changeMode }) => {
               marginTop: 5
             }}
             onPress={() => {
+              if (loading) return;
               changeMode(1);
             }}
             size={SIZE.md}
@@ -228,48 +167,56 @@ export const Login = ({ changeMode }) => {
             autoCorrect={false}
             autoCapitalize="none"
             errorMessage="Email is invalid"
-            placeholder="Email"
+            placeholder="Enter your email"
+            defaultValue={email.current}
+            editable={step === LoginSteps.emailAuth && !loading}
             onSubmit={() => {
               passwordInputRef.current?.focus();
             }}
           />
 
-          <Input
-            fwdRef={passwordInputRef}
-            onChangeText={(value) => {
-              password.current = value;
-            }}
-            testID="input.password"
-            returnKeyLabel="Done"
-            returnKeyType="done"
-            secureTextEntry
-            autoComplete="password"
-            autoCapitalize="none"
-            autoCorrect={false}
-            placeholder="Password"
-            marginBottom={0}
-            onSubmit={() => login()}
-          />
-          <Button
-            title="Forgot your password?"
-            style={{
-              alignSelf: "flex-end",
-              height: 30,
-              paddingHorizontal: 0
-            }}
-            onPress={() => {
-              SheetManager.show("forgotpassword_sheet", email.current);
-            }}
-            textStyle={{
-              textDecorationLine: "underline"
-            }}
-            fontSize={SIZE.xs}
-            type="gray"
-          />
+          {step === LoginSteps.passwordAuth && (
+            <>
+              <Input
+                fwdRef={passwordInputRef}
+                onChangeText={(value) => {
+                  password.current = value;
+                }}
+                testID="input.password"
+                returnKeyLabel="Done"
+                returnKeyType="done"
+                secureTextEntry
+                autoComplete="password"
+                autoCapitalize="none"
+                autoCorrect={false}
+                placeholder="Password"
+                marginBottom={0}
+                editable={!loading}
+                defaultValue={password.current}
+                onSubmit={() => login()}
+              />
+              <Button
+                title="Forgot your password?"
+                style={{
+                  alignSelf: "flex-end",
+                  height: 30,
+                  paddingHorizontal: 0
+                }}
+                onPress={() => {
+                  if (loading) return;
+                  SheetManager.show("forgotpassword_sheet", email.current);
+                }}
+                textStyle={{
+                  textDecorationLine: "underline"
+                }}
+                fontSize={SIZE.xs}
+                type="gray"
+              />
+            </>
+          )}
 
           <View
             style={{
-              // position: 'absolute',
               marginTop: 25,
               alignSelf: "center"
             }}
@@ -280,11 +227,40 @@ export const Login = ({ changeMode }) => {
                 borderRadius: 100
               }}
               loading={loading}
-              onPress={() => login()}
-              //  width="100%"
+              onPress={() => {
+                if (loading) return;
+                login();
+              }}
               type="accent"
-              title={loading ? null : "Login to your account"}
+              title={
+                loading
+                  ? null
+                  : step === LoginSteps.emailAuth
+                  ? "Login"
+                  : "Continue"
+              }
             />
+
+            {step === LoginSteps.passwordAuth && (
+              <Button
+                title="Cancel logging in"
+                style={{
+                  alignSelf: "center",
+                  height: 30,
+                  marginTop: 10
+                }}
+                onPress={() => {
+                  if (loading) return;
+                  setStep(LoginSteps.emailAuth);
+                  setLoading(false);
+                }}
+                textStyle={{
+                  textDecorationLine: "underline"
+                }}
+                fontSize={SIZE.xs}
+                type="errorShade"
+              />
+            )}
           </View>
         </View>
       </Animated.View>

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Modal, View } from "react-native";
 import { db } from "../../common/database";
 import BiometricService from "../../services/biometrics";
@@ -27,27 +27,23 @@ import {
   eUnSubscribeEvent,
   ToastEvent
 } from "../../services/event-manager";
-import { clearMessage } from "../../services/message";
-import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
 import Sync from "../../services/sync";
 import { useThemeStore } from "../../stores/use-theme-store";
-import { useUserStore } from "../../stores/use-user-store";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
 import SheetProvider from "../sheet-provider";
-import { Progress } from "../sheets/progress";
 import { Toast } from "../toast";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import TwoFactorVerification from "./two-factor";
+import { LoginSteps, useLogin } from "./use-login";
 
-function getEmail(email) {
+function getObfuscatedEmail(email) {
   if (!email) return null;
   return email.replace(/(.{2})(.*)(?=@)/, function (gp1, gp2, gp3) {
     for (let i = 0; i < gp3.length; i++) {
@@ -59,15 +55,14 @@ function getEmail(email) {
 
 export const SessionExpired = () => {
   const colors = useThemeStore((state) => state.colors);
-  const email = useRef();
-  const passwordInputRef = useRef();
-  const password = useRef();
   const [visible, setVisible] = useState(false);
   const [focused, setFocused] = useState(false);
-
-  const setUser = useUserStore((state) => state.setUser);
-
-  const [loading, setLoading] = useState(false);
+  const { step, password, email, passwordInputRef, loading, login } = useLogin(
+    () => {
+      eSendEvent("userLoggedIn", true);
+      setVisible(false);
+    }
+  );
 
   const logout = async () => {
     try {
@@ -92,9 +87,9 @@ export const SessionExpired = () => {
       eUnSubscribeEvent("session_expired", open);
       setFocused(false);
     };
-  }, [visible]);
+  }, [visible, open]);
 
-  const open = async () => {
+  const open = React.useCallback(async () => {
     try {
       let res = await db.user.tokenManager.getToken();
       if (!res) throw new Error("no token found");
@@ -120,64 +115,8 @@ export const SessionExpired = () => {
       email.current = user.email;
       setVisible(true);
     }
-  };
+  }, [email]);
 
-  const login = async (mfa, callback) => {
-    setLoading(true);
-    let user;
-    try {
-      if (mfa) {
-        await db.user.mfaLogin(
-          email.current.toLowerCase(),
-          password.current,
-          mfa
-        );
-      } else {
-        await db.user.login(email.current.toLowerCase(), password.current);
-      }
-      callback && callback(true);
-      setVisible(false);
-      user = await db.user.getUser();
-      if (!user) throw new Error("Email or password incorrect!");
-      PremiumService.setPremiumStatus();
-      setUser(user);
-      clearMessage();
-      ToastEvent.show({
-        heading: "Login successful",
-        message: `Logged in as ${user.email}`,
-        type: "success",
-        context: "global"
-      });
-      await SettingsService.set({
-        sessionExpired: false,
-        userEmailConfirmed: user?.isEmailConfirmed
-      });
-      eSendEvent("userLoggedIn", true);
-      await sleep(500);
-      Progress.present();
-      setLoading(false);
-    } catch (e) {
-      callback && callback(false);
-      if (e.message === "Multifactor authentication required.") {
-        TwoFactorVerification.present(async (mfa) => {
-          if (mfa) {
-            await login(mfa);
-          } else {
-            setLoading(false);
-          }
-        }, e.data);
-      } else {
-        console.log(e.stack);
-        setLoading(false);
-        ToastEvent.show({
-          heading: user ? "Failed to sync" : "Login failed",
-          message: e.message,
-          type: "error",
-          context: "local"
-        });
-      }
-    }
-  };
   return (
     visible && (
       <Modal
@@ -194,7 +133,8 @@ export const SessionExpired = () => {
             width: focused ? "100%" : "99.9%",
             padding: 12,
             justifyContent: "center",
-            flex: 1
+            flex: 1,
+            backgroundColor: colors.bg
           }}
         >
           <View
@@ -225,29 +165,32 @@ export const SessionExpired = () => {
               }}
             >
               Your session on this device has expired. Please enter password for{" "}
-              {getEmail(email.current)} to continue.
+              {getObfuscatedEmail(email.current)} to continue.
             </Paragraph>
           </View>
 
-          <Input
-            fwdRef={passwordInputRef}
-            onChangeText={(value) => {
-              password.current = value;
-            }}
-            returnKeyLabel="Next"
-            returnKeyType="next"
-            secureTextEntry
-            autoComplete="password"
-            autoCapitalize="none"
-            autoCorrect={false}
-            placeholder="Password"
-            onSubmit={() => login()}
-          />
+          {step === LoginSteps.passwordAuth ? (
+            <Input
+              fwdRef={passwordInputRef}
+              onChangeText={(value) => {
+                password.current = value;
+              }}
+              returnKeyLabel="Next"
+              returnKeyType="next"
+              secureTextEntry
+              autoComplete="password"
+              autoCapitalize="none"
+              autoCorrect={false}
+              placeholder="Password"
+              onSubmit={() => login()}
+            />
+          ) : null}
 
           <Button
             style={{
               marginTop: 10,
-              width: "100%"
+              width: 250,
+              borderRadius: 100
             }}
             loading={loading}
             onPress={() => login()}

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -20,7 +20,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React, { useRef, useState } from "react";
 import { Dimensions, View } from "react-native";
 import Animated, { FadeInDown, FadeOutUp } from "react-native-reanimated";
-import umami from "../../common/analytics";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { ToastEvent } from "../../services/event-manager";
@@ -31,7 +30,6 @@ import { useUserStore } from "../../stores/use-user-store";
 import { openLinkInBrowser } from "../../utils/functions";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
-import BaseDialog from "../dialog/base-dialog";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
 import { SvgView } from "../ui/svg";
@@ -79,7 +77,6 @@ export const Signup = ({ changeMode, trial }) => {
       clearMessage();
       setEmailVerifyMessage();
       hideAuth();
-      umami.pageView("/account-created", "/welcome/signup");
       await sleep(300);
       if (trial) {
         PremiumService.sheet(null, null, true);
@@ -99,9 +96,6 @@ export const Signup = ({ changeMode, trial }) => {
 
   return (
     <>
-      {loading ? (
-        <BaseDialog transparent={true} visible={true} animation="fade" />
-      ) : null}
       <Animated.View
         entering={FadeInDown}
         exiting={FadeOutUp}
@@ -150,6 +144,7 @@ export const Signup = ({ changeMode, trial }) => {
               textAlign: "center"
             }}
             onPress={() => {
+              if (loading) return;
               changeMode(0);
             }}
             size={SIZE.md}
@@ -237,7 +232,10 @@ export const Signup = ({ changeMode, trial }) => {
                 borderRadius: 100
               }}
               loading={loading}
-              onPress={signup}
+              onPress={() => {
+                if (loading) return;
+                signup();
+              }}
               type="accent"
               title={loading ? null : "Agree and continue"}
             />

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -27,7 +27,7 @@ import {
   ToastEvent
 } from "../../services/event-manager";
 import { useThemeStore } from "../../stores/use-theme-store";
-import { eCloseProgressDialog } from "../../utils/events";
+import { eCloseSheet } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
@@ -54,7 +54,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
     app: "Enter the 6 digit code from your authenticator app to continue logging in",
     sms: "Enter the 6 digit code sent to your phone number to continue logging in",
     email: "Enter the 6 digit code sent to your email to continue logging in",
-    recoveryCode: "Enter the 8 digit recovery code to continue logging in"
+    recoveryCode: "Enter the recovery code to continue logging in"
   };
 
   const secondaryMethodsText = {
@@ -65,9 +65,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
   };
 
   const onNext = async () => {
-    const length = currentMethod.method === "recoveryCode" ? 8 : 6;
-
-    if (!code.current || code.current.length !== length) return;
+    if (!code.current || code.current.length < 6) return;
     setLoading(true);
     inputRef.current?.blur();
     await onMfaLogin(
@@ -77,7 +75,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
       },
       (result) => {
         if (result) {
-          eSendEvent(eCloseProgressDialog, "two_factor_verify");
+          eSendEvent(eCloseSheet, "two_factor_verify");
         }
         setLoading(false);
       }
@@ -202,21 +200,26 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
           <>
             <Input
               placeholder={
-                currentMethod.method === "recoveryCode" ? "xxxxxxxx" : "xxxxxx"
+                currentMethod.method === "recoveryCode"
+                  ? "xxxxx-xxxxx"
+                  : "xxxxxx"
+              }
+              testID={"input.totp"}
+              maxLength={
+                currentMethod.method === "recoveryCode" ? undefined : 6
               }
-              maxLength={currentMethod.method === "recoveryCode" ? 8 : 6}
               fwdRef={inputRef}
               textAlign="center"
               onChangeText={(value) => {
                 code.current = value;
-                onNext();
+                //onNext();
               }}
               inputStyle={{
                 fontSize: SIZE.lg,
                 height: 60,
                 textAlign: "center",
                 letterSpacing: 10,
-                width: null
+                width: 250
               }}
               keyboardType={
                 currentMethod.method === "recoveryCode" ? "default" : "numeric"
@@ -299,7 +302,9 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
 
 TwoFactorVerification.present = (onMfaLogin, data, context) => {
   presentSheet({
-    component: <TwoFactorVerification onMfaLogin={onMfaLogin} mfaInfo={data} />,
+    component: () => (
+      <TwoFactorVerification onMfaLogin={onMfaLogin} mfaInfo={data} />
+    ),
     context: context || "two_factor_verify",
     onClose: () => {
       onMfaLogin();

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

@@ -0,0 +1,158 @@
+/*
+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 { useRef, useState } from "react";
+import { db } from "../../common/database";
+import { eSendEvent, ToastEvent } from "../../services/event-manager";
+import { clearMessage } from "../../services/message";
+import PremiumService from "../../services/premium";
+import SettingsService from "../../services/settings";
+import { useUserStore } from "../../stores/use-user-store";
+import { eCloseSheet } from "../../utils/events";
+import TwoFactorVerification from "./two-factor";
+
+export const LoginSteps = {
+  emailAuth: 1,
+  mfaAuth: 2,
+  passwordAuth: 3
+};
+
+export const useLogin = (onFinishLogin) => {
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const setUser = useUserStore((state) => state.setUser);
+  const [step, setStep] = useState(LoginSteps.emailAuth);
+  const email = useRef();
+  const password = useRef();
+  const emailInputRef = useRef();
+  const passwordInputRef = useRef();
+
+  const validateInfo = () => {
+    if (
+      (!password.current && step === LoginSteps.passwordAuth) ||
+      (!email.current && step === LoginSteps.emailAuth)
+    ) {
+      ToastEvent.show({
+        heading: "All fields required",
+        message: "Fill all the fields and try again",
+        type: "error",
+        context: "local"
+      });
+
+      return false;
+    }
+
+    return true;
+  };
+
+  const login = async () => {
+    if (!validateInfo() || error) return;
+    try {
+      setLoading(true);
+      switch (step) {
+        case LoginSteps.emailAuth: {
+          const mfaInfo = await db.user.authenticateEmail(email.current);
+          if (mfaInfo) {
+            TwoFactorVerification.present(async (mfa, callback) => {
+              try {
+                const success = await db.user.authenticateMultiFactorCode(
+                  mfa.code,
+                  mfa.method
+                );
+
+                if (success) {
+                  setStep(LoginSteps.passwordAuth);
+                  setLoading(false);
+                  setTimeout(() => {
+                    passwordInputRef.current?.focus();
+                  }, 1);
+                  callback && callback(true);
+                }
+                callback && callback(false);
+              } catch (e) {
+                callback && callback(false);
+                if (e.message === "invalid_grant") {
+                  eSendEvent(eCloseSheet, "two_factor_verify");
+                  setLoading(false);
+                  setStep(LoginSteps.emailAuth);
+                }
+              }
+            }, mfaInfo);
+          } else {
+            finishWithError(new Error("Unable to send 2FA code"));
+          }
+          break;
+        }
+        case LoginSteps.passwordAuth: {
+          await db.user.authenticatePassword(email.current, password.current);
+          finishLogin();
+          break;
+        }
+      }
+      setLoading(false);
+    } catch (e) {
+      finishWithError(e);
+    }
+  };
+
+  const finishWithError = async (e) => {
+    if (e.message === "invalid_grant") setStep(LoginSteps.emailAuth);
+    setLoading(false);
+    ToastEvent.show({
+      heading: "Login failed",
+      message: e.message,
+      type: "error",
+      context: "local"
+    });
+  };
+
+  const finishLogin = async () => {
+    const user = await db.user.getUser();
+    if (!user) throw new Error("Email or password incorrect!");
+    PremiumService.setPremiumStatus();
+    setUser(user);
+    clearMessage();
+    ToastEvent.show({
+      heading: "Login successful",
+      message: `Logged in as ${user.email}`,
+      type: "success",
+      context: "global"
+    });
+    SettingsService.set({
+      sessionExpired: false,
+      userEmailConfirmed: user?.isEmailConfirmed
+    });
+    onFinishLogin?.();
+    setLoading(false);
+  };
+
+  return {
+    login,
+    step,
+    setStep,
+    email,
+    password,
+    passwordInputRef,
+    emailInputRef,
+    loading,
+    setLoading,
+    error,
+    setError
+  };
+};

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -18,7 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { KeyboardAvoidingView, Platform, SafeAreaView } from "react-native";
+import { KeyboardAvoidingView, Platform, View } from "react-native";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { Header } from "../header";
@@ -28,6 +29,7 @@ export const Container = ({ children }) => {
   const introCompleted = useSettingStore(
     (state) => state.settings.introCompleted
   );
+  const insets = useGlobalSafeAreaInsets();
   return (
     <KeyboardAvoidingView
       behavior="padding"
@@ -36,10 +38,12 @@ export const Container = ({ children }) => {
         flex: 1
       }}
     >
-      <SafeAreaView
+      <View
         style={{
           flex: 1,
-          overflow: "hidden"
+          overflow: "hidden",
+          paddingTop: Platform.OS === "android" ? 0 : insets.top,
+          paddingBottom: Platform.OS === "android" ? 0 : insets.bottom
         }}
       >
         {!introCompleted ? null : (
@@ -50,7 +54,7 @@ export const Container = ({ children }) => {
         )}
 
         {children}
-      </SafeAreaView>
+      </View>
     </KeyboardAvoidingView>
   );
 };

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -26,6 +26,7 @@ import AuthModal from "../auth/auth-modal";
 import { SessionExpired } from "../auth/session-expired";
 import { Dialog } from "../dialog";
 import { AddTopicDialog } from "../dialogs/add-topic";
+import { LoadingDialog } from "../dialogs/loading";
 import ResultDialog from "../dialogs/result";
 import { VaultDialog } from "../dialogs/vault";
 import ImagePreview from "../image-preview";
@@ -47,6 +48,7 @@ const DialogProvider = () => {
 
   return (
     <>
+      <LoadingDialog />
       <Dialog context="global" />
       <AddTopicDialog colors={colors} />
       <AddNotebookSheet colors={colors} />

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { Text, View } from "react-native";
+import { Text, View, ViewStyle } from "react-native";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
@@ -35,11 +35,13 @@ type DialogHeaderProps = {
     loading?: boolean;
     title?: string;
     type?: PressableButtonProps["type"];
+    icon?: string;
   };
   paragraphColor?: string;
   padding?: number;
   centered?: boolean;
   titlePart?: string;
+  style?: ViewStyle;
 };
 
 const DialogHeader = ({
@@ -49,7 +51,8 @@ const DialogHeader = ({
   paragraphColor,
   padding,
   centered,
-  titlePart
+  titlePart,
+  style
 }: DialogHeaderProps) => {
   const colors = useThemeStore((state) => state.colors);
 
@@ -61,7 +64,8 @@ const DialogHeader = ({
           alignItems: "center",
           justifyContent: "space-between",
           minHeight: 50,
-          paddingHorizontal: padding
+          paddingHorizontal: padding,
+          ...style
         }}
       >
         <View
@@ -96,6 +100,7 @@ const DialogHeader = ({
                 loading={button.loading}
                 fontSize={13}
                 title={button.title}
+                icon={button.icon}
                 type={button.type || "grayBg"}
                 height={25}
               />

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -0,0 +1,88 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import React from "react";
+import { View } from "react-native";
+import { useThemeStore } from "../../../stores/use-theme-store";
+import BaseDialog from "../../dialog/base-dialog";
+import { ProgressBarComponent } from "../../ui/svg/lazy";
+import { useEffect } from "react";
+import {
+  eSubscribeEvent,
+  eUnSubscribeEvent
+} from "../../../services/event-manager";
+import { useState } from "react";
+import { eCloseLoading, eOpenLoading } from "../../../utils/events";
+
+export const LoadingDialog = () => {
+  const colors = useThemeStore((state) => state.colors);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    eSubscribeEvent(eOpenLoading, open);
+    eSubscribeEvent(eCloseLoading, close);
+    return () => {
+      eUnSubscribeEvent(eOpenLoading, open);
+      eUnSubscribeEvent(eCloseLoading, close);
+    };
+  }, []);
+
+  const open = () => setVisible(true);
+  const close = () => setVisible(false);
+  return (
+    <BaseDialog
+      animated={false}
+      bounce={false}
+      visible={visible}
+      onRequestClose={undefined}
+      onShow={undefined}
+      premium={undefined}
+      transparent={undefined}
+    >
+      <View
+        style={{
+          width: "100%",
+          height: "100%",
+          backgroundColor: colors.bg,
+          justifyContent: "center",
+          alignItems: "center"
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            width: 100,
+            marginTop: 15
+          }}
+        >
+          <ProgressBarComponent
+            height={5}
+            width={100}
+            animated={true}
+            useNativeDriver
+            indeterminate
+            indeterminateAnimationDuration={2000}
+            unfilledColor={colors.nav}
+            color={colors.accent}
+            borderWidth={0}
+          />
+        </View>
+      </View>
+    </BaseDialog>
+  );
+};

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -23,7 +23,7 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { eSendEvent } from "../../../services/event-manager";
 import { useThemeStore } from "../../../stores/use-theme-store";
 import {
-  eCloseProgressDialog,
+  eCloseSheet,
   eCloseResultDialog,
   eOpenPremiumDialog
 } from "../../../utils/events";
@@ -82,7 +82,7 @@ export const ProFeatures = ({ count = 6 }) => {
       <Paragraph
         onPress={async () => {
           eSendEvent(eCloseResultDialog);
-          eSendEvent(eCloseProgressDialog);
+          eSendEvent(eCloseSheet);
           await sleep(300);
           eSendEvent(eOpenPremiumDialog);
         }}

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -51,7 +51,7 @@ export const LeftMenus = () => {
     }
   };
 
-  return isTablet ? null : (
+  return isTablet && !canGoBack ? null : (
     <IconButton
       testID={notesnook.ids.default.header.buttons.left}
       customStyle={{

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -32,6 +32,7 @@ import { SIZE } from "../../utils/size";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { useCallback } from "react";
+import Tag from "../ui/tag";
 
 const titleState = {};
 
@@ -104,7 +105,8 @@ export const Title = () => {
       style={{
         opacity: 1,
         flexShrink: 1,
-        flexDirection: "row"
+        flexDirection: "row",
+        alignItems: "center"
       }}
     >
       {!hide && !isHidden ? (
@@ -135,6 +137,7 @@ export const Title = () => {
           {title}
         </Heading>
       ) : null}
+      <Tag visible={currentScreen.beta} text="BETA" />
     </View>
   );
 };

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -19,15 +19,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import Animated, { FadeInDown } from "react-native-reanimated";
-import umami from "../../common/analytics";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import SettingsService from "../../services/settings";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { getElevation } from "../../utils";
-import { eOpenLoginDialog } from "../../utils/events";
+import {
+  eCloseLoading,
+  eOpenLoading,
+  eOpenLoginDialog
+} from "../../utils/events";
 import { SIZE } from "../../utils/size";
+import { sleep } from "../../utils/time";
 import { AuthMode } from "../auth";
 import { Button } from "../ui/button";
 import { SvgView } from "../ui/svg";
@@ -82,7 +86,6 @@ export const WelcomeNotice = () => {
               }
             );
           }, 1000);
-          umami.pageView("/encryptionnotice", "/welcome/privacymode");
         }}
         style={{
           paddingHorizontal: 24,
@@ -94,6 +97,39 @@ export const WelcomeNotice = () => {
         type="accent"
         title="Create your account"
       />
+
+      <Button
+        title="Skip for now"
+        onPress={async () => {
+          eSendEvent(eOpenLoading);
+          await sleep(1000);
+          SettingsService.set({
+            introCompleted: true
+          });
+          Navigation.replace(
+            {
+              name: "Notes"
+            },
+            {
+              canGoBack: false
+            }
+          );
+          await sleep(1000);
+          eSendEvent(eCloseLoading);
+        }}
+        iconSize={20}
+        type="gray"
+        iconPosition="right"
+        icon="chevron-right"
+        height={25}
+        iconStyle={{
+          marginTop: 2
+        }}
+        style={{
+          paddingHorizontal: 6,
+          marginTop: 10
+        }}
+      />
     </Animated.View>
   );
 };

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -24,13 +24,8 @@ import { checkVersion } from "react-native-check-version";
 import { enabled } from "react-native-privacy-snapshot";
 import { DatabaseLogger, db, loadDatabase } from "../../common/database";
 import { useAppState } from "../../hooks/use-app-state";
-import BackupService from "../../services/backup";
 import BiometricService from "../../services/biometrics";
-import {
-  eSendEvent,
-  presentSheet,
-  ToastEvent
-} from "../../services/event-manager";
+import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { setRateAppMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
@@ -55,6 +50,10 @@ import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { Walkthrough } from "../walkthroughs";
+import Config from "react-native-config";
+import { getGithubVersion } from "../../utils/github-version";
+import notifee from "@notifee/react-native";
+
 
 const Launcher = React.memo(
   function Launcher() {
@@ -102,7 +101,8 @@ const Launcher = React.memo(
       if (db.migrations.required() && !verifyUser) {
         presentSheet({
           component: <Migrate />,
-          onClose: () => {
+          onClose: async () => {
+            await db.init();
             loadNotes();
           },
           disableClosing: true
@@ -117,10 +117,6 @@ const Launcher = React.memo(
       }
     }, [loadNotes, verifyUser]);
 
-    // useEffect(() => {
-    //   hideSplashScreen();
-    // }, [verifyUser]);
-
     useEffect(() => {
       if (!loading) {
         doAppLoadActions();
@@ -136,20 +132,8 @@ const Launcher = React.memo(
         eSendEvent("session_expired");
         return;
       }
-      const user = await db.user.getUser();
+      notifee.setBadgeCount(0);
       await useMessageStore.getState().setAnnouncement();
-      if (PremiumService.get() && user) {
-        if (SettingsService.get().reminder === "off") {
-          SettingsService.set({ reminder: "daily" });
-        }
-        if (
-          await BackupService.checkBackupRequired(
-            SettingsService.get().reminder
-          )
-        ) {
-          sleep(2000).then(() => BackupService.run());
-        }
-      }
       if (NewFeature.present()) return;
       if (await checkAppUpdateAvailable()) return;
       if (await checkForRateAppRequest()) return;
@@ -169,8 +153,11 @@ const Launcher = React.memo(
     const checkAppUpdateAvailable = async () => {
       if (__DEV__) return;
       try {
-        const version = await checkVersion();
-        if (!version.needsUpdate) return false;
+        const version =
+          Config.GITHUB_RELEASE === "true"
+            ? await getGithubVersion()
+            : await checkVersion();
+        if (!version || !version?.needsUpdate) return false;
         presentSheet({
           component: (ref) => <Update version={version} fwdRef={ref} />
         });
@@ -211,13 +198,7 @@ const Launcher = React.memo(
     };
 
     const onUnlockBiometrics = useCallback(async () => {
-      if (!(await BiometricService.isBiometryAvailable())) {
-        ToastEvent.show({
-          heading: "Biometrics unavailable",
-          message: "Try unlocking the app with your account password"
-        });
-        return;
-      }
+      if (!(await BiometricService.isBiometryAvailable())) return;
       let verified = await BiometricService.validateUser(
         "Unlock to access your notes",
         ""

apps/mobile/app/components/list-items/footer/index.js

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

apps/mobile/app/components/list-items/headers/header.js

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -122,7 +122,7 @@ export const SectionHeader = React.memo(
             alignItems: "center"
           }}
         >
-          {index === 0 ? (
+          {index === 0 && (
             <>
               <Button
                 onPress={() => {
@@ -130,6 +130,7 @@ export const SectionHeader = React.memo(
                     component: <Sort screen={screen} type={type} />
                   });
                 }}
+                hidden={screen === "Reminders"}
                 tooltipText="Change sorting of items in list"
                 fwdRef={sortRef}
                 title={groupBy}
@@ -152,38 +153,35 @@ export const SectionHeader = React.memo(
                 iconPosition="right"
               />
 
-              {type === "notes" || type === "notebooks" || type === "home" ? (
-                <IconButton
-                  customStyle={{
-                    width: 25,
-                    height: 25
-                  }}
-                  testID="icon-compact-mode"
-                  tooltipText={
-                    listMode == "compact"
-                      ? "Switch to normal mode"
-                      : "Switch to compact mode"
-                  }
-                  fwdRef={compactModeRef}
-                  color={colors.icon}
-                  name={
-                    listMode == "compact" ? "view-list" : "view-list-outline"
-                  }
-                  onPress={() => {
-                    let settings = {};
-                    settings[
-                      type !== "notebooks"
-                        ? "notesListMode"
-                        : "notebooksListMode"
-                    ] = listMode === "normal" ? "compact" : "normal";
+              <IconButton
+                customStyle={{
+                  width: 25,
+                  height: 25
+                }}
+                hidden={
+                  type !== "notes" && type !== "notebooks" && type !== "home"
+                }
+                testID="icon-compact-mode"
+                tooltipText={
+                  listMode == "compact"
+                    ? "Switch to normal mode"
+                    : "Switch to compact mode"
+                }
+                fwdRef={compactModeRef}
+                color={colors.icon}
+                name={listMode == "compact" ? "view-list" : "view-list-outline"}
+                onPress={() => {
+                  let settings = {};
+                  settings[
+                    type !== "notebooks" ? "notesListMode" : "notebooksListMode"
+                  ] = listMode === "normal" ? "compact" : "normal";
 
-                    SettingsService.set(settings);
-                  }}
-                  size={SIZE.lg - 2}
-                />
-              ) : null}
+                  SettingsService.set(settings);
+                }}
+                size={SIZE.lg - 2}
+              />
             </>
-          ) : null}
+          )}
         </View>
       </View>
     );

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { getUpcomingReminder } from "@notesnook/core/collections/reminders";
 import { decode, EntityLevel } from "entities";
 import React from "react";
 import { View } from "react-native";
@@ -25,6 +26,7 @@ import { notesnook } from "../../../../e2e/test.ids";
 import { db } from "../../../common/database";
 import { TaggedNotes } from "../../../screens/notes/tagged";
 import { TopicNotes } from "../../../screens/notes/topic-notes";
+import { useRelationStore } from "../../../stores/use-relation-store";
 import { useSettingStore } from "../../../stores/use-setting-store";
 import { useThemeStore } from "../../../stores/use-theme-store";
 import { COLORS_NOTE } from "../../../utils/color-scheme";
@@ -32,6 +34,7 @@ import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
+import { ReminderTime } from "../../ui/reminder-time";
 import { TimeSince } from "../../ui/time-since";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
@@ -86,7 +89,10 @@ const NoteItem = ({
   const compactMode = notesListMode === "compact";
   const attachmentCount = db.attachments?.ofNote(item.id, "all")?.length || 0;
   const notebooks = React.useMemo(() => getNotebook(item), [item]);
-
+  const reminders = db.relations.from(item, "reminder");
+  const reminder = getUpcomingReminder(reminders);
+  const _update = useRelationStore((state) => state.updater);
+  const noteColor = COLORS_NOTE[item.color?.toLowerCase()];
   return (
     <>
       <View
@@ -102,14 +108,15 @@ const NoteItem = ({
               alignItems: "center",
               zIndex: 10,
               elevation: 10,
-              marginBottom: 2.5
+              marginBottom: 2.5,
+              flexWrap: "wrap"
             }}
           >
             {notebooks?.map((_item) => (
               <Button
                 title={_item.title}
                 key={_item}
-                height={20}
+                height={25}
                 icon="book-outline"
                 type="grayBg"
                 fontSize={SIZE.xs}
@@ -122,11 +129,23 @@ const NoteItem = ({
                   marginRight: 5,
                   borderWidth: 0.5,
                   borderColor: colors.icon,
-                  paddingHorizontal: 6
+                  paddingHorizontal: 6,
+                  marginBottom: 5
                 }}
                 onPress={() => navigateToTopic(_item.topic)}
               />
             ))}
+
+            <ReminderTime
+              reminder={reminder}
+              color={noteColor}
+              onPress={() => {
+                Properties.present(reminder);
+              }}
+              style={{
+                height: 25
+              }}
+            />
           </View>
         ) : null}
 

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -20,21 +20,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import NoteItem from ".";
 import { notesnook } from "../../../../e2e/test.ids";
-import { useSelectionStore } from "../../../stores/use-selection-store";
-import { useTrashStore } from "../../../stores/use-trash-store";
-import { useEditorStore } from "../../../stores/use-editor-store";
+import { db } from "../../../common/database";
 import { DDS } from "../../../services/device-detection";
 import {
   eSendEvent,
+  hideSheet,
   openVault,
-  ToastEvent
+  presentSheet
 } from "../../../services/event-manager";
-import Navigation from "../../../services/navigation";
+import { useEditorStore } from "../../../stores/use-editor-store";
+import { useSelectionStore } from "../../../stores/use-selection-store";
 import { history } from "../../../utils";
-import { db } from "../../../common/database";
 import { eOnLoadNote, eShowMergeDialog } from "../../../utils/events";
 import { tabBarRef } from "../../../utils/global-refs";
 import { presentDialog } from "../../dialog/functions";
+import NotePreview from "../../note-history/preview";
 import SelectionWrapper from "../selection-wrapper";
 
 const present = () =>
@@ -44,9 +44,9 @@ const present = () =>
     paragraph: "Please sync again to open this note for editing"
   });
 
-export const openNote = async (item, isTrash, setSelectedItem) => {
+export const openNote = async (item, isTrash, setSelectedItem, isSheet) => {
   let _note = item;
-
+  if (isSheet) hideSheet();
   if (!isTrash) {
     _note = db.notes.note(item.id).data;
     if (!db.notes.note(item.id)?.synced()) {
@@ -84,39 +84,11 @@ export const openNote = async (item, isTrash, setSelectedItem) => {
     return;
   }
   if (isTrash) {
-    presentDialog({
-      title: `Restore ${item.itemType}`,
-      paragraph: `Restore or delete ${item.itemType} forever`,
-      positiveText: "Restore",
-      negativeText: "Delete",
-      positivePress: async () => {
-        await db.trash.restore(item.id);
-        Navigation.queueRoutesForUpdate(
-          "Tags",
-          "Notes",
-          "Notebooks",
-          "Favorites",
-          "Trash",
-          "TaggedNotes",
-          "ColoredNotes",
-          "TopicNotes"
-        );
-        useSelectionStore.getState().setSelectionMode(false);
-        ToastEvent.show({
-          heading: "Restore successful",
-          type: "success"
-        });
-      },
-      onClose: async () => {
-        await db.trash.delete(item.id);
-        useTrashStore.getState().setTrash();
-        useSelectionStore.getState().setSelectionMode(false);
-        ToastEvent.show({
-          heading: "Permanantly deleted items",
-          type: "success",
-          context: "local"
-        });
-      }
+    const content = await db.content.get(item.contentId);
+    presentSheet({
+      component: (
+        <NotePreview note={item} content={{ type: "tiptap", data: content }} />
+      )
     });
   } else {
     useEditorStore.getState().setReadonly(_note?.readonly);
@@ -128,7 +100,7 @@ export const openNote = async (item, isTrash, setSelectedItem) => {
 };
 
 export const NoteWrapper = React.memo(
-  function NoteWrapper({ item, index, tags, dateBy }) {
+  function NoteWrapper({ item, index, tags, dateBy, isSheet }) {
     const isTrash = item.type === "trash";
     const setSelectedItem = useSelectionStore((state) => state.setSelectedItem);
 
@@ -137,7 +109,8 @@ export const NoteWrapper = React.memo(
         index={index}
         height={100}
         testID={notesnook.ids.note.get(index)}
-        onPress={() => openNote(item, isTrash, setSelectedItem)}
+        onPress={() => openNote(item, isTrash, setSelectedItem, isSheet)}
+        isSheet={isSheet}
         item={item}
       >
         <NoteItem item={item} dateBy={dateBy} tags={tags} isTrash={isTrash} />

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -24,7 +24,7 @@ import { notesnook } from "../../../../e2e/test.ids";
 import { TopicNotes } from "../../../screens/notes/topic-notes";
 import { useSettingStore } from "../../../stores/use-setting-store";
 import { useThemeStore } from "../../../stores/use-theme-store";
-import { getTotalNotes, history } from "../../../utils";
+import { history } from "../../../utils";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { Button } from "../../ui/button";
@@ -41,14 +41,19 @@ const navigateToTopic = (topic) => {
   TopicNotes.navigate(topic, true);
 };
 
-export const NotebookItem = ({ item, isTopic = false, isTrash, dateBy }) => {
+export const NotebookItem = ({
+  item,
+  isTopic = false,
+  isTrash,
+  dateBy,
+  totalNotes
+}) => {
   const colors = useThemeStore((state) => state.colors);
   const notebooksListMode = useSettingStore(
     (state) => state.settings.notebooksListMode
   );
   const compactMode = notebooksListMode === "compact";
   const topics = item.topics?.slice(0, 3) || [];
-  const totalNotes = getTotalNotes(item);
 
   return (
     <>
@@ -126,16 +131,6 @@ export const NotebookItem = ({ item, isTopic = false, isTrash, dateBy }) => {
             height: SIZE.md + 2
           }}
         >
-          <Paragraph
-            color={colors.accent}
-            size={SIZE.xs}
-            style={{
-              marginRight: 6
-            }}
-          >
-            {isTopic ? "Topic" : "Notebook"}
-          </Paragraph>
-
           {isTrash ? (
             <>
               <Paragraph

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -101,7 +101,7 @@ export const openNotebookTopic = (item) => {
 };
 
 export const NotebookWrapper = React.memo(
-  function NotebookWrapper({ item, index, dateBy }) {
+  function NotebookWrapper({ item, index, dateBy, totalNotes }) {
     const isTrash = item.type === "trash";
 
     return (
@@ -118,11 +118,13 @@ export const NotebookWrapper = React.memo(
           dateBy={dateBy}
           index={index}
           isTrash={isTrash}
+          totalNotes={totalNotes}
         />
       </SelectionWrapper>
     );
   },
   (prev, next) => {
+    if (prev.totalNotes !== next.totalNotes) return false;
     if (prev.item.title !== next.item.title) return false;
     if (prev.dateBy !== next.dateBy) {
       return false;

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

@@ -0,0 +1,187 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import React from "react";
+import { View } from "react-native";
+import { notesnook } from "../../../../e2e/test.ids";
+import type { Reminder } from "../../../services/notifications";
+import { useThemeStore } from "../../../stores/use-theme-store";
+import { SIZE } from "../../../utils/size";
+import { Properties } from "../../properties";
+import { IconButton } from "../../ui/icon-button";
+import Heading from "../../ui/typography/heading";
+import Paragraph from "../../ui/typography/paragraph";
+import SelectionWrapper from "../selection-wrapper";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import ReminderSheet from "../../sheets/reminder";
+import { ReminderTime } from "../../ui/reminder-time";
+
+const ReminderItem = React.memo(
+  ({
+    item,
+    index,
+    isSheet
+  }: {
+    item: Reminder;
+    index: number;
+    isSheet: boolean;
+  }) => {
+    const colors = useThemeStore((state) => state.colors);
+    const openReminder = () => {
+      ReminderSheet.present(item, undefined, isSheet);
+    };
+    return (
+      <SelectionWrapper
+        //@ts-ignore
+        index={index}
+        height={100}
+        onPress={openReminder}
+        item={item}
+        isSheet={isSheet}
+      >
+        <View
+          style={{
+            flexShrink: 1,
+            opacity: item.disabled ? 0.5 : 1
+          }}
+        >
+          <Heading
+            numberOfLines={1}
+            style={{
+              flexWrap: "wrap"
+            }}
+            size={SIZE.md}
+          >
+            {item.title}
+          </Heading>
+
+          {item.description ? (
+            <Paragraph
+              style={{
+                flexWrap: "wrap"
+              }}
+              numberOfLines={2}
+            >
+              {item.description}
+            </Paragraph>
+          ) : null}
+
+          <View
+            style={{
+              flexDirection: "row",
+              flexWrap: "wrap"
+            }}
+          >
+            {item.disabled ? (
+              <View
+                style={{
+                  backgroundColor: colors.nav,
+                  borderRadius: 5,
+                  flexDirection: "row",
+                  paddingHorizontal: 6,
+                  alignItems: "center",
+                  marginTop: 5,
+                  justifyContent: "flex-start",
+                  alignSelf: "flex-start",
+                  marginRight: 10,
+                  height: 30
+                }}
+              >
+                <Icon
+                  name="bell-off-outline"
+                  size={SIZE.md}
+                  color={colors.errorText}
+                />
+                <Paragraph
+                  size={SIZE.xs + 1}
+                  color={colors.icon}
+                  style={{ marginLeft: 5 }}
+                >
+                  Disabled
+                </Paragraph>
+              </View>
+            ) : null}
+            {item.mode === "repeat" && item.recurringMode ? (
+              <View
+                style={{
+                  backgroundColor: colors.nav,
+                  borderRadius: 5,
+                  flexDirection: "row",
+                  paddingHorizontal: 6,
+                  alignItems: "center",
+                  marginTop: 5,
+                  justifyContent: "flex-start",
+                  alignSelf: "flex-start",
+                  marginRight: 10,
+                  height: 30
+                }}
+              >
+                <Icon name="reload" size={SIZE.md} color={colors.accent} />
+                <Paragraph
+                  size={SIZE.xs + 1}
+                  color={colors.icon}
+                  style={{ marginLeft: 5 }}
+                >
+                  {item.recurringMode.slice(0, 1).toUpperCase() +
+                    item.recurringMode.replace("y", "i").slice(1) +
+                    "ly"}
+                </Paragraph>
+              </View>
+            ) : null}
+
+            <ReminderTime
+              reminder={item}
+              checkIsActive={false}
+              fontSize={SIZE.xs + 1}
+              style={{
+                justifyContent: "flex-start",
+                borderWidth: 0,
+                height: 30,
+                alignSelf: "flex-start",
+                marginTop: 5
+              }}
+            />
+          </View>
+        </View>
+        <IconButton
+          testID={notesnook.listitem.menu}
+          color={colors.pri}
+          name="dots-horizontal"
+          size={SIZE.xl}
+          onPress={() => Properties.present(item, [], isSheet)}
+          customStyle={{
+            justifyContent: "center",
+            height: 35,
+            width: 35,
+            borderRadius: 100,
+            alignItems: "center"
+          }}
+        />
+      </SelectionWrapper>
+    );
+  },
+  (prev, next) => {
+    if (prev.item?.dateModified !== next.item?.dateModified) {
+      return false;
+    }
+    return true;
+  }
+);
+ReminderItem.displayName = "ReminderItem";
+
+export default ReminderItem;

apps/mobile/app/components/list-items/selection-wrapper/action-strip.js

@@ -1,323 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2022 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import Clipboard from "@react-native-clipboard/clipboard";
-import React, { useEffect, useState } from "react";
-import { View } from "react-native";
-import Animated, { SlideInUp, SlideOutDown } from "react-native-reanimated";
-import { db } from "../../../common/database";
-import { openVault, ToastEvent } from "../../../services/event-manager";
-import Navigation from "../../../services/navigation";
-import { useMenuStore } from "../../../stores/use-menu-store";
-import { useNotebookStore } from "../../../stores/use-notebook-store";
-import { useSelectionStore } from "../../../stores/use-selection-store";
-import { useThemeStore } from "../../../stores/use-theme-store";
-import { useTrashStore } from "../../../stores/use-trash-store";
-import { dWidth, getElevation, toTXT } from "../../../utils";
-import { deleteItems } from "../../../utils/functions";
-import { presentDialog } from "../../dialog/functions";
-import { Button } from "../../ui/button";
-import { IconButton } from "../../ui/icon-button";
-
-export const ActionStrip = ({ note, setActionStrip }) => {
-  const colors = useThemeStore((state) => state.colors);
-  const selectionMode = useSelectionStore((state) => state.selectionMode);
-  const setNotebooks = useNotebookStore((state) => state.setNotebooks);
-  const setMenuPins = useMenuStore((state) => state.setMenuPins);
-  const setSelectedItem = useSelectionStore((state) => state.setSelectedItem);
-  const setSelectionMode = useSelectionStore((state) => state.setSelectionMode);
-
-  const [isPinnedToMenu, setIsPinnedToMenu] = useState(false);
-  const [width, setWidth] = useState(dWidth - 16);
-  useEffect(() => {
-    if (note.type === "note") return;
-    setIsPinnedToMenu(db.shortcuts.exists(note.id));
-  }, [note.id, note.type]);
-
-  const updateNotes = () => {
-    Navigation.queueRoutesForUpdate(
-      "Notes",
-      "Favorites",
-      "ColoredNotes",
-      "TaggedNotes",
-      "TopicNotes"
-    );
-  };
-
-  const actions = [
-    {
-      title: "Pin " + note.type,
-      icon: note.pinned ? "pin-off" : "pin",
-      visible: note.type === "note" || note.type === "notebook",
-      onPress: async () => {
-        if (!note.id) return;
-
-        if (note.type === "note") {
-          if (db.notes.pinned.length === 3 && !note.pinned) {
-            ToastEvent.show({
-              heading: "Cannot pin more than 3 notes",
-              type: "error"
-            });
-            return;
-          }
-          await db.notes.note(note.id).pin();
-        } else {
-          if (db.notebooks.pinned.length === 3 && !note.pinned) {
-            ToastEvent.show({
-              heading: "Cannot pin more than 3 notebooks",
-              type: "error"
-            });
-            return;
-          }
-          await db.notebooks.notebook(note.id).pin();
-          setNotebooks();
-        }
-        updateNotes();
-        setActionStrip(false);
-      }
-    },
-    {
-      title: "Add to favorites",
-      icon: note.favorite ? "star-off" : "star",
-      onPress: async () => {
-        if (!note.id) return;
-        if (note.type === "note") {
-          await db.notes.note(note.id).favorite();
-        } else {
-          await db.notebooks.notebook(note.id).favorite();
-        }
-        updateNotes();
-        setActionStrip(false);
-      },
-      visible: note.type === "note",
-      color: !note.favorite ? "orange" : null
-    },
-
-    {
-      title: isPinnedToMenu
-        ? "Remove Shortcut from Menu"
-        : "Add Shortcut to Menu",
-      icon: isPinnedToMenu ? "link-variant-remove" : "link-variant",
-      onPress: async () => {
-        try {
-          if (isPinnedToMenu) {
-            await db.shortcuts.remove(note.id);
-            ToastEvent.show({
-              heading: "Shortcut removed from menu",
-              type: "success"
-            });
-          } else {
-            if (note.type === "topic") {
-              await db.shortcuts.add({
-                item: {
-                  type: "topic",
-                  id: note.id,
-                  notebookId: note.notebookId
-                }
-              });
-            } else {
-              await db.shortcuts.add({
-                item: {
-                  type: "notebook",
-                  id: note.id
-                }
-              });
-            }
-            ToastEvent.show({
-              heading: "Shortcut added to menu",
-              type: "success"
-            });
-          }
-          setIsPinnedToMenu(db.shortcuts.exists(note.id));
-          setMenuPins();
-
-          setActionStrip(false);
-        } catch (e) {
-          console.error(e);
-        }
-      },
-      visible: note.type !== "note"
-    },
-    {
-      title: "Copy Note",
-      icon: "content-copy",
-      visible: note.type === "note",
-      onPress: async () => {
-        if (note.locked) {
-          openVault({
-            copyNote: true,
-            novault: true,
-            locked: true,
-            item: note,
-            title: "Copy note",
-            description: "Unlock note to copy to clipboard."
-          });
-        } else {
-          let text = await toTXT(note);
-          text = `${note.title}\n \n ${text}`;
-          Clipboard.setString(text);
-          ToastEvent.show({
-            heading: "Note copied to clipboard",
-            type: "success"
-          });
-        }
-        setActionStrip(false);
-      }
-    },
-    {
-      title: "Restore " + note.itemType,
-      icon: "delete-restore",
-      onPress: async () => {
-        await db.trash.restore(note.id);
-        Navigation.queueRoutesForUpdate(
-          "Notes",
-          "Favorites",
-          "ColoredNotes",
-          "TaggedNotes",
-          "TopicNotes",
-          "Trash",
-          "Notebooks"
-        );
-
-        ToastEvent.show({
-          heading:
-            note.type === "note"
-              ? "Note restored from trash"
-              : "Notebook restored from trash",
-          type: "success"
-        });
-
-        setActionStrip(false);
-      },
-      visible: note.type === "trash"
-    },
-    {
-      title: "Delete" + note.itemType,
-      icon: "delete",
-      visible: note.type === "trash",
-      onPress: () => {
-        presentDialog({
-          title: "Permanent delete",
-          paragraph: `Are you sure you want to delete this ${note.itemType} permanantly from trash?`,
-          positiveText: "Delete",
-          negativeText: "Cancel",
-          positivePress: async () => {
-            await db.trash.delete(note.id);
-            useTrashStore.getState().setTrash();
-            useSelectionStore.getState().setSelectionMode(false);
-            ToastEvent.show({
-              heading: "Permanantly deleted items",
-              type: "success",
-              context: "local"
-            });
-          },
-          positiveType: "errorShade"
-        });
-        setActionStrip(false);
-      }
-    },
-    {
-      title: "Delete" + note.type,
-      icon: "delete",
-      visible: note.type !== "trash",
-      onPress: async () => {
-        try {
-          await deleteItems(note);
-        } catch (e) {
-          console.error(e);
-        }
-        setActionStrip(false);
-      }
-    },
-    {
-      title: "Close",
-      icon: "close",
-      onPress: () => setActionStrip(false),
-      color: colors.light,
-      bg: colors.red,
-      visible: true
-    }
-  ];
-
-  return (
-    <Animated.View
-      onLayout={(event) => {
-        setWidth(event.nativeEvent.layout.width);
-      }}
-      entering={SlideInUp.springify().mass(0.4)}
-      exiting={SlideOutDown}
-      style={{
-        position: "absolute",
-        zIndex: 999,
-        width: "102%",
-        height: "100%",
-        flexDirection: "row",
-        justifyContent: "flex-end",
-        alignItems: "center"
-      }}
-    >
-      <Button
-        type="accent"
-        title="Select"
-        icon="check"
-        tooltipText="Select Item"
-        onPress={() => {
-          if (!selectionMode) {
-            setSelectionMode(true);
-          }
-          setSelectedItem(note);
-          setActionStrip(false);
-        }}
-        style={{
-          borderRadius: 100,
-          paddingHorizontal: 12,
-          ...getElevation(5)
-        }}
-        height={30}
-      />
-      {actions.map((item) =>
-        item.visible ? (
-          <View
-            key={item.icon}
-            style={{
-              width: width / 1.4 / actions.length,
-              height: width / 1.4 / actions.length,
-              backgroundColor: item.bg || colors.nav,
-              borderRadius: 100,
-              justifyContent: "center",
-              alignItems: "center",
-              ...getElevation(5),
-              marginLeft: 15
-            }}
-          >
-            <IconButton
-              color={item.color || colors.heading}
-              onPress={item.onPress}
-              tooltipText={item.title}
-              top={60}
-              bottom={60}
-              name={item.icon}
-              size={width / 2.8 / actions.length}
-            />
-          </View>
-        ) : null
-      )}
-    </Animated.View>
-  );
-};

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -17,16 +17,11 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useEffect, useState } from "react";
-import {
-  eSubscribeEvent,
-  eUnSubscribeEvent
-} from "../../../services/event-manager";
+import React, { useRef } from "react";
+import { useSelectionStore } from "../../../stores/use-selection-store";
 import { useSettingStore } from "../../../stores/use-setting-store";
 import { useThemeStore } from "../../../stores/use-theme-store";
-import { history } from "../../../utils";
 import { PressableButton } from "../../ui/pressable";
-import { ActionStrip } from "./action-strip";
 import { Filler } from "./back-fill";
 import { SelectionIcon } from "./selection";
 
@@ -36,10 +31,11 @@ const SelectionWrapper = ({
   background,
   onLongPress,
   onPress,
-  testID
+  testID,
+  isSheet
 }) => {
+  const itemId = useRef(item.id);
   const colors = useThemeStore((state) => state.colors);
-  const [actionStrip, setActionStrip] = useState(false);
   const notebooksListMode = useSettingStore(
     (state) => state.settings.notebooksListMode
   );
@@ -51,34 +47,23 @@ const SelectionWrapper = ({
     (item.type === "notebook" || item.type === "note") &&
     listMode === "compact";
 
+  if (item.id !== itemId.current) {
+    itemId.current = item.id;
+  }
+
   const _onLongPress = () => {
-    if (history.selectedItemsList.length > 0) return;
-    setActionStrip(!actionStrip);
+    if (!useSelectionStore.getState().selectionMode) {
+      useSelectionStore.getState().setSelectionMode(true);
+    }
+    useSelectionStore.getState().setSelectedItem(item);
   };
 
   const _onPress = async () => {
-    if (actionStrip) {
-      setActionStrip(false);
-      return;
-    }
     await onPress();
   };
-
-  const closeStrip = () => {
-    setActionStrip(false);
-  };
-
-  useEffect(() => {
-    eSubscribeEvent("navigate", closeStrip);
-
-    return () => {
-      eUnSubscribeEvent("navigate", closeStrip);
-    };
-  }, []);
-
   return (
     <PressableButton
-      customColor="transparent"
+      customColor={isSheet ? colors.transGray : "transparent"}
       testID={testID}
       onLongPress={_onLongPress}
       onPress={_onPress}
@@ -90,10 +75,11 @@ const SelectionWrapper = ({
         justifyContent: "space-between",
         alignItems: "center",
         width: "100%",
-        borderRadius: 0,
         overflow: "hidden",
         paddingHorizontal: 12,
-        paddingVertical: compactMode ? 8 : 12
+        paddingVertical: compactMode ? 8 : 12,
+        borderRadius: isSheet ? 10 : 0,
+        marginBottom: isSheet ? 12 : undefined
       }}
     >
       {item.type === "note" ? (
@@ -101,15 +87,10 @@ const SelectionWrapper = ({
       ) : null}
       <SelectionIcon
         compactMode={compactMode}
-        setActionStrip={setActionStrip}
         item={item}
         onLongPress={onLongPress}
       />
       {children}
-
-      {actionStrip ? (
-        <ActionStrip note={item} setActionStrip={setActionStrip} />
-      ) : null}
     </PressableButton>
   );
 };

apps/mobile/app/components/list-items/selection-wrapper/selection.js

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+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
@@ -18,25 +18,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useEffect, useState } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useSelectionStore } from "../../../stores/use-selection-store";
 import { useThemeStore } from "../../../stores/use-theme-store";
 import { SIZE } from "../../../utils/size";
 
-export const SelectionIcon = ({ setActionStrip, item, compactMode }) => {
+export const SelectionIcon = ({ item }) => {
   const colors = useThemeStore((state) => state.colors);
 
   const selectionMode = useSelectionStore((state) => state.selectionMode);
   const selectedItemsList = useSelectionStore(
     (state) => state.selectedItemsList
   );
-  const setSelectedItem = useSelectionStore((state) => state.setSelectedItem);
   const [selected, setSelected] = useState(false);
 
   useEffect(() => {
     if (selectionMode) {
-      setActionStrip(false);
       let exists = selectedItemsList.filter(
         (o) => o.dateCreated === item.dateCreated
       );
@@ -51,52 +49,29 @@ export const SelectionIcon = ({ setActionStrip, item, compactMode }) => {
         }
       }
     }
-  }, [
-    selectedItemsList,
-    item.id,
-    selectionMode,
-    setActionStrip,
-    item.dateCreated,
-    selected
-  ]);
-
-  const onPress = () => {
-    setSelectedItem(item);
-  };
+  }, [selectedItemsList, item.id, selectionMode, item.dateCreated, selected]);
 
   return selectionMode ? (
     <View
       style={{
-        display: "flex",
-        opacity: 1,
-        width: "10%",
-        height: compactMode ? 40 : 70,
+        width: 40,
+        height: 40,
         justifyContent: "center",
         alignItems: "center",
-        backgroundColor: colors.bg,
-        borderRadius: 5,
         marginRight: 10,
         borderWidth: 1,
-        borderColor: selected ? colors.accent : colors.border
+        borderRadius: 100,
+        borderColor: colors.border
       }}
+      pointerEvents="none"
     >
-      <TouchableOpacity
-        activeOpacity={1}
-        onPress={onPress}
-        style={{
-          justifyContent: "center",
-          alignItems: "center",
-          height: 70
-        }}
-      >
-        {selected && (
-          <Icon
-            size={SIZE.xl}
-            color={selected ? colors.accent : colors.icon}
-            name="check"
-          />
-        )}
-      </TouchableOpacity>
+      {selected ? (
+        <Icon
+          size={SIZE.xl}
+          color={selected ? colors.accent : colors.icon}
+          name={"check"}
+        />
+      ) : null}
     </View>
   ) : null;
 };