mobile: conditionally include trial plan conditions based on GitHub release status

Respect spacing when writing price in a currency.
Fix incorrect discount calculation when comparing products of a plan based on int values, use parseFloat to parse correct values for comparision

.github/workflows/desktop.preview.yml

@@ -101,6 +101,7 @@ jobs:
 
       - name: Build dmg
         env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CSC_LINK: ${{ secrets.mac_certs }}
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
           APPLE_API_KEY: ~/private_keys/AuthKey_${{ secrets.api_key_id }}.p8
@@ -146,13 +147,14 @@ jobs:
       - name: Install sqlite-better-trigram for all arch
         run: |
           npm i --cpu x64 sqlite-better-trigram
-          npm i --cpu x64 sqlite3-fts5-html
         working-directory: ./apps/desktop
 
       - name: Build Electron wrapper
         run: npm run tx @notesnook/desktop:release
 
       - name: Build AppImage
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: yarn electron-builder --config=electron-builder.config.js --linux AppImage:x64 -p never
         working-directory: ./apps/desktop
 
@@ -163,54 +165,10 @@ jobs:
           name: linux-x64-build
           path: apps/desktop/output/*.AppImage
 
-  build-linux-arm64:
-    name: Build for Linux arm64
-    needs: build
-    runs-on: ubuntu-22.04-arm
-    outputs:
-      linux-arm64-artifact-url: ${{ steps.artifact-upload-step.outputs.artifact-url }}
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: ./.github/actions/setup-node-with-cache
-
-      - name: Download build
-        uses: actions/download-artifact@v4
-        with:
-          name: build
-          path: ./apps/web/build
-
-      - name: Install packages
-        run: |
-          npm ci --ignore-scripts --prefer-offline --no-audit
-          npm run bootstrap -- --scope=desktop
-
-      - name: Install sqlite-better-trigram for all arch
-        run: |
-          npm i --cpu arm64 sqlite-better-trigram
-          npm i --cpu arm64 sqlite3-fts5-html
-        working-directory: ./apps/desktop
-
-      - name: Build Electron wrapper
-        run: npm run tx @notesnook/desktop:release
-
-      - name: Build AppImage
-        run: yarn electron-builder --config=electron-builder.config.js --linux AppImage:arm64 -p never
-        working-directory: ./apps/desktop
-
-      - name: Upload AppImage artifact
-        id: artifact-upload-step
-        uses: actions/upload-artifact@v4
-        with:
-          name: linux-arm64-build
-          path: apps/desktop/output/*.AppImage
-
   build-windows:
     name: Build for Windows
     needs: build
-    runs-on: windows-2022
+    runs-on: windows-latest
     outputs:
       windows-artifact-url: ${{ steps.artifact-upload-step.outputs.artifact-url }}
     steps:
@@ -258,8 +216,7 @@ jobs:
 
   post-pr-comment:
     name: Post PR comment with preview URLs
-    needs:
-      [build, build-macos, build-linux-x64, build-linux-arm64, build-windows]
+    needs: [build, build-macos, build-linux-x64, build-windows]
     runs-on: ubuntu-latest
     steps:
       - name: Post or update PR comment
@@ -267,7 +224,6 @@ jobs:
         env:
           macos_artifact_url: ${{ needs.build-macos.outputs.macos-artifact-url }}
           linux_x64_artifact_url: ${{ needs.build-linux-x64.outputs.linux-x64-artifact-url }}
-          linux_arm64_artifact_url: ${{ needs.build-linux-arm64.outputs.linux-arm64-artifact-url }}
           windows_artifact_url: ${{ needs.build-windows.outputs.windows-artifact-url }}
         with:
           script: |
@@ -276,7 +232,6 @@ jobs:
             const previewUrl = [
               { platform: 'macOS', url: process.env.macos_artifact_url },
               { platform: 'Linux x64', url: process.env.linux_x64_artifact_url },
-              { platform: 'Linux arm64', url: process.env.linux_arm64_artifact_url },
               { platform: 'Windows x64', url: process.env.windows_artifact_url },
             ].filter(u => u.url).map(u => `- [${u.platform}](${u.url})`).join('\n');
             const body = `${marker}\n**Desktop Previews**\n\n${previewUrl || 'Preview URL unavailable — check workflow logs.'}\n\nCommit: ${process.env.GITHUB_SHA}\n`;

.github/workflows/desktop.publish.yml

@@ -363,7 +363,7 @@ jobs:
     name: Build for Windows
     needs: build
     if: inputs.build-windows
-    runs-on: windows-2022
+    runs-on: windows-latest
 
     steps:
       - name: Check out Git repository

.github/workflows/desktop.tests.yml

@@ -18,12 +18,11 @@ on:
       - ".github/workflows/desktop.tests.yml"
 
 jobs:
-  test-macos-x64:
-    name: Test macOS x64
-    runs-on: macos-15-intel
-
+  build:
+    name: Build
+    runs-on: ubuntu-22.04
     steps:
-      - name: Check out Git repository
+      - name: Checkout
         uses: actions/checkout@v4
 
       - name: Setup Node
@@ -34,10 +33,44 @@ jobs:
           npm ci --ignore-scripts --prefer-offline --no-audit
           npm run bootstrap -- --scope=web
 
-      - name: Install sqlite-better-trigram for all arch
+      - name: Generate desktop build
+        run: npm run tx @notesnook/web:build:desktop
+
+      - name: Archive build artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: apps/web/build/**/*
+
+  test-macos-x64:
+    name: Test macOS x64
+    needs: build
+    runs-on: macos-15-intel
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Download build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: ./apps/web/build
+
+      - name: Install packages
         run: |
-          npm i --cpu x64 sqlite-better-trigram
-          npm i --cpu x64 sqlite3-fts5-html
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
+
+      - name: Build Electron wrapper
+        run: npm run tx @notesnook/desktop:release
+
+      - name: Build app
+        run: |
+          yarn electron-builder --config=electron-builder.config.js --mac --dir --x64
         working-directory: ./apps/desktop
 
       - name: Run tests x64
@@ -54,6 +87,7 @@ jobs:
 
   test-macos:
     name: Test macOS
+    needs: build
     runs-on: macos-latest
 
     steps:
@@ -63,15 +97,23 @@ jobs:
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
 
+      - name: Download build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: ./apps/web/build
+
       - name: Install packages
         run: |
           npm ci --ignore-scripts --prefer-offline --no-audit
-          npm run bootstrap -- --scope=web
+          npm run bootstrap -- --scope=desktop
 
-      - name: Install sqlite-better-trigram for all arch
+      - name: Build Electron wrapper
+        run: npm run tx @notesnook/desktop:release
+
+      - name: Build app
         run: |
-          npm i --cpu arm64 sqlite-better-trigram
-          npm i --cpu arm64 sqlite3-fts5-html
+          yarn electron-builder --config=electron-builder.config.js --mac --dir --arm64
         working-directory: ./apps/desktop
 
       - name: Run tests arm64
@@ -88,6 +130,7 @@ jobs:
 
   test-linux:
     name: Test for Linux
+    needs: build
     runs-on: ubuntu-22.04
 
     steps:
@@ -97,15 +140,29 @@ jobs:
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
 
+      - name: Download build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: ./apps/web/build
+
       - name: Install packages
         run: |
           npm ci --ignore-scripts --prefer-offline --no-audit
-          npm run bootstrap -- --scope=web
+          npm run bootstrap -- --scope=desktop
 
       - name: Install sqlite-better-trigram for all arch
         run: |
+          npm i --cpu arm64 sqlite-better-trigram
           npm i --cpu x64 sqlite-better-trigram
-          npm i --cpu x64 sqlite3-fts5-html
+        working-directory: ./apps/desktop
+
+      - name: Build Electron wrapper
+        run: npm run tx @notesnook/desktop:release
+
+      - name: Build app
+        run: |
+          yarn electron-builder --config=electron-builder.config.js --linux --dir --arm64 --x64
         working-directory: ./apps/desktop
 
       - name: Run tests
@@ -122,7 +179,8 @@ jobs:
 
   test-windows:
     name: Test for Windows
-    runs-on: windows-2022
+    needs: build
+    runs-on: windows-latest
 
     steps:
       - name: Check out Git repository
@@ -131,17 +189,34 @@ jobs:
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
 
+      - name: Download build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: ./apps/web/build
+
       - name: Install packages
         run: |
           npm ci --ignore-scripts --prefer-offline --no-audit
-          npm run bootstrap -- --scope=web
+          npm run bootstrap -- --scope=desktop
 
       - name: Install sqlite-better-trigram for all arch
         run: |
+          npm i --cpu arm64 sqlite-better-trigram
           npm i --cpu x64 sqlite-better-trigram
+
+          npm i --cpu arm64 sqlite3-fts5-html
           npm i --cpu x64 sqlite3-fts5-html
         working-directory: ./apps/desktop
 
+      - name: Build Electron wrapper
+        run: node scripts/execute.mjs @notesnook/desktop:release
+
+      - name: Build app
+        run: |
+          npx cross-env NOTESNOOK_STAGING=true yarn electron-builder --config=electron-builder.config.js --win --dir --arm64 --x64
+        working-directory: ./apps/desktop
+
       - name: Run tests
         run: npm run test
         working-directory: ./apps/desktop

.github/workflows/ios.preview.firebase.yml

@@ -38,11 +38,6 @@ jobs:
         with:
           xcode-version: "26.1.1"
 
-      - name: Setup iOS Platform
-        run: |
-          xcodebuild -downloadPlatform iOS -exportPath ~/Downloads
-          xcodebuild -importPlatform ~/Downloads/iphonesimulator_26.1_23B86.dmg
-
       - name: Install node modules
         run: |
           npm ci --ignore-scripts --prefer-offline --no-audit

.github/workflows/ios.publish.yml

@@ -19,11 +19,6 @@ jobs:
         with:
           xcode-version: "26.1.1"
 
-      - name: Setup iOS Platform
-        run: |
-          xcodebuild -downloadPlatform iOS -exportPath ~/Downloads
-          xcodebuild -importPlatform ~/Downloads/iphonesimulator_26.1_23B86.dmg
-
       - name: Install node modules
         run: |
           npm ci --ignore-scripts --prefer-offline --no-audit
@@ -116,7 +111,6 @@ jobs:
           api-private-key: ${{ secrets.API_KEY }}
 
       - name: Upload Notesnook.ipa to Github
-        continue-on-error: true
         uses: actions/upload-artifact@v4
         with:
           name: Notesnook.zip

apps/desktop/__tests__/auto-updates.test.ts

@@ -17,91 +17,155 @@ 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 { test, expect } from "@nn/test";
+import { testCleanup, test } from "./test-override.js";
+import { writeFile } from "fs/promises";
+import { Page } from "playwright";
 import { gt, lt } from "semver";
-import { AppModel } from "../../web/__e2e__/models/app.model.js";
+import { describe } from "vitest";
 
