feat: Display example date for date formatting reasons (#10444)

Adds an example date as a detail of the locale picker, so that the user
can see what effect their chosen locale would have on date formatting:

<img width="436" height="157" alt="image"
src="https://github.com/user-attachments/assets/d5757380-3cda-4857-99d7-bac8866d31f5"
/>

The example wraps on smaller screens: 

<img width="291" height="207" alt="image"
src="https://github.com/user-attachments/assets/e3ef1678-6846-4027-b563-253195e2de99"
/>


The example date is the **date and time of the very first commit in the
Unleash repo**. By some stroke of luck, it happens to have everything
we're looking for:
- A date that is more than the 12th (to clearly differentiate between
days and months)
- A month that is less than 10 (to show whether leading zeroes are shown
or not)
- An hour that is more than 11 to show whether it's a 24-hour clock or
an AM/PM system

The date string is without a time zone offset because that means it'll
always be interpreted as local time for the user. MDN's [docs on Date
and what happens when you call it with a time
string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format)
state that:

> When the time zone offset is absent, date-only forms are interpreted
as a UTC time and **date-time forms are interpreted as a local time**.

I've checked this by changing my locale. With the timezone offset, the
time changes based on my timezone, but without it, it always shows as
the expected value.

frontend/src/component/user/Profile/ProfileTab/ProfileTab.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useId, useState } from 'react';
 import {
     Box,
     FormControl,
@@ -15,12 +15,13 @@ import { useProfile } from 'hooks/api/getters/useProfile/useProfile';
 import { useLocationSettings } from 'hooks/useLocationSettings';
 import type { IUser } from 'interfaces/user';
 import TopicOutlinedIcon from '@mui/icons-material/TopicOutlined';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { RoleBadge } from 'component/common/RoleBadge/RoleBadge';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { ProductivityEmailSubscription } from './ProductivityEmailSubscription.tsx';
+import { formatDateYMDHM } from 'utils/formatDate.ts';
 
 const StyledHeader = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -79,7 +80,6 @@ const StyledDivider = styled('div')(({ theme }) => ({
 }));
 
 const StyledFormControl = styled(FormControl)(({ theme }) => ({
-    marginTop: theme.spacing(1.5),
     width: theme.spacing(30),
 }));
 
@@ -99,11 +99,22 @@ const ProjectList = styled('ul')(({ theme }) => ({
     gap: theme.spacing(1),
 }));
 
+const exampleDateString = '2014-09-29T14:50:46';
+const exampleDate = new Date(exampleDateString);
+
+const LocaleSelector = styled('div')(({ theme }) => ({
+    marginTop: theme.spacing(1.5),
+    display: 'flex',
+    flexFlow: 'row wrap',
+    gap: theme.spacing(1),
+    alignItems: 'center',
+}));
+
 export const ProfileTab = ({ user }: IProfileTabProps) => {
     const { profile, refetchProfile } = useProfile();
-    const navigate = useNavigate();
     const { locationSettings, setLocationSettings } = useLocationSettings();
     const [currentLocale, setCurrentLocale] = useState<string>();
+    const exampleDateId = useId();
 
     const [possibleLocales, setPossibleLocales] = useState([
         'en-US',
@@ -215,30 +226,39 @@ export const ProfileTab = ({ user }: IProfileTabProps) => {
                 <Typography variant='body2'>
                     This is the format used across the system for time and date
                 </Typography>
-                <StyledFormControl variant='outlined' size='small'>
-                    <StyledInputLabel htmlFor='locale-select'>
-                        Date/Time formatting
-                    </StyledInputLabel>
-                    <Select
-                        id='locale-select'
-                        value={currentLocale || ''}
-                        native
-                        onChange={changeLocale}
-                        MenuProps={{
-                            style: {
-                                zIndex: 9999,
-                            },
-                        }}
-                    >
-                        {possibleLocales.map((locale) => {
-                            return (
-                                <option key={locale} value={locale}>
-                                    {locale}
-                                </option>
-                            );
-                        })}
-                    </Select>
-                </StyledFormControl>
+                <LocaleSelector>
+                    <StyledFormControl variant='outlined' size='small'>
+                        <StyledInputLabel htmlFor='locale-select'>
+                            Date/Time formatting
+                        </StyledInputLabel>
+                        <Select
+                            aria-details={exampleDateId}
+                            id='locale-select'
+                            value={currentLocale || ''}
+                            native
+                            onChange={changeLocale}
+                            MenuProps={{
+                                style: {
+                                    zIndex: 9999,
+                                },
+                            }}
+                        >
+                            {possibleLocales.map((locale) => {
+                                return (
+                                    <option key={locale} value={locale}>
+                                        {locale}
+                                    </option>
+                                );
+                            })}
+                        </Select>
+                    </StyledFormControl>
+                    <Typography id={exampleDateId}>
+                        Example:{' '}
+                        <time dateTime={exampleDateString}>
+                            {formatDateYMDHM(exampleDate, currentLocale)}
+                        </time>
+                    </Typography>
+                </LocaleSelector>
                 {productivityReportEmailEnabled ? (
                     <>
                         <StyledDivider />

frontend/src/utils/formatDate.ts

@@ -14,7 +14,7 @@ export const formatDateYMDHMS = (
 
 export const formatDateYMDHM = (
     date: number | string | Date,
-    locale: string,
+    locale?: string,
     timeZone?: string,
 ): string => {
     return new Date(date).toLocaleString(locale, {