add support for 24hr time to TimePicker

src/app/components/time-date/TimePicker.tsx

@@ -4,6 +4,8 @@ import dayjs from 'dayjs';
 import * as css from './styles.css';
 import { PickerColumn } from './PickerColumn';
 import { hour12to24, hour24to12, hoursToMs, inSameDay, minutesToMs } from '../../utils/time';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
 
 type TimePickerProps = {
   min: number;
@@ -13,9 +15,11 @@ type TimePickerProps = {
 };
 export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
   ({ min, max, value, onChange }, ref) => {
+    const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+
     const hour24 = dayjs(value).hour();
 
-    const selectedHour = hour24to12(hour24);
+    const selectedHour = hour24Clock ? hour24 : hour24to12(hour24);
     const selectedMinute = dayjs(value).minute();
     const selectedPM = hour24 >= 12;
 
@@ -24,7 +28,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
     };
 
     const handleHour = (hour: number) => {
-      const seconds = hoursToMs(hour12to24(hour, selectedPM));
+      const seconds = hoursToMs(hour24Clock ? hour : hour12to24(hour, selectedPM));
       const lastSeconds = hoursToMs(hour24);
       const newValue = value + (seconds - lastSeconds);
       handleSubmit(newValue);
@@ -59,7 +63,22 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
       <Menu className={css.PickerMenu} ref={ref}>
         <Box direction="Row" gap="200" className={css.PickerContainer}>
           <PickerColumn title="Hour">
-            {Array.from(Array(12).keys())
+            {hour24Clock
+              ? Array.from(Array(24).keys()).map((hour) => (
+                  <Chip
+                    key={hour}
+                    size="500"
+                    variant={hour === selectedHour ? 'Primary' : 'Background'}
+                    fill="None"
+                    radii="300"
+                    aria-selected={hour === selectedHour}
+                    onClick={() => handleHour(hour)}
+                    disabled={(minDay && hour < minHour24) || (maxDay && hour > maxHour24)}
+                  >
+                    <Text size="T300">{hour < 10 ? `0${hour}` : hour}</Text>
+                  </Chip>
+                ))
+              : Array.from(Array(12).keys())
                   .map((i) => {
                     if (i === 0) return 12;
                     return i;
@@ -101,6 +120,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
               </Chip>
             ))}
           </PickerColumn>
+          {!hour24Clock && (
             <PickerColumn title="Period">
               <Chip
                 size="500"
@@ -125,6 +145,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
                 <Text size="T300">PM</Text>
               </Chip>
             </PickerColumn>
+          )}
         </Box>
       </Menu>
     );

src/app/features/room/jump-to-time/JumpToTime.tsx

@@ -29,6 +29,8 @@ import { useRoom } from '../../../hooks/useRoom';
 import { StateEvent } from '../../../../types/matrix/room';
 import { getToday, getYesterday, timeDayMonthYear, timeHourMinute } from '../../../utils/time';
 import { DatePicker, TimePicker } from '../../../components/time-date';
+import { useSetting } from '../../../state/hooks/settings';
+import { settingsAtom } from '../../../state/settings';
 
 type JumpToTimeProps = {
   onCancel: () => void;
@@ -45,6 +47,8 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
   const createTs = useMemo(() => createStateEvent?.getTs() ?? 0, [createStateEvent]);
   const [ts, setTs] = useState(() => Date.now());
 
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+
   const [timePickerCords, setTimePickerCords] = useState<RectCords>();
   const [datePickerCords, setDatePickerCords] = useState<RectCords>();
 
@@ -125,7 +129,7 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
                       after={<Icon size="50" src={Icons.ChevronBottom} />}
                       onClick={handleTimePicker}
                     >
-                      <Text size="B300">{timeHourMinute(ts)}</Text>
+                      <Text size="B300">{timeHourMinute(ts, hour24Clock)}</Text>
                     </Chip>
                     <PopOut
                       anchor={timePickerCords}

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 timeHour = (ts: number): string => dayjs(ts).format('hh');
+export const timeHour = (ts: number, hour24Clock: boolean): string =>
+  dayjs(ts).format(hour24Clock ? 'HH' : 'hh');
 export const timeMinute = (ts: number): string => dayjs(ts).format('mm');
 export const timeAmPm = (ts: number): string => dayjs(ts).format('A');
 export const timeDay = (ts: number): string => dayjs(ts).format('D');