feat(Greeter): Enhance login experience & manual username fallback support

2026-08-06 21:48:30 -04:00 · 2026-05-27 22:31:54 -04:00
parent 44867e7b43
commit af097d0f33
2 changed files with 172 additions and 96 deletions
@@ -8,10 +8,23 @@ Item {
    id: root

    property bool expanded: false
+    property int maxExpandedHeight: 400

    signal userSelected(string username)
    signal toggleRequested()

+    readonly property int rowHeight: 52
+    readonly property int collapsedBarHeight: 36
+    readonly property int expandedListHeight: {
+        if (!expanded)
+            return 0;
+        const count = GreeterUsersService.users.length;
+        if (count === 0)
+            return 0;
+        const fullHeight = count * rowHeight + Math.max(0, count - 1) * Theme.spacingXS;
+        return Math.min(maxExpandedHeight, fullHeight);
+    }
+
    function encodeFileUrl(path) {
        if (!path)
            return "";
@@ -25,116 +38,117 @@ Item {
        return "";
    }

-    implicitHeight: column.implicitHeight
+    implicitHeight: expanded ? expandedListHeight : collapsedBarHeight
    implicitWidth: parent ? parent.width : 320

-    ColumnLayout {
-        id: column
+    RowLayout {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.verticalCenter: expanded ? undefined : parent.verticalCenter
+        height: collapsedBarHeight
+        visible: !expanded && !!GreeterState.username
+        spacing: Theme.spacingM
+
+        StyledText {
+            Layout.fillWidth: true
+            text: GreeterUsersService.optionLabel(GreeterState.username)
+            color: Theme.surfaceText
+            font.pixelSize: Theme.fontSizeMedium
+            elide: Text.ElideRight
+        }
+
+        DankIcon {
+            name: "expand_more"
+            size: 20
+            color: Theme.surfaceVariantText
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: root.toggleRequested()
+        }
+    }
+
+    Item {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: collapsedBarHeight
+        visible: !expanded && !GreeterState.username
+
+        DankIcon {
+            anchors.centerIn: parent
+            name: "expand_more"
+            size: 20
+            color: Theme.surfaceVariantText
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: root.toggleRequested()
+        }
+    }
+
+    DankListView {
+        id: userListView

        anchors.left: parent.left
        anchors.right: parent.right
-        spacing: Theme.spacingS
+        anchors.top: parent.top
+        height: expandedListHeight
+        visible: expanded
+        clip: true
+        interactive: contentHeight > height
+        spacing: Theme.spacingXS
+        model: GreeterUsersService.users

-        RowLayout {
-            Layout.fillWidth: true
-            spacing: Theme.spacingM
-            visible: !root.expanded && !!GreeterState.username
+        delegate: Rectangle {
+            id: userRow

-            StyledText {
-                Layout.fillWidth: true
-                text: GreeterUsersService.optionLabel(GreeterState.username)
-                color: Theme.surfaceText
-                font.pixelSize: Theme.fontSizeMedium
-                elide: Text.ElideRight
-            }
+            required property var modelData
+            required property int index

-            DankIcon {
-                name: "expand_more"
-                size: 20
-                color: Theme.surfaceVariantText
-            }
+            width: userListView.width
+            height: root.rowHeight
+            radius: Theme.cornerRadius
+            color: userRowMouse.containsMouse ? Theme.surfacePressed : "transparent"
+            border.color: GreeterState.username === userRow.modelData.username ? Theme.primary : "transparent"
+            border.width: GreeterState.username === userRow.modelData.username ? 1 : 0

-            MouseArea {
+            RowLayout {
                anchors.fill: parent
-                cursorShape: Qt.PointingHandCursor
-                onClicked: root.toggleRequested()
-            }
-        }
+                anchors.leftMargin: Theme.spacingS
+                anchors.rightMargin: Theme.spacingS
+                spacing: Theme.spacingM

-        Item {
-            Layout.fillWidth: true
-            Layout.preferredHeight: 36
-            visible: !root.expanded && !GreeterState.username
+                Item {
+                    Layout.preferredWidth: 36
+                    Layout.preferredHeight: 36

-            DankIcon {
-                anchors.centerIn: parent
-                name: "expand_more"
-                size: 20
-                color: Theme.surfaceVariantText
-            }
-
-            MouseArea {
-                anchors.fill: parent
-                cursorShape: Qt.PointingHandCursor
-                onClicked: root.toggleRequested()
-            }
-        }
-
-        ColumnLayout {
-            Layout.fillWidth: true
-            spacing: Theme.spacingXS
-            visible: root.expanded
-
-            Repeater {
-                model: GreeterUsersService.users
-
-                delegate: Rectangle {
-                    id: userRow
-
-                    required property var modelData
-
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: 52
-                    radius: Theme.cornerRadius
-                    color: userRowMouse.containsMouse ? Theme.surfacePressed : "transparent"
-                    border.color: GreeterState.username === userRow.modelData.username ? Theme.primary : "transparent"
-                    border.width: GreeterState.username === userRow.modelData.username ? 1 : 0
-
-                    RowLayout {
+                    DankCircularImage {
                        anchors.fill: parent
-                        anchors.leftMargin: Theme.spacingS
-                        anchors.rightMargin: Theme.spacingS
-                        spacing: Theme.spacingM
-
-                        Item {
-                            Layout.preferredWidth: 36
-                            Layout.preferredHeight: 36
-
-                            DankCircularImage {
-                                anchors.fill: parent
-                                imageSource: root.profileImageSource(userRow.modelData.username)
-                                fallbackIcon: "person"
-                            }
-                        }
-
-                        StyledText {
-                            Layout.fillWidth: true
-                            text: GreeterUsersService.optionLabel(userRow.modelData.username)
-                            color: Theme.surfaceText
-                            font.pixelSize: Theme.fontSizeMedium
-                            elide: Text.ElideRight
-                        }
-                    }
-
-                    MouseArea {
-                        id: userRowMouse
-
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: root.userSelected(userRow.modelData.username)
+                        imageSource: root.profileImageSource(userRow.modelData.username)
+                        fallbackIcon: "person"
                    }
                }
+
+                StyledText {
+                    Layout.fillWidth: true
+                    text: GreeterUsersService.optionLabel(userRow.modelData.username)
+                    color: Theme.surfaceText
+                    font.pixelSize: Theme.fontSizeMedium
+                    elide: Text.ElideRight
+                }
+            }
+
+            MouseArea {
+                id: userRowMouse
+
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: root.userSelected(userRow.modelData.username)
            }
        }
    }