From 67766faa076de8d31df0aeccbf0c78e8fb56c3ad Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Wed, 17 Dec 2025 22:43:38 +0530
Subject: [PATCH] chore: Update typography in sidebar, chatlist, conversation
 card

---
 .../ConversationCard/CardAvatar.vue           |  2 +-
 .../ConversationCard/CardContent.vue          |  2 +-
 .../ConversationCardCompact.vue               |  1 +
 .../ConversationCardExpanded.vue              | 18 ++---
 .../ConversationCard/MessagePreview.vue       |  2 +-
 .../ConversationCard/VoiceCallStatus.vue      |  2 +-
 .../Conversation/InboxName.vue                |  4 +-
 .../Conversation/Sla/SLACardLabel.vue         |  2 +-
 .../components-next/button/Button.vue         | 10 +--
 .../dashboard/components-next/label/Label.vue |  2 +-
 .../components-next/sidebar/Sidebar.vue       |  6 +-
 .../sidebar/SidebarGroupHeader.vue            |  8 +-
 .../sidebar/SidebarGroupLeaf.vue              |  2 +-
 .../sidebar/SidebarGroupSeparator.vue         |  2 +-
 .../dashboard/components/ChatList.vue         |  5 ++
 .../dashboard/components/ChatListFilters.vue  |  1 +
 .../dashboard/components/ChatListHeader.vue   | 14 ++--
 .../dashboard/components/ui/Tabs/TabsItem.vue | 16 +++-
 .../dashboard/components/ui/TimeAgo.vue       |  2 +-
 .../conversation/ConversationBasicFilter.vue  |  4 +-
 .../conversation/search/SwitchLayout.vue      |  4 +-
 .../specs/useNumberFormatter.spec.js          | 73 +++++++++++++++++++
 .../shared/composables/useNumberFormatter.js  | 29 ++++++++
 23 files changed, 165 insertions(+), 46 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardAvatar.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardAvatar.vue
