move add note button up

frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte

@@ -261,10 +261,15 @@
 	let dependents: Record<string, string[]> = $state({})
 
 	let graph: FlowGraphV2 | undefined = $state(undefined)
+	let noteMode = $state(false)
 	export function isNodeVisible(nodeId: string): boolean {
 		return graph?.isNodeVisible(nodeId) ?? false
 	}
 
+	function toggleNoteMode() {
+		noteMode = !noteMode
+	}
+
 	function shouldRunTutorial(tutorialName: string, name: string, index: number) {
 		return (
 			$tutorialsToDo.includes(index) &&
@@ -370,6 +375,8 @@
 			on:generateStep
 			{aiChatOpen}
 			{toggleAiChat}
+			{noteMode}
+			{toggleNoteMode}
 		/>
 	</div>
 
@@ -388,6 +395,7 @@
 			moving={$moving?.id}
 			maxHeight={minHeight}
 			modules={flowStore.val.value.modules}
+			{noteMode}
 			preprocessorModule={flowStore.val.value?.preprocessor_module}
 			{selectedId}
 			{workspace}

frontend/src/lib/components/flows/map/FlowStickyNode.svelte

@@ -2,7 +2,7 @@
 	import type { FlowEditorContext } from '../types'
 	import { getContext } from 'svelte'
 	import { Badge } from '$lib/components/common'
-	import { DollarSign, Settings } from 'lucide-svelte'
+	import { DollarSign, Settings, StickyNote } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
 	import FlowErrorHandlerItem from './FlowErrorHandlerItem.svelte'
 	import FlowAIButton from '$lib/components/copilot/chat/flow/FlowAIButton.svelte'
@@ -15,6 +15,8 @@
 		aiChatOpen?: boolean
 		showFlowAiButton?: boolean
 		toggleAiChat?: () => void
+		noteMode?: boolean
+		toggleNoteMode?: () => void
 	}
 
 	let {
@@ -23,7 +25,9 @@
 		smallErrorHandler,
 		aiChatOpen,
 		showFlowAiButton,
-		toggleAiChat
+		toggleAiChat,
+		noteMode,
+		toggleNoteMode
 	}: Props = $props()
 
 	const { selectedId, flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
@@ -86,4 +90,12 @@
 			{/snippet}
 		</Popover>
 	{/if}
+	<Popover>
+		<button onclick={() => toggleNoteMode?.()} class={nodeClass}>
+			<StickyNote size={14} class={noteMode ? 'text-blue-600' : ''} />
+		</button>
+		{#snippet text()}
+			{noteMode ? 'Exit note mode' : 'Add notes'}
+		{/snippet}
+	</Popover>
 </div>

frontend/src/lib/components/graph/FlowGraphV2.svelte

@@ -34,7 +34,7 @@
 	import BaseEdge from './renderers/edges/BaseEdge.svelte'
 	import EmptyEdge from './renderers/edges/EmptyEdge.svelte'
 	import { sugiyama, dagStratify, coordCenter, decrossTwoLayer, decrossOpt } from 'd3-dag'
-	import { Expand, StickyNote } from 'lucide-svelte'
+	import { Expand } from 'lucide-svelte'
 	import Toggle from '../Toggle.svelte'
 	import DataflowEdge from './renderers/edges/DataflowEdge.svelte'
 	import { encodeState, readFieldsRecursively } from '$lib/utils'
@@ -104,6 +104,7 @@
 		flowJob?: Job | undefined
 		showJobStatus?: boolean
 		suspendStatus?: Record<string, { job: Job; nb: number }>
+		noteMode?: boolean
 		onDelete?: (id: string) => void
 		onInsert?: (detail: {
 			sourceId?: string
@@ -182,7 +183,8 @@
 		flowJob = undefined,
 		showJobStatus = false,
 		suspendStatus = {},
-		flowHasChanged = false
+		flowHasChanged = false,
+		noteMode = false
 	}: Props = $props()
 
 	setContext<{
@@ -378,7 +380,6 @@
 		color: string
 	}
 
-	let noteMode = $state(false)
 	let notes = $state<NoteData[]>([])
 	let nextNoteId = $state(1)
 
@@ -394,9 +395,6 @@
 		return false
 	}
 
-	function toggleNoteMode() {
-		noteMode = !noteMode
-	}
 
 	function onNoteAdded(newNoteFromTool: any) {
 		// Add the note to our separate notes array if a note was created
@@ -691,15 +689,6 @@
 							<Expand size="14" />
 						</ControlButton>
 					{/if}
-					{#if editMode}
-						<ControlButton
-							onclick={toggleNoteMode}
-							class={`!bg-surface ${noteMode ? '!bg-blue-100 dark:!bg-blue-900/30' : ''}`}
-							title={noteMode ? 'Exit note mode' : 'Add notes'}
-						>
-							<StickyNote size="14" class={noteMode ? 'text-blue-600' : ''} />
-						</ControlButton>
-					{/if}
 				</Controls>
 
 				<Controls