feat(SPA): i18n internationzalization, english and french

web/src/components/CharacterCounter.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t, locale, formatNumber } from '@/i18n'
+
 import { computed, ref, watch } from 'vue'
 
 const props = withDefaults(
@@ -19,6 +21,7 @@ const props = withDefaults(
 )
 
 function formatThousands(count: number) {
+	if (locale.value === 'fr') return formatNumber(count)
 	return count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
 }
 
@@ -38,11 +41,11 @@ const status = computed<'normal' | 'warn' | 'over' | 'under'>(() => {
 
 const overText = computed(() => {
 	const suffix = props.plainText
-		? 'Shorten the text.'
-		: 'Shorten the text or remove an image. Formatting counts too.'
+		? t('Shorten the text.')
+		: t('Shorten the text or remove an image. Formatting counts too.')
 	return overBy.value === 1
-		? `1 character over. ${suffix}`
-		: `${formatThousands(overBy.value)} characters over. ${suffix}`
+		? t('1 character over. {0}', [suffix])
+		: t('{0} characters over. {1}', [formatThousands(overBy.value), suffix])
 })
 
 const warnText = 'Close to the limit. Images and formatting count too.'
@@ -52,21 +55,21 @@ const message = computed(() => {
 		return overText.value
 	}
 	if (status.value === 'warn') {
-		return warnText
+		return t(warnText)
 	}
 	return ''
 })
 
 const announcement = ref('')
 
-watch(status, (next, previous) => {
-	if (next === previous) {
+watch([status, locale], ([next], [previous]) => {
+	if (next === previous && !announcement.value) {
 		return
 	}
 	if (next === 'over') {
 		announcement.value = overText.value
 	} else if (next === 'warn') {
-		announcement.value = 'Almost at the length limit.'
+		announcement.value = t('Almost at the length limit.')
 	} else {
 		announcement.value = ''
 	}