quickshell/modules/notifications/NotificationCard.qml

import QtQuick
import qs.settings
import QtQuick.Layouts
import qs
import Quickshell
import qs.widgets
import Quickshell.Widgets

Rectangle {
    id: notifyItem
    required property var modelData
    implicitWidth: ListView.view ? ListView.view.width : 500
    implicitHeight: fullLayout.implicitHeight + 40
    color: dismissArea.containsMouse ? Colors.base02 : Colors.base00
    radius: Settings.config.rounding
    border.width: 2
    border.color: Colors.base0D
    Timer {
        id: dismissTimer
        interval: 5000
        running: true
        onTriggered: notifyItem.modelData.expire()
    }

    RowLayout {
        id: fullLayout
        anchors.margins: 20
        anchors.fill: parent
        anchors.centerIn: parent
        spacing: 10

        ClippingWrapperRectangle {
            id: notiIconWrapper
            Layout.alignment: Qt.AlignTop
            radius: notifyItem.radius - notifyItem.radius / 3
            implicitWidth: notiIcon.implicitSize
            color: "transparent"
            implicitHeight: notiIcon.implicitSize
            visible: notifyItem.modelData.image !== ""
            IconImage {
                id: notiIcon
                source: notifyItem.modelData.image !== "" ? notifyItem.modelData.image : Quickshell.iconPath("preferences-desktop-notification-bell")
                implicitSize: 64
                asynchronous: true
            }
        }

        ColumnLayout {
            id: textLayout
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignTop
            spacing: 0

            CText {
                id: appName
                text: notifyItem.modelData.appName
                opacity: 0.5
                font.pixelSize: 10
            }
            CText {
                id: summary
                text: notifyItem.modelData.summary
                font.bold: true
                elide: Text.ElideRight
                Layout.fillWidth: true
                Layout.bottomMargin: 0
                Layout.topMargin: 5
                maximumLineCount: 1
                onTextChanged: {
                    dismissTimer.restart();
                }
            }

            CText {
                text: notifyItem.modelData.body
                font.pixelSize: Settings.config.fontSize - 2
                maximumLineCount: 1
                opacity: 0.3
                wrapMode: Text.WordWrap
                elide: Text.ElideRight
                Layout.fillWidth: true
            }
        }
    }

    MouseArea {
        id: dismissArea
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton
        onClicked: notifyItem.modelData.dismiss()
        cursorShape: Qt.PointingHandCursor
        hoverEnabled: true
    }
}