feat(status_bar): basic integration of inherited attributes

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

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

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