Make avatar images rounded

Modules/Settings/Tabs/General.qml

@@ -35,18 +35,13 @@ Item {
       spacing: Style.marginMedium * scaling
 
       // Avatar preview
-      Rectangle {
+      NImageRounded {
         width: 64 * scaling
         height: 64 * scaling
-        radius: width * 0.5
+        imagePath: Settings.data.general.avatarImage
-        color: Colors.accentPrimary
+        fallbackIcon: "person"
-        border.color: Colors.outline
+        borderColor: Colors.accentPrimary
-        border.width: Math.max(1, Style.borderThin * scaling)
+        borderWidth: Math.max(1, Style.borderMedium * scaling)
-
-        NImageRounded {
-          imagePath: Settings.data.general.avatarImage
-          fallbackIcon: "person"
-        }
       }
       ColumnLayout {
         Layout.fillWidth: true

Modules/SidePanel/ProfileCard.qml

@@ -25,30 +25,13 @@ NBox {
     anchors.margins: Style.marginMedium * scaling
     spacing: Style.marginMedium * scaling
 
-    Item {
+    NImageRounded {
-      id: avatarBox
       width: Style.baseWidgetSize * 1.25 * scaling
       height: Style.baseWidgetSize * 1.25 * scaling
-
+      imagePath: Settings.data.general.avatarImage
-      Image {
+      fallbackIcon: "person"
-        id: avatarImage
+      borderColor: Colors.accentPrimary
-        anchors.fill: parent
+      borderWidth: Math.max(1, Style.borderMedium * scaling)
-        source: Settings.data.general.avatarImage
-        fillMode: Image.PreserveAspectCrop
-        asynchronous: true
-      }
-
-      // Ensure rounded corners consistently across renderers
-      MultiEffect {
-        anchors.fill: avatarImage
-        source: avatarImage
-        maskEnabled: true
-        maskSource: Rectangle {
-          anchors.fill: parent
-          color: "white"
-          radius: Style.radiusMedium * scaling
-        }
-      }
     }
 
     ColumnLayout {

Widgets/NImageRounded.qml

@@ -5,14 +5,27 @@ import Quickshell.Widgets
 import qs.Services
 
 Rectangle {
+  color: "transparent"
+  radius: width * 0.5
 
   readonly property real scaling: Scaling.scale(screen)
   property string imagePath: ""
   property string fallbackIcon: ""
+  property color borderColor: "transparent"
+  property real borderWidth: 0
 
-  anchors.fill: parent
   anchors.margins: Style.marginTiniest * scaling
 
+  // Border
+  Rectangle {
+    anchors.fill: parent
+    radius: parent.radius
+    color: "transparent"
+    border.color: parent.borderColor
+    border.width: parent.borderWidth
+    z: 10
+  }
+
   Image {
     id: img
     anchors.fill: parent