add initial support for expanded mode

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

@@ -25,6 +25,7 @@ export function FeedEntries() {
     const entriesTimestamp = useAppSelector(state => state.entries.timestamp)
     const selectedEntryId = useAppSelector(state => state.entries.selectedEntryId)
     const hasMore = useAppSelector(state => state.entries.hasMore)
+    const viewMode = useAppSelector(state => state.user.settings?.viewMode)
     const dispatch = useAppDispatch()
 
     const selectedEntry = entries.find(e => e.id === selectedEntryId)
@@ -151,7 +152,7 @@ export function FeedEntries() {
                         refs.current[e.id] = el!
                     }}
                 >
-                    <FeedEntry entry={e} expanded={!!e.expanded} />
+                    <FeedEntry entry={e} expanded={!!e.expanded || viewMode === "expanded"} />
                 </div>
             ))}
         </InfiniteScroll>

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

@@ -1,9 +1,10 @@
 import { Anchor, Box, createStyles, Divider, Paper } from "@mantine/core"
+import { useDidUpdate } from "@mantine/hooks"
 import { Constants } from "app/constants"
 import { markEntry, selectEntry } from "app/slices/entries"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { Entry } from "app/types"
-import React, { useEffect, useRef } from "react"
+import React, { useRef } from "react"
 import { FeedEntryBody } from "./FeedEntryBody"
 import { FeedEntryFooter } from "./FeedEntryFooter"
 import { FeedEntryHeader } from "./FeedEntryHeader"
@@ -53,8 +54,9 @@ export function FeedEntry(props: FeedEntryProps) {
     }
 
     // scroll to entry when expanded
+    // we use useDidUpdate to avoid scrolling towards all entries during initial load when viewMode is "expanded"
     const ref = useRef<HTMLDivElement>(null)
-    useEffect(() => {
+    useDidUpdate(() => {
         setTimeout(() => {
             if (!ref.current) return
             if (!props.expanded) return

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

@@ -1,16 +1,48 @@
 import { Trans } from "@lingui/macro"
-import { Divider, Menu, useMantineColorScheme } from "@mantine/core"
+import { Box, Divider, Group, Menu, SegmentedControl, SegmentedControlItem, useMantineColorScheme } from "@mantine/core"
 import { redirectToAbout, redirectToAdminUsers, redirectToMetrics, redirectToSettings } from "app/slices/redirect"
+import { changeViewMode } from "app/slices/user"
 import { useAppDispatch, useAppSelector } from "app/store"
+import { ViewMode } from "app/types"
 import { useState } from "react"
-import { TbChartLine, TbHelp, TbMoon, TbPower, TbSettings, TbSun, TbUsers } from "react-icons/tb"
+import { TbChartLine, TbHelp, TbList, TbMoon, TbNotes, TbPower, TbSettings, TbSun, TbUsers } from "react-icons/tb"
 
 interface ProfileMenuProps {
     control: React.ReactElement
 }
 
+interface ViewModeControlItem extends SegmentedControlItem {
+    value: ViewMode
+}
+
+const viewModeData: ViewModeControlItem[] = [
+    {
+        value: "title",
+        label: (
+            <Group>
+                <TbList />
+                <Box ml={6}>
+                    <Trans>Compact</Trans>
+                </Box>
+            </Group>
+        ),
+    },
+    {
+        value: "expanded",
+        label: (
+            <Group>
+                <TbNotes />
+                <Box ml={6}>
+                    <Trans>Expanded</Trans>
+                </Box>
+            </Group>
+        ),
+    },
+]
+
 export function ProfileMenu(props: ProfileMenuProps) {
     const [opened, setOpened] = useState(false)
+    const viewMode = useAppSelector(state => state.user.settings?.viewMode)
     const admin = useAppSelector(state => state.user.profile?.admin)
     const dispatch = useAppDispatch()
     const { colorScheme, toggleColorScheme } = useMantineColorScheme()
@@ -33,9 +65,22 @@ export function ProfileMenu(props: ProfileMenuProps) {
                 >
                     <Trans>Settings</Trans>
                 </Menu.Item>
+
+                <Divider />
+                <Menu.Label>
+                    <Trans>Display</Trans>
+                </Menu.Label>
                 <Menu.Item icon={dark ? <TbMoon /> : <TbSun />} onClick={() => toggleColorScheme()}>
                     <Trans>Theme</Trans>
                 </Menu.Item>
+                <SegmentedControl
+                    fullWidth
+                    orientation="vertical"
+                    data={viewModeData}
+                    value={viewMode}
+                    onChange={e => dispatch(changeViewMode(e as ViewMode))}
+                    mb="xs"
+                />
 
                 {admin && (
                     <>