feat(web): user profiles, reputation badges, and settings page (M8) (#9)

Add ReputationBadge (score + level display), UserProfileCard (hover/focus card
with keyboard dismissal), user profile page at /u/[handle], and settings page
with content safety, cross-posting defaults, and notification preferences.

src/app/settings/page.test.tsx

···
+/**
+ * Tests for settings page.
+ */
+
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'vitest-axe'
+import SettingsPage from './page'
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    back: vi.fn(),
+  }),
+  redirect: vi.fn(),
+}))
+
+describe('SettingsPage', () => {
+  it('renders settings heading', () => {
+    render(<SettingsPage />)
+    expect(screen.getByRole('heading', { name: /settings/i })).toBeInTheDocument()
+  })
+
+  it('renders content safety section', () => {
+    render(<SettingsPage />)
+    expect(screen.getByText(/content safety/i)).toBeInTheDocument()
+    expect(screen.getByLabelText(/maturity level/i)).toBeInTheDocument()
+  })
+
+  it('renders muted words input', () => {
+    render(<SettingsPage />)
+    expect(screen.getByLabelText(/muted words/i)).toBeInTheDocument()
+  })
+
+  it('renders cross-posting section', () => {
+    render(<SettingsPage />)
+    expect(screen.getByText(/cross-posting/i)).toBeInTheDocument()
+    expect(screen.getByLabelText(/bluesky/i)).toBeInTheDocument()
+    expect(screen.getByLabelText(/frontpage/i)).toBeInTheDocument()
+  })
+
+  it('renders notification preferences section', () => {
+    render(<SettingsPage />)
+    expect(screen.getByText(/notifications/i)).toBeInTheDocument()
+  })
+
+  it('renders save button', () => {
+    render(<SettingsPage />)
+    expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument()
+  })
+
+  it('renders breadcrumbs', () => {
+    render(<SettingsPage />)
+    expect(screen.getByText('Home')).toBeInTheDocument()
+  })
+
+  it('passes axe accessibility check', async () => {
+    const { container } = render(<SettingsPage />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})

src/app/settings/page.tsx

···
+/**
+ * User settings page.
+ * URL: /settings
+ * Content safety, cross-posting defaults, notification preferences.
+ * Client component (form state).
+ * @see specs/prd-web.md Section M8 (Settings page)
+ */
+
+'use client'
+
+import { useState } from 'react'
+import { ForumLayout } from '@/components/layout/forum-layout'
+import { Breadcrumbs } from '@/components/breadcrumbs'
+import { cn } from '@/lib/utils'
+
+type MaturityLevel = 'sfw' | 'sfw-mature'
+
+interface SettingsValues {
+  maturityLevel: MaturityLevel
+  mutedWords: string
+  crossPostBluesky: boolean
+  crossPostFrontpage: boolean
+  notifyReplies: boolean
+  notifyMentions: boolean
+  notifyReactions: boolean
+}
+
+export default function SettingsPage() {
+  const [values, setValues] = useState<SettingsValues>({
+    maturityLevel: 'sfw',
+    mutedWords: '',
+    crossPostBluesky: true,
+    crossPostFrontpage: false,
+    notifyReplies: true,
+    notifyMentions: true,
+    notifyReactions: false,
+  })
+  const [saving, setSaving] = useState(false)
+
+  const handleSave = (e: React.FormEvent) => {
+    e.preventDefault()
+    setSaving(true)
+    // TODO: Save settings via API
+    setTimeout(() => setSaving(false), 500)
+  }
+
+  return (
+    <ForumLayout>
+      <div className="space-y-6">
+        <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Settings' }]} />
+
+        <h1 className="text-2xl font-bold text-foreground">Settings</h1>
+
+        <form onSubmit={handleSave} className="max-w-2xl space-y-8" noValidate>
+          {/* Content Safety */}
+          <fieldset className="space-y-4 rounded-lg border border-border p-4">
+            <legend className="px-2 text-sm font-semibold text-foreground">Content Safety</legend>
+
+            <div className="space-y-1">
+              <label htmlFor="maturity-level" className="block text-sm font-medium text-foreground">
+                Maturity level
+              </label>
+              <select
+                id="maturity-level"
+                value={values.maturityLevel}
+                onChange={(e) =>
+                  setValues({ ...values, maturityLevel: e.target.value as MaturityLevel })
+                }
+                className={cn(
+                  'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground',
+                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+                )}
+              >
+                <option value="sfw">SFW only</option>
+                <option value="sfw-mature">SFW + Mature</option>
+              </select>
+              <p className="text-xs text-muted-foreground">
+                Controls which content you can see. Mature content requires age confirmation.
+              </p>
+            </div>
+
+            <div className="space-y-1">
+              <label htmlFor="muted-words" className="block text-sm font-medium text-foreground">
+                Muted words
+              </label>
+              <textarea
+                id="muted-words"
+                value={values.mutedWords}
+                onChange={(e) => setValues({ ...values, mutedWords: e.target.value })}
+                placeholder="Enter words separated by commas"
+                rows={3}
+                className={cn(
+                  'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
+                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+                )}
+              />
+              <p className="text-xs text-muted-foreground">
+                Posts containing these words will be collapsed. Comma-separated.
+              </p>
+            </div>
+          </fieldset>
+
+          {/* Cross-Posting */}
+          <fieldset className="space-y-4 rounded-lg border border-border p-4">
+            <legend className="px-2 text-sm font-semibold text-foreground">Cross-Posting</legend>
+            <div className="space-y-3">
+              <label className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={values.crossPostBluesky}
+                  onChange={(e) => setValues({ ...values, crossPostBluesky: e.target.checked })}
+                  className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
+                />
+                <span className="text-sm text-foreground">
+                  Share new topics on Bluesky by default
+                </span>
+              </label>
+              <label className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={values.crossPostFrontpage}
+                  onChange={(e) => setValues({ ...values, crossPostFrontpage: e.target.checked })}
+                  className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
+                />
+                <span className="text-sm text-foreground">
+                  Share new topics on Frontpage by default
+                </span>
+              </label>
+            </div>
+          </fieldset>
+
+          {/* Notifications */}
+          <fieldset className="space-y-4 rounded-lg border border-border p-4">
+            <legend className="px-2 text-sm font-semibold text-foreground">Notifications</legend>
+            <div className="space-y-3">
+              <label className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={values.notifyReplies}
+                  onChange={(e) => setValues({ ...values, notifyReplies: e.target.checked })}
+                  className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
+                />
+                <span className="text-sm text-foreground">Replies to my posts</span>
+              </label>
+              <label className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={values.notifyMentions}
+                  onChange={(e) => setValues({ ...values, notifyMentions: e.target.checked })}
+                  className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
+                />
+                <span className="text-sm text-foreground">Mentions of my handle</span>
+              </label>
+              <label className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={values.notifyReactions}
+                  onChange={(e) => setValues({ ...values, notifyReactions: e.target.checked })}
+                  className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
+                />
+                <span className="text-sm text-foreground">Reactions on my posts</span>
+              </label>
+            </div>
+          </fieldset>
+
+          {/* Save */}
+          <div className="flex justify-end">
+            <button
+              type="submit"
+              disabled={saving}
+              className={cn(
+                'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors',
+                'hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+                'disabled:cursor-not-allowed disabled:opacity-50'
+              )}
+            >
+              {saving ? 'Saving...' : 'Save Settings'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </ForumLayout>
+  )
+}

src/app/u/[handle]/page.test.tsx

···
+/**
+ * Tests for user profile page.
+ */
+
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import UserProfilePage from './page'
+
+// Mock next/navigation
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    back: vi.fn(),
+  }),
+  redirect: vi.fn(),
+}))
+
+describe('UserProfilePage', () => {
+  it('renders user handle in heading', () => {
+    render(<UserProfilePage params={{ handle: 'alice.bsky.social' }} />)
+    expect(screen.getByRole('heading', { name: /alice\.bsky\.social/i })).toBeInTheDocument()
+  })
+
+  it('renders breadcrumbs', () => {
+    render(<UserProfilePage params={{ handle: 'alice.bsky.social' }} />)
+    expect(screen.getByText('Home')).toBeInTheDocument()
+    // Handle appears in both breadcrumbs and heading; check breadcrumb specifically
+    const breadcrumb = screen.getByRole('navigation', { name: /breadcrumb/i })
+    expect(breadcrumb).toBeInTheDocument()
+  })
+
+  it('renders profile sections', () => {
+    render(<UserProfilePage params={{ handle: 'alice.bsky.social' }} />)
+    expect(screen.getByText(/recent activity/i)).toBeInTheDocument()
+  })
+})

