Add user preference to disable sidebar swipe-to-open on mobile; cleanup migrations + README in prep for long-term fork maintenance

commafeed-client/src/app/types.ts

@@ -285,6 +285,7 @@ export interface Settings {
     unreadCountTitle: boolean
     unreadCountFavicon: boolean
     disablePullToRefresh: boolean
+    disableMobileSwipe: boolean
     infrequentThresholdDays: number
     primaryColor?: string
     sharingSettings: SharingSettings

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,
+    changeDisableMobileSwipe,
     changeDisablePullToRefresh,
     changeEntriesToKeepOnTopWhenScrolling,
     changeExternalLinkIconDisplayMode,
@@ -142,6 +143,10 @@ export const userSlice = createSlice({
             if (!state.settings) return
             state.settings.disablePullToRefresh = action.meta.arg
         })
+        builder.addCase(changeDisableMobileSwipe.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.disableMobileSwipe = action.meta.arg
+        })
         builder.addCase(changeInfrequentThresholdDays.pending, (state, action) => {
             if (!state.settings) return
             state.settings.infrequentThresholdDays = action.meta.arg
@@ -176,6 +181,7 @@ export const userSlice = createSlice({
                 changeUnreadCountTitle.fulfilled,
                 changeUnreadCountFavicon.fulfilled,
                 changeDisablePullToRefresh.fulfilled,
+                changeDisableMobileSwipe.fulfilled,
                 changeInfrequentThresholdDays.fulfilled,
                 changePrimaryColor.fulfilled,
                 changeSharingSetting.fulfilled,

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

@@ -131,6 +131,12 @@ export const changeDisablePullToRefresh = createAppAsyncThunk(
     }
 )
 
+export const changeDisableMobileSwipe = createAppAsyncThunk("settings/disableMobileSwipe", (disableMobileSwipe: boolean, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, disableMobileSwipe })
+})
+
 export const changePrimaryColor = createAppAsyncThunk("settings/primaryColor", (primaryColor: string, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return

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,
+    changeDisableMobileSwipe,
     changeDisablePullToRefresh,
     changeEntriesToKeepOnTopWhenScrolling,
     changeExternalLinkIconDisplayMode,
@@ -45,6 +46,7 @@ export function DisplaySettings() {
     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 disableMobileSwipe = useAppSelector(state => state.user.settings?.disableMobileSwipe)
     const infrequentThresholdDays = useAppSelector(state => state.user.settings?.infrequentThresholdDays)
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     const primaryColor = useAppSelector(state => state.user.settings?.primaryColor) || Constants.theme.defaultPrimaryColor
@@ -145,6 +147,12 @@ export function DisplaySettings() {
                 onChange={async e => await dispatch(changeMobileFooter(e.currentTarget.checked))}
             />
 
+            <Switch
+                label={<Trans>On mobile, disable swipe gesture to open the menu</Trans>}
+                checked={disableMobileSwipe}
+                onChange={async e => await dispatch(changeDisableMobileSwipe(e.currentTarget.checked))}
+            />
+
             <NumberInput
                 label={<Trans>Infrequent posts threshold (days)</Trans>}
                 description={<Trans>Feeds posting less often than this (on average) will appear in the Infrequent view</Trans>}

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

@@ -715,6 +715,10 @@ msgstr "On desktop"
 msgid "On mobile"
 msgstr "On mobile"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, disable swipe gesture to open the menu"
+msgstr "On mobile, disable swipe gesture to open the menu"
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "On mobile, show action buttons at the bottom of the screen"
 msgstr "On mobile, show action buttons at the bottom of the screen"

commafeed-client/src/pages/app/Layout.tsx

@@ -79,6 +79,7 @@ export default function Layout(props: Readonly<LayoutProps>) {
     const webSocketConnected = useAppSelector(state => state.server.webSocketConnected)
     const treeReloadInterval = useAppSelector(state => state.server.serverInfos?.treeReloadInterval)
     const mobileFooter = useAppSelector(state => state.user.settings?.mobileFooter)
+    const disableMobileSwipe = useAppSelector(state => state.user.settings?.disableMobileSwipe)
     const sidebarWidth = useAppSelector(state => state.user.localSettings.sidebarWidth)
     const headerInFooter = mobile && !isBrowserExtensionPopup && mobileFooter
     const dispatch = useAppDispatch()
@@ -164,6 +165,9 @@ export default function Layout(props: Readonly<LayoutProps>) {
 
     const swipeHandlers = useSwipeable({
         onSwiping: e => {
+            if (disableMobileSwipe) {
+                return
+            }
             const threshold = document.documentElement.clientWidth / 6
             if (e.absX > threshold) {
                 dispatch(setMobileMenuOpen(e.dir === "Right"))