Frontend Pages — Thread Listing, Detail, Create & Profile

[mrboxs]

Summary

All backend APIs are complete (Threads CRUD, Replies CRUD, Votes, Me). Auth + onboarding flow is fully wired (Better Auth with GitHub OAuth, auto-generated temp username for OAuth users, onboarding page for username selection).

The remaining work is frontend pages. The home page (_app/index.tsx) is still the TanStack Start boilerplate. No thread detail, create thread, or user profile pages exist yet.

---

Status Overview

✅ Done

• Backend: Threads (CRUD + list + top), Replies (CRUD + nested), Votes, Me
• Auth: Better Auth + GitHub OAuth + email/password
• Auth flow: sign-in page → OAuth callback → temp username auto-generated → onboarding page → redirect to home
• DB schemas: all tables with correct columns, indexes, relations
• Shared DTOs & constants: all input/output schemas via @trid/shared
• oRPC client utils: threadORPC, replyORPC, voteORPC via @orpc/tanstack-query
• Layout: Root, Auth layout, App layout (sidebar + navbar)
• UI components: button, card, sidebar, input-group, field, spinner, sonner, skeleton, theme provider

❌ Not Started (this issue)

• Home page (thread listing)
• Thread detail page
• Create thread page
• User profile page

---

1. Home Page — Thread Listing (_app/index.tsx)

Route: / (existing _app/index.tsx, replace boilerplate content)

API: threadORPC.list.useInfiniteQuery() (or orpc.threads.list)

Input schema: listThreadsInputSchema:

{ feed: "discover" | "popular" | "latest", limit: number, cursor?: string }

Output schema: listThreadsOutputSchema:

{ items: Array<{ id, author, title, slug, status, votesScoresCount, repliesCount, lastActivityAt, createdAt, uservote }>, nextCursor: string | null }

Requirements

• Feed tabs: 3 tabs — Discover, Popular, Latest
  • Active tab highlighted, click to switch feed
  • URL search param ?feed=discover for shareable state
  • Default: discover
• Thread cards: Each card shows:
  • Author avatar + name + username
  • Title (link to thread detail)
  • Vote count with upvote/downvote buttons (if authenticated)
  • Reply count
  • Relative time ("2h ago", "3d ago")
• Cursor pagination: "Load more" button at bottom
  • Loading skeleton while fetching
  • "No more threads" when nextCursor is null
• Empty state: "No threads yet" with CTA to create first thread
• Error state: Retry button on fetch failure
• Vote interaction: Click upvote/downvote → voteORPC.thread.useMutation() → optimistically update UI

Key oRPC hooks

const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
  threadORPC.list.useInfiniteQuery(
    { feed: selectedFeed, limit: 20 },
    { getNextPageParam: (lastPage) => lastPage.nextCursor },
  )

const voteMutation = voteORPC.thread.useMutation()

Thread card component

Props: thread: ThreadListItem

• Link to /$slug for title
• Author row (avatar + name + username + time)
• Vote button group (upvote/downvote count)
• Reply count icon

---

2. Thread Detail Page

Route: /_app/threads/$slug (new file: apps/web/src/routes/_app/threads/$slug.tsx)

API:

• orpc.threads.get({ slug }) → threadDetailOutputSchema
• orpc.replies.list({ threadSlug, sort, limit, cursor }) → listRepliesOutputSchema

Requirements

• Thread content: Full thread view with title, author info, content body, timestamps
• Vote buttons: Upvote/downvote on thread + each reply
• Reply count + sort dropdown: Sort by Top / Latest / Oldest (?sort=top)
• Reply list:
  • Each reply shows author, content, vote count, timestamp
  • Nested replies (depth-based indentation)
  • "Load more" pagination
  • Reply form at bottom (authenticated only)
• Create reply form: Textarea + submit button
• Thread actions: Edit/delete buttons if current user is author
• 404 handling: "Thread not found" when slug doesn't exist
• Loading state: Skeleton loader
• Delete confirmation: Dialog/modal before soft-delete

Key oRPC hooks

const { data: thread } = orpc.threads.get.useQuery({ slug })

const { data: replies, fetchNextPage } =
  replyORPC.list.useInfiniteQuery(
    { threadSlug: slug, sort: selectedSort, limit: 20 },
    { getNextPageParam: (lastPage) => lastPage.nextCursor },
  )

const createReplyMutation = replyORPC.create.useMutation()
const voteMutation = voteORPC.reply.useMutation()

---

3. Create Thread Page

Route: /_app/threads/new (new file: apps/web/src/routes/_app/threads/new.tsx)

Protected: Redirect to sign-in if not authenticated

API: orpc.threads.create({ title, content })

Requirements

• Form: Title input + content textarea (markdown or plain text)
• Validation: Title 1-300 chars, content min 1 char
• Submit: orpc.threads.create.useMutation() → on success, navigate to /$slug
• Error handling: Show validation errors inline, API errors as toast
• Cancel/back button: Navigate back to home
• Loading state: Disable submit button + spinner while submitting

---

4. User Profile Page

Route: /_app/users/$username (new file: apps/web/src/routes/_app/users/$username.tsx)

