Add setting to enable 24-hour time format

src/app/components/message/Time.tsx

@@ -1,22 +1,28 @@
 import React from 'react';
 import { Text, as } from 'folds';
 import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/time';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
 
 export type TimeProps = {
   compact?: boolean;
   ts: number;
 };
 
 export const Time = as<'span', TimeProps>(({ compact, ts, ...props }, ref) => {
+  const [useInternationalTime] = useSetting(settingsAtom, 'useInternationalTime');
+  const formattedTime = timeHourMinute(ts, useInternationalTime);
+
   let time = '';
+
   if (compact) {
-    time = timeHourMinute(ts);
+    time = formattedTime;
   } else if (today(ts)) {
-    time = timeHourMinute(ts);
+    time = formattedTime;
   } else if (yesterday(ts)) {
-    time = `Yesterday ${timeHourMinute(ts)}`;
+    time = `Yesterday ${formattedTime}`;
   } else {
-    time = `${timeDayMonYear(ts)} ${timeHourMinute(ts)}`;
+    time = `${timeDayMonYear(ts)} ${formattedTime}`;
   }
 
   return (

src/app/components/room-intro/RoomIntro.tsx

@@ -9,6 +9,8 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { getMxIdLocalPart } from '../../utils/matrix';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { timeDayMonthYear, timeHourMinute } from '../../utils/time';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
 
 export type RoomIntroProps = {
   room: Room;
@@ -36,6 +38,8 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
     useCallback(async (roomId: string) => mx.joinRoom(roomId), [mx])
   );
 
+  const [useInternationalTime] = useSetting(settingsAtom, 'useInternationalTime');
+
   return (
     <Box direction="Column" grow="Yes" gap="500" {...props} ref={ref}>
       <Box>
@@ -66,7 +70,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
             <Text size="T200" priority="300">
               {'Created by '}
               <b>@{creatorName}</b>
-              {` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts)}`}
+              {` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts, useInternationalTime)}`}
             </Text>
           )}
         </Box>

src/app/organisms/settings/Settings.jsx

@@ -62,6 +62,11 @@ function AppearanceSection() {
   const [urlPreview, setUrlPreview] = useSetting(settingsAtom, 'urlPreview');
   const [encUrlPreview, setEncUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
   const [showHiddenEvents, setShowHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
+  const [useInternationalTime, setInternationalTime] = useSetting(
+    settingsAtom,
+    'useInternationalTime'
+  );
+
   const spacings = ['0', '100', '200', '300', '400', '500']
 
   return (
@@ -223,6 +228,16 @@ function AppearanceSection() {
           )}
           content={<Text variant="b3">Show hidden state and message events.</Text>}
         />
+        <SettingTile
+          title="Use 24-hour time"
+          options={
+            <Toggle
+              isActive={useInternationalTime}
+              onToggle={() => setInternationalTime(!useInternationalTime)}
+            />
+          }
+          content={<Text variant="b3">Use the 24-hour time format for all timestamps.</Text>}
+        />
       </div>
     </div>
   );

src/app/state/settings.ts

@@ -25,6 +25,8 @@ export interface Settings {
 
   showNotifications: boolean;
   isNotificationSounds: boolean;
+
+  useInternationalTime: boolean;
 }
 
 const defaultSettings: Settings = {
@@ -48,6 +50,8 @@ const defaultSettings: Settings = {
 
   showNotifications: true,
   isNotificationSounds: true,
+
+  useInternationalTime: false,
 };
 
 export const getSettings = () => {

src/app/utils/time.ts

@@ -9,7 +9,8 @@ export const today = (ts: number): boolean => dayjs(ts).isToday();
 
 export const yesterday = (ts: number): boolean => dayjs(ts).isYesterday();
 
-export const timeHourMinute = (ts: number): string => dayjs(ts).format('hh:mm A');
+export const timeHourMinute = (ts: number, international: boolean = false): string =>
+  dayjs(ts).format(international ? 'HH:mm' : 'hh:mm A');
 
 export const timeDayMonYear = (ts: number): string => dayjs(ts).format('D MMM YYYY');