Mobile UI & Navigation
Relevant source files
The following files were used as context for generating this wiki page:
Kocteau follows a "web-first" development strategy where the mobile experience is primarily delivered through a responsive web interface, while a dedicated native mobile application (using Expo) exists as a placeholder for future parity. The mobile UI is designed to be "dark, editorial, and human-led," emphasizing a quiet music journal aesthetic over a traditional social network dashboard.
The mobile navigation system prioritizes the core product loop: reviewing music, expressing taste, and discovering new content through a personalized "For You" feed. On smaller viewports, complex desktop layouts like secondary sidebars are collapsed or moved to specific discovery surfaces to maintain reading comfort and reachability.
Sources: AGENTS.md:6-10, apps/mobile/README.md:1-12
Mobile UI Architecture
The mobile interface is governed by a specific set of visual and structural rules to ensure a premium, minimal feel. It utilizes a monochrome palette with restrained contrast and thin borders, avoiding "SaaS-like" colorful accents or loud gradients.
Design Principles for Mobile
- Hierarchy Priority: The hierarchy follows a strict order: 1. Feed/Review, 2. Search/Review Action, 3. Discovery, 4. Profile/Activity.
- Touch Targets: Interactive elements use generous hit targets for ease of use on mobile devices.
- Vertical Space: The system avoids sticky elements that consume excessive vertical space, ensuring the primary reading flow remains dominant.
- Liquid UI: Implementation of "liquid" components, such as the
mobile-liquid-bar, which provides a floating navigation experience.
Sources: AGENTS.md:144-154, apps/web/components/mobile-bottom-bar.tsx:100-115
Mobile Navigation Flow
The following diagram illustrates how a mobile user navigates through the primary application surfaces:
This flow ensures that the primary actions (Feed and Search) are always accessible via the bottom navigation bar.
Sources: apps/web/components/mobile-bottom-bar.tsx:80-120, AGENTS.md:23-31
Primary Navigation Components
Mobile Bottom Bar
The MobileBottomBar is the primary navigation anchor for mobile web users. It is fixed to the bottom of the viewport and utilizes safe area insets for modern mobile devices.
| Item | Visibility | Icon | Destination |
|---|---|---|---|
| Feed | Always | HouseIcon | / |
| Explore | Always | MagnifyingGlassIcon | /search |
| Activity | Authenticated | BellSimpleIcon | /notifications |
| Profile | Authenticated | UserCircleIcon | /u/[username] |
| Log in | Unauthenticated | UserCircleIcon | /login |
| New Review | Always | ReviewGlyphIcon | NewReviewDialog |
Sources: apps/web/components/mobile-bottom-bar.tsx:1-98
Sidebar Integration
On mobile, the AppSidebar (used primarily for desktop) transforms into a drawer-based navigation system controlled by the useSidebar hook. When the isMobile flag is true, navigation events trigger the automatic closing of the sidebar to return focus to the main content.
Help & Documentation Menu
Specific surfaces like the Help Center utilize a dedicated HelpMobileMenu component. This uses a Drawer (bottom sheet) to provide quick access to legal, privacy, and accessibility documents without cluttering the main content area.
Sources: apps/web/components/help/help-mobile-menu.tsx:19-58
Mobile Roadmap & Future Parity
The native mobile app (found in apps/mobile) is currently a placeholder following a phased migration plan to achieve parity with the web application.
Migration Phases
- Foundation: Establishing shared tokens, domain types, and a mobile shell that matches the Kocteau tone.
- Data Layer: Connecting mobile to existing business flows via shared query keys and client-safe fetch helpers, enabling live data hydration.
- Shared UX: Extracting portable UI contracts and variants into shared packages, documenting divergence between web and native interactions.
Sources: apps/mobile/lib/roadmap.ts:1-40
Conclusion
The Mobile UI & Navigation system in Kocteau is designed to preserve the editorial "quietness" of the product while ensuring high functionality on small screens. By centralizing the review loop and using responsive patterns like floating bottom bars and bottom-sheet drawers, the interface remains focused on the primary experience: the human music review.