feat: improved <DraggableButton /> rotations

src/components/DraggableButton.tsx

@@ -26,7 +26,6 @@ export const DraggableButton = React.forwardRef<
 >(({ children, ...props }, ref) => {
 	const [position, setPosition] = useState({ x: 0, y: 0 });
 	const [rotation, setRotation] = useState(0);
-	const baseRotation = useRef(0);
 	const [isDragging, setIsDragging] = useState(false);
 	const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
 	const [isInitialized, setIsInitialized] = useState(false);
@@ -42,9 +41,8 @@ export const DraggableButton = React.forwardRef<
 		if (!el || isInitialized) return;
 
 		// Extract initial rotation from transform style
-		const transform = window.getComputedStyle(el).transform;
+		const rotate = window.getComputedStyle(el).rotate;
-		const matrix = new DOMMatrix(transform);
+		setRotation(parseFloat(rotate));
-		baseRotation.current = Math.atan2(matrix.b, matrix.a) * (180 / Math.PI);
 
 		const rect = el.getBoundingClientRect();
 		const parentRect = el.parentElement?.getBoundingClientRect() ?? rect;
@@ -55,10 +53,10 @@ export const DraggableButton = React.forwardRef<
 
 		// Set position and clear any bottom/right values
 		el.style.position = "absolute";
-		el.style.top = `${top}px`;
+		// el.style.top = `${top}px`;
-		el.style.left = `${left}px`;
+		// el.style.left = `${left}px`;
-		el.style.bottom = "unset";
+		// el.style.bottom = "unset";
-		el.style.right = "unset";
+		// el.style.right = "unset";
 		el.style.transition = "none";
 
 		setPosition({ x: left, y: top });
@@ -74,7 +72,7 @@ export const DraggableButton = React.forwardRef<
 		// Remove the transition property entirely
 		el.style.left = `${position.x}px`;
 		el.style.top = `${position.y}px`;
-		el.style.transform = `rotateZ(${rotation}deg)`;
+		el.style.rotate = `${rotation}deg`;
 
 		const handleKeyDown = (e: KeyboardEvent) => {
 			if (e.key === "Escape") setIsDragging(false);
@@ -173,9 +171,6 @@ export const DraggableButton = React.forwardRef<
 	const handleEnd = () => {
 		setIsDragging(false);
 
-		// Remove the rotation reset - let chaos reign!
-		// setRotation(baseRotation.current);
-
 		// Start momentum animation
 		if (
 			Math.abs(lastVelocity.current.x) > 0.1 ||