Revert "feat(large): Unify Persistent Footers for Mobile Optimization" (#9426)

Author: arii

app/client/connect/ConnectView.tsx

@@ -11,6 +11,7 @@ import BatteryStdIcon from '@mui/icons-material/BatteryStd'
 import BatteryAlertIcon from '@mui/icons-material/BatteryAlert'
 import BluetoothDisabledIcon from '@mui/icons-material/BluetoothDisabled'
 import HrTile from '../../../components/HrTile'
+import BottomNavBar from '../../../components/BottomNavBar'
 import WorkoutSummary from './WorkoutSummary'
 import UserSettings from './UserSettings'
 import { SignalQualityIndicator } from './SignalQualityIndicator'
@@ -117,6 +118,7 @@ export default function ConnectView({
           Edge, or Bluefy (on iOS).
         </Alert>
         <ResetSection onReset={handleFullReset} isResetting={isResetting} />
+        <BottomNavBar />
       </Container>
     )
   }
@@ -283,6 +285,7 @@ export default function ConnectView({
 
         <ResetSection onReset={handleFullReset} isResetting={isResetting} />
       </Container>
+      <BottomNavBar />
     </>
   )
 }

app/client/mock/page.tsx

@@ -10,6 +10,7 @@ import Grid from '@mui/material/Grid'
 import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
 import { useCallback, useEffect, useState } from 'react'
+import BottomNavBar from '../../../components/BottomNavBar'
 import { useWebSocket } from '@/context/WebSocketContext'
 import {
   HrmInputMessage,
@@ -334,6 +335,7 @@ export default function MockPage() {
           </Box>
         </Card>
       </Container>
+      <BottomNavBar />
     </>
   )
 }

app/main.tsx

@@ -2,8 +2,7 @@
 
 import { AnimatePresence, motion } from 'framer-motion'
 import { usePathname } from 'next/navigation'
-import Box from '@mui/material/Box'
-import CombinedFooter from '@/components/CombinedFooter'
+import BottomNavBar from '@/components/BottomNavBar'
 import ErrorBoundary from '@/components/ErrorBoundary'
 import ErrorFallback from '@/components/ErrorFallback'
 import Footer from '@/components/Footer'
@@ -18,7 +17,6 @@ import { UserSettingsProvider } from '@/context/UserSettingsContext'
 
 export default function Main({ children }: { children: React.ReactNode }) {
   const pathname = usePathname()
-
   return (
     <ErrorBoundary fallback={<ErrorFallback />}>
       <ErrorProvider>
@@ -28,34 +26,27 @@ export default function Main({ children }: { children: React.ReactNode }) {
               <UserSettingsProvider>
                 <TimerSoundProvider>
                   <AnimatePresence mode="wait">
-                    <Box
-                      component={motion.main}
+                    <motion.main
                       key={pathname}
                       variants={pageVariants}
                       initial="initial"
                       animate="in"
                       exit="out"
                       data-testid="main-content-layout"
                       role="main"
-                      sx={{
-                        pb: 'var(--footer-height, 56px)',
-                        minHeight: '100vh',
-                        display: 'flex',
-                        flexDirection: 'column',
-                      }}
                     >
-                      <Box sx={{ flex: 1 }}>{children}</Box>
-                      <Footer />
-                    </Box>
+                      {children}
+                    </motion.main>
                   </AnimatePresence>
-                  <CombinedFooter />
                 </TimerSoundProvider>
               </UserSettingsProvider>
             </Providers>
           </NotificationProvider>
           <LoadingIndicator />
         </LoadingProvider>
       </ErrorProvider>
+      <Footer />
+      <BottomNavBar />
     </ErrorBoundary>
   )
 }

components/BottomNavBar.tsx

@@ -58,8 +58,12 @@ export default function BottomNavBar() {
       showLabels
       sx={{
         width: '100%',
-        position: 'static',
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
         zIndex: 1000,
+        boxShadow: '0px -2px 4px rgba(0, 0, 0, 0.1)',
       }}
     >
       {NAV_ITEMS.map((item, index) => (

components/CombinedFooter.tsx

@@ -11,6 +11,26 @@ import HrmConnectionPanel from '@/components/HrmConnectionPanel'
 import TimerDisplay from '@/components/TimerDisplay'
 import { useAudio } from '@/hooks/useAudio'
 
+// Dynamically import SpotifyDisplay with SSR disabled.
+const SpotifyDisplay = dynamic(() => import('@/components/SpotifyDisplay'), {
+  ssr: false,
+  loading: () => (
+    <Box
+      sx={{
+        position: 'fixed',
+        bottom: 56,
+        left: 0,
+        right: 0,
+        zIndex: 1100,
+        width: '100%',
+        minHeight: '64px',
+      }}
+    >
+      <DashboardSectionLoadingSkeleton height="64px" />
+    </Box>
+  ),
+})
+
 const TestErrorTrigger = dynamic(() => import('./TestErrorTrigger'), {
   ssr: false,
 })
@@ -84,7 +104,9 @@ const DashboardClient = ({
         }}
       >
         <Box sx={mainGridStyles}>
-          <TimerDisplay />
+          <Box sx={{ height: '100%' }}>
+            <TimerDisplay />
+          </Box>
           <HrmConnectionPanel />
         </Box>
         <Box sx={{ width: '100%', mt: 2 }}>
@@ -111,6 +133,8 @@ const DashboardClient = ({
           )}
         </Box>
       </Container>
+
+      <SpotifyDisplay />
     </Box>
   )
 }

components/DashboardClient.tsx

@@ -27,6 +27,7 @@ const HrmConnectionPanel = () => {
         display: 'flex',
         flexWrap: 'wrap',
         gap: 2,
+        height: '100%',
       }}
     >
       {isLoading || tileData.length === 0 ? (
@@ -38,7 +39,7 @@ const HrmConnectionPanel = () => {
               justifyContent: 'center',
               alignItems: 'center',
               width: { xs: '100%', sm: 'calc(50% - 8px)' },
-              minHeight: 300,
+              height: '100%', // Ensure the container fills the grid cell
               gap: 2,
               p: 2,
               border: 1,