chore: Update typography in sidebar, chatlist, conversation card
This commit is contained in:
iamsivin
+1
-1
@@ -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"
|
||||
>
|
||||
|
||||
+1
-1
@@ -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" />
|
||||
|
||||
+1
@@ -77,6 +77,7 @@ const onSelectConversation = checked => {
|
||||
:selected="selected"
|
||||
:enable-selection="enableSelection"
|
||||
:hide-thumbnail="hideThumbnail"
|
||||
class="mt-0.5"
|
||||
@select-conversation="onSelectConversation"
|
||||
/>
|
||||
|
||||
|
||||
+8
-10
@@ -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>
|
||||
|
||||
+1
-1
@@ -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 -->
|
||||
|
||||
+1
-1
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
|
||||
@@ -261,6 +261,7 @@ defineExpose({
|
||||
foldersQuery,
|
||||
activeFolder,
|
||||
appliedFilter,
|
||||
showAdvancedFilters,
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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>
|
||||
|
||||
+2
-2
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user