From ecd5c7b91e6b9942f804cbfcfd0b9fcc80ca1b85 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 7 Jan 2024 14:47:17 +0800
Subject: [PATCH] . (period) keyboard shortcut = load new posts

---
 src/components/keyboard-shortcuts-help.jsx |  4 +++
 src/components/timeline.jsx                | 42 ++++++++++++----------
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/components/keyboard-shortcuts-help.jsx b/src/components/keyboard-shortcuts-help.jsx
index f36b664e..e95fefa8 100644
--- a/src/components/keyboard-shortcuts-help.jsx
+++ b/src/components/keyboard-shortcuts-help.jsx
@@ -71,6 +71,10 @@ export default memo(function KeyboardShortcutsHelp() {
                     </>
                   ),
                 },
+                {
+                  action: 'Load new posts',
+                  keys: <kbd>.</kbd>,
+                },
                 {
                   action: 'Open post details',
                   keys: (
diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index c56c27ba..7f806e45 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -204,6 +204,21 @@ function Timeline({
     }
   });
 
+  const showNewPostsIndicator =
+    items.length > 0 && uiState !== 'loading' && showNew;
+  const handleLoadNewPosts = useCallback(() => {
+    loadItems(true);
+    scrollableRef.current?.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }, [loadItems]);
+  const dotRef = useHotkeys('.', () => {
+    if (showNewPostsIndicator) {
+      handleLoadNewPosts();
+    }
+  });
+
   // const {
   //   scrollDirection,
   //   nearReachStart,
@@ -387,24 +402,15 @@ function Timeline({
                 {!!headerEnd && headerEnd}
               </div>
             </div>
-            {items.length > 0 &&
-              uiState !== 'loading' &&
-              // !hiddenUI &&
-              showNew && (
-                <button
-                  class="updates-button shiny-pill"
-                  type="button"
-                  onClick={() => {
-                    loadItems(true);
-                    scrollableRef.current?.scrollTo({
-                      top: 0,
-                      behavior: 'smooth',
-                    });
-                  }}
-                >
-                  <Icon icon="arrow-up" /> New posts
-                </button>
-              )}
+            {showNewPostsIndicator && (
+              <button
+                class="updates-button shiny-pill"
+                type="button"
+                onClick={handleLoadNewPosts}
+              >
+                <Icon icon="arrow-up" /> New posts
+              </button>
+            )}
           </header>
           {!!timelineStart && (
             <div