fix: minor styles and ux

2026-03-11 00:21:37 +01:00
parent 08d66b59c2
commit 7c1039f4c6
3 changed files with 185 additions and 78 deletions
--- a/frontend/src/app/canvas/CanvasMenubar.tsx
+++ b/frontend/src/app/canvas/CanvasMenubar.tsx
@@ -1,8 +1,8 @@
 /**
- * Menubar for the canvas page: Project (Import/Export), Edit (Undo/Redo), View (Fit View, Theme).
+ * Menubar for the canvas page: Project (Import/Export), Edit (Undo/Redo, Duplicate/Copy/Paste, Rename), View (Fit View, Theme).
 */

-import React, { useEffect, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import {
  Menubar,
@@ -19,7 +19,8 @@ import {
 import { Kbd, KbdGroup } from '@/components/ui/kbd'
 import { useTheme } from '@/lib/themeContext'
 import { usePlatform } from '@/app/platform/platformContext'
-import { ArrowLeft, Download, FolderOpen, Moon, Redo2, Sun, Undo2 } from 'lucide-react'
+import { ArrowLeft, ClipboardPaste, Copy, CopyPlus, Download, FolderOpen, Moon, Pencil, Redo2, Sun, Undo2 } from 'lucide-react'
+import { Input } from '@/components/ui/input'

 export type CanvasMenubarProps = {
  onImport: () => void
@@ -28,6 +29,11 @@ export type CanvasMenubarProps = {
  redo: () => void
  canUndo: boolean
  canRedo: boolean
+  onDuplicate?: () => void
+  onCopy?: () => void
+  onPaste?: () => void
+  canDuplicate?: boolean
+  canCopy?: boolean
  onFitView?: () => void
 }

@@ -46,16 +52,58 @@ export function CanvasMenubar({
  redo,
  canUndo,
  canRedo,
+  onDuplicate,
+  onCopy,
+  onPaste,
+  canDuplicate = false,
+  canCopy = false,
  onFitView,
 }: CanvasMenubarProps) {
  const { theme, setTheme } = useTheme()
  const { projectId } = useParams<{ projectId: string }>()
-  const { projects } = usePlatform()
+  const { projects, renameProject } = usePlatform()
  const projectName = useMemo(
    () => (projectId ? projects.find((p) => p.id === projectId)?.name ?? null : null),
    [projectId, projects]
  )

+  const [isRenamingProject, setIsRenamingProject] = useState(false)
+  const [renameValue, setRenameValue] = useState('')
+  const renameInputRef = useRef<HTMLInputElement>(null)
+  const ignoreNextBlurRef = useRef(false)
+
+  useEffect(() => {
+    if (isRenamingProject) {
+      setRenameValue(projectName ?? '')
+      ignoreNextBlurRef.current = true
+      // Delay focus so the Project dropdown can close first and not steal focus back (which would trigger blur)
+      const t = setTimeout(() => {
+        renameInputRef.current?.focus()
+        renameInputRef.current?.select()
+      }, 100)
+      return () => clearTimeout(t)
+    }
+  }, [isRenamingProject, projectName])
+
+  const applyRename = useCallback(() => {
+    if (!projectId || !renameProject) return
+    const trimmed = renameValue.trim()
+    if (trimmed) renameProject(projectId, trimmed)
+    setIsRenamingProject(false)
+  }, [projectId, renameProject, renameValue])
+
+  const cancelRename = useCallback(() => {
+    setIsRenamingProject(false)
+  }, [])
+
+  const handleRenameBlur = useCallback(() => {
+    if (ignoreNextBlurRef.current) {
+      ignoreNextBlurRef.current = false
+      return
+    }
+    applyRename()
+  }, [applyRename])
+
  useEffect(() => {
    const onKeyDown = (ev: KeyboardEvent) => {
      if (matchKey(ev, UNDO_KEYS)) {
@@ -99,6 +147,18 @@ export function CanvasMenubar({
              <Download className="h-4 w-4" />
              Export…
            </MenubarItem>
+            {projectId && (
+              <>
+                <MenubarSeparator />
+                <MenubarItem
+                  onClick={() => setIsRenamingProject(true)}
+                  className="gap-2"
+                >
+                  <Pencil className="h-4 w-4" />
+                  Rename
+                </MenubarItem>
+              </>
+            )}
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
@@ -122,6 +182,40 @@ export function CanvasMenubar({
                </KbdGroup>
              </span>
            </MenubarItem>
+            {(onDuplicate != null || onCopy != null || onPaste != null) && <MenubarSeparator />}
+            {onDuplicate != null && (
+              <MenubarItem onClick={onDuplicate} disabled={!canDuplicate} className="gap-2">
+                <CopyPlus className="h-4 w-4" />
+                Duplicate
+                <span className="ml-auto pl-4">
+                  <KbdGroup>
+                    <Kbd>⌘D</Kbd>
+                  </KbdGroup>
+                </span>
+              </MenubarItem>
+            )}
+            {onCopy != null && (
+              <MenubarItem onClick={onCopy} disabled={!canCopy} className="gap-2">
+                <Copy className="h-4 w-4" />
+                Copy
+                <span className="ml-auto pl-4">
+                  <KbdGroup>
+                    <Kbd>⌘C</Kbd>
+                  </KbdGroup>
+                </span>
+              </MenubarItem>
+            )}
+            {onPaste != null && (
+              <MenubarItem onClick={onPaste} className="gap-2">
+                <ClipboardPaste className="h-4 w-4" />
+                Paste
+                <span className="ml-auto pl-4">
+                  <KbdGroup>
+                    <Kbd>⌘V</Kbd>
+                  </KbdGroup>
+                </span>
+              </MenubarItem>
+            )}
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
@@ -162,10 +256,33 @@ export function CanvasMenubar({
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
-      {projectName && (
-        <span className="pointer-events-none absolute left-1/2 -translate-x-1/2 truncate max-w-[40%] text-sm font-medium text-foreground">
-          {projectName}
-        </span>
+      {projectId && (
+        <div className="absolute left-1/2 -translate-x-1/2 flex justify-center max-w-[40%] min-w-[120px]">
+          {isRenamingProject ? (
+            <Input
+              ref={renameInputRef}
+              type="text"
+              value={renameValue}
+              onChange={(e) => setRenameValue(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault()
+                  applyRename()
+                } else if (e.key === 'Escape') {
+                  e.preventDefault()
+                  cancelRename()
+                }
+              }}
+              onBlur={handleRenameBlur}
+              className="h-7 text-sm font-medium text-center"
+              aria-label="Project name"
+            />
+          ) : (
+            <span className="pointer-events-none truncate text-sm font-medium text-foreground">
+              {projectName ?? 'Untitled'}
+            </span>
+          )}
+        </div>
      )}
    </div>
  )
--- a/frontend/src/app/canvas/CanvasPage.tsx
+++ b/frontend/src/app/canvas/CanvasPage.tsx
@@ -68,6 +68,7 @@ import {
 } from '@/app/platform/projectGraphStorage'

 const SNAP_GRID: [number, number] = [15, 15]
+const DUPLICATE_OFFSET = { x: 30, y: 30 }
 const snapToGrid = (x: number, y: number): { x: number; y: number } => ({
  x: Math.round(x / SNAP_GRID[0]) * SNAP_GRID[0],
  y: Math.round(y / SNAP_GRID[1]) * SNAP_GRID[1],
@@ -333,6 +334,59 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
    [setStateImmediate]
  )

+  const selectedNodes = useMemo(
+    () => nodes.filter((n) => (n as Node & { selected?: boolean }).selected),
+    [nodes]
+  )
+
+  const handleDuplicate = useCallback(() => {
+    if (selectedNodes.length === 0 || !setNodes) return
+    setNodes((nds: Node[]) => {
+      const existingIds = nds.map((n) => n.id)
+      const toAdd: Node[] = []
+      for (const node of selectedNodes) {
+        const n = node as Node & { selected?: boolean }
+        const pos = n.position ?? { x: 0, y: 0 }
+        const newId = getNextNodeId(String(n.type), [...existingIds, ...toAdd.map((x) => x.id)])
+        existingIds.push(newId)
+        const newNode: Node = {
+          id: newId,
+          type: n.type,
+          position: { x: pos.x + DUPLICATE_OFFSET.x, y: pos.y + DUPLICATE_OFFSET.y },
+          data: typeof n.data === 'object' && n.data !== null ? { ...(n.data as object) } : n.data,
+          style: getDefaultStyle(String(n.type)),
+        }
+        if (
+          newNode.data &&
+          typeof newNode.data === 'object' &&
+          'title' in newNode.data &&
+          String(n.type) === 'config'
+        ) {
+          ;(newNode.data as Record<string, unknown>).title = `${newId}`
+        }
+        toAdd.push(newNode)
+      }
+      return nds.concat(toAdd)
+    })
+  }, [selectedNodes, setNodes])
+
+  const handleCopy = useCallback(() => {
+    if (selectedNodes.length !== 1) return
+    const node = selectedNodes[0] as Node & { selected?: boolean }
+    const copy = {
+      id: node.id,
+      type: node.type,
+      data: node.data,
+      position: node.position,
+      style: node.style,
+    }
+    navigator.clipboard?.writeText(JSON.stringify(copy)).catch(() => {})
+  }, [selectedNodes])
+
+  const handlePaste = useCallback(() => {
+    flowActionsRef.current?.pasteAtViewportCenter?.()
+  }, [])
+
  const flowContextValue = useMemo(
    () => ({
      nodes,
@@ -498,6 +552,11 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
        redo={redo}
        canUndo={canUndo}
        canRedo={canRedo}
+        onDuplicate={handleDuplicate}
+        onCopy={handleCopy}
+        onPaste={handlePaste}
+        canDuplicate={selectedNodes.length > 0}
+        canCopy={selectedNodes.length === 1}
        onFitView={() => flowActionsRef.current?.fitView?.()}
      />
      {apiTodosCount !== null && (