coracle/flotilla
1
6
Fork 24
Code Issues 42 Pull Requests 2 Actions Packages Projects 5 Releases Wiki Activity

feat(chat): fix spacing around messages #159

Merged
hodlbod merged 1 commits from theAnuragMishra/flotilla:158-message-blocks into dev 2026-04-07 16:50:54 +00:00
Conversation 6 Commits 1 Files Changed 3
+43 -16
theAnuragMishra commented 2026-04-05 11:37:15 +00:00
Contributor
Copy Link
Copy Source

This pr makes the following changes to implement a better structure for chat messages.

Add components/RoomMessageBlock.svelte to render a block header (profile picture, display name, timestamp) and
group consecutive messages from the same user.
Refactor src/app/components/RoomItem.svelte to support grouped-mode (isGrouped) and remove per-message header/spacing, keep
reactions/actions intact.
Update message feed processing in:
src/routes/spaces/[relay]/[h]/+page.svelte
src/routes/spaces/[relay]/chat/+page.svelte
to emit message-block items (respecting the existing 3-minute gap rule) and render blocks via RoomMessageBlock.

Before and After screenshots attached in that order.

image.png
image.png

This pr makes the following changes to implement a better structure for chat messages. Add components/RoomMessageBlock.svelte to render a block header (profile picture, display name, timestamp) and group consecutive messages from the same user. Refactor src/app/components/RoomItem.svelte to support grouped-mode (isGrouped) and remove per-message header/spacing, keep reactions/actions intact. Update message feed processing in: src/routes/spaces/[relay]/[h]/+page.svelte src/routes/spaces/[relay]/chat/+page.svelte to emit message-block items (respecting the existing 3-minute gap rule) and render blocks via RoomMessageBlock. Before and After screenshots attached in that order. ![image.png](/attachments/70e8aaf2-7da2-4d66-9b9e-cdf11d892f6b) ![image.png](/attachments/6f21b784-19df-4b11-a398-abab9a8d4136)
image.png
114 KiB
image.png
132 KiB
theAnuragMishra commented 2026-04-05 11:37:34 +00:00
Author
Contributor
Copy Link
Copy Source

fixes #158

fixes #158
hodlbod commented 2026-04-06 17:10:35 +00:00
Owner
Copy Link
Copy Source

This PR is sort of a mess:

  • RoomItem is never used without isGrouped, so the else is dead code and the flag is redundant
  • Message hover behavior is per group, with nested hover per message which doesn't reach all the way to the left
  • There is a bunch of unnecessary snapshotting and as any stuff

The problem you've identified is relevant, and the solution is sound, could you do another pass and tidy things up?

This PR is sort of a mess: - RoomItem is never used without isGrouped, so the else is dead code and the flag is redundant - Message hover behavior is per group, with nested hover per message which doesn't reach all the way to the left - There is a bunch of unnecessary snapshotting and `as any` stuff The problem you've identified is relevant, and the solution is sound, could you do another pass and tidy things up?
theAnuragMishra commented 2026-04-06 22:12:42 +00:00
Author
Contributor
Copy Link
Copy Source

I gave everythign a thorough look again and cleared most of the mess. Everything looks perfect but there's one problem still remaining. On the first message of the block, you would expect the action buttons to appear on hovering anywhere including the profile picture, name or pubkey, or the message content.
But since this redesign separates messages from pfp and pubkey, it currently only shows these buttons when hovering the message content.

Now I'm split and rethinking whether I should have just fixed the paddings/margins without redesigning the whole layout.

I gave everythign a thorough look again and cleared most of the mess. Everything looks perfect but there's one problem still remaining. On the first message of the block, you would expect the action buttons to appear on hovering anywhere including the profile picture, name or pubkey, or the message content. But since this redesign separates messages from pfp and pubkey, it currently only shows these buttons when hovering the message content. Now I'm split and rethinking whether I should have just fixed the paddings/margins without redesigning the whole layout.
hodlbod requested changes 2026-04-06 22:32:52 +00:00
hodlbod left a comment
Owner
Copy Link
Copy Source

