web: fix readonly note not locking when vault is locked (#8092)

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

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

@@ -77,4 +77,11 @@ export class NoteItemModel extends BaseItemModel {
     }
     return tags;
   }
+
+  async isLockedNotePasswordFieldVisible() {
+    return this.page
+      .locator(".active")
+      .locator(getTestId("unlock-note-password"))
+      .isVisible();
+  }
 }

apps/web/__e2e__/vault.test.ts

@@ -86,3 +86,42 @@ test("unlocking a note permanently should not show vault unlocked status", async
 
   await expect(vaultUnlockedStatus).toBeHidden();
 });
+
+test("clicking on vault unlocked status should lock the note", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  const note = await notes.createNote(NOTE);
+  await note?.contextMenu.lock(PASSWORD);
+  await note?.openLockedNote(PASSWORD);
+
+  expect(await note?.isLockedNotePasswordFieldVisible()).toBe(false);
+
+  const vaultUnlockedStatus = page.locator(getTestId("vault-unlocked"));
+  await vaultUnlockedStatus.waitFor({ state: "visible" });
+  await vaultUnlockedStatus.click();
+
+  expect(await note?.isLockedNotePasswordFieldVisible()).toBe(true);
+});
+
+test("clicking on vault unlocked status should lock the readonly note", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  const note = await notes.createNote(NOTE);
+  await note?.properties.readonly();
+  await note?.contextMenu.lock(PASSWORD);
+  await note?.openLockedNote(PASSWORD);
+
+  expect(await note?.isLockedNotePasswordFieldVisible()).toBe(false);
+
+  const vaultUnlockedStatus = page.locator(getTestId("vault-unlocked"));
+  await vaultUnlockedStatus.waitFor({ state: "visible" });
+  await vaultUnlockedStatus.click();
+
+  expect(await note?.isLockedNotePasswordFieldVisible()).toBe(true);
+});

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

@@ -164,7 +164,8 @@ export type DocumentPreview = {
 export function isLockedSession(session: EditorSession): boolean {
   return (
     session.type === "locked" ||
-    (session.type === "default" && !!session.locked) ||
+    ((session.type === "default" || session.type === "readonly") &&
+      !!session.locked) ||
     ("content" in session &&
       !!session.content &&
       "locked" in session.content &&