UI Layout & Detail Panels
Relevant source files
The following files were used as context for generating this wiki page:
The UI Layout and Detail Panels form the core user interface of the P4N Map application, designed to provide a seamless transition between trip planning, on-road navigation, and favorites management. The architecture prioritizes a "single canvas" approach on desktop, where a central map is flanked by functional sidebars and persistent detail panels to minimize context switching.
On desktop, the layout consists of a horizontal top bar for mode switching and a three-column main body: a functional sidebar (left), a MapLibre GL map (center), and an optional Detail Panel (right). On mobile devices, the layout adapts to a vertical stack with a focus on voice interaction and compact control cards.
Sources: README.md:14-20, src/components/Planner.tsx:942-950
Core Application Shell
The main entry point for the UI is the Planner component, which manages the high-level application state, including the active mode (plan, onroad, or favourites) and the currently selected place.
Layout Structure
The layout is defined by a flexbox container that spans the full viewport height (h-dvh). It includes:
- TopBar: Contains the application title, mode toggles, and links to Settings and Routes.
- Main Workspace: A flex container containing the Mode-Specific Sidebar, the Map View, and the Detail Panel.
The sidebar content dynamically switches based on the mode state variable.
Sources: src/components/Planner.tsx:112-115, src/components/Planner.tsx:942-1025
Global Styles and Tokens
The application uses a dark-themed CSS variable system for consistent UI elements across all panels.
| Variable | Value | Purpose |
|---|---|---|
--bg | #0f1115 | Main application background |
--panel | #171a21 | Primary card and panel background |
--panel-2 | #1e222b | Secondary background for list items/inputs |
--border | #2a2f3a | UI borders and dividers |
--accent | #4ade80 | Primary action color (Green) |
--accent-2 | #38bdf8 | Secondary highlight color (Blue) |
Sources: src/app/globals.css:3-13
Detail Panel Architecture
The DetailPanel is a persistent sidebar (on desktop) or a bottom sheet (on mobile) that displays comprehensive information about a selected Park4Night place or scored location.
Component Logic
When a place is selected, the DetailPanel fetches and displays recent reviews from the API. It also generates navigation URLs based on the user's preferred navigation app (TomTom or Google Maps) and vehicle profile.
Key Display Features
The panel is organized into three vertical segments:
- Header: Displays the place type, name, rating, review count, and proximity to road/dog parks.
- Scrollable Body: Contains a thumbnail image, full address, detailed description, service chips, and a "Recent Reviews" section.
- Action Footer: Provides buttons for adding the place to a trip, managing favorites via a
FolderMenu, and launching external navigation.
Sources: src/components/DetailPanel.tsx:75-144
Favourites Board & Folder Management
The FavouritesBoard provides an organized view of saved locations, utilizing a two-pane layout within the sidebar.
Organization Structure
The system distinguishes between "Unclassified" (the main Park4Night inbox) and "Organized" (user-created) folders.
| Component | Description | Source |
|---|---|---|
| Folder Rail | A left-hand list of folders with icons, item counts, and delete actions. | FavouritesBoard.tsx:109-178 |
| Places List | A scrollable list of places within the selected folder. | FavouritesBoard.tsx:213-271 |
| Drag & Drop | Supports moving places between folders via native HTML5 drag events. | FavouritesBoard.tsx:88-107 |
Sources: src/components/FavouritesBoard.tsx:10-33
Drag and Drop Workflow
The board implements a drag-and-drop interface where application/x-p4n-fav mime-type data is used to transfer place IDs and source folder IDs.
Mobile Layout Adaptations
The UI shifts its layout significantly for mobile viewports to accommodate touch interaction and limited screen real estate.
Responsive Components
- Sidebar Visibility: The desktop sidebars are hidden (
hidden md:flex). - Map Controls: The "Find me" button and amenity search status are positioned as absolute overlays on the map.
- Floating Cards: On-road controls and navigation cards appear as scrollable overlays at the top of the map.
- Voice Interface: A dedicated voice bar with a large microphone button (
VoiceButton) and assistant message display is anchored to the bottom. - Bottom Sheet Detail: The
DetailPaneloccupies the bottom 70% of the screen when active.
Sources: src/components/Planner.tsx:960, src/components/Planner.tsx:1027-1055, src/components/Planner.tsx:1066-1082
Data Structures
The following types are critical for the UI components to render place details and trip progress correctly.
// From src/lib/types.ts
export interface P4nPlace {
id: number;
name: string;
type: PlaceType;
address?: PlaceAddress;
rating?: number;
services: string[];
}
export interface ScoredPlace extends P4nPlace {
kmFromRoad: number;
progressKm: number;
dogPark?: { name: string; kmAway: number } | null;
}
Sources: src/lib/types.ts:32-58, src/lib/types.ts:84-93
Summary
The UI Layout & Detail Panels provide a functional and highly responsive environment for managing van travel data. By integrating MapLibre GL for visualization and a modular sidebar system for data management, the application ensures that planning (via PlanSidebar), traveling (via RoadSidebar), and organizing (via FavouritesBoard) are cohesive experiences. The DetailPanel acts as the primary data consumer, presenting complex place information in a readable and actionable format.