From 5967455d60fe23a93a7a6cda91b11746af98fec0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabor=20K=C3=B6rber?= <gab@g4b.org>
Date: Thu, 16 Apr 2026 12:08:34 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=89=20Removing=20the=20additional=20fi?=
 =?UTF-8?q?rst=20reaction=20chip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

replacing it with a timestamp instead. much more helpful and nice.
---
 src/app/features/room/message/Message.tsx   | 14 ++++++++++----
 src/app/features/room/message/styles.css.ts | 10 ++++++++++
 src/owl/components/AddReactionButton.tsx    |  5 ++---
 src/owl/styles/reactions.css.ts             | 13 -------------
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index c8393137..ac1998b2 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -79,7 +79,7 @@ import { MemberPowerTag, StateEvent } from '../../../../types/matrix/room';
 import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
 import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
-import { AddReactionButton } from '../../../../owl/components/AddReactionButton';
+import { timeHourMinute } from '../../../utils/time';
 
 export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void;
 
@@ -1143,10 +1143,16 @@ export const Message = as<'div', MessageProps>(
             </Menu>
           </div>
         )}
-        {!edit && collapse && canSendReaction && !hasVisibleReactions
-          && messageLayout !== MessageLayout.Compact
+        {!edit && collapse && messageLayout !== MessageLayout.Compact
           && (hover || !!emojiBoardAnchor) && (
-          <AddReactionButton onClick={handleInlineAddReaction} ghost />
+          <Text
+            className={css.CollapsedTime}
+            as="time"
+            size="T200"
+            priority="300"
+          >
+            {timeHourMinute(mEvent.getTs(), hour24Clock)}
+          </Text>
         )}
         {messageLayout === MessageLayout.Compact && (
           <CompactLayout before={headerJSX} onContextMenu={handleContextMenu}>
diff --git a/src/app/features/room/message/styles.css.ts b/src/app/features/room/message/styles.css.ts
index 4be501bd..2493d882 100644
--- a/src/app/features/room/message/styles.css.ts
+++ b/src/app/features/room/message/styles.css.ts
@@ -55,3 +55,13 @@ export const ReactionsContainer = style({
 export const ReactionsTooltipText = style({
   wordBreak: 'break-word',
 });
+
+export const CollapsedTime = style({
+  position: 'absolute',
+  left: config.space.S400,
+  top: '50%',
+  transform: 'translateY(-50%)',
+  opacity: 0.6,
+  userSelect: 'none',
+  pointerEvents: 'none',
+});
diff --git a/src/owl/components/AddReactionButton.tsx b/src/owl/components/AddReactionButton.tsx
index bd112be5..3fead937 100644
--- a/src/owl/components/AddReactionButton.tsx
+++ b/src/owl/components/AddReactionButton.tsx
@@ -4,14 +4,13 @@ import * as css from '../styles/reactions.css';
 
 type AddReactionButtonProps = {
   onClick: MouseEventHandler<HTMLButtonElement>;
-  ghost?: boolean;
 };
 
-export function AddReactionButton({ onClick, ghost }: AddReactionButtonProps) {
+export function AddReactionButton({ onClick }: AddReactionButtonProps) {
   return (
     <Box
       as="button"
-      className={ghost ? css.AddReactionGhost : css.AddReactionChip}
+      className={css.AddReactionChip}
       alignItems="Center"
       justifyContent="Center"
       shrink="No"
diff --git a/src/owl/styles/reactions.css.ts b/src/owl/styles/reactions.css.ts
index c4448c3a..2643eb7b 100644
--- a/src/owl/styles/reactions.css.ts
+++ b/src/owl/styles/reactions.css.ts
@@ -26,16 +26,3 @@ export const AddReactionChip = style([
     opacity: 0.6,
   },
 ]);
-
-export const AddReactionGhost = style([
-  DefaultReset,
-  FocusOutline,
-  {
-    ...addReactionBase,
-    position: 'absolute',
-    left: config.space.S400,
-    bottom: config.space.S100,
-    opacity: 0.5,
-    zIndex: 1,
-  },
-]);