feat(clock): Improve digital clock style (#2593)

dots/.config/quickshell/ii/modules/common/widgets/ConfigSlider.qml

@@ -0,0 +1,47 @@
+import qs.modules.common.widgets
+import qs.modules.common
+import QtQuick
+import QtQuick.Layouts
+import qs.services
+
+RowLayout {
+    id: root
+    spacing: 10
+    Layout.leftMargin: 8
+    Layout.rightMargin: 8
+
+    property string text: ""
+    property string buttonIcon: ""
+    property alias value: slider.value
+    property alias stopIndicatorValues: slider.stopIndicatorValues
+    property bool usePercentTooltip: true
+    property real from: slider.from
+    property real to: slider.to
+    property real textWidth: 120
+
+    RowLayout {
+        id: row
+        spacing: 10
+
+        OptionalMaterialSymbol {
+            id: iconWidget
+            icon: root.buttonIcon
+            iconSize: Appearance.font.pixelSize.larger
+        }
+        StyledText {
+            id: labelWidget
+            Layout.preferredWidth: root.textWidth
+            text: root.text
+            color: Appearance.colors.colOnSecondaryContainer
+        }
+    }
+    
+    StyledSlider {
+        id: slider
+        configuration: StyledSlider.Configuration.XS
+        usePercentTooltip: root.usePercentTooltip
+        value: root.value
+        from: root.from
+        to: root.to
+    }
+}

dots/.config/quickshell/ii/modules/common/widgets/StyledSlider.qml

@@ -46,7 +46,8 @@ Slider {
     property real handleWidth: root.pressed ? handlePressedWidth : handleDefaultWidth
     property real handleMargins: 4
     property real trackDotSize: 3
-    property string tooltipContent: `${Math.round(value * 100)}%`
+    property bool usePercentTooltip: true
+    property string tooltipContent: usePercentTooltip ? `${Math.round(((value - from) / (to - from)) * 100)}%` : `${Math.round(value)}`
     property bool wavy: configuration === StyledSlider.Configuration.Wavy // If true, the progress bar will have a wavy fill effect
     property bool animateWave: true
     property real waveAmplitudeMultiplier: wavy ? 0.5 : 0