Do not show duplicate cursor when alt-z is pressed (#6120)

**Problem:**
In #6115 I did not put
the logic into the proper, already existing function, and I caused a
regression (duplicate cursor was shown when alt-z was pressed)

**Fix:**
Revert my original solution and put the logic into the existing
`cursorForKeysPressed` function.
Add new tests to make sure this regression does not happen again.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode

editor/src/components/canvas/controls/new-canvas-controls.spec.browser2.tsx

@@ -1,6 +1,6 @@
 import { BakedInStoryboardUID } from '../../../core/model/scene-utils'
 import * as EP from '../../../core/shared/element-path'
-import { altModifier } from '../../../utils/modifiers'
+import { altModifier, cmdModifier } from '../../../utils/modifiers'
 import {
   makeTestProjectCodeWithSnippet,
   renderTestEditorWithCode,
@@ -131,4 +131,48 @@ describe('Mouse Cursor', () => {
 
     expect(canvasControls.style.cursor).toContain('cursor-duplicate.png')
   })
+  it('Uses the zoom in cursor in select mode when Z is pressed', async () => {
+    const renderResult = await renderTestEditorWithCode(
+      makeTestProjectCodeWithSnippet('<div/>'),
+      'await-first-dom-report',
+    )
+
+    await keyDown('Z')
+    const canvasControls = renderResult.renderedDOM.getByTestId('canvas-controls')
+
+    expect(canvasControls.style.cursor).toContain('cursor-zoom-in.png')
+  })
+  it('Uses the zoom out cursor in select mode when ALT-Z is pressed (and not duplicate)', async () => {
+    const renderResult = await renderTestEditorWithCode(
+      makeTestProjectCodeWithSnippet('<div/>'),
+      'await-first-dom-report',
+    )
+
+    await keyDown('Z', { modifiers: altModifier })
+    const canvasControls = renderResult.renderedDOM.getByTestId('canvas-controls')
+
+    expect(canvasControls.style.cursor).toContain('cursor-zoom-out.png')
+  })
+  it('Uses the default cursor in select mode when CMD-Z is pressed (and not zoom in)', async () => {
+    const renderResult = await renderTestEditorWithCode(
+      makeTestProjectCodeWithSnippet('<div/>'),
+      'await-first-dom-report',
+    )
+
+    await keyDown('Z', { modifiers: cmdModifier })
+    const canvasControls = renderResult.renderedDOM.getByTestId('canvas-controls')
+
+    expect(canvasControls.style.cursor).toContain('cursor-default.png')
+  })
+  it('Uses the open hand cursor in select mode when SPACE is pressed', async () => {
+    const renderResult = await renderTestEditorWithCode(
+      makeTestProjectCodeWithSnippet('<div/>'),
+      'await-first-dom-report',
+    )
+
+    await keyDown('space', { modifiers: cmdModifier })
+    const canvasControls = renderResult.renderedDOM.getByTestId('canvas-controls')
+
+    expect(canvasControls.style.cursor).toContain('cursor-open-hand.png')
+  })
 })

editor/src/components/canvas/controls/new-canvas-controls.tsx

@@ -15,8 +15,7 @@ import type {
 } from '../../editor/store/editor-state'
 import { getMetadata } from '../../editor/store/editor-state'
 import type { ElementPath, NodeModules } from '../../../core/shared/project-file-types'
-import type { CanvasPositions } from '../canvas-types'
-import { CSSCursor } from '../canvas-types'
+import type { CSSCursor, CanvasPositions } from '../canvas-types'
 import { HighlightControl } from './highlight-control'
 import { Substores, useEditorState } from '../../editor/store/store-hook'
 import type { ElementInstanceMetadataMap } from '../../../core/shared/element-template'
@@ -182,14 +181,6 @@ export const NewCanvasControls = React.memo((props: NewCanvasControlsProps) => {
 
   const ref = React.useRef<HTMLDivElement | null>(null)
 
-  const selectModeCursor = React.useMemo(() => {
-    const altKeyPressed = canvasControlProps.keysPressed.alt ?? false
-    if (altKeyPressed) {
-      return CSSCursor.Duplicate
-    }
-    return props.cursor
-  }, [props.cursor, canvasControlProps.keysPressed.alt])
-
   if (isLiveMode(canvasControlProps.editorMode) && !canvasControlProps.keysPressed.cmd) {
     return (
       <div
@@ -238,7 +229,7 @@ export const NewCanvasControls = React.memo((props: NewCanvasControlsProps) => {
             width: `100%`,
             height: `100%`,
             zoom: canvasControlProps.scale >= 1 ? `${canvasControlProps.scale * 100}%` : 1,
-            cursor: selectModeCursor,
+            cursor: props.cursor,
             visibility: canvasControlProps.canvasScrollAnimation ? 'hidden' : 'initial',
           }}
         >

editor/src/templates/editor-canvas.tsx

@@ -133,6 +133,9 @@ function cursorForKeysPressed(
       return CSSCursor.OpenHand
     }
   }
+  if (keysPressed['alt']) {
+    return CSSCursor.Duplicate
+  }
   return null
 }