Add welcome message for empty roadmap

[Copilot]

• Explore repository structure and understand the codebase
• Build project to ensure it compiles
• Add translations for welcome message (title, subtitle, button labels)
• Create WelcomeMessage component with title, local storage message, and action buttons
• Add CSS styling for the welcome message component
• Integrate welcome message into LearningMapEditor (show when nodes and edges are empty)
• Test the welcome message appears on empty roadmap
• Test welcome message disappears when topic/node is added
• Test welcome message reappears when all nodes are deleted
• Test all buttons work correctly (Open File, Add Topic, Help)
• Fix z-index issue with dialogs
• Fix mobile layout issues (height and responsiveness)
• Fix help dialog not appearing on empty roadmap
• Fix mobile viewport cutoff issues with proper height constraints
• Take screenshots of the UI changes
• Verify all functionality works correctly

Implementation Summary

This PR implements a welcome message for empty roadmaps, similar to Excalidraw's onboarding experience.

Features

• Welcome Screen: Displays when the roadmap is empty (no nodes or edges)
• Title: Shows "Learningmap" as the main heading
• Privacy Notice: Informs users that "All data is stored locally in your browser"
• Action Buttons:
  • Open File: Triggers the file picker to load an existing roadmap
  • Add Topic: Creates a new topic node to get started quickly
  • Help: Opens the keyboard shortcuts dialog

Behavior

• Automatically appears when the editor has no nodes or edges
• Disappears as soon as any content is added to the roadmap
• Reappears if all nodes and edges are removed
• Fully responsive on mobile devices

Bug Fixes

Latest Commit (Mobile Viewport Fix):

• Fixed mobile viewport cutoff by using absolute positioning with all edges (top/right/bottom/left)
• Changed from min-height: 100% to height: 100% with proper boundary constraints
• Added align-items: flex-start with top padding on mobile for better content positioning
• Reduced toolbar size on mobile (smaller padding, hidden labels)
• Content now properly fits on all mobile screen sizes without cutoff

Previous Commit (Dialog and Layout):

• Help dialog now appears on empty roadmap: Changed dialog positioning from absolute to fixed with proper z-index
• Fixed mobile layout issues: Changed welcome message height to use min-height instead of height to prevent content cutoff on mobile devices
• Added mobile responsiveness: Smaller font sizes, adjusted padding, and full-width buttons on screens smaller than 640px
• Better scrollability: Added overflow-y: auto to allow content to scroll on smaller screens

Screenshots

Welcome message on empty roadmap:

Help dialog now works from welcome message:

Mobile view (360x640 - Android):

Mobile view with node (360x640):

Original prompt

If the roadmap is empty i want to display some kind of welcome message like excalidraw does. The welcome message should show Learningmap as a title and underneath that all data is stored locally in your browser. Under that i want to show buttons for opening a file, for adding a topic and for opening the help. If something is added to the learningmap the welcome message should disappear.

---

💡 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)
learningmap	Ready	Preview	Comment	Oct 12, 2025 2:07pm

[mikebarkmin]

@copilot something is wrong with the height on my android phone, since stuff is cut off. Also the help popup does not appear, only after adding a node.

[Copilot]

@copilot something is wrong with the height on my android phone, since stuff is cut off. Also the help popup does not appear, only after adding a node.

Fixed both issues in commit b5a6f73:

1. Help dialog now appears: Changed from position: absolute to position: fixed with z-index: 1000
2. Mobile layout fixed: Changed to min-height: 100% with overflow-y: auto, added responsive CSS for mobile screens (smaller fonts, adjusted padding, full-width buttons)

Mobile view screenshot (375x667):

[mikebarkmin]

@copilot I think that the learning map editor is still cut off on mobile.

[Copilot]

@copilot I think that the learning map editor is still cut off on mobile.

Fixed in commit 1a8b0c6. Changed the welcome message to use absolute positioning with all edges (top/right/bottom/left) and height: 100% instead of min-height. Also added align-items: flex-start for mobile to prevent content being cut off at the bottom.

Mobile view (360x640):

The editor canvas is now properly constrained on all mobile devices.