From 05e932b8843849d0e13d73c97809e375d802fb3c Mon Sep 17 00:00:00 2001
From: Ritchie Frodomar <ritchie@kde.org>
Date: Mon, 19 May 2025 12:07:02 -0400
Subject: [PATCH] Move typing indicators closer to messages

This merge request addresses a minor papercut in NeoChat's layout when using a screen magnifier.

If you are zoomed in on a conversation, typing indicators are generally invisible. This merge request moves them to align with actual messages, making them more visible to screen magnifier users like myself. That way, you can do the text chat equivalent of waiting for someone else to finish talking before you ramble on.

### Before
![Screenshot of NeoChat in a test conversation. A user is typing. The typing pane is very far off to the left, not visible when zoomed in.](https://cdn.acidiclight.dev/images/2025/04/03/31d836b18875.png)

### After
![Screenshot of the typing indicator in a conversation. The typing pane now aligns with the chatbar and messages.](https://cdn.acidiclight.dev/images/2025/04/03/870ace40ce86.png)
---
 src/timeline/TimelineView.qml | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/timeline/TimelineView.qml b/src/timeline/TimelineView.qml
index a818e00b5..ed782018d 100644
--- a/src/timeline/TimelineView.qml
+++ b/src/timeline/TimelineView.qml
@@ -13,6 +13,7 @@ import org.kde.kitemmodels
 
 import org.kde.neochat
 import org.kde.neochat.timeline
+import org.kde.neochat.libneochat as LibNeoChat
 
 QQC2.ScrollView {
     id: root
@@ -261,13 +262,24 @@ QQC2.ScrollView {
             }
         }
 
-        TypingPane {
-            id: typingPane
+        LibNeoChat.DelegateSizeHelper {
+            id: typingPaneSizeHelper
+            parentItem: typingPaneContainer
+            startBreakpoint: Kirigami.Units.gridUnit * 46
+            endBreakpoint: Kirigami.Units.gridUnit * 66
+            startPercentWidth: 100
+            endPercentWidth: NeoChatConfig.compactLayout ? 100 : 85
+            maxWidth: NeoChatConfig.compactLayout ? -1 : Kirigami.Units.gridUnit * 60
+        }
+
+        RowLayout {
+            id: typingPaneContainer
             visible: root.currentRoom && root.currentRoom.otherMembersTyping.length > 0
-            labelText: visible ? i18ncp("Message displayed when some users are typing", "%2 is typing", "%2 are typing", root.currentRoom.otherMembersTyping.length, root.currentRoom.otherMembersTyping.map(member => member.displayName).join(", ")) : ""
             anchors.left: parent.left
+            anchors.right: parent.right
             anchors.bottom: parent.bottom
-            height: visible ? implicitHeight : 0
+            height: visible ? typingPane.implicitHeight : 0
+            z: 2
             Behavior on height {
                 NumberAnimation {
                     property: "height"
@@ -275,7 +287,15 @@ QQC2.ScrollView {
                     easing.type: Easing.OutCubic
                 }
             }
-            z: 2
+            RowLayout {
+                Layout.alignment: Qt.AlignCenter
+                Layout.fillWidth: true
+                Layout.maximumWidth: typingPaneSizeHelper.availableWidth
+                TypingPane {
+                    id: typingPane
+                    labelText: visible ? i18ncp("Message displayed when some users are typing", "%2 is typing", "%2 are typing", root.currentRoom.otherMembersTyping.length, root.currentRoom.otherMembersTyping.map(member => member.displayName).join(", ")) : ""
+                }
+            }
         }
 
         function goToEvent(eventID) {