Skip to content

Add welcome message for empty roadmap#3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mikebarkmin merged 5 commits into from
Oct 12, 2025
Merged

Add welcome message for empty roadmap #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
794207f
Initial plan
Copilot Oct 12, 2025
3553d54
Add welcome message for empty roadmap
Copilot Oct 12, 2025
37d5656
Fix mobile layout and help dialog issues
Copilot Oct 12, 2025
e316bbd
Fix mobile viewport issues for welcome message and editor
Copilot Oct 12, 2025
1e9fe25
fix css
mikebarkmin Oct 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/learningmap/src/LearningMapEditor.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand DownExpand Up@@ -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 = [];
Expand Down
42 changes: 42 additions & 0 deletions packages/learningmap/src/WelcomeMessage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
);
};
99 changes: 96 additions & 3 deletions packages/learningmap/src/index.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,8 @@
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
font-family: sans-serif;
}

/* Toolbar */
Expand DownExpand Up@@ -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%;
Expand DownExpand Up@@ -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;
}
}
21 changes: 21 additions & 0 deletions packages/learningmap/src/translations.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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 = {
Expand DownExpand Up@@ -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 = {
Expand DownExpand Up@@ -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> = {
Expand Down