chore: improve hydration for code wide

Author: alexdln

app/components/Code/Header.vue

@@ -24,7 +24,7 @@ const emit = defineEmits<{
   'mobile-tree-drawer-toggle': []
 }>()
 
-const { codeContainerFull, toggleCodeContainer } = useCodeContainer()
+const { toggleCodeContainer } = useCodeContainer()
 
 const markdownViewModes = [
   {
@@ -254,9 +254,7 @@ useEventListener('keydown', (event: KeyboardEvent) => {
           <ButtonBase
             class="px-3 max-xl:hidden"
             :disabled="loading"
-            :classicon="
-              codeContainerFull ? 'i-lucide:fold-horizontal' : 'i-lucide:unfold-horizontal'
-            "
+            classicon="i-lucide:unfold-horizontal [.container-full>&]:i-lucide:fold-horizontal"
             :aria-label="$t('code.toggle_container')"
             @click="toggleCodeContainer()"
           />

app/composables/useSettings.ts

@@ -81,8 +81,6 @@ const STORAGE_KEY = 'npmx-settings'
 // Shared settings instance (singleton per app)
 let settingsRef: RemovableRef<AppSettings> | null = null
 
-const hasHydrated = ref(false)
-
 /**
  * Composable for managing application settings with localStorage persistence.
  * Settings are shared across all components that use this composable.
@@ -244,11 +242,7 @@ export function useBackgroundTheme() {
 export function useCodeContainer() {
   const { settings } = useSettings()
 
-  onMounted(() => {
-    hasHydrated.value = true
-  })
-
-  const codeContainerFull = computed(() => hasHydrated.value && settings.value.codeContainerFull)
+  const codeContainerFull = computed(() => settings.value.codeContainerFull)
 
   function toggleCodeContainer() {
     settings.value.codeContainerFull = !settings.value.codeContainerFull

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

@@ -290,11 +290,10 @@ defineOgImageComponent('Default', {
 
 onPrehydrate(el => {
   const settingsSaved = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
-  const container = el.getElementById('code-page-container')
+  const container = el.querySelector('#code-page-container')
 
   if (settingsSaved?.codeContainerFull === true && container) {
-    console.log('add max-w-full')
-    container!.classList.add('max-w-full', 'border-0')
+    container.classList.add('container-full')
   }
 })
 </script>
@@ -336,8 +335,8 @@ onPrehydrate(el => {
     <div
       v-else-if="!!fileTree"
       id="code-page-container"
-      class="w-full grid grid-cols-[18rem_1fr] max-lg:grid-cols-[16rem_1fr] max-md:grid-cols-[1fr] border-border border-x px-0 mx-auto transition-[max-width] duration-300"
-      :class="[codeContainerFull ? 'max-w-full border-0' : 'container']"
+      class="w-full container grid grid-cols-[18rem_1fr] max-lg:grid-cols-[16rem_1fr] max-md:grid-cols-[1fr] border-border border-x px-0 mx-auto transition-[max-width] duration-300"
+      :class="codeContainerFull ? 'container-full' : ''"
       dir="ltr"
     >
       <!-- File tree sidebar - sticky with internal scroll -->
@@ -479,3 +478,9 @@ onPrehydrate(el => {
     </ClientOnly>
   </main>
 </template>
+
+<style>
+.container-full.container-full {
+  @apply max-w-full border-0;
+}
+</style>