From cf11be7f35dd85a36ccceac145647f85ae79d2c3 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Wed, 12 Feb 2025 08:28:29 +0100
Subject: [PATCH 01/24] chore(ts): get rid of bootstrap related ts-ignores

---
 src/public/app/services/utils.ts             | 9 +++------
 src/public/app/widgets/editability_select.ts | 5 ++---
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/public/app/services/utils.ts b/src/public/app/services/utils.ts
index 7accea1fb..f07f55258 100644
--- a/src/public/app/services/utils.ts
+++ b/src/public/app/services/utils.ts
@@ -1,4 +1,5 @@
 import dayjs from "dayjs";
+import { Modal } from "bootstrap";
 
 function reloadFrontendApp(reason?: string) {
     if (reason) {
@@ -244,9 +245,7 @@ function getMimeTypeClass(mime: string) {
 
 function closeActiveDialog() {
     if (glob.activeDialog) {
-        // TODO: Fix once we use proper ES imports.
-        //@ts-ignore
-        bootstrap.Modal.getOrCreateInstance(glob.activeDialog[0]).hide();
+        Modal.getOrCreateInstance(glob.activeDialog[0]).hide();
         glob.activeDialog = null;
     }
 }
@@ -288,9 +287,7 @@ async function openDialog($dialog: JQuery<HTMLElement>, closeActDialog = true) {
     }
 
     saveFocusedElement();
-    // TODO: Fix once we use proper ES imports.
-    //@ts-ignore
-    bootstrap.Modal.getOrCreateInstance($dialog[0]).show();
+    Modal.getOrCreateInstance($dialog[0]).show();
 
     $dialog.on("hidden.bs.modal", () => {
         const $autocompleteEl = $(".aa-input");
diff --git a/src/public/app/widgets/editability_select.ts b/src/public/app/widgets/editability_select.ts
index d9a8898cf..14fe8fdd5 100644
--- a/src/public/app/widgets/editability_select.ts
+++ b/src/public/app/widgets/editability_select.ts
@@ -3,6 +3,7 @@ import NoteContextAwareWidget from "./note_context_aware_widget.js";
 import { t } from "../services/i18n.js";
 import type FNote from "../entities/fnote.js";
 import type { EventData } from "../components/app_context.js";
+import { Dropdown } from "bootstrap";
 
 type Editability = "auto" | "readOnly" | "autoReadOnlyDisabled";
 
@@ -65,9 +66,7 @@ export default class EditabilitySelectWidget extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
 
-        // TODO: Remove once bootstrap is added to webpack.
-        //@ts-ignore
-        this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
+        this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0]);
 
         this.$editabilityActiveDesc = this.$widget.find(".editability-active-desc");
 

From cc1a01955aed87e4c9bdfa3a89d4d9f0fb289e6e Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Wed, 12 Feb 2025 08:38:55 +0100
Subject: [PATCH 02/24] chore(ts): get rid of bootstrap related ts-ignores

---
 src/public/app/widgets/dialogs/confirm.ts          | 7 +++----
 src/public/app/widgets/dialogs/password_not_set.ts | 4 ++--
 src/public/app/widgets/dialogs/prompt.ts           | 7 +++----
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/public/app/widgets/dialogs/confirm.ts b/src/public/app/widgets/dialogs/confirm.ts
index b29f0f848..70de19647 100644
--- a/src/public/app/widgets/dialogs/confirm.ts
+++ b/src/public/app/widgets/dialogs/confirm.ts
@@ -1,5 +1,6 @@
 import BasicWidget from "../basic_widget.js";
 import { t } from "../../services/i18n.js";
+import { Modal } from "bootstrap";
 
 const DELETE_NOTE_BUTTON_CLASS = "confirm-dialog-delete-note";
 
@@ -49,7 +50,7 @@ export interface ConfirmWithTitleOptions {
 export default class ConfirmDialog extends BasicWidget {
     private resolve: ConfirmDialogCallback | null;
 
-    private modal!: bootstrap.Modal;
+    private modal!: Modal;
     private $originallyFocused!: JQuery<HTMLElement> | null;
     private $confirmContent!: JQuery<HTMLElement>;
     private $okButton!: JQuery<HTMLElement>;
@@ -65,9 +66,7 @@ export default class ConfirmDialog extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        // TODO: Fix once we use proper ES imports.
-        //@ts-ignore
-        this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
+        this.modal = Modal.getOrCreateInstance(this.$widget[0]);
         this.$confirmContent = this.$widget.find(".confirm-dialog-content");
         this.$okButton = this.$widget.find(".confirm-dialog-ok-button");
         this.$cancelButton = this.$widget.find(".confirm-dialog-cancel-button");
diff --git a/src/public/app/widgets/dialogs/password_not_set.ts b/src/public/app/widgets/dialogs/password_not_set.ts
index be608a4c2..c5e30712a 100644
--- a/src/public/app/widgets/dialogs/password_not_set.ts
+++ b/src/public/app/widgets/dialogs/password_not_set.ts
@@ -1,6 +1,7 @@
 import { t } from "../../services/i18n.js";
 import utils from "../../services/utils.js";
 import BasicWidget from "../basic_widget.js";
+import { Modal } from "bootstrap";
 
 const TPL = `
 <div class="password-not-set-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@@ -27,8 +28,7 @@ export default class PasswordNoteSetDialog extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        //@ts-ignore fix once bootstrap is imported via JQuery.
-        this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
+        this.modal = Modal.getOrCreateInstance(this.$widget[0]);
         this.$openPasswordOptionsButton = this.$widget.find(".open-password-options-button");
         this.$openPasswordOptionsButton.on("click", () => {
             this.modal.hide();
diff --git a/src/public/app/widgets/dialogs/prompt.ts b/src/public/app/widgets/dialogs/prompt.ts
index ea7c39a9d..6c0fff104 100644
--- a/src/public/app/widgets/dialogs/prompt.ts
+++ b/src/public/app/widgets/dialogs/prompt.ts
@@ -1,6 +1,7 @@
 import { t } from "../../services/i18n.js";
 import utils from "../../services/utils.js";
 import BasicWidget from "../basic_widget.js";
+import { Modal } from "bootstrap";
 
 const TPL = `
 <div class="prompt-dialog modal mx-auto" tabindex="-1" role="dialog" style="z-index: 2000;">
@@ -41,7 +42,7 @@ export default class PromptDialog extends BasicWidget {
     private resolve?: ((value: string | null) => void) | undefined | null;
     private shownCb?: PromptShownDialogCallback | null;
 
-    private modal!: bootstrap.Modal;
+    private modal!: Modal;
     private $dialogBody!: JQuery<HTMLElement>;
     private $question!: JQuery<HTMLElement> | null;
     private $answer!: JQuery<HTMLElement> | null;
@@ -56,9 +57,7 @@ export default class PromptDialog extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        // TODO: Fix once we use proper ES imports.
-        //@ts-ignore
-        this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
+        this.modal = Modal.getOrCreateInstance(this.$widget[0]);
         this.$dialogBody = this.$widget.find(".modal-body");
         this.$form = this.$widget.find(".prompt-dialog-form");
         this.$question = null;

From 65ad4c3a2b4fe372a8c5464478a679863ff89d37 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Wed, 12 Feb 2025 08:49:09 +0100
Subject: [PATCH 03/24] chore(ts): get rid of bootstrap related ts-ignores

---
 src/public/app/widgets/buttons/abstract_button.ts | 10 +++++-----
 src/public/app/widgets/dialogs/export.ts          |  7 +++----
 src/public/app/widgets/editability_select.ts      |  2 +-
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/public/app/widgets/buttons/abstract_button.ts b/src/public/app/widgets/buttons/abstract_button.ts
index 2ba16f8cc..6b1cc1ca6 100644
--- a/src/public/app/widgets/buttons/abstract_button.ts
+++ b/src/public/app/widgets/buttons/abstract_button.ts
@@ -1,3 +1,4 @@
+import { Tooltip } from "bootstrap";
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 
 const TPL = `<button class="button-widget bx"
@@ -17,7 +18,7 @@ export interface AbstractButtonWidgetSettings {
 
 export default class AbstractButtonWidget<SettingsT extends AbstractButtonWidgetSettings> extends NoteContextAwareWidget {
     protected settings!: SettingsT;
-    protected tooltip!: bootstrap.Tooltip;
+    protected tooltip!: Tooltip;
 
     isEnabled(): boolean | null | undefined {
         return true;
@@ -25,11 +26,10 @@ export default class AbstractButtonWidget<SettingsT extends AbstractButtonWidget
 
     doRender() {
         this.$widget = $(TPL);
-        // Fix once bootstrap is available as non-UMD
-        //@ts-ignore
-        this.tooltip = new bootstrap.Tooltip(this.$widget, {
+        this.tooltip = new Tooltip(this.$widget[0], {
             html: true,
-            title: () => this.getTitle(),
+            // in case getTitle() returns null -> use empty string as fallback
+            title: () => this.getTitle() || "",
             trigger: "hover",
             placement: this.settings.titlePlacement,
             fallbackPlacements: [this.settings.titlePlacement]
diff --git a/src/public/app/widgets/dialogs/export.ts b/src/public/app/widgets/dialogs/export.ts
index 8f1fe5306..88fb9345a 100644
--- a/src/public/app/widgets/dialogs/export.ts
+++ b/src/public/app/widgets/dialogs/export.ts
@@ -7,6 +7,7 @@ import openService from "../../services/open.js";
 import BasicWidget from "../basic_widget.js";
 import { t } from "../../services/i18n.js";
 import type { EventData } from "../../components/app_context.js";
+import { Modal } from "bootstrap";
 
 const TPL = `
 <div class="export-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@@ -127,7 +128,7 @@ export default class ExportDialog extends BasicWidget {
 
     private taskId: string;
     private branchId: string | null;
-    private modal?: bootstrap.Modal;
+    private modal?: Modal;
     private $form!: JQuery<HTMLElement>;
     private $noteTitle!: JQuery<HTMLElement>;
     private $subtreeFormats!: JQuery<HTMLElement>;
@@ -146,9 +147,7 @@ export default class ExportDialog extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        // Remove once bootstrap is fixed.
-        // @ts-ignore
-        this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
+        this.modal = Modal.getOrCreateInstance(this.$widget[0]);
         this.$form = this.$widget.find(".export-form");
         this.$noteTitle = this.$widget.find(".export-note-title");
         this.$subtreeFormats = this.$widget.find(".export-subtree-formats");
diff --git a/src/public/app/widgets/editability_select.ts b/src/public/app/widgets/editability_select.ts
index 14fe8fdd5..8e1d0d964 100644
--- a/src/public/app/widgets/editability_select.ts
+++ b/src/public/app/widgets/editability_select.ts
@@ -60,7 +60,7 @@ const TPL = `
 
 export default class EditabilitySelectWidget extends NoteContextAwareWidget {
 
-    private dropdown!: bootstrap.Dropdown;
+    private dropdown!: Dropdown;
     private $editabilityActiveDesc!: JQuery<HTMLElement>;
 
     doRender() {

From 4f171fd966ec3af0b856b200fa5b7f7520fa5b96 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Wed, 12 Feb 2025 08:53:32 +0100
Subject: [PATCH 04/24] chore(ts): get rid of bootstrap related ts-ignores

---
 src/public/app/widgets/buttons/global_menu.ts | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/public/app/widgets/buttons/global_menu.ts b/src/public/app/widgets/buttons/global_menu.ts
index 67a235709..aa0f57ce8 100644
--- a/src/public/app/widgets/buttons/global_menu.ts
+++ b/src/public/app/widgets/buttons/global_menu.ts
@@ -3,6 +3,7 @@ import BasicWidget from "../basic_widget.js";
 import utils from "../../services/utils.js";
 import UpdateAvailableWidget from "./update_available.js";
 import options from "../../services/options.js";
+import { Tooltip, Dropdown } from "bootstrap";
 
 const TPL = `
 <div class="dropdown global-menu">
@@ -251,8 +252,8 @@ const TPL = `
 export default class GlobalMenuWidget extends BasicWidget {
     private updateAvailableWidget: UpdateAvailableWidget;
     private isHorizontalLayout: boolean;
-    private tooltip!: bootstrap.Tooltip;
-    private dropdown!: bootstrap.Dropdown;
+    private tooltip!: Tooltip;
+    private dropdown!: Dropdown;
 
     private $updateToLatestVersionButton!: JQuery<HTMLElement>;
     private $zoomState!: JQuery<HTMLElement>;
@@ -292,16 +293,13 @@ export default class GlobalMenuWidget extends BasicWidget {
                     </g>
                 </svg>`)
             );
-            //TODO: Fix once bootstrap is imported via modules.
-            //@ts-ignore
-            this.tooltip = new bootstrap.Tooltip(this.$widget.find("[data-bs-toggle='tooltip']"), { trigger: "hover" });
+
+            this.tooltip = new Tooltip(this.$widget.find("[data-bs-toggle='tooltip']")[0], { trigger: "hover" });
         } else {
             $globalMenuButton.toggleClass("bx bx-menu");
         }
 
-        //TODO: Fix once bootstrap is imported via modules.
-        //@ts-ignore
-        this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"), {
+        this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0], {
             alignment: "bottom"
         });
 

From bc28f323b8094c8c3912b7b8b858ba16f71d52f2 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Wed, 12 Feb 2025 08:54:00 +0100
Subject: [PATCH 05/24] chore(ts): get rid of bootstrap related ts-ignores

---
 src/public/app/widgets/dialogs/note_type_chooser.ts | 13 +++++--------
 src/public/app/widgets/dialogs/password_not_set.ts  |  2 +-
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/public/app/widgets/dialogs/note_type_chooser.ts b/src/public/app/widgets/dialogs/note_type_chooser.ts
index bc81ad999..06822e6ed 100644
--- a/src/public/app/widgets/dialogs/note_type_chooser.ts
+++ b/src/public/app/widgets/dialogs/note_type_chooser.ts
@@ -3,6 +3,7 @@ import type { MenuCommandItem } from "../../menus/context_menu.js";
 import { t } from "../../services/i18n.js";
 import noteTypesService from "../../services/note_types.js";
 import BasicWidget from "../basic_widget.js";
+import { Dropdown, Modal } from "bootstrap";
 
 const TPL = `
 <div class="note-type-chooser-dialog modal mx-auto" tabindex="-1" role="dialog">
@@ -53,8 +54,8 @@ type Callback = (data: ChooseNoteTypeResponse) => void;
 
 export default class NoteTypeChooserDialog extends BasicWidget {
     private resolve: Callback | null;
-    private dropdown!: bootstrap.Dropdown;
-    private modal!: JQuery<HTMLElement>;
+    private dropdown!: Dropdown;
+    private modal!: Modal;
     private $noteTypeDropdown!: JQuery<HTMLElement>;
     private $originalFocused: JQuery<HTMLElement> | null;
     private $originalDialog: JQuery<HTMLElement> | null;
@@ -69,14 +70,10 @@ export default class NoteTypeChooserDialog extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        // TODO: Remove once we import bootstrap the right way
-        //@ts-ignore
-        this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
+        this.modal = Modal.getOrCreateInstance(this.$widget[0]);
 
         this.$noteTypeDropdown = this.$widget.find(".note-type-dropdown");
-        // TODO: Remove once we import bootstrap the right way
-        //@ts-ignore
-        this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find(".note-type-dropdown-trigger"));
+        this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find(".note-type-dropdown-trigger")[0]);
 
         this.$widget.on("hidden.bs.modal", () => {
             if (this.resolve) {
diff --git a/src/public/app/widgets/dialogs/password_not_set.ts b/src/public/app/widgets/dialogs/password_not_set.ts
index c5e30712a..9b23649f3 100644
--- a/src/public/app/widgets/dialogs/password_not_set.ts
+++ b/src/public/app/widgets/dialogs/password_not_set.ts
@@ -23,7 +23,7 @@ const TPL = `
 
 export default class PasswordNoteSetDialog extends BasicWidget {
 
-    private modal!: bootstrap.Modal;
+    private modal!: Modal;
     private $openPasswordOptionsButton!: JQuery<HTMLElement>;
 
     doRender() {

From ad8adeda0a4d65fa71a066112b158242f2890c72 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Wed, 12 Feb 2025 08:55:54 +0100
Subject: [PATCH 06/24] fix(global_menu): fix non-existing option (according to
 TS)

---
 src/public/app/widgets/buttons/global_menu.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/public/app/widgets/buttons/global_menu.ts b/src/public/app/widgets/buttons/global_menu.ts
index aa0f57ce8..140d418d6 100644
--- a/src/public/app/widgets/buttons/global_menu.ts
+++ b/src/public/app/widgets/buttons/global_menu.ts
@@ -300,7 +300,9 @@ export default class GlobalMenuWidget extends BasicWidget {
         }
 
         this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0], {
-            alignment: "bottom"
+            popperConfig: {
+                placement: "bottom"
+            }
         });
 
         this.$widget.find(".show-about-dialog-button").on("click", () => this.triggerCommand("openAboutDialog"));

From 17860e6715ff2cc9e99075d1c20fedde88d35211 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Wed, 12 Feb 2025 09:00:57 +0100
Subject: [PATCH 07/24] fix(note_type_choosers): fix glob.activeDialog
 assignment

the same thing is done in `confirm.ts` as well, where glob.activeDialog is set to `this.$widget`
---
 src/public/app/widgets/dialogs/note_type_chooser.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/public/app/widgets/dialogs/note_type_chooser.ts b/src/public/app/widgets/dialogs/note_type_chooser.ts
index 06822e6ed..40b942481 100644
--- a/src/public/app/widgets/dialogs/note_type_chooser.ts
+++ b/src/public/app/widgets/dialogs/note_type_chooser.ts
@@ -139,7 +139,7 @@ export default class NoteTypeChooserDialog extends BasicWidget {
         this.dropdown.show();
 
         this.$originalDialog = glob.activeDialog;
-        glob.activeDialog = this.modal;
+        glob.activeDialog = this.$widget;
         this.modal.show();
 
         this.$noteTypeDropdown.find(".dropdown-item:first").focus();

From fc6b9e00bcbb508059f1be83c252bef0f389ff36 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Fri, 21 Feb 2025 19:52:29 +0100
Subject: [PATCH 08/24] webpack: add bootstrap webpack config

https://getbootstrap.com/docs/5.3/getting-started/webpack/
---
 webpack.config.ts | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/webpack.config.ts b/webpack.config.ts
index f867f1e5b..0c68b057f 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -1,5 +1,6 @@
 import { fileURLToPath } from "url";
 import path from "path";
+import autoprefixer from "autoprefixer";
 import assetPath from "./src/services/asset_path.js";
 import type { Configuration } from "webpack";
 
@@ -30,6 +31,29 @@ const config: Configuration = {
                     }
                 ],
                 exclude: /node_modules/
+            },
+            {
+                // bootstrap CSS related configuration
+                test: /\.(scss)$/,
+                use: [
+                    {
+                        loader: "style-loader"
+                    },
+                    {
+                        loader: "css-loader"
+                    },
+                    {
+                        loader: "postcss-loader",
+                        options: {
+                            postcssOptions: {
+                                plugins: [autoprefixer]
+                            }
+                        }
+                    },
+                    {
+                        loader: "sass-loader"
+                    }
+                ]
             }
         ]
     },
