add context menu item to open link in new tab

commafeed-client/src/components/KeyboardShortcutsHelp.tsx

@@ -95,6 +95,10 @@ export function KeyboardShortcutsHelp() {
                     </td>
                     <td>
                         <Kbd>B</Kbd>
+                        <span>, </span>
+                        <Kbd>
+                            <Trans>Middle click</Trans>
+                        </Kbd>
                     </td>
                 </tr>
                 <tr>

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

@@ -13,6 +13,7 @@ import {
 } from "app/slices/entries"
 import { redirectToRootCategory } from "app/slices/redirect"
 import { useAppDispatch, useAppSelector } from "app/store"
+import { openLinkInBackgroundTab } from "app/utils"
 import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
 import { Loader } from "components/Loader"
 import { useMousetrap } from "hooks/useMousetrap"
@@ -211,15 +212,7 @@ export function FeedEntries() {
     useMousetrap("b", () => {
         // simulate ctrl+click to open tab in background
         if (!selectedEntry) return
-        const a = document.createElement("a")
-        a.href = selectedEntry.url
-        a.rel = "noreferrer"
-        a.dispatchEvent(
-            new MouseEvent("click", {
-                ctrlKey: true,
-                metaKey: true,
-            })
-        )
+        openLinkInBackgroundTab(selectedEntry.url)
     })
     useMousetrap("m", () => {
         // toggle read status

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

@@ -4,6 +4,7 @@ import { Constants } from "app/constants"
 import { markEntriesUpToEntry, markEntry, starEntry } from "app/slices/entries"
 import { useAppDispatch } from "app/store"
 import { Entry } from "app/types"
+import { openLinkInBackgroundTab } from "app/utils"
 import { throttle } from "lodash"
 import { useEffect } from "react"
 import { Item, Menu, Separator, useContextMenu } from "react-contexify"
@@ -41,7 +42,18 @@ export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
             >
                 <Group>
                     <TbExternalLink size={iconSize} />
-                    <Trans>Open link</Trans>
+                    <Trans>Open link in new tab</Trans>
+                </Group>
+            </Item>
+            <Item
+                onClick={() => {
+                    openLinkInBackgroundTab(props.entry.url)
+                    dispatch(markEntry({ entry: props.entry, read: true }))
+                }}
+            >
+                <Group>
+                    <TbExternalLink size={iconSize} />
+                    <Trans>Open link in new background tab</Trans>
                 </Group>
             </Item>