fix: persist branch viewing index in store to survive phase remounts
Local useState resets to 0 every time phase transitions from 'generating' back to 'detailing', causing the view to snap back to branch 1. Move viewingIndex to store's currentBranchIndex (already existed) and advance it in generateBranchDetail after success. Component reads from store so remounts no longer lose position. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,3 @@
|
|||||||
import { useState, useEffect, useRef } from 'react'
|
|
||||||
import { Check, RefreshCw, SkipForward, ChevronRight, ChevronLeft } from 'lucide-react'
|
import { Check, RefreshCw, SkipForward, ChevronRight, ChevronLeft } from 'lucide-react'
|
||||||
import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
|
import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
|
||||||
import { GeneratingAnimation } from './GeneratingAnimation'
|
import { GeneratingAnimation } from './GeneratingAnimation'
|
||||||
@@ -7,6 +6,7 @@ import { cn } from '@/lib/utils'
|
|||||||
export function BranchDetailView() {
|
export function BranchDetailView() {
|
||||||
const {
|
const {
|
||||||
selectedBranches,
|
selectedBranches,
|
||||||
|
currentBranchIndex,
|
||||||
generateBranchDetail,
|
generateBranchDetail,
|
||||||
assemble,
|
assemble,
|
||||||
isLoading,
|
isLoading,
|
||||||
@@ -15,24 +15,13 @@ export function BranchDetailView() {
|
|||||||
setError,
|
setError,
|
||||||
} = useAIFlowBuilderStore()
|
} = useAIFlowBuilderStore()
|
||||||
|
|
||||||
const [viewingIndex, setViewingIndex] = useState(0)
|
const viewingIndex = currentBranchIndex
|
||||||
|
const setViewingIndex = (i: number) => useAIFlowBuilderStore.setState({ currentBranchIndex: i })
|
||||||
const currentBranch = selectedBranches[viewingIndex]
|
const currentBranch = selectedBranches[viewingIndex]
|
||||||
|
|
||||||
const allBranchesHaveDetail = selectedBranches.every((b) => b.steps)
|
const allBranchesHaveDetail = selectedBranches.every((b) => b.steps)
|
||||||
const branchesWithDetail = selectedBranches.filter((b) => b.steps).length
|
const branchesWithDetail = selectedBranches.filter((b) => b.steps).length
|
||||||
|
|
||||||
// Auto-advance to next branch without detail after generation completes
|
|
||||||
const prevDetailCount = useRef(branchesWithDetail)
|
|
||||||
useEffect(() => {
|
|
||||||
if (branchesWithDetail > prevDetailCount.current) {
|
|
||||||
prevDetailCount.current = branchesWithDetail
|
|
||||||
const nextIndex = selectedBranches.findIndex((b) => !b.steps)
|
|
||||||
if (nextIndex !== -1) {
|
|
||||||
setViewingIndex(nextIndex)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [branchesWithDetail, selectedBranches])
|
|
||||||
|
|
||||||
const handleGenerate = async (branchName: string) => {
|
const handleGenerate = async (branchName: string) => {
|
||||||
setError(null)
|
setError(null)
|
||||||
await generateBranchDetail(branchName)
|
await generateBranchDetail(branchName)
|
||||||
|
|||||||
@@ -136,8 +136,12 @@ export const useAIFlowBuilderStore = create<AIFlowBuilderState>()((set, get) =>
|
|||||||
const updatedBranches = selectedBranches.map((b) =>
|
const updatedBranches = selectedBranches.map((b) =>
|
||||||
b.name === branchName ? { ...b, steps: response.steps } : b
|
b.name === branchName ? { ...b, steps: response.steps } : b
|
||||||
)
|
)
|
||||||
|
// Advance to the next branch that still needs detail
|
||||||
|
const nextIndex = updatedBranches.findIndex((b) => !b.steps)
|
||||||
|
const currentBranchIndex = nextIndex !== -1 ? nextIndex : updatedBranches.findIndex((b) => b.name === branchName)
|
||||||
set({
|
set({
|
||||||
selectedBranches: updatedBranches,
|
selectedBranches: updatedBranches,
|
||||||
|
currentBranchIndex,
|
||||||
phase: 'detailing',
|
phase: 'detailing',
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user