client/status bar panes: improve

apps/client/src/translations/en/translation.json

@@ -818,7 +818,8 @@
   },
   "inherited_attribute_list": {
     "title": "Inherited Attributes",
-    "no_inherited_attributes": "No inherited attributes."
+    "no_inherited_attributes": "No inherited attributes.",
+    "none": "none"
   },
   "note_info_widget": {
     "note_id": "Note ID",
@@ -2203,6 +2204,9 @@
     "note_paths_title": "Note paths",
     "code_note_switcher": "Change language mode"
   },
+  "attributes_panel": {
+    "title": "Note Attributes"
+  },
   "right_pane": {
     "empty_message": "Nothing to show for this note",
     "empty_button": "Hide the panel",

apps/client/src/widgets/layout/StatusBar.css

@@ -244,22 +244,46 @@
     > .attribute-list {
         font-size: 0.9em;
 
-        .inherited-attributes-widget > div {
+        .attributes-panel-label {
-            padding: 0;
+            opacity: .5;
-            font-size: 0.9em;
+            margin-inline-end: 4px;
+            font-weight: 600;
         }
 
+        .inherited-attributes-widget {
+            display: inline;
+
+            > div {
+                display: inline;
+                padding: 0;
+            }
+         }
+
+         .attribute-list-editor-wrapper {
+            display: flex;
+            flex-direction: column-reverse;
+            padding-bottom: 0 !important;
+
             .attribute-list-editor {
                 padding-block: 0 !important;
                 padding-inline: 0 100px !important ;
             }
 
+            .attribute-errors {
+                padding: 4px 0;
+                color: var(--dropdown-item-icon-destructive-color);
+                font-style: italic;
+            }
+
             .ck.ck-editor__editable::after {
                 /* Remove a hidden spinner that causes overflow */
                 display: none;
             }
          }
 
+
+    }
+
     div.similar-notes-widget div.similar-notes-wrapper {
         max-height: unset;
     }

apps/client/src/widgets/layout/StatusBar.tsx

@@ -268,7 +268,7 @@ function NoteInfoValue({ text, title, value }: { text: string; title?: string, v
 
 function SimilarNotesPane({ note, similarNotesShown, setSimilarNotesShown }: NoteInfoContext) {
     return (similarNotesShown &&
-        <StatusBarPane title="Similar notes"
+        <StatusBarPane title={t("similar_notes.title")}
                        className="similar-notes-pane"
                        visible={similarNotesShown}
                        setVisible={setSimilarNotesShown}
@@ -371,12 +371,13 @@ function AttributesPane({ note, noteContext, attributesShown, setAttributesShown
     }), [ api ]));
 
     return (context &&
-        <StatusBarPane title="Attributes"
+        <StatusBarPane title={t("attributes_panel.title")}
                        className="attribute-list"
                        visible={attributesShown}
                        setVisible={setAttributesShown}>
             
-            <InheritedAttributesTab {...context} />
+            <span class="attributes-panel-label">{t("inherited_attribute_list.title")}</span>
+            <InheritedAttributesTab {...context} emptyListString="inherited_attribute_list.none" />
 
             <AttributeEditor
                 {...context}

apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx

@@ -9,7 +9,11 @@ import RawHtml from "../react/RawHtml";
 import { joinElements } from "../react/react_utils";
 import AttributeDetailWidget from "../attribute_widgets/attribute_detail";
 
-export default function InheritedAttributesTab({ note, componentId }: Pick<TabContext, "note" | "componentId">) {
+type InheritedAttributesTabArgs = Pick<TabContext, "note" | "componentId"> & {
+    emptyListString?: string;
+}
+
+export default function InheritedAttributesTab({ note, componentId, emptyListString }: InheritedAttributesTabArgs) {
     const [ inheritedAttributes, setInheritedAttributes ] = useState<FAttribute[]>();
     const [ attributeDetailWidgetEl, attributeDetailWidget ] = useLegacyWidget(() => new AttributeDetailWidget());
 
@@ -63,7 +67,7 @@ export default function InheritedAttributesTab({ note, componentId }: Pick<TabCo
                         />
                     )), " ")
                 ) : (
-                    <>{t("inherited_attribute_list.no_inherited_attributes")}</>
+                    <>{t(emptyListString ?? "inherited_attribute_list.no_inherited_attributes")}</>
                 )}
             </div>
 

apps/client/src/widgets/ribbon/components/AttributeEditor.tsx

@@ -283,6 +283,7 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
     return (
         <>
             {!hidden && <div
+                className="attribute-list-editor-wrapper"
                 ref={wrapperRef}
                 style="position: relative; padding-top: 10px; padding-bottom: 10px"
                 onKeyDown={(e) => {
@@ -296,7 +297,7 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
                         setTimeout(() => save(), 100);
                     }
                 }}
-            >
+            >   <div style="position: relative;">
                     <CKEditor
                         apiRef={editorRef}
                         className="attribute-list-editor"
@@ -397,6 +398,7 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
                             }}
                         />
                     </div>
+                </div>
 
                 { error && (
                     <div className="attribute-errors">