add button in the header to star entry (#1025)

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

@@ -1,8 +1,10 @@
 import { Box, Divider, type MantineRadius, type MantineSpacing, Paper } from "@mantine/core"
 import { Constants } from "app/constants"
+import { useAppSelector } from "app/store"
 import { type Entry, type ViewMode } from "app/types"
 import { FeedEntryCompactHeader } from "components/content/header/FeedEntryCompactHeader"
 import { FeedEntryHeader } from "components/content/header/FeedEntryHeader"
+import { useMobile } from "hooks/useMobile"
 import { useViewMode } from "hooks/useViewMode"
 import React from "react"
 import { useSwipeable } from "react-swipeable"
@@ -103,6 +105,15 @@ export function FeedEntry(props: FeedEntryProps) {
         maxWidth: props.maxWidth,
     })
 
+    const externalLinkDisplayMode = useAppSelector(state => state.user.settings?.externalLinkIconDisplayMode)
+    const starIconDisplayMode = useAppSelector(state => state.user.settings?.starIconDisplayMode)
+    const mobile = useMobile()
+
+    const showExternalLinkIcon =
+        externalLinkDisplayMode && ["always", mobile ? "on_mobile" : "on_desktop"].includes(externalLinkDisplayMode)
+    const showStarIcon =
+        props.entry.markable && starIconDisplayMode && ["always", mobile ? "on_mobile" : "on_desktop"].includes(starIconDisplayMode)
+
     const swipeHandlers = useSwipeable({
         onSwipedLeft: props.onSwipedLeft,
     })
