Merge branch 'dev' into improve-space

src/app/features/common-settings/general/RoomHistoryVisibility.tsx

@@ -119,7 +119,7 @@ export function RoomHistoryVisibility({ powerLevels }: RoomHistoryVisibilityProp
                   escapeDeactivates: stopPropagation,
                 }}
               >
-                <Menu style={{ padding: config.space.S100 }}>
+                <Menu style={{ padding: config.space.S200 }}>
                   {visibilityMenu.map((visibility) => (
                     <MenuItem
                       key={visibility}

src/app/features/common-settings/permissions/Powers.tsx

@@ -63,7 +63,7 @@ function PeekPermissions({ powerLevels, power, permissionGroups, children }: Pee
           >
             <Box grow="Yes" tabIndex={0}>
               <Scroll size="0" hideTrack visibility="Hover">
-                <Box style={{ padding: config.space.S200 }} direction="Column" gap="400">
+                <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
                   {permissionGroups.map((group, groupIndex) => (
                     <Box key={groupIndex} direction="Column" gap="100">
                       <Text size="L400">{group.name}</Text>

src/app/features/lobby/HierarchyItemMenu.tsx

@@ -234,9 +234,9 @@ export function HierarchyItemMenu({
                 escapeDeactivates: stopPropagation,
               }}
             >
-              <Menu style={{ maxWidth: toRem(150), width: '100vw' }}>
+              <Menu style={{ minWidth: toRem(200) }}>
                 {joined && (
-                  <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                  <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                     {onTogglePin && (
                       <MenuItem
                         size="300"
@@ -296,7 +296,7 @@ export function HierarchyItemMenu({
                   <Line size="300" variant="Surface" direction="Horizontal" />
                 )}
                 {canEditChild && (
-                  <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                  <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                     <SuggestMenuItem item={item} requestClose={handleRequestClose} />
                     <RemoveMenuItem item={item} requestClose={handleRequestClose} />
                   </Box>

src/app/features/lobby/LobbyHeader.tsx

@@ -60,8 +60,8 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
     };
 
     return (
-      <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
-        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+      <Menu ref={ref} style={{ minWidth: toRem(200) }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
           <MenuItem
             onClick={handleInvite}
             variant="Primary"
@@ -87,7 +87,7 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
           </MenuItem>
         </Box>
         <Line variant="Surface" size="300" />
-        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
           <UseStateProvider initial={false}>
             {(promptLeave, setPromptLeave) => (
               <>

src/app/features/lobby/SpaceItem.tsx

@@ -274,7 +274,7 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Menu style={{ padding: config.space.S100 }}>
+          <Menu style={{ padding: config.space.S200 }}>
             <MenuItem
               size="300"
               radii="300"
@@ -336,7 +336,7 @@ function AddSpaceButton({ item }: { item: HierarchyItem }) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Menu style={{ padding: config.space.S100 }}>
+          <Menu style={{ padding: config.space.S200 }}>
             <MenuItem
               size="300"
               radii="300"

src/app/features/message-search/MessageSearch.tsx

@@ -57,6 +57,9 @@ export function MessageSearch({
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
   const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
 
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
   const searchInputRef = useRef<HTMLInputElement>(null);
   const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
   const [searchParams, setSearchParams] = useSearchParams();
@@ -289,6 +292,8 @@ export function MessageSearch({
                     urlPreview={urlPreview}
                     onOpen={navigateRoom}
                     legacyUsernameColor={legacyUsernameColor || mDirects.has(groupRoom.roomId)}
+                    hour24Clock={hour24Clock}
+                    dateFormatString={dateFormatString}
                   />
                 </VirtualTile>
               );

src/app/features/message-search/SearchFilters.tsx

@@ -74,8 +74,7 @@ function OrderButton({ order, onChange }: OrderButtonProps) {
             <Header size="300" variant="Surface" style={{ padding: `0 ${config.space.S300}` }}>
               <Text size="L400">Sort by</Text>
             </Header>
-            <Line variant="Surface" size="300" />
-            <div style={{ padding: config.space.S100 }}>
+            <div style={{ padding: config.space.S200, paddingTop: 0 }}>
               <MenuItem
                 onClick={() => setOrder()}
                 variant="Surface"
@@ -291,7 +290,7 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
                 </Box>
               </Scroll>
               <Line variant="Surface" size="300" />
-              <Box shrink="No" direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+              <Box shrink="No" direction="Column" gap="200" style={{ padding: config.space.S200 }}>
                 <Button size="300" variant="Secondary" radii="300" onClick={handleSave}>
                   {localSelected && localSelected.length > 0 ? (
                     <Text size="B300">Save ({localSelected.length})</Text>

src/app/features/message-search/SearchResultGroup.tsx

@@ -57,6 +57,8 @@ type SearchResultGroupProps = {
   urlPreview?: boolean;
   onOpen: (roomId: string, eventId: string) => void;
   legacyUsernameColor?: boolean;
+  hour24Clock: boolean;
+  dateFormatString: string;
 };
 export function SearchResultGroup({
   room,
@@ -66,6 +68,8 @@ export function SearchResultGroup({
   urlPreview,
   onOpen,
   legacyUsernameColor,
+  hour24Clock,
+  dateFormatString,
 }: SearchResultGroupProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
@@ -275,7 +279,11 @@ export function SearchResultGroup({
                       </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

src/app/features/room-nav/RoomNavItem.tsx

@@ -89,8 +89,8 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
     };
 
     return (
-      <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
-        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+      <Menu ref={ref} style={{ minWidth: toRem(200) }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
           <MenuItem
             onClick={handleMarkAsRead}
             size="300"
@@ -125,7 +125,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
           </RoomNotificationModeSwitcher>
         </Box>
         <Line variant="Surface" size="300" />
-        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
           <MenuItem
             onClick={handleInvite}
             variant="Primary"
@@ -161,7 +161,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
           </MenuItem>
         </Box>
         <Line variant="Surface" size="300" />
-        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
           <UseStateProvider initial={false}>
             {(promptLeave, setPromptLeave) => (
               <>

src/app/features/room/RoomInput.tsx

@@ -543,7 +543,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   >
                     <Icon src={Icons.Cross} size="50" />
                   </IconButton>
-                  <Box direction="Column">
+                  <Box direction="Row" gap="200" alignItems="Center">
                     {replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
                     <ReplyLayout
                       userColor={replyUsernameColor}

src/app/features/room/RoomTimeline.tsx

@@ -450,6 +450,9 @@ export function RoomTimeline({
   const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
   const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
 
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
   const ignoredUsersList = useIgnoredUsers();
   const ignoredUsersSet = useMemo(() => new Set(ignoredUsersList), [ignoredUsersList]);
 
@@ -1072,6 +1075,8 @@ export function RoomTimeline({
             powerLevelTag={getPowerLevelTag(senderPowerLevel)}
             accessibleTagColors={accessibleTagColors}
             legacyUsernameColor={legacyUsernameColor || direct}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
           >
             {mEvent.isRedacted() ? (
               <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
@@ -1154,6 +1159,8 @@ export function RoomTimeline({
             powerLevelTag={getPowerLevelTag(senderPowerLevel)}
             accessibleTagColors={accessibleTagColors}
             legacyUsernameColor={legacyUsernameColor || direct}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
           >
             <EncryptedContent mEvent={mEvent}>
               {() => {
@@ -1256,6 +1263,8 @@ export function RoomTimeline({
             powerLevelTag={getPowerLevelTag(senderPowerLevel)}
             accessibleTagColors={accessibleTagColors}
             legacyUsernameColor={legacyUsernameColor || direct}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
           >
             {mEvent.isRedacted() ? (
               <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
@@ -1284,7 +1293,12 @@ export function RoomTimeline({
         const parsed = parseMemberEvent(mEvent);
 
         const timeJSX = (
-          <Time ts={mEvent.getTs()} compact={messageLayout === MessageLayout.Compact} />
+          <Time
+            ts={mEvent.getTs()}
+            compact={messageLayout === MessageLayout.Compact}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
         );
 
         return (
@@ -1321,7 +1335,12 @@ export function RoomTimeline({
         const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
         const timeJSX = (
-          <Time ts={mEvent.getTs()} compact={messageLayout === MessageLayout.Compact} />
+          <Time
+            ts={mEvent.getTs()}
+            compact={messageLayout === MessageLayout.Compact}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
         );
 
         return (
@@ -1359,7 +1378,12 @@ export function RoomTimeline({
         const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
         const timeJSX = (
-          <Time ts={mEvent.getTs()} compact={messageLayout === MessageLayout.Compact} />
+          <Time
+            ts={mEvent.getTs()}
+            compact={messageLayout === MessageLayout.Compact}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
         );
 
         return (
@@ -1397,7 +1421,12 @@ export function RoomTimeline({
         const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
         const timeJSX = (
-          <Time ts={mEvent.getTs()} compact={messageLayout === MessageLayout.Compact} />
+          <Time
+            ts={mEvent.getTs()}
+            compact={messageLayout === MessageLayout.Compact}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
         );
 
         return (
@@ -1437,7 +1466,12 @@ export function RoomTimeline({
       const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
       const timeJSX = (
-        <Time ts={mEvent.getTs()} compact={messageLayout === MessageLayout.Compact} />
+        <Time
+          ts={mEvent.getTs()}
+          compact={messageLayout === MessageLayout.Compact}
+          hour24Clock={hour24Clock}
+          dateFormatString={dateFormatString}
+        />
       );
 
       return (
@@ -1482,7 +1516,12 @@ export function RoomTimeline({
       const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
       const timeJSX = (
-        <Time ts={mEvent.getTs()} compact={messageLayout === MessageLayout.Compact} />
+        <Time
+          ts={mEvent.getTs()}
+          compact={messageLayout === MessageLayout.Compact}
+          hour24Clock={hour24Clock}
+          dateFormatString={dateFormatString}
+        />
       );
 
       return (

src/app/features/room/RoomViewHeader.tsx

@@ -108,8 +108,8 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   };
 
   return (
-    <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+    <Menu ref={ref} style={{ minWidth: toRem(200) }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
         <MenuItem
           onClick={handleMarkAsRead}
           size="300"
@@ -144,7 +144,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
         </RoomNotificationModeSwitcher>
       </Box>
       <Line variant="Surface" size="300" />
-      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
         <MenuItem
           onClick={handleInvite}
           variant="Primary"
@@ -207,7 +207,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
         </UseStateProvider>
       </Box>
       <Line variant="Surface" size="300" />
-      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
         <UseStateProvider initial={false}>
           {(promptLeave, setPromptLeave) => (
             <>

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/features/room/message/Message.tsx

@@ -22,6 +22,7 @@ import {
   as,
   color,
   config,
+  toRem,
 } from 'folds';
 import React, {
   FormEventHandler,
@@ -94,10 +95,10 @@ export const MessageQuickReactions = as<'div', MessageQuickReactionsProps>(
     return (
       <>
         <Box
-          style={{ padding: config.space.S200 }}
+          style={{ padding: config.space.S300 }}
           alignItems="Center"
           justifyContent="Center"
-          gap="200"
+          gap="300"
           {...props}
           ref={ref}
         >
@@ -682,6 +683,8 @@ export type MessageProps = {
   powerLevelTag?: PowerLevelTag;
   accessibleTagColors?: Map<string, string>;
   legacyUsernameColor?: boolean;
+  hour24Clock: boolean;
+  dateFormatString: string;
 };
 export const Message = as<'div', MessageProps>(
   (
@@ -711,6 +714,8 @@ export const Message = as<'div', MessageProps>(
       powerLevelTag,
       accessibleTagColors,
       legacyUsernameColor,
+      hour24Clock,
+      dateFormatString,
       children,
       ...props
     },
@@ -775,7 +780,12 @@ export const Message = as<'div', MessageProps>(
               </Text>
             </>
           )}
-          <Time ts={mEvent.getTs()} compact={messageLayout === MessageLayout.Compact} />
+          <Time
+            ts={mEvent.getTs()}
+            compact={messageLayout === MessageLayout.Compact}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
         </Box>
       </Box>
     );
@@ -963,7 +973,7 @@ export const Message = as<'div', MessageProps>(
                         escapeDeactivates: stopPropagation,
                       }}
                     >
-                      <Menu>
+                      <Menu style={{ minWidth: toRem(200) }}>
                         {canSendReaction && (
                           <MessageQuickReactions
                             onReaction={(key, shortcode) => {
@@ -1160,6 +1170,7 @@ export const Event = as<'div', EventProps>(
       hideReadReceipts,
       showDeveloperTools,
       children,
+      style,
       ...props
     },
     ref
@@ -1226,7 +1237,7 @@ export const Event = as<'div', EventProps>(
                         escapeDeactivates: stopPropagation,
                       }}
                     >
-                      <Menu {...props} ref={ref}>
+                      <Menu style={{ minWidth: toRem(200), ...style }} {...props} ref={ref}>
                         <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
                           {!hideReadReceipts && (
                             <MessageReadReceiptItem

src/app/features/room/message/styles.css.ts

@@ -30,7 +30,7 @@ export const MessageQuickReaction = style({
 });
 
 export const MessageMenuGroup = style({
-  padding: config.space.S100,
+  padding: config.space.S200,
 });
 
 export const MessageMenuItemText = style({

src/app/features/room/room-pin-menu/RoomPinMenu.tsx

@@ -102,6 +102,9 @@ function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: Pi
   const theme = useTheme();
   const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
 
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
   const [unpinState, unpin] = useAsyncCallback(
     useCallback(() => {
       const pinEvent = getStateEvent(room, StateEvent.RoomPinnedEvents);
@@ -205,7 +208,11 @@ function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: Pi
             </Username>
             {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
           </Box>
-          <Time ts={pinnedEvent.getTs()} />
+          <Time
+            ts={pinnedEvent.getTs()}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
         </Box>
         {renderOptions()}
       </Box>

src/app/features/settings/devices/DeviceTile.tsx

@@ -27,6 +27,8 @@ import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { LogoutDialog } from '../../../components/LogoutDialog';
 import { stopPropagation } from '../../../utils/keyboard';
+import { useSetting } from '../../../state/hooks/settings';
+import { settingsAtom } from '../../../state/settings';
 
 export function DeviceTilePlaceholder() {
   return (
@@ -41,6 +43,9 @@ export function DeviceTilePlaceholder() {
 }
 
 function DeviceActiveTime({ ts }: { ts: number }) {
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
   return (
     <Text className={BreakWord} size="T200">
       <Text size="Inherit" as="span" priority="300">
@@ -49,7 +54,8 @@ function DeviceActiveTime({ ts }: { ts: number }) {
       <>
         {today(ts) && 'Today'}
         {yesterday(ts) && 'Yesterday'}
-        {!today(ts) && !yesterday(ts) && timeDayMonYear(ts)} {timeHourMinute(ts)}
+        {!today(ts) && !yesterday(ts) && timeDayMonYear(ts, dateFormatString)}{' '}
+        {timeHourMinute(ts, hour24Clock)}
       </>
     </Text>
   );

src/app/features/settings/devices/Verification.tsx

@@ -315,7 +315,7 @@ export function DeviceVerificationOptions() {
             }}
           >
             <Menu>
-              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                 <MenuItem
                   variant="Critical"
                   onClick={handleReset}

src/app/features/settings/general/General.tsx

@@ -1,15 +1,19 @@
 import React, {
   ChangeEventHandler,
+  FormEventHandler,
   KeyboardEventHandler,
   MouseEventHandler,
+  useEffect,
   useState,
 } from 'react';
+import dayjs from 'dayjs';
 import {
   as,
   Box,
   Button,
   Chip,
   config,
+  Header,
   Icon,
   IconButton,
   Icons,
@@ -28,7 +32,7 @@ import FocusTrap from 'focus-trap-react';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { useSetting } from '../../../state/hooks/settings';
-import { MessageLayout, MessageSpacing, settingsAtom } from '../../../state/settings';
+import { DateFormat, MessageLayout, MessageSpacing, settingsAtom } from '../../../state/settings';
 import { SettingTile } from '../../../components/setting-tile';
 import { KeySymbol } from '../../../utils/key-symbol';
 import { isMacOS } from '../../../utils/user-agent';
@@ -44,6 +48,7 @@ import {
 import { stopPropagation } from '../../../utils/keyboard';
 import { useMessageLayoutItems } from '../../../hooks/useMessageLayout';
 import { useMessageSpacingItems } from '../../../hooks/useMessageSpacing';
+import { useDateFormatItems } from '../../../hooks/useDateFormat';
 import { SequenceCardStyle } from '../styles.css';
 
 type ThemeSelectorProps = {
@@ -55,7 +60,7 @@ type ThemeSelectorProps = {
 const ThemeSelector = as<'div', ThemeSelectorProps>(
   ({ themeNames, themes, selected, onSelect, ...props }, ref) => (
     <Menu {...props} ref={ref}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
         {themes.map((theme) => (
           <MenuItem
             key={theme.id}
@@ -341,6 +346,359 @@ function Appearance() {
   );
 }
 
+type DateHintProps = {
+  hasChanges: boolean;
+  handleReset: () => void;
+};
+function DateHint({ hasChanges, handleReset }: DateHintProps) {
+  const [anchor, setAnchor] = useState<RectCords>();
+  const categoryPadding = { padding: config.space.S200, paddingTop: 0 };
+
+  const handleOpenMenu: MouseEventHandler<HTMLElement> = (evt) => {
+    setAnchor(evt.currentTarget.getBoundingClientRect());
+  };
+  return (
+    <PopOut
+      anchor={anchor}
+      position="Top"
+      align="End"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: () => setAnchor(undefined),
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu style={{ maxHeight: '85vh', overflowY: 'auto' }}>
+            <Header size="300" style={{ padding: `0 ${config.space.S200}` }}>
+              <Text size="L400">Formatting</Text>
+            </Header>
+
+            <Box direction="Column">
+              <Box style={categoryPadding} direction="Column">
+                <Header size="300">
+                  <Text size="L400">Year</Text>
+                </Header>
+                <Box direction="Column" tabIndex={0} gap="100">
+                  <Text size="T300">
+                    YY
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}
+                      Two-digit year
+                    </Text>{' '}
+                  </Text>
+                  <Text size="T300">
+                    YYYY
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Four-digit year
+                    </Text>
+                  </Text>
+                </Box>
+              </Box>
+
+              <Box style={categoryPadding} direction="Column">
+                <Header size="300">
+                  <Text size="L400">Month</Text>
+                </Header>
+                <Box direction="Column" tabIndex={0} gap="100">
+                  <Text size="T300">
+                    M
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}The month
+                    </Text>
+                  </Text>
+                  <Text size="T300">
+                    MM
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Two-digit month
+                    </Text>{' '}
+                  </Text>
+                  <Text size="T300">
+                    MMM
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Short month name
+                    </Text>
+                  </Text>
+                  <Text size="T300">
+                    MMMM
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Full month name
+                    </Text>
+                  </Text>
+                </Box>
+              </Box>
+
+              <Box style={categoryPadding} direction="Column">
+                <Header size="300">
+                  <Text size="L400">Day of the Month</Text>
+                </Header>
+                <Box direction="Column" tabIndex={0} gap="100">
+                  <Text size="T300">
+                    D
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Day of the month
+                    </Text>
+                  </Text>
+                  <Text size="T300">
+                    DD
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Two-digit day of the month
+                    </Text>
+                  </Text>
+                </Box>
+              </Box>
+              <Box style={categoryPadding} direction="Column">
+                <Header size="300">
+                  <Text size="L400">Day of the Week</Text>
+                </Header>
+                <Box direction="Column" tabIndex={0} gap="100">
+                  <Text size="T300">
+                    d
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Day of the week (Sunday = 0)
+                    </Text>
+                  </Text>
+                  <Text size="T300">
+                    dd
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Two-letter day name
+                    </Text>
+                  </Text>
+                  <Text size="T300">
+                    ddd
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Short day name
+                    </Text>
+                  </Text>
+                  <Text size="T300">
+                    dddd
+                    <Text as="span" size="Inherit" priority="300">
+                      {': '}Full day name
+                    </Text>
+                  </Text>
+                </Box>
+              </Box>
+            </Box>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      {hasChanges ? (
+        <IconButton
+          tabIndex={-1}
+          onClick={handleReset}
+          type="reset"
+          variant="Secondary"
+          size="300"
+          radii="300"
+        >
+          <Icon src={Icons.Cross} size="100" />
+        </IconButton>
+      ) : (
+        <IconButton
+          tabIndex={-1}
+          onClick={handleOpenMenu}
+          type="button"
+          variant="Secondary"
+          size="300"
+          radii="300"
+          aria-pressed={!!anchor}
+        >
+          <Icon style={{ opacity: config.opacity.P300 }} size="100" src={Icons.Info} />
+        </IconButton>
+      )}
+    </PopOut>
+  );
+}
+
+type CustomDateFormatProps = {
+  value: string;
+  onChange: (format: string) => void;
+};
+function CustomDateFormat({ value, onChange }: CustomDateFormatProps) {
+  const [dateFormatCustom, setDateFormatCustom] = useState(value);
+
+  useEffect(() => {
+    setDateFormatCustom(value);
+  }, [value]);
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    const format = evt.currentTarget.value;
+    setDateFormatCustom(format);
+  };
+
+  const handleReset = () => {
+    setDateFormatCustom(value);
+  };
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const customDateFormatInput = target?.customDateFormatInput as HTMLInputElement | undefined;
+    const format = customDateFormatInput?.value;
+    if (!format) return;
+
+    onChange(format);
+  };
+
+  const hasChanges = dateFormatCustom !== value;
+  return (
+    <SettingTile>
+      <Box as="form" onSubmit={handleSubmit} gap="200">
+        <Box grow="Yes" direction="Column">
+          <Input
+            required
+            name="customDateFormatInput"
+            value={dateFormatCustom}
+            onChange={handleChange}
+            maxLength={16}
+            autoComplete="off"
+            variant="Secondary"
+            radii="300"
+            style={{ paddingRight: config.space.S200 }}
+            after={<DateHint hasChanges={hasChanges} handleReset={handleReset} />}
+          />
+        </Box>
+        <Button
+          size="400"
+          variant={hasChanges ? 'Success' : 'Secondary'}
+          fill={hasChanges ? 'Solid' : 'Soft'}
+          outlined
+          radii="300"
+          disabled={!hasChanges}
+          type="submit"
+        >
+          <Text size="B400">Save</Text>
+        </Button>
+      </Box>
+    </SettingTile>
+  );
+}
+
+type PresetDateFormatProps = {
+  value: string;
+  onChange: (format: string) => void;
+};
+function PresetDateFormat({ value, onChange }: PresetDateFormatProps) {
+  const [menuCords, setMenuCords] = useState<RectCords>();
+  const dateFormatItems = useDateFormatItems();
+
+  const getDisplayDate = (format: string): string =>
+    format !== '' ? dayjs().format(format) : 'Custom';
+
+  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleSelect = (format: DateFormat) => {
+    onChange(format);
+    setMenuCords(undefined);
+  };
+
+  return (
+    <>
+      <Button
+        size="300"
+        variant="Secondary"
+        outlined
+        fill="Soft"
+        radii="300"
+        after={<Icon size="300" src={Icons.ChevronBottom} />}
+        onClick={handleMenu}
+      >
+        <Text size="T300">
+          {getDisplayDate(dateFormatItems.find((i) => i.format === value)?.format ?? value)}
+        </Text>
+      </Button>
+      <PopOut
+        anchor={menuCords}
+        offset={5}
+        position="Bottom"
+        align="End"
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => setMenuCords(undefined),
+              clickOutsideDeactivates: true,
+              isKeyForward: (evt: KeyboardEvent) =>
+                evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+              isKeyBackward: (evt: KeyboardEvent) =>
+                evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Menu>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                {dateFormatItems.map((item) => (
+                  <MenuItem
+                    key={item.format}
+                    size="300"
+                    variant={value === item.format ? 'Primary' : 'Surface'}
+                    radii="300"
+                    onClick={() => handleSelect(item.format)}
+                  >
+                    <Text size="T300">{getDisplayDate(item.format)}</Text>
+                  </MenuItem>
+                ))}
+              </Box>
+            </Menu>
+          </FocusTrap>
+        }
+      />
+    </>
+  );
+}
+
+function SelectDateFormat() {
+  const [dateFormatString, setDateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const [selectedDateFormat, setSelectedDateFormat] = useState(dateFormatString);
+  const customDateFormat = selectedDateFormat === '';
+
+  const handlePresetChange = (format: string) => {
+    setSelectedDateFormat(format);
+    if (format !== '') {
+      setDateFormatString(format);
+    }
+  };
+
+  return (
+    <>
+      <SettingTile
+        title="Date Format"
+        description={customDateFormat ? dayjs().format(dateFormatString) : ''}
+        after={<PresetDateFormat value={selectedDateFormat} onChange={handlePresetChange} />}
+      />
+      {customDateFormat && (
+        <CustomDateFormat value={dateFormatString} onChange={setDateFormatString} />
+      )}
+    </>
+  );
+}
+
+function DateAndTime() {
+  const [hour24Clock, setHour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Date & Time</Text>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="24-Hour Time Format"
+          after={<Switch variant="Primary" value={hour24Clock} onChange={setHour24Clock} />}
+        />
+      </SequenceCard>
+
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SelectDateFormat />
+      </SequenceCard>
+    </Box>
+  );
+}
+
 function Editor() {
   const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline');
   const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
@@ -423,7 +781,7 @@ function SelectMessageLayout() {
             }}
           >
             <Menu>
-              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                 {messageLayoutItems.map((item) => (
                   <MenuItem
                     key={item.layout}
@@ -492,7 +850,7 @@ function SelectMessageSpacing() {
             }}
           >
             <Menu>
-              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                 {messageSpacingItems.map((item) => (
                   <MenuItem
                     key={item.spacing}
@@ -637,6 +995,7 @@ export function General({ requestClose }: GeneralProps) {
           <PageContent>
             <Box direction="Column" gap="700">
               <Appearance />
+              <DateAndTime />
               <Editor />
               <Messages />
             </Box>

src/app/features/settings/notifications/NotificationModeSwitcher.tsx

@@ -92,7 +92,7 @@ export function NotificationModeSwitcher({ pushRule, onChange }: NotificationMod
             }}
           >
             <Menu>
-              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                 {modes.map((mode) => (
                   <MenuItem
                     key={mode}