From b01b5fcb1fe35ca55cce2032b6dddefa34a37cbb Mon Sep 17 00:00:00 2001
From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>
Date: Mon, 4 May 2026 05:05:24 +1000
Subject: [PATCH] feat: add no media placeholder

---
 modules/dashboard/Media.qml            | 122 ++++++++++++++++++++++++-
 plugin/src/Caelestia/Config/tokens.hpp |   1 -
 2 files changed, 117 insertions(+), 6 deletions(-)

diff --git a/modules/dashboard/Media.qml b/modules/dashboard/Media.qml
index 82111843..05439b59 100644
--- a/modules/dashboard/Media.qml
+++ b/modules/dashboard/Media.qml
@@ -1,6 +1,7 @@
 import "media"
 import QtQuick
 import QtQuick.Layouts
+import M3Shapes
 import Caelestia.Config
 import qs.components
 import qs.services
@@ -24,13 +25,124 @@ Item {
             implicitWidth: Tokens.sizes.dashboard.mediaSectionWidth
         }
 
-        Details {
+        Item {
             Layout.fillWidth: true
-        }
-
-        LyricsAndSelector {
             Layout.fillHeight: true
-            implicitWidth: Tokens.sizes.dashboard.mediaSectionWidth
+
+            state: Players.active ? "" : "noMedia"
+
+            states: State {
+                name: "noMedia"
+
+                PropertyChanges {
+                    noMedia.opacity: 1
+                    content.opacity: 0
+                }
+            }
+
+            transitions: [
+                Transition {
+                    from: ""
+
+                    SequentialAnimation {
+                        Anim {
+                            target: content
+                            property: "opacity"
+                            type: Anim.DefaultEffects
+                        }
+                        Anim {
+                            target: noMedia
+                            property: "opacity"
+                            type: Anim.SlowEffects
+                        }
+                    }
+                },
+                Transition {
+                    to: ""
+
+                    SequentialAnimation {
+                        Anim {
+                            target: noMedia
+                            property: "opacity"
+                            type: Anim.DefaultEffects
+                        }
+                        Anim {
+                            target: content
+                            property: "opacity"
+                            type: Anim.SlowEffects
+                        }
+                    }
+                }
+            ]
+
+            Loader {
+                id: noMedia
+
+                anchors.centerIn: parent
+                anchors.horizontalCenterOffset: -Tokens.padding.extraLarge * 2
+                asynchronous: true
+                active: opacity > 0
+                opacity: 0
+
+                sourceComponent: ColumnLayout {
+                    spacing: Tokens.spacing.small
+
+                    MaterialShape {
+                        Layout.topMargin: (pathBounds().height - implicitSize) / 2
+                        Layout.bottomMargin: (pathBounds().height - implicitSize) / 2 + Tokens.spacing.small
+                        Layout.alignment: Qt.AlignHCenter
+                        color: Colours.palette.m3primaryContainer
+                        implicitSize: icon.implicitHeight + Tokens.padding.extraLarge * 2
+                        shape: MaterialShape.ClamShell
+
+                        Behavior on color {
+                            CAnim {}
+                        }
+
+                        MaterialIcon {
+                            id: icon
+
+                            anchors.centerIn: parent
+                            text: "queue_music"
+                            fontStyle: Tokens.font.icon.builders.large.scale(2).build()
+                            color: Colours.palette.m3onPrimaryContainer
+                        }
+                    }
+
+                    StyledText {
+                        Layout.alignment: Qt.AlignHCenter
+                        text: qsTr("Nothing playing")
+                        font: Tokens.font.headline.medium
+                    }
+
+                    StyledText {
+                        text: qsTr("Play something for it to show up here!")
+                        color: Colours.palette.m3onSurfaceVariant
+                        font: Tokens.font.body.large
+                    }
+                }
+            }
+
+            Loader {
+                id: content
+
+                anchors.fill: parent
+                asynchronous: true
+                active: opacity > 0
+
+                sourceComponent: RowLayout {
+                    spacing: Tokens.spacing.extraLarge
+
+                    Details {
+                        Layout.fillWidth: true
+                    }
+
+                    LyricsAndSelector {
+                        Layout.fillHeight: true
+                        implicitWidth: Tokens.sizes.dashboard.mediaSectionWidth
+                    }
+                }
+            }
         }
     }
 }
diff --git a/plugin/src/Caelestia/Config/tokens.hpp b/plugin/src/Caelestia/Config/tokens.hpp
index b94df232..6e19dc8c 100644
--- a/plugin/src/Caelestia/Config/tokens.hpp
+++ b/plugin/src/Caelestia/Config/tokens.hpp
@@ -180,7 +180,6 @@ class DashboardTokens : public ConfigObject {
     CONFIG_PROPERTY(int, userWidth, 340)
     CONFIG_PROPERTY(int, logoSize, 30)
     CONFIG_PROPERTY(int, uptimeSize, 30)
-    CONFIG_PROPERTY(int, bubbleSize, 8)
     CONFIG_PROPERTY(int, dateTimeWidth, 110)
     CONFIG_PROPERTY(int, mediaWidth, 200)
     CONFIG_PROPERTY(int, mediaProgressSweep, 180)