feat(layout): implement read-only badge

apps/client/src/layouts/desktop_layout.tsx

@@ -50,6 +50,7 @@ import { isExperimentalFeatureEnabled } from "../services/experimental_features.
 import NoteActions from "../widgets/ribbon/NoteActions.jsx";
 import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.jsx";
 import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
+import NoteBadges from "../widgets/BreadcrumbBadges.jsx";
 
 export default class DesktopLayout {
 
@@ -138,6 +139,7 @@ export default class DesktopLayout {
                                                                 .class("breadcrumb-row")
                                                                 .cssBlock(".breadcrumb-row > * { margin: 5px; }")
                                                                 .child(<Breadcrumb />)
+                                                                .child(<NoteBadges />)
                                                                 .child(<SpacerWidget baseSize={0} growthFactor={1} />)
                                                                 .child(<MovePaneButton direction="left" />)
                                                                 .child(<MovePaneButton direction="right" />)
@@ -155,7 +157,7 @@ export default class DesktopLayout {
                                                                 .filling()
                                                                 .optChild(isNewLayout, titleRow)
                                                                 .child(new ContentHeader()
-                                                                    .child(<ReadOnlyNoteInfoBar />)
+                                                                    .optChild(!isNewLayout, <ReadOnlyNoteInfoBar />)
                                                                     .child(<SharedInfo />)
                                                                 )
                                                                 .child(<PromotedAttributes />)

apps/client/src/widgets/BreadcrumbBadges.css

@@ -0,0 +1,15 @@
+.component.breadcrumb-badges {
+    display: flex;
+    gap: 5px;
+    contain: none;
+
+    .breadcrumb-badge {
+        display: flex;
+        align-items: center;
+        padding: 2px 6px;
+        border-radius: 12px;
+        font-size: 0.75em;
+        background-color: var(--badge-background-color);
+        color: var(--badge-text-color);
+    }
+}

apps/client/src/widgets/BreadcrumbBadges.tsx

@@ -0,0 +1,32 @@
+import "./BreadcrumbBadges.css";
+
+import { ComponentChildren } from "preact";
+import { useIsNoteReadOnly, useNoteContext } from "./react/hooks";
+
+export default function NoteBadges() {
+    return (
+        <div className="breadcrumb-badges">
+            <ReadOnlyBadge />
+        </div>
+    );
+}
+
+function ReadOnlyBadge() {
+    const { note, noteContext } = useNoteContext();
+    const { isReadOnly, enableEditing } = useIsNoteReadOnly(note, noteContext);
+    const isExplicitReadOnly = note?.isLabelTruthy("readOnly");
+
+    return (isReadOnly &&
+        <Badge onClick={() => enableEditing()}>
+            {isExplicitReadOnly ? "Read-only" : "Auto read-only"}
+        </Badge>
+    );
+}
+
+function Badge({ children, onClick }: { children: ComponentChildren, onClick?: () => void }) {
+    return (
+        <div className="breadcrumb-badge" onClick={onClick}>
+            {children}
+        </div>
+    );
+}