add context menu on entry headers

commafeed-client/src/components/KeyboardShortcutsHelp.tsx

@@ -145,6 +145,26 @@ export function KeyboardShortcutsHelp() {
                         <Kbd>U</Kbd>
                     </td>
                 </tr>
+                <tr>
+                    <td>
+                        <Trans>Show entry menu (desktop)</Trans>
+                    </td>
+                    <td>
+                        <Kbd>
+                            <Trans>Right click</Trans>
+                        </Kbd>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <Trans>Show entry menu (mobile)</Trans>
+                    </td>
+                    <td>
+                        <Kbd>
+                            <Trans>Long press</Trans>
+                        </Kbd>
+                    </td>
+                </tr>
                 <tr>
                     <td>
                         <Trans>Show keyboard shortcut help</Trans>

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

@@ -7,6 +7,7 @@ import React from "react"
 import { useSwipeable } from "react-swipeable"
 import { FeedEntryBody } from "./FeedEntryBody"
 import { FeedEntryCompactHeader } from "./FeedEntryCompactHeader"
+import { FeedEntryContextMenu, useFeedEntryContextMenu } from "./FeedEntryContextMenu"
 import { FeedEntryFooter } from "./FeedEntryFooter"
 import { FeedEntryHeader } from "./FeedEntryHeader"
 
@@ -63,6 +64,8 @@ export function FeedEntry(props: FeedEntryProps) {
         onSwipedRight: () => dispatch(markEntry({ entry: props.entry, read: !props.entry.read })),
     })
 
+    const { onContextMenu } = useFeedEntryContextMenu(props.entry)
+
     const spacing = compact ? 8 : "xs"
     const borderRadius = compact ? "xs" : "sm"
 
@@ -75,6 +78,7 @@ export function FeedEntry(props: FeedEntryProps) {
                 rel="noreferrer"
                 onClick={props.onHeaderClick}
                 onAuxClick={props.onHeaderClick}
+                onContextMenu={onContextMenu}
             >
                 <Box p={spacing} {...swipeHandlers}>
                     {compactHeader && <FeedEntryCompactHeader entry={props.entry} />}
@@ -90,6 +94,8 @@ export function FeedEntry(props: FeedEntryProps) {
                     <FeedEntryFooter entry={props.entry} />
                 </Box>
             )}
+
+            <FeedEntryContextMenu entry={props.entry} />
         </Paper>
     )
 }

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

@@ -0,0 +1,99 @@
+import { t, Trans } from "@lingui/macro"
+import { createStyles, Group } from "@mantine/core"
+import { Constants } from "app/constants"
+import { markEntriesUpToEntry, markEntry, starEntry } from "app/slices/entries"
+import { useAppDispatch } from "app/store"
+import { Entry } from "app/types"
+import { throttle } from "lodash"
+import { useEffect } from "react"
+import { Item, Menu, Separator, useContextMenu } from "react-contexify"
+import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbStar, TbStarOff } from "react-icons/tb"
+
+interface FeedEntryContextMenuProps {
+    entry: Entry
+}
+
+const iconSize = 16
+const useStyles = createStyles(theme => ({
+    menu: {
+        // apply mantine theme from MenuItem.styles.ts
+        fontSize: theme.fontSizes.sm,
+        "--contexify-item-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
+        "--contexify-activeItem-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
+        "--contexify-activeItem-bgColor": `${
+            theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors.dark[3], 0.35) : theme.colors.gray[1]
+        } !important`,
+    },
+}))
+
+const menuId = (entry: Entry) => entry.id
+export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
+    const { classes, theme } = useStyles()
+    const dispatch = useAppDispatch()
+
+    return (
+        <Menu id={menuId(props.entry)} theme={theme.colorScheme} animation={false} className={classes.menu}>
+            <Item
+                onClick={() => {
+                    window.open(props.entry.url, "_blank", "noreferrer")
+                    dispatch(markEntry({ entry: props.entry, read: true }))
+                }}
+            >
+                <Group>
+                    <TbExternalLink size={iconSize} />
+                    <Trans>Open link</Trans>
+                </Group>
+            </Item>
+
+            <Separator />
+
+            <Item onClick={() => dispatch(markEntry({ entry: props.entry, read: !props.entry.read }))}>
+                <Group>
+                    {props.entry.read ? <TbEyeOff size={iconSize} /> : <TbEyeCheck size={iconSize} />}
+                    {props.entry.read ? t`Keep unread` : t`Mark as read`}
+                </Group>
+            </Item>
+            <Item onClick={() => dispatch(starEntry({ entry: props.entry, starred: !props.entry.starred }))}>
+                <Group>
+                    {props.entry.starred ? <TbStarOff size={iconSize} /> : <TbStar size={iconSize} />}
+                    {props.entry.starred ? t`Unstar` : t`Star`}
+                </Group>
+            </Item>
+
+            <Separator />
+
+            <Item onClick={() => dispatch(markEntriesUpToEntry(props.entry))}>
+                <Group>
+                    <TbArrowBarToDown size={iconSize} />
+                    <Trans>Mark as read up to here</Trans>
+                </Group>
+            </Item>
+        </Menu>
+    )
+}
+
+export function useFeedEntryContextMenu(entry: Entry) {
+    const contextMenu = useContextMenu({
+        id: menuId(entry),
+    })
+
+    const onContextMenu = (event: React.MouseEvent) => {
+        event.preventDefault()
+        contextMenu.show({
+            event,
+        })
+    }
+
+    // close context menu on scroll
+    useEffect(() => {
+        const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
+
+        const listener = () => contextMenu.hideAll()
+        const throttledListener = throttle(listener, 100)
+
+        scrollArea?.addEventListener("scroll", throttledListener)
+        return () => scrollArea?.removeEventListener("scroll", throttledListener)
+    }, [contextMenu])
+
+    return { onContextMenu }
+}