fix: keep selected note visible during keyboard navigation

[n00ki]

• When navigating notes with arrow keys, the sidebar now scrolls to keep the selected note visible
• Uses scrollIntoView({ block: "nearest", behavior: "smooth" }) so the scroll is minimal (no movement when the item is already in view) and animated
• Follows the same data-attribute wrapper + useEffect + scrollIntoView pattern used by the command palette

Summary by CodeRabbit

• New Features
  • Improved note selection behavior – the note list now automatically scrolls to keep the selected note visible for better navigation and accessibility.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 86bddbc1-2313-4bb1-a1cc-b8d8df15b5be

📥 Commits

Reviewing files that changed from the base of the PR and between 3331c1e and b48e1b6.

📒 Files selected for processing (1)

• src/components/notes/NoteList.tsx

---

📝 Walkthrough

Walkthrough

Added an effect hook to NoteList that automatically scrolls the currently selected note into view with smooth scrolling behavior whenever selectedNoteId changes. Each NoteItem is now wrapped in a div with a data-note-id attribute to enable DOM element targeting for scrolling.

Changes

Cohort / File(s)	Summary
Note List Scrolling src/components/notes/NoteList.tsx	Added useEffect hook to auto-scroll selected note into view using smooth scrolling. Wrapped NoteItem components with data-note-id containers for DOM targeting.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A note springs into view so neat,
When selection finds its perfect seat,
With smooth scroll magic, left and right,
The list knows what feels just right! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: auto-scrolling the selected note into view during keyboard navigation in the sidebar.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 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.}