Mobile-Specific Components
Relevant source files
The following files were used as context for generating this wiki page:
The Vinesight application is designed as a mobile-first Progressive Web App (PWA), ensuring that farmers have a reliable and accessible digital companion in the field. The architecture prioritizes a seamless experience on mobile devices, incorporating responsive design, touch-friendly interfaces, and offline capabilities. This approach is critical for delivering key features like the AI Assistant, data logging, and real-time analysis directly to users where they work.
The system leverages next-pwa to provide offline support, with Dexie.js for client-side database storage, allowing users to perform critical operations even without an internet connection. The UI is built with Tailwind CSS and includes a dedicated set of mobile-optimized styles and components to ensure usability on smaller screens. Features like voice input via the Web Speech API and camera integration for image analysis are central to the mobile experience.
Sources: AGENTS.md, package.json:38, src/app/help/page.tsx:130-134, context/PRD.md
PWA and Offline Architecture
Vinesight is configured as a Progressive Web App (PWA) to provide a native-app-like experience, including offline functionality and home screen installation. This is managed through the next-pwa library and specific meta tags in the root layout.
Sources: package.json:38, src/app/layout.tsx:103-107, AGENTS.md
Key PWA Elements
- Manifest File: A
manifest.jsonis linked insrc/app/layout.tsxto control the PWA's appearance, including name, icons, and theme color. - Service Worker:
next-pwagenerates a service worker to handle caching strategies and enable offline access. - Offline Storage: The application uses
Dexie.js, a wrapper for IndexedDB, to store data locally on the device. This is crucial for features like offline data logging, which syncs automatically when connectivity is restored. - Mobile Meta Tags: The layout includes viewport settings and
apple-mobile-web-app-capabletags to ensure proper rendering and behavior on iOS devices.
Sources: src/app/layout.tsx:103-107, 110-113, package.json:34, AGENTS.md, src/app/help/page.tsx:130-134
The diagram below shows the high-level architecture for PWA and offline support.
Sources: AGENTS.md, package.json:34,38
Responsive Styling and Layout
The application uses a mobile-first approach with Tailwind CSS, defined in src/app/globals.css. It includes specific media queries and utility classes to optimize the user experience on various screen sizes.
Sources: src/app/globals.css
Media Queries
Two primary breakpoints are used for mobile optimizations:
@media (max-width: 768px): Targets tablets and mobile devices in landscape.@media (max-width: 360px): Targets ultra-narrow mobile screens.
Sources: src/app/globals.css:322-383, 386-423
Mobile Utility Classes
A set of custom utility classes is defined to enhance usability on touch devices.
| Class | Description |
|---|---|
.touch-target | Increases the minimum size of touchable elements to 48x48px. |
.touch-target-large | Provides an even larger touch area (56x56px) for critical actions. |
.mobile-container | Adjusts container padding for narrow screens. |
.mobile-nav-item | Optimizes padding and height for mobile navigation items. |
.mobile-grid | Collapses grid layouts to a single column on mobile. |
.safe-top / .safe-bottom | Adds padding to account for safe area insets on modern phones (notches, etc.). |
Sources: src/app/globals.css:295-302, 388-391, 411-415, 426-444
The following code snippet shows how form fields are optimized for mobile readability and to prevent automatic zooming on iOS.
/* src/app/globals.css:318-321, 324-334 */
/* Prevent zoom on input focus on iOS */
input,
select,
textarea {
font-size: 16px;
}
/* Optimized form fields for mobile */
@media (max-width: 768px) {
input[type='number'],
input[type='text'],
input[type='email'],
input[type='tel'],
select,
textarea {
padding: 14px 18px;
border-radius: 10px;
font-size: 16px;
line-height: 1.5;
}
Core Mobile Components
AI Assistant (AIAssistant.tsx)
The AIAssistant is a key component with significant mobile-specific adaptations. It provides a conversational interface for farmers to get instant guidance.
Sources: src/components/ai/AIAssistant.tsx
Mobile Detection
The component determines if it's running on a mobile device using a useEffect hook that checks the window.innerWidth.
// src/components/ai/AIAssistant.tsx:100-107
useEffect(() => {
if (propIsMobile === undefined) {
const checkMobile = () => {
setIsMobile(window.innerWidth <= 768)
}
checkMobile()
window.addEventListener('resize', checkMobile)
return () => window.removeEventListener('resize', checkMobile)
Conditional Rendering
Based on the isMobile and isOpen props, the component's rendering logic changes dramatically.
- Floating Action Button (FAB): On mobile, if the chat window is closed (
!isOpen), a circular floating button with aMessageCircleicon is displayed at the bottom-right of the screen. - Full-Screen Modal: When the FAB is tapped, the chat interface opens as a full-screen view, covering the entire display.
- Responsive Input Area: The text input area at the bottom of the chat has a distinct, optimized layout for mobile to improve usability on touch screens.
The following flowchart illustrates this rendering logic.
Mobile-Centric Features
- Voice Input: The assistant integrates with the Web Speech API (
webkitSpeechRecognition) to allow for hands-free voice input, a crucial feature for farmers in the field. The component manages listening state and automatically transcribes speech to text. - Image Attachments: Users can attach images from their device, which is essential for the AI-powered disease detection feature. The component uses a file input to access the device's camera or photo library.
Sources: src/components/ai/AIAssistant.tsx:109-135, 412-417, 420-444
The sequence diagram below shows the flow for using voice input on mobile.
Conclusion
The mobile-specific components and architectural choices in Vinesight are fundamental to its product vision. By implementing a robust PWA with offline capabilities, a highly responsive UI, and mobile-centric features like voice input and camera access, the application provides a powerful and reliable tool for farmers. The AIAssistant component is a prime example of this mobile-first philosophy, adapting its entire interface and functionality to deliver an intuitive experience on the devices that farmers use most in their daily work.
Sources: AGENTS.md, context/PRD.md, src/components/ai/AIAssistant.tsx