Add Support for Working on Learning Maps

[Copilot]

• Explore repository structure and understand the codebase
• Install dependencies and build the project successfully
• Understand the current architecture
• Create learnerStore for persisting learning progress
• Set up React Router in web platform
• Create Learn page component
• Fix infinite loop bug in LearningMap component
• Build and type-check successfully
• Test the implementation manually
• Apply Concert One font to Learn page
• Redesign header to mimic EditorToolbar
• Apply brand colors throughout Learn page
• Remove x-overflow on learning maps overview
• Fix viewport behavior in learner LearningMap
  • Changed from fitView prop to defaultViewport for initial positioning
  • Added translateExtent to limit viewport (ensures at least one node visible)
  • Viewport from saved state now takes priority over settings
  • Only uses fitView on first load when no saved state exists
  • Viewport changes are automatically saved to RoadmapState via onChange

Implementation Summary

Successfully added support for working on learning maps with the /learn route. The page now uses Concert One font, features a redesigned header matching the EditorToolbar, applies the brand color palette, and properly manages viewport state for learners.

Changes in this commit:

• Replaced fitView prop with defaultViewport to respect saved viewport state
• Added translateExtent calculation with 200px padding to keep nodes visible
• Viewport from saved state (initialState) now takes priority over settings viewport
• Only calls fitView() programmatically on initial load when no saved state exists
• Viewport changes are automatically persisted through the existing onChange callback

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add Support for Working on Learning Maps</issue_title>
<issue_description>## Overview
Currently the web project supports creating learning maps. We want to add support for working on learning maps.

Implementation Requirements

New Route

• Create a new route at /learn
• This route should display the LearningMap component
• The route must support a json parameter in the URL hash

Example URL:

https://www.learningmap.app/learn/#json=iIhK7sHqL-EMWp9OM5_-q

Data Loading

Roadmap Data

• Load roadmapData from the jsonStore
• Store the complete roadmapData in localStorage using Zustand persist to avoid refetching on page reload

Initial State

• Load initialState from localStorage using Zustand persist
• Each roadmapState should be saved under the key of the json parameter
  • Example: For URL #json=iIhK7sHqL-EMWp9OM5_-q, the state key would be iIhK7sHqL-EMWp9OM5_-q
• This approach ensures multiple learning maps can be worked on simultaneously with separate states

Learning Maps List View

When no json parameter is present in the URL, display a page that shows:

1. List of all learning maps currently stored in localStorage
2. Input field with the ability to paste a learning map URL to add a new learning map to the list

Benefits

• Enables users to work on multiple learning maps
• Persists progress across page reloads
• Provides a centralized view of all learning maps being worked on</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #26

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
learningmap	Ready	Preview	Comment	Oct 16, 2025 7:54am

[mikebarkmin]

@copilot use Concert One as the font, just like the LearningMap editor.

[Copilot]

@copilot use Concert One as the font, just like the LearningMap editor.

Applied Concert One font throughout the Learn page to match the editor style in commit ad93de6.

Changes:

• Added font-family: "Concert One", sans-serif to all containers, headings, buttons, and inputs
• Changed font-weight from 500/600/700 to 400 to match the editor's Concert One normal weight

Screenshots with Concert One font:

Empty state:

Learning maps list:

Learning map viewer:

[mikebarkmin]

@copilot rework the header to include the logo followed by Learningmap, remove the go to editor button and move the "back to Learningmap" to the right renaming it to "my learningmaps". Mimik the design of the EditorToolbar.

[Copilot]

@copilot rework the header to include the logo followed by Learningmap, remove the go to editor button and move the "back to Learningmap" to the right renaming it to "my learningmaps". Mimik the desig...

Redesigned the header to mimic the EditorToolbar in commit [TBD].

Changes:

• Added logo followed by "Learningmap" text on the left
• Removed "Go to Editor" button from list view
• Renamed "← Back to Learning Maps" to "My Learningmaps" and moved it to the right
• Applied same styling as EditorToolbar (white background, border-bottom, padding, toolbar-button styles)

Screenshots:

Empty state with new header:

Learning maps list with new header:

Learning map viewer with new header and "My Learningmaps" button:

[mikebarkmin]

@copilot use my brand color:

:root {
  /* primary */
  --learningmap-color-openpatch: #007864;
  /* primary dark */
  --learningmap-color-dark-forest: #004c45;
  /* primary light */
  --learningmap-color-freshmint: #b5e3d8;
  /* neutral black */
  --learningmap-color-black: #000000;
  /* neutral dark */
  --learningmap-color-coal: #242428;
  /* neutral medium dark */
  --learningmap-color-charcoal: #3c3c3c;
  /* neutral medium */
  --learningmap-color-quicksilver: #a4a4a4;
  /* neutral light */
  --learningmap-color-whitesmoke: #f5f5f5;
  /* neutral white */
  --learningmap-color-white: #ffffff;
}

and remove the x-overflow on the learning maps overview.

[Copilot]

@copilot use my brand color:

...

Applied brand colors and removed x-overflow in commit [TBD].

Changes:

• All buttons now use brand primary color (#007864) with dark hover (#004c45)
• Progress bars updated to brand primary gradient (#007864 to #b5e3d8)
• Neutral colors updated to brand palette (quicksilver, whitesmoke)
• Added overflow-x: hidden to .learn-list-content and .maps-grid

Screenshots:

Empty state with brand colors:

Learning maps list with brand colors:

Learning map viewer:

[mikebarkmin]

@copilot the viewport of the leaner LearningMap is not movable. The viewport of the settings should only apply once, then the last viewport which the learner had should be used. Use the defaultViewport for the one coming from the settings:

defaultViewport
Viewport
Sets the initial position and zoom of the viewport. If a default viewport is provided but fitView is enabled, the default viewport will be ignored.

{ x: 0, y: 0, zoom: 1 }

Then save the current viewport to the state of the Learningmap.

Then also limit the viewport so that learners do always see at least one node. Use this with a little padding:

translateExtent
CoordinateExtent
By default, the viewport extends infinitely. You can use this prop to set a boundary. The first pair of coordinates is the top left boundary and the second pair is the bottom right.

[[-∞, -∞], [+∞, +∞]]

[Copilot]

@copilot the viewport of the leaner LearningMap is not movable. The viewport of the settings should only apply once, then the last viewport which the learner had should be used. Use the defaultViewpor...

Fixed viewport behavior in commit [TBD].

Changes:

• Replaced fitView prop with defaultViewport to allow viewport movement
• Viewport priority: saved state → settings viewport → default (0, 0, 1)
• Added translateExtent with 200px padding to ensure at least one node is always visible
• Only uses fitView() programmatically on first load when no saved state exists
• Viewport changes automatically persist to RoadmapState via onChange callback

Screenshot:

Viewport now movable and persists saved position (x: 100, y: 50, zoom: 1.2):