Fix hotbar items drag-n-drop bugs (#4433)

src/common/hotbar-store.ts

@@ -230,6 +230,7 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     return index;
   }
 
+  @action
   restackItems(from: number, to: number): void {
     const { items } = this.getActive();
     const source = items[from];

src/renderer/components/hotbar/hotbar-menu.scss

@@ -29,6 +29,14 @@
   width: var(--hotbar-width);
   overflow: hidden;
 
+  &.draggingOver::after {
+    content: " ";
+    position: fixed;
+    left: var(--hotbar-width);
+    width: 100%;
+    height: 100%;
+  }
+
   .HotbarItems {
     --cellWidth: 40px;
     --cellHeight: 40px;

src/renderer/components/hotbar/hotbar-menu.tsx

@@ -33,6 +33,7 @@ import { HotbarSelector } from "./hotbar-selector";
 import { HotbarCell } from "./hotbar-cell";
 import { HotbarIcon } from "./hotbar-icon";
 import { defaultHotbarCells, HotbarItem } from "../../../common/hotbar-types";
+import { action, makeObservable, observable } from "mobx";
 
 interface Props {
   className?: IClassName;
@@ -40,6 +41,13 @@ interface Props {
 
 @observer
 export class HotbarMenu extends React.Component<Props> {
+  @observable draggingOver = false;
+
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   get hotbar() {
     return HotbarStore.getInstance().getActive();
   }
@@ -54,9 +62,17 @@ export class HotbarMenu extends React.Component<Props> {
     return catalogEntityRegistry.getById(item?.entity.uid) ?? null;
   }
 
+  @action
+  onDragStart() {
+    this.draggingOver = true;
+  }
+
+  @action
   onDragEnd(result: DropResult) {
     const { source, destination } = result;
 
+    this.draggingOver = false;
+
     if (!destination) {  // Dropped outside of the list
       return;
     }
@@ -165,9 +181,9 @@ export class HotbarMenu extends React.Component<Props> {
     const hotbar = hotbarStore.getActive();
 
     return (
-      <div className={cssNames("HotbarMenu flex column", className)}>
+      <div className={cssNames("HotbarMenu flex column", { draggingOver: this.draggingOver }, className)}>
         <div className="HotbarItems flex column gaps">
-          <DragDropContext onDragEnd={this.onDragEnd.bind(this)}>
+          <DragDropContext onDragStart={() => this.onDragStart()} onDragEnd={(result) => this.onDragEnd(result)}>
             {this.renderGrid()}
           </DragDropContext>
         </div>