Route & Folder Editor Components
Relevant source files
The following files were used as context for generating this wiki page:
The Route & Folder Editor Components form the core of the user's ability to organize, modify, and persist travel plans and favorite locations. These components bridge the gap between live map interactions and the long-term storage of user data, such as saved routes and categorized Park4Night spots.
The system is divided into two primary management areas: the Route Editor, which handles the lifecycle of multi-stop travel plans (A → B → C), and the Folder/Favourites Manager, which allows users to categorize spots into custom folders for later retrieval.
Route Management & Persistence
Route management involves creating, renaming, and deleting saved trip snapshots. A "Saved Plan" is a point-in-time capture of the route polyline, selected spots, and the configuration used to generate them.
Saved Route Lifecycle
Users can save a plan once a route has been generated and spots have been found. These routes are stored in the application state and can be reloaded to the map without re-querying external APIs.
Key Route Data Structures
The SavedPlan interface is the primary data structure for route persistence.
| Field | Type | Description |
|---|---|---|
id | string | Unique identifier for the saved plan. |
name | string | User-defined name for the route. |
stops | Stop[] | The waypoints (A, B, C...) that define the trip. |
route | RouteSummary | Polyline data, total distance (km), and duration (min). |
spots | ScoredPlace[] | The Park4Night spots associated with this snapshot. |
Sources: src/lib/types.ts:167-181
Folder & Favourites Organization
The Favourites system provides a high-level organization layer for Park4Night spots. It utilizes a "Folder Rail" and a "Places List" to allow for drag-and-drop categorization.
Favourites Board Architecture
The FavouritesBoard component manages the interaction between bookmark folders and saved places. It supports creating new folders, deleting existing ones, and moving places between them via drag-and-drop.
Special Folder Types
The system recognizes specific folder types based on their capacity and usage:
- Unclassified (Inbox): Represented by the
UNCLASSIFIED_ID(-1). It maps to the primary Park4Night folder where new bookmarks are typically stored. - Organised Folders: Any folder created by the user or existing in the account that is not the primary inbox.
Sources: src/components/FavouritesBoard.tsx:16-36
Detail & Action Integration
The DetailPanel and ListRow components provide the UI triggers for both route and folder operations.
Component Interactions
| Action | Component | Logic |
|---|---|---|
| Add to Trip | DetailPanel, ListRow | Appends or inserts a spot into the current stops array. |
| Toggle Favourite | FolderMenu | Adds/removes a place from a specific folder via addFavourite or removeFavourite API calls. |
| Pin for Today | ListRow | Adds the spot to a temporary "Today" shortlist for immediate navigation. |
| Navigate | DetailPanel | Launches external navigation (TomTom/Google) using navUrl. |
Sources: src/components/DetailPanel.tsx:114-149, src/components/Planner.tsx:1082-1144, src/lib/client.ts:68-81
Code Snippet: Place Label Resolution
To ensure technical accuracy in the UI, place names are resolved through a hierarchy of fields to avoid blank entries.
function placeLabel(p: SelPlace): string {
return (
p.name?.trim() ||
p.title_short?.trim() ||
p.title?.trim() ||
p.address?.city?.trim() ||
p.type?.label?.trim() ||
"Stop"
);
}
Sources: src/components/Planner.tsx:1189-1199
Conclusion
The Route & Folder Editor components provide the essential tools for transforming raw map data into organized travel plans. By integrating direct API interactions with local state persistence, the system allows for a seamless transition between planning at a desk (Desktop sidebar) and execution on the road (Mobile voice/navigation).