From f1b9d48ca8c892345f7ad0ed01250b39fc4acbf1 Mon Sep 17 00:00:00 2001
From: hiepau1231 <hiepau1231@gmail.com>
Date: Mon, 16 Feb 2026 07:33:32 +0700
Subject: [PATCH] feat: make MyHistory dates locale rely on uiLang

- Changed locale resolution to prefer uiLang over lang
- Added capitalization of first character in formatted dates
- Added comprehensive test cases for uiLang usage and capitalization
- Fixes #791

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/__tests__/my-history.spec.ts   | 47 ++++++++++++++++++-
 .../history-queries/components/my-history.vue |  5 +-
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts b/packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts
index ae17531a47..adb271b15e 100644
--- a/packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts
+++ b/packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts
@@ -119,8 +119,8 @@ describe('testing MyHistory component', () => {
 
   it('renders the date using the locale prop when there is no snippetConfig', async () => {
     const historyQueriesGroupedByDate = {
-      'lunes, 18 de abril de 2022': [historyQueries[0], historyQueries[1]],
-      'miércoles, 6 de abril de 2022': [historyQueries[2], historyQueries[3]],
+      'Lunes, 18 de abril de 2022': [historyQueries[0], historyQueries[1]],
+      'Miércoles, 6 de abril de 2022': [historyQueries[2], historyQueries[3]],
     }
     const locale = 'es'
     const { findAllInWrapper } = renderMyHistory({
@@ -215,6 +215,49 @@ describe('testing MyHistory component', () => {
     )
   })
 
+  it('should use uiLang from snippetConfig for date formatting', async () => {
+    const historyQueriesGroupedByDate = {
+      'Lunes, 18 de abril de 2022': [historyQueries[0], historyQueries[1]],
+      'Miércoles, 6 de abril de 2022': [historyQueries[2], historyQueries[3]],
+    }
+    const { findAllInWrapper } = renderMyHistory({
+      historyQueries,
+      snippetConfig: { ...baseSnippetConfig, lang: 'en', uiLang: 'es' },
+    })
+
+    await nextTick()
+    expectValidHistoryContent(historyQueriesGroupedByDate, findAllInWrapper, 'es')
+  })
+
+  it('should capitalize the first character of formatted dates', async () => {
+    const { findAllInWrapper } = renderMyHistory({
+      historyQueries,
+      snippetConfig: { ...baseSnippetConfig, lang: 'es', uiLang: 'es' },
+    })
+
+    await nextTick()
+    const historyWrappers = findAllInWrapper('my-history-item')
+    historyWrappers.forEach(wrapper => {
+      const dateText = wrapper.find(getDataTestSelector('my-history-date')).text()
+      // Check first character is uppercase
+      expect(dateText.charAt(0)).toBe(dateText.charAt(0).toUpperCase())
+    })
+  })
+
+  it('should fallback to lang when uiLang is not provided', async () => {
+    const historyQueriesGroupedByDate = {
+      'Lunes, 18 de abril de 2022': [historyQueries[0], historyQueries[1]],
+      'Miércoles, 6 de abril de 2022': [historyQueries[2], historyQueries[3]],
+    }
+    const { findAllInWrapper } = renderMyHistory({
+      historyQueries,
+      snippetConfig: { ...baseSnippetConfig, lang: 'es' },
+    })
+
+    await nextTick()
+    expectValidHistoryContent(historyQueriesGroupedByDate, findAllInWrapper, 'es')
+  })
+
   function expectValidHistoryContent(
     historyQueriesGroupedByDate: Record<string, HistoryQuery[]>,
     findAllInWrapper: MyHistoryAPI['findAllInWrapper'],
diff --git a/packages/x-components/src/x-modules/history-queries/components/my-history.vue b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
index b8cbb01c6b..2c6d6fcb48 100644
--- a/packages/x-components/src/x-modules/history-queries/components/my-history.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
@@ -130,7 +130,7 @@ export default defineComponent({
      * @returns The locale to be used.
      * @internal
      */
-    const usedLocale = computed(() => snippetConfig?.lang ?? props.locale)
+    const usedLocale = computed(() => snippetConfig?.uiLang ?? snippetConfig?.lang ?? props.locale)
 
     /**
      * Returns a record of history queries grouped by date.
@@ -155,12 +155,13 @@ export default defineComponent({
      */
     const groupByDate = computed((): Dictionary<HistoryQueryType[]> => {
       return groupItemsBy(historyQueries.value as HistoryQueryType[], current => {
-        return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {
+        const formatted = new Date(current.timestamp).toLocaleDateString(usedLocale.value, {
           day: 'numeric',
           weekday: 'long',
           month: 'long',
           year: 'numeric',
         })
+        return formatted.charAt(0).toUpperCase() + formatted.slice(1)
       })
     })