feat: add intentional reader routes

src/features/posts/components/forms.test.tsx

@@ -0,0 +1,57 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { SearchForm } from './search-form'
+import { UserForm } from './user-form'
+
+describe('UserForm', () => {
+  it('submits only after the user enters a target', () => {
+    const onSubmit = vi.fn()
+    render(<UserForm initialTarget="" onSubmit={onSubmit} />)
+
+    fireEvent.change(screen.getByLabelText('ハンドルまたはプロフィール URL'), {
+      target: { value: '@yuta' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: '表示' }))
+
+    expect(onSubmit).toHaveBeenCalledWith('yuta')
+  })
+
+  it('explains invalid input beside the field', () => {
+    const onSubmit = vi.fn()
+    render(<UserForm initialTarget="" onSubmit={onSubmit} />)
+
+    fireEvent.click(screen.getByRole('button', { name: '表示' }))
+
+    expect(screen.getByRole('alert')).toHaveTextContent(
+      'ハンドルまたはプロフィール URL を入力してください。',
+    )
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+})
+
+describe('SearchForm', () => {
+  it('submits the selected ranking and follows filter', () => {
+    const onSubmit = vi.fn()
+    render(
+      <SearchForm
+        initialQuery=""
+        initialProduct="Latest"
+        initialFollowing={false}
+        onSubmit={onSubmit}
+      />,
+    )
+
+    fireEvent.change(screen.getByLabelText('検索語'), {
+      target: { value: 'AI lang:ja' },
+    })
+    fireEvent.click(screen.getByLabelText('人気順'))
+    fireEvent.click(screen.getByLabelText('フォロー中のみ'))
+    fireEvent.click(screen.getByRole('button', { name: '検索' }))
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      q: 'AI lang:ja',
+      product: 'Top',
+      following: true,
+    })
+  })
+})

src/features/posts/components/search-form.tsx

@@ -0,0 +1,87 @@
+import type { SearchProduct } from '@yuta/bird'
+import { type FormEvent, useState } from 'react'
+import { buildSearchQuery } from '../inputs'
+
+type SearchValues = {
+  q: string
+  product: SearchProduct
+  following: boolean
+}
+
+type Props = {
+  initialQuery: string
+  initialProduct: SearchProduct
+  initialFollowing: boolean
+  onSubmit: (values: SearchValues) => void
+}
+
+export function SearchForm({
+  initialQuery,
+  initialProduct,
+  initialFollowing,
+  onSubmit,
+}: Props) {
+  const [q, setQuery] = useState(initialQuery)
+  const [product, setProduct] = useState(initialProduct)
+  const [following, setFollowing] = useState(initialFollowing)
+  const [error, setError] = useState('')
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault()
+    try {
+      const query = buildSearchQuery(q, false)
+      setError('')
+      onSubmit({ q: query, product, following })
+    } catch (cause) {
+      setError(
+        cause instanceof Error ? cause.message : '入力内容を確認してください。',
+      )
+    }
+  }
+
+  return (
+    <form className="intent-form" onSubmit={submit}>
+      <label className="field">
+        <span>検索語</span>
+        <input
+          autoComplete="off"
+          aria-describedby={error ? 'query-error' : undefined}
+          aria-invalid={Boolean(error)}
+          name="q"
+          value={q}
+          onChange={(event) => setQuery(event.currentTarget.value)}
+          placeholder="検索語や高度な検索演算子"
+        />
+        {error ? (
+          <span className="field-error" id="query-error" role="alert">
+            {error}
+          </span>
+        ) : null}
+      </label>
+      <fieldset className="segmented">
+        <legend>並び順</legend>
+        {(['Top', 'Latest'] as const).map((value) => (
+          <label key={value}>
+            <input
+              checked={product === value}
+              name="product"
+              onChange={() => setProduct(value)}
+              type="radio"
+              value={value}
+            />
+            {value === 'Top' ? '人気順' : '最新順'}
+          </label>
+        ))}
+      </fieldset>
+      <label className="check">
+        <input
+          checked={following}
+          onChange={(event) => setFollowing(event.currentTarget.checked)}
+          type="checkbox"
+        />
+        フォロー中のみ
+      </label>
+      <button type="submit">検索</button>
+    </form>
+  )
+}

src/features/posts/components/user-form.tsx

@@ -0,0 +1,47 @@
+import { type FormEvent, useState } from 'react'
+import { normalizeUserTarget } from '../inputs'
+
+type Props = {
+  initialTarget: string
+  onSubmit: (target: string) => void
+}
+
+export function UserForm({ initialTarget, onSubmit }: Props) {
+  const [target, setTarget] = useState(initialTarget)
+  const [error, setError] = useState('')
+  const submit = (event: FormEvent) => {
+    event.preventDefault()
+    try {
+      const handle = normalizeUserTarget(target)
+      setError('')
+      onSubmit(handle)
+    } catch (cause) {
+      setError(
+        cause instanceof Error ? cause.message : '入力内容を確認してください。',
+      )
+    }
+  }
+
+  return (
+    <form className="intent-form" onSubmit={submit}>
+      <label className="field">
+        <span>ハンドルまたはプロフィール URL</span>
+        <input
+          autoComplete="off"
+          aria-describedby={error ? 'target-error' : undefined}
+          aria-invalid={Boolean(error)}
+          name="target"
+          value={target}
+          onChange={(event) => setTarget(event.currentTarget.value)}
+          placeholder="@handle または https://x.com/handle"
+        />
+        {error ? (
+          <span className="field-error" id="target-error" role="alert">
+            {error}
+          </span>
+        ) : null}
+      </label>
+      <button type="submit">表示</button>
+    </form>
+  )
+}