chore: redesign threads as a linear phpBB-style forum view #300
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: coracle/flotilla#300
Reference in New Issue
Block a user
Delete Branch "userAdityaa/flotilla:243-redesign-threads"
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?
Summary
Implements the approved thread redesign from #243. The thread detail view replaces stacked cards with a flat, phpBB-style layout: each post shows profile info, OP badges, per-post replies, reactions/actions, and #post-N permalinks, with pagination for longer threads. The header keeps the title, reply count, and room visible while scrolling. The thread list groups topics by room as boards, with uncategorized threads under General.
Screenshots of the changes
d74d07ab39tofe9fef60b5@hodlbod, could you please take a look at the design for now? I'll clean up and refactor the code afterward 🙂
I think the mockups look great, let me know when the code is ready to review.
fe9fef60b5to71071b54c6@hodlbod, this should be ready for an initial review now.
@@ -23,0 +25,4 @@leading,title,action,hideRelay = false,What's the reasoning behind this? I think having the relay visible is probably still important context
hideRelaywas only to avoid a cramped/tall mobile header after adding the two-line thread title (title + reply count/room).but yes, we have to keep the relay context, I shall revert it back.
Looks like this:
Yeah, that is kind of cramped. What about
meta.spaces.coracle.social * #Development * 4 replies? But that wouldn't work well on mobile. Hmmm. We can punt it for later, but let's align the space icon to the top.@@ -0,0 +16,4 @@lastActive: Map<string, number>}const {url, h, threads, replyCounts, lastActive}: Props = $props()Instead of threading replyCounts and lastActive through, create a new ThreadBoardItem which calculates them locally. You can derive stuff from the repository using one of the
deriveEventsutilities with anEtag. This shouldn't cause performance problems compared to iterating over all comments.@@ -0,0 +28,4 @@const {url, threadId, event, number, threadPubkey, onReply}: Props = $props()const relays = removeUndefined([url])url should never be undefined right?
@@ -0,0 +38,4 @@const copyPermalink = () => {const path = makeSpacePath(url, "threads", threadId)const link = `${window.location.origin}${path}#post-${number}`origin=localhost on android, use PLATFORM_URL
@@ -45,0 +75,4 @@if (aOrder !== bOrder) return aOrder - bOrderreturn a.localeCompare(b)})sortBy?71071b54c6toae209615d9View command line instructions
Checkout
From your project repository, check out a new branch and test the changes.