try that out

components/StyledMenu.qml

@@ -1,28 +0,0 @@
-import qs.config
-import QtQuick
-import QtQuick.Controls
-
-Menu {
-    id: root
-
-    palette.window: Theme.palette.base100
-    palette.base: Theme.palette.base100
-
-    focus: true
-    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
-
-    enter: Transition {
-        NumberAnimation {
-            property: "opacity"
-            from: 0.0
-            to: 1.0
-        }
-    }
-    exit: Transition {
-        NumberAnimation {
-            property: "opacity"
-            from: 1.0
-            to: 0.0
-        }
-    }
-}

components/StyledMenuItem.qml

@@ -1,9 +0,0 @@
-import qs.config
-import QtQuick
-import QtQuick.Controls
-
-MenuItem {
-    palette.text: Theme.palette.basecontent
-    palette.highlight: Theme.palette.primary
-    palette.highlightedText: Theme.palette.primarycontent
-}

components/StyledMenuSeparator.qml

@@ -1,9 +0,0 @@
-import qs.config
-import QtQuick
-import QtQuick.Controls
-
-MenuSeparator {
-    palette.text: Theme.palette.basecontent
-    palette.highlight: Theme.palette.primary
-    palette.highlightedText: Theme.palette.primarycontent
-}

components/StyledPopupWindow.qml

