refactor: decompose ClipBlock.tsx into focused sub-components by ChuxiJ · Pull Request #1052 · ace-step/ACE-Step-DAW

ChuxiJ · 2026-03-27T13:12:44Z

Summary

Decomposes ClipBlock.tsx from 1481 lines down to 486 lines (67% reduction) by extracting focused sub-components and hooks:

useClipDrag.ts (566 lines) -- drag state machine (move, resize-left, resize-right, slip, scissor, range selection)
useClipHover.ts (85 lines) -- cursor management and hover state tracking
useWaveformUpgrade.ts (72 lines) -- async waveform peak upgrade effect
ClipFadeHandles.tsx (185 lines) -- fade in/out handles, overlays, and keyboard/mouse interactions
ClipDragGhost.tsx (153 lines) -- drag ghost portal rendering with cross-track highlight
ClipContextMenuContainer.tsx (161 lines) -- context menu store wiring and callback assembly
ClipVersionNav.tsx (70 lines) -- version navigation buttons
clipPresentation.ts (41 lines) -- clip color/style computation

Pure refactor -- no behavior changes. Exported API of ClipBlock is unchanged.

Test plan

npx tsc --noEmit -- 0 type errors
npm test -- --run -- all 3008 tests pass (319 test files)
npm run build -- succeeds

🤖 Generated with Claude Code

Closes #1026 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

This PR refactors the timeline ClipBlock by extracting drag/hover/waveform-upgrade logic and several UI subcomponents, aiming to keep ClipBlock smaller and more focused while preserving its external API.

Changes:

Extracted clip drag state machine into useClipDrag and hover/cursor handling into useClipHover.
Extracted waveform peak upgrade effect into useWaveformUpgrade.
Extracted UI pieces into ClipFadeHandles, ClipDragGhost, ClipContextMenuContainer, ClipVersionNav, and clipPresentation.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/components/timeline/ClipBlock.tsx	Rewired to use new hooks/components; removed in-file drag/hover/context-menu/ghost logic.
src/components/timeline/useClipDrag.ts	New hook implementing clip drag/resize/slip/scissor/range-selection behavior.
src/components/timeline/useClipHover.ts	New hook for hover state and cursor management.
src/components/timeline/useWaveformUpgrade.ts	New hook for async waveform peak upgrade.
src/components/timeline/ClipFadeHandles.tsx	Extracted fade overlays + fade handle pointer/keyboard interactions.
src/components/timeline/ClipDragGhost.tsx	Extracted drag ghost portal rendering + lane highlighting.
src/components/timeline/ClipContextMenuContainer.tsx	Extracted context menu wiring/handlers assembly.
src/components/timeline/ClipVersionNav.tsx	Extracted version navigation UI + regenerate behavior.
src/components/timeline/clipPresentation.ts	Extracted clip color/style computation.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-27T13:17:43Z

src/components/timeline/useClipDrag.ts

+  getClipContentOffset,
+  getClipSourceSpan,
+} from '../../utils/clipAudio';
+import { ARRANGEMENT_EMPTY_TRACK_ID_PREFIX, parseArrangementEmptyTrackSlotIndex } from '../arrangement/trackSlotLayout';


Unused import: ARRANGEMENT_EMPTY_TRACK_ID_PREFIX is imported but never used (only parseArrangementEmptyTrackSlotIndex is). Removing the unused symbol will keep the module focused and easier to scan.

Suggested change

import { ARRANGEMENT_EMPTY_TRACK_ID_PREFIX, parseArrangementEmptyTrackSlotIndex } from '../arrangement/trackSlotLayout';

import { parseArrangementEmptyTrackSlotIndex } from '../arrangement/trackSlotLayout';

Copilot · 2026-03-27T13:17:44Z

src/components/timeline/ClipBlock.tsx

  const handleClick = useCallback((e: React.MouseEvent) => {
    e.stopPropagation();
-    if (dragRef.current || rangePreviewCommittedRef.current) {
+    if (rangePreviewCommittedRef.current) {
      rangePreviewCommittedRef.current = false;
      return;
    }


handleClick no longer checks whether the last interaction was a drag (previously guarded by dragRef.current). After a move/resize drag ends with mouseup over the clip, a click can still fire and this handler will select/seek unexpectedly. Consider destructuring dragRef from useClipDrag and restoring the drag guard (or otherwise suppressing click after a drag).

Copilot · 2026-03-27T13:17:44Z

src/components/timeline/ClipBlock.tsx

  const handleDoubleClick = useCallback((e: React.MouseEvent) => {
    e.stopPropagation();
-    if (dragRef.current || rangePreviewCommittedRef.current) {
+    if (rangePreviewCommittedRef.current) {
      rangePreviewCommittedRef.current = false;
      return;
    }


handleDoubleClick also lost the previous dragRef.current guard. If a drag gesture ends on the clip, a subsequent dblclick event can still be emitted and open the context menu / piano roll unexpectedly. Re-introduce the drag suppression here as well (e.g., via dragRef from useClipDrag).

Copilot · 2026-03-27T13:17:44Z

src/components/timeline/useClipDrag.ts

+import type { Clip, Track } from '../../types/project';
+import { useUIStore } from '../../store/uiStore';
+import { useProjectStore } from '../../store/projectStore';
+import { useTransportStore } from '../../store/transportStore';


Unused import: useTransportStore is imported but never referenced in this hook. Removing it will reduce noise and avoid confusion about transport state dependencies.

Suggested change

import { useTransportStore } from '../../store/transportStore';

…erged - Marked #1100 and #1101 as already implemented (closed) - Merged 4 refactoring PRs: #1046, #1049, #1050, #1052 - Updated analysis to reflect current state https://claude.ai/code/session_01KYEjWp985CYRCcSm9J46ps

refactor: decompose ClipBlock.tsx into focused sub-components

c3935c1

Closes #1026 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings March 27, 2026 13:12

Copilot started reviewing on behalf of ChuxiJ March 27, 2026 13:13 View session

Copilot AI reviewed Mar 27, 2026

View reviewed changes

ChuxiJ mentioned this pull request Mar 27, 2026

chore: Triage and resolve 27 stalled open PRs #1107

Open

31 tasks

ChuxiJ merged commit 5b49da8 into main Mar 27, 2026
8 checks passed

This was referenced Mar 27, 2026

fix: external audio drop creates sample track instead of Quick Sampler #918

Open

feat: wire aux sends to audio engine with pre/post fader toggle #1039

Open

feat: clip edit mode with persistent generation params and version arrows #1063

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: decompose ClipBlock.tsx into focused sub-components#1052

refactor: decompose ClipBlock.tsx into focused sub-components#1052
ChuxiJ merged 1 commit intomainfrom
refactor/issue-1026-clipblock

ChuxiJ commented Mar 27, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 27, 2026

Uh oh!

Copilot AI Mar 27, 2026

Uh oh!

Copilot AI Mar 27, 2026

Uh oh!

Copilot AI Mar 27, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	import { ARRANGEMENT_EMPTY_TRACK_ID_PREFIX, parseArrangementEmptyTrackSlotIndex } from '../arrangement/trackSlotLayout';
	import { parseArrangementEmptyTrackSlotIndex } from '../arrangement/trackSlotLayout';

Conversation

ChuxiJ commented Mar 27, 2026

Summary

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants