simple dashboard

only has mpris

modules/Shell.qml

@@ -1,4 +1,5 @@
 import "bar"
+import "drawers"
 import "launcher"
 import "pomodoro"
 import "powermenu"
@@ -19,5 +20,6 @@ Variants {
         Pomodoro {}
         PowerMenu {}
         Storybook {}
+        Drawers {}
     }
 }

modules/bar/components/Mpris.qml

@@ -10,17 +10,8 @@ import QtQuick.Layouts
 StyledButton {
     id: root
 
-    padding: 6
-
     onClicked: {
-        if (!Mpris.active.canTogglePlaying) {
-            return;
-        }
-        if (Mpris.active.isPlaying) {
-            Mpris.active.pause();
-        } else {
-            Mpris.active.play();
-        }
+        Visibility.dashboard = !Visibility.dashboard;
     }
 
     content: ColumnLayout {
@@ -56,22 +47,5 @@ StyledButton {
                 }
             }
         }
-        StyledSlider {
-            from: 0
-            to: Mpris.active?.length ?? 0
-            value: Mpris.active?.position
-            implicitHeight: 6
-            Layout.fillWidth: true
-            onMoved: {
-                Mpris.active.position = value;
-            }
-
-            Timer {
-                running: Mpris.active?.isPlaying
-                interval: 1000
-                repeat: true
-                onTriggered: Mpris.active?.positionChanged()
-            }
-        }
     }
 }

modules/drawers/Drawers.qml

@@ -0,0 +1,41 @@
+import "dashboard"
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+
+PanelWindow {
+    id: parentWindow
+
+    anchors.top: true
+    anchors.left: true
+    anchors.right: true
+    anchors.bottom: true
+
+    color: 'transparent'
+
+    // WlrLayershell.exclusionMode: ExclusionMode.Ignore
+    WlrLayershell.layer: WlrLayer.Top
+
+    mask: Region {
+        width: parentWindow.width
+        height: parentWindow.height
+        intersection: Intersection.Xor
+        regions: [
+            Region {
+                x: dashboard.x
+                y: dashboard.y
+                width: dashboard.width
+                height: dashboard.height
+                intersection: Intersection.Subtract
+            }
+        ]
+    }
+
+    Dashboard {
+        id: dashboard
+        x: parentWindow.width / 2 - dashboard.width / 2
+        edge: Qt.TopEdge
+        padding: 20
+        margins: 200
+    }
+}

modules/drawers/dashboard/Dashboard.qml

@@ -0,0 +1,63 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.config
+import qs.constants
+import qs.services
+import qs.widgets
+import QtQuick
+import QtQuick.Layouts
+
+StyledDrawer {
+    id: root
+
+    visible: Visibility.dashboard
+
+    margins: 20
+    contentItem: ColumnLayout {
+
+        RowLayout {
+            Layout.alignment: Qt.AlignHCenter
+
+            StyledButton {
+                id: previousPlayerButton
+                visible: Mpris.players.length > 1
+                content: LucideIcon {
+                    color: previousPlayerButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
+                    text: Icons.chevronLeft
+                }
+                onClicked: {
+                    Mpris.previousPlayer();
+                }
+            }
+
+            StyledText {
+                text: {
+                    if (Mpris.active?.identity) {
+                        const words = Mpris.active?.identity.split("-");
+                        const capitalized = words.map(val => String(val).charAt(0).toUpperCase() + String(val).slice(1));
+                        return capitalized.join(" ");
+                    }
+                    return Mpris.active?.desktopEntry ?? Mpris.active?.dbusName ?? "unknown";
+                }
+                font.pixelSize: 20
+            }
+
+            StyledButton {
+                id: nextPlayerButton
+                visible: Mpris.players.length > 1
+                content: LucideIcon {
+                    color: nextPlayerButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
+                    text: Icons.chevronRight
+                }
+                onClicked: {
+                    Mpris.nextPlayer();
+                }
+            }
+        }
+
+        MprisController {
+            player: Mpris.active
+        }
+    }
+}