Added panel to select image from images panel to fill images or uploa…

[SoloDevAbu]

Description

Added new modal to show the Images from the Image panel. user can either upload new image or select one from the Images panel and applied in the fill color.

Related Issues

fixes #1550

Type of Change

• Bug fix
• New feature
• Documentation update
• Release
• Refactor
• Other (please describe):

Testing

Tested by running locally

Screenshots (if applicable)

Screencast.from.2025-05-03.20-51-45.webm

---

Important

Added image selection modal to ImagePicker.tsx for selecting or uploading images as fill color.

• New Feature:
  • Added ImageSelectionModal in ImageSelection.tsx for selecting images from the image panel.
  • ImagePicker.tsx updated to include SelectImageButton to open ImageSelectionModal.
  • Users can upload new images or select existing ones to apply as fill color.
• Functionality:
  • ImageSelectionModal filters images based on search input and allows selection.
  • handleImageSelection in ImagePicker.tsx updates image data and inserts selected image into editor.
• UI Components:
  • Added SelectImageButton and integrated it into the image picker UI.
  • ImageSelectionModal uses Dialog, DialogContent, DialogHeader, and DialogTitle for modal display.

^{This description was created by for 3780e45. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Caution

Changes requested ❌

Reviewed everything up to 3780e45 in 1 minute and 54 seconds. Click for details.

• Reviewed 160 lines of code in 2 files
• Skipped 0 files when reviewing.
• Skipped posting 6 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ImageSelection.tsx:22

• Draft comment:
  onOpenChange callback ignores the provided state. Consider checking the open state (e.g., if false then onClose()) to avoid unintended modal closures.
• Reason this comment was not posted:
  Marked as duplicate.

2. apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ImagePicker.tsx:104

• Draft comment:
  New image data sets both 'url' and 'base64' to selectedImage.content. Clarify if this duplication is intentional.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

3. apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ImagePicker.tsx:146

• Draft comment:
  Consider using a React ref for the file input rather than document.getElementById to avoid potential ID collisions.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

4. apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ImageSelection.tsx:36

• Draft comment:
  Using image.fileName as a key might lead to collisions if filenames aren't unique. Consider using a unique identifier if available.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

5. apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ImagePicker.tsx:127

• Draft comment:
  Consider reordering helper function declarations (e.g., moving saveImage above handleDrop) to enhance code clarity, even though the current order works due to closures.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

6. apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ImageSelection.tsx:17

• Draft comment:
  If the list of image assets grows large, consider memoizing the filteredImages (using useMemo) to optimize performance.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

Workflow ID: wflow_Gq87obytDTFKo7JN

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[ellipsis-dev]

The onOpenChange handler always calls onClose unconditionally. Consider using the provided open state (e.g. onOpenChange={(open) => !open && onClose()}) for more robust dialog behavior.

Suggested change

	<Dialog open={isOpen} onOpenChange={() => onClose()}>
	<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>

[Kitenite]

Hello, I am migrating the desktop app to a new repository. This repository will now focus on the web version. This PR has been migrated to the new repository: onlook-dev#6. Sorry for the inconvenience, rest assure your work here will also be adapted for the web version (if it hasn't already).