fix all dropdowns and tooltips, fix some translations

src/public/app/services/note_autocomplete.js

@@ -105,28 +105,23 @@ function initNoteAutocomplete($el, options) {
 
     $el.addClass("note-autocomplete-input");
 
-    const $clearTextButton = $("<a>")
+    const $clearTextButton = $("<button>")
         .addClass("input-group-text input-clearer-button bx bxs-tag-x")
         .prop("title", "Clear text field");
 
-    const $showRecentNotesButton = $("<a>")
+    const $showRecentNotesButton = $("<button>")
         .addClass("input-group-text show-recent-notes-button bx bx-time")
         .prop("title", "Show recent notes");
 
-    const $goToSelectedNoteButton = $("<a>")
+    const $goToSelectedNoteButton = $("<button>")
         .addClass("input-group-text go-to-selected-note-button bx bx-arrow-to-right");
 
-    const $sideButtons = $("<div>")
+    $el.after($clearTextButton).after($showRecentNotesButton);
-        .addClass("input-group-append")
-        .append($clearTextButton)
-        .append($showRecentNotesButton);
 
     if (!options.hideGoToSelectedNoteButton) {
-        $sideButtons.append($goToSelectedNoteButton);
+        $el.after($goToSelectedNoteButton);
     }
 
-    $el.after($sideButtons);
-
     $clearTextButton.on('click', () => clearText($el));
 
     $showRecentNotesButton.on('click', e => {

src/public/app/widgets/bulk_actions/execute_script.js

@@ -15,7 +15,7 @@ const TPL = `
     <td class="button-column">
         <div style="display: flex">
             <div class="dropdown help-dropdown">
-              <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+              <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
               <div class="dropdown-menu dropdown-menu-right p-4">
                 ${t('execute_script.help_text')}
                 

src/public/app/widgets/bulk_actions/label/add_label.js

@@ -21,7 +21,7 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 <p>${t("add_label.help_text")}</p>
                 
@@ -30,7 +30,7 @@ const TPL = `
                     <li>${t("add_label.help_text_item2")}</li>
                 </ul>
                 
-                <p>${t("add_label.help_text_note")}</p>
+                ${t("add_label.help_text_note")}
             </div> 
         </div>
     

src/public/app/widgets/bulk_actions/label/update_label_value.js

@@ -21,11 +21,11 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 <p>${t("update_label_value.help_text")}</p>
                 
-                <p>${t("update_label_value.help_text_note")}</p>
+                ${t("update_label_value.help_text_note")}
             </div> 
         </div>
     

src/public/app/widgets/bulk_actions/note/delete_note.js

@@ -10,13 +10,13 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 <p>${t("delete_note.delete_matched_notes_description")}</p>
                  
                 <p>${t("delete_note.undelete_notes_instruction")}</p>
                 
-                <p>${t("delete_note.erase_notes_instruction")}</p>
+                ${t("delete_note.erase_notes_instruction")}
             </div>
         </div>
         

src/public/app/widgets/bulk_actions/note/delete_revisions.js

@@ -9,7 +9,7 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 ${t('delete_revisions.all_past_note_revisions')}
             </div>

src/public/app/widgets/bulk_actions/note/move_note.js

@@ -18,11 +18,11 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 <p>${t('move_note.on_all_matched_notes')}:</p>
                 
-                <ul>
+                <ul style="margin-bottom: 0;">
                     <li>${t('move_note.move_note_new_parent')}</li>
                     <li>${t('move_note.clone_note_new_parent')}</li>
                     <li>${t('move_note.nothing_will_happen')}</li>

src/public/app/widgets/bulk_actions/note/rename_note.js

@@ -16,7 +16,7 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 <p>${t('rename_note.evaluated_as_js_string')}</p>
                 

src/public/app/widgets/bulk_actions/relation/add_relation.js

@@ -25,9 +25,9 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
-                <p>${t('add_relation.create_relation_on_all_matched_notes')}</p>
+                ${t('add_relation.create_relation_on_all_matched_notes')}
             </div> 
         </div>
     

src/public/app/widgets/bulk_actions/relation/update_relation_target.js

@@ -25,11 +25,11 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 <p>${t('update_relation_target.on_all_matched_notes')}:</p>
                 
-                <ul>
+                <ul style="margin-bottom: 0;">
                     <li>${t('update_relation_target.create_given_relation')}</li>
                     <li>${t('update_relation_target.change_target_note')}</li>
                 </ul>

src/public/app/widgets/buttons/attachments_actions.js

@@ -27,7 +27,7 @@ const TPL = `
     }
     </style>
 
-    <button type="button" data-toggle="dropdown" aria-haspopup="true" 
+    <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" 
         aria-expanded="false" class="icon-action icon-action-always-border bx bx-dots-vertical-rounded"
         style="position: relative; top: 3px;"></button>
 
@@ -61,7 +61,8 @@ export default class AttachmentActionsWidget extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.$widget.on('click', '.dropdown-item', () => this.$widget.find("[data-toggle='dropdown']").dropdown('toggle'));
+        this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
+        this.$widget.on('click', '.dropdown-item', () => this.dropdown.toggle());
 
         this.$uploadNewRevisionInput = this.$widget.find(".attachment-upload-new-revision-input");
         this.$uploadNewRevisionInput.on('change', async () => {

src/public/app/widgets/dialogs/add_link.js

@@ -9,13 +9,11 @@ const TPL = `
     <div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title mr-auto">${t('add_link.add_link')}</h5>
+                <h5 class="modal-title me-auto">${t('add_link.add_link')}</h5>
 
                 <button type="button" class="help-button" title="${t('add_link.help_on_links')}" data-help-page="links.html">?</button>
 
-                <button type="button" class="close" data-dismiss="modal" aria-label="${t('add_link.close')}" style="margin-left: 0 !important;">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t('add_link.close')}" style="margin-left: 0 !important;"></button>
-                    <span aria-hidden="true">&times;</span>
-                </button>
             </div>
             <form class="add-link-form">
                 <div class="modal-body">
@@ -62,6 +60,8 @@ const TPL = `
 export default class AddLinkDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
+        bootstrap.Modal.getOrCreateInstance(this.$widget);
+
         this.$form = this.$widget.find(".add-link-form");
         this.$autoComplete = this.$widget.find(".add-link-note-autocomplete");
         this.$linkTitle = this.$widget.find(".link-title");

src/public/app/widgets/dialogs/bulk_actions.js

@@ -40,18 +40,14 @@ const TPL = `
             <div class="modal-header">
                 <h5 class="modal-title mr-auto">${t('bulk_actions.bulk_actions')}</h5>
 
-                <button type="button" class="close" data-dismiss="modal" aria-label="${t('bulk_actions.close')}">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t('bulk_actions.close')}"></button>
-                    <span aria-hidden="true">&times;</span>
-                </button>
             </div>
             <div class="modal-body">
                 <h4>${t('bulk_actions.affected_notes')}: <span class="affected-note-count">0</span></h4>
 
                 <div class="form-check">
-                    <label class="form-check-label">
                     <input class="include-descendants form-check-input" type="checkbox" value="">
-                        ${t('bulk_actions.include_descendants')}
+                    <label class="form-check-label">${t('bulk_actions.include_descendants')}</label>
-                    </label>
                 </div>
 
                 <h4>${t('bulk_actions.available_actions')}</h4>
@@ -72,6 +68,7 @@ const TPL = `
 export default class BulkActionsDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
+        bootstrap.Modal.getOrCreateInstance(this.$widget);
 
         this.$includeDescendants = this.$widget.find(".include-descendants");
         this.$includeDescendants.on("change", () => this.refresh());

src/public/app/widgets/dialogs/import.js

@@ -11,9 +11,7 @@ const TPL = `
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">${t('import.importIntoNote')}</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="${t('import.close')}">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t('import.close')}"></button>
-                    <span aria-hidden="true">&times;</span>
-                </button>
             </div>
             <form class="import-form">
                 <div class="modal-body">
@@ -29,21 +27,21 @@ const TPL = `
                         <strong>${t('import.options')}:</strong>
 
                         <div class="checkbox">
-                            <label data-toggle="tooltip" title="${t('import.safeImportTooltip')}">
+                            <label data-bs-toggle="tooltip" title="${t('import.safeImportTooltip')}">
                                 <input class="safe-import-checkbox" value="1" type="checkbox" checked>
                                 <span>${t('import.safeImport')}</span>
                             </label>
                         </div>
 
                         <div class="checkbox">
-                            <label data-toggle="tooltip" title="${t('import.explodeArchivesTooltip')}">
+                            <label data-bs-toggle="tooltip" title="${t('import.explodeArchivesTooltip')}">
                                 <input class="explode-archives-checkbox" value="1" type="checkbox" checked>
                                 <span>${t('import.explodeArchives')}</span>
                             </label>
                         </div>
 
                         <div class="checkbox">
-                            <label data-toggle="tooltip" title="${t('import.shrinkImagesTooltip')}">
+                            <label data-bs-toggle="tooltip" title="${t('import.shrinkImagesTooltip')}">
                                 <input class="shrink-images-checkbox" value="1" type="checkbox" checked> <span>${t('import.shrinkImages')}</span>
                             </label>
                         </div>
@@ -86,6 +84,8 @@ export default class ImportDialog extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
+        bootstrap.Modal.getOrCreateInstance(this.$widget);
+
         this.$form = this.$widget.find(".import-form");
         this.$noteTitle = this.$widget.find(".import-note-title");
         this.$fileUploadInput = this.$widget.find(".import-file-upload-input");
@@ -115,9 +115,11 @@ export default class ImportDialog extends BasicWidget {
             }
         });
 
-        this.$widget.find('[data-toggle="tooltip"]').tooltip({
+        let _ = [...this.$widget.find('[data-bs-toggle="tooltip"]')].forEach(element => {
+            bootstrap.Tooltip.getOrCreateInstance(element, {
                 html: true
             });
+        });
     }
 
     async showImportDialogEvent({ noteId }) {

src/public/app/widgets/dialogs/note_type_chooser.js

@@ -23,17 +23,17 @@ const TPL = `
     <div class="modal-dialog" style="max-width: 500px;" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title mr-auto">${t("note_type_chooser.modal_title")}</h5>
+                <h5 class="modal-title me-auto">${t("note_type_chooser.modal_title")}</h5>
 
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;"></button>
-                    <span aria-hidden="true">&times;</span>
-                </button>
             </div>
             <div class="modal-body">
                 ${t("note_type_chooser.modal_body")}
 
-                <div class="dropdown">
+                <div class="dropdown" style="display: flex;">
-                    <button class="note-type-dropdown-trigger" type="button" style="display: none;" data-toggle="dropdown"></button>
+                    <button class="note-type-dropdown-trigger" type="button" style="display: none;"
+                            data-bs-toggle="dropdown" data-bs-display="static">
+                    </button>
 
                     <div class="note-type-dropdown dropdown-menu"></div>
                 </div>
@@ -53,9 +53,10 @@ export default class NoteTypeChooserDialog extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
+        this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
+
         this.$noteTypeDropdown = this.$widget.find(".note-type-dropdown");
-        this.$noteTypeDropdownTrigger = this.$widget.find(".note-type-dropdown-trigger");
+        this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find(".note-type-dropdown-trigger"));
-        this.$noteTypeDropdownTrigger.dropdown();
 
         this.$widget.on("hidden.bs.modal", () => {
             if (this.resolve) {
@@ -116,11 +117,11 @@ export default class NoteTypeChooserDialog extends BasicWidget {
             }
         }
 
-        this.$noteTypeDropdownTrigger.dropdown('show');
+        this.dropdown.show();
 
         this.$originalDialog = glob.activeDialog;
-        glob.activeDialog = this.$widget;
+        glob.activeDialog = this.modal;
-        this.$widget.modal();
+        this.modal.show();
 
         this.$noteTypeDropdown.find(".dropdown-item:first").focus();
 
@@ -139,6 +140,6 @@ export default class NoteTypeChooserDialog extends BasicWidget {
         });
         this.resolve = null;
 
-        this.$widget.modal("hide");
+        this.modal.hide();
     }
 }

