Implement compact toggles for clock & media topbar widgets

Common/Prefs.qml

@@ -39,6 +39,8 @@ Singleton {
     property bool showControlCenterButton: true
     property bool showWorkspaceIndex: false
     property bool showWorkspacePadding: false
+    property bool clockCompactMode: false
+    property bool mediaCompactMode: false
     property var topBarLeftWidgets: ["launcherButton", "workspaceSwitcher", "focusedWindow"]
     property var topBarCenterWidgets: ["music", "clock", "weather"]
     property var topBarRightWidgets: ["systemTray", "clipboard", "systemResources", "notificationButton", "battery", "controlCenterButton"]
@@ -165,6 +167,8 @@ Singleton {
                 showControlCenterButton = settings.showControlCenterButton !== undefined ? settings.showControlCenterButton : true;
                 showWorkspaceIndex = settings.showWorkspaceIndex !== undefined ? settings.showWorkspaceIndex : false;
                 showWorkspacePadding = settings.showWorkspacePadding !== undefined ? settings.showWorkspacePadding : false;
+                clockCompactMode = settings.clockCompactMode !== undefined ? settings.clockCompactMode : false;
+                mediaCompactMode = settings.mediaCompactMode !== undefined ? settings.mediaCompactMode : false;
                 if (settings.topBarWidgetOrder) {
                     topBarLeftWidgets = settings.topBarWidgetOrder.filter(w => ["launcherButton", "workspaceSwitcher", "focusedWindow"].includes(w));
                     topBarCenterWidgets = settings.topBarWidgetOrder.filter(w => ["clock", "music", "weather"].includes(w));
@@ -247,6 +251,8 @@ Singleton {
             "showControlCenterButton": showControlCenterButton,
             "showWorkspaceIndex": showWorkspaceIndex,
             "showWorkspacePadding": showWorkspacePadding,
+            "clockCompactMode": clockCompactMode,
+            "mediaCompactMode": mediaCompactMode,
             "topBarLeftWidgets": topBarLeftWidgets,
             "topBarCenterWidgets": topBarCenterWidgets,
             "topBarRightWidgets": topBarRightWidgets,
@@ -284,6 +290,16 @@ Singleton {
         saveSettings();
     }
 
+    function setClockCompactMode(enabled) {
+        clockCompactMode = enabled;
+        saveSettings();
+    }
+
+    function setMediaCompactMode(enabled) {
+        mediaCompactMode = enabled;
+        saveSettings();
+    }
+
     function applyStoredTheme() {
         if (typeof Theme !== "undefined") {
             Theme.isLightMode = isLightMode;

Modules/Settings/WidgetsTab.qml

@@ -471,6 +471,13 @@ ScrollView {
                 onSpacerSizeChanged: (sectionId, itemId, newSize) => {
                     widgetsTab.handleSpacerSizeChanged(sectionId, itemId, newSize);
                 }
+                onCompactModeChanged: (widgetId, enabled) => {
+                    if (widgetId === "clock") {
+                        Prefs.setClockCompactMode(enabled);
+                    } else if (widgetId === "music") {
+                        Prefs.setMediaCompactMode(enabled);
+                    }
+                }
             }
 
             DankSections {
@@ -497,6 +504,13 @@ ScrollView {
                 onSpacerSizeChanged: (sectionId, itemId, newSize) => {
                     widgetsTab.handleSpacerSizeChanged(sectionId, itemId, newSize);
                 }
+                onCompactModeChanged: (widgetId, enabled) => {
+                    if (widgetId === "clock") {
+                        Prefs.setClockCompactMode(enabled);
+                    } else if (widgetId === "music") {
+                        Prefs.setMediaCompactMode(enabled);
+                    }
+                }
             }
 
             DankSections {
@@ -523,6 +537,13 @@ ScrollView {
                 onSpacerSizeChanged: (sectionId, itemId, newSize) => {
                     widgetsTab.handleSpacerSizeChanged(sectionId, itemId, newSize);
                 }
+                onCompactModeChanged: (widgetId, enabled) => {
+                    if (widgetId === "clock") {
+                        Prefs.setClockCompactMode(enabled);
+                    } else if (widgetId === "music") {
+                        Prefs.setMediaCompactMode(enabled);
+                    }
+                }
             }
 
         }

Modules/TopBar/Clock.qml

@@ -43,7 +43,7 @@ Rectangle {
             font.pixelSize: Theme.fontSizeSmall
             color: Theme.outlineButton
             anchors.verticalCenter: parent.verticalCenter
-            visible: !compactMode
+            visible: !Prefs.clockCompactMode
         }
 
         StyledText {
@@ -51,7 +51,7 @@ Rectangle {
             font.pixelSize: Theme.fontSizeMedium - 1
             color: Theme.surfaceText
             anchors.verticalCenter: parent.verticalCenter
-            visible: !compactMode
+            visible: !Prefs.clockCompactMode
         }
 
     }

Modules/TopBar/Media.qml

@@ -33,7 +33,7 @@ Rectangle {
             PropertyChanges {
                 target: root
                 opacity: 1
-                width: compactMode ? compactContentWidth : normalContentWidth
+                width: Prefs.mediaCompactMode ? compactContentWidth : normalContentWidth
             }
 
         },
@@ -100,8 +100,8 @@ Rectangle {
                 id: mediaText
 
                 anchors.verticalCenter: parent.verticalCenter
-                width: compactMode ? 60 : 140
+                width: Prefs.mediaCompactMode ? 60 : 140
-                visible: !compactMode
+                visible: !Prefs.mediaCompactMode
                 text: {
                     if (!activePlayer || !activePlayer.trackTitle)
                         return "";

Widgets/DankSections.qml

@@ -17,6 +17,7 @@ Column {
     signal addWidget(string sectionId)
     signal removeWidget(string sectionId, string itemId)
     signal spacerSizeChanged(string sectionId, string itemId, int newSize)
+    signal compactModeChanged(string widgetId, bool enabled)
 
     width: parent.width
     spacing: Theme.spacingM
@@ -131,6 +132,58 @@ Column {
                         anchors.verticalCenter: parent.verticalCenter
                         spacing: Theme.spacingXS
 
+                        Item {
+                            width: 32
+                            height: 32
+                            visible: modelData.id === "clock" || modelData.id === "music"
+                            
+                            DankActionButton {
+                                id: compactModeButton
+                                anchors.fill: parent
+                                buttonSize: 32
+                                iconName: (modelData.id === "clock" && Prefs.clockCompactMode) || (modelData.id === "music" && Prefs.mediaCompactMode) ? "zoom_out" : "zoom_in"
+                                iconSize: 18
+                                iconColor: ((modelData.id === "clock" && Prefs.clockCompactMode) || (modelData.id === "music" && Prefs.mediaCompactMode)) ? Theme.primary : Theme.outline
+                                onClicked: {
+                                    if (modelData.id === "clock") {
+                                        root.compactModeChanged("clock", !Prefs.clockCompactMode);
+                                    } else if (modelData.id === "music") {
+                                        root.compactModeChanged("music", !Prefs.mediaCompactMode);
+                                    }
+                                }
+                            }
+
+                            Rectangle {
+                                id: compactModeTooltip
+                                width: tooltipText.contentWidth + Theme.spacingM * 2
+                                height: tooltipText.contentHeight + Theme.spacingS * 2
+                                radius: Theme.cornerRadius
+                                color: Theme.surfaceContainer
+                                border.color: Theme.outline
+                                border.width: 1
+                                visible: compactModeButton.children[1] && compactModeButton.children[1].containsMouse
+                                opacity: visible ? 1 : 0
+                                x: -width - Theme.spacingS
+                                y: (parent.height - height) / 2
+                                z: 100
+
+                                StyledText {
+                                    id: tooltipText
+                                    anchors.centerIn: parent
+                                    text: "Compact Mode"
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: Theme.surfaceText
+                                }
+
+                                Behavior on opacity {
+                                    NumberAnimation {
+                                        duration: Theme.shortDuration
+                                        easing.type: Theme.standardEasing
+                                    }
+                                }
+                            }
+                        }
+
                         DankActionButton {
                             visible: modelData.id !== "spacer"
                             buttonSize: 32