quickshell/modules/notification/NotificationHistory.qml

import QtQuick 
import Quickshell
import QtQuick.Controls
import Quickshell.Wayland
import Quickshell.Hyprland
import Quickshell.Services.Notifications
import "../../config"
import "./notificationServer"

PanelWindow {
    id: root
    implicitWidth: screen.width/5
    implicitHeight: screen.height - Config.barHeight(screen.height)*2
    color: "transparent"
    visible: true
    focusable: true

    anchors {
        top: true
        right: true
    }

    property string textColor: Colors.primary
    property string textBGColor: Qt.alpha(Colors.primaryContainer, 0.75)
    property string bGColor: Qt.alpha(Colors.primaryContainer, 0.5)

    property real bigFontSize: Config.screen_height_to_font_medium(screen.height)
    property real fontSize: Config.screen_height_to_font_small(screen.height)

    property var expandedGroups: ({})

    property var grouped: {
        const vals = NotificationS.trackedNotifications.values
        const len = vals.length
        if (len < 0) return []
        let map = {}
        for (let i = 0; i < vals.length; ++i) {
            const n = vals[i]
            const key = (n && n.appName && n.appName !== "") ? n.appName : "Unknown"
            if (!map[key]) map[key] = []
            map[key].push(n)
        }
        let result = []
        for (const k in map) result.push({ appName: k, notes: map[k] })
        result.sort((a,b)=>a.appName.localeCompare(b.appName))
        return result
    }

    function toggleGroup(appName) {
        let copy = Object.assign({}, expandedGroups)
        copy[appName] = !(copy[appName] === true)
        expandedGroups = copy
    }
    function clearGroup(appName) {
        const vals = NotificationS.trackedNotifications.values.slice()
        for (let i=0;i<vals.length;++i){
            const n=vals[i]
            const key = (n && n.appName && n.appName !== "") ? n.appName : "Unknown"
            if (key===appName) { if (n.tracked) n.dismiss(); else if (n.close) n.close() }
        }
    }
    function clearAll() {
        const vals = NotificationS.trackedNotifications.values.slice()
        for (let i=0;i<vals.length;++i) if (vals[i].tracked) vals[i].dismiss()
        expandedGroups = ({})
    }


    FocusScope {
        id: nHistoryScope
        focus: true

        Keys.onReleased: function(event) {
            if (event.key === Qt.Key_Escape) {
                console.log("Pressed Escape, closing JLearner")
                notifificationHistoryLoader.active = false
            }
        }

        Rectangle {
            anchors.fill: parent
            color: "lightblue"
        }
    }

    Rectangle {
        id: background
        color: bGColor
        // opacity: 0.5
        anchors.fill: parent
        border.width: Config.border_width
        border.color: textColor
        radius: Config.screen_big_radius_fun(screen.height)

        // Text {
        //     anchors.centerIn: parent
        //     font.family: Config.font
        //     font.pixelSize: bigFontSize
        //     color: textColor
        //     wrapMode: Text.Wrap
        //     text: NotificationS.trackedNotifications.values[0]
        // }

        Component.onCompleted: {
            for (var notification in NotificationS.trackedNotifications.values) {
                console.log("[NotificationHistory]: " + notification.appName + " Notifications")
            }
            for (var i =0; i < NotificationS.notificationNum; i++) {
                console.log("[NotificationHistory]: " + NotificationS.trackedNotifications.values[i].appName + " Notifications")
            }
        }

        Column{
            id: bgColumn
            anchors.fill: parent
            anchors.margins: Config.screen_spacing_fun(screen.height)
            spacing: Config.screen_spacing_fun(screen.height)

            Rectangle {
                id: topBar
                width: parent.width
                height: bigFontSize*1.25
                color: textBGColor
                radius: Config.screen_big_radius_fun(screen.height)
                border.width: Config.border_width
                border.color: textColor

                Row{
                    id: backgroundLeft
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: Config.screen_spacing_fun(screen.height)
                    spacing: Config.screen_spacing_fun(screen.height)

                    Text{
                        text: "Notifications:"
                        font.family: Config.font
                        font.pixelSize: bigFontSize
                        color: textColor
                    }
                }

                Row{
                    id: backgroundCenter
                    anchors.centerIn: parent
                    spacing: Config.screen_small_bar_spacing_fun(screen.height)

                    Text{
                        text: NotificationS.soundEnabled ? "󰂚" : "󰂛"
                        font.family: Config.font
                        font.pixelSize: bigFontSize
                        color: textColor
                    }

                    Switch {
                        id: notificationVolumeSwitch

                        implicitWidth: notificationVolumeSwitch.height*2
                        implicitHeight: bigFontSize
                        anchors.verticalCenter: parent.verticalCenter
                        checked: NotificationS.soundEnabled

                        indicator: Rectangle {
                            implicitWidth: notificationVolumeSwitch.width
                            implicitHeight: notificationVolumeSwitch.height
                            radius: height / 2

                            color: notificationVolumeSwitch.checked ? Colors.secondary : Colors.secondaryContainer

                            Behavior on color {
                                ColorAnimation { duration: 150 }
                            }

                            Rectangle {
                                width: parent.height*0.8
                                height: parent.height*0.8
                                radius: width / 2

                                anchors.verticalCenter: parent.verticalCenter
                                x: notificationVolumeSwitch.checked ? parent.width - width - 3 : 3

                                color: notificationVolumeSwitch.checked ? Colors.secondaryContainer : Colors.secondary

                                Behavior on x {
                                    NumberAnimation {
                                        duration: 180
                                        easing.type: Easing.OutCubic
                                    }
                                }

                                Behavior on color {
                                    ColorAnimation { duration: 150 }
                                }
                            }
                        }

                        onCheckedChanged: {
                            NotificationS.soundEnabled = notificationVolumeSwitch.checked
                            console.log("NotificationS.soundEnabled:", NotificationS.soundEnabled)
                        }
                    }
                }

                Row{
                    id: backgroundRight
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    anchors.rightMargin: Config.screen_spacing_fun(screen.height)
                    spacing: Config.screen_spacing_fun(screen.height)

                    MouseArea {
                        id: closeArea
                        width: bigFontSize
                        height: bigFontSize
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
                        Rectangle{
                            anchors.fill: parent
                            color: closeArea.containsMouse ? "red" : textBGColor
                            radius: Config.screen_big_radius_fun(screen.height)
                            border.width: Config.border_width
                            border.color: closeArea.containsMouse ? "white" : textColor
                            Text{
                                text: ""
                                anchors.centerIn: parent
                                font.family: Config.font
                                font.pixelSize: bigFontSize
                                color: closeArea.containsMouse ? "white" : textColor
                            }
                        }
                        onClicked: {
                            closeNHistory()
                        }
                    }
                }
            }

            Rectangle {
                width: parent.width
                height: parent.height - topBar.height - bgColumn.spacing //- bgColumn.anchors.margins*2
                color: textBGColor
                radius: Config.screen_big_radius_fun(screen.height)
                border.width: Config.border_width
                border.color: textColor

                Text {
                    id: noNotificationText
                    anchors.centerIn: parent
                    visible: NotificationS.notificationNum == 0
                    text: "No notifications"
                    font.family: Config.font
                    font.pixelSize: bigFontSize
                    color: textColor
                }

                Flickable {                    
                    id: flick
                    width: parent.width
                    // height: Math.min(root.maxContentHeight, contentColumn.implicitHeight)
                    contentWidth: width
                    contentHeight: contentColumn.implicitHeight
                    clip: true
                    boundsBehavior: Flickable.StopAtBounds
                    flickableDirection: Flickable.VerticalFlick
                    ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded }
                    Column {
                        id: contentColumn
                        width: flick.width
                        spacing: Config.spacing

                    }                        
                }
            }
        }
    }
}