src/public/app/widgets/dialogs/protected_session_password.js

@@ -8,22 +8,16 @@ const TPL = `
     <div class="modal-dialog modal-md" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title mr-auto">${t("protected_session_password.modal_title")}</h5>
+                <h5 class="modal-title me-auto">${t("protected_session_password.modal_title")}</h5>
 
                 <button class="help-button" type="button" data-help-page="protected-notes.html" title="${t("protected_session_password.help_title")}">?</button>
 
-                <button type="button" class="close" data-dismiss="modal" aria-label="${t("protected_session_password.close_label")}" style="margin-left: 0;">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t("protected_session_password.close_label")}"  style="margin-left: 0;"></button>
-                    <span aria-hidden="true">&times;</span>
-                </button>
             </div>
             <form class="protected-session-password-form">
                 <div class="modal-body">
-                    <div class="form-group">
+                    <label class="col-form-label">${t("protected_session_password.form_label")}</label>
-                        <label>
-                            ${t("protected_session_password.form_label")}
                     <input class="form-control protected-session-password" type="password">
-                        </label>
-                    </div>
                 </div>
                 <div class="modal-footer">
                     <button class="btn btn-primary">${t("protected_session_password.start_button")}</button>
@@ -36,6 +30,8 @@ const TPL = `
 export default class ProtectedSessionPasswordDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
