From 794207f7e2264914fc9552fe4d00b7601e7314fe Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 12 Oct 2025 12:38:16 +0000 Subject: [PATCH 1/5] Initial plan From 3553d54630b04d8a104fec8e55ee2b8bf774dbc8 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 12 Oct 2025 12:49:41 +0000 Subject: [PATCH 2/5] 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> --- .../learningmap/src/LearningMapEditor.tsx | 9 ++++ packages/learningmap/src/WelcomeMessage.tsx | 42 ++++++++++++++++ packages/learningmap/src/index.css | 50 +++++++++++++++++++ packages/learningmap/src/translations.ts | 21 ++++++++ 4 files changed, 122 insertions(+) create mode 100644 packages/learningmap/src/WelcomeMessage.tsx 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..e2cf20e 100644 --- a/packages/learningmap/src/index.css +++ b/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; +} 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 = { From 37d56562145b324bcd810eafe05c8df9bba2458d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 12 Oct 2025 13:28:54 +0000 Subject: [PATCH 3/5] Fix mobile layout and help dialog issues - Changed help dialog from position: absolute to fixed with z-index: 1000 - Changed welcome message from height: 100% to min-height: 100% - Added overflow-y: auto to welcome message for scrollability - Added responsive CSS for mobile devices (max-width: 640px) - Reduced font sizes and padding on mobile - Made buttons full width on mobile - Added box-sizing and width management for better responsiveness Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com> --- packages/learningmap/src/index.css | 30 +++++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/packages/learningmap/src/index.css b/packages/learningmap/src/index.css index e2cf20e..3ee7890 100644 --- a/packages/learningmap/src/index.css +++ b/packages/learningmap/src/index.css @@ -553,13 +553,14 @@ 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%); gap: 16px; display: flex; flex-direction: column; + z-index: 1000; table { width: 100%; @@ -700,20 +701,23 @@ dialog.help[open] { top: 0; left: 0; width: 100%; - height: 100%; + min-height: 100%; display: flex; align-items: center; justify-content: center; background: #ffffff; z-index: 1; pointer-events: none; + overflow-y: auto; } .welcome-content { text-align: center; max-width: 500px; - padding: 40px; + width: 100%; + padding: 40px 20px; pointer-events: auto; + box-sizing: border-box; } .welcome-title { @@ -743,3 +747,23 @@ dialog.help[open] { font-size: 16px; padding: 12px 24px; } + +/* Responsive adjustments for mobile */ +@media (max-width: 640px) { + .welcome-title { + font-size: 36px; + } + + .welcome-content { + padding: 20px 16px; + } + + .welcome-subtitle { + font-size: 14px; + } + + .welcome-actions button { + max-width: 100%; + font-size: 14px; + } +} From e316bbd121f789acbd54ef192c5dafd87b754134 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 12 Oct 2025 13:43:33 +0000 Subject: [PATCH 4/5] Fix mobile viewport issues for welcome message and editor - Changed welcome message to use height: 100% with top/right/bottom/left positioning instead of min-height - Added overflow-x: hidden to prevent horizontal scrolling - Added flex-shrink: 0 to welcome-content to prevent content compression - Changed mobile layout to align-items: flex-start with padding-top for better positioning - Reduced mobile title size from 36px to 32px for better fit - Added toolbar responsive styles - hide labels and reduce padding on mobile - Added toolbar-button responsive sizing for mobile - All content now properly fits within mobile viewports without being cut off Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com> --- packages/learningmap/src/index.css | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/packages/learningmap/src/index.css b/packages/learningmap/src/index.css index 3ee7890..c8500c2 100644 --- a/packages/learningmap/src/index.css +++ b/packages/learningmap/src/index.css @@ -700,8 +700,10 @@ dialog.help[open] { position: absolute; top: 0; left: 0; + right: 0; + bottom: 0; width: 100%; - min-height: 100%; + height: 100%; display: flex; align-items: center; justify-content: center; @@ -709,6 +711,7 @@ dialog.help[open] { z-index: 1; pointer-events: none; overflow-y: auto; + overflow-x: hidden; } .welcome-content { @@ -718,6 +721,7 @@ dialog.help[open] { padding: 40px 20px; pointer-events: auto; box-sizing: border-box; + flex-shrink: 0; } .welcome-title { @@ -750,8 +754,26 @@ dialog.help[open] { /* 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-message { + align-items: flex-start; + padding-top: 20px; + } + .welcome-title { - font-size: 36px; + font-size: 32px; } .welcome-content { @@ -760,10 +782,12 @@ dialog.help[open] { .welcome-subtitle { font-size: 14px; + margin: 0 0 24px 0; } .welcome-actions button { max-width: 100%; font-size: 14px; + padding: 10px 20px; } } From 1e9fe25a9e643884aa50d0eddefd9603d0dd1e53 Mon Sep 17 00:00:00 2001 From: Mike Barkmin Date: Sun, 12 Oct 2025 16:06:51 +0200 Subject: [PATCH 5/5] fix css --- packages/learningmap/src/index.css | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/learningmap/src/index.css b/packages/learningmap/src/index.css index c8500c2..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 */ @@ -555,8 +557,7 @@ dialog.help[open] { background: white; position: fixed; top: 50%; - left: 50%; - transform: translate(-50%, -50%); + transform: translateY(-50%); gap: 16px; display: flex; flex-direction: column; @@ -707,7 +708,6 @@ dialog.help[open] { display: flex; align-items: center; justify-content: center; - background: #ffffff; z-index: 1; pointer-events: none; overflow-y: auto; @@ -767,13 +767,8 @@ dialog.help[open] { display: none; } - .welcome-message { - align-items: flex-start; - padding-top: 20px; - } - .welcome-title { - font-size: 32px; + font-size: 36px; } .welcome-content { @@ -781,7 +776,7 @@ dialog.help[open] { } .welcome-subtitle { - font-size: 14px; + font-size: 24px; margin: 0 0 24px 0; }