feat(dystopia): align messages, footprints, ranking and settings with the mock

[panicboat]

Why

#1517 のモックに合わせて、メッセージ・足跡・ランキング・設定の画面を整えます。第 4 段（カルテ以外の画面）を 4 つに分けたうちの 4c（その他の画面）です。stack: #1521 → #1542 → #1544 → #1545 → #1546 → 本 PR。

Decisions

• メッセージのスレッドはページのまま見た目を合わせる（長いやり取りを読み書きし、入力欄を下に固定する画面で、狭いシートより全画面が向く）
• メッセージの一覧に「＋ 新しいメッセージ」を置き、作成メニューの「メッセージ」と同じ相手選びのシートを開く。スレッドの見出しは「○○とのメッセージ」
• ブロック一覧は、設定のプライバシーからはシートで開き、/settings/blocks を直接開いたときはページで出す。中身は 1 つの部品を両方で使う。画面上のリンクはシートを開くボタンに替わり、/settings/blocks は URL で直接開く経路として残る
• 足跡は一覧の先頭に説明文を出す。行は変えない（モックの「○○に訪問」は、今の相対時刻が英語の表記のため付けない）
• ランキングは各投稿の上に「#N · 期間の人気投稿」を出す（24h のタブは「24時間」）
• 設定のタブ切り替えで中身をフェードさせる
• 通知・人格の管理の行は変えない（すでにモックと同じ要素を持つ）
• 外観の「画面のアニメーションを使う」など、モックにしかない設定は足さない
• 定義のないクラス（text-muted-foreground・text-red-600 など）を、定義のあるトークン（text-text-secondary・text-error など）に替える

Verification

• frontend: pnpm exec vitest run → 182 files / 773 tests passed、pnpm exec tsc --noEmit エラーなし、pnpm exec next build 成功
• 実機（使い捨て DB + bin/grpc + next dev、puppeteer）
  • メッセージの一覧で「＋ 新しいメッセージ」→ 相手選びのシート。相手を選ぶとスレッドに移り、シートは閉じる
  • スレッドの見出しが「りんとのメッセージ」
  • 足跡の説明文が出る
  • ランキングで「Create scaffold-argo-workflows #1 · 1週間の人気投稿」、24h のタブで「Create scaffold-argo-workflows #1 · 24時間の人気投稿」
  • 設定のタブ（プライバシー・通知設定・外観）を替えるたびに中身のフェードが走る
  • プライバシーの「ブロックしたアカウント」で右からシートが開き、閉じるとプライバシーの画面に戻る
  • /settings/blocks を直接開くとページ「ブロック一覧」で同じ一覧
  • サーバーに ERROR なし

Docs

• spec: docs/superpowers/specs/2026-10-16-dystopia-other-screens-design.md
• plan: docs/superpowers/plans/2026-10-17-dystopia-other-screens.md

Refs #1517

🤖 Generated with Claude Code

https://claude.ai/code/session_01DA9qTtJtm2tPquKk7hyPR5

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 7929c1e7-36df-4002-bb01-8ca2bdd77cfe

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Kustomize Diff

Service: frontend
Environment: production

No changes