refactor(frontend): migrate to useApi hook and add TSDoc documentation

.claude/instruction.md

@@ -0,0 +1,69 @@
+# Claude Code Instructions
+
+## 基本方針
+
+- `.claude/workflows/github-workflow.md` に記載されたワークフローに従う
+- 作業開始時は必ずワークフローを確認
+- 各フェーズ完了時にユーザーに報告
+
+## ルールファイル
+
+`.claude/rules/` に詳細なガイドラインを分割:
+
+| ファイル | 内容 |
+|---------|------|
+| `tsdoc.md` | TSDocドキュメント規約（英語で記述） |
+| `react-aria.md` | React Aria Componentsの使い方 |
+| `architecture.md` | コアアーキテクチャパターン |
+| `release.md` | リリース手順とバージョニング |
+| `devcontainer.md` | DevContainer開発環境 |
+| `mcp-servers.md` | MCPサーバーの使い方 |
+| `discord-logger.md` | Discord会話ログ記録 |
+
+## GitHub CLI利用
+
+このプロジェクトでは gh コマンドを積極的に活用:
+
+```bash
+# Issue管理
+gh issue list --state open
+gh issue create --title "タイトル" --body "説明"
+gh issue view <番号>
+
+# PR管理
+gh pr create --base main --title "feat: 説明" --body "Closes #番号"
+gh pr checks
+gh pr view
+```
+
+## プロジェクト固有設定
+
+- デフォルトブランチ: main
+- PRターゲット: main
+- featureブランチプレフィックス: `feature/issue-{番号}-`
+
+## ブランチ命名規則
+
+```
+feature/issue-42-add-login-form
+fix/issue-123-broken-pagination
+refactor/frontend-useapi-migration
+```
+
+## コミットメッセージ規約
+
+```
+feat: 新機能
+fix: バグ修正
+docs: ドキュメント
+refactor: リファクタリング
+test: テスト追加・修正
+chore: その他の変更
+```
+
+形式: `{type}({scope}): {description}`
+
+例:
+- `feat(frontend): add user profile page`
+- `fix(backend): resolve authentication timeout`
+- `refactor(frontend): migrate to useApi hook`

.claude/rules/architecture.md

@@ -0,0 +1,72 @@
+# Core Architecture Patterns
+
+## Infrastructure Abstraction
+
+The project uses **Repository Pattern** and **Adapter Pattern** to decouple business logic from infrastructure concerns. This enables switching databases and storage backends via environment variables.
+
+### Database Abstraction Layer
+
+- Controllers (Hono routes) depend only on repository interfaces (e.g., `INoteRepository`, `IUserRepository`)
+- Concrete implementations exist per database type in `repositories/pg/`
+- Selection via `DB_TYPE` environment variable at application startup
+- Dependency injection happens during DI container construction
+
+### Storage Abstraction Layer
+
+- All media operations go through `IFileStorage` interface
+- Implementations: `LocalStorageAdapter` (development) and `S3StorageAdapter` (production)
+- Selection via `STORAGE_TYPE` environment variable
+
+## Dependency Injection
+
+- Use Hono Context to provide repository implementations to controllers
+- Initialize concrete repository classes at application startup based on `DB_TYPE`
+- Example: `context.get('noteRepository')` returns the appropriate implementation
+
+## Storage Adapter Interface
+
+The `IFileStorage` interface must support:
+
+```typescript
+interface IFileStorage {
+  save(file: Buffer, metadata: FileMetadata): Promise<string>;  // Returns file identifier/URL
+  delete(fileId: string): Promise<void>;
+  getUrl(fileId: string): string;  // Returns publicly accessible URL
+}
+```
+
+## ActivityPub Considerations
+
+- HTTP Signatures must be strictly validated for incoming activities
+- Use job queue for outbound delivery to handle retries and rate limiting
+- Actor documents must be cacheable and follow ActivityPub spec
+- WebFinger responses must include proper CORS headers
+
+## Directory Structure
+
+```
+packages/
+├── shared/             # Shared code between frontend and backend
+│   └── src/
+│       ├── types/      # Shared TypeScript types
+│       ├── utils/      # Shared utility functions
+│       └── constants/  # Shared validation constants
+├── backend/
+│   └── src/
+│       ├── adapters/       # Infrastructure implementations (Adapter Pattern)
+│       ├── db/             # Drizzle schema and connections
+│       ├── di/             # Dependency injection container
+│       ├── interfaces/     # Abstract definitions (Interfaces)
+│       ├── middleware/     # Hono middleware
+│       ├── repositories/   # DB operations (Repository Pattern)
+│       ├── routes/         # Hono endpoints
+│       ├── services/       # Business logic
+│       └── lib/            # Shared utilities
+└── frontend/
+    └── src/
+        ├── components/     # React components
+        ├── hooks/          # Custom React hooks
+        ├── lib/            # Frontend utilities
+        ├── pages/          # Waku pages
+        └── locales/        # i18n translations
+```

