feat(ui): show HUD overlay with zoom percentage on zoom in/out

Add NotificationUI.showHUD() for centered, macOS-style HUD notifications
with icon and label. Used by zoom commands to display a magnifying glass
icon with the current zoom percentage that auto-dismisses after 1 second.

Author: abose

src/styles/brackets.less

@@ -3409,6 +3409,41 @@ label input {
     opacity: 1;
 }
 
+/* HUD overlay: centered macOS-style notification (zoom, volume, etc.) */
+.hud-overlay {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.9);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 140px;
+    height: 120px;
+    border-radius: 16px;
+    background: rgba(30, 30, 30, 0.85);
+    color: #e0e0e0;
+    z-index: 10000;
+    opacity: 0;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+    pointer-events: none;
+    user-select: none;
+    i {
+        font-size: 40px;
+        margin-bottom: 8px;
+    }
+    .hud-label {
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: 0.5px;
+    }
+}
+.hud-overlay.visible {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+}
+
 .inline-toast kbd {
     display: inline-block;
     padding: 1px 5px;

src/view/ViewCommandHandlers.js

@@ -49,7 +49,8 @@ define(function (require, exports, module) {
         KeyBindingManager   = require("command/KeyBindingManager"),
         WorkspaceManager    = require("view/WorkspaceManager"),
         _                   = require("thirdparty/lodash"),
-        FontRuleTemplate    = require("text!view/fontrules/font-based-rules.less");
+        FontRuleTemplate    = require("text!view/fontrules/font-based-rules.less"),
+        NotificationUI      = require("widgets/NotificationUI");
 
     var prefs = PreferencesManager.getExtensionPrefs("fonts");
 
@@ -370,14 +371,26 @@ define(function (require, exports, module) {
         }
     }
 
+    function _showZoomHUD(zoomFactor, zoomingIn) {
+        const pct = Math.round(zoomFactor * 100);
+        const icon = zoomingIn
+            ? "fa-solid fa-magnifying-glass-plus"
+            : "fa-solid fa-magnifying-glass-minus";
+        NotificationUI.showHUD(icon, pct + "%", {
+            autoCloseTimeS: 1
+        });
+    }
+
     function _handleZoomIn(event) {
         if(!Phoenix.isNativeApp) {
             return _handleBrowserZoom(event);
         }
         const currentZoom = prefs.get(PREF_DESKTOP_ZOOM_SCALE);
         if(currentZoom < MAX_ZOOM_SCALE){
-            prefs.set(PREF_DESKTOP_ZOOM_SCALE, currentZoom + 0.1);
-            PhStore.setItem(PhStore._PHSTORE_BOOT_DESKTOP_ZOOM_SCALE_KEY, currentZoom + 0.1);
+            const newZoom = currentZoom + 0.1;
+            prefs.set(PREF_DESKTOP_ZOOM_SCALE, newZoom);
+            PhStore.setItem(PhStore._PHSTORE_BOOT_DESKTOP_ZOOM_SCALE_KEY, newZoom);
+            _showZoomHUD(newZoom, true);
         }
     }
 
@@ -387,8 +400,10 @@ define(function (require, exports, module) {
         }
         const currentZoom = prefs.get(PREF_DESKTOP_ZOOM_SCALE);
         if(currentZoom > MIN_ZOOM_SCALE){
-            prefs.set(PREF_DESKTOP_ZOOM_SCALE, currentZoom - 0.1);
-            PhStore.setItem(PhStore._PHSTORE_BOOT_DESKTOP_ZOOM_SCALE_KEY, currentZoom - 0.1);
+            const newZoom = currentZoom - 0.1;
+            prefs.set(PREF_DESKTOP_ZOOM_SCALE, newZoom);
+            PhStore.setItem(PhStore._PHSTORE_BOOT_DESKTOP_ZOOM_SCALE_KEY, newZoom);
+            _showZoomHUD(newZoom, false);
         }
     }
 

src/widgets/NotificationUI.js

@@ -480,9 +480,84 @@ define(function (require, exports, module) {
         return notification;
     }
 
+    let _activeHUD = null;
+
+    /**
+     * Shows a large, centered HUD overlay (like macOS volume/brightness indicator) with an icon and label.
+     * The HUD fades in/out and auto-dismisses. Only one HUD is shown at a time — calling this while a
+     * previous HUD is visible replaces it instantly.
+     *
+     * ```js
+     * NotificationUI.showHUD("fa-solid fa-magnifying-glass-plus", "110%");
+     * ```
+     *
+     * @param {string} iconClass Font Awesome class string for the icon (e.g. "fa-solid fa-magnifying-glass-plus").
+     * @param {string} label Text to display below the icon (e.g. "110%").
+     * @param {Object} [options] optional, supported options:
+     *   * `autoCloseTimeS` - Time in seconds after which the HUD auto-closes. Default is 1.
+     * @return {Notification} Object with a done handler that resolves when the HUD closes.
+     * @type {function}
+     */
+    function showHUD(iconClass, label, options = {}) {
+        const autoCloseTimeS = options.autoCloseTimeS !== undefined ? options.autoCloseTimeS : 1;
+
+        // Close any existing HUD immediately
+        if (_activeHUD && _activeHUD.$notification) {
+            _activeHUD.$notification.remove();
+            _activeHUD._result.resolve(CLOSE_REASON.TIMEOUT);
+            _activeHUD.$notification = null;
+        }
+
+        const $hud = $('<div class="hud-overlay">' +
+            '<i class="' + iconClass + '"></i>' +
+            '<div class="hud-label">' + label + '</div>' +
+            '</div>');
+        $("body").append($hud);
+
+        const notification = new Notification($hud, "hud");
+        _activeHUD = notification;
+
+        // Fade in on next frame
+        requestAnimationFrame(function () {
+            $hud.addClass("visible");
+        });
+
+        function closeHUD(reason) {
+            if (!notification.$notification) {
+                return;
+            }
+            notification.$notification = null;
+            _activeHUD = null;
+            $hud.removeClass("visible");
+            function cleanup() {
+                $hud.remove();
+                notification._result.resolve(reason);
+            }
+            $hud.one("transitionend transitioncancel", cleanup);
+            // Safety fallback
+            setTimeout(cleanup, 600);
+        }
+
+        notification.close = function (closeType) {
+            closeHUD(closeType || CLOSE_REASON.CLICK_DISMISS);
+            return this;
+        };
+
+        if (autoCloseTimeS) {
+            setTimeout(function () {
+                if (notification.$notification) {
+                    notification.close(CLOSE_REASON.TIMEOUT);
+                }
+            }, autoCloseTimeS * 1000);
+        }
+
+        return notification;
+    }
+
     exports.createFromTemplate = createFromTemplate;
     exports.createToastFromTemplate = createToastFromTemplate;
     exports.showToastOn = showToastOn;
+    exports.showHUD = showHUD;
     exports.CLOSE_REASON = CLOSE_REASON;
     exports.NOTIFICATION_STYLES_CSS_CLASS = NOTIFICATION_STYLES_CSS_CLASS;
 });