mobile: update e2e tests

editor: show internal link's title in hover popup

.github/workflows/desktop.preview.yml

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

.github/workflows/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

.npmrc

@@ -1,2 +0,0 @@
-min-release-age=7 # days
-# ignore-scripts=true

apps/desktop/electron-builder.config.js

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

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "3.3.21",
+  "version": "3.3.12",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/cjs/index.js",
@@ -48,7 +48,7 @@
     "@types/yargs": "^17.0.33",
     "chokidar": "^4.0.3",
     "electron": "^37.0.0",
-    "electron-builder": "^26.8.1",
+    "electron-builder": "^26.0.12",
     "esbuild": "0.21.5",
     "node-abi": "^4.5.0",
     "node-gyp-build": "^4.8.4",

apps/desktop/scripts/dev.mjs

@@ -27,7 +27,6 @@ import crypto from "crypto";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const root = path.join(__dirname, "..");
 const RUNNING_PROCESSES = [];
 const RESTARTABLE_PROCESSES = [];
 let lastBundleHash = null;
@@ -37,7 +36,7 @@ const ENV = {
   FORCE_COLOR: "false",
   COLOR: "0"
 };
-process.chdir(root);
+process.chdir(path.join(__dirname, ".."));
 
 await onChange(true);
 
@@ -56,16 +55,13 @@ async function onChange(first) {
   if (first) {
     await fs.rm("./build/", { force: true, recursive: true });
 
-    await exec(
-      "npm run postinstall --verbose",
-      path.join(root, "node_modules", "electron")
-    );
+    await exec("npm rebuild electron --verbose --foreground-scripts");
 
-    await exec("yarn electron-builder install-app-deps", root);
+    await exec("yarn electron-builder install-app-deps");
   }
 
-  await exec(`yarn run bundle`, root);
-  await exec(`yarn run build`, root);
+  await exec(`yarn run bundle`);
+  await exec(`yarn run build`);
 
   if (await isBundleSame()) {
     console.log("Bundle is same. Doing nothing.");
@@ -115,7 +111,7 @@ function spawnAndWaitUntil(cmd, cwd, predicate) {
 
 async function exec(cmd, cwd) {
   try {
-    console.log(">", cmd, cwd);
+    console.log(">", cmd);
 
     return execSync(cmd, {
       env: ENV,

apps/desktop/src/api/bridge.ts

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

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

@@ -33,17 +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, mkdirSync, writeFileSync } from "fs";
+import { mkdirSync, writeFileSync } from "fs";
 import { dirname } from "path";
 import { resolvePath } from "../utils/resolve-path";
 import { observable } from "@trpc/server/observable";
 import { AssetManager } from "../utils/asset-manager";
-import { isFlatpak, isPortable, isSnap } from "../utils";
+import { isFlatpak, isSnap } from "../utils";
 import { setupDesktopIntegration } from "../utils/desktop-integration";
 import { rm } from "fs/promises";
 import { disableCustomDns, enableCustomDns } from "../utils/custom-dns";
 import type { MenuItem as NNMenuItem } from "@notesnook/ui";
-import { platform } from "os";
 
 const t = initTRPC.create();
 
@@ -61,7 +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()),
 
   zoomFactor: t.procedure.query(() => config.zoomFactor),
   setZoomFactor: t.procedure.input(z.number()).mutation(({ input: factor }) => {
@@ -180,9 +178,7 @@ export const osIntegrationRouter = t.router({
         })
       });
       notification.show();
-      if (input.urgency === "critical" && process.platform !== "linux") {
-        // due to an Electron bug in versions below 40.x, shell.beep() causes a segfault on Linux.
-        // TODO: Remove when migrating to Electron 40.x or newer.
+      if (input.urgency === "critical") {
         shell.beep();
       }
 
@@ -193,28 +189,9 @@ export const osIntegrationRouter = t.router({
     }),
   openPath: t.procedure
     .input(z.object({ type: z.literal("path"), link: z.string() }))
-    .query(async ({ input }) => {
-      if (isFlatpak()) return;
-
+    .query(({ input }) => {
       const { type, link } = input;
-      if (type !== "path") return;
-
-      const resolvedPath = resolvePath(
-        // remove leading slash from path on windows
-        platform() === "win32" ? link.slice(1) : link
-      );
-      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;
-      }
-
-      await shell.openPath(resolvedPath);
+      if (type === "path") return shell.openPath(resolvePath(link));
     }),
   bringToFront: t.procedure.query(() => bringToFront()),
   changeTheme: t.procedure
@@ -319,7 +296,3 @@ function toMenuItem(
     }
   }
 }
-
-function wrapPath(path: string, maxLineLength = 100): string {
-  return path.replace(new RegExp(`(.{${maxLineLength}})`, "g"), "$1\n");
-}

apps/desktop/src/api/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/main.ts

@@ -55,6 +55,10 @@ 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!");
@@ -193,6 +197,11 @@ async function createWindow() {
     setupTray();
     setupJumplist();
   });
+
+  if (pendingNNLink) {
+    bridge.onOpenLink(pendingNNLink);
+    pendingNNLink = undefined;
+  }
 }
 
 app.once("ready", async () => {
@@ -212,6 +221,8 @@ app.once("ready", async () => {
   if (config.customDns) enableCustomDns();
   else disableCustomDns();
 
+  if (!MAC_APP_STORE) app.setAsDefaultProtocolClient("nn");
+
   if (!isDevelopment()) registerProtocol();
   await createWindow();
   configureAutoUpdater();
@@ -225,6 +236,12 @@ 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");
@@ -232,12 +249,29 @@ 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);
 
@@ -248,7 +282,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.hash = `/notebooks/${options.notebook}`;
+    url.pathname = `/notebooks/${options.notebook}`;
 
   return url;
 }

apps/desktop/src/utils/autoupdater.ts

@@ -37,11 +37,7 @@ async function configureAutoUpdater() {
     config.releaseTrack === "stable" &&
     autoUpdater.currentVersion.prerelease.length > 0;
   autoUpdater.allowPrerelease = false;
-  // Do NOT auto-install on quit. On Windows, if the system shuts down while
-  // the NSIS installer is running, it first removes all old files and then
-  // gets killed before copying new ones — leaving an empty install directory.
-  // Updates should only be installed when the user explicitly triggers it.
-  autoUpdater.autoInstallOnAppQuit = false;
+  autoUpdater.autoInstallOnAppQuit = true;
   autoUpdater.disableWebInstaller = true;
 }
 

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/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 && cd ..",
+        "cd android ; ENVFILE=.env.test ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug -PreactNativeArchitectures=arm64-v8a && cd ..",
       reversePorts: [8081]
     },
     "android.release": {

apps/mobile/android/app/build.gradle

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

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

@@ -155,6 +155,15 @@
                 <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"
@@ -199,7 +208,11 @@
             </intent-filter>
         </activity>
 
-
+        <service
+            android:name=".OnClearFromRecentService"
+            android:enabled="true"
+            android:exported="true"
+            android:stopWithTask="false" />
         <service android:name="com.asterinet.react.bgactions.RNBackgroundActionsTask" />
 
         <service

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

@@ -28,6 +28,10 @@ public class MainActivity extends ReactActivity {
       WebView.setWebContentsDebuggingEnabled(true);
     }
 
+    try {
+      startService(new Intent(getBaseContext(), OnClearFromRecentService.class));
+    } catch (Exception ignored) {}
+
   }
 
   /**

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("https://app.notesnook.com/open_note?id=" + note.getId()));
+        intent.setData(Uri.parse("nn://note/" + 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/OnClearFromRecentService.java

@@ -0,0 +1,36 @@
+package com.streetwriters.notesnook;
+import android.app.Service;
+import android.content.Intent;
+import android.content.SharedPreferences;
+import android.os.IBinder;
+import android.util.Log;
+
+public class OnClearFromRecentService extends Service {
+
+    @Override
+    public IBinder onBind(Intent intent) {
+        return null;
+    }
+
+    @Override
+    public int onStartCommand(Intent intent, int flags, int startId) {
+        return START_NOT_STICKY;
+    }
+
+    @Override
+    public void onDestroy() {
+        super.onDestroy();
+    }
+
+    @Override
+    public void onTaskRemoved(Intent rootIntent) {
+        try {
+            SharedPreferences appStateDetails = getApplicationContext().getSharedPreferences("appStateDetails", MODE_PRIVATE);
+            SharedPreferences.Editor edit = appStateDetails.edit();
+            edit.remove("appState");
+            edit.apply();
+            stopSelf();
+        } catch (UnsatisfiedLinkError | Exception e) {
+        }
+    }
+}

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

@@ -93,6 +93,21 @@ public class RCTNNativeModule extends ReactContextBaseJavaModule {
         }
     }
 
+    @ReactMethod
+    public void setAppState(final String appState) {
+        SharedPreferences appStateDetails = getReactApplicationContext().getSharedPreferences("appStateDetails", Context.MODE_PRIVATE);
+        SharedPreferences.Editor edit = appStateDetails.edit();
+        edit.putString("appState", appState);
+        edit.apply();
+    }
+
+    @ReactMethod(isBlockingSynchronousMethod = true)
+    public String getAppState() {
+        SharedPreferences appStateDetails = getReactApplicationContext().getSharedPreferences("appStateDetails", Context.MODE_PRIVATE);
+        String appStateValue = appStateDetails.getString("appState", "");
+        return appStateValue.isEmpty() ? null : appStateValue;
+    }
+
     @ReactMethod(isBlockingSynchronousMethod = true)
     public int getWidgetId() {
         return NotePreviewConfigureActivity.appWidgetId;
@@ -244,7 +259,7 @@ public class RCTNNativeModule extends ReactContextBaseJavaModule {
                 return;
             }
 
-            String uri = "https://app.notesnook.com/open_" + type + "?id=" + id;
+            String uri = "nn://" + type + "/" + 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 @@
-- Bug fixes and improvements
+- Minor bug fixes and performance improvements
 
-Thank you for using Notesnook!
+Thank you for using Notesnook!

apps/mobile/app/app.tsx

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

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

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

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

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

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

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

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

@@ -31,6 +31,7 @@ import {
   generateCryptoKeyFallback
 } from "./encryption";
 import { MMKV } from "./mmkv";
+import OpenPGP from "react-native-fast-openpgp";
 
 export class KV {
   storage: MMKVInstance;
@@ -136,11 +137,30 @@ export const Storage: IStorage = {
   clear(): Promise<void> {
     return DefaultStorage.clear();
   },
-  generateCryptoKeyPair() {
-    throw new Error("Not implemented");
+  async generatePGPKeyPair() {
+    const keys = await OpenPGP.generate({
+      name: "NN",
+      email: "NN@NN.NN"
+    });
+    return { publicKey: keys.publicKey, privateKey: keys.privateKey };
   },
-  decryptAsymmetric() {
-    throw new Error("Not implemented");
+  async validatePGPKeyPair(keys) {
+    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, "");
+
+      return decrypted === dummyData;
+    } catch (e) {
+      console.error("PGP key pair validation error:", e);
+      return false;
+    }
+  },
+  async decryptPGPMessage(privateKeyArmored, encryptedMessage) {
+    return await OpenPGP.decrypt(encryptedMessage, privateKeyArmored, "");
   },
   getAllKeys(): Promise<string[]> {
     return DefaultStorage.getAllKeys();

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

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

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

@@ -35,8 +35,6 @@ import Upload from "@ammarahmed/react-native-upload";
 import { CloudUploader } from "react-native-nitro-cloud-uploader";
 import { useUserStore } from "../../stores/use-user-store";
 import { sleep } from "../../utils/time";
-import { isFeatureAvailable } from "@notesnook/common";
-import { strings } from "@notesnook/intl";
 
 // Upload constants
 const CHUNK_SIZE = 10 * 1024 * 1024; // 10 MB
@@ -201,20 +199,6 @@ export async function uploadFile(
     const remoteFileSize = await getUploadedFileSize(filename);
     if (remoteFileSize === FileSizeResult.Error) return false;
 
-    const featureResult = await isFeatureAvailable(
-      "fileSize",
-      fileInfo.size || 0
-    );
-
-    if (!featureResult.isAllowed) {
-      ToastManager.show({
-        heading: strings.fileTooLarge(),
-        message: featureResult.error,
-        type: "error"
-      });
-      return false;
-    }
-
     if (
       remoteFileSize > FileSizeResult.Empty &&
       remoteFileSize === fileInfo.size

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -17,12 +17,10 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { KeyboardTypeOptions, TextInput } from "react-native";
+import { KeyboardTypeOptions } from "react-native";
 import { eSendEvent } from "../../services/event-manager";
 import { eCloseSimpleDialog, eOpenSimpleDialog } from "../../utils/events";
 import { ButtonProps } from "../ui/button";
-import { FieldValidator, FormRef } from "../ui/input/form-input";
-import { RefObject } from "react";
 
 export type DialogInfo = {
   title?: string;
@@ -45,18 +43,6 @@ export type DialogInfo = {
     | "errorShade";
   icon?: string;
   paragraphColor: string;
-  form?: {
-    formRef: FormRef;
-    items: {
-      name: string;
-      placeholder: string;
-      label?: string;
-      validators: FieldValidator[];
-      defaultValue?: string;
-      ref: RefObject<TextInput | null>;
-    }[];
-    onFormSubmit?: (form: FormRef) => Promise<boolean>;
-  };
   input: boolean;
   inputPlaceholder: string;
   defaultValue: string;

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

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

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

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

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

@@ -35,6 +35,7 @@ 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,
@@ -201,6 +202,17 @@ 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

@@ -110,6 +110,61 @@ export const VaultDialog: React.FC = () => {
   const confirmPasswordRef = useRef<string | null>(null);
   const newPasswordRef = useRef<string | null>(null);
 
+  const open = useCallback(async (data: Vault) => {
+    const biometry = await BiometricService.isBiometryAvailable();
+    const available = !!biometry;
+    const fingerprint = await BiometricService.hasInternetCredentials();
+
+    if (data.item) {
+      const locked = await db.vaults.itemExists(data.item);
+      noteLockedRef.current = locked;
+      if (!locked) {
+        const content = await db.content.findByNoteId(data.item!.id);
+        if (content && isEncryptedContent(content)) {
+          noteLockedRef.current = true;
+        }
+      }
+    }
+
+    // Set refs
+    noteRef.current = data.item;
+    titleRef.current = data.title || strings.goToEditor();
+    descriptionRef.current = data.description || null;
+    paragraphRef.current = data.paragraph || null;
+    buttonTitleRef.current = data.buttonTitle || null;
+    positiveButtonTypeRef.current = data.positiveButtonType || "transparent";
+    customActionTitleRef.current = data.customActionTitle || null;
+    customActionParagraphRef.current = data.customActionParagraph || null;
+    onUnlockRef.current = data.onUnlock;
+    requestTypeRef.current = data.requestType;
+
+    // Set UI state
+    setIsBiometryAvailable(available);
+    setIsBiometryEnrolled(fingerprint);
+    setBiometricUnlock(fingerprint);
+    setWrongPassword(false);
+    setPasswordsDontMatch(false);
+    setDeleteAll(false);
+    setLoading(false);
+
+    // Auto-unlock with fingerprint if applicable
+    const canAutoUnlock =
+      fingerprint &&
+      data.requestType !== VaultRequestType.EnableFingerprint &&
+      data.requestType !== VaultRequestType.RevokeFingerprint &&
+      data.requestType !== VaultRequestType.ChangePassword &&
+      data.requestType !== VaultRequestType.ClearVault &&
+      data.requestType !== VaultRequestType.DeleteVault &&
+      data.requestType !== VaultRequestType.CustomAction &&
+      data.requestType !== VaultRequestType.PermanentUnlock;
+
+    if (canAutoUnlock) {
+      await onPressFingerprintAuth(data.title, data.description);
+    } else {
+      setVisible(true);
+    }
+  }, []);
+
   const close = useCallback(() => {
     if (loading) {
       ToastManager.show({
@@ -194,7 +249,6 @@ export const VaultDialog: React.FC = () => {
           close();
         }, 100);
       } else {
-        setLoading(false);
         ToastManager.show({
           heading: strings.passwordIncorrect(),
           type: "error",
@@ -228,10 +282,6 @@ export const VaultDialog: React.FC = () => {
       setLoading(false);
       close();
       eSendEvent("vaultUpdated");
-      ToastManager.show({
-        message: strings.vaultCleared(),
-        type: "success"
-      });
     } catch (e) {
       ToastManager.show({
         heading: strings.passwordIncorrect(),
@@ -242,45 +292,6 @@ export const VaultDialog: React.FC = () => {
     setLoading(false);
   }, [close]);
 
-  const enrollFingerprint = useCallback(
-    async (password: string) => {
-      setLoading(true);
-      try {
-        await db.vault.unlock(password);
-        await BiometricService.storeCredentials(password);
-        setLoading(false);
-        eSendEvent("vaultUpdated");
-        ToastManager.show({
-          heading: strings.biometricUnlockEnabled(),
-          type: "success",
-          context: "global"
-        });
-        close();
-      } catch (e) {
-        close();
-        ToastManager.show({
-          heading: strings.passwordIncorrect(),
-          type: "error",
-          context: "local"
-        });
-        setLoading(false);
-      }
-    },
-    [close]
-  );
-
-  const takeErrorAction = useCallback(() => {
-    setWrongPassword(true);
-    setVisible(true);
-    setTimeout(() => {
-      ToastManager.show({
-        heading: strings.passwordIncorrect(),
-        type: "error",
-        context: "local"
-      });
-    }, 500);
-  }, []);
-
   const lockNote = useCallback(async () => {
     if (!passwordRef.current || passwordRef.current.trim() === "") {
       ToastManager.show({
@@ -322,13 +333,7 @@ export const VaultDialog: React.FC = () => {
       .catch((e) => {
         takeErrorAction();
       });
-  }, [
-    biometricUnlock,
-    isBiometryEnrolled,
-    close,
-    enrollFingerprint,
-    takeErrorAction
-  ]);
+  }, [close, biometricUnlock, isBiometryEnrolled]);
 
   const openInEditor = useCallback(
     (note: Note & { content?: NoteContent<false> }) => {
@@ -382,7 +387,19 @@ export const VaultDialog: React.FC = () => {
     } catch (e) {
       takeErrorAction();
     }
-  }, [close, takeErrorAction]);
+  }, [close]);
+
+  const takeErrorAction = useCallback(() => {
+    setWrongPassword(true);
+    setVisible(true);
+    setTimeout(() => {
+      ToastManager.show({
+        heading: strings.passwordIncorrect(),
+        type: "error",
+        context: "local"
+      });
+    }, 500);
+  }, []);
 
   const openNote = useCallback(async () => {
     try {
@@ -423,7 +440,6 @@ export const VaultDialog: React.FC = () => {
   }, [
     biometricUnlock,
     isBiometryEnrolled,
-    enrollFingerprint,
     openInEditor,
     shareNote,
     deleteNote,
@@ -448,6 +464,33 @@ export const VaultDialog: React.FC = () => {
     }
   }, [permanantUnlock, openNote]);
 
+  const enrollFingerprint = useCallback(
+    async (password: string) => {
+      setLoading(true);
+      try {
+        await db.vault.unlock(password);
+        await BiometricService.storeCredentials(password);
+        setLoading(false);
+        eSendEvent("vaultUpdated");
+        ToastManager.show({
+          heading: strings.biometricUnlockEnabled(),
+          type: "success",
+          context: "global"
+        });
+        close();
+      } catch (e) {
+        close();
+        ToastManager.show({
+          heading: strings.passwordIncorrect(),
+          type: "error",
+          context: "local"
+        });
+        setLoading(false);
+      }
+    },
+    [close]
+  );
+
   const createVault = useCallback(async () => {
     await db.vault.create(passwordRef.current || "");
 
@@ -493,6 +536,31 @@ export const VaultDialog: React.FC = () => {
     }
   }, []);
 
+  const onPressFingerprintAuth = useCallback(
+    async (title?: string, description?: string) => {
+      try {
+        const credentials = await BiometricService.getCredentials(
+          title || titleRef.current,
+          description || descriptionRef.current || ""
+        );
+
+        if (!credentials) throw new Error("Failed to get user credentials");
+
+        if (credentials?.password) {
+          passwordRef.current = credentials.password;
+          onPress();
+        } else {
+          eSendEvent(eCloseActionSheet);
+          await sleep(300);
+          setVisible(true);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    []
+  );
+
   const onPress = useCallback(async () => {
     const requestType = requestTypeRef.current;
 
@@ -621,89 +689,6 @@ export const VaultDialog: React.FC = () => {
     deleteVault
   ]);
 
-  const onPressFingerprintAuth = useCallback(
-    async (title?: string, description?: string) => {
-      try {
-        const credentials = await BiometricService.getCredentials(
-          title || titleRef.current,
-          description || descriptionRef.current || ""
-        );
-
-        if (!credentials) throw new Error("Failed to get user credentials");
-
-        if (credentials?.password) {
-          passwordRef.current = credentials.password;
-          onPress();
-        } else {
-          eSendEvent(eCloseActionSheet);
-          await sleep(300);
-          setVisible(true);
-        }
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    [onPress]
-  );
-
-  const open = useCallback(
-    async (data: Vault) => {
-      const biometry = await BiometricService.isBiometryAvailable();
-      const available = !!biometry;
-      const fingerprint = await BiometricService.hasInternetCredentials();
-
-      if (data.item) {
-        const locked = await db.vaults.itemExists(data.item);
-        noteLockedRef.current = locked;
-        if (!locked) {
-          const content = await db.content.findByNoteId(data.item!.id);
-          if (content && isEncryptedContent(content)) {
-            noteLockedRef.current = true;
-          }
-        }
-      }
-
-      // Set refs
-      noteRef.current = data.item;
-      titleRef.current = data.title || strings.goToEditor();
-      descriptionRef.current = data.description || null;
-      paragraphRef.current = data.paragraph || null;
-      buttonTitleRef.current = data.buttonTitle || null;
-      positiveButtonTypeRef.current = data.positiveButtonType || "transparent";
-      customActionTitleRef.current = data.customActionTitle || null;
-      customActionParagraphRef.current = data.customActionParagraph || null;
-      onUnlockRef.current = data.onUnlock;
-      requestTypeRef.current = data.requestType;
-
-      // Set UI state
-      setIsBiometryAvailable(available);
-      setIsBiometryEnrolled(fingerprint);
-      setBiometricUnlock(fingerprint);
-      setWrongPassword(false);
-      setPasswordsDontMatch(false);
-      setDeleteAll(false);
-      setLoading(false);
-
-      // Auto-unlock with fingerprint if applicable
-      const canAutoUnlock =
-        fingerprint &&
-        data.requestType !== VaultRequestType.EnableFingerprint &&
-        data.requestType !== VaultRequestType.RevokeFingerprint &&
-        data.requestType !== VaultRequestType.ChangePassword &&
-        data.requestType !== VaultRequestType.ClearVault &&
-        data.requestType !== VaultRequestType.DeleteVault &&
-        data.requestType !== VaultRequestType.CustomAction &&
-        data.requestType !== VaultRequestType.PermanentUnlock;
-
-      if (canAutoUnlock) {
-        await onPressFingerprintAuth(data.title, data.description);
-      } else {
-        setVisible(true);
-      }
-    },
-    [onPressFingerprintAuth]
-  );
-
   useEffect(() => {
     eSubscribeEvent(eOpenVaultDialog, open);
     eSubscribeEvent(eCloseVaultDialog, close);
@@ -746,8 +731,7 @@ export const VaultDialog: React.FC = () => {
           width: DDS.isTab ? 350 : "85%",
           borderRadius: 10,
           backgroundColor: colors.primary.background,
-          paddingTop: 12,
-          overflow: "hidden"
+          paddingTop: 12
         }}
       >
         <DialogHeader
@@ -814,8 +798,7 @@ export const VaultDialog: React.FC = () => {
               !isBiometryAvailable ||
               isCreateVault ||
               isChangePassword ||
-              isCustomAction ||
-              isDeleteVault ? null : (
+              isCustomAction ? null : (
                 <Button
                   onPress={() =>
                     onPressFingerprintAuth(strings.unlockNote(), "")

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

@@ -22,6 +22,7 @@ import React, {
   RefObject,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState
 } from "react";
@@ -38,6 +39,8 @@ import Animated, {
   WithSpringConfig,
   withTiming
 } from "react-native-reanimated";
+import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
+import { getAppState } from "../../screens/editor/tiptap/utils";
 import { eSendEvent } from "../../services/event-manager";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { eClearEditor } from "../../utils/events";
@@ -81,9 +84,18 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
   }: TabProps,
   ref
 ) {
+  const appState = useMemo(() => getAppState(), []);
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const fullscreen = useSettingStore((state) => state.fullscreen);
-  const translateX = useSharedValue(widths ? widths.sidebar : 0);
+  const translateX = useSharedValue(
+    widths
+      ? appState &&
+        appState?.movedAway === false &&
+        useTabStore.getState().getCurrentNoteId()
+        ? widths.sidebar + widths.list
+        : widths.sidebar
+      : 0
+  );
   const startX = useSharedValue(0);
   const currentTab = useSharedValue(1);
   const previousTab = useSharedValue(1);
@@ -113,7 +125,10 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
       translateX.value = 0;
     } else {
       if (prevWidths.current?.sidebar !== widths.sidebar) {
-        translateX.value = widths.sidebar;
+        translateX.value =
+          appState && appState?.movedAway === false
+            ? editorPosition
+            : widths.sidebar;
         if (translateX.value === editorPosition) {
           onChangeTab?.({ i: 2, from: 1 });
         }
@@ -121,7 +136,15 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
     }
     isLoaded.current = true;
     prevWidths.current = widths;
-  }, [deviceMode, widths, fullscreen, translateX, editorPosition, onChangeTab]);
+  }, [
+    deviceMode,
+    widths,
+    fullscreen,
+    translateX,
+    editorPosition,
+    appState,
+    onChangeTab
+  ]);
 
   useEffect(() => {
     const sub = BackHandler.addEventListener("hardwareBackPress", () => {

apps/mobile/app/components/list-items/headers/section-header.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 {
-  GroupHeader,
-  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";
@@ -45,9 +40,7 @@ type SectionHeaderProps = {
   color?: string;
   screen?: RouteName;
   groupOptions: GroupOptions;
-  group: GroupingKey;
   onOpenJumpToDialog: () => void;
-  itemCount?: number;
 };
 
 export const SectionHeader = React.memo<
@@ -60,13 +53,11 @@ export const SectionHeader = React.memo<
     color,
     screen,
     groupOptions,
-    group,
-    onOpenJumpToDialog,
-    itemCount
+    onOpenJumpToDialog
   }: SectionHeaderProps) {
     const { colors } = useThemeColors();
     const isCompactModeEnabled = useIsCompactModeEnabled(
-      dataType as "note" | "notebook" | "searchResult"
+      dataType as "note" | "notebook"
     );
 
     return (
@@ -113,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>
@@ -144,7 +133,6 @@ export const SectionHeader = React.memo<
                         <Sort
                           screen={screen}
                           type={dataType}
-                          group={group}
                           hideGroupOptions={
                             screen === "Reminders" || screen === "Search"
                           }
@@ -162,8 +150,7 @@ export const SectionHeader = React.memo<
                   hidden={
                     dataType !== "note" &&
                     dataType !== "notebook" &&
-                    screen !== "Notes" &&
-                    screen !== "Search"
+                    screen !== "Notes"
                   }
                   style={{
                     width: 25,
@@ -176,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"
                     });
@@ -206,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/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

@@ -53,7 +53,6 @@ type ListProps = {
   isRenderedInActionSheet?: boolean;
   CustomListComponent?: React.JSX.ElementType;
   placeholder?: PlaceholderData;
-  groupType: GroupingKey;
   id?: string;
 };
 
@@ -74,7 +73,16 @@ export default function List(props: ListProps) {
     props.dataType === "notebook" ||
     notebooksListMode === "compact";
 
-  const groupOptions = useGroupOptions(props.groupType);
+  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", () => {
@@ -86,7 +94,7 @@ export default function List(props: ListProps) {
     (item: number | boolean, index: number) => {
       return props.data?.type(index);
     },
-    [props.data]
+    []
   );
 
   const renderItem = React.useCallback(
@@ -97,7 +105,7 @@ export default function List(props: ListProps) {
           isSheet={props.isRenderedInActionSheet || false}
           items={props.data}
           groupOptions={groupOptions}
-          group={props.groupType as GroupingKey}
+          group={groupType as GroupingKey}
           renderedInRoute={props.renderedInRoute}
           customAccentColor={props.customAccentColor}
           dataType={props.dataType}
@@ -107,7 +115,7 @@ export default function List(props: ListProps) {
     },
     [
       groupOptions,
-      props.groupType,
+      groupType,
       props.customAccentColor,
       props.data,
       props.dataType,

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

@@ -53,7 +53,7 @@ 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;
@@ -182,7 +182,6 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
               item={groupHeader}
               index={index}
               dataType={item.type}
-              group={group}
               color={props.customAccentColor}
               groupOptions={groupOptions}
               onOpenJumpToDialog={() => {
@@ -219,7 +218,6 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
               item={groupHeader}
               index={index}
               dataType={item.type}
-              group={group}
               color={props.customAccentColor}
               groupOptions={groupOptions}
               onOpenJumpToDialog={() => {
@@ -247,7 +245,6 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
               screen={props.renderedInRoute}
               item={groupHeader}
               index={index}
-              group={group}
               dataType={item.type}
               color={props.customAccentColor}
               groupOptions={groupOptions}
@@ -274,7 +271,6 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
               screen={props.renderedInRoute}
               item={groupHeader}
               index={index}
-              group={group}
               dataType={item.type}
               color={props.customAccentColor}
               groupOptions={groupOptions}
@@ -301,11 +297,9 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
               screen={props.renderedInRoute}
               item={groupHeader}
               index={index}
-              group={group}
               dataType={item.type}
               color={props.customAccentColor}
               groupOptions={groupOptions}
-              itemCount={items?.placeholders.length}
               onOpenJumpToDialog={() => {
                 eSendEvent(eOpenJumpToDialog, {
                   ref: props.scrollRef,

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

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

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

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

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

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

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

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

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

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

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

@@ -27,11 +27,7 @@ import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
 import { db } from "../../common/database";
-import {
-  eSendEvent,
-  sendItemUpdateEvent,
-  ToastManager
-} from "../../services/event-manager";
+import { eSendEvent, ToastManager } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import { useMenuStore } from "../../stores/use-menu-store";
 import { useRelationStore } from "../../stores/use-relation-store";
@@ -67,7 +63,6 @@ const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
     useRelationStore.getState().update();
     setColorNotes();
     Navigation.queueRoutesForUpdate();
-    sendItemUpdateEvent(item.id, "color");
     eSendEvent(refreshNotesPage);
   };
 
@@ -132,7 +127,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
     }
     useSettingStore.getState().setSheetKeyboardHandler(false);
     setVisible(true);
-  }, [colorFeature]);
+  }, []);
 
   return (
     <>
@@ -145,7 +140,6 @@ export const ColorTags = ({ item }: { item: Note }) => {
           useRelationStore.getState().update();
           useMenuStore.getState().setColorNotes();
           Navigation.queueRoutesForUpdate();
-          sendItemUpdateEvent(color.id, "color");
           eSendEvent(refreshNotesPage);
         }}
       />

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

@@ -35,7 +35,7 @@ export const DateMeta = ({ item }: { item: Item }) => {
   const [dateCreated, setDateCreated] = useState(item.dateCreated);
 
   function getDateMeta() {
-    const keys = Object.keys(item);
+    let keys = Object.keys(item);
     if (keys.includes("dateEdited"))
       keys.splice(
         keys.findIndex((k) => k === "dateModified"),

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

@@ -79,6 +79,8 @@ const COLUMN_BAR_ITEMS: ActionId[] = [
   "rename-color",
   "rename-tag",
   "launcher-shortcut",
+  "copy-id",
+  "copy-link",
   "restore",
   "trash",
   "delete"
@@ -318,9 +320,7 @@ export const Items = ({
     [
       colors.error.icon,
       colors.primary.accent,
-      colors.primary.border,
       colors.secondary.icon,
-      colors.static.orange,
       columnItemWidth,
       topBarSorting
     ]

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

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

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

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

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

@@ -0,0 +1,169 @@
+/*
+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, ScrollView } from "react-native";
+import { strings } from "@notesnook/intl";
+import { db } from "../../../common/database";
+import { Button } from "../../ui/button";
+import Input from "../../ui/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";
+
+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 keyNameRef = useRef<string>("");
+  const [selectedExpiry, setSelectedExpiry] = useState(
+    getExpiryOptions()[2].value
+  );
+  const [isCreating, setIsCreating] = useState(false);
+
+  const handleCreate = async () => {
+    try {
+      if (!keyNameRef.current || !keyNameRef.current.trim()) {
+        ToastManager.show({
+          message: strings.enterKeyName(),
+          type: "error"
+        });
+        return;
+      }
+
+      setIsCreating(true);
+      await db.inboxApiKeys.create(keyNameRef.current, 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"
+      });
+    } 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>
+        <Input
+          placeholder={strings.exampleKeyName()}
+          onChangeText={(text) => {
+            keyNameRef.current = text;
+          }}
+        />
+      </View>
+
+      <View style={{ gap: DefaultAppStyles.GAP_VERTICAL }}>
+        <Paragraph size={AppFontSize.sm}>{strings.expiresIn()}</Paragraph>
+        <View
+          style={{
+            flexDirection: "row",
+            flexWrap: "wrap",
+            gap: DefaultAppStyles.GAP_SMALL
+          }}
+        >
+          {getExpiryOptions().map((option) => (
+            <Pressable
+              key={option.label}
+              onPress={() => setSelectedExpiry(option.value)}
+              type={
+                selectedExpiry === option.value ? "selected" : "transparent"
+              }
+              style={{
+                paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
+                paddingHorizontal: DefaultAppStyles.GAP
+              }}
+            >
+              <Paragraph
+                size={AppFontSize.sm}
+                color={
+                  selectedExpiry === option.value
+                    ? colors.selected.paragraph
+                    : colors.primary.paragraph
+                }
+              >
+                {option.label}
+              </Paragraph>
+            </Pressable>
+          ))}
+        </View>
+      </View>
+
+      <Button
+        title={isCreating ? strings.creating() : strings.create()}
+        type="accent"
+        width="100%"
+        loading={isCreating}
+        disabled={isCreating}
+        onPress={handleCreate}
+        style={{
+          marginTop: DefaultAppStyles.GAP_VERTICAL
+        }}
+      />
+    </ScrollView>
+  );
+}
+
+AddApiKeySheet.present = (onAdd: () => void) => {
+  presentSheet({
+    component: (ref, close, update) => (
+      <AddApiKeySheet close={close} onAdd={onAdd} />
+    )
+  });
+};

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

@@ -16,14 +16,13 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { Plan } from "@notesnook/core";
+import { Plan, SKUResponse } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import dayjs from "dayjs";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Linking,
-  Platform,
   ScrollView,
   Text,
   TouchableOpacity,
@@ -32,6 +31,7 @@ import {
 import Config from "react-native-config";
 import * as RNIap from "react-native-iap";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { WebView } from "react-native-webview";
 import { db } from "../../../common/database";
 import usePricingPlans from "../../../hooks/use-pricing-plans";
 import { ToastManager } from "../../../services/event-manager";
@@ -211,19 +211,16 @@ export const BuyPlan = (props: {
               ? strings["5yearPlanConditions"]()
               : [
                   strings.trialPlanConditions[0](
-                    billingDuration?.duration as number as never
+                    billingDuration?.duration as number
                   ),
-                  ...(isGithubRelease
-                    ? []
-                    : [strings.trialPlanConditions[1](Platform.OS as never)])
+                  strings.trialPlanConditions[1](0)
                 ]
             ).map((item) => (
               <View
                 style={{
                   flexDirection: "row",
                   alignItems: "center",
-                  gap: 10,
-                  flex: 1
+                  gap: 10
                 }}
                 key={item}
               >
@@ -232,13 +229,7 @@ export const BuyPlan = (props: {
                   size={AppFontSize.lg}
                   name="check"
                 />
-                <Paragraph
-                  style={{
-                    flexShrink: 1
-                  }}
-                >
-                  {item}
-                </Paragraph>
+                <Paragraph>{item}</Paragraph>
               </View>
             ))}
           </View>
@@ -252,8 +243,8 @@ export const BuyPlan = (props: {
             is5YearPlanSelected
               ? strings.purchase()
               : pricingPlans?.userCanRequestTrial
-                ? strings.subscribeAndStartTrial()
-                : strings.subscribe()
+              ? strings.subscribeAndStartTrial()
+              : strings.subscribe()
           }
           onPress={async () => {
             if (isGithubRelease) {
@@ -330,10 +321,7 @@ const ProductItem = (props: {
   productId: string;
 }) => {
   const { colors } = useThemeColors();
-  const regionalDiscount =
-    props.productId === "notesnook.pro.yearly"
-      ? props.pricingPlans.regionalDiscount
-      : undefined;
+  const [regionalDiscount, setRegionaDiscount] = useState<SKUResponse>();
   const product =
     props.pricingPlans?.currentPlan?.subscriptions?.[
       regionalDiscount?.sku || props.productId
@@ -370,19 +358,27 @@ const ProductItem = (props: {
       props.pricingPlans.user?.subscription?.productId ===
         (product as Plan)?.id);
 
-  const discountValue =
-    (isAnnual && !isGithubRelease) ||
-    (isGithubRelease && (product as Plan)?.discount?.amount)
-      ? regionalDiscount
-        ? regionalDiscount.discount
-        : isGithubRelease
-          ? (product as Plan).discount?.amount
-          : props.pricingPlans.compareProductPrice(
-              props.pricingPlans.currentPlan?.id as string,
-              `notesnook.${props.pricingPlans.currentPlan?.id}.yearly`,
-              `notesnook.${props.pricingPlans.currentPlan?.id}.monthly`
-            )
-      : undefined;
+  useEffect(() => {
+    props.pricingPlans
+      ?.getRegionalDiscount(
+        props.pricingPlans.currentPlan?.id as string,
+        props.pricingPlans.isGithubRelease
+          ? ((product as Plan)?.period as string)
+          : props.productId
+      )
+      .then((value) => {
+        if (
+          value &&
+          value.sku?.startsWith(
+            (props.pricingPlans.selectedProduct as RNIap.Subscription)
+              ?.productId
+          )
+        ) {
+          props.pricingPlans.selectProduct(value?.sku as string);
+        }
+        setRegionaDiscount(value);
+      });
+  }, []);
 
   return (
     <TouchableOpacity
@@ -424,11 +420,12 @@ const ProductItem = (props: {
             {isAnnual
               ? strings.yearly()
               : is5YearProduct
-                ? strings.fiveYearPlan()
-                : strings.monthly()}
+              ? strings.fiveYearPlan()
+              : strings.monthly()}
           </Heading>
 
-          {discountValue ? (
+          {(isAnnual && !isGithubRelease) ||
+          (isGithubRelease && (product as Plan)?.discount?.amount) ? (
             <View
               style={{
                 backgroundColor: colors.static.red,
@@ -439,7 +436,18 @@ const ProductItem = (props: {
               }}
             >
               <Heading color={colors.static.white} size={AppFontSize.xs}>
-                {strings.bestValue()} - {strings.percentOff(`${discountValue}`)}
+                {strings.bestValue()} -{" "}
+                {strings.percentOff(
+                  (regionalDiscount
+                    ? regionalDiscount.discount
+                    : isGithubRelease
+                    ? (product as Plan).discount?.amount
+                    : props.pricingPlans.compareProductPrice(
+                        props.pricingPlans.currentPlan?.id as string,
+                        `notesnook.${props.pricingPlans.currentPlan?.id}.yearly`,
+                        `notesnook.${props.pricingPlans.currentPlan?.id}.monthly`
+                      )) as string
+                )}
               </Heading>
             </View>
           ) : null}

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,14 +225,24 @@ export default function EditorTabs({
         }}
       >
         <Heading size={AppFontSize.lg}>{strings.tabs()}</Heading>
-        <IconButton
-          onPress={() => {
-            useTabStore.getState().newTab();
-            close?.();
-          }}
-          name="plus"
-          color={colors.primary.accent}
-        />
+        <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>
       </View>
 
       <FlatList
@@ -253,4 +263,4 @@ EditorTabs.present = () => {
   presentSheet({
     component: (ref, close, update) => <EditorTabs close={close} />
   });
-};
+};

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

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

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

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

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

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useAreFeaturesAvailable } from "@notesnook/common";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
-import React, { useEffect } from "react";
+import React from "react";
 import { View } from "react-native";
 import {
   eSendEvent,
@@ -28,11 +28,7 @@ import {
   ToastManager
 } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
-import {
-  eAfterSync,
-  eCloseSheet,
-  eMenuItemUpdate
-} from "../../../utils/events";
+import { eCloseSheet } from "../../../utils/events";
 import { SideMenuItem } from "../../../utils/menu-items";
 import { AppFontSize } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
@@ -41,25 +37,12 @@ import AppIcon from "../../ui/AppIcon";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
 import PaywallSheet from "../paywall";
-import { presentDialog } from "../../dialog/functions";
-import { db } from "../../../common/database";
-import { useTrashStore } from "../../../stores/use-trash-store";
-import { useSettingStore } from "../../../stores/use-setting-store";
 export const MenuItemProperties = ({ item }: { item: SideMenuItem }) => {
   const { colors } = useThemeColors();
   const featuresAvailable = useAreFeaturesAvailable([
     "customHomepage",
     "customizableSidebar"
   ]);
-  const isAppLoading = useSettingStore((state) => state.isAppLoading);
-  const trash = useTrashStore((state) => state.items);
-
-  useEffect(() => {
-    if (!isAppLoading) {
-      useTrashStore.getState().refresh();
-    }
-  }, [isAppLoading]);
-
   return !featuresAvailable ? null : (
     <View
       style={{
@@ -117,38 +100,7 @@ export const MenuItemProperties = ({ item }: { item: SideMenuItem }) => {
           },
           icon: "sort-ascending",
           locked: !featuresAvailable?.customizableSidebar.isAllowed
-        },
-        ...(item.id === "Trash"
-          ? [
-              {
-                title: strings.clearTrash(),
-                onPress: async () => {
-                  if (!trash || trash?.length === 0) return;
-                  eSendEvent(eCloseSheet);
-                  setTimeout(() => {
-                    presentDialog({
-                      title: strings.clearTrashConfirm(),
-                      paragraph: strings.clearTrashDesc(),
-                      positiveText: strings.clear(),
-                      positivePress: async () => {
-                        await db.trash.clear();
-                        useTrashStore.getState().clear();
-                        eSendEvent(eMenuItemUpdate);
-                        eSendEvent(eAfterSync);
-                        ToastManager.show({
-                          message: strings.trashCleared(),
-                          type: "success"
-                        });
-                        return true;
-                      }
-                    });
-                  }, 500);
-                },
-                icon: "delete-sweep-outline",
-                disabled: !trash || trash?.length === 0
-              }
-            ]
-          : [])
+        }
       ].map((item) => (
         <Pressable
           key={item.title}
@@ -160,7 +112,7 @@ export const MenuItemProperties = ({ item }: { item: SideMenuItem }) => {
             gap: DefaultAppStyles.GAP_SMALL,
             borderRadius: 0,
             paddingHorizontal: DefaultAppStyles.GAP,
-            opacity: item.disabled || item.locked ? 0.6 : 1
+            opacity: item.locked ? 0.6 : 1
           }}
           onPress={() => {
             item.onPress();

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

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Notebook } from "@notesnook/core";
+import { Notebook, VirtualizedGrouping } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";

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

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

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

@@ -1,22 +1,3 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-import React from "react";
 import {
   FeatureUsage,
   formatBytes,
@@ -95,10 +76,10 @@ export function PlanLimits() {
               {item.total === Infinity
                 ? strings.unlimited()
                 : item.id === "storage"
-                  ? `${formatBytes(item.used)}/${formatBytes(
-                      item.total
-                    )} ${strings.used()}`
-                  : `${item.used}/${item.total} ${strings.used()}`}
+                ? `${formatBytes(item.used)}/${formatBytes(
+                    item.total
+                  )} ${strings.used()}`
+                : `${item.used}/${item.total} ${strings.used()}`}
             </Paragraph>
           </View>
         </View>

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

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { hosts, Note } from "@notesnook/core";
+import { Note } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import Clipboard from "@react-native-clipboard/clipboard";
@@ -28,15 +28,12 @@ import {
   TouchableOpacity,
   View
 } from "react-native";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 //@ts-ignore
 import ToggleSwitch from "toggle-switch-react-native";
 import { db } from "../../../common/database";
 import { requestInAppReview } from "../../../services/app-review";
-import {
-  eSendEvent,
-  presentSheet,
-  ToastManager
-} from "../../../services/event-manager";
+import { presentSheet, ToastManager } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { useAttachmentStore } from "../../../stores/use-attachment-store";
 import { openLinkInBrowser } from "../../../utils/functions";
@@ -49,17 +46,21 @@ 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 { isFeatureAvailable, useIsFeatureAvailable } from "@notesnook/common";
 
 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
+    monographId,
+    metadata
   };
 }
 
@@ -84,8 +85,9 @@ const PublishNoteSheet = ({
     return fetchMonographData(note?.id);
   }, []);
   const monograph = monographData.result?.monograph;
+  const metadata = monographData.result?.metadata;
   customTitle.current = monograph?.title || note.title || "";
-  const publishUrl = monograph && `${hosts.MONOGRAPH_HOST}/${monograph?.id}`;
+  const publishUrl = metadata?.publishUrl || monograph?.publishUrl || "";
   const isPublished = db.monographs.monograph(note?.id);
 
   useEffect(() => {
@@ -116,7 +118,6 @@ const PublishNoteSheet = ({
 
         await monographData.execute();
         Navigation.queueRoutesForUpdate();
-        eSendEvent(eMenuItemUpdate);
         setPublishLoading(false);
       }
       requestInAppReview();
@@ -143,7 +144,6 @@ const PublishNoteSheet = ({
         await db.monographs.unpublish(note.id);
         monographData.execute();
         Navigation.queueRoutesForUpdate();
-        eSendEvent(eMenuItemUpdate);
         setPublishLoading(false);
       }
     } catch (e) {
@@ -381,6 +381,9 @@ const PublishNoteSheet = ({
                   }}
                 >
                   <Paragraph size={AppFontSize.sm}>{strings.views()}</Paragraph>
+                  <Paragraph>
+                    {monographData?.result?.metadata?.totalViews || 0}
+                  </Paragraph>
                 </View>
               </View>
             </View>
@@ -452,4 +455,4 @@ PublishNoteSheet.present = (note: Note) => {
   });
 };
 
-export default PublishNoteSheet;
+export default PublishNoteSheet;

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<"note">[] | undefined>;
+  internalLinks: MutableRefObject<InternalLink[] | undefined>;
   listType: "linkedNotes" | "referencedIn";
 }) => {
   const { colors } = useThemeColors();
@@ -231,7 +231,10 @@ const ListNoteItem = ({
             internalLinks.current = await db.notes.internalLinks(reference.id);
           }
           const noteLinks = internalLinks.current.filter(
-            (link) => link.id === item.id && link.params?.blockId
+            (link) =>
+              link.id === item.id &&
+              link.type === "note" &&
+              link.params?.blockId
           );
 
           if (noteLinks.length) {
@@ -239,7 +242,10 @@ const ListNoteItem = ({
 
             setLinkedBlocks(
               blocks.filter((block) =>
-                noteLinks.find((link) => block.id === link.params?.blockId)
+                noteLinks.find(
+                  (link) =>
+                    link.type === "note" && block.id === link.params?.blockId
+                )
               )
             );
           }
@@ -404,7 +410,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<"note">[]>([]);
+  const internalLinks = useRef<InternalLink[]>([]);
 
   useEffect(() => {
     db.relations?.[tab === 0 ? "from" : "to"]?.(

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

@@ -121,17 +121,6 @@ export const RelationsList = ({
         <List
           data={items}
           loading={false}
-          groupType={
-            referenceType === "note"
-              ? "notes"
-              : referenceType === "tag"
-                ? "tags"
-                : referenceType === "notebook"
-                  ? "notebooks"
-                  : referenceType === "reminder"
-                    ? "reminders"
-                    : "notes"
-          }
           dataType={referenceType as any}
           isRenderedInActionSheet={true}
         />

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

@@ -45,16 +45,25 @@ import Paragraph from "../../ui/typography/paragraph";
 const Sort = ({
   type,
   screen,
-  hideGroupOptions,
-  group: groupType
+  hideGroupOptions
 }: {
   type: ItemType;
   screen?: RouteName;
-  group: GroupingKey;
   hideGroupOptions?: boolean;
 }) => {
   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(
     db.settings.getGroupOptions(groupType)
   );
@@ -148,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
@@ -184,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

@@ -79,7 +79,6 @@ type SimpleTabViewProps = {
 const createSceneMap = (
   scenes: Record<string, React.ComponentType<any>>
 ): ((props: { route: SimpleRoute }) => React.ReactNode) => {
-  // eslint-disable-next-line react/display-name
   return ({ route }: { route: SimpleRoute }) => {
     const SceneComponent = scenes[route.key];
     if (!SceneComponent) return null;
@@ -137,8 +136,8 @@ const SimpleTabView = ({
             {loadedKeysRef.current.has(route.key)
               ? getSceneForRoute(route)
               : navigationState.index === routeIndex
-                ? getSceneForRoute(route)
-                : null}
+              ? getSceneForRoute(route)
+              : null}
           </View>
         ))}
       </View>
@@ -433,12 +432,12 @@ const TabBar = (props: SimpleTabBarProps) => {
                       name="plus"
                       testID="sidebar-add-button"
                       size={AppFontSize.lg - 2}
-                      top={10}
                       color={colors.primary.icon}
                       onPress={async () => {
                         if (props.navigationState.index === 1) {
-                          const notebooksFeature =
-                            await isFeatureAvailable("notebooks");
+                          const notebooksFeature = await isFeatureAvailable(
+                            "notebooks"
+                          );
                           if (!notebooksFeature.isAllowed) {
                             PaywallSheet.present(notebooksFeature);
                             return;
@@ -486,7 +485,6 @@ const TabBar = (props: SimpleTabBarProps) => {
                           ? "sort-ascending"
                           : "sort-descending"
                       }
-                      top={10}
                       testID="sidebar-sort-button"
                       color={colors.primary.icon}
                       onPress={() => {
@@ -498,11 +496,6 @@ const TabBar = (props: SimpleTabBarProps) => {
                                   ? "notebook"
                                   : "tag"
                               }
-                              group={
-                                props.navigationState.index === 1
-                                  ? "notebooks"
-                                  : "tags"
-                              }
                               hideGroupOptions
                             />
                           )
@@ -527,7 +520,6 @@ const TabBar = (props: SimpleTabBarProps) => {
                         width: 28,
                         height: 28
                       }}
-                      top={10}
                       testID="sidebar-theme-button"
                       color={colors.primary.icon}
                       name={isDark ? "weather-night" : "weather-sunny"}

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

@@ -24,22 +24,18 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useTotalNotes } from "../../hooks/use-db-item";
 
 import { db } from "../../common/database";
-import {
-  eSubscribeEvent,
-  subscribeToItemUpdate
-} from "../../services/event-manager";
+import { eSubscribeEvent } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import useNavigationStore, {
   RouteParams
 } from "../../stores/use-navigation-store";
-import { eAfterSync, eMenuItemUpdate } from "../../utils/events";
+import { eAfterSync } from "../../utils/events";
 import { SideMenuItem } from "../../utils/menu-items";
 import { AppFontSize, defaultBorderRadius } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
 import { useSideBarDraggingStore } from "./dragging-store";
-import { useRelationStore } from "../../stores/use-relation-store";
 
 export function MenuItem({
   item,
@@ -60,19 +56,13 @@ export function MenuItem({
   const totalNotes = useTotalNotes(
     item.dataType as "notebook" | "tag" | "color"
   );
-  const update = useRelationStore((state) => state.updater);
   const getTotalNotesRef = useRef(totalNotes.getTotalNotes);
   getTotalNotesRef.current = totalNotes.getTotalNotes;
+
   const menuItemCount = !item.data
     ? itemCount
     : totalNotes.totalNotes(item.data.id);
 
-  useEffect(() => {
-    if (item.data) {
-      getTotalNotesRef.current([item.data?.id]);
-    }
-  }, [item.data, update]);
-
   useEffect(() => {
     const onSyncComplete = async () => {
       try {
@@ -94,9 +84,7 @@ export function MenuItem({
               setItemCount(await db.notes.archived.count());
               break;
             case "Trash":
-              {
-                setItemCount((await db.trash.all()).length);
-              }
+              setItemCount((await db.trash.all()).length);
               break;
           }
         } else {
@@ -106,20 +94,10 @@ export function MenuItem({
         /** Empty */
       }
     };
-    const events = [eSubscribeEvent(eAfterSync, onSyncComplete)];
-
-    if (!item.data) {
-      events.push(eSubscribeEvent(eMenuItemUpdate, onSyncComplete));
-    }
-
-    if (item.data?.id) {
-      events.push(
-        subscribeToItemUpdate(item?.data?.id, item?.data?.type, onSyncComplete)
-      );
-    }
+    const event = eSubscribeEvent(eAfterSync, onSyncComplete);
     onSyncComplete();
     return () => {
-      events?.forEach((e) => e?.unsubscribe());
+      event?.unsubscribe();
     };
   }, [item.data, item.id]);
 
