- verbeteringen client

- Enkel nog probleem met vertaling van de ProgressTracker constanten

eveai_chat_client/static/assets/vue-components/SideBarExplanation.vue

@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue';
-import { useTranslationClient } from '../js/composables/useTranslation.js';
+import { useComponentTranslations } from '../js/services/LanguageProvider.js';
 
 const props = defineProps({
   originalText: {
@@ -26,7 +26,7 @@ const props = defineProps({
   },
   currentLanguage: {
     type: String,
-    default: 'nl'
+    default: 'en'
   },
   apiPrefix: {
     type: String,
@@ -34,9 +34,17 @@ const props = defineProps({
   }
 });
 
-const { translateSafe } = useTranslationClient();
-const translatedText = ref(props.originalText);
-const isLoading = ref(false);
+// Use component translations from provider
+const originalTexts = computed(() => ({
+  explanation: props.originalText || ''
+}));
+
+const { translations, isLoading, error, currentLanguage } = useComponentTranslations(
+  'sidebar_explanation', 
+  originalTexts.value
+);
+
+const translatedText = computed(() => translations.value.explanation || props.originalText);
 
 // Render markdown content
 const renderedExplanation = computed(() => {
@@ -52,41 +60,12 @@ const renderedExplanation = computed(() => {
   }
 });
 
-// Watch for language changes
-watch(() => props.currentLanguage, async (newLanguage) => {
-  await updateTranslation(newLanguage);
-});
-
-// Watch for text changes
-watch(() => props.originalText, async () => {
-  await updateTranslation(props.currentLanguage);
-});
-
-const updateTranslation = async (targetLanguage) => {
-  if (!props.originalText || targetLanguage === 'nl') {
-    translatedText.value = props.originalText;
-    return;
-  }
-
-  isLoading.value = true;
-  try {
-    const result = await translateSafe(props.originalText, targetLanguage, {
-      context: 'sidebar_explanation',
-      apiPrefix: props.apiPrefix,
-      fallbackText: props.originalText
-    });
-    
-    translatedText.value = result;
-  } catch (error) {
-    console.warn('Sidebar explanation translation failed:', error);
-    translatedText.value = props.originalText;
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-onMounted(() => {
-  updateTranslation(props.currentLanguage);
+// Watch for text changes to update the provider
+watch(() => props.originalText, () => {
+  // Update original texts when prop changes
+  originalTexts.value = {
+    explanation: props.originalText || ''
+  };
 });
 </script>