Issue 4: 📱 Mobile Navigation & Gestures

[arii]

Description
Enhance the mobile navigation experience by increasing the size of the bottom nav bar and implementing swipe gestures to switch between the Control Panel and the Connection screen.

Technical Specs

• File: components/BottomNavBar.tsx
• File: hooks/useSwipeGesture.ts
• Nav Height: Increase to 72px with glassmorphism background.
• Gestures: Swipe Left -> /client/connect, Swipe Right -> /.

Tasks

• Implement useSwipeGesture hook logic.
• Apply gesture handlers to the main wrapper in app/client/control/ControlPanel.tsx.
• Redesign BottomNavBar to match the new visual style (glass effect, animated active indicator).

Labels: frontend, mobile, interactions
Priority: P2 - Medium

---

[google-labs-jules]

Jules is on it. When finished, you will see another comment and be able to review a PR.

[google-labs-jules]

Ready for a review! A PR has been created.

[arii]

Hi team, PR #610, 'Improve Mobile Experience for Timer Controls', implemented several improvements for mobile touch-friendliness by increasing the size of interactive elements and refactoring styling. This seems to address a core aspect of this issue related to mobile UX. Could you please review if this PR sufficiently resolves some or all of the concerns raised in Issue #601, particularly regarding mobile navigation and touch targets?