psf/psf-memo
1
0
Fork 0
mirror of https://github.com/Permissionless-Software-Foundation/psf-memo.git synced 2026-09-21 16:52:01 -07:00
Code Issues Packages Projects Releases Wiki Activity

Spec topics table layout

Browse Source 
Require the topics page to render a react-bootstrap Table with aligned
columns, a header row, linked rows, and horizontal scroll on narrow screens.

By specifier.
This commit is contained in:
Chris Troutner
2026-09-18 07:31:13 -07:00
parent 17d2afff48
commit 41af8f955e
2 changed files with 45 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
psf-memo-client/specs/topics-table-layout.feature
+37
View File
@@ -0,0 +1,37 @@
# Scenarios: Topics Table Layout - 1, Topics Table Layout - 2, Topics Table Layout - 3, Topics Table Layout - 4
#
# The topics page renders topics in a react-bootstrap Table so the four columns
# line up across rows. The header row labels the columns; each body row carries
# the topic name, the relative-time label, the post count, and the follower
# count in that order, so a value never drifts into another column. Rows stay
# navigable to the topic feed, and the table scrolls horizontally when the four
# columns do not fit on a narrow screen.
Feature: Topics Table Layout
Scenario: Topics Table Layout - 1 the topics table labels its four columns
Given the psf-memo-db API serves a topic named "bitcoin" with 5 posts
When I open the topics page
Then the topics table has the column headers "Topic", "Most recent post", "Posts", "Followers"
Scenario Outline: Topics Table Layout - 2 each topic's fields appear in the matching columns
Given the current time is 1800000000000
And the psf-memo-db API serves a topic named "<room>" with <postCount> posts
And the topic "<room>" has <followerCount> followers
And the topic "<room>" was last posted at <lastSeen>
When I open the topics page
Then the topics table row for "<room>" has the cells "<displayName>", "<label>", "<displayPostCount> posts" and "<displayFollowerCount> followers"
Examples:
| room | postCount | followerCount | lastSeen | displayName | label | displayPostCount | displayFollowerCount |
| bitcoin | 5 | 3 | 1799996400000 | #bitcoin | 1 hour ago | 5 | 3 |
| cash | 12 | 8 | 1799827200000 | #cash | 2 days ago | 12 | 8 |
Scenario: Topics Table Layout - 3 a table row links to the topic feed
Given the psf-memo-db API serves a topic named "bitcoin" with 5 posts
When I open the topics page
Then the topics table links the topic "bitcoin" to "/topics/bitcoin"
Scenario: Topics Table Layout - 4 the topics table scrolls horizontally on narrow screens
Given the psf-memo-db API serves a topic named "bitcoin" with 5 posts
When I open the topics page
Then the topics table scrolls horizontally on narrow screens
specs/feature-backlog.md
+8 -1
View File
@@ -31,7 +31,14 @@ focus is **front-end improvements** to `psf-memo-client` (the React SPA).
## In progress
_(none)_
- **Topics table layout (spec approved):** replace the topics page's flexbox
list rows with a react-bootstrap `Table` so the four columns line up. The
header labels the columns (`Topic`, `Most recent post`, `Posts`, `Followers`),
each row's cells carry the topic name (`#room`), relative-time label, post
count, and follower count in that order, rows link to the topic feed, and the
table scrolls horizontally on narrow screens. Client-only rendering. Spec:
`psf-memo-client/specs/topics-table-layout.feature`. Task
`topics-table-layout`; spec committed, handed off to coder.
## Recently completed