🎨 Palette: Add visual feedback for image drag and drop

[sunalan2025]

💡 What

Added explicit visual feedback to the image upload dropzone when a file is actively being dragged over it.

🎯 Why

Previously, dragging a file over the upload area provided no visual indication that the interface was ready to accept the file. This creates a poor interaction experience, as users may be unsure if their drag-and-drop action will be successful. By adding a distinct visual state (highlighted background, primary border color, and updated text), users receive immediate, clear feedback.

📸 Before/After

(Verified via Playwright screenshot tests showing the highlighted dropzone and "松开即可添加图片" text during the dragover event).

♿ Accessibility

Improves general usability and cognitive accessibility by providing immediate, clear visual and textual feedback during a complex interaction (drag and drop).

---

PR created automatically by Jules for task 480662008320704471 started by @sunalan2025

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[Copilot]

🔵 Needs a closer look

Current onDragLeave/onDragOver handling can incorrectly clear the drag state when moving over child elements, causing flicker and unreliable visual feedback.

Pull request overview

This PR adds a visual “active drag” state to the image upload dropzone in ImageUploader, improving user feedback during drag-and-drop interactions.

Changes:

• Introduced isDragging state to control highlighted dropzone styling.
• Updated dropzone helper text to change during active drag-over.
• Added a palette note documenting the drag-state UX pattern.

File summaries

File	Description
src/components/ImageUploader.tsx	Adds drag state (isDragging) and uses it to adjust dropzone styles/text during drag-and-drop.
.jules/palette.md	Documents the rationale/pattern for explicit drag-state visual feedback in custom dropzones.

Review details

Suppressed comments (2)

src/components/ImageUploader.tsx:117

• onDragLeave will fire when the cursor moves from the dropzone onto its child elements (icon/text), which can toggle isDragging back to false while the user is still dragging within the dropzone. Also, setting isDragging from dragover isn’t ideal since dragover fires continuously. Consider switching to a drag enter/leave counter (and keep dragover only for preventDefault) so the highlight state is stable until the drag actually leaves the dropzone or completes.

This issue also appears on line 155 of the same file.

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(true);
  };

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
    if (e.dataTransfer.files) {
      addFiles(Array.from(e.dataTransfer.files));
    }
  };

src/components/ImageUploader.tsx:160

• If you adopt a handleDragEnter-based approach (recommended to avoid dragleave flicker), the dropzone also needs to wire onDragEnter to that handler; otherwise isDragging will never become true once handleDragOver stops setting it.

      <div
        role="button"
        tabIndex={0}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}

• Files reviewed: 2/3 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.