Add welcome message for empty roadmap

- Created WelcomeMessage component with title and local storage notice
- Added translations for welcome message (English and German)
- Integrated welcome message into LearningMapEditor
- Shows when no nodes or edges exist in the roadmap
- Provides buttons for: Open File, Add Topic, and Help
- Welcome message automatically disappears when content is added
- Fixed z-index and pointer-events for proper dialog interaction

Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>

Author: Copilot

packages/learningmap/src/LearningMapEditor.tsx

@@ -37,6 +37,7 @@ import { Info, Redo, Undo, RotateCw, ShieldAlert } from "lucide-react";
 import useUndoable from "./useUndoable";
 import { MultiNodePanel } from "./MultiNodePanel";
 import { getTranslations } from "./translations";
+import { WelcomeMessage } from "./WelcomeMessage";
 
 const nodeTypes = {
   topic: TopicNode,
@@ -629,6 +630,14 @@ export function LearningMapEditor({
             backgroundColor: settings?.background?.color || "#ffffff",
           }}
         >
+          {nodes.length === 0 && edges.filter(e => !e.id.startsWith("debug-")).length === 0 && (
+            <WelcomeMessage
+              onOpenFile={handleOpen}
+              onAddTopic={() => addNewNode("topic")}
+              onShowHelp={() => setHelpOpen(true)}
+              language={effectiveLanguage}
+            />
+          )}
           <ReactFlow
             nodes={nodes.map(n => {
               const className = [];

packages/learningmap/src/WelcomeMessage.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { FolderOpen, Plus, Info } from "lucide-react";
+import { getTranslations } from "./translations";
+
+interface WelcomeMessageProps {
+  onOpenFile: () => void;
+  onAddTopic: () => void;
+  onShowHelp: () => void;
+  language?: string;
+}
+
+export const WelcomeMessage: React.FC<WelcomeMessageProps> = ({
+  onOpenFile,
+  onAddTopic,
+  onShowHelp,
+  language = "en",
+}) => {
+  const t = getTranslations(language);
+
+  return (
+    <div className="welcome-message">
+      <div className="welcome-content">
+        <h1 className="welcome-title">{t.welcomeTitle}</h1>
+        <p className="welcome-subtitle">{t.welcomeSubtitle}</p>
+        <div className="welcome-actions">
+          <button onClick={onOpenFile} className="primary-button">
+            <FolderOpen size={18} />
+            {t.welcomeOpenFile}
+          </button>
+          <button onClick={onAddTopic} className="primary-button">
+            <Plus size={18} />
+            {t.welcomeAddTopic}
+          </button>
+          <button onClick={onShowHelp} className="secondary-button">
+            <Info size={18} />
+            {t.welcomeHelp}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/learningmap/src/index.css

@@ -693,3 +693,53 @@ dialog.help[open] {
     margin-top: 4px;
   }
 }
+
+/* Welcome Message */
+.welcome-message {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ffffff;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.welcome-content {
+  text-align: center;
+  max-width: 500px;
+  padding: 40px;
+  pointer-events: auto;
+}
+
+.welcome-title {
+  font-size: 48px;
+  font-weight: 700;
+  color: #1f2937;
+  margin: 0 0 16px 0;
+}
+
+.welcome-subtitle {
+  font-size: 16px;
+  color: #6b7280;
+  margin: 0 0 32px 0;
+}
+
+.welcome-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+}
+
+.welcome-actions button {
+  width: 100%;
+  max-width: 280px;
+  justify-content: center;
+  font-size: 16px;
+  padding: 12px 24px;
+}

packages/learningmap/src/translations.ts

@@ -158,6 +158,13 @@ export interface Translations {
   languageLabel: string;
   languageEnglish: string;
   languageGerman: string;
+
+  // Welcome message
+  welcomeTitle: string;
+  welcomeSubtitle: string;
+  welcomeOpenFile: string;
+  welcomeAddTopic: string;
+  welcomeHelp: string;
 }
 
 const en: Translations = {
@@ -321,6 +328,13 @@ const en: Translations = {
   languageLabel: "Language",
   languageEnglish: "English",
   languageGerman: "German",
+
+  // Welcome message
+  welcomeTitle: "Learningmap",
+  welcomeSubtitle: "All data is stored locally in your browser",
+  welcomeOpenFile: "Open File",
+  welcomeAddTopic: "Add Topic",
+  welcomeHelp: "Help",
 };
 
 const de: Translations = {
@@ -486,6 +500,13 @@ const de: Translations = {
   languageLabel: "Sprache",
   languageEnglish: "Englisch",
   languageGerman: "Deutsch",
+
+  // Welcome message
+  welcomeTitle: "Learningmap",
+  welcomeSubtitle: "Alle Daten werden lokal in Ihrem Browser gespeichert",
+  welcomeOpenFile: "Datei öffnen",
+  welcomeAddTopic: "Thema hinzufügen",
+  welcomeHelp: "Hilfe",
 };
 
 export const translations: Record<string, Translations> = {