fix: guard JSON.parse with try/catch

Author: gusa4grr

app/components/Settings/AccentColorPicker.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { UserPreferences } from '#shared/schemas/userPreferences'
+
 const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
 
 onPrehydrate(el => {
-  const preferences = JSON.parse(localStorage.getItem('npmx-user-preferences') || '{}')
+  let preferences: UserPreferences = {}
   const defaultId = 'sky'
+  try {
+    preferences = JSON.parse(localStorage.getItem('npmx-user-preferences') || '{}')
+  } catch {}
   const id = preferences.accentColorId
   if (id) {
     const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)

app/components/Settings/BgThemePicker.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { UserPreferences } from '#shared/schemas/userPreferences'
+
 const { backgroundThemes, selectedBackgroundTheme, setBackgroundTheme } = useBackgroundTheme()
 
 onPrehydrate(el => {
-  const preferences = JSON.parse(localStorage.getItem('npmx-user-preferences') || '{}')
+  let preferences: UserPreferences = {}
   const defaultId = 'neutral'
+  try {
+    preferences = JSON.parse(localStorage.getItem('npmx-user-preferences') || '{}')
+  } catch {}
   const id = preferences.preferredBackgroundTheme
   if (id) {
     const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)

app/composables/useUserLocalSettings.ts

@@ -1,4 +1,4 @@
-interface UserLocalSettings {
+export interface UserLocalSettings {
   sidebar: {
     collapsed: string[]
     animateSparkline: boolean

app/utils/prehydrate.ts

@@ -1,3 +1,6 @@
+import type { UserPreferences } from '#shared/schemas/userPreferences'
+import type { UserLocalSettings } from '~/composables/useUserLocalSettings'
+
 /**
  * Initialize user preferences before hydration to prevent flash/layout shift.
  * This sets CSS custom properties and data attributes that CSS can use
@@ -16,7 +19,10 @@ export function initPreferencesOnPrehydrate() {
     const validPMs = new Set(['npm', 'pnpm', 'yarn', 'bun', 'deno', 'vlt'])
 
     // Read user preferences from localStorage
-    const preferences = JSON.parse(localStorage.getItem('npmx-user-preferences') || '{}')
+    let preferences: UserPreferences = {}
+    try {
+      preferences = JSON.parse(localStorage.getItem('npmx-user-preferences') || '{}')
+    } catch {}
 
     const accentColorId = preferences.accentColorId
     if (accentColorId && accentColorIds.has(accentColorId)) {
@@ -50,8 +56,10 @@ export function initPreferencesOnPrehydrate() {
     // Set data attribute for CSS-based visibility
     document.documentElement.dataset.pm = pm
 
-    // Read sidebar preferences from separate localStorage key
-    const sidebar = JSON.parse(localStorage.getItem('npmx-sidebar-preferences') || '{}')
-    document.documentElement.dataset.collapsed = sidebar.collapsed?.join(' ') ?? ''
+    let localSettings: Partial<UserLocalSettings> = {}
+    try {
+      localSettings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+    } catch {}
+    document.documentElement.dataset.collapsed = localSettings.sidebar?.collapsed?.join(' ') ?? ''
   })
 }