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",
     (

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

@@ -8,6 +8,7 @@ import {
     changeCustomContextMenu,
     changeLanguage,
     changeMarkAllAsReadConfirmation,
+    changeMobileFooter,
     changeScrollMarks,
     changeScrollSpeed,
     changeSharingSetting,
@@ -23,6 +24,7 @@ export function DisplaySettings() {
     const alwaysScrollToEntry = useAppSelector(state => state.user.settings?.alwaysScrollToEntry)
     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()
 
@@ -74,6 +76,12 @@ export function DisplaySettings() {
                 onChange={async e => await dispatch(changeCustomContextMenu(e.currentTarget.checked))}
             />
 
+            <Switch
+                label={<Trans>On mobile, show action buttons at the bottom of the screen</Trans>}
+                checked={mobileFooter}
+                onChange={async e => await dispatch(changeMobileFooter(e.currentTarget.checked))}
+            />
+
             <Divider label={<Trans>Sharing sites</Trans>} labelPosition="center" />
 
             <SimpleGrid cols={2}>

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

@@ -574,6 +574,10 @@ msgstr "لم يتم العثور على شيء"
 msgid "Oldest first"
 msgstr "الأقدم أولا"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "اوووه!"

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

@@ -574,6 +574,10 @@ msgstr "No s'ha trobat res"
 msgid "Oldest first"
 msgstr "el més vell primer"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Vaja!"

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

@@ -574,6 +574,10 @@ msgstr "Nic nebylo nalezeno"
 msgid "Oldest first"
 msgstr "Nejdříve nejstarší"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Jejda!"

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

@@ -574,6 +574,10 @@ msgstr "Dim wedi'i ddarganfod"
 msgid "Oldest first"
 msgstr "Hynaf yn gyntaf"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Wps!"

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

@@ -574,6 +574,10 @@ msgstr "Intet fundet"
 msgid "Oldest first"
 msgstr "Ældst først"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Hovsa!"

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

@@ -574,6 +574,10 @@ msgstr "Nichts gefunden"
 msgid "Oldest first"
 msgstr "Älteste zuerst"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Ups!"

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

@@ -574,6 +574,10 @@ msgstr "Nothing found"
 msgid "Oldest first"
 msgstr "Oldest first"
 
+#: 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"
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Oops!"

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

@@ -574,6 +574,10 @@ msgstr "Nada encontrado"
 msgid "Oldest first"
 msgstr "más antigua primero"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "¡Ups!"

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

@@ -574,6 +574,10 @@ msgstr "چیزی پیدا نشد"
 msgid "Oldest first"
 msgstr "قدیمی ترین اول"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "اوه!"

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

@@ -574,6 +574,10 @@ msgstr "Mitään ei löytynyt"
 msgid "Oldest first"
 msgstr "Vanhin ensin"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Hups!"

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

@@ -574,6 +574,10 @@ msgstr "Aucun résultat"
 msgid "Oldest first"
 msgstr "Du plus ancien au plus récent"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Oups !"

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

@@ -574,6 +574,10 @@ msgstr "Non se atopou nada"
 msgid "Oldest first"
 msgstr "O máis vello primeiro"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Vaia!"

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

@@ -574,6 +574,10 @@ msgstr "Semmi sem található"
 msgid "Oldest first"
 msgstr "A legidősebb első"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Hoppá!"

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

@@ -574,6 +574,10 @@ msgstr "Tidak ada yang ditemukan"
 msgid "Oldest first"
 msgstr "Tertua dulu"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Ups!"

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

@@ -574,6 +574,10 @@ msgstr "Non è stato trovato nulla"
 msgid "Oldest first"
 msgstr "Il più vecchio prima"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Ops!"

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

@@ -574,6 +574,10 @@ msgstr "何も見つかりませんでした"
 msgid "Oldest first"
 msgstr "古い順"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "おっと！"

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

@@ -574,6 +574,10 @@ msgstr "아무것도 찾을 수 없습니다"
 msgid "Oldest first"
 msgstr "가장 오래된 것부터"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "앗!"

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

@@ -574,6 +574,10 @@ msgstr "Tiada apa-apa dijumpai"
 msgid "Oldest first"
 msgstr "Tertua dahulu"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Aduh!"

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

@@ -574,6 +574,10 @@ msgstr "Ingenting funnet"
 msgid "Oldest first"
 msgstr "Eldste først"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Beklager!"

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

@@ -574,6 +574,10 @@ msgstr "Niets gevonden"
 msgid "Oldest first"
 msgstr "Oudste eerst"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Oeps!"

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

@@ -574,6 +574,10 @@ msgstr "Ingenting funnet"
 msgid "Oldest first"
 msgstr "Eldste først"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Beklager!"

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

@@ -574,6 +574,10 @@ msgstr "Nic nie znaleziono"
 msgid "Oldest first"
 msgstr "Najstarsze jako pierwsze"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Ups!"

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

@@ -574,6 +574,10 @@ msgstr "Nada encontrado"
 msgid "Oldest first"
 msgstr "Mais antigo primeiro"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Opa!"

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

@@ -574,6 +574,10 @@ msgstr "Ничего не найдено"
 msgid "Oldest first"
 msgstr "Сначала самые старые"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Ой!"

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

@@ -574,6 +574,10 @@ msgstr "Nič sa nenašlo"
 msgid "Oldest first"
 msgstr "Najprv najstarší"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Ojoj!"

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

@@ -574,6 +574,10 @@ msgstr "Inget hittades"
 msgid "Oldest first"
 msgstr "Äldst först"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Hoppsan!"

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

@@ -574,6 +574,10 @@ msgstr "Hiçbir şey bulunamadı"
 msgid "Oldest first"
 msgstr "Önce en eski"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Hata!"

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

@@ -574,6 +574,10 @@ msgstr "没有找到"
 msgid "Oldest first"
 msgstr "最早的优先"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "哎呀！"

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

@@ -13,6 +13,8 @@ import { Logo } from "components/Logo"
 import { OnDesktop } from "components/responsive/OnDesktop"
 import { OnMobile } from "components/responsive/OnMobile"
 import { useAppLoading } from "hooks/useAppLoading"
+import { useBrowserExtension } from "hooks/useBrowserExtension"
+import { useMobile } from "hooks/useMobile"
 import { useWebSocket } from "hooks/useWebSocket"
 import { LoadingPage } from "pages/LoadingPage"
 import { type ReactNode, Suspense, useEffect } from "react"
@@ -60,6 +62,8 @@ const useStyles = tss
 
 export default function Layout(props: LayoutProps) {
     const theme = useMantineTheme()
+    const mobile = useMobile()
+    const { isBrowserExtensionPopup } = useBrowserExtension()
     const [sidebarWidth, setSidebarWidth] = useLocalStorage("sidebar-width", 350)
     const sidebarPadding = theme.spacing.xs
     const { classes } = useStyles({
@@ -71,6 +75,8 @@ export default function Layout(props: LayoutProps) {
     const mobileMenuOpen = useAppSelector(state => state.tree.mobileMenuOpen)
     const webSocketConnected = useAppSelector(state => state.server.webSocketConnected)
     const treeReloadInterval = useAppSelector(state => state.server.serverInfos?.treeReloadInterval)
+    const mobileFooter = useAppSelector(state => state.user.settings?.mobileFooter)
+    const headerInFooter = mobile && !isBrowserExtensionPopup && mobileFooter
     const dispatch = useAppDispatch()
     useWebSocket()
 
@@ -112,6 +118,39 @@ export default function Layout(props: LayoutProps) {
         </ActionIcon>
     )
 
+    const header = (
+        <>
+            <OnMobile>
+                {mobileMenuOpen && (
+                    <Group justify="space-between" p="md">
+                        <Box>{burger}</Box>
+                        <Box>
+                            <LogoAndTitle />
+                        </Box>
+                        <Box>{addButton}</Box>
+                    </Group>
+                )}
+                {!mobileMenuOpen && (
+                    <Group p="md">
+                        <Box>{burger}</Box>
+                        <Box style={{ flexGrow: 1 }}>{props.header}</Box>
+                    </Group>
+                )}
+            </OnMobile>
+            <OnDesktop>
+                <Group p="md">
+                    <Group justify="space-between" style={{ width: sidebarWidth - 16 }}>
+                        <Box>
+                            <LogoAndTitle />
+                        </Box>
+                        <Box>{addButton}</Box>
+                    </Group>
+                    <Box style={{ flexGrow: 1 }}>{props.header}</Box>
+                </Group>
+            </OnDesktop>
+        </>
+    )
+
     const swipeHandlers = useSwipeable({
         onSwiping: e => {
             const threshold = document.documentElement.clientWidth / 6
@@ -125,7 +164,8 @@ export default function Layout(props: LayoutProps) {
     return (
         <Box {...swipeHandlers}>
             <AppShell
-                header={{ height: Constants.layout.headerHeight }}
+                header={{ height: Constants.layout.headerHeight, collapsed: headerInFooter }}
+                footer={{ height: Constants.layout.headerHeight, collapsed: !headerInFooter }}
                 navbar={{
                     width: sidebarWidth,
                     breakpoint: Constants.layout.mobileBreakpoint,
@@ -133,36 +173,8 @@ export default function Layout(props: LayoutProps) {
                 }}
                 padding={{ base: 6, [Constants.layout.mobileBreakpointName]: "md" }}
             >
-                <AppShell.Header id={Constants.dom.headerId}>
+                <AppShell.Header id={Constants.dom.headerId}>{header}</AppShell.Header>
-                    <OnMobile>
+                <AppShell.Footer id={Constants.dom.footerId}>{header}</AppShell.Footer>
-                        {mobileMenuOpen && (
-                            <Group justify="space-between" p="md">
-                                <Box>{burger}</Box>
-                                <Box>
-                                    <LogoAndTitle />
-                                </Box>
-                                <Box>{addButton}</Box>
-                            </Group>
-                        )}
-                        {!mobileMenuOpen && (
-                            <Group p="md">
-                                <Box>{burger}</Box>
-                                <Box style={{ flexGrow: 1 }}>{props.header}</Box>
-                            </Group>
-                        )}
-                    </OnMobile>
-                    <OnDesktop>
-                        <Group p="md">
-                            <Group justify="space-between" style={{ width: sidebarWidth - 16 }}>
-                                <Box>
-                                    <LogoAndTitle />
-                                </Box>
-                                <Box>{addButton}</Box>
-                            </Group>
-                            <Box style={{ flexGrow: 1 }}>{props.header}</Box>
-                        </Group>
-                    </OnDesktop>
-                </AppShell.Header>
                 <AppShell.Navbar id="sidebar" p={sidebarPadding}>
                     <AppShell.Section grow component={ScrollArea} mx="-sm" px="sm">
                         <Box className={classes.sidebarContent}>{props.sidebar}</Box>

commafeed-server/src/main/java/com/commafeed/backend/model/UserSettings.java

@@ -69,6 +69,7 @@ public class UserSettings extends AbstractModel {
 	private boolean alwaysScrollToEntry;
 	private boolean markAllAsReadConfirmation;
 	private boolean customContextMenu;
+	private boolean mobileFooter;
 
 	private boolean email;
 	private boolean gmail;

commafeed-server/src/main/java/com/commafeed/frontend/model/Settings.java

@@ -52,6 +52,9 @@ public class Settings implements Serializable {
 	@Schema(description = "show commafeed's own context menu on right click", requiredMode = RequiredMode.REQUIRED)
 	private boolean customContextMenu;
 
+	@Schema(description = "on mobile, show action buttons at the bottom of the screen", requiredMode = RequiredMode.REQUIRED)
+	private boolean mobileFooter;
+
 	@Schema(description = "sharing settings", requiredMode = RequiredMode.REQUIRED)
 	private SharingSettings sharingSettings = new SharingSettings();
 

commafeed-server/src/main/java/com/commafeed/frontend/resource/UserREST.java

@@ -111,6 +111,7 @@ public class UserREST {
 			s.setAlwaysScrollToEntry(settings.isAlwaysScrollToEntry());
 			s.setMarkAllAsReadConfirmation(settings.isMarkAllAsReadConfirmation());
 			s.setCustomContextMenu(settings.isCustomContextMenu());
+			s.setMobileFooter(settings.isMobileFooter());
 		} else {
 			s.setReadingMode(ReadingMode.unread.name());
 			s.setReadingOrder(ReadingOrder.desc.name());
@@ -131,6 +132,7 @@ public class UserREST {
 			s.setAlwaysScrollToEntry(false);
 			s.setMarkAllAsReadConfirmation(true);
 			s.setCustomContextMenu(true);
+			s.setMobileFooter(false);
 		}
 		return Response.ok(s).build();
 	}
@@ -159,6 +161,7 @@ public class UserREST {
 		s.setAlwaysScrollToEntry(settings.isAlwaysScrollToEntry());
 		s.setMarkAllAsReadConfirmation(settings.isMarkAllAsReadConfirmation());
 		s.setCustomContextMenu(settings.isCustomContextMenu());
+		s.setMobileFooter(settings.isMobileFooter());
 
 		s.setEmail(settings.getSharingSettings().isEmail());
 		s.setGmail(settings.getSharingSettings().isGmail());

commafeed-server/src/main/resources/changelogs/db.changelog-4.2.xml

@@ -18,4 +18,12 @@
 		<modifyDataType tableName="USERS" columnName="recoverPasswordTokenDate" newDataType="${timestamp_type}" />
 	</changeSet>
 
+	<changeSet id="mobile-footer-setting" author="athou">
+		<addColumn tableName="USERSETTINGS">
+			<column name="mobileFooter" type="BOOLEAN" defaultValueBoolean="false">
+				<constraints nullable="false" />
+			</column>
+		</addColumn>
+	</changeSet>
+
 </databaseChangeLog>