fix(avatar): snap size to backend sharp whitelist

[PierreBrisorgueil]

Closes #3972

Bug

UserAvatarComponent calls setImages(config.api, user.avatar, size * 2, null), but the backend /api/uploads/images/ endpoint only accepts the sharp-resize whitelist ['128', '256', '512', '1024'] (devkit Node modules/uploads/config/uploads.{env}.config.js). Any other value returns HTTP 422 "Wrong size param".

Regression introduced by PR #3927 (Gravatar → UserAvatarComponent). Pre-refactor, avatars were served by gravatar.com so the backend whitelist was never hit.

Observed in production (trawl.me)

• Scraps list: :size="24" → request for -48.png → 422
• Account page: :size="200" → request for -400.png → 422

Every downstream project (trawl, comes, montaine, pierreb) is affected because they all consume the Devkit Vue component.

Fix

Add a computed avatarSize that snaps the requested size (this.size * 2) to the smallest allowed sharp size >= requested, capped at 1024:

const SHARP_SIZES = [128, 256, 512, 1024];
// ...
avatarSize() {
  const requested = this.size * 2;
  return SHARP_SIZES.find((s) => s >= requested) ?? SHARP_SIZES[SHARP_SIZES.length - 1];
},

The SHARP_SIZES constant carries a JSDoc pointing at the backend whitelist file so future updates stay in sync.

Tests

Added 5 unit tests covering the resolution matrix:

• size=24 → 128
• size=64 → 128
• size=200 → 512
• size=512 → 1024
• size=600 → 1024 (cap)

Verify

• Lint green
• 1008 unit tests passing, coverage 98.99% stmts / 93.68% branches (well above thresholds)
• Build green

Summary by CodeRabbit

• Bug Fixes

  • Improved avatar sizing logic to automatically map requested sizes to supported backend dimensions, preventing API resolution errors.

• Tests

  • Added comprehensive test coverage for avatar sizing behavior across various input sizes.

[coderabbitai]

Warning

Rate limit exceeded

@PierreBrisorgueil has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 48 minutes and 26 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 48 minutes and 26 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 3e90040a-71eb-4e56-9f09-4fc4457b5732

📥 Commits

Reviewing files that changed from the base of the PR and between 7a4e07d and 92a8abb.

📒 Files selected for processing (2)

• src/modules/core/components/user.avatar.component.vue
• src/modules/core/tests/user.avatar.component.unit.tests.js

Walkthrough

Updated the UserAvatarComponent to snap requested avatar sizes to backend-allowed values (128, 256, 512, 1024) instead of requesting arbitrary pixel sizes that trigger 422 errors. Added a computed property avatarSize() that maps requested sizes to the nearest allowed value, with corresponding unit tests.

Changes

Cohort / File(s)	Summary
Avatar Sizing Logic src/modules/core/components/user.avatar.component.vue	Added constant SHARP_SIZES array and new avatarSize computed property that maps requested size * 2 to the nearest whitelisted backend size, snapping upward or capping at 1024.
Avatar Component Tests src/modules/core/tests/user.avatar.component.unit.tests.js	Added test suite avatarSize computed covering size snapping behavior with inputs mapped to allowed values (24→128, 64→128, 200→512, 512→1024, 600→1024).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• refactor(core): replace Gravatar with reusable UserAvatar component #3927: Introduced the UserAvatarComponent refactor that created the underlying issue this PR fixes (size mapping for avatar image requests).

Suggested labels

Refactor

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: snapping avatar sizes to the backend's sharp whitelist to fix the HTTP 422 error.
Description check	✅ Passed	The description comprehensively covers the bug, root cause, fix rationale, implementation, tests, and verification, exceeding template requirements.
Linked Issues check	✅ Passed	The pull request fully implements all coding requirements from issue #3972: snap logic, constant definition, test coverage for all specified mappings (24→128, 200→512, 600→1024), and setImages integration.
Out of Scope Changes check	✅ Passed	All changes are scoped to the avatar size snapping fix: computed property addition and corresponding unit tests with no extraneous modifications.
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 unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/3972-avatar-sharp-size

---

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 and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.48%. Comparing base (37eaa67) to head (92a8abb).
⚠️ Report is 7 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3973   +/-   ##
=======================================
  Coverage   99.48%   99.48%           
=======================================
  Files          30       30           
  Lines         968      968           
  Branches      267      267           
=======================================
  Hits          963      963           
  Misses          5        5           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

Fixes UserAvatarComponent image URL generation to request only backend-whitelisted sharp resize sizes, preventing HTTP 422 errors from /api/uploads/images/ across downstream consumers.

Changes:

• Added avatarSize computed that snaps size * 2 to the nearest allowed sharp size (capped at 1024).
• Updated avatar image setImages(...) call to use avatarSize instead of size * 2.
• Added unit tests covering the size→whitelist mapping matrix.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/modules/core/components/user.avatar.component.vue	Introduces sharp-size snapping via avatarSize and uses it in the image URL generation.
src/modules/core/tests/user.avatar.component.unit.tests.js	Adds unit tests validating the snapping behavior for several requested sizes.

[coderabbitai]

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/modules/core/tests/user.avatar.component.unit.tests.js`:
- Around line 89-115: Add an integration assertion that verifies the component's
render path calls setImages with the snapped avatar size: in the tests use
createWrapper(...) to mount the component for a representative size (e.g., size:
200), spy/mock the setImages function used by the component (via jest.spyOn or
by stubbing the imported helper), trigger a render/mount if necessary, then
assert that setImages was called and its avatarSize argument equals
wrapper.vm.avatarSize; ensure you restore the spy after the test.

🪄 Autofix (Beta)

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

Plan: Pro

Run ID: 20f43747-a9e5-4328-8c08-2147eab1ea6d

📥 Commits

Reviewing files that changed from the base of the PR and between e8a3db3 and 7a4e07d.

📒 Files selected for processing (2)

• src/modules/core/components/user.avatar.component.vue
• src/modules/core/tests/user.avatar.component.unit.tests.js