Enable wheel scrolling during reorder with dnd-kit

[0suu]

Summary

• integrate dnd-kit sortable context for device and scene reorder flows while preserving existing UI behavior
• allow wheel scrolling during drag operations and keep reorder state synchronized with visible items
• add dnd-kit packages to project dependencies

Testing

• Not run (npm install blocked by registry access restrictions)

---

Codex Task

[gemini-code-assist]

Summary of Changes

Hello @0suu, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user experience for reordering devices and scenes by migrating the drag-and-drop logic to the dnd-kit library. This change not only streamlines the underlying implementation but also introduces crucial usability improvements, such as the ability to scroll the page during a drag operation, ensuring a more fluid and intuitive interaction for users managing their lists.

Highlights

• Drag and Drop Library Integration: The dnd-kit library has been integrated to manage drag-and-drop functionality for reordering devices and scenes, replacing previous custom implementations.
• Wheel Scrolling During Drag: Users can now scroll the page using the mouse wheel while performing a drag operation, improving the reordering experience for long lists.
• State Synchronization: The reorder state is now synchronized with visible items, ensuring a consistent user interface during drag operations.
• Dependency Update: New dnd-kit packages (@dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities) have been added to the project dependencies.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request is a great improvement, replacing a manual drag-and-drop implementation with the dnd-kit library for reordering devices and scenes. This enhances maintainability and enables new features like wheel scrolling during drag operations. The code is well-structured, introducing new sortable components that cleanly encapsulate the drag-and-drop logic. My feedback consists of a few minor suggestions to remove some redundant logic and leftover code to further improve clarity. Overall, this is a solid and well-executed refactoring.

[gemini-code-assist]

The opacity style is conditional on isDragging || draggingId === device.deviceId. The isDragging property from the useSortable hook is sufficient to determine if the item is being dragged. Using draggingId from the parent component's state is redundant here and can be removed for clarity.

Suggested change

	opacity: isDragging || draggingId === device.deviceId ? 0.5 : 1,
	opacity: isDragging ? 0.5 : 1,

[gemini-code-assist]

The outline style is conditional on dragOverId === device.deviceId || isOver. The isOver property from the useSortable hook is sufficient to determine if a draggable item is over the current sortable item. Using dragOverId from the parent component's state is redundant here and can be removed for clarity.

Suggested change

	outline: dragOverId === device.deviceId || isOver ? "2px solid" : "none",
	outline: isOver ? "2px solid" : "none",

[gemini-code-assist]

In the rendering logic for when isReorderMode is false, the Box component has an opacity style that depends on draggingId. However, draggingId is only set when isReorderMode is true, so it will always be null in this case. This makes the opacity and transition styles redundant and they can be removed for clarity.

[gemini-code-assist]

The opacity style is conditional on isDragging || draggingId === scene.sceneId. The isDragging property from the useSortable hook is sufficient to determine if the item is being dragged. Using draggingId from the parent component's state is redundant here and can be removed for clarity.

Suggested change

	opacity: isDragging || draggingId === scene.sceneId ? 0.5 : 1,
	opacity: isDragging ? 0.5 : 1,

[gemini-code-assist]

The outline style is conditional on dragOverId === scene.sceneId || isOver. The isOver property from the useSortable hook is sufficient to determine if a draggable item is over the current sortable item. Using dragOverId from the parent component's state is redundant here and can be removed for clarity.

Suggested change

	outline: dragOverId === scene.sceneId || isOver ? "2px solid" : "none",
	outline: isOver ? "2px solid" : "none",

[gemini-code-assist]

In the rendering logic for when isReorderMode is false, the Box component has an opacity style that depends on draggingId. However, draggingId is only set when isReorderMode is true, so it will always be null in this case. This makes the opacity and transition styles redundant and they can be removed for clarity.