From 2f74b40095607bb1ee639de06bc9be6c53922f48 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Fri, 7 Nov 2025 23:45:48 +0200
Subject: [PATCH] client/read only note info bar: refactor

---
 .../src/stylesheets/theme-next-dark.css       |  1 -
 .../src/stylesheets/theme-next-light.css      |  1 -
 apps/client/src/widgets/react/InfoBar.css     | 19 +++++++++
 apps/client/src/widgets/react/InfoBar.tsx     | 18 +++++++++
 .../src/widgets/read_only_note_info_bar.css   | 27 +++++--------
 .../src/widgets/read_only_note_info_bar.tsx   | 40 ++++++++++---------
 6 files changed, 69 insertions(+), 37 deletions(-)
 create mode 100644 apps/client/src/widgets/react/InfoBar.css
 create mode 100644 apps/client/src/widgets/react/InfoBar.tsx

diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index 516a019b4..787bc2eb8 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -191,7 +191,6 @@
     --inactive-tab-text-color: #7c7c7c;
 
     --alert-bar-background: #6b6b6b3b;
-    --read-only-note-info-bar-background: var(--alert-bar-background);
 
     --badge-background-color: #ffffff1a;
     --badge-text-color: var(--muted-text-color);
diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css
index a5a913c4a..1c44ec755 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -184,7 +184,6 @@
     --inactive-tab-text-color: #4e4e4e;
 
     --alert-bar-background: #f9cf2b29;
-    --read-only-note-info-bar-background: var(--alert-bar-background);
 
     --badge-background-color: #00000011;
     --badge-text-color: var(--muted-text-color);
diff --git a/apps/client/src/widgets/react/InfoBar.css b/apps/client/src/widgets/react/InfoBar.css
new file mode 100644
index 000000000..73e0aba25
--- /dev/null
+++ b/apps/client/src/widgets/react/InfoBar.css
@@ -0,0 +1,19 @@
+.info-bar {
+    margin-top: 4px;
+    padding: 8px 20px;
+    color: var(--read-only-note-info-bar-color);
+    font-size: .9em;
+
+}
+
+.info-bar-prominent {
+    background: var(--alert-bar-background, var(--accented-background-color));
+}
+
+.info-bar-subtle {
+    color: var(--muted-text-color);
+    border-bottom: 1px solid var(--main-border-color);
+    margin-block: 0;
+    margin-inline: 10px;
+    padding-inline: 12px;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/InfoBar.tsx b/apps/client/src/widgets/react/InfoBar.tsx
new file mode 100644
index 000000000..ba8c7226a
--- /dev/null
+++ b/apps/client/src/widgets/react/InfoBar.tsx
@@ -0,0 +1,18 @@
+import { ComponentChildren } from "preact";
+
+import "./InfoBar.css";
+
+export type InfoBarParams = {
+    type: "prominent" | "subtle"
+    children: ComponentChildren;
+};
+
+export default function InfoBar(props: InfoBarParams) {
+    return <div className={`info-bar info-bar-${props.type}`}>
+        {props?.children}
+    </div>
+}
+
+InfoBar.defaultProps = {
+    type: "prominent"
+} as InfoBarParams
\ No newline at end of file
diff --git a/apps/client/src/widgets/read_only_note_info_bar.css b/apps/client/src/widgets/read_only_note_info_bar.css
index 78b36a948..6f96dcd92 100644
--- a/apps/client/src/widgets/read_only_note_info_bar.css
+++ b/apps/client/src/widgets/read_only_note_info_bar.css
@@ -1,33 +1,26 @@
 div.read-only-note-info-bar-widget {
     contain: none;
-    display: flex;
-    opacity: 0;
-    max-height: 0;
-    margin-top: 4px;
-    background: var(--read-only-note-info-bar-background, var(--accented-background-color));
-    padding: 8px 20px;
-    color: var(--read-only-note-info-bar-color);
-    justify-content: space-between;
-    align-items: center;
-    gap: 8px;
-    font-size: .9em;
-}
-
-div.read-only-note-info-bar-widget.visible {
-    max-height: unset;
-    opacity: 1;
-    transition: opacity 300ms ease-out;
 }
 
 div.read-only-note-info-bar-widget.zen-mode-only {
     display: none;
     max-width: var(--max-content-width);
     margin: 0 auto;
+}
+
+div.read-only-note-info-bar-widget.zen-mode-only .info-bar {
     border-radius: 8px;
 }
 
 body.zen div.read-only-note-info-bar-widget.zen-mode-only {
+    display: block;
+}
+
+.read-only-note-info-bar-widget-content {
     display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
 }
 
 :root div.read-only-note-info-bar-widget button {
diff --git a/apps/client/src/widgets/read_only_note_info_bar.tsx b/apps/client/src/widgets/read_only_note_info_bar.tsx
index c7dcba9c9..e1fda62cc 100644
--- a/apps/client/src/widgets/read_only_note_info_bar.tsx
+++ b/apps/client/src/widgets/read_only_note_info_bar.tsx
@@ -2,29 +2,33 @@ import "./read_only_note_info_bar.css";
 import { t } from "../services/i18n";
 import { useIsNoteReadOnly, useNoteContext, useTriliumEvent } from "./react/hooks"
 import Button from "./react/Button";
+import InfoBar from "./react/InfoBar";
 
 export default function ReadOnlyNoteInfoBar(props: {zenModeOnly?: boolean}) {
     const {note, noteContext} = useNoteContext();
     const {isReadOnly, enableEditing} = useIsNoteReadOnly(note, noteContext);
+    const isExplicitReadOnly = note?.isLabelTruthy("readOnly");
 
     return <div class={`read-only-note-info-bar-widget ${(isReadOnly) ? "visible" : ""} ${(props.zenModeOnly) ? "zen-mode-only" : ""}`}>
-                {isReadOnly && <>
-                    {note?.isLabelTruthy("readOnly") ? (
-                        <div>{t("read-only-info.read-only-note")}</div>
-                    ) : (
-                        <div> 
-                            {t("read-only-info.auto-read-only-note")}
-                            &nbsp;
-                            <a class="tn-link"
-                               href="https://docs.triliumnotes.org/user-guide/concepts/notes/read-only-notes#automatic-read-only-mode">
-                                
-                                {t("read-only-info.auto-read-only-learn-more")}
-                            </a>
-                        </div>
-                    )}
-                    
-                    <Button text={t("read-only-info.edit-note")}
-                            icon="bx-pencil" onClick={() => enableEditing()} />
-                </>}
+                {isReadOnly && <InfoBar type={(isExplicitReadOnly ? "subtle" : "prominent")}>
+                    <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")}
+                                &nbsp;
+                                <a class="tn-link"
+                                href="https://docs.triliumnotes.org/user-guide/concepts/notes/read-only-notes#automatic-read-only-mode">
+                                    
+                                    {t("read-only-info.auto-read-only-learn-more")}
+                                </a>
+                            </div>
+                        )}
+                        
+                        <Button text={t("read-only-info.edit-note")}
+                                icon="bx-pencil" onClick={() => enableEditing()} />
+                    </div>
+                </InfoBar>}
             </div>;
 }
\ No newline at end of file