mobile: add theme switch animation

Signed-off-by: Abdullah Atta <abdullahatta@streetwriters.co>

.eslintignore

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

.eslintrc.js

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

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

@@ -7,7 +7,7 @@ runs:
     - name: Setup Node
       uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 20.x
         cache: "npm"
         cache-dependency-path: |
           package-lock.json
@@ -19,7 +19,6 @@ runs:
           packages/crypto/package-lock.json
           packages/sodium/package-lock.json
           packages/clipper/package-lock.json
-          packages/crypto-worker/package-lock.json
           packages/editor-mobile/package-lock.json
           packages/editor/package-lock.json
           packages/logger/package-lock.json

.github/workflows/android.publish.yml

@@ -1,4 +1,4 @@
-name: Publish @notesnook/mobile
+name: Publish @notesnook/android
 
 on: workflow_dispatch
 
@@ -33,13 +33,15 @@ jobs:
 
       - name: Sign app bundle for Playstore release
         id: sign_app
-        uses: r0adkll/sign-android-release@v1
+        uses: r0adkll/sign-android-release@master
         with:
           releaseDirectory: apps/mobile/native/android/app/build/outputs/bundle/release
           signingKeyBase64: ${{ secrets.SIGNING_KEY }}
           alias: ${{ secrets.ALIAS }}
           keyStorePassword: ${{ secrets.KEY_PASSWORD }}
           keyPassword: ${{ secrets.KEY_PASSWORD }}
+        env:
+          BUILD_TOOLS_VERSION: "33.0.0"
 
       - name: Publish to Playstore
         id: deploy
@@ -64,6 +66,8 @@ jobs:
           alias: ${{ secrets.PUBLIC_ALIAS }}
           keyStorePassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
           keyPassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
+        env:
+          BUILD_TOOLS_VERSION: "33.0.0"
 
       - name: Rename apk files
         run: |

.github/workflows/desktop.publish.yml

@@ -18,6 +18,21 @@ on:
         required: true
         default: true
         description: "Publish on GitHub releases?"
+      build-windows:
+        type: boolean
+        required: true
+        default: true
+        description: "Build for Windows?"
+      build-linux:
+        type: boolean
+        required: true
+        default: true
+        description: "Build for Linux?"
+      build-mac:
+        type: boolean
+        required: true
+        default: true
+        description: "Build for macOS?"
 
 jobs:
   build:
@@ -71,6 +86,7 @@ jobs:
   build-macos:
     name: Build for macOS
     needs: build
+    if: inputs.build-mac
     runs-on: macos-12
 
     steps:
@@ -97,6 +113,7 @@ jobs:
       - name: Get App Store Version
         id: appstore
         uses: streetwriters/appstore-connect-app-version@develop
+        if: inputs.publish-apple
         with:
           app-id: ${{ steps.app_metadata.outputs.apple_app_id }}
           key-id: ${{ secrets.api_key_id }}
@@ -162,6 +179,7 @@ jobs:
   build-linux:
     name: Build for Linux
     needs: build
+    if: inputs.build-linux
     runs-on: ubuntu-22.04
 
     steps:
@@ -220,12 +238,22 @@ jobs:
   build-windows:
     name: Build for Windows
     needs: build
+    if: inputs.build-windows
     runs-on: windows-latest
 
     steps:
       - name: Check out Git repository
         uses: actions/checkout@v3
 
+      - name: Setup .NET Core SDK
+        uses: actions/setup-dotnet@v2
+        with:
+          dotnet-version: 6.0.x
+
+      - name: Install AzureCodeSigning
+        run: Install-Module -Name AzureCodeSigning -RequiredVersion 0.3.0 -Force -Repository PSGallery
+        shell: pwsh
+
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
 
@@ -246,6 +274,9 @@ jobs:
       - name: Publish
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
+          AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
+          AZURE_CLIENT_SECRET: ${{ secrets.AZURE_CLIENT_SECRET }}
         run: |
           if ($${{ inputs.publish-github }} -eq $true) {
             yarn electron-builder --win --publish always

.github/workflows/ios.publish.yml

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

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

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

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

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

CONTRIBUTING.md

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

README.md

@@ -46,7 +46,6 @@ Notesnook is built using the following technologies:
 | `@notesnook/editor-mobile` | [/packages/editor-mobile](/packages/editor-mobile) | A very thin wrapper around `@notesnook/editor` for mobile clients    |
 | `@notesnook/logger`        | [/packages/logger](/packages/logger)               | Simple & pluggable logger                                            |
 | `@notesnook/sodium`        | [/packages/sodium](/packages/sodium)               | Wrapper around libsodium to support Node.js & Browser                |
-| `@notesnook/crypto-worker` | [/packages/crypto-worker](/packages/crypto-worker) | Helpers to use `@notesnook/crypto` from a Worker                     |
 | `@notesnook/streamable-fs` | [/packages/streamable-fs](/packages/streamable-fs) | Streaming interface around an IndexedDB based file system            |
 | `@notesnook/theme`         | [/packages/theme](/packages/theme)                 | The core theme used in web & desktop clients                         |
 

apps/desktop/app-update.yml

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

apps/desktop/global.d.ts

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

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "2.6.0",
+  "version": "2.6.15",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/index.js",
@@ -12,25 +12,25 @@
   "license": "GPL-3.0-or-later",
   "dependencies": {
     "@notesnook/crypto": "file:../../packages/crypto",
-    "@trpc/client": "10.31.0",
-    "@trpc/server": "10.31.0",
+    "@trpc/client": "10.38.3",
+    "@trpc/server": "10.38.3",
     "electron-trpc": "0.5.2",
-    "electron-updater": "6.1.1",
+    "electron-updater": "6.1.4",
     "icojs": "^0.17.1",
     "typed-emitter": "^2.1.0",
     "yargs": "^17.6.2",
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@types/node": "^18.15.0",
+    "@types/node": "18.16.1",
     "@types/yargs": "^17.0.24",
     "chokidar": "^3.5.3",
-    "electron": "24.5.1",
-    "electron-builder": "24.4.0",
+    "electron": "25.9.8",
+    "electron-builder": "^24.9.1",
     "electron-builder-notarize": "^1.5.1",
     "esbuild": "^0.17.19",
-    "node-fetch": "^3.3.1",
-    "tree-kill": "^1.2.2"
+    "tree-kill": "^1.2.2",
+    "undici": "^5.23.0"
   },
   "optionalDependencies": {
     "dmg-license": "^1.0.11"
@@ -135,6 +135,10 @@
           ]
         }
       ],
