From 54b2673f9a3f32c0043102d4666a17b2ae274060 Mon Sep 17 00:00:00 2001
From: Ly-sec <itslysec@gmail.com>
Date: Tue, 12 Aug 2025 12:47:20 +0200
Subject: [PATCH] Make avatar images rounded

---
 Modules/Settings/Tabs/General.qml | 15 +++++----------
 Modules/SidePanel/ProfileCard.qml | 27 +++++----------------------
 Widgets/NImageRounded.qml         | 15 ++++++++++++++-
 3 files changed, 24 insertions(+), 33 deletions(-)

diff --git a/Modules/Settings/Tabs/General.qml b/Modules/Settings/Tabs/General.qml
index 5a014b7..36484aa 100644
--- a/Modules/Settings/Tabs/General.qml
+++ b/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
-        color: Colors.accentPrimary
-        border.color: Colors.outline
-        border.width: Math.max(1, Style.borderThin * scaling)
-
-        NImageRounded {
-          imagePath: Settings.data.general.avatarImage
-          fallbackIcon: "person"
-        }
+        imagePath: Settings.data.general.avatarImage
+        fallbackIcon: "person"
+        borderColor: Colors.accentPrimary
+        borderWidth: Math.max(1, Style.borderMedium * scaling)
       }
       ColumnLayout {
         Layout.fillWidth: true
diff --git a/Modules/SidePanel/ProfileCard.qml b/Modules/SidePanel/ProfileCard.qml
index b715b7d..242a5a7 100644
--- a/Modules/SidePanel/ProfileCard.qml
+++ b/Modules/SidePanel/ProfileCard.qml
@@ -25,30 +25,13 @@ NBox {
     anchors.margins: Style.marginMedium * scaling
     spacing: Style.marginMedium * scaling
 
-    Item {
-      id: avatarBox
+    NImageRounded {
       width: Style.baseWidgetSize * 1.25 * scaling
       height: Style.baseWidgetSize * 1.25 * scaling
-
-      Image {
-        id: avatarImage
-        anchors.fill: parent
-        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
-        }
-      }
+      imagePath: Settings.data.general.avatarImage
+      fallbackIcon: "person"
+      borderColor: Colors.accentPrimary
+      borderWidth: Math.max(1, Style.borderMedium * scaling)
     }
 
     ColumnLayout {
diff --git a/Widgets/NImageRounded.qml b/Widgets/NImageRounded.qml
index 9133d3d..abef690 100644
--- a/Widgets/NImageRounded.qml
+++ b/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