# 画面設計書 24-プレイリスト詳細画面

## 概要

本ドキュメントは、Giselle Studioのプレイリスト詳細画面の設計仕様を記載したものです。

### 本画面の処理概要

この画面は、ショーケースで作成されたプレイリストの詳細情報と、プレイリストに含まれるアプリの一覧を表示するための画面です。Spotify風のUIデザインを採用し、プレイリストの編集、削除、アプリの追加が可能です。

**業務上の目的・背景**：関連するAIワークフローをグループ化してプレイリストとして管理することで、特定の用途や目的に合わせたワークフローコレクションを作成・共有できます。これによりチーム内でのワークフローの発見性と再利用性が向上します。

**画面へのアクセス方法**：ショーケース画面のPlaylistタブからプレイリストをクリック、または「/stage/showcase/playlist/{id}」パスに直接アクセスします。stageV2Flagが有効な場合にのみ表示されます。

**主要な操作・処理内容**：
1. プレイリストの基本情報表示（タイトル、説明、アプリ数）
2. プレイリストに含まれるアプリ一覧の表示
3. プレイリストの編集（タイトル、説明の変更）
4. プレイリストの削除
5. アプリの追加（Add Appsボタン）
6. 各アプリの実行、編集、お気に入り登録

**画面遷移**：この画面からはワークフローエディタ画面（/workspaces/{workspaceId}）、プレイグラウンド画面（/stage）に遷移できます。パンくずリストからショーケース画面のPlaylistタブに戻ることができます。

**権限による表示制御**：ログイン済みユーザーのみアクセス可能です。プレイリストの編集・削除は作成者のみ可能です（現在は全ユーザーがアクセス可能）。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 61 | アプリ取得 | 主機能 | プレイリスト内のアプリ詳細の取得と表示 |

## 画面種別

詳細

## URL/ルーティング

`/stage/showcase/playlist/[id]`
- 動的パラメータ: `id` (プレイリストID)

## 入出力項目

| 項目名 | 型 | 入出力 | 必須 | 説明 |
|--------|-----|--------|------|------|
| id | string | 入力 | 必須 | プレイリストのID（URLパラメータ） |
| editForm.title | string | 入力 | 必須 | プレイリストのタイトル（編集時） |
| editForm.description | string | 入力 | - | プレイリストの説明（編集時） |

## 表示項目

| 項目名 | 説明 | データソース |
|--------|------|-------------|
| プレイリストタイトル | プレイリストの表示名 | playlist.title |
| プレイリスト説明 | プレイリストの説明文 | playlist.description |
| アプリ数 | プレイリストに含まれるアプリの数 | playlist.apps.length |
| サムネイル | グラデーションのサムネイル画像 | CSS生成 |
| アプリ一覧 | プレイリスト内のアプリリスト | playlist.apps |
| アプリ名 | 各アプリの名前 | app.name |
| アプリ更新日時 | 各アプリの最終更新日時 | app.updatedAt |

## イベント仕様

### 1-Edit Playlist押下（ドロップダウン）

ドロップダウンメニューからEdit Playlistを選択すると、編集ダイアログが表示されます。タイトルと説明を変更してSaveボタンで保存できます（現在未実装）。

### 2-Delete Playlist押下（ドロップダウン）

ドロップダウンメニューからDelete Playlistを選択すると、プレイリストが削除されます（現在未実装）。

### 3-Add Apps押下

Add Appsボタン押下時、アプリ追加機能が呼び出されます（現在未実装）。

### 4-アプリRun押下

Playボタン押下時、/stage?workspaceId={workspaceId}に遷移してアプリを実行します。

### 5-アプリEdit押下

Editボタン押下時、/workspaces/{workspaceId}に遷移してワークフローエディタでアプリを編集します。workspaceIdがない場合は/playgroundに遷移します。

### 6-アプリお気に入り押下

Starボタン押下時、お気に入り登録/解除を行います（現在未実装）。

### 7-パンくずリストクリック

Showcaseリンク押下時、/stage/showcaseに遷移します。Playlistリンク押下時、/stage/showcase?tab=Playlistに遷移します。

### 8-編集ダイアログSave押下

Saveボタン押下時、タイトルのバリデーションを行い、エラーがなければプレイリストを更新します（現在コンソールログのみ）。

### 9-編集ダイアログCancel押下

Cancelボタン押下時、ダイアログを閉じて編集をキャンセルします。

## データベース更新仕様

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | - | - | モックデータを使用（DB未使用） |
| プレイリスト編集 | - | - | 未実装 |
| プレイリスト削除 | - | - | 未実装 |
| アプリ追加 | - | - | 未実装 |

### テーブル別更新項目詳細

現在モックデータを使用しているため、データベースへの更新は行われません。

## メッセージ仕様

