Implement auto-activation of stories in StoryTrackEditor and improve playback state management

- Added useEffect to automatically activate the story when the editor is shown, ensuring the playhead is visible.
- Introduced setActiveStory function in storyStore to manage story activation without playback.
- Updated playback state checks to reflect the current playing status accurately.
- Enhanced UI to always display the playhead for better user experience during playback.

app/src/stores/storyStore.ts

@@ -28,6 +28,7 @@ interface StoryPlaybackState {
   stop: () => void;
   seek: (timeMs: number) => void;
   setPlaybackTiming: (contextTime: number, storyTime: number) => void; // Set timing anchors for Web Audio API
+  setActiveStory: (storyId: string, items: StoryItemDetail[], totalDurationMs: number) => void; // Activate story for seeking without playing
 }
 
 const DEFAULT_TRACK_EDITOR_HEIGHT = 250;
@@ -126,4 +127,18 @@ export const useStoryStore = create<StoryPlaybackState>((set, get) => ({
       playbackStartStoryTime: storyTime,
     });
   },
+
+  setActiveStory: (storyId, items, totalDurationMs) => {
+    const currentState = get();
+    // Only update if switching to a different story
+    if (currentState.playbackStoryId !== storyId) {
+      set({
+        playbackStoryId: storyId,
+        playbackItems: items,
+        totalDurationMs,
+        currentTimeMs: 0,
+        isPlaying: false,
+      });
+    }
+  },
 }));