greeter: redesign the switch-user/auto-login flow

- Fix visual glitches
- Make auto-login and switch user texts not always visible
- Make from-zero memory state not confusing

quickshell/Modules/Greetd/GreeterUserPicker.qml

@@ -7,22 +7,38 @@ import qs.Widgets
 Item {
     id: root
 
+    LayoutMirroring.enabled: I18n.isRtl
+    LayoutMirroring.childrenInherit: true
+
     property bool expanded: false
     property int maxExpandedHeight: 400
+    property bool autoLoginVisible: false
+    property bool autoLoginChecked: false
+    property bool manualEntryVisible: false
 
     signal userSelected(string username)
-    signal toggleRequested()
+    signal toggleRequested
+    signal autoLoginToggled
+    signal manualEntryRequested
 
     readonly property int rowHeight: 52
     readonly property int collapsedBarHeight: 36
-    readonly property int expandedListHeight: {
-        if (!expanded)
-            return 0;
+    readonly property int actionRowHeight: 44
+
+    readonly property int userListFullHeight: {
         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);
+        return count * rowHeight + Math.max(0, count - 1) * Theme.spacingXS;
+    }
+    readonly property int manualEntryBlockHeight: manualEntryVisible ? actionRowHeight + Theme.spacingXS : 0
+    readonly property int autoLoginBlockHeight: autoLoginVisible ? actionRowHeight + Theme.spacingXS : 0
+    readonly property int expandedContentHeight: {
+        if (!expanded)
+            return 0;
+        if (GreeterUsersService.users.length === 0 && !autoLoginVisible && !manualEntryVisible)
+            return 0;
+        return Math.min(maxExpandedHeight, userListFullHeight + manualEntryBlockHeight + autoLoginBlockHeight);
     }
 
     function encodeFileUrl(path) {
@@ -38,49 +54,34 @@ Item {
         return "";
     }
 
-    implicitHeight: expanded ? expandedListHeight : collapsedBarHeight
+    implicitHeight: expanded ? expandedContentHeight : collapsedBarHeight
     implicitWidth: parent ? parent.width : 320
 
-    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
+        anchors.verticalCenter: parent.verticalCenter
         height: collapsedBarHeight
-        visible: !expanded && !GreeterState.username
+        visible: !expanded
 
-        DankIcon {
-            anchors.centerIn: parent
-            name: "expand_more"
-            size: 20
-            color: Theme.surfaceVariantText
+        RowLayout {
+            anchors.fill: parent
+            spacing: Theme.spacingM
+
+            StyledText {
+                Layout.fillWidth: true
+                text: GreeterState.username ? GreeterUsersService.optionLabel(GreeterState.username) : I18n.tr("Select user...", "greeter user picker placeholder")
+                color: GreeterState.username ? Theme.surfaceText : Theme.surfaceVariantText
+                font.pixelSize: Theme.fontSizeMedium
+                elide: Text.ElideRight
+            }
+
+            DankIcon {
+                Layout.alignment: Qt.AlignVCenter
+                name: "expand_more"
+                size: 20
+                color: Theme.surfaceVariantText
+            }
         }
 
         MouseArea {
@@ -90,31 +91,80 @@ Item {
         }
     }
 
-    DankListView {
-        id: userListView
-
+    Column {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
-        height: expandedListHeight
+        height: root.expandedContentHeight
         visible: expanded
-        clip: true
-        interactive: contentHeight > height
         spacing: Theme.spacingXS
-        model: GreeterUsersService.users
 
-        delegate: Rectangle {
-            id: userRow
+        DankListView {
+            id: userListView
 
-            required property var modelData
-            required property int index
+            width: parent.width
+            height: parent.height - root.manualEntryBlockHeight - root.autoLoginBlockHeight
+            clip: true
+            interactive: contentHeight > height
+            spacing: Theme.spacingXS
+            model: GreeterUsersService.users
 
-            width: userListView.width
-            height: root.rowHeight
+            delegate: Rectangle {
+                id: userRow
+
+                required property var modelData
+                required property int index
+
+                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
+
+                RowLayout {
+                    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)
+                }
+            }
+        }
+
+        Rectangle {
+            width: parent.width
+            height: root.actionRowHeight
+            visible: root.manualEntryVisible
             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
+            color: manualEntryRowMouse.containsMouse ? Theme.surfacePressed : "transparent"
 
             RowLayout {
                 anchors.fill: parent
@@ -122,20 +172,16 @@ Item {
                 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"
-                    }
+                DankIcon {
+                    Layout.alignment: Qt.AlignVCenter
+                    name: "person_add"
+                    size: 20
+                    color: Theme.surfaceVariantText
                 }
 
                 StyledText {
                     Layout.fillWidth: true
-                    text: GreeterUsersService.optionLabel(userRow.modelData.username)
+                    text: I18n.tr("Not listed?", "greeter link to switch to manual username entry")
                     color: Theme.surfaceText
                     font.pixelSize: Theme.fontSizeMedium
                     elide: Text.ElideRight
@@ -143,12 +189,51 @@ Item {
             }
 
             MouseArea {
-                id: userRowMouse
+                id: manualEntryRowMouse
 
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onClicked: root.userSelected(userRow.modelData.username)
+                onClicked: root.manualEntryRequested()
+            }
+        }
+
+        Rectangle {
+            width: parent.width
+            height: root.actionRowHeight
+            visible: root.autoLoginVisible
+            radius: Theme.cornerRadius
+            color: autoLoginRowMouse.containsMouse ? Theme.surfacePressed : "transparent"
+
+            RowLayout {
+                anchors.fill: parent
+                anchors.leftMargin: Theme.spacingS
+                anchors.rightMargin: Theme.spacingS
+                spacing: Theme.spacingM
+
+                DankIcon {
+                    Layout.alignment: Qt.AlignVCenter
+                    name: root.autoLoginChecked ? "check_box" : "check_box_outline_blank"
+                    size: 20
+                    color: root.autoLoginChecked ? Theme.primary : Theme.surfaceVariantText
+                }
+
+                StyledText {
+                    Layout.fillWidth: true
+                    text: I18n.tr("Auto-login")
+                    color: Theme.surfaceText
+                    font.pixelSize: Theme.fontSizeMedium
+                    elide: Text.ElideRight
+                }
+            }
+
+            MouseArea {
+                id: autoLoginRowMouse
+
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: root.autoLoginToggled()
             }
         }
     }