From acce492d8a33cc22138acc6e80c794b8b0a18928 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Tue, 10 Mar 2026 11:11:55 +1300
Subject: [PATCH] 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>
---
 src/components/Header.tsx                  | 15 +++++++++++----
 src/components/WorkflowCanvas.tsx          |  2 +-
 src/components/quickstart/WelcomeModal.tsx |  3 ++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 1a0e58f6..c02a8f86 100644
--- a/src/components/Header.tsx
+++ b/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">
-          <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
+            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 ? (
diff --git a/src/components/WorkflowCanvas.tsx b/src/components/WorkflowCanvas.tsx
index 912e38cf..4c34988e 100644
--- a/src/components/WorkflowCanvas.tsx
+++ b/src/components/WorkflowCanvas.tsx
@@ -1904,7 +1904,7 @@ export function WorkflowCanvas() {
       )}
 
       {/* Welcome Modal */}
-      {isCanvasEmpty && showQuickstart && (
+      {showQuickstart && (
         <WelcomeModal
           onWorkflowGenerated={async (workflow) => {
             await loadWorkflow(workflow);
diff --git a/src/components/quickstart/WelcomeModal.tsx b/src/components/quickstart/WelcomeModal.tsx
index 5d717804..988a62d4 100644
--- a/src/components/quickstart/WelcomeModal.tsx
+++ b/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}