Redesign threads #243

New Issue

Open

opened 2026-04-22 18:19:24 +00:00 by hodlbod · 9 comments

hodlbod commented 2026-04-22 18:19:24 +00:00

Owner

Copy Link

Copy Source

Threads are intended to be linear, non-nested reply structures, something similar to old-school forums. The current view collapses old comments, and is sort of hard to read.

Threads are intended to be linear, non-nested reply structures, something similar to old-school forums. The current view collapses old comments, and is sort of hard to read.

hodlbod added this to the Current milestone 2026-04-22 18:19:24 +00:00

hodlbod added the design label 2026-04-22 18:19:24 +00:00

0xNaman commented 2026-04-23 01:04:21 +00:00

Copy Link

Copy Source

Hi @hodlbod , I would like to work on this if it's alright?

Hi @hodlbod , I would like to work on this if it's alright?

0xNaman commented 2026-04-23 13:34:13 +00:00

Copy Link

Copy Source

Gave this a go, Right now the root post and every reply use the same box card with a shadow, so the page looks like a stack of identical boxes and it's hard to tell which post is the topic vs. a response. A few changes that should help:

1. Make the root post look different from replies. A purple accent stripe on the left, an "OP" tag, and a larger title so you can spot the topic right away.

2. Drop the card/shadow on replies, just using a thin line between each reply, and a small 1, 2 ... number next to each one makes it easier to scan and link a specific reply.

3. Added a reply button to each reply as well so conversation can point back to specific message.

4. Keep the thread title, reply count and room always visible at the top when you scroll so not to lose context

@hodlbod Let me know if you like this direction.

Gave this a go, Right now the root post and every reply use the same box card with a shadow, so the page looks like a stack of identical boxes and it's hard to tell which post is the topic vs. a response. A few changes that should help: **1. Make the root post look different from replies.** A purple accent stripe on the left, an "OP" tag, and a larger title so you can spot the topic right away. **2. Drop the card/shadow on replies**, just using a thin line between each reply, and a small 1, 2 ... number next to each one makes it easier to scan and link a specific reply. **3. Added a reply button to each reply** as well so conversation can point back to specific message. **4. Keep the thread title, reply count and room always visible at the top** when you scroll so not to lose context  @hodlbod Let me know if you like this direction.

Threads detail view — forum redesign.png

218 KiB

hodlbod commented 2026-04-27 15:03:21 +00:00

Author

Owner

Copy Link

Copy Source

This looks good, but I think it's a little too close to a reddit metaphor. Here are some elements that might help:

• Pagination — at the bottom, allow users to skip to the first/last page, next/previous, or click a numbered page
• I think the root post probably can just be presented as the first comment on the thread — so actually going the opposite direction from making it more prominent

— I'm shooting for something like phpbb, but not horribly ugly 😅

This looks good, but I think it's a little too close to a reddit metaphor. Here are some elements that might help: - Pagination — at the bottom, allow users to skip to the first/last page, next/previous, or click a numbered page - I think the root post probably can just be presented as the first comment on the thread — so actually going the opposite direction from making it more prominent  — I'm shooting for something like phpbb, but not horribly ugly 😅

0xNaman commented 2026-04-28 18:30:02 +00:00

Copy Link

Copy Source

Thanks for the feedback! I took another shot at it. OP is now just post #1, only marked by a small OP badge and the room pill. Each post has a meta strip with timestamp + (#Number ↗ permalink) for the phpbb row header feel. Can drop the number next to the reply if feels duplicated. Also swapped the per-post action button to the emoji/... trio before like on chat messages.

Pagination is shown as two states stacked: Page 1 of 1 (truthful to a 5-post thread) and Page 3 of 7 (mocked, to show the rest).

@hodlbod Let me know your thoughts.

Thanks for the feedback! I took another shot at it. OP is now just post #1, only marked by a small OP badge and the room pill. Each post has a meta strip with timestamp + (#Number ↗ permalink) for the phpbb row header feel. Can drop the number next to the reply if feels duplicated. Also swapped the per-post action button to the emoji/... trio before like on chat messages. Pagination is shown as two states stacked: Page 1 of 1 (truthful to a 5-post thread) and Page 3 of 7 (mocked, to show the rest).  @hodlbod Let me know your thoughts.

