From 5d579fee684a7b039435979868f84d3055678468 Mon Sep 17 00:00:00 2001
From: Jin <22962980+JYC333@users.noreply.github.com>
Date: Sun, 1 Sep 2024 22:30:21 +0200
Subject: [PATCH] Upgrade bootstrap from v4 to v5, fix global menu

---
 package-lock.json                             | 22 +++++++++----
 package.json                                  |  2 +-
 src/public/app/services/utils.js              |  5 ++-
 src/public/app/widgets/buttons/global_menu.js | 32 +++++++++++--------
 src/public/app/widgets/dialogs/about.js       | 13 ++++----
 src/public/app/widgets/dialogs/help.js        | 12 +++----
 6 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f2d32c6cc..b6596cd21 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "autocomplete.js": "^0.38.1",
         "axios": "^1.7.7",
         "better-sqlite3": "^11.1.2",
-        "bootstrap": "^4.6.2",
+        "bootstrap": "^5.3.3",
         "boxicons": "2.1.4",
         "chokidar": "3.6.0",
         "cls-hooked": "4.2.2",
@@ -3152,6 +3152,17 @@
         "node": ">=18"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@sindresorhus/is": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
@@ -4902,9 +4913,9 @@
       "optional": true
     },
     "node_modules/bootstrap": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
