NPill: Restored the old horizontal NPill

Modules/Bar/Widgets/Battery.qml

@@ -29,7 +29,7 @@ Item {
     return {}
   }
 
-  // Resolve settings: try user settings or defaults from BarWidgetRegistry
+  readonly property bool isBarVertical: Settings.data.bar.position === "left" || Settings.data.bar.position === "right"
   readonly property string displayMode: widgetSettings.displayMode !== undefined ? widgetSettings.displayMode : widgetMetadata.displayMode
   readonly property real warningThreshold: widgetSettings.warningThreshold !== undefined ? widgetSettings.warningThreshold : widgetMetadata.warningThreshold
 
@@ -87,6 +87,7 @@ Item {
     rightOpen: BarWidgetRegistry.getNPillDirection(root)
     icon: testMode ? BatteryService.getIcon(testPercent, testCharging, true) : BatteryService.getIcon(percent, charging, isReady)
     text: (isReady || testMode) ? Math.round(percent) : "-"
+    suffix: "%"
     autoHide: false
     forceOpen: isReady && (testMode || battery.isLaptopBattery) && displayMode === "alwaysShow"
     forceClose: displayMode === "alwaysHide"

Modules/Bar/Widgets/Brightness.qml

@@ -28,6 +28,7 @@ Item {
     return {}
   }
 
+  readonly property bool isBarVertical: Settings.data.bar.position === "left" || Settings.data.bar.position === "right"
   readonly property string displayMode: (widgetSettings.displayMode !== undefined) ? widgetSettings.displayMode : widgetMetadata.displayMode
 
   // Used to avoid opening the pill on Quickshell startup
@@ -79,9 +80,11 @@ Item {
     icon: getIcon()
     autoHide: false // Important to be false so we can hover as long as we want
     text: {
+      return ""
       var monitor = getMonitor()
       return monitor ? Math.round(monitor.brightness * 100) : ""
     }
+    suffix: text.length > 0 ? "%" : "-"
     forceOpen: displayMode === "alwaysShow"
     forceClose: displayMode === "alwaysHide"
     tooltipText: {

Modules/Bar/Widgets/KeyboardLayout.qml

@@ -49,10 +49,7 @@ Item {
     tooltipText: "Keyboard layout: " + currentLayout.toUpperCase()
     forceOpen: root.displayMode === "forceOpen"
     forceClose: root.displayMode === "alwaysHide"
-    fontSize: Style.fontSizeS // Use larger font size
-
     onClicked: {
-
       // You could open keyboard settings here if needed
       // For now, just show the current layout
     }

Modules/Bar/Widgets/Microphone.qml

@@ -30,6 +30,7 @@ Item {
     return {}
   }
 
+  readonly property bool isBarVertical: Settings.data.bar.position === "left" || Settings.data.bar.position === "right"
   readonly property string displayMode: (widgetSettings.displayMode !== undefined) ? widgetSettings.displayMode : widgetMetadata.displayMode
 
   // Used to avoid opening the pill on Quickshell startup
@@ -87,11 +88,11 @@ Item {
 
   NPill {
     id: pill
-
     rightOpen: BarWidgetRegistry.getNPillDirection(root)
     icon: getIcon()
     autoHide: false // Important to be false so we can hover as long as we want
     text: Math.floor(AudioService.inputVolume * 100)
+    suffix: "%"
     forceOpen: displayMode === "alwaysShow"
     forceClose: displayMode === "alwaysHide"
     tooltipText: "Microphone: " + Math.round(AudioService.inputVolume * 100) + "%\nLeft click for advanced settings.\nScroll up/down to change volume.\nRight click to toggle mute."

Modules/Bar/Widgets/Volume.qml

@@ -30,7 +30,7 @@ Item {
     return {}
   }
 
-  readonly property bool isVertical: Settings.data.bar.position === "left" || Settings.data.bar.position === "right"
+  readonly property bool isBarVertical: Settings.data.bar.position === "left" || Settings.data.bar.position === "right"
   readonly property string displayMode: (widgetSettings.displayMode !== undefined) ? widgetSettings.displayMode : widgetMetadata.displayMode
 
   // Used to avoid opening the pill on Quickshell startup
@@ -77,7 +77,8 @@ Item {
     rightOpen: BarWidgetRegistry.getNPillDirection(root)
     icon: getIcon()
     autoHide: false // Important to be false so we can hover as long as we want
-    text: `${Math.floor(AudioService.volume * 100)}${isVertical ? "" : "%"}`
+    text: Math.floor(AudioService.volume * 100)
+    suffix: "%"
     forceOpen: displayMode === "alwaysShow"
     forceClose: displayMode === "alwaysHide"
     tooltipText: "Volume: " + Math.round(AudioService.volume * 100) + "%\nLeft click for advanced settings.\nScroll up/down to change volume.\nRight click to toggle mute."

Widgets/NPill.qml

@@ -8,6 +8,7 @@ Item {
 
   property string icon: ""
   property string text: ""
+  property string suffix: ""
   property string tooltipText: ""
   property real sizeRatio: 0.8
   property bool autoHide: false
@@ -16,7 +17,6 @@ Item {
   property bool disableOpen: false
   property bool rightOpen: false
   property bool hovered: false
-  property real fontSize: Style.fontSizeXS
 
   readonly property string barPosition: Settings.data.bar.position
   readonly property bool isVerticalBar: barPosition === "left" || barPosition === "right"
@@ -44,6 +44,7 @@ Item {
       NPillVertical {
         icon: root.icon
         text: root.text
+        suffix: root.suffix
         tooltipText: root.tooltipText
         sizeRatio: root.sizeRatio
         autoHide: root.autoHide
@@ -52,8 +53,6 @@ Item {
         disableOpen: root.disableOpen
         rightOpen: root.rightOpen
         hovered: root.hovered
-        fontSize: root.fontSize
-
         onShown: root.shown()
         onHidden: root.hidden()
         onEntered: root.entered()
@@ -70,6 +69,7 @@ Item {
       NPillHorizontal {
         icon: root.icon
         text: root.text
+        suffix: root.suffix
         tooltipText: root.tooltipText
         sizeRatio: root.sizeRatio
         autoHide: root.autoHide
@@ -78,8 +78,6 @@ Item {
         disableOpen: root.disableOpen
         rightOpen: root.rightOpen
         hovered: root.hovered
-        fontSize: root.fontSize
-
         onShown: root.shown()
         onHidden: root.hidden()
         onEntered: root.entered()

Widgets/NPillHorizontal.qml

@@ -8,6 +8,7 @@ Item {
 
   property string icon: ""
   property string text: ""
+  property string suffix: ""
   property string tooltipText: ""
   property real sizeRatio: 0.8
   property bool autoHide: false
@@ -16,18 +17,9 @@ Item {
   property bool disableOpen: false
   property bool rightOpen: false
   property bool hovered: false
-  property real fontSize: Style.fontSizeXS
 
-  // Bar position detection for pill direction
+  // Effective shown state (true if hovered/animated open or forced)
-  readonly property string barPosition: Settings.data.bar.position
+  readonly property bool revealed: forceOpen || showPill
-  readonly property bool isVerticalBar: barPosition === "left" || barPosition === "right"
-
-  // Determine pill direction based on section position
-  readonly property bool openRightward: rightOpen
-  readonly property bool openLeftward: !rightOpen
-
-  // Effective shown state (true if animated open or forced, but not if force closed)
-  readonly property bool revealed: !forceClose && (forceOpen || showPill)
 
   signal shown
   signal hidden
@@ -42,51 +34,51 @@ Item {
   property bool showPill: false
   property bool shouldAnimateHide: false
 
-  // Sizing logic for horizontal bars
+  // Exposed width logic
   readonly property int iconSize: Math.round(Style.baseWidgetSize * sizeRatio * scaling)
-  readonly property int pillWidth: iconSize
+  readonly property int pillHeight: iconSize
   readonly property int pillPaddingHorizontal: Style.marginS * scaling
-  readonly property int pillPaddingVertical: Style.marginS * scaling
   readonly property int pillOverlap: iconSize * 0.5
-  readonly property int maxPillWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 4)
+  readonly property int maxPillWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap)
-  readonly property int maxPillHeight: iconSize
 
-  // For horizontal bars: height is just icon size, width includes pill space
+  width: iconSize + Math.max(0, pill.width - pillOverlap)
-  width: revealed ? (openRightward ? (iconSize + maxPillWidth - pillOverlap) : (iconSize + maxPillWidth - pillOverlap)) : iconSize
+  height: pillHeight
-  height: iconSize
 
   Rectangle {
     id: pill
     width: revealed ? maxPillWidth : 1
-    height: revealed ? maxPillHeight : 1
+    height: pillHeight
 
-    // Position based on direction - center the pill relative to the icon
+    x: rightOpen ? (iconCircle.x + iconCircle.width / 2) : // Opens right
-    x: openLeftward ? (iconCircle.x + iconCircle.width / 2 - width) : (iconCircle.x + iconCircle.width / 2 - pillOverlap)
+                   (iconCircle.x + iconCircle.width / 2) - width // Opens left
-    y: 0
 
     opacity: revealed ? Style.opacityFull : Style.opacityNone
     color: Color.mSurfaceVariant
-    border.color: Color.mOutline
-    border.width: Math.max(1, Style.borderS * scaling)
-
-    // Radius logic for horizontal expansion - rounded on the side that connects to icon
-    topLeftRadius: openLeftward ? iconSize * 0.5 : 0
-    bottomLeftRadius: openLeftward ? iconSize * 0.5 : 0
-    topRightRadius: openRightward ? iconSize * 0.5 : 0
-    bottomRightRadius: openRightward ? iconSize * 0.5 : 0
 
+    topLeftRadius: rightOpen ? 0 : pillHeight * 0.5
+    bottomLeftRadius: rightOpen ? 0 : pillHeight * 0.5
+    topRightRadius: rightOpen ? pillHeight * 0.5 : 0
+    bottomRightRadius: rightOpen ? pillHeight * 0.5 : 0
     anchors.verticalCenter: parent.verticalCenter
 
     NText {
       id: textItem
-      anchors.horizontalCenter: parent.horizontalCenter
       anchors.verticalCenter: parent.verticalCenter
-      anchors.horizontalCenterOffset: -pillPaddingHorizontal * 0.5 // Position text slightly left in the pill
+      x: {
-      text: root.text
+        // Better text horizontal centering
+        var centerX = (parent.width - width) / 2
+        var offset = rightOpen ? Style.marginXS * scaling : -Style.marginXS * scaling
+        if (forceOpen) {
+          // If its force open, the icon disc background is the same color as the bg pill move text slightly
+          offset += rightOpen ? -Style.marginXXS * scaling : Style.marginXS * scaling
+        }
+        return centerX + offset
+      }
+      text: root.text + root.suffix
       font.family: Settings.data.ui.fontFixed
-      font.pointSize: Style.fontSizeXXS * scaling
+      font.pointSize: Style.fontSizeXS * scaling
       font.weight: Style.fontWeightBold
-      color: Color.mOnSurface
+      color: Color.mPrimary
       visible: revealed
     }
 
@@ -97,13 +89,6 @@ Item {
         easing.type: Easing.OutCubic
       }
     }
-    Behavior on height {
-      enabled: showAnim.running || hideAnim.running
-      NumberAnimation {
-        duration: Style.animationNormal
-        easing.type: Easing.OutCubic
-      }
-    }
     Behavior on opacity {
       enabled: showAnim.running || hideAnim.running
       NumberAnimation {
@@ -119,12 +104,10 @@ Item {
     height: iconSize
     radius: width * 0.5
     color: hovered && !forceOpen ? Color.mTertiary : Color.mSurfaceVariant
-
-    // Icon positioning based on direction
-    x: openLeftward ? (parent.width - width) : 0
-    y: 0
     anchors.verticalCenter: parent.verticalCenter
 
+    x: rightOpen ? 0 : (parent.width - width)
+
     Behavior on color {
       ColorAnimation {
         duration: Style.animationNormal
@@ -154,14 +137,6 @@ Item {
       duration: Style.animationNormal
       easing.type: Easing.OutCubic
     }
-    NumberAnimation {
-      target: pill
-      property: "height"
-      from: 1
-      to: maxPillHeight
-      duration: Style.animationNormal
-      easing.type: Easing.OutCubic
-    }
     NumberAnimation {
       target: pill
       property: "opacity"
@@ -203,14 +178,6 @@ Item {
       duration: Style.animationNormal
       easing.type: Easing.InCubic
     }
-    NumberAnimation {
-      target: pill
-      property: "height"
-      from: maxPillHeight
-      to: 1
-      duration: Style.animationNormal
-      easing.type: Easing.InCubic
-    }
     NumberAnimation {
       target: pill
       property: "opacity"
@@ -228,12 +195,10 @@ Item {
 
   NTooltip {
     id: tooltip
-    target: pill
-    text: root.tooltipText
-    positionLeft: barPosition === "right"
-    positionRight: barPosition === "left"
     positionAbove: Settings.data.bar.position === "bottom"
+    target: pill
     delay: Style.tooltipDelayLong
+    text: root.tooltipText
   }
 
   Timer {
@@ -254,7 +219,7 @@ Item {
       hovered = true
       root.entered()
       tooltip.show()
-      if (disableOpen || forceClose) {
+      if (disableOpen) {
         return
       }
       if (!forceOpen) {
@@ -264,7 +229,7 @@ Item {
     onExited: {
       hovered = false
       root.exited()
-      if (!forceOpen && !forceClose) {
+      if (!forceOpen) {
         hide()
       }
       tooltip.hide()

Widgets/NPillVertical.qml

@@ -8,6 +8,7 @@ Item {
 
   property string icon: ""
   property string text: ""
+  property string suffix: ""
   property string tooltipText: ""
   property real sizeRatio: 0.8
   property bool autoHide: false
@@ -16,7 +17,6 @@ Item {
   property bool disableOpen: false
   property bool rightOpen: false
   property bool hovered: false
-  property real fontSize: Style.fontSizeXS
 
   // Bar position detection for pill direction
   readonly property string barPosition: Settings.data.bar.position
@@ -66,8 +66,6 @@ Item {
 
     opacity: revealed ? Style.opacityFull : Style.opacityNone
     color: Color.mSurfaceVariant
-    border.color: Color.mOutline
-    border.width: Math.max(1, Style.borderS * scaling)
 
     // Radius logic for vertical expansion - rounded on the side that connects to icon
     topLeftRadius: openUpward ? iconSize * 0.5 : 0
@@ -81,14 +79,21 @@ Item {
       id: textItem
       anchors.horizontalCenter: parent.horizontalCenter
       anchors.verticalCenter: parent.verticalCenter
-      anchors.verticalCenterOffset: -pillPaddingVertical * 0.5 // Position text slightly higher in the pill
+      anchors.verticalCenterOffset: {
-      text: root.text
+        var offset = openDownward ? pillPaddingVertical * 0.75 : -pillPaddingVertical * 0.75
+        if (forceOpen) {
+          // If its force open, the icon disc background is the same color as the bg pill move text slightly
+          offset += rightOpen ? -Style.marginXXS * scaling : Style.marginXS * scaling
+        }
+        return offset
+      }
+      text: root.text + root.suffix
       font.family: Settings.data.ui.fontFixed
       font.pointSize: Style.fontSizeXXS * scaling
       font.weight: Style.fontWeightMedium
       horizontalAlignment: Text.AlignHCenter
       verticalAlignment: Text.AlignVCenter
-      color: Color.mOnSurface
+      color: Color.mPrimary
       visible: revealed
     }