From eb97476004ddbd6ad28a18c0d4d18645f6295698 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 13 Oct 2025 09:14:52 +0000
Subject: [PATCH 1/4] Initial plan


From ef9bb636534dc3f0bfde5c7928b3b475c47e0959 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 13 Oct 2025 09:23:39 +0000
Subject: [PATCH 2/4] Implement keyboard shortcuts improvements

- Add max-height and overflow-y to help dialog for scrolling on small screens
- Add Ctrl+A shortcut for selecting all nodes
- Add Reset option to menu toolbar with Ctrl+Del shortcut hint
- Show keyboard shortcut hints next to menu items (Ctrl+1-4, Ctrl+P, Ctrl+D, Ctrl+Del)
- Track mouse position to place nodes under cursor when using keyboard shortcuts
- Add selectAllNodes translation for both English and German

Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>
---
 packages/learningmap/src/EditorToolbar.tsx    | 33 ++++++++++++---
 .../learningmap/src/LearningMapEditor.tsx     | 42 +++++++++++++++----
 packages/learningmap/src/index.css            |  2 +
 packages/learningmap/src/translations.ts      |  3 ++
 4 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/packages/learningmap/src/EditorToolbar.tsx b/packages/learningmap/src/EditorToolbar.tsx
index 9560412..4268581 100644
--- a/packages/learningmap/src/EditorToolbar.tsx
+++ b/packages/learningmap/src/EditorToolbar.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Menu, MenuButton, MenuDivider, MenuItem, SubMenu } from "@szhsin/react-menu";
 import "@szhsin/react-menu/dist/index.css";
 import '@szhsin/react-menu/dist/transitions/zoom.css';
