fix(ui): center "Add Images" button in empty album view - #1467
anurag-sinha04 wants to merge 4 commits into
Conversation
WalkthroughThe PR adds a muted image icon above the existing empty-album message and add-images button. It also adds a blank line in ChangesAlbum UI updates
Estimated code review effort: 1 (Trivial) | ~3 minutes Possibly related PRs
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/pages/Album/AlbumDetail.tsx`:
- Around line 332-339: Update the empty-state container surrounding the “No
images in this album yet” content to center its children vertically and
horizontally by adding the appropriate cross-axis alignment alongside
justify-center. Remove reliance on the fixed pt-24 offset so the empty state
remains centered across viewport heights.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 51f49f86-8f1a-4aa7-8ffa-0af7fd27d548
📒 Files selected for processing (2)
frontend/src/App.tsxfrontend/src/pages/Album/AlbumDetail.tsx
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
frontend/src/pages/Album/AlbumDetail.tsx (2)
81-89: 🚀 Performance & Scalability | 🟠 Major | ⚡ Quick winDo not gate an empty album on the full image-library request.
getAlbumImagesalready returnsimage_ids. When that array is empty, the UI still waits forfetchAllImages()and the effect does not dispatch an empty image list untilallImagesDataexists. If the full-image request fails after navigating from a populated album, stale images can remain visible.Clear empty
image_idsimmediately. Only wait forallImagesDatawhen the album contains image IDs.Also applies to: 150-161
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/pages/Album/AlbumDetail.tsx` around lines 81 - 89, The AlbumDetail image-loading flow should not depend on allImagesData when the album’s image_ids array is empty. Update the effect around getAlbumImages and the isLoadingContent calculation to immediately dispatch an empty image list for empty albums, wait for allImagesData only when image_ids exist, and ensure stale images are cleared if fetchAllImages fails after navigation.
5-5: 🎯 Functional Correctness | 🔴 Critical | ⚡ Quick winImport
ImageIconbefore using it.
ImageIconis referenced in the empty-album render but is not imported, so TypeScript will fail withCannot find name 'ImageIcon'.Proposed fix
-import { ArrowLeft, Plus, Trash2 } from 'lucide-react'; +import { ArrowLeft, ImageIcon, Plus, Trash2 } from 'lucide-react';🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/pages/Album/AlbumDetail.tsx` at line 5, Update the lucide-react import in AlbumDetail to include ImageIcon, matching the existing usage in the empty-album render and preserving the other imported icons.
🧹 Nitpick comments (1)
frontend/src/pages/Album/AlbumDetail.tsx (1)
310-324: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd regression coverage for the empty album state.
Add an automated component test that renders an empty album and verifies the icon, message, and
Add Imagesbutton. Use a visual test if the project needs to verify pixel-level centering.As per path instructions, ensure that test code is automated, comprehensive, and follows testing best practices.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/pages/Album/AlbumDetail.tsx` around lines 310 - 324, Add automated component coverage for the empty-album branch in AlbumDetail, rendering an album with no images and asserting the empty-state ImageIcon, “No images in this album yet” message, and “Add Images” button are present. Verify the button opens the add-images dialog, and add visual coverage only if required by the project’s existing testing conventions to validate centering.Source: Path instructions
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@frontend/src/pages/Album/AlbumDetail.tsx`:
- Around line 81-89: The AlbumDetail image-loading flow should not depend on
allImagesData when the album’s image_ids array is empty. Update the effect
around getAlbumImages and the isLoadingContent calculation to immediately
dispatch an empty image list for empty albums, wait for allImagesData only when
image_ids exist, and ensure stale images are cleared if fetchAllImages fails
after navigation.
- Line 5: Update the lucide-react import in AlbumDetail to include ImageIcon,
matching the existing usage in the empty-album render and preserving the other
imported icons.
---
Nitpick comments:
In `@frontend/src/pages/Album/AlbumDetail.tsx`:
- Around line 310-324: Add automated component coverage for the empty-album
branch in AlbumDetail, rendering an album with no images and asserting the
empty-state ImageIcon, “No images in this album yet” message, and “Add Images”
button are present. Verify the button opens the add-images dialog, and add
visual coverage only if required by the project’s existing testing conventions
to validate centering.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: b1f25533-e833-41df-9ea1-c5d6190ca31d
📒 Files selected for processing (1)
frontend/src/pages/Album/AlbumDetail.tsx
|
@rohan-pandeyy please review this PR |
Link your account with GitcordThanks for opening this PR, @anurag-sinha04! To receive Discord notifications and contributor tracking for this organization:
Once linked, Gitcord can notify you about reviews, merges, and more. — Posted by Gitcord |
|
Please do not open PRs without being assigned to them. |
|
Okk Sure |
2 participants
Addressed Issues:
Fixes #1460
Screenshots/Recordings:
Before:
The "Add Image" button/icon in the Albums view appears off-center, resulting in inconsistent alignment with the surrounding UI.
After:
The "Add Image" button/icon is properly centered, providing a consistent and visually balanced layout.
Additional Notes:
Adjusted the alignment of the "Add Image" element in the Albums view.
This is a UI-only fix and does not affect any application functionality or business logic.
AI Usage Disclosure:
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Check one of the checkboxes below:
I have used the following AI models and tools: ChatGPT
Checklist
Summary by CodeRabbit