Add ID Field to Learning Maps for Shared State Management

[Copilot]

Overview

This PR implements an ID feature that allows users to control which learning maps share the same state/progress. This provides flexibility for scenarios where multiple maps should track shared progress, such as different versions of the same curriculum.

Changes

1. ID Field in Settings

Added an optional id field to the Settings interface that allows users to assign a custom identifier to their learning maps. This ID takes priority over the json parameter for localStorage key management.

2. Settings Drawer UI Enhancement

Enhanced the Settings Drawer with:

• ID input field: Users can manually enter a custom ID
• Generate Random ID button: One-click generation of unique IDs in the format k7N98Dvna-RzKC7Vo5nAv-q (similar to json.openpatch.org format)
• Informative hint: Clear explanation that "Learning maps with the same ID will share the same state when a student is working on it"

Screenshots:

English:

German:

3. Learn View Storage Logic

Updated the /learn route to implement the following priority for localStorage:

1. Primary: Use the id field from settings if present
2. Fallback: Use the json parameter if no id is set

When loading a map with an ID that's already in use:

• Detects the conflict and prompts the user for confirmation
• Allows replacement while preserving existing progress/state
• Provides clear messaging: "A learning map with the ID 'X' already exists. Would you like to replace it with this map? Your progress will not be removed."

4. Internationalization

Added translations for both English and German:

• ID labels
• Button text for random ID generation
• Explanatory hint text

Implementation Details

Files Modified:

• packages/learningmap/src/types.ts - Added id field to Settings interface
• packages/learningmap/src/helper.ts - Added generateRandomId() function
• packages/learningmap/src/translations.ts - Added EN/DE translations
• packages/learningmap/src/SettingsDrawer.tsx - Added UI components for ID field
• platforms/web/src/Learn.tsx - Implemented ID priority logic

Benefits

✅ Users can explicitly link multiple learning maps to share progress
✅ Clear control over state management with intuitive UI
✅ Backward compatible - falls back to json parameter if no ID is set
✅ Prevents accidental state conflicts with user confirmation
✅ Enables versioning use cases (e.g., v1 and v2 of a curriculum sharing progress)

Testing

• ✅ All builds successful
• ✅ TypeScript compilation passed
• ✅ All existing tests pass
• ✅ Manual testing verified UI functionality in both English and German
• ✅ CodeQL security scan: 0 alerts

Fixes #28

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add Storage ID Field to Learning Maps</issue_title>
<issue_description>## 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</issue_description>

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

Fixes #28

---

✨ 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 18, 2025 7:48pm

💡 Enable Vercel Agent with $100 free credit for automated AI reviews

[mikebarkmin]

@copilot rename storage id to id and update the ui accordingly.

[Copilot]

@copilot rename storage id to id and update the ui accordingly.

Renamed "Storage ID" to "ID" in all UI labels (English and German). Changes committed in 7a2e9f8.

Screenshots:

• English: https://github.com/user-attachments/assets/503c7d2c-e8ce-4306-9509-741a4b69ae65
• German: https://github.com/user-attachments/assets/0eaf98c4-854e-49a6-9c3e-6761dff9aa88