feat: implement tab reordering feature #37
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughThis update introduces drag-and-drop reordering for tabs within the formatter, compare, and codegen tab containers. The CSS is extended to provide visual feedback when dragging or hovering over tabs, including transitions, opacity changes, and border effects. In JavaScript, a new function manages drag event listeners and updates the global state when tabs are reordered. The reordering logic is invoked after loading the global state and when creating or restoring tabs. Additionally, a minor bug fix and code cleanup are included. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TabButton
participant TabContainer
participant GlobalState
User->>TabButton: Drag start
TabButton->>TabContainer: Set .dragging class
User->>TabButton: Drag over another tab
TabButton->>TabContainer: Set .drag-over class on target
User->>TabButton: Drop tab
TabButton->>TabContainer: Move dragged tab before target
TabContainer->>GlobalState: Update tab order
TabContainer->>TabButton: Remove .dragging and .drag-over classes
Possibly related PRs
Poem
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (17)
🪧 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: 0
🧹 Nitpick comments (2)
index.js (2)
1202-1207: Consider error handling for the user input elementThe code assumes the "userInput" element always exists in the DOM, but there's no error handling if it doesn't.
let userInputValue = ""; // This variable will store filename input from user using the following event listener: -document.getElementById("userInput").addEventListener("input", function (e) { +const userInputElement = document.getElementById("userInput"); +if (userInputElement) { + userInputElement.addEventListener("input", function (e) { userInputValue = e.target.value; //console.log("Saved input:", userInputValue); // Optional: see it live -}); + }); +}Also, consider removing the commented-out console.log statement.
1331-1370: Well-implemented drag-and-drop functionalityThe enableTabReordering function is well-structured and covers all necessary drag events. It correctly:
- Sets the draggable attribute
- Manages visual feedback classes
- Handles the actual reordering logic
- Saves the global state after reordering
Consider adding a check to prevent attaching multiple event listeners to the same element if this function is called repeatedly:
function enableTabReordering(containerId) { const container = document.getElementById(containerId); const tabButtons = container.querySelectorAll(".tab-button[data-tab]"); tabButtons.forEach((button) => { + // Skip if already draggable to prevent duplicate event listeners + if (button.draggable === true) return; button.draggable = true; button.addEventListener("dragstart", (e) => { e.dataTransfer.setData("text/plain", button.getAttribute("data-tab")); button.classList.add("dragging"); }); // Rest of the event listeners... }); }Also, consider adding touch event support for mobile devices.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
index.css(1 hunks)index.js(7 hunks)
🔇 Additional comments (9)
index.css (3)
588-592: Good use of visual feedback for dragged tabsThe
.tab-button.draggingclass provides clear visual cues with reduced opacity and a dashed blue border, making it obvious which tab is being dragged.
594-596: Well-implemented transitions for smooth animationsAdding transition properties to the tab buttons ensures smooth animations during drag operations, resulting in a more polished user experience.
598-601: Effective hover state styling for drop targetsThe subtle transform and box-shadow effects on drop targets provide excellent visual feedback to users about where the dragged tab will be placed.
index.js (6)
109-111: Good initialization of tab reordering after loading global stateEnabling tab reordering for all tab containers after loading the global state ensures the feature works with existing tabs.
249-249: Ensuring feature works with newly created tabsCalling enableTabReordering after creating a new formatter tab ensures the new tab also gets the drag-and-drop functionality.
428-428: Consistent application of tab reordering to compare tabsEnabling tab reordering for new compare tabs maintains feature consistency across different tab types.
466-466: Ensuring feature works with restored compare tabsEnabling tab reordering for tabs created from saved data ensures the feature works with all tabs, regardless of how they were created.
642-642: Complete coverage of tab reordering for codegen tabsEnabling tab reordering for codegen tabs created from saved data ensures consistent behavior across all tab types.
1200-1200: Fixed syntax error in downloadFile functionGood catch on fixing the extraneous closing brace in the downloadFile function.
Summary by CodeRabbit
New Features
Bug Fixes
Style