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 bool firstTime: true

    property string image: {
        if (hasImage) {
            return notification?.image;
        }
        if (notification?.appIcon === "") {
            return "";
        }
        return Quickshell.iconPath(notification?.appIcon);
    }
    property real targetHeight: notifLayout.implicitHeight + 20

    implicitWidth: 400
    implicitHeight: 0
    // implicitHeight: Math.max(notifLayout.implicitHeight, 100)

    Component.onCompleted: {
        root.implicitHeight = targetHeight;
    }
    clip: true

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

    MouseArea {
        anchors.fill: parent
        onClicked: {
            root.clicked = true;
            root.implicitHeight = 0;
        }
    }

    Timer {
        id: notifTimer

        interval: timerDuration
        running: root.startTimer

        onTriggered: {
            root.implicitHeight = 0;
        }
    }

    RowLayout {
        id: notifLayout

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

        anchors {
            fill: parent
        }

        IconImage {
            id: iconImage

            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
            Layout.leftMargin: 10
            implicitSize: 80
            visible: root.image ? true : false
            source: 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

                    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

                    text: root.notification ? root.notification.body : ""
                }
            }
        }
    }
}