開発コンポーネント
設定ページコンポーネント仕様
アプリケーション設定ページのUIコンポーネント仕様
設定ページコンポーネント仕様
概要
設定ページ (/settings) は、アプリケーションの全体的な動作、外観、およびユーザープロフィールを管理するためのインターフェースを提供します。
主要コンポーネント
SettingsPageClient.tsx
設定ページのメインクライアントコンポーネントです。以下のセクションを含みます。
- プロフィール設定 (Profile Settings):
- ユーザーの識別情報（ユーザー名、アバター）を編集します。
- アバターはプリセットから選択する方式を採用しており、専用のモーダルウィンドウ (
AvatarSelectionDialog) が提供されます。
- 一般設定 (General Settings):
- 言語設定 (
languageAtom): UIの表示言語を切り替えます。 - テーマ設定 (
theme-next-themes): ダークモード、ライトモードなどを切り替えます。 - タイムゾーン設定 (
userTimeZoneAtom): AIがメッセージの相対的な時間を把握するために使用する、ユーザー独自のタイムゾーンを設定します。
- 言語設定 (
- クラウド同期 (Cloud Sync):
- ログインユーザー向けに
SyncSettingsコンポーネントを表示します。
- ログインユーザー向けに
- データ管理 (Data Management):
- データベースのエクスポート/インポート機能を提供します。
- Danger Zone: データベースの完全消去などの危険な操作を格納する折りたたみセクションです。
- APIキー設定 (API Key Settings):
ApiKeysSettingsPanelを使用して、LLMプロバイダーのAPIキーを管理します。
- フォント設定 (Font Settings):
- UIおよび原稿のフォントファミリー、サイズ、太さをカスタマイズします。
関連Atoms & Actions:
actions.ts:updateProfile(Server Action) - プロフィールの更新を実行します。authAtoms.ts:userProfileAtom- クライアント側でプロフィール状態を保持します。settingsAtoms.ts: 各種設定値（フォントなど）を管理します。
AgentSettingsPanel
AIエージェントが使用するツールの設定を管理するパネルコンポーネントです。
- 責務:
- 各ツールの有効/無効を切り替え。
- ツール実行時の確認（承認）要否を設定。
- 以下のツールを管理:
- Web Search: Web検索によるリアルタイム情報の取得
- Artifact Editor: ドキュメント、コード、プロット構造の作成・編集
- Internal Thought: 推論ステップの記録（常に有効推奨）
- Project Reader: 現在のプロジェクトデータ、キャラクター、プロットへのアクセス
- 関連Atoms:
toolsConfigAtom: 各ツールの設定（有効/無効、確認要否）を管理
アバター選択ダイアログ (AvatarSelectionDialog)
ユーザーがプロフィール画像をプリセットから選択するためのダイアログコンポーネントです。
- 特徴:
- 2ステップ選択フロー: 最初に「Human (Free)」と「Intelligent Animal (Pro)」のカテゴリ選択カードを表示し、ユーザーを誘導します。
- カテゴリ別グリッド: 選択したカテゴリに応じてアバターをレスポンシブなグリッドで表示。
- プレミアムなカードデザイン: カテゴリ選択画面では、代表的なアバター画像を使用した視覚的に魅力的なカードを提供。
- Proプラン制限: Pro未加入ユーザーに対してはProカテゴリに鍵アイコンを表示し、選択時にアップグレードを促すトースト通知を表示します。
- ナビゲーション: グリッド表示からカテゴリ選択へ戻る「戻るボタン」を完備。
- 参照データ:
src/lib/constants.tsのAVATAR_TIERSオブジェクトから画像パスを取得します。
サーバーアクション
updateProfile (src/app/settings/actions.ts)
ユーザープロフィールを更新するためのServer Actionです。
- 引数:
formData(username, avatarUrl) - 検証:
zodスキーマを使用して、ユーザー名の長さとアバターURLの妥当性（プリセットに含まれているか）を検証します。 - 処理: Supabaseの
profilesテーブルを更新し、成功時はrevalidatePathを呼び出してUIを更新します。