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