From 874809254d45c10ac5c01133e2259a3011867080 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 4 Jan 2025 18:19:46 +0200
Subject: [PATCH] chore(client/ts): port global_menu

---
 src/public/app/types.d.ts                     |  1 +
 .../{global_menu.js => global_menu.ts}        | 77 +++++++++++--------
 ...pdate_available.js => update_available.ts} | 10 +--
 3 files changed, 51 insertions(+), 37 deletions(-)
 rename src/public/app/widgets/buttons/{global_menu.js => global_menu.ts} (95%)
 rename src/public/app/widgets/buttons/{update_available.js => update_available.ts} (93%)

diff --git a/src/public/app/types.d.ts b/src/public/app/types.d.ts
index 38870b375..c90eb4270 100644
--- a/src/public/app/types.d.ts
+++ b/src/public/app/types.d.ts
@@ -41,6 +41,7 @@ interface CustomGlobals {
     assetPath: string;
     instanceName: string;
     appCssNoteIds: string[];
+    triliumVersion: string;
 }
 
 type RequireMethod = (moduleName: string) => any;
diff --git a/src/public/app/widgets/buttons/global_menu.js b/src/public/app/widgets/buttons/global_menu.ts
similarity index 95%
rename from src/public/app/widgets/buttons/global_menu.js
rename to src/public/app/widgets/buttons/global_menu.ts
index 6607c0182..70ad56d2f 100644
--- a/src/public/app/widgets/buttons/global_menu.js
+++ b/src/public/app/widgets/buttons/global_menu.ts
@@ -11,12 +11,12 @@ const TPL = `
         width: 53px;
         height: 53px;
     }
-    
+
     .global-menu .dropdown-menu {
         min-width: 20em;
     }
-    
-    .global-menu-button {        
+
+    .global-menu-button {
         width: 100%;
         height: 100%;
         position: relative;
@@ -27,7 +27,7 @@ const TPL = `
     .global-menu-button > svg path {
         fill: var(--launcher-pane-text-color);
     }
