fix(DashboardSidebar): guard against null persisted storage in useResizable

[benjamincanac]

🔗 Linked issue

Resolves #6517

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

useResizable crashes with Cannot read properties of null (reading 'collapsed') when the persisted cookie or localStorage value parses to null instead of the expected { size, collapsed } object.

This happens because useCookie's default option only fires when the cookie is undefined, not when destr parses it to null. Any of these puts the ref into a null state and crashes the sidebar permanently for that user:

• Cookie manually set to the literal string null
• localStorage entry containing "null"
• A browser extension or server-side injection writing null

Fix:

1. Eagerly reset corrupted storage — after reading storageData, if the value is null or not an object, immediately reset it to defaultStorageValue (self-heals the persisted value).
2. Defensive getters — isCollapsed and size computed getters use optional chaining with nullish coalescing so they never throw.
3. Guarded watch/sync — the external collapsed ref sync and watcher both handle the nullish case.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[coderabbitai]

📝 Walkthrough

Walkthrough

The useResizable composable is updated to defensively handle cases where persisted storage data (storageData.value) is null or not an object. A runtime guard initializes invalid storage to a default shape. The isCollapsed and size computed getters now use optional chaining with fallbacks instead of assuming the stored value is always present. Initial state synchronization and the watcher that syncs external changes into storage both now safely handle invalid storage states using optional chaining and re-initialization.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 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 (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title accurately describes the main change: adding defensive null guards to the useResizable composable for persisted storage values.
Description check	✅ Passed	The PR description comprehensively explains the bug, root cause, and the three-pronged fix approach, directly relating to the changeset.
Linked Issues check	✅ Passed	The code changes fully address all objectives from issue #6517: eagerly resetting corrupted storage, using optional chaining in getters, and guarding watch/sync operations against null values.
Out of Scope Changes check	✅ Passed	All changes in useResizable.ts are narrowly focused on defensive null handling for persisted storage, directly addressing the linked issue with no extraneous modifications.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/resizable-null-storage

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/runtime/composables/useResizable.ts

Parsing error: Unexpected token {

---

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

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/runtime/composables/useResizable.ts`:
- Around line 335-337: The sync currently skips persisted false because it
checks truthiness; update the condition that sets collapsed.value so it detects
an explicit stored false (e.g. check for undefined rather than falsiness).
Locate the block using isRef(collapsed) and storageData.value?.collapsed and
change the guard to verify storageData.value exists and
storageData.value.collapsed is not undefined (or use `'collapsed' in
storageData.value`) before assigning collapsed.value =
storageData.value.collapsed.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: fa90992c-e0de-46d0-b33d-c7e59b6f80ca

📥 Commits

Reviewing files that changed from the base of the PR and between ffaf163 and 8ee00c3.

📒 Files selected for processing (1)

• src/runtime/composables/useResizable.ts

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Initial sync should not ignore persisted false

The condition only syncs when persisted collapsed is truthy, so an explicit persisted false is skipped and can leave the external ref out of sync.

Suggested fix

-  if (isRef(collapsed) && storageData.value?.collapsed) {
+  if (isRef(collapsed) && typeof storageData.value?.collapsed === 'boolean') {
     collapsed.value = storageData.value.collapsed
   }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/runtime/composables/useResizable.ts` around lines 335 - 337, The sync
currently skips persisted false because it checks truthiness; update the
condition that sets collapsed.value so it detects an explicit stored false (e.g.
check for undefined rather than falsiness). Locate the block using
isRef(collapsed) and storageData.value?.collapsed and change the guard to verify
storageData.value exists and storageData.value.collapsed is not undefined (or
use `'collapsed' in storageData.value`) before assigning collapsed.value =
storageData.value.collapsed.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6522

commit: 4fc0fe0