Pipeline UI/UX redesign: inline editing, flowchart, sidebar stepper

- Add InlineEditableText, EditableCard, SidebarStepper shared components
- Add PipelineFlowchart (interactive SVG stage visualization)
- Add StageConfigEditor and usePipelineInlineEdit hook
- Redesign detail page: flowchart replaces nested tabs, inline editing
- Redesign creation wizard: sidebar stepper replaces accordion sections
- Enhance list page: status dots, track indicators, relative timestamps
- Convert edit page to redirect (editing now inline on detail page)
- Delete old WizardSection accordion component

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-14 01:54:56 +01:00
parent 70cfad7d46
commit 59f90ccc37
11 changed files with 1609 additions and 935 deletions

View File

@@ -0,0 +1,46 @@
import { trpc } from '@/lib/trpc/client'
import { toast } from 'sonner'
export function usePipelineInlineEdit(pipelineId: string) {
const utils = trpc.useUtils()
const updateMutation = trpc.pipeline.update.useMutation({
onSuccess: () => {
utils.pipeline.getDraft.invalidate({ id: pipelineId })
},
onError: (err) => {
toast.error(`Failed to update pipeline: ${err.message}`)
},
})
const updateConfigMutation = trpc.stage.updateConfig.useMutation({
onSuccess: () => {
utils.pipeline.getDraft.invalidate({ id: pipelineId })
},
onError: (err) => {
toast.error(`Failed to update stage: ${err.message}`)
},
})
const updatePipeline = async (
data: { name?: string; slug?: string; status?: 'DRAFT' | 'ACTIVE' | 'CLOSED' | 'ARCHIVED'; settingsJson?: Record<string, unknown> }
) => {
await updateMutation.mutateAsync({ id: pipelineId, ...data })
toast.success('Pipeline updated')
}
const updateStageConfig = async (
stageId: string,
configJson: Record<string, unknown>,
name?: string
) => {
await updateConfigMutation.mutateAsync({ id: stageId, configJson, name })
toast.success('Stage configuration updated')
}
return {
isUpdating: updateMutation.isPending || updateConfigMutation.isPending,
updatePipeline,
updateStageConfig,
}
}