fix(home): add pointercancel handler; fix(settings): sync name on pro…

…file refetch
simstudioai · waleedlatif1 · Mar 18, 2026 · Mar 18, 2026 · Mar 18, 2026 · Mar 18, 2026
commit 1c6b1553e976d9e9a6db7237c265467ac99dc416
diff --git a/apps/sim/app/workspace/[workspaceId]/home/hooks/use-mothership-resize.ts b/apps/sim/app/workspace/[workspaceId]/home/hooks/use-mothership-resize.ts
@@ -33,29 +33,40 @@ export function useMothershipResize() {
     document.body.style.cursor = 'ew-resize'
     document.body.style.userSelect = 'none'
 
-    const handlePointerMove = (moveEvent: PointerEvent) => {
-      const newWidth = window.innerWidth - moveEvent.clientX
-      const maxWidth = window.innerWidth * MOTHERSHIP_WIDTH.MAX_PERCENTAGE
-      el.style.width = `${Math.min(Math.max(newWidth, MOTHERSHIP_WIDTH.MIN), maxWidth)}px`
-    }
+    // AbortController removes all listeners at once on cleanup/cancel/unmount
+    const ac = new AbortController()
+    const { signal } = ac
 
     const cleanup = () => {
+      ac.abort()
       el.style.transition = prevTransition
       document.body.style.cursor = ''
       document.body.style.userSelect = ''
-      handle.removeEventListener('pointermove', handlePointerMove)
-      handle.removeEventListener('pointerup', handlePointerUp)
       cleanupRef.current = null
     }
 
-    const handlePointerUp = (upEvent: PointerEvent) => {
-      handle.releasePointerCapture(upEvent.pointerId)
-      cleanup()
-    }
+    handle.addEventListener(
+      'pointermove',
+      (moveEvent: PointerEvent) => {
+        const newWidth = window.innerWidth - moveEvent.clientX
+        const maxWidth = window.innerWidth * MOTHERSHIP_WIDTH.MAX_PERCENTAGE
+        el.style.width = `${Math.min(Math.max(newWidth, MOTHERSHIP_WIDTH.MIN), maxWidth)}px`
+      },
+      { signal }
+    )
+
+    handle.addEventListener(
+      'pointerup',
+      (upEvent: PointerEvent) => {
+        handle.releasePointerCapture(upEvent.pointerId)
+        cleanup()
+      },
+      { signal }
+    )
 
-    cleanupRef.current = cleanup
-    handle.addEventListener('pointermove', handlePointerMove)
-    handle.addEventListener('pointerup', handlePointerUp)
+    // Browser fires pointercancel when it reclaims the gesture (scroll, palm rejection, etc.)
+    // Without this, body cursor/userSelect and transition would be permanently stuck
+    handle.addEventListener('pointercancel', cleanup, { signal })
   }, [])
 
   // Tear down any active drag if the component unmounts mid-drag

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
@@ -68,10 +68,10 @@ export function General() {
   const [name, setName] = useState(profile?.name || '')
   const [isEditingName, setIsEditingName] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
-  const hasInitializedNameRef = useRef(false)
+  const [prevProfileName, setPrevProfileName] = useState(profile?.name)
 
-  if (!hasInitializedNameRef.current && profile?.name) {
-    hasInitializedNameRef.current = true
+  if (profile?.name && profile.name !== prevProfileName) {
+    setPrevProfileName(profile.name)
     setName(profile.name)
   }