wave logo edit

[simo6529]

Summary by CodeRabbit

• New Features
  • Added ability to edit wave header pictures with an intuitive modal interface.
  • Enhanced image preview and handling with improved rendering.
  • Added optional control for image removal functionality.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Wave header image editing capability is introduced by enhancing the image input component with Next.js Image support, adding an edit overlay to the wave header, creating a new picture edit modal component, and integrating image upload and mutation workflow with the API.

Changes

Cohort / File(s)	Summary
Image Input Enhancement components/waves/create-wave/overview/CreateWaveImageInput.tsx	Integrated Next.js Image component for preview rendering with memoized URL management via useMemo and useEffect. Added optional allowRemove prop (default: true) to conditionally render remove button. Expanded imports and adjusted drag-and-drop styling.
Header Edit Capability components/waves/header/WaveHeader.tsx	Implemented memoized canEdit calculation to conditionally render WaveHeaderPictureEdit overlay. Adjusted className ordering and added wrapper groups for alignment consistency. Extended gradient handling with nullish coalescing for potentially null banner colors.
Picture Edit Components components/waves/header/picture/WaveHeaderPictureEdit.tsx, components/waves/header/picture/WaveHeaderPictureEditModal.tsx	New WaveHeaderPictureEdit component provides overlay button triggering modal visibility. New WaveHeaderPictureEditModal component manages image selection, file upload via multiPartUpload, wave mutation via editPictureMutation, and error handling with toast notifications. Includes state management for image file and mutation progress.
Build Configuration package.json	Added new "cr" npm script for CodeRabbit uncommitted changes analysis.

Sequence Diagram

sequenceDiagram
    actor User
    participant WaveHeader
    participant WaveHeaderPictureEdit
    participant WaveHeaderPictureEditModal
    participant API
    participant Toast as Toast Notifications

    User->>WaveHeader: Views wave header
    WaveHeader->>WaveHeaderPictureEdit: Renders edit overlay (if canEdit)
    User->>WaveHeaderPictureEdit: Clicks edit button
    WaveHeaderPictureEdit->>WaveHeaderPictureEditModal: Opens modal
    User->>WaveHeaderPictureEditModal: Selects image file
    User->>WaveHeaderPictureEditModal: Clicks Save
    WaveHeaderPictureEditModal->>WaveHeaderPictureEditModal: Upload image (multiPartUpload)
    WaveHeaderPictureEditModal->>API: PATCH /waves/{id} with new image URL
    alt Success
        API-->>WaveHeaderPictureEditModal: 200 OK
        WaveHeaderPictureEditModal->>WaveHeaderPictureEditModal: Refresh wave data (onWaveCreated)
        WaveHeaderPictureEditModal->>WaveHeader: Close modal
        WaveHeader->>User: Display updated header image
    else Error
        API-->>WaveHeaderPictureEditModal: Error response
        WaveHeaderPictureEditModal->>Toast: Show error message
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• ragnep
• prxt6529

Poem

🐰 A wave's picture gets a fresh new face,
With edit overlays in just the right place!
URLs managed with care, modals dance with grace—
The header editor hops through cyberspace! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'wave logo edit' is concise and directly reflects the main changes in the PR, which add wave header picture editing functionality.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@components/waves/header/picture/WaveHeaderPictureEditModal.tsx`:
- Around line 151-153: In WaveHeaderPictureEditModal update the SVG used as the
uploading spinner: replace the incorrect role="output" with role="status" (and
optionally add aria-live="polite" or aria-busy="true" if appropriate) on the SVG
element so screen readers treat it as a non-urgent live status; locate the SVG
tag in the WaveHeaderPictureEditModal component and make this attribute change
to improve accessibility.