dankslider: tooltip with value

Modules/ControlCenter/ControlCenterPopout.qml

@@ -671,6 +671,55 @@ PanelWindow {
                     visible: root.currentTab === "display"
                     spacing: Theme.spacingL
                     
+                    property var brightnessDebounceTimer: Timer {
+                        interval: BrightnessService.ddcAvailable ? 500 : 50
+                        repeat: false
+                        property int pendingValue: 0
+                        onTriggered: {
+                            BrightnessService.setBrightness(pendingValue);
+                        }
+                    }
+                    
+                    // Brightness Control
+                    Column {
+                        width: parent.width
+                        spacing: Theme.spacingS
+                        visible: BrightnessService.brightnessAvailable
+                        
+                        StyledText {
+                            text: "Brightness"
+                            font.pixelSize: Theme.fontSizeMedium
+                            color: Theme.surfaceText
+                            font.weight: Font.Medium
+                        }
+                        
+                        DankSlider {
+                            width: parent.width
+                            height: 24
+                            value: BrightnessService.brightnessLevel
+                            leftIcon: "brightness_low"
+                            rightIcon: "brightness_high"
+                            enabled: BrightnessService.brightnessAvailable
+                            showValue: true
+                            onSliderValueChanged: function(newValue) {
+                                parent.parent.brightnessDebounceTimer.pendingValue = newValue;
+                                parent.parent.brightnessDebounceTimer.restart();
+                            }
+                            onSliderDragFinished: function(finalValue) {
+                                parent.parent.brightnessDebounceTimer.stop();
+                                BrightnessService.setBrightness(finalValue);
+                            }
+                        }
+                        
+                        StyledText {
+                            text: "ddc changes can be slow to respond"
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceVariantText
+                            visible: BrightnessService.ddcAvailable && !BrightnessService.laptopBacklightAvailable
+                            anchors.horizontalCenter: parent.horizontalCenter
+                        }
+                    }
+                    
                     DankToggle {
                         width: parent.width
                         text: "Night Mode"

Modules/Settings/AppearanceTab.qml

@@ -145,7 +145,7 @@ ScrollView {
                         minimum: 0
                         maximum: 100
                         unit: ""
-                        showValue: false
+                        showValue: true
                         onSliderValueChanged: (newValue) => {
                             Prefs.setTopBarTransparency(newValue / 100);
                         }
@@ -170,7 +170,7 @@ ScrollView {
                         minimum: 0
                         maximum: 100
                         unit: ""
-                        showValue: false
+                        showValue: true
                         onSliderValueChanged: (newValue) => {
                             Prefs.setPopupTransparency(newValue / 100);
                         }

Modules/Settings/WidgetsTab.qml

@@ -288,7 +288,7 @@ ScrollView {
                                 maximum: 100
                                 value: Math.round(Prefs.osLogoBrightness * 100)
                                 unit: ""
-                                showValue: false
+                                showValue: true
                                 onSliderValueChanged: (newValue) => {
                                     Prefs.setOSLogoBrightness(newValue / 100);
                                 }
@@ -313,7 +313,7 @@ ScrollView {
                                 maximum: 200
                                 value: Math.round(Prefs.osLogoContrast * 100)
                                 unit: ""
-                                showValue: false
+                                showValue: true
                                 onSliderValueChanged: (newValue) => {
                                     Prefs.setOSLogoContrast(newValue / 100);
                                 }

Widgets/DankSlider.qml

@@ -18,28 +18,13 @@ Item {
     signal sliderValueChanged(int newValue)
     signal sliderDragFinished(int finalValue)
 
-    height: 80
+    height: 40
 
-    Column {
-        anchors.fill: parent
-        spacing: Theme.spacingM
-
-        // Value display
-        StyledText {
-            text: slider.value + slider.unit
-            font.pixelSize: Theme.fontSizeMedium
-            color: slider.enabled ? Theme.surfaceText : Theme.surfaceVariantText
-            font.weight: Font.Medium
-            visible: slider.showValue
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        // Slider row
     Row {
+        anchors.centerIn: parent
         width: parent.width
         spacing: Theme.spacingM
 
-            // Left icon
         DankIcon {
             name: slider.leftIcon
             size: Theme.iconSize
@@ -48,7 +33,6 @@ Item {
             visible: slider.leftIcon.length > 0
         }
 
-            // Slider track
         StyledRect {
             id: sliderTrack
 
@@ -61,7 +45,6 @@ Item {
             color: slider.enabled ? Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
             anchors.verticalCenter: parent.verticalCenter
 
-                // Fill
             StyledRect {
                 id: sliderFill
 
@@ -75,12 +58,9 @@ Item {
                         duration: Theme.shortDuration
                         easing.type: Theme.standardEasing
                     }
-
+                }
             }
 
-                }
-
-                // Draggable handle
             StyledRect {
                 id: sliderHandle
 
@@ -94,7 +74,6 @@ Item {
                 anchors.verticalCenter: parent.verticalCenter
                 scale: sliderMouseArea.containsMouse || sliderMouseArea.pressed ? 1.2 : 1
 
-                    // Handle glow effect when active
                 StyledRect {
                     anchors.centerIn: parent
                     width: parent.width + 4
@@ -111,9 +90,39 @@ Item {
                         duration: Theme.shortDuration
                         easing.type: Theme.standardEasing
                     }
-
                 }
                 
+                StyledRect {
+                    id: valueTooltip
+                    width: tooltipText.contentWidth + Theme.spacingS * 2
+                    height: tooltipText.contentHeight + Theme.spacingXS * 2
+                    radius: Theme.cornerRadiusSmall
+                    color: Theme.surfaceContainer
+                    border.color: Theme.outline
+                    border.width: 1
+                    anchors.bottom: parent.top
+                    anchors.bottomMargin: Theme.spacingS
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    visible: (sliderMouseArea.containsMouse && slider.showValue) || (slider.isDragging && slider.showValue)
+                    opacity: visible ? 1 : 0
+                    
+                    Text {
+                        id: tooltipText
+                        text: slider.value + slider.unit
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                        anchors.centerIn: parent
+                        font.hintingPreference: Font.PreferFullHinting
+                    }
+                    
+                    Behavior on opacity {
+                        NumberAnimation {
+                            duration: Theme.shortDuration
+                            easing.type: Theme.standardEasing
+                        }
+                    }
+                }
             }
 
             Item {
@@ -127,6 +136,8 @@ Item {
                     property bool isDragging: false
 
                     anchors.fill: parent
+                    anchors.topMargin: -10
+                    anchors.bottomMargin: -10
                     hoverEnabled: true
                     cursorShape: slider.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
                     enabled: slider.enabled
@@ -166,7 +177,6 @@ Item {
                     }
                 }
 
-                    // Global mouse area for drag tracking
                 MouseArea {
                     id: sliderGlobalMouseArea
 
@@ -191,12 +201,9 @@ Item {
                         }
                     }
                 }
-
+            }
         }
 
-            }
-
-            // Right icon
         DankIcon {
             name: slider.rightIcon
             size: Theme.iconSize
@@ -204,9 +211,6 @@ Item {
             anchors.verticalCenter: parent.verticalCenter
             visible: slider.rightIcon.length > 0
         }
-
-        }
-
     }
 
 }