mobile: fix material menu

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

apps/desktop/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@notesnook/desktop",
-  "version": "3.0.22",
+  "version": "3.0.23",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@notesnook/desktop",
-      "version": "3.0.22",
+      "version": "3.0.23",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "3.0.22",
+  "version": "3.0.23",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/cjs/index.js",

apps/desktop/scripts/build.mjs

@@ -36,7 +36,7 @@ await fs.rm("./build/", { force: true, recursive: true });
 
 if (args.rebuild || !existsSync(path.join(webAppPath, "build"))) {
   await exec(
-    "yarn nx build:desktop @notesnook/web",
+    "npx nx build:desktop @notesnook/web",
     path.join(__dirname, "..", "..", "..")
   );
 }
@@ -58,11 +58,13 @@ if (args.variant === "mas") {
 await exec(`yarn run build`);
 
 if (args.run) {
-  await exec(`yarn electron-builder --dir --x64`);
+  await exec(`yarn electron-builder --dir --${process.arch}`);
   if (process.platform === "win32") {
     await exec(`.\\output\\win-unpacked\\Notesnook.exe`);
   } else if (process.platform === "darwin") {
-    await exec(`./output/mac/Notesnook.app/Contents/MacOS/Notesnook`);
+    if (process.arch === "arm64")
+      await exec(`./output/mac-arm64/Notesnook.app/Contents/MacOS/Notesnook`);
+    else await exec(`./output/mac/Notesnook.app/Contents/MacOS/Notesnook`);
   } else {
     await exec(`./output/linux-unpacked/Notesnook`);
   }

apps/desktop/scripts/dev.mjs

@@ -70,8 +70,8 @@ async function onChange(first) {
 
   if (first) {
     await spawnAndWaitUntil(
-      ["yarn", "nx", "start:desktop", "@notesnook/web"],
-      path.join(__dirname, "..", "..", ".."),
+      ["npm", "run", "start:desktop"],
+      path.join(__dirname, "..", "..", "web"),
       (data) => data.includes("Network: use --host to expose")
     );
   }

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

@@ -1,385 +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 Sodium from "@ammarahmed/react-native-sodium";
-import { Platform } from "react-native";
-import "react-native-get-random-values";
-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 { MMKV } from "./mmkv";
-import { ToastManager } from "../../services/event-manager";
-
-// Database key cipher is persisted across different user sessions hence it has
-// it's independent storage which we will never clear. This is only used when application has
-// app lock with password enabled.
-export const CipherStorage = new MMKVLoader()
-  .withInstanceID("cipher_storage")
-  .setProcessingMode(
-    Platform.OS === "ios"
-      ? ProcessingModes.MULTI_PROCESS
-      : ProcessingModes.SINGLE_PROCESS
-  )
-  .disableIndexing()
-  .initialize();
-
-const IOS_KEYCHAIN_ACCESS_GROUP = "group.org.streetwriters.notesnook";
-const IOS_KEYCHAIN_SERVICE_NAME = "org.streetwriters.notesnook";
-const KEYCHAIN_SERVER_DBKEY = "notesnook:db";
-
-const NOTESNOOK_APPLOCK_KEY_SALT = "kBwr1Kre86ebOZ8ThLu2OA";
-const NOTESNOOK_DB_KEY_SALT = "SNuzOcEK3amoqL0WvPeKqw";
-
-const DB_KEY_CIPHER = "databaseKeyCipher";
-const USER_KEY_CIPHER = "userKeyCipher";
-const APPLOCK_CIPHER = "applockCipher";
-
-const KEYSTORE_CONFIG = Platform.select({
-  ios: {
-    accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED_THIS_DEVICE_ONLY,
-    accessGroup: IOS_KEYCHAIN_ACCESS_GROUP,
-    service: IOS_KEYCHAIN_SERVICE_NAME
-  },
-  android: {}
-});
-
-function generatePassword() {
-  const length = 80;
-  const crypto = window.crypto || window.msCrypto;
-  if (typeof crypto === "undefined") {
-    throw new Error(
-      "Crypto API is not supported. Please upgrade your web browser"
-    );
-  }
-  const charset =
-    "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&+_{}[]():<>/?;";
-  const indexes = crypto.getRandomValues(new Uint32Array(length));
-  let secret = "";
-  for (const index of indexes) {
-    secret += charset[index % charset.length];
-  }
-  return secret;
-}
-
-export async function encryptDatabaseKeyWithPassword(appLockPassword) {
-  const key = getDatabaseKey();
-  const appLockCredentials = await Sodium.deriveKey(
-    appLockPassword,
-    NOTESNOOK_APPLOCK_KEY_SALT
-  );
-  const databaseKeyCipher = await encrypt(appLockCredentials, key);
-  MMKV.setMap(DB_KEY_CIPHER, databaseKeyCipher);
-  // We reset the database key from keychain once app lock password is set.
-  await Keychain.resetInternetCredentials(KEYCHAIN_SERVER_DBKEY);
-  return true;
-}
-
-export async function restoreDatabaseKeyToKeyChain(appLockPassword) {
-  const databaseKeyCipher = CipherStorage.getMap(DB_KEY_CIPHER);
-  const databaseKey = await decrypt(
-    {
-      password: appLockPassword
-    },
-    databaseKeyCipher
-  );
-
-  await Keychain.setInternetCredentials(
-    KEYCHAIN_SERVER_DBKEY,
-    "notesnook",
-    databaseKey,
-    KEYSTORE_CONFIG
-  );
-  MMKV.removeItem(DB_KEY_CIPHER);
-  return true;
-}
-
-export async function setAppLockVerificationCipher(appLockPassword) {
-  try {
-    const appLockCredentials = await Sodium.deriveKey(
-      appLockPassword,
-      NOTESNOOK_APPLOCK_KEY_SALT
-    );
-    const encrypted = await encrypt(appLockCredentials, generatePassword());
-    CipherStorage.setMap(APPLOCK_CIPHER, encrypted);
-    DatabaseLogger.info("setAppLockVerificationCipher");
-  } catch (e) {
-    DatabaseLogger.error(e);
-    console.log(e);
-  }
-}
-
-export async function clearAppLockVerificationCipher() {
-  CipherStorage.removeItem(APPLOCK_CIPHER);
-}
-
-export async function validateAppLockPassword(appLockPassword) {
-  try {
-    const appLockCipher = CipherStorage.getMap(APPLOCK_CIPHER);
-    if (!appLockCipher) return true;
-    const key = await Sodium.deriveKey(appLockPassword, appLockCipher.salt);
-    const decrypted = await decrypt(key, appLockCipher);
-
-    DatabaseLogger.info(
-      `validateAppLockPassword: ${typeof decrypted === "string"}`
-    );
-    return typeof decrypted === "string";
-  } catch (e) {
-    DatabaseLogger.error(e);
-    return false;
-  }
-}
-
-let DB_KEY;
-export function clearDatabaseKey() {
-  DB_KEY = undefined;
-  DatabaseLogger.info("Cleared database key");
-}
-
-export async function getDatabaseKey(appLockPassword) {
-  if (DB_KEY) return DB_KEY;
-  try {
-    if (appLockPassword) {
-      const databaseKeyCipher = CipherStorage.getMap("databaseKeyCipher");
-      const databaseKey = await decrypt(
-        {
-          password: appLockPassword
-        },
-        databaseKeyCipher
-      );
-      DatabaseLogger.info("Getting database key from cipher");
-      DB_KEY = databaseKey;
-    }
-
-    if (!DB_KEY) {
-      const hasKey = await Keychain.hasInternetCredentials(
-        KEYCHAIN_SERVER_DBKEY
-      );
-      if (hasKey) {
-        let credentials = await Keychain.getInternetCredentials(
-          KEYCHAIN_SERVER_DBKEY,
-          KEYSTORE_CONFIG
-        );
-
-        DatabaseLogger.info("Getting database key from Keychain");
-        DB_KEY = credentials.password;
-      }
-    }
-
-    if (!DB_KEY) {
-      DatabaseLogger.info("Generating new database key");
-      const password = generatePassword();
-      const derivedDatabaseKey = await Sodium.deriveKey(
-        password,
-        NOTESNOOK_DB_KEY_SALT
-      );
-
-      DB_KEY = derivedDatabaseKey.key;
-
-      await Keychain.setInternetCredentials(
-        KEYCHAIN_SERVER_DBKEY,
-        "notesnook",
-        DB_KEY,
-        KEYSTORE_CONFIG
-      );
-    }
-
-    if (await Keychain.hasInternetCredentials("notesnook")) {
-      const userKeyCredentials = await Keychain.getInternetCredentials(
-        "notesnook",
-        KEYSTORE_CONFIG
-      );
-
-      if (userKeyCredentials) {
-        const userKeyCipher = await encrypt(
-          {
-            key: DB_KEY,
-            salt: NOTESNOOK_DB_KEY_SALT
-          },
-          userKeyCredentials.password
-        );
-        // Store encrypted user key in MMKV
-        MMKV.setMap(USER_KEY_CIPHER, userKeyCipher);
-        await Keychain.resetInternetCredentials("notesnook");
-      }
-      DatabaseLogger.info("Migrated user credentials to cipher storage");
-    }
-
-    return DB_KEY;
-  } catch (e) {
-    ToastManager.error(e, "Error getting database key");
-    console.log(e, "error");
-    DatabaseLogger.error(e);
-    return null;
-  }
-}
-
-export async function deriveCryptoKey(data) {
-  try {
-    let credentials = await Sodium.deriveKey(data.password, data.salt);
-    const userKeyCipher = await encrypt(
-      {
-        key: await getDatabaseKey(),
-        salt: NOTESNOOK_DB_KEY_SALT
-      },
-      credentials.key
-    );
-    DatabaseLogger.info("User key stored: ", !!userKeyCipher);
-
-    // Store encrypted user key in MMKV
-    MMKV.setMap(USER_KEY_CIPHER, userKeyCipher);
-    return credentials.key;
-  } catch (e) {
-    DatabaseLogger.error(e);
-  }
-}
-
-export async function getCryptoKey(_name) {
-  try {
-    const keyCipher = MMKV.getMap(USER_KEY_CIPHER);
-
-    if (!keyCipher) {
-      DatabaseLogger.info("User key cipher is null");
-      return null;
-    }
-
-    const key = await decrypt(
-      {
-        key: await getDatabaseKey(),
-        salt: keyCipher.salt
-      },
-      keyCipher
-    );
-
-    return key;
-  } catch (e) {
-    console.log("getCryptoKey", e);
-    DatabaseLogger.error(e);
-  }
-}
-
-export async function removeCryptoKey(_name) {
-  try {
-    MMKV.removeItem(USER_KEY_CIPHER);
-    await Keychain.resetInternetCredentials("notesnook");
-    return true;
-  } catch (e) {
-    DatabaseLogger.error(e);
-  }
-}
-
-export async function getRandomBytes(length) {
-  return await generateSecureRandom(length);
-}
-
-export async function hash(password, email) {
-  let result = await Sodium.hashPassword(password, email);
-  return result;
-}
-
-export async function generateCryptoKey(password, salt) {
-  try {
-    let credentials = await Sodium.deriveKey(password, salt || null);
-    return credentials;
-  } catch (e) {
-    DatabaseLogger.error(e);
-  }
-}
-
-export function getAlgorithm(base64Variant) {
-  return `xcha-argon2i13-${base64Variant}`;
-}
-
-export async function decrypt(password, data) {
-  if (!password.password && !password.key) return undefined;
-  if (password.password && password.password === "" && !password.key)
-    return undefined;
-  let _data = { ...data };
-  _data.output = "plain";
-
-  if (!password.salt) password.salt = data.salt;
-  return await Sodium.decrypt(password, _data);
-}
-
-export async function decryptMulti(password, data) {
-  if (!password.password && !password.key) return undefined;
-  if (password.password && password.password === "" && !password.key)
-    return undefined;
-
-  data = data.map((d) => {
-    d.output = "plain";
-    return d;
-  });
-
-  if (data.length && !password.salt) {
-    password.salt = data[0].salt;
-  }
-
-  return await Sodium.decryptMulti(password, data);
-}
-
-export function parseAlgorithm(alg) {
-  if (!alg) return {};
-  const [enc, kdf, compressed, compressionAlg, base64variant] = alg.split("-");
-  return {
-    encryptionAlgorithm: enc,
-    kdfAlgorithm: kdf,
-    compressionAlgorithm: compressionAlg,
-    isCompress: compressed === "1",
-    base64_variant: base64variant
-  };
-}
-
-export async function encrypt(password, data) {
-  if (!password.password && !password.key) return undefined;
-  if (password.password && password.password === "" && !password.key)
-    return undefined;
-
-  let message = {
-    type: "plain",
-    data: data
-  };
-  let result = await Sodium.encrypt(password, message);
-
-  return {
-    ...result,
-    alg: getAlgorithm(7)
-  };
-}
-
-export async function encryptMulti(password, data) {
-  if (!password.password && !password.key) return undefined;
-  if (password.password && password.password === "" && !password.key)
-    return undefined;
-
-  let results = await Sodium.encryptMulti(
-    password,
-    data.map((item) => ({
-      type: "plain",
-      data: item
-    }))
-  );
-
-  return !results
-    ? []
-    : results.map((result) => ({
-        ...result,
-        alg: getAlgorithm(7)
-      }));
-}

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

@@ -0,0 +1,475 @@
+/*
+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 Sodium, { Cipher, Password } from "@ammarahmed/react-native-sodium";
+import { SerializedKey } from "@notesnook/crypto";
+import { Platform } from "react-native";
+import "react-native-get-random-values";
+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
+// it's independent storage which we will never clear. This is only used when application has
+// app lock with password enabled.
+export const CipherStorage = new MMKVLoader()
+  .withInstanceID("cipher_storage")
+  .setProcessingMode(
+    Platform.OS === "ios"
+      ? ProcessingModes.MULTI_PROCESS
+      : ProcessingModes.SINGLE_PROCESS
+  )
+  .disableIndexing()
+  .initialize();
+
+const IOS_KEYCHAIN_ACCESS_GROUP = "group.org.streetwriters.notesnook";
+const IOS_KEYCHAIN_SERVICE_NAME = "org.streetwriters.notesnook";
+const KEYCHAIN_SERVER_DBKEY = "notesnook:db";
+
+const NOTESNOOK_APPLOCK_KEY_SALT = "kBwr1Kre86ebOZ8ThLu2OA";
+const NOTESNOOK_DB_KEY_SALT = "SNuzOcEK3amoqL0WvPeKqw";
+
+const DB_KEY_CIPHER = "databaseKeyCipher";
+const USER_KEY_CIPHER = "userKeyCipher";
+const APPLOCK_CIPHER = "applockCipher";
+
+const KEYSTORE_CONFIG = Platform.select({
+  ios: {
+    accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED_THIS_DEVICE_ONLY,
+    accessGroup: IOS_KEYCHAIN_ACCESS_GROUP,
+    service: IOS_KEYCHAIN_SERVICE_NAME
+  },
+  android: {}
+});
+
+function generatePassword() {
+  const length = 80;
+  //@ts-ignore
+  const crypto = window.crypto || window.msCrypto;
+  if (typeof crypto === "undefined") {
+    throw new Error(
+      "Crypto API is not supported. Please upgrade your web browser"
+    );
+  }
+  const charset =
+    "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&+_{}[]():<>/?;";
+  const indexes = crypto.getRandomValues(new Uint32Array(length));
+  let secret = "";
+  for (const index of indexes) {
+    secret += charset[index % charset.length];
+  }
+  return secret;
+}
+
+export async function encryptDatabaseKeyWithPassword(appLockPassword: string) {
+  const key = (await getDatabaseKey()) as string;
+  const appLockCredentials = await Sodium.deriveKey(
+    appLockPassword,
+    NOTESNOOK_APPLOCK_KEY_SALT
+  );
+  const databaseKeyCipher = (await encrypt(appLockCredentials, key)) as Cipher;
+  MMKV.setMap(DB_KEY_CIPHER, databaseKeyCipher);
+  // We reset the database key from keychain once app lock password is set.
+  await Keychain.resetInternetCredentials(KEYCHAIN_SERVER_DBKEY);
+  return true;
+}
+
+export async function restoreDatabaseKeyToKeyChain(appLockPassword: string) {
+  const databaseKeyCipher: Cipher = CipherStorage.getMap(DB_KEY_CIPHER);
+  const databaseKey = (await decrypt(
+    {
+      password: appLockPassword
+    },
+    databaseKeyCipher
+  )) as string;
+
+  await Keychain.setInternetCredentials(
+    KEYCHAIN_SERVER_DBKEY,
+    "notesnook",
+    databaseKey,
+    KEYSTORE_CONFIG
+  );
+  MMKV.removeItem(DB_KEY_CIPHER);
+  return true;
+}
+
+export async function setAppLockVerificationCipher(appLockPassword: string) {
+  try {
+    const appLockCredentials = await Sodium.deriveKey(
+      appLockPassword,
+      NOTESNOOK_APPLOCK_KEY_SALT
+    );
+    const encrypted = (await encrypt(
+      appLockCredentials,
+      generatePassword()
+    )) as Cipher;
+    CipherStorage.setMap(APPLOCK_CIPHER, encrypted);
+    DatabaseLogger.info("setAppLockVerificationCipher");
+  } catch (e) {
+    DatabaseLogger.error(e);
+    console.log(e);
+  }
+}
+
+export async function clearAppLockVerificationCipher() {
+  CipherStorage.removeItem(APPLOCK_CIPHER);
+}
+
+export async function validateAppLockPassword(appLockPassword: string) {
+  try {
+    const appLockCipher: Cipher = CipherStorage.getMap(APPLOCK_CIPHER);
+    if (!appLockCipher) return true;
+    const key = await Sodium.deriveKey(appLockPassword, appLockCipher.salt);
+    const decrypted = await decrypt(key, appLockCipher);
+
+    DatabaseLogger.info(
+      `validateAppLockPassword: ${typeof decrypted === "string"}`
+    );
+    return typeof decrypted === "string";
+  } catch (e) {
+    DatabaseLogger.error(e);
+    return false;
+  }
+}
+
+let DB_KEY: string | undefined;
+export function clearDatabaseKey() {
+  DB_KEY = undefined;
+  DatabaseLogger.info("Cleared database key");
+}
+
+export async function getDatabaseKey(appLockPassword?: string) {
+  if (DB_KEY) return DB_KEY;
+  if (appLockPassword) {
+    const databaseKeyCipher: Cipher = CipherStorage.getMap("databaseKeyCipher");
+    const databaseKey = await decrypt(
+      {
+        password: appLockPassword
+      },
+      databaseKeyCipher
+    );
+    DatabaseLogger.info("Getting database key from cipher");
+    DB_KEY = databaseKey;
+  }
+
+  if (!DB_KEY) {
+    const hasKey = await Keychain.hasInternetCredentials(KEYCHAIN_SERVER_DBKEY);
+    if (hasKey) {
+      const credentials = await Keychain.getInternetCredentials(
+        KEYCHAIN_SERVER_DBKEY
+      );
+
+      DatabaseLogger.info("Getting database key from Keychain");
+      DB_KEY = (credentials as Keychain.UserCredentials).password;
+    }
+  }
+
+  if (!DB_KEY) {
+    DatabaseLogger.info("Generating new database key");
+    const password = generatePassword();
+    const derivedDatabaseKey = await Sodium.deriveKey(
+      password,
+      NOTESNOOK_DB_KEY_SALT
+    );
+
+    DB_KEY = derivedDatabaseKey.key as string;
+
+    await Keychain.setInternetCredentials(
+      KEYCHAIN_SERVER_DBKEY,
+      "notesnook",
+      DB_KEY,
+      KEYSTORE_CONFIG
+    );
+  }
+
+  if (await Keychain.hasInternetCredentials("notesnook")) {
+    const userKeyCredentials = await Keychain.getInternetCredentials(
+      "notesnook"
+    );
+
+    if (userKeyCredentials) {
+      const userKeyCipher: Cipher = (await encrypt(
+        {
+          key: DB_KEY,
+          salt: NOTESNOOK_DB_KEY_SALT
+        },
+        userKeyCredentials.password
+      )) as Cipher;
+      // Store encrypted user key in MMKV
+      MMKV.setMap(USER_KEY_CIPHER, userKeyCipher);
+      await Keychain.resetInternetCredentials("notesnook");
+    }
+    DatabaseLogger.info("Migrated user credentials to cipher storage");
+  }
+
+  if (!DB_KEY) {
+    throw new Error(
+      `Failed to get database key, ${await Keychain.hasInternetCredentials(
+        KEYCHAIN_SERVER_DBKEY
+      )}`
+    );
+  }
+
+  return DB_KEY;
+}
+
+export async function deriveCryptoKeyFallback(data: SerializedKey) {
+  if (Platform.OS !== "ios") return;
+  try {
+    if (!data.password || !data.salt)
+      throw new Error(
+        "Invalid password and salt provided to deriveCryptoKeyFallback"
+      );
+
+    const credentials = await Sodium.deriveKeyFallback?.(
+      data.password,
+      data.salt
+    );
+
+    if (!credentials) return;
+
+    const userKeyCipher = (await encrypt(
+      {
+        key: (await getDatabaseKey()) as string,
+        salt: NOTESNOOK_DB_KEY_SALT
+      },
+      credentials.key as string
+    )) as Cipher<"base64">;
+    DatabaseLogger.info("User key fallback stored: ", {
+      userKeyCipher: !!userKeyCipher
+    });
+
+    // Store encrypted user key in MMKV
+    MMKV.setMap(USER_KEY_CIPHER, userKeyCipher);
+  } catch (e) {
+    DatabaseLogger.error(e);
+  }
+}
+
+export async function deriveCryptoKey(data: SerializedKey) {
+  try {
+    if (!data.password || !data.salt)
+      throw new Error("Invalid password and salt provided to deriveCryptoKey");
+
+    const credentials = (await Sodium.deriveKey(
+      data.password,
+      data.salt
+    )) as Password;
+    const userKeyCipher = (await encrypt(
+      {
+        key: (await getDatabaseKey()) as string,
+        salt: NOTESNOOK_DB_KEY_SALT
+      },
+      credentials.key as string
+    )) as Cipher<"base64">;
+    DatabaseLogger.info("User key stored: ", {
+      userKeyCipher: !!userKeyCipher
+    });
+
+    // Store encrypted user key in MMKV
+    MMKV.setMap(USER_KEY_CIPHER, userKeyCipher);
+  } catch (e) {
+    DatabaseLogger.error(e);
+  }
+}
+
+export async function getCryptoKey() {
+  try {
+    const keyCipher: Cipher = MMKV.getMap(USER_KEY_CIPHER);
+    if (!keyCipher) {
+      DatabaseLogger.info("User key cipher is null");
+      return undefined;
+    }
+
+    const key = await decrypt(
+      {
+        key: (await getDatabaseKey()) as string,
+        salt: keyCipher.salt
+      },
+      keyCipher
+    );
+
+    return key;
+  } catch (e) {
+    console.log("getCryptoKey", e);
+    DatabaseLogger.error(e);
+  }
+}
+
+export async function removeCryptoKey() {
+  try {
+    MMKV.removeItem(USER_KEY_CIPHER);
+    await Keychain.resetInternetCredentials("notesnook");
+    return true;
+  } catch (e) {
+    DatabaseLogger.error(e);
+  }
+}
+
+export async function getRandomBytes(length: number) {
+  return await generateSecureRandom(length);
+}
+
+export async function hash(
+  password: string,
+  email: string,
+  options?: { usesFallback?: boolean }
+) {
+  DatabaseLogger.log(`Hashing password: fallback: ${options?.usesFallback}`);
+
+  if (options?.usesFallback && Platform.OS !== "ios") {
+    return "";
+  }
+
+  return (
+    options?.usesFallback
+      ? await Sodium.hashPasswordFallback?.(password, email)
+      : await Sodium.hashPassword(password, email)
+  ) as string;
+}
+
+export async function generateCryptoKey(password: string, salt?: string) {
+  return Sodium.deriveKey(password, salt) as Promise<SerializedKey>;
+}
+
+export async function generateCryptoKeyFallback(
+  password: string,
+  salt?: string
+): Promise<SerializedKey> {
+  return Sodium.deriveKeyFallback?.(
+    password,
+    salt as string
+  ) as Promise<SerializedKey>;
+}
+
+export function getAlgorithm(base64Variant: number) {
+  return `xcha-argon2i13-${base64Variant}`;
+}
+
+export async function decrypt(password: SerializedKey, data: Cipher<"base64">) {
+  const _data = { ...data };
+  _data.output = "plain";
+
+  if (!password.salt) password.salt = data.salt;
+
+  if (Platform.OS === "ios" && !password.key && password.password) {
+    const key = await Sodium.deriveKey(password.password, password.salt);
+    try {
+      return await Sodium.decrypt(key, _data);
+    } catch (e) {
+      const fallbackKey = await Sodium.deriveKeyFallback?.(
+        password.password,
+        password.salt
+      );
+      if (Platform.OS === "ios" && fallbackKey) {
+        DatabaseLogger.info("Using fallback key for decryption");
+      }
+      if (fallbackKey) {
+        return await Sodium.decrypt(fallbackKey, _data);
+      } else {
+        throw e;
+      }
+    }
+  }
+
+  return await Sodium.decrypt(password, _data);
+}
+
+export async function decryptMulti(
+  password: Password,
+  data: Cipher<"base64">[]
+) {
+  data = data.map((d) => {
+    d.output = "plain";
+    return d;
+  });
+
+  if (data.length && !password.salt) {
+    password.salt = data[0].salt;
+  }
+
+  if (Platform.OS === "ios" && !password.key && password.password) {
+    const key = await Sodium.deriveKey(password.password, password.salt);
+    try {
+      return await Sodium.decryptMulti(key, data);
+    } catch (e) {
+      const fallbackKey = await Sodium.deriveKeyFallback?.(
+        password.password,
+        password.salt as string
+      );
+      if (Platform.OS === "ios" && fallbackKey) {
+        DatabaseLogger.info("Using fallback key for decryption");
+      }
+      if (fallbackKey) {
+        return await Sodium.decryptMulti(fallbackKey, data);
+      } else {
+        throw e;
+      }
+    }
+  }
+
+  return await Sodium.decryptMulti(password, data);
+}
+
+export function parseAlgorithm(alg: string) {
+  if (!alg) return {};
+  const [enc, kdf, compressed, compressionAlg, base64variant] = alg.split("-");
+  return {
+    encryptionAlgorithm: enc,
+    kdfAlgorithm: kdf,
+    compressionAlgorithm: compressionAlg,
+    isCompress: compressed === "1",
+    base64_variant: base64variant
+  };
+}
+
+export async function encrypt(password: SerializedKey, plainText: string) {
+  const result = await Sodium.encrypt<"base64">(password, {
+    type: "plain",
+    data: plainText
+  });
+
+  return {
+    ...result,
+    alg: getAlgorithm(7)
+  };
+}
+
+export async function encryptMulti(
+  password: SerializedKey,
+  plainText: string[]
+) {
+  const results = await Sodium.encryptMulti<"base64">(
+    password,
+    plainText.map((item) => ({
+      type: "plain",
+      data: item
+    }))
+  );
+
+  return !results
+    ? []
+    : results.map((result) => ({
+        ...result,
+        alg: getAlgorithm(7)
+      }));
+}

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

@@ -16,26 +16,26 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import "./logger";
 import { database } from "@notesnook/common";
-import { logger as dbLogger } from "@notesnook/core";
-import { Platform } from "react-native";
-import * as Gzip from "react-native-gzip";
-import EventSource from "../../utils/sse/even-source-ios";
-import AndroidEventSource from "../../utils/sse/event-source";
+import { logger as dbLogger, ICompressor } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
 import {
   SqliteAdapter,
   SqliteIntrospector,
   SqliteQueryCompiler
 } from "@streetwriters/kysely";
-import filesystem from "../filesystem";
-import Storage from "./storage";
-import { RNSqliteDriver } from "./sqlite.kysely";
-import { getDatabaseKey } from "./encryption";
+import { Platform } from "react-native";
+import * as Gzip from "react-native-gzip";
 import SettingsService from "../../services/settings";
-import { strings } from "@notesnook/intl";
+import EventSource from "../../utils/sse/even-source-ios";
+import AndroidEventSource from "../../utils/sse/event-source";
+import { FileStorage } from "../filesystem";
+import { getDatabaseKey } from "./encryption";
+import "./logger";
+import { RNSqliteDriver } from "./sqlite.kysely";
+import { Storage } from "./storage";
 
-export async function setupDatabase(password) {
+export async function setupDatabase(password?: string) {
   const key = await getDatabaseKey(password);
   if (!key) throw new Error(strings.databaseSetupFailed());
 
@@ -47,17 +47,21 @@ export async function setupDatabase(password) {
     SSE_HOST: "https://events.streetwriters.co",
     SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
     ISSUES_HOST: "https://issues.streetwriters.co",
+    MONOGRAPH_HOST: "https://monogr.ph",
     ...(SettingsService.getProperty("serverUrls") || {})
   });
 
   database.setup({
     storage: Storage,
-    eventsource: Platform.OS === "ios" ? EventSource : AndroidEventSource,
-    fs: filesystem,
-    compressor: () => ({
-      compress: Gzip.deflate,
-      decompress: Gzip.inflate
-    }),
+    eventsource: (Platform.OS === "ios"
+      ? EventSource
+      : AndroidEventSource) as any,
+    fs: FileStorage,
+    compressor: async () =>
+      ({
+        compress: Gzip.deflate,
+        decompress: Gzip.inflate
+      } as ICompressor),
     batchSize: 100,
     sqliteOptions: {
       dialect: (name) => ({

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

@@ -26,7 +26,7 @@ import { CompiledQuery } from "@streetwriters/kysely";
 import { QuickSQLiteConnection, open } from "react-native-quick-sqlite";
 import { strings } from "@notesnook/intl";
 
-type Config = { dbName: string; async: boolean; location: string };
+type Config = { dbName: string; async: boolean; location?: string };
 
 export class RNSqliteDriver implements Driver {
   private connection?: DatabaseConnection;

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

@@ -16,58 +16,52 @@ 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 { Platform } from "react-native";
-import RNFetchBlob from "react-native-blob-util";
+import { IStorage } from "@notesnook/core";
+import { MMKVInstance } from "react-native-mmkv-storage";
 import {
   decrypt,
   decryptMulti,
   deriveCryptoKey,
+  deriveCryptoKeyFallback,
   encrypt,
   encryptMulti,
   generateCryptoKey,
   getCryptoKey,
-  getRandomBytes,
   hash,
-  removeCryptoKey
+  generateCryptoKeyFallback
 } from "./encryption";
 import { MMKV } from "./mmkv";
 
 export class KV {
-  /**
-   * @type {typeof MMKV}
-   */
-  storage = null;
-  constructor(storage) {
+  storage: MMKVInstance;
+  constructor(storage: MMKVInstance) {
     this.storage = storage;
   }
-  async read(key) {
-    if (!key) return null;
-    let data = this.storage.getString(key);
-    if (!data) return null;
+
+  async read<T>(key: string, isArray?: boolean) {
+    if (!key) return undefined;
+    const data = this.storage.getString(key);
+    if (!data) return undefined;
     try {
-      let parse = JSON.parse(data);
-      return parse;
+      return JSON.parse(data) as T;
     } catch (e) {
-      return data;
+      return data as T;
     }
   }
 
-  async write(key, data) {
+  async write<T>(key: string, data: T) {
     this.storage.setString(
       key,
       typeof data === "string" ? data : JSON.stringify(data)
     );
-
-    return true;
   }
 
-  async readMulti(keys) {
+  async readMulti<T>(keys: string[]) {
     if (keys.length <= 0) {
       return [];
     } else {
       try {
-        let data = await this.storage.getMultipleItemsAsync(
+        const data = await this.storage.getMultipleItemsAsync<any>(
           keys.slice(),
           "string"
         );
@@ -79,24 +73,24 @@ export class KV {
             obj = value;
           }
           return [key, obj];
-        });
+        }) as [string, T][];
       } catch (e) {
-        console.log(e);
+        return [];
       }
     }
   }
 
-  async remove(key) {
-    return this.storage.removeItem(key);
+  async remove(key: string) {
+    this.storage.removeItem(key);
   }
 
-  async removeMulti(keys) {
-    if (!keys) return true;
-    return this.storage.removeItems(keys);
+  async removeMulti(keys: string[]) {
+    if (!keys) return;
+    this.storage.removeItems(keys);
   }
 
   async clear() {
-    return this.storage.clearStore();
+    this.storage.clearStore();
   }
 
   async getAllKeys() {
@@ -113,54 +107,46 @@ export class KV {
     return keys;
   }
 
-  async writeMulti(items) {
-    return this.storage.setMultipleItemsAsync(items, "object");
+  async writeMulti(items: [string, any][]) {
+    await this.storage.setMultipleItemsAsync(items, "object");
   }
 }
 
 const DefaultStorage = new KV(MMKV);
 
-async function requestPermission() {
-  if (Platform.OS === "ios") return true;
-  return true;
-}
-async function checkAndCreateDir(path) {
-  let dir =
-    Platform.OS === "ios"
-      ? RNFetchBlob.fs.dirs.DocumentDir + path
-      : RNFetchBlob.fs.dirs.SDCardDir + "/Notesnook/" + path;
-
-  try {
-    let exists = await RNFetchBlob.fs.exists(dir);
-    let isDir = await RNFetchBlob.fs.isDir(dir);
-    if (!exists || !isDir) {
-      await RNFetchBlob.fs.mkdir(dir);
-    }
-  } catch (e) {
-    await RNFetchBlob.fs.mkdir(dir);
-  }
-  return dir;
-}
-
-export default {
-  read: (key) => DefaultStorage.read(key),
-  write: (key, value) => DefaultStorage.write(key, value),
-  readMulti: (keys) => DefaultStorage.readMulti(keys),
-  remove: (key) => DefaultStorage.remove(key),
-  clear: () => DefaultStorage.clear(),
-  getAllKeys: () => DefaultStorage.getAllKeys(),
-  writeMulti: (items) => DefaultStorage.writeMulti(items),
-  removeMulti: (keys) => DefaultStorage.removeMulti(keys),
+export const Storage: IStorage = {
+  write<T>(key: string, data: T): Promise<void> {
+    return DefaultStorage.write(key, data);
+  },
+  writeMulti<T>(entries: [string, T][]): Promise<void> {
+    return DefaultStorage.writeMulti(entries);
+  },
+  readMulti<T>(keys: string[]): Promise<[string, T][]> {
+    return DefaultStorage.readMulti(keys);
+  },
+  read<T>(key: string, isArray?: boolean): Promise<T | undefined> {
+    return DefaultStorage.read(key, isArray);
+  },
+  remove(key: string): Promise<void> {
+    return DefaultStorage.remove(key);
+  },
+  removeMulti(keys: string[]): Promise<void> {
+    return DefaultStorage.removeMulti(keys);
+  },
+  clear(): Promise<void> {
+    return DefaultStorage.clear();
+  },
+  getAllKeys(): Promise<string[]> {
+    return DefaultStorage.getAllKeys();
+  },
+  hash,
+  getCryptoKey,
   encrypt,
+  encryptMulti,
   decrypt,
   decryptMulti,
-  getRandomBytes,
-  checkAndCreateDir,
-  requestPermission,
   deriveCryptoKey,
-  getCryptoKey,
-  removeCryptoKey,
-  hash,
   generateCryptoKey,
-  encryptMulti
+  generateCryptoKeyFallback,
+  deriveCryptoKeyFallback
 };

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

@@ -16,7 +16,6 @@ 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 Sodium from "@ammarahmed/react-native-sodium";
 import { getFileNameWithExtension } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
@@ -25,12 +24,12 @@ import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import * as ScopedStorage from "react-native-scoped-storage";
 import { subscribe, zip } from "react-native-zip-archive";
+import filesystem from ".";
 import { ShareComponent } from "../../components/sheets/export-notes/share";
-import { ToastManager, presentSheet } from "../../services/event-manager";
+import { presentSheet, ToastManager } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { IOS_APPGROUPID } from "../../utils/constants";
 import { DatabaseLogger, db } from "../database";
-import Storage from "../database/storage";
 import { createCacheDir, exists } from "./io";
 import { cacheDir, copyFileAsync, releasePermissions } from "./utils";
 
@@ -51,23 +50,23 @@ export async function downloadAllAttachments() {
 /**
  * Downloads provided attachments to a .zip file
  * on user's device.
- * @param {string[]} attachments
+ * @param {string[]} attachmentIds
  * @param onProgress
  * @returns
  */
-export async function downloadAttachments(attachments) {
+export async function downloadAttachments(attachmentIds: string[]) {
   await createCacheDir();
-  if (!attachments || !attachments.length) return;
+  if (!attachmentIds || !attachmentIds.length) return;
   const groupId = `download-all-${Date.now()}`;
 
   let outputFolder;
   if (Platform.OS === "android") {
     // Ask the user to select a directory to store the file
-    let file = await ScopedStorage.openDocumentTree(true);
+    const file = await ScopedStorage.openDocumentTree(true);
     outputFolder = file.uri;
     if (!outputFolder) return;
   } else {
-    outputFolder = await Storage.checkAndCreateDir("/downloads/");
+    outputFolder = await filesystem.checkAndCreateDir("/downloads/");
   }
 
   // Create the folder to zip;
@@ -83,7 +82,7 @@ export async function downloadAttachments(attachments) {
   await RNFetchBlob.fs.mkdir(zipSourceFolder);
 
   const isCancelled = () => {
-    if (useAttachmentStore.getState().downloading[groupId]?.canceled) {
+    if (useAttachmentStore.getState().downloading?.[groupId]?.canceled) {
       RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
       useAttachmentStore.getState().setDownloading({
         groupId,
@@ -97,19 +96,21 @@ export async function downloadAttachments(attachments) {
     }
   };
 
-  for (let i = 0; i < attachments.length; i++) {
+  for (let i = 0; i < attachmentIds.length; i++) {
     if (isCancelled()) return;
-    let attachment = await db.attachments.attachment(attachments[i]);
+    const attachment = await db.attachments.attachment(attachmentIds[i]);
+    if (!attachment) continue;
+
     const hash = attachment.hash;
     try {
       useAttachmentStore.getState().setDownloading({
         groupId: groupId,
         current: i + 1,
-        total: attachments.length,
+        total: attachmentIds.length,
         filename: attachment.hash
       });
       // Download to cache
-      let uri = await downloadAttachment(hash, false, {
+      const uri = await downloadAttachment(hash, false, {
         silent: true,
         cache: true,
         groupId: groupId
@@ -184,7 +185,7 @@ export async function downloadAttachments(attachments) {
     });
     releasePermissions(outputFolder);
     sub?.remove();
-    ToastManager.error(e, "Error zipping attachments");
+    ToastManager.error(e as Error, "Error zipping attachments");
   }
   // Remove source & zip file from cache.
   RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
@@ -194,38 +195,44 @@ export async function downloadAttachments(attachments) {
 }
 
 export default async function downloadAttachment(
-  hash,
+  hashOrId: string,
   global = true,
-  options = {
-    silent: false,
-    cache: false,
-    throwError: false,
-    groupId: undefined,
-    base64: false,
-    text: false
+  options?: {
+    silent?: boolean;
+    cache?: boolean;
+    throwError?: boolean;
+    groupId?: string;
+    base64?: boolean;
+    text?: boolean;
   }
 ) {
   await createCacheDir();
 
-  let attachment = await db.attachments.attachment(hash);
+  const attachment = await db.attachments.attachment(hashOrId);
   if (!attachment) {
-    DatabaseLogger.log("Attachment not found");
+    DatabaseLogger.log("Attachment not found", {
+      hash: hashOrId
+    });
     return;
   }
 
-  let folder = {};
-  if (!options.cache) {
+  let folder: {
+    uri: string;
+  } | null = null;
+  if (!options?.cache) {
     if (Platform.OS === "android") {
       folder = await ScopedStorage.openDocumentTree();
       if (!folder) return;
     } else {
-      folder.uri = await Storage.checkAndCreateDir("/downloads/");
+      folder = {
+        uri: await filesystem.checkAndCreateDir("/downloads/")
+      };
     }
   }
 
   try {
     useAttachmentStore.getState().setDownloading({
-      groupId: options.groupId || attachment.hash,
+      groupId: options?.groupId || attachment.hash,
       current: 0,
       total: 1,
       filename: attachment.filename
@@ -234,13 +241,13 @@ export default async function downloadAttachment(
     await db
       .fs()
       .downloadFile(
-        options.groupId || attachment.hash,
+        options?.groupId || attachment.hash,
         attachment.hash,
         attachment.chunkSize
       );
 
     useAttachmentStore.getState().setDownloading({
-      groupId: options.groupId || attachment.hash,
+      groupId: options?.groupId || attachment.hash,
       current: 1,
       total: 1,
       filename: attachment.filename,
@@ -252,7 +259,7 @@ export default async function downloadAttachment(
       return;
     }
 
-    if (options.base64 || options.text) {
+    if (options?.base64 || options?.text) {
       DatabaseLogger.log(`Starting to decrypt... hash: ${attachment.hash}`);
       return await db.attachments.read(
         attachment.hash,
@@ -260,14 +267,16 @@ export default async function downloadAttachment(
       );
     }
 
-    let filename = await getFileNameWithExtension(
+    const filename = await getFileNameWithExtension(
       attachment.filename,
       attachment.mimeType
     );
 
-    let key = await db.attachments.decryptKey(attachment.key);
+    const key = await db.attachments.decryptKey(attachment.key);
 
-    let info = {
+    if (!key) return;
+
+    const info = {
       iv: attachment.iv,
       salt: attachment.salt,
       length: attachment.size,
@@ -275,18 +284,18 @@ export default async function downloadAttachment(
       hash: attachment.hash,
       hashType: attachment.hashType,
       mime: attachment.mimeType,
-      fileName: options.cache ? undefined : filename,
-      uri: options.cache ? undefined : folder.uri,
+      fileName: options?.cache ? undefined : filename,
+      uri: options?.cache ? undefined : folder?.uri,
       chunkSize: attachment.chunkSize,
       appGroupId: IOS_APPGROUPID
     };
     let fileUri = await Sodium.decryptFile(
       key,
       info,
-      options.cache ? "cache" : "file"
+      options?.cache ? "cache" : "file"
     );
 
-    if (!options.silent) {
+    if (!options?.silent) {
       ToastManager.show({
         heading: strings.network.downloadSuccess(),
         message: strings.network.fileDownloaded(filename),
@@ -294,15 +303,15 @@ export default async function downloadAttachment(
       });
     }
 
-    if (Platform.OS === "ios" && !options.cache) {
-      fileUri = folder.uri + `/${filename}`;
+    if (Platform.OS === "ios" && !options?.cache) {
+      fileUri = folder?.uri + `/${filename}`;
     }
-    if (!options.silent) {
+    if (!options?.silent) {
       presentSheet({
         title: strings.network.fileDownloaded(),
         paragraph: strings.fileSaved(filename, Platform.OS),
         icon: "download",
-        context: global ? null : attachment.hash,
+        context: global ? "global" : attachment.hash,
         component: <ShareComponent uri={fileUri} name={filename} padding={12} />
       });
     }
@@ -319,7 +328,7 @@ export default async function downloadAttachment(
     }
 
     useAttachmentStore.getState().setDownloading({
-      groupId: options.groupId || attachment.hash,
+      groupId: options?.groupId || attachment.hash,
       current: 0,
       total: 0,
       filename: attachment.filename,
@@ -327,7 +336,7 @@ export default async function downloadAttachment(
     });
     DatabaseLogger.error(e);
     useAttachmentStore.getState().remove(attachment.hash);
-    if (options.throwError) {
+    if (options?.throwError) {
       throw e;
     }
   }

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

@@ -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 { RequestOptions } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import NetInfo from "@react-native-community/netinfo";
 import RNFetchBlob from "react-native-blob-util";
@@ -26,7 +27,13 @@ import { DatabaseLogger, db } from "../database";
 import { createCacheDir, exists } from "./io";
 import { ABYTES, cacheDir, getUploadedFileSize, parseS3Error } from "./utils";
 
-export async function downloadFile(filename, requestOptions, cancelToken) {
+export async function downloadFile(
+  filename: string,
+  requestOptions: RequestOptions,
+  cancelToken: {
+    cancel: (reason?: string) => Promise<void>;
+  }
+) {
   if (!requestOptions) {
     DatabaseLogger.log(
       `Error downloading file: ${filename}, reason: No requestOptions`
@@ -36,9 +43,11 @@ export async function downloadFile(filename, requestOptions, cancelToken) {
 
   DatabaseLogger.log(`Downloading ${filename}`);
   await createCacheDir();
-  let { url, headers, chunkSize } = requestOptions;
-  let tempFilePath = `${cacheDir}/${filename}_temp`;
-  let originalFilePath = `${cacheDir}/${filename}`;
+
+  const { url, headers, chunkSize } = requestOptions;
+  const tempFilePath = `${cacheDir}/${filename}_temp`;
+  const originalFilePath = `${cacheDir}/${filename}`;
+
   try {
     if (await exists(filename)) {
       DatabaseLogger.log(`File Exists already: ${filename}`);
@@ -46,6 +55,8 @@ export async function downloadFile(filename, requestOptions, cancelToken) {
     }
 
     const attachment = await db.attachments.attachment(filename);
+    if (!attachment) return false;
+
     const size = await getUploadedFileSize(filename);
 
     if (size === -1) {
@@ -71,21 +82,21 @@ export async function downloadFile(filename, requestOptions, cancelToken) {
       throw new Error(error);
     }
 
-    let res = await fetch(url, {
+    const resolveUrlResponse = await fetch(url, {
       method: "GET",
       headers
     });
 
-    if (!res.ok) {
+    if (!resolveUrlResponse.ok) {
       DatabaseLogger.log(
-        `Error downloading file: ${filename}, ${res.status}, ${res.statusText}, reason: Unable to resolve download url`
+        `Error downloading file: ${filename}, ${resolveUrlResponse.status}, ${resolveUrlResponse.statusText}, reason: Unable to resolve download url`
       );
       throw new Error(
-        `${res.status}: ${strings.failedToResolvedDownloadUrl()}`
+        `${resolveUrlResponse.status}: ${strings.failedToResolvedDownloadUrl()}`
       );
     }
 
-    const downloadUrl = await res.text();
+    const downloadUrl = await resolveUrlResponse.text();
 
     if (!downloadUrl) {
       DatabaseLogger.log(
@@ -95,12 +106,12 @@ export async function downloadFile(filename, requestOptions, cancelToken) {
     }
 
     DatabaseLogger.log(`Download starting: ${filename}`);
-    let request = RNFetchBlob.config({
+    const request = RNFetchBlob.config({
       path: tempFilePath,
       IOSBackgroundTask: true,
       overwrite: true
     })
-      .fetch("GET", downloadUrl, null)
+      .fetch("GET", downloadUrl)
       .progress(async (recieved, total) => {
         useAttachmentStore
           .getState()
@@ -109,15 +120,14 @@ export async function downloadFile(filename, requestOptions, cancelToken) {
         DatabaseLogger.log(`Downloading: ${filename}, ${recieved}/${total}`);
       });
 
-    cancelToken.cancel = () => {
+    cancelToken.cancel = async (reason) => {
       useAttachmentStore.getState().remove(filename);
       request.cancel();
       RNFetchBlob.fs.unlink(tempFilePath).catch(console.log);
-      DatabaseLogger.log(`Download cancelled: ${filename}`);
+      DatabaseLogger.log(`Download cancelled: ${reason} ${filename}`);
     };
 
-    let response = await request;
-    console.log(response.info().headers);
+    const response = await request;
 
     const contentType =
       response.info().headers?.["content-type"] ||
@@ -128,10 +138,10 @@ export async function downloadFile(filename, requestOptions, cancelToken) {
       throw new Error(`[${error.Code}] ${error.Message}`);
     }
 
-    let status = response.info().status;
+    const status = response.info().status;
     useAttachmentStore.getState().remove(filename);
 
-    if (exists(originalFilePath)) {
+    if (await exists(originalFilePath)) {
       await RNFetchBlob.fs.unlink(originalFilePath).catch(console.log);
     }
 
@@ -143,11 +153,14 @@ export async function downloadFile(filename, requestOptions, cancelToken) {
 
     return status >= 200 && status < 300;
   } catch (e) {
-    if (e.message !== "canceled" && !e.message.includes("NoSuchKey")) {
+    if (
+      (e as Error).message !== "canceled" &&
+      !(e as Error).message.includes("NoSuchKey")
+    ) {
       const toast = {
-        heading: strings.downloadError(),
-        message: e.message,
-        type: "error",
+        heading: strings.downloadError((e as Error).message),
+        message: (e as Error).message,
+        type: "error" as const,
         context: "global"
       };
       ToastManager.show(toast);
@@ -158,15 +171,14 @@ export async function downloadFile(filename, requestOptions, cancelToken) {
     useAttachmentStore.getState().remove(filename);
     RNFetchBlob.fs.unlink(tempFilePath).catch(console.log);
     RNFetchBlob.fs.unlink(originalFilePath).catch(console.log);
-    DatabaseLogger.error(e, {
-      url,
-      headers
+    DatabaseLogger.error(e, "Download failed: ", {
+      url
     });
     return false;
   }
 }
 
-export async function checkAttachment(hash) {
+export async function checkAttachment(hash: string) {
   const internetState = await NetInfo.fetch();
   const isInternetReachable =
     internetState.isConnected && internetState.isInternetReachable;
@@ -184,7 +196,7 @@ export async function checkAttachment(hash) {
         failed: `File length is 0. Please upload this file again from the attachment manager. (File hash: ${hash})`
       };
   } catch (e) {
-    return { failed: e?.message };
+    return { failed: (e as Error)?.message };
   }
   return { success: true };
 }

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

@@ -17,24 +17,41 @@ 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 { IFileStorage } from "@notesnook/core";
 import { checkAttachment, downloadFile } from "./download";
 import {
+  bulkExists,
+  clearCache,
   clearFileStorage,
+  deleteCacheFileByName,
+  deleteCacheFileByPath,
   deleteFile,
   exists,
-  readEncrypted,
-  writeEncryptedBase64,
+  getCacheSize,
   hashBase64,
+  readEncrypted,
+  writeEncryptedBase64
+} from "./io";
+import { uploadFile } from "./upload";
+import {
+  cancelable,
+  checkAndCreateDir,
+  getUploadedFileSize,
+  requestPermission
+} from "./utils";
+
+export default {
+  checkAttachment,
   clearCache,
   deleteCacheFileByName,
   deleteCacheFileByPath,
-  bulkExists,
-  getCacheSize
-} from "./io";
-import { uploadFile } from "./upload";
-import { cancelable, getUploadedFileSize } from "./utils";
+  getCacheSize,
+  requestPermission,
+  checkAndCreateDir,
+  getUploadedFileSize
+};
 
-export default {
+export const FileStorage: IFileStorage = {
   readEncrypted,
   writeEncryptedBase64,
   hashBase64,
@@ -44,10 +61,5 @@ export default {
   exists,
   clearFileStorage,
   getUploadedFileSize,
-  checkAttachment,
-  clearCache,
-  deleteCacheFileByName,
-  deleteCacheFileByPath,
-  bulkExists,
-  getCacheSize
+  bulkExists
 };

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

@@ -18,6 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import Sodium from "@ammarahmed/react-native-sodium";
+import {
+  FileEncryptionMetadataWithHash,
+  FileEncryptionMetadataWithOutputType,
+  Output,
+  RequestOptions
+} from "@notesnook/core";
+import { DataFormat, SerializedKey } from "@notesnook/crypto";
 import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import { eSendEvent } from "../../services/event-manager";
@@ -25,17 +32,21 @@ import { IOS_APPGROUPID } from "../../utils/constants";
 import { DatabaseLogger, db } from "../database";
 import { ABYTES, cacheDir, cacheDirOld, getRandomId } from "./utils";
 
-export async function readEncrypted(filename, key, cipherData) {
+export async function readEncrypted<TOutputFormat extends DataFormat>(
+  filename: string,
+  key: SerializedKey,
+  cipherData: FileEncryptionMetadataWithOutputType<TOutputFormat>
+) {
   await migrateFilesFromCache();
   DatabaseLogger.log("Read encrypted file...");
-  let path = `${cacheDir}/${filename}`;
+  const path = `${cacheDir}/${filename}`;
 
   try {
     if (!(await exists(filename))) {
-      return false;
+      return;
     }
 
-    let output = await Sodium.decryptFile(
+    const output = await Sodium.decryptFile(
       key,
       {
         ...cipherData,
@@ -47,15 +58,14 @@ export async function readEncrypted(filename, key, cipherData) {
 
     DatabaseLogger.log("File decrypted...");
 
-    return output;
+    return output as Output<TOutputFormat>;
   } catch (e) {
     RNFetchBlob.fs.unlink(path).catch(console.log);
     DatabaseLogger.error(e);
-    return false;
   }
 }
 
-export async function hashBase64(data) {
+export async function hashBase64(data: string) {
   const hash = await Sodium.hashFile({
     type: "base64",
     data,
@@ -67,61 +77,70 @@ export async function hashBase64(data) {
   };
 }
 
-export async function writeEncryptedBase64(data, key) {
+export async function writeEncryptedBase64(
+  data: string,
+  encryptionKey: SerializedKey,
+  mimeType: string
+): Promise<FileEncryptionMetadataWithHash> {
   await createCacheDir();
-  let filepath = cacheDir + `/${getRandomId("imagecache_")}`;
+  const filepath = cacheDir + `/${getRandomId("imagecache_")}`;
   await RNFetchBlob.fs.writeFile(filepath, data, "base64");
-  let output = await Sodium.encryptFile(key, {
+  const output = await Sodium.encryptFile(encryptionKey, {
     uri: Platform.OS === "ios" ? filepath : "file://" + filepath,
     type: "url"
   });
+
   RNFetchBlob.fs.unlink(filepath).catch(console.log);
   console.log("encrypted file output: ", output);
-  output.size = output.length;
-  delete output.length;
+
   return {
     ...output,
     alg: "xcha-stream"
   };
 }
 
-export async function deleteFile(filename, data) {
+export async function deleteFile(
+  filename: string,
+  requestOptions?: RequestOptions
+): Promise<boolean> {
   await createCacheDir();
-  let delFilePath = cacheDir + `/${filename}`;
-  if (!data) {
-    if (!filename) return;
-    RNFetchBlob.fs.unlink(delFilePath).catch(console.log);
+  const localFilePath = cacheDir + `/${filename}`;
+  if (!requestOptions) {
+    RNFetchBlob.fs.unlink(localFilePath).catch(console.log);
     return true;
   }
 
-  let { url, headers } = data;
+  const { url, headers } = requestOptions;
+
   try {
-    let response = await RNFetchBlob.fetch("DELETE", url, headers);
-    let status = response.info().status;
-    let ok = status >= 200 && status < 300;
+    const response = await RNFetchBlob.fetch("DELETE", url, headers);
+    const status = response.info().status;
+    const ok = status >= 200 && status < 300;
     if (ok) {
-      RNFetchBlob.fs.unlink(delFilePath).catch(console.log);
+      RNFetchBlob.fs.unlink(localFilePath).catch(console.log);
     }
     return ok;
   } catch (e) {
-    console.log("delete file: ", e, url, headers);
+    DatabaseLogger.error(e, "Delete file", {
+      url: url
+    });
     return false;
   }
 }
 
 export async function clearFileStorage() {
   try {
-    let files = await RNFetchBlob.fs.ls(cacheDir);
-    let oldCache = await RNFetchBlob.fs.ls(cacheDirOld);
+    const files = await RNFetchBlob.fs.ls(cacheDir);
+    const oldCache = await RNFetchBlob.fs.ls(cacheDirOld);
 
-    for (let file of files) {
+    for (const file of files) {
       await RNFetchBlob.fs.unlink(cacheDir + `/${file}`).catch(console.log);
     }
-    for (let file of oldCache) {
+    for (const file of oldCache) {
       await RNFetchBlob.fs.unlink(cacheDirOld + `/${file}`).catch(console.log);
     }
   } catch (e) {
-    console.log("clearFileStorage", e);
+    DatabaseLogger.error(e, "clearFileStorage");
   }
 }
 
@@ -146,11 +165,11 @@ export async function migrateFilesFromCache() {
       return;
     }
 
-    let files = await RNFetchBlob.fs.ls(cacheDir);
+    const files = await RNFetchBlob.fs.ls(cacheDir);
     console.log("Files to migrate:", files.join(","));
 
-    let oldCache = await RNFetchBlob.fs.ls(cacheDirOld);
-    for (let file of oldCache) {
+    const oldCache = await RNFetchBlob.fs.ls(cacheDirOld);
+    for (const file of oldCache) {
       if (file.startsWith("org.") || file.startsWith("com.")) continue;
       RNFetchBlob.fs
         .mv(cacheDirOld + `/${file}`, cacheDir + `/${file}`)
@@ -159,7 +178,7 @@ export async function migrateFilesFromCache() {
     }
     await RNFetchBlob.fs.createFile(migratedFilesPath, "1", "utf8");
   } catch (e) {
-    console.log("migrateFilesFromCache", e);
+    DatabaseLogger.error(e, "migrateFilesFromCache");
   }
 }
 
@@ -169,14 +188,14 @@ export async function clearCache() {
   eSendEvent("cache-cleared");
 }
 
-export async function deleteCacheFileByPath(path) {
+export async function deleteCacheFileByPath(path: string) {
   await RNFetchBlob.fs.unlink(path).catch(console.log);
 }
 
-export async function deleteCacheFileByName(name) {
+export async function deleteCacheFileByName(name: string) {
   const iosAppGroup =
     Platform.OS === "ios"
-      ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+      ? await (RNFetchBlob.fs as any).pathForAppGroup(IOS_APPGROUPID)
       : null;
   const appGroupPath = `${iosAppGroup}/${name}`;
   await RNFetchBlob.fs.unlink(appGroupPath).catch(console.log);
@@ -192,12 +211,12 @@ export async function deleteDCacheFiles() {
   }
 }
 
-export async function exists(filename) {
-  let path = `${cacheDir}/${filename}`;
+export async function exists(filename: string) {
+  const path = `${cacheDir}/${filename}`;
 
   const iosAppGroup =
     Platform.OS === "ios"
-      ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+      ? await (RNFetchBlob.fs as any).pathForAppGroup(IOS_APPGROUPID)
       : null;
   const appGroupPath = `${iosAppGroup}/${filename}`;
 
@@ -211,6 +230,7 @@ export async function exists(filename) {
 
   if (exists || existsInAppGroup) {
     const attachment = await db.attachments.attachment(filename);
+    if (!attachment) return false;
     const totalChunks = Math.ceil(attachment.size / attachment.chunkSize);
     const totalAbytes = totalChunks * ABYTES;
     const expectedFileSize = attachment.size + totalAbytes;
@@ -234,7 +254,7 @@ export async function exists(filename) {
   return exists;
 }
 
-export async function bulkExists(files) {
+export async function bulkExists(files: string[]) {
   try {
     await createCacheDir();
     const cacheFiles = await RNFetchBlob.fs.ls(cacheDir);
@@ -243,7 +263,7 @@ export async function bulkExists(files) {
     if (Platform.OS === "ios") {
       const iosAppGroup =
         Platform.OS === "ios"
-          ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+          ? await (RNFetchBlob.fs as any).pathForAppGroup(IOS_APPGROUPID)
           : null;
       const appGroupFiles = await RNFetchBlob.fs.ls(iosAppGroup);
       missingFiles = missingFiles.filter(
@@ -262,8 +282,8 @@ export async function getCacheSize() {
   const stat = await RNFetchBlob.fs.lstat(`file://` + cacheDir);
   let total = 0;
   console.log("Total files", stat.length);
-  stat.forEach((s) => {
-    total += parseInt(s.size);
+  stat.forEach((file) => {
+    total += parseInt(file.size as unknown as string);
   });
   return total;
 }

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

@@ -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 { RequestOptions } from "@notesnook/core";
 import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import { ToastManager } from "../../services/event-manager";
@@ -24,11 +25,22 @@ import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { IOS_APPGROUPID } from "../../utils/constants";
 import { DatabaseLogger, db } from "../database";
 import { createCacheDir } from "./io";
-import { cacheDir, checkUpload, getUploadedFileSize } from "./utils";
+import {
+  cacheDir,
+  checkUpload,
+  FileSizeResult,
+  getUploadedFileSize
+} from "./utils";
 
-export async function uploadFile(filename, requestOptions, cancelToken) {
+export async function uploadFile(
+  filename: string,
+  requestOptions: RequestOptions,
+  cancelToken: {
+    cancel: (reason?: string) => Promise<void>;
+  }
+) {
   if (!requestOptions) return false;
-  let { url, headers } = requestOptions;
+  const { url, headers } = requestOptions;
   await createCacheDir();
   DatabaseLogger.info(`Preparing to upload file: ${filename}`);
 
@@ -39,7 +51,7 @@ export async function uploadFile(filename, requestOptions, cancelToken) {
     if (!exists && Platform.OS === "ios") {
       const iosAppGroup =
         Platform.OS === "ios"
-          ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+          ? await (RNFetchBlob.fs as any).pathForAppGroup(IOS_APPGROUPID)
           : null;
       const appGroupPath = `${iosAppGroup}/${filename}`;
       filePath = appGroupPath;
@@ -54,14 +66,15 @@ export async function uploadFile(filename, requestOptions, cancelToken) {
 
     const fileSize = (await RNFetchBlob.fs.stat(filePath)).size;
 
-    let remoteFileSize = await getUploadedFileSize(filename);
-    if (remoteFileSize === -1) return false;
-    if (remoteFileSize > 0 && remoteFileSize === fileSize) {
+    const remoteFileSize = await getUploadedFileSize(filename);
+    if (remoteFileSize === FileSizeResult.Error) return false;
+
+    if (remoteFileSize > FileSizeResult.Empty && remoteFileSize === fileSize) {
       DatabaseLogger.log(`File ${filename} is already uploaded.`);
       return true;
     }
 
-    let uploadUrlResponse = await fetch(url, {
+    const uploadUrlResponse = await fetch(url, {
       method: "PUT",
       headers
     });
@@ -78,7 +91,8 @@ export async function uploadFile(filename, requestOptions, cancelToken) {
 
     DatabaseLogger.info(`Starting upload: ${filename}`);
 
-    let uploadRequest = RNFetchBlob.config({
+    const uploadRequest = RNFetchBlob.config({
+      //@ts-ignore
       IOSBackgroundTask: !globalThis["IS_SHARE_EXTENSION"]
     })
       .fetch(
@@ -98,14 +112,14 @@ export async function uploadFile(filename, requestOptions, cancelToken) {
         );
       });
 
-    cancelToken.cancel = () => {
+    cancelToken.cancel = async () => {
       useAttachmentStore.getState().remove(filename);
       uploadRequest.cancel();
     };
 
-    let uploadResponse = await uploadRequest;
-    let status = uploadResponse.info().status;
-    let uploaded = status >= 200 && status < 300;
+    const uploadResponse = await uploadRequest;
+    const status = uploadResponse.info().status;
+    const uploaded = status >= 200 && status < 300;
 
     useAttachmentStore.getState().remove(filename);
 
@@ -118,12 +132,13 @@ export async function uploadFile(filename, requestOptions, cancelToken) {
       );
     }
     const attachment = await db.attachments.attachment(filename);
+    if (!attachment) return false;
     await checkUpload(filename, requestOptions.chunkSize, attachment.size);
     DatabaseLogger.info(`File upload status: ${filename}, ${status}`);
     return uploaded;
   } catch (e) {
     useAttachmentStore.getState().remove(filename);
-    ToastManager.error(e, "File upload failed");
+    ToastManager.error(e as Error, "File upload failed");
     DatabaseLogger.error(e, "File upload failed", {
       filename
     });

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

@@ -17,11 +17,11 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { hosts, RequestOptions } from "@notesnook/core";
 import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import * as ScopedStorage from "react-native-scoped-storage";
 import { DatabaseLogger, db } from "../database";
-import { hosts } from "@notesnook/core";
 
 export const ABYTES = 17;
 export const cacheDirOld = RNFetchBlob.fs.dirs.CacheDir;
@@ -31,18 +31,13 @@ export const cacheDir =
     ? RNFetchBlob.fs.dirs.LibraryDir + "/.cache"
     : RNFetchBlob.fs.dirs.DocumentDir + "/.cache";
 
-export function getRandomId(prefix) {
+export function getRandomId(prefix: string) {
   return Math.random()
     .toString(36)
     .replace("0.", prefix || "");
 }
 
-/**
- *
- * @param {string | undefined} data
- * @returns
- */
-export function parseS3Error(data) {
+export function parseS3Error(data?: string) {
   const xml = typeof data === "string" ? data : null;
 
   const error = {
@@ -70,11 +65,19 @@ export function parseS3Error(data) {
   }
 }
 
-export function cancelable(operation) {
+export function cancelable(
+  operation: (
+    filename: string,
+    requestOptions: RequestOptions,
+    cancelToken: {
+      cancel: (reason?: string) => Promise<void>;
+    }
+  ) => Promise<boolean>
+) {
   const cancelToken = {
-    cancel: () => {}
+    cancel: async (reason?: string) => {}
   };
-  return (filename, requestOptions) => {
+  return (filename: string, requestOptions: RequestOptions) => {
     return {
       execute: () => operation(filename, requestOptions, cancelToken),
       cancel: async () => {
@@ -84,29 +87,35 @@ export function cancelable(operation) {
   };
 }
 
-export function copyFileAsync(source, dest) {
+export function copyFileAsync(source: string, dest: string) {
   return new Promise((resolve, reject) => {
-    ScopedStorage.copyFile(source, dest, (e, r) => {
+    //@ts-ignore
+    ScopedStorage.copyFile(source, dest, (e: any, r: any) => {
       if (e) {
         reject(e);
         return;
       }
-      resolve();
+      resolve(true);
     });
   });
 }
 
-export async function releasePermissions(path) {
+export async function releasePermissions(path: string) {
   if (Platform.OS === "ios") return;
   const uris = await ScopedStorage.getPersistedUriPermissions();
-  for (let uri of uris) {
+  for (const uri of uris) {
     if (path.startsWith(uri)) {
       await ScopedStorage.releasePersistableUriPermission(uri);
     }
   }
 }
 
-export async function getUploadedFileSize(hash) {
+export const FileSizeResult = {
+  Empty: 0,
+  Error: -1
+};
+
+export async function getUploadedFileSize(hash: string) {
   try {
     const url = `${hosts.API_HOST}/s3?name=${hash}`;
     const token = await db.tokenManager.getAccessToken();
@@ -115,16 +124,20 @@ export async function getUploadedFileSize(hash) {
       headers: { Authorization: `Bearer ${token}` }
     });
     const contentLength = parseInt(
-      attachmentInfo.headers?.get("content-length")
+      attachmentInfo.headers?.get("content-length") || "0"
     );
-    return isNaN(contentLength) ? 0 : contentLength;
+    return isNaN(contentLength) ? FileSizeResult.Empty : contentLength;
   } catch (e) {
     DatabaseLogger.error(e);
-    return -1;
+    return FileSizeResult.Error;
   }
 }
 
-export async function checkUpload(filename, chunkSize, expectedSize) {
+export async function checkUpload(
+  filename: string,
+  chunkSize: number,
+  expectedSize: number
+) {
   const size = await getUploadedFileSize(filename);
   const totalChunks = Math.ceil(size / chunkSize);
   const decryptedLength = size - totalChunks * ABYTES;
@@ -138,3 +151,25 @@ export async function checkUpload(filename, chunkSize, expectedSize) {
       : undefined;
   if (error) throw new Error(error);
 }
+
+export async function requestPermission() {
+  if (Platform.OS === "ios") return true;
+  return true;
+}
+export async function checkAndCreateDir(path: string) {
+  const dir =
+    Platform.OS === "ios"
+      ? RNFetchBlob.fs.dirs.DocumentDir + path
+      : RNFetchBlob.fs.dirs.SDCardDir + "/Notesnook/" + path;
+
+  try {
+    const exists = await RNFetchBlob.fs.exists(dir);
+    const isDir = await RNFetchBlob.fs.isDir(dir);
+    if (!exists || !isDir) {
+      await RNFetchBlob.fs.mkdir(dir);
+    }
+  } catch (e) {
+    await RNFetchBlob.fs.mkdir(dir);
+  }
+  return dir;
+}

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

@@ -68,11 +68,15 @@ export const ChangePassword = () => {
     }
     setLoading(true);
     try {
-      const result = await BackupService.run(false, "change-password-dialog");
-      if (!result.error)
+      const result = await BackupService.run(
+        false,
+        "change-password-dialog",
+        "partial"
+      );
+      if (result.error) {
         throw new Error(strings.backupFailed() + `: ${result.error}`);
+      }
 
-      await db.user.clearSessions();
       await db.user.changePassword(oldPassword.current, password.current);
       ToastManager.show({
         heading: strings.passwordChangedSuccessfully(),
@@ -84,6 +88,7 @@ export const ChangePassword = () => {
       await sleep(300);
       eSendEvent(eOpenRecoveryKeyDialog);
     } catch (e) {
+      console.log(e.stack);
       setLoading(false);
       ToastManager.show({
         heading: strings.passwordChangeFailed(),

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

@@ -38,7 +38,7 @@ import { useAppState } from "../../hooks/use-app-state";
 
 export interface BaseDialogProps extends PropsWithChildren {
   animation?: "fade" | "none" | "slide" | undefined;
-  visible: boolean;
+  visible?: boolean;
   onRequestClose?: () => void;
   onShow?: () => void;
   premium?: boolean;

apps/mobile/app/components/dialogs/color-picker/index.tsx

@@ -179,6 +179,7 @@ const ColorPicker = ({
                   title: title.current,
                   colorCode: selectedColor
                 });
+                if (!id) return;
                 useRelationStore.getState().update();
                 useMenuStore.getState().setColorNotes();
                 setVisible(false);

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

@@ -128,7 +128,6 @@ const Intro = ({ navigation }) => {
         style={{
           width: deviceMode !== "mobile" ? width / 2 : "100%",
           backgroundColor: colors.secondary.background,
-          marginBottom: 20,
           borderBottomWidth: 1,
           borderBottomColor: colors.primary.border,
           alignSelf: deviceMode !== "mobile" ? "center" : undefined,
@@ -138,7 +137,7 @@ const Intro = ({ navigation }) => {
           marginTop: deviceMode !== "mobile" ? 50 : null,
           paddingTop: insets.top + 10,
           paddingBottom: insets.top + 10,
-          minHeight: height * 0.7
+          minHeight: height * 0.7 - (insets.top + insets.bottom)
         }}
       >
         <SwiperFlatList

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

@@ -297,7 +297,6 @@ function getDate(item: Item, groupType?: GroupingKey): number {
       groupType
         ? db.settings.getGroupOptions(groupType)
         : {
-            groupBy: "default",
             sortBy: "dateEdited",
             sortDirection: "desc"
           },

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

@@ -129,7 +129,10 @@ export const PricingPlans = ({
       if (code.startsWith("com.streetwriters.notesnook")) {
         skuId = code;
       } else {
-        skuId = await db.offers?.getCode(code.split(":")[0], Platform.OS);
+        skuId = await db.offers?.getCode(
+          code.split(":")[0],
+          Platform.OS as "ios" | "android"
+        );
       }
 
       const products = await PremiumService.getProducts();

apps/mobile/app/components/sheets/change-email/index.tsx

@@ -134,8 +134,10 @@ export const ChangeEmail = ({ close }: ChangeEmailProps) => {
         ) : (
           <>
             <Input
+              key="code-input"
               fwdRef={codeInputRef}
-              placeholder={strings.verifyNewEmail()}
+              placeholder={strings.code()}
+              defaultValue=""
               onChangeText={(code) => {
                 emailChangeData.current.code = code;
               }}

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

@@ -150,7 +150,7 @@ const PublishNoteSheet = ({
         </View>
       ) : (
         <>
-          {isPublished && (
+          {isPublished && publishUrl ? (
             <View
               style={{
                 flexDirection: "row",
@@ -204,7 +204,7 @@ const PublishNoteSheet = ({
                 name="content-copy"
               />
             </View>
-          )}
+          ) : null}
 
           <TouchableOpacity
             onPress={() => {

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

@@ -17,12 +17,17 @@ 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 { sanitizeFilename } from "@notesnook/common";
+import { strings } from "@notesnook/intl";
 import Clipboard from "@react-native-clipboard/clipboard";
 import React, { createRef } from "react";
 import { Platform, View } from "react-native";
+import RNFetchBlob from "react-native-blob-util";
 import FileViewer from "react-native-file-viewer";
 import * as ScopedStorage from "react-native-scoped-storage";
 import Share from "react-native-share";
+import { db } from "../../../common/database";
+import filesystem from "../../../common/filesystem";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent,
@@ -30,8 +35,6 @@ import {
 } from "../../../services/event-manager";
 import { clearMessage } from "../../../services/message";
 import SettingsService from "../../../services/settings";
-import { db } from "../../../common/database";
-import Storage from "../../../common/database/storage";
 import { eOpenRecoveryKeyDialog } from "../../../utils/events";
 import { SIZE } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
@@ -41,9 +44,6 @@ import Seperator from "../../ui/seperator";
 import SheetWrapper from "../../ui/sheet";
 import { QRCode } from "../../ui/svg/lazy";
 import Paragraph from "../../ui/typography/paragraph";
-import RNFetchBlob from "react-native-blob-util";
-import { sanitizeFilename } from "@notesnook/common";
-import { strings } from "@notesnook/intl";
 
 class RecoveryKeySheet extends React.Component {
   constructor(props) {
@@ -126,7 +126,7 @@ class RecoveryKeySheet extends React.Component {
             "base64"
           );
         } else {
-          path = await Storage.checkAndCreateDir("/");
+          path = await filesystem.checkAndCreateDir("/");
           await RNFetchBlob.fs.writeFile(path + fileName, data, "base64");
         }
         ToastManager.show({
@@ -157,7 +157,7 @@ class RecoveryKeySheet extends React.Component {
         if (!file) return;
         path = file.uri;
       } else {
-        path = await Storage.checkAndCreateDir("/");
+        path = await filesystem.checkAndCreateDir("/");
         await RNFetchBlob.fs.writeFile(path + fileName, this.state.key, "utf8");
         path = path + fileName;
       }

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

@@ -68,19 +68,19 @@ export default function ReminderNotify({
 
   const QuickActions = [
     {
-      title: `5 ${strings.timeShort.minute}`,
+      title: `5 ${strings.timeShort.minute()}`,
       time: 5
     },
     {
-      title: `15 ${strings.timeShort.minute}`,
+      title: `15 ${strings.timeShort.minute()}`,
       time: 15
     },
     {
-      title: `30 ${strings.timeShort.minute}`,
+      title: `30 ${strings.timeShort.minute()}`,
       time: 30
     },
     {
-      title: `1 ${strings.timeShort.hour}`,
+      title: `1 ${strings.timeShort.hour()}`,
       time: 60
     }
   ];

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

@@ -556,9 +556,9 @@ export default function ReminderSheet({
             {Object.keys(ReminderNotificationModes).map((mode) => (
               <Button
                 key={mode}
-                title={strings.reminderNotificationModes[
+                title={strings.reminderNotificationModes(
                   mode as keyof typeof ReminderNotificationModes
-                ]()}
+                )}
                 style={{
                   marginRight: 12,
                   borderRadius: 100

apps/mobile/app/components/ui/animated-button/index.tsx

@@ -1,158 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import React from "react";
-import { ActivityIndicator, DimensionValue, ViewStyle } from "react-native";
-import Animated, {
-  FadeIn,
-  FadeOut,
-  Layout,
-  LightSpeedInLeft
-} from "react-native-reanimated";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { SIZE } from "../../../utils/size";
-import NativeTooltip from "../../../utils/tooltip";
-import { ButtonProps } from "../button";
-import { Pressable, useButton } from "../pressable";
-import Heading from "../typography/heading";
-import Paragraph from "../typography/paragraph";
-const AnimatedIcon = Animated.createAnimatedComponent(Icon);
-
-export const AnimatedButton = ({
-  height = 45,
-  width = null,
-  onPress,
-  loading = false,
-  title = null,
-  icon,
-  fontSize = SIZE.sm,
-  type = "transparent",
-  iconSize = SIZE.md,
-  style = {},
-  accentColor = "accent",
-  accentText = "light",
-  onLongPress,
-  tooltipText,
-  textStyle,
-  iconPosition = "left",
-  buttonType,
-  bold,
-  iconColor,
-  fwdRef,
-  ...restProps
-}: ButtonProps) => {
-  const { text } = useButton({
-    type,
-    accent: accentColor,
-    text: accentText
-  });
-  const textColor = buttonType?.text ? buttonType.text : text;
-  const Component = bold ? Heading : Paragraph;
-
-  return (
-    <Animated.View
-      entering={FadeIn}
-      exiting={FadeOut}
-      layout={Layout.springify()}
-    >
-      <Pressable
-        {...restProps}
-        fwdRef={fwdRef}
-        onPress={onPress}
-        onLongPress={(event) => {
-          if (onLongPress) {
-            onLongPress(event);
-            return;
-          }
-          if (tooltipText) {
-            NativeTooltip.show(event, tooltipText, NativeTooltip.POSITIONS.TOP);
-          }
-        }}
-        disabled={loading}
-        type={type}
-        accentColor={accentColor}
-        accentText={accentText}
-        customColor={buttonType?.color}
-        customSelectedColor={buttonType?.selected}
-        customOpacity={buttonType?.opacity}
-        customAlpha={buttonType?.alpha}
-        style={{
-          height: height,
-          width: (width as DimensionValue) || undefined,
-          paddingHorizontal: 12,
-          borderRadius: 5,
-          alignSelf: "center",
-          justifyContent: "center",
-          alignItems: "center",
-          flexDirection: "row",
-          ...(style as ViewStyle)
-        }}
-      >
-        {loading ? (
-          <ActivityIndicator color={textColor} size={fontSize + 4} />
-        ) : null}
-        {icon && !loading && iconPosition === "left" ? (
-          <AnimatedIcon
-            exiting={FadeOut.duration(100)}
-            entering={LightSpeedInLeft}
-            layout={Layout.springify()}
-            name={icon}
-            style={{
-              marginRight: 0
-            }}
-            color={iconColor || buttonType?.text || textColor}
-            size={iconSize}
-          />
-        ) : null}
-
-        {!title ? null : (
-          <Component
-            layout={Layout.springify()}
-            animated={true}
-            color={textColor as string}
-            size={fontSize}
-            numberOfLines={1}
-            style={[
-              {
-                marginLeft:
-                  icon || (loading && iconPosition === "left") ? 5 : 0,
-                marginRight:
-                  icon || (loading && iconPosition === "right") ? 5 : 0
-              },
-              textStyle
-            ]}
-          >
-            {title}
-          </Component>
-        )}
-
-        {icon && !loading && iconPosition === "right" ? (
-          <Icon
-            name={icon}
-            style={{
-              marginLeft: 0
-            }}
-            color={iconColor || buttonType?.text || textColor}
-            size={iconSize}
-          />
-        ) : null}
-      </Pressable>
-    </Animated.View>
-  );
-};

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

@@ -18,15 +18,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { View } from "react-native";
+import { DimensionValue, View } from "react-native";
 import { SvgXml } from "./lazy";
 export const SvgView = ({
   width = 250,
   height = 250,
   src
 }: {
-  width?: number | string;
-  height?: number | number;
+  width?: DimensionValue;
+  height?: DimensionValue;
   src?: string;
 }) => {
   if (!src) return null;

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

@@ -17,9 +17,15 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { User } from "@notesnook/core";
-import { EV, EVENTS, SYNC_CHECK_IDS, SyncStatusEvent } from "@notesnook/core";
-import { EventManagerSubscription } from "@notesnook/core";
+import {
+  EV,
+  EVENTS,
+  EventManagerSubscription,
+  SYNC_CHECK_IDS,
+  SyncStatusEvent,
+  User
+} from "@notesnook/core";
+import { strings } from "@notesnook/intl";
 import notifee from "@notifee/react-native";
 import NetInfo, { NetInfoSubscription } from "@react-native-community/netinfo";
 import React, { useCallback, useEffect, useRef } from "react";
@@ -41,6 +47,7 @@ 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 { endProgress, startProgress } from "../components/dialogs/progress";
 import Migrate from "../components/sheets/migrate";
 import NewFeature from "../components/sheets/new-feature";
 import { Walkthrough } from "../components/walkthroughs";
@@ -52,6 +59,7 @@ import {
 } from "../screens/editor/tiptap/utils";
 import { useDragState } from "../screens/settings/editor/state";
 import BackupService from "../services/backup";
+import BiometricService from "../services/biometrics";
 import {
   ToastManager,
   eSendEvent,
@@ -66,14 +74,17 @@ import {
   setRecoveryKeyMessage,
   setUpdateAvailableMessage
 } from "../services/message";
+import Navigation from "../services/navigation";
 import Notifications from "../services/notifications";
 import PremiumService from "../services/premium";
 import SettingsService from "../services/settings";
 import Sync from "../services/sync";
-import { initAfterSync } from "../stores";
+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 { useSettingStore } from "../stores/use-setting-store";
+import { changeSystemBarColors } from "../stores/use-theme-store";
 import { SyncStatus, useUserStore } from "../stores/use-user-store";
 import { updateStatusBarColor } from "../utils/colors";
 import { BETA } from "../utils/constants";
@@ -89,11 +100,8 @@ import {
 } from "../utils/events";
 import { getGithubVersion } from "../utils/github-version";
 import { tabBarRef } from "../utils/global-refs";
-import { sleep } from "../utils/time";
 import { NotesnookModule } from "../utils/notesnook-module";
-import { changeSystemBarColors } from "../stores/use-theme-store";
-import { strings } from "@notesnook/intl";
-import { endProgress, startProgress } from "../components/dialogs/progress";
+import { sleep } from "../utils/time";
 
 const onCheckSyncStatus = async (type: SyncStatusEvent) => {
   const { disableSync, disableAutoSync } = SettingsService.get();
@@ -140,6 +148,7 @@ const onUploadedAttachmentProgress = (data: any) => {
 };
 
 const onUserSessionExpired = async () => {
+  console.log("LOGGED OUT USER....");
   SettingsService.set({
     sessionExpired: true
   });
@@ -208,11 +217,19 @@ const onRequestPartialSync = async (
 };
 
 const onLogout = async (reason: string) => {
-  DatabaseLogger.log("User Logged Out" + reason);
-  Notifications.setupReminders(true);
-  SettingsService.set({
-    introCompleted: true
+  DatabaseLogger.log("User Logged Out " + reason);
+  setLoginMessage();
+  await PremiumService.setPremiumStatus();
+  await BiometricService.resetCredentials();
+  MMKV.clearStore();
+  clearAllStores();
+  setImmediate(() => {
+    refreshAllStores();
   });
+  Navigation.queueRoutesForUpdate();
+  SettingsService.resetSettings();
+  useUserStore.getState().setUser(null);
+  useUserStore.getState().setSyncing(false);
 };
 
 async function checkForShareExtensionLaunchedInBackground() {
@@ -480,7 +497,7 @@ export const useAppEvents = () => {
         }
 
         if (fullBackup) {
-          await BackupService.run(true, undefined, "full");
+          await BackupService.run(false, undefined, "full");
         }
       }
 
@@ -581,7 +598,8 @@ export const useAppEvents = () => {
       EV.subscribe(EVENTS.migrationStarted, (name) => {
         if (
           name !== "notesnook" ||
-          !SettingsService.getProperty("introCompleted")
+          !SettingsService.getProperty("introCompleted") ||
+          Config.isTesting === "true"
         )
           return;
         startProgress({
@@ -594,7 +612,8 @@ export const useAppEvents = () => {
       EV.subscribe(EVENTS.migrationFinished, (name) => {
         if (
           name !== "notesnook" ||
-          !SettingsService.getProperty("introCompleted")
+          !SettingsService.getProperty("introCompleted") ||
+          Config.isTesting === "true"
         )
           return;
         endProgress();

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

@@ -32,18 +32,11 @@ export function useAppState() {
     const subscription = AppState.addEventListener("change", onChange);
 
     return () => {
-      // @ts-expect-error - React Native >= 0.65
-      if (typeof subscription?.remove === "function") {
-        // @ts-expect-error - need update @types/react-native@0.65.x
-        subscription.remove();
-      } else {
-        // React Native < 0.65
-        AppState.removeEventListener("change", onChange);
-      }
+      subscription.remove();
     };
   }, []);
 
   return appState;
 }
 
-export { AppStateStatus };
+export type { AppStateStatus };

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

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { useEffect, useState } from "react";
-import { Keyboard, KeyboardEventListener, ScreenRect } from "react-native";
+import { Keyboard, KeyboardEventListener, KeyboardMetrics } from "react-native";
 
 const emptyCoordinates = Object.freeze({
   screenX: 0,
@@ -34,8 +34,8 @@ const initialValue = {
 export default function useKeyboard() {
   const [shown, setShown] = useState(false);
   const [coordinates, setCoordinates] = useState<{
-    start: undefined | ScreenRect;
-    end: ScreenRect;
+    start: undefined | KeyboardMetrics;
+    end: KeyboardMetrics;
   }>(initialValue);
   const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
 

apps/mobile/app/navigation/tabs-holder.js

@@ -97,7 +97,7 @@ const _TabsHolder = () => {
         tabBarRef.current?.goToPage(1, false);
         return;
       }
-      if (item.type === "notesnook.action.newnote") {
+      if (item && item.type === "notesnook.action.newnote") {
         clearAppState();
         if (!tabBarRef.current) {
           await sleep(3000);

apps/mobile/app/screens/editor/tiptap/picker.ts

@@ -388,7 +388,6 @@ export async function attachFile(
       encryptionInfo.mimeType = type;
       encryptionInfo.filename = filename;
       encryptionInfo.alg = "xcha-stream";
-      encryptionInfo.size = encryptionInfo.length;
       encryptionInfo.key = key;
       if (options?.reupload && exists) {
         const attachment = await db.attachments.attachment(hash);
@@ -397,6 +396,7 @@ export async function attachFile(
     } else {
       encryptionInfo = { hash: hash };
     }
+    console.log("FILE ENCRYPTED....", encryptionInfo);
     await db.attachments.add(encryptionInfo);
     return true;
   } catch (e) {

apps/mobile/app/screens/reminders/index.tsx

@@ -91,7 +91,6 @@ export const Reminders = ({
         />
 
         <FloatingButton
-          title={strings.setReminder()}
           onPress={() => {
             ReminderSheet.present();
           }}

apps/mobile/app/screens/search/index.tsx

@@ -59,15 +59,38 @@ export const Search = ({ route, navigation }: NavigationProps<"Search">) => {
       }
       try {
         setLoading(true);
-        const type =
-          route.params.type === "trash"
-            ? "trash"
-            : ((route.params?.type + "s") as keyof typeof db.lookup);
-        console.log(`Searching in ${type} for ${query}`);
-        const results = await db.lookup[type](
-          query,
-          route.params.items as FilteredSelector<Note>
-        ).sorted();
+        let results: VirtualizedGrouping<Item> | undefined;
+
+        switch (route.params.type) {
+          case "note":
+            results = await db.lookup
+              .notes(query, route.params.items as FilteredSelector<Note>)
+              .sorted();
+            break;
+          case "notebook":
+            results = await db.lookup.notebooks(query).sorted();
+            break;
+          case "tag":
+            results = await db.lookup.tags(query).sorted();
+            break;
+          case "reminder":
+            results = await db.lookup.reminders(query).sorted();
+            break;
+          case "trash":
+            results = await db.lookup.trash(query).sorted();
+            break;
+          case "attachment":
+            results = await db.lookup.attachments(query).sorted();
+            break;
+          default:
+            results = undefined;
+        }
+
+        if (!results) {
+          setSearchStatus(strings.noResultsFound(query));
+          setLoading(false);
+          return;
+        }
 
         console.log(
           `Found ${results.placeholders?.length} results for ${query}`

apps/mobile/app/screens/settings/2fa.tsx

@@ -17,6 +17,9 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { sanitizeFilename } from "@notesnook/common";
+import { strings } from "@notesnook/intl";
+import { useThemeColors, VariantsWithStaticColors } from "@notesnook/theme";
 import Clipboard from "@react-native-clipboard/clipboard";
 import React, {
   Dispatch,
@@ -26,11 +29,11 @@ import React, {
   useState
 } from "react";
 import { ActivityIndicator, Linking, Platform, View } from "react-native";
+import RNFetchBlob from "react-native-blob-util";
 import { FlatList } from "react-native-gesture-handler";
 import * as ScopedStorage from "react-native-scoped-storage";
-import RNFetchBlob from "react-native-blob-util";
 import { db } from "../../common/database";
-import Storage from "../../common/database/storage";
+import filesystem from "../../common/filesystem";
 import DialogHeader from "../../components/dialog/dialog-header";
 import { Button } from "../../components/ui/button";
 import { IconButton } from "../../components/ui/icon-button";
@@ -46,13 +49,10 @@ import {
   presentSheet,
   ToastManager
 } from "../../services/event-manager";
-import { useThemeColors, VariantsWithStaticColors } from "@notesnook/theme";
 import { useUserStore } from "../../stores/use-user-store";
 import { eCloseSheet } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
-import { sanitizeFilename } from "@notesnook/common";
-import { strings } from "@notesnook/intl";
 const mfaMethods: MFAMethod[] = [
   {
     id: "app",
@@ -525,7 +525,7 @@ export const MFARecoveryCodes = ({
                     if (!file) return;
                     path = file.uri;
                   } else {
-                    path = await Storage.checkAndCreateDir("/");
+                    path = await filesystem.checkAndCreateDir("/");
                     await RNFetchBlob.fs.writeFile(
                       path + fileName,
                       codeString,

apps/mobile/app/screens/settings/debug.tsx

@@ -17,24 +17,24 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import Clipboard from "@react-native-clipboard/clipboard";
-import { LogMessage } from "@notesnook/logger";
+import { sanitizeFilename } from "@notesnook/common";
 import { format, LogLevel, logManager } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
+import { LogMessage } from "@notesnook/logger";
+import { useThemeColors } from "@notesnook/theme";
+import Clipboard from "@react-native-clipboard/clipboard";
 import React, { useEffect, useRef, useState } from "react";
 import { FlatList, Platform, TouchableOpacity, View } from "react-native";
-import * as ScopedStorage from "react-native-scoped-storage";
 import RNFetchBlob from "react-native-blob-util";
-import Storage from "../../common/database/storage";
+import * as ScopedStorage from "react-native-scoped-storage";
+import filesystem from "../../common/filesystem";
 import { presentDialog } from "../../components/dialog/functions";
 import { IconButton } from "../../components/ui/icon-button";
 import { Notice } from "../../components/ui/notice";
 import Paragraph from "../../components/ui/typography/paragraph";
 import useTimer from "../../hooks/use-timer";
 import { ToastManager } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
 import { hexToRGBA } from "../../utils/colors";
-import { sanitizeFilename } from "@notesnook/common";
-import { strings } from "@notesnook/intl";
 
 export default function DebugLogs() {
   const { colors } = useThemeColors();
@@ -148,7 +148,7 @@ export default function DebugLogs() {
         if (!file) return;
         path = file.uri;
       } else {
-        path = await Storage.checkAndCreateDir("/");
+        path = await filesystem.checkAndCreateDir("/");
         await RNFetchBlob.fs.writeFile(path + fileName + ".txt", data, "utf8");
         path = path + fileName;
       }

apps/mobile/app/screens/settings/home.tsx

@@ -45,7 +45,7 @@ const Home = ({
   });
 
   const renderItem = ({ item }: { item: SettingSection; index: number }) =>
-    item.name === "account" ? (
+    item.id === "account" ? (
       <SettingsUserSection item={item} />
     ) : (
       <SectionGroup item={item} />

apps/mobile/app/screens/settings/picker/pickers.jsx

@@ -75,7 +75,7 @@ export const TrashIntervalPicker = createSettingsPicker({
       ? strings.never()
       : item === 1
       ? strings.reminderRecurringMode.day()
-      : item + " " + strings.days();
+      : strings.days(item);
   },
   getItemKey: (item) => item.toString(),
   options: [-1, 1, 7, 30, 365],

apps/mobile/app/screens/settings/restore-backup/index.tsx

@@ -28,7 +28,7 @@ import DocumentPicker from "react-native-document-picker";
 import * as ScopedStorage from "react-native-scoped-storage";
 import { unzip } from "react-native-zip-archive";
 import { DatabaseLogger, db } from "../../../common/database";
-import storage from "../../../common/database/storage";
+import filesystem from "../../../common/filesystem";
 import { deleteCacheFileByName } from "../../../common/filesystem/io";
 import { cacheDir, copyFileAsync } from "../../../common/filesystem/utils";
 import { presentDialog } from "../../../components/dialog/functions";
@@ -300,7 +300,7 @@ export const RestoreBackup = () => {
           return;
         }
       } else {
-        const path = await storage.checkAndCreateDir("/backups/");
+        const path = await filesystem.checkAndCreateDir("/backups/");
         files = await RNFetchBlob.fs.lstat(path);
       }
       files = files

apps/mobile/app/screens/settings/section-item.tsx

@@ -203,19 +203,15 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
             <Input
               {...item.inputProperties}
               onSubmit={(e) => {
-                if (e.nativeEvent.text) {
-                  SettingsService.set({
-                    [item.property as string]: e.nativeEvent.text
-                  });
-                }
+                SettingsService.set({
+                  [item.property as string]: e.nativeEvent.text
+                });
                 item.inputProperties?.onSubmitEditing?.(e);
               }}
               onChangeText={(text) => {
-                if (text) {
-                  SettingsService.set({
-                    [item.property as string]: text
-                  });
-                }
+                SettingsService.set({
+                  [item.property as string]: text
+                });
                 item.inputProperties?.onSubmitEditing?.(text as any);
               }}
               containerStyle={{ marginTop: 12 }}

apps/mobile/app/screens/settings/settings-data.tsx

@@ -18,8 +18,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { formatBytes } from "@notesnook/common";
+import { User } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import notifee from "@notifee/react-native";
+import Clipboard from "@react-native-clipboard/clipboard";
 import dayjs from "dayjs";
 import React from "react";
 import { Appearance, Linking, Platform } from "react-native";
@@ -28,7 +30,6 @@ import * as RNIap from "react-native-iap";
 import { enabled } from "react-native-privacy-snapshot";
 import ScreenGuardModule from "react-native-screenguard";
 import { DatabaseLogger, db } from "../../common/database";
-import { MMKV } from "../../common/database/mmkv";
 import filesystem from "../../common/filesystem";
 import { ChangePassword } from "../../components/auth/change-password";
 import { presentDialog } from "../../components/dialog/functions";
@@ -54,14 +55,11 @@ import {
   openVault,
   presentSheet
 } from "../../services/event-manager";
-import { setLoginMessage } from "../../services/message";
 import Navigation from "../../services/navigation";
 import Notifications from "../../services/notifications";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
 import Sync from "../../services/sync";
-import { clearAllStores } from "../../stores";
-import { refreshAllStores } from "../../stores/create-db-collection-store";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { SUBSCRIPTION_STATUS } from "../../utils/constants";
@@ -77,9 +75,6 @@ import { useDragState } from "./editor/state";
 import { verifyUser, verifyUserWithApplock } from "./functions";
 import { SettingSection } from "./types";
 import { getTimeLeft } from "./user-section";
-import Clipboard from "@react-native-clipboard/clipboard";
-
-type User = any;
 
 export const settingsGroups: SettingSection[] = [
   {
@@ -119,6 +114,10 @@ export const settingsGroups: SettingSection[] = [
             "MMMM D, YYYY"
           );
 
+          if (user.subscription.provider === 4) {
+            return strings.subEndsOn(expiryDate);
+          }
+
           return user.subscription?.type === 2
             ? strings.signedUpOn(startDate)
             : user.subscription?.type === 1
@@ -134,6 +133,39 @@ export const settingsGroups: SettingSection[] = [
             : strings.neverHesitate();
         }
       },
+      {
+        id: "redeem-gift-code",
+        name: strings.redeemGiftCode(),
+        description: strings.redeemGiftCodeDesc(),
+        hidden: (current) => {
+          return !current as boolean;
+        },
+        useHook: () =>
+          useUserStore(
+            (state) =>
+              state.user?.subscription.type == SUBSCRIPTION_STATUS.TRIAL ||
+              state.user?.subscription.type == SUBSCRIPTION_STATUS.BASIC
+          ),
+        icon: "gift",
+        modifer: () => {
+          presentDialog({
+            title: strings.redeemGiftCode(),
+            paragraph: strings.redeemGiftCodeDesc(),
+            input: true,
+            inputPlaceholder: strings.code(),
+            positiveText: strings.redeem(),
+            positivePress: async (value) => {
+              db.subscriptions.redeemCode(value).catch((e) => {
+                ToastManager.show({
+                  heading: "Error redeeming code",
+                  message: (e as Error).message,
+                  type: "error"
+                });
+              });
+            }
+          });
+        }
+      },
       {
         id: "account-settings",
         type: "screen",
@@ -447,18 +479,6 @@ export const settingsGroups: SettingSection[] = [
                       });
 
                       await db.user?.logout();
-                      setLoginMessage();
-                      await PremiumService.setPremiumStatus();
-                      await BiometricService.resetCredentials();
-                      MMKV.clearStore();
-                      clearAllStores();
-                      setImmediate(() => {
-                        refreshAllStores();
-                      });
-                      Navigation.queueRoutesForUpdate();
-                      SettingsService.resetSettings();
-                      useUserStore.getState().setUser(null);
-                      useUserStore.getState().setSyncing(false);
                       endProgress();
                     } catch (e) {
                       DatabaseLogger.error(e);
@@ -1174,7 +1194,12 @@ export const settingsGroups: SettingSection[] = [
           {
             id: "select-backup-dir",
             name: strings.selectBackupDir(),
-            description: strings.selectBackupDirDesc(),
+            description: () => {
+              const desc = strings.selectBackupDirDesc(
+                SettingsService.get().backupDirectoryAndroid?.path || ""
+              );
+              return desc[0] + " " + desc[1];
+            },
             icon: "folder",
             hidden: () =>
               !!SettingsService.get().backupDirectoryAndroid ||

apps/mobile/app/screens/settings/subscription.js

@@ -126,18 +126,19 @@ export const Subscription = () => {
       user.subscription?.type !== SUBSCRIPTION_STATUS.PREMIUM_EXPIRED &&
       user.subscription?.type !== SUBSCRIPTION_STATUS.BASIC ? (
         <Button
-          title={subscriptionProviderInfo?.title}
+          title={subscriptionProviderInfo?.title()}
           onPress={() => {
             presentSheet({
-              title: subscriptionProviderInfo.title,
-              paragraph: subscriptionProviderInfo.desc
+              title: subscriptionProviderInfo.title(),
+              paragraph: subscriptionProviderInfo.desc()
             });
           }}
           style={{
             alignSelf: "flex-start",
-            borderRadius: 100
+            width: "100%",
+            paddingHorizontal: 0
           }}
-          fontSize={SIZE.sm}
+          fontSize={SIZE.xs}
           height={30}
           type="secondaryAccented"
         />

apps/mobile/app/services/backup.ts

@@ -19,6 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { sanitizeFilename } from "@notesnook/common";
 import { formatDate } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
 import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import FileViewer from "react-native-file-viewer";
@@ -26,20 +27,14 @@ import * as ScopedStorage from "react-native-scoped-storage";
 import Share from "react-native-share";
 import { zip } from "react-native-zip-archive";
 import { DatabaseLogger, db } from "../common/database";
-import storage from "../common/database/storage";
-import filesystem from "../common/filesystem";
+import filesystem, { FileStorage } from "../common/filesystem";
 import { cacheDir, copyFileAsync } from "../common/filesystem/utils";
 import { presentDialog } from "../components/dialog/functions";
-import {
-  endProgress,
-  startProgress,
-  updateProgress
-} from "../components/dialogs/progress";
+import { endProgress, updateProgress } from "../components/dialogs/progress";
 import { eCloseSheet } from "../utils/events";
 import { sleep } from "../utils/time";
 import { ToastManager, eSendEvent, presentSheet } from "./event-manager";
 import SettingsService from "./settings";
-import { strings } from "@notesnook/intl";
 
 const MS_DAY = 86400000;
 const MS_WEEK = MS_DAY * 7;
@@ -90,9 +85,13 @@ async function checkBackupDirExists(reset = false, context = "global") {
         resolve(await getDirectoryAndroid());
         return;
       }
+      const desc = strings.selectBackupDirDesc(
+        SettingsService.get().backupDirectoryAndroid?.path || ""
+      );
+
       presentDialog({
         title: strings.selectBackupDir(),
-        paragraph: strings.selectBackupDirDesc(),
+        paragraph: desc[0] + " " + desc,
         positivePress: async () => {
           resolve(await getDirectoryAndroid());
         },
@@ -178,7 +177,7 @@ async function run(
   let path;
 
   if (Platform.OS === "ios") {
-    path = await storage.checkAndCreateDir("/backups");
+    path = await filesystem.checkAndCreateDir("/backups");
   }
 
   const backupFileName = sanitizeFilename(
@@ -232,7 +231,7 @@ async function run(
         updateProgress({
           progress: `Saving attachments in backup... ${file.hash}`
         });
-        if (await filesystem.exists(file.hash)) {
+        if (await FileStorage.exists(file.hash)) {
           await RNFetchBlob.fs.cp(
             `${cacheDir}/${file.hash}`,
             `${attachmentsDir}/${file.hash}`
@@ -299,7 +298,7 @@ async function run(
       path: path
     };
   } catch (e) {
-    ToastManager.error(e, strings.backupFailed(), context || "global");
+    ToastManager.error(e as Error, strings.backupFailed(), context || "global");
 
     if (
       (e as Error)?.message?.includes("android.net.Uri") &&

apps/mobile/app/services/biometrics.ts

@@ -23,7 +23,7 @@ import FingerprintScanner, {
 } from "@ammarahmed/react-native-fingerprint-scanner";
 import * as Keychain from "react-native-keychain";
 import { MMKV } from "../common/database/mmkv";
-import Storage from "../common/database/storage";
+import { Storage } from "../common/database/storage";
 import { useSettingStore } from "../stores/use-setting-store";
 import { ToastOptions, ToastManager } from "./event-manager";
 import { useUserStore } from "../stores/use-user-store";

apps/mobile/app/services/exporter.ts

@@ -23,7 +23,6 @@ import RNHTMLtoPDF from "react-native-html-to-pdf-lite";
 import * as ScopedStorage from "react-native-scoped-storage";
 import { zip } from "react-native-zip-archive";
 import { DatabaseLogger } from "../common/database/index";
-import Storage from "../common/database/storage";
 
 import {
   exportNote as _exportNote,
@@ -31,13 +30,13 @@ import {
   ExportableNote,
   exportNotes
 } from "@notesnook/common";
-import { Note } from "@notesnook/core";
-import { FilteredSelector } from "@notesnook/core";
-import { basename, dirname, join, extname } from "pathe";
+import { FilteredSelector, Note } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
+import { basename, dirname, extname, join } from "pathe";
+import filesystem from "../common/filesystem";
 import downloadAttachment from "../common/filesystem/download-attachment";
 import { cacheDir } from "../common/filesystem/utils";
 import { unlockVault } from "../utils/unlock-vault";
-import { strings } from "@notesnook/intl";
 
 const FolderNames: { [name: string]: string } = {
   txt: "Text",
@@ -49,7 +48,7 @@ const FolderNames: { [name: string]: string } = {
 async function getPath(type: string) {
   let path =
     Platform.OS === "ios" &&
-    (await Storage.checkAndCreateDir(`/exported/${type}/`));
+    (await filesystem.checkAndCreateDir(`/exported/${type}/`));
 
   if (Platform.OS === "android") {
     const file = await ScopedStorage.openDocumentTree(true);

apps/mobile/app/utils/note-bundle.js

@@ -48,7 +48,6 @@ export async function attachFile(uri, hash, type, filename, options) {
       encryptionInfo.mimeType = type;
       encryptionInfo.filename = filename;
       encryptionInfo.alg = "xcha-stream";
-      encryptionInfo.size = encryptionInfo.length;
       encryptionInfo.key = key;
       console.log(encryptionInfo);
       if (options?.reupload && exists) await db.attachments.reset(hash);

apps/mobile/native/android/app/build.gradle

@@ -116,7 +116,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled true
-        versionCode 3033
+        versionCode 3036
         versionName getNpmVersion()
         testBuildType System.getProperty('testBuildType', 'debug')
         testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'

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

@@ -70,7 +70,7 @@
 
             <meta-data
                 android:name="android.appwidget.provider"
-                android:resource="@xml/note_widget_info" />
+                android:resource="@xml/new_note_widget_info" />
         </receiver>
 
         <activity
@@ -129,6 +129,16 @@
                 <data android:mimeType="application/*" />
             </intent-filter>
 
+            <intent-filter android:label="Make Note">
+                <action android:name="android.intent.action.SEND_MULTIPLE" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <data android:mimeType="text/*" />
+                <data android:mimeType="image/*" />
+                <data android:mimeType="video/*" />
+                <data android:mimeType="image/*" />
+                <data android:mimeType="application/*" />
+            </intent-filter>
+
             <intent-filter android:label="Make Note">
                 <action android:name="android.intent.action.PROCESS_TEXT" />
                 <category android:name="android.intent.category.DEFAULT" />

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

@@ -5,6 +5,7 @@ import android.appwidget.AppWidgetManager;
 import android.appwidget.AppWidgetProvider;
 import android.content.Context;
 import android.content.Intent;
+import android.os.Bundle;
 import android.widget.RemoteViews;
 
 /**
@@ -24,21 +25,29 @@ public class NoteWidget extends AppWidgetProvider {
         appWidgetManager.updateAppWidget(appWidgetId, views);
     }
 
+    @Override
+    public void onAppWidgetOptionsChanged(Context context, AppWidgetManager appWidgetManager, int appWidgetId, Bundle newOptions) {
+        super.onAppWidgetOptionsChanged(context, appWidgetManager, appWidgetId, newOptions);
+        updateAppWidget(context, appWidgetManager, appWidgetId, newOptions);
+    }
+
+    private void updateAppWidget(Context context, AppWidgetManager appWidgetManager, int appWidgetId, Bundle options) {
+        int minWidth = options != null ? options.getInt(AppWidgetManager.OPTION_APPWIDGET_MIN_WIDTH) : 0;
+//        int minHeight = options != null ? options.getInt(AppWidgetManager.OPTION_APPWIDGET_MIN_HEIGHT) : 0;
+
+        int layoutId = (minWidth < 100) ? R.layout.note_widget_icon : R.layout.note_widget;
+
+        RemoteViews views = new RemoteViews(context.getPackageName(), layoutId);
+        appWidgetManager.updateAppWidget(appWidgetId, views);
+    }
+
+
     @Override
     public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
         // There may be multiple widgets active, so update all of them
         for (int appWidgetId : appWidgetIds) {
             updateAppWidget(context, appWidgetManager, appWidgetId);
+            updateAppWidget(context, appWidgetManager, appWidgetId,null);
         }
     }
-
-    @Override
-    public void onEnabled(Context context) {
-        // Enter relevant functionality for when the first widget is created
-    }
-
-    @Override
-    public void onDisabled(Context context) {
-        // Enter relevant functionality for when the last widget is disabled
-    }
 }

apps/mobile/native/android/app/src/main/res/drawable/add_note.xml

@@ -1,4 +1,4 @@
-<vector android:height="24dp" android:tint="#000000"
+<vector android:height="24dp" android:tint="@color/text"
     android:viewportHeight="24" android:viewportWidth="24"
     android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
     <path android:fillColor="@android:color/white" android:pathData="M14,2L6,2c-1.1,0 -1.99,0.9 -1.99,2L4,20c0,1.1 0.89,2 1.99,2L18,22c1.1,0 2,-0.9 2,-2L20,8l-6,-6zM16,16h-3v3h-2v-3L8,16v-2h3v-3h2v3h3v2zM13,9L13,3.5L18.5,9L13,9z"/>

apps/mobile/native/android/app/src/main/res/drawable/layout_bg.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <solid  android:color="#CCFFFFFF"/>
+    <solid  android:color="@color/background"/>
     <stroke android:width="0dp" android:color="#B1BCBE" />
     <corners android:radius="10dp"/>
     <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />

apps/mobile/native/android/app/src/main/res/layout/note_widget.xml

@@ -6,7 +6,6 @@
     android:padding="@dimen/widget_margin"
     android:theme="@style/ThemeOverlay.Notesnook.AppWidgetContainer">
 
-
     <LinearLayout
         android:layout_width="match_parent"
         android:id="@+id/widget_button"
@@ -18,21 +17,21 @@
         android:elevation="5dp"
         android:orientation="horizontal">
 
-        <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:layout_centerVertical="true">
-
-            <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center_vertical"
-                android:layout_marginLeft="8dp"
-                android:textSize="16sp"
-                android:text="Take a quick note." />
-        </LinearLayout>
-
+        <ImageView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center_vertical"
+            android:src="@drawable/add_note"
+            android:contentDescription="New note icon" />
 
+        <TextView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center_vertical"
+            android:layout_marginLeft="8dp"
+            android:textColor="@color/text"
+            android:textSize="16sp"
+            android:text="@string/take_a_quick_note" />
     </LinearLayout>
 
 </RelativeLayout>

apps/mobile/native/android/app/src/main/res/layout/note_widget_icon.xml

@@ -0,0 +1,13 @@
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="50dp"
+    android:background="@drawable/layout_bg"
+    android:padding="@dimen/widget_margin">
+
+    <ImageView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center"
+        android:padding="16dp"
+        android:src="@drawable/add_note" />
+</FrameLayout>

apps/mobile/native/android/app/src/main/res/values-night/colors.xml

@@ -5,4 +5,6 @@
     <color name="light_blue_600">#FF039BE5</color>
     <color name="light_blue_900">#FF01579B</color>
     <color name="bootsplash_background">#1f1f1f</color>
+    <color name="background">#1D1D1D</color>
+    <color name="text">#B4B4B4</color>
 </resources>

apps/mobile/native/android/app/src/main/res/values/colors.xml

@@ -5,4 +5,6 @@
     <color name="light_blue_600">#FF039BE5</color>
     <color name="light_blue_900">#FF01579B</color>
     <color name="bootsplash_background">#FFFFFF</color>
+    <color name="background">#FFFFFF</color>
+    <color name="text">#000000</color>
 </resources>

apps/mobile/native/android/app/src/main/res/values/strings.xml

@@ -3,4 +3,5 @@
     <string name="title_activity_share">NotesnookShare</string>
     <string name="appwidget_text">EXAMPLE</string>
     <string name="add_widget">Add widget</string>
+    <string name="take_a_quick_note">Take a quick note.</string>
 </resources>

apps/mobile/native/android/app/src/main/res/xml-v31/new_note_widget_info.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:initialKeyguardLayout="@layout/note_widget"
+    android:initialLayout="@layout/note_widget"
+    android:minWidth="50dp"
+    android:minHeight="50dp"
+    android:targetCellWidth="5"
+    android:targetCellHeight="1"
+    android:previewImage="@drawable/widget_preview"
+    android:resizeMode="horizontal|vertical"
+    android:updatePeriodMillis="86400000"
+    android:widgetCategory="home_screen"/>

apps/mobile/native/android/app/src/main/res/xml/new_note_widget_info.xml

@@ -2,9 +2,9 @@
 <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
     android:initialKeyguardLayout="@layout/note_widget"
     android:initialLayout="@layout/note_widget"
-    android:minWidth="300dp"
+    android:minWidth="50dp"
     android:minHeight="50dp"
     android:previewImage="@drawable/widget_preview"
-    android:resizeMode="horizontal"
+    android:resizeMode="horizontal|vertical"
     android:updatePeriodMillis="86400000"
-    android:widgetCategory="home_screen"></appwidget-provider>
+    android:widgetCategory="home_screen"/>

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

@@ -1,9 +1,3 @@
-- Added full support for localization in Notesnook
-- Improved search experience
-- Allow user to cancel logging in
-- Fixed scrolling focused line into view
-- Support self hosted monograph server
-- Fixed markdown link pasting in editor
-- Many other bug fixes and improvements
+- Bug fixes and small improvements
 
 Thank you for using Notesnook!

apps/mobile/native/ios/ExportOptions.plist

@@ -5,11 +5,11 @@
 	<key>provisioningProfiles</key>
 	<dict>
 		<key>org.streetwriters.notesnook</key>
-		<string>Notesnook App Distribution 2024</string>
+		<string>Notesnook App Distribution 2025</string>
         <key>org.streetwriters.notesnook.notewidget</key>
-		<string>Notesnook Widget Distribution 2024</string>
+		<string>Notesnook Widget Distribution 2025</string>
         <key>org.streetwriters.notesnook.share</key>
-		<string>Notesnook Share Distribution 2024</string>
+		<string>Notesnook Share Distribution 2025</string>
 	</dict>
 </dict>
 </plist>

apps/mobile/native/ios/Notesnook.xcodeproj/project.pbxproj

@@ -1063,7 +1063,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2120;
+				CURRENT_PROJECT_VERSION = 2123;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				ENABLE_BITCODE = NO;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -1137,7 +1137,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 3.0.23;
+				MARKETING_VERSION = 3.0.26;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -1168,7 +1168,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 2120;
+				CURRENT_PROJECT_VERSION = 2123;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 53CWBG3QUC;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -1242,7 +1242,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 3.0.23;
+				MARKETING_VERSION = 3.0.26;
 				ONLY_ACTIVE_ARCH = NO;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
@@ -1252,7 +1252,7 @@
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook;
 				PRODUCT_NAME = Notesnook;
 				PROVISIONING_PROFILE_SPECIFIER = "";
-				"PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "Notesnook App Distribution 2024";
+				"PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "Notesnook App Distribution 2025";
 				SWIFT_OBJC_BRIDGING_HEADER = "Notesnook-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";
@@ -1401,7 +1401,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2120;
+				CURRENT_PROJECT_VERSION = 2123;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -1413,7 +1413,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 3.0.23;
+				MARKETING_VERSION = 3.0.26;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.notewidget;
@@ -1444,7 +1444,7 @@
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = NO;
-				CURRENT_PROJECT_VERSION = 2120;
+				CURRENT_PROJECT_VERSION = 2123;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 53CWBG3QUC;
@@ -1457,12 +1457,12 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 3.0.23;
+				MARKETING_VERSION = 3.0.26;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.notewidget;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";
-				"PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "Notesnook Widget Distribution 2024";
+				"PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "Notesnook Widget Distribution 2025";
 				SKIP_INSTALL = YES;
 				SWIFT_COMPILATION_MODE = wholemodule;
 				SWIFT_OPTIMIZATION_LEVEL = "-O";
@@ -1487,7 +1487,7 @@
 				CODE_SIGN_ENTITLEMENTS = "Make Note/Make Note.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2120;
+				CURRENT_PROJECT_VERSION = 2123;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -1561,7 +1561,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 3.0.23;
+				MARKETING_VERSION = 3.0.26;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.share;
@@ -1592,7 +1592,7 @@
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = NO;
-				CURRENT_PROJECT_VERSION = 2120;
+				CURRENT_PROJECT_VERSION = 2123;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 53CWBG3QUC;
@@ -1667,12 +1667,12 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 3.0.23;
+				MARKETING_VERSION = 3.0.26;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.share;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";
-				"PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "Notesnook Share Distribution 2024";
+				"PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "Notesnook Share Distribution 2025";
 				SKIP_INSTALL = YES;
 				SWIFT_OBJC_BRIDGING_HEADER = "Make Note/Make Note-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
@@ -1744,10 +1744,7 @@
 				ONLY_ACTIVE_ARCH = YES;
 				OTHER_CFLAGS = "$(inherited)";
 				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					" ",
-				);
+				OTHER_LDFLAGS = "$(inherited)  ";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;
@@ -1811,10 +1808,7 @@
 				ONLY_ACTIVE_ARCH = NO;
 				OTHER_CFLAGS = "$(inherited)";
 				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					" ",
-				);
+				OTHER_LDFLAGS = "$(inherited)  ";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;

apps/mobile/native/ios/Podfile.lock

@@ -1019,9 +1019,9 @@ PODS:
   - react-native-screenguard (1.0.0):
     - React-Core
     - SDWebImage (~> 5.11.1)
-  - react-native-share-extension (2.6.0):
+  - react-native-share-extension (2.8.0):
     - React
-  - react-native-sodium (1.5.6):
+  - react-native-sodium (1.6.1):
     - React
   - react-native-theme-switch-animation (0.6.0):
     - DoubleConversion
@@ -1858,8 +1858,8 @@ SPEC CHECKSUMS:
   react-native-quick-sqlite: 18e1367c34faac90e37f6eb3e78c196e9b674b5d
   react-native-safe-area-context: b7daa1a8df36095a032dff095a1ea8963cb48371
   react-native-screenguard: 8b36a3df84c76cd2b82c477f71c26fa1c8cc14a0
-  react-native-share-extension: 25437eb1039f7409be6e80a7edf8d02b42e1dc99
-  react-native-sodium: 605c1523ec8ff5fbff5e9e7769bbacceb571a3c6
+  react-native-share-extension: 01b25fc15faf2510cc2529e98ca444f64e46238d
+  react-native-sodium: 4cb76086943a7f60c42b40ebca866695b360a196
   react-native-theme-switch-animation: d3eb50365a3829ce5572628888fa514752703f61
   react-native-webview: 553abd09f58e340fdc7746c9e2ae096839e99911
   React-nativeconfig: ba9a2e54e2f0882cf7882698825052793ed4c851
@@ -1915,8 +1915,8 @@ SPEC CHECKSUMS:
   SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6
   TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
   toolbar-android: 2a73856e98b750d7e71ce4644d3f41cc98211719
-  Yoga: 2246eea72aaf1b816a68a35e6e4b74563653ae09
+  Yoga: 950bbfd7e6f04790fdb51149ed51df41f329fcc8
 
 PODFILE CHECKSUM: aa07aca16c1d92394d8ce12f2c5fcaa8a3ae4997
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.16.2

apps/mobile/native/package.json

@@ -65,15 +65,15 @@
     "react-native-screenguard": "^1.0.0",
     "@formatjs/intl-locale": "4.0.0",
     "@formatjs/intl-pluralrules": "5.2.14",
-    "@ammarahmed/react-native-share-extension": "^2.6.0",
-    "@ammarahmed/react-native-sodium": "1.5.6",
+    "@ammarahmed/react-native-sodium": "^1.6.1",
     "react-native-mmkv-storage": "^0.10.2",
     "@react-native-community/datetimepicker": "^8.2.0",
     "react-native-exit-app": "github:ammarahm-ed/react-native-exit-app",
     "react-native-orientation": "github:yamill/react-native-orientation",
     "react-native-begin-background-task": "github:blockfirm/react-native-begin-background-task",
     "react-native-privacy-snapshot": "github:standardnotes/react-native-privacy-snapshot",
-    "@ammarahmed/react-native-fingerprint-scanner": "^5.0.0"
+    "@ammarahmed/react-native-fingerprint-scanner": "^5.0.0",
+    "@ammarahmed/react-native-share-extension": "^2.8.0"
   },
   "devDependencies": {
     "detox": "^20.27.6",
@@ -88,7 +88,6 @@
     "@tsconfig/react-native": "^3.0.2",
     "@types/html-to-text": "^8.0.1",
     "@types/metro-config": "^0.76.3",
-    "@types/react": "^18.2.6",
     "@types/react-native": "^0.69.1",
     "@types/react-native-vector-icons": "^6.4.10",
     "@types/react-test-renderer": "^18.0.0",

apps/mobile/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@notesnook/mobile",
-  "version": "3.0.23",
+  "version": "3.0.25",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@notesnook/mobile",
-      "version": "3.0.23",
+      "version": "3.0.25",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "workspaces": [
@@ -16,6 +16,7 @@
       "dependencies": {
         "@notesnook/common": "file:../../packages/common",
         "@notesnook/core": "file:../../packages/core",
+        "@notesnook/crypto": "file:../../packages/crypto",
         "@notesnook/editor": "file:../../packages/editor",
         "@notesnook/editor-mobile": "file:../../packages/editor-mobile",
         "@notesnook/intl": "file:../../packages/intl",
@@ -26,11 +27,13 @@
         "@trpc/client": "^10.45.2",
         "@trpc/react-query": "^10.45.2",
         "@trpc/server": "^10.45.2",
+        "@types/validator": "^13.12.2",
         "diffblazer": "^1.0.1",
         "react": "18.2.0",
         "react-native": "0.74.5"
       },
       "devDependencies": {
+        "@types/react": "^18.2.39",
         "fonteditor-core": "^2.1.11",
         "listr": "^0.14.3",
         "otplib": "12.0.1",
@@ -3708,7 +3711,6 @@
     "../../packages/crypto": {
       "name": "@notesnook/crypto",
       "version": "2.1.3",
-      "dev": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@notesnook/sodium": "file:../sodium"
@@ -24356,7 +24358,6 @@
     "../../packages/sodium": {
       "name": "@notesnook/sodium",
       "version": "2.1.3",
-      "dev": true,
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {
@@ -24975,12 +24976,10 @@
     },
     "../../packages/sodium/node_modules/libsodium-sumo": {
       "version": "0.7.15",
-      "dev": true,
       "license": "ISC"
     },
     "../../packages/sodium/node_modules/libsodium-wrappers-sumo": {
       "version": "0.7.15",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "libsodium-sumo": "^0.7.15"
@@ -28938,8 +28937,8 @@
         "@ammarahmed/react-native-background-fetch": "^4.2.2",
         "@ammarahmed/react-native-eventsource": "1.1.0",
         "@ammarahmed/react-native-fingerprint-scanner": "^5.0.0",
-        "@ammarahmed/react-native-share-extension": "^2.6.0",
-        "@ammarahmed/react-native-sodium": "1.5.6",
+        "@ammarahmed/react-native-share-extension": "^2.8.0",
+        "@ammarahmed/react-native-sodium": "^1.6.1",
         "@bam.tech/react-native-image-resizer": "3.0.5",
         "@callstack/repack": "^4.1.1",
         "@formatjs/intl-locale": "4.0.0",
@@ -29014,7 +29013,6 @@
         "@types/html-to-text": "^8.0.1",
         "@types/jest": "^29.5.14",
         "@types/metro-config": "^0.76.3",
-        "@types/react": "^18.2.6",
         "@types/react-native": "^0.69.1",
         "@types/react-native-vector-icons": "^6.4.10",
         "@types/react-test-renderer": "^18.0.0",
@@ -29077,17 +29075,17 @@
       }
     },
     "node_modules/@ammarahmed/react-native-share-extension": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/@ammarahmed/react-native-share-extension/-/react-native-share-extension-2.6.0.tgz",
-      "integrity": "sha512-vu/sN3kM9NK3pMkEfDLxCGweZyX1cU4P8netQVccVL/PE+nkN5tOp0fiHjof1yI8Nex4F35IlE9m5Vp2cgMleA==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@ammarahmed/react-native-share-extension/-/react-native-share-extension-2.8.0.tgz",
+      "integrity": "sha512-eDFVKiJJxjnIORveMUKVJGIhKfRNjqJWIoKS+JM88q8I8e3jHys9moyJAr9QM5oW/tZx4yyItl08yRXGnr7Grg==",
       "dependencies": {
         "react-native": "^0.63.1"
       }
     },
     "node_modules/@ammarahmed/react-native-sodium": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/@ammarahmed/react-native-sodium/-/react-native-sodium-1.5.6.tgz",
-      "integrity": "sha512-DASF/A/cDViTMRnCxvoM35F0v/l/cD8bpecfI+oNOCUmySqWqR37h1L4tdFfEzwnJxLcm/SAyyDSxaa+qgw7BQ=="
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@ammarahmed/react-native-sodium/-/react-native-sodium-1.6.1.tgz",
+      "integrity": "sha512-3qSTIPCEYN8DChHqYuv94ekgtyLF6dinH13JZXdxsj6DHRcZxu9syPrFNb8osItPNx3ncME6UGhPFnSL2eDI8g=="
     },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.1",
@@ -32905,6 +32903,10 @@
       "resolved": "../../packages/core",
       "link": true
     },
+    "node_modules/@notesnook/crypto": {
+      "resolved": "../../packages/crypto",
+      "link": true
+    },
     "node_modules/@notesnook/editor": {
       "resolved": "../../packages/editor",
       "link": true
@@ -34405,12 +34407,13 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "18.2.13",
+      "version": "18.3.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
+      "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
@@ -34447,11 +34450,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.3",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/semver": {
       "version": "7.5.0",
       "dev": true,
@@ -34461,6 +34459,12 @@
       "version": "2.0.1",
       "license": "MIT"
     },
+    "node_modules/@types/validator": {
+      "version": "13.12.2",
+      "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.12.2.tgz",
+      "integrity": "sha512-6SlHBzUW8Jhf3liqrGGXyTJSIFe4nqlJ5A5KaMZ2l/vbM3Wh3KSybots/wfWVzNLK4D1NZluDlSQIbIEPx6oyA==",
+      "license": "MIT"
+    },
     "node_modules/@types/yargs": {
       "version": "17.0.24",
       "license": "MIT",
@@ -35787,15 +35791,14 @@
       "license": "MIT"
     },
     "node_modules/call-bind": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
         "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
         "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
+        "set-function-length": "^1.2.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -35804,6 +35807,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz",
+      "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/caller-callsite": {
       "version": "2.0.0",
       "license": "MIT",
@@ -36841,6 +36856,19 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "dev": true,
@@ -37061,12 +37089,9 @@
       }
     },
     "node_modules/es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
       "engines": {
         "node": ">= 0.4"
       }
@@ -37085,6 +37110,17 @@
       "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
       "dev": true
     },
+    "node_modules/es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-set-tostringtag": {
       "version": "2.0.1",
       "dev": true,
@@ -38271,15 +38307,20 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.6.tgz",
+      "integrity": "sha512-qxsEs+9A+u85HhllWJJFicJfPDhRmjzoYdl64aMWW9yRIJmSyxdn8IEkuIM530/7T+lv0TIHd8L6Q/ra0tEoeA==",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "dunder-proto": "^1.0.0",
+        "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
         "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -38434,10 +38475,11 @@
       "license": "MIT"
     },
     "node_modules/gopd": {
-      "version": "1.0.1",
-      "license": "MIT",
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -38528,6 +38570,7 @@
     },
     "node_modules/has-proto": {
       "version": "1.0.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -38537,8 +38580,9 @@
       }
     },
     "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "license": "MIT",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -41300,6 +41344,14 @@
       "version": "1.2.5",
       "license": "Apache-2.0"
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "license": "CC0-1.0"

apps/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@notesnook/mobile",
-  "version": "3.0.23",
+  "version": "3.0.26",
   "private": true,
   "license": "GPL-3.0-or-later",
   "workspaces": [
@@ -24,6 +24,7 @@
     "release-android-bundle": "cd native/android && ./gradlew bundleRelease --no-daemon"
   },
   "devDependencies": {
+    "@types/react": "^18.2.39",
     "fonteditor-core": "^2.1.11",
     "listr": "^0.14.3",
     "otplib": "12.0.1",
@@ -37,18 +38,20 @@
   "dependencies": {
     "@notesnook/common": "file:../../packages/common",
     "@notesnook/core": "file:../../packages/core",
+    "@notesnook/crypto": "file:../../packages/crypto",
     "@notesnook/editor": "file:../../packages/editor",
     "@notesnook/editor-mobile": "file:../../packages/editor-mobile",
     "@notesnook/intl": "file:../../packages/intl",
     "@notesnook/logger": "file:../../packages/logger",
     "@notesnook/theme": "file:../../packages/theme",
     "@notesnook/themes-server": "file:../../servers/themes",
-    "diffblazer": "^1.0.1",
-    "react": "18.2.0",
-    "react-native": "0.74.5",
+    "@tanstack/react-query": "^4.36.1",
     "@trpc/client": "^10.45.2",
     "@trpc/react-query": "^10.45.2",
     "@trpc/server": "^10.45.2",
-    "@tanstack/react-query": "^4.36.1"
+    "@types/validator": "^13.12.2",
+    "diffblazer": "^1.0.1",
+    "react": "18.2.0",
+    "react-native": "0.74.5"
   }
-}
+}

apps/mobile/patches/react-native-material-menu+2.0.0.patch

@@ -1,12 +1,26 @@
 diff --git a/node_modules/react-native-material-menu/dist/Menu.js b/node_modules/react-native-material-menu/dist/Menu.js
-index 64fbf13..c7fcee0 100644
+index 64fbf13..beeda72 100644
 --- a/node_modules/react-native-material-menu/dist/Menu.js
 +++ b/node_modules/react-native-material-menu/dist/Menu.js
-@@ -132,10 +132,13 @@ class Menu extends react_1.default.Component {
-         else if (left < SCREEN_INDENT) {
-             left = SCREEN_INDENT;
+@@ -55,7 +55,7 @@ class Menu extends react_1.default.Component {
+     };
+     // Start menu animation
+     onMenuLayout = (e) => {
+-        if (this.state.menuState === States.Animating) {
++        if (this.state.menuState === States.Animating || this.state.menuState === States.Hidden) {
+             return;
+         }
+         const { width, height } = e.nativeEvent.layout;
+@@ -110,6 +110,7 @@ class Menu extends react_1.default.Component {
+         this.props.onRequestClose?.();
+     };
+     render() {
++
+         const { isRTL } = react_native_1.I18nManager;
+         const dimensions = react_native_1.Dimensions.get('window');
+         const { width: windowWidth } = dimensions;
+@@ -134,8 +135,10 @@ class Menu extends react_1.default.Component {
          }
-+        console.log(top, windowHeight - menuHeight - SCREEN_INDENT);
          // Flip by Y axis if menu hits bottom screen border
          if (top > windowHeight - menuHeight - SCREEN_INDENT) {
 +            const diff = top - (windowHeight - menuHeight - SCREEN_INDENT);

apps/mobile/scripts/optimize-fonts.mjs

@@ -81,7 +81,8 @@ const EXTRA_ICON_NAMES = [
   "notebook-plus",
   "arrow-right-bold-box-outline",
   "arrow-up-bold",
-  "login"
+  "login",
+  "gift"
 ];
 
 const __filename = fileURLToPath(import.meta.url);

apps/mobile/share/search.tsx

@@ -496,6 +496,7 @@ export const Search = ({
               const tagId = await db.tags.add({
                 title: searchKeyword
               });
+              if (!tagId) return;
               SearchSetters.selectTags(tagId);
               onSearch();
               checkQueryExists(searchKeyword);

apps/mobile/share/share.js

@@ -43,7 +43,7 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import isURL from "validator/lib/isURL";
 import { DatabaseLogger, db } from "../app/common/database";
-import Storage from "../app/common/database/storage";
+import { Storage } from "../app/common/database/storage";
 import { Button } from "../app/components/ui/button";
 import Heading from "../app/components/ui/typography/heading";
 import Paragraph from "../app/components/ui/typography/paragraph";
@@ -620,41 +620,45 @@ const ShareView = () => {
                     >
                       Tap to remove an attachment.
                     </Paragraph>
-                    <TouchableOpacity
-                      activeOpacity={1}
-                      style={{
-                        flexDirection: "row",
-                        alignSelf: "center",
-                        alignItems: "center",
-                        width: "100%",
-                        marginTop: 6
-                      }}
-                      onPress={() => {
-                        setCompress(!compress);
-                      }}
-                    >
-                      <Icon
-                        size={20}
-                        name={
-                          compress
-                            ? "checkbox-marked"
-                            : "checkbox-blank-outline"
-                        }
-                        color={
-                          compress ? colors.primary.accent : colors.primary.icon
-                        }
-                      />
-
-                      <Text
+                    {rawFiles.some((item) => isImage(item.type)) ? (
+                      <TouchableOpacity
+                        activeOpacity={1}
                         style={{
-                          flexShrink: 1,
-                          marginLeft: 3,
-                          fontSize: 12
+                          flexDirection: "row",
+                          alignSelf: "center",
+                          alignItems: "center",
+                          width: "100%",
+                          marginTop: 6
+                        }}
+                        onPress={() => {
+                          setCompress(!compress);
                         }}
                       >
-                        Compress image (recommended)
-                      </Text>
-                    </TouchableOpacity>
+                        <Icon
+                          size={20}
+                          name={
+                            compress
+                              ? "checkbox-marked"
+                              : "checkbox-blank-outline"
+                          }
+                          color={
+                            compress
+                              ? colors.primary.accent
+                              : colors.primary.icon
+                          }
+                        />
+
+                        <Text
+                          style={{
+                            flexShrink: 1,
+                            marginLeft: 3,
+                            fontSize: 12
+                          }}
+                        >
+                          Compress image(s) (recommended)
+                        </Text>
+                      </TouchableOpacity>
+                    ) : null}
                   </View>
                 ) : null}
                 <View

apps/mobile/tsconfig.json

@@ -20,5 +20,5 @@
     "maxNodeModuleJsDepth": 5,
     "downlevelIteration": true
   },
-  "exclude": ["native"]
+  "exclude": ["native", "e2e"]
 }

apps/monograph/package-lock.json

@@ -2928,22 +2928,6 @@
         "@styled-system/css": "^5.1.5"
       }
     },
-    "node_modules/@theme-ui/color-modes": {
-      "version": "0.16.2",
-      "resolved": "https://registry.npmjs.org/@theme-ui/color-modes/-/color-modes-0.16.2.tgz",
-      "integrity": "sha512-jWEWx53lxNgWCT38i/kwLV2rsvJz8lVZgi5oImnVwYba9VejXD23q1ckbNFJHosQ8KKXY87ht0KPC6BQFIiHtQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@theme-ui/core": "^0.16.2",
-        "@theme-ui/css": "^0.16.2",
-        "deepmerge": "^4.2.2"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.11.1",
-        "react": ">=18"
-      }
-    },
     "node_modules/@theme-ui/components": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@theme-ui/components/-/components-0.16.2.tgz",
@@ -2989,22 +2973,6 @@
         "@emotion/react": "^11.11.1"
       }
     },
-    "node_modules/@theme-ui/theme-provider": {
-      "version": "0.16.2",
-      "resolved": "https://registry.npmjs.org/@theme-ui/theme-provider/-/theme-provider-0.16.2.tgz",
-      "integrity": "sha512-LRnVevODcGqO0JyLJ3wht+PV3ZoZcJ7XXLJAJWDoGeII4vZcPQKwVy4Lpz/juHsZppQxKcB3U+sQDGBnP25irQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@theme-ui/color-modes": "^0.16.2",
-        "@theme-ui/core": "^0.16.2",
-        "@theme-ui/css": "^0.16.2"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.11.1",
-        "react": ">=18"
-      }
-    },
     "node_modules/@types/acorn": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
@@ -3134,14 +3102,14 @@
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
       "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.10",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.10.tgz",
       "integrity": "sha512-02sAAlBnP39JgXwkAq3PeU9DVaaGpZyF3MGcC0MKgQVkZor5IiiDAipVaxQHtDJAmO4GIy/rVBy/LzVj76Cyqg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -12229,7 +12197,7 @@
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
       "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"

apps/theme-builder/package-lock.json

@@ -973,7 +973,7 @@
     },
     "../web": {
       "name": "@notesnook/web",
-      "version": "3.0.20",
+      "version": "3.0.22",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {

apps/web/__e2e__/checkout.test.ts-snapshots/checkout-yearly-IN-discounted-prices-Chromium-linux.txt

@@ -1,4 +1,4 @@
 Subtotal: ₹400
 Sales tax: ₹300
 Discount: -₹400
-Total: ₹400/yr
+Total: ₹400

apps/web/__e2e__/checkout.test.ts-snapshots/checkout-yearly-IN-discounted-prices-Chromium-win32.txt

@@ -1,4 +1,4 @@
 Subtotal: ₹400
 Sales tax: ₹300
 Discount: -₹400
-Total: ₹400/yr
+Total: ₹400

apps/web/__e2e__/checkout.test.ts-snapshots/checkout-yearly-IN-discounted-prices-Firefox-win32.txt

@@ -1,4 +1,4 @@
 Subtotal: ₹400
 Sales tax: ₹300
 Discount: -₹400
-Total: ₹400/yr
+Total: ₹400

apps/web/__e2e__/checkout.test.ts-snapshots/checkout-yearly-discounted-prices-Chromium-linux.txt

@@ -1,4 +1,4 @@
 Subtotal: $200
 Sales tax: $0
 Discount: -$200
-Total: $200/yr
+Total: $200

apps/web/__e2e__/checkout.test.ts-snapshots/checkout-yearly-discounted-prices-Chromium-win32.txt

@@ -1,4 +1,4 @@
 Subtotal: $200
 Sales tax: $0
 Discount: -$200
-Total: $200/yr
+Total: $200

apps/web/__e2e__/checkout.test.ts-snapshots/checkout-yearly-discounted-prices-Firefox-win32.txt

@@ -1,4 +1,4 @@
 Subtotal: $200
 Sales tax: $0
 Discount: -$200
-Total: $200/yr
+Total: $200

apps/web/__e2e__/editor.test.ts

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
-import { NOTE, TITLE_ONLY_NOTE } from "./utils";
+import { getTestId, NOTE, TITLE_ONLY_NOTE } from "./utils";
 
 test("focus mode", async ({ page }) => {
   const app = new AppModel(page);
@@ -270,3 +270,157 @@ test("#1468 count words separated by newlines", async ({ page }) => {
 
   expect((await notes.editor.getWordCount()) === 10).toBeTruthy();
 });
+
+test("disable autosave when note crosses MAX_AUTO_SAVEABLE_WORDS", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  const content = "a ".repeat(100);
+
+  await notes.createNote({
+    title: "many words",
+    content
+  });
+
+  expect(
+    await app.toasts.waitForToast(
+      "Auto-save is disabled for large notes. Press Ctrl + S to save."
+    )
+  ).toBe(true);
+  await expect(notes.editor.notSavedIcon).toBeVisible();
+});
+
+test("when autosave is disabled, pressing ctrl+s should save the note", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  const content = "a ".repeat(100);
+  await notes.createNote({
+    title: NOTE.title,
+    content
+  });
+
+  await page.keyboard.press("Control+s");
+
+  await expect(notes.editor.savedIcon).toBeVisible();
+});
+
+test("when autosave is disabled, switching to another note should save the note", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  const content = "a ".repeat(100);
+  const note1 = await notes.createNote({
+    title: "Test note 1"
+  });
+  const note2 = await notes.createNote({
+    title: "Test note 2"
+  });
+  await note1?.openNote();
+  await notes.editor.setContent(content);
+
+  await note2?.openNote();
+
+  await note1?.openNote();
+  await expect(notes.editor.savedIcon).toBeVisible();
+  expect(await notes.editor.getContent("text")).toBe(content.trim());
+});
+
+test("when autosave is disabled, creating a new note should save the note", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  const content = "a ".repeat(100);
+  const note = await notes.createNote({
+    title: NOTE.title,
+    content
+  });
+
+  await notes.newNote();
+
+  await note?.openNote();
+  await expect(notes.editor.savedIcon).toBeVisible();
+  expect(await notes.editor.getContent("text")).toBe(content.trim());
+});
+
+test("when autosave is disabled, closing the note should save it", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  const content = "a ".repeat(100);
+  const note = await notes.createNote({
+    title: "Title",
+    content
+  });
+
+  const noteTab = await notes.editor.findTab((await note!.getId())!);
+  await noteTab?.close();
+
+  await note?.openNote();
+  await expect(notes.editor.savedIcon).toBeVisible();
+  expect(await notes.editor.getContent("text")).toBe(content.trim());
+});
+
+test("control + alt + right arrow should go to next note", async ({ page }) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  const note1 = await notes.createNote({
+    title: "Note 1",
+    content: "Note 1 content"
+  });
+  const note2 = await notes.createNote({
+    title: "Note 2",
+    content: "Note 2 content"
+  });
+
+  await note1?.openNote();
+  await note2?.openNote();
+  await page.keyboard.press("Control+Alt+ArrowRight");
+
+  expect(await notes.editor.getTitle()).toBe("Note 1");
+  expect(await notes.editor.getContent("text")).toBe("Note 1 content");
+
+  await page.keyboard.press("Control+Alt+ArrowRight");
+
+  expect(await notes.editor.getTitle()).toBe("Note 2");
+  expect(await notes.editor.getContent("text")).toBe("Note 2 content");
+});
+
+test("control + alt + left arrow should go to previous note", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  const note1 = await notes.createNote({
+    title: "Note 1",
+    content: "Note 1 content"
+  });
+  const note2 = await notes.createNote({
+    title: "Note 2",
+    content: "Note 2 content"
+  });
+
+  await note1?.openNote();
+  await note2?.openNote();
+  await page.keyboard.press("Control+Alt+ArrowLeft");
+
+  expect(await notes.editor.getTitle()).toBe("Note 1");
+  expect(await notes.editor.getContent("text")).toBe("Note 1 content");
+
+  await page.keyboard.press("Control+Alt+ArrowLeft");
+
+  expect(await notes.editor.getTitle()).toBe("Note 2");
+  expect(await notes.editor.getContent("text")).toBe("Note 2 content");
+});

apps/web/__e2e__/models/base-item.model.ts

@@ -46,7 +46,7 @@ export class BaseItemModel {
   }
 
   async getId() {
-    return await this.locator.getAttribute("id");
+    return (await this.locator.getAttribute("id"))?.replace("id_", "");
   }
 
   async getTitle() {

apps/web/__e2e__/models/editor.model.ts

@@ -19,6 +19,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Locator, Page } from "@playwright/test";
 import { getTestId } from "../utils";
+import { TabItemModel } from "./tab-item.model";
+import { iterateList } from "./utils";
 
 export class EditorModel {
   private readonly page: Page;
@@ -33,6 +35,9 @@ export class EditorModel {
   private readonly wordCountText: Locator;
   private readonly dateEditedText: Locator;
   private readonly searchButton: Locator;
+  private readonly tabsList: Locator;
+  readonly savedIcon: Locator;
+  readonly notSavedIcon: Locator;
 
   constructor(page: Page) {
     this.page = page;
@@ -51,6 +56,9 @@ export class EditorModel {
     this.wordCountText = page.locator(getTestId("editor-word-count"));
     this.dateEditedText = page.locator(getTestId("editor-date-edited"));
     this.searchButton = page.locator(getTestId("Search"));
+    this.savedIcon = page.locator(getTestId("editor-save-state-saved"));
+    this.notSavedIcon = page.locator(getTestId("editor-save-state-notsaved"));
+    this.tabsList = page.locator(getTestId("tabs"));
   }
 
   async waitForLoading(title?: string, content?: string) {
@@ -227,4 +235,30 @@ export class EditorModel {
         .replace(" words", "")
     );
   }
+
+  async findTab(id: string) {
+    for await (const item of iterateList(this.tabsList.locator(".tab"))) {
+      const tabModel = new TabItemModel(item, this.page);
+      if ((await tabModel.getId()) === id) return tabModel;
+    }
+  }
+
+  async attachImage() {
+    await this.page
+      .context()
+      .grantPermissions(["clipboard-read", "clipboard-write"]);
+    await this.page.evaluate(async () => {
+      const resp = await fetch("https://dummyjson.com/image/150");
+      const blob = await resp.blob();
+      window.navigator.clipboard.write([
+        new ClipboardItem({
+          "image/png": new Blob([blob], { type: "image/png" })
+        })
+      ]);
+    });
+
+    await this.page.keyboard.down("Control");
+    await this.page.keyboard.press("KeyV");
+    await this.page.keyboard.up("Control");
+  }
 }

apps/web/__e2e__/models/settings-view.model.ts

@@ -139,4 +139,15 @@ export class SettingsViewModel {
 
     await waitForDialog(this.page, "Restoring backup");
   }
+
+  async selectImageCompression(option: { value: string; label: string }) {
+    const item = await this.navigation.findItem("Behaviour");
+    await item?.click();
+
+    const imageCompressionDropdown = this.page
+      .locator(getTestId("setting-image-compression"))
+      .locator("select");
+
+    await imageCompressionDropdown.selectOption(option);
+  }
 }

apps/web/__e2e__/models/tab-item.model.ts

@@ -0,0 +1,36 @@
+/*
+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 { Locator, Page } from "@playwright/test";
+import { getTestId } from "../utils";
+
+export class TabItemModel {
+  private readonly closeButton: Locator;
+  constructor(private readonly locator: Locator, page: Page) {
+    this.closeButton = locator.locator(getTestId("tab-close-button"));
+  }
+
+  async getId() {
+    const testId = await this.locator.getAttribute("data-test-id");
+    return testId?.replace("tab-", "");
+  }
+  close() {
+    return this.closeButton.click();
+  }
+}

apps/web/__e2e__/notes.test.ts

@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
 import {
+  getTestId,
   groupByOptions,
   NOTE,
   orderByOptions,

apps/web/__e2e__/settings.test.ts

@@ -0,0 +1,79 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { test, expect } from "@playwright/test";
+import { AppModel } from "./models/app.model";
+import { NOTE } from "./utils";
+
+test("ask for image compression during image upload when 'Image Compression' setting is 'Ask every time'", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const settings = await app.goToSettings();
+  await settings.selectImageCompression({
+    value: "0",
+    label: "Ask every time"
+  });
+  await settings.close();
+
+  const notes = await app.goToNotes();
+  await notes.createNote(NOTE);
+  await notes.editor.attachImage();
+
+  await expect(page.getByText("Enable compression")).toBeVisible();
+});
+
+test("do not ask for image compression during image upload when 'Image Compression' setting is 'Enable (Recommended)'", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const settings = await app.goToSettings();
+  await settings.selectImageCompression({
+    value: "1",
+    label: "Enable (Recommended)"
+  });
+  await settings.close();
+
+  const notes = await app.goToNotes();
+  await notes.createNote(NOTE);
+  await notes.editor.attachImage();
+
+  await expect(page.getByText("Enable compression")).toBeHidden();
+});
+
+test("do not ask for image compression during image upload when 'Image Compression' setting is 'Disable'", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const settings = await app.goToSettings();
+  await settings.selectImageCompression({
+    value: "2",
+    label: "Disable"
+  });
+  await settings.close();
+
+  const notes = await app.goToNotes();
+  await notes.createNote(NOTE);
+  await notes.editor.attachImage();
+
+  await expect(page.getByText("Enable compression")).toBeHidden();
+});

apps/web/__e2e__/vault.test.ts

@@ -0,0 +1,88 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { test, expect } from "@playwright/test";
+import { AppModel } from "./models/app.model";
+import { getTestId, NOTE, PASSWORD } from "./utils";
+
+test("locking a note should show vault unlocked status", async ({ page }) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  const note = await notes.createNote(NOTE);
+  const vaultUnlockedStatus = page.locator(getTestId("vault-unlocked"));
+
+  await note?.contextMenu.lock(PASSWORD);
+
+  await expect(vaultUnlockedStatus).toBeVisible();
+});
+
+test("clicking on vault unlocked status should lock the vault", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  const note = await notes.createNote(NOTE);
+  const vaultUnlockedStatus = page.locator(getTestId("vault-unlocked"));
+
+  await note?.contextMenu.lock(PASSWORD);
+  await note?.openLockedNote(PASSWORD);
+  await vaultUnlockedStatus.waitFor({ state: "visible" });
+  await vaultUnlockedStatus.click();
+
+  await expect(vaultUnlockedStatus).toBeHidden();
+  expect(await note?.contextMenu.isLocked()).toBe(true);
+});
+
+test("opening a locked note should show vault unlocked status", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  const note = await notes.createNote(NOTE);
+  const vaultUnlockedStatus = page.locator(getTestId("vault-unlocked"));
+
+  await note?.contextMenu.lock(PASSWORD);
+  await vaultUnlockedStatus.waitFor({ state: "visible" });
+  await vaultUnlockedStatus.click();
+  await vaultUnlockedStatus.waitFor({ state: "hidden" });
+  await note?.openLockedNote(PASSWORD);
+
+  await expect(vaultUnlockedStatus).toBeVisible();
+});
+
+test("unlocking a note permanently should not show vault unlocked status", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  const note = await notes.createNote(NOTE);
+  const vaultUnlockedStatus = page.locator(getTestId("vault-unlocked"));
+
+  await note?.contextMenu.lock(PASSWORD);
+  await vaultUnlockedStatus.waitFor({ state: "visible" });
+  await vaultUnlockedStatus.click();
+  await vaultUnlockedStatus.waitFor({ state: "hidden" });
+  await note?.contextMenu.unlock(PASSWORD);
+
+  await expect(vaultUnlockedStatus).toBeHidden();
+});

apps/web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@notesnook/web",
   "description": "Your private note taking space",
-  "version": "3.0.22",
+  "version": "3.0.23",
   "private": true,
   "main": "./src/app.js",
   "homepage": "https://notesnook.com/",
@@ -43,9 +43,9 @@
     "@theme-ui/core": "^0.16.1",
     "@trpc/client": "10.45.2",
     "@trpc/react-query": "10.45.2",
-    "@zip.js/zip.js": "^2.7.32",
+    "@zip.js/zip.js": "^2.7.54",
     "async-mutex": "^0.4.0",
-    "axios": "^1.3.4",
+    "axios": "^1.7.9",
     "clipboard-polyfill": "4.0.0",
     "comlink": "^4.3.1",
     "cronosjs": "^1.7.1",
@@ -55,11 +55,11 @@
     "event-source-polyfill": "^1.0.25",
     "fflate": "^0.8.0",
     "file-saver": "^2.0.5",
-    "hash-wasm": "^4.9.0",
+    "hash-wasm": "^4.12.0",
     "hotkeys-js": "^3.8.3",
     "katex": "0.16.2",
-    "mac-scrollbar": "^0.13.5",
-    "mutative": "^1.0.6",
+    "mac-scrollbar": "^0.13.6",
+    "mutative": "^1.1.0",
     "pdfjs-dist": "3.6.172",
     "phone": "^3.1.14",
     "platform": "^1.3.6",
@@ -69,12 +69,11 @@
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.12",
-    "react-freeze": "^1.0.3",
+    "react-freeze": "^1.0.4",
     "react-hot-toast": "^2.4.1",
     "react-loading-skeleton": "^3.3.1",
-    "react-modal": "3.16.1",
+    "react-modal": "3.16.3",
     "react-qrcode-logo": "^2.9.0",
-    "react-resizable-panels": "^2.0.17",
     "react-scroll-sync": "^0.11.2",
     "react-virtuoso": "^4.6.2",
     "snarkdown": "^2.0.0",
@@ -82,50 +81,49 @@
     "w3c-keyname": "^2.2.6",
     "wouter": "2.12.1",
     "zustand": "4.4.7",
-    "zustand-mutative": "^1.0.1"
+    "zustand-mutative": "^1.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
     "@playwright/test": "^1.48.2",
-    "@swc/core": "^1.5.24",
-    "@swc/plugin-react-remove-properties": "^2.0.4",
+    "@swc/plugin-react-remove-properties": "^6.0.2",
     "@trpc/server": "10.45.2",
     "@types/babel__core": "^7.20.1",
-    "@types/event-source-polyfill": "^1.0.1",
-    "@types/file-saver": "^2.0.5",
-    "@types/marked": "^4.0.7",
-    "@types/node-fetch": "^2.5.10",
-    "@types/platform": "^1.3.4",
+    "@types/event-source-polyfill": "^1.0.5",
+    "@types/file-saver": "^2.0.7",
+    "@types/marked": "^6.0.0",
+    "@types/node-fetch": "^2.6.12",
+    "@types/platform": "^1.3.6",
     "@types/react": "^18.2.39",
-    "@types/react-avatar-editor": "^13.0.2",
+    "@types/react-avatar-editor": "^13.0.3",
     "@types/react-dom": "^18.2.17",
     "@types/react-modal": "3.16.3",
     "@types/react-scroll-sync": "^0.9.0",
-    "@types/wicg-file-system-access": "^2020.9.6",
-    "@vitejs/plugin-react-swc": "^3.7.0",
+    "@types/wicg-file-system-access": "^2023.10.5",
+    "@vitejs/plugin-react-swc": "^3.7.2",
     "autoprefixer": "^10.4.19",
     "better-sqlite3-multiple-ciphers": "^9.4.0",
     "buffer": "^6.0.3",
     "chalk": "^4.1.0",
-    "dotenv": "^10.0.0",
+    "dotenv": "^16.4.7",
+    "esbuild": "^0.24.2",
     "file-loader": "^6.2.0",
     "find-process": "^1.4.4",
-    "happy-dom": "^8.9.0",
-    "ip": "^1.1.8",
+    "happy-dom": "^16.0.1",
+    "ip": "^2.0.1",
     "lorem-ipsum": "^2.0.4",
     "otplib": "^12.0.1",
-    "rollup": "^4.18.0",
-    "rollup-plugin-visualizer": "^5.12.0",
-    "vite": "^5.2.12",
+    "rollup-plugin-visualizer": "^5.13.1",
+    "vite": "^5.4.11",
     "vite-plugin-env-compatible": "^2.0.1",
-    "vite-plugin-pwa": "^0.20.0",
-    "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^1.6.0",
-    "workbox-core": "^7.0.0",
-    "workbox-expiration": "^7.0.0",
-    "workbox-precaching": "^7.0.0",
-    "workbox-routing": "^7.0.0",
-    "workbox-strategies": "^7.0.0"
+    "vite-plugin-pwa": "^0.21.1",
+    "vite-plugin-svgr": "^4.3.0",
+    "vitest": "^2.1.8",
+    "workbox-core": "^7.3.0",
+    "workbox-expiration": "^7.3.0",
+    "workbox-precaching": "^7.3.0",
+    "workbox-routing": "^7.3.0",
+    "workbox-strategies": "^7.3.0"
   },
   "scripts": {
     "start": "cross-env PLATFORM=web vite",

apps/web/src/app-effects.mobile.ts

@@ -1,94 +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 { useEffect } from "react";
-import { useStore } from "./stores/app-store";
-import useSlider from "./hooks/use-slider";
-import useMobile from "./hooks/use-mobile";
-import useTablet from "./hooks/use-tablet";
-
-type MobileAppEffectsProps = {
-  sliderId: string;
-  overlayId: string;
-  setShow: (show: boolean) => void;
-};
-export default function MobileAppEffects({
-  sliderId,
-  overlayId,
-  setShow
-}: MobileAppEffectsProps) {
-  const isMobile = useMobile();
-  const isTablet = useTablet();
-  const toggleSideMenu = useStore((store) => store.toggleSideMenu);
-  const setIsEditorOpen = useStore((store) => store.setIsEditorOpen);
-  const isEditorOpen = useStore((store) => store.isEditorOpen);
-  const isSideMenuOpen = useStore((store) => store.isSideMenuOpen);
-  const isFocusMode = useStore((store) => store.isFocusMode);
-
-  const [slideToIndex] = useSlider(sliderId, {
-    onSliding: (_e, { position }) => {
-      if (!isMobile) return;
-      const offset = 70;
-      const width = 300;
-
-      const percent = offset - (position / width) * offset;
-      const overlay = document.getElementById("overlay");
-      if (!overlay) return;
-      if (percent > 0) {
-        overlay.style.opacity = `${percent}%`;
-        overlay.style.pointerEvents = "all";
-      } else {
-        overlay.style.opacity = "0%";
-        overlay.style.pointerEvents = "none";
-      }
-    },
-    onChange: (e, { slide }) => {
-      toggleSideMenu(slide?.index === 0 ? true : false);
-      setIsEditorOpen(slide?.index === 3 ? true : false);
-    }
-  });
-
-  useEffect(() => {
-    if (!isMobile) return;
-    slideToIndex(isSideMenuOpen ? 1 : 2);
-  }, [isMobile, slideToIndex, isSideMenuOpen]);
-
-  useEffect(() => {
-    if (!isMobile) return;
-    slideToIndex(isEditorOpen ? 3 : 2);
-  }, [isMobile, slideToIndex, isEditorOpen]);
-
-  useEffect(() => {
-    toggleSideMenu(!isMobile);
-    if (!isMobile && !isTablet && !isFocusMode) setShow(true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isMobile, isTablet, isFocusMode, toggleSideMenu]);
-
-  useEffect(() => {
-    if (!overlayId) return;
-    const overlay = document.getElementById(overlayId);
-    if (!overlay) return;
-    overlay.onclick = () => toggleSideMenu(false);
-    return () => {
-      overlay.onclick = null;
-    };
-  }, [overlayId, toggleSideMenu]);
-
-  return null;
-}

apps/web/src/app.css

@@ -5,40 +5,19 @@
 
 .tabsScroll,
 .titlebarLogo,
-.theme-scope-titleBar {
+.theme-scope-titleBar,
+.route-container-header {
   -webkit-app-region: drag;
 }
 
 .theme-scope-titleBar button,
-.tabsScroll .tab {
+.tabsScroll .tab,
+.editor-action-bar button,
+.route-container-header button,
+.search-container {
   -webkit-app-region: no-drag;
 }
 
-.panel-resize-handle {
-  position: relative;
-}
-
-.panel-resize-handle::before {
-  content: " ";
-  position: absolute;
-  transition: background-color 300ms ease-out;
-  z-index: 999;
-}
-
-.panel-resize-handle[data-panel-group-direction="horizontal"]::before {
-  width: 5px;
-  height: 100%;
-}
-
-.panel-resize-handle[data-panel-group-direction="vertical"]::before {
-  width: 100%;
-  height: 5px;
-}
-
-.panel-resize-handle[data-resize-handle-state="hover"]::before {
-  background-color: var(--accent);
-}
-
 /* open-sans-regular - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
 @font-face {
   font-family: "Open Sans";

apps/web/src/app.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 React, { useState, Suspense, useRef, useEffect } from "react";
+import { useState, Suspense, useEffect, useRef } from "react";
 import { Box, Flex } from "@theme-ui/components";
 import { ScopedThemeProvider } from "./components/theme-provider";
 import useMobile from "./hooks/use-mobile";
@@ -30,38 +30,84 @@ import { FlexScrollContainer } from "./components/scroll-container";
 import CachedRouter from "./components/cached-router";
 import { WebExtensionRelay } from "./utils/web-extension-relay";
 import {
-  PanelGroup,
-  Panel,
-  PanelResizeHandle,
-  ImperativePanelHandle
-} from "react-resizable-panels";
+  Pane,
+  SplitPane,
+  SplitPaneImperativeHandle
+} from "./components/split-pane";
 import GlobalMenuWrapper from "./components/global-menu-wrapper";
 import AppEffects from "./app-effects";
 import HashRouter from "./components/hash-router";
+import { useWindowFocus } from "./hooks/use-window-focus";
+import { Global } from "@emotion/react";
+import { isMac } from "./utils/platform";
+import useSlider from "./hooks/use-slider";
+import { AppEventManager, AppEvents } from "./common/app-events";
+import { TITLE_BAR_HEIGHT } from "./components/title-bar";
+import { getFontSizes } from "@notesnook/theme/theme/font/fontsize.js";
+import { useWindowControls } from "./hooks/use-window-controls";
 
 new WebExtensionRelay();
 
-const MobileAppEffects = React.lazy(() => import("./app-effects.mobile"));
-
 function App() {
   const isMobile = useMobile();
   const [show, setShow] = useState(true);
   const isFocusMode = useStore((store) => store.isFocusMode);
+  const { isFocused } = useWindowFocus();
+  const { isFullscreen } = useWindowControls();
   console.timeEnd("loading app");
 
   return (
     <>
+      {isFocused ? null : (
+        <Global
+          styles={`
+          body {
+            filter:  brightness(0.95) grayscale(1);
+          }
+          .titlebar {
+            background: var(--background-secondary) !important;
+          }
+        `}
+        />
+      )}
+      {IS_DESKTOP_APP && isMac() && !isFullscreen ? (
+        <Global
+          // These styles to make sure the app content doesn't overlap with the traffic lights.
+          styles={`
+            .nav-pane,
+            .mobile-nav-pane {
+              margin-top: env(titlebar-area-height) !important;
+            }
+            .nav-pane.collapsed + .list-pane .route-container-header,
+            .nav-pane.collapsed + .list-pane.collapsed + .editor-pane .editor-action-bar,
+            .nav-pane.collapsed + .editor-pane .editor-action-bar {
+                padding-left: 25px;
+            }
+            .editor-pane:first-of-type .editor-action-bar,
+            .mobile-editor-pane.pane-active .editor-action-bar,
+            .mobile-list-pane.pane-active .route-container-header {
+                padding-left: 80px;
+            }
+            .route-container-header, .editor-action-bar {
+                transition: padding-left 0.4s ease-out;
+            }
+            .editor-action-bar {
+              border-bottom: none;
+            }
+            .route-container-header .routeHeader {
+              font-size: ${getFontSizes().title};
+            }
+            .global-split-pane .react-split__sash {
+              height: calc(100% - ${TITLE_BAR_HEIGHT}px);
+            }
+          `}
+        />
+      ) : null}
+
       <Suspense fallback={<div style={{ display: "none" }} />}>
         <div id="menu-wrapper">
           <GlobalMenuWrapper />
         </div>
-        {isMobile && (
-          <MobileAppEffects
-            sliderId="slider"
-            overlayId="overlay"
-            setShow={setShow}
-          />
-        )}
       </Suspense>
       <AppEffects setShow={setShow} />
 
@@ -69,7 +115,11 @@ function App() {
         id="app"
         bg="background"
         className={isFocusMode ? "app-focus-mode" : ""}
-        sx={{ overflow: "hidden", flexDirection: "column", height: "100%" }}
+        sx={{
+          overflow: "hidden",
+          flexDirection: "column",
+          height: "100%"
+        }}
       >
         {isMobile ? (
           <MobileAppContents />
@@ -92,13 +142,11 @@ function DesktopAppContents({ show, setShow }: DesktopAppContentsProps) {
   const isFocusMode = useStore((store) => store.isFocusMode);
   const isTablet = useTablet();
   const [isNarrow, setIsNarrow] = useState(isTablet || false);
-  const navPane = useRef<ImperativePanelHandle>(null);
-  const middlePane = useRef<ImperativePanelHandle>(null);
+  const navPane = useRef<SplitPaneImperativeHandle>(null);
 
   useEffect(() => {
-    const size = navPane.current?.getSize();
-    // Toggle `isNarrow` to true if panel size isn't set to narrow by user
-    setIsNarrow((size && size <= 5) || isTablet);
+    if (isTablet) navPane.current?.collapse(0);
+    else navPane.current?.expand(0);
   }, [isTablet]);
 
   // useEffect(() => {
@@ -123,81 +171,71 @@ function DesktopAppContents({ show, setShow }: DesktopAppContentsProps) {
           overflow: "hidden"
         }}
       >
-        <PanelGroup autoSaveId="global-panel-group" direction="horizontal">
-          {!isFocusMode && isTablet ? (
-            <Flex sx={{ width: 50 }}>
+        <SplitPane
+          className="global-split-pane"
+          ref={navPane}
+          autoSaveId="global-panel-group"
+          direction="vertical"
+          onChange={(sizes) => {
+            setIsNarrow(sizes[0] <= 70);
+          }}
+        >
+          {isFocusMode ? null : (
+            <Pane
+              id="nav-pane"
+              initialSize={180}
+              className={`nav-pane`}
+              minSize={50}
+              snapSize={120}
+              maxSize={300}
+            >
               <NavigationMenu
                 toggleNavigationContainer={(state) => {
                   setShow(state || !show);
                 }}
                 isTablet={isNarrow}
               />
-            </Flex>
-          ) : (
-            !isFocusMode && (
-              <>
-                <Panel
-                  ref={navPane}
-                  order={1}
-                  className="nav-pane"
-                  defaultSize={10}
-                  minSize={3.5}
-                  // maxSize={isNarrow ? 5 : undefined}
-                  onResize={(size) => setIsNarrow(size <= 5)}
-                  collapsible
-                  collapsedSize={3.5}
-                >
-                  <NavigationMenu
-                    toggleNavigationContainer={(state) => {
-                      setShow(state || !show);
-                    }}
-                    isTablet={isNarrow}
-                  />
-                </Panel>
-                <PanelResizeHandle className="panel-resize-handle" />
-              </>
-            )
+            </Pane>
           )}
-          {!isFocusMode && show && (
-            <>
-              <Panel
-                ref={middlePane}
-                className="middle-pane"
-                order={2}
-                collapsible
-                defaultSize={20}
-              >
-                <ScopedThemeProvider
-                  className="listMenu"
-                  scope="list"
-                  sx={{
-                    display: "flex",
-                    flexDirection: "column",
-                    flex: 1,
-                    bg: "background",
-                    borderRight: "1px solid var(--separator)"
-                  }}
-                >
-                  <CachedRouter />
-                </ScopedThemeProvider>
-              </Panel>
-              <PanelResizeHandle className="panel-resize-handle" />
-            </>
-          )}
-          <Panel className="editor-pane" order={3} defaultSize={70}>
-            <Flex
-              sx={{
-                display: "flex",
-                overflow: "hidden",
-                flex: 1,
-                flexDirection: "column",
-                bg: "background"
-              }}
+          {!isFocusMode && show ? (
+            <Pane
+              id="list-pane"
+              initialSize={380}
+              style={{ flex: 1, display: "flex" }}
+              snapSize={200}
+              maxSize={500}
+              className="list-pane"
             >
-              <HashRouter />
-            </Flex>
-          </Panel>
-        </PanelGroup>
+              <ScopedThemeProvider
+                className="listMenu"
+                scope="list"
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  flex: 1,
+                  bg: "background",
+                  borderRight: "1px solid var(--separator)"
+                }}
+              >
+                <CachedRouter />
+              </ScopedThemeProvider>
+            </Pane>
+          ) : null}
+
+          <Pane
+            id="editor-pane"
+            className="editor-pane"
+            style={{
+              flex: 1,
+              display: "flex",
+              backgroundColor: "var(--background)",
+              overflow: "hidden",
+              flexDirection: "column"
+            }}
+          >
+            {<HashRouter />}
+          </Pane>
+        </SplitPane>
       </Flex>
       <StatusBar />
     </>
@@ -205,8 +243,46 @@ function DesktopAppContents({ show, setShow }: DesktopAppContentsProps) {
 }
 
 function MobileAppContents() {
+  const { ref, slideToIndex } = useSlider({
+    onSliding: (_e, { position }) => {
+      const offset = 70;
+      const width = 300;
+
+      const percent = offset - (position / width) * offset;
+      const overlay = document.getElementById("overlay");
+      if (!overlay) return;
+      if (percent > 0) {
+        overlay.style.opacity = `${percent}%`;
+        overlay.style.pointerEvents = "all";
+      } else {
+        overlay.style.opacity = "0%";
+        overlay.style.pointerEvents = "none";
+      }
+    },
+    onChange: (e, { slide, lastSlide }) => {
+      slide.node.classList.add("pane-active");
+      lastSlide?.node.classList.remove("pane-active");
+    }
+  });
+
+  useEffect(() => {
+    const toggleSideMenuEvent = AppEventManager.subscribe(
+      AppEvents.toggleSideMenu,
+      (state) => slideToIndex(state ? 0 : 1)
+    );
+    const toggleEditorEvent = AppEventManager.subscribe(
+      AppEvents.toggleEditor,
+      (state) => slideToIndex(state ? 2 : 1)
+    );
+    return () => {
+      toggleSideMenuEvent.unsubscribe();
+      toggleEditorEvent.unsubscribe();
+    };
+  }, [slideToIndex]);
+
   return (
     <FlexScrollContainer
+      scrollRef={ref}
       id="slider"
       suppressScrollX
       style={{
@@ -223,17 +299,18 @@ function MobileAppContents() {
       }}
     >
       <Flex
+        className="mobile-nav-pane"
         sx={{
           scrollSnapAlign: "start",
           scrollSnapStop: "always",
-          width: [300, 60],
+          width: 300,
           flexShrink: 0
         }}
       >
-        <NavigationMenu toggleNavigationContainer={() => {}} isTablet={false} />
+        <NavigationMenu toggleNavigationContainer={() => { }} isTablet={false} />
       </Flex>
       <Flex
-        className="listMenu"
+        className="mobile-list-pane"
         variant="columnFill"
         sx={{
           position: "relative",
@@ -246,6 +323,7 @@ function MobileAppContents() {
         <CachedRouter />
         <Box
           id="overlay"
+          onClick={() => slideToIndex(1)}
           sx={{
             position: "absolute",
             width: "100%",
@@ -261,6 +339,7 @@ function MobileAppContents() {
         />
       </Flex>
       <Flex
+        className="mobile-editor-pane"
         sx={{
           scrollSnapAlign: "start",
           scrollSnapStop: "always",

apps/web/src/common/app-events.ts

@@ -38,5 +38,8 @@ export const AppEvents = {
 
   changeNoteTitle: "changeNoteTitle",
 
-  revealItemInList: "list:revealItem"
+  revealItemInList: "list:revealItem",
+
+  toggleSideMenu: "app:openSideMenu",
+  toggleEditor: "app:toggleEditor"
 };

apps/web/src/components/auth-container/index.jsx

@@ -206,7 +206,8 @@ function AuthContainer(props) {
           >
             <Text variant={"subBody"}>
               {version.status === "fulfilled" &&
-              version.value?.instance !== "default" ? (
+              !!version.value &&
+              version.value.instance !== "default" ? (
                 <>
                   {strings.usingInstance(
                     version.value.instance,

apps/web/src/components/editor/action-bar.tsx

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Button, Flex, Text } from "@theme-ui/components";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   ArrowLeft,
   Cross,
@@ -30,6 +30,7 @@ import {
   Lock,
   NormalMode,
   Note,
+  NoteRemove,
   Pin,
   Properties,
   Publish,
@@ -44,6 +45,7 @@ import {
 } from "../icons";
 import { ScrollContainer } from "@notesnook/ui";
 import {
+  SaveState,
   SessionType,
   isLockedSession,
   useEditorStore
@@ -77,11 +79,15 @@ import { showPublishView } from "../publish-view";
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import useMobile from "../../hooks/use-mobile";
 import { strings } from "@notesnook/intl";
+import { TITLE_BAR_HEIGHT, getWindowControls } from "../title-bar";
+import useTablet from "../../hooks/use-tablet";
+import { isMac } from "../../utils/platform";
 
 export function EditorActionBar() {
+  const { isMaximized, isFullscreen, hasNativeWindowControls } =
+    useWindowControls();
   const editorMargins = useEditorStore((store) => store.editorMargins);
   const isFocusMode = useAppStore((store) => store.isFocusMode);
-  const { isFullscreen } = useWindowControls();
   const activeSession = useEditorStore((store) =>
     store.activeSessionId ? store.getSession(store.activeSessionId) : undefined
   );
@@ -93,7 +99,7 @@ export function EditorActionBar() {
   const isNotePublished =
     activeSession && db.monographs.isPublished(activeSession.id);
   const isMobile = useMobile();
-  const setIsEditorOpen = useAppStore((store) => store.setIsEditorOpen);
+  const isTablet = useTablet();
 
   const tools = [
     {
@@ -193,7 +199,14 @@ export function EditorActionBar() {
         activeSession.type !== "conflicted" &&
         !isFocusMode,
       onClick: () => useEditorStore.getState().toggleProperties()
-    }
+    },
+    ...getWindowControls(
+      hasNativeWindowControls,
+      isFullscreen,
+      isMaximized,
+      isTablet,
+      isMobile
+    )
   ];
 
   return (
@@ -208,7 +221,9 @@ export function EditorActionBar() {
               borderRadius: 0,
               flexShrink: 0
             }}
-            onClick={() => setIsEditorOpen(false)}
+            onClick={() =>
+              AppEventManager.publish(AppEvents.toggleEditor, false)
+            }
           >
             <ArrowLeft size={18} />
           </Button>
@@ -216,35 +231,46 @@ export function EditorActionBar() {
       ) : (
         <TabStrip />
       )}
-      {tools.map((tool) => (
-        <Button
-          data-test-id={tool.title}
-          disabled={!tool.enabled}
-          variant={tool.title === "Close" ? "error" : "secondary"}
-          title={tool.title}
-          key={tool.title}
-          sx={{
-            height: "100%",
-            alignItems: "center",
-            bg: "transparent",
-            display: [
-              tool.hideOnMobile ? "none" : "flex",
-              tool.hidden ? "none" : "flex"
-            ],
-            borderRadius: 0,
-            flexShrink: 0,
-            "&:hover svg path": {
-              fill:
-                tool.title === "Close"
-                  ? "var(--accentForeground-error) !important"
-                  : "var(--icon)"
-            }
-          }}
-          onClick={tool.onClick}
-        >
-          <tool.icon size={18} />
-        </Button>
-      ))}
+      <Flex
+        sx={{
+          alignItems: "center",
+          justifyContent: "center",
+          mr:
+            hasNativeWindowControls && !isMac() && !isMobile && !isTablet
+              ? `calc(100vw - env(titlebar-area-width))`
+              : 0
+        }}
+      >
+        {tools.map((tool) => (
+          <Button
+            data-test-id={tool.title}
+            disabled={!tool.enabled}
+            variant={tool.title === "Close" ? "error" : "secondary"}
+            title={tool.title}
+            key={tool.title}
+            sx={{
+              height: "100%",
+              alignItems: "center",
+              bg: "transparent",
+              display: [
+                "hideOnMobile" in tool && tool.hideOnMobile ? "none" : "flex",
+                tool.hidden ? "none" : "flex"
+              ],
+              borderRadius: 0,
+              flexShrink: 0,
+              "&:hover svg path": {
+                fill:
+                  tool.title === "Close"
+                    ? "var(--accentForeground-error) !important"
+                    : "var(--icon)"
+              }
+            }}
+            onClick={tool.onClick}
+          >
+            <tool.icon size={18} />
+          </Button>
+        ))}
+      </Flex>
     </>
   );
 }
@@ -257,10 +283,10 @@ function TabStrip() {
     <ScrollContainer
       className="tabsScroll"
       suppressScrollY
-      style={{ flex: 1 }}
+      style={{ flex: 1, height: TITLE_BAR_HEIGHT }}
       trackStyle={() => ({
         backgroundColor: "transparent",
-        pointerEvents: "none"
+        "--ms-track-size": "6px"
       })}
       thumbStyle={() => ({ height: 3 })}
       onWheel={(e) => {
@@ -273,14 +299,13 @@ function TabStrip() {
       <Flex
         sx={{
           flex: 1,
-          my: "2.5px",
-          gap: 1,
-          height: 32
+          height: "100%"
         }}
         onDoubleClick={async (e) => {
           e.stopPropagation();
           useEditorStore.getState().newSession();
         }}
+        data-test-id="tabs"
       >
         <ReorderableList
           items={sessions}
@@ -302,89 +327,95 @@ function TabStrip() {
             sessions.splice(to, 0, fromTab);
             useEditorStore.setState({ sessions });
           }}
-          renderItem={({ item: session, index: i }) => (
-            <Tab
-              id={session.id}
-              key={session.id}
-              title={
-                session.title ||
-                ("note" in session ? session.note.title : "Untitled")
-              }
-              isTemporary={!!session.preview}
-              isActive={session.id === activeSessionId}
-              isPinned={!!session.pinned}
-              isLocked={isLockedSession(session)}
-              type={session.type}
-              onKeepOpen={() =>
-                useEditorStore
-                  .getState()
-                  .updateSession(
-                    session.id,
-                    [session.type],
-                    (s) => (s.preview = false)
-                  )
-              }
-              onFocus={() => {
-                if (session.id !== activeSessionId) {
-                  useEditorStore.getState().openSession(session.id);
+          renderItem={({ item: session, index: i }) => {
+            const isUnsaved =
+              session.type === "default" &&
+              session.saveState === SaveState.NotSaved;
+            return (
+              <Tab
+                id={session.id}
+                key={session.id}
+                title={
+                  session.title ||
+                  ("note" in session ? session.note.title : "Untitled")
                 }
-              }}
-              onClose={() =>
-                useEditorStore.getState().closeSessions(session.id)
-              }
-              onCloseAll={() =>
-                useEditorStore
-                  .getState()
-                  .closeSessions(
-                    ...sessions.filter((s) => !s.pinned).map((s) => s.id)
+                isUnsaved={isUnsaved}
+                isTemporary={!!session.preview}
+                isActive={session.id === activeSessionId}
+                isPinned={!!session.pinned}
+                isLocked={isLockedSession(session)}
+                type={session.type}
+                onKeepOpen={() =>
+                  useEditorStore
+                    .getState()
+                    .updateSession(
+                      session.id,
+                      [session.type],
+                      (s) => (s.preview = false)
+                    )
+                }
+                onFocus={() => {
+                  if (session.id !== activeSessionId) {
+                    useEditorStore.getState().openSession(session.id);
+                  }
+                }}
+                onClose={() =>
+                  useEditorStore.getState().closeSessions(session.id)
+                }
+                onCloseAll={() =>
+                  useEditorStore
+                    .getState()
+                    .closeSessions(
+                      ...sessions.filter((s) => !s.pinned).map((s) => s.id)
+                    )
+                }
+                onCloseOthers={() =>
+                  useEditorStore
+                    .getState()
+                    .closeSessions(
+                      ...sessions
+                        .filter((s) => s.id !== session.id && !s.pinned)
+                        .map((s) => s.id)
+                    )
+                }
+                onCloseToTheRight={() =>
+                  useEditorStore
+                    .getState()
+                    .closeSessions(
+                      ...sessions
+                        .filter((s, index) => index > i && !s.pinned)
+                        .map((s) => s.id)
+                    )
+                }
+                onCloseToTheLeft={() =>
+                  useEditorStore
+                    .getState()
+                    .closeSessions(
+                      ...sessions
+                        .filter((s, index) => index < i && !s.pinned)
+                        .map((s) => s.id)
+                    )
+                }
+                onRevealInList={() =>
+                  AppEventManager.publish(
+                    AppEvents.revealItemInList,
+                    "note" in session ? session.note.id : session.id,
+                    true
                   )
-              }
-              onCloseOthers={() =>
-                useEditorStore
-                  .getState()
-                  .closeSessions(
-                    ...sessions
-                      .filter((s) => s.id !== session.id && !s.pinned)
-                      .map((s) => s.id)
-                  )
-              }
-              onCloseToTheRight={() =>
-                useEditorStore
-                  .getState()
-                  .closeSessions(
-                    ...sessions
-                      .filter((s, index) => index > i && !s.pinned)
-                      .map((s) => s.id)
-                  )
-              }
-              onCloseToTheLeft={() =>
-                useEditorStore
-                  .getState()
-                  .closeSessions(
-                    ...sessions
-                      .filter((s, index) => index < i && !s.pinned)
-                      .map((s) => s.id)
-                  )
-              }
-              onRevealInList={() =>
-                AppEventManager.publish(
-                  AppEvents.revealItemInList,
-                  "note" in session ? session.note.id : session.id,
-                  true
-                )
-              }
-              onPin={() => {
-                useEditorStore.setState((state) => {
-                  // preview tabs can never be pinned.
-                  if (!session.pinned) state.sessions[i].preview = false;
-                  state.sessions[i].pinned = !session.pinned;
-                  state.sessions.sort((a, b) =>
-                    a.pinned === b.pinned ? 0 : a.pinned ? -1 : 1
-                  );
-                });
-              }}
-            />
-          )}
+                }
+                onPin={() => {
+                  useEditorStore.setState((state) => {
+                    // preview tabs can never be pinned.
+                    if (!session.pinned) state.sessions[i].preview = false;
+                    state.sessions[i].pinned = !session.pinned;
+                    state.sessions.sort((a, b) =>
+                      a.pinned === b.pinned ? 0 : a.pinned ? -1 : 1
+                    );
+                  });
+                }}
+              />
+            );
+          }}
         />
       </Flex>
     </ScrollContainer>
@@ -398,6 +429,7 @@ type TabProps = {
   isTemporary: boolean;
   isPinned: boolean;
   isLocked: boolean;
+  isUnsaved: boolean;
   type: SessionType;
   onKeepOpen: () => void;
   onFocus: () => void;
@@ -417,6 +449,7 @@ function Tab(props: TabProps) {
     isTemporary,
     isPinned,
     isLocked,
+    isUnsaved,
     type,
     onKeepOpen,
     onFocus,
@@ -436,30 +469,43 @@ function Tab(props: TabProps) {
     ? Readonly
     : type === "deleted"
     ? Trash
+    : isUnsaved
+    ? NoteRemove
     : Note;
   const { attributes, listeners, setNodeRef, transform, transition, active } =
     useSortable({ id });
+  const activeTabRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (activeTabRef.current && isActive) {
+      const tab = activeTabRef.current;
+      tab.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "nearest"
+      });
+    }
+  }, [isActive]);
 
   return (
     <Flex
-      ref={setNodeRef}
+      ref={(el) => {
+        setNodeRef(el);
+        activeTabRef.current = el;
+      }}
       className="tab"
+      data-test-id={`tab-${id}`}
       sx={{
-        borderRadius: "default",
+        height: "100%",
         cursor: "pointer",
         px: 2,
-        py: "7px",
+        borderRight: "1px solid var(--border)",
 
         transform: CSS.Transform.toString(transform),
         transition,
         visibility: active?.id === id ? "hidden" : "visible",
 
-        bg: isActive ? "background-selected" : "background-secondary",
-        // borderTopLeftRadius: "default",
-        // borderTopRightRadius: "default",
-        // borderBottom: isActive ? "none" : "1px solid var(--border)",
-        border: "1px solid",
-        borderColor: isActive ? "border-selected" : "transparent",
+        bg: isActive ? "background-selected" : "transparent",
         justifyContent: "space-between",
         alignItems: "center",
         flexShrink: 0,
@@ -544,7 +590,13 @@ function Tab(props: TabProps) {
           if (e.button == 0) onFocus();
         }}
       >
-        <Icon size={16} color={isActive ? "accent-selected" : "icon"} />
+        <Icon
+          data-test-id={`tab-icon${isUnsaved ? "-unsaved" : ""}`}
+          size={16}
+          color={
+            isUnsaved ? "accent-error" : isActive ? "accent-selected" : "icon"
+          }
+        />
         <Text
           variant="body"
           sx={{
@@ -590,6 +642,7 @@ function Tab(props: TabProps) {
             }
           }}
           className="closeTabButton"
+          data-test-id={"tab-close-button"}
           size={16}
         />
       )}

apps/web/src/components/editor/footer.tsx

@@ -121,6 +121,13 @@ function EditorFooter() {
       ) : null}
       {SaveStateIcon && (
         <SaveStateIcon
+          data-test-id={`editor-save-state-${
+            saveState === SaveState.Saved
+              ? "saved"
+              : saveState === SaveState.NotSaved
+              ? "notsaved"
+              : "loading"
+          }`}
           size={13}
           color={
             saveState === SaveState.Saved