progress

modules/drawers/Background.qml

@@ -1,3 +0,0 @@
-import QtQuick
-import QtQuick.Shapes
-

modules/drawers/Backgrounds.qml

@@ -0,0 +1,9 @@
+import Quickshell
+import QtQuick
+import QtQuick.Shapes
+
+import "../notifications" as Notifications
+
+Rectangle {
+    required property Item bar
+}

modules/drawers/Border.qml

@@ -7,7 +7,7 @@ import "../../config"
 Item {
     id: root
 
-    required property Rectangle bar
+    required property Item bar
 
     anchors.fill: parent
 

modules/drawers/Drawers.qml

@@ -7,9 +7,11 @@ import QtQuick
 import QtQuick.Effects
 
 import "../bar"
+import "../volume"
 import "../notifications"
 
-// import "../../services"
+import "../../services"
+import "../../config"
 
 Variants {
     model: Quickshell.screens
@@ -35,13 +37,22 @@ Variants {
             // Clickthrough mask.
             // Clickable areas of the window are determined by the provided region.
             mask: Region {
+                // Start at the bottom left; right of the bar and on top of the border
                 x: bar.implicitWidth
-                y: 8
-                width: win.width - bar.implicitWidth
-                height: win.height - 8
+                y: Config.border.thickness
+
+                // Width is the window width - the bar's width - the border thickness
+                width: win.width - bar.implicitWidth - Config.border.thickness
+
+                // Height is window width - the border thickness x2 —top border and bottom border.
+                height: win.height - Config.border.thickness * 2
 
                 // Setting the intersection mode to Xor will invert the mask and make everything in the mask region not clickable and pass through clicks inside it through the window.
                 intersection: Intersection.Xor
+                Region {
+                    item: volume
+                    intersection: Intersection.Subtract
+                }
             }
 
             anchors {
@@ -60,6 +71,10 @@ Variants {
                 Border {
                     bar: bar
                 }
+
+                Backgrounds {
+                    bar: bar
+                }
             }
 
             MultiEffect {
@@ -73,45 +88,18 @@ Variants {
                 id: bar
                 screen: scope.modelData
             }
-            Item {
-                id: notifs
 
-                readonly property list<Notif> list: []
-                readonly property list<Notif> popups: list.filter(n => n.popup)
+            VolumeSlider {
+                id: volume
+                isInRightPanel: hover.isInRightPanel
+                screen: scope.modelData
+            }
 
-                NotificationServer {
-                    id: server
-
-                    keepOnReload: false
-
-                    onNotification: notif => {
-                        notif.tracked = true;
-                        console.log("Got notification: " + notif.body);
-
-                        root.list.push(notifComp.createObject(root, {
-                            popup: true,
-                            notification: notif,
-                            body: notif.body,
-                            appName: notif.appName
-                        }));
-                    }
-                }
-
-                Component {
-                    id: notifComp
-
-                    Notif {}
-                }
+            Hover {
+                id: hover
+                screen: scope.modelData
+                bar: bar
             }
         }
     }
-
-    component Notif: QtObject {
-        property bool popup
-        readonly property date time: new Date()
-
-        required property Notification notification
-        readonly property string body: notification.body
-        readonly property string appName: notification.appName
-    }
 }