common: don't prefix attachment hash in filenames during export

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

.github/workflows/desktop.preview.yml

@@ -146,7 +146,6 @@ 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
@@ -190,7 +189,6 @@ jobs:
       - 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
@@ -210,7 +208,7 @@ jobs:
   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:

.github/workflows/desktop.publish.yml

@@ -107,7 +107,7 @@ jobs:
           target_commitish: ${{ github.ref }}
 
       - name: Generate flatpak sources
-        if: inputs.build-linux
+        if: inputs.publish-github && inputs.build-linux
         run: |
           sudo apt-get update
           sudo apt-get install -y --quiet flatpak flatpak-builder pipx
@@ -127,13 +127,6 @@ jobs:
           files: ./generated-sources.json
           prerelease: ${{ endsWith(steps.app_metadata.outputs.app_version, '-beta') }}
 
-      - name: Upload generated-sources.json as artifact
-        uses: actions/upload-artifact@v4
-        if: inputs.build-linux
-        with:
-          name: generated-sources
-          path: ./generated-sources.json
-
   build-macos:
     name: Build for macOS
     needs: build
@@ -189,9 +182,7 @@ jobs:
       - name: Install sqlite-better-trigram for all arch
         run: |
           npm i --cpu arm64 sqlite-better-trigram
-          npm i --cpu arm64 sqlite3-fts5-html
           npm i --cpu x64 sqlite-better-trigram
-          npm i --cpu x64 sqlite3-fts5-html
         working-directory: ./apps/desktop
 
       - name: Install provisioning profile
@@ -273,7 +264,6 @@ 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
@@ -341,7 +331,6 @@ jobs:
       - 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
@@ -374,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": {

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "3.4.4",
+  "version": "3.3.16",
   "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.10.3",
+    "electron": "^37.0.0",
     "electron-builder": "^26.8.1",
     "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,108 +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);
