add a setting to completely disable scrolling to selected entry (#1157)

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

@@ -162,9 +162,9 @@ export const selectEntry = createAppAsyncThunk(
         if (arg.scrollToEntry) {
             const entryElement = document.getElementById(Constants.dom.entryId(entry))
             if (entryElement) {
-                const alwaysScrollToEntry = state.user.settings?.alwaysScrollToEntry
+                const scrollMode = state.user.settings?.scrollMode
                 const entryEntirelyVisible = Constants.layout.isTopVisible(entryElement) && Constants.layout.isBottomVisible(entryElement)
-                if (alwaysScrollToEntry || !entryEntirelyVisible) {
+                if (scrollMode === "always" || (scrollMode === "if_needed" && !entryEntirelyVisible)) {
                     const scrollSpeed = state.user.settings?.scrollSpeed
                     thunkApi.dispatch(entriesSlice.actions.setScrollingToEntry(true))
                     scrollToEntry(entryElement, scrollSpeed, () => thunkApi.dispatch(entriesSlice.actions.setScrollingToEntry(false)))

commafeed-client/src/app/types.ts

@@ -205,7 +205,7 @@ export interface Settings {
     customCss?: string
     customJs?: string
     scrollSpeed: number
-    alwaysScrollToEntry: boolean
+    scrollMode: ScrollMode
     markAllAsReadConfirmation: boolean
     customContextMenu: boolean
     mobileFooter: boolean
@@ -289,3 +289,5 @@ export type ReadingMode = "all" | "unread"
 export type ReadingOrder = "asc" | "desc"
 
 export type ViewMode = "title" | "cozy" | "detailed" | "expanded"
+
+export type ScrollMode = "always" | "never" | "if_needed"

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

@@ -3,14 +3,14 @@ import { showNotification } from "@mantine/notifications"
 import { createSlice, isAnyOf } from "@reduxjs/toolkit"
 import { type Settings, type UserModel } from "app/types"
 import {
-    changeAlwaysScrollToEntry,
     changeCustomContextMenu,
     changeLanguage,
     changeMarkAllAsReadConfirmation,
     changeMobileFooter,
     changeReadingMode,
     changeReadingOrder,
     changeScrollMarks,
+    changeScrollMode,
     changeScrollSpeed,
     changeSharingSetting,
     changeShowRead,
@@ -65,9 +65,9 @@ export const userSlice = createSlice({
             if (!state.settings) return
             state.settings.scrollMarks = action.meta.arg
         })
-        builder.addCase(changeAlwaysScrollToEntry.pending, (state, action) => {
+        builder.addCase(changeScrollMode.pending, (state, action) => {
             if (!state.settings) return
-            state.settings.alwaysScrollToEntry = action.meta.arg
+            state.settings.scrollMode = action.meta.arg
         })
         builder.addCase(changeMarkAllAsReadConfirmation.pending, (state, action) => {
             if (!state.settings) return
@@ -91,7 +91,7 @@ export const userSlice = createSlice({
                 changeScrollSpeed.fulfilled,
                 changeShowRead.fulfilled,
                 changeScrollMarks.fulfilled,
-                changeAlwaysScrollToEntry.fulfilled,
+                changeScrollMode.fulfilled,
                 changeMarkAllAsReadConfirmation.fulfilled,
                 changeCustomContextMenu.fulfilled,
                 changeMobileFooter.fulfilled,

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

@@ -1,7 +1,7 @@
 import { createAppAsyncThunk } from "app/async-thunk"
 import { client } from "app/client"
 import { reloadEntries } from "app/entries/thunks"
-import type { ReadingMode, ReadingOrder, SharingSettings } from "app/types"
+import type { ReadingMode, ReadingOrder, ScrollMode, SharingSettings } from "app/types"
 
 export const reloadSettings = createAppAsyncThunk("settings/reload", async () => await client.user.getSettings().then(r => r.data))
 export const reloadProfile = createAppAsyncThunk("profile/reload", async () => await client.user.getProfile().then(r => r.data))
@@ -38,10 +38,10 @@ export const changeScrollMarks = createAppAsyncThunk("settings/scrollMarks", (sc
     if (!settings) return
     client.user.saveSettings({ ...settings, scrollMarks })
 })
-export const changeAlwaysScrollToEntry = createAppAsyncThunk("settings/alwaysScrollToEntry", (alwaysScrollToEntry: boolean, thunkApi) => {
+export const changeScrollMode = createAppAsyncThunk("settings/scrollMode", (scrollMode: ScrollMode, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
-    client.user.saveSettings({ ...settings, alwaysScrollToEntry })
+    client.user.saveSettings({ ...settings, scrollMode })
 })
 export const changeMarkAllAsReadConfirmation = createAppAsyncThunk(
     "settings/markAllAsReadConfirmation",

commafeed-client/src/components/settings/DisplaySettings.tsx

@@ -1,33 +1,40 @@
 import { Trans } from "@lingui/macro"
-import { Divider, Select, SimpleGrid, Stack, Switch } from "@mantine/core"
+import { Divider, Group, Radio, Select, SimpleGrid, Stack, Switch } from "@mantine/core"
 import { Constants } from "app/constants"
 import { useAppDispatch, useAppSelector } from "app/store"
-import { type SharingSettings } from "app/types"
+import { type ScrollMode, type SharingSettings } from "app/types"
 import {
-    changeAlwaysScrollToEntry,
     changeCustomContextMenu,
     changeLanguage,
     changeMarkAllAsReadConfirmation,
     changeMobileFooter,
     changeScrollMarks,
+    changeScrollMode,
     changeScrollSpeed,
     changeSharingSetting,
     changeShowRead,
 } from "app/user/thunks"
 import { locales } from "i18n"
+import { type ReactNode } from "react"
 
 export function DisplaySettings() {
     const language = useAppSelector(state => state.user.settings?.language)
     const scrollSpeed = useAppSelector(state => state.user.settings?.scrollSpeed)
     const showRead = useAppSelector(state => state.user.settings?.showRead)
     const scrollMarks = useAppSelector(state => state.user.settings?.scrollMarks)
-    const alwaysScrollToEntry = useAppSelector(state => state.user.settings?.alwaysScrollToEntry)
+    const scrollMode = useAppSelector(state => state.user.settings?.scrollMode)
     const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
     const customContextMenu = useAppSelector(state => state.user.settings?.customContextMenu)
     const mobileFooter = useAppSelector(state => state.user.settings?.mobileFooter)
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     const dispatch = useAppDispatch()
 
+    const scrollModeOptions: Record<ScrollMode, ReactNode> = {
+        always: <Trans>Always</Trans>,
+        never: <Trans>Never</Trans>,
+        if_needed: <Trans>If the entry doesn't entirely fit on the screen</Trans>,
+    }
+
     return (
         <Stack>
             <Select
@@ -40,30 +47,12 @@ export function DisplaySettings() {
                 onChange={async s => await (s && dispatch(changeLanguage(s)))}
             />
 
-            <Switch
-                label={<Trans>Scroll smoothly when navigating between entries</Trans>}
-                checked={scrollSpeed ? scrollSpeed > 0 : false}
-                onChange={async e => await dispatch(changeScrollSpeed(e.currentTarget.checked))}
-            />
-
-            <Switch
-                label={<Trans>Always scroll selected entry to the top of the page, even if it fits entirely on screen</Trans>}
-                checked={alwaysScrollToEntry}
-                onChange={async e => await dispatch(changeAlwaysScrollToEntry(e.currentTarget.checked))}
-            />
-
             <Switch
                 label={<Trans>Show feeds and categories with no unread entries</Trans>}
                 checked={showRead}
                 onChange={async e => await dispatch(changeShowRead(e.currentTarget.checked))}
             />
 
-            <Switch
-                label={<Trans>In expanded view, scrolling through entries mark them as read</Trans>}
-                checked={scrollMarks}
-                onChange={async e => await dispatch(changeScrollMarks(e.currentTarget.checked))}
-            />
-
             <Switch
                 label={<Trans>Show confirmation when marking all entries as read</Trans>}
                 checked={markAllAsReadConfirmation}
@@ -82,6 +71,32 @@ export function DisplaySettings() {
                 onChange={async e => await dispatch(changeMobileFooter(e.currentTarget.checked))}
             />
 
+            <Divider label={<Trans>Scrolling</Trans>} labelPosition="center" />
+
+            <Radio.Group
+                label={<Trans>Scroll selected entry to the top of the page</Trans>}
+                value={scrollMode}
+                onChange={async value => await dispatch(changeScrollMode(value as ScrollMode))}
+            >
+                <Group mt="xs">
+                    {Object.entries(scrollModeOptions).map(e => (
+                        <Radio key={e[0]} value={e[0]} label={e[1]} />
+                    ))}
+                </Group>
+            </Radio.Group>
+
+            <Switch
+                label={<Trans>Scroll smoothly when navigating between entries</Trans>}
+                checked={scrollSpeed ? scrollSpeed > 0 : false}
+                onChange={async e => await dispatch(changeScrollSpeed(e.currentTarget.checked))}
+            />
+
+            <Switch
+                label={<Trans>In expanded view, scrolling through entries mark them as read</Trans>}
+                checked={scrollMarks}
+                onChange={async e => await dispatch(changeScrollMarks(e.currentTarget.checked))}
+            />
+
             <Divider label={<Trans>Sharing sites</Trans>} labelPosition="center" />
 
             <SimpleGrid cols={2}>

commafeed-client/src/locales/ar/messages.po

@@ -68,7 +68,7 @@ msgid "All"
 msgstr "الكل"
 
 #: src/components/settings/DisplaySettings.tsx
-msgid "Always scroll selected entry to the top of the page, even if it fits entirely on screen"
+msgid "Always"
 msgstr ""
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
@@ -407,6 +407,10 @@ msgstr "المرجع نفسه"
 msgid "If not empty, an expression evaluating to 'true' or 'false'. If false, new entries for this feed will be marked as read automatically."
 msgstr "إذا لم يكن فارغًا ، فسيتم تقييم التعبير إلى \"صواب\" أو \"خطأ\". "
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "If the entry doesn't entirely fit on the screen"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "If you encounter an issue, please report it on the issues page of the GitHub project."
 msgstr "إذا واجهت مشكلة ، فالرجاء الإبلاغ عنها على صفحة مشكلات مشروع GitHub."
@@ -541,6 +545,10 @@ msgstr "الاسم"
 msgid "Navigate to a subscription by entering its name"
 msgstr "انتقل إلى اشتراك بإدخال اسمه"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Never"
+msgstr ""
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "New password"
 msgstr "كلمة مرور جديدة"
@@ -706,10 +714,18 @@ msgstr ""
 msgid "Save"
 msgstr "حفظ"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scroll selected entry to the top of the page"
+msgstr ""
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "Scroll smoothly when navigating between entries"
 msgstr "قم بالتمرير بسلاسة عند التنقل بين الإدخالات"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scrolling"
+msgstr ""
+
 #: src/components/header/Header.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/TreeSearch.tsx

commafeed-client/src/locales/ca/messages.po

@@ -68,7 +68,7 @@ msgid "All"
 msgstr "Tot"
 
 #: src/components/settings/DisplaySettings.tsx
-msgid "Always scroll selected entry to the top of the page, even if it fits entirely on screen"
+msgid "Always"
 msgstr ""
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
@@ -407,6 +407,10 @@ msgstr ""
 msgid "If not empty, an expression evaluating to 'true' or 'false'. If false, new entries for this feed will be marked as read automatically."
 msgstr "Si no està buida, una expressió que s'avalua com a \"vertader\" o \"fals\". "
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "If the entry doesn't entirely fit on the screen"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "If you encounter an issue, please report it on the issues page of the GitHub project."
 msgstr "Si trobeu un problema, informeu-lo a la pàgina de problemes del projecte GitHub."
@@ -541,6 +545,10 @@ msgstr "Nom"
 msgid "Navigate to a subscription by entering its name"
 msgstr "Navegueu a una subscripció introduint-ne el nom"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Never"
+msgstr ""
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "New password"
 msgstr "Contrasenya nova"
@@ -706,10 +714,18 @@ msgstr ""
 msgid "Save"
 msgstr "Desa"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scroll selected entry to the top of the page"
+msgstr ""
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "Scroll smoothly when navigating between entries"
 msgstr "Desplaceu-vos suaument quan navegueu entre entrades"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scrolling"
+msgstr ""
+
 #: src/components/header/Header.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/TreeSearch.tsx

commafeed-client/src/locales/cs/messages.po

@@ -68,7 +68,7 @@ msgid "All"
 msgstr "Všechny"
 
 #: src/components/settings/DisplaySettings.tsx
-msgid "Always scroll selected entry to the top of the page, even if it fits entirely on screen"
+msgid "Always"
 msgstr ""
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
@@ -407,6 +407,10 @@ msgstr ""
 msgid "If not empty, an expression evaluating to 'true' or 'false'. If false, new entries for this feed will be marked as read automatically."
 msgstr "Pokud není prázdný, výraz vyhodnocený jako 'true' nebo 'false'. "
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "If the entry doesn't entirely fit on the screen"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "If you encounter an issue, please report it on the issues page of the GitHub project."
 msgstr "Pokud narazíte na problém, nahlaste jej prosím na stránce problémů projektu GitHub."
@@ -541,6 +545,10 @@ msgstr "Jméno"
 msgid "Navigate to a subscription by entering its name"
 msgstr "Přejděte na předplatné zadáním jeho názvu"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Never"
+msgstr ""
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "New password"
 msgstr "Nové heslo"
@@ -706,10 +714,18 @@ msgstr ""
 msgid "Save"
 msgstr "Uložit"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scroll selected entry to the top of the page"
+msgstr ""
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "Scroll smoothly when navigating between entries"
 msgstr "Posouvejte plynule při navigaci mezi položkami"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scrolling"
+msgstr ""
+
 #: src/components/header/Header.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/TreeSearch.tsx

commafeed-client/src/locales/cy/messages.po

@@ -68,7 +68,7 @@ msgid "All"
 msgstr "Pawb"
 
 #: src/components/settings/DisplaySettings.tsx
-msgid "Always scroll selected entry to the top of the page, even if it fits entirely on screen"
+msgid "Always"
 msgstr ""
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
@@ -407,6 +407,10 @@ msgstr ""
 msgid "If not empty, an expression evaluating to 'true' or 'false'. If false, new entries for this feed will be marked as read automatically."
 msgstr "Os nad yw'n wag, mynegiad sy'n gwerthuso i 'gwir' neu 'anghywir'. "
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "If the entry doesn't entirely fit on the screen"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "If you encounter an issue, please report it on the issues page of the GitHub project."
 msgstr "Os byddwch yn dod ar draws mater, rhowch wybod amdano ar dudalen materion y prosiect GitHub."
@@ -541,6 +545,10 @@ msgstr "Enw"
 msgid "Navigate to a subscription by entering its name"
 msgstr "Llywiwch i danysgrifiad trwy nodi ei enw"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Never"
+msgstr ""
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "New password"
 msgstr "Cyfrinair newydd"
@@ -706,10 +714,18 @@ msgstr ""
 msgid "Save"
 msgstr "Arbed"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scroll selected entry to the top of the page"
+msgstr ""
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "Scroll smoothly when navigating between entries"
 msgstr "Sgroliwch yn esmwyth wrth lywio rhwng cofnodion"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scrolling"
+msgstr ""
+
 #: src/components/header/Header.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/TreeSearch.tsx