feat: code file tree switch file to active node

[btea]

🔗 Linked issue

Scroll the active file in the files list into view when it's clicked/page loaded

🧭 Context

📚 Description

When switching files in the code file tree area, the selected file will automatically jump to the center of the area.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 21, 2026 4:49pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 21, 2026 4:49pm
npmx-lunaria	Ignored		Mar 21, 2026 4:49pm

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a template ref treeRoot on the top-level <ul> in the file tree template. Implements scrollIntoView which queries the first descendant with aria-current="true" under treeRoot and calls scrollIntoView({ behavior: 'smooth', block: 'center' }). Extends the props.currentPath watcher to run autoExpandAncestors(path) and schedule scrollIntoView on the next tick.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, describing the feature of scrolling the active file into view when switching files in the code file tree.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: fb857c39-22d7-4d7d-bdb1-c3dad6a02d27

📥 Commits

Reviewing files that changed from the base of the PR and between 0d952fa and 30a4dce.

📒 Files selected for processing (1)

• app/components/Code/FileTree.vue

[coderabbitai]

🧹 Nitpick comments (1)

app/components/Code/FileTree.vue (1)

40-45: Consider using generic querySelector for type safety.

The type assertion as HTMLElement works but could be tightened. Using the generic form avoids a cast and aligns with the coding guideline for strictly type-safe code.

Suggested improvement

 const scrollIntoView = () => {
-  const el = treeRoot.value?.querySelector('[aria-current="true"]') as HTMLElement
+  const el = treeRoot.value?.querySelector<HTMLElement>('[aria-current="true"]')
   if (el) {
     el.scrollIntoView({ block: 'center' })
   }
 }

As per coding guidelines: "Ensure you write strictly type-safe code, for example by ensuring you always check when accessing an array value by index."

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 52934022-cdcd-4f8b-b5df-3d63f0824666

📥 Commits

Reviewing files that changed from the base of the PR and between 30a4dce and ab14372.

📒 Files selected for processing (1)

• app/components/Code/FileTree.vue

[ghostdevv]

There is an interesting bug where if you load the page on a small screen when it scrolls the scroll isn't contained to the file tree

[btea]

I tested it with the preview link, and when I clicked the icon in the lower right corner to expand the side tree structure, it correctly retrieved the node and scrolled the node into the view area.

[ghostdevv]

I can't reproduce the scroll issue I had a couple weeks back, so LGTM!

[coderabbitai]

♻️ Duplicate comments (1)

app/components/Code/FileTree.vue (1)

45-50: ⚠️ Potential issue | 🟠 Major

Run the path watcher only from the root tree instance.

At Line 45, this watcher still executes in every recursive CodeFileTree instance. That can queue repeated nextTick(scrollIntoView) calls (Line 50) and redundant autoExpandAncestors work on each path change.

Proposed fix

 watch(
   () => props.currentPath,
   path => {
-    if (path) {
+    if (path && depth.value === 0) {
       autoExpandAncestors(path)
       nextTick(scrollIntoView)
     }
   },
   { immediate: true },
 )

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 95746bab-bc3a-40d5-ae1f-f6c1e2a49c9e

📥 Commits

Reviewing files that changed from the base of the PR and between 57eec3e and 0a0d6da.

📒 Files selected for processing (1)

• app/components/Code/FileTree.vue

[ghostdevv]

ah wait, it seems to still scroll even when the thing is already visible 🤔

[btea]

In this case, the smooth effect should probably be removed.

[ghostdevv]

In this case, the smooth effect should probably be removed.

The smooth made it much more obvious but it happens without it 🫠

[btea]

That's true. But I think the silky smooth scrolling effect looks good right now. 😄