osd: also have left center and right center options

quickshell/Common/SettingsData.qml

@@ -25,7 +25,9 @@ Singleton {
         Left,
         Right,
         TopCenter,
-        BottomCenter
+        BottomCenter,
+        LeftCenter,
+        RightCenter
     }
 
     enum AnimationSpeed {

quickshell/Modules/OSD/BrightnessOSD.qml

@@ -6,8 +6,10 @@ import qs.Widgets
 DankOSD {
     id: root
 
-    osdWidth: Math.min(260, Screen.width - Theme.spacingM * 2)
+    readonly property bool useVertical: isVerticalLayout
-    osdHeight: 40 + Theme.spacingS * 2
+
+    osdWidth: useVertical ? (40 + Theme.spacingS * 2) : Math.min(260, Screen.width - Theme.spacingM * 2)
+    osdHeight: useVertical ? Math.min(260, Screen.height - Theme.spacingM * 2) : (40 + Theme.spacingS * 2)
     autoHideInterval: 3000
     enableMouseInteraction: true
 
@@ -20,8 +22,13 @@ DankOSD {
         }
     }
 
-    content: Item {
+    content: Loader {
         anchors.fill: parent
+        sourceComponent: useVertical ? verticalContent : horizontalContent
+    }
+
+    Component {
+        id: horizontalContent
 
         Item {
             property int gap: Theme.spacingS
@@ -135,4 +142,175 @@ DankOSD {
             }
         }
     }
+
+    Component {
+        id: verticalContent
+
+        Item {
+            anchors.fill: parent
+            property int gap: Theme.spacingS
+
+            Rectangle {
+                width: Theme.iconSize
+                height: Theme.iconSize
+                radius: Theme.iconSize / 2
+                color: "transparent"
+                anchors.horizontalCenter: parent.horizontalCenter
+                y: gap
+
+                DankIcon {
+                    anchors.centerIn: parent
+                    name: {
+                        const deviceInfo = DisplayService.getCurrentDeviceInfo()
+                        if (!deviceInfo || deviceInfo.class === "backlight" || deviceInfo.class === "ddc") {
+                            return "brightness_medium"
+                        } else if (deviceInfo.name.includes("kbd")) {
+                            return "keyboard"
+                        } else {
+                            return "lightbulb"
+                        }
+                    }
+                    size: Theme.iconSize
+                    color: Theme.primary
+                }
+            }
+
+            Item {
+                id: vertSlider
+                width: 12
+                height: parent.height - Theme.iconSize - gap * 3 - 24
+                anchors.horizontalCenter: parent.horizontalCenter
+                y: gap * 2 + Theme.iconSize
+
+                property bool dragging: false
+                property int value: DisplayService.brightnessAvailable ? DisplayService.brightnessLevel : 0
+
+                readonly property int minimum: {
+                    const deviceInfo = DisplayService.getCurrentDeviceInfo()
+                    if (!deviceInfo) return 1
+                    const isExponential = SessionData.getBrightnessExponential(deviceInfo.id)
+                    if (isExponential) return 1
+                    return (deviceInfo.class === "backlight" || deviceInfo.class === "ddc") ? 1 : 0
+                }
+
+                readonly property int maximum: {
+                    const deviceInfo = DisplayService.getCurrentDeviceInfo()
+                    if (!deviceInfo) return 100
+                    const isExponential = SessionData.getBrightnessExponential(deviceInfo.id)
+                    if (isExponential) return 100
+                    return deviceInfo.displayMax || 100
+                }
+
+                Rectangle {
+                    id: vertTrack
+                    width: parent.width
+                    height: parent.height
+                    anchors.centerIn: parent
+                    color: Theme.outline
+                    radius: Theme.cornerRadius
+                }
+
+                Rectangle {
+                    id: vertFill
+                    width: parent.width
+                    height: {
+                        const ratio = (vertSlider.value - vertSlider.minimum) / (vertSlider.maximum - vertSlider.minimum)
+                        return ratio * parent.height
+                    }
+                    anchors.bottom: parent.bottom
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    color: Theme.primary
+                    radius: Theme.cornerRadius
+                }
+
+                Rectangle {
+                    id: vertHandle
+                    width: 24
+                    height: 8
+                    radius: Theme.cornerRadius
+                    y: {
+                        const ratio = (vertSlider.value - vertSlider.minimum) / (vertSlider.maximum - vertSlider.minimum)
+                        const travel = parent.height - height
+                        return Math.max(0, Math.min(travel, travel * (1 - ratio)))
+                    }
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    color: Theme.primary
+                    border.width: 3
+                    border.color: Theme.surfaceContainer
+                }
+
+                MouseArea {
+                    id: vertSliderArea
+                    anchors.fill: parent
+                    anchors.margins: -12
+                    enabled: DisplayService.brightnessAvailable
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+
+                    onContainsMouseChanged: {
+                        setChildHovered(containsMouse)
+                    }
+
+                    onPressed: mouse => {
+                        vertSlider.dragging = true
+                        updateBrightness(mouse)
+                    }
+
+                    onReleased: {
+                        vertSlider.dragging = false
+                    }
+
+                    onPositionChanged: mouse => {
+                        if (pressed) {
+                            updateBrightness(mouse)
+                        }
+                    }
+
+                    onClicked: mouse => {
+                        updateBrightness(mouse)
+                    }
+
+                    function updateBrightness(mouse) {
+                        if (DisplayService.brightnessAvailable) {
+                            const ratio = 1.0 - (mouse.y / height)
+                            const newValue = Math.round(vertSlider.minimum + ratio * (vertSlider.maximum - vertSlider.minimum))
+                            DisplayService.setBrightness(newValue, DisplayService.lastIpcDevice, true)
+                            resetHideTimer()
+                        }
+                    }
+                }
+
+                Connections {
+                    target: DisplayService
+
+                    function onBrightnessChanged(showOsd) {
+                        if (!vertSlider.dragging && vertSlider.value !== DisplayService.brightnessLevel) {
+                            vertSlider.value = DisplayService.brightnessLevel
+                        }
+                    }
+
+                    function onDeviceSwitched() {
+                        if (!vertSlider.dragging && vertSlider.value !== DisplayService.brightnessLevel) {
+                            vertSlider.value = DisplayService.brightnessLevel
+                        }
+                    }
+                }
+            }
+
+            StyledText {
+                anchors.bottom: parent.bottom
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.bottomMargin: gap
+                text: {
+                    const deviceInfo = DisplayService.getCurrentDeviceInfo()
+                    const isExponential = deviceInfo ? SessionData.getBrightnessExponential(deviceInfo.id) : false
+                    const unit = (deviceInfo && deviceInfo.class === "ddc" && !isExponential) ? "" : "%"
+                    return vertSlider.value + unit
+                }
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceText
+                visible: SettingsData.osdAlwaysShowValue
+            }
+        }
+    }
 }

quickshell/Modules/OSD/VolumeOSD.qml

@@ -6,8 +6,10 @@ import qs.Widgets
 DankOSD {
     id: root
 
-    osdWidth: Math.min(260, Screen.width - Theme.spacingM * 2)
+    readonly property bool useVertical: isVerticalLayout
-    osdHeight: 40 + Theme.spacingS * 2
+
+    osdWidth: useVertical ? (40 + Theme.spacingS * 2) : Math.min(260, Screen.width - Theme.spacingM * 2)
+    osdHeight: useVertical ? Math.min(260, Screen.height - Theme.spacingM * 2) : (40 + Theme.spacingS * 2)
     autoHideInterval: 3000
     enableMouseInteraction: true
 
@@ -37,8 +39,13 @@ DankOSD {
         }
     }
 
-    content: Item {
+    content: Loader {
         anchors.fill: parent
+        sourceComponent: useVertical ? verticalContent : horizontalContent
+    }
+
+    Component {
+        id: horizontalContent
 
         Item {
             property int gap: Theme.spacingS
@@ -128,11 +135,161 @@ DankOSD {
         }
     }
 
+    Component {
+        id: verticalContent
+
+        Item {
+            anchors.fill: parent
+            property int gap: Theme.spacingS
+
+            Rectangle {
+                width: Theme.iconSize
+                height: Theme.iconSize
+                radius: Theme.iconSize / 2
+                color: "transparent"
+                anchors.horizontalCenter: parent.horizontalCenter
+                y: gap
+
+                DankIcon {
+                    anchors.centerIn: parent
+                    name: AudioService.sink && AudioService.sink.audio && AudioService.sink.audio.muted ? "volume_off" : "volume_up"
+                    size: Theme.iconSize
+                    color: muteButtonVert.containsMouse ? Theme.primary : Theme.surfaceText
+                }
+
+                MouseArea {
+                    id: muteButtonVert
+
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        AudioService.toggleMute()
+                    }
+                    onContainsMouseChanged: {
+                        setChildHovered(containsMouse || vertSliderArea.containsMouse)
+                    }
+                }
+            }
+
+            Item {
+                id: vertSlider
+                width: 12
+                height: parent.height - Theme.iconSize - gap * 3 - 24
+                anchors.horizontalCenter: parent.horizontalCenter
+                y: gap * 2 + Theme.iconSize
+
+                property bool dragging: false
+                property int value: AudioService.sink && AudioService.sink.audio ? Math.min(100, Math.round(AudioService.sink.audio.volume * 100)) : 0
+
+                Rectangle {
+                    id: vertTrack
+                    width: parent.width
+                    height: parent.height
+                    anchors.centerIn: parent
+                    color: Theme.outline
+                    radius: Theme.cornerRadius
+                }
+
+                Rectangle {
+                    id: vertFill
+                    width: parent.width
+                    height: (vertSlider.value / 100) * parent.height
+                    anchors.bottom: parent.bottom
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    color: Theme.primary
+                    radius: Theme.cornerRadius
+                }
+
+                Rectangle {
+                    id: vertHandle
+                    width: 24
+                    height: 8
+                    radius: Theme.cornerRadius
+                    y: {
+                        const ratio = vertSlider.value / 100
+                        const travel = parent.height - height
+                        return Math.max(0, Math.min(travel, travel * (1 - ratio)))
+                    }
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    color: Theme.primary
+                    border.width: 3
+                    border.color: Theme.surfaceContainer
+                }
+
+                MouseArea {
+                    id: vertSliderArea
+                    anchors.fill: parent
+                    anchors.margins: -12
+                    enabled: AudioService.sink && AudioService.sink.audio
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+
+                    onContainsMouseChanged: {
+                        setChildHovered(containsMouse || muteButtonVert.containsMouse)
+                    }
+
+                    onPressed: mouse => {
+                        vertSlider.dragging = true
+                        updateVolume(mouse)
+                    }
+
+                    onReleased: {
+                        vertSlider.dragging = false
+                    }
+
+                    onPositionChanged: mouse => {
+                        if (pressed) {
+                            updateVolume(mouse)
+                        }
+                    }
+
+                    onClicked: mouse => {
+                        updateVolume(mouse)
+                    }
+
+                    function updateVolume(mouse) {
+                        if (AudioService.sink && AudioService.sink.audio) {
+                            const ratio = 1.0 - (mouse.y / height)
+                            const volume = Math.max(0, Math.min(100, Math.round(ratio * 100)))
+                            AudioService.suppressOSD = true
+                            AudioService.sink.audio.volume = volume / 100
+                            AudioService.suppressOSD = false
+                            resetHideTimer()
+                        }
+                    }
+                }
+
+                Connections {
+                    target: AudioService.sink && AudioService.sink.audio ? AudioService.sink.audio : null
+
+                    function onVolumeChanged() {
+                        if (!vertSlider.dragging) {
+                            vertSlider.value = Math.min(100, Math.round(AudioService.sink.audio.volume * 100))
+                        }
+                    }
+                }
+            }
+
+            StyledText {
+                anchors.bottom: parent.bottom
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.bottomMargin: gap
+                text: vertSlider.value + "%"
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceText
+                visible: SettingsData.osdAlwaysShowValue
+            }
+        }
+    }
+
     onOsdShown: {
-        if (AudioService.sink && AudioService.sink.audio && contentLoader.item) {
+        if (AudioService.sink && AudioService.sink.audio && contentLoader.item && contentLoader.item.item) {
-            const slider = contentLoader.item.children[0].children[1]
+            if (!useVertical) {
-            if (slider) {
+                const slider = contentLoader.item.item.children[0].children[1]
-                slider.value = Math.min(100, Math.round(AudioService.sink.audio.volume * 100))
+                if (slider && slider.value !== undefined) {
+                    slider.value = Math.min(100, Math.round(AudioService.sink.audio.volume * 100))
+                }
             }
         }
     }

quickshell/Modules/Settings/WidgetTweaksTab.qml

@@ -760,11 +760,15 @@ Item {
                                     return "Bottom Left"
                                 case SettingsData.Position.BottomCenter:
                                     return "Bottom Center"
+                                case SettingsData.Position.LeftCenter:
+                                    return "Left Center"
+                                case SettingsData.Position.RightCenter:
+                                    return "Right Center"
                                 default:
                                     return "Bottom Center"
                                 }
                             }
-                            options: ["Top Right", "Top Left", "Top Center", "Bottom Right", "Bottom Left", "Bottom Center"]
+                            options: ["Top Right", "Top Left", "Top Center", "Bottom Right", "Bottom Left", "Bottom Center", "Left Center", "Right Center"]
                             onValueChanged: value => {
                                 switch (value) {
                                 case "Top Right":
@@ -785,6 +789,12 @@ Item {
                                 case "Bottom Center":
                                     SettingsData.set("osdPosition", SettingsData.Position.BottomCenter)
                                     break
+                                case "Left Center":
+                                    SettingsData.set("osdPosition", SettingsData.Position.LeftCenter)
+                                    break
+                                case "Right Center":
+                                    SettingsData.set("osdPosition", SettingsData.Position.RightCenter)
+                                    break
                                 }
                             }
                         }

quickshell/Services/DisplayService.qml

@@ -78,10 +78,15 @@ Singleton {
             }
         }
 
+        const oldValue = deviceBrightness[device.id]
         const newBrightness = Object.assign({}, deviceBrightness)
         newBrightness[device.id] = displayValue
         deviceBrightness = newBrightness
         brightnessVersion++
+
+        if (oldValue !== undefined && oldValue !== displayValue && brightnessInitialized) {
+            brightnessChanged(true)
+        }
     }
 
     function updateFromBrightnessState(state) {
@@ -110,9 +115,12 @@ Singleton {
         deviceMaxCache = newMaxCache
 
         const newBrightness = {}
+        let anyDeviceBrightnessChanged = false
+
         for (const device of state.devices) {
             const isExponential = SessionData.getBrightnessExponential(device.id)
             const userSetValue = deviceBrightnessUserSet[device.id]
+            const oldValue = deviceBrightness[device.id]
 
             if (isExponential) {
                 if (userSetValue !== undefined) {
@@ -123,6 +131,11 @@ Singleton {
             } else {
                 newBrightness[device.id] = device.currentPercent
             }
+
+            const newValue = newBrightness[device.id]
+            if (oldValue !== undefined && oldValue !== newValue) {
+                anyDeviceBrightnessChanged = true
+            }
         }
         deviceBrightness = newBrightness
         brightnessVersion++
@@ -142,9 +155,15 @@ Singleton {
             }
         }
 
+        const shouldShowOsd = brightnessInitialized && anyDeviceBrightnessChanged
+
         if (!brightnessInitialized) {
             brightnessInitialized = true
         }
+
+        if (shouldShowOsd) {
+            brightnessChanged(true)
+        }
     }
 
     function setBrightness(percentage, device, suppressOsd) {

quickshell/Widgets/DankOSD.qml

@@ -75,6 +75,8 @@ PanelWindow {
     readonly property real alignedWidth: Theme.px(osdWidth, dpr)
     readonly property real alignedHeight: Theme.px(osdHeight, dpr)
 
+    readonly property bool isVerticalLayout: SettingsData.osdPosition === SettingsData.Position.LeftCenter || SettingsData.osdPosition === SettingsData.Position.RightCenter
+
     readonly property real barThickness: {
         if (!SettingsData.dankBarVisible) return 0
         const widgetThickness = Math.max(20, 26 + SettingsData.dankBarInnerPadding * 0.6)
@@ -86,6 +88,16 @@ PanelWindow {
         return barThickness + SettingsData.dankBarSpacing + SettingsData.dankBarBottomGap
     }
 
+    readonly property real dockThickness: {
+        if (!SettingsData.showDock) return 0
+        return SettingsData.dockIconSize + SettingsData.dockSpacing * 2 + 10
+    }
+
+    readonly property real dockOffset: {
+        if (!SettingsData.showDock || SettingsData.dockAutoHide) return 0
+        return dockThickness + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin
+    }
+
     readonly property real alignedX: {
         const margin = Theme.spacingM
         const centerX = (screenWidth - alignedWidth) / 2
@@ -93,12 +105,22 @@ PanelWindow {
         switch (SettingsData.osdPosition) {
         case SettingsData.Position.Left:
         case SettingsData.Position.Bottom:
-            const leftOffset = SettingsData.dankBarPosition === SettingsData.Position.Left ? barOffset : 0
+            const leftBarOffset = SettingsData.dankBarPosition === SettingsData.Position.Left ? barOffset : 0
-            return Theme.snap(margin + leftOffset, dpr)
+            const leftDockOffset = SettingsData.dockPosition === SettingsData.Position.Left ? dockOffset : 0
+            return Theme.snap(margin + Math.max(leftBarOffset, leftDockOffset), dpr)
         case SettingsData.Position.Top:
         case SettingsData.Position.Right:
-            const rightOffset = SettingsData.dankBarPosition === SettingsData.Position.Right ? barOffset : 0
+            const rightBarOffset = SettingsData.dankBarPosition === SettingsData.Position.Right ? barOffset : 0
-            return Theme.snap(screenWidth - alignedWidth - margin - rightOffset, dpr)
+            const rightDockOffset = SettingsData.dockPosition === SettingsData.Position.Right ? dockOffset : 0
+            return Theme.snap(screenWidth - alignedWidth - margin - Math.max(rightBarOffset, rightDockOffset), dpr)
+        case SettingsData.Position.LeftCenter:
+            const leftCenterBarOffset = SettingsData.dankBarPosition === SettingsData.Position.Left ? barOffset : 0
+            const leftCenterDockOffset = SettingsData.dockPosition === SettingsData.Position.Left ? dockOffset : 0
+            return Theme.snap(margin + Math.max(leftCenterBarOffset, leftCenterDockOffset), dpr)
+        case SettingsData.Position.RightCenter:
+            const rightCenterBarOffset = SettingsData.dankBarPosition === SettingsData.Position.Right ? barOffset : 0
+            const rightCenterDockOffset = SettingsData.dockPosition === SettingsData.Position.Right ? dockOffset : 0
+            return Theme.snap(screenWidth - alignedWidth - margin - Math.max(rightCenterBarOffset, rightCenterDockOffset), dpr)
         case SettingsData.Position.TopCenter:
         case SettingsData.Position.BottomCenter:
         default:
@@ -108,19 +130,25 @@ PanelWindow {
 
     readonly property real alignedY: {
         const margin = Theme.spacingM
+        const centerY = (screenHeight - alignedHeight) / 2
 
         switch (SettingsData.osdPosition) {
         case SettingsData.Position.Top:
         case SettingsData.Position.Left:
         case SettingsData.Position.TopCenter:
-            const topOffset = SettingsData.dankBarPosition === SettingsData.Position.Top ? barOffset : 0
+            const topBarOffset = SettingsData.dankBarPosition === SettingsData.Position.Top ? barOffset : 0
-            return Theme.snap(margin + topOffset, dpr)
+            const topDockOffset = SettingsData.dockPosition === SettingsData.Position.Top ? dockOffset : 0
+            return Theme.snap(margin + Math.max(topBarOffset, topDockOffset), dpr)
         case SettingsData.Position.Right:
         case SettingsData.Position.Bottom:
         case SettingsData.Position.BottomCenter:
+            const bottomBarOffset = SettingsData.dankBarPosition === SettingsData.Position.Bottom ? barOffset : 0
+            const bottomDockOffset = SettingsData.dockPosition === SettingsData.Position.Bottom ? dockOffset : 0
+            return Theme.snap(screenHeight - alignedHeight - margin - Math.max(bottomBarOffset, bottomDockOffset), dpr)
+        case SettingsData.Position.LeftCenter:
+        case SettingsData.Position.RightCenter:
         default:
-            const bottomOffset = SettingsData.dankBarPosition === SettingsData.Position.Bottom ? barOffset : 0
+            return Theme.snap(centerY, dpr)
-            return Theme.snap(screenHeight - alignedHeight - margin - bottomOffset, dpr)
         }
     }