add an even more compact entry layout

commafeed-client/package-lock.json

@@ -20,6 +20,7 @@
         "@mantine/modals": "^5.10.3",
         "@mantine/notifications": "^5.10.3",
         "@mantine/spotlight": "^5.10.3",
+        "@mantine/styles": "^5.10.3",
         "@reduxjs/toolkit": "^1.9.2",
         "axios": "^1.3.2",
         "dayjs": "^1.11.7",

commafeed-client/package.json

@@ -28,6 +28,7 @@
     "@mantine/modals": "^5.10.3",
     "@mantine/notifications": "^5.10.3",
     "@mantine/spotlight": "^5.10.3",
+    "@mantine/styles": "^5.10.3",
     "@reduxjs/toolkit": "^1.9.2",
     "axios": "^1.3.2",
     "dayjs": "^1.11.7",

commafeed-client/src/app/types.ts

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

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

@@ -2,9 +2,10 @@ import { Anchor, Box, createStyles, Divider, Paper } from "@mantine/core"
 import { Constants } from "app/constants"
 import { markEntry } from "app/slices/entries"
 import { useAppDispatch, useAppSelector } from "app/store"
-import { Entry } from "app/types"
+import { Entry, ViewMode } from "app/types"
 import React from "react"
 import { useSwipeable } from "react-swipeable"
+import { MantineNumberSize } from "@mantine/styles"
 import { FeedEntryBody } from "./FeedEntryBody"
 import { FeedEntryCompactHeader } from "./FeedEntryCompactHeader"
 import { FeedEntryContextMenu, useFeedEntryContextMenu } from "./FeedEntryContextMenu"
@@ -18,16 +19,18 @@ interface FeedEntryProps {
     onHeaderClick: (e: React.MouseEvent) => void
 }
 
-const useStyles = createStyles((theme, props: FeedEntryProps & { compact: boolean }) => {
+const useStyles = createStyles((theme, props: FeedEntryProps & { viewMode?: ViewMode }) => {
     let backgroundColor
     if (theme.colorScheme === "dark") backgroundColor = props.entry.read ? "inherit" : theme.colors.dark[5]
     else backgroundColor = props.entry.read && !props.expanded ? theme.colors.gray[0] : "inherit"
 
     let marginY = theme.spacing.xs
-    if (props.compact) marginY = 6
+    if (props.viewMode === "title") marginY = 2
+    else if (props.viewMode === "cozy") marginY = 6
 
     let mobileMarginY = 6
-    if (props.compact) mobileMarginY = 4
+    if (props.viewMode === "title") mobileMarginY = 2
+    else if (props.viewMode === "cozy") mobileMarginY = 4
 
     const styles = {
         paper: {
@@ -53,10 +56,7 @@ const useStyles = createStyles((theme, props: FeedEntryProps & { compact: boolea
 
 export function FeedEntry(props: FeedEntryProps) {
     const viewMode = useAppSelector(state => state.user.settings?.viewMode)
-    const compact = viewMode === "title"
+    const { classes } = useStyles({ ...props, viewMode })
-    const compactHeader = compact && !props.expanded
-
-    const { classes } = useStyles({ ...props, compact })
 
     const dispatch = useAppDispatch()
 
@@ -66,9 +66,15 @@ export function FeedEntry(props: FeedEntryProps) {
 
     const { onContextMenu } = useFeedEntryContextMenu(props.entry)
 
-    const spacing = compact ? 8 : "xs"
+    let padding: MantineNumberSize = "xs"
-    const borderRadius = compact ? "xs" : "sm"
+    if (viewMode === "title") padding = 4
+    else if (viewMode === "cozy") padding = 8
 
+    let borderRadius: MantineNumberSize = "sm"
+    if (viewMode === "title") borderRadius = 0
+    else if (viewMode === "cozy") borderRadius = "xs"
+
+    const compactHeader = !props.expanded && (viewMode === "title" || viewMode === "cozy")
     return (
         <Paper withBorder radius={borderRadius} className={classes.paper}>
             <Anchor
@@ -80,17 +86,17 @@ export function FeedEntry(props: FeedEntryProps) {
                 onAuxClick={props.onHeaderClick}
                 onContextMenu={onContextMenu}
             >
-                <Box p={spacing} {...swipeHandlers}>
+                <Box p={padding} {...swipeHandlers}>
                     {compactHeader && <FeedEntryCompactHeader entry={props.entry} />}
                     {!compactHeader && <FeedEntryHeader entry={props.entry} expanded={props.expanded} />}
                 </Box>
             </Anchor>
             {props.expanded && (
-                <Box px={spacing} pb={spacing}>
+                <Box px={padding} pb={padding}>
                     <Box className={classes.body} sx={{ direction: props.entry.rtl ? "rtl" : "ltr" }}>
                         <FeedEntryBody entry={props.entry} />
                     </Box>
-                    <Divider variant="dashed" my={spacing} />
+                    <Divider variant="dashed" my={padding} />
                     <FeedEntryFooter entry={props.entry} />
                 </Box>
             )}

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

@@ -12,6 +12,7 @@ import {
     TbHelp,
     TbLayoutList,
     TbList,
+    TbListDetails,
     TbMoon,
     TbNotes,
     TbPower,
@@ -54,6 +55,17 @@ const viewModeData: ViewModeControlItem[] = [
             </Group>
         ),
     },
+    {
+        value: "detailed",
+        label: (
+            <Group>
+                <TbListDetails size={iconSize} />
+                <Box ml={6}>
+                    <Trans>Detailed</Trans>
+                </Box>
+            </Group>
+        ),
+    },
     {
         value: "expanded",
         label: (

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

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