Threads detail view — v2 forum redesign.png

207 KiB

hodlbod commented 2026-04-28 20:10:34 +00:00

Author

Owner

Copy Link

Copy Source

Much better, thanks! I do feel that the post numbers on the left are redundant, maybe we could go further and imitate phpbb by putting the profile information in that area? Only on desktop of course, mobile should probably remain stacked.

Much better, thanks! I do feel that the post numbers on the left are redundant, maybe we could go further and imitate phpbb by putting the profile information in that area? Only on desktop of course, mobile should probably remain stacked.

0xNaman commented 2026-04-29 13:18:38 +00:00

Copy Link

Copy Source

Oh yes great idea! The post numbers are gone now and that space holds the profile info: avatar, name, handle, post count in this space, and join date. OP badge sits in there too for post #1.

I think this works well because each post becomes a self-contained unit you can scan top-to-bottom: who it is, when it was posted, what they said. You don't have to jump back to a sidebar to figure out who's talking and the page reads more like a conversation between people instead of a list of comments.

Thoughts? @hodlbod

Oh yes great idea! The post numbers are gone now and that space holds the profile info: avatar, name, handle, post count in this space, and join date. OP badge sits in there too for post #1. I think this works well because each post becomes a self-contained unit you can scan top-to-bottom: who it is, when it was posted, what they said. You don't have to jump back to a sidebar to figure out who's talking and the page reads more like a conversation between people instead of a list of comments.  Thoughts? @hodlbod

Threads detail view — v3 profile column.png

216 KiB

hodlbod commented 2026-04-29 15:44:19 +00:00

Author

Owner

Copy Link

Copy Source

Yeah, I think this is great. Just some very small nitpicks now:

• The space badge at the top I think is redundant
• It would make sense to keep the OP badge on all posts by the OP
• I don't know if we can really do number of posts/joined date without additional infrastructure, but keep them in the mockup

Yeah, I think this is great. Just some very small nitpicks now: - The space badge at the top I think is redundant - It would make sense to keep the OP badge on all posts by the OP - I don't know if we can really do number of posts/joined date without additional infrastructure, but keep them in the mockup

👍 1

0xNaman commented 2026-04-30 05:57:47 +00:00

Copy Link

Copy Source

Great, makes sense! Made the mockup with the refinements

Also pulling in the mobile sample, just one post collapsed to the stacked layout to show how it falls back at phone width.

Great, makes sense! Made the mockup with the refinements  Also pulling in the mobile sample, just one post collapsed to the stacked layout to show how it falls back at phone width. 

Threads detail view — v3 profile column.png

207 KiB

mobile-sample.png

14 KiB

👍 1

hodlbod added dev and removed design labels 2026-04-30 15:26:15 +00:00

hodlbod commented 2026-05-11 18:37:46 +00:00

Author

Owner

Copy Link

Copy Source

Another nice reference:

https://www.figma.com/design/A1bicqAMjlE4F4OC3ViR3G/Squalk?node-id=0-1&p=f&t=P18KGg61lX6OSY3T-0

Another nice reference: https://www.figma.com/design/A1bicqAMjlE4F4OC3ViR3G/Squalk?node-id=0-1&p=f&t=P18KGg61lX6OSY3T-0

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

dev

master

hodlbod/sandbox

video-demo

1.8.0

1.7.4

1.7.3

1.7.2

1.7.1

1.7.0

1.6.5

1.6.4

1.6.3

1.6.2

1.6.1

1.6.0

1.5.3

1.5.2

1.5.1

1.5.0

1.4.1

1.4.0

1.3.1

1.3.0

1.2.5

1.2.4

1.2.3

1.2.2

1.2.1

1.2.0

1.1.1

1.1.0

0.1.1

1.0.4

1.0.3

1.0.2

1.0.1

1.0.0

0.2.14

0.2.13

0.2.12

0.2.11

0.2.10

0.2.9

0.2.8

0.2.7

0.2.6

0.2.5

0.2.4

0.2.3

0.2.2

0.2.1

0.2.0

0.1.0

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 dev

Milestone

No items

No Milestone Current

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

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: coracle/flotilla#243