fix(docs): polish 404 page design

apps/docs/app/error.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+import type { ContentNavigationItem, PageCollections } from '@nuxt/content'
+import * as nuxtUiLocales from '@nuxt/ui/locale'
+
+const props = defineProps<{
+  error: NuxtError
+}>()
+
+const { forced: forcedColorMode } = useDocusColorMode()
+const { locale, locales, isEnabled, t, switchLocalePath } = useDocusI18n()
+
+const nuxtUiLocale = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales] || nuxtUiLocales.en)
+const lang = computed(() => nuxtUiLocale.value.code)
+const dir = computed(() => nuxtUiLocale.value.dir)
+
+useHead({
+  htmlAttrs: {
+    lang,
+    dir,
+  },
+})
+
+const localizedError = computed(() => {
+  return {
+    ...props.error,
+    statusMessage: t('common.error.title'),
+    message: t('common.error.description'),
+  }
+})
+
+useSeoMeta({
+  title: () => t('common.error.title'),
+  description: () => t('common.error.description'),
+})
+
+if (isEnabled.value) {
+  const route = useRoute()
+  const defaultLocale = useRuntimeConfig().public.i18n.defaultLocale!
+  onMounted(() => {
+    const currentLocale = route.path.split('/')[1]
+    if (!locales.some(locale => locale.code === currentLocale)) {
+      return navigateTo(switchLocalePath(defaultLocale) as string)
+    }
+  })
+}
+
+const collectionName = computed(() => isEnabled.value ? `docs_${locale.value}` : 'docs')
+
+const { data: navigation } = await useAsyncData(`navigation_${collectionName.value}`, () => queryCollectionNavigation(collectionName.value as keyof PageCollections), {
+  transform: (data: ContentNavigationItem[]) => transformNavigation(data, isEnabled.value, locale.value),
+  watch: [locale],
+})
+const { data: files } = useLazyAsyncData(`search_${collectionName.value}`, () => queryCollectionSearchSections(collectionName.value as keyof PageCollections), {
+  server: false,
+})
+
+provide('navigation', navigation)
+</script>
+
+<template>
+  <UApp :locale="nuxtUiLocale">
+    <div class="docus-sub-header">
+      <AppHeader />
+
+      <UError :error="localizedError" />
+
+      <AppFooter />
+    </div>
+
+    <ClientOnly>
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation"
+        :color-mode="!forcedColorMode"
+      />
+    </ClientOnly>
+  </UApp>
+</template>
+
+<style>
+@media (min-width: 1024px) {
+  .docus-sub-header {
+    --ui-header-height: 112px;
+  }
+}
+</style>