feat(messaging): Improve message bubble UI and add delivery status action#4330
Conversation
…tion
This commit introduces several UI enhancements to the messaging feature and adds a new action to view message delivery status.
### Key Changes:
- **Message Bubble Shape:**
- The logic for `getMessageBubbleShape` has been simplified to create a more standard chat bubble appearance. The corners are now less rounded (`8.dp` instead of `16.dp`), and the logic for squaring off corners based on adjacent messages has been removed, resulting in a cleaner look.
- **Message Delivery Status:**
- A new item has been added to the message actions bottom sheet that displays the delivery status (e.g., "Delivered to mesh", "Acknowledged") for sent messages.
- Tapping this item will reveal more details (though the full details screen is not part of this change).
- The status icon in the message bubble is no longer clickable; status details are now accessed through the long-press menu.
- **UI and Layout Refinements:**
- Font size for message text has been changed to `bodyMedium`.
- Padding and alignment have been adjusted for `MessageItem`, `NodeChip`, and other components to improve spacing and visual consistency.
- `MessageActionsBottomSheet` composable has been removed and its content is now directly integrated, simplifying the component structure.
Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit moves the `MessageStatusIcon` to appear before the timestamp in the message item layout. It also adjusts the padding around the icon and the timestamp for better alignment and visual consistency. Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4330 +/- ##
=====================================
Coverage 0.00% 0.00%
=====================================
Files 3 3
Lines 28 28
Branches 8 8
=====================================
Misses 28 28 ☔ View full report in Codecov by Sentry. |
|
I'm not sure if this PR is responsible but it was the last one I could find related to message UI changes. If this should be opened up separately elsewhere then please let me know. I recently updated to the latest build available via Google (2.7.12 (29319915)) and in entirely my opinion, the message UI has deteriorated since 2.7.11. At least on my device (essentially stock Android (Graphene OS) on Pixel 9a) it now looks cluttered and awkward.
There are so many elements clustered together now, what with the node short name bubbles, the message bubbles that may or may not have quote "bars", and the date/time text that is the same colour and has barely any size difference to the message text that looks especially bad on short messages. In addition to that there is not enough padding and the overall text size is too small. If the goal is compactness then I'd suggest a Discord-like look to messages, if the goal is familiar mobile messaging then more cues should be taken from Telegram, WhatsApp etc with regards to padding and design of elements. Unoriginal? Perhaps. But on mobile usability is key :). |
Design is always an iterative process, there's always room for improvement, and change is hard. This is a step towards improvement, give it some time to sink in and provide concrete examples of feedback and suggested changes in a feature request. |
Sure thing, and I appreciate your efforts to improving the UI despite it might coming across as otherwise! I have good experience when it comes to UX/UI and I'll gladly take the time to produce some mock-ups in a feature request. Minor tweaks to padding and text is really all that's needed really, but sometimes subtle changes like that can make a big difference. |
This introduces several UI enhancements to the messaging feature and adds a new action to view message delivery status.
Key Changes:
Message Bubble Shape:
getMessageBubbleShapehas been simplified to create a more standard chat bubble appearance. The corners are now less rounded (8.dpinstead of16.dp), and the logic for squaring off corners based on adjacent messages has been removed, resulting in a cleaner look.Message Delivery Status:
UI and Layout Refinements:
bodyMedium.MessageItem,NodeChip, and other components to improve spacing and visual consistency.MessageActionsBottomSheetcomposable has been removed and its content is now directly integrated, simplifying the component structure.