feat: improve notification popup

src/provider/Notifications.qml

@@ -2,9 +2,12 @@ pragma Singleton
 
 import Quickshell.Services.Notifications
 import Quickshell
+import QtQuick
 
 Singleton {
-    property var d: NotificationServer {
+    id: notif
+
+    property var _: NotificationServer {
         actionIconsSupported: true
         actionsSupported: true
         bodyHyperlinksSupported: true
@@ -13,4 +16,13 @@ Singleton {
         bodySupported: true
         imageSupported: true
     }
+    Item {
+
+        Component.onCompleted: () => {
+            notif._.notification.connect(n => {
+                list.push(n);
+            });
+        }
+    }
+    property var list: []
 }

src/widgets/MprisBig/MprisWidget.qml

@@ -2,10 +2,8 @@ import QtQuick.Layouts
 import QtQuick
 import Quickshell
 import QtQuick.Controls
-import Quickshell.Widgets
+import "../../provider"
-import "root:provider"
+import "../../base"
-import "root:base"
-import QtQuick.Effects
 import Quickshell.Services.Mpris
 
 ColumnLayout {
@@ -74,7 +72,7 @@ ColumnLayout {
                 , ["media-playlist-repeat", MprisLoopState.Playlist] //
             ]
             property int index: map.findIndex(e => e[1] === Player.current?.loopState)
-            source: visible ? Quickshell.iconPath(map[index][0]) : ""
+            source: loopButton.visible ? Quickshell.iconPath(map[index][0]) : ""
             onClicked: {
                 const ind = (index + 1) % map.length;
                 Player.current.loopState = map[ind][1];

src/windows/notificationtoast/NotificationToasts.qml

@@ -4,25 +4,27 @@ import QtQuick.Controls
 import "root:provider"
 import "root:base"
 
-PopupWindow {
+PanelWindow {
     id: popups
     required property var win
-    anchor {
+    visible: true
-        rect.x: lbar.width * 1.2
+
-        window: popups.win
+    anchors {
+        left: true
+        top: true
+        bottom: true
     }
 
-    visible: true
+    exclusionMode: ExclusionMode.Normal
 
     mask: Region {
         intersection: Intersection.Combine
-        height: popupcol.count * 26 + popupcol.count * popupcol.spacing + (mouseArea.containsMouse * 114)
+        height: popupcol.contentHeight
-        width: 300
+        width: popups.width
     }
 
     color: "transparent"
-    height: popupcol.count * 26 + 300
+    width: 500
-    width: 300
 
     MouseArea {
         id: mouseArea
@@ -33,10 +35,11 @@ PopupWindow {
             id: popupcol
             anchors.margins: lbar.width * 0.2
             anchors.fill: parent
+            focus: true
             model: ListModel {
                 id: data
                 Component.onCompleted: () => {
-                    Notifications.d.notification.connect(e => {
+                    Notifications._.notification.connect(e => {
                         data.insert(0, e);
                     });
                 }

src/windows/notificationtoast/Toast.qml

@@ -1,14 +1,15 @@
+pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Widgets
-import "root:base"
+import "../../base"
 import Quickshell.Services.Notifications
 
 MouseArea {
     id: toast
-    property int lifetime: 10000
+    property int lifetime: 5000
     property int countdownTime: lifetime
 
     required property string appName
@@ -17,26 +18,34 @@ MouseArea {
     required property string appIcon
     required property string image
     required property NotificationUrgency urgency
+    required property bool hasActionIcons
+    required property var actions
     required property int index
 
-    property var close: () => {
+    function close(): void {
-        toast.parent.parent.model.remove(toast.index, 1);
+        popupcol.model.remove(toast.index, 1);
     }
 
     hoverEnabled: true
-    height: 26
+    height: box.height
-    width: parent.width
+    width: popupcol.width
 
     BRectangle {
         id: box
-        anchors.fill: parent
+        width: parent.width
+        height: header.height + actions.height + test.height + (5 * 3)
 
-        Column {
+        clip: true
-            anchors.fill: parent
+
+        Item {
+            id: inner
             anchors.margins: 5
+            anchors.fill: parent
 
             RowLayout {
+                id: header
                 width: parent.width
+                height: 25
 
                 IconImage {
                     source: toast.appIcon ? Quickshell.iconPath(toast.appIcon) : ""
@@ -48,6 +57,8 @@ MouseArea {
                 Text {
                     text: (toast.appIcon ? " " : toast.appName + ": ") + toast.summary
                     Layout.fillWidth: true
+                    elide: Text.ElideRight
+                    font.pointSize: 12.5
                 }
 
                 Item {
@@ -61,12 +72,29 @@ MouseArea {
                 }
             }
 
+            Rectangle {
+                id: test
+                width: parent.width
+                anchors.top: header.bottom
+                height: 60
+                clip: true
+                property int maxHeight: 0
+                color: "transparent"
+
                 Text {
+                    id: text
+                    anchors.topMargin: 5
                     text: toast.body
                     width: parent.width
-                visible: box.state === "expand"
+                    height: parent.height
                     wrapMode: Text.Wrap
-                Layout.fillWidth: true
+                    elide: Text.ElideRight
+                    font.pointSize: 12.5
+                    Component.onCompleted: () => {
+                        if (text.implicitHeight < test.height) {
+                            test.height = text.implicitHeight;
+                        }
+                        test.maxHeight = text.implicitHeight;
                     }
                 }
 
@@ -74,18 +102,68 @@ MouseArea {
                     name: "expand"
                     when: toast.containsMouse
                     PropertyChanges {
-                target: toast
+                        target: test
-                height: 140
+                        height: test.maxHeight
                     }
                 }
 
                 transitions: Transition {
                     NumberAnimation {
                         properties: "width,height"
-                duration: 100
+                        duration: 50
                         easing.type: Easing.InOutQuad
                     }
                 }
+            }
+
+            RowLayout {
+                id: actions
+                width: parent.width
+                anchors.top: test.bottom
+                anchors.topMargin: 5
+                anchors.bottomMargin: 5
+                Repeater {
+                    model: toast.actions
+
+                    delegate: Button {
+                        id: actionButton
+
+                        required property var modelData
+
+                        IconImage {
+                            visible: toast.hasActionIcons
+                            Component.onCompleted: () => {
+                                if (toast.hasActionIcons) {
+                                    source = actionButton.modelData.identifier;
+                                }
+                            }
+                        }
+
+                        text: modelData.text
+                        onClicked: () => modelData?.invoke()
+                    }
+                }
+
+                visible: toast?.actions ? true : false
+            }
+
+            states: State {
+                name: "expand"
+                when: toast.containsMouse
+                PropertyChanges {
+                    target: box
+                    height: test.height + header.height + actions.height + 15
+                }
+            }
+
+            transitions: Transition {
+                NumberAnimation {
+                    properties: "width,height"
+                    duration: 50
+                    easing.type: Easing.InOutQuad
+                }
+            }
+        }
 
         Rectangle {
             anchors.margins: 2

src/windows/workspace-view/WorkspaceView.qml

@@ -59,19 +59,13 @@ PanelWindow {
                 onClicked: () => I3.dispatch(`workspace ${rec.modelData + 1}`)
             }
         }
-
-        Component.onCompleted: () => {
-            const qs = "/nix/store/78nmm1gzgwfvqgj4pmzi4dgjjzyh8amn-quickshell-0.1.0/bin/quickshell";
-            const conf = "~/devel/projects/nysh/src/shell.qml";
-            I3.dispatch(`bindsym Mod4+M exec "${qs} -p ${conf} msg workspace-view toggle"`);
-        }
     }
 
     color: "transparent"
 
     width: content?.width ?? 500
     height: content?.height ?? 500
-    visible: true
+    visible: false
 
     Component.onCompleted: () => {
         I3.focusedWorkspaceChanged.connect(() => workspaceView.visible = false);