Redesign center command center

Widgets/TopBar/ClockWidget.qml

@@ -1,33 +1,14 @@
 import QtQuick
-import Quickshell.Services.Mpris
 import "../../Common"
-import "../../Services"
 
 Rectangle {
     id: root
     
-    property bool hasActiveMedia: false
-    property var activePlayer: null
-    property bool weatherAvailable: false
-    property string weatherCode: ""
-    property int weatherTemp: 0
-    property int weatherTempF: 0
-    property bool useFahrenheit: false
     property date currentDate: new Date()
     
     signal clockClicked()
     
-    width: {
-        let baseWidth = 200
-        if (root.hasActiveMedia) {
-            let mediaWidth = 24 + Theme.spacingXS + mediaTitleText.implicitWidth + Theme.spacingM + 180
-            return Math.min(Math.max(mediaWidth, 300), parent.width - Theme.spacingL * 2)
-        } else if (root.weatherAvailable) {
-            return Math.min(280, parent.width - Theme.spacingL * 2)
-        } else {
-            return Math.min(baseWidth, parent.width - Theme.spacingL * 2)
-        }
-    }
+    width: clockRow.implicitWidth + Theme.spacingM
     height: 30
     radius: Theme.cornerRadius
     color: clockMouseArea.containsMouse ? 
@@ -42,94 +23,31 @@ Rectangle {
     }
     
     Row {
+        id: clockRow
         anchors.centerIn: parent
-        spacing: Theme.spacingM
+        spacing: Theme.spacingS
         
-        // Media info or Weather info
-        Row {
-            spacing: Theme.spacingXS
-            visible: root.hasActiveMedia || root.weatherAvailable
+        Text {
+            text: Qt.formatTime(root.currentDate, "h:mm AP")
+            font.pixelSize: Theme.fontSizeMedium
+            color: Theme.surfaceText
+            font.weight: Font.Medium
             anchors.verticalCenter: parent.verticalCenter
-            
-            // Audio visualization placeholder - will be replaced by parent
-            Item {
-                id: audioVisualizationPlaceholder
-                width: 20
-                height: Theme.iconSize
-                anchors.verticalCenter: parent.verticalCenter
-                visible: root.hasActiveMedia
-            }
-            
-            // Song title when media is playing
-            Text {
-                id: mediaTitleText
-                text: root.activePlayer?.trackTitle || "Unknown Track"
-                font.pixelSize: Theme.fontSizeMedium
-                color: Theme.surfaceText
-                font.weight: Font.Medium
-                anchors.verticalCenter: parent.verticalCenter
-                visible: root.hasActiveMedia
-                width: Math.min(implicitWidth, root.width - 100)
-                elide: Text.ElideRight
-            }
-            
-            // Weather icon when no media but weather available
-            Text {
-                text: WeatherService.getWeatherIcon(root.weatherCode)
-                font.family: Theme.iconFont
-                font.pixelSize: Theme.iconSize - 2
-                color: Theme.surfaceText
-                anchors.verticalCenter: parent.verticalCenter
-                visible: !root.hasActiveMedia && root.weatherAvailable
-            }
-            
-            // Weather temp when no media but weather available
-            Text {
-                text: (root.useFahrenheit ? root.weatherTempF : root.weatherTemp) + "°" + (root.useFahrenheit ? "F" : "C")
-                font.pixelSize: Theme.fontSizeMedium
-                color: Theme.surfaceText
-                font.weight: Font.Medium
-                anchors.verticalCenter: parent.verticalCenter
-                visible: !root.hasActiveMedia && root.weatherAvailable
-            }
         }
         
-        // Separator
         Text {
             text: "•"
             font.pixelSize: Theme.fontSizeMedium
             color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5)
             anchors.verticalCenter: parent.verticalCenter
-            visible: root.hasActiveMedia || root.weatherAvailable
         }
         
-        // Time and date
-        Row {
-            spacing: Theme.spacingS
+        Text {
+            text: Qt.formatDate(root.currentDate, "ddd d")
+            font.pixelSize: Theme.fontSizeMedium
+            color: Theme.surfaceText
+            font.weight: Font.Medium
             anchors.verticalCenter: parent.verticalCenter
-            
-            Text {
-                text: Qt.formatTime(root.currentDate, "h:mm AP")
-                font.pixelSize: Theme.fontSizeMedium
-                color: Theme.surfaceText
-                font.weight: Font.Medium
-                anchors.verticalCenter: parent.verticalCenter
-            }
-            
-            Text {
-                text: "•"
-                font.pixelSize: Theme.fontSizeMedium
-                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5)
-                anchors.verticalCenter: parent.verticalCenter
-            }
-            
-            Text {
-                text: Qt.formatDate(root.currentDate, "ddd d")
-                font.pixelSize: Theme.fontSizeMedium
-                color: Theme.surfaceText
-                font.weight: Font.Medium
-                anchors.verticalCenter: parent.verticalCenter
-            }
         }
     }
     

Widgets/TopBar/MediaWidget.qml

@@ -0,0 +1,67 @@
+import QtQuick
+import Quickshell.Services.Mpris
+import "../../Common"
+
+Rectangle {
+    id: root
+    
+    property var activePlayer: null
+    property bool hasActiveMedia: activePlayer && (activePlayer.trackTitle || activePlayer.trackArtist)
+    
+    signal clicked()
+    
+    visible: hasActiveMedia
+    width: hasActiveMedia ? Math.min(200, mediaText.implicitWidth + Theme.spacingS + 48) : 0
+    height: 30
+    radius: Theme.cornerRadius
+    color: mediaArea.containsMouse ? 
+           Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) :
+           Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08)
+    
+    Behavior on color {
+        ColorAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+    
+    Behavior on width {
+        NumberAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+    
+    Row {
+        anchors.centerIn: parent
+        spacing: Theme.spacingXS
+        
+        AudioVisualization {
+            width: 20
+            height: Theme.iconSize
+            anchors.verticalCenter: parent.verticalCenter
+            hasActiveMedia: root.hasActiveMedia
+            activePlayer: root.activePlayer
+        }
+        
+        Text {
+            id: mediaText
+            text: activePlayer?.trackTitle || "Unknown Track"
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceText
+            font.weight: Font.Medium
+            anchors.verticalCenter: parent.verticalCenter
+            width: Math.min(implicitWidth, 150)
+            elide: Text.ElideRight
+        }
+    }
+    
+    MouseArea {
+        id: mediaArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        
+        onClicked: root.clicked()
+    }
+}

Widgets/TopBar/TopBar.qml

@@ -172,27 +172,44 @@ PanelWindow {
             ClockWidget {
                 id: clockWidget
                 anchors.centerIn: parent
-                hasActiveMedia: topBar.hasActiveMedia
-                activePlayer: topBar.activePlayer
-                weatherAvailable: topBar.weatherAvailable
-                weatherCode: topBar.weatherCode
-                weatherTemp: topBar.weatherTemp
-                weatherTempF: topBar.weatherTempF
-                useFahrenheit: topBar.useFahrenheit
                 
                 onClockClicked: {
                     if (topBar.shellRoot) {
                         topBar.shellRoot.calendarVisible = !topBar.shellRoot.calendarVisible
                     }
                 }
+            }
+            
+            MediaWidget {
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: clockWidget.left
+                anchors.rightMargin: Theme.spacingS
+                activePlayer: topBar.activePlayer
+                hasActiveMedia: topBar.hasActiveMedia
                 
-                // Insert audio visualization into the clock widget placeholder
-                AudioVisualization {
-                    parent: clockWidget.children[0].children[0].children[0] // Row -> Row (media info) -> Item (placeholder)
-                    anchors.fill: parent
-                    hasActiveMedia: topBar.hasActiveMedia
-                    activePlayer: topBar.activePlayer
-                    visible: topBar.hasActiveMedia
+                onClicked: {
+                    if (topBar.shellRoot) {
+                        topBar.shellRoot.calendarVisible = !topBar.shellRoot.calendarVisible
+                    }
+                }
+            }
+            
+            WeatherWidget {
+                id: weatherWidget
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: clockWidget.right
+                anchors.leftMargin: Theme.spacingS
+                
+                weatherAvailable: topBar.weatherAvailable
+                weatherCode: topBar.weatherCode
+                weatherTemp: topBar.weatherTemp
+                weatherTempF: topBar.weatherTempF
+                useFahrenheit: topBar.useFahrenheit
+                
+                onClicked: {
+                    if (topBar.shellRoot) {
+                        topBar.shellRoot.calendarVisible = !topBar.shellRoot.calendarVisible
+                    }
                 }
             }
             

Widgets/TopBar/WeatherWidget.qml

@@ -0,0 +1,68 @@
+import QtQuick
+import "../../Common"
+import "../../Services"
+
+Rectangle {
+    id: root
+    
+    property bool weatherAvailable: false
+    property string weatherCode: ""
+    property int weatherTemp: 0
+    property int weatherTempF: 0
+    property bool useFahrenheit: false
+    
+    signal clicked()
+    
+    visible: weatherAvailable
+    width: weatherAvailable ? Math.min(100, weatherRow.implicitWidth + Theme.spacingS) : 0
+    height: 30
+    radius: Theme.cornerRadius
+    color: weatherArea.containsMouse ? 
+           Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) :
+           Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08)
+    
+    Behavior on color {
+        ColorAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+    
+    Behavior on width {
+        NumberAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+    
+    Row {
+        id: weatherRow
+        anchors.centerIn: parent
+        spacing: Theme.spacingXS
+        
+        Text {
+            text: WeatherService.getWeatherIcon(weatherCode)
+            font.family: Theme.iconFont
+            font.pixelSize: Theme.iconSize - 4
+            color: Theme.primary
+            anchors.verticalCenter: parent.verticalCenter
+        }
+        
+        Text {
+            text: (useFahrenheit ? weatherTempF : weatherTemp) + "°"
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceText
+            font.weight: Font.Medium
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+    
+    MouseArea {
+        id: weatherArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        
+        onClicked: root.clicked()
+    }
+}

Widgets/TopBar/qmldir

@@ -2,6 +2,8 @@ TopBar 1.0 TopBar.qml
 LauncherButton 1.0 LauncherButton.qml
 WorkspaceSwitcher 1.0 WorkspaceSwitcher.qml
 ClockWidget 1.0 ClockWidget.qml
+MediaWidget 1.0 MediaWidget.qml
+WeatherWidget 1.0 WeatherWidget.qml
 SystemTrayWidget 1.0 SystemTrayWidget.qml
 NotificationCenterButton 1.0 NotificationCenterButton.qml
 ControlCenterButton 1.0 ControlCenterButton.qml