.claude/rules/devcontainer.md

@@ -0,0 +1,62 @@
+# DevContainer Development
+
+This project includes a fully configured DevContainer for VS Code and Cursor.
+
+## Quick Start
+
+1. Open the project in VS Code or Cursor
+2. Click "Reopen in Container" when prompted
+3. Wait for container build and post-create script
+4. Run `bun run dev` to start development servers
+
+## Included Services
+
+| Service | Port | Description |
+|---------|------|-------------|
+| PostgreSQL | 5432 | Primary database |
+| MariaDB | 3306 | MySQL compatibility testing |
+| Dragonfly | 6379 | Redis-compatible cache/queue |
+| Nginx | 443, 80 | HTTPS reverse proxy with mkcert |
+
+## Pre-installed Tools
+
+- **Bun** - JavaScript runtime and package manager
+- **Node.js 20** - For npm packages requiring Node
+- **Claude Code CLI** - AI-powered coding assistant
+- **mkcert** - Local HTTPS certificate generation
+
+## VS Code Extensions (Auto-installed)
+
+- oxc (formatter/linter)
+- Tailwind CSS IntelliSense
+- Docker
+- GitHub Copilot
+- GitLens
+- Error Lens
+- Path Intellisense
+
+## HTTPS Development
+
+- Access at `https://localhost` after starting dev server
+- Certificates auto-generated via mkcert on first container creation
+- Stored in `docker/certs/` (gitignored)
+
+## Claude Code in DevContainer
+
+Configuration and history are persisted in `.claude/` directory:
+
+```bash
+# First-time setup
+claude login
+
+# Or set API key in .devcontainer/.env
+echo "ANTHROPIC_API_KEY=your-key" >> .devcontainer/.env
+```
+
+## Docker Compose Files
+
+| File | Purpose |
+|------|---------|
+| `docker/compose.yml` | Production deployment |
+| `docker/compose.dev.yml` | Local development (without DevContainer) |
+| `.devcontainer/compose.yml` | DevContainer services |

.claude/rules/discord-logger.md

@@ -0,0 +1,56 @@
+# Discord Conversation Logger Rules
+
+Use the `discord-conversation-logger` MCP to log important messages for review and history tracking.
+
+## When to Log
+
+### User Messages (role: "human")
+- Task start/change/completion instructions
+- Important decisions or confirmations
+- Error reports or issue identification
+
+### Assistant Messages (role: "assistant")
+- Task completion reports
+- Important suggestions or solutions
+- Error resolution methods
+- Summary of significant changes made
+
+### System Messages (role: "system")
+- Critical errors or warnings
+- Important environment changes
+- Security-related notifications
+
+## Logging Format
+
+```typescript
+mcp__discord-conversation-logger__log_conversation({
+  message: "Actual message content",
+  role: "human" | "assistant" | "system",
+  context: "Brief context description"
+})
+```
+
+## Examples
+
+```typescript
+// Task completion
+mcp__discord-conversation-logger__log_conversation({
+  message: "Completed migration of 40+ files to useApi hook pattern",
+  role: "assistant",
+  context: "Frontend refactoring task"
+})
+
+// Error report
+mcp__discord-conversation-logger__log_conversation({
+  message: "TypeScript compilation failed due to missing type definitions",
+  role: "system",
+  context: "Build error"
+})
+```
+
+## Cases NOT Requiring Logs
+
+- Simple acknowledgments
+- Intermediate progress reports
+- Temporary debug outputs
+- Routine file reads or searches