src/app/u/[handle]/page.tsx

···
+/**
+ * User profile page.
+ * URL: /u/[handle]
+ * Displays user info, reputation, recent posts.
+ * Client component (needs param resolution + dynamic data).
+ * @see specs/prd-web.md Section M8
+ */
+
+'use client'
+
+import { useState, useEffect } from 'react'
+import { User, CalendarBlank, ChatCircle } from '@phosphor-icons/react'
+import { ForumLayout } from '@/components/layout/forum-layout'
+import { Breadcrumbs } from '@/components/breadcrumbs'
+import { ReputationBadge } from '@/components/reputation-badge'
+import { BanIndicator } from '@/components/ban-indicator'
+
+interface UserProfilePageProps {
+  params: Promise<{ handle: string }> | { handle: string }
+}
+
+export default function UserProfilePage({ params }: UserProfilePageProps) {
+  const [handle, setHandle] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function resolveParams() {
+      const resolved = params instanceof Promise ? await params : params
+      setHandle(resolved.handle)
+    }
+    void resolveParams()
+  }, [params])
+
+  if (!handle) {
+    return (
+      <ForumLayout>
+        <div className="animate-pulse space-y-4 py-8">
+          <div className="h-8 w-48 rounded bg-muted" />
+          <div className="h-32 rounded bg-muted" />
+        </div>
+      </ForumLayout>
+    )
+  }
+
+  // TODO: Fetch user profile from API when endpoint is available
+  const mockProfile = {
+    did: `did:plc:mock-${handle}`,
+    handle,
+    displayName: handle.split('.')[0],
+    reputation: 42,
+    postCount: 15,
+    joinedAt: '2025-06-15T00:00:00Z',
+    isBanned: false,
+  }
+
+  const joinDate = new Date(mockProfile.joinedAt).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+
+  return (
+    <ForumLayout>
+      <div className="space-y-6">
+        <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: handle }]} />
+
+        {/* Profile header */}
+        <div className="rounded-lg border border-border bg-card p-6">
+          <div className="flex items-start gap-4">
+            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+              <User size={32} className="text-muted-foreground" aria-hidden="true" />
+            </div>
+            <div className="min-w-0 flex-1">
+              <h1 className="text-2xl font-bold text-foreground">{handle}</h1>
+              {mockProfile.displayName && (
+                <p className="text-lg text-muted-foreground">{mockProfile.displayName}</p>
+              )}
+
+              <div className="mt-3 flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
+                <ReputationBadge score={mockProfile.reputation} />
+                <span className="flex items-center gap-1">
+                  <ChatCircle size={16} aria-hidden="true" />
+                  {mockProfile.postCount} posts
+                </span>
+                <span className="flex items-center gap-1">
+                  <CalendarBlank size={16} aria-hidden="true" />
+                  Joined {joinDate}
+                </span>
+              </div>
+
+              {mockProfile.isBanned && (
+                <div className="mt-3">
+                  <BanIndicator isBanned={true} />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Recent activity */}
+        <section>
+          <h2 className="text-lg font-semibold text-foreground">Recent Activity</h2>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Recent posts and replies will appear here once the API is connected.
+          </p>
+        </section>
+      </div>
+    </ForumLayout>
+  )
+}

