fix: timeline selection ui

[ameer2468]

Summary by CodeRabbit

• UI Updates
  • Captions and Performance buttons now consistently display as "coming soon"
  • Enhanced panel visibility behavior with improved animations during timeline interactions

[coderabbitai]

Walkthrough

This PR refactors UI state management for the editor sidebar. The ConfigSidebar transitions from conditionally rendering elements to maintaining a persistent DOM panel controlled via CSS classes and animations. The Header simplifies button availability logic by hardcoding two buttons to always display "coming soon".

Changes

Cohort / File(s)	Summary
Editor sidebar persistent panel apps/desktop/src/routes/editor/ConfigSidebar.tsx	Replaced conditional Show-based rendering with a persistent panel toggled via classList.hidden and animation classes based on editorState.timeline.selection
Editor header button logic apps/desktop/src/routes/editor/Header.tsx	Changed Captions and Performance buttons to always indicate "coming soon" by replacing conditional selection-based comingSoon props with hardcoded true values

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• ConfigSidebar refactoring from Show-based conditional rendering to persistent DOM with class-based visibility requires verification of animation and hidden state logic
• Header changes are straightforward property replacements but should confirm no downstream UI behavior is affected

Possibly related PRs

• fix: Top bar labels in editor #1212: Modifies Header.tsx button behavior based on editorState.timeline.selection logic
• feat: Handle timeline selection state in editor UI actions #1030: Updates both ConfigSidebar and Header with selection-aware UI changes
• fix layout breaking when toggling border #1346: Refactors ConfigSidebar panel rendering from conditional overlays to persistent class-based visibility

Suggested labels

Desktop

Poem

🐰 A panel persists where it once did hide,
No Show to render, just classList guide,
Buttons now whisper "soon, soon, very soon",
The sidebar dance plays a different tune!

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: timeline selection ui' directly corresponds to the changes made, which focus on fixing the UI behavior related to timeline selection visibility and button state management.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-selection-ui

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a91f8c4 and 31093a1.

📒 Files selected for processing (2)

• apps/desktop/src/routes/editor/ConfigSidebar.tsx (3 hunks)
• apps/desktop/src/routes/editor/Header.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{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 running pnpm format.

Files:

• apps/desktop/src/routes/editor/Header.tsx
• apps/desktop/src/routes/editor/ConfigSidebar.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/Header.tsx
• apps/desktop/src/routes/editor/ConfigSidebar.tsx

🧬 Code graph analysis (1)

apps/desktop/src/routes/editor/Header.tsx (1)

apps/desktop/src/routes/editor/ui.tsx (1)

• EditorButton (353-418)

⏰ 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: Analyze (javascript-typescript)
• GitHub Check: Analyze (rust)

🔇 Additional comments (4)

apps/desktop/src/routes/editor/Header.tsx (2)

109-116: LGTM - Simplified button state management.

The hardcoded comingSoon={true} simplifies the UI by making the Captions button consistently unavailable, removing the previous dependency on timeline selection state. This aligns well with the PR's objective to refactor UI state management.

---

117-124: LGTM - Consistent with Captions button approach.

Hardcoding comingSoon={true} for the Performance button maintains consistency with the Captions button and further simplifies the UI state logic.

apps/desktop/src/routes/editor/ConfigSidebar.tsx (2)

336-338: LGTM - Clean visibility control with classList.

The classList approach correctly hides the main configuration scroll container when a timeline selection exists, enabling smooth transitions to the selection panel.

---

651-885: LGTM - Excellent refactoring pattern for animated visibility.

The transition from conditional rendering to a persistent panel with classList-based visibility is a solid pattern that enables smooth animations. The structure is well-designed:

• The outer div provides the animation container (always in DOM)
• The inner Show component provides the selection accessor and guards against rendering errors
• The mutually exclusive visibility with the scroll container ensures clean state transitions

This refactoring improves the timeline selection UI experience while maintaining correct reactivity.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}