+        bootstrap.Modal.getOrCreateInstance(this.$widget);
+
         this.$passwordForm = this.$widget.find(".protected-session-password-form");
         this.$passwordInput = this.$widget.find(".protected-session-password");
         this.$passwordForm.on('submit', () => {

src/public/app/widgets/dialogs/upload_attachments.js

@@ -11,9 +11,7 @@ const TPL = `
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">${t("upload_attachments.upload_attachments_to_note")}</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                    <span aria-hidden="true">&times;</span>
-                </button>
             </div>
             <form class="upload-attachment-form">
                 <div class="modal-body">
@@ -26,8 +24,8 @@ const TPL = `
                     <div class="form-group">
                         <strong>${t("upload_attachments.options")}:</strong>
                         <div class="checkbox">
-                            <label data-toggle="tooltip" title="${t("upload_attachments.tooltip")}">
+                            <label data-bs-toggle="tooltip" title="${t("upload_attachments.tooltip")}">
-                                <input class="shrink-images-checkbox" value="1" type="checkbox" checked> <span>${t("upload_attachments.shrink_images")}</span>
+                                <input class="shrink-images-checkbox form-check-input" value="1" type="checkbox" checked> <span>${t("upload_attachments.shrink_images")}</span>
                             </label>
                         </div>
                     </div>
@@ -49,6 +47,8 @@ export default class UploadAttachmentsDialog extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
+        bootstrap.Modal.getOrCreateInstance(this.$widget);
+
         this.$form = this.$widget.find(".upload-attachment-form");
         this.$noteTitle = this.$widget.find(".upload-attachment-note-title");
         this.$fileUploadInput = this.$widget.find(".upload-attachment-file-upload-input");
@@ -71,7 +71,7 @@ export default class UploadAttachmentsDialog extends BasicWidget {
             }
         });
 
