From b52e615f0c2c5f850e762539aac91cc5bc7336d8 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 6 Nov 2025 01:08:26 +0200
Subject: [PATCH] client/read only note info bar: add support for zen mode

---
 apps/client/src/layouts/desktop_layout.tsx          | 1 +
 apps/client/src/layouts/mobile_layout.tsx           | 1 +
 apps/client/src/stylesheets/style.css               | 1 +
 apps/client/src/widgets/read_only_note_info_bar.css | 8 ++++++++
 apps/client/src/widgets/read_only_note_info_bar.tsx | 4 ++--
 5 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index aed35107e..e26664bf9 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/apps/client/src/layouts/desktop_layout.tsx
@@ -137,6 +137,7 @@ export default class DesktopLayout {
                                                         .child(
                                                             new ScrollingContainer()
                                                                 .filling()
+                                                                .child(<ReadOnlyNoteInfoBar zenModeOnly />)
                                                                 .child(new PromotedAttributesWidget())
                                                                 .child(<SqlTableSchemas />)
                                                                 .child(new NoteDetailWidget())
diff --git a/apps/client/src/layouts/mobile_layout.tsx b/apps/client/src/layouts/mobile_layout.tsx
index 133d139fd..517d50e36 100644
--- a/apps/client/src/layouts/mobile_layout.tsx
+++ b/apps/client/src/layouts/mobile_layout.tsx
@@ -153,6 +153,7 @@ export default class MobileLayout {
                                     .child(<SharedInfoWidget />)
                                     .child(<ReadOnlyNoteInfoBar />)
                                     .child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />)
+                                    .child(<ReadOnlyNoteInfoBar zenModeOnly />)
                                     .child(new PromotedAttributesWidget())
                                     .child(
                                         new ScrollingContainer()
diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 2e824a040..b356a0a55 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -2043,6 +2043,7 @@ body.zen .ribbon-container:has(.classic-toolbar-widget) .ribbon-top-row,
 body.zen .ribbon-container .ribbon-body:not(:has(.classic-toolbar-widget)),
 body.zen .note-icon-widget,
 body.zen .title-row .icon-action,
+body.zen .read-only-note-info-bar-widget:not(.zen-mode-only),
 body.zen .promoted-attributes-widget,
 body.zen .floating-buttons-children > *:not(.bx-edit-alt),
 body.zen .action-button,
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 3c799e3ce..5d02f5baa 100644
--- a/apps/client/src/widgets/read_only_note_info_bar.css
+++ b/apps/client/src/widgets/read_only_note_info_bar.css
@@ -17,6 +17,14 @@ div.read-only-note-info-bar-widget.visible {
     transition: opacity 300ms ease-out;
 }
 
+div.read-only-note-info-bar-widget.zen-mode-only {
+    display: none;
+}
+
+body.zen div.read-only-note-info-bar-widget.zen-mode-only {
+    display: flex;
+}
+
 :root div.read-only-note-info-bar-widget button {
     white-space: nowrap;
     padding: 2px 8px;
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 9ec9b264f..f181687db 100644
--- a/apps/client/src/widgets/read_only_note_info_bar.tsx
+++ b/apps/client/src/widgets/read_only_note_info_bar.tsx
@@ -3,11 +3,11 @@ import { t } from "../services/i18n";
 import { useIsNoteReadOnly, useNoteContext, useTriliumEvent } from "./react/hooks"
 import Button from "./react/Button";
 
-export default function ReadOnlyNoteInfoBar() {
+export default function ReadOnlyNoteInfoBar(props: {zenModeOnly?: boolean}) {
     const {isReadOnly, enableEditing} = useIsNoteReadOnly();
     const {note} = useNoteContext();
 
-    return <div class={`read-only-note-info-bar-widget ${(isReadOnly) ? " visible" : ""}`}>
+    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>