feat(ui): Prevent Face Collection from Pushing Tagged Images Below the Fold

[akshajtiwari]

Addressed Issues:

Fixes #1420

Screenshots/Recordings:

Before

After

Additional Notes:

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: Claude

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

  • Face collections are sorted by size for easier browsing.
  • Collections are displayed in pages of eight with previous and next navigation controls.
  • Page indicators show the current position while browsing.

• Tests

  • Improved reliability of idle refresh polling tests.

[coderabbitai]

Walkthrough

FaceCollections sorts face clusters by face count and displays eight clusters per page. It adds bounded navigation controls, placeholders, and page-state clamping. The idle-polling test now advances its timer inside React’s act.

Changes

Face collection pagination

Layer / File(s)	Summary
Paginated face collection rendering frontend/src/components/FaceCollections.tsx, frontend/src/App.css	The component sorts clusters, renders eight items per page, clamps page state, fills incomplete pages with inert placeholders, and adds previous/next controls with a page indicator. The CSS change removes trailing whitespace without changing behavior.

Idle polling test timing

Layer / File(s)	Summary
Idle polling timer validation frontend/src/hooks/__tests__/useRefreshMemories.test.tsx	The test advances the 2.5-second delay inside React’s act wrapper.

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

Possibly related PRs

• AOSSIE-Org/PictoPy#1392: Changes which face clusters are returned and refreshes cluster data after folder deletion.

Suggested labels: TypeScript/JavaScript, Linter

Poem

A rabbit sorts the clusters eight by eight,
With arrows guiding through the gate.
Empty spots keep each page in place,
While timers hop through act with grace.

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR includes unrelated changes to the useRefreshMemories test and App.css whitespace that are outside issue #1420.	Remove the unrelated test and whitespace changes, or explain why they are required for the face collection pagination objective.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR paginates face collections, limits each page to eight clusters, adds navigation, and preserves a consistent layout for issue #1420.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main UI change: limiting Face Collections so tagged images remain visible without excessive scrolling.

✨ 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: 4

🤖 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/components/FaceCollections.tsx`:
- Line 51: Replace the any annotations in the sorting and rendering callbacks
within FaceCollections with the existing Cluster type, or remove the annotations
where TypeScript can infer Cluster safely. Ensure both cluster paths remain
explicitly typed without introducing any.
- Around line 125-151: Add accessible names to the pagination buttons in
FaceCollections by adding “Previous page” to the button containing ChevronLeft
and “Next page” to the button containing ChevronRight.
- Around line 23-25: Update the FaceCollections pagination rendering around
PAGE_SIZE and the cluster list so incomplete pages reserve the missing
responsive grid slots, using inert placeholders or an equivalent responsive
minimum-height approach. Ensure every page maintains the same card height from
sm through xl without affecting real cluster interactions.
- Around line 56-60: Synchronize the pagination state with the clamped value: in
the FaceCollections pagination logic around totalPages, update page when
totalPages shrinks so it does not remain out of range. Preserve the existing
currentPage calculation and ensure the previous/next handlers operate from the
synchronized state without requiring extra clicks.

🪄 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: ce72251c-820a-4a22-954b-fc4280b2a202

📥 Commits

Reviewing files that changed from the base of the PR and between 78e7dc3 and b9161ac.

📒 Files selected for processing (2)

• frontend/src/components/FaceCollections.tsx
• frontend/src/hooks/__tests__/useRefreshMemories.test.tsx

[akshajtiwari]

@rohan-pandeyy PR is ready for review!!