mobile: release 3.3.18

mobile: resolve undefined id issue in subscription product items

.github/pull_request_template.md

@@ -0,0 +1,30 @@
+## Description
+<!-- Add a detailed summary of what this feature/bugfix does -->
+
+## Type of Change
+- [ ] Bug fix
+- [ ] Feature
+
+## Visuals
+- [ ] Attached relevant screenshots / screen recording / GIF
+- [ ] N/A (not a feature or no UI changes)
+
+## Testing
+- [ ] Ran all E2E tests
+- [ ] Ran all integration tests
+- [ ] Added/updated tests for this change (if needed)
+- [ ] N/A (tests not needed — explanation provided below)
+
+### If tests were not added, explain why
+<!-- explanation -->
+
+## Platform
+<!-- Describe which platforms this PR is related to -->
+
+- [ ] Web
+- [ ] Mobile
+- [ ] Desktop
+
+## Sign-off
+- [ ] QA passed
+- [ ] UI/UX passed

.github/workflows/android.publish.internal.yml

@@ -113,7 +113,7 @@ jobs:
           keyStorePassword: ${{ secrets.KEY_PASSWORD }}
           keyPassword: ${{ secrets.KEY_PASSWORD }}
         env:
-          BUILD_TOOLS_VERSION: "33.0.0"
+          BUILD_TOOLS_VERSION: "36.0.0"
 
       - name: Build apks for Github release
         run: yarn release:android
@@ -128,7 +128,7 @@ jobs:
           keyStorePassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
           keyPassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
         env:
-          BUILD_TOOLS_VERSION: "33.0.0"
+          BUILD_TOOLS_VERSION: "36.0.0"
 
       - name: Rename apk files
         run: |

.github/workflows/android.publish.yml

@@ -113,7 +113,7 @@ jobs:
           keyStorePassword: ${{ secrets.KEY_PASSWORD }}
           keyPassword: ${{ secrets.KEY_PASSWORD }}
         env:
-          BUILD_TOOLS_VERSION: "33.0.0"
+          BUILD_TOOLS_VERSION: "36.0.0"
 
       - name: Build apks for Github release
         run: yarn release:android
@@ -128,7 +128,7 @@ jobs:
           keyStorePassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
           keyPassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
         env:
-          BUILD_TOOLS_VERSION: "33.0.0"
+          BUILD_TOOLS_VERSION: "36.0.0"
 
       - name: Rename apk files
         run: |

.github/workflows/themes.publish.yml

@@ -0,0 +1,78 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+# GitHub recommends pinning actions to a commit SHA.
+# To get a newer version, you will need to update the SHA.
+# You can also reference a tag or branch, but the action may change without warning.
+
+name: Publish @notesnook/themes-server
+
+on: workflow_dispatch
+
+jobs:
+  push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-22.04
+    permissions:
+      packages: write
+      contents: read
+      attestations: write
+      id-token: write
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+
+      - name: Collect package metadata
+        id: package_metadata
+        working-directory: ./servers/themes
+        run: |
+          echo ::set-output name=app_version::$(cat package.json | jq -r .version)
+
+      # Setup Buildx
+      - name: Docker Setup Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          platforms: linux/amd64,linux/arm64
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+          ecr: auto
+          logout: true
+
+      # Pull previous image from docker hub to use it as cache to improve the image build time.
+      - name: docker pull cache image
+        continue-on-error: true
+        run: docker pull streetwriters/themes-server:latest
+
+      # Setup QEMU
+      # - name: Set up QEMU
+      #   uses: docker/setup-qemu-action@v2
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: streetwriters/themes-server
+
+      - name: Build and push Docker image
+        id: push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: servers/themes/Dockerfile
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: streetwriters/themes-server:${{ steps.package_metadata.outputs.app_version }},streetwriters/themes-server:latest
+          cache-from: streetwriters/themes-server:latest
+
+      - name: Generate artifact attestation
+        uses: actions/attest-build-provenance@v1
+        with:
+          subject-name: index.docker.io/streetwriters/themes-server
+          subject-digest: ${{ steps.push.outputs.digest }}
+          push-to-registry: true

apps/desktop/package.json

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

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

@@ -252,6 +252,7 @@ export const osIntegrationRouter = t.router({
           if (menuItem) menu.append(menuItem);
         }
         if (menu.items.length > 0) menu.popup();
+        menu.on("menu-will-close", () => emit.next([]));
         return () => {
           menu.removeAllListeners();
           menu.closePopup();

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

@@ -113,7 +113,8 @@ export class SQLite {
         };
       }
     } catch (e) {
-      if (e instanceof Error) e.message += ` (query: ${sql})`;
+      if (e instanceof Error)
+        throw rewriteError(e, `${e.message} (query: ${sql})`);
       throw e;
     } finally {
       // Since SQLite 3.48.0 (SQLite3MC v2.0.2) it's not possible to load fts5
@@ -212,3 +213,11 @@ function getExtensionPath(extensionName: string, entryPoint: string) {
   }
   return loadablePath;
 }
+
+function rewriteError(e: Error, message: string) {
+  const error = new Error(message);
+  error.stack = e.stack;
+  error.name = e.name;
+  error.cause = e.cause;
+  return error;
+}

apps/desktop/src/api/window.ts

@@ -34,6 +34,17 @@ export const windowRouter = t.router({
   }),
   maximized: t.procedure.query(() => globalThis.window?.isMaximized()),
   fullscreen: t.procedure.query(() => globalThis.window?.isFullScreen()),
