From c927465861c448fe8791f2749d5e1748bca96494 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 2 Feb 2026 19:51:56 +0000
Subject: [PATCH 1/8] Add save button to message edits

Co-authored-by: me <me@kentcdodds.com>
---
 .../_app+/recipients+/$recipientId.index.tsx       | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index 042c5c87..7dcd0e30 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -536,6 +536,20 @@ function MessageForms({
 							className="mt-4 w-full resize-none bg-transparent text-sm leading-relaxed text-[hsl(var(--palette-cream))] placeholder:text-[hsl(var(--palette-cream))]/80 focus-visible:outline-none"
 							rows={4}
 						/>
+						<div className="mt-4 flex items-center justify-end">
+							<StatusButton
+								type="submit"
+								name="intent"
+								value={updateMessageContentActionIntent}
+								status={updateIsPending ? 'pending' : 'idle'}
+								disabled={updateIsPending}
+								size="sm"
+								className="bg-[hsl(var(--palette-cream))] text-[hsl(var(--palette-green-700))] hover:bg-[hsl(var(--palette-cream))/0.9]"
+							>
+								<Icon name="check" size="sm" />
+								Save
+							</StatusButton>
+						</div>
 					</updateContentFetcher.Form>
 				</div>
 				<ErrorList

From 5923464bcbf74ef6ca5a0098a446143e352a9ba6 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 2 Feb 2026 20:16:12 +0000
Subject: [PATCH 2/8] Show save check only on edits

Co-authored-by: me <me@kentcdodds.com>
---
 .../_app+/recipients+/$recipientId.index.tsx  | 65 +++++++++++--------
 1 file changed, 38 insertions(+), 27 deletions(-)

diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index 7dcd0e30..c9b3a5ab 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -383,6 +383,8 @@ function MessageForms({
 	const deleteSafeDelayMs = 150
 	const [confirmDelete, setConfirmDelete] = useState(false)
 	const [canDelete, setCanDelete] = useState(false)
+	const [savedContent, setSavedContent] = useState(message.content)
+	const [hasEdits, setHasEdits] = useState(false)
 	const formRef = useRef<HTMLFormElement | null>(null)
 	const textareaRef = useRef<HTMLTextAreaElement | null>(null)
 	const [updateContentForm, updateContentFields] = useForm({
@@ -408,6 +410,7 @@ function MessageForms({
 	const sendIsPending = sendNowFetcher.state !== 'idle'
 	const deleteIsPending = deleteFetcher.state !== 'idle'
 	const textareaProps = getTextareaProps(updateContentFields.content)
+	const showSaveButton = hasEdits || updateIsPending
 
 	useEffect(() => {
 		if (confirmDelete) {
@@ -419,6 +422,18 @@ function MessageForms({
 		setCanDelete(false)
 	}, [confirmDelete, deleteSafeDelayMs])
 
+	useEffect(() => {
+		setSavedContent(message.content)
+		setHasEdits(false)
+	}, [message.content])
+
+	useEffect(() => {
+		if (updateContentFetcher.data?.result.status === 'success') {
+			setSavedContent((previous) => textareaRef.current?.value ?? previous)
+			setHasEdits(false)
+		}
+	}, [updateContentFetcher.data?.result.status])
+
 	const handleSendNow = () => {
 		setConfirmDelete(false)
 		const formData = new FormData()
@@ -432,6 +447,13 @@ function MessageForms({
 		setTimeout(() => textareaRef.current?.focus(), 0)
 	}
 
+	const handleContentChange: React.ChangeEventHandler<HTMLTextAreaElement> = (
+		event,
+	) => {
+		textareaProps.onChange?.(event)
+		setHasEdits(event.target.value !== savedContent)
+	}
+
 	const handleDeleteSelect = (event: Event) => {
 		if (!confirmDelete) {
 			event.preventDefault()
@@ -461,19 +483,21 @@ function MessageForms({
 							<span>{headerText}</span>
 						</div>
 						<div className="flex items-center gap-2">
-							<StatusButton
-								form={updateContentForm.id}
-								status={updateIsPending ? 'pending' : 'idle'}
-								className="h-11 w-11 gap-0 text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-cream))/0.15] sm:h-10 sm:w-10"
-								size="icon"
-								variant="ghost"
-								type="submit"
-								name="intent"
-								value={updateMessageContentActionIntent}
-							>
-								<Icon name="check" size="sm" />
-								<span className="sr-only">Save</span>
-							</StatusButton>
+							{showSaveButton ? (
+								<StatusButton
+									form={updateContentForm.id}
+									status={updateIsPending ? 'pending' : 'idle'}
+									className="h-11 w-11 gap-0 text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-cream))/0.15] sm:h-10 sm:w-10"
+									size="icon"
+									variant="ghost"
+									type="submit"
+									name="intent"
+									value={updateMessageContentActionIntent}
+								>
+									<Icon name="check" size="sm" />
+									<span className="sr-only">Save</span>
+								</StatusButton>
+							) : null}
 							<DropdownMenu
 								onOpenChange={(open) => {
 									if (!open) setConfirmDelete(false)
@@ -532,24 +556,11 @@ function MessageForms({
 						</label>
 						<textarea
 							{...textareaProps}
+							onChange={handleContentChange}
 							ref={textareaRef}
 							className="mt-4 w-full resize-none bg-transparent text-sm leading-relaxed text-[hsl(var(--palette-cream))] placeholder:text-[hsl(var(--palette-cream))]/80 focus-visible:outline-none"
 							rows={4}
 						/>
-						<div className="mt-4 flex items-center justify-end">
-							<StatusButton
-								type="submit"
-								name="intent"
-								value={updateMessageContentActionIntent}
-								status={updateIsPending ? 'pending' : 'idle'}
-								disabled={updateIsPending}
-								size="sm"
-								className="bg-[hsl(var(--palette-cream))] text-[hsl(var(--palette-green-700))] hover:bg-[hsl(var(--palette-cream))/0.9]"
-							>
-								<Icon name="check" size="sm" />
-								Save
-							</StatusButton>
-						</div>
 					</updateContentFetcher.Form>
 				</div>
 				<ErrorList

From 6021c525c52ff6d1180153705bd8c37f6cb681ba Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 2 Feb 2026 21:00:06 +0000
Subject: [PATCH 3/8] Autofocus message textarea on edit

Co-authored-by: me <me@kentcdodds.com>
---
 .../_app+/recipients+/$recipientId.index.tsx      | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index c9b3a5ab..9cc4528c 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -444,14 +444,19 @@ function MessageForms({
 
 	const handleEditMessage = () => {
 		setConfirmDelete(false)
-		setTimeout(() => textareaRef.current?.focus(), 0)
+		requestAnimationFrame(() => {
+			const textarea = textareaRef.current
+			if (!textarea) return
+			textarea.focus()
+			const caretPosition = textarea.value.length
+			textarea.setSelectionRange(caretPosition, caretPosition)
+		})
 	}
 
-	const handleContentChange: React.ChangeEventHandler<HTMLTextAreaElement> = (
+	const handleContentInput: React.FormEventHandler<HTMLTextAreaElement> = (
 		event,
 	) => {
-		textareaProps.onChange?.(event)
-		setHasEdits(event.target.value !== savedContent)
+		setHasEdits(event.currentTarget.value !== savedContent)
 	}
 
 	const handleDeleteSelect = (event: Event) => {
@@ -556,7 +561,7 @@ function MessageForms({
 						</label>
 						<textarea
 							{...textareaProps}
-							onChange={handleContentChange}
+							onInput={handleContentInput}
 							ref={textareaRef}
 							className="mt-4 w-full resize-none bg-transparent text-sm leading-relaxed text-[hsl(var(--palette-cream))] placeholder:text-[hsl(var(--palette-cream))]/80 focus-visible:outline-none"
 							rows={4}

From 54ec81289bc0b97158fdf412146f8a6e7e8a44b9 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 2 Feb 2026 21:21:59 +0000
Subject: [PATCH 4/8] Derive save button visibility

Co-authored-by: me <me@kentcdodds.com>
---
 .../_app+/recipients+/$recipientId.index.tsx       | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index 9cc4528c..9c92fbcc 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -384,7 +384,7 @@ function MessageForms({
 	const [confirmDelete, setConfirmDelete] = useState(false)
 	const [canDelete, setCanDelete] = useState(false)
 	const [savedContent, setSavedContent] = useState(message.content)
-	const [hasEdits, setHasEdits] = useState(false)
+	const [currentContent, setCurrentContent] = useState(message.content)
 	const formRef = useRef<HTMLFormElement | null>(null)
 	const textareaRef = useRef<HTMLTextAreaElement | null>(null)
 	const [updateContentForm, updateContentFields] = useForm({
@@ -410,6 +410,7 @@ function MessageForms({
 	const sendIsPending = sendNowFetcher.state !== 'idle'
 	const deleteIsPending = deleteFetcher.state !== 'idle'
 	const textareaProps = getTextareaProps(updateContentFields.content)
+	const hasEdits = currentContent !== savedContent
 	const showSaveButton = hasEdits || updateIsPending
 
 	useEffect(() => {
@@ -424,15 +425,16 @@ function MessageForms({
 
 	useEffect(() => {
 		setSavedContent(message.content)
-		setHasEdits(false)
+		setCurrentContent(message.content)
 	}, [message.content])
 
 	useEffect(() => {
 		if (updateContentFetcher.data?.result.status === 'success') {
-			setSavedContent((previous) => textareaRef.current?.value ?? previous)
-			setHasEdits(false)
+			const nextContent = textareaRef.current?.value ?? currentContent
+			setSavedContent(nextContent)
+			setCurrentContent(nextContent)
 		}
-	}, [updateContentFetcher.data?.result.status])
+	}, [currentContent, updateContentFetcher.data?.result.status])
 
 	const handleSendNow = () => {
 		setConfirmDelete(false)
@@ -456,7 +458,7 @@ function MessageForms({
 	const handleContentInput: React.FormEventHandler<HTMLTextAreaElement> = (
 		event,
 	) => {
-		setHasEdits(event.currentTarget.value !== savedContent)
+		setCurrentContent(event.currentTarget.value)
 	}
 
 	const handleDeleteSelect = (event: Event) => {

From 5e2756b85911637ee2520ac06dca2831a9fb2cfc Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 2 Feb 2026 22:09:29 +0000
Subject: [PATCH 5/8] Use message content for save state

Co-authored-by: me <me@kentcdodds.com>
---
 app/routes/_app+/recipients+/$recipientId.index.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index 9c92fbcc..c8d2e810 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -383,7 +383,6 @@ function MessageForms({
 	const deleteSafeDelayMs = 150
 	const [confirmDelete, setConfirmDelete] = useState(false)
 	const [canDelete, setCanDelete] = useState(false)
-	const [savedContent, setSavedContent] = useState(message.content)
 	const [currentContent, setCurrentContent] = useState(message.content)
 	const formRef = useRef<HTMLFormElement | null>(null)
 	const textareaRef = useRef<HTMLTextAreaElement | null>(null)
@@ -410,7 +409,7 @@ function MessageForms({
 	const sendIsPending = sendNowFetcher.state !== 'idle'
 	const deleteIsPending = deleteFetcher.state !== 'idle'
 	const textareaProps = getTextareaProps(updateContentFields.content)
-	const hasEdits = currentContent !== savedContent
+	const hasEdits = currentContent !== message.content
 	const showSaveButton = hasEdits || updateIsPending
 
 	useEffect(() => {
@@ -424,17 +423,14 @@ function MessageForms({
 	}, [confirmDelete, deleteSafeDelayMs])
 
 	useEffect(() => {
-		setSavedContent(message.content)
 		setCurrentContent(message.content)
 	}, [message.content])
 
 	useEffect(() => {
 		if (updateContentFetcher.data?.result.status === 'success') {
-			const nextContent = textareaRef.current?.value ?? currentContent
-			setSavedContent(nextContent)
-			setCurrentContent(nextContent)
+			setCurrentContent(message.content)
 		}
-	}, [currentContent, updateContentFetcher.data?.result.status])
+	}, [message.content, updateContentFetcher.data?.result.status])
 
 	const handleSendNow = () => {
 		setConfirmDelete(false)

From b214ca81b79f960b08c9ff73fc9dd00f6e593a2a Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 2 Feb 2026 22:47:38 +0000
Subject: [PATCH 6/8] Drop current content effect sync

Co-authored-by: me <me@kentcdodds.com>
---
 app/routes/_app+/recipients+/$recipientId.index.tsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index c8d2e810..c44178f5 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -422,16 +422,6 @@ function MessageForms({
 		setCanDelete(false)
 	}, [confirmDelete, deleteSafeDelayMs])
 
-	useEffect(() => {
-		setCurrentContent(message.content)
-	}, [message.content])
-
-	useEffect(() => {
-		if (updateContentFetcher.data?.result.status === 'success') {
-			setCurrentContent(message.content)
-		}
-	}, [message.content, updateContentFetcher.data?.result.status])
-
 	const handleSendNow = () => {
 		setConfirmDelete(false)
 		const formData = new FormData()

From 79d0b8abcc3bbcd2e4c37927d29def4dadfd767f Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 2 Feb 2026 23:25:10 +0000
Subject: [PATCH 7/8] Inline message edit input handler

Co-authored-by: me <me@kentcdodds.com>
---
 app/routes/_app+/recipients+/$recipientId.index.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index c44178f5..28e85dde 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -441,12 +441,6 @@ function MessageForms({
 		})
 	}
 
-	const handleContentInput: React.FormEventHandler<HTMLTextAreaElement> = (
-		event,
-	) => {
-		setCurrentContent(event.currentTarget.value)
-	}
-
 	const handleDeleteSelect = (event: Event) => {
 		if (!confirmDelete) {
 			event.preventDefault()
@@ -549,7 +543,9 @@ function MessageForms({
 						</label>
 						<textarea
 							{...textareaProps}
-							onInput={handleContentInput}
+							onInput={(event) => {
+								setCurrentContent(event.currentTarget.value)
+							}}
 							ref={textareaRef}
 							className="mt-4 w-full resize-none bg-transparent text-sm leading-relaxed text-[hsl(var(--palette-cream))] placeholder:text-[hsl(var(--palette-cream))]/80 focus-visible:outline-none"
 							rows={4}

From 8078cfe1e2bb15f34e993ce0cc46aa951a48b15c Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <me+github@kentcdodds.com>
Date: Mon, 2 Feb 2026 16:29:06 -0700
Subject: [PATCH 8/8] Apply suggestion from @kentcdodds

---
 app/routes/_app+/recipients+/$recipientId.index.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index 28e85dde..dde7d5ea 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -432,13 +432,7 @@ function MessageForms({
 
 	const handleEditMessage = () => {
 		setConfirmDelete(false)
-		requestAnimationFrame(() => {
-			const textarea = textareaRef.current
-			if (!textarea) return
-			textarea.focus()
-			const caretPosition = textarea.value.length
-			textarea.setSelectionRange(caretPosition, caretPosition)
-		})
+		setTimeout(() => textareaRef.current?.focus(), 0)
 	}
 
 	const handleDeleteSelect = (event: Event) => {