@@ -41,8 +65,8 @@ const config: Configuration = {
             ".mjs": [".mjs", ".mts"]
         }
     },
-    devtool: "source-map",
+    //devtool: "none",
     target: "electron-renderer"
 };
 
-export default config;
\ No newline at end of file
+export default config;

From ba3599911f4e6520043c8b6f2bb4826b7f71521c Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Fri, 21 Feb 2025 20:41:00 +0100
Subject: [PATCH 09/24] chore(bootstrap): import Bootstrap modules

---
 src/public/app/widgets/buttons/attachments_actions.js    | 3 ++-
 src/public/app/widgets/buttons/calendar.js               | 3 ++-
 src/public/app/widgets/buttons/right_dropdown_button.js  | 5 +++--
 src/public/app/widgets/dialogs/branch_prefix.js          | 3 ++-
 src/public/app/widgets/dialogs/import.js                 | 5 +++--
 src/public/app/widgets/dialogs/include_note.js           | 3 ++-
 src/public/app/widgets/dialogs/info.js                   | 3 ++-
 src/public/app/widgets/dialogs/jump_to_note.js           | 3 ++-
 src/public/app/widgets/dialogs/markdown_import.js        | 3 ++-
 .../app/widgets/dialogs/protected_session_password.js    | 3 ++-
 src/public/app/widgets/dialogs/recent_changes.js         | 3 ++-
 src/public/app/widgets/dialogs/revisions.ts              | 9 +++++----
 src/public/app/widgets/dialogs/upload_attachments.js     | 5 +++--
 src/public/app/widgets/note_type.ts                      | 5 +++--
 src/public/app/widgets/quick_search.js                   | 5 +++--
 .../app/widgets/ribbon_widgets/search_definition.js      | 3 ++-
 src/public/app/widgets/search_options/search_string.js   | 3 ++-
 src/public/app/widgets/sync_status.js                    | 3 ++-
 18 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/src/public/app/widgets/buttons/attachments_actions.js b/src/public/app/widgets/buttons/attachments_actions.js
