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

commafeed-client/src/components/DisablePullToRefresh.css

@@ -1,4 +0,0 @@
-html,
-body {
-    overscroll-behavior: none;
-}

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
 }

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}>