feat: render rich read-only posts

src/features/posts/components/post-card.test.tsx

@@ -0,0 +1,90 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import type { Post } from '../types'
+import { PostCard } from './post-card'
+
+const richPost: Post = {
+  id: '123',
+  text: '詳細 https://content.invalid/article',
+  author: {
+    username: 'yuta',
+    name: 'Yuta',
+    profileImageUrl: 'https://media.invalid/avatar.jpg',
+  },
+  createdAt: '2026-07-13T00:00:00.000Z',
+  replyCount: 3,
+  retweetCount: 4,
+  likeCount: 5,
+  media: [
+    {
+      type: 'photo',
+      url: 'https://media.invalid/photo.jpg',
+      width: 1200,
+      height: 800,
+    },
+    {
+      type: 'video',
+      url: 'https://media.invalid/video-poster.jpg',
+      videoUrl: 'https://media.invalid/video.mp4',
+    },
+    {
+      type: 'animated_gif',
+      url: 'https://media.invalid/gif-poster.jpg',
+      videoUrl: 'https://media.invalid/animation.mp4',
+    },
+  ],
+  article: { title: 'Article title', previewText: 'Preview' },
+  quotedTweet: {
+    id: '122',
+    text: 'quoted',
+    author: { username: 'other', name: 'Other' },
+  },
+}
+
+describe('PostCard', () => {
+  it('renders rich read-only content without mutation controls', () => {
+    const { container } = render(<PostCard post={richPost} />)
+
+    expect(screen.getByText('Yuta')).toBeInTheDocument()
+    expect(screen.getByText('@yuta')).toBeInTheDocument()
+    expect(container.querySelector('time')).toHaveAttribute(
+      'datetime',
+      richPost.createdAt,
+    )
+    expect(screen.getByRole('img', { name: '投稿画像' })).toBeInTheDocument()
+    expect(container.querySelectorAll('video')).toHaveLength(2)
+    expect(container.querySelectorAll('video')[0]).toHaveAttribute('controls')
+    expect(container.querySelectorAll('video')[1]).toHaveAttribute('loop')
+    expect(screen.getByText('Article title')).toBeInTheDocument()
+    expect(screen.getByText('Preview')).toBeInTheDocument()
+    expect(screen.getByText('quoted')).toBeInTheDocument()
+    expect(screen.getByText(/返信 3.*再投稿 4.*いいね 5/)).toBeInTheDocument()
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('uses deliberate safe external links without linking the author', () => {
+    render(<PostCard post={richPost} />)
+
+    const original = screen.getByRole('link', { name: '元の投稿を開く' })
+    expect(original).toHaveAttribute('href', 'https://x.com/yuta/status/123')
+    expect(original).toHaveAttribute('target', '_blank')
+    expect(original).toHaveAttribute('rel', 'noreferrer noopener')
+
+    const textLink = screen.getByRole('link', {
+      name: 'https://content.invalid/article',
+    })
+    expect(textLink).toHaveAttribute('target', '_blank')
+    expect(textLink).toHaveAttribute('rel', 'noreferrer noopener')
+    expect(screen.getByText('Yuta').closest('a')).toBeNull()
+    expect(screen.getByText('@yuta').closest('a')).toBeNull()
+  })
+
+  it('collapses a malformed optional timestamp without losing the post', () => {
+    const { container } = render(
+      <PostCard post={{ ...richPost, createdAt: 'not-a-date' }} />,
+    )
+
+    expect(screen.getByText('Yuta')).toBeInTheDocument()
+    expect(container.querySelector('time')).not.toBeInTheDocument()
+  })
+})

src/features/posts/components/post-card.tsx

@@ -0,0 +1,96 @@
+import type { ReactNode } from 'react'
+import type { Post } from '../types'
+import { PostMedia } from './post-media'
+
+const URL = /(https?:\/\/[^\s]+)/g
+const dateFormatter = new Intl.DateTimeFormat('ja-JP', {
+  dateStyle: 'medium',
+  timeStyle: 'short',
+  timeZone: 'Asia/Tokyo',
+})
+
+function linkedText(text: string): ReactNode[] {
+  const parts: ReactNode[] = []
+  let cursor = 0
+  for (const match of text.matchAll(URL)) {
+    const href = match[0]
+    const start = match.index
+    if (start > cursor) parts.push(text.slice(cursor, start))
+    parts.push(
+      <a
+        href={href}
+        key={`link-${start}`}
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        {href}
+      </a>,
+    )
+    cursor = start + href.length
+  }
+  if (cursor < text.length) parts.push(text.slice(cursor))
+  return parts
+}
+
+function formattedTime(createdAt?: string): string | undefined {
+  if (!createdAt) return undefined
+  const date = new Date(createdAt)
+  return Number.isNaN(date.getTime()) ? undefined : dateFormatter.format(date)
+}
+
+export function PostCard({
+  post,
+  quoted = false,
+}: {
+  post: Post
+  quoted?: 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'}>
+      <header className="post-header">
+        {post.author.profileImageUrl ? (
+          <img
+            alt=""
+            className="avatar"
+            height="40"
+            loading="lazy"
+            src={post.author.profileImageUrl}
+            width="40"
+          />
+        ) : null}
+        <div>
+          <strong>{post.author.name}</strong>
+          <span className="handle">@{post.author.username}</span>
+        </div>
+        {time && post.createdAt ? (
+          <time dateTime={post.createdAt}>{time}</time>
+        ) : null}
+      </header>
+      <p className="post-text">{linkedText(post.text)}</p>
+      {post.media ? <PostMedia media={post.media} /> : null}
+      {post.article ? (
+        <section className="article-card">
+          <strong>{post.article.title}</strong>
+          {post.article.previewText ? <p>{post.article.previewText}</p> : null}
+        </section>
+      ) : null}
+      {post.quotedTweet && !quoted ? (
+        <PostCard post={post.quotedTweet} quoted />
+      ) : null}
+      {!quoted ? (
+        <footer className="post-footer">
+          <span className="counts">
+            返信 {post.replyCount ?? 0}　再投稿 {post.retweetCount ?? 0}　いいね{' '}
+            {post.likeCount ?? 0}
+          </span>
+          <a href={original} rel="noreferrer noopener" target="_blank">
+            元の投稿を開く
+          </a>
+        </footer>
+      ) : null}
+    </article>
+  )
+}

src/features/posts/components/post-media.tsx

@@ -0,0 +1,36 @@
+import type { Post } from '../types'
+
+type Media = NonNullable<Post['media']>[number]
+
+export function PostMedia({ media }: { media: Media[] }) {
+  if (media.length === 0) return null
+
+  return (
+    <div className="media-grid">
+      {media.map((item) =>
+        item.type === 'photo' ? (
+          <img
+            alt="投稿画像"
+            className="media"
+            height={item.height}
+            key={item.url}
+            loading="lazy"
+            src={item.url}
+            width={item.width}
+          />
+        ) : (
+          // biome-ignore lint/a11y/useMediaCaption: Bird does not provide caption track URLs.
+          <video
+            className="media"
+            controls
+            key={item.videoUrl ?? item.url}
+            loop={item.type === 'animated_gif'}
+            poster={item.previewUrl ?? item.url}
+            preload="metadata"
+            src={item.videoUrl ?? item.url}
+          />
+        ),
+      )}
+    </div>
+  )
+}

src/styles.css

@@ -188,6 +188,102 @@ input:focus-visible {
   cursor: pointer;
 }
 
+.post {
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid #c1cfd2;
+  border-radius: 0.9rem;
+  background: #fff;
+}
+
+.post-header {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 0.65rem;
+  align-items: center;
+}
+
+.avatar {
+  border-radius: 50%;
+}
+
+.handle,
+.post-header time {
+  display: block;
+  color: #506970;
+  font-size: 0.76rem;
+}
+
+.post-header time {
+  text-align: right;
+}
+
+.post-text {
+  margin: 0.9rem 0;
+  overflow-wrap: anywhere;
+  line-height: 1.75;
+  white-space: pre-wrap;
+}
+
+.post a {
+  color: #255f6e;
+}
+
+.post a:focus-visible {
+  outline: 3px solid #506970;
+  outline-offset: 2px;
+}
+
+.media-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.4rem;
+  margin-top: 0.8rem;
+  overflow: hidden;
+  border-radius: 0.75rem;
+}
+
+.media-grid > :only-child {
+  grid-column: 1 / -1;
+}
+
+.media {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 32rem;
+  object-fit: cover;
+  background: #dfe7e9;
+}
+
+.article-card,
+.quote {
+  margin-top: 0.8rem;
+  padding: 0.85rem;
+  border: 1px solid #c1cfd2;
+  border-radius: 0.75rem;
+  background: #f8faf9;
+}
+
+.article-card p {
+  margin-bottom: 0;
+  color: #506970;
+}
+
+.post-footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 0.75rem 1rem;
+  margin-top: 1rem;
+  color: #506970;
+  font-size: 0.76rem;
+}
+
+.counts {
+  font-variant-numeric: tabular-nums;
+}
+
 @media (max-width: 36rem) {
   .app {
     width: min(100% - 1rem, 52rem);
@@ -210,4 +306,17 @@ input:focus-visible {
   .intent-form button {
     justify-self: stretch;
   }
+
+  .post-header {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .post-header time {
+    grid-column: 2;
+    text-align: left;
+  }
+
+  .media-grid {
+    grid-template-columns: 1fr;
+  }
 }