qmlformat

Modules/Bar/Bar.qml

@@ -6,118 +6,112 @@ import qs.Services
 import qs.Widgets
 
 Variants {
-    model: Quickshell.screens
+  model: Quickshell.screens
 
-    delegate: PanelWindow {
+  delegate: PanelWindow {
-        id: root
+    id: root
 
-        required property ShellScreen modelData
+    required property ShellScreen modelData
-        readonly property real scaling: Scaling.scale(screen)
+    readonly property real scaling: Scaling.scale(screen)
 
-        screen: modelData
+    screen: modelData
-        implicitHeight: Style.barHeight * scaling
+    implicitHeight: Style.barHeight * scaling
-        color: "transparent"
+    color: "transparent"
-        visible: Settings.data.bar.monitors.includes(modelData.name) || (Settings.data.bar.monitors.length === 0)
+    visible: Settings.data.bar.monitors.includes(modelData.name)
-
+             || (Settings.data.bar.monitors.length === 0)
-        anchors {
-            top: true
-            left: true
-            right: true
-        }
-
-        Item {
-            anchors.fill: parent
-            clip: true
-
-            // Background fill
-            Rectangle {
-                id: bar
-
-                anchors.fill: parent
-                color: Colors.backgroundPrimary
-                layer.enabled: true
-            }
-
-            Row {
-                id: leftSection
-
-                height: parent.height
-                anchors.left: parent.left
-                anchors.leftMargin: Style.marginSmall * scaling
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Style.marginSmall * scaling
-
-                NText {
-                    text: screen.name
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-            }
-
-            Row {
-                id: centerSection
-
-                height: parent.height
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Style.marginSmall * scaling
-
-                Workspace {
-                }
-
-            }
-
-            Row {
-                id: rightSection
-
-                height: parent.height
-                anchors.right: bar.right
-                anchors.rightMargin: Style.marginSmall * scaling
-                anchors.verticalCenter: bar.verticalCenter
-                spacing: Style.marginSmall * scaling
-
-                Battery {
-                  anchors.verticalCenter: parent.verticalCenter
-                }
-
-                Clock {
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                NIconButton {
-                    id: demoPanelToggle
-
-                    icon: "experiment"
-                    anchors.verticalCenter: parent.verticalCenter
-                    onClicked: function() {
-                        demoPanel.isLoaded = !demoPanel.isLoaded;
-                    }
-                }
-
-                NIconButton {
-                    id: sidePanelToggle
-
-                    icon: "widgets"
-                    anchors.verticalCenter: parent.verticalCenter
-                    onClicked: function() {
-                        // Map this button's center to the screen and open the side panel below it
-                        const localCenterX = width / 2;
-                        const localCenterY = height / 2;
-                        const globalPoint = mapToItem(null, localCenterX, localCenterY);
-                        if (sidePanel.isLoaded)
-                            sidePanel.isLoaded = false;
-                        else if (sidePanel.openAt)
-                            sidePanel.openAt(globalPoint.x, screen);
-                        else
-                            // Fallback: toggle if API unavailable
-                            sidePanel.isLoaded = true;
-                    }
-                }
-
-            }
-
-        }
 
+    anchors {
+      top: true
+      left: true
+      right: true
     }
 
+    Item {
+      anchors.fill: parent
+      clip: true
+
+      // Background fill
+      Rectangle {
+        id: bar
+
+        anchors.fill: parent
+        color: Colors.backgroundPrimary
+        layer.enabled: true
+      }
+
+      Row {
+        id: leftSection
+
+        height: parent.height
+        anchors.left: parent.left
+        anchors.leftMargin: Style.marginSmall * scaling
+        anchors.verticalCenter: parent.verticalCenter
+        spacing: Style.marginSmall * scaling
+
+        NText {
+          text: screen.name
+          anchors.verticalCenter: parent.verticalCenter
+        }
+      }
+
+      Row {
+        id: centerSection
+
+        height: parent.height
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        spacing: Style.marginSmall * scaling
+
+        Workspace {}
+      }
+
+      Row {
+        id: rightSection
+
+        height: parent.height
+        anchors.right: bar.right
+        anchors.rightMargin: Style.marginSmall * scaling
+        anchors.verticalCenter: bar.verticalCenter
+        spacing: Style.marginSmall * scaling
+
+        Battery {
+          anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Clock {
+          anchors.verticalCenter: parent.verticalCenter
+        }
+
+        NIconButton {
+          id: demoPanelToggle
+
+          icon: "experiment"
+          anchors.verticalCenter: parent.verticalCenter
+          onClicked: function () {
+            demoPanel.isLoaded = !demoPanel.isLoaded
+          }
+        }
+
+        NIconButton {
+          id: sidePanelToggle
+
+          icon: "widgets"
+          anchors.verticalCenter: parent.verticalCenter
+          onClicked: function () {
+            // Map this button's center to the screen and open the side panel below it
+            const localCenterX = width / 2
+            const localCenterY = height / 2
+            const globalPoint = mapToItem(null, localCenterX, localCenterY)
+            if (sidePanel.isLoaded)
+              sidePanel.isLoaded = false
+            else if (sidePanel.openAt)
+              sidePanel.openAt(globalPoint.x, screen)
+            else
+              // Fallback: toggle if API unavailable
+              sidePanel.isLoaded = true
+          }
+        }
+      }
+    }
+  }
 }

Modules/Bar/Battery.qml

@@ -7,113 +7,117 @@ import qs.Widgets
 import "../../Helpers/Duration.js" as Duration
 
 Item {
-    id: root
+  id: root
 
-    // Test mode
+  // Test mode
-    property bool testMode: true
+  property bool testMode: true
-    property int testPercent: 49
+  property int testPercent: 49
-    property bool testCharging: false
+  property bool testCharging: false
 
-    property var battery: UPower.displayDevice
+  property var battery: UPower.displayDevice
-    property bool isReady: testMode ? true : (battery && battery.ready && battery.isLaptopBattery && battery.isPresent)
+  property bool isReady: testMode ? true : (battery && battery.ready
-    property real percent: testMode ? testPercent : (isReady ? (battery.percentage * 100) : 0)
+                                            && battery.isLaptopBattery
-    property bool charging: testMode ? testCharging : (isReady ? battery.state === UPowerDeviceState.Charging : false)
+                                            && battery.isPresent)
-    property bool show: isReady && percent > 0
+  property real percent: testMode ? testPercent : (isReady ? (battery.percentage * 100) : 0)
+  property bool charging: testMode ? testCharging : (isReady ? battery.state === UPowerDeviceState.Charging : false)
+  property bool show: isReady && percent > 0
 
-    // Choose icon based on charge and charging state
+  // Choose icon based on charge and charging state
-    function batteryIcon() {
+  function batteryIcon() {
-        if (!show)
+    if (!show)
-            return "";
+      return ""
 
-        if (charging)
+    if (charging)
-            return "battery_android_bolt";
+      return "battery_android_bolt"
 
-        if (percent >= 95)
+    if (percent >= 95)
-           return "battery_android_full";
+      return "battery_android_full"
 
-        // Hardcoded battery symbols
+    // Hardcoded battery symbols
-        if (percent >= 85)
+    if (percent >= 85)
-            return "battery_android_6";
+      return "battery_android_6"
-        if (percent >= 70)
+    if (percent >= 70)
-            return "battery_android_5";
+      return "battery_android_5"
-        if (percent >= 55)
+    if (percent >= 55)
-            return "battery_android_4";
+      return "battery_android_4"
-        if (percent >= 40)
+    if (percent >= 40)
-            return "battery_android_3";
+      return "battery_android_3"
-        if (percent >= 25)
+    if (percent >= 25)
-            return "battery_android_2";
+      return "battery_android_2"
-        if (percent >= 10)
+    if (percent >= 10)
-            return "battery_android_1";
+      return "battery_android_1"
-        if (percent >= 0)
+    if (percent >= 0)
-            return "battery_android_0";
+      return "battery_android_0"
+  }
+
+  visible: testMode || (isReady && battery.isLaptopBattery)
+  width: pill.width
+  height: pill.height
+
+  NPill {
+    id: pill
+    icon: root.batteryIcon()
+    text: Math.round(root.percent) + "%"
+    pillColor: Colors.surfaceVariant
+    iconCircleColor: Colors.accentPrimary
+    iconTextColor: Colors.backgroundPrimary
+    textColor: charging ? Colors.accentPrimary : Colors.textPrimary
+    MouseArea {
+      anchors.fill: parent
+      hoverEnabled: true
+      onEntered: {
+        pill.showDelayed()
+        batteryTooltip.show()
+      }
+      onExited: {
+        pill.hide()
+        batteryTooltip.show()
+      }
     }
-
+    NTooltip {
-    visible: testMode || (isReady && battery.isLaptopBattery)
+      id: batteryTooltip
-    width: pill.width
+      positionAbove: false
-    height: pill.height
+      target: pill
-
+      delay: Style.tooltipDelayLong
-    NPill {
+      text: {
-        id: pill
+        let lines = []
-        icon: root.batteryIcon()
+        if (!root.isReady) {
-        text: Math.round(root.percent) + "%"
+          return ""
-        pillColor: Colors.surfaceVariant
-        iconCircleColor: Colors.accentPrimary
-        iconTextColor: Colors.backgroundPrimary
-        textColor: charging ? Colors.accentPrimary : Colors.textPrimary
-        MouseArea {
-            anchors.fill: parent
-            hoverEnabled: true
-            onEntered: {
-                pill.showDelayed();
-                batteryTooltip.show();
-            }
-            onExited: {
-                pill.hide();
-                batteryTooltip.show();
-            }
         }
-        NTooltip {
-            id: batteryTooltip
-            positionAbove: false
-            target: pill
-            delay: Style.tooltipDelayLong
-            text: {
-                let lines = [];
-                if (!root.isReady) {
-                    return "";
-                }
-
-                if (root.battery.timeToEmpty > 0) {
-                    lines.push("Time left: " + Time.formatVagueHumanReadableTime(root.battery.timeToEmpty));
-                }
-
-                if (root.battery.timeToFull > 0) {
-                    lines.push("Time until full: " + Time.formatVagueHumanReadableTime(root.battery.timeToFull));
-                }
-
-                if (root.battery.changeRate !== undefined) {
-                    const rate = root.battery.changeRate;
-                    if (rate > 0) {
-                        lines.push(root.charging ? "Charging rate: " + rate.toFixed(2) + " W" : "Discharging rate: " + rate.toFixed(2) + " W");
-                    }
-                    else if (rate < 0) {
-                        lines.push("Discharging rate: " + Math.abs(rate).toFixed(2) + " W");
-                    }
-                    else {
-                        lines.push("Estimating...");
-                    }
-                }
-                else {
-                    lines.push(root.charging ? "Charging" : "Discharging");
-                }
-
-
-                if (root.battery.healthPercentage !== undefined && root.battery.healthPercentage > 0) {
-                    lines.push("Health: " + Math.round(root.battery.healthPercentage) + "%");
-                }
-                return lines.join("\n");
-            }
 
+        if (root.battery.timeToEmpty > 0) {
+          lines.push("Time left: " + Time.formatVagueHumanReadableTime(
+                       root.battery.timeToEmpty))
         }
+
+        if (root.battery.timeToFull > 0) {
+          lines.push("Time until full: " + Time.formatVagueHumanReadableTime(
+                       root.battery.timeToFull))
+        }
+
+        if (root.battery.changeRate !== undefined) {
+          const rate = root.battery.changeRate
+          if (rate > 0) {
+            lines.push(
+                  root.charging ? "Charging rate: " + rate.toFixed(
+                                    2) + " W" : "Discharging rate: " + rate.toFixed(
+                                    2) + " W")
+          } else if (rate < 0) {
+            lines.push("Discharging rate: " + Math.abs(rate).toFixed(2) + " W")
+          } else {
+            lines.push("Estimating...")
+          }
+        } else {
+          lines.push(root.charging ? "Charging" : "Discharging")
+        }
+
+        if (root.battery.healthPercentage !== undefined
+            && root.battery.healthPercentage > 0) {
+          lines.push("Health: " + Math.round(
+                       root.battery.healthPercentage) + "%")
+        }
+        return lines.join("\n")
+      }
     }
+  }
 }

Widgets/NPill.qml

@@ -3,200 +3,202 @@ import QtQuick.Controls
 import qs.Services
 
 Item {
-    id: revealPill
+  id: root
 
-    readonly property real scaling: Scaling.scale(screen)
+  readonly property real scaling: Scaling.scale(screen)
 
-    property string icon: ""
+  property string icon: ""
-    property string text: ""
+  property string text: ""
-    property color pillColor: Colors.surfaceVariant
+  property color pillColor: Colors.surfaceVariant
-    property color textColor: Colors.textPrimary
+  property color textColor: Colors.textPrimary
-    property color iconCircleColor: Colors.accentPrimary
+  property color iconCircleColor: Colors.accentPrimary
-    property color iconTextColor: Colors.backgroundPrimary
+  property color iconTextColor: Colors.backgroundPrimary
-    property color collapsedIconColor: Colors.textPrimary
+  property color collapsedIconColor: Colors.textPrimary
-    property real sizeMultiplier: 0.8
+  property real sizeMultiplier: 0.8
-    property int pillHeight: Style.baseWidgetSize * sizeMultiplier * scaling
+  property bool autoHide: false
-    property int iconSize: Style.baseWidgetSize * sizeMultiplier * scaling
-    property int pillPaddingHorizontal: 14 * scaling
-    property bool autoHide: false
 
-    // Internal state
+  // Internal state
-    property bool showPill: false
+  property bool showPill: false
-    property bool shouldAnimateHide: false
+  property bool shouldAnimateHide: false
 
-    // Exposed width logic
+  // Exposed width logic
-    readonly property int pillOverlap: iconSize / 2
+  readonly property int pillHeight: Style.baseWidgetSize * sizeMultiplier * scaling
-    readonly property int maxPillWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap)
+  readonly property int iconSize: Style.baseWidgetSize * sizeMultiplier * scaling
+  readonly property int pillPaddingHorizontal: 14 * scaling
+  readonly property int pillOverlap: iconSize * 0.5
+  readonly property int maxPillWidth: Math.max(
+                                        1, textItem.implicitWidth
+                                        + pillPaddingHorizontal * 2 + pillOverlap)
 
-    signal shown
+  signal shown
-    signal hidden
+  signal hidden
 
-    width: iconSize + (showPill ? maxPillWidth - pillOverlap : 0)
+  width: iconSize + (showPill ? maxPillWidth - pillOverlap : 0)
+  height: pillHeight
+
+  Rectangle {
+    id: pill
+    width: showPill ? maxPillWidth : 1
     height: pillHeight
+    x: (iconCircle.x + iconCircle.width / 2) - width
+    opacity: showPill ? 1 : 0
+    color: pillColor
+    topLeftRadius: pillHeight * 0.5
+    bottomLeftRadius: pillHeight * 0.5
+    anchors.verticalCenter: parent.verticalCenter
 
-    Rectangle {
+    Text {
-        id: pill
+      id: textItem
-        width: showPill ? maxPillWidth : 1
+      anchors.centerIn: parent
-        height: pillHeight
+      text: root.text
-        x: (iconCircle.x + iconCircle.width / 2) - width
+      font.pointSize: Colors.fontSizeSmall * scaling
-        opacity: showPill ? 1 : 0
+      font.family: Settings.data.ui.fontFamily
-        color: pillColor
+      font.weight: Font.Bold
-        topLeftRadius: pillHeight / 2
+      color: textColor
-        bottomLeftRadius: pillHeight / 2
+      visible: showPill
-        anchors.verticalCenter: parent.verticalCenter
-
-        Text {
-            id: textItem
-            anchors.centerIn: parent
-            text: revealPill.text
-            font.pointSize: Colors.fontSizeSmall * scaling
-            font.family: Settings.data.ui.fontFamily
-            font.weight: Font.Bold
-            color: textColor
-            visible: showPill
-        }
-
-        Behavior on width {
-            enabled: showAnim.running || hideAnim.running
-            NumberAnimation {
-                duration: Style.animationNormal
-                easing.type: Easing.OutCubic
-            }
-        }
-        Behavior on opacity {
-            enabled: showAnim.running || hideAnim.running
-            NumberAnimation {
-                duration: 250
-                easing.type: Easing.OutCubic
-            }
-        }
     }
 
-    Rectangle {
+    Behavior on width {
-        id: iconCircle
+      enabled: showAnim.running || hideAnim.running
-        width: iconSize
+      NumberAnimation {
-        height: iconSize
+        duration: Style.animationNormal
-        radius: width / 2
+        easing.type: Easing.OutCubic
-        color: showPill ? iconCircleColor : "transparent"
+      }
-        anchors.verticalCenter: parent.verticalCenter
+    }
-        anchors.right: parent.right
+    Behavior on opacity {
+      enabled: showAnim.running || hideAnim.running
+      NumberAnimation {
+        duration: 250
+        easing.type: Easing.OutCubic
+      }
+    }
+  }
 
-        Behavior on color {
+  Rectangle {
-            ColorAnimation {
+    id: iconCircle
-                duration: 200
+    width: iconSize
-                easing.type: Easing.InOutQuad
+    height: iconSize
-            }
+    radius: width / 2
-        }
+    color: showPill ? iconCircleColor : "transparent"
+    anchors.verticalCenter: parent.verticalCenter
+    anchors.right: parent.right
 
-        Text {
+    Behavior on color {
-            anchors.centerIn: parent
+      ColorAnimation {
-            font.family: showPill ? "Material Symbols Rounded" : "Material Symbols Outlined"
+        duration: 200
-            font.pointSize: Colors.fontSizeSmall * scaling
+        easing.type: Easing.InOutQuad
-            text: revealPill.icon
+      }
-            color: showPill ? iconTextColor : collapsedIconColor
-        }
     }
 
-    ParallelAnimation {
+    Text {
-        id: showAnim
+      anchors.centerIn: parent
-        running: false
+      font.family: showPill ? "Material Symbols Rounded" : "Material Symbols Outlined"
-        NumberAnimation {
+      font.pointSize: Colors.fontSizeSmall * scaling
-            target: pill
+      text: root.icon
-            property: "width"
+      color: showPill ? iconTextColor : collapsedIconColor
-            from: 1
-            to: maxPillWidth
-            duration: Style.animationNormal
-            easing.type: Easing.OutCubic
-        }
-        NumberAnimation {
-            target: pill
-            property: "opacity"
-            from: 0
-            to: 1
-            duration: Style.animationNormal
-            easing.type: Easing.OutCubic
-        }
-        onStarted: {
-            showPill = true;
-        }
-        onStopped: {
-            delayedHideAnim.start();
-            shown();
-        }
     }
+  }
 
-    SequentialAnimation {
+  ParallelAnimation {
-        id: delayedHideAnim
+    id: showAnim
-        running: false
+    running: false
-        PauseAnimation {
+    NumberAnimation {
-            duration: 2500
+      target: pill
-        }
+      property: "width"
-        ScriptAction {
+      from: 1
-            script: if (shouldAnimateHide)
+      to: maxPillWidth
+      duration: Style.animationNormal
+      easing.type: Easing.OutCubic
+    }
+    NumberAnimation {
+      target: pill
+      property: "opacity"
+      from: 0
+      to: 1
+      duration: Style.animationNormal
+      easing.type: Easing.OutCubic
+    }
+    onStarted: {
+      showPill = true
+    }
+    onStopped: {
+      delayedHideAnim.start()
+      shown()
+    }
+  }
+
+  SequentialAnimation {
+    id: delayedHideAnim
+    running: false
+    PauseAnimation {
+      duration: 2500
+    }
+    ScriptAction {
+      script: if (shouldAnimateHide)
                 hideAnim.start()
-        }
     }
+  }
 
-    ParallelAnimation {
+  ParallelAnimation {
-        id: hideAnim
+    id: hideAnim
-        running: false
+    running: false
-        NumberAnimation {
+    NumberAnimation {
-            target: pill
+      target: pill
-            property: "width"
+      property: "width"
-            from: maxPillWidth
+      from: maxPillWidth
-            to: 1
+      to: 1
-            duration: Style.animationNormal
+      duration: Style.animationNormal
-            easing.type: Easing.InCubic
+      easing.type: Easing.InCubic
-        }
-        NumberAnimation {
-            target: pill
-            property: "opacity"
-            from: 1
-            to: 0
-            duration: Style.animationNormal
-            easing.type: Easing.InCubic
-        }
-        onStopped: {
-            showPill = false;
-            shouldAnimateHide = false;
-            hidden();
-        }
     }
+    NumberAnimation {
+      target: pill
+      property: "opacity"
+      from: 1
+      to: 0
+      duration: Style.animationNormal
+      easing.type: Easing.InCubic
+    }
+    onStopped: {
+      showPill = false
+      shouldAnimateHide = false
+      hidden()
+    }
+  }
 
-    function show() {
+  function show() {
-        if (!showPill) {
+    if (!showPill) {
-            shouldAnimateHide = autoHide;
+      shouldAnimateHide = autoHide
-            showAnim.start();
+      showAnim.start()
-        } else {
+    } else {
-            hideAnim.stop();
+      hideAnim.stop()
-            delayedHideAnim.restart();
+      delayedHideAnim.restart()
-        }
     }
+  }
 
-    function hide() {
+  function hide() {
-        if (showPill) {
+    if (showPill) {
-            hideAnim.start();
+      hideAnim.start()
-        }
-        showTimer.stop();
     }
+    showTimer.stop()
+  }
 
-    function showDelayed() {
+  function showDelayed() {
-        if (!showPill) {
+    if (!showPill) {
-            shouldAnimateHide = autoHide;
+      shouldAnimateHide = autoHide
-            showTimer.start();
+      showTimer.start()
-        } else {
+    } else {
-            hideAnim.stop();
+      hideAnim.stop()
-            delayedHideAnim.restart();
+      delayedHideAnim.restart()
-        }
     }
+  }
 
-    Timer {
+  Timer {
-        id: showTimer
+    id: showTimer
-        interval: Style.pillDelay
+    interval: Style.pillDelay
-        onTriggered: {
+    onTriggered: {
-            if (!showPill) {
+      if (!showPill) {
-                showAnim.start();
+        showAnim.start()
-            }
+      }
-        }
     }
+  }
 }