nixfiles/quickshell/Components/NotificationDisplay.qml

import Quickshell
import Quickshell.Widgets
import Quickshell.Io
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import "root:/DataSources"
import "root:/Helpers"
import Quickshell.Services.Notifications

Item {
  id: root
  Layout.alignment: Qt.AlignVCenter;
  implicitWidth: 25
  implicitHeight: parent.height
  Rectangle {
    anchors.centerIn: parent
    id: rootContainer
    color: "transparent"
    width: 30
    height: 30
    radius: 50
    Text {
      id: rootIcon
      text: ""
      color: Stylix.base05
      anchors.centerIn: parent
    }
  }
  function updateDisplay() {
    if (Notifications.list.length > 0) {
      rootContainer.color = Stylix.base08
      rootIcon.color = Stylix.base00
    } else {
      rootContainer.color = "transparent"
      rootIcon.color = Stylix.base05
    }
  }
  Timer {
    interval: 1000
    running:  true
    repeat: true
    onTriggered: root.updateDisplay()
  }
  MouseArea {
    id: ma
    anchors.fill: parent
    hoverEnabled: true

    onClicked: function(mouseEvent) {
      var m = root.QsWindow.mapFromItem(ma, ma.width/2.0, ma.height/2.0);
      var offset = notificationLoader.item.width / 2.0;
      notificationLoader.item.clicky = m.x - offset;
      notificationLoader.item.visible = !notificationLoader.item.visible
    }
  }

  LazyLoader {
    id: notificationLoader

    loading: true

    PopupWindow {
      property real clicky
      id: wrapperPopup
      visible: false
      anchor.window: root.QsWindow.window
      anchor.rect.y: parentWindow?.height ?? 0
      anchor.rect.x: clicky
      color: "transparent"

      implicitWidth: 400
      implicitHeight: 600

      Rectangle {
        anchors.fill: parent
        color: Stylix.base01
        bottomLeftRadius: 5
        bottomRightRadius: 5
        ColumnLayout {
          anchors.fill: parent
          RowLayout {
            Layout.alignment: Qt.AlignHCenter
            spacing: 5
            Text {
              Layout.preferredHeight: 26
              Layout.alignment: Qt.AlignVCenter
              verticalAlignment: Text.AlignVCenter
              text: "Notifications"
              color: Stylix.base05
              font.pixelSize: 16
            }
            Text {
              Layout.preferredHeight: 26
              Layout.alignment: Qt.AlignVCenter
              verticalAlignment: Text.AlignBottom
              id: clear
              text: "󱏧"
              color: Stylix.base08
              font.pixelSize: 16
              ToolTip {
                id: clearTooltip
                visible: false
                delay: 500
                timeout: 1000
                text: "Clear notifications"
              }
              MouseArea {
                anchors.fill: parent
                onClicked: {
                  if (Notifications.list.length >= 0) {
                    Notifications.clear()
                    root.updateDisplay()
                  }
                }
              }

              HoverHandler {
                id: clearHover
                onHoveredChanged: {
                  clearTooltip.visible = hovered
                }
              }
            }
          }
          ListView {
            id: notificationList
            model: Notifications.list
            spacing: 10
            ScrollBar.vertical: ScrollBar {}
            Layout.alignment: Qt.AlignCenter
            Layout.preferredWidth: parent.width
            Layout.preferredHeight: parent.height

            delegate: Item {
              required property Notification modelData

              height: 100
              width: 400//notificationList.width

              Rectangle {
                id: indivNotif
                color: Stylix.base02
                radius: 5
                anchors {
                  fill: parent
                  leftMargin: 5
                  rightMargin: 5
                }
                RowLayout {
                anchors {
                  fill: parent
                }
                  NotificationImage {
                    image: modelData.image
                  }
                  ColumnLayout {
                    Layout.leftMargin: 5
                    Layout.rightMargin: 5
                    Layout.fillWidth: true
                    NotificationHeader {
                      modelData_: modelData
                    }
                    Text {
                      font.pointSize: 10
                      wrapMode: Text.WordWrap
                      Layout.fillWidth: true
                      Layout.preferredWidth: modelData.image != "" ? indivNotif.width - 80 : indivNotif.width
                      Layout.maximumWidth: indivNotif.width
                      elide: Text.ElideRight
                      text: modelData.body
                      color: Stylix.base05
                    }
                  }
                    NotificationActions {
                      modelData_: modelData
                    }
                }
              }
            }
          }
        }
      }
    }
  }
}