Add Storage ID Field to Learning Maps

[mikebarkmin]

Overview

Learning maps need a id field to allow users to control which maps share the same state. This provides flexibility for users who want multiple maps to use the same progress tracking.

Implementation Requirements

Storage ID Field

SettingsDrawer Updates

• Add a new id field to the SettingsDrawer
• Field should be editable by the user
• Include a button to randomly generate a storage ID
• Add a hint/info text explaining: "Learning maps with the same id will share the same state when a student is working on it."

Random Generation

• Implement a "Generate Random ID" button next to the storage-id field
• Generate a unique ID similar to the existing json parameter format (e.g., iIhK7sHqL-EMWp9OM5_-q)

Learn View Storage Logic

Update the /learn route to use the following priority for storing roadmapState in localStorage:

1. If id is present: Use the id as the localStorage key
2. If id is not present: Fall back to using the json parameter as the localStorage key
3. If a map with the same id is present, ask the user if he wants to replace the old map with the new one. Also say that their state will not be removed.

Benefits

• Allows users to explicitly link multiple learning maps to share progress
• Provides clear control over state management
• Maintains backward compatibility (falls back to json param if id not set)
• Enables use cases like having multiple versions of a map with shared progress

UI/UX Considerations

• Make the hint text clearly visible but not obtrusive
• Consider using an info icon (ℹ️) with a tooltip for the explanation
• Validate that id doesn't contain invalid characters for localStorage keys