chore(react/ribbon): make content work

apps/client/src/widgets/containers/ribbon_container.ts

@@ -32,15 +32,6 @@ export default class RibbonContainer extends NoteContextAwareWidget {
         return super.isEnabled() && this.noteContext?.viewScope?.viewMode === "default";
     }
 
-    ribbon(widget: NoteContextAwareWidget) {
-        // TODO: Base class
-        super.child(widget);
-
-        this.ribbonWidgets.push(widget);
-
-        return this;
-    }
-
     button(widget: ButtonWidget) {
         super.child(widget);
 
@@ -54,10 +45,6 @@ export default class RibbonContainer extends NoteContextAwareWidget {
         this.$buttonContainer = this.$widget.find(".ribbon-button-container");
         this.$bodyContainer = this.$widget.find(".ribbon-body-container");
 
-        for (const ribbonWidget of this.ribbonWidgets) {
-            this.$bodyContainer.append($('<div class="ribbon-body">').attr("data-ribbon-component-id", ribbonWidget.componentId).append(ribbonWidget.render()));
-        }
-
         for (const buttonWidget of this.buttonWidgets) {
             this.$buttonContainer.append(buttonWidget.render());
         }

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

@@ -3,6 +3,8 @@ import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
 import { useNoteContext } from "../react/hooks";
 import "./style.css";
+import { VNode } from "preact";
+import BasicPropertiesTab from "./BasicPropertiesTab";
 
 type TitleFn = string | ((context: TabContext) => string);
 
@@ -13,6 +15,7 @@ interface TabContext {
 interface TabConfiguration {
     title: TitleFn;
     icon: string;
+    content?: () => VNode;
 }
 
 const TAB_CONFIGURATION: TabConfiguration[] = [
@@ -59,7 +62,8 @@ const TAB_CONFIGURATION: TabConfiguration[] = [
     {
         // BasicProperties
         title: t("basic_properties.basic_properties"),
-        icon: "bx bx-slider"
+        icon: "bx bx-slider",
+        content: BasicPropertiesTab
     },
     {
         // OwnedAttributeListWidget
@@ -98,6 +102,7 @@ export default function Ribbon() {
     const { note } = useNoteContext();
     const context: TabContext = { note };
     const [ activeTab, setActiveTab ] = useState<number>();
+    const activeTabConfiguration = activeTab ? TAB_CONFIGURATION[activeTab] : undefined;
 
     return (
         <div class="ribbon-container" style={{ contain: "none" }}>
@@ -122,7 +127,11 @@ export default function Ribbon() {
                 <div className="ribbon-button-container"></div>
             </div>
         
-            <div className="ribbon-body-container"></div>
+            <div className="ribbon-body-container">
+                <div className="ribbon-body">
+                    {activeTabConfiguration?.content && activeTabConfiguration.content()}
+                </div>
+            </div>
         </div>
     )
 }

apps/client/src/widgets/ribbon/style.css

@@ -80,7 +80,6 @@
 }
 
 .ribbon-body {
-    display: none;
     border-bottom: 1px solid var(--main-border-color);
     margin-left: 10px;
     margin-right: 5px; /* needs to have this value so that the bottom border is the same width as the top one */