Improvements

apps/frontend/src/components/pages/callouts/CalloutShowResponsePanel.vue

@@ -3,18 +3,27 @@
     <div v-if="responses.length > 1" class="mb-4 flex items-center gap-4">
       <AppButtonGroup>
         <AppButton
-          variant="primaryOutlined"
+          variant="link"
           :icon="faArrowLeft"
           :disabled="responseIndex === 0"
           @click="changeResponse(-1)"
         />
         <AppButton
-          variant="primaryOutlined"
+          variant="link"
           :icon="faArrowRight"
           :disabled="responseIndex === responses.length - 1"
           @click="changeResponse(1)"
         />
       </AppButtonGroup>
+
+      <i18n-t keypath="callout.responseOf" tag="span">
+        <template #number
+          ><b>{{ n(responseIndex) }}</b></template
+        >
+        <template #count
+          ><b>{{ n(responses.length) }}</b></template
+        >
+      </i18n-t>
       <span> Response {{ responseIndex + 1 }} of {{ responses.length }} </span>
     </div>
     <CalloutResponse :callout="callout" :response="responses[responseIndex]" />
@@ -33,6 +42,7 @@ import {
 import CalloutResponse from './CalloutResponse.vue';
 import AppButton from '@components/button/AppButton.vue';
 import AppButtonGroup from '@components/button/AppButtonGroup.vue';
+import { useI18n } from 'vue-i18n';
 
 const emit = defineEmits<{
   (e: 'close'): void;
@@ -43,6 +53,8 @@ const props = defineProps<{
   responses: GetCalloutResponseMapData[];
 }>();
 
+const { n } = useI18n();
+
 const responseIndex = ref(0);
 
 function changeResponse(inc: number) {