1 files changed, 72 insertions, 0 deletions
diff --git a/modules/notifications/AppIconBadge.qml b/modules/notifications/AppIconBadge.qml
new file mode 100644
index 0000000..8bbae89
--- /dev/null
+++ b/modules/notifications/AppIconBadge.qml
@@ -0,0 +1,72 @@
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import qs.utils
+import Quickshell
+import Quickshell.Services.Notifications
+import QtQuick
+
+StyledRect {
+    id: root
+
+    required property Notifs.Notif modelData
+    required property bool hasImage
+    required property bool hasAppIcon
+    required property bool isCritical
+    required property bool isLow
+
+    radius: Appearance.rounding.full
+    color: {
+        if (root.isCritical) return Colours.palette.m3error;
+        if (root.isLow) return Colours.layer(Colours.palette.m3surfaceContainerHighest, 2);
+        return Colours.palette.m3secondaryContainer;
+    }
+    implicitWidth: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
+    implicitHeight: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
+
+    Loader {
+        id: icon
+
+        active: root.hasAppIcon
+        asynchronous: false
+        visible: active
+
+        anchors.centerIn: parent
+
+        width: Math.round(parent.width * 0.6)
+        height: Math.round(parent.width * 0.6)
+
+        sourceComponent: ColouredIcon {
+            anchors.fill: parent
+            source: Quickshell.iconPath(root.modelData.appIcon)
+            colour: {
+                if (root.isCritical) return Colours.palette.m3onError;
+                if (root.isLow) return Colours.palette.m3onSurface;
+                return Colours.palette.m3onSecondaryContainer;
+            }
+            layer.enabled: root.modelData.appIcon.endsWith("symbolic")
+        }
+    }
+
+    Loader {
+        active: !root.hasAppIcon
+        asynchronous: false
+        visible: active
+        anchors.centerIn: parent
+        anchors.horizontalCenterOffset: -Appearance.font.size.large * 0.02
+        anchors.verticalCenterOffset: Appearance.font.size.large * 0.02
+
+        sourceComponent: MaterialIcon {
+            text: Icons.getNotifIcon(root.modelData.summary, root.modelData.urgency)
+
+            color: {
+                if (root.isCritical) return Colours.palette.m3onError;
+                if (root.isLow) return Colours.palette.m3onSurface;
+                return Colours.palette.m3onSecondaryContainer;
+            }
+            font.pointSize: Appearance.font.size.large
+        }
+    }
+}
+