Yeah, I like the refactor, but the UI is slightly worse. There's the issue you pointed out, but the context menu is in a different spot and interrupts hovering on adjacent messages. So I think it's probably best to just fix the original bug.

Yeah, I like the refactor, but the UI is slightly worse. There's the issue you pointed out, but the context menu is in a different spot and interrupts hovering on adjacent messages. So I think it's probably best to just fix the original bug.
src/app/components/RoomMessageBlock.svelte Outdated
@@ -0,0 +28,4 @@
const openProfile = () => pushModal(ProfileDetail, {pubkey: firstEvent.pubkey, url})
</script>
<div class="relative flex w-full flex-col p-2 pb-3 text-left gap-3">
hodlbod commented 2026-04-06 22:31:30 +00:00
Owner
Copy Link
Copy Source

We should remove this gap-3, it leaves dead space between messages and reduces information density

We should remove this gap-3, it leaves dead space between messages and reduces information density
theAnuragMishra marked this conversation as resolved
src/routes/spaces/[relay]/[h]/+page.svelte Outdated
@@ -253,0 +261,4 @@
elements.push({
type: "message-block",
id: currentBlock[0].id,
events: [...currentBlock],
hodlbod commented 2026-04-06 22:26:01 +00:00
Owner
Copy Link
Copy Source

currentBlock.splice(0) would be a tad better, the next line's reassignment wouldn't be necessary.

`currentBlock.splice(0)` would be a tad better, the next line's reassignment wouldn't be necessary.
theAnuragMishra marked this conversation as resolved
theAnuragMishra commented 2026-04-07 07:58:44 +00:00
Author
Contributor
Copy Link
Copy Source

Yes.. grouping into blocks was very appealing at first but after workign on the refactor for quite some time, I have come to a conclusion that leaving roomitems as individual entities is more suitable than creating blocks.

I will start from scratch and only adjust spacings and layouts keeping the same dom flow as is currently in the dev branch.

Yes.. grouping into blocks was very appealing at first but after workign on the refactor for quite some time, I have come to a conclusion that leaving roomitems as individual entities is more suitable than creating blocks. I will start from scratch and only adjust spacings and layouts keeping the same dom flow as is currently in the dev branch.
theAnuragMishra changed title from feat(chat): group consecutive messages into message blocks for more consistent dom flow and fixing weird spacing to feat(chat): fix spacing around messages 2026-04-07 09:43:54 +00:00
theAnuragMishra commented 2026-04-07 10:04:41 +00:00
Author
Contributor
Copy Link
Copy Source

I have updated the pr with a simpler fix of the layout.
The current look of the UI is attached

I have updated the pr with a simpler fix of the layout. The current look of the UI is attached
Screenshot 2026-04-07 at 15.26.19.png
479 KiB
Screenshot 2026-04-07 at 15.26.19.png
hodlbod added 1 commit 2026-04-07 16:50:41 +00:00
fix spacing around messages 5db66cc25d
hodlbod force-pushed 158-message-blocks from 76f20fffce to 5db66cc25d 2026-04-07 16:50:41 +00:00 Compare
hodlbod merged commit 7470f28f31 into dev 2026-04-07 16:50:54 +00:00
hodlbod deleted branch 158-message-blocks 2026-04-07 16:50:54 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
hodlbod
Labels
Clear labels
design
For issues related to design work. Development should be done in another issue and refer back to this one.
 dev
Issues related to development work
 easy
Issues that can be executed on by new contributors
 idea
For issues that aren't yet actionable
 priority
For issues related to high priority features and bugs
 usability
Issues that have to be validated with real live human beings.
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
hodlbod (hodlbod) mplorentz (Matt Lorentz) sakshamjain (Saksham Jain) sondreb triesap userAdityaa (Aditya Chaudhary)
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: coracle/flotilla#159
Delete Branch "theAnuragMishra/flotilla:158-message-blocks"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?