fix(network): consolidate import buttons, redesign empty state, add shortcut overlay

- Import/Export button in editor header: removed standalone Import button, moved
  draw.io import into Export/Import dropdown with labelled sections; fixes
  conceptual trap where Import implied operating on the current diagram
- List page: replaced two identical Upload-icon Import buttons with a single
  dropdown (Import JSON / Import draw.io) with format descriptions
- Empty state: replaced icon-in-box with a horizontal card featuring a static
  SVG topology preview, MSP-specific value prop, and dual CTAs
- Keyboard shortcuts: new KeyboardShortcutsOverlay component (4-group grid),
  triggered by ? key or the ? button pinned to the canvas bottom-right corner;
  wired into useCanvasShortcuts hook
- Fixed Share2 → FileOutput icon for draw.io export (Share2 = send to someone,
  FileOutput = export file format)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-04-14 04:49:25 +00:00
parent cf9c258f9e
commit 015df1fe5f
5 changed files with 321 additions and 43 deletions

View File

@@ -37,6 +37,7 @@ export function useCanvasShortcuts({
onRedo,
onNudge,
onSetMode,
onToggleShortcuts,
}: {
nodes: Node[]
edges: Edge[]
@@ -48,6 +49,7 @@ export function useCanvasShortcuts({
onRedo: () => void
onNudge: (dx: number, dy: number) => void
onSetMode: (mode: 'select' | 'pan' | 'connect') => void
onToggleShortcuts: () => void
}) {
const { getNodes, fitView, screenToFlowPosition, setNodes: rfSetNodes } = useReactFlow()
const clipboardRef = useRef<ClipboardData | null>(null)
@@ -279,12 +281,15 @@ export function useCanvasShortcuts({
} else if (e.key === '[' && !ctrl) {
e.preventDefault()
sendSelectedToBack()
} else if (e.key === '?' && !ctrl) {
e.preventDefault()
onToggleShortcuts()
}
}
document.addEventListener('keydown', handleKeyDown)
return () => document.removeEventListener('keydown', handleKeyDown)
}, [copyNodes, pasteNodes, duplicateNodes, selectAll, fitView, bringSelectedToFront, sendSelectedToBack, onUndo, onRedo, onNudge, onSetMode])
}, [copyNodes, pasteNodes, duplicateNodes, selectAll, fitView, bringSelectedToFront, sendSelectedToBack, onUndo, onRedo, onNudge, onSetMode, onToggleShortcuts])
return {
copyNodes,