index da8fd0d9a..5ee51b9d9 100644
--- a/src/public/app/widgets/buttons/attachments_actions.js
+++ b/src/public/app/widgets/buttons/attachments_actions.js
@@ -7,6 +7,7 @@ import ws from "../../services/ws.js";
 import appContext from "../../components/app_context.js";
 import openService from "../../services/open.js";
 import utils from "../../services/utils.js";
+import { Dropdown } from "bootstrap";
 
 const TPL = `
 <div class="dropdown attachment-actions">
@@ -91,7 +92,7 @@ export default class AttachmentActionsWidget extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
+        this.dropdown = 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");
diff --git a/src/public/app/widgets/buttons/calendar.js b/src/public/app/widgets/buttons/calendar.js
index 6eb08c510..d7f2f7514 100644
--- a/src/public/app/widgets/buttons/calendar.js
+++ b/src/public/app/widgets/buttons/calendar.js
@@ -7,6 +7,7 @@ import appContext from "../../components/app_context.js";
 import RightDropdownButtonWidget from "./right_dropdown_button.js";
 import toastService from "../../services/toast.js";
 import options from "../../services/options.js";
+import { Dropdown } from "bootstrap";
 
 const MONTHS = [
     t("calendar.january"),
@@ -84,7 +85,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
             // Don't trigger dropdownShown() at widget level when the month selection dropdown is shown, since it would cause a redundant refresh.
             e.stopPropagation();
         });
-        this.monthDropdown = bootstrap.Dropdown.getOrCreateInstance(this.$monthSelect);
+        this.monthDropdown = Dropdown.getOrCreateInstance(this.$monthSelect);
         this.$dropdownContent.find('[data-calendar-input="month-list"] button').on("click", (e) => {
             this.date.setMonth(e.target.dataset.value);
             this.createMonth();
diff --git a/src/public/app/widgets/buttons/right_dropdown_button.js b/src/public/app/widgets/buttons/right_dropdown_button.js
index 822923d5a..1d405bf3b 100644
--- a/src/public/app/widgets/buttons/right_dropdown_button.js
+++ b/src/public/app/widgets/buttons/right_dropdown_button.js
@@ -1,4 +1,5 @@
 import BasicWidget from "../basic_widget.js";
+import { Tooltip, Dropdown } from "bootstrap";
 
 const TPL = `
 <div class="dropdown right-dropdown-widget dropend">
@@ -28,10 +29,10 @@ export default class RightDropdownButtonWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$dropdownMenu = this.$widget.find(".dropdown-menu");
-        this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
+        this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
 
         this.$tooltip = this.$widget.find(".tooltip-trigger").attr("title", this.title);
