From 85da18b4cb9a61bec1bb3f1bbc26c683d2545a53 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 12 Nov 2025 13:09:42 +0100
Subject: [PATCH] Add min size for notes

---
 .../src/lib/components/graph/NoteTool.svelte  | 12 ++++++++---
 .../src/lib/components/graph/noteColors.ts    |  4 ++++
 .../lib/components/graph/noteEditor.svelte.ts |  3 ++-
 .../components/graph/noteManager.svelte.ts    |  1 -
 .../graph/renderers/nodes/NoteNode.svelte     | 20 ++++++++++++-------
 5 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/graph/NoteTool.svelte b/frontend/src/lib/components/graph/NoteTool.svelte
index 8ca53e88b3..9bbbe8d30b 100644
--- a/frontend/src/lib/components/graph/NoteTool.svelte
+++ b/frontend/src/lib/components/graph/NoteTool.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { useSvelteFlow, type XYPosition } from '@xyflow/svelte'
 	import { getNoteEditorContext } from './noteEditor.svelte'
-	import { DEFAULT_NOTE_COLOR } from './noteColors'
+	import { DEFAULT_NOTE_COLOR, MIN_NOTE_WIDTH, MIN_NOTE_HEIGHT } from './noteColors'
 
 	interface Props {
 		exitNoteMode?: () => void
@@ -65,8 +65,14 @@
 
 		const zoom = getViewport().zoom
 		const size = {
-			width: Math.abs(absoluteEndPosition.x - absoluteStartPosition.x) / zoom,
-			height: Math.abs(absoluteEndPosition.y - absoluteStartPosition.y) / zoom
+			width: Math.max(
+				MIN_NOTE_WIDTH,
+				Math.abs(absoluteEndPosition.x - absoluteStartPosition.x) / zoom
+			),
+			height: Math.max(
+				MIN_NOTE_HEIGHT,
+				Math.abs(absoluteEndPosition.y - absoluteStartPosition.y) / zoom
+			)
 		}
 
 		// Create the actual note using NoteEditor context
diff --git a/frontend/src/lib/components/graph/noteColors.ts b/frontend/src/lib/components/graph/noteColors.ts
index 5c2e5f41d8..c27d43da42 100644
--- a/frontend/src/lib/components/graph/noteColors.ts
+++ b/frontend/src/lib/components/graph/noteColors.ts
@@ -110,3 +110,7 @@ export const NOTE_COLOR_SWATCHES: Record<NoteColor, string> = {
 
 // Default note color
 export const DEFAULT_NOTE_COLOR = NoteColor.YELLOW
+
+// Minimum note size constraints
+export const MIN_NOTE_WIDTH = 275
+export const MIN_NOTE_HEIGHT = 60
diff --git a/frontend/src/lib/components/graph/noteEditor.svelte.ts b/frontend/src/lib/components/graph/noteEditor.svelte.ts
index 6c32addd20..c342b212fd 100644
--- a/frontend/src/lib/components/graph/noteEditor.svelte.ts
+++ b/frontend/src/lib/components/graph/noteEditor.svelte.ts
@@ -2,6 +2,7 @@ import type { FlowNote } from '$lib/gen'
 import type { StateStore } from '$lib/utils'
 import type { ExtendedOpenFlow } from '../flows/types'
 import type { NoteColor } from './noteColors'
+import { MIN_NOTE_WIDTH, MIN_NOTE_HEIGHT } from './noteColors'
 import { generateId } from './util'
 import { getContext, setContext } from 'svelte'
 
@@ -105,7 +106,7 @@ export class NoteEditor {
 	createGroupNote(nodeIds: string[], text: string = 'Group'): string {
 		// Calculate rough position based on contained nodes (can be refined by layout)
 		const defaultPosition = { x: 0, y: 0 }
-		const defaultSize = { width: 200, height: 100 }
+		const defaultSize = { width: MIN_NOTE_WIDTH, height: Math.max(MIN_NOTE_HEIGHT, 100) }
 
 		const groupNote: Omit<FlowNote, 'id'> = {
 			text,
diff --git a/frontend/src/lib/components/graph/noteManager.svelte.ts b/frontend/src/lib/components/graph/noteManager.svelte.ts
index b0bebd3535..0077b33026 100644
--- a/frontend/src/lib/components/graph/noteManager.svelte.ts
+++ b/frontend/src/lib/components/graph/noteManager.svelte.ts
@@ -213,7 +213,6 @@ export class NoteManager {
 			type: 'note',
 			position,
 			data: this.createNoteData(note, onTextHeightChange, isGroupNote, editMode),
-			style: `width: ${size.width}px; height: ${size.height}px;`,
 			width: size.width,
 			height: size.height,
 			zIndex: zIndex ?? -2000, // Use provided zIndex or fallback
diff --git a/frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte
index ed22fa0bf8..641a41979d 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte
@@ -5,7 +5,13 @@
 	import GfmMarkdown from '$lib/components/GfmMarkdown.svelte'
 	import { fade } from 'svelte/transition'
 	import NoteColorPicker from '../../NoteColorPicker.svelte'
-	import { NoteColor, NOTE_COLORS, DEFAULT_NOTE_COLOR } from '../../noteColors'
+	import {
+		NoteColor,
+		NOTE_COLORS,
+		DEFAULT_NOTE_COLOR,
+		MIN_NOTE_WIDTH,
+		MIN_NOTE_HEIGHT
+	} from '../../noteColors'
 	import { Button } from '$lib/components/common'
 	import { getNoteEditorContext } from '../../noteEditor.svelte'
 	import { getGraphContext } from '../../graphContext'
@@ -164,6 +170,7 @@
 	onmouseleave={handleMouseLeave}
 	role="button"
 	tabindex={editMode ? -1 : 0}
+	ondblclick={handleDoubleClick}
 >
 	<!-- Action buttons - only show in edit mode -->
 	{#if isEditModeAvailable}
@@ -236,8 +243,8 @@
 	<!-- Note content -->
 	<div
 		class={twMerge(
-			'w-full min-h-[60px] max-h-[400px] rounded-md ',
-			data.isGroupNote ? '' : 'h-full'
+			'w-full rounded-md ',
+			data.isGroupNote ? 'min-h-[60px] max-h-[400px]' : 'h-full'
 		)}
 	>
 		{#if editMode}
@@ -256,12 +263,10 @@
 			></textarea>
 		{:else}
 			<!-- Render mode: show markdown or empty state -->
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				class={twMerge(
 					'w-full h-fit overflow-auto cursor-pointer flex items-start justify-start rounded-md p-4'
 				)}
-				ondblclick={handleDoubleClick}
 				bind:clientHeight={containerHeight}
 			>
 				{#if textForDisplay}
@@ -286,8 +291,8 @@
 	{#if !locked && isEditModeAvailable}
 		<NodeResizer
 			isVisible={selected && !dragging}
-			minWidth={200}
-			minHeight={60}
+			minWidth={MIN_NOTE_WIDTH}
+			minHeight={MIN_NOTE_HEIGHT}
 			lineClass="!border-4 !border-transparent !rounded-md"
 			handleClass="!bg-transparent !w-4 !h-4 !border-none !rounded-md"
 			onResizeEnd={(_, params) => {
@@ -296,6 +301,7 @@
 					const size = { width: params.width, height: params.height }
 					if (isEditModeAvailable && noteEditorContext?.noteEditor) {
 						// Use NoteEditor context in edit mode
+						console.log('dbg updateSize', size)
 						noteEditorContext.noteEditor.updateSize(data.noteId, size)
 					}
 				}