fix: improve collapsible section state detection

[alexdln]

Collapsible sections (in the sidebar of package pages) sometimes showed content that weren't clickable.

The problem was that the logic simply checked for the presence of the current section's id in the dataset. For example - if optional-dependencies were collapsed, this check also worked for dependencies section, marking the wrong section as !isOpen.

At the same time, the content was visible, since the required style for hiding was not added (it is added by passing through exact ids)

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 11, 2026 0:40am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 11, 2026 0:40am
npmx-lunaria	Ignored		Feb 11, 2026 0:40am

[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

The CollapsibleSection.vue component has been updated to change how it parses the collapsed elements list from localStorage. The modification replaces direct string inclusion checks with a split-based approach, applying split(' ') followed by includes checks. This change affects both the prehydration loop and the mounted lifecycle hook, altering how the collapsed string is constructed and the initial isOpen state is determined. The overall functionality remains unaffected by this parsing method adjustment.

Suggested reviewers

• graphieros
• 43081j

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the bug (substring matching causing wrong sections to be marked as collapsed) and how the fix addresses it (using split and exact matching).

_{✏️ 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

---

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/components/CollapsibleSection.vue (1)

29-35: ⚠️ Potential issue | 🟠 Major

Fix optional chaining to avoid undefined.includes crashes.

When document.documentElement.dataset.collapsed is unset, ?.split(' ') returns undefined and .includes(...) throws. This can break hydration and sidebar behaviour on first load. Use a default empty string and split safely in both locations.

Proposed fix

 onPrehydrate(() => {
   const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
   const collapsed: string[] = settings?.sidebar?.collapsed || []
   for (const id of collapsed) {
-    if (!document.documentElement.dataset.collapsed?.split(' ').includes(id)) {
-      document.documentElement.dataset.collapsed = (
-        document.documentElement.dataset.collapsed +
-        ' ' +
-        id
-      ).trim()
-    }
+    const collapsedIds = (document.documentElement.dataset.collapsed ?? '')
+      .split(' ')
+      .filter(Boolean)
+    if (!collapsedIds.includes(id)) {
+      document.documentElement.dataset.collapsed = [...collapsedIds, id].join(' ')
+    }
   }
 })
 
 onMounted(() => {
   if (document?.documentElement) {
-    isOpen.value = !(
-      document.documentElement.dataset.collapsed?.split(' ').includes(props.id) ?? false
-    )
+    const collapsedIds = (document.documentElement.dataset.collapsed ?? '')
+      .split(' ')
+      .filter(Boolean)
+    isOpen.value = !collapsedIds.includes(props.id)
   }
 })

Also applies to: 41-43

[alexdln]

?.split(' ') returns undefined

Coderabbit definitely knows Vue a little better than JS