client/status bar panes: refactor into own component, add title bar and close button

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

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