fix and style notifications

Colors.qml

@@ -3,24 +3,24 @@ import QtQuick
 
 QtObject {
     // --- The Backgrounds (Darkest to Lightest) ---
-    readonly property color base00: "#1e1e2e" // Default Background
+    readonly property color base00: "#1d2021" // Default Background
-    readonly property color base01: "#181825" // Lighter Background (Status bars, panels)
+    readonly property color base01: "#3c3836" // Lighter Background (Status bars, panels)
-    readonly property color base02: "#313244" // Selection Background
+    readonly property color base02: "#504945" // Selection Background
-    readonly property color base03: "#45475a" // Comments, Invisibles, line highlighting
+    readonly property color base03: "#665c54" // Comments, Invisibles, line highlighting
 
     // --- The Foregrounds (Darkest to Lightest) ---
-    readonly property color base04: "#585b70" // Dark Foreground (Used for status bars)
+    readonly property color base04: "#bdae93" // Dark Foreground (Used for status bars)
-    readonly property color base05: "#cdd6f4" // Default Foreground, Caret
+    readonly property color base05: "#d5c4a1" // Default Foreground, Caret
-    readonly property color base06: "#f5e0dc" // Light Foreground (Rarely used)
+    readonly property color base06: "#ebdbb2" // Light Foreground (Rarely used)
-    readonly property color base07: "#b4befe" // Lightest Foreground
+    readonly property color base07: "#fbf1c7" // Lightest Foreground
 
     // --- The Accent Colors ---
-    readonly property color base08: "#f38ba8" // Red (Variables, errors)
+    readonly property color base08: "#fb4934" // Red (Variables, errors)
-    readonly property color base09: "#fab387" // Orange (Integers, booleans, constants)
+    readonly property color base09: "#fe8019" // Orange (Integers, booleans, constants)
-    readonly property color base0A: "#f9e2af" // Yellow (Classes, search text bg, warnings)
+    readonly property color base0A: "#fabd2f" // Yellow (Classes, search text bg, warnings)
-    readonly property color base0B: "#a6e3a1" // Green (Strings, success states)
+    readonly property color base0B: "#b8bb26" // Green (Strings, success states)
-    readonly property color base0C: "#94e2d5" // Cyan (Support, regex, escape chars)
+    readonly property color base0C: "#8ec07c" // Cyan (Support, regex, escape chars)
-    readonly property color base0D: "#89b4fa" // Blue (Functions, methods, headings)
+    readonly property color base0D: "#83a598" // Blue (Functions, methods, headings)
-    readonly property color base0E: "#cba6f7" // Purple/Mauve (Keywords, storage, selectors)
+    readonly property color base0E: "#d3869b" // Purple/Mauve (Keywords, storage, selectors)
-    readonly property color base0F: "#f2cdcd" // Brown/Flamingo (Deprecated, embedded tags)
+    readonly property color base0F: "#d65d0e" // Brown/Flamingo (Deprecated, embedded tags)
 }

modules/notifications/NotiCard.qml

@@ -9,34 +9,65 @@ import qs.widgets
 WrapperRectangle {
     id: root
     required property var notification
-    implicitWidth: 300
+    required property ShellScreen nScreen
-    implicitHeight: 100
+    implicitWidth: nScreen.width / 6
+    implicitHeight: 80
     radius: Config.rounding
     anchors.right: parent?.right
     color: Colors.base01
+    clip: true
     child: WrapperMouseArea {
-        RowLayout {
+        id: mouseHandler
-            anchors.fill: parent
+        child: RowLayout {
+            spacing: 10
             IconImage {
                 id: appIcon
-                Layout.leftMargin: 16
+                Layout.leftMargin: 8
-                source: root.notification.image ? root.notification.image : ''
+                visible: root.notification?.image ? true : false
-                implicitSize: 48
+                source: root.notification?.image ? root.notification.image : ''
+                implicitSize: 64
             }
             ColumnLayout {
                 Layout.alignment: Qt.AlignLeft
+                Layout.fillWidth: true
+                Layout.preferredWidth: 0
+                Layout.fillHeight: true
+                Layout.leftMargin: appIcon.visible ? 0 : 16
+                RowLayout {
+                    MaterialIcon {
+                        text: "\ue7f4"
+                        font.pixelSize: 12
+                    }
+                    StyledText {
+                        id: appId
+                        text: root.notification?.appName ? root.notification.appName : ''
+                        opacity: 0.4
+                    }
+                }
                 StyledText {
                     id: title
                     text: root.notification?.summary == null ? '' : root.notification.summary
+                    elide: Text.ElideRight
+                    Layout.fillWidth: true
                 }
                 StyledText {
                     id: body
-                    text: root.notification.body ? root.notification.body : ''
+                    text: root.notification?.body ? root.notification.body : ''
+                    elide: Text.ElideRight
+                    Layout.fillWidth: true
+                    opacity: 0.6
                 }
             }
         }
         acceptedButtons: Qt.LeftButton
         cursorShape: Qt.PointingHandCursor
+        hoverEnabled: true
+        onEntered: {
+            root.color = Colors.base03;
+        }
+        onExited: {
+            root.color = Colors.base01;
+        }
         onClicked: {
             root.notification.dismiss();
         }

modules/notifications/NotiPopup.qml

@@ -29,7 +29,7 @@ WlrLayershell {
     margins.top: Config.barHeight + 8
     margins.right: 8
     implicitHeight: notiList.contentHeight
-    implicitWidth: activeScreen.width / 8
+    implicitWidth: activeScreen.width / 6
     color: 'transparent'
     visible: NotiServer.notifications.values.length > 0
 
@@ -40,6 +40,7 @@ WlrLayershell {
         spacing: 6
         delegate: NotiCard {
             required property var modelData
+            nScreen: notiPopup.activeScreen
             notification: modelData
         }
     }

settings/settings.ini

@@ -3,4 +3,4 @@ barHeight=30
 font=Maple Mono
 fontSize=12
 roudning=16
-wallpaper=@Variant(\0\0\0\x11\0\0\0!file:///home/lucy/.wall/mooon.png)
+wallpaper=@Variant(\0\0\0\x11\0\0\0 file:///home/lucy/.wall/Kita.png)

widgets/MaterialIcon.qml

@@ -12,6 +12,6 @@ Text {
         "FILL": fill ? 1 : 0,
         "opsz": Config.iconSize,
         "wght": 400,
-        "GRAD": 0
+        "GRAD": 24
     }
 }