Refactor: streamline components and update styles for improved performance and maintainability

app/components/AppBackground.vue

@@ -1,37 +1,32 @@
-<script lang="ts" setup>
-import type { NavColor } from '~~/types'
-import { navColors } from '~~/types'
-
-const route = useRoute()
-const colorMode = useColorMode()
-
-const colors = computed((): NavColor[] => {
-  const navColor = navColors.find(nav => route.name === nav.name)
-  if (navColor?.colors)
-    return navColor.colors
-
-  const fallbackColor = colorMode.value === 'dark' ? '#000000' : '#ffffff'
-  const fallbackGradient = { color: fallbackColor, x: 0, y: 0, radius: 0 }
-  return [fallbackGradient, fallbackGradient]
-})
-
-const backgroundStyle = computed(() => {
-  const gradients = colors.value
-    .map(({ color, radius, x, y }) =>
-      `radial-gradient(circle ${radius}px at ${x}% ${y}%, ${color}4D, transparent)`,
-    )
-    .join(', ')
-
-  return {
-    backgroundImage: gradients,
-    backgroundSize: Array.from({ length: colors.value.length }).fill('100% 100%').join(', '),
-  }
-})
-</script>
-
 <template>
-  <div
-    class="fixed inset-0 z-0 hidden md:block blur-xl"
-    :style="backgroundStyle"
-  />
+  <div class="pointer-events-none fixed inset-0 z-40 size-full overflow-hidden">
+    <div class="noise pointer-events-none absolute inset-[-200%] z-50 size-[400%] bg-[url('/noise.png')] opacity-[4%]" />
+  </div>
 </template>
+
+<style scoped>
+.noise {
+    animation: noise 2s steps(10) infinite;
+}
+
+@keyframes noise {
+    0%, 20%, 40%, 60%, 80%, 100% {
+        transform: translate(0, 0);
+    }
+    10% {
+        transform: translate(-5%, -10%);
+    }
+    30% {
+        transform: translate(5%, 10%);
+    }
+    50% {
+        transform: translate(-15%, 5%);
+    }
+    70% {
+        transform: translate(10%, -5%);
+    }
+    90% {
+        transform: translate(5%, -10%);
+    }
+}
+</style>

app/components/AppHeader.vue

@@ -1,33 +1,11 @@
 <script setup lang="ts">
 import { navs, socials } from '~~/types'
 
-const { locale, setLocale, locales, t } = useI18n()
-const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
-const lang = ref(locale.value)
-watch(lang, () => changeLocale(lang.value))
+const { locale, t } = useI18n()
 
-async function changeLocale(newLocale?: string) {
-  document.body.style.animation = 'switch-on .2s'
-  await new Promise(resolve => setTimeout(resolve, 200))
-
-  if (newLocale) {
-    await setLocale(newLocale as 'en' | 'fr' | 'es')
-  }
-  else {
-    newLocale = currentLocale.value!.code === 'en' ? 'fr' : currentLocale.value!.code === 'fr' ? 'es' : 'en'
-    await setLocale(newLocale as 'en' | 'fr' | 'es')
-  }
-  document.body.style.animation = 'switch-off .5s'
-
-  await new Promise(resolve => setTimeout(resolve, 200))
-  document.body.style.animation = ''
-}
-
-const openSelectMenu = ref(false)
 const openContactDrawer = ref(false)
 const router = useRouter()
 defineShortcuts({
-  l: () => changeLocale(),
   c: () => openContactDrawer.value = !openContactDrawer.value,
   backspace: () => router.back(),
 })
@@ -106,32 +84,7 @@ const socialsList = [
         </UTooltip>
       </UDropdownMenu>
       <USeparator orientation="vertical" class="h-6" />
-      <ClientOnly>
-        <ThemeSwitcher />
-        <UTooltip
-          :kbds="['L']"
-          :text="t('language')"
-          class="cursor-pointer"
-          :delay-duration="4"
-          :content="{
-            align: 'center',
-            side: 'right',
-            sideOffset: 8,
-          }"
-        >
-          <USelect
-            v-model="lang"
-            v-model:open="openSelectMenu"
-            :items="locales"
-            size="sm"
-            :leading-icon="currentLocale!.icon as string"
-            label-key="label"
-            value-key="code"
-            variant="soft"
-            @update:model-value="changeLocale"
-          />
-        </UTooltip>
-      </ClientOnly>
+      <LangSwitcher />
     </nav>
   </header>
 </template>
