Enhance story item management with track editing functionality

- Introduced StoryTrackEditor component for managing story item positions and tracks.
- Updated StoriesTab to conditionally render the track editor based on selected story.
- Implemented moveStoryItem API endpoint to handle item repositioning and track changes.
- Enhanced story item data model to include track information.
- Improved audio playback management to support multiple tracks using Web Audio API.
- Added hooks for moving story items and managing playback timing.

app/src/lib/api/client.ts

@@ -20,6 +20,7 @@ import type {
   StoryItemDetail,
   StoryItemBatchUpdate,
   StoryItemReorder,
+  StoryItemMove,
 } from './types';
 
 class ApiClient {
@@ -425,6 +426,13 @@ class ApiClient {
     });
   }
 
+  async moveStoryItem(storyId: string, generationId: string, data: StoryItemMove): Promise<StoryItemDetail> {
+    return this.request<StoryItemDetail>(`/stories/${storyId}/items/${generationId}/move`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
   async exportStoryAudio(storyId: string): Promise<Blob> {
     const url = `${this.getBaseUrl()}/stories/${storyId}/export-audio`;
     const response = await fetch(url);

app/src/lib/api/types.ts

@@ -143,6 +143,7 @@ export interface StoryItemDetail {
   story_id: string;
   generation_id: string;
   start_time_ms: number;
+  track: number;
   created_at: string;
   profile_id: string;
   profile_name: string;
@@ -167,6 +168,7 @@ export interface StoryDetailResponse {
 export interface StoryItemCreate {
   generation_id: string;
   start_time_ms?: number;
+  track?: number;
 }
 
 export interface StoryItemUpdateTime {
@@ -181,3 +183,8 @@ export interface StoryItemBatchUpdate {
 export interface StoryItemReorder {
   generation_ids: string[];
 }
+
+export interface StoryItemMove {
+  start_time_ms: number;
+  track: number;
+}