diff --git a/packages/learningmap/src/LearningMapEditor.tsx b/packages/learningmap/src/LearningMapEditor.tsx index 85bd50e..3d8417d 100644 --- a/packages/learningmap/src/LearningMapEditor.tsx +++ b/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 && ( + addNewNode("topic")} + onShowHelp={() => setHelpOpen(true)} + language={effectiveLanguage} + /> + )} { const className = []; diff --git a/packages/learningmap/src/WelcomeMessage.tsx b/packages/learningmap/src/WelcomeMessage.tsx new file mode 100644 index 0000000..2da1010 --- /dev/null +++ b/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 = ({ + onOpenFile, + onAddTopic, + onShowHelp, + language = "en", +}) => { + const t = getTranslations(language); + + return ( +
+
+

{t.welcomeTitle}

+

{t.welcomeSubtitle}

+
+ + + +
+
+
+ ); +}; diff --git a/packages/learningmap/src/index.css b/packages/learningmap/src/index.css index 993f4a2..87080dd 100644 --- a/packages/learningmap/src/index.css +++ b/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; + } +} diff --git a/packages/learningmap/src/translations.ts b/packages/learningmap/src/translations.ts index 2c9b33e..b4c0b92 100644 --- a/packages/learningmap/src/translations.ts +++ b/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 = {