fix: clean up classes on glare card dismiss

[sumimakito]

Previously, after dismissing the glare card (Nice kirakira card BTW! 😉), the overflow-hidden on body was not cleaned up, which made the page not scrollable. This pull request tries to fix that issue.

Summary by CodeRabbit

• Bug Fixes

  • Prevents page scrolling when the glare card is open and restores it on close.
  • Ensures clicking the overlay reliably closes the glare card.
  • Sets the glare card to be closed by default on initial load.

• Refactor

  • Simplifies and stabilizes glare card state handling with reactive updates and lifecycle cleanup for more reliable behavior.

[coderabbitai]

Walkthrough

Replaces local helper-based modal toggling with defineModel({ default: false }), assigns model = false on overlay click, adds an immediate watch(model, ...) to add/remove overflow-lock on document/body, imports watch and onBeforeUnmount, and cleans up overflow lock on unmount.

Changes

Cohort / File(s)	Summary
Glare Card modal state handling docs/.vitepress/theme/glare-card/glare-card.vue	- Uses defineModel({ default: false }) for modal state - Replaces overlay click handler to assign model = false directly - Adds watch(model, ...) with immediate: true to toggle overflow-lock on document/body when model changes - Imports watch and onBeforeUnmount from vue and adds cleanup to remove overflow lock on unmount - Removes prior setCard helper used for DOM class toggling

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant GlareCard as GlareCard.vue
  participant Vue as Vue Reactivity
  participant DOM as Document/Body

  rect rgba(220,240,255,0.35)
  Note over GlareCard: Component setup
  GlareCard->>Vue: defineModel({ default: false })
  Vue-->>GlareCard: model = false
  GlareCard->>Vue: watch(model, immediate: true)
  Vue->>DOM: add/remove `overflow-lock` based on model
  end

  rect rgba(230,255,230,0.35)
  Note over User,GlareCard: User clicks overlay
  User->>GlareCard: click overlay
  GlareCard->>GlareCard: model = false
  Vue->>DOM: remove `overflow-lock`
  end

  rect rgba(255,235,220,0.35)
  Note over GlareCard: Teardown
  GlareCard->>Vue: onBeforeUnmount
  Vue->>DOM: ensure `overflow-lock` removed
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

I hop in Vue's soft garden bright,
I watch the model through the night.
A click whispers the modal low,
I lift the scroll and let it go.
Overflow tucks in — quiet, light. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly describes the primary change of removing CSS classes when the glare card is dismissed, which directly addresses the overflow-hidden class cleanup implemented in the component. It is specific to the glare card behavior, concise, and clearly conveys the fix to restore page scrollability.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

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

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3d2186d and 61b3bd6.

📒 Files selected for processing (1)

• docs/.vitepress/theme/glare-card/glare-card.vue (2 hunks)

🔇 Additional comments (3)

docs/.vitepress/theme/glare-card/glare-card.vue (3)

33-33: LGTM! Direct model assignment correctly triggers cleanup.

The change from setCard(false) to model = false properly leverages Vue's reactivity to trigger the watch callback that removes the overflow classes.

---

78-78: LGTM! Import supports the new watch-based cleanup.

---

82-82: LGTM! Default value correctly initializes to closed state.

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 61b3bd6 and aff6313.

📒 Files selected for processing (1)

• docs/.vitepress/theme/glare-card/glare-card.vue (2 hunks)

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

docs/.vitepress/theme/glare-card/glare-card.vue (1)

84-101: SSR guard resolves the critical issue; consider optional refactor to reduce duplication.

The typeof window === 'undefined' guards at lines 85 and 97 correctly prevent SSR build errors, resolving the critical concern from the previous review. The logic correctly locks/unlocks overflow when the modal opens/closes and cleans up on unmount.

However, the class manipulation logic is duplicated between the watch and unmount hook. Per the previous suggestion, extracting this into a helper function would improve maintainability and allow for a defensive document.body check:

+const toggleOverflow = (value: boolean) => {
+    if (typeof window === 'undefined') return
+
+    const { documentElement, body } = document
+    if (!body) return
+
+    if (value) {
+        documentElement.classList.add('overflow-hidden')
+        body.classList.add('overflow-hidden')
+    } else {
+        documentElement.classList.remove('overflow-hidden')
+        body.classList.remove('overflow-hidden')
+    }
+}
+
-watch(model, (value) => {
-    if (typeof window === 'undefined') return
-
-    if (value) {
-        document.documentElement.classList.add('overflow-hidden')
-        document.body.classList.add('overflow-hidden')
-    } else {
-        document.documentElement.classList.remove('overflow-hidden')
-        document.body.classList.remove('overflow-hidden')
-    }
-}, { immediate: true })
+watch(model, toggleOverflow, { immediate: true })
 
 onBeforeUnmount(() => {
-    if (typeof window === 'undefined') return
-
-    document.documentElement.classList.remove('overflow-hidden')
-    document.body.classList.remove('overflow-hidden')
+    toggleOverflow(false)
 })

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between aff6313 and fa84f25.

📒 Files selected for processing (1)

• docs/.vitepress/theme/glare-card/glare-card.vue (2 hunks)

🔇 Additional comments (2)

docs/.vitepress/theme/glare-card/glare-card.vue (2)

33-33: LGTM!

The change from setCard(false) to model = false is more idiomatic and directly leverages Vue's reactivity system.

---

78-82: LGTM!

The imports and model initialization are correct. Using defineModel({ default: false }) properly establishes the default closed state for the modal.