| 種別 | メッセージ | 表示条件 |
|------|----------|----------|
| 空状態 | No apps yet | プレイリスト内のアプリが0件の場合 |
| バリデーションエラー | Playlist title is required | タイトル未入力時 |
| 保存エラー | Failed to save playlist. Please try again. | 保存処理失敗時 |

## 例外処理

| 状態 | 処理 |
|------|------|
| stageV2Flag無効 | 404ページ（notFound）を表示 |
| プレイリストが存在しない | 404ページを表示 |

## 備考

- この画面はstageV2Flagによる機能フラグ制御下にあります
- プレイリストデータは現在モックデータを使用しており、実際のDB保存・取得は未実装です
- プレイリストの編集・削除・アプリ追加機能は現在コンソールログのみの実装です
- Spotify風のUIデザイン（大きなサムネイル、ヘッダーレイアウト）を採用しています
- サムネイルはCSSグラデーションで生成されており、画像アップロード機能は未実装です
- レスポンシブデザインに対応し、モバイル/デスクトップで異なるレイアウトを提供します

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

プレイリスト詳細で使用されるデータ構造を把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | playlist-detail-client.tsx | `apps/studio.giselles.ai/app/(main)/stage/showcase/playlist/[id]/playlist-detail-client.tsx` | App, Playlistインターフェース定義（行21-35） |

**読解のコツ**: Playlistはapps配列をネストで持ち、各Appはid, name, workspaceId, updatedAtを含みます。

#### Step 2: エントリーポイントを理解する

サーバーコンポーネントとしてのページの処理を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | page.tsx | `apps/studio.giselles.ai/app/(main)/stage/showcase/playlist/[id]/page.tsx` | モックデータ定義とfetchPlaylistById関数 |

**主要処理フロー**:
1. **行70-76**: stageV2Flagの確認と404処理
2. **行78-79**: URLパラメータからプレイリストID取得
3. **行12-68**: fetchPlaylistById関数でモックデータからプレイリスト検索
4. **行81-83**: プレイリストが存在しない場合は404
5. **行85**: PlaylistDetailClientコンポーネントにデータを渡す

#### Step 3: クライアントコンポーネントを理解する

UIとインタラクションの実装を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | playlist-detail-client.tsx | `apps/studio.giselles.ai/app/(main)/stage/showcase/playlist/[id]/playlist-detail-client.tsx` | Spotify風レイアウト、編集ダイアログ、アプリリスト表示 |

**主要処理フロー**:
- **行43-48**: 編集フォームの状態管理
- **行55-62**: 編集ダイアログ表示処理
- **行64-88**: 編集保存処理（バリデーション含む）
- **行90-93**: 削除処理（未実装）
- **行95-98**: アプリ追加処理（未実装）
- **行119-143**: パンくずリストナビゲーション
- **行145-233**: Spotify風ヘッダーレイアウト
- **行235-332**: アプリリスト表示
- **行335-410**: 編集ダイアログ

### プログラム呼び出し階層図

```
page.tsx (Server Component)
    │
    ├─ stageV2Flag() - 機能フラグ確認
    │
    ├─ fetchPlaylistById()
    │      └─ mockPlaylists.find() - モックデータから検索
    │
    └─ PlaylistDetailClient (Client Component)
           ├─ handleEditPlaylist() - 編集ダイアログ表示
           ├─ handleSaveEdit() - 編集保存
           ├─ handleDeletePlaylist() - 削除（未実装）
           ├─ handleAddApps() - アプリ追加（未実装）
           ├─ DropdownMenu - 編集/削除メニュー
           └─ Dialog - 編集ダイアログ
```

### データフロー図

```
[入力]                         [処理]                          [出力]

id (URL param) ───────────────▶ fetchPlaylistById() ──────────▶ Playlist
         │                           │
         │                   mockPlaylists.find()
         │                           │
         └───────────────────────────▶──────────────────────────▶ PlaylistDetailClient
                                                                        │
editForm ─────────────────────▶ handleSaveEdit() ─────────────▶ console.log (未実装)
         │                           │
         └─── バリデーション ──────────▶ editError
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `apps/studio.giselles.ai/app/(main)/stage/showcase/playlist/[id]/page.tsx` | ソース | サーバーコンポーネント、モックデータ |
| playlist-detail-client.tsx | `apps/studio.giselles.ai/app/(main)/stage/showcase/playlist/[id]/playlist-detail-client.tsx` | ソース | クライアントコンポーネント、UI表示 |
| dialog.tsx | `internal-packages/ui/src/dialog/dialog.tsx` | ソース | ダイアログUI |
| button.tsx | `internal-packages/ui/src/button/button.tsx` | ソース | ボタンUI |
| card.tsx | `apps/studio.giselles.ai/app/(main)/settings/components/card.tsx` | ソース | カードUI |
| flags.ts | `apps/studio.giselles.ai/flags.ts` | ソース | stageV2Flagの定義 |
