updating nuxt and fixing errors

src/components/header/ColorPicker.vue

@@ -37,7 +37,9 @@ const { getColor, setColor } = useColorStore()
               :variant="color === getColor ? 'solid' : 'ghost'"
               @click.stop.prevent="setColor(color)"
             >
-              <span class="inline-block w-3 h-3 rounded-full" :class="`bg-${color}-500`" />
+              <span class="flex items-center justify-center w-4 h-4 rounded-[4px] border text-white" :class="`bg-${color}-500/80 border-${color}-500`">
+                <UIcon v-if="color === getColor" name="i-ic-round-check" />
+              </span>
             </UButton>
           </UTooltip>
         </div>

src/error.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-const error = useError()
+import type { NuxtError } from 'nuxt/app'
+
+defineProps({
+  error: Object as () => NuxtError,
+})
 const appConfig = useAppConfig()
 const getColor = computed(() => appConfig.ui.primary)
 </script>
@@ -8,10 +12,10 @@ const getColor = computed(() => appConfig.ui.primary)
   <NuxtLayout name="default">
     <div class="flex flex-col items-center gap-4 mt-12">
       <h1 class="font-medium text-[8rem] md:text-[16rem] leading-none bg-error bg-clip-text tracking-wider font-error" :class="`text-${getColor}-500`">
-        {{ error.statusCode }}
+        {{ error?.statusCode }}
       </h1>
       <p class="text-lg md:text-2xl text-subtitle text-center">
-        Sorry, {{ error.statusCode === 404
+        Sorry, {{ error?.statusCode === 404
           ? "the page you are looking for doesn't exist or as been moved."
           : "you have encountered a problem."
         }}

src/layouts/default.vue

@@ -4,17 +4,19 @@ const getColor = computed(() => appConfig.ui.primary)
 </script>
 
 <template>
-  <NuxtLoadingIndicator :color="getColor" />
-  <section class="fixed inset-0 flex justify-center sm:px-8">
-    <div class="flex w-full max-w-7xl">
-      <div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
+  <div>
+    <NuxtLoadingIndicator :color="getColor" />
+    <section class="fixed inset-0 flex justify-center sm:px-8">
+      <div class="flex w-full max-w-7xl">
+        <div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
+      </div>
+    </section>
+    <div class="relative z-50 min-h-[100svh]">
+      <Header />
+      <UContainer>
+        <NuxtPage />
+      </UContainer>
+      <Footer />
     </div>
-  </section>
-  <div class="relative z-50">
-    <Header />
-    <UContainer>
-      <slot />
-    </UContainer>
-    <Footer />
   </div>
 </template>

src/plugins/trpc.ts

@@ -1,3 +1,4 @@
+import process from 'node:process'
 import { loggerLink } from '@trpc/client'
 import SuperJSON from 'superjson'
 import { createTRPCNuxtClient, httpBatchLink } from 'trpc-nuxt/client'

src/server/prisma.ts

@@ -1,3 +1,4 @@
+import process from 'node:process'
 import { PrismaClient } from '@prisma/client/edge'
 
 const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }

src/server/trpc/context.ts

@@ -1,6 +1,6 @@
 import type { inferAsyncReturnType } from '@trpc/server'
 import type { H3Event } from 'h3'
-import { prisma } from '~/server/prisma'
+import { prisma } from '../prisma'
 
 export function createContext(_event: H3Event) {
   return {

src/server/trpc/routers/announcement.ts

@@ -1,4 +1,4 @@
-import { publicProcedure, router } from '~/server/trpc/trpc'
+import { publicProcedure, router } from '../trpc'
 
 export default router({
   get: publicProcedure

src/server/trpc/routers/index.ts

@@ -1,8 +1,8 @@
-import announcement from '~/server/trpc/routers/announcement'
-import maintenance from '~/server/trpc/routers/maintenance'
-import talents from '~/server/trpc/routers/talents'
-import post from '~/server/trpc/routers/post'
-import { router } from '~/server/trpc/trpc'
+import { router } from '../trpc'
+import announcement from './announcement'
+import maintenance from './maintenance'
+import post from './post'
+import talents from './talents'
 
 export const appRouter = router({
   announcement,

src/server/trpc/routers/maintenance.ts

@@ -1,4 +1,4 @@
-import { publicProcedure, router } from '~/server/trpc/trpc'
+import { publicProcedure, router } from '../trpc'
 
 export default router({
   get: publicProcedure

src/server/trpc/routers/post.ts

@@ -1,8 +1,8 @@
-import { object, string } from 'valibot'
-import { publicProcedure, router } from '~/server/trpc/trpc'
+import { z } from 'zod'
+import { publicProcedure, router } from '../trpc'
 
-const PostSchema = object({
-  slug: string(),
+const PostSchema = z.object({
+  slug: z.string(),
 })
 
 export default router({

src/server/trpc/routers/talents.ts

@@ -1,11 +1,11 @@
-import { boolean, literal, object, string, union } from 'valibot'
-import { publicProcedure, router } from '~/server/trpc/trpc'
+import { z } from 'zod'
+import { publicProcedure, router } from '../trpc'
 
 export default router({
   getTalents: publicProcedure
-    .input(object({
-      favorite: boolean(),
-      category: union([string(), literal('all')]),
+    .input(z.object({
+      favorite: z.boolean(),
+      category: z.union([z.string(), z.literal('all')]),
     }))
     .query(async ({ ctx, input }) => {
       if (input.favorite) {

src/server/trpc/trpc.ts

@@ -1,6 +1,6 @@
 import { initTRPC } from '@trpc/server'
 import SuperJSON from 'superjson'
-import type { Context } from '~/server/trpc/context'
+import type { Context } from './context'
 
 const trpc = initTRPC.context<Context>().create({
   transformer: SuperJSON,