@@ -167,7 +120,6 @@ const socialsList = [
 <i18n lang="json">
 {
   "en": {
-    "language": "change language",
     "status": "status page",
     "contact": {
       "button": "contact me",
@@ -175,7 +127,6 @@ const socialsList = [
     }
   },
   "fr": {
-    "language": "changer de langue",
     "status": "page de statut",
     "contact": {
       "button": "me contacter",
@@ -183,7 +134,6 @@ const socialsList = [
     }
   },
   "es": {
-    "language": "cambiar idioma",
     "status": "página de estado",
     "contact": {
       "button": "contactame",

app/components/LangSwitcher.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+const openSelectMenu = ref(false)
+
+const { locale, setLocale, locales, t } = useI18n()
+const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
+const lang = ref(locale.value)
+watch(lang, () => changeLocale(lang.value))
+
+async function changeLocale(newLocale: string) {
+  document.body.style.animation = 'switch-on .2s'
+  await new Promise(resolve => setTimeout(resolve, 200))
+
+  await setLocale(newLocale as 'en' | 'fr' | 'es')
+  document.body.style.animation = 'switch-off .5s'
+
+  await new Promise(resolve => setTimeout(resolve, 200))
+  document.body.style.animation = ''
+}
+
+defineShortcuts({
+  l: () => lang.value = currentLocale.value!.code === 'en' ? 'fr' : currentLocale.value!.code === 'fr' ? 'es' : 'en',
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <ThemeSwitcher />
+    <UTooltip
+      :kbds="['L']"
+      :text="t('language')"
+      class="cursor-pointer"
+      :delay-duration="4"
+      :content="{
+        align: 'center',
+        side: 'right',
+        sideOffset: 8,
+      }"
+    >
+      <USelect
+        v-model="lang"
+        v-model:open="openSelectMenu"
+        :items="locales"
+        size="sm"
+        :leading-icon="(currentLocale!.icon as string)"
+        label-key="label"
+        value-key="code"
+        variant="soft"
+        @update:model-value="changeLocale"
+      />
+    </UTooltip>
+  </ClientOnly>
+</template>
+
+<i18n lang="json">
+{
+  "en": {
+    "language": "change language"
+  },
+  "fr": {
+    "language": "changer de langue"
+  },
+  "es": {
+    "language": "cambiar idioma"
+  }
+}
+</i18n>

app/components/ThemeSwitcher.vue

@@ -7,8 +7,12 @@ function switchTheme() {
   colorMode.preference = nextTheme.value
 }
 
-function startViewTransition(event: MouseEvent | { clientX: number, clientY: number }) {
-  if (!document.startViewTransition) {
+function toggleDark(event: MouseEvent | { clientX: number, clientY: number }) {
+  // @ts-expect-error experimental API
+  const isAppearanceTransition = document.startViewTransition
+    && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+  if (!isAppearanceTransition) {
     switchTheme()
     return
   }
@@ -16,39 +20,38 @@ function startViewTransition(event: MouseEvent | { clientX: number, clientY: num
   const x = event.clientX
   const y = event.clientY
   const endRadius = Math.hypot(
-    Math.max(x, window.innerWidth - x),
-    Math.max(y, window.innerHeight - y),
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
   )
-
   const transition = document.startViewTransition(async () => {
     switchTheme()
     await nextTick()
   })
-
-  transition.ready.then(() => {
-    const clipPath = [
-      `circle(0px at ${x}px ${y}px)`,
-      `circle(${endRadius}px at ${x}px ${y}px)`,
-    ]
-    document.documentElement.animate(
-      {
-        clipPath: colorMode.value === 'dark'
-          ? [...clipPath].reverse()
-          : clipPath,
-      },
-      {
-        duration: 500,
-        easing: 'ease-out',
-        pseudoElement: colorMode.value === 'dark'
-          ? '::view-transition-old(root)'
-          : '::view-transition-new(root)',
-      },
-    )
-  })
+  transition.ready
+    .then(() => {
+      const clipPath = [
+        `circle(0px at ${x}px ${y}px)`,
+        `circle(${endRadius}px at ${x}px ${y}px)`,
+      ]
+      document.documentElement.animate(
+        {
+          clipPath: colorMode.value === 'dark'
+            ? [...clipPath].reverse()
+            : clipPath,
+        },
+        {
+          duration: 400,
+          easing: 'ease-out',
+          pseudoElement: colorMode.value === 'dark'
+            ? '::view-transition-old(root)'
+            : '::view-transition-new(root)',
+        },
+      )
+    })
 }
 
 defineShortcuts({
-  t: () => startViewTransition({ clientX: window.innerWidth, clientY: 0 }),
+  t: () => toggleDark({ clientX: window.innerWidth, clientY: 0 }),
 })
 </script>
 
@@ -65,7 +68,7 @@ defineShortcuts({
       aria-label="switch theme"
       size="sm"
       variant="ghost"
-      @click="startViewTransition"
+      @click="toggleDark"
     />
   </UTooltip>
 </template>
@@ -80,6 +83,6 @@ defineShortcuts({
   },
   "es": {
     "theme": "cambiar tema"
-  },
+  }
 }
 </i18n>