add a setting to always scroll selected entry to the top of the page, even if it fits entirely on screen (#1088)

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

@@ -45,18 +45,27 @@ const initialState: EntriesState = {
 
 const getEndpoint = (sourceType: EntrySourceType) =>
     sourceType === "category" || sourceType === "tag" ? client.category.getEntries : client.feed.getEntries
-export const loadEntries = createAsyncThunk<Entries, { source: EntrySource; clearSearch: boolean }, { state: RootState }>(
-    "entries/load",
-    async (arg, thunkApi) => {
-        if (arg.clearSearch) thunkApi.dispatch(setSearch(""))
-
-        const state = thunkApi.getState()
-        const endpoint = getEndpoint(arg.source.type)
-        const result = await endpoint(buildGetEntriesPaginatedRequest(state, arg.source, 0))
-        return result.data
+export const loadEntries = createAsyncThunk<
+    Entries,
+    { source: EntrySource; clearSearch: boolean },
+    {
+        state: RootState
     }
-)
-export const loadMoreEntries = createAsyncThunk<Entries, void, { state: RootState }>("entries/loadMore", async (_, thunkApi) => {
+>("entries/load", async (arg, thunkApi) => {
+    if (arg.clearSearch) thunkApi.dispatch(setSearch(""))
+
+    const state = thunkApi.getState()
+    const endpoint = getEndpoint(arg.source.type)
+    const result = await endpoint(buildGetEntriesPaginatedRequest(state, arg.source, 0))
+    return result.data
+})
+export const loadMoreEntries = createAsyncThunk<
+    Entries,
+    void,
+    {
+        state: RootState
+    }
+>("entries/loadMore", async (_, thunkApi) => {
     const state = thunkApi.getState()
     const { source } = state.entries
     const offset =
@@ -74,7 +83,13 @@ const buildGetEntriesPaginatedRequest = (state: RootState, source: EntrySource,
     tag: source.type === "tag" ? source.id : undefined,
     keywords: state.entries.search,
 })
-export const reloadEntries = createAsyncThunk<void, void, { state: RootState }>("entries/reload", async (arg, thunkApi) => {
+export const reloadEntries = createAsyncThunk<
+    void,
+    void,
+    {
+        state: RootState
+    }
+>("entries/reload", async (arg, thunkApi) => {
     const state = thunkApi.getState()
     thunkApi.dispatch(loadEntries({ source: state.entries.source, clearSearch: false }))
 })
@@ -123,15 +138,18 @@ export const markEntriesUpToEntry = createAsyncThunk<void, Entry, { state: RootS
         )
     }
 )
-export const markAllEntries = createAsyncThunk<void, { sourceType: EntrySourceType; req: MarkRequest }, { state: RootState }>(
-    "entries/entry/markAll",
-    async (arg, thunkApi) => {
-        const endpoint = arg.sourceType === "category" ? client.category.markEntries : client.feed.markEntries
-        await endpoint(arg.req)
-        thunkApi.dispatch(reloadEntries())
-        thunkApi.dispatch(reloadTree())
+export const markAllEntries = createAsyncThunk<
+    void,
+    { sourceType: EntrySourceType; req: MarkRequest },
+    {
+        state: RootState
     }
-)
+>("entries/entry/markAll", async (arg, thunkApi) => {
+    const endpoint = arg.sourceType === "category" ? client.category.markEntries : client.feed.markEntries
+    await endpoint(arg.req)
+    thunkApi.dispatch(reloadEntries())
+    thunkApi.dispatch(reloadTree())
+})
 export const starEntry = createAsyncThunk("entries/entry/star", (arg: { entry: Entry; starred: boolean }) => {
     client.entry.star({
         id: arg.entry.id,
@@ -175,19 +193,17 @@ export const selectEntry = createAsyncThunk<
     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)))
+            const alwaysScrollToEntry = state.user.settings?.alwaysScrollToEntry
+            const entryEntirelyVisible = Constants.layout.isTopVisible(entryElement) && Constants.layout.isBottomVisible(entryElement)
+            if (alwaysScrollToEntry || !entryEntirelyVisible) {
+                const scrollSpeed = state.user.settings?.scrollSpeed
+                thunkApi.dispatch(entriesSlice.actions.setScrollingToEntry(true))
+                scrollToEntry(entryElement, scrollSpeed, () => thunkApi.dispatch(entriesSlice.actions.setScrollingToEntry(false)))
+            }
         }
     }
 })
 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
-    }
-
     const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
     if (scrollArea) {
         scrollToWithCallback({
@@ -248,7 +264,13 @@ export const selectNextEntry = createAsyncThunk<
         )
     }
 })
-export const tagEntry = createAsyncThunk<void, TagRequest, { state: RootState }>("entries/entry/tag", async (arg, thunkApi) => {
+export const tagEntry = createAsyncThunk<
+    void,
+    TagRequest,
+    {
+        state: RootState
+    }
+>("entries/entry/tag", async (arg, thunkApi) => {
     await client.entry.tag(arg)
     thunkApi.dispatch(reloadTags())
 })

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

@@ -80,6 +80,17 @@ export const changeScrollMarks = createAsyncThunk<
     if (!settings) return
     client.user.saveSettings({ ...settings, scrollMarks })
 })
+export const changeAlwaysScrollToEntry = createAsyncThunk<
+    void,
+    boolean,
+    {
+        state: RootState
+    }
+>("settings/alwaysScrollToEntry", (alwaysScrollToEntry, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, alwaysScrollToEntry })
+})
 export const changeSharingSetting = createAsyncThunk<
     void,
     { site: keyof SharingSettings; value: boolean },
@@ -136,6 +147,10 @@ export const userSlice = createSlice({
             if (!state.settings) return
             state.settings.scrollMarks = action.meta.arg
         })
+        builder.addCase(changeAlwaysScrollToEntry.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.alwaysScrollToEntry = action.meta.arg
+        })
         builder.addCase(changeSharingSetting.pending, (state, action) => {
             if (!state.settings) return
             state.settings.sharingSettings[action.meta.arg.site] = action.meta.arg.value
@@ -146,6 +161,7 @@ export const userSlice = createSlice({
                 changeScrollSpeed.fulfilled,
                 changeShowRead.fulfilled,
                 changeScrollMarks.fulfilled,
+                changeAlwaysScrollToEntry.fulfilled,
                 changeSharingSetting.fulfilled
             ),
             () => {

commafeed-client/src/app/types.ts

@@ -233,6 +233,7 @@ export interface Settings {
     customCss?: string
     customJs?: string
     scrollSpeed: number
+    alwaysScrollToEntry: boolean
     sharingSettings: SharingSettings
 }