Show OSD and sync touchpad steps when scrolling bar widgets (audio, monitor) (#6421)

* Show OSD and sync touchpad steps when scrolling bar widgets

Scrolling the volume or brightness icon in the bar changed the value
directly without ever calling omarchy-osd, so only the keyboard media
keys showed the popup. On top of that, a touchpad's stream of many
small wheel events per finger-drag wasn't matched to a mouse's single
±120 notch per click, so touchpad scrolling felt uncoordinated and
uneven next to the keyboard/mouse behavior.

- shell/plugins/panels/audio/Panel.qml: accumulate raw wheel delta and
  only apply a step once it crosses a full mouse-notch's worth, so
  touchpad and mouse move the volume in identical 5% increments, and
  ping the OSD each time a step actually lands.
- shell/plugins/panels/monitor/Panel.qml: same accumulator for
  brightness, with a 5% floor so scrolling down can never blank the
  screen.
- shell/plugins/osd/Osd.qml: animate the progress bar's width instead
  of snapping, so successive steps glide smoothly.

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* Fix bar wheel OSD behavior

* Normalize scaled wheel events

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: David Heinemeier Hansson <david@hey.com>

shell/plugins/panels/monitor/Panel.qml

@@ -27,6 +27,9 @@ Panel {
   property var displays: []
   property int enabledDisplayCount: 0
 
+  // Carry sub-notch touchpad deltas between wheel events.
+  property real wheelAccumulator: 0
+
   // Cursor model shared by keyboard and mouse. Sections:
   //   "brightness" - single slider row, selectedIndex = -1 sentinel
   //                  (mirrors Audio's slider rows). Only present if a
@@ -250,6 +253,14 @@ Panel {
     brightnessDebounce.restart()
   }
 
+  function showBrightnessOsd(percent) {
+    if (!bar || !bar.shell) return
+    bar.shell.summon("omarchy.osd", JSON.stringify({
+      icon: "brightness",
+      value: percent
+    }))
+  }
+
   function normalizeScale(scale) {
     return Model.normalizeScale(scale)
   }
@@ -461,7 +472,12 @@ Panel {
     text: Quickshell.screens.length > 1 ? "󰍺" : "󰍹"
     onPressed: function(b) { root.toggle() }
     onWheelMoved: function(delta) {
-      if (root.brightnessAvailable) root.setBrightness(root.brightnessPercent + (delta > 0 ? 5 : -5))
+      if (!root.brightnessAvailable) return
+      var wheel = Util.wheelSteps(root.wheelAccumulator, delta)
+      root.wheelAccumulator = wheel.remainder
+      if (wheel.steps === 0) return
+      root.setBrightness(root.brightnessPercent + wheel.steps * 5)
+      root.showBrightnessOsd(root.brightnessPercent)
     }
   }