fix: align the album detail header with the AI Tagging collection page

[inland-taipen]

Fixes #1455

What

Restructures the header on the Albums detail page (/albums/:albumId) so it matches the layout every other media detail page in the app already uses.

Before: an icon-only ghost back button sat inline with the album title on the first row, and the photo count shared the second row with the action buttons.

After, mirroring PersonImages (the AI Tagging collection page) and SearchResults:

• Row 1 — a labelled outline Back button (ArrowLeft + "Back") on the left; on the right, the photo/selected count followed by the page actions (Select Images / Add Images, or Cancel / Remove Selected in selection mode).
• Row 2 — the album name as an h1, with the description underneath.

The count sits in the right-side action area as the issue asks. Below sm: the header stacks and the action group wraps, so selection mode (Cancel + Remove Selected) cannot push it wider than a mobile viewport.

The header action buttons drop size="sm" so they match the Back button's height in the same row, exactly as "Edit Name" does on the AI Tagging collection page, and pick up the cursor-pointer class those pages use.

Why

frontend/src/pages/Album/AlbumDetail.tsx was the only detail page not following this shape. PersonImages.tsx and SearchResults.tsx both render <div className="my-6 flex items-center justify-between"> with a labelled Back button followed by <h1 className="mb-6 text-2xl font-bold">. Aligning it makes back-navigation land in the same place and at the same size across pages, and the title-below-controls rhythm consistent.

No behaviour changed — same handlers, same selection flow, same grid, same dialogs.

How tested

• Added a test to frontend/src/pages/__tests__/AlbumDetail.test.tsx asserting the album name renders as a heading and that a button with the accessible name Back navigates to the albums list. This pins the new header shape: the old icon-only button had no accessible name, so the test would fail against the previous markup.
• npm run lint:check, npm run format:check, npx tsc --noEmit — all clean.
• npm test — 352/352 pass.
• Re-ran every gate above after the review follow-up in 0c7311a; all still clean.

Notes

• The issue describes the outlined Back to Albums button style used by the AI Tagging face-collection detail page. I treated that page as the source of truth for the style, and its button label is Back (PersonImages.tsx:92-93), so this matches it exactly. Happy to switch to the literal string "Back to Albums" if that was the intent.
• Drafted with AI assistance (Claude) following the conventions in AGENTS.md; the change and its tests were reviewed before submission.
• 0c7311a addresses the review: the count moved into the action area, and the header now stacks below sm: to prevent horizontal overflow.

Summary by CodeRabbit

• Style

  • Refined the album detail header layout for clearer organization of the title, description, photo count, and image controls.
  • Updated button styling, spacing, icons, and cursor behavior while preserving existing selection and album information functionality.

• Tests

  • Added coverage confirming the Back button is labelled correctly and returns to the albums list when selected.

[coderabbitai]

Walkthrough

The album detail header now separates navigation, actions, and album metadata. Selection and add-image behavior remain unchanged. An integration test verifies that the Back button navigates to the albums list.

Changes

Album detail header

Layer / File(s)	Summary
Reorganize album detail header frontend/src/pages/Album/AlbumDetail.tsx	The page adds a standalone Back button, aligns selection controls on the right, and moves album metadata into a separate section.
Validate back navigation frontend/src/pages/__tests__/AlbumDetail.test.tsx	The integration test clicks the labelled Back button and verifies navigation to the albums list.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• AOSSIE-Org/PictoPy#610: Both changes update the album detail header layout.
• AOSSIE-Org/PictoPy#1453: Both changes update AlbumDetail.tsx and related image interactions.

Suggested labels: TypeScript/JavaScript

Poem

A rabbit checks the Back button in place,
Album details settle with space.
Select and add controls align,
Navigation tests confirm the line.
The header is ready for review.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes satisfy the layout, action placement, count relocation, responsiveness, and navigation requirements in [#1455].
Out of Scope Changes check	✅ Passed	The changes remain within the album detail header scope and add only a related navigation test.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: aligning the album detail header with the AI Tagging collection page.

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

[coderabbitai]

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 234-244: Update the outer header container around the Back button
and selection actions to stack vertically by default and use the existing
side-by-side layout from the sm breakpoint upward. Update the action group
container to allow wrapping so Cancel and Remove Selected remain within narrow
viewports, while preserving its current alignment and spacing at sm and larger
widths.

🪄 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: 3a6a0d35-a3c7-496e-ac88-bc77a04e1673

📥 Commits

Reviewing files that changed from the base of the PR and between 5b4c41d and 665a8a2.

📒 Files selected for processing (2)

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

[inland-taipen]

Thanks — both addressed in 0c7311a.

Header overflow: applied the suggested approach. The outer header is now flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between, and the action group is flex flex-wrap items-center justify-end gap-2 self-end sm:self-auto, so Cancel + Remove Selected wrap instead of forcing the header past the viewport. Side-by-side alignment is preserved from sm: upward.

Also in the same commit: the photo/selected count moved from under the description into the right-side action area, which is what the issue asks for ("Move the image count to the right-side action area") — I had it in the wrong place in the first commit.

Gates re-run after the change: lint:check (--max-warnings 0), format:check, tsc --noEmit all clean, and npm test is 352/352.

[rohan-pandeyy]

PRs opened without assignments are not appreciated.

[gitcordapp]

Link your account with Gitcord

Thanks for opening this PR, @inland-taipen!

To receive Discord notifications and contributor tracking for this organization:

1. Join Discord: https://discord.gg/hjUhu33uAn
2. In Discord, run /link inland-taipen
3. Paste the verification code into your GitHub bio (or a public gist)
4. Click Verify in Discord (or run /verify-link inland-taipen)

Once linked, Gitcord can notify you about reviews, merges, and more.

— Posted by Gitcord

[inland-taipen]

@rohan-pandeyy
Understood, and apologies — that's on me. I should have asked for the assignment on #1455 before opening anything, especially since others had already expressed interest. I've read the contribution rule and I'll ask first from now on.