editor: add tr.scrollIntoView() for table's selectRow()

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

.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

apps/desktop/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@notesnook/desktop",
-  "version": "3.3.9-beta.2",
+  "version": "3.3.11",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@notesnook/desktop",
-      "version": "3.3.9-beta.2",
+      "version": "3.3.11",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {

apps/desktop/package.json

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

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/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,7 +46,7 @@ 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
@@ -58,17 +56,17 @@ 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
@@ -77,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/`:
 
-- `android`: Android native code
-- `ios`: iOS native code
-- `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.
-  - `share`: Code for the iOS Share Extension and Android widget.
-  - `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.
+- `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
 
-There are several other folders at the root:
+## Running E2E tests (Detox)
 
-- `e2e/`: Detox End to end tests
-- `patches/`: Patches for various react native dependencies.
+Detox device defaults in this repo:
 
-### 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 3094
+        versionCode 3096
         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/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,3 +1,8 @@
-- Bug fixes and minor improvements
+- Add support audio playback in editor
+- Sort tags assigned to a note on top when viewing and managing note tags
+- Fix account password changing and account recovery
+- Fix title is editable in readonly mode
+- Allow attaching image as file
+- Minor bug fixes and performance improvements
 
 Thank you for using Notesnook!

apps/mobile/app/app.tsx

@@ -127,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(() => {
@@ -138,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/filesystem/upload.ts

@@ -33,6 +33,8 @@ import {
 } 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
@@ -212,6 +214,9 @@ export async function uploadFile(
     );
 
     if (Platform.OS === "android") {
+      useUserStore.setState({
+        disableAppLockRequests: true
+      });
       const status = await PermissionsAndroid.request(
         "android.permission.POST_NOTIFICATIONS"
       );
@@ -221,6 +226,10 @@ export async function uploadFile(
           type: "info"
         });
       }
+      await sleep(500);
+      useUserStore.setState({
+        disableAppLockRequests: false
+      });
     }
 
     let uploaded = false;

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/dialogs/vault/index.tsx

@@ -56,7 +56,12 @@ import Seperator from "../../ui/seperator";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../../utils/styles";
-import { Note, NoteContent, VAULT_ERRORS } from "@notesnook/core";
+import {
+  isEncryptedContent,
+  Note,
+  NoteContent,
+  VAULT_ERRORS
+} from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 
 export const VaultDialog: React.FC = () => {
@@ -109,9 +114,17 @@ export const VaultDialog: React.FC = () => {
     const biometry = await BiometricService.isBiometryAvailable();
     const available = !!biometry;
     const fingerprint = await BiometricService.hasInternetCredentials();
-    const noteLocked = data.item
-      ? await db.vaults.itemExists(data.item)
-      : false;
+
+    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;
@@ -122,7 +135,6 @@ export const VaultDialog: React.FC = () => {
     positiveButtonTypeRef.current = data.positiveButtonType || "transparent";
     customActionTitleRef.current = data.customActionTitle || null;
     customActionParagraphRef.current = data.customActionParagraph || null;
-    noteLockedRef.current = noteLocked;
     onUnlockRef.current = data.onUnlock;
     requestTypeRef.current = data.requestType;
 
@@ -417,9 +429,10 @@ export const VaultDialog: React.FC = () => {
         onUnlockRef.current
       ) {
         const password = passwordRef.current;
+        const unlock = onUnlockRef.current;
         close();
-        await sleep(300);
-        onUnlockRef.current(note, password);
+        await sleep(500);
+        unlock(note, password);
       }
     } catch (e) {
       takeErrorAction();

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/merge-conflicts/index.tsx

@@ -60,6 +60,7 @@ import { IconButton } from "../ui/icon-button";
 import Seperator from "../ui/seperator";
 import Paragraph from "../ui/typography/paragraph";
 import { presentDialog } from "../dialog/functions";
+import { Cipher } from "@notesnook/crypto";
 
 const MergeConflicts = () => {
   const { colors } = useThemeColors();
@@ -84,12 +85,21 @@ const MergeConflicts = () => {
       dateEdited: contentToSave.dateEdited
     });
 
-    const noteLocked = await db.vaults.itemExists(note);
+    const noteContent = await db.content.findByNoteId(note.id);
 
-    if (noteLocked) {
-      await db.vault.save({
-        ...contentToSave,
-        sessionId: `${Date.now()}`
+    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({
@@ -138,7 +148,6 @@ const MergeConflicts = () => {
         onUnlock: async (item, password) => {
           if (!item || !password) return;
           const currentContent = await db.content.get(item.contentId!);
-
           try {
             noteContent = {
               ...(await db.content.get(item.contentId!)),

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

@@ -33,7 +33,6 @@ import AppIcon from "../ui/AppIcon";
 import { Button } from "../ui/button";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
-import { Dialog } from "../dialog";
 
 const TOP_BAR_ITEMS: ActionId[] = [
   "pin",
@@ -327,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;
   };
@@ -375,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/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/side-menu/notebook-item.tsx

@@ -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/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/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/sheet/index.jsx

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

apps/mobile/app/features.ts

@@ -19,4 +19,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { FeatureType } from "./components/sheets/new-feature";
 
-export const features: FeatureType[] = [];
+export const features: FeatureType[] = [
+  {
+    title: "Play audio files",
+    body: "You can now play audio attachments in the editor"
+  },
+  {
+    title: "Password change & account recovery re-enabled",
+    body: "We have re-enabled password change and account recovery after making some improvements"
+  }
+];

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

@@ -21,6 +21,7 @@ import { isFeatureAvailable, useAreFeaturesAvailable } from "@notesnook/common";
 import {
   Color,
   createInternalLink,
+  isEncryptedContent,
   Item,
   ItemReference,
   Note,
@@ -221,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]);
 

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

@@ -537,7 +537,6 @@ const initializeDatabase = async (password?: string) => {
     Notifications.restorePinnedNotes();
     expiringNotesTimer();
     deleteDCacheFiles();
-    db.attachments.removeOrphaned();
   }
   Walkthrough.init();
 };

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/screens/editor/tiptap/use-editor.ts

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

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

@@ -570,13 +570,17 @@ const BackupItem = ({
             paragraph: strings.restoreBackupConfirm(),
             positiveText: strings.restore(),
             negativeText: strings.cancel(),
+            context: "global",
             positivePress: async () => {
-              restoreBackup({
-                uri:
-                  Platform.OS === "android"
-                    ? (item as ScopedStorage.FileType).uri
-                    : (item as ReactNativeBlobUtilStat).path
-              });
+              setTimeout(() => {
+                restoreBackup({
+                  uri:
+                    Platform.OS === "android"
+                      ? (item as ScopedStorage.FileType).uri
+                      : (item as ReactNativeBlobUtilStat).path
+                });
+              }, 500);
+              return true;
             }
           });
         }}

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

@@ -25,7 +25,6 @@ import {
 } from "@react-navigation/native";
 import React, { useEffect, useRef, useState } from "react";
 import { ActivityIndicator, TextInput, View } from "react-native";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { FeatureResult, useIsFeatureAvailable } from "@notesnook/common";
 //@ts-ignore
 import ToggleSwitch from "toggle-switch-react-native";
@@ -218,14 +217,15 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
           }}
         >
           {!!item.icon && (
-            <Icon
+            <AppIcon
               color={
                 item.type === "danger"
                   ? colors.error.icon
                   : colors.secondary.icon
               }
+              iconFamily={item.iconFamily}
               name={item.icon}
-              size={30}
+              size={item.iconSize || 30}
             />
           )}
         </View>

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

@@ -92,6 +92,7 @@ export const settingsGroups: SettingSection[] = [
       {
         id: "delete-data",
         name: strings.deleteData(),
+        icon: "delete",
         description: strings.deleteAccountDesc(),
         modifer: () => {
           presentDialog({
@@ -1243,7 +1244,7 @@ export const settingsGroups: SettingSection[] = [
             }
           },
           {
-            id: "backup-now",
+            id: "backup-now-with-attachments",
             name: strings.backupNowWithAttachments(),
             description: strings.backupNowWithAttachmentsDesc(),
             hidden: () => !useUserStore.getState().user,
@@ -1545,6 +1546,9 @@ export const settingsGroups: SettingSection[] = [
         id: "join-telegram",
         name: strings.joinTelegram(),
         description: strings.joinTelegramDesc(),
+        icon: "sc-telegram",
+        iconFamily: "evilicons",
+        iconSize: 35,
         modifer: () => {
           Linking.openURL("https://t.me/notesnook").catch(() => {
             /* empty */

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

@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { TextInput } from "react-native";
 import { Settings } from "../../stores/use-setting-store";
 import { FeatureId } from "@notesnook/common";
+import { IconProps } from "../../components/ui/AppIcon";
 
 export type SettingSection = {
   id: string;
@@ -34,6 +35,8 @@ export type SettingSection = {
   name?: string | ((current?: unknown) => string);
   description?: string | ((current: unknown) => string);
   icon?: string;
+  iconFamily?: IconProps["iconFamily"];
+  iconSize?: number;
   property?: keyof Settings;
   sections?: SettingSection[];
   component?: string;

apps/mobile/app/services/backup.ts

@@ -319,9 +319,8 @@ async function run(
       };
     }
 
-    await sleep(300);
-
     if (canShowCompletionStatus) {
+      await sleep(500);
       presentBackupCompleteSheet(path);
     }
 

apps/mobile/app/share/share.tsx

@@ -71,6 +71,7 @@ import { initDatabase, useShareStore } from "./store";
 import { isTablet } from "react-native-device-info";
 import { NotesnookModule } from "../utils/notesnook-module";
 import { DefaultAppStyles } from "../utils/styles";
+import { encodeHTML5 } from "entities";
 
 const getLinkPreview = (url: string) => {
   return getPreviewData(url, 5000);
@@ -81,7 +82,7 @@ async function sanitizeHtml(site: string, title?: string) {
     return (
       html +
       "<hr/>" +
-      `<p>Clipped from <a href="${site}">${title || site}</a></p>
+      `<p>Clipped from <a href="${site}">${encodeHTML5(title || site)}</a></p>
 <p>Date clipped ${getFormattedDate(Date.now())}</p>`
     );
   } catch (e) {
@@ -96,7 +97,7 @@ function makeHtmlFromUrl(url: string) {
 function makeHtmlFromPlainText(text: string) {
   if (!text) return "";
 
-  return `<p>${text
+  return `<p>${encodeHTML5(text)
     .replace(/[\n]+/g, "\n")
     .replace(/(?:\r\n|\r|\n)/g, "</p><p>")}</p>`;
 }

apps/mobile/app/stores/use-theme-store.ts

@@ -76,18 +76,14 @@ export const useThemeStore = create<ThemeStore>((set, get) => ({
     ? (Appearance.getColorScheme() as "dark" | "light")
     : SettingsService.get().colorScheme,
   setDarkTheme: (darkTheme) => {
-    switchThemeWithAnimation(() => {
-      set({ darkTheme });
-      changeSystemBarColors();
-      SettingsService.setProperty("darkTheme", darkTheme);
-    });
+    set({ darkTheme });
+    changeSystemBarColors();
+    SettingsService.setProperty("darkTheme", darkTheme);
   },
   setLightTheme: (lightTheme) => {
-    switchThemeWithAnimation(() => {
-      set({ lightTheme });
-      changeSystemBarColors();
-      SettingsService.setProperty("lighTheme", lightTheme);
-    });
+    set({ lightTheme });
+    changeSystemBarColors();
+    SettingsService.setProperty("lighTheme", lightTheme);
   },
   setColorScheme: (colorScheme) => {
     switchThemeWithAnimation(() => {

apps/mobile/app/stores/use-user-store.ts

@@ -46,7 +46,7 @@ export interface UserStore {
   appLocked: boolean;
   lockApp: (verified: boolean) => void;
   disableAppLockRequests: boolean;
-  setDisableAppLockRequests: (shouldBlockVerifyUser: boolean) => void;
+  setDisableAppLockRequests: (disableAppLockRequests: boolean) => void;
   profile?: Partial<Profile>;
 }
 

apps/mobile/app/utils/tooltip.ts

@@ -159,7 +159,7 @@ function show(event: any, text: string, position = 2) {
     duration: 2000,
     autoHide: true,
     clickToHide: true,
-    shadow: true
+    shadow: false
   });
 }
 

apps/mobile/e2e/tests/sort.e2e.ts

@@ -21,7 +21,7 @@ import { notesnook } from "../test.ids";
 import { TestBuilder } from "./utils";
 
 describe("Sort & filter", () => {
-  it.only("Sort by date-edited/date-created", async () => {
+  it("Sort by date-edited/date-created", async () => {
     await TestBuilder.create()
       .prepare()
       .createNote("Note 1", "Note 1")
@@ -34,7 +34,7 @@ describe("Sort & filter", () => {
           .element(by.web.className("ProseMirror"))
           .typeText("Edited ", true);
       })
-      .pressBack(1)
+      .pressBack(2)
       .waitAndTapById("icon-sort")
       .wait(500)
       .waitAndTapByText("Date created")

apps/mobile/index.js

@@ -17,9 +17,10 @@ Notifications.init();
 
 enableFreeze(true);
 NetInfo.configure({
-  reachabilityUrl: "https://notesnook.com",
+  reachabilityUrl: "https://api.notesnook.com/health",
   reachabilityTest: (response) => {
     if (!response) return false;
+    console.log("reachabilty test", response.status);
     return response?.status >= 200 && response?.status < 300;
   }
 });

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

@@ -34,6 +34,8 @@
 		65AA857E25E6DDEC00772A01 /* NotesWidget.swift in Sources */ = {isa = PBXBuildFile; fileRef = 65AA857D25E6DDEC00772A01 /* NotesWidget.swift */; };
 		65AA858025E6DDEE00772A01 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 65AA857F25E6DDEE00772A01 /* Assets.xcassets */; };
 		65AA858425E6DDEE00772A01 /* NotesWidgetExtension.appex in Embed App Extensions */ = {isa = PBXBuildFile; fileRef = 65AA857725E6DDEC00772A01 /* NotesWidgetExtension.appex */; settings = {ATTRIBUTES = (RemoveHeadersOnCopy, ); }; };
+		65AD1F4A2F6289110033176F /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 65AD1F492F6289110033176F /* EvilIcons.ttf */; };
+		65AD1F4B2F6289110033176F /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 65AD1F492F6289110033176F /* EvilIcons.ttf */; };
 		65B5014425A672B200E2D264 /* ShareViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = 65B5014325A672B200E2D264 /* ShareViewController.m */; };
 		65B5014725A672B200E2D264 /* MainInterface.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 65B5014525A672B200E2D264 /* MainInterface.storyboard */; };
 		65B5014B25A672B200E2D264 /* Make Note.appex in Embed App Extensions */ = {isa = PBXBuildFile; fileRef = 65B5014025A672B200E2D264 /* Make Note.appex */; settings = {ATTRIBUTES = (RemoveHeadersOnCopy, ); }; };
@@ -129,6 +131,7 @@
 		65AA857D25E6DDEC00772A01 /* NotesWidget.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NotesWidget.swift; sourceTree = "<group>"; };
 		65AA857F25E6DDEE00772A01 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
 		65AA858125E6DDEE00772A01 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		65AD1F492F6289110033176F /* EvilIcons.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = EvilIcons.ttf; path = ../fonts/EvilIcons.ttf; sourceTree = SOURCE_ROOT; };
 		65B5014025A672B200E2D264 /* Make Note.appex */ = {isa = PBXFileReference; explicitFileType = "wrapper.app-extension"; includeInIndex = 0; path = "Make Note.appex"; sourceTree = BUILT_PRODUCTS_DIR; };
 		65B5014325A672B200E2D264 /* ShareViewController.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ShareViewController.m; sourceTree = "<group>"; };
 		65B5014625A672B200E2D264 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/MainInterface.storyboard; sourceTree = "<group>"; };
@@ -291,6 +294,7 @@
 		83CBB9F61A601CBA00E9B192 = {
 			isa = PBXGroup;
 			children = (
+				65AD1F492F6289110033176F /* EvilIcons.ttf */,
 				653F4E042EA3887C009A42A2 /* Inter-Bold.ttf */,
 				653F4E052EA3887C009A42A2 /* Inter-Italic.ttf */,
 				653F4E062EA3887C009A42A2 /* Inter-Regular.ttf */,
@@ -536,6 +540,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				659201D82EA78265006B16DB /* Inter-Bold.ttf in Resources */,
+				65AD1F4B2F6289110033176F /* EvilIcons.ttf in Resources */,
 				659201D92EA78265006B16DB /* Inter-Italic.ttf in Resources */,
 				659201DA2EA78265006B16DB /* Inter-Regular.ttf in Resources */,
 				659201DB2EA78265006B16DB /* Inter-SemiBold.ttf in Resources */,
@@ -581,6 +586,7 @@
 				659201DE2EA7826D006B16DB /* Inter-Regular.ttf in Resources */,
 				659201DF2EA7826D006B16DB /* Inter-SemiBold.ttf in Resources */,
 				65C400DF2A80B6B600AA3DF5 /* MaterialCommunityIcons.ttf in Resources */,
+				65AD1F4A2F6289110033176F /* EvilIcons.ttf in Resources */,
 				65C149872A61151B005C40F1 /* extension.bundle in Resources */,
 				65B5014725A672B200E2D264 /* MainInterface.storyboard in Resources */,
 			);
@@ -1029,7 +1035,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2174;
+				CURRENT_PROJECT_VERSION = 2176;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				ENABLE_BITCODE = NO;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -1104,7 +1110,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 3.3.15;
+				MARKETING_VERSION = 3.3.16;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -1135,7 +1141,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 2174;
+				CURRENT_PROJECT_VERSION = 2176;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 53CWBG3QUC;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -1210,7 +1216,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 3.3.15;
+				MARKETING_VERSION = 3.3.16;
 				ONLY_ACTIVE_ARCH = NO;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
@@ -1367,7 +1373,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2174;
+				CURRENT_PROJECT_VERSION = 2176;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -1379,7 +1385,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 3.3.15;
+				MARKETING_VERSION = 3.3.16;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.notewidget;
@@ -1410,7 +1416,7 @@
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = NO;
-				CURRENT_PROJECT_VERSION = 2174;
+				CURRENT_PROJECT_VERSION = 2176;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 53CWBG3QUC;
@@ -1423,7 +1429,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 3.3.15;
+				MARKETING_VERSION = 3.3.16;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.notewidget;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -1453,7 +1459,7 @@
 				CODE_SIGN_ENTITLEMENTS = "Make Note/Make Note.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2174;
+				CURRENT_PROJECT_VERSION = 2176;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -1534,7 +1540,7 @@
 					"@executable_path/../../Frameworks",
 				);
 				LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift$(inherited)";
-				MARKETING_VERSION = 3.3.15;
+				MARKETING_VERSION = 3.3.16;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.share;
@@ -1565,7 +1571,7 @@
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = NO;
-				CURRENT_PROJECT_VERSION = 2174;
+				CURRENT_PROJECT_VERSION = 2176;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 53CWBG3QUC;
@@ -1647,7 +1653,7 @@
 					"@executable_path/../../Frameworks",
 				);
 				LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift$(inherited)";
-				MARKETING_VERSION = 3.3.15;
+				MARKETING_VERSION = 3.3.16;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.share;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -1724,10 +1730,7 @@
 				ONLY_ACTIVE_ARCH = YES;
 				OTHER_CFLAGS = "$(inherited)";
 				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					" ",
-				);
+				OTHER_LDFLAGS = "$(inherited)  ";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
@@ -1792,10 +1795,7 @@
 				ONLY_ACTIVE_ARCH = NO;
 				OTHER_CFLAGS = "$(inherited)";
 				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					" ",
-				);
+				OTHER_LDFLAGS = "$(inherited)  ";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;

apps/mobile/ios/Notesnook/Info.plist

@@ -97,6 +97,7 @@
 		<string>Inter-Regular.ttf</string>
 		<string>Inter-Bold.ttf</string>
 		<string>MaterialCommunityIcons.ttf</string>
+		<string>EvilIcons.ttf</string>
 	</array>
 	<key>UIApplicationSceneManifest</key>
 	<dict>

apps/mobile/package-lock.json

@@ -1,22 +1,22 @@
 {
   "name": "@notesnook/mobile",
-  "version": "3.3.13",
+  "version": "3.3.15",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@notesnook/mobile",
-      "version": "3.3.13",
+      "version": "3.3.15",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {
-        "@ammarahmed/notifee-react-native": "^7.4.11",
-        "@ammarahmed/react-native-background-fetch": "^4.2.2",
+        "@ammarahmed/notifee-react-native": "^7.4.12",
+        "@ammarahmed/react-native-background-fetch": "^4.2.3",
         "@ammarahmed/react-native-eventsource": "1.1.0",
         "@ammarahmed/react-native-fingerprint-scanner": "^5.0.1",
         "@ammarahmed/react-native-share-extension": "^2.9.5",
         "@ammarahmed/react-native-sodium": "^1.6.8",
-        "@ammarahmed/react-native-upload": "^6.31.0",
+        "@ammarahmed/react-native-upload": "^6.33.0",
         "@azure/core-asynciterator-polyfill": "^1.0.2",
         "@bam.tech/react-native-image-resizer": "3.0.11",
         "@callstack/repack": "~5.2.1",
@@ -490,18 +490,18 @@
       }
     },
     "node_modules/@ammarahmed/notifee-react-native": {
-      "version": "7.4.11",
-      "resolved": "https://registry.npmjs.org/@ammarahmed/notifee-react-native/-/notifee-react-native-7.4.11.tgz",
-      "integrity": "sha512-9zKhONgir2FN/sMj/rsKAhDwfxadDuxB6LJILKxpGwzqvcIuG70oCKWmBBG9LJJpSfcVpNTdxBoH9RtNZTZSsQ==",
+      "version": "7.4.12",
+      "resolved": "https://registry.npmjs.org/@ammarahmed/notifee-react-native/-/notifee-react-native-7.4.12.tgz",
+      "integrity": "sha512-rZPtHdWZ3PxtMHreVszo0ehw6gnsabw7fpgDv8ztYcMNj4A22ZTyfTAQrSZ534D7iDkWgHi2my82b31MsnlQzQ==",
       "license": "Apache-2.0",
       "peerDependencies": {
         "react-native": "*"
       }
     },
     "node_modules/@ammarahmed/react-native-background-fetch": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@ammarahmed/react-native-background-fetch/-/react-native-background-fetch-4.2.2.tgz",
-      "integrity": "sha512-PLBlb/DD+6Fv1auxdD6VRxtuC7GKPhQqR69bovRm5oGavbdSzRr+ZTr8AyNMCcayxKGdgEX2JysrJg8WIySSFQ==",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/@ammarahmed/react-native-background-fetch/-/react-native-background-fetch-4.2.3.tgz",
+      "integrity": "sha512-cgO9EEFoU1HYuDNMpdTTke7DYzEDQfLsyd/cWIZ5Lpp4zz76+dgp1+LBqbLYdSenhJU1Omghq3xWPsoWDRaemQ==",
       "license": "MIT"
     },
     "node_modules/@ammarahmed/react-native-eventsource": {
@@ -538,9 +538,9 @@
       "license": "ISC"
     },
     "node_modules/@ammarahmed/react-native-upload": {
-      "version": "6.31.0",
-      "resolved": "https://registry.npmjs.org/@ammarahmed/react-native-upload/-/react-native-upload-6.31.0.tgz",
-      "integrity": "sha512-GwMDd2IND3nuS4l13pQPP8zA/GJoxQKz0pxCGUoWj65fbPuZPnuUA2Rpf4jZzLlgY62vdjI/TqmX+rPiwwCceQ==",
+      "version": "6.33.0",
+      "resolved": "https://registry.npmjs.org/@ammarahmed/react-native-upload/-/react-native-upload-6.33.0.tgz",
+      "integrity": "sha512-hvr/LN1wgbhZv3WsRhrAPC1D8YW0ClgrE5NArqUgHWreSHBCS2zVQhEferTt5fGESaJvx+c69VqaIPqzzb8Y3A==",
       "license": "BSD-3-Clause",
       "peerDependencies": {
         "react": "*",

apps/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@notesnook/mobile",
-  "version": "3.3.15-beta.1",
+  "version": "3.3.16",
   "private": true,
   "license": "GPL-3.0-or-later",
   "scripts": {
@@ -26,13 +26,13 @@
     "react": "19.1.1"
   },
   "dependencies": {
-    "@ammarahmed/notifee-react-native": "^7.4.11",
-    "@ammarahmed/react-native-background-fetch": "^4.2.2",
+    "@ammarahmed/notifee-react-native": "^7.4.12",
+    "@ammarahmed/react-native-background-fetch": "^4.2.3",
     "@ammarahmed/react-native-eventsource": "1.1.0",
     "@ammarahmed/react-native-fingerprint-scanner": "^5.0.1",
     "@ammarahmed/react-native-share-extension": "^2.9.5",
     "@ammarahmed/react-native-sodium": "^1.6.8",
-    "@ammarahmed/react-native-upload": "^6.31.0",
+    "@ammarahmed/react-native-upload": "^6.33.0",
     "@azure/core-asynciterator-polyfill": "^1.0.2",
     "@bam.tech/react-native-image-resizer": "3.0.11",
     "@callstack/repack": "~5.2.1",
@@ -208,4 +208,4 @@
   "engines": {
     "node": ">=20"
   }
-}
+}

apps/mobile/patches/react-native-theme-switch-animation+0.6.0.patch

@@ -0,0 +1,65 @@
+diff --git a/node_modules/react-native-theme-switch-animation/android/src/main/java/com/themeswitchanimation/ThemeSwitchAnimationModule.java b/node_modules/react-native-theme-switch-animation/android/src/main/java/com/themeswitchanimation/ThemeSwitchAnimationModule.java
+index f4630ac..a3a837f 100644
+--- a/node_modules/react-native-theme-switch-animation/android/src/main/java/com/themeswitchanimation/ThemeSwitchAnimationModule.java
++++ b/node_modules/react-native-theme-switch-animation/android/src/main/java/com/themeswitchanimation/ThemeSwitchAnimationModule.java
+@@ -13,7 +13,7 @@ import com.facebook.react.bridge.ReactContextBaseJavaModule;
+ import com.facebook.react.bridge.ReactMethod;
+ import com.facebook.react.modules.core.DeviceEventManagerModule;
+ 
+-public class ThemeSwitchAnimationModule extends ThemeSwitchAnimationModuleSpec {
++public class ThemeSwitchAnimationModule extends com.themeswitchanimation.ThemeSwitchAnimationModuleSpec {
+   public static final String NAME = "ThemeSwitchAnimationModule";
+ 
+   private ReactContext reactContext;
+@@ -38,6 +38,12 @@ public class ThemeSwitchAnimationModule extends ThemeSwitchAnimationModuleSpec {
+       this.isAnimating = true;
+       this.rootView = (ViewGroup) getCurrentActivity().getWindow().getDecorView();
+       this.capturedImageBitmap = captureScreenshot(this.rootView, this.reactContext);
++      if (this.capturedImageBitmap == null) {
++        reactContext
++                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
++                .emit("FINISHED_FREEZING_SCREEN", null);
++        return;
++      }
+       this.capturedImageView = createImageView(this.capturedImageBitmap, this.reactContext);
+ 
+       reactContext.runOnUiQueueThread(() -> {
+@@ -57,6 +63,9 @@ public class ThemeSwitchAnimationModule extends ThemeSwitchAnimationModuleSpec {
+       @Override
+       public void run() {
+         if (isAnimating) {
++          if (capturedImageView == null) {
++            cleanUp();
++          }
+           switch (animationType) {
+             case "circular":
+               Animations.performCircleAnimation(capturedImageView, rootView, (int) duration, cxRatio, cyRatio, reactContext, new Runnable() {
+@@ -94,16 +103,22 @@ public class ThemeSwitchAnimationModule extends ThemeSwitchAnimationModuleSpec {
+       capturedImageBitmap.recycle();
+       capturedImageBitmap = null;
+     }
+-    rootView.removeView(capturedImageView);
++    if (capturedImageView != null) {
++      rootView.removeView(capturedImageView);
++    }
+     isAnimating = false;
+   }
+ 
+   public static Bitmap captureScreenshot(View rootView, ReactContext reactContext) {
+-    Bitmap capturedImageBitmap = Bitmap.createBitmap(rootView.getWidth(), rootView.getHeight(), Bitmap.Config.ARGB_8888);
+-    Canvas canvas = new Canvas(capturedImageBitmap);
+-    rootView.draw(canvas);
+-
+-    return capturedImageBitmap;
++    try {
++      Bitmap capturedImageBitmap = Bitmap.createBitmap(rootView.getWidth(), rootView.getHeight(), Bitmap.Config.ARGB_8888);
++      Canvas canvas = new Canvas(capturedImageBitmap);
++      rootView.draw(canvas);
++
++      return capturedImageBitmap;
++    } catch (Exception e) {
++      return null;
++    }
+   }
+ 
+   public static ImageView createImageView(Bitmap capturedImageBitmap, ReactContext reactContext) {

apps/mobile/patches/react-native-tooltips+1.0.3.patch

@@ -89,6 +89,50 @@ index 978045f..59c64f1 100644
 -    implementation 'com.github.florent37:viewtooltip:1.1.6'
 +    implementation 'com.github.florent37:ViewTooltip:f79a8955ef'
  }
+diff --git a/node_modules/react-native-tooltips/android/src/main/java/px/tooltips/RNTooltipsModule.java b/node_modules/react-native-tooltips/android/src/main/java/px/tooltips/RNTooltipsModule.java
+index e987ffb..e898a40 100644
+--- a/node_modules/react-native-tooltips/android/src/main/java/px/tooltips/RNTooltipsModule.java
++++ b/node_modules/react-native-tooltips/android/src/main/java/px/tooltips/RNTooltipsModule.java
+@@ -11,9 +11,11 @@ import com.facebook.react.bridge.ReactContextBaseJavaModule;
+ import com.facebook.react.bridge.ReactMethod;
+ import com.facebook.react.bridge.Callback;
+ import com.facebook.react.bridge.ReadableMap;
+-import com.facebook.react.uimanager.UIManagerModule;
++import com.facebook.react.bridge.UIManager;
+ import com.facebook.react.uimanager.UIBlock;
+ import com.facebook.react.uimanager.NativeViewHierarchyManager;
++import com.facebook.react.uimanager.UIManagerHelper;
++import com.facebook.react.uimanager.common.UIManagerType;
+ import com.github.florent37.viewtooltip.ViewTooltip;
+ 
+ public class RNTooltipsModule extends ReactContextBaseJavaModule {
+@@ -34,12 +36,12 @@ public class RNTooltipsModule extends ReactContextBaseJavaModule {
+ 
+   @ReactMethod
+   public void Show(final int targetId, final int parentId, final ReadableMap props, final Callback onHide) {
+-      this.reactContext.getNativeModule(UIManagerModule.class).prependUIBlock(new UIBlock() {
+ 
+-        @Override
+-        public void execute(NativeViewHierarchyManager nativeViewHierarchyManager) {
+ 
+-          final ViewGroup target = (ViewGroup) nativeViewHierarchyManager.resolveView(targetId);
++          UIManager uiManager = UIManagerHelper.getUIManager(reactContext, UIManagerType.FABRIC);
++          if (uiManager == null) return;
++
++          final ViewGroup target = (ViewGroup) uiManager.resolveView(targetId);
+ 
+           reactContext.runOnUiQueueThread(new Runnable() {
+             @Override
+@@ -121,8 +123,7 @@ public class RNTooltipsModule extends ReactContextBaseJavaModule {
+             }
+ 
+           });
+-        }
+-      });
++
+   }
+ 
+   @ReactMethod
 diff --git a/node_modules/react-native-tooltips/ios/RNTooltips.h b/node_modules/react-native-tooltips/ios/RNTooltips.h
 index a150e3e..096ad86 100644
 --- a/node_modules/react-native-tooltips/ios/RNTooltips.h
@@ -116,7 +160,7 @@ index fb96466..75a6fdb 100644
  
  @interface TooltipDelegate : NSObject <SexyTooltipDelegate>
  
-@@ -7,9 +9,15 @@
+@@ -7,9 +9,15 @@ @interface TooltipDelegate : NSObject <SexyTooltipDelegate>
  @end
  
  @implementation TooltipDelegate
@@ -132,7 +176,7 @@ index fb96466..75a6fdb 100644
  }
  
  @end
-@@ -17,77 +25,120 @@
+@@ -17,77 +25,120 @@ - (void)tooltipDidDismiss:(SexyTooltip *)tooltip {
  
  @implementation RNTooltips
  

apps/monograph/app/utils/generate-og-image.server.ts

@@ -36,27 +36,27 @@ const fontMap = JSON.parse(
 );
 
 // Register fonts
-const OpenSans = path.join(
+const Inter = path.join(
   __dirname,
   import.meta.env.DEV ? "../assets/fonts/" : "../../assets/fonts/",
-  "open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf"
+  "Inter-Regular.ttf"
 );
-const OpenSansBold = path.join(
+const InterBold = path.join(
   __dirname,
   import.meta.env.DEV ? "../assets/fonts/" : "../../assets/fonts/",
-  "open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.ttf"
+  "Inter-SemiBold.ttf"
 );
 
-console.log("OpenSans", GlobalFonts.registerFromPath(OpenSans, "OpenSans"));
+console.log("Inter", GlobalFonts.registerFromPath(Inter, "Inter"));
 console.log(
   "registering",
-  "OpenSansBold",
-  GlobalFonts.registerFromPath(OpenSansBold, "OpenSansBold")
+  "InterBold",
+  GlobalFonts.registerFromPath(InterBold, "InterBold")
 );
 
 const fontFamilies = {
-  regular: ["OpenSans"],
-  bold: ["OpenSansBold"]
+  regular: ["Inter"],
+  bold: ["InterBold"]
 };
 for (const font of fontMap) {
   const id = (font.name + font.weight).replace(/ /g, "");
@@ -115,11 +115,11 @@ export async function makeImage(metadata: OGMetadata, cacheKey: string) {
 
   // Draw bottom text
   ctx.fillStyle = theme.primary.heading;
-  ctx.font = "600 32px OpenSansBold";
+  ctx.font = "600 32px InterBold";
   ctx.fillText("Notesnook Monograph", PADDING + 95, HEIGHT - PADDING - 55);
 
   ctx.fillStyle = theme.secondary.paragraph;
-  ctx.font = "25px OpenSans";
+  ctx.font = "25px Inter";
   ctx.fillText(
     "Anonymous, secure, and encrypted note sharing with password protection.",
     PADDING + 95,
@@ -128,7 +128,7 @@ export async function makeImage(metadata: OGMetadata, cacheKey: string) {
 
   // Draw date
   ctx.fillStyle = theme.secondary.paragraph;
-  ctx.font = "25px OpenSans";
+  ctx.font = "25px Inter";
   ctx.fillText(metadata.date, PADDING, PADDING + 25);
 
   // Draw title

apps/monograph/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@notesnook/monograph",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@notesnook/monograph",
-      "version": "1.2.7",
+      "version": "1.2.8",
       "dependencies": {
         "@emotion/cache": "11.11.0",
         "@emotion/react": "11.11.1",

apps/monograph/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@notesnook/monograph",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "private": true,
   "sideEffects": false,
   "type": "module",

apps/web/__e2e__/app-lock.test.ts

@@ -17,9 +17,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
-import { APP_LOCK_PASSWORD, USER } from "./utils";
+import { test, expect, APP_LOCK_PASSWORD, USER } from "./utils";
 
 test("don't show status bar lock app button to unauthenticated user", async ({
   page

apps/web/__e2e__/backups.test.ts

@@ -16,9 +16,8 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
-import { USER } from "./utils";
+import { test, expect, USER } from "./utils";
 
 test("create an unencrypted backup", async ({ page }) => {
   const app = new AppModel(page);
@@ -38,6 +37,7 @@ test("restore an unencrypted backup", async ({ page }) => {
   const settings = await app.goToSettings();
 
   await settings.restoreData("backup.nnbackup");
+  await app.toasts.waitForToast("Backup restored");
 
   await settings.close();
   const notes = await app.goToNotes();
@@ -67,6 +67,7 @@ test("restore an encrypted backup", async ({ page }) => {
   const settings = await app.goToSettings();
 
   await settings.restoreData("encrypted.nnbackup", USER.CURRENT.password);
+  await app.toasts.waitForToast("Backup restored");
 
   await settings.close();
   const notes = await app.goToNotes();

apps/web/__e2e__/checkout.test.ts

@@ -17,8 +17,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { test, Page, expect } from "@playwright/test";
-import { USER } from "./utils";
+import { Page } from "@playwright/test";
+import { test, expect, USER } from "./utils";
 import { AppModel } from "./models/app.model";
 import { PriceItem } from "./models/types";
 

apps/web/__e2e__/colors.test.ts

@@ -16,9 +16,8 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
-import { getTestId, NOTE } from "./utils";
+import { test, expect, getTestId, NOTE } from "./utils";
 
 test("delete the last note of a color", async ({ page }) => {
   const app = new AppModel(page);

apps/web/__e2e__/drag-drop.test.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 { expect, test } from "@playwright/test";
+import { test, expect } from "./utils";
 import { AppModel } from "./models/app.model";
 import { NotesViewModel } from "./models/notes-view.model";
 

apps/web/__e2e__/editor.test.ts

@@ -17,9 +17,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
-import { getTestId, NOTE, TITLE_ONLY_NOTE } from "./utils";
+import { test, expect, NOTE, TITLE_ONLY_NOTE } from "./utils";
 
 test("focus mode", async ({ page }) => {
   const app = new AppModel(page);
@@ -80,7 +79,7 @@ test("creating a new note should clear the editor contents & title", async ({
   await notes.newNote();
 
   expect(await notes.editor.isUnloaded()).toBeTruthy();
-  expect(await notes.editor.getTitle()).toBe("");
+  await expect(notes.editor.title).toHaveValue("");
   expect(await notes.editor.getContent("text")).toBe("");
 });
 
@@ -114,7 +113,7 @@ test("opening an empty titled note should empty out editor contents", async ({
   await onlyTitle?.openNote();
 
   expect(await notes.editor.getContent("text")).toBe("");
-  expect(await notes.editor.getTitle()).toBe(TITLE_ONLY_NOTE.title);
+  await expect(notes.editor.title).toHaveValue(TITLE_ONLY_NOTE.title);
 });
 
 test("focus should not jump to editor while typing in title input", async ({
@@ -127,7 +126,7 @@ test("focus should not jump to editor while typing in title input", async ({
 
   await notes.editor.typeTitle("Hello", 200);
 
-  expect(await notes.editor.getTitle()).toBe("Hello");
+  await expect(notes.editor.title).toHaveValue("Hello");
   expect(await notes.editor.getContent("text")).toBe("");
 });
 
@@ -143,21 +142,21 @@ test("when title format is set to headline, title should be generated from headl
   const notes = await app.goToNotes();
   await notes.createNote({ content: "my precious" });
 
-  expect(await notes.editor.getTitle()).toBe("my precious");
+  await expect(notes.editor.title).toHaveValue("my precious");
 
   await notes.editor.setContent(", my precious note");
   await notes.editor.waitForSaving();
 
-  expect(await notes.editor.getTitle()).toBe("my precious, my precious note");
+  await expect(notes.editor.title).toHaveValue("my precious, my precious note");
 
   await notes.editor.setTitle("not precious");
 
-  expect(await notes.editor.getTitle()).toBe("not precious");
+  await expect(notes.editor.title).toHaveValue("not precious");
 
   await notes.editor.setContent(", but...");
   await notes.editor.waitForSaving();
 
-  expect(await notes.editor.getTitle()).toBe("not precious");
+  await expect(notes.editor.title).toHaveValue("not precious");
 });
 
 test("select all & backspace should clear all content in editor", async ({
@@ -178,7 +177,7 @@ test("select all & backspace should clear all content in editor", async ({
 test("editing a note and switching immediately to another note and making an edit shouldn't overlap both notes", async ({
   page
 }, test) => {
-  test.setTimeout(45 * 1000);
+  test.setTimeout(3 * 60 * 1000);
 
   const app = new AppModel(page);
   await app.goto();
@@ -217,7 +216,7 @@ test("editing a note and switching immediately to another note and making an edi
 test("editing a note and switching immediately to another note and editing the title shouldn't overlap both notes", async ({
   page
 }, test) => {
-  test.setTimeout(45 * 1000);
+  test.setTimeout(3 * 60 * 1000);
 
   const app = new AppModel(page);
   await app.goto();
@@ -333,7 +332,6 @@ test("disable autosave when note crosses MAX_AUTO_SAVEABLE_WORDS", async ({
       "Auto-save is disabled for large notes. Press Ctrl + S to save."
     )
   ).toBe(true);
-  await expect(notes.editor.notSavedIcon).toBeVisible();
 });
 
 test("when autosave is disabled, pressing ctrl+s should save the note", async ({
@@ -470,12 +468,12 @@ test("control + alt + right arrow should go to next note", async ({ page }) => {
   await note2?.openNote(true);
   await page.keyboard.press("ControlOrMeta+Alt+ArrowRight");
 
-  expect(await notes.editor.getTitle()).toBe("Note 1");
+  await expect(notes.editor.title).toHaveValue("Note 1");
   expect(await notes.editor.getContent("text")).toBe("Note 1 content");
 
   await page.keyboard.press("ControlOrMeta+Alt+ArrowRight");
 
-  expect(await notes.editor.getTitle()).toBe("Note 2");
+  await expect(notes.editor.title).toHaveValue("Note 2");
   expect(await notes.editor.getContent("text")).toBe("Note 2 content");
 });
 
@@ -498,11 +496,11 @@ test("control + alt + left arrow should go to previous note", async ({
   await note2?.openNote(true);
   await page.keyboard.press("ControlOrMeta+Alt+ArrowLeft");
 
-  expect(await notes.editor.getTitle()).toBe("Note 1");
+  await expect(notes.editor.title).toHaveValue("Note 1");
   expect(await notes.editor.getContent("text")).toBe("Note 1 content");
 
   await page.keyboard.press("ControlOrMeta+Alt+ArrowLeft");
 
-  expect(await notes.editor.getTitle()).toBe("Note 2");
+  await expect(notes.editor.title).toHaveValue("Note 2");
   expect(await notes.editor.getContent("text")).toBe("Note 2 content");
 });

apps/web/__e2e__/keyboard-list-navigation.test.ts

@@ -17,7 +17,8 @@ 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 { expect, Page, test } from "@playwright/test";
+import { Page } from "@playwright/test";
+import { test, expect } from "./utils";
 import { AppModel } from "./models/app.model";
 import { NoteItemModel } from "./models/note-item.model";
 

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

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Locator, Page } from "@playwright/test";
 import { getTestId } from "../utils";
-import { authenticator } from "otplib";
+import { generateSync } from "otplib";
 
 type User = {
   email: string;
@@ -62,7 +62,7 @@ export class AuthModel {
     }
 
     if (user.totpSecret) {
-      const token = authenticator.generate(user.totpSecret);
+      const token = generateSync({ secret: user.totpSecret });
       await this.codeInput.fill(token);
 
       await this.submitButton.click();

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

@@ -24,7 +24,7 @@ import { iterateList } from "./utils";
 
 export class EditorModel {
   private readonly page: Page;
-  private readonly title: Locator;
+  readonly title: Locator;
   readonly content: Locator;
   private readonly tags: Locator;
   private readonly tagInput: Locator;
@@ -88,8 +88,9 @@ export class EditorModel {
       { expected: title }
     );
 
-    if (content !== undefined)
-      await this.content.locator(":scope", { hasText: content }).waitFor();
+    if (content !== undefined) {
+      await this.waitForContent(content);
+    }
   }
 
   async waitForUnloading() {
@@ -109,6 +110,22 @@ export class EditorModel {
     await this.wordCountText.waitFor();
   }
 
+  async waitForContent(text: string) {
+    await this.page.waitForFunction(
+      ({ expected }) => {
+        const contentElement = document.querySelector(
+          `.active .ProseMirror`
+        ) as HTMLElement | null;
+        if (contentElement)
+          return contentElement.innerText
+            .replace(/\s+/g, "")
+            .includes(expected.replace(/\s+/g, ""));
+        return false;
+      },
+      { expected: text }
+    );
+  }
+
   async isUnloaded() {
     return (
       (await this.tagInput.isDisabled()) &&
@@ -128,7 +145,7 @@ export class EditorModel {
       await this.title.focus();
       await this.title.selectText();
       await this.title.press("ArrowRight");
-      await this.title.type(text, { delay });
+      await this.title.pressSequentially(text, { delay });
     });
   }
 
@@ -136,6 +153,7 @@ export class EditorModel {
     await this.editAndWait(async () => {
       await this.content.focus();
       await this.content.pressSequentially(text);
+      await this.waitForContent(text);
     });
   }
 
@@ -143,6 +161,7 @@ export class EditorModel {
     await this.editAndWait(async () => {
       await this.selectAll();
       await this.content.press("Backspace");
+      await this.waitForContent("");
     });
   }
 

apps/web/__e2e__/models/note-properties.model.ts

@@ -31,7 +31,7 @@ import {
   iterateList
 } from "./utils";
 import { SessionHistoryItemModel } from "./session-history-item-model";
-import dayjs from "dayjs";
+import { Dayjs } from "dayjs";
 import { Reminder } from "@notesnook/core";
 
 abstract class BaseProperties {
@@ -235,7 +235,7 @@ export class NotePropertiesModel extends BaseProperties {
     return dateCreated;
   }
 
-  async editDateCreated(newDateCreated: number) {
+  async editDateCreated(date: Dayjs) {
     await this.open();
 
     const editIcon = this.page.locator(getTestId("edit-date-created"));
@@ -253,9 +253,8 @@ export class NotePropertiesModel extends BaseProperties {
       getTestId("time-created-input")
     );
 
-    const date = new Date(newDateCreated);
-    await dateInput.fill(dayjs(date).format("DD-MM-YYYY"));
-    await timeInput.fill(dayjs(date).format("hh:mm A"));
+    await dateInput.fill(date.format("DD-MM-YYYY"));
+    await timeInput.fill(date.format("hh:mm A"));
 
     await confirmDialog(editDateCreatedDialog);
 

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

@@ -53,6 +53,7 @@ export class NotesViewModel extends BaseViewModel {
     if (note.content) await this.editor.setContent(note.content);
 
     await this.editor.waitForSaving();
+    if (note.content) await this.editor.waitForContent(note.content);
     if (note.title) await this.waitForItem(note.title);
     return await this.findNote(note);
   }

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

@@ -141,8 +141,6 @@ export class SettingsViewModel {
 
     await uploadFile(this.page, restoreBackup, filename);
     if (password) await fillPasswordDialog(this.page, password);
-
-    await waitForDialog(this.page, "Restoring backup");
   }
 
   async selectImageCompression(option: { value: string; label: string }) {

apps/web/__e2e__/monographs.test.ts

@@ -17,9 +17,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
-import { USER } from "./utils";
+import { test, expect, USER } from "./utils";
 
 test("don't show monographs list to unauthenticated user", async ({ page }) => {
   const app = new AppModel(page);

apps/web/__e2e__/navigation.test.ts

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 /* eslint-disable no-undef */
-import { test, expect } from "@playwright/test";
+import { test, expect } from "./utils";
 import { AppModel } from "./models/app.model";
 
 function createRoute(key: string, header: string) {

apps/web/__e2e__/notebooks.issues.test.ts

@@ -17,6 +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 { test } from "@playwright/test";
+import { test } from "./utils";
 test.skip("TODO: pin 3 notebooks & make sure they can be unpinned", () => {});
 test.skip("TODO: pin 4 notebooks & make sure 4th pin shows an error", () => {});

apps/web/__e2e__/notebooks.test.ts

@@ -17,12 +17,12 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
 import { Notebook } from "./models/types";
 import {
+  test,
+  expect,
   getTestId,
-  groupByOptions,
   NOTE,
   NOTEBOOK,
   orderByOptions,

apps/web/__e2e__/notehistory.test.ts

@@ -17,8 +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 { test, expect } from "@playwright/test";
-import { createHistorySession, PASSWORD } from "./utils";
+import { test, expect, createHistorySession, PASSWORD } from "./utils";
 
 test.setTimeout(60 * 1000);
 

apps/web/__e2e__/notes.issues.test.ts

@@ -17,9 +17,8 @@ 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 { expect, test } from "@playwright/test";
 import { AppModel } from "./models/app.model";
-import { NOTE } from "./utils";
+import { expect, test, NOTE } from "./utils";
 test.skip("TODO: make sure jump to group works", () => {});
 
 test("#1002 Can't add a tag that's a substring of an existing tag", async ({

apps/web/__e2e__/notes.test.ts

@@ -17,9 +17,11 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { test, expect } from "@playwright/test";
+import dayjs from "dayjs";
 import { AppModel } from "./models/app.model";
 import {
+  test,
+  expect,
   groupByOptions,
   NOTE,
   orderByOptions,
@@ -453,9 +455,9 @@ test("edit note creation date in properties panel", async ({ page }) => {
   const notes = await app.goToNotes();
   const note = await notes.createNote(NOTE);
 
-  const date = new Date("2020-01-15T10:30:00Z");
-  await note?.properties.editDateCreated(date.valueOf());
+  const date = dayjs().subtract(7, "day");
+  await note?.properties.editDateCreated(date);
 
   const dateCreated = await note?.properties.getDateCreated();
-  expect(dateCreated).toBe("15-01-2020 03:30 PM");
+  expect(date.format("DD-MM-YYYY hh:mm A")).toBe(dateCreated);
 });

apps/web/__e2e__/reminders.test.ts

@@ -18,9 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Reminder } from "@notesnook/core";
-import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
-import { getTestId } from "./utils";
+import { test, expect, getTestId } from "./utils";
 
 const ONE_TIME_REMINDER: Partial<Reminder> = {
   title: "Test reminder 1",

apps/web/__e2e__/search.test.ts

@@ -17,9 +17,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
-import { getTestId } from "./utils";
+import { test, expect, getTestId } from "./utils";
 
 test("closing search via close button should clear query", async ({ page }) => {
   const app = new AppModel(page);

apps/web/__e2e__/settings.test.ts

@@ -17,9 +17,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
-import { NOTE } from "./utils";
+import { test, expect, NOTE } from "./utils";
 
 test("ask for image compression during image upload when 'Image Compression' setting is 'Ask every time'", async ({
   page

apps/web/__e2e__/sync.test.ts

@@ -16,9 +16,9 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { test, Browser, expect } from "@playwright/test";
+import { Browser } from "@playwright/test";
 import { AppModel } from "./models/app.model";
-import { USER } from "./utils";
+import { test, expect, USER } from "./utils";
 
 // run this test file sequentially
 test.describe.configure({ mode: "serial" });

apps/web/__e2e__/tabs.test.ts

@@ -17,9 +17,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
-import { createHistorySession, NOTE } from "./utils";
+import { test, expect, createHistorySession, NOTE } from "./utils";
 
 test("notes should open in the same tab", async ({ page }) => {
   const app = new AppModel(page);

apps/web/__e2e__/tags.test.ts

@@ -17,10 +17,16 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
 import { Item } from "./models/types";
-import { getTestId, NOTE, orderByOptions, sortByOptions } from "./utils";
+import {
+  test,
+  expect,
+  getTestId,
+  NOTE,
+  orderByOptions,
+  sortByOptions
+} from "./utils";
 
 const TAG: Item = { title: "hello-world" };
 const EDITED_TAG: Item = { title: "hello-world-2" };

apps/web/__e2e__/user.test.ts

@@ -17,9 +17,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
-import { getTestId, USER } from "./utils";
+import { test, expect, USER } from "./utils";
 
 // async function forceExpireSession() {
 //   await page.evaluate(() => {

apps/web/__e2e__/utils/index.ts

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import fs from "fs";
 import dotenv from "dotenv";
 import path, { join } from "path";
-import { Locator, Page } from "@playwright/test";
+import { test as base, Locator, Page } from "@playwright/test";
 import {
   GroupByOptions,
   Notebook,
@@ -30,6 +30,19 @@ import {
 import { tmpdir } from "os";
 import { AppModel } from "../models/app.model";
 
+export type { Browser, Page } from "@playwright/test";
+export { expect } from "@playwright/test";
+
+const test = base.extend<NonNullable<unknown>>({
+  page: async ({ page }, use) => {
+    const client = await page.context().newCDPSession(page);
+    await client.send("Emulation.setCPUThrottlingRate", {
+      rate: 1
+    });
+    await use(page);
+  }
+});
+
 type Note = {
   title: string;
   content?: string;
@@ -193,6 +206,7 @@ export async function createHistorySession(page: Page, locked = false) {
 }
 
 export {
+  test,
   USER,
   NOTE,
   TITLE_ONLY_NOTE,

apps/web/__e2e__/vault.test.ts

@@ -17,9 +17,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { test, expect } from "@playwright/test";
 import { AppModel } from "./models/app.model";
-import { getTestId, NOTE, PASSWORD } from "./utils";
+import { test, expect, getTestId, NOTE, PASSWORD } from "./utils";
 
 test("locking a note should show vault unlocked status", async ({ page }) => {
   const app = new AppModel(page);

apps/web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@notesnook/web",
   "description": "Your private note taking space",
-  "version": "3.3.9-beta.2",
+  "version": "3.3.11",
   "private": true,
   "main": "./src/app.js",
   "homepage": "https://notesnook.com/",
@@ -52,6 +52,7 @@
     "dayjs": "1.11.13",
     "diffblazer": "^1.0.1",
     "electron-trpc": "0.7.1",
+    "entities": "^7.0.1",
     "event-source-polyfill": "1.0.31",
     "fflate": "^0.8.0",
     "file-saver": "^2.0.5",
@@ -86,7 +87,7 @@
   "devDependencies": {
     "@babel/core": "7.22.5",
     "@cloudflare/workers-types": "^4.20250224.0",
-    "@playwright/test": "1.57.0",
+    "@playwright/test": "^1.58.2",
     "@swc/plugin-react-remove-properties": "^6.0.2",
     "@trpc/server": "10.45.2",
     "@types/babel__core": "^7.20.1",
@@ -113,7 +114,7 @@
     "happy-dom": "16.0.1",
     "ip": "^2.0.1",
     "lorem-ipsum": "^2.0.4",
-    "otplib": "^12.0.1",
+    "otplib": "^13.3.0",
     "rollup-plugin-visualizer": "^5.13.1",
     "vite": "5.4.11",
     "vite-plugin-env-compatible": "^2.0.1",

apps/web/playwright.config.ts

@@ -31,7 +31,10 @@ const config: PlaywrightTestConfig = {
   // Look for test files in thcleare "tests" directory, relative to this configuration file
   testDir: "__e2e__",
 
-  timeout: IS_CI ? 60 * 1000 : 30 * 1000,
+  timeout: IS_CI ? 60 * 1000 : 60 * 1000,
+  expect: {
+    timeout: 20 * 1000
+  },
   workers: IS_CI ? 2 : 2,
   reporter: "list",
   retries: IS_CI ? 1 : 0,

apps/web/src/app-effects.tsx

@@ -64,14 +64,12 @@ export default function AppEffects() {
         await updateLastSynced();
         await initUser();
         // await resetNotices();
-        setIsVaultCreated(await db.vault.exists());
 
         await FeatureDialog.show({ featureName: "highlights" });
         await scheduleBackups();
         await scheduleFullBackups();
         await scheduleExpiredNotesDeletion();
 
-        db.attachments.removeOrphaned().catch(logger.error);
         if (useSettingStore.getState().isFullOfflineMode)
           // NOTE: we deliberately don't await here because we don't want to pause execution.
           db.attachments.cacheAttachments().catch(logger.error);

apps/web/src/common/db.ts

@@ -24,16 +24,12 @@ import { createDialect } from "./sqlite";
 import { isFeatureSupported } from "../utils/feature-check";
 import { generatePassword } from "../utils/password-generator";
 import { deriveKey, useKeyStore } from "../interfaces/key-store";
-import {
-  hosts,
-  logManager,
-  SubscriptionPlan,
-  SubscriptionStatus
-} from "@notesnook/core";
+import { hosts, SubscriptionPlan, SubscriptionStatus } from "@notesnook/core";
 import Config from "../utils/config";
 import { FileStorage } from "../interfaces/fs";
 
 function getHostUrl(hostUrl: keyof typeof hosts, defaultUrl: string) {
+  if (IS_TESTING) return defaultUrl;
   const envValue = import.meta.env[`NN_${hostUrl}`];
   return envValue || defaultUrl;
 }
@@ -130,13 +126,6 @@ async function initializeDatabase(persistence: DatabasePersistence) {
   await db.init();
   performance.mark("end:initdb");
 
-  window.addEventListener("beforeunload", async () => {
-    if (IS_DESKTOP_APP) {
-      await db.sql().destroy();
-      await logManager?.close();
-    }
-  });
-
   if (db.migrations?.required()) {
     await import("../dialogs/migration-dialog").then(({ MigrationDialog }) =>
       MigrationDialog.show({})

apps/web/src/common/desktop-bridge/index.desktop.ts

@@ -24,10 +24,14 @@ import { AppEventManager, AppEvents } from "../app-events";
 import { TaskScheduler } from "../../utils/task-scheduler";
 import { checkForUpdate } from "../../utils/updater";
 import { showToast } from "../../utils/toast";
+import { db } from "../db";
+import { logManager } from "@notesnook/core";
+import { store as settingStore } from "../../stores/setting-store";
 
-export const desktop = createTRPCProxyClient<AppRouter>({
-  links: [ipcLink()]
-});
+export const desktop: ReturnType<typeof createTRPCProxyClient<AppRouter>> =
+  createTRPCProxyClient<AppRouter>({
+    links: [ipcLink()]
+  });
 
 attachListeners();
 function attachListeners() {
@@ -63,8 +67,19 @@ function attachListeners() {
     attachListener(AppEvents.updateError)
   );
 
+  // desktop.window.onClose.subscribe(undefined, {
+  //   async onData() {
+  //     try {
+  //       await db.sql().destroy();
+  //       await logManager?.close();
+  //     } catch {
+  //       // ignore
+  //     }
+  //   }
+  // });
+
   TaskScheduler.register("updateCheck", "0 0 */12 * * * *", () => {
-    checkForUpdate();
+    checkForUpdate(settingStore.get().autoUpdates);
   });
 }
 

apps/web/src/components/diff-viewer/index.tsx

@@ -35,6 +35,7 @@ import { UnlockView } from "../unlock";
 import { getFormattedDate } from "@notesnook/common";
 import { diff } from "diffblazer";
 import { strings } from "@notesnook/intl";
+import { escapeUTF8 } from "entities";
 
 type DiffViewerProps = { session: ConflictedEditorSession | DiffEditorSession };
 function DiffViewer(props: DiffViewerProps) {
@@ -105,8 +106,11 @@ function DiffViewer(props: DiffViewerProps) {
         dangerouslySetInnerHTML={{
           __html:
             session.type === "diff" && session.oldTitle
-              ? diff(session.oldTitle || "", session.note.title)
-              : session.note.title
+              ? diff(
+                  escapeUTF8(session.oldTitle || ""),
+                  escapeUTF8(session.note.title)
+                )
+              : escapeUTF8(session.note.title)
         }}
       ></Text>
       <Flex mt={1} sx={{ alignSelf: "center", justifySelf: "center" }}>

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

@@ -57,7 +57,7 @@ import {
   downloadAttachment,
   previewImageAttachment
 } from "../../common/attachments";
-import { EV, EVENTS } from "@notesnook/core";
+import { EVENTS } from "@notesnook/core";
 import { db } from "../../common/db";
 import Titlebox, { resizeTextarea } from "./title-box";
 import Config from "../../utils/config";
@@ -711,12 +711,12 @@ function EditorChrome(props: PropsWithChildren<EditorProps>) {
         }
       });
 
-      const editorTitle = document.querySelector("#editor-title");
+      const editorTitle = document.querySelector(`#editor-title-${id}`);
       if (editorTitle instanceof HTMLTextAreaElement) {
         resizeTextarea(editorTitle);
       }
     }
-    const observer = new ResizeObserver(debounce(onResize, 500));
+    const observer = new ResizeObserver(onResize);
     observer.observe(editorScrollRef.current);
     return () => {
       observer.disconnect();

apps/web/src/components/editor/title-box.tsx

@@ -100,7 +100,7 @@ function TitleBox(props: TitleBoxProps) {
     <Textarea
       ref={inputRef}
       variant="clean"
-      id="editor-title"
+      id={`editor-title-${id}`}
       data-test-id="editor-title"
       className="editorTitle"
       placeholder={strings.noteTitle()}
@@ -110,9 +110,10 @@ function TitleBox(props: TitleBoxProps) {
       rows={1}
       sx={{
         m: 0,
-        p: 0,
+        py: 1,
+        px: 0,
         fontFamily,
-        fontSize: ["1.625em", "1.625em", "2.625em"],
+        fontSize: ["1.625em", "1.625em", "1.8em"],
         fontWeight: "heading",
         width: "100%",
         fieldSizing: "content",
@@ -156,6 +157,8 @@ export default React.memo(TitleBox, (prevProps, nextProps) => {
 });
 
 export function resizeTextarea(input: HTMLTextAreaElement) {
+  if (input.scrollHeight === 0) return;
+
   input.style.height = "auto";
   requestAnimationFrame(() => {
     input.style.height = input.scrollHeight + "px";

apps/web/src/components/error-boundary/index.tsx

@@ -38,11 +38,36 @@ const IGNORED_ERRORS = [
   "network error",
   "NetworkError when attempting to fetch resource."
 ];
+
+const EXTENSION_URL_PREFIXES = [
+  "chrome-extension://",
+  "moz-extension://",
+  "safari-extension://",
+  "safari-web-extension://"
+];
+
+function isFromBrowserExtension(error: unknown): boolean {
+  const stack =
+    error instanceof Error
+      ? error.stack
+      : typeof error === "string"
+      ? error
+      : undefined;
+  if (stack && EXTENSION_URL_PREFIXES.some((prefix) => stack.includes(prefix)))
+    return true;
+  return false;
+}
+
 export function GlobalErrorHandler(props: PropsWithChildren) {
   const { showBoundary } = useErrorBoundary();
 
   useEffect(() => {
     function handleError(e: ErrorEvent) {
+      if (
+        e.filename &&
+        EXTENSION_URL_PREFIXES.some((prefix) => e.filename.startsWith(prefix))
+      )
+        return;
       const error = new Error(e.message);
       error.stack = `${e.filename}:${e.lineno}:${e.colno}`;
       showBoundary(e.error || error);
@@ -53,6 +78,7 @@ export function GlobalErrorHandler(props: PropsWithChildren) {
         IGNORED_ERRORS.includes(e.reason.message)
       )
         return;
+      if (isFromBrowserExtension(e.reason)) return;
       showBoundary(e.reason);
     }
     window.addEventListener("unhandledrejection", handleUnhandledRejection);

apps/web/src/components/importer/components/import-result.tsx

@@ -57,8 +57,7 @@ export function ImportResult(props: ImportResultProps) {
       <CheckCircleOutline color="accent" />
       <Text variant="body" my={2} sx={{ textAlign: "center" }}>
         {strings.importCompleted()}. {props.result.totalNotes} notes
-        successfully imported.
-        {strings.errorsOccured(result.errors.length)}
+        successfully imported. {strings.errorsOccured(result.errors.length)}
       </Text>
       <Button
         variant="secondary"

apps/web/src/dialogs/command-palette/command-palette-dialog.tsx

@@ -49,6 +49,7 @@ import {
   removeRecentCommand,
   addRecentCommand
 } from "./commands";
+import { escapeUTF8 } from "entities";
 
 type CommandPaletteDialogProps = BaseDialogProps<boolean> & {
   isCommandMode: boolean;
@@ -400,21 +401,25 @@ function useDatabaseFuzzySearch() {
 
   const updateCollections = useCallback(async (force = false) => {
     if (force || !notes.current)
-      notes.current = await db.notes.all
-        .fields(["notes.id", "notes.title"])
-        .items();
+      notes.current = (
+        await db.notes.all.fields(["notes.id", "notes.title"]).items()
+      ).map((n) => ({ ...n, title: escapeUTF8(n.title) }));
     if (force || !notebooks.current)
-      notebooks.current = await db.notebooks.all
-        .fields(["notebooks.id", "notebooks.title"])
-        .items();
+      notebooks.current = (
+        await db.notebooks.all
+          .fields(["notebooks.id", "notebooks.title"])
+          .items()
+      ).map((n) => ({ ...n, title: escapeUTF8(n.title) }));
     if (force || !tags.current)
-      tags.current = await db.tags.all
-        .fields(["tags.id", "tags.title"])
-        .items();
+      tags.current = (
+        await db.tags.all.fields(["tags.id", "tags.title"]).items()
+      ).map((t) => ({ ...t, title: escapeUTF8(t.title) }));
     if (force || !reminders.current)
-      reminders.current = await db.reminders.all
-        .fields(["reminders.id", "reminders.title"])
-        .items();
+      reminders.current = (
+        await db.reminders.all
+          .fields(["reminders.id", "reminders.title"])
+          .items()
+      ).map((r) => ({ ...r, title: escapeUTF8(r.title) }));
   }, []);
 
   useEffect(() => {
@@ -446,12 +451,13 @@ function useDatabaseFuzzySearch() {
         tag: tags.current,
         reminder: reminders.current
       };
+      const escapedQuery = escapeUTF8(query);
       for (const _type in collections) {
         const type = _type as keyof typeof collections;
         const items = collections[type];
         if (!items) continue;
         for (const item of fuzzy(
-          query,
+          escapedQuery,
           items,
           (item) => item.id,
           {
@@ -496,7 +502,7 @@ async function getSessionsAsCommands() {
 
     commands.push({
       id: session.note.id,
-      title: session.note.title,
+      title: escapeUTF8(session.note.title),
       group: strings.dataTypesPluralCamelCase.note(),
       type: "note" as const,
       action: commandActions.note,

apps/web/src/dialogs/command-palette/commands.ts

@@ -18,6 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { strings } from "@notesnook/intl";
+import { escapeUTF8 } from "entities";
 import { db } from "../../common/db";
 import {
   ArrowLeft,
@@ -322,7 +323,7 @@ export function removeRecentCommand(id: string) {
 async function getActiveNoteCommands(): Promise<Command[]> {
   const note = useEditorStore.getState().getActiveNote();
   if (!note) return [];
-  const group = strings.actionsForNote(note.title);
+  const group = strings.actionsForNote(escapeUTF8(note.title));
 
   const commands: Command[] = [];
 
@@ -352,7 +353,7 @@ async function getActiveNotebookCommands() {
   if (context?.type !== "notebook") return [];
   const notebook = await db.notebooks.notebook(context.id);
   if (!notebook) return [];
-  const group = strings.actionsForNotebook(notebook.title);
+  const group = strings.actionsForNotebook(escapeUTF8(notebook.title));
 
   const commands: Command[] = [];
 
@@ -372,7 +373,7 @@ async function getActiveTagCommands() {
   if (context?.type !== "tag") return [];
   const tag = await db.tags.tag(context.id);
   if (!tag) return [];
-  const group = strings.actionsForTag(tag.title);
+  const group = strings.actionsForTag(escapeUTF8(tag.title));
   const commands: Command[] = [];
 
   const menuItems = await tagMenuItems(tag, [tag.id]);
@@ -537,26 +538,26 @@ async function getCommandTitle({ id, type }: RecentCommand) {
         0
       );
       if (!note) return;
-      return note.title;
+      return escapeUTF8(note.title);
     }
     case "notebook": {
       const notebook = (
         await db.notebooks.all.fields(["notebooks.title"]).items([id])
       ).at(0);
       if (!notebook) return;
-      return notebook.title;
+      return escapeUTF8(notebook.title);
     }
     case "tag": {
       const tag = (await db.tags.all.fields(["tags.title"]).items([id])).at(0);
       if (!tag) return;
-      return tag.title;
+      return escapeUTF8(tag.title);
     }
     case "reminder": {
       const reminder = (
         await db.reminders.all.fields(["reminders.title"]).items([id])
       ).at(0);
       if (!reminder) return;
-      return reminder.title;
+      return escapeUTF8(reminder.title);
     }
   }
 }

apps/web/src/dialogs/feature-dialog.tsx

@@ -91,34 +91,19 @@ const features: Record<FeatureKeys, Feature> = {
         ]
       : [
           {
-            title: "Import/export tables as CSV",
+            title: "Search improvements for diacritics & special characters",
             subtitle:
-              "You can now import and export CSV files as tables directly in the editor."
+              "Diacritic-agnostic search now works correctly. Searches with special characters no longer return empty results or crash the app."
           },
           {
-            title: "Customizable monograph title",
+            title: "Desktop auto-update control & YouTube embed fix",
             subtitle:
-              "You can now set a custom title for your monographs different from the note title."
+              'Disabling auto-update in settings now also disables the update checker. YouTube embed "Error 153" on Desktop has been fully resolved.'
           },
           {
-            title: "Expiring notes",
+            title: "Security patches for note titles & web clipper",
             subtitle:
-              "Set an expiration date for your notes after which they will be automatically moved to trash."
-          },
-          {
-            title: "Change note's created date",
-            subtitle:
-              "You can now change a note's created date from the note properties panel."
-          },
-          {
-            title: "Customizable line height",
-            subtitle:
-              "You can now customize the line height in the editor from Settings > Editor."
-          },
-          {
-            title: "Change week starting day",
-            subtitle:
-              "You can now change the starting day of the week from Settings > Behaviour."
+              "Note titles are now safely escaped in the diff viewer to prevent malicious HTML execution. Web clipper content is now securely sandboxed to block malicious scripts in iframes."
           }
         ],
     cta: {
@@ -192,7 +177,11 @@ export const FeatureDialog = DialogManager.register(function FeatureDialog(
           >
             <Flex sx={{ alignItems: "center", justifyContent: "start" }}>
               {feature.icon && <feature.icon size={14} color="accent" />}
-              <Text variant="subtitle" ml={1} sx={{ fontWeight: "normal" }}>
+              <Text
+                variant="subtitle"
+                ml={feature.icon ? 1 : 0}
+                sx={{ fontWeight: "normal" }}
+              >
                 {feature.title}
               </Text>
             </Flex>

apps/web/src/hooks/use-auto-updater.ts

@@ -18,11 +18,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { useEffect } from "react";
-
 import { checkForUpdate } from "../utils/updater";
 import { AppEventManager, AppEvents } from "../common/app-events";
 import BaseStore from "../stores";
 import createStore from "../common/store";
+import { useStore as useSettingStore } from "../stores/setting-store";
 
 type CompletedUpdateStatus = { type: "completed"; version: string };
 type DownloadingUpdateStatus = { type: "downloading"; progress: number };
@@ -103,8 +103,13 @@ export function useAutoUpdater() {
       updateDownloadProgress
     );
 
-    checkingForUpdate();
-    checkForUpdate().catch(console.error);
+    const settingStoreUnsub = useSettingStore.subscribe(
+      (s) => s.autoUpdates,
+      (autoUpdates) => {
+        checkingForUpdate();
+        checkForUpdate(autoUpdates).catch(console.error);
+      }
+    );
 
     return () => {
       checkingForUpdateEvent.unsubscribe();
@@ -112,6 +117,7 @@ export function useAutoUpdater() {
       updateNotAvailableEvent.unsubscribe();
       updateCompletedEvent.unsubscribe();
       updateProgressEvent.unsubscribe();
+      settingStoreUnsub();
     };
   }, []);
 

apps/web/src/stores/app-store.ts

@@ -185,6 +185,8 @@ class AppStore extends BaseStore<AppStore> {
 
     await this.refreshNavItems();
 
+    this.set({ isVaultCreated: await db.vault.exists() });
+
     logger.measure("refreshing app");
   };