From 14c58acea14496a0f4b0cbdfee67eb22a3d082a7 Mon Sep 17 00:00:00 2001
From: Joshua Goins <josh@redstrate.com>
Date: Sat, 16 Nov 2024 14:11:55 +0000
Subject: [PATCH] Improve the appearance of the welcome page user list

Before it only listed the user id, and nothing else. If you had multiple
accounts, it's a little difficult to tell them apart. Now the user
selection appears like how they are displayed elsewhere in NeoChat, with
the display name and avatar.

| Before | After |
| ------ | ------ |
|   ![Screenshot_20241115_221425](/uploads/3986e4c7bbb7dcdca67ee30bb529767e/Screenshot_20241115_221425.png){width=786 height=822}     |        ![Screenshot_20241115_221149](/uploads/57eb1a7e57ba5ae8c41dd922cbf39c62/Screenshot_20241115_221149.png){width=786 height=822} |
---
 src/login/WelcomePage.qml | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/login/WelcomePage.qml b/src/login/WelcomePage.qml
index 161924e77..06b918061 100644
--- a/src/login/WelcomePage.qml
+++ b/src/login/WelcomePage.qml
@@ -7,6 +7,7 @@ import QtQuick.Layouts
 
 import org.kde.kirigami as Kirigami
 import org.kde.kirigamiaddons.formcard as FormCard
+import org.kde.kirigamiaddons.labs.components as KirigamiComponents
 
 import org.kde.neochat
 import org.kde.neochat.settings
@@ -90,11 +91,28 @@ Kirigami.Page {
                     id: loadedAccounts
                     model: AccountRegistry
                     delegate: FormCard.FormButtonDelegate {
-                        text: model.userId
+                        id: delegate
+
+                        required property string userId
+                        required property NeoChatConnection connection
+
+                        text: connection.localUser.displayName
+                        description: connection.localUser.id
+                        leadingPadding: Kirigami.Units.largeSpacing
+
                         onClicked: {
-                            Controller.activeConnection = model.connection;
+                            Controller.activeConnection = delegate.connection;
                             root.connectionChosen();
                         }
+                        leading: KirigamiComponents.Avatar {
+                            id: avatar
+                            Layout.alignment: Qt.AlignHCenter
+                            Layout.topMargin: Kirigami.Units.gridUnit
+                            name: delegate.text
+                            source: delegate.connection.localUser.avatarMediaId ? delegate.connection.makeMediaUrl("mxc://" + delegate.connection.localUser.avatarMediaId) : ""
+                            implicitWidth: Kirigami.Units.iconSizes.medium
+                            implicitHeight: Kirigami.Units.iconSizes.medium
+                        }
                     }
                 }
                 Repeater {