quickshell: should be everything I want now

2025-10-12 23:23:36 +02:00
parent abadf04aa2
commit 22105c20d4
84 changed files with 4375 additions and 1312 deletions
--- a/quickshell/Modules/Bar/Bar.qml
+++ b/quickshell/Modules/Bar/Bar.qml
@@ -33,7 +33,7 @@ Scope {
                    screen: modelData
                    WlrLayershell.namespace: "quickshell-bar"
                    color: Colors.transparent
-                    implicitHeight: 45
+                    implicitHeight: Style.barHeight

                    anchors {
                        left: true
@@ -94,6 +94,9 @@ Scope {
                        SymbolButton {
                            symbol: Icons.distro
                            buttonColor: Colors.distroColor
+                            onClicked: {
+                                PanelService.getPanel("controlCenterPanel")?.toggle(this)
+                            }
                            onRightClicked: {
                                if (action.running) {
                                    action.signal(15);
@@ -164,37 +167,49 @@ Scope {
                            rightMargin: 5
                        }

-                        NetworkSpeed {
+                        RowLayout {
+                            id: monitorsLayout
+                            visible: !SettingsService.showLyricsBar
+
+                            height: parent.height
+                            NetworkSpeed {
+                            }
+
+                            Separator {
+                            }
+
+                            Item {
+                                width: 10
+                            }
+
+                            Ip {
+                                showCountryCode: true
+                            }
+
+                            CpuTemp {
+                            }
+
+                            MemUsage {
+                            }
+
+                            CpuUsage {
+                            }
+
+                            Battery {
+                            }
+
+                            Brightness {
+                                screen: modelData
+                            }
+
+                            Volume {
+                            }
                        }

-                        Separator {
-                        }
-
-                        Item {
-                            width: 10
-                        }
-
-                        Ip {
-                            showCountryCode: true
-                        }
-
-                        CpuTemp {
-                        }
-
-                        MemUsage {
-                        }
-
-                        CpuUsage {
-                        }
-
-                        Battery {
-                        }
-
-                        Brightness {
-                            screen: modelData
-                        }
-
-                        Volume {
+                        LyricsBar {
+                            id: lyricsBar
+                            visible: SettingsService.showLyricsBar
+                            width: 600
                        }

                        Item {
--- a/quickshell/Modules/Bar/Components/CavaBar.qml
+++ b/quickshell/Modules/Bar/Components/CavaBar.qml
@@ -2,8 +2,8 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import qs.Constants
-import qs.Modules.Misc
 import qs.Services
+import qs.Utils

 Item {
    id: root
--- a/quickshell/Modules/Bar/Components/FocusedWindow.qml
+++ b/quickshell/Modules/Bar/Components/FocusedWindow.qml
@@ -78,7 +78,7 @@ Item {
                anchors.verticalCenter: parent.verticalCenter
                font.pointSize: Fonts.medium
                font.family: Fonts.primary
-                color: Colors.accent
+                color: Colors.primary

                Process {
                    id: action
--- a/quickshell/Modules/Bar/Components/Ip.qml
+++ b/quickshell/Modules/Bar/Components/Ip.qml
@@ -29,7 +29,7 @@ Item {

        Text {
            text: Icons.global
-            font.pointSize: Fonts.icon + 5
+            font.pointSize: Fonts.icon + 6
            color: Colors.peach
        }

@@ -54,7 +54,7 @@ Item {

            Behavior on implicitWidth {
                NumberAnimation {
-                    duration: 200
+                    duration: Style.animationFast
                    easing.type: Easing.InOutCubic
                }

--- a/quickshell/Modules/Bar/Components/LyricsBar.qml
+++ b/quickshell/Modules/Bar/Components/LyricsBar.qml
@@ -0,0 +1,88 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Noctalia
+import qs.Services
+
+Rectangle {
+    implicitHeight: parent.height
+    radius: Style.radiusS
+    color: Colors.base
+    border.color: Colors.primary
+    border.width: Style.borderS
+
+    Connections {
+        target: SettingsService
+        onShowLyricsBarChanged: {
+            visible = SettingsService.showLyricsBar;
+            if (visible)
+                LyricsService.startSyncing();
+            else
+                LyricsService.stopSyncing();
+        }
+    }
+
+    RowLayout {
+        anchors.fill: parent
+        anchors.leftMargin: Style.marginM
+        anchors.rightMargin: Style.marginM
+        spacing: Style.marginS
+
+        Item {
+            implicitWidth: parent.width - slowerButton.implicitWidth * 3 - parent.spacing * 3 - parent.anchors.leftMargin - parent.anchors.rightMargin
+            Layout.fillHeight: true
+            clip: true
+
+            NText {
+                text: LyricsService.lyrics[LyricsService.currentIndex] || ""
+                family: Fonts.sans
+                pointSize: Style.fontSizeS
+                maximumLineCount: 1
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+        }
+
+        NIconButton {
+            id: slowerButton
+
+            baseSize: 24
+            colorBg: Color.transparent
+            colorBgHover: Colors.blue
+            colorFg: Colors.blue
+            icon: "rotate-2"
+            onClicked: {
+                LyricsService.increaseOffset();
+            }
+        }
+
+        NIconButton {
+            id: playPauseButton
+
+            baseSize: 24
+            colorBg: Color.transparent
+            colorBgHover: Colors.yellow
+            colorFg: Colors.yellow
+            icon: "rotate-clockwise-2"
+            onClicked: {
+                LyricsService.decreaseOffset();
+            }
+        }
+
+        NIconButton {
+            id: nextButton
+
+            baseSize: 24
+            colorBg: Color.transparent
+            colorBgHover: Colors.green
+            colorFg: Colors.green
+            icon: "rotate-clockwise"
+            onClicked: {
+                LyricsService.resetOffset();
+            }
+        }
+
+    }
+
+}
--- a/quickshell/Modules/Bar/Components/NetworkSpeed.qml
+++ b/quickshell/Modules/Bar/Components/NetworkSpeed.qml
@@ -19,15 +19,15 @@ Item {
        Text {
            text: Icons.download
            font.pointSize: Fonts.icon - 3
-            color: Colors.accent
+            color: Colors.primary
            Layout.leftMargin: 10
        }

        Text {
-            text: SystemStatService.formatSpeed(SystemStatService.txSpeed)
+            text: SystemStatService.formatSpeed(SystemStatService.rxSpeed)
            font.pointSize: Fonts.medium
            font.family: Fonts.primary
-            color: Colors.accent
+            color: Colors.primary
        }

        Item {
@@ -37,14 +37,14 @@ Item {
        Text {
            text: Icons.upload
            font.pointSize: Fonts.icon - 3
-            color: Colors.accent
+            color: Colors.primary
        }

        Text {
-            text: SystemStatService.formatSpeed(SystemStatService.rxSpeed)
+            text: SystemStatService.formatSpeed(SystemStatService.txSpeed)
            font.pointSize: Fonts.medium
            font.family: Fonts.primary
-            color: Colors.accent
+            color: Colors.primary
        }

    }
--- a/quickshell/Modules/Bar/Components/Time.qml
+++ b/quickshell/Modules/Bar/Components/Time.qml
@@ -6,5 +6,13 @@ Text {
    text: TimeService.time + " | " + TimeService.dateString
    font.pointSize: Fonts.medium
    font.family: Fonts.primary
-    color: Colors.accent
+    color: Colors.primary
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            PanelService.getPanel("calendarPanel")?.toggle(this)
+        }
+    }
 }
--- a/quickshell/Modules/Bar/Components/Workspace.qml
+++ b/quickshell/Modules/Bar/Components/Workspace.qml
@@ -16,15 +16,15 @@ Item {
    property ListModel localWorkspaces
    property real masterProgress: 0
    property bool effectsActive: false
-    property color effectColor: Colors.accent
+    property color effectColor: Colors.primary
    property int horizontalPadding: 16
    property int spacingBetweenPills: 8
    property bool isDestroying: false

-    signal workspaceChanged(int workspaceId, color accentColor)
+    signal workspaceChanged(int workspaceId, color primaryColor)

    function triggerUnifiedWave() {
-        effectColor = Colors.accent;
+        effectColor = Colors.primary;
        masterAnimation.restart();
    }

@@ -33,7 +33,7 @@ Item {
            const ws = localWorkspaces.get(i);
            if (ws.isFocused === true) {
                root.triggerUnifiedWave();
-                root.workspaceChanged(ws.id, Colors.accent);
+                root.workspaceChanged(ws.id, Colors.primary);
                break;
            }
        }
@@ -180,10 +180,10 @@ Item {
                    }
                    color: {
                        if (model.isFocused)
-                            return Colors.accent;
+                            return Colors.primary;

                        if (model.isActive)
-                            return Colors.accent.lighter(130);
+                            return Colors.primary.lighter(130);

                        if (model.isUrgent)
                            return Theme.error;
--- a/quickshell/Modules/Bar/Misc/MonitorItem.qml
+++ b/quickshell/Modules/Bar/Misc/MonitorItem.qml
@@ -11,7 +11,7 @@ Item {
    property real maxValue: 100
    property real value: 100
    property string textValue: "" // override value in textDisplay if set
-    property color fillColor: Colors.accent
+    property color fillColor: Colors.primary
    property string textSuffix: ""
    property bool pointerCursor: true
    property alias hovered: mouseArea.containsMouse
@@ -127,7 +127,7 @@ Item {

            Behavior on implicitWidth {
                NumberAnimation {
-                    duration: 200
+                    duration: Style.animationNormal
                    easing.type: Easing.InOutCubic
                }

--- a/quickshell/Modules/Bar/Misc/SymbolButton.qml
+++ b/quickshell/Modules/Bar/Misc/SymbolButton.qml
@@ -9,6 +9,8 @@ Item {
    required property string symbol
    property color buttonColor: Colors.distroColor
    readonly property alias hovered: mouseArea.containsMouse
+    property real iconSize: Fonts.icon
+    property real radius: Style.radiusS

    signal clicked()
    signal rightClicked()
@@ -35,7 +37,7 @@ Item {
        anchors.fill: parent
        text: symbol
        font.family: Fonts.nerd
-        font.pointSize: Fonts.icon
+        font.pointSize: iconSize
        font.bold: false
        color: buttonColor
        horizontalAlignment: Text.AlignHCenter
@@ -46,11 +48,12 @@ Item {
        anchors.fill: parent
        color: parent.hovered ? buttonColor : Colors.transparent
        opacity: 0.3
-        radius: 14
+        radius: root.radius

        Behavior on color {
            ColorAnimation {
-                duration: 120
+                duration: Style.animationNormal
+                easing.type: Easing.InOutCubic
            }

        }
--- a/quickshell/Modules/Bar/Misc/SystemTray.qml
+++ b/quickshell/Modules/Bar/Misc/SystemTray.qml
@@ -8,6 +8,7 @@ import Quickshell.Widgets
 import qs.Modules.Bar.Misc
 import qs.Constants
 import qs.Services
+import qs.Utils

 Rectangle {
  id: root
@@ -107,8 +108,7 @@ Rectangle {
                           trayMenu.item.menu = modelData.menu
                           trayMenu.item.showAt(parent, menuX, menuY)
                         } else {
-                        //    Logger.log("Tray", "No menu available for", modelData.id, "or trayMenu not set")
-                        console.log("No menu available for", modelData.id, "or trayMenu not set")
+                           Logger.log("Tray", "No menu available for", modelData.id, "or trayMenu not set")
                         }
                       }
                     }
--- a/quickshell/Modules/Bar/Misc/TrayMenu.qml
+++ b/quickshell/Modules/Bar/Misc/TrayMenu.qml
@@ -3,6 +3,8 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell
 import qs.Constants
+import qs.Utils
+import qs.Noctalia

 PopupWindow {
  id: root
@@ -19,7 +21,7 @@ PopupWindow {
  implicitWidth: menuWidth

  // Use the content height of the Flickable for implicit height
-  implicitHeight: Math.min(screen ? screen.height * 0.9 : Screen.height * 0.9, flickable.contentHeight + 20)
+  implicitHeight: Math.min(screen ? screen.height * 0.9 : Screen.height * 0.9, flickable.contentHeight + (Style.marginS * 2))
  visible: false
  color: Colors.transparent
  anchor.item: anchorItem
@@ -28,7 +30,7 @@ PopupWindow {

  function showAt(item, x, y) {
    if (!item) {
-      console.warn("AnchorItem is undefined, won't show menu.")
+      Logger.warn("TrayMenu", "AnchorItem is undefined, won't show menu.");
      return
    }

@@ -84,15 +86,15 @@ PopupWindow {
  Rectangle {
    anchors.fill: parent
    color: Colors.base
-    border.color: Colors.accent
+    border.color: Colors.primary
    border.width: 2
-    radius: 14
+    radius: Style.radiusM
  }

  Flickable {
    id: flickable
    anchors.fill: parent
-    anchors.margins: 10
+    anchors.margins: Style.marginS
    contentHeight: columnLayout.implicitHeight
    interactive: true

@@ -115,88 +117,56 @@ PopupWindow {
              return 8
            } else {
              // Calculate based on text content
-              const textHeight = text.contentHeight || (Fonts.small)
-              return textHeight + 16
+              const textHeight = text.contentHeight || (Style.fontSizeS * 1.2)
+              return Math.max(28, textHeight + (Style.marginS * 2))
            }
          }

          color: Colors.transparent
          property var subMenu: null

-          Rectangle {
-            width: parent.width - 16
-            height: 1
+          NDivider {
            anchors.centerIn: parent
+            width: parent.width - (Style.marginM * 2)
            visible: modelData?.isSeparator ?? false
-            gradient: Gradient {
-              orientation: Gradient.Horizontal
-              GradientStop {
-                position: 0.0
-                color: Colors.transparent
-              }
-              GradientStop {
-                position: 0.1
-                color: Colors.accent
-              }
-              GradientStop {
-                position: 0.9
-                color: Colors.accent
-              }
-              GradientStop {
-                position: 1.0
-                color: Colors.transparent
-              }
-            }
          }

          Rectangle {
            anchors.fill: parent
-            color: mouseArea.containsMouse ? Colors.accent : Colors.transparent
-            radius: 10
+            color: mouseArea.containsMouse ? Colors.primary : Colors.transparent
+            radius: Style.radiusS
            visible: !(modelData?.isSeparator ?? false)

            RowLayout {
              anchors.fill: parent
-              anchors.leftMargin: 8
-              anchors.rightMargin: 8
-              spacing: 8
+              anchors.leftMargin: Style.marginM
+              anchors.rightMargin: Style.marginM
+              spacing: Style.marginS

-              Text {
+              NText {
                id: text
                Layout.fillWidth: true
-                color: (modelData?.enabled ?? true) ? (mouseArea.containsMouse ? Colors.base : Colors.text) : Colors.text
+                color: (modelData?.enabled ?? true) ? (mouseArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface) : Color.mOnSurfaceVariant
                text: modelData?.text !== "" ? modelData?.text.replace(/[\n\r]+/g, ' ') : "..."
-                font.pointSize: Fonts.small
+                pointSize: Style.fontSizeS
                verticalAlignment: Text.AlignVCenter
                wrapMode: Text.WordWrap
              }

              Image {
-                Layout.preferredWidth: 14
-                Layout.preferredHeight: 14
+                Layout.preferredWidth: Style.marginL
+                Layout.preferredHeight: Style.marginL
                source: modelData?.icon ?? ""
                visible: (modelData?.icon ?? "") !== ""
                fillMode: Image.PreserveAspectFit
              }

-              Text {
+              NIcon {
+                icon: modelData?.hasChildren ? "menu" : ""
+                pointSize: Style.fontSizeS
                verticalAlignment: Text.AlignVCenter
                visible: modelData?.hasChildren ?? false
-                color: (mouseArea.containsMouse ? Colors.base : Colors.text)
-
-                text: {
-                  const icon = modelData?.hasChildren ? "menu" : ""
-                  if ((icon === undefined) || (icon === "")) {
-                    return ""
-                  }
-                  if (Icons.get(icon) === undefined) {
-                    console.warn("Icon", `"${icon}"`, "doesn't exist in the icons font")
-                    return Icons.get(Icons.defaultIcon)
-                  }
-                  return Icons.get(icon)
-                }
-                font.family: Icons.fontFamily
-                font.pointSize: Fonts.small
+                color: (mouseArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface)
              }
            }

--- a/quickshell/Modules/Misc/Cava.qml
+++ b/quickshell/Modules/Misc/Cava.qml
@@ -1,81 +0,0 @@
-import QtQuick
-import Quickshell
-import Quickshell.Io
-import qs.Services
-
-Scope {
-    id: root
-
-    property int count: 32
-    property int noiseReduction: 60
-    property string channels: "mono"
-    property string monoOption: "average"
-    property var config: ({
-        "general": {
-            "bars": count,
-            "framerate": 30,
-            "autosens": 1
-        },
-        "smoothing": {
-            "monstercat": 1,
-            "gravity": 1e+06,
-            "noise_reduction": noiseReduction
-        },
-        "output": {
-            "method": "raw",
-            "bit_format": 8,
-            "channels": channels,
-            "mono_option": monoOption
-        }
-    })
-    property var values: Array(count).fill(0)
-
-    Process {
-        id: process
-
-        property int index: 0
-
-        stdinEnabled: true
-        running: !MusicManager.isAllPaused()
-        command: ["cava", "-p", "/dev/stdin"]
-        onExited: {
-            stdinEnabled = true;
-            index = 0;
-            values = Array(count).fill(0);
-        }
-        onStarted: {
-            for (const k in config) {
-                if (typeof config[k] !== "object") {
-                    write(k + "=" + config[k] + "\n");
-                    continue;
-                }
-                write("[" + k + "]\n");
-                const obj = config[k];
-                for (const k2 in obj) {
-                    write(k2 + "=" + obj[k2] + "\n");
-                }
-            }
-            stdinEnabled = false;
-        }
-
-        stdout: SplitParser {
-            splitMarker: ""
-            onRead: (data) => {
-                const newValues = Array(count).fill(0);
-                for (let i = 0; i < values.length; i++) {
-                    newValues[i] = values[i];
-                }
-                if (process.index + data.length > count)
-                    process.index = 0;
-
-                for (let i = 0; i < data.length; i += 1) {
-                    newValues[i + process.index] = Math.min(data.charCodeAt(i), 128) / 128;
-                }
-                process.index += data.length;
-                values = newValues;
-            }
-        }
-
-    }
-
-}
--- a/quickshell/Modules/Misc/CavaColorList.qml
+++ b/quickshell/Modules/Misc/CavaColorList.qml
@@ -1,10 +0,0 @@
-import QtQuick
-import Quickshell
-import qs.Constants
-pragma Singleton
-
-Singleton {
-    id: root
-
-    readonly property var colorList: [Colors.lavender, Colors.blue, Colors.sapphire, Colors.sky, Colors.teal, Colors.green, Colors.yellow, Colors.peach]
-}
--- a/quickshell/Modules/Panel/CalendarPanel.qml
+++ b/quickshell/Modules/Panel/CalendarPanel.qml
@@ -0,0 +1,537 @@
+import Qt5Compat.GraphicalEffects
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+import qs.Constants
+import qs.Noctalia
+import qs.Services
+import qs.Utils
+
+NPanel {
+    id: root
+
+    preferredWidth: 400
+    preferredHeight: 520
+
+    panelContent: ColumnLayout {
+        id: content
+
+        readonly property int firstDayOfWeek: Qt.locale().firstDayOfWeek
+        property bool isCurrentMonth: checkIsCurrentMonth()
+        readonly property bool weatherReady: (LocationService.data.weather !== null)
+
+        function checkIsCurrentMonth() {
+            return (Time.date.getMonth() === grid.month) && (Time.date.getFullYear() === grid.year);
+        }
+
+        function getISOWeekNumber(date) {
+            const target = new Date(date.getTime());
+            target.setHours(0, 0, 0, 0);
+            const dayOfWeek = target.getDay() || 7;
+            target.setDate(target.getDate() + 4 - dayOfWeek);
+            const yearStart = new Date(target.getFullYear(), 0, 1);
+            const weekNumber = Math.ceil(((target - yearStart) / 8.64e+07 + 1) / 7);
+            return weekNumber;
+        }
+
+        anchors.fill: parent
+        anchors.margins: Style.marginL
+        spacing: Style.marginM
+
+        Connections {
+            function onDateChanged() {
+                isCurrentMonth = checkIsCurrentMonth();
+            }
+
+            target: Time
+        }
+
+        // Combined blue banner with date/time and weather summary
+        Rectangle {
+            Layout.fillWidth: true
+            Layout.preferredHeight: blueColumn.implicitHeight + Style.marginM * 2
+            radius: Style.radiusL
+            color: Color.mSurfaceVariant
+            layer.enabled: true
+
+            ColumnLayout {
+                id: blueColumn
+
+                anchors.fill: parent
+                anchors.margins: Style.marginM
+                spacing: 0
+
+                // Combined layout for weather icon, date, and weather text
+                RowLayout {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 60
+                    spacing: Style.marginS
+
+                    // Weather icon and temperature
+                    ColumnLayout {
+                        Layout.alignment: Qt.AlignVCenter
+                        spacing: Style.marginXXS
+
+                        NIcon {
+                            Layout.alignment: Qt.AlignHCenter
+                            icon: weatherReady ? LocationService.weatherSymbolFromCode(LocationService.data.weather.current_weather.weathercode) : "cloud"
+                            pointSize: Style.fontSizeXXL
+                            color: Color.mOnSurfaceVariant
+                        }
+
+                        NText {
+                            Layout.alignment: Qt.AlignHCenter
+                            text: {
+                                if (!weatherReady)
+                                    return "";
+
+                                var temp = LocationService.data.weather.current_weather.temperature;
+                                var suffix = "C";
+                                temp = Math.round(temp);
+                                return `${temp}°${suffix}`;
+                            }
+                            pointSize: Style.fontSizeM
+                            font.weight: Style.fontWeightBold
+                            color: Color.mOnSurfaceVariant
+                        }
+
+                    }
+
+                    // Today day number
+                    NText {
+                        visible: content.isCurrentMonth
+                        Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+                        text: Time.date.getDate()
+                        pointSize: Style.fontSizeXXXL * 1.5
+                        font.weight: Style.fontWeightBold
+                        color: Color.mOnSurfaceVariant
+                    }
+
+                    Item {
+                        visible: !content.isCurrentMonth
+                    }
+
+                    // Month, year, location
+                    ColumnLayout {
+                        Layout.fillWidth: false
+                        Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+                        spacing: -Style.marginXS
+
+                        RowLayout {
+                            spacing: 0
+
+                            NText {
+                                text: Qt.locale().monthName(grid.month, Locale.LongFormat).toUpperCase()
+                                pointSize: Style.fontSizeXL * 1.2
+                                font.weight: Style.fontWeightBold
+                                color: Color.mOnSurfaceVariant
+                                Layout.alignment: Qt.AlignBaseline
+                                Layout.maximumWidth: 150
+                                elide: Text.ElideRight
+                            }
+
+                            NText {
+                                text: ` ${grid.year}`
+                                pointSize: Style.fontSizeL
+                                font.weight: Style.fontWeightBold
+                                color: Qt.alpha(Color.mOnSurfaceVariant, 0.7)
+                                Layout.alignment: Qt.AlignBaseline
+                            }
+
+                        }
+
+                        RowLayout {
+                            spacing: 0
+
+                            NText {
+                                text: {
+                                    if (!weatherReady)
+                                        return "Weather unavailable";
+
+                                    const chunks = LocationService.data.name.split(",");
+                                    return chunks[0];
+                                }
+                                pointSize: Style.fontSizeM
+                                font.weight: Style.fontWeightMedium
+                                color: Color.mOnSurfaceVariant
+                                Layout.maximumWidth: 150
+                                elide: Text.ElideRight
+                            }
+
+                            NText {
+                                text: weatherReady ? ` (${LocationService.data.weather.timezone_abbreviation})` : ""
+                                pointSize: Style.fontSizeXS
+                                font.weight: Style.fontWeightMedium
+                                color: Qt.alpha(Color.mOnSurfaceVariant, 0.7)
+                            }
+
+                        }
+
+                    }
+
+                    // Spacer between date and clock
+                    Item {
+                        Layout.fillWidth: true
+                    }
+
+                    // Digital clock with circular progress
+                    Item {
+                        width: Style.fontSizeXXXL * 1.9
+                        height: Style.fontSizeXXXL * 1.9
+                        Layout.alignment: Qt.AlignVCenter
+
+                        // Seconds circular progress
+                        Canvas {
+                            id: secondsProgress
+
+                            property real progress: Time.date.getSeconds() / 60
+
+                            anchors.fill: parent
+                            onProgressChanged: requestPaint()
+                            onPaint: {
+                                var ctx = getContext("2d");
+                                var centerX = width / 2;
+                                var centerY = height / 2;
+                                var radius = Math.min(width, height) / 2 - 3;
+                                ctx.reset();
+                                // Background circle
+                                ctx.beginPath();
+                                ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+                                ctx.lineWidth = 2.5;
+                                ctx.strokeStyle = Qt.alpha(Color.mOnSurfaceVariant, 0.15);
+                                ctx.stroke();
+                                // Progress arc
+                                ctx.beginPath();
+                                ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + progress * 2 * Math.PI);
+                                ctx.lineWidth = 2.5;
+                                ctx.strokeStyle = Color.mOnSurfaceVariant;
+                                ctx.lineCap = "round";
+                                ctx.stroke();
+                            }
+
+                            Connections {
+                                function onDateChanged() {
+                                    secondsProgress.progress = Time.date.getSeconds() / 60;
+                                }
+
+                                target: Time
+                            }
+
+                        }
+
+                        // Digital clock
+                        ColumnLayout {
+                            anchors.centerIn: parent
+                            spacing: -Style.marginXXS
+
+                            NText {
+                                text: {
+                                    var t = Qt.locale().toString(new Date(), "HH");
+                                    return t.split(" ")[0];
+                                }
+                                pointSize: Style.fontSizeXS
+                                font.weight: Style.fontWeightBold
+                                color: Color.mOnSurfaceVariant
+                                family: Fonts.sans
+                                Layout.alignment: Qt.AlignHCenter
+                            }
+
+                            NText {
+                                text: Qt.formatTime(Time.date, "mm")
+                                pointSize: Style.fontSizeXXS
+                                font.weight: Style.fontWeightBold
+                                color: Color.mOnSurfaceVariant
+                                family: Fonts.sans
+                                Layout.alignment: Qt.AlignHCenter
+                            }
+
+                        }
+
+                    }
+
+                }
+
+            }
+
+            layer.effect: DropShadow {
+                horizontalOffset: 6
+                verticalOffset: 6
+                radius: 8
+                samples: 12
+                color: Qt.rgba(0, 0, 0, 0.3)
+            }
+
+        }
+
+        // 6-day forecast (outside blue banner)
+        RowLayout {
+            visible: weatherReady
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignHCenter
+            spacing: Style.marginL
+
+            Repeater {
+                model: weatherReady ? Math.min(6, LocationService.data.weather.daily.time.length) : 0
+
+                delegate: ColumnLayout {
+                    Layout.preferredWidth: 0
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignHCenter
+                    spacing: Style.marginS
+
+                    NText {
+                        text: {
+                            var weatherDate = new Date(LocationService.data.weather.daily.time[index].replace(/-/g, "/"));
+                            return Qt.locale().toString(weatherDate, "ddd");
+                        }
+                        color: Color.mOnSurfaceVariant
+                        pointSize: Style.fontSizeM
+                        font.weight: Style.fontWeightMedium
+                        Layout.alignment: Qt.AlignHCenter
+                    }
+
+                    NIcon {
+                        Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+                        icon: LocationService.weatherSymbolFromCode(LocationService.data.weather.daily.weathercode[index])
+                        pointSize: Style.fontSizeXXL * 1.5
+                        color: LocationService.weatherColorFromCode(LocationService.data.weather.daily.weathercode[index])
+                    }
+
+                    NText {
+                        Layout.alignment: Qt.AlignHCenter
+                        text: {
+                            var max = LocationService.data.weather.daily.temperature_2m_max[index];
+                            var min = LocationService.data.weather.daily.temperature_2m_min[index];
+                            max = Math.round(max);
+                            min = Math.round(min);
+                            return `${max}°/${min}°`;
+                        }
+                        pointSize: Style.fontSizeXS
+                        color: Color.mOnSurfaceVariant
+                        font.weight: Style.fontWeightMedium
+                    }
+
+                }
+
+            }
+
+        }
+
+        // Loading indicator for weather
+        RowLayout {
+            visible: !weatherReady
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignHCenter
+
+            NBusyIndicator {
+            }
+
+        }
+
+        // Spacer
+        Item {
+        }
+
+        // Navigation and divider
+        RowLayout {
+            Layout.fillWidth: true
+            spacing: Style.marginS
+
+            NDivider {
+                Layout.fillWidth: true
+            }
+
+            NIconButton {
+                icon: "chevron-left"
+                colorBg: Color.transparent
+                colorBorder: Color.transparent
+                colorBorderHover: Color.transparent
+                onClicked: {
+                    let newDate = new Date(grid.year, grid.month - 1, 1);
+                    grid.year = newDate.getFullYear();
+                    grid.month = newDate.getMonth();
+                    content.isCurrentMonth = content.checkIsCurrentMonth();
+                }
+            }
+
+            NIconButton {
+                icon: "calendar"
+                colorBg: Color.transparent
+                colorBorder: Color.transparent
+                colorBorderHover: Color.transparent
+                onClicked: {
+                    grid.month = Time.date.getMonth();
+                    grid.year = Time.date.getFullYear();
+                    content.isCurrentMonth = true;
+                }
+            }
+
+            NIconButton {
+                icon: "chevron-right"
+                colorBg: Color.transparent
+                colorBorder: Color.transparent
+                colorBorderHover: Color.transparent
+                onClicked: {
+                    let newDate = new Date(grid.year, grid.month + 1, 1);
+                    grid.year = newDate.getFullYear();
+                    grid.month = newDate.getMonth();
+                    content.isCurrentMonth = content.checkIsCurrentMonth();
+                }
+            }
+
+        }
+
+        // Names of days of the week
+        RowLayout {
+            Layout.fillWidth: true
+            spacing: 0
+
+            Item {
+                Layout.preferredWidth: visible ? Style.baseWidgetSize * 0.7 : 0
+            }
+
+            GridLayout {
+                Layout.fillWidth: true
+                columns: 7
+                rows: 1
+                columnSpacing: 0
+                rowSpacing: 0
+
+                Repeater {
+                    model: 7
+
+                    Item {
+                        Layout.fillWidth: true
+                        Layout.preferredHeight: Style.baseWidgetSize * 0.6
+
+                        NText {
+                            anchors.centerIn: parent
+                            text: {
+                                let dayIndex = (content.firstDayOfWeek + index) % 7;
+                                const dayNames = ["S", "M", "T", "W", "T", "F", "S"];
+                                return dayNames[dayIndex];
+                            }
+                            color: Color.mPrimary
+                            pointSize: Style.fontSizeS
+                            font.weight: Style.fontWeightBold
+                            horizontalAlignment: Text.AlignHCenter
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+        // Grid with weeks and days
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            spacing: 0
+
+            // Column of week numbers
+            ColumnLayout {
+                Layout.preferredWidth: visible ? Style.baseWidgetSize * 0.7 : 0
+                Layout.fillHeight: true
+                spacing: 0
+
+                Repeater {
+                    model: 6
+
+                    Item {
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+
+                        NText {
+                            anchors.centerIn: parent
+                            color: Color.mOutline
+                            pointSize: Style.fontSizeXXS
+                            font.weight: Style.fontWeightMedium
+                            text: {
+                                let firstOfMonth = new Date(grid.year, grid.month, 1);
+                                let firstDayOfWeek = content.firstDayOfWeek;
+                                let firstOfMonthDayOfWeek = firstOfMonth.getDay();
+                                let daysBeforeFirst = (firstOfMonthDayOfWeek - firstDayOfWeek + 7) % 7;
+                                if (daysBeforeFirst === 0)
+                                    daysBeforeFirst = 7;
+
+                                let gridStartDate = new Date(grid.year, grid.month, 1 - daysBeforeFirst);
+                                let rowStartDate = new Date(gridStartDate);
+                                rowStartDate.setDate(gridStartDate.getDate() + (index * 7));
+                                let thursday = new Date(rowStartDate);
+                                if (firstDayOfWeek === 0) {
+                                    thursday.setDate(rowStartDate.getDate() + 4);
+                                } else if (firstDayOfWeek === 1) {
+                                    thursday.setDate(rowStartDate.getDate() + 3);
+                                } else {
+                                    let daysToThursday = (4 - firstDayOfWeek + 7) % 7;
+                                    thursday.setDate(rowStartDate.getDate() + daysToThursday);
+                                }
+                                return `${getISOWeekNumber(thursday)}`;
+                            }
+                        }
+
+                    }
+
+                }
+
+            }
+
+            // Days Grid
+            MonthGrid {
+                id: grid
+
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                spacing: Style.marginXXS
+                month: Time.date.getMonth()
+                year: Time.date.getFullYear()
+                locale: Qt.locale()
+
+                delegate: Item {
+                    Rectangle {
+                        width: Style.baseWidgetSize * 0.9
+                        height: Style.baseWidgetSize * 0.9
+                        anchors.centerIn: parent
+                        radius: Style.radiusM
+                        color: model.today ? Color.mSecondary : Color.transparent
+
+                        NText {
+                            anchors.centerIn: parent
+                            text: model.day
+                            color: {
+                                if (model.today)
+                                    return Color.mOnSecondary;
+
+                                if (model.month === grid.month)
+                                    return Color.mOnSurface;
+
+                                return Color.mOnSurfaceVariant;
+                            }
+                            opacity: model.month === grid.month ? 1 : 0.4
+                            pointSize: Style.fontSizeM
+                            font.weight: model.today ? Style.fontWeightBold : Style.fontWeightMedium
+                        }
+
+                        Behavior on color {
+                            ColorAnimation {
+                                duration: Style.animationFast
+                            }
+
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}
--- a/quickshell/Modules/Panel/Cards/LyricsCard.qml
+++ b/quickshell/Modules/Panel/Cards/LyricsCard.qml
@@ -0,0 +1,46 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Noctalia
+import qs.Services
+import qs.Utils
+
+NBox {
+    id: lyricsBox
+
+    Component.onCompleted: {
+        LyricsService.startSyncing();
+    }
+    Component.onDestruction: {
+        LyricsService.stopSyncing();
+    }
+
+    ColumnLayout {
+        id: lyricsColumn
+
+        anchors.fill: parent
+        anchors.margins: Style.marginS
+
+        Repeater {
+            model: LyricsService.lyrics
+
+            NText {
+                Layout.fillWidth: true
+                text: modelData
+                font.pointSize: index === LyricsService.currentIndex ? Style.fontSizeM : Style.fontSizeS
+                font.weight: index === LyricsService.currentIndex ? Style.fontWeightBold : Style.fontWeightRegular
+                font.family: Fonts.sans
+                color: index === LyricsService.currentIndex ? Color.mOnSurface : Color.mOnSurfaceVariant
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                elide: Text.ElideRight
+                wrapMode: Text.WrapAnywhere
+                maximumLineCount: 1
+            }
+
+        }
+
+    }
+
+}
--- a/quickshell/Modules/Panel/Cards/LyricsControl.qml
+++ b/quickshell/Modules/Panel/Cards/LyricsControl.qml
@@ -0,0 +1,96 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Modules.Bar.Misc
+import qs.Noctalia
+import qs.Services
+
+GridLayout {
+    id: buttonsGrid
+
+    columns: 2
+    columnSpacing: 10
+    rowSpacing: 10
+    Layout.margins: 10
+
+    NIconButton {
+        id: slowerButton
+
+        baseSize: 32
+        colorBg: Color.transparent
+        colorBgHover: Colors.blue
+        colorFg: Colors.blue
+        icon: "arrow-bar-up"
+        onClicked: {
+            LyricsService.increaseOffset();
+        }
+    }
+
+    NIconButton {
+        id: playPauseButton
+
+        baseSize: 32
+        colorBg: Color.transparent
+        colorBgHover: Colors.yellow
+        colorFg: Colors.yellow
+        icon: "arrow-bar-down"
+        onClicked: {
+            LyricsService.decreaseOffset();
+        }
+    }
+
+    NIconButton {
+        id: nextButton
+
+        baseSize: 32
+        colorBg: Color.transparent
+        colorBgHover: Colors.green
+        colorFg: Colors.green
+        icon: "rotate-clockwise"
+        onClicked: {
+            LyricsService.resetOffset();
+        }
+    }
+
+    NIconButton {
+        id: fasterButton
+
+        baseSize: 32
+        colorBg: Color.transparent
+        colorBgHover: Colors.red
+        colorFg: Colors.red
+        icon: "trash"
+        onClicked: {
+            LyricsService.clearCache();
+        }
+    }
+
+    NIconButton {
+        id: barLyricsButton
+
+        baseSize: 32
+        colorBg: SettingsService.showLyricsBar ? Colors.peach : Color.transparent
+        colorBgHover: Colors.peach
+        colorFg: SettingsService.showLyricsBar ? Colors.base : Colors.peach
+        icon: "app-window"
+        onClicked: {
+            SettingsService.showLyricsBar = !SettingsService.showLyricsBar;
+        }
+    }
+
+    NIconButton {
+        id: textButton
+
+        baseSize: 32
+        colorBg: Color.transparent
+        colorBgHover: Colors.subtext1
+        colorFg: Colors.subtext1
+        icon: "align-box-left-bottom"
+        onClicked: {
+            LyricsService.showLyricsText();
+            controlCenterPanel.close();
+        }
+    }
+
+}
--- a/quickshell/Modules/Panel/Cards/MediaCard.qml
+++ b/quickshell/Modules/Panel/Cards/MediaCard.qml
@@ -0,0 +1,458 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Noctalia
+import qs.Services
+import qs.Utils
+
+NBox {
+    id: root
+
+    // Background artwork that covers everything
+    Item {
+        anchors.fill: parent
+        clip: true
+
+        NImageRounded {
+            id: bgArtImage
+
+            anchors.fill: parent
+            imagePath: MusicManager.trackArtUrl
+            imageRadius: Style.radiusM
+            visible: MusicManager.trackArtUrl !== ""
+        }
+
+        // Dark overlay for readability
+        Rectangle {
+            anchors.fill: parent
+            color: Color.mSurfaceVariant
+            opacity: 0.85
+            radius: Style.radiusM
+        }
+
+        // Border
+        Rectangle {
+            anchors.fill: parent
+            color: Color.transparent
+            radius: Style.radiusM
+        }
+
+    }
+
+    // Background visualizer on top of the artwork
+    Item {
+        id: visualizerContainer
+
+        anchors.fill: parent
+        layer.enabled: true
+
+        Item {
+            anchors.fill: parent
+
+            Cava {
+                id: cava
+
+                count: 32
+            }
+
+            Repeater {
+                model: cava.values
+
+                Rectangle {
+                    anchors.bottom: parent.bottom
+                    width: (parent.width - (cava.count - 1) * Style.marginXS) / cava.count
+                    height: modelData * parent.height
+                    x: index * (width + Style.marginXS)
+                    color: Color.mPrimary
+                    radius: width / 2
+                    opacity: 0.25
+                }
+
+            }
+
+        }
+
+        layer.effect: MultiEffect {
+            maskEnabled: true
+            maskThresholdMin: 0.5
+            maskSpreadAtMin: 0
+
+            maskSource: ShaderEffectSource {
+
+                sourceItem: Rectangle {
+                    width: root.width
+                    height: root.height
+                    radius: Style.radiusM
+                    color: "white"
+                }
+
+            }
+
+        }
+
+    }
+
+    // Player selector - positioned at the very top
+    Rectangle {
+        id: playerSelectorButton
+
+        property var currentPlayer: MusicManager.getAvailablePlayers()[MusicManager.selectedPlayerIndex]
+
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.topMargin: Style.marginXS
+        anchors.leftMargin: Style.marginM
+        anchors.rightMargin: Style.marginM
+        height: Style.barHeight
+        visible: MusicManager.getAvailablePlayers().length > 1
+        radius: Style.radiusM
+        color: Color.transparent
+        Component.onCompleted: {
+            MusicManager.selectedPlayerIndex = -1;
+        }
+        Component.onDestruction: {
+            MusicManager.selectedPlayerIndex = -1;
+        }
+
+        RowLayout {
+            anchors.fill: parent
+            spacing: Style.marginS
+
+            NIcon {
+                icon: "caret-down"
+                pointSize: Style.fontSizeXXL
+                color: Color.mOnSurfaceVariant
+            }
+
+            NText {
+                text: playerSelectorButton.currentPlayer ? playerSelectorButton.currentPlayer.identity : ""
+                pointSize: Style.fontSizeXS
+                color: Color.mOnSurfaceVariant
+                Layout.fillWidth: true
+            }
+
+        }
+
+        MouseArea {
+            id: playerSelectorMouseArea
+
+            anchors.fill: parent
+            hoverEnabled: true
+            cursorShape: Qt.PointingHandCursor
+            onClicked: {
+                var menuItems = [];
+                var players = MusicManager.getAvailablePlayers();
+                for (var i = 0; i < players.length; i++) {
+                    menuItems.push({
+                        "label": players[i].identity,
+                        "action": i.toString(),
+                        "icon": "disc",
+                        "enabled": true,
+                        "visible": true
+                    });
+                }
+                playerContextMenu.model = menuItems;
+                playerContextMenu.openAtItem(playerSelectorButton, playerSelectorButton.width - playerContextMenu.width, playerSelectorButton.height);
+            }
+        }
+
+        NContextMenu {
+            id: playerContextMenu
+
+            parent: root
+            width: 200
+            onTriggered: function(action) {
+                var index = parseInt(action);
+                if (!isNaN(index)) {
+                    MusicManager.selectedPlayerIndex = index;
+                    MusicManager.updateCurrentPlayer();
+                }
+            }
+        }
+
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+        anchors.margins: Style.marginM
+
+        // No media player detected
+        ColumnLayout {
+            id: fallback
+
+            visible: !main.visible
+            spacing: Style.marginS
+
+            Item {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+
+            Item {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
+                ColumnLayout {
+                    anchors.centerIn: parent
+                    spacing: Style.marginL
+
+                    Item {
+                        Layout.alignment: Qt.AlignHCenter
+                        Layout.preferredWidth: Style.fontSizeXXXL * 4
+                        Layout.preferredHeight: Style.fontSizeXXXL * 4
+
+                        // Pulsating audio circles (background)
+                        Repeater {
+                            model: 3
+
+                            Rectangle {
+                                anchors.centerIn: parent
+                                width: parent.width * (1 + index * 0.2)
+                                height: width
+                                radius: width / 2
+                                color: "transparent"
+                                border.color: Color.mOnSurfaceVariant
+                                border.width: 2
+                                opacity: 0
+
+                                SequentialAnimation on opacity {
+                                    running: true
+                                    loops: Animation.Infinite
+
+                                    PauseAnimation {
+                                        duration: index * 600
+                                    }
+
+                                    NumberAnimation {
+                                        from: 1
+                                        to: 0
+                                        duration: 2000
+                                        easing.type: Easing.OutQuad
+                                    }
+
+                                }
+
+                                SequentialAnimation on scale {
+                                    running: true
+                                    loops: Animation.Infinite
+
+                                    PauseAnimation {
+                                        duration: index * 600
+                                    }
+
+                                    NumberAnimation {
+                                        from: 0.5
+                                        to: 1.2
+                                        duration: 2000
+                                        easing.type: Easing.OutQuad
+                                    }
+
+                                }
+
+                            }
+
+                        }
+
+                        // Spinning disc
+                        NIcon {
+                            anchors.centerIn: parent
+                            icon: "disc"
+                            pointSize: Style.fontSizeXXXL * 3
+                            color: Color.mOnSurfaceVariant
+
+                            RotationAnimator on rotation {
+                                from: 0
+                                to: 360
+                                duration: 8000
+                                loops: Animation.Infinite
+                                running: true
+                            }
+
+                        }
+
+                    }
+
+                    // Descriptive text
+                    ColumnLayout {
+                        Layout.alignment: Qt.AlignHCenter
+                        spacing: Style.marginXS
+                    }
+
+                }
+
+            }
+
+            Item {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+
+        }
+
+        // MediaPlayer Main Content
+        ColumnLayout {
+            id: main
+
+            visible: MusicManager.currentPlayer && MusicManager.canPlay
+            spacing: Style.marginS
+
+            // Spacer to push content down
+            Item {
+                Layout.preferredHeight: Style.marginM
+            }
+
+            // Metadata at the bottom left
+            ColumnLayout {
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignLeft
+                spacing: Style.marginXS
+
+                NText {
+                    visible: MusicManager.trackTitle !== ""
+                    text: MusicManager.trackTitle
+                    pointSize: Style.fontSizeM
+                    font.weight: Style.fontWeightBold
+                    elide: Text.ElideRight
+                    wrapMode: Text.Wrap
+                    Layout.fillWidth: true
+                    maximumLineCount: 1
+                }
+
+                NText {
+                    visible: MusicManager.trackArtist !== ""
+                    text: MusicManager.trackArtist
+                    color: Color.mPrimary
+                    pointSize: Style.fontSizeS
+                    elide: Text.ElideRight
+                    Layout.fillWidth: true
+                    maximumLineCount: 1
+                }
+
+                NText {
+                    visible: MusicManager.trackAlbum !== ""
+                    text: MusicManager.trackAlbum
+                    color: Color.mOnSurfaceVariant
+                    pointSize: Style.fontSizeM
+                    elide: Text.ElideRight
+                    Layout.fillWidth: true
+                    maximumLineCount: 1
+                }
+
+            }
+
+            // Progress slider
+            Item {
+                id: progressWrapper
+
+                property real localSeekRatio: -1
+                property real lastSentSeekRatio: -1
+                property real seekEpsilon: 0.01
+                property real progressRatio: {
+                    if (!MusicManager.currentPlayer || MusicManager.trackLength <= 0)
+                        return 0;
+
+                    const r = MusicManager.currentPosition / MusicManager.trackLength;
+                    if (isNaN(r) || !isFinite(r))
+                        return 0;
+
+                    return Math.max(0, Math.min(1, r));
+                }
+                property real effectiveRatio: (MusicManager.isSeeking && localSeekRatio >= 0) ? Math.max(0, Math.min(1, localSeekRatio)) : progressRatio
+
+                visible: (MusicManager.currentPlayer && MusicManager.trackLength > 0)
+                Layout.fillWidth: true
+                height: Style.baseWidgetSize * 0.5
+
+                Timer {
+                    id: seekDebounce
+
+                    interval: 75
+                    repeat: false
+                    onTriggered: {
+                        if (MusicManager.isSeeking && progressWrapper.localSeekRatio >= 0) {
+                            const next = Math.max(0, Math.min(1, progressWrapper.localSeekRatio));
+                            if (progressWrapper.lastSentSeekRatio < 0 || Math.abs(next - progressWrapper.lastSentSeekRatio) >= progressWrapper.seekEpsilon) {
+                                MusicManager.seekByRatio(next);
+                                progressWrapper.lastSentSeekRatio = next;
+                            }
+                        }
+                    }
+                }
+
+                NSlider {
+                    id: progressSlider
+
+                    anchors.fill: parent
+                    from: 0
+                    to: 1
+                    stepSize: 0
+                    snapAlways: false
+                    enabled: MusicManager.trackLength > 0 && MusicManager.canSeek
+                    heightRatio: 0.65
+                    onMoved: {
+                        progressWrapper.localSeekRatio = value;
+                        seekDebounce.restart();
+                    }
+                    onPressedChanged: {
+                        if (pressed) {
+                            MusicManager.isSeeking = true;
+                            progressWrapper.localSeekRatio = value;
+                            MusicManager.seekByRatio(value);
+                            progressWrapper.lastSentSeekRatio = value;
+                        } else {
+                            seekDebounce.stop();
+                            MusicManager.seekByRatio(value);
+                            MusicManager.isSeeking = false;
+                            progressWrapper.localSeekRatio = -1;
+                            progressWrapper.lastSentSeekRatio = -1;
+                        }
+                    }
+                }
+
+                Binding {
+                    target: progressSlider
+                    property: "value"
+                    value: progressWrapper.progressRatio
+                    when: !MusicManager.isSeeking
+                }
+
+            }
+
+            // Media controls
+            RowLayout {
+                spacing: Style.marginS
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignHCenter
+
+                NIconButton {
+                    icon: "media-prev"
+                    visible: MusicManager.canGoPrevious
+                    onClicked: MusicManager.canGoPrevious ? MusicManager.previous() : {
+                    }
+                }
+
+                NIconButton {
+                    icon: MusicManager.isPlaying ? "media-pause" : "media-play"
+                    visible: (MusicManager.canPlay || MusicManager.canPause)
+                    onClicked: (MusicManager.canPlay || MusicManager.canPause) ? MusicManager.playPause() : {
+                    }
+                }
+
+                NIconButton {
+                    icon: "media-next"
+                    visible: MusicManager.canGoNext
+                    onClicked: MusicManager.canGoNext ? MusicManager.next() : {
+                    }
+                }
+
+            }
+
+        }
+
+    }
+
+}
--- a/quickshell/Modules/Panel/Cards/SystemMonitorCard.qml
+++ b/quickshell/Modules/Panel/Cards/SystemMonitorCard.qml
@@ -0,0 +1,61 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Modules.Panel.Misc
+import qs.Noctalia
+import qs.Services
+import qs.Utils
+
+// Unified system card: monitors CPU, temp, memory, disk
+NBox {
+    id: root
+
+    compact: true
+
+    ColumnLayout {
+        id: content
+
+        anchors.fill: parent
+        anchors.margins: Style.marginXS
+        spacing: Style.marginS
+
+        MonitorSlider {
+            icon: "cpu-usage"
+            value: SystemStatService.cpuUsage
+            from: 0
+            to: 100
+            colorFill: Colors.teal
+            Layout.fillWidth: true
+        }
+
+        MonitorSlider {
+            icon: "memory"
+            value: SystemStatService.memPercent
+            from: 0
+            to: 100
+            colorFill: Colors.green
+            Layout.fillWidth: true
+        }
+
+        MonitorSlider {
+            icon: "cpu-temperature"
+            value: SystemStatService.cpuTemp
+            from: 0
+            to: 100
+            colorFill: Colors.yellow
+            Layout.fillWidth: true
+        }
+
+        MonitorSlider {
+            icon: "storage"
+            value: SystemStatService.diskPercent
+            from: 0
+            to: 100
+            colorFill: Colors.peach
+            Layout.fillWidth: true
+        }
+
+    }
+
+}
--- a/quickshell/Modules/Panel/Cards/TopLeftCard.qml
+++ b/quickshell/Modules/Panel/Cards/TopLeftCard.qml
@@ -0,0 +1,175 @@
+import QtQuick
+import QtQuick.Effects
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+import Quickshell.Services.UPower
+import Quickshell.Widgets
+import qs.Constants
+import qs.Noctalia
+import qs.Services
+import qs.Utils
+
+ColumnLayout {
+    id: root
+
+    readonly property bool hasPP: PowerProfileService.available
+
+    spacing: Style.marginM
+
+    NBox {
+        id: whoamiBox
+
+        property string uptimeText: "--"
+        property string hostname: "--"
+
+        function updateSystemInfo() {
+            uptimeProcess.running = true;
+            hostnameProcess.running = true;
+        }
+
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        RowLayout {
+            id: content
+
+            spacing: root.spacing
+            anchors.fill: parent
+            anchors.margins: root.spacing
+
+            NImageCircled {
+                width: Style.baseWidgetSize * 1.5
+                height: Style.baseWidgetSize * 1.5
+                imagePath: Quickshell.shellDir + "/Assets/Images/Avatar.jpg"
+                fallbackIcon: "person"
+                borderColor: Color.mPrimary
+                borderWidth: Math.max(1, Style.borderM)
+                Layout.alignment: Qt.AlignVCenter
+                Layout.topMargin: Style.marginXS
+            }
+
+            ColumnLayout {
+                Layout.fillWidth: true
+                spacing: Style.marginXXS
+
+                NText {
+                    text: `${Quickshell.env("USER") || "user"} @ ${whoamiBox.hostname}`
+                    font.weight: Style.fontWeightBold
+                    font.pointSize: Style.fontSizeL
+                    font.capitalization: Font.Capitalize
+                }
+
+                NText {
+                    text: "Uptime: " + whoamiBox.uptimeText
+                    font.pointSize: Style.fontSizeM
+                    color: Color.mOnSurfaceVariant
+                }
+
+            }
+
+            Item {
+                Layout.fillWidth: true
+            }
+
+        }
+
+        // ----------------------------------
+        // Uptime
+        Timer {
+            interval: 60000
+            repeat: true
+            running: true
+            onTriggered: uptimeProcess.running = true
+        }
+
+        Process {
+            id: uptimeProcess
+
+            command: ["cat", "/proc/uptime"]
+            running: true
+
+            stdout: StdioCollector {
+                onStreamFinished: {
+                    var uptimeSeconds = parseFloat(this.text.trim().split(' ')[0]);
+                    whoamiBox.uptimeText = Time.formatVagueHumanReadableDuration(uptimeSeconds);
+                    uptimeProcess.running = false;
+                }
+            }
+
+        }
+
+        Process {
+            id: hostnameProcess
+
+            command: ["cat", "/etc/hostname"]
+            running: true
+
+            stdout: StdioCollector {
+                onStreamFinished: {
+                    whoamiBox.hostname = this.text.trim();
+                    hostnameProcess.running = false;
+                }
+            }
+
+        }
+
+    }
+
+    RowLayout {
+        id: utilitiesRow
+
+        Layout.fillWidth: true
+
+        // Performance
+        NIconButton {
+            implicitHeight: 32
+            implicitWidth: 32
+            icon: PowerProfileService.getIcon(PowerProfile.Performance)
+            enabled: hasPP
+            opacity: enabled ? Style.opacityFull : Style.opacityMedium
+            colorBgHover: Colors.red
+            colorBg: (enabled && PowerProfileService.profile === PowerProfile.Performance) ? Colors.red : Color.transparent
+            colorFg: (enabled && PowerProfileService.profile === PowerProfile.Performance) ? Color.mOnPrimary : Colors.red
+            onClicked: PowerProfileService.setProfile(PowerProfile.Performance)
+        }
+
+        // Balanced
+        NIconButton {
+            implicitHeight: 32
+            implicitWidth: 32
+            icon: PowerProfileService.getIcon(PowerProfile.Balanced)
+            enabled: hasPP
+            opacity: enabled ? Style.opacityFull : Style.opacityMedium
+            colorBgHover: Colors.blue
+            colorBg: (enabled && PowerProfileService.profile === PowerProfile.Balanced) ? Colors.blue : Color.transparent
+            colorFg: (enabled && PowerProfileService.profile === PowerProfile.Balanced) ? Color.mOnPrimary : Colors.blue
+            onClicked: PowerProfileService.setProfile(PowerProfile.Balanced)
+        }
+
+        // Eco
+        NIconButton {
+            implicitHeight: 32
+            implicitWidth: 32
+            icon: PowerProfileService.getIcon(PowerProfile.PowerSaver)
+            enabled: hasPP
+            opacity: enabled ? Style.opacityFull : Style.opacityMedium
+            colorBgHover: Colors.green
+            colorBg: (enabled && PowerProfileService.profile === PowerProfile.PowerSaver) ? Colors.green : Color.transparent
+            colorFg: (enabled && PowerProfileService.profile === PowerProfile.PowerSaver) ? Color.mOnPrimary : Colors.green
+            onClicked: PowerProfileService.setProfile(PowerProfile.PowerSaver)
+        }
+
+        Item {
+            Layout.fillWidth: true
+        }
+
+        // Lyrics Offset
+        NText {
+            text: `Lyrics Offset: ${LyricsService.offset >= 0 ? '+' : ''}${LyricsService.offset} ms`
+            Layout.alignment: Qt.AlignVCenter
+        }
+
+    }
+
+}
--- a/quickshell/Modules/Panel/ControlCenterPanel.qml
+++ b/quickshell/Modules/Panel/ControlCenterPanel.qml
@@ -0,0 +1,86 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Modules.Panel.Cards
+import qs.Noctalia
+import qs.Services
+import qs.Utils
+
+NPanel {
+    id: root
+
+    // Positioning
+    readonly property string controlCenterPosition: "top_left"
+    property real topCardHeight: 120
+    property real middleCardHeight: 100
+    property real bottomCardHeight: 200
+
+    preferredWidth: 480
+    preferredHeight: topCardHeight + middleCardHeight + bottomCardHeight + Style.marginL * 4
+    panelKeyboardFocus: false
+    panelAnchorHorizontalCenter: controlCenterPosition !== "close_to_bar_button" && controlCenterPosition.endsWith("_center")
+    panelAnchorVerticalCenter: false
+    panelAnchorLeft: controlCenterPosition !== "close_to_bar_button" && controlCenterPosition.endsWith("_left")
+    panelAnchorRight: controlCenterPosition !== "close_to_bar_button" && controlCenterPosition.endsWith("_right")
+    panelAnchorBottom: controlCenterPosition !== "close_to_bar_button" && controlCenterPosition.startsWith("bottom_")
+    panelAnchorTop: controlCenterPosition !== "close_to_bar_button" && controlCenterPosition.startsWith("top_")
+
+    panelContent: Item {
+        id: content
+
+        property real cardSpacing: Style.marginL
+
+        // Layout content
+        ColumnLayout {
+            id: layout
+
+            anchors.fill: parent
+            anchors.margins: content.cardSpacing
+            spacing: content.cardSpacing
+
+            // Top Card: profile + utilities
+            RowLayout {
+                Layout.fillWidth: true
+                Layout.preferredHeight: topCardHeight
+
+                TopLeftCard {
+                    Layout.fillWidth: true
+                    Layout.maximumHeight: topCardHeight
+                }
+
+                LyricsControl {
+                    Layout.preferredHeight: topCardHeight
+                }
+
+            }
+
+            LyricsCard {
+                Layout.fillWidth: true
+                Layout.preferredHeight: middleCardHeight
+            }
+
+            // Media + stats column
+            RowLayout {
+                Layout.fillWidth: true
+                Layout.preferredHeight: bottomCardHeight
+                spacing: content.cardSpacing
+
+                SystemMonitorCard {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: bottomCardHeight
+                }
+
+                MediaCard {
+                    Layout.preferredWidth: 270
+                    Layout.preferredHeight: bottomCardHeight
+                }
+
+            }
+
+        }
+
+    }
+
+}
--- a/quickshell/Modules/Panel/Misc/MonitorSlider.qml
+++ b/quickshell/Modules/Panel/Misc/MonitorSlider.qml
@@ -0,0 +1,54 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Noctalia
+
+Item {
+    id: root
+
+    property string icon: "volume-high"
+    property real value: 50
+    property real from: 0
+    property real to: 100
+    property color colorFill: Colors.primary
+    property color colorRest: Colors.surface0
+
+    implicitHeight: layout.implicitHeight
+
+    RowLayout {
+        id: layout
+
+        anchors.fill: parent
+        spacing: Style.marginS
+
+        NIcon {
+            id: iconItem
+
+            icon: root.icon
+            color: root.colorFill
+        }
+
+        Rectangle {
+            id: whole
+
+            Layout.fillWidth: true
+            color: root.colorRest
+            radius: height / 2
+            height: Style.baseWidgetSize * 0.3
+
+            Rectangle {
+                id: fill
+
+                width: Math.max(0, Math.min(whole.width, (root.value - root.from) / (root.to - root.from) * whole.width))
+                height: parent.height
+                color: root.colorFill
+                radius: height / 2
+                anchors.left: parent.left
+            }
+
+        }
+
+    }
+
+}