fix: format date according to DEFAULT_LOCALE in chat search (#19305)

* fix: localized format

* load default_locale from backend

src/lib/components/layout/ChatsModal.svelte

@@ -4,8 +4,10 @@
 
 	import dayjs from 'dayjs';
 	import localizedFormat from 'dayjs/plugin/localizedFormat';
+	import calendar from 'dayjs/plugin/calendar'
 
 	dayjs.extend(localizedFormat);
+	dayjs.extend(calendar);
 
 	import { deleteChatById } from '$lib/apis/chats';
 
@@ -242,7 +244,14 @@
 
 									<div class="basis-2/5 flex items-center justify-end">
 										<div class="hidden sm:flex text-gray-500 dark:text-gray-400 text-xs">
-											{dayjs(chat?.updated_at * 1000).calendar()}
+											{$i18n.t(dayjs(chat?.updated_at * 1000).calendar(null, {
+												sameDay: '[Today]',
+												nextDay: '[Tomorrow]',
+												nextWeek: 'dddd',
+												lastDay: '[Yesterday]',
+												lastWeek: '[Last] dddd',
+												sameElse: 'L' // use localized format, otherwise dayjs.calendar() defaults to DD/MM/YYYY
+											}))}
 										</div>
 
 										<div class="flex justify-end pl-2.5 text-gray-600 dark:text-gray-300">

src/lib/components/layout/SearchModal.svelte

@@ -9,6 +9,7 @@
 	import Spinner from '../common/Spinner.svelte';
 
 	import dayjs from '$lib/dayjs';
+	import localizedFormat from 'dayjs/plugin/localizedFormat';
 	import calendar from 'dayjs/plugin/calendar';
 	import Loader from '../common/Loader.svelte';
 	import { createMessagesList } from '$lib/utils';
@@ -18,6 +19,7 @@
 	import PencilSquare from '../icons/PencilSquare.svelte';
 	import PageEdit from '../icons/PageEdit.svelte';
 	dayjs.extend(calendar);
+	dayjs.extend(localizedFormat);
 
 	export let show = false;
 	export let onClose = () => {};
@@ -387,7 +389,14 @@
 							</div>
 
 							<div class=" pl-3 shrink-0 text-gray-500 dark:text-gray-400 text-xs">
-								{dayjs(chat?.updated_at * 1000).calendar()}
+								{$i18n.t(dayjs(chat?.updated_at * 1000).calendar(null, {
+												sameDay: '[Today]',
+												nextDay: '[Tomorrow]',
+												nextWeek: 'dddd',
+												lastDay: '[Yesterday]',
+												lastWeek: '[Last] dddd',
+												sameElse: 'L' // use localized format, otherwise dayjs.calendar() defaults to DD/MM/YYYY
+											}))}
 							</div>
 						</a>
 					{/each}

src/lib/dayjs.js

@@ -101,5 +101,6 @@ import 'dayjs/locale/yo';
 import 'dayjs/locale/zh';
 import 'dayjs/locale/zh-tw';
 import 'dayjs/locale/et';
+import 'dayjs/locale/en-gb'
 
 export default dayjs;

src/routes/+layout.svelte

@@ -54,6 +54,7 @@
 	import AppSidebar from '$lib/components/app/AppSidebar.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import { getUserSettings } from '$lib/apis/users';
+	import dayjs from 'dayjs';
 
 	const unregisterServiceWorkers = async () => {
 		if ('serviceWorker' in navigator) {
@@ -666,6 +667,7 @@
 				? backendConfig.default_locale
 				: bestMatchingLanguage(languages, browserLanguages, 'en-US');
 			changeLanguage(lang);
+			dayjs.locale(lang);
 		}
 
 		if (backendConfig) {