Reused EmptyGalleryState for empty album placeholder.

[pragatii9]

Addressed Issues:

Fixes #1460

Screenshots/Recordings:

BEFORE:
No image for Albums looked off

AFTER:
-Added the same image as Home.tsx (placeholder).
-Making the Album page aligned with the Home.tsx design.

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:

• This PR does not contain AI-generated code at all.
• This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

I have used the following AI models and tools: TODO
ChatGPT for implementation guidance, code review, and documentation assistance.

Checklist

• My PR addresses a single issue, fixes a single bug or makes a single improvement.
• My code follows the project's code style and conventions
• If applicable, I have made corresponding changes or additions to the documentation
• If applicable, I have made corresponding changes or additions to tests
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contribution Guidelines
• Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
• I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

Summary by CodeRabbit

• New Features

  • Added support for custom actions in empty gallery states.
  • Album pages without images now provide a consistent empty-state experience.
  • Format guidance is displayed only when relevant.

• Style

  • Improved album header layout and settings button focus styling.

[github-actions]

⚠️ No issue was linked in the PR description.
Please make sure to link an issue (e.g., 'Fixes #issue_number')

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: c638bd05-7dc4-4f2d-a355-9432d8115779

📥 Commits

Reviewing files that changed from the base of the PR and between 7a0046d and 9e14b1c.

📒 Files selected for processing (1)

• frontend/src/pages/Album/AlbumDetail.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/src/pages/Album/AlbumDetail.tsx

---

Walkthrough

EmptyGalleryState now supports custom actions and optional format hints. AlbumDetail uses this shared component for empty albums and reorganizes its header layout.

Changes

Gallery empty-state integration

Layer / File(s)	Summary
Configurable empty-gallery content frontend/src/components/EmptyStates/EmptyGalleryState.tsx	EmptyGalleryState accepts an optional action node, uses Settings as the fallback action, and hides the format hint when no hint exists.
Album header layout frontend/src/pages/Album/AlbumDetail.tsx	The album header separates album information, controls, and photo-count metadata. Tailwind class ordering changes preserve existing behavior.
Album empty-state integration frontend/src/pages/Album/AlbumDetail.tsx	Empty albums now render EmptyGalleryState with album-specific text and an add-images action.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• AOSSIE-Org/PictoPy#610: Introduces the EmptyGalleryState used by the album empty view.
• AOSSIE-Org/PictoPy#1467: Also adjusts the empty album view in AlbumDetail.tsx.
• AOSSIE-Org/PictoPy#1470: Also modifies the AlbumDetail header layout.

Suggested labels: TypeScript/JavaScript

Poem

A rabbit hops through galleries bright,
Custom actions now align just right.
Settings stays when no action is near,
Format hints hide when none appear.
Add images completes the album view.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the primary change: reusing EmptyGalleryState for empty albums.
Linked Issues check	✅ Passed	The changes address issue #1460 by reusing the shared empty state for albums without images.
Out of Scope Changes check	✅ Passed	The component and album header changes directly support the empty album layout fix and shared design reuse.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[github-actions]

⚠️ No issue was linked in the PR description.
Please make sure to link an issue (e.g., 'Fixes #issue_number')

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

frontend/src/pages/Album/AlbumDetail.tsx (1)

234-247: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Remove redundant layout comments.

/* Left section */ and /* Right section */ restate the adjacent markup. Remove them, or replace them with comments that explain a layout constraint.

As per coding guidelines, “Write short comments that explain why rather than what”; as per path instructions, “Point out redundant obvious comments that do not add clarity.”

🤖 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 234 - 247, Remove the
redundant “Left section” and “Right section” comments surrounding the album
detail layout in the AlbumDetail component. Leave the adjacent markup and
behavior unchanged unless a comment is needed to explain a non-obvious layout
constraint.

Sources: Coding guidelines, 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.

Inline comments:
In `@frontend/src/pages/Album/AlbumDetail.tsx`:
- Around line 233-248: Update the album detail header container around the album
metadata and action controls to stack its sections below the sm breakpoint and
use a row layout at sm and above. Add min-w-0 to the left metadata section so
long album names or descriptions can shrink without compressing or overflowing
the right-side controls.

---

Nitpick comments:
In `@frontend/src/pages/Album/AlbumDetail.tsx`:
- Around line 234-247: Remove the redundant “Left section” and “Right section”
comments surrounding the album detail layout in the AlbumDetail component. Leave
the adjacent markup and behavior unchanged unless a comment is needed to explain
a non-obvious layout constraint.

🪄 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: 2e14077f-103a-4014-9c85-2e8a0432518d

📥 Commits

Reviewing files that changed from the base of the PR and between 126ae17 and 7a0046d.

📒 Files selected for processing (2)

• frontend/src/components/EmptyStates/EmptyGalleryState.tsx
• frontend/src/pages/Album/AlbumDetail.tsx

[pragatii9]

Hey @rohan-pandeyy Would be great if you could review the PR!