-        this.$widget.find('[data-toggle="tooltip"]').tooltip({
+        bootstrap.Tooltip.getOrCreateInstance(this.$widget.find('[data-bs-toggle="tooltip"]'), {
             html: true
         });
     }

src/public/app/widgets/editability_select.js

@@ -15,7 +15,7 @@ const TPL = `
         white-space: normal;
     }
     </style>
-    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle editability-button">
+    <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle editability-button">
         <span class="editability-active-desc">${t("editability_select.auto")}</span>
         <span class="caret"></span>
     </button>
@@ -43,11 +43,13 @@ export default class EditabilitySelectWidget extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
 
+        this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
+
         this.$editabilityActiveDesc = this.$widget.find(".editability-active-desc");
 
         this.$widget.on('click', '.dropdown-item',
             async e => {
-                this.$widget.find('.dropdown-toggle').dropdown('toggle');
+                this.dropdown.toggle();
 
                 const editability = $(e.target).closest("[data-editability]").attr("data-editability");
 

src/public/app/widgets/note_icon.js

@@ -1,3 +1,4 @@
+import { t } from "../services/i18n.js";
 import NoteContextAwareWidget from "./note_context_aware_widget.js";
 import attributeService from "../services/attributes.js";
 import server from "../services/server.js";
@@ -66,7 +67,7 @@ const TPL = `
     }
     </style>
     
-    <button class="btn dropdown-toggle note-icon" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Change note icon"></button>
+    <button class="btn dropdown-toggle note-icon" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="${t("note_icon.change_note_icon")}"></button>
     <div class="dropdown-menu" aria-labelledby="note-path-list-button" style="width: 610px;">
         <div class="filter-row">
             <span>Category:</span> <select name="icon-category" class="form-control"></select>

