From a32f9463329928d8ee60369a9377087fbaa722cf Mon Sep 17 00:00:00 2001
From: Ian Macdonald <ian@caliban.org>
Date: Thu, 28 Oct 2021 12:34:40 +0200
Subject: [PATCH] Make the [Home] and [End] keys scroll the conversation.

[End] will scroll to the end of the current conversation, because the
latest message is always available.

[Home], however, will scroll only to the top of the currently loaded
messages, triggering earlier messages to load. Multiple presses of
[Home] are therefore required to get to the start of the conversation.
---
 .../conversation/SessionMessagesList.tsx      | 10 ++++++++++
 .../SessionMessagesListContainer.tsx          | 20 +++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/ts/components/session/conversation/SessionMessagesList.tsx b/ts/components/session/conversation/SessionMessagesList.tsx
index 0a1e79a4e..41a4ba600 100644
--- a/ts/components/session/conversation/SessionMessagesList.tsx
+++ b/ts/components/session/conversation/SessionMessagesList.tsx
@@ -23,6 +23,8 @@ export const SessionMessagesList = (props: {
   scrollToQuoteMessage: (options: QuoteClickOptions) => Promise<void>;
   onPageUpPressed: () => void;
   onPageDownPressed: () => void;
+  onHomePressed: () => void;
+  onEndPressed: () => void;
 }) => {
   const messagesProps = useSelector(getSortedMessagesTypesOfSelectedConversation);
 
@@ -34,6 +36,14 @@ export const SessionMessagesList = (props: {
     props.onPageDownPressed();
   });
 
+  useKey('Home', () => {
+    props.onHomePressed();
+  });
+
+  useKey('End', () => {
+    props.onEndPressed();
+  });
+
   return (
     <>
       {messagesProps.map(messageProps => {
diff --git a/ts/components/session/conversation/SessionMessagesListContainer.tsx b/ts/components/session/conversation/SessionMessagesListContainer.tsx
index fc12d0a97..642d156b2 100644
--- a/ts/components/session/conversation/SessionMessagesListContainer.tsx
+++ b/ts/components/session/conversation/SessionMessagesListContainer.tsx
@@ -151,6 +151,8 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
           scrollToQuoteMessage={this.scrollToQuoteMessage}
           onPageDownPressed={this.scrollPgDown}
           onPageUpPressed={this.scrollPgUp}
+          onHomePressed={this.scrollTop}
+          onEndPressed={this.scrollEnd}
         />
 
         <SessionScrollButton onClick={this.scrollToBottom} key="scroll-down-button" />
@@ -267,6 +269,24 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
     });
   }
 
+  private scrollTop() {
+    const messageContainer = this.props.messageContainerRef.current;
+    if (!messageContainer) {
+      return;
+    }
+
+    messageContainer.scrollTo(0, -messageContainer.scrollHeight);
+  }
+
+  private scrollEnd() {
+    const messageContainer = this.props.messageContainerRef.current;
+    if (!messageContainer) {
+      return;
+    }
+
+    messageContainer.scrollTo(0, 0);
+  }
+
   private async scrollToQuoteMessage(options: QuoteClickOptions) {
     const { quoteAuthor, quoteId, referencedMessageNotFound } = options;