Notifications n shi

Panes/NotificationCenter.qml

@@ -0,0 +1,153 @@
+import QtQuick
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Services.Mpris
+import Quickshell.Services.Notifications
+import "../Widgets" as Widgets
+
+Item {
+    anchors {
+        top: parent.top
+        horizontalCenter: parent.horizontalCenter
+    }
+    width: childrenRect.width + 12
+    height: childrenRect.height + 12
+    Row {
+        spacing: 6
+        x: 6
+        y: 6
+        Rectangle {
+            width: 400
+            height: 300
+            color: "#181818"
+            radius: 10
+            Column {
+                anchors.centerIn: parent
+                spacing: 2
+                opacity: !notifServer.trackedNotifications.values.length
+                Behavior on opacity {NumberAnimation {duration: 150}}
+                Image {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    source: Quickshell.shellPath("assets/notif.svg")
+                    width: 24
+                    height: 24
+                    sourceSize {width: width; height: height}
+                    opacity: 0.5
+                }
+                Text {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    color: "#888"
+                    text: "No notifications"
+                }
+            }
+            ListView {
+                anchors.fill: parent
+                clip: true
+                spacing: 4
+                header: Item {height: 4; width: 1}
+                model: Array.from(notifServer.trackedNotifications.values)
+                delegate: Widgets.Notification {
+                    color: "#222"
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        margins: 4
+                    }
+                }
+            }
+        }
+        Item {
+            id: player
+            property var modelData: Mpris.players.values[0]
+            height: 300
+            width: 250
+            Column {
+                anchors.centerIn: parent
+                spacing: 2
+                Image {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    source: Quickshell.shellPath("assets/player-symbolic.svg")
+                    width: 24
+                    height: 24
+                    sourceSize {width: width; height: height}
+                    opacity: 0.5
+                }
+                Text {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    color: "#888"
+                    text: "Nothing playing"
+                }
+            }
+            Column {
+                anchors.centerIn: parent
+                opacity: Mpris.players.values.length
+                ClippingRectangle {
+                    color: "transparent"
+                    width: 180
+                    height: 180
+                    radius: height/2
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    Image {
+                        anchors.fill: parent
+                        source: player.modelData?.trackArtUrl ?? source
+                    }
+                    NumberAnimation on rotation {
+                        id: spin
+                        paused: !player.modelData?.isPlaying || !root.up || background.index !== 3
+                        duration: 30000
+                        loops: Animation.Infinite
+                        from: 0
+                        to: 360
+                    }
+                }
+                Item {width: 1; height: 10}
+                Text {
+                    color: "white"
+                    text: player.modelData?.trackTitle ?? ""
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    font.pixelSize: 16
+                }
+                Text {
+                    color: "white"
+                    text: player.modelData?.trackArtist ?? ""
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    font.pixelSize: 12
+                }
+                Item {width: 1; height: 8}
+                Row {
+                    height: childrenRect.height
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    component Button: Rectangle {
+                        id: button
+                        property var action
+                        property var clicked
+                        radius: 12
+                        color: hover.hovered ? "#11ffffff" : "#00ffffff"
+                        property var hover: HoverHandler {}
+                        width: 40
+                        height: width
+                        Image {
+                            anchors.fill: parent
+                            anchors.margins: 8
+                            sourceSize {width: width; height: height}
+                            source: Quickshell.shellPath(`assets/lazer-${action}-symbolic.svg`)
+                        }
+                        TapHandler {onTapped: button.clicked()}
+                    }
+                    Button {
+                        action: "previous"
+                        clicked: player.modelData?.previous
+                    }
+                    Button {
+                        action: player.modelData?.isPlaying ? "pause" : "play"
+                        clicked: player.modelData?.togglePlaying
+                    }
+                    Button {
+                        action: "next"
+                        clicked: player.modelData?.next
+                    }
+                }
+            }
+        }
+    }
+}