feat: add tweet detail page

2026-07-14 00:50:08 +09:00
parent 8e6ff70d81
commit da72094e07
9 changed files with 272 additions and 30 deletions
@@ -80,6 +80,21 @@ describe('PostCard', () => {
    expect(screen.getByText('@yuta').closest('a')).toBeNull()
  })

+  it('links deliberately to the internal detail page', () => {
+    render(<PostCard post={richPost} />)
+
+    expect(
+      screen.getByRole('link', { name: '詳細・スレッド' }),
+    ).toHaveAttribute('href', '/status/123')
+  })
+
+  it('marks the focal post without linking to its current page', () => {
+    render(<PostCard current post={{ ...richPost, quotedTweet: undefined }} />)
+
+    expect(screen.queryByRole('link', { name: '詳細・スレッド' })).toBeNull()
+    expect(screen.getByRole('article')).toHaveClass('current-post')
+  })
+
  it('collapses a malformed optional timestamp without losing the post', () => {
    const { container } = render(
      <PostCard post={{ ...richPost, createdAt: 'not-a-date' }} />,
@@ -41,15 +41,19 @@ function formattedTime(createdAt?: string): string | undefined {
 export function PostCard({
  post,
  quoted = false,
+  current = false,
 }: {
  post: Post
  quoted?: boolean
+  current?: boolean
 }) {
  const time = formattedTime(post.createdAt)
  const original = `https://x.com/${encodeURIComponent(post.author.username)}/status/${encodeURIComponent(post.id)}`

  return (
-    <article className={quoted ? 'post quote' : 'post'}>
+    <article
+      className={quoted ? 'post quote' : current ? 'post current-post' : 'post'}
+    >
      <header className="post-header">
        {post.author.profileImageUrl ? (
          <img
@@ -86,6 +90,11 @@ export function PostCard({
            返信 {post.replyCount ?? 0}　再投稿 {post.retweetCount ?? 0}　いいね{' '}
            {post.likeCount ?? 0}
          </span>
+          {!current ? (
+            <a href={`/status/${encodeURIComponent(post.id)}`}>
+              詳細・スレッド
+            </a>
+          ) : null}
          <a href={original} rel="noreferrer noopener" target="_blank">
            元の投稿を開く
          </a>
@@ -154,6 +154,90 @@ describe('PostFeed', () => {
    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
  })

+  it('renders the focal post once above its deduplicated conversation', () => {
+    usePostFeed.mockReturnValue({
+      ...queryResult(),
+      data: {
+        pages: [
+          {
+            focalPost: post('2'),
+            conversationId: '1',
+            nextCursor: 'next',
+            tweets: [post('1'), post('2')],
+          },
+          {
+            conversationId: '1',
+            tweets: [post('2'), post('3')],
+          },
+        ],
+        pageParams: [undefined, { cursor: 'next', conversationId: '1' }],
+      },
+    } as never)
+
+    const { container } = render(
+      <PostFeed request={{ kind: 'thread', tweetId: '2' }} />,
+    )
+
+    expect(screen.getByText('表示中の投稿')).toBeVisible()
+    expect(screen.getAllByText('post-2')).toHaveLength(1)
+    expect(screen.getAllByRole('article')).toHaveLength(3)
+    expect(container.querySelector('.current-post')).toBeInTheDocument()
+  })
+
+  it('keeps the focal post visible when there are no other posts', () => {
+    usePostFeed.mockReturnValue({
+      ...queryResult(),
+      data: {
+        pages: [
+          {
+            focalPost: post('2'),
+            conversationId: '1',
+            tweets: [post('2')],
+          },
+        ],
+        pageParams: [undefined],
+      },
+    } as never)
+
+    render(<PostFeed request={{ kind: 'thread', tweetId: '2' }} />)
+
+    expect(screen.getByText('post-2')).toBeVisible()
+    expect(screen.getByText('会話にほかの投稿はありません。')).toBeVisible()
+  })
+
+  it('keeps the focal post and conversation across a later-page error', () => {
+    usePostFeed.mockReturnValue({
+      ...queryResult(),
+      data: {
+        pages: [
+          {
+            focalPost: post('2'),
+            conversationId: '1',
+            nextCursor: 'next',
+            tweets: [post('1'), post('2')],
+          },
+        ],
+        pageParams: [undefined],
+      },
+      error: new PostLoadError({
+        code: 'upstream',
+        message: 'X から投稿を取得できませんでした。',
+        retryable: true,
+      }),
+      hasNextPage: true,
+      isError: true,
+      isFetchNextPageError: true,
+    } as never)
+
+    render(<PostFeed request={{ kind: 'thread', tweetId: '2' }} />)
+
+    expect(screen.getByText('post-2')).toBeVisible()
+    expect(screen.getByText('post-1')).toBeVisible()
+    expect(screen.getByRole('alert')).toHaveTextContent(
+      '続きの投稿を取得できませんでした。',
+    )
+  })
+
  it('retries an initial retryable error with refetch', () => {
    const refetch = vi.fn().mockResolvedValue(undefined)
    usePostFeed.mockReturnValue({
@@ -1,12 +1,33 @@
 import { useEffect, useRef } from 'react'
-import { flattenPostPages } from '../page'
+import {
+  flattenConversationPages,
+  flattenPostPages,
+  focalPostFromPages,
+} from '../page'
+import type { Post } from '../types'
 import { type FeedRequest, PostLoadError, usePostFeed } from '../use-post-feed'
 import { PostCard } from './post-card'

+function FocalPost({ post }: { post: Post }) {
+  return (
+    <section aria-labelledby="focal-post-label" className="focal-post">
+      <p className="focal-label" id="focal-post-label">
+        表示中の投稿
+      </p>
+      <PostCard current post={post} />
+    </section>
+  )
+}
+
 export function PostFeed({ request }: { request: FeedRequest | undefined }) {
  const query = usePostFeed(request)
  const sentinel = useRef<HTMLDivElement>(null)
-  const posts = query.data ? flattenPostPages(query.data.pages) : []
+  const pages = query.data?.pages ?? []
+  const focalPost =
+    request?.kind === 'thread' ? focalPostFromPages(pages) : undefined
+  const posts = focalPost
+    ? flattenConversationPages(pages, focalPost.id)
+    : flattenPostPages(pages)

  useEffect(() => {
    if (
@@ -62,31 +83,43 @@ export function PostFeed({ request }: { request: FeedRequest | undefined }) {
    )
  }
  if (posts.length === 0 && !query.hasNextPage) {
-    return <p className="state">条件に一致する投稿はありません。</p>
+    return (
+      <>
+        {focalPost ? <FocalPost post={focalPost} /> : null}
+        <p className="state">
+          {focalPost
+            ? '会話にほかの投稿はありません。'
+            : '条件に一致する投稿はありません。'}
+        </p>
+      </>
+    )
  }

  return (
-    <section aria-live="polite" className="feed">
-      {posts.map((post) => (
-        <PostCard key={post.id} post={post} />
-      ))}
-      <div aria-hidden="true" ref={sentinel} />
-      {query.isFetchingNextPage ? (
-        <div className="loading-rail" role="status">
-          次の投稿を取得しています…
-        </div>
-      ) : null}
-      {query.isFetchNextPageError ? (
-        <div className="state" role="alert">
-          <p>続きの投稿を取得できませんでした。</p>
-          <button onClick={() => void query.fetchNextPage()} type="button">
-            再試行
-          </button>
-        </div>
-      ) : null}
-      {!query.hasNextPage ? (
-        <p className="state">これ以上の投稿はありません。</p>
-      ) : null}
-    </section>
+    <>
+      {focalPost ? <FocalPost post={focalPost} /> : null}
+      <section aria-live="polite" className="feed">
+        {posts.map((post) => (
+          <PostCard key={post.id} post={post} />
+        ))}
+        <div aria-hidden="true" ref={sentinel} />
+        {query.isFetchingNextPage ? (
+          <div className="loading-rail" role="status">
+            次の投稿を取得しています…
+          </div>
+        ) : null}
+        {query.isFetchNextPageError ? (
+          <div className="state" role="alert">
+            <p>続きの投稿を取得できませんでした。</p>
+            <button onClick={() => void query.fetchNextPage()} type="button">
+              再試行
+            </button>
+          </div>
+        ) : null}
+        {!query.hasNextPage ? (
+          <p className="state">これ以上の投稿はありません。</p>
+        ) : null}
+      </section>
+    </>
  )
 }