clicking on the body of an entry in expanded mode selects it and marks it as read (#1089)

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

@@ -59,6 +59,18 @@ export function FeedEntries() {
         }
     }
 
+    const bodyClicked = (entry: ExpendableEntry) => {
+        if (viewMode !== "expanded") return
+        dispatch(
+            selectEntry({
+                entry,
+                expand: true,
+                markAsRead: true,
+                scrollToEntry: true,
+            })
+        )
+    }
+
     const swipedRight = (entry: ExpendableEntry) => dispatch(markEntry({ entry, read: !entry.read }))
 
     useEffect(() => {
@@ -272,6 +284,7 @@ export function FeedEntries() {
                         showSelectionIndicator={entry.id === selectedEntryId && (!entry.expanded || viewMode === "expanded")}
                         maxWidth={sidebarVisible ? Constants.layout.entryMaxWidth : undefined}
                         onHeaderClick={event => headerClicked(entry, event)}
+                        onBodyClick={() => bodyClicked(entry)}
                         onSwipedRight={() => swipedRight(entry)}
                     />
                 </div>

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

@@ -18,6 +18,7 @@ interface FeedEntryProps {
     showSelectionIndicator: boolean
     maxWidth?: number
     onHeaderClick: (e: React.MouseEvent) => void
+    onBodyClick: (e: React.MouseEvent) => void
     onSwipedRight: () => void
 }
 
@@ -135,7 +136,7 @@ export function FeedEntry(props: FeedEntryProps) {
                 </Box>
             </a>
             {props.expanded && (
-                <Box px={paddingX} pb={paddingY}>
+                <Box px={paddingX} pb={paddingY} onClick={props.onBodyClick}>
                     <Box className={classes.body} sx={{ direction: props.entry.rtl ? "rtl" : "ltr" }}>
                         <FeedEntryBody entry={props.entry} />
                     </Box>