settings: complete re-organize and breakout

2025-12-07 14:05:38 -05:00 · 2025-07-22 19:51:16 -04:00
parent 3157622c8b
commit 5cf04aa941
16 changed files with 1217 additions and 1224 deletions
--- a/Modules/Settings/ProfileTab.qml
+++ b/Modules/Settings/ProfileTab.qml
@@ -0,0 +1,167 @@
+import QtQuick
+import QtQuick.Effects
+import qs.Common
+import qs.Widgets
+
+Column {
+    width: parent.width
+    spacing: Theme.spacingM
+
+    // Profile Image Preview and Input
+    Column {
+        width: parent.width
+        spacing: Theme.spacingM
+
+        Text {
+            text: "Profile Image"
+            font.pixelSize: Theme.fontSizeMedium
+            color: Theme.surfaceText
+            font.weight: Font.Medium
+        }
+
+        // Profile Image Preview with circular crop
+        Row {
+            width: parent.width
+            spacing: Theme.spacingM
+
+            // Circular profile image preview
+            Item {
+                id: avatarContainer
+
+                property bool hasImage: avatarImageSource.status === Image.Ready
+
+                width: 54
+                height: 54
+
+                // This rectangle provides the themed ring via its border.
+                Rectangle {
+                    anchors.fill: parent
+                    radius: width / 2
+                    color: "transparent"
+                    border.color: Theme.primary
+                    border.width: 1 // The ring is 1px thick.
+                    visible: parent.hasImage
+                }
+
+                // Hidden Image loader. Its only purpose is to load the texture.
+                Image {
+                    id: avatarImageSource
+
+                    source: {
+                        if (profileImageInput.text === "")
+                            return "";
+
+                        if (profileImageInput.text.startsWith("/"))
+                            return "file://" + profileImageInput.text;
+
+                        return profileImageInput.text;
+                    }
+                    smooth: true
+                    asynchronous: true
+                    mipmap: true
+                    cache: true
+                    visible: false // This item is never shown directly.
+                }
+
+                MultiEffect {
+                    anchors.fill: parent
+                    anchors.margins: 5
+                    source: avatarImageSource
+                    maskEnabled: true
+                    maskSource: settingsCircularMask
+                    visible: avatarContainer.hasImage
+                    maskThresholdMin: 0.5
+                    maskSpreadAtMin: 1
+                }
+
+                Item {
+                    id: settingsCircularMask
+
+                    width: 54 - 10
+                    height: 54 - 10
+                    layer.enabled: true
+                    layer.smooth: true
+                    visible: false
+
+                    Rectangle {
+                        anchors.fill: parent
+                        radius: width / 2
+                        color: "black"
+                        antialiasing: true
+                    }
+
+                }
+
+                // Fallback for when there is no image.
+                Rectangle {
+                    anchors.fill: parent
+                    radius: width / 2
+                    color: Theme.primary
+                    visible: !parent.hasImage
+
+                    DankIcon {
+                        anchors.centerIn: parent
+                        name: "person"
+                        size: Theme.iconSize + 8
+                        color: Theme.primaryText
+                    }
+
+                }
+
+                // Error icon for when the image fails to load.
+                DankIcon {
+                    anchors.centerIn: parent
+                    name: "warning"
+                    size: Theme.iconSize + 8
+                    color: Theme.primaryText
+                    visible: profileImageInput.text !== "" && avatarImageSource.status === Image.Error
+                }
+
+            }
+
+            // Input field
+            Column {
+                width: parent.width - 80 - Theme.spacingM
+                spacing: Theme.spacingS
+
+                Rectangle {
+                    width: parent.width
+                    height: 48
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceVariant
+                    border.color: profileImageInput.activeFocus ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
+                    border.width: profileImageInput.activeFocus ? 2 : 1
+
+                    DankTextField {
+                        id: profileImageInput
+
+                        anchors.fill: parent
+                        textColor: Theme.surfaceText
+                        font.pixelSize: Theme.fontSizeMedium
+                        text: Prefs.profileImage
+                        placeholderText: "Enter image path or URL..."
+                        backgroundColor: "transparent"
+                        normalBorderColor: "transparent"
+                        focusedBorderColor: "transparent"
+                        onEditingFinished: {
+                            Prefs.setProfileImage(text);
+                        }
+
+                    }
+
+                }
+
+                Text {
+                    text: "Local filesystem path or URL to an image file."
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceVariantText
+                    wrapMode: Text.WordWrap
+                    width: parent.width
+                }
+
+            }
+
+        }
+
+    }
+}