usable

config/aurora/modules/Bar.qml

@@ -12,6 +12,8 @@ PanelWindow {
 
     property real radius: 10
 
+    onRadiusChanged: Hyprland.dispatch("exec hyprctl keyword decoration:rounding " + radius)
+
     anchors {
         top: true
         left: true
@@ -19,24 +21,20 @@ PanelWindow {
         bottom: true
     }
 
-    Dashboard {
-        id: dash
-
-        radius: root.radius
-    }
 
 
     Component.onCompleted: {
 
-        Hyprland.dispatch("exec hyprctl keyword monitor " + Hyprland.monitorFor(root.screen).name + ",addreserved," + (midFO.visible ? midFO.y + midFO.height : topEx) + "," + botEx + "," + leftEx + "," + rightEx) 
+        Hyprland.dispatch("exec hyprctl keyword monitor " + Hyprland.monitorFor(root.screen).name + ",addreserved," + topEx + "," + botEx + "," + leftEx + "," + rightEx) 
+        Hyprland.dispatch("exec hyprctl keyword decoration:rounding " + radius)
         
     }
 
-    property int topEx: topRect.height
+    property int topEx: topRect.reserve
-    property int botEx: botRect.height
+    property int botEx: botRect.reserve
 
-    property int leftEx: leftRect.width
+    property int leftEx: leftRect.reserve
-    property int rightEx: rightRect.width
+    property int rightEx: rightRect.reserve
 
 
     id: root
@@ -50,7 +48,7 @@ PanelWindow {
     mask: Region {
 
         Region {
-            item: topRect
+            item: topRect.topRectArea
         }
 
         Region {
@@ -58,57 +56,32 @@ PanelWindow {
         }
 
         Region {
-            item: midFO.visible ? midFO : topRect
+            item: topRect.midFO.visible ? topRect.midFO : leftRect
         }
 
         Region {
-            item: dash.visible ? dash : topRect
+            item: dash.visible ? dash : leftRect
         }
     }
 
-    WrapperMouseArea {
-        id: topRectArea
-        Rectangle {
-            id: topRect
-            color: Pywal.special.background
-            anchors.fill: parent
-        }
-        implicitHeight: 10
-        implicitWidth: parent.width
 
-        hoverEnabled: true
+    BarBottom {
-        onEntered: {
-            midFO.visible = true
-        }
-        //onEntered: midFO.visible = true
-    }
-
-    Rectangle {
         id: botRect
-        y: parent.height - height
-        color: Pywal.special.background
-        implicitHeight: 10
-        implicitWidth: parent.width
     }
 
-
     BarLeft {
         id: leftRect
+        window: root
     }
 
-
+    BarRight {
-    Rectangle {
         id: rightRect
-        x: parent.width - width
-        color: Pywal.special.background
-        implicitWidth: 10
-        implicitHeight: parent.height
     }
 
     Shape {
 
         x: leftRect.x + leftRect.width - 1
-        y: topRect.y + topRect.height - 1
+        y: topRect.cornerY
 
         ShapePath {
             strokeWidth: 4
@@ -116,12 +89,6 @@ PanelWindow {
             fillColor: Pywal.special.background
             startX: 0; startY: 0
 
-            onFillColorChanged: {
-                console.log(Pywal.special.background)
-                fillColor = Qt.binding(() => Pywal.special.background)
-                strokeColor = Qt.binding(() => Pywal.special.background)
-            }
-
             PathLine { relativeX: 0; relativeY: radius }
             PathArc {
                 radiusX: radius
@@ -135,7 +102,7 @@ PanelWindow {
     Shape {
 
         x: rightRect.x + 1
-        y: topRect.y + topRect.height - 1
+        y: topRect.cornerY
 
         ShapePath {
             strokeWidth: 4
@@ -199,12 +166,31 @@ PanelWindow {
     }
 
     BarTop {
-        id: midFO
+        id: topRect
-        x: root.screen.width / 2 - width / 2
+        x: leftRect.x + leftRect.width
-        y: topRect.y + topRect.height - 1
+        width: rightRect.x - x
+        //y: topRect.y + topRect.height - 1
         window: root
         radius: root.radius
-        onVisibleChanged: Hyprland.dispatch("exec hyprctl keyword monitor " + Hyprland.monitorFor(root.screen).name + ",addreserved," + (midFO.visible ? midFO.y + midFO.height : topEx) + "," + botEx + "," + leftEx + "," + rightEx) 
+
+        onShowDashChanged: dash.visible = showDash
     }
 
+    onTopExChanged: Hyprland.dispatch("exec hyprctl keyword monitor " + Hyprland.monitorFor(root.screen).name + ",addreserved," + topEx + "," + botEx + "," + leftEx + "," + rightEx) 
+    onBotExChanged: Hyprland.dispatch("exec hyprctl keyword monitor " + Hyprland.monitorFor(root.screen).name + ",addreserved," + topEx + "," + botEx + "," + leftEx + "," + rightEx) 
+    onRightExChanged: Hyprland.dispatch("exec hyprctl keyword monitor " + Hyprland.monitorFor(root.screen).name + ",addreserved," + topEx + "," + botEx + "," + leftEx + "," + rightEx) 
+    onLeftExChanged: Hyprland.dispatch("exec hyprctl keyword monitor " + Hyprland.monitorFor(root.screen).name + ",addreserved," + topEx + "," + botEx + "," + leftEx + "," + rightEx) 
+
+    Dashboard {
+        id: dash
+
+        x: root.screen.width / 2 - width / 2
+        y: topRect.reserve - 1
+
+        onVisibleChanged: topRect.showDash = visible
+        //onEntered: topRect.midFO.visible = true
+        onHoveredChanged: topRect.midFO.visible = !hovered
+
+        radius: root.radius
+    }   
 }

config/aurora/modules/BarBottom.qml

@@ -0,0 +1,19 @@
+import Quickshell // for PanelWindow
+import QtQuick // for Text
+import QtQuick.Shapes
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell.Io
+import Quickshell.Widgets
+import Quickshell.Wayland
+import Quickshell.Hyprland
+
+
+Rectangle {
+    property real reserve: height
+    id: botRect
+    y: parent.height - height
+    color: Pywal.special.background
+    implicitHeight: 10
+    implicitWidth: parent.width
+}

config/aurora/modules/BarLeft.qml

@@ -13,6 +13,10 @@ Rectangle {
 
     id: leftRect
 
+    property real reserve: width
+
+    required property QsWindow window
+
     implicitHeight: parent.height
 
     implicitWidth: 40
@@ -34,5 +38,25 @@ Rectangle {
         Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
     }
 
+    IdleInhibitor {
+        x: parent.width / 2 - width / 2
+        y: battery.y - height - 20
+        id: idleInhibitor
+    }
+
+    Battery {
+        id: battery
+        x: parent.width / 2 - width / 2
+        y: tray.y - height - 20
+    }
+
+    Tray {
+        id: tray
+        x: parent.width / 2 - width / 2
+        y: leftRect.y + leftRect.height - height - 100
+        window: leftRect.window
+        popupOffset: x + leftRect.width
+    }
+
 
 }

config/aurora/modules/BarRight.qml

@@ -0,0 +1,19 @@
+import Quickshell // for PanelWindow
+import QtQuick // for Text
+import QtQuick.Shapes
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell.Io
+import Quickshell.Widgets
+import Quickshell.Wayland
+import Quickshell.Hyprland
+
+
+Rectangle {
+    property real reserve: width
+    id: rightRect
+    x: parent.width - width
+    color: Pywal.special.background
+    implicitWidth: 10
+    implicitHeight: parent.height
+}

config/aurora/modules/BarTop.qml

@@ -8,61 +8,66 @@ import Quickshell.Widgets
 import Quickshell.Wayland
 import Quickshell.Hyprland
 
-VFlyout {
+ColumnLayout {
-        id: midFO
 
+    spacing: -1
+
+    id: root
+
+    WrapperMouseArea {
+        id: topRectArea
+        Rectangle {
+            id: topRect
             color: Pywal.special.background
+            anchors.fill: parent
+        }
+        implicitHeight: 10
+        implicitWidth: parent.width
 
-        visible: set
+        hoverEnabled: true
+        onEntered: {
+            root.showDash = true
+        }
+    }
 
-        property bool set: true
+    property bool showDash: false
+
+    required property real radius
+    
+    property real cornerY: topRectArea.height - 1
+    
+    //property real reserve: midFO.visible ? root.height : topRectArea.height
+    property real reserve: topRectArea.height
 
     property QsWindow window
 
+    property Item topRectArea: topRectArea
+    property Item midFO: midFO
+
+
+    VFlyout {
+        id: midFO
+
+        radius: root.radius
+
+        Layout.alignment: Qt.AlignHCenter
+
+        color: Pywal.special.background
+
+        visible: true
+
         item: mid
 
-        onExited: visible = false
+        onEntered: visible = false
 
         RowLayout {
             id: mid
 
-            Notifications {
-                id: notifications
-                window: midFO.window
-            }
-
-            Battery {
-                window: midFO.window
-                popupOffset: x + midFO.x
-            }
-
-            Tray {
-                window: midFO.window
-                popupOffset: x + midFO.x
-            }
-            
             Clock {
                 id: clock
             }
 
-            IdleInhibitor {
+        }
-                id: idleInhibitor
+    }
 }
 
-            Bluetooth {
-                window: midFO.window
-                popupOffset: x + midFO.x
-            }
-
-            Volume {
-                window: midFO.window
-                popupOffset: x + midFO.x
-            }
-
-            Power {
-                id: power
-                window: midFO.window
-                popupOffset: x + midFO.x
-            }
-        }
-    }

config/aurora/modules/Battery.qml

@@ -8,88 +8,27 @@ import Quickshell.Hyprland
 import Quickshell.Services.UPower
 
 ClippingWrapperRectangle {
-    radius: 5
+
-    width: 100; height: 30
+    radius: 3
-    color: "red"
+
-    Button {
+    color: Pywal.colors.color2
-        id: button
+
-        text: if(UPower.onBattery) {
+    implicitWidth: 30
-            "󰁹 " + Math.floor(UPower.displayDevice.percentage * 100) + "%"
+
-        } else {
+    implicitHeight: text.contentWidth + text.padding
-            "󰂄 " + Math.floor(UPower.displayDevice.percentage * 100) + "%"
+
-        }
+    Text {
-        font.pointSize: 12
+        id: text
-        implicitHeight: parent.height
+        text: UPower.displayDevice.percentage * 100 + "%"
-        //icon.color: "red"
+
-        //icon.source: "/nix/store/c4dcn4vl0v5njv4d587sazrad1xgyd9h-rose-pine-icon-theme-unstable-2022-09-01/share/icons/rose-pine/symbolic/devices/battery-symbolic.svg"
+        padding: 10
-        onClicked: {
+
-            menu.visible = true
+        horizontalAlignment: Text.AlignHCenter
-            grab.active = true
+        verticalAlignment: Text.AlignVCenter
-        }
+
-    }
+        font.pointSize: 14
-
+
-    required property var window
+        color: Pywal.special.foreground
-    required property real popupOffset
+        rotation: -90
-    id: root
-
-    PopupWindow {
-        
-        id: menu
-
-        anchor.window: window
-        anchor.rect.x: popupOffset
-        anchor.rect.y: 50
-        implicitWidth: 250
-        implicitHeight: 150
-        visible: false
-
-        color: "transparent"
-        
-        ClippingWrapperRectangle {
-            radius: 5
-
-            implicitHeight: parent.height - 20
-            implicitWidth: parent.width
-            
-            ColumnLayout {
-
-                spacing: 0
-
-                Button {
-                    Layout.topMargin: 5
-                    x: (parent.width - width) / 2
-                    implicitWidth: parent.width - 10
-                    implicitHeight: parent.height / 5 - parent.spacing
-
-                    text: 'performance'
-                    onClicked: PowerProfiles.profile = PowerProfile.Performance
-                    visible: PowerProfiles.hasPerformanceProfile
-                }
-                Button {
-                    Layout.topMargin: 5
-                    x: (parent.width - width) / 2
-                    implicitWidth: parent.width - 10
-                    implicitHeight: parent.height / 5 - parent.spacing
-
-                    text: 'balanced'
-                    onClicked: PowerProfiles.profile = PowerProfile.Balanced
-                }
-                Button {
-                    Layout.topMargin: 5
-                    x: (parent.width - width) / 2
-                    implicitWidth: parent.width - 10
-                    implicitHeight: parent.height / 5 - parent.spacing
-
-                    text: 'power saver'
-                    onClicked: PowerProfiles.profile = PowerProfile.PowerSaver
-                }
-            }
-        }
-
-        HyprlandFocusGrab {
-            id: grab
-            windows: [ menu ]
-            onCleared: menu.visible = false
-        }
     }
 }

config/aurora/modules/Bluetooth.qml

@@ -7,48 +7,11 @@ import Quickshell.Widgets
 import Quickshell.Hyprland
 import Quickshell.Bluetooth
 
-ClippingWrapperRectangle {
-    
-    
-    radius: 5
-    implicitWidth: 30; implicitHeight: 30
-    Button {
-        id: button
-        text: ""
-        font.pointSize: 16
-        
-        onClicked: {
-            menu.visible = true
-            grab.active = true
-        }
-        implicitHeight: parent.height
-    }
-
-    required property PanelWindow window
-    required property real popupOffset
-    id: root
-
-    PopupWindow {
-        
-        id: menu
-
-        anchor.window: window
-        anchor.rect.x: popupOffset - width
-        anchor.rect.y: 50
-        implicitWidth: 250
-        implicitHeight: 150
-        visible: false
-
-        color: "transparent"
-        
-        ClippingWrapperRectangle {
-            radius: 5
-
-            implicitHeight: parent.height - 20
-            implicitWidth: parent.width
-            
 ColumnLayout {
 
+    anchors.fill: parent
+    id: root
+
     spacing: 0
 
     ClippingWrapperRectangle {
@@ -57,20 +20,24 @@ ClippingWrapperRectangle {
         implicitHeight: 30
         Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
         Layout.margins: 5
-                    color: "#ff3333aa"
+        color: Pywal.colors.color11
 
         RowLayout {
             Text {
                 text: 'Bluetooth'
                 Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                 Layout.margins: 5
+                color: Pywal.colors.color0
             }
 
             Switch {
                 Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                 //Layout.margins: 5
                 checked: Bluetooth.defaultAdapter.enabled
-                            onClicked: Bluetooth.defaultAdapter.enabled = checked
+                onClicked: {
+                    Bluetooth.defaultAdapter.enabled = checked
+                    scroll.visible = checked
+                }
             }
         }
 
@@ -81,7 +48,7 @@ ClippingWrapperRectangle {
         Layout.margins: 5
 
         implicitWidth: parent.width - 4 * Layout.margins
-                    implicitHeight: menu.height / 2
+        implicitHeight: parent.height / 2
 
         id: scroll
 
@@ -96,9 +63,9 @@ ClippingWrapperRectangle {
 
                 ClippingWrapperRectangle {
                     radius: 5
-                                color: "#ff3333aa"
+                    color: Pywal.colors.color4
 
-                                implicitWidth: menu.width - 3 * scroll.x
+                    implicitWidth: root.width - 3 * scroll.x
                     implicitHeight: 40
 
                     Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
@@ -110,6 +77,7 @@ ClippingWrapperRectangle {
                             Layout.margins: 5
 
                             text: rep.model[index].name
+                            color: Pywal.colors.color0
                         }
 
                         Button {
@@ -130,12 +98,3 @@ ClippingWrapperRectangle {
     }
 
 }
-        }
-
-        HyprlandFocusGrab {
-            id: grab
-            windows: [ menu ]
-            onCleared: menu.visible = false
-        }
-    }
-}

config/aurora/modules/Clock.qml

@@ -11,7 +11,7 @@ WrapperMouseArea {
     ClippingWrapperRectangle {
         id: rect
         color: Pywal.colors.color12
-        radius: 5
+        radius: 3
         anchors.fill: parent
         Text {
             id: t

config/aurora/modules/Dashboard.qml

@@ -7,31 +7,239 @@ import Quickshell.Io
 import Quickshell.Widgets
 import Quickshell.Wayland
 import Quickshell.Hyprland
+import Quickshell.Services.Notifications
 
 Item {
 
-    x: parent.width / 2 - width / 2
-    y: 80
-
     implicitWidth: 700
-    implicitHeight: 400
+    implicitHeight: 450
 
     required property real radius
+    property bool hovered: false
 
     id: root
 
-    visible: true
+    visible: false
+
+    property int selected: 0
+
+
+    VFlyout {
+
+        visible: root.visible
+
+        color: Pywal.special.background
+        radius: root.radius
+
+        item: main
 
         WrapperMouseArea {
-        anchors.fill: parent
             ClippingRectangle {
-            anchors.fill: parent
+                //anchors.fill: parent
                 color: Pywal.special.background
+                id: main
 
                 radius: root.radius
+                implicitWidth: root.width
+                implicitHeight: root.height
+
+                Item {
+                    implicitWidth: root.width - 4 * lay.spacing
+                    implicitHeight: root.height - 4 * lay.spacing
+                    x: 2 * lay.spacing
+                    y: 2 * lay.spacing
+                    RowLayout {
+                        id: lay
+                        spacing: 2
+                        anchors.fill: parent
+
+                        ColumnLayout {
+                            id: tabs
+                            Layout.alignment: Qt.AlignTop
+                            Repeater {
+                                id: rep
+
+                                model: 9
+
+                                WrapperMouseArea {
+                                    ClippingRectangle {
+                                        //Layout.alignment: Qt.AlignTop
+                                        implicitWidth: 40
+                                        implicitHeight: 40
+                                        radius: root.radius
+                                        color: index == selected ? Pywal.colors.color13 : Pywal.colors.color4
+                                        //Launcher { anchors.centerIn: parent }
+                                        Text { 
+                                            font.pointSize: 14
+                                            text: switch(index) {
+                                                case 0:
+                                                return " ";
+                                                case 1:
+                                                return "󰍹 ";
+                                                case 2:
+                                                return "󰤨 ";
+                                                case 3:
+                                                return "󰂯";
+                                                case 4:
+                                                return " ";
+                                                case 5:
+                                                return " ";
+                                                case 6:
+                                                return "󰌳 ";
+                                                case 7:
+                                                return " ";
+                                                case 8:
+                                                return "󰁹";
+                                                default:
+                                                return "";
+                                            } 
+                                            anchors.centerIn: parent
+                                            color: Pywal.colors.color0
+                                        }
+                                    }
+                                    onEntered: child.color = Qt.binding(() => index == selected ? Pywal.colors.color13 : Pywal.colors.color12)
+                                    onExited: child.color = Qt.binding(() => index == selected ? Pywal.colors.color13 : Pywal.colors.color4)
+                                    onClicked: {
+                                        selected = index
+                                        child.color = Qt.binding(() => index == selected ? Pywal.colors.color13 : Pywal.colors.color4)
+                                    }
+                                    hoverEnabled: true
+                                }
+                            }
+                        }
+                        ClippingRectangle {
+                            id: content
+                            Layout.alignment: Qt.AlignHCenter
+                            implicitWidth: parent.width - tabs.width - 2 * parent.spacing - rTabs.width - 2 * parent.spacing
+                            implicitHeight: parent.height
+                            radius: root.radius
+                            color: Pywal.colors.color1
+
+                            NotificationServer {
+                                id: nserver
+                                persistenceSupported: true
+                                imageSupported: true
+                                actionsSupported: true
+                                bodyImagesSupported: true
+                                bodySupported: true
+                                bodyHyperlinksSupported: true
+                                inlineReplySupported: true
+                                actionIconsSupported: true
+
+                                onNotification: (n) => {
+                                    n.tracked = !n.transient
+                                }
+
+
+                            }
+                            Loader {
+                                anchors.fill: parent
+
+                                readonly property Component launcher: Launcher {}
+                                readonly property Component notifs: Notifications { server: nserver }
+
+                                readonly property Component bt: Bluetooth {}
+                                readonly property Component vol: Volume {}
+
+                                readonly property Component bat: PowerMode {}
+                                readonly property Component mon: Launcher {}
+
+                                readonly property Component net: Launcher {}
+                                readonly property Component mus: Launcher {}
+
+                                readonly property Component clk: Clock {}
+                                readonly property Component wal: Launcher {}
+
+                                sourceComponent: switch(selected) {
+                                    case 0:
+                                    return wal;
+                                    case 1:
+                                    return mon;
+                                    case 2:
+                                    return net;
+                                    case 3:
+                                    return bt;
+                                    case 4:
+                                    return vol;
+                                    case 5:
+                                    return notifs;
+                                    case 6:
+                                    return mus;
+                                    case 7:
+                                    return wal;
+                                    case 8:
+                                    return bat;
+                                    default:
+                                    return launcher;
+                                }
+                            }
+                        }
+
+                        ColumnLayout {
+                            id: rTabs
+                            Layout.alignment: Qt.AlignBottom
+                            Repeater {
+                                id: rRep
+
+                                model: 9
+
+                                WrapperMouseArea {
+                                    ClippingRectangle {
+                                        //Layout.alignment: Qt.AlignTop
+                                        implicitWidth: 40
+                                        implicitHeight: 40
+                                        radius: root.radius
+                                        color: index + 9 == selected ? Pywal.colors.color13 : Pywal.colors.color4
+                                        //Launcher { anchors.centerIn: parent }
+                                        Text { 
+                                            font.pointSize: 14
+                                            text: switch(index) {
+                                                case 0:
+                                                return " ";
+                                                case 1:
+                                                return " ";
+                                                case 2:
+                                                return " ";
+                                                case 3:
+                                                return "";
+                                                case 4:
+                                                return " ";
+                                                case 5:
+                                                return " ";
+                                                case 6:
+                                                return "󰊗 ";
+                                                case 7:
+                                                return " ";
+                                                case 8:
+                                                return " ";
+                                                default:
+                                                return "";
+                                            } 
+                                            anchors.centerIn: parent
+                                            color: Pywal.colors.color0
+                                        }
+                                    }
+                                    onEntered: child.color = Qt.binding(() => index + 9 == selected ? Pywal.colors.color13 : Pywal.colors.color12)
+                                    onExited: child.color = Qt.binding(() => index + 9 == selected ? Pywal.colors.color13 : Pywal.colors.color4)
+                                    onClicked: {
+                                        selected = index + 9
+                                        child.color = Qt.binding(() => index + 9 == selected ? Pywal.colors.color13 : Pywal.colors.color12)
+                                    }
+                                    hoverEnabled: true
+                                }
+                            }
+                        }
+
+                    }
+                }
             }
 
             hoverEnabled: true
-        onExited: root.visible = false
+            onEntered: hovered = true
+            onExited: {
+                root.visible = false
+                hovered = false
+            }
+        }
     }
 }

config/aurora/modules/IdleInhibitor.qml

@@ -9,12 +9,19 @@ ClippingWrapperRectangle {
     property real interval: 100
     id: root
 
-    radius: 5
+    radius: 3
+    color: Pywal.colors.color1
     implicitWidth: 30; height: 30
     Button {
         id: button
         text: "󰒳 "
         font.pointSize: 16
+
+        background: Rectangle {
+
+            color: Pywal.colors.color9
+        }
+
         Process {
             id: idlent
             running: true

config/aurora/modules/Launcher.qml

@@ -6,7 +6,7 @@ import Quickshell.Widgets
 
 WrapperMouseArea {
     ClippingWrapperRectangle {
-        radius: 5
+        radius: 3
         implicitWidth: 30; implicitHeight: 30
         Text {
             horizontalAlignment: Text.AlignHCenter

config/aurora/modules/Notif.qml

@@ -15,7 +15,7 @@ ClippingWrapperRectangle {
     implicitWidth: parent.width - 2 * Layout.margins
     implicitHeight: 100
 
-    color: Pywal.colors.color2
+    color: Pywal.colors.color4
 
     required property Notification src
 

config/aurora/modules/Notifications.qml

@@ -7,82 +7,22 @@ import Quickshell.Io
 import Quickshell.Widgets
 import Quickshell.Hyprland
 
-Item {
-    width: 50
-    height: 30
-
-    ClippingWrapperRectangle {
-        id: barbutton
-        radius: 5
-        anchors.fill: parent
-        Button {
-            id: button
-            text: "󰂚"
-            font.pointSize: 16
-            
-            onClicked: {
-                
-
-                menu.visible = true
-                grab.active = true
-            }
-            implicitHeight: parent.height
-        }
-    }
-
-    NotificationServer {
-        id: server
-        persistenceSupported: true
-        imageSupported: true
-        actionsSupported: true
-        bodyImagesSupported: true
-        bodySupported: true
-        bodyHyperlinksSupported: true
-        inlineReplySupported: true
-        actionIconsSupported: true
-
-        onNotification: (n) => {
-            n.tracked = !n.transient
-        }
-
-
-    }
-
-    required property PanelWindow window
-    id: root
-
-    PopupWindow {
-        
-        id: menu
-
-        anchor.window: window
-        anchor.rect.x: window.width - width
-        anchor.rect.y: 50
-        implicitWidth: 400
-        implicitHeight: 1080 - anchor.rect.y
-        visible: false
-
-        color: "transparent"
-        
-        ClippingWrapperRectangle {
-            radius: 5
-            
-            color: Pywal.special.background
-
-            implicitHeight: parent.height - 20
-            implicitWidth: parent.width
 
 ColumnLayout {
+    anchors.fill: parent
     id: lay
 
     spacing: 10
 
+    required property NotificationServer server
+    
+
     ClippingWrapperRectangle {
-                    color: Pywal.colors.color2
+        color: Pywal.colors.color11
         radius: 5
         Layout.margins: 5
         Layout.alignment: Qt.AlignVCenter | Qt.AlignTop
-                    implicitWidth: menu.width - 2 * Layout.margins
+        implicitWidth: lay.width - 2 * Layout.margins
 
         RowLayout {
             width: parent.width
@@ -110,6 +50,7 @@ Item {
     }
 
     ColumnLayout {
+        width: parent.width
         Layout.alignment: Qt.AlignVCenter | Qt.AlignTop
         Repeater {
             id: rep
@@ -122,22 +63,13 @@ Item {
             }
 
             onItemAdded: (idx, it) => {
-                            button.text = '󱅫 ' + rep.count
+                //button.text = '󱅫 ' + rep.count
             }
 
             onItemRemoved: (idx, it) => {
-                            button.text = (rep.count - 1) <= 0 ? "󰂚" : '󱅫 ' + (rep.count - 1)
+                //button.text = (rep.count - 1) <= 0 ? "󰂚" : '󱅫 ' + (rep.count - 1)
             }
         }
     }
 
 }
-        }
-
-        HyprlandFocusGrab {
-            id: grab
-            windows: [ menu ]
-            onCleared: menu.visible = false
-        }
-    }
-}

config/aurora/modules/Tray.qml

@@ -5,8 +5,8 @@ import Quickshell.Services.SystemTray
 import Quickshell.Widgets
 
 Item {
-    implicitWidth: 10 + rep.count * (2 * lay.spacing + 20)
+    implicitHeight: 10 + rep.count * (2 * lay.spacing + 20)
-    height: 30
+    width: 30
     visible: SystemTray.items.values.length != 0
 
     id: root
@@ -14,9 +14,10 @@ Item {
     required property real popupOffset
 
     ClippingWrapperRectangle {
-        radius: 5
+        radius: 3
         anchors.fill: parent
-        RowLayout {
+        color: Pywal.colors.color4
+        ColumnLayout {
             id: lay
             spacing: 4
             Repeater {
@@ -25,9 +26,12 @@ Item {
                 model: SystemTray.items
                 ClippingWrapperRectangle {
                     Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-                    radius: 10
+                    radius: 3
                     implicitWidth: 20
                     implicitHeight: 20
+
+                    color: Pywal.colors.color1
+
                     MouseArea {
                         anchors.fill: parent
                         
@@ -49,7 +53,7 @@ Item {
                             if(mouse.button == Qt.LeftButton) {
                                 SystemTray.items.values[index].activate()
                             } else if(mouse.button == Qt.RightButton) {
-                                SystemTray.items.values[index].display(root.window, popupOffset, 40)
+                                SystemTray.items.values[index].display(root.window, popupOffset, root.y - 100)
                             }
                         }
                     }

config/aurora/modules/Volume.qml

@@ -7,56 +7,45 @@ import Quickshell.Widgets
 import Quickshell.Hyprland
 import Quickshell.Services.Pipewire
 
-ClippingWrapperRectangle {
-    radius: 5
-    width: 100; height: 30
-    Button {
-        id: button
-        text: (Pipewire.defaultAudioSink?.audio?.muted ? "   " : "   ") + Math.floor(Pipewire.defaultAudioSink?.audio?.volume * 100) + "%"
-        font.pointSize: 12
-        implicitHeight: parent.height
 
-        PwObjectTracker {
-            objects: [ Pipewire.defaultAudioSink ]
-        }
-
-        onClicked: {
-            menu.visible = true
-            grab.active = true
-        }
-
-    }
-
-    required property var window
-    required property real popupOffset
-    id: root
-
-    PopupWindow {
-        
-        id: menu
-
-        anchor.window: window
-        anchor.rect.x: popupOffset
-        anchor.rect.y: 50
-        implicitWidth: 250
-        implicitHeight: 150
-        visible: false
-
-        color: "transparent"
-        
-        ClippingWrapperRectangle {
-            radius: 5
-
-            implicitHeight: parent.height - 20
-            implicitWidth: parent.width
 
 ScrollView {
+    anchors.fill: parent
     ColumnLayout {
+        anchors.fill: parent
 
         spacing: 0
 
+        
+        ClippingWrapperRectangle {
+            color: Pywal.colors.color11
+            radius: 5
+            Layout.margins: 5
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignTop
+            implicitWidth: parent.width - 2 * Layout.margins
+
+            RowLayout {
+                width: parent.width
                 Text {
-                        text: 'Output Devices'
+                    color: Pywal.colors.color0
+                    Layout.margins: 5
+                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+                    text: 'Output'
+                }
+
+                Slider {
+                    from: 0
+                    to: 2
+
+                    orientation: Qt.Horizontal
+
+                    implicitWidth: 500
+
+                    value: Pipewire.defaultAudioSink.audio.volume
+
+                    onValueChanged: Pipewire.defaultAudioSink.audio.volume = value
+                }
+            }
         }
 
         ColumnLayout {
@@ -69,13 +58,48 @@ ClippingWrapperRectangle {
 
                 Button {
                     text: outputs.model[index].nickname
-                                onClicked: Pipewire.preferredDefaultAudioSink = outputs.model[index]
+                    onClicked: {
+                        Pipewire.preferredDefaultAudioSink = outputs.model[index]
+                    }
+
+                    PwObjectTracker {
+                        objects: [ outputs.model[index] ]
+                    }
                 }
             }
         }
 
+        
+        ClippingWrapperRectangle {
+            color: Pywal.colors.color11
+            radius: 5
+            Layout.margins: 5
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignTop
+            implicitWidth: parent.width - 2 * Layout.margins
+
+            RowLayout {
+                width: parent.width
                 Text {
-                        text: 'Input Devices'
+                    color: Pywal.colors.color0
+                    Layout.margins: 5
+                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+                    text: 'Input'
+                }
+
+                Slider {
+                    from: 0
+                    to: 2
+
+                    visible: false
+                    orientation: Qt.Horizontal
+
+                    implicitWidth: 500
+
+                    value: Pipewire.defaultAudioSource.audio.volume
+
+                    onValueChanged: Pipewire.defaultAudioSource.audio.volume = value
+                }
+            }
         }
 
         ColumnLayout {
@@ -88,7 +112,9 @@ ClippingWrapperRectangle {
 
                 Button {
                     text: inputs.model[index].nickname
-                                onClicked: Pipewire.preferredDefaultAudioSource = inputs.model[index]
+                    onClicked: {
+                        Pipewire.preferredDefaultAudioSource = inputs.model[index]
+                    }
                 }
             }
         }
@@ -96,12 +122,3 @@ ClippingWrapperRectangle {
     }
 }
 
-        }
-
-        HyprlandFocusGrab {
-            id: grab
-            windows: [ menu ]
-            onCleared: menu.visible = false
-        }
-    }
-}