Message edit save button by kentcdodds · Pull Request #75 · epicweb-dev/gratitext

kentcdodds · 2026-02-02T20:05:11Z

Test Plan

Navigate to a conversation.
Edit an existing message.
Verify that a "Save" button appears below the message edit textarea.
Make a change to the message content.
Click the "Save" button and confirm the message is updated.

Checklist

Tests updated
Docs updated

Screenshots

Note

Low Risk
UI-only change limited to client-side state/conditional rendering; no changes to server actions or data validation.

Overview
Updates the recipient message edit UI to make saving explicit and less noisy by only showing the save StatusButton when the textarea content has changed (or while a save is in progress).

Adds local currentContent state wired to the textarea onInput to detect edits and drive the conditional render of the save control.

^{Written by Cursor Bugbot for commit 8078cfe. This will update automatically on new commits. Configure here.}

Co-authored-by: me <me@kentcdodds.com>

cursor · 2026-02-02T20:05:12Z

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

Co-authored-by: me <me@kentcdodds.com>

kentcdodds · 2026-02-02T21:00:31Z

 	const [confirmDelete, setConfirmDelete] = useState(false)
 	const [canDelete, setCanDelete] = useState(false)
+	const [savedContent, setSavedContent] = useState(message.content)
+	const [hasEdits, setHasEdits] = useState(false)


@cursor, I think this can be derived and we don't need state for it.

Review response: Agreed — hasEdits is now derived from currentContent !== savedContent, so no extra state is needed for save visibility.【F:app/routes/_app+/recipients+/$recipientId.index.tsx†L384-L461】

Walkthrough

Save checkmark appears only after edits and hides after save.

Summary

Derive save-check visibility from current vs saved content instead of separate state in app/routes/_app+/recipients+/$recipientId.index.tsx.【F:app/routes/_app+/recipients+/$recipientId.index.tsx†L384-L461】

Testing

✅ npm run format — full-gate formatting check.【F:/tmp/format.log†L1-L4】

✅ npm run typecheck — full-gate type safety check.【F:/tmp/typecheck.log†L1-L3】

⚠️ npm run lint — full-gate linting; existing warnings in scripts directory.【F:/tmp/lint.log†L1-L14】

✅ npm run test -- --run --project node --pool=threads --maxWorkers=1 --no-file-parallelism — full-gate node tests, serialized to avoid SQLite locking.【F:/tmp/test-node.log†L1-L30】

✅ npm run test -- --run --project browser --pool=threads --maxWorkers=1 --no-file-parallelism — full-gate browser tests.【F:/tmp/test-browser.log†L1-L15】

❌ DATABASE_URL="file:/workspace/tests/prisma/base.db" CACHE_DATABASE_PATH="/workspace/tests/prisma/cache.db" PORT=3001 npm run test:e2e:run — 7 e2e failures in onboarding/send/settings profile flows.【F:/home/ubuntu/.cursor/projects/workspace/terminals/779679.txt†L2674-L2717】

✅ Manual UI test (no command) — required for UI change; verified save checkmark behavior (see walkthrough).

Co-authored-by: me <me@kentcdodds.com>

kentcdodds · 2026-02-02T22:07:48Z

 	const deleteSafeDelayMs = 150
 	const [confirmDelete, setConfirmDelete] = useState(false)
 	const [canDelete, setCanDelete] = useState(false)
+	const [savedContent, setSavedContent] = useState(message.content)


@cursor, message.content will always be the saved content (react router revalidates on changes), so we don't need state for this.

Taking a look!

kentcdodds · 2026-02-02T22:08:35Z

+	useEffect(() => {
+		setSavedContent(message.content)
+		setCurrentContent(message.content)
+	}, [message.content])


@cursor, ditch this useEffect in favor of just setting the current content in the event handler

Walkthrough

Save checkmark appears only after edits, hides after save.

Summary

Review response: removed the sync useEffect and rely on the input handler to update currentContent against message.content for save visibility in app/routes/_app+/recipients+/$recipientId.index.tsx.【F:app/routes/_app+/recipients+/$recipientId.index.tsx†L380-L458】

Testing

✅ npm run format — full-gate formatting check.【F:/tmp/format-3.log†L1-L4】

✅ npm run typecheck — full-gate type safety check.【F:/tmp/typecheck-3.log†L1-L3】

⚠️ npm run lint — full-gate linting; existing warnings in scripts directory.【F:/tmp/lint-3.log†L1-L14】

✅ npm run test -- --run --project node --pool=threads --maxWorkers=1 --no-file-parallelism — full-gate node tests, serialized to avoid SQLite locking.【F:/tmp/test-node-3.log†L1-L77】

✅ npm run test -- --run --project browser --pool=threads --maxWorkers=1 --no-file-parallelism — full-gate browser tests.【F:/tmp/test-browser-3.log†L1-L15】

❌ DATABASE_URL="file:/workspace/tests/prisma/base.db" CACHE_DATABASE_PATH="/workspace/tests/prisma/cache.db" PORT=3001 npm run test:e2e:run — 7 e2e failures in onboarding/send/settings profile flows.【F:/home/ubuntu/.cursor/projects/workspace/terminals/19483.txt†L2671-L2714】

✅ Manual UI test (no command) — required for UI change; verified checkmark appears after edits and hides after save (see walkthrough).

