chore: Update typography in sidebar, chatlist, conversation card

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"
     />

app/javascript/dashboard/components/ChatListFilters.vue

@@ -261,6 +261,7 @@ defineExpose({
   foldersQuery,
   activeFolder,
   appliedFilter,
+  showAdvancedFilters,
 });
 </script>
 

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

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'

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>

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