-}
-
-function getStreamOrThrow(id: string, operation: "write" | "close") {
-  const stream = activeStreams.get(id);
-  if (!stream) {
-    throw new Error(
-      `Backup stream not found during ${operation}. The stream may have already been closed or was never opened. Stream id: ${id}`
-    );
-  }
-  return stream;
-}
-
-export const backupsRouter = t.router({
-  open: t.procedure
-    .input(z.object({ filename: z.string() }))
-    .mutation(({ input }) => {
-      const { filename } = input;
-      if (!filename.trim()) {
-        throw new Error("Invalid backup filename: filename cannot be empty.");
-      }
-      if (filename.includes(path.sep) || filename.includes("\\"))
-        throw new Error(
-          `Invalid backup filename: expected a plain file name without path separators, received "${filename}".`
-        );
-      const resolvedBackupDir = resolvePath(config.backupDirectory);
-      const backupPath = path.resolve(resolvedBackupDir, filename);
-      const relativeBackupPath = path.relative(resolvedBackupDir, backupPath);
-      if (
-        relativeBackupPath.startsWith("..") ||
-        path.isAbsolute(relativeBackupPath)
-      )
-        throw new Error(
-          `Invalid backup filename: resolved path "${backupPath}" is outside the configured backup directory "${resolvedBackupDir}". The configured backup directory may be invalid.`
-        );
-
-      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 = getStreamOrThrow(input.id, "write");
-      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 = getStreamOrThrow(input.id, "close");
-      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 { normalizePathString, resolvePath } from "../utils/resolve-path";
+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,14 +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(() => {
-    const backupDirectory = normalizePathString(config.backupDirectory);
-    if (backupDirectory !== config.backupDirectory) {
-      config.backupDirectory = backupDirectory;
-    }
-    return backupDirectory;
-  }),
 
   zoomFactor: t.procedure.query(() => config.zoomFactor),
   setZoomFactor: t.procedure.input(z.number()).mutation(({ input: factor }) => {
@@ -123,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();
@@ -164,38 +191,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
@@ -300,7 +298,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,8 +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";
-import { normalizePathString } from "./utils/resolve-path";
 
 const locale =
   process.env.NODE_ENV === "development"
@@ -57,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!");
@@ -131,6 +125,9 @@ async function createWindow() {
 
     webPreferences: {
       zoomFactor: config.zoomFactor,
+      nodeIntegration: true,
+      contextIsolation: false,
+      nodeIntegrationInWorker: true,
       spellcheck: config.isSpellCheckerEnabled,
       preload: __dirname + "/preload.js"
     }
@@ -196,11 +193,6 @@ async function createWindow() {
     setupTray();
     setupJumplist();
   });
-
-  if (pendingNNLink) {
-    bridge.onOpenLink(pendingNNLink);
-    pendingNNLink = undefined;
-  }
 }
 
 app.once("ready", async () => {
@@ -220,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", () => {
@@ -236,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");
@@ -249,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);
 
@@ -282,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 = normalizePathString(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/src/utils/resolve-path.ts

@@ -20,30 +20,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { app } from "electron";
 import { isAbsolute, join } from "path";
 
-export function normalizePathString(_path: string) {
-  let normalizedPath = _path.trim();
-
-  try {
-    const parsedPath = JSON.parse(normalizedPath);
-    if (typeof parsedPath === "string") normalizedPath = parsedPath;
-  } catch {
-    // ignore invalid JSON and keep the original path string
-  }
-
-  if (normalizedPath === "~") return app.getPath("home");
-  if (/^~[\\/]/.test(normalizedPath)) {
-    return join(app.getPath("home"), normalizedPath.slice(2));
-  }
-
-  return normalizedPath;
-}
-
 export function resolvePath(_path: string) {
-  const normalizedPath = normalizePathString(_path);
-  if (isAbsolute(normalizedPath)) return normalizedPath;
+  if (isAbsolute(_path)) return _path;
 
   return join(
-    ...normalizedPath.split("/").map((segment) => {
+    ..._path.split("/").map((segment) => {
       let resolved = segment;
       try {
         resolved = app.getPath(resolved as any);

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 3111
+            versionCode 3102
         }
         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,3 +1,3 @@
-- Minor bug fixes and improvements
+- Bug fixes and improvements
 
-Thank you for using Notesnook!
+Thank you for using Notesnook!

apps/mobile/app/app.tsx

@@ -44,6 +44,7 @@ import { useUserStore } from "./stores/use-user-store";
 import RNBootSplash from "react-native-bootsplash";
 import AppLocked from "./components/app-lock";
 import { useSettingStore } from "./stores/use-setting-store";
+import ScreenGuardModule from "react-native-screenguard";
 I18nManager.allowRTL(false);
 I18nManager.forceRTL(false);
 I18nManager.swapLeftAndRightInRTL(false);
@@ -51,6 +52,7 @@ const { appLockEnabled, appLockMode } = SettingsService.get();
 if (appLockEnabled || appLockMode !== "none") {
   useUserStore.getState().lockApp(true);
 }
+ScreenGuardModule.initSettings();
 RNBootSplash.hide({
   fade: true
 });

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/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/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";
@@ -59,7 +59,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 +153,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/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,22 +36,21 @@ 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;
@@ -61,7 +60,7 @@ export const ForgotPassword = ({ userEmail }: { userEmail: string }) => {
       ) {
         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

@@ -37,9 +37,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 +63,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 +93,6 @@ export const Login = ({
   });
   const { width, height } = useWindowDimensions();
   const isTablet = width > 600;
-
-  const onContinue = () => {
-    login();
-  };
-
   useEffect(() => {
     async () => {
       setStep(LoginSteps.emailAuth);
@@ -203,27 +198,27 @@ export const Login = ({
               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 +227,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 +242,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 +255,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 +273,8 @@ export const Login = ({
               <Button
                 loading={loading}
                 onPress={() => {
-                  onContinue();
+                  if (loading) return;
+                  login();
                 }}
                 style={{
                   width: "100%"
@@ -335,25 +328,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 {
@@ -101,7 +104,7 @@ export const SessionExpired = () => {
         if (!complete) {
           const user = await db.user.getUser();
           if (!user) return;
-          formRef.current.setValue("email", user.email);
+          email.current = user.email;
           setVisible(true);
           setFocused(false);
           return;
@@ -114,14 +117,14 @@ export const SessionExpired = () => {
     } catch (e) {
       const 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,17 +76,29 @@ 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);
+      await db.user.signup(email.current!.toLowerCase(), password.current!);
       const user = await db.user.getUser();
       setUser(user);
       setLastSynced(await db.lastSynced());
@@ -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

@@ -19,7 +19,7 @@ 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 +32,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 +46,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

@@ -136,7 +136,7 @@ const BaseDialog = ({
               ? background
               : transparent
                 ? "transparent"
-                : "rgba(0,0,0,0.1)"
+                : "rgba(0,0,0,0.3)"
           }}
         >
           <KeyboardAvoidingView

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/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/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,15 @@ 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 close = useCallback(() => {
     if (loading) {
@@ -133,11 +123,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 +144,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 +155,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 +175,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 +190,16 @@ 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 +209,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(
@@ -244,7 +233,11 @@ export const VaultDialog: React.FC = () => {
         type: "success"
       });
     } catch (e) {
-      formRef.current.setError("password", strings.passwordIncorrect());
+      ToastManager.show({
+        heading: strings.passwordIncorrect(),
+        type: "error",
+        context: "local"
+      });
     }
     setLoading(false);
   }, [close]);
@@ -264,7 +257,12 @@ export const VaultDialog: React.FC = () => {
         });
         close();
       } catch (e) {
-        formRef.current.setError("password", strings.passwordIncorrect());
+        close();
+        ToastManager.show({
+          heading: strings.passwordIncorrect(),
+          type: "error",
+          context: "local"
+        });
         setLoading(false);
       }
     },
@@ -272,14 +270,24 @@ export const VaultDialog: React.FC = () => {
   );
 
   const takeErrorAction = useCallback(() => {
-    formRef.current.setError("password", strings.passwordIncorrect());
+    setWrongPassword(true);
     setVisible(true);
+    setTimeout(() => {
+      ToastManager.show({
+        heading: strings.passwordIncorrect(),
+        type: "error",
+        context: "local"
+      });
+    }, 500);
   }, []);
 
   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 +305,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,7 +315,7 @@ export const VaultDialog: React.FC = () => {
         });
         eSendEvent(eUpdateNoteInEditor, noteRef.current, true);
         if (biometricUnlock && !isBiometryEnrolled) {
-          await enrollFingerprint(password);
+          await enrollFingerprint(passwordRef.current || "");
         }
         close();
       })
@@ -368,9 +375,8 @@ 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) {
@@ -379,14 +385,16 @@ export const VaultDialog: React.FC = () => {
   }, [close, takeErrorAction]);
 
   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 +411,7 @@ export const VaultDialog: React.FC = () => {
         requestType === VaultRequestType.CustomAction &&
         onUnlockRef.current
       ) {
+        const password = passwordRef.current;
         const unlock = onUnlockRef.current;
         close();
         await sleep(500);
@@ -424,9 +433,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) {
@@ -437,11 +449,10 @@ export const VaultDialog: React.FC = () => {
   }, [permanantUnlock, openNote]);
 
   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);
@@ -493,30 +504,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 +545,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 +586,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,6 +616,7 @@ export const VaultDialog: React.FC = () => {
     enrollFingerprint,
     unlockNote,
     lockNote,
+    takeErrorAction,
     clearVault,
     deleteVault
   ]);
@@ -591,7 +632,7 @@ export const VaultDialog: React.FC = () => {
         if (!credentials) throw new Error("Failed to get user credentials");
 
         if (credentials?.password) {
-          formRef.current.setValue("password", credentials.password);
+          passwordRef.current = credentials.password;
           onPress();
         } else {
           eSendEvent(eCloseActionSheet);
@@ -638,28 +679,24 @@ export const VaultDialog: React.FC = () => {
       setIsBiometryAvailable(available);
       setIsBiometryEnrolled(fingerprint);
       setBiometricUnlock(fingerprint);
+      setWrongPassword(false);
+      setPasswordsDontMatch(false);
       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;
+        data.requestType !== VaultRequestType.PermanentUnlock;
 
-      if (canAutoUnlock && available) {
-        try {
-          await onPressFingerprintAuth(data.title, data.description);
-        } catch (e) {
-          setVisible(true);
-        }
+      if (canAutoUnlock) {
+        await onPressFingerprintAuth(data.title, data.description);
       } else {
         setVisible(true);
       }
@@ -721,6 +758,7 @@ export const VaultDialog: React.FC = () => {
           icon="shield"
           padding={12}
         />
+        <Seperator half />
 
         <View
           style={{
@@ -729,25 +767,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 +789,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 +807,6 @@ export const VaultDialog: React.FC = () => {
                     ? strings.currentPassword()
                     : strings.password()
                 }
-                validators={[validators.required(strings.passwordRequired())]}
               />
 
               {!biometricUnlock ||
@@ -798,98 +830,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/image-preview/index.tsx

@@ -39,7 +39,6 @@ import Share from "react-native-share";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { DefaultAppStyles } from "../../utils/styles";
-import FileViewer from "react-native-file-viewer";
 
 const ImagePreview = () => {
   const { colors } = useThemeColors("dialog");
@@ -88,8 +87,9 @@ const ImagePreview = () => {
         return;
       }
       const attachment = await db.attachments.attachment(hash);
-      const path = `${cacheDir}/${"NN_" + (await getFileNameWithExtension(hash, attachment?.mimeType))
-        }`;
+      const path = `${cacheDir}/${
+        "NN_" + (await getFileNameWithExtension(hash, attachment?.mimeType))
+      }`;
       await RNFetchBlob.fs.mv(`${cacheDir}/${uri}`, path).catch(() => {
         /* empty */
       });
@@ -136,23 +136,17 @@ const ImagePreview = () => {
               borderWidth: 0
             }}
             onPress={async () => {
-              if (!image) return;
-
-              try {
-                if (Platform.OS === "android") {
-                  await FileViewer.open(image.replace("file://", ""), {
-                    showOpenWithDialog: true,
-                    showAppsSuggestions: true,
-                    shareFile: true
-                  } as any);
-                } else {
-                  await Share.open({
-                    url: image
-                  });
-                }
-              } catch (error) {
-                console.error(error);
-              }
+              useSettingStore
+                .getState()
+                .setAppDidEnterBackgroundForAction(true);
+              await Share.open({
+                url: image
+              }).catch(() => {
+                /* empty */
+              });
+              useSettingStore
+                .getState()
+                .setAppDidEnterBackgroundForAction(false);
             }}
           />
           <IconButton

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", () => {
@@ -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/merge-conflicts/index.tsx

@@ -72,7 +72,6 @@ const MergeConflicts = () => {
   const insets = useGlobalSafeAreaInsets();
   const content = useRef<UnencryptedContentItem>(null);
   const { height } = useSettingStore((state) => state.dimensions);
-  const keepScreenOn = useSettingStore((state) => state.settings.keepScreenOn);
 
   const applyChanges = async () => {
     const contentToSave = selectedContent;
@@ -156,9 +155,9 @@ const MergeConflicts = () => {
               ...item.content,
               conflicted: currentContent?.conflicted
                 ? await db.vault.decryptContent(
-                  currentContent?.conflicted as EncryptedContentItem,
-                  password
-                )
+                    currentContent?.conflicted as EncryptedContentItem,
+                    password
+                  )
                 : undefined
             } as UnencryptedContentItem;
 
@@ -183,9 +182,9 @@ const MergeConflicts = () => {
                     ...item.content,
                     conflicted: currentContent?.conflicted
                       ? await db.vault.decryptContent(
-                        currentContent?.conflicted as EncryptedContentItem,
-                        password
-                      )
+                          currentContent?.conflicted as EncryptedContentItem,
+                          password
+                        )
                       : undefined
                   } as UnencryptedContentItem;
 
@@ -386,7 +385,7 @@ const MergeConflicts = () => {
           paddingTop: insets.top
         }}
       >
-        {keepScreenOn && <KeepAwake />}
+        <KeepAwake />
         {dialogVisible && (
           <BaseDialog visible={true}>
             <DialogContainer>

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

@@ -176,7 +176,6 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
         >
           <IconButton
             name="close"
-            testID="paywall-close"
             color={colors.primary.icon}
             onPress={() => {
               Navigation.navigate("FluidPanelsView", {});

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

@@ -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"

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/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/link-note/index.tsx

@@ -28,7 +28,7 @@ import { NativeEvents } from "@notesnook/editor-mobile/src/utils/native-events";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useRef, useState } from "react";
-import { ActivityIndicator, TextInput, View } from "react-native";
+import { TextInput, View } from "react-native";
 import { FlatList } from "react-native-actions-sheet";
 import { db } from "../../../common/database";
 import { useDBItem } from "../../../hooks/use-db-item";
@@ -40,8 +40,6 @@ import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
-import Navigation from "../../../services/navigation";
-import { useUserStore } from "../../../stores/use-user-store";
 
 const ListNoteItem = ({
   id,
@@ -120,8 +118,8 @@ const ListBlockItem = ({
           {item?.content.length > 200
             ? item?.content.slice(0, 200) + "..."
             : !item.content || item.content.trim() === ""
-              ? strings.linkNoteEmptyBlock()
-              : item.content}
+            ? strings.linkNoteEmptyBlock()
+            : item.content}
         </Paragraph>
 
         <View
@@ -160,7 +158,6 @@ export default function LinkNote(props: {
 
   const [selectedNote, setSelectedNote] = useState<Note>();
   const [selectedNodeId, setSelectedNodeId] = useState<string>();
-  const [blocksLoading, setBlocksLoading] = useState(false);
 
   useEffect(() => {
     db.notes.all.sorted(db.settings.getGroupOptions("notes")).then((notes) => {
@@ -209,12 +206,10 @@ export default function LinkNote(props: {
 
   const onSelectNote = async (note: Note) => {
     setSelectedNote(note);
-    setBlocksLoading(true);
     inputRef.current?.clear();
     setTimeout(async () => {
       nodesRef.current = await db.notes.contentBlocks(note.id);
       setNodes(nodesRef.current);
-      setBlocksLoading(false);
     });
     // Fetch and set note's nodes.
   };
@@ -229,7 +224,6 @@ export default function LinkNote(props: {
     <View
       style={{
         paddingHorizontal: DefaultAppStyles.GAP,
-        paddingBottom: DefaultAppStyles.GAP,
         minHeight: "100%",
         maxHeight: "100%"
       }}
@@ -336,42 +330,28 @@ export default function LinkNote(props: {
           windowSize={3}
           keyExtractor={(item) => item.id}
           ListEmptyComponent={
-            !blockLinking || blocksLoading ? (
-              <ActivityIndicator size={25} color={colors.primary.accent} />
-            ) : !blockLinking.isAllowed ? (
-              <View
+            <View
+              style={{
+                gap: DefaultAppStyles.GAP_VERTICAL,
+                backgroundColor: colors.secondary.background,
+                padding: DefaultAppStyles.GAP,
+                borderRadius: defaultBorderRadius,
+                borderWidth: 0.5,
+                borderColor: colors.secondary.border,
+                alignItems: "center"
+              }}
+            >
+              <Paragraph color={colors.secondary.paragraph}>
+                {blockLinking?.error}
+              </Paragraph>
+              <Button
+                title={strings.upgradePlan()}
                 style={{
-                  gap: DefaultAppStyles.GAP_VERTICAL,
-                  backgroundColor: colors.secondary.background,
-                  padding: DefaultAppStyles.GAP,
-                  borderRadius: defaultBorderRadius,
-                  borderWidth: 0.5,
-                  borderColor: colors.secondary.border,
-                  alignItems: "center"
+                  width: "100%"
                 }}
-              >
-                <Paragraph color={colors.secondary.paragraph}>
-                  {blockLinking?.error}
-                </Paragraph>
-                <Button
-                  title={strings.upgradePlan()}
-                  style={{
-                    width: "100%"
-                  }}
-                  type="accent"
-                  onPress={() => {
-                    Navigation.navigate("PayWall", {
-                      context: useUserStore.getState().user
-                        ? "logged-in"
-                        : "logged-out",
-                      canGoBack: true
-                    });
-
-                    props.close?.();
-                  }}
-                />
-              </View>
-            ) : null
+                type="accent"
+              />
+            </View>
           }
           data={blockLinking?.isAllowed ? nodes : []}
         />

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, Note } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import Clipboard from "@react-native-clipboard/clipboard";
@@ -45,30 +45,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 { 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 +76,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 +104,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 +127,9 @@ const PublishNoteSheet = ({
         type: "error",
         context: "local"
       });
-    } finally {
-      setPublishLoading(false);
     }
+
+    setPublishLoading(false);
   };
   const setPublishLoading = (value: boolean) => {
     setPublishing(value);
@@ -197,29 +157,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 +247,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 +298,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 +357,7 @@ const PublishNoteSheet = ({
             </View>
           </TouchableOpacity>
 
-          {isFeatureAvailable?.isAllowed &&
-          !selfDestruct &&
-          monographMetadata &&
-          monographMetadata?.analytics?.totalViews > 0 ? (
+          {isFeatureAvailable?.isAllowed ? (
             <View
               style={{
                 flexDirection: "row",
@@ -456,9 +381,6 @@ const PublishNoteSheet = ({
                   }}
                 >
                   <Paragraph size={AppFontSize.sm}>{strings.views()}</Paragraph>
-                  <Paragraph>
-                    {monographMetadata?.analytics?.totalViews || 0}
-                  </Paragraph>
                 </View>
               </View>
             </View>

apps/mobile/app/components/sheets/recovery-key/index.jsx

@@ -21,7 +21,7 @@ import { sanitizeFilename } from "@notesnook/common";
 import { strings } from "@notesnook/intl";
 import Clipboard from "@react-native-clipboard/clipboard";
 import React, { createRef } from "react";
-import { PermissionsAndroid, Platform, View } from "react-native";
+import { Platform, View } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import FileViewer from "react-native-file-viewer";
 import * as ScopedStorage from "react-native-scoped-storage";
@@ -45,7 +45,6 @@ import SheetWrapper from "../../ui/sheet";
 import { QRCode } from "../../ui/svg/lazy";
 import Paragraph from "../../ui/typography/paragraph";
 import { DefaultAppStyles } from "../../../utils/styles";
-import { CameraRoll } from "@react-native-camera-roll/camera-roll";
 
 class RecoveryKeySheet extends React.Component {
   constructor(props) {
@@ -109,14 +108,22 @@ class RecoveryKeySheet extends React.Component {
   saveQRCODE = async () => {
     this.svg.current?.toDataURL(async (data) => {
       try {
-        let fileName =
-          "nn_" + this.user.email + "_recovery_key_qrcode" + "_" + Date.now();
+        let path;
+        let fileName = "nn_" + this.user.email + "_recovery_key_qrcode";
         fileName = sanitizeFilename(fileName, { replacement: "_" });
         fileName = fileName + ".png";
 
-        const path = RNFetchBlob.fs.dirs.CacheDir + fileName;
-        await RNFetchBlob.fs.writeFile(path, data, "base64");
-        await CameraRoll.saveToCameraRoll(`file://` + path);
+        if (Platform.OS === "android") {
+          await ScopedStorage.createDocument(
+            fileName,
+            "image/png",
+            data,
+            "base64"
+          );
+        } else {
+          path = await filesystem.checkAndCreateDir("/");
+          await RNFetchBlob.fs.writeFile(path + fileName, data, "base64");
+        }
         ToastManager.show({
           heading: strings.recoveryKeyQRCodeSaved(),
           type: "success",

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

@@ -104,8 +104,8 @@ const ListBlockItem = ({
           {item?.content.length > 200
             ? item?.content.slice(0, 200) + "..."
             : !item.content || item.content.trim() === ""
-              ? strings.linkNoteEmptyBlock()
-              : item.content}
+            ? strings.linkNoteEmptyBlock()
+            : item.content}
         </Paragraph>
 
         <View
@@ -202,7 +202,7 @@ const ListNoteItem = ({
   items: VirtualizedGrouping<Note> | undefined;
   onSelect: (item: Note, blockId?: string) => void;
   reference: Note;
-  internalLinks: MutableRefObject<InternalLink[] | undefined>;
+  internalLinks: MutableRefObject<InternalLink<"note">[] | undefined>;
   listType: "linkedNotes" | "referencedIn";
 }) => {
   const { colors } = useThemeColors();
@@ -231,10 +231,7 @@ const ListNoteItem = ({
             internalLinks.current = await db.notes.internalLinks(reference.id);
           }
           const noteLinks = internalLinks.current.filter(
-            (link) =>
-              link.id === item.id &&
-              link.type === "note" &&
-              link.params?.blockId
+            (link) => link.id === item.id && link.params?.blockId
           );
 
           if (noteLinks.length) {
@@ -242,10 +239,7 @@ const ListNoteItem = ({
 
             setLinkedBlocks(
               blocks.filter((block) =>
-                noteLinks.find(
-                  (link) =>
-                    link.type === "note" && block.id === link.params?.blockId
-                )
+                noteLinks.find((link) => block.id === link.params?.blockId)
               )
             );
           }
@@ -410,7 +404,7 @@ export const ReferencesList = ({ item, close }: ReferencesListProps) => {
   const { colors } = useThemeColors();
   const [items, setItems] = useState<VirtualizedGrouping<Note>>();
   const hasNoRelations = !items || items?.placeholders?.length === 0;
-  const internalLinks = useRef<InternalLink[]>([]);
+  const internalLinks = useRef<InternalLink<"note">[]>([]);
 
   useEffect(() => {
     db.relations?.[tab === 0 ? "from" : "to"]?.(

apps/mobile/app/components/sheets/relations-list/index.tsx

@@ -0,0 +1,162 @@
+/*
+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 { Item, ItemReference, VirtualizedGrouping } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
+import React, { RefObject, useEffect, useState } from "react";
+import { View } from "react-native";
+import { ActionSheetRef } from "react-native-actions-sheet";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { db } from "../../../common/database";
+import {
+  PresentSheetOptions,
+  presentSheet
+} from "../../../services/event-manager";
+import { useRelationStore } from "../../../stores/use-relation-store";
+import { AppFontSize } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
+import DialogHeader from "../../dialog/dialog-header";
+import List from "../../list";
+import SheetProvider from "../../sheet-provider";
+import { Button, ButtonProps } from "../../ui/button";
+import Paragraph from "../../ui/typography/paragraph";
+
+type RelationsListProps = {
+  actionSheetRef: RefObject<ActionSheetRef>;
+  close?: () => void;
+  update?: (options: PresentSheetOptions) => void;
+  item: { id: string; type: string };
+  referenceType: string;
+  relationType: "to" | "from";
+  title: string;
+  button?: ButtonProps;
+  onAdd: () => void;
+};
+
+const IconsByType = {
+  reminder: "bell"
+};
+
+export const RelationsList = ({
+  actionSheetRef,
+  item,
+  referenceType,
+  relationType,
+  title,
+  button,
+  onAdd
+}: RelationsListProps) => {
+  const updater = useRelationStore((state) => state.updater);
+  const { colors } = useThemeColors();
+  const [items, setItems] = useState<VirtualizedGrouping<Item>>();
+  const hasNoRelations = !items || items?.placeholders?.length === 0;
+
+  useEffect(() => {
+    db.relations?.[relationType]?.(
+      { id: item?.id, type: item?.type } as ItemReference,
+      referenceType as any
+    )
+      .selector.sorted({
+        sortBy: "dateEdited",
+        sortDirection: "desc"
+      })
+      .then((grouped) => {
+        setTimeout(() => {
+          setItems(grouped);
+        }, 300);
+      });
+  }, [relationType, referenceType, item?.id, item?.type, updater]);
+
+  return (
+    <View style={{ paddingHorizontal: DefaultAppStyles.GAP, height: "100%" }}>
+      <SheetProvider context="local" />
+      <DialogHeader
+        title={title}
+        button={hasNoRelations ? undefined : button}
+      />
+      {hasNoRelations ? (
+        <View
+          style={{
+            height: "85%",
+            justifyContent: "center",
+            alignItems: "center"
+          }}
+        >
+          <Icon
+            name={IconsByType[referenceType as keyof typeof IconsByType]}
+            size={60}
+            color={colors.primary.icon}
+          />
+          <Paragraph>{strings.noLinksFound()}</Paragraph>
+          <Button
+            onPress={() => {
+              onAdd?.();
+            }}
+            fontSize={AppFontSize.sm}
+            //  width="100%"
+            type="inverted"
+            icon="plus"
+            title={strings.addItem(
+              referenceType as "notebook" | "tag" | "reminder" | "note"
+            )}
+          />
+        </View>
+      ) : (
+        <List
+          data={items}
+          loading={false}
+          dataType={referenceType as any}
+          isRenderedInActionSheet={true}
+        />
+      )}
+    </View>
+  );
+};
+
+RelationsList.present = ({
+  reference,
+  referenceType,
+  relationType,
+  title,
+  button,
+  onAdd
+}: {
+  reference: { id: string; type: string };
+  referenceType: string;
+  relationType: "to" | "from";
+  title: string;
+  button?: ButtonProps;
+  onAdd: () => void;
+}) => {
+  presentSheet({
+    component: (ref, close, update) => (
+      <RelationsList
+        actionSheetRef={ref}
+        close={close}
+        update={update}
+        item={reference}
+        referenceType={referenceType}
+        relationType={relationType}
+        title={title}
+        button={button}
+        onAdd={onAdd}
+      />
+    )
+  });
+};

apps/mobile/app/components/sheets/reminder-notify/index.tsx

@@ -181,7 +181,6 @@ export default function ReminderNotify({
             data={references}
             loading={false}
             dataType="note"
-            groupType="notes"
             isRenderedInActionSheet={true}
           />
         </View>

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

@@ -18,7 +18,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import {
-  GroupingByIdKey,
   GroupingKey,
   GroupOptions,
   ItemType,
@@ -28,10 +27,7 @@ import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useState } from "react";
 import { View } from "react-native";
-import {
-  getGroupOptions,
-  setGroupOptionsById
-} from "../../../hooks/use-group-options";
+import { db } from "../../../common/database";
 import { eSendEvent } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { RouteName } from "../../../stores/use-navigation-store";
@@ -47,24 +43,29 @@ import { Pressable } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 const Sort = ({
-  dataType,
+  type,
   screen,
-  hideGroupOptions,
-  group: groupType,
-  groupId,
-  type
+  hideGroupOptions
 }: {
-  dataType: ItemType;
-  type?: GroupingByIdKey;
+  type: ItemType;
   screen?: RouteName;
-  group: GroupingKey;
   hideGroupOptions?: boolean;
-  groupId?: string;
 }) => {
   const { colors } = useThemeColors();
 
+  const groupType =
+    screen === "Archive"
+      ? "archive"
+      : screen === "Search"
+      ? "search"
+      : screen === "Notes"
+      ? "home"
+      : screen === "Trash" || type === "trash"
+      ? "trash"
+      : ((type + "s") as GroupingKey);
+
   const [groupOptions, setGroupOptions] = useState(
-    getGroupOptions(groupType, groupId, type)
+    db.settings.getGroupOptions(groupType)
   );
 
   const getSortButtonTitle = () => {
@@ -87,17 +88,16 @@ const Sort = ({
   };
 
   const updateGroupOptions = async (_groupOptions: GroupOptions) => {
-    console.log(groupId, type);
-    setGroupOptionsById(groupType, _groupOptions, groupId, type);
+    await db.settings.setGroupOptions(groupType, _groupOptions);
     setGroupOptions(_groupOptions);
     setTimeout(() => {
       if (screen) Navigation.queueRoutesForUpdate(screen);
-      if (dataType === "notebook") {
+      if (type === "notebook") {
         useNotebookStore.getState().refresh();
-      } else if (dataType === "tag") {
+      } else if (type === "tag") {
         useTagStore.getState().refresh();
       }
-      eSendEvent(eGroupOptionsUpdated, groupType, groupId, type);
+      eSendEvent(eGroupOptionsUpdated, groupType);
       eSendEvent(refreshNotesPage);
     }, 1);
   };
@@ -157,15 +157,10 @@ const Sort = ({
       >
         {Object.keys(SORT).map((item) => {
           const sortOptionVisibility = {
-            dateCreated: groupType !== "trash",
-            relevance: groupType === "search",
-            dueDate: groupType === "reminders",
-            dateModified: groupType === "reminders" || groupType === "tags",
-            dateEdited:
-              groupType !== "tags" &&
-              groupType !== "reminders" &&
-              groupType !== "trash",
-            dateDeleted: groupType === "trash"
+            relevance: screen === "Search",
+            dueDate: screen === "Reminders",
+            dateModified: screen === "Tags" || screen === "Reminders",
+            dateEdited: screen !== "Tags" && screen !== "Reminders"
           };
 
           // Check if this sort option should be skipped for the current screen
@@ -193,7 +188,10 @@ const Sort = ({
               onPress={async () => {
                 const _groupOptions: GroupOptions = {
                   ...groupOptions,
-                  sortBy: item as SortOptions["sortBy"]
+                  sortBy:
+                    type === "trash"
+                      ? "dateDeleted"
+                      : (item as SortOptions["sortBy"])
                 };
                 await updateGroupOptions(_groupOptions);
               }}

apps/mobile/app/components/side-menu/index.tsx

@@ -433,7 +433,7 @@ const TabBar = (props: SimpleTabBarProps) => {
                       name="plus"
                       testID="sidebar-add-button"
                       size={AppFontSize.lg - 2}
-                      top={10}
+                       top={10}
                       color={colors.primary.icon}
                       onPress={async () => {
                         if (props.navigationState.index === 1) {
@@ -493,16 +493,11 @@ const TabBar = (props: SimpleTabBarProps) => {
                         presentSheet({
                           component: (
                             <Sort
-                              dataType={
+                              type={
                                 props.navigationState.index === 1
                                   ? "notebook"
                                   : "tag"
                               }
-                              group={
-                                props.navigationState.index === 1
-                                  ? "notebooks"
-                                  : "tags"
-                              }
                               hideGroupOptions
                             />
                           )

apps/mobile/app/components/side-menu/menu-item.tsx

@@ -156,8 +156,7 @@ export function MenuItem({
         style={{
           flexDirection: "row",
           alignItems: "center",
-          gap: DefaultAppStyles.GAP_SMALL,
-          flexShrink: 1
+          gap: DefaultAppStyles.GAP_SMALL
         }}
       >
         {renderIcon ? (
@@ -186,7 +185,6 @@ export function MenuItem({
             isFocused ? colors.selected.paragraph : colors.primary.paragraph
           }
           size={AppFontSize.sm}
-          style={{ flexShrink: 1 }}
         >
           {item.title}
         </Paragraph>
@@ -197,9 +195,6 @@ export function MenuItem({
         color={
           isFocused ? colors.primary.paragraph : colors.secondary.paragraph
         }
-        style={{
-          marginLeft: DefaultAppStyles.GAP_SMALL
-        }}
       >
         {menuItemCount}
       </Paragraph>

apps/mobile/app/components/side-menu/notebook-item.tsx

@@ -72,7 +72,7 @@ export const NotebookItem = ({
   const notebook = item.notebook;
   const isFocused = focused;
   const { totalNotes, getTotalNotes } = useTotalNotes("notebook");
-  const updater = useRelationStore((state) => state.updater);
+  const updater = useRelationStore(state => state.updater);
   const getTotalNotesRef = React.useRef(getTotalNotes);
   getTotalNotesRef.current = getTotalNotes;
   const { colors } = useThemeColors();
@@ -101,8 +101,8 @@ export const NotebookItem = ({
           item.depth === 0
             ? undefined
             : item.depth < 6
-              ? 15 * item.depth
-              : 15 * 5,
+            ? 15 * item.depth
+            : 15 * 5,
         width: "100%",
         marginTop: 2,
         opacity: item.disabled ? 0.5 : 1
@@ -162,8 +162,7 @@ export const NotebookItem = ({
         <View
           style={{
             flexDirection: "row",
-            alignItems: "center",
-            flexShrink: 1
+            alignItems: "center"
           }}
         >
           <IconButton
@@ -192,8 +191,8 @@ export const NotebookItem = ({
               !item.hasChildren || disableExpand
                 ? "book-outline"
                 : expanded
-                  ? "chevron-down"
-                  : "chevron-right"
+                ? "chevron-down"
+                : "chevron-right"
             }
           />
 
@@ -202,7 +201,6 @@ export const NotebookItem = ({
               isFocused ? colors.selected.paragraph : colors.primary.paragraph
             }
             size={AppFontSize.sm}
-            style={{ flexShrink: 1 }}
           >
             {notebook?.title}
           </Paragraph>
@@ -213,8 +211,7 @@ export const NotebookItem = ({
             gap: DefaultAppStyles.GAP_SMALL,
             flexDirection: "row",
             alignItems: "center",
-            justifyContent: "center",
-            marginLeft: DefaultAppStyles.GAP_SMALL
+            justifyContent: "center"
           }}
         >
           {selectionEnabled ? (

apps/mobile/app/components/side-menu/side-menu-tags.tsx

@@ -56,7 +56,7 @@ const TagItem = (props: {
   const totalNotes = useTotalNotes("tag");
   const totalNotesRef = React.useRef(totalNotes);
   totalNotesRef.current = totalNotes;
-  const updater = useRelationStore((state) => state.updater);
+  const updater = useRelationStore(state => state.updater);
 
   useEffect(() => {
     if (item?.id) {
@@ -67,8 +67,6 @@ const TagItem = (props: {
   return (
     <View
       style={{
-        minHeight: 35,
-        justifyContent: "center",
         paddingHorizontal: DefaultAppStyles.GAP,
         marginTop:
           (props.id as number) === 0 ? DefaultAppStyles.GAP_VERTICAL : 2
@@ -125,8 +123,7 @@ const TagItem = (props: {
           <View
             style={{
               flexDirection: "row",
-              alignItems: "center",
-              flexShrink: 1
+              alignItems: "center"
             }}
           >
             <View
@@ -149,9 +146,6 @@ const TagItem = (props: {
                 isFocused ? colors.selected.paragraph : colors.primary.paragraph
               }
               size={AppFontSize.sm}
-              style={{
-                flexShrink: 1
-              }}
             >
               {item?.title}
             </Paragraph>
@@ -179,9 +173,6 @@ const TagItem = (props: {
                 <Paragraph
                   size={AppFontSize.xxs}
                   color={colors.secondary.paragraph}
-                  style={{
-                    marginLeft: DefaultAppStyles.GAP_SMALL
-                  }}
                 >
                   {totalNotes.totalNotes(item?.id)}
                 </Paragraph>

apps/mobile/app/components/ui/expiry-date/index.tsx

@@ -1,71 +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 Affero 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 Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-import { Note } from "@notesnook/core";
-import { useThemeColors } from "@notesnook/theme";
-import React from "react";
-import { TextStyle, ViewStyle } from "react-native";
-import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
-import { DefaultAppStyles } from "../../../utils/styles";
-import { Button, ButtonProps } from "../button";
-import dayjs from "dayjs";
-
-export const ExpiryDate = ({
-  note,
-  color,
-  style,
-  textStyle,
-  iconSize,
-  short,
-  ...props
-}: {
-  note: Note;
-  color?: string;
-  style?: ViewStyle;
-  textStyle?: TextStyle;
-  iconSize?: number;
-  short?: boolean;
-} & ButtonProps) => {
-  const { colors } = useThemeColors();
-  const expiryValue = note?.expiryDate?.value;
-  if (!expiryValue) return null;
-
-  const formattedDate = dayjs(expiryValue).format("DD MMM YYYY");
-
-  return (
-    <Button
-      title={formattedDate}
-      icon="bomb"
-      fontSize={textStyle?.fontSize || AppFontSize.xs}
-      iconSize={iconSize || AppFontSize.sm}
-      type="secondary"
-      textStyle={{
-        marginRight: 0,
-        ...textStyle
-      }}
-      style={{
-        height: "auto",
-        borderRadius: defaultBorderRadius,
-        borderColor: colors.primary.border,
-        paddingHorizontal: DefaultAppStyles.GAP_SMALL,
-        ...(style as ViewStyle)
-      }}
-      {...props}
-    />
-  );
-};

apps/mobile/app/components/ui/input/form-input.tsx

@@ -1,425 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import { useThemeColors } from "@notesnook/theme";
-import React, { RefObject, useEffect, useMemo, useState } from "react";
-import {
-  ColorValue,
-  TextInput,
-  TextInputProps,
-  TextStyle,
-  TouchableOpacity,
-  View,
-  ViewStyle
-} from "react-native";
-import isEmail from "validator/lib/isEmail";
-import isURL from "validator/lib/isURL";
-import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
-import { DefaultAppStyles } from "../../../utils/styles";
-import AppIcon from "../AppIcon";
-import { IconButton } from "../icon-button";
-import Paragraph from "../typography/paragraph";
-
-export type FormValues = Record<string, string>;
-export type FormErrors = Partial<Record<string, string>>;
-export type FieldValidator = (
-  value: string,
-  values: FormValues
-) => string | undefined;
-export type ValidationSchema = Partial<Record<string, FieldValidator[]>>;
-
-export interface FormRef {
-  values: FormValues;
-  errors: FormErrors;
-  setValue: (name: string, value: string) => void;
-  getValue: (name: string) => string;
-  getValues: () => FormValues;
-  setError: (name: string, error?: string) => void;
-  getError: (name: string) => string | undefined;
-  clearErrors: () => void;
-  registerField: (name: string, validators?: FieldValidator[]) => void;
-  unregisterField: (name: string) => void;
-  validateField: (name: string) => string | undefined;
-  validate: () => boolean;
-  subscribe: (listener: () => void) => () => void;
-  subscribeChange: (listener: () => void) => () => void;
-}
-
-export function createFormRef(initialValues: FormValues = {}): FormRef {
-  const listeners = new Set<() => void>();
-  const changeListeners = new Set<() => void>();
-  const values: FormValues = { ...initialValues };
-  const errors: FormErrors = {};
-  const schema: ValidationSchema = {};
-
-  const notify = () => {
-    listeners.forEach((listener) => listener());
-  };
-
-  const notifyChange = () => {
-    changeListeners.forEach((listener) => listener());
-  };
-
-  return {
-    values,
-    errors,
-    setValue(name, value) {
-      values[name] = value;
-      if (errors[name]) {
-        delete errors[name];
-        notify();
-      }
-      notifyChange();
-    },
-    getValue(name) {
-      return values[name] ?? "";
-    },
-    getValues() {
-      return { ...values };
-    },
-    setError(name, error) {
-      if (!error) {
-        delete errors[name];
-      } else {
-        errors[name] = error;
-      }
-      notify();
-    },
-    getError(name) {
-      return errors[name];
-    },
-    clearErrors() {
-      Object.keys(errors).forEach((key) => delete errors[key]);
-      notify();
-      notifyChange();
-    },
-    registerField(name, validators = []) {
-      schema[name] = validators;
-      if (values[name] === undefined) values[name] = "";
-    },
-    unregisterField(name) {
-      delete schema[name];
-      delete errors[name];
-      notify();
-    },
-    validateField(name) {
-      const fieldValidators = schema[name] || [];
-      const value = values[name] ?? "";
-      for (const validator of fieldValidators) {
-        const error = validator(value, values);
-        if (error) {
-          errors[name] = error;
-          notify();
-          return error;
-        }
-      }
-      delete errors[name];
-      notify();
-      return undefined;
-    },
-    validate() {
-      const nextErrors = validateForm(values, schema);
-      Object.keys(errors).forEach((key) => delete errors[key]);
-      Object.keys(nextErrors).forEach((key) => {
-        errors[key] = nextErrors[key];
-      });
-      notify();
-      return !hasFormErrors(nextErrors);
-    },
-    subscribe(listener) {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    },
-    subscribeChange(listener) {
-      changeListeners.add(listener);
-      return () => {
-        changeListeners.delete(listener);
-      };
-    }
-  };
-}
-
-export function validateForm(
-  values: FormValues,
-  schema: ValidationSchema
-): FormErrors {
-  const errors: FormErrors = {};
-
-  Object.keys(schema).forEach((field) => {
-    const fieldValidators = schema[field] || [];
-    const value = values[field] ?? "";
-    for (const validator of fieldValidators) {
-      const error = validator(value, values);
-      if (error) {
-        errors[field] = error;
-        break;
-      }
-    }
-  });
-
-  return errors;
-}
-
-export function hasFormErrors(errors: FormErrors) {
-  return Object.keys(errors).length > 0;
-}
-
-export const validators = {
-  required:
-    (message = "This field is required") =>
-    (value: string) =>
-      value?.trim() ? undefined : message,
-
-  email:
-    (message = "Please enter a valid email") =>
-    (value: string) =>
-      !value?.trim() || isEmail(value.trim()) ? undefined : message,
-
-  minLength: (length: number, message?: string) => (value: string) =>
-    !value || value.length >= length
-      ? undefined
-      : message || `Must be at least ${length} characters`,
-
-  url:
-    (message = "Please enter a valid URL") =>
-    (value: string) =>
-      !value?.trim() || isURL(value.trim(), { allow_underscores: true })
-        ? undefined
-        : message,
-
-  matchField:
-    (fieldName: string, message = "Values do not match") =>
-    (value: string, values: FormValues) =>
-      value === values[fieldName] ? undefined : message
-};
-
-interface FormInputProps extends TextInputProps {
-  name: string;
-  formRef: RefObject<FormRef>;
-  validators?: FieldValidator[];
-  fwdRef?: RefObject<TextInput | null>;
-  loading?: boolean;
-  error?: string;
-  customColor?: ColorValue;
-  marginBottom?: number;
-  marginRight?: number;
-  button?: {
-    icon: string;
-    color: ColorValue;
-    onPress: () => void;
-    testID?: string;
-    size?: number;
-  };
-  buttons?: React.ReactNode;
-  buttonLeft?: React.ReactNode;
-  height?: number;
-  fontSize?: number;
-  inputStyle?: TextInputProps["style"];
-  containerStyle?: ViewStyle;
-  wrapperStyle?: ViewStyle;
-  errorStyle?: TextStyle;
-}
-
-export function FormInput({
-  name,
-  formRef,
-  validators: fieldValidators = [],
-  fwdRef,
-  loading,
-  error,
-  secureTextEntry,
-  customColor,
-  marginBottom = 10,
-  marginRight,
-  button,
-  buttonLeft,
-  buttons,
-  height = 45,
-  fontSize = AppFontSize.sm,
-  inputStyle = {},
-  containerStyle = {},
-  wrapperStyle = {},
-  onFocus,
-  onBlur,
-  onPress,
-  onChangeText,
-  errorStyle,
-  ...restProps
-}: FormInputProps) {
-  const { colors, isDark } = useThemeColors();
-  const [focused, setFocused] = useState(false);
-  const [secureEntry, setSecureEntry] = useState(true);
-  const [, setVersion] = useState(0);
-
-  useEffect(() => {
-    const form = formRef.current;
-    form.registerField(name, fieldValidators);
-    const unsubscribe = form.subscribe(() => {
-      setVersion((v) => v + 1);
-    });
-
-    return () => {
-      unsubscribe();
-      form.unregisterField(name);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [formRef, name]);
-
-  const value = formRef.current.getValue(name);
-  const fieldError = error || formRef.current.getError(name);
-
-  const borderColor = useMemo(() => {
-    if (fieldError) return colors.error.accent;
-    if (focused) return customColor || colors.selected.border;
-    return colors.primary.border;
-  }, [colors, customColor, fieldError, focused]);
-
-  const style: ViewStyle = {
-    borderWidth: 1,
-    borderRadius: defaultBorderRadius,
-    borderColor,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingHorizontal: DefaultAppStyles.GAP,
-    ...containerStyle
-  };
-
-  const textStyle: TextInputProps["style"] = {
-    paddingHorizontal: 0,
-    fontSize,
-    color:
-      onPress && loading ? colors.primary.accent : colors.primary.paragraph,
-    flexGrow: 1,
-    flexShrink: 1,
-    paddingBottom: DefaultAppStyles.GAP_VERTICAL,
-    paddingTop: DefaultAppStyles.GAP_VERTICAL,
-    fontFamily: "Inter-Regular",
-    ...(inputStyle as ViewStyle)
-  };
-
-  const handleChangeText = (nextValue: string) => {
-    formRef.current.setValue(name, nextValue);
-    onChangeText?.(nextValue);
-  };
-
-  return (
-    <View
-      importantForAccessibility="yes"
-      style={{
-        marginBottom,
-        marginRight,
-        ...wrapperStyle
-      }}
-    >
-      <TouchableOpacity
-        disabled={!loading}
-        onPress={onPress}
-        activeOpacity={1}
-        style={style}
-      >
-        {buttonLeft}
-
-        <TextInput
-          {...restProps}
-          defaultValue={value}
-          ref={fwdRef}
-          editable={!loading && restProps.editable !== false}
-          onChangeText={handleChangeText}
-          onFocus={(e) => {
-            setFocused(true);
-            onFocus?.(e);
-          }}
-          onBlur={(e) => {
-            setFocused(false);
-            onBlur?.(e);
-          }}
-          keyboardAppearance={isDark ? "dark" : "light"}
-          style={textStyle}
-          secureTextEntry={secureTextEntry && secureEntry}
-          placeholderTextColor={colors.primary.placeholder}
-        />
-
-        <View
-          style={{
-            flexDirection: "row",
-            justifyContent: "center",
-            height: 35 > height ? height : 35,
-            alignItems: "center"
-          }}
-        >
-          {secureTextEntry && (
-            <IconButton
-              name="eye"
-              size={20}
-              top={10}
-              bottom={10}
-              onPress={() => {
-                fwdRef?.current?.blur();
-                setSecureEntry(!secureEntry);
-              }}
-              style={{
-                width: 25,
-                marginLeft: 5
-              }}
-              color={
-                secureEntry ? colors.secondary.icon : colors.primary.accent
-              }
-            />
-          )}
-
-          {buttons}
-
-          {button && (
-            <IconButton
-              testID={button.testID}
-              name={button.icon}
-              size={button.size || AppFontSize.xl}
-              top={10}
-              bottom={10}
-              onPress={button.onPress}
-              color={button.color}
-              style={{
-                marginRight: -8
-              }}
-            />
-          )}
-        </View>
-      </TouchableOpacity>
-
-      {fieldError ? (
-        <Paragraph
-          size={AppFontSize.xs}
-          style={[{ marginTop: 5, color: colors.error.icon }, errorStyle]}
-        >
-          <AppIcon
-            color={colors.error.accent}
-            name="alert-circle-outline"
-            size={AppFontSize.sm - 1}
-          />{" "}
-          {fieldError}
-        </Paragraph>
-      ) : null}
-    </View>
-  );
-}
-
-export default FormInput;

apps/mobile/app/components/ui/input/index.tsx

@@ -121,8 +121,8 @@ const Input = ({
   const color = error
     ? colors.error.border
     : focus
-      ? customColor || colors.selected.border
-      : colors.primary.border;
+    ? customColor || colors.selected.border
+    : colors.primary.border;
 
   const validate = async (value: string) => {
     if (!validationType) return;

apps/mobile/app/components/ui/notice/index.tsx

@@ -48,6 +48,7 @@ export const Notice = ({
     <View
       style={{
         paddingHorizontal: DefaultAppStyles.GAP,
+        paddingLeft: 5,
         paddingVertical: DefaultAppStyles.GAP_VERTICAL,
         flexDirection: "row",
         backgroundColor: colors.secondary.background,
@@ -62,9 +63,6 @@ export const Notice = ({
         size={isSmall ? AppFontSize.md + 2 : AppFontSize.xxl}
         name={type}
         color={type === "alert" ? colors.error.icon : colors.primary.accent}
-        style={{
-          marginTop: isSmall ? 3 : 5
-        }}
       />
       <Paragraph
         style={{

apps/mobile/app/components/ui/pressable/index.tsx

@@ -268,8 +268,8 @@ export const Pressable = ({
   const opacity = customOpacity
     ? customOpacity
     : type === "accent"
-      ? 1
-      : colorOpacity;
+    ? 1
+    : colorOpacity;
   const alpha = customAlpha ? customAlpha : isDark ? 0.03 : -0.03;
   const { fontScale } = useWindowDimensions();
   const growFactor = 1 + (fontScale - 1) / 8;
@@ -325,10 +325,7 @@ export const Pressable = ({
       ref={fwdRef}
       disabled={disabled}
       hitSlop={hitSlop}
-      onPress={(e) => {
-        if (disabled) return;
-        onPress?.(e);
-      }}
+      onPress={onPress}
       onLongPress={onLongPress}
       style={getStyle}
     >

apps/mobile/app/hooks/use-actions.tsx

@@ -45,11 +45,11 @@ import ExportNotesSheet from "../components/sheets/export-notes";
 import PaywallSheet from "../components/sheets/paywall";
 import PublishNoteSheet from "../components/sheets/publish-note";
 import { ReferencesList } from "../components/sheets/references";
+import { RelationsList } from "../components/sheets/relations-list/index";
 import { useSideBarDraggingStore } from "../components/side-menu/dragging-store";
 import { ButtonProps } from "../components/ui/button";
 import AddReminder from "../screens/add-reminder";
 import { useTabStore } from "../screens/editor/tiptap/use-tab-store";
-import RelationsList from "../screens/relations-list";
 import {
   eSendEvent,
   eSubscribeEvent,
@@ -69,11 +69,7 @@ import { useSelectionStore } from "../stores/use-selection-store";
 import { useSettingStore } from "../stores/use-setting-store";
 import { useTagStore } from "../stores/use-tag-store";
 import { useUserStore } from "../stores/use-user-store";
-import {
-  eCloseSheet,
-  eMenuItemUpdate,
-  eUpdateNoteInEditor
-} from "../utils/events";
+import { eCloseSheet, eUpdateNoteInEditor } from "../utils/events";
 import { deleteItems } from "../utils/functions";
 import { convertNoteToText } from "../utils/note-to-text";
 import { NotesnookModule } from "../utils/notesnook-module";
@@ -112,7 +108,6 @@ export type ActionId =
   | "attachments"
   | "history"
   | "copy-link"
-  | "copy-id"
   | "reminders"
   | "lock-unlock"
   | "publish"
@@ -127,8 +122,7 @@ export type ActionId =
   | "default-homepage"
   | "default-tag"
   | "launcher-shortcut"
-  | "expiry-date"
-  | "spell-check";
+  | "expiry-date";
 
 export type Action = {
   id: ActionId;
@@ -374,14 +368,7 @@ export const useActions = ({
       inputPlaceholder: strings.name(),
       defaultValue: item.title,
       positivePress: async (value) => {
-        if (!value || value.trim().length === 0) {
-          ToastManager.error(
-            new Error(strings.nameIsRequired()),
-            undefined,
-            "local"
-          );
-          return;
-        }
+        if (!value || value.trim().length === 0) return;
         await db.colors.add({
           id: item.id,
           title: value
@@ -790,12 +777,6 @@ export const useActions = ({
     const duplicateNote = async () => {
       await db.notes.duplicate(item.id);
       Navigation.queueRoutesForUpdate();
-      ToastManager.show({
-        heading: strings.noteDuplicated(),
-        type: "success",
-        context: "local"
-      });
-      await sleep(500);
       close();
     };
 
@@ -1021,28 +1002,6 @@ export const useActions = ({
         pro: true,
         activeColor: "orange"
       },
-      {
-        id: "spell-check",
-        title: strings.spellCheck(),
-        icon: "spellcheck",
-        isToggle: true,
-        checked: item.spellcheck,
-        onPress: async () => {
-          db.notes.spellcheck(!item.spellcheck, item.id);
-          const note = await db.notes.note(item.id);
-          if (note) {
-            setItem(note);
-            const tabs = useTabStore.getState().getTabsForNote(note.id);
-            tabs.forEach((tab) => {
-              useTabStore.getState().updateTab(tab.id, {
-                session: {
-                  spellCheckDisabled: !note.spellcheck
-                }
-              });
-            });
-          }
-        }
-      },
       {
         id: "remove-from-notebook",
         title: strings.removeFromNotebook(),
@@ -1062,14 +1021,27 @@ export const useActions = ({
         icon: "history",
         onPress: openHistory
       },
+      {
+        id: "copy-link",
+        title: strings.copyLink(),
+        icon: "link",
+        onPress: () => {
+          Clipboard.setString(createInternalLink("note", item.id));
+          ToastManager.show({
+            heading: strings.linkCopied(),
+            message: createInternalLink("note", item.id),
+            context: "local",
+            type: "success"
+          });
+        }
+      },
       {
         id: "reminders",
         title: strings.dataTypesPluralCamelCase.reminder(),
         icon: "clock-outline",
         onPress: async () => {
-          close();
           RelationsList.present({
-            item,
+            reference: item,
             referenceType: "reminder",
             relationType: "from",
             title: strings.dataTypesPluralCamelCase.reminder(),
@@ -1086,6 +1058,26 @@ export const useActions = ({
               }
               AddReminder.present(undefined, item);
               close();
+            },
+            button: {
+              type: "plain",
+              onPress: async () => {
+                if (features && !features.activeReminders.isAllowed) {
+                  ToastManager.show({
+                    type: "info",
+                    message: features.activeReminders.error,
+                    actionText: strings.upgrade(),
+                    func: () => {
+                      PaywallSheet.present(features.activeReminders);
+                    }
+                  });
+                  return;
+                }
+                AddReminder.present(undefined, item);
+                close();
+              },
+              icon: "plus",
+              iconSize: 20
             }
           });
         },
@@ -1129,9 +1121,8 @@ export const useActions = ({
         id: "add-reminder",
         title: strings.remindMe(),
         icon: "clock-plus-outline",
-        onPress: async () => {
+        onPress: () => {
           close();
-          await sleep(100);
           AddReminder.present(undefined, item);
         }
       },
@@ -1194,22 +1185,12 @@ export const useActions = ({
       },
       {
         id: "expiry-date",
-        title: item.expiryDate?.value
-          ? strings.unsetExpiry()
-          : strings.setExpiry(),
-        icon: item.expiryDate?.value ? "bomb-off" : "bomb",
+        title: item.expiryDate ? strings.unsetExpiry() : strings.setExpiry(),
+        icon: item.expiryDate ? "bomb-off" : "bomb",
         locked: !features?.expiringNotes?.isAllowed,
         onPress: async () => {
-          if (item.expiryDate?.value) {
+          if (item.expiryDate) {
             await db.notes.setExpiryDate(null, item.id);
-            Navigation.queueRoutesForUpdate();
-            eSendEvent(eMenuItemUpdate);
-            ToastManager.show({
-              message: strings.expiryDateRemoved(),
-              type: "success",
-              context: "local"
-            });
-
             setItem((await db.notes.note(item.id)) as Item);
           } else {
             if (features && !features?.expiringNotes.isAllowed) {
@@ -1233,14 +1214,6 @@ export const useActions = ({
                   onConfirm={async (date) => {
                     close?.();
                     await db.notes.setExpiryDate(date.getTime(), item.id);
-                    Navigation.queueRoutesForUpdate();
-                    eSendEvent(eMenuItemUpdate);
-                    ToastManager.show({
-                      message: strings.expiryDateSet(),
-                      type: "success",
-                      context: "local"
-                    });
-
                     setItem((await db.notes.note(item.id)) as Item);
                   }}
                 />
@@ -1321,45 +1294,5 @@ export const useActions = ({
     });
   }
 
-  if (
-    item.type === "tag" ||
-    item.type === "note" ||
-    item.type === "notebook" ||
-    item.type === "color"
-  ) {
-    actions.push({
-      id: "copy-link",
-      title: strings.copyLink(),
-      icon: "link",
-      onPress: () => {
-        const link = createInternalLink(item.type, item.id);
-        Clipboard.setHTML(`<a href="${link}" >${item.title}</a>`, link);
-        ToastManager.show({
-          heading: strings.linkCopied(),
-          message: link,
-          context: "local",
-          type: "success"
-        });
-      }
-    });
-  }
-
-  if (item.type === "notebook" || item.type === "tag") {
-    actions.push({
-      id: "copy-id",
-      title: strings.copyId(),
-      icon: "identifier",
-      onPress: () => {
-        Clipboard.setString(item.id);
-        ToastManager.show({
-          heading: strings.idCopied(),
-          message: item.id,
-          context: "local",
-          type: "success"
-        });
-      }
-    });
-  }
-
   return actions;
 };

apps/mobile/app/hooks/use-app-events.tsx

@@ -25,9 +25,7 @@ import {
   SYNC_CHECK_IDS,
   SubscriptionPlan,
   SyncStatusEvent,
-  User,
-  isInternalLink,
-  parseInternalLink
+  User
 } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import notifee from "@notifee/react-native";
@@ -97,7 +95,6 @@ import { BETA } from "../utils/constants";
 import {
   eAfterSync,
   eCloseSheet,
-  eCloseSimpleDialog,
   eEditorReset,
   eLoginSessionExpired,
   eOnLoadNote,
@@ -167,8 +164,6 @@ const onAppOpenedFromURL = async (event: {
 }) => {
   const url = event.url;
 
-  const parsedLink = isInternalLink(url) ? parseInternalLink(url) : undefined;
-
   try {
     if (url.startsWith("https://app.notesnook.com/account/verified")) {
       await onUserEmailVerified();
@@ -177,12 +172,8 @@ const onAppOpenedFromURL = async (event: {
       eSendEvent(eOnLoadNote, { newNote: true });
       fluidTabsRef.current?.goToPage("editor", false);
       return;
-    } else if (
-      parsedLink?.type === "note" ||
-      url.startsWith("https://app.notesnook.com/open_note?")
-    ) {
-      const id = parsedLink?.id || new URL(url).searchParams.get("id");
-
+    } else if (url.startsWith("https://app.notesnook.com/open_note?")) {
+      const id = new URL(url).searchParams.get("id");
       if (id) {
         const note = await db.notes.note(id);
         if (note) {
@@ -194,15 +185,13 @@ const onAppOpenedFromURL = async (event: {
         }
       }
     } else if (
-      (parsedLink?.type === "notebook" ||
-        url.startsWith("https://app.notesnook.com/open_notebook?")) &&
+      url.startsWith("https://app.notesnook.com/open_notebook?") &&
       !event.isInitialUrl
     ) {
-      const id = parsedLink?.id || new URL(url).searchParams.get("id");
+      const id = new URL(url).searchParams.get("id");
       if (id) {
         const notebook = await db.notebooks.notebook(id);
         if (notebook) {
-          fluidTabsRef.current?.goToPage("home");
           Navigation.navigate("Notebook", {
             id: notebook.id,
             canGoBack: true,
@@ -211,15 +200,13 @@ const onAppOpenedFromURL = async (event: {
         }
       }
     } else if (
-      (parsedLink?.type === "tag" ||
-        url.startsWith("https://app.notesnook.com/open_tag?")) &&
+      url.startsWith("https://app.notesnook.com/open_tag?") &&
       !event.isInitialUrl
     ) {
-      const id = parsedLink?.id || new URL(url).searchParams.get("id");
+      const id = new URL(url).searchParams.get("id");
       if (id) {
         const tag = await db.tags.tag(id);
         if (tag) {
-          fluidTabsRef.current?.goToPage("home");
           Navigation.navigate("TaggedNotes", {
             type: "tag",
             id: tag.id,
@@ -229,15 +216,13 @@ const onAppOpenedFromURL = async (event: {
         }
       }
     } else if (
-      (parsedLink?.type === "color" ||
-        url.startsWith("https://app.notesnook.com/open_color?")) &&
+      url.startsWith("https://app.notesnook.com/open_color?") &&
       !event.isInitialUrl
     ) {
-      const id = parsedLink?.id || new URL(url).searchParams.get("id");
+      const id = new URL(url).searchParams.get("id");
       if (id) {
         const color = await db.colors.color(id);
         if (color) {
-          fluidTabsRef.current?.goToPage("home");
           Navigation.navigate("ColoredNotes", {
             type: "color",
             id: color.id,
@@ -301,10 +286,7 @@ const onUserSubscriptionStatusChanged = async (
         subscription: subscription
       }
     });
-    eSendEvent(eCloseSimpleDialog);
-    setTimeout(() => {
-      Walkthrough.present("prouser", false, true);
-    }, 500);
+    Walkthrough.present("prouser", false, true);
   }
   await PremiumService.setPremiumStatus();
   useMessageStore.getState().setAnnouncement();
@@ -728,10 +710,6 @@ export const useAppEvents = () => {
   useEffect(() => {
     const subscriptions = [
       db.eventManager.subscribe(EVENTS.syncCheckStatus, onCheckSyncStatus),
-      db.eventManager.subscribe(EVENTS.userFetched, async () => {
-        const inboxEnabled = await db.user.hasInboxKeys();
-        useSettingStore.getState().setInboxEnabled(inboxEnabled);
-      }),
       db.eventManager.subscribe(EVENTS.syncAborted, onSyncAborted),
       db.eventManager.subscribe(EVENTS.appRefreshRequested, onSyncComplete),
       db.eventManager.subscribe(EVENTS.userLoggedOut, onLogout),
@@ -766,26 +744,6 @@ export const useAppEvents = () => {
       db.eventManager.subscribe(EVENTS.uploadCanceled, (data) => {
         useAttachmentStore.getState().setUploading(data);
       }),
-      db.eventManager.subscribeMulti(
-        [EVENTS.vaultAutoLocked, EVENTS.vaultLocked],
-        () => {
-          setTimeout(() => {
-            ToastManager.show({
-              message: strings.vaultLocked(),
-              type: "info"
-            });
-          }, 300);
-        },
-        undefined
-      ),
-      db.eventManager.subscribe(EVENTS.vaultUnlocked, () => {
-        setTimeout(() => {
-          ToastManager.show({
-            message: strings.vaultUnlocked(),
-            type: "info"
-          });
-        }, 300);
-      }),
       EV.subscribe(EVENTS.migrationStarted, (name) => {
         if (
           name !== "notesnook" ||
@@ -840,13 +798,7 @@ export const useAppEvents = () => {
 
     return () => {
       emitterSubscriptions.forEach((sub) => sub?.remove?.());
-      subscriptions.forEach((sub) => {
-        if (Array.isArray(sub)) {
-          sub.forEach((s) => s.unsubscribe());
-        } else {
-          sub?.unsubscribe?.();
-        }
-      });
+      subscriptions.forEach((sub) => sub?.unsubscribe?.());
     };
   }, [onSyncComplete, onUserUpdated]);
 

apps/mobile/app/hooks/use-group-options.ts

@@ -16,61 +16,28 @@ 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 { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { db } from "../common/database";
 import { eSubscribeEvent, eUnSubscribeEvent } from "../services/event-manager";
 import Navigation from "../services/navigation";
 import { eGroupOptionsUpdated } from "../utils/events";
 import { useSettingStore } from "../stores/use-setting-store";
-import { GroupingByIdKey, GroupingKey, GroupOptions } from "@notesnook/core";
 
-export function getGroupOptions(
-  groupingKey: GroupingKey,
-  id?: string,
-  type?: GroupingByIdKey
-) {
-  return id && type
-    ? db.settings?.getGroupOptionsById(id, type)
-    : db.settings?.getGroupOptions(groupingKey);
-}
-
-export function setGroupOptionsById(
-  groupingKey: GroupingKey,
-  groupOptions: GroupOptions,
-  id?: string,
-  type?: GroupingByIdKey
-) {
-  return id && type
-    ? db.settings?.setGroupOptionsById(id, type, groupOptions)
-    : db.settings?.setGroupOptions(groupingKey, groupOptions);
-}
-
-export function useGroupOptions(
-  groupingKey: GroupingKey,
-  id?: string,
-  type?: GroupingByIdKey
-) {
+export function useGroupOptions(type: any) {
   const appLoading = useSettingStore((state) => state.isAppLoading);
   const [groupOptions, setGroupOptions] = useState(
-    getGroupOptions(groupingKey, id, type)
+    db.settings?.getGroupOptions(type)
   );
-  console.log(groupingKey, id, type, groupOptions, "options");
-  const groupOptionsRef = useRef(groupOptions);
-  groupOptionsRef.current = groupOptions;
-
   useEffect(() => {
-    const onUpdate = (_groupingKey: string, _id?: string, _type?: string) => {
-      if (_groupingKey !== groupingKey) return;
-      if (_id && _type && _id !== id && _type !== type) return;
-
-      const options = getGroupOptions(groupingKey, id, type);
+    const onUpdate = (groupType: string) => {
+      if (groupType !== type) return;
+      const options = db.settings?.getGroupOptions(type) as any;
       if (!options) return;
       if (
-        groupOptionsRef.current?.groupBy !== options.groupBy ||
-        groupOptionsRef.current?.sortBy !== options.sortBy ||
-        groupOptionsRef.current?.sortDirection !== options?.sortDirection
+        groupOptions?.groupBy !== options.groupBy ||
+        groupOptions?.sortBy !== options.sortBy ||
+        groupOptions?.sortDirection !== groupOptions?.sortDirection
       ) {
-        console.log("onUpdate", _id, _type);
         setGroupOptions({ ...options });
         Navigation.queueRoutesForUpdate();
       }
@@ -79,13 +46,13 @@ export function useGroupOptions(
     eSubscribeEvent(eGroupOptionsUpdated, onUpdate);
 
     if (!appLoading) {
-      onUpdate(groupingKey);
+      onUpdate(type);
     }
 
     return () => {
       eUnSubscribeEvent(eGroupOptionsUpdated, onUpdate);
     };
-  }, [groupingKey, appLoading, id, type]);
+  }, [type, groupOptions, appLoading]);
 
   return groupOptions;
 }

apps/mobile/app/hooks/use-is-compact-mode-enabled.ts

@@ -20,27 +20,14 @@ import { ItemType } from "@notesnook/core";
 import { useSettingStore } from "../stores/use-setting-store";
 
 export function useIsCompactModeEnabled(dataType: ItemType) {
-  const [notebooksListMode, notesListMode, searchListMode] = useSettingStore(
-    (state) => [
-      state.settings.notebooksListMode,
-      state.settings.notesListMode,
-      state.settings.searchListMode
-    ]
-  );
+  const [notebooksListMode, notesListMode] = useSettingStore((state) => [
+    state.settings.notebooksListMode,
+    state.settings.notesListMode
+  ]);
 
-  if (
-    dataType !== "note" &&
-    dataType !== "notebook" &&
-    dataType !== "searchResult"
-  )
-    return false;
+  if (dataType !== "note" && dataType !== "notebook") return false;
 
-  const listMode =
-    dataType === "notebook"
-      ? notebooksListMode
-      : dataType === "searchResult"
-        ? searchListMode
-        : notesListMode;
+  const listMode = dataType === "notebook" ? notebooksListMode : notesListMode;
 
   return listMode === "compact";
 }

apps/mobile/app/hooks/use-pricing-plans.ts

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import { Plan, SubscriptionPlan } from "@notesnook/core";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useAsync } from "react-async-hook";
 import { Platform } from "react-native";
 import Config from "react-native-config";
@@ -181,8 +181,6 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
   const [cancelPromo, setCancelPromo] = useState(false);
   const [userCanRequestTrial, setUserCanRequestTrial] = useState(false);
   const [webPricingPlans, setWebPricingPlans] = useState<Plan[]>([]);
-  const plansRef = useRef(plans);
-  plansRef.current = plans;
 
   const getProduct = React.useCallback(
     (planId: string, skuId: string) => {
@@ -192,11 +190,11 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
         );
 
       return (
-        plansRef.current.find((p) => p.id === planId)?.subscriptions?.[skuId] ||
-        plansRef.current.find((p) => p.id === planId)?.products?.[skuId]
+        plans.find((p) => p.id === planId)?.subscriptions?.[skuId] ||
+        plans.find((p) => p.id === planId)?.products?.[skuId]
       );
     },
-    [webPricingPlans]
+    [plans, webPricingPlans]
   );
 
   const getProductAndroid = (planId: string, skuId: string) => {
@@ -255,41 +253,35 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
 
   useEffect(() => {
     const loadPlans = async () => {
-      try {
-        const items = await PremiumService.loadProductsAndSubs();
-        pricingPlans.forEach((plan) => {
-          plan.subscriptions = {};
-          plan.products = {};
-          plan.subscriptionSkuList.forEach((sku) => {
-            if (!plan.subscriptions) plan.subscriptions = {};
-            plan.subscriptions[sku] = items.subs.find(
-              (p) => p.productId === sku
-            );
-          });
-          plan.productSkuList.forEach((sku) => {
-            if (!plan.products) plan.products = {};
-            plan.products[sku] = items.products.find(
-              (p) => p.productId === sku
-            );
-          });
+      const items = await PremiumService.loadProductsAndSubs();
+      pricingPlans.forEach((plan) => {
+        plan.subscriptions = {};
+        plan.products = {};
+        plan.subscriptionSkuList.forEach((sku) => {
+          if (!plan.subscriptions) plan.subscriptions = {};
+          plan.subscriptions[sku] = items.subs.find((p) => p.productId === sku);
         });
-        setPlans([...pricingPlans]);
-        setUserCanRequestTrial(hasTrialOffer());
-        if (
-          Config.GITHUB_RELEASE === "true" &&
-          !SettingsService.getProperty("serverUrls")
-        ) {
-          try {
-            const products = WebPlanCache || (await db.pricing.products());
-            WebPlanCache = products;
-            setWebPricingPlans(products);
-          } catch (e) {
-            /**
+        plan.productSkuList.forEach((sku) => {
+          if (!plan.products) plan.products = {};
+          plan.products[sku] = items.products.find((p) => p.productId === sku);
+        });
+      });
+      setPlans([...pricingPlans]);
+      setUserCanRequestTrial(hasTrialOffer());
+      if (
+        Config.GITHUB_RELEASE === "true" &&
+        !SettingsService.getProperty("serverUrls")
+      ) {
+        try {
+          const products = WebPlanCache || (await db.pricing.products());
+          WebPlanCache = products;
+          setWebPricingPlans(products);
+        } catch (e) {
+          /**
           empty */
-          }
         }
-        setLoadingPlans(false);
-      } catch (e) {}
+      }
+      setLoadingPlans(false);
     };
     loadPlans();
   }, [options?.promoOffer, cancelPromo, hasTrialOffer]);

apps/mobile/app/hooks/use-timer.ts

@@ -32,8 +32,6 @@ const useTimer = (initialId?: string) => {
   const [id, setId] = useState(initialId);
   const [seconds, setSeconds] = useState(getSecondsLeft(id));
   const interval = useRef<NodeJS.Timeout>(undefined);
-  const secondsRef = useRef(seconds);
-  secondsRef.current = seconds;
 
   const start = (sec: number, currentId = id) => {
     if (!currentId) return;
@@ -61,7 +59,7 @@ const useTimer = (initialId?: string) => {
     }
   };
 
-  return { seconds, setId, start, reset, secondsRef: secondsRef };
+  return { seconds, setId, start, reset };
 };
 
 export default useTimer;

apps/mobile/app/navigation/fluid-panels-view.tsx

@@ -447,9 +447,7 @@ const onChangeTab = async (event: { i: number; from: number }) => {
   if (event.i === 2) {
     editorState().movedAway = false;
     editorState().isFocused = true;
-    if (useSettingStore.getState().settings.keepScreenOn) {
-      activateKeepAwake();
-    }
+    activateKeepAwake();
     eSendEvent(eOnEnterEditor);
 
     if (