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

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>