[issue-#6952]Cycle Details Sidebar resize #6953
Conversation
|
|
WalkthroughThis update modifies the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Sidebar (UI)
participant CycleDetailPage (Component)
User->>Sidebar (UI): MouseDown on drag bar
Sidebar (UI)->>CycleDetailPage: handleMouseDown()
User->>Sidebar (UI): MouseMove (dragging)
Sidebar (UI)->>CycleDetailPage: Adjust sidebarWidth state
User->>Sidebar (UI): MouseUp (release)
Sidebar (UI)->>CycleDetailPage: End resizing, cleanup listeners
Possibly related issues
Poem
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx (1)
53-83: Mouse event handlers for sidebar resizing functionality.The resize implementation follows good practices by:
- Preventing default browser behavior
- Disabling text selection during resize
- Setting constraints (300-500px range)
- Properly cleaning up event listeners
However, there's a minor optimization possible by using a debounce function for the mousemove handler to improve performance during resize operations.
Consider debouncing the mousemove handler to improve performance, especially on slower devices:
+ import { debounce } from 'lodash'; // Add to imports const handleMouseDown = (e: React.MouseEvent) => { e.preventDefault(); isResizing.current = true; document.body.style.userSelect = "none"; const startX = e.clientX; const startWidth = sidebarRef.current?.offsetWidth || sidebarWidth; - const handleMouseMove = (e: MouseEvent) => { + const handleMouseMove = debounce((e: MouseEvent) => { if (!isResizing.current) return; const newWidth = startWidth - (e.clientX - startX); if (newWidth >= 300 && newWidth <= 500) { setSidebarWidth(newWidth); } - }; + }, 10);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx(5 hunks)
🔇 Additional comments (3)
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx (3)
5-5: Added necessary React hooks for sidebar resizing.The import now correctly includes
useRefanduseStatehooks which are required for implementing the new resizable sidebar functionality.
24-25: State setup for sidebar resizing functionality.The
sidebarWidthstate is initialized with 344 pixels which serves as the default width for the sidebar. Good practice to define this as a state variable since it will change dynamically based on user interaction.
43-44: References for tracking sidebar element and resize state.The two refs are well-designed for their purposes:
sidebarReftracks the sidebar DOM elementisResizingis a boolean flag to track whether a resize operation is in progressUsing refs for these purposes is appropriate since they persist between renders without causing re-renders themselves.
| <div | ||
| ref={sidebarRef} | ||
| className={cn( | ||
| "flex h-full flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-4 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]" | ||
| )} | ||
| style={{ | ||
| width: sidebarWidth, | ||
| boxShadow: | ||
| "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)", | ||
| }} | ||
| > | ||
| <CycleDetailsSidebar | ||
| handleClose={toggleSidebar} | ||
| cycleId={cycleId.toString()} | ||
| projectId={projectId.toString()} | ||
| workspaceSlug={workspaceSlug.toString()} | ||
| /> | ||
| <div | ||
| onMouseDown={handleMouseDown} | ||
| className="absolute left-0 top-0 h-full w-2 cursor-col-resize z-[14] transition-colors hover:bg-black/5 active:bg-black/10" | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Resizable sidebar implementation with drag handle.
The sidebar container has been updated properly to use the dynamic width state with good styling for the resize handle. A few suggestions:
- Consider adding ARIA attributes for accessibility
- Save the resized width to localStorage for user preference persistence
Enhance the implementation with accessibility and persistence:
<div
ref={sidebarRef}
className={cn(
"flex h-full flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-4 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
)}
+ aria-label="Cycle details sidebar"
style={{
width: sidebarWidth,
boxShadow:
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
}}
>
<CycleDetailsSidebar
handleClose={toggleSidebar}
cycleId={cycleId.toString()}
projectId={projectId.toString()}
workspaceSlug={workspaceSlug.toString()}
/>
<div
onMouseDown={handleMouseDown}
+ role="separator"
+ aria-controls="sidebar-content"
+ aria-valuenow={sidebarWidth}
+ aria-valuemin={300}
+ aria-valuemax={500}
className="absolute left-0 top-0 h-full w-2 cursor-col-resize z-[14] transition-colors hover:bg-black/5 active:bg-black/10"
/>
</div>Then, update the handleMouseUp function to save the width preference:
const handleMouseUp = () => {
isResizing.current = false;
document.body.style.userSelect = "";
+ localStorage.setItem('cycle_sidebar_width', sidebarWidth.toString());
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("mouseup", handleMouseUp);
};And load the saved width at initialization:
- const [sidebarWidth, setSidebarWidth] = useState(344);
+ const [sidebarWidth, setSidebarWidth] = useState(() => {
+ const savedWidth = localStorage.getItem('cycle_sidebar_width');
+ return savedWidth ? parseInt(savedWidth, 10) : 344;
+ });
|
Our team is evaluating your changes, We are working on coming up a reusable hook to handle these scenarios across the platform. |
Description
This PR works on resizing the Cycle Details sidebar for better visibility of the information.
Type of Change
Screenshots and Media (if applicable)
This is the sidebar minimum width:
This is the sidebar with the maximum width:
Test Scenarios
Resizing the sidebar for a better visibility of the details especially with the progress chart.
References
#6952
Summary by CodeRabbit