Add settings to enable 24-hour time format and customizable date format (#2347)

* Add setting to enable 24-hour time format

* added hour24Clock to TimeProps

* Add incomplete dateFormatString setting

* Move 24-hour  toggle to Appearance

* Add "Date & Time" subheading, cleanup after merge

* Add setting for date formatting

* Fix minor formatting and naming issues

* Document functions

* adress most comments

* add hint for date formatting

* add support for 24hr time to TimePicker

* prevent overflow on small displays

src/app/pages/client/inbox/Notifications.tsx

@@ -205,6 +205,8 @@ type RoomNotificationsGroupProps = {
   hideActivity: boolean;
   onOpen: (roomId: string, eventId: string) => void;
   legacyUsernameColor?: boolean;
+  hour24Clock: boolean;
+  dateFormatString: string;
 };
 function RoomNotificationsGroupComp({
   room,
@@ -214,6 +216,8 @@ function RoomNotificationsGroupComp({
   hideActivity,
   onOpen,
   legacyUsernameColor,
+  hour24Clock,
+  dateFormatString,
 }: RoomNotificationsGroupProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
@@ -496,7 +500,11 @@ function RoomNotificationsGroupComp({
                       </Username>
                       {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
                     </Box>
-                    <Time ts={event.origin_server_ts} />
+                    <Time
+                      ts={event.origin_server_ts}
+                      hour24Clock={hour24Clock}
+                      dateFormatString={dateFormatString}
+                    />
                   </Box>
                   <Box shrink="No" gap="200" alignItems="Center">
                     <Chip
@@ -549,6 +557,8 @@ export function Notifications() {
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
   const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
   const screenSize = useScreenSizeContext();
   const mDirects = useAtomValue(mDirectAtom);
 
@@ -713,6 +723,8 @@ export function Notifications() {
                           legacyUsernameColor={
                             legacyUsernameColor || mDirects.has(groupRoom.roomId)
                           }
+                          hour24Clock={hour24Clock}
+                          dateFormatString={dateFormatString}
                         />
                       </VirtualTile>
                     );