refactoring of "collapsible section container" into "ribbon container"

src/public/app/widgets/ribbon_widgets/basic_properties.js

@@ -0,0 +1,60 @@
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import NoteTypeWidget from "../note_type.js";
+import ProtectedNoteSwitchWidget from "../protected_note_switch.js";
+
+const TPL = `
+<div class="basic-properties-widget">
+    <style>
+        .basic-properties-widget {
+            padding: 12px 12px 6px 12px;
+            display: flex;
+            align-items: baseline;
+        }
+        
+        .note-type-container {
+            display: flex;
+            align-items: center;
+        }
+        
+        .basic-properties-widget > * {
+            margin-right: 30px;
+        }
+    </style>
+    
+    <div class="note-type-container" style="display: flex">
+        <span>Note type:</span> &nbsp;
+    </div>
+    
+    <div class="protected-note-switch-container"></div>
+</div>`;
+
+export default class BasicPropertiesWidget extends NoteContextAwareWidget {
+    constructor() {
+        super();
+
+        this.noteTypeWidget = new NoteTypeWidget();
+        this.protectedNoteSwitchWidget = new ProtectedNoteSwitchWidget();
+
+        this.child(this.noteTypeWidget, this.protectedNoteSwitchWidget);
+    }
+
+    isEnabled() {
+        return this.note;
+    }
+
+    getTitle() {
+        return {
+            show: this.isEnabled(),
+            title: 'Basic Properties',
+            icon: 'bx bx-slider'
+        };
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.overflowing();
+
+        this.$widget.find(".note-type-container").append(this.noteTypeWidget.render());
+        this.$widget.find(".protected-note-switch-container").append(this.protectedNoteSwitchWidget.render());
+    }
+}