src/public/app/widgets/note_type.js

@@ -35,7 +35,7 @@ const TPL = `
         overflow-x: hidden;
     }
     </style>
-    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle note-type-button">
+    <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle note-type-button">
         <span class="note-type-desc"></span>
         <span class="caret"></span>
     </button>
@@ -47,14 +47,15 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
 
+        this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
+
         this.$widget.on('show.bs.dropdown', () => this.renderDropdown());
 
         this.$noteTypeDropdown = this.$widget.find(".note-type-dropdown");
         this.$noteTypeButton = this.$widget.find(".note-type-button");
         this.$noteTypeDesc = this.$widget.find(".note-type-desc");
 
-        this.$widget.on('click', '.dropdown-item',
+        this.$widget.on('click', '.dropdown-item', () => this.dropdown.toggle());
-            () => this.$widget.find('.dropdown-toggle').dropdown('toggle'));
     }
 
     async refreshWithNote(note) {
@@ -63,7 +64,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
 
         this.$noteTypeDesc.text(await this.findTypeTitle(note.type, note.mime));
 
-        this.$noteTypeButton.dropdown('hide');
+        this.dropdown.hide();
     }
 
     /** the actual body is rendered lazily on note-type button click */

src/public/app/widgets/quick_search.js

@@ -30,13 +30,12 @@ const TPL = `
   </style>
   
   <div class="input-group-prepend">
-    <button class="btn btn-outline-secondary search-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <button class="btn btn-outline-secondary search-button" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="bx bx-search"></span>
     </button>
     <div class="dropdown-menu dropdown-menu-left"></div>
   </div>
   <input type="text" class="form-control form-control-sm search-string" placeholder="Quick search">
-  </div>
 </div>`;
 
 const MAX_DISPLAYED_NOTES = 15;
@@ -44,11 +43,10 @@ const MAX_DISPLAYED_NOTES = 15;
 export default class QuickSearchWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
+        this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
 
         this.$searchString = this.$widget.find('.search-string');
         this.$dropdownMenu = this.$widget.find('.dropdown-menu');
-        this.$dropdownToggle = this.$widget.find('.search-button');
-        this.$dropdownToggle.dropdown();
 
         this.$widget.find('.input-group-prepend').on('shown.bs.dropdown', () => this.search());
 
@@ -58,7 +56,7 @@ export default class QuickSearchWidget extends BasicWidget {
                     if (this.$dropdownMenu.is(":visible")) {
                         this.search(); // just update already visible dropdown
                     } else {
-                        this.$dropdownToggle.dropdown('show');
+                        this.dropdown.show();
                     }
                     e.preventDefault();
                     e.stopPropagation();
@@ -70,7 +68,7 @@ export default class QuickSearchWidget extends BasicWidget {
             if (this.$dropdownMenu.is(":visible")) {
                 this.search(); // just update already visible dropdown
             } else {
-                this.$dropdownToggle.dropdown('show');
+                this.dropdown.show();
             }
 
             this.$searchString.focus();
@@ -81,7 +79,7 @@ export default class QuickSearchWidget extends BasicWidget {
         });
 
         shortcutService.bindElShortcut(this.$searchString, 'esc', () => {
-            this.$dropdownToggle.dropdown('hide');
+            this.dropdown.hide();
         });
 
         return this.$widget;
@@ -91,7 +89,7 @@ export default class QuickSearchWidget extends BasicWidget {
         const searchString = this.$searchString.val().trim();
 
         if (!searchString) {
-            this.$dropdownToggle.dropdown("hide");
+            this.dropdown.hide();
             return;
         }
 
@@ -101,15 +99,15 @@ export default class QuickSearchWidget extends BasicWidget {
         const { searchResultNoteIds, error } = await server.get(`quick-search/${encodeURIComponent(searchString)}`);
 
         if (error) {
-            this.$searchString.tooltip({
+            let tooltip = new bootstrap.Tooltip(this.$searchString, {
                 trigger: 'manual',
                 title: `Search error: ${error}`,
                 placement: 'right'
             });
 
-            this.$searchString.tooltip("show");
+            tooltip.show();
 
-            setTimeout(() => this.$searchString.tooltip("dispose"), 4000);
+            setTimeout(() => tooltip.dispose(), 4000);
         }
 
         const displayedNoteIds = searchResultNoteIds.slice(0, Math.min(MAX_DISPLAYED_NOTES, searchResultNoteIds.length));
@@ -125,7 +123,7 @@ export default class QuickSearchWidget extends BasicWidget {
             $link.addClass('dropdown-item');
             $link.attr("tabIndex", "0");
             $link.on('click', e => {
-                this.$dropdownToggle.dropdown("hide");
+                this.dropdown.hide();
 
                 if (!e.target || e.target.nodeName !== 'A') {
                     // click on the link is handled by link handling, but we want the whole item clickable
@@ -133,7 +131,7 @@ export default class QuickSearchWidget extends BasicWidget {
                 }
             });
             shortcutService.bindElShortcut($link, 'return', () => {
-                this.$dropdownToggle.dropdown("hide");
+                this.dropdown.hide();
 
                 appContext.tabManager.getActiveContext().setNote(note.noteId);
             });
@@ -156,11 +154,11 @@ export default class QuickSearchWidget extends BasicWidget {
 
         shortcutService.bindElShortcut(this.$dropdownMenu.find('.dropdown-item:first'), 'up', () => this.$searchString.focus());
 
-        this.$dropdownToggle.dropdown('update');
+        this.dropdown.update();
     }
 
     async showInFullSearch() {
-        this.$dropdownToggle.dropdown("hide");
+        this.dropdown.hide();
 
         await appContext.triggerCommand('searchNotes', {
             searchString: this.$searchString.val()

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

@@ -119,7 +119,7 @@ const TPL = `
                     </button>
                     
                     <div class="dropdown" style="display: inline-block;">
