worked on the notification center

other/quickshell/notifs/NotificationCenter.qml

@@ -12,10 +12,18 @@ Singleton {
     PanelWindow {
         id: window
         visible: false
+        implicitWidth: notificationCenter.width
+        implicitHeight: notificationCenter.height
+        anchors.right: notificationCenter.right
+        anchors.top: notificationCenter.top
 
         Notifs.NotificationCenterView {
             id: notificationCenter
             anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            //width: 500
+            //anchors.verticalCenter: parent.verticalCenter
         }
     }
 

other/quickshell/notifs/NotificationCenterView.qml

@@ -3,64 +3,141 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Io
+import "../theme" as Theme
 
 Rectangle {
     id: root
-    width: 1000
-    height: 800
-    color: "black"
+    width: 500
+    height: 1000
+    anchors.top: parent.top
+    anchors.bottom: parent.bottom
+    color: Theme.Colors.notificationCenterColor1
     visible: false
-    // Toggle the notification center visibility
+
+    ListModel {
+        id: notificationsModel
+    }
+
     function toggleNotificationCenter() {
         root.visible = !root.visible
-        console.log("DEBUG: Toggled NotificationCenter. Visible =", root.visible)
-        if (root.visible) {
+        if (root.visible)
             reload()
-        }
     }
 
-    // FileView for reading the notification cache
     FileView {
         id: historyFile
         path: Quickshell.env("HOME") + "/.cache/notify_history"
         blockLoading: true
     }
 
-    // Reload notifications from the file
     function reload() {
-      root.visible = true
-      /*var text = historyFile.text()
-      if (!text || text.length === 0) {
-        console.log("DEBUG: Notification file empty")
-        return
+        notificationsModel.clear()
+
+        var text = historyFile.text()
+        if (!text || text.length === 0)
+            return
+
+        var lines = text.split("\n")
+        var i = 1
+
+        while (i < lines.length) {
+
+            var app = lines[i++] || ""
+            var title = lines[i++] || ""
+            var bodyLines = []
+
+            while (i < lines.length && !/^\d{2}:\d{2}:\d{2}$/.test(lines[i])) {
+                bodyLines.push(lines[i++])
+            }
+
+            if (i >= lines.length)
+                break
+
+            var time = lines[i++] || ""
+            var urgency = lines[i++] || "normal"
+            var body = bodyLines.join("\n")
+
+            notificationsModel.append({
+                app: app,
+                title: title,
+                body: body,
+                time: time,
+                urgency: urgency
+            })
+        }
     }
 
-    console.log("DEBUG: Raw notification file content:\n" + text)
-    var lines = text.split("\n")
-    console.log("DEBUG: Total lines in file:", lines.length)
+    Component.onCompleted: reload()
+    ListView {
+    id: listView
+    anchors.fill: parent
+    model: notificationsModel
+    spacing: 10
+    clip: true
 
-    var i = 1
-    while (i < lines.length) {
-        var app = lines[i++] || ""
-        var title = lines[i++] || ""
-        var bodyLines = []
+    Component.onCompleted: {
+        console.log("DISPLAY DEBUG: ListView created")
+        console.log("DISPLAY DEBUG: Model count =", notificationsModel.count)
+        console.log("DISPLAY DEBUG: View width =", width, "height =", height)
+    }
 
-        while (i < lines.length && !/^\d{2}:\d{2}:\d{2}$/.test(lines[i])) {
-            bodyLines.push(lines[i++])
+    onCountChanged: {
+        console.log("DISPLAY DEBUG: ListView count changed ->", count)
+    }
+
+    delegate: Rectangle {
+        width: ListView.view.width
+        color: "transparent"
+        border.color: "transparent"
+        border.width: 1
+        radius: 4
+
+        Component.onCompleted: {
+            console.log("DISPLAY DEBUG: Delegate created")
+            console.log("DISPLAY DEBUG: app =", app)
+            console.log("DISPLAY DEBUG: title =", title)
+            console.log("DISPLAY DEBUG: body =", body)
+            console.log("DISPLAY DEBUG: delegate width =", width)
+            console.log("DISPLAY DEBUG: delegate height=", height)
         }
 
-        if (i >= lines.length) break
+        Column {
+            id: columnContent
+            //anchors.fill: parent
+            anchors.margins: 8
+            spacing: 4
 
-        var time = lines[i++] || ""
-        var urgency = lines[i++] || "normal"
-        var body = bodyLines.join("\n")
+            Text {
+                text: time + " | " + app
+                color: "black"
+                width: ListView.view.width - 16 
+                Component.onCompleted: {
+                    console.log("DISPLAY DEBUG: time/app text created:", text)
+                }
+            }
 
-        console.log("DEBUG: Parsed notification:", app, title, body, time, urgency)
+            Text {
+                text: title
+                color: "black"
+                font.bold: true
+                wrapMode: Text.Wrap
+                width: ListView.view.width - 16 
+                Component.onCompleted: {
+                    console.log("DISPLAY DEBUG: title text created:", text)
+                }
+            }
 
-      }*/
-    }
-        Component.onCompleted: {
-        console.log("DEBUG: NotificationCenterView component loaded")
-        reload()
+            Text {
+                text: body
+                color: "black"
+                wrapMode: Text.Wrap
+                width: ListView.view.width - 16 
+                Component.onCompleted: {
+                    console.log("DISPLAY DEBUG: body text created:", text)
+                }
+            }
+          }
+      height: 100 + columnContent.implicitHeight // necessary gives the height for the delegate
     }
+  }
 }

other/quickshell/theme/Colors.qml

@@ -78,4 +78,5 @@ QtObject {
     readonly property color notifsOverlayColor1: transparent //                                                 original color: "transparent"
     readonly property color screenshotOverlayColor1: "#44000000" //                                             original color: "#44000000"
     readonly property color screenshotOverlayColor2: woodBrown //                                               original color: "#824524"
-}
+    readonly property color notificationCenterColor1: "black"
+  }