src/components/reputation-badge.test.tsx

···
+/**
+ * Tests for ReputationBadge component.
+ */
+
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'vitest-axe'
+import { ReputationBadge } from './reputation-badge'
+
+describe('ReputationBadge', () => {
+  it('renders reputation score', () => {
+    render(<ReputationBadge score={42} />)
+    expect(screen.getByText('42')).toBeInTheDocument()
+  })
+
+  it('renders with accessible label', () => {
+    render(<ReputationBadge score={42} />)
+    expect(screen.getByLabelText(/reputation.*42/i)).toBeInTheDocument()
+  })
+
+  it('renders level label when provided', () => {
+    render(<ReputationBadge score={100} level="Trusted" />)
+    expect(screen.getByText('Trusted')).toBeInTheDocument()
+  })
+
+  it('renders without level label when not provided', () => {
+    render(<ReputationBadge score={10} />)
+    expect(screen.queryByText('Trusted')).not.toBeInTheDocument()
+  })
+
+  it('passes axe accessibility check', async () => {
+    const { container } = render(<ReputationBadge score={42} level="Member" />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})

src/components/reputation-badge.tsx

···
+/**
+ * ReputationBadge - Displays user reputation score and optional level.
+ * @see specs/prd-web.md Section M8 (ReputationBadge)
+ */
+
+import { Star } from '@phosphor-icons/react/dist/ssr'
+import { cn } from '@/lib/utils'
+
+interface ReputationBadgeProps {
+  score: number
+  level?: string
+  className?: string
+}
+
+export function ReputationBadge({ score, level, className }: ReputationBadgeProps) {
+  return (
+    <span
+      className={cn('inline-flex items-center gap-1 text-sm', className)}
+      aria-label={`Reputation: ${score}`}
+    >
+      <Star className="h-3.5 w-3.5 text-amber-500" weight="fill" aria-hidden="true" />
+      <span className="font-medium text-foreground">{score}</span>
+      {level && <span className="text-muted-foreground">{level}</span>}
+    </span>
+  )
+}

src/components/user-profile-card.test.tsx

···
+/**
+ * Tests for UserProfileCard component.
+ */
+
+import { describe, it, expect } from 'vitest'
+import { render, screen, act } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { axe } from 'vitest-axe'
+import { UserProfileCard } from './user-profile-card'
+
+const mockUser = {
+  did: 'did:plc:test-user',
+  handle: 'alice.bsky.social',
+  displayName: 'Alice',
+  reputation: 42,
+  postCount: 15,
+  joinedAt: '2025-01-01T00:00:00Z',
+}
+
+describe('UserProfileCard', () => {
+  it('renders trigger with user handle', () => {
+    render(<UserProfileCard user={mockUser} />)
+    expect(screen.getByText('alice.bsky.social')).toBeInTheDocument()
+  })
+
+  it('shows card on hover', async () => {
+    const user = userEvent.setup()
+    render(<UserProfileCard user={mockUser} />)
+    await user.hover(screen.getByText('alice.bsky.social'))
+
+    // Wait for hover delay
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 250))
+    })
+
+    expect(screen.getByText('Alice')).toBeInTheDocument()
+    expect(screen.getByLabelText(/reputation/i)).toBeInTheDocument()
+  })
+
+  it('shows card on keyboard focus', async () => {
+    const user = userEvent.setup()
+    render(<UserProfileCard user={mockUser} />)
+    await user.tab()
+
+    // Wait for focus delay
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 250))
+    })
+
+    expect(screen.getByText('Alice')).toBeInTheDocument()
+  })
+
+  it('hides card on Escape', async () => {
+    const user = userEvent.setup()
+    render(<UserProfileCard user={mockUser} />)
+    await user.hover(screen.getByText('alice.bsky.social'))
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 250))
+    })
+    expect(screen.getByText('Alice')).toBeInTheDocument()
+
+    await user.keyboard('{Escape}')
+    expect(screen.queryByText('Alice')).not.toBeInTheDocument()
+  })
+
+  it('shows post count', async () => {
+    const user = userEvent.setup()
+    render(<UserProfileCard user={mockUser} />)
+    await user.hover(screen.getByText('alice.bsky.social'))
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 250))
+    })
+    expect(screen.getByText(/15/)).toBeInTheDocument()
+  })
+
+  it('renders as link to user profile', () => {
+    render(<UserProfileCard user={mockUser} />)
+    const link = screen.getByRole('link', { name: /alice\.bsky\.social/i })
+    expect(link).toHaveAttribute('href', '/u/alice.bsky.social')
+  })
+
+  it('passes axe accessibility check', async () => {
+    const { container } = render(<UserProfileCard user={mockUser} />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})

src/components/user-profile-card.tsx

···
+/**
+ * UserProfileCard - Hover/focus card showing user info, reputation, and stats.
+ * Keyboard-triggerable via focus, Escape-dismissible.
+ * @see specs/prd-web.md Section M8 (UserProfileCard)
+ */
+
+'use client'
+
+import { useState, useRef, useCallback, useEffect } from 'react'
+import Link from 'next/link'
+import { User, CalendarBlank, ChatCircle } from '@phosphor-icons/react'
+import { cn } from '@/lib/utils'
+import { ReputationBadge } from './reputation-badge'
+
+interface UserProfileData {
+  did: string
+  handle: string
+  displayName?: string
+  reputation: number
+  postCount: number
+  joinedAt: string
+}
+
+interface UserProfileCardProps {
+  user: UserProfileData
+  className?: string
+}
+
+const SHOW_DELAY = 200
+
+export function UserProfileCard({ user, className }: UserProfileCardProps) {
+  const [visible, setVisible] = useState(false)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const containerRef = useRef<HTMLSpanElement>(null)
+
+  const show = useCallback(() => {
+    timerRef.current = setTimeout(() => setVisible(true), SHOW_DELAY)
+  }, [])
+
+  const hide = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+    setVisible(false)
+  }, [])
+
+  useEffect(() => {
+    if (!visible) return
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        hide()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [visible, hide])
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  const joinDate = new Date(user.joinedAt).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+  })
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <span
+      ref={containerRef}
+      className={cn('relative inline-block', className)}
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      onFocus={show}
+      onBlur={hide}
+    >
+      <Link
+        href={`/u/${user.handle}`}
+        className="font-medium text-foreground hover:text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm"
+      >
+        {user.handle}
+      </Link>
+
+      {visible && (
+        <div
+          className="absolute left-0 top-full z-40 mt-1 w-64 rounded-lg border border-border bg-card p-4 shadow-lg"
+          role="tooltip"
+        >
+          <div className="flex items-start gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
+              <User size={20} className="text-muted-foreground" aria-hidden="true" />
+            </div>
+            <div className="min-w-0 flex-1">
+              {user.displayName && (
+                <p className="truncate font-semibold text-foreground">{user.displayName}</p>
+              )}
+              <p className="truncate text-sm text-muted-foreground">@{user.handle}</p>
+            </div>
+          </div>
+
+          <div className="mt-3 flex items-center gap-4 text-xs text-muted-foreground">
+            <ReputationBadge score={user.reputation} />
+            <span className="flex items-center gap-1">
+              <ChatCircle size={12} aria-hidden="true" />
+              {user.postCount} posts
+            </span>
+          </div>
+
+          <div className="mt-2 flex items-center gap-1 text-xs text-muted-foreground">
+            <CalendarBlank size={12} aria-hidden="true" />
+            Joined {joinDate}
+          </div>
+        </div>
+      )}
+    </span>
+  )
+}