show footer on the bottom of the page on mobile (#1121)

commafeed-client/src/app/constants.ts

@@ -93,10 +93,14 @@ export const Constants = {
             const header = document.getElementById(Constants.dom.headerId)?.getBoundingClientRect()
             return div.getBoundingClientRect().top >= (header?.bottom ?? 0)
         },
-        isBottomVisible: (div: HTMLElement) => div.getBoundingClientRect().bottom <= window.innerHeight,
+        isBottomVisible: (div: HTMLElement) => {
+            const footer = document.getElementById(Constants.dom.footerId)?.getBoundingClientRect()
+            return div.getBoundingClientRect().bottom <= (footer?.top ?? window.innerHeight)
+        },
     },
     dom: {
         headerId: "header",
+        footerId: "footer",
         entryId: (entry: Entry) => `entry-id-${entry.id}`,
         entryContextMenuId: (entry: Entry) => entry.id,
     },

commafeed-client/src/app/types.ts

@@ -208,6 +208,7 @@ export interface Settings {
     alwaysScrollToEntry: boolean
     markAllAsReadConfirmation: boolean
     customContextMenu: boolean
+    mobileFooter: boolean
     sharingSettings: SharingSettings
 }
 

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

@@ -7,6 +7,7 @@ import {
     changeCustomContextMenu,
     changeLanguage,
     changeMarkAllAsReadConfirmation,
+    changeMobileFooter,
     changeReadingMode,
     changeReadingOrder,
     changeScrollMarks,
@@ -76,6 +77,10 @@ export const userSlice = createSlice({
             if (!state.settings) return
             state.settings.customContextMenu = action.meta.arg
         })
+        builder.addCase(changeMobileFooter.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.mobileFooter = action.meta.arg
+        })
         builder.addCase(changeSharingSetting.pending, (state, action) => {
             if (!state.settings) return
             state.settings.sharingSettings[action.meta.arg.site] = action.meta.arg.value
@@ -89,6 +94,7 @@ export const userSlice = createSlice({
                 changeAlwaysScrollToEntry.fulfilled,
                 changeMarkAllAsReadConfirmation.fulfilled,
                 changeCustomContextMenu.fulfilled,
+                changeMobileFooter.fulfilled,
                 changeSharingSetting.fulfilled
             ),
             () => {

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

@@ -56,6 +56,11 @@ export const changeCustomContextMenu = createAppAsyncThunk("settings/customConte
     if (!settings) return
     client.user.saveSettings({ ...settings, customContextMenu })
 })
+export const changeMobileFooter = createAppAsyncThunk("settings/mobileFooter", (mobileFooter: boolean, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, mobileFooter })
+})
 export const changeSharingSetting = createAppAsyncThunk(
     "settings/sharingSetting",
     (