refactor: wip refactor on color scheme, make screenshots suck less, etc.

shell/bar/Bar.qml

@@ -62,7 +62,7 @@ Variants {
 
             // Right side of bar
             RowLayout {
-                spacing: 10
+                spacing: 5
                 Layout.fillWidth: true
                 Layout.fillHeight: true
                 Layout.alignment: Qt.AlignRight
@@ -81,10 +81,10 @@ Variants {
                 //     Layout.bottomMargin: 2
                 // }
 
-                // PowerMenu {
+                PowerMenu {
-                //     bar: root
+                    bar: root
-                //     Layout.fillHeight: true
+                    Layout.fillHeight: true
-                // }
+                }
 
                 // Widgets.Separator {
                 //     Layout.leftMargin: 5

shell/bar/power/PowerMenu.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
+import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
 import Quickshell.Widgets
 import Quickshell.Services.UPower
@@ -38,7 +39,7 @@ StyledMouseArea {
 
         Rectangle {
             id: batteryBackground
-            color: Qt.color(ShellSettings.colors["surface"]).lighter(4)
+            color: Qt.color(ShellSettings.colors.inactive_translucent).lighter(4)
             opacity: 0.75
             anchors {
                 fill: parent
@@ -49,7 +50,7 @@ StyledMouseArea {
         Rectangle {
             id: batteryPercentage
             width: (parent.width - 4) * UPower.displayDevice.percentage
-            color: ShellSettings.colors["inverse_surface"]
+            color: ShellSettings.colors.surface
 
             anchors {
                 left: batteryBackground.left
@@ -64,9 +65,22 @@ StyledMouseArea {
         popup: root.bar.popup
         show: root.showMenu
         onClosed: root.showMenu = false
-        centered: true
 
-        implicitWidth: 250 
+        implicitWidth: 300
-        implicitHeight: 250 
+        implicitHeight: 50
+
+        ColumnLayout {
+            anchors {
+                fill: parent
+                margins: 8
+            }
+
+            OptionSlider {
+                Layout.fillWidth: true
+                values: ["Power Save", "Balanced", "Performance"]
+                index: PowerProfiles.profile
+                onIndexChanged: PowerProfiles.profile = this.index
+            }
+        }
     }
 }

shell/bar/systray/SysTray.qml

@@ -10,7 +10,7 @@ import ".."
 
 // TODO:
 // 1. Get rid of leftItem/rightItem properties on menu
-// 2. Load menu properly, right now its pretty buggy
+// 2. Animate height of subTrayMenu's on expand 
 // 3. Fix bug that causes close on update (nm-applet wifi networks updating)
 
 RowLayout {

shell/screencapture/Controller.qml

@@ -5,7 +5,6 @@ import Quickshell
 import Quickshell.Io
 import Quickshell.Wayland
 import QtQuick
-import ".."
 
 Singleton {
     id: root

shell/screencapture/Screenshot.qml

@@ -1,3 +0,0 @@
-import QtQuick
-
-Image {}

shell/screencapture/SelectionRectangle.qml

@@ -1,54 +1,106 @@
 import QtQuick
-import ".."
+import qs
 
-Canvas {
+Item {
     id: root
+    width: 800
+    height: 600
 
     property color overlayColor: "#80000000"
-    property color outlineColor: ShellSettings.colors["primary"]
+    property rect selectionRect: Qt.rect(0, 0, 0, 0)
-    property rect selectionRect
+    property point startPosition: Qt.point(0, 0)
-    property point startPosition
     signal areaSelected(rect selection)
  
-    onPaint: {
+    // only send signal when selection rectangle has finished 
-        var ctx = getContext("2d");
+    onVisibleChanged: areaSelected(selectionRect)
-        ctx.clearRect(0, 0, width, height);
-
-        // grey overlay
-        ctx.fillStyle = overlayColor;
-        ctx.fillRect(0, 0, width, height);
-
-        // cut out the selection rectangle
-        ctx.globalCompositeOperation = "destination-out";
-        ctx.fillRect(selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height);
-        ctx.globalCompositeOperation = "source-over";
-        ctx.strokeStyle = outlineColor; 
-        ctx.lineWidth = 2; 
-        ctx.strokeRect(selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height);
-    }
 
     MouseArea {
+        id: selectionArea
         anchors.fill: parent
+        hoverEnabled: true
+
+        onReleased: root.visible = false
 
         onPressed: mouse => {
             root.startPosition = Qt.point(mouse.x, mouse.y);
+            rectangle.x = mouse.x;
+            rectangle.y = mouse.y;
+            rectangle.width = 0;
+            rectangle.height = 0;
+            root.selectionRect = Qt.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
         }
 
         onPositionChanged: mouse => {
             if (pressed) {
-                var x = Math.min(root.startPosition.x, mouse.x);
+                rectangle.x = Math.min(root.startPosition.x, mouse.x);
-                var y = Math.min(root.startPosition.y, mouse.y);
+                rectangle.y = Math.min(root.startPosition.y, mouse.y);
-                var width = Math.abs(mouse.x - root.startPosition.x);
+                rectangle.width = Math.abs(mouse.x - root.startPosition.x);
-                var height = Math.abs(mouse.y - root.startPosition.y);
+                rectangle.height = Math.abs(mouse.y - root.startPosition.y);
 
-                root.selectionRect = Qt.rect(x, y, width, height);
+                root.selectionRect = Qt.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
-                root.requestPaint();
+            }
         }
     }
 
-        onReleased: mouse => {
+    Rectangle {
-            root.visible = false;
+        id: overlayStart
-            root.areaSelected(root.selectionRect);
+        color: root.overlayColor
-        }
+        visible: !selectionArea.containsPress
+        anchors.fill: parent
+    }
+
+    Rectangle {
+        id: overlayTop
+        color: root.overlayColor
+        x: 0
+        y: 0
+        width: parent.width
+        height: Math.max(0, rectangle.y)
+        visible: selectionArea.containsPress
+    }
+
+    Rectangle {
+        id: overlayLeft
+        color: root.overlayColor
+        x: 0
+        y: rectangle.y
+        width: Math.max(0, rectangle.x)
+        height: Math.max(0, rectangle.height)
+        visible: selectionArea.containsPress
+    }
+
+    Rectangle {
+        id: overlayRight
+        color: root.overlayColor
+        x: rectangle.x + rectangle.width
+        y: rectangle.y
+        width: Math.max(0, parent.width - (rectangle.x + rectangle.width))
+        height: Math.max(0, rectangle.height)
+        visible: selectionArea.containsPress
+    }
+
+    Rectangle {
+        id: overlayBottom
+        color: root.overlayColor
+        x: 0
+        y: rectangle.y + rectangle.height
+        width: parent.width
+        height: Math.max(0, parent.height - (rectangle.y + rectangle.height))
+        visible: selectionArea.containsPress
+    }
+
+    // The visible selection rectangle with border drawn above overlays
+    Rectangle {
+        id: rectangle
+        color: "transparent"
+        radius: 8
+        border.color: ShellSettings.colors.active_translucent
+        border.width: 2
+        x: 0
+        y: 0
+        width: 0
+        height: 0
+        z: 1
+        visible: selectionArea.containsPress
     }
 }

shell/widgets/OptionSlider.qml

@@ -0,0 +1,98 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs
+
+Item {
+    id: root
+
+    property list<string> values
+    property int index: 0
+
+    implicitWidth: 300
+    implicitHeight: 40
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+
+        property real halfHandle: handle.width / 2
+        property real activeWidth: groove.width - handle.width
+        property real valueOffset: mouseArea.halfHandle + (root.index / (root.values.length - 1)) * mouseArea.activeWidth
+
+        Repeater {
+            model: root.values
+
+            Item {
+                id: delegate
+                required property int index
+                required property string modelData
+
+                anchors.top: groove.bottom
+                anchors.topMargin: 2
+                x: mouseArea.halfHandle + (delegate.index / (root.values.length - 1)) * mouseArea.activeWidth
+
+                Rectangle {
+                    id: mark
+                    color: ShellSettings.colors.active_translucent
+                    width: 1
+                    height: groove.height
+                }
+
+                Text {
+                    anchors.top: mark.bottom
+
+                    x: delegate.index === 0 ? -4 : delegate.index === root.values.length - 1 ? -this.width + 4 : -(this.width / 2)
+
+                    text: delegate.modelData
+                    color: ShellSettings.colors.active
+                }
+            }
+        }
+
+        Rectangle {
+            id: grooveFill
+
+            anchors {
+                left: groove.left
+                top: groove.top
+                bottom: groove.bottom
+            }
+
+            radius: 5
+            color: ShellSettings.colors.active_translucent
+            width: mouseArea.valueOffset
+        }
+
+        Rectangle {
+            id: groove
+
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+
+            y: 5
+            implicitHeight: 7
+            color: "transparent"
+            border.color: ShellSettings.colors.active_translucent
+            border.width: 1
+            radius: 5
+        }
+
+        Rectangle {
+            id: handle
+            anchors.verticalCenter: groove.verticalCenter
+            height: 15
+            width: height
+            radius: height * 0.5
+            x: mouseArea.valueOffset - width * 0.5
+        }
+    }
+
+    Binding {
+        when: mouseArea.pressed
+        root.index: Math.max(0, Math.min(root.values.length - 1, Math.round((mouseArea.mouseX / root.width) * (root.values.length - 1))))
+        restoreMode: Binding.RestoreBinding
+    }
+}

shell/widgets/StyledMouseArea.qml

@@ -5,7 +5,7 @@ MouseArea {
     id: root
     hoverEnabled: true
 
-    property real radius: width / 2
+    property real radius: 10  
     property bool checked: false
     property var activeColor: ShellSettings.colors.active_translucent
     property var inactiveColor: "transparent"
@@ -15,6 +15,11 @@ MouseArea {
         radius: root.radius
         anchors.fill: parent
 
+        border {
+            width: root.containsMouse ? 1 : 0
+            color: ShellSettings.colors.active_translucent
+        }
+
         Behavior on color {
             ColorAnimation {
                 duration: 200