-      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
       "funding": [
         {
           "type": "github",
@@ -4917,8 +4928,7 @@
       ],
       "license": "MIT",
       "peerDependencies": {
-        "jquery": "1.9.1 - 3",
-        "popper.js": "^1.16.1"
+        "@popperjs/core": "^2.11.8"
       }
     },
     "node_modules/boxicons": {
diff --git a/package.json b/package.json
index f1b381a17..6a2ae1687 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "autocomplete.js": "^0.38.1",
     "axios": "^1.7.7",
     "better-sqlite3": "^11.1.2",
-    "bootstrap": "^4.6.2",
+    "bootstrap": "^5.3.3",
     "boxicons": "2.1.4",
     "chokidar": "3.6.0",
     "cls-hooked": "4.2.2",
diff --git a/src/public/app/services/utils.js b/src/public/app/services/utils.js
index 6422fa236..3a6a46a56 100644
--- a/src/public/app/services/utils.js
+++ b/src/public/app/services/utils.js
@@ -201,7 +201,7 @@ function getMimeTypeClass(mime) {
 
 function closeActiveDialog() {
     if (glob.activeDialog) {
-        glob.activeDialog.modal('hide');
+        glob.activeDialog.hide();
         glob.activeDialog = null;
     }
 }
@@ -245,8 +245,7 @@ async function openDialog($dialog, closeActDialog = true) {
     }
 
     saveFocusedElement();
-
-    $dialog.modal();
+    bootstrap.Modal.getInstance($dialog).show();
 
     $dialog.on('hidden.bs.modal', () => {
         $(".aa-input").autocomplete("close");
diff --git a/src/public/app/widgets/buttons/global_menu.js b/src/public/app/widgets/buttons/global_menu.js
index e4aed7ba7..3865e605b 100644
--- a/src/public/app/widgets/buttons/global_menu.js
+++ b/src/public/app/widgets/buttons/global_menu.js
@@ -5,7 +5,7 @@ import UpdateAvailableWidget from "./update_available.js";
 import options from "../../services/options.js";
 
 const TPL = `
-<div class="dropdown global-menu dropright">
+<div class="dropdown global-menu dropend">
     <style>
     .global-menu {
         width: 53px;
@@ -102,10 +102,9 @@ const TPL = `
     }
     </style>    
 
-    <button type="button" data-toggle="dropdown" data-placement="right"
-            aria-haspopup="true" aria-expanded="false" 
-            class="icon-action global-menu-button" title="${t('global_menu.menu')}">
-        <svg viewBox="0 0 256 256">
+    <button type="button" data-bs-toggle="dropdown" aria-haspopup="true"
+            aria-expanded="false" class="icon-action global-menu-button">
+        <svg viewBox="0 0 256 256" data-bs-toggle="tooltip" title="${t('global_menu.menu')}">
             <g>
                 <path class="st0" d="m202.9 112.7c-22.5 16.1-54.5 12.8-74.9 6.3l14.8-11.8 14.1-11.3 49.1-39.3-51.2 35.9-14.3 10-14.9 10.5c0.7-21.2 7-49.9 28.6-65.4 1.8-1.3 3.9-2.6 6.1-3.8 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.4 2.8-4.9 5.4-7.4 7.8-3.4 3.5-6.8 6.4-10.1 8.8z"/>
                 <path class="st1" d="m213.1 104c-22.2 12.6-51.4 9.3-70.3 3.2l14.1-11.3 49.1-39.3-51.2 35.9-14.3 10c0.5-18.1 4.9-42.1 19.7-58.6 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.3 2.8-4.8 5.4-7.2 7.8z"/>
@@ -259,10 +258,9 @@ export default class GlobalMenuWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
 
-        this.$dropdown = this.$widget.find("[data-toggle='dropdown']");
-        const $button = this.$widget.find(".global-menu-button");
-        $button.tooltip({ trigger: "hover" });
-        $button.on("click", () => $button.tooltip("hide"));
+        this.$dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
+
+        this.$tooltip = new bootstrap.Tooltip(this.$widget.find("[data-bs-toggle='tooltip']"), { trigger: "hover" });
 
         this.$widget.find(".show-about-dialog-button").on('click', () => this.triggerCommand("openAboutDialog"));
 
@@ -278,8 +276,11 @@ export default class GlobalMenuWidget extends BasicWidget {
                 return;
             }
 
-            this.$dropdown.dropdown('toggle');
+            this.$dropdown.toggle();
         });
+        this.$widget.on('click', '.dropdown-submenu', e => {
+            e.stopPropagation();
+        })
 
         this.$widget.find(".global-menu-button-update-available").append(
             this.updateAvailableWidget.render()
@@ -292,7 +293,12 @@ export default class GlobalMenuWidget extends BasicWidget {
         }
 
         this.$zoomState = this.$widget.find(".zoom-state");
-        this.$widget.on('show.bs.dropdown', () => this.updateZoomState());
+        this.$widget.on('show.bs.dropdown', () => {
+            this.updateZoomState();
+            this.$tooltip.hide();
+            this.$tooltip.disable();
+        });
+        this.$widget.on('hide.bs.dropdown', () => this.$tooltip.enable());
 
         this.$widget.find(".zoom-buttons").on("click",
             // delay to wait for the actual zoom change
@@ -342,10 +348,10 @@ export default class GlobalMenuWidget extends BasicWidget {
     }
 
     activeContextChangedEvent() {
-        this.$dropdown.dropdown('hide');
+        this.$dropdown.hide();
     }
 
     noteSwitchedEvent() {
-        this.$dropdown.dropdown('hide');
+        this.$dropdown.hide();
     }
 }
diff --git a/src/public/app/widgets/dialogs/about.js b/src/public/app/widgets/dialogs/about.js
index c381bacd3..456fa24ef 100644
--- a/src/public/app/widgets/dialogs/about.js
+++ b/src/public/app/widgets/dialogs/about.js
@@ -4,15 +4,12 @@ import { t } from "../../services/i18n.js";
 import BasicWidget from "../basic_widget.js";
 
 const TPL = `
-<div class="about-dialog modal fade mx-auto" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-lg" role="document">
+<div class="about-dialog modal fade mx-auto" tabindex="-1">
+    <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title mr-auto">${t("about.title")}</h5>
-
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0;">
-                    <span aria-hidden="true">&times;</span>
-                </button>
+                <h5 class="modal-title">${t("about.title")}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="margin-left: 0;" />
             </div>
             <div class="modal-body">
                 <table class="table table-borderless text-nowrap">
@@ -55,6 +52,8 @@ const TPL = `
 export default class AboutDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
+        bootstrap.Modal.getOrCreateInstance(this.$widget);
+
         this.$appVersion = this.$widget.find(".app-version");
         this.$dbVersion = this.$widget.find(".db-version");
         this.$syncVersion = this.$widget.find(".sync-version");
diff --git a/src/public/app/widgets/dialogs/help.js b/src/public/app/widgets/dialogs/help.js
index e8bb7130c..eaeb1581e 100644
--- a/src/public/app/widgets/dialogs/help.js
+++ b/src/public/app/widgets/dialogs/help.js
@@ -3,15 +3,12 @@ import BasicWidget from "../basic_widget.js";
 import { t } from "../../services/i18n.js";
 
 const TPL = `
-<div class="help-dialog modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document" style="min-width: 100%; height: 100%; margin: 0;">
+<div class="help-dialog modal" tabindex="-1">
+    <div class="modal-dialog" style="min-width: 100%; height: 100%; margin: 0;">
         <div class="modal-content" style="height: auto;">
             <div class="modal-header">
-                <h5 class="modal-title mr-auto">${t('help.fullDocumentation')}</h5>
-
-                <button type="button" class="close" data-dismiss="modal" aria-label="${t('help.close')}">
-                    <span aria-hidden="true">&times;</span>
-                </button>
+                <h5 class="modal-title">${t('help.fullDocumentation')}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t('help.close')}" />
             </div>
             <div class="modal-body" style="overflow: auto; height: calc(100vh - 70px);">
                 <div class="card-columns help-cards">
@@ -155,6 +152,7 @@ const TPL = `
 export default class HelpDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
+        bootstrap.Modal.getOrCreateInstance(this.$widget);
     }
 
     showHelpEvent() {