refactor: extract common code for number localization (#903)

components/common/LocalizedNumber.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const props = defineProps<{
+  count: number
+  keypath: string
+}>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
+
+const useSR = $computed(() => forSR(props.count))
+const rawNumber = $computed(() => formatNumber(props.count))
+const humanReadableNumber = $computed(() => formatHumanReadableNumber(props.count))
+</script>
+
+<template>
+  <i18n-t :keypath="keypath" :plural="count" tag="span" class="flex gap-x-1">
+    <CommonTooltip v-if="useSR" :content="rawNumber" placement="bottom">
+      <span aria-hidden="true" v-bind="$attrs">{{ humanReadableNumber }}</span>
+      <span sr-only>{{ rawNumber }}</span>
+    </CommonTooltip>
+    <span v-else v-bind="$attrs">{{ humanReadableNumber }}</span>
+  </i18n-t>
+</template>