🦉 Removing the additional first reaction chip

replacing it with a timestamp instead. much more helpful and nice.

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
+        {!edit && collapse && messageLayout !== MessageLayout.Compact
-          && 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}>

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',
+});

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"

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,
-  },
-]);