fix(editor): show scissors cursor when clip tool is active #1218
Conversation
WalkthroughAdds split-mode handling to clip segments (guards in start/end handle events that call projectActions.splitClipSegment when active), applies a scissors cursor class to segment roots in split mode, adds the cursor SVG CSS, and shifts the playhead render by -0.5px. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant UI as Clip UI (Track/ClipTrack)
participant S as EditorState
participant P as ProjectActions
U->>UI: mousedown on segment start/end handle
UI->>S: read timeline.interactMode
alt interactMode == "split"
UI->>UI: compute split time from cursor/handle pos
UI->>P: projectActions.splitClipSegment(splitTime, clipId, segmentId)
P-->>UI: split result (no drag)
else normal mode
UI->>UI: begin drag/resize flow (mouse capture)
UI-->>UI: emit drag updates -> resize/move segment
UI->>P: commit resize/move on end
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used📓 Path-based instructions (3)**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
apps/desktop/src/**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
🔇 Additional comments (7)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx (1)
198-198: Consider memoizing the helper for Solid.js reactivity.The
split()helper is called multiple times throughout the component (lines 356, 363, 412, 503). Following Solid.js best practices for derived state, consider wrapping it withcreateMemo:-const split = () => editorState.timeline.interactMode === "split"; +const split = createMemo(() => editorState.timeline.interactMode === "split");This ensures the value is only recomputed when
editorState.timeline.interactModechanges, rather than on every access.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx(4 hunks)apps/desktop/src/routes/editor/Timeline/styles.css(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Use a 2-space indent for TypeScript code.
Use Biome for formatting and linting TypeScript/JavaScript files by runningpnpm format.Use strict TypeScript and avoid any; leverage shared types
Files:
apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx}: Use kebab-case for filenames for TypeScript/JavaScript modules (e.g.,user-menu.tsx).
Use PascalCase for React/Solid components.
Files:
apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx
apps/desktop/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/desktop/src/**/*.{ts,tsx}: Desktop icons are auto-imported (unplugin-icons); do not import icons manually
Desktop IPC: Call generated tauri_specta commands/events; listen to generated events and use typed interfaces
Use @tanstack/solid-query for server state in the desktop app
Files:
apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build Desktop (x86_64-pc-windows-msvc, windows-latest)
- GitHub Check: Build Desktop (aarch64-apple-darwin, macos-latest)
🔇 Additional comments (2)
apps/desktop/src/routes/editor/Timeline/styles.css (1)
16-24: LGTM!The scissors cursor implementation is correct. The data URL SVG is properly encoded, the hotspot (10, 10) is centered for the 20×20 icon, and the descendant selector appropriately ensures all child elements inherit the cursor.
apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx (1)
356-356: LGTM!The conditional application of the scissors cursor class correctly integrates with the existing class composition logic.
2025-10-17.3.36.45.AM.mp4 |
|
This is great, ty! |
2 participants
Summary by CodeRabbit
New Features
Bug Fixes