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