Finalized the Notification Center backend

hosts/laptop/home.nix

@@ -21,7 +21,7 @@
     ../../modules/home-manager/neovim.nix # dont use nixvim. broken
     #../../modules/home-manager/neovim2.nix # ./neovim2.nix uses vim plug instead of the nix repository as with ./neovim.nix see the begining of neovim2 for an explanation
     ../../modules/home-manager/rclone.nix
-    ../../modules/home-manager/waybar.nix
+    #../../modules/home-manager/waybar.nix
     ../../modules/home-manager/quickshell.nix # used for widgets, waybar and notifications
 #../../modules/home-manager/oh-my-posh.nix # zsh customizer
     ../../modules/home-manager/oh-my-zsh.nix # another zsh customizer

modules/home-manager/hyprland.nix

@@ -129,7 +129,7 @@ in {
       "$mod, F, exec, $browser"
       "$mod+Shift, A, exec, rofi -show drun"
       "$mod, Q, exec, custom-dontkillsteam"
-      "Ctrl+Alt, W, exec, pkill waybar || waybar"
+      #"Ctrl+Alt, W, exec, pkill waybar || waybar"
       "$mod, L, exec, swaylock -eFLK -i ${wallpaper}"
       #"$mod, F11, exec, hyprshot -m  window"
       #", F11, exec, hyprshot -m output"
@@ -145,6 +145,7 @@ in {
       "Ctrl+$mod, 4, exec, sleep 1 && kitty -o font_size=5 -e btm --theme gruvbox --disable-click --disable_advanced_kill --enable_cache_memory -g -R -T "
       "Ctrl+$mod, 4, exec, sleep 1 && kitty -o font_size=1 -e sh -c 'cmatrix -br'"
       #"Ctrl+Alt, 1, exec, swaync-client -t" # pos 4 1 notification center
+      "Ctrl+Alt, 1, exec, qs ipc call notifications toggle"
       "Ctrl+$mod, 3, exec, pavucontrol" # pos 1 2 audiocontrol
       "Ctrl+$mod, 5, exec, gnome-characters" # pos 2 2 special chars
       "Ctrl+Alt, 8, exec, hyprpicker | tee >(wl-copy) | cliphist store" # pos 3 2 colorpicker
@@ -200,7 +201,7 @@ in {
       "swww-daemon"
       "sleep 1 && custom-wallpaper"
       "custom-mountkdrive"
-      "waybar"
+      #"waybar"
       "custom-gitnotify"
       "QS-notifycache" # builds the cache that will be used for the notification history
 

other/quickshell/notifs/NotificationCenter.qml

@@ -5,6 +5,7 @@ import QtQuick
 import Quickshell
 import Quickshell.Io
 import "." as Notifs
+import "../theme" as Theme
 
 Singleton {
     id: root
@@ -16,14 +17,14 @@ Singleton {
         implicitHeight: notificationCenter.height
         anchors.right: notificationCenter.right
         anchors.top: notificationCenter.top
+        color: Theme.Colors.notificationCenterColor1 // needs to be set. Do not delete
 
         Notifs.NotificationCenterView {
             id: notificationCenter
             anchors.right: parent.right
             anchors.top: parent.top
             anchors.bottom: parent.bottom
-            //width: 500
+            color: Theme.Colors.notificationCenterColor2
-            //anchors.verticalCenter: parent.verticalCenter
           }
     }
 
@@ -36,4 +37,8 @@ Singleton {
                 notificationCenter.reload()
         }
       }
+
+    function init() {
+    // empty function to define first reference to singleton. Do not delete. It will break.
+    }
 }

other/quickshell/notifs/NotificationCenterView.qml

@@ -12,7 +12,7 @@ Rectangle {
     anchors.top: parent.top
     anchors.bottom: parent.bottom
     color: Theme.Colors.notificationCenterColor1
-    visible: false
+    visible: true
 
     ListModel {
         id: notificationsModel
@@ -30,7 +30,14 @@ Rectangle {
         blockLoading: true
     }
 
+    Process {
+        id: clearProcess
+        command: ["QS-notifycache"]
+        onExited: reload()
+    }
+
     function reload() {
+        historyFile.reload()
         notificationsModel.clear()
 
         var text = historyFile.text()
@@ -57,7 +64,8 @@ Rectangle {
             var urgency = lines[i++] || "normal"
             var body = bodyLines.join("\n")
 
-            notificationsModel.append({
+            // insert at beginning to invert order
+            notificationsModel.insert(0, {
                 app: app,
                 title: title,
                 body: body,
@@ -68,76 +76,65 @@ Rectangle {
     }
 
     Component.onCompleted: reload()
+
+    ColumnLayout {
+        anchors.fill: parent
+        spacing: 8
+
+        Button {
+            text: "Clear"
+            Layout.fillWidth: true
+            onClicked: {
+                clearProcess.running = true
+            }
+        }
+
         ListView {
             id: listView
-    anchors.fill: parent
+            Layout.fillWidth: true
+            Layout.fillHeight: true
             model: notificationsModel
             spacing: 10
             clip: true
 
-    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)
-    }
-
-    onCountChanged: {
-        console.log("DISPLAY DEBUG: ListView count changed ->", count)
-    }
-
             delegate: Rectangle {
-        width: ListView.view.width
+                width: ListView.width
-        color: "transparent"
+                color: Theme.Colors.notificationCenterColor1
-        border.color: "transparent"
+                border.color: Theme.Colors.notificationCenterColor3
                 border.width: 1
                 radius: 4
-
+                visible: true
-        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)
-        }
 
                 Column {
                     id: columnContent
-            //anchors.fill: parent
+                    anchors.fill: parent
                     anchors.margins: 8
                     spacing: 4
 
                     Text {
-                text: time + " | " + app
+                        text: time
-                color: "black"
+                        color: Theme.Colors.notificationCenterColor4
-                width: ListView.view.width - 16 
+                        width: ListView.width - 16
-                Component.onCompleted: {
-                    console.log("DISPLAY DEBUG: time/app text created:", text)
-                }
                     }
 
                     Text {
                         text: title
-                color: "black"
+                        color: Theme.Colors.notificationCenterColor4
                         font.bold: true
                         wrapMode: Text.Wrap
-                width: ListView.view.width - 16 
+                        width: ListView.width - 16
-                Component.onCompleted: {
-                    console.log("DISPLAY DEBUG: title text created:", text)
-                }
                     }
 
                     Text {
                         text: body
-                color: "black"
+                        color: Theme.Colors.notificationCenterColor4
                         wrapMode: Text.Wrap
-                width: ListView.view.width - 16 
+                        width: ListView.width - 16
-                Component.onCompleted: {
-                    console.log("DISPLAY DEBUG: body text created:", text)
                     }
                 }
+
+                height: 100 + columnContent.implicitHeight
             }
-      height: 100 + columnContent.implicitHeight // necessary gives the height for the delegate
         }
     }
 }

other/quickshell/theme/Colors.qml

@@ -78,5 +78,8 @@ 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"
+    readonly property color notificationCenterColor1: transparent // multiple things need to be set to transparent
+    readonly property color notificationCenterColor2: "#A79770" // main bg color
+    readonly property color notificationCenterColor3: "#A85D15" // notification border color (does not work)
+    readonly property color notificationCenterColor4: black // text
   }