Merge pull request #3 from openpatch/copilot/add-welcome-message-for-empty-roadmap

Add welcome message for empty roadmap

Author: mikebarkmin

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

@@ -6,6 +6,8 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  font-family: sans-serif;
 }
 
 /* Toolbar */
@@ -553,13 +555,13 @@ dialog.help[open] {
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   padding: 24px;
   background: white;
-  position: absolute;
+  position: fixed;
   top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateY(-50%);
   gap: 16px;
   display: flex;
   flex-direction: column;
+  z-index: 1000;
 
   table {
     width: 100%;
@@ -693,3 +695,94 @@ dialog.help[open] {
     margin-top: 4px;
   }
 }
+
+/* Welcome Message */
+.welcome-message {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  pointer-events: none;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.welcome-content {
+  text-align: center;
+  max-width: 500px;
+  width: 100%;
+  padding: 40px 20px;
+  pointer-events: auto;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.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;
+}
+
+/* Responsive adjustments for mobile */
+@media (max-width: 640px) {
+  .editor-toolbar {
+    padding: 8px 12px;
+  }
+
+  .toolbar-button {
+    padding: 6px 12px;
+    font-size: 13px;
+  }
+
+  .toolbar-label {
+    display: none;
+  }
+
+  .welcome-title {
+    font-size: 36px;
+  }
+
+  .welcome-content {
+    padding: 20px 16px;
+  }
+
+  .welcome-subtitle {
+    font-size: 24px;
+    margin: 0 0 24px 0;
+  }
+
+  .welcome-actions button {
+    max-width: 100%;
+    font-size: 14px;
+    padding: 10px 20px;
+  }
+}

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> = {