fix: collapse not working inside blog post

[vintrocode]

if you click into a blog post, the explorer and TOC would expand on click but not collapse. got with claude code to make a quick fix.

Summary by CodeRabbit

• Refactor
  • Improved state management for collapsible sections in explorer and table of contents components by switching from inline style-based to class-based toggle mechanisms, enhancing code reliability and consistency.

[coderabbitai]

Walkthrough

Refactors state management in two UI toggle scripts (explorer and TOC) from relying on inline style checks to using CSS class presence for determining expanded/collapsed states.

Changes

Cohort / File(s)	Summary
Style-to-class-based state detection quartz/components/scripts/explorer.inline.ts, quartz/components/scripts/toc.inline.ts	Replaces inline maxHeight style value checks (maxHeight === "0px") with class-based checks (classList.contains("collapsed")). Initial height setup in setupToc now uses a ternary condition based on collapsed state instead of always setting a default.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Both files apply the same refactoring pattern consistently
• Changes are straightforward, affecting only conditional logic and initialization
• Verify that the "collapsed" class is properly toggled before state checks
• Confirm height calculations produce the correct scrollHeight values in both expansion and collapse scenarios

Poem

🐰 Classes over styles, we now proclaim,
No more inline checks—our state's more tame!
From pixels to classes, cleaner and bright,
The collapsible toggles hop true through the night! ✨

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ 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 issue being fixed: collapse functionality not working inside blog posts.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch vince/dropdown-fix

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between bc54bb0 and 9dab8c9.

📒 Files selected for processing (2)

• quartz/components/scripts/explorer.inline.ts (1 hunks)
• quartz/components/scripts/toc.inline.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/component-development.mdc)

**/*.{ts,tsx}: Always use proper TypeScript types; never use any
Use console.log sparingly; prefer TypeScript’s type system to catch errors

Files:

• quartz/components/scripts/toc.inline.ts
• quartz/components/scripts/explorer.inline.ts

{quartz/components/**/*.{ts,tsx},quartz/components/scripts/**/*.{ts,tsx}}

📄 CodeRabbit inference engine (.cursor/rules/component-development.mdc)

Import shared utility functions from quartz/util/

Files:

• quartz/components/scripts/toc.inline.ts
• quartz/components/scripts/explorer.inline.ts

quartz/components/scripts/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/component-development.mdc)

quartz/components/scripts/**/*.{ts,tsx}: Place interactive client-side code in quartz/components/scripts/
Scripts should re-initialize on SPA navigation by listening to the "nav" event

Files:

• quartz/components/scripts/toc.inline.ts
• quartz/components/scripts/explorer.inline.ts

🧠 Learnings (3)

📓 Common learnings

Learnt from: CR
Repo: plastic-labs/blog PR: 0
File: .cursor/rules/styling-conventions.mdc:0-0
Timestamp: 2025-08-26T20:53:55.120Z
Learning: Applies to **/*.{scss,css} : Avoid universal selectors (*) where possible; prefer class selectors for components and minimize expensive properties (heavy box-shadows, filters, large transforms)

📚 Learning: 2025-08-26T20:48:56.756Z

Learnt from: CR
Repo: plastic-labs/blog PR: 0
File: .cursor/rules/component-development.mdc:0-0
Timestamp: 2025-08-26T20:48:56.756Z
Learning: Applies to {quartz/components/*.{ts,tsx},quartz/components/!(scripts)/**/*.{ts,tsx}} : Use the displayClass prop for responsive visibility

Applied to files:

• quartz/components/scripts/explorer.inline.ts

📚 Learning: 2025-08-26T20:48:56.756Z

Learnt from: CR
Repo: plastic-labs/blog PR: 0
File: .cursor/rules/component-development.mdc:0-0
Timestamp: 2025-08-26T20:48:56.756Z
Learning: Applies to {quartz/components/*.{ts,tsx},quartz/components/!(scripts)/**/*.{ts,tsx}} : Minimize manual DOM manipulation; prefer declarative JSX

Applied to files:

• quartz/components/scripts/explorer.inline.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Cloudflare Pages

🔇 Additional comments (3)

quartz/components/scripts/toc.inline.ts (2)

17-23: Excellent fix for the collapse bug!

The change from checking content.style.maxHeight === "0px" to content.classList.contains("collapsed") correctly addresses the root cause. The old approach failed because after the first expansion, maxHeight would be set to a specific pixel value (e.g., "500px"), causing the condition to always evaluate the same way and breaking subsequent toggles. Class-based state is reliable since it's toggled on each click.

---

25-35: Proper initialization ensures consistent behavior.

The initialization logic correctly sets the initial maxHeight based on the class state, ensuring the animation works properly on page load and SPA navigation. This is essential for the fix to work reliably.

quartz/components/scripts/explorer.inline.ts (1)

18-25: Class-based state management fixes the toggle issue.

The change mirrors the fix in toc.inline.ts and correctly uses content.classList.contains("collapsed") instead of checking inline styles. This ensures reliable toggle behavior.

---

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