add compact headers

commafeed-client/src/app/types.ts

@@ -305,4 +305,4 @@ export type ReadingMode = "all" | "unread"
 
 export type ReadingOrder = "asc" | "desc"
 
-export type ViewMode = "title" | "expanded"
+export type ViewMode = "title" | "cozy" | "expanded"

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

commafeed-client/src/components/header/ProfileMenu.tsx

@@ -5,7 +5,7 @@ import { changeViewMode } from "app/slices/user"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { ViewMode } from "app/types"
 import { useState } from "react"
-import { TbChartLine, TbHelp, TbList, TbMoon, TbNotes, TbPower, TbSettings, TbSun, TbUsers } from "react-icons/tb"
+import { TbChartLine, TbHelp, TbLayoutList, TbList, TbMoon, TbNotes, TbPower, TbSettings, TbSun, TbUsers } from "react-icons/tb"
 
 interface ProfileMenuProps {
     control: React.ReactElement
@@ -15,23 +15,36 @@ interface ViewModeControlItem extends SegmentedControlItem {
     value: ViewMode
 }
 
+const iconSize = 16
+
 const viewModeData: ViewModeControlItem[] = [
     {
         value: "title",
         label: (
             <Group>
-                <TbList />
+                <TbList size={iconSize} />
                 <Box ml={6}>
                     <Trans>Compact</Trans>
                 </Box>
             </Group>
         ),
     },
+    {
+        value: "cozy",
+        label: (
+            <Group>
+                <TbLayoutList size={iconSize} />
+                <Box ml={6}>
+                    <Trans>Cozy</Trans>
+                </Box>
+            </Group>
+        ),
+    },
     {
         value: "expanded",
         label: (
             <Group>
-                <TbNotes />
+                <TbNotes size={iconSize} />
                 <Box ml={6}>
                     <Trans>Expanded</Trans>
                 </Box>
@@ -57,7 +70,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
             <Menu.Target>{props.control}</Menu.Target>
             <Menu.Dropdown>
                 <Menu.Item
-                    icon={<TbSettings />}
+                    icon={<TbSettings size={iconSize} />}
                     onClick={() => {
                         dispatch(redirectToSettings())
                         setOpened(false)
@@ -70,7 +83,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
                 <Menu.Label>
                     <Trans>Display</Trans>
                 </Menu.Label>
-                <Menu.Item icon={dark ? <TbMoon /> : <TbSun />} onClick={() => toggleColorScheme()}>
+                <Menu.Item icon={dark ? <TbMoon size={iconSize} /> : <TbSun size={iconSize} />} onClick={() => toggleColorScheme()}>
                     <Trans>Theme</Trans>
                 </Menu.Item>
                 <SegmentedControl
@@ -89,7 +102,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
                             <Trans>Admin</Trans>
                         </Menu.Label>
                         <Menu.Item
-                            icon={<TbUsers />}
+                            icon={<TbUsers size={iconSize} />}
                             onClick={() => {
                                 dispatch(redirectToAdminUsers())
                                 setOpened(false)
@@ -98,7 +111,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
                             <Trans>Manage users</Trans>
                         </Menu.Item>
                         <Menu.Item
-                            icon={<TbChartLine />}
+                            icon={<TbChartLine size={iconSize} />}
                             onClick={() => {
                                 dispatch(redirectToMetrics())
                                 setOpened(false)
@@ -111,7 +124,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
 
                 <Divider />
                 <Menu.Item
-                    icon={<TbHelp />}
+                    icon={<TbHelp size={iconSize} />}
                     onClick={() => {
                         dispatch(redirectToAbout())
                         setOpened(false)
@@ -119,7 +132,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
                 >
                     <Trans>About</Trans>
                 </Menu.Item>
-                <Menu.Item icon={<TbPower />} onClick={logout}>
+                <Menu.Item icon={<TbPower size={iconSize} />} onClick={logout}>
                     <Trans>Logout</Trans>
                 </Menu.Item>
             </Menu.Dropdown>

commafeed-client/src/locales/en/messages.po

@@ -177,6 +177,10 @@ msgstr "Confirm"
 msgid "Confirm password"
 msgstr "Confirm password"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Cozy"
+msgstr "Cozy"
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "Current password"
 msgstr "Current password"

commafeed-client/src/locales/fr/messages.po

@@ -177,6 +177,10 @@ msgstr "Confirmer"
 msgid "Confirm password"
 msgstr "Confirmer le mot de passe"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Cozy"
+msgstr "Cozy"
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "Current password"
 msgstr "Mot de passe actuel"

commafeed-server/src/main/java/com/commafeed/backend/model/UserSettings.java

@@ -31,7 +31,7 @@ public class UserSettings extends AbstractModel {
 	}
 
 	public enum ViewMode {
-		title, expanded
+		title, cozy, expanded
 	}
 
 	@OneToOne(fetch = FetchType.LAZY)