@@ -6,9 +6,10 @@ import Quickshell.Hyprland
 PopupWindow {
     id: root
 
-    implicitWidth: background.implicitWidth
+    implicitWidth: contentItem.children.reduce((prev, child) => Math.max(prev, child.width), 0)
-    implicitHeight: background.implicitHeight
+    implicitHeight: contentItem.children.reduce((prev, child) => prev + child.height, 0)
     color: "transparent"
+    contentItem.focus: visible
 
     function open() {
         visible = true;
@@ -18,19 +19,19 @@ PopupWindow {
         visible = false;
     }
 
+    // WlrLayershell.layer: WlrLayer.Top
+    // WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
     HyprlandFocusGrab {
-        id: grab
+        active: root.visible
         windows: [root]
         onCleared: {
             root.close();
         }
-      }
+    }
 
     Rectangle {
         id: background
-        anchors.centerIn: root
+        anchors.fill: parent
-        implicitWidth: root.contentItem.children.reduce((prev, child) => Math.max(prev, child.width), 0)
-        implicitHeight: root.contentItem.children.reduce((prev, child) => prev + child.height, 0)
         color: Theme.palette.base200
         radius: 8
     }

modules/Shell.qml

@@ -4,8 +4,9 @@ import "launcher"
 import "pomodoro"
 import "powermenu"
 import "storybook"
-import Quickshell
 import QtQuick
+import Quickshell
+import Quickshell.Wayland
 
 Variants {
     model: Quickshell.screens
@@ -15,11 +16,73 @@ Variants {
 
         required property ShellScreen modelData
 
-        Bar {}
+        PanelWindow {
+            id: exclusionZone
+
+            anchors.top: true
+            anchors.left: true
+            anchors.right: true
+
+            implicitWidth: bar.width
+            implicitHeight: bar.height
+
+            color: "transparent"
+        }
+
+        PanelWindow {
+            id: topWindow
+
+            anchors.top: true
+            anchors.left: true
+            anchors.right: true
+            anchors.bottom: true
+
+            color: 'transparent'
+
+            WlrLayershell.exclusionMode: ExclusionMode.Ignore
+            WlrLayershell.layer: WlrLayer.Top
+
+            mask: Region {
+                width: topWindow.width
+                height: topWindow.height
+                intersection: Intersection.Xor
+                regions: regions.instances
+            }
+
+            Variants {
+                id: regions
+
+                model: panels.children
+
+                Region {
+                    required property Item modelData
+
+                    x: modelData.x
+                    y: modelData.y
+                    width: modelData.width
+                    height: modelData.height
+                    intersection: Intersection.Subtract
+                }
+            }
+
+            Item {
+                id: panels
+
+                anchors.fill: parent
+
+                Bar {
+                    id: bar
+                }
+            }
+        }
         Launcher {}
         Pomodoro {}
         PowerMenu {}
-        Storybook {}
+        Storybook {
+            anchor.window: topWindow
+            anchor.rect.x: topWindow.width / 2 - width / 2
+            anchor.rect.y: topWindow.height / 4
+        }
         Drawers {}
     }
 }

modules/bar/Bar.qml

@@ -3,55 +3,29 @@ import "components/bluetooth"
 import "components/hyprland"
 import "components/notifications"
 import "components/tray"
+import qs.components
 import qs.config
 import QtQuick
 import QtQuick.Layouts
-import Quickshell
-import Quickshell.Wayland
 
-PanelWindow {
+StyledWrapperRectangle {
-    id: parentWindow
+    id: root
 
-    anchors.top: true
+    anchors.left: parent.left
-    anchors.left: true
+    anchors.right: parent.right
-    anchors.right: true
+    anchors.top: parent.top
+    anchors.leftMargin: Dimensions.bar.horizontalMargins
+    anchors.rightMargin: Dimensions.bar.horizontalMargins
+    anchors.topMargin: Dimensions.bar.verticalMargins
+    anchors.bottomMargin: Dimensions.bar.verticalMargins
 
-    implicitHeight: Dimensions.bar.height
+    margin: 6
-    color: 'transparent'
 
-    WlrLayershell.layer: WlrLayer.Top
+    RowLayout {
-
-    Item {
-
-        anchors.fill: parent
-        anchors.leftMargin: Dimensions.bar.horizontalMargins
-        anchors.rightMargin: Dimensions.bar.horizontalMargins
-        anchors.topMargin: Dimensions.bar.verticalMargins
-        anchors.bottomMargin: Dimensions.bar.verticalMargins
-
-        Rectangle {
-            id: background
-            anchors.fill: parent
-            color: Theme.palette.base300
-            radius: Dimensions.radius
-
-            border {
-                color: Theme.palette.base100
-                width: Dimensions.bar.border
-                pixelAligned: true
-            }
-        }
 
         RowLayout {
             id: leftbar
 
-            anchors.left: parent.left
-            anchors.verticalCenter: parent.verticalCenter
-
-            anchors.leftMargin: Dimensions.bar.horizontalPadding
-            anchors.topMargin: Dimensions.bar.verticalPadding
-            anchors.bottomMargin: Dimensions.bar.verticalPadding
-
             spacing: Dimensions.bar.spacing
 
             SystemLogo {
@@ -66,11 +40,7 @@ PanelWindow {
         RowLayout {
             id: centerbar
 
-            anchors.horizontalCenter: parent.horizontalCenter
+            Layout.alignment: Qt.AlignHCenter
-            anchors.verticalCenter: parent.verticalCenter
-
-            anchors.topMargin: Dimensions.bar.verticalPadding
-            anchors.bottomMargin: Dimensions.bar.verticalPadding
 
             spacing: Dimensions.bar.spacing
 
@@ -80,12 +50,7 @@ PanelWindow {
         RowLayout {
             id: rightbar
 
-            anchors.right: parent.right
+            Layout.alignment: Qt.AlignRight
-            anchors.verticalCenter: parent.verticalCenter
-
-            anchors.rightMargin: Dimensions.bar.horizontalPadding
-            anchors.topMargin: Dimensions.bar.verticalPadding
-            anchors.bottomMargin: Dimensions.bar.verticalPadding
 
             spacing: Dimensions.bar.spacing
 

modules/pomodoro/Pomodoro.qml

@@ -55,10 +55,10 @@ StyledWindow {
                     id: circle
                     radius: 150
                     borderColor: Theme.palette.base100
-                    strokeColor: Pomodoro.state == "timer" ? Theme.palette.primary : Theme.palette.warning
+                    strokeColor: PomodoroService.state == "timer" ? Theme.palette.primary : Theme.palette.warning
                     strokeWidth: 12
                     fillColor: button.hovered ? Theme.palette.primary : "transparent"
-                    percentage: (Pomodoro.state == "timer" ? (Pomodoro.initialTime - Pomodoro.remainingTime) : Pomodoro.remainingTime) / Pomodoro.initialTime % 1
+                    percentage: (PomodoroService.state == "timer" ? (PomodoroService.initialTime - PomodoroService.remainingTime) : PomodoroService.remainingTime) / PomodoroService.initialTime % 1
                 }
 
                 StyledIconButton {
@@ -69,17 +69,17 @@ StyledWindow {
                     radius: 9999
 
                     focus: root.visible
-                    text: Pomodoro.running ? Icons.square : Icons.play
+                    text: PomodoroService.running ? Icons.square : Icons.play
                     font.pixelSize: 48
 
                     background: undefined
                     onClicked: {
-                        Pomodoro.toggle();
+                        PomodoroService.toggle();
                     }
 
                     Keys.onSpacePressed: event => {
                         event.accepted = true;
-                        Pomodoro.toggle();
+                        PomodoroService.toggle();
                     }
                     Keys.onEscapePressed: event => {
                         event.accepted = true;
@@ -87,7 +87,7 @@ StyledWindow {
                     }
                     Keys.onTabPressed: event => {
                         event.accepted = true;
-                        Pomodoro.reset();
+                        PomodoroService.reset();
                     }
                 }
             }
@@ -95,7 +95,7 @@ StyledWindow {
             StyledText {
                 Layout.alignment: Qt.AlignHCenter
                 text: {
-                    const date = new Date(Pomodoro.remainingTime);
+                    const date = new Date(PomodoroService.remainingTime);
                     return `${date.getMinutes().toString().padStart(2, "0")}:${(date.getSeconds() % 3600).toString().padStart(2, "0")}`;
                 }
                 font.pixelSize: 16
@@ -108,7 +108,7 @@ StyledWindow {
                 text: "Reset"
 
                 onClicked: {
-                    Pomodoro.reset();
+                    PomodoroService.reset();
                 }
             }
         }

modules/storybook/Storybook.qml

@@ -4,225 +4,173 @@ import qs.components
 import qs.config
 import qs.constants
 import qs.services
-import Quickshell.Hyprland
-import Quickshell.Wayland
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
-StyledWindow {
+StyledPopupWindow {
     id: root
-    name: "storybook"
 
     visible: Visibility.storybook
-    implicitWidth: rect.width
-    implicitHeight: rect.height
 
-    WlrLayershell.layer: WlrLayer.Top
+    GridLayout {
-    WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+        id: grid
 
-    HyprlandFocusGrab {
+        flow: GridLayout.TopToBottom
-        active: Visibility.storybook
+        columns: 2
-        windows: [root]
+        rows: 10
-        onCleared: {
+
-            Visibility.storybook = false;
+        StyledText {
+            Layout.columnSpan: grid.columns
+            Layout.alignment: Qt.AlignHCenter
+            text: "Components"
+            font.pixelSize: 24
+            font.bold: true
+            font.underline: true
+            bottomPadding: 24
         }
-    }
-
-    StyledWrapperRectangle {
-        id: rect
-
-        margin: 48
-
-        GridLayout {
-            id: grid
-
-            flow: GridLayout.TopToBottom
-            columns: 2
-            rows: 10
 
+        ColumnLayout {
             StyledText {
-                Layout.columnSpan: grid.columns
+                text: "Icon Button"
-                Layout.alignment: Qt.AlignHCenter
+                font.pixelSize: 18
-                text: "Components"
+            }
-                font.pixelSize: 24
+            StyledIconButton {
-                font.bold: true
+                text: Icons.square
-                font.underline: true
+            }
-                bottomPadding: 24
+        }
+
+        ColumnLayout {
+            StyledText {
+                text: "Switch"
+                font.pixelSize: 18
             }
 
-            ColumnLayout {
+            StyledSwitch {
-                StyledText {
+                text: "Enable"
-                    text: "Icon Button"
+            }
-                    font.pixelSize: 18
+        }
-                }
+
-                StyledIconButton {
+        ColumnLayout {
-                    text: Icons.square
+            StyledText {
+                text: "ToolTip"
+                font.pixelSize: 18
+            }
+            Button {
+                id: toolTipButton
+                text: "Hello world!"
+                StyledToolTip {
+                    visible: toolTipButton.hovered
+                    text: qsTr("Save the active project")
                 }
             }
+        }
 
-            ColumnLayout {
+        ColumnLayout {
-                StyledText {
+            StyledText {
-                    text: "Switch"
+                text: "Slider"
-                    font.pixelSize: 18
+                font.pixelSize: 18
-                }
+            }
+            StyledSlider {
+                id: slider
+                from: 0
+                to: 100
+                value: 50
+            }
+        }
 
-                StyledSwitch {
+        ColumnLayout {
-                    text: "Enable"
+            StyledText {
+                text: "ProgressBar"
+                font.pixelSize: 18
+            }
+            StyledProgressBar {
+                id: progressBar
+                indeterminate: true
+                implicitHeight: 10
+                from: 0
+                to: 100
+                value: 50
+            }
+        }
+
+        ColumnLayout {
+            StyledText {
+                text: "ListView"
+                font.pixelSize: 18
+            }
+            StyledWrapperRectangle {
+                border.color: Theme.palette.base100
+                border.width: 2
+                StyledListView {
+                    implicitWidth: 200
+                    implicitHeight: 100
+                    model: 10
+                    delegate: StyledText {
+                        text: "Hello world!"
+                    }
                 }
             }
+        }
 
-            ColumnLayout {
+        ColumnLayout {
-                StyledText {
+            StyledText {
-                    text: "ToolTip"
+                text: "Mpris Player Selector"
-                    font.pixelSize: 18
+                font.pixelSize: 18
+            }
+            MprisPlayerSelector {}
+        }
+
+        ColumnLayout {
+            StyledText {
+                text: "Mpris Controller"
+                font.pixelSize: 18
+            }
+            MprisController {
+                player: Mpris.active ?? null
+            }
+        }
+
+        ColumnLayout {
+            StyledText {
+                text: "Drawer"
+                font.pixelSize: 18
+            }
+            RowLayout {
+                Button {
+                    text: "Top"
+                    onClicked: {
+                        drawer.x = root.width / 2 - drawer.width / 2;
+                        drawer.y = 0;
+                        drawer.edge = Qt.TopEdge;
+                        drawer.open();
+                    }
                 }
                 Button {
-                    id: toolTipButton
+                    text: "Left"
-                    text: "Hello world!"
+                    onClicked: {
-                    StyledToolTip {
+                        drawer.y = root.height / 2 - drawer.height / 2;
-                        visible: toolTipButton.hovered
+                        drawer.x = 0;
-                        text: qsTr("Save the active project")
+                        drawer.edge = Qt.LeftEdge;
+                        drawer.open();
                     }
                 }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Slider"
-                    font.pixelSize: 18
-                }
-                StyledSlider {
-                    id: slider
-                    from: 0
-                    to: 100
-                    value: 50
-                }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "ProgressBar"
-                    font.pixelSize: 18
-                }
-                StyledProgressBar {
-                    id: progressBar
-                    indeterminate: true
-                    implicitHeight: 10
-                    from: 0
-                    to: 100
-                    value: 50
-                }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "ListView"
-                    font.pixelSize: 18
-                }
-                StyledWrapperRectangle {
-                    border.color: Theme.palette.base100
-                    border.width: 2
-                    StyledListView {
-                        implicitWidth: 200
-                        implicitHeight: 100
-                        model: 10
-                        delegate: StyledText {
-                            text: "Hello world!"
-                        }
-                    }
-                }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Mpris Player Selector"
-                    font.pixelSize: 18
-                }
-                MprisPlayerSelector {}
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Mpris Controller"
-                    font.pixelSize: 18
-                }
-                MprisController {
-                    player: Mpris.active ?? null
-                }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Popup"
-                    font.pixelSize: 18
-                }
                 Button {
-                    id: fileButton
+                    text: "Right"
-                    text: "File"
+                    onClicked: {
-                    onPressed: menu.visible ? menu.close() : menu.open()
+                        drawer.y = root.height / 2 - drawer.height / 2;
-
+                        drawer.x = 0;
-                    StyledPopup {
+                        drawer.edge = Qt.RightEdge;
-                        id: menu
+                        drawer.open();
-
-                        anchor.item: fileButton
-
-                        Column {
-                            StyledButton {
-                                text: "New..."
-                            }
-                            StyledButton {
-                                text: "Open..."
-                            }
-                            StyledText {
-                                text: "Close"
-                            }
-                        }
                     }
                 }
-            }
+                Button {
-
+                    text: "Bottom"
-            ColumnLayout {
+                    onClicked: {
-                StyledText {
+                        drawer.x = root.width / 2 - drawer.width / 2;
-                    text: "Drawer"
+                        drawer.y = 0;
-                    font.pixelSize: 18
+                        drawer.edge = Qt.BottomEdge;
-                }
+                        drawer.open();
-                RowLayout {
-                    Button {
-                        text: "Top"
-                        onClicked: {
-                            drawer.x = root.width / 2 - drawer.width / 2;
-                            drawer.y = 0;
-                            drawer.edge = Qt.TopEdge;
-                            drawer.open();
-                        }
-                    }
-                    Button {
-                        text: "Left"
-                        onClicked: {
-                            drawer.y = root.height / 2 - drawer.height / 2;
-                            drawer.x = 0;
-                            drawer.edge = Qt.LeftEdge;
-                            drawer.open();
-                        }
-                    }
-                    Button {
-                        text: "Right"
-                        onClicked: {
-                            drawer.y = root.height / 2 - drawer.height / 2;
-                            drawer.x = 0;
-                            drawer.edge = Qt.RightEdge;
-                            drawer.open();
-                        }
-                    }
-                    Button {
-                        text: "Bottom"
-                        onClicked: {
-                            drawer.x = root.width / 2 - drawer.width / 2;
-                            drawer.y = 0;
-                            drawer.edge = Qt.BottomEdge;
-                            drawer.open();
-                        }
                     }
                 }
             }