add support for "n" and "p" keyboard shortcuts

commafeed-client/src/components/content/FeedEntries.tsx

@@ -64,6 +64,7 @@ export function FeedEntries() {
     // scroll to entry when selected entry changes
     useEffect(() => {
         if (!selectedEntryId) return
+        if (!selectedEntry?.expanded) return
 
         const selectedEntryElement = refs.current[selectedEntryId]
         if (Constants.layout.isTopVisible(selectedEntryElement) && Constants.layout.isBottomVisible(selectedEntryElement)) return
@@ -73,7 +74,7 @@ export function FeedEntries() {
             top: selectedEntryElement.offsetTop - 3,
             behavior: scrollSpeed && scrollSpeed > 0 ? "smooth" : "auto",
         })
-    }, [selectedEntryId, scrollSpeed])
+    }, [selectedEntryId, selectedEntry?.expanded, scrollSpeed])
 
     useMousetrap("r", () => {
         dispatch(reloadEntries())
@@ -86,6 +87,14 @@ export function FeedEntries() {
             })
         )
     })
+    useMousetrap("n", () => {
+        dispatch(
+            selectNextEntry({
+                expand: false,
+                markAsRead: false,
+            })
+        )
+    })
     useMousetrap("k", () => {
         dispatch(
             selectPreviousEntry({
@@ -94,6 +103,14 @@ export function FeedEntries() {
             })
         )
     })
+    useMousetrap("p", () => {
+        dispatch(
+            selectPreviousEntry({
+                expand: false,
+                markAsRead: false,
+            })
+        )
+    })
     useMousetrap("space", () => {
         if (selectedEntry) {
             if (selectedEntry.expanded) {
@@ -232,6 +249,7 @@ export function FeedEntries() {
                     <FeedEntry
                         entry={entry}
                         expanded={!!entry.expanded || viewMode === "expanded"}
+                        showSelectionIndicator={entry.id === selectedEntryId && (!entry.expanded || viewMode === "expanded")}
                         onHeaderClick={event => headerClicked(entry, event)}
                     />
                 </div>