@@ -173,8 +151,8 @@ export function MenuItem({
               item.icon === "crown"
                 ? colors.static.yellow
                 : isFocused
-                  ? colors.selected.icon
-                  : colors.secondary.icon
+                ? colors.selected.icon
+                : colors.secondary.icon
             }
             size={AppFontSize.md}
           />

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

@@ -24,8 +24,7 @@ import { StoreApi, UseBoundStore } from "zustand";
 import { useTotalNotes } from "../../hooks/use-db-item";
 import {
   eSubscribeEvent,
-  eUnSubscribeEvent,
-  ToastManager
+  eUnSubscribeEvent
 } from "../../services/event-manager";
 import { TreeItem } from "../../stores/create-notebook-tree-stores";
 import { SelectionStore } from "../../stores/item-selection-store";
@@ -36,7 +35,6 @@ import AppIcon from "../ui/AppIcon";
 import { IconButton } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
-import { useRelationStore } from "../../stores/use-relation-store";
 
 export const NotebookItem = ({
   index,
@@ -72,14 +70,13 @@ export const NotebookItem = ({
   const notebook = item.notebook;
   const isFocused = focused;
   const { totalNotes, getTotalNotes } = useTotalNotes("notebook");
-  const updater = useRelationStore(state => state.updater);
   const getTotalNotesRef = React.useRef(getTotalNotes);
   getTotalNotesRef.current = getTotalNotes;
   const { colors } = useThemeColors();
 
   useEffect(() => {
     getTotalNotesRef.current([item.notebook.id]);
-  }, [item.notebook, updater]);
+  }, [item.notebook]);
 
   useEffect(() => {
     const onNotebookUpdate = (id?: string) => {
@@ -104,8 +101,7 @@ export const NotebookItem = ({
             ? 15 * item.depth
             : 15 * 5,
         width: "100%",
-        marginTop: 2,
-        opacity: item.disabled ? 0.5 : 1
+        marginTop: 2
       }}
     >
       <Pressable

apps/mobile/app/components/side-menu/pinned-section.tsx

@@ -76,7 +76,7 @@ export const PinnedSection = React.memo(
           onPress: onPress,
           onLongPress: onLongPress
         })) as SideMenuItem[],
-      [menuPins, onLongPress, onPress]
+      [menuPins, onPress]
     );
 
     const renderItem = React.useCallback(({ item }: { item: SideMenuItem }) => {

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

@@ -40,7 +40,6 @@ import {
   useSideMenuNotebookTreeStore
 } from "./stores";
 import { LegendList } from "@legendapp/list";
-import { useRelationStore } from "../../stores/use-relation-store";
 useSideMenuNotebookSelectionStore.setState({
   multiSelect: true
 });
@@ -53,7 +52,6 @@ export const SideMenuNotebooks = () => {
   const [filteredNotebooks, setFilteredNotebooks] = React.useState(notebooks);
   const searchTimer = React.useRef<NodeJS.Timeout>(undefined);
   const lastQuery = React.useRef<string>(undefined);
-  const updater = useRelationStore(state => state.updater);
   const loadRootNotebooks = React.useCallback(async () => {
     if (!filteredNotebooks) return;
     const _notebooks: Notebook[] = [];
@@ -68,6 +66,9 @@ export const SideMenuNotebooks = () => {
 
   const updateNotebooks = React.useCallback(() => {
     if (lastQuery.current) {
+      // useSideMenuNotebookTreeStore.setState({
+      //   isSearching: true
+      // });
       db.lookup
         .notebooks(lastQuery.current)
         .sorted(db.settings.getGroupOptions("notebooks"))
@@ -75,13 +76,16 @@ export const SideMenuNotebooks = () => {
           setFilteredNotebooks(filtered);
         });
     } else {
+      // useSideMenuNotebookTreeStore.setState({
+      //   isSearching: false
+      // });
       setFilteredNotebooks(notebooks);
     }
   }, [notebooks]);
 
   useEffect(() => {
     updateNotebooks();
-  }, [updateNotebooks,updater]);
+  }, [updateNotebooks]);
 
   useEffect(() => {
     (async () => {

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

@@ -38,7 +38,6 @@ import { SideMenuHeader } from "./side-menu-header";
 import { SideMenuListEmpty } from "./side-menu-list-empty";
 import { useSideMenuTagsSelectionStore } from "./stores";
 import { LegendList, LegendListRenderItemProps } from "@legendapp/list";
-import { useRelationStore } from "../../stores/use-relation-store";
 
 const TagItem = (props: {
   tags: VirtualizedGrouping<Tag>;
@@ -56,13 +55,12 @@ const TagItem = (props: {
   const totalNotes = useTotalNotes("tag");
   const totalNotesRef = React.useRef(totalNotes);
   totalNotesRef.current = totalNotes;
-  const updater = useRelationStore(state => state.updater);
 
   useEffect(() => {
     if (item?.id) {
       totalNotesRef.current?.getTotalNotes([item?.id]);
     }
-  }, [item, updater]);
+  }, [item]);
 
   return (
     <View

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

@@ -38,10 +38,10 @@ import {
 import { getElevationStyle } from "../../utils/elevation";
 import { eHideToast, eShowToast } from "../../utils/events";
 import { AppFontSize, defaultBorderRadius } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Toast = ({ context = "global" }) => {
   const { colors, isDark } = useThemeColors();
@@ -119,7 +119,11 @@ export const Toast = ({ context = "global" }) => {
         width: DDS.isTab ? dimensions.width / 2 : "100%",
         alignItems: "center",
         alignSelf: "center",
-        bottom: insets.bottom + 15,
+        bottom:
+          Platform.OS === "android"
+            ? Math.max(insets.bottom, 40)
+            : Math.max(insets.bottom, 40) +
+              (keyboard.keyboardShown ? keyboard.keyboardHeight : 0),
         position: "absolute",
         zIndex: 999,
         elevation: 15
@@ -154,22 +158,22 @@ export const Toast = ({ context = "global" }) => {
               toastOptions.icon
                 ? toastOptions.icon
                 : toastOptions.type === "success"
-                  ? "check"
-                  : toastOptions.type === "info"
-                    ? "information"
-                    : "close"
+                ? "check"
+                : toastOptions.type === "info"
+                ? "information"
+                : "close"
             }
             size={isFullToastMessage ? AppFontSize.xxxl : AppFontSize.xl}
             color={
               toastOptions?.icon
                 ? toastOptions?.icon
                 : toastOptions.type === "error"
-                  ? colors.error.icon
-                  : toastOptions.type === "info"
-                    ? isDark
-                      ? colors.static.white
-                      : colors.static.black
-                    : colors.success.icon
+                ? colors.error.icon
+                : toastOptions.type === "info"
+                ? isDark
+                  ? colors.static.white
+                  : colors.static.black
+                : colors.success.icon
             }
           />
 

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

@@ -1,411 +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, { 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 { useThemeColors } from "@notesnook/theme";
-import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
-import { DefaultAppStyles } from "../../../utils/styles";
-import { IconButton } from "../icon-button";
-import Paragraph from "../typography/paragraph";
-import AppIcon from "../AppIcon";
-
-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;
-}
-
-export function createFormRef(initialValues: FormValues = {}): FormRef {
-  const listeners = new Set<() => void>();
-  const values: FormValues = { ...initialValues };
-  const errors: FormErrors = {};
-  const schema: ValidationSchema = {};
-
-  const notify = () => {
-    listeners.forEach((listener) => listener());
-  };
-
-  return {
-    values,
-    errors,
-    setValue(name, value) {
-      values[name] = value;
-      if (errors[name]) {
-        delete errors[name];
-        notify();
-      }
-    },
-    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();
-    },
-    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);
-      };
-    }
-  };
-}
-
-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,7 +48,6 @@ export const Notice = ({
     <View
       style={{
         paddingHorizontal: DefaultAppStyles.GAP,
-        paddingLeft: 5,
         paddingVertical: DefaultAppStyles.GAP_VERTICAL,
         flexDirection: "row",
         backgroundColor: colors.secondary.background,
@@ -63,6 +62,9 @@ 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/sheet/index.jsx

@@ -83,13 +83,12 @@ const SheetWrapper = ({
           : 0
     };
   }, [
+    colors.primary.background,
+    colors.primary.border,
     largeTablet,
     smallTablet,
     width,
-    colors.primary.background,
-    colors.primary.border,
-    bottomInsets,
-    isGestureNavigationEnabled
+    insets.bottom
   ]);
 
   const _onOpen = () => {

apps/mobile/app/components/walkthroughs/walkthroughs.tsx

@@ -17,14 +17,33 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { SubscriptionPlan } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { WELCOME_SVG } from "../../assets/images/assets";
+import { Linking, View } from "react-native";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import {
+  COMMUNITY_SVG,
+  LAUNCH_ROCKET,
+  SUPPORT_SVG,
+  WELCOME_SVG
+} from "../../assets/images/assets";
+import useRotator from "../../hooks/use-rotator";
+import { eSendEvent } from "../../services/event-manager";
+import { getContainerBorder } from "../../utils/colors";
+import { getElevationStyle } from "../../utils/elevation";
+import { eOpenAddNotebookDialog } from "../../utils/events";
+import { defaultBorderRadius, AppFontSize } from "../../utils/size";
+import { Button } from "../ui/button";
+import Seperator from "../ui/seperator";
+import { SvgView } from "../ui/svg";
+import Heading from "../ui/typography/heading";
+import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 import { useUserStore } from "../../stores/use-user-store";
+import { planToId, SubscriptionPlan } from "@notesnook/core";
 import { planToDisplayName } from "../../utils/constants";
 import AppIcon from "../ui/AppIcon";
-import { SvgView } from "../ui/svg";
 
 export type TStep = {
   text?: string;

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

@@ -33,7 +33,7 @@ import { useThemeColors } from "@notesnook/theme";
 import { DisplayedNotification } from "@notifee/react-native";
 import Clipboard from "@react-native-clipboard/clipboard";
 import React, { useEffect, useRef, useState } from "react";
-import { InteractionManager, Platform } from "react-native";
+import { InteractionManager, Platform, View } from "react-native";
 import Share from "react-native-share";
 import { DatabaseLogger, db } from "../common/database";
 import { AttachmentDialog } from "../components/attachments";
@@ -72,8 +72,8 @@ import { useUserStore } from "../stores/use-user-store";
 import { eCloseSheet, eUpdateNoteInEditor } from "../utils/events";
 import { deleteItems } from "../utils/functions";
 import { convertNoteToText } from "../utils/note-to-text";
-import { NotesnookModule } from "../utils/notesnook-module";
 import { sleep } from "../utils/time";
+import { NotesnookModule } from "../utils/notesnook-module";
 
 import DatePickerComponent from "../components/date-picker";
 
@@ -108,6 +108,7 @@ export type ActionId =
   | "attachments"
   | "history"
   | "copy-link"
+  | "copy-id"
   | "reminders"
   | "lock-unlock"
   | "publish"
@@ -196,7 +197,7 @@ export const useActions = ({
     "expiringNotes"
   ]);
   const [item, setItem] = useState(propItem);
-  const { colors } = useThemeColors();
+  const { colors, isDark } = useThemeColors();
   const setMenuPins = useMenuStore((state) => state.setMenuPins);
   const [isPinnedToMenu, setIsPinnedToMenu] = useState(
     db.shortcuts.exists(item.id)
@@ -368,14 +369,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
@@ -389,16 +383,6 @@ export const useActions = ({
   }
 
   const deleteItem = async () => {
-    if (isPublished) {
-      ToastManager.show({
-        heading: strings.notePublished(),
-        message: strings.unpublishToDelete(),
-        type: "error",
-        context: "local"
-      });
-      return;
-    }
-
     close();
     await sleep(300);
 
@@ -1028,20 +1012,6 @@ 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(),
@@ -1254,8 +1224,7 @@ export const useActions = ({
           : strings.moveToTrash(),
       icon: "delete-outline",
       type: "error",
-      onPress: deleteItem,
-      locked: isPublished
+      onPress: deleteItem
     });
   }
 
@@ -1293,10 +1262,47 @@ export const useActions = ({
             (item as Note).headline || (item as Notebook).description || "",
             (item as Color).colorCode
           );
-        } catch (e) {
-          /**
-          empty */
-        }
+        } catch (e) {}
+      }
+    });
+  }
+
+  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.setString(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"
+        });
       }
     });
   }

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

@@ -25,12 +25,13 @@ import {
   SYNC_CHECK_IDS,
   SubscriptionPlan,
   SyncStatusEvent,
-  User
+  User,
+  isInternalLink,
+  parseInternalLink
 } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import notifee from "@notifee/react-native";
 import NetInfo, { NetInfoSubscription } from "@react-native-community/netinfo";
-import dayjs from "dayjs";
 import React, { useCallback, useEffect, useRef } from "react";
 import {
   AppState,
@@ -49,7 +50,6 @@ import * as RNIap from "react-native-iap";
 import { DatabaseLogger, db, setupDatabase } from "../common/database";
 import { initializeLogger } from "../common/database/logger";
 import { MMKV } from "../common/database/mmkv";
-import { deleteDCacheFiles } from "../common/filesystem/io";
 import { endProgress, startProgress } from "../components/dialogs/progress";
 import Migrate from "../components/sheets/migrate";
 import NewFeature from "../components/sheets/new-feature";
@@ -60,7 +60,11 @@ import {
   resetTabStore,
   useTabStore
 } from "../screens/editor/tiptap/use-tab-store";
-import { editorController, editorState } from "../screens/editor/tiptap/utils";
+import {
+  clearAppState,
+  editorController,
+  editorState
+} from "../screens/editor/tiptap/utils";
 import { useDragState } from "../screens/settings/editor/state";
 import BackupService from "../services/backup";
 import BiometricService from "../services/biometrics";
@@ -87,7 +91,6 @@ import { clearAllStores, initAfterSync } from "../stores";
 import { refreshAllStores } from "../stores/create-db-collection-store";
 import { useAttachmentStore } from "../stores/use-attachment-store";
 import { useMessageStore } from "../stores/use-message-store";
-import { useRelationStore } from "../stores/use-relation-store";
 import { useSettingStore } from "../stores/use-setting-store";
 import { SyncStatus, useUserStore } from "../stores/use-user-store";
 import { updateStatusBarColor } from "../utils/colors";
@@ -95,7 +98,6 @@ import { BETA } from "../utils/constants";
 import {
   eAfterSync,
   eCloseSheet,
-  eCloseSimpleDialog,
   eEditorReset,
   eLoginSessionExpired,
   eOnLoadNote,
@@ -105,8 +107,12 @@ import {
 } from "../utils/events";
 import { getGithubVersion } from "../utils/github-version";
 import { fluidTabsRef } from "../utils/global-refs";
+import { NotesnookModule } from "../utils/notesnook-module";
 import { sleep } from "../utils/time";
 import useFeatureManager from "./use-feature-manager";
+import { deleteDCacheFiles } from "../common/filesystem/io";
+import dayjs from "dayjs";
+import { useRelationStore } from "../stores/use-relation-store";
 
 const onCheckSyncStatus = async (type: SyncStatusEvent) => {
   const { disableSync, disableAutoSync } = SettingsService.get();
@@ -165,16 +171,23 @@ 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();
     } else if (url.startsWith("ShareMedia://QuickNoteWidget")) {
+      clearAppState();
       editorState().movedAway = false;
       eSendEvent(eOnLoadNote, { newNote: true });
       fluidTabsRef.current?.goToPage("editor", false);
       return;
-    } else if (url.startsWith("https://app.notesnook.com/open_note?")) {
-      const id = new URL(url).searchParams.get("id");
+    } else if (
+      parsedLink?.type === "note" ||
+      url.startsWith("https://app.notesnook.com/open_note?")
+    ) {
+      const id = parsedLink?.id || new URL(url).searchParams.get("id");
+
       if (id) {
         const note = await db.notes.note(id);
         if (note) {
@@ -186,13 +199,15 @@ const onAppOpenedFromURL = async (event: {
         }
       }
     } else if (
-      url.startsWith("https://app.notesnook.com/open_notebook?") &&
+      (parsedLink?.type === "notebook" ||
+        url.startsWith("https://app.notesnook.com/open_notebook?")) &&
       !event.isInitialUrl
     ) {
-      const id = new URL(url).searchParams.get("id");
+      const id = parsedLink?.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,
@@ -201,13 +216,15 @@ const onAppOpenedFromURL = async (event: {
         }
       }
     } else if (
-      url.startsWith("https://app.notesnook.com/open_tag?") &&
+      (parsedLink?.type === "tag" ||
+        url.startsWith("https://app.notesnook.com/open_tag?")) &&
       !event.isInitialUrl
     ) {
-      const id = new URL(url).searchParams.get("id");
+      const id = parsedLink?.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,
@@ -217,13 +234,15 @@ const onAppOpenedFromURL = async (event: {
         }
       }
     } else if (
-      url.startsWith("https://app.notesnook.com/open_color?") &&
+      (parsedLink?.type === "color" ||
+        url.startsWith("https://app.notesnook.com/open_color?")) &&
       !event.isInitialUrl
     ) {
-      const id = new URL(url).searchParams.get("id");
+      const id = parsedLink?.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,
@@ -287,10 +306,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();
@@ -356,9 +372,23 @@ async function checkForShareExtensionLaunchedInBackground() {
       if (note) setTimeout(() => eSendEvent("loadingNote", note), 1);
       MMKV.removeItem("shareExtensionOpened");
     }
-  } catch (e) {
-    /**
-    empty */
+  } catch (e) {}
+}
+
+async function saveEditorState() {
+  if (!editorState().movedAway) {
+    const id = useTabStore.getState().getCurrentNoteId();
+    const note = id ? await db.notes.note(id) : undefined;
+    const locked = note && (await db.vaults.itemExists(note));
+    if (locked) return;
+    const state = JSON.stringify({
+      editing: editorState().currentlyEditing,
+      movedAway: editorState().movedAway,
+      timestamp: Date.now()
+    });
+    NotesnookModule.setAppState(state);
+  } else {
+    NotesnookModule.setAppState("");
   }
 }
 
@@ -576,13 +606,13 @@ export const useAppEvents = () => {
   }, [isAppLoading, onSyncComplete]);
 
   useEffect(() => {
-    if (initialUrl && !isAppLoading) {
+    if (initialUrl) {
       onAppOpenedFromURL({
         url: initialUrl!,
         isInitialUrl: true
       });
     }
-  }, [initialUrl, isAppLoading]);
+  }, [initialUrl]);
 
   const subscribeToPurchaseListeners = useCallback(async () => {
     if (Platform.OS === "android") {
@@ -822,6 +852,7 @@ export const useAppEvents = () => {
         Sync.run("global", false, "full");
         reconnectSSE();
         await checkForShareExtensionLaunchedInBackground();
+        NotesnookModule.setAppState("");
         let user = await db.user.getUser();
         if (user && !user?.isEmailConfirmed) {
           try {
@@ -844,6 +875,7 @@ export const useAppEvents = () => {
           eSendEvent(eEditorReset);
         }
       } else {
+        await saveEditorState();
         if (
           SettingsService.canLockAppInBackground() &&
           !useSettingStore.getState().requestBiometrics &&

apps/mobile/app/hooks/use-db-item.ts

@@ -135,7 +135,7 @@ export const useNoteLocked = (noteId: string | undefined) => {
       //@ts-ignore
       !globalThis["IS_SHARE_EXTENSION"]
     ) {
-      const unsub = useSettingStore.subscribe((state) => {
+      let unsub = useSettingStore.subscribe((state) => {
         if (!state.isAppLoading) {
           unsub();
           db.vaults

apps/mobile/app/hooks/use-feature-manager.ts

@@ -1,28 +1,15 @@
-/*
-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 { useAreFeaturesAvailable } from "@notesnook/common";
+import { strings } from "@notesnook/intl";
 import { useEffect } from "react";
 import { db } from "../common/database";
+import { presentDialog } from "../components/dialog/functions";
 import { useDragState } from "../screens/settings/editor/state";
+import { eSendEvent } from "../services/event-manager";
+import Navigation from "../services/navigation";
 import Notifications from "../services/notifications";
 import SettingsService from "../services/settings";
 import { useUserStore } from "../stores/use-user-store";
+import { eCloseSimpleDialog } from "../utils/events";
 
 export default function useFeatureManager() {
   const features = useAreFeaturesAvailable([
@@ -37,10 +24,11 @@ export default function useFeatureManager() {
     "disableTrashCleanup",
     "fullOfflineMode"
   ]);
+  const user = useUserStore((state) => state.user);
   const plan = useUserStore((state) => state.user?.subscription?.plan);
 
   useEffect(() => {
-    if (!useUserStore.getState().user || !features) return;
+    if (!user || !features) return;
 
     if (!features.createNoteFromNotificationDrawer.isAllowed) {
       SettingsService.setProperty("notifNotes", false);
@@ -81,7 +69,6 @@ export default function useFeatureManager() {
         db.settings.setDefaultTag(undefined);
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [features, plan]);
 
   return true;

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

@@ -16,17 +16,16 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { Plan, SubscriptionPlan } from "@notesnook/core";
-import React, { useEffect, useRef, useState } from "react";
-import { useAsync } from "react-async-hook";
+import { Plan, SubscriptionPlan, SubscriptionPlanId } from "@notesnook/core";
+import { useEffect, useState } from "react";
 import { Platform } from "react-native";
 import Config from "react-native-config";
 import * as RNIap from "react-native-iap";
 import { DatabaseLogger, db } from "../common/database";
 import PremiumService from "../services/premium";
-import SettingsService from "../services/settings";
 import { useSettingStore } from "../stores/use-setting-store";
 import { useUserStore } from "../stores/use-user-store";
+import SettingsService from "../services/settings";
 function numberWithCommas(x: string) {
   const parts = x.toString().split(".");
   parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
@@ -156,18 +155,9 @@ const planIdToIndex = (planId: string) => {
   return planIndex;
 };
 let WebPlanCache: Plan[];
-const isGithubRelease = Config.GITHUB_RELEASE === "true";
 const usePricingPlans = (options?: PricingPlansOptions) => {
+  const isGithubRelease = Config.GITHUB_RELEASE === "true";
   const user = useUserStore((state) => state.user);
-  const regionalDiscount = useAsync(
-    () =>
-      db.pricing.sku(
-        Platform.OS === "android" ? "google" : "apple",
-        "yearly",
-        "pro"
-      ),
-    []
-  );
   const [currentPlan, setCurrentPlan] = useState<string>(
     options?.planId || pricingPlans[2].id
   );
@@ -181,23 +171,18 @@ 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) => {
-      if (isGithubRelease)
-        return webPricingPlans.find(
-          (plan) => planIdToIndex(planId) === plan.plan && skuId === plan.period
-        );
-
-      return (
-        plansRef.current.find((p) => p.id === planId)?.subscriptions?.[skuId] ||
-        plansRef.current.find((p) => p.id === planId)?.products?.[skuId]
+  const getProduct = (planId: string, skuId: string) => {
+    if (isGithubRelease)
+      return webPricingPlans.find(
+        (plan) => planIdToIndex(planId) === plan.plan && skuId === plan.period
       );
-    },
-    [webPricingPlans]
-  );
+
+    return (
+      plans.find((p) => p.id === planId)?.subscriptions?.[skuId] ||
+      plans.find((p) => p.id === planId)?.products?.[skuId]
+    );
+  };
 
   const getProductAndroid = (planId: string, skuId: string) => {
     if (isGithubRelease)
@@ -211,88 +196,71 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
     return getProduct(planId, skuId) as RNIap.SubscriptionIOS;
   };
 
-  const hasTrialOffer = React.useCallback(
-    (planId?: string, productId?: string) => {
-      if (!selectedProductSku && !productId) return false;
+  const hasTrialOffer = (planId?: string, productId?: string) => {
+    if (!selectedProductSku && !productId) return false;
 
-      if (productId?.includes("5year")) return false;
-      if (isGithubRelease) {
-        if (
-          user?.subscription?.trialsAvailed?.some(
-            (plan) => plan === planIdToIndex(planId || currentPlan)
-          )
-        ) {
-          return false;
-        } else {
-          return true;
-        }
+    if (productId?.includes("5year")) return false;
+    if (isGithubRelease) {
+      if (
+        user?.subscription?.trialsAvailed?.some(
+          (plan) => plan === planIdToIndex(planId || currentPlan)
+        )
+      ) {
+        return false;
+      } else {
+        return true;
       }
+    }
 
-      return Platform.OS === "ios"
-        ? (
-            getProduct(
-              planId || currentPlan,
-              productId || selectedProductSku
-            ) as RNIap.SubscriptionIOS
-          )?.introductoryPricePaymentModeIOS === "FREETRIAL"
-        : (
-            getProduct(
-              planId || currentPlan,
-              productId || selectedProductSku
-            ) as RNIap.SubscriptionAndroid
-          )?.subscriptionOfferDetails?.[0]?.pricingPhases?.pricingPhaseList
-            ?.length > 1;
-    },
-    [
-      currentPlan,
-      getProduct,
-      selectedProductSku,
-      user?.subscription?.trialsAvailed
-    ]
-  );
+    return Platform.OS === "ios"
+      ? (
+          getProduct(
+            planId || currentPlan,
+            productId || selectedProductSku
+          ) as RNIap.SubscriptionIOS
+        )?.introductoryPricePaymentModeIOS === "FREETRIAL"
+      : (
+          getProduct(
+            planId || currentPlan,
+            productId || selectedProductSku
+          ) as RNIap.SubscriptionAndroid
+        )?.subscriptionOfferDetails?.[0]?.pricingPhases?.pricingPhaseList
+          ?.length > 1;
+  };
 
   // user && (!user.subscription || !user.subscription.expiry) ? true : false;
 
   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) {
-            /**
-          empty */
-          }
-        }
-        setLoadingPlans(false);
-      } 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) {}
+      }
+      setLoadingPlans(false);
     };
     loadPlans();
-  }, [options?.promoOffer, cancelPromo, hasTrialOffer]);
+  }, [options?.promoOffer, cancelPromo]);
 
   function getLocalizedPrice(
     product: RNIap.Subscription | RNIap.Product | Plan
@@ -308,8 +276,8 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
           (product as Plan).period === "yearly"
             ? (product as Plan).price.gross
             : (product as Plan).period === "5-year"
-              ? (product as Plan).price.gross
-              : (product as Plan).price.gross
+            ? (product as Plan).price.gross
+            : (product as Plan).price.gross
         }`;
       }
 
@@ -464,8 +432,8 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
       return period.endsWith("W")
         ? "week"
         : period.endsWith("M")
-          ? "month"
-          : "year";
+        ? "month"
+        : "year";
     } else {
       const unit = (product as RNIap.SubscriptionIOS)
         ?.subscriptionPeriodUnitIOS;
@@ -507,8 +475,8 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
         type: phase.billingPeriod.endsWith("W")
           ? "week"
           : phase.billingPeriod.endsWith("M")
-            ? "month"
-            : "year"
+          ? "month"
+          : "year"
       };
     } else {
       const productIos = product as RNIap.SubscriptionIOS;
@@ -562,15 +530,14 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
     const formattedPrice = numberWithCommas(monthlyPrice.toFixed(2));
 
     return isAtLeft
-      ? `${symbol}${formattedPrice}`
-      : `${formattedPrice}${symbol}`;
+      ? `${symbol} ${formattedPrice}`
+      : `${formattedPrice} ${symbol}`;
   };
 
   const getDiscountValue = (p1: string, p2: string, splitToMonth?: boolean) => {
-    let price1 =
-      Platform.OS === "ios" ? parseFloat(p1) : parseFloat(p1) / 1000000;
+    let price1 = Platform.OS === "ios" ? parseInt(p1) : parseInt(p1) / 1000000;
     const price2 =
-      Platform.OS === "ios" ? parseFloat(p2) : parseFloat(p2) / 1000000;
+      Platform.OS === "ios" ? parseInt(p2) : parseInt(p2) / 1000000;
 
     price1 = splitToMonth ? price1 / 12 : price1;
 
@@ -620,7 +587,7 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
     } else {
       priceValue = price / 1000000;
     }
-    const priceSymbol = localizedPrice.replace(/[\d,.]+/, "");
+    const priceSymbol = localizedPrice.replace(/[\s\d,.]+/, "");
 
     return { priceValue, priceSymbol, localizedPrice };
   };
@@ -640,8 +607,8 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
         (product as Plan).period === "yearly"
           ? ((product as Plan).price.gross / 12).toFixed(2)
           : (product as Plan).period === "5-year"
-            ? ((product as Plan).price.gross / (12 * 5)).toFixed(2)
-            : (product as Plan).price.gross
+          ? ((product as Plan).price.gross / (12 * 5)).toFixed(2)
+          : (product as Plan).price.gross
       }`;
     }
 
@@ -678,6 +645,21 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
         );
   };
 
+  async function getRegionalDiscount(plan: string, productId: string) {
+    if (productId !== "notesnook.pro.yearly") {
+      return;
+    }
+    try {
+      return await db.pricing.sku(
+        Platform.OS === "android" ? "google" : "apple",
+        "yearly",
+        plan as SubscriptionPlanId
+      );
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
   function isSubscribedToPlan(planId: string) {
     if (!PremiumService.get()) return false;
     return user?.subscription?.productId?.includes(planId);
@@ -748,7 +730,7 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
         (plan) => plan.plan === planIndex && plan.period === period
       );
     },
-    regionalDiscount: regionalDiscount.result,
+    getRegionalDiscount,
     isGithubRelease: isGithubRelease,
     isSubscribed: () => user?.subscription?.plan !== SubscriptionPlan.FREE,
     finish: () => options?.onBuy?.()

apps/mobile/app/hooks/use-shortcut-manager.ts

@@ -21,6 +21,7 @@ import { useEffect } from "react";
 import { NativeEventEmitter, NativeModule } from "react-native";
 import { useRef } from "react";
 import { Platform } from "react-native";
+import { Linking } from "react-native";
 import deviceInfoModule from "react-native-device-info";
 import { strings } from "@notesnook/intl";
 const ShortcutsEmitter = new NativeEventEmitter(
@@ -53,9 +54,14 @@ export const useShortcutManager = ({
   }, [shortcuts]);
 
   useEffect(() => {
+    Linking.getInitialURL().then((url) => {
+      if (url?.startsWith("ShareMedia://QuickNoteWidget")) {
+        onShortcutPressed(defaultShortcuts[0]);
+      }
+    });
     if (!isSupported()) return;
     Shortcuts.getInitialShortcut().then((shortcut) => {
-      if (initialShortcutRecieved.current || !shortcut) return;
+      if (initialShortcutRecieved.current) return;
       onShortcutPressed(shortcut);
       initialShortcutRecieved.current = true;
     });

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

@@ -47,7 +47,12 @@ import useGlobalSafeAreaInsets from "../hooks/use-global-safe-area-insets";
 import { useShortcutManager } from "../hooks/use-shortcut-manager";
 import { hideAllTooltips } from "../hooks/use-tooltip";
 import { useTabStore } from "../screens/editor/tiptap/use-tab-store";
-import { editorController, editorState } from "../screens/editor/tiptap/utils";
+import {
+  clearAppState,
+  editorController,
+  editorState,
+  getAppState
+} from "../screens/editor/tiptap/utils";
 import { DDS } from "../services/device-detection";
 import {
   eSendEvent,
@@ -113,9 +118,13 @@ export const FluidPanelsView = React.memo(
 
     useShortcutManager({
       onShortcutPressed: async (item) => {
-        if (!item) return;
-
+        if (!item && getAppState()) {
+          editorState().movedAway = false;
+          fluidTabsRef.current?.goToPage("editor", false);
+          return;
+        }
         if (item?.type === "notesnook.action.newnote") {
+          clearAppState();
           if (!fluidTabsRef.current) {
             setTimeout(() => {
               eSendEvent(eOnLoadNote, { newNote: true });
@@ -139,7 +148,7 @@ export const FluidPanelsView = React.memo(
       if (deviceMode === "smallTablet") {
         fluidTabsRef.current?.openDrawer(false);
       }
-    }, [deviceMode, setFullscreen]);
+    }, [deviceMode, dimensions.width, setFullscreen]);
 
     const closeFullScreenEditor = useCallback(
       (current: string) => {
@@ -158,7 +167,7 @@ export const FluidPanelsView = React.memo(
           fluidTabsRef.current?.goToIndex(2, false);
         }
       },
-      [deviceMode, setFullscreen]
+      [deviceMode, dimensions.width, setFullscreen]
     );
 
     const toggleView = useCallback(
@@ -196,6 +205,7 @@ export const FluidPanelsView = React.memo(
           eSendEvent(eCloseFullscreenEditor, current);
         }
 
+        const state = getAppState();
         setTimeout(() => {
           switch (current) {
             case "tablet":
@@ -207,15 +217,23 @@ export const FluidPanelsView = React.memo(
               }
               break;
             case "mobile":
-              fluidTabsRef.current?.goToPage(
-                fluidTabsRef.current?.page(),
-                false
-              );
+              if (
+                state &&
+                editorState().movedAway === false &&
+                useTabStore.getState().getCurrentNoteId()
+              ) {
+                fluidTabsRef.current?.goToPage("editor", false);
+              } else {
+                fluidTabsRef.current?.goToPage(
+                  fluidTabsRef.current?.page(),
+                  false
+                );
+              }
               break;
           }
         }, 0);
       },
-      [fullscreen, setDeviceModeState]
+      [deviceMode, fullscreen, setDeviceModeState]
     );
 
     const checkDeviceType = React.useCallback(
@@ -225,18 +243,18 @@ export const FluidPanelsView = React.memo(
         const nextDeviceMode = DDS.isLargeTablet()
           ? "tablet"
           : DDS.isSmallTab
-            ? "smallTablet"
-            : "mobile";
+          ? "smallTablet"
+          : "mobile";
         setDeviceMode(nextDeviceMode, size);
       },
-      [orientation, setDeviceMode]
+      [orientation, setDeviceMode, setDimensions]
     );
 
     useEffect(() => {
       if (orientation !== "UNKNOWN") {
         checkDeviceType(dimensions);
       }
-    }, [orientation, dimensions, checkDeviceType]);
+    }, [orientation, dimensions]);
 
     const _onLayout = React.useCallback(
       (event: LayoutChangeEvent) => {
@@ -251,7 +269,13 @@ export const FluidPanelsView = React.memo(
           setOrientation(OrientationType["PORTRAIT"]);
         }
       },
-      [setDimensions]
+      [
+        checkDeviceType,
+        deviceMode,
+        dimensions.width,
+        orientation,
+        setDeviceMode
+      ]
     );
 
     const PANE_OFFSET = useMemo(