-test.extend({ options: { version: "3.0.0" } })(
-  "update starts downloading if version is outdated",
-  async ({ page }) => {
-    await page.waitForSelector(".ProseMirror");
+test("update starts downloading if version is outdated", async ({
+  ctx: { page },
+  expect,
+  onTestFinished
+}) => {
+  onTestFinished(testCleanup);
 
-    await page
-      .locator(".theme-scope-statusBar")
-      .getByRole("button", { name: /updating/i })
-      .waitFor({ state: "attached" });
-  }
-);
+  await page.waitForSelector("#authForm");
+  expect(
+    await page.getByRole("button", { name: "Create account" }).isVisible()
+  ).toBe(true);
 
-test.extend({
-  options: {
-    version: "3.0.0",
-    config: {
-      automaticUpdates: false
-    }
-  }
-})(
-  "update is only shown if version is outdated and auto updates are disabled",
-  async ({ page }) => {
-    await page.waitForSelector(".ProseMirror");
+  await page
+    .getByRole("button", { name: "Skip & go directly to the app" })
+    .click();
 
-    const app = new AppModel(page);
-    const settings = await app.goToSettings();
+  await skipDialog(page);
 
-    await settings.checkForUpdates();
-    await settings.close();
-
-    await page
-      .locator(".theme-scope-statusBar")
-      .getByRole("button", { name: /available/i })
-      .waitFor({ state: "attached" });
-  }
-);
-
-test.extend({
-  options: {
-    version: "3.0.0-beta.0",
-    config: {
-      automaticUpdates: false,
-      releaseTrack: "beta"
-    }
-  }
-})("update to stable if it is newer", async ({ page }) => {
   await page.waitForSelector(".ProseMirror");
 
-  const app = new AppModel(page);
-  const settings = await app.goToSettings();
-
-  await settings.checkForUpdates();
-  await settings.close();
-
-  const updateButton = page
+  await page
     .locator(".theme-scope-statusBar")
-    .getByRole("button", { name: /available/i });
-  await updateButton.waitFor({ state: "visible" });
-  const content = await updateButton.textContent();
-  const version = content?.split(" ")?.[0] || "";
-  expect(gt(version, "3.0.0-beta.0")).toBe(true);
+    .getByRole("button", { name: /updating/i })
+    .waitFor({ state: "attached" });
 });
 
-test.extend({
-  options: {
-    version: "99.0.0-beta.0",
-    config: {
-      automaticUpdates: false,
-      releaseTrack: "beta"
-    }
-  }
-})(
-  "update is not available if it latest stable version is older",
-  async ({ page }) => {
+test("update is only shown if version is outdated and auto updates are disabled", async ({
+  ctx,
+  expect,
+  onTestFinished
+}) => {
+  onTestFinished(testCleanup);
+
+  await ctx.app.close();
+  await writeFile(
+    ctx.configPath,
+    JSON.stringify({
+      automaticUpdates: false
+    })
+  );
+
+  await ctx.relaunch();
+
+  const { page } = ctx;
+
+  await page.waitForSelector("#authForm");
+
+  expect(
+    await page.getByRole("button", { name: "Create account" }).isVisible()
+  ).toBe(true);
+
+  await page
+    .getByRole("button", { name: "Skip & go directly to the app" })
+    .click();
+
+  await skipDialog(page);
+
+  await page.waitForSelector(".ProseMirror");
+
+  await page
+    .locator(".theme-scope-statusBar")
+    .getByRole("button", { name: /available/i })
+    .waitFor({ state: "attached" });
+});
+
+describe("update to stable if it is newer", () => {
+  test.scoped({ options: { version: "3.0.0-beta.0" } });
+  test("test", async ({ ctx, expect, onTestFinished }) => {
+    onTestFinished(testCleanup);
+
+    await ctx.app.close();
+    await writeFile(
+      ctx.configPath,
+      JSON.stringify({
+        automaticUpdates: false,
+        releaseTrack: "beta"
+      })
+    );
+
+    await ctx.relaunch();
+
+    const { page } = ctx;
+
+    await page.waitForSelector("#authForm");
+
+    expect(
+      await page.getByRole("button", { name: "Create account" }).isVisible()
+    ).toBe(true);
+
+    await page
+      .getByRole("button", { name: "Skip & go directly to the app" })
+      .click();
+
+    await skipDialog(page);
+
     await page.waitForSelector(".ProseMirror");
 
-    const app = new AppModel(page);
-    const settings = await app.goToSettings();
+    const updateButton = page
+      .locator(".theme-scope-statusBar")
+      .getByRole("button", { name: /available/i });
+    await updateButton.waitFor({ state: "visible" });
+    const content = await updateButton.textContent();
+    const version = content?.split(" ")?.[0] || "";
+    expect(gt(version, "3.0.0-beta.0")).toBe(true);
+  });
+});
 
-    await settings.checkForUpdates();
-    await settings.close();
+describe("update is not available if it latest stable version is older", () => {
+  test.scoped({ options: { version: "99.0.0-beta.0" } });
+  test("test", async ({ ctx, expect, onTestFinished }) => {
+    onTestFinished(testCleanup);
+
+    await ctx.app.close();
+    await writeFile(
+      ctx.configPath,
+      JSON.stringify({
+        automaticUpdates: false,
+        releaseTrack: "beta"
+      })
+    );
+
+    await ctx.relaunch();
+
+    const { page } = ctx;
+
+    await page.waitForSelector("#authForm");
+
+    expect(
+      await page.getByRole("button", { name: "Create account" }).isVisible()
+    ).toBe(true);
+
+    await page
+      .getByRole("button", { name: "Skip & go directly to the app" })
+      .click();
+
+    await skipDialog(page);
+
+    await page.waitForSelector(".ProseMirror");
+
+    await page
+      .locator(".theme-scope-statusBar")
+      .getByRole("button", { name: /checking for updates/i })
+      .waitFor({ state: "hidden" });
 
     expect(
       await page
@@ -109,24 +173,45 @@ test.extend({
         .getByRole("button", { name: /available/i })
         .isHidden()
     ).toBe(true);
-  }
-);
+  });
+});
+
+describe("downgrade to stable on switching to stable release track", () => {
+  test.scoped({ options: { version: "99.0.0-beta.0" } });
+  test("test", async ({ ctx, expect, onTestFinished }) => {
+    onTestFinished(testCleanup);
+
+    await ctx.app.close();
+    await writeFile(
+      ctx.configPath,
+      JSON.stringify({
+        automaticUpdates: false,
+        releaseTrack: "stable"
+      })
+    );
+
+    await ctx.relaunch();
+
+    const { page } = ctx;
+
+    await page.waitForSelector("#authForm");
+
+    expect(
+      await page.getByRole("button", { name: "Create account" }).isVisible()
+    ).toBe(true);
+
+    await page
+      .getByRole("button", { name: "Skip & go directly to the app" })
+      .click();
+
+    await skipDialog(page);
 
-test.extend({
-  options: {
-    version: "99.0.0-beta.0",
-    config: { automaticUpdates: false, releaseTrack: "stable" }
-  }
-})(
-  "downgrade to stable on switching to stable release track",
-  async ({ page }) => {
     await page.waitForSelector(".ProseMirror");
 
-    const app = new AppModel(page);
-    const settings = await app.goToSettings();
-
-    await settings.checkForUpdates();
-    await settings.close();
+    await page
+      .locator(".theme-scope-statusBar")
+      .getByRole("button", { name: /checking for updates/i })
+      .waitFor({ state: "hidden" });
 
     const updateButton = page
       .locator(".theme-scope-statusBar")
@@ -135,5 +220,23 @@ test.extend({
     const content = await updateButton.textContent();
     const version = content?.split(" ")?.[0] || "";
     expect(lt(version, "99.0.0-beta.0")).toBe(true);
+  });
+});
+
+async function skipDialog(page: Page) {
+  try {
+    const dialog = page.locator(".ReactModal__Content");
+    const positiveButton = dialog.locator(
+      "button[data-role='positive-button']"
+    );
+    const negativeButton = dialog.locator(
+      "button[data-role='negative-button']"
+    );
+    if (await positiveButton.isVisible())
+      await positiveButton.click({ timeout: 1000 });
+    else if (await negativeButton.isVisible())
+      await negativeButton.click({ timeout: 1000 });
+  } catch (e) {
+    // ignore error
   }
-);
+}

apps/desktop/__tests__/electron-test/base-test.ts

@@ -1,63 +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 { mergeTests, test } from "@playwright/test";
-import type { CommonFixtures, CommonWorkerFixtures } from "./common-fixtures";
-import { commonFixtures } from "./common-fixtures";
-import { platformTest } from "./platform-fixtures";
-import { testModeTest } from "./test-mode-fixtures";
-
-export const base = test;
-
-export const baseTest = mergeTests(base, platformTest, testModeTest).extend<
-  CommonFixtures,
-  CommonWorkerFixtures
->(commonFixtures);
-
-export function step<
-  This extends NonNullable<unknown>,
-  Args extends any[],
-  Return
->(
-  target: (this: This, ...args: Args) => Promise<Return>,
-  context: ClassMethodDecoratorContext<
-    This,
-    (this: This, ...args: Args) => Promise<Return>
-  >
-) {
-  function replacementMethod(this: This, ...args: Args): Promise<Return> {
-    const name =
-      this.constructor.name +
-      "." +
-      (context.name as string) +
-      "(" +
-      args.map((a) => JSON.stringify(a)).join(",") +
-      ")";
-    return test.step(name, async () => {
-      return await target.call(this, ...args);
-    });
-  }
-  return replacementMethod;
-}
-
-// declare global {
-//   interface Window {
-//     builtins: Builtins;
-//   }
-// }

apps/desktop/__tests__/electron-test/common-fixtures.ts

@@ -1,347 +0,0 @@
-/* eslint-disable header/header */
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { Fixtures } from "@playwright/test";
-import type { ChildProcess } from "child_process";
-import { execSync, spawn } from "child_process";
-import net from "net";
-import fs from "fs";
-import { stripAnsi } from "./playwright-utils";
-
-type TestChildParams = {
-  command: string[];
-  cwd?: string;
-  env?: NodeJS.ProcessEnv;
-  shell?: boolean;
-  onOutput?: () => void;
-};
-
-import childProcess from "child_process";
-
-type ProcessData = {
-  pid: number; // process ID
-  pgrp: number; // process group ID
-  children: Set<ProcessData>; // direct children of the process
-};
-
-function readAllProcessesLinux(): {
-  pid: number;
-  ppid: number;
-  pgrp: number;
-}[] {
-  const result: { pid: number; ppid: number; pgrp: number }[] = [];
-  for (const dir of fs.readdirSync("/proc")) {
-    const pid = +dir;
-    if (isNaN(pid)) continue;
-    try {
-      const statFile = fs.readFileSync(`/proc/${pid}/stat`, "utf8");
-      // Format of /proc/*/stat is described https://man7.org/linux/man-pages/man5/proc.5.html
-      const match = statFile.match(
-        /^(?<pid>\d+)\s+\((?<comm>.*)\)\s+(?<state>R|S|D|Z|T|t|W|X|x|K|W|P)\s+(?<ppid>\d+)\s+(?<pgrp>\d+)/
-      );
-      if (match && match.groups) {
-        result.push({
-          pid: +match.groups.pid,
-          ppid: +match.groups.ppid,
-          pgrp: +match.groups.pgrp
-        });
-      }
-    } catch (e) {
-      // We don't have access to some /proc/<pid>/stat file.
-    }
-  }
-  return result;
-}
-
-function readAllProcessesMacOS(): {
-  pid: number;
-  ppid: number;
-  pgrp: number;
-}[] {
-  const result: { pid: number; ppid: number; pgrp: number }[] = [];
-  const processTree = childProcess.spawnSync("ps", ["-eo", "pid,pgid,ppid"]);
-  const lines = processTree.stdout.toString().trim().split("\n");
-  for (const line of lines) {
-    const [pid, pgrp, ppid] = line
-      .trim()
-      .split(/\s+/)
-      .map((token) => +token);
-    // On linux, the very first line of `ps` is the header with "PID PGID PPID".
-    if (isNaN(pid) || isNaN(pgrp) || isNaN(ppid)) continue;
-    result.push({ pid, ppid, pgrp });
-  }
-  return result;
-}
-
-function buildProcessTreePosix(pid: number): ProcessData | undefined {
-  // Certain Linux distributions might not have `ps` installed.
-  const allProcesses =
-    process.platform === "darwin"
-      ? readAllProcessesMacOS()
-      : readAllProcessesLinux();
-  const pidToProcess = new Map<number, ProcessData>();
-  for (const { pid, pgrp } of allProcesses)
-    pidToProcess.set(pid, { pid, pgrp, children: new Set() });
-  for (const { pid, ppid } of allProcesses) {
-    const parent = pidToProcess.get(ppid);
-    const child = pidToProcess.get(pid);
-    // On POSIX, certain processes might not have parent (e.g. PID=1 and occasionally PID=2)
-    // or we might not have access to it proc info.
-    if (parent && child) parent.children.add(child);
-  }
-  return pidToProcess.get(pid);
-}
-
-export class TestChildProcess {
-  params: TestChildParams;
-  process: ChildProcess;
-  output = "";
-  stdout = "";
-  stderr = "";
-  fullOutput = "";
-  onOutput?: (chunk: string | Buffer) => void;
-  exited: Promise<{ exitCode: number | null; signal: string | null }>;
-  exitCode: Promise<number | null>;
-
-  private _outputCallbacks = new Set<() => void>();
-
-  constructor(params: TestChildParams) {
-    this.params = params;
-    // See https://nodejs.org/api/deprecations.html#DEP0190
-    const command = params.shell ? params.command.join(" ") : params.command[0];
-    const args = params.shell ? [] : params.command.slice(1);
-    this.process = spawn(command, args, {
-      env: {
-        ...process.env,
-        ...params.env
-      },
-      cwd: params.cwd,
-      shell: params.shell,
-      // On non-windows platforms, `detached: true` makes child process a leader of a new
-      // process group, making it possible to kill child process tree with `.kill(-pid)` command.
-      // @see https://nodejs.org/api/child_process.html#child_process_options_detached
-      detached: process.platform !== "win32"
-    });
-    if (process.env.PWTEST_DEBUG)
-      process.stdout.write(`\n\nLaunching ${params.command.join(" ")}\n`);
-    this.onOutput = params.onOutput;
-
-    const appendChunk = (type: "stdout" | "stderr", chunk: string | Buffer) => {
-      this.output += String(chunk);
-      if (type === "stderr") this.stderr += String(chunk);
-      else this.stdout += String(chunk);
-      if (process.env.PWTEST_DEBUG) process.stdout.write(String(chunk));
-      else this.fullOutput += String(chunk);
-      this.onOutput?.(chunk);
-      for (const cb of this._outputCallbacks) cb();
-      this._outputCallbacks.clear();
-    };
-
-    this.process.stderr!.on("data", appendChunk.bind(null, "stderr"));
-    this.process.stdout!.on("data", appendChunk.bind(null, "stdout"));
-
-    const killProcessGroup = this._killProcessTree.bind(this, "SIGKILL");
-    process.on("exit", killProcessGroup);
-    this.exited = new Promise((f) => {
-      this.process.on("exit", (exitCode, signal) => f({ exitCode, signal }));
-      process.off("exit", killProcessGroup);
-    });
-    this.exitCode = this.exited.then((r) => r.exitCode);
-  }
-
-  outputLines(): string[] {
-    const strippedOutput = stripAnsi(this.output);
-    return strippedOutput
-      .split("\n")
-      .filter((line) => line.startsWith("%%"))
-      .map((line) => line.substring(2).trim());
-  }
-
-  async kill(signal: "SIGINT" | "SIGKILL" = "SIGKILL") {
-    this._killProcessTree(signal);
-    return this.exited;
-  }
-
-  private _killProcessTree(signal: "SIGINT" | "SIGKILL") {
-    if (!this.process.pid || !this.process.kill(0)) return;
-    killProcessGroup(this.process.pid, signal);
-  }
-
-  async cleanExit() {
-    const r = await this.exited;
-    if (r.exitCode)
-      throw new Error(
-        `Process failed with exit code ${r.exitCode}. Output:\n${this.output}`
-      );
-    if (r.signal)
-      throw new Error(
-        `Process received signal: ${r.signal}. Output:\n${this.output}`
-      );
-  }
-
-  async waitForOutput(substring: string, count = 1) {
-    while (countTimes(stripAnsi(this.output), substring) < count)
-      await new Promise<void>((f) => this._outputCallbacks.add(f));
-  }
-
-  clearOutput() {
-    this.output = "";
-  }
-
-  write(chars: string) {
-    this.process.stdin!.write(chars);
-  }
-}
-
-export function killProcessGroup(
-  pid: number,
-  signal: "SIGINT" | "SIGKILL" = "SIGKILL"
-) {
-  // On Windows, we always call `taskkill` no matter signal.
-  if (process.platform === "win32") {
-    try {
-      execSync(`taskkill /pid ${pid} /T /F /FI "MEMUSAGE gt 0"`, {
-        stdio: "ignore"
-      });
-    } catch (e) {
-      // the process might have already stopped
-    }
-    return;
-  }
-
-  // In case of POSIX and `SIGINT` signal, send it to the main process group only.
-  if (signal === "SIGINT") {
-    try {
-      process.kill(-pid, "SIGINT");
-    } catch (e) {
-      // the process might have already stopped
-    }
-    return;
-  }
-
-  // In case of POSIX and `SIGKILL` signal, we should send it to all descendant process groups.
-  const rootProcess = buildProcessTreePosix(pid);
-  if (!rootProcess) return;
-
-  const descendantProcessGroups = (function flatten(
-    processData: ProcessData,
-    result: Set<number> = new Set()
-  ) {
-    // Process can nullify its own process group with `setpgid`. Use its PID instead.
-    result.add(processData.pgrp || processData.pid);
-    processData.children.forEach((child) => flatten(child, result));
-    return result;
-  })(rootProcess);
-  for (const pgrp of descendantProcessGroups) {
-    try {
-      process.kill(-pgrp, "SIGKILL");
-    } catch (e) {
-      // the process might have already stopped
-    }
-  }
-}
-
-export type CommonFixtures = {
-  childProcess: (params: TestChildParams) => TestChildProcess;
-  waitForPort: (port: number) => Promise<void>;
-  findFreePort: () => Promise<number>;
-};
-
-export type CommonWorkerFixtures = {
-  daemonProcess: (params: TestChildParams) => TestChildProcess;
-};
-
-export const commonFixtures: Fixtures<CommonFixtures, CommonWorkerFixtures> = {
-  childProcess: async ({}, use, testInfo) => {
-    const processes: TestChildProcess[] = [];
-    await use((params) => {
-      const process = new TestChildProcess(params);
-      processes.push(process);
-      return process;
-    });
-    await Promise.all(processes.map(async (child) => child.kill()));
-    if (
-      testInfo.status !== "passed" &&
-      testInfo.status !== "skipped" &&
-      !process.env.PWTEST_DEBUG
-    ) {
-      for (const process of processes) {
-        console.log("====== " + process.params.command.join(" "));
-        console.log(process.fullOutput.replace(/\x1Bc/g, ""));
-        console.log("=========================================");
-      }
-    }
-  },
-
-  daemonProcess: [
-    async ({}, use) => {
-      const processes: TestChildProcess[] = [];
-      await use((params) => {
-        const process = new TestChildProcess(params);
-        processes.push(process);
-        return process;
-      });
-      await Promise.all(processes.map((child) => child.kill("SIGINT")));
-    },
-    { scope: "worker" }
-  ],
-
-  waitForPort: async ({}, use) => {
-    const token = { canceled: false };
-    await use(async (port) => {
-      while (!token.canceled) {
-        const promise = new Promise<boolean>((resolve) => {
-          const conn = net
-            .connect(port, "127.0.0.1")
-            .on("error", () => resolve(false))
-            .on("connect", () => {
-              conn.end();
-              resolve(true);
-            });
-        });
-        if (await promise) return;
-        await new Promise((x) => setTimeout(x, 100));
-      }
-    });
-    token.canceled = true;
-  },
-
-  findFreePort: async ({}, use) => {
-    await use(async () => {
-      return new Promise((resolve, reject) => {
-        const server = net.createServer();
-        server.listen(0, "127.0.0.1", () => {
-          const { port } = server.address() as net.AddressInfo;
-          server.close(() => resolve(port));
-        });
-        server.on("error", reject);
-      });
-    });
-  }
-};
-
-export function countTimes(s: string, sub: string): number {
-  let result = 0;
-  for (let index = 0; index !== -1; ) {
-    index = s.indexOf(sub, index);
-    if (index !== -1) {
-      result++;
-      index += sub.length;
-    }
-  }
-  return result;
-}

apps/desktop/__tests__/electron-test/index.ts

@@ -1,152 +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/>.
-*/
-/* eslint-disable no-empty-pattern */
-
-import { AppContext, buildAndLaunchApp, TestOptions } from "./utils";
-import path from "path";
-import { version } from "../../package.json";
-import type { ElectronApplication, Page } from "@playwright/test";
-import type { TraceViewerFixtures } from "./trace-viewer-fixtures";
-import { traceViewerFixtures } from "./trace-viewer-fixtures";
-import { PageTestFixtures, PageWorkerFixtures } from "./page-test-api";
-import fs from "fs";
-import { tmpdir } from "os";
-import { baseTest } from "./base-test";
-
-export type ElectronTestFixtures = PageTestFixtures & {
-  electronApp: ElectronApplication;
-  launchElectronApp: (options?: TestOptions) => Promise<ElectronApplication>;
-  createUserDataDir: () => Promise<string>;
-  options: TestOptions;
-  newPage: () => Promise<Page>;
-};
-
-export type { Page, Browser } from "@playwright/test";
-export { expect } from "@playwright/test";
-export const test = baseTest
-  .extend<TraceViewerFixtures>(traceViewerFixtures)
-  .extend<ElectronTestFixtures, PageWorkerFixtures>({
-    browserVersion: [
-      ({}, use) => use(process.env.ELECTRON_CHROMIUM_VERSION!),
-      { scope: "worker" }
-    ],
-    browserMajorVersion: [
-      ({}, use) =>
-        use(Number(process.env.ELECTRON_CHROMIUM_VERSION!.split(".")[0])),
-      { scope: "worker" }
-    ],
-    electronMajorVersion: [
-      ({}, use) =>
-        use(
-          parseInt(require("electron/package.json").version.split(".")[0], 10)
-        ),
-      { scope: "worker" }
-    ],
-    isBidi: [false, { scope: "worker" }],
-    isAndroid: [false, { scope: "worker" }],
-    isElectron: [true, { scope: "worker" }],
-    isHeadlessShell: [false, { scope: "worker" }],
-    isFrozenWebkit: [false, { scope: "worker" }],
-
-    createUserDataDir: async ({}, run) => {
-      const dirs: string[] = [];
-      // We do not put user data dir in testOutputPath,
-      // because we do not want to upload them as test result artifacts.
-      await run(async () => {
-        const dir = await fs.promises.mkdtemp(
-          path.join(tmpdir(), "playwright-test-")
-        );
-        dirs.push(dir);
-        return dir;
-      });
-      await removeFolders(dirs);
-    },
-
-    launchElectronApp: async ({ createUserDataDir }, use) => {
-      // This env prevents 'Electron Security Policy' console message.
-      process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";
-      const apps: AppContext[] = [];
-      await use(async (options?: TestOptions) => {
-        const userDataDir = await createUserDataDir();
-        const ctx = await buildAndLaunchApp(
-          userDataDir,
-          options || {
-            version,
-            config: {}
-          }
-        );
-        apps.push(ctx);
-        return ctx.app;
-      });
-      for (const ctx of apps) {
-        await ctx.app.close();
-      }
-      await removeFolders(apps.map((ctx) => ctx.outputDir));
-    },
-
-    electronApp: async ({ launchElectronApp, options }, use) => {
-      await use(await launchElectronApp(options));
-    },
-
-    page: async ({ electronApp, viewport }, run) => {
-      const page = await electronApp.firstWindow();
-      if (viewport) {
-        await page.setViewportSize(viewport);
-        await electronApp.evaluate((p, viewport) => {
-          const mainWindow = p.BrowserWindow.getAllWindows()[0];
-          mainWindow.setSize(viewport.width, viewport.height);
-        }, viewport);
-      }
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      page.context().app = electronApp;
-      await run(page);
-    },
-
-    context: async ({ electronApp }, run) => {
-      await run(electronApp.context());
-    },
-
-    newPage: async ({ launchElectronApp, options }, use) => {
-      await use(async () => {
-        const app = await launchElectronApp(options);
-        return app.firstWindow();
-      });
-    },
-
-    options: async ({}, use) => {
-      await use({
-        version,
-        config: {}
-      });
-    }
-  });
-
-async function removeFolders(folders: string[]) {
-  await Promise.all(
-    folders.map((folder) =>
-      fs.promises.rm(folder, {
-        force: true,
-        recursive: true,
-        maxRetries: 3,
-        retryDelay: 5000
-      })
-    )
-  );
-}

apps/desktop/__tests__/electron-test/page-test-api.ts

@@ -1,58 +0,0 @@
-/* eslint-disable header/header */
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { Browser, Page, ViewportSize } from "playwright-core";
-import type {
-  PageScreenshotOptions,
-  ScreenshotMode,
-  VideoMode
-} from "@playwright/test";
-export { expect } from "@playwright/test";
-
-// Page test does not guarantee an isolated context, just a new page (because Android).
-export type PageTestFixtures = {
-  page: Page;
-};
-
-export type PageWorkerFixtures = {
-  headless: boolean;
-  channel: string | undefined;
-  screenshot:
-    | ScreenshotMode
-    | ({ mode: ScreenshotMode } & Pick<
-        PageScreenshotOptions,
-        "fullPage" | "omitBackground"
-      >);
-  trace:
-    | "off"
-    | "on"
-    | "retain-on-failure"
-    | "on-first-retry"
-    | "retain-on-first-failure"
-    | "on-all-retries"
-    | /** deprecated */ "retry-with-trace";
-  video: VideoMode | { mode: VideoMode; size: ViewportSize };
-  browserName: "chromium" | "firefox" | "webkit";
-  browserVersion: string;
-  browserMajorVersion: number;
-  electronMajorVersion: number;
-  isBidi: boolean;
-  isAndroid: boolean;
-  isElectron: boolean;
-  isHeadlessShell: boolean;
-  isFrozenWebkit: boolean;
-};

apps/desktop/__tests__/electron-test/platform-fixtures.ts

@@ -1,47 +0,0 @@
-/* eslint-disable header/header */
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { test } from "@playwright/test";
-import os from "os";
-
-export type PlatformWorkerFixtures = {
-  platform: "win32" | "darwin" | "linux";
-  isWindows: boolean;
-  isMac: boolean;
-  isLinux: boolean;
-  macVersion: number; // major only, 11 or later, zero if not mac
-};
-
-function platform(): "win32" | "darwin" | "linux" {
-  if (process.env.PLAYWRIGHT_SERVICE_OS === "linux") return "linux";
-  if (process.env.PLAYWRIGHT_SERVICE_OS === "windows") return "win32";
-  if (process.env.PLAYWRIGHT_SERVICE_OS === "macos") return "darwin";
-  return process.platform as "win32" | "darwin" | "linux";
-}
-
-function macVersion() {
-  if (process.platform !== "darwin") return 0;
-  return +os.release().split(".")[0] - 9;
-}
-
-export const platformTest = test.extend<{}, PlatformWorkerFixtures>({
-  platform: [platform(), { scope: "worker" }],
-  isWindows: [platform() === "win32", { scope: "worker" }],
-  isMac: [platform() === "darwin", { scope: "worker" }],
-  isLinux: [platform() === "linux", { scope: "worker" }],
-  macVersion: [macVersion(), { scope: "worker" }]
-});

apps/desktop/__tests__/electron-test/test-mode-fixtures.ts

@@ -1,75 +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 { test } from "@playwright/test";
-import type { TestModeName } from "./test-mode";
-import { DefaultTestMode, DriverTestMode } from "./test-mode";
-
-export type TestModeWorkerOptions = {
-  mode: TestModeName;
-};
-
-export type TestModeTestFixtures = {
-  toImpl: (rpcObject?: any) => any;
-};
-
-export type TestModeWorkerFixtures = {
-  toImplInWorkerScope: (rpcObject?: any) => any;
-  playwright: typeof import("@playwright/test");
-};
-
-export const testModeTest = test.extend<
-  TestModeTestFixtures,
-  TestModeWorkerOptions & TestModeWorkerFixtures
->({
-  mode: ["default", { scope: "worker", option: true }],
-  playwright: [
-    async ({ mode }, run) => {
-      const testMode = {
-        default: new DefaultTestMode(),
-        service: new DefaultTestMode(),
-        service2: new DefaultTestMode(),
-        "service-grid": new DefaultTestMode(),
-        wsl: new DefaultTestMode(),
-        driver: new DriverTestMode()
-      }[mode];
-      const playwright = await testMode.setup();
-      await run(playwright);
-      await testMode.teardown();
-    },
-    { scope: "worker" }
-  ],
-
-  toImplInWorkerScope: [
-    async ({ playwright }, use) => {
-      await use((playwright as any)._connection.toImpl);
-    },
-    { scope: "worker" }
-  ],
-
-  toImpl: async (
-    { toImplInWorkerScope: toImplWorker, mode },
-    use,
-    testInfo
-  ) => {
-    if (mode !== "default" || process.env.PW_TEST_REUSE_CONTEXT)
-      testInfo.skip();
-    await use(toImplWorker);
-  }
-});

apps/desktop/__tests__/electron-test/test-mode.ts

@@ -1,52 +0,0 @@
-/* eslint-disable header/header */
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-/// @ts-ignore
-import { oop, client } from "playwright-core/lib/coreBundle";
-
-export type TestModeName = "default" | "driver";
-
-const { start } = oop;
-
-interface TestMode {
-  setup(): Promise<client.Playwright>;
-  teardown(): Promise<void>;
-}
-
-export class DriverTestMode implements TestMode {
-  private _impl: { playwright: client.Playwright; stop: () => Promise<void> };
-
-  async setup() {
-    this._impl = await start({
-      NODE_OPTIONS: undefined // Hide driver process while debugging.
-    });
-    return this._impl.playwright;
-  }
-
-  async teardown() {
-    await this._impl.stop();
-  }
-}
-
-export class DefaultTestMode implements TestMode {
-  async setup() {
-    return require("playwright-core");
-  }
-
-  async teardown() {}
-}

apps/desktop/__tests__/electron-test/trace-viewer-fixtures.ts

@@ -1,243 +0,0 @@
-/* eslint-disable header/header */
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type {
-  Fixtures,
-  FrameLocator,
-  Locator,
-  Page,
-  Browser,
-  BrowserContext
-} from "@playwright/test";
-import { step } from "./base-test";
-import path from "path";
-import { CommonFixtures, TestChildProcess } from "./common-fixtures";
-
-type BaseTestFixtures = CommonFixtures & {
-  context: BrowserContext;
-};
-
-type BaseWorkerFixtures = {
-  headless: boolean;
-  browser: Browser;
-  browserName: "chromium" | "firefox" | "webkit";
-  playwright: typeof import("@playwright/test");
-};
-
-export type TraceViewerFixtures = {
-  showTraceViewer: (
-    trace: string | undefined,
-    options?: { host?: string; port?: number; stdin?: boolean }
-  ) => Promise<TraceViewerPage>;
-  runAndTrace: (
-    body: () => Promise<void>,
-    optsOverrides?: Parameters<BrowserContext["tracing"]["start"]>[0]
-  ) => Promise<TraceViewerPage>;
-};
-
-class TraceViewerPage {
-  actionTitles: Locator;
-  actionsTree: Locator;
-  callLines: Locator;
-  consoleLines: Locator;
-  logLines: Locator;
-  errorMessages: Locator;
-  consoleLineMessages: Locator;
-  consoleStacks: Locator;
-  networkRequests: Locator;
-  metadataTab: Locator;
-  snapshotContainer: Locator;
-  sourceCodeTab: Locator;
-  networkTab: Locator;
-
-  settingsDialog: Locator;
-  themeSetting: Locator;
-  displayCanvasContentSetting: Locator;
-
-  constructor(public page: Page, public process: TestChildProcess) {
-    this.actionTitles = page.locator(".action-title");
-    this.actionsTree = page.getByTestId("actions-tree");
-    this.callLines = page.locator(".call-tab .call-line");
-    this.logLines = page
-      .getByRole("list", { name: "Log entries" })
-      .getByRole("listitem");
-    this.consoleLines = page
-      .getByRole("tabpanel", { name: "Console" })
-      .getByRole("listitem");
-    this.consoleLineMessages = page.locator(".console-line-message");
-    this.errorMessages = page.locator(".error-message");
-    this.consoleStacks = page.locator(".console-stack");
-    this.networkRequests = page
-      .getByRole("list", { name: "Network requests" })
-      .getByRole("listitem");
-    this.snapshotContainer = page.locator(
-      ".snapshot-container iframe.snapshot-visible[name=snapshot]"
-    );
-    this.metadataTab = page.getByRole("tabpanel", { name: "Metadata" });
-    this.sourceCodeTab = page.getByRole("tabpanel", { name: "Source" });
-    this.networkTab = page.getByRole("tabpanel", { name: "Network" });
-
-    this.settingsDialog = page.getByTestId("settings-toolbar-dialog");
-    this.themeSetting = this.settingsDialog.getByRole("combobox", {
-      name: "Theme"
-    });
-    this.displayCanvasContentSetting = page
-      .locator(".setting")
-      .getByText("Display canvas content");
-  }
-
-  @step
-  async showAllActions() {
-    await this.page.getByRole("button", { name: "Filter actions" }).click();
-    await this.page.locator(".setting").getByText("Network routes").click();
-    await this.page.locator(".setting").getByText("Getters").click();
-    await this.page.locator(".setting").getByText("Configuration").click();
-    await this.page.getByRole("button", { name: "Filter actions" }).click();
-  }
-
-  stackFrames(options: { selected?: boolean } = {}) {
-    const entry = this.page
-      .getByRole("list", { name: "Stack trace" })
-      .getByRole("listitem");
-    if (options.selected) return entry.locator(":scope.selected");
-    return entry;
-  }
-
-  actionIconsText(action: string) {
-    const entry = this.actionsTree.getByRole("treeitem", { name: action });
-    return entry.locator(".action-icon-value").filter({ visible: true });
-  }
-
-  actionIcons(action: string) {
-    return this.actionsTree
-      .getByRole("treeitem", { name: action })
-      .locator(".action-icons")
-      .filter({ visible: true });
-  }
-
-  @step
-  async expandAction(title: string) {
-    await this.actionsTree
-      .getByRole("treeitem", { name: title })
-      .locator(".codicon-chevron-right")
-      .click();
-  }
-
-  @step
-  async selectAction(title: string, ordinal: number = 0) {
-    await this.actionsTree.getByTitle(title).nth(ordinal).click();
-  }
-
-  @step
-  async hoverAction(title: string, ordinal: number = 0) {
-    await this.actionsTree
-      .getByRole("treeitem", { name: title })
-      .nth(ordinal)
-      .hover();
-  }
-
-  @step
-  async selectSnapshot(name: string) {
-    await this.page.getByRole("tab", { name }).click();
-  }
-
-  async showErrorsTab() {
-    await this.page.getByRole("tab", { name: "Errors" }).click();
-  }
-
-  async showConsoleTab() {
-    await this.page.getByRole("tab", { name: "Console" }).click();
-  }
-
-  async showSourceTab() {
-    await this.page.getByRole("tab", { name: "Source" }).click();
-  }
-
-  async showNetworkTab() {
-    await this.page.getByRole("tab", { name: "Network" }).click();
-  }
-
-  async showMetadataTab() {
-    await this.page.getByRole("tab", { name: "Metadata" }).click();
-  }
-
-  async showSettings() {
-    await this.page.getByRole("button", { name: "Settings" }).click();
-  }
-
-  @step
-  async snapshotFrame(
-    actionName: string,
-    ordinal: number = 0,
-    hasSubframe: boolean = false
-  ): Promise<FrameLocator> {
-    await this.selectAction(actionName, ordinal);
-    while (this.page.frames().length < (hasSubframe ? 4 : 3))
-      await this.page.waitForEvent("frameattached");
-    return this.page.frameLocator("iframe.snapshot-visible[name=snapshot]");
-  }
-}
-
-export const traceViewerFixtures: Fixtures<
-  TraceViewerFixtures,
-  {},
-  BaseTestFixtures,
-  BaseWorkerFixtures
-> = {
-  showTraceViewer: async ({ playwright, childProcess, browserName }, use) => {
-    const browsers: Browser[] = [];
-    await use(async (trace: string | undefined, { host, port, stdin } = {}) => {
-      const command = [
-        "node",
-        path.join(__dirname, "../../node_modules/playwright-core/cli.js"),
-        "show-trace",
-        "--port",
-        "" + (port ?? "0")
-      ];
-      if (host) command.push("--host", host);
-      if (stdin) command.push("--stdin");
-      if (trace) command.push(trace);
-      const cp = childProcess({ command });
-      await cp.waitForOutput("Listening on");
-      const browser = await playwright.chromium.launch({
-        ...(browserName === "chromium" ? {} : { channel: "chromium" }),
-        executablePath: process.env.CRPATH // without this, setting FFPATH makes us launch Firefox with Chromium args
-      });
-      browsers.push(browser);
-      const page = await browser.newPage();
-      const url = cp.output.match(/Listening on (http:\/\/[^\s]+)/)![1];
-      await page.goto(url);
-      return new TraceViewerPage(page, cp);
-    });
-    for (const browser of browsers) await browser.close();
-  },
-
-  runAndTrace: async ({ context, showTraceViewer }, use, testInfo) => {
-    await use(async (body: () => Promise<void>, optsOverrides = {}) => {
-      const traceFile = testInfo.outputPath("trace.zip");
-      await context.tracing.start({
-        snapshots: true,
-        screenshots: true,
-        sources: true,
-        ...optsOverrides
-      });
-      await body();
-      await context.tracing.stop({ path: traceFile });
-      return showTraceViewer(traceFile);
-    });
-  }
-};

apps/desktop/__tests__/global-setup.ts

@@ -19,7 +19,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { buildApp } from "./utils";
 
-export default async function globalSetup() {
-  console.log("Building the app...");
+export default async function setup() {
   await buildApp();
 }

apps/desktop/__tests__/launch.test.ts

@@ -17,7 +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 { test } from "@nn/test";
-test("make sure app loads", async ({ page }) => {
+import { testCleanup, test } from "./test-override.js";
+
+test("make sure app loads", async ({
+  ctx: { page },
+  expect,
+  onTestFinished
+}) => {
+  onTestFinished(testCleanup);
+
+  await page.waitForSelector("#authForm");
+
+  expect(
+    await page.getByRole("button", { name: "Create account" }).isVisible()
+  ).toBe(true);
+
+  await page
+    .getByRole("button", { name: "Skip & go directly to the app" })
+    .click();
+
   await page.waitForSelector(".ProseMirror");
 });

apps/desktop/__tests__/test-override.ts

@@ -0,0 +1,64 @@
+/*
+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 { test as vitestTest, TestContext } from "vitest";
+import { buildAndLaunchApp, Fixtures, TestOptions } from "./utils";
+import { mkdir, rm } from "fs/promises";
+import path from "path";
+import slugify from "slugify";
+
+export const test = vitestTest.extend<Fixtures>({
+  options: { version: "3.0.0" } as TestOptions,
+  ctx: async ({ options }, use) => {
+    const ctx = await buildAndLaunchApp(options);
+    await use(ctx);
+  }
+});
+
+export async function testCleanup(context: TestContext) {
+  const ctx = (context.task.context as unknown as Fixtures).ctx;
+  if (context.task.result?.state === "fail") {
+    await mkdir("test-results", { recursive: true });
+    await ctx.page.screenshot({
+      path: path.join(
+        "test-results",
+        `${slugify(context.task.name)}-${process.platform}-${
+          process.arch
+        }-error.png`
+      )
+    });
+  }
+  await ctx.app.close();
+  await rm(ctx.userDataDir, {
+    force: true,
+    recursive: true,
+    maxRetries: 3,
+    retryDelay: 5000
+  }).catch(() => {
+    /*ignore */
+  });
+  await rm(ctx.outputDir, {
+    force: true,
+    recursive: true,
+    maxRetries: 3,
+    retryDelay: 5000
+  }).catch(() => {
+    /*ignore */
+  });
+}

apps/desktop/__tests__/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "noEmit": true,
-    "lib": ["ESNext"],
-    "moduleResolution": "Bundler",
-    "paths": {
-      "@nn/test": ["./electron-test/index.ts"]
-    }
-  }
-}

apps/desktop/__tests__/utils.ts

@@ -19,22 +19,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { execSync } from "child_process";
 import { cp } from "fs/promises";
+import { fileURLToPath } from "node:url";
 import path, { join, resolve } from "path";
-import {
-  _electron as electron,
-  ElectronApplication,
-  Page
-} from "@playwright/test";
+import { _electron as electron } from "playwright";
 import { existsSync } from "fs";
-import { mkdir, writeFile } from "node:fs/promises";
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 const IS_DEBUG = process.env.NN_DEBUG === "true" || process.env.CI === "true";
 const productName = `NotesnookTestHarness`;
-const root = path.resolve(__dirname, "..", "..");
-const SOURCE_DIR = resolve(root, "output", productName);
+const SOURCE_DIR = resolve("output", productName);
 
 export interface AppContext {
-  app: ElectronApplication;
+  app: import("playwright").ElectronApplication;
+  page: import("playwright").Page;
+  configPath: string;
   userDataDir: string;
   outputDir: string;
   relaunch: () => Promise<void>;
@@ -42,7 +41,6 @@ export interface AppContext {
 
 export interface TestOptions {
   version: string;
-  config?: Record<string, unknown>;
 }
 
 export interface Fixtures {
@@ -51,41 +49,35 @@ export interface Fixtures {
 }
 
 export async function buildAndLaunchApp(
-  userDataDir: string,
   options?: TestOptions
 ): Promise<AppContext> {
-  await buildApp(options?.version);
-
   const productName = `notesnooktest${makeid(10)}`;
-  const outputDir = path.join(root, "test-artifacts", `${productName}-output`);
+  const outputDir = path.join("test-artifacts", `${productName}-output`);
   const executablePath = await copyBuild({
     ...options,
     outputDir
   });
-
-  const configPath = path.join(userDataDir, "UserData", "config.json");
-  if (options?.config) {
-    await mkdir(path.dirname(configPath), { recursive: true });
-    await writeFile(configPath, JSON.stringify(options.config));
-  }
-
-  const { app } = await launchApp(
+  const { app, page, configPath, userDataDir } = await launchApp(
     executablePath,
-    userDataDir,
+    productName,
     options?.version
   );
   const ctx: AppContext = {
     app,
+    page,
+    configPath,
     userDataDir,
     outputDir,
     relaunch: async () => {
-      const { app } = await launchApp(
+      const { app, page, configPath, userDataDir } = await launchApp(
         executablePath,
-        userDataDir,
+        productName,
         options?.version
       );
       ctx.app = app;
+      ctx.page = page;
       ctx.userDataDir = userDataDir;
+      ctx.configPath = configPath;
     }
   };
   return ctx;
@@ -93,14 +85,19 @@ export async function buildAndLaunchApp(
 
 async function launchApp(
   executablePath: string,
-  userDataDir: string,
+  packageName: string,
   version?: string
 ) {
+  const userDataDir = resolve(
+    __dirname,
+    "..",
+    "test-artifacts",
+    "user_data_dirs",
+    packageName
+  );
   const app = await electron.launch({
     executablePath,
     args: IS_DEBUG ? [] : ["--hidden"],
-    baseURL: "https://app.notesnook.com",
-    acceptDownloads: true,
     env: {
       ...(process.platform === "linux"
         ? {
@@ -117,28 +114,20 @@ async function launchApp(
     }
   });
 
+  const page = await app.firstWindow();
+
+  const configPath = path.join(userDataDir, "UserData", "config.json");
   return {
     app,
+    page,
+    configPath,
     userDataDir
   };
 }
 
-export function getAppFromPage(page: Page) {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  return page.context().app as ElectronApplication;
-}
-
 let MAX_RETRIES = 3;
 export async function buildApp(version?: string) {
   if (!existsSync(SOURCE_DIR)) {
-    execSync(
-      `node ${path.join(root, "scripts", "build.mjs")} --test --rebuild`,
-      {
-        stdio: IS_DEBUG ? "inherit" : "ignore"
-      }
-    );
-
     const args = [
       "electron-builder",
       "--dir",
@@ -162,7 +151,7 @@ export async function buildApp(version?: string) {
       });
     } catch (e) {
       if (--MAX_RETRIES) {
-        console.log("retrying...", e);
+        console.log("retrying...");
         return await buildApp(version);
       } else throw e;
     }
@@ -200,7 +189,8 @@ async function makeBuildCopyMacOS(outputDir: string, productName: string) {
   const platformDir = process.arch === "arm64" ? "mac-arm64" : "mac";
   const appDir = await makeBuildCopy(outputDir, platformDir);
   return resolve(
-    root,
+    __dirname,
+    "..",
     appDir,
     `${productName}.app`,
     "Contents",

apps/desktop/electron-builder.config.js

@@ -96,7 +96,6 @@ module.exports = {
     "node_modules/sodium-native/package.json"
   ],
   afterPack: "./scripts/removeLocales.js",
-  protocols: [{ name: "Notesnook", schemes: ["nn"] }],
   mac: {
     bundleVersion: "240",
     minimumSystemVersion: "10.12.0",
@@ -182,7 +181,6 @@ module.exports = {
     icon: "assets/icons/app.icns",
     description: "Your private note taking space",
     executableName: linuxExecutableName,
-    mimeTypes: ["x-scheme-handler/nn"],
     desktop: {
       desktopActions: {
         "new-note": {
@@ -200,9 +198,6 @@ module.exports = {
       }
     }
   },
-  toolsets: {
-    appimage: "1.0.2"
-  },
   snap: {
     autoStart: false,
     confinement: "strict",

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "3.4.0",
+  "version": "3.3.14",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/cjs/index.js",
@@ -21,17 +21,6 @@
         "types": "./dist/types/index.d.ts",
         "default": "./dist/esm/index.js"
       }
-    },
-    "./testutils": "./__tests__/test-override.ts",
-    "./*": {
-      "require": {
-        "types": "./dist/types/*",
-        "default": "./dist/cjs/*"
-      },
-      "import": {
-        "types": "./dist/types/*",
-        "default": "./dist/esm/*"
-      }
     }
   },
   "homepage": "https://notesnook.com/",
@@ -54,18 +43,16 @@
     "zod": "3.24.3"
   },
   "devDependencies": {
-    "@playwright/test": "1.61.1",
     "@streetwriters/kysely": "^0.27.4",
     "@types/node": "22.15.3",
     "@types/yargs": "^17.0.33",
     "chokidar": "^4.0.3",
     "electron": "^37.0.0",
-    "electron-builder": "^26.8.1",
+    "electron-builder": "^26.0.12",
     "esbuild": "0.21.5",
-    "fkill": "^10.0.3",
     "node-abi": "^4.5.0",
     "node-gyp-build": "^4.8.4",
-    "playwright-core": "1.61.1",
+    "playwright": "1.48.2",
     "prebuildify": "^6.0.1",
     "slugify": "1.6.6",
     "tree-kill": "^1.2.2",
@@ -86,7 +73,7 @@
     "bundle": "esbuild electron=./src/main.ts ./src/preload.ts --external:electron --external:fsevents --external:better-sqlite3-multiple-ciphers --external:sodium-native --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=false --define:RELEASE=true",
     "bundle:mas": "esbuild electron=./src/main.ts ./src/preload.ts --minify --external:electron --external:fsevents --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=true --define:RELEASE=true",
     "postinstall": "patch-package",
-    "test": "playwright test --tsconfig __tests__/tsconfig.json --project notesnook-desktop"
+    "test": "vitest run"
   },
   "author": {
     "name": "Streetwriters (Private) Limited",

apps/desktop/patches/@playwright+test++playwright-core+1.61.1.patch

@@ -1,24 +0,0 @@
-diff --git a/node_modules/@playwright/test/node_modules/playwright-core/lib/coreBundle.js b/node_modules/@playwright/test/node_modules/playwright-core/lib/coreBundle.js
-index 7d8468f..ab252ef 100644
---- a/node_modules/@playwright/test/node_modules/playwright-core/lib/coreBundle.js
-+++ b/node_modules/@playwright/test/node_modules/playwright-core/lib/coreBundle.js
-@@ -16010,6 +16010,7 @@ var init_validator = __esm({
-       args: tOptional(tArray(tString)),
-       chromiumSandbox: tOptional(tBoolean),
-       cwd: tOptional(tString),
-+      baseURL: tOptional(tString),
-       env: tOptional(tArray(tType("NameValue"))),
-       timeout: tFloat,
-       acceptDownloads: tOptional(tEnum(["accept", "deny", "internal-browser-default"])),
-diff --git a/node_modules/@playwright/test/node_modules/playwright-core/types/types.d.ts b/node_modules/@playwright/test/node_modules/playwright-core/types/types.d.ts
-index 0bff9d3..d195697 100644
---- a/node_modules/@playwright/test/node_modules/playwright-core/types/types.d.ts
-+++ b/node_modules/@playwright/test/node_modules/playwright-core/types/types.d.ts
-@@ -21813,6 +21813,7 @@ export interface Electron {
-      * Additional arguments to pass to the application when launching. You typically pass the main script name here.
-      */
-     args?: Array<string>;
-+    baseURL?: string;
- 
-     /**
-      * If specified, artifacts (traces, videos, downloads, HAR files, etc.) are saved into this directory. The directory

apps/desktop/playwright.config.ts

@@ -1,92 +0,0 @@
-/* eslint-disable header/header */
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type {
-  Config,
-  PlaywrightTestOptions,
-  PlaywrightWorkerOptions
-} from "@playwright/test";
-import * as path from "path";
-
-process.env.PWPAGE_IMPL = "electron";
-process.env.TEST_DESKTOP = "true";
-const outputDir = path.join(__dirname, "test-results");
-const testDir = path.join(__dirname, "__tests__");
-const config: Config<PlaywrightWorkerOptions & PlaywrightTestOptions> = {
-  testDir,
-  outputDir,
-  expect: {
-    timeout: 10000
-  },
-  use: {
-    acceptDownloads: true,
-    trace: "retain-on-failure",
-    screenshot: "only-on-failure",
-    video: "retry-with-video",
-    viewport: {
-      width: 1920,
-      height: 1080
-    }
-  },
-  timeout: 60000,
-  globalTimeout: 5400000,
-  workers: process.env.CI ? 1 : undefined,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 1 : 0,
-  reporter: process.env.CI
-    ? [["dot"], ["json", { outputFile: path.join(outputDir, "report.json") }]]
-    : "line",
-  projects: [],
-  globalSetup: "./__tests__/electron-test/global-setup.ts"
-};
-
-const metadata = {
-  platform: process.platform,
-  headless: "headed",
-  browserName: "electron",
-  channel: undefined,
-  mode: "default",
-  video: false
-};
-
-config.projects?.push({
-  name: "notesnook-desktop",
-  // Share screenshots with chromium.
-  snapshotPathTemplate:
-    "{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}-electron{ext}",
-  use: {
-    browserName: "chromium",
-    headless: false
-  },
-  testDir: "__tests__",
-  metadata
-});
-
-config.projects?.push({
-  name: "notesnook-web",
-  // Share screenshots with chromium.
-  snapshotPathTemplate:
-    "{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}-electron{ext}",
-  use: {
-    browserName: "chromium",
-    headless: false
-  },
-  testDir: path.resolve(__dirname, "../web/__e2e__"),
-  metadata
-});
-
-export default config;

apps/desktop/scripts/build.mjs

@@ -33,7 +33,6 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const root = args.root || path.join(__dirname, "..");
 const skipTscBuild = args.skipTscBuild || false;
-const buildForTesting = args.test || false;
 
 const webAppPath = path.resolve(path.join(__dirname, "..", "..", "web"));
 
@@ -52,11 +51,7 @@ console.log("removed build folder");
 if (args.rebuild || !existsSync(path.join(webAppPath, "build"))) {
   console.log("rebuilding...");
   await exec(
-    `node scripts/execute.mjs ${
-      buildForTesting
-        ? "@notesnook/web:build:test:desktop"
-        : "@notesnook/web:build:desktop"
-    }`,
+    "node scripts/execute.mjs @notesnook/web:build:desktop",
     path.join(__dirname, "..", "..", "..")
   );
 }

apps/desktop/src/api/backups.ts

@@ -1,89 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import { initTRPC } from "@trpc/server";
-import { createWriteStream, mkdirSync } from "node:fs";
-import path from "node:path";
-import { z } from "zod";
-import { config } from "../utils/config";
-import { resolvePath } from "../utils/resolve-path";
-import { app } from "electron";
-
-const t = initTRPC.create();
-
-const activeStreams = new Map<string, NodeJS.WritableStream>();
-
-function generateId() {
-  return Math.random().toString(36).slice(2);
-}
-
-export const backupsRouter = t.router({
-  open: t.procedure
-    .input(z.object({ filename: z.string() }))
-    .mutation(({ input }) => {
-      const { filename } = input;
-      if (filename.includes(path.sep) || filename.includes("\\"))
-        throw new Error("Invalid filename");
-      const resolvedBackupDir = resolvePath(config.backupDirectory);
-      const backupPath = path.resolve(resolvedBackupDir, filename);
-      if (!backupPath.startsWith(resolvedBackupDir))
-        throw new Error("Invalid filename");
-
-      mkdirSync(resolvedBackupDir, { recursive: true });
-      const stream = createWriteStream(backupPath, { encoding: "utf-8" });
-      const id = generateId();
-      activeStreams.set(id, stream);
-      return id;
-    }),
-
-  write: t.procedure
-    .input(z.object({ id: z.string(), chunk: z.string() }))
-    .mutation(({ input }) => {
-      const stream = activeStreams.get(input.id);
-      if (!stream) throw new Error("Stream not found");
-      return new Promise<void>((resolve, reject) => {
-        stream.write(Buffer.from(input.chunk, "base64"), (err) =>
-          err ? reject(err) : resolve()
-        );
-      });
-    }),
-
-  close: t.procedure
-    .input(z.object({ id: z.string() }))
-    .mutation(({ input }) => {
-      const stream = activeStreams.get(input.id);
-      if (!stream) throw new Error("Stream not found");
-      return new Promise<void>((resolve) => {
-        stream.end(() => {
-          activeStreams.delete(input.id);
-          resolve();
-        });
-      });
-    })
-});
-
-app.on("before-quit", () => {
-  try {
-    for (const stream of activeStreams.values()) {
-      stream.end();
-    }
-  } catch {
-    // ignore
-  }
-});

apps/desktop/src/api/bridge.ts

@@ -24,43 +24,21 @@ import TypedEventEmitter from "typed-emitter";
 
 export type AppEvents = {
   onCreateItem(name: "note" | "notebook" | "reminder"): void;
-  onOpenLink(url: string): void;
-  bridgeReady(): void;
 };
-let isBridgeReady = false;
-const pendingEvents: { name: string; args: unknown[] }[] = [];
-const _emitter = new EventEmitter();
-const emitter = _emitter as TypedEventEmitter<AppEvents>;
+
+const emitter = new EventEmitter();
+const typedEmitter = emitter as TypedEventEmitter<AppEvents>;
 const t = initTRPC.create();
 
 export const bridgeRouter = t.router({
-  onCreateItem: createSubscription("onCreateItem"),
-  onOpenLink: createSubscription("onOpenLink"),
-  ready: t.procedure.query(() => {
-    isBridgeReady = true;
-    if (pendingEvents.length > 0) {
-      console.log(
-        "Emitting pending events",
-        pendingEvents.map((e) => e.name)
-      );
-      pendingEvents.forEach((event) => {
-        emitter.emit(event.name as any, ...(event.args as any[]));
-      });
-      pendingEvents.length = 0;
-    }
-    return true;
-  })
+  onCreateItem: createSubscription("onCreateItem")
 });
 
 export const bridge: AppEvents = new Proxy({} as AppEvents, {
   get(_t, name) {
     if (typeof name === "symbol") return;
     return (...args: unknown[]) => {
-      if (!isBridgeReady) {
-        pendingEvents.push({ name, args });
-        return;
-      }
-      _emitter.emit(name, ...args);
+      emitter.emit(name, ...args);
     };
   }
 });
@@ -71,9 +49,9 @@ function createSubscription<TName extends keyof AppEvents>(eventName: TName) {
       const listener: AppEvents[TName] = (...args: any[]) => {
         emit.next(args[0]);
       };
-      emitter.addListener(eventName, listener);
+      typedEmitter.addListener(eventName, listener);
       return () => {
-        emitter.removeListener(eventName, listener);
+        typedEmitter.removeListener(eventName, listener);
       };
     });
   });

apps/desktop/src/api/index.ts

@@ -25,8 +25,6 @@ import { updaterRouter } from "./updater";
 import { bridgeRouter } from "./bridge";
 import { safeStorageRouter } from "./safe-storage";
 import { windowRouter } from "./window";
-import { sqliteRouter } from "./sqlite-kysely";
-import { backupsRouter } from "./backups";
 
 const t = initTRPC.create();
 
@@ -37,13 +35,10 @@ export const router = t.router({
   updater: updaterRouter,
   bridge: bridgeRouter,
   safeStorage: safeStorageRouter,
-  window: windowRouter,
-  sqlite: sqliteRouter,
-  backups: backupsRouter
+  window: windowRouter
 });
 
-const createCaller = t.createCallerFactory(router);
-export const api = createCaller({});
+export const api = router.createCaller({});
 
 // Export type router type signature,
 // NOT the router itself.

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

@@ -24,6 +24,7 @@ import {
   dialog,
   Menu,
   MenuItem,
+  nativeImage,
   nativeTheme,
   Notification,
   shell
@@ -32,16 +33,16 @@ import { AutoLaunch } from "../utils/autolaunch";
 import { config, DesktopIntegration } from "../utils/config";
 import { bringToFront } from "../utils/bring-to-front";
 import { getTheme, setTheme, Theme } from "../utils/theme";
-import { existsSync } from "fs";
+import { mkdirSync, writeFileSync } from "fs";
+import { dirname } from "path";
 import { resolvePath } from "../utils/resolve-path";
 import { observable } from "@trpc/server/observable";
 import { AssetManager } from "../utils/asset-manager";
-import { isFlatpak, isPortable, isSnap } from "../utils";
+import { isFlatpak, isSnap } from "../utils";
 import { setupDesktopIntegration } from "../utils/desktop-integration";
+import { rm } from "fs/promises";
 import { disableCustomDns, enableCustomDns } from "../utils/custom-dns";
 import type { MenuItem as NNMenuItem } from "@notesnook/ui";
-import { platform } from "os";
-import { strings } from "@notesnook/intl";
 
 const t = initTRPC.create();
 
@@ -59,8 +60,6 @@ const NotificationOptions = z.object({
 export const osIntegrationRouter = t.router({
   isFlatpak: t.procedure.query(() => isFlatpak()),
   isSnap: t.procedure.query(() => isSnap()),
-  isPortable: t.procedure.query(() => isPortable()),
-  backupDirectory: t.procedure.query(() => config.backupDirectory),
 
   zoomFactor: t.procedure.query(() => config.zoomFactor),
   setZoomFactor: t.procedure.input(z.number()).mutation(({ input: factor }) => {
@@ -117,19 +116,53 @@ export const osIntegrationRouter = t.router({
       setupDesktopIntegration(settings);
     }),
 
-  selectBackupDirectory: t.procedure.input(z.undefined()).query(async () => {
-    if (!globalThis.window) return undefined;
+  selectDirectory: t.procedure
+    .input(
+      z.object({
+        title: z.string().optional(),
+        buttonLabel: z.string().optional(),
+        defaultPath: z.string().optional()
+      })
+    )
+    .query(async ({ input }) => {
+      if (!globalThis.window) return undefined;
 
-    const result = await dialog.showOpenDialog(globalThis.window, {
-      title: strings.selectBackupDir(),
-      buttonLabel: strings.select(),
-      properties: ["openDirectory"],
-      defaultPath: config.backupDirectory && resolvePath(config.backupDirectory)
-    });
-    if (result.canceled) return undefined;
+      const { title, buttonLabel, defaultPath } = input;
 
-    config.backupDirectory = result.filePaths[0];
+      const result = await dialog.showOpenDialog(globalThis.window, {
+        title,
+        buttonLabel,
+        properties: ["openDirectory"],
+        defaultPath: defaultPath && resolvePath(defaultPath)
+      });
+      if (result.canceled) return undefined;
+
+      return result.filePaths[0];
+    }),
+
+  saveFile: t.procedure
+    .input(z.object({ data: z.string(), filePath: z.string() }))
+    .query(({ input }) => {
+      const { data, filePath } = input;
+      if (!data || !filePath) return;
+
+      const resolvedPath = resolvePath(filePath);
+
+      mkdirSync(dirname(resolvedPath), { recursive: true });
+      writeFileSync(resolvedPath, data);
+    }),
+
+  resolvePath: t.procedure
+    .input(z.object({ filePath: z.string() }))
+    .query(({ input }) => {
+      const { filePath } = input;
+      return resolvePath(filePath);
+    }),
+
+  deleteFile: t.procedure.input(z.string()).query(async ({ input }) => {
+    await rm(input);
   }),
+
   restart: t.procedure.query(() => {
     app.relaunch();
     app.exit();
@@ -145,9 +178,7 @@ export const osIntegrationRouter = t.router({
         })
       });
       notification.show();
-      if (input.urgency === "critical" && process.platform !== "linux") {
-        // due to an Electron bug in versions below 40.x, shell.beep() causes a segfault on Linux.
-        // TODO: Remove when migrating to Electron 40.x or newer.
+      if (input.urgency === "critical") {
         shell.beep();
       }
 
@@ -158,38 +189,9 @@ export const osIntegrationRouter = t.router({
     }),
   openPath: t.procedure
     .input(z.object({ type: z.literal("path"), link: z.string() }))
-    .query(async ({ input }) => {
-      if (isFlatpak()) return;
-
+    .query(({ input }) => {
       const { type, link } = input;
-      if (type !== "path") return;
-
-      const path = decodeURIComponent(new URL(link).pathname);
-      const resolvedPath = resolvePath(
-        // remove leading slash from path on windows
-        platform() === "win32" ? path.slice(1) : path
-      );
-
-      if (!existsSync(resolvedPath)) {
-        if (globalThis.window) {
-          await dialog.showMessageBox(globalThis.window, {
-            type: "error",
-            title: "Path not found",
-            message: `The path does not exist:\n${wrapPath(resolvedPath)}`
-          });
-        }
-        return;
-      }
-
-      const result = await dialog.showMessageBox(globalThis.window!, {
-        message: strings.openingLocalFileDesc(resolvedPath),
-        title: strings.openingLocalFile(),
-        buttons: [strings.cancel(), strings.open()],
-        defaultId: 1,
-        cancelId: 0,
-        type: "question"
-      });
-      result.response === 1 && (await shell.openPath(resolvedPath));
+      if (type === "path") return shell.openPath(resolvePath(link));
     }),
   bringToFront: t.procedure.query(() => bringToFront()),
   changeTheme: t.procedure
@@ -294,7 +296,3 @@ function toMenuItem(
     }
   }
 }
-
-function wrapPath(path: string, maxLineLength = 100): string {
-  return path.replace(new RegExp(`(.{${maxLineLength}})`, "g"), "$1\n");
-}

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

@@ -84,55 +84,35 @@ const LANGUAGES: Record<string, string> = {
 
 type Language = { code: string; name: string };
 
-const LANGUAGE_REDIRECT_MAP: Record<string, string> = {
-  es: "es-MX",
-  "es-419": "es-MX",
-  "es-ES": "es-AR"
-};
-
 export const spellCheckerRouter = t.router({
   isEnabled: t.procedure.query(() => config.isSpellCheckerEnabled),
-  languages: t.procedure.query(() => {
-    const available =
-      globalThis.window?.webContents.session.availableSpellCheckerLanguages ||
-      [];
-
-    return <Language[]>available
-      .map((code) => ({
-        code,
-        name: LANGUAGES[code] || code
-      }))
-      .sort((a, b) => a.name.localeCompare(b.name));
-  }),
-
-  enabledLanguages: t.procedure.query(() => {
-    const enabled =
-      globalThis.window?.webContents.session.getSpellCheckerLanguages() || [];
-    const available =
-      globalThis.window?.webContents.session.availableSpellCheckerLanguages ||
-      [];
-
-    const resolved = enabled
-      .map((code) => resolveLanguage(code, available))
-      .filter(Boolean) as string[];
-
-    return <Language[]>resolved.map((code) => ({
-      code,
-      name: LANGUAGES[code] || code
-    }));
-  }),
-
-  setLanguages: t.procedure.input(z.array(z.string())).mutation(({ input }) => {
-    const available =
-      globalThis.window?.webContents.session.availableSpellCheckerLanguages ||
-      [];
-
-    const resolved = input
-      .map((code) => resolveLanguage(code, available))
-      .filter(Boolean) as string[];
-
-    globalThis.window?.webContents.session.setSpellCheckerLanguages(resolved);
-  }),
+  languages: t.procedure.query(
+    () =>
+      <Language[]>(
+        globalThis.window?.webContents.session.availableSpellCheckerLanguages.map(
+          (code) => ({
+            code,
+            name: LANGUAGES[code]
+          })
+        )
+      )
+  ),
+  enabledLanguages: t.procedure.query(
+    () =>
+      <Language[]>(
+        globalThis.window?.webContents.session
+          .getSpellCheckerLanguages()
+          .map((code) => ({
+            code,
+            name: LANGUAGES[code]
+          }))
+      )
+  ),
+  setLanguages: t.procedure
+    .input(z.array(z.string()))
+    .mutation(({ input: languages }) =>
+      globalThis.window?.webContents.session.setSpellCheckerLanguages(languages)
+    ),
   toggle: t.procedure
     .input(z.object({ enabled: z.boolean() }))
     .mutation(({ input: { enabled } }) => {
@@ -148,16 +128,3 @@ export const spellCheckerRouter = t.router({
     );
   })
 });
-
-function resolveLanguage(code: string, available: string[]) {
-  if (LANGUAGE_REDIRECT_MAP[code]) {
-    const working = LANGUAGE_REDIRECT_MAP[code];
-    return available.includes(working) ? working : code;
-  }
-  const fallback = code.split("-")[0];
-  return available.includes(code)
-    ? code
-    : available.includes(fallback)
-    ? fallback
-    : undefined;
-}

apps/desktop/src/api/sqlite-kysely.ts

@@ -19,9 +19,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import type { Database, Statement } from "better-sqlite3-multiple-ciphers";
 import type { QueryResult } from "@streetwriters/kysely";
-import { app } from "electron";
-import path from "node:path";
-import { initTRPC } from "@trpc/server";
 
 type SQLiteCompatibleType =
   | number
@@ -31,32 +28,25 @@ type SQLiteCompatibleType =
   | bigint
   | null;
 
-class SQLite {
+export class SQLite {
   sqlite?: Database;
   initialized = false;
   preparedStatements: Map<string, Statement<unknown[]>> = new Map();
   retryCounter: Record<string, number> = {};
   extensionsLoaded = false;
-  private filePath?: string;
 
   constructor() {
     console.log("new sqlite worker");
   }
 
-  async open(filename: string) {
+  async open(filePath: string) {
     if (this.sqlite) {
       console.error("Database is already initialized");
       return;
     }
 
-    this.filePath =
-      filename === ":memory:"
-        ? filename
-        : path.join(app.getPath("userData"), filename) + ".sql";
-    if (!isPathAllowed(this.filePath))
-      throw new Error("Database path is not allowed: " + this.filePath);
     this.sqlite = require("better-sqlite3-multiple-ciphers")(
-      this.filePath
+      filePath
     ).unsafeMode(true);
   }
 
@@ -165,11 +155,9 @@ class SQLite {
     this.sqlite = undefined;
   }
 
-  async delete() {
-    if (!this.filePath) return;
-
+  async delete(filePath: string) {
     await this.close();
-    await require("node:fs/promises").rm(this.filePath, {
+    await require("fs/promises").rm(filePath, {
       force: true,
       maxRetries: 5,
       retryDelay: 500
@@ -233,67 +221,3 @@ function rewriteError(e: Error, message: string) {
   error.cause = e.cause;
   return error;
 }
-
-function isPathAllowed(databasePath: string) {
-  if (databasePath === ":memory:") return true;
-  const base = app.getPath("userData");
-  const resolved = path.resolve(databasePath);
-  return resolved.startsWith(base + path.sep);
-}
-
-const t = initTRPC.create();
-
-const databases: Record<string, SQLite> = {};
-
-export const sqliteRouter = t.router({
-  open: t.procedure
-    .input((v) => v)
-    .mutation(async ({ input }) => {
-      const { filePath } = input as { filePath: string };
-      if (databases[filePath]) return filePath;
-      const sqlite = new SQLite();
-      await sqlite.open(filePath);
-      databases[filePath] = sqlite;
-      return filePath;
-    }),
-  run: t.procedure
-    .input((v) => v)
-    .mutation(async ({ input }) => {
-      const { id, sql, parameters } = input as {
-        id: string;
-        sql: string;
-        parameters?: SQLiteCompatibleType[];
-      };
-      const sqlite = databases[id];
-      if (!sqlite) throw new Error("Database not found for id: " + id);
-      return await sqlite.run(sql, parameters);
-    }),
-  close: t.procedure
-    .input((v) => v)
-    .mutation(async ({ input }) => {
-      const { id } = input as { id: string };
-      const sqlite = databases[id];
-      if (!sqlite) throw new Error("Database not found for id: " + id);
-      await sqlite.close();
-      delete databases[id];
-    }),
-  delete: t.procedure
-    .input((v) => v)
-    .mutation(async ({ input }) => {
-      const { id } = input as { id: string };
-      const sqlite = databases[id];
-      if (!sqlite) throw new Error("Database not found for id: " + id);
-      await sqlite.delete();
-      delete databases[id];
-    })
-});
-
-app.on("before-quit", async () => {
-  for (const db of Object.values(databases)) {
-    try {
-      await db.close();
-    } catch (e) {
-      console.error("Error closing database:", e);
-    }
-  }
-});

apps/desktop/src/api/updater.ts

@@ -24,7 +24,6 @@ import type { AppUpdaterEvents } from "electron-updater/out/AppUpdater";
 import { z } from "zod";
 import { config } from "../utils/config";
 import { app } from "electron";
-import { isFlatpak, isPortable, isSnap } from "../utils";
 
 type UpdateInfo = { version: string };
 type Progress = { percent: number };
@@ -32,15 +31,13 @@ type Progress = { percent: number };
 const t = initTRPC.create();
 let cancellationToken: CancellationToken | undefined = undefined;
 let downloadTimeout: NodeJS.Timeout | undefined = undefined;
-const updatesSupported = !isFlatpak() && !isSnap() && !isPortable();
+
 export const updaterRouter = t.router({
-  autoUpdates: t.procedure.query(
-    () => updatesSupported && config.automaticUpdates
-  ),
+  autoUpdates: t.procedure.query(() => config.automaticUpdates),
   releaseTrack: t.procedure.query(() => config.releaseTrack),
   install: t.procedure.query(() => autoUpdater.quitAndInstall()),
   download: t.procedure.query(async () => {
-    if (!updatesSupported || cancellationToken) return;
+    if (cancellationToken) return;
     clearTimeout(downloadTimeout);
     await new Promise<string[]>((resolve, reject) => {
       downloadTimeout = setTimeout(async () => {
@@ -55,7 +52,7 @@ export const updaterRouter = t.router({
     });
   }),
   check: t.procedure.query(async () => {
-    if (!updatesSupported || cancellationToken) return;
+    if (cancellationToken) return;
     clearTimeout(downloadTimeout);
     await new Promise<void>((resolve) => {
       downloadTimeout = setTimeout(async () => {

apps/desktop/src/index.ts

@@ -21,3 +21,4 @@ export { PATHS } from "./constants";
 export type { AppRouter } from "./api";
 export { type UpdateInfo } from "builder-util-runtime";
 export { type DesktopIntegration } from "./utils/config";
+export { SQLite } from "./api/sqlite-kysely.js";

apps/desktop/src/main.ts

@@ -39,7 +39,6 @@ import { setupDesktopIntegration } from "./utils/desktop-integration";
 import { disableCustomDns, enableCustomDns } from "./utils/custom-dns";
 import { Messages, setI18nGlobal } from "@notesnook/intl";
 import { i18n } from "@lingui/core";
-import { PATHS } from "./constants";
 
 const locale =
   process.env.NODE_ENV === "development"
@@ -56,10 +55,6 @@ setI18nGlobal(i18n);
 const appHostnames = isDevelopment()
   ? ["localhost", "127.0.0.1"]
   : ["app.notesnook.com"];
-// Pending nn:// link to open once the window is ready (used on Windows/Linux
-// when the app is launched via the nn:// protocol for the first time).
-let pendingNNLink: string | undefined = findNNLink(process.argv);
-
 // only run a single instance
 if (!MAC_APP_STORE && !app.requestSingleInstanceLock()) {
   console.log("Another instance is already running!");
@@ -130,6 +125,9 @@ async function createWindow() {
 
     webPreferences: {
       zoomFactor: config.zoomFactor,
+      nodeIntegration: true,
+      contextIsolation: false,
+      nodeIntegrationInWorker: true,
       spellcheck: config.isSpellCheckerEnabled,
       preload: __dirname + "/preload.js"
     }
@@ -195,11 +193,6 @@ async function createWindow() {
     setupTray();
     setupJumplist();
   });
-
-  if (pendingNNLink) {
-    bridge.onOpenLink(pendingNNLink);
-    pendingNNLink = undefined;
-  }
 }
 
 app.once("ready", async () => {
@@ -219,12 +212,9 @@ app.once("ready", async () => {
   if (config.customDns) enableCustomDns();
   else disableCustomDns();
 
-  if (!MAC_APP_STORE) app.setAsDefaultProtocolClient("nn");
-
   if (!isDevelopment()) registerProtocol();
   await createWindow();
-  await migrateBackupDirectory();
-  await configureAutoUpdater();
+  configureAutoUpdater();
 });
 
 app.once("window-all-closed", () => {
@@ -235,12 +225,6 @@ app.once("window-all-closed", () => {
 
 app.on("second-instance", async (_ev, argv) => {
   if (!globalThis.window) return;
-  const nnLink = findNNLink(argv);
-  if (nnLink) {
-    bridge.onOpenLink(nnLink);
-    bringToFront();
-    return;
-  }
   const cliOptions = await parseArguments(argv);
   if (cliOptions.note) bridge.onCreateItem("note");
   if (cliOptions.notebook) bridge.onCreateItem("notebook");
@@ -248,29 +232,12 @@ app.on("second-instance", async (_ev, argv) => {
   bringToFront();
 });
 
-// macOS opens URLs via this event. The app may or may not be fully loaded yet.
-app.on("open-url", (event, url) => {
-  event.preventDefault();
-  if (!url.startsWith("nn://")) return;
-  if (globalThis.window) {
-    bridge.onOpenLink(url);
-    bringToFront();
-  } else {
-    // Window not ready yet — store for when createWindow finishes loading.
-    pendingNNLink = url;
-  }
-});
-
 app.on("activate", () => {
   if (globalThis.window === null) {
     createWindow();
   }
 });
 
-function findNNLink(argv: string[]): string | undefined {
-  return argv.find((arg) => arg.startsWith("nn://"));
-}
-
 function createURL(options: CLIOptions, path = "/") {
   const url = new URL(isDevelopment() ? "http://localhost:3000" : PROTOCOL_URL);
 
@@ -281,31 +248,7 @@ function createURL(options: CLIOptions, path = "/") {
   else if (typeof options.note === "string")
     url.hash = `/notes/${options.note}/edit`;
   else if (typeof options.notebook === "string")
-    url.pathname = `/notebooks/${options.notebook}`;
+    url.hash = `/notebooks/${options.notebook}`;
 
   return url;
 }
-
-async function migrateBackupDirectory() {
-  if (!globalThis.window) return;
-  try {
-    if (config.backupDirectory !== PATHS.backupsDirectory) return;
-    const oldPath = await globalThis.window?.webContents.executeJavaScript(
-      `localStorage.getItem("backupStorageLocation")`
-    );
-    if (!oldPath || oldPath === PATHS.backupsDirectory) return;
-    config.backupDirectory = oldPath;
-  } catch (e) {
-    console.error("Failed to migrate backup directory", e);
-    const pressedButton = dialog.showMessageBoxSync(globalThis.window, {
-      message:
-        "Failed to migrate backup directory. It has been reset to default.",
-      title: "Backup Directory Migration Failed",
-      type: "error",
-      buttons: ["Set backup directory", "Ignore"]
-    });
-    if (pressedButton === 0) {
-      await api.integration.selectBackupDirectory();
-    }
-  }
-}

apps/desktop/src/preload.ts

@@ -19,21 +19,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 /* eslint-disable no-var */
 
 import { ELECTRON_TRPC_CHANNEL } from "electron-trpc/main";
-import { ipcRenderer, contextBridge } from "electron";
+// import type { NNCrypto } from "@notesnook/crypto";
+import { ipcRenderer } from "electron";
+import { platform } from "os";
 
 declare global {
-  var os: () => "mas" | typeof process.platform;
+  var os: () => "mas" | ReturnType<typeof platform>;
   var electronTRPC: any;
+  // var NativeNNCrypto: (new () => NNCrypto) | undefined;
 }
 
-const electronTRPC = {
-  sendMessage: (operation: any) =>
-    ipcRenderer.send(ELECTRON_TRPC_CHANNEL, operation),
-  onMessage: (callback: any) =>
-    ipcRenderer.on(ELECTRON_TRPC_CHANNEL, (_event, args) => callback(args))
-};
+process.once("loaded", async () => {
+  const electronTRPC = {
+    sendMessage: (operation: any) =>
+      ipcRenderer.send(ELECTRON_TRPC_CHANNEL, operation),
+    onMessage: (callback: any) =>
+      ipcRenderer.on(ELECTRON_TRPC_CHANNEL, (_event, args) => callback(args))
+  };
+  globalThis.electronTRPC = electronTRPC;
+});
 
-const os = () => (MAC_APP_STORE ? "mas" : process.platform);
-
-contextBridge.exposeInMainWorld("electronTRPC", electronTRPC);
-contextBridge.exposeInMainWorld("os", os);
+// globalThis.NativeNNCrypto = require("@notesnook/crypto").NNCrypto;
+globalThis.os = () => (MAC_APP_STORE ? "mas" : platform());

apps/desktop/src/utils/config.ts

@@ -21,7 +21,6 @@ import { nativeTheme } from "electron";
 import { JSONStorage } from "./json-storage";
 import { z } from "zod";
 import { autoUpdater } from "electron-updater";
-import { PATHS } from "../constants";
 
 export const DesktopIntegration = z.object({
   autoStart: z.boolean().optional(),
@@ -54,8 +53,7 @@ export const config = {
 
   backgroundColor: nativeTheme.themeSource === "dark" ? "#0f0f0f" : "#ffffff",
   windowControlsIconColor:
-    nativeTheme.themeSource === "dark" ? "#ffffff" : "#000000",
-  backupDirectory: PATHS.backupsDirectory
+    nativeTheme.themeSource === "dark" ? "#ffffff" : "#000000"
 };
 
 type ConfigKey = keyof typeof config;

apps/desktop/src/utils/index.ts

@@ -33,7 +33,3 @@ export function isFlatpak() {
 export function isSnap() {
   return process.env.SNAP !== undefined;
 }
-
-export function isPortable() {
-  return process.env.PORTABLE_EXECUTABLE_DIR !== undefined;
-}

apps/desktop/tsconfig.json

@@ -1,11 +1,9 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig",
   "compilerOptions": {
     "outDir": "./dist/",
     "lib": ["ESNext"],
     "moduleResolution": "Bundler"
   },
-  "files": ["global.d.ts"],
-  "include": ["src"],
-  "exclude": ["__tests__"]
+  "include": ["src", "global.d.ts"]
 }

apps/desktop/vitest.config.ts

@@ -0,0 +1,42 @@
+/*
+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 { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    testTimeout: 120 * 1000,
+    hookTimeout: 120 * 1000,
+    sequence: {
+      concurrent: true,
+      shuffle: true
+    },
+    globalSetup: "./__tests__/global-setup.ts",
+    dir: "./__tests__/",
+    exclude: [
+      "**/node_modules/**",
+      "**/dist/**",
+      "**/cypress/**",
+      "**/.{idea,git,cache,output,temp}/**",
+      "**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.*",
+      "**/test-results/**",
+      "**/test-artifacts/**"
+    ]
+  }
+});

apps/mobile/.detoxrc.js

@@ -30,7 +30,7 @@ module.exports = {
       testBinaryPath:
         "android/app/build/outputs/apk/androidTest/debug/app-debug-androidTest.apk",
       build:
-        "cd android ; ENVFILE=.env.test ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug -PreactNativeArchitectures=arm64-v8a && cd ..",
+        "cd android ; ENVFILE=.env.test ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
       reversePorts: [8081]
     },
     "android.release": {

apps/mobile/.gitignore

@@ -1,5 +1,4 @@
 .yarnrc.yml
-tsconfig.tsbuildinfo
 artifacts/
 # OSX
 #

apps/mobile/android/app/build.gradle

@@ -140,7 +140,7 @@ android {
         if (project.hasProperty("prBuildNumber")) {
             versionCode Integer.parseInt(prBuildNumber())
         } else {
-            versionCode 3109
+            versionCode 3099
         }
         versionName getNpmVersion()
         testBuildType System.getProperty('testBuildType', 'debug')

apps/mobile/android/app/src/main/AndroidManifest.xml

@@ -155,15 +155,6 @@
                 <data android:scheme="notesnook" />
             </intent-filter>
 
-            <intent-filter android:label="Notesnook">
-                <action android:name="android.intent.action.VIEW" />
-
-                <category android:name="android.intent.category.DEFAULT" />
-                <category android:name="android.intent.category.BROWSABLE" />
-
-                <data android:scheme="nn" />
-            </intent-filter>
-
         </activity>
         <activity
             android:name="com.facebook.react.devsupport.DevSettingsActivity"

apps/mobile/android/app/src/main/java/com/streetwriters/notesnook/NotePreviewWidget.java

@@ -33,7 +33,7 @@ public class NotePreviewWidget extends AppWidgetProvider {
         intent.putExtra(OpenNoteId, note.getId());
         intent.setAction(Intent.ACTION_VIEW);
         intent.putExtra(RCTNNativeModule.IntentType, "OpenNote");
-        intent.setData(Uri.parse("nn://note/" + note.getId()));
+        intent.setData(Uri.parse("https://app.notesnook.com/open_note?id=" + note.getId()));
         PendingIntent pendingIntent = PendingIntent.getActivity(context, appWidgetId, intent, PendingIntent.FLAG_UPDATE_CURRENT | PendingIntent.FLAG_IMMUTABLE, getActivityOptionsBundle());
         views.setOnClickPendingIntent(R.id.open_note, pendingIntent);
 

apps/mobile/android/app/src/main/java/com/streetwriters/notesnook/RCTNNativeModule.java

@@ -244,7 +244,7 @@ public class RCTNNativeModule extends ReactContextBaseJavaModule {
                 return;
             }
 
-            String uri = "nn://" + type + "/" + id;
+            String uri = "https://app.notesnook.com/open_" + type + "?id=" + id;
             Intent intent = new Intent(Intent.ACTION_VIEW, android.net.Uri.parse(uri));
             intent.setPackage(mContext.getPackageName());
 

apps/mobile/android/releasenotes/whatsnew-en-US

@@ -1,7 +1,8 @@
-- Inbox API is now in beta. Learn more about it at https://help.notesnook.com/inbox-api/getting-started
-- Added close all tabs button in editor
-- Deeplinking support for nn:// urls
-- Set default image compression mode in Settings -> Behavior
+- Fix clearing note title adds generated title instead of staying empty
+- Improved table cell selection, table scrolling, and table cell editing on mobile
+- Fixed app on launch randomly focuses editor instead of notes list
+- Fixed file size check shows error but continues adding the file to editor
+- Note title headline format should get content from first paragraph
 - Minor bug fixes and performance improvements
 
 Thank you for using Notesnook!

apps/mobile/app/app.tsx

@@ -23,7 +23,7 @@ import {
   THEME_COMPATIBILITY_VERSION,
   useThemeEngineStore
 } from "@notesnook/theme";
-import React, { PropsWithChildren, useEffect } from "react";
+import React, { useEffect } from "react";
 import { Appearance, I18nManager, Linking, StatusBar } from "react-native";
 import "react-native-gesture-handler";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
@@ -66,9 +66,6 @@ const App = (props: { configureMode: "note-preview" }) => {
   useEffect(() => {
     SettingsService.onFirstLaunch();
     changeSystemBarColors();
-    SettingsService.setPrivacyScreen(
-      SettingsService.getProperty("privacyScreen")
-    );
     setTimeout(async () => {
       await Notifications.get();
       if (SettingsService.get().notifNotes) {
@@ -109,10 +106,8 @@ let currTheme =
     : SettingsService.getProperty("lighTheme");
 useThemeEngineStore.getState().setTheme(currTheme);
 
-export const withTheme = (
-  Element: (props: PropsWithChildren) => JSX.Element
-) => {
-  return function AppWithThemeProvider(props: PropsWithChildren) {
+export const withTheme = (Element: (props: any) => JSX.Element) => {
+  return function AppWithThemeProvider(props: any) {
     const [colorScheme, darkTheme, lightTheme] = useThemeStore((state) => [
       state.colorScheme,
       state.darkTheme,

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

@@ -25,6 +25,7 @@ import * as Keychain from "react-native-keychain";
 import { MMKVLoader, ProcessingModes } from "react-native-mmkv-storage";
 import { generateSecureRandom } from "react-native-securerandom";
 import { DatabaseLogger } from ".";
+import { ToastManager } from "../../services/event-manager";
 import { MMKV } from "./mmkv";
 
 // Database key cipher is persisted across different user sessions hence it has
@@ -204,8 +205,9 @@ export async function getDatabaseKey(appLockPassword?: string) {
   }
 
   if (await Keychain.hasInternetCredentials("notesnook")) {
-    const userKeyCredentials =
-      await Keychain.getInternetCredentials("notesnook");
+    const userKeyCredentials = await Keychain.getInternetCredentials(
+      "notesnook"
+    );
 
     if (userKeyCredentials) {
       const userKeyCipher: Cipher = (await encrypt(

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

@@ -72,7 +72,7 @@ export async function setupDatabase(password?: string) {
       ({
         compress: Gzip.deflate,
         decompress: Gzip.inflate
-      }) as ICompressor,
+      } as ICompressor),
     batchSize: 50,
     sqliteOptions: {
       dialect: (name) => ({

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

@@ -109,8 +109,8 @@ class RNSqliteConnection implements DatabaseConnection {
       query.kind === "SelectQueryNode"
         ? "query"
         : query.kind === "RawNode"
-          ? "raw"
-          : "exec";
+        ? "raw"
+        : "exec";
 
     const result = await this.db.executeAsync(sql, parameters as any[]);
 

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

@@ -31,8 +31,6 @@ import {
   generateCryptoKeyFallback
 } from "./encryption";
 import { MMKV } from "./mmkv";
-import OpenPGP from "react-native-fast-openpgp";
-import { strings } from "@notesnook/intl";
 
 export class KV {
   storage: MMKVInstance;
@@ -138,41 +136,11 @@ export const Storage: IStorage = {
   clear(): Promise<void> {
     return DefaultStorage.clear();
   },
-  async generatePGPKeyPair() {
-    const keys = await OpenPGP.generate({
-      name: "NN",
-      email: "NN@NN.NN"
-    });
-    return { publicKey: keys.publicKey, privateKey: keys.privateKey };
+  generateCryptoKeyPair() {
+    throw new Error("Not implemented");
   },
-  async validatePGPKeyPair(keys): Promise<{
-    isValid: boolean;
-    message: string;
-  }> {
-    try {
-      const dummyData = JSON.stringify({
-        favorite: true,
-        title: "Hello world"
-      });
-      const encrypted = await OpenPGP.encrypt(dummyData, keys.publicKey);
-      const decrypted = await OpenPGP.decrypt(encrypted, keys.privateKey, "");
-
-      const isValid = decrypted === dummyData;
-
-      return {
-        isValid,
-        message: isValid ? "" : strings.invalidPgpKeyPair()
-      };
-    } catch (e) {
-      console.error("PGP key pair validation error:", e);
-      return {
-        isValid: false,
-        message: strings.invalidPgpKeyPair()
-      };
-    }
-  },
-  async decryptPGPMessage(privateKeyArmored, encryptedMessage) {
-    return await OpenPGP.decrypt(encryptedMessage, privateKeyArmored, "");
+  decryptAsymmetric() {
+    throw new Error("Not implemented");
   },
   getAllKeys(): Promise<string[]> {
     return DefaultStorage.getAllKeys();

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

@@ -112,8 +112,8 @@ export async function writeEncryptedBase64(
 async function deleteLocalFile(filename: string) {
   try {
     await createCacheDir();
-    const path = cacheDir + `/${filename}`;
-    const exists = await RNFetchBlob.fs.exists(path);
+    let path = cacheDir + `/${filename}`;
+    let exists = await RNFetchBlob.fs.exists(path);
     if (Platform.OS === "ios" && !exists) {
       const iosAppGroup =
         Platform.OS === "ios"
@@ -309,9 +309,7 @@ export async function deleteDCacheFiles() {
         });
       }
     }
-  } catch (e) {
-    /** Empty */
-  }
+  } catch (e) {}
 }
 
 export async function getCachePathForFile(filename: string) {

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

@@ -115,10 +115,6 @@ export const FileSizeResult = {
   Error: -1
 };
 
-function getFileSizeFromHeaders(headers: Headers) {
-  return headers.get("x-object-size") || headers.get("content-length");
-}
-
 export async function getUploadedFileSize(hash: string, retry = 0) {
   try {
     const url = `${hosts.API_HOST}/s3?name=${hash}`;
@@ -128,21 +124,24 @@ export async function getUploadedFileSize(hash: string, retry = 0) {
       headers: { Authorization: `Bearer ${token}` }
     });
 
-    const fileSize = getFileSizeFromHeaders(attachmentInfo.headers);
-
-    if (!attachmentInfo.ok || fileSize === null) {
+    if (
+      !attachmentInfo.ok ||
+      attachmentInfo.headers?.get("content-length") === null
+    ) {
       if (retry < 3) {
         DatabaseLogger.log(`Retrying file size check: ${hash}, ${retry}`);
         return getUploadedFileSize(hash, retry + 1);
       }
       throw new Error(
-        `File size check failed: ${hash}, ${attachmentInfo.status}, ${fileSize}`
+        `File size check failed: ${hash}, ${
+          attachmentInfo.status
+        }, ${attachmentInfo.headers?.get("content-length")}`
       );
     }
 
-    console.log(attachmentInfo.headers);
-
-    const contentLength = parseInt(fileSize as string);
+    const contentLength = parseInt(
+      attachmentInfo.headers?.get("content-length") as string
+    );
     return isNaN(contentLength) ? FileSizeResult.Empty : contentLength;
   } catch (e) {
     DatabaseLogger.error(e);
@@ -162,10 +161,10 @@ export async function checkUpload(
     size === 0
       ? `File size is 0.`
       : size === -1
-        ? `File verification check failed.`
-        : expectedSize !== decryptedLength
-          ? `File size mismatch. Expected ${size} bytes but got ${decryptedLength} bytes.`
-          : undefined;
+      ? `File verification check failed.`
+      : expectedSize !== decryptedLength
+      ? `File size mismatch. Expected ${size} bytes but got ${decryptedLength} bytes.`
+      : undefined;
   if (error) throw new Error(error);
 }
 
@@ -192,8 +191,7 @@ export async function checkAndCreateDir(path: string) {
 }
 
 export const santizeUri = (uri: string) => {
-  const decoded = decodeURI(uri);
-  return Platform.OS === "ios" ? decoded.replace("file:///", "/") : decoded;
+  return Platform.OS === "ios" ? decodeURI(uri).replace("file:///", "/") : uri;
 };
 
 export function isSuccessStatusCode(statusCode: number) {

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

@@ -36,7 +36,7 @@ export const Announcement = () => {
     state.announcements,
     state.remove
   ]);
-  const announcement = announcements.length > 0 ? announcements[0] : null;
+  let announcement = announcements.length > 0 ? announcements[0] : null;
   const selectionMode = useSelectionStore((state) => state.selectionMode);
 
   return !announcement || selectionMode ? null : (

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

@@ -32,7 +32,7 @@ import { Action } from "../../stores/use-message-store";
 
 export const Cta = (props: BodyItemProps) => {
   const { colors } = useThemeColors();
-  const buttons =
+  let buttons =
     props.item.actions.filter((item) => allowedOnPlatform(item.platforms)) ||
     [];
 

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

@@ -53,6 +53,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { strings } from "@notesnook/intl";
+import { AppFontSize } from "../../utils/size";
 import { editorController } from "../../screens/editor/tiptap/utils";
 import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
 
@@ -238,8 +239,8 @@ const AppLocked = () => {
             deviceMode !== "mobile"
               ? "50%"
               : Platform.OS == "ios"
-                ? "95%"
-                : "100%",
+              ? "95%"
+              : "100%",
           paddingHorizontal: 12,
           marginBottom: 30,
           marginTop: 15,

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

@@ -22,7 +22,7 @@ import { Attachment, Note, VirtualizedGrouping } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import Clipboard from "@react-native-clipboard/clipboard";
 import React, { RefObject, useEffect, useState } from "react";
-import { TextInput, View } from "react-native";
+import { View } from "react-native";
 import { ActionSheetRef } from "react-native-actions-sheet";
 import { ScrollView } from "react-native-gesture-handler";
 import { db } from "../../common/database";
@@ -46,6 +46,7 @@ import {
   eOnLoadNote
 } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
+import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
 import { openNote } from "../list-items/note/wrapper";
@@ -59,7 +60,6 @@ import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../utils/styles";
 import Navigation from "../../services/navigation";
-import { createFormRef, validators } from "../ui/input/form-input";
 
 const Actions = ({
   attachment,
@@ -154,100 +154,50 @@ const Actions = ({
     {
       name: strings.rename(),
       onPress: () => {
-        close?.();
-        setTimeout(() => {
-          presentDialog({
-            title: strings.renameFile(),
-            form: {
-              formRef: createFormRef({
-                name: attachment.filename
-              }),
-              items: [
-                {
-                  name: "name",
-                  defaultValue: attachment.filename,
-                  placeholder: strings.enterTitle(),
-                  ref: React.createRef<TextInput | null>(),
-                  validators: [validators.required(strings.nameIsRequired())]
-                }
-              ],
-              onFormSubmit: async (form) => {
-                try {
-                  const value = form.getValue("name");
-                  await db.attachments.add({
-                    hash: attachment.hash,
-                    filename: value
-                  });
-                  setFilename(value);
-                  setAttachments();
-                  eSendEvent(eDBItemUpdate, attachment.id);
-                  ToastManager.show({
-                    message: `Attachment renamed to ${value}`,
-                    type: "success"
-                  });
-
-                  return true;
-                } catch (e) {
-                  form.setError("name", (e as Error).message);
-                  return false;
-                }
-              }
-            },
-            positiveText: strings.rename()
-          });
-        }, 500);
+        presentDialog({
+          input: true,
+          title: strings.renameFile(),
+          defaultValue: attachment.filename,
+          positivePress: async (value) => {
+            if (value && value.length > 0) {
+              await db.attachments.add({
+                hash: attachment.hash,
+                filename: value
+              });
+              setFilename(value);
+              setAttachments();
+              eSendEvent(eDBItemUpdate, attachment.id);
+            }
+            return true;
+          },
+          positiveText: strings.rename()
+        });
       },
       icon: "form-textbox"
     },
     {
       name: strings.delete(),
       onPress: async () => {
-        close?.();
-        setTimeout(() => {
-          presentDialog({
-            title: strings.deleteAttachment(),
-            paragraph: strings.deleteAttachmentConfirm(),
-            positiveText: strings.yes(),
-            negativeText: strings.no(),
-            positiveType: "errorShade",
-            positivePress: async () => {
-              try {
-                const relations = await db.relations
-                  .to(attachment, "note")
-                  .get();
-                await db.attachments.remove(attachment.hash, false);
-                ToastManager.show({
-                  type: "success",
-                  message: strings.attachmentDeleted()
+        const relations = await db.relations.to(attachment, "note").get();
+        await db.attachments.remove(attachment.hash, false);
+        setAttachments();
+        eSendEvent(eDBItemUpdate, attachment.id);
+        relations
+          .map((relation) => relation.fromId)
+          .forEach(async (id) => {
+            useTabStore.getState().forEachNoteTab(id, async (tab) => {
+              const isFocused = useTabStore.getState().currentTab === tab.id;
+              if (isFocused) {
+                eSendEvent(eOnLoadNote, {
+                  item: await db.notes.note(id),
+                  forced: true
                 });
-                setAttachments();
-                eSendEvent(eDBItemUpdate, attachment.id);
-                relations
-                  .map((relation) => relation.fromId)
-                  .forEach(async (id) => {
-                    useTabStore.getState().forEachNoteTab(id, async (tab) => {
-                      const isFocused =
-                        useTabStore.getState().currentTab === tab.id;
-                      if (isFocused) {
-                        eSendEvent(eOnLoadNote, {
-                          item: await db.notes.note(id),
-                          forced: true
-                        });
-                      } else {
-                        editorController.current.commands.setLoading(
-                          true,
-                          tab.id
-                        );
-                      }
-                    });
-                  });
-                return true;
-              } catch (e) {
-                return false;
+              } else {
+                editorController.current.commands.setLoading(true, tab.id);
               }
-            }
+            });
           });
-        }, 500);
+        close?.();
       },
       icon: "delete-outline"
     }

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

@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { LegendList } from "@legendapp/list";
 import {
   Attachment,
   FilteredSelector,

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

@@ -18,7 +18,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { strings } from "@notesnook/intl";
-import { useThemeColors } from "@notesnook/theme";
 import React, { useRef, useState } from "react";
 import { View } from "react-native";
 import { db } from "../../common/database";
@@ -27,44 +26,42 @@ import { eSendEvent, ToastManager } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import { useUserStore } from "../../stores/use-user-store";
 import { eOpenRecoveryKeyDialog } from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Dialog } from "../dialog";
-import AppIcon from "../ui/AppIcon";
 import { Button } from "../ui/button";
-import FormInput, { createFormRef, validators } from "../ui/input/form-input";
+import Input from "../ui/input";
 import { Notice } from "../ui/notice";
-import Paragraph from "../ui/typography/paragraph";
 import { TextInput } from "react-native-gesture-handler";
 
 export const ChangePassword = () => {
-  const { colors } = useThemeColors();
-  const formRef = useRef(
-    createFormRef({
-      oldPassword: "",
-      password: ""
-    })
-  );
-  const oldPasswordInputRef = useRef<TextInput>(null);
   const passwordInputRef = useRef<TextInput>(null);
+  const password = useRef<string>(undefined);
+  const oldPasswordInputRef = useRef<TextInput>(null);
+  const oldPassword = useRef<string>(undefined);
+
+  const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string>();
   const user = useUserStore((state) => state.user);
 
   const changePassword = async () => {
-    setError(undefined);
-    formRef.current.clearErrors();
-
     if (!user?.isEmailConfirmed) {
-      setError(strings.emailNotConfirmedDesc());
+      ToastManager.show({
+        heading: strings.emailNotConfirmed(),
+        message: strings.emailNotConfirmedDesc(),
+        type: "error",
+        context: "local"
+      });
       return;
     }
-    if (!formRef.current.validate()) {
+    if (error || !oldPassword.current || !password.current) {
+      ToastManager.show({
+        heading: strings.allFieldsRequired(),
+        message: strings.allFieldsRequiredDesc(),
+        type: "error",
+        context: "local"
+      });
       return;
     }
-
-    const values = formRef.current.getValues();
-
     setLoading(true);
     try {
       const result = await BackupService.run(
@@ -77,8 +74,8 @@ export const ChangePassword = () => {
       }
 
       const passwordChanged = await db.user.changePassword(
-        values.oldPassword,
-        values.password
+        oldPassword.current,
+        password.current
       );
 
       if (!passwordChanged) {
@@ -94,15 +91,15 @@ export const ChangePassword = () => {
       Navigation.goBack();
       eSendEvent(eOpenRecoveryKeyDialog);
     } catch (e) {
-      const message = (e as Error).message;
       setLoading(false);
-
-      if (/old password/i.test(message)) {
-        formRef.current.setError("oldPassword", message);
-      } else {
-        setError(message);
-      }
+      ToastManager.show({
+        heading: strings.passwordChangeFailed(),
+        message: (e as Error).message,
+        type: "error",
+        context: "local"
+      });
     }
+    setLoading(false);
   };
 
   return (
@@ -113,61 +110,36 @@ export const ChangePassword = () => {
       }}
     >
       <Dialog context="change-password-dialog" />
-      <FormInput
-        name="oldPassword"
-        formRef={formRef}
+      <Input
         fwdRef={oldPasswordInputRef}
-        loading={loading}
-        validators={[validators.required(strings.currentPasswordRequired())]}
+        onChangeText={(value) => {
+          oldPassword.current = value;
+        }}
         returnKeyLabel="Next"
         returnKeyType="next"
         secureTextEntry
         autoComplete="password"
         autoCapitalize="none"
         autoCorrect={false}
-        placeholder={strings.currentPassword()}
-        onSubmitEditing={() => {
-          passwordInputRef.current?.focus();
-        }}
+        placeholder={strings.oldPassword()}
       />
 
-      <FormInput
-        name="password"
-        formRef={formRef}
+      <Input
         fwdRef={passwordInputRef}
-        loading={loading}
-        validators={[validators.required(strings.passwordRequired())]}
+        onChangeText={(value) => {
+          password.current = value;
+        }}
+        onErrorCheck={(e) => setError(e)}
         returnKeyLabel={strings.next()}
         returnKeyType="next"
         secureTextEntry
+        validationType="password"
         autoComplete="password"
         autoCapitalize="none"
         autoCorrect={false}
         placeholder={strings.newPassword()}
-        onSubmitEditing={() => {
-          changePassword();
-        }}
       />
 
-      {error ? (
-        <Paragraph
-          numberOfLines={4}
-          onPress={() => {}}
-          color={colors.error.accent}
-          style={{
-            textAlign: "center",
-            marginTop: DefaultAppStyles.GAP_VERTICAL
-          }}
-        >
-          <AppIcon
-            color={colors.error.accent}
-            name="alert-circle-outline"
-            size={AppFontSize.sm - 1}
-          />{" "}
-          {error}
-        </Paragraph>
-      ) : null}
-
       <Notice text={strings.changePasswordNotice()} type="alert" />
 
       <View style={{ height: 10 }} />

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

@@ -27,7 +27,7 @@ import { useThemeColors } from "@notesnook/theme";
 import DialogHeader from "../dialog/dialog-header";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
-import FormInput, { createFormRef, validators } from "../ui/input/form-input";
+import Input from "../ui/input";
 import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
@@ -36,32 +36,31 @@ import { DefaultAppStyles } from "../../utils/styles";
 
 export const ForgotPassword = ({ userEmail }: { userEmail: string }) => {
   const { colors } = useThemeColors("sheet");
-  const formRef = useRef(
-    createFormRef({
-      email: userEmail || ""
-    })
-  );
+  const email = useRef<string>(userEmail);
   const emailInputRef = useRef<TextInput>(null);
+  const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
   const [sent, setSent] = useState(false);
 
   const sendRecoveryEmail = async () => {
-    if (formRef.current.validateField("email")) {
+    if (!email.current || error) {
+      ToastManager.show({
+        heading: strings.emailRequired(),
+        type: "error",
+        context: "local"
+      });
       return;
     }
-
-    const values = formRef.current.getValues();
-
     setLoading(true);
     try {
-      const lastRecoveryEmailTime = SettingsService.get().lastRecoveryEmailTime;
+      let lastRecoveryEmailTime = SettingsService.get().lastRecoveryEmailTime;
       if (
         lastRecoveryEmailTime &&
         Date.now() - lastRecoveryEmailTime < 60000 * 3
       ) {
         throw new Error(strings.pleaseWaitBeforeSendEmail());
       }
-      await db.user.recoverAccount(values.email.toLowerCase());
+      await db.user.recoverAccount(email.current.toLowerCase());
       SettingsService.set({
         lastRecoveryEmailTime: Date.now()
       });
@@ -76,7 +75,12 @@ export const ForgotPassword = ({ userEmail }: { userEmail: string }) => {
       setSent(true);
     } catch (e) {
       setLoading(false);
-      formRef.current.setError("email", (e as Error).message);
+      ToastManager.show({
+        heading: strings.recoveryEmailFailed(),
+        message: (e as Error).message,
+        type: "error",
+        context: "local"
+      });
     }
   };
 
@@ -122,25 +126,22 @@ export const ForgotPassword = ({ userEmail }: { userEmail: string }) => {
           <DialogHeader title={strings.accountRecovery()} />
           <Seperator />
 
-          <FormInput
-            name="email"
-            formRef={formRef}
+          <Input
             fwdRef={emailInputRef}
-            loading={loading}
+            onChangeText={(value) => {
+              email.current = value;
+            }}
+            defaultValue={email.current}
+            onErrorCheck={(e) => setError(e)}
             returnKeyLabel={strings.next()}
             returnKeyType="next"
             autoComplete="email"
-            keyboardType="email-address"
+            validationType="email"
             autoCorrect={false}
             autoCapitalize="none"
+            errorMessage={strings.emailInvalid()}
             placeholder={strings.email()}
-            validators={[
-              validators.required(strings.emailRequired()),
-              validators.email(strings.enterAValidEmailAddress())
-            ]}
-            onSubmitEditing={() => {
-              sendRecoveryEmail();
-            }}
+            onSubmit={() => {}}
           />
 
           <Button

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

@@ -22,9 +22,14 @@ import { useThemeColors } from "@notesnook/theme";
 import { RouteProp, useRoute } from "@react-navigation/native";
 import React, { useEffect, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { DDS } from "../../services/device-detection";
-import { eSendEvent, presentSheet } from "../../services/event-manager";
+import {
+  eSendEvent,
+  presentSheet,
+  ToastManager
+} from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
@@ -37,9 +42,8 @@ import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import { Progress } from "../sheets/progress";
-import AppIcon from "../ui/AppIcon";
 import { Button } from "../ui/button";
-import FormInput, { validators } from "../ui/input/form-input";
+import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
@@ -64,13 +68,14 @@ export const Login = ({
   const {
     step,
     setStep,
+    password,
+    email,
     emailInputRef,
     passwordInputRef,
     loading,
     setLoading,
-    login,
-    error,
-    formRef
+    setError,
+    login
   } = useLogin(async () => {
     eSendEvent(eUserLoggedIn, true);
     await sleep(500);
@@ -93,11 +98,6 @@ export const Login = ({
   });
   const { width, height } = useWindowDimensions();
   const isTablet = width > 600;
-
-  const onContinue = () => {
-    login();
-  };
-
   useEffect(() => {
     async () => {
       setStep(LoginSteps.emailAuth);
@@ -195,35 +195,35 @@ export const Login = ({
                   ? "50%"
                   : "49.99%"
                 : focused
-                  ? "100%"
-                  : "99.9%",
+                ? "100%"
+                : "99.9%",
               backgroundColor: colors.primary.background,
               alignSelf: "center",
               paddingHorizontal: DDS.isTab ? 0 : DefaultAppStyles.GAP,
               gap: DefaultAppStyles.GAP_VERTICAL
             }}
           >
-            <FormInput
-              name="email"
-              formRef={formRef}
+            <Input
               fwdRef={emailInputRef}
+              onChangeText={(value) => {
+                email.current = value;
+              }}
               testID="input.email"
+              onErrorCheck={(e) => setError(e)}
               returnKeyLabel="Next"
               returnKeyType="next"
               autoComplete="email"
-              keyboardType="email-address"
+              validationType="email"
               marginBottom={0}
               autoCorrect={false}
               autoCapitalize="none"
+              errorMessage={strings.emailInvalid()}
               placeholder={strings.email()}
+              defaultValue={email.current}
               editable={step === LoginSteps.emailAuth && !loading}
-              validators={[
-                validators.required(strings.emailRequired()),
-                validators.email(strings.enterAValidEmailAddress())
-              ]}
-              onSubmitEditing={() => {
+              onSubmit={() => {
                 if (step === LoginSteps.emailAuth) {
-                  onContinue();
+                  login();
                 } else {
                   passwordInputRef.current?.focus();
                 }
@@ -232,10 +232,11 @@ export const Login = ({
 
             {step === LoginSteps.passwordAuth && (
               <>
-                <FormInput
-                  name="password"
-                  formRef={formRef}
+                <Input
                   fwdRef={passwordInputRef}
+                  onChangeText={(value) => {
+                    password.current = value;
+                  }}
                   testID="input.password"
                   returnKeyLabel={strings.done()}
                   returnKeyType="done"
@@ -246,9 +247,9 @@ export const Login = ({
                   placeholder={strings.password()}
                   marginBottom={0}
                   editable={!loading}
-                  validators={[validators.required(strings.passwordRequired())]}
-                  onSubmitEditing={() => {
-                    onContinue();
+                  defaultValue={password.current}
+                  onSubmit={() => {
+                    login();
                   }}
                 />
                 <Button
@@ -259,13 +260,9 @@ export const Login = ({
                     paddingHorizontal: 0
                   }}
                   onPress={() => {
-                    if (loading) return;
+                    if (loading || !email.current) return;
                     presentSheet({
-                      component: (
-                        <ForgotPassword
-                          userEmail={formRef.current.getValue("email")}
-                        />
-                      )
+                      component: <ForgotPassword userEmail={email.current} />
                     });
                   }}
                   textStyle={{
@@ -281,7 +278,8 @@ export const Login = ({
               <Button
                 loading={loading}
                 onPress={() => {
-                  onContinue();
+                  if (loading) return;
+                  login();
                 }}
                 style={{
                   width: "100%"
@@ -335,25 +333,6 @@ export const Login = ({
                   </Paragraph>
                 </TouchableOpacity>
               ) : null}
-
-              {error ? (
-                <Paragraph
-                  numberOfLines={4}
-                  onPress={() => {}}
-                  color={colors.error.accent}
-                  style={{
-                    textAlign: "center",
-                    marginTop: DefaultAppStyles.GAP_VERTICAL
-                  }}
-                >
-                  <AppIcon
-                    color={colors.error.accent}
-                    name="alert-circle-outline"
-                    size={AppFontSize.sm - 1}
-                  />{" "}
-                  {error.message}
-                </Paragraph>
-              ) : null}
             </View>
           </View>
         </View>

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

@@ -43,26 +43,29 @@ import SheetProvider from "../sheet-provider";
 import { Toast } from "../toast";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
+import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
 import { strings } from "@notesnook/intl";
 import { getObfuscatedEmail } from "../../utils/functions";
 import { DefaultAppStyles } from "../../utils/styles";
-import FormInput, { validators } from "../ui/input/form-input";
 
 export const SessionExpired = () => {
   const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [focused, setFocused] = useState(false);
-  const { step, passwordInputRef, loading, login, formRef } = useLogin(() => {
-    eSendEvent(eUserLoggedIn, true);
-    setVisible(false);
-    setFocused(false);
-    useUserStore.setState({
-      disableAppLockRequests: false
-    });
-  }, true);
+  const { step, password, email, passwordInputRef, loading, login } = useLogin(
+    () => {
+      eSendEvent(eUserLoggedIn, true);
+      setVisible(false);
+      setFocused(false);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
+    },
+    true
+  );
 
   const logout = async () => {
     try {
@@ -89,7 +92,7 @@ export const SessionExpired = () => {
 
   const open = React.useCallback(async () => {
     try {
-      const res = await db.tokenManager.getToken();
+      let res = await db.tokenManager.getToken();
       if (!res) throw new Error("no token found");
       if (db.tokenManager._isTokenExpired(res))
         throw new Error("token expired");
@@ -99,9 +102,9 @@ export const SessionExpired = () => {
 
       Sync.run("global", false, "full", async (complete) => {
         if (!complete) {
-          const user = await db.user.getUser();
+          let user = await db.user.getUser();
           if (!user) return;
-          formRef.current.setValue("email", user.email);
+          email.current = user.email;
           setVisible(true);
           setFocused(false);
           return;
@@ -112,16 +115,16 @@ export const SessionExpired = () => {
         setVisible(false);
       });
     } catch (e) {
-      const user = await db.user.getUser();
+      let user = await db.user.getUser();
       if (!user) return;
-      formRef.current.setValue("email", user.email);
+      email.current = user.email;
       setFocused(false);
       setVisible(true);
       useUserStore.setState({
         disableAppLockRequests: true
       });
     }
-  }, [formRef]);
+  }, [email]);
 
   useEffect(() => {
     const sub = eSubscribeEvent(eLoginSessionExpired, open);
@@ -152,7 +155,6 @@ export const SessionExpired = () => {
         enableSheetKeyboardHandler={true}
         visible={true}
       >
-        <Dialog context="two_factor_verify" />
         <View
           style={{
             width: focused ? "100%" : "99.9%",
@@ -190,17 +192,17 @@ export const SessionExpired = () => {
               }}
             >
               {strings.sessionExpiredDesc(
-                getObfuscatedEmail(formRef.current.getValue("email") as string)
+                getObfuscatedEmail(email.current as string)
               )}
             </Paragraph>
           </View>
 
           {step === LoginSteps.passwordAuth ? (
-            <FormInput
+            <Input
               fwdRef={passwordInputRef}
-              formRef={formRef}
-              name="password"
-              validators={[validators.required(strings.passwordRequired())]}
+              onChangeText={(value) => {
+                password.current = value;
+              }}
               returnKeyLabel={strings.done()}
               returnKeyType="next"
               secureTextEntry
@@ -208,7 +210,7 @@ export const SessionExpired = () => {
               autoCapitalize="none"
               autoCorrect={false}
               placeholder={strings.password()}
-              onSubmitEditing={() => {
+              onSubmit={() => {
                 login();
               }}
             />

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

@@ -30,6 +30,7 @@ import {
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
+import { ToastManager } from "../../services/event-manager";
 import { clearMessage, setEmailVerifyMessage } from "../../services/message";
 import Navigation from "../../services/navigation";
 import { useUserStore } from "../../stores/use-user-store";
@@ -38,14 +39,13 @@ import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Loading } from "../loading";
 import { Button } from "../ui/button";
-import FormInput, { createFormRef, validators } from "../ui/input/form-input";
+import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { AuthHeader } from "./header";
 import { SignupContext } from "./signup-context";
 import { RouteParams } from "../../stores/use-navigation-store";
 import SettingsService from "../../services/settings";
-import AppIcon from "../ui/AppIcon";
 
 const SignupSteps = {
   signup: 0,
@@ -62,17 +62,13 @@ export const Signup = ({
 }) => {
   const [currentStep, setCurrentStep] = useState(SignupSteps.signup);
   const { colors } = useThemeColors();
-  const formRef = useRef(
-    createFormRef({
-      email: "",
-      password: "",
-      confirmPassword: ""
-    })
-  );
+  const email = useRef<string>(undefined);
   const emailInputRef = useRef<TextInput>(null);
   const passwordInputRef = useRef<TextInput>(null);
+  const password = useRef<string>(undefined);
   const confirmPasswordInputRef = useRef<TextInput>(null);
-  const [errorMessage, setErrorMessage] = useState<string>();
+  const confirmPassword = useRef<string>(undefined);
+  const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
   const setLastSynced = useUserStore((state) => state.setLastSynced);
@@ -80,18 +76,30 @@ export const Signup = ({
   const isTablet = width > 600;
   const route = useRoute<RouteProp<RouteParams, "Auth">>();
 
-  const signup = async () => {
-    setErrorMessage(undefined);
-    if (!formRef.current.validate()) return;
-    if (loading) return;
+  const validateInfo = () => {
+    if (!password.current || !email.current || !confirmPassword.current) {
+      ToastManager.show({
+        heading: strings.allFieldsRequired(),
+        message: strings.allFieldsRequiredDesc(),
+        type: "error",
+        context: "local"
+      });
 
-    const values = formRef.current.getValues();
+      return false;
+    }
+
+    return true;
+  };
+
+  const signup = async () => {
+    if (!validateInfo() || error) return;
+    if (loading) return;
 
     setLoading(true);
     try {
       setCurrentStep(SignupSteps.createAccount);
-      await db.user.signup(values.email.toLowerCase(), values.password);
-      const user = await db.user.getUser();
+      await db.user.signup(email.current!.toLowerCase(), password.current!);
+      let user = await db.user.getUser();
       setUser(user);
       setLastSynced(await db.lastSynced());
       clearMessage();
@@ -107,14 +115,12 @@ export const Signup = ({
     } catch (e) {
       setCurrentStep(SignupSteps.signup);
       setLoading(false);
-      if (
-        (e as Error).message === "Unable to create an account on this email."
-      ) {
-        formRef.current.setError("email", (e as Error).message);
-      } else {
-        setErrorMessage((e as Error).message);
-      }
-
+      ToastManager.show({
+        heading: strings.signupFailed(),
+        message: (e as Error).message,
+        type: "error",
+        context: "local"
+      });
       return false;
     }
   };
@@ -209,55 +215,60 @@ export const Signup = ({
                   alignSelf: "center"
                 }}
               >
-                <FormInput
-                  name="email"
-                  formRef={formRef}
+                <Input
                   fwdRef={emailInputRef}
-                  loading={loading}
+                  onChangeText={(value) => {
+                    email.current = value;
+                  }}
+                  defaultValue={email.current}
                   testID="input.email"
+                  onErrorCheck={(e) => setError(e)}
                   returnKeyLabel="Next"
                   returnKeyType="next"
                   autoComplete="email"
-                  keyboardType="email-address"
+                  validationType="email"
                   autoCorrect={false}
                   autoCapitalize="none"
+                  errorMessage={strings.emailInvalid()}
                   placeholder={strings.email()}
                   blurOnSubmit={false}
-                  validators={[
-                    validators.required(strings.emailRequired()),
-                    validators.email(strings.enterAValidEmailAddress())
-                  ]}
-                  onSubmitEditing={() => {
+                  onSubmit={() => {
+                    if (!email.current) return;
                     passwordInputRef.current?.focus();
                   }}
                 />
 
-                <FormInput
-                  name="password"
-                  formRef={formRef}
+                <Input
                   fwdRef={passwordInputRef}
-                  loading={loading}
+                  onChangeText={(value) => {
+                    password.current = value;
+                  }}
+                  defaultValue={password.current}
                   testID="input.password"
+                  onErrorCheck={(e) => setError(e)}
                   returnKeyLabel="Next"
                   returnKeyType="next"
                   secureTextEntry
                   autoComplete="password"
                   autoCapitalize="none"
                   blurOnSubmit={false}
+                  validationType="password"
                   autoCorrect={false}
                   placeholder={strings.password()}
-                  validators={[validators.required(strings.passwordRequired())]}
-                  onSubmitEditing={() => {
+                  onSubmit={() => {
+                    if (!password.current) return;
                     confirmPasswordInputRef.current?.focus();
                   }}
                 />
 
-                <FormInput
-                  name="confirmPassword"
-                  formRef={formRef}
+                <Input
                   fwdRef={confirmPasswordInputRef}
-                  loading={loading}
+                  onChangeText={(value) => {
+                    confirmPassword.current = value;
+                  }}
+                  defaultValue={confirmPassword.current}
                   testID="input.confirmPassword"
+                  onErrorCheck={(e) => setError(e)}
                   returnKeyLabel="Signup"
                   returnKeyType="done"
                   secureTextEntry
@@ -265,22 +276,17 @@ export const Signup = ({
                   autoCapitalize="none"
                   autoCorrect={false}
                   blurOnSubmit={false}
+                  validationType="confirmPassword"
+                  customValidator={() => password.current!}
                   placeholder={strings.confirmPassword()}
                   marginBottom={12}
-                  validators={[
-                    validators.required(strings.confirmPasswordRequired()),
-                    validators.matchField(
-                      "password",
-                      strings.passwordNotMatched()
-                    )
-                  ]}
-                  onSubmitEditing={() => {
+                  onSubmit={() => {
                     signup();
                   }}
                 />
 
                 <Button
-                  title={!loading ? strings.continue() : null}
+                  title={!loading ? "Continue" : null}
                   type="accent"
                   loading={loading}
                   onPress={() => {
@@ -314,25 +320,6 @@ export const Signup = ({
                     </Paragraph>
                   </Paragraph>
                 </TouchableOpacity>
-
-                {errorMessage ? (
-                  <Paragraph
-                    numberOfLines={4}
-                    onPress={() => {}}
-                    color={colors.error.accent}
-                    style={{
-                      textAlign: "center",
-                      marginTop: DefaultAppStyles.GAP_VERTICAL
-                    }}
-                  >
-                    <AppIcon
-                      color={colors.error.accent}
-                      name="alert-circle-outline"
-                      size={AppFontSize.sm - 1}
-                    />{" "}
-                    {errorMessage}
-                  </Paragraph>
-                ) : null}
               </View>
 
               <View

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

@@ -27,15 +27,14 @@ import useTimer from "../../hooks/use-timer";
 import { eSendEvent, ToastManager } from "../../services/event-manager";
 import { eCloseSimpleDialog } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
-import { presentDialog } from "../dialog/functions";
-import AppIcon from "../ui/AppIcon";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
 import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
+import { presentDialog } from "../dialog/functions";
 
 type MFAInfo = {
   primaryMethod: string;
@@ -53,8 +52,7 @@ const TwoFactorVerification = ({
       method: string;
       code: string;
     },
-    callback: (result: any) => void,
-    onerror: (e: Error) => void
+    callback: (result: any) => void
   ) => Promise<void>;
   mfaInfo: MFAInfo;
   onCancel: () => void;
@@ -68,26 +66,15 @@ const TwoFactorVerification = ({
     method: mfaInfo?.primaryMethod,
     isPrimary: true
   });
-  const { seconds, start, reset, secondsRef } = useTimer(currentMethod.method!);
+  const { seconds, start, reset } = useTimer(currentMethod.method!);
   const [loading, setLoading] = useState(false);
   const inputRef = useRef<TextInput>(null);
   const [sending, setSending] = useState(false);
-  const [error, setError] = useState<Error | undefined>(undefined);
 
   const onNext = async () => {
-    if (!code.current || code.current.length < 6) {
-      setError(
-        new Error("Please provide a valid multi-factor authentication code.")
-      );
+    if (!code.current || code.current.length < 6 || !currentMethod.method)
       return;
-    }
-
-    if (!currentMethod.method) {
-      return;
-    }
-
     setLoading(true);
-    setError(undefined);
     inputRef.current?.blur();
     await onMfaLogin(
       {
@@ -99,9 +86,6 @@ const TwoFactorVerification = ({
           eSendEvent(eCloseSimpleDialog, "two_factor_verify");
         }
         setLoading(false);
-      },
-      (e) => {
-        setError(e);
       }
     );
     setLoading(false);
@@ -147,7 +131,7 @@ const TwoFactorVerification = ({
   };
 
   const onSendCode = useCallback(async () => {
-    if (secondsRef.current || sending) return;
+    if (seconds || sending) return;
     setSending(true);
     try {
       await db.mfa.sendCode(currentMethod.method as "sms" | "email");
@@ -155,18 +139,15 @@ const TwoFactorVerification = ({
       setSending(false);
     } catch (e) {
       setSending(false);
-      setError(
-        new Error(`Error sending 2FA Code. Tap "Send code" to try again `)
-      );
+      ToastManager.error(e as Error, "Error sending 2FA Code", "local");
     }
-  }, [currentMethod.method, secondsRef, sending, start]);
+  }, [currentMethod.method, mfaInfo.token, seconds, sending, start]);
 
   useEffect(() => {
     if (currentMethod.method === "sms" || currentMethod.method === "email") {
       onSendCode();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentMethod.method]);
+  }, [currentMethod.method, onSendCode]);
 
   return (
     <ScrollView
@@ -253,7 +234,6 @@ const TwoFactorVerification = ({
               fwdRef={inputRef}
               textAlign="center"
               onChangeText={(value) => {
-                setError(undefined);
                 code.current = value;
               }}
               cursorColor={colors.selected.accent}
@@ -261,7 +241,6 @@ const TwoFactorVerification = ({
               selectionColor={colors.selected.accent}
               onSubmitEditing={onNext}
               height={60}
-              marginBottom={0}
               inputStyle={{
                 fontSize: AppFontSize.lg,
                 textAlign: "center",
@@ -275,26 +254,10 @@ const TwoFactorVerification = ({
               containerStyle={{
                 minWidth: "50%"
               }}
+              wrapperStyle={{
+                height: 60
+              }}
             />
-            {error ? (
-              <Paragraph
-                numberOfLines={4}
-                onPress={() => {}}
-                color={colors.error.accent}
-                style={{
-                  textAlign: "center",
-                  marginVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
-                  maxWidth: 250
-                }}
-              >
-                <AppIcon
-                  color={colors.error.accent}
-                  name="alert-circle-outline"
-                  size={AppFontSize.sm - 1}
-                />{" "}
-                {error?.message}
-              </Paragraph>
-            ) : null}
 
             <Button
               title={loading ? null : strings.next()}
@@ -375,8 +338,7 @@ TwoFactorVerification.present = (
       method: string;
       code: string;
     },
-    callback: (result: any) => void,
-    onerror: (e: Error) => void
+    callback: (result: any) => void
   ) => Promise<void>,
   data: MFAInfo,
   onCancel: () => void,

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

@@ -28,7 +28,6 @@ import SettingsService from "../../services/settings";
 import { useUserStore } from "../../stores/use-user-store";
 import { eCloseSimpleDialog } from "../../utils/events";
 import TwoFactorVerification from "./two-factor";
-import { createFormRef } from "../ui/input/form-input";
 
 export const LoginSteps = {
   emailAuth: 1,
@@ -40,37 +39,49 @@ export const useLogin = (
   onFinishLogin?: () => void,
   sessionExpired = false
 ) => {
-  const [error, setError] = useState<Error>();
+  const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
   const [step, setStep] = useState(LoginSteps.emailAuth);
+  const email = useRef<string>(undefined);
+  const password = useRef<string>(undefined);
   const emailInputRef = useRef<TextInput>(null);
   const passwordInputRef = useRef<TextInput>(null);
-  const formRef = useRef(
-    createFormRef({
-      email: "",
-      password: ""
-    })
-  );
+
+  const validateInfo = () => {
+    if (
+      (!password.current && step === LoginSteps.passwordAuth) ||
+      (!email.current && step === LoginSteps.emailAuth)
+    ) {
+      ToastManager.show({
+        heading: strings.allFieldsRequired(),
+        message: strings.allFieldsRequiredDesc(),
+        type: "error",
+        context: "local"
+      });
+
+      return false;
+    }
+
+    return true;
+  };
 
   const login = async () => {
+    if (!validateInfo() || error) return;
     try {
       if (loading) return;
-      setError(undefined);
       setLoading(true);
       switch (step) {
         case LoginSteps.emailAuth: {
-          if (formRef.current.validateField("email")) {
+          if (!email.current) {
             setLoading(false);
             return;
           }
-          const mfaInfo = await db.user.authenticateEmail(
-            formRef.current.getValue("email")
-          );
+          const mfaInfo = await db.user.authenticateEmail(email.current);
 
           if (mfaInfo) {
             TwoFactorVerification.present(
-              async (mfa: any, callback: (success: boolean) => void, onerror: (e: Error) => void) => {
+              async (mfa: any, callback: (success: boolean) => void) => {
                 try {
                   const success = await db.user.authenticateMultiFactorCode(
                     mfa.code,
@@ -92,9 +103,6 @@ export const useLogin = (
                     eSendEvent(eCloseSimpleDialog, "two_factor_verify");
                     setLoading(false);
                     setStep(LoginSteps.emailAuth);
-                    ToastManager.error(new Error("Token expired, try logging in again"));
-                  } else {
-                    onerror(e as Error);
                   }
                 }
               },
@@ -111,14 +119,13 @@ export const useLogin = (
           break;
         }
         case LoginSteps.passwordAuth: {
-          if (!formRef.current.validate()) {
+          if (!email.current || !password.current) {
             setLoading(false);
             return;
           }
-          const values = formRef.current.getValues();
           await db.user.authenticatePassword(
-            values.email,
-            values.password,
+            email.current,
+            password.current,
             undefined,
             sessionExpired
           );
@@ -135,11 +142,12 @@ export const useLogin = (
   const finishWithError = async (e: Error) => {
     if (e.message === "invalid_grant") setStep(LoginSteps.emailAuth);
     setLoading(false);
-    if (e.message === "Password is incorrect.") {
-      formRef.current.setError("password", e.message);
-    } else {
-      setError(e);
-    }
+    ToastManager.show({
+      heading: strings.loginFailed(),
+      message: e.message,
+      type: "error",
+      context: "local"
+    });
   };
 
   const finishLogin = async () => {
@@ -166,12 +174,13 @@ export const useLogin = (
     login,
     step,
     setStep,
+    email,
+    password,
     passwordInputRef,
     emailInputRef,
     loading,
     setLoading,
     error,
-    setError,
-    formRef
+    setError
   };
 };

apps/mobile/app/components/date-picker/index.tsx

@@ -1,25 +1,6 @@
-/*
-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 { useThemeColors } from "@notesnook/theme";
 import { useRef } from "react";
-import { useWindowDimensions, View } from "react-native";
+import { View } from "react-native";
 import { defaultBorderRadius } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import DatePicker from "react-native-date-picker";
@@ -32,10 +13,7 @@ export default function DatePickerComponent(props: {
   onCancel: () => void;
 }) {
   const { colors, isDark } = useThemeColors();
-  const dateRef = useRef<Date>(dayjs().add(1, "week").toDate());
-
-  const { width } = useWindowDimensions();
-
+  const dateRef = useRef<Date>(dayjs().add(1, "day").toDate());
   return (
     <View
       style={{
@@ -49,9 +27,6 @@ export default function DatePickerComponent(props: {
       }}
     >
       <DatePicker
-        style={{
-          width: width * 0.8 - DefaultAppStyles.GAP * 2
-        }}
         theme={isDark ? "dark" : "light"}
         mode="date"
         minimumDate={dayjs().add(1, "day").toDate()}

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

@@ -23,6 +23,7 @@ import {
   ColorValue,
   KeyboardAvoidingView,
   Modal,
+  Platform,
   SafeAreaView,
   StyleSheet,
   TouchableOpacity,
@@ -135,8 +136,8 @@ const BaseDialog = ({
             backgroundColor: background
               ? background
               : transparent
-                ? "transparent"
-                : "rgba(0,0,0,0.1)"
+              ? "transparent"
+              : "rgba(0,0,0,0.3)"
           }}
         >
           <KeyboardAvoidingView
@@ -154,8 +155,8 @@ const BaseDialog = ({
                   justifyContent: centered
                     ? "center"
                     : bottom
-                      ? "flex-end"
-                      : "flex-start"
+                    ? "flex-end"
+                    : "flex-start"
                 }
               ]}
             >

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

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
 import { getColorLinearShade } from "../../utils/colors";
@@ -79,11 +79,6 @@ const DialogButtons = ({
           />
           <Paragraph color={colors.primary.accent}>{" " + doneText}</Paragraph>
         </View>
-      ) : loading ? (
-        <ActivityIndicator
-          size={AppFontSize.lg}
-          color={colors.primary.accent}
-        />
       ) : (
         <View />
       )}
@@ -110,6 +105,7 @@ const DialogButtons = ({
             style={{
               marginLeft: 10
             }}
+            loading={loading}
             bold
             type={positiveType || "transparent"}
             title={positiveTitle}

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

@@ -22,6 +22,7 @@ import { Text, View, ViewStyle } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
 import { AppFontSize } from "../../utils/size";
 import { Button, ButtonProps } from "../ui/button";
+import { PressableProps } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { DefaultAppStyles } from "../../utils/styles";

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

@@ -17,12 +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 { KeyboardTypeOptions, TextInput } from "react-native";
+import { KeyboardTypeOptions } from "react-native";
 import { eSendEvent } from "../../services/event-manager";
 import { eCloseSimpleDialog, eOpenSimpleDialog } from "../../utils/events";
 import { ButtonProps } from "../ui/button";
-import { FieldValidator, FormRef } from "../ui/input/form-input";
-import { RefObject } from "react";
 
 export type DialogInfo = {
   title?: string;
@@ -45,18 +43,6 @@ export type DialogInfo = {
     | "errorShade";
   icon?: string;
   paragraphColor: string;
-  form?: {
-    formRef: FormRef;
-    items: {
-      name: string;
-      placeholder: string;
-      label?: string;
-      validators: FieldValidator[];
-      defaultValue?: string;
-      ref: RefObject<TextInput | null>;
-    }[];
-    onFormSubmit?: (form: FormRef) => Promise<boolean>;
-  };
   input: boolean;
   inputPlaceholder: string;
   defaultValue: string;

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

@@ -18,13 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { useThemeColors } from "@notesnook/theme";
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  RefObject
-} from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { TextInput, View, ViewStyle } from "react-native";
 import { DDS } from "../../services/device-detection";
 import {
@@ -40,7 +34,6 @@ import { sleep } from "../../utils/time";
 import { Toast } from "../toast";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
-import { FormInput, type FormRef } from "../ui/input/form-input";
 import { Notice } from "../ui/notice";
 import Seperator from "../ui/seperator";
 import BaseDialog from "./base-dialog";
@@ -60,38 +53,15 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
   });
   const inputRef = useRef<TextInput>(null);
   const [dialogInfo, setDialogInfo] = useState<DialogInfo>();
-  const formRef = useRef(dialogInfo?.form?.formRef);
-  formRef.current = dialogInfo?.form?.formRef;
 
   const onPressPositive = async () => {
-    // Handle form submission if form is available
-    if (dialogInfo?.form && formRef.current) {
-      inputRef.current?.blur();
-      try {
-        const isValid = await formRef.current.validate();
-        if (!isValid) {
-          return;
-        }
-        if (dialogInfo.form.onFormSubmit) {
-          setLoading(true);
-          const result = await dialogInfo.form.onFormSubmit(formRef.current);
-          if (result === false) {
-            setLoading(false);
-            return;
-          }
-        }
-      } catch (e) {
-        /** Empty */
-      }
-      setLoading(false);
-    } else if (dialogInfo?.positivePress) {
-      // Handle old input-based submission
+    if (dialogInfo?.positivePress) {
       inputRef.current?.blur();
       setLoading(true);
       let result = false;
       try {
         result = await dialogInfo.positivePress(
-          values.current.inputValue,
+          values.current.inputValue || dialogInfo.defaultValue,
           checked
         );
       } catch (e) {
@@ -106,7 +76,6 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
 
     setChecked(false);
     values.current.inputValue = undefined;
-    formRef.current = undefined;
     setVisible(false);
   };
 
@@ -116,7 +85,6 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
       if (data.context !== context) return;
       setDialogInfo(data);
       setChecked(data.check?.defaultValue);
-      formRef.current = data?.form?.formRef;
       values.current.inputValue = data.defaultValue;
       setVisible(true);
     },
@@ -126,7 +94,6 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
   const hide = React.useCallback(() => {
     setChecked(false);
     values.current.inputValue = undefined;
-    formRef.current = undefined;
     setVisible(false);
     setDialogInfo(undefined);
     dialogInfo?.onClose?.();
@@ -167,30 +134,19 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
           ? false
           : dialogInfo.statusBarTranslucent
       }
-      bounce={!dialogInfo.input && !dialogInfo.form}
+      bounce={!dialogInfo.input}
       closeOnTouch={!dialogInfo.disableBackdropClosing}
       background={dialogInfo.background}
       transparent={
-        dialogInfo.transparent === undefined ? false : dialogInfo.transparent
+        dialogInfo.transparent === undefined ? true : dialogInfo.transparent
       }
       onShow={async () => {
-        if (dialogInfo.input && !dialogInfo.form) {
+        if (dialogInfo.input) {
           inputRef.current?.setNativeProps({
             text: dialogInfo.defaultValue
           });
           await sleep(300);
           inputRef.current?.focus();
-        } else if (dialogInfo.form) {
-          const items = dialogInfo.form?.items;
-          const firstItem = items[0];
-          for (const item of items) {
-            if (item.defaultValue) {
-              item.ref.current?.setNativeProps({
-                text: dialogInfo.defaultValue
-              });
-            }
-          }
-          firstItem?.ref?.current?.focus();
         }
       }}
       visible={true}
@@ -214,36 +170,7 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
           />
           <Seperator half />
 
-          {dialogInfo.form ? (
-            <View
-              style={{
-                paddingHorizontal: DefaultAppStyles.GAP,
-                gap: DefaultAppStyles.GAP / 2
-              }}
-            >
-              {dialogInfo.form.items.map((item, index) => (
-                <FormInput
-                  key={item.name}
-                  fwdRef={item.ref}
-                  name={item.name}
-                  autoFocus={index === 0}
-                  placeholder={item.placeholder}
-                  formRef={formRef as RefObject<FormRef>}
-                  validators={item.validators}
-                  defaultValue={item.defaultValue}
-                  secureTextEntry={dialogInfo.secureTextEntry}
-                  onSubmitEditing={() => {
-                    const nextItem = dialogInfo?.form?.items?.[index + 1];
-                    if (nextItem) {
-                      nextItem?.ref.current?.focus();
-                    } else {
-                      onPressPositive();
-                    }
-                  }}
-                />
-              ))}
-            </View>
-          ) : dialogInfo.input ? (
+          {dialogInfo.input ? (
             <View
               style={{
                 paddingHorizontal: DefaultAppStyles.GAP
@@ -257,7 +184,7 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
                 }}
                 testID="input-value"
                 secureTextEntry={dialogInfo.secureTextEntry}
-                defaultValue={dialogInfo.defaultValue}
+                //defaultValue={dialogInfo.defaultValue}
                 onSubmit={() => {
                   onPressPositive();
                 }}
@@ -310,10 +237,7 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
 
           <DialogButtons
             onPressNegative={onNegativePress}
-            onPressPositive={
-              (dialogInfo.positivePress || dialogInfo.form?.onFormSubmit) &&
-              onPressPositive
-            }
+            onPressPositive={dialogInfo.positivePress && onPressPositive}
             loading={loading}
             positiveTitle={dialogInfo.positiveText}
             negativeTitle={dialogInfo.negativeText}

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

@@ -201,14 +201,12 @@ export const AppLockPassword = () => {
               accountPass
                 ? strings.enterAccountPassword()
                 : mode === "change"
-                  ? keyboardType === "pin"
-                    ? strings.newPin()
-                    : strings.newPassword()
-                  : `${
-                      keyboardType === "pin"
-                        ? strings.pin()
-                        : strings.password()
-                    }`
+                ? keyboardType === "pin"
+                  ? strings.newPin()
+                  : strings.newPassword()
+                : `${
+                    keyboardType === "pin" ? strings.pin() : strings.password()
+                  }`
             }
           />
 
@@ -366,9 +364,7 @@ export const AppLockPassword = () => {
                 SettingsService.getProperty("biometricsAuthEnabled") === false
               ) {
                 SettingsService.setProperty("appLockEnabled", false);
-                SettingsService.setPrivacyScreen(
-                  SettingsService.getProperty("privacyScreen")
-                );
+                SettingsService.setPrivacyScreen(SettingsService.get());
                 ToastManager.show({
                   message: strings.applockDisabled(),
                   type: "success"
@@ -387,8 +383,8 @@ export const AppLockPassword = () => {
             mode === "remove"
               ? strings.remove()
               : mode === "change"
-                ? strings.change()
-                : strings.save()
+              ? strings.change()
+              : strings.save()
           }
           negativeTitle={strings.cancel()}
           positiveType="transparent"

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

@@ -35,7 +35,6 @@ import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
 import { Notice } from "../../ui/notice";
 import Paragraph from "../../ui/typography/paragraph";
-import SettingsService from "../../../services/settings";
 
 export default function AttachImage({
   response,
@@ -202,17 +201,6 @@ AttachImage.present = (response: ImageType[], context?: string) => {
     | undefined
   >((resolve) => {
     let resolved = false;
-
-    const imageCompressionSetting =
-      SettingsService.getProperty("imageCompression");
-
-    if (imageCompressionSetting !== "ask-every-time") {
-      resolve({
-        compress: imageCompressionSetting === "enabled" ? true : false
-      });
-      return;
-    }
-
     presentSheet({
       context: context,
       component: (ref, close, update) => (

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

@@ -51,10 +51,7 @@ import DialogButtons from "../../dialog/dialog-buttons";
 import DialogHeader from "../../dialog/dialog-header";
 import { Toast } from "../../toast";
 import { Button } from "../../ui/button";
-import FormInput, {
-  createFormRef,
-  validators
-} from "../../ui/input/form-input";
+import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
@@ -66,18 +63,15 @@ import {
   VAULT_ERRORS
 } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
-import { useUserStore } from "../../../stores/use-user-store";
-import { AppFontSize } from "../../../utils/size";
-import { Pressable } from "../../ui/pressable";
-import AppIcon from "../../ui/AppIcon";
 
 export const VaultDialog: React.FC = () => {
   const { colors } = useThemeColors();
 
   // UI State
   const [visible, setVisible] = useState(false);
-  const isUserLoggedIn = useUserStore((state) => !!state.user);
   const [loading, setLoading] = useState(false);
+  const [wrongPassword, setWrongPassword] = useState(false);
+  const [passwordsDontMatch, setPasswordsDontMatch] = useState(false);
   const [deleteAll, setDeleteAll] = useState(false);
   const [biometricUnlock, setBiometricUnlock] = useState(false);
   const [isBiometryAvailable, setIsBiometryAvailable] = useState(false);
@@ -106,19 +100,70 @@ export const VaultDialog: React.FC = () => {
     | undefined
   >(undefined);
 
-  // Form ref
-  const formRef = useRef(
-    createFormRef({
-      password: "",
-      confirmPassword: "",
-      newPassword: ""
-    })
-  );
-
   // Input refs
   const passInputRef = useRef<TextInput>(null);
   const confirmPassRef = useRef<TextInput>(null);
-  const newPassInputRef = useRef<TextInput>(null);
+  const changePassInputRef = useRef<TextInput>(null);
+
+  // Password refs
+  const passwordRef = useRef<string | null>(null);
+  const confirmPasswordRef = useRef<string | null>(null);
+  const newPasswordRef = useRef<string | null>(null);
+
+  const open = useCallback(async (data: Vault) => {
+    const biometry = await BiometricService.isBiometryAvailable();
+    const available = !!biometry;
+    const fingerprint = await BiometricService.hasInternetCredentials();
+
+    if (data.item) {
+      const locked = await db.vaults.itemExists(data.item);
+      noteLockedRef.current = locked;
+      if (!locked) {
+        const content = await db.content.findByNoteId(data.item!.id);
+        if (content && isEncryptedContent(content)) {
+          noteLockedRef.current = true;
+        }
+      }
+    }
+
+    // Set refs
+    noteRef.current = data.item;
+    titleRef.current = data.title || strings.goToEditor();
+    descriptionRef.current = data.description || null;
+    paragraphRef.current = data.paragraph || null;
+    buttonTitleRef.current = data.buttonTitle || null;
+    positiveButtonTypeRef.current = data.positiveButtonType || "transparent";
+    customActionTitleRef.current = data.customActionTitle || null;
+    customActionParagraphRef.current = data.customActionParagraph || null;
+    onUnlockRef.current = data.onUnlock;
+    requestTypeRef.current = data.requestType;
+
+    // Set UI state
+    setIsBiometryAvailable(available);
+    setIsBiometryEnrolled(fingerprint);
+    setBiometricUnlock(fingerprint);
+    setWrongPassword(false);
+    setPasswordsDontMatch(false);
+    setDeleteAll(false);
+    setLoading(false);
+
+    // Auto-unlock with fingerprint if applicable
+    const canAutoUnlock =
+      fingerprint &&
+      data.requestType !== VaultRequestType.EnableFingerprint &&
+      data.requestType !== VaultRequestType.RevokeFingerprint &&
+      data.requestType !== VaultRequestType.ChangePassword &&
+      data.requestType !== VaultRequestType.ClearVault &&
+      data.requestType !== VaultRequestType.DeleteVault &&
+      data.requestType !== VaultRequestType.CustomAction &&
+      data.requestType !== VaultRequestType.PermanentUnlock;
+
+    if (canAutoUnlock) {
+      await onPressFingerprintAuth(data.title, data.description);
+    } else {
+      setVisible(true);
+    }
+  }, []);
 
   const close = useCallback(() => {
     if (loading) {
@@ -133,11 +178,10 @@ export const VaultDialog: React.FC = () => {
 
     Navigation.queueRoutesForUpdate();
 
-    // Reset form values and errors
-    formRef.current.setValue("password", "");
-    formRef.current.setValue("confirmPassword", "");
-    formRef.current.setValue("newPassword", "");
-    formRef.current.clearErrors();
+    // Reset password refs
+    passwordRef.current = null;
+    confirmPasswordRef.current = null;
+    newPasswordRef.current = null;
 
     // Reset refs
     requestTypeRef.current = null;
@@ -155,6 +199,8 @@ export const VaultDialog: React.FC = () => {
     // Reset UI state
     setVisible(false);
     setLoading(false);
+    setWrongPassword(false);
+    setPasswordsDontMatch(false);
     setDeleteAll(false);
     setBiometricUnlock(false);
     setIsBiometryAvailable(false);
@@ -164,10 +210,9 @@ export const VaultDialog: React.FC = () => {
   const deleteVault = useCallback(async () => {
     setLoading(true);
     try {
-      const { password } = formRef.current.getValues();
       let verified = true;
       if (await db.user.getUser()) {
-        verified = await db.user.verifyPassword(password);
+        verified = await db.user.verifyPassword(passwordRef.current || "");
       }
       if (verified) {
         let noteIds: string[] = [];
@@ -185,7 +230,6 @@ export const VaultDialog: React.FC = () => {
           noteIds = relations.map((item) => item.toId);
         }
         await db.vault.delete(deleteAll);
-        await BiometricService.resetCredentials();
 
         if (deleteAll) {
           noteIds.forEach((id) => {
@@ -201,15 +245,15 @@ export const VaultDialog: React.FC = () => {
         }
         eSendEvent("vaultUpdated");
         setLoading(false);
-        close();
-        ToastManager.show({
-          message: strings.vaultDeleted(),
-          type: "success",
-          context: "global"
-        });
+        setTimeout(() => {
+          close();
+        }, 100);
       } else {
-        setLoading(false);
-        formRef.current.setError("password", strings.passwordIncorrect());
+        ToastManager.show({
+          heading: strings.passwordIncorrect(),
+          type: "error",
+          context: "local"
+        });
       }
     } catch (e) {
       console.error(e);
@@ -219,12 +263,11 @@ export const VaultDialog: React.FC = () => {
   const clearVault = useCallback(async () => {
     setLoading(true);
     try {
-      const { password } = formRef.current.getValues();
       const vault = await db.vaults.default();
       const relations = await db.relations.from(vault!, "note").get();
       const noteIds = relations.map((item) => item.toId);
 
-      await db.vault.clear(password);
+      await db.vault.clear(passwordRef.current || "");
 
       noteIds.forEach((id) => {
         eSendEvent(
@@ -239,47 +282,23 @@ export const VaultDialog: React.FC = () => {
       setLoading(false);
       close();
       eSendEvent("vaultUpdated");
-      ToastManager.show({
-        message: strings.vaultCleared(),
-        type: "success"
-      });
     } catch (e) {
-      formRef.current.setError("password", strings.passwordIncorrect());
+      ToastManager.show({
+        heading: strings.passwordIncorrect(),
+        type: "error",
+        context: "local"
+      });
     }
     setLoading(false);
   }, [close]);
 
-  const enrollFingerprint = useCallback(
-    async (password: string) => {
-      setLoading(true);
-      try {
-        await db.vault.unlock(password);
-        await BiometricService.storeCredentials(password);
-        setLoading(false);
-        eSendEvent("vaultUpdated");
-        ToastManager.show({
-          heading: strings.biometricUnlockEnabled(),
-          type: "success",
-          context: "global"
-        });
-        close();
-      } catch (e) {
-        formRef.current.setError("password", strings.passwordIncorrect());
-        setLoading(false);
-      }
-    },
-    [close]
-  );
-
-  const takeErrorAction = useCallback(() => {
-    formRef.current.setError("password", strings.passwordIncorrect());
-    setVisible(true);
-  }, []);
-
   const lockNote = useCallback(async () => {
-    const { password } = formRef.current.getValues();
-    if (!password || password.trim() === "") {
-      formRef.current.setError("password", strings.passwordIncorrect());
+    if (!passwordRef.current || passwordRef.current.trim() === "") {
+      ToastManager.show({
+        heading: strings.passwordIncorrect(),
+        type: "error",
+        context: "local"
+      });
       return;
     } else {
       await db.vault.add(noteRef.current!.id);
@@ -297,9 +316,8 @@ export const VaultDialog: React.FC = () => {
   }, [close]);
 
   const permanantUnlock = useCallback(() => {
-    const { password } = formRef.current.getValues();
     db.vault
-      .remove(noteRef.current!.id, password)
+      .remove(noteRef.current!.id, passwordRef.current || "")
       .then(async () => {
         ToastManager.show({
           heading: strings.noteUnlocked(),
@@ -308,20 +326,14 @@ export const VaultDialog: React.FC = () => {
         });
         eSendEvent(eUpdateNoteInEditor, noteRef.current, true);
         if (biometricUnlock && !isBiometryEnrolled) {
-          await enrollFingerprint(password);
+          await enrollFingerprint(passwordRef.current || "");
         }
         close();
       })
       .catch((e) => {
         takeErrorAction();
       });
-  }, [
-    biometricUnlock,
-    isBiometryEnrolled,
-    close,
-    enrollFingerprint,
-    takeErrorAction
-  ]);
+  }, [close, biometricUnlock, isBiometryEnrolled]);
 
   const openInEditor = useCallback(
     (note: Note & { content?: NoteContent<false> }) => {
@@ -368,25 +380,38 @@ export const VaultDialog: React.FC = () => {
   );
 
   const deleteNote = useCallback(async () => {
-    const { password } = formRef.current.getValues();
     try {
-      await db.vault.remove(noteRef.current!.id, password);
+      await db.vault.remove(noteRef.current!.id, passwordRef.current || "");
       await deleteItems("note", [noteRef.current!.id]);
       close();
     } catch (e) {
       takeErrorAction();
     }
-  }, [close, takeErrorAction]);
+  }, [close]);
+
+  const takeErrorAction = useCallback(() => {
+    setWrongPassword(true);
+    setVisible(true);
+    setTimeout(() => {
+      ToastManager.show({
+        heading: strings.passwordIncorrect(),
+        type: "error",
+        context: "local"
+      });
+    }, 500);
+  }, []);
 
   const openNote = useCallback(async () => {
-    const { password } = formRef.current.getValues();
     try {
-      if (!password) throw new Error("Invalid password");
+      if (!passwordRef.current) throw new Error("Invalid password");
 
-      const note = await db.vault.open(noteRef.current!.id, password);
+      const note = await db.vault.open(
+        noteRef.current!.id,
+        passwordRef.current
+      );
       if (!note) throw new Error("Failed to unlock note.");
       if (biometricUnlock && !isBiometryEnrolled) {
-        await enrollFingerprint(password);
+        await enrollFingerprint(passwordRef.current || "");
       }
 
       const requestType = requestTypeRef.current;
@@ -403,6 +428,7 @@ export const VaultDialog: React.FC = () => {
         requestType === VaultRequestType.CustomAction &&
         onUnlockRef.current
       ) {
+        const password = passwordRef.current;
         const unlock = onUnlockRef.current;
         close();
         await sleep(500);
@@ -414,7 +440,6 @@ export const VaultDialog: React.FC = () => {
   }, [
     biometricUnlock,
     isBiometryEnrolled,
-    enrollFingerprint,
     openInEditor,
     shareNote,
     deleteNote,
@@ -424,9 +449,12 @@ export const VaultDialog: React.FC = () => {
   ]);
 
   const unlockNote = useCallback(async () => {
-    const { password } = formRef.current.getValues();
-    if (!password || password.trim() === "") {
-      formRef.current.setError("password", strings.passwordIncorrect());
+    if (!passwordRef.current || passwordRef.current.trim() === "") {
+      ToastManager.show({
+        heading: strings.passwordIncorrect(),
+        type: "error",
+        context: "local"
+      });
       return;
     }
     if (requestTypeRef.current === VaultRequestType.PermanentUnlock) {
@@ -436,12 +464,38 @@ export const VaultDialog: React.FC = () => {
     }
   }, [permanantUnlock, openNote]);
 
+  const enrollFingerprint = useCallback(
+    async (password: string) => {
+      setLoading(true);
+      try {
+        await db.vault.unlock(password);
+        await BiometricService.storeCredentials(password);
+        setLoading(false);
+        eSendEvent("vaultUpdated");
+        ToastManager.show({
+          heading: strings.biometricUnlockEnabled(),
+          type: "success",
+          context: "global"
+        });
+        close();
+      } catch (e) {
+        close();
+        ToastManager.show({
+          heading: strings.passwordIncorrect(),
+          type: "error",
+          context: "local"
+        });
+        setLoading(false);
+      }
+    },
+    [close]
+  );
+
   const createVault = useCallback(async () => {
-    const { password } = formRef.current.getValues();
-    await db.vault.create(password);
+    await db.vault.create(passwordRef.current || "");
 
     if (biometricUnlock) {
-      await enrollFingerprint(password);
+      await enrollFingerprint(passwordRef.current || "");
     }
     if (noteRef.current?.id) {
       await db.vault.add(noteRef.current.id);
@@ -482,6 +536,31 @@ export const VaultDialog: React.FC = () => {
     }
   }, []);
 
+  const onPressFingerprintAuth = useCallback(
+    async (title?: string, description?: string) => {
+      try {
+        const credentials = await BiometricService.getCredentials(
+          title || titleRef.current,
+          description || descriptionRef.current || ""
+        );
+
+        if (!credentials) throw new Error("Failed to get user credentials");
+
+        if (credentials?.password) {
+          passwordRef.current = credentials.password;
+          onPress();
+        } else {
+          eSendEvent(eCloseActionSheet);
+          await sleep(300);
+          setVisible(true);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    []
+  );
+
   const onPress = useCallback(async () => {
     const requestType = requestTypeRef.current;
 
@@ -493,30 +572,36 @@ export const VaultDialog: React.FC = () => {
 
     if (loading) return;
 
-    if (!formRef.current.validate()) return;
-
-    const { password, newPassword } = formRef.current.getValues();
-
-    if (requestType === VaultRequestType.DeleteVault && !isUserLoggedIn) {
-      setLoading(true);
-      await deleteVault();
-      setLoading(false);
+    if (!passwordRef.current) {
+      ToastManager.show({
+        heading: strings.passwordNotEntered(),
+        type: "error",
+        context: "local"
+      });
       return;
     }
 
     if (requestType === VaultRequestType.CreateVault) {
+      if (passwordRef.current !== confirmPasswordRef.current) {
+        ToastManager.show({
+          heading: strings.passwordNotMatched(),
+          type: "error",
+          context: "local"
+        });
+        setPasswordsDontMatch(true);
+        return;
+      }
+
       createVault();
     } else if (requestType === VaultRequestType.ChangePassword) {
       setLoading(true);
 
       db.vault
-        .changePassword(password, newPassword)
-        .then(async () => {
+        .changePassword(passwordRef.current, newPasswordRef.current || "")
+        .then(() => {
           setLoading(false);
           if (biometricUnlock) {
-            enrollFingerprint(newPassword);
-          } else {
-            await BiometricService.resetCredentials();
+            enrollFingerprint(newPasswordRef.current || "");
           }
           ToastManager.show({
             heading: strings.passwordUpdated(),
@@ -528,23 +613,37 @@ export const VaultDialog: React.FC = () => {
         .catch((e) => {
           setLoading(false);
           if (e.message === VAULT_ERRORS.wrongPassword) {
-            formRef.current.setError("password", strings.passwordIncorrect());
+            ToastManager.show({
+              heading: strings.passwordIncorrect(),
+              type: "error",
+              context: "local"
+            });
           } else {
-            console.error(e);
+            ToastManager.error(e);
           }
         });
     } else if (requestType === VaultRequestType.LockNote) {
+      if (!passwordRef.current || passwordRef.current.trim() === "") {
+        ToastManager.show({
+          heading: strings.passwordIncorrect(),
+          type: "error",
+          context: "local"
+        });
+        setWrongPassword(true);
+        return;
+      }
       db.vault
-        .unlock(password)
+        .unlock(passwordRef.current)
         .then(async (unlocked) => {
           if (unlocked) {
+            setWrongPassword(false);
             await lockNote();
           } else {
-            formRef.current.setError("password", strings.passwordIncorrect());
+            takeErrorAction();
           }
         })
         .catch((e) => {
-          formRef.current.setError("password", strings.passwordIncorrect());
+          takeErrorAction();
         });
     } else if (
       requestType === VaultRequestType.UnlockNote ||
@@ -555,13 +654,22 @@ export const VaultDialog: React.FC = () => {
       requestType === VaultRequestType.DeleteNote ||
       requestType === VaultRequestType.CustomAction
     ) {
+      if (!passwordRef.current || passwordRef.current.trim() === "") {
+        ToastManager.show({
+          heading: strings.passwordIncorrect(),
+          type: "error",
+          context: "local"
+        });
+        setWrongPassword(true);
+        return;
+      }
       if (noteLockedRef.current) {
         await unlockNote();
       } else {
         console.log("Error: Note should be locked for this operation");
       }
     } else if (requestType === VaultRequestType.EnableFingerprint) {
-      enrollFingerprint(password);
+      enrollFingerprint(passwordRef.current);
     } else if (requestType === VaultRequestType.ClearVault) {
       await clearVault();
     } else if (requestType === VaultRequestType.DeleteVault) {
@@ -576,97 +684,11 @@ export const VaultDialog: React.FC = () => {
     enrollFingerprint,
     unlockNote,
     lockNote,
+    takeErrorAction,
     clearVault,
     deleteVault
   ]);
 
-  const onPressFingerprintAuth = useCallback(
-    async (title?: string, description?: string) => {
-      try {
-        const credentials = await BiometricService.getCredentials(
-          title || titleRef.current,
-          description || descriptionRef.current || ""
-        );
-
-        if (!credentials) throw new Error("Failed to get user credentials");
-
-        if (credentials?.password) {
-          formRef.current.setValue("password", credentials.password);
-          onPress();
-        } else {
-          eSendEvent(eCloseActionSheet);
-          await sleep(300);
-          setVisible(true);
-        }
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    [onPress]
-  );
-
-  const open = useCallback(
-    async (data: Vault) => {
-      const biometry = await BiometricService.isBiometryAvailable();
-      const available = !!biometry;
-      const fingerprint = await BiometricService.hasInternetCredentials();
-
-      if (data.item) {
-        const locked = await db.vaults.itemExists(data.item);
-        noteLockedRef.current = locked;
-        if (!locked) {
-          const content = await db.content.findByNoteId(data.item!.id);
-          if (content && isEncryptedContent(content)) {
-            noteLockedRef.current = true;
-          }
-        }
-      }
-
-      // Set refs
-      noteRef.current = data.item;
-      titleRef.current = data.title || strings.goToEditor();
-      descriptionRef.current = data.description || null;
-      paragraphRef.current = data.paragraph || null;
-      buttonTitleRef.current = data.buttonTitle || null;
-      positiveButtonTypeRef.current = data.positiveButtonType || "transparent";
-      customActionTitleRef.current = data.customActionTitle || null;
-      customActionParagraphRef.current = data.customActionParagraph || null;
-      onUnlockRef.current = data.onUnlock;
-      requestTypeRef.current = data.requestType;
-
-      // Set UI state
-      setIsBiometryAvailable(available);
-      setIsBiometryEnrolled(fingerprint);
-      setBiometricUnlock(fingerprint);
-      setDeleteAll(false);
-      setLoading(false);
-
-      // Auto-unlock with fingerprint if applicable
-      const canAutoUnlock =
-        fingerprint &&
-        available &&
-        data.requestType !== VaultRequestType.EnableFingerprint &&
-        data.requestType !== VaultRequestType.RevokeFingerprint &&
-        data.requestType !== VaultRequestType.ChangePassword &&
-        data.requestType !== VaultRequestType.ClearVault &&
-        data.requestType !== VaultRequestType.DeleteVault &&
-        data.requestType !== VaultRequestType.CustomAction &&
-        data.requestType !== VaultRequestType.PermanentUnlock &&
-        data.requestType !== VaultRequestType.CreateVault;
-
-      if (canAutoUnlock && available) {
-        try {
-          await onPressFingerprintAuth(data.title, data.description);
-        } catch (e) {
-          setVisible(true);
-        }
-      } else {
-        setVisible(true);
-      }
-    },
-    [onPressFingerprintAuth]
-  );
-
   useEffect(() => {
     eSubscribeEvent(eOpenVaultDialog, open);
     eSubscribeEvent(eCloseVaultDialog, close);
@@ -709,8 +731,7 @@ export const VaultDialog: React.FC = () => {
           width: DDS.isTab ? 350 : "85%",
           borderRadius: 10,
           backgroundColor: colors.primary.background,
-          paddingTop: 12,
-          overflow: "hidden"
+          paddingTop: 12
         }}
       >
         <DialogHeader
@@ -721,6 +742,7 @@ export const VaultDialog: React.FC = () => {
           icon="shield"
           padding={12}
         />
+        <Seperator half />
 
         <View
           style={{
@@ -729,25 +751,19 @@ export const VaultDialog: React.FC = () => {
         >
           {(isChangePassword ||
             isClearVault ||
-            requestType === VaultRequestType.LockNote ||
-            requestType === VaultRequestType.UnlockNote ||
-            requestType === VaultRequestType.PermanentUnlock ||
-            isGoToEditor ||
-            isShareNote ||
-            isDeleteNote ||
-            isEnableFingerprint ||
-            (isDeleteVault && isUserLoggedIn) ||
+            !isCreateVault ||
+            isDeleteVault ||
             isCustomAction) &&
           !isRevokeFingerprint ? (
             <>
-              <FormInput
-                name="password"
-                formRef={formRef}
+              <Input
                 fwdRef={passInputRef}
                 editable={!loading}
                 autoCapitalize="none"
                 testID={notesnook.ids.dialogs.vault.pwd}
-                autoComplete="password"
+                onChangeText={(value) => {
+                  passwordRef.current = value;
+                }}
                 marginBottom={
                   !biometricUnlock ||
                   !isBiometryEnrolled ||
@@ -757,13 +773,14 @@ export const VaultDialog: React.FC = () => {
                     ? 0
                     : 10
                 }
-                onSubmitEditing={() => {
+                onSubmit={() => {
                   if (isChangePassword) {
-                    newPassInputRef.current?.focus();
+                    confirmPassRef.current?.focus();
                   } else {
                     onPress();
                   }
                 }}
+                autoComplete="password"
                 returnKeyLabel={
                   isChangePassword ? strings.next() : titleRef.current
                 }
@@ -774,7 +791,6 @@ export const VaultDialog: React.FC = () => {
                     ? strings.currentPassword()
                     : strings.password()
                 }
-                validators={[validators.required(strings.passwordRequired())]}
               />
 
               {!biometricUnlock ||
@@ -782,8 +798,7 @@ export const VaultDialog: React.FC = () => {
               !isBiometryAvailable ||
               isCreateVault ||
               isChangePassword ||
-              isCustomAction ||
-              isDeleteVault ? null : (
+              isCustomAction ? null : (
                 <Button
                   onPress={() =>
                     onPressFingerprintAuth(strings.unlockNote(), "")
@@ -798,98 +813,89 @@ export const VaultDialog: React.FC = () => {
           ) : null}
 
           {isDeleteVault && (
-            <Pressable
+            <Button
               onPress={() => setDeleteAll(!deleteAll)}
+              icon={
+                deleteAll
+                  ? "check-circle-outline"
+                  : "checkbox-blank-circle-outline"
+              }
               style={{
-                paddingVertical: 0,
-                flexDirection: "row",
-                gap: DefaultAppStyles.GAP_SMALL,
-                marginTop: isUserLoggedIn
-                  ? DefaultAppStyles.GAP_VERTICAL_SMALL
-                  : 0,
-                justifyContent: "flex-start"
+                marginTop: DefaultAppStyles.GAP_VERTICAL
               }}
-            >
-              <AppIcon
-                name={
-                  deleteAll
-                    ? "check-circle-outline"
-                    : "checkbox-blank-circle-outline"
-                }
-                color={colors.error.accent}
-                size={AppFontSize.md}
-              />
-
-              <Paragraph color={colors.error.accent} size={AppFontSize.sm}>
-                {strings.deleteAllNotes()}
-              </Paragraph>
-            </Pressable>
+              width="100%"
+              title={strings.deleteAllNotes()}
+              type="errorShade"
+            />
           )}
 
           {isChangePassword ? (
             <>
               <Seperator half />
-              <FormInput
-                name="newPassword"
-                formRef={formRef}
-                fwdRef={newPassInputRef}
+              <Input
+                fwdRef={confirmPassRef}
                 editable={!loading}
                 testID={notesnook.ids.dialogs.vault.changePwd}
                 autoCapitalize="none"
+                onChangeText={(value) => {
+                  newPasswordRef.current = value;
+                }}
                 autoComplete="password"
-                onSubmitEditing={() => {
+                onSubmit={() => {
                   onPress();
                 }}
                 returnKeyLabel="Change"
                 returnKeyType="done"
                 secureTextEntry
                 placeholder={strings.newPassword()}
-                validators={[validators.required(strings.passwordRequired())]}
               />
             </>
           ) : null}
 
           {isCreateVault ? (
             <View>
-              <FormInput
-                name="password"
-                formRef={formRef}
+              <Input
                 fwdRef={passInputRef}
                 autoCapitalize="none"
                 testID={notesnook.ids.dialogs.vault.pwd}
+                onChangeText={(value) => {
+                  passwordRef.current = value;
+                }}
                 autoComplete="password"
                 returnKeyLabel={strings.next()}
                 returnKeyType="next"
                 secureTextEntry
-                onSubmitEditing={() => {
+                onSubmit={() => {
                   confirmPassRef.current?.focus();
                 }}
                 placeholder={strings.password()}
-                validators={[validators.required(strings.passwordRequired())]}
               />
 
-              <FormInput
-                name="confirmPassword"
-                formRef={formRef}
+              <Input
                 fwdRef={confirmPassRef}
                 autoCapitalize="none"
                 testID={notesnook.ids.dialogs.vault.pwdAlt}
                 secureTextEntry
+                validationType="confirmPassword"
+                customValidator={() => passwordRef.current || ""}
+                errorMessage="Passwords do not match."
+                onErrorCheck={() => null}
+                marginBottom={0}
                 autoComplete="password"
                 returnKeyLabel="Create"
                 returnKeyType="done"
-                marginBottom={0}
-                onSubmitEditing={() => {
+                onChangeText={(value) => {
+                  confirmPasswordRef.current = value;
+                  if (value !== passwordRef.current) {
+                    setPasswordsDontMatch(true);
+                  } else {
+                    setPasswordsDontMatch(false);
+                  }
+                }}
+                onSubmit={() => {
                   onPress();
                 }}
                 placeholder={strings.confirmPassword()}
-                validators={[
-                  validators.required(strings.confirmPasswordRequired()),
-                  validators.matchField(
-                    "password",
-                    strings.passwordNotMatched()
-                  )
-                ]}
               />
             </View>
           ) : null}

apps/mobile/app/components/fluid-panels/index.tsx

@@ -22,6 +22,7 @@ import React, {
   RefObject,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState
 } from "react";
@@ -38,6 +39,7 @@ import Animated, {
   WithSpringConfig,
   withTiming
 } from "react-native-reanimated";
+import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
 import { eSendEvent } from "../../services/event-manager";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { eClearEditor } from "../../utils/events";

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

@@ -17,13 +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 {
-  GroupHeader,
-  GroupingByIdKey,
-  GroupingKey,
-  GroupOptions,
-  ItemType
-} from "@notesnook/core";
+import { GroupHeader, GroupOptions, ItemType } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
@@ -46,11 +40,7 @@ type SectionHeaderProps = {
   color?: string;
   screen?: RouteName;
   groupOptions: GroupOptions;
-  group: GroupingKey;
-  groupId?: string;
-  type?: GroupingByIdKey;
   onOpenJumpToDialog: () => void;
-  itemCount?: number;
 };
 
 export const SectionHeader = React.memo<
@@ -63,15 +53,11 @@ export const SectionHeader = React.memo<
     color,
     screen,
     groupOptions,
-    group,
-    onOpenJumpToDialog,
-    itemCount,
-    groupId,
-    type
+    onOpenJumpToDialog
   }: SectionHeaderProps) {
     const { colors } = useThemeColors();
     const isCompactModeEnabled = useIsCompactModeEnabled(
-      dataType as "note" | "notebook" | "searchResult"
+      dataType as "note" | "notebook"
     );
 
     return (
@@ -118,9 +104,7 @@ export const SectionHeader = React.memo<
               color={color || colors.primary.accent}
             >
               {!item.title || item.title === ""
-                ? screen === "Search"
-                  ? strings.results(itemCount || 0)
-                  : strings.pinned().toUpperCase()
+                ? strings.pinned().toUpperCase()
                 : item.title.toUpperCase()}
             </Heading>
           </Pressable>
@@ -148,10 +132,7 @@ export const SectionHeader = React.memo<
                       component: (
                         <Sort
                           screen={screen}
-                          dataType={dataType}
-                          type={type}
-                          group={group}
-                          groupId={groupId}
+                          type={dataType}
                           hideGroupOptions={
                             screen === "Reminders" || screen === "Search"
                           }
@@ -169,8 +150,7 @@ export const SectionHeader = React.memo<
                   hidden={
                     dataType !== "note" &&
                     dataType !== "notebook" &&
-                    screen !== "Notes" &&
-                    screen !== "Search"
+                    screen !== "Notes"
                   }
                   style={{
                     width: 25,
@@ -183,11 +163,9 @@ export const SectionHeader = React.memo<
                   }
                   onPress={() => {
                     SettingsService.set({
-                      [dataType === "notebook"
-                        ? "notebooksListMode"
-                        : dataType === "searchResult"
-                          ? "searchListMode"
-                          : "notesListMode"]: !isCompactModeEnabled
+                      [dataType !== "notebook"
+                        ? "notesListMode"
+                        : "notebooksListMode"]: !isCompactModeEnabled
                         ? "compact"
                         : "normal"
                     });
@@ -213,7 +191,6 @@ export const SectionHeader = React.memo<
   },
   (prev, next) => {
     if (prev.item.title !== next.item.title) return false;
-    if (prev.itemCount !== next.itemCount) return false;
     if (prev.groupOptions?.groupBy !== next.groupOptions.groupBy) return false;
     if (prev.groupOptions?.sortDirection !== next.groupOptions.sortDirection)
       return false;

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

@@ -55,7 +55,6 @@ import { TimeSince } from "../../ui/time-since";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import dayjs from "dayjs";
-import { ExpiryDate } from "../../ui/expiry-date";
 
 type NoteItemProps = {
   item: Note | BaseTrashItem<Note>;
@@ -267,21 +266,6 @@ const NoteItem = ({
                   />
                 ) : null}
 
-                {item.expiryDate?.value ? (
-                  <ExpiryDate
-                    note={item as Note}
-                    color={color?.colorCode}
-                    textStyle={{ fontSize: AppFontSize.xxs }}
-                    short
-                    iconSize={AppFontSize.xxs}
-                    style={{
-                      justifyContent: "flex-start",
-                      paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2,
-                      alignSelf: "flex-start"
-                    }}
-                  />
-                ) : null}
-
                 {notebooks?.items
                   ?.filter(
                     (item) =>

apps/mobile/app/components/list-items/search-result/index.tsx

@@ -31,7 +31,6 @@ import { eSendEvent } from "../../../services/event-manager";
 import { eOnLoadNote } from "../../../utils/events";
 import { IconButton } from "../../ui/icon-button";
 import { fluidTabsRef } from "../../../utils/global-refs";
-import { useSettingStore } from "../../../stores/use-setting-store";
 type SearchResultProps = {
   item: HighlightedResult;
 };
@@ -39,9 +38,6 @@ type SearchResultProps = {
 export const SearchResult = (props: SearchResultProps) => {
   const [expanded, setExpanded] = React.useState(true);
   const { colors } = useThemeColors();
-  const compactMode = useSettingStore(
-    (state) => state.settings.searchListMode === "compact"
-  );
 
   const openNote = async (index?: number) => {
     const note = await db.notes.note(props.item.id);
@@ -91,7 +87,7 @@ export const SearchResult = (props: SearchResultProps) => {
             flexShrink: 1
           }}
         >
-          {props.item.content?.length && !compactMode ? (
+          {props.item.content?.length ? (
             <IconButton
               name={!expanded ? "chevron-right" : "chevron-down"}
               onPress={() => setExpanded((prev) => !prev)}
@@ -134,7 +130,6 @@ export const SearchResult = (props: SearchResultProps) => {
       </View>
 
       {expanded &&
-        !compactMode &&
         props.item.content.map((content, index) => (
           <Pressable
             key={props.item.id + index}

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

@@ -17,12 +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 {
-  GroupingByIdKey,
-  GroupingKey,
-  Item,
-  VirtualizedGrouping
-} from "@notesnook/core";
+import { GroupingKey, Item, VirtualizedGrouping } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import { LegendList, LegendListRenderItemProps } from "@legendapp/list";
 import React, { useEffect, useRef } from "react";
@@ -58,9 +53,7 @@ type ListProps = {
   isRenderedInActionSheet?: boolean;
   CustomListComponent?: React.JSX.ElementType;
   placeholder?: PlaceholderData;
-  groupType: GroupingKey;
   id?: string;
-  type?: GroupingByIdKey;
 };
 
 const onMomentumScrollEnd = () => {
@@ -80,7 +73,16 @@ export default function List(props: ListProps) {
     props.dataType === "notebook" ||
     notebooksListMode === "compact";
 
-  const groupOptions = useGroupOptions(props.groupType, props.id, props.type);
+  const groupType =
+    props.renderedInRoute === "Notes"
+      ? "home"
+      : props.renderedInRoute === "Favorites"
+      ? "favorites"
+      : props.renderedInRoute === "Trash" || props.dataType === "trash"
+      ? "trash"
+      : `${props.dataType}s`;
+
+  const groupOptions = useGroupOptions(groupType);
 
   const _onRefresh = async () => {
     Sync.run("global", false, "full", () => {
@@ -92,7 +94,7 @@ export default function List(props: ListProps) {
     (item: number | boolean, index: number) => {
       return props.data?.type(index);
     },
-    [props.data]
+    []
   );
 
   const renderItem = React.useCallback(
@@ -102,27 +104,23 @@ export default function List(props: ListProps) {
           index={itemProps.index}
           isSheet={props.isRenderedInActionSheet || false}
           items={props.data}
-          groupId={props.id}
           groupOptions={groupOptions}
-          group={props.groupType as GroupingKey}
+          group={groupType as GroupingKey}
           renderedInRoute={props.renderedInRoute}
           customAccentColor={props.customAccentColor}
           dataType={props.dataType}
-          type={props.type}
           scrollRef={scrollRef}
         />
       );
     },
     [
-      props.isRenderedInActionSheet,
-      props.data,
-      props.id,
-      props.groupType,
-      props.renderedInRoute,
-      props.customAccentColor,
-      props.dataType,
       groupOptions,
-      props.type
+      groupType,
+      props.customAccentColor,
+      props.data,
+      props.dataType,
+      props.isRenderedInActionSheet,
+      props.renderedInRoute
     ]
   );
 

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

@@ -26,7 +26,6 @@ import {
   Color,
   GroupHeader,
   GroupOptions,
-  GroupingByIdKey,
   GroupingKey,
   HighlightedResult,
   Item,
@@ -41,7 +40,7 @@ import {
 } from "@notesnook/core";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { View } from "react-native";
-import { getGroupOptions } from "../../hooks/use-group-options";
+import { db } from "../../common/database";
 import { useIsCompactModeEnabled } from "../../hooks/use-is-compact-mode-enabled";
 import { eSendEvent } from "../../services/event-manager";
 import { RouteName } from "../../stores/use-navigation-store";
@@ -50,11 +49,11 @@ 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 { SearchResult } from "../list-items/search-result";
 import TagItem from "../list-items/tag";
+import { SearchResult } from "../list-items/search-result";
 
 type ListItemWrapperProps<TItem = Item> = {
-  group: GroupingKey;
+  group?: GroupingKey;
   items: VirtualizedGrouping<TItem> | undefined;
   isSheet: boolean;
   index: number;
@@ -63,8 +62,6 @@ type ListItemWrapperProps<TItem = Item> = {
   dataType: string;
   scrollRef: any;
   groupOptions: GroupOptions;
-  groupId?: string;
-  type?: GroupingByIdKey;
 };
 
 export function ListItemWrapper(props: ListItemWrapperProps) {
@@ -185,9 +182,6 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
               item={groupHeader}
               index={index}
               dataType={item.type}
-              group={group}
-              groupId={props.groupId}
-              type={props.type}
               color={props.customAccentColor}
               groupOptions={groupOptions}
               onOpenJumpToDialog={() => {
@@ -224,9 +218,6 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
               item={groupHeader}
               index={index}
               dataType={item.type}
-              group={group}
-              groupId={props.groupId}
-              type={props.type}
               color={props.customAccentColor}
               groupOptions={groupOptions}
               onOpenJumpToDialog={() => {
@@ -254,11 +245,8 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
               screen={props.renderedInRoute}
               item={groupHeader}
               index={index}
-              group={group}
               dataType={item.type}
               color={props.customAccentColor}
-              type={props.type}
-              groupId={props.groupId}
               groupOptions={groupOptions}
               onOpenJumpToDialog={() => {
                 eSendEvent(eOpenJumpToDialog, {
@@ -283,10 +271,7 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
               screen={props.renderedInRoute}
               item={groupHeader}
               index={index}
-              group={group}
               dataType={item.type}
-              groupId={props.groupId}
-              type={props.type}
               color={props.customAccentColor}
               groupOptions={groupOptions}
               onOpenJumpToDialog={() => {
@@ -312,13 +297,9 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
               screen={props.renderedInRoute}
               item={groupHeader}
               index={index}
-              group={group}
               dataType={item.type}
-              groupId={props.groupId}
-              type={props.type}
               color={props.customAccentColor}
               groupOptions={groupOptions}
-              itemCount={items?.placeholders.length}
               onOpenJumpToDialog={() => {
                 eSendEvent(eOpenJumpToDialog, {
                   ref: props.scrollRef,
@@ -335,16 +316,11 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
   }
 }
 
-function getDate(
-  item: Notebook | Note,
-  groupType?: GroupingKey,
-  id?: string,
-  type?: GroupingByIdKey
-): number {
+function getDate(item: Notebook | Note, groupType?: GroupingKey): number {
   return (
     getSortValue(
       groupType
-        ? getGroupOptions(groupType, id, type)
+        ? db.settings.getGroupOptions(groupType)
         : {
             sortBy: "dateEdited",
             sortDirection: "desc"

apps/mobile/app/components/list/reorderable-list.tsx

@@ -30,7 +30,7 @@ import { fluidTabsRef } from "../../utils/global-refs";
 import { AppFontSize } from "../../utils/size";
 import { useSideBarDraggingStore } from "../side-menu/dragging-store";
 import { IconButton } from "../ui/icon-button";
-import { useIsFeatureAvailable } from "@notesnook/common";
+import { isFeatureAvailable, useIsFeatureAvailable } from "@notesnook/common";
 import PaywallSheet from "../sheets/paywall";
 import { strings } from "@notesnook/intl";
 import { ToastManager } from "../../services/event-manager";
@@ -142,7 +142,7 @@ function ReorderableList<T extends { id: string }>({
 
     items.push(...data.filter((i) => !itemOrderState.includes(i.id)));
     return items;
-  }, [customizableSidebarFeature?.isAllowed, data, itemOrderState]);
+  }, [data, customizableSidebarFeature?.isAllowed]);
 
   return (
     <View style={styles.container}>

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

@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { getFormattedDate } from "@notesnook/common";
 import {
   EncryptedContentItem,
+  isEncryptedContent,
   Note,
   UnencryptedContentItem
 } from "@notesnook/core";
@@ -74,11 +75,9 @@ const MergeConflicts = () => {
   const { height } = useSettingStore((state) => state.dimensions);
 
   const applyChanges = async () => {
-    const contentToSave = selectedContent;
+    let contentToSave = selectedContent;
     if (!contentToSave) return;
-    const note = await db.notes.note(
-      (content.current as UnencryptedContentItem).noteId
-    );
+    let note = await db.notes.note(contentToSave.noteId);
     if (!note) return;
     await db.notes.add({
       id: note.id,
@@ -463,8 +462,7 @@ const MergeConflicts = () => {
             <ReadonlyEditor
               editorId="conflictSecondary"
               onLoad={async (loadContent) => {
-                if (!content.current?.noteId) return;
-                const note = await db.notes.note(content.current?.noteId);
+                const note = await db.notes.note(content.current?.noteId!);
                 if (!note) return;
                 loadContent({
                   id: note.id,

apps/mobile/app/components/note-history/index.tsx

@@ -63,25 +63,22 @@ const HistoryItem = ({
     }${_end_time}`;
   };
 
-  const preview = useCallback(
-    async (item: HistorySession) => {
-      const content = await db.noteHistory.content(item.id);
-      presentSheet({
-        component: (
-          <NotePreview
-            session={{
-              ...item,
-              session: getDate(item.dateCreated, item.dateModified)
-            }}
-            content={content}
-            note={note}
-          />
-        ),
-        context: "note_history"
-      });
-    },
-    [note]
-  );
+  const preview = useCallback(async (item: HistorySession) => {
+    const content = await db.noteHistory.content(item.id);
+    presentSheet({
+      component: (
+        <NotePreview
+          session={{
+            ...item,
+            session: getDate(item.dateCreated, item.dateModified)
+          }}
+          content={content}
+          note={note}
+        />
+      ),
+      context: "note_history"
+    });
+  }, []);
 
   return (
     <Pressable
@@ -141,7 +138,7 @@ export default function NoteHistory({
     ({ index }: { index: number }) => (
       <HistoryItem index={index} items={history} note={note} />
     ),
-    [history, note]
+    [history]
   );
 
   return (

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

@@ -42,6 +42,7 @@ import {
   isEncryptedContent,
   Note,
   NoteContent,
+  SessionContentItem,
   TrashOrItem
 } from "@notesnook/core";
 

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

@@ -18,7 +18,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { getFeaturesTable } from "@notesnook/common";
-import { EVENTS, Plan, SubscriptionPlan, User } from "@notesnook/core";
+import {
+  EV,
+  EVENTS,
+  Plan,
+  SKUResponse,
+  SubscriptionPlan,
+  User
+} from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
@@ -48,7 +55,6 @@ import {
   TECHLORE_SVG,
   XDA_SVG
 } from "../../assets/images/assets";
-import { db } from "../../common/database";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
 import usePricingPlans, {
   PlanOverView,
@@ -70,6 +76,7 @@ import { IconButton } from "../ui/icon-button";
 import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { db } from "../../common/database";
 
 const Steps = {
   select: 1,
@@ -112,7 +119,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
       }
       setStep(Steps.buy);
     }
-  }, [pricingPlans, routeParams.state]);
+  }, [routeParams.state]);
 
   useEffect(() => {
     let listener: NativeEventSubscription;
@@ -130,7 +137,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
     return () => {
       listener?.remove();
     };
-  }, [isFocused, routeParams.context, step]);
+  }, [isFocused, step]);
 
   useEffect(() => {
     const sub = db.eventManager.subscribe(
@@ -147,7 +154,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
     return () => {
       sub?.unsubscribe();
     };
-  }, [routeParams.context]);
+  }, []);
 
   const is5YearPlanSelected = (
     isGithubRelease
@@ -176,7 +183,6 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
         >
           <IconButton
             name="close"
-            testID="paywall-close"
             color={colors.primary.icon}
             onPress={() => {
               Navigation.navigate("FluidPanelsView", {});
@@ -930,10 +936,7 @@ const PricingPlanCard = ({
   setStep: (step: number) => void;
 }) => {
   const { colors } = useThemeColors();
-  const regionalDiscount =
-    annualBilling && plan.id === "pro"
-      ? pricingPlans?.regionalDiscount
-      : undefined;
+  const [regionalDiscount, setRegionaDiscount] = useState<SKUResponse>();
   const { width } = useWindowDimensions();
   const isTablet = width > 600;
 
@@ -956,6 +959,26 @@ const PricingPlanCard = ({
     annualBilling
   );
 
+  useEffect(() => {
+    if (pricingPlans?.isGithubRelease || !annualBilling) return;
+    pricingPlans
+      ?.getRegionalDiscount(
+        plan.id,
+        pricingPlans.isGithubRelease
+          ? (WebPlan?.period as string)
+          : `notesnook.${plan.id}.${annualBilling ? "yearly" : "monthly"}`
+      )
+      .then((value) => {
+        setRegionaDiscount(value);
+      });
+  }, [annualBilling]);
+
+  useEffect(() => {
+    if (!annualBilling) {
+      setRegionaDiscount(undefined);
+    }
+  }, [annualBilling]);
+
   const isSubscribed =
     product?.productId &&
     pricingPlans?.user?.subscription?.productId?.includes(plan.id) &&
@@ -985,8 +1008,8 @@ const PricingPlanCard = ({
                   : "monthly"
               }`
             : pricingPlans.isGithubRelease
-              ? (WebPlan?.period as string)
-              : (product?.productId as string)
+            ? (WebPlan?.period as string)
+            : (product?.productId as string)
         );
         setStep(Steps.buy);
       }}

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

@@ -132,7 +132,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
     }
     useSettingStore.getState().setSheetKeyboardHandler(false);
     setVisible(true);
-  }, [colorFeature]);
+  }, []);
 
   return (
     <>

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

@@ -35,7 +35,7 @@ export const DateMeta = ({ item }: { item: Item }) => {
   const [dateCreated, setDateCreated] = useState(item.dateCreated);
 
   function getDateMeta() {
-    const keys = Object.keys(item);
+    let keys = Object.keys(item);
     if (keys.includes("dateEdited"))
       keys.splice(
         keys.findIndex((k) => k === "dateModified"),
@@ -110,7 +110,6 @@ export const DateMeta = ({ item }: { item: Item }) => {
           }}
           maximumDate={new Date((item as Note).dateEdited)}
           isDarkModeEnabled={isDark}
-          themeVariant={isDark ? "dark" : "light"}
           is24Hour={db.settings.getTimeFormat() === "24-hour"}
           date={new Date(dateCreated)}
         />

apps/mobile/app/components/properties/items.tsx

@@ -42,8 +42,7 @@ const TOP_BAR_ITEMS: ActionId[] = [
   "publish",
   "local-only",
   "read-only",
-  "pin-to-notifications",
-  "spell-check"
+  "pin-to-notifications"
 ];
 
 const BOTTOM_BAR_ITEMS: ActionId[] = [
@@ -80,8 +79,6 @@ const COLUMN_BAR_ITEMS: ActionId[] = [
   "rename-color",
   "rename-tag",
   "launcher-shortcut",
-  "copy-id",
-  "copy-link",
   "restore",
   "trash",
   "delete"
@@ -176,15 +173,15 @@ export const Items = ({
               DDS.isTab
                 ? AppFontSize.xxl
                 : shouldShrink
-                  ? AppFontSize.xxl
-                  : AppFontSize.lg
+                ? AppFontSize.xxl
+                : AppFontSize.lg
             }
             color={
               item.checked
                 ? item.activeColor || colors.primary.accent
                 : item.id.match(/(delete|trash)/g)
-                  ? colors.error.icon
-                  : colors.secondary.icon
+                ? colors.error.icon
+                : colors.secondary.icon
             }
           />
         </Pressable>
@@ -215,8 +212,8 @@ export const Items = ({
           text: item.checked
             ? item.activeColor || colors.primary.accent
             : item.id === "delete" || item.id === "trash"
-              ? colors.error.paragraph
-              : colors.primary.paragraph
+            ? colors.error.paragraph
+            : colors.primary.paragraph
         }}
         testID={"icon-" + item.id}
         onPress={item.onPress}
@@ -280,8 +277,8 @@ export const Items = ({
                 item.checked
                   ? item.activeColor || colors.primary.accent
                   : item.id === "delete" || item.id === "trash"
-                    ? colors.error.icon
-                    : colors.secondary.icon
+                  ? colors.error.icon
+                  : colors.secondary.icon
               }
             />
 
@@ -321,9 +318,7 @@ export const Items = ({
     [
       colors.error.icon,
       colors.primary.accent,
-      colors.primary.border,
       colors.secondary.icon,
-      colors.static.orange,
       columnItemWidth,
       topBarSorting
     ]

apps/mobile/app/components/properties/tags.jsx

@@ -77,7 +77,7 @@ export const TagStrip = ({ item, close }) => {
       .then((tags) => {
         setTags(tags);
       });
-  }, [item]);
+  }, []);
 
   return tags?.length > 0 ? (
     <View

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

@@ -42,6 +42,8 @@ import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { presentDialog } from "../dialog/functions";
 import ExportNotesSheet from "../sheets/export-notes";
+
+import { MoveNotebook } from "../../screens/move-notebook";
 import { IconButton } from "../ui/icon-button";
 import NativeTooltip from "../../utils/tooltip";
 import ManageTags from "../../screens/manage-tags";

apps/mobile/app/components/sheets/add-api-key/index.tsx

@@ -1,183 +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, { useRef, useState } from "react";
-import { View } from "react-native";
-import { strings } from "@notesnook/intl";
-import { db } from "../../../common/database";
-import { Button } from "../../ui/button";
-import FormInput, {
-  createFormRef,
-  validators
-} from "../../ui/input/form-input";
-import Paragraph from "../../ui/typography/paragraph";
-import Heading from "../../ui/typography/heading";
-import { DefaultAppStyles } from "../../../utils/styles";
-import { AppFontSize } from "../../../utils/size";
-import { ToastManager, presentSheet } from "../../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
-import { Pressable } from "../../ui/pressable";
-import { ScrollView } from "react-native-actions-sheet";
-
-const getExpiryOptions = () => [
-  { label: strings.expiryOneDay(), value: 24 * 60 * 60 * 1000 },
-  { label: strings.expiryOneWeek(), value: 7 * 24 * 60 * 60 * 1000 },
-  { label: strings.expiryOneMonth(), value: 30 * 24 * 60 * 60 * 1000 },
-  { label: strings.expiryOneYear(), value: 365 * 24 * 60 * 60 * 1000 },
-  { label: strings.never(), value: -1 }
-];
-
-type AddApiKeySheetProps = {
-  close?: (ctx?: string | undefined) => void;
-  onAdd: () => void;
-};
-
-export default function AddApiKeySheet({ close, onAdd }: AddApiKeySheetProps) {
-  const { colors } = useThemeColors();
-  const formRef = useRef(
-    createFormRef({
-      keyName: ""
-    })
-  );
-  const [selectedExpiry, setSelectedExpiry] = useState(
-    getExpiryOptions()[2].value
-  );
-  const [isCreating, setIsCreating] = useState(false);
-
-  const handleCreate = async () => {
-    try {
-      if (formRef.current.validateField("keyName")) {
-        return;
-      }
-
-      const keyName = formRef.current.getValue("keyName").trim();
-
-      setIsCreating(true);
-      await db.inboxApiKeys.create(keyName, selectedExpiry);
-      ToastManager.show({
-        message: strings.apiKeyCreatedSuccessfully(),
-        type: "success"
-      });
-      onAdd();
-      close?.();
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "";
-      ToastManager.show({
-        message: strings.failedToCreateApiKey(message),
-        type: "error"
-      });
-      formRef.current.setError(
-        "keyName",
-        message || strings.failedToCreateApiKey("")
-      );
-    } finally {
-      setIsCreating(false);
-    }
-  };
-
-  return (
-    <ScrollView
-      contentContainerStyle={{
-        paddingHorizontal: DefaultAppStyles.GAP,
-        gap: DefaultAppStyles.GAP_VERTICAL,
-        paddingTop: DefaultAppStyles.GAP_VERTICAL,
-        paddingBottom: DefaultAppStyles.GAP_VERTICAL * 2
-      }}
-    >
-      <View
-        style={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center"
-        }}
-      >
-        <Heading size={AppFontSize.xl}>{strings.createApiKey()}</Heading>
-      </View>
-
-      <View style={{ gap: DefaultAppStyles.GAP_VERTICAL }}>
-        <Paragraph size={AppFontSize.sm}>{strings.keyName()}</Paragraph>
-        <FormInput
-          name="keyName"
-          formRef={formRef}
-          placeholder={strings.exampleKeyName()}
-          validators={[validators.required(strings.enterKeyName())]}
-          onChangeText={() => {
-            formRef.current.setError("keyName", undefined);
-          }}
-          onSubmitEditing={handleCreate}
-        />
-      </View>
-
-      <View style={{ gap: DefaultAppStyles.GAP_VERTICAL }}>
-        <Paragraph size={AppFontSize.sm}>{strings.expiresIn()}</Paragraph>
-        <View
-          style={{
-            flexDirection: "row",
-            flexWrap: "wrap",
-            gap: DefaultAppStyles.GAP_SMALL
-          }}
-        >
-          {getExpiryOptions().map((option) => (
-            <Pressable
-              key={option.label}
-              onPress={() => setSelectedExpiry(option.value)}
-              type={
-                selectedExpiry === option.value ? "selected" : "transparent"
-              }
-              style={{
-                paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
-                paddingHorizontal: DefaultAppStyles.GAP
-              }}
-            >
-              <Paragraph
-                size={AppFontSize.sm}
-                color={
-                  selectedExpiry === option.value
-                    ? colors.selected.paragraph
-                    : colors.primary.paragraph
-                }
-              >
-                {option.label}
-              </Paragraph>
-            </Pressable>
-          ))}
-        </View>
-      </View>
-
-      <Button
-        title={isCreating ? strings.creating() : strings.create()}
-        type="accent"
-        width="100%"
-        loading={isCreating}
-        disabled={isCreating}
-        onPress={handleCreate}
-        style={{
-          marginTop: DefaultAppStyles.GAP_VERTICAL
-        }}
-      />
-    </ScrollView>
-  );
-}
-
-AddApiKeySheet.present = (onAdd: () => void) => {
-  presentSheet({
-    component: (ref, close, _update) => (
-      <AddApiKeySheet close={close} onAdd={onAdd} />
-    )
-  });
-};

apps/mobile/app/components/sheets/buy-plan/index.tsx

@@ -16,11 +16,11 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { Plan } from "@notesnook/core";
+import { Plan, SKUResponse } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import dayjs from "dayjs";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Linking,
   Platform,
@@ -32,6 +32,7 @@ import {
 import Config from "react-native-config";
 import * as RNIap from "react-native-iap";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { WebView } from "react-native-webview";
 import { db } from "../../../common/database";
 import usePricingPlans from "../../../hooks/use-pricing-plans";
 import { ToastManager } from "../../../services/event-manager";
@@ -330,10 +331,7 @@ const ProductItem = (props: {
   productId: string;
 }) => {
   const { colors } = useThemeColors();
-  const regionalDiscount =
-    props.productId === "notesnook.pro.yearly"
-      ? props.pricingPlans.regionalDiscount
-      : undefined;
+  const [regionalDiscount, setRegionaDiscount] = useState<SKUResponse>();
   const product =
     props.pricingPlans?.currentPlan?.subscriptions?.[
       regionalDiscount?.sku || props.productId
@@ -370,6 +368,28 @@ const ProductItem = (props: {
       props.pricingPlans.user?.subscription?.productId ===
         (product as Plan)?.id);
 
+  useEffect(() => {
+    props.pricingPlans
+      ?.getRegionalDiscount(
+        props.pricingPlans.currentPlan?.id as string,
+        props.pricingPlans.isGithubRelease
+          ? ((product as Plan)?.period as string)
+          : props.productId
+      )
+      .then((value) => {
+        if (
+          value &&
+          value.sku?.startsWith(
+            (props.pricingPlans.selectedProduct as RNIap.Subscription)
+              ?.productId
+          )
+        ) {
+          props.pricingPlans.selectProduct(value?.sku as string);
+        }
+        setRegionaDiscount(value);
+      });
+  }, []);
+
   const discountValue =
     (isAnnual && !isGithubRelease) ||
     (isGithubRelease && (product as Plan)?.discount?.amount)

apps/mobile/app/components/sheets/editor-tabs/index.tsx

@@ -33,11 +33,11 @@ import { editorController } from "../../../screens/editor/tiptap/utils";
 import { eSendEvent, presentSheet } from "../../../services/event-manager";
 import { eUnlockNote } from "../../../utils/events";
 import { AppFontSize } from "../../../utils/size";
-import { DefaultAppStyles } from "../../../utils/styles";
 import { IconButton } from "../../ui/icon-button";
 import { Pressable } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const TabItemComponent = (props: {
   tab: TabItem;
@@ -225,24 +225,14 @@ export default function EditorTabs({
         }}
       >
         <Heading size={AppFontSize.lg}>{strings.tabs()}</Heading>
-        <View style={{ flexDirection: "row", gap: DefaultAppStyles.GAP_SMALL }}>
-          <IconButton
-            onPress={() => {
-              useTabStore.getState().clearAllTabs();
-              close?.();
-            }}
-            name="close-box-multiple-outline"
-            color={colors.primary.icon}
-          />
-          <IconButton
-            onPress={() => {
-              useTabStore.getState().newTab();
-              close?.();
-            }}
-            name="plus"
-            color={colors.primary.accent}
-          />
-        </View>
+        <IconButton
+          onPress={() => {
+            useTabStore.getState().newTab();
+            close?.();
+          }}
+          name="plus"
+          color={colors.primary.accent}
+        />
       </View>
 
       <FlatList
@@ -263,4 +253,4 @@ EditorTabs.present = () => {
   presentSheet({
     component: (ref, close, update) => <EditorTabs close={close} />
   });
-};
+};

apps/mobile/app/components/sheets/export-notes/share.jsx

@@ -21,6 +21,7 @@ import React from "react";
 import { View } from "react-native";
 import FileViewer from "react-native-file-viewer";
 import { ToastManager } from "../../../services/event-manager";
+import { AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../../utils/styles";

apps/mobile/app/components/sheets/github/issue.js

@@ -17,18 +17,18 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Debug, IssueReportResponse } from "@notesnook/core";
+import { Debug } from "@notesnook/core";
 import { getModel, getBrand, getSystemVersion } from "react-native-device-info";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useRef, useState } from "react";
 import { Linking, Platform, Text, TextInput, View } from "react-native";
 import { getVersion } from "react-native-device-info";
 import { useStoredRef } from "../../../hooks/use-stored-ref";
-import { eSendEvent, ToastManager } from "../../../services/event-manager";
+import { ToastManager } from "../../../services/event-manager";
 import PremiumService from "../../../services/premium";
 import { useUserStore } from "../../../stores/use-user-store";
 import { openLinkInBrowser } from "../../../utils/functions";
-import { defaultBorderRadius, AppFontSize } from "../../../utils/size/index";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import DialogHeader from "../../dialog/dialog-header";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
@@ -37,26 +37,17 @@ import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../../utils/styles";
 import Config from "react-native-config";
-import { eCloseSheet } from "../../../utils/events";
 
-export const Issue = ({
-  defaultTitle,
-  defaultBody,
-  issueTitle
-}: {
-  defaultTitle?: string;
-  defaultBody?: string;
-  issueTitle?: string;
-}) => {
+export const Issue = ({ defaultTitle, defaultBody, issueTitle }) => {
   const { colors } = useThemeColors();
-  const body = useStoredRef("issueBody", "");
+  const body = useStoredRef("issueBody");
   const title = useStoredRef("issueTitle", defaultTitle);
   const [done, setDone] = useState(false);
   const user = useUserStore((state) => state.user);
   const [loading, setLoading] = useState(false);
-  const bodyRef = useRef<TextInput>(null);
+  const bodyRef = useRef();
   const initialLayout = useRef(false);
-  const issueReportResponse = useRef<IssueReportResponse>(undefined);
+  const issueUrl = useRef();
 
   const onPress = async () => {
     if (loading) return;
@@ -66,7 +57,7 @@ export const Issue = ({
 
     try {
       setLoading(true);
-      issueReportResponse.current = await Debug.report({
+      issueUrl.current = await Debug.report({
         title: title.current,
         body:
           body.current +
@@ -81,7 +72,7 @@ Logged in: ${user ? "yes" : "no"}
 Github Release: ${Config.GITHUB_RELEASE === "true" ? "Yes" : "No"}`,
         userId: user?.id
       });
-      if (!issueReportResponse.current) {
+      if (!issueUrl.current) {
         setLoading(false);
         ToastManager.show({
           heading: "Failed to report issue on github",
@@ -97,46 +88,12 @@ Github Release: ${Config.GITHUB_RELEASE === "true" ? "Yes" : "No"}`,
     } catch (e) {
       setLoading(false);
       ToastManager.show({
-        heading: (e as Error).message,
+        heading: e.message,
         type: "error"
       });
     }
   };
 
-  function getResponseInfo(response?: IssueReportResponse) {
-    if (!response || "error" in response) return;
-    switch (response.type) {
-      case "email": {
-        return {
-          title: strings.yourSupportRequestHasBeenForwarded(),
-          message: strings.supportEmailMessage()
-        };
-      }
-      case "discussion": {
-        const url = response.url;
-        return {
-          title: strings.thankYouForFeedback(),
-          positiveButtonText: strings.copyLink(),
-          message: strings.featureRequestMessage(url),
-          url: url
-        };
-      }
-      case "issue": {
-        const url = response.url;
-        return {
-          title: strings.thankYouForReporting(),
-          positiveButtonText: strings.copyLink(),
-          message: strings.bugReportMessage(url),
-          url: url
-        };
-      }
-    }
-  }
-
-  const responseInfo = getResponseInfo(issueReportResponse.current);
-
-  console.log(responseInfo, issueReportResponse.current);
-
   return (
     <View
       style={{
@@ -148,28 +105,38 @@ Github Release: ${Config.GITHUB_RELEASE === "true" ? "Yes" : "No"}`,
         <>
           <View
             style={{
+              height: 250,
               justifyContent: "center",
               alignItems: "center",
               gap: 10
             }}
           >
-            <Heading>{responseInfo?.title}</Heading>
+            <Heading>{strings.issueCreatedHeading()}</Heading>
             <Paragraph
               style={{
                 textAlign: "center"
               }}
               selectable={true}
             >
-              {responseInfo?.message}
+              {strings.issueCreatedDesc[0]()}
+              <Paragraph
+                style={{
+                  textDecorationLine: "underline",
+                  color: colors.primary.accent
+                }}
+                onPress={() => {
+                  Linking.openURL(issueUrl.current);
+                }}
+              >
+                {issueUrl.current}
+              </Paragraph>
+              . {strings.issueCreatedDesc[1]()}
             </Paragraph>
 
             <Button
-              title={responseInfo?.positiveButtonText || "Done"}
+              title={strings.openIssue()}
               onPress={() => {
-                if (responseInfo?.url) {
-                  Linking.openURL(responseInfo?.url);
-                }
-                eSendEvent(eCloseSheet);
+                Linking.openURL(issueUrl.current);
               }}
               type="accent"
               width="100%"
@@ -281,7 +248,10 @@ Github Release: ${Config.GITHUB_RELEASE === "true" ? "Yes" : "No"}`,
               }}
               onPress={async () => {
                 try {
-                  await openLinkInBrowser("https://discord.gg/zQBK97EE22");
+                  await openLinkInBrowser(
+                    "https://discord.gg/zQBK97EE22",
+                    colors
+                  );
                 } catch (e) {
                   console.error(e);
                 }

apps/mobile/app/components/sheets/menu-item-properties/index.tsx

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useAreFeaturesAvailable } from "@notesnook/common";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
-import React, { useEffect } from "react";
+import React from "react";
 import { View } from "react-native";
 import {
   eSendEvent,
@@ -28,11 +28,7 @@ import {
   ToastManager
 } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
-import {
-  eAfterSync,
-  eCloseSheet,
-  eMenuItemUpdate
-} from "../../../utils/events";
+import { eAfterSync, eCloseSheet } from "../../../utils/events";
 import { SideMenuItem } from "../../../utils/menu-items";
 import { AppFontSize } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
@@ -44,22 +40,14 @@ import PaywallSheet from "../paywall";
 import { presentDialog } from "../../dialog/functions";
 import { db } from "../../../common/database";
 import { useTrashStore } from "../../../stores/use-trash-store";
-import { useSettingStore } from "../../../stores/use-setting-store";
 export const MenuItemProperties = ({ item }: { item: SideMenuItem }) => {
   const { colors } = useThemeColors();
   const featuresAvailable = useAreFeaturesAvailable([
     "customHomepage",
     "customizableSidebar"
   ]);
-  const isAppLoading = useSettingStore((state) => state.isAppLoading);
   const trash = useTrashStore((state) => state.items);
 
-  useEffect(() => {
-    if (!isAppLoading) {
-      useTrashStore.getState().refresh();
-    }
-  }, [isAppLoading]);
-
   return !featuresAvailable ? null : (
     <View
       style={{
@@ -133,7 +121,6 @@ export const MenuItemProperties = ({ item }: { item: SideMenuItem }) => {
                       positivePress: async () => {
                         await db.trash.clear();
                         useTrashStore.getState().clear();
-                        eSendEvent(eMenuItemUpdate);
                         eSendEvent(eAfterSync);
                         ToastManager.show({
                           message: strings.trashCleared(),

apps/mobile/app/components/sheets/notebooks/index.tsx

@@ -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 { Notebook } from "@notesnook/core";
+import { Notebook, VirtualizedGrouping } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";

apps/mobile/app/components/sheets/paywall/index.tsx

@@ -1,22 +1,3 @@
-/*
-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 { FeatureId, FeatureResult } from "@notesnook/common";
 import { SubscriptionPlan, SubscriptionProvider } from "@notesnook/core";
 import { strings } from "@notesnook/intl";

apps/mobile/app/components/sheets/plan-limits/index.tsx

@@ -1,22 +1,3 @@
-/*
-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 {
   FeatureUsage,
   formatBytes,
@@ -95,10 +76,10 @@ export function PlanLimits() {
               {item.total === Infinity
                 ? strings.unlimited()
                 : item.id === "storage"
-                  ? `${formatBytes(item.used)}/${formatBytes(
-                      item.total
-                    )} ${strings.used()}`
-                  : `${item.used}/${item.total} ${strings.used()}`}
+                ? `${formatBytes(item.used)}/${formatBytes(
+                    item.total
+                  )} ${strings.used()}`
+                : `${item.used}/${item.total} ${strings.used()}`}
             </Paragraph>
           </View>
         </View>

apps/mobile/app/components/sheets/publish-note/index.tsx

@@ -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 { Note } from "@notesnook/core";
+import { hosts, Monograph, Note } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import Clipboard from "@react-native-clipboard/clipboard";
@@ -28,6 +28,7 @@ import {
   TouchableOpacity,
   View
 } from "react-native";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 //@ts-ignore
 import ToggleSwitch from "toggle-switch-react-native";
 import { db } from "../../../common/database";
@@ -45,30 +46,21 @@ import { DefaultAppStyles } from "../../../utils/styles";
 import DialogHeader from "../../dialog/dialog-header";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
+import Input from "../../ui/input";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { useAsync } from "react-async-hook";
+import { isFeatureAvailable, useIsFeatureAvailable } from "@notesnook/common";
 import { eMenuItemUpdate } from "../../../utils/events";
-import { useIsFeatureAvailable } from "@notesnook/common";
-import FormInput, {
-  createFormRef,
-  validators
-} from "../../ui/input/form-input";
-import { useAppState } from "../../../../app/hooks/use-app-state";
 
 async function fetchMonographData(noteId: string) {
   const monographId = db.monographs.monograph(noteId);
   const monograph = monographId
     ? await db.monographs.get(monographId)
     : undefined;
-
-  const metadata = monographId
-    ? await db.monographs.metadata(monographId)
-    : { publishUrl: "", analytics: { totalViews: 0 } };
   return {
     monograph,
-    monographId,
-    metadata
+    monographId
   };
 }
 
@@ -85,54 +77,26 @@ const PublishNoteSheet = ({
   const isFeatureAvailable = useIsFeatureAvailable("monographAnalytics");
   const [isLocked, setIsLocked] = useState(false);
   const [publishing, setPublishing] = useState(false);
+  const customTitle = useRef<string>("");
   const pwdInput = useRef<TextInput>(null);
   const titleInput = useRef<TextInput>(null);
-  const lastMonographDataResult = useRef<Awaited<
-    ReturnType<typeof db.monographs.metadata>
-  > | null>(null);
-  const monographData = useAsync(
-    async () => {
-      return fetchMonographData(note?.id);
-    },
-    [],
-    {
-      onSuccess: (r) => {
-        lastMonographDataResult.current = r.metadata;
-      }
-    }
-  );
+  const passwordValue = useRef<string>(undefined);
+  const monographData = useAsync(async () => {
+    return fetchMonographData(note?.id);
+  }, []);
   const monograph = monographData.result?.monograph;
-  const metadata = monographData.result?.metadata;
-  const publishUrl = metadata?.publishUrl || monograph?.publishUrl || "";
+  customTitle.current = monograph?.title || note.title || "";
+  const publishUrl = monograph && `${hosts.MONOGRAPH_HOST}/${monograph?.id}`;
   const isPublished = db.monographs.monograph(note?.id);
-  const appState = useAppState();
-  const previousAppState = useRef(appState);
-
-  const formRef = useRef(
-    createFormRef({
-      title: note.title || "",
-      password: ""
-    })
-  );
-
-  useEffect(() => {
-    if (!monographData.result) return;
-    const title = monograph?.title || note.title || "";
-    formRef.current.setValue("title", title);
-    setTimeout(() => {
-      titleInput.current?.setNativeProps({ text: title });
-    }, 50);
-  }, [monographData.result, monograph]);
 
   useEffect(() => {
     (async () => {
       if (monograph) {
         setSelfDestruct(!!monograph?.selfDestruct);
         if (monograph.password) {
-          const password = await db.monographs.decryptPassword(
+          passwordValue.current = await db.monographs.decryptPassword(
             monograph?.password
           );
-          formRef.current.setValue("password", password);
           setIsLocked(!!monograph?.password);
         }
       }
@@ -141,23 +105,20 @@ const PublishNoteSheet = ({
 
   const publishNote = async () => {
     if (publishing) return;
-    formRef.current.clearErrors();
-
-    if (!formRef.current.validate()) return;
-
-    const values = formRef.current.getValues();
-
     setPublishLoading(true);
 
     try {
       if (note?.id) {
-        await db.monographs.publish(note.id, values.title, {
-          selfDestruct,
-          password: isLocked ? values.password : undefined
+        if (isLocked && !passwordValue.current) return;
+        await db.monographs.publish(note.id, customTitle.current, {
+          selfDestruct: selfDestruct,
+          password: isLocked ? passwordValue.current : undefined
         });
+
         await monographData.execute();
         Navigation.queueRoutesForUpdate();
         eSendEvent(eMenuItemUpdate);
+        setPublishLoading(false);
       }
       requestInAppReview();
     } catch (e) {
@@ -167,9 +128,9 @@ const PublishNoteSheet = ({
         type: "error",
         context: "local"
       });
-    } finally {
-      setPublishLoading(false);
     }
+
+    setPublishLoading(false);
   };
   const setPublishLoading = (value: boolean) => {
     setPublishing(value);
@@ -197,29 +158,6 @@ const PublishNoteSheet = ({
     setPublishLoading(false);
   };
 
-  const monographMetadata =
-    monographData.result?.metadata ?? lastMonographDataResult.current;
-
-  useEffect(() => {
-    const prevState = previousAppState.current;
-    previousAppState.current = appState;
-
-    if (
-      appState === "active" &&
-      prevState !== "active" &&
-      monograph?.id &&
-      !selfDestruct
-    ) {
-      monographData.execute();
-    }
-  }, [
-    appState,
-    monograph?.id,
-    selfDestruct,
-    isFeatureAvailable?.isAllowed,
-    monographData
-  ]);
-
   return (
     <View
       style={{
@@ -310,17 +248,11 @@ const PublishNoteSheet = ({
             </TouchableOpacity>
           ) : null}
 
-          <FormInput
-            name="title"
-            formRef={formRef}
+          <Input
             fwdRef={titleInput}
-            multiline
-            scrollEnabled
-            containerStyle={{
-              maxHeight: 100
-            }}
+            onChangeText={(value) => (customTitle.current = value)}
+            defaultValue={customTitle.current}
             placeholder={strings.noteTitle()}
-            validators={[validators.required(strings.titleIsRequired())]}
           />
 
           <TouchableOpacity
@@ -367,16 +299,13 @@ const PublishNoteSheet = ({
 
               {isLocked ? (
                 <>
-                  <FormInput
-                    name="password"
-                    formRef={formRef}
+                  <Input
                     fwdRef={pwdInput}
+                    onChangeText={(value) => (passwordValue.current = value)}
                     blurOnSubmit
                     secureTextEntry
+                    defaultValue={passwordValue.current}
                     placeholder={strings.enterPassword()}
-                    validators={[
-                      validators.required(strings.passwordRequired())
-                    ]}
                     containerStyle={{
                       marginTop: DefaultAppStyles.GAP_VERTICAL
                     }}
@@ -429,10 +358,7 @@ const PublishNoteSheet = ({
             </View>
           </TouchableOpacity>
 
-          {isFeatureAvailable?.isAllowed &&
-          !selfDestruct &&
-          monographMetadata &&
-          monographMetadata?.analytics?.totalViews > 0 ? (
+          {isFeatureAvailable?.isAllowed ? (
             <View
               style={{
                 flexDirection: "row",
@@ -456,9 +382,6 @@ const PublishNoteSheet = ({
                   }}
                 >
                   <Paragraph size={AppFontSize.sm}>{strings.views()}</Paragraph>
-                  <Paragraph>
-                    {monographMetadata?.analytics?.totalViews || 0}
-                  </Paragraph>
                 </View>
               </View>
             </View>