Mobile View Integration
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Mobile View Integration system provides a tailored user experience for small-screen devices. Instead of the multi-window, overlapping desktop interface, the system switches to a "stacked" mobile shell when the viewport width is below a specific threshold. This ensures usability on mobile devices while maintaining access to the same core application content.
The integration relies on a conditional rendering logic within the main Desktop component, which uses a specialized hook to detect the device type and swap the entire UI architecture from a window-based environment to a single-active-app mobile environment.
Sources: features/desktop/components/Desktop.tsx:16-32, hooks/useIsMobile.ts:4-7
Architecture and Detection
The system uses a responsive breakpoint to determine which interface to render. This logic is centralized in the useIsMobile hook, which leverages a media query.
Mobile Detection Logic
The application defines "mobile" as any device with a maximum width of 767px, corresponding to the standard Tailwind md breakpoint.
export function useIsMobile(): boolean {
return useMediaQuery("(max-width: 767px)");
}
Sources: hooks/useIsMobile.ts:4-7
UI Switching Flow
The Desktop component acts as the primary controller. If isMobile is true, it renders the MobileHome component; otherwise, it renders the full desktop suite including Widgets, MenuBar, WindowLayer, and Dock.
The Mobile Home Component
The MobileHome component manages the state of the mobile interface. Unlike the desktop view where multiple windows can be open, the mobile view operates in two distinct states: the Icon Grid (Home) and the Active App view.
Component States
| State | Description | Implementation |
|---|---|---|
null (Home) | Displays a 3-column grid of application icons. | useState<AppId | null>(null) |
AppId (Active) | Renders the selected application in full screen with a header. | createElement(appComponents[active]) |
Sources: features/desktop/components/MobileHome.tsx:12-59
Navigation and App Rendering
When an app is selected, MobileHome retrieves the component from the appRegistry.tsx using the AppId. It renders a header with a ChevronLeft back button to return to the home grid.
Visual Styles and Layout
The mobile view utilizes specific Tailwind CSS classes to mimic a mobile OS environment:
- App Icons: Styled with
size-16,rounded-[1.15rem], andbg-gradient-to-bto create a modern mobile app aesthetic. - Layout: Uses
grid-cols-3for the icon layout andmin-h-dvhto ensure the UI fills the dynamic viewport height. - Panels: Uses the
.lg-paneland.lg-scrollutility classes for blurred headers and translucent scrolling areas.
Sources: features/desktop/components/MobileHome.tsx:44-55, app/globals.css:160-178
Core Data Structures
The mobile view is driven by the same types and registries used by the desktop version, ensuring feature parity.
| Element | Source File | Description |
|---|---|---|
AppId | types/index.ts | Union type of about, projects, or contact. |
appComponents | appRegistry.tsx | Map of AppId to React components. |
apps | lib/apps.config.ts | Configuration array containing icons and titles. |
Sources: types/index.ts:1, features/desktop/components/appRegistry.tsx:6-10
Conclusion
Mobile View Integration is achieved through a structural swap at the top-level Desktop component. By leveraging the useIsMobile hook, the system efficiently transitions from a complex windowing system to a simplified, single-app mobile experience that uses the same appRegistry and internationalization keys as the desktop environment.
Sources: features/desktop/components/Desktop.tsx:16-32, features/desktop/components/MobileHome.tsx:12-59