Add setting to show timestamps on every message

.changeset/show-all-timestamps.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add a setting to show all timestamps, including on grouped messages from the same sender

src/app/features/room/message/Message.tsx

@@ -538,6 +538,7 @@ function MessageInternal(
   const [parsePronouns] = useSetting(settingsAtom, 'parsePronouns');
 
   const [useRightBubbles] = useSetting(settingsAtom, 'useRightBubbles');
+  const [showAllTimestamps] = useSetting(settingsAtom, 'showAllTimestamps');
   const { cleanedDisplayName, inlinePronoun } = useMemo(() => {
     const rawName = pmp?.displayname || resolvedSenderDisplayName || '';
     return getParsedPronouns(rawName, parsePronouns);
@@ -661,7 +662,32 @@ function MessageInternal(
           </Box>
         </Box>
       );
-    return <></>;
+    return showAllTimestamps ? (
+      <Box
+        gap="300"
+        direction={
+          messageLayout === MessageLayout.Compact ||
+          (messageLayout === MessageLayout.Bubble && useRightBubbles && senderId === mx.getUserId())
+            ? 'RowReverse'
+            : 'Row'
+        }
+        justifyContent="SpaceBetween"
+        alignItems="Baseline"
+        grow="Yes"
+      >
+        <Box grow="Yes" style={{ minWidth: 0 }} />
+        <Box shrink="No" gap="100">
+          <Time
+            ts={mEvent.getTs()}
+            compact={messageLayout === MessageLayout.Compact}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
+        </Box>
+      </Box>
+    ) : (
+      <></>
+    );
   };
 
   const avatarJSX = (collapsed?: boolean) => {

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

@@ -819,6 +819,7 @@ function Messages() {
     settingsAtom,
     'hideMembershipInReadOnly'
   );
+  const [showAllTimestamps, setShowAllTimestamps] = useSetting(settingsAtom, 'showAllTimestamps');
 
   const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
   const [rightBubbles, setRightBubbles] = useSetting(settingsAtom, 'useRightBubbles');
@@ -839,6 +840,13 @@ function Messages() {
           after={<SelectMessageSpacing />}
         />
       </SequenceCard>
+      <SettingToggle
+        title="Show All Timestamps"
+        focusId="show-all-timestamps"
+        description="Display a timestamp on every message, including consecutive messages from the same sender that are normally grouped."
+        value={showAllTimestamps}
+        onChange={setShowAllTimestamps}
+      />
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="File description placement"

src/app/features/settings/settingsLink.ts

@@ -47,6 +47,7 @@ export const settingsLinkFocusIdsBySection: Record<SettingsSectionId, readonly s
     'markdown-formatting',
     'message-layout',
     'message-spacing',
+    'show-all-timestamps',
     'presence-status',
     'reply-notifications',
     'right-aligned-bubbles',

src/app/state/settings.ts

@@ -181,6 +181,7 @@ export interface Settings {
 
   hour24Clock: boolean;
   dateFormatString: string;
+  showAllTimestamps: boolean;
 
   developerTools: boolean;
   enableMSC4268CMD: boolean;
@@ -377,6 +378,7 @@ export const defaultSettings: Settings = {
 
   hour24Clock: false,
   dateFormatString: 'D MMM YYYY',
+  showAllTimestamps: false,
 
   developerTools: false,
   settingsSyncEnabled: false,