From e5a6e2022fb59c3928b054bc8d51874465fbe3df Mon Sep 17 00:00:00 2001
From: thomaspblock <thomasp@squareup.com>
Date: Wed, 19 Aug 2026 09:06:58 -0400
Subject: [PATCH] fix(desktop): morph the drawer panel icon instead of sliding
 it (#6306)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
- Replaces the drawer panel icon's CSS `translateX` slide with a
`motion/react` width + corner-radius morph, so the icon reads as the
panel opening rather than the glyph drifting sideways.
- Honors `prefers-reduced-motion` via `useReducedMotion` (no animation
for users who opt out).

Follow-up polish to the projects workspaces work that just landed in
#6003 — the slide animation shipped there was the wrong visual.

## Test plan
- [x] Desktop unit tests and typecheck pass with this file at this
content (validated as part of the projects-v6 branch validation)
- [ ] Visual check: open/close the right drawer and confirm the icon
morphs in place

Signed-off-by: Thomas Petersen <thomasp@squareup.com>
---
 desktop/src/shared/ui/DrawerPanelIcon.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/desktop/src/shared/ui/DrawerPanelIcon.tsx b/desktop/src/shared/ui/DrawerPanelIcon.tsx
index 82752d69ca..d2b621fc63 100644
--- a/desktop/src/shared/ui/DrawerPanelIcon.tsx
+++ b/desktop/src/shared/ui/DrawerPanelIcon.tsx
@@ -1,3 +1,5 @@
+import { motion, useReducedMotion } from "motion/react";
+
 import { cn } from "@/shared/lib/cn";
 
 export function DrawerPanelIcon({
@@ -7,6 +9,9 @@ export function DrawerPanelIcon({
   className?: string;
   side: "left" | "right";
 }) {
+  const prefersReducedMotion = useReducedMotion();
+  const isOpen = side === "left";
+
   return (
     <svg
       aria-hidden="true"
@@ -26,15 +31,18 @@ export function DrawerPanelIcon({
         x="1"
         y="1"
       />
-      <rect
-        className="transition-transform duration-200 ease-out motion-reduce:transition-none"
+      <motion.rect
+        animate={{
+          rx: isOpen ? 2.5 : 1,
+          width: isOpen ? 5 : 2,
+        }}
         fill="currentColor"
         height="14"
-        rx="3"
-        style={{
-          transform: side === "right" ? "translateX(10px)" : "translateX(0)",
+        initial={false}
+        transition={{
+          duration: prefersReducedMotion ? 0 : 0.2,
+          ease: "linear",
         }}
-        width="6"
         x="4"
         y="4"
       />