Browse Source

feat(quick-19-01): make logo clickable to open welcome modal and add click-outside-to-close

- Add click handler to Header.tsx logo/title that calls setShowQuickstart(true)
- Wrap logo and title in button element with hover feedback
- Add onClick to WelcomeModal backdrop that calls onClose
- Add stopPropagation to inner dialog to prevent backdrop close on modal clicks
- Remove isCanvasEmpty gate from WelcomeModal rendering in WorkflowCanvas.tsx

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
handoff-20260429-1057
shrimbly 4 months ago
parent
commit
acce492d8a
  1. 7
      src/components/Header.tsx
  2. 2
      src/components/WorkflowCanvas.tsx
  3. 3
      src/components/quickstart/WelcomeModal.tsx

7
src/components/Header.tsx

@ -72,6 +72,7 @@ export function Header() {
revertToSnapshot,
shortcutsDialogOpen,
setShortcutsDialogOpen,
setShowQuickstart,
} = useWorkflowStore();
const [showProjectModal, setShowProjectModal] = useState(false);
@ -218,10 +219,16 @@ export function Header() {
/>
<header className="h-11 bg-neutral-900 border-b border-neutral-800 flex items-center justify-between px-4 shrink-0">
<div className="flex items-center gap-2">
<button
onClick={() => setShowQuickstart(true)}
className="flex items-center gap-2 hover:opacity-80 transition-opacity"
title="Open welcome screen"
>
<img src="/banana_icon.png" alt="Banana" className="w-6 h-6" />
<h1 className="text-2xl font-semibold text-neutral-100 tracking-tight">
Node Banana
</h1>
</button>
<div className="flex items-center gap-2 ml-4 pl-4 border-l border-neutral-700">
{isProjectConfigured ? (

2
src/components/WorkflowCanvas.tsx

@ -1904,7 +1904,7 @@ export function WorkflowCanvas() {
)}
{/* Welcome Modal */}
{isCanvasEmpty && showQuickstart && (
{showQuickstart && (
<WelcomeModal
onWorkflowGenerated={async (workflow) => {
await loadWorkflow(workflow);

3
src/components/quickstart/WelcomeModal.tsx

@ -84,8 +84,9 @@ export function WelcomeModal({
<div
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm"
onWheelCapture={(e) => e.stopPropagation()}
onClick={onClose}
>
<div className={`w-full ${dialogWidth} mx-4 bg-neutral-800 rounded-xl border border-neutral-700 shadow-2xl overflow-clip ${dialogHeight} flex flex-col`}>
<div className={`w-full ${dialogWidth} mx-4 bg-neutral-800 rounded-xl border border-neutral-700 shadow-2xl overflow-clip ${dialogHeight} flex flex-col`} onClick={(e) => e.stopPropagation()}>
{currentView === "initial" && (
<QuickstartInitialView
onNewProject={handleNewProject}

Loading…
Cancel
Save