Skip to content

fix: add inventory item image preview#819

Open
priscila-moneo wants to merge 1 commit intomasterfrom
fix/add-inventory-item-image-preview
Open

fix: add inventory item image preview#819
priscila-moneo wants to merge 1 commit intomasterfrom
fix/add-inventory-item-image-preview

Conversation

@priscila-moneo
Copy link

@priscila-moneo priscila-moneo commented Mar 10, 2026

ref: https://app.clickup.com/t/86b883qz9

image
  • Added image preview on hover for the Inventory items list by rendering the item image inside a tooltip (instead of only opening/downloading on click).
  • Kept the existing click behavior on the image icon to open the file in a new tab, so current workflow is preserved.

Summary by CodeRabbit

  • New Features

    • Inventory item images now show a hover preview tooltip (220×220 with arrow) for quick inspection; clicking still opens the image in a new tab. Tooltip appears only when an image is available.
  • Improvements

    • Added localized alt text for image previews and enhanced accessibility labels.

@coderabbitai
Copy link

coderabbitai bot commented Mar 10, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d3c60a2e-f6f3-47c9-9e09-bde9506fe794

📥 Commits

Reviewing files that changed from the base of the PR and between 26a11d4 and dbe5ae4.

📒 Files selected for processing (2)
  • src/i18n/en.json
  • src/pages/sponsors-global/inventory/inventory-list-page.js

📝 Walkthrough

Walkthrough

Added a hover tooltip image preview for the first inventory item image on the inventory list page, updated the en.json localization with an alt text entry, and bumped the copyright year to 2026.

Changes

Cohort / File(s) Summary
Localization
src/i18n/en.json
Added "image_preview_alt": "Inventory item preview" under inventory_item_list.
Inventory List UI
src/pages/sponsors-global/inventory/inventory-list-page.js
Replaced direct ImageIcon rendering with a Material-UI Tooltip that shows a 220x220 preview of the first image on hover; clicking still opens the image URL in a new tab. Added Tooltip import and updated copyright year to 2026.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant InventoryPage as Inventory List Page
    participant Tooltip
    participant Browser as New Tab

    User->>InventoryPage: hover over image icon
    InventoryPage->>Tooltip: render preview box (220x220) with image URL
    Tooltip-->>User: show image preview
    User->>InventoryPage: click preview/icon
    InventoryPage->>Browser: open image URL in new tab
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A tiny hover, a little peek,
A preview blooms in colors sleek.
Click and the picture hops away,
Inventory shines throughout the day —
Little changes, joyous play! 🥕✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'fix: add inventory item image preview' directly and clearly summarizes the main changes: adding image preview functionality for inventory items via tooltip.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/add-inventory-item-image-preview

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

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

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/pages/sponsors-global/inventory/inventory-list-page.js`:
- Around line 171-213: The render function currently dereferences row.images
without guarding for null/undefined; update the render lambda (the render: (row)
=> ...) to first check that row.images is an array (e.g. row.images &&
row.images.length > 0) before accessing row.images[0] and
row.images[0].file_url, and use optional chaining where helpful
(row.images?.[0]?.file_url) for both the Tooltip src/alt and the IconButton
onClick so the UI won't throw when the relationship is missing.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5d96d6c6-8f89-4ba5-927b-78ce911f2f19

📥 Commits

Reviewing files that changed from the base of the PR and between b29d23f and 26a11d4.

📒 Files selected for processing (2)
  • src/i18n/en.json
  • src/pages/sponsors-global/inventory/inventory-list-page.js

@priscila-moneo priscila-moneo force-pushed the fix/add-inventory-item-image-preview branch from 26a11d4 to dbe5ae4 Compare March 10, 2026 14:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant