diff --git a/commafeed-client/src/components/content/FeedEntry.tsx b/commafeed-client/src/components/content/FeedEntry.tsx
index 99fea3429..39dc45f60 100644
--- a/commafeed-client/src/components/content/FeedEntry.tsx
+++ b/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
diff --git a/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx b/commafeed-client/src/components/content/header/FeedEntryCompactHeader.tsx
similarity index 87%
rename from commafeed-client/src/components/content/FeedEntryCompactHeader.tsx
rename to commafeed-client/src/components/content/header/FeedEntryCompactHeader.tsx
index e91b69d76..ceb770e54 100644
--- a/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx
+++ b/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) {
+
)
}
diff --git a/commafeed-client/src/components/content/FeedEntryHeader.tsx b/commafeed-client/src/components/content/header/FeedEntryHeader.tsx
similarity index 68%
rename from commafeed-client/src/components/content/FeedEntryHeader.tsx
rename to commafeed-client/src/components/content/header/FeedEntryHeader.tsx
index 96e5b1f88..48598c54f 100644
--- a/commafeed-client/src/components/content/FeedEntryHeader.tsx
+++ b/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 (
-
-
+
+
+
+
+
-
+
@@ -44,7 +53,7 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
{props.expanded && (
-
+
{props.entry.author && by {props.entry.author}}
{props.entry.author && props.entry.categories && ยท }
diff --git a/commafeed-client/src/components/content/FeedEntryTitle.tsx b/commafeed-client/src/components/content/header/FeedEntryTitle.tsx
similarity index 100%
rename from commafeed-client/src/components/content/FeedEntryTitle.tsx
rename to commafeed-client/src/components/content/header/FeedEntryTitle.tsx
diff --git a/commafeed-client/src/components/content/header/OpenExternalLink.tsx b/commafeed-client/src/components/content/header/OpenExternalLink.tsx
new file mode 100644
index 000000000..bc8481115
--- /dev/null
+++ b/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 (
+
+ Open link}>
+
+
+
+
+
+ )
+}