fix(web): format dates with the locale preference (#18259)

fix: Format dates in settings according to user setting

web/src/lib/components/user-settings-page/user-api-key-list.svelte

@@ -18,6 +18,7 @@
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
   import { notificationController, NotificationType } from '../shared-components/notification/notification';
+  import { dateFormats } from '$lib/constants';
 
   interface Props {
     keys: ApiKeyResponseDto[];
@@ -25,12 +26,6 @@
 
   let { keys = $bindable() }: Props = $props();
 
-  const format: Intl.DateTimeFormatOptions = {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  };
-
   async function refreshKeys() {
     keys = await getApiKeys();
   }
@@ -130,7 +125,7 @@
             >
               <td class="w-1/3 text-ellipsis px-4 text-sm">{key.name}</td>
               <td class="w-1/3 text-ellipsis px-4 text-sm"
-                >{new Date(key.createdAt).toLocaleDateString($locale, format)}
+                >{new Date(key.createdAt).toLocaleDateString($locale, dateFormats.settings)}
               </td>
               <td class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-1/3">
                 <CircleIconButton

web/src/lib/components/user-settings-page/user-purchase-settings.svelte

@@ -4,7 +4,9 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import PurchaseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import { dateFormats } from '$lib/constants';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import { locale } from '$lib/stores/preferences.store';
   import { purchaseStore } from '$lib/stores/purchase.store';
   import { preferences, user } from '$lib/stores/user.store';
   import { handleError } from '$lib/utils/handle-error';
@@ -132,7 +134,9 @@
             {#if $user.isAdmin && serverPurchaseInfo?.activatedAt}
               <p class="dark:text-white text-sm mt-1 col-start-2">
                 {$t('purchase_activated_time', {
-                  values: { date: new Date(serverPurchaseInfo.activatedAt) },
+                  values: {
+                    date: new Date(serverPurchaseInfo.activatedAt).toLocaleString($locale, dateFormats.settings),
+                  },
                 })}
               </p>
             {:else}
@@ -161,7 +165,9 @@
             {#if $user.license?.activatedAt}
               <p class="dark:text-white text-sm mt-1 col-start-2">
                 {$t('purchase_activated_time', {
-                  values: { date: new Date($user.license?.activatedAt) },
+                  values: {
+                    date: new Date($user.license?.activatedAt).toLocaleString($locale, dateFormats.settings),
+                  },
                 })}
               </p>
             {/if}

web/src/lib/constants.ts

@@ -72,6 +72,11 @@ export const dateFormats = {
     day: 'numeric',
     year: 'numeric',
   },
+  settings: <Intl.DateTimeFormatOptions>{
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  },
 };
 
 export enum QueryParameter {