feat: allow renaming a face using Enter key in addition to button

[rebeccabas]

Summary

This PR adds support for triggering the rename action when the Enter key is pressed, in addition to the existing ✅ button click.
It improves the overall user experience by making the renaming process faster and more intuitive.

What Changed

• Added an onKeyDown event handler to detect the Enter key and trigger the rename logic when Enter is pressed.
• Ensured behavior is consistent between pressing Enter and clicking the ✅ button.

Testing

• Verified renaming works with the ✅ button.
• Verified renaming works by pressing Enter.
• Checked for console warnings and lint errors.
• Confirmed all unit tests pass.

Documentation

No documentation changes were necessary since this is a small UX enhancement.

Checklist

• Code formatted (npm run format)
• Lint passed (npm run lint:check)
• Tests passed
• Pre-commit hooks applied
• Follows PictoPy’s Code of Conduct

---

Closes: #580

Summary by CodeRabbit

• New Features
  • Press Enter to save a person’s name while editing, eliminating the need to click a save button.
  • The name field now supports keyboard submission in the editing view, improving speed and accessibility for keyboard-first workflows.
  • Applies across the person images editing UI for a more seamless, consistent editing experience.

[coderabbitai]

Walkthrough

Adds an Enter key handler to the person name input in PersonImages editing mode. When Enter is pressed, it invokes the existing save function to submit the rename without clicking the button.

Changes

Cohort / File(s)	Summary of Changes
Person image rename input handling frontend/src/pages/PersonImages/PersonImages.tsx	Introduced handleKeyDown(e) that calls handleSaveName() on Enter; bound it to the name input via onKeyDown within the editing UI.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User
  participant PI as PersonImages page
  participant IN as Name Input
  participant H as handleSaveName()

  U->>IN: Type name
  U->>IN: Press Enter
  IN->>PI: onKeyDown(Enter)
  PI->>H: Invoke save handler
  H-->>PI: Save completed/failed
  PI-->>U: UI updates with result

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I tap-tap Enter, ears perked high,
No more chasing buttons hopping by.
A name hops in, saved in a blink—
Carrot-quick commits, don’t even think! 🥕
Thump of keys, a tidy fix—
Bugs hop out; neat rabbit tricks.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues Check	⚠️ Warning	The PR implements the core requirement from issue #580 by adding an onKeyDown handler that detects the Enter key and invokes the existing rename logic, but it does not include new unit tests to verify this behavior as noted in the issue checklist.	Please add unit tests that cover renaming via the Enter key to ensure the new behavior is validated automatically.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly describes the primary change of this PR, specifically adding support for renaming a face via the Enter key in addition to the button, and it is concise and focused without extraneous information.
Out of Scope Changes Check	✅ Passed	All modifications are confined to the PersonImages component and relate directly to implementing Enter-key support for face renaming, with no unrelated or extraneous changes present.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

frontend/src/pages/PersonImages/PersonImages.tsx (1)

64-68: Add preventDefault() for robustness.

The Enter key handler correctly invokes handleSaveName(), but consider calling e.preventDefault() to explicitly prevent any default browser behavior and make the intent clear.

Apply this diff:

 const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
   if (e.key === 'Enter') {
+    e.preventDefault();
     handleSaveName();
   }
 };

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 589d71f and f5b9a33.

📒 Files selected for processing (1)

• frontend/src/pages/PersonImages/PersonImages.tsx (2 hunks)

🔇 Additional comments (1)

frontend/src/pages/PersonImages/PersonImages.tsx (1)

86-86: LGTM!

The onKeyDown handler is correctly wired to the Input component, enabling Enter key support as intended. This provides a better user experience by allowing keyboard-driven workflow.

[rahulharpal1603]

Thanks @rebeccabas