+  onClose: t.procedure.subscription(() => {
+    return observable<void>((emit) => {
+      function listener() {
+        emit.next();
+      }
+      globalThis.window?.addListener("close", listener);
+      return () => {
+        globalThis.window?.removeListener("close", listener);
+      };
+    });
+  }),
   onWindowStateChanged: t.procedure.subscription(() => {
     return observable<{ maximized: boolean; fullscreen: boolean }>((emit) => {
       function listener() {

apps/desktop/src/main.ts

@@ -52,6 +52,9 @@ locale.then(({ default: locale }) => {
 });
 setI18nGlobal(i18n);
 
+const appHostnames = isDevelopment()
+  ? ["localhost", "127.0.0.1"]
+  : ["app.notesnook.com"];
 // only run a single instance
 if (!MAC_APP_STORE && !app.requestSingleInstanceLock()) {
   console.log("Another instance is already running!");
@@ -173,6 +176,19 @@ async function createWindow() {
     return { action: "deny" };
   });
 
+  mainWindow.webContents.on("will-navigate", (event, url) => {
+    try {
+      const parsedUrl = new URL(url);
+      if (!appHostnames.includes(parsedUrl.hostname)) {
+        event.preventDefault();
+        shell.openExternal(url);
+      }
+    } catch (e) {
+      console.error("will-navigate: failed to parse URL", url, e);
+      event.preventDefault();
+    }
+  });
+
   nativeTheme.on("updated", () => {
     setupTray();
     setupJumplist();

apps/desktop/src/utils/autolaunch.ts

@@ -39,7 +39,7 @@ const LINUX_AUTOSTART_DIRECTORY_PATH = path.join(
   "autostart"
 );
 
-const STARTUP_ARGS = ["--hidden"];
+const HIDDEN_ARG = "--hidden";
 
 export class AutoLaunch {
   static enable(hidden: boolean) {
@@ -54,13 +54,13 @@ export class AutoLaunch {
       );
     } else {
       const loginItemSettings = app.getLoginItemSettings({
-        args: STARTUP_ARGS
+        args: hidden ? [HIDDEN_ARG] : undefined
       });
       if (loginItemSettings.openAtLogin) return;
       app.setLoginItemSettings({
         openAtLogin: true,
         openAsHidden: hidden,
-        args: STARTUP_ARGS
+        args: hidden ? [HIDDEN_ARG] : undefined
       });
     }
   }

apps/desktop/src/utils/protocol.ts

@@ -62,7 +62,17 @@ function registerProtocol() {
         headers: { "Content-Type": extensionToMimeType[fileExtension] }
       });
     } else {
-      return net.fetch(request, { bypassCustomProtocolHandlers: true });
+      const requestHeaders = new Headers(request.headers);
+      if (!requestHeaders.has("referer"))
+        requestHeaders.set("referer", PROTOCOL_URL);
+      return await net.fetch(
+        new Request(request, {
+          headers: requestHeaders
+        }),
+        {
+          bypassCustomProtocolHandlers: true
+        }
+      );
     }
   });
   console.info(`${SCHEME} protocol inteception "successful"`);

apps/mobile/README.md

@@ -3,10 +3,8 @@
 </p>
 
 <h1 align="center">Notesnook Mobile</h1>
-<h3 align="center">The mobile app is built using React Native, Typescript & Javascript for both iOS & Android.</h3>
-<p align="center">
-<a href="#developer-guide">Developer guide</a> | <a href="#build-instructions">How to build?</a>
-</p>
+<h3 align="center">The mobile app is built with React Native for both iOS and Android.</h3>
+<p align="center"><a href="#build-instructions">Build instructions</a> | <a href="#developer-guide">Developer guide</a> | <a href="#running-e2e-tests-detox">E2E tests</a></p>
 
 <p align="center">
     <a href="https://play.google.com/store/apps/details?id=com.streetwriters.notesnook">
@@ -25,21 +23,21 @@
 
 Requirements:
 
-1. [Node.js](https://nodejs.org/en/download/)
+1. [Node.js](https://nodejs.org/en/download/) 20+ (the repo is pinned to Node `22.20.0` via Volta)
 2. [git](https://git-scm.com/downloads)
-3. NPM (not yarn or pnpm)
-4. [React Native](https://reactnative.dev/docs/environment-setup)
+3. `npm`
+4. [React Native environment setup](https://reactnative.dev/docs/set-up-your-environment)
 
-To run the app locally, you will need to setup React Native on your system:
+To run the app locally, first complete React Native native tooling setup:
 
-1. Open the official [environment setup guide here](https://reactnative.dev/docs/environment-setup)
+1. Open [React Native environment setup](https://reactnative.dev/docs/set-up-your-environment)
 2. Select `React Native CLI Quickstart`
-3. Select your OS & the platform to run the app on (iOS or Android)
+3. Select your OS and target platform(s): iOS and/or Android
 4. Follow the steps listed.
 
-> Please keep in mind that **Expo is not supported**.
+> Expo is not used in this project.
 
-Once you have completed the setup, the first step is to `clone` the monorepo:
+Clone the monorepo:
 
 ```bash
 git clone https://github.com/streetwriters/notesnook.git
@@ -48,26 +46,27 @@ git clone https://github.com/streetwriters/notesnook.git
 cd notesnook
 ```
 
-Once you are inside the `./notesnook` directory, run the preparation step:
+Install dependencies and bootstrap the mobile workspace:
 
 ```bash
 # this might take a while to complete
 npm install
+npm run bootstrap -- --scope=mobile
 ```
 
 ### Running the app on Android
 
-[Setup an Android emulator from Android Studio](https://developer.android.com/studio/run/managing-avds) if you haven't already, and then run the following command to start the app in the Emulator:
+[Set up an Android emulator from Android Studio](https://developer.android.com/studio/run/managing-avds) (or connect a physical device), then run:
 
 ```bash
 npm run start:android
 ```
 
-If you want to run the app on your phone, make sure to [enable USB debugging](https://developer.android.com/studio/debug/dev-options).
+If you are using a physical device, enable [USB debugging](https://developer.android.com/studio/debug/dev-options).
 
 ### Running the app on iOS
 
-To run the app on iOS:
+Install CocoaPods dependencies first, then run the iOS app:
 
 ```bash
 # this might take a while to complete
@@ -76,90 +75,87 @@ npm run prepare:ios
 npm run start:ios
 ```
 
+### Useful development commands
+
+```bash
+# start Metro only
+npm run start:metro
+
+# start Re.Pack bundler
+npm run start:repack
+```
+
 ## Developer guide
 
-> This project is in a transition state between Javascript & Typescript. We are gradually porting everything over to Typescript, so if you can help with that, it'd be great!
+> The mobile app is a mixed TypeScript/JavaScript codebase.
 
 ### The tech stack
 
 We try to keep the stack as lean as possible:
 
-1. React Native
-2. Typescript/Javascript
-3. Zustand: State management
-4. Detox: Runs all our e2e tests
-5. React Native MMKV: Database & persistence
-6. libsodium: Encryption
+1. React Native `0.82`
+2. React `19`
+3. TypeScript + JavaScript
+4. Zustand (state management)
+5. Detox (end-to-end testing)
+6. libsodium (encryption)
 
 ### Project structure
 
-The app codebase is distributed over two primary directories. `native/` and `app/`.
+Top-level directories in `apps/mobile/`:
 
-- `native/`: Includes `android/` and `ios/` folders and everything related to react native core functionality like bundling, development, and packaging. Any react-native dependency with native code, i.e., android & ios folders, is installed here.
+- `app/`: Main React Native app source (`components`, `common`, `hooks`, `navigation`, `screens`, `services`, `stores`, `utils`, etc.)
+- `android/`: Android native project
+- `ios/`: iOS native project
+- `e2e/`: Detox test suite and config
+- `patches/`: `patch-package` patches
+- `scripts/`: Mobile-specific scripts
 
-- `app/`: Includes all the app code other than the native part. All JS-only dependencies are installed here.
-  - `components/`: Each component serves a specific purpose in the app UI. For example, the `Paragraph` component is used to render paragraphs in the app, and a `Header` component is used to render a `header` on all screens.
-  - `common/`: Features that are integral to the app's functionality. For example, the notesnook core is initialized here.
-  - `hooks/`: Hooks for different app logic
-  - `navigation/`: Includes app navigation-specific code. Here the app navigation, editor & side menu are rendered side by side in fluid tabs.
-  - `screens`: Navigator screens.
-  - `services`: Parts of code that do a specific function. For example, the `sync` service runs Sync from anywhere in the app.
-  - `stores`: We use `zustand` for global state management in the app. Multiple stores provide the state for different parts of the app.
-  - `utils`: General purpose stuff such as constant values, utility functions, etc.
+## Running E2E tests (Detox)
 
-There are several other folders at the root:
+Detox device defaults in this repo:
 
-- `share/`: Code for the iOS Share Extension and Android widget.
-- `e2e/`: Detox End to end tests
-- `patches/`: Patches for various react native dependencies.
-
-### Running the tests
-
-When you are done making the required changes, you must run the tests to ensure you didn't break anything. We use Detox as the testing framework & the tests can be started as follows:
+- Android emulator: `Pixel_5_API_36`
+- iOS simulator: `iPhone 17 Pro Max`
 
 ### Android
 
-To run the tests on Android, you will need to create an emulator device on your system:
+Build and run Android Detox tests:
 
-```
-$ANDROID_HOME/tools/bin/avdmanager create avd -n Pixel_5_API_31 -d pixel --package "system-images;android-31;default;x86_64"
-```
-
-If you face problems, follow the detailed guide in [Detox documentation](https://wix.github.io/Detox/docs/introduction/android-dev-env). Keep the emulator name set to `Pixel_5_API_31`.
-
-Once you have created an emulator device, build the Android apks:
-
-```
+```bash
 npm run build:android
-```
-
-Finally, run the tests:
-
-```
 npm run test:android
 ```
 
+For debug configuration:
+
+```bash
+npm run build:android:debug
+npm run start:metro
+npm run test:android:debug
+```
+
 ### iOS
 
-To run e2e tests on the iOS simulator, you must be on a Mac with XCode installed.
-
-First, install [AppleSimulatorUtils](https://github.com/wix/AppleSimulatorUtils):
+Build and run iOS Detox tests:
 
+```bash
+npm run build:ios
+npm run test:ios
 ```
+
+If simulator tooling is missing, install [AppleSimulatorUtils](https://github.com/wix/AppleSimulatorUtils):
+
+```bash
 brew tap wix/brew
 brew install applesimutils
 ```
 
-Now build the iOS app for testing:
+## Release commands
 
-```
-npm run build:ios
-```
-
-Finally, run the tests:
+Android release helpers:
 
+```bash
+npm run release:android
+npm run release:android:bundle
 ```
-npm run test:ios
-```
-
-All tests on iOS are configured to run on `iPhone 8` simulator.

apps/mobile/android/app/build.gradle

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

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

@@ -39,28 +39,32 @@ public class BootTaskService extends HeadlessJsTaskService {
 
     @Override
     public int onStartCommand(Intent intent, int flags, int startId) {
-        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
-            NotificationChannel channel = new NotificationChannel("com.streetwriters.notesnook",
-                    "Default",
-                    NotificationManager.IMPORTANCE_DEFAULT);
+        try {
+            if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
+                NotificationChannel channel = new NotificationChannel("com.streetwriters.notesnook",
+                        "Default",
+                        NotificationManager.IMPORTANCE_DEFAULT);
+
+                ((NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE)).createNotificationChannel(channel);
+                notification = new NotificationCompat.Builder(this, channel.getId())
+                        .setContentTitle("Sync on boot")
+                        .setContentText("")
+                        .setSmallIcon(R.drawable.ic_stat_name)
+                        .build();
+                if (android.os.Build.VERSION.SDK_INT >= 34) {
+                    this.startForeground(
+                            1,
+                            notification,
+                            ServiceInfo.FOREGROUND_SERVICE_TYPE_SPECIAL_USE);
+                } else {
+                    this.startForeground(
+                            1,
+                            notification);
+                }
 
-            ((NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE)).createNotificationChannel(channel);
-            notification = new NotificationCompat.Builder(this, channel.getId())
-                    .setContentTitle("Sync on boot")
-                    .setContentText("")
-                    .setSmallIcon(R.drawable.ic_stat_name)
-                    .build();
-            if (android.os.Build.VERSION.SDK_INT >= 34) {
-                this.startForeground(
-                        1,
-                        notification,
-                        ServiceInfo.FOREGROUND_SERVICE_TYPE_SPECIAL_USE);
-            } else {
-                this.startForeground(
-                        1,
-                        notification);
             }
-
+        } catch (Exception ignored) {
+            stopSelf(startId);
         }
 
         return super.onStartCommand(intent, flags, startId);

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

@@ -6,7 +6,14 @@ import android.content.ComponentName;
 import android.content.Context;
 import android.content.Intent;
 import android.content.SharedPreferences;
+import android.content.pm.ShortcutInfo;
+import android.content.pm.ShortcutManager;
+import android.graphics.Bitmap;
+import android.graphics.Canvas;
 import android.graphics.Color;
+import android.graphics.Paint;
+import android.graphics.RectF;
+import android.graphics.drawable.Icon;
 import android.os.Build;
 import android.os.Bundle;
 import android.provider.Settings;
@@ -29,6 +36,7 @@ import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
 import java.util.Objects;
+import java.util.Set;
 
 
 public class RCTNNativeModule extends ReactContextBaseJavaModule {
@@ -237,6 +245,221 @@ public class RCTNNativeModule extends ReactContextBaseJavaModule {
         }
     }
 
+    @ReactMethod
+    public void addShortcut(final String id, final String type, final String title, final String description, final String color, Promise promise) {
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
+            promise.reject("UNSUPPORTED", "Pinned launcher shortcuts require Android 8.0 or higher");
+            return;
+        }
 
+        try {
+            ShortcutManager shortcutManager = mContext.getSystemService(ShortcutManager.class);
+            if (shortcutManager == null) {
+                promise.reject("ERROR", "ShortcutManager not available");
+                return;
+            }
+
+            String uri = "https://app.notesnook.com/open_" + type + "?id=" + id;
+            Intent intent = new Intent(Intent.ACTION_VIEW, android.net.Uri.parse(uri));
+            intent.setPackage(mContext.getPackageName());
+
+            Icon icon = createLetterIcon(type, title, color);
+            ShortcutInfo shortcut = new ShortcutInfo.Builder(mContext, id)
+                    .setShortLabel(title)
+                    .setLongLabel(description != null && !description.isEmpty() ? description : title)
+                    .setIcon(icon)
+                    .setCategories(Set.of(type))
+                    .setIntent(intent)
+                    .build();
+
+            shortcutManager.requestPinShortcut(shortcut, null);
+            promise.resolve(true);
+        } catch (Exception e) {
+            promise.reject("ERROR", e.getMessage());
+        }
+    }
+
+    @ReactMethod
+    public void removeShortcut(final String id, Promise promise) {
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
+            promise.reject("UNSUPPORTED", "Pinned launcher shortcuts require Android 8.0 or higher");
+            return;
+        }
+
+        try {
+            ShortcutManager shortcutManager = mContext.getSystemService(ShortcutManager.class);
+            if (shortcutManager == null) {
+                promise.reject("ERROR", "ShortcutManager not available");
+                return;
+            }
+
+            shortcutManager.disableShortcuts(java.util.Collections.singletonList(id));
+            promise.resolve(true);
+        } catch (Exception e) {
+            promise.reject("ERROR", e.getMessage());
+        }
+    }
+
+    @ReactMethod
+    public void updateShortcut(final String id, final String type, final String title, final String description,final String color, Promise promise) {
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
+            promise.reject("UNSUPPORTED", "Pinned launcher shortcuts require Android 8.0 or higher");
+            return;
+        }
+
+        try {
+            ShortcutManager shortcutManager = mContext.getSystemService(ShortcutManager.class);
+            if (shortcutManager == null) {
+                promise.reject("ERROR", "ShortcutManager not available");
+                return;
+            }
+
+            // Get existing shortcut to preserve icon and intent
+            List<ShortcutInfo> shortcuts = shortcutManager.getPinnedShortcuts();
+            ShortcutInfo existingShortcut = null;
+            for (ShortcutInfo s : shortcuts) {
+                if (s.getId().equals(id)) {
+                    existingShortcut = s;
+                    break;
+                }
+            }
+
+            if (existingShortcut == null) {
+                return;
+            }
+            Icon icon = createLetterIcon(type, title, color);
+            ShortcutInfo updatedShortcut = new ShortcutInfo.Builder(mContext, id)
+                    .setShortLabel(title)
+                    .setIcon(icon)
+                    .setLongLabel(description != null && !description.isEmpty() ? description : title)
+                    .setIntent(existingShortcut.getIntent())
+                    .build();
+
+            shortcutManager.updateShortcuts(java.util.Collections.singletonList(updatedShortcut));
+            promise.resolve(true);
+        } catch (Exception e) {
+            promise.reject("ERROR", e.getMessage());
+        }
+    }
+
+    @ReactMethod
+    public void removeAllShortcuts(Promise promise) {
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
+            promise.reject("UNSUPPORTED", "Pinned launcher shortcuts require Android 8.0 or higher");
+            return;
+        }
+
+        try {
+            ShortcutManager shortcutManager = mContext.getSystemService(ShortcutManager.class);
+            if (shortcutManager == null) {
+                promise.reject("ERROR", "ShortcutManager not available");
+                return;
+            }
+
+            List<ShortcutInfo> pinnedShortcuts = shortcutManager.getPinnedShortcuts();
+            if (!pinnedShortcuts.isEmpty()) {
+                List<String> ids = new ArrayList<>();
+                for (ShortcutInfo shortcut : pinnedShortcuts) {
+                    ids.add(shortcut.getId());
+                }
+                shortcutManager.disableShortcuts(ids);
+            }
+            promise.resolve(true);
+        } catch (Exception e) {
+            promise.reject("ERROR", e.getMessage());
+        }
+    }
+
+    @ReactMethod
+    public void getAllShortcuts(Promise promise) {
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
+            return;
+        }
+        ShortcutManager shortcutManager = mContext.getSystemService(ShortcutManager.class);
+        WritableArray shortcuts = Arguments.createArray();
+        List<ShortcutInfo> infos = shortcutManager.getPinnedShortcuts();
+
+        for (ShortcutInfo info: infos) {
+            WritableMap data = Arguments.createMap();
+            data.putString("id", info.getId());
+            if (info.getShortLabel() != null) {
+                data.putString("title", info.getShortLabel().toString());
+            }
+
+            if (info.getLongLabel() != null) {
+                data.putString("description", info.getLongLabel().toString());
+            }
+
+
+            if (!Objects.requireNonNull(info.getCategories()).isEmpty()) {
+                if (info.getCategories().contains("note")) {
+                    data.putString("type", "note");
+                } else if (info.getCategories().contains("notebook")) {
+                    data.putString("type", "notebook");
+                } else if (info.getCategories().contains("tag")) {
+                    data.putString("type", "tag");
+                } else if (info.getCategories().contains("color")) {
+                    data.putString("type", "color");
+                }
+            }
+            shortcuts.pushMap(data);
+        }
+        promise.resolve(shortcuts);
+    }
+
+    private Icon createLetterIcon(String type, String title, String colorCode) {
+
+        String letter = type.contains("tag") ? "#" : title != null && !title.isEmpty()
+                ? title.substring(0, 1).toUpperCase()
+                : "?";
+        int color = type.equals("color") ? Color.parseColor(colorCode) : getColorForLetter(letter);
+        
+        if (type.equals("notebook")) return Icon.createWithResource(mContext, R.drawable.ic_notebook);
+        // Use a larger canvas and fill it completely to avoid white borders from launcher masking.
+        int iconSize = 256;
+        Bitmap bitmap = Bitmap.createBitmap(iconSize, iconSize, Bitmap.Config.ARGB_8888);
+        Canvas canvas = new Canvas(bitmap);
+
+        if (type.equals("color")) {
+            Paint backgroundPaint = new Paint();
+            backgroundPaint.setColor(color);
+            backgroundPaint.setAntiAlias(true);
+            canvas.drawCircle(iconSize / 2, iconSize / 2, iconSize/2, backgroundPaint);
+        } else {
+            Paint textPaint = new Paint();
+            textPaint.setColor(color);
+            textPaint.setTextSize(130);
+            textPaint.setAntiAlias(true);
+            textPaint.setTextAlign(Paint.Align.CENTER);
+            textPaint.setTypeface(android.graphics.Typeface.create(android.graphics.Typeface.DEFAULT, android.graphics.Typeface.BOLD));
+
+            float x = iconSize / 2f;
+            float y = (iconSize / 2f) - ((textPaint.descent() + textPaint.ascent()) / 2f);
+
+            canvas.drawText(letter, x, y, textPaint);
+        }
+
+        return Icon.createWithBitmap(bitmap);
+    }
+
+    private int getColorForLetter(String letter) {
+        int[] colors = {
+            0xFF1976D2, // Blue
+            0xFFD32F2F, // Red
+            0xFF388E3C, // Green
+            0xFFF57C00, // Orange
+            0xFF7B1FA2, // Purple
+            0xFF0097A7, // Cyan
+            0xFFC2185B, // Pink
+            0xFF455A64, // Blue Grey
+            0xFF6A1B9A, // Deep Purple
+            0xFF00796B, // Teal
+            0xFF512DA8, // Indigo
+            0xFF1565C0  // Dark Blue
+        };
+        
+        int hash = Math.abs(letter.hashCode());
+        return colors[hash % colors.length];
+    }
 
 }

apps/mobile/android/app/src/main/res/drawable-anydpi/ic_notebook.xml

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="#008837"
+    android:alpha="1">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M240,880Q207,880 183.5,856.5Q160,833 160,800L160,160Q160,127 183.5,103.5Q207,80 240,80L720,80Q753,80 776.5,103.5Q800,127 800,160L800,800Q800,833 776.5,856.5Q753,880 720,880L240,880ZM240,800L720,800Q720,800 720,800Q720,800 720,800L720,160Q720,160 720,160Q720,160 720,160L640,160L640,440L540,380L440,440L440,160L240,160Q240,160 240,160Q240,160 240,160L240,800Q240,800 240,800Q240,800 240,800ZM240,800Q240,800 240,800Q240,800 240,800L240,160Q240,160 240,160Q240,160 240,160L240,160Q240,160 240,160Q240,160 240,160L240,800Q240,800 240,800Q240,800 240,800ZM440,440L540,380L640,440L640,440L540,380L440,440Z"/>
+</vector>

apps/mobile/android/app/src/main/res/xml/network_security_config.xml

@@ -4,4 +4,10 @@
         <domain includeSubdomains="true">10.0.2.2</domain>
         <domain includeSubdomains="true">localhost</domain>
     </domain-config>
+    <base-config>
+        <trust-anchors>
+            <certificates src="system" />
+            <certificates src="user" />
+        </trust-anchors>
+    </base-config>
 </network-security-config>

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

@@ -1,6 +1,3 @@
-- Get an overview of your year with Notesnook with Wrapped 2025
-- Cell selection and column resizing in tables
-- Added support for uploading large files in background
-- Bug fixes and minor improvements
+- Minor bug fixes and performance improvements
 
 Thank you for using Notesnook!

apps/mobile/app.json

@@ -1,4 +1,4 @@
 {
   "name": "Notesnook",
   "displayName": "Notesnook"
-}
+}

apps/mobile/app/app.tsx

@@ -24,7 +24,7 @@ import {
   useThemeEngineStore
 } from "@notesnook/theme";
 import React, { useEffect } from "react";
-import { Appearance, I18nManager, StatusBar } from "react-native";
+import { Appearance, I18nManager, Linking, StatusBar } from "react-native";
 import "react-native-gesture-handler";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -43,7 +43,7 @@ import { changeSystemBarColors, useThemeStore } from "./stores/use-theme-store";
 import { useUserStore } from "./stores/use-user-store";
 import RNBootSplash from "react-native-bootsplash";
 import AppLocked from "./components/app-lock";
-
+import { useSettingStore } from "./stores/use-setting-store";
 I18nManager.allowRTL(false);
 I18nManager.forceRTL(false);
 I18nManager.swapLeftAndRightInRTL(false);
@@ -54,13 +54,18 @@ if (appLockEnabled || appLockMode !== "none") {
 RNBootSplash.hide({
   fade: true
 });
+Linking.getInitialURL().then((url) => {
+  useSettingStore.setState({
+    initialUrl: url
+  });
+});
 const App = (props: { configureMode: "note-preview" }) => {
   useAppEvents();
   //@ts-ignore
   globalThis["IS_MAIN_APP_RUNNING"] = true;
   useEffect(() => {
-    changeSystemBarColors();
     SettingsService.onFirstLaunch();
+    changeSystemBarColors();
     setTimeout(async () => {
       await Notifications.get();
       if (SettingsService.get().notifNotes) {
@@ -122,8 +127,12 @@ export const withTheme = (Element: (props: any) => JSX.Element) => {
           .then((theme) => {
             if (theme) {
               theme.colorScheme === "dark"
-                ? useThemeStore.getState().setDarkTheme(theme)
-                : useThemeStore.getState().setLightTheme(theme);
+                ? useThemeStore.setState({
+                    darkTheme: theme
+                  })
+                : useThemeStore.setState({
+                    lightTheme: theme
+                  });
             }
           })
           .catch(() => {
@@ -133,9 +142,9 @@ export const withTheme = (Element: (props: any) => JSX.Element) => {
 
       const listener = Appearance.addChangeListener(({ colorScheme }) => {
         if (colorScheme && SettingsService.getProperty("useSystemTheme")) {
-          useThemeStore
-            .getState()
-            .setColorScheme(colorScheme as "light" | "dark");
+          useThemeStore.setState({
+            colorScheme: colorScheme as "light" | "dark"
+          });
         }
       });
       return () => {

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

@@ -205,8 +205,9 @@ export async function getDatabaseKey(appLockPassword?: string) {
   }
 
   if (await Keychain.hasInternetCredentials("notesnook")) {
-    const userKeyCredentials =
-      await Keychain.getInternetCredentials("notesnook");
+    const userKeyCredentials = await Keychain.getInternetCredentials(
+      "notesnook"
+    );
 
     if (userKeyCredentials) {
       const userKeyCipher: Cipher = (await encrypt(

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

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

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

@@ -30,7 +30,8 @@ import {
   getCacheSize,
   hashBase64,
   readEncrypted,
-  writeEncryptedBase64
+  writeEncryptedBase64,
+  bulkDeleteFiles
 } from "./io";
 import { uploadFile } from "./upload";
 import {
@@ -61,5 +62,6 @@ export const FileStorage: IFileStorage = {
   exists,
   clearFileStorage,
   getUploadedFileSize,
-  bulkExists
+  bulkExists,
+  bulkDeleteFiles
 };

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

@@ -30,7 +30,14 @@ import RNFetchBlob from "react-native-blob-util";
 import { eSendEvent } from "../../services/event-manager";
 import { IOS_APPGROUPID } from "../../utils/constants";
 import { DatabaseLogger, db } from "../database";
-import { ABYTES, cacheDir, cacheDirOld, getRandomId } from "./utils";
+import {
+  ABYTES,
+  cacheDir,
+  cacheDirOld,
+  getRandomId,
+  isSuccessStatusCode,
+  parseS3Error
+} from "./utils";
 
 export async function readEncrypted<TOutputFormat extends DataFormat>(
   filename: string,
@@ -102,16 +109,41 @@ export async function writeEncryptedBase64(
   };
 }
 
+async function deleteLocalFile(filename: string) {
+  try {
+    await createCacheDir();
+    let path = cacheDir + `/${filename}`;
+    let exists = await RNFetchBlob.fs.exists(path);
+    if (Platform.OS === "ios" && !exists) {
+      const iosAppGroup =
+        Platform.OS === "ios"
+          ? await (RNFetchBlob.fs as any).pathForAppGroup(IOS_APPGROUPID)
+          : null;
+      const appGroupPath = `${iosAppGroup}/${filename}`;
+      if (await RNFetchBlob.fs.exists(appGroupPath)) {
+        RNFetchBlob.fs.unlink(appGroupPath).catch(() => {
+          /* empty */
+        });
+        return;
+      }
+    }
+    if (exists) {
+      RNFetchBlob.fs.unlink(path).catch(() => {
+        /* empty */
+      });
+    }
+  } catch (e) {
+    DatabaseLogger.error(e as Error, "deleteLocalFile");
+  }
+}
+
 export async function deleteFile(
   filename: string,
   requestOptions?: RequestOptions
 ): Promise<boolean> {
   await createCacheDir();
-  const localFilePath = cacheDir + `/${filename}`;
   if (!requestOptions) {
-    RNFetchBlob.fs.unlink(localFilePath).catch(() => {
-      /* empty */
-    });
+    deleteLocalFile(filename);
     return true;
   }
 
@@ -122,9 +154,7 @@ export async function deleteFile(
     const status = response.info().status;
     const ok = status >= 200 && status < 300;
     if (ok) {
-      RNFetchBlob.fs.unlink(localFilePath).catch(() => {
-        /* empty */
-      });
+      deleteLocalFile(filename);
     }
     return ok;
   } catch (e) {
@@ -135,6 +165,49 @@ export async function deleteFile(
   }
 }
 
+export async function bulkDeleteFiles(
+  filenames: string[],
+  requestOptions?: RequestOptions
+) {
+  await createCacheDir();
+  if (!requestOptions) {
+    filenames.forEach((filename) => {
+      deleteLocalFile(filename);
+    });
+    return true;
+  }
+
+  try {
+    const { url, headers } = requestOptions;
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        ...headers,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        names: filenames
+      })
+    });
+
+    const result = isSuccessStatusCode(response.status);
+    if (result) {
+      filenames.forEach((filename) => {
+        deleteLocalFile(filename);
+      });
+    } else {
+      throw await response.text();
+    }
+    return result;
+  } catch (e) {
+    DatabaseLogger.error(
+      typeof e === "string" ? parseS3Error(e as string) : (e as Error),
+      "Could not bulk delete files"
+    );
+    return false;
+  }
+}
+
 export async function clearFileStorage() {
   try {
     await createCacheDir();

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

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { isImage, RequestOptions } from "@notesnook/core";
+import { isImage, RequestOptions, hosts } from "@notesnook/core";
 import { PermissionsAndroid, Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import { ToastManager } from "../../services/event-manager";
@@ -32,6 +32,135 @@ import {
   getUploadedFileSize
 } from "./utils";
 import Upload from "@ammarahmed/react-native-upload";
+import { CloudUploader } from "react-native-nitro-cloud-uploader";
+import { useUserStore } from "../../stores/use-user-store";
+import { sleep } from "../../utils/time";
+
+// Upload constants
+const CHUNK_SIZE = 10 * 1024 * 1024; // 10 MB
+const MINIMUM_MULTIPART_FILE_SIZE = 25 * 1024 * 1024; // 25MB
+
+interface InitiateMultipartResponse {
+  uploadId: string;
+  parts: string[];
+  error?: string;
+}
+
+async function initiateMultipartUpload(
+  filename: string,
+  fileSize: number,
+  headers: Record<string, string>
+): Promise<InitiateMultipartResponse> {
+  const totalParts = Math.ceil(fileSize / CHUNK_SIZE);
+
+  const url = `${hosts.API_HOST}/s3/multipart?name=${filename}&parts=${totalParts}&uploadId=`;
+  const response = await fetch(url, { headers });
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to initiate multipart upload: ${response.statusText}`
+    );
+  }
+
+  const data = await response.json();
+
+  if (data.error) {
+    throw new Error(data.error);
+  }
+
+  if (!data.uploadId || !data.parts) {
+    throw new Error("Failed to initiate multipart upload: invalid response.");
+  }
+
+  DatabaseLogger.info(
+    `Initiated multipart upload for ${filename} with upload ID: ${data.uploadId}`
+  );
+
+  return data;
+}
+
+async function multipartUploadFile(
+  filename: string,
+  filePath: string,
+  fileSize: number,
+  requestOptions: RequestOptions,
+  cancelToken: { cancel: (reason?: string) => Promise<void> }
+): Promise<Response> {
+  const { headers } = requestOptions;
+
+  try {
+    const uploadData = await initiateMultipartUpload(
+      filename,
+      fileSize,
+      headers
+    );
+    const { uploadId, parts } = uploadData;
+
+    DatabaseLogger.info(
+      `Starting upload for ${filename} with ${parts.length} parts`
+    );
+
+    cancelToken.cancel = async () => {
+      useAttachmentStore.getState().remove(filename);
+      await CloudUploader.cancelUpload(uploadId);
+    };
+
+    CloudUploader.addListener("upload-progress", (event) => {
+      useAttachmentStore
+        .getState()
+        .setProgress(
+          event.bytesUploaded || 0,
+          event.totalBytes || fileSize,
+          filename,
+          0,
+          "upload"
+        );
+      DatabaseLogger.info(
+        `File upload progress: ${filename}, ${event.bytesUploaded}/${
+          event.totalBytes || fileSize
+        }, chunk: ${event.chunkIndex}, progress: ${event.progress}`
+      );
+    });
+    // CloudUploader handles chunking and uploading all parts internally
+    const result = await CloudUploader.startUpload(
+      filename,
+      filePath,
+      parts,
+      3, // maxParallel
+      true // showNotification
+    );
+
+    CloudUploader.removeListener("upload-progress");
+
+    if (!result.success) {
+      throw new Error("Failed to upload multipart file");
+    }
+
+    DatabaseLogger.info(
+      `Multipart upload completed for ${filename} with upload ID: ${uploadId}`
+    );
+
+    const response = await fetch(`${hosts.API_HOST}/s3/multipart`, {
+      method: "POST",
+      body: JSON.stringify({
+        Key: filename,
+        UploadId: uploadId,
+        PartETags: result.etags.map((etag, index) => ({
+          partNumber: index + 1,
+          etag: etag
+        }))
+      }),
+      headers: { ...headers, "Content-Type": "application/json" }
+    });
+
+    return response;
+  } catch (error) {
+    DatabaseLogger.error(error, "Multipart upload failed", { filename });
+    CloudUploader.removeListener("upload-progress");
+    useAttachmentStore.getState().remove(filename);
+    throw error;
+  }
+}
 
 export async function uploadFile(
   filename: string,
@@ -85,6 +214,9 @@ export async function uploadFile(
     );
 
     if (Platform.OS === "android") {
+      useUserStore.setState({
+        disableAppLockRequests: true
+      });
       const status = await PermissionsAndroid.request(
         "android.permission.POST_NOTIFICATIONS"
       );
@@ -94,74 +226,117 @@ export async function uploadFile(
           type: "info"
         });
       }
+      await sleep(500);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
     }
 
-    const upload = Upload.create({
-      customUploadId: filename,
-      path: Platform.OS === "ios" ? "file://" + fileInfo.path : fileInfo.path,
-      url: url,
-      method: "PUT",
-      headers: {
-        ...headers,
-        "content-type": "application/octet-stream"
-      },
-      appGroup: IOS_APPGROUPID,
-      notification: {
-        filename:
-          attachmentInfo && isImage(attachmentInfo?.mimeType)
-            ? "image"
-            : attachmentInfo?.filename || "file",
-        enabled: true,
-        enableRingTone: true,
-        autoClear: true
-      }
-    }).onChange((event) => {
-      switch (event.status) {
-        case "running":
-        case "pending":
-          useAttachmentStore
-            .getState()
-            .setProgress(
-              event.uploadedBytes || 0,
-              event.totalBytes || fileInfo.size,
-              filename,
-              0,
-              "upload"
-            );
-          DatabaseLogger.info(
-            `File upload progress: ${filename}, ${event.uploadedBytes}/${
-              event.totalBytes || fileInfo.size
-            }`
-          );
-          break;
-        case "completed":
-          console.log("Upload completed");
-          break;
-      }
-    });
-    const result = await upload.start();
-    cancelToken.cancel = async () => {
-      useAttachmentStore.getState().remove(filename);
-      upload.cancel();
-    };
+    let uploaded = false;
 
-    const status = result.responseCode || 0;
-    const uploaded = status >= 200 && status < 300;
+    // Use multipart upload for files larger than MINIMUM_MULTIPART_FILE_SIZE
+    if (fileInfo.size >= MINIMUM_MULTIPART_FILE_SIZE) {
+      DatabaseLogger.info(
+        `Using multipart upload for large file: ${filename} (${fileInfo.size} bytes)`
+      );
+      const result = await multipartUploadFile(
+        filename,
+        filePath,
+        fileInfo.size,
+        requestOptions,
+        cancelToken
+      );
+      const status = result.status || 0;
+      uploaded = status >= 200 && status < 300;
+
+      if (!uploaded) {
+        const fileInfo = await RNFetchBlob.fs.stat(filePath);
+        throw new Error(
+          `${status}, name: ${fileInfo.filename}, length: ${
+            fileInfo.size
+          }, info: ${JSON.stringify(await result.text())}`
+        );
+      }
+    } else {
+      // Use single-part upload for smaller files
+      DatabaseLogger.info(
+        `Using single-part upload for file: ${filename} (${fileInfo.size} bytes)`
+      );
+      const upload = Upload.create({
+        customUploadId: filename,
+        path: Platform.OS === "ios" ? "file://" + fileInfo.path : fileInfo.path,
+        url: url,
+        method: "PUT",
+        headers: {
+          ...headers,
+          "content-type": "application/octet-stream"
+        },
+        appGroup: IOS_APPGROUPID,
+        notification: {
+          filename:
+            attachmentInfo && isImage(attachmentInfo?.mimeType)
+              ? "image"
+              : attachmentInfo?.filename || "file",
+          enabled: true,
+          enableRingTone: true,
+          autoClear: true
+        }
+      }).onChange((event) => {
+        switch (event.status) {
+          case "running":
+          case "pending":
+            useAttachmentStore
+              .getState()
+              .setProgress(
+                event.uploadedBytes || 0,
+                event.totalBytes || fileInfo.size,
+                filename,
+                0,
+                "upload"
+              );
+            DatabaseLogger.info(
+              `File upload progress: ${filename}, ${event.uploadedBytes}/${
+                event.totalBytes || fileInfo.size
+              }`
+            );
+            break;
+          case "completed":
+            DatabaseLogger.info("Upload completed");
+            break;
+        }
+      });
+      const result = await upload.start();
+      cancelToken.cancel = async () => {
+        useAttachmentStore.getState().remove(filename);
+        upload.cancel();
+      };
+
+      const status = result.responseCode || 0;
+      uploaded = status >= 200 && status < 300;
+
+      if (!uploaded) {
+        const fileInfo = await RNFetchBlob.fs.stat(filePath);
+        throw new Error(
+          `${status}, name: ${fileInfo.filename}, length: ${
+            fileInfo.size
+          }, info: ${JSON.stringify(result.error)}`
+        );
+      }
+    }
 
     useAttachmentStore.getState().remove(filename);
 
-    if (!uploaded) {
-      const fileInfo = await RNFetchBlob.fs.stat(filePath);
-      throw new Error(
-        `${status}, name: ${fileInfo.filename}, length: ${
-          fileInfo.size
-        }, info: ${JSON.stringify(result.error)}`
+    if (uploaded) {
+      attachmentInfo = await db.attachments.attachment(filename);
+      if (!attachmentInfo) return false;
+      await checkUpload(
+        filename,
+        requestOptions.chunkSize,
+        attachmentInfo.size
       );
+      DatabaseLogger.info(`File upload status: ${filename}, success`);
     }
-    attachmentInfo = await db.attachments.attachment(filename);
-    if (!attachmentInfo) return false;
-    await checkUpload(filename, requestOptions.chunkSize, attachmentInfo.size);
-    DatabaseLogger.info(`File upload status: ${filename}, ${status}`);
+
     return uploaded;
   } catch (e) {
     useAttachmentStore.getState().remove(filename);

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

@@ -161,10 +161,10 @@ export async function checkUpload(
     size === 0
       ? `File size is 0.`
       : size === -1
-        ? `File verification check failed.`
-        : expectedSize !== decryptedLength
-          ? `File size mismatch. Expected ${size} bytes but got ${decryptedLength} bytes.`
-          : undefined;
+      ? `File verification check failed.`
+      : expectedSize !== decryptedLength
+      ? `File size mismatch. Expected ${size} bytes but got ${decryptedLength} bytes.`
+      : undefined;
   if (error) throw new Error(error);
 }
 
@@ -193,3 +193,7 @@ export async function checkAndCreateDir(path: string) {
 export const santizeUri = (uri: string) => {
   return Platform.OS === "ios" ? decodeURI(uri).replace("file:///", "/") : uri;
 };
+
+export function isSuccessStatusCode(statusCode: number) {
+  return statusCode >= 200 && statusCode <= 299;
+}

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

@@ -239,8 +239,8 @@ const AppLocked = () => {
             deviceMode !== "mobile"
               ? "50%"
               : Platform.OS == "ios"
-                ? "95%"
-                : "100%",
+              ? "95%"
+              : "100%",
           paddingHorizontal: 12,
           marginBottom: 30,
           marginTop: 15,

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

@@ -59,6 +59,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../utils/styles";
+import Navigation from "../../services/navigation";
 
 const Actions = ({
   attachment,
@@ -304,9 +305,9 @@ const Actions = ({
               <Pressable
                 onPress={async () => {
                   eSendEvent(eCloseSheet, contextId);
-                  await sleep(150);
+                  close?.();
                   eSendEvent(eCloseAttachmentDialog);
-                  await sleep(300);
+                  Navigation.navigate("FluidPanelsView");
                   openNote(item, (item as any).type === "trash");
                 }}
                 style={{

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

@@ -28,7 +28,7 @@ import {
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useRef, useState } from "react";
-import { ActivityIndicator, View } from "react-native";
+import { ActivityIndicator, FlatList, View } from "react-native";
 import { ScrollView } from "react-native-actions-sheet";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import create from "zustand";
@@ -313,6 +313,10 @@ export const AttachmentDialog = ({
     });
   };
 
+  db.attachments.orphaned.items().then((r) => {
+    console.log(r);
+  });
+
   return (
     <>
       {isSheet ? (
@@ -509,7 +513,7 @@ export const AttachmentDialog = ({
           </ScrollView>
         </View>
 
-        <LegendList
+        <FlatList
           renderScrollComponent={(props) => <ScrollView {...props} />}
           keyboardDismissMode="none"
           keyboardShouldPersistTaps="always"
@@ -543,7 +547,6 @@ export const AttachmentDialog = ({
               }}
             />
           }
-          estimatedItemSize={50}
           data={loading ? [] : attachments?.placeholders || []}
           extraData={attachments}
           renderItem={renderItem}

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

@@ -73,7 +73,15 @@ export const ChangePassword = () => {
         throw new Error(strings.backupFailed() + `: ${result.error}`);
       }
 
-      await db.user.changePassword(oldPassword.current, password.current);
+      const passwordChanged = await db.user.changePassword(
+        oldPassword.current,
+        password.current
+      );
+
+      if (!passwordChanged) {
+        throw new Error("Could not change user account password.");
+      }
+
       ToastManager.show({
         heading: strings.passwordChangedSuccessfully(),
         type: "success",

apps/mobile/app/components/auth/common.ts

@@ -39,7 +39,7 @@ export function hideAuth(context?: AuthParams["context"]) {
     initialAuthMode.current === AuthMode.welcomeLogin ||
     context === "intro"
   ) {
-    Navigation.replace("FluidPanelsView", {});
+    Navigation.navigate("FluidPanelsView", {});
   } else {
     Navigation.goBack();
   }

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

@@ -19,7 +19,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useRef, useState } from "react";
 import { TextInput, View } from "react-native";
-import ActionSheet from "react-native-actions-sheet";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { ToastManager } from "../../services/event-manager";
@@ -35,9 +34,9 @@ import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../utils/styles";
 
-export const ForgotPassword = () => {
+export const ForgotPassword = ({ userEmail }: { userEmail: string }) => {
   const { colors } = useThemeColors("sheet");
-  const email = useRef<string>(undefined);
+  const email = useRef<string>(userEmail);
   const emailInputRef = useRef<TextInput>(null);
   const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -87,94 +86,76 @@ export const ForgotPassword = () => {
 
   return (
     <>
-      <ActionSheet
-        onBeforeShow={(data) => (email.current = data)}
-        onClose={() => {
-          setSent(false);
-          setLoading(false);
-        }}
-        onOpen={() => {
-          emailInputRef.current?.setNativeProps({
-            text: email.current
-          });
-        }}
-        indicatorStyle={{
-          width: 100
-        }}
-        gestureEnabled
-        id="forgotpassword_sheet"
-      >
-        {sent ? (
-          <View
+      {sent ? (
+        <View
+          style={{
+            padding: DefaultAppStyles.GAP,
+            justifyContent: "center",
+            alignItems: "center",
+            paddingBottom: 50
+          }}
+        >
+          <IconButton
             style={{
-              padding: DefaultAppStyles.GAP,
-              justifyContent: "center",
-              alignItems: "center",
-              paddingBottom: 50
+              width: null,
+              height: null
+            }}
+            color={colors.primary.accent}
+            name="email"
+            size={50}
+          />
+          <Heading>{strings.recoveryEmailSent()}</Heading>
+          <Paragraph
+            style={{
+              textAlign: "center"
             }}
           >
-            <IconButton
-              style={{
-                width: null,
-                height: null
-              }}
-              color={colors.primary.accent}
-              name="email"
-              size={50}
-            />
-            <Heading>{strings.recoveryEmailSent()}</Heading>
-            <Paragraph
-              style={{
-                textAlign: "center"
-              }}
-            >
-              {strings.recoveryEmailSentDesc()}
-            </Paragraph>
-          </View>
-        ) : (
-          <View
-            style={{
-              borderRadius: DDS.isTab ? 5 : 0,
-              backgroundColor: colors.primary.background,
-              zIndex: 10,
-              width: "100%",
-              padding: DefaultAppStyles.GAP
+            {strings.recoveryEmailSentDesc()}
+          </Paragraph>
+        </View>
+      ) : (
+        <View
+          style={{
+            borderRadius: DDS.isTab ? 5 : 0,
+            backgroundColor: colors.primary.background,
+            zIndex: 10,
+            width: "100%",
+            padding: DefaultAppStyles.GAP
+          }}
+        >
+          <DialogHeader title={strings.accountRecovery()} />
+          <Seperator />
+
+          <Input
+            fwdRef={emailInputRef}
+            onChangeText={(value) => {
+              email.current = value;
             }}
-          >
-            <DialogHeader title={strings.accountRecovery()} />
-            <Seperator />
+            defaultValue={email.current}
+            onErrorCheck={(e) => setError(e)}
+            returnKeyLabel={strings.next()}
+            returnKeyType="next"
+            autoComplete="email"
+            validationType="email"
+            autoCorrect={false}
+            autoCapitalize="none"
+            errorMessage={strings.emailInvalid()}
+            placeholder={strings.email()}
+            onSubmit={() => {}}
+          />
 
-            <Input
-              fwdRef={emailInputRef}
-              onChangeText={(value) => {
-                email.current = value;
-              }}
-              defaultValue={email.current}
-              onErrorCheck={(e) => setError(e)}
-              returnKeyLabel={strings.next()}
-              returnKeyType="next"
-              autoComplete="email"
-              validationType="email"
-              autoCorrect={false}
-              autoCapitalize="none"
-              errorMessage={strings.emailInvalid()}
-              placeholder={strings.email()}
-              onSubmit={() => {}}
-            />
-
-            <Button
-              style={{
-                marginTop: DefaultAppStyles.GAP_VERTICAL,
-                width: "100%"
-              }}
-              loading={loading}
-              onPress={sendRecoveryEmail}
-              type="accent"
-              title={loading ? null : strings.next()}
-            />
-          </View>
-        )}
-      </ActionSheet>
+          <Button
+            style={{
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
+              width: "100%"
+            }}
+            loading={loading}
+            onPress={sendRecoveryEmail}
+            type="accent"
+            title={loading ? null : strings.next()}
+          />
+        </View>
+      )}
     </>
   );
 };

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

@@ -25,7 +25,11 @@ import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { DDS } from "../../services/device-detection";
-import { eSendEvent } from "../../services/event-manager";
+import {
+  eSendEvent,
+  presentSheet,
+  ToastManager
+} from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
@@ -110,7 +114,6 @@ export const Login = ({
   return (
     <>
       <AuthHeader />
-      <ForgotPassword />
       <Dialog context="two_factor_verify" />
       <KeyboardAwareScrollView
         style={{
@@ -192,8 +195,8 @@ export const Login = ({
                   ? "50%"
                   : "49.99%"
                 : focused
-                  ? "100%"
-                  : "99.9%",
+                ? "100%"
+                : "99.9%",
               backgroundColor: colors.primary.background,
               alignSelf: "center",
               paddingHorizontal: DDS.isTab ? 0 : DefaultAppStyles.GAP,
@@ -258,7 +261,9 @@ export const Login = ({
                   }}
                   onPress={() => {
                     if (loading || !email.current) return;
-                    SheetManager.show("forgotpassword_sheet");
+                    presentSheet({
+                      component: <ForgotPassword userEmail={email.current} />
+                    });
                   }}
                   textStyle={{
                     textDecorationLine: "underline"

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

@@ -97,7 +97,7 @@ export const SessionExpired = () => {
       if (db.tokenManager._isTokenExpired(res))
         throw new Error("token expired");
 
-      const key = await db.user.getEncryptionKey();
+      const key = await db.user.getDataEncryptionKeys();
       if (!key) throw new Error("No encryption key found.");
 
       Sync.run("global", false, "full", async (complete) => {

apps/mobile/app/components/container/floating-button.tsx

@@ -161,10 +161,10 @@ const FloatingButton = ({
               icon
                 ? icon
                 : route.name === "Notebooks"
-                  ? "notebook-plus"
-                  : route.name === "Trash"
-                    ? "delete"
-                    : "plus"
+                ? "notebook-plus"
+                : route.name === "Trash"
+                ? "delete"
+                : "plus"
             }
             color={color || colors.primary.accent}
             size={size === "small" ? AppFontSize.xl : AppFontSize.xxxl}

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

@@ -0,0 +1,66 @@
+import { useThemeColors } from "@notesnook/theme";
+import { useRef } from "react";
+import { View } from "react-native";
+import { defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
+import DatePicker from "react-native-date-picker";
+import dayjs from "dayjs";
+import { strings } from "@notesnook/intl";
+import { Button } from "../ui/button";
+
+export default function DatePickerComponent(props: {
+  onConfirm: (date: Date) => void;
+  onCancel: () => void;
+}) {
+  const { colors, isDark } = useThemeColors();
+  const dateRef = useRef<Date>(dayjs().add(1, "day").toDate());
+  return (
+    <View
+      style={{
+        backgroundColor: colors.primary.background,
+        borderRadius: defaultBorderRadius,
+        padding: DefaultAppStyles.GAP,
+        borderWidth: 0.5,
+        borderColor: colors.primary.border,
+        width: "80%",
+        gap: DefaultAppStyles.GAP_VERTICAL
+      }}
+    >
+      <DatePicker
+        theme={isDark ? "dark" : "light"}
+        mode="date"
+        minimumDate={dayjs().add(1, "day").toDate()}
+        onCancel={() => {
+          close?.();
+        }}
+        date={dateRef.current}
+        onDateChange={(date) => {
+          dateRef.current = date;
+        }}
+      />
+
+      <Button
+        title={strings.setExpiry()}
+        type="accent"
+        style={{
+          width: "100%"
+        }}
+        onPress={async () => {
+          if (!dateRef.current) return;
+          props.onConfirm(dateRef.current);
+        }}
+      />
+
+      <Button
+        title={strings.cancel()}
+        type="secondary"
+        style={{
+          width: "100%"
+        }}
+        onPress={async () => {
+          props.onCancel();
+        }}
+      />
+    </View>
+  );
+}

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

@@ -136,8 +136,8 @@ const BaseDialog = ({
             backgroundColor: background
               ? background
               : transparent
-                ? "transparent"
-                : "rgba(0,0,0,0.3)"
+              ? "transparent"
+              : "rgba(0,0,0,0.3)"
           }}
         >
           <KeyboardAvoidingView
@@ -155,8 +155,8 @@ const BaseDialog = ({
                   justifyContent: centered
                     ? "center"
                     : bottom
-                      ? "flex-end"
-                      : "flex-start"
+                    ? "flex-end"
+                    : "flex-start"
                 }
               ]}
             >

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

@@ -17,7 +17,6 @@ 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 { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { TextInput, View, ViewStyle } from "react-native";

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

@@ -201,14 +201,12 @@ export const AppLockPassword = () => {
               accountPass
                 ? strings.enterAccountPassword()
                 : mode === "change"
-                  ? keyboardType === "pin"
-                    ? strings.newPin()
-                    : strings.newPassword()
-                  : `${
-                      keyboardType === "pin"
-                        ? strings.pin()
-                        : strings.password()
-                    }`
+                ? keyboardType === "pin"
+                  ? strings.newPin()
+                  : strings.newPassword()
+                : `${
+                    keyboardType === "pin" ? strings.pin() : strings.password()
+                  }`
             }
           />
 
@@ -385,8 +383,8 @@ export const AppLockPassword = () => {
             mode === "remove"
               ? strings.remove()
               : mode === "change"
-                ? strings.change()
-                : strings.save()
+              ? strings.change()
+              : strings.save()
           }
           negativeTitle={strings.cancel()}
           positiveType="transparent"

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

@@ -167,14 +167,16 @@ const ColorPicker = ({
                   );
                 if (!title.current)
                   return ToastManager.error(
-                    new Error(strings.allFieldsRequired())
+                    new Error(strings.allFieldsRequired()),
+                    "color-picker"
                   );
                 const exists = await db.colors.all.find((v) =>
                   v.and([v(`colorCode`, "==", selectedColor)])
                 );
                 if (exists)
                   return ToastManager.error(
-                    new Error(strings.colorExists(selectedColor))
+                    new Error(strings.colorExists(selectedColor)),
+                    "color-picker"
                   );
                 const id = await db.colors.add({
                   title: title.current,

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

@@ -1,900 +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 Clipboard from "@react-native-clipboard/clipboard";
-import React, { Component, createRef } from "react";
-import { InteractionManager, View } from "react-native";
-import Share from "react-native-share";
-import { notesnook } from "../../../../e2e/test.ids";
-import { db } from "../../../common/database";
-import BiometricService from "../../../services/biometrics";
-import { DDS } from "../../../services/device-detection";
-import {
-  ToastManager,
-  eSendEvent,
-  eSubscribeEvent,
-  eUnSubscribeEvent
-} from "../../../services/event-manager";
-import Navigation from "../../../services/navigation";
-import { getElevationStyle } from "../../../utils/elevation";
-import {
-  eCloseActionSheet,
-  eCloseVaultDialog,
-  eOnLoadNote,
-  eOpenVaultDialog,
-  eUpdateNoteInEditor
-} from "../../../utils/events";
-import { deleteItems } from "../../../utils/functions";
-import { fluidTabsRef } from "../../../utils/global-refs";
-import { convertNoteToText } from "../../../utils/note-to-text";
-import { sleep } from "../../../utils/time";
-import BaseDialog from "../../dialog/base-dialog";
-import DialogButtons from "../../dialog/dialog-buttons";
-import DialogHeader from "../../dialog/dialog-header";
-import { Toast } from "../../toast";
-import { Button } from "../../ui/button";
-import Input from "../../ui/input";
-import Seperator from "../../ui/seperator";
-import Paragraph from "../../ui/typography/paragraph";
-import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../../utils/styles";
-
-export class VaultDialog extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      visible: false,
-      wrongPassword: false,
-      loading: false,
-      note: {},
-      vault: false,
-      locked: true,
-      permanant: false,
-      goToEditor: false,
-      share: false,
-      passwordsDontMatch: false,
-      deleteNote: false,
-      focusIndex: null,
-      biometricUnlock: false,
-      isBiometryEnrolled: false,
-      isBiometryAvailable: false,
-      fingerprintAccess: false,
-      changePassword: false,
-      copyNote: false,
-      revokeFingerprintAccess: false,
-      title: strings.goToEditor(),
-      description: null,
-      clearVault: false,
-      deleteVault: false,
-      deleteAll: false,
-      noteLocked: false
-    };
-
-    this.passInputRef = createRef();
-    this.confirmPassRef = createRef();
-    this.changePassInputRef = createRef();
-
-    this.password = null;
-    this.confirmPassword = null;
-    this.newPassword = null;
-    this.title = !this.state.novault
-      ? strings.createVault()
-      : this.state.fingerprintAccess
-        ? strings.vaultFingerprintUnlock()
-        : this.state.revokeFingerprintAccess
-          ? strings.revokeVaultFingerprintUnlock()
-          : this.state.changePassword
-            ? strings.changeVaultPassword()
-            : this.state.noteLocked
-              ? this.state.deleteNote
-                ? strings.deleteNote()
-                : this.state.share
-                  ? strings.shareNote()
-                  : this.state.copyNote
-                    ? strings.copyNote()
-                    : this.state.goToEditor
-                      ? strings.goToEditor()
-                      : strings.goToEditor()
-              : strings.lockNote();
-  }
-
-  componentDidMount() {
-    eSubscribeEvent(eOpenVaultDialog, this.open);
-    eSubscribeEvent(eCloseVaultDialog, this.close);
-  }
-
-  componentWillUnmount() {
-    eUnSubscribeEvent(eOpenVaultDialog, this.open);
-    eUnSubscribeEvent(eCloseVaultDialog, this.close);
-  }
-
-  /**
-   *
-   * @param {import('../../../services/event-manager').vaultType} data
-   */
-  open = async (data) => {
-    let biometry = await BiometricService.isBiometryAvailable();
-    let available = false;
-    let fingerprint = await BiometricService.hasInternetCredentials("nn_vault");
-
-    if (biometry) {
-      available = true;
-    }
-
-    this.setState({
-      note: data.item,
-      novault: data.novault,
-      locked: data.locked,
-      permanant: data.permanant,
-      goToEditor: data.goToEditor,
-      share: data.share,
-      deleteNote: data.deleteNote,
-      copyNote: data.copyNote,
-      isBiometryAvailable: available,
-      biometricUnlock: fingerprint,
-      isBiometryEnrolled: fingerprint,
-      fingerprintAccess: data.fingerprintAccess,
-      changePassword: data.changePassword,
-      revokeFingerprintAccess: data.revokeFingerprintAccess,
-      title: data.title,
-      description: data.description,
-      clearVault: data.clearVault,
-      deleteVault: data.deleteVault,
-      noteLocked: data.item && (await db.vaults.itemExists(data.item))
-    });
-
-    if (
-      fingerprint &&
-      data.novault &&
-      !data.fingerprintAccess &&
-      !data.revokeFingerprintAccess &&
-      !data.changePassword &&
-      !data.clearVault &&
-      !data.deleteVault
-    ) {
-      await this._onPressFingerprintAuth(data.title, data.description);
-    } else {
-      this.setState({
-        visible: true
-      });
-    }
-  };
-
-  close = () => {
-    if (this.state.loading) {
-      ToastManager.show({
-        heading: this.state.title,
-        message: strings.pleaseWait() + "...",
-        type: "success",
-        context: "local"
-      });
-      return;
-    }
-
-    Navigation.queueRoutesForUpdate();
-
-    this.password = null;
-    this.confirmPassword = null;
-    this.setState({
-      visible: false,
-      note: {},
-      locked: false,
-      permanant: false,
-      goToEditor: false,
-      share: false,
-      novault: false,
-      deleteNote: false,
-      passwordsDontMatch: false
-    });
-  };
-
-  onPress = async () => {
-    if (this.state.revokeFingerprintAccess) {
-      await this._revokeFingerprintAccess();
-
-      this.close();
-      return;
-    }
-    if (this.state.loading) return;
-
-    if (!this.password) {
-      ToastManager.show({
-        heading: strings.passwordNotEntered(),
-        type: "error",
-        context: "local"
-      });
-      return;
-    }
-
-    if (!this.state.novault) {
-      if (this.password !== this.confirmPassword) {
-        ToastManager.show({
-          heading: strings.passwordNotMatched(),
-          type: "error",
-          context: "local"
-        });
-        this.setState({
-          passwordsDontMatch: true
-        });
-        return;
-      }
-
-      this._createVault();
-    } else if (this.state.changePassword) {
-      this.setState({
-        loading: true
-      });
-
-      db.vault
-        .changePassword(this.password, this.newPassword)
-        .then(() => {
-          this.setState({
-            loading: false
-          });
-          if (this.state.biometricUnlock) {
-            this._enrollFingerprint(this.newPassword);
-          }
-          ToastManager.show({
-            heading: strings.passwordUpdated(),
-            type: "success",
-            context: "global"
-          });
-          this.close();
-        })
-        .catch((e) => {
-          this.setState({
-            loading: false
-          });
-          if (e.message === db.vault.ERRORS.wrongPassword) {
-            ToastManager.show({
-              heading: strings.passwordIncorrect(),
-              type: "error",
-              context: "local"
-            });
-          } else {
-            ToastManager.error(e);
-          }
-        });
-    } else if (this.state.locked) {
-      if (!this.password || this.password.trim() === 0) {
-        ToastManager.show({
-          heading: strings.passwordIncorrect(),
-          type: "error",
-          context: "local"
-        });
-        this.setState({
-          wrongPassword: true
-        });
-        return;
-      }
-      if (this.state.noteLocked) {
-        await this._unlockNote();
-      } else {
-        db.vault
-          .unlock(this.password)
-          .then(async () => {
-            this.setState({
-              wrongPassword: false
-            });
-            await this._lockNote();
-          })
-          .catch((e) => {
-            this._takeErrorAction(e);
-          });
-      }
-    } else if (this.state.fingerprintAccess) {
-      this._enrollFingerprint(this.password);
-    } else if (this.state.clearVault) {
-      await this.clearVault();
-    } else if (this.state.deleteVault) {
-      await this.deleteVault();
-    }
-  };
-
-  deleteVault = async () => {
-    this.setState({
-      loading: true
-    });
-    try {
-      let verified = true;
-      if (await db.user.getUser()) {
-        verified = await db.user.verifyPassword(this.password);
-      }
-      if (verified) {
-        let noteIds = [];
-        if (this.state.deleteAll) {
-          const vault = await db.vaults.default();
-          const relations = await db.relations.from(vault, "note").get();
-          noteIds = relations.map((item) => item.toId);
-        }
-        await db.vault.delete(this.state.deleteAll);
-
-        if (this.state.deleteAll) {
-          noteIds.forEach((id) => {
-            eSendEvent(
-              eUpdateNoteInEditor,
-              {
-                id: id,
-                deleted: true
-              },
-              true
-            );
-          });
-        }
-        eSendEvent("vaultUpdated");
-        this.setState({
-          loading: false
-        });
-        setTimeout(() => {
-          this.close();
-        }, 100);
-      } else {
-        ToastManager.show({
-          heading: strings.passwordIncorrect(),
-          type: "error",
-          context: "local"
-        });
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  clearVault = async () => {
-    this.setState({
-      loading: true
-    });
-    try {
-      const vault = await db.vaults.default();
-      const relations = await db.relations.from(vault, "note").get();
-      const noteIds = relations.map((item) => item.toId);
-
-      await db.vault.clear(this.password);
-
-      noteIds.forEach((id) => {
-        eSendEvent(
-          eUpdateNoteInEditor,
-          {
-            id: id,
-            deleted: true
-          },
-          true
-        );
-      });
-      this.setState({
-        loading: false
-      });
-      this.close();
-      eSendEvent("vaultUpdated");
-    } catch (e) {
-      ToastManager.show({
-        heading: strings.passwordIncorrect(),
-        type: "error",
-        context: "local"
-      });
-    }
-    this.setState({
-      loading: false
-    });
-  };
-
-  async _lockNote() {
-    if (!this.password || this.password.trim() === 0) {
-      ToastManager.show({
-        heading: strings.passwordIncorrect(),
-        type: "error",
-        context: "local"
-      });
-      return;
-    } else {
-      await db.vault.add(this.state.note.id);
-
-      eSendEvent(eUpdateNoteInEditor, this.state.note, true);
-
-      this.close();
-      ToastManager.show({
-        message: strings.noteLocked(),
-        type: "error",
-        context: "local"
-      });
-      this.setState({
-        loading: false
-      });
-    }
-  }
-
-  async _unlockNote() {
-    if (!this.password || this.password.trim() === 0) {
-      ToastManager.show({
-        heading: strings.passwordIncorrect(),
-        type: "error",
-        context: "local"
-      });
-      return;
-    }
-    if (this.state.permanant) {
-      this._permanantUnlock();
-    } else {
-      await this._openNote();
-    }
-  }
-
-  _openNote = async () => {
-    try {
-      let note = await db.vault.open(this.state.note.id, this.password);
-      if (this.state.biometricUnlock && !this.state.isBiometryEnrolled) {
-        await this._enrollFingerprint(this.password);
-      }
-
-      if (this.state.goToEditor) {
-        this._openInEditor(note);
-      } else if (this.state.share) {
-        await this._shareNote(note);
-      } else if (this.state.deleteNote) {
-        await this._deleteNote();
-      } else if (this.state.copyNote) {
-        await this._copyNote(note);
-      }
-    } catch (e) {
-      this._takeErrorAction(e);
-    }
-  };
-  async _deleteNote() {
-    try {
-      await db.vault.remove(this.state.note.id, this.password);
-      await deleteItems("note", [this.state.note.id]);
-      this.close();
-    } catch (e) {
-      this._takeErrorAction(e);
-    }
-  }
-
-  async _enrollFingerprint(password) {
-    this.setState(
-      {
-        loading: true
-      },
-      async () => {
-        try {
-          await db.vault.unlock(password);
-          await BiometricService.storeCredentials(password);
-          this.setState({
-            loading: false
-          });
-          eSendEvent("vaultUpdated");
-          ToastManager.show({
-            heading: strings.biometricUnlockEnabled(),
-            type: "success",
-            context: "global"
-          });
-          this.close();
-        } catch (e) {
-          this.close();
-          ToastManager.show({
-            heading: strings.passwordIncorrect(),
-            type: "error",
-            context: "local"
-          });
-          this.setState({
-            loading: false
-          });
-        }
-      }
-    );
-  }
-
-  async _createVault() {
-    await db.vault.create(this.password);
-
-    if (this.state.biometricUnlock) {
-      await this._enrollFingerprint(this.password);
-    }
-    if (this.state.note?.id) {
-      await db.vault.add(this.state.note.id);
-      eSendEvent(eUpdateNoteInEditor, this.state.note, true);
-      this.setState({
-        loading: false
-      });
-      ToastManager.show({
-        heading: strings.noteLocked(),
-        type: "success",
-        context: "global"
-      });
-      this.close();
-    } else {
-      ToastManager.show({
-        heading: strings.vaultCreated(),
-        type: "success",
-        context: "global"
-      });
-      this.close();
-    }
-    eSendEvent("vaultUpdated");
-  }
-
-  _permanantUnlock() {
-    db.vault
-      .remove(this.state.note.id, this.password)
-      .then(() => {
-        ToastManager.show({
-          heading: strings.noteUnlocked(),
-          type: "success",
-          context: "global"
-        });
-        eSendEvent(eUpdateNoteInEditor, this.state.note, true);
-        this.close();
-      })
-      .catch((e) => {
-        this._takeErrorAction(e);
-      });
-  }
-
-  _openInEditor(note) {
-    this.close();
-    InteractionManager.runAfterInteractions(async () => {
-      eSendEvent(eOnLoadNote, {
-        item: note
-      });
-      if (!DDS.isTab) {
-        fluidTabsRef.current?.goToPage("editor");
-      }
-    });
-  }
-
-  async _copyNote(note) {
-    Clipboard.setString((await convertNoteToText(note, true)) || "");
-    ToastManager.show({
-      heading: strings.noteCopied(),
-      type: "success",
-      context: "global"
-    });
-    this.close();
-  }
-
-  async _shareNote(note) {
-    this.close();
-    try {
-      await Share.open({
-        heading: note.title,
-        failOnCancel: false,
-        message: (await convertNoteToText(note)) || ""
-      });
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  _takeErrorAction(e) {
-    this.setState({
-      wrongPassword: true,
-      visible: true
-    });
-    setTimeout(() => {
-      ToastManager.show({
-        heading: strings.passwordIncorrect(),
-        type: "error",
-        context: "local"
-      });
-    }, 500);
-  }
-
-  _revokeFingerprintAccess = async () => {
-    try {
-      await BiometricService.resetCredentials();
-      eSendEvent("vaultUpdated");
-      ToastManager.show({
-        heading: strings.biometricUnlockDisabled(),
-        type: "success",
-        context: "global"
-      });
-    } catch (e) {
-      ToastManager.show({
-        heading: e.message,
-        type: "success",
-        context: "global"
-      });
-    }
-  };
-
-  _onPressFingerprintAuth = async (title, description) => {
-    try {
-      let credentials = await BiometricService.getCredentials(
-        title || this.state.title,
-        description || this.state.description
-      );
-
-      if (credentials?.password) {
-        this.password = credentials.password;
-        this.onPress();
-      } else {
-        eSendEvent(eCloseActionSheet);
-        await sleep(300);
-        this.setState({
-          visible: true
-        });
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  render() {
-    const { colors } = this.props;
-    const {
-      note,
-      visible,
-      novault,
-      deleteNote,
-      share,
-      goToEditor,
-      fingerprintAccess,
-      changePassword,
-      loading,
-      deleteVault,
-      clearVault
-    } = this.state;
-
-    if (!visible) return null;
-    return (
-      <BaseDialog
-        onShow={async () => {
-          await sleep(100);
-
-          this.passInputRef.current?.focus();
-        }}
-        statusBarTranslucent={false}
-        onRequestClose={this.close}
-        visible={true}
-      >
-        <View
-          style={{
-            ...getElevationStyle(5),
-            width: DDS.isTab ? 350 : "85%",
-            borderRadius: 10,
-            backgroundColor: colors.primary.background,
-            paddingTop: 12
-          }}
-        >
-          <DialogHeader title={this.state.title} icon="shield" padding={12} />
-          <Seperator half />
-
-          <View
-            style={{
-              paddingHorizontal: DefaultAppStyles.GAP
-            }}
-          >
-            {(novault ||
-              changePassword ||
-              this.state.clearVault ||
-              this.state.deleteVault) &&
-            !this.state.revokeFingerprintAccess ? (
-              <>
-                <Input
-                  fwdRef={this.passInputRef}
-                  editable={!loading}
-                  autoCapitalize="none"
-                  testID={notesnook.ids.dialogs.vault.pwd}
-                  onChangeText={(value) => {
-                    this.password = value;
-                  }}
-                  marginBottom={
-                    !this.state.biometricUnlock ||
-                    !this.state.isBiometryEnrolled ||
-                    !novault ||
-                    changePassword
-                      ? 0
-                      : 10
-                  }
-                  onSubmit={() => {
-                    changePassword
-                      ? this.confirmPassRef.current?.focus()
-                      : this.onPress;
-                  }}
-                  autoComplete="password"
-                  returnKeyLabel={
-                    changePassword ? strings.next() : this.state.title
-                  }
-                  returnKeyType={changePassword ? "next" : "done"}
-                  secureTextEntry
-                  placeholder={
-                    changePassword
-                      ? strings.currentPassword()
-                      : strings.password()
-                  }
-                />
-
-                {!this.state.biometricUnlock ||
-                !this.state.isBiometryEnrolled ||
-                !novault ||
-                changePassword ? null : (
-                  <Button
-                    onPress={() =>
-                      this._onPressFingerprintAuth(strings.unlockNote(), "")
-                    }
-                    icon="fingerprint"
-                    width="100%"
-                    title={strings.unlockWithBiometrics()}
-                    type="transparent"
-                  />
-                )}
-              </>
-            ) : null}
-
-            {this.state.deleteVault && (
-              <Button
-                onPress={() =>
-                  this.setState({
-                    deleteAll: !this.state.deleteAll
-                  })
-                }
-                icon={
-                  this.state.deleteAll
-                    ? "check-circle-outline"
-                    : "checkbox-blank-circle-outline"
-                }
-                style={{
-                  marginTop: DefaultAppStyles.GAP_VERTICAL
-                }}
-                width="100%"
-                title={strings.deleteAllNotes()}
-                type="errorShade"
-              />
-            )}
-
-            {changePassword ? (
-              <>
-                <Seperator half />
-                <Input
-                  ref={this.confirmPassRef}
-                  editable={!loading}
-                  testID={notesnook.ids.dialogs.vault.changePwd}
-                  autoCapitalize="none"
-                  onChangeText={(value) => {
-                    this.newPassword = value;
-                  }}
-                  autoComplete="password"
-                  onSubmit={this.onPress}
-                  returnKeyLabel="Change"
-                  returnKeyType="done"
-                  secureTextEntry
-                  placeholder={strings.newPassword()}
-                />
-              </>
-            ) : null}
-
-            {!novault ? (
-              <View>
-                <Input
-                  fwdRef={this.passInputRef}
-                  autoCapitalize="none"
-                  testID={notesnook.ids.dialogs.vault.pwd}
-                  onChangeText={(value) => {
-                    this.password = value;
-                  }}
-                  autoComplete="password"
-                  returnKeyLabel={strings.next()}
-                  returnKeyType="next"
-                  secureTextEntry
-                  onSubmit={() => {
-                    this.confirmPassRef.current?.focus();
-                  }}
-                  placeholder={strings.password()}
-                />
-
-                <Input
-                  fwdRef={this.confirmPassRef}
-                  autoCapitalize="none"
-                  testID={notesnook.ids.dialogs.vault.pwdAlt}
-                  secureTextEntry
-                  validationType="confirmPassword"
-                  customValidator={() => this.password}
-                  errorMessage="Passwords do not match."
-                  onErrorCheck={() => null}
-                  marginBottom={0}
-                  autoComplete="password"
-                  returnKeyLabel="Create"
-                  returnKeyType="done"
-                  onChangeText={(value) => {
-                    this.confirmPassword = value;
-                    if (value !== this.password) {
-                      this.setState({
-                        passwordsDontMatch: true
-                      });
-                    } else {
-                      this.setState({
-                        passwordsDontMatch: false
-                      });
-                    }
-                  }}
-                  onSubmit={this.onPress}
-                  placeholder={strings.confirmPassword()}
-                />
-              </View>
-            ) : null}
-
-            {this.state.biometricUnlock &&
-            !this.state.isBiometryEnrolled &&
-            novault ? (
-              <Paragraph>{strings.vaultEnableBiometrics()}</Paragraph>
-            ) : null}
-
-            {this.state.isBiometryAvailable &&
-            !this.state.fingerprintAccess &&
-            !this.state.clearVault &&
-            !this.state.deleteVault &&
-            ((!this.state.biometricUnlock && !changePassword) || !novault) ? (
-              <Button
-                onPress={() => {
-                  this.setState({
-                    biometricUnlock: !this.state.biometricUnlock
-                  });
-                }}
-                style={{
-                  marginTop: DefaultAppStyles.GAP_VERTICAL
-                }}
-                icon="fingerprint"
-                width="100%"
-                title={strings.unlockWithBiometrics()}
-                iconColor={
-                  this.state.biometricUnlock
-                    ? colors.selected.accent
-                    : colors.primary.icon
-                }
-                type={this.state.biometricUnlock ? "transparent" : "plain"}
-              />
-            ) : null}
-          </View>
-
-          <DialogButtons
-            onPressNegative={this.close}
-            onPressPositive={this.onPress}
-            loading={loading}
-            positiveType={
-              deleteVault || clearVault ? "errorShade" : "transparent"
-            }
-            positiveTitle={
-              deleteVault
-                ? strings.delete()
-                : clearVault
-                  ? strings.clear()
-                  : fingerprintAccess
-                    ? strings.enable()
-                    : this.state.revokeFingerprintAccess
-                      ? strings.revoke()
-                      : changePassword
-                        ? strings.change()
-                        : this.state.noteLocked
-                          ? deleteNote
-                            ? strings.delete()
-                            : share
-                              ? strings.share()
-                              : goToEditor
-                                ? strings.open()
-                                : strings.unlock()
-                          : !note.id
-                            ? strings.create()
-                            : strings.lock()
-            }
-          />
-        </View>
-        <Toast context="local" />
-      </BaseDialog>
-    );
-  }
-}

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

@@ -0,0 +1,946 @@
+/*
+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 Clipboard from "@react-native-clipboard/clipboard";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { InteractionManager, View, TextInput } from "react-native";
+import Share from "react-native-share";
+import { notesnook } from "../../../../e2e/test.ids";
+import { db } from "../../../common/database";
+import BiometricService from "../../../services/biometrics";
+import { DDS } from "../../../services/device-detection";
+import {
+  ToastManager,
+  Vault,
+  VaultRequestType,
+  eSendEvent,
+  eSubscribeEvent,
+  eUnSubscribeEvent
+} from "../../../services/event-manager";
+import Navigation from "../../../services/navigation";
+import { getElevationStyle } from "../../../utils/elevation";
+import {
+  eCloseActionSheet,
+  eCloseVaultDialog,
+  eOnLoadNote,
+  eOpenVaultDialog,
+  eUpdateNoteInEditor
+} from "../../../utils/events";
+import { deleteItems } from "../../../utils/functions";
+import { fluidTabsRef } from "../../../utils/global-refs";
+import { convertNoteToText } from "../../../utils/note-to-text";
+import { sleep } from "../../../utils/time";
+import BaseDialog from "../../dialog/base-dialog";
+import DialogButtons from "../../dialog/dialog-buttons";
+import DialogHeader from "../../dialog/dialog-header";
+import { Toast } from "../../toast";
+import { Button } from "../../ui/button";
+import Input from "../../ui/input";
+import Seperator from "../../ui/seperator";
+import Paragraph from "../../ui/typography/paragraph";
+import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
+import {
+  isEncryptedContent,
+  Note,
+  NoteContent,
+  VAULT_ERRORS
+} from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
+
+export const VaultDialog: React.FC = () => {
+  const { colors } = useThemeColors();
+
+  // UI State
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [wrongPassword, setWrongPassword] = useState(false);
+  const [passwordsDontMatch, setPasswordsDontMatch] = useState(false);
+  const [deleteAll, setDeleteAll] = useState(false);
+  const [biometricUnlock, setBiometricUnlock] = useState(false);
+  const [isBiometryAvailable, setIsBiometryAvailable] = useState(false);
+  const [isBiometryEnrolled, setIsBiometryEnrolled] = useState(false);
+
+  // Refs for non-UI state
+  const requestTypeRef = useRef<VaultRequestType | null>(null);
+  const noteRef = useRef<Note | undefined>(undefined);
+  const titleRef = useRef<string>(strings.goToEditor());
+  const descriptionRef = useRef<string | null>(null);
+  const paragraphRef = useRef<string | null>(null);
+  const buttonTitleRef = useRef<string | null>(null);
+  const positiveButtonTypeRef = useRef<"errorShade" | "transparent" | "accent">(
+    "transparent"
+  );
+  const customActionTitleRef = useRef<string | null>(null);
+  const customActionParagraphRef = useRef<string | null>(null);
+  const noteLockedRef = useRef(false);
+  const onUnlockRef = useRef<
+    | ((
+        item: Note & {
+          content?: NoteContent<false>;
+        },
+        password: string
+      ) => void)
+    | undefined
+  >(undefined);
+
+  // Input refs
+  const passInputRef = useRef<TextInput>(null);
+  const confirmPassRef = useRef<TextInput>(null);
+  const changePassInputRef = useRef<TextInput>(null);
+
+  // Password refs
+  const passwordRef = useRef<string | null>(null);
+  const confirmPasswordRef = useRef<string | null>(null);
+  const newPasswordRef = useRef<string | null>(null);
+
+  const open = useCallback(async (data: Vault) => {
+    const biometry = await BiometricService.isBiometryAvailable();
+    const available = !!biometry;
+    const fingerprint = await BiometricService.hasInternetCredentials();
+
+    if (data.item) {
+      const locked = await db.vaults.itemExists(data.item);
+      noteLockedRef.current = locked;
+      if (!locked) {
+        const content = await db.content.findByNoteId(data.item!.id);
+        if (content && isEncryptedContent(content)) {
+          noteLockedRef.current = true;
+        }
+      }
+    }
+
+    // Set refs
+    noteRef.current = data.item;
+    titleRef.current = data.title || strings.goToEditor();
+    descriptionRef.current = data.description || null;
+    paragraphRef.current = data.paragraph || null;
+    buttonTitleRef.current = data.buttonTitle || null;
+    positiveButtonTypeRef.current = data.positiveButtonType || "transparent";
+    customActionTitleRef.current = data.customActionTitle || null;
+    customActionParagraphRef.current = data.customActionParagraph || null;
+    onUnlockRef.current = data.onUnlock;
+    requestTypeRef.current = data.requestType;
+
+    // Set UI state
+    setIsBiometryAvailable(available);
+    setIsBiometryEnrolled(fingerprint);
+    setBiometricUnlock(fingerprint);
+    setWrongPassword(false);
+    setPasswordsDontMatch(false);
+    setDeleteAll(false);
+    setLoading(false);
+
+    // Auto-unlock with fingerprint if applicable
+    const canAutoUnlock =
+      fingerprint &&
+      data.requestType !== VaultRequestType.EnableFingerprint &&
+      data.requestType !== VaultRequestType.RevokeFingerprint &&
+      data.requestType !== VaultRequestType.ChangePassword &&
+      data.requestType !== VaultRequestType.ClearVault &&
+      data.requestType !== VaultRequestType.DeleteVault &&
+      data.requestType !== VaultRequestType.CustomAction &&
+      data.requestType !== VaultRequestType.PermanentUnlock;
+
+    if (canAutoUnlock) {
+      await onPressFingerprintAuth(data.title, data.description);
+    } else {
+      setVisible(true);
+    }
+  }, []);
+
+  const close = useCallback(() => {
+    if (loading) {
+      ToastManager.show({
+        heading: titleRef.current,
+        message: strings.pleaseWait() + "...",
+        type: "success",
+        context: "local"
+      });
+      return;
+    }
+
+    Navigation.queueRoutesForUpdate();
+
+    // Reset password refs
+    passwordRef.current = null;
+    confirmPasswordRef.current = null;
+    newPasswordRef.current = null;
+
+    // Reset refs
+    requestTypeRef.current = null;
+    noteRef.current = undefined;
+    titleRef.current = strings.goToEditor();
+    descriptionRef.current = null;
+    paragraphRef.current = null;
+    buttonTitleRef.current = null;
+    positiveButtonTypeRef.current = "transparent";
+    customActionTitleRef.current = null;
+    customActionParagraphRef.current = null;
+    noteLockedRef.current = false;
+    onUnlockRef.current = undefined;
+
+    // Reset UI state
+    setVisible(false);
+    setLoading(false);
+    setWrongPassword(false);
+    setPasswordsDontMatch(false);
+    setDeleteAll(false);
+    setBiometricUnlock(false);
+    setIsBiometryAvailable(false);
+    setIsBiometryEnrolled(false);
+  }, [loading]);
+
+  const deleteVault = useCallback(async () => {
+    setLoading(true);
+    try {
+      let verified = true;
+      if (await db.user.getUser()) {
+        verified = await db.user.verifyPassword(passwordRef.current || "");
+      }
+      if (verified) {
+        let noteIds: string[] = [];
+        if (deleteAll) {
+          const vault = await db.vaults.default();
+          const relations = await db.relations
+            .from(
+              {
+                type: "vault",
+                id: vault!.id
+              },
+              "note"
+            )
+            .get();
+          noteIds = relations.map((item) => item.toId);
+        }
+        await db.vault.delete(deleteAll);
+
+        if (deleteAll) {
+          noteIds.forEach((id) => {
+            eSendEvent(
+              eUpdateNoteInEditor,
+              {
+                id: id,
+                deleted: true
+              },
+              true
+            );
+          });
+        }
+        eSendEvent("vaultUpdated");
+        setLoading(false);
+        setTimeout(() => {
+          close();
+        }, 100);
+      } else {
+        ToastManager.show({
+          heading: strings.passwordIncorrect(),
+          type: "error",
+          context: "local"
+        });
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }, [deleteAll, close]);
+
+  const clearVault = useCallback(async () => {
+    setLoading(true);
+    try {
+      const vault = await db.vaults.default();
+      const relations = await db.relations.from(vault!, "note").get();
+      const noteIds = relations.map((item) => item.toId);
+
+      await db.vault.clear(passwordRef.current || "");
+
+      noteIds.forEach((id) => {
+        eSendEvent(
+          eUpdateNoteInEditor,
+          {
+            id: id,
+            deleted: true
+          },
+          true
+        );
+      });
+      setLoading(false);
+      close();
+      eSendEvent("vaultUpdated");
+    } catch (e) {
+      ToastManager.show({
+        heading: strings.passwordIncorrect(),
+        type: "error",
+        context: "local"
+      });
+    }
+    setLoading(false);
+  }, [close]);
+
+  const lockNote = useCallback(async () => {
+    if (!passwordRef.current || passwordRef.current.trim() === "") {
+      ToastManager.show({
+        heading: strings.passwordIncorrect(),
+        type: "error",
+        context: "local"
+      });
+      return;
+    } else {
+      await db.vault.add(noteRef.current!.id);
+
+      eSendEvent(eUpdateNoteInEditor, noteRef.current, true);
+
+      close();
+      ToastManager.show({
+        message: strings.noteLocked(),
+        type: "error",
+        context: "local"
+      });
+      setLoading(false);
+    }
+  }, [close]);
+
+  const permanantUnlock = useCallback(() => {
+    db.vault
+      .remove(noteRef.current!.id, passwordRef.current || "")
+      .then(async () => {
+        ToastManager.show({
+          heading: strings.noteUnlocked(),
+          type: "success",
+          context: "global"
+        });
+        eSendEvent(eUpdateNoteInEditor, noteRef.current, true);
+        if (biometricUnlock && !isBiometryEnrolled) {
+          await enrollFingerprint(passwordRef.current || "");
+        }
+        close();
+      })
+      .catch((e) => {
+        takeErrorAction();
+      });
+  }, [close, biometricUnlock, isBiometryEnrolled]);
+
+  const openInEditor = useCallback(
+    (note: Note & { content?: NoteContent<false> }) => {
+      close();
+      InteractionManager.runAfterInteractions(async () => {
+        eSendEvent(eOnLoadNote, {
+          item: note
+        });
+        if (!DDS.isTab) {
+          fluidTabsRef.current?.goToPage("editor");
+        }
+      });
+    },
+    [close]
+  );
+
+  const copyNote = useCallback(
+    async (note: Note & { content?: NoteContent<false> }) => {
+      Clipboard.setString((await convertNoteToText(note, true)) || "");
+      ToastManager.show({
+        heading: strings.noteCopied(),
+        type: "success",
+        context: "global"
+      });
+      close();
+    },
+    [close]
+  );
+
+  const shareNote = useCallback(
+    async (note: Note & { content?: NoteContent<false> }) => {
+      close();
+      try {
+        await Share.open({
+          title: note.title,
+          failOnCancel: false,
+          message: (await convertNoteToText(note)) || ""
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    [close]
+  );
+
+  const deleteNote = useCallback(async () => {
+    try {
+      await db.vault.remove(noteRef.current!.id, passwordRef.current || "");
+      await deleteItems("note", [noteRef.current!.id]);
+      close();
+    } catch (e) {
+      takeErrorAction();
+    }
+  }, [close]);
+
+  const takeErrorAction = useCallback(() => {
+    setWrongPassword(true);
+    setVisible(true);
+    setTimeout(() => {
+      ToastManager.show({
+        heading: strings.passwordIncorrect(),
+        type: "error",
+        context: "local"
+      });
+    }, 500);
+  }, []);
+
+  const openNote = useCallback(async () => {
+    try {
+      if (!passwordRef.current) throw new Error("Invalid password");
+
+      const note = await db.vault.open(
+        noteRef.current!.id,
+        passwordRef.current
+      );
+      if (!note) throw new Error("Failed to unlock note.");
+      if (biometricUnlock && !isBiometryEnrolled) {
+        await enrollFingerprint(passwordRef.current || "");
+      }
+
+      const requestType = requestTypeRef.current;
+
+      if (requestType === VaultRequestType.GoToEditor) {
+        openInEditor(note);
+      } else if (requestType === VaultRequestType.ShareNote) {
+        await shareNote(note);
+      } else if (requestType === VaultRequestType.DeleteNote) {
+        await deleteNote();
+      } else if (requestType === VaultRequestType.CopyNote) {
+        await copyNote(note);
+      } else if (
+        requestType === VaultRequestType.CustomAction &&
+        onUnlockRef.current
+      ) {
+        const password = passwordRef.current;
+        const unlock = onUnlockRef.current;
+        close();
+        await sleep(500);
+        unlock(note, password);
+      }
+    } catch (e) {
+      takeErrorAction();
+    }
+  }, [
+    biometricUnlock,
+    isBiometryEnrolled,
+    openInEditor,
+    shareNote,
+    deleteNote,
+    copyNote,
+    close,
+    takeErrorAction
+  ]);
+
+  const unlockNote = useCallback(async () => {
+    if (!passwordRef.current || passwordRef.current.trim() === "") {
+      ToastManager.show({
+        heading: strings.passwordIncorrect(),
+        type: "error",
+        context: "local"
+      });
+      return;
+    }
+    if (requestTypeRef.current === VaultRequestType.PermanentUnlock) {
+      permanantUnlock();
+    } else {
+      await openNote();
+    }
+  }, [permanantUnlock, openNote]);
+
+  const enrollFingerprint = useCallback(
+    async (password: string) => {
+      setLoading(true);
+      try {
+        await db.vault.unlock(password);
+        await BiometricService.storeCredentials(password);
+        setLoading(false);
+        eSendEvent("vaultUpdated");
+        ToastManager.show({
+          heading: strings.biometricUnlockEnabled(),
+          type: "success",
+          context: "global"
+        });
+        close();
+      } catch (e) {
+        close();
+        ToastManager.show({
+          heading: strings.passwordIncorrect(),
+          type: "error",
+          context: "local"
+        });
+        setLoading(false);
+      }
+    },
+    [close]
+  );
+
+  const createVault = useCallback(async () => {
+    await db.vault.create(passwordRef.current || "");
+
+    if (biometricUnlock) {
+      await enrollFingerprint(passwordRef.current || "");
+    }
+    if (noteRef.current?.id) {
+      await db.vault.add(noteRef.current.id);
+      eSendEvent(eUpdateNoteInEditor, noteRef.current, true);
+      setLoading(false);
+      ToastManager.show({
+        heading: strings.noteLocked(),
+        type: "success",
+        context: "global"
+      });
+      close();
+    } else {
+      ToastManager.show({
+        heading: strings.vaultCreated(),
+        type: "success",
+        context: "global"
+      });
+      close();
+    }
+    eSendEvent("vaultUpdated");
+  }, [biometricUnlock, enrollFingerprint, close]);
+
+  const revokeFingerprintAccess = useCallback(async () => {
+    try {
+      await BiometricService.resetCredentials();
+      eSendEvent("vaultUpdated");
+      ToastManager.show({
+        heading: strings.biometricUnlockDisabled(),
+        type: "success",
+        context: "global"
+      });
+    } catch (e: any) {
+      ToastManager.show({
+        heading: e.message,
+        type: "success",
+        context: "global"
+      });
+    }
+  }, []);
+
+  const onPressFingerprintAuth = useCallback(
+    async (title?: string, description?: string) => {
+      try {
+        const credentials = await BiometricService.getCredentials(
+          title || titleRef.current,
+          description || descriptionRef.current || ""
+        );
+
+        if (!credentials) throw new Error("Failed to get user credentials");
+
+        if (credentials?.password) {
+          passwordRef.current = credentials.password;
+          onPress();
+        } else {
+          eSendEvent(eCloseActionSheet);
+          await sleep(300);
+          setVisible(true);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    []
+  );
+
+  const onPress = useCallback(async () => {
+    const requestType = requestTypeRef.current;
+
+    if (requestType === VaultRequestType.RevokeFingerprint) {
+      await revokeFingerprintAccess();
+      close();
+      return;
+    }
+
+    if (loading) return;
+
+    if (!passwordRef.current) {
+      ToastManager.show({
+        heading: strings.passwordNotEntered(),
+        type: "error",
+        context: "local"
+      });
+      return;
+    }
+
+    if (requestType === VaultRequestType.CreateVault) {
+      if (passwordRef.current !== confirmPasswordRef.current) {
+        ToastManager.show({
+          heading: strings.passwordNotMatched(),
+          type: "error",
+          context: "local"
+        });
+        setPasswordsDontMatch(true);
+        return;
+      }
+
+      createVault();
+    } else if (requestType === VaultRequestType.ChangePassword) {
+      setLoading(true);
+
+      db.vault
+        .changePassword(passwordRef.current, newPasswordRef.current || "")
+        .then(() => {
+          setLoading(false);
+          if (biometricUnlock) {
+            enrollFingerprint(newPasswordRef.current || "");
+          }
+          ToastManager.show({
+            heading: strings.passwordUpdated(),
+            type: "success",
+            context: "global"
+          });
+          close();
+        })
+        .catch((e) => {
+          setLoading(false);
+          if (e.message === VAULT_ERRORS.wrongPassword) {
+            ToastManager.show({
+              heading: strings.passwordIncorrect(),
+              type: "error",
+              context: "local"
+            });
+          } else {
+            ToastManager.error(e);
+          }
+        });
+    } else if (requestType === VaultRequestType.LockNote) {
+      if (!passwordRef.current || passwordRef.current.trim() === "") {
+        ToastManager.show({
+          heading: strings.passwordIncorrect(),
+          type: "error",
+          context: "local"
+        });
+        setWrongPassword(true);
+        return;
+      }
+      db.vault
+        .unlock(passwordRef.current)
+        .then(async (unlocked) => {
+          if (unlocked) {
+            setWrongPassword(false);
+            await lockNote();
+          } else {
+            takeErrorAction();
+          }
+        })
+        .catch((e) => {
+          takeErrorAction();
+        });
+    } else if (
+      requestType === VaultRequestType.UnlockNote ||
+      requestType === VaultRequestType.PermanentUnlock ||
+      requestType === VaultRequestType.GoToEditor ||
+      requestType === VaultRequestType.ShareNote ||
+      requestType === VaultRequestType.CopyNote ||
+      requestType === VaultRequestType.DeleteNote ||
+      requestType === VaultRequestType.CustomAction
+    ) {
+      if (!passwordRef.current || passwordRef.current.trim() === "") {
+        ToastManager.show({
+          heading: strings.passwordIncorrect(),
+          type: "error",
+          context: "local"
+        });
+        setWrongPassword(true);
+        return;
+      }
+      if (noteLockedRef.current) {
+        await unlockNote();
+      } else {
+        console.log("Error: Note should be locked for this operation");
+      }
+    } else if (requestType === VaultRequestType.EnableFingerprint) {
+      enrollFingerprint(passwordRef.current);
+    } else if (requestType === VaultRequestType.ClearVault) {
+      await clearVault();
+    } else if (requestType === VaultRequestType.DeleteVault) {
+      await deleteVault();
+    }
+  }, [
+    loading,
+    biometricUnlock,
+    revokeFingerprintAccess,
+    close,
+    createVault,
+    enrollFingerprint,
+    unlockNote,
+    lockNote,
+    takeErrorAction,
+    clearVault,
+    deleteVault
+  ]);
+
+  useEffect(() => {
+    eSubscribeEvent(eOpenVaultDialog, open);
+    eSubscribeEvent(eCloseVaultDialog, close);
+
+    return () => {
+      eUnSubscribeEvent(eOpenVaultDialog, open);
+      eUnSubscribeEvent(eCloseVaultDialog, close);
+    };
+  }, [open, close]);
+
+  if (!visible) return null;
+
+  const requestType = requestTypeRef.current;
+  const isCreateVault = requestType === VaultRequestType.CreateVault;
+  const isChangePassword = requestType === VaultRequestType.ChangePassword;
+  const isClearVault = requestType === VaultRequestType.ClearVault;
+  const isDeleteVault = requestType === VaultRequestType.DeleteVault;
+  const isRevokeFingerprint =
+    requestType === VaultRequestType.RevokeFingerprint;
+  const isEnableFingerprint =
+    requestType === VaultRequestType.EnableFingerprint;
+  const isCustomAction = requestType === VaultRequestType.CustomAction;
+  const isDeleteNote = requestType === VaultRequestType.DeleteNote;
+  const isShareNote = requestType === VaultRequestType.ShareNote;
+  const isGoToEditor = requestType === VaultRequestType.GoToEditor;
+
+  return (
+    <BaseDialog
+      onShow={async () => {
+        await sleep(100);
+        passInputRef.current?.focus();
+      }}
+      statusBarTranslucent={false}
+      onRequestClose={close}
+      visible={true}
+    >
+      <View
+        style={{
+          ...getElevationStyle(5),
+          width: DDS.isTab ? 350 : "85%",
+          borderRadius: 10,
+          backgroundColor: colors.primary.background,
+          paddingTop: 12
+        }}
+      >
+        <DialogHeader
+          title={titleRef.current}
+          paragraph={
+            paragraphRef.current || customActionParagraphRef.current || ""
+          }
+          icon="shield"
+          padding={12}
+        />
+        <Seperator half />
+
+        <View
+          style={{
+            paddingHorizontal: DefaultAppStyles.GAP
+          }}
+        >
+          {(isChangePassword ||
+            isClearVault ||
+            !isCreateVault ||
+            isDeleteVault ||
+            isCustomAction) &&
+          !isRevokeFingerprint ? (
+            <>
+              <Input
+                fwdRef={passInputRef}
+                editable={!loading}
+                autoCapitalize="none"
+                testID={notesnook.ids.dialogs.vault.pwd}
+                onChangeText={(value) => {
+                  passwordRef.current = value;
+                }}
+                marginBottom={
+                  !biometricUnlock ||
+                  !isBiometryEnrolled ||
+                  isCreateVault ||
+                  isChangePassword ||
+                  isCustomAction
+                    ? 0
+                    : 10
+                }
+                onSubmit={() => {
+                  if (isChangePassword) {
+                    confirmPassRef.current?.focus();
+                  } else {
+                    onPress();
+                  }
+                }}
+                autoComplete="password"
+                returnKeyLabel={
+                  isChangePassword ? strings.next() : titleRef.current
+                }
+                returnKeyType={isChangePassword ? "next" : "done"}
+                secureTextEntry
+                placeholder={
+                  isChangePassword
+                    ? strings.currentPassword()
+                    : strings.password()
+                }
+              />
+
+              {!biometricUnlock ||
+              !isBiometryEnrolled ||
+              !isBiometryAvailable ||
+              isCreateVault ||
+              isChangePassword ||
+              isCustomAction ? null : (
+                <Button
+                  onPress={() =>
+                    onPressFingerprintAuth(strings.unlockNote(), "")
+                  }
+                  icon="fingerprint"
+                  width="100%"
+                  title={strings.unlockWithBiometrics()}
+                  type="transparent"
+                />
+              )}
+            </>
+          ) : null}
+
+          {isDeleteVault && (
+            <Button
+              onPress={() => setDeleteAll(!deleteAll)}
+              icon={
+                deleteAll
+                  ? "check-circle-outline"
+                  : "checkbox-blank-circle-outline"
+              }
+              style={{
+                marginTop: DefaultAppStyles.GAP_VERTICAL
+              }}
+              width="100%"
+              title={strings.deleteAllNotes()}
+              type="errorShade"
+            />
+          )}
+
+          {isChangePassword ? (
+            <>
+              <Seperator half />
+              <Input
+                fwdRef={confirmPassRef}
+                editable={!loading}
+                testID={notesnook.ids.dialogs.vault.changePwd}
+                autoCapitalize="none"
+                onChangeText={(value) => {
+                  newPasswordRef.current = value;
+                }}
+                autoComplete="password"
+                onSubmit={() => {
+                  onPress();
+                }}
+                returnKeyLabel="Change"
+                returnKeyType="done"
+                secureTextEntry
+                placeholder={strings.newPassword()}
+              />
+            </>
+          ) : null}
+
+          {isCreateVault ? (
+            <View>
+              <Input
+                fwdRef={passInputRef}
+                autoCapitalize="none"
+                testID={notesnook.ids.dialogs.vault.pwd}
+                onChangeText={(value) => {
+                  passwordRef.current = value;
+                }}
+                autoComplete="password"
+                returnKeyLabel={strings.next()}
+                returnKeyType="next"
+                secureTextEntry
+                onSubmit={() => {
+                  confirmPassRef.current?.focus();
+                }}
+                placeholder={strings.password()}
+              />
+
+              <Input
+                fwdRef={confirmPassRef}
+                autoCapitalize="none"
+                testID={notesnook.ids.dialogs.vault.pwdAlt}
+                secureTextEntry
+                validationType="confirmPassword"
+                customValidator={() => passwordRef.current || ""}
+                errorMessage="Passwords do not match."
+                onErrorCheck={() => null}
+                marginBottom={0}
+                autoComplete="password"
+                returnKeyLabel="Create"
+                returnKeyType="done"
+                onChangeText={(value) => {
+                  confirmPasswordRef.current = value;
+                  if (value !== passwordRef.current) {
+                    setPasswordsDontMatch(true);
+                  } else {
+                    setPasswordsDontMatch(false);
+                  }
+                }}
+                onSubmit={() => {
+                  onPress();
+                }}
+                placeholder={strings.confirmPassword()}
+              />
+            </View>
+          ) : null}
+
+          {biometricUnlock && !isBiometryEnrolled && !isCreateVault ? (
+            <Paragraph>{strings.vaultEnableBiometrics()}</Paragraph>
+          ) : null}
+
+          {!biometricUnlock &&
+          !isBiometryEnrolled &&
+          isBiometryAvailable &&
+          (requestType === VaultRequestType.CopyNote ||
+            requestType === VaultRequestType.DeleteNote ||
+            requestType === VaultRequestType.ShareNote ||
+            requestType === VaultRequestType.CustomAction ||
+            requestType === VaultRequestType.GoToEditor ||
+            requestType === VaultRequestType.PermanentUnlock ||
+            requestType === VaultRequestType.LockNote) ? (
+            <Button
+              onPress={() => {
+                setBiometricUnlock(!biometricUnlock);
+              }}
+              style={{
+                marginTop: DefaultAppStyles.GAP_VERTICAL
+              }}
+              icon="fingerprint"
+              width="100%"
+              title={strings.unlockWithBiometrics()}
+              iconColor={
+                biometricUnlock ? colors.selected.accent : colors.primary.icon
+              }
+              type={biometricUnlock ? "transparent" : "plain"}
+            />
+          ) : null}
+        </View>
+
+        <DialogButtons
+          onPressNegative={close}
+          onPressPositive={onPress}
+          loading={loading}
+          positiveType={positiveButtonTypeRef.current}
+          positiveTitle={buttonTitleRef.current || strings.unlock()}
+        />
+      </View>
+      <Toast context="local" />
+    </BaseDialog>
+  );
+};

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

@@ -50,7 +50,7 @@ export const Header = ({
   onLeftMenuButtonPress?: () => void;
   renderedInRoute?: RouteName;
   id?: string;
-  title: string;
+  title?: string;
   canGoBack?: boolean;
   onPressDefaultRightButton?: () => void;
   hasSearch?: boolean;
@@ -114,7 +114,16 @@ export const Header = ({
           onLeftButtonPress={onLeftMenuButtonPress}
         />
 
-        {hasSearch ? (
+        {!title ? (
+          <View
+            style={{
+              width: 100,
+              backgroundColor: colors.primary.hover,
+              height: 10,
+              borderRadius: 100
+            }}
+          />
+        ) : hasSearch ? (
           <Paragraph>
             {selectionMode
               ? `${selectedItemsList.length} selected`

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

@@ -252,14 +252,16 @@ const NoteItem = ({
                 {reminder ? (
                   <ReminderTime
                     reminder={reminder}
-                    disabled
                     color={color?.colorCode}
                     textStyle={{
-                      fontSize: AppFontSize.xxxs
+                      fontSize: AppFontSize.xxs
                     }}
-                    iconSize={AppFontSize.xxxs}
+                    short
+                    iconSize={AppFontSize.xxs}
                     style={{
-                      height: "auto"
+                      justifyContent: "flex-start",
+                      paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2,
+                      alignSelf: "flex-start"
                     }}
                   />
                 ) : null}

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

@@ -32,9 +32,11 @@ import { eOnLoadNote, eShowMergeDialog } from "../../../utils/events";
 import { fluidTabsRef } from "../../../utils/global-refs";
 
 import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
+import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store";
+import { editorController } from "../../../screens/editor/tiptap/utils";
+import { RouteParams } from "../../../stores/use-navigation-store";
 import NotePreview from "../../note-history/preview";
 import SelectionWrapper, { selectItem } from "../selection-wrapper";
-import { RouteParams } from "../../../stores/use-navigation-store";
 
 export const openNote = async (
   item: Note,
@@ -63,11 +65,19 @@ export const openNote = async (
       component: <NotePreview note={item} content={content} />
     });
   } else {
+    if (!useTabStore.getState().hasTabForNote(note.id!)) {
+      editorController.current.commands.setLoading(
+        true,
+        useTabStore.getState().currentTab
+      );
+    }
     eSendEvent(eOnLoadNote, {
       item: note
     });
     if (!DDS.isTab) {
-      fluidTabsRef.current?.goToPage("editor");
+      setTimeout(() => {
+        fluidTabsRef.current?.goToPage("editor");
+      }, 32);
     }
   }
 };

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

@@ -77,10 +77,10 @@ export default function List(props: ListProps) {
     props.renderedInRoute === "Notes"
       ? "home"
       : props.renderedInRoute === "Favorites"
-        ? "favorites"
-        : props.renderedInRoute === "Trash" || props.dataType === "trash"
-          ? "trash"
-          : `${props.dataType}s`;
+      ? "favorites"
+      : props.renderedInRoute === "Trash" || props.dataType === "trash"
+      ? "trash"
+      : `${props.dataType}s`;
 
   const groupOptions = useGroupOptions(groupType);
 

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

@@ -131,7 +131,7 @@ function ReorderableList<T extends { id: string }>({
     ]
   );
 
-  function getOrderedItems() {
+  const getOrderedItems = React.useCallback(() => {
     if (!customizableSidebarFeature?.isAllowed) return data;
     const items: T[] = [];
     itemOrderState.forEach((id) => {
@@ -142,7 +142,7 @@ function ReorderableList<T extends { id: string }>({
 
     items.push(...data.filter((i) => !itemOrderState.includes(i.id)));
     return items;
-  }
+  }, [data, customizableSidebarFeature?.isAllowed]);
 
   return (
     <View style={styles.container}>

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

@@ -18,8 +18,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { getFormattedDate } from "@notesnook/common";
+import {
+  EncryptedContentItem,
+  isEncryptedContent,
+  Note,
+  UnencryptedContentItem
+} from "@notesnook/core";
+import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import KeepAwake from "@sayem314/react-native-keep-awake";
+import { diff } from "diffblazer";
 import React, { useEffect, useRef, useState } from "react";
 import { SafeAreaView, Text, View } from "react-native";
 import Animated from "react-native-reanimated";
@@ -32,13 +40,17 @@ import { DDS } from "../../services/device-detection";
 import {
   eSendEvent,
   eSubscribeEvent,
-  eUnSubscribeEvent
+  eUnSubscribeEvent,
+  openVault,
+  VaultRequestType
 } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import Sync from "../../services/sync";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { eOnLoadNote, eShowMergeDialog } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
+import { Dialog } from "../dialog";
 import BaseDialog from "../dialog/base-dialog";
 import DialogButtons from "../dialog/dialog-buttons";
 import DialogContainer from "../dialog/dialog-container";
@@ -47,46 +59,65 @@ import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Seperator from "../ui/seperator";
 import Paragraph from "../ui/typography/paragraph";
-import { diff } from "diffblazer";
-import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../utils/styles";
+import { presentDialog } from "../dialog/functions";
+import { Cipher } from "@notesnook/crypto";
 
 const MergeConflicts = () => {
   const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
-  const [keep, setKeep] = useState(null);
-  const [copy, setCopy] = useState(null);
+  const [selectedContent, setSelectedContent] =
+    useState<UnencryptedContentItem>();
+  const [copyOfDiscardedContent, setCopyOfDiscardedContent] =
+    useState<UnencryptedContentItem>();
   const [dialogVisible, setDialogVisible] = useState(false);
   const insets = useGlobalSafeAreaInsets();
-  const content = useRef(null);
-  const isKeepingConflicted = !keep?.conflicted;
-  const isKeeping = !!keep;
+  const content = useRef<UnencryptedContentItem>(null);
   const { height } = useSettingStore((state) => state.dimensions);
 
   const applyChanges = async () => {
-    let _content = keep;
-    let note = await db.notes.note(_content.noteId);
+    let contentToSave = selectedContent;
+    if (!contentToSave) return;
+    let note = await db.notes.note(contentToSave.noteId);
+    if (!note) return;
     await db.notes.add({
       id: note.id,
       conflicted: false,
-      dateEdited: _content.dateEdited
+      dateEdited: contentToSave.dateEdited
     });
 
-    await db.content.add({
-      id: note.contentId,
-      data: _content.data,
-      type: _content.type,
-      dateResolved: content.current?.conflicted?.dateModified || Date.now(),
-      sessionId: Date.now(),
-      conflicted: false
-    });
+    const noteContent = await db.content.findByNoteId(note.id);
 
-    if (copy) {
+    if (noteContent?.locked) {
+      const selectedContent = contentToSave.conflicted
+        ? noteContent
+        : noteContent.conflicted;
+
+      await db.content.add({
+        id: note.contentId,
+        dateResolved: noteContent?.conflicted?.dateModified || Date.now(),
+        sessionId: `${Date.now()}`,
+        data: selectedContent?.data as Cipher<"base64">,
+        type: selectedContent?.type,
+        locked: true,
+        conflicted: undefined
+      });
+    } else {
+      await db.content.add({
+        id: note.contentId,
+        data: contentToSave.data,
+        type: contentToSave.type,
+        dateResolved: content.current?.conflicted?.dateModified || Date.now(),
+        sessionId: `${Date.now()}`,
+        conflicted: undefined
+      });
+    }
+
+    if (copyOfDiscardedContent) {
       await db.notes.add({
         title: note.title + " (Copy)",
         content: {
-          data: copy.data,
-          type: copy.type
+          data: copyOfDiscardedContent.data,
+          type: copyOfDiscardedContent.type
         }
       });
     }
@@ -103,15 +134,87 @@ const MergeConflicts = () => {
     Sync.run();
   };
 
-  const show = async (item) => {
-    let noteContent = await db.content.get(item.contentId);
-    content.current = { ...noteContent };
-    if (__DEV__) {
-      if (!noteContent.conflicted) {
-        content.current.conflicted = { ...noteContent };
+  const show = async (item: Note) => {
+    const isLocked = await db.vaults.itemExists(item);
+    let noteContent: UnencryptedContentItem;
+    if (isLocked) {
+      openVault({
+        requestType: VaultRequestType.CustomAction,
+        item: item,
+        title: strings.unlockNote(),
+        customActionTitle: strings.unlockNote(),
+        customActionParagraph: strings.unlockNoteToMergeConflicts(),
+        buttonTitle: strings.unlock(),
+        onUnlock: async (item, password) => {
+          if (!item || !password) return;
+          const currentContent = await db.content.get(item.contentId!);
+          try {
+            noteContent = {
+              ...(await db.content.get(item.contentId!)),
+              ...item.content,
+              conflicted: currentContent?.conflicted
+                ? await db.vault.decryptContent(
+                    currentContent?.conflicted as EncryptedContentItem,
+                    password
+                  )
+                : undefined
+            } as UnencryptedContentItem;
+
+            content.current = noteContent;
+            if (__DEV__) {
+              if (!noteContent?.conflicted) {
+                content.current.conflicted = noteContent;
+              }
+            }
+            setVisible(true);
+          } catch (e) {
+            presentDialog({
+              input: true,
+              inputPlaceholder: strings.enterPassword(),
+              title: strings.unlockIncomingNote(),
+              paragraph: strings.unlockIncomingNoteDesc(),
+              positiveText: "Unlock",
+              positivePress: async (password) => {
+                try {
+                  noteContent = {
+                    ...(await db.content.get(item.contentId!)),
+                    ...item.content,
+                    conflicted: currentContent?.conflicted
+                      ? await db.vault.decryptContent(
+                          currentContent?.conflicted as EncryptedContentItem,
+                          password
+                        )
+                      : undefined
+                  } as UnencryptedContentItem;
+
+                  content.current = noteContent;
+                  if (__DEV__) {
+                    if (!noteContent?.conflicted) {
+                      content.current.conflicted = noteContent;
+                    }
+                  }
+                  setVisible(true);
+                  return true;
+                } catch (e) {
+                  return false;
+                }
+              }
+            });
+          }
+        }
+      });
+    } else {
+      noteContent = (await db.content.get(
+        item.contentId!
+      )) as UnencryptedContentItem;
+      content.current = noteContent;
+      if (__DEV__) {
+        if (!noteContent?.conflicted) {
+          content.current.conflicted = noteContent;
+        }
       }
+      setVisible(true);
     }
-    setVisible(true);
   };
 
   useEffect(() => {
@@ -123,8 +226,8 @@ const MergeConflicts = () => {
 
   const close = () => {
     setVisible(false);
-    setCopy(null);
-    setKeep(null);
+    setCopyOfDiscardedContent(undefined);
+    setSelectedContent(undefined);
     setDialogVisible(false);
   };
 
@@ -134,6 +237,12 @@ const MergeConflicts = () => {
     back,
     isCurrent,
     contentToKeep
+  }: {
+    isDiscarded: boolean;
+    keeping: boolean;
+    back: boolean;
+    isCurrent: boolean;
+    contentToKeep: UnencryptedContentItem;
   }) => {
     return (
       <View
@@ -194,7 +303,7 @@ const MergeConflicts = () => {
           {isDiscarded ? (
             <Button
               onPress={() => {
-                setCopy(contentToKeep);
+                setCopyOfDiscardedContent(contentToKeep);
                 setDialogVisible(true);
               }}
               title={strings.saveACopy()}
@@ -222,7 +331,6 @@ const MergeConflicts = () => {
                 paddingHorizontal: DefaultAppStyles.GAP
               }}
               fontSize={AppFontSize.xs}
-              color={colors.error.paragraph}
               onPress={() => {
                 setDialogVisible(true);
               }}
@@ -244,7 +352,9 @@ const MergeConflicts = () => {
                   keeping && !isDiscarded ? strings.undo() : strings.keep()
                 }
                 onPress={() => {
-                  setKeep(keeping && !isDiscarded ? null : contentToKeep);
+                  setSelectedContent(
+                    keeping && !isDiscarded ? undefined : contentToKeep
+                  );
                 }}
               />
             </>
@@ -258,7 +368,6 @@ const MergeConflicts = () => {
     <BaseDialog
       statusBarTranslucent
       transparent={false}
-      animationType="slide"
       animated={false}
       bounce={false}
       onRequestClose={() => {
@@ -266,15 +375,9 @@ const MergeConflicts = () => {
       }}
       centered={false}
       background={colors?.primary.background}
-      supportedOrientations={[
-        "portrait",
-        "portrait-upside-down",
-        "landscape",
-        "landscape-left",
-        "landscape-right"
-      ]}
       visible={true}
     >
+      <Dialog context="merge-conflicts" />
       <SafeAreaView
         style={{
           backgroundColor: colors.primary.background,
@@ -301,15 +404,15 @@ const MergeConflicts = () => {
           style={{
             height: "100%",
             width: "100%",
-            backgroundColor: DDS.isLargeTablet() ? "rgba(0,0,0,0.3)" : null
+            backgroundColor: DDS.isLargeTablet() ? "rgba(0,0,0,0.3)" : undefined
           }}
         >
           <ConfigBar
             back={true}
             isCurrent={true}
-            isDiscarded={isKeeping && isKeepingConflicted}
-            keeping={isKeeping}
-            contentToKeep={content.current}
+            isDiscarded={!!selectedContent && !selectedContent.conflicted}
+            keeping={!!selectedContent}
+            contentToKeep={content.current!}
           />
 
           <Animated.View
@@ -323,15 +426,18 @@ const MergeConflicts = () => {
             <ReadonlyEditor
               editorId="conflictPrimary"
               onLoad={async (loadContent) => {
-                const note = await db.notes.note(content.current?.noteId);
+                const note = await db.notes.note(content.current!.noteId);
                 if (!note) return;
-                loadContent({
-                  id: note.id,
-                  data: diff(
-                    content.current.conflicted.data,
-                    content.current.data
-                  )
-                });
+                if (content.current && content.current.conflicted) {
+                  loadContent({
+                    id: note.id,
+                    data: diff(
+                      (content.current.conflicted as UnencryptedContentItem)
+                        .data,
+                      content.current.data
+                    )
+                  });
+                }
               }}
             />
           </Animated.View>
@@ -339,9 +445,11 @@ const MergeConflicts = () => {
           <ConfigBar
             back={false}
             isCurrent={false}
-            isDiscarded={isKeeping && !isKeepingConflicted}
-            keeping={isKeeping}
-            contentToKeep={content.current.conflicted}
+            isDiscarded={!!selectedContent && !!selectedContent.conflicted}
+            keeping={!!selectedContent}
+            contentToKeep={
+              content.current!.conflicted! as UnencryptedContentItem
+            }
           />
 
           <Animated.View
@@ -354,11 +462,12 @@ const MergeConflicts = () => {
             <ReadonlyEditor
               editorId="conflictSecondary"
               onLoad={async (loadContent) => {
-                const note = await db.notes.note(content.current?.noteId);
+                const note = await db.notes.note(content.current?.noteId!);
                 if (!note) return;
                 loadContent({
                   id: note.id,
-                  data: content.current.conflicted.data
+                  data: (content.current!.conflicted as UnencryptedContentItem)
+                    .data
                 });
               }}
             />

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

@@ -47,7 +47,7 @@ const HistoryItem = ({
 }: {
   index: number;
   items?: VirtualizedGrouping<HistorySession>;
-  note?: Note;
+  note: Note;
 }) => {
   const [item] = useDBItem(index, "noteHistory", items);
   const { colors } = useThemeColors();
@@ -73,6 +73,7 @@ const HistoryItem = ({
             session: getDate(item.dateCreated, item.dateModified)
           }}
           content={content}
+          note={note}
         />
       ),
       context: "note_history"
@@ -135,7 +136,7 @@ export default function NoteHistory({
 
   const renderItem = useCallback(
     ({ index }: { index: number }) => (
-      <HistoryItem index={index} items={history} />
+      <HistoryItem index={index} items={history} note={note} />
     ),
     [history]
   );

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

@@ -37,21 +37,43 @@ import Paragraph from "../ui/typography/paragraph";
 import { diff } from "diffblazer";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../utils/styles";
+import {
+  HistorySession,
+  isEncryptedContent,
+  Note,
+  NoteContent,
+  SessionContentItem,
+  TrashOrItem
+} from "@notesnook/core";
 
 /**
  *
  * @param {any} param0
  * @returns
  */
-export default function NotePreview({ session, content, note }) {
+export default function NotePreview({
+  session,
+  content,
+  note
+}: {
+  session?: HistorySession & { session: string };
+  content:
+    | Partial<
+        NoteContent<boolean> & {
+          title: string;
+        }
+      >
+    | undefined;
+  note: TrashOrItem<Note>;
+}) {
   const { colors } = useThemeColors();
   const [locked, setLocked] = useState(false);
 
   async function restore() {
     if (note && note.type === "trash") {
-      if ((await db.trash.restore(note.id)) === false) return;
+      await db.trash.restore(note.id);
       Navigation.queueRoutesForUpdate();
-      useSelectionStore.getState().setSelectionMode(false);
+      useSelectionStore.getState().setSelectionMode();
       ToastManager.show({
         heading: strings.noteRestored(),
         type: "success"
@@ -59,24 +81,26 @@ export default function NotePreview({ session, content, note }) {
       eSendEvent(eCloseSheet);
       return;
     }
-    await db.noteHistory.restore(session.id);
-    if (useTabStore.getState().hasTabForNote(session?.noteId)) {
-      const note = editorController.current.note.current[session?.noteId];
-      if (note) {
-        eSendEvent(eOnLoadNote, {
-          item: note,
-          forced: true
-        });
+    if (session) {
+      await db.noteHistory.restore(session.id);
+      if (useTabStore.getState().hasTabForNote(session?.noteId)) {
+        const note = editorController.current.note.current[session?.noteId];
+        if (note) {
+          eSendEvent(eOnLoadNote, {
+            item: note,
+            forced: true
+          });
+        }
       }
-    }
-    eSendEvent(eCloseSheet, "note_history");
-    eSendEvent(eCloseSheet);
-    Navigation.queueRoutesForUpdate();
+      eSendEvent(eCloseSheet, "note_history");
+      eSendEvent(eCloseSheet);
+      Navigation.queueRoutesForUpdate();
 
-    ToastManager.show({
-      heading: strings.noteRestoredFromHistory(),
-      type: "success"
-    });
+      ToastManager.show({
+        heading: strings.noteRestoredFromHistory(),
+        type: "success"
+      });
+    }
   }
 
   useEffect(() => {
@@ -91,15 +115,17 @@ export default function NotePreview({ session, content, note }) {
       negativeText: strings.cancel(),
       context: "local",
       positivePress: async () => {
-        await db.trash.delete(note.id);
-        useTrashStore.getState().refresh();
-        useSelectionStore.getState().setSelectionMode(false);
-        ToastManager.show({
-          heading: strings.noteDeleted(),
-          type: "success",
-          context: "local"
-        });
-        eSendEvent(eCloseSheet);
+        if (note) {
+          await db.trash.delete(note.id);
+          useTrashStore.getState().refresh();
+          useSelectionStore.getState().setSelectionMode();
+          ToastManager.show({
+            heading: strings.noteDeleted(),
+            type: "success",
+            context: "local"
+          });
+          eSendEvent(eCloseSheet);
+        }
       },
       positiveType: "error"
     });
@@ -113,8 +139,11 @@ export default function NotePreview({ session, content, note }) {
       }}
     >
       <Dialog context="local" />
-      <DialogHeader padding={12} title={note?.title || session?.session} />
-      {!session?.locked && !locked ? (
+      <DialogHeader
+        padding={12}
+        title={content?.title || note.title || session?.session}
+      />
+      {!session?.locked && !locked && content?.data ? (
         <View
           style={{
             flex: 1,
@@ -125,17 +154,27 @@ export default function NotePreview({ session, content, note }) {
             editorId="historyPreview"
             onLoad={async (loadContent) => {
               try {
-                if (content.data) {
-                  const _note = note || (await db.notes.note(session?.noteId));
-                  const currentContent = await db.content.get(_note.contentId);
-                  loadContent({
-                    data: diff(currentContent.data, content.data),
-                    id: _note.id
-                  });
+                if (content?.data) {
+                  const currentContent = note?.contentId
+                    ? await db.content.get(note.contentId)
+                    : undefined;
+
+                  if (
+                    currentContent?.data &&
+                    !isEncryptedContent(currentContent)
+                  ) {
+                    loadContent({
+                      data: diff(
+                        currentContent?.data || "<p></p>",
+                        content.data as string
+                      ),
+                      id: session?.noteId || note.id
+                    });
+                  }
                 }
               } catch (e) {
                 ToastManager.error(
-                  e,
+                  e as Error,
                   "Failed to load history preview",
                   "local"
                 );
@@ -153,7 +192,9 @@ export default function NotePreview({ session, content, note }) {
           }}
         >
           <Paragraph color={colors.secondary.paragraph}>
-            {strings.encryptedNoteHistoryNotice()}
+            {!content?.data
+              ? strings.noContent()
+              : strings.encryptedNoteHistoryNotice()}
           </Paragraph>
         </View>
       )}

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

@@ -76,6 +76,7 @@ import { IconButton } from "../ui/icon-button";
 import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { db } from "../../common/database";
 
 const Steps = {
   select: 1,
@@ -139,12 +140,12 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
   }, [isFocused, step]);
 
   useEffect(() => {
-    const sub = EV.subscribe(
+    const sub = db.eventManager.subscribe(
       EVENTS.userSubscriptionUpdated,
       (sub: User["subscription"]) => {
         if (sub.plan === SubscriptionPlan.FREE) return;
         if (routeParams.context === "signup") {
-          Navigation.replace("FluidPanelsView", {});
+          Navigation.navigate("FluidPanelsView", {});
         } else {
           Navigation.goBack();
         }
@@ -182,8 +183,9 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
         >
           <IconButton
             name="close"
+            color={colors.primary.icon}
             onPress={() => {
-              Navigation.replace("FluidPanelsView", {});
+              Navigation.navigate("FluidPanelsView", {});
             }}
           />
         </View>
@@ -196,7 +198,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
               return;
             }
             if (routeParams.context === "signup") {
-              Navigation.replace("FluidPanelsView", {});
+              Navigation.navigate("FluidPanelsView", {});
             } else {
               Navigation.goBack();
             }
@@ -654,7 +656,7 @@ After trying all the privacy security oriented note taking apps, for the price a
             type="accent"
             onPress={() => {
               if (routeParams.context === "signup") {
-                Navigation.replace("FluidPanelsView", {});
+                Navigation.navigate("FluidPanelsView", {});
               } else {
                 Navigation.goBack();
               }
@@ -1006,8 +1008,8 @@ const PricingPlanCard = ({
                   : "monthly"
               }`
             : pricingPlans.isGithubRelease
-              ? (WebPlan?.period as string)
-              : (product?.productId as string)
+            ? (WebPlan?.period as string)
+            : (product?.productId as string)
         );
         setStep(Steps.buy);
       }}

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

@@ -1,72 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import React from "react";
-import { View } from "react-native";
-import { useThemeColors } from "@notesnook/theme";
-import { AppFontSize } from "../../utils/size";
-import Paragraph from "../ui/typography/paragraph";
-import { getFormattedDate } from "@notesnook/common";
-import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../utils/styles";
-export const DateMeta = ({ item }) => {
-  const { colors } = useThemeColors();
-
-  function getDateMeta() {
-    let keys = Object.keys(item);
-    if (keys.includes("dateEdited"))
-      keys.splice(
-        keys.findIndex((k) => k === "dateModified"),
-        1
-      );
-    return keys.filter((key) => key.startsWith("date") && key !== "date");
-  }
-
-  const renderItem = (key) =>
-    !item[key] ? null : (
-      <View
-        key={key}
-        style={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2
-        }}
-      >
-        <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
-          {strings.dateDescFromKey(key)}
-        </Paragraph>
-        <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
-          {getFormattedDate(item[key], "date-time")}
-        </Paragraph>
-      </View>
-    );
-
-  return (
-    <View
-      style={{
-        borderTopWidth: 1,
-        borderTopColor: colors.primary.border,
-        paddingHorizontal: DefaultAppStyles.GAP,
-        paddingTop: DefaultAppStyles.GAP_VERTICAL_SMALL
-      }}
-    >
-      {getDateMeta().map(renderItem)}
-    </View>
-  );
-};

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

@@ -0,0 +1,130 @@
+/*
+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, { useState } from "react";
+import { View } from "react-native";
+import { useThemeColors } from "@notesnook/theme";
+import { AppFontSize } from "../../utils/size";
+import Paragraph from "../ui/typography/paragraph";
+import { getFormattedDate } from "@notesnook/common";
+import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
+import DateTimePickerModal from "react-native-modal-datetime-picker";
+import { db } from "../../common/database";
+import { Item, Note } from "@notesnook/core";
+import AppIcon from "../ui/AppIcon";
+export const DateMeta = ({ item }: { item: Item }) => {
+  const { colors, isDark } = useThemeColors();
+  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
+  const [dateCreated, setDateCreated] = useState(item.dateCreated);
+
+  function getDateMeta() {
+    let keys = Object.keys(item);
+    if (keys.includes("dateEdited"))
+      keys.splice(
+        keys.findIndex((k) => k === "dateModified"),
+        1
+      );
+    return keys.filter((key) => key.startsWith("date") && key !== "date");
+  }
+
+  const renderItem = (key: string) =>
+    !item[key as keyof Item] ? null : (
+      <View
+        key={key}
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2
+        }}
+      >
+        <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
+          {strings.dateDescFromKey(
+            key as
+              | "dateDeleted"
+              | "dateEdited"
+              | "dateModified"
+              | "dateCreated"
+              | "dateUploaded"
+          )}
+        </Paragraph>
+        <Paragraph
+          size={AppFontSize.xs}
+          color={colors.secondary.paragraph}
+          onPress={
+            item.type !== "note"
+              ? undefined
+              : () => {
+                  setIsDatePickerVisible(true);
+                }
+          }
+        >
+          {getFormattedDate(
+            key === "dateCreated"
+              ? dateCreated
+              : (item[key as keyof Item] as string),
+            "date-time"
+          )}
+          {key === "dateCreated" && item.type === "note" ? (
+            <>
+              {" "}
+              <AppIcon name="pencil" size={AppFontSize.md} />
+            </>
+          ) : null}
+        </Paragraph>
+      </View>
+    );
+
+  return (
+    <>
+      {item.type === "note" ? (
+        <DateTimePickerModal
+          isVisible={isDatePickerVisible}
+          mode="datetime"
+          onConfirm={async (date: Date) => {
+            await db.notes.add({
+              id: item.id,
+              dateCreated: date.getTime()
+            });
+            setDateCreated(date.getTime());
+            setIsDatePickerVisible(false);
+          }}
+          onCancel={() => {
+            setIsDatePickerVisible(false);
+          }}
+          maximumDate={new Date((item as Note).dateEdited)}
+          isDarkModeEnabled={isDark}
+          is24Hour={db.settings.getTimeFormat() === "24-hour"}
+          date={new Date(dateCreated)}
+        />
+      ) : null}
+
+      <View
+        style={{
+          borderTopWidth: 1,
+          borderTopColor: colors.primary.border,
+          paddingHorizontal: DefaultAppStyles.GAP,
+          paddingTop: DefaultAppStyles.GAP_VERTICAL_SMALL
+        }}
+      >
+        {getDateMeta().map(renderItem)}
+      </View>
+    </>
+  );
+};

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

@@ -39,6 +39,7 @@ import { DateMeta } from "./date-meta";
 import { Items } from "./items";
 import Notebooks from "./notebooks";
 import { TagStrip, Tags } from "./tags";
+import { Dialog } from "../dialog";
 
 const Line = ({ top = 6, bottom = 6 }) => {
   const { colors } = useThemeColors();
@@ -203,6 +204,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
             />
           ) : null}
           <SheetProvider context="properties" />
+          <Dialog context="properties" />
         </View>
       )}
     />

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

@@ -57,6 +57,8 @@ const BOTTOM_BAR_ITEMS: ActionId[] = [
   "export",
   "copy-link",
   "duplicate",
+  "launcher-shortcut",
+  "expiry-date",
   "trash"
 ];
 
@@ -76,6 +78,7 @@ const COLUMN_BAR_ITEMS: ActionId[] = [
   "reorder",
   "rename-color",
   "rename-tag",
+  "launcher-shortcut",
   "restore",
   "trash",
   "delete"
@@ -323,8 +326,9 @@ export const Items = ({
 
   const getTopBarItemChunksOfFour = () => {
     const chunks = [];
-    for (let i = 0; i < topBarItems.length; i += 5) {
-      chunks.push(topBarItems.slice(i, i + 5));
+    const itemCount = shouldShrink ? 4 : 5;
+    for (let i = 0; i < topBarItems.length; i += itemCount) {
+      chunks.push(topBarItems.slice(i, i + itemCount));
     }
     return chunks;
   };
@@ -371,7 +375,8 @@ export const Items = ({
                   style={{
                     flexDirection: "row",
                     paddingHorizontal: DefaultAppStyles.GAP,
-                    gap: 5
+                    gap: 5,
+                    width: width
                   }}
                 >
                   {item.map(renderTopBarItem)}

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

@@ -356,7 +356,7 @@ const ProductItem = (props: {
         (product as RNIap.Subscription)?.productId
       ) ||
       props.pricingPlans.user?.subscription?.productId ===
-        (product as Plan).id);
+        (product as Plan)?.id);
 
   useEffect(() => {
     props.pricingPlans

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

@@ -102,9 +102,17 @@ const TabItemComponent = (props: {
         {props.tab.session?.noteLocked ? (
           <>
             {props.tab.session?.locked ? (
-              <Icon size={AppFontSize.md} name="lock" />
+              <Icon
+                size={AppFontSize.md}
+                name="lock"
+                color={colors.primary.icon}
+              />
             ) : (
-              <Icon size={AppFontSize.md} name="lock-open-outline" />
+              <Icon
+                size={AppFontSize.md}
+                name="lock-open-outline"
+                color={colors.primary.icon}
+              />
             )}
           </>
         ) : null}

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

@@ -118,8 +118,8 @@ const ListBlockItem = ({
           {item?.content.length > 200
             ? item?.content.slice(0, 200) + "..."
             : !item.content || item.content.trim() === ""
-              ? strings.linkNoteEmptyBlock()
-              : item.content}
+            ? strings.linkNoteEmptyBlock()
+            : item.content}
         </Paragraph>
 
         <View

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

@@ -78,12 +78,15 @@ const PublishNoteSheet = ({
   const isFeatureAvailable = useIsFeatureAvailable("monographAnalytics");
   const [isLocked, setIsLocked] = useState(false);
   const [publishing, setPublishing] = useState(false);
+  const customTitle = useRef<string>("");
   const pwdInput = useRef<TextInput>(null);
+  const titleInput = useRef<TextInput>(null);
   const passwordValue = useRef<string>(undefined);
   const monographData = useAsync(async () => {
     return fetchMonographData(note?.id);
   }, []);
   const monograph = monographData.result?.monograph;
+  customTitle.current = monograph?.title || note.title || "";
   const publishUrl = monograph && `${hosts.MONOGRAPH_HOST}/${monograph?.id}`;
   const isPublished = db.monographs.monograph(note?.id);
 
@@ -108,7 +111,7 @@ const PublishNoteSheet = ({
     try {
       if (note?.id) {
         if (isLocked && !passwordValue.current) return;
-        await db.monographs.publish(note.id, {
+        await db.monographs.publish(note.id, customTitle.current, {
           selfDestruct: selfDestruct,
           password: isLocked ? passwordValue.current : undefined
         });
@@ -129,7 +132,6 @@ const PublishNoteSheet = ({
 
     setPublishLoading(false);
   };
-
   const setPublishLoading = (value: boolean) => {
     setPublishing(value);
   };
@@ -245,6 +247,13 @@ const PublishNoteSheet = ({
             </TouchableOpacity>
           ) : null}
 
+          <Input
+            fwdRef={titleInput}
+            onChangeText={(value) => (customTitle.current = value)}
+            defaultValue={customTitle.current}
+            placeholder={strings.noteTitle()}
+          />
+
           <TouchableOpacity
             onPress={() => {
               if (publishing) return;

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

@@ -169,7 +169,7 @@ class RecoveryKeySheet extends React.Component {
   };
 
   onOpen = async () => {
-    let k = await db.user.getEncryptionKey();
+    let k = await db.user.getMasterKey();
     this.user = await db.user.getUser();
     if (k) {
       this.setState({

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

@@ -104,8 +104,8 @@ const ListBlockItem = ({
           {item?.content.length > 200
             ? item?.content.slice(0, 200) + "..."
             : !item.content || item.content.trim() === ""
-              ? strings.linkNoteEmptyBlock()
-              : item.content}
+            ? strings.linkNoteEmptyBlock()
+            : item.content}
         </Paragraph>
 
         <View

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

@@ -114,8 +114,8 @@ export const UserSheet = () => {
                           progress ? `(${progress.current})` : ""
                         }`
                       : lastSyncStatus === SyncStatus.Failed
-                        ? strings.syncFailed()
-                        : strings.synced()}{" "}
+                      ? strings.syncFailed()
+                      : strings.synced()}{" "}
                     {!syncing ? (
                       <TimeSince
                         style={{
@@ -139,8 +139,8 @@ export const UserSheet = () => {
                     !user || lastSyncStatus === SyncStatus.Failed
                       ? colors.error.icon
                       : isOffline
-                        ? colors.static.orange
-                        : colors.success.icon
+                      ? colors.static.orange
+                      : colors.success.icon
                   }
                 />
               </Paragraph>

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

@@ -30,6 +30,7 @@ import ReorderableList from "../list/reorderable-list";
 import { Properties } from "../properties";
 import { useSideBarDraggingStore } from "./dragging-store";
 import { MenuItem } from "./menu-item";
+import { Default_Drag_Action } from "../../hooks/use-actions";
 
 export const ColorSection = React.memo(
   function ColorSection() {
@@ -59,7 +60,7 @@ export const ColorSection = React.memo(
 
     const onLongPress = React.useCallback((item: SideMenuItem) => {
       if (useSideBarDraggingStore.getState().dragging) return;
-      Properties.present(item.data as Color);
+      Properties.present(item.data as Color, false, [Default_Drag_Action]);
     }, []);
 
     const renderIcon = React.useCallback((item: SideMenuItem, size: number) => {

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

@@ -21,15 +21,6 @@ import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-import {
-  NavigationState,
-  Route,
-  SceneMap,
-  SceneRendererProps,
-  TabDescriptor,
-  TabView
-} from "react-native-tab-view";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import { useGroupOptions } from "../../hooks/use-group-options";
@@ -59,7 +50,104 @@ import SettingsService from "../../services/settings";
 import { isFeatureAvailable } from "@notesnook/common";
 import PaywallSheet from "../sheets/paywall";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
-const renderScene = SceneMap({
+
+/**
+ * Simple Tab View Implementation for the Side bar
+ */
+type SimpleRoute = {
+  key: string;
+  title?: string;
+};
+
+type SimpleNavigationState = {
+  index: number;
+  routes: SimpleRoute[];
+};
+
+type SimpleTabBarProps = {
+  navigationState: SimpleNavigationState;
+  jumpTo: (key: string) => void;
+};
+
+type SimpleTabViewProps = {
+  navigationState: SimpleNavigationState;
+  renderScene: ({ route }: { route: SimpleRoute }) => React.ReactNode;
+  renderTabBar?: (props: SimpleTabBarProps) => React.ReactNode;
+  onIndexChange?: (index: number) => void;
+};
+
+const createSceneMap = (
+  scenes: Record<string, React.ComponentType<any>>
+): ((props: { route: SimpleRoute }) => React.ReactNode) => {
+  return ({ route }: { route: SimpleRoute }) => {
+    const SceneComponent = scenes[route.key];
+    if (!SceneComponent) return null;
+    return <SceneComponent />;
+  };
+};
+
+const SimpleTabView = ({
+  navigationState,
+  renderScene,
+  renderTabBar,
+  onIndexChange
+}: SimpleTabViewProps) => {
+  const loadedKeysRef = React.useRef(new Set<string>());
+  const scenesRef = React.useRef(new Map<string, React.ReactNode>());
+  const jumpTo = React.useCallback(
+    (key: string) => {
+      const nextIndex = navigationState.routes.findIndex(
+        (route) => route.key === key
+      );
+      if (nextIndex !== -1 && nextIndex !== navigationState.index) {
+        onIndexChange?.(nextIndex);
+      }
+    },
+    [navigationState.index, navigationState.routes, onIndexChange]
+  );
+
+  const activeKey = navigationState.routes[navigationState.index]?.key;
+  if (activeKey && !loadedKeysRef.current.has(activeKey)) {
+    loadedKeysRef.current.add(activeKey);
+  }
+
+  const getSceneForRoute = React.useCallback(
+    (route: SimpleRoute) => {
+      const cached = scenesRef.current.get(route.key);
+      if (cached) return cached;
+      const created = renderScene({ route });
+      scenesRef.current.set(route.key, created);
+      return created;
+    },
+    [renderScene]
+  );
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View style={{ flex: 1 }}>
+        {navigationState.routes.map((route, routeIndex) => (
+          <View
+            key={route.key}
+            style={{
+              flex: 1,
+              display: navigationState.index === routeIndex ? "flex" : "none"
+            }}
+          >
+            {loadedKeysRef.current.has(route.key)
+              ? getSceneForRoute(route)
+              : navigationState.index === routeIndex
+              ? getSceneForRoute(route)
+              : null}
+          </View>
+        ))}
+      </View>
+
+      {renderTabBar ? renderTabBar({ navigationState, jumpTo }) : null}
+    </View>
+  );
+};
+
+const renderScene = createSceneMap({
   home: SideMenuHome,
   notebooks: SideMenuNotebooks,
   tags: SideMenuTags,
@@ -73,7 +161,7 @@ export const SideMenu = React.memo(
     const [index, setIndex] = React.useState(
       SettingsService.getProperty("defaultSidebarTab")
     );
-    const [routes] = React.useState<Route[]>([
+    const [routes] = React.useState<SimpleRoute[]>([
       {
         key: "home",
         title: "Home"
@@ -98,15 +186,11 @@ export const SideMenu = React.memo(
           paddingLeft: insets.left
         }}
       >
-        <TabView
+        <SimpleTabView
           navigationState={{ index, routes }}
           renderTabBar={(props) => <TabBar {...props} />}
-          tabBarPosition="bottom"
           renderScene={renderScene}
           onIndexChange={setIndex}
-          swipeEnabled={false}
-          animationEnabled={false}
-          lazy
         />
       </View>
     );
@@ -114,12 +198,7 @@ export const SideMenu = React.memo(
   () => true
 );
 
-const TabBar = (
-  props: SceneRendererProps & {
-    navigationState: NavigationState<Route>;
-    options: Record<string, TabDescriptor<Route>> | undefined;
-  }
-) => {
+const TabBar = (props: SimpleTabBarProps) => {
   const dragging = useSideBarDraggingStore((state) => state.dragging);
   const { colors, isDark } = useThemeColors();
   const groupOptions = useGroupOptions(
@@ -356,8 +435,9 @@ const TabBar = (
                       color={colors.primary.icon}
                       onPress={async () => {
                         if (props.navigationState.index === 1) {
-                          const notebooksFeature =
-                            await isFeatureAvailable("notebooks");
+                          const notebooksFeature = await isFeatureAvailable(
+                            "notebooks"
+                          );
                           if (!notebooksFeature.isAllowed) {
                             PaywallSheet.present(notebooksFeature);
                             return;

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

@@ -37,7 +37,7 @@ import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
 import { useSideBarDraggingStore } from "./dragging-store";
 
-function _MenuItem({
+export function MenuItem({
   item,
   index,
   testID,
@@ -151,8 +151,8 @@ function _MenuItem({
               item.icon === "crown"
                 ? colors.static.yellow
                 : isFocused
-                  ? colors.selected.icon
-                  : colors.secondary.icon
+                ? colors.selected.icon
+                : colors.secondary.icon
             }
             size={AppFontSize.md}
           />
@@ -179,12 +179,3 @@ function _MenuItem({
     </Pressable>
   );
 }
-
-export const MenuItem = React.memo(_MenuItem, (prev, next) => {
-  if (
-    prev.item.id !== next.item.id &&
-    prev.item.data?.dateModified !== next.item.data?.dateModified
-  )
-    return false;
-  return true;
-});

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

@@ -98,8 +98,8 @@ export const NotebookItem = ({
           item.depth === 0
             ? undefined
             : item.depth < 6
-              ? 15 * item.depth
-              : 15 * 5,
+            ? 15 * item.depth
+            : 15 * 5,
         width: "100%",
         marginTop: 2
       }}
@@ -187,8 +187,8 @@ export const NotebookItem = ({
               !item.hasChildren || disableExpand
                 ? "book-outline"
                 : expanded
-                  ? "chevron-down"
-                  : "chevron-right"
+                ? "chevron-down"
+                : "chevron-right"
             }
           />
 
@@ -241,6 +241,7 @@ export const NotebookItem = ({
               name="plus"
               size={AppFontSize.md}
               testID={`add-notebook-${index}`}
+              color={colors.primary.icon}
               top={0}
               left={0}
               bottom={0}

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

@@ -31,6 +31,9 @@ import ReorderableList from "../list/reorderable-list";
 import { MenuItem } from "./menu-item";
 import { useThemeColors } from "@notesnook/theme";
 import { DefaultAppStyles } from "../../utils/styles";
+import { useSideBarDraggingStore } from "./dragging-store";
+import { Properties } from "../properties";
+import { Default_Drag_Action } from "../../hooks/use-actions";
 
 export const PinnedSection = React.memo(
   function PinnedSection() {
@@ -57,6 +60,11 @@ export const PinnedSection = React.memo(
       });
     }, []);
 
+    const onLongPress = React.useCallback((item: SideMenuItem) => {
+      if (useSideBarDraggingStore.getState().dragging) return;
+      Properties.present(item.data as Notebook, false, [Default_Drag_Action]);
+    }, []);
+
     const menuItems = useMemo(
       () =>
         menuPins.map((item) => ({
@@ -65,7 +73,8 @@ export const PinnedSection = React.memo(
           icon: item.type === "notebook" ? "notebook-outline" : "pound",
           dataType: item.type,
           data: item,
-          onPress: onPress
+          onPress: onPress,
+          onLongPress: onLongPress
         })) as SideMenuItem[],
       [menuPins, onPress]
     );
@@ -98,6 +107,7 @@ export const PinnedSection = React.memo(
             flexGrow: 1,
             width: "100%"
           }}
+          disableDefaultDrag
           contentContainerStyle={{
             flexGrow: 1
           }}

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

@@ -85,6 +85,7 @@ export function SideMenuHome() {
             keyboardDismissMode="interactive"
             keyboardShouldPersistTaps="handled"
             keyExtractor={() => "scroll-items"}
+            bounces={false}
             renderItem={() => (
               <>
                 <ReorderableList

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

@@ -303,7 +303,7 @@ export const SideMenuTags = () => {
                   } catch (e) {
                     DatabaseLogger.error(e);
                   }
-                }, 500);
+                }, 100);
               }}
               placeholderTextColor={colors.primary.placeholder}
             />

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

@@ -158,22 +158,22 @@ export const Toast = ({ context = "global" }) => {
               toastOptions.icon
                 ? toastOptions.icon
                 : toastOptions.type === "success"
-                  ? "check"
-                  : toastOptions.type === "info"
-                    ? "information"
-                    : "close"
+                ? "check"
+                : toastOptions.type === "info"
+                ? "information"
+                : "close"
             }
             size={isFullToastMessage ? AppFontSize.xxxl : AppFontSize.xl}
             color={
               toastOptions?.icon
                 ? toastOptions?.icon
                 : toastOptions.type === "error"
-                  ? colors.error.icon
-                  : toastOptions.type === "info"
-                    ? isDark
-                      ? colors.static.white
-                      : colors.static.black
-                    : colors.success.icon
+                ? colors.error.icon
+                : toastOptions.type === "info"
+                ? isDark
+                  ? colors.static.white
+                  : colors.static.black
+                : colors.success.icon
             }
           />
 

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

@@ -20,6 +20,7 @@ import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { ColorValue, TextProps } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import EvilIcon from "react-native-vector-icons/EvilIcons";
 import { AppFontSize } from "../../../utils/size";
 
 export interface IconProps extends TextProps {
@@ -43,11 +44,22 @@ export interface IconProps extends TextProps {
    *
    */
   color?: ColorValue | number | undefined;
+
+  iconFamily?: "evilicons" | "material";
 }
 
-export default function AppIcon(props: IconProps) {
+export default function AppIcon({
+  iconFamily = "material",
+  ...props
+}: IconProps) {
   const { colors } = useThemeColors();
-  return (
+  return iconFamily === "evilicons" ? (
+    <EvilIcon
+      size={AppFontSize.md}
+      color={colors.primary.icon}
+      {...(props as any)}
+    />
+  ) : (
     <Icon
       size={AppFontSize.md}
       color={colors.primary.icon}

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

@@ -107,7 +107,7 @@ export const IconButton = ({
         color={
           restProps.disabled
             ? RGB_Linear_Shade(-0.05, hexToRGBA(colors.secondary.background))
-            : colors.static[color as never] || color
+            : colors.static[color as never] || color || colors.primary.icon
         }
         size={size}
       />

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

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

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

@@ -268,8 +268,8 @@ export const Pressable = ({
   const opacity = customOpacity
     ? customOpacity
     : type === "accent"
-      ? 1
-      : colorOpacity;
+    ? 1
+    : colorOpacity;
   const alpha = customAlpha ? customAlpha : isDark ? 0.03 : -0.03;
   const { fontScale } = useWindowDimensions();
   const growFactor = 1 + (fontScale - 1) / 8;

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

@@ -41,7 +41,9 @@ export const ReminderTime = ({
 } & ButtonProps) => {
   const { colors } = useThemeColors();
   const reminder = props.reminder;
-  const time = !reminder ? undefined : getFormattedReminderTime(reminder);
+  const time = !reminder
+    ? undefined
+    : getFormattedReminderTime(reminder, props.short || false);
   const isTodayOrTomorrow =
     (time?.includes("Today") || time?.includes("Tomorrow")) &&
     !time?.includes("Last");

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

@@ -159,7 +159,7 @@ const SheetWrapper = ({
         {bottomPadding ? (
           <View
             style={{
-              height: bottomInsets
+              height: 10
             }}
           />
         ) : null}

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

@@ -17,12 +17,15 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 /* eslint-disable no-inner-declarations */
-import { useAreFeaturesAvailable } from "@notesnook/common";
+import { isFeatureAvailable, useAreFeaturesAvailable } from "@notesnook/common";
 import {
+  Color,
   createInternalLink,
+  isEncryptedContent,
   Item,
   ItemReference,
   Note,
+  Notebook,
   VAULT_ERRORS
 } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
@@ -30,7 +33,7 @@ import { useThemeColors } from "@notesnook/theme";
 import { DisplayedNotification } from "@notifee/react-native";
 import Clipboard from "@react-native-clipboard/clipboard";
 import React, { useEffect, useRef, useState } from "react";
-import { InteractionManager, Platform } from "react-native";
+import { InteractionManager, Platform, View } from "react-native";
 import Share from "react-native-share";
 import { DatabaseLogger, db } from "../common/database";
 import { AttachmentDialog } from "../components/attachments";
@@ -52,7 +55,8 @@ import {
   eSubscribeEvent,
   openVault,
   presentSheet,
-  ToastManager
+  ToastManager,
+  VaultRequestType
 } from "../services/event-manager";
 import Navigation from "../services/navigation";
 import Notifications from "../services/notifications";
@@ -65,11 +69,13 @@ import { useSelectionStore } from "../stores/use-selection-store";
 import { useSettingStore } from "../stores/use-setting-store";
 import { useTagStore } from "../stores/use-tag-store";
 import { useUserStore } from "../stores/use-user-store";
-import { eUpdateNoteInEditor } from "../utils/events";
+import { eCloseSheet, eUpdateNoteInEditor } from "../utils/events";
 import { deleteItems } from "../utils/functions";
 import { convertNoteToText } from "../utils/note-to-text";
 import { sleep } from "../utils/time";
-import { resetStoredState } from "./use-stored-state";
+import { NotesnookModule } from "../utils/notesnook-module";
+
+import DatePickerComponent from "../components/date-picker";
 
 export type ActionId =
   | "select"
@@ -114,7 +120,9 @@ export type ActionId =
   | "remove-from-notebook"
   | "trash"
   | "default-homepage"
-  | "default-tag";
+  | "default-tag"
+  | "launcher-shortcut"
+  | "expiry-date";
 
 export type Action = {
   id: ActionId;
@@ -130,6 +138,31 @@ export type Action = {
   locked?: boolean;
 };
 
+export const Default_Drag_Action: Action = {
+  id: "reorder",
+  title: strings.reorder(),
+  icon: "sort-ascending",
+  onPress: async () => {
+    const feature = await isFeatureAvailable("customizableSidebar");
+    if (feature && !feature.isAllowed) {
+      ToastManager.show({
+        message: feature.error,
+        type: "info",
+        context: "local",
+        actionText: strings.upgrade(),
+        func: () => {
+          PaywallSheet.present(feature);
+        }
+      });
+      return;
+    }
+    useSideBarDraggingStore.setState({
+      dragging: true
+    });
+    eSendEvent(eCloseSheet);
+  }
+};
+
 function isNotePinnedInNotifications(item: Item) {
   const pinned = Notifications.getPinnedNotes();
   if (!pinned || pinned.length === 0) {
@@ -158,10 +191,12 @@ export const useActions = ({
     "shortcuts",
     "notebooks",
     "customizableSidebar",
-    "customHomepage"
+    "customHomepage",
+    "androidLauncherShortcuts",
+    "expiringNotes"
   ]);
   const [item, setItem] = useState(propItem);
-  const { colors } = useThemeColors();
+  const { colors, isDark } = useThemeColors();
   const setMenuPins = useMenuStore((state) => state.setMenuPins);
   const [isPinnedToMenu, setIsPinnedToMenu] = useState(
     db.shortcuts.exists(item.id)
@@ -187,7 +222,15 @@ export const useActions = ({
 
   useEffect(() => {
     if (item.type === "note") {
-      db.vaults.itemExists(item).then((locked) => setLocked(locked));
+      db.vaults.itemExists(item).then(async (locked) => {
+        setLocked(locked);
+        if (!locked) {
+          const content = await db.content.findByNoteId(item.id);
+          if (content && isEncryptedContent(content)) {
+            setLocked(true);
+          }
+        }
+      });
     }
   }, [item]);
 
@@ -297,7 +340,6 @@ export const useActions = ({
             id: item.id,
             title: value
           });
-
           eSendEvent(Navigation.routeNames.TaggedNotes);
           InteractionManager.runAfterInteractions(() => {
             useTagStore.getState().refresh();
@@ -376,12 +418,12 @@ export const useActions = ({
 
     if (item.type === "note" && (await db.vaults.itemExists(item))) {
       openVault({
-        deleteNote: true,
-        novault: true,
-        locked: true,
+        requestType: VaultRequestType.DeleteNote,
         item: item,
         title: strings.deleteNote(),
-        description: strings.unlockToDelete()
+        description: strings.unlockToDelete(),
+        buttonTitle: strings.delete(),
+        positiveButtonType: "errorShade"
       });
     } else {
       try {
@@ -435,31 +477,6 @@ export const useActions = ({
       icon: "square-edit-outline",
       onPress: renameColor
     });
-
-    actions.push({
-      id: "reorder",
-      title: strings.reorder(),
-      icon: "sort-ascending",
-      onPress: async () => {
-        if (features && !features.customizableSidebar.isAllowed) {
-          ToastManager.show({
-            message: features.customizableSidebar.error,
-            type: "info",
-            context: "local",
-            actionText: strings.upgrade(),
-            func: () => {
-              PaywallSheet.present(features.customizableSidebar);
-            }
-          });
-          return;
-        }
-        useSideBarDraggingStore.setState({
-          dragging: true
-        });
-        close();
-      },
-      locked: !features?.customizableSidebar.isAllowed
-    });
   }
 
   if (item.type === "reminder") {
@@ -706,26 +723,6 @@ export const useActions = ({
                 type: item.type
               }
         );
-
-        resetStoredState(
-          "app-home-navigtion-key",
-          isHomepage
-            ? undefined
-            : {
-                name:
-                  item.type === "notebook"
-                    ? "Notebook"
-                    : item.type === "tag"
-                      ? "TaggedNotes"
-                      : item.type === "color"
-                        ? "ColorNotes"
-                        : undefined,
-                params: {
-                  item: item,
-                  id: item.id
-                }
-              }
-        );
       }
     });
   }
@@ -880,11 +877,10 @@ export const useActions = ({
           close();
           await sleep(300);
           openVault({
+            requestType: VaultRequestType.ShareNote,
             item: item,
-            novault: true,
-            locked: true,
-            share: true,
-            title: strings.shareNote()
+            title: strings.shareNote(),
+            buttonTitle: strings.share()
           });
         } else {
           processingId.current = "shareNote";
@@ -909,11 +905,10 @@ export const useActions = ({
         close();
         await sleep(300);
         openVault({
+          requestType: VaultRequestType.PermanentUnlock,
           item: item,
-          novault: true,
-          locked: true,
-          permanant: true,
-          title: strings.unlockNote()
+          title: strings.unlockNote(),
+          buttonTitle: strings.unlock()
         });
         return;
       }
@@ -931,17 +926,18 @@ export const useActions = ({
         switch ((e as Error).message) {
           case VAULT_ERRORS.noVault:
             openVault({
+              requestType: VaultRequestType.CreateVault,
               item: item,
-              novault: false,
-              title: strings.createVault()
+              title: strings.createVault(),
+              buttonTitle: strings.lock()
             });
             break;
           case VAULT_ERRORS.vaultLocked:
             openVault({
+              requestType: VaultRequestType.LockNote,
               item: item,
-              novault: true,
-              locked: true,
-              title: strings.lockNote()
+              title: strings.lockNote(),
+              buttonTitle: strings.lock()
             });
             break;
         }
@@ -962,11 +958,10 @@ export const useActions = ({
           close();
           await sleep(300);
           openVault({
-            copyNote: true,
-            novault: true,
-            locked: true,
-            item: item,
-            title: strings.copyNote()
+            requestType: VaultRequestType.CopyNote,
+            item: item as Note,
+            title: strings.copyNote(),
+            buttonTitle: strings.copy()
           });
         } else {
           processingId.current = "copyContent";
@@ -1177,6 +1172,45 @@ export const useActions = ({
         },
         checked: item.archived,
         isToggle: true
+      },
+      {
+        id: "expiry-date",
+        title: item.expiryDate ? strings.unsetExpiry() : strings.setExpiry(),
+        icon: item.expiryDate ? "bomb-off" : "bomb",
+        locked: !features?.expiringNotes?.isAllowed,
+        onPress: async () => {
+          if (item.expiryDate) {
+            await db.notes.setExpiryDate(null, item.id);
+            setItem((await db.notes.note(item.id)) as Item);
+          } else {
+            if (features && !features?.expiringNotes.isAllowed) {
+              ToastManager.show({
+                message: features?.expiringNotes.error,
+                type: "info",
+                actionText: strings.upgrade(),
+                context: "local",
+                func: () => {
+                  PaywallSheet.present(features?.expiringNotes);
+                }
+              });
+              return;
+            }
+
+            presentDialog({
+              context: "properties",
+              component: (close) => (
+                <DatePickerComponent
+                  onCancel={() => close?.()}
+                  onConfirm={async (date) => {
+                    close?.();
+                    await db.notes.setExpiryDate(date.getTime(), item.id);
+                    setItem((await db.notes.note(item.id)) as Item);
+                  }}
+                />
+              )
+            });
+          }
+        }
       }
     );
 
@@ -1207,5 +1241,44 @@ export const useActions = ({
     });
   }
 
+  if (
+    Platform.OS === "android" &&
+    (item.type === "tag" ||
+      item.type === "note" ||
+      item.type === "notebook" ||
+      item.type === "color")
+  ) {
+    actions.push({
+      id: "launcher-shortcut",
+      title: strings.addToHome(),
+      icon: "cellphone-arrow-down",
+      locked: !features?.androidLauncherShortcuts.isAllowed,
+      onPress: async () => {
+        if (features && !features?.androidLauncherShortcuts.isAllowed) {
+          ToastManager.show({
+            message: features?.androidLauncherShortcuts.error,
+            type: "info",
+            actionText: strings.upgrade(),
+            context: "local",
+            func: () => {
+              PaywallSheet.present(features?.androidLauncherShortcuts);
+            }
+          });
+          return;
+        }
+
+        try {
+          await NotesnookModule.addShortcut(
+            item.id,
+            item.type,
+            item.title,
+            (item as Note).headline || (item as Notebook).description || "",
+            (item as Color).colorCode
+          );
+        } catch (e) {}
+      }
+    });
+  }
+
   return actions;
 };

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

@@ -85,7 +85,7 @@ import Notifications from "../services/notifications";
 import PremiumService from "../services/premium";
 import SettingsService from "../services/settings";
 import Sync from "../services/sync";
-import { clearAllStores, initAfterSync, initialize } from "../stores";
+import { clearAllStores, initAfterSync } from "../stores";
 import { refreshAllStores } from "../stores/create-db-collection-store";
 import { useAttachmentStore } from "../stores/use-attachment-store";
 import { useMessageStore } from "../stores/use-message-store";
@@ -94,6 +94,7 @@ import { SyncStatus, useUserStore } from "../stores/use-user-store";
 import { updateStatusBarColor } from "../utils/colors";
 import { BETA } from "../utils/constants";
 import {
+  eAfterSync,
   eCloseSheet,
   eEditorReset,
   eLoginSessionExpired,
@@ -108,6 +109,8 @@ import { NotesnookModule } from "../utils/notesnook-module";
 import { sleep } from "../utils/time";
 import useFeatureManager from "./use-feature-manager";
 import { deleteDCacheFiles } from "../common/filesystem/io";
+import dayjs from "dayjs";
+import { useRelationStore } from "../stores/use-relation-store";
 
 const onCheckSyncStatus = async (type: SyncStatusEvent) => {
   const { disableSync, disableAutoSync } = SettingsService.get();
@@ -160,7 +163,10 @@ const onUserSessionExpired = async () => {
   eSendEvent(eLoginSessionExpired);
 };
 
-const onAppOpenedFromURL = async (event: { url: string }) => {
+const onAppOpenedFromURL = async (event: {
+  url: string;
+  isInitialUrl?: boolean;
+}) => {
   const url = event.url;
 
   try {
@@ -172,7 +178,7 @@ const onAppOpenedFromURL = async (event: { url: string }) => {
       eSendEvent(eOnLoadNote, { newNote: true });
       fluidTabsRef.current?.goToPage("editor", false);
       return;
-    } else if (url.startsWith("https://app.notesnook.com/open_note")) {
+    } else if (url.startsWith("https://app.notesnook.com/open_note?")) {
       const id = new URL(url).searchParams.get("id");
       if (id) {
         const note = await db.notes.note(id);
@@ -184,6 +190,53 @@ const onAppOpenedFromURL = async (event: { url: string }) => {
           fluidTabsRef.current?.goToPage("editor", false);
         }
       }
+    } else if (
+      url.startsWith("https://app.notesnook.com/open_notebook?") &&
+      !event.isInitialUrl
+    ) {
+      const id = new URL(url).searchParams.get("id");
+      if (id) {
+        const notebook = await db.notebooks.notebook(id);
+        if (notebook) {
+          Navigation.navigate("Notebook", {
+            id: notebook.id,
+            canGoBack: true,
+            item: notebook
+          });
+        }
+      }
+    } else if (
+      url.startsWith("https://app.notesnook.com/open_tag?") &&
+      !event.isInitialUrl
+    ) {
+      const id = new URL(url).searchParams.get("id");
+      if (id) {
+        const tag = await db.tags.tag(id);
+        if (tag) {
+          Navigation.navigate("TaggedNotes", {
+            type: "tag",
+            id: tag.id,
+            item: tag,
+            canGoBack: true
+          });
+        }
+      }
+    } else if (
+      url.startsWith("https://app.notesnook.com/open_color?") &&
+      !event.isInitialUrl
+    ) {
+      const id = new URL(url).searchParams.get("id");
+      if (id) {
+        const color = await db.colors.color(id);
+        if (color) {
+          Navigation.navigate("ColoredNotes", {
+            type: "color",
+            id: color.id,
+            item: color,
+            canGoBack: true
+          });
+        }
+      }
     } else if (url.startsWith("https://app.notesnook.com/open_reminder")) {
       const id = new URL(url).searchParams.get("id");
       if (id) {
@@ -280,6 +333,7 @@ const onLogout = async (reason: string) => {
   SettingsService.resetSettings();
   useUserStore.getState().setUser(null);
   useUserStore.getState().setSyncing(false);
+  eSendEvent(eAfterSync);
 };
 
 async function checkForShareExtensionLaunchedInBackground() {
@@ -436,6 +490,28 @@ const IsDatabaseMigrationRequired = () => {
   return true;
 };
 
+let timer: NodeJS.Timeout | null = null;
+let initialDate = -1;
+async function expiringNotesTimer() {
+  if (timer != null) clearInterval(timer);
+
+  if (initialDate === -1) {
+    DatabaseLogger.info("Deleting expired notes at startup");
+    db.notes.deleteExpiredNotes();
+    initialDate = dayjs().date();
+  }
+
+  timer = setInterval(() => {
+    if (dayjs().date() != initialDate) {
+      DatabaseLogger.info("Deleting expired notes");
+      db.notes.deleteExpiredNotes();
+      Navigation.queueRoutesForUpdate();
+      useRelationStore.getState().update();
+      initialDate = dayjs().date();
+    }
+  }, 1000 * 60);
+}
+
 const initializeDatabase = async (password?: string) => {
   if (useUserStore.getState().appLocked) return;
   if (!db.isInitialized) {
@@ -455,16 +531,21 @@ const initializeDatabase = async (password?: string) => {
   if (db.isInitialized) {
     await setAppMessage();
     useSettingStore.getState().setAppLoading(false);
+    useSettingStore.getState().refresh();
     Notifications.setupReminders(true);
     DatabaseLogger.info("Database initialized");
     Notifications.restorePinnedNotes();
+    expiringNotesTimer();
     deleteDCacheFiles();
   }
   Walkthrough.init();
 };
 
 export const useAppEvents = () => {
-  const isAppLoading = useSettingStore((state) => state.isAppLoading);
+  const [isAppLoading, initialUrl] = useSettingStore((state) => [
+    state.isAppLoading,
+    state.initialUrl
+  ]);
   const [setLastSynced, setUser, appLocked, syncing] = useUserStore((state) => [
     state.setLastSynced,
     state.setUser,
@@ -482,6 +563,7 @@ export const useAppEvents = () => {
       initialUrl: string;
       backupDidWait: boolean;
       isConnectingSSE: boolean;
+      attachmentsCachedOfflineMode: boolean;
     }>
   >({});
 
@@ -509,6 +591,15 @@ export const useAppEvents = () => {
     };
   }, [isAppLoading, onSyncComplete]);
 
+  useEffect(() => {
+    if (initialUrl) {
+      onAppOpenedFromURL({
+        url: initialUrl!,
+        isInitialUrl: true
+      });
+    }
+  }, [initialUrl]);
+
   const subscribeToPurchaseListeners = useCallback(async () => {
     if (Platform.OS === "android") {
       try {
@@ -567,7 +658,11 @@ export const useAppEvents = () => {
         }
       }
 
-      if (SettingsService.getProperty("offlineMode")) {
+      if (
+        SettingsService.getProperty("offlineMode") &&
+        !refValues.current.attachmentsCachedOfflineMode
+      ) {
+        refValues.current.attachmentsCachedOfflineMode = true;
         db.attachments.cacheAttachments().catch(() => {
           /* empty */
         });
@@ -634,24 +729,39 @@ export const useAppEvents = () => {
 
   useEffect(() => {
     const subscriptions = [
-      EV.subscribe(EVENTS.syncCheckStatus, onCheckSyncStatus),
-      EV.subscribe(EVENTS.syncAborted, onSyncAborted),
-      EV.subscribe(EVENTS.appRefreshRequested, onSyncComplete),
-      EV.subscribe(EVENTS.userLoggedOut, onLogout),
-      EV.subscribe(EVENTS.userEmailConfirmed, onUserEmailVerified),
-      EV.subscribe(EVENTS.userSessionExpired, onUserSessionExpired),
-      EV.subscribe(
+      db.eventManager.subscribe(EVENTS.syncCheckStatus, onCheckSyncStatus),
+      db.eventManager.subscribe(EVENTS.syncAborted, onSyncAborted),
+      db.eventManager.subscribe(EVENTS.appRefreshRequested, onSyncComplete),
+      db.eventManager.subscribe(EVENTS.userLoggedOut, onLogout),
+      db.eventManager.subscribe(EVENTS.userEmailConfirmed, onUserEmailVerified),
+      db.eventManager.subscribe(
+        EVENTS.userSessionExpired,
+        onUserSessionExpired
+      ),
+      db.eventManager.subscribe(
         EVENTS.userSubscriptionUpdated,
         onUserSubscriptionStatusChanged
       ),
-      EV.subscribe(EVENTS.fileDownload, onDownloadingAttachmentProgress),
-      EV.subscribe(EVENTS.fileUpload, onUploadingAttachmentProgress),
-      EV.subscribe(EVENTS.fileDownloaded, onDownloadedAttachmentProgress),
-      EV.subscribe(EVENTS.fileUploaded, onUploadedAttachmentProgress),
-      EV.subscribe(EVENTS.downloadCanceled, (data) => {
+      db.eventManager.subscribe(
+        EVENTS.fileDownload,
+        onDownloadingAttachmentProgress
+      ),
+      db.eventManager.subscribe(
+        EVENTS.fileUpload,
+        onUploadingAttachmentProgress
+      ),
+      db.eventManager.subscribe(
+        EVENTS.fileDownloaded,
+        onDownloadedAttachmentProgress
+      ),
+      db.eventManager.subscribe(
+        EVENTS.fileUploaded,
+        onUploadedAttachmentProgress
+      ),
+      db.eventManager.subscribe(EVENTS.downloadCanceled, (data) => {
         useAttachmentStore.getState().setDownloading(data);
       }),
-      EV.subscribe(EVENTS.uploadCanceled, (data) => {
+      db.eventManager.subscribe(EVENTS.uploadCanceled, (data) => {
         useAttachmentStore.getState().setUploading(data);
       }),
       EV.subscribe(EVENTS.migrationStarted, (name) => {
@@ -677,7 +787,7 @@ export const useAppEvents = () => {
           return;
         endProgress();
       }),
-      EV.subscribe(EVENTS.vaultLocked, async () => {
+      db.eventManager.subscribe(EVENTS.vaultLocked, async () => {
         // Lock all notes in all tabs...
         for (const tab of useTabStore.getState().tabs) {
           const noteId = useTabStore.getState().getTab(tab.id)?.session?.noteId;
@@ -709,7 +819,6 @@ export const useAppEvents = () => {
     return () => {
       emitterSubscriptions.forEach((sub) => sub?.remove?.());
       subscriptions.forEach((sub) => sub?.unsubscribe?.());
-      EV.unsubscribeAll();
     };
   }, [onSyncComplete, onUserUpdated]);
 
@@ -724,6 +833,7 @@ export const useAppEvents = () => {
       if (state === "active") {
         notifee.setBadgeCount(0);
         updateStatusBarColor();
+        expiringNotesTimer();
         checkAutoBackup();
         Sync.run("global", false, "full");
         reconnectSSE();
@@ -774,23 +884,10 @@ export const useAppEvents = () => {
       }
     };
 
-    if (!refValues.current.initialUrl) {
-      Linking.getInitialURL().then((url) => {
-        if (url) {
-          refValues.current.initialUrl = url;
-        }
-      });
-    }
     let sub: NativeEventSubscription;
     if (!isAppLoading && !appLocked) {
       setTimeout(() => {
         sub = AppState.addEventListener("change", onAppStateChanged);
-        if (refValues.current.initialUrl) {
-          onAppOpenedFromURL({
-            url: refValues.current.initialUrl!
-          });
-          refValues.current.initialUrl = undefined;
-        }
       }, 1000);
 
       refValues.current.removeInternetStateListener = NetInfo.addEventListener(

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

@@ -60,23 +60,17 @@ export const useDBItem = <T extends keyof ItemTypeKey>(
 ): [ItemTypeKey[T] | undefined, () => void] => {
   const [item, setItem] = useState<ItemTypeKey[T]>();
   const itemIdRef = useRef<string>(undefined);
-  const prevIdOrIndexRef = useRef<string | number>(undefined);
-
-  if (prevIdOrIndexRef.current !== idOrIndex) {
-    itemIdRef.current = undefined;
-    prevIdOrIndexRef.current = idOrIndex;
-  }
+  const itemsRef = useRef(item);
+  itemsRef.current = item;
 
   useEffect(() => {
     const onUpdateItem = async (itemId?: string) => {
       if (typeof itemId === "string" && itemId !== itemIdRef.current) return;
       if (!isValidIdOrIndex(idOrIndex)) return;
 
+      let item: ItemTypeKey[T] | undefined = undefined;
       if (items && typeof idOrIndex === "number") {
-        const item = (await items.item(idOrIndex))?.item;
-        setItem(item);
-        itemIdRef.current = item?.id;
-        onItemUpdated?.(item);
+        item = (await items.item(idOrIndex))?.item;
       } else {
         if (!(db as any)[type + "s"][type]) {
           console.warn(
@@ -84,24 +78,30 @@ export const useDBItem = <T extends keyof ItemTypeKey>(
             `db.${type}s.${type}(id: string)`
           );
         } else {
-          const item = await (db as any)[type + "s"]?.[type]?.(
-            idOrIndex as string
-          );
-          setItem(item);
-          itemIdRef.current = item.id;
-          onItemUpdated?.(item);
+          item = await (db as any)[type + "s"]?.[type]?.(idOrIndex as string);
         }
       }
-    };
 
+      if (
+        itemsRef.current === item ||
+        itemsRef.current?.dateModified === item?.dateModified
+      )
+        return;
+      setItem(item);
+      itemIdRef.current = item?.id;
+      onItemUpdated?.(item);
+    };
+    let unsub: (() => void) | undefined;
     if (
       useSettingStore.getState().isAppLoading &&
       //@ts-ignore
       !globalThis["IS_SHARE_EXTENSION"]
     ) {
-      useSettingStore.subscribe((state) => {
+      unsub = useSettingStore.subscribe((state) => {
         if (!state.isAppLoading) {
           onUpdateItem();
+          unsub?.();
+          unsub = undefined;
         }
       });
     } else {
@@ -109,9 +109,10 @@ export const useDBItem = <T extends keyof ItemTypeKey>(
     }
     eSubscribeEvent(eDBItemUpdate, onUpdateItem);
     return () => {
+      unsub?.();
       eUnSubscribeEvent(eDBItemUpdate, onUpdateItem);
     };
-  }, [idOrIndex, type, items, onItemUpdated]);
+  }, [idOrIndex, type, items]);
 
   return [
     isValidIdOrIndex(idOrIndex) ? (item as ItemTypeKey[T]) : undefined,
@@ -134,8 +135,9 @@ export const useNoteLocked = (noteId: string | undefined) => {
       //@ts-ignore
       !globalThis["IS_SHARE_EXTENSION"]
     ) {
-      useSettingStore.subscribe((state) => {
+      let unsub = useSettingStore.subscribe((state) => {
         if (!state.isAppLoading) {
+          unsub();
           db.vaults
             .itemExists({
               type: "note",
@@ -181,25 +183,27 @@ export const useTotalNotes = (type: "notebook" | "tag" | "color") => {
   const [totalNotesById, setTotalNotesById] = useState<{
     [id: string]: number;
   }>({});
+  const totalNotesRef = useRef(0);
 
-  const getTotalNotes = React.useCallback(
-    (ids: string[]) => {
-      if (!ids || !ids.length || !type) return;
-      db.relations
-        .from({ type: type, ids: ids as string[] }, ["note"])
-        .get()
-        .then((relations) => {
-          const totalNotesById: any = {};
-          for (const id of ids) {
-            totalNotesById[id] = relations.filter(
-              (relation) => relation.fromId === id && relation.toType === "note"
-            )?.length;
-          }
-          setTotalNotesById(totalNotesById);
-        });
-    },
-    [type]
-  );
+  const getTotalNotes = React.useCallback((ids: string[]) => {
+    if (!ids || !ids.length || !type) return;
+    db.relations
+      .from({ type: type, ids: ids as string[] }, ["note"])
+      .get()
+      .then((relations) => {
+        const totalNotesById: any = {};
+
+        for (const id of ids) {
+          totalNotesById[id] = relations.filter(
+            (relation) => relation.fromId === id && relation.toType === "note"
+          )?.length;
+        }
+
+        if (totalNotesById === totalNotesRef.current) return;
+        totalNotesRef.current = totalNotesById;
+        setTotalNotesById(totalNotesById);
+      });
+  }, []);
 
   return {
     totalNotes: (id: string) => {

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

@@ -276,8 +276,8 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
           (product as Plan).period === "yearly"
             ? (product as Plan).price.gross
             : (product as Plan).period === "5-year"
-              ? (product as Plan).price.gross
-              : (product as Plan).price.gross
+            ? (product as Plan).price.gross
+            : (product as Plan).price.gross
         }`;
       }
 
@@ -432,8 +432,8 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
       return period.endsWith("W")
         ? "week"
         : period.endsWith("M")
-          ? "month"
-          : "year";
+        ? "month"
+        : "year";
     } else {
       const unit = (product as RNIap.SubscriptionIOS)
         ?.subscriptionPeriodUnitIOS;
@@ -475,8 +475,8 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
         type: phase.billingPeriod.endsWith("W")
           ? "week"
           : phase.billingPeriod.endsWith("M")
-            ? "month"
-            : "year"
+          ? "month"
+          : "year"
       };
     } else {
       const productIos = product as RNIap.SubscriptionIOS;
@@ -607,8 +607,8 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
         (product as Plan).period === "yearly"
           ? ((product as Plan).price.gross / 12).toFixed(2)
           : (product as Plan).period === "5-year"
-            ? ((product as Plan).price.gross / (12 * 5)).toFixed(2)
-            : (product as Plan).price.gross
+          ? ((product as Plan).price.gross / (12 * 5)).toFixed(2)
+          : (product as Plan).price.gross
       }`;
     }
 

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

@@ -29,7 +29,6 @@ export type SyncProgressEventType = {
 
 const useSyncProgress = () => {
   const [progress, setProgress] = useState<SyncProgressEventType>();
-  const EV = db.eventManager;
 
   const onProgress = useCallback(
     ({ type, current, total }: SyncProgressEventType) => {
@@ -42,13 +41,13 @@ const useSyncProgress = () => {
     setProgress(undefined);
   };
   useEffect(() => {
-    EV?.subscribe(EVENTS.syncProgress, onProgress);
-    EV?.subscribe(EVENTS.syncCompleted, onSyncComplete);
+    db.eventManager.subscribe(EVENTS.syncProgress, onProgress);
+    db.eventManager.subscribe(EVENTS.syncCompleted, onSyncComplete);
     return () => {
-      EV?.unsubscribe(EVENTS.syncProgress, onProgress);
-      EV?.unsubscribe(EVENTS.syncCompleted, onSyncComplete);
+      db.eventManager.unsubscribe(EVENTS.syncProgress, onProgress);
+      db.eventManager.unsubscribe(EVENTS.syncCompleted, onSyncComplete);
     };
-  }, [EV, onProgress]);
+  }, [onProgress]);
 
   return {
     progress

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

@@ -243,8 +243,8 @@ export const FluidPanelsView = React.memo(
         const nextDeviceMode = DDS.isLargeTablet()
           ? "tablet"
           : DDS.isSmallTab
-            ? "smallTablet"
-            : "mobile";
+          ? "smallTablet"
+          : "mobile";
         setDeviceMode(nextDeviceMode, size);
       },
       [orientation, setDeviceMode, setDimensions]

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

@@ -31,8 +31,6 @@ import { useSettingStore } from "../stores/use-setting-store";
 import { rootNavigatorRef } from "../utils/global-refs";
 import Navigation from "../services/navigation";
 import { isFeatureAvailable } from "@notesnook/common";
-import { useStoredValue } from "../hooks/use-stored-state";
-import { db } from "../common/database";
 
 const RootStack = createNativeStackNavigator();
 const AppStack = createNativeStackNavigator();
@@ -58,105 +56,117 @@ const AppNavigation = React.memo(
   () => {
     const { colors } = useThemeColors();
     const homepageV2 = useSettingStore((state) => state.settings.homepageV2);
-    const home = useStoredValue(
-      "app-home-navigtion-key",
-      !homepageV2 || homepageV2.id === DEFAULT_HOME.name
-        ? DEFAULT_HOME
-        : undefined
-    );
     const loading = useSettingStore((state) => state.isAppLoading);
+    const [home, setHome] = React.useState<
+      { name: string; params: any } | undefined
+    >(undefined);
 
-    if (!home.value && !homepageV2) {
-      home.value = DEFAULT_HOME;
-    }
+    React.useEffect(() => {
+      if (!home) {
+        if (useSettingStore.getState().initialUrl) {
+          const url = useSettingStore.getState().initialUrl;
+          if (url?.startsWith("https://app.notesnook.com/open_notebook?")) {
+            const id = new URL(url).searchParams.get("id");
+            if (id) {
+              setHome({
+                name: "Notebook",
+                params: {
+                  id: id
+                }
+              });
+              return;
+            }
+          } else if (url?.startsWith("https://app.notesnook.com/open_tag?")) {
+            const id = new URL(url).searchParams.get("id");
+            if (id) {
+              setHome({
+                name: "TaggedNotes",
+                params: {
+                  type: "tag",
+                  id: id
+                }
+              });
+              return;
+            }
+          } else if (url?.startsWith("https://app.notesnook.com/open_color?")) {
+            const id = new URL(url).searchParams.get("id");
+            if (id) {
+              setHome({
+                name: "ColoredNotes",
+                params: {
+                  type: "color",
+                  id: id
+                }
+              });
+              return;
+            }
+          }
+        }
+
+        if (homepageV2) {
+          switch (homepageV2.type) {
+            case "notebook": {
+              setHome({
+                name: "Notebook",
+                params: {
+                  id: homepageV2.id
+                }
+              });
+              return;
+            }
+            case "color": {
+              setHome({
+                name: "ColoredNotes",
+                params: {
+                  type: "color",
+                  id: homepageV2.id
+                }
+              });
+              return;
+            }
+            case "tag": {
+              setHome({
+                name: "TaggedNotes",
+                params: {
+                  type: "tag",
+                  id: homepageV2.id
+                }
+              });
+              return;
+            }
+            case "default":
+              setHome({
+                name: homepageV2.id,
+                params: undefined
+              });
+              return;
+          }
+        } else {
+          setHome(DEFAULT_HOME);
+        }
+      }
+    }, []);
 
     React.useEffect(() => {
       if (!homepageV2 || loading) return;
-      (async () => {
-        isFeatureAvailable("customHomepage").then((value) => {
-          if (!value.isAllowed) {
-            home.value = DEFAULT_HOME;
-            SettingsService.setProperty("homepageV2", undefined);
-          }
-        });
-
-        if (!home.value) {
-          switch (homepageV2.type) {
-            case "notebook":
-              {
-                const notebook = await db.notebooks.notebook(homepageV2.id);
-                if (notebook) {
-                  home.value = {
-                    name: "Notebook",
-                    params: {
-                      item: notebook,
-                      id: notebook.id,
-                      title: notebook.title
-                    }
-                  };
-                  return;
-                }
-              }
-              break;
-            case "color": {
-              const color = await db.colors.color(homepageV2.id);
-              if (color) {
-                home.value = {
-                  name: "ColoredNotes",
-                  params: {
-                    item: color,
-                    id: color.id,
-                    title: color.title
-                  }
-                };
-                return;
-              }
-
-              break;
-            }
-            case "tag": {
-              const tag = await db.tags.tag(homepageV2.id);
-              if (tag) {
-                home.value = {
-                  name: "TaggedNotes",
-                  params: {
-                    item: tag,
-                    id: tag.id,
-                    title: tag.title
-                  }
-                };
-                return;
-              }
-              break;
-            }
-            case "default":
-              {
-                home.value = DEFAULT_HOME;
-              }
-              return;
-          }
-
-          home.value = undefined;
-          setTimeout(() => {
-            home.value = DEFAULT_HOME;
-          });
+      isFeatureAvailable("customHomepage").then((value) => {
+        if (!value.isAllowed) {
+          SettingsService.setProperty("homepageV2", undefined);
         }
-      })();
-    }, [homepageV2, loading, home.value]);
+      });
+    }, [homepageV2, loading]);
 
     React.useEffect(() => {
       if (!home) return;
+      useNavigationStore.getState().update(home?.name as keyof RouteParams);
       useNavigationStore
         .getState()
-        .update(home.value?.name as keyof RouteParams);
-      useNavigationStore
-        .getState()
-        .setFocusedRouteId(home.value?.params?.id || home.value?.name);
+        .setFocusedRouteId(home?.params?.id || home?.name);
     }, [home]);
 
-    return !home.value ? null : (
+    return !home ? null : (
       <AppStack.Navigator
-        initialRouteName={home.value?.name}
+        initialRouteName={home?.name}
         screenOptions={{
           headerShown: false,
           animation: "none",
@@ -197,7 +207,7 @@ const AppNavigation = React.memo(
             return TaggedNotes;
           }}
           initialParams={
-            home.value?.name === "TaggedNotes" ? home.value?.params : undefined
+            home?.name === "TaggedNotes" ? home?.params : undefined
           }
         />
 
@@ -209,7 +219,7 @@ const AppNavigation = React.memo(
             return ColoredNotes;
           }}
           initialParams={
-            home.value?.name === "ColoredNotes" ? home.value?.params : undefined
+            home?.name === "ColoredNotes" ? home?.params : undefined
           }
         />
 
@@ -244,9 +254,7 @@ const AppNavigation = React.memo(
             Notebook = Notebook || require("../screens/notebook").default;
             return Notebook;
           }}
-          initialParams={
-            home.value?.name === "Notebook" ? home.value?.params : undefined
-          }
+          initialParams={home?.name === "Notebook" ? home?.params : undefined}
         />
 
         <AppStack.Screen

apps/mobile/app/screens/add-reminder/index.tsx

@@ -39,17 +39,26 @@ import Input from "../../components/ui/input";
 import { ReminderTime } from "../../components/ui/reminder-time";
 import Paragraph from "../../components/ui/typography/paragraph";
 import { DDS } from "../../services/device-detection";
-import { ToastManager } from "../../services/event-manager";
+import { eSendEvent, ToastManager } from "../../services/event-manager";
 import Navigation, { NavigationProps } from "../../services/navigation";
 import Notifications from "../../services/notifications";
-import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
 import { useRelationStore } from "../../stores/use-relation-store";
+import { useSettingStore } from "../../stores/use-setting-store";
 import { AppFontSize, defaultBorderRadius } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
-import { getFormattedDate, useIsFeatureAvailable } from "@notesnook/common";
+import {
+  getFormattedDate,
+  useIsFeatureAvailable,
+  usePromise
+} from "@notesnook/common";
 import PaywallSheet from "../../components/sheets/paywall";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
+import { Pressable } from "../../components/ui/pressable";
+import { TimeSince } from "../../components/ui/time-since";
+import Heading from "../../components/ui/typography/heading";
+import { eOnLoadNote } from "../../utils/events";
+import { fluidTabsRef } from "../../utils/global-refs";
 
 const ReminderModes =
   Platform.OS === "ios"
@@ -70,17 +79,9 @@ const RecurringModes = {
   Year: "year"
 };
 
-const WeekDays = new Array(7).fill(true);
+const WeekDays = [0, 1, 2, 3, 4, 5, 6];
+const WeekDaysMon = [1, 2, 3, 4, 5, 6, 0];
 const MonthDays = new Array(31).fill(true);
-const WeekDayNames = {
-  0: "Sunday",
-  1: "Monday",
-  2: "Tuesday",
-  3: "Wednesday",
-  4: "Thursday",
-  5: "Friday",
-  6: "Saturday"
-};
 
 const ReminderNotificationModes = {
   Silent: "silent",
@@ -92,6 +93,7 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
   const { reminder, reference } = props.route.params;
   useNavigationFocus(props.navigation, { focusOnInit: true });
   const { colors, isDark } = useThemeColors();
+  const weekFormat = useSettingStore((state) => state.weekFormat);
   const [reminderMode, setReminderMode] = useState<Reminder["mode"]>(
     reminder?.mode || "once"
   );
@@ -121,6 +123,15 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
   const titleRef = useRef<TextInput>(null);
   const descriptionRef = useRef<TextInput>(null);
   const timer = useRef<NodeJS.Timeout>(undefined);
+  const referencedNotes = usePromise(
+    () =>
+      reminder?.id
+        ? db.relations
+            .to({ id: reminder.id, type: "reminder" }, "note")
+            .resolve()
+        : null,
+    [reminder?.id]
+  );
 
   const showDatePicker = () => {
     setDatePickerVisibility(true);
@@ -151,7 +162,8 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
         const isSecondLast = index === selectedDays.length - 2;
         const joinWith = isSecondLast ? " & " : isLast ? "" : ", ";
         return recurringMode === RecurringModes.Week
-          ? WeekDayNames[day as keyof typeof WeekDayNames] + joinWith
+          ? strings.weekDayNames[day as keyof typeof strings.weekDayNames]() +
+              joinWith
           : `${day}${nth(day)} ${joinWith}`;
       })
       .join("");
@@ -243,6 +255,9 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
             marginBottom: DDS.isTab ? 25 : undefined,
             paddingHorizontal: DefaultAppStyles.GAP
           }}
+          contentContainerStyle={{
+            gap: DefaultAppStyles.GAP_VERTICAL
+          }}
           keyboardDismissMode="interactive"
           keyboardShouldPersistTaps="handled"
         >
@@ -277,15 +292,11 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
               paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
             height={80}
-            wrapperStyle={{
-              marginBottom: DefaultAppStyles.GAP_VERTICAL
-            }}
           />
 
           <ScrollView
             style={{
-              flexDirection: "row",
-              marginBottom: DefaultAppStyles.GAP_VERTICAL
+              flexDirection: "row"
             }}
             horizontal
           >
@@ -341,8 +352,7 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
               style={{
                 backgroundColor: colors.secondary.background,
                 padding: DefaultAppStyles.GAP,
-                borderRadius: defaultBorderRadius,
-                marginBottom: DefaultAppStyles.GAP_VERTICAL
+                borderRadius: defaultBorderRadius
               }}
             >
               <View
@@ -390,16 +400,17 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
                 recurringMode === RecurringModes.Year
                   ? null
                   : recurringMode === RecurringModes.Week
-                    ? WeekDays.map((item, index) => (
+                  ? (weekFormat === "Mon" ? WeekDaysMon : WeekDays).map(
+                      (item) => (
                         <Button
                           key={strings.weekDayNamesShort[
-                            index as keyof typeof strings.weekDayNamesShort
+                            item as keyof typeof strings.weekDayNamesShort
                           ]()}
                           title={strings.weekDayNamesShort[
-                            index as keyof typeof strings.weekDayNamesShort
+                            item as keyof typeof strings.weekDayNamesShort
                           ]()}
                           type={
-                            selectedDays.indexOf(index) > -1
+                            selectedDays.indexOf(item) > -1
                               ? "selected"
                               : "plain"
                           }
@@ -411,43 +422,44 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
                           }}
                           onPress={() => {
                             setSelectedDays((days) => {
-                              if (days.indexOf(index) > -1) {
-                                days.splice(days.indexOf(index), 1);
+                              if (days.indexOf(item) > -1) {
+                                days.splice(days.indexOf(item), 1);
                                 return [...days];
                               }
-                              days.push(index);
+                              days.push(item);
                               return [...days];
                             });
                           }}
                         />
-                      ))
-                    : MonthDays.map((item, index) => (
-                        <Button
-                          key={index + "monthday"}
-                          title={index + 1 + ""}
-                          type={
-                            selectedDays.indexOf(index + 1) > -1
-                              ? "selected"
-                              : "plain"
-                          }
-                          fontSize={AppFontSize.xs}
-                          style={{
-                            height: 40,
-                            borderRadius: 100,
-                            marginRight: 10
-                          }}
-                          onPress={() => {
-                            setSelectedDays((days) => {
-                              if (days.indexOf(index + 1) > -1) {
-                                days.splice(days.indexOf(index + 1), 1);
-                                return [...days];
-                              }
-                              days.push(index + 1);
+                      )
+                    )
+                  : MonthDays.map((item, index) => (
+                      <Button
+                        key={index + "monthday"}
+                        title={index + 1 + ""}
+                        type={
+                          selectedDays.indexOf(index + 1) > -1
+                            ? "selected"
+                            : "plain"
+                        }
+                        fontSize={AppFontSize.xs}
+                        style={{
+                          height: 40,
+                          borderRadius: 100,
+                          marginRight: 10
+                        }}
+                        onPress={() => {
+                          setSelectedDays((days) => {
+                            if (days.indexOf(index + 1) > -1) {
+                              days.splice(days.indexOf(index + 1), 1);
                               return [...days];
-                            });
-                          }}
-                        />
-                      ))}
+                            }
+                            days.push(index + 1);
+                            return [...days];
+                          });
+                        }}
+                      />
+                    ))}
               </ScrollView>
             </View>
           ) : null}
@@ -458,7 +470,6 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
                 width: "100%",
                 flexDirection: "column",
                 justifyContent: "center",
-                marginBottom: DefaultAppStyles.GAP_VERTICAL,
                 alignItems: "center"
               }}
             >
@@ -468,6 +479,7 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
                 onConfirm={handleConfirm}
                 onCancel={hideDatePicker}
                 isDarkModeEnabled={isDark}
+                firstDayOfWeek={weekFormat === "Mon" ? 1 : 0}
                 is24Hour={db.settings.getTimeFormat() === "24-hour"}
                 date={date || new Date(Date.now())}
               />
@@ -516,10 +528,8 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
               style={{
                 borderRadius: defaultBorderRadius,
                 flexDirection: "row",
-                paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
                 alignItems: "center",
-                justifyContent: "flex-start",
-                marginBottom: DefaultAppStyles.GAP_VERTICAL
+                justifyContent: "flex-start"
               }}
             >
               <>
@@ -532,45 +542,33 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
                         dayjs(date).format("hh:mm A")
                       )
                     : recurringMode === RecurringModes.Year
-                      ? strings.reminderRepeatStrings.year(
-                          dayjs(date).format("dddd, MMMM D, h:mm A")
-                        )
-                      : selectedDays.length === 7 &&
-                          recurringMode === RecurringModes.Week
-                        ? strings.reminderRepeatStrings.week.daily(
-                            dayjs(date).format("hh:mm A")
-                          )
-                        : selectedDays.length === 0
-                          ? strings.reminderRepeatStrings[
-                              recurringMode as "week" | "month"
-                            ].selectDays()
-                          : strings.reminderRepeatStrings.repeats(
-                              repeatFrequency,
-                              recurringMode as string,
-                              getSelectedDaysText(selectedDays),
-                              dayjs(date).format("hh:mm A")
-                            )}
+                    ? strings.reminderRepeatStrings.year(
+                        dayjs(date).format("dddd, MMMM D, h:mm A")
+                      )
+                    : selectedDays.length === 7 &&
+                      recurringMode === RecurringModes.Week
+                    ? strings.reminderRepeatStrings.week.daily(
+                        dayjs(date).format("hh:mm A")
+                      )
+                    : selectedDays.length === 0
+                    ? strings.reminderRepeatStrings[
+                        recurringMode as "week" | "month"
+                      ].selectDays()
+                    : strings.reminderRepeatStrings.repeats(
+                        repeatFrequency,
+                        recurringMode as string,
+                        getSelectedDaysText(selectedDays),
+                        dayjs(date).format("hh:mm A")
+                      )}
                 </Paragraph>
               </>
             </View>
           )}
 
-          <ReminderTime
-            reminder={reminder}
-            style={{
-              width: "100%",
-              justifyContent: "flex-start",
-              borderWidth: 0,
-              paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
-              alignSelf: "flex-start"
-            }}
-          />
-
           {reminderMode === ReminderModes.Permanent ? null : (
             <ScrollView
               style={{
                 flexDirection: "row",
-                marginTop: DefaultAppStyles.GAP_VERTICAL,
                 height: 50
               }}
               horizontal
@@ -589,8 +587,8 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
                     mode === "Silent"
                       ? "minus-circle"
                       : mode === "Vibrate"
-                        ? "vibrate"
-                        : "volume-high"
+                      ? "vibrate"
+                      : "volume-high"
                   }
                   fontSize={AppFontSize.xs}
                   height={35}
@@ -615,6 +613,60 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
               ))}
             </ScrollView>
           )}
+
+          <ReminderTime
+            reminder={reminder}
+            style={{
+              width: "100%",
+              justifyContent: "flex-start",
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
+              alignSelf: "flex-start"
+            }}
+          />
+
+          {referencedNotes &&
+          referencedNotes.status === "fulfilled" &&
+          referencedNotes.value !== null &&
+          referencedNotes.value?.length > 0 ? (
+            <View
+              style={{
+                gap: DefaultAppStyles.GAP_VERTICAL
+              }}
+            >
+              <Heading size={AppFontSize.md}>{strings.referencedIn()}</Heading>
+              {referencedNotes.value.map((item) => (
+                <Pressable
+                  style={{
+                    justifyContent: "space-between",
+                    flexDirection: "row",
+                    paddingHorizontal: DefaultAppStyles.GAP,
+                    paddingVertical: DefaultAppStyles.GAP_VERTICAL
+                  }}
+                  onPress={() => {
+                    Navigation.navigate("FluidPanelsView");
+                    fluidTabsRef.current?.goToPage("editor");
+                    eSendEvent(eOnLoadNote, {
+                      item: item
+                    });
+                  }}
+                  type="secondary"
+                >
+                  <Paragraph>{item.title}</Paragraph>
+                  <TimeSince
+                    style={{
+                      fontSize: AppFontSize.xxs,
+                      color: colors.secondary.paragraph,
+                      marginRight: 6
+                    }}
+                    time={item.dateEdited}
+                    updateFrequency={
+                      Date.now() - item.dateEdited < 60000 ? 2000 : 60000
+                    }
+                  />
+                </Pressable>
+              ))}
+            </View>
+          ) : null}
         </ScrollView>
       </KeyboardViewIOS>
     </SafeAreaView>

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

@@ -25,7 +25,8 @@ import React, {
   useEffect,
   useImperativeHandle,
   useLayoutEffect,
-  useRef
+  useRef,
+  useState
 } from "react";
 import { Platform, ViewStyle } from "react-native";
 import WebView from "react-native-webview";
@@ -109,17 +110,20 @@ const Editor = React.memo(
         noToolbar,
         noHeader
       });
-      const renderKey = useRef(randId("editor-id") + editorId);
+      const [renderKey, setRenderKey] = useState(
+        randId("editor-id") + editorId
+      );
       useImperativeHandle(ref, () => ({
         get: () => editor
       }));
       useLockedNoteHandler();
 
       const onError = useCallback(() => {
-        renderKey.current = randId("editor-id") + editorId;
+        setRenderKey(randId("editor-id") + editorId);
         editor.state.current.ready = false;
+        editor.state.current.initialLoadCalled = false;
         editor.setLoading(true);
-      }, [editor, editorId]);
+      }, [editor]);
 
       useEffect(() => {
         const sub = [eSubscribeEvent(eEditorReset, onError)];
@@ -144,7 +148,7 @@ const Editor = React.memo(
           <WebView
             testID={notesnook.editor.id}
             ref={editor.ref}
-            key={renderKey.current}
+            key={renderKey}
             onRenderProcessGone={onError}
             nestedScrollEnabled
             onError={onError}
@@ -179,6 +183,7 @@ const Editor = React.memo(
             hideKeyboardAccessoryView={false}
             allowsFullscreenVideo={true}
             allowFileAccessFromFileURLs={true}
+            allowsInlineMediaPlayback
             allowUniversalAccessFromFileURLs={true}
             originWhitelist={["*"]}
             source={{

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

@@ -27,7 +27,7 @@ import {
   KeepLocalCopyResponse,
   pick as pickFile
 } from "@react-native-documents/picker";
-import { basename } from "pathe";
+import { basename, dirname } from "pathe";
 import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 import { Image, openCamera, openPicker } from "react-native-image-crop-picker";
@@ -119,41 +119,30 @@ const file = async (fileOptions: PickerOptions) => {
       throw new Error("Failed to attach file");
     }
 
-    await RNFetchBlob.fs.unlink(uri);
+    RNFetchBlob.fs.unlink(dirname(fileCopyUri.localUri)).catch((e) => {
+      console.log(e, "error");
+    });
 
     if (
       fileOptions.tabId !== undefined &&
       useTabStore.getState().getNoteIdForTab(fileOptions.tabId) ===
         fileOptions.noteId
     ) {
-      if (isImage(file.type || "application/octet-stream")) {
-        editorController.current?.commands.insertImage(
-          {
-            hash: hash,
-            filename: fileName,
-            mime: file.type || "application/octet-stream",
-            size: file.size || 0,
-            dataurl: (await db.attachments.read(hash, "base64")) as string,
-            type: "image"
-          },
-          fileOptions.tabId
-        );
-      } else {
-        editorController.current?.commands.insertAttachment(
-          {
-            hash: hash,
-            filename: fileName,
-            mime: file.type || "application/octet-stream",
-            size: file.size || 0,
-            type: "file"
-          },
-          fileOptions.tabId
-        );
-      }
+      editorController.current?.commands.insertAttachment(
+        {
+          hash: hash,
+          filename: fileName,
+          mime: file.type || "application/octet-stream",
+          size: file.size || 0,
+          type: "file"
+        },
+        fileOptions.tabId
+      );
     } else {
       throw new Error("Failed to attach file, no tabId is set");
     }
   } catch (e) {
+    console.log("ERROR OCCURED HERE.", e);
     ToastManager.show({
       heading: (e as Error).message,
       type: "error",
@@ -264,7 +253,6 @@ const handleImageResponse = async (
   for (const image of response) {
     const isPng = /(png)/g.test(image.mime);
     const isJpeg = /(jpeg|jpg)/g.test(image.mime);
-
     if (compress && (isPng || isJpeg)) {
       image.path = await compressToFile(
         Platform.OS === "ios" ? "file://" + image.path : image.path,
@@ -304,7 +292,7 @@ const handleImageResponse = async (
 
     if (!(await attachFile(uri, hash, image.mime, fileName, options))) return;
 
-    if (Platform.OS === "ios") await RNFetchBlob.fs.unlink(uri);
+    RNFetchBlob.fs.unlink(uri).catch((e) => {});
 
     if (
       options.tabId !== undefined &&
@@ -389,9 +377,7 @@ export async function attachFile(
     return true;
   } catch (e) {
     DatabaseLogger.error(e);
-    if (Platform.OS === "ios") {
-      await RNFetchBlob.fs.unlink(uri);
-    }
+    RNFetchBlob.fs.unlink(uri).catch((e) => {});
     return false;
   }
 }

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

@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import type { ToolbarGroupDefinition } from "@notesnook/editor";
 import { useEditor } from "./use-editor";
 import { FeatureId, FeatureResult } from "@notesnook/common";
+import { DayFormat } from "@notesnook/core";
 export type useEditorType = ReturnType<typeof useEditor>;
 
 export type EditorState = {
@@ -60,6 +61,8 @@ export type Settings = {
   markdownShortcuts: boolean;
   features: Record<any, any>;
   loggedIn: boolean;
+  defaultLineHeight: number;
+  dayFormat: DayFormat;
 };
 
 export type EditorProps = {

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

@@ -28,11 +28,13 @@ import { getDefaultPresets } from "@notesnook/editor/dist/cjs/toolbar/tool-defin
 import { strings } from "@notesnook/intl";
 import Clipboard from "@react-native-clipboard/clipboard";
 import React, { useCallback, useEffect, useRef } from "react";
+import * as ScopedStorage from "react-native-scoped-storage";
 import {
   BackHandler,
   Keyboard,
   KeyboardEventListener,
   NativeEventSubscription,
+  Platform,
   useWindowDimensions
 } from "react-native";
 import { WebViewMessageEvent } from "react-native-webview";
@@ -82,6 +84,9 @@ import { useDragState } from "../../settings/editor/state";
 import { EditorMessage, EditorProps, useEditorType } from "./types";
 import { useTabStore } from "./use-tab-store";
 import { editorState, openInternalLink } from "./utils";
+import filesystem from "../../../common/filesystem";
+import ReactNativeBlobUtil from "react-native-blob-util";
+import { ShareComponent } from "../../../components/sheets/export-notes/share";
 
 const publishNote = async () => {
   const user = useUserStore.getState().user;
@@ -153,16 +158,22 @@ export const useEditorEvents = (
   const features = useAreFeaturesAvailable([
     "callout",
     "outlineList",
-    "taskList"
+    "taskList",
+    "importCsvToTable",
+    "exportTableAsCsv"
   ]);
+
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const fullscreen = useSettingStore((state) => state.fullscreen);
   const corsProxy = useSettingStore((state) => state.settings.corsProxy);
   const loading = useSettingStore((state) => state.isAppLoading);
-  const [dateFormat, timeFormat] = useSettingStore((state) => [
-    state.dateFormat,
-    state.timeFormat
-  ]);
+  const [dateFormat, timeFormat, defaultLineHeight, dayFormat] =
+    useSettingStore((state) => [
+      state.dateFormat,
+      state.timeFormat,
+      state.settings.defaultLineHeight,
+      state.dayFormat
+    ]);
   const handleBack = useRef<NativeEventSubscription>(undefined);
   const loggedIn = useUserStore((state) => !!state.user);
   const { fontScale } = useWindowDimensions();
@@ -222,10 +233,12 @@ export const useEditorEvents = (
       fontFamily: SettingsService.get().defaultFontFamily,
       dateFormat: db.settings?.getDateFormat(),
       timeFormat: db.settings?.getTimeFormat(),
+      dayFormat: db.settings?.getDayFormat(),
       fontScale,
       markdownShortcuts,
       features,
-      loggedIn
+      loggedIn,
+      defaultLineHeight
     });
   }, [
     fullscreen,
@@ -241,10 +254,13 @@ export const useEditorEvents = (
     defaultFontFamily,
     dateFormat,
     timeFormat,
+    dayFormat,
     loading,
     fontScale,
     markdownShortcuts,
-    loggedIn
+    loggedIn,
+    defaultLineHeight,
+    features
   ]);
 
   const onBackPress = useCallback(async () => {
@@ -455,8 +471,9 @@ export const useEditorEvents = (
             relationType: "from",
             title: strings.dataTypesPluralCamelCase.reminder(),
             onAdd: async () => {
-              const reminderFeature =
-                await isFeatureAvailable("activeReminders");
+              const reminderFeature = await isFeatureAvailable(
+                "activeReminders"
+              );
               if (!reminderFeature.isAllowed) {
                 ToastManager.show({
                   type: "info",
@@ -518,15 +535,24 @@ export const useEditorEvents = (
         }
 
         case EditorEvents.getAttachmentData: {
-          const attachment = (editorMessage.value as any)
-            ?.attachment as Attachment;
+          const data = (editorMessage.value as any)?.attachment as Attachment;
 
+          const attachment = await db.attachments.attachment(data.hash);
+
+          if (!attachment) {
+            editor.postMessage(NativeEvents.resolve, {
+              resolverId: editorMessage.resolverId,
+              data: undefined
+            });
+            break;
+          }
           DatabaseLogger.log(
-            `Getting attachment data: ${attachment?.hash} ${attachment?.type}`
+            `Getting attachment data: ${attachment.mimeType} ${attachment.hash} ${data.type}`
           );
           downloadAttachment(attachment.hash, true, {
-            base64: attachment.type === "image",
-            text: attachment.type === "web-clip",
+            base64:
+              data.type === "image" || attachment.mimeType?.startsWith("audio"),
+            text: data.type === "web-clip",
             silent: true,
             groupId: editor.note.current?.id,
             cache: true
@@ -534,7 +560,7 @@ export const useEditorEvents = (
             .then((data: any) => {
               console.log(
                 "Got attachment data:",
-                !!data,
+                data,
                 editorMessage.resolverId
               );
               editor.postMessage(NativeEvents.resolve, {
@@ -733,6 +759,62 @@ export const useEditorEvents = (
           }
           break;
         }
+        case EditorEvents.downloadCsv: {
+          try {
+            const csv = editorMessage.value;
+            let filePath: string;
+            let fileName: string;
+            if (Platform.OS === "android") {
+              let file = await ScopedStorage.createDocument(
+                "table.csv",
+                "text/csv",
+                csv,
+                "utf8"
+              );
+              if (!file) return;
+              filePath = file.path || file.uri;
+              fileName = file.name;
+            } else {
+              const path = await filesystem.checkAndCreateDir("/");
+              let possibleFileName = "table.csv";
+              let counter = 1;
+
+              // Check if file exists and find available filename
+              while (
+                await ReactNativeBlobUtil.fs.exists(path + possibleFileName)
+              ) {
+                possibleFileName = `table (${counter}).csv`;
+                counter++;
+              }
+              await ReactNativeBlobUtil.fs.writeFile(
+                path + possibleFileName,
+                csv,
+                "utf8"
+              );
+              filePath = path + possibleFileName;
+              fileName = possibleFileName;
+            }
+
+            await sleep(500);
+            presentSheet({
+              title: "Table saved to csv",
+              paragraph: strings.fileSaved(fileName, Platform.OS),
+              icon: "download",
+              context: "global",
+              component: (
+                <ShareComponent uri={filePath} name={fileName} padding={12} />
+              )
+            });
+          } catch (e) {
+            ToastManager.show({
+              type: "info",
+              message: "Could not save table to csv"
+            });
+            DatabaseLogger.error(e as Error);
+          }
+
+          break;
+        }
 
         default:
           break;

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

@@ -298,7 +298,7 @@ export const useEditor = (
           return;
         }
 
-        if (isContentInvalid(data) && id) {
+        if (!title && isContentInvalid(data) && id) {
           // Create a new history session if recieved empty or invalid content
           // To ensure that history is preserved for correct content.
           currentSessionHistoryId = editorSessionHistory.newSession(id);
@@ -487,6 +487,17 @@ export const useEditor = (
         };
       } else if (note.contentId) {
         const rawContent = await db.content?.get(note.contentId);
+
+        if (rawContent && isEncryptedContent(rawContent)) {
+          useTabStore.getState().updateTab(useTabStore.getState().currentTab, {
+            session: {
+              noteLocked: true,
+              locked: true
+            }
+          });
+          return;
+        }
+
         if (rawContent && !isDeleted(rawContent) && !rawContent.locked) {
           currentContents.current[note.id] = {
             data: rawContent.data,
@@ -684,8 +695,6 @@ export const useEditor = (
           lastContentChangeTime.current[item.id] = item.dateEdited;
           currentNotes.current[item.id] = item;
 
-          if (!currentNotes.current[item.id]) return;
-
           editorSessionHistory.newSession(item.id);
 
           await commands.setStatus(
@@ -1034,13 +1043,6 @@ export const useEditor = (
     state.current.isRestoringState = false;
   }, []);
 
-  useEffect(() => {
-    eSubscribeEvent(eOnLoadNote + editorId, loadNote);
-    return () => {
-      eUnSubscribeEvent(eOnLoadNote + editorId, loadNote);
-    };
-  }, [editorId, loadNote, restoreEditorState, isDefaultEditor]);
-
   const onContentChanged = (noteId?: string) => {
     if (noteId) {
       lastContentChangeTime.current[noteId] = Date.now();
@@ -1097,10 +1099,15 @@ export const useEditor = (
 
     if (!state.current?.initialLoadCalled) {
       const url = await Linking.getInitialURL();
-      let noteId = url && new URL(url).searchParams.get("id");
+      let noteId =
+        url &&
+        url.startsWith("https://app.notesnook.com/open_note?") &&
+        new URL(url).searchParams.get("id");
       if (noteId) {
         const note = await db.notes?.note(noteId);
         fluidTabsRef.current?.goToPage("editor");
+        loadNoteMutex.cancel();
+        loadNoteMutex.release();
         if (note) {
           loadNote({
             item: note
@@ -1108,6 +1115,8 @@ export const useEditor = (
         }
       } else {
         noteId = useTabStore.getState().getCurrentNoteId() || null;
+        loadNoteMutex.cancel();
+        loadNoteMutex.release();
         if (!noteId) {
           loadNote({ newNote: true });
           if (fluidTabsRef.current?.page() === "editor") {

apps/mobile/app/screens/link-notebooks/index.tsx

@@ -237,8 +237,9 @@ const LinkNotebooks = (props: NavigationProps<"LinkNotebooks">) => {
               button={{
                 icon: "plus",
                 onPress: async () => {
-                  const notebooksFeature =
-                    await isFeatureAvailable("notebooks");
+                  const notebooksFeature = await isFeatureAvailable(
+                    "notebooks"
+                  );
                   if (!notebooksFeature.isAllowed) {
                     ToastManager.show({
                       message: notebooksFeature.error,
@@ -387,8 +388,8 @@ const NotebookItemWrapper = React.memo(
                 !selected
                   ? "selected"
                   : !state.initialState[item.notebook.id]
-                    ? undefined
-                    : "deselected"
+                  ? undefined
+                  : "deselected"
               );
           }}
           canDisableSelectionMode={false}

apps/mobile/app/screens/manage-tags/index.tsx

@@ -17,24 +17,22 @@ 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 { VirtualizedGrouping } from "@notesnook/core";
-import { sanitizeTag } from "@notesnook/core";
-import { Tag } from "@notesnook/core";
+import { LegendList } from "@legendapp/list";
+import { isFeatureAvailable } from "@notesnook/common";
+import { Tag, VirtualizedGrouping, sanitizeTag } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
-import React, {
-  RefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { TextInput, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { TextInput, View, useWindowDimensions } from "react-native";
-import { ActionSheetRef } from "react-native-actions-sheet";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
-import { useDBItem } from "../../hooks/use-db-item";
+import { Header } from "../../components/header";
+import Input from "../../components/ui/input";
+import { Pressable } from "../../components/ui/pressable";
+import Heading from "../../components/ui/typography/heading";
+import Paragraph from "../../components/ui/typography/paragraph";
+import { useNavigationFocus } from "../../hooks/use-navigation-focus";
 import { ToastManager } from "../../services/event-manager";
 import Navigation, { NavigationProps } from "../../services/navigation";
 import {
@@ -43,17 +41,8 @@ import {
 } from "../../stores/item-selection-store";
 import { useRelationStore } from "../../stores/use-relation-store";
 import { useTagStore } from "../../stores/use-tag-store";
-import { defaultBorderRadius, AppFontSize } from "../../utils/size";
-import Input from "../../components/ui/input";
-import { Pressable } from "../../components/ui/pressable";
-import Heading from "../../components/ui/typography/heading";
-import Paragraph from "../../components/ui/typography/paragraph";
-import { strings } from "@notesnook/intl";
+import { AppFontSize, defaultBorderRadius } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
-import { Header } from "../../components/header";
-import { useNavigationFocus } from "../../hooks/use-navigation-focus";
-import { isFeatureAvailable } from "@notesnook/common";
-import { LegendList } from "@legendapp/list";
 
 async function updateInitialSelectionState(items: string[]) {
   const relations = await db.relations
@@ -92,13 +81,12 @@ const useTagItemSelection = createItemSelectionStore(true);
 const ManageTags = (props: NavigationProps<"ManageTags">) => {
   const { colors } = useThemeColors();
   const ids = props.route.params.ids || [];
-  const [tags, setTags] = useState<VirtualizedGrouping<Tag>>();
+  const [tags, setTags] = useState<Tag[]>();
   const [query, setQuery] = useState<string>();
   const inputRef = useRef<TextInput>(null);
-  const [focus, setFocus] = useState(false);
   useNavigationFocus(props.navigation, { focusOnInit: true });
+  const timerRef = useRef<NodeJS.Timeout>(undefined);
   const [queryExists, setQueryExists] = useState(false);
-  const dimensions = useWindowDimensions();
   const refreshSelection = useCallback(() => {
     updateInitialSelectionState(ids).then((selection) => {
       useTagItemSelection.setState({
@@ -109,18 +97,43 @@ const ManageTags = (props: NavigationProps<"ManageTags">) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ids, tags]);
 
+  const sortAndSetTags = useCallback(
+    async (items: VirtualizedGrouping<Tag>) => {
+      const tags = [];
+      const noteTags = [];
+      const assignedTags =
+        ids.length > 1
+          ? []
+          : await db.relations
+              .to({ type: "note", id: ids[0] }, "tag")
+              .resolve();
+
+      for (let i = 0; i < items.placeholders.length; i++) {
+        const item = (await items.item(i)).item;
+        if (item) {
+          if (assignedTags.find((tag) => tag.id === item.id)) {
+            noteTags.push(item);
+          } else {
+            tags.push(item);
+          }
+        }
+      }
+      tags.splice(0, 0, ...noteTags);
+      setTags(tags);
+    },
+    []
+  );
+
   const refreshTags = useCallback(() => {
     if (query && query.trim() !== "") {
       db.lookup
         .tags(query)
         .sorted(db.settings.getGroupOptions("tags"))
-        .then((items) => {
-          setTags(items);
-        });
+        .then(sortAndSetTags);
     } else {
-      db.tags.all.sorted(db.settings.getGroupOptions("tags")).then((items) => {
-        setTags(items);
-      });
+      db.tags.all
+        .sorted(db.settings.getGroupOptions("tags"))
+        .then(sortAndSetTags);
     }
   }, [query]);
 
@@ -241,14 +254,10 @@ const ManageTags = (props: NavigationProps<"ManageTags">) => {
   );
 
   const renderTag = useCallback(
-    ({ index }: { item: boolean; index: number }) => (
-      <TagItem
-        tags={tags as VirtualizedGrouping<Tag>}
-        id={index}
-        onPress={onPress}
-      />
+    ({ index, item }: { item: Tag; index: number }) => (
+      <TagItem tag={item} onPress={onPress} />
     ),
-    [onPress, tags]
+    [onPress]
   );
 
   return (
@@ -280,14 +289,11 @@ const ManageTags = (props: NavigationProps<"ManageTags">) => {
           fwdRef={inputRef}
           autoCapitalize="none"
           onChangeText={(v) => {
-            setQuery(sanitizeTag(v));
-            checkQueryExists(sanitizeTag(v));
-          }}
-          onFocusInput={() => {
-            setFocus(true);
-          }}
-          onBlurInput={() => {
-            setFocus(false);
+            clearTimeout(timerRef.current);
+            timerRef.current = setTimeout(() => {
+              setQuery(sanitizeTag(v));
+              checkQueryExists(sanitizeTag(v));
+            }, 300);
           }}
           onSubmit={() => {
             onSubmit();
@@ -324,7 +330,7 @@ const ManageTags = (props: NavigationProps<"ManageTags">) => {
           }}
         >
           <LegendList
-            data={tags?.placeholders || []}
+            data={tags || []}
             extraData={tags}
             keyboardShouldPersistTaps
             keyboardDismissMode="interactive"
@@ -367,16 +373,13 @@ ManageTags.present = (ids?: string[]) => {
 export default ManageTags;
 
 const TagItem = ({
-  id,
-  tags,
-  onPress
+  onPress,
+  tag
 }: {
-  id: string | number;
-  tags: VirtualizedGrouping<Tag>;
+  tag: Tag;
   onPress: (id: string) => void;
 }) => {
   const { colors } = useThemeColors();
-  const [tag] = useDBItem(id, "tag", tags);
   const selection = useTagItemSelection((state) =>
     tag?.id ? state.selection[tag?.id] : false
   );
@@ -414,15 +417,15 @@ const TagItem = ({
             selection === "selected"
               ? "check-circle-outline"
               : selection === "intermediate"
-                ? "minus-circle-outline"
-                : "checkbox-blank-circle-outline"
+              ? "minus-circle-outline"
+              : "checkbox-blank-circle-outline"
           }
           name={
             selection === "selected"
               ? "check-circle-outline"
               : selection === "intermediate"
-                ? "minus-circle-outline"
-                : "checkbox-blank-circle-outline"
+              ? "minus-circle-outline"
+              : "checkbox-blank-circle-outline"
           }
         />
       )}

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

@@ -242,8 +242,9 @@ export const MoveNotebook = (props: NavigationProps<"MoveNotebook">) => {
               button={{
                 icon: "plus",
                 onPress: async () => {
-                  const notebooksFeature =
-                    await isFeatureAvailable("notebooks");
+                  const notebooksFeature = await isFeatureAvailable(
+                    "notebooks"
+                  );
                   if (!notebooksFeature.isAllowed) {
                     ToastManager.show({
                       message: notebooksFeature.error,

apps/mobile/app/screens/note-preview-configure/index.tsx

@@ -99,7 +99,7 @@ export const NotePreviewConfigure = () => {
   useEffect(() => {
     useSettingStore.getState().setDeviceMode("mobile");
     if (loading) return;
-    db.notes.all.sorted(db.settings.getGroupOptions("notes")).then((notes) => {
+    db.notes.all.sorted(db.settings.getGroupOptions("home")).then((notes) => {
       setItems(notes);
     });
   }, [loading]);
@@ -141,7 +141,7 @@ export const NotePreviewConfigure = () => {
             bounceRef.current = setTimeout(() => {
               if (!value) {
                 db.notes.all
-                  .sorted(db.settings.getGroupOptions("notes"))
+                  .sorted(db.settings.getGroupOptions("home"))
                   .then((notes) => {
                     setItems(notes);
                   });
@@ -149,7 +149,7 @@ export const NotePreviewConfigure = () => {
               }
               db.lookup
                 .notes(value)
-                .sorted()
+                .sorted(db.settings.getGroupOptions("home"))
                 .then((notes) => {
                   setItems(notes);
                 });

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

@@ -38,7 +38,6 @@ import { eUpdateNotebookRoute } from "../../utils/events";
 import { findRootNotebookId } from "../../utils/notebooks";
 import { openEditor, setOnFirstSave } from "../notes/common";
 import { View } from "react-native";
-import { DefaultAppStyles } from "../../utils/styles";
 import { Notebooks } from "../../components/sheets/notebooks";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { rootNavigatorRef } from "../../utils/global-refs";
@@ -47,6 +46,9 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
   const [notes, setNotes] = useState<VirtualizedGrouping<Note>>();
   const params = useRef<NotebookScreenParams>(route?.params);
   const isAppLoading = useSettingStore((state) => state.isAppLoading);
+  const [notebook, setNotebook] = useState<Notebook | undefined>(
+    params.current.item
+  );
   const [loading, setLoading] = useState(true);
   const updateOnFocus = useRef(false);
   const [breadcrumbs, setBreadcrumbs] = useState<
@@ -75,10 +77,10 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
   });
 
   const syncWithNavigation = React.useCallback(() => {
-    useNavigationStore.getState().setFocusedRouteId(params?.current?.item?.id);
+    useNavigationStore.getState().setFocusedRouteId(params?.current?.id);
     setOnFirstSave({
       type: "notebook",
-      id: params.current.item.id
+      id: params.current.id
     });
   }, []);
 
@@ -86,23 +88,20 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
     async (data?: NotebookScreenParams) => {
       if (useSettingStore.getState().isAppLoading) return;
       if (
-        useNavigationStore.getState().focusedRouteId !==
-          params.current.item.id &&
+        useNavigationStore.getState().focusedRouteId !== params.current.id &&
         !data
       ) {
         updateOnFocus.current = true;
         return;
       }
 
-      if (data?.item?.id && params.current.item?.id !== data?.item?.id) {
-        const nextRootNotebookId = await findRootNotebookId(data?.item?.id);
-        const currentNotebookRoot = await findRootNotebookId(
-          params.current.item.id
-        );
+      if (data?.id && params.current?.id !== data?.id) {
+        const nextRootNotebookId = await findRootNotebookId(data?.id);
+        const currentNotebookRoot = await findRootNotebookId(params.current.id);
 
         if (
           nextRootNotebookId !== currentNotebookRoot ||
-          nextRootNotebookId === params.current?.item?.id
+          nextRootNotebookId === params.current?.id
         ) {
           // Never update notebook in route if root is different or if the root is current notebook.
           return;
@@ -112,14 +111,13 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
       if (data) params.current = data;
 
       try {
-        const notebook = await db.notebooks?.notebook(
-          params?.current?.item?.id
-        );
-
+        const notebook = await db.notebooks?.notebook(params?.current?.id);
+        setNotebook(notebook);
+        params.current.item = notebook;
         if (notebook) {
           const breadcrumbs = await db.notebooks.breadcrumbs(notebook.id);
           setBreadcrumbs(breadcrumbs.slice(0, breadcrumbs.length - 1));
-          params.current.item = notebook;
+          params.current.id = notebook.id;
           const notes = await db.relations
             .from(notebook, "note")
             .selector.grouped(db.settings.getGroupOptions("notes"));
@@ -160,29 +158,27 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
     <>
       <Header
         renderedInRoute={route.name}
-        title={params.current.item?.title}
+        title={notebook?.title}
         canGoBack={params?.current?.canGoBack}
         rightButton={{
           name: "dots-vertical",
           onPress: () => {
-            Properties.present(params.current.item);
+            Properties.present(notebook);
           }
         }}
         hasSearch={true}
         onSearch={() => {
-          const selector = db.relations.from(
-            params.current.item,
-            "note"
-          ).selector;
+          if (!notebook) return;
+          const selector = db.relations.from(notebook, "note").selector;
           Navigation.push("Search", {
-            placeholder: strings.searchInRoute(params.current.item?.title),
+            placeholder: strings.searchInRoute(notebook?.title),
             type: "note",
-            title: params.current.item?.title,
+            title: notebook?.title,
             route: route.name,
             items: selector
           });
         }}
-        id={params.current.item?.id}
+        id={notebook?.id}
       />
 
       <DelayLayout wait={loading}>
@@ -192,19 +188,21 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
           onRefresh={() => {
             onRequestUpdate();
           }}
-          id={params.current.item?.id}
+          id={params.current?.id}
           renderedInRoute="Notebook"
-          headerTitle={params.current.item.title}
+          headerTitle={notebook?.title}
           loading={loading}
           CustomLisHeader={
-            <NotebookHeader
-              breadcrumbs={breadcrumbs}
-              notebook={params.current.item}
-              totalNotes={notes?.placeholders.length || 0}
-            />
+            notebook ? (
+              <NotebookHeader
+                breadcrumbs={breadcrumbs}
+                notebook={notebook}
+                totalNotes={notes?.placeholders.length || 0}
+              />
+            ) : undefined
           }
           placeholder={{
-            title: params.current.item?.title,
+            title: notebook?.title!,
             paragraph: strings.notesEmpty(),
             button: strings.addFirstNote(),
             action: openEditor,
@@ -225,7 +223,8 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
           testID="notebookTreeSheet"
           size="small"
           onPress={() => {
-            Notebooks.present(params.current.item);
+            if (!notebook) return;
+            Notebooks.present(notebook);
           }}
           style={{
             position: "relative",
@@ -246,7 +245,7 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
         />
       </View>
       <SelectionHeader
-        id={route.params?.item?.id}
+        id={route.params?.id}
         items={notes}
         type="note"
         renderedInRoute="Notebook"
@@ -260,6 +259,7 @@ NotebookScreen.navigate = async (item: Notebook, canGoBack?: boolean) => {
   const { currentRoute, focusedRouteId } = useNavigationStore.getState();
   if (currentRoute === "Notebooks") {
     Navigation.push("Notebook", {
+      id: item.id,
       item: item,
       canGoBack
     });
@@ -276,22 +276,24 @@ NotebookScreen.navigate = async (item: Notebook, canGoBack?: boolean) => {
       // Update the route in place instead
 
       eSendEvent(eUpdateNotebookRoute, {
-        item: item,
-        title: item.title,
-        canGoBack: canGoBack
+        id: item.id,
+        canGoBack: canGoBack,
+        item: item
       });
     } else {
       // Push a new route
       Navigation.push("Notebook", {
-        item: item,
-        canGoBack
+        id: item.id,
+        canGoBack,
+        item: item
       });
     }
   } else {
     // Push a new route anyways
     Navigation.push("Notebook", {
-      item: item,
-      canGoBack
+      id: item.id,
+      canGoBack,
+      item: item
     });
   }
 };

apps/mobile/app/screens/notes/colored.tsx

@@ -25,7 +25,7 @@ import Navigation, { NavigationProps } from "../../services/navigation";
 import useNavigationStore, {
   NotesScreenParams
 } from "../../stores/use-navigation-store";
-import { PLACEHOLDER_DATA, openEditor, toCamelCase } from "./common";
+import { PLACEHOLDER_DATA, openEditor } from "./common";
 export const ColoredNotes = ({
   navigation,
   route
@@ -45,11 +45,13 @@ export const ColoredNotes = ({
 
 ColoredNotes.get = async (params: NotesScreenParams, grouped = true) => {
   if (!grouped) {
-    return await db.relations.from(params.item, "note").resolve();
+    return await db.relations
+      .from({ id: params.id, type: "color" }, "note")
+      .resolve();
   }
 
   return await db.relations
-    .from(params.item, "note")
+    .from({ id: params.id, type: "color" }, "note")
     .selector.grouped(db.settings.getGroupOptions("notes"));
 };
 
@@ -63,8 +65,10 @@ ColoredNotes.navigate = (item: Color, canGoBack: boolean) => {
   }
 
   Navigation.push<"ColoredNotes">("ColoredNotes", {
-    item: item,
-    canGoBack
+    type: "color",
+    id: item.id,
+    canGoBack,
+    item: item
   });
 };