mobile: release v2.5.2

mobile: fix aliased tag name not showing in manage

.commitlintrc.js

@@ -20,6 +20,7 @@ const SCOPES = [
   "logger",
   "theme",
   "core",
+  "fs",
   "clipper",
   "config",
   "ci",

CONTRIBUTING.md

@@ -8,9 +8,9 @@ Thank you so much for considering to contribute to Notesnook! If you have no ide
 
 Ugh! Bugs!
 
-> A bug is when software behaves in a way that you didn't expect, and the developer didn't intend.
+> A bug is when software behaves in a way you didn't expect, which the developer didn't intend.
 
-To help us understand what's going on, we first want to **make sure you're using the latest version of Notesnook**.
+To help us understand what's happening, we first want to **make sure you're using the latest version of Notesnook**.
 
 Once you've **confirmed that the bug still exists in the latest version**, you'll want to check to make sure it's not something we already know about in the [opened GitHub issues](https://github.com/streetwriters/notesnook/issues).
 
@@ -30,7 +30,7 @@ Before you open a new feature request, please make sure it's not a duplicate. **
 
 ### Helping out in the issue tracker
 
-There are always new issues getting opened that need to be triaged, sorted & organized, so the developers can easily find the most critical and/or relevant bugs to fix. Any help in this regard is appreciated.
+New issues are always opened that need to be triaged, sorted & organized, so the developers can easily find the most critical and/or relevant bugs to fix. Any help in this regard is appreciated.
 
 In addition to this, you can help out in the following ways:
 
@@ -62,7 +62,7 @@ Once you are done, [open a new pull request](https://docs.github.com/en/pull-req
 
 1. Fork [the repository](https://github.com/streetwriters/notesnook) and create your branch from `master` (you can name your branch anything).
 2. Run `npm run bootstrap` in the repository root.
-3. If you’ve fixed a bug or added code that should be tested, add tests!
+3. If you've fixed a bug or added code that should be tested, add tests!
 4. Ensure the test suite passes (`npm run test`).
 5. Format your code with prettier (`npm run prettier`).
 6. Make sure your code lints (`npm run lint`). Tip: `npm run linc` to only check changed files.
@@ -131,11 +131,11 @@ We use an automatic code formatter called [Prettier](https://prettier.io/). Run
 
 Then, our linter will catch most issues that may exist in your code. You can check the status of your code styling by simply running `npm run lint`.
 
-However, there are still some styles that the linter cannot pick up. If you are unsure about something, looking at [Airbnb’s Style Guide](https://github.com/airbnb/javascript) will guide you in the right direction.
+However, there are still some styles that the linter cannot pick up. If you are unsure about something, looking at [Airbnb's Style Guide](https://github.com/airbnb/javascript) will guide you in the right direction.
 
 ## Git Branch Organization
 
-Submit all changes directly to the [`master branch`](https://github.com/streetwriters/notesnook). We don’t use separate branches for development or for upcoming releases. This requires us to always keep the `master` branch in a deployable state which means:
+Submit all changes directly to the [`master branch`](https://github.com/streetwriters/notesnook). We don't use separate branches for development or for upcoming releases. This requires us to always keep the `master` branch in a deployable state which means:
 
 1. All tests must be passing at all times
 2. There should be as few breaking changes as possible

apps/mobile/app/app.js

@@ -31,14 +31,6 @@ import { TipManager } from "./services/tip-manager";
 import { useUserStore } from "./stores/use-user-store";
 import { View } from "react-native";
 import { useState } from "react";
-import NetInfo from "@react-native-community/netinfo";
-NetInfo.configure({
-  reachabilityUrl: "https://notesnook.com",
-  reachabilityTest: (response) => {
-    if (!response) return false;
-    return response?.status >= 200 && response?.status < 300;
-  }
-});
 
 SettingsService.init();
 SettingsService.checkOrientation();

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

@@ -22,10 +22,17 @@ import "react-native-get-random-values";
 import * as Keychain from "react-native-keychain";
 import { generateSecureRandom } from "react-native-securerandom";
 import Sodium from "@ammarahmed/react-native-sodium";
+import { MMKV } from "./mmkv";
+
+const IOS_KEYCHAIN_ACCESS_GROUP = "group.org.streetwriters.notesnook";
+const IOS_KEYCHAIN_SERVICE_NAME = "org.streetwriters.notesnook";
+const IOS_KEYCHAIN_UPGRAGE_KEY = "keychain-ios:upgraded";
 
 const KEYSTORE_CONFIG = Platform.select({
   ios: {
-    accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED_THIS_DEVICE_ONLY
+    accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED_THIS_DEVICE_ONLY,
+    accessGroup: IOS_KEYCHAIN_ACCESS_GROUP,
+    service: IOS_KEYCHAIN_SERVICE_NAME
   },
   android: {}
 });
@@ -39,12 +46,27 @@ export async function deriveCryptoKey(name, data) {
       credentials.key,
       KEYSTORE_CONFIG
     );
+    MMKV.setBool(IOS_KEYCHAIN_UPGRAGE_KEY, true);
     return credentials.key;
   } catch (e) {
     console.error(e);
   }
 }
 
+async function upgradeIOSKeychain(username, password) {
+  if (Platform.OS !== "ios") return;
+  if (!MMKV.getBool(IOS_KEYCHAIN_UPGRAGE_KEY)) {
+    await Keychain.setInternetCredentials(
+      "notesnook",
+      username,
+      password,
+      KEYSTORE_CONFIG
+    );
+    console.log("IOS KEYCHAIN MIGRATION COMPLETED!");
+    MMKV.setBool(IOS_KEYCHAIN_UPGRAGE_KEY, true);
+  }
+}
+
 export async function getCryptoKey(_name) {
   try {
     if (await Keychain.hasInternetCredentials("notesnook")) {
@@ -52,6 +74,9 @@ export async function getCryptoKey(_name) {
         "notesnook",
         KEYSTORE_CONFIG
       );
+      // upgrades ios keychain to use accessGroups
+      // so we have access to keychain in share extension.
+      await upgradeIOSKeychain(credentials.username, credentials.password);
       return credentials.password;
     } else {
       return null;

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

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Platform } from "react-native";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import {
   decrypt,
   deriveCryptoKey,

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

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import { Dimensions, Platform } from "react-native";
 import ImageResizer from "@bam.tech/react-native-image-resizer";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 /**
  * Scale down & compress images to screen width
  * for loading in editor.

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

@@ -17,25 +17,169 @@ 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,
+  isImage,
+  isDocument
+} from "@notesnook/core/utils/filename";
 import React from "react";
 import { Platform } from "react-native";
 import * as ScopedStorage from "react-native-scoped-storage";
-import Sodium from "@ammarahmed/react-native-sodium";
-import RNFetchBlob from "rn-fetch-blob";
+import { subscribe, zip } from "react-native-zip-archive";
+import RNFetchBlob from "react-native-blob-util";
 import { ShareComponent } from "../../components/sheets/export-notes/share";
-import { presentSheet, ToastEvent } from "../../services/event-manager";
+import { ToastEvent, presentSheet } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { db } from "../database";
 import Storage from "../database/storage";
-import { cacheDir } from "./utils";
-import { getFileNameWithExtension } from "@notesnook/core/utils/filename";
+import { cacheDir, copyFileAsync, releasePermissions } from "./utils";
+
+export const FileDownloadStatus = {
+  Success: 1,
+  Fail: 0
+};
+
+/**
+ * Download all user's attachments
+ * @returns
+ */
+export function downloadAllAttachments() {
+  const attachments = db.attachments.all;
+  return downloadAttachments(attachments);
+}
+
+/**
+ * Downloads provided attachments to a .zip file
+ * on user's device.
+ * @param attachments
+ * @param onProgress
+ * @returns
+ */
+export async function downloadAttachments(
+  attachments,
+  onProgress,
+  canceled,
+  groupId
+) {
+  if (!attachments || !attachments.length) return;
+  const result = new Map();
+
+  let outputFolder;
+  if (Platform.OS === "android") {
+    // Ask the user to select a directory to store the file
+    let file = await ScopedStorage.openDocumentTree(true);
+    outputFolder = file.uri;
+    if (!outputFolder) return;
+  } else {
+    outputFolder = await Storage.checkAndCreateDir("/downloads/");
+  }
+
+  // Create the folder to zip;
+  const zipSourceFolder = `${cacheDir}/notesnook-attachments`;
+  const zipOutputFile =
+    Platform.OS === "ios"
+      ? `${outputFolder}/notesnook-attachments-${Date.now()}.zip`
+      : `${cacheDir}/notesnook-attachments.zip`;
+  if (await RNFetchBlob.fs.exists(zipSourceFolder))
+    await RNFetchBlob.fs.unlink(zipSourceFolder);
+  await RNFetchBlob.fs.mkdir(zipSourceFolder);
+
+  for (let i = 0; i < attachments.length; i++) {
+    let attachment = attachments[i];
+    const hash = attachment.metadata.hash;
+    try {
+      if (canceled.current) {
+        RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
+        return;
+      }
+      onProgress?.(
+        i + 1 / attachments.length,
+        `Downloading attachments (${i + 1}/${
+          attachments.length
+        })... Please wait`
+      );
+      // Download to cache
+      let uri = await downloadAttachment(hash, false, {
+        silent: true,
+        cache: true,
+        groupId: groupId
+      });
+      if (canceled.current) {
+        RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
+        return;
+      }
+      if (!uri) throw new Error("Failed to download file");
+      // Move file to the source folder we will zip eventually and rename the file to it's actual name.
+      const filePath = `${zipSourceFolder}/${attachment.metadata.filename}`;
+      await RNFetchBlob.fs.mv(`${cacheDir}/${uri}`, filePath);
+      result.set(hash, {
+        filename: attachment.metadata.filename,
+        status: FileDownloadStatus.Success
+      });
+    } catch (e) {
+      result.set(hash, {
+        filename: attachment.metadata.filename,
+        status: FileDownloadStatus.Fail,
+        reason: e
+      });
+      console.log("Error downloading attachment", e);
+    }
+  }
+  if (canceled.current) {
+    RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
+    return;
+  }
+  if (result?.size) {
+    let sub;
+    try {
+      onProgress?.(0, `Zipping... Please wait`);
+      // If all goes well, zip the notesnook-attachments folder in cache.
+
+      sub = subscribe(({ progress }) => {
+        onProgress(
+          progress,
+          `Saving zip file (${(progress * 100).toFixed(1)}%)... Please wait`
+        );
+      });
+      await zip(zipSourceFolder, zipOutputFile);
+      sub?.remove();
+      onProgress(1, `Saving zip file... Please wait`);
+      if (Platform.OS === "android") {
+        // Move the zip to user selected directory.
+        const file = await ScopedStorage.createFile(
+          outputFolder,
+          `notesnook-attachments-${Date.now()}.zip`,
+          "application/zip"
+        );
+        await copyFileAsync(`file://${zipOutputFile}`, file.uri);
+      }
+
+      onProgress?.(1, `Done`);
+      releasePermissions(outputFolder);
+    } catch (e) {
+      releasePermissions(outputFolder);
+      sub?.remove();
+      console.log("Error zipping attachments", e);
+    }
+    // Remove source & zip file from cache.
+    RNFetchBlob.fs.unlink(zipSourceFolder).catch(console.log);
+    if (Platform.OS === "android") {
+      RNFetchBlob.fs.unlink(zipOutputFile).catch(console.log);
+    }
+  }
+
+  return result;
+}
 
 export default async function downloadAttachment(
   hash,
   global = true,
   options = {
     silent: false,
-    cache: false
+    cache: false,
+    throwError: false,
+    groupId: undefined
   }
 ) {
   let attachment = db.attachments.attachment(hash);
@@ -55,8 +199,13 @@ export default async function downloadAttachment(
   }
 
   try {
-    await db.fs.downloadFile(
+    console.log(
+      "starting download attachment",
       attachment.metadata.hash,
+      options.groupId
+    );
+    await db.fs.downloadFile(
+      options.groupId || attachment.metadata.hash,
       attachment.metadata.hash
     );
     if (
@@ -99,7 +248,8 @@ export default async function downloadAttachment(
 
     if (
       attachment.dateUploaded &&
-      !attachment.metadata?.type?.startsWith("image")
+      !isImage(attachment.metadata?.type) &&
+      !isDocument(attachment.metadata?.type)
     ) {
       RNFetchBlob.fs
         .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.metadata.hash}`)
@@ -131,5 +281,8 @@ export default async function downloadAttachment(
         .catch(console.log);
     }
     useAttachmentStore.getState().remove(attachment.metadata.hash);
+    if (options.throwError) {
+      throw e;
+    }
   }
 }

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

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import hosts from "@notesnook/core/utils/constants";
 import NetInfo from "@react-native-community/netinfo";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import { ToastEvent } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { db } from "../database";

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

@@ -19,18 +19,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Platform } from "react-native";
 import Sodium from "@ammarahmed/react-native-sodium";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import { cacheDir, getRandomId } from "./utils";
 import { db } from "../database";
 import { compressToBase64 } from "./compress";
+import { IOS_APPGROUPID } from "../../utils/constants";
 
 export async function readEncrypted(filename, key, cipherData) {
   let path = `${cacheDir}/${filename}`;
   try {
-    let exists = await RNFetchBlob.fs.exists(path);
+    const iosAppGroup =
+      Platform.OS === "ios"
+        ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+        : null;
+
+    const appGroupPath = `${iosAppGroup}/${filename}`;
+    let exists =
+      (await RNFetchBlob.fs.exists(path)) ||
+      (Platform.OS === "ios" && (await RNFetchBlob.fs.exists(appGroupPath)));
+
     if (!exists) {
       return false;
     }
+
     const attachment = db.attachments.attachment(filename);
     const isPng = /(png)/g.test(attachment?.metadata.type);
     const isJpeg = /(jpeg|jpg)/g.test(attachment?.metadata.type);
@@ -39,7 +50,8 @@ export async function readEncrypted(filename, key, cipherData) {
       key,
       {
         ...cipherData,
-        hash: filename
+        hash: filename,
+        appGroupId: IOS_APPGROUPID
       },
       cipherData.outputType === "base64"
         ? isPng || isJpeg

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

@@ -17,10 +17,13 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { db } from "../database";
 import { cacheDir } from "./utils";
+import { isImage, isDocument } from "@notesnook/core/utils/filename";
+import { Platform } from "react-native";
+import { IOS_APPGROUPID } from "../../utils/constants";
 
 export async function uploadFile(filename, data, cancelToken) {
   if (!data) return false;
@@ -35,9 +38,19 @@ export async function uploadFile(filename, data, cancelToken) {
     if (!res.ok) throw new Error(`${res.status}: Unable to resolve upload url`);
     const uploadUrl = await res.text();
     if (!uploadUrl) throw new Error("Unable to resolve upload url");
+    let uploadFilePath = `${cacheDir}/${filename}`;
 
+    const iosAppGroup =
+      Platform.OS === "ios"
+        ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+        : null;
+    const appGroupPath = `${iosAppGroup}/${filename}`;
+    let exists = await RNFetchBlob.fs.exists(uploadFilePath);
+    if (!exists && Platform.OS === "ios") {
+      uploadFilePath = appGroupPath;
+    }
     let request = RNFetchBlob.config({
-      IOSBackgroundTask: true
+      IOSBackgroundTask: !globalThis["IS_SHARE_EXTENSION"]
     })
       .fetch(
         "PUT",
@@ -45,7 +58,7 @@ export async function uploadFile(filename, data, cancelToken) {
         {
           "content-type": ""
         },
-        RNFetchBlob.wrap(`${cacheDir}/${filename}`)
+        RNFetchBlob.wrap(uploadFilePath)
       )
       .uploadProgress((sent, total) => {
         useAttachmentStore
@@ -63,7 +76,10 @@ export async function uploadFile(filename, data, cancelToken) {
     if (result) {
       let attachment = db.attachments.attachment(filename);
       if (!attachment) return result;
-      if (!attachment.metadata.type.startsWith("image/")) {
+      if (
+        !isImage(attachment.metadata.type) &&
+        !isDocument(attachment.metadata?.type)
+      ) {
         RNFetchBlob.fs.unlink(`${cacheDir}/${filename}`).catch(console.log);
       }
     }

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

@@ -17,7 +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 RNFetchBlob from "rn-fetch-blob";
+import * as ScopedStorage from "react-native-scoped-storage";
+import { Platform } from "react-native";
+import RNFetchBlob from "react-native-blob-util";
 
 export const cacheDir = RNFetchBlob.fs.dirs.CacheDir;
 
@@ -62,3 +64,22 @@ export function cancelable(operation) {
     };
   };
 }
+
+export function copyFileAsync(source, dest) {
+  return new Promise((resolve) => {
+    ScopedStorage.copyFile(source, dest, (e, r) => {
+      console.log(e, r);
+      resolve();
+    });
+  });
+}
+
+export async function releasePermissions(path) {
+  if (Platform.OS === "ios") return;
+  const uris = await ScopedStorage.getPersistedUriPermissions();
+  for (let uri of uris) {
+    if (path.startsWith(uri)) {
+      await ScopedStorage.releasePersistableUriPermission(uri);
+    }
+  }
+}

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

@@ -148,7 +148,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={SIZE.xs + 1}
+                fontSize={SIZE.xs}
                 type="gray"
                 onPress={() => onPress(item)}
                 width={null}

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

@@ -67,7 +67,7 @@ export const Title = ({ text, style = {}, inline }) => {
           right: 0
         }}
         iconSize={24}
-        fontSize={SIZE.xs + 1}
+        fontSize={SIZE.xs}
         style={{
           borderRadius: 100,
           paddingVertical: 0,

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

@@ -102,15 +102,21 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
         if (res.failed) {
           db.attachments.markAsFailed(attachment.id, res.failed);
           setFailed(res.failed);
+          ToastEvent.show({
+            heading: "File check failed with error: " + res.failed,
+            type: "error",
+            context: "local"
+          });
         } else {
           setFailed(null);
           db.attachments.markAsFailed(attachment.id, null);
+          ToastEvent.show({
+            heading: "File check passed",
+            type: "success",
+            context: "local"
+          });
         }
-        ToastEvent.show({
-          heading: "File check passed",
-          type: "success",
-          context: "local"
-        });
+
         setAttachments([...db.attachments.all]);
         setLoading({
           name: null
@@ -209,7 +215,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
           }}
         >
           <Paragraph
-            size={SIZE.xs + 1}
+            size={SIZE.xs}
             style={{
               marginRight: 10
             }}
@@ -221,7 +227,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
             style={{
               marginRight: 10
             }}
-            size={SIZE.xs + 1}
+            size={SIZE.xs}
             color={colors.icon}
           >
             {formatBytes(attachment.length)}
@@ -232,7 +238,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
               style={{
                 marginRight: 10
               }}
-              size={SIZE.xs + 1}
+              size={SIZE.xs}
               color={colors.icon}
             >
               {attachment.noteIds.length} note
@@ -248,7 +254,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
                 context: "local"
               });
             }}
-            size={SIZE.xs + 1}
+            size={SIZE.xs}
             color={colors.icon}
           >
             {attachment.metadata.hash}
@@ -304,7 +310,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
                 }}
                 key={item.id}
               >
-                <Paragraph size={SIZE.xs + 1}>{item.title}</Paragraph>
+                <Paragraph size={SIZE.xs}>{item.title}</Paragraph>
               </PressableButton>
             ))}
           </>

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

@@ -22,7 +22,6 @@ import { TouchableOpacity, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
-import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { formatBytes } from "../../utils";
 import { SIZE } from "../../utils/size";
@@ -37,19 +36,26 @@ function getFileExtension(filename) {
   return ext == null ? "" : ext[1];
 }
 
-export const AttachmentItem = ({ attachment, encryption, setAttachments }) => {
+export const AttachmentItem = ({
+  attachment,
+  encryption,
+  setAttachments,
+  pressable = true,
+  hideWhenNotDownloading
+}) => {
   const colors = useThemeStore((state) => state.colors);
   const [currentProgress, setCurrentProgress] = useAttachmentProgress(
     attachment,
     encryption
   );
-  const encryptionProgress = useAttachmentStore(
-    (state) => state.encryptionProgress
-  );
+
   const onPress = () => {
+    if (!pressable) return;
     Actions.present(attachment, setAttachments, attachment.metadata.hash);
   };
-  return (
+
+  return hideWhenNotDownloading &&
+    (!currentProgress || !currentProgress.value) ? null : (
     <TouchableOpacity
       activeOpacity={0.9}
       onPress={onPress}
@@ -112,22 +118,22 @@ export const AttachmentItem = ({ attachment, encryption, setAttachments }) => {
             {attachment.metadata.filename}
           </Paragraph>
 
-          <Paragraph color={colors.icon} size={SIZE.xs}>
-            {formatBytes(attachment.length)}{" "}
-            {currentProgress?.type
-              ? "(" + currentProgress.type + "ing - tap to cancel)"
-              : ""}
-          </Paragraph>
+          {!hideWhenNotDownloading ? (
+            <Paragraph color={colors.icon} size={SIZE.xs}>
+              {formatBytes(attachment.length)}{" "}
+              {currentProgress?.type
+                ? "(" + currentProgress.type + "ing - tap to cancel)"
+                : ""}
+            </Paragraph>
+          ) : null}
         </View>
       </View>
 
-      {currentProgress ||
-      (encryptionProgress && encryptionProgress !== "0.00") ||
-      encryption ? (
+      {currentProgress ? (
         <TouchableOpacity
           activeOpacity={0.9}
           onPress={() => {
-            if (encryption) return;
+            if (encryption || !pressable) return;
             db.fs.cancel(attachment.metadata.hash);
             setCurrentProgress(null);
           }}
@@ -140,13 +146,7 @@ export const AttachmentItem = ({ attachment, encryption, setAttachments }) => {
         >
           <ProgressCircleComponent
             size={SIZE.xxl}
-            progress={
-              encryptionProgress
-                ? encryptionProgress
-                : currentProgress?.value
-                ? currentProgress?.value / 100
-                : 0
-            }
+            progress={currentProgress?.value ? currentProgress?.value / 100 : 0}
             showsText
             textStyle={{
               fontSize: 10

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

@@ -0,0 +1,273 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { useRef, useState } from "react";
+import { Platform, View } from "react-native";
+import { db } from "../../common/database";
+import { downloadAttachments } from "../../common/filesystem/download-attachment";
+import { presentSheet } from "../../services/event-manager";
+import { Button } from "../ui/button";
+import Heading from "../ui/typography/heading";
+import Paragraph from "../ui/typography/paragraph";
+import { ProgressBarComponent } from "../ui/svg/lazy";
+import { useThemeStore } from "../../stores/use-theme-store";
+import { FlatList } from "react-native-actions-sheet";
+import { AttachmentItem } from "./attachment-item";
+
+const DownloadAttachments = ({ close, attachments, isNote, update }) => {
+  const colors = useThemeStore((state) => state.colors);
+  const [downloading, setDownloading] = useState(false);
+  const [progress, setProgress] = useState({
+    value: 0,
+    statusText: "Download started... Please wait"
+  });
+  const [result, setResult] = useState(new Map());
+  const canceled = useRef(false);
+  const groupId = useRef();
+
+  const onDownload = async () => {
+    update({
+      disableClosing: true
+    });
+    setDownloading(true);
+    canceled.current = false;
+    groupId.current = Date.now().toString();
+    const result = await downloadAttachments(
+      attachments,
+      (progress, statusText) => setProgress({ value: progress, statusText }),
+      canceled,
+      groupId.current
+    );
+    if (canceled.current) return;
+    setResult(result || new Map());
+    setDownloading(false);
+    update({
+      disableClosing: false
+    });
+  };
+
+  const cancel = async () => {
+    update({
+      disableClosing: false
+    });
+    canceled.current = true;
+    console.log(groupId.current, "canceling groupId downloads");
+    await db.fs.cancel(groupId.current);
+    setDownloading(false);
+    groupId.current = null;
+  };
+
+  const successResults = () => {
+    const results = [];
+    for (let [key, value] of result.entries()) {
+      if (value.status === 1) results.push(db.attachments.attachment(key));
+    }
+    return results;
+  };
+
+  const failedResults = () => {
+    const results = [];
+    for (let [key, value] of result.entries()) {
+      if (value.status === 0) results.push(db.attachments.attachment(key));
+    }
+    return results;
+  };
+
+  function getResultText() {
+    const downloadedAttachmentsCount =
+      attachments.length - failedResults().length;
+    if (downloadedAttachmentsCount === 0)
+      return "Failed to download all attachments";
+    return `Successfully downloaded ${downloadedAttachmentsCount}/${
+      attachments.length
+    } attachments as a zip file at ${
+      Platform.OS === "android" ? "the selected folder" : "Notesnook/downloads"
+    }`;
+  }
+
+  return (
+    <View
+      style={{
+        alignItems: "center",
+        width: "100%",
+        paddingVertical: 12,
+        paddingHorizontal: 12
+      }}
+    >
+      <Heading>
+        {downloading
+          ? "Downloading attachments"
+          : result?.size
+          ? "Downloaded attachments"
+          : "Download attachments"}
+      </Heading>
+
+      {downloading ? (
+        <Paragraph
+          style={{
+            textAlign: "center"
+          }}
+        >
+          {progress.statusText}
+        </Paragraph>
+      ) : result?.size ? (
+        <Paragraph
+          style={{
+            textAlign: "center"
+          }}
+        >
+          {getResultText()}
+        </Paragraph>
+      ) : (
+        <Paragraph
+          style={{
+            textAlign: "center"
+          }}
+        >
+          Are you sure you want to download all attachments
+          {isNote ? " of this note?" : "?"}
+        </Paragraph>
+      )}
+
+      {downloading ? (
+        <View
+          style={{
+            width: 200,
+            marginTop: 10
+          }}
+        >
+          <ProgressBarComponent
+            height={5}
+            width={null}
+            animated={true}
+            useNativeDriver
+            progress={progress.value ? progress.value / attachments.length : 0}
+            unfilledColor={colors.nav}
+            color={colors.accent}
+            borderWidth={0}
+          />
+        </View>
+      ) : null}
+
+      <FlatList
+        style={{
+          maxHeight: 300,
+          width: "100%",
+          minHeight: 60,
+          backgroundColor: colors.nav,
+          borderRadius: 5,
+          marginVertical: 12
+        }}
+        data={downloading ? attachments : []}
+        ListEmptyComponent={
+          <View
+            style={{
+              width: "100%",
+              justifyContent: "center",
+              alignItems: "center",
+              height: 60
+            }}
+          >
+            <Paragraph color={colors.icon}>No downloads in progress.</Paragraph>
+          </View>
+        }
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => {
+          return (
+            <AttachmentItem
+              attachment={item}
+              setAttachments={() => {}}
+              pressable={false}
+              hideWhenNotDownloading={true}
+            />
+          );
+        }}
+      />
+
+      {result?.size ? (
+        <Button
+          style={{
+            width: 250,
+            borderRadius: 100,
+            marginTop: 20
+          }}
+          onPress={close}
+          type="accent"
+          title="Done"
+        />
+      ) : !downloading ? (
+        <View
+          style={{
+            flexDirection: "row",
+            width: "100%",
+            marginTop: 20
+          }}
+        >
+          <Button
+            style={{
+              flex: 1,
+              borderRadius: 100,
+              marginRight: 5
+            }}
+            onPress={close}
+            type="grayBg"
+            title="No"
+          />
+          <Button
+            style={{
+              flex: 1,
+              borderRadius: 100,
+              marginLeft: 5
+            }}
+            onPress={onDownload}
+            type="accent"
+            title="Yes"
+          />
+        </View>
+      ) : (
+        <Button
+          style={{
+            width: 250,
+            borderRadius: 100,
+            marginTop: 20
+          }}
+          onPress={cancel}
+          type="error"
+          title="Cancel"
+        />
+      )}
+    </View>
+  );
+};
+
+DownloadAttachments.present = (context, attachments, isNote) => {
+  presentSheet({
+    context: context,
+    component: (ref, close, update) => (
+      <DownloadAttachments
+        close={close}
+        attachments={attachments}
+        isNote={isNote}
+        update={update}
+      />
+    )
+  });
+};
+
+export default DownloadAttachments;

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

@@ -18,44 +18,60 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useRef, useState } from "react";
-import { View } from "react-native";
+import { ActivityIndicator, ScrollView, View } from "react-native";
+import { FlatList } from "react-native-actions-sheet";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import filesystem from "../../common/filesystem";
 import { presentSheet } from "../../services/event-manager";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
-import DialogHeader from "../dialog/dialog-header";
+import SheetProvider from "../sheet-provider";
+import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
 import Seperator from "../ui/seperator";
+import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { AttachmentItem } from "./attachment-item";
-import { FlatList } from "react-native-actions-sheet";
+import DownloadAttachments from "./download-attachments";
+import { Button } from "../ui/button";
+import {
+  isAudio,
+  isDocument,
+  isImage,
+  isVideo
+} from "@notesnook/core/utils/filename";
 
-export const AttachmentDialog = ({ data }) => {
+export const AttachmentDialog = ({ note }) => {
   const colors = useThemeStore((state) => state.colors);
-  const [note, setNote] = useState(data);
+
   const [attachments, setAttachments] = useState(
-    data
-      ? db.attachments.ofNote(data.id, "all")
+    note
+      ? db.attachments.ofNote(note.id, "all")
       : [...(db.attachments.all || [])]
   );
+
   const attachmentSearchValue = useRef();
   const searchTimer = useRef();
   const [loading, setLoading] = useState(false);
+  const [currentFilter, setCurrentFilter] = useState("all");
 
   const onChangeText = (text) => {
+    const attachments = note
+      ? db.attachments.ofNote(note.id, "all")
+      : [...(db.attachments.all || [])];
+
     attachmentSearchValue.current = text;
     if (
       !attachmentSearchValue.current ||
       attachmentSearchValue.current === ""
     ) {
-      setAttachments([...db.attachments.all]);
+      setAttachments([...attachments]);
     }
     clearTimeout(searchTimer.current);
     searchTimer.current = setTimeout(() => {
       let results = db.lookup.attachments(
-        db.attachments.all,
+        attachments,
         attachmentSearchValue.current
       );
       if (results.length === 0) return;
@@ -67,6 +83,77 @@ export const AttachmentDialog = ({ data }) => {
     <AttachmentItem setAttachments={setAttachments} attachment={item} />
   );
 
+  const onCheck = async () => {
+    setLoading(true);
+    const checkedAttachments = [];
+    for (let attachment of attachments) {
+      let result = await filesystem.checkAttachment(attachment.metadata.hash);
+      if (result.failed) {
+        await db.attachments.markAsFailed(
+          attachment.metadata.hash,
+          result.failed
+        );
+      } else {
+        await db.attachments.markAsFailed(attachment.id, null);
+      }
+      checkedAttachments.push(
+        db.attachments.attachment(attachment.metadata.hash)
+      );
+      setAttachments([...checkedAttachments]);
+    }
+    setLoading(false);
+  };
+
+  const attachmentTypes = [
+    {
+      title: "All",
+      filterBy: "all"
+    },
+    {
+      title: "Images",
+      filterBy: "images"
+    },
+    {
+      title: "Documents",
+      filterBy: "documents"
+    },
+    {
+      title: "Video",
+      filterBy: "video"
+    },
+    {
+      title: "Audio",
+      filterBy: "audio"
+    }
+  ];
+
+  const filterAttachments = (type) => {
+    const attachments = note
+      ? db.attachments.ofNote(note.id, "all")
+      : [...(db.attachments.all || [])];
+    isDocument;
+    switch (type) {
+      case "all":
+        return attachments;
+      case "images":
+        return attachments.filter((attachment) =>
+          isImage(attachment.metadata.type)
+        );
+      case "video":
+        return attachments.filter((attachment) =>
+          isVideo(attachment.metadata.type)
+        );
+      case "audio":
+        return attachments.filter((attachment) =>
+          isAudio(attachment.metadata.type)
+        );
+      case "documents":
+        return attachments.filter((attachment) =>
+          isDocument(attachment.metadata.type)
+        );
+    }
+  };
+
   return (
     <View
       style={{
@@ -75,43 +162,71 @@ export const AttachmentDialog = ({ data }) => {
         paddingHorizontal: 12
       }}
     >
-      <DialogHeader
-        title={note ? "Attachments" : "Manage attachments"}
-        paragraph="Tap on an attachment to view properties"
-        button={{
-          title: "Check all",
-          type: "grayAccent",
-          loading: loading,
-          onPress: async () => {
-            setLoading(true);
-            for (let attachment of attachments) {
-              let result = await filesystem.checkAttachment(
-                attachment.metadata.hash
+      <SheetProvider context="attachments-list" />
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }}
+      >
+        <Heading>Attachments</Heading>
+
+        <View
+          style={{
+            flexDirection: "row"
+          }}
+        >
+          {loading ? (
+            <ActivityIndicator
+              style={{
+                height: 40,
+                width: 40,
+                marginRight: 10
+              }}
+              size={SIZE.lg}
+            />
+          ) : (
+            <IconButton
+              name="check-all"
+              customStyle={{
+                height: 40,
+                width: 40,
+                marginRight: 10
+              }}
+              color={colors.pri}
+              size={SIZE.lg}
+              onPress={onCheck}
+            />
+          )}
+
+          <IconButton
+            name="download"
+            customStyle={{
+              height: 40,
+              width: 40
+            }}
+            color={colors.pri}
+            onPress={() => {
+              DownloadAttachments.present(
+                "attachments-list",
+                attachments,
+                !!note
               );
-              if (result.failed) {
-                db.attachments.markAsFailed(
-                  attachment.metadata.hash,
-                  result.failed
-                );
-              } else {
-                db.attachments.markAsFailed(attachment.id, null);
-              }
-              setAttachments([...db.attachments.all]);
-            }
-            setLoading(false);
-          }
+            }}
+            size={SIZE.lg}
+          />
+        </View>
+      </View>
+
+      <Seperator />
+      <Input
+        placeholder="Filter attachments by filename, type or hash"
+        onChangeText={onChangeText}
+        onSubmit={() => {
+          onChangeText(attachmentSearchValue.current);
         }}
       />
-      <Seperator />
-      {!note ? (
-        <Input
-          placeholder="Filter attachments by filename, type or hash"
-          onChangeText={onChangeText}
-          onSubmit={() => {
-            onChangeText(attachmentSearchValue.current);
-          }}
-        />
-      ) : null}
 
       <FlatList
         keyboardDismissMode="none"
@@ -119,6 +234,45 @@ export const AttachmentDialog = ({ data }) => {
         maxToRenderPerBatch={10}
         initialNumToRender={10}
         windowSize={5}
+        stickyHeaderIndices={[0]}
+        ListHeaderComponent={
+          <ScrollView
+            style={{
+              width: "100%",
+              height: 50,
+              flexDirection: "row",
+              backgroundColor: colors.bg
+            }}
+            contentContainerStyle={{
+              minWidth: "100%"
+            }}
+            horizontal
+          >
+            {attachmentTypes.map((item) => (
+              <Button
+                type={currentFilter === item.filterBy ? "grayAccent" : "gray"}
+                key={item.title}
+                title={
+                  item.title +
+                  ` (${filterAttachments(item.filterBy)?.length || 0})`
+                }
+                style={{
+                  borderRadius: 0,
+                  borderBottomWidth: 1,
+                  flexGrow: 1,
+                  borderBottomColor:
+                    currentFilter !== item.filterBy
+                      ? "transparent"
+                      : colors.accent
+                }}
+                onPress={() => {
+                  setCurrentFilter(item.filterBy);
+                  setAttachments(filterAttachments(item.filterBy));
+                }}
+              />
+            ))}
+          </ScrollView>
+        }
         ListEmptyComponent={
           <View
             style={{
@@ -162,6 +316,6 @@ export const AttachmentDialog = ({ data }) => {
 
 AttachmentDialog.present = (note) => {
   presentSheet({
-    component: () => <AttachmentDialog data={note} />
+    component: () => <AttachmentDialog note={note} />
   });
 };

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

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useEffect, useRef, useState } from "react";
-import { Platform, View } from "react-native";
+import { View } from "react-native";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import {
   eSubscribeEvent,
@@ -75,7 +75,7 @@ const AuthModal = () => {
   return !visible ? null : (
     <BaseDialog
       overlayOpacity={0}
-      statusBarTranslucent={false}
+      statusBarTranslucent={true}
       onRequestClose={currentAuthMode !== AuthMode.welcomeSignup && close}
       visible={true}
       onClose={close}
@@ -84,6 +84,7 @@ const AuthModal = () => {
       background={colors.bg}
       transparent={false}
       animated={false}
+      avoidKeyboardResize
     >
       {currentAuthMode !== AuthMode.login ? (
         <Signup
@@ -101,7 +102,7 @@ const AuthModal = () => {
       <View
         style={{
           position: "absolute",
-          top: Platform.OS === "ios" ? insets.top : 0,
+          top: insets.top,
           zIndex: 999,
           flexDirection: "row",
           alignItems: "center",
@@ -126,11 +127,11 @@ const AuthModal = () => {
 
         {initialAuthMode.current !== AuthMode.welcomeSignup ? null : (
           <Button
-            title="Skip for now"
+            title="Skip"
             onPress={() => {
               hideAuth();
             }}
-            iconSize={20}
+            iconSize={16}
             type="gray"
             iconPosition="right"
             icon="chevron-right"

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

@@ -18,9 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useEffect, useState } from "react";
-import { View } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
-import Animated, { FadeInDown, FadeOutUp } from "react-native-reanimated";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
 import { useThemeStore } from "../../stores/use-theme-store";
@@ -30,13 +29,12 @@ import SheetProvider from "../sheet-provider";
 import { Progress } from "../sheets/progress";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
-import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { SVG } from "./background";
 import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
 import { useLogin } from "./use-login";
+import { useSettingStore } from "../../stores/use-setting-store";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -64,6 +62,7 @@ export const Login = ({ changeMode }) => {
     await sleep(500);
     Progress.present();
   });
+  const deviceMode = useSettingStore((state) => state.deviceMode);
 
   useEffect(() => {
     async () => {
@@ -82,62 +81,70 @@ export const Login = ({ changeMode }) => {
     <>
       <ForgotPassword />
       <SheetProvider context="two_factor_verify" />
-      <Animated.View
-        entering={FadeInDown}
-        exiting={FadeOutUp}
+      <View
         style={{
           borderRadius: DDS.isTab ? 5 : 0,
           backgroundColor: colors.bg,
           zIndex: 10,
           width: "100%",
+          alignSelf: "center",
+          height: "100%",
           minHeight: "100%"
         }}
       >
         <View
           style={{
-            height: 250,
-            overflow: "hidden"
-          }}
-        >
-          <SvgView
-            src={SVG(colors.night ? colors.icon : "black")}
-            height={700}
-          />
-        </View>
-        <View
-          style={{
-            width: "100%",
-            justifyContent: "center",
-            alignSelf: "center",
-            paddingHorizontal: 12,
-            marginBottom: 30,
-            marginTop: 15
+            flexGrow: 0.8,
+            justifyContent: "flex-end",
+            paddingHorizontal: 20,
+            backgroundColor: colors.nav,
+            borderBottomWidth: 1,
+            marginBottom: 12,
+            borderBottomColor: colors.border,
+            alignSelf: deviceMode !== "mobile" ? "center" : undefined,
+            borderWidth: deviceMode !== "mobile" ? 1 : null,
+            borderColor: deviceMode !== "mobile" ? colors.border : null,
+            borderRadius: deviceMode !== "mobile" ? 20 : null,
+            marginTop: deviceMode !== "mobile" ? 50 : null,
+            width: deviceMode === "mobile" ? null : "50%"
           }}
         >
+          <View
+            style={{
+              flexDirection: "row"
+            }}
+          >
+            <View
+              style={{
+                width: 100,
+                height: 5,
+                backgroundColor: colors.accent,
+                borderRadius: 2,
+                marginRight: 7
+              }}
+            />
+
+            <View
+              style={{
+                width: 20,
+                height: 5,
+                backgroundColor: colors.nav,
+                borderRadius: 2
+              }}
+            />
+          </View>
           <Heading
             style={{
-              textAlign: "center"
+              marginBottom: 25,
+              marginTop: 10
             }}
-            size={30}
-            color={colors.heading}
+            extraBold
+            size={SIZE.xxl}
           >
-            Welcome back!
+            Login to your {"\n"}account
           </Heading>
-          <Paragraph
-            style={{
-              textDecorationLine: "underline",
-              textAlign: "center",
-              marginTop: 5
-            }}
-            onPress={() => {
-              if (loading) return;
-              changeMode(1);
-            }}
-            size={SIZE.md}
-          >
-            {"Don't have an account? Sign up"}
-          </Paragraph>
         </View>
+
         <View
           style={{
             width: DDS.isTab
@@ -147,10 +154,10 @@ export const Login = ({ changeMode }) => {
               : focused
               ? "100%"
               : "99.9%",
-            padding: 12,
             backgroundColor: colors.bg,
-            flexGrow: 1,
-            alignSelf: "center"
+            alignSelf: "center",
+            paddingHorizontal: 20,
+            flexGrow: 1
           }}
         >
           <Input
@@ -217,28 +224,22 @@ export const Login = ({ changeMode }) => {
 
           <View
             style={{
-              marginTop: 25,
-              alignSelf: "center"
+              marginTop: 25
             }}
           >
             <Button
-              style={{
-                width: 250,
-                borderRadius: 100
-              }}
               loading={loading}
               onPress={() => {
                 if (loading) return;
                 login();
               }}
+              style={{
+                width: 250,
+                borderRadius: 100
+              }}
+              fontSize={SIZE.md}
               type="accent"
-              title={
-                loading
-                  ? null
-                  : step === LoginSteps.emailAuth
-                  ? "Login"
-                  : "Continue"
-              }
+              title={!loading ? "Continue" : null}
             />
 
             {step === LoginSteps.passwordAuth && (
@@ -261,9 +262,34 @@ export const Login = ({ changeMode }) => {
                 type="errorShade"
               />
             )}
+
+            {!loading ? (
+              <TouchableOpacity
+                onPress={() => {
+                  if (loading) return;
+                  changeMode(1);
+                }}
+                activeOpacity={0.8}
+                style={{
+                  alignSelf: "center",
+                  marginTop: 12,
+                  paddingVertical: 12
+                }}
+              >
+                <Paragraph size={SIZE.xs + 1} color={colors.icon}>
+                  Don't have an account?{" "}
+                  <Paragraph
+                    size={SIZE.xs + 1}
+                    style={{ color: colors.accent }}
+                  >
+                    Sign up
+                  </Paragraph>
+                </Paragraph>
+              </TouchableOpacity>
+            ) : null}
           </View>
         </View>
-      </Animated.View>
+      </View>
     </>
   );
 };

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

@@ -44,8 +44,10 @@ import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
 
 function getObfuscatedEmail(email) {
-  if (!email) return null;
-  return email.replace(/(.{2})(.*)(?=@)/, function (gp1, gp2, gp3) {
+  if (!email) return "";
+  const [username, provider] = email.split("@");
+  if (username.length === 1) return `****@${provider}`;
+  return email.replace(/(.{1})(.*)(?=@)/, function (gp1, gp2, gp3) {
     for (let i = 0; i < gp3.length; i++) {
       gp2 += "*";
     }

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

@@ -18,8 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useRef, useState } from "react";
-import { Dimensions, View } from "react-native";
-import Animated, { FadeInDown, FadeOutUp } from "react-native-reanimated";
+import { TouchableOpacity, View } from "react-native";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { ToastEvent } from "../../services/event-manager";
@@ -32,11 +31,10 @@ import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
-import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { SVG } from "./background";
 import { hideAuth } from "./common";
+import { useSettingStore } from "../../stores/use-setting-store";
 
 export const Signup = ({ changeMode, trial }) => {
   const colors = useThemeStore((state) => state.colors);
@@ -50,6 +48,7 @@ export const Signup = ({ changeMode, trial }) => {
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
   const setLastSynced = useUserStore((state) => state.setLastSynced);
+  const deviceMode = useSettingStore((state) => state.deviceMode);
 
   const validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
@@ -96,69 +95,77 @@ export const Signup = ({ changeMode, trial }) => {
 
   return (
     <>
-      <Animated.View
-        entering={FadeInDown}
-        exiting={FadeOutUp}
+      <View
         style={{
           borderRadius: DDS.isTab ? 5 : 0,
           backgroundColor: colors.bg,
           zIndex: 10,
           width: "100%",
+          alignSelf: "center",
+          height: "100%",
           minHeight: "100%"
         }}
       >
         <View
           style={{
-            height: 250,
-            overflow: "hidden"
+            flexGrow: 1,
+            justifyContent: "flex-end",
+            paddingHorizontal: 20,
+            backgroundColor: colors.nav,
+            marginBottom: 20,
+            borderBottomWidth: 1,
+            borderBottomColor: colors.border,
+            alignSelf: deviceMode !== "mobile" ? "center" : undefined,
+            borderWidth: deviceMode !== "mobile" ? 1 : null,
+            borderColor: deviceMode !== "mobile" ? colors.border : null,
+            borderRadius: deviceMode !== "mobile" ? 20 : null,
+            marginTop: deviceMode !== "mobile" ? 50 : null,
+            width: deviceMode === "mobile" ? null : "50%"
           }}
         >
-          <SvgView
-            src={SVG(colors.night ? colors.icon : "black")}
-            height={700}
-          />
+          <View
+            style={{
+              flexDirection: "row"
+            }}
+          >
+            <View
+              style={{
+                width: 100,
+                height: 5,
+                backgroundColor: colors.accent,
+                borderRadius: 2,
+                marginRight: 7
+              }}
+            />
+
+            <View
+              style={{
+                width: 20,
+                height: 5,
+                backgroundColor: colors.nav,
+                borderRadius: 2
+              }}
+            />
+          </View>
+          <Heading
+            extraBold
+            style={{
+              marginBottom: 25,
+              marginTop: 10
+            }}
+            size={SIZE.xxl}
+          >
+            Create your {"\n"}account
+          </Heading>
         </View>
 
-        <View
-          style={{
-            width: "100%",
-            justifyContent: "center",
-            alignSelf: "center",
-            paddingHorizontal: 12,
-            marginBottom: 30,
-            marginTop: Dimensions.get("window").height < 700 ? -75 : 15
-          }}
-        >
-          <Heading
-            style={{
-              textAlign: "center"
-            }}
-            size={30}
-            color={colors.heading}
-          >
-            Create your account
-          </Heading>
-          <Paragraph
-            style={{
-              textDecorationLine: "underline",
-              textAlign: "center"
-            }}
-            onPress={() => {
-              if (loading) return;
-              changeMode(0);
-            }}
-            size={SIZE.md}
-          >
-            Already have an account? Log in
-          </Paragraph>
-        </View>
         <View
           style={{
             width: DDS.isTab ? "50%" : "100%",
-            padding: 12,
+            paddingHorizontal: 20,
             backgroundColor: colors.bg,
-            flexGrow: 1,
-            alignSelf: "center"
+            alignSelf: "center",
+            flexGrow: 0.5
           }}
         >
           <Input
@@ -217,37 +224,13 @@ export const Signup = ({ changeMode, trial }) => {
             validationType="confirmPassword"
             customValidator={() => password.current}
             placeholder="Confirm password"
-            marginBottom={5}
+            marginBottom={12}
             onSubmit={signup}
           />
-          <View
-            style={{
-              marginTop: 25,
-              alignSelf: "center"
-            }}
-          >
-            <Button
-              style={{
-                width: 250,
-                borderRadius: 100
-              }}
-              loading={loading}
-              onPress={() => {
-                if (loading) return;
-                signup();
-              }}
-              type="accent"
-              title={loading ? null : "Agree and continue"}
-            />
-          </View>
 
           <Paragraph
             style={{
-              textAlign: "center",
-              position: "absolute",
-              bottom: 0,
-              alignSelf: "center",
-              marginBottom: 20
+              marginBottom: 25
             }}
             size={SIZE.xs}
             color={colors.icon}
@@ -263,7 +246,7 @@ export const Signup = ({ changeMode, trial }) => {
               }}
               color={colors.accent}
             >
-              terms of service{" "}
+              Terms of Service{" "}
             </Paragraph>
             and{" "}
             <Paragraph
@@ -276,11 +259,46 @@ export const Signup = ({ changeMode, trial }) => {
               }}
               color={colors.accent}
             >
-              privacy policy.
-            </Paragraph>
+              Privacy Policy.
+            </Paragraph>{" "}
+            You also agree to recieve marketing emails from us which you can
+            opt-out of from app settings.
           </Paragraph>
+
+          <Button
+            title={!loading ? "Continue" : null}
+            type="accent"
+            loading={loading}
+            onPress={signup}
+            fontSize={SIZE.md}
+            style={{
+              marginRight: 12,
+              width: 250,
+              borderRadius: 100
+            }}
+          />
+
+          <TouchableOpacity
+            onPress={() => {
+              if (loading) return;
+              changeMode(0);
+            }}
+            activeOpacity={0.8}
+            style={{
+              alignSelf: "center",
+              marginTop: 12,
+              paddingVertical: 12
+            }}
+          >
+            <Paragraph size={SIZE.xs + 1} color={colors.icon}>
+              Already have an account?{" "}
+              <Paragraph size={SIZE.xs + 1} style={{ color: colors.accent }}>
+                Login
+              </Paragraph>
+            </Paragraph>
+          </TouchableOpacity>
         </View>
-      </Animated.View>
+      </View>
     </>
   );
 };

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

@@ -36,6 +36,7 @@ import SheetProvider from "../sheet-provider";
 import RateAppSheet from "../sheets/rate-app";
 import RecoveryKeySheet from "../sheets/recovery-key";
 import RestoreDataSheet from "../sheets/restore-data";
+import PDFPreview from "../dialogs/pdf-preview";
 
 const DialogProvider = () => {
   const colors = useThemeStore((state) => state.colors);
@@ -60,6 +61,7 @@ const DialogProvider = () => {
       {loading ? null : <Expiring />}
       <AnnouncementDialog />
       <SessionExpired />
+      <PDFPreview />
     </>
   );
 };

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

@@ -46,7 +46,8 @@ const BaseDialog = ({
   animated = true,
   bounce = true,
   closeOnTouch = true,
-  useSafeArea = true
+  useSafeArea = true,
+  avoidKeyboardResize = false
 }) => {
   const floating = useIsFloatingKeyboard();
 
@@ -94,7 +95,7 @@ const BaseDialog = ({
         }}
       >
         <KeyboardAvoidingView
-          enabled={!floating && Platform.OS === "ios"}
+          enabled={!floating && Platform.OS === "ios" && !avoidKeyboardResize}
           behavior="padding"
         >
           <BouncingView

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

@@ -0,0 +1,324 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { useEffect, useRef, useState } from "react";
+import { Dimensions, TextInput, View } from "react-native";
+import {
+  addOrientationListener,
+  removeOrientationListener
+} from "react-native-orientation";
+import Pdf from "react-native-pdf";
+import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import downloadAttachment from "../../../common/filesystem/download-attachment";
+import { cacheDir } from "../../../common/filesystem/utils";
+import { useAttachmentProgress } from "../../../hooks/use-attachment-progress";
+import useGlobalSafeAreaInsets from "../../../hooks/use-global-safe-area-insets";
+import {
+  eSubscribeEvent,
+  eUnSubscribeEvent
+} from "../../../services/event-manager";
+import { useThemeStore } from "../../../stores/use-theme-store";
+import { SIZE } from "../../../utils/size";
+import { Dialog } from "../../dialog";
+import BaseDialog from "../../dialog/base-dialog";
+import { presentDialog } from "../../dialog/functions";
+import SheetProvider from "../../sheet-provider";
+import { IconButton } from "../../ui/icon-button";
+import { ProgressBarComponent } from "../../ui/svg/lazy";
+import Paragraph from "../../ui/typography/paragraph";
+import { sleep } from "../../../utils/time";
+import { MMKV } from "../../../common/database/mmkv";
+
+const WIN_WIDTH = Dimensions.get("window").width;
+const WIN_HEIGHT = Dimensions.get("window").height;
+
+const attachmentSnapshotsKey = "___attachmentsnapshots";
+const usePDFSnapshot = (attachment) => {
+  const snapshots = useRef(MMKV.getMap(attachmentSnapshotsKey) || {});
+  const snapshot = useRef(snapshots[attachment?.id]);
+
+  function saveSnapshot(ss) {
+    if (!attachment) return;
+    snapshots.current[attachment.id] = ss;
+    MMKV.setMap(attachmentSnapshotsKey, snapshots.current);
+    snapshot.current = snapshots.current[attachment.id];
+  }
+
+  return [snapshot, saveSnapshot];
+};
+
+const PDFPreview = () => {
+  const colors = useThemeStore((state) => state.colors);
+  const [visible, setVisible] = useState(false);
+  const [pdfSource, setPDFSource] = useState();
+  const [loading, setLoading] = useState(false);
+  const [width, setWidth] = useState(WIN_WIDTH);
+  const insets = useGlobalSafeAreaInsets();
+  const [numPages, setNumPages] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
+  const inputRef = useRef();
+  const pdfRef = useRef();
+  const [attachment, setAttachment] = useState(null);
+  const [password, setPassword] = useState("");
+  const [progress] = useAttachmentProgress(attachment);
+  const [snapshot, saveSnapshot] = usePDFSnapshot(attachment);
+  const snapshotValue = useRef(snapshot.current);
+
+  useEffect(() => {
+    eSubscribeEvent("PDFPreview", open);
+    return () => {
+      eUnSubscribeEvent("PDFPreview", open);
+    };
+  }, []);
+
+  const onOrientationChange = (o) => {
+    if (o.includes("LANDSCAPE")) {
+      setWidth(WIN_HEIGHT);
+    } else {
+      setWidth(WIN_WIDTH);
+    }
+  };
+
+  useEffect(() => {
+    addOrientationListener(onOrientationChange);
+    return () => {
+      removeOrientationListener(onOrientationChange);
+    };
+  }, []);
+
+  const open = async (attachment) => {
+    setVisible(true);
+    setLoading(true);
+    setTimeout(async () => {
+      setAttachment(attachment);
+      let hash = attachment.metadata.hash;
+      if (!hash) return;
+      const uri = await downloadAttachment(hash, false, {
+        silent: true,
+        cache: true
+      });
+      const path = `${cacheDir}/${uri}`;
+      snapshotValue.current = snapshot.current;
+      setPDFSource("file://" + path);
+      setLoading(false);
+    }, 100);
+  };
+
+  const close = () => {
+    setPDFSource(null);
+    setVisible(false);
+    setPassword("");
+  };
+
+  const onError = async (error) => {
+    if (error?.message === "Password required or incorrect password.") {
+      await sleep(300);
+      presentDialog({
+        context: attachment?.metadata?.hash,
+        input: true,
+        inputPlaceholder: "Enter password",
+        positiveText: "Unlock",
+        title: "Decrypt",
+        paragraph: "Please input password to view pdf.",
+        positivePress: (value) => {
+          setTimeout(() => {
+            setPassword(value);
+          });
+        },
+        onClose: () => {
+          close();
+        }
+      });
+    }
+  };
+
+  return (
+    visible && (
+      <BaseDialog animation="fade" visible={true} onRequestClose={close}>
+        <SheetProvider context={attachment?.metadata?.hash} />
+        <Dialog context={attachment?.metadata?.hash} />
+
+        <View
+          style={{
+            width: "100%",
+            height: "100%",
+            backgroundColor: "black"
+          }}
+        >
+          {loading ? (
+            <Animated.View
+              exiting={FadeOut}
+              style={{
+                flex: 1,
+                justifyContent: "center",
+                alignItems: "center"
+              }}
+            >
+              <ProgressBarComponent
+                indeterminate={!progress}
+                color={colors.accent}
+                borderColor="transparent"
+                progress={parseInt(progress?.value || "100") / 100}
+              />
+              <Paragraph
+                style={{
+                  marginTop: 10
+                }}
+                color={colors.light}
+              >
+                Loading {`${progress?.percent ? `(${progress?.percent})` : ""}`}
+                ... Please wait
+              </Paragraph>
+            </Animated.View>
+          ) : (
+            <>
+              <View
+                style={{
+                  width: "100%",
+                  height: 50,
+                  marginTop: insets.top,
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  paddingHorizontal: 12,
+                  paddingLeft: 6
+                }}
+              >
+                <View
+                  style={{
+                    flexDirection: "row"
+                  }}
+                >
+                  <IconButton
+                    color={colors.light}
+                    name="arrow-left"
+                    onPress={close}
+                    customStyle={{
+                      marginRight: 12
+                    }}
+                    size={SIZE.xxl}
+                  />
+                </View>
+
+                <View
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    marginRight: 12
+                  }}
+                >
+                  <TextInput
+                    ref={inputRef}
+                    defaultValue={currentPage + ""}
+                    style={{
+                      color: colors.pri,
+                      padding: 0,
+                      paddingTop: 0,
+                      paddingBottom: 0,
+                      marginTop: 0,
+                      marginBottom: 0,
+                      paddingVertical: 0,
+                      height: 25,
+                      backgroundColor: colors.nav,
+                      width: 40,
+                      textAlign: "center",
+                      marginRight: 4,
+                      borderRadius: 3,
+                      fontFamily: "OpenSans-Regular"
+                    }}
+                    selectTextOnFocus
+                    keyboardType="decimal-pad"
+                    onSubmitEditing={(event) => {
+                      setCurrentPage(event.nativeEvent.text);
+                      pdfRef.current?.setPage(parseInt(event.nativeEvent.text));
+                    }}
+                    blurOnSubmit
+                  />
+                  <Paragraph color={colors.light}>/{numPages}</Paragraph>
+                </View>
+
+                <View
+                  style={{
+                    flexDirection: "row"
+                  }}
+                >
+                  <IconButton
+                    color={colors.light}
+                    name="download"
+                    onPress={() => {
+                      downloadAttachment(attachment.metadata.hash, false);
+                    }}
+                  />
+                </View>
+              </View>
+              {pdfSource ? (
+                <Animated.View
+                  style={{
+                    flex: 1
+                  }}
+                  entering={FadeIn}
+                >
+                  <Pdf
+                    source={{
+                      uri: pdfSource
+                    }}
+                    ref={pdfRef}
+                    onLoadComplete={(numberOfPages) => {
+                      setNumPages(numberOfPages);
+                    }}
+                    onPageChanged={(page) => {
+                      setCurrentPage(page);
+                      inputRef.current?.setNativeProps({
+                        text: page + ""
+                      });
+                      saveSnapshot({
+                        currentPage: page,
+                        scale: snapshot?.current?.scale
+                      });
+                    }}
+                    // scale={snapshotValue.current?.scale}
+                    // onScaleChanged={(scale) => {
+                    //   saveSnapshot({
+                    //     currentPage: snapshot?.current?.currentPage,
+                    //     scale: scale
+                    //   });
+                    // }}
+                    page={snapshotValue?.current?.currentPage}
+                    password={password}
+                    maxScale={6}
+                    onError={onError}
+                    onPressLink={(uri) => {
+                      console.log(`Link pressed: ${uri}`);
+                    }}
+                    style={{
+                      flex: 1,
+                      width: width,
+                      height: Dimensions.get("window").height
+                    }}
+                  />
+                </Animated.View>
+              ) : null}
+            </>
+          )}
+        </View>
+      </BaseDialog>
+    )
+  );
+};
+
+export default PDFPreview;

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

@@ -86,7 +86,7 @@ export const ProFeatures = ({ count = 6 }) => {
           await sleep(300);
           eSendEvent(eOpenPremiumDialog);
         }}
-        size={SIZE.xs + 1}
+        size={SIZE.xs}
         style={{
           textDecorationLine: "underline",
           color: colors.icon

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

@@ -37,11 +37,11 @@ import { useNoteStore } from "../../stores/use-notes-store";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { useUserStore } from "../../stores/use-user-store";
+import { AndroidModule } from "../../utils";
 import { eOpenAnnouncementDialog } from "../../utils/events";
 import { getGithubVersion } from "../../utils/github-version";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
-import { SVG } from "../auth/background";
 import Migrate from "../sheets/migrate";
 import NewFeature from "../sheets/new-feature/index";
 import { Update } from "../sheets/update";
@@ -49,7 +49,6 @@ import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
 import Seperator from "../ui/seperator";
-import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { Walkthrough } from "../walkthroughs";
@@ -69,6 +68,7 @@ const Launcher = React.memo(
     const introCompleted = useSettingStore(
       (state) => state.settings.introCompleted
     );
+    const verifying = useRef(false);
 
     const loadNotes = useCallback(async () => {
       if (verifyUser) {
@@ -87,7 +87,7 @@ const Launcher = React.memo(
 
     const init = useCallback(async () => {
       if (!db.isInitialized) {
-        await RNBootSplash.hide({ fade: true });
+        RNBootSplash.hide({ fade: true });
         DatabaseLogger.info("Initializing database");
         await db.init();
       }
@@ -130,7 +130,6 @@ const Launcher = React.memo(
       if (NewFeature.present()) return;
       if (await checkAppUpdateAvailable()) return;
       if (await checkForRateAppRequest()) return;
-      if (await checkNeedsBackup()) return;
       if (await PremiumService.getRemainingTrialDaysStatus()) return;
 
       if (introCompleted) {
@@ -173,25 +172,13 @@ const Launcher = React.memo(
       return false;
     };
 
-    const checkNeedsBackup = async () => {
-      return false;
-      // let { nextBackupRequestTime, reminder } = SettingsService.get();
-      // if (reminder === 'off' || !reminder) {
-      //   if (nextBackupRequestTime < Date.now()) {
-      //     presentSheet({
-      //       title: 'Backup & restore',
-      //       paragraph: 'Please enable automatic backups to keep your data safe',
-      //       component: <SettingsBackupAndRestore isSheet={true} />
-      //     });
-
-      //     return true;
-      //   }
-      // }
-      // return false;
-    };
-
     const onUnlockBiometrics = useCallback(async () => {
       if (!(await BiometricService.isBiometryAvailable())) return;
+      if (Platform.OS === "android") {
+        const activityName = await AndroidModule.getActivityName();
+        if (activityName !== "MainActivity") return;
+      }
+
       let verified = await BiometricService.validateUser(
         "Unlock to access your notes",
         ""
@@ -200,6 +187,9 @@ const Launcher = React.memo(
         setVerifyUser(false);
         enabled(false);
         password.current = null;
+        setTimeout(() => {
+          verifying.current = false;
+        }, 1);
       }
     }, [setVerifyUser]);
 
@@ -208,7 +198,10 @@ const Launcher = React.memo(
     }, [init, verifyUser]);
 
     useEffect(() => {
+      if (verifying.current || useUserStore.getState().shouldBlockVerifyUser)
+        return;
       if (verifyUser && appState === "active") {
+        verifying.current = true;
         onUnlockBiometrics();
       }
     }, [appState, onUnlockBiometrics, verifyUser]);
@@ -234,18 +227,10 @@ const Launcher = React.memo(
           width: "100%",
           height: "100%",
           position: "absolute",
-          zIndex: 999
+          zIndex: 999,
+          justifyContent: "center"
         }}
       >
-        <View
-          style={{
-            height: 250,
-            overflow: "hidden"
-          }}
-        >
-          <SvgView src={SVG(colors.night ? "white" : "black")} height={700} />
-        </View>
-
         <View
           style={{
             flex: 1,
@@ -281,14 +266,13 @@ const Launcher = React.memo(
               textAlign: "center"
             }}
           >
-            Unlock to access your notes
+            Unlock your notes
           </Heading>
 
           <Paragraph
             style={{
               alignSelf: "center",
               textAlign: "center",
-              fontSize: SIZE.md,
               maxWidth: "90%"
             }}
           >
@@ -299,8 +283,7 @@ const Launcher = React.memo(
             style={{
               width: "100%",
               padding: 12,
-              backgroundColor: colors.bg,
-              flexGrow: 1
+              backgroundColor: colors.bg
             }}
           >
             {user ? (
@@ -340,14 +323,9 @@ const Launcher = React.memo(
               <Button
                 title="Unlock with Biometrics"
                 width={250}
-                height={45}
-                style={{
-                  borderRadius: 100
-                }}
                 onPress={onUnlockBiometrics}
                 icon={"fingerprint"}
                 type={user ? "grayAccent" : "accent"}
-                fontSize={SIZE.md}
               />
             </View>
           </View>

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

@@ -178,16 +178,29 @@ const NoteItem = ({
           </View>
         ) : null}
 
-        <Heading
-          numberOfLines={1}
-          color={COLORS_NOTE[item.color?.toLowerCase()] || colors.heading}
-          style={{
-            flexWrap: "wrap"
-          }}
-          size={SIZE.md}
-        >
-          {item.title}
-        </Heading>
+        {compactMode ? (
+          <Paragraph
+            numberOfLines={1}
+            color={COLORS_NOTE[item.color?.toLowerCase()] || colors.heading}
+            style={{
+              flexWrap: "wrap"
+            }}
+            size={SIZE.sm}
+          >
+            {item.title}
+          </Paragraph>
+        ) : (
+          <Heading
+            numberOfLines={1}
+            color={COLORS_NOTE[item.color?.toLowerCase()] || colors.heading}
+            style={{
+              flexWrap: "wrap"
+            }}
+            size={SIZE.md}
+          >
+            {item.title}
+          </Heading>
+        )}
 
         {item.headline && !compactMode ? (
           <Paragraph
@@ -202,161 +215,219 @@ const NoteItem = ({
           </Paragraph>
         ) : null}
 
-        <View
-          style={{
-            flexDirection: "row",
-            justifyContent: "flex-start",
-            alignItems: "center",
-            width: "100%",
-            marginTop: 5,
-            height: SIZE.md + 2
-          }}
-        >
-          {!isTrash ? (
-            <>
-              {item.conflicted ? (
-                <Icon
-                  name="alert-circle"
+        {compactMode ? null : (
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "flex-start",
+              alignItems: "center",
+              width: "100%",
+              marginTop: 5,
+              height: SIZE.md + 2
+            }}
+          >
+            {!isTrash ? (
+              <>
+                {item.conflicted ? (
+                  <Icon
+                    name="alert-circle"
+                    style={{
+                      marginRight: 6
+                    }}
+                    size={SIZE.sm}
+                    color={colors.red}
+                  />
+                ) : null}
+                <TimeSince
                   style={{
+                    fontSize: SIZE.xs,
+                    color: colors.icon,
                     marginRight: 6
                   }}
-                  size={SIZE.sm}
-                  color={colors.red}
+                  time={item[dateBy]}
+                  updateFrequency={
+                    Date.now() - item[dateBy] < 60000 ? 2000 : 60000
+                  }
                 />
-              ) : null}
-              <TimeSince
-                style={{
-                  fontSize: SIZE.xs,
-                  color: colors.icon,
-                  marginRight: 6
-                }}
-                time={item[dateBy]}
-                updateFrequency={
-                  Date.now() - item[dateBy] < 60000 ? 2000 : 60000
-                }
-              />
 
-              {attachmentCount > 0 ? (
-                <View
+                {attachmentCount > 0 ? (
+                  <View
+                    style={{
+                      flexDirection: "row",
+                      alignItems: "center",
+                      marginRight: 6
+                    }}
+                  >
+                    <Icon
+                      name="attachment"
+                      size={SIZE.md}
+                      color={colors.icon}
+                    />
+                    <Paragraph color={colors.icon} size={SIZE.xs}>
+                      {attachmentCount}
+                    </Paragraph>
+                  </View>
+                ) : null}
+
+                {item.pinned ? (
+                  <Icon
+                    testID="icon-pinned"
+                    name="pin-outline"
+                    size={SIZE.sm}
+                    style={{
+                      marginRight: 6
+                    }}
+                    color={
+                      COLORS_NOTE[item.color?.toLowerCase()] || colors.accent
+                    }
+                  />
+                ) : null}
+
+                {item.locked ? (
+                  <Icon
+                    name="lock"
+                    testID="note-locked-icon"
+                    size={SIZE.sm}
+                    style={{
+                      marginRight: 6
+                    }}
+                    color={colors.icon}
+                  />
+                ) : null}
+
+                {item.favorite ? (
+                  <Icon
+                    testID="icon-star"
+                    name="star"
+                    size={SIZE.md}
+                    style={{
+                      marginRight: 6
+                    }}
+                    color="orange"
+                  />
+                ) : null}
+
+                {!isTrash && !compactMode && tags
+                  ? tags.map((item) =>
+                      item.id ? (
+                        <Button
+                          title={"#" + item.alias}
+                          key={item.id}
+                          height={23}
+                          type="gray"
+                          textStyle={{
+                            textDecorationLine: "underline"
+                          }}
+                          hitSlop={{ top: 8, bottom: 12, left: 0, right: 0 }}
+                          fontSize={SIZE.xs}
+                          style={{
+                            borderRadius: 5,
+                            paddingHorizontal: 6,
+                            marginRight: 4,
+                            zIndex: 10,
+                            maxWidth: tags.length > 1 ? 130 : null
+                          }}
+                          onPress={() => navigateToTag(item)}
+                        />
+                      ) : null
+                    )
+                  : null}
+              </>
+            ) : (
+              <>
+                <Paragraph
+                  color={colors.icon}
+                  size={SIZE.xs}
                   style={{
-                    flexDirection: "row",
-                    alignItems: "center",
                     marginRight: 6
                   }}
                 >
-                  <Icon name="attachment" size={SIZE.md} color={colors.icon} />
-                  <Paragraph color={colors.icon} size={SIZE.xs}>
-                    {attachmentCount}
-                  </Paragraph>
-                </View>
-              ) : null}
+                  Deleted on{" "}
+                  {item && item.dateDeleted
+                    ? new Date(item.dateDeleted).toISOString().slice(0, 10)
+                    : null}
+                </Paragraph>
 
-              {item.pinned ? (
-                <Icon
-                  testID="icon-pinned"
-                  name="pin-outline"
-                  size={SIZE.sm}
+                <Paragraph
+                  color={colors.accent}
+                  size={SIZE.xs}
                   style={{
                     marginRight: 6
                   }}
-                  color={
-                    COLORS_NOTE[item.color?.toLowerCase()] || colors.accent
-                  }
-                />
-              ) : null}
-
-              {item.locked ? (
-                <Icon
-                  name="lock"
-                  testID="note-locked-icon"
-                  size={SIZE.sm}
-                  style={{
-                    marginRight: 6
-                  }}
-                  color={colors.icon}
-                />
-              ) : null}
-
-              {item.favorite ? (
-                <Icon
-                  testID="icon-star"
-                  name="star"
-                  size={SIZE.md}
-                  style={{
-                    marginRight: 6
-                  }}
-                  color="orange"
-                />
-              ) : null}
-
-              {!isTrash && !compactMode && tags
-                ? tags.map((item) =>
-                    item.id ? (
-                      <Button
-                        title={"#" + item.alias}
-                        key={item.id}
-                        height={23}
-                        type="gray"
-                        textStyle={{
-                          textDecorationLine: "underline"
-                        }}
-                        hitSlop={{ top: 8, bottom: 12, left: 0, right: 0 }}
-                        fontSize={SIZE.xs}
-                        style={{
-                          borderRadius: 5,
-                          paddingHorizontal: 6,
-                          marginRight: 4,
-                          zIndex: 10,
-                          maxWidth: tags.length > 1 ? 130 : null
-                        }}
-                        onPress={() => navigateToTag(item)}
-                      />
-                    ) : null
-                  )
-                : null}
-            </>
-          ) : (
-            <>
-              <Paragraph
-                color={colors.icon}
-                size={SIZE.xs}
-                style={{
-                  marginRight: 6
-                }}
-              >
-                Deleted on{" "}
-                {item && item.dateDeleted
-                  ? new Date(item.dateDeleted).toISOString().slice(0, 10)
-                  : null}
-              </Paragraph>
-
-              <Paragraph
-                color={colors.accent}
-                size={SIZE.xs}
-                style={{
-                  marginRight: 6
-                }}
-              >
-                {item.itemType[0].toUpperCase() + item.itemType.slice(1)}
-              </Paragraph>
-            </>
-          )}
-        </View>
+                >
+                  {item.itemType[0].toUpperCase() + item.itemType.slice(1)}
+                </Paragraph>
+              </>
+            )}
+          </View>
+        )}
       </View>
-      <IconButton
-        testID={notesnook.listitem.menu}
-        color={colors.pri}
-        name="dots-horizontal"
-        size={SIZE.xl}
-        onPress={() => !noOpen && showActionSheet(item, isTrash)}
-        customStyle={{
-          justifyContent: "center",
-          height: 35,
-          width: 35,
-          borderRadius: 100,
+      <View
+        style={{
+          flexDirection: "row",
           alignItems: "center"
         }}
-      />
+      >
+        {item.conflicted ? (
+          <Icon
+            name="alert-circle"
+            style={{
+              marginRight: 6
+            }}
+            size={SIZE.sm}
+            color={colors.red}
+          />
+        ) : null}
+
+        {item.locked ? (
+          <Icon
+            name="lock"
+            testID="note-locked-icon"
+            size={SIZE.sm}
+            style={{
+              marginRight: 6
+            }}
+            color={colors.icon}
+          />
+        ) : null}
+
+        {item.favorite ? (
+          <Icon
+            testID="icon-star"
+            name="star-outline"
+            size={SIZE.md}
+            style={{
+              marginRight: 6
+            }}
+            color="orange"
+          />
+        ) : null}
+
+        <TimeSince
+          style={{
+            fontSize: SIZE.xs,
+            color: colors.icon,
+            marginRight: 6
+          }}
+          time={item[dateBy]}
+          updateFrequency={Date.now() - item[dateBy] < 60000 ? 2000 : 60000}
+        />
+
+        <IconButton
+          testID={notesnook.listitem.menu}
+          color={colors.pri}
+          name="dots-horizontal"
+          size={SIZE.xl}
+          onPress={() => !noOpen && showActionSheet(item, isTrash)}
+          customStyle={{
+            justifyContent: "center",
+            height: 35,
+            width: 35,
+            borderRadius: 100,
+            alignItems: "center"
+          }}
+        />
+      </View>
     </>
   );
 };

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

@@ -31,6 +31,7 @@ import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import { getFormattedDate } from "../../../utils/time";
 
 const showActionSheet = (item) => {
   Properties.present(item);
@@ -63,15 +64,28 @@ export const NotebookItem = ({
           flexShrink: 1
         }}
       >
-        <Heading
-          size={SIZE.md}
-          numberOfLines={1}
-          style={{
-            flexWrap: "wrap"
-          }}
-        >
-          {item.title}
-        </Heading>
+        {compactMode ? (
+          <Paragraph
+            size={SIZE.sm}
+            numberOfLines={1}
+            style={{
+              flexWrap: "wrap"
+            }}
+          >
+            {item.title}
+          </Paragraph>
+        ) : (
+          <Heading
+            size={SIZE.md}
+            numberOfLines={1}
+            style={{
+              flexWrap: "wrap"
+            }}
+          >
+            {item.title}
+          </Heading>
+        )}
+
         {isTopic || !item.description || compactMode ? null : (
           <Paragraph
             size={SIZE.sm}
@@ -122,40 +136,51 @@ export const NotebookItem = ({
           </View>
         )}
 
-        <View
-          style={{
-            flexDirection: "row",
-            justifyContent: "flex-start",
-            alignItems: "center",
-            marginTop: 5,
-            height: SIZE.md + 2
-          }}
-        >
-          {isTrash ? (
-            <>
+        {!compactMode ? (
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "flex-start",
+              alignItems: "center",
+              marginTop: 5,
+              height: SIZE.md + 2
+            }}
+          >
+            {isTrash ? (
+              <>
+                <Paragraph
+                  color={colors.icon}
+                  size={SIZE.xs}
+                  style={{
+                    textAlignVertical: "center",
+                    marginRight: 6
+                  }}
+                >
+                  {"Deleted on " +
+                    new Date(item.dateDeleted).toISOString().slice(0, 10)}
+                </Paragraph>
+                <Paragraph
+                  color={colors.accent}
+                  size={SIZE.xs}
+                  style={{
+                    textAlignVertical: "center",
+                    marginRight: 6
+                  }}
+                >
+                  {item.itemType[0].toUpperCase() + item.itemType.slice(1)}
+                </Paragraph>
+              </>
+            ) : (
               <Paragraph
                 color={colors.icon}
                 size={SIZE.xs}
                 style={{
-                  textAlignVertical: "center",
                   marginRight: 6
                 }}
               >
-                {"Deleted on " +
-                  new Date(item.dateDeleted).toISOString().slice(0, 10)}
+                {getFormattedDate(item[dateBy], "date")}
               </Paragraph>
-              <Paragraph
-                color={colors.accent}
-                size={SIZE.xs}
-                style={{
-                  textAlignVertical: "center",
-                  marginRight: 6
-                }}
-              >
-                {item.itemType[0].toUpperCase() + item.itemType.slice(1)}
-              </Paragraph>
-            </>
-          ) : (
+            )}
             <Paragraph
               color={colors.icon}
               size={SIZE.xs}
@@ -163,50 +188,61 @@ export const NotebookItem = ({
                 marginRight: 6
               }}
             >
-              {new Date(item[dateBy]).toDateString().substring(4)}
+              {item && totalNotes > 1
+                ? totalNotes + " notes"
+                : totalNotes === 1
+                ? totalNotes + " note"
+                : "0 notes"}
             </Paragraph>
-          )}
-          <Paragraph
-            color={colors.icon}
-            size={SIZE.xs}
-            style={{
-              marginRight: 6
-            }}
-          >
-            {item && totalNotes > 1
-              ? totalNotes + " notes"
-              : totalNotes === 1
-              ? totalNotes + " note"
-              : "0 notes"}
-          </Paragraph>
 
-          {item.pinned ? (
-            <Icon
-              name="pin-outline"
-              size={SIZE.sm}
-              style={{
-                marginRight: 10,
-                marginTop: 2
-              }}
-              color={colors.accent}
-            />
-          ) : null}
-        </View>
+            {item.pinned ? (
+              <Icon
+                name="pin-outline"
+                size={SIZE.sm}
+                style={{
+                  marginRight: 10,
+                  marginTop: 2
+                }}
+                color={colors.accent}
+              />
+            ) : null}
+          </View>
+        ) : null}
       </View>
-      <IconButton
-        color={colors.heading}
-        name="dots-horizontal"
-        testID={notesnook.ids.notebook.menu}
-        size={SIZE.xl}
-        onPress={() => showActionSheet(item)}
-        customStyle={{
-          justifyContent: "center",
-          height: 35,
-          width: 35,
-          borderRadius: 100,
+      <View
+        style={{
+          flexDirection: "row",
           alignItems: "center"
         }}
-      />
+      >
+        <Paragraph
+          color={colors.icon}
+          size={SIZE.xs}
+          style={{
+            marginRight: 6
+          }}
+        >
+          {item && totalNotes > 1
+            ? totalNotes + " notes"
+            : totalNotes === 1
+            ? totalNotes + " note"
+            : "0 notes"}
+        </Paragraph>
+        <IconButton
+          color={colors.heading}
+          name="dots-horizontal"
+          testID={notesnook.ids.notebook.menu}
+          size={SIZE.xl}
+          onPress={() => showActionSheet(item)}
+          customStyle={{
+            justifyContent: "center",
+            height: 35,
+            width: 35,
+            borderRadius: 100,
+            alignItems: "center"
+          }}
+        />
+      </View>
     </>
   );
 };

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

@@ -108,7 +108,7 @@ const ReminderItem = React.memo(
                   color={colors.errorText}
                 />
                 <Paragraph
-                  size={SIZE.xs + 1}
+                  size={SIZE.xs}
                   color={colors.icon}
                   style={{ marginLeft: 5 }}
                 >
@@ -133,7 +133,7 @@ const ReminderItem = React.memo(
               >
                 <Icon name="reload" size={SIZE.md} color={colors.accent} />
                 <Paragraph
-                  size={SIZE.xs + 1}
+                  size={SIZE.xs}
                   color={colors.icon}
                   style={{ marginLeft: 5 }}
                 >
@@ -147,7 +147,7 @@ const ReminderItem = React.memo(
             <ReminderTime
               reminder={item}
               checkIsActive={false}
-              fontSize={SIZE.xs + 1}
+              fontSize={SIZE.xs}
               style={{
                 justifyContent: "flex-start",
                 borderWidth: 0,

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

@@ -42,11 +42,16 @@ const SelectionWrapper = ({
   const notesListMode = useSettingStore(
     (state) => state.settings.notesListMode
   );
-  const listMode = item.type === "notebook" ? notebooksListMode : notesListMode;
+  const listMode =
+    item.type === "notebook" || item.itemType === "notebook"
+      ? notebooksListMode
+      : notesListMode;
   const compactMode =
-    (item.type === "notebook" || item.type === "note") &&
+    (item.type === "notebook" ||
+      item.itemType === "notebook" ||
+      item.itemType === "note" ||
+      item.type === "note") &&
     listMode === "compact";
-
   if (item.id !== itemId.current) {
     itemId.current = item.id;
   }
@@ -77,7 +82,7 @@ const SelectionWrapper = ({
         width: "100%",
         overflow: "hidden",
         paddingHorizontal: 12,
-        paddingVertical: compactMode ? 8 : 12,
+        paddingVertical: compactMode ? 4 : 12,
         borderRadius: isSheet ? 10 : 0,
         marginBottom: isSheet ? 12 : undefined
       }}

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

@@ -23,6 +23,7 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useSelectionStore } from "../../../stores/use-selection-store";
 import { useThemeStore } from "../../../stores/use-theme-store";
 import { SIZE } from "../../../utils/size";
+import { useSettingStore } from "../../../stores/use-setting-store";
 
 export const SelectionIcon = ({ item }) => {
   const colors = useThemeStore((state) => state.colors);
@@ -32,6 +33,17 @@ export const SelectionIcon = ({ item }) => {
     (state) => state.selectedItemsList
   );
   const [selected, setSelected] = useState(false);
+  const notebooksListMode = useSettingStore(
+    (state) => state.settings.notebooksListMode
+  );
+  const notesListMode = useSettingStore(
+    (state) => state.settings.notesListMode
+  );
+  const listMode = item.type === "notebook" ? notebooksListMode : notesListMode;
+
+  const compactMode =
+    (item.type === "notebook" || item.type === "note") &&
+    listMode === "compact";
 
   useEffect(() => {
     if (selectionMode) {
@@ -54,8 +66,8 @@ export const SelectionIcon = ({ item }) => {
   return selectionMode ? (
     <View
       style={{
-        width: 40,
-        height: 40,
+        width: compactMode ? 30 : 40,
+        height: compactMode ? 30 : 40,
         justifyContent: "center",
         alignItems: "center",
         marginRight: 10,
@@ -67,7 +79,7 @@ export const SelectionIcon = ({ item }) => {
     >
       {selected ? (
         <Icon
-          size={SIZE.xl}
+          size={compactMode ? SIZE.xl - 2 : SIZE.xl}
           color={selected ? colors.accent : colors.icon}
           name={"check"}
         />

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

@@ -37,7 +37,7 @@ import { useThemeStore } from "../../stores/use-theme-store";
 import { dHeight } from "../../utils";
 import { eOnLoadNote, eShowMergeDialog } from "../../utils/events";
 import { SIZE } from "../../utils/size";
-import { sleep, timeConverter } from "../../utils/time";
+import { getFormattedDate, sleep } from "../../utils/time";
 import BaseDialog from "../dialog/base-dialog";
 import DialogButtons from "../dialog/dialog-buttons";
 import DialogContainer from "../dialog/dialog-container";
@@ -166,7 +166,7 @@ const MergeConflicts = () => {
               {isCurrent ? "(This Device)" : "(Incoming)"}
             </Text>
             {"\n"}
-            {timeConverter(contentToKeep?.dateEdited)}
+            {getFormattedDate(contentToKeep?.dateEdited)}
           </Paragraph>
         </View>
 

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

@@ -26,7 +26,7 @@ import { presentSheet } from "../../services/event-manager";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { openLinkInBrowser } from "../../utils/functions";
 import { SIZE } from "../../utils/size";
-import { timeConverter, timeSince } from "../../utils/time";
+import { getFormattedDate, timeSince } from "../../utils/time";
 import DialogHeader from "../dialog/dialog-header";
 import SheetProvider from "../sheet-provider";
 import { PressableButton } from "../ui/pressable";
@@ -63,15 +63,15 @@ export default function NoteHistory({ note, fwdRef }) {
   }, []);
 
   const getDate = (start, end) => {
-    let _start = timeConverter(start);
-    let _end = timeConverter(end + 60000);
-    if (_start === _end) return _start;
-    let final = _end.lastIndexOf(",");
-    let part = _end.slice(0, final + 1);
-    if (_start.includes(part)) {
-      return _start + " —" + _end.replace(part, "");
-    }
-    return _start + " — " + _end;
+    let _start_date = getFormattedDate(start, "date");
+    let _end_date = getFormattedDate(end + 60000, "date");
+
+    let _start_time = getFormattedDate(start, "time");
+    let _end_time = getFormattedDate(end + 60000, "time");
+
+    return `${_start_date} ${_start_time} - ${
+      _end_date === _start_date ? " " : _end_date + " "
+    }${_end_time}`;
   };
 
   const renderItem = useCallback(

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

@@ -18,13 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { ScrollView } from "react-native";
 import { FeatureBlock } from "./feature";
+import { ScrollView } from "react-native-actions-sheet";
 
 export const CompactFeatures = ({
   vertical,
   features = [],
-  maxHeight = 500,
+  maxHeight = 600,
   scrollRef
 }) => {
   let data = vertical
@@ -80,14 +80,11 @@ export const CompactFeatures = ({
   return (
     <ScrollView
       horizontal={!vertical}
-      nestedScrollEnabled
-      onMomentumScrollEnd={() => {
-        scrollRef?.current?.handleChildScrollEnd();
-      }}
       showsHorizontalScrollIndicator={false}
       style={{
         width: "100%",
-        maxHeight: maxHeight
+        maxHeight: maxHeight,
+        paddingHorizontal: 12
       }}
     >
       {data.map((item) => (

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

@@ -143,7 +143,7 @@ export const Expiring = () => {
                     await sleep(300);
                     eSendEvent(eOpenPremiumDialog, promo);
                   }}
-                  size={SIZE.xs + 1}
+                  size={SIZE.xs}
                   style={{
                     textDecorationLine: "underline",
                     color: colors.icon,

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

@@ -41,18 +41,19 @@ export const FeatureBlock = ({
         flexDirection: "row",
         alignItems: "center",
         paddingHorizontal: 12,
-        marginBottom: 10
+        marginBottom: 10,
+        backgroundColor: colors.nav,
+        borderRadius: 10,
+        paddingVertical: 12
       }}
     >
-      <Icon color={colors.accent} name="check" size={SIZE.lg} />
-
       <Paragraph
         style={{
           flexWrap: "wrap",
           marginLeft: 5,
           flexShrink: 1
         }}
-        size={SIZE.md}
+        size={SIZE.sm}
       >
         {content}
       </Paragraph>

apps/mobile/app/components/premium/premium-toast.js

@@ -17,10 +17,10 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
-import { editorState } from "../../screens/editor/tiptap/utils";
+import useKeyboard from "../../hooks/use-keyboard";
 import { DDS } from "../../services/device-detection";
 import {
   eSendEvent,
@@ -31,6 +31,7 @@ import { useThemeStore } from "../../stores/use-theme-store";
 import { getElevation } from "../../utils";
 import {
   eCloseActionSheet,
+  eCloseSheet,
   eOpenPremiumDialog,
   eShowGetPremium
 } from "../../utils/events";
@@ -39,12 +40,12 @@ import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { useCallback } from "react";
 
 export const PremiumToast = ({ context = "global", offset = 0 }) => {
   const colors = useThemeStore((state) => state.colors);
   const [msg, setMsg] = useState(null);
   const timer = useRef();
+  const keyboard = useKeyboard();
 
   const open = useCallback(
     (event) => {
@@ -72,7 +73,6 @@ export const PremiumToast = ({ context = "global", offset = 0 }) => {
   useEffect(() => {
     eSubscribeEvent(eShowGetPremium, open);
     return () => {
-      clearTimeout(timer.current);
       eUnSubscribeEvent(eShowGetPremium, open);
     };
   }, [open]);
@@ -80,9 +80,7 @@ export const PremiumToast = ({ context = "global", offset = 0 }) => {
   const onPress = async () => {
     open(null);
     eSendEvent(eCloseActionSheet);
-    if (editorState().isFocused) {
-      //tiny.call(EditorWebView, tiny.blur);
-    }
+    eSendEvent(eCloseSheet);
     await sleep(300);
     eSendEvent(eOpenPremiumDialog);
   };
@@ -102,9 +100,13 @@ export const PremiumToast = ({ context = "global", offset = 0 }) => {
           flexDirection: "row",
           alignSelf: "center",
           justifyContent: "space-between",
-          top: offset,
+          top: offset + keyboard.keyboardHeight,
           maxWidth: DDS.isLargeTablet() ? 400 : "98%"
         }}
+        onTouchEnd={() => {
+          setMsg(null);
+          clearTimeout(timer.current);
+        }}
       >
         <View
           style={{

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

@@ -232,8 +232,7 @@ export const PricingPlans = ({
             width={250}
             style={{
               paddingHorizontal: 12,
-              marginBottom: 15,
-              borderRadius: 100
+              marginBottom: 15
             }}
           />
         </>
@@ -398,8 +397,7 @@ export const PricingPlans = ({
                     style={{
                       paddingHorizontal: 12,
                       marginTop: 30,
-                      marginBottom: 10,
-                      borderRadius: 100
+                      marginBottom: 10
                     }}
                   />
                   {Platform.OS !== "ios" &&

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

@@ -21,7 +21,7 @@ import React from "react";
 import { View } from "react-native";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
-import { timeConverter } from "../../utils/time";
+import { getFormattedDate } from "../../utils/time";
 import Paragraph from "../ui/typography/paragraph";
 export const DateMeta = ({ item }) => {
   const colors = useThemeStore((state) => state.colors);
@@ -62,11 +62,11 @@ export const DateMeta = ({ item }) => {
         paddingVertical: 3
       }}
     >
-      <Paragraph size={SIZE.xs + 1} color={colors.icon}>
+      <Paragraph size={SIZE.xs} color={colors.icon}>
         {getNameFromKey(key)}
       </Paragraph>
-      <Paragraph size={SIZE.xs + 1} color={colors.icon}>
-        {timeConverter(item[key])}
+      <Paragraph size={SIZE.xs} color={colors.icon}>
+        {getFormattedDate(item[key], "date-time")}
       </Paragraph>
     </View>
   );

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

@@ -108,7 +108,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
                   backgroundColor: "transparent",
                   paddingHorizontal: 0
                 }}
-                fontSize={SIZE.xs + 1}
+                fontSize={SIZE.xs}
               />
             ) : null}
           </View>
@@ -191,13 +191,25 @@ Properties.present = (item, buttons = [], isSheet) => {
       break;
     case "notebook":
       props[0] = db.notebooks.notebook(item.id).data;
-      props.push(["edit-notebook", "pin", "add-shortcut", "trash"]);
+      props.push([
+        "edit-notebook",
+        "pin",
+        "add-shortcut",
+        "trash",
+        "default-notebook"
+      ]);
       break;
     case "topic":
       props[0] = db.notebooks
         .notebook(item.notebookId)
         .topics.topic(item.id)._topic;
-      props.push(["move-notes", "edit-topic", "add-shortcut", "trash"]);
+      props.push([
+        "move-notes",
+        "edit-topic",
+        "add-shortcut",
+        "trash",
+        "default-topic"
+      ]);
       break;
     case "tag":
       props[0] = db.tags.tag(item.id);

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

@@ -115,12 +115,12 @@ export const Items = ({ item, buttons, close }) => {
         onPress={item.func}
         key={item.id}
         testID={"icon-" + item.id}
+        activeOpacity={1}
         customStyle={{
-          alignItems: "center",
-          width: topBarItemWidth,
-          marginBottom: 10,
+          alignSelf: "flex-start",
           marginRight: isLast ? 0 : 10,
-          backgroundColor: "transparent"
+          paddingHorizontal: 0,
+          width: topBarItemWidth
         }}
       >
         <PressableButton
@@ -150,11 +150,7 @@ export const Items = ({ item, buttons, close }) => {
           />
         </PressableButton>
 
-        <Paragraph
-          size={SIZE.xxs + 1}
-          style={{ textAlign: "center" }}
-          textBreakStrategy="simple"
-        >
+        <Paragraph size={SIZE.xxs + 1} style={{ textAlign: "center" }}>
           {item.title}
         </Paragraph>
       </PressableButton>
@@ -187,7 +183,7 @@ export const Items = ({ item, buttons, close }) => {
         horizontal
         style={{
           paddingHorizontal: 12,
-          paddingTop: 12
+          paddingVertical: 12
         }}
       >
         {topBarItems.map(renderTopBarItem)}

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

@@ -23,13 +23,18 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import Notebook from "../../screens/notebook";
 import { TopicNotes } from "../../screens/notes/topic-notes";
-import { presentSheet, ToastEvent } from "../../services/event-manager";
+import {
+  eSendEvent,
+  presentSheet,
+  ToastEvent
+} from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import { useNotebookStore } from "../../stores/use-notebook-store";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
+import { eClearEditor } from "../../utils/events";
 
 export default function Notebooks({ note, close, full }) {
   const colors = useThemeStore((state) => state.colors);
@@ -112,6 +117,7 @@ export default function Notebooks({ note, close, full }) {
         size={SIZE.sm}
         onPress={() => {
           navigateNotebook(item.id);
+          eSendEvent(eClearEditor);
           close();
         }}
       >
@@ -134,6 +140,7 @@ export default function Notebooks({ note, close, full }) {
             key={topic.id}
             onPress={() => {
               navigateTopic(topic.id, item.id);
+              eSendEvent(eClearEditor);
               close();
             }}
             onLongPress={async () => {
@@ -155,7 +162,7 @@ export default function Notebooks({ note, close, full }) {
             title={topic.title}
             type="gray"
             height={30}
-            fontSize={SIZE.xs + 1}
+            fontSize={SIZE.xs}
             icon="bookmark-outline"
             style={{
               marginRight: 5,
@@ -184,7 +191,7 @@ export default function Notebooks({ note, close, full }) {
       {noteNotebooks.length > 1 && !full ? (
         <Button
           title={`See all linked notebooks`}
-          fontSize={SIZE.xs + 1}
+          fontSize={SIZE.xs}
           style={{
             alignSelf: "flex-end",
             marginRight: 12,

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

@@ -91,7 +91,7 @@ export const Synced = ({ item, close }) => {
             console.error(e);
           }
         }}
-        fontSize={SIZE.xs + 1}
+        fontSize={SIZE.xs}
         title="Learn more"
         height={30}
         type="grayAccent"

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

@@ -47,7 +47,7 @@ export const Tags = ({ item, close }) => {
     >
       <Button
         onPress={async () => {
-          ManageTagsSheet.present(item);
+          ManageTagsSheet.present([item]);
         }}
         buttonType={{
           text: colors.accent
@@ -57,7 +57,7 @@ export const Tags = ({ item, close }) => {
         icon="plus"
         iconPosition="right"
         height={30}
-        fontSize={SIZE.xs + 1}
+        fontSize={SIZE.xs}
         style={{
           marginRight: 5,
           borderRadius: 100,
@@ -107,7 +107,7 @@ const TagItem = ({ tag, close }) => {
       title={"#" + tag}
       type="grayBg"
       height={20}
-      fontSize={SIZE.xs + 1}
+      fontSize={SIZE.xs}
       style={style}
       textStyle={{
         textDecorationLine: "underline"

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

@@ -39,7 +39,7 @@ export const Topics = ({ item, close }) => {
       height={30}
       onPress={() => open(topic)}
       icon="bookmark-outline"
-      fontSize={SIZE.xs + 1}
+      fontSize={SIZE.xs}
       style={{
         marginRight: 5,
         paddingHorizontal: 8,

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

@@ -36,6 +36,7 @@ import MoveNoteSheet from "../sheets/add-to";
 import ExportNotesSheet from "../sheets/export-notes";
 import { IconButton } from "../ui/icon-button";
 import Heading from "../ui/typography/heading";
+import ManageTagsSheet from "../sheets/manage-tags";
 
 export const SelectionHeader = React.memo(() => {
   const colors = useThemeStore((state) => state.colors);
@@ -209,6 +210,20 @@ export const SelectionHeader = React.memo(() => {
         screen === "Notebook" ||
         screen === "Reminders" ? null : (
           <>
+            <IconButton
+              onPress={async () => {
+                await sleep(100);
+                ManageTagsSheet.present(selectedItemsList);
+              }}
+              customStyle={{
+                marginLeft: 10
+              }}
+              color={colors.pri}
+              tooltipText="Manage tags"
+              tooltipPosition={4}
+              name="pound"
+              size={SIZE.xl}
+            />
             <IconButton
               onPress={async () => {
                 //setSelectionMode(false);
@@ -224,6 +239,7 @@ export const SelectionHeader = React.memo(() => {
               name="plus"
               size={SIZE.xl}
             />
+
             <IconButton
               onPress={async () => {
                 ExportNotesSheet.present(selectedItemsList);

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

@@ -196,12 +196,11 @@ const SheetProvider = ({ context = "global" }) => {
             accentColor={data.iconColor || "accent"}
             accentText="light"
             type="accent"
-            height={45}
+            height={40}
             width={250}
             style={{
-              borderRadius: 100
+              marginBottom: 25
             }}
-            fontSize={SIZE.md}
           />
         ) : null}
 

apps/mobile/app/components/sheets/add-notebook/index.js

@@ -309,7 +309,6 @@ export class AddNotebookSheet extends React.Component {
               borderRadius: 100,
               paddingHorizontal: 24
             }}
-            fontSize={SIZE.md}
             onPress={this.addNewNotebook}
           />
         </View>

apps/mobile/app/components/sheets/add-to/index.js

@@ -42,6 +42,7 @@ import { SelectionProvider } from "./context";
 import { FilteredList } from "./filtered-list";
 import { ListItem } from "./list-item";
 import { useItemSelectionStore } from "./store";
+import { useRelationStore } from "../../../stores/use-relation-store";
 
 const MoveNoteSheet = ({ note, actionSheetRef }) => {
   const colors = useThemeStore((state) => state.colors);
@@ -263,7 +264,7 @@ const MoveNoteSheet = ({ note, actionSheetRef }) => {
       if (itemState[id] === "selected") {
         if (item.type === "notebook") {
           for (let noteId of noteIds) {
-            db.relations.add(item, { id: noteId, type: "note" });
+            await db.relations.add(item, { id: noteId, type: "note" });
           }
         } else {
           await db.notes.addToNotebook(
@@ -278,7 +279,7 @@ const MoveNoteSheet = ({ note, actionSheetRef }) => {
       } else if (itemState[id] === "deselected") {
         if (item.type === "notebook") {
           for (let noteId of noteIds) {
-            db.relations.unlink(item, { id: noteId, type: "note" });
+            await db.relations.unlink(item, { id: noteId, type: "note" });
           }
         } else {
           await db.notes.removeFromNotebook(
@@ -296,6 +297,7 @@ const MoveNoteSheet = ({ note, actionSheetRef }) => {
     setNotebooks();
     eSendEvent(eOnTopicSheetUpdate);
     SearchService.updateAndSearch();
+    useRelationStore.getState().update();
     actionSheetRef.current?.hide();
   };
 

apps/mobile/app/components/sheets/export-notes/index.js

@@ -42,6 +42,7 @@ import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { eSendEvent } from "../../../services/event-manager";
 import { eCloseSheet } from "../../../utils/events";
+import { requestInAppReview } from "../../../services/app-review";
 
 const ExportNotesSheet = ({ notes, update }) => {
   const colors = useThemeStore((state) => state.colors);
@@ -72,6 +73,7 @@ const ExportNotesSheet = ({ notes, update }) => {
     update({ disableClosing: false });
     setComplete(true);
     setExporting(false);
+    requestInAppReview();
   };
 
   const actions = [

apps/mobile/app/components/sheets/manage-tags/index.js

@@ -22,7 +22,7 @@ import { View } from "react-native";
 import { ScrollView } from "react-native-actions-sheet";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../../common/database";
-import { presentSheet, ToastEvent } from "../../../services/event-manager";
+import { ToastEvent, presentSheet } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { useTagStore } from "../../../stores/use-tag-store";
 import { useThemeStore } from "../../../stores/use-theme-store";
@@ -31,9 +31,10 @@ import Input from "../../ui/input";
 import { PressableButton } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import { IconButton } from "../../ui/icon-button";
 const ManageTagsSheet = (props) => {
   const colors = useThemeStore((state) => state.colors);
-  const [note, setNote] = useState(props.note);
+  const [notes, setNotes] = useState(props.notes || []);
   const allTags = useTagStore((state) => state.tags);
   const [tags, setTags] = useState([]);
   const [query, setQuery] = useState(null);
@@ -42,7 +43,7 @@ const ManageTagsSheet = (props) => {
 
   useEffect(() => {
     sortTags();
-  }, [allTags, note, query, sortTags]);
+  }, [allTags, notes, query, sortTags]);
 
   const sortTags = useCallback(() => {
     let _tags = [...allTags];
@@ -51,13 +52,14 @@ const ManageTagsSheet = (props) => {
     if (query) {
       _tags = _tags.filter((t) => t.title.startsWith(query));
     }
+    const tagsMerged = [...notes.map((note) => note.tags || []).flat()];
 
-    if (!note || !note.tags) {
+    if (!tagsMerged || !tagsMerged.length) {
       setTags(_tags);
       return;
     }
     let noteTags = [];
-    for (let tag of note.tags) {
+    for (let tag of tagsMerged) {
       let index = _tags.findIndex((t) => t.title === tag);
       if (index !== -1) {
         noteTags.push(_tags[index]);
@@ -67,7 +69,7 @@ const ManageTagsSheet = (props) => {
     noteTags = noteTags.sort((a, b) => a.title.localeCompare(b.title));
     let combinedTags = [...noteTags, ..._tags];
     setTags(combinedTags);
-  }, [allTags, note, query]);
+  }, [allTags, notes, query]);
 
   useEffect(() => {
     useTagStore.getState().setTags();
@@ -85,15 +87,23 @@ const ManageTagsSheet = (props) => {
     }
 
     let tag = _query;
-    setNote({ ...note, tags: note.tags ? [...note.tags, tag] : [tag] });
+    setNotes(
+      notes.map((note) => ({
+        ...note,
+        tags: note.tags ? [...note.tags, tag] : [tag]
+      }))
+    );
+
     setQuery(null);
     inputRef.current?.setNativeProps({
       text: ""
     });
     try {
-      await db.notes.note(note.id).tag(tag);
+      for (let note of notes) {
+        await db.notes.note(note.id).tag(tag);
+      }
       useTagStore.getState().setTags();
-      setNote(db.notes.note(note.id).data);
+      setNotes(notes.map((note) => db.notes.note(note.id).data));
     } catch (e) {
       ToastEvent.show({
         heading: "Cannot add tag",
@@ -180,84 +190,91 @@ const ManageTagsSheet = (props) => {
         ) : null}
 
         {tags.map((item) => (
-          <TagItem key={item.title} tag={item} note={note} setNote={setNote} />
+          <TagItem
+            key={item.title}
+            tag={item}
+            notes={notes}
+            setNotes={setNotes}
+          />
         ))}
       </ScrollView>
     </View>
   );
 };
 
-ManageTagsSheet.present = (note) => {
+ManageTagsSheet.present = (notes) => {
   presentSheet({
     component: (ref) => {
-      return <ManageTagsSheet actionSheetRef={ref} note={note} />;
+      return <ManageTagsSheet actionSheetRef={ref} notes={notes} />;
     }
   });
 };
 
 export default ManageTagsSheet;
 
-const TagItem = ({ tag, note, setNote }) => {
+const TagItem = ({ tag, notes, setNotes }) => {
   const colors = useThemeStore((state) => state.colors);
-
+  const someNotesTagged = notes.some(
+    (note) => note.tags?.indexOf(tag.title) !== -1
+  );
+  const allNotesTagged = notes.every(
+    (note) => note.tags?.indexOf(tag.title) !== -1
+  );
   const onPress = async () => {
-    let prevNote = { ...note };
-    try {
-      if (prevNote.tags.indexOf(tag.title) !== -1) {
-        await db.notes
-          .note(note.id)
-          .untag(prevNote.tags[prevNote.tags.indexOf(tag.title)]);
-      } else {
-        await db.notes.note(note.id).tag(tag.title);
+    for (let note of notes) {
+      try {
+        if (someNotesTagged) {
+          await db.notes
+            .note(note.id)
+            .untag(note.tags[note.tags.indexOf(tag.title)]);
+        } else {
+          await db.notes.note(note.id).tag(tag.title);
+        }
+      } catch (e) {
+        console.error(e);
       }
-      useTagStore.getState().setTags();
-      setNote(db.notes.note(note.id).data);
-    } catch (e) {
-      console.error(e);
     }
+    useTagStore.getState().setTags();
+    setNotes(notes.map((note) => db.notes.note(note.id).data));
     setTimeout(() => {
       Navigation.queueRoutesForUpdate();
     }, 1);
   };
-
   return (
     <PressableButton
       customStyle={{
         flexDirection: "row",
         marginVertical: 5,
-        justifyContent: "space-between",
-        padding: 12
+        justifyContent: "flex-start",
+        height: 40
       }}
       onPress={onPress}
-      type={
-        note && note.tags.findIndex((t) => t === tag.title) !== -1
-          ? "shade"
-          : "grayBg"
-      }
+      type="gray"
     >
-      <Heading
-        size={SIZE.sm}
-        color={
-          note && note?.tags.findIndex((t) => t === tag.title) !== -1
-            ? colors.accent
-            : colors.pri
+      <IconButton
+        size={22}
+        customStyle={{
+          marginRight: 5,
+          width: 23,
+          height: 23
+        }}
+        color={someNotesTagged || allNotesTagged ? colors.accent : colors.icon}
+        testID={
+          allNotesTagged
+            ? "check-circle-outline"
+            : someNotesTagged
+            ? "minus-circle-outline"
+            : "checkbox-blank-circle-outline"
         }
-      >
-        {"#" + tag.title}
-      </Heading>
-      <Icon
         name={
-          note && note?.tags.findIndex((t) => t === tag.title) !== -1
-            ? "minus"
-            : "plus"
+          allNotesTagged
+            ? "check-circle-outline"
+            : someNotesTagged
+            ? "minus-circle-outline"
+            : "checkbox-blank-circle-outline"
         }
-        color={
-          note && note?.tags.findIndex((t) => t === tag.title) !== -1
-            ? colors.accent
-            : colors.accent
-        }
-        size={SIZE.lg}
       />
+      <Paragraph size={SIZE.sm}>{"#" + tag.alias}</Paragraph>
     </PressableButton>
   );
 };

apps/mobile/app/components/sheets/move-notes/movenote.tsx

@@ -158,11 +158,7 @@ export const MoveNotes = ({
               {item.title}
             </Paragraph>
             {item.type == "note" && item.headline ? (
-              <Paragraph
-                numberOfLines={1}
-                color={colors.icon}
-                size={SIZE.xs + 1}
-              >
+              <Paragraph numberOfLines={1} color={colors.icon} size={SIZE.xs}>
                 {item.headline}
               </Paragraph>
             ) : null}

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

@@ -35,6 +35,7 @@ import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import { requestInAppReview } from "../../../services/app-review";
 
 const PublishNoteSheet = ({ note: item, update }) => {
   const colors = useThemeStore((state) => state.colors);
@@ -66,6 +67,7 @@ const PublishNoteSheet = ({ note: item, update }) => {
         Navigation.queueRoutesForUpdate();
         setPublishLoading(false);
       }
+      requestInAppReview();
     } catch (e) {
       ToastEvent.show({
         heading: "Could not publish note",

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

@@ -43,8 +43,7 @@ import Seperator from "../../ui/seperator";
 import SheetWrapper from "../../ui/sheet";
 import { QRCode } from "../../ui/svg/lazy";
 import Paragraph from "../../ui/typography/paragraph";
-
-let RNFetchBlob;
+import RNFetchBlob from "react-native-blob-util";
 
 class RecoveryKeySheet extends React.Component {
   constructor(props) {
@@ -115,7 +114,6 @@ class RecoveryKeySheet extends React.Component {
     this.svg.current?.toDataURL(async (data) => {
       try {
         let path;
-        RNFetchBlob = (await import("rn-fetch-blob")).default;
         let fileName = "nn_" + this.user.email + "_recovery_key_qrcode";
         fileName = sanitizeFilename(fileName, { replacement: "_" });
         fileName = fileName + ".png";
@@ -151,7 +149,6 @@ class RecoveryKeySheet extends React.Component {
       fileName = sanitizeFilename(fileName, { replacement: "_" });
       fileName = fileName + ".txt";
 
-      RNFetchBlob = (await import("rn-fetch-blob")).default;
       if (Platform.OS === "android") {
         let file = await ScopedStorage.createDocument(
           fileName,

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

@@ -119,7 +119,7 @@ export default function ReminderNotify({
           marginTop: 10
         }}
       >
-        <Paragraph size={SIZE.xs + 1}>Remind me in:</Paragraph>
+        <Paragraph size={SIZE.xs}>Remind me in:</Paragraph>
         {QuickActions.map((item) => {
           return (
             <Button
@@ -127,7 +127,7 @@ export default function ReminderNotify({
               key={item.title}
               title={item.title}
               height={30}
-              fontSize={SIZE.xs + 1}
+              fontSize={SIZE.xs}
               style={{ marginLeft: 10, borderRadius: 100 }}
               onPress={() => onSnooze(item.time)}
             />
@@ -150,7 +150,7 @@ export default function ReminderNotify({
           <Paragraph
             style={{
               color: colors.icon,
-              fontSize: SIZE.xs + 1,
+              fontSize: SIZE.xs,
               marginBottom: 10
             }}
           >

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

@@ -200,7 +200,8 @@ export default function ReminderSheet({
 
       if (!_reminder) {
         ToastEvent.show({
-          heading: "Failed to add a new reminder"
+          heading: "Failed to add a new reminder",
+          context: "local"
         });
       }
       if (reference) {
@@ -214,7 +215,7 @@ export default function ReminderSheet({
       useRelationStore.getState().update();
       close?.();
     } catch (e) {
-      ToastEvent.error(e as Error);
+      ToastEvent.error(e as Error, undefined, "local");
     }
   }
 
@@ -242,7 +243,6 @@ export default function ReminderSheet({
             borderRadius: 100,
             paddingHorizontal: 24
           }}
-          fontSize={SIZE.md}
           onPress={saveReminder}
         />
       </View>
@@ -309,6 +309,16 @@ export default function ReminderSheet({
                     mode as keyof typeof ReminderModes
                   ] as Reminder["mode"]
                 );
+                if (mode === "Repeat") {
+                  setSelectedDays((days) => {
+                    if (days.length > 0) return days;
+                    if (days.indexOf(date.getDay()) > -1) {
+                      return days;
+                    }
+                    days.push(date.getDay());
+                    return [...days];
+                  });
+                }
               }}
             />
           ))}
@@ -539,7 +549,7 @@ export default function ReminderSheet({
             }}
           >
             <>
-              <Paragraph size={SIZE.xs + 1} color={colors.icon}>
+              <Paragraph size={SIZE.xs} color={colors.icon}>
                 {recurringMode === RecurringModes.Daily
                   ? "Repeats daily " + `at ${dayjs(date).format("hh:mm A")}.`
                   : selectedDays.length === 7 &&

apps/mobile/app/components/sheets/restore-data/index.js

@@ -21,21 +21,22 @@ import { EVENTS } from "@notesnook/core/common";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { ActivityIndicator, Platform, View } from "react-native";
 import { FlatList } from "react-native-actions-sheet";
+import RNFetchBlob from "react-native-blob-util";
 import DocumentPicker from "react-native-document-picker";
 import * as ScopedStorage from "react-native-scoped-storage";
 import { db } from "../../../common/database";
 import storage from "../../../common/database/storage";
 import {
+  ToastEvent,
   eSubscribeEvent,
-  eUnSubscribeEvent,
-  ToastEvent
+  eUnSubscribeEvent
 } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
 import { initialize } from "../../../stores";
 import { useThemeStore } from "../../../stores/use-theme-store";
 import { eCloseRestoreDialog, eOpenRestoreDialog } from "../../../utils/events";
 import { SIZE } from "../../../utils/size";
-import { timeConverter } from "../../../utils/time";
+import { getFormattedDate } from "../../../utils/time";
 import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
 import { presentDialog } from "../../dialog/functions";
@@ -44,7 +45,7 @@ import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
 import SheetWrapper from "../../ui/sheet";
 import Paragraph from "../../ui/typography/paragraph";
-let RNFetchBlob;
+
 const RestoreDataSheet = () => {
   const [visible, setVisible] = useState(false);
   const [restoring, setRestoring] = useState(false);
@@ -213,7 +214,6 @@ const RestoreDataComponent = ({ close, setRestoring, restoring }) => {
           return;
         }
       } else {
-        RNFetchBlob = (await import("rn-fetch-blob")).default;
         let path = await storage.checkAndCreateDir("/backups/");
         files = await RNFetchBlob.fs.lstat(path);
       }
@@ -251,7 +251,7 @@ const RestoreDataComponent = ({ close, setRestoring, restoring }) => {
         }}
       >
         <Paragraph size={SIZE.sm} style={{ width: "100%", maxWidth: "100%" }}>
-          {timeConverter(item?.lastModified * 1)}
+          {getFormattedDate(item?.lastModified * 1)}
         </Paragraph>
         <Paragraph size={SIZE.xs}>
           {(item.filename || item.name).replace(".nnbackup", "")}

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

@@ -25,7 +25,6 @@ import Navigation from "../../../services/navigation";
 import { useThemeStore } from "../../../stores/use-theme-store";
 import { GROUP, SORT } from "../../../utils/constants";
 import { refreshNotesPage } from "../../../utils/events";
-import layoutmanager from "../../../utils/layout-manager";
 import { SIZE } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
@@ -39,7 +38,6 @@ const Sort = ({ type, screen }) => {
   const updateGroupOptions = async (_groupOptions) => {
     await db.settings.setGroupOptions(type, _groupOptions);
 
-    layoutmanager.withSpringAnimation(600);
     setGroupOptions(_groupOptions);
     setTimeout(() => {
       if (screen !== "TopicSheet") Navigation.queueRoutesForUpdate(screen);

apps/mobile/app/components/sheets/topic-sheet/index.tsx

@@ -65,7 +65,6 @@ import { deleteItems } from "../../../utils/functions";
 import { presentDialog } from "../../dialog/functions";
 import { Properties } from "../../properties";
 import Sort from "../sort";
-import Heading from "../../ui/typography/heading";
 
 type ConfigItem = { id: string; type: string };
 class TopicSheetConfig {

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

@@ -302,6 +302,7 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
       translateX.value = value;
     })
     .onEnd((event) => {
+      if (locked.value || forcedLock.value) return;
       if (currentTab.value === 2 && Platform.OS === "android") return;
       const velocityX =
         event.velocityX < 0 ? event.velocityX * -1 : event.velocityX;

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

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Keyboard, TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
@@ -34,24 +34,25 @@ import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-let toastMessages = [];
 export const Toast = ({ context = "global" }) => {
   const colors = useThemeStore((state) => state.colors);
-  const [keyboard, setKeyboard] = useState(false);
   const [data, setData] = useState({});
   const insets = useGlobalSafeAreaInsets();
   const hideTimeout = useRef();
   const [visible, setVisible] = useState(false);
+  const toastMessages = useRef([]);
 
-  const showToastFunc = useCallback(
+  const show = useCallback(
     async (data) => {
       if (!data) return;
       if (data.context !== context) return;
-      if (toastMessages.findIndex((m) => m.message === data.message) >= 0) {
+      if (
+        toastMessages.current.findIndex((m) => m.message === data.message) >= 0
+      ) {
         return;
       }
-      toastMessages.push(data);
-      if (toastMessages?.length > 1) return;
+      toastMessages.current.push(data);
+      if (toastMessages.current?.length > 1) return;
       setData(data);
 
       setVisible(true);
@@ -59,16 +60,16 @@ export const Toast = ({ context = "global" }) => {
         clearTimeout(hideTimeout.current);
       }
       hideTimeout.current = setTimeout(() => {
-        hideToastFunc();
+        hide();
       }, data.duration);
     },
-    [context, hideToastFunc]
+    [context, hide]
   );
 
-  const showNext = useCallback(
+  const next = useCallback(
     (data) => {
       if (!data) {
-        hideToastFunc();
+        hide();
         return;
       }
       setData(data);
@@ -76,27 +77,28 @@ export const Toast = ({ context = "global" }) => {
         clearTimeout(hideTimeout.current);
       }
       hideTimeout.current = setTimeout(() => {
-        hideToastFunc();
+        hide();
       }, data?.duration);
     },
-    [hideToastFunc]
+    [hide]
   );
 
-  const hideToastFunc = useCallback(() => {
+  const hide = useCallback(() => {
     if (hideTimeout.current) {
       clearTimeout(hideTimeout.current);
     }
-    let msg = toastMessages.length > 1 ? toastMessages.shift() : null;
+    let msg =
+      toastMessages.current.length > 1 ? toastMessages.current.shift() : null;
 
     if (msg) {
       setVisible(false);
-      showNext(msg);
+      next(msg);
       setTimeout(() => {
         setVisible(true);
       }, 300);
     } else {
       setVisible(false);
-      toastMessages.shift();
+      toastMessages.current.shift();
       setTimeout(() => {
         setData({});
         if (hideTimeout.current) {
@@ -104,44 +106,22 @@ export const Toast = ({ context = "global" }) => {
         }
       }, 100);
     }
-  }, [showNext]);
-
-  const _onKeyboardShow = () => {
-    setKeyboard(true);
-  };
-
-  const _onKeyboardHide = () => {
-    setKeyboard(false);
-  };
+  }, [next]);
 
   useEffect(() => {
-    toastMessages = [];
-    let sub1 = Keyboard.addListener("keyboardDidShow", _onKeyboardShow);
-    let sub2 = Keyboard.addListener("keyboardDidHide", _onKeyboardHide);
-    eSubscribeEvent(eShowToast, showToastFunc);
-    eSubscribeEvent(eHideToast, hideToastFunc);
+    eSubscribeEvent(eShowToast, show);
+    eSubscribeEvent(eHideToast, hide);
     return () => {
-      if (hideTimeout.current) {
-        clearTimeout(hideTimeout.current);
-      }
-
-      toastMessages = [];
-      sub1?.remove();
-      sub2?.remove();
-      eUnSubscribeEvent(eShowToast, showToastFunc);
-      eUnSubscribeEvent(eHideToast, hideToastFunc);
+      toastMessages.current = [];
+      eUnSubscribeEvent(eShowToast, show);
+      eUnSubscribeEvent(eHideToast, hide);
     };
-  }, [hideToastFunc, keyboard, showToastFunc]);
+  }, [hide, show]);
 
   return (
     visible && (
       <TouchableOpacity
-        onPress={() => {
-          if (hideTimeout.current) {
-            clearTimeout(hideTimeout.current);
-          }
-          hideToastFunc();
-        }}
+        onPress={hide}
         activeOpacity={1}
         style={{
           width: DDS.isTab ? 400 : "100%",
@@ -209,7 +189,7 @@ export const Toast = ({ context = "global" }) => {
                   color={colors.pri}
                   size={SIZE.md}
                   onPress={() => {
-                    hideToastFunc();
+                    hide();
                   }}
                 >
                   {data.heading}
@@ -224,7 +204,7 @@ export const Toast = ({ context = "global" }) => {
                     paddingRight: 10
                   }}
                   onPress={() => {
-                    hideToastFunc();
+                    hide();
                   }}
                 >
                   {data.message}

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

@@ -40,6 +40,8 @@ import { getElevation } from "../../../utils";
 import { SIZE } from "../../../utils/size";
 import { IconButton } from "../icon-button";
 import Paragraph from "../typography/paragraph";
+import phone from "phone";
+
 interface InputProps extends TextInputProps {
   fwdRef?: RefObject<TextInput>;
   validationType?:
@@ -110,14 +112,14 @@ const Input = ({
   const [secureEntry, setSecureEntry] = useState(true);
   const [showError, setShowError] = useState(false);
   const [errorList, setErrorList] = useState({
-    SHORT_PASS: true
+    SHORT_PASS: false
   });
   type ErrorKey = keyof typeof errorList;
   const color = error
     ? colors.red
     : focus
     ? customColor || colors.accent
-    : colors.nav;
+    : colors.border;
 
   const validate = async (value: string) => {
     if (!validationType) return;
@@ -149,7 +151,6 @@ const Input = ({
         isError = customValidator && value === customValidator();
         break;
       case "phonenumber": {
-        const { default: phone } = await import("phone");
         const result = phone(value, {
           strictDetection: true,
           validateMobilePrefix: true
@@ -186,6 +187,12 @@ const Input = ({
     onChangeText && onChangeText(value);
     setShowError(false);
     validate(value);
+    if (value === "") {
+      setError(false);
+      setErrorList({
+        SHORT_PASS: false
+      });
+    }
   };
 
   const onBlur = () => {

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

@@ -65,7 +65,7 @@ export const Notice = ({
           flexShrink: 1
         }}
         selectable={selectable}
-        size={isSmall ? SIZE.xs + 1 : SIZE.sm}
+        size={isSmall ? SIZE.xs : SIZE.sm}
       >
         {text}
       </Paragraph>

apps/mobile/app/components/ui/reminder-time/index.tsx

@@ -16,17 +16,15 @@ 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 { isReminderActive } from "@notesnook/core/collections/reminders";
 import React from "react";
-import {
-  formatReminderTime,
-  isReminderActive
-} from "@notesnook/core/collections/reminders";
 import { ViewStyle } from "react-native";
 
 import { Reminder } from "../../../services/notifications";
-import { Button, ButtonProps } from "../button";
 import { useThemeStore } from "../../../stores/use-theme-store";
 import { SIZE } from "../../../utils/size";
+import { getFormattedReminderTime } from "../../../utils/time";
+import { Button, ButtonProps } from "../button";
 
 export const ReminderTime = ({
   checkIsActive = true,
@@ -42,7 +40,7 @@ export const ReminderTime = ({
 } & ButtonProps) => {
   const colors = useThemeStore((state) => state.colors);
   const reminder = props.reminder;
-  const time = !reminder ? undefined : formatReminderTime(reminder);
+  const time = !reminder ? undefined : getFormattedReminderTime(reminder);
   const isTodayOrTomorrow =
     (time?.includes("Today") || time?.includes("Tomorrow")) &&
     !time?.includes("Last");

apps/mobile/app/components/ui/sheet/index.js

@@ -105,6 +105,9 @@ const SheetWrapper = ({
       defaultOverlayOpacity={overlayOpacity}
       overlayColor={pitchBlack ? "#585858" : "#2b2b2b"}
       keyboardShouldPersistTaps="always"
+      openAnimationConfig={{
+        friction: 9
+      }}
       ExtraOverlayComponent={
         <>
           {overlay}

apps/mobile/app/components/ui/typography/heading.tsx

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useMemo } from "react";
-import { Platform, Text, TextProps } from "react-native";
+import { Platform, Text, TextProps, ViewStyle } from "react-native";
 import Animated, {
   ComplexAnimationBuilder,
   Layout
@@ -30,15 +30,26 @@ interface HeadingProps extends TextProps {
   size?: number;
   layout?: ComplexAnimationBuilder;
   animated?: boolean;
+  extraBold?: boolean;
 }
 
 const AnimatedText = Animated.createAnimatedComponent(Text);
 
+const extraBoldStyle = {
+  fontFamily: Platform.OS === "android" ? "OpenSans-Bold" : undefined,
+  fontWeight: Platform.OS === "ios" ? "800" : undefined
+};
+const boldStyle = {
+  fontFamily: Platform.OS === "android" ? "OpenSans-SemiBold" : undefined,
+  fontWeight: Platform.OS === "ios" ? "600" : undefined
+};
+
 const Heading = ({
   color,
   size = SIZE.xl,
   style,
   animated,
+  extraBold,
   ...restProps
 }: HeadingProps) => {
   const colors = useThemeStore((state) => state.colors);
@@ -53,11 +64,9 @@ const Heading = ({
       style={[
         {
           fontSize: size || SIZE.xl,
-          color: color || colors.heading,
-          fontFamily:
-            Platform.OS === "android" ? "OpenSans-SemiBold" : undefined,
-          fontWeight: Platform.OS === "ios" ? "600" : undefined
+          color: color || colors.heading
         },
+        extraBold ? (extraBoldStyle as ViewStyle) : (boldStyle as ViewStyle),
         style
       ]}
     ></Component>

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

@@ -71,6 +71,9 @@ export const useActions = ({ close = () => null, item }) => {
   const user = useUserStore((state) => state.user);
   const [notifPinned, setNotifPinned] = useState(null);
   const alias = item.alias || item.title;
+  const [defaultNotebook, setDefaultNotebook] = useState(
+    db.settings.getDefaultNotebook()
+  );
 
   const isPublished =
     item.type === "note" && db.monographs.isPublished(item.id);
@@ -381,11 +384,12 @@ export const useActions = ({ close = () => null, item }) => {
       positivePress: async (value) => {
         if (!value || value === "" || value.trimStart().length == 0) return;
         await db.tags.rename(item.id, db.tags.sanitize(value));
-        setImmediate(() => {
+        setTimeout(() => {
           useTagStore.getState().setTags();
           useMenuStore.getState().setMenuPins();
           Navigation.queueRoutesForUpdate();
-        });
+          useRelationStore.getState().update();
+        }, 1);
       },
       input: true,
       defaultValue: alias,
@@ -520,7 +524,7 @@ export const useActions = ({ close = () => null, item }) => {
   }
 
   async function showAttachments() {
-    AttachmentDialog.present();
+    AttachmentDialog.present(item);
   }
 
   async function exportNote() {
@@ -623,7 +627,7 @@ export const useActions = ({ close = () => null, item }) => {
     },
     {
       id: "favorite",
-      title: !item.favorite ? "Favorite" : "Unfavorite",
+      title: item.favorite ? "Unfavorite" : "Favorite",
       icon: item.favorite ? "star-off" : "star-outline",
       func: addToFavorites,
       close: false,
@@ -701,7 +705,7 @@ export const useActions = ({ close = () => null, item }) => {
     },
     {
       id: "read-only",
-      title: "Read only",
+      title: "Readonly",
       icon: "pencil-lock",
       func: toggleReadyOnlyMode,
       on: item.readonly
@@ -773,6 +777,53 @@ export const useActions = ({ close = () => null, item }) => {
       func: openHistory
     },
 
+    {
+      id: "default-notebook",
+      title:
+        defaultNotebook?.id === item.id
+          ? "Remove as default"
+          : "Set as default",
+      hidden: item.type !== "notebook",
+      icon: "notebook",
+      func: async () => {
+        if (defaultNotebook?.id === item.id) {
+          await db.settings.setDefaultNotebook();
+          setDefaultNotebook();
+        } else {
+          const notebook = {
+            id: item.id
+          };
+          await db.settings.setDefaultNotebook(notebook);
+          setDefaultNotebook(notebook);
+        }
+        close();
+      },
+      on: defaultNotebook?.topic ? false : defaultNotebook?.id === item.id
+    },
+    {
+      id: "default-topic",
+      title:
+        defaultNotebook?.id === item.id
+          ? "Remove as default"
+          : "Set as default",
+      hidden: item.type !== "topic",
+      icon: "bookmark",
+      func: async () => {
+        if (defaultNotebook?.topic === item.id) {
+          await db.settings.setDefaultNotebook();
+          setDefaultNotebook();
+        } else {
+          const notebook = {
+            id: item.notebookId,
+            topic: item.id
+          };
+          await db.settings.setDefaultNotebook(notebook);
+          setDefaultNotebook(notebook);
+        }
+        close();
+      },
+      on: defaultNotebook?.topic === item.id
+    },
     {
       id: "disable-reminder",
       title: !item.disabled ? "Turn off reminder" : "Turn on reminder",

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

@@ -17,22 +17,37 @@ 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 NetInfo from "@react-native-community/netinfo";
 import { EV, EVENTS, SYNC_CHECK_IDS } from "@notesnook/core/common";
-import { useEffect, useRef } from "react";
+import notifee from "@notifee/react-native";
+import NetInfo from "@react-native-community/netinfo";
+import { useCallback, useEffect, useRef } from "react";
 import {
-  Appearance,
   AppState,
+  Appearance,
+  Keyboard,
   Linking,
   NativeEventEmitter,
   NativeModules,
-  Platform,
-  Keyboard
+  Platform
 } from "react-native";
 import * as RNIap from "react-native-iap";
 import { enabled } from "react-native-privacy-snapshot";
+import { DatabaseLogger, db } from "../common/database";
+import { MMKV } from "../common/database/mmkv";
 import { Walkthrough } from "../components/walkthroughs";
-import { editorController, editorState } from "../screens/editor/tiptap/utils";
+import {
+  clearAppState,
+  editorController,
+  editorState
+} from "../screens/editor/tiptap/utils";
+import { useDragState } from "../screens/settings/editor/state";
+import BackupService from "../services/backup";
+import {
+  ToastEvent,
+  eSendEvent,
+  eSubscribeEvent,
+  eUnSubscribeEvent
+} from "../services/event-manager";
 import {
   clearMessage,
   setEmailVerifyMessage,
@@ -41,36 +56,23 @@ import {
 } from "../services/message";
 import PremiumService from "../services/premium";
 import SettingsService from "../services/settings";
+import Sync from "../services/sync";
+import { initAfterSync } from "../stores";
+import { useAttachmentStore } from "../stores/use-attachment-store";
+import { useEditorStore } from "../stores/use-editor-store";
+import { useMessageStore } from "../stores/use-message-store";
+import { useNoteStore } from "../stores/use-notes-store";
+import { useSettingStore } from "../stores/use-setting-store";
+import { SyncStatus, useUserStore } from "../stores/use-user-store";
 import { updateStatusBarColor } from "../utils/color-scheme";
-import { DatabaseLogger, db } from "../common/database";
-import { MMKV } from "../common/database/mmkv";
 import {
   eClearEditor,
   eCloseSheet,
   eOnLoadNote,
   refreshNotesPage
 } from "../utils/events";
-import Sync from "../services/sync";
-import { initAfterSync } from "../stores";
-import { SyncStatus, useUserStore } from "../stores/use-user-store";
-import { useMessageStore } from "../stores/use-message-store";
-import { useSettingStore } from "../stores/use-setting-store";
-import { useAttachmentStore } from "../stores/use-attachment-store";
-import { useNoteStore } from "../stores/use-notes-store";
-import {
-  eSendEvent,
-  eSubscribeEvent,
-  eUnSubscribeEvent,
-  ToastEvent
-} from "../services/event-manager";
-import { useEditorStore } from "../stores/use-editor-store";
-import { useDragState } from "../screens/settings/editor/state";
-import { useCallback } from "react";
-import { clearAppState } from "../screens/editor/tiptap/utils";
 import { tabBarRef } from "../utils/global-refs";
-import BackupService from "../services/backup";
 import { sleep } from "../utils/time";
-import notifee from "@notifee/react-native";
 
 const SodiumEventEmitter = new NativeEventEmitter(NativeModules.Sodium);
 export const useAppEvents = () => {
@@ -489,7 +491,8 @@ export const useAppEvents = () => {
         if (
           SettingsService.get().appLockMode === "background" &&
           !useSettingStore.getState().requestBiometrics &&
-          !useUserStore.getState().verifyUser
+          !useUserStore.getState().verifyUser &&
+          !useUserStore.getState().shouldBlockVerifyUser
         ) {
           useUserStore.getState().setVerifyUser(true);
           if (Platform.OS === "ios") {
@@ -561,7 +564,6 @@ export const useAppEvents = () => {
           await db.initCollections();
           await db.notes.init();
         }
-        useNoteStore.getState().setNotes();
         eSendEvent(refreshNotesPage);
         MMKV.removeItem("notesAddedFromIntent");
         initAfterSync();
@@ -571,8 +573,8 @@ export const useAppEvents = () => {
       if (notesAddedFromIntent || shareExtensionOpened) {
         let id = useEditorStore.getState().currentEditingNote;
         let note = id && db.notes.note(id).data;
-        eSendEvent("loadingNote", note);
         eSendEvent("webview_reset");
+        setTimeout(() => eSendEvent("loadingNote", note), 1);
         MMKV.removeItem("shareExtensionOpened");
       }
     } catch (e) {

apps/mobile/app/hooks/use-attachment-progress.ts

@@ -20,32 +20,47 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useEffect, useState } from "react";
 import { useAttachmentStore } from "../stores/use-attachment-store";
 
-export const useAttachmentProgress = (attachment, encryption) => {
+type AttachmentProgress = {
+  type: string;
+  value?: number;
+  percent?: string;
+};
+
+export const useAttachmentProgress = (
+  attachment: any,
+  encryption?: boolean
+) => {
   const progress = useAttachmentStore((state) => state.progress);
-  const [currentProgress, setCurrentProgress] = useState(
+  const [currentProgress, setCurrentProgress] = useState<
+    AttachmentProgress | undefined
+  >(
     encryption
       ? {
           type: "encrypt"
         }
-      : null
+      : undefined
   );
 
   useEffect(() => {
-    let prog = progress[attachment.metadata.hash];
-    if (prog) {
-      let type = prog.type;
-      let loaded = prog.type === "download" ? prog.recieved : prog.sent;
-      prog = loaded / prog.total;
-      prog = (prog * 100).toFixed(0);
+    const attachmentProgress = progress?.[attachment?.metadata?.hash];
+    if (attachmentProgress) {
+      const type = attachmentProgress.type;
+      const loaded =
+        attachmentProgress.type === "download"
+          ? attachmentProgress.recieved
+          : attachmentProgress.sent;
+      const value = loaded / attachmentProgress.total;
       setCurrentProgress({
-        value: prog,
-        percent: prog + "%",
+        value: value * 100,
+        percent: (value * 100).toFixed(0) + "%",
         type: type
       });
     } else {
-      setCurrentProgress(null);
+      setTimeout(() => {
+        setCurrentProgress(undefined);
+      }, 300);
     }
-  }, [attachment.metadata.hash, progress]);
+  }, [attachment, progress]);
 
   return [currentProgress, setCurrentProgress];
 };

apps/mobile/app/hooks/use-vault-status.js

@@ -1,61 +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, { useCallback, useEffect } from "react";
-import BiometicService from "../services/biometrics";
-import { eSubscribeEvent, eUnSubscribeEvent } from "../services/event-manager";
-import { db } from "../common/database";
-
-const VaultStatusCache = {
-  exists: false,
-  biometryEnrolled: false,
-  isBiometryAvailable: false
-};
-
-export const useVaultStatus = () => {
-  const [vaultStatus, setVaultStatus] = React.useState(VaultStatusCache);
-
-  const checkVaultStatus = useCallback(() => {
-    db.vault.exists().then(async (exists) => {
-      let available = await BiometicService.isBiometryAvailable();
-      let fingerprint = await BiometicService.hasInternetCredentials();
-      if (
-        VaultStatusCache.exists === exists &&
-        VaultStatusCache.biometryEnrolled === fingerprint &&
-        VaultStatusCache.isBiometryAvailable === available
-      )
-        return;
-      setVaultStatus({
-        exists: exists,
-        biometryEnrolled: fingerprint,
-        isBiometryAvailable: available ? true : false
-      });
-    });
-  }, []);
-
-  useEffect(() => {
-    checkVaultStatus();
-    eSubscribeEvent("vaultUpdated", () => checkVaultStatus());
-    return () => {
-      eUnSubscribeEvent("vaultUpdated", () => checkVaultStatus());
-    };
-  }, [checkVaultStatus]);
-
-  return vaultStatus;
-};

apps/mobile/app/navigation/navigation-stack.js

@@ -50,6 +50,7 @@ import { useSettingStore } from "../stores/use-setting-store";
 import { useThemeStore } from "../stores/use-theme-store";
 import { history } from "../utils";
 import { rootNavigatorRef } from "../utils/global-refs";
+import Auth from "../components/auth";
 const NativeStack = createNativeStackNavigator();
 const IntroStack = createNativeStackNavigator();
 
@@ -64,6 +65,7 @@ const IntroStack = createNativeStackNavigator();
 
 const IntroStackNavigator = () => {
   const colors = useThemeStore((state) => state.colors);
+  const height = useSettingStore((state) => state.dimensions.height);
   return (
     <IntroStack.Navigator
       screenOptions={{
@@ -71,12 +73,14 @@ const IntroStackNavigator = () => {
         lazy: false,
         animation: "none",
         contentStyle: {
-          backgroundColor: colors.bg
+          backgroundColor: colors.bg,
+          minHeight: height
         }
       }}
       initialRouteName={"Intro"}
     >
       <NativeStack.Screen name="Intro" component={Intro} />
+      <NativeStack.Screen name="Auth" component={Auth} />
       <NativeStack.Screen name="AppLock" component={AppLock} />
     </IntroStack.Navigator>
   );
@@ -120,7 +124,7 @@ const _Tabs = () => {
         animation: "none",
         contentStyle: {
           backgroundColor: colors.bg,
-          height: !introCompleted ? undefined : screenHeight
+          minHeight: !introCompleted ? undefined : screenHeight
         }
       }}
     >

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

@@ -271,13 +271,13 @@ const _TabsHolder = () => {
     setTimeout(() => {
       switch (current) {
         case "tablet":
-          introCompleted && tabBarRef.current?.goToIndex(0, false);
+          tabBarRef.current?.goToIndex(0, false);
           break;
         case "smallTablet":
           if (!fullscreen) {
-            introCompleted && tabBarRef.current?.closeDrawer(false);
+            tabBarRef.current?.closeDrawer(false);
           } else {
-            introCompleted && tabBarRef.current?.openDrawer(false);
+            tabBarRef.current?.openDrawer(false);
           }
           break;
         case "mobile":
@@ -416,64 +416,66 @@ const _TabsHolder = () => {
         backgroundColor="transparent"
       />
 
-      {deviceMode && widths[deviceMode] ? (
-        <FluidTabs
-          ref={tabBarRef}
-          dimensions={dimensions}
-          widths={!introCompleted ? widths["mobile"] : widths[deviceMode]}
-          enabled={deviceMode !== "tablet" && !fullscreen}
-          onScroll={onScroll}
-          onChangeTab={onChangeTab}
-          onDrawerStateChange={() => true}
-        >
-          <View
-            key="1"
-            style={{
-              height: "100%",
-              width: fullscreen
-                ? 0
-                : widths[!introCompleted ? "mobile" : deviceMode]?.a
-            }}
-          >
-            <SideMenu />
-          </View>
-
-          <View
-            key="2"
-            style={{
-              height: "100%",
-              width: fullscreen
-                ? 0
-                : widths[!introCompleted ? "mobile" : deviceMode]?.b
-            }}
-          >
-            {deviceMode === "mobile" ? (
-              <Animated.View
-                onTouchEnd={() => {
-                  tabBarRef.current?.closeDrawer();
-                  animatedOpacity.value = withTiming(0);
-                  animatedTranslateY.value = withTiming(-9999);
+      {!introCompleted ? (
+        <NavigationStack />
+      ) : (
+        <>
+          {deviceMode && widths[deviceMode] ? (
+            <FluidTabs
+              ref={tabBarRef}
+              dimensions={dimensions}
+              widths={widths[deviceMode]}
+              enabled={deviceMode !== "tablet" && !fullscreen}
+              onScroll={onScroll}
+              onChangeTab={onChangeTab}
+              onDrawerStateChange={() => true}
+            >
+              <View
+                key="1"
+                style={{
+                  height: "100%",
+                  width: fullscreen ? 0 : widths[deviceMode]?.a
                 }}
-                style={[
-                  {
-                    position: "absolute",
-                    width: "100%",
-                    height: "100%",
-                    zIndex: 999,
-                    backgroundColor: "rgba(0,0,0,0.2)"
-                  },
-                  animatedStyle
-                ]}
-                ref={overlayRef}
-              />
-            ) : null}
+              >
+                <SideMenu />
+              </View>
 
-            <NavigationStack />
-          </View>
+              <View
+                key="2"
+                style={{
+                  height: "100%",
+                  width: fullscreen ? 0 : widths[deviceMode]?.b
+                }}
+              >
+                {deviceMode === "mobile" ? (
+                  <Animated.View
+                    onTouchEnd={() => {
+                      tabBarRef.current?.closeDrawer();
+                      animatedOpacity.value = withTiming(0);
+                      animatedTranslateY.value = withTiming(-9999);
+                    }}
+                    style={[
+                      {
+                        position: "absolute",
+                        width: "100%",
+                        height: "100%",
+                        zIndex: 999,
+                        backgroundColor: "rgba(0,0,0,0.2)"
+                      },
+                      animatedStyle
+                    ]}
+                    ref={overlayRef}
+                  />
+                ) : null}
 
-          <EditorWrapper key="3" width={widths} dimensions={dimensions} />
-        </FluidTabs>
-      ) : null}
+                <NavigationStack />
+              </View>
+
+              <EditorWrapper key="3" width={widths} dimensions={dimensions} />
+            </FluidTabs>
+          ) : null}
+        </>
+      )}
     </View>
   );
 };

apps/mobile/app/package.json

@@ -27,7 +27,9 @@
     "validator": "^13.5.2",
     "zustand": "^3.6.0",
     "fflate": "^0.7.3",
-    "timeago.js": "4.0.2"
+    "timeago.js": "4.0.2",
+    "react-native-blob-util": "0.17.3",
+    "react-native-swiper-flatlist": "3.2.2"
   },
   "sideEffects": false
 }

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

@@ -24,6 +24,7 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useRef,
   useState
 } from "react";
 import { Platform, ViewStyle } from "react-native";
@@ -45,6 +46,7 @@ import { useEditor } from "./tiptap/use-editor";
 import { useEditorEvents } from "./tiptap/use-editor-events";
 import { editorController } from "./tiptap/utils";
 import { useLayoutEffect } from "react";
+import useKeyboard from "../../hooks/use-keyboard";
 
 const style: ViewStyle = {
   height: "100%",
@@ -89,7 +91,7 @@ const Editor = React.memo(
         noToolbar,
         noHeader
       });
-
+      const renderKey = useRef(`editor-0`);
       useImperativeHandle(ref, () => ({
         get: () => editor
       }));
@@ -124,8 +126,9 @@ const Editor = React.memo(
       );
 
       const onError = useCallback(() => {
+        renderKey.current =
+          renderKey.current === `editor-0` ? `editor-1` : `editor-0`;
         editor.setLoading(true);
-        setTimeout(() => editor.setLoading(false), 10);
       }, [editor]);
 
       useEffect(() => {
@@ -152,6 +155,7 @@ const Editor = React.memo(
             testID={notesnook.editor.id}
             ref={editor.ref}
             onLoad={editor.onLoad}
+            key={renderKey.current}
             onRenderProcessGone={onError}
             nestedScrollEnabled
             onError={onError}
@@ -163,6 +167,7 @@ const Editor = React.memo(
             injectedJavaScript={`globalThis.sessionId="${editor.sessionId}";`}
             javaScriptEnabled={true}
             focusable={true}
+            onContentProcessDidTerminate={onError}
             setSupportMultipleWindows={false}
             overScrollMode="never"
             scrollEnabled={false}
@@ -228,6 +233,8 @@ const AppSection = ({
 
 const ReadonlyButton = ({ editor }: { editor: useEditorType }) => {
   const readonly = useEditorStore((state) => state.readonly);
+  const keyboard = useKeyboard();
+
   const onPress = async () => {
     if (editor.note.current) {
       await db.notes?.note(editor.note.current.id).readonly();
@@ -237,7 +244,7 @@ const ReadonlyButton = ({ editor }: { editor: useEditorType }) => {
     }
   };
 
-  return readonly && IconButton ? (
+  return readonly && IconButton && !keyboard.keyboardShown ? (
     <IconButton
       name="pencil-lock"
       type="grayBg"
@@ -245,7 +252,7 @@ const ReadonlyButton = ({ editor }: { editor: useEditorType }) => {
       color="accent"
       customStyle={{
         position: "absolute",
-        bottom: 20,
+        bottom: 60,
         width: 60,
         height: 60,
         right: 12,

apps/mobile/app/screens/editor/loading.js

@@ -101,8 +101,9 @@ const EditorOverlay = ({ editorId = "", editor }) => {
     setTimeout(() => {
       if (!loadingState.current.startTime) {
         translateValue.value = 6000;
+        opacity.value = 0;
       }
-    }, 1000);
+    }, 3000);
     eSubscribeEvent("loadingNote" + editorId, load);
     return () => {
       clearTimers();

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

@@ -106,6 +106,7 @@ typeof globalThis.editorTitle !== "undefined" && editorTitle.current && editorTi
 if (editorController.content) editorController.content.current = null;
 editorController.onUpdate();
 editorController.setTitle(null);
+editorController.countWords(0);
 typeof globalThis.statusBar !== "undefined" && statusBar.current.set({date:"",saved:""});
         `
     );
@@ -216,7 +217,7 @@ typeof globalThis.statusBar !== "undefined" && statusBar.current.set({date:"",sa
     );
   };
 
-  updateWebclip = async ({ src, hash }: ImageAttributes) => {
+  updateWebclip = async ({ src, hash }: Partial<ImageAttributes>) => {
     await this.doAsync(
       `editor && editor.commands.updateWebClip(${JSON.stringify({
         hash
@@ -224,7 +225,7 @@ typeof globalThis.statusBar !== "undefined" && statusBar.current.set({date:"",sa
     );
   };
 
-  updateImage = async ({ src, hash }: ImageAttributes) => {
+  updateImage = async ({ src, hash }: Partial<ImageAttributes>) => {
     await this.doAsync(
       `editor && editor.commands.updateImage(${JSON.stringify({
         hash

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

@@ -22,7 +22,7 @@ import React from "react";
 import { Platform, View } from "react-native";
 import DocumentPicker from "react-native-document-picker";
 import { launchCamera, launchImageLibrary } from "react-native-image-picker";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import { db } from "../../../common/database";
 import { compressToBase64 } from "../../../common/filesystem/compress";
 import { AttachmentItem } from "../../../components/attachments/attachment-item";
@@ -34,8 +34,8 @@ import {
 import PremiumService from "../../../services/premium";
 import { eCloseSheet } from "../../../utils/events";
 import { editorController, editorState } from "./utils";
-const FILE_SIZE_LIMIT = 500 * 1024 * 1024;
-const IMAGE_SIZE_LIMIT = 50 * 1024 * 1024;
+import { isImage } from "@notesnook/core/utils/filename";
+import { FILE_SIZE_LIMIT, IMAGE_SIZE_LIMIT } from "../../../utils/constants";
 
 const showEncryptionSheet = (file) => {
   presentSheet({
@@ -74,7 +74,7 @@ const file = async (fileOptions) => {
       mode: "import",
       allowMultiSelection: false
     };
-    if (Platform.OS == "ios") {
+    if (Platform.OS === "ios") {
       options.copyTo = "cachesDirectory";
     }
     await db.attachments.generateKey();
@@ -87,14 +87,9 @@ const file = async (fileOptions) => {
     }
 
     file = file[0];
-    if (file.type.startsWith("image")) {
-      ToastEvent.show({
-        title: "Type not supported",
-        message: "Please add images from gallery or camera picker.",
-        type: "error"
-      });
-      return;
-    }
+
+    let uri = Platform.OS === "ios" ? file.fileCopyUri : file.uri;
+
     if (file.size > FILE_SIZE_LIMIT) {
       ToastEvent.show({
         title: "File too large",
@@ -114,7 +109,6 @@ const file = async (fileOptions) => {
       return;
     }
 
-    let uri = Platform.OS === "ios" ? file.fileCopyUri : file.uri;
     console.log("file uri: ", uri);
     uri = Platform.OS === "ios" ? santizeUri(uri) : uri;
     showEncryptionSheet(file);
@@ -125,12 +119,24 @@ const file = async (fileOptions) => {
     if (!(await attachFile(uri, hash, file.type, file.name, fileOptions)))
       return;
     if (Platform.OS === "ios") await RNFetchBlob.fs.unlink(uri);
-    editorController.current?.commands.insertAttachment({
-      hash: hash,
-      filename: file.name,
-      type: file.type,
-      size: file.size
-    });
+    if (isImage(file.type)) {
+      editorController.current?.commands.insertImage({
+        hash: hash,
+        filename: file.name,
+        mime: file.type,
+        size: file.size,
+        dataurl: await db.attachments.read(hash, "base64"),
+        title: file.name
+      });
+    } else {
+      editorController.current?.commands.insertAttachment({
+        hash: hash,
+        filename: file.name,
+        mime: file.type,
+        size: file.size
+      });
+    }
+
     setTimeout(() => {
       eSendEvent(eCloseSheet);
     }, 1000);
@@ -255,7 +261,7 @@ const handleImageResponse = async (response, options) => {
 
   editorController.current?.commands.insertImage({
     hash: hash,
-    type: image.type,
+    mime: image.type,
     title: fileName,
     dataurl: b64,
     size: image.fileSize,
@@ -263,7 +269,7 @@ const handleImageResponse = async (response, options) => {
   });
 };
 
-async function attachFile(uri, hash, type, filename, options) {
+export async function attachFile(uri, hash, type, filename, options) {
   try {
     let exists = db.attachments.exists(hash);
     let encryptionInfo;
@@ -282,7 +288,7 @@ async function attachFile(uri, hash, type, filename, options) {
       let key = await db.attachments.generateKey();
       encryptionInfo = await Sodium.encryptFile(key, {
         uri: uri,
-        type: "url",
+        type: options.type || "url",
         hash: hash
       });
       encryptionInfo.type = type;

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

@@ -48,6 +48,10 @@ export type Settings = {
   keyboardShown?: boolean;
   doubleSpacedLines?: boolean;
   corsProxy: string;
+  fontSize: string;
+  fontFamily: string;
+  dateFormat: string;
+  timeFormat: string;
 };
 
 export type EditorProps = {

apps/mobile/app/screens/editor/tiptap/use-editor-events.ts

@@ -130,12 +130,24 @@ export const useEditorEvents = (
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const fullscreen = useSettingStore((state) => state.fullscreen);
   const corsProxy = useSettingStore((state) => state.settings.corsProxy);
+  const [dateFormat, timeFormat] = useSettingStore((state) => [
+    state.dateFormat,
+    state.timeFormat
+  ]);
+
   const handleBack = useRef<NativeEventSubscription>();
   const readonly = useEditorStore((state) => state.readonly);
   const isPremium = useUserStore((state) => state.premium);
   const doubleSpacedLines = useSettingStore(
     (state) => state.settings?.doubleSpacedLines
   );
+  const defaultFontSize = useSettingStore(
+    (state) => state.settings.defaultFontSize
+  );
+  const defaultFontFamily = useSettingStore(
+    (state) => state.settings.defaultFontFamily
+  );
+
   const tools = useDragState((state) => state.data);
 
   useEffect(() => {
@@ -164,7 +176,11 @@ export const useEditorEvents = (
       noHeader: noHeader,
       noToolbar: readonly || editorPropReadonly || noToolbar,
       doubleSpacedLines: doubleSpacedLines,
-      corsProxy: corsProxy
+      corsProxy: corsProxy,
+      fontSize: defaultFontSize,
+      fontFamily: defaultFontFamily,
+      dateFormat: db.settings?.getDateFormat(),
+      timeFormat: db.settings?.getTimeFormat()
     });
   }, [
     fullscreen,
@@ -179,7 +195,11 @@ export const useEditorEvents = (
     editorPropReadonly,
     noHeader,
     noToolbar,
-    corsProxy
+    corsProxy,
+    defaultFontSize,
+    defaultFontFamily,
+    dateFormat,
+    timeFormat
   ]);
 
   const onBackPress = useCallback(async () => {
@@ -338,7 +358,7 @@ export const useEditorEvents = (
             });
             return;
           }
-          ManageTagsSheet.present(editor.note.current);
+          ManageTagsSheet.present([editor.note.current]);
           break;
         case EventTypes.tag:
           if (editorMessage.value) {
@@ -387,9 +407,18 @@ export const useEditorEvents = (
           openLinkInBrowser(editorMessage.value as string);
           break;
 
-        case EventTypes.previewAttachment:
-          eSendEvent("ImagePreview", editorMessage.value);
+        case EventTypes.previewAttachment: {
+          const hash = (editorMessage.value as Attachment)?.hash;
+          const attachment = db.attachments?.attachment(hash);
+          if (attachment.metadata.type.startsWith("image/")) {
+            eSendEvent("ImagePreview", editorMessage.value);
+          } else {
+            eSendEvent("PDFPreview", attachment);
+          }
+
           break;
+        }
+
         default:
           break;
       }

apps/mobile/app/screens/editor/tiptap/use-editor.ts

@@ -38,8 +38,9 @@ import { useTagStore } from "../../../stores/use-tag-store";
 import { ThemeStore, useThemeStore } from "../../../stores/use-theme-store";
 import { eClearEditor, eOnLoadNote } from "../../../utils/events";
 import { tabBarRef } from "../../../utils/global-refs";
-import { timeConverter } from "../../../utils/time";
+import { getFormattedDate } from "../../../utils/time";
 import { NoteType } from "../../../utils/types";
+import { onNoteCreated } from "../../notes/common";
 import Commands from "./commands";
 import { Content, EditorState, Note, SavePayload } from "./types";
 import {
@@ -80,8 +81,8 @@ export const useEditor = (
   const lockedSessionId = useRef<string>();
 
   const postMessage = useCallback(
-    async <T>(type: string, data: T) =>
-      await post(editorRef, sessionIdRef.current, type, data),
+    async <T>(type: string, data: T, waitFor = 300) =>
+      await post(editorRef, sessionIdRef.current, type, data, waitFor),
     [sessionIdRef]
   );
 
@@ -120,9 +121,13 @@ export const useEditor = (
     [editorId]
   );
 
-  if (loading) {
-    setLoading(false);
-  }
+  useEffect(() => {
+    if (loading) {
+      setLoading(false);
+    } else {
+      state.current.ready = false;
+    }
+  }, [loading]);
 
   const withTimer = useCallback(
     (id: string, fn: () => void, duration: number) => {
@@ -194,10 +199,7 @@ export const useEditor = (
           sessionId: isContentInvalid(data) ? null : currentSessionHistoryId
         };
 
-        if (title) {
-          noteData.title = title;
-        }
-
+        noteData.title = title;
         if (data) {
           noteData.content = {
             data: data,
@@ -209,12 +211,19 @@ export const useEditor = (
           id = await db.notes?.add(noteData);
           if (!note && id) {
             currentNote.current = db.notes?.note(id).data as NoteType;
-            state.current?.onNoteCreated && state.current.onNoteCreated(id);
+            const defaultNotebook = db.settings?.getDefaultNotebook();
+            if (!state.current.onNoteCreated && defaultNotebook) {
+              onNoteCreated(id, {
+                type: defaultNotebook.topic ? "topic" : "notebook",
+                id: defaultNotebook.id,
+                notebook: defaultNotebook.topic
+              });
+            } else {
+              state.current?.onNoteCreated && state.current.onNoteCreated(id);
+            }
+
             if (!noteData.title) {
-              postMessage(
-                EditorEvents.titleplaceholder,
-                currentNote.current.title
-              );
+              postMessage(EditorEvents.title, currentNote.current.title);
             }
           }
 
@@ -239,7 +248,7 @@ export const useEditor = (
         }
         if (id && sessionIdRef.current === currentSessionId) {
           note = db.notes?.note(id)?.data as Note;
-          await commands.setStatus(timeConverter(note.dateEdited), "Saved");
+          await commands.setStatus(getFormattedDate(note.dateEdited), "Saved");
 
           lastContentChangeTime.current = note.dateEdited;
 
@@ -336,7 +345,6 @@ export const useEditor = (
     ) => {
       state.current.currentlyEditing = true;
       const editorState = useEditorStore.getState();
-
       if (item && item.type === "new") {
         currentNote.current && (await reset());
         const nextSessionId = makeSessionId(item as NoteType);
@@ -344,7 +352,7 @@ export const useEditor = (
         sessionIdRef.current = nextSessionId;
         sessionHistoryId.current = Date.now();
         await commands.setSessionId(nextSessionId);
-        await commands.focus();
+        if (state.current?.ready) await commands.focus();
         lastContentChangeTime.current = 0;
         useEditorStore.getState().setReadonly(false);
       } else {
@@ -358,7 +366,7 @@ export const useEditor = (
           !currentContent.current?.data ||
           currentContent.current?.data.length < 50000
         ) {
-          overlay(false);
+          if (state.current.ready) overlay(false);
         } else {
           overlay(true);
         }
@@ -370,9 +378,13 @@ export const useEditor = (
         commands.setSessionId(nextSessionId);
         sessionIdRef.current = nextSessionId;
         currentNote.current = item as NoteType;
-        await commands.setStatus(timeConverter(item.dateEdited), "Saved");
+        await commands.setStatus(getFormattedDate(item.dateEdited), "Saved");
         await postMessage(EditorEvents.title, item.title);
-        await postMessage(EditorEvents.html, currentContent.current?.data);
+        await postMessage(
+          EditorEvents.html,
+          currentContent.current?.data,
+          10000
+        );
         useEditorStore.getState().setReadonly(item.readonly);
         await commands.setTags(currentNote.current);
         commands.setSettings();
@@ -453,7 +465,7 @@ export const useEditor = (
         if (note.tags !== currentNote.current.tags) {
           await commands.setTags(note);
         }
-        await commands.setStatus(timeConverter(note.dateEdited), "Saved");
+        await commands.setStatus(getFormattedDate(note.dateEdited), "Saved");
       }
 
       lock.current = false;
@@ -578,39 +590,36 @@ export const useEditor = (
     lastContentChangeTime.current = Date.now();
   };
 
+  useEffect(() => {
+    state.current.saveCount = 0;
+  }, [sessionId, loading]);
+
   const onReady = useCallback(async () => {
     if (!(await isEditorLoaded(editorRef, sessionIdRef.current))) {
-      overlay(true);
-      setLoading(true);
+      eSendEvent("webview_reset");
     } else {
       isDefaultEditor && restoreEditorState();
     }
-  }, [overlay, isDefaultEditor, restoreEditorState]);
-
-  useEffect(() => {
-    state.current.saveCount = 0;
-    async () => {
-      await commands.setSessionId(sessionIdRef.current);
-      if (sessionIdRef.current) {
-        if (!state.current?.ready) return;
-        await onReady();
-      }
-    };
-  }, [sessionId, loading, commands, onReady]);
+  }, [isDefaultEditor, restoreEditorState]);
 
   const onLoad = useCallback(async () => {
-    state.current.ready = true;
-    onReady();
-    postMessage(EditorEvents.theme, theme || useThemeStore.getState().colors);
-    commands.setInsets(
-      isDefaultEditor ? insets : { top: 0, left: 0, right: 0, bottom: 0 }
-    );
-    if (currentNote.current) {
-      loadNote({ ...currentNote.current, forced: true });
-    } else {
-      await commands.setPlaceholder(placeholderTip.current);
-    }
-    commands.setSettings();
+    if (currentNote.current) overlay(true);
+    clearTimeout(timers.current["editor:loaded"]);
+    timers.current["editor:loaded"] = setTimeout(async () => {
+      postMessage(EditorEvents.theme, theme || useThemeStore.getState().colors);
+      commands.setInsets(
+        isDefaultEditor ? insets : { top: 0, left: 0, right: 0, bottom: 0 }
+      );
+      await commands.setSessionId(sessionIdRef.current);
+      await onReady();
+      await commands.setSettings();
+      if (currentNote.current) {
+        loadNote({ ...currentNote.current, forced: true });
+      } else {
+        await commands.setPlaceholder(placeholderTip.current);
+      }
+      state.current.ready = true;
+    }, 300);
   }, [
     onReady,
     postMessage,
@@ -618,7 +627,8 @@ export const useEditor = (
     commands,
     isDefaultEditor,
     insets,
-    loadNote
+    loadNote,
+    overlay
   ]);
 
   return {
@@ -636,6 +646,7 @@ export const useEditor = (
     saveContent,
     onContentChanged,
     editorId: editorId,
-    markImageLoaded
+    markImageLoaded,
+    overlay
   };
 };

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

@@ -73,7 +73,8 @@ export async function post<T>(
   ref: RefObject<WebView>,
   sessionId: string,
   type: string,
-  value: T | null = null
+  value: T | null = null,
+  waitFor = 300
 ) {
   if (!sessionId) {
     console.warn("post called without sessionId of type:", type);
@@ -85,7 +86,7 @@ export async function post<T>(
     sessionId: sessionId
   };
   setImmediate(() => ref.current?.postMessage(JSON.stringify(message)));
-  const response = await getResponse(type);
+  const response = await getResponse(type, waitFor);
   return response;
 }
 
@@ -97,7 +98,8 @@ type WebviewResponseData = {
 };
 
 export const getResponse = async (
-  type: string
+  type: string,
+  waitFor = 300
 ): Promise<WebviewResponseData | false> => {
   return new Promise((resolve) => {
     const callback = (data: WebviewResponseData) => {
@@ -107,7 +109,7 @@ export const getResponse = async (
     eSubscribeEvent(type, callback);
     setTimeout(() => {
       resolve(false);
-    }, 5000);
+    }, waitFor);
   });
 };
 

apps/mobile/app/screens/editor/wrapper.js

@@ -35,7 +35,7 @@ import { useSettingStore } from "../../stores/use-setting-store";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { editorRef } from "../../utils/global-refs";
 import { ProgressBar } from "./progress";
-import { editorController, editorState, textInput } from "./tiptap/utils";
+import { editorController, textInput } from "./tiptap/utils";
 export const EditorWrapper = ({ width }) => {
   const colors = useThemeStore((state) => state.colors);
   const deviceMode = useSettingStore((state) => state.deviceMode);
@@ -48,9 +48,9 @@ export const EditorWrapper = ({ width }) => {
   const keyboard = useKeyboard();
 
   const onAppStateChanged = async (state) => {
-    if (editorState().movedAway) return;
     if (state === "active") {
       editorController.current.onReady();
+      editorController.current.overlay(false);
     }
   };
 

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

@@ -118,6 +118,7 @@ const Notebook = ({ route, navigation }: NavigationProps<"Notebook">) => {
       get: () => {
         const notebook = db.notebooks?.notebook(params?.current?.item?.id)
           ?.data as NotebookType;
+        if (!notebook) return [];
         return db.relations?.from(notebook, "note");
       }
     });

apps/mobile/app/screens/notes/common.ts

@@ -86,7 +86,7 @@ export const setOnFirstSave = (
   }, 0);
 };
 
-async function onNoteCreated(id: string, params: FirstSaveData) {
+export async function onNoteCreated(id: string, params: FirstSaveData) {
   if (!params) return;
   switch (params.type) {
     case "notebook": {

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

@@ -28,7 +28,7 @@ import React, {
 import { ActivityIndicator, Linking, Platform, View } from "react-native";
 import { FlatList } from "react-native-gesture-handler";
 import * as ScopedStorage from "react-native-scoped-storage";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import { db } from "../../common/database";
 import Storage from "../../common/database/storage";
 import DialogHeader from "../../components/dialog/dialog-header";

apps/mobile/app/screens/settings/app-lock.js

@@ -17,33 +17,36 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useState } from "react";
-import { Dimensions, LayoutAnimation, Platform, View } from "react-native";
+import React from "react";
+import { Platform, View } from "react-native";
 import Animated, { FadeInDown, FadeOutUp } from "react-native-reanimated";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { SVG_Z } from "../../components/intro";
-import { WelcomeNotice } from "../../components/intro/welcome";
+import { AuthMode } from "../../components/auth";
 import { Button } from "../../components/ui/button";
 import { PressableButton } from "../../components/ui/pressable";
 import Seperator from "../../components/ui/seperator";
-import { SvgView } from "../../components/ui/svg";
-import { BouncingView } from "../../components/ui/transitions/bouncing-view";
 import Heading from "../../components/ui/typography/heading";
 import Paragraph from "../../components/ui/typography/paragraph";
 import BiometicService from "../../services/biometrics";
 import { DDS } from "../../services/device-detection";
-import { presentSheet, ToastEvent } from "../../services/event-manager";
+import {
+  ToastEvent,
+  eSendEvent,
+  presentSheet
+} from "../../services/event-manager";
+import Navigation from "../../services/navigation";
 import SettingsService from "../../services/settings";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { getElevation } from "../../utils";
+import { eOpenLoginDialog } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 const AppLock = ({ route }) => {
   const colors = useThemeStore((state) => state.colors);
   const appLockMode = useSettingStore((state) => state.settings.appLockMode);
-  const [step, setStep] = useState(0);
   const welcome = route?.params?.welcome;
+  const deviceMode = useSettingStore((state) => state.deviceMode);
 
   const modes = [
     {
@@ -76,13 +79,12 @@ const AppLock = ({ route }) => {
         exiting={!welcome ? undefined : FadeOutUp}
         entering={!welcome ? undefined : FadeInDown}
         style={{
-          justifyContent: !welcome ? undefined : "center",
           height: !welcome ? undefined : "100%",
           width: !welcome ? undefined : "100%"
         }}
       >
-        {step === 0 ? (
-          <>
+        <>
+          {!welcome ? (
             <View
               style={{
                 flexDirection: "row",
@@ -125,121 +127,163 @@ const AppLock = ({ route }) => {
                 </Paragraph>
               </View>
             </View>
-            <Seperator />
+          ) : (
             <View
               style={{
-                paddingHorizontal: 12,
-                width: DDS.isTab && welcome ? "50%" : "100%",
-                alignSelf: "center"
+                flexGrow: 1,
+                justifyContent: "flex-end",
+                paddingHorizontal: 20,
+                backgroundColor: colors.nav,
+                borderBottomWidth: 1,
+                borderBottomColor: colors.border,
+                alignSelf: deviceMode !== "mobile" ? "center" : undefined,
+                borderWidth: deviceMode !== "mobile" ? 1 : null,
+                borderColor: deviceMode !== "mobile" ? colors.border : null,
+                borderRadius: deviceMode !== "mobile" ? 20 : null,
+                marginTop: deviceMode !== "mobile" ? 50 : null,
+                width: deviceMode === "mobile" ? null : "50%"
               }}
             >
-              {modes.map((item) => (
-                <PressableButton
-                  key={item.title}
-                  type={appLockMode === item.value ? "grayBg" : "transparent"}
-                  onPress={async () => {
-                    if (
-                      !(await BiometicService.isBiometryAvailable()) &&
-                      !useUserStore.getState().user
-                    ) {
-                      ToastEvent.show({
-                        heading: "Biometrics not enrolled",
-                        type: "error",
-                        message:
-                          "To use app lock, you must enable biometrics such as Fingerprint lock or Face ID on your phone or create an account."
-                      });
-                      return;
-                    }
-                    SettingsService.set({ appLockMode: item.value });
-                  }}
-                  customStyle={{
-                    justifyContent: "flex-start",
-                    alignItems: "flex-start",
-                    paddingHorizontal: 12,
-                    paddingVertical: 12,
-                    marginTop: 0,
-                    marginBottom: 12,
-                    borderWidth: 1,
-                    borderColor:
-                      appLockMode === item.value ? item.activeColor : colors.nav
-                  }}
+              <View
+                style={{
+                  flexDirection: "row"
+                }}
+              >
+                <View
                   style={{
-                    marginBottom: 10
+                    width: 100,
+                    height: 5,
+                    backgroundColor: colors.accent,
+                    borderRadius: 2,
+                    marginRight: 7
                   }}
-                >
-                  <Heading
-                    color={
-                      appLockMode === item.value ? item.activeColor : colors.pri
-                    }
-                    style={{ maxWidth: "95%" }}
-                    size={SIZE.md}
-                  >
-                    {item.title}
-                  </Heading>
-                  <Paragraph
-                    color={
-                      appLockMode === item.value
-                        ? item.activeColor
-                        : colors.icon
-                    }
-                    style={{ maxWidth: "95%" }}
-                    size={SIZE.sm}
-                  >
-                    {item.desc}
-                  </Paragraph>
-                </PressableButton>
-              ))}
-
-              {welcome && (
-                <Button
-                  fontSize={SIZE.md}
-                  height={45}
-                  width={250}
-                  onPress={async () => {
-                    LayoutAnimation.configureNext({
-                      ...LayoutAnimation.Presets.linear,
-                      delete: {
-                        duration: 50,
-                        property: "opacity",
-                        type: "linear"
-                      }
-                    });
-                    setStep(1);
-                  }}
-                  style={{
-                    paddingHorizontal: 24,
-                    alignSelf: "center",
-                    borderRadius: 100,
-                    ...getElevation(5),
-                    marginTop: 30
-                  }}
-                  type="accent"
-                  title="Next"
                 />
-              )}
-            </View>
-          </>
-        ) : (
-          <WelcomeNotice />
-        )}
 
-        {welcome && !colors.night ? (
-          <BouncingView
+                <View
+                  style={{
+                    width: 20,
+                    height: 5,
+                    backgroundColor: colors.nav,
+                    borderRadius: 2
+                  }}
+                />
+              </View>
+              <Heading
+                style={{
+                  marginTop: 10
+                }}
+                extraBold
+                size={SIZE.xxl}
+              >
+                Protect your notes
+              </Heading>
+              <Paragraph
+                style={{
+                  marginBottom: 25
+                }}
+              >
+                Choose how you want to secure your notes locally.
+              </Paragraph>
+            </View>
+          )}
+
+          <Seperator />
+          <View
             style={{
-              position: "absolute",
-              bottom: DDS.isTab ? -300 : -130,
-              zIndex: -1
+              paddingHorizontal: 12,
+              width: DDS.isTab && welcome ? "50%" : "100%",
+              alignSelf: "center",
+              flexGrow: 1
             }}
-            animated={false}
-            duration={3000}
           >
-            <SvgView
-              width={Dimensions.get("window").width}
-              height={Dimensions.get("window").width}
-              src={SVG_Z}
-            />
-          </BouncingView>
-        ) : null}
+            {modes.map((item) => (
+              <PressableButton
+                key={item.title}
+                type={appLockMode === item.value ? "grayBg" : "transparent"}
+                onPress={async () => {
+                  if (
+                    !(await BiometicService.isBiometryAvailable()) &&
+                    !useUserStore.getState().user
+                  ) {
+                    ToastEvent.show({
+                      heading: "Biometrics not enrolled",
+                      type: "error",
+                      message:
+                        "To use app lock, you must enable biometrics such as Fingerprint lock or Face ID on your phone or create an account."
+                    });
+                    return;
+                  }
+                  SettingsService.set({ appLockMode: item.value });
+                }}
+                customStyle={{
+                  justifyContent: "flex-start",
+                  alignItems: "flex-start",
+                  paddingHorizontal: 12,
+                  paddingVertical: 12,
+                  marginTop: 0,
+                  marginBottom: 12,
+                  borderWidth: 1,
+                  borderColor:
+                    appLockMode === item.value ? item.activeColor : colors.nav
+                }}
+                style={{
+                  marginBottom: 10
+                }}
+              >
+                <Heading
+                  color={
+                    appLockMode === item.value ? item.activeColor : colors.pri
+                  }
+                  style={{ maxWidth: "95%" }}
+                  size={SIZE.md}
+                >
+                  {item.title}
+                </Heading>
+                <Paragraph
+                  color={
+                    appLockMode === item.value ? item.activeColor : colors.icon
+                  }
+                  style={{ maxWidth: "95%" }}
+                  size={SIZE.sm}
+                >
+                  {item.desc}
+                </Paragraph>
+              </PressableButton>
+            ))}
+
+            {welcome && (
+              <Button
+                fontSize={SIZE.md}
+                width={250}
+                onPress={async () => {
+                  eSendEvent(eOpenLoginDialog, AuthMode.welcomeSignup);
+                  setTimeout(() => {
+                    SettingsService.set({
+                      introCompleted: true
+                    });
+                    Navigation.replace(
+                      {
+                        name: "Notes"
+                      },
+                      {
+                        canGoBack: false
+                      }
+                    );
+                  }, 1000);
+                }}
+                style={{
+                  paddingHorizontal: 24,
+                  alignSelf: "center",
+                  ...getElevation(5),
+                  marginTop: 30,
+                  borderRadius: 100
+                }}
+                type="accent"
+                title="Next"
+              />
+            )}
+          </View>
+        </>
       </Animated.View>
     </>
   );

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

@@ -26,6 +26,9 @@ import { Licenses } from "./licenses";
 import SoundPicker from "./sound-picker";
 import { Subscription } from "./subscription";
 import { TrashIntervalSelector } from "./trash-interval-selector";
+import { FontSelector } from "./font-selector";
+import { TitleFormat } from "./title-format";
+import { DateFormatSelector, TimeFormatSelector } from "./date-format";
 export const components: { [name: string]: ReactElement } = {
   colorpicker: <AccentColorPicker />,
   homeselector: <HomagePageSelector />,
@@ -35,5 +38,9 @@ export const components: { [name: string]: ReactElement } = {
   "debug-logs": <DebugLogs />,
   "sound-picker": <SoundPicker />,
   licenses: <Licenses />,
-  "trash-interval-selector": <TrashIntervalSelector />
+  "trash-interval-selector": <TrashIntervalSelector />,
+  "font-selector": <FontSelector />,
+  "title-format": <TitleFormat />,
+  "date-format-selector": <DateFormatSelector />,
+  "time-format-selector": <TimeFormatSelector />
 };

apps/mobile/app/screens/settings/date-format.jsx

@@ -0,0 +1,198 @@
+/*
+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 dayjs from "dayjs";
+import React, { useRef, useState } from "react";
+import { View } from "react-native";
+import Menu, { MenuItem } from "react-native-reanimated-material-menu";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { db } from "../../common/database";
+import { PressableButton } from "../../components/ui/pressable";
+import Paragraph from "../../components/ui/typography/paragraph";
+import { useThemeStore } from "../../stores/use-theme-store";
+import { SIZE } from "../../utils/size";
+import { DATE_FORMATS, TIME_FORMATS } from "@notesnook/core/common";
+import { useSettingStore } from "../../stores/use-setting-store";
+
+export const DateFormatSelector = () => {
+  const colors = useThemeStore((state) => state.colors);
+  const menuRef = useRef();
+  const [width, setWidth] = useState(0);
+  const [dateFormat, setDateFormat] = useState(db.settings.getDateFormat());
+  const onChange = (item) => {
+    menuRef.current?.hide();
+    db.settings.setDateFormat(item);
+    setDateFormat(item);
+    useSettingStore.setState({
+      dateFormat: item
+    });
+  };
+
+  return (
+    <View
+      onLayout={(event) => {
+        setWidth(event.nativeEvent.layout.width);
+      }}
+      style={{
+        width: "100%"
+      }}
+    >
+      <Menu
+        ref={menuRef}
+        animationDuration={200}
+        style={{
+          borderRadius: 5,
+          backgroundColor: colors.bg,
+          width: width,
+          marginTop: 60
+        }}
+        onRequestClose={() => {
+          menuRef.current?.hide();
+        }}
+        anchor={
+          <PressableButton
+            onPress={async () => {
+              menuRef.current?.show();
+            }}
+            type="grayBg"
+            customStyle={{
+              flexDirection: "row",
+              alignItems: "center",
+              marginTop: 10,
+              width: "100%",
+              justifyContent: "space-between",
+              padding: 12
+            }}
+          >
+            <Paragraph>
+              {dateFormat} ({dayjs().format(dateFormat)})
+            </Paragraph>
+            <Icon color={colors.icon} name="menu-down" size={SIZE.md} />
+          </PressableButton>
+        }
+      >
+        {DATE_FORMATS.map((item) => (
+          <MenuItem
+            key={item.id}
+            onPress={async () => {
+              onChange(item);
+            }}
+            style={{
+              backgroundColor: dateFormat === item ? colors.nav : "transparent",
+              width: "100%",
+              maxWidth: width
+            }}
+            textStyle={{
+              fontSize: SIZE.md,
+              color: dateFormat === item ? colors.accent : colors.pri
+            }}
+          >
+            {item} ({dayjs().format(item)})
+          </MenuItem>
+        ))}
+      </Menu>
+    </View>
+  );
+};
+
+export const TimeFormatSelector = () => {
+  const colors = useThemeStore((state) => state.colors);
+  const menuRef = useRef();
+  const [width, setWidth] = useState(0);
+  const [timeFormat, setTimeFormat] = useState(db.settings.getTimeFormat());
+  const onChange = (item) => {
+    menuRef.current?.hide();
+    db.settings.setTimeFormat(item);
+    setTimeFormat(item);
+    useSettingStore.setState({
+      timeFormat: item
+    });
+  };
+
+  const TimeFormats = {
+    "12-hour": "hh:mm A",
+    "24-hour": "HH:mm"
+  };
+
+  return (
+    <View
+      onLayout={(event) => {
+        setWidth(event.nativeEvent.layout.width);
+      }}
+      style={{
+        width: "100%"
+      }}
+    >
+      <Menu
+        ref={menuRef}
+        animationDuration={200}
+        style={{
+          borderRadius: 5,
+          backgroundColor: colors.bg,
+          width: width,
+          marginTop: 60
+        }}
+        onRequestClose={() => {
+          menuRef.current?.hide();
+        }}
+        anchor={
+          <PressableButton
+            onPress={async () => {
+              menuRef.current?.show();
+            }}
+            type="grayBg"
+            customStyle={{
+              flexDirection: "row",
+              alignItems: "center",
+              marginTop: 10,
+              width: "100%",
+              justifyContent: "space-between",
+              padding: 12
+            }}
+          >
+            <Paragraph>
+              {timeFormat} ({dayjs().format(TimeFormats[timeFormat])})
+            </Paragraph>
+            <Icon color={colors.icon} name="menu-down" size={SIZE.md} />
+          </PressableButton>
+        }
+      >
+        {TIME_FORMATS.map((item) => (
+          <MenuItem
+            key={item.id}
+            onPress={async () => {
+              onChange(item);
+            }}
+            style={{
+              backgroundColor: timeFormat === item ? colors.nav : "transparent",
+              width: "100%",
+              maxWidth: width
+            }}
+            textStyle={{
+              fontSize: SIZE.md,
+              color: timeFormat === item ? colors.accent : colors.pri
+            }}
+          >
+            {item} ({dayjs().format(TimeFormats[item])})
+          </MenuItem>
+        ))}
+      </Menu>
+    </View>
+  );
+};

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

@@ -18,12 +18,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import Clipboard from "@react-native-clipboard/clipboard";
-import { LogMessage } from "@streetwriters/logger";
+import { LogMessage } from "@notesnook/logger";
 import { format, LogLevel, logManager } from "@notesnook/core/logger";
 import React, { useEffect, useState } from "react";
 import { FlatList, Platform, TouchableOpacity, View } from "react-native";
 import * as ScopedStorage from "react-native-scoped-storage";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import Storage from "../../common/database/storage";
 import { presentDialog } from "../../components/dialog/functions";
 import { IconButton } from "../../components/ui/icon-button";

apps/mobile/app/screens/settings/editor/tool-sheet.tsx

@@ -20,8 +20,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { ToolId } from "@notesnook/editor/dist/toolbar";
 import React, { RefObject } from "react";
 import { View } from "react-native";
-import ActionSheet from "react-native-actions-sheet";
-import { ScrollView } from "react-native-gesture-handler";
 import { PressableButton } from "../../../components/ui/pressable";
 import { SvgView } from "../../../components/ui/svg";
 import Paragraph from "../../../components/ui/typography/paragraph";
@@ -34,13 +32,14 @@ import {
   getToolIcon,
   getUngroupedTools
 } from "./toolbar-definition";
+import { ActionSheetRef, ScrollView } from "react-native-actions-sheet";
 
 export default function ToolSheet({
   group,
   fwdRef
 }: {
   group: DraggableItem;
-  fwdRef: RefObject<ActionSheet>;
+  fwdRef: RefObject<ActionSheetRef>;
 }) {
   const colors = useThemeStore((state) => state.colors);
   const data = useDragState((state) => state.data);
@@ -50,6 +49,7 @@ export default function ToolSheet({
     (item: ToolId) => {
       const tool = findToolById(item);
       const iconSvgString = tool ? getToolIcon(tool.icon as ToolId) : null;
+      if (item === "none") return;
       return (
         <PressableButton
           key={item}
@@ -109,12 +109,7 @@ export default function ToolSheet({
         padding: 12
       }}
     >
-      <ScrollView
-        onMomentumScrollEnd={() => {
-          fwdRef.current?.handleChildScrollEnd();
-        }}
-        nestedScrollEnabled={true}
-      >
+      <ScrollView nestedScrollEnabled={true}>
         {!ungrouped || ungrouped.length === 0 ? (
           <Paragraph
             style={{

apps/mobile/app/screens/settings/font-selector.jsx

@@ -0,0 +1,110 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { useRef, useState } from "react";
+import { View } from "react-native";
+import Menu, { MenuItem } from "react-native-reanimated-material-menu";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { PressableButton } from "../../components/ui/pressable";
+import Paragraph from "../../components/ui/typography/paragraph";
+import SettingsService from "../../services/settings";
+import { useSettingStore } from "../../stores/use-setting-store";
+import { useThemeStore } from "../../stores/use-theme-store";
+import { SIZE } from "../../utils/size";
+import { getFontById, getFonts } from "@notesnook/editor/dist/utils/font";
+
+export const FontSelector = () => {
+  const colors = useThemeStore((state) => state.colors);
+  const defaultFontFamily = useSettingStore(
+    (state) => state.settings.defaultFontFamily
+  );
+  const menuRef = useRef();
+  const [width, setWidth] = useState(0);
+
+  const onChange = (item) => {
+    menuRef.current?.hide();
+    SettingsService.set({
+      defaultFontFamily: item
+    });
+  };
+  return (
+    <View
+      onLayout={(event) => {
+        setWidth(event.nativeEvent.layout.width);
+      }}
+      style={{
+        width: "100%"
+      }}
+    >
+      <Menu
+        ref={menuRef}
+        animationDuration={200}
+        style={{
+          borderRadius: 5,
+          backgroundColor: colors.bg,
+          width: width,
+          marginTop: 60
+        }}
+        onRequestClose={() => {
+          menuRef.current?.hide();
+        }}
+        anchor={
+          <PressableButton
+            onPress={async () => {
+              menuRef.current?.show();
+            }}
+            type="grayBg"
+            customStyle={{
+              flexDirection: "row",
+              alignItems: "center",
+              marginTop: 10,
+              width: "100%",
+              justifyContent: "space-between",
+              padding: 12
+            }}
+          >
+            <Paragraph>{getFontById(defaultFontFamily).title}</Paragraph>
+            <Icon color={colors.icon} name="menu-down" size={SIZE.md} />
+          </PressableButton>
+        }
+      >
+        {getFonts().map((item) => (
+          <MenuItem
+            key={item.id}
+            onPress={async () => {
+              onChange(item.id);
+            }}
+            style={{
+              backgroundColor:
+                defaultFontFamily === item.id ? colors.nav : "transparent",
+              width: "100%",
+              maxWidth: width
+            }}
+            textStyle={{
+              fontSize: SIZE.md,
+              color: defaultFontFamily === item.id ? colors.accent : colors.pri
+            }}
+          >
+            {item.title}
+          </MenuItem>
+        ))}
+      </Menu>
+    </View>
+  );
+};

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

@@ -60,8 +60,8 @@ export const Settings = () => {
     <SettingsStack.Navigator
       initialRouteName="SettingsHome"
       screenListeners={{
-        beforeRemove: (e) => {
-          if (e.target?.startsWith("SettingsGroup")) {
+        focus: (e) => {
+          if (e.target?.startsWith("SettingsHome-")) {
             useNavigationStore.getState().update({ name: "Settings" }, false);
           }
         }

apps/mobile/app/screens/settings/license-data.js

@@ -268,10 +268,10 @@ export const LICENSES = [
     link: "https://github.com/RocketChat/rn-extensions-share"
   },
   {
-    name: "rn-fetch-blob",
+    name: "react-native-blob-util",
     licenseType: "MIT",
-    author: "Joltup",
-    link: "https://github.com/joltup/rn-fetch-blob"
+    author: "RonRadtke",
+    link: "https://github.com/RonRadtke/react-native-blob-util"
   },
   {
     name: "react-native-gzip",

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

@@ -22,8 +22,8 @@ import {
   StackActions,
   useNavigation
 } from "@react-navigation/native";
-import React, { useRef } from "react";
-import { View, TextInput } from "react-native";
+import React, { useRef, useState } from "react";
+import { View, TextInput, ActivityIndicator } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import ToggleSwitch from "toggle-switch-react-native";
 import Input from "../../components/ui/input";
@@ -37,6 +37,7 @@ import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
 import { components } from "./components";
 import { RouteParams, SettingSection } from "./types";
+import { IconButton } from "../../components/ui/icon-button";
 
 const _SectionItem = ({ item }: { item: SettingSection }) => {
   const colors = useThemeStore((state) => state.colors);
@@ -45,10 +46,14 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
   const current = item.useHook && item.useHook(item);
   const isHidden = item.hidden && item.hidden(item.property || current);
   const inputRef = useRef<TextInput>(null);
+  const [loading, setLoading] = useState(false);
 
-  const onChangeSettings = () => {
+  const onChangeSettings = async () => {
+    if (loading) return;
     if (item.modifer) {
-      item.modifer(item.property || current);
+      setLoading(true);
+      await item.modifer(item.property || current);
+      setLoading(false);
       return;
     }
     if (!item.property) return;
@@ -64,6 +69,12 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
           backgroundColor: colors.errorBg
         }
       : {};
+
+  const updateInput = (value: any) => {
+    inputRef?.current?.setNativeProps({
+      text: value + ""
+    });
+  };
   return isHidden ? null : (
     <PressableButton
       disabled={item.type === "component"}
@@ -190,15 +201,104 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
               defaultValue={item.inputProperties?.defaultValue}
             />
           )}
+
+          {item.type === "input-selector" && (
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                marginTop: 12
+              }}
+            >
+              <IconButton
+                name="minus"
+                color={colors.pri}
+                onPress={() => {
+                  const rawValue = SettingsService.get()[
+                    item.property as keyof SettingStore["settings"]
+                  ] as string;
+                  if (rawValue) {
+                    const currentValue = parseInt(rawValue);
+                    if (currentValue <= 0) return;
+                    const nextValue = currentValue - 1;
+                    SettingsService.set({
+                      [item.property as string]: nextValue
+                    });
+                    updateInput(nextValue);
+                  }
+                }}
+                size={SIZE.xl}
+              />
+              <Input
+                {...item.inputProperties}
+                onSubmit={(e) => {
+                  if (e.nativeEvent.text) {
+                    SettingsService.set({
+                      [item.property as string]: e.nativeEvent.text
+                    });
+                  }
+                  item.inputProperties?.onSubmitEditing?.(e);
+                }}
+                onChangeText={(text) => {
+                  if (text) {
+                    if (item.minInputValue) {
+                      text =
+                        parseInt(text) < item.minInputValue
+                          ? item.minInputValue + ""
+                          : text;
+                    }
+                    SettingsService.set({
+                      [item.property as string]: text
+                    });
+                  }
+                  item.inputProperties?.onSubmitEditing?.(text as any);
+                }}
+                keyboardType="decimal-pad"
+                containerStyle={{
+                  width: 45
+                }}
+                wrapperStyle={{
+                  maxWidth: 45,
+                  marginBottom: 0,
+                  marginHorizontal: 6
+                }}
+                fwdRef={inputRef}
+                onLayout={() => {
+                  if (item.property) {
+                    updateInput(SettingsService.get()[item.property]);
+                  }
+                }}
+                defaultValue={item.inputProperties?.defaultValue}
+              />
+              <IconButton
+                name="plus"
+                color={colors.pri}
+                onPress={() => {
+                  const rawValue = SettingsService.get()[
+                    item.property as keyof SettingStore["settings"]
+                  ] as string;
+                  if (rawValue) {
+                    const currentValue = parseInt(rawValue);
+                    const nextValue = currentValue + 1;
+                    SettingsService.set({
+                      [item.property as string]: nextValue
+                    });
+                    updateInput(nextValue);
+                  }
+                }}
+                size={SIZE.xl}
+              />
+            </View>
+          )}
         </View>
       </View>
 
-      {item.type === "switch" && item.property && (
+      {item.type === "switch" && !loading && (
         <ToggleSwitch
           isOn={
             item.getter
               ? item.getter(item.property || current)
-              : settings[item.property]
+              : settings[item?.property as never]
           }
           onColor={colors.accent}
           offColor={colors.icon}
@@ -207,6 +307,10 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
           onToggle={onChangeSettings}
         />
       )}
+
+      {loading ? (
+        <ActivityIndicator size={SIZE.xxl} color={colors.accent} />
+      ) : null}
     </PressableButton>
   );
 };

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

@@ -18,6 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import notifee from "@notifee/react-native";
+
 import dayjs from "dayjs";
 import React from "react";
 import { Linking, Platform } from "react-native";
@@ -178,17 +179,15 @@ export const settingsGroups: SettingSection[] = [
             sections: [
               {
                 id: "enable-2fa",
-                name: "Enable two-factor authentication",
+                name: "Change primary two-factor authentication",
                 modifer: () => {
                   verifyUser("global", async () => {
                     MFASheet.present();
                   });
                 },
                 useHook: () => useUserStore((state) => state.user),
-                hidden: (user) => {
-                  return !!(user as User)?.mfa?.isEnabled;
-                },
-                description: "Increased security for your account"
+                description:
+                  "Change your current two-factor authentication method"
               },
               {
                 id: "2fa-fallback",
@@ -240,23 +239,6 @@ export const settingsGroups: SettingSection[] = [
                 },
                 description:
                   "View and save recovery codes for to recover your account"
-              },
-              {
-                id: "disabled-2fa",
-                name: "Disable two-factor authentication",
-                modifer: () => {
-                  verifyUser("global", async () => {
-                    await db.mfa?.disable();
-                    const user = await db.user?.fetchUser();
-                    useUserStore.getState().setUser(user);
-                  });
-                },
-
-                useHook: () => useUserStore((state) => state.user),
-                hidden: (user) => {
-                  return !(user as User)?.mfa?.isEnabled;
-                },
-                description: "Decreased security for your account"
               }
             ]
           },
@@ -450,13 +432,13 @@ export const settingsGroups: SettingSection[] = [
   },
   {
     id: "customize",
-    name: "Customize",
+    name: "Customization",
     sections: [
       {
         id: "personalization",
         type: "screen",
         name: "Theme",
-        description: "Change app look and feel",
+        description: "Change app look and feel with color themes",
         icon: "shape",
         sections: [
           {
@@ -514,7 +496,7 @@ export const settingsGroups: SettingSection[] = [
         id: "behaviour",
         type: "screen",
         name: "Behaviour",
-        description: "Change app homepage",
+        description: "Change how the app behaves in different situations",
         sections: [
           {
             id: "default-home",
@@ -523,6 +505,20 @@ export const settingsGroups: SettingSection[] = [
             description: "Default screen to open on app startup",
             component: "homeselector"
           },
+          {
+            id: "date-format",
+            name: "Date format",
+            description: "Set the format for date used across the app",
+            type: "component",
+            component: "date-format-selector"
+          },
+          {
+            id: "time-format",
+            name: "Time format",
+            description: "Set the format for time used across the app",
+            type: "component",
+            component: "time-format-selector"
+          },
           {
             id: "clear-trash-interval",
             type: "component",
@@ -530,6 +526,79 @@ export const settingsGroups: SettingSection[] = [
             description:
               "Select the duration after which trash items will be cleared",
             component: "trash-interval-selector"
+          },
+          {
+            id: "default-notebook",
+            name: "Clear default notebook/topic",
+            description: "Clear the default notebook/topic for new notes",
+            modifer: () => {
+              db.settings?.setDefaultNotebook(undefined);
+            },
+            hidden: () => !db.settings?.getDefaultNotebook()
+          }
+        ]
+      },
+      {
+        id: "editor",
+        name: "Editor",
+        type: "screen",
+        icon: "note-edit-outline",
+        description: "Customize the editor to fit your needs",
+        sections: [
+          {
+            id: "configure-toolbar",
+            type: "screen",
+            name: "Configure toolbar",
+            description: "Make the toolbar adaptable to your needs.",
+            component: "configuretoolbar"
+          },
+          {
+            id: "reset-toolbar",
+            name: "Reset toolbar",
+            description: "Reset toolbar configuration to default",
+            modifer: () => {
+              useDragState.getState().setPreset("default");
+            }
+          },
+          {
+            id: "double-spaced-lines",
+            name: "Use double spaced lines",
+            description:
+              "New lines will be double spaced (old ones won't be affected).",
+            type: "switch",
+            property: "doubleSpacedLines",
+            icon: "format-line-spacing",
+            onChange: () => {
+              ToastEvent.show({
+                heading: "Line spacing changed",
+                type: "success"
+              });
+            }
+          },
+          {
+            id: "default-font-size",
+            name: "Default font size",
+            description: "Set the default font size in editor",
+            type: "input-selector",
+            minInputValue: 8,
+            icon: "format-size",
+            property: "defaultFontSize"
+          },
+          {
+            id: "default-font-family",
+            name: "Default font family",
+            description: "Set the default font family in editor",
+            type: "component",
+            icon: "format-font",
+            property: "defaultFontFamily",
+            component: "font-selector"
+          },
+          {
+            id: "title-format",
+            name: "Title format",
+            component: "title-format",
+            description: "Customize the formatting for new note title",
+            type: "component"
           }
         ]
       }
@@ -548,6 +617,26 @@ export const settingsGroups: SettingSection[] = [
           "Contribute towards a better Notesnook. All tracking information is anonymous.",
         property: "telemetry"
       },
+      {
+        id: "marketing-emails",
+        type: "switch",
+        name: "Marketing emails",
+        description:
+          "We will send you occasional promotional offers & product updates on your email (sent once every month).",
+        modifer: async () => {
+          try {
+            await db.user?.changeMarketingConsent(
+              !useUserStore.getState().user?.marketingConsent
+            );
+            useUserStore.getState().setUser(await db.user?.fetchUser());
+          } catch (e) {
+            ToastEvent.error(e as Error);
+          }
+        },
+        getter: (current: any) => current?.marketingConsent,
+        useHook: () => useUserStore((state) => state.user),
+        hidden: (current) => !current
+      },
       {
         id: "cors-bypass",
         type: "input",
@@ -928,42 +1017,6 @@ export const settingsGroups: SettingSection[] = [
       }
     ]
   },
-  {
-    id: "editor",
-    name: "Editor",
-    sections: [
-      {
-        id: "configure-toolbar",
-        type: "screen",
-        name: "Configure toolbar",
-        description: "Make the toolbar adaptable to your needs.",
-        component: "configuretoolbar"
-      },
-      {
-        id: "reset-toolbar",
-        name: "Reset toolbar",
-        description: "Reset toolbar configuration to default",
-        modifer: () => {
-          useDragState.getState().setPreset("default");
-        }
-      },
-      {
-        id: "double-spaced-lines",
-        name: "Use double spaced lines",
-        description:
-          "New lines will be double spaced (old ones won't be affected).",
-        type: "switch",
-        property: "doubleSpacedLines",
-        icon: "format-line-spacing",
-        onChange: () => {
-          ToastEvent.show({
-            heading: "Line spacing changed",
-            type: "success"
-          });
-        }
-      }
-    ]
-  },
   {
     id: "help-support",
     name: "Help and support",

apps/mobile/app/screens/settings/title-format.tsx

@@ -0,0 +1,63 @@
+/*
+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 { useRef, useState } from "react";
+import { db } from "../../common/database";
+import Input from "../../components/ui/input";
+import React from "react";
+import { TextInput } from "react-native";
+import Paragraph from "../../components/ui/typography/paragraph";
+import { useThemeStore } from "../../stores/use-theme-store";
+import { SIZE } from "../../utils/size";
+
+export const TitleFormat = () => {
+  const [titleFormat] = useState(db.settings?.getTitleFormat());
+  const inputRef = useRef<TextInput>();
+  const colors = useThemeStore((state) => state.colors);
+
+  return (
+    <>
+      <Input
+        onSubmit={(e) => {
+          db.settings?.setTitleFormat(e.nativeEvent.text);
+        }}
+        onChangeText={(text) => {
+          db.settings?.setTitleFormat(text);
+        }}
+        containerStyle={{ marginTop: 6 }}
+        onLayout={() => {
+          inputRef?.current?.setNativeProps({
+            text: titleFormat
+          });
+        }}
+        defaultValue={titleFormat}
+      />
+
+      <Paragraph style={{ marginTop: 2 }} color={colors.icon} size={SIZE.xs}>
+        Use the following key to format the title:{"\n"}
+        {"\n"}
+        $date$: Current date.{"\n"}
+        $time$: Current time.{"\n"}
+        $timestamp$: Full date and time without any spaces or other symbols.
+        (e.g 202305261253).{"\n"}
+        $count$: Number of notes + 1.{"\n"}
+        $headline$: Use starting line of the note as title.{"\n"}
+      </Paragraph>
+    </>
+  );
+};

apps/mobile/app/screens/settings/types.ts

@@ -22,7 +22,14 @@ import { Settings } from "../../stores/use-setting-store";
 
 export type SettingSection = {
   id: string;
-  type?: "screen" | "switch" | "component" | "danger" | "input";
+  type?:
+    | "screen"
+    | "switch"
+    | "component"
+    | "danger"
+    | "input"
+    | "input-selector"
+    | "dropdown-selector";
   name?: string | ((current?: unknown) => string);
   description?: string | ((current: unknown) => string);
   icon?: string;
@@ -35,6 +42,8 @@ export type SettingSection = {
   hidden?: (current: unknown) => boolean;
   onChange?: (property: boolean) => void;
   inputProperties?: TextInput["props"];
+  options?: any[];
+  minInputValue?: number;
 };
 
 export type SettingsGroup = {

apps/mobile/app/screens/settings/user-section.js

@@ -109,7 +109,7 @@ const SettingsUserSection = ({ item }) => {
                         flexGrow: 1
                       }}
                     >
-                      <Heading color={colors.accent} size={SIZE.xs + 1}>
+                      <Heading color={colors.accent} size={SIZE.xs}>
                         {SUBSCRIPTION_STATUS_STRINGS[
                           user.subscription?.type
                         ]?.toUpperCase() || "Basic"}

apps/mobile/app/services/app-review.ts

@@ -0,0 +1,47 @@
+/*
+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 InAppReview from "react-native-in-app-review";
+import { DatabaseLogger } from "../common/database";
+import { MMKV } from "../common/database/mmkv";
+import Config from "react-native-config";
+import { useUserStore } from "../stores/use-user-store";
+
+const day_ms = 86400000;
+export function requestInAppReview() {
+  if (Config.GITHUB_RELEASE === "true") return;
+
+  const time = MMKV.getMap<{ timestamp: number }>("requestInAppReview");
+
+  if (time?.timestamp && time?.timestamp + day_ms * 7 > Date.now()) {
+    return;
+  }
+
+  if (InAppReview.isAvailable()) {
+    useUserStore.getState().setShouldBlockVerifyUser(true);
+
+    InAppReview.RequestInAppReview()
+      .then(() => {})
+      .catch((error) => {
+        DatabaseLogger.error(error);
+      });
+    MMKV.setMap("requestInAppReview", { timestamp: Date.now() });
+  } else {
+    DatabaseLogger.error(new Error("In App Review not available"));
+  }
+}