-    
+
     .global-menu-button:hover { border: 0; }
     .global-menu-button:hover > svg path {
         transition: 200ms ease-in-out fill;
@@ -41,7 +41,7 @@ const TPL = `
     .global-menu-button:hover > svg path.st6 { fill:#EFB075; }
     .global-menu-button:hover > svg path.st7 { fill:#E99547; }
     .global-menu-button:hover > svg path.st8 { fill:#E47B19; }
-    
+
     .global-menu-button-update-available {
         position: absolute;
         right: -30px;
@@ -54,14 +54,14 @@ const TPL = `
     .update-to-latest-version-button {
         display: none;
     }
-    
+
     .global-menu .zoom-container {
-        display: flex; 
-        flex-direction: row; 
+        display: flex;
+        flex-direction: row;
         justify-content: space-between;
         align-items: baseline;
     }
-    
+
     .global-menu .zoom-buttons a {
         display: inline-block;
         border: 1px solid var(--button-border-color);
@@ -72,28 +72,28 @@ const TPL = `
         margin-left: 3px;
         text-decoration: none;
     }
-    
+
     .global-menu .zoom-buttons a:hover {
         text-decoration: none;
     }
-    
+
     .global-menu .zoom-state {
         margin-left: 5px;
         margin-right: 5px;
     }
-    
+
     .global-menu .dropdown-item .bx {
         position: relative;
         top: 3px;
         font-size: 120%;
         margin-right: 5px;
     }
-    
+
     body.mobile .show-help-button, body.mobile .show-about-dialog-button {
         /* hidden because these dialogs are not available for mobile */
         display: none;
     }
-    
+
     body.mobile .global-menu .dropdown-submenu .dropdown-menu {
         display: block;
         font-size: 90%;
@@ -103,7 +103,7 @@ const TPL = `
         --dropdown-shadow-opacity: 0;
         --submenu-opening-delay: 0;
     }
-    </style>    
+    </style>
 
     <button type="button" data-bs-toggle="dropdown" aria-haspopup="true"
             aria-expanded="false" class="icon-action global-menu-button">
@@ -129,16 +129,16 @@ const TPL = `
                 <span class="bx bx-empty"></span>
                 ${t('global_menu.zoom')}
             </div>
-            
+
             <div class="zoom-buttons">
                 <a data-trigger-command="toggleFullscreen" title="${t('global_menu.toggle_fullscreen')}" class="bx bx-expand-alt"></a>
-                
+
                 &nbsp;
-                
+
                 <a data-trigger-command="zoomOut" title="${t('global_menu.zoom_out')}" class="bx bx-minus"></a>
-                
+
                 <span data-trigger-command="zoomReset" title="${t('global_menu.reset_zoom_level')}" class="zoom-state"></span>
-                
+
                 <a data-trigger-command="zoomIn" title="${t('global_menu.zoom_in')}" class="bx bx-plus"></a>
             </div>
         </span>
@@ -164,13 +164,13 @@ const TPL = `
             <span class="bx bx-sidebar"></span>
             ${t('global_menu.configure_launchbar')}
         </li>
-        
+
         <li class="dropdown-item dropdown-submenu">
             <span class="dropdown-toggle">
                 <span class="bx bx-chip"></span>
                 ${t('global_menu.advanced')}
             </span>
-            
+
             <ul class="dropdown-menu">
                 <li class="dropdown-item" data-trigger-command="showHiddenSubtree">
                     <span class="bx bx-hide"></span>
@@ -189,13 +189,13 @@ const TPL = `
                     ${t('global_menu.show_backend_log')}
                     <kbd data-command="showBackendLog"></kbd>
                 </li>
-        
+
                 <li class="dropdown-item" data-trigger-command="showSQLConsole">
                     <span class="bx bx-data"></span>
                     ${t('global_menu.open_sql_console')}
                     <kbd data-command="showSQLConsole"></kbd>
                 </li>
-                
+
                 <li class="dropdown-item" data-trigger-command="showSQLConsoleHistory">
                     <span class="bx bx-data"></span>
                     ${t('global_menu.open_sql_console_history')}
@@ -208,14 +208,14 @@ const TPL = `
                     ${t('global_menu.open_dev_tools')}
                     <kbd data-command="openDevTools"></kbd>
                 </li>
-                
-                <li class="dropdown-item" data-trigger-command="reloadFrontendApp" 
+
+                <li class="dropdown-item" data-trigger-command="reloadFrontendApp"
                     title="${t('global_menu.reload_hint')}">
                     <span class="bx bx-refresh"></span>
                     ${t('global_menu.reload_frontend')}
                     <kbd data-command="reloadFrontendApp"></kbd>
                 </li>
-                
+
             </ul>
         </li>
 
@@ -254,11 +254,20 @@ const TPL = `
 `;
 
 export default class GlobalMenuWidget extends BasicWidget {
-    constructor(isHorizontalLayout) {
+
+    private updateAvailableWidget: UpdateAvailableWidget;
+    private isHorizontalLayout: boolean;
+    private tooltip!: bootstrap.Tooltip;
+    private dropdown!: bootstrap.Dropdown;
+
+    private $updateToLatestVersionButton!: JQuery<HTMLElement>;
+    private $zoomState!: JQuery<HTMLElement>;
+
+    constructor(isHorizontalLayout: boolean) {
         super();
 
         this.updateAvailableWidget = new UpdateAvailableWidget();
-        this.isHorizontalLayout = isHorizontalLayout;        
+        this.isHorizontalLayout = isHorizontalLayout;
     }
 
     doRender() {
@@ -276,21 +285,25 @@ export default class GlobalMenuWidget extends BasicWidget {
                         <path class="st0" d="m202.9 112.7c-22.5 16.1-54.5 12.8-74.9 6.3l14.8-11.8 14.1-11.3 49.1-39.3-51.2 35.9-14.3 10-14.9 10.5c0.7-21.2 7-49.9 28.6-65.4 1.8-1.3 3.9-2.6 6.1-3.8 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.4 2.8-4.9 5.4-7.4 7.8-3.4 3.5-6.8 6.4-10.1 8.8z"/>
                         <path class="st1" d="m213.1 104c-22.2 12.6-51.4 9.3-70.3 3.2l14.1-11.3 49.1-39.3-51.2 35.9-14.3 10c0.5-18.1 4.9-42.1 19.7-58.6 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.3 2.8-4.8 5.4-7.2 7.8z"/>
                         <path class="st2" d="m220.5 96.2c-21.1 8.6-46.6 5.3-63.7-0.2l49.2-39.4-51.2 35.9c0.3-15.8 3.5-36.6 14.3-52.8 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.8 66z"/>
-                    
+
                         <path class="st3" d="m106.7 179c-5.8-21 5.2-43.8 15.5-57.2l4.8 14.2 4.5 13.4 15.9 47-12.8-47.6-3.6-13.2-3.7-13.9c15.5 6.2 35.1 18.6 40.7 38.8 0.5 1.7 0.9 3.6 1.2 5.5 0.4 2.4 0.6 5 0.7 7.7 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8-1.4-2.6-2.7-5.1-3.8-7.6-1.6-3.5-2.9-6.8-3.8-10z"/>
                         <path class="st4" d="m110.4 188.9c-3.4-19.8 6.9-40.5 16.6-52.9l4.5 13.4 15.9 47-12.8-47.6-3.6-13.2c13.3 5.2 29.9 15 38.1 30.4 0.4 2.4 0.6 5 0.7 7.7 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8-1.4-2.6-2.7-5.2-3.8-7.7z"/>
                         <path class="st5" d="m114.2 196.5c-0.7-18 8.6-35.9 17.3-47.1l15.9 47-12.8-47.6c11.6 4.4 26.1 12.4 35.2 24.8 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8z"/>
-            
+
                         <path class="st6" d="m86.3 59.1c21.7 10.9 32.4 36.6 35.8 54.9l-15.2-6.6-14.5-6.3-50.6-22 48.8 24.9 13.6 6.9 14.3 7.3c-16.6 7.9-41.3 14.5-62.1 4.1-1.8-0.9-3.6-1.9-5.4-3.2-2.3-1.5-4.5-3.2-6.8-5.1-19.9-16.4-40.3-46.4-42.7-61.5 12.4-6.5 41.5-5.8 64.8-0.3 3.2 0.8 6.2 1.6 9.1 2.5 4 1.3 7.6 2.8 10.9 4.4z"/>
                         <path class="st7" d="m75.4 54.8c18.9 12 28.4 35.6 31.6 52.6l-14.5-6.3-50.6-22 48.7 24.9 13.6 6.9c-14.1 6.8-34.5 13-53.3 8.2-2.3-1.5-4.5-3.2-6.8-5.1-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3 3.1 0.8 6.2 1.6 9.1 2.6z"/>
                         <path class="st8" d="m66.3 52.2c15.3 12.8 23.3 33.6 26.1 48.9l-50.6-22 48.8 24.9c-12.2 6-29.6 11.8-46.5 10-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3z"/>
                     </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" });
         } 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']"), {
             alignment: "bottom"
         });
@@ -334,7 +347,7 @@ export default class GlobalMenuWidget extends BasicWidget {
             if ($(e.target).children(".dropdown-menu").length === 1 || $(e.target).hasClass('dropdown-toggle')) {
                 e.stopPropagation();
             }
-        })        
+        })
 
         this.$widget.find(".global-menu-button-update-available").append(
             this.updateAvailableWidget.render()
diff --git a/src/public/app/widgets/buttons/update_available.js b/src/public/app/widgets/buttons/update_available.ts
similarity index 93%
rename from src/public/app/widgets/buttons/update_available.js
rename to src/public/app/widgets/buttons/update_available.ts
index 39db4cfd2..238c16fcf 100644
--- a/src/public/app/widgets/buttons/update_available.js
+++ b/src/public/app/widgets/buttons/update_available.ts
@@ -9,22 +9,22 @@ const TPL = `
             width: 21px !important;
             height: 21px !important;
             padding: 0 !important;
-            
+
             border-radius: var(--button-border-radius);
             transform: scale(0.9);
             border: none;
             opacity: 0.8;
-            
+
             display: flex;
             align-items: center;
             justify-content: center;
         }
-        
+
         .global-menu-button-wrapper:hover .global-menu-button-update-available-button {
             opacity: 1;
         }
     </style>
-    
+
     <span class="bx bx-sync global-menu-button-update-available-button" title="${t('update_available.update_available')}"></span>
 </div>
 `;
@@ -34,7 +34,7 @@ export default class UpdateAvailableWidget extends BasicWidget {
         this.$widget = $(TPL);
     }
 
-    updateVersionStatus(latestVersion) {
+    updateVersionStatus(latestVersion: string) {
         this.$widget.toggle(utils.isUpdateAvailable(latestVersion, glob.triliumVersion));
     }
 }