feat(client): create an empty language switcher at note level

src/public/app/widgets/note_language.ts

@@ -0,0 +1,30 @@
+import { Dropdown } from "bootstrap";
+import NoteContextAwareWidget from "./note_context_aware_widget.js";
+
+const TPL = `\
+<div class="dropdown note-language-widget">
+    <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle select-button note-language-button">
+        <span class="note-language-desc"></span>
+        <span class="caret"></span>
+    </button>
+    <div class="note-language-dropdown dropdown-menu dropdown-menu-left tn-dropdown-list"></div>
+</div>
+`;
+
+export default class NoteLanguageWidget extends NoteContextAwareWidget {
+
+    private dropdown!: Dropdown;
+    private $noteLanguageDropdown!: JQuery<HTMLElement>;
+    private $noteLanguageButton!: JQuery<HTMLElement>;
+    private $noteLanguageDesc!: JQuery<HTMLElement>;
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0]);
+
+        this.$noteLanguageDropdown = this.$widget.find(".note-language-dropdown")
+        this.$noteLanguageButton = this.$widget.find(".note-language-button");
+        this.$noteLanguageDesc = this.$widget.find(".note-language-desc");
+    }
+
+}

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

@@ -7,6 +7,7 @@ import SharedSwitchWidget from "../shared_switch.js";
 import { t } from "../../services/i18n.js";
 import TemplateSwitchWidget from "../template_switch.js";
 import type FNote from "../../entities/fnote.js";
+import NoteLanguageWidget from "../note_language.js";
 
 const TPL = `
 <div class="basic-properties-widget">
@@ -27,7 +28,9 @@ const TPL = `
             margin-right: 30px;
         }
 
-        .note-type-container, .editability-select-container {
+        .note-type-container,
+        .editability-select-container,
+        .note-language-container {
             display: flex;
             align-items: center;
         }
@@ -48,6 +51,10 @@ const TPL = `
     <div class="shared-switch-container"></div>
 
     <div class="template-switch-container"></div>
+
+    <div class="note-language-container">
+        <span>${t("basic_properties.language")}:</span> &nbsp;
+    </div>
 </div>`;
 
 export default class BasicPropertiesWidget extends NoteContextAwareWidget {
@@ -58,6 +65,7 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget {
     private bookmarkSwitchWidget: BookmarkSwitchWidget;
     private sharedSwitchWidget: SharedSwitchWidget;
     private templateSwitchWidget: TemplateSwitchWidget;
+    private noteLanguageWidget: NoteLanguageWidget;
 
     constructor() {
         super();
@@ -68,8 +76,16 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget {
         this.bookmarkSwitchWidget = new BookmarkSwitchWidget().contentSized();
         this.sharedSwitchWidget = new SharedSwitchWidget().contentSized();
         this.templateSwitchWidget = new TemplateSwitchWidget().contentSized();
-
+        this.noteLanguageWidget = new NoteLanguageWidget().contentSized();
-        this.child(this.noteTypeWidget, this.protectedNoteSwitchWidget, this.editabilitySelectWidget, this.bookmarkSwitchWidget, this.sharedSwitchWidget, this.templateSwitchWidget);
+
+        this.child(
+            this.noteTypeWidget,
+            this.protectedNoteSwitchWidget,
+            this.editabilitySelectWidget,
+            this.bookmarkSwitchWidget,
+            this.sharedSwitchWidget,
+            this.templateSwitchWidget,
+            this.noteLanguageWidget);
     }
 
     get name() {
@@ -98,6 +114,7 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget {
         this.$widget.find(".bookmark-switch-container").append(this.bookmarkSwitchWidget.render());
         this.$widget.find(".shared-switch-container").append(this.sharedSwitchWidget.render());
         this.$widget.find(".template-switch-container").append(this.templateSwitchWidget.render());
+        this.$widget.find(".note-language-container").append(this.noteLanguageWidget.render());
     }
 
     async refreshWithNote(note: FNote) {

src/public/translations/en/translation.json

@@ -744,7 +744,8 @@
   "basic_properties": {
     "note_type": "Note type",
     "editable": "Editable",
-    "basic_properties": "Basic Properties"
+    "basic_properties": "Basic Properties",
+    "language": "Language"
   },
   "book_properties": {
     "view_type": "View type",