import { computed, inject } from 'vue';
+import { useNumberFormatter } from 'shared/composables/useNumberFormatter';
const props = defineProps({
index: {
@@ -28,11 +29,14 @@ const props = defineProps({
},
});
+const { formatCompactWithDecimal } = useNumberFormatter();
+
const activeIndex = inject('activeIndex');
const updateActiveIndex = inject('updateActiveIndex');
const active = computed(() => props.index === activeIndex.value);
-const getItemCount = computed(() => props.count);
+const count = computed(() => props.count);
+const getItemCount = computed(() => formatCompactWithDecimal(count.value));
const onTabClick = event => {
event.preventDefault();
@@ -47,19 +51,23 @@ const onTabClick = event => {
class="flex-shrink-0 my-0 mx-2 ltr:first:ml-0 rtl:first:mr-0 ltr:last:mr-0 rtl:last:ml-0 hover:text-n-slate-12"
>
{{ name }}
{{ `${createdAtTime} • ${lastActivityTime}` }}
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
index d862fb36a..f6ee8ea4b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
@@ -137,8 +137,8 @@ const handleSortChange = value => {
v-tooltip.right="$t('CHAT_LIST.SORT_TOOLTIP_LABEL')"
icon="i-lucide-arrow-up-down"
slate
- faded
- xs
+ sm
+ :variant="showActionsDropdown ? 'faded' : 'ghost'"
@click="toggleDropdown()"
/>
{
+ if (typeof num !== 'number' || Number.isNaN(num)) {
+ return '0';
+ }
+
+ if (Math.abs(num) < 1000) {
+ return new Intl.NumberFormat(resolvedLocale.value).format(num);
+ }
+
+ return new Intl.NumberFormat(resolvedLocale.value, {
+ notation: 'compact',
+ compactDisplay: 'short',
+ maximumFractionDigits: decimals,
+ }).format(num);
+ };
+
return {
formatCompactNumber,
formatFullNumber,
+ formatCompactWithDecimal,
};
}