feat(ux): add character counter and helper text to textareas

src/app/plugins/firebase/index.js

@@ -19,7 +19,9 @@ const firebaseConfig = {
 const firebaseApp = initializeApp(firebaseConfig)
 const auth = getAuth(firebaseApp)
 const db = getFirestore(firebaseApp)
+
 const analytics = getAnalytics(firebaseApp)
+
 const fbFunctions = getFunctions(firebaseApp)
 const storage = getStorage(firebaseApp, `gs://${firebaseConfig.storageBucket}`)
 const database = getDatabase(firebaseApp, firebaseConfig.databaseURL)

src/app/plugins/locales/ar.json

@@ -112,7 +112,9 @@
     "user": "مستخدم",
     "id": "ID",
     "itemsPerPage": "عدد العناصر في الصفحة:",
-    "visible": "مرئي"
+    "visible": "مرئي",
+    "valuableFeedback": "Your qualitative feedback is highly valuable",
+    "characters": "characters"
   },
   "storage": {
     "pageTitle": "التخزين",

src/app/plugins/locales/de.json

@@ -112,7 +112,9 @@
     "user": "Benutzer",
     "id": "ID",
     "itemsPerPage": "Elemente pro Seite:",
-    "visible": "Sichtbar"
+    "visible": "Sichtbar",
+    "valuableFeedback": "Your qualitative feedback is highly valuable",
+    "characters": "characters"
   },
   "storage": {
     "pageTitle": "Speicher",

src/app/plugins/locales/en.json

@@ -47,6 +47,8 @@
   },
   "common": {
     "enterTextHere": "Enter text here...",
+    "valuableFeedback": "Your qualitative feedback is highly valuable",
+    "characters": "characters",
     "units": {
       "mb": "MB",
       "gb": "GB"
@@ -2313,4 +2315,4 @@
     "rawWcagDataAvailable": "Raw WCAG Data Available:",
     "filteredWcagDataAvailable": "Filtered WCAG Data Available:"
   }
-}
+}

src/app/plugins/locales/es.json

@@ -47,6 +47,8 @@
   },
   "common": {
     "enterTextHere": "Ingrese texto aquí...",
+    "valuableFeedback": "Tus comentarios cualitativos son muy valiosos",
+    "characters": "caracteres",
     "units": {
       "mb": "MB",
       "gb": "GB"
@@ -2299,4 +2301,4 @@
     },
     "title": "Política de Privacidad"
   }
-}
+}

src/app/plugins/locales/fr.json

@@ -112,7 +112,9 @@
     "user": "Utilisateur",
     "id": "ID",
     "itemsPerPage": "Éléments par page :",
-    "visible": "Visible"
+    "visible": "Visible",
+    "valuableFeedback": "Your qualitative feedback is highly valuable",
+    "characters": "characters"
   },
   "storage": {
     "pageTitle": "Stockage",

src/app/plugins/locales/hi.json

@@ -112,7 +112,9 @@
     "user": "उपयोगकर्ता",
     "id": "आईडी",
     "itemsPerPage": "प्रति पृष्ठ आइटम:",
-    "visible": "दृश्य"
+    "visible": "दृश्य",
+    "valuableFeedback": "Your qualitative feedback is highly valuable",
+    "characters": "characters"
   },
   "storage": {
     "pageTitle": "संग्रहण",

src/app/plugins/locales/ja.json

@@ -112,7 +112,9 @@
     "user": "ユーザー",
     "id": "ID",
     "itemsPerPage": "ページごとの項目数：",
-    "visible": "表示"
+    "visible": "表示",
+    "valuableFeedback": "Your qualitative feedback is highly valuable",
+    "characters": "characters"
   },
   "storage": {
     "pageTitle": "ストレージ",

src/app/plugins/locales/pt_br.json

@@ -112,7 +112,9 @@
     "user": "Usuário",
     "id": "ID",
     "itemsPerPage": "Itens por página:",
-    "visible": "Visível"
+    "visible": "Visível",
+    "valuableFeedback": "Your qualitative feedback is highly valuable",
+    "characters": "characters"
   },
   "storage": {
     "pageTitle": "Armazenamento",

src/app/plugins/locales/ru.json

@@ -112,7 +112,9 @@
     "user": "Пользователь",
     "id": "ID",
     "itemsPerPage": "Элементов на странице:",
-    "visible": "Видимый"
+    "visible": "Видимый",
+    "valuableFeedback": "Your qualitative feedback is highly valuable",
+    "characters": "characters"
   },
   "storage": {
     "pageTitle": "Хранилище",

src/app/plugins/locales/zh.json

@@ -112,7 +112,9 @@
     "user": "用户",
     "id": "ID",
     "itemsPerPage": "每页项目数：",
-    "visible": "可见"
+    "visible": "可见",
+    "valuableFeedback": "Your qualitative feedback is highly valuable",
+    "characters": "characters"
   },
   "storage": {
     "pageTitle": "存储",

src/shared/components/TextareaForm.vue

@@ -25,6 +25,20 @@
             :class="['editor-container', { 'editor-readonly': props.readonly }]"
             @ready="applyReadonlyAttributes"
           />
+
+          <v-row class="mt-2" justify="space-between" align="center" no-gutters>
+            <v-col cols="auto">
+              <span class="text-caption text-medium-emphasis">
+                <v-icon size="small" class="mr-1">mdi-lightbulb-outline</v-icon>
+                {{ props.helperText || t('common.valuableFeedback') }}
+              </span>
+            </v-col>
+            <v-col cols="auto">
+              <span class="text-caption text-medium-emphasis">
+                {{ characterCount }} {{ t('common.characters') }}
+              </span>
+            </v-col>
+          </v-row>
         </v-card-text>
       </v-card>
     </v-col>
@@ -54,12 +68,26 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  helperText: {
+    type: String,
+    default: '',
+  },
   readonly: {
     type: Boolean,
     default: false,
   },
 })
 
+const characterCount = computed(() => {
+  if (!value.value) return 0
+  // Use DOMParser to derive plain text from HTML, decoding entities for an accurate count
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(value.value, 'text/html')
+  const text = doc.body?.textContent || ''
+
+  return text.trim().length
+})
+
 const editorOptions = computed(() => ({
   theme: 'snow',
   readOnly: props.readonly,