diff --git a/commafeed-client/src/app/constants.ts b/commafeed-client/src/app/constants.ts
index eb416bad..4aecc298 100644
--- a/commafeed-client/src/app/constants.ts
+++ b/commafeed-client/src/app/constants.ts
@@ -97,5 +97,6 @@ export const Constants = {
mainScrollAreaId: "main-scroll-area-id",
entryId: (entry: Entry) => `entry-id-${entry.id}`,
},
+ browserExtensionUrl: "https://github.com/Athou/commafeed-browser-extension",
bitcoinWalletAddress: "1dymfUxqCWpyD7a6rQSqNy4rLVDBsAr5e",
}
diff --git a/commafeed-client/src/app/utils.ts b/commafeed-client/src/app/utils.ts
index cdd841b2..0b72a831 100644
--- a/commafeed-client/src/app/utils.ts
+++ b/commafeed-client/src/app/utils.ts
@@ -52,17 +52,4 @@ export const scrollToWithCallback = ({
element.scrollTo(options)
}
-export const openLinkInBackgroundTab = (url: string) => {
- // simulate ctrl+click to open tab in background
- const a = document.createElement("a")
- a.href = url
- a.rel = "noreferrer"
- a.dispatchEvent(
- new MouseEvent("click", {
- ctrlKey: true,
- metaKey: true,
- })
- )
-}
-
export const truncate = (str: string, n: number) => (str.length > n ? `${str.slice(0, n - 1)}\u2026` : str)
diff --git a/commafeed-client/src/components/KeyboardShortcutsHelp.tsx b/commafeed-client/src/components/KeyboardShortcutsHelp.tsx
index 30ed8955..afda9991 100644
--- a/commafeed-client/src/components/KeyboardShortcutsHelp.tsx
+++ b/commafeed-client/src/components/KeyboardShortcutsHelp.tsx
@@ -1,183 +1,192 @@
import { Trans } from "@lingui/macro"
-import { Kbd, Table } from "@mantine/core"
+import { Anchor, Box, Kbd, Stack, Table } from "@mantine/core"
+import { Constants } from "app/constants"
export function KeyboardShortcutsHelp() {
return (
-
-
-
- |
- Refresh
- |
-
- R
- |
-
-
- |
- Open next entry
- |
-
- J
- |
-
-
- |
- Open previous entry
- |
-
- K
- |
-
-
- |
- Set focus on next entry without opening it
- |
-
- N
- |
-
-
- |
- Set focus on previous entry without opening it
- |
-
- P
- |
-
-
- |
- Move the page down
- |
-
-
- Space
-
- |
-
-
- |
- Move the page up
- |
-
-
- Shift
-
- +
-
- Space
-
- |
-
-
- |
- Open/close current entry
- |
-
- O
- ,
-
- Enter
-
- |
-
-
- |
- Open current entry in a new tab
- |
-
- V
- |
-
-
- |
- Open current entry in a new tab in the background
- |
-
- B
- ,
-
- Middle click
-
- |
-
-
- |
- Toggle read status of current entry
- |
-
- M
- ,
- Swipe header to the right
- |
-
-
- |
- Mark all entries as read
- |
-
-
- Shift
-
- +
- A
- |
-
-
- |
- Go to the All view
- |
-
- G
-
- A
- |
-
-
- |
- Navigate to a subscription by entering its name
- |
-
-
- Ctrl
-
- +
- K
- ,
- G
-
- U
- |
-
-
- |
- Show entry menu (desktop)
- |
-
-
- Right click
-
- |
-
-
- |
- Show entry menu (mobile)
- |
-
-
- Long press
-
- |
-
-
- |
- Show keyboard shortcut help
- |
-
- ?
- |
-
-
-
+
+
+
+
+ |
+ Refresh
+ |
+
+ R
+ |
+
+
+ |
+ Open next entry
+ |
+
+ J
+ |
+
+
+ |
+ Open previous entry
+ |
+
+ K
+ |
+
+
+ |
+ Set focus on next entry without opening it
+ |
+
+ N
+ |
+
+
+ |
+ Set focus on previous entry without opening it
+ |
+
+ P
+ |
+
+
+ |
+ Move the page down
+ |
+
+
+ Space
+
+ |
+
+
+ |
+ Move the page up
+ |
+
+
+ Shift
+
+ +
+
+ Space
+
+ |
+
+
+ |
+ Open/close current entry
+ |
+
+ O
+ ,
+
+ Enter
+
+ |
+
+
+ |
+ Open current entry in a new tab
+ |
+
+ V
+ |
+
+
+ |
+ Open current entry in a new tab in the background
+ |
+
+ B
+ *,
+
+ Middle click
+
+ |
+
+
+ |
+ Toggle read status of current entry
+ |
+
+ M
+ ,
+ Swipe header to the right
+ |
+
+
+ |
+ Mark all entries as read
+ |
+
+
+ Shift
+
+ +
+ A
+ |
+
+
+ |
+ Go to the All view
+ |
+
+ G
+
+ A
+ |
+
+
+ |
+ Navigate to a subscription by entering its name
+ |
+
+
+ Ctrl
+
+ +
+ K
+ ,
+ G
+
+ U
+ |
+
+
+ |
+ Show entry menu (desktop)
+ |
+
+
+ Right click
+
+ |
+
+
+ |
+ Show entry menu (mobile)
+ |
+
+
+ Long press
+
+ |
+
+
+ |
+ Show keyboard shortcut help
+ |
+
+ ?
+ |
+
+
+
+
+ *
+
+ Browser extension required
+
+
+
)
}
diff --git a/commafeed-client/src/components/content/FeedEntries.tsx b/commafeed-client/src/components/content/FeedEntries.tsx
index 0fde8187..82ebfd6d 100644
--- a/commafeed-client/src/components/content/FeedEntries.tsx
+++ b/commafeed-client/src/components/content/FeedEntries.tsx
@@ -13,9 +13,9 @@ 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 { useBrowserExtension } from "hooks/useBrowserExtension"
import { useMousetrap } from "hooks/useMousetrap"
import { useViewMode } from "hooks/useViewMode"
import { useEffect } from "react"
@@ -33,6 +33,7 @@ export function FeedEntries() {
const scrollMarks = useAppSelector(state => state.user.settings?.scrollMarks)
const scrollingToEntry = useAppSelector(state => state.entries.scrollingToEntry)
const dispatch = useAppDispatch()
+ const { isBrowserExtensionInstalled, openLinkInBackgroundTab } = useBrowserExtension()
const selectedEntry = entries.find(e => e.id === selectedEntryId)
@@ -211,7 +212,7 @@ export function FeedEntries() {
window.open(selectedEntry.url, "_blank", "noreferrer")
})
useMousetrap("b", () => {
- // simulate ctrl+click to open tab in background
+ if (!isBrowserExtensionInstalled) return
if (!selectedEntry) return
openLinkInBackgroundTab(selectedEntry.url)
})
diff --git a/commafeed-client/src/components/content/FeedEntryContextMenu.tsx b/commafeed-client/src/components/content/FeedEntryContextMenu.tsx
index 38028ed1..b8ef5960 100644
--- a/commafeed-client/src/components/content/FeedEntryContextMenu.tsx
+++ b/commafeed-client/src/components/content/FeedEntryContextMenu.tsx
@@ -5,7 +5,8 @@ import { markEntriesUpToEntry, markEntry, starEntry } from "app/slices/entries"
import { redirectToFeed } from "app/slices/redirect"
import { useAppDispatch, useAppSelector } from "app/store"
import { Entry } from "app/types"
-import { openLinkInBackgroundTab, truncate } from "app/utils"
+import { truncate } from "app/utils"
+import { useBrowserExtension } from "hooks/useBrowserExtension"
import { useEffect } from "react"
import { Item, Menu, Separator, useContextMenu } from "react-contexify"
import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbRss, TbStar, TbStarOff } from "react-icons/tb"
@@ -34,6 +35,7 @@ export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
const { classes, theme } = useStyles()
const sourceType = useAppSelector(state => state.entries.source.type)
const dispatch = useAppDispatch()
+ const { isBrowserExtensionInstalled, openLinkInBackgroundTab } = useBrowserExtension()
return (