.claude/rules/mcp-servers.md

@@ -0,0 +1,54 @@
+# MCP Server Usage
+
+This project leverages Model Context Protocol (MCP) servers for enhanced development.
+
+## context7
+
+**Purpose**: Fetch up-to-date documentation and code examples for any library
+
+**When to use**:
+- Implementing features with external libraries (Hono, Waku, Drizzle, Jotai, etc.)
+- Getting latest API patterns or query syntax
+- Checking library-specific best practices
+
+**Example queries**:
+- "Hono middleware patterns"
+- "Drizzle ORM query syntax"
+- "Jotai atom composition"
+
+## deepwiki
+
+**Purpose**: Access GitHub repository documentation and answer questions about codebases
+
+**When to use**:
+- Researching ActivityPub implementations
+- Referencing Misskey source code
+- Exploring related federated social projects
+
+**Example queries**:
+- "How does Misskey handle federation?"
+- "HTTP Signatures implementation in ActivityPub"
+- "WebFinger response format"
+
+## serena
+
+**Purpose**: Semantic code navigation and intelligent refactoring for this codebase
+
+**When to use**:
+- Navigate symbols across the codebase
+- Find all references to interfaces/types
+- Perform safe refactorings across Repository/Adapter patterns
+- Track dependencies between modules
+
+**Example tasks**:
+- Renaming repository interfaces
+- Finding all implementations of `INoteRepository`
+- Understanding symbol relationships
+
+## Integration Guidelines
+
+| Task | Use |
+|------|-----|
+| Library documentation | context7 |
+| External project research | deepwiki |
+| Codebase navigation/refactoring | serena |

.claude/rules/react-aria.md

@@ -0,0 +1,52 @@
+# React Aria Components Guidelines
+
+Use React Aria Components for **interactive UI elements** that require:
+- Keyboard navigation and focus management
+- Screen reader announcements and ARIA attributes
+- Complex interaction patterns (dialogs, menus, selects)
+- Touch and pointer event handling
+
+## When to Use React Aria Components
+
+| Component Type | Use React Aria | Reason |
+|---------------|----------------|--------|
+| Button, Link | Yes | Keyboard/focus/press events |
+| TextField, TextArea | Yes | Input accessibility, validation |
+| Select, ComboBox | Yes | Complex keyboard navigation |
+| Dialog, Modal | Yes | Focus trapping, backdrop handling |
+| Switch, Checkbox | Yes | Toggle state announcements |
+| Menu, Popover | Yes | Focus management, dismiss handling |
+| Tabs, TabPanel | Yes | Arrow key navigation |
+
+## When Simple Styled Containers Are Appropriate
+
+| Component Type | Use React Aria | Reason |
+|---------------|----------------|--------|
+| Card (static) | No | Visual grouping only, no interaction |
+| CardHeader, CardContent | No | Semantic HTML sufficient |
+| Layout containers | No | No user interaction |
+| Decorative elements | No | Not interactive |
+
+## Interactive Cards
+
+For cards that respond to user interaction (click/press), use the `InteractiveCard` component:
+
+```tsx
+// Static card (no click handler) - uses div
+<Card>
+  <CardHeader>Title</CardHeader>
+  <CardContent>Content</CardContent>
+</Card>
+
+// Interactive card (has press handler) - uses React Aria Button
+<InteractiveCard onPress={() => navigate('/detail')}>
+  <p>Click to view details</p>
+</InteractiveCard>
+```
+
+## Accessibility Best Practices
+
+1. **Always add `aria-label` to inputs** - Don't rely on `placeholder` alone
+2. **Use RAC form components** - Prefer `TextField`, `SearchField` over plain `<input>`
+3. **Use RAC selection patterns** - Prefer `RadioGroup`, `Select` over custom state-based buttons
+4. **Ensure keyboard navigation** - All interactive elements must be keyboard accessible