simplify StyledPopupWindow

components/StyledLayoutSeparator.qml

@@ -1,12 +0,0 @@
-import qs.config
-import QtQuick
-import QtQuick.Layouts
-
-Rectangle {
-    color: Styling.theme.basecontent
-    opacity: 0.33
-    Layout.fillHeight: true
-    Layout.margins: 2
-    implicitWidth: 0.5
-    radius: 9999
-}

components/StyledPopupWindow.qml

@@ -1,102 +1,92 @@
-import qs.services
+import qs.config
 import QtQuick
 import Quickshell
-import Quickshell.Widgets
+import Quickshell.Hyprland
 
 PopupWindow {
     id: root
-    property bool opened: false
+
-    property int animationDuration: 200
-    property alias margins: background.margin
-    property alias backgroundColor: background.color
-    property alias radius: background.radius
-    property alias state: background.state
     required property Component content
 
+    implicitWidth: background.width
+    implicitHeight: background.height
     color: "transparent"
 
+    HyprlandFocusGrab {
+        id: grab
+        active: root.visible
+        windows: [root]
+        onCleared: {
+            background.state = "closed";
+        }
+    }
+
     function toggle() {
-        Visibility.togglePopup(this);
+        background.state = background.state == "opened" ? "closed" : "opened";
     }
 
-    implicitWidth: background.width
+    StyledWrapperRectangle {
-    Behavior on implicitWidth {
+        id: background
-        NumberAnimation {
-            duration: 100
-        }
-    }
-    implicitHeight: background.height
-    Behavior on implicitHeight {
-        NumberAnimation {
-            duration: 100
-        }
-    }
 
-    Timer {
+        margin: 16
-        id: timer
+        focus: true
-        interval: 750
+        onFocusChanged: {
-        onTriggered: {
+            if (!focus) {
-            if (!root.visible) {
+                grab.active = false;
-                return;
             }
-            root.toggle();
         }
-    }
 
-    WrapperMouseArea {
+        Behavior on opacity {
-        hoverEnabled: true
+            NumberAnimation {
-        onExited: {
+                duration: Styling.animations.speed.normal
-            timer.start();
+            }
         }
-        onEntered: {
-            timer.stop();
-        }
-        WrapperRectangle {
-            id: background
 
-            opacity: 0
+        state: "closed"
-            Behavior on opacity {
+        states: [
-                NumberAnimation {
+            State {
-                    duration: root.animationDuration
+                name: "closed"
+                PropertyChanges {
+                    background {
+                        opacity: 0
+                    }
                 }
-            }
+            },
-
+            State {
-            states: State {
                 name: "opened"
-                when: root.opened
                 PropertyChanges {
                     background {
                         opacity: 1
                     }
                 }
             }
+        ]
 
-            transitions: [
+        transitions: [
-                Transition {
+            Transition {
-                    from: ""
+                from: "closed"
-                    to: "opened"
+                to: "opened"
-                    ScriptAction {
+                ScriptAction {
-                        script: root.visible = true
+                    script: root.visible = true
+                }
+            },
+            Transition {
+                from: "opened"
+                to: "closed"
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: root.animationDuration
                     }
-                },
+                    ScriptAction {
-                Transition {
+                        script: root.visible = false
-                    from: "opened"
-                    to: ""
-                    SequentialAnimation {
-                        PauseAnimation {
-                            duration: root.animationDuration
-                        }
-                        ScriptAction {
-                            script: root.visible = false
-                        }
                     }
                 }
-            ]
-
-            Loader {
-                active: root.visible
-                sourceComponent: root.content
             }
+        ]
+
+        Loader {
+            active: root.visible
+            sourceComponent: root.content
         }
     }
 }

modules/bar/Bar.qml

@@ -28,7 +28,7 @@ StyledWrapperRectangle {
         RowLayout {
             id: leftbar
 
-            spacing: Styling.layout.spacing.lg
+            spacing: Styling.layout.spacing.base
 
             SystemLogo {
                 implicitSize: 22
@@ -44,7 +44,7 @@ StyledWrapperRectangle {
 
             Layout.alignment: Qt.AlignHCenter
 
-            spacing: Styling.layout.spacing.lg
+            spacing: Styling.layout.spacing.base
 
             Mpris {}
         }
@@ -54,14 +54,18 @@ StyledWrapperRectangle {
 
             Layout.alignment: Qt.AlignRight
 
-            spacing: Styling.layout.spacing.lg
+            spacing: Styling.layout.spacing.base
+
+            Pywal {}
 
             Pipewire {}
 
-            StyledLayoutSeparator {}
+            Caffeine {}
 
             Network {}
 
+            Bluetooth {}
+
             Storage {}
 
             Memory {}
@@ -70,20 +74,10 @@ StyledWrapperRectangle {
 
             Gpu {}
 
-            StyledLayoutSeparator {}
+            Power {}
-
-            Pywal {}
-
-            Caffeine {}
-
-            Bluetooth {}
-
-            StyledLayoutSeparator {}
 
             Clock {}
 
-            Power {}
-
             Notifications {}
         }
     }

modules/bar/components/Caffeine.qml

@@ -6,7 +6,7 @@ StyledIconButton {
     id: root
 
     border.width: 2
-    border.color: Caffeine.enabled ? Styling.theme.secondary : root.hovered ? Styling.theme.primary : Styling.theme.base200
+    border.color: Caffeine.enabled ? Styling.theme.secondary : root.hovered ? Styling.theme.primary : Styling.theme.base300
     text: Styling.lucide.icons.coffee
 
     onClicked: {

modules/bar/components/Clock.qml

@@ -1,10 +1,12 @@
 import qs.components
 import Quickshell
 
-StyledText {
+StyledRectangle {
-    text: ` ${Qt.formatDateTime(clock.date, "hh:mm:ss AP")}`
+    StyledText {
-    SystemClock {
+        text: ` ${Qt.formatDateTime(clock.date, "hh:mm:ss AP")}`
-        id: clock
+        SystemClock {
-        precision: SystemClock.Seconds
+            id: clock
+            precision: SystemClock.Seconds
+        }
     }
 }

modules/bar/components/Memory.qml

@@ -5,17 +5,20 @@ import qs.utils
 import QtQuick
 import QtQuick.Layouts
 
-RowLayout {
+StyledRectangle {
 
-    Ref {
+    RowLayout {
-        service: SystemInfo
-    }
 
-    LucideIcon {
+        Ref {
-        text: Styling.lucide.icons.memoryStick
+            service: SystemInfo
-    }
+        }
 
-    StyledText {
+        LucideIcon {
-        text: ` ${(SystemInfo.memPerc * 100).toFixed()}%`
+            text: Styling.lucide.icons.memoryStick
+        }
+
+        StyledText {
+            text: ` ${(SystemInfo.memPerc * 100).toFixed()}%`
+        }
     }
 }

modules/bar/components/Network.qml

@@ -5,48 +5,51 @@ import qs.utils
 import QtQuick
 import QtQuick.Layouts
 
-RowLayout {
+StyledRectangle {
 
-    Ref {
+    RowLayout {
-        service: NetworkService
-    }
 
-    LucideIcon {
+        Ref {
-        id: icon
+            service: NetworkService
-        text: Styling.lucide.icons.wifiOff
+        }
-        states: [
+
-            State {
+        LucideIcon {
-                name: "high"
+            id: icon
-                when: NetworkService.active?.strength > 50
+            text: Styling.lucide.icons.wifiOff
-                PropertyChanges {
+            states: [
-                    icon {
+                State {
-                        text: Styling.lucide.icons.wifi
+                    name: "high"
+                    when: NetworkService.active?.strength > 50
+                    PropertyChanges {
+                        icon {
+                            text: Styling.lucide.icons.wifi
+                        }
+                    }
+                },
+                State {
+                    name: "medium"
+                    when: NetworkService.active?.strength > 25
+                    PropertyChanges {
+                        icon {
+                            text: Styling.lucide.icons.wifiHigh
+                        }
+                    }
+                },
+                State {
+                    name: "low"
+                    when: NetworkService.active?.strength > 0
+                    PropertyChanges {
+                        icon {
+                            text: Styling.lucide.icons.wifiLow
+                        }
                     }
                 }
-            },
+            ]
-            State {
+        }
-                name: "medium"
-                when: NetworkService.active?.strength > 25
-                PropertyChanges {
-                    icon {
-                        text: Styling.lucide.icons.wifiHigh
-                    }
-                }
-            },
-            State {
-                name: "low"
-                when: NetworkService.active?.strength > 0
-                PropertyChanges {
-                    icon {
-                        text: Styling.lucide.icons.wifiLow
-                    }
-                }
-            }
-        ]
-    }
 
-    StyledText {
+        StyledText {
-        id: text
+            id: text
-        text: ` ${(NetworkService.active?.strength ?? 0).toFixed()}%`
+            text: ` ${(NetworkService.active?.strength ?? 0).toFixed()}%`
+        }
     }
 }

modules/bar/components/Storage.qml

@@ -5,19 +5,22 @@ import qs.utils
 import QtQuick
 import QtQuick.Layouts
 
-RowLayout {
+StyledRectangle {
 
-    Ref {
+    RowLayout {
-        service: SystemInfo
-    }
 
-    LucideIcon {
+        Ref {
-        text: Styling.lucide.icons.hardDrive
+            service: SystemInfo
-    }
+        }
 
-    StyledText {
+        LucideIcon {
-        id: text
+            text: Styling.lucide.icons.hardDrive
+        }
 
-        text: ` ${(SystemInfo.storagePerc * 100).toFixed()}%`
+        StyledText {
+            id: text
+
+            text: ` ${(SystemInfo.storagePerc * 100).toFixed()}%`
+        }
     }
 }

modules/bar/components/bluetooth/BluetoothMenu.qml

@@ -1,7 +1,6 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
-import qs.config
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
@@ -10,10 +9,6 @@ import Quickshell.Bluetooth
 StyledPopupWindow {
     id: root
 
-    backgroundColor: Styling.theme.base300
-    margins: 16
-    radius: 8
-
     content: ColumnLayout {
         spacing: 8
         StyledWrapperRectangle {

modules/bar/components/notifications/NotificationMenu.qml

@@ -9,10 +9,6 @@ import QtQuick.Layouts
 StyledPopupWindow {
     id: root
 
-    backgroundColor: Styling.theme.base300
-    margins: 16
-    radius: 8
-
     content: GridLayout {
 
         columns: 2

modules/bar/components/tray/menu/Menu.qml

@@ -9,10 +9,6 @@ import Quickshell
 StyledPopupWindow {
     id: window
 
-    backgroundColor: Styling.theme.base300
-    margins: 14
-    radius: 8
-
     property QsMenuOpener menuOpener
 
     content: ColumnLayout {

services/Visibility.qml

@@ -1,6 +1,5 @@
 pragma Singleton
 
-import qs.components
 import Quickshell
 
 Singleton {
@@ -9,15 +8,6 @@ Singleton {
     property alias pomodoro: properties.pomodoro
     property alias powermenu: properties.powermenu
     property alias storybook: properties.storybook
-    property StyledPopupWindow activePopup
-
-    function togglePopup(popup: StyledPopupWindow) {
-        if (activePopup && popup != activePopup) {
-            activePopup.state = "";
-        }
-        popup.state = popup.state == "opened" ? "" : "opened";
-        activePopup = popup;
-    }
 
     PersistentProperties {
         id: properties