add button in the header to open entry link (#1333)

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

@@ -1,15 +1,15 @@
 import { Box, Divider, type MantineRadius, type MantineSpacing, Paper } from "@mantine/core"
 import { Constants } from "app/constants"
 import { type Entry, type ViewMode } from "app/types"
+import { FeedEntryCompactHeader } from "components/content/header/FeedEntryCompactHeader"
+import { FeedEntryHeader } from "components/content/header/FeedEntryHeader"
 import { useViewMode } from "hooks/useViewMode"
 import React from "react"
 import { useSwipeable } from "react-swipeable"
 import { tss } from "tss"
 import { FeedEntryBody } from "./FeedEntryBody"
-import { FeedEntryCompactHeader } from "./FeedEntryCompactHeader"
 import { FeedEntryContextMenu } from "./FeedEntryContextMenu"
 import { FeedEntryFooter } from "./FeedEntryFooter"
-import { FeedEntryHeader } from "./FeedEntryHeader"
 
 interface FeedEntryProps {
     entry: Entry

commafeed-client/src/components/content/FeedEntryCompactHeader.tsx → commafeed-client/src/components/content/header/FeedEntryCompactHeader.tsx

@@ -1,10 +1,11 @@
 import { Box, Text } from "@mantine/core"
 import { type Entry } from "app/types"
+import { FeedFavicon } from "components/content/FeedFavicon"
+import { OpenExternalLink } from "components/content/header/OpenExternalLink"
 import { RelativeDate } from "components/RelativeDate"
 import { OnDesktop } from "components/responsive/OnDesktop"
 import { tss } from "tss"
 import { FeedEntryTitle } from "./FeedEntryTitle"
-import { FeedFavicon } from "./FeedFavicon"
 
 export interface FeedEntryHeaderProps {
     entry: Entry
@@ -61,6 +62,7 @@ export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
                     <RelativeDate date={props.entry.date} />
                 </Text>
             </OnDesktop>
+            <OpenExternalLink entry={props.entry} />
         </Box>
     )
 }

commafeed-client/src/components/content/FeedEntryHeader.tsx → commafeed-client/src/components/content/header/FeedEntryHeader.tsx

@@ -1,9 +1,10 @@
 import { Box, Space, Text } from "@mantine/core"
 import { type Entry } from "app/types"
+import { FeedFavicon } from "components/content/FeedFavicon"
+import { OpenExternalLink } from "components/content/header/OpenExternalLink"
 import { RelativeDate } from "components/RelativeDate"
 import { tss } from "tss"
 import { FeedEntryTitle } from "./FeedEntryTitle"
-import { FeedFavicon } from "./FeedFavicon"
 
 export interface FeedEntryHeaderProps {
     entry: Entry
@@ -15,10 +16,15 @@ const useStyles = tss
         read: boolean
     }>()
     .create(({ colorScheme, read }) => ({
-        headerText: {
+        main: {
+            display: "flex",
+            alignItems: "flex-start",
+            justifyContent: "space-between",
+        },
+        mainText: {
             fontWeight: colorScheme === "light" && !read ? "bold" : "inherit",
         },
-        headerSubtext: {
+        details: {
             display: "flex",
             alignItems: "center",
             fontSize: "90%",
@@ -31,10 +37,13 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
     })
     return (
         <Box>
-            <Box className={classes.headerText}>
-                <FeedEntryTitle entry={props.entry} />
+            <Box className={classes.main}>
+                <Box className={classes.mainText}>
+                    <FeedEntryTitle entry={props.entry} />
+                </Box>
+                <OpenExternalLink entry={props.entry} />
             </Box>
-            <Box className={classes.headerSubtext}>
+            <Box className={classes.details}>
                 <FeedFavicon url={props.entry.iconUrl} />
                 <Space w={6} />
                 <Text c="dimmed">
@@ -44,7 +53,7 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
                 </Text>
             </Box>
             {props.expanded && (
-                <Box className={classes.headerSubtext}>
+                <Box className={classes.details}>
                     <Text c="dimmed">
                         {props.entry.author && <span>by {props.entry.author}</span>}
                         {props.entry.author && props.entry.categories && <span>&nbsp;·&nbsp;</span>}

commafeed-client/src/components/content/header/OpenExternalLink.tsx

@@ -0,0 +1,29 @@
+import { Trans } from "@lingui/macro"
+import { ActionIcon, Anchor, Tooltip } from "@mantine/core"
+import { markEntry } from "app/entries/thunks"
+import { useAppDispatch } from "app/store"
+import { type Entry } from "app/types"
+import { TbExternalLink } from "react-icons/tb"
+
+export function OpenExternalLink(props: { entry: Entry }) {
+    const dispatch = useAppDispatch()
+    const onClick = (e: React.MouseEvent) => {
+        e.stopPropagation()
+        dispatch(
+            markEntry({
+                entry: props.entry,
+                read: true,
+            })
+        )
+    }
+
+    return (
+        <Anchor href={props.entry.url} target="_blank" rel="noreferrer" onClick={onClick}>
+            <Tooltip label={<Trans>Open link</Trans>}>
+                <ActionIcon variant="transparent" c="dimmed">
+                    <TbExternalLink />
+                </ActionIcon>
+            </Tooltip>
+        </Anchor>
+    )
+}