feat: add keyboard support for space image and user avatar cropping

[AlexAndBear]

Description

Related Issue

• Fixes cant crop image via keyboard #804

How Has This Been Tested?

• test environment:
• test case 1:
• test case 2:
• ...

Types of changes

• Bugfix
• Enhancement (a change that doesn't break existing code or deployments)
• Breaking change (a modification that affects current functionality)
• Technical debt (addressing code that needs refactoring or improvements)
• Tests (adding or improving tests)
• Documentation (updates or additions to documentation)
• Maintenance (like dependency updates or tooling adjustments)

[Copilot]

Pull Request Overview

This PR adds keyboard cropping controls (arrow keys for movement, plus/minus for zoom) to both the space image modal and avatar upload components.

• Extends the Key enum to include Plus and Minus
• Introduces a new useCropperKeyboardActions composable for binding cropper key events
• Hooks up the new keyboard support in SpaceImageModal.vue and AvatarUpload.vue

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/web-pkg/src/composables/keyboardActions/useKeyboardActions.ts	Added Plus and Minus entries to the Key enum
packages/web-pkg/src/composables/keyboardActions/useCropperKeyboardActions.ts	New composable that binds arrow and zoom key events to a cropper instance
packages/web-pkg/src/composables/keyboardActions/index.ts	Re-exported the new useCropperKeyboardActions
packages/web-pkg/src/components/Spaces/SpaceImageModal.vue	Integrated setCropperInstance for keyboard support
packages/web-pkg/src/components/Avatars/AvatarUpload.vue	Integrated setCropperInstance for keyboard support

Comments suppressed due to low confidence (2)

packages/web-pkg/src/composables/keyboardActions/useCropperKeyboardActions.ts:4

• The composable does not provide a way to unbind key actions on teardown, which can lead to memory leaks. Consider returning cleanup functions that call removeKeyAction for each binding or use onUnmounted to automatically unbind.

export const useCropperKeyboardActions = () => {

packages/web-pkg/src/composables/keyboardActions/useCropperKeyboardActions.ts:1

• There are no unit tests covering the new useCropperKeyboardActions behavior. Consider adding tests to validate that key bindings trigger the expected cropper methods.

import { Ref, unref } from 'vue'

[kulmann]

Feels very natural, nice! One thing I'm not entirely sure about: when you use the keyboard for zooming and/or panning, the focus automatically moves to the Cancel button, so hitting enter will cancel the dialog. I think it should either confirm the image selection with enter or do nothing (requiring the user to use the TAB key to navigate to the confirm button). What do you think?

Also: could you try to squeeze a small text hint below the image canvas? Zoom via +/-, pan via ... (utf8 chars for arrows in the four directions) in grey and small just below the image was what I was thinking about.

[AlexAndBear]

Feels very natural, nice! One thing I'm not entirely sure about: when you use the keyboard for zooming and/or panning, the focus automatically moves to the Cancel button, so hitting enter will cancel the dialog. I think it should either confirm the image selection with enter or do nothing (requiring the user to use the TAB key to navigate to the confirm button). What do you think?

Also: could you try to squeeze a small text hint below the image canvas? Zoom via +/-, pan via ... (utf8 chars for arrows in the four directions) in grey and small just below the image was what I was thinking about.

👍 adjusted

[kulmann]

Soooo nice improvements! ⌨️ 😍