-import { Plus, Bug, Settings, Eye, Menu as MenuI, FolderOpen, Download, ImageDown, ExternalLink, Share2 } from "lucide-react";
+import { Plus, Bug, Settings, Eye, Menu as MenuI, FolderOpen, Download, ImageDown, ExternalLink, Share2, RotateCcw } from "lucide-react";
 import { getTranslations } from "./translations";
 
 interface EditorToolbarProps {
@@ -21,6 +21,7 @@ interface EditorToolbarProps {
   onDownlad: () => void;
   onOpen: () => void;
   onShare: () => void;
+  onReset: () => void;
   language?: string;
 }
 
@@ -40,6 +41,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
   onDownlad,
   onOpen,
   onShare,
+  onReset,
   language = "en",
 }) => {
   const t = getTranslations(language);
@@ -48,10 +50,22 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
     <div className="editor-toolbar">
       <div className="toolbar-group">
         <Menu menuButton={<MenuButton disabled={previewMode} className="toolbar-button"><Plus size={16} /> <span className="toolbar-label">{t.nodes}</span></MenuButton>}>
-          <MenuItem onClick={() => onAddNewNode("task")}>{t.addTask}</MenuItem>
-          <MenuItem onClick={() => onAddNewNode("topic")}>{t.addTopic}</MenuItem>
-          <MenuItem onClick={() => onAddNewNode("image")}>{t.addImage}</MenuItem>
-          <MenuItem onClick={() => onAddNewNode("text")}>{t.addText}</MenuItem>
+          <MenuItem onClick={() => onAddNewNode("task")}>
+            <span>{t.addTask}</span>
+            <span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+1</span>
+          </MenuItem>
+          <MenuItem onClick={() => onAddNewNode("topic")}>
+            <span>{t.addTopic}</span>
+            <span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+2</span>
+          </MenuItem>
+          <MenuItem onClick={() => onAddNewNode("image")}>
+            <span>{t.addImage}</span>
+            <span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+3</span>
+          </MenuItem>
+          <MenuItem onClick={() => onAddNewNode("text")}>
+            <span>{t.addText}</span>
+            <span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+4</span>
+          </MenuItem>
         </Menu>
         <button disabled={previewMode} onClick={onOpenSettingsDrawer} className="toolbar-button">
           <Settings size={16} /> <span className="toolbar-label">{t.settings}</span>
@@ -69,9 +83,15 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
             <Share2 size={16} /> <span>{t.share}</span>
           </MenuItem>
           <MenuDivider />
+          <MenuItem onClick={onReset}>
+            <RotateCcw size={16} /> <span>{t.reset}</span>
+            <span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+Del</span>
+          </MenuItem>
+          <MenuDivider />
           <SubMenu className={`${debugMode ? "active" : ""}`} label={<><Bug size={16} /> <span>{t.debug}</span></>}>
             <MenuItem type="checkbox" checked={debugMode} onClick={onToggleDebugMode}>
-              {t.enableDebugMode}
+              <span>{t.enableDebugMode}</span>
+              <span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+D</span>
             </MenuItem>
             <MenuItem type="checkbox" checked={showCompletionNeeds} onClick={e => onSetShowCompletionNeeds(e.checked ?? false)} disabled={!debugMode}>
               {t.showCompletionNeedsEdges}
@@ -85,6 +105,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
           </SubMenu>
           <MenuItem onClick={onTogglePreviewMode} className={`${previewMode ? "active" : ""}`}>
             <Eye size={16} /> <span>{t.preview}</span>
+            <span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+P</span>
           </MenuItem>
           <MenuDivider />
           <MenuItem href="https://openpatch.org" target="_blank" rel="noopener noreferrer">
diff --git a/packages/learningmap/src/LearningMapEditor.tsx b/packages/learningmap/src/LearningMapEditor.tsx
index 1aace21..c34b7c8 100644
--- a/packages/learningmap/src/LearningMapEditor.tsx
+++ b/packages/learningmap/src/LearningMapEditor.tsx
@@ -82,6 +82,7 @@ export function LearningMapEditor({
   const [settings, setSettings] = useState<Settings>(parsedRoadmap.settings);
   const [showGrid, setShowGrid] = useState(false);
   const [clipboard, setClipboard] = useState<{ nodes: Node<NodeData>[]; edges: Edge[] } | null>(null);
+  const [lastMousePosition, setLastMousePosition] = useState<{ x: number; y: number } | null>(null);
 
   // Use language from settings if available, otherwise use prop
   const effectiveLanguage = settings?.language || language;
@@ -98,6 +99,7 @@ export function LearningMapEditor({
     { action: t.shortcuts.togglePreviewMode, shortcut: "Ctrl+P" },
     { action: t.shortcuts.toggleDebugMode, shortcut: "Ctrl+D" },
     { action: t.shortcuts.selectMultipleNodes, shortcut: "Ctrl+Click or Shift+Drag" },
+    { action: t.shortcuts.selectAllNodes, shortcut: "Ctrl+A" },
     { action: t.shortcuts.showHelp, shortcut: "Ctrl+? or Help Button" },
     { action: t.shortcuts.zoomIn, shortcut: "Ctrl++" },
     { action: t.shortcuts.zoomOut, shortcut: "Ctrl+-" },
@@ -306,12 +308,16 @@ export function LearningMapEditor({
 
   const addNewNode = useCallback(
     (type: "task" | "topic" | "image" | "text") => {
-      const centerPos = screenToFlowPosition({ x: window.innerWidth / 2, y: window.innerHeight / 2 });
+      // Use last mouse position if available, otherwise use center of screen
+      const position = lastMousePosition 
+        ? screenToFlowPosition(lastMousePosition)
+        : screenToFlowPosition({ x: window.innerWidth / 2, y: window.innerHeight / 2 });
+      
       if (type === "task") {
         const newNode: Node<NodeData> = {
           id: `node${nextNodeId}`,
           type,
-          position: centerPos,
+          position,
           data: {
             label: t.newTask,
             summary: "",
@@ -324,7 +330,7 @@ export function LearningMapEditor({
         const newNode: Node<NodeData> = {
           id: `node${nextNodeId}`,
           type,
-          position: centerPos,
+          position,
           data: {
             label: t.newTopic,
             summary: "",
@@ -339,7 +345,7 @@ export function LearningMapEditor({
           id: `background-node${nextNodeId}`,
           type,
           zIndex: -2,
-          position: centerPos,
+          position,
           data: {
             src: "",
           },
@@ -350,7 +356,7 @@ export function LearningMapEditor({
         const newNode: Node<TextNodeData> = {
           id: `background-node${nextNodeId}`,
           type,
-          position: centerPos,
+          position,
           zIndex: -1,
           data: {
             text: t.backgroundTextDefault,
@@ -363,7 +369,7 @@ export function LearningMapEditor({
       }
       setSaved(false);
     },
-    [nextNodeId, screenToFlowPosition, setNodes, setSaved, t]
+    [nextNodeId, lastMousePosition, screenToFlowPosition, setNodes, setSaved, t]
   );
 
   const handleSave = useCallback(() => {
@@ -679,6 +685,10 @@ export function LearningMapEditor({
     }
   }, [setNodes, setEdges, setNextNodeId, setSaved, t]);
 
+  const handleSelectAll = useCallback(() => {
+    setSelectedNodeIds(nodes.map(n => n.id));
+  }, [nodes, setSelectedNodeIds]);
+
   const handleSelectionChange: OnSelectionChangeFunc = useCallback(
     ({ nodes: selectedNodes }) => {
       setSelectedNodeIds(selectedNodes.map(n => n.id));
@@ -686,6 +696,17 @@ export function LearningMapEditor({
     [setSelectedNodeIds]
   );
 
+  // Track mouse position for node placement
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      setLastMousePosition({ x: e.clientX, y: e.clientY });
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       //save shortcut
@@ -764,7 +785,6 @@ export function LearningMapEditor({
         handleZoomToSelection();
       }
 
-      console.log(e);
       // Toggle grid shortcut
       if ((e.ctrlKey || e.metaKey) && e.code === "Backslash") {
         e.preventDefault();
@@ -790,6 +810,11 @@ export function LearningMapEditor({
         e.preventDefault();
         handlePaste();
       }
+      // Select all shortcut
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a' && !e.shiftKey) {
+        e.preventDefault();
+        handleSelectAll();
+      }
 
       // Dismiss with Escape
       if (helpOpen && e.key === 'Escape') {
@@ -802,7 +827,7 @@ export function LearningMapEditor({
     };
   }, [handleSave, handleUndo, handleRedo, addNewNode, helpOpen, setHelpOpen, togglePreviewMode, toggleDebugMode,
     handleZoomIn, handleZoomOut, handleResetZoom, handleFitView, handleZoomToSelection, handleToggleGrid,
-    handleResetMap, handleCut, handleCopy, handlePaste]);
+    handleResetMap, handleCut, handleCopy, handlePaste, handleSelectAll]);
 
   return (
     <>
@@ -822,6 +847,7 @@ export function LearningMapEditor({
         onDownlad={handleDownload}
         onOpen={handleOpen}
         onShare={handleShare}
+        onReset={handleResetMap}
         language={effectiveLanguage}
       />
       {previewMode && <LearningMap roadmapData={roadmapState} language={effectiveLanguage} />}
diff --git a/packages/learningmap/src/index.css b/packages/learningmap/src/index.css
index 6b647be..83af99f 100644
--- a/packages/learningmap/src/index.css
+++ b/packages/learningmap/src/index.css
@@ -624,6 +624,7 @@ header.drawer-header {
 dialog.help[open] {
   width: 600px;
   max-width: 90vw;
+  max-height: 90vh;
   border: none;
   border-radius: 12px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
@@ -636,6 +637,7 @@ dialog.help[open] {
   display: flex;
   flex-direction: column;
   z-index: 1000;
+  overflow-y: auto;
 
   table {
     width: 100%;
diff --git a/packages/learningmap/src/translations.ts b/packages/learningmap/src/translations.ts
index 77c6b22..12cbfb0 100644
--- a/packages/learningmap/src/translations.ts
+++ b/packages/learningmap/src/translations.ts
@@ -43,6 +43,7 @@ export interface Translations {
     togglePreviewMode: string;
     toggleDebugMode: string;
     selectMultipleNodes: string;
+    selectAllNodes: string;
     showHelp: string;
     zoomIn: string;
     zoomOut: string;
@@ -234,6 +235,7 @@ const en: Translations = {
     togglePreviewMode: "Toggle Preview Mode",
     toggleDebugMode: "Toggle Debug Mode",
     selectMultipleNodes: "Select Multiple Nodes",
+    selectAllNodes: "Select All Nodes",
     showHelp: "Show Help",
     zoomIn: "Zoom In",
     zoomOut: "Zoom Out",
@@ -430,6 +432,7 @@ const de: Translations = {
     togglePreviewMode: "Vorschau-Modus umschalten",
     toggleDebugMode: "Debug-Modus umschalten",
     selectMultipleNodes: "Mehrere Knoten auswählen",
+    selectAllNodes: "Alle Knoten auswählen",
     showHelp: "Hilfe anzeigen",
     zoomIn: "Vergrößern",
     zoomOut: "Verkleinern",

From 3898e76bdbd9e219f6f17686734724938390eef2 Mon Sep 17 00:00:00 2001
From: Mike Barkmin <mike@barkmin.eu>
Date: Mon, 13 Oct 2025 11:39:40 +0200
Subject: [PATCH 3/4] fix select all

---
 packages/learningmap/src/LearningMapEditor.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/learningmap/src/LearningMapEditor.tsx b/packages/learningmap/src/LearningMapEditor.tsx
index c34b7c8..8087330 100644
--- a/packages/learningmap/src/LearningMapEditor.tsx
+++ b/packages/learningmap/src/LearningMapEditor.tsx
@@ -309,10 +309,10 @@ export function LearningMapEditor({
   const addNewNode = useCallback(
     (type: "task" | "topic" | "image" | "text") => {
       // Use last mouse position if available, otherwise use center of screen
-      const position = lastMousePosition 
+      const position = lastMousePosition
         ? screenToFlowPosition(lastMousePosition)
         : screenToFlowPosition({ x: window.innerWidth / 2, y: window.innerHeight / 2 });
-      
+
       if (type === "task") {
         const newNode: Node<NodeData> = {
           id: `node${nextNodeId}`,
@@ -686,7 +686,10 @@ export function LearningMapEditor({
   }, [setNodes, setEdges, setNextNodeId, setSaved, t]);
 
   const handleSelectAll = useCallback(() => {
-    setSelectedNodeIds(nodes.map(n => n.id));
+    setNodes(nds => nds.map(n => ({
+      ...n,
+      selected: true,
+    })))
   }, [nodes, setSelectedNodeIds]);
 
   const handleSelectionChange: OnSelectionChangeFunc = useCallback(

From 5bcebd4c6db378674d3533704ce5a06cb0892f72 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 13 Oct 2025 09:45:00 +0000
Subject: [PATCH 4/4] Add close button (X) to help dialog header for better
 mobile usability

- Added X icon import from lucide-react
- Restructured help dialog with separate header, content, and footer sections
- Added close button in header with X icon for easier access on mobile
- Updated CSS to properly style the new header/footer structure with borders
- Content section now scrolls independently while header/footer remain fixed

Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>
---
 .../learningmap/src/LearningMapEditor.tsx     | 45 +++++++++++--------
 packages/learningmap/src/index.css            | 30 +++++++++++--
 2 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/packages/learningmap/src/LearningMapEditor.tsx b/packages/learningmap/src/LearningMapEditor.tsx
index 8087330..a740508 100644
--- a/packages/learningmap/src/LearningMapEditor.tsx
+++ b/packages/learningmap/src/LearningMapEditor.tsx
@@ -30,7 +30,7 @@ import FloatingEdge from "./FloatingEdge";
 import { EditorToolbar } from "./EditorToolbar";
 import { parseRoadmapData } from "./helper";
 import { LearningMap } from "./LearningMap";
-import { Info, Redo, Undo, RotateCw, ShieldAlert } from "lucide-react";
+import { Info, Redo, Undo, RotateCw, ShieldAlert, X } from "lucide-react";
 import useUndoable from "./useUndoable";
 import { MultiNodePanel } from "./MultiNodePanel";
 import { getTranslations } from "./translations";
@@ -936,24 +936,33 @@ export function LearningMapEditor({
           open={helpOpen}
           onClose={() => setHelpOpen(false)}
         >
-          <h2>{t.keyboardShortcuts}</h2>
-          <table>
-            <thead>
-              <tr>
-                <th>{t.action}</th>
-                <th>{t.shortcut}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {keyboardShortcuts.map((item) => (
-                <tr key={item.action}>
-                  <td>{item.action}</td>
-                  <td>{item.shortcut}</td>
+          <header className="help-header">
+            <h2>{t.keyboardShortcuts}</h2>
+            <button className="close-button" onClick={() => setHelpOpen(false)} aria-label={t.close}>
+              <X size={20} />
+            </button>
+          </header>
+          <div className="help-content">
+            <table>
+              <thead>
+                <tr>
+                  <th>{t.action}</th>
+                  <th>{t.shortcut}</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
-          <button className="primary-button" onClick={() => setHelpOpen(false)}>{t.close}</button>
+              </thead>
+              <tbody>
+                {keyboardShortcuts.map((item) => (
+                  <tr key={item.action}>
+                    <td>{item.action}</td>
+                    <td>{item.shortcut}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <div className="help-footer">
+            <button className="primary-button" onClick={() => setHelpOpen(false)}>{t.close}</button>
+          </div>
         </dialog>
         <ShareDialog
           open={shareDialogOpen}
diff --git a/packages/learningmap/src/index.css b/packages/learningmap/src/index.css
index 83af99f..fdee311 100644
--- a/packages/learningmap/src/index.css
+++ b/packages/learningmap/src/index.css
@@ -628,16 +628,40 @@ dialog.help[open] {
   border: none;
   border-radius: 12px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-  padding: 24px;
+  padding: 0;
   background: white;
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
-  gap: 16px;
   display: flex;
   flex-direction: column;
   z-index: 1000;
-  overflow-y: auto;
+  overflow: hidden;
+
+  .help-header {
+    padding: 24px 24px 16px 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #e5e7eb;
+
+    h2 {
+      margin: 0;
+      font-size: 24px;
+      font-weight: 700;
+    }
+  }
+
+  .help-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px 24px;
+  }
+
+  .help-footer {
+    padding: 16px 24px 24px 24px;
+    border-top: 1px solid #e5e7eb;
+  }
 
   table {
     width: 100%;