refactor: Improve Reaction UI #1490
Conversation
…elow the MessageItem within a Column, providing better visual separation. - Updates ReactionItem UI to a more modern style with borders and rounded corners. - Implements an ellipsis indicator for overflowing reactions, allowing users to expand and view more. - Changes the reaction button to a plus icon, indicating the ability to add a reaction.
Changed the reaction button border color from `onSurface` to `secondaryVariant` to improve visual clarity.
| ) | ||
| Column( | ||
| modifier = Modifier.padding(vertical = 8.dp), | ||
| verticalArrangement = Arrangement.spacedBy((-12).dp) |
There was a problem hiding this comment.
Avoid adding Columns inside LazyColumns, use spacing modifiers like padding or offset directly in ReactionRow where it's needed.
There was a problem hiding this comment.
I couldn't find much documentation on why this should be avoided - but it was easy enough to swap out for offset and zindex.
- Adds modifier parameter to ReactionRow for styling flexibility. - Removes Column and adjusts layout in MessageList for better message spacing and reaction positioning. - Adds zIndex and offset to reaction row for improved visual layering.
wow i didn't even catch that it was the row above... 😮💨 |
|
@andrekir - after a lot of trial and error I think I found a solution that avoids using a nested Column... it does however need to calculate the padding based on the message height, which feels terribly hacky to me. I never did find a very great argument against nesting a Column within a LazyColumn item. When I asked Gemini:
I'm inclined to revert to the Column implementation unless you have a different solution in mind or you're ok with this padding calculation. |
Moves the ReactionRow below the MessageItem within a Column using negative padding to provide slight overlap.
plus, indicating the ability to add a reaction.Screen_recording_20241219_104048.mp4