Quickbar/Common/NotificationWrapper.qml

import Quickshell
import QtQuick
import QtQuick.Layouts
import Quickshell.Widgets
import qs.Common.Styled

BackgroundRectangle {
    id: root

    signal dismissed
    signal timedout

    property bool hasImage: notification?.image ? true : false
    property bool clicked: false
    property var notification: null
    property bool startTimer: false
    property int timerDuration: 2000

    property string image: {
        if (hasImage) {
            return notification?.image;
        }
        if (notification?.appIcon === "") {
            return "";
        }
        return Quickshell.iconPath(notification?.appIcon);
    }

    property bool collapsed: true

    implicitWidth: 400
    readonly property real contentHeight: Math.max(notifLayout.implicitHeight + 20, 100)

    height: collapsed ? 0 : contentHeight

    Component.onCompleted: {
        root.collapsed = false;
    }

    Behavior on height {
        SequentialAnimation {
            NumberAnimation {
                duration: 200
                easing.type: Easing.OutCubic
            }
            ScriptAction {
                script: {
                    if (root.clicked)
                        root.dismissed();
                    if (root.height === 0)
                        root.timedout();
                }
            }
        }
    }

    clip: true

    MouseArea {
        anchors.fill: parent
        onClicked: {
            root.clicked = true;
            root.collapsed = true;
            root.dismissed();
        }
    }

    Timer {
        id: notifTimer
        interval: root.timerDuration
        running: root.startTimer
        repeat: false

        onTriggered: {
            root.collapsed = true;
        }
    }

    RowLayout {
        id: notifLayout

        Layout.preferredHeight: Math.max(iconImage.implicitHeight, gridRoot.implicitHeight)

        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
            margins: 10
        }

        IconImage {
            id: iconImage

            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
            Layout.leftMargin: 10
            implicitSize: 80
            visible: root.image ? true : false
            source: root.image ? root.image : ""
        }

        ColumnLayout {
            id: gridRoot

            Layout.leftMargin: 10
            Layout.rightMargin: 10
            implicitHeight: summaryRectangle.implicitHeight + bodyRectangle.implicitHeight

            spacing: 5

            ForegroundRectangle {
                id: summaryRectangle

                Layout.fillWidth: true
                MarginWrapperManager {
                    margin: 10
                }

                implicitHeight: summaryText.implicitHeight + 10

                visible: summaryText.text ? true : false

                StyledText {
                    id: summaryText
                    anchors.fill: parent
                    wrapMode: Text.Wrap
                    text: root.notification ? root.notification.summary : ""
                }
            }

            ForegroundRectangle {
                id: bodyRectangle

                Layout.fillWidth: true
                Layout.columnSpan: 5

                implicitHeight: bodyText.implicitHeight + 10

                visible: bodyText.text ? true : false

                MarginWrapperManager {
                    margin: 15
                }
                StyledText {
                    id: bodyText
                    anchors.fill: parent
                    wrapMode: Text.Wrap
                    text: root.notification ? root.notification.body : ""
                }
            }
        }
    }
}