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

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",