index 5fb509dbc..1b9b62349 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardAvatar.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardAvatar.vue
@@ -32,7 +32,7 @@ const selectedModel = computed({
 
 <template>
   <div
-    class="relative self-start"
+    class="relative flex items-center flex-shrink-0"
     @mouseenter="onThumbnailHover"
     @mouseleave="onThumbnailLeave"
   >
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardContent.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardContent.vue
index 755f6fa49..77b07bcec 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardContent.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardContent.vue
@@ -35,7 +35,7 @@ defineProps({
     <span
       v-else
       key="no-messages"
-      class="inline-grid grid-flow-col auto-cols-max items-center gap-1 text-sm font-420"
+      class="inline-grid grid-flow-col auto-cols-max items-center gap-1 text-body-main"
       :class="unreadCount > 0 ? 'text-n-slate-12' : 'text-n-slate-11'"
     >
       <Icon icon="i-lucide-info" class="size-3.5" />
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardCompact.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardCompact.vue
index e57960cf5..48530582d 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardCompact.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardCompact.vue
@@ -77,6 +77,7 @@ const onSelectConversation = checked => {
           :selected="selected"
           :enable-selection="enableSelection"
           :hide-thumbnail="hideThumbnail"
+          class="mt-0.5"
           @select-conversation="onSelectConversation"
         />
 
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue
index 52c03bb79..715a0de2c 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue
@@ -117,22 +117,20 @@ const selectedModel = computed({
       </div>
 
       <span
-        class="text-xs outline outline-1 -outline-offset-1 outline-n-weak px-1.5 rounded-md h-6 text-n-slate-11 font-440 min-w-14 flex-shrink-0 inline-flex items-center justify-center truncate"
+        class="text-label-small outline outline-1 -outline-offset-1 outline-n-weak px-1.5 rounded-md h-6 text-n-slate-11 min-w-12 flex-shrink-0 inline-flex items-center justify-center truncate"
       >
         {{ chat.id }}
       </span>
 
-      <div class="flex-shrink-0">
-        <CardAvatar
-          :contact="currentContact"
-          :selected="false"
-          :enable-selection="false"
-          :hide-thumbnail="false"
-        />
-      </div>
+      <CardAvatar
+        :contact="currentContact"
+        :selected="false"
+        :enable-selection="false"
+        :hide-thumbnail="false"
+      />
 
       <h4
-        class="text-sm my-0 capitalize truncate text-n-slate-12 font-medium w-32 flex-shrink-0"
+        class="text-heading-3 my-0 capitalize truncate text-n-slate-12 font-medium w-32 flex-shrink-0"
       >
         {{ currentContact.name }}
       </h4>
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/MessagePreview.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/MessagePreview.vue
index 1220b9364..5cce3cde2 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/MessagePreview.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/MessagePreview.vue
@@ -101,7 +101,7 @@ const isMessageSticker = computed(() => {
     </template>
 
     <span
-      class="min-w-0 font-420"
+      class="min-w-0 text-body-main"
       :class="multiLine ? 'line-clamp-2' : 'truncate'"
     >
       <!-- Case for previous and conversation conversation card -->
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/VoiceCallStatus.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/VoiceCallStatus.vue
index a42c5797e..e6bd3c272 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/VoiceCallStatus.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/VoiceCallStatus.vue
@@ -62,7 +62,7 @@ const statusColor = computed(
 <template>
   <div class="grid grid-cols-[auto_1fr] items-center gap-1 min-w-0 text-sm">
     <Icon class="size-3.5" :icon="iconName" :class="statusColor" />
-    <span class="truncate text-sm font-420" :class="statusColor">
+    <span class="truncate text-body-main" :class="statusColor">
       {{ $t(labelKey) }}
     </span>
   </div>
diff --git a/app/javascript/dashboard/components-next/Conversation/InboxName.vue b/app/javascript/dashboard/components-next/Conversation/InboxName.vue
index 072811d65..c37526a03 100644
--- a/app/javascript/dashboard/components-next/Conversation/InboxName.vue
+++ b/app/javascript/dashboard/components-next/Conversation/InboxName.vue
@@ -12,10 +12,10 @@ defineProps({
 <template>
   <div
     :title="inbox.name"
-    class="flex items-center gap-0.5 text-n-slate-11 text-xs min-w-0"
+    class="flex items-center gap-0.5 text-n-slate-11 min-w-0"
   >
     <ChannelIcon :inbox="inbox" class="size-4 flex-shrink-0" />
-    <span class="truncate font-440">
+    <span class="truncate text-label-small">
       {{ inbox.name }}
     </span>
   </div>
diff --git a/app/javascript/dashboard/components-next/Conversation/Sla/SLACardLabel.vue b/app/javascript/dashboard/components-next/Conversation/Sla/SLACardLabel.vue
index 9808bd67f..1cbb3e3ea 100644
--- a/app/javascript/dashboard/components-next/Conversation/Sla/SLACardLabel.vue
+++ b/app/javascript/dashboard/components-next/Conversation/Sla/SLACardLabel.vue
@@ -89,7 +89,7 @@ defineExpose({
         class="flex-shrink-0 size-3"
         :class="slaTextStyles"
       />
-      <span class="text-xs font-440" :class="slaTextStyles">
+      <span class="text-label-small" :class="slaTextStyles">
         {{ slaStatus.threshold }}
       </span>
     </div>
diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index 0c70f3513..2816c3eb6 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -175,10 +175,10 @@ const STYLE_CONFIG = {
     },
   },
   fontSize: {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-sm font-medium',
-    lg: 'text-base',
+    xs: 'text-button-small',
+    sm: 'text-button',
+    md: 'text-button',
+    lg: 'text-base font-460',
   },
   clickAnimation: {
     xs: 'active:enabled:scale-[0.97]',
@@ -255,7 +255,7 @@ const animationClasses = computed(() => {
     <Spinner v-if="isLoading" class="!w-5 !h-5 flex-shrink-0" />
 
     <slot v-if="label || $slots.default" name="default">
-      <span v-if="label" class="min-w-0 font-420 truncate">{{ label }}</span>
+      <span v-if="label" class="min-w-0 truncate">{{ label }}</span>
     </slot>
   </button>
 </template>
diff --git a/app/javascript/dashboard/components-next/label/Label.vue b/app/javascript/dashboard/components-next/label/Label.vue
index c3b4499aa..4c8170f30 100644
--- a/app/javascript/dashboard/components-next/label/Label.vue
+++ b/app/javascript/dashboard/components-next/label/Label.vue
@@ -24,7 +24,7 @@ defineProps({
     />
     <span
       class="text-n-slate-12 whitespace-nowrap"
-      :class="compact ? 'font-440 text-xs' : 'font-420 text-sm'"
+      :class="compact ? 'text-label-small' : 'text-label !font-440'"
     >
       {{ label.title }}
     </span>
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index 6a9c48546..cff93fa34 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -623,10 +623,10 @@ const menuItems = computed(() => {
       <div class="flex gap-2 px-2">
         <RouterLink
           :to="{ name: 'search' }"
-          class="flex gap-2 items-center px-2 py-1 w-full h-7 rounded-lg outline outline-1 outline-n-weak bg-n-solid-3 dark:bg-n-black/30"
+          class="flex gap-2 items-center px-2 py-1 w-full h-7 rounded-lg outline outline-1 outline-n-weak bg-n-button-color"
         >
-          <span class="flex-shrink-0 i-lucide-search size-4 text-n-slate-11" />
-          <span class="flex-grow text-left">
+          <span class="flex-shrink-0 i-lucide-search size-4 text-n-slate-10" />
+          <span class="flex-grow text-start text-n-slate-10 font-interDisplay">
             {{ t('COMBOBOX.SEARCH_PLACEHOLDER') }}
           </span>
           <span
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
index 9ee62d214..69b0abd11 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
@@ -46,7 +46,13 @@ const count = computed(() =>
       />
     </div>
     <div class="flex items-center gap-1.5 flex-grow min-w-0">
-      <span class="text-sm font-medium leading-5 truncate">
+      <span
+        class="truncate"
+        :class="{
+          'text-body-main': !isActive,
+          'font-medium text-sm': isActive || hasActiveChild,
+        }"
+      >
         {{ label }}
       </span>
       <span
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
index f313e2886..5e083dcf4 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
@@ -47,7 +47,7 @@ const shouldRenderComponent = computed(() => {
         <span v-if="icon" class="size-4 grid place-content-center rounded-full">
           <Icon :icon="icon" class="size-4 inline-block" />
         </span>
-        <div class="flex-1 truncate min-w-0">{{ label }}</div>
+        <div class="flex-1 truncate min-w-0 text-sm">{{ label }}</div>
       </template>
     </component>
   </Policy>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupSeparator.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupSeparator.vue
index ddc92a2b3..ab26dd9a6 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupSeparator.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupSeparator.vue
@@ -18,7 +18,7 @@ defineProps({
     class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8 text-n-slate-10 select-none pointer-events-none"
   >
     <Icon v-if="icon" :icon="icon" class="size-4" />
-    <span class="text-sm font-medium leading-5 flex-grow">
+    <span class="text-sm font-medium flex-grow">
       {{ label }}
     </span>
   </div>
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 2864464cb..769d39830 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -91,6 +91,10 @@ const activeFolder = computed(() => {
   return chatListFiltersRef.value?.activeFolder;
 });
 
+const isFilterModalOpen = computed(() => {
+  return chatListFiltersRef.value?.showAdvancedFilters ?? false;
+});
+
 const hasAppliedFiltersOrActiveFolders = computed(() => {
   return hasAppliedFilters.value || hasActiveFolders.value;
 });
@@ -477,6 +481,7 @@ watch(conversationFilters, (newVal, oldVal) => {
       :is-on-expanded-layout="isOnExpandedLayout"
       :conversation-stats="conversationStats"
       :is-list-loading="chatListLoading && !conversationList.length"
+      :is-filter-modal-open="isFilterModalOpen"
       @filters-modal="chatListFiltersRef?.onToggleAdvanceFiltersModal"
       @basic-filter-change="onBasicFilterChange"
     />
diff --git a/app/javascript/dashboard/components/ChatListFilters.vue b/app/javascript/dashboard/components/ChatListFilters.vue
index bbc0cc9b6..2549ee8e2 100644
--- a/app/javascript/dashboard/components/ChatListFilters.vue
+++ b/app/javascript/dashboard/components/ChatListFilters.vue
@@ -261,6 +261,7 @@ defineExpose({
   foldersQuery,
   activeFolder,
   appliedFilter,
+  showAdvancedFilters,
 });
 </script>
 
diff --git a/app/javascript/dashboard/components/ChatListHeader.vue b/app/javascript/dashboard/components/ChatListHeader.vue
index 50baf5dcb..593b4890c 100644
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -16,6 +16,7 @@ const props = defineProps({
   isOnExpandedLayout: { type: Boolean, required: true },
   conversationStats: { type: Object, required: true },
   isListLoading: { type: Boolean, required: true },
+  isFilterModalOpen: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['basicFilterChange', 'filtersModal']);
@@ -52,10 +53,7 @@ const toggleConversationLayout = () => {
 <template>
   <div class="flex items-center justify-between gap-2 px-4 h-[3.25rem]">
     <div class="flex items-center justify-center min-w-0">
-      <h1
-        class="text-base font-medium truncate text-n-slate-12"
-        :title="pageTitle"
-      >
+      <h1 class="text-heading-1 truncate text-n-slate-12" :title="pageTitle">
         {{ pageTitle }}
       </h1>
       <span
@@ -87,8 +85,8 @@ const toggleConversationLayout = () => {
             v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
             icon="i-lucide-pen-line"
             slate
-            xs
-            faded
+            sm
+            :variant="isFilterModalOpen ? 'faded' : 'ghost'"
             @click="emit('filtersModal')"
           />
           <div
@@ -104,8 +102,8 @@ const toggleConversationLayout = () => {
           v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
           icon="i-lucide-list-filter"
           slate
-          xs
-          faded
+          sm
+          :variant="isFilterModalOpen ? 'faded' : 'ghost'"
           @click="emit('filtersModal')"
         />
         <div
diff --git a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
index c855160c0..d0d6555fc 100644
--- a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
@@ -1,5 +1,6 @@
 <script setup>
 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"
   >
     <a
-      class="flex items-center flex-row select-none cursor-pointer text-sm relative after:absolute after:bottom-0 after:left-0 after:right-0 font-460 after:h-[2px] after:rounded-full after:transition-all after:duration-200"
+      class="flex items-center flex-row select-none cursor-pointer relative after:absolute after:bottom-px after:left-0 after:right-0 after:h-[2px] after:rounded-full after:transition-all after:duration-200 text-button"
       :class="[
         active
           ? 'text-n-blue-11 after:bg-n-brand after:opacity-100'
           : 'text-n-slate-11 after:bg-transparent after:opacity-0',
-        isCompact ? 'py-2.5 text-sm' : 'text-base py-3',
+        isCompact ? 'py-2.5' : '!text-base py-3',
       ]"
       @click="onTabClick"
     >
       {{ name }}
       <div
         v-if="showBadge"
-        class="rounded-full h-5 flex items-center justify-center text-xxs font-semibold my-0 ltr:ml-1 rtl:mr-1 px-1.5 py-0 min-w-[20px]"
+        v-tooltip.top="{
+          content: count,
+          delay: { show: 500, hide: 0 },
+        }"
+        class="rounded-full h-5 flex items-center justify-center font-interDisplay text-xs font-medium my-0 ltr:ml-1 rtl:mr-1 px-1.5 py-0 min-w-[20px]"
         :class="[
           active
             ? 'bg-n-blue-3 text-n-blue-11'
diff --git a/app/javascript/dashboard/components/ui/TimeAgo.vue b/app/javascript/dashboard/components/ui/TimeAgo.vue
index 18fa6aa17..18aff265f 100644
--- a/app/javascript/dashboard/components/ui/TimeAgo.vue
+++ b/app/javascript/dashboard/components/ui/TimeAgo.vue
@@ -109,7 +109,7 @@ onUnmounted(() => {
       content: tooltipText,
       delay: { show: 1000, hide: 0 },
     }"
-    class="ml-auto leading-4 text-xxs text-n-slate-10 hover:text-n-slate-11"
+    class="ml-auto text-label-small text-n-slate-11 hover:text-n-slate-12"
   >
     <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
   </div>
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()"
     />
     <div
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
index 7bcc6a6c4..30ac53d04 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
@@ -25,8 +25,8 @@ export default {
     v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
     icon="i-woot-expand-list"
     slate
-    xs
-    faded
+    sm
+    ghost
     class="flex-shrink-0 md:inline-flex hidden"
     :class="{
       'ltr:!rotate-180 rtl:!rotate-0': isOnExpandedLayout,
diff --git a/app/javascript/shared/composables/specs/useNumberFormatter.spec.js b/app/javascript/shared/composables/specs/useNumberFormatter.spec.js
index 3a9b8d41b..da91124d8 100644
--- a/app/javascript/shared/composables/specs/useNumberFormatter.spec.js
+++ b/app/javascript/shared/composables/specs/useNumberFormatter.spec.js
@@ -361,4 +361,77 @@ describe('useNumberFormatter', () => {
       expect(result).toMatch(/1[.,\s]000[.,\s]000/);
     });
   });
+
+  describe('formatCompactWithDecimal', () => {
+    it('should return exact numbers for values under 1,000', () => {
+      const { formatCompactWithDecimal } = useNumberFormatter();
+      expect(formatCompactWithDecimal(0)).toBe('0');
+      expect(formatCompactWithDecimal(1)).toBe('1');
+      expect(formatCompactWithDecimal(42)).toBe('42');
+      expect(formatCompactWithDecimal(999)).toBe('999');
+    });
+
+    it('should return compact format with decimals for thousands', () => {
+      const { formatCompactWithDecimal } = useNumberFormatter();
+      expect(formatCompactWithDecimal(1000)).toBe('1K');
+      expect(formatCompactWithDecimal(1500)).toBe('1.5K');
+      expect(formatCompactWithDecimal(29400)).toBe('29.4K');
+      expect(formatCompactWithDecimal(15000)).toBe('15K');
+      expect(formatCompactWithDecimal(15500)).toBe('15.5K');
+    });
+
+    it('should return compact format with decimals for millions', () => {
+      const { formatCompactWithDecimal } = useNumberFormatter();
+      expect(formatCompactWithDecimal(1000000)).toBe('1M');
+      expect(formatCompactWithDecimal(1200000)).toBe('1.2M');
+      expect(formatCompactWithDecimal(1234000)).toBe('1.2M');
+      expect(formatCompactWithDecimal(2500000)).toBe('2.5M');
+      expect(formatCompactWithDecimal(10000000)).toBe('10M');
+    });
+
+    it('should handle edge cases gracefully', () => {
+      const { formatCompactWithDecimal } = useNumberFormatter();
+      expect(formatCompactWithDecimal(null)).toBe('0');
+      expect(formatCompactWithDecimal(undefined)).toBe('0');
+      expect(formatCompactWithDecimal(NaN)).toBe('0');
+      expect(formatCompactWithDecimal('string')).toBe('0');
+    });
+
+    it('should handle negative numbers', () => {
+      const { formatCompactWithDecimal } = useNumberFormatter();
+      expect(formatCompactWithDecimal(-500)).toBe('-500');
+      expect(formatCompactWithDecimal(-1500)).toBe('-1.5K');
+      expect(formatCompactWithDecimal(-29400)).toBe('-29.4K');
+      expect(formatCompactWithDecimal(-1200000)).toBe('-1.2M');
+    });
+
+    it('should respect custom decimal places', () => {
+      const { formatCompactWithDecimal } = useNumberFormatter();
+      expect(formatCompactWithDecimal(1234, 2)).toBe('1.23K');
+      expect(formatCompactWithDecimal(1234567, 2)).toBe('1.23M');
+    });
+
+    it('should format with de-DE locale', () => {
+      const mockLocale = ref('de-DE');
+      vi.mocked(useI18n).mockReturnValue({ locale: mockLocale });
+      const { formatCompactWithDecimal } = useNumberFormatter();
+      // German uses different compact notation
+      const result = formatCompactWithDecimal(29400);
+      expect(result).toMatch(/29[,.]?4/);
+    });
+
+    it('should handle underscore-based locale tags', () => {
+      const mockLocale = ref('en_US');
+      vi.mocked(useI18n).mockReturnValue({ locale: mockLocale });
+      const { formatCompactWithDecimal } = useNumberFormatter();
+      expect(formatCompactWithDecimal(29400)).toBe('29.4K');
+    });
+
+    it('should handle null/undefined locale gracefully', () => {
+      const mockLocale = ref(null);
+      vi.mocked(useI18n).mockReturnValue({ locale: mockLocale });
+      const { formatCompactWithDecimal } = useNumberFormatter();
+      expect(formatCompactWithDecimal(29400)).toBe('29.4K');
+    });
+  });
 });
diff --git a/app/javascript/shared/composables/useNumberFormatter.js b/app/javascript/shared/composables/useNumberFormatter.js
index 54ded0e93..dde0b2987 100644
--- a/app/javascript/shared/composables/useNumberFormatter.js
+++ b/app/javascript/shared/composables/useNumberFormatter.js
@@ -60,8 +60,37 @@ export function useNumberFormatter() {
     return new Intl.NumberFormat(resolvedLocale.value).format(num);
   };
 
+  /**
+   * Format a number with decimal precision using compact notation (standard Intl approach)
+   * - Up to 1,000: show exact number (e.g., 999)
+   * - 1,000+: show compact with decimals (e.g., 29400 → "29.4K", 1500 → "1.5K")
+   * - 1,000,000+: show as "X.XM" (e.g., 1,234,000 → "1.2M")
+   *
+   * Uses browser-native Intl.NumberFormat for proper localization
+   *
+   * @param {number} num - The number to format
+   * @param {number} [decimals=1] - Maximum decimal places to show
+   * @returns {string} Formatted number string with decimal precision
+   */
+  const formatCompactWithDecimal = (num, decimals = 1) => {
+    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,
   };
 }