perf(web): optimize inventory dragging and tooltip rendering

web/src/components/inventory/InventoryHotbar.tsx

@@ -31,7 +31,7 @@ const InventoryHotbar: React.FC = () => {
           <div
             className="hotbar-item-slot"
             style={{
-              backgroundImage: `url(${item?.name ? getItemUrl(item as SlotWithItem) : 'none'}`,
+              backgroundImage: item?.name ? `url(${getItemUrl(item as SlotWithItem)})` : 'none',
             }}
             key={`hotbar-${item.slot}`}
           >

web/src/components/inventory/InventorySlot.tsx

@@ -49,7 +49,7 @@ const InventorySlot: React.ForwardRefRenderFunction<HTMLDivElement, SlotProps> =
                 name: item.name,
                 slot: item.slot,
               },
-              image: item?.name && `url(${getItemUrl(item) || 'none'}`,
+              image: item?.name ? `url(${getItemUrl(item)})` : 'none',
             }
           : null,
       canDrag,
@@ -131,7 +131,7 @@ const InventorySlot: React.ForwardRefRenderFunction<HTMLDivElement, SlotProps> =
             ? 'brightness(80%) grayscale(100%)'
             : undefined,
         opacity: isDragging ? 0.4 : 1.0,
-        backgroundImage: `url(${item?.name ? getItemUrl(item as SlotWithItem) : 'none'}`,
+        backgroundImage: item?.name ? `url(${getItemUrl(item as SlotWithItem)})` : 'none',
         border: isOver ? '1px dashed rgba(255,255,255,0.4)' : '',
       }}
     >

web/src/components/utils/DragPreview.tsx

@@ -30,12 +30,12 @@ export const calculatePointerPosition = (monitor: DragLayerMonitor, childRef: Re
     return null;
   }
 
-  if (!childRef.current || !childRef.current.getBoundingClientRect) {
+  if (!childRef.current) {
     return subtract(offset, calculateParentOffset(monitor));
   }
 
-  const bb = childRef.current.getBoundingClientRect();
-  const middle = { x: bb.width / 2, y: bb.height / 2 };
+  const el = childRef.current as HTMLElement;
+  const middle = { x: el.clientWidth / 2, y: el.clientHeight / 2 };
   return subtract(offset, middle);
 };
 
@@ -55,7 +55,7 @@ const DragPreview: React.FC = () => {
           className="item-drag-preview"
           ref={element}
           style={{
-            transform: `translate(${currentOffset.x}px, ${currentOffset.y}px)`,
+            transform: `translate3d(${currentOffset.x}px, ${currentOffset.y}px, 0)`,
             backgroundImage: data.image,
           }}
         />

web/src/components/utils/ItemNotifications.tsx

@@ -32,7 +32,7 @@ const ItemNotification = React.forwardRef(
       <div
         className="item-notification-item-box"
         style={{
-          backgroundImage: `url(${getItemUrl(slotItem) || 'none'}`,
+          backgroundImage: slotItem ? `url(${getItemUrl(slotItem)})` : 'none',
           ...props.style,
         }}
         ref={ref}

web/src/components/utils/Tooltip.tsx

@@ -16,30 +16,32 @@ const Tooltip: React.FC = () => {
     duration: 200,
   });
 
-  const handleMouseMove = ({ clientX, clientY }: MouseEvent | React.MouseEvent<unknown, MouseEvent>) => {
-    refs.setPositionReference({
-      getBoundingClientRect() {
-        return {
-          width: 0,
-          height: 0,
-          x: clientX,
-          y: clientY,
-          left: clientX,
-          top: clientY,
-          right: clientX,
-          bottom: clientY,
-        };
-      },
-    });
-  };
-
   useEffect(() => {
+    if (!hoverData.open) return;
+
+    const handleMouseMove = ({ clientX, clientY }: MouseEvent) => {
+      refs.setPositionReference({
+        getBoundingClientRect() {
+          return {
+            width: 0,
+            height: 0,
+            x: clientX,
+            y: clientY,
+            left: clientX,
+            top: clientY,
+            right: clientX,
+            bottom: clientY,
+          };
+        },
+      });
+    };
+
     window.addEventListener('mousemove', handleMouseMove);
 
     return () => {
       window.removeEventListener('mousemove', handleMouseMove);
     };
-  }, []);
+  }, [hoverData.open, refs]);
 
   return (
     <>