4 files changed, 59 insertions, 2 deletions
diff --git a/modules/drawers/Backgrounds.qml b/modules/drawers/Backgrounds.qml
index b7e3d39..30f8c9f 100644
--- a/modules/drawers/Backgrounds.qml
+++ b/modules/drawers/Backgrounds.qml
@@ -6,6 +6,7 @@ import "root:/modules/session" as Session
 import "root:/modules/launcher" as Launcher
 import "root:/modules/dashboard" as Dashboard
 import "root:/modules/bar/popouts" as BarPopouts
+import "root:/modules/utilities" as Utilities
 import QtQuick
 import QtQuick.Shapes
 
@@ -63,4 +64,11 @@ Shape {
         startX: wrapper.x
         startY: wrapper.y - rounding * sideRounding
     }
+
+    Utilities.Background {
+        wrapper: panels.utilities
+
+        startX: root.width
+        startY: root.height
+    }
 }
diff --git a/modules/drawers/Drawers.qml b/modules/drawers/Drawers.qml
index 27088a4..72d8446 100644
--- a/modules/drawers/Drawers.qml
+++ b/modules/drawers/Drawers.qml
@@ -111,6 +111,7 @@ Variants {
                 property bool session
                 property bool launcher
                 property bool dashboard
+                property bool utilities
 
                 Component.onCompleted: Visibilities.screens[scope.modelData] = this
             }
diff --git a/modules/drawers/Interactions.qml b/modules/drawers/Interactions.qml
index 54cb24c..b3e717a 100644
--- a/modules/drawers/Interactions.qml
+++ b/modules/drawers/Interactions.qml
@@ -18,19 +18,28 @@ MouseArea {
     property point dragStart
     property bool dashboardShortcutActive
     property bool osdShortcutActive
+    property bool utilitiesShortcutActive
 
     function withinPanelHeight(panel: Item, x: real, y: real): bool {
         const panelY = Config.border.thickness + panel.y;
         return y >= panelY - Config.border.rounding && y <= panelY + panel.height + Config.border.rounding;
     }
 
+    function withinPanelWidth(panel: Item, x: real, y: real): bool {
+        const panelX = bar.implicitWidth + panel.x;
+        return x >= panelX - Config.border.rounding && x <= panelX + panel.width + Config.border.rounding;
+    }
+
     function inRightPanel(panel: Item, x: real, y: real): bool {
         return x > bar.implicitWidth + panel.x && withinPanelHeight(panel, x, y);
     }
 
     function inTopPanel(panel: Item, x: real, y: real): bool {
-        const panelX = bar.implicitWidth + panel.x;
-        return y < Config.border.thickness + panel.y + panel.height && x >= panelX - Config.border.rounding && x <= panelX + panel.width + Config.border.rounding;
+        return y < Config.border.thickness + panel.y + panel.height && withinPanelWidth(panel, x, y);
+    }
+
+    function inBottomPanel(panel: Item, x: real, y: real): bool {
+        return y > root.height - Config.border.thickness - panel.height - Config.border.rounding && withinPanelWidth(panel, x, y);
     }
 
     anchors.fill: parent
@@ -47,6 +56,9 @@ MouseArea {
             if (!dashboardShortcutActive) {
                 visibilities.dashboard = false;
             }
+            if (!utilitiesShortcutActive) {
+                visibilities.utilities = false;
+            }
             popouts.hasCurrent = false;
         }
     }
@@ -88,6 +100,17 @@ MouseArea {
             dashboardShortcutActive = false;
         }
 
+        // Show utilities on hover
+        const showUtilities = inBottomPanel(panels.utilities, x, y);
+
+        // Always update visibility based on hover if not in shortcut mode
+        if (!utilitiesShortcutActive) {
+            visibilities.utilities = showUtilities;
+        } else if (showUtilities) {
+            // If hovering over utilities area while in shortcut mode, transition to hover control
+            utilitiesShortcutActive = false;
+        }
+
         // Show popouts on hover
         const popout = panels.popouts;
         if (x < bar.implicitWidth + popout.width) {
@@ -110,6 +133,7 @@ MouseArea {
             if (!root.visibilities.launcher) {
                 root.dashboardShortcutActive = false;
                 root.osdShortcutActive = false;
+                root.utilitiesShortcutActive = false;
 
                 // Also hide dashboard and OSD if they're not being hovered
                 const inDashboardArea = root.inTopPanel(root.panels.dashboard, root.mouseX, root.mouseY);
@@ -150,6 +174,19 @@ MouseArea {
                 root.osdShortcutActive = false;
             }
         }
+
+        function onUtilitiesChanged() {
+            if (root.visibilities.utilities) {
+                // Utilities became visible, immediately check if this should be shortcut mode
+                const inUtilitiesArea = root.inBottomPanel(root.panels.utilities, root.mouseX, root.mouseY);
+                if (!inUtilitiesArea) {
+                    root.utilitiesShortcutActive = true;
+                }
+            } else {
+                // Utilities hidden, clear shortcut flag
+                root.utilitiesShortcutActive = false;
+            }
+        }
     }
 
     Osd.Interactions {
diff --git a/modules/drawers/Panels.qml b/modules/drawers/Panels.qml
index 909fc9f..b3fe82c 100644
--- a/modules/drawers/Panels.qml
+++ b/modules/drawers/Panels.qml
@@ -6,6 +6,7 @@ import "root:/modules/session" as Session
 import "root:/modules/launcher" as Launcher
 import "root:/modules/dashboard" as Dashboard
 import "root:/modules/bar/popouts" as BarPopouts
+import "root:/modules/utilities" as Utilities
 import Quickshell
 import QtQuick
 
@@ -22,6 +23,7 @@ Item {
     readonly property Launcher.Wrapper launcher: launcher
     readonly property Dashboard.Wrapper dashboard: dashboard
     readonly property BarPopouts.Wrapper popouts: popouts
+    readonly property Utilities.Wrapper utilities: utilities
 
     anchors.fill: parent
     anchors.margins: Config.border.thickness
@@ -93,4 +95,13 @@ Item {
             return off;
         }
     }
+
+    Utilities.Wrapper {
+        id: utilities
+
+        visibility: root.visibilities.utilities
+
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+    }
 }