fix: responsive admin translations and language watcher

src/i18n.ts

@@ -40,28 +40,28 @@ const deepMerge = (target: any, source: any) => {
 
 export const loadAdminTranslations = async (lang?: string) => {
   const targetLang = lang || (i18n.global as any).locale.value;
-  console.log(`[i18n] Loading admin translations for: ${targetLang}`);
+  console.log(`[i18n] Loading admin translations for: ${targetLang}...`);
   try {
     const module = await import(`./locales/${targetLang}.admin.json`);
     let newMessages = module.default || module;
     
-    // Ensure we are working with the admin sub-key if it exists at root,
-    // otherwise wrap it if it seems to be just the content
+    // Ensure the structure is correct: { admin: { ... } }
     if (!newMessages.admin && (newMessages.tabs || newMessages.actions || newMessages.managementCenter)) {
        newMessages = { admin: newMessages };
     }
 
+    // getLocaleMessage returns a copy in Composer mode
     const currentMessages = i18n.global.getLocaleMessage(targetLang);
     
-    // Perform merge directly on the current messages object
-    deepMerge(currentMessages, newMessages);
+    // Perform deep merge
+    const merged = deepMerge({ ...currentMessages }, newMessages);
     
-    // Re-set to trigger reactivity
-    i18n.global.setLocaleMessage(targetLang, currentMessages);
+    // Explicitly set the updated message object back to the locale
+    i18n.global.setLocaleMessage(targetLang, merged);
     
-    console.log(`[i18n] Admin translations successfully merged for: ${targetLang}`);
+    console.log(`[i18n] Admin translations successfully loaded and merged for: ${targetLang}`);
   } catch (error) {
-    console.error(`[i18n] Failed to load admin translations for ${targetLang}`, error);
+    console.error(`[i18n] Failed to load admin translations for ${targetLang}:`, error);
   }
 };
 

src/pages/Admin.vue

@@ -40,7 +40,7 @@
       </div>
 
       <!-- Content Loader -->
-      <div v-if="isLoading" class="flex items-center justify-center py-20">
+      <div v-if="isLoading || isTranslationsLoading" class="flex items-center justify-center py-20">
         <RefreshCw class="w-8 h-8 text-primary animate-spin" />
       </div>
 
@@ -380,6 +380,7 @@ const STATUS_CONFIG: Record<string, { color: string; icon: any }> = {
 
 // State
 const isLoading = ref(true);
+const isTranslationsLoading = ref(false);
 const searchQuery = ref("");
 const adminChatId = ref<any>(null);
 
@@ -429,6 +430,13 @@ watch(activeTab, (newTab) => {
   fetchData();
 });
 
+// React to language changes
+watch(() => (i18n.global as any).locale.value, async (newLang) => {
+  isTranslationsLoading.value = true;
+  await loadAdminTranslations(newLang);
+  isTranslationsLoading.value = false;
+}, { immediate: true });
+
 watch([searchQuery], () => {
   if (activeTab.value === 'orders') debouncedFetchData();
   else fetchData();