Add comprehensive localization to learningmap web components with language settings

[Copilot]

• Update LearningMap to use language from settings if available
• Build successfully completes

LearningMap Viewer Language Settings

Updated the LearningMap viewer component to use the language from settings if available, matching the behavior of the LearningMapEditor.

Changes Made:

Updated LearningMap.tsx:

• Component now uses settings.language if available, falls back to language prop
• Introduced effectiveLanguage variable to determine which language to use
• All child components (ProgressTracker, Drawer) now receive the effective language
• UI updates immediately when roadmap with different language is loaded

How It Works:

1. When a roadmap file is loaded with a language setting, the viewer automatically uses that language
2. If no language is set in the roadmap, it falls back to the language prop
3. If neither is set, it defaults to English

This ensures consistency between the editor and viewer - both now respect the language setting saved in the roadmap data while still supporting the language prop as a fallback. When users save a roadmap with a specific language in the editor, the viewer will automatically display in that language when the roadmap is loaded.

Original prompt

Create a new web component the learningmap-editor it should use a similar ui, but the drawer should ve for editing settings about the node. For example its description, its label and its resources. It should also be possible to dnd new nodes to the learning map and to set the completion and unlock rules. It should also ve possible to change the background properties. The webcomponent should fire an change event when the save button is pressed. It should also be able to receive roadmap data for the initialization.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
hyperbook-4fwa	Ready	Preview	Comment	Oct 9, 2025 9:45pm

[mikebarkmin]

@copilot I have updated many things. Do not bother with the initial request. Can you implement localization for the learningmap web-component. I have already set up a language prop. You need to find all strings and create translations for English and German.

[Copilot]

@copilot I have updated many things. Do not bother with the initial request. Can you implement localization for the learningmap web-component. I have already set up a language prop. You need to find a...

Localization has been implemented! I've added English and German translations for all strings in the learningmap editor component.

What was added:

• Created translations.ts with complete translations for both English and German
• All UI text is now localized: toolbar, menus, drawers, forms, buttons, messages, etc.
• Language prop flows through all components from the top-level component

Coverage includes:

• Toolbar items (Nodes, Settings, Debug, Preview, Save, etc.)
• All drawer titles and form labels
• Keyboard shortcuts
• Alert/confirmation messages
• Color and edge type options
• Placeholders and button text

The component defaults to English if no language is specified. Commit: {git_commit_hash}

[mikebarkmin]

@copilot please update the LearningMap component to use the translations.

[Copilot]

@copilot please update the LearningMap component to use the translations.

Localization has been added to the LearningMap viewer component! All user-facing strings are now translated for English and German.

Updated components:

• LearningMap (main viewer)
• Drawer (node details)
• ProgressTracker (progress display)

Translated strings include:

• Resources label
• Unlock/completion condition messages
• State button labels (Locked, Mark as Started, Mark as Completed, Completed, Mastered)
• Progress tracker tooltips

The language prop now flows through the entire component tree in both the editor and viewer. Commit: 6e5dd1f

[mikebarkmin]

@copilot Update the Settings type to include a language and add a language chooser in the SettingsDrawer.

[Copilot]

@copilot Update the Settings type to include a language and add a language chooser in the SettingsDrawer.

Language property and chooser have been added! The Settings type now includes a language field, and the SettingsDrawer has a dropdown to select between English and German.

Changes:

• Settings type includes language?: string
• Language selector dropdown in SettingsDrawer
• Language preference saves with roadmap data
• LearningMapEditor uses settings.language if available, falls back to language prop
• All UI updates immediately when language changes

The language setting persists with the roadmap file, so each roadmap can have its own language preference. Commit: 5d8b7e3

[mikebarkmin]

@copilot the learningmap component should also use the settings language if available.

[Copilot]

@copilot the learningmap component should also use the settings language if available.

The LearningMap viewer component now uses the language from settings! It works the same way as the editor:

Changes:

• LearningMap uses settings.language if available, falls back to language prop
• ProgressTracker and Drawer receive the effective language
• UI automatically displays in the language saved with the roadmap data

Both the editor and viewer now consistently respect the language setting from the roadmap file. Commit: d45a219