Update fallback avatar on ItemCardList

[kasya]

Updated look of a fallback avatar on the ItemCardList component.
This now looks more like our standard user avatars.

Checklist

• Required: I followed the contributing workflow
• Required: I verified that my code works as intended and resolves the issue as described
• Required: I ran make check-test locally: all warnings addressed, tests passed
• I used AI for code, documentation, tests, or communication related to this PR

[coderabbitai]

Summary by CodeRabbit

• Bug Fixes
  • Enhanced fallback avatar styling with improved visual consistency when author profile images or information are unavailable.

Walkthrough

This change replaces the avatar fallback rendering in ItemCardList.tsx with a styled fallback avatar element. A new fallbackAvatar JSX element (rounded, gray placeholder with user icon) replaces the previous fallbackIcon in both code paths where author information is missing or incomplete.

Changes

Cohort / File(s)	Summary
Avatar Fallback Styling frontend/src/components/ItemCardList.tsx	Replaces fallbackIcon with a new styled fallbackAvatar JSX element (rounded, gray placeholder containing user icon) in both author-missing and final fallback return paths.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Fix UI break in Recent Pull Request #3742: Directly modifies avatar fallback rendering in the same file, replacing inline fallback logic with unified fallback avatar/AuthorAvatar and updating test expectations.

Suggested labels

frontend

Suggested reviewers

• arkid15r

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly and accurately summarizes the main change: updating the fallback avatar styling on the ItemCardList component to match standard user avatars.
Description check	✅ Passed	The description is clearly related to the changeset, explaining the update to the fallback avatar on ItemCardList and its alignment with standard user avatars.
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 docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch update-no-avatar-view

---

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

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[cubic-dev-ai]

No issues found across 1 file

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/src/components/ItemCardList.tsx (1)

27-50: ⚠️ Potential issue | 🟡 Minor

Add an accessible name for fallback avatar links.

When author.login exists but avatarUrl doesn’t, the <Link> wraps only an icon, so screen readers get an unlabeled link. Add an aria-label on the link and mark the icon as decorative.

Proposed fix

 const fallbackAvatar = (
-  <div className="mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-300 dark:bg-gray-600">
-    <FaUser className="h-4 w-4 text-gray-400" />
+  <div
+    className="mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-300 dark:bg-gray-600"
+    aria-hidden="true"
+  >
+    <FaUser aria-hidden="true" className="h-4 w-4 text-gray-400" />
   </div>
 )
@@
-    <Link className="shrink-0 text-blue-400 hover:underline" href={`/members/${author.login}`}>
+    <Link
+      aria-label={author.name || author.login}
+      className="shrink-0 text-blue-400 hover:underline"
+      href={`/members/${author.login}`}
+    >
       {avatarContent}
     </Link>

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 87.50%. Comparing base (eb3cbb0) to head (7cb2716).
⚠️ Report is 4 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3766   +/-   ##
=======================================
  Coverage   87.50%   87.50%           
=======================================
  Files         462      462           
  Lines       14363    14363           
  Branches     1926     1926           
=======================================
  Hits        12569    12569           
  Misses       1368     1368           
  Partials      426      426           

Flag	Coverage Δ
backend	87.23% <ø> (ø)
frontend	88.27% <100.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
frontend/src/components/ItemCardList.tsx	96.87% <100.00%> (ø)

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update eb3cbb0...7cb2716. Read the comment docs.

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