better scrollbar in codeblocks + enter anim for delegates

Modules/Notifications/Sidebar/Chat/ChatContent.qml

@@ -12,6 +12,78 @@ Item {
 
 	property ChatSession chatData
 	property bool following: true
+	// qmlformat off
+	readonly property var keys: [
+		Qt.Key_A,
+		Qt.Key_B,
+		Qt.Key_C,
+		Qt.Key_D,
+		Qt.Key_E,
+		Qt.Key_F,
+		Qt.Key_G,
+		Qt.Key_H,
+		Qt.Key_I,
+		Qt.Key_J,
+		Qt.Key_K,
+		Qt.Key_L,
+		Qt.Key_M,
+		Qt.Key_N,
+		Qt.Key_O,
+		Qt.Key_P,
+		Qt.Key_Q,
+		Qt.Key_R,
+		Qt.Key_S,
+		Qt.Key_T,
+		Qt.Key_U,
+		Qt.Key_V,
+		Qt.Key_W,
+		Qt.Key_X,
+		Qt.Key_Y,
+		Qt.Key_Z,
+
+		Qt.Key_Agrave,
+		Qt.Key_Aacute,
+		Qt.Key_Acircumflex,
+		Qt.Key_Atilde,
+		Qt.Key_Adiaeresis,
+		Qt.Key_Aring,
+		Qt.Key_AE,
+
+		Qt.Key_Ccedilla,
+
+		Qt.Key_Egrave,
+		Qt.Key_Eacute,
+		Qt.Key_Ecircumflex,
+		Qt.Key_Ediaeresis,
+
+		Qt.Key_Igrave,
+		Qt.Key_Iacute,
+		Qt.Key_Icircumflex,
+		Qt.Key_Idiaeresis,
+
+		Qt.Key_ETH,
+
+		Qt.Key_Ntilde,
+
+		Qt.Key_Ograve,
+		Qt.Key_Oacute,
+		Qt.Key_Ocircumflex,
+		Qt.Key_Otilde,
+		Qt.Key_Odiaeresis,
+		Qt.Key_Ooblique,
+
+		Qt.Key_Ugrave,
+		Qt.Key_Uacute,
+		Qt.Key_Ucircumflex,
+		Qt.Key_Udiaeresis,
+
+		Qt.Key_Yacute,
+		Qt.Key_ydiaeresis,
+
+		Qt.Key_THORN,
+		Qt.Key_ssharp
+	]
+	// qmlformat on
 
 	signal requestClose
 
@@ -27,6 +99,21 @@ Item {
 		input.text = "";
 	}
 
+	function focusInput(): void {
+		Qt.callLater(() => input.forceActiveFocus());
+	}
+
+	onChatDataChanged: {
+		if (chatData)
+			focusInput();
+	}
+	Keys.onPressed: e => {
+		if (root.keys.includes(e.key)) {
+			input.insert(input.length, e.text);
+			focusInput();
+		}
+	}
+
 	RowLayout {
 		id: header
 
@@ -68,9 +155,11 @@ Item {
 			id: list
 
 			property bool userScrolledUp: false
+			property real lastCHeight: 0.0
 
 			function scrollToBottom(): void {
-				Qt.callLater(() => positionViewAtBeginning());
+				scrollAnim.to = 0;
+				scrollAnim.start();
 			}
 
 			cacheBuffer: height * 20
@@ -80,47 +169,67 @@ Item {
 			model: root.chatData.messagesModel
 			spacing: 0
 			rotation: 180
+			add: Transition {
+				Anim {
+					from: -100
+					property: "y"
+				}
+			}
 
-			// add: Transition {
-			// 	Anim {
-			// 		from: 10
-			// 		property: "y"
-			// 	}
-			// }
+			CustomScrollBar.vertical: CustomScrollBar {
+				id: scrollBar
+
+				flickable: list
+				parent: list.parent
+				anchors.top: list.top
+				anchors.right: list.right
+				anchors.bottom: list.bottom
+
+				transform: Rotation {
+					origin.y: list.height / 2
+					origin.x: scrollBar.width / 2
+					angle: 180
+
+					axis {
+						y: 0
+						x: 1
+						z: 0
+					}
+				}
+			}
 			delegate: MessageDelegate {
 				rotation: 180
 			}
 
-			// displaced: Transition {
-			// 	Anim {
-			// 		property: "y"
-			// 	}
-			// }
-			// move: Transition {
-			// 	Anim {
-			// 		property: "y"
-			// 	}
-			// }
+			displaced: Transition {
+				Anim {
+					property: "y"
+				}
+			}
+			move: Transition {
+				Anim {
+					property: "y"
+				}
+			}
 
 			Component.onCompleted: {
 				positionViewAtBeginning();
-				forceActiveFocus();
 			}
-			onAtYEndChanged: {
-				if (atYEnd)
+			onAtYBeginningChanged: {
+				if (atYBeginning)
 					userScrolledUp = false;
 			}
 			onContentHeightChanged: {
-				if (!userScrolledUp && atYEnd)
-					scrollToBottom();
-			}
-			onCountChanged: {
-				if (!userScrolledUp)
-					scrollToBottom();
+				if (userScrolledUp && Chat.busy) {
+					const delta = contentHeight - lastCHeight;
+					contentY += delta;
+				}
+
+				lastCHeight = contentHeight;
 			}
 			onMovingChanged: {
 				if (moving)
-					userScrolledUp = !atYEnd;
+					userScrolledUp = !atYBeginning;
 			}
 
 			Anim {
@@ -179,7 +288,7 @@ Item {
 			type: IconButton.Tonal
 
 			onClicked: {
-				listLoader.item.positionViewAtBeginning();
+				listLoader.item.scrollToBottom();
 			}
 		}
 	}
@@ -194,11 +303,13 @@ Item {
 		bg.color: Colors.tPalette.m3surfaceContainerLowest
 		font.pointSize: Tokens.font.size.normal
 		implicitHeight: Math.min(root.height / 5, contentHeight + topPadding + bottomPadding)
+		focus: true
 		placeholderText: qsTr("Send a message")
 		sendIcon.font.pointSize: Tokens.font.size.large
 		sendIcon.icon: "arrow_upward"
 		sendIcon.padding: Tokens.padding.extraSmall
 
+		Component.onCompleted: root.focusInput()
 		Keys.onPressed: e => {
 			if (e.key == Qt.Key_Return) {
 				if (!(e.modifiers & Qt.ShiftModifier)) {