select and mark entry as read when scrolling in expanded view

commafeed-client/src/app/constants.ts

@@ -3,7 +3,7 @@ import { DEFAULT_THEME } from "@mantine/core"
 import { IconType } from "react-icons"
 import { FaAt } from "react-icons/fa"
 import { SiBuffer, SiFacebook, SiGmail, SiInstapaper, SiPocket, SiTumblr, SiTwitter } from "react-icons/si"
-import { Category, SharingSettings } from "./types"
+import { Category, Entry, SharingSettings } from "./types"
 
 const categories: { [key: string]: Category } = {
     all: {
@@ -90,10 +90,11 @@ export const Constants = {
         headerHeight: 60,
         sidebarWidth: 350,
         entryMaxWidth: 650,
-        isTopVisible: (div: HTMLDivElement) => div.getBoundingClientRect().top >= Constants.layout.headerHeight,
-        isBottomVisible: (div: HTMLDivElement) => div.getBoundingClientRect().bottom <= window.innerHeight,
+        isTopVisible: (div: HTMLElement) => div.getBoundingClientRect().top >= Constants.layout.headerHeight,
+        isBottomVisible: (div: HTMLElement) => div.getBoundingClientRect().bottom <= window.innerHeight,
     },
     dom: {
         mainScrollAreaId: "main-scroll-area-id",
+        entryId: (entry: Entry) => `entry-id-${entry.id}`,
     },
 }

commafeed-client/src/app/slices/entries.test.ts

@@ -77,6 +77,7 @@ describe("entries", () => {
                     sourceWebsiteUrl: "",
                     entries: [{ id: "3" } as Entry],
                     hasMore: true,
+                    scrollingToEntry: false,
                 },
             },
         })
@@ -100,6 +101,7 @@ describe("entries", () => {
                     sourceWebsiteUrl: "",
                     entries: [{ id: "3", read: false } as Entry, { id: "4", read: false } as Entry],
                     hasMore: true,
+                    scrollingToEntry: false,
                 },
             },
         })
@@ -125,6 +127,7 @@ describe("entries", () => {
                     sourceWebsiteUrl: "",
                     entries: [{ id: "3", read: false } as Entry, { id: "4", read: false } as Entry],
                     hasMore: true,
+                    scrollingToEntry: false,
                 },
             },
         })

commafeed-client/src/app/slices/entries.ts

@@ -3,6 +3,8 @@ import { client } from "app/client"
 import { Constants } from "app/constants"
 import { RootState } from "app/store"
 import { Entries, Entry, MarkRequest } from "app/types"
+import { scrollToWithCallback } from "app/utils"
+import { flushSync } from "react-dom"
 // eslint-disable-next-line import/no-cycle
 import { reloadTree } from "./tree"
 
