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/audio/Panel.qml

@@ -121,6 +121,9 @@ Panel {
   // selected while a tuning still exists.
   property string volumeSinkName: ""
 
+  // Carry sub-notch touchpad deltas between wheel events.
+  property real wheelAccumulator: 0
+
   readonly property var volumeSink: {
     if (volumeSinkName === "" || !sink) return sink
     if (volumeSinkName === String(sink.name)) return sink
@@ -395,13 +398,13 @@ Panel {
     if (selectedIndex < floor) selectedIndex = floor
   }
 
-  function outputIcon() {
+  function outputIcon(volume) {
     // Match the old Waybar pulseaudio glyph set. The Material Design speaker
     // icons render visually smaller in JetBrainsMono Nerd Font.
     if (!sink || !sink.audio) return ""
     if (isHeadphones(sink)) return "󰋋"
     if (outputMuted) return ""
-    var v = outputVolume
+    var v = volume === undefined ? outputVolume : volume
     if (v >= 0.67) return ""
     if (v >= 0.34) return ""
     if (v > 0) return ""
@@ -421,8 +424,18 @@ Panel {
   }
 
   function setOutputVolume(v) {
-    if (!sink || !sink.audio) return
-    volumeSink.audio.volume = Math.max(0, Math.min(1, v))
+    if (!volumeSink || !volumeSink.audio) return outputVolume
+    var volume = Math.max(0, Math.min(1, v))
+    volumeSink.audio.volume = volume
+    return volume
+  }
+
+  function showVolumeOsd(volume) {
+    if (!bar || !bar.shell) return
+    bar.shell.summon("omarchy.osd", JSON.stringify({
+      icon: outputIcon(volume),
+      value: Math.round(volume * 100)
+    }))
   }
 
   function setInputVolume(v) {
@@ -625,8 +638,12 @@ Panel {
     }
 
     onWheelMoved: function(delta) {
-      var step = 0.05
-      root.setOutputVolume(root.outputVolume + (delta > 0 ? step : -step))
+      if (!root.hasOutput) return
+      var wheel = Util.wheelSteps(root.wheelAccumulator, delta)
+      root.wheelAccumulator = wheel.remainder
+      if (wheel.steps === 0) return
+      var volume = root.setOutputVolume(root.outputVolume + wheel.steps * 0.05)
+      root.showVolumeOsd(volume)
     }
   }