Refactor story management components and enhance track editor integration

- Updated AppFrame to conditionally render StoryTrackEditor based on the selected story and route.
- Modified FloatingGenerateBox to adjust its position based on the visibility of the track editor.
- Improved StoriesTab by removing direct track editor rendering and relying on the new store state for height management.
- Enhanced StoryContent to dynamically calculate bottom padding based on the track editor's height.
- Introduced trackEditorHeight state in storyStore for better UI management of the track editor's visibility and size.

app/src/stores/storyStore.ts

@@ -6,6 +6,10 @@ interface StoryPlaybackState {
   selectedStoryId: string | null;
   setSelectedStoryId: (id: string | null) => void;
 
+  // Track editor UI state
+  trackEditorHeight: number;
+  setTrackEditorHeight: (height: number) => void;
+
   // Playback state
   isPlaying: boolean;
   currentTimeMs: number;
@@ -24,11 +28,17 @@ interface StoryPlaybackState {
   setPlaybackTiming: (contextTime: number, storyTime: number) => void; // Set timing anchors for Web Audio API
 }
 
+const DEFAULT_TRACK_EDITOR_HEIGHT = 200;
+
 export const useStoryStore = create<StoryPlaybackState>((set, get) => ({
   // Selection
   selectedStoryId: null,
   setSelectedStoryId: (id) => set({ selectedStoryId: id }),
 
+  // Track editor UI state
+  trackEditorHeight: DEFAULT_TRACK_EDITOR_HEIGHT,
+  setTrackEditorHeight: (height) => set({ trackEditorHeight: height }),
+
   // Playback state
   isPlaying: false,
   currentTimeMs: 0,