@@ -147,8 +158,21 @@ export function FeedEntry(props: FeedEntryProps) {
                 onContextMenu={props.onHeaderRightClick}
             >
                 <Box px={paddingX} py={paddingY} {...swipeHandlers}>
-                    {compactHeader && <FeedEntryCompactHeader entry={props.entry} />}
-                    {!compactHeader && <FeedEntryHeader entry={props.entry} expanded={props.expanded} />}
+                    {compactHeader && (
+                        <FeedEntryCompactHeader
+                            entry={props.entry}
+                            showStarIcon={showStarIcon}
+                            showExternalLinkIcon={showExternalLinkIcon}
+                        />
+                    )}
+                    {!compactHeader && (
+                        <FeedEntryHeader
+                            entry={props.entry}
+                            expanded={props.expanded}
+                            showStarIcon={showStarIcon}
+                            showExternalLinkIcon={showExternalLinkIcon}
+                        />
+                    )}
                 </Box>
             </a>
             {props.expanded && (

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

@@ -2,6 +2,7 @@ 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 { Star } from "components/content/header/Star"
 import { RelativeDate } from "components/RelativeDate"
 import { OnDesktop } from "components/responsive/OnDesktop"
 import { tss } from "tss"
@@ -9,6 +10,8 @@ import { FeedEntryTitle } from "./FeedEntryTitle"
 
 export interface FeedEntryHeaderProps {
     entry: Entry
+    showStarIcon?: boolean
+    showExternalLinkIcon?: boolean
 }
 
 const useStyles = tss
@@ -46,6 +49,7 @@ export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
     })
     return (
         <Box className={classes.wrapper}>
+            {props.showStarIcon && <Star entry={props.entry} />}
             <Box>
                 <FeedFavicon url={props.entry.iconUrl} />
             </Box>
@@ -62,7 +66,7 @@ export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
                     <RelativeDate date={props.entry.date} />
                 </Text>
             </OnDesktop>
-            <OpenExternalLink entry={props.entry} />
+            {props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
         </Box>
     )
 }

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

@@ -1,7 +1,8 @@
-import { Box, Space, Text } from "@mantine/core"
+import { Box, Flex, 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 { Star } from "components/content/header/Star"
 import { RelativeDate } from "components/RelativeDate"
 import { tss } from "tss"
 import { FeedEntryTitle } from "./FeedEntryTitle"
@@ -9,6 +10,8 @@ import { FeedEntryTitle } from "./FeedEntryTitle"
 export interface FeedEntryHeaderProps {
     entry: Entry
     expanded: boolean
+    showStarIcon?: boolean
+    showExternalLinkIcon?: boolean
 }
 
 const useStyles = tss
@@ -17,16 +20,9 @@ const useStyles = tss
     }>()
     .create(({ colorScheme, read }) => ({
         main: {
-            display: "flex",
-            alignItems: "flex-start",
-            justifyContent: "space-between",
-        },
-        mainText: {
             fontWeight: colorScheme === "light" && !read ? "bold" : "inherit",
         },
         details: {
-            display: "flex",
-            alignItems: "center",
             fontSize: "90%",
         },
     }))
@@ -37,13 +33,18 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
     })
     return (
         <Box>
-            <Box className={classes.main}>
-                <Box className={classes.mainText}>
+            <Flex align="flex-start" justify="space-between">
+                <Flex align="flex-start" className={classes.main}>
+                    {props.showStarIcon && (
+                        <Box ml={-6}>
+                            <Star entry={props.entry} />
+                        </Box>
+                    )}
                     <FeedEntryTitle entry={props.entry} />
-                </Box>
-                <OpenExternalLink entry={props.entry} />
-            </Box>
-            <Box className={classes.details}>
+                </Flex>
+                {props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
+            </Flex>
+            <Flex align="center" className={classes.details}>
                 <FeedFavicon url={props.entry.iconUrl} />
                 <Space w={6} />
                 <Text c="dimmed">
@@ -51,7 +52,7 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
                     <span> · </span>
                     <RelativeDate date={props.entry.date} />
                 </Text>
-            </Box>
+            </Flex>
             {props.expanded && (
                 <Box className={classes.details}>
                     <Text c="dimmed">

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

@@ -1,5 +1,6 @@
 import { Trans } from "@lingui/macro"
 import { ActionIcon, Anchor, Tooltip } from "@mantine/core"
+import { Constants } from "app/constants"
 import { markEntry } from "app/entries/thunks"
 import { useAppDispatch } from "app/store"
 import { type Entry } from "app/types"
@@ -19,9 +20,9 @@ export function OpenExternalLink(props: { entry: Entry }) {
 
     return (
         <Anchor href={props.entry.url} target="_blank" rel="noreferrer" onClick={onClick}>
-            <Tooltip label={<Trans>Open link</Trans>}>
+            <Tooltip label={<Trans>Open link</Trans>} openDelay={Constants.tooltip.delay}>
                 <ActionIcon variant="transparent" c="dimmed">
-                    <TbExternalLink />
+                    <TbExternalLink size={18} />
                 </ActionIcon>
             </Tooltip>
         </Anchor>

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

@@ -0,0 +1,29 @@
+import { Trans } from "@lingui/macro"
+import { ActionIcon, Tooltip } from "@mantine/core"
+import { Constants } from "app/constants"
+import { starEntry } from "app/entries/thunks"
+import { useAppDispatch } from "app/store"
+import type { Entry } from "app/types"
+import { TbStar, TbStarFilled } from "react-icons/tb"
+
+export function Star(props: { entry: Entry }) {
+    const dispatch = useAppDispatch()
+    const onClick = (e: React.MouseEvent) => {
+        e.stopPropagation()
+        e.preventDefault()
+        dispatch(
+            starEntry({
+                entry: props.entry,
+                starred: !props.entry.starred,
+            })
+        )
+    }
+
+    return (
+        <Tooltip label={props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>} openDelay={Constants.tooltip.delay}>
+            <ActionIcon variant="transparent" onClick={onClick}>
+                {props.entry.starred ? <TbStarFilled size={18} /> : <TbStar size={18} />}
+            </ActionIcon>
+        </Tooltip>
+    )
+}