Co-authored-by: me <me@kentcdodds.com>

kentcdodds · 2026-02-02T23:23:14Z

+	const handleContentInput: React.FormEventHandler<HTMLTextAreaElement> = (
+		event,
+	) => {
+		setCurrentContent(event.currentTarget.value)


@cursoragent just make this inline

Summary

Inlined the message edit onInput handler in app/routes/_app+/recipients+/$recipientId.index.tsx as requested.【F:app/routes/_app+/recipients+/$recipientId.index.tsx†L540-L551】

Testing

Manual UI testing not rerun because this is a handler refactor with no behavior change.

✅ npm run format — full-gate formatting check.【F:/tmp/format-4.log†L1-L4】

✅ npm run typecheck — full-gate type safety check.【F:/tmp/typecheck-4.log†L1-L3】

✅ npm run lint — full-gate linting; existing warnings in scripts directory.【F:/tmp/lint-4.log†L1-L14】

✅ npm run test -- --run --project node --pool=threads --maxWorkers=1 --no-file-parallelism — full-gate node tests, serialized to avoid SQLite locking.【F:/tmp/test-node-4.log†L1-L77】

✅ npm run test -- --run --project browser --pool=threads --maxWorkers=1 --no-file-parallelism — full-gate browser tests.【F:/tmp/test-browser-4.log†L1-L15】

⚠️ E2E not rerun for this refactor; last run failed in onboarding/send/settings flows.【F:/home/ubuntu/.cursor/projects/workspace/terminals/19483.txt†L2671-L2714】

Co-authored-by: me <me@kentcdodds.com>

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is ON. A Cloud Agent has been kicked off to fix the reported issue.}

cursor · 2026-02-02T23:38:26Z

 	const sendIsPending = sendNowFetcher.state !== 'idle'
 	const deleteIsPending = deleteFetcher.state !== 'idle'
 	const textareaProps = getTextareaProps(updateContentFields.content)
+	const hasEdits = currentContent !== message.content


State not reset when save succeeds with modified content

Low Severity

The currentContent state is initialized once via useState(message.content) and only updates through onInput. After a successful save, if message.content from the server differs from what the user typed (e.g., server-side trimming or normalization), hasEdits remains true and the save button incorrectly stays visible. Additionally, if external updates change message.content while the form is open, the save button may appear even though the user hasn't made any edits, potentially leading to unintentional data overwrites.

Add save button to message edits

c927465

Co-authored-by: me <me@kentcdodds.com>

cursoragent and others added 2 commits February 2, 2026 20:16

Show save check only on edits

5923464

Co-authored-by: me <me@kentcdodds.com>

Autofocus message textarea on edit

6021c52

Co-authored-by: me <me@kentcdodds.com>

kentcdodds commented Feb 2, 2026

View reviewed changes

Derive save button visibility

54ec812

Co-authored-by: me <me@kentcdodds.com>

kentcdodds commented Feb 2, 2026

View reviewed changes

cursoragent and others added 2 commits February 2, 2026 22:09

Use message content for save state

5e2756b

Co-authored-by: me <me@kentcdodds.com>

Drop current content effect sync

b214ca8

Co-authored-by: me <me@kentcdodds.com>

kentcdodds commented Feb 2, 2026

View reviewed changes

Inline message edit input handler

79d0b8a

Co-authored-by: me <me@kentcdodds.com>

kentcdodds marked this pull request as ready for review February 2, 2026 23:27

kentcdodds commented Feb 2, 2026

View reviewed changes

Comment thread app/routes/_app+/recipients+/$recipientId.index.tsx Outdated

Apply suggestion from @kentcdodds

8078cfe

kentcdodds merged commit babff56 into main Feb 2, 2026
5 checks passed

cursor Bot reviewed Feb 2, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Message edit save button#75

Message edit save button#75
kentcdodds merged 8 commits into
mainfrom
cursor/message-edit-save-button-bee2

kentcdodds commented Feb 2, 2026 •

edited by cursor Bot

Loading

Uh oh!

cursor Bot commented Feb 2, 2026

Uh oh!

kentcdodds Feb 2, 2026

Uh oh!

cursor Bot Feb 2, 2026 •

edited

Loading

Uh oh!

kentcdodds Feb 2, 2026

Uh oh!

cursor Bot Feb 2, 2026

Uh oh!

kentcdodds Feb 2, 2026

Uh oh!

cursor Bot Feb 2, 2026 •

edited

Loading

Uh oh!

kentcdodds Feb 2, 2026

Uh oh!

cursor Bot Feb 2, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Feb 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

kentcdodds commented Feb 2, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Plan

Checklist

Screenshots

Uh oh!

cursor Bot commented Feb 2, 2026

Uh oh!

kentcdodds Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

cursor Bot Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Walkthrough

Summary

Uh oh!

kentcdodds Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

cursor Bot Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

kentcdodds Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

cursor Bot Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Walkthrough

Summary

Uh oh!

kentcdodds Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

cursor Bot Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Feb 2, 2026

Choose a reason for hiding this comment

State not reset when save succeeds with modified content

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kentcdodds commented Feb 2, 2026 •

edited by cursor Bot

Loading

cursor Bot Feb 2, 2026 •

edited

Loading

cursor Bot Feb 2, 2026 •

edited

Loading

cursor Bot Feb 2, 2026 •

edited

Loading