From ae380c8c69651cb379df336759d41733fdcf545e Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Wed, 3 Sep 2025 17:14:11 +0200
Subject: [PATCH] feat: refactor language handling and improve UI components
 for better usability

---
 app/app.vue                            | 26 ++++++++++++++++--
 app/components/chat/CommandPalette.vue | 38 ++++++++++----------------
 app/components/tool/Language.vue       |  7 ++---
 app/composables/language.ts            | 11 ++++++++
 locales/fr.json                        |  2 +-
 5 files changed, 51 insertions(+), 33 deletions(-)
 create mode 100644 app/composables/language.ts

diff --git a/app/app.vue b/app/app.vue
index 8a0491d..8db4bc9 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -8,15 +8,16 @@ useHead({
   <UApp>
     <NuxtLoadingIndicator color="#808080" />
     <AppBackground />
-    <UContainer class="z-50 relative">
-      <NuxtPage class="mt-12" />
+    <UContainer>
+      <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>
diff --git a/app/components/chat/CommandPalette.vue b/app/components/chat/CommandPalette.vue
index 6b65a3d..586020a 100644
--- a/app/components/chat/CommandPalette.vue
+++ b/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: () => {
-    openMessageModal.value = !openMessageModal.value
-  },
-  meta_d: () => {
-    openClearModal.value = !openClearModal.value
-  },
-  l: () => changeLocale(),
+  meta_enter: () => openMessageModal.value = !openMessageModal.value,
+  meta_d: () => openClearModal.value = !openClearModal.value,
+  l: () => changeLocale(currentLocale.value!.code === 'en' ? 'fr' : currentLocale.value!.code === 'fr' ? 'es' : 'en'),
   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="active ? 'bottom-0 left-1/2 -translate-x-1/2' : 'md:bottom-1/4 left-1/2 -translate-x-1/2 bottom-0'"
+    class="fixed z-50 pb-8 duration-700 mx-auto p-8"
+    :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' }">
-      <UFieldGroup>
+    <UCard variant="outline" class="rounded-xl shadow-lg w-full" :ui="{ body: 'p-2 sm:p-2 flex gap-2 w-full' }">
+      <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="active ? '' : 'p-6'"
+            class="rounded-lg cursor-pointer p-2 w-full justify-center"
             :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"
diff --git a/app/components/tool/Language.vue b/app/components/tool/Language.vue
index 2eb51cb..52613bd 100644
--- a/app/components/tool/Language.vue
+++ b/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()
-
-async function changeLocale(newLocale: string) {
-  await setLocale(newLocale as 'en' | 'fr' | 'es')
-}
+const { locale, t } = useI18n()
+const { changeLocale } = useLanguage()
 </script>
 
 <template>
diff --git a/app/composables/language.ts b/app/composables/language.ts
new file mode 100644
index 0000000..0a09edb
--- /dev/null
+++ b/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,
+  }
+}
diff --git a/locales/fr.json b/locales/fr.json
index b6c6fb8..f3bfe94 100644
--- a/locales/fr.json
+++ b/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": {