feat: add wip notifications to dash

nix/shell.nix

@@ -11,6 +11,7 @@ pkgs.mkShell {
     # Required for qmlls to find the correct type declarations
     # Sadly Quickshell doesn't export some types declaratively
     export QMLLS_BUILD_DIRS=${pkgs.kdePackages.qtdeclarative}/lib/qt-6/qml/:${quickshell}/lib/qt-6/qml/
+    export QML_IMPORT_PATH=$PWD/src
     ${pkgs.pre-commit}/bin/pre-commit install -f
   '';
 }

src/Dashboard.qml

@@ -1,8 +1,12 @@
 import Quickshell
+import Quickshell.Services.Notifications
 import QtQuick
 import QtQuick.Layouts
 import QtQml
 import "base"
+import "widgets/mpris"
+import "widgets/notifications"
+import "provider"
 
 PanelWindow {
     id: homeWindow
@@ -23,6 +27,7 @@ PanelWindow {
 
     MouseArea {
         id: mouse
+
         anchors.fill: parent
 
         onClicked: homeWindow.root.enabled = false
@@ -69,26 +74,51 @@ PanelWindow {
                     Layout.margins: 15
                     Layout.alignment: Qt.AlignBottom
 
-                    BRectangle {
-                        Layout.fillWidth: true
-                        Layout.preferredHeight: 200
-                        radius: 15
-
-                        RowLayout {
-                            anchors.fill: parent
-                            clip: true
-                            Rectangle {
-                                Layout.margins: 20
-                                Layout.preferredWidth: parent.height - (Layout.margins * 2)
-                                Layout.preferredHeight: parent.height - (Layout.margins * 2)
-                                Layout.maximumWidth: {
-                                    const mWidth = parent.width - (Layout.margins * 2);
-                                    return mWidth > 0 ? mWidth : 0;
-                                }
+                    ListView {
+                        id: popupcol
                         Layout.fillHeight: true
+                        Layout.fillWidth: true
+                        Layout.preferredHeight: 1000
+                        spacing: 10
+                        width: parent.width
+
+                        model: ListModel {
+                            id: list
+                            Component.onCompleted: () => {
+                                Notifications._.notification.connect(e => {
+                                    list.append({
+                                        notif: e
+                                    });
+                                });
+                            }
+                        }
+
+                        delegate: NotificationToast {
+                            id: toast
+
+                            required property int index
+
+                            width: ListView.view.width
+
+                            Component.onCompleted: {
+                                toast.notif.closed.connect(e => {
+                                    if (!toast)
+                                        return;
+
+                                    list.remove(toast.index, 1);
+                                });
+
+                                toast.close.connect(() => {
+                                    const notif = toast.notif;
+
+                                    list.remove(toast.index, 1);
+                                    notif.dismiss();
+                                });
                             }
                         }
                     }
+
+                    MprisSmall {}
                 }
             }
         }

src/MainBar.qml

@@ -7,6 +7,7 @@ import "widgets/caffeine"
 import "windows/notificationtoast"
 import "windows/workspace-view"
 import "base"
+import "provider"
 import Quickshell // for ShellRoot and PanelWindow
 import QtQuick
 import QtQuick.Layouts
@@ -18,9 +19,11 @@ PanelWindow {
 
     anchors {
         top: true
-        left: true
+        left: Config.alignment === Config.BarAlignment.Left
+        right: Config.alignment === Config.BarAlignment.Right
         bottom: true
     }
+
     margins.left: 2
     margins.top: 2
     margins.bottom: 2
@@ -68,6 +71,7 @@ PanelWindow {
                 Layout.fillHeight: true
             }
         }
+
         MouseArea {
             id: mouse
             onClicked: lbar.root.enabled = !lbar.root.enabled

src/base/BRectangle.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import "../provider"
 
 Rectangle {
     width: parent.width
@@ -6,5 +7,5 @@ Rectangle {
     border.color: "black"
     border.width: 1
     radius: 5
-    color: "#BD93F9"
+    color: Config.colours.main
 }

src/base/BRoundedImage.qml

@@ -25,18 +25,13 @@ Rectangle {
         maskSource: mask
     }
 
-    Item {
+    Rectangle {
         id: mask
         width: image.width
         height: image.height
         layer.enabled: true
         visible: false
-
-        Rectangle {
-            width: image.width
-            height: image.height
         radius: roundedImage.radius
         color: "black"
     }
-    }
 }

src/base/BlurredImage.qml

@@ -0,0 +1,44 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Effects
+
+Rectangle {
+    id: root
+    required property var source
+    color: "transparent"
+
+    Image {
+        id: background
+        anchors.fill: parent
+        source: root.source
+        Layout.alignment: Qt.AlignHCenter
+        visible: false
+    }
+
+    MultiEffect {
+        id: image
+        autoPaddingEnabled: false
+        source: background
+        anchors.fill: background
+        blurEnabled: true
+        blurMax: 64
+        blurMultiplier: 2
+        blur: 1
+        brightness: -0.15
+        contrast: -0.35
+        maskEnabled: true
+        maskSource: mask
+        anchors.margins: root.border.width - 1
+    }
+
+    Rectangle {
+        id: mask
+        width: image.width
+        height: image.height
+        layer.enabled: true
+        visible: false
+
+        radius: root.radius
+        color: "black"
+    }
+}

src/provider/Config.qml

@@ -0,0 +1,22 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+
+Singleton {
+    id: config
+    property Item notifications: Item {
+        property int toastDuration: 5000
+    }
+
+    enum BarAlignment {
+        Left,
+        Right
+    }
+
+    property int alignment: Config.BarAlignment.Left
+
+    property Item colours: Item {
+        property color main: "#BD93F9"
+    }
+}

src/provider/Notifications.qml

@@ -3,6 +3,7 @@ pragma Singleton
 import Quickshell.Services.Notifications
 import Quickshell
 import QtQuick
+import "../utils/timer.mjs" as Timer
 
 Singleton {
     id: notif
@@ -15,14 +16,18 @@ Singleton {
         bodyMarkupSupported: false
         bodySupported: true
         imageSupported: true
-    }
-    Item {
 
-        Component.onCompleted: () => {
-            notif._.notification.connect(n => {
-                list.push(n);
+        onNotification: n => {
+            n.tracked = true;
+
+            notif.incomingAdded(n);
+
+            Timer.after(1000, notif, () => {
+                notif.incomingRemoved(n.id);
             });
         }
     }
-    property var list: []
+
+    signal incomingRemoved(id: int)
+    signal incomingAdded(id: Notification)
 }

src/provider/Player.qml

@@ -9,15 +9,22 @@ Singleton {
 
     property var current: player.all[player.index]
 
-    property var all: Mpris.players.values
+    property list<MprisPlayer> all: Mpris.players.values
+
     property int index: {
         const ind = Mpris.players.values.findIndex(p => p.playbackState === MprisPlaybackState.Playing);
         return ind >= 0 ? ind : 0;
     }
-    property var next: () => {
+
+    onIndexChanged: () => {
+        player.current = player.all[player.index] ?? player.current;
+    }
+
+    function next(): void {
         player.index = (player.index + 1) % all.length;
     }
-    property var prev: () => {
+
+    function prev(): void {
         const newInd = player.index - 1;
         player.index = newInd < 0 ? all.length - 1 : newInd;
     }

src/provider/qmldir

@@ -0,0 +1,6 @@
+module Provider
+singleton Config 0.1 Config.qml
+singleton Player 0.1 Player.qml
+singleton Inhibitor 0.1 Inhibitor.qml
+singleton Notifications 0.1 Notifications.qml
+singleton Time 0.1 Time.qml

src/utils/qmldir

@@ -0,0 +1,2 @@
+module Utils
+Timer 0.1 timer.mjs

src/utils/timer.mjs

@@ -0,0 +1,13 @@
+export function Timer(parent) {
+  return Qt.createQmlObject("import QtQuick; Timer {}", parent);
+}
+
+export function after(delay, parent, callback) {
+  const timer = new Timer(parent);
+
+  timer.interval = delay;
+
+  timer.triggered.connect(callback);
+
+  timer.start();
+}

src/widgets/MprisBig/MprisWidget.qml

@@ -72,7 +72,7 @@ ColumnLayout {
                 , ["media-playlist-repeat", MprisLoopState.Playlist] //
             ]
             property int index: map.findIndex(e => e[1] === Player.current?.loopState)
-            source: loopButton.visible ? Quickshell.iconPath(map[index][0]) : ""
+            source: loopButton.visible && map[index] && map[index][0] ? Quickshell.iconPath(map[index][0]) : ""
             onClicked: {
                 const ind = (index + 1) % map.length;
                 Player.current.loopState = map[ind][1];

src/widgets/mpris/MprisSmall.qml

@@ -0,0 +1,135 @@
+import QtQuick.Effects
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick
+import Quickshell.Services.Mpris
+import Quickshell
+import "../../base"
+import "../../provider"
+
+BRectangle {
+    id: mprisSmall
+    Layout.fillWidth: true
+    Layout.preferredHeight: 200
+    radius: 15
+
+    visible: Player.current ?? false
+
+    BlurredImage {
+        source: Player.current?.trackArtUrl ?? ""
+        anchors.fill: parent
+        radius: parent.radius
+    }
+
+    RowLayout {
+        anchors.fill: parent
+        clip: true
+        BRoundedImage {
+            id: im
+            color: "transparent"
+            visible: false
+            source: Player.current?.trackArtUrl ?? ""
+            radius: 15
+        }
+
+        MultiEffect {
+            id: effect
+            source: im
+            autoPaddingEnabled: true
+            shadowBlur: 1.0
+            shadowColor: 'black'
+            shadowEnabled: true
+            Layout.margins: 20
+            Layout.preferredWidth: parent.height - (Layout.margins * 2)
+            Layout.preferredHeight: parent.height - (Layout.margins * 2)
+            Layout.maximumWidth: {
+                const mWidth = parent.width - (Layout.margins * 2);
+                return mWidth > 0 ? mWidth : 0;
+            }
+            Layout.fillHeight: true
+        }
+
+        ColumnLayout {
+            Layout.maximumWidth: parent.width / 2
+            Layout.fillWidth: true
+            clip: true
+
+            Text {
+                text: Player.current?.trackTitle ?? "Unknown Track"
+                color: "white"
+                Layout.alignment: Qt.AlignCenter
+                Layout.maximumWidth: parent.width
+                elide: Text.ElideRight
+            }
+
+            Text {
+                text: Player.current?.trackAlbum ?? "Unknown Album"
+                color: "white"
+                Layout.alignment: Qt.AlignCenter
+                Layout.maximumWidth: parent.width
+                elide: Text.ElideRight
+            }
+
+            Text {
+                text: Player.current?.trackAlbumArtist ?? "Unknown Artist"
+                color: "white"
+                Layout.alignment: Qt.AlignCenter
+                Layout.maximumWidth: parent.width
+                elide: Text.ElideRight
+            }
+
+            RowLayout {
+                Layout.alignment: Qt.AlignCenter
+                BIconButton {
+                    source: Quickshell.iconPath("media-seek-backward")
+                    onClicked: Player.current.previous()
+                    size: 20
+                }
+                BIconButton {
+                    source: Quickshell.iconPath(Player.isPlaying ? "media-playback-pause" : "media-playback-start")
+                    onClicked: Player.current.togglePlaying()
+                    size: 20
+                }
+
+                BIconButton {
+                    source: Quickshell.iconPath("media-seek-forward")
+                    onClicked: Player.current.next()
+                    size: 20
+                }
+            }
+
+            Slider {
+                id: slider
+                Layout.fillWidth: true
+                Layout.minimumWidth: 10
+                Layout.minimumHeight: 3
+                from: 0
+                to: Player.current?.length ?? 0
+                value: Player.current?.position ?? 0
+                enabled: (Player.current?.canSeek && Player.current?.positionSupported) ?? false
+
+                onMoved: {
+                    if (Player.current)
+                        Player.current.position = value;
+                }
+
+                Component.onCompleted: {
+                    const con = () => mprisSmall.player?.positionChanged.connect(() => {
+                            slider.value = Player.current?.position;
+                        });
+                    con();
+                    Player.currentChanged.connect(() => {
+                        con();
+                    });
+                }
+
+                FrameAnimation {
+                    // only emit the signal when the position is actually changing.
+                    running: Player.current?.playbackState == MprisPlaybackState.Playing
+                    // emit the positionChanged signal every frame.
+                    onTriggered: Player.current?.positionChanged()
+                }
+            }
+        }
+    }
+}

src/widgets/notifications/NotificationToast.qml

@@ -0,0 +1,163 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Widgets
+import "../../base"
+import "../../provider"
+import Quickshell.Services.Notifications
+
+MouseArea {
+    id: toast
+
+    required property Notification notif
+    property int actionHeight: 30
+    property int expansionSpeed: 200
+    property bool showTimeBar: false
+
+    height: box.height
+    hoverEnabled: true
+
+    signal close
+
+    BRectangle {
+        id: box
+        width: parent.width
+        height: header.height + toast.actionHeight + bodyBox.height + (5 * 3)
+
+        clip: true
+
+        Item {
+            id: inner
+            anchors.margins: 5
+            anchors.fill: parent
+
+            RowLayout {
+                id: header
+                width: parent.width
+                height: 25
+
+                IconImage {
+                    source: toast.notif.appIcon ? Quickshell.iconPath(toast.notif.appIcon) : ""
+                    height: parent.height
+                    width: height
+                    visible: toast.notif.appIcon
+                }
+
+                Text {
+                    text: `${toast.notif.appIcon ? "" : `${toast.notif.appName}:`} ${toast.notif.summary}`
+                    Layout.fillWidth: true
+                    elide: Text.ElideRight
+                    font.pointSize: 12.5
+                }
+
+                Button {
+                    onClicked: toast.close()
+                    height: 16
+                    width: 16
+                }
+            }
+
+            Rectangle {
+                id: bodyBox
+                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.notif.body
+                    width: parent.width
+                    height: parent.height
+                    wrapMode: Text.Wrap
+                    elide: Text.ElideRight
+                    font.pointSize: 12.5
+
+                    Component.onCompleted: () => {
+                        if (text.implicitHeight < bodyBox.height) {
+                            bodyBox.height = text.implicitHeight;
+                        }
+
+                        bodyBox.maxHeight = Qt.binding(() => text.implicitHeight);
+                    }
+                }
+
+                states: State {
+                    name: "expand"
+                    when: toast.containsMouse
+                    PropertyChanges {
+                        target: bodyBox
+                        height: bodyBox.maxHeight
+                    }
+                }
+
+                transitions: Transition {
+                    NumberAnimation {
+                        properties: "height"
+                        duration: toast.expansionSpeed
+                    }
+                }
+            }
+            RowLayout {
+                id: actions
+                width: parent.width
+                anchors.top: bodyBox.bottom
+                anchors.topMargin: 5
+                anchors.bottomMargin: 5
+                Repeater {
+                    id: rep
+                    model: toast.notif.actions
+
+                    delegate: NotificationToastAction {
+                        required property var modelData
+                        notifAction: modelData
+                        hasIcons: toast.notif.hasActionIcons
+                        height: toast.actionHeight
+                    }
+                }
+
+                visible: toast?.notif.actions ? true : false
+            }
+        }
+
+        NumberAnimation on width {
+            duration: toast.expansionSpeed
+        }
+
+        Rectangle {
+            id: timeBar
+            visible: toast.showTimeBar
+            anchors.margins: 2
+            anchors.bottom: box.bottom
+            anchors.right: box.right
+            width: box.width - box.border.width - anchors.margins
+            height: 2
+            bottomLeftRadius: box.radius
+            bottomRightRadius: box.radius
+            color: {
+                switch (toast.urgency) {
+                case NotificationUrgency.Critical:
+                    return "red";
+                    break;
+                case NotificationUrgency.Normal:
+                    return "green";
+                    break;
+                default:
+                    return "white";
+                }
+            }
+
+            NumberAnimation on width {
+                to: 0
+                duration: Config.notifications.toastDuration
+                paused: toast.containsMouse && timeBar.visible
+                running: timeBar.visible
+            }
+        }
+    }
+}

src/widgets/notifications/NotificationToastAction.qml

@@ -0,0 +1,22 @@
+import QtQuick.Controls
+import Quickshell.Widgets
+import QtQuick
+
+Button {
+    id: actionButton
+
+    required property var notifAction
+    required property bool hasIcons
+
+    IconImage {
+        visible: parent.hasIcons
+        Component.onCompleted: () => {
+            if (parent.hasIcons) {
+                source = actionButton.notifAction?.identifier ?? "";
+            }
+        }
+    }
+
+    text: notifAction?.text ?? ""
+    onClicked: () => notifAction?.invoke()
+}

src/windows/audioman/AudioManager.qml

@@ -3,11 +3,9 @@ import Quickshell.Services.Pipewire
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
-import Quickshell.Services.Mpris
-import "root:base"
-import "root:provider"
-import QtQuick.Effects
-import "root:widgets/MprisBig"
+import "../../base"
+import "../../provider"
+import "../../widgets/MprisBig"
 
 PanelWindow {
     id: audioman
@@ -25,53 +23,15 @@ PanelWindow {
         anchors.fill: parent
         onClicked: audioman.visible = false
 
-        BRectangle {
+        BlurredImage {
             id: display
-
             x: 10
             y: 10
             width: 500
             height: 600
             radius: 10
-
-            Image {
-                id: background
-                anchors.fill: parent
             source: Player.current?.trackArtUrl ?? ""
-                Layout.alignment: Qt.AlignHCenter
-                visible: false
-                anchors.margins: display.border.width - 1
-            }
-
-            MultiEffect {
-                id: image
-                autoPaddingEnabled: false
-                source: background
-                anchors.fill: background
-                blurEnabled: true
-                blurMax: 64
-                blurMultiplier: 2
-                blur: 1
-                brightness: -0.15
-                contrast: -0.35
-                maskEnabled: true
-                maskSource: mask
-            }
-
-            Item {
-                id: mask
-                width: image.width
-                height: image.height
-                layer.enabled: true
-                visible: false
-
-                Rectangle {
-                    width: image.width
-                    height: image.height
-                    radius: display.radius
-                    color: "black"
-                }
-            }
+            color: "#BD93F9"
 
             ScrollView {
                 id: test

src/windows/notificationtoast/NotificationToasts.qml

@@ -3,6 +3,7 @@ import Quickshell
 import QtQuick.Controls
 import "root:provider"
 import "root:base"
+import "../../widgets/notifications"
 
 PanelWindow {
     id: popups
@@ -36,11 +37,15 @@ PanelWindow {
             anchors.margins: lbar.width * 0.2
             anchors.fill: parent
             focus: true
+            spacing: 10
+
             model: ListModel {
                 id: data
                 Component.onCompleted: () => {
-                    Notifications._.notification.connect(e => {
-                        data.insert(0, e);
+                    Notifications.incomingAdded.connect(n => {
+                        data.insert(0, {
+                            notif: n
+                        });
                     });
                 }
             }
@@ -80,8 +85,34 @@ PanelWindow {
                 }
             }
 
-            spacing: 10
-            delegate: Toast {}
+            delegate: NotificationToast {
+                id: toast
+
+                property int countdownTime: Config.notifications.toastDuration
+                required property int index
+
+                width: ListView.view.width
+                showTimeBar: true
+
+                Timer {
+                    id: timer
+                    interval: 100
+                    onTriggered: () => {
+                        toast.countdownTime -= interval;
+                        if (toast.countdownTime <= 0) {
+                            toast.close();
+                        }
+                    }
+                    repeat: true
+                    running: !toast.containsMouse && toast.countdownTime > 0
+                }
+
+                Component.onCompleted: {
+                    toast.close.connect(() => {
+                        popupcol.model.remove(toast.index, 1);
+                    });
+                }
+            }
         }
     }
 }

src/windows/notificationtoast/Toast.qml

@@ -1,205 +0,0 @@
-pragma ComponentBehavior: Bound
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import Quickshell
-import Quickshell.Widgets
-import "../../base"
-import Quickshell.Services.Notifications
-
-MouseArea {
-    id: toast
-    property int lifetime: 5000
-    property int countdownTime: lifetime
-
-    required property string appName
-    required property string summary
-    required property string body
-    required property string appIcon
-    required property string image
-    required property NotificationUrgency urgency
-    required property bool hasActionIcons
-    required property var actions
-    required property int index
-
-    function close(): void {
-        popupcol.model.remove(toast.index, 1);
-    }
-
-    hoverEnabled: true
-    height: box.height
-    width: popupcol.width
-
-    BRectangle {
-        id: box
-        width: parent.width
-        height: header.height + actions.height + test.height + (5 * 3)
-
-        clip: true
-
-        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) : ""
-                    height: parent.height
-                    width: height
-                    visible: toast.appIcon
-                }
-
-                Text {
-                    text: (toast.appIcon ? " " : toast.appName + ": ") + toast.summary
-                    Layout.fillWidth: true
-                    elide: Text.ElideRight
-                    font.pointSize: 12.5
-                }
-
-                Item {
-                    Layout.fillHeight: true
-                    Layout.rightMargin: 16
-                    Button {
-                        onClicked: toast.close()
-                        height: 16
-                        width: 16
-                    }
-                }
-            }
-
-            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
-                    height: parent.height
-                    wrapMode: Text.Wrap
-                    elide: Text.ElideRight
-                    font.pointSize: 12.5
-                    Component.onCompleted: () => {
-                        if (text.implicitHeight < test.height) {
-                            test.height = text.implicitHeight;
-                        }
-                        test.maxHeight = text.implicitHeight;
-                    }
-                }
-
-                states: State {
-                    name: "expand"
-                    when: toast.containsMouse
-                    PropertyChanges {
-                        target: test
-                        height: test.maxHeight
-                    }
-                }
-
-                transitions: Transition {
-                    NumberAnimation {
-                        properties: "width,height"
-                        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
-            anchors.bottom: box.bottom
-            anchors.right: box.right
-            width: (box.width - box.border.width - anchors.margins) * (toast.countdownTime / toast.lifetime)
-            height: 2
-            bottomLeftRadius: box.radius
-            bottomRightRadius: box.radius
-            color: {
-                switch (toast.urgency) {
-                case NotificationUrgency.Critical:
-                    return "red";
-                    break;
-                case NotificationUrgency.Normal:
-                    return "green";
-                    break;
-                default:
-                    return "white";
-                }
-            }
-        }
-    }
-
-    Timer {
-        id: timer
-        interval: 10
-        repeat: !toast.containsMouse
-        onTriggered: () => {
-            toast.countdownTime -= timer.interval;
-            if (toast.countdownTime <= 0) {
-                toast.parent.parent.model.remove(toast.index, 1);
-                timer.repeat = false;
-                timer.running = false;
-            }
-        }
-        running: !toast.containsMouse
-    }
-}