feat: refactor language handling and improve UI components for better usability

app/app.vue

@@ -8,15 +8,16 @@ useHead({
   <UApp>
     <NuxtLoadingIndicator color="#808080" />
     <AppBackground />
-    <UContainer class="z-50 relative">
+    <UContainer>
-      <NuxtPage class="mt-12" />
+      <NuxtPage />
     </UContainer>
   </UApp>
 </template>
 
-<style scoped>
+<style>
 @reference "@/assets/css/main.css";
 
+/* Transition switcher */
 .page-enter-active,
 .page-leave-active {
   transition: all 0.2s;
@@ -31,4 +32,23 @@ useHead({
   opacity: 0;
   transform: translateY(5px);
 }
+
+/* Theme switcher */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+::view-transition-old(root) {
+  z-index: 1;
+}
+::view-transition-new(root) {
+  z-index: 9999;
+}
+.dark::view-transition-old(root) {
+  z-index: 9999;
+}
+.dark::view-transition-new(root) {
+  z-index: 1;
+}
 </style>

app/components/chat/CommandPalette.vue

@@ -13,10 +13,10 @@ const searchTerm = ref('')
 const openMessageModal = ref(false)
 const openClearModal = ref(false)
 
-const { t, locale, locales, setLocale } = useI18n()
+const { t, locale, locales } = useI18n()
-
 const { messages, submitMessage } = useChat()
 const { clearMessages, messages: storeMessages } = useChatStore()
+
 const loading = computed(() => storeMessages.some(msg => msg.state === ChatState.LOADING))
 
 function handleDelete() {
@@ -31,20 +31,13 @@ function onSelect(item: CommandPaletteItem) {
 }
 
 const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
+const { changeLocale } = useLanguage()
+const { dark, toggleDark } = useTheme()
 
-async function changeLocale() {
-  await setLocale(currentLocale.value!.code === 'en' ? 'fr' : currentLocale.value!.code === 'fr' ? 'es' : 'en')
-}
-
-const { isDark, toggleDark } = useTheme()
 defineShortcuts({
-  meta_enter: () => {
+  meta_enter: () => openMessageModal.value = !openMessageModal.value,
-    openMessageModal.value = !openMessageModal.value
+  meta_d: () => openClearModal.value = !openClearModal.value,
-  },
+  l: () => changeLocale(currentLocale.value!.code === 'en' ? 'fr' : currentLocale.value!.code === 'fr' ? 'es' : 'en'),
-  meta_d: () => {
-    openClearModal.value = !openClearModal.value
-  },
-  l: () => changeLocale(),
   t: () => toggleDark({ clientX: window.innerWidth, clientY: 0 }),
 })
 
@@ -58,17 +51,15 @@ const commandPaletteUi = {
   item: 'data-highlighted:not-data-disabled:before:bg-muted',
   content: 'flex-1 overflow-y-auto',
 }
-
-// const isDesktop = computed(() => window.innerWidth >= 768)
 </script>
 
 <template>
   <nav
-    class="fixed z-50 pb-8 duration-700"
+    class="fixed z-50 pb-8 duration-700 mx-auto p-8"
-    :class="active ? 'bottom-0 left-1/2 -translate-x-1/2' : 'md:bottom-1/4 left-1/2 -translate-x-1/2 bottom-0'"
+    :class="active ? 'bottom-0 left-1/2 -translate-x-1/2' : 'max-w-[40rem] w-full md:bottom-1/5 left-1/2 -translate-x-1/2 bottom-0'"
   >
-    <UCard variant="outline" class="rounded-xl shadow-lg" :ui="{ body: 'p-2 sm:p-2 flex gap-2' }">
+    <UCard variant="outline" class="rounded-xl shadow-lg w-full" :ui="{ body: 'p-2 sm:p-2 flex gap-2 w-full' }">
-      <UFieldGroup>
+      <UFieldGroup class="w-full">
         <UModal v-model:open="openMessageModal" :ui="modalUi" title="Hey" description="Hey">
           <UButton
             :label="loading ? t('palette.cmd.sending') : t('palette.cmd.send')"
@@ -76,8 +67,7 @@ const commandPaletteUi = {
             color="neutral"
             size="xl"
             icon="i-ph-paper-plane-tilt-duotone"
-            class="rounded-lg cursor-pointer"
+            class="rounded-lg cursor-pointer p-2 w-full justify-center"
-            :class="active ? '' : 'p-6'"
             :disabled="loading"
           >
             <template #trailing>
@@ -121,7 +111,7 @@ const commandPaletteUi = {
                   <div class="flex items-center gap-1">
                     <UButton color="neutral" variant="ghost" :label="t('palette.cmd.send')" class="text-dimmed" size="xs">
                       <template #trailing>
-                        <UKbd value="enter" color="info" />
+                        <UKbd size="lg" value="enter" color="info" />
                       </template>
                     </UButton>
                   </div>
@@ -157,7 +147,7 @@ const commandPaletteUi = {
       <ClientOnly>
         <UFieldGroup class="flex items-center justify-center" :orientation="active ? 'horizontal' : 'vertical'">
           <UButton
-            :icon="isDark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
+            :icon="dark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
             color="neutral"
             variant="outline"
             size="xl"

app/components/tool/Language.vue

@@ -1,11 +1,8 @@
 <script lang="ts" setup>
 import { en, es, fr } from '@nuxt/ui/locale'
 
-const { locale, setLocale, t } = useI18n()
+const { locale, t } = useI18n()
-
+const { changeLocale } = useLanguage()
-async function changeLocale(newLocale: string) {
-  await setLocale(newLocale as 'en' | 'fr' | 'es')
-}
 </script>
 
 <template>

app/composables/language.ts

@@ -0,0 +1,11 @@
+export function useLanguage() {
+  const { setLocale } = useI18n()
+
+  async function changeLocale(newLocale: string) {
+    await setLocale(newLocale as 'en' | 'fr' | 'es')
+  }
+
+  return {
+    changeLocale,
+  }
+}

locales/fr.json

@@ -14,7 +14,7 @@
     "cmd": {
       "placeholder": "Utilisez les flèches pour naviguer parmi les prompts préfaits. Appuyez sur Entrer pour envoyer le message.",
       "send": "Envoyer un nouveau message",
-      "sending": "Envoi..."
+      "sending": "Envoi en cours..."
     }
   },
   "command": {