API:

• orpc.me for current user's own profile
• orpc.threads.list({ feed: "latest", author: username }) for user's threads

Requirements

• Profile header: Avatar, name, username, bio, pronouns, location, join date
• Banner image if set
• User's threads tab: List of threads by this user
• Edit profile button (only if current user's own profile)
  • Navigate to settings page
• Loading & error states
• 404 handling for non-existent username

---

5. Polish & Cross-cutting

• Mobile responsive: All pages should work on mobile (sidebar drawer, full-width content)
• Relative time: Consistent time display across all pages (use @trid/shared/utils if exists, or a simple helper)
• Optimistic updates for votes to feel instant
• Error boundaries for each route
• Empty states for lists with zero items
• Keyboard accessibility for vote buttons, reply forms, navigation

---

Implementation Order

1. Home page — Thread Listing (highest priority, landing page)
2. Thread Detail Page (core user flow)
3. Create Thread Page (content creation)
4. User Profile Page (identity & history)
5. Polish & cross-cutting fixes

Each page is independently buildable since the backend is fully ready.

---

Tech Notes

• Use @orpc/tanstack-query hooks (threadORPC.list.useInfiniteQuery(), etc.) — already configured in apps/web/src/libs/orpc.ts
• Use TanStack Router file-based routes — create new files under apps/web/src/routes/_app/
• Use @trid/ui components (Button, Card, Skeleton, etc.)
• Use authClient from #/libs/auth-client for auth actions
• Use sonner toast for notifications
• TanStack Router search params for feed/sort/cursor state in URL
• Vote mutations should cache-invalidate the relevant thread query after success

[mrboxs]

This was generated by AI during triage.

Progress Update - 2026-05-27

Latest pushed commit: af27f40 feat: add infinite scroll, empty/error/loading states, and anonymous vote gating to thread list

Related frontend commits now on feat/ui:

• 530e390 - initial thread listing route/components with infinite query support
• 2fd0a9c - optimistic thread vote updates with React Query cache handling
• 8d4a115 - fixed thread vote field shape after uservote -> userVote refactor
• af27f40 - infinite scroll pagination, empty/error/loading states, anonymous vote handling

Current Status

Done / In Progress

• Home route exists at apps/web/src/routes/_app/index.tsx
• Home route validates feed search param and defaults to discover
• Home route preloads thread list data through queryClient.ensureInfiniteQueryData
• Thread list UI exists in ThreadsListCard
• Thread card UI exists in ThreadCard
• Thread card renders author, relative time, title, vote score, reply count
• Vote buttons call voteORPC.thread mutation
• Optimistic vote cache updates list/top/detail cached thread data
• Vote mutation invalidates thread list, top thread list, and thread detail query families after settle
• Backend/shared/frontend thread vote field is now consistently userVote
• Regression coverage rejects old thread output field uservote
• Add "Load more" infinite scroll via useInView intersection observer
• Add empty state when there are zero threads (ThreadListEmptyState)
• Add route/query error state with retry (ThreadListRouteErrorState, ThreadListPaginationError)
• Add skeleton/loading state polish (ThreadListSkeleton, ThreadListPendingState, ThreadListRoutePendingState, ThreadListLoadingMoreState)
• Gate vote/action buttons for anonymous users (redirect to /sign-in)

Still Missing From Home Listing

• Wire title links to the future thread detail route instead of linking to .
• Decide whether the homepage needs a separate Top view, or whether Top only belongs to a later route/section
• Re-check mobile layout spacing once pagination and empty/error states exist

Notes

• The issue body still mentions output field uservote; current contract/UI should use userVote.
• The current cache invalidation shape is good: invalidating threads.list and threads.top query families is enough. We do not need separate invalidation calls for discover, popular, latest, or each top period unless we later choose to optimize network traffic more aggressively.
• Optimistic updates are correct for instant feedback, but they should not be the only mechanism because votes can change ordering/page membership in sorted feeds.
• The first step of "Finish Home Listing UX" is now complete. Next step is wiring title/reply links once the thread detail route exists.

Suggested Next Implementation Order

1. Create Thread Detail Route

   • Add apps/web/src/routes/_app/threads/$slug.tsx.
   • Load threads.get and replies.list.
   • Update ThreadCard title/reply interactions to link to this route.

2. Build Reply Reading Flow

   • Reply sort search param: top | latest | oldest.
   • Render nested replies with depth indentation.
   • Add reply pagination.

3. Add Reply Creation + Reply Votes

   • Auth-only reply form.
   • Optimistic/invalidation handling for reply create and reply vote.
   • Keep thread detail counters in sync.

4. Create Thread Page

   • Add apps/web/src/routes/_app/threads/new.tsx.
   • Protected create form.
   • Navigate to created thread detail on success.

5. Profile Page

   • Confirm backend/API support first; the current issue body assumes user profile + user-thread listing APIs that may not exist yet.
   • If not available, split backend support into a separate issue before building UI.

Recommended First Task

Create the Thread Detail Route next. It is the blocking dependency for wiring thread card title/reply links and completing the core user flow.