diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx index 32c6ba20..2480f215 100644 --- a/src/app/features/room/message/Message.tsx +++ b/src/app/features/room/message/Message.tsx @@ -116,45 +116,69 @@ export const MessageQuickReactions = as<'div', MessageQuickReactionsProps>( } ); -// Default reactions shown in the hover rail before a user has built up any -// recent-emoji history, so the "быстрый рельс" always offers one-tap reactions. -const RAIL_DEFAULT_REACTIONS: { unicode: string; shortcode: string }[] = [ - { unicode: '👍', shortcode: 'thumbsup' }, - { unicode: '❤️', shortcode: 'heart' }, - { unicode: '😂', shortcode: 'joy' }, -]; - -type RailQuickReactionsProps = { - onReaction: (key: string, shortcode?: string) => void; -}; -// Inline quick-reactions surfaced directly in the hover action rail — react in -// one tap without opening the emoji board. Mounts ONLY inside the -// conditionally-rendered rail (one row at a time), so there is no per-row cost. -function RailQuickReactions({ onReaction }: RailQuickReactionsProps) { - const mx = useMatrixClient(); - const recent = useRecentEmoji(mx, 3); - const items = - recent.length > 0 - ? recent.slice(0, 3).map((e) => ({ unicode: e.unicode, shortcode: e.shortcode })) - : RAIL_DEFAULT_REACTIONS; - return ( +// Hover action-rail icons — thin stroke-outline style matching the composer's +// StreamComposerIcons (Dawn canon), replacing folds' stock filled glyphs so the +// rail reads distinct from upstream Cinny. folds Icon wraps these in +// ``, so each returns just the shapes. +const RailIcons = { + Smile: () => ( <> - {items.map((emoji) => ( - onReaction(emoji.unicode, emoji.shortcode)} - > - {emoji.unicode} - - ))} + + - ); -} + ), + Reply: () => ( + <> + + + + ), + Thread: () => ( + <> + + + + ), + Edit: () => ( + + ), + More: () => ( + + ), +}; export const MessageAllReactionItem = as< 'button', @@ -954,14 +978,6 @@ const MessageInner = as<'div', MessageProps>(
- {canSendReaction && ( - { - const evtId = mEvent.getId(); - if (evtId) onReactionToggle(evtId, key, shortcode); - }} - /> - )} {canSendReaction && ( ( radii="300" aria-pressed={!!emojiBoardAnchor} > - + )} @@ -1008,7 +1024,7 @@ const MessageInner = as<'div', MessageProps>( size="300" radii="300" > - + )} {!isThreadReply && !hideThreadReplyAffordance && ( @@ -1019,7 +1035,7 @@ const MessageInner = as<'div', MessageProps>( size="300" radii="300" > - + )} {canEditEvent(mx, mEvent) && onEditId && ( @@ -1029,7 +1045,7 @@ const MessageInner = as<'div', MessageProps>( size="300" radii="300" > - + )} ( onClick={handleOpenMenu} aria-pressed={!!menuAnchor} > - + @@ -1540,7 +1556,7 @@ export const Event = as<'div', EventProps>( onClick={handleOpenMenu} aria-pressed={!!menuAnchor} > - + diff --git a/src/app/features/room/message/styles.css.ts b/src/app/features/room/message/styles.css.ts index 1c21e670..4590360d 100644 --- a/src/app/features/room/message/styles.css.ts +++ b/src/app/features/room/message/styles.css.ts @@ -11,10 +11,13 @@ export const MessageOptionsBase = style([ position: 'absolute', // Hug the message's top-right corner with a small overlap instead of the old // -30px overhang that detached the rail from the row and clipped at the - // timeline top. (First iteration — exact offset is easy to nudge.) + // timeline top. (Exact offset is easy to nudge.) top: toRem(-14), right: config.space.S200, - zIndex: 1, + // Above the message content/bubble (which sits at zIndex 2 in layout.css.ts) + // so the rail never renders behind the bubble — was the "за баблом" bug on + // native where the rail overlaps the bubble's top-right. + zIndex: 5, }, ]); export const MessageOptionsBar = style([