dash/clock: fix styling when date is enabled

misc other tiny changes to lyrics and a bugfix in CC

quickshell/Modules/ControlCenter/Components/CcDetailPage.qml

@@ -35,7 +35,7 @@ Item {
     }
     readonly property real offscreenX: I18n.isRtl ? -width : width
 
-    visible: shownSection !== "" || panel.x !== offscreenX
+    visible: shownSection !== ""
 
     function dismissTransient() {
         const item = pageItem;

quickshell/Modules/DankDash/DashMetrics.qml

@@ -195,6 +195,8 @@ Singleton {
     readonly property real lyricsNearOpacity: 0.55
     readonly property real lyricsFarOpacity: 0.3
     readonly property real lyricsLineHeight: 1.25
+    readonly property real lyricsLeadHeightDivisor: 12
+    readonly property real lyricsLeadWidthDivisor: 11
     readonly property int wheelNotch: 120
 
     readonly property int dailyVisibleCount: 7

quickshell/Modules/DankDash/Media/LyricsOverlay.qml

@@ -31,6 +31,7 @@ FocusScope {
     readonly property real currentLineY: transcript.currentItem?.y ?? 0
     readonly property real shapeInset: Math.ceil(Math.min(radius, width / 2, height / 2) * (1 - Math.SQRT1_2))
     readonly property bool compact: content.height < Theme.listItemTwoLineHeight * 2
+    readonly property real leadFontSize: Math.round(Math.max(Theme.fontSizeXLarge, Math.min(Theme.fontSizeDisplay, transcript.height / DashMetrics.lyricsLeadHeightDivisor, transcript.width / DashMetrics.lyricsLeadWidthDivisor)))
     readonly property string message: {
         switch (controller.state) {
         case "loading":
@@ -303,6 +304,7 @@ FocusScope {
                             accent: modelData.chorus ? MediaAccentService.lyricsGroupAccent : MediaAccentService.lyricsAccents[(modelData.voiceIndex ?? 0) % MediaAccentService.lyricsAccents.length]
                             synced: root.controller.synced
                             following: root.following
+                            leadFontSize: root.leadFontSize
                             distance: lyric ? Math.abs(lyric.index - root.activeIndex) : 0
                             animationsEnabled: root.animationsEnabled
                             inViewport: {

quickshell/Modules/DankDash/Media/LyricsVocal.qml

@@ -20,6 +20,7 @@ Item {
     property int distance: 0
     property bool animationsEnabled: true
     property bool inViewport: false
+    property real leadFontSize: Theme.fontSizeXLarge
 
     readonly property bool current: synced && controller.sampleTime >= part.t && controller.sampleTime < part.e
     readonly property bool highlighted: synced && controller.sampleTime >= part.t && (current || distance === 0)
@@ -102,7 +103,7 @@ Item {
                     easing.bezierCurve: Theme.expressiveCurves.expressiveEffects
                 }
             }
-            font.pixelSize: root.part.background || !root.emphasize ? Theme.fontSizeLarge : Theme.fontSizeXLarge
+            font.pixelSize: root.part.background || !root.emphasize ? Math.round(root.leadFontSize * Theme.fontSizeLarge / Theme.fontSizeXLarge) : root.leadFontSize
             font.weight: root.synced && !root.part.background ? Theme.fontWeightBold : Theme.fontWeightMedium
             scale: root.textScale
             Behavior on scale {

quickshell/Modules/DankDash/Overview/ClockCard.qml

@@ -21,6 +21,9 @@ Card {
     }
     readonly property string minuteText: String(systemClock.date.getMinutes()).padStart(2, "0")
     readonly property string secondText: String(systemClock.date.getSeconds()).padStart(2, "0")
+    readonly property string dateText: showDate ? systemClock.date.toLocaleDateString(I18n.locale(), SettingsData.getEffectiveDateFormat("ddd, MMM d")) : ""
+    readonly property color supportingColor: tinted ? contentColor : mutedColor
+    readonly property real supportLine: Theme.fontSizeMedium * 1.5
 
     entryId: "clock"
     tone: options.tone ?? ""
@@ -38,28 +41,75 @@ Card {
             hours: root.hourText
             minutes: root.minuteText
             seconds: root.showSeconds ? root.secondText : ""
-            dateText: root.showDate ? systemClock.date.toLocaleDateString(I18n.locale(), "MMMM d") : ""
-            dayText: root.showDate ? systemClock.date.toLocaleDateString(I18n.locale(), "dddd") : ""
+            dateText: root.dateText
             color: root.accentColor
-            supportingColor: root.tinted ? root.contentColor : root.mutedColor
+            supportingColor: root.supportingColor
         }
     }
 
     Component {
         id: analogFace
 
-        DankAnalogClock {
-            hours: systemClock.date.getHours()
-            minutes: systemClock.date.getMinutes()
-            seconds: systemClock.date.getSeconds()
-            showSeconds: root.showSeconds
-            showNumbers: root.options.numbers === true
-            numbersOutside: root.tinted
-            dateText: root.showDate ? systemClock.date.toLocaleDateString(I18n.locale(), "MMM d") : ""
-            color: root.tinted ? root.onAccentColor : root.accentColor
-            numberColor: root.accentColor
-            backgroundColor: root.tinted ? root.accentColor : root.chipColor
-            facePadding: 0
+        Item {
+            id: face
+
+            readonly property real span: Math.min(width, height)
+            readonly property bool insideDate: root.dateText !== "" && span > Theme.buttonHeightM * 2 && dialMetrics.advanceWidth <= span * 0.5
+            readonly property bool sideDate: root.dateText !== "" && !insideDate && width - height >= dateMetrics.advanceWidth + Theme.spacingS
+            readonly property bool belowDate: root.dateText !== "" && !insideDate && !sideDate
+            readonly property real dialSize: belowDate ? Math.min(width, height - root.supportLine - Theme.spacingS) : span
+            readonly property real groupWidth: sideDate ? dialSize + Theme.spacingS + dateMetrics.advanceWidth : dialSize
+            readonly property real groupHeight: belowDate ? dialSize + Theme.spacingS + root.supportLine : dialSize
+
+            DankAnalogClock {
+                id: dial
+                x: (face.width - face.groupWidth) / 2
+                y: (face.height - face.groupHeight) / 2
+                width: face.dialSize
+                height: face.dialSize
+                hours: systemClock.date.getHours()
+                minutes: systemClock.date.getMinutes()
+                seconds: systemClock.date.getSeconds()
+                showSeconds: root.showSeconds
+                showNumbers: root.options.numbers === true
+                numbersOutside: root.tinted
+                dateText: face.insideDate ? root.dateText : ""
+                color: root.tinted ? root.onAccentColor : root.accentColor
+                numberColor: root.accentColor
+                backgroundColor: root.tinted ? root.accentColor : root.chipColor
+                facePadding: 0
+            }
+
+            StyledText {
+                id: dateLabel
+                visible: face.sideDate || face.belowDate
+                x: face.sideDate ? dial.x + dial.width + Theme.spacingS : 0
+                y: face.sideDate ? (face.height - height) / 2 : dial.y + dial.height + Theme.spacingS
+                width: face.sideDate ? dateMetrics.advanceWidth : face.width
+                height: root.supportLine
+                text: root.dateText
+                color: root.supportingColor
+                font.pixelSize: Theme.fontSizeMedium
+                font.weight: Theme.fontWeightMedium
+                minimumPixelSize: Theme.fontSizeSmall
+                fontSizeMode: Text.HorizontalFit
+                horizontalAlignment: face.sideDate ? Text.AlignLeft : Text.AlignHCenter
+                wrapMode: Text.NoWrap
+                elide: Text.ElideRight
+            }
+
+            TextMetrics {
+                id: dateMetrics
+                font: dateLabel.font
+                text: root.dateText
+            }
+
+            TextMetrics {
+                id: dialMetrics
+                font.family: dateLabel.font.family
+                font.pixelSize: Theme.fontSizeSmall
+                text: root.dateText
+            }
         }
     }