-                      <button class="btn btn-sm dropdown-toggle action-add-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                      <button class="btn btn-sm dropdown-toggle action-add-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         <span class="bx bxs-zap"></span>
                         ${t('search_definition.action')}
                       </button>
@@ -219,7 +219,7 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget {
         });
 
         this.$widget.on('click', '[data-action-add]', async event => {
-            this.$widget.find('.action-add-toggle').dropdown('toggle');
+            bootstrap.Dropdown.getOrCreateInstance(this.$widget.find('.action-add-toggle'));
 
             const actionName = $(event.target).attr('data-action-add');
 

src/public/app/widgets/search_options/debug.js

@@ -9,10 +9,10 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 <p>${t("debug.debug_info")}</p>
-                <p>${t("debug.access_info")}</p>
+                ${t("debug.access_info")}
             </div>
         </div>
         <span class="bx bx-x icon-action search-option-del"></span>

src/public/app/widgets/search_options/fast_search.js

@@ -9,7 +9,7 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 ${t('fast_search.description')}
             </div> 

src/public/app/widgets/search_options/limit.js

@@ -12,7 +12,7 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
                 ${t('limit.take_first_x_results')}
             </div> 

src/public/app/widgets/search_options/search_script.js

@@ -14,7 +14,7 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-          <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+          <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
           <div class="dropdown-menu dropdown-menu-right p-4">
             <p>${t('search_script.description1')}</p>
             
@@ -24,7 +24,7 @@ const TPL = `
             
             <pre>${t('search_script.example_code')}</pre>
 
-            <p>${t('search_script.note')}</p>
+            ${t('search_script.note')}
           </div>
         </div>
         

src/public/app/widgets/search_options/search_string.js

@@ -13,11 +13,11 @@ const TPL = `
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
-          <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+          <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
           <div class="dropdown-menu dropdown-menu-right p-4">
-            <strong>${t('search_string.search_syntax')}</strong> - ${t('search_string.also_see')} <button class="btn btn-sm" type="button" data-help-page="search.html">${t('search_string.complete_help')}</button>
+            <strong>${t('search_string.search_syntax')}</strong> - ${t('search_string.also_see')} <a href="#" data-help-page="search.html">${t('search_string.complete_help')}</a>
-            <p>
+
-            <ul>
+            <ul style="marigin-bottom: 0;">
                 <li>${t('search_string.full_text_search')}</li>
                 <li><code>#abc</code> - ${t('search_string.label_abc')}</li>
                 <li><code>#year = 2019</code> - ${t('search_string.label_year')}</li>
@@ -26,7 +26,6 @@ const TPL = `
                 <li><code>#year &lt;= 2000</code> - ${t('search_string.label_year_comparison')}</li>
                 <li><code>note.dateCreated >= MONTH-1</code> - ${t('search_string.label_date_created')}</li>
             </ul>
-            </p>
           </div>
         </div>
         
@@ -75,15 +74,15 @@ export default class SearchString extends AbstractSearchOption {
     }
 
     showSearchErrorEvent({ error }) {
-        this.$searchString.tooltip({
+        let tooltip = new bootstrap.Tooltip(this.$searchString, {
             trigger: 'manual',
             title: `${t('search_string.error', { error })}`,
             placement: 'bottom'
         });
 
-        this.$searchString.tooltip("show");
+        tooltip.show();
 
-        setTimeout(() => this.$searchString.tooltip("dispose"), 4000);
+        setTimeout(() => tooltip.dispose(), 4000);
     }
 
     focusOnSearchDefinitionEvent() {

src/public/app/widgets/sync_status.js

@@ -1,3 +1,4 @@
+import { t } from "../services/i18n.js";
 import BasicWidget from "./basic_widget.js";
 import ws from "../services/ws.js";
 import options from "../services/options.js";
@@ -39,36 +40,30 @@ const TPL = `
 
     <div class="sync-status">
         <span class="sync-status-icon sync-status-unknown bx bx-time" 
-              data-toggle="tooltip" 
+              data-bs-toggle="tooltip" 
-              data-placement="right"
+              title="${t("sync_status.unknown")}">
-              title="<p>Sync status will be known once the next sync attempt starts.</p><p>Click to trigger sync now.</p>">
         </span>
         <span class="sync-status-icon sync-status-connected-with-changes bx bx-wifi"
-              data-toggle="tooltip" 
+              data-bs-toggle="tooltip" 
-              data-placement="right"
+              title="${t("sync_status.connected_with_changes")}">
-              title="<p>Connected to the sync server. <br>There are some outstanding changes yet to be synced.</p><p>Click to trigger sync.</p>">
             <span class="bx bxs-star sync-status-sub-icon"></span>
         </span>
         <span class="sync-status-icon sync-status-connected-no-changes bx bx-wifi" 
-              data-toggle="tooltip" 
+              data-bs-toggle="tooltip" 
-              data-placement="right"
+              title="${t("sync_status.connected_no_changes")}">
-              title="<p>Connected to the sync server.<br>All changes have been already synced.</p><p>Click to trigger sync.</p>">
         </span>
         <span class="sync-status-icon sync-status-disconnected-with-changes bx bx-wifi-off"
-              data-toggle="tooltip" 
+              data-bs-toggle="tooltip" 
-              data-placement="right"
+              title="${t("sync_status.disconnected_with_changes")}">
-              title="<p>Establishing the connection to the sync server was unsuccessful.<br>There are some outstanding changes yet to be synced.</p><p>Click to trigger sync.</p>">
             <span class="bx bxs-star sync-status-sub-icon"></span>
         </span>
         <span class="sync-status-icon sync-status-disconnected-no-changes bx bx-wifi-off" 
-              data-toggle="tooltip"
+              data-bs-toggle="tooltip"
-              data-placement="right"
+              title="${t("sync_status.disconnected_no_changes")}">
-              title="<p>Establishing the connection to the sync server was unsuccessful.<br>All known changes have been synced.</p><p>Click to trigger sync.</p>">
         </span>
         <span class="sync-status-icon sync-status-in-progress bx bx-analyse bx-spin" 
-              data-toggle="tooltip"
+              data-bs-toggle="tooltip"
-              data-placement="right"
+              title="${t("sync_status.in_progress")}">
-              title="Sync with the server is in progress.">
         </span>
     </div>
 </div>
@@ -86,10 +81,6 @@ export default class SyncStatusWidget extends BasicWidget {
         this.$widget = $(TPL);
         this.$widget.hide();
 
-        this.$widget.find('[data-toggle="tooltip"]').tooltip({
-            html: true
-        });
-
         this.$widget.find('.sync-status-icon:not(.sync-status-in-progress)')
             .on('click', () => syncService.syncNow());
 
@@ -102,6 +93,11 @@ export default class SyncStatusWidget extends BasicWidget {
             return;
         }
 
+        bootstrap.Tooltip.getOrCreateInstance(this.$widget.find(`.sync-status-${className}`), {
+            html: true,
+            placement: 'right',
+        });
+
         this.$widget.show();
         this.$widget.find('.sync-status-icon').hide();
         this.$widget.find(`.sync-status-${className}`).show();

src/public/stylesheets/style.css

@@ -881,7 +881,7 @@ li.dropdown-submenu:hover > ul.dropdown-menu {
     background-color: inherit;
 }
 
-[data-toggle="tooltip"]:not(.button-widget) span {
+[data-bs-toggle="tooltip"]:not(.button-widget) span {
     padding-bottom: 0;
     border-bottom: 1px dotted;
 }

src/public/translations/cn/translation.json

@@ -468,8 +468,8 @@
     "to": "到",
     "target_parent_note": "目标父笔记",
     "on_all_matched_notes": "对于所有匹配的笔记",
-    "move_note_new_parent": "",
+    "move_note_new_parent": "如果笔记只有一个父级（即旧分支被移除并创建新分支到新父级），则将笔记移动到新父级",
-    "clone_note_new_parent": "",
+    "clone_note_new_parent": "如果笔记有多个克隆/分支（不清楚应该移除哪个分支），则将笔记克隆到新父级",
     "nothing_will_happen": "如果笔记无法移动到目标笔记（即这会创建一个树循环），则不会发生任何事情"
   },
   "rename_note": {
@@ -593,6 +593,14 @@
     "about": "关于 TriliumNext 笔记",
     "logout": "登出"
   },
+  "sync_status": {
+    "unknown": "<p>同步状态将在下一次同步尝试开始后显示。</p><p>点击以立即触发同步。</p>",
+    "connected_with_changes": "<p>已连接到同步服务器。<br>有一些未同步的变更。</p><p>点击以触发同步。</p>",
+    "connected_no_changes": "<p>已连接到同步服务器。<br>所有变更均已同步。</p><p>点击以触发同步。</p>",
+    "disconnected_with_changes": "<p>连接同步服务器失败。<br>有一些未同步的变更。</p><p>点击以触发同步。</p>",
+    "disconnected_no_changes": "<p>连接同步服务器失败。<br>所有已知变更均已同步。</p><p>点击以触发同步。</p>",
+    "in_progress": "正在与服务器进行同步。"
+  },
   "left_pane_toggle": {
     "hide_panel": "隐藏面板",
     "show_panel": "显示面板"
@@ -662,6 +670,9 @@
     "error_cannot_get_branch_id": "无法获取 notePath '{{notePath}}' 的 branchId",
     "error_unrecognized_command": "无法识别的命令 {{command}}"
   },
+  "note_icon": {
+    "change_note_icon": "更改笔记图标"
+  },
   "basic_properties": {
     "note_type": "笔记类型",
     "editable": "可编辑",

src/public/translations/en/translation.json

@@ -593,6 +593,14 @@
     "about": "About TriliumNext Notes",
     "logout": "Logout"
   },
+  "sync_status": {
+    "unknown": "<p>Sync status will be known once the next sync attempt starts.</p><p>Click to trigger sync now.</p>",
+    "connected_with_changes": "<p>Connected to the sync server. <br>There are some outstanding changes yet to be synced.</p><p>Click to trigger sync.</p>",
+    "connected_no_changes":"<p>Connected to the sync server.<br>All changes have been already synced.</p><p>Click to trigger sync.</p>",
+    "disconnected_with_changes":"<p>Establishing the connection to the sync server was unsuccessful.<br>There are some outstanding changes yet to be synced.</p><p>Click to trigger sync.</p>",
+    "disconnected_no_changes":"<p>Establishing the connection to the sync server was unsuccessful.<br>All known changes have been synced.</p><p>Click to trigger sync.</p>",
+    "in_progress":"Sync with the server is in progress."
+  },
   "left_pane_toggle": {
     "show_panel": "Show panel",
     "hide_panel": "Hide panel"
@@ -665,6 +673,9 @@
     "error_cannot_get_branch_id": "Cannot get branchId for notePath '{{notePath}}'",
     "error_unrecognized_command": "Unrecognized command {{command}}"
   },
+  "note_icon": {
+    "change_note_icon": "Change note icon"
+  },
   "basic_properties": {
     "note_type": "Note type",
     "editable": "Editable",