From c9aa992e730255c04d88d45624134b2a62040d7a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 29 Nov 2025 19:40:00 +0200
Subject: [PATCH] fix(read-only-bar): displayed when viewing attachments

---
 .../src/widgets/ReadOnlyNoteInfoBar.tsx       | 42 ++++++++++---------
 apps/client/src/widgets/react/hooks.tsx       |  6 +--
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/apps/client/src/widgets/ReadOnlyNoteInfoBar.tsx b/apps/client/src/widgets/ReadOnlyNoteInfoBar.tsx
index fbbe6a2ba..af305fc1c 100644
--- a/apps/client/src/widgets/ReadOnlyNoteInfoBar.tsx
+++ b/apps/client/src/widgets/ReadOnlyNoteInfoBar.tsx
@@ -6,28 +6,30 @@ import InfoBar from "./react/InfoBar";
 import HelpButton from "./react/HelpButton";
 
 export default function ReadOnlyNoteInfoBar(props: {}) {
-    const {note, noteContext} = useNoteContext();
-    const {isReadOnly, enableEditing} = useIsNoteReadOnly(note, noteContext);
+    const { note, noteContext } = useNoteContext();
+    const { isReadOnly, enableEditing } = useIsNoteReadOnly(note, noteContext);
     const isExplicitReadOnly = note?.isLabelTruthy("readOnly");
 
-    return <InfoBar className="read-only-note-info-bar-widget"
-                    type={(isExplicitReadOnly ? "subtle" : "prominent")}
-                    style={{display: (!isReadOnly) ? "none" : undefined}}>
-
-                    <div class="read-only-note-info-bar-widget-content">
-                        {(isExplicitReadOnly) ? (
-                            <div>{t("read-only-info.read-only-note")}</div>
-                        ) : (
-                            <div>
-                                {t("read-only-info.auto-read-only-note")}
-                                {" "}
-                                <HelpButton helpPage="CoFPLs3dRlXc" />
-                            </div>
-                        )}
-
-                        <Button text={t("read-only-info.edit-note")}
-                                icon="bx-pencil" onClick={() => enableEditing()} />
+    return (
+        <InfoBar
+            className="read-only-note-info-bar-widget"
+            type={(isExplicitReadOnly ? "subtle" : "prominent")}
+            style={{display: (!isReadOnly) ? "none" : undefined}}
+        >
+            <div class="read-only-note-info-bar-widget-content">
+                {(isExplicitReadOnly) ? (
+                    <div>{t("read-only-info.read-only-note")}</div>
+                ) : (
+                    <div>
+                        {t("read-only-info.auto-read-only-note")}
+                        {" "}
+                        <HelpButton helpPage="CoFPLs3dRlXc" />
                     </div>
-                </InfoBar>
+                )}
 
+                <Button text={t("read-only-info.edit-note")}
+                        icon="bx-pencil" onClick={() => enableEditing()} />
+            </div>
+        </InfoBar>
+    );
 }
diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx
index f9e5d073d..07429b73c 100644
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -795,7 +795,7 @@ export function useKeyboardShortcuts(scope: "code-detail" | "text-detail", conta
  * and provides a way to switch to editing mode.
  */
 export function useIsNoteReadOnly(note: FNote | null | undefined, noteContext: NoteContext | undefined) {
-    const [isReadOnly, setIsReadOnly] = useState<boolean | undefined>(undefined);
+    const [ isReadOnly, setIsReadOnly ] = useState<boolean | undefined>(undefined);
 
     const enableEditing = useCallback(() => {
         if (noteContext?.viewScope) {
@@ -810,7 +810,7 @@ export function useIsNoteReadOnly(note: FNote | null | undefined, noteContext: N
                 setIsReadOnly(readOnly);
             });
         }
-    }, [note, noteContext]);
+    }, [ note, noteContext, noteContext?.viewScope ]);
 
     useTriliumEvent("readOnlyTemporarilyDisabled", ({noteContext: eventNoteContext}) => {
         if (noteContext?.ntxId === eventNoteContext.ntxId) {
@@ -818,7 +818,7 @@ export function useIsNoteReadOnly(note: FNote | null | undefined, noteContext: N
         }
     });
 
-    return {isReadOnly, enableEditing};
+    return { isReadOnly, enableEditing };
 }
 
 async function isNoteReadOnly(note: FNote, noteContext: NoteContext) {