From 74b00e60e3c0c924cd7cbee94fdac6dba6d7c99e Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 22 Dec 2025 19:39:52 +0200
Subject: [PATCH] client/status bar panes: refactor into own component, add
 title bar and close button

---
 apps/client/src/widgets/layout/StatusBar.css | 27 ++++++++++++-
 apps/client/src/widgets/layout/StatusBar.tsx | 40 +++++++++++++++++---
 2 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/widgets/layout/StatusBar.css b/apps/client/src/widgets/layout/StatusBar.css
index 15d45bf4e..52e7962d2 100644
--- a/apps/client/src/widgets/layout/StatusBar.css
+++ b/apps/client/src/widgets/layout/StatusBar.css
@@ -243,7 +243,6 @@
 
     > .attribute-list {
         font-size: 0.9em;
-        padding: 0.5em 0.75em;
 
         .inherited-attributes-widget > div {
             padding: 0;
@@ -260,3 +259,29 @@
     }
 
 }
+
+.status-bar-pane {
+    margin: 0 !important;
+    padding: 0;
+
+    .status-bar-pane-title-bar {
+        display: flex;
+        padding: 6px 12px;
+        background: #2d2d2d;
+        justify-content: space-between;
+        align-items: center;
+
+        .status-bar-pane-title-bar-caption {
+            text-transform: uppercase;
+            letter-spacing: .3pt;
+            font-weight: 600;
+            font-size: .85em;
+        }
+    }
+
+    .status-bar-pane-content {
+        background: #363636;
+        padding: 8px 12px;
+    }
+}
+
diff --git a/apps/client/src/widgets/layout/StatusBar.tsx b/apps/client/src/widgets/layout/StatusBar.tsx
index 0436a9f5b..e49e9a030 100644
--- a/apps/client/src/widgets/layout/StatusBar.tsx
+++ b/apps/client/src/widgets/layout/StatusBar.tsx
@@ -266,11 +266,14 @@ function NoteInfoValue({ text, title, value }: { text: string; title?: string, v
     );
 }
 
-function SimilarNotesPane({ note, similarNotesShown }: NoteInfoContext) {
+function SimilarNotesPane({ note, similarNotesShown, setSimilarNotesShown }: NoteInfoContext) {
     return (similarNotesShown &&
-        <div className="similar-notes-pane">
+        <StatusBarPane title="Similar notes"
+                       className="similar-notes-pane"
+                       visible={similarNotesShown}
+                       setVisible={setSimilarNotesShown}>
             <SimilarNotesTab note={note} />
-        </div>
+        </StatusBarPane>
     );
 }
 //#endregion
@@ -367,7 +370,11 @@ function AttributesPane({ note, noteContext, attributesShown, setAttributesShown
     }), [ api ]));
 
     return (context &&
-        <div className={clsx("attribute-list", !attributesShown && "hidden-ext")}>
+        <StatusBarPane title="Attributes"
+                       className="attribute-list"
+                       visible={attributesShown}
+                       setVisible={setAttributesShown}>
+
             <InheritedAttributesTab {...context} />
 
             <AttributeEditor
@@ -375,7 +382,7 @@ function AttributesPane({ note, noteContext, attributesShown, setAttributesShown
                 api={api}
                 ntxId={noteContext.ntxId}
             />
-        </div>
+        </StatusBarPane>
     );
 }
 //#endregion
@@ -439,3 +446,26 @@ function CodeNoteSwitcher({ note }: StatusBarContext) {
     );
 }
 //#endregion
+
+//#region Status bar pane
+
+interface StatusBarPaneParms {
+    children: ComponentChildren;
+    title: string;
+    visible: boolean;
+    setVisible?: (visible: boolean) => void;
+    className?: string;
+}
+
+function StatusBarPane({ children, title, visible, setVisible, className }: StatusBarPaneParms) {
+    return <div className={clsx("status-bar-pane", className, {"hidden-ext": !visible})}>
+        <div className="status-bar-pane-title-bar">
+            <span className="status-bar-pane-title-bar-caption">{title}</span>
+            <button class="icon-action bx bx-x" onClick={() => setVisible?.(false)}></button>
+        </div>
+        <div class="status-bar-pane-content">
+            {children}
+        </div>
+    </div>
+}
+//#endregion
\ No newline at end of file