From bd890c49d5a8df25113d4e3f5b825e436405a13a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 1 Dec 2024 03:02:03 +0200
Subject: [PATCH] feat(electron): relocate pin to global menu

---
 src/public/app/widgets/buttons/global_menu.js |  22 ++++
 src/public/app/widgets/title_bar_buttons.js   | 112 ------------------
 2 files changed, 22 insertions(+), 112 deletions(-)
 delete mode 100644 src/public/app/widgets/title_bar_buttons.js

diff --git a/src/public/app/widgets/buttons/global_menu.js b/src/public/app/widgets/buttons/global_menu.js
index 9ee235a45..6607c0182 100644
--- a/src/public/app/widgets/buttons/global_menu.js
+++ b/src/public/app/widgets/buttons/global_menu.js
@@ -143,6 +143,11 @@ const TPL = `
             </div>
         </span>
 
+        <li class="dropdown-item toggle-pin">
+            <span class="bx bx-pin"></span>
+            ${t('title_bar_buttons.window-on-top')}
+        </li>
+
         <div class="dropdown-divider zoom-container-separator"></div>
 
         <li class="dropdown-item switch-to-mobile-version-button" data-trigger-command="switchToMobileVersion">
@@ -294,6 +299,23 @@ export default class GlobalMenuWidget extends BasicWidget {
 
         const isElectron = utils.isElectron();
 
+        this.$widget.find(".toggle-pin").toggle(isElectron);
+        if (isElectron) {
+            this.$widget.on("click", ".toggle-pin", (e) => {
+                const $el = $(e.target);
+                const remote = utils.dynamicRequire('@electron/remote');
+                const focusedWindow = remote.BrowserWindow.getFocusedWindow();
+                const isAlwaysOnTop = focusedWindow.isAlwaysOnTop()
+                if (isAlwaysOnTop) {
+                    focusedWindow.setAlwaysOnTop(false)
+                    $el.removeClass('active');
+                } else {
+                    focusedWindow.setAlwaysOnTop(true);
+                    $el.addClass('active');
+                }
+            });
+        }
+
         this.$widget.find(".logout-button").toggle(!isElectron);
         this.$widget.find(".logout-button-separator").toggle(!isElectron);
 
diff --git a/src/public/app/widgets/title_bar_buttons.js b/src/public/app/widgets/title_bar_buttons.js
deleted file mode 100644
index edb270f77..000000000
--- a/src/public/app/widgets/title_bar_buttons.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import BasicWidget from "./basic_widget.js";
-import options from "../services/options.js";
-import utils from "../services/utils.js";
-import { t } from "../services/i18n.js";
-
-const TPL = `
-<div class="title-bar-buttons">
-    <style>
-    .title-bar-buttons {
-        flex-shrink: 0;
-    }
-
-    .title-bar-buttons div button {
-        border: none !important;
-        border-radius: 0;
-        background: none !important;
-        font-size: 150%;
-        height: 40px;
-        width: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .title-bar-buttons div:hover button {
-        background-color: var(--accented-background-color) !important;
-    }
-
-    .title-bar-buttons div {
-        display: inline-block;
-        height: 40px;
-        width: 40px;
-    }
-    
-    .title-bar-buttons .top-btn.active{
-        background-color:var(--accented-background-color);
-    }
-
-    .title-bar-buttons .btn.focus, .title-bar-buttons .btn:focus {
-        box-shadow: none;
-    }
-    </style>
-
-    <!-- divs act as a hitbox for the buttons, making them clickable on corners -->
-    <div class="top-btn" title="${t("title_bar_buttons.window-on-top")}"><button class="btn bx bx-pin"></button></div>
-    <div class="minimize-btn"><button class="btn bx bx-minus"></button></div>
-    <div class="maximize-btn"><button class="btn bx bx-checkbox"></button></div>
-    <div class="close-btn"><button class="btn bx bx-x"></button></div>
-</div>`;
-
-export default class TitleBarButtonsWidget extends BasicWidget {
-    doRender() {
-        if (!utils.isElectron() || options.is('nativeTitleBarVisible')) {
-            return this.$widget = $('<div>');
-        }
-
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        const $topBtn = this.$widget.find(".top-btn");
-        const $minimizeBtn = this.$widget.find(".minimize-btn");
-        const $maximizeBtn = this.$widget.find(".maximize-btn");
-        const $closeBtn = this.$widget.find(".close-btn");
-
-        // When the window is restarted, the window will not be reset when it is set to the top,
-        // so get the window status and set the icon background
-        setTimeout(() => {
-            const remote = utils.dynamicRequire('@electron/remote');
-            if (remote.BrowserWindow.getFocusedWindow()?.isAlwaysOnTop()) {
-                $topBtn.addClass('active');
-            }
-        }, 1000);
-
-        $topBtn.on('click', () => {
-            $topBtn.trigger('blur');
-            const remote = utils.dynamicRequire('@electron/remote');
-            const focusedWindow = remote.BrowserWindow.getFocusedWindow();
-            const isAlwaysOnTop = focusedWindow.isAlwaysOnTop()
-            if (isAlwaysOnTop) {
-                focusedWindow.setAlwaysOnTop(false)
-                $topBtn.removeClass('active');
-            } else {
-                focusedWindow.setAlwaysOnTop(true);
-                $topBtn.addClass('active');
-            }
-        });
-
-        $minimizeBtn.on('click', () => {
-            $minimizeBtn.trigger('blur');
-            const remote = utils.dynamicRequire('@electron/remote');
-            remote.BrowserWindow.getFocusedWindow().minimize();
-        });
-
-        $maximizeBtn.on('click', () => {
-            $maximizeBtn.trigger('blur');
-            const remote = utils.dynamicRequire('@electron/remote');
-            const focusedWindow = remote.BrowserWindow.getFocusedWindow();
-
-            if (focusedWindow.isMaximized()) {
-                focusedWindow.unmaximize();
-            } else {
-                focusedWindow.maximize();
-            }
-        });
-
-        $closeBtn.on('click', () => {
-            $closeBtn.trigger('blur');
-            const remote = utils.dynamicRequire('@electron/remote');
-            remote.BrowserWindow.getFocusedWindow().close();
-        });
-    }
-}