add compact headers

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

@@ -6,6 +6,7 @@ import { useAppDispatch, useAppSelector } from "app/store"
 import { Entry } from "app/types"
 import React, { useRef } from "react"
 import { FeedEntryBody } from "./FeedEntryBody"
+import { FeedEntryCompactHeader } from "./FeedEntryCompactHeader"
 import { FeedEntryFooter } from "./FeedEntryFooter"
 import { FeedEntryHeader } from "./FeedEntryHeader"
 
@@ -37,8 +38,10 @@ const useStyles = createStyles((theme, props: FeedEntryProps) => {
 
 export function FeedEntry(props: FeedEntryProps) {
     const { classes } = useStyles(props)
+    const viewMode = useAppSelector(state => state.user.settings?.viewMode)
     const scrollSpeed = useAppSelector(state => state.user.settings?.scrollSpeed)
     const dispatch = useAppDispatch()
+    const compactHeader = viewMode === "title" && !props.expanded
 
     const headerClicked = (e: React.MouseEvent) => {
         if (e.button === 1 || e.ctrlKey || e.metaKey) {
@@ -82,7 +85,8 @@ export function FeedEntry(props: FeedEntryProps) {
                     onAuxClick={headerClicked}
                 >
                     <Box p="xs">
-                        <FeedEntryHeader entry={props.entry} expanded={props.expanded} />
+                        {compactHeader && <FeedEntryCompactHeader entry={props.entry} />}
+                        {!compactHeader && <FeedEntryHeader entry={props.entry} expanded={props.expanded} />}
                     </Box>
                 </Anchor>
                 {props.expanded && (

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

@@ -0,0 +1,56 @@
+import { Box, createStyles, Image, Text } from "@mantine/core"
+import { Entry } from "app/types"
+import { RelativeDate } from "components/RelativeDate"
+import { OnDesktop } from "components/responsive/OnDesktop"
+
+export interface FeedEntryHeaderProps {
+    entry: Entry
+}
+
+const useStyles = createStyles((theme, props: FeedEntryHeaderProps) => ({
+    wrapper: {
+        display: "flex",
+        alignItems: "center",
+        columnGap: "10px",
+    },
+    title: {
+        flexGrow: 1,
+        fontWeight: theme.colorScheme === "light" && !props.entry.read ? "bold" : "inherit",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+    feedName: {
+        width: "145px",
+        minWidth: "145px",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+    date: {
+        whiteSpace: "nowrap",
+    },
+}))
+export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
+    const { classes } = useStyles(props)
+    return (
+        <Box className={classes.wrapper}>
+            <Box>
+                <Image withPlaceholder src={props.entry.iconUrl} alt="feed icon" width={18} height={18} />
+            </Box>
+            <OnDesktop>
+                <Text color="dimmed" className={classes.feedName}>
+                    {props.entry.feedName}
+                </Text>
+            </OnDesktop>
+            <Box className={classes.title}>{props.entry.title}</Box>
+            <OnDesktop>
+                <Box className={classes.date}>
+                    <Text color="dimmed">
+                        <RelativeDate date={props.entry.date} />
+                    </Text>
+                </Box>
+            </OnDesktop>
+        </Box>
+    )
+}