@@ -23,6 +25,7 @@ interface EntriesState {
     timestamp?: number
     selectedEntryId?: string
     hasMore: boolean
+    scrollingToEntry: boolean
 }
 
 const initialState: EntriesState = {
@@ -34,6 +37,7 @@ const initialState: EntriesState = {
     sourceWebsiteUrl: "",
     entries: [],
     hasMore: true,
+    scrollingToEntry: false,
 }
 
 const getEndpoint = (sourceType: EntrySourceType) => (sourceType === "category" ? client.category.getEntries : client.feed.getEntries)
@@ -128,6 +132,7 @@ export const selectEntry = createAsyncThunk<
         entry: Entry
         expand: boolean
         markAsRead: boolean
+        scrollToEntry: boolean
     },
     { state: RootState }
 >("entries/entry/select", (arg, thunkApi) => {
@@ -135,55 +140,101 @@ export const selectEntry = createAsyncThunk<
     const entry = state.entries.entries.find(e => e.id === arg.entry.id)
     if (!entry) return
 
-    // mark as read if requested
-    if (arg.markAsRead) {
-        thunkApi.dispatch(markEntry({ entry, read: true }))
-    }
+    // flushSync is required because we need the newly selected entry to be expanded
+    // and the previously selected entry to be collapsed to be able to scroll to the right position
+    flushSync(() => {
+        // mark as read if requested
+        if (arg.markAsRead) {
+            thunkApi.dispatch(markEntry({ entry, read: true }))
+        }
 
-    // set entry as selected
-    thunkApi.dispatch(entriesSlice.actions.setSelectedEntry(entry))
+        // set entry as selected
+        thunkApi.dispatch(entriesSlice.actions.setSelectedEntry(entry))
 
-    // expand if requested
-    const previouslySelectedEntry = state.entries.entries.find(e => e.id === state.entries.selectedEntryId)
-    if (previouslySelectedEntry) {
-        thunkApi.dispatch(entriesSlice.actions.setEntryExpanded({ entry: previouslySelectedEntry, expanded: false }))
+        // expand if requested
+        const previouslySelectedEntry = state.entries.entries.find(e => e.id === state.entries.selectedEntryId)
+        if (previouslySelectedEntry) {
+            thunkApi.dispatch(entriesSlice.actions.setEntryExpanded({ entry: previouslySelectedEntry, expanded: false }))
+        }
+        thunkApi.dispatch(entriesSlice.actions.setEntryExpanded({ entry, expanded: arg.expand }))
+    })
+
+    if (arg.scrollToEntry) {
+        const entryElement = document.getElementById(Constants.dom.entryId(entry))
+        if (entryElement) {
+            const scrollSpeed = state.user.settings?.scrollSpeed
+            thunkApi.dispatch(entriesSlice.actions.setScrollingToEntry(true))
+            scrollToEntry(entryElement, scrollSpeed, () => thunkApi.dispatch(entriesSlice.actions.setScrollingToEntry(false)))
+        }
     }
-    thunkApi.dispatch(entriesSlice.actions.setEntryExpanded({ entry, expanded: arg.expand }))
 })
-export const selectPreviousEntry = createAsyncThunk<void, { expand: boolean; markAsRead: boolean }, { state: RootState }>(
-    "entries/entry/selectPrevious",
-    (arg, thunkApi) => {
-        const state = thunkApi.getState()
-        const { entries } = state.entries
-        const previousIndex = entries.findIndex(e => e.id === state.entries.selectedEntryId) - 1
-        if (previousIndex >= 0) {
-            thunkApi.dispatch(
-                selectEntry({
-                    entry: entries[previousIndex],
-                    expand: arg.expand,
-                    markAsRead: arg.markAsRead,
-                })
-            )
-        }
+const scrollToEntry = (entryElement: HTMLElement, scrollSpeed: number | undefined, onScrollEnded: () => void) => {
+    // the entry is entirely visible, no need to scroll
+    if (Constants.layout.isTopVisible(entryElement) && Constants.layout.isBottomVisible(entryElement)) {
+        onScrollEnded()
+        return
     }
-)
-export const selectNextEntry = createAsyncThunk<void, { expand: boolean; markAsRead: boolean }, { state: RootState }>(
-    "entries/entry/selectNext",
-    (arg, thunkApi) => {
-        const state = thunkApi.getState()
-        const { entries } = state.entries
-        const nextIndex = entries.findIndex(e => e.id === state.entries.selectedEntryId) + 1
-        if (nextIndex < entries.length) {
-            thunkApi.dispatch(
-                selectEntry({
-                    entry: entries[nextIndex],
-                    expand: arg.expand,
-                    markAsRead: arg.markAsRead,
-                })
-            )
-        }
+
+    const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
+    if (scrollArea) {
+        scrollToWithCallback({
+            element: scrollArea,
+            options: {
+                // add a small gap between the top of the content and the top of the page
+                top: entryElement.offsetTop - 3,
+                behavior: scrollSpeed && scrollSpeed > 0 ? "smooth" : "auto",
+            },
+            onScrollEnded,
+        })
     }
-)
+}
+
+export const selectPreviousEntry = createAsyncThunk<
+    void,
+    {
+        expand: boolean
+        markAsRead: boolean
+        scrollToEntry: boolean
+    },
+    { state: RootState }
+>("entries/entry/selectPrevious", (arg, thunkApi) => {
+    const state = thunkApi.getState()
+    const { entries } = state.entries
+    const previousIndex = entries.findIndex(e => e.id === state.entries.selectedEntryId) - 1
+    if (previousIndex >= 0) {
+        thunkApi.dispatch(
+            selectEntry({
+                entry: entries[previousIndex],
+                expand: arg.expand,
+                markAsRead: arg.markAsRead,
+                scrollToEntry: arg.scrollToEntry,
+            })
+        )
+    }
+})
+export const selectNextEntry = createAsyncThunk<
+    void,
+    {
+        expand: boolean
+        markAsRead: boolean
+        scrollToEntry: boolean
+    },
+    { state: RootState }
+>("entries/entry/selectNext", (arg, thunkApi) => {
+    const state = thunkApi.getState()
+    const { entries } = state.entries
+    const nextIndex = entries.findIndex(e => e.id === state.entries.selectedEntryId) + 1
+    if (nextIndex < entries.length) {
+        thunkApi.dispatch(
+            selectEntry({
+                entry: entries[nextIndex],
+                expand: arg.expand,
+                markAsRead: arg.markAsRead,
+                scrollToEntry: arg.scrollToEntry,
+            })
+        )
+    }
+})
 
 export const entriesSlice = createSlice({
     name: "entries",
@@ -199,6 +250,9 @@ export const entriesSlice = createSlice({
                     e.expanded = action.payload.expanded
                 })
         },
+        setScrollingToEntry: (state, action: PayloadAction<boolean>) => {
+            state.scrollingToEntry = action.payload
+        },
     },
     extraReducers: builder => {
         builder.addCase(markEntry.pending, (state, action) => {

commafeed-client/src/app/slices/user.ts

@@ -54,6 +54,11 @@ export const changeShowRead = createAsyncThunk<void, boolean, { state: RootState
     if (!settings) return
     client.user.saveSettings({ ...settings, showRead })
 })
+export const changeScrollMarks = createAsyncThunk<void, boolean, { state: RootState }>("settings/scrollMarks", (scrollMarks, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, scrollMarks })
+})
 export const changeSharingSetting = createAsyncThunk<void, { site: keyof SharingSettings; value: boolean }, { state: RootState }>(
     "settings/sharingSetting",
     (sharingSetting, thunkApi) => {
@@ -104,12 +109,22 @@ export const userSlice = createSlice({
             if (!state.settings) return
             state.settings.showRead = action.meta.arg
         })
+        builder.addCase(changeScrollMarks.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.scrollMarks = action.meta.arg
+        })
         builder.addCase(changeSharingSetting.pending, (state, action) => {
             if (!state.settings) return
             state.settings.sharingSettings[action.meta.arg.site] = action.meta.arg.value
         })
         builder.addMatcher(
-            isAnyOf(changeLanguage.fulfilled, changeScrollSpeed.fulfilled, changeShowRead.fulfilled, changeSharingSetting.fulfilled),
+            isAnyOf(
+                changeLanguage.fulfilled,
+                changeScrollSpeed.fulfilled,
+                changeShowRead.fulfilled,
+                changeScrollMarks.fulfilled,
+                changeSharingSetting.fulfilled
+            ),
             () => {
                 showNotification({
                     message: t`Settings saved.`,

commafeed-client/src/app/utils.ts

@@ -25,3 +25,29 @@ export const calculatePlaceholderSize = ({ width, height, maxWidth }: { width?:
     const placeholderHeight = height && width && width > maxWidth ? height * (maxWidth / width) : height
     return { width: placeholderWidth, height: placeholderHeight }
 }
+
+export const scrollToWithCallback = ({
+    element,
+    options,
+    onScrollEnded,
+}: {
+    element: HTMLElement
+    options: ScrollToOptions
+    onScrollEnded: () => void
+}) => {
+    const offset = (options.top ?? 0).toFixed()
+
+    const onScroll = () => {
+        if (element.offsetTop.toFixed() === offset) {
+            element.removeEventListener("scroll", onScroll)
+            onScrollEnded()
+        }
+    }
+
+    element.addEventListener("scroll", onScroll)
+
+    // scrollTo does not trigger if there's nothing to do, trigger it manually
+    onScroll()
+
+    element.scrollTo(options)
+}