From 41af8f955e7de06b25aeff668ea2e2a94d1bf007 Mon Sep 17 00:00:00 2001
From: Chris Troutner <chris.troutner@gmail.com>
Date: Fri, 18 Sep 2026 07:31:13 -0700
Subject: [PATCH] Spec topics table layout

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.
---
 .../specs/topics-table-layout.feature         | 37 +++++++++++++++++++
 specs/feature-backlog.md                      |  9 ++++-
 2 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 psf-memo-client/specs/topics-table-layout.feature

diff --git a/psf-memo-client/specs/topics-table-layout.feature b/psf-memo-client/specs/topics-table-layout.feature
new file mode 100644
index 0000000..eb4f4f5
--- /dev/null
+++ b/psf-memo-client/specs/topics-table-layout.feature
@@ -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
diff --git a/specs/feature-backlog.md b/specs/feature-backlog.md
index 6cc37e5..db54fb5 100644
--- a/specs/feature-backlog.md
+++ b/specs/feature-backlog.md
@@ -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