bug: Avatar component throws console error when src is empty or undefined #248

In src/components/layout/avatar.tsx, <Image src={src} ... /> is rendered directly. When user.avatarUrl is an empty string "" or null (for instance in unit tests, with mock data, or for developers without an avatar), Next.js outputs a console warning:
"An empty string (\"\") was passed to the src attribute. This may cause the browser to download the whole page again over the network."

Motivation

Rendering an empty string in <Image> degrades client performance by triggering duplicate page downloads and produces noisy console warnings during testing and execution.

Tasks

• In Avatar, check if !src || !src.trim().
• If invalid/empty, render a graceful fallback UI element (e.g., a subtle user icon from lucide-react or the user's initial) with matching dimensions, rounded styling, and border ring.
• Ensure Avatar does not render an <Image> element with an empty src.
• Update any tests in src/features/leaderboard/tests/leaderboard-table.test.tsx to verify fallback behavior.

Files to Check

• src/components/layout/avatar.tsx
• src/features/leaderboard/tests/leaderboard-table.test.tsx