From 870499bc3a05f7fa5c027fc3143abfa5d9fa5cf0 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 12 Dec 2025 21:41:05 +0200
Subject: [PATCH] feat(status_bar): basic integration of inherited attributes

---
 apps/client/src/widgets/layout/StatusBar.css  |  6 +++++-
 apps/client/src/widgets/layout/StatusBar.tsx  | 19 +++++++++++++------
 .../widgets/ribbon/InheritedAttributesTab.tsx |  6 +++---
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/apps/client/src/widgets/layout/StatusBar.css b/apps/client/src/widgets/layout/StatusBar.css
index e5ee87a08..77475869b 100644
--- a/apps/client/src/widgets/layout/StatusBar.css
+++ b/apps/client/src/widgets/layout/StatusBar.css
@@ -3,7 +3,7 @@
     border-top: 1px solid var(--main-border-color);
     background-color: var(--left-pane-background-color);
 
-    .status-bar-main-row {
+    > .status-bar-main-row {
         min-height: 32px;
         display: flex;
         align-items: center;
@@ -72,4 +72,8 @@
         }
     }
 
+    > .attribute-list {
+        font-size: 0.9em;
+    }
+
 }
diff --git a/apps/client/src/widgets/layout/StatusBar.tsx b/apps/client/src/widgets/layout/StatusBar.tsx
index b3ed74b5b..0ca29941c 100644
--- a/apps/client/src/widgets/layout/StatusBar.tsx
+++ b/apps/client/src/widgets/layout/StatusBar.tsx
@@ -26,6 +26,7 @@ import { NoteSizeWidget, useNoteMetadata } from "../ribbon/NoteInfoTab";
 import { useAttachments } from "../type_widgets/Attachment";
 import { useProcessedLocales } from "../type_widgets/options/components/LocaleSelector";
 import Breadcrumb from "./Breadcrumb";
+import InheritedAttributesTab from "../ribbon/InheritedAttributesTab";
 
 interface StatusBarContext {
     note: FNote;
@@ -272,15 +273,21 @@ function AttributesPane({ note, noteContext }: StatusBarContext) {
     const parentComponent = useContext(ParentComponent);
     const api = useRef<AttributeEditorImperativeHandlers>(null);
 
-    return (
+    const context = parentComponent && {
+        componentId: parentComponent.componentId,
+        note,
+        hidden: !note
+    };
+
+    return (context &&
         <div className="attribute-list">
-            {parentComponent && <AttributeEditor
-                componentId={parentComponent.componentId}
+            <InheritedAttributesTab {...context} />
+
+            <AttributeEditor
+                {...context}
                 api={api}
                 ntxId={noteContext.ntxId}
-                note={note}
-                hidden={!note}
-            />}
+            />
         </div>
     );
 }
diff --git a/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx b/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx
index bc6f3eb49..9e7ff4288 100644
--- a/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx
+++ b/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx
@@ -9,7 +9,7 @@ import RawHtml from "../react/RawHtml";
 import { joinElements } from "../react/react_utils";
 import AttributeDetailWidget from "../attribute_widgets/attribute_detail";
 
-export default function InheritedAttributesTab({ note, componentId }: TabContext) {
+export default function InheritedAttributesTab({ note, componentId }: Pick<TabContext, "note" | "componentId">) {
     const [ inheritedAttributes, setInheritedAttributes ] = useState<FAttribute[]>();
     const [ attributeDetailWidgetEl, attributeDetailWidget ] = useLegacyWidget(() => new AttributeDetailWidget());
 
@@ -34,7 +34,7 @@ export default function InheritedAttributesTab({ note, componentId }: TabContext
             refresh();
         }
     });
-    
+
     return (
         <div className="inherited-attributes-widget">
             <div className="inherited-attributes-container selectable-text">
@@ -83,4 +83,4 @@ function InheritedAttribute({ attribute, onClick }: { attribute: FAttribute, onC
             onClick={onClick}
         />
     );
-}
\ No newline at end of file
+}