fix dashboard display and player switch

only has mpris

constants/Icons.qml

@@ -13,6 +13,8 @@ Singleton {
     property string bluetoothConnected: "\u{E1b8}"
     property string brickWall: "\u{E586}"
     property string coffee: "\u{E09a}"
+    property string chevronLeft: "\u{E072}"
+    property string chevronRight: "\u{E073}"
     property string cpu: "\u{E0ad}"
     property string gpu: "\u{E66f}"
     property string hardDrive: "\u{E0f1}"

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,67 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.config
+import qs.constants
+import qs.services
+import qs.widgets
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Widgets
+
+StyledDrawer {
+    id: root
+
+    visible: Visibility.dashboard
+
+    WrapperRectangle {
+        color: Theme.palette.base300
+        radius: 8
+        margin: 20
+        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
+            }
+        }
+    }
+}

services/Mpris.qml

@@ -20,13 +20,14 @@ Singleton {
         if (players.length == 0) {
             return;
         }
-        properties.currentIndex = properties.currentIndex + 1 % players.length;
+        properties.currentIndex = (properties.currentIndex + 1) % players.length;
     }
 
     function previousPlayer() {
         if (players.length == 0) {
             return;
         }
-        properties.currentIndex = properties.currentIndex - 1 % players.length;
+        const newIndex = properties.currentIndex - 1;
+        properties.currentIndex = newIndex >= 0 ? newIndex : players.length - 1;
     }
 }

services/Visibility.qml

@@ -4,6 +4,7 @@ import qs.widgets
 import Quickshell
 
 Singleton {
+    property alias dashboard: properties.dashboard
     property alias launcher: properties.launcher
     property alias pomodoro: properties.pomodoro
     property alias powermenu: properties.powermenu
@@ -21,6 +22,7 @@ Singleton {
     PersistentProperties {
         id: properties
 
+        property bool dashboard
         property bool launcher
         property bool pomodoro
         property bool powermenu