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

commafeed-client/src/components/KeyboardShortcutsHelp.tsx

@@ -29,6 +29,22 @@ export function KeyboardShortcutsHelp() {
                         <Kbd>K</Kbd>
                     </td>
                 </tr>
+                <tr>
+                    <td>
+                        <Trans>Set focus on next entry without opening it</Trans>
+                    </td>
+                    <td>
+                        <Kbd>N</Kbd>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <Trans>Set focus on previous entry without opening it</Trans>
+                    </td>
+                    <td>
+                        <Kbd>P</Kbd>
+                    </td>
+                </tr>
                 <tr>
                     <td>
                         <Trans>Move the page down</Trans>

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>

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

@@ -11,6 +11,7 @@ import { FeedEntryHeader } from "./FeedEntryHeader"
 interface FeedEntryProps {
     entry: Entry
     expanded: boolean
+    showSelectionIndicator: boolean
     onHeaderClick: (e: React.MouseEvent) => void
 }
 
@@ -19,7 +20,7 @@ const useStyles = createStyles((theme, props: FeedEntryProps) => {
     if (theme.colorScheme === "dark") backgroundColor = props.entry.read ? "inherit" : theme.colors.dark[5]
     else backgroundColor = props.entry.read && !props.expanded ? theme.colors.gray[0] : "inherit"
 
-    return {
+    const styles = {
         paper: {
             backgroundColor,
             marginTop: theme.spacing.xs,
@@ -33,6 +34,12 @@ const useStyles = createStyles((theme, props: FeedEntryProps) => {
             maxWidth: Constants.layout.entryMaxWidth,
         },
     }
+
+    if (props.showSelectionIndicator) {
+        styles.paper.borderLeftColor = theme.colors.orange[4]
+    }
+
+    return styles
 })
 
 export function FeedEntry(props: FeedEntryProps) {

commafeed-client/src/locales/en/messages.po

@@ -573,6 +573,14 @@ msgstr "Scroll smoothly when navigating between entries"
 msgid "Search"
 msgstr "Search"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Set focus on next entry without opening it"
+msgstr "Set focus on next entry without opening it"
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Set focus on previous entry without opening it"
+msgstr "Set focus on previous entry without opening it"
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Settings"
 msgstr "Settings"

commafeed-client/src/locales/fr/messages.po

@@ -573,6 +573,14 @@ msgstr "Défilement animé lors de la navigation entre les entrées"
 msgid "Search"
 msgstr "Rechercher"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Set focus on next entry without opening it"
+msgstr "Sélectionner l'article suivant sans l'ouvrir"
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Set focus on previous entry without opening it"
+msgstr "Sélectionner l'article précédent sans l'ouvrir"
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Settings"
 msgstr "Réglages"