client/read only note info bar: refactor

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);

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);

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;
+}

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

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 {

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>;
 }