-        this.tooltip = new bootstrap.Tooltip(this.$tooltip, {
+        this.tooltip = new Tooltip(this.$tooltip, {
             placement: this.settings.titlePlacement,
             fallbackPlacements: [this.settings.titlePlacement]
         });
diff --git a/src/public/app/widgets/dialogs/branch_prefix.js b/src/public/app/widgets/dialogs/branch_prefix.js
index 9eaa440dc..0f0dcd02d 100644
--- a/src/public/app/widgets/dialogs/branch_prefix.js
+++ b/src/public/app/widgets/dialogs/branch_prefix.js
@@ -6,6 +6,7 @@ import utils from "../../services/utils.js";
 import BasicWidget from "../basic_widget.js";
 import appContext from "../../components/app_context.js";
 import { t } from "../../services/i18n.js";
+import { Modal } from "bootstrap";
 
 let branchId;
 
@@ -39,7 +40,7 @@ const TPL = `<div class="branch-prefix-dialog modal fade mx-auto" tabindex="-1"
 export default class BranchPrefixDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
-        this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
+        this.modal = Modal.getOrCreateInstance(this.$widget);
         this.$form = this.$widget.find(".branch-prefix-form");
         this.$treePrefixInput = this.$widget.find(".branch-prefix-input");
         this.$noteTitle = this.$widget.find(".branch-prefix-note-title");
diff --git a/src/public/app/widgets/dialogs/import.js b/src/public/app/widgets/dialogs/import.js
index 11ca6d100..4f06208f5 100644
--- a/src/public/app/widgets/dialogs/import.js
+++ b/src/public/app/widgets/dialogs/import.js
@@ -4,6 +4,7 @@ import importService from "../../services/import.js";
 import options from "../../services/options.js";
 import BasicWidget from "../basic_widget.js";
 import { t } from "../../services/i18n.js";
+import { Modal, Tooltip } from "bootstrap";
 
 const TPL = `
 <div class="import-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@@ -86,7 +87,7 @@ export default class ImportDialog extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        bootstrap.Modal.getOrCreateInstance(this.$widget);
+        Modal.getOrCreateInstance(this.$widget);
 
         this.$form = this.$widget.find(".import-form");
         this.$noteTitle = this.$widget.find(".import-note-title");
@@ -117,7 +118,7 @@ export default class ImportDialog extends BasicWidget {
         });
 
         let _ = [...this.$widget.find('[data-bs-toggle="tooltip"]')].forEach((element) => {
-            bootstrap.Tooltip.getOrCreateInstance(element, {
+            Tooltip.getOrCreateInstance(element, {
                 html: true
             });
         });
diff --git a/src/public/app/widgets/dialogs/include_note.js b/src/public/app/widgets/dialogs/include_note.js
index f3ff29714..94d813413 100644
--- a/src/public/app/widgets/dialogs/include_note.js
+++ b/src/public/app/widgets/dialogs/include_note.js
@@ -4,6 +4,7 @@ import noteAutocompleteService from "../../services/note_autocomplete.js";
 import utils from "../../services/utils.js";
 import froca from "../../services/froca.js";
 import BasicWidget from "../basic_widget.js";
+import { Modal } from "bootstrap";
 
 const TPL = `
 <div class="include-note-dialog modal mx-auto" tabindex="-1" role="dialog">
@@ -54,7 +55,7 @@ const TPL = `
 export default class IncludeNoteDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
-        this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
+        this.modal = Modal.getOrCreateInstance(this.$widget);
         this.$form = this.$widget.find(".include-note-form");
         this.$autoComplete = this.$widget.find(".include-note-autocomplete");
         this.$form.on("submit", () => {
diff --git a/src/public/app/widgets/dialogs/info.js b/src/public/app/widgets/dialogs/info.js
index 655bc4bca..454f7e2ee 100644
--- a/src/public/app/widgets/dialogs/info.js
+++ b/src/public/app/widgets/dialogs/info.js
@@ -1,6 +1,7 @@
 import { t } from "../../services/i18n.js";
 import utils from "../../services/utils.js";
 import BasicWidget from "../basic_widget.js";
+import { Modal } from "bootstrap";
 
 const TPL = `
 <div class="info-dialog modal mx-auto" tabindex="-1" role="dialog" style="z-index: 2000;">
@@ -30,7 +31,7 @@ export default class InfoDialog extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
+        this.modal = Modal.getOrCreateInstance(this.$widget);
         this.$infoContent = this.$widget.find(".info-dialog-content");
         this.$okButton = this.$widget.find(".info-dialog-ok-button");
 
diff --git a/src/public/app/widgets/dialogs/jump_to_note.js b/src/public/app/widgets/dialogs/jump_to_note.js
index 4b2aceb51..f57acb4f7 100644
--- a/src/public/app/widgets/dialogs/jump_to_note.js
+++ b/src/public/app/widgets/dialogs/jump_to_note.js
@@ -4,6 +4,7 @@ import utils from "../../services/utils.js";
 import appContext from "../../components/app_context.js";
 import BasicWidget from "../basic_widget.js";
 import shortcutService from "../../services/shortcuts.js";
+import { Modal } from "bootstrap";
 
 const TPL = `<div class="jump-to-note-dialog modal mx-auto" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg" role="document">
@@ -35,7 +36,7 @@ export default class JumpToNoteDialog extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
+        this.modal = Modal.getOrCreateInstance(this.$widget);
 
         this.$autoComplete = this.$widget.find(".jump-to-note-autocomplete");
         this.$results = this.$widget.find(".jump-to-note-results");
diff --git a/src/public/app/widgets/dialogs/markdown_import.js b/src/public/app/widgets/dialogs/markdown_import.js
index 26cdd20cd..1cd2fdd29 100644
--- a/src/public/app/widgets/dialogs/markdown_import.js
+++ b/src/public/app/widgets/dialogs/markdown_import.js
@@ -5,6 +5,7 @@ import appContext from "../../components/app_context.js";
 import BasicWidget from "../basic_widget.js";
 import shortcutService from "../../services/shortcuts.js";
 import server from "../../services/server.js";
+import { Modal } from "bootstrap";
 
 const TPL = `
 <div class="markdown-import-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@@ -35,7 +36,7 @@ export default class MarkdownImportDialog extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
+        this.modal = Modal.getOrCreateInstance(this.$widget);
         this.$importTextarea = this.$widget.find(".markdown-import-textarea");
         this.$importButton = this.$widget.find(".markdown-import-button");
 
diff --git a/src/public/app/widgets/dialogs/protected_session_password.js b/src/public/app/widgets/dialogs/protected_session_password.js
index 8aabd1796..600a0f165 100644
--- a/src/public/app/widgets/dialogs/protected_session_password.js
+++ b/src/public/app/widgets/dialogs/protected_session_password.js
@@ -2,6 +2,7 @@ import { t } from "../../services/i18n.js";
 import protectedSessionService from "../../services/protected_session.js";
 import utils from "../../services/utils.js";
 import BasicWidget from "../basic_widget.js";
+import { Modal } from "bootstrap";
 
 const TPL = `
 <div class="protected-session-password-dialog modal mx-auto" data-backdrop="false" tabindex="-1" role="dialog">
@@ -28,7 +29,7 @@ const TPL = `
 export default class ProtectedSessionPasswordDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
-        this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
+        this.modal = Modal.getOrCreateInstance(this.$widget);
 
         this.$passwordForm = this.$widget.find(".protected-session-password-form");
         this.$passwordInput = this.$widget.find(".protected-session-password");
diff --git a/src/public/app/widgets/dialogs/recent_changes.js b/src/public/app/widgets/dialogs/recent_changes.js
index 49a03b74a..0d3cd9803 100644
--- a/src/public/app/widgets/dialogs/recent_changes.js
+++ b/src/public/app/widgets/dialogs/recent_changes.js
@@ -10,6 +10,7 @@ import server from "../../services/server.js";
 import toastService from "../../services/toast.js";
 import utils from "../../services/utils.js";
 import ws from "../../services/ws.js";
+import { Modal } from "bootstrap";
 
 const TPL = `
 <div class="recent-changes-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@@ -30,7 +31,7 @@ const TPL = `
 export default class RecentChangesDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
-        this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
+        this.modal = Modal.getOrCreateInstance(this.$widget);
 
         this.$content = this.$widget.find(".recent-changes-content");
         this.$eraseDeletedNotesNow = this.$widget.find(".erase-deleted-notes-now-button");
diff --git a/src/public/app/widgets/dialogs/revisions.ts b/src/public/app/widgets/dialogs/revisions.ts
index 530195ed2..47eeb0dc6 100644
--- a/src/public/app/widgets/dialogs/revisions.ts
+++ b/src/public/app/widgets/dialogs/revisions.ts
@@ -11,6 +11,7 @@ import dialogService from "../../services/dialog.js";
 import options from "../../services/options.js";
 import type FNote from "../../entities/fnote.js";
 import type { NoteType } from "../../entities/fnote.js";
+import { Dropdown, Modal } from "bootstrap";
 
 const TPL = `
 <div class="revisions-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@@ -101,9 +102,9 @@ export default class RevisionsDialog extends BasicWidget {
     private revisionId: string | null;
 
     //@ts-ignore
-    private modal: bootstrap.Modal;
+    private modal: Modal;
     //@ts-ignore
-    private listDropdown: bootstrap.Dropdown;
+    private listDropdown: Dropdown;
 
     private $list!: JQuery<HTMLElement>;
     private $listDropdown!: JQuery<HTMLElement>;
@@ -126,12 +127,12 @@ export default class RevisionsDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
         //@ts-ignore
-        this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
+        this.modal = Modal.getOrCreateInstance(this.$widget);
 
         this.$list = this.$widget.find(".revision-list");
         this.$listDropdown = this.$widget.find(".revision-list-dropdown");
         //@ts-ignore
-        this.listDropdown = bootstrap.Dropdown.getOrCreateInstance(this.$listDropdown, { autoClose: false });
+        this.listDropdown = Dropdown.getOrCreateInstance(this.$listDropdown, { autoClose: false });
         this.$content = this.$widget.find(".revision-content");
         this.$title = this.$widget.find(".revision-title");
         this.$titleButtons = this.$widget.find(".revision-title-buttons");
diff --git a/src/public/app/widgets/dialogs/upload_attachments.js b/src/public/app/widgets/dialogs/upload_attachments.js
index 008cb8c88..608bc1b45 100644
--- a/src/public/app/widgets/dialogs/upload_attachments.js
+++ b/src/public/app/widgets/dialogs/upload_attachments.js
@@ -4,6 +4,7 @@ import treeService from "../../services/tree.js";
 import importService from "../../services/import.js";
 import options from "../../services/options.js";
 import BasicWidget from "../basic_widget.js";
+import { Modal, Tooltip } from "bootstrap";
 
 const TPL = `
 <div class="upload-attachments-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@@ -49,7 +50,7 @@ export default class UploadAttachmentsDialog extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
+        this.modal = Modal.getOrCreateInstance(this.$widget);
 
         this.$form = this.$widget.find(".upload-attachment-form");
         this.$noteTitle = this.$widget.find(".upload-attachment-note-title");
@@ -72,7 +73,7 @@ export default class UploadAttachmentsDialog extends BasicWidget {
             }
         });
 
-        bootstrap.Tooltip.getOrCreateInstance(this.$widget.find('[data-bs-toggle="tooltip"]'), {
+        Tooltip.getOrCreateInstance(this.$widget.find('[data-bs-toggle="tooltip"]'), {
             html: true
         });
     }
diff --git a/src/public/app/widgets/note_type.ts b/src/public/app/widgets/note_type.ts
index 9b3b90665..00033ab01 100644
--- a/src/public/app/widgets/note_type.ts
+++ b/src/public/app/widgets/note_type.ts
@@ -6,6 +6,7 @@ import { t } from "../services/i18n.js";
 import type FNote from "../entities/fnote.js";
 import type { NoteType } from "../entities/fnote.js";
 import type { EventData } from "../components/app_context.js";
+import { Dropdown } from "bootstrap";
 
 interface NoteTypeMapping {
     type: NoteType;
@@ -79,7 +80,7 @@ const TPL = `
 
 export default class NoteTypeWidget extends NoteContextAwareWidget {
 
-    private dropdown!: bootstrap.Dropdown;
+    private dropdown!: Dropdown;
     private $noteTypeDropdown!: JQuery<HTMLElement>;
     private $noteTypeButton!: JQuery<HTMLElement>;
     private $noteTypeDesc!: JQuery<HTMLElement>;
@@ -88,7 +89,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
         this.$widget = $(TPL);
 
         //@ts-ignore
-        this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
+        this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
 
         this.$widget.on("show.bs.dropdown", () => this.renderDropdown());
 
diff --git a/src/public/app/widgets/quick_search.js b/src/public/app/widgets/quick_search.js
index fddf9b6af..2f456d355 100644
--- a/src/public/app/widgets/quick_search.js
+++ b/src/public/app/widgets/quick_search.js
@@ -6,6 +6,7 @@ import utils from "../services/utils.js";
 import appContext from "../components/app_context.js";
 import shortcutService from "../services/shortcuts.js";
 import { t } from "../services/i18n.js";
+import { Dropdown, Tooltip } from "bootstrap";
 
 const TPL = `
 <div class="quick-search input-group input-group-sm">
@@ -44,7 +45,7 @@ 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.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
 
         this.$searchString = this.$widget.find(".search-string");
         this.$dropdownMenu = this.$widget.find(".dropdown-menu");
@@ -100,7 +101,7 @@ export default class QuickSearchWidget extends BasicWidget {
         const { searchResultNoteIds, error } = await server.get(`quick-search/${encodeURIComponent(searchString)}`);
 
         if (error) {
-            let tooltip = new bootstrap.Tooltip(this.$searchString, {
+            let tooltip = new Tooltip(this.$searchString, {
                 trigger: "manual",
                 title: `Search error: ${error}`,
                 placement: "right"
diff --git a/src/public/app/widgets/ribbon_widgets/search_definition.js b/src/public/app/widgets/ribbon_widgets/search_definition.js
index 3ab077fa9..9f3bb5cb0 100644
--- a/src/public/app/widgets/ribbon_widgets/search_definition.js
+++ b/src/public/app/widgets/ribbon_widgets/search_definition.js
@@ -16,6 +16,7 @@ import Limit from "../search_options/limit.js";
 import Debug from "../search_options/debug.js";
 import appContext from "../../components/app_context.js";
 import bulkActionService from "../../services/bulk_action.js";
+import { Dropdown } from "bootstrap";
 
 const TPL = `
 <div class="search-definition-widget">
@@ -203,7 +204,7 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget {
         });
 
         this.$widget.on("click", "[data-action-add]", async (event) => {
-            bootstrap.Dropdown.getOrCreateInstance(this.$widget.find(".action-add-toggle"));
+            Dropdown.getOrCreateInstance(this.$widget.find(".action-add-toggle"));
 
             const actionName = $(event.target).attr("data-action-add");
 
diff --git a/src/public/app/widgets/search_options/search_string.js b/src/public/app/widgets/search_options/search_string.js
index 3d355ce17..6c841888b 100644
--- a/src/public/app/widgets/search_options/search_string.js
+++ b/src/public/app/widgets/search_options/search_string.js
@@ -4,6 +4,7 @@ import server from "../../services/server.js";
 import shortcutService from "../../services/shortcuts.js";
 import appContext from "../../components/app_context.js";
 import { t } from "../../services/i18n.js";
+import { Tooltip } from "bootstrap";
 
 const TPL = `
 <tr>
@@ -78,7 +79,7 @@ export default class SearchString extends AbstractSearchOption {
     }
 
     showSearchErrorEvent({ error }) {
-        let tooltip = new bootstrap.Tooltip(this.$searchString, {
+        let tooltip = new Tooltip(this.$searchString, {
             trigger: "manual",
             title: `${t("search_string.error", { error })}`,
             placement: "bottom"
diff --git a/src/public/app/widgets/sync_status.js b/src/public/app/widgets/sync_status.js
index df13c8716..d17b7ae17 100644
--- a/src/public/app/widgets/sync_status.js
+++ b/src/public/app/widgets/sync_status.js
@@ -4,6 +4,7 @@ import ws from "../services/ws.js";
 import options from "../services/options.js";
 import syncService from "../services/sync.js";
 import { escapeQuotes } from "../services/utils.js";
+import { Tooltip } from "bootstrap";
 
 const TPL = `
 <div class="sync-status-widget launcher-button">
@@ -96,7 +97,7 @@ export default class SyncStatusWidget extends BasicWidget {
             return;
         }
 
-        bootstrap.Tooltip.getOrCreateInstance(this.$widget.find(`.sync-status-${className}`), {
+        Tooltip.getOrCreateInstance(this.$widget.find(`.sync-status-${className}`), {
             html: true,
             placement: this.settings.titlePlacement,
             fallbackPlacements: [this.settings.titlePlacement]

From 762c7dab83e3ea9cfe9ec4c2e3f1fc3e2d88c5c9 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Fri, 21 Feb 2025 19:52:08 +0100
Subject: [PATCH 10/24] build: add bootstrap webpack related dependencies

https://getbootstrap.com/docs/5.3/getting-started/webpack/
---
 package-lock.json | 797 +++++++++++++++++++++++++++++++++++++++++++++-
 package.json      |   9 +-
 2 files changed, 804 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 829b9eece..a0b4664ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,6 @@
         "autocomplete.js": "0.38.1",
         "axios": "1.7.9",
         "better-sqlite3": "11.8.1",
-        "bootstrap": "5.3.3",
         "boxicons": "2.1.4",
         "chardet": "2.0.0",
         "cheerio": "1.0.0",
@@ -124,6 +123,7 @@
         "@electron-forge/plugin-auto-unpack-natives": "7.7.0",
         "@electron/rebuild": "3.7.1",
         "@playwright/test": "1.50.1",
+        "@popperjs/core": "2.11.8",
         "@types/archiver": "6.0.3",
         "@types/better-sqlite3": "7.6.12",
         "@types/bootstrap": "5.2.10",
@@ -160,15 +160,22 @@
         "@types/xml2js": "0.4.14",
         "@types/yargs": "17.0.33",
         "@vitest/coverage-v8": "3.0.6",
+        "autoprefixer": "10.4.20",
+        "bootstrap": "5.3.3",
         "cross-env": "7.0.3",
+        "css-loader": "7.1.2",
         "electron": "34.2.0",
         "esm": "3.2.25",
         "jsdoc": "4.0.4",
         "lorem-ipsum": "2.0.8",
         "nodemon": "3.1.9",
+        "postcss-loader": "8.1.1",
         "prettier": "3.5.1",
         "rcedit": "4.0.1",
         "rimraf": "6.0.1",
+        "sass": "1.85.0",
+        "sass-loader": "16.0.5",
+        "style-loader": "4.0.0",
         "swagger-jsdoc": "6.2.8",
         "tslib": "2.8.1",
         "tsx": "4.19.3",
@@ -297,6 +304,21 @@
         "node": "20 || >=22"
       }
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
@@ -3235,6 +3257,330 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher/node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -3265,6 +3611,7 @@
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -5385,6 +5732,44 @@
         "immediate": "^3.2.3"
       }
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.20",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
+      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.23.3",
+        "caniuse-lite": "^1.0.30001646",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/await-to-js": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/await-to-js/-/await-to-js-3.0.0.tgz",
@@ -5648,6 +6033,7 @@
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
       "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6100,6 +6486,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001689",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001689.tgz",
@@ -6785,6 +7181,52 @@
         "layout-base": "^1.0.0"
       }
     },
+    "node_modules/cosmiconfig": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
+      "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/crc-32": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
@@ -6965,6 +7407,42 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/css-loader": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.2.tgz",
+      "integrity": "sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.33",
+        "postcss-modules-extract-imports": "^3.1.0",
+        "postcss-modules-local-by-default": "^4.0.5",
+        "postcss-modules-scope": "^3.2.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "webpack": "^5.27.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/css-select": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
@@ -6993,6 +7471,19 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/cssstyle": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.2.1.tgz",
@@ -9907,6 +10398,20 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -10774,6 +11279,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -10851,6 +11369,30 @@
       "integrity": "sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q==",
       "license": "MIT"
     },
+    "node_modules/immutable": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
+      "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/import-local": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
@@ -11438,6 +11980,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/jpeg-js": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.4.tgz",
@@ -11854,6 +12406,13 @@
       "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz",
       "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA=="
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/linkify-it": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
@@ -12766,6 +13325,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/node-api-version": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/node-api-version/-/node-api-version-0.2.0.tgz",
@@ -12975,6 +13542,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/normalize-strings": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/normalize-strings/-/normalize-strings-1.1.1.tgz",
@@ -13331,6 +13908,19 @@
         "wheel": "^1.0.0"
       }
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parse-author": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/parse-author/-/parse-author-2.0.0.tgz",
@@ -13848,6 +14438,122 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-loader": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-8.1.1.tgz",
+      "integrity": "sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cosmiconfig": "^9.0.0",
+        "jiti": "^1.20.0",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "postcss": "^7.0.0 || ^8.0.1",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
+      "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz",
+      "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^7.0.0",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz",
+      "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "postcss-selector-parser": "^7.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/postject": {
       "version": "1.0.0-alpha.6",
       "resolved": "https://registry.npmjs.org/postject/-/postject-1.0.0-alpha.6.tgz",
@@ -14706,6 +15412,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/resolve-pathname": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
@@ -15070,6 +15786,68 @@
         "postcss": "^8.3.11"
       }
     },
+    "node_modules/sass": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.85.0.tgz",
+      "integrity": "sha512-3ToiC1xZ1Y8aU7+CkgCI/tqyuPXEmYGJXO7H4uqp0xkLXUqp88rQQ4j1HmP37xSJLbCJPaIiv+cT1y+grssrww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/sass-loader": {
+      "version": "16.0.5",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.5.tgz",
+      "integrity": "sha512-oL+CMBXrj6BZ/zOq4os+UECPL+bWqt6OAC6DWS8Ln8GZRcMDjlJ4JC3FBDuHJdYaFWIdKNIBYmtZtK2MaMkNIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "neo-async": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/sax": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
@@ -16022,6 +16800,23 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
+    "node_modules/style-loader": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz",
+      "integrity": "sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.27.0"
+      }
+    },
     "node_modules/stylis": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.4.tgz",
diff --git a/package.json b/package.json
index 7362bd546..9133ea40c 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,6 @@
     "autocomplete.js": "0.38.1",
     "axios": "1.7.9",
     "better-sqlite3": "11.8.1",
-    "bootstrap": "5.3.3",
     "boxicons": "2.1.4",
     "chardet": "2.0.0",
     "cheerio": "1.0.0",
@@ -171,6 +170,7 @@
     "@electron-forge/plugin-auto-unpack-natives": "7.7.0",
     "@electron/rebuild": "3.7.1",
     "@playwright/test": "1.50.1",
+    "@popperjs/core": "2.11.8",
     "@types/archiver": "6.0.3",
     "@types/better-sqlite3": "7.6.12",
     "@types/bootstrap": "5.2.10",
@@ -207,15 +207,22 @@
     "@types/xml2js": "0.4.14",
     "@types/yargs": "17.0.33",
     "@vitest/coverage-v8": "3.0.6",
+    "autoprefixer": "10.4.20",
+    "bootstrap": "5.3.3",
     "cross-env": "7.0.3",
+    "css-loader": "7.1.2",
     "electron": "34.2.0",
     "esm": "3.2.25",
     "jsdoc": "4.0.4",
     "lorem-ipsum": "2.0.8",
     "nodemon": "3.1.9",
+    "postcss-loader": "8.1.1",
     "prettier": "3.5.1",
     "rcedit": "4.0.1",
     "rimraf": "6.0.1",
+    "sass": "1.85.0",
+    "sass-loader": "16.0.5",
+    "style-loader": "4.0.0",
     "swagger-jsdoc": "6.2.8",
     "tslib": "2.8.1",
     "tsx": "4.19.3",

From 53611614338ac9821996f67b161c8c93ba0487bb Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Fri, 21 Feb 2025 21:21:20 +0100
Subject: [PATCH 11/24] views: remove bootstrap references

---
 src/views/desktop.ejs      | 2 --
 src/views/login.ejs        | 1 -
 src/views/mobile.ejs       | 3 ---
 src/views/set_password.ejs | 1 -
 src/views/setup.ejs        | 3 ---
 5 files changed, 10 deletions(-)

diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs
index da74e65c8..7f4358d4e 100644
--- a/src/views/desktop.ejs
+++ b/src/views/desktop.ejs
@@ -34,8 +34,6 @@
 
 <script src="<%= assetPath %>/node_modules/jquery/dist/jquery.min.js"></script>
 
-<link href="<%= assetPath %>/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-<script src="<%= assetPath %>/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
 <!-- Include Fancytree library and skip -->
 <link href="<%= assetPath %>/stylesheets/tree.css" rel="stylesheet">
diff --git a/src/views/login.ejs b/src/views/login.ejs
index 7d83fb480..7b56c8fa1 100644
--- a/src/views/login.ejs
+++ b/src/views/login.ejs
@@ -6,7 +6,6 @@
     <title><%= t("login.title") %></title>
     <link rel="apple-touch-icon" sizes="180x180" href="<%= assetPath %>/images/app-icons/ios/apple-touch-icon.png">
     <link rel="shortcut icon" href="favicon.ico">
-    <link rel="stylesheet" href="<%= assetPath %>/node_modules/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-light.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
diff --git a/src/views/mobile.ejs b/src/views/mobile.ejs
index bcd712d28..b6c1f5bb6 100644
--- a/src/views/mobile.ejs
+++ b/src/views/mobile.ejs
@@ -117,9 +117,6 @@
 <link href="<%= assetPath %>/stylesheets/tree.css" rel="stylesheet">
 <script src="<%= assetPath %>/node_modules/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js"></script>
 
-<link href="<%= assetPath %>/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-<script src="<%= assetPath %>/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-
 <script src="<%= appPath %>/mobile.js" crossorigin type="module"></script>
 
 <link href="api/fonts" rel="stylesheet">
diff --git a/src/views/set_password.ejs b/src/views/set_password.ejs
index 12c78bfb1..d00efa646 100644
--- a/src/views/set_password.ejs
+++ b/src/views/set_password.ejs
@@ -6,7 +6,6 @@
     <title><%= t("set_password.title") %></title>
     <link rel="apple-touch-icon" sizes="180x180" href="<%= assetPath %>/images/app-icons/ios/apple-touch-icon.png">
     <link rel="shortcut icon" href="favicon.ico">
-    <link rel="stylesheet" href="<%= assetPath %>/node_modules/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-light.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
diff --git a/src/views/setup.ejs b/src/views/setup.ejs
index 1f010d990..7e949aac0 100644
--- a/src/views/setup.ejs
+++ b/src/views/setup.ejs
@@ -168,9 +168,6 @@
 <script src="<%= assetPath %>/node_modules/jquery/dist/jquery.min.js"></script>
 <script src="<%= assetPath %>/node_modules/jquery-hotkeys/jquery-hotkeys.js"></script>
 
-<link href="<%= assetPath %>/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-<script src="<%= assetPath %>/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-
 <script src="<%= appPath %>/setup.js" crossorigin type="module"></script>
 <link href="<%= assetPath %>/stylesheets/theme-light.css" rel="stylesheet" />
 <link href="<%= assetPath %>/stylesheets/theme-next.css" rel="stylesheet" />

From 19e19ca052e63a95bb1268512be70e4062e707bb Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Fri, 21 Feb 2025 21:22:40 +0100
Subject: [PATCH 12/24] assets: remove bootstrap reference

---
 src/routes/assets.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/routes/assets.ts b/src/routes/assets.ts
index b0a8ed354..796491e13 100644
--- a/src/routes/assets.ts
+++ b/src/routes/assets.ts
@@ -95,8 +95,6 @@ async function register(app: express.Application) {
 
     app.use(`/${assetPath}/node_modules/jquery.fancytree/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/jquery.fancytree/dist/")));
 
-    app.use(`/${assetPath}/node_modules/bootstrap/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/bootstrap/dist/")));
-
     // CodeMirror
     app.use(`/${assetPath}/node_modules/codemirror/lib/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/codemirror/lib/")));
     app.use(`/${assetPath}/node_modules/codemirror/addon/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/codemirror/addon/")));

From ac53079a3980397205e5ba51b34ed52f0d44cd52 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Fri, 21 Feb 2025 21:44:17 +0100
Subject: [PATCH 13/24] webpack: replace style-loader with
 `mini-css-extract-plugin`

will allow to have css files instead of style blocks in the html file
---
 package-lock.json | 22 ++++++++++++++++++++++
 package.json      |  1 +
 webpack.config.ts |  6 +++++-
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index a0b4664ad..3684bbdba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -168,6 +168,7 @@
         "esm": "3.2.25",
         "jsdoc": "4.0.4",
         "lorem-ipsum": "2.0.8",
+        "mini-css-extract-plugin": "2.9.2",
         "nodemon": "3.1.9",
         "postcss-loader": "8.1.1",
         "prettier": "3.5.1",
@@ -13062,6 +13063,27 @@
       "integrity": "sha512-Ja8zcKAwjYG180ZGB8WKygmbqs4RFEQZ0JTE1T49/6nCHWXVcA0WNW8Syl0sMbMyYZvQ5kOZWzLylgCvplqhRw==",
       "license": "MIT"
     },
+    "node_modules/mini-css-extract-plugin": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.2.tgz",
+      "integrity": "sha512-GJuACcS//jtq4kCtd5ii/M0SZf7OZRH+BxdqXZHaJfb8TJiVl+NgQRPwiYt2EuqeSkNydn/7vP+bcE27C5mb9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "schema-utils": "^4.0.0",
+        "tapable": "^2.2.1"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
diff --git a/package.json b/package.json
index 9133ea40c..df2a2095a 100644
--- a/package.json
+++ b/package.json
@@ -215,6 +215,7 @@
     "esm": "3.2.25",
     "jsdoc": "4.0.4",
     "lorem-ipsum": "2.0.8",
+    "mini-css-extract-plugin": "2.9.2",
     "nodemon": "3.1.9",
     "postcss-loader": "8.1.1",
     "prettier": "3.5.1",
diff --git a/webpack.config.ts b/webpack.config.ts
index 0c68b057f..faaf000f2 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -2,6 +2,7 @@ import { fileURLToPath } from "url";
 import path from "path";
 import autoprefixer from "autoprefixer";
 import assetPath from "./src/services/asset_path.js";
+import miniCssExtractPlugin from "mini-css-extract-plugin";
 import type { Configuration } from "webpack";
 
 const rootDir = path.dirname(fileURLToPath(import.meta.url));
@@ -18,6 +19,9 @@ const config: Configuration = {
         path: path.resolve(rootDir, "src/public/app-dist"),
         filename: "[name].js"
     },
+    plugins: [
+        new miniCssExtractPlugin()
+    ],
     module: {
         rules: [
             {
@@ -37,7 +41,7 @@ const config: Configuration = {
                 test: /\.(scss)$/,
                 use: [
                     {
-                        loader: "style-loader"
+                        loader: miniCssExtractPlugin.loader
                     },
                     {
                         loader: "css-loader"

From 1b309675c8b0c0736ac7ef75e48dc1070a822411 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Fri, 21 Feb 2025 22:06:00 +0100
Subject: [PATCH 14/24] fix(webpackMiddleware): add (now) missing plugins
 declaration from productionConfig

required since we used `mini-css-extract-plugin` now
---
 src/routes/assets.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/assets.ts b/src/routes/assets.ts
index 796491e13..4942f8017 100644
--- a/src/routes/assets.ts
+++ b/src/routes/assets.ts
@@ -28,6 +28,7 @@ async function register(app: express.Application) {
                 type: "filesystem",
                 cacheDirectory: path.join(srcRoot, "..", ".cache", isElectron ? "electron" : "server")
             },
+            plugins: productionConfig.plugins,
             entry: productionConfig.entry,
             module: productionConfig.module,
             resolve: productionConfig.resolve,

From 837697c5039218c6e6cb62bfef344f1017ae3df4 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Fri, 21 Feb 2025 22:07:23 +0100
Subject: [PATCH 15/24] bootstrap: import bootstrap css in entry points

---
 src/public/app/desktop.ts             | 1 +
 src/public/app/mobile.ts              | 1 +
 src/public/app/setup.ts               | 1 +
 src/public/app/share.ts               | 2 ++
 src/public/stylesheets/bootstrap.scss | 2 ++
 5 files changed, 7 insertions(+)
 create mode 100644 src/public/stylesheets/bootstrap.scss

diff --git a/src/public/app/desktop.ts b/src/public/app/desktop.ts
index b546bf68c..025132495 100644
--- a/src/public/app/desktop.ts
+++ b/src/public/app/desktop.ts
@@ -10,6 +10,7 @@ import { t } from "./services/i18n.js";
 import options from "./services/options.js";
 import type ElectronRemote from "@electron/remote";
 import type Electron from "electron";
+import "../stylesheets/bootstrap.scss";
 
 await appContext.earlyInit();
 
diff --git a/src/public/app/mobile.ts b/src/public/app/mobile.ts
index 6690566d4..925b6bb15 100644
--- a/src/public/app/mobile.ts
+++ b/src/public/app/mobile.ts
@@ -1,6 +1,7 @@
 import appContext from "./components/app_context.js";
 import noteAutocompleteService from "./services/note_autocomplete.js";
 import glob from "./services/glob.js";
+import "../stylesheets/bootstrap.scss";
 
 glob.setupGlobs();
 
diff --git a/src/public/app/setup.ts b/src/public/app/setup.ts
index 1970c110a..0d4647093 100644
--- a/src/public/app/setup.ts
+++ b/src/public/app/setup.ts
@@ -1,5 +1,6 @@
 import utils from "./services/utils.js";
 import ko from "knockout";
+import "../stylesheets/bootstrap.scss";
 
 // TriliumNextTODO: properly make use of below types
 // type SetupModelSetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";
diff --git a/src/public/app/share.ts b/src/public/app/share.ts
index 912154986..62c9467e7 100644
--- a/src/public/app/share.ts
+++ b/src/public/app/share.ts
@@ -1,3 +1,5 @@
+import "../stylesheets/bootstrap.scss";
+
 /**
  * Fetch note with given ID from backend
  *
diff --git a/src/public/stylesheets/bootstrap.scss b/src/public/stylesheets/bootstrap.scss
new file mode 100644
index 000000000..ea4b3833e
--- /dev/null
+++ b/src/public/stylesheets/bootstrap.scss
@@ -0,0 +1,2 @@
+// Import all of Bootstrap's CSS
+@import "bootstrap/scss/bootstrap";
\ No newline at end of file

From f78a6ed14bdd59b35f401e511d98501d3f294c07 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Fri, 21 Feb 2025 22:14:27 +0100
Subject: [PATCH 16/24] views: import webpack created entrypoint css
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

→ this is currently only consisting of bootstrap, but should in future be more useful
---
 src/views/desktop.ejs      | 5 +++--
 src/views/login.ejs        | 2 ++
 src/views/mobile.ejs       | 2 ++
 src/views/set_password.ejs | 1 +
 src/views/setup.ejs        | 2 ++
 5 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs
index 7f4358d4e..029f8cbce 100644
--- a/src/views/desktop.ejs
+++ b/src/views/desktop.ejs
@@ -4,9 +4,10 @@
     <meta charset="utf-8">
     <link rel="shortcut icon" href="favicon.ico">
     <meta name="mobile-web-app-capable" content="yes">
-	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
+	  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+	  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
     <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
+    <link rel="stylesheet" href="<%= appPath %>/desktop.css">
     <title>TriliumNext Notes</title>
 </head>
 <body class="desktop heading-style-<%= headingStyle %> layout-<%= layoutOrientation %> platform-<%= platform %> <%= isElectron ? 'electron' : '' %> <%= hasNativeTitleBar ? 'native-titlebar' : '' %> <%= hasBackgroundEffects ? 'background-effects' : '' %>">
diff --git a/src/views/login.ejs b/src/views/login.ejs
index 7b56c8fa1..63d7fa252 100644
--- a/src/views/login.ejs
+++ b/src/views/login.ejs
@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-light.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
+    <link rel="stylesheet" href="<%= appPath %>/login.css">
 </head>
 <body>
 <div class="container">
@@ -43,6 +44,7 @@
         </form>
     </div>
 </div>
+<script src="<%= appPath %>/login.js" crossorigin type="module"></script>
 
 <script>
     // Required for correct loading of scripts in Electron
diff --git a/src/views/mobile.ejs b/src/views/mobile.ejs
index b6c1f5bb6..eaa3bd563 100644
--- a/src/views/mobile.ejs
+++ b/src/views/mobile.ejs
@@ -10,6 +10,8 @@
     <title>TriliumNext Notes</title>
     <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
 
+    <link rel="stylesheet" href="<%= appPath %>/mobile.css">
+
     <style>
         .lds-roller {
             display: inline-block;
diff --git a/src/views/set_password.ejs b/src/views/set_password.ejs
index d00efa646..9b958f79f 100644
--- a/src/views/set_password.ejs
+++ b/src/views/set_password.ejs
@@ -6,6 +6,7 @@
     <title><%= t("set_password.title") %></title>
     <link rel="apple-touch-icon" sizes="180x180" href="<%= assetPath %>/images/app-icons/ios/apple-touch-icon.png">
     <link rel="shortcut icon" href="favicon.ico">
+    <link rel="stylesheet" href="<%= appPath %>/set_password.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-light.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
diff --git a/src/views/setup.ejs b/src/views/setup.ejs
index 7e949aac0..5f5b2aad1 100644
--- a/src/views/setup.ejs
+++ b/src/views/setup.ejs
@@ -6,6 +6,8 @@
     <meta id="syncInProgress" content="<%= syncInProgress ? 1 : 0 %>" />
     <title><%= t("setup.title") %></title>
 
+    <link rel="stylesheet" href="<%= appPath %>/setup.css">
+
     <style>
         .lds-ring {
             display: inline-block;

From f6d9b429110d106f7b4b34241df9a7f0e70a46a4 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Fri, 21 Feb 2025 22:21:49 +0100
Subject: [PATCH 17/24] entrypoint: add missing, currently required
 set_password entry point

TODO: I think this can actually be part of the setup entrypoint/view at some point
---
 src/public/app/set_password.ts | 6 ++++++
 src/views/set_password.ejs     | 6 ++----
 webpack.config.ts              | 4 +++-
 3 files changed, 11 insertions(+), 5 deletions(-)
 create mode 100644 src/public/app/set_password.ts

diff --git a/src/public/app/set_password.ts b/src/public/app/set_password.ts
new file mode 100644
index 000000000..ebf6b68a4
--- /dev/null
+++ b/src/public/app/set_password.ts
@@ -0,0 +1,6 @@
+import "../stylesheets/bootstrap.scss";
+
+// @TriliumNextTODO: is this even needed anymore?
+// @ts-ignore - module = undefined
+// Required for correct loading of scripts in Electron
+if (typeof module === 'object') {window.module = module; module = undefined;}
diff --git a/src/views/set_password.ejs b/src/views/set_password.ejs
index 9b958f79f..7ad7900a7 100644
--- a/src/views/set_password.ejs
+++ b/src/views/set_password.ejs
@@ -45,9 +45,7 @@
     </div>
 </div>
 
-<script>
-    // Required for correct loading of scripts in Electron
-    if (typeof module === 'object') {window.module = module; module = undefined;}
-</script>
+<script src="<%= appPath %>/set_password.js" crossorigin type="module"></script>
+
 </body>
 </html>
diff --git a/webpack.config.ts b/webpack.config.ts
index faaf000f2..69a22c7c3 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -12,7 +12,9 @@ const config: Configuration = {
         setup: "./src/public/app/setup.js",
         mobile: "./src/public/app/mobile.js",
         desktop: "./src/public/app/desktop.js",
-        share: "./src/public/app/share.js"
+        share: "./src/public/app/share.js",
+        // TriliumNextTODO: integrate set_password into setup entry point/view
+        set_password: "./src/public/app/set_password.js"
     },
     output: {
         publicPath: `${assetPath}/app-dist/`,

From dde24785b8f3a98ef7e1caa315d46a9e34a927a0 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Fri, 21 Feb 2025 22:22:37 +0100
Subject: [PATCH 18/24] entrypoint: add missing login entry point and port to
 TS

---
 src/public/app/login.ts | 32 ++++++++++++++++++++++++++++++++
 src/views/login.ejs     | 30 ------------------------------
 webpack.config.ts       |  1 +
 3 files changed, 33 insertions(+), 30 deletions(-)
 create mode 100644 src/public/app/login.ts

diff --git a/src/public/app/login.ts b/src/public/app/login.ts
new file mode 100644
index 000000000..ed37e9e95
--- /dev/null
+++ b/src/public/app/login.ts
@@ -0,0 +1,32 @@
+import "../stylesheets/bootstrap.scss";
+
+// @ts-ignore - module = undefined
+// Required for correct loading of scripts in Electron
+if (typeof module === 'object') {window.module = module; module = undefined;}
+
+const device = getDeviceType()
+console.log("Setting device cookie to:", device);
+setCookie("trilium-device", device);
+
+function setCookie(name: string, value?: string) {
+    const date = new Date(Date.now() + 10 * 365 * 24 * 60 * 60 * 1000);
+    const expires = "; expires=" + date.toUTCString();
+
+    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
+}
+
+function getDeviceType() {
+    if (window.location.search === '?desktop') return "desktop";
+    if (window.location.search === '?mobile') return "mobile";
+    return isMobile() ? "mobile" : "desktop";
+}
+
+// https://stackoverflow.com/a/73731646/944162
+function isMobile() {
+    const mQ = matchMedia?.('(pointer:coarse)');
+    if (mQ?.media === '(pointer:coarse)') return !!mQ.matches;
+
+    if ('orientation' in window) return true;
+    const userAgentsRegEx = /\b(Android|iPhone|iPad|iPod|Windows Phone|BlackBerry|webOS|IEMobile)\b/i
+    return userAgentsRegEx.test(navigator.userAgent)
+}
\ No newline at end of file
diff --git a/src/views/login.ejs b/src/views/login.ejs
index 63d7fa252..53b2a94ce 100644
--- a/src/views/login.ejs
+++ b/src/views/login.ejs
@@ -46,36 +46,6 @@
 </div>
 <script src="<%= appPath %>/login.js" crossorigin type="module"></script>
 
-<script>
-    // Required for correct loading of scripts in Electron
-    if (typeof module === 'object') {window.module = module; module = undefined;}
 
-    const device = getDeviceType()
-    console.log("Setting device cookie to:", device);
-    setCookie("trilium-device", device);
-
-    function setCookie(name, value) {
-        const date = new Date(Date.now() + 10 * 365 * 24 * 60 * 60 * 1000);
-        const expires = "; expires=" + date.toUTCString();
-
-        document.cookie = name + "=" + (value || "")  + expires + "; path=/";
-    }
-
-    function getDeviceType() {
-        if (window.location.search === '?desktop') return "desktop";
-        if (window.location.search === '?mobile') return "mobile";
-        return isMobile() ? "mobile" : "desktop";
-    }
-
-    // https://stackoverflow.com/a/73731646/944162
-    function isMobile() {
-        const mQ = matchMedia?.('(pointer:coarse)');
-        if (mQ?.media === '(pointer:coarse)') return !!mQ.matches;
-
-        if ('orientation' in window) return true;
-        const userAgentsRegEx = /\b(Android|iPhone|iPad|iPod|Windows Phone|BlackBerry|webOS|IEMobile)\b/i
-        return userAgentsRegEx.test(navigator.userAgent)
-    }
-</script>
 </body>
 </html>
diff --git a/webpack.config.ts b/webpack.config.ts
index 69a22c7c3..a6c01424c 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -10,6 +10,7 @@ const config: Configuration = {
     mode: "production",
     entry: {
         setup: "./src/public/app/setup.js",
+        login: "./src/public/app/login.js",
         mobile: "./src/public/app/mobile.js",
         desktop: "./src/public/app/desktop.js",
         share: "./src/public/app/share.js",

From 0b4f5e998ee2ae8d74c513a38ba83239fb67705a Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Fri, 21 Feb 2025 22:41:47 +0100
Subject: [PATCH 19/24] webpack: add filename option to miniCssExtractPlugin

commented out for now, because it currently does not make sense yet.
This will be working, when I change webpack output to the "build" folder
instead of the current (messy) way, where it outputs into src/public/app-dist
---
 webpack.config.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/webpack.config.ts b/webpack.config.ts
index a6c01424c..b37451f5e 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -23,7 +23,10 @@ const config: Configuration = {
         filename: "[name].js"
     },
     plugins: [
-        new miniCssExtractPlugin()
+        new miniCssExtractPlugin({
+            // TriliumNextTODO: enable this, once webpack build outputs into the "build" folder, instead of "src/public/app-dist" folder => @pano9000
+            //filename: "../stylesheets/[name].css"
+        })
     ],
     module: {
         rules: [

From 55bdd4fffc9f648b345e6d83610abb735ce74358 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Fri, 21 Feb 2025 22:44:14 +0100
Subject: [PATCH 20/24] views: add TODO comment

---
 src/views/desktop.ejs      | 1 +
 src/views/login.ejs        | 1 +
 src/views/mobile.ejs       | 1 +
 src/views/set_password.ejs | 1 +
 src/views/setup.ejs        | 1 +
 5 files changed, 5 insertions(+)

diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs
index 029f8cbce..5c624cf49 100644
--- a/src/views/desktop.ejs
+++ b/src/views/desktop.ejs
@@ -7,6 +7,7 @@
 	  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 	  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
     <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
+    <% // TriliumNextTODO: move the css file to ${assetPath}/stylesheets/  %>
     <link rel="stylesheet" href="<%= appPath %>/desktop.css">
     <title>TriliumNext Notes</title>
 </head>
diff --git a/src/views/login.ejs b/src/views/login.ejs
index 53b2a94ce..55ef3a47b 100644
--- a/src/views/login.ejs
+++ b/src/views/login.ejs
@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-light.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
+    <% // TriliumNextTODO: move the css file to ${assetPath}/stylesheets/  %>
     <link rel="stylesheet" href="<%= appPath %>/login.css">
 </head>
 <body>
diff --git a/src/views/mobile.ejs b/src/views/mobile.ejs
index eaa3bd563..3660d0087 100644
--- a/src/views/mobile.ejs
+++ b/src/views/mobile.ejs
@@ -10,6 +10,7 @@
     <title>TriliumNext Notes</title>
     <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
 
+    <% // TriliumNextTODO: move the css file to ${assetPath}/stylesheets/  %>
     <link rel="stylesheet" href="<%= appPath %>/mobile.css">
 
     <style>
diff --git a/src/views/set_password.ejs b/src/views/set_password.ejs
index 7ad7900a7..5b8d29707 100644
--- a/src/views/set_password.ejs
+++ b/src/views/set_password.ejs
@@ -6,6 +6,7 @@
     <title><%= t("set_password.title") %></title>
     <link rel="apple-touch-icon" sizes="180x180" href="<%= assetPath %>/images/app-icons/ios/apple-touch-icon.png">
     <link rel="shortcut icon" href="favicon.ico">
+    <% // TriliumNextTODO: move the css file to ${assetPath}/stylesheets/  %>
     <link rel="stylesheet" href="<%= appPath %>/set_password.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-light.css">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next.css">
diff --git a/src/views/setup.ejs b/src/views/setup.ejs
index 5f5b2aad1..c80175e8b 100644
--- a/src/views/setup.ejs
+++ b/src/views/setup.ejs
@@ -6,6 +6,7 @@
     <meta id="syncInProgress" content="<%= syncInProgress ? 1 : 0 %>" />
     <title><%= t("setup.title") %></title>
 
+    <% // TriliumNextTODO: move the css file to ${assetPath}/stylesheets/  %>
     <link rel="stylesheet" href="<%= appPath %>/setup.css">
 
     <style>

From 1ded78975eb19482bee96f23ac2811e38d33675c Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Fri, 21 Feb 2025 22:57:44 +0100
Subject: [PATCH 21/24] deps: remove now unused style-loader

---
 package-lock.json | 18 ------------------
 package.json      |  1 -
 2 files changed, 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3684bbdba..78030f6fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -176,7 +176,6 @@
         "rimraf": "6.0.1",
         "sass": "1.85.0",
         "sass-loader": "16.0.5",
-        "style-loader": "4.0.0",
         "swagger-jsdoc": "6.2.8",
         "tslib": "2.8.1",
         "tsx": "4.19.3",
@@ -16822,23 +16821,6 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
-    "node_modules/style-loader": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz",
-      "integrity": "sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 18.12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.27.0"
-      }
-    },
     "node_modules/stylis": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.4.tgz",
diff --git a/package.json b/package.json
index df2a2095a..71c26f95e 100644
--- a/package.json
+++ b/package.json
@@ -223,7 +223,6 @@
     "rimraf": "6.0.1",
     "sass": "1.85.0",
     "sass-loader": "16.0.5",
-    "style-loader": "4.0.0",
     "swagger-jsdoc": "6.2.8",
     "tslib": "2.8.1",
     "tsx": "4.19.3",

From e7d204dfd270e325e0b086cfb656138b3226267a Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Fri, 21 Feb 2025 23:01:42 +0100
Subject: [PATCH 22/24] chore(copy-dist): remove now unneeded manual copying of
 bootstrap dir

webpack is taking care of that for us
---
 bin/copy-dist.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/bin/copy-dist.ts b/bin/copy-dist.ts
index 6087a69bd..2a2b75d56 100644
--- a/bin/copy-dist.ts
+++ b/bin/copy-dist.ts
@@ -95,7 +95,6 @@ const copy = async () => {
         "node_modules/mark.js/dist/",
         "node_modules/normalize.css/",
         "node_modules/jquery.fancytree/dist/",
-        "node_modules/bootstrap/dist/",
         "node_modules/autocomplete.js/dist/",
         "node_modules/codemirror/lib/",
         "node_modules/codemirror/addon/",

From cdb988ff64fda14716e61325c2beba7fa10eefb0 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Sat, 22 Feb 2025 13:02:40 +0100
Subject: [PATCH 23/24] webpack: revert accidental changing of devtool

---
 webpack.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webpack.config.ts b/webpack.config.ts
index b37451f5e..bd16bbaec 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -75,7 +75,7 @@ const config: Configuration = {
             ".mjs": [".mjs", ".mts"]
         }
     },
-    //devtool: "none",
+    devtool: "source-map",
     target: "electron-renderer"
 };
 

From a0442ded58a9ddc1178de4bfd25ff2ab590b5014 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <pano_90@gmx.net>
Date: Sat, 22 Feb 2025 13:05:36 +0100
Subject: [PATCH 24/24] chore: get rid of bootstrap related ts-ignore

---
 src/public/app/widgets/dialogs/revisions.ts | 14 ++++++--------
 src/public/app/widgets/note_type.ts         |  3 +--
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/public/app/widgets/dialogs/revisions.ts b/src/public/app/widgets/dialogs/revisions.ts
index 47eeb0dc6..b20a5c2f6 100644
--- a/src/public/app/widgets/dialogs/revisions.ts
+++ b/src/public/app/widgets/dialogs/revisions.ts
@@ -101,10 +101,8 @@ export default class RevisionsDialog extends BasicWidget {
     private note: FNote | null;
     private revisionId: string | null;
 
-    //@ts-ignore
-    private modal: Modal;
-    //@ts-ignore
-    private listDropdown: Dropdown;
+    private modal!: Modal;
+    private listDropdown!: Dropdown;
 
     private $list!: JQuery<HTMLElement>;
     private $listDropdown!: JQuery<HTMLElement>;
@@ -126,13 +124,13 @@ export default class RevisionsDialog extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        //@ts-ignore
-        this.modal = Modal.getOrCreateInstance(this.$widget);
+
+        this.modal = Modal.getOrCreateInstance(this.$widget[0]);
 
         this.$list = this.$widget.find(".revision-list");
         this.$listDropdown = this.$widget.find(".revision-list-dropdown");
-        //@ts-ignore
-        this.listDropdown = Dropdown.getOrCreateInstance(this.$listDropdown, { autoClose: false });
+
+        this.listDropdown = Dropdown.getOrCreateInstance(this.$listDropdown[0], { autoClose: false });
         this.$content = this.$widget.find(".revision-content");
         this.$title = this.$widget.find(".revision-title");
         this.$titleButtons = this.$widget.find(".revision-title-buttons");
diff --git a/src/public/app/widgets/note_type.ts b/src/public/app/widgets/note_type.ts
index 00033ab01..aa9b7628d 100644
--- a/src/public/app/widgets/note_type.ts
+++ b/src/public/app/widgets/note_type.ts
@@ -88,8 +88,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
 
-        //@ts-ignore
-        this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
+        this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0]);
 
         this.$widget.on("show.bs.dropdown", () => this.renderDropdown());