feat: implement mobile navigation gestures and redesign nav bar

This commit enhances the mobile user experience by:

1.  Creating a reusable `useSwipeGesture` hook to detect horizontal swipes.
2.  Integrating swipe gestures into the Control Panel, allowing users to navigate between the main dashboard, controls, and connection pages with swipes.
3.  Redesigning the `BottomNavBar` with a larger height (72px), a modern "glassmorphism" background effect, and an animated indicator for the active tab to improve usability and visual appeal.

Author: google-labs-jules[bot]

app/client/control/ControlPanel.tsx

@@ -12,15 +12,31 @@ import Head from 'next/head'
 import { useEffect } from 'react'
 import { useWebSocket } from '@/context/WebSocketContext'
 import dynamic from 'next/dynamic'
+import { useRouter } from 'next/navigation'
+import { useSwipeGesture } from '@/hooks/useSwipeGesture'
 
 const SpotifyControls = dynamic(
   () => import('./components/SpotifyControls'),
-  { loading: () => <Skeleton variant="rectangular" height={280} sx={{ borderRadius: 1, mb: 2 }}/> }
+  {
+    loading: () => (
+      <Skeleton
+        variant="rectangular"
+        height={280}
+        sx={{ borderRadius: 1, mb: 2 }}
+      />
+    ),
+  }
 )
 import TimerControls from './components/TimerControls'
 
 const ControlPanel = () => {
   const { connectionStatus, connect } = useWebSocket()
+  const router = useRouter()
+
+  const swipeHandlers = useSwipeGesture({
+    onSwipeLeft: () => router.push('/client/connect'),
+    onSwipeRight: () => router.push('/'),
+  })
 
   // Reconnect on page visibility
   useEffect(() => {
@@ -70,6 +86,7 @@ const ControlPanel = () => {
           minHeight: '100vh',
           backgroundColor: 'background.default',
         }}
+        {...swipeHandlers}
       >
         {/* Connection Status */}
         <Box sx={{ mb: 2, textAlign: 'center' }}>

components/BottomNavBar.tsx

@@ -5,71 +5,90 @@ import FavoriteIcon from '@mui/icons-material/Favorite'
 import SettingsIcon from '@mui/icons-material/Settings'
 import BottomNavigation from '@mui/material/BottomNavigation'
 import BottomNavigationAction from '@mui/material/BottomNavigationAction'
+import Box from '@mui/material/Box'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+
+const navItems = [
+  { href: '/', label: 'Dashboard', icon: <DashboardIcon /> },
+  { href: '/client/control', label: 'Controls', icon: <SettingsIcon /> },
+  { href: '/client/connect', label: 'Connect', icon: <FavoriteIcon /> },
+]
 
 export default function BottomNavBar() {
   const pathname = usePathname()
-  const [value, setValue] = useState(() => {
-    if (pathname === '/client/control') {
-      return 1
-    } else if (pathname === '/client/connect') {
-      return 2
+  const [value, setValue] = useState(0)
+
+  // Update the active tab when the path changes
+  useEffect(() => {
+    const activeIndex = navItems.findIndex((item) => item.href === pathname)
+    if (activeIndex !== -1) {
+      setValue(activeIndex)
     }
-    return 0 // Default to Dashboard
-  })
+  }, [pathname])
 
   return (
-    <BottomNavigation
-      value={value}
-      onChange={(_event, newValue) => {
-        setValue(newValue)
-      }}
-      showLabels
-      sx={{
-        width: '100%',
-        position: 'fixed',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        zIndex: 1000,
-        boxShadow: '0px -2px 4px rgba(0, 0, 0, 0.1)',
-      }}
-    >
-      <BottomNavigationAction
-        label="Dashboard"
-        icon={<DashboardIcon />}
-        component={Link}
-        href="/"
-        sx={{
-          '&:hover, &.Mui-focusVisible': {
-            backgroundColor: 'action.hover',
-          },
+    <Box sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 1000 }}>
+      <BottomNavigation
+        showLabels
+        value={value}
+        onChange={(_event, newValue) => {
+          // Navigation is handled by Link components, this just updates the visual state
+          setValue(newValue)
         }}
-      />
-      <BottomNavigationAction
-        label="Phone Controls"
-        icon={<SettingsIcon />}
-        component={Link}
-        href="/client/control"
         sx={{
-          '&:hover, &.Mui-focusVisible': {
-            backgroundColor: 'action.hover',
-          },
+          width: '100%',
+          height: '72px', // Increased height
+          // Glassmorphism effect
+          backgroundColor: 'rgba(20, 20, 20, 0.7)',
+          backdropFilter: 'blur(10px) saturate(180%)',
+          WebkitBackdropFilter: 'blur(10px) saturate(180%)', // For Safari
+          borderTop: '1px solid rgba(255, 255, 255, 0.1)',
+          boxShadow: '0px -4px 20px rgba(0, 0, 0, 0.25)',
+          position: 'relative', // Parent for the animated indicator
         }}
-      />
-      <BottomNavigationAction
-        label="Stream HR"
-        icon={<FavoriteIcon />}
-        component={Link}
-        href="/client/connect"
+      >
+        {navItems.map((item) => (
+          <BottomNavigationAction
+            key={item.href}
+            label={item.label}
+            icon={item.icon}
+            component={Link}
+            href={item.href}
+            sx={{
+              color: 'rgba(255, 255, 255, 0.7)',
+              transition: 'color 0.3s ease',
+              '&.Mui-selected': {
+                color: 'common.white',
+              },
+              '& .MuiBottomNavigationAction-label': {
+                fontSize: '0.8rem',
+              },
+              '&:hover, &.Mui-focusVisible': {
+                backgroundColor: 'transparent',
+              },
+            }}
+          />
+        ))}
+      </BottomNavigation>
+      {/* Animated Indicator */}
+      <Box
         sx={{
-          '&:hover, &.Mui-focusVisible': {
-            backgroundColor: 'action.hover',
-          },
+          position: 'absolute',
+          bottom: '8px',
+          // Centering logic for the indicator
+          left: `calc(${(100 / navItems.length) * value}% + ${
+            100 / navItems.length / 2
+          }% - 20px)`,
+          width: '40px',
+          height: '4px',
+          backgroundColor: 'primary.main',
+          borderRadius: '2px',
+          transition: 'left 0.3s cubic-bezier(0.65, 0, 0.35, 1)',
+          willChange: 'left',
         }}
       />
-    </BottomNavigation>
+    </Box>
   )
 }

hooks/useSwipeGesture.ts

@@ -0,0 +1,45 @@
+// hooks/useSwipeGesture.ts
+import { useState, TouchEvent } from 'react'
+
+interface SwipeHandlers {
+  onSwipeLeft?: () => void
+  onSwipeRight?: () => void
+}
+
+export const useSwipeGesture = ({
+  onSwipeLeft,
+  onSwipeRight,
+}: SwipeHandlers) => {
+  const [touchStart, setTouchStart] = useState<number | null>(null)
+  const [touchEnd, setTouchEnd] = useState<number | null>(null)
+
+  // the required distance between touchStart and touchEnd to be detected as a swipe
+  const minSwipeDistance = 50
+
+  const onTouchStart = (e: TouchEvent) => {
+    setTouchEnd(null) // otherwise the swipe is fired even with usual touch events
+    setTouchStart(e.targetTouches[0].clientX)
+  }
+
+  const onTouchMove = (e: TouchEvent) => setTouchEnd(e.targetTouches[0].clientX)
+
+  const onTouchEnd = () => {
+    if (!touchStart || !touchEnd) return
+    const distance = touchStart - touchEnd
+    const isLeftSwipe = distance > minSwipeDistance
+    const isRightSwipe = distance < -minSwipeDistance
+
+    if (isLeftSwipe && onSwipeLeft) {
+      onSwipeLeft()
+    }
+    if (isRightSwipe && onSwipeRight) {
+      onSwipeRight()
+    }
+  }
+
+  return {
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+  }
+}