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}> + + + + + + ) +}