make "disable pull to refresh" a setting (#1168)

2025-11-17 08:47:54 +01:00
parent 9c058cf6d6
commit ae78e4691d
42 changed files with 163 additions and 58 deletions
--- a/commafeed-client/src/App.tsx
+++ b/commafeed-client/src/App.tsx
@@ -5,7 +5,6 @@ import { ModalsProvider } from "@mantine/modals"
 import { Notifications } from "@mantine/notifications"
 import type React from "react"
 import { useEffect, useState } from "react"
-import { isSafari } from "react-device-detect"
 import { HashRouter, Navigate, Route, Routes, useNavigate } from "react-router-dom"
 import Tinycon from "tinycon"
 import { Constants } from "@/app/constants"
@@ -200,6 +199,7 @@ export function App() {
    useI18n()
    const unreadCountTitle = useAppSelector(state => state.user.settings?.unreadCountTitle)
    const unreadCountFavicon = useAppSelector(state => state.user.settings?.unreadCountFavicon)
+    const disablePullToRefresh = useAppSelector(state => state.user.settings?.disablePullToRefresh)
    const dispatch = useAppDispatch()

    useEffect(() => {
@@ -213,12 +213,7 @@ export function App() {
            <BrowserExtensionBadgeUnreadCountHandler />
            <CustomJsHandler />
            <CustomCssHandler />
-
-            {/* disable pull-to-refresh as it messes with vertical scrolling
-                        safari behaves weirdly when overscroll-behavior is set to none so we disable it only for other browsers
-                        https://github.com/Athou/commafeed/issues/1168
-                    */}
-            {!isSafari && <DisablePullToRefresh />}
+            <DisablePullToRefresh enabled={disablePullToRefresh} />

            <HashRouter>
                <RedirectHandler />
--- a/commafeed-client/src/app/types.ts
+++ b/commafeed-client/src/app/types.ts
@@ -252,6 +252,7 @@ export interface Settings {
    mobileFooter: boolean
    unreadCountTitle: boolean
    unreadCountFavicon: boolean
+    disablePullToRefresh: boolean
    primaryColor?: string
    sharingSettings: SharingSettings
 }
--- a/commafeed-client/src/app/user/slice.ts
+++ b/commafeed-client/src/app/user/slice.ts
@@ -4,6 +4,7 @@ import { createSlice, isAnyOf, type PayloadAction } from "@reduxjs/toolkit"
 import type { LocalSettings, Settings, UserModel, ViewMode } from "@/app/types"
 import {
    changeCustomContextMenu,
+    changeDisablePullToRefresh,
    changeEntriesToKeepOnTopWhenScrolling,
    changeExternalLinkIconDisplayMode,
    changeLanguage,
@@ -135,6 +136,10 @@ export const userSlice = createSlice({
            if (!state.settings) return
            state.settings.unreadCountFavicon = action.meta.arg
        })
+        builder.addCase(changeDisablePullToRefresh.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.disablePullToRefresh = action.meta.arg
+        })
        builder.addCase(changePrimaryColor.pending, (state, action) => {
            if (!state.settings) return
            state.settings.primaryColor = action.meta.arg
@@ -143,6 +148,7 @@ export const userSlice = createSlice({
            if (!state.settings) return
            state.settings.sharingSettings[action.meta.arg.site] = action.meta.arg.value
        })
+
        builder.addMatcher(
            isAnyOf(
                changeLanguage.fulfilled,
@@ -159,6 +165,7 @@ export const userSlice = createSlice({
                changeMobileFooter.fulfilled,
                changeUnreadCountTitle.fulfilled,
                changeUnreadCountFavicon.fulfilled,
+                changeDisablePullToRefresh.fulfilled,
                changePrimaryColor.fulfilled,
                changeSharingSetting.fulfilled
            ),
--- a/commafeed-client/src/app/user/thunks.ts
+++ b/commafeed-client/src/app/user/thunks.ts
@@ -122,6 +122,15 @@ export const changeUnreadCountFavicon = createAppAsyncThunk("settings/unreadCoun
    client.user.saveSettings({ ...settings, unreadCountFavicon })
 })

+export const changeDisablePullToRefresh = createAppAsyncThunk(
+    "settings/disablePullToRefresh",
+    (disablePullToRefresh: boolean, thunkApi) => {
+        const { settings } = thunkApi.getState().user
+        if (!settings) return
+        client.user.saveSettings({ ...settings, disablePullToRefresh })
+    }
+)
+
 export const changePrimaryColor = createAppAsyncThunk("settings/primaryColor", (primaryColor: string, thunkApi) => {
    const { settings } = thunkApi.getState().user
    if (!settings) return
--- a/commafeed-client/src/components/DisablePullToRefresh.css
+++ b/commafeed-client/src/components/DisablePullToRefresh.css
@@ -1,4 +0,0 @@
-html,
-body {
-    overscroll-behavior: none;
-}
--- a/commafeed-client/src/components/DisablePullToRefresh.tsx
+++ b/commafeed-client/src/components/DisablePullToRefresh.tsx
@@ -1,4 +1,3 @@
-export const DisablePullToRefresh = () => {
-    import("./DisablePullToRefresh.css")
-    return null
+export const DisablePullToRefresh = ({ enabled }: { enabled: boolean | undefined }) => {
+    return enabled ? <style>{`html, body { overscroll-behavior: none; }`}</style> : null
 }
--- a/commafeed-client/src/components/settings/DisplaySettings.tsx
+++ b/commafeed-client/src/components/settings/DisplaySettings.tsx
@@ -9,6 +9,7 @@ import { useAppDispatch, useAppSelector } from "@/app/store"
 import type { IconDisplayMode, ScrollMode, SharingSettings } from "@/app/types"
 import {
    changeCustomContextMenu,
+    changeDisablePullToRefresh,
    changeEntriesToKeepOnTopWhenScrolling,
    changeExternalLinkIconDisplayMode,
    changeLanguage,
@@ -42,6 +43,7 @@ export function DisplaySettings() {
    const mobileFooter = useAppSelector(state => state.user.settings?.mobileFooter)
    const unreadCountTitle = useAppSelector(state => state.user.settings?.unreadCountTitle)
    const unreadCountFavicon = useAppSelector(state => state.user.settings?.unreadCountFavicon)
+    const disablePullToRefresh = useAppSelector(state => state.user.settings?.disablePullToRefresh)
    const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
    const primaryColor = useAppSelector(state => state.user.settings?.primaryColor) || Constants.theme.defaultPrimaryColor
    const { _ } = useLingui()
@@ -211,6 +213,12 @@ export function DisplaySettings() {
                onChange={async e => await dispatch(changeScrollMarks(e.currentTarget.checked))}
            />

+            <Switch
+                label={<Trans>Disable "Pull to refresh" browser behavior</Trans>}
+                checked={disablePullToRefresh}
+                onChange={async e => await dispatch(changeDisablePullToRefresh(e.currentTarget.checked))}
+            />
+
            <Divider label={<Trans>Sharing sites</Trans>} labelPosition="center" />

            <SimpleGrid cols={2}>
--- a/commafeed-client/src/locales/ar/messages.po
+++ b/commafeed-client/src/locales/ar/messages.po
@@ -283,6 +283,10 @@ msgstr "تنازلي"
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/ca/messages.po
+++ b/commafeed-client/src/locales/ca/messages.po
@@ -283,6 +283,10 @@ msgstr "Desc"
 msgid "Detailed"
 msgstr "Detallat"

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/cs/messages.po
+++ b/commafeed-client/src/locales/cs/messages.po
@@ -283,6 +283,10 @@ msgstr ""
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/cy/messages.po
+++ b/commafeed-client/src/locales/cy/messages.po
@@ -283,6 +283,10 @@ msgstr "Rhag"
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/da/messages.po
+++ b/commafeed-client/src/locales/da/messages.po
@@ -283,6 +283,10 @@ msgstr ""
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/de/messages.po
+++ b/commafeed-client/src/locales/de/messages.po
@@ -283,6 +283,10 @@ msgstr "Beschr"
 msgid "Detailed"
 msgstr "Detailliert"

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/en/messages.po
+++ b/commafeed-client/src/locales/en/messages.po
@@ -283,6 +283,10 @@ msgstr "Desc"
 msgid "Detailed"
 msgstr "Detailed"

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr "Disable \"Pull to refresh\" browser behavior"
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/es/messages.po
+++ b/commafeed-client/src/locales/es/messages.po
@@ -284,6 +284,10 @@ msgstr "Desc"
 msgid "Detailed"
 msgstr "Detallado"

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/fa/messages.po
+++ b/commafeed-client/src/locales/fa/messages.po
@@ -283,6 +283,10 @@ msgstr "توصیف"
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/fi/messages.po
+++ b/commafeed-client/src/locales/fi/messages.po
@@ -283,6 +283,10 @@ msgstr ""
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/fr/messages.po
+++ b/commafeed-client/src/locales/fr/messages.po
@@ -283,6 +283,10 @@ msgstr "Descendant"
 msgid "Detailed"
 msgstr "Vue détaillée"

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/gl/messages.po
+++ b/commafeed-client/src/locales/gl/messages.po
@@ -284,6 +284,10 @@ msgstr "Desc"
 msgid "Detailed"
 msgstr "Detallado"

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
@@ -326,7 +330,6 @@ msgid "Enabled"
 msgstr "Activado"

 #: src/components/KeyboardShortcutsHelp.tsx
-#, fuzzy
 msgid "Enter"
 msgstr "Entra"

@@ -431,7 +434,6 @@ msgid "Go to the API documentation."
 msgstr "Ir á documentación da API."

 #: src/pages/app/AboutPage.tsx
-#, fuzzy
 msgid "Goodies"
 msgstr "Agasallos"

@@ -632,7 +634,6 @@ msgid "Next refresh"
 msgstr "Próxima actualización"

 #: src/pages/app/AboutPage.tsx
-#, fuzzy
 msgid "Next unread item bookmarklet"
 msgstr "Seguinte marcador de elementos non lidos"

--- a/commafeed-client/src/locales/hu/messages.po
+++ b/commafeed-client/src/locales/hu/messages.po
@@ -283,6 +283,10 @@ msgstr ""
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/id/messages.po
+++ b/commafeed-client/src/locales/id/messages.po
@@ -283,6 +283,10 @@ msgstr ""
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/it/messages.po
+++ b/commafeed-client/src/locales/it/messages.po
@@ -283,6 +283,10 @@ msgstr ""
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/ja/messages.po
+++ b/commafeed-client/src/locales/ja/messages.po
@@ -283,6 +283,10 @@ msgstr "説明"
 msgid "Detailed"
 msgstr "詳細"

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/ko/messages.po
+++ b/commafeed-client/src/locales/ko/messages.po
@@ -283,6 +283,10 @@ msgstr "설명"
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/ms/messages.po
+++ b/commafeed-client/src/locales/ms/messages.po
@@ -283,6 +283,10 @@ msgstr "Dec"
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/nb/messages.po
+++ b/commafeed-client/src/locales/nb/messages.po
@@ -283,6 +283,10 @@ msgstr ""
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/nl/messages.po
+++ b/commafeed-client/src/locales/nl/messages.po
@@ -283,6 +283,10 @@ msgstr "Beschrijving"
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/nn/messages.po
+++ b/commafeed-client/src/locales/nn/messages.po
@@ -283,6 +283,10 @@ msgstr ""
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/pl/messages.po
+++ b/commafeed-client/src/locales/pl/messages.po
@@ -283,6 +283,10 @@ msgstr "Opis"
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/pt/messages.po
+++ b/commafeed-client/src/locales/pt/messages.po
@@ -283,6 +283,10 @@ msgstr "Desc"
 msgid "Detailed"
 msgstr "Detalhado"

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/ru/messages.po
+++ b/commafeed-client/src/locales/ru/messages.po
@@ -283,6 +283,10 @@ msgstr "По убыванию"
 msgid "Detailed"
 msgstr "Подробно"

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/sk/messages.po
+++ b/commafeed-client/src/locales/sk/messages.po
@@ -283,6 +283,10 @@ msgstr ""
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/sv/messages.po
+++ b/commafeed-client/src/locales/sv/messages.po
@@ -283,6 +283,10 @@ msgstr ""
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/tr/messages.po
+++ b/commafeed-client/src/locales/tr/messages.po
@@ -283,6 +283,10 @@ msgstr "Açılış"
 msgid "Detailed"
 msgstr ""

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
--- a/commafeed-client/src/locales/zh/messages.po
+++ b/commafeed-client/src/locales/zh/messages.po
@@ -283,6 +283,10 @@ msgstr "降序"
 msgid "Detailed"
 msgstr "详细"

+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx