From 81382b213cd494a19a6d65436acb1648f4cf2762 Mon Sep 17 00:00:00 2001
From: quadbyte <studio@quadbyte.net>
Date: Mon, 11 Aug 2025 23:48:09 -0400
Subject: [PATCH] Attempt to round image with mask

---
 Modules/Settings/SettingsWindow.qml |  2 +-
 Modules/Settings/Tabs/General.qml   | 19 +++++-----
 Services/Style.qml                  |  1 +
 Widgets/NImageRounded.qml           | 55 +++++++++++++++++++++++++++++
 4 files changed, 65 insertions(+), 12 deletions(-)
 create mode 100644 Widgets/NImageRounded.qml

diff --git a/Modules/Settings/SettingsWindow.qml b/Modules/Settings/SettingsWindow.qml
index 480eba9..2a2b01d 100644
--- a/Modules/Settings/SettingsWindow.qml
+++ b/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 {
diff --git a/Modules/Settings/Tabs/General.qml b/Modules/Settings/Tabs/General.qml
index 3d24a71..5a014b7 100644
--- a/Modules/Settings/Tabs/General.qml
+++ b/Modules/Settings/Tabs/General.qml
@@ -36,21 +36,18 @@ Item {
 
       // Avatar preview
       Rectangle {
-        width: 40 * scaling
-        height: 40 * scaling
-        radius: 20 * scaling
-        color: Colors.surfaceVariant
+        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)
-        Image {
-          anchors.fill: parent
-          anchors.margins: 2 * scaling
-          source: Settings.data.general.avatarImage
-          fillMode: Image.PreserveAspectCrop
-          asynchronous: true
+
+        NImageRounded {
+          imagePath: Settings.data.general.avatarImage
+          fallbackIcon: "person"
         }
       }
-
       ColumnLayout {
         Layout.fillWidth: true
         spacing: 2 * scaling
diff --git a/Services/Style.qml b/Services/Style.qml
index 85d07f4..7a3f6fc 100644
--- a/Services/Style.qml
+++ b/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
diff --git a/Widgets/NImageRounded.qml b/Widgets/NImageRounded.qml
new file mode 100644
index 0000000..9133d3d
--- /dev/null
+++ b/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
+  }
+}