Attempt to round image with mask

Modules/Settings/SettingsWindow.qml

@@ -176,7 +176,7 @@ NLoader {
                   text: settingsPanel.tabsModel[settingsPanel.currentTabIndex].label
                   font.pointSize: Style.fontSizeLarge * scaling
                   font.weight: Style.fontWeightBold
-                  color: Colors.accentPrimary
+                  color: Colors.textPrimary
                   Layout.fillWidth: true
                 }
                 NIconButton {

Modules/Settings/Tabs/General.qml

@@ -36,21 +36,18 @@ Item {
 
       // Avatar preview
       Rectangle {
-        width: 40 * scaling
+        width: 64 * scaling
-        height: 40 * scaling
+        height: 64 * scaling
-        radius: 20 * scaling
+        radius: width * 0.5
-        color: Colors.surfaceVariant
+        color: Colors.accentPrimary
         border.color: Colors.outline
         border.width: Math.max(1, Style.borderThin * scaling)
-        Image {
+
-          anchors.fill: parent
+        NImageRounded {
-          anchors.margins: 2 * scaling
+          imagePath: Settings.data.general.avatarImage
-          source: Settings.data.general.avatarImage
+          fallbackIcon: "person"
-          fillMode: Image.PreserveAspectCrop
-          asynchronous: true
         }
       }
-
       ColumnLayout {
         Layout.fillWidth: true
         spacing: 2 * scaling

Services/Style.qml

@@ -53,6 +53,7 @@ Singleton {
   property int pillDelay: 500
 
   // Margins (for margins and spacing)
+  property int marginTiniest: 2
   property int marginTiny: 4
   property int marginSmall: 8
   property int marginMedium: 12

Widgets/NImageRounded.qml

@@ -0,0 +1,55 @@
+import QtQuick
+import QtQuick.Effects
+import Quickshell
+import Quickshell.Widgets
+import qs.Services
+
+Rectangle {
+
+  readonly property real scaling: Scaling.scale(screen)
+  property string imagePath: ""
+  property string fallbackIcon: ""
+
+  anchors.fill: parent
+  anchors.margins: Style.marginTiniest * scaling
+
+  Image {
+    id: img
+    anchors.fill: parent
+    source: imagePath
+    visible: false
+    mipmap: true
+    smooth: true
+    asynchronous: true
+    fillMode: Image.PreserveAspectCrop
+  }
+
+  MultiEffect {
+    anchors.fill: parent
+    source: img
+    maskEnabled: true
+    maskSource: mask
+    visible: imagePath !== ""
+  }
+
+  Item {
+    id: mask
+    anchors.fill: parent
+    layer.enabled: true
+    visible: false
+    Rectangle {
+      anchors.fill: parent
+      radius: img.width * 0.5
+    }
+  }
+
+  // Fallback icon
+  NText {
+    anchors.centerIn: parent
+    text: fallbackIcon
+    font.family: "Material Symbols Outlined"
+    font.pointSize: Style.fontSizeXL * scaling
+    visible: fallbackIcon !== undefined && fallbackIcon !== "" && (source === undefined || source === "")
+    z: 0
+  }
+}