docs(app): update error

docs/app/app.vue

@@ -75,14 +75,6 @@ useServerSeoMeta({
 
 const { framework, frameworks } = useSharedData()
 
-const groups = computed(() => {
-  return [{
-    id: 'framework',
-    label: 'Framework',
-    items: frameworks.value
-  }]
-})
-
 function filterFrameworkItems(items: any[]) {
   return items?.filter(item => !item.framework || item.framework === framework.value)
 }
@@ -131,7 +123,11 @@ provide('navigation', filteredNavigation)
         <LazyUContentSearch
           v-model:search-term="searchTerm"
           :files="files"
-          :groups="groups"
+          :groups="[{
+            id: 'framework',
+            label: 'Framework',
+            items: frameworks
+          }]"
           :navigation="filteredNavigation"
           :fuse="{ resultLimit: 42 }"
         />

docs/app/error.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import colors from 'tailwindcss/colors'
+// import { debounce } from 'perfect-debounce'
 import type { NuxtError } from '#app'
 
 const props = defineProps<{
@@ -11,7 +12,19 @@ const appConfig = useAppConfig()
 const colorMode = useColorMode()
 
 const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
-const { data: files } = await useAsyncData('files', () => queryCollectionSearchSections('content', { ignoredTags: ['style'] }))
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('content'), {
+  server: false
+})
+
+const searchTerm = ref('')
+
+// watch(searchTerm, debounce((query: string) => {
+//   if (!query) {
+//     return
+//   }
+
+//   useTrackEvent('Search', { props: { query: `${query} - ${searchTerm.value?.commandPaletteRef.results.length} results` } })
+// }, 500))
 
 const links = computed(() => [{
   label: 'Docs',
@@ -68,7 +81,33 @@ useServerSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
-provide('navigation', navigation)
+const { framework, frameworks } = useSharedData()
+
+function filterFrameworkItems(items: any[]) {
+  return items?.filter(item => !item.framework || item.framework === framework.value)
+}
+
+function processNavigationItem(item: any): any {
+  if (item.shadow) {
+    const matchingChild = filterFrameworkItems(item.children)?.[0]
+    return matchingChild
+      ? {
+          ...matchingChild,
+          title: item.title,
+          children: matchingChild.children ? processNavigationItem(matchingChild) : undefined
+        }
+      : item
+  }
+
+  return {
+    ...item,
+    children: item.children?.length ? filterFrameworkItems(item.children)?.map(processNavigationItem) : undefined
+  }
+}
+
+const filteredNavigation = computed(() => navigation.value?.map(processNavigationItem))
+
+provide('navigation', filteredNavigation)
 </script>
 
 <template>
@@ -84,7 +123,17 @@ provide('navigation', navigation)
     <Footer />
 
     <ClientOnly>
-      <LazyUContentSearch :files="files" :navigation="navigation" :fuse="{ resultLimit: 42 }" />
+      <LazyUContentSearch
+        v-model:search-term="searchTerm"
+        :files="files"
+        :groups="[{
+          id: 'framework',
+          label: 'Framework',
+          items: frameworks
+        }]"
+        :navigation="filteredNavigation"
+        :fuse="{ resultLimit: 42 }"
+      />
     </ClientOnly>
   </UApp>
 </template>