sidebar progress

.config/quickshell/modules/common/Appearance.qml

@@ -114,10 +114,14 @@ Singleton {
         property color colOnLayer2: m3colors.m3onSurface;
         property color colLayer3: mix(m3colors.m3surfaceContainerHigh, m3colors.m3onSurface, 0.96);
         property color colOnLayer3: m3colors.m3onSurface;
+        property color colLayer1Hover: mix(colLayer1, colOnLayer1, 0.85);
+        property color colLayer1Active: mix(colLayer1, colOnLayer1, 0.70);
         property color colLayer2Hover: mix(colLayer2, colOnLayer2, 0.90);
         property color colLayer2Active: mix(colLayer2, colOnLayer2, 0.80);
         property color colLayer3Hover: mix(colLayer3, colOnLayer3, 0.90);
         property color colLayer3Active: mix(colLayer3, colOnLayer3, 0.80);
+        property color colPrimaryHover: mix(m3colors.m3primary, colLayer1Hover, 0.7)
+        property color colPrimaryActive: mix(m3colors.m3primary, colLayer1Active, 0.4)
     }
 
     rounding: QtObject {

.config/quickshell/modules/common/ConfigOptions.qml

@@ -20,4 +20,8 @@ Singleton {
         property int updateInterval: 3000
     }
 
+    property QtObject hacks: QtObject {
+        property int arbitraryRaceConditionDelay: 10
+    }
+
 }

.config/quickshell/modules/common/widgets/CustomIcon.qml

@@ -0,0 +1,24 @@
+import QtQuick
+import Qt.labs.platform
+import Quickshell
+import Quickshell.Widgets
+
+Item {
+    id: root
+    
+    property string source: ""
+    property string iconFolder: StandardPaths.standardLocations(StandardPaths.ConfigLocation)[0] + "/quickshell/assets/icons"  // The folder to check first
+    width: 30
+    height: 30
+    
+    IconImage {
+        id: iconImage
+        anchors.fill: parent
+        source: {
+            if (iconFolder && iconFolder + "/" + root.source) {
+                return iconFolder + "/" + root.source
+            }
+            return root.source
+        }
+    }
+}

.config/quickshell/modules/sidebarRight/QuickToggleButton.qml

@@ -0,0 +1,33 @@
+import "../common"
+import "../common/widgets"
+import QtQuick
+import QtQuick.Controls
+
+Button {
+    id: button
+
+    property bool toggled
+
+    signal clicked()
+
+    implicitWidth: 40
+    implicitHeight: 40
+    onClicked: {
+    }
+
+    background: Rectangle {
+        anchors.fill: parent
+        radius: Appearance.rounding.full
+        color: toggled ? 
+            (button.down ? Appearance.colors.colPrimaryActive : button.hovered ? Appearance.colors.colPrimaryHover : Appearance.m3colors.m3primary) :
+            (button.down ? Appearance.colors.colLayer1Active : button.hovered ? Appearance.colors.colLayer1Hover : Appearance.transparentize(Appearance.colors.colLayer1Hover, 1))
+
+        MaterialSymbol {
+            anchors.centerIn: parent
+            text: "coffee"
+            color: toggled ? Appearance.m3colors.m3onPrimary : Appearance.colors.colOnLayer1
+        }
+
+    }
+
+}

.config/quickshell/modules/sidebarRight/SidebarRight.qml

@@ -5,14 +5,14 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell.Io
 import Quickshell
+import Quickshell.Widgets
 import Quickshell.Wayland
 import Quickshell.Hyprland
 import Qt5Compat.GraphicalEffects
 
 Scope {
-    id: bar
-
-    readonly property int sidebarWidth: Appearance.sizes.sidebarWidth
+    property int sidebarWidth: Appearance.sizes.sidebarWidth
+    property int sidebarPadding: 15
 
     Variants {
         id: sidebarVariants
@@ -29,6 +29,7 @@ Scope {
             exclusiveZone: 0
             width: sidebarWidth
             WlrLayershell.namespace: "quickshell:sidebarRight"
+            WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
             color: "transparent"
 
             anchors {
@@ -38,9 +39,29 @@ Scope {
             }
 
             HyprlandFocusGrab {
-                active: sidebarRoot.visible
                 id: grab
                 windows: [ sidebarRoot ]
+                active: false
+                onCleared: () => {
+                    // sidebarRoot.visible = false
+                    if (!active) sidebarRoot.visible = false
+                }
+            }
+
+            Connections {
+                target: sidebarRoot
+                function onVisibleChanged() {
+                    delayedGrabTimer.start()
+                }
+            }
+
+            Timer {
+                id: delayedGrabTimer
+                interval: ConfigOptions.hacks.arbitraryRaceConditionDelay
+                repeat: false
+                onTriggered: {
+                    grab.active = sidebarRoot.visible
+                }
             }
 
             // Background
@@ -60,6 +81,70 @@ Scope {
                         event.accepted = true; // Prevent further propagation of the event
                     }
                 }
+
+                ColumnLayout {
+                    anchors.centerIn: parent
+                    height: parent.height - sidebarPadding * 2
+                    width: parent.width - sidebarPadding * 2
+                    spacing: sidebarPadding
+
+                    RowLayout {
+                        Layout.fillHeight: false
+                        spacing: 10
+                        Layout.margins: 10
+                        Layout.topMargin: 10
+
+                        CustomIcon {
+                            width: 25
+                            height: 25
+                            source: SystemInfo.distroIcon
+                        }
+
+                        StyledText {
+                            font.pointSize: Appearance.font.pointSize.normal
+                            color: Appearance.colors.colOnLayer0
+                            text: `Uptime: ${DateTime.uptime}`
+                        }
+
+                        Item {
+                            Layout.fillHeight: true
+                        }
+
+
+                    }
+
+                    Rectangle {
+                        Layout.alignment: Qt.AlignHCenter
+                        Layout.fillHeight: false
+                        radius: Appearance.rounding.full
+                        color: Appearance.colors.colLayer1
+                        implicitWidth: sidebarQuickControlsRow.implicitWidth + 10
+                        implicitHeight: sidebarQuickControlsRow.implicitHeight + 10
+                        
+                        
+                        RowLayout {
+                            id: sidebarQuickControlsRow
+                            anchors.fill: parent
+                            anchors.margins: 5
+                            spacing: 5
+                            Rectangle {
+                                width: 40
+                                height: 40
+                                color: "#77000000"
+                                radius: Appearance.rounding.full
+                            }
+
+                            QuickToggleButton {
+                                toggled: false
+                            }
+                            
+                        }
+                    }
+
+                    Item {
+                        Layout.fillHeight: true
+                    }
+                }
             }
 
             // Shadow