+      "signingHashAlgorithms": [
+        "sha256"
+      ],
+      "sign": "./sign.js",
       "icon": "assets/icons/app.ico"
     },
     "portable": {
@@ -191,6 +195,7 @@
       "allowNativeWayland": true
     },
     "extraResources": [
+      "app-update.yml",
       "./assets/**"
     ],
     "extraMetadata": {

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

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

apps/desktop/sign.js

@@ -0,0 +1,60 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+const { writeFileSync, rmSync, readFileSync } = require("fs");
+const { execSync } = require("child_process");
+const { relative, join } = require("path");
+
+module.exports = async function (configuration) {
+  const Endpoint = "https://weu.codesigning.azure.net";
+  const CodeSigningAccountName = "Notesnook";
+  const CertificateProfileName = "Notesnook";
+  const FileDigest = configuration.hash.toUpperCase();
+  const TimestampRfc3161 = "http://timestamp.acs.microsoft.com";
+  const TimestampDigest = configuration.hash.toUpperCase();
+  const Description = "The Notesnook app";
+  const DescriptionUrl = "https://notesnook.com/";
+  const FilesCatalog = createCatalog(configuration.path);
+
+  const command = `Invoke-AzureCodeSigning -Endpoint "${Endpoint}" -CodeSigningAccountName "${CodeSigningAccountName}" -CertificateProfileName "${CertificateProfileName}" -FileDigest "${FileDigest}" -TimestampRfc3161 "${TimestampRfc3161}" -TimestampDigest "${TimestampDigest}" -Description "${Description}" -DescriptionUrl "${DescriptionUrl}" -FilesCatalog "${FilesCatalog}"`;
+
+  console.debug("Signing", configuration.path, "using command", command);
+
+  psexec(command);
+
+  console.debug("Signed", configuration.path);
+
+  deleteCatalog();
+};
+
+function createCatalog(path) {
+  writeFileSync("_catalog", relative(__dirname, path));
+  return join(__dirname, "_catalog");
+}
+
+function deleteCatalog() {
+  rmSync("_catalog");
+}
+
+function psexec(cmd) {
+  return execSync(cmd, {
+    env: process.env,
+    stdio: "inherit",
+    shell: "pwsh"
+  });
+}

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

@@ -29,6 +29,8 @@ import { dirname } from "path";
 import { resolvePath } from "../utils/resolve-path";
 import { observable } from "@trpc/server/observable";
 import { AssetManager } from "../utils/asset-manager";
+import { isFlatpak } from "../utils";
+import { setupDesktopIntegration } from "../utils/desktop-integration";
 
 const t = initTRPC.create();
 
@@ -44,6 +46,8 @@ const NotificationOptions = z.object({
 });
 
 export const osIntegrationRouter = t.router({
+  isFlatpak: t.procedure.query(() => isFlatpak()),
+
   zoomFactor: t.procedure.query(() => config.zoomFactor),
   setZoomFactor: t.procedure.input(z.number()).mutation(({ input: factor }) => {
     globalThis.window?.webContents.setZoomFactor(factor);
@@ -79,6 +83,7 @@ export const osIntegrationRouter = t.router({
         AutoLaunch.disable();
       }
       config.desktopSettings = settings;
+      setupDesktopIntegration(settings);
     }),
 
   selectDirectory: t.procedure
@@ -117,6 +122,14 @@ export const osIntegrationRouter = t.router({
       writeFileSync(resolvedPath, data);
     }),
 
+  resolvePath: t.procedure
+    .input(z.object({ filePath: z.string() }))
+    .query(({ input }) => {
+      const { filePath } = input;
+      if (!filePath) return;
+      return resolvePath(filePath);
+    }),
+
   showNotification: t.procedure
     .input(NotificationOptions)
     .query(({ input }) => {

apps/desktop/src/cli.ts

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

apps/desktop/src/main.ts

@@ -24,7 +24,6 @@ import { configureAutoUpdater } from "./utils/autoupdater";
 import { getBackgroundColor, getTheme, setTheme } from "./utils/theme";
 import { setupMenu } from "./utils/menu";
 import { WindowState } from "./utils/window-state";
-import { AutoLaunch } from "./utils/autolaunch";
 import { setupJumplist } from "./utils/jumplist";
 import { setupTray } from "./utils/tray";
 import { CLIOptions, parseArguments } from "./cli";
@@ -34,6 +33,8 @@ import { router, api } from "./api";
 import { config } from "./utils/config";
 import path from "path";
 import { bringToFront } from "./utils/bring-to-front";
+import { bridge } from "./api/bridge";
+import { setupDesktopIntegration } from "./utils/desktop-integration";
 
 // only run a single instance
 if (!MAC_APP_STORE && !app.requestSingleInstanceLock()) {
@@ -53,10 +54,17 @@ if (process.platform === "win32") {
   app.setAppUserModelId(app.name);
 }
 
+process.on("uncaughtException", (error) => {
+  console.error("uncaughtException:", error);
+});
+process.on("unhandledRejection", (reason) => {
+  console.error("unhandledRejection:", reason);
+});
+
 app.commandLine.appendSwitch("lang", "en-US");
 
 async function createWindow() {
-  const cliOptions = await parseArguments();
+  const cliOptions = await parseArguments(process.argv);
   setTheme(getTheme());
 
   const mainWindowState = new WindowState({});
@@ -69,7 +77,7 @@ async function createWindow() {
     darkTheme: getTheme() === "dark",
     backgroundColor: getBackgroundColor(),
     opacity: 0,
-    autoHideMenuBar: true,
+    autoHideMenuBar: false,
     icon: AssetManager.appIcon({
       size: 512,
       format: process.platform === "win32" ? "ico" : "png"
@@ -83,7 +91,9 @@ async function createWindow() {
     }
   });
 
+  createIPCHandler({ router, windows: [mainWindow] });
   globalThis.window = mainWindow;
+  mainWindow.setMenuBarVisibility(false);
   mainWindowState.manage(mainWindow);
 
   if (cliOptions.hidden && !config.desktopSettings.minimizeToSystemTray)
@@ -97,8 +107,7 @@ async function createWindow() {
   }
 
   await AssetManager.loadIcons();
-  setupDesktopIntegration();
-  createIPCHandler({ router, windows: [mainWindow] });
+  setupDesktopIntegration(config.desktopSettings);
 
   mainWindow.webContents.session.setSpellCheckerDictionaryDownloadURL(
     "http://dictionaries.notesnook.com/"
@@ -139,8 +148,12 @@ app.once("window-all-closed", () => {
   }
 });
 
-app.on("second-instance", () => {
+app.on("second-instance", async (_ev, argv) => {
   if (!globalThis.window) return;
+  const cliOptions = await parseArguments(argv);
+  if (cliOptions.note) bridge.onCreateItem("note");
+  if (cliOptions.notebook) bridge.onCreateItem("notebook");
+  if (cliOptions.reminder) bridge.onCreateItem("reminder");
   bringToFront();
 });
 
@@ -164,49 +177,3 @@ function createURL(options: CLIOptions, path = "/") {
 
   return url;
 }
-
-function setupDesktopIntegration() {
-  const desktopIntegration = config.desktopSettings;
-
-  if (
-    desktopIntegration.closeToSystemTray ||
-    desktopIntegration.minimizeToSystemTray
-  ) {
-    setupTray();
-  }
-
-  // when close to system tray is enabled, it becomes nigh impossible
-  // to "quit" the app. This is necessary in order to fix that.
-  if (desktopIntegration.closeToSystemTray) {
-    app.on("before-quit", () => app.exit(0));
-  }
-
-  globalThis.window?.once("close", (e) => {
-    if (config.desktopSettings.closeToSystemTray) {
-      e.preventDefault();
-      if (process.platform == "darwin") {
-        // on macOS window cannot be minimized/hidden if it is already fullscreen
-        // so we just close it.
-        if (globalThis.window?.isFullScreen()) app.exit(0);
-        else app.hide();
-      } else {
-        globalThis.window?.minimize();
-        globalThis.window?.hide();
-      }
-    }
-  });
-
-  globalThis.window?.on("minimize", () => {
-    if (config.desktopSettings.minimizeToSystemTray) {
-      if (process.platform == "darwin") {
-        app.hide();
-      } else {
-        globalThis.window?.hide();
-      }
-    }
-  });
-
-  if (desktopIntegration.autoStart) {
-    AutoLaunch.enable(!!desktopIntegration.startMinimized);
-  }
-}

apps/desktop/src/preload.ts

@@ -31,7 +31,6 @@ declare global {
 }
 
 process.once("loaded", async () => {
-  console.log("HELLO!");
   const electronTRPC: RendererGlobalElectronTRPC = {
     sendMessage: (operation) =>
       ipcRenderer.send(ELECTRON_TRPC_CHANNEL, operation),

apps/desktop/src/utils/autolaunch.ts

@@ -35,6 +35,8 @@ const LINUX_AUTOSTART_DIRECTORY_PATH = path.join(
   "autostart"
 );
 
+const STARTUP_ARGS = ["--hidden"];
+
 export class AutoLaunch {
   static enable(hidden: boolean) {
     if (process.platform === "linux") {
@@ -47,10 +49,14 @@ export class AutoLaunch {
         LINUX_DESKTOP_ENTRY(hidden)
       );
     } else {
+      const loginItemSettings = app.getLoginItemSettings({
+        args: STARTUP_ARGS
+      });
+      if (loginItemSettings.openAtLogin) return;
       app.setLoginItemSettings({
         openAtLogin: true,
         openAsHidden: hidden,
-        args: ["--hidden"]
+        args: STARTUP_ARGS
       });
     }
   }

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

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

apps/desktop/src/utils/protocol.ts

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

apps/mobile/app/app.tsx

@@ -16,13 +16,14 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import SettingsService from "./services/settings";
+import "@azure/core-asynciterator-polyfill";
+import "react-native-gesture-handler";
 import {
   THEME_COMPATIBILITY_VERSION,
   useThemeEngineStore
 } from "@notesnook/theme";
 import React, { useEffect } from "react";
-import { View } from "react-native";
+import { I18nManager, View } from "react-native";
 import "react-native-gesture-handler";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -31,20 +32,26 @@ import { withErrorBoundry } from "./components/exception-handler";
 import GlobalSafeAreaProvider from "./components/globalsafearea";
 import { useAppEvents } from "./hooks/use-app-events";
 import { ApplicationHolder } from "./navigation";
+import { themeTrpcClient } from "./screens/settings/theme-selector";
 import Notifications from "./services/notifications";
+import SettingsService from "./services/settings";
 import { TipManager } from "./services/tip-manager";
 import { useThemeStore } from "./stores/use-theme-store";
 import { useUserStore } from "./stores/use-user-store";
-import { themeTrpcClient } from "./screens/settings/theme-selector";
 
-SettingsService.checkOrientation();
+I18nManager.allowRTL(false);
+I18nManager.forceRTL(false);
+I18nManager.swapLeftAndRightInRTL(false);
+
 const App = () => {
   const init = useAppEvents();
   useEffect(() => {
-    let { appLockMode } = SettingsService.get();
+    const { appLockMode } = SettingsService.get();
     if (appLockMode && appLockMode !== "none") {
       useUserStore.getState().lockApp(true);
     }
+    //@ts-ignore
+    globalThis["IS_MAIN_APP_RUNNING"] = true;
     init();
     setTimeout(async () => {
       SettingsService.onFirstLaunch();
@@ -92,7 +99,13 @@ const App = () => {
   );
 };
 
-export const withTheme = (Element) => {
+let currTheme =
+  useThemeStore.getState().colorScheme === "dark"
+    ? SettingsService.getProperty("darkTheme")
+    : SettingsService.getProperty("lighTheme");
+useThemeEngineStore.getState().setTheme(currTheme);
+
+export const withTheme = (Element: () => JSX.Element) => {
   return function AppWithThemeProvider() {
     const [colorScheme, darkTheme, lightTheme] = useThemeStore((state) => [
       state.colorScheme,
@@ -123,11 +136,13 @@ export const withTheme = (Element) => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    useEffect(() => {
+    const nextTheme = colorScheme === "dark" ? darkTheme : lightTheme;
+    if (JSON.stringify(nextTheme) !== JSON.stringify(currTheme)) {
       useThemeEngineStore
         .getState()
         .setTheme(colorScheme === "dark" ? darkTheme : lightTheme);
-    }, [colorScheme, darkTheme, lightTheme]);
+      currTheme = nextTheme;
+    }
 
     return <Element />;
   };

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

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

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

@@ -16,33 +16,31 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
+import "./logger";
 import { database } from "@notesnook/common";
-import { initalize, logger as dbLogger } from "@notesnook/core/logger";
+import { logger as dbLogger } from "@notesnook/core/dist/logger";
 import { Platform } from "react-native";
-import { MMKVLoader } from "react-native-mmkv-storage";
-import filesystem from "../filesystem";
+import * as Gzip from "react-native-gzip";
 import EventSource from "../../utils/sse/even-source-ios";
 import AndroidEventSource from "../../utils/sse/event-source";
-import Storage, { KV } from "./storage";
-import * as Gzip from "react-native-gzip";
-
-const LoggerStorage = new MMKVLoader()
-  .withInstanceID("notesnook_logs")
-  .initialize();
+import { SqliteAdapter, SqliteIntrospector, SqliteQueryCompiler } from "kysely";
+import filesystem from "../filesystem";
+import Storage from "./storage";
+import { RNSqliteDriver } from "./sqlite.kysely";
 
 database.host(
   __DEV__
     ? {
-        API_HOST: "https://api.notesnook.com",
-        AUTH_HOST: "https://auth.streetwriters.co",
-        SSE_HOST: "https://events.streetwriters.co",
-        SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
-        ISSUES_HOST: "https://issues.streetwriters.co"
-        // API_HOST: "http://192.168.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",
+        // AUTH_HOST: "https://auth.streetwriters.co",
+        // SSE_HOST: "https://events.streetwriters.co",
+        // SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
+        // ISSUES_HOST: "https://issues.streetwriters.co"
+        API_HOST: "http://192.168.43.5:5264",
+        AUTH_HOST: "http://192.168.43.5:8264",
+        SSE_HOST: "http://192.168.43.5:7264",
+        SUBSCRIPTIONS_HOST: "http://192.168.43.5:9264",
+        ISSUES_HOST: "http://192.168.43.5:2624"
       }
     : {
         API_HOST: "https://api.notesnook.com",
@@ -53,17 +51,27 @@ database.host(
       }
 );
 
-database.setup(
-  Storage,
-  Platform.OS === "ios" ? EventSource : AndroidEventSource,
-  filesystem,
-  {
+database.setup({
+  storage: Storage,
+  eventsource: Platform.OS === "ios" ? EventSource : AndroidEventSource,
+  fs: filesystem,
+  compressor: {
     compress: Gzip.deflate,
     decompress: Gzip.inflate
+  },
+  batchSize: 100,
+  sqliteOptions: {
+    dialect: (name) => ({
+      createDriver: () => {
+        return new RNSqliteDriver({ async: true, dbName: name });
+      },
+      createAdapter: () => new SqliteAdapter(),
+      createIntrospector: (db) => new SqliteIntrospector(db),
+      createQueryCompiler: () => new SqliteQueryCompiler()
+    }),
+    tempStore: "memory"
   }
-);
-
-initalize(new KV(LoggerStorage), true);
+});
 
 export const db = database;
 export const DatabaseLogger = dbLogger;

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

@@ -0,0 +1,29 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import { MMKVLoader } from "react-native-mmkv-storage";
+import { initialize } from "@notesnook/core/dist/logger";
+import { KV } from "./storage";
+
+const LoggerStorage = new MMKVLoader()
+  .withInstanceID("notesnook_logs")
+  .initialize();
+
+initialize(new KV(LoggerStorage));
+
+export { LoggerStorage };

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

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

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

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

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

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

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

@@ -22,18 +22,20 @@ import {
   getFileNameWithExtension,
   isImage,
   isDocument
-} from "@notesnook/core/utils/filename";
+} from "@notesnook/core/dist/utils/filename";
 import React from "react";
 import { Platform } from "react-native";
 import * as ScopedStorage from "react-native-scoped-storage";
 import { subscribe, zip } from "react-native-zip-archive";
 import RNFetchBlob from "react-native-blob-util";
 import { ShareComponent } from "../../components/sheets/export-notes/share";
-import { ToastEvent, presentSheet } from "../../services/event-manager";
+import { ToastManager, presentSheet } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { db } from "../database";
 import Storage from "../database/storage";
 import { cacheDir, copyFileAsync, releasePermissions } from "./utils";
+import { createCacheDir, exists } from "./io";
+import { IOS_APPGROUPID } from "../../utils/constants";
 
 export const FileDownloadStatus = {
   Success: 1,
@@ -44,15 +46,15 @@ export const FileDownloadStatus = {
  * Download all user's attachments
  * @returns
  */
-export function downloadAllAttachments() {
-  const attachments = db.attachments.all;
+export async function downloadAllAttachments() {
+  const attachments = await db.attachments.all.ids();
   return downloadAttachments(attachments);
 }
 
 /**
  * Downloads provided attachments to a .zip file
  * on user's device.
- * @param attachments
+ * @param {string[]} attachments
  * @param onProgress
  * @returns
  */
@@ -62,6 +64,7 @@ export async function downloadAttachments(
   canceled,
   groupId
 ) {
+  await createCacheDir();
   if (!attachments || !attachments.length) return;
   const result = new Map();
 
@@ -86,8 +89,8 @@ export async function downloadAttachments(
   await RNFetchBlob.fs.mkdir(zipSourceFolder);
 
   for (let i = 0; i < attachments.length; i++) {
-    let attachment = attachments[i];
-    const hash = attachment.metadata.hash;
+    let attachment = await db.attachments.attachment(attachments[i]);
+    const hash = attachment.hash;
     try {
       if (canceled.current) {
         RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
@@ -111,15 +114,16 @@ export async function downloadAttachments(
       }
       if (!uri) throw new Error("Failed to download file");
       // Move file to the source folder we will zip eventually and rename the file to it's actual name.
-      const filePath = `${zipSourceFolder}/${attachment.metadata.filename}`;
+      const filePath = `${zipSourceFolder}/${attachment.filename}`;
       await RNFetchBlob.fs.mv(`${cacheDir}/${uri}`, filePath);
       result.set(hash, {
-        filename: attachment.metadata.filename,
-        status: FileDownloadStatus.Success
+        filename: attachment.filename,
+        status: FileDownloadStatus.Success,
+        attachment: attachment
       });
     } catch (e) {
       result.set(hash, {
-        filename: attachment.metadata.filename,
+        filename: attachment.filename,
         status: FileDownloadStatus.Fail,
         reason: e
       });
@@ -179,10 +183,14 @@ export default async function downloadAttachment(
     silent: false,
     cache: false,
     throwError: false,
-    groupId: undefined
+    groupId: undefined,
+    base64: false,
+    text: false
   }
 ) {
-  let attachment = db.attachments.attachment(hash);
+  await createCacheDir();
+
+  let attachment = await db.attachments.attachment(hash);
   if (!attachment) {
     console.log("attachment not found");
     return;
@@ -201,35 +209,41 @@ export default async function downloadAttachment(
   try {
     console.log(
       "starting download attachment",
-      attachment.metadata.hash,
+      attachment.hash,
       options.groupId
     );
-    await db.fs.downloadFile(
-      options.groupId || attachment.metadata.hash,
-      attachment.metadata.hash
-    );
-    if (
-      !(await RNFetchBlob.fs.exists(`${cacheDir}/${attachment.metadata.hash}`))
-    )
+    await db
+      .fs()
+      .downloadFile(options.groupId || attachment.hash, attachment.hash);
+    if (!(await exists(attachment.hash))) {
       return;
+    }
+
+    if (options.base64 || options.text) {
+      return await db.attachments.read(
+        attachment.hash,
+        options.base64 ? "base64" : "text"
+      );
+    }
 
     let filename = getFileNameWithExtension(
-      attachment.metadata.filename,
-      attachment.metadata.type
+      attachment.filename,
+      attachment.mimeType
     );
 
     let key = await db.attachments.decryptKey(attachment.key);
     let info = {
       iv: attachment.iv,
       salt: attachment.salt,
-      length: attachment.length,
+      length: attachment.size,
       alg: attachment.alg,
-      hash: attachment.metadata.hash,
-      hashType: attachment.metadata.hashType,
-      mime: attachment.metadata.type,
+      hash: attachment.hash,
+      hashType: attachment.hashType,
+      mime: attachment.mimeType,
       fileName: options.cache ? undefined : filename,
       uri: options.cache ? undefined : folder.uri,
-      chunkSize: attachment.chunkSize
+      chunkSize: attachment.chunkSize,
+      appGroupId: IOS_APPGROUPID
     };
 
     let fileUri = await Sodium.decryptFile(
@@ -239,7 +253,7 @@ export default async function downloadAttachment(
     );
 
     if (!options.silent) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Download successful",
         message: filename + " downloaded",
         type: "success"
@@ -248,11 +262,11 @@ export default async function downloadAttachment(
 
     if (
       attachment.dateUploaded &&
-      !isImage(attachment.metadata?.type) &&
-      !isDocument(attachment.metadata?.type)
+      !isImage(attachment.mimeType) &&
+      !isDocument(attachment.mimeType)
     ) {
       RNFetchBlob.fs
-        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.metadata.hash}`)
+        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}`)
         .catch(console.log);
     }
     if (Platform.OS === "ios" && !options.cache) {
@@ -267,7 +281,7 @@ export default async function downloadAttachment(
             : "File Manager/Notesnook/downloads"
         }`,
         icon: "download",
-        context: global ? null : attachment.metadata.hash,
+        context: global ? null : attachment.hash,
         component: <ShareComponent uri={fileUri} name={filename} padding={12} />
       });
     }
@@ -277,10 +291,13 @@ export default async function downloadAttachment(
     console.log("download attachment error: ", e);
     if (attachment.dateUploaded) {
       RNFetchBlob.fs
-        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.metadata.hash}`)
+        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}`)
+        .catch(console.log);
+      RNFetchBlob.fs
+        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.hash}_dcache`)
         .catch(console.log);
     }
-    useAttachmentStore.getState().remove(attachment.metadata.hash);
+    useAttachmentStore.getState().remove(attachment.hash);
     if (options.throwError) {
       throw e;
     }

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

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

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

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

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

@@ -21,14 +21,15 @@ import RNFetchBlob from "react-native-blob-util";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { DatabaseLogger, db } from "../database";
 import { cacheDir } from "./utils";
-import { isImage, isDocument } from "@notesnook/core/utils/filename";
+import { isImage, isDocument } from "@notesnook/core/dist/utils/filename";
 import { Platform } from "react-native";
 import { IOS_APPGROUPID } from "../../utils/constants";
+import { createCacheDir } from "./io";
 
 export async function uploadFile(filename, data, cancelToken) {
   if (!data) return false;
   let { url, headers } = data;
-
+  await createCacheDir();
   DatabaseLogger.info(`Preparing to upload file: ${filename}`);
 
   try {
@@ -72,7 +73,10 @@ export async function uploadFile(filename, data, cancelToken) {
         );
       });
 
-    cancelToken.cancel = request.cancel;
+    cancelToken.cancel = () => {
+      useAttachmentStore.getState().remove(filename);
+      request.cancel();
+    };
     let response = await request;
 
     let status = response.info().status;
@@ -83,12 +87,9 @@ export async function uploadFile(filename, data, cancelToken) {
       DatabaseLogger.info(
         `File upload status: ${filename}, ${status}, ${text}`
       );
-      let attachment = db.attachments.attachment(filename);
+      let attachment = await db.attachments.attachment(filename);
       if (!attachment) return result;
-      if (
-        !isImage(attachment.metadata.type) &&
-        !isDocument(attachment.metadata?.type)
-      ) {
+      if (!isImage(attachment.mimeType) && !isDocument(attachment.mimeType)) {
         RNFetchBlob.fs.unlink(`${cacheDir}/${filename}`).catch(console.log);
       }
     } else {

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

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

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

@@ -128,7 +128,9 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 fontSize={SIZE.md}
                 buttonType={{
                   color: color ? color : colors.primary.accent,
-                  text: colors.static.white,
+                  text: color
+                    ? colors.static.white
+                    : colors.primary.accentForeground,
                   selected: color ? color : colors.primary.accent,
                   opacity: 1
                 }}

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

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

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

@@ -18,7 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useCallback, useEffect, useRef } from "react";
-import { Platform, View } from "react-native";
+import { Platform, TextInput, View } from "react-native";
+//@ts-ignore
 import { enabled } from "react-native-privacy-snapshot";
 import { db } from "../../common/database";
 import { useAppState } from "../../hooks/use-app-state";
@@ -41,8 +42,8 @@ const AppLockedOverlay = () => {
   const appLocked = useUserStore((state) => state.appLocked);
   const lockApp = useUserStore((state) => state.lockApp);
   const deviceMode = useSettingStore((state) => state.deviceMode);
-  const passwordInputRef = useRef();
-  const password = useRef();
+  const passwordInputRef = useRef<TextInput>(null);
+  const password = useRef<string>();
   const appState = useAppState();
 
   const biometricUnlockAwaitingUserInput = useRef(false);
@@ -55,14 +56,14 @@ const AppLockedOverlay = () => {
     }
     useSettingStore.getState().setRequestBiometrics(true);
 
-    let unlocked = await BiometricService.validateUser(
+    const unlocked = await BiometricService.validateUser(
       "Unlock to access your notes",
       ""
     );
     if (unlocked) {
       lockApp(false);
       enabled(false);
-      password.current = null;
+      password.current = undefined;
     }
     setTimeout(() => {
       biometricUnlockAwaitingUserInput.current = false;
@@ -73,11 +74,11 @@ const AppLockedOverlay = () => {
   const onSubmit = async () => {
     if (!password.current) return;
     try {
-      let unlocked = await db.user.verifyPassword(password.current);
+      const unlocked = await db.user.verifyPassword(password.current);
       if (unlocked) {
         lockApp(false);
         enabled(false);
-        password.current = null;
+        password.current = undefined;
       }
     } catch (e) {
       console.error(e);
@@ -170,7 +171,9 @@ const AppLockedOverlay = () => {
                   secureTextEntry
                   placeholder="Enter account password"
                   onChangeText={(v) => (password.current = v)}
-                  onSubmit={onSubmit}
+                  onSubmit={() => {
+                    onSubmit();
+                  }}
                 />
               </>
             ) : null}

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

@@ -17,9 +17,13 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { formatBytes } from "@notesnook/common";
+import { Attachment, Note, VirtualizedGrouping } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
 import Clipboard from "@react-native-clipboard/clipboard";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { RefObject, useEffect, useState } from "react";
 import { View } from "react-native";
+import { ActionSheetRef } from "react-native-actions-sheet";
 import { ScrollView } from "react-native-gesture-handler";
 import { db } from "../../common/database";
 import filesystem from "../../common/filesystem";
@@ -27,14 +31,17 @@ import downloadAttachment from "../../common/filesystem/download-attachment";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
 import picker from "../../screens/editor/tiptap/picker";
 import {
+  ToastManager,
   eSendEvent,
-  presentSheet,
-  ToastEvent
+  presentSheet
 } from "../../services/event-manager";
 import PremiumService from "../../services/premium";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { useThemeColors } from "@notesnook/theme";
-import { eCloseAttachmentDialog, eCloseSheet } from "../../utils/events";
+import {
+  eCloseAttachmentDialog,
+  eCloseSheet,
+  eDBItemUpdate
+} from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
@@ -46,28 +53,37 @@ import { Notice } from "../ui/notice";
 import { PressableButton } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { formatBytes } from "@notesnook/common";
 
-const Actions = ({ attachment, setAttachments, fwdRef }) => {
+const Actions = ({
+  attachment,
+  close,
+  setAttachments,
+  fwdRef
+}: {
+  attachment: Attachment;
+  setAttachments: (attachments?: VirtualizedGrouping<Attachment>) => void;
+  close: () => void;
+  fwdRef: RefObject<ActionSheetRef>;
+}) => {
   const { colors } = useThemeColors();
-  const contextId = attachment.metadata.hash;
-  const [filename, setFilename] = useState(attachment.metadata.filename);
+  const contextId = attachment.hash;
+  const [filename, setFilename] = useState(attachment.filename);
   const [currentProgress] = useAttachmentProgress(attachment);
-  const [failed, setFailed] = useState(attachment.failed);
-  const [notes, setNotes] = useState([]);
-  const [loading, setLoading] = useState({
-    name: null
-  });
+  const [failed, setFailed] = useState<string | undefined>(attachment.failed);
+  const [notes, setNotes] = useState<Note[]>([]);
+  const [loading, setLoading] = useState<{
+    name?: string;
+  }>({});
 
   const actions = [
     {
       name: "Download",
       onPress: async () => {
         if (currentProgress) {
-          await db.fs.cancel(attachment.metadata.hash, "download");
-          useAttachmentStore.getState().remove(attachment.metadata.hash);
+          await db.fs().cancel(attachment.hash);
+          useAttachmentStore.getState().remove(attachment.hash);
         }
-        downloadAttachment(attachment.metadata.hash, false);
+        downloadAttachment(attachment.hash, false);
         eSendEvent(eCloseSheet, contextId);
       },
       icon: "download"
@@ -76,7 +92,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
       name: "Reupload",
       onPress: async () => {
         if (!PremiumService.get()) {
-          ToastEvent.show({
+          ToastManager.show({
             heading: "Upgrade to pro",
             type: "error",
             context: "local"
@@ -85,9 +101,9 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
         }
         await picker.pick({
           reupload: true,
-          hash: attachment.metadata.hash,
+          hash: attachment.hash,
           context: contextId,
-          type: attachment.metadata.type
+          type: attachment.type
         });
       },
       icon: "upload"
@@ -98,28 +114,29 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
         setLoading({
           name: "Run file check"
         });
-        let res = await filesystem.checkAttachment(attachment.metadata.hash);
+        let res = await filesystem.checkAttachment(attachment.hash);
         if (res.failed) {
           db.attachments.markAsFailed(attachment.id, res.failed);
           setFailed(res.failed);
-          ToastEvent.show({
+          ToastManager.show({
             heading: "File check failed with error: " + res.failed,
             type: "error",
             context: "local"
           });
         } else {
-          setFailed(null);
-          db.attachments.markAsFailed(attachment.id, null);
-          ToastEvent.show({
+          setFailed(undefined);
+          db.attachments.markAsFailed(attachment.id);
+          eSendEvent(eDBItemUpdate, attachment.id);
+          ToastManager.show({
             heading: "File check passed",
             type: "success",
             context: "local"
           });
         }
 
-        setAttachments([...db.attachments.all]);
+        setAttachments();
         setLoading({
-          name: null
+          name: undefined
         });
       },
       icon: "file-check"
@@ -128,19 +145,20 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
       name: "Rename",
       onPress: () => {
         presentDialog({
-          context: contextId,
+          context: contextId as any,
           input: true,
           title: "Rename file",
           paragraph: "Enter a new name for the file",
-          defaultValue: attachment.metadata.filename,
+          defaultValue: attachment.filename,
           positivePress: async (value) => {
             if (value && value.length > 0) {
               await db.attachments.add({
-                hash: attachment.metadata.hash,
+                hash: attachment.hash,
                 filename: value
               });
               setFilename(value);
-              setAttachments([...db.attachments.all]);
+              setAttachments();
+              eSendEvent(eDBItemUpdate, attachment.id);
             }
           },
           positiveText: "Rename"
@@ -151,34 +169,23 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
     {
       name: "Delete",
       onPress: async () => {
-        await db.attachments.remove(attachment.metadata.hash, false);
-        setAttachments([...db.attachments.all]);
-        eSendEvent(eCloseSheet, contextId);
+        await db.attachments.remove(attachment.hash, false);
+        setAttachments();
+        eSendEvent(eDBItemUpdate, attachment.id);
+        close();
       },
       icon: "delete-outline"
     }
   ];
 
-  const getNotes = useCallback(() => {
-    let allNotes = db.notes.all;
-    let attachmentNotes = attachment.noteIds?.map((id) => {
-      let index = allNotes?.findIndex((note) => id === note.id);
-      if (index !== -1) {
-        return allNotes[index];
-      } else {
-        return {
-          type: "notfound",
-          title: `Note with id ${id} does not exist.`,
-          id: id
-        };
-      }
-    });
-    return attachmentNotes;
-  }, [attachment.noteIds]);
-
   useEffect(() => {
-    setNotes(getNotes());
-  }, [attachment, getNotes]);
+    db.relations
+      .to(attachment, "note")
+      .selector.items()
+      .then((items) => {
+        setNotes(items);
+      });
+  }, [attachment]);
 
   return (
     <ScrollView
@@ -221,7 +228,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
             }}
             color={colors.secondary.paragraph}
           >
-            {attachment.metadata.type}
+            {attachment.type}
           </Paragraph>
           <Paragraph
             style={{
@@ -230,10 +237,10 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
             size={SIZE.xs}
             color={colors.secondary.paragraph}
           >
-            {formatBytes(attachment.length)}
+            {formatBytes(attachment.size)}
           </Paragraph>
 
-          {attachment.noteIds ? (
+          {notes.length ? (
             <Paragraph
               style={{
                 marginRight: 10
@@ -241,14 +248,14 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
               size={SIZE.xs}
               color={colors.secondary.paragraph}
             >
-              {attachment.noteIds.length} note
-              {attachment.noteIds.length > 1 ? "s" : ""}
+              {notes.length} note
+              {notes.length > 1 ? "s" : ""}
             </Paragraph>
           ) : null}
           <Paragraph
             onPress={() => {
-              Clipboard.setString(attachment.metadata.hash);
-              ToastEvent.show({
+              Clipboard.setString(attachment.hash);
+              ToastManager.show({
                 type: "success",
                 heading: "Attachment hash copied",
                 context: "local"
@@ -257,7 +264,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
             size={SIZE.xs}
             color={colors.secondary.paragraph}
           >
-            {attachment.metadata.hash}
+            {attachment.hash}
           </Paragraph>
         </View>
 
@@ -286,21 +293,11 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
             {notes.map((item) => (
               <PressableButton
                 onPress={async () => {
-                  if (item.type === "notfound") {
-                    ToastEvent.show({
-                      heading: "Note not found",
-                      message:
-                        "A note with the given id was not found. Maybe you have deleted the note or moved it to trash already.",
-                      type: "error",
-                      context: "local"
-                    });
-                    return;
-                  }
                   eSendEvent(eCloseSheet, contextId);
                   await sleep(150);
                   eSendEvent(eCloseAttachmentDialog);
                   await sleep(300);
-                  openNote(item, item.type === "trash");
+                  openNote(item, (item as any).type === "trash");
                 }}
                 customStyle={{
                   paddingVertical: 12,
@@ -321,17 +318,16 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
         <Button
           key={item.name}
           buttonType={{
-            text: item.on
-              ? colors.primary.accent
-              : item.name === "Delete" || item.name === "PermDelete"
-              ? colors.error.paragraph
-              : colors.primary.paragraph
+            text:
+              item.name === "Delete" || item.name === "PermDelete"
+                ? colors.error.paragraph
+                : colors.primary.paragraph
           }}
           onPress={item.onPress}
           title={item.name}
           icon={item.icon}
           loading={loading?.name === item.name}
-          type={item.on ? "shade" : "gray"}
+          type="gray"
           fontSize={SIZE.sm}
           style={{
             borderRadius: 0,
@@ -359,11 +355,20 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
   );
 };
 
-Actions.present = (attachment, set, context) => {
+Actions.present = (
+  attachment: Attachment,
+  set: (attachments?: VirtualizedGrouping<Attachment>) => void,
+  context?: string
+) => {
   presentSheet({
     context: context,
-    component: (ref) => (
-      <Actions fwdRef={ref} setAttachments={set} attachment={attachment} />
+    component: (ref, close) => (
+      <Actions
+        fwdRef={ref}
+        setAttachments={set}
+        close={close}
+        attachment={attachment}
+      />
     )
   });
 };

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

@@ -18,43 +18,58 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { formatBytes } from "@notesnook/common";
+import { Attachment, VirtualizedGrouping } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { TouchableOpacity, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
-import { useThemeColors } from "@notesnook/theme";
+import { useDBItem } from "../../hooks/use-db-item";
 import { SIZE } from "../../utils/size";
 import { IconButton } from "../ui/icon-button";
 import { ProgressCircleComponent } from "../ui/svg/lazy";
 import Paragraph from "../ui/typography/paragraph";
 import Actions from "./actions";
 
-function getFileExtension(filename) {
-  var ext = /^.+\.([^.]+)$/.exec(filename);
+function getFileExtension(filename: string) {
+  const ext = /^.+\.([^.]+)$/.exec(filename);
   return ext == null ? "" : ext[1];
 }
 
 export const AttachmentItem = ({
-  attachment,
+  id,
+  attachments,
   encryption,
   setAttachments,
   pressable = true,
   hideWhenNotDownloading,
   context
+}: {
+  id: string | number;
+  attachments?: VirtualizedGrouping<Attachment>;
+  encryption?: boolean;
+  setAttachments: (attachments: any) => void;
+  pressable?: boolean;
+  hideWhenNotDownloading?: boolean;
+  context?: string;
 }) => {
+  const [attachment] = useDBItem(id, "attachment", attachments);
+
   const { colors } = useThemeColors();
   const [currentProgress, setCurrentProgress] = useAttachmentProgress(
     attachment,
     encryption
   );
+
   const onPress = () => {
-    if (!pressable) return;
+    if (!pressable || !attachment) return;
     Actions.present(attachment, setAttachments, context);
   };
 
-  return hideWhenNotDownloading &&
-    (!currentProgress || !currentProgress.value) ? null : (
+  return (hideWhenNotDownloading &&
+    (!currentProgress || !currentProgress.value)) ||
+    !attachment ? null : (
     <TouchableOpacity
       activeOpacity={0.9}
       onPress={onPress}
@@ -67,7 +82,6 @@ export const AttachmentItem = ({
         borderRadius: 5,
         backgroundColor: colors.secondary.background
       }}
-      type="grayBg"
     >
       <View
         style={{
@@ -93,7 +107,7 @@ export const AttachmentItem = ({
               position: "absolute"
             }}
           >
-            {getFileExtension(attachment.metadata.filename).toUpperCase()}
+            {getFileExtension(attachment.filename).toUpperCase()}
           </Paragraph>
         </View>
 
@@ -113,12 +127,12 @@ export const AttachmentItem = ({
             lineBreakMode="middle"
             color={colors.primary.paragraph}
           >
-            {attachment.metadata.filename}
+            {attachment.filename}
           </Paragraph>
 
           {!hideWhenNotDownloading ? (
             <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
-              {formatBytes(attachment.length)}{" "}
+              {formatBytes(attachment.size)}{" "}
               {currentProgress?.type
                 ? "(" + currentProgress.type + "ing - tap to cancel)"
                 : ""}
@@ -132,8 +146,8 @@ export const AttachmentItem = ({
           activeOpacity={0.9}
           onPress={() => {
             if (encryption || !pressable) return;
-            db.fs.cancel(attachment.metadata.hash);
-            setCurrentProgress(null);
+            db.fs().cancel(attachment.metadata.hash);
+            setCurrentProgress(undefined);
           }}
           style={{
             justifyContent: "center",

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

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

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

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

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

@@ -17,14 +17,16 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useRef, useState } from "react";
 import { Platform, View } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
+import { useUserStore } from "../../stores/use-user-store";
 import { eCloseLoginDialog, eOpenLoginDialog } from "../../utils/events";
 import { sleep } from "../../utils/time";
 import BaseDialog from "../dialog/base-dialog";
@@ -34,7 +36,6 @@ import { IconButton } from "../ui/icon-button";
 import { hideAuth, initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
 export const AuthMode = {
   login: 0,
@@ -68,6 +69,9 @@ const AuthModal = () => {
   }
 
   const close = () => {
+    useUserStore.setState({
+      disableAppLockRequests: false
+    });
     actionSheetRef.current?.hide();
     setCurrentAuthMode(AuthMode.login);
     setVisible(false);
@@ -77,6 +81,11 @@ const AuthModal = () => {
     <BaseDialog
       overlayOpacity={0}
       statusBarTranslucent={false}
+      onShow={() => {
+        useUserStore.setState({
+          disableAppLockRequests: true
+        });
+      }}
       onRequestClose={currentAuthMode !== AuthMode.welcomeSignup && close}
       visible={true}
       onClose={close}
@@ -85,11 +94,14 @@ const AuthModal = () => {
       background={colors.primary.background}
       transparent={false}
       animated={false}
+      centered={false}
+      enableSheetKeyboardHandler
     >
       <KeyboardAwareScrollView
         style={{
           width: "100%"
         }}
+        enableAutomaticScroll={false}
         keyboardShouldPersistTaps="handled"
       >
         {currentAuthMode !== AuthMode.login ? (

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

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

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

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

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

@@ -24,7 +24,7 @@ import { db } from "../../common/database";
 import { MMKV } from "../../common/database/mmkv";
 import BiometricService from "../../services/biometrics";
 import {
-  ToastEvent,
+  ToastManager,
   eSendEvent,
   eSubscribeEvent
 } from "../../services/event-manager";
@@ -46,6 +46,7 @@ import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
+import BaseDialog from "../dialog/base-dialog";
 
 function getObfuscatedEmail(email) {
   if (!email) return "";
@@ -68,7 +69,8 @@ export const SessionExpired = () => {
       eSendEvent(eUserLoggedIn, true);
       setVisible(false);
       setFocused(false);
-    }
+    },
+    true
   );
 
   const logout = async () => {
@@ -83,7 +85,7 @@ export const SessionExpired = () => {
       clearAllStores();
       setVisible(false);
     } catch (e) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: e.message,
         type: "error",
         context: "local"
@@ -100,9 +102,9 @@ export const SessionExpired = () => {
 
   const open = React.useCallback(async () => {
     try {
-      let res = await db.user.tokenManager.getToken();
+      let res = await db.tokenManager.getToken();
       if (!res) throw new Error("no token found");
-      if (db.user.tokenManager._isTokenExpired(res))
+      if (db.tokenManager._isTokenExpired(res))
         throw new Error("token expired");
       Sync.run("global", false, true, async (complete) => {
         if (!complete) {
@@ -130,15 +132,20 @@ export const SessionExpired = () => {
 
   return (
     visible && (
-      <Modal
+      <BaseDialog
+        transparent={false}
+        background={colors.primary.background}
+        bounce={false}
+        animated={false}
+        centered={false}
         onShow={async () => {
           await sleep(300);
           passwordInputRef.current?.focus();
           setFocused(true);
         }}
+        enableSheetKeyboardHandler={true}
         visible={true}
       >
-        <SheetProvider context="two_factor_verify" />
         <View
           style={{
             width: focused ? "100%" : "99.9%",
@@ -231,7 +238,9 @@ export const SessionExpired = () => {
         </View>
         <Toast context="local" />
         <Dialog context="session_expiry" />
-      </Modal>
+
+        <SheetProvider context="two_factor_verify" />
+      </BaseDialog>
     )
   );
 };

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

@@ -21,7 +21,7 @@ import React, { useRef, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
-import { ToastEvent } from "../../services/event-manager";
+import { ToastManager } from "../../services/event-manager";
 import { clearMessage, setEmailVerifyMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
 import { useThemeColors } from "@notesnook/theme";
@@ -52,7 +52,7 @@ export const Signup = ({ changeMode, trial }) => {
   const { width, height } = useWindowDimensions();
   const validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "All fields required",
         message: "Fill all the fields and try again",
         type: "error",
@@ -67,6 +67,7 @@ export const Signup = ({ changeMode, trial }) => {
 
   const signup = async () => {
     if (!validateInfo() || error) return;
+    if (loading) return;
     setLoading(true);
     try {
       await db.user.signup(email.current.toLowerCase(), password.current);
@@ -84,7 +85,7 @@ export const Signup = ({ changeMode, trial }) => {
       }
     } catch (e) {
       setLoading(false);
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Signup failed",
         message: e.message,
         type: "error",

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

@@ -24,7 +24,7 @@ import useTimer from "../../hooks/use-timer";
 import {
   eSendEvent,
   presentSheet,
-  ToastEvent
+  ToastManager
 } from "../../services/event-manager";
 import { useThemeColors } from "@notesnook/theme";
 import { eCloseSheet } from "../../utils/events";
@@ -138,7 +138,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
       setSending(false);
     } catch (e) {
       setSending(false);
-      ToastEvent.error(e, "Error sending 2FA Code", "local");
+      ToastManager.error(e, "Error sending 2FA Code", "local");
     }
   }, [currentMethod.method, mfaInfo.token, seconds, sending, start]);
 
@@ -214,6 +214,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 code.current = value;
                 //onNext();
               }}
+              caretHidden
               inputStyle={{
                 fontSize: SIZE.lg,
                 height: 60,

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

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useRef, useState } from "react";
 import { db } from "../../common/database";
-import { eSendEvent, ToastEvent } from "../../services/event-manager";
+import { eSendEvent, ToastManager } from "../../services/event-manager";
 import { clearMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
@@ -33,7 +33,7 @@ export const LoginSteps = {
   passwordAuth: 3
 };
 
-export const useLogin = (onFinishLogin) => {
+export const useLogin = (onFinishLogin, sessionExpired = false) => {
   const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
@@ -48,7 +48,7 @@ export const useLogin = (onFinishLogin) => {
       (!password.current && step === LoginSteps.passwordAuth) ||
       (!email.current && step === LoginSteps.emailAuth)
     ) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "All fields required",
         message: "Fill all the fields and try again",
         type: "error",
@@ -64,10 +64,12 @@ export const useLogin = (onFinishLogin) => {
   const login = async () => {
     if (!validateInfo() || error) return;
     try {
+      if (loading) return;
       setLoading(true);
       switch (step) {
         case LoginSteps.emailAuth: {
           const mfaInfo = await db.user.authenticateEmail(email.current);
+          console.log("email auth", mfaInfo);
           if (mfaInfo) {
             TwoFactorVerification.present(async (mfa, callback) => {
               try {
@@ -100,7 +102,12 @@ export const useLogin = (onFinishLogin) => {
           break;
         }
         case LoginSteps.passwordAuth: {
-          await db.user.authenticatePassword(email.current, password.current);
+          await db.user.authenticatePassword(
+            email.current,
+            password.current,
+            null,
+            sessionExpired
+          );
           finishLogin();
           break;
         }
@@ -114,7 +121,7 @@ export const useLogin = (onFinishLogin) => {
   const finishWithError = async (e) => {
     if (e.message === "invalid_grant") setStep(LoginSteps.emailAuth);
     setLoading(false);
-    ToastEvent.show({
+    ToastManager.show({
       heading: "Login failed",
       message: e.message,
       type: "error",
@@ -128,7 +135,7 @@ export const useLogin = (onFinishLogin) => {
     PremiumService.setPremiumStatus();
     setUser(user);
     clearMessage();
-    ToastEvent.show({
+    ToastManager.show({
       heading: "Login successful",
       message: `Logged in as ${user.email}`,
       type: "success",

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

@@ -17,8 +17,9 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { useThemeColors } from "@notesnook/theme";
 import React, { useCallback, useEffect } from "react";
-import { Keyboard, Platform, View } from "react-native";
+import { Keyboard, View } from "react-native";
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -34,14 +35,21 @@ import { getElevationStyle } from "../../utils/elevation";
 import { SIZE, normalize } from "../../utils/size";
 import NativeTooltip from "../../utils/tooltip";
 import { PressableButton } from "../ui/pressable";
-import { useThemeColors } from "@notesnook/theme";
 
-export const FloatingButton = ({
+interface FloatingButtonProps {
+  title: string;
+  onPress: () => void;
+  color?: string;
+  shouldShow?: boolean;
+  alwaysVisible?: boolean;
+}
+
+const FloatingButton = ({
   title,
   onPress,
   color,
-  shouldShow = false
-}) => {
+  alwaysVisible = false
+}: FloatingButtonProps) => {
   const { colors } = useThemeColors();
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
@@ -60,12 +68,8 @@ export const FloatingButton = ({
     };
   });
 
-  useEffect(() => {
-    animate(selectionMode ? 150 : 0);
-  }, [animate, selectionMode]);
-
   const animate = useCallback(
-    (toValue) => {
+    (toValue: number) => {
       translate.value = withTiming(toValue, {
         duration: 250,
         easing: Easing.elastic(1)
@@ -74,39 +78,39 @@ export const FloatingButton = ({
     [translate]
   );
 
-  const onKeyboardHide = useCallback(async () => {
-    editorState().keyboardState = false;
-    if (deviceMode !== "mobile") return;
-    animate(0);
-  }, [animate, deviceMode]);
-
-  const onKeyboardShow = useCallback(async () => {
-    editorState().keyboardState = true;
-    if (deviceMode !== "mobile") return;
-    animate(150);
-  }, [animate, deviceMode]);
+  useEffect(() => {
+    animate(selectionMode ? 150 : 0);
+  }, [animate, selectionMode]);
 
   useEffect(() => {
-    let sub1 = Keyboard.addListener("keyboardDidShow", onKeyboardShow);
-    let sub2 = Keyboard.addListener("keyboardDidHide", onKeyboardHide);
-    return () => {
-      sub1?.remove();
-      sub2?.remove();
+    const onKeyboardHide = () => {
+      editorState().keyboardState = false;
+      if (deviceMode !== "mobile") return;
+      animate(0);
     };
-  }, [deviceMode, onKeyboardHide, onKeyboardShow]);
-  const paddings = {
-    ios: 20,
-    android: 20,
-    iPad: 20
-  };
 
-  return deviceMode !== "mobile" && !shouldShow ? null : (
+    const onKeyboardShow = () => {
+      editorState().keyboardState = true;
+      if (deviceMode !== "mobile") return;
+      animate(150);
+    };
+
+    const sub = [
+      Keyboard.addListener("keyboardDidShow", onKeyboardShow),
+      Keyboard.addListener("keyboardDidHide", onKeyboardHide)
+    ];
+    return () => {
+      sub.forEach((sub) => sub?.remove?.());
+    };
+  }, [deviceMode, animate]);
+
+  return deviceMode !== "mobile" && !alwaysVisible ? null : (
     <Animated.View
       style={[
         {
           position: "absolute",
           right: 12,
-          bottom: paddings[Platform.isPad ? "iPad" : Platform.OS],
+          bottom: 20,
           zIndex: 10
         },
         animatedStyle
@@ -115,16 +119,15 @@ export const FloatingButton = ({
       <PressableButton
         testID={notesnook.buttons.add}
         type="accent"
-        buttonType={{
-          color: colors.static[color],
-          text: colors.static.white
-        }}
+        accentColor={color}
         customStyle={{
           ...getElevationStyle(5),
           borderRadius: 100
         }}
         onLongPress={(event) => {
-          NativeTooltip.show(event, title, NativeTooltip.POSITIONS.LEFT);
+          if (title) {
+            NativeTooltip.show(event, title, NativeTooltip.POSITIONS.LEFT);
+          }
         }}
         onPress={onPress}
       >
@@ -138,7 +141,7 @@ export const FloatingButton = ({
         >
           <Icon
             name={title === "Clear all trash" ? "delete" : "plus"}
-            color="white"
+            color={colors.primary.accentForeground}
             size={SIZE.xxl}
           />
         </View>
@@ -146,3 +149,5 @@ export const FloatingButton = ({
     </Animated.View>
   );
 };
+
+export { FloatingButton };

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

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

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

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

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

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

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

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

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

@@ -17,8 +17,9 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useEffect } from "react";
+import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 import {
+  ColorValue,
   KeyboardAvoidingView,
   Modal,
   Platform,
@@ -31,6 +32,28 @@ import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { BouncingView } from "../ui/transitions/bouncing-view";
 import { ScopedThemeProvider } from "@notesnook/theme";
+import SettingsService from "../../services/settings";
+import { useUserStore } from "../../stores/use-user-store";
+import { useAppState } from "../../hooks/use-app-state";
+
+export interface BaseDialogProps extends PropsWithChildren {
+  animation?: "fade" | "none" | "slide" | undefined;
+  visible: boolean;
+  onRequestClose?: () => void;
+  onShow?: () => void;
+  premium?: boolean;
+  statusBarTranslucent?: boolean;
+  transparent?: boolean;
+  centered?: boolean;
+  bottom?: boolean;
+  background?: string | ColorValue;
+  animated?: boolean;
+  bounce?: boolean;
+  closeOnTouch?: boolean;
+  useSafeArea?: boolean;
+  avoidKeyboardResize?: boolean;
+  enableSheetKeyboardHandler?: boolean;
+}
 
 const BaseDialog = ({
   visible,
@@ -43,14 +66,18 @@ const BaseDialog = ({
   transparent,
   centered = true,
   bottom = false,
-  background = null,
   animated = true,
   bounce = true,
   closeOnTouch = true,
   useSafeArea = true,
-  avoidKeyboardResize = false
-}) => {
+  avoidKeyboardResize = false,
+  enableSheetKeyboardHandler,
+  background
+}: BaseDialogProps) => {
   const floating = useIsFloatingKeyboard();
+  const appState = useAppState();
+  const lockEvents = useRef(false);
+  const [internalVisible, setIntervalVisible] = useState(true);
 
   useEffect(() => {
     return () => {
@@ -58,14 +85,34 @@ const BaseDialog = ({
     };
   }, []);
 
+  useEffect(() => {
+    if (useUserStore.getState().disableAppLockRequests) return;
+    if (SettingsService.get().appLockMode === "background") {
+      if (appState === "background") {
+        setIntervalVisible(false);
+        if (useUserStore.getState().appLocked) {
+          lockEvents.current = true;
+          const unsub = useUserStore.subscribe((state) => {
+            if (!state.appLocked) {
+              setIntervalVisible(true);
+              unsub();
+              setTimeout(() => {
+                lockEvents.current = false;
+              });
+            }
+          });
+        }
+      }
+    }
+  }, [appState]);
+
   const Wrapper = useSafeArea ? SafeAreaView : View;
 
   return (
     <ScopedThemeProvider value="dialog">
       <Modal
-        visible={visible}
+        visible={visible && internalVisible}
         transparent={true}
-        animated
         statusBarTranslucent={statusBarTranslucent}
         supportedOrientations={[
           "portrait",
@@ -75,13 +122,17 @@ const BaseDialog = ({
           "landscape-right"
         ]}
         onShow={() => {
+          if (lockEvents.current) return;
           if (onShow) {
             onShow();
-            useSettingStore.getState().setSheetKeyboardHandler(false);
+            if (!enableSheetKeyboardHandler) {
+              useSettingStore.getState().setSheetKeyboardHandler(false);
+            }
           }
         }}
         animationType={animation}
         onRequestClose={() => {
+          if (lockEvents.current) return;
           if (!closeOnTouch) return null;
           useSettingStore.getState().setSheetKeyboardHandler(true);
           onRequestClose && onRequestClose();
@@ -107,6 +158,7 @@ const BaseDialog = ({
               style={[
                 styles.backdrop,
                 {
+                  alignItems: centered ? "center" : undefined,
                   justifyContent: centered
                     ? "center"
                     : bottom
@@ -116,7 +168,7 @@ const BaseDialog = ({
               ]}
             >
               <TouchableOpacity
-                onPress={closeOnTouch ? onRequestClose : null}
+                onPress={closeOnTouch ? onRequestClose : undefined}
                 style={styles.overlayButton}
               />
               {premium}
@@ -133,8 +185,7 @@ const styles = StyleSheet.create({
   backdrop: {
     width: "100%",
     height: "100%",
-    justifyContent: "center",
-    alignItems: "center"
+    justifyContent: "center"
   },
   overlayButton: {
     width: "100%",

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

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

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

@@ -1,190 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import React, { createRef } from "react";
-import { View } from "react-native";
-
-import { useMenuStore } from "../../../stores/use-menu-store";
-import {
-  eSendEvent,
-  eSubscribeEvent,
-  eUnSubscribeEvent,
-  ToastEvent
-} from "../../../services/event-manager";
-import Navigation from "../../../services/navigation";
-import { db } from "../../../common/database";
-import {
-  eCloseAddTopicDialog,
-  eOnTopicSheetUpdate,
-  eOpenAddTopicDialog
-} from "../../../utils/events";
-import { sleep } from "../../../utils/time";
-import BaseDialog from "../../dialog/base-dialog";
-import DialogButtons from "../../dialog/dialog-buttons";
-import DialogContainer from "../../dialog/dialog-container";
-import DialogHeader from "../../dialog/dialog-header";
-import Input from "../../ui/input";
-import Seperator from "../../ui/seperator";
-import { Toast } from "../../toast";
-import { useRelationStore } from "../../../stores/use-relation-store";
-
-export class AddTopicDialog extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      visible: false,
-      titleFocused: false,
-      loading: false
-    };
-
-    this.ref = createRef();
-    this.title;
-    this.titleRef = createRef();
-    this.notebook = null;
-    this.toEdit = null;
-  }
-
-  addNewTopic = async () => {
-    try {
-      if (!this.title || this.title?.trim() === "") {
-        ToastEvent.show({
-          heading: "Topic title is required",
-          type: "error",
-          context: "local"
-        });
-        return;
-      }
-
-      if (!this.toEdit) {
-        await db.notebooks.notebook(this.notebook.id).topics.add(this.title);
-      } else {
-        let topic = this.toEdit;
-        topic.title = this.title;
-
-        await db.notebooks.notebook(topic.notebookId).topics.add(topic);
-      }
-      this.close();
-      setTimeout(() => {
-        Navigation.queueRoutesForUpdate();
-        useMenuStore.getState().setMenuPins();
-      });
-      eSendEvent(eOnTopicSheetUpdate);
-      useRelationStore.getState().update();
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  componentDidMount() {
-    eSubscribeEvent(eOpenAddTopicDialog, this.open);
-    eSubscribeEvent(eCloseAddTopicDialog, this.close);
-  }
-  componentWillUnmount() {
-    eUnSubscribeEvent(eOpenAddTopicDialog, this.open);
-    eUnSubscribeEvent(eCloseAddTopicDialog, this.close);
-  }
-
-  open = async ({ notebookId, toEdit }) => {
-    let id = notebookId;
-    if (id) {
-      this.notebook = await db.notebooks.notebook(id).data;
-    }
-    this.toEdit = toEdit;
-
-    if (this.toEdit) {
-      this.title = this.toEdit.title;
-    }
-
-    this.setState({
-      visible: true
-    });
-  };
-  close = () => {
-    this.title = null;
-    this.notebook = null;
-    this.toEdit = null;
-    this.setState({
-      visible: false
-    });
-  };
-
-  render() {
-    const { visible } = this.state;
-    if (!visible) return null;
-    return (
-      <BaseDialog
-        onShow={async () => {
-          if (this.toEdit) {
-            this.titleRef.current?.setNativeProps({
-              text: this.toEdit.title
-            });
-          }
-
-          this.ref.current?.animateNextTransition();
-          await sleep(300);
-          this.titleRef.current?.focus();
-        }}
-        bounce={false}
-        statusBarTranslucent={false}
-        visible={true}
-        onRequestClose={this.close}
-      >
-        <DialogContainer>
-          <DialogHeader
-            icon="book-outline"
-            title={this.toEdit ? "Edit topic" : "New topic"}
-            paragraph={
-              this.toEdit
-                ? "Edit title of the topic"
-                : "Add a new topic in " + this.notebook.title
-            }
-            padding={12}
-          />
-          <Seperator half />
-          <View
-            style={{
-              paddingHorizontal: 12,
-              zIndex: 10
-            }}
-          >
-            <Input
-              fwdRef={this.titleRef}
-              testID="input-title"
-              onChangeText={(value) => {
-                this.title = value;
-              }}
-              blurOnSubmit={false}
-              placeholder="Enter title"
-              onSubmit={() => this.addNewTopic()}
-              returnKeyLabel="Done"
-              returnKeyType="done"
-            />
-          </View>
-
-          <DialogButtons
-            positiveTitle={this.toEdit ? "Save" : "Add"}
-            onPressNegative={() => this.close()}
-            onPressPositive={() => this.addNewTopic()}
-          />
-        </DialogContainer>
-        <Toast context="local" />
-      </BaseDialog>
-    );
-  }
-}

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

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

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

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

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

@@ -48,7 +48,7 @@ export const ProFeatures = ({ count = 6 }) => {
           content: "Instantly sync to unlimited devices"
         },
         {
-          content: "A private vault to keep everything imporant always locked"
+          content: "A private vault to keep everything important always locked"
         },
         {
           content:

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

@@ -27,14 +27,12 @@ import { editorController } from "../../../screens/editor/tiptap/utils";
 import BiometricService from "../../../services/biometrics";
 import { DDS } from "../../../services/device-detection";
 import {
+  ToastManager,
   eSendEvent,
   eSubscribeEvent,
-  eUnSubscribeEvent,
-  ToastEvent
+  eUnSubscribeEvent
 } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
-import SearchService from "../../../services/search";
-import { convertNoteToText } from "../../../utils/note-to-text";
 import { getElevationStyle } from "../../../utils/elevation";
 import {
   eClearEditor,
@@ -45,6 +43,7 @@ import {
 } from "../../../utils/events";
 import { deleteItems } from "../../../utils/functions";
 import { tabBarRef } from "../../../utils/global-refs";
+import { convertNoteToText } from "../../../utils/note-to-text";
 import { sleep } from "../../../utils/time";
 import BaseDialog from "../../dialog/base-dialog";
 import DialogButtons from "../../dialog/dialog-buttons";
@@ -55,10 +54,6 @@ import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import Paragraph from "../../ui/typography/paragraph";
 
-let Keychain;
-const passInputRef = createRef();
-const confirmPassRef = createRef();
-const changePassInputRef = createRef();
 export class VaultDialog extends Component {
   constructor(props) {
     super(props);
@@ -88,6 +83,11 @@ export class VaultDialog extends Component {
       deleteVault: false,
       deleteAll: false
     };
+
+    this.passInputRef = createRef();
+    this.confirmPassRef = createRef();
+    this.changePassInputRef = createRef();
+
     this.password = null;
     this.confirmPassword = null;
     this.newPassword = null;
@@ -148,9 +148,6 @@ export class VaultDialog extends Component {
    * @param {import('../../../services/event-manager').vaultType} data
    */
   open = async (data) => {
-    if (!Keychain) {
-      Keychain = require("react-native-keychain");
-    }
     let biometry = await BiometricService.isBiometryAvailable();
     let available = false;
     let fingerprint = await BiometricService.hasInternetCredentials("nn_vault");
@@ -199,7 +196,7 @@ export class VaultDialog extends Component {
 
   close = () => {
     if (this.state.loading) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: this.state.title,
         message: "Please wait and do not close the app.",
         type: "success",
@@ -212,7 +209,6 @@ export class VaultDialog extends Component {
 
     this.password = null;
     this.confirmPassword = null;
-    SearchService.updateAndSearch();
     this.setState({
       visible: false,
       note: {},
@@ -236,7 +232,7 @@ export class VaultDialog extends Component {
     if (this.state.loading) return;
 
     if (!this.password) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Password not entered",
         message: "Enter a password for the vault and try again.",
         type: "error",
@@ -245,7 +241,7 @@ export class VaultDialog extends Component {
       return;
     }
     if (this.password && this.password.length < 3) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Password too short",
         message: "Password must be longer than 3 characters.",
         type: "error",
@@ -257,7 +253,7 @@ export class VaultDialog extends Component {
 
     if (!this.state.novault) {
       if (this.password !== this.confirmPassword) {
-        ToastEvent.show({
+        ToastManager.show({
           heading: "Passwords do not match",
           type: "error",
           context: "local"
@@ -283,7 +279,7 @@ export class VaultDialog extends Component {
           if (this.state.biometricUnlock) {
             this._enrollFingerprint(this.newPassword);
           }
-          ToastEvent.show({
+          ToastManager.show({
             heading: "Vault password updated successfully",
             type: "success",
             context: "global"
@@ -295,17 +291,19 @@ export class VaultDialog extends Component {
             loading: false
           });
           if (e.message === db.vault.ERRORS.wrongPassword) {
-            ToastEvent.show({
+            ToastManager.show({
               heading: "Incorrect password",
               message: "Please enter the correct password and try again",
               type: "error",
               context: "local"
             });
+          } else {
+            ToastManager.error(e);
           }
         });
     } else if (this.state.locked) {
       if (!this.password || this.password.trim() === 0) {
-        ToastEvent.show({
+        ToastManager.show({
           heading: "Incorrect password",
           message: "Please enter the correct password and try again",
           type: "error",
@@ -355,7 +353,7 @@ export class VaultDialog extends Component {
         });
         this.close();
       } else {
-        ToastEvent.show({
+        ToastManager.show({
           heading: "Account password incorrect",
           message: "Please enter correct password for your account.",
           type: "error",
@@ -382,7 +380,7 @@ export class VaultDialog extends Component {
       this.close();
       eSendEvent("vaultUpdated");
     } catch (e) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Vault password incorrect",
         message: "Please enter correct password to clear vault.",
         type: "error",
@@ -396,7 +394,7 @@ export class VaultDialog extends Component {
 
   async _lockNote() {
     if (!this.password || this.password.trim() === 0) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Incorrect password",
         type: "error",
         context: "local"
@@ -408,7 +406,7 @@ export class VaultDialog extends Component {
         eSendEvent(eClearEditor);
       }
       this.close();
-      ToastEvent.show({
+      ToastManager.show({
         message: "Note locked successfully",
         type: "error",
         context: "local"
@@ -421,7 +419,7 @@ export class VaultDialog extends Component {
 
   async _unlockNote() {
     if (!this.password || this.password.trim() === 0) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Incorrect password",
         message: "Please enter the correct password and try again",
         type: "error",
@@ -442,6 +440,7 @@ export class VaultDialog extends Component {
       if (this.state.biometricUnlock && !this.state.isBiometryEnrolled) {
         await this._enrollFingerprint(this.password);
       }
+
       if (this.state.goToEditor) {
         this._openInEditor(note);
       } else if (this.state.share) {
@@ -452,14 +451,13 @@ export class VaultDialog extends Component {
         await this._copyNote(note);
       }
     } catch (e) {
-      console.log(e);
       this._takeErrorAction(e);
     }
   };
   async _deleteNote() {
     try {
       await db.vault.remove(this.state.note.id, this.password);
-      await deleteItems(this.state.note);
+      await deleteItems([this.state.note.id], "note");
       this.close();
     } catch (e) {
       this._takeErrorAction(e);
@@ -467,44 +465,40 @@ export class VaultDialog extends Component {
   }
 
   async _enrollFingerprint(password) {
-    try {
-      this.setState(
-        {
-          loading: true
-        },
-        async () => {
-          try {
-            await db.vault.unlock(password);
-            await BiometricService.storeCredentials(password);
-            this.setState({
-              loading: false
-            });
-            eSendEvent("vaultUpdated");
-            ToastEvent.show({
-              heading: "Biometric unlocking enabled!",
-              message: "Now you can unlock notes in vault with biometrics.",
-              type: "success",
-              context: "global"
-            });
-            this.close();
-          } catch (e) {
-            ToastEvent.show({
-              heading: "Incorrect password",
-              message:
-                "Please enter the correct vault password to enable biometrics.",
-              type: "error",
-              context: "local"
-            });
-            this.setState({
-              loading: false
-            });
-            return;
-          }
+    this.setState(
+      {
+        loading: true
+      },
+      async () => {
+        try {
+          await db.vault.unlock(password);
+          await BiometricService.storeCredentials(password);
+          this.setState({
+            loading: false
+          });
+          eSendEvent("vaultUpdated");
+          ToastManager.show({
+            heading: "Biometric unlocking enabled!",
+            message: "Now you can unlock notes in vault with biometrics.",
+            type: "success",
+            context: "global"
+          });
+          this.close();
+        } catch (e) {
+          this.close();
+          ToastManager.show({
+            heading: "Incorrect password",
+            message:
+              "Please enter the correct vault password to enable biometrics.",
+            type: "error",
+            context: "local"
+          });
+          this.setState({
+            loading: false
+          });
         }
-      );
-    } catch (e) {
-      this._takeErrorAction(e);
-    }
+      }
+    );
   }
 
   async _createVault() {
@@ -521,7 +515,7 @@ export class VaultDialog extends Component {
       this.setState({
         loading: false
       });
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Note added to vault",
         type: "success",
         context: "global"
@@ -529,7 +523,7 @@ export class VaultDialog extends Component {
       this.close();
     } else {
       eSendEvent("vaultUpdated");
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Vault created successfully",
         type: "success",
         context: "global"
@@ -542,8 +536,8 @@ export class VaultDialog extends Component {
     db.vault
       .remove(this.state.note.id, this.password)
       .then(() => {
-        ToastEvent.show({
-          heading: "Note permanantly unlocked.",
+        ToastManager.show({
+          heading: "Note permanently unlocked.",
           type: "success",
           context: "global"
         });
@@ -557,7 +551,9 @@ export class VaultDialog extends Component {
   _openInEditor(note) {
     this.close();
     InteractionManager.runAfterInteractions(async () => {
-      eSendEvent(eOnLoadNote, note);
+      eSendEvent(eOnLoadNote, {
+        item: note
+      });
       if (!DDS.isTab) {
         tabBarRef.current?.goToPage(1);
       }
@@ -566,7 +562,7 @@ export class VaultDialog extends Component {
 
   async _copyNote(note) {
     Clipboard.setString(await convertNoteToText(note));
-    ToastEvent.show({
+    ToastManager.show({
       heading: "Note copied",
       type: "success",
       message: "Note has been copied to clipboard!",
@@ -598,7 +594,7 @@ export class VaultDialog extends Component {
         visible: true
       });
       setTimeout(() => {
-        ToastEvent.show({
+        ToastManager.show({
           heading: "Incorrect password",
           type: "error",
           context: "local"
@@ -613,13 +609,13 @@ export class VaultDialog extends Component {
     try {
       await BiometricService.resetCredentials();
       eSendEvent("vaultUpdated");
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Biometric unlocking disabled!",
         type: "success",
         context: "global"
       });
     } catch (e) {
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Failed to disable Biometric unlocking.",
         message: e.message,
         type: "success",
@@ -671,7 +667,8 @@ export class VaultDialog extends Component {
       <BaseDialog
         onShow={async () => {
           await sleep(100);
-          passInputRef.current?.focus();
+
+          this.passInputRef.current?.focus();
         }}
         statusBarTranslucent={false}
         onRequestClose={this.close}
@@ -706,7 +703,7 @@ export class VaultDialog extends Component {
             !this.state.revokeFingerprintAccess ? (
               <>
                 <Input
-                  fwdRef={passInputRef}
+                  fwdRef={this.passInputRef}
                   editable={!loading}
                   autoCapitalize="none"
                   testID={notesnook.ids.dialogs.vault.pwd}
@@ -723,7 +720,7 @@ export class VaultDialog extends Component {
                   }
                   onSubmit={() => {
                     changePassword
-                      ? changePassInputRef.current?.focus()
+                      ? this.confirmPassRef.current?.focus()
                       : this.onPress;
                   }}
                   autoComplete="password"
@@ -775,7 +772,7 @@ export class VaultDialog extends Component {
               <>
                 <Seperator half />
                 <Input
-                  ref={changePassInputRef}
+                  ref={this.confirmPassRef}
                   editable={!loading}
                   testID={notesnook.ids.dialogs.vault.changePwd}
                   autoCapitalize="none"
@@ -795,7 +792,7 @@ export class VaultDialog extends Component {
             {!novault ? (
               <View>
                 <Input
-                  fwdRef={passInputRef}
+                  fwdRef={this.passInputRef}
                   autoCapitalize="none"
                   testID={notesnook.ids.dialogs.vault.pwd}
                   onChangeText={(value) => {
@@ -806,13 +803,13 @@ export class VaultDialog extends Component {
                   returnKeyType="next"
                   secureTextEntry
                   onSubmit={() => {
-                    confirmPassRef.current?.focus();
+                    this.confirmPassRef.current?.focus();
                   }}
                   placeholder="Password"
                 />
 
                 <Input
-                  fwdRef={confirmPassRef}
+                  fwdRef={this.confirmPassRef}
                   autoCapitalize="none"
                   testID={notesnook.ids.dialogs.vault.pwdAlt}
                   secureTextEntry

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

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

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

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

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

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

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

@@ -19,37 +19,47 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useRef } from "react";
 import { Platform, StyleSheet, View } from "react-native";
+//@ts-ignore
+import { useThemeColors } from "@notesnook/theme";
 import Menu from "react-native-reanimated-material-menu";
 import { notesnook } from "../../../e2e/test.ids";
 import Navigation from "../../services/navigation";
 import SearchService from "../../services/search";
-import useNavigationStore from "../../stores/use-navigation-store";
+import {
+  HeaderRightButton,
+  RouteName
+} from "../../stores/use-navigation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 
-export const RightMenus = () => {
+export const RightMenus = ({
+  headerRightButtons,
+  renderedInRoute,
+  id,
+  onPressDefaultRightButton,
+  search,
+  onSearch
+}: {
+  headerRightButtons?: HeaderRightButton[];
+  renderedInRoute: RouteName;
+  id?: string;
+  onPressDefaultRightButton?: () => void;
+  search?: boolean;
+  onSearch?: () => void;
+}) => {
   const { colors } = useThemeColors();
   const { colors: contextMenuColors } = useThemeColors("contextMenu");
   const deviceMode = useSettingStore((state) => state.deviceMode);
-  const rightButtons = useNavigationStore((state) => state.headerRightButtons);
-  const currentScreen = useNavigationStore((state) => state.currentScreen.name);
-  const buttonAction = useNavigationStore((state) => state.buttonAction);
-  const menuRef = useRef();
+  const menuRef = useRef<Menu>(null);
 
   return (
     <View style={styles.rightBtnContainer}>
-      {!currentScreen.startsWith("Settings") ? (
+      {search ? (
         <IconButton
-          onPress={async () => {
-            SearchService.prepareSearch();
-            Navigation.navigate({
-              name: "Search"
-            });
-          }}
+          onPress={onSearch}
           testID="icon-search"
           name="magnify"
           color={colors.primary.paragraph}
@@ -59,9 +69,9 @@ export const RightMenus = () => {
 
       {deviceMode !== "mobile" ? (
         <Button
-          onPress={buttonAction}
+          onPress={onPressDefaultRightButton}
           testID={notesnook.ids.default.addBtn}
-          icon={currentScreen === "Trash" ? "delete" : "plus"}
+          icon={renderedInRoute === "Trash" ? "delete" : "plus"}
           iconSize={SIZE.xl}
           type="shade"
           hitSlop={{
@@ -82,7 +92,7 @@ export const RightMenus = () => {
         />
       ) : null}
 
-      {rightButtons && rightButtons.length > 0 ? (
+      {headerRightButtons && headerRightButtons.length > 0 ? (
         <Menu
           ref={menuRef}
           animationDuration={200}
@@ -104,7 +114,7 @@ export const RightMenus = () => {
             />
           }
         >
-          {rightButtons.map((item) => (
+          {headerRightButtons.map((item) => (
             <Button
               style={{
                 width: 150,

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

@@ -1,131 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import React, { useEffect, useState } from "react";
-import { Platform, View } from "react-native";
-import { db } from "../../common/database";
-import Notebook from "../../screens/notebook";
-import {
-  eSubscribeEvent,
-  eUnSubscribeEvent
-} from "../../services/event-manager";
-import useNavigationStore from "../../stores/use-navigation-store";
-import { useThemeColors } from "@notesnook/theme";
-import { eScrollEvent } from "../../utils/events";
-import { SIZE } from "../../utils/size";
-import Heading from "../ui/typography/heading";
-import { useCallback } from "react";
-import Tag from "../ui/tag";
-
-const titleState = {};
-
-export const Title = () => {
-  const { colors } = useThemeColors();
-  const currentScreen = useNavigationStore((state) => state.currentScreen);
-  const isNotebook = currentScreen.name === "Notebook";
-  const isTopic = currentScreen?.name === "TopicNotes";
-  const [hide, setHide] = useState(
-    isNotebook
-      ? typeof titleState[currentScreen.id] === "boolean"
-        ? titleState[currentScreen.id]
-        : true
-      : false
-  );
-  const isHidden = titleState[currentScreen.id];
-  const notebook =
-    isTopic && currentScreen.notebookId
-      ? db.notebooks?.notebook(currentScreen.notebookId)?.data
-      : null;
-  const title = currentScreen.title;
-  const isTag = currentScreen?.name === "TaggedNotes";
-
-  const onScroll = useCallback(
-    (data) => {
-      if (currentScreen.name !== "Notebook") {
-        setHide(false);
-        return;
-      }
-      if (data.y > 150) {
-        if (!hide) return;
-        titleState[currentScreen.id] = false;
-        setHide(false);
-      } else {
-        if (hide) return;
-        titleState[currentScreen.id] = true;
-        setHide(true);
-      }
-    },
-    [currentScreen.id, currentScreen.name, hide]
-  );
-
-  useEffect(() => {
-    if (currentScreen.name === "Notebook") {
-      let value =
-        typeof titleState[currentScreen.id] === "boolean"
-          ? titleState[currentScreen.id]
-          : true;
-      setHide(value);
-    } else {
-      setHide(titleState[currentScreen.id]);
-    }
-  }, [currentScreen.id, currentScreen.name]);
-
-  useEffect(() => {
-    eSubscribeEvent(eScrollEvent, onScroll);
-    return () => {
-      eUnSubscribeEvent(eScrollEvent, onScroll);
-    };
-  }, [hide, onScroll]);
-
-  function navigateToNotebook() {
-    if (!isTopic) return;
-    Notebook.navigate(notebook, true);
-  }
-  return (
-    <View
-      style={{
-        opacity: 1,
-        flexShrink: 1,
-        flexDirection: "row",
-        alignItems: "center"
-      }}
-    >
-      {!hide && !isHidden ? (
-        <Heading
-          onPress={navigateToNotebook}
-          numberOfLines={1}
-          size={SIZE.lg}
-          style={{
-            flexWrap: "wrap",
-            marginTop: Platform.OS === "ios" ? -1 : 0
-          }}
-          color={currentScreen.color || colors.primary.heading}
-        >
-          {isTag ? (
-            <Heading size={SIZE.xl} color={colors.primary.accent}>
-              #
-            </Heading>
-          ) : null}
-          {title}
-        </Heading>
-      ) : null}
-      <Tag visible={currentScreen.beta} text="BETA" />
-    </View>
-  );
-};

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

@@ -0,0 +1,103 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { useThemeColors } from "@notesnook/theme";
+import React, { useCallback, useEffect, useState } from "react";
+import { Platform } from "react-native";
+import {
+  eSubscribeEvent,
+  eUnSubscribeEvent
+} from "../../services/event-manager";
+import { eScrollEvent } from "../../utils/events";
+import { SIZE } from "../../utils/size";
+import Tag from "../ui/tag";
+import Heading from "../ui/typography/heading";
+
+export const Title = ({
+  title,
+  isHiddenOnRender,
+  accentColor,
+  isBeta,
+  renderedInRoute,
+  id
+}: {
+  title: string;
+  isHiddenOnRender?: boolean;
+  accentColor?: string;
+  isBeta?: boolean;
+  renderedInRoute: string;
+  id?: string;
+}) => {
+  const { colors } = useThemeColors();
+  const [visible, setVisible] = useState(isHiddenOnRender);
+  const isTag = title.startsWith("#");
+  const onScroll = useCallback(
+    (data: { x: number; y: number; id?: string; route: string }) => {
+      if (data.route !== "Notebook") return;
+
+      if (data.route !== renderedInRoute || data.id !== id) return;
+      if (data.y > 150) {
+        if (!visible) return;
+        setVisible(false);
+      } else {
+        if (visible) return;
+        setVisible(true);
+      }
+    },
+    [id, renderedInRoute, visible]
+  );
+
+  useEffect(() => {
+    eSubscribeEvent(eScrollEvent, onScroll);
+    return () => {
+      eUnSubscribeEvent(eScrollEvent, onScroll);
+    };
+  }, [visible, onScroll]);
+
+  return (
+    <>
+      {!visible ? (
+        <Heading
+          numberOfLines={1}
+          size={SIZE.lg}
+          style={{
+            flexWrap: "wrap",
+            marginTop: Platform.OS === "ios" ? -1 : 0
+          }}
+          color={accentColor || colors.primary.heading}
+        >
+          {isTag ? (
+            <Heading size={SIZE.xl} color={colors.primary.accent}>
+              #
+            </Heading>
+          ) : null}
+          {isTag ? title.slice(1) : title}{" "}
+          <Tag
+            visible={isBeta}
+            text="BETA"
+            style={{
+              backgroundColor: "transparent"
+            }}
+            textColor={colors.primary.accent}
+          />
+        </Heading>
+      ) : null}
+    </>
+  );
+};

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

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import Sodium from "@ammarahmed/react-native-sodium";
-import dataurl from "@notesnook/core/utils/dataurl";
+import dataurl from "@notesnook/core/dist/utils/dataurl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
 import { Platform, View } from "react-native";
@@ -32,23 +32,22 @@ import {
 import BaseDialog from "../dialog/base-dialog";
 import { IconButton } from "../ui/icon-button";
 import { ProgressBarComponent } from "../ui/svg/lazy";
-
+import type { ImageAttributes } from "@notesnook/editor/dist/extensions/image/index";
 const ImagePreview = () => {
   const { colors } = useThemeColors("dialog");
 
   const [visible, setVisible] = useState(false);
-  const [image, setImage] = useState("");
+  const [image, setImage] = useState<string>();
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     eSubscribeEvent("ImagePreview", open);
-
     return () => {
       eUnSubscribeEvent("ImagePreview", open);
     };
   }, []);
 
-  const open = async (image) => {
+  const open = async (image: ImageAttributes) => {
     setVisible(true);
     setLoading(true);
     setTimeout(async () => {
@@ -63,6 +62,7 @@ const ImagePreview = () => {
         });
       }
       if (!hash) return;
+      //@ts-ignore // FIX ME
       const uri = await downloadAttachment(hash, false, {
         silent: true,
         cache: true
@@ -74,7 +74,7 @@ const ImagePreview = () => {
   };
 
   const close = () => {
-    setImage(null);
+    setImage(undefined);
     setVisible(false);
   };
 
@@ -88,7 +88,7 @@ const ImagePreview = () => {
             backgroundColor: "black"
           }}
         >
-          {loading ? (
+          {loading || !image ? (
             <View
               style={{
                 flex: 1,

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

@@ -77,14 +77,9 @@ export const WelcomeNotice = () => {
             SettingsService.set({
               introCompleted: true
             });
-            Navigation.replace(
-              {
-                name: "Notes"
-              },
-              {
-                canGoBack: false
-              }
-            );
+            Navigation.replace("Notes", {
+              canGoBack: false
+            });
           }, 1000);
         }}
         style={{
@@ -106,14 +101,9 @@ export const WelcomeNotice = () => {
           SettingsService.set({
             introCompleted: true
           });
-          Navigation.replace(
-            {
-              name: "Notes"
-            },
-            {
-              canGoBack: false
-            }
-          );
+          Navigation.replace("Notes", {
+            canGoBack: false
+          });
           await sleep(1000);
           eSendEvent(eCloseLoading);
         }}

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

@@ -17,57 +17,39 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
-import { useThemeColors } from "@notesnook/theme";
 import { useMessageStore } from "../../../stores/use-message-store";
-import { ColorValues } from "../../../utils/colors";
+import { useSelectionStore } from "../../../stores/use-selection-store";
 import { Announcement } from "../../announcements/announcement";
 import { Card } from "../../list/card";
-import Paragraph from "../../ui/typography/paragraph";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { SIZE } from "../../../utils/size";
-import { useSelectionStore } from "../../../stores/use-selection-store";
+
+export type ListHeaderProps = {
+  noAnnouncement?: boolean;
+  color?: string;
+  messageCard?: boolean;
+  screen?: string;
+  shouldShow?: boolean;
+};
+
 export const Header = React.memo(
   ({
-    type,
     messageCard = true,
     color,
     shouldShow = false,
     noAnnouncement,
-    warning
-  }) => {
+    screen
+  }: ListHeaderProps) => {
     const { colors } = useThemeColors();
     const announcements = useMessageStore((state) => state.announcements);
     const selectionMode = useSelectionStore((state) => state.selectionMode);
 
     return selectionMode ? null : (
       <>
-        {warning ? (
-          <View
-            style={{
-              padding: 12,
-              backgroundColor: colors.error.background,
-              width: "95%",
-              alignSelf: "center",
-              borderRadius: 5,
-              flexDirection: "row",
-              alignItems: "center"
-            }}
-          >
-            <Icon
-              name="sync-alert"
-              size={SIZE.md}
-              color={colors.error.icon}
-              f
-            />
-            <Paragraph style={{ marginLeft: 5 }} color={colors.error.icon}>
-              {warning.title}
-            </Paragraph>
-          </View>
-        ) : announcements.length !== 0 && !noAnnouncement ? (
+        {announcements.length !== 0 && !noAnnouncement ? (
           <Announcement color={color || colors.primary.accent} />
-        ) : type === "search" ? null : !shouldShow ? (
+        ) : (screen as any) === "Search" ? null : !shouldShow ? (
           <View
             style={{
               marginBottom: 5,
@@ -78,11 +60,7 @@ export const Header = React.memo(
             }}
           >
             {messageCard ? (
-              <Card
-                color={
-                  ColorValues[color?.toLowerCase()] || colors.primary.accent
-                }
-              />
+              <Card color={color || colors.primary.accent} />
             ) : null}
           </View>
         ) : null}

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

@@ -17,27 +17,33 @@ 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 React from "react";
-import { View } from "react-native";
+import { Notebook } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
-import { useMenuStore } from "../../../stores/use-menu-store";
-import { ToastEvent } from "../../../services/event-manager";
-import { getTotalNotes } from "@notesnook/common";
+import React, { useState } from "react";
+import { View } from "react-native";
 import { db } from "../../../common/database";
+import { ToastManager } from "../../../services/event-manager";
+import { useMenuStore } from "../../../stores/use-menu-store";
 import { SIZE } from "../../../utils/size";
 import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import { getFormattedDate } from "@notesnook/common";
 
-export const NotebookHeader = ({ notebook, onEditNotebook }) => {
+export const NotebookHeader = ({
+  notebook,
+  onEditNotebook,
+  totalNotes = 0
+}: {
+  notebook: Notebook;
+  onEditNotebook: () => void;
+  totalNotes: number;
+}) => {
   const { colors } = useThemeColors();
   const [isPinnedToMenu, setIsPinnedToMenu] = useState(
     db.shortcuts.exists(notebook.id)
   );
   const setMenuPins = useMenuStore((state) => state.setMenuPins);
-  const totalNotes = getTotalNotes(notebook);
-  const shortcutRef = useRef();
 
   const onPinNotebook = async () => {
     try {
@@ -50,7 +56,7 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
             type: "notebook"
           }
         });
-        ToastEvent.show({
+        ToastManager.show({
           heading: "Shortcut created",
           type: "success"
         });
@@ -76,7 +82,7 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
       }}
     >
       <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
-        {new Date(notebook.dateEdited).toLocaleString()}
+        {getFormattedDate(notebook.dateModified, "date-time")}
       </Paragraph>
       <View
         style={{
@@ -103,7 +109,6 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
             name={isPinnedToMenu ? "link-variant-off" : "link-variant"}
             onPress={onPinNotebook}
             tooltipText={"Create shortcut in side menu"}
-            fwdRef={shortcutRef}
             customStyle={{
               marginRight: 15,
               width: 40,
@@ -138,15 +143,15 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
         style={{
           marginTop: 10,
           fontStyle: "italic",
-          fontFamily: null
+          fontFamily: undefined
         }}
         size={SIZE.xs}
         color={colors.secondary.paragraph}
       >
-        {notebook.topics.length === 1
+        {/* {notebook.topics.length === 1
           ? "1 topic"
           : `${notebook.topics.length} topics`}
-        ,{" "}
+        ,{" "} */}
         {notebook && totalNotes > 1
           ? totalNotes + " notes"
           : totalNotes === 1

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

@@ -17,65 +17,57 @@ 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 { TouchableOpacity, useWindowDimensions, View } from "react-native";
+import { GroupHeader, GroupOptions, ItemType } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
-import { useSettingStore } from "../../../stores/use-setting-store";
-import {
-  eSendEvent,
-  eSubscribeEvent,
-  eUnSubscribeEvent,
-  presentSheet
-} from "../../../services/event-manager";
+import React from "react";
+import { TouchableOpacity, View, useWindowDimensions } from "react-native";
+import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
+import { presentSheet } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
-import { GROUP } from "../../../utils/constants";
+import { RouteName } from "../../../stores/use-navigation-store";
 import { ColorValues } from "../../../utils/colors";
-import { db } from "../../../common/database";
-import { eOpenJumpToDialog } from "../../../utils/events";
+import { GROUP } from "../../../utils/constants";
 import { SIZE } from "../../../utils/size";
-import { IconButton } from "../../ui/icon-button";
-import { Button } from "../../ui/button";
 import Sort from "../../sheets/sort";
+import { Button } from "../../ui/button";
+import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
-import { useCallback } from "react";
 
-export const SectionHeader = React.memo(
-  function SectionHeader({ item, index, type, color, screen }) {
+type SectionHeaderProps = {
+  item: GroupHeader;
+  index: number;
+  dataType: ItemType;
+  color?: string;
+  screen?: RouteName;
+  groupOptions: GroupOptions;
+  onOpenJumpToDialog: () => void;
+};
+
+export const SectionHeader = React.memo<
+  React.FunctionComponent<SectionHeaderProps>
+>(
+  function SectionHeader({
+    item,
+    index,
+    dataType,
+    color,
+    screen,
+    groupOptions,
+    onOpenJumpToDialog
+  }: SectionHeaderProps) {
     const { colors } = useThemeColors();
     const { fontScale } = useWindowDimensions();
-    const [groupOptions, setGroupOptions] = useState(
-      db.settings?.getGroupOptions(type)
-    );
     let groupBy = Object.keys(GROUP).find(
-      (key) => GROUP[key] === groupOptions.groupBy
+      (key) => GROUP[key as keyof typeof GROUP] === groupOptions.groupBy
     );
-    const jumpToRef = useRef();
-    const sortRef = useRef();
-    const compactModeRef = useRef();
-
-    const notebooksListMode = useSettingStore(
-      (state) => state.settings.notebooksListMode
+    const isCompactModeEnabled = useIsCompactModeEnabled(
+      dataType as "note" | "notebook"
     );
-    const notesListMode = useSettingStore(
-      (state) => state.settings.notesListMode
-    );
-    const listMode = type === "notebooks" ? notebooksListMode : notesListMode;
 
     groupBy = !groupBy
       ? "Default"
       : groupBy.slice(0, 1).toUpperCase() + groupBy.slice(1, groupBy.length);
 
-    const onUpdate = useCallback(() => {
-      setGroupOptions({ ...db.settings?.getGroupOptions(type) });
-    }, [type]);
-
-    useEffect(() => {
-      eSubscribeEvent("groupOptionsUpdate", onUpdate);
-      return () => {
-        eUnSubscribeEvent("groupOptionsUpdate", onUpdate);
-      };
-    }, [onUpdate]);
-
     return (
       <View
         style={{
@@ -93,9 +85,8 @@ export const SectionHeader = React.memo(
       >
         <TouchableOpacity
           onPress={() => {
-            eSendEvent(eOpenJumpToDialog, type);
+            onOpenJumpToDialog();
           }}
-          ref={jumpToRef}
           activeOpacity={0.9}
           hitSlop={{ top: 10, left: 10, right: 30, bottom: 15 }}
           style={{
@@ -104,7 +95,10 @@ export const SectionHeader = React.memo(
           }}
         >
           <Heading
-            color={ColorValues[color?.toLowerCase()] || colors.primary.accent}
+            color={
+              ColorValues[color?.toLowerCase() as keyof typeof ColorValues] ||
+              colors.primary.accent
+            }
             size={SIZE.sm}
             style={{
               minWidth: 60,
@@ -126,13 +120,13 @@ export const SectionHeader = React.memo(
             <>
               <Button
                 onPress={() => {
+                  console.log("Opening Sort sheet", screen, dataType);
                   presentSheet({
-                    component: <Sort screen={screen} type={type} />
+                    component: <Sort screen={screen} type={dataType} />
                   });
                 }}
                 hidden={screen === "Reminders"}
                 tooltipText="Change sorting of items in list"
-                fwdRef={sortRef}
                 title={groupBy}
                 icon={
                   groupOptions.sortDirection === "asc"
@@ -145,7 +139,9 @@ export const SectionHeader = React.memo(
                   paddingHorizontal: 0,
                   backgroundColor: "transparent",
                   marginRight:
-                    type === "notes" || type === "home" || type === "notebooks"
+                    dataType === "note" ||
+                    screen === "Notes" ||
+                    dataType === "notebook"
                       ? 10
                       : 0
                 }}
@@ -159,24 +155,26 @@ export const SectionHeader = React.memo(
                   height: 25
                 }}
                 hidden={
-                  type !== "notes" && type !== "notebooks" && type !== "home"
+                  dataType !== "note" &&
+                  dataType !== "notebook" &&
+                  screen !== "Notes"
                 }
                 testID="icon-compact-mode"
                 tooltipText={
-                  listMode == "compact"
+                  isCompactModeEnabled
                     ? "Switch to normal mode"
                     : "Switch to compact mode"
                 }
-                fwdRef={compactModeRef}
                 color={colors.secondary.icon}
-                name={listMode == "compact" ? "view-list" : "view-list-outline"}
+                name={isCompactModeEnabled ? "view-list" : "view-list-outline"}
                 onPress={() => {
-                  let settings = {};
-                  settings[
-                    type !== "notebooks" ? "notesListMode" : "notebooksListMode"
-                  ] = listMode === "normal" ? "compact" : "normal";
-
-                  SettingsService.set(settings);
+                  SettingsService.set({
+                    [dataType !== "notebook"
+                      ? "notesListMode"
+                      : "notebooksListMode"]: !isCompactModeEnabled
+                      ? "compact"
+                      : "normal"
+                  });
                 }}
                 size={SIZE.lg - 2}
               />
@@ -188,6 +186,10 @@ export const SectionHeader = React.memo(
   },
   (prev, next) => {
     if (prev.item.title !== next.item.title) return false;
+    if (prev.groupOptions?.groupBy !== next.groupOptions.groupBy) return false;
+    if (prev.groupOptions?.sortDirection !== next.groupOptions.sortDirection)
+      return false;
+    if (prev.groupOptions?.sortBy !== next.groupOptions.sortBy) return false;
 
     return true;
   }

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

@@ -17,21 +17,27 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { getUpcomingReminder } from "@notesnook/core/collections/reminders";
-import { decode, EntityLevel } from "entities";
+import {
+  BaseTrashItem,
+  Color,
+  Note,
+  Reminder,
+  TrashItem
+} from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
+import { EntityLevel, decode } from "entities";
 import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../../e2e/test.ids";
-import { db } from "../../../common/database";
-import Notebook from "../../../screens/notebook";
+import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
+import NotebookScreen from "../../../screens/notebook";
 import { TaggedNotes } from "../../../screens/notes/tagged";
-import { TopicNotes } from "../../../screens/notes/topic-notes";
+import { useEditorStore } from "../../../stores/use-editor-store";
 import useNavigationStore from "../../../stores/use-navigation-store";
 import { useRelationStore } from "../../../stores/use-relation-store";
-import { useThemeColors } from "@notesnook/theme";
-import { ColorValues } from "../../../utils/colors";
 import { SIZE } from "../../../utils/size";
+
 import { Properties } from "../../properties";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
@@ -39,75 +45,45 @@ import { ReminderTime } from "../../ui/reminder-time";
 import { TimeSince } from "../../ui/time-since";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
+import {
+  NotebooksWithDateEdited,
+  TagsWithDateEdited
+} from "../../../stores/resolve-items";
 
-function navigateToTag(item) {
-  const tag = db.tags.tag(item.id);
-  if (!tag) return;
-  TaggedNotes.navigate(tag, true);
-}
-
-const showActionSheet = (item) => {
-  Properties.present(item);
+type NoteItemProps = {
+  item: Note | BaseTrashItem<Note>;
+  index: number;
+  tags?: TagsWithDateEdited;
+  notebooks?: NotebooksWithDateEdited;
+  color?: Color;
+  reminder?: Reminder;
+  attachmentsCount: number;
+  date: number;
+  isTrash?: boolean;
+  noOpen?: boolean;
 };
 
-function getNotebook(item) {
-  const isTrash = item.type === "trash";
-  const currentId = useNavigationStore.getState().currentScreen.id;
-  if (isTrash) return [];
-  const items = [];
-  const notebooks = db.relations.to(item, "notebook") || [];
-
-  for (let notebook of notebooks) {
-    if (items.length > 1) break;
-    if (notebook.id === currentId) continue;
-    items.push(notebook);
-  }
-
-  if (item.notebooks) {
-    for (let nb of item.notebooks) {
-      if (items.length > 1) break;
-      const notebook = db.notebooks?.notebook(nb.id)?.data;
-      if (!notebook) continue;
-      for (let topicId of nb.topics) {
-        if (items.length > 1) break;
-        if (topicId === currentId) continue;
-        const topic = notebook.topics.find((t) => t.id === topicId);
-        if (!topic) continue;
-        items.push(topic);
-      }
-    }
-  }
-  return items;
-}
-
-function getTags(item) {
-  const noteTags = item.tags?.slice(0, 3) || [];
-  const tags = [];
-  for (const tagName of noteTags) {
-    const tag = db.tags.tag(tagName);
-    if (!tag) continue;
-    tags.push(tag);
-  }
-  return tags;
-}
-
 const NoteItem = ({
   item,
   isTrash,
-  dateBy = "dateCreated",
+  date,
+  color,
+  notebooks,
+  reminder,
+  tags,
+  attachmentsCount,
   noOpen = false
-}) => {
+}: NoteItemProps) => {
+  const isEditingNote = useEditorStore(
+    (state) => state.currentEditingNote === item.id
+  );
   const { colors } = useThemeColors();
-  const compactMode = useIsCompactModeEnabled(item);
-  const attachmentCount = db.attachments?.ofNote(item.id, "all")?.length || 0;
+  const compactMode = useIsCompactModeEnabled(
+    (item as TrashItem).itemType || item.type
+  );
   const _update = useRelationStore((state) => state.updater);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const notebooks = React.useMemo(() => getNotebook(item), [item, _update]);
-  const reminders = db.relations.from(item, "reminder");
-  const reminder = getUpcomingReminder(reminders);
-  const noteColor = ColorValues[item.color?.toLowerCase()];
-  const tags = getTags(item);
+  const primaryColors = isEditingNote ? colors.selected : colors.primary;
+
   return (
     <>
       <View
@@ -127,44 +103,45 @@ const NoteItem = ({
               flexWrap: "wrap"
             }}
           >
-            {notebooks?.map((item) => (
-              <Button
-                title={
-                  item.title.length > 25
-                    ? item.title.slice(0, 25) + "..."
-                    : item.title
-                }
-                tooltipText={item.title}
-                key={item.id}
-                height={25}
-                icon={item.type === "topic" ? "bookmark" : "book-outline"}
-                type="grayBg"
-                fontSize={SIZE.xs}
-                iconSize={SIZE.sm}
-                textStyle={{
-                  marginRight: 0
-                }}
-                style={{
-                  borderRadius: 5,
-                  marginRight: 5,
-                  borderWidth: 0.5,
-                  borderColor: colors.primary.border,
-                  paddingHorizontal: 6,
-                  marginBottom: 5
-                }}
-                onPress={() => {
-                  if (item.type === "topic") {
-                    TopicNotes.navigate(item, true);
-                  } else {
-                    Notebook.navigate(item);
+            {notebooks?.items
+              ?.filter(
+                (item) =>
+                  item.id !== useNavigationStore.getState().focusedRouteId
+              )
+              .map((item) => (
+                <Button
+                  title={
+                    item.title.length > 25
+                      ? item.title.slice(0, 25) + "..."
+                      : item.title
                   }
-                }}
-              />
-            ))}
+                  tooltipText={item.title}
+                  key={item.id}
+                  height={25}
+                  icon={item.type === "notebook" ? "bookmark" : "book-outline"}
+                  type="grayBg"
+                  fontSize={SIZE.xs}
+                  iconSize={SIZE.sm}
+                  textStyle={{
+                    marginRight: 0
+                  }}
+                  style={{
+                    borderRadius: 5,
+                    marginRight: 5,
+                    borderWidth: 0.5,
+                    borderColor: primaryColors.border,
+                    paddingHorizontal: 6,
+                    marginBottom: 5
+                  }}
+                  onPress={() => {
+                    NotebookScreen.navigate(item, true);
+                  }}
+                />
+              ))}
 
             <ReminderTime
               reminder={reminder}
-              color={noteColor}
+              color={color?.colorCode}
               onPress={() => {
                 Properties.present(reminder);
               }}
@@ -178,26 +155,22 @@ const NoteItem = ({
         {compactMode ? (
           <Paragraph
             numberOfLines={1}
-            color={
-              ColorValues[item.color?.toLowerCase()] || colors.primary.heading
-            }
-            style={{
-              flexWrap: "wrap"
-            }}
+            color={color?.colorCode || primaryColors.heading}
             size={SIZE.sm}
+            style={{
+              paddingRight: 10
+            }}
           >
             {item.title}
           </Paragraph>
         ) : (
           <Heading
             numberOfLines={1}
-            color={
-              ColorValues[item.color?.toLowerCase()] || colors.primary.heading
-            }
-            style={{
-              flexWrap: "wrap"
-            }}
+            color={color?.colorCode || primaryColors.heading}
             size={SIZE.md}
+            style={{
+              paddingRight: 10
+            }}
           >
             {item.title}
           </Heading>
@@ -208,6 +181,7 @@ const NoteItem = ({
             style={{
               flexWrap: "wrap"
             }}
+            color={primaryColors.paragraph}
             numberOfLines={2}
           >
             {decode(item.headline, {
@@ -245,13 +219,11 @@ const NoteItem = ({
                     color: colors.secondary.paragraph,
                     marginRight: 6
                   }}
-                  time={item[dateBy]}
-                  updateFrequency={
-                    Date.now() - item[dateBy] < 60000 ? 2000 : 60000
-                  }
+                  time={date}
+                  updateFrequency={Date.now() - date < 60000 ? 2000 : 60000}
                 />
 
-                {attachmentCount > 0 ? (
+                {attachmentsCount > 0 ? (
                   <View
                     style={{
                       flexDirection: "row",
@@ -262,13 +234,13 @@ const NoteItem = ({
                     <Icon
                       name="attachment"
                       size={SIZE.md}
-                      color={colors.primary.icon}
+                      color={primaryColors.icon}
                     />
                     <Paragraph
                       color={colors.secondary.paragraph}
                       size={SIZE.xs}
                     >
-                      {attachmentCount}
+                      {attachmentsCount}
                     </Paragraph>
                   </View>
                 ) : null}
@@ -281,10 +253,7 @@ const NoteItem = ({
                     style={{
                       marginRight: 6
                     }}
-                    color={
-                      ColorValues[item.color?.toLowerCase()] ||
-                      colors.primary.accent
-                    }
+                    color={color?.colorCode || primaryColors.accent}
                   />
                 ) : null}
 
@@ -296,7 +265,7 @@ const NoteItem = ({
                     style={{
                       marginRight: 6
                     }}
-                    color={colors.primary.icon}
+                    color={primaryColors.icon}
                   />
                 ) : null}
 
@@ -313,10 +282,10 @@ const NoteItem = ({
                 ) : null}
 
                 {!isTrash && !compactMode && tags
-                  ? tags.map((item) =>
+                  ? tags.items?.map((item) =>
                       item.id ? (
                         <Button
-                          title={"#" + item.alias}
+                          title={"#" + item.title}
                           key={item.id}
                           height={23}
                           type="gray"
@@ -330,9 +299,9 @@ const NoteItem = ({
                             paddingHorizontal: 6,
                             marginRight: 4,
                             zIndex: 10,
-                            maxWidth: tags.length > 1 ? 130 : null
+                            maxWidth: tags.items?.length > 1 ? 130 : null
                           }}
-                          onPress={() => navigateToTag(item)}
+                          onPress={() => TaggedNotes.navigate(item, true)}
                         />
                       ) : null
                     )
@@ -354,13 +323,14 @@ const NoteItem = ({
                 </Paragraph>
 
                 <Paragraph
-                  color={colors.primary.accent}
+                  color={primaryColors.accent}
                   size={SIZE.xs}
                   style={{
                     marginRight: 6
                   }}
                 >
-                  {item.itemType[0].toUpperCase() + item.itemType.slice(1)}
+                  {(item as TrashItem).itemType[0].toUpperCase() +
+                    (item as TrashItem).itemType.slice(1)}
                 </Paragraph>
               </>
             )}
@@ -416,18 +386,18 @@ const NoteItem = ({
                 color: colors.secondary.paragraph,
                 marginRight: 6
               }}
-              time={item[dateBy]}
-              updateFrequency={Date.now() - item[dateBy] < 60000 ? 2000 : 60000}
+              time={date}
+              updateFrequency={Date.now() - date < 60000 ? 2000 : 60000}
             />
           </>
         ) : null}
 
         <IconButton
           testID={notesnook.listitem.menu}
-          color={colors.primary.paragraph}
+          color={primaryColors.paragraph}
           name="dots-horizontal"
           size={SIZE.xl}
-          onPress={() => !noOpen && showActionSheet(item, isTrash)}
+          onPress={() => !noOpen && Properties.present(item)}
           customStyle={{
             justifyContent: "center",
             height: 35,

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

@@ -1,135 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import React from "react";
-import NoteItem from ".";
-import { notesnook } from "../../../../e2e/test.ids";
-import { db } from "../../../common/database";
-import { DDS } from "../../../services/device-detection";
-import {
-  eSendEvent,
-  hideSheet,
-  openVault,
-  presentSheet
-} from "../../../services/event-manager";
-import { useEditorStore } from "../../../stores/use-editor-store";
-import { useSelectionStore } from "../../../stores/use-selection-store";
-import { eOnLoadNote, eShowMergeDialog } from "../../../utils/events";
-import { tabBarRef } from "../../../utils/global-refs";
-import { presentDialog } from "../../dialog/functions";
-import NotePreview from "../../note-history/preview";
-import SelectionWrapper from "../selection-wrapper";
-
-const present = () =>
-  presentDialog({
-    title: "Note not synced",
-    negativeText: "Ok",
-    paragraph: "Please sync again to open this note for editing"
-  });
-
-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()) {
-      present();
-      return;
-    }
-  } else {
-    if (!db.trash.synced(item.id)) {
-      present();
-      return;
-    }
-  }
-  const { selectedItemsList, selectionMode, clearSelection } =
-    useSelectionStore.getState();
-
-  if (selectedItemsList.length > 0 && selectionMode) {
-    setSelectedItem && setSelectedItem(_note);
-    return;
-  } else {
-    clearSelection();
-  }
-
-  if (_note.conflicted) {
-    eSendEvent(eShowMergeDialog, _note);
-    return;
-  }
-
-  if (_note.locked) {
-    openVault({
-      item: _note,
-      novault: true,
-      locked: true,
-      goToEditor: true,
-      title: "Open note",
-      description: "Unlock note to open it in editor."
-    });
-    return;
-  }
-  if (isTrash) {
-    const content = await db.content.get(item.contentId);
-    presentSheet({
-      component: (
-        <NotePreview note={item} content={{ type: "tiptap", data: content }} />
-      )
-    });
-  } else {
-    useEditorStore.getState().setReadonly(_note?.readonly);
-    eSendEvent(eOnLoadNote, _note);
-    if (!DDS.isTab) {
-      tabBarRef.current?.goToPage(1);
-    }
-  }
-};
-
-export const NoteWrapper = React.memo(
-  function NoteWrapper({ item, index, dateBy, isSheet }) {
-    const isTrash = item.type === "trash";
-    const setSelectedItem = useSelectionStore((state) => state.setSelectedItem);
-
-    return (
-      <SelectionWrapper
-        index={index}
-        height={100}
-        testID={notesnook.ids.note.get(index)}
-        onPress={() => openNote(item, isTrash, setSelectedItem, isSheet)}
-        isSheet={isSheet}
-        item={item}
-      >
-        <NoteItem item={item} dateBy={dateBy} isTrash={isTrash} />
-      </SelectionWrapper>
-    );
-  },
-  (prev, next) => {
-    if (prev.dateBy !== next.dateBy) {
-      return false;
-    }
-    if (prev.item?.dateEdited !== next.item?.dateEdited) {
-      return false;
-    }
-
-    if (prev.item !== next.item) {
-      return false;
-    }
-
-    return true;
-  }
-);

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

@@ -0,0 +1,171 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { BaseTrashItem, Color, Note, Reminder } from "@notesnook/core";
+import React from "react";
+import NoteItem from ".";
+import { notesnook } from "../../../../e2e/test.ids";
+import { db } from "../../../common/database";
+import { DDS } from "../../../services/device-detection";
+import {
+  eSendEvent,
+  hideSheet,
+  openVault,
+  presentSheet
+} from "../../../services/event-manager";
+import { useEditorStore } from "../../../stores/use-editor-store";
+import { useSelectionStore } from "../../../stores/use-selection-store";
+import { eOnLoadNote, eShowMergeDialog } from "../../../utils/events";
+import { tabBarRef } from "../../../utils/global-refs";
+
+import NotePreview from "../../note-history/preview";
+import SelectionWrapper from "../selection-wrapper";
+import {
+  NotebooksWithDateEdited,
+  TagsWithDateEdited
+} from "../../../stores/resolve-items";
+
+export const openNote = async (
+  item: Note,
+  isTrash?: boolean,
+  isSheet?: boolean
+) => {
+  let note: Note = item;
+  if (isSheet) hideSheet();
+
+  if (!isTrash) {
+    note = (await db.notes.note(item.id)) as Note;
+  }
+  if (useSelectionStore.getState().selectionMode === item.type) {
+    const {
+      selectedItemsList,
+      selectionMode,
+      clearSelection,
+      setSelectedItem
+    } = useSelectionStore.getState();
+
+    if (selectedItemsList.length > 0 && selectionMode === item.type) {
+      setSelectedItem(note.id);
+    } else {
+      clearSelection();
+    }
+    return;
+  }
+
+  if (note.conflicted) {
+    eSendEvent(eShowMergeDialog, note);
+    return;
+  }
+
+  if (note.locked) {
+    openVault({
+      item: note,
+      novault: true,
+      locked: true,
+      goToEditor: true,
+      title: "Open note",
+      description: "Unlock note to open it in editor."
+    });
+    return;
+  }
+  if (isTrash) {
+    if (!note.contentId) return;
+
+    const content = await db.content.get(note.contentId as string);
+    presentSheet({
+      component: (
+        <NotePreview note={item} content={{ type: "tiptap", data: content }} />
+      )
+    });
+  } else {
+    if (note?.readonly) {
+      useEditorStore.getState().setReadonly(note?.readonly);
+    }
+    eSendEvent(eOnLoadNote, {
+      item: note
+    });
+    if (!DDS.isTab) {
+      tabBarRef.current?.goToPage(1);
+    }
+  }
+};
+
+type NoteWrapperProps = {
+  item: Note | BaseTrashItem<Note>;
+  index: number;
+  tags?: TagsWithDateEdited;
+  notebooks?: NotebooksWithDateEdited;
+  color?: Color;
+  reminder?: Reminder;
+  attachmentsCount: number;
+  date: number;
+  isRenderedInActionSheet: boolean;
+};
+
+export const NoteWrapper = React.memo<
+  React.FunctionComponent<NoteWrapperProps>
+>(
+  function NoteWrapper({
+    item,
+    index,
+    isRenderedInActionSheet,
+    ...restProps
+  }: NoteWrapperProps) {
+    const isTrash = item.type === "trash";
+
+    return (
+      <SelectionWrapper
+        testID={notesnook.ids.note.get(index)}
+        onPress={() => openNote(item as Note, isTrash, isRenderedInActionSheet)}
+        isSheet={isRenderedInActionSheet}
+        item={item}
+        color={restProps.color?.colorCode}
+      >
+        <NoteItem {...restProps} item={item} index={index} isTrash={isTrash} />
+      </SelectionWrapper>
+    );
+  },
+  (prev, next) => {
+    if (prev.date !== next.date) {
+      return false;
+    }
+
+    if (
+      prev.tags?.dateEdited !== next.tags?.dateEdited ||
+      prev.tags?.items?.length !== next.tags?.items?.length
+    )
+      return false;
+
+    if (
+      prev.notebooks?.dateEdited !== next.notebooks?.dateEdited ||
+      prev.notebooks?.items?.length !== next.notebooks?.items?.length
+    )
+      return false;
+
+    if (prev.color !== next.color) return false;
+    if (prev.reminder?.id !== next.reminder?.id) return false;
+    if (prev.attachmentsCount !== next.attachmentsCount) return false;
+    if (prev.item?.dateModified !== next.item?.dateModified) {
+      return false;
+    }
+    if (prev.item?.id !== next.item?.id) return false;
+
+    return true;
+  }
+);

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

@@ -17,41 +17,38 @@ 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 { getFormattedDate } from "@notesnook/common";
+import { BaseTrashItem, Notebook, TrashItem } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../../e2e/test.ids";
-import { TopicNotes } from "../../../screens/notes/topic-notes";
-import { useSelectionStore } from "../../../stores/use-selection-store";
-import { useThemeColors } from "@notesnook/theme";
+import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
-import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { getFormattedDate } from "@notesnook/common";
-import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 
-const showActionSheet = (item) => {
-  Properties.present(item);
-};
-
-const navigateToTopic = (topic) => {
-  if (useSelectionStore.getState().selectedItemsList.length > 0) return;
-  TopicNotes.navigate(topic, true);
+type NotebookItemProps = {
+  item: Notebook | BaseTrashItem<Notebook>;
+  totalNotes: number;
+  date: number;
+  index: number;
+  isTrash: boolean;
 };
 
 export const NotebookItem = ({
   item,
-  isTopic = false,
   isTrash,
-  dateBy,
+  date,
   totalNotes
-}) => {
+}: NotebookItemProps) => {
   const { colors } = useThemeColors();
-  const compactMode = useIsCompactModeEnabled(item);
-  const topics = item.topics?.slice(0, 3) || [];
+  const compactMode = useIsCompactModeEnabled(
+    (item as TrashItem).itemType || item.type
+  );
 
   return (
     <>
@@ -83,7 +80,7 @@ export const NotebookItem = ({
           </Heading>
         )}
 
-        {isTopic || !item.description || compactMode ? null : (
+        {!item.description || compactMode ? null : (
           <Paragraph
             size={SIZE.sm}
             numberOfLines={2}
@@ -95,42 +92,6 @@ export const NotebookItem = ({
           </Paragraph>
         )}
 
-        {isTopic || compactMode ? null : (
-          <View
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              flexWrap: "wrap"
-            }}
-          >
-            {topics.map((topic) => (
-              <Button
-                title={topic.title}
-                key={topic.id}
-                height={null}
-                textStyle={{
-                  marginRight: 0
-                }}
-                type="grayBg"
-                fontSize={SIZE.xs}
-                icon="bookmark-outline"
-                iconSize={SIZE.sm}
-                style={{
-                  borderRadius: 5,
-                  maxWidth: 120,
-                  borderWidth: 0.5,
-                  paddingVertical: 2.5,
-                  borderColor: colors.primary.border,
-                  paddingHorizontal: 6,
-                  marginVertical: 5,
-                  marginRight: 5
-                }}
-                onPress={() => navigateToTopic(topic)}
-              />
-            ))}
-          </View>
-        )}
-
         {!compactMode ? (
           <View
             style={{
@@ -152,7 +113,9 @@ export const NotebookItem = ({
                   }}
                 >
                   {"Deleted on " +
-                    new Date(item.dateDeleted).toISOString().slice(0, 10)}
+                    new Date((item as TrashItem).dateDeleted)
+                      .toISOString()
+                      .slice(0, 10)}
                 </Paragraph>
                 <Paragraph
                   color={colors.primary.accent}
@@ -162,7 +125,8 @@ export const NotebookItem = ({
                     marginRight: 6
                   }}
                 >
-                  {item.itemType[0].toUpperCase() + item.itemType.slice(1)}
+                  {(item as TrashItem).itemType[0].toUpperCase() +
+                    (item as TrashItem).itemType.slice(1)}
                 </Paragraph>
               </>
             ) : (
@@ -173,7 +137,7 @@ export const NotebookItem = ({
                   marginRight: 6
                 }}
               >
-                {getFormattedDate(item[dateBy], "date")}
+                {getFormattedDate(date, "date")}
               </Paragraph>
             )}
             <Paragraph
@@ -233,7 +197,7 @@ export const NotebookItem = ({
           name="dots-horizontal"
           testID={notesnook.ids.notebook.menu}
           size={SIZE.xl}
-          onPress={() => showActionSheet(item)}
+          onPress={() => Properties.present(item)}
           customStyle={{
             justifyContent: "center",
             height: 35,

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

@@ -17,41 +17,24 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { BaseTrashItem, Notebook } from "@notesnook/core";
 import React from "react";
 import { NotebookItem } from ".";
-import { TopicNotes } from "../../../screens/notes/topic-notes";
-import { ToastEvent } from "../../../services/event-manager";
+import { db } from "../../../common/database";
+import NotebookScreen from "../../../screens/notebook";
+import { ToastManager } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { useSelectionStore } from "../../../stores/use-selection-store";
 import { useTrashStore } from "../../../stores/use-trash-store";
-import { db } from "../../../common/database";
 import { presentDialog } from "../../dialog/functions";
 import SelectionWrapper from "../selection-wrapper";
 
-const navigateToNotebook = (item, canGoBack) => {
-  if (!item) return;
-
-  Navigation.navigate(
-    {
-      title: item.title,
-      name: "Notebook",
-      id: item.id,
-      type: "notebook"
-    },
-    {
-      title: item.title,
-      item: item,
-      canGoBack
-    }
-  );
-};
-
-export const openNotebookTopic = (item) => {
+export const openNotebook = (item: Notebook | BaseTrashItem<Notebook>) => {
   const isTrash = item.type === "trash";
   const { selectedItemsList, setSelectedItem, selectionMode, clearSelection } =
     useSelectionStore.getState();
-  if (selectedItemsList.length > 0 && selectionMode) {
-    setSelectedItem(item);
+  if (selectedItemsList.length > 0 && selectionMode === item.type) {
+    setSelectedItem(item.id);
     return;
   } else {
     clearSelection();
@@ -59,25 +42,25 @@ export const openNotebookTopic = (item) => {
 
   if (isTrash) {
     presentDialog({
-      title: `Restore ${item.itemType}`,
-      paragraph: `Restore or delete ${item.itemType} forever`,
+      title: `Restore notebook`,
+      paragraph: `Restore or delete notebook forever`,
       positiveText: "Restore",
       negativeText: "Delete",
       positivePress: async () => {
         await db.trash.restore(item.id);
         Navigation.queueRoutesForUpdate();
-        useSelectionStore.getState().setSelectionMode(false);
-        ToastEvent.show({
+        useSelectionStore.getState().setSelectionMode(undefined);
+        ToastManager.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",
+        useTrashStore.getState().refresh();
+        useSelectionStore.getState().setSelectionMode(undefined);
+        ToastManager.show({
+          heading: "Permanently deleted items",
           type: "success",
           context: "local"
         });
@@ -85,29 +68,30 @@ export const openNotebookTopic = (item) => {
     });
     return;
   }
-  if (item.type === "topic") {
-    TopicNotes.navigate(item, true);
-  } else {
-    navigateToNotebook(item, true);
-  }
+  NotebookScreen.navigate(item, true);
+};
+
+type NotebookWrapperProps = {
+  item: Notebook | BaseTrashItem<Notebook>;
+  totalNotes: number;
+  date: number;
+  index: number;
 };
 
 export const NotebookWrapper = React.memo(
-  function NotebookWrapper({ item, index, dateBy, totalNotes }) {
+  function NotebookWrapper({
+    item,
+    index,
+    date,
+    totalNotes
+  }: NotebookWrapperProps) {
     const isTrash = item.type === "trash";
 
     return (
-      <SelectionWrapper
-        pinned={item.pinned}
-        index={index}
-        onPress={() => openNotebookTopic(item)}
-        height={item.type === "topic" ? 80 : 110}
-        item={item}
-      >
+      <SelectionWrapper onPress={() => openNotebook(item)} item={item}>
         <NotebookItem
-          isTopic={item.type === "topic"}
           item={item}
-          dateBy={dateBy}
+          date={date}
           index={index}
           isTrash={isTrash}
           totalNotes={totalNotes}
@@ -117,17 +101,9 @@ export const NotebookWrapper = React.memo(
   },
   (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;
-    }
-
-    if (prev.item?.dateEdited !== next.item?.dateEdited) {
-      return false;
-    }
-    if (JSON.stringify(prev.item) !== JSON.stringify(next.item)) {
-      return false;
-    }
+    if (prev.date !== next.date) return false;
+    if (prev.item?.dateModified !== next.item?.dateModified) return false;
+    if (prev.item?.id !== next.item?.id) return false;
 
     return true;
   }

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

@@ -16,20 +16,21 @@ 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 { Reminder } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../../e2e/test.ids";
-import type { Reminder } from "../../../services/notifications";
-import { useThemeColors } from "@notesnook/theme";
+import { useSelectionStore } from "../../../stores/use-selection-store";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
+import ReminderSheet from "../../sheets/reminder";
 import { IconButton } from "../../ui/icon-button";
+import { ReminderTime } from "../../ui/reminder-time";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import SelectionWrapper from "../selection-wrapper";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import ReminderSheet from "../../sheets/reminder";
-import { ReminderTime } from "../../ui/reminder-time";
 
 const ReminderItem = React.memo(
   ({
@@ -43,17 +44,23 @@ const ReminderItem = React.memo(
   }) => {
     const { colors } = useThemeColors();
     const openReminder = () => {
+      const {
+        selectedItemsList,
+        setSelectedItem,
+        selectionMode,
+        clearSelection
+      } = useSelectionStore.getState();
+      if (selectedItemsList.length > 0 && selectionMode === item.type) {
+        setSelectedItem(item.id);
+        return;
+      } else {
+        clearSelection();
+      }
+
       ReminderSheet.present(item, undefined, isSheet);
     };
     return (
-      <SelectionWrapper
-        //@ts-ignore
-        index={index}
-        height={100}
-        onPress={openReminder}
-        item={item}
-        isSheet={isSheet}
-      >
+      <SelectionWrapper onPress={openReminder} item={item} isSheet={isSheet}>
         <View
           style={{
             flexShrink: 1,
@@ -131,7 +138,11 @@ const ReminderItem = React.memo(
                   height: 30
                 }}
               >
-                <Icon name="reload" size={SIZE.md} color={colors.primary.accent} />
+                <Icon
+                  name="reload"
+                  size={SIZE.md}
+                  color={colors.primary.accent}
+                />
                 <Paragraph
                   size={SIZE.xs}
                   color={colors.secondary.paragraph}

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

@@ -22,16 +22,17 @@ import React from "react";
 import { View } from "react-native";
 import useIsSelected from "../../../hooks/use-selected";
 import { useEditorStore } from "../../../stores/use-editor-store";
+import { Item } from "@notesnook/core";
 
-export const Filler = ({ item }) => {
+export const Filler = ({ item, color }: { item: Item; color?: string }) => {
   const { colors } = useThemeColors();
-  const currentEditingNote = useEditorStore(
-    (state) => state.currentEditingNote
+  const isEditingNote = useEditorStore(
+    (state) => state.currentEditingNote === item.id
   );
 
   const [selected] = useIsSelected(item);
 
-  return currentEditingNote === item.id || selected ? (
+  return isEditingNote || selected ? (
     <View
       style={{
         position: "absolute",
@@ -39,12 +40,11 @@ export const Filler = ({ item }) => {
         height: "150%",
         backgroundColor: colors.selected.background,
         borderLeftWidth: 5,
-        borderLeftColor:
-          currentEditingNote === item.id
-            ? item.color
-              ? colors.static[item.color]
-              : colors.selected.accent
-            : "transparent"
+        borderLeftColor: isEditingNote
+          ? item.color
+            ? colors.static[item.color]
+            : colors.selected.accent
+          : "transparent"
       }}
       collapsable={false}
     />

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

@@ -18,34 +18,45 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { useThemeColors } from "@notesnook/theme";
-import React, { useRef } from "react";
+import React, { PropsWithChildren, useRef } from "react";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 import { useSelectionStore } from "../../../stores/use-selection-store";
 import { PressableButton } from "../../ui/pressable";
 import { Filler } from "./back-fill";
 import { SelectionIcon } from "./selection";
+import { Item, TrashItem } from "@notesnook/core";
+
+type SelectionWrapperProps = PropsWithChildren<{
+  item: Item;
+  onPress: () => void;
+  testID?: string;
+  isSheet?: boolean;
+  color?: string;
+}>;
 
 const SelectionWrapper = ({
-  children,
   item,
-  background,
   onPress,
   testID,
-  isSheet
-}) => {
+  isSheet,
+  children,
+  color
+}: SelectionWrapperProps) => {
   const itemId = useRef(item.id);
   const { colors, isDark } = useThemeColors();
-  const compactMode = useIsCompactModeEnabled(item);
+  const compactMode = useIsCompactModeEnabled(
+    (item as TrashItem).itemType || item.type
+  );
 
   if (item.id !== itemId.current) {
     itemId.current = item.id;
   }
 
   const onLongPress = () => {
-    if (!useSelectionStore.getState().selectionMode) {
-      useSelectionStore.getState().setSelectionMode(true);
+    if (useSelectionStore.getState().selectionMode !== item.type) {
+      useSelectionStore.getState().setSelectionMode(item.type);
     }
-    useSelectionStore.getState().setSelectedItem(item);
+    useSelectionStore.getState().setSelectedItem(item.id);
   };
 
   return (
@@ -69,14 +80,8 @@ const SelectionWrapper = ({
         marginBottom: isSheet ? 12 : undefined
       }}
     >
-      {item.type === "note" ? (
-        <Filler background={background} item={item} />
-      ) : null}
-      <SelectionIcon
-        compactMode={compactMode}
-        item={item}
-        onLongPress={onLongPress}
-      />
+      {item.type === "note" ? <Filler item={item} color={color} /> : null}
+      <SelectionIcon item={item} />
       {children}
     </PressableButton>
   );

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

@@ -25,13 +25,16 @@ import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enab
 import useIsSelected from "../../../hooks/use-selected";
 import { useSelectionStore } from "../../../stores/use-selection-store";
 import { SIZE } from "../../../utils/size";
+import { Item, TrashItem } from "@notesnook/core";
 
-export const SelectionIcon = ({ item }) => {
+export const SelectionIcon = ({ item }: { item: Item }) => {
   const { colors } = useThemeColors();
   const selectionMode = useSelectionStore((state) => state.selectionMode);
   const [selected] = useIsSelected(item);
 
-  const compactMode = useIsCompactModeEnabled(item);
+  const compactMode = useIsCompactModeEnabled(
+    (item as TrashItem).itemType || item.type
+  );
 
   return selectionMode ? (
     <View

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

@@ -17,44 +17,58 @@ 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 { Tag } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
 import { notesnook } from "../../../../e2e/test.ids";
 import { TaggedNotes } from "../../../screens/notes/tagged";
-import { useThemeColors } from "@notesnook/theme";
+import { useSelectionStore } from "../../../stores/use-selection-store";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { IconButton } from "../../ui/icon-button";
-import { PressableButton } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import SelectionWrapper from "../selection-wrapper";
 
 const TagItem = React.memo(
-  ({ item, index }) => {
-    const { colors, isDark } = useThemeColors();
+  ({
+    item,
+    index,
+    totalNotes
+  }: {
+    item: Tag;
+    index: number;
+    totalNotes: number;
+  }) => {
+    const { colors } = useThemeColors();
     const onPress = () => {
+      const {
+        selectedItemsList,
+        setSelectedItem,
+        selectionMode,
+        clearSelection
+      } = useSelectionStore.getState();
+      if (selectedItemsList.length > 0 && selectionMode === item.type) {
+        setSelectedItem(item.id);
+        return;
+      } else {
+        clearSelection();
+      }
+
       TaggedNotes.navigate(item, true);
     };
 
     return (
-      <PressableButton
+      <SelectionWrapper
         onPress={onPress}
-        selectedColor={colors.secondary.background}
+        item={item}
         testID={notesnook.ids.tag.get(index)}
-        alpha={!isDark ? -0.02 : 0.02}
-        opacity={1}
-        customStyle={{
-          paddingHorizontal: 12,
-          flexDirection: "row",
-          paddingVertical: 12,
-          alignItems: "center",
-          width: "100%",
-          justifyContent: "space-between"
-        }}
       >
         <View
           style={{
-            maxWidth: "92%"
+            flexGrow: 1,
+            flexShrink: 1
           }}
         >
           <Heading size={SIZE.md}>
@@ -66,7 +80,7 @@ const TagItem = React.memo(
             >
               #
             </Heading>
-            {item.alias}
+            {item.title}
           </Heading>
           <Paragraph
             color={colors.secondary.paragraph}
@@ -75,10 +89,10 @@ const TagItem = React.memo(
               marginTop: 5
             }}
           >
-            {item && item.noteIds.length && item.noteIds.length > 1
-              ? item.noteIds.length + " notes"
-              : item.noteIds.length === 1
-              ? item.noteIds.length + " note"
+            {totalNotes > 1
+              ? totalNotes + " notes"
+              : totalNotes === 1
+              ? totalNotes + " note"
               : null}
           </Paragraph>
         </View>
@@ -99,14 +113,11 @@ const TagItem = React.memo(
             alignItems: "center"
           }}
         />
-      </PressableButton>
+      </SelectionWrapper>
     );
   },
   (prev, next) => {
-    if (prev.item?.dateEdited !== next.item?.dateEdited) {
-      return false;
-    }
-    if (JSON.stringify(prev.item) !== JSON.stringify(next.item)) {
+    if (prev.item?.dateModified !== next.item?.dateModified) {
       return false;
     }
 

apps/mobile/app/components/list/card.tsx

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { View } from "react-native";
+import { Dimensions, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useMessageStore } from "../../stores/use-message-store";
 import { useThemeColors } from "@notesnook/theme";
@@ -27,13 +27,15 @@ import { SIZE } from "../../utils/size";
 import { PressableButton } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
 
-export const Card = ({ color, warning }) => {
+export const Card = ({ color }: { color?: string }) => {
   const { colors } = useThemeColors();
   color = color ? color : colors.primary.accent;
   const messageBoardState = useMessageStore((state) => state.message);
-  const announcement = useMessageStore((state) => state.announcement);
+  const announcements = useMessageStore((state) => state.announcements);
+  const fontScale = Dimensions.get("window").fontScale;
 
-  return !messageBoardState.visible || announcement || warning ? null : (
+  return !messageBoardState.visible ||
+    (announcements && announcements.length) ? null : (
     <View
       style={{
         width: "95%"
@@ -44,7 +46,6 @@ export const Card = ({ color, warning }) => {
         type="gray"
         customStyle={{
           paddingVertical: 12,
-          width: "95%",
           flexDirection: "row",
           alignItems: "center",
           justifyContent: "space-between",
@@ -54,17 +55,18 @@ export const Card = ({ color, warning }) => {
         <View
           style={{
             flexDirection: "row",
-            alignItems: "center"
+            alignItems: "center",
+            flexShrink: 1
           }}
         >
           <View
             style={{
-              width: 40,
+              width: 40 * fontScale,
               backgroundColor:
                 messageBoardState.type === "error"
                   ? hexToRGBA(colors.static.red, 0.15)
                   : hexToRGBA(color, 0.15),
-              height: 40,
+              height: 40 * fontScale,
               borderRadius: 100,
               alignItems: "center",
               justifyContent: "center"
@@ -75,6 +77,7 @@ export const Card = ({ color, warning }) => {
               color={
                 messageBoardState.type === "error" ? colors.error.icon : color
               }
+              allowFontScaling
               name={messageBoardState.icon}
             />
           </View>
@@ -91,7 +94,7 @@ export const Card = ({ color, warning }) => {
             </Paragraph>
             <Paragraph
               style={{
-                flexWrap: "wrap",
+                flexWrap: "nowrap",
                 flexShrink: 1
               }}
               color={colors.primary.heading}
@@ -101,22 +104,24 @@ export const Card = ({ color, warning }) => {
           </View>
         </View>
 
-        <View
-          style={{
-            width: 40,
-            height: 40,
-            justifyContent: "center",
-            alignItems: "center"
-          }}
-        >
-          <Icon
-            name="chevron-right"
-            color={
-              messageBoardState.type === "error" ? colors.error.icon : color
-            }
-            size={SIZE.lg}
-          />
-        </View>
+        {fontScale > 1 ? null : (
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              justifyContent: "center",
+              alignItems: "center"
+            }}
+          >
+            <Icon
+              name="chevron-right"
+              color={
+                messageBoardState.type === "error" ? colors.error.icon : color
+              }
+              size={SIZE.lg}
+            />
+          </View>
+        )}
       </PressableButton>
     </View>
   );

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

@@ -1,167 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import React from "react";
-import { ActivityIndicator, useWindowDimensions, View } from "react-native";
-import { notesnook } from "../../../e2e/test.ids";
-import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
-import { useTip } from "../../services/tip-manager";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { useThemeColors } from "@notesnook/theme";
-import { ColorValues } from "../../utils/colors";
-import { SIZE } from "../../utils/size";
-import { Tip } from "../tip";
-import { Button } from "../ui/button";
-import Seperator from "../ui/seperator";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-
-export const Empty = React.memo(
-  function Empty({
-    loading = true,
-    placeholderData,
-    headerProps,
-    type,
-    screen
-  }) {
-    const { colors } = useThemeColors();
-    const insets = useGlobalSafeAreaInsets();
-    const { height } = useWindowDimensions();
-    const introCompleted = useSettingStore(
-      (state) => state.settings.introCompleted
-    );
-
-    const tip = useTip(
-      screen === "Notes" && introCompleted
-        ? "first-note"
-        : placeholderData.type || type,
-      screen === "Notes" ? "notes" : null
-    );
-
-    return (
-      <View
-        style={[
-          {
-            height: height - (140 + insets.top),
-            width: "80%",
-            justifyContent: "center",
-            alignSelf: "center"
-          }
-        ]}
-      >
-        {!loading ? (
-          <>
-            <Tip
-              color={
-                ColorValues[headerProps.color?.toLowerCase()]
-                  ? headerProps.color
-                  : "accent"
-              }
-              tip={tip || { text: placeholderData.paragraph }}
-              style={{
-                backgroundColor: "transparent",
-                paddingHorizontal: 0
-              }}
-            />
-            {placeholderData.button && (
-              <Button
-                testID={notesnook.buttons.add}
-                type="grayAccent"
-                title={placeholderData.button}
-                iconPosition="right"
-                icon="arrow-right"
-                onPress={placeholderData.action}
-                buttonType={{
-                  text:
-                    colors.static[headerProps.color] || colors.primary.accent
-                }}
-                style={{
-                  alignSelf: "flex-start",
-                  borderRadius: 5,
-                  height: 40
-                }}
-              />
-            )}
-          </>
-        ) : (
-          <>
-            <View
-              style={{
-                alignSelf: "center",
-                alignItems: "flex-start",
-                width: "100%"
-              }}
-            >
-              <Heading>{placeholderData.heading}</Heading>
-              <Paragraph size={SIZE.sm} textBreakStrategy="balanced">
-                {placeholderData.loading}
-              </Paragraph>
-              <Seperator />
-              <ActivityIndicator
-                size={SIZE.lg}
-                color={
-                  ColorValues[headerProps.color?.toLowerCase()] ||
-                  colors.primary.accent
-                }
-              />
-            </View>
-          </>
-        )}
-      </View>
-    );
-  },
-  (prev, next) => {
-    if (prev.loading === next.loading) return true;
-    return false;
-  }
-);
-
-/**
- * Make a tips manager.
- * The tip manager stores many tips. Each tip has following values
- * 1. Text
- * 2. contexts: An array of context strings. // Places where the tip can be shown
- * 3. Button if any.
- * 4. Image/Gif asset.
- *
- * Tip manager adds the following methods -> get(context). Returns a random tip for the following context.
- *
- * Tips can be shown in a sheet or in a list. For sheets, GeneralSheet can be used to
- * render tips.
- *
- * Where can the tips be shown and how?
- * 1. When transitioning, show tips in a sheet. Make sure its useful
- * 2. Replace placeholders with tips.
- * 3. Show tips in editor placeholder.
- * 4. Show tips between list items?
- *
- * Tooltips.
- * Small tooltips can be shown in initial render first time.
- * Especially for items that are not shown on blank page. Should be
- * in places where it makes sense and does not interrupt the user.
- *
- * Can also be shown when first time entering a screen that
- * has something that the user might not know of. Like sorting and side menu.
- *
- * Todo:
- * 1. Make a tip manager.
- * 2. Make a list of tips.
- * 3. Add images for those tips.
- * 4. Show tips
- */

apps/mobile/app/components/list/empty.tsx

@@ -0,0 +1,140 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { useThemeColors } from "@notesnook/theme";
+import React from "react";
+import { ActivityIndicator, useWindowDimensions, View } from "react-native";
+import { notesnook } from "../../../e2e/test.ids";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
+import { TTip, useTip } from "../../services/tip-manager";
+import { useSettingStore } from "../../stores/use-setting-store";
+import { SIZE } from "../../utils/size";
+import { Tip } from "../tip";
+import { Button } from "../ui/button";
+import Seperator from "../ui/seperator";
+import Heading from "../ui/typography/heading";
+import Paragraph from "../ui/typography/paragraph";
+
+export type PlaceholderData = {
+  title: string;
+  paragraph: string;
+  button?: string;
+  action?: () => void;
+  loading?: string;
+  type?: string;
+};
+
+type EmptyListProps = {
+  loading?: boolean;
+  placeholder?: PlaceholderData;
+  title?: string;
+  color?: string;
+  dataType: string;
+  screen?: string;
+};
+
+export const Empty = React.memo(function Empty({
+  loading = true,
+  placeholder,
+  title,
+  color,
+  dataType,
+  screen
+}: EmptyListProps) {
+  const { colors } = useThemeColors();
+  const insets = useGlobalSafeAreaInsets();
+  const { height } = useWindowDimensions();
+  const introCompleted = useSettingStore(
+    (state) => state.settings.introCompleted
+  );
+  const tip = useTip(
+    screen === "Notes" && introCompleted
+      ? "first-note"
+      : placeholder?.type || ((dataType + "s") as any),
+    screen === "Notes" ? "notes" : "list"
+  );
+
+  return (
+    <View
+      style={[
+        {
+          height: height - (140 + insets.top),
+          width: "80%",
+          justifyContent: "center",
+          alignSelf: "center"
+        }
+      ]}
+    >
+      {!loading ? (
+        <>
+          <Tip
+            color={color}
+            tip={
+              screen !== "Search"
+                ? tip || ({ text: placeholder?.paragraph } as TTip)
+                : ({ text: placeholder?.paragraph } as TTip)
+            }
+            style={{
+              backgroundColor: "transparent",
+              paddingHorizontal: 0
+            }}
+          />
+          {placeholder?.button && (
+            <Button
+              testID={notesnook.buttons.add}
+              type="grayAccent"
+              title={placeholder?.button}
+              iconPosition="right"
+              icon="arrow-right"
+              onPress={placeholder?.action}
+              buttonType={{
+                text: color || colors.primary.accent
+              }}
+              style={{
+                alignSelf: "flex-start",
+                borderRadius: 5,
+                height: 40
+              }}
+            />
+          )}
+        </>
+      ) : (
+        <>
+          <View
+            style={{
+              alignSelf: "center",
+              alignItems: "flex-start",
+              width: "100%"
+            }}
+          >
+            <Heading>{placeholder?.title}</Heading>
+            <Paragraph size={SIZE.sm} textBreakStrategy="balanced">
+              {placeholder?.loading}
+            </Paragraph>
+            <Seperator />
+            <ActivityIndicator
+              size={SIZE.lg}
+              color={color || colors.primary.accent}
+            />
+          </View>
+        </>
+      )}
+    </View>
+  );
+});

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

@@ -1,239 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import React, { useEffect, useRef } from "react";
-import { RefreshControl, View } from "react-native";
-import { FlashList } from "@shopify/flash-list";
-import Animated, { FadeInDown } from "react-native-reanimated";
-import { notesnook } from "../../../e2e/test.ids";
-import { eSendEvent } from "../../services/event-manager";
-import Sync from "../../services/sync";
-import { useThemeColors } from "@notesnook/theme";
-import { db } from "../../common/database";
-import { eScrollEvent } from "../../utils/events";
-import { tabBarRef } from "../../utils/global-refs";
-import JumpToSectionDialog from "../dialogs/jump-to-section";
-import { Footer } from "../list-items/footer";
-import { Header } from "../list-items/headers/header";
-import { SectionHeader } from "../list-items/headers/section-header";
-import { NoteWrapper } from "../list-items/note/wrapper";
-import { NotebookWrapper } from "../list-items/notebook/wrapper";
-import TagItem from "../list-items/tag";
-import { Empty } from "./empty";
-import { getTotalNotes } from "@notesnook/common";
-import { useSettingStore } from "../../stores/use-setting-store";
-import ReminderItem from "../list-items/reminder";
-
-const renderItems = {
-  note: NoteWrapper,
-  notebook: NotebookWrapper,
-  topic: NotebookWrapper,
-  tag: TagItem,
-  section: SectionHeader,
-  header: SectionHeader,
-  reminder: ReminderItem
-};
-
-const RenderItem = ({ item, index, type, ...restArgs }) => {
-  if (!item) return <View />;
-  const Item = renderItems[item.itemType || item.type] || View;
-  const groupOptions = db.settings?.getGroupOptions(type);
-  const dateBy =
-    groupOptions.sortBy !== "title" ? groupOptions.sortBy : "dateEdited";
-  const totalNotes = getTotalNotes(item);
-
-  return (
-    <Item
-      item={item}
-      dateBy={dateBy}
-      index={index}
-      type={type}
-      totalNotes={totalNotes}
-      {...restArgs}
-    />
-  );
-};
-
-/**
- *
- * @param {any} param0
- * @returns
- */
-const List = ({
-  listData,
-  type,
-  refreshCallback,
-  placeholderData,
-  loading,
-  headerProps = {
-    heading: "Home",
-    color: null
-  },
-  screen,
-  ListHeader,
-  warning,
-  isSheet = false,
-  onMomentumScrollEnd,
-  handlers,
-  ScrollComponent
-}) => {
-  const { colors } = useThemeColors();
-  const scrollRef = useRef();
-  const [notesListMode, notebooksListMode] = useSettingStore((state) => [
-    state.settings.notesListMode,
-    state.settings.notebooksListMode
-  ]);
-  const isCompactModeEnabled =
-    (type === "notes" && notesListMode === "compact") ||
-    type === "notebooks" ||
-    notebooksListMode === "compact";
-
-  const renderItem = React.useCallback(
-    ({ item, index }) => (
-      <RenderItem
-        item={item}
-        index={index}
-        color={headerProps?.color}
-        title={headerProps?.heading}
-        type={
-          screen === "Notes"
-            ? "home"
-            : screen === "Favorites"
-            ? "favorites"
-            : type
-        }
-        screen={screen}
-        isSheet={isSheet}
-      />
-    ),
-    [headerProps?.color, headerProps?.heading, screen, type, isSheet]
-  );
-
-  const _onRefresh = async () => {
-    Sync.run("global", false, true, () => {
-      if (refreshCallback) {
-        refreshCallback();
-      }
-    });
-  };
-
-  const _onScroll = React.useCallback(
-    (event) => {
-      if (!event) return;
-      let y = event.nativeEvent.contentOffset.y;
-      eSendEvent(eScrollEvent, {
-        y,
-        screen
-      });
-    },
-    [screen]
-  );
-
-  useEffect(() => {
-    eSendEvent(eScrollEvent, {
-      y: 0,
-      screen
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  let styles = {
-    width: "100%",
-    minHeight: 1,
-    minWidth: 1
-  };
-
-  const ListView = ScrollComponent ? ScrollComponent : FlashList;
-  return (
-    <>
-      <Animated.View
-        style={{
-          flex: 1
-        }}
-        entering={type === "search" ? undefined : FadeInDown}
-      >
-        <ListView
-          {...handlers}
-          style={styles}
-          ref={scrollRef}
-          testID={notesnook.list.id}
-          data={listData}
-          renderItem={renderItem}
-          onScroll={_onScroll}
-          nestedScrollEnabled={true}
-          onMomentumScrollEnd={() => {
-            tabBarRef.current?.unlock();
-            onMomentumScrollEnd?.();
-          }}
-          getItemType={(item) => item.itemType || item.type}
-          estimatedItemSize={isCompactModeEnabled ? 60 : 100}
-          directionalLockEnabled={true}
-          keyboardShouldPersistTaps="always"
-          keyboardDismissMode="interactive"
-          refreshControl={
-            <RefreshControl
-              tintColor={colors.primary.accent}
-              colors={[colors.primary.accent]}
-              progressBackgroundColor={colors.secondary.background}
-              onRefresh={_onRefresh}
-              refreshing={false}
-            />
-          }
-          ListEmptyComponent={
-            placeholderData ? (
-              <Empty
-                loading={loading}
-                placeholderData={placeholderData}
-                headerProps={headerProps}
-                type={type}
-                screen={screen}
-              />
-            ) : null
-          }
-          ListFooterComponent={<Footer />}
-          ListHeaderComponent={
-            <>
-              {ListHeader ? (
-                ListHeader
-              ) : !headerProps ? null : (
-                <Header
-                  title={headerProps.heading}
-                  color={headerProps.color}
-                  type={type}
-                  screen={screen}
-                  warning={warning}
-                />
-              )}
-            </>
-          }
-        />
-      </Animated.View>
-      {listData ? (
-        <JumpToSectionDialog
-          screen={screen}
-          data={listData}
-          type={screen === "Notes" ? "home" : type}
-          scrollRef={scrollRef}
-        />
-      ) : null}
-    </>
-  );
-};
-
-export default List;

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

@@ -0,0 +1,210 @@
+/*
+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 { GroupingKey, Item, VirtualizedGrouping } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
+import { FlashList } from "@shopify/flash-list";
+import React, { useEffect, useRef } from "react";
+import {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  RefreshControl
+} from "react-native";
+import Animated, { FadeInDown } from "react-native-reanimated";
+import { notesnook } from "../../../e2e/test.ids";
+import { useGroupOptions } from "../../hooks/use-group-options";
+import { eSendEvent } from "../../services/event-manager";
+import Sync from "../../services/sync";
+import { RouteName } from "../../stores/use-navigation-store";
+import { useSettingStore } from "../../stores/use-setting-store";
+import { eScrollEvent } from "../../utils/events";
+import { tabBarRef } from "../../utils/global-refs";
+import { Footer } from "../list-items/footer";
+import { Header } from "../list-items/headers/header";
+import { Empty, PlaceholderData } from "./empty";
+import { ListItemWrapper } from "./list-item.wrapper";
+
+type ListProps = {
+  data: VirtualizedGrouping<Item> | undefined;
+  dataType: Item["type"];
+  onRefresh?: () => void;
+  loading?: boolean;
+  headerTitle?: string;
+  customAccentColor?: string;
+  renderedInRoute?: RouteName;
+  CustomLisHeader?: React.JSX.Element;
+  isRenderedInActionSheet?: boolean;
+  CustomListComponent?: React.JSX.ElementType;
+  placeholder?: PlaceholderData;
+  id?: string;
+};
+
+export default function List(props: ListProps) {
+  const { colors } = useThemeColors();
+  const scrollRef = useRef();
+  const [notesListMode, notebooksListMode] = useSettingStore((state) => [
+    state.settings.notesListMode,
+    state.settings.notebooksListMode
+  ]);
+
+  const isCompactModeEnabled =
+    (props.dataType === "note" && notesListMode === "compact") ||
+    props.dataType === "notebook" ||
+    notebooksListMode === "compact";
+
+  const groupType =
+    props.renderedInRoute === "Notes"
+      ? "home"
+      : props.renderedInRoute === "Favorites"
+      ? "favorites"
+      : props.renderedInRoute === "Trash"
+      ? "trash"
+      : `${props.dataType}s`;
+
+  const groupOptions = useGroupOptions(groupType);
+
+  const _onRefresh = async () => {
+    Sync.run("global", false, true, () => {
+      props.onRefresh?.();
+    });
+  };
+
+  const renderItem = React.useCallback(
+    ({ index }: { index: number }) => {
+      return (
+        <ListItemWrapper
+          index={index}
+          isSheet={props.isRenderedInActionSheet || false}
+          items={props.data}
+          groupOptions={groupOptions}
+          group={groupType as GroupingKey}
+          renderedInRoute={props.renderedInRoute}
+          customAccentColor={props.customAccentColor}
+          dataType={props.dataType}
+          scrollRef={scrollRef}
+        />
+      );
+    },
+    [
+      groupOptions,
+      groupType,
+      props.customAccentColor,
+      props.data,
+      props.dataType,
+      props.isRenderedInActionSheet,
+      props.renderedInRoute
+    ]
+  );
+
+  const onListScroll = React.useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (!event) return;
+      eSendEvent(eScrollEvent, {
+        y: event.nativeEvent.contentOffset.y,
+        route: props.renderedInRoute,
+        id: props.id || props.renderedInRoute
+      });
+    },
+    [props.renderedInRoute, props.id]
+  );
+
+  useEffect(() => {
+    eSendEvent(eScrollEvent, {
+      y: 0,
+      route: props.renderedInRoute,
+      id: props.id || props.renderedInRoute
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const styles = {
+    width: "100%",
+    minHeight: 1,
+    minWidth: 1
+  };
+
+  const ListView = props.CustomListComponent
+    ? props.CustomListComponent
+    : FlashList;
+
+  return (
+    <>
+      <Animated.View
+        style={{
+          flex: 1
+        }}
+        entering={props.renderedInRoute === "Search" ? undefined : FadeInDown}
+      >
+        <ListView
+          style={styles}
+          ref={scrollRef}
+          testID={notesnook.list.id}
+          data={props.data?.placeholders || []}
+          renderItem={renderItem}
+          onScroll={onListScroll}
+          nestedScrollEnabled={true}
+          onMomentumScrollEnd={() => {
+            tabBarRef.current?.unlock();
+          }}
+          getItemType={(item: number, index: number) => {
+            return props.data?.type(index);
+          }}
+          estimatedItemSize={isCompactModeEnabled ? 60 : 120}
+          directionalLockEnabled={true}
+          keyboardShouldPersistTaps="always"
+          keyboardDismissMode="interactive"
+          refreshControl={
+            <RefreshControl
+              tintColor={colors.primary.accent}
+              colors={[colors.primary.accent]}
+              progressBackgroundColor={colors.secondary.background}
+              onRefresh={_onRefresh}
+              refreshing={false}
+            />
+          }
+          ListEmptyComponent={
+            props.placeholder ? (
+              <Empty
+                loading={props.loading}
+                title={props.headerTitle}
+                dataType={props.dataType}
+                color={props.customAccentColor}
+                placeholder={props.placeholder}
+                screen={props.renderedInRoute}
+              />
+            ) : null
+          }
+          ListFooterComponent={<Footer />}
+          ListHeaderComponent={
+            <>
+              {props.CustomLisHeader ? (
+                props.CustomLisHeader
+              ) : !props.headerTitle ? null : (
+                <Header
+                  color={props.customAccentColor}
+                  screen={props.renderedInRoute}
+                />
+              )}
+            </>
+          }
+        />
+      </Animated.View>
+    </>
+  );
+}

apps/mobile/app/components/list/list-item.wrapper.tsx

@@ -0,0 +1,277 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import {
+  Color,
+  GroupHeader,
+  GroupOptions,
+  GroupingKey,
+  Item,
+  ItemType,
+  Note,
+  Notebook,
+  Reminder,
+  Tag,
+  TrashItem,
+  VirtualizedGrouping
+} from "@notesnook/core";
+import { getSortValue } from "@notesnook/core/dist/utils/grouping";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { View } from "react-native";
+import { db } from "../../common/database";
+import { eSendEvent } from "../../services/event-manager";
+import {
+  NotebooksWithDateEdited,
+  TagsWithDateEdited,
+  isNoteResolvedData,
+  resolveItems
+} from "../../stores/resolve-items";
+import { RouteName } from "../../stores/use-navigation-store";
+import { eOpenJumpToDialog } from "../../utils/events";
+import { SectionHeader } from "../list-items/headers/section-header";
+import { NoteWrapper } from "../list-items/note/wrapper";
+import { NotebookWrapper } from "../list-items/notebook/wrapper";
+import ReminderItem from "../list-items/reminder";
+import TagItem from "../list-items/tag";
+
+type ListItemWrapperProps<TItem = Item> = {
+  group?: GroupingKey;
+  items: VirtualizedGrouping<TItem> | undefined;
+  isSheet: boolean;
+  index: number;
+  renderedInRoute?: RouteName;
+  customAccentColor?: string;
+  dataType: string;
+  scrollRef: any;
+  groupOptions: GroupOptions;
+};
+
+export function ListItemWrapper(props: ListItemWrapperProps) {
+  const { items, group, isSheet, index, groupOptions } = props;
+  const [item, setItem] = useState<Item>();
+  const tags = useRef<TagsWithDateEdited>();
+  const notebooks = useRef<NotebooksWithDateEdited>();
+  const reminder = useRef<Reminder>();
+  const color = useRef<Color>();
+  const totalNotes = useRef<number>(0);
+  const attachmentsCount = useRef(0);
+  const [groupHeader, setGroupHeader] = useState<GroupHeader>();
+  const previousIndex = useRef<number>();
+  const refreshTimeout = useRef<NodeJS.Timeout>();
+  const currentItemId = useRef<string>();
+
+  const refreshItem = useCallback((resolvedItem: any) => {
+    if (!resolvedItem || !resolvedItem.data) {
+      tags.current = undefined;
+      notebooks.current = undefined;
+      reminder.current = undefined;
+      color.current = undefined;
+      attachmentsCount.current = 0;
+      totalNotes.current = 0;
+    }
+
+    if (resolvedItem && resolvedItem.item) {
+      const data = resolvedItem.data;
+      if (resolvedItem.item.type === "note" && isNoteResolvedData(data)) {
+        tags.current = data.tags;
+        notebooks.current = data.notebooks;
+        reminder.current = data.reminder;
+        color.current = data.color;
+        attachmentsCount.current = data.attachmentsCount || 0;
+      } else if (
+        resolvedItem.item.type === "notebook" &&
+        typeof data === "number"
+      ) {
+        totalNotes.current = data;
+      } else if (resolvedItem.item.type === "tag" && typeof data === "number") {
+        totalNotes.current = data;
+      }
+      currentItemId.current = resolvedItem.item.id;
+      setItem(resolvedItem.item);
+      setGroupHeader(resolvedItem.group);
+    }
+  }, []);
+
+  if (previousIndex.current !== index) {
+    previousIndex.current = index;
+    const resolvedItem = items?.cacheItem(index);
+    refreshItem(resolvedItem);
+  }
+
+  useEffect(() => {
+    (async function () {
+      try {
+        clearTimeout(refreshTimeout.current);
+        const idx = index;
+        refreshTimeout.current = setTimeout(async () => {
+          if (idx !== previousIndex.current) return;
+          const resolvedItem = await items?.item(idx, resolveItems);
+          if (idx !== previousIndex.current) return;
+          refreshItem(resolvedItem);
+        }, 100);
+      } catch (e) {
+        console.log("Error", e);
+      }
+    })();
+  }, [index, items, refreshItem]);
+
+  if (!item)
+    return (
+      <View
+        style={{
+          height: 120,
+          width: "100%"
+        }}
+      />
+    );
+
+  const type = ((item as TrashItem).itemType || item.type) as ItemType;
+  switch (type) {
+    case "note": {
+      return (
+        <>
+          {groupHeader && previousIndex.current === index ? (
+            <SectionHeader
+              screen={props.renderedInRoute}
+              item={groupHeader}
+              index={index}
+              dataType={item.type}
+              color={props.customAccentColor}
+              groupOptions={groupOptions}
+              onOpenJumpToDialog={() => {
+                eSendEvent(eOpenJumpToDialog, {
+                  ref: props.scrollRef,
+                  data: items
+                });
+              }}
+            />
+          ) : null}
+
+          <NoteWrapper
+            item={item as Note}
+            tags={tags.current}
+            color={color.current}
+            notebooks={notebooks.current}
+            reminder={reminder.current}
+            attachmentsCount={attachmentsCount.current}
+            date={getDate(item, group)}
+            isRenderedInActionSheet={isSheet}
+            index={index}
+          />
+        </>
+      );
+    }
+    case "notebook":
+      return (
+        <>
+          {groupHeader && previousIndex.current === index ? (
+            <SectionHeader
+              screen={props.renderedInRoute}
+              item={groupHeader}
+              index={index}
+              dataType={item.type}
+              color={props.customAccentColor}
+              groupOptions={groupOptions}
+              onOpenJumpToDialog={() => {
+                eSendEvent(eOpenJumpToDialog, {
+                  ref: props.scrollRef,
+                  data: items
+                });
+              }}
+            />
+          ) : null}
+          <NotebookWrapper
+            item={item as Notebook}
+            totalNotes={totalNotes.current}
+            date={getDate(item, group)}
+            index={index}
+          />
+        </>
+      );
+
+    case "reminder":
+      return (
+        <>
+          {groupHeader && previousIndex.current === index ? (
+            <SectionHeader
+              screen={props.renderedInRoute}
+              item={groupHeader}
+              index={index}
+              dataType={item.type}
+              color={props.customAccentColor}
+              groupOptions={groupOptions}
+              onOpenJumpToDialog={() => {
+                eSendEvent(eOpenJumpToDialog, {
+                  ref: props.scrollRef,
+                  data: items
+                });
+              }}
+            />
+          ) : null}
+          <ReminderItem
+            item={item as Reminder}
+            index={index}
+            isSheet={isSheet}
+          />
+        </>
+      );
+    case "tag":
+      return (
+        <>
+          {groupHeader && previousIndex.current === index ? (
+            <SectionHeader
+              screen={props.renderedInRoute}
+              item={groupHeader}
+              index={index}
+              dataType={item.type}
+              color={props.customAccentColor}
+              groupOptions={groupOptions}
+              onOpenJumpToDialog={() => {
+                eSendEvent(eOpenJumpToDialog, {
+                  ref: props.scrollRef,
+                  data: items
+                });
+              }}
+            />
+          ) : null}
+          <TagItem
+            item={item as Tag}
+            index={index}
+            totalNotes={totalNotes.current}
+          />
+        </>
+      );
+    default:
+      return null;
+  }
+}
+
+function getDate(item: Item, groupType?: GroupingKey): number {
+  return (
+    getSortValue(
+      groupType
+        ? db.settings.getGroupOptions(groupType)
+        : {
+            groupBy: "default",
+            sortBy: "dateEdited",
+            sortDirection: "desc"
+          },
+      item
+    ) || 0
+  );
+}

apps/mobile/app/components/merge-conflicts/index.js

@@ -17,9 +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 { getFormattedDate } from "@notesnook/common";
+import { useThemeColors } from "@notesnook/theme";
 import KeepAwake from "@sayem314/react-native-keep-awake";
 import React, { useEffect, useRef, useState } from "react";
-import { Modal, SafeAreaView, Text, View } from "react-native";
+import { SafeAreaView, Text, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { db } from "../../common/database";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
@@ -33,7 +35,7 @@ import {
 } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import Sync from "../../services/sync";
-import { useThemeColors } from "@notesnook/theme";
+import { useSettingStore } from "../../stores/use-setting-store";
 import { eOnLoadNote, eShowMergeDialog } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
@@ -45,8 +47,6 @@ import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Seperator from "../ui/seperator";
 import Paragraph from "../ui/typography/paragraph";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { getFormattedDate } from "@notesnook/common";
 
 const MergeConflicts = () => {
   const { colors } = useThemeColors();
@@ -62,7 +62,7 @@ const MergeConflicts = () => {
 
   const applyChanges = async () => {
     let _content = keep;
-    let note = db.notes.note(_content.noteId).data;
+    let note = await db.notes.note(_content.noteId);
     await db.notes.add({
       id: note.id,
       conflicted: false,
@@ -91,7 +91,7 @@ const MergeConflicts = () => {
     if (editorController.current?.note?.id === note.id) {
       // reload the note in editor
       eSendEvent(eOnLoadNote, {
-        ...editorController.current?.note,
+        item: editorController.current?.note,
         forced: true
       });
     }
@@ -100,7 +100,7 @@ const MergeConflicts = () => {
   };
 
   const show = async (item) => {
-    let noteContent = await db.content.raw(item.contentId);
+    let noteContent = await db.content.get(item.contentId);
     content.current = { ...noteContent };
     if (__DEV__) {
       if (!noteContent.conflicted) {
@@ -245,13 +245,17 @@ const MergeConflicts = () => {
   };
 
   return !visible ? null : (
-    <Modal
+    <BaseDialog
       statusBarTranslucent
       transparent={false}
       animationType="slide"
+      animated={false}
+      bounce={false}
       onRequestClose={() => {
         close();
       }}
+      centered={false}
+      background={colors?.primary.background}
       supportedOrientations={[
         "portrait",
         "portrait-upside-down",
@@ -316,14 +320,16 @@ const MergeConflicts = () => {
               readonly
               editorId=":conflictPrimary"
               onLoad={async () => {
-                const note = db.notes.note(content.current?.noteId)?.data;
+                const note = await db.notes.note(content.current?.noteId);
                 if (!note) return;
                 await sleep(300);
                 eSendEvent(eOnLoadNote + ":conflictPrimary", {
-                  ...note,
-                  content: {
-                    ...content.current,
-                    isPreview: true
+                  item: {
+                    ...note,
+                    content: {
+                      ...content.current,
+                      isPreview: true
+                    }
                   }
                 });
               }}
@@ -351,19 +357,21 @@ const MergeConflicts = () => {
               readonly
               editorId=":conflictSecondary"
               onLoad={async () => {
-                const note = db.notes.note(content.current?.noteId)?.data;
+                const note = await db.notes.note(content.current?.noteId);
                 if (!note) return;
                 await sleep(300);
                 eSendEvent(eOnLoadNote + ":conflictSecondary", {
-                  ...note,
-                  content: { ...content.current.conflicted, isPreview: true }
+                  item: {
+                    ...note,
+                    content: { ...content.current.conflicted, isPreview: true }
+                  }
                 });
               }}
             />
           </Animated.View>
         </View>
       </SafeAreaView>
-    </Modal>
+    </BaseDialog>
   );
 };
 

apps/mobile/app/components/note-history/preview.js

@@ -17,26 +17,29 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
 import { db } from "../../common/database";
 import Editor from "../../screens/editor";
-import EditorOverlay from "../../screens/editor/loading";
 import { editorController } from "../../screens/editor/tiptap/utils";
-import { eSendEvent, ToastEvent } from "../../services/event-manager";
+import { eSendEvent, ToastManager } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import { useEditorStore } from "../../stores/use-editor-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
-import { useThemeColors } from "@notesnook/theme";
 import { useTrashStore } from "../../stores/use-trash-store";
 import { eCloseSheet, eOnLoadNote } from "../../utils/events";
-import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import DialogHeader from "../dialog/dialog-header";
 import { presentDialog } from "../dialog/functions";
 import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
 
+/**
+ *
+ * @param {any} param0
+ * @returns
+ */
 export default function NotePreview({ session, content, note }) {
   const { colors } = useThemeColors();
   const editorId = ":noteHistory";
@@ -46,7 +49,7 @@ export default function NotePreview({ session, content, note }) {
       await db.trash.restore(note.id);
       Navigation.queueRoutesForUpdate();
       useSelectionStore.getState().setSelectionMode(false);
-      ToastEvent.show({
+      ToastManager.show({
         heading: "Restore successful",
         type: "success"
       });
@@ -57,7 +60,7 @@ export default function NotePreview({ session, content, note }) {
     if (useEditorStore.getState()?.currentEditingNote === session?.noteId) {
       if (editorController.current?.note) {
         eSendEvent(eOnLoadNote, {
-          ...editorController.current?.note,
+          item: editorController.current?.note,
           forced: true
         });
       }
@@ -66,7 +69,7 @@ export default function NotePreview({ session, content, note }) {
     eSendEvent(eCloseSheet);
     Navigation.queueRoutesForUpdate();
 
-    ToastEvent.show({
+    ToastManager.show({
       heading: "Note restored successfully",
       type: "success"
     });
@@ -81,10 +84,10 @@ export default function NotePreview({ session, content, note }) {
       context: "local",
       positivePress: async () => {
         await db.trash.delete(note.id);
-        useTrashStore.getState().setTrash();
+        useTrashStore.getState().refresh();
         useSelectionStore.getState().setSelectionMode(false);
-        ToastEvent.show({
-          heading: "Permanantly deleted items",
+        ToastManager.show({
+          heading: "Permanently deleted items",
           type: "success",
           context: "local"
         });
@@ -117,10 +120,12 @@ export default function NotePreview({ session, content, note }) {
             onLoad={async () => {
               const _note = note || db.notes.note(session?.noteId)?.data;
               eSendEvent(eOnLoadNote + editorId, {
-                ..._note,
-                content: {
-                  ...content,
-                  isPreview: true
+                item: {
+                  ..._note,
+                  content: {
+                    ...content,
+                    isPreview: true
+                  }
                 }
               });
             }}

apps/mobile/app/components/premium/compact-features.js

@@ -56,7 +56,7 @@ export const CompactFeatures = ({
           icon: "shield"
         },
         {
-          highlight: "Daily, weekly & montly",
+          highlight: "Daily, weekly & monthly",
           content: "recurring reminders",
           icon: "bell"
         },

apps/mobile/app/components/premium/component.js

@@ -165,7 +165,12 @@ export const Component = ({ close, promo }) => {
             }}
             size={SIZE.md}
           >
-            ({pricing?.product?.localizedPrice} / mo)
+            (
+            {Platform.OS === "android"
+              ? pricing.product?.subscriptionOfferDetails[0].pricingPhases
+                  .pricingPhaseList?.[0].formattedPrice
+              : pricing.product?.localizedPrice}{" "}
+            / mo)
           </Paragraph>
         )}
 

apps/mobile/app/components/premium/expiring.js

@@ -48,23 +48,23 @@ export const Expiring = () => {
   const [visible, setVisible] = useState(false);
   const [status, setStatus] = useState({
     title: "Your trial is ending soon",
-    offer: null,
+    offer: "Get 30% off",
     extend: true
   });
   const pricing = usePricing("yearly");
-
-  const promo = status.offer
-    ? {
-        promoCode:
-          pricing?.info?.discount > 30
-            ? pricing.info.sku
-            : "com.streetwriters.notesnook.sub.yr.trialoffer",
-        text: `GET ${
-          pricing?.info?.discount > 30 ? pricing?.info?.discount : 30
-        }% OFF on yearly`,
-        discount: pricing?.info?.discount > 30 ? pricing?.info?.discount : 30
-      }
-    : null;
+  const promo =
+    status.offer && pricing?.info
+      ? {
+          promoCode:
+            pricing?.info?.discount > 30
+              ? pricing.info.sku
+              : "com.streetwriters.notesnook.sub.yr.trialoffer",
+          text: `GET ${
+            pricing?.info?.discount > 30 ? pricing?.info?.discount : 30
+          }% OFF on yearly`,
+          discount: pricing?.info?.discount > 30 ? pricing?.info?.discount : 30
+        }
+      : null;
 
   useEffect(() => {
     eSubscribeEvent(eOpenTrialEndingDialog, open);

apps/mobile/app/components/premium/features.js

@@ -98,7 +98,7 @@ export const features = [
         icon: "bell"
       },
       {
-        highlight: "Daily, weekly & montly",
+        highlight: "Daily, weekly & monthly",
         content: "reminders",
         icon: "refresh",
         pro: true
@@ -194,7 +194,7 @@ export const features = [
       "Having the right tool at the right time is crucial for note taking. Lists, tables, codeblocks — you name it, we have it.",
     features: [
       {
-        highlight: "Basic formating",
+        highlight: "Basic formatting",
         content: "and lists",
         icon: "format-bold"
       },

apps/mobile/app/components/premium/pricing-item.tsx

@@ -18,13 +18,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import { SIZE } from "../../utils/size";
 import { PressableButton } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import RNIap from "react-native-iap";
 
-export const PricingItem = ({ product, onPress, compact }) => {
+export const PricingItem = ({
+  product,
+  onPress,
+  compact,
+  strikethrough
+}: {
+  product: {
+    type: "yearly" | "monthly";
+    data?: RNIap.Subscription;
+    info: string;
+    offerType?: "yearly" | "monthly";
+  };
+  strikethrough?: boolean;
+  onPress?: () => void;
+  compact?: boolean;
+}) => {
   return (
     <PressableButton
       onPress={onPress}
@@ -36,8 +52,10 @@ export const PricingItem = ({ product, onPress, compact }) => {
         paddingHorizontal: 12,
         paddingVertical: compact ? 15 : 10,
         width: compact ? null : "100%",
-        minWidth: 150
+        minWidth: 150,
+        opacity: strikethrough ? 0.7 : 1
       }}
+      disabled={strikethrough}
     >
       {!compact && (
         <View>
@@ -53,8 +71,25 @@ export const PricingItem = ({ product, onPress, compact }) => {
       )}
 
       <View>
-        <Paragraph size={SIZE.sm}>
-          <Heading size={SIZE.lg - 2}>{product?.data?.localizedPrice}/</Heading>
+        <Paragraph
+          style={{
+            textDecorationLine: strikethrough ? "line-through" : undefined
+          }}
+          size={SIZE.sm}
+        >
+          <Heading
+            style={{
+              textDecorationLine: strikethrough ? "line-through" : undefined
+            }}
+            size={SIZE.lg - 2}
+          >
+            {Platform.OS === "android"
+              ? (product.data as RNIap.SubscriptionAndroid | undefined)
+                  ?.subscriptionOfferDetails[0].pricingPhases
+                  .pricingPhaseList?.[0]?.formattedPrice
+              : (product.data as RNIap.SubscriptionIOS | undefined)
+                  ?.localizedPrice}
+          </Heading>
           {product?.type === "yearly" || product?.offerType === "yearly"
             ? "/year"
             : "/month"}

apps/mobile/app/components/premium/pricing-plans.tsx

@@ -20,12 +20,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React, { useCallback, useEffect, useState } from "react";
 import { ActivityIndicator, Platform, Text, View } from "react-native";
 import * as RNIap from "react-native-iap";
-import { db } from "../../common/database";
+import { DatabaseLogger, db } from "../../common/database";
 import { usePricing } from "../../hooks/use-pricing";
 import {
   eSendEvent,
   presentSheet,
-  ToastEvent
+  ToastManager
 } from "../../services/event-manager";
 import PremiumService from "../../services/premium";
 import { useThemeColors } from "@notesnook/theme";
@@ -47,11 +47,29 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { Walkthrough } from "../walkthroughs";
 import { PricingItem } from "./pricing-item";
+import { useSettingStore } from "../../stores/use-setting-store";
+
+const UUID_PREFIX = "0bdaea";
+const UUID_VERSION = "4";
+const UUID_VARIANT = "a";
+
+function toUUID(str: string) {
+  return [
+    UUID_PREFIX + str.substring(0, 2), // 6 digit prefix + first 2 oid digits
+    str.substring(2, 6), // # next 4 oid digits
+    UUID_VERSION + str.substring(6, 9), // # 1 digit version(0x4) + next 3 oid digits
+    UUID_VARIANT + str.substring(9, 12), // # 1 digit variant(0b101) + 1 zero bit + next 3 oid digits
+    str.substring(12)
+  ].join("-");
+}
 
 const promoCyclesMonthly = {
   1: "first month",
   2: "first 2 months",
-  3: "first 3 months"
+  3: "first 3 months",
+  4: "first 4 months",
+  5: "first 5 months",
+  6: "first 3 months"
 };
 
 const promoCyclesYearly = {
@@ -65,10 +83,24 @@ export const PricingPlans = ({
   marginTop,
   heading = true,
   compact = false
+}: {
+  promo?: {
+    promoCode: string;
+  };
+  marginTop?: any;
+  heading?: boolean;
+  compact?: boolean;
 }) => {
   const { colors } = useThemeColors();
   const user = useUserStore((state) => state.user);
-  const [product, setProduct] = useState(null);
+  const [product, setProduct] = useState<{
+    type: string;
+    offerType: "monthly" | "yearly";
+    data: RNIap.Subscription;
+    cycleText: string;
+    info: string;
+  }>();
+
   const [buying, setBuying] = useState(false);
   const [loading, setLoading] = useState(false);
   const userCanRequestTrial =
@@ -90,27 +122,40 @@ export const PricingPlans = ({
     }
   }, [promo?.promoCode]);
 
-  const getPromo = async (code) => {
+  const getPromo = async (code: string) => {
     try {
-      let productId;
+      let skuId: string;
       if (code.startsWith("com.streetwriters.notesnook")) {
-        productId = code;
+        skuId = code;
       } else {
-        productId = await db.offers.getCode(code.split(":")[0], Platform.OS);
+        skuId = await db.offers?.getCode(code.split(":")[0], Platform.OS);
       }
 
-      let products = await PremiumService.getProducts();
-      let product = products.find((p) => p.productId === productId);
+      const products = await PremiumService.getProducts();
+      const product = products.find((p) => p.productId === skuId);
       if (!product) return false;
-      let isMonthly = product.productId.indexOf(".mo") > -1;
-      let cycleText = isMonthly
+      const isMonthly = product.productId.indexOf(".mo") > -1;
+
+      const cycleText = isMonthly
         ? promoCyclesMonthly[
-            product.introductoryPriceCyclesAndroid ||
-              product.introductoryPriceNumberOfPeriodsIOS
+            (Platform.OS === "android"
+              ? (product as RNIap.SubscriptionAndroid)
+                  .subscriptionOfferDetails[0]?.pricingPhases
+                  .pricingPhaseList?.[0].billingCycleCount
+              : parseInt(
+                  (product as RNIap.SubscriptionIOS)
+                    .introductoryPriceNumberOfPeriodsIOS as string
+                )) as keyof typeof promoCyclesMonthly
           ]
         : promoCyclesYearly[
-            product.introductoryPriceCyclesAndroid ||
-              product.introductoryPriceNumberOfPeriodsIOS
+            (Platform.OS === "android"
+              ? (product as RNIap.SubscriptionAndroid)
+                  .subscriptionOfferDetails[0]?.pricingPhases
+                  .pricingPhaseList?.[0].billingCycleCount
+              : parseInt(
+                  (product as RNIap.SubscriptionIOS)
+                    .introductoryPriceNumberOfPeriodsIOS as string
+                )) as keyof typeof promoCyclesYearly
           ];
 
       setProduct({
@@ -118,7 +163,7 @@ export const PricingPlans = ({
         offerType: isMonthly ? "monthly" : "yearly",
         data: product,
         cycleText: cycleText,
-        info: "Pay monthly, cancel anytime"
+        info: `Pay ${isMonthly ? "monthly" : "yearly"}, cancel anytime`
       });
       return true;
     } catch (e) {
@@ -131,22 +176,41 @@ export const PricingPlans = ({
     getSkus();
   }, [getSkus]);
 
-  const buySubscription = async (product) => {
-    if (buying) return;
+  const buySubscription = async (product: RNIap.Subscription) => {
+    if (buying || !product) return;
     setBuying(true);
     try {
       if (!user) {
         setBuying(false);
         return;
       }
-      await RNIap.requestSubscription(
-        product?.productId,
-        false,
-        null,
-        -1,
-        user.id,
-        user.id
+      useSettingStore.getState().setAppDidEnterBackgroundForAction(true);
+      const androidOfferToken =
+        Platform.OS === "android"
+          ? (product as RNIap.SubscriptionAndroid).subscriptionOfferDetails[0]
+              .offerToken
+          : null;
+
+      DatabaseLogger.info(
+        `Subscription Requested initiated for user ${toUUID(user.id)}`
       );
+
+      await RNIap.requestSubscription({
+        sku: product?.productId,
+        obfuscatedAccountIdAndroid: user.id,
+        obfuscatedProfileIdAndroid: user.id,
+        appAccountToken: toUUID(user.id),
+        andDangerouslyFinishTransactionAutomaticallyIOS: false,
+        subscriptionOffers: androidOfferToken
+          ? [
+              {
+                offerToken: androidOfferToken,
+                sku: product?.productId
+              }
+            ]
+          : undefined
+      });
+      useSettingStore.getState().setAppDidEnterBackgroundForAction(false);
       setBuying(false);
       eSendEvent(eCloseSheet);
       eSendEvent(eClosePremiumDialog);
@@ -167,6 +231,35 @@ export const PricingPlans = ({
     }
   };
 
+  function getStandardPrice() {
+    if (!product) return;
+    const productType = product.offerType;
+
+    if (Platform.OS === "android") {
+      const pricingPhaseListItem = (product.data as RNIap.SubscriptionAndroid)
+        ?.subscriptionOfferDetails[0]?.pricingPhases.pricingPhaseList?.[1];
+
+      if (!pricingPhaseListItem) {
+        const product =
+          productType === "monthly"
+            ? monthlyPlan?.product
+            : yearlyPlan?.product;
+        return (product as RNIap.SubscriptionAndroid)
+          ?.subscriptionOfferDetails[0]?.pricingPhases.pricingPhaseList?.[0]
+          ?.formattedPrice;
+      }
+
+      return pricingPhaseListItem?.formattedPrice;
+    } else {
+      const productDefault =
+        productType === "monthly" ? monthlyPlan?.product : yearlyPlan?.product;
+      return (
+        (product.data as RNIap.SubscriptionIOS)?.localizedPrice ||
+        (productDefault as RNIap.SubscriptionIOS)?.localizedPrice
+      );
+    }
+  }
+
   return loading ? (
     <View
       style={{
@@ -198,7 +291,14 @@ export const PricingPlans = ({
             }}
             size={SIZE.lg}
           >
-            {PremiumService.getMontlySub().localizedPrice} / mo
+            {(Platform.OS === "android"
+              ? (monthlyPlan?.product as RNIap.SubscriptionAndroid | undefined)
+                  ?.subscriptionOfferDetails[0]?.pricingPhases
+                  .pricingPhaseList?.[0]?.formattedPrice
+              : (monthlyPlan?.product as RNIap.SubscriptionIOS | undefined)
+                  ?.localizedPrice) ||
+              (PremiumService.getMontlySub() as any)?.localizedPrice}
+            / mo
           </Paragraph>
           <Button
             onPress={() => {
@@ -218,7 +318,7 @@ export const PricingPlans = ({
           <Button
             onPress={async () => {
               try {
-                await db.user.activateTrial();
+                await db.user?.activateTrial();
                 eSendEvent(eClosePremiumDialog);
                 eSendEvent(eCloseSheet);
                 await sleep(300);
@@ -239,33 +339,91 @@ export const PricingPlans = ({
       ) : (
         <>
           {product?.type === "promo" ? (
-            <Heading
+            <View
               style={{
                 paddingVertical: 15,
-                alignSelf: "center",
-                textAlign: "center"
+                alignItems: "center"
               }}
-              size={SIZE.lg - 4}
             >
-              {product.data.introductoryPrice}
-              <Paragraph
+              {product?.offerType === "monthly" ? (
+                <PricingItem
+                  product={{
+                    type: "monthly",
+                    data: monthlyPlan?.product,
+                    info: "Pay once a month, cancel anytime."
+                  }}
+                  strikethrough={true}
+                />
+              ) : (
+                <PricingItem
+                  onPress={() => {
+                    if (!monthlyPlan?.product) return;
+                    buySubscription(monthlyPlan?.product);
+                  }}
+                  product={{
+                    type: "yearly",
+                    data: yearlyPlan?.product,
+                    info: "Pay once a year, cancel anytime."
+                  }}
+                  strikethrough={true}
+                />
+              )}
+
+              <Heading
                 style={{
-                  textDecorationLine: "line-through",
-                  color: colors.secondary.paragraph
+                  paddingTop: 15,
+                  fontSize: SIZE.lg
                 }}
-                size={SIZE.sm}
               >
-                ({product.data.localizedPrice})
-              </Paragraph>{" "}
-              for {product.cycleText}
-            </Heading>
+                Special offer for you
+              </Heading>
+
+              <View
+                style={{
+                  paddingVertical: 20,
+                  paddingBottom: 10
+                }}
+              >
+                <Heading
+                  style={{
+                    alignSelf: "center",
+                    textAlign: "center"
+                  }}
+                  size={SIZE.xxl}
+                >
+                  {Platform.OS === "android"
+                    ? (product.data as RNIap.SubscriptionAndroid)
+                        ?.subscriptionOfferDetails[0].pricingPhases
+                        .pricingPhaseList?.[0]?.formattedPrice
+                    : (product.data as RNIap.SubscriptionIOS)
+                        ?.introductoryPrice ||
+                      (product.data as RNIap.SubscriptionIOS)
+                        ?.localizedPrice}{" "}
+                  {product?.cycleText
+                    ? `for ${product.cycleText}`
+                    : product?.offerType}
+                </Heading>
+                {product?.cycleText ? (
+                  <Paragraph
+                    style={{
+                      color: colors.secondary.paragraph,
+                      alignSelf: "center",
+                      textAlign: "center"
+                    }}
+                    size={SIZE.md}
+                  >
+                    then {getStandardPrice()} {product?.offerType}.
+                  </Paragraph>
+                ) : null}
+              </View>
+            </View>
           ) : null}
 
           {user && !product ? (
             <>
-              {heading || monthlyPlan?.info?.discount > 0 ? (
+              {heading || (monthlyPlan?.info?.discount || 0) > 0 ? (
                 <>
-                  {monthlyPlan && monthlyPlan?.info?.discount > 0 ? (
+                  {monthlyPlan && (monthlyPlan?.info?.discount || 0) > 0 ? (
                     <View
                       style={{
                         alignSelf: "center",
@@ -273,7 +431,12 @@ export const PricingPlans = ({
                         marginBottom: 20
                       }}
                     >
-                      <Heading color={colors.primary.accent}>
+                      <Heading
+                        style={{
+                          textAlign: "center"
+                        }}
+                        color={colors.primary.accent}
+                      >
                         Get {monthlyPlan?.info?.discount}% off in{" "}
                         {monthlyPlan?.info?.country}
                       </Heading>
@@ -300,12 +463,15 @@ export const PricingPlans = ({
                 }}
               >
                 <PricingItem
-                  onPress={() => buySubscription(monthlyPlan?.product)}
+                  onPress={() => {
+                    if (!monthlyPlan?.product) return;
+                    buySubscription(monthlyPlan?.product);
+                  }}
                   compact={compact}
                   product={{
                     type: "monthly",
                     data: monthlyPlan?.product,
-                    info: "Pay monthly, cancel anytime."
+                    info: "Pay once a month, cancel anytime."
                   }}
                 />
 
@@ -319,12 +485,15 @@ export const PricingPlans = ({
                 )}
 
                 <PricingItem
-                  onPress={() => buySubscription(yearlyPlan?.product)}
+                  onPress={() => {
+                    if (!yearlyPlan?.product) return;
+                    buySubscription(yearlyPlan?.product);
+                  }}
                   compact={compact}
                   product={{
                     type: "yearly",
                     data: yearlyPlan?.product,
-                    info: "Pay yearly"
+                    info: "Pay once a year, cancel anytime."
                   }}
                 />
               </View>
@@ -346,9 +515,9 @@ export const PricingPlans = ({
                         eSendEvent(eCloseSimpleDialog);
                         setBuying(true);
                         try {
-                          if (!(await getPromo(value)))
+                          if (!(await getPromo(value as string)))
                             throw new Error("Error applying promo code");
-                          ToastEvent.show({
+                          ToastManager.show({
                             heading: "Discount applied!",
                             type: "success",
                             context: "local"
@@ -356,9 +525,9 @@ export const PricingPlans = ({
                           setBuying(false);
                         } catch (e) {
                           setBuying(false);
-                          ToastEvent.show({
+                          ToastManager.show({
                             heading: "Promo code invalid or expired",
-                            message: e.message,
+                            message: (e as Error).message,
                             type: "error",
                             context: "local"
                           });
@@ -396,7 +565,7 @@ export const PricingPlans = ({
                     width={250}
                     style={{
                       paddingHorizontal: 12,
-                      marginTop: 30,
+                      marginTop: product?.type === "promo" ? 0 : 30,
                       marginBottom: 10
                     }}
                   />
@@ -427,7 +596,10 @@ export const PricingPlans = ({
               ) : (
                 <>
                   <Button
-                    onPress={() => buySubscription(product.data)}
+                    onPress={() => {
+                      if (!product?.data) return;
+                      buySubscription(product.data);
+                    }}
                     height={40}
                     width="50%"
                     type="accent"
@@ -436,7 +608,7 @@ export const PricingPlans = ({
 
                   <Button
                     onPress={() => {
-                      setProduct(null);
+                      setProduct(undefined);
                     }}
                     style={{
                       marginTop: 5
@@ -500,7 +672,7 @@ export const PricingPlans = ({
                 textAlign: "center"
               }}
             >
-              By subscribing, your will be charged on your Google Account, and
+              By subscribing, you will be charged on your Google Account, and
               your subscription will automatically renew until you cancel prior
               to the end of the then current period.
             </Paragraph>
@@ -523,7 +695,7 @@ export const PricingPlans = ({
               <Paragraph
                 size={SIZE.xs}
                 onPress={() => {
-                  openLinkInBrowser("https://notesnook.com/tos", colors)
+                  openLinkInBrowser("https://notesnook.com/tos")
                     .catch(() => {})
                     .then(() => {});
                 }}
@@ -538,7 +710,7 @@ export const PricingPlans = ({
               <Paragraph
                 size={SIZE.xs}
                 onPress={() => {
-                  openLinkInBrowser("https://notesnook.com/privacy", colors)
+                  openLinkInBrowser("https://notesnook.com/privacy")
                     .catch(() => {})
                     .then(() => {});
                 }}

apps/mobile/app/components/premium/pro-tag.js

@@ -23,6 +23,11 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useThemeColors } from "@notesnook/theme";
 import Paragraph from "../ui/typography/paragraph";
 
+/**
+ *
+ * @param {any} param0
+ * @returns
+ */
 export const ProTag = ({ width, size, background }) => {
   const { colors } = useThemeColors();
 

apps/mobile/app/components/properties/color-tags.tsx

@@ -17,7 +17,10 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useState } from "react";
+import { DefaultColors } from "@notesnook/core/dist/collections/colors";
+import { Color, ItemReference, Note } from "@notesnook/core/dist/types";
+import { useThemeColors } from "@notesnook/theme";
+import React, { useEffect, useState } from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
@@ -25,45 +28,56 @@ import { db } from "../../common/database";
 import { eSendEvent } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import { useMenuStore } from "../../stores/use-menu-store";
+import { useRelationStore } from "../../stores/use-relation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { ColorValues } from "../../utils/colors";
 import { refreshNotesPage } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { PressableButton } from "../ui/pressable";
-import { useThemeColors } from "@notesnook/theme";
 
-export const ColorTags = ({ item }) => {
+export const ColorTags = ({ item }: { item: Note }) => {
   const { colors } = useThemeColors();
-  const [note, setNote] = useState(item);
   const setColorNotes = useMenuStore((state) => state.setColorNotes);
   const isTablet = useSettingStore((state) => state.deviceMode) !== "mobile";
-  const changeColor = async (color) => {
-    if (note.color === color.name) {
-      await db.notes.note(note.id).uncolor();
-    } else {
-      await db.notes.note(note.id).color(color.name);
+  const updater = useRelationStore((state) => state.updater);
+
+  const getColorInfo = async (colorCode: string) => {
+    const dbColor = await db.colors.all.find((v) =>
+      v.and([v(`colorCode`, "==", colorCode)])
+    );
+    let isLinked = false;
+
+    if (dbColor) {
+      const hasRelation = await db.relations.from(dbColor, "note").has(item.id);
+      if (hasRelation) {
+        isLinked = true;
+      }
     }
-    let _note = db.notes.note(note.id).data;
-    setNote({ ..._note });
-    setColorNotes();
-    Navigation.queueRoutesForUpdate();
-    eSendEvent(refreshNotesPage);
+
+    return {
+      linked: isLinked,
+      item: dbColor
+    };
   };
 
-  const _renderColor = (c) => {
-    const color = {
-      name: c,
-      value: ColorValues[c?.toLowerCase()]
-    };
+  const ColorItem = ({ name }: { name: keyof typeof DefaultColors }) => {
+    const color = DefaultColors[name];
+    const [colorInfo, setColorInfo] = useState<{
+      linked: boolean;
+      item: Color | undefined;
+    }>();
+
+    useEffect(() => {
+      getColorInfo(color).then((info) => setColorInfo(info));
+    }, [color]);
 
     return (
       <PressableButton
         type="accent"
-        accentColor={colors.static[color.name?.toLowerCase()]}
+        accentColor={color}
         accentText={colors.static.white}
-        testID={notesnook.ids.dialogs.actionsheet.color(c)}
-        key={color.value}
-        onPress={() => changeColor(color)}
+        testID={notesnook.ids.dialogs.actionsheet.color(name)}
+        key={color}
+        onPress={() => changeColor(name)}
         customStyle={{
           width: 30,
           height: 30,
@@ -73,13 +87,40 @@ export const ColorTags = ({ item }) => {
           marginRight: isTablet ? 10 : undefined
         }}
       >
-        {note.color?.toLowerCase() === color.name ? (
+        {colorInfo?.linked ? (
           <Icon testID="icon-check" name="check" color="white" size={SIZE.lg} />
         ) : null}
       </PressableButton>
     );
   };
 
+  const changeColor = async (color: string) => {
+    const colorInfo = await getColorInfo(DefaultColors[color]);
+
+    if (colorInfo.item) {
+      if (colorInfo.linked) {
+        await db.relations.unlink(colorInfo.item, item);
+      } else {
+        await db.relations.add(colorInfo.item, item);
+      }
+    } else {
+      const colorId = await db.colors.add({
+        title: color,
+        colorCode: DefaultColors[color]
+      });
+
+      const dbColor = await db.colors.color(colorId);
+      if (dbColor) {
+        await db.relations.add(dbColor as unknown as ItemReference, item);
+      }
+    }
+
+    useRelationStore.getState().update();
+    setColorNotes();
+    Navigation.queueRoutesForUpdate();
+    eSendEvent(refreshNotesPage);
+  };
+
   return (
     <View
       style={{
@@ -92,7 +133,9 @@ export const ColorTags = ({ item }) => {
         justifyContent: isTablet ? "center" : "space-between"
       }}
     >
-      {Object.keys(ColorValues).map(_renderColor)}
+      {Object.keys(DefaultColors).map((name: keyof typeof DefaultColors) => {
+        return <ColorItem key={name} name={name} />;
+      })}
     </View>
   );
 };

apps/mobile/app/components/properties/date-meta.js

@@ -53,23 +53,24 @@ export const DateMeta = ({ item }) => {
     return keys.filter((key) => key.startsWith("date") && key !== "date");
   }
 
-  const renderItem = (key) => (
-    <View
-      key={key}
-      style={{
-        flexDirection: "row",
-        justifyContent: "space-between",
-        paddingVertical: 3
-      }}
-    >
-      <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
-        {getNameFromKey(key)}
-      </Paragraph>
-      <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
-        {getFormattedDate(item[key], "date-time")}
-      </Paragraph>
-    </View>
-  );
+  const renderItem = (key) =>
+    !item[key] ? null : (
+      <View
+        key={key}
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          paddingVertical: 3
+        }}
+      >
+        <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+          {getNameFromKey(key)}
+        </Paragraph>
+        <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+          {getFormattedDate(item[key], "date-time")}
+        </Paragraph>
+      </View>
+    );
 
   return (
     <View

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

@@ -16,14 +16,13 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
+import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { Platform, View } from "react-native";
 import { FlatList } from "react-native-actions-sheet";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { presentSheet } from "../../services/event-manager";
-import SearchService from "../../services/search";
-import { useThemeColors } from "@notesnook/theme";
 import { ColorValues } from "../../utils/colors";
 import { SIZE } from "../../utils/size";
 import SheetProvider from "../sheet-provider";
@@ -34,7 +33,8 @@ import { DateMeta } from "./date-meta";
 import { Items } from "./items";
 import Notebooks from "./notebooks";
 import { Synced } from "./synced";
-import { Tags, TagStrip } from "./tags";
+import { TagStrip, Tags } from "./tags";
+
 const Line = ({ top = 6, bottom = 6 }) => {
   const { colors } = useThemeColors();
   return (
@@ -52,9 +52,7 @@ const Line = ({ top = 6, bottom = 6 }) => {
 
 export const Properties = ({ close = () => {}, item, buttons = [] }) => {
   const { colors } = useThemeColors();
-  const alias = item.alias || item.title;
   const isColor = !!ColorValues[item.title];
-
   if (!item || !item.id) {
     return (
       <Paragraph style={{ marginVertical: 10, alignSelf: "center" }}>
@@ -62,6 +60,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
       </Paragraph>
     );
   }
+
   return (
     <FlatList
       keyboardShouldPersistTaps="always"
@@ -90,9 +89,13 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
                   #
                 </Heading>
               ) : null}
-              {alias}
+              {item.title}
             </Heading>
 
+            {item.type === "notebook" && item.description ? (
+              <Paragraph>{item.description}</Paragraph>
+            ) : null}
+
             {item.type === "note" ? (
               <TagStrip close={close} item={item} />
             ) : null}
@@ -117,24 +120,24 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
           <Line bottom={0} />
           {item.type === "note" ? <Tags close={close} item={item} /> : null}
 
-          <View
-            style={{
-              paddingHorizontal: 12
-            }}
-          >
-            <Notebooks note={item} close={close} />
-          </View>
+          {item.type === "note" ? (
+            <View
+              style={{
+                paddingHorizontal: 12
+              }}
+            >
+              <Notebooks note={item} close={close} />
+            </View>
+          ) : null}
 
           <Items
             item={item}
             buttons={buttons}
             close={() => {
               close();
-              setTimeout(() => {
-                SearchService.updateAndSearch();
-              }, 1000);
             }}
           />
+
           <Synced item={item} close={close} />
 
           {DDS.isTab ? (
@@ -151,7 +154,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
   );
 };
 
-Properties.present = (item, buttons = [], isSheet) => {
+Properties.present = async (item, buttons = [], isSheet) => {
   if (!item) return;
   let type = item?.type;
   let props = [];
@@ -163,7 +166,7 @@ Properties.present = (item, buttons = [], isSheet) => {
       break;
     case "note":
       android = Platform.OS === "android" ? ["pin-to-notifications"] : [];
-      props[0] = db.notes.note(item.id).data;
+      props[0] = await db.notes.note(item.id);
       props.push([
         "notebooks",
         "add-reminder",
@@ -188,33 +191,34 @@ Properties.present = (item, buttons = [], isSheet) => {
       ]);
       break;
     case "notebook":
-      props[0] = db.notebooks.notebook(item.id).data;
+      props[0] = await db.notebooks.notebook(item.id);
       props.push([
         "edit-notebook",
         "pin",
         "add-shortcut",
         "trash",
-        "default-notebook"
-      ]);
-      break;
-    case "topic":
-      props[0] = db.notebooks
-        .notebook(item.notebookId)
-        .topics.topic(item.id)._topic;
-      props.push([
-        "move-notes",
-        "edit-topic",
-        "add-shortcut",
-        "trash",
-        "default-topic"
+        "default-notebook",
+        "add-notebook"
       ]);
       break;
+    // case "topic":
+    //   props[0] = db.notebooks
+    //     .notebook(item.notebookId)
+    //     .topics.topic(item.id)._topic;
+    //   props.push([
+    //     "move-notes",
+    //     "edit-topic",
+    //     "add-shortcut",
+    //     "trash",
+    //     "default-topic"
+    //   ]);
+    //   break;
     case "tag":
-      props[0] = db.tags.tag(item.id);
+      props[0] = await db.tags.tag(item.id);
       props.push(["add-shortcut", "trash", "rename-tag"]);
       break;
     case "reminder": {
-      props[0] = db.reminders.reminder(item.id);
+      props[0] = await db.reminders.reminder(item.id);
       props.push(["edit-reminder", "trash", "disable-reminder"]);
       break;
     }