Fix avatar fallback not working for optimistically rendered new comments

[amoscicki]

Summary

When adding a comment, if the user's profile picture URL has expired (R2 presigned URL), the avatar shows a broken image instead of the DiceBear initials fallback.

Root Cause

In src/routes/learn/$slug/-components/comment-list.tsx (lines 194-197):

src={
  comment.profile.image ??
  `https://api.dicebear.com/9.x/initials/svg?seed=...`
}

The ?? operator only triggers fallback for null or undefined. An expired presigned URL is still a truthy string, so:

1. Expired URL is used as img src
2. Image fails to load (403)
3. No onError handler exists to catch this and show fallback
4. Result: broken image

Steps to Reproduce

1. Upload a profile picture
2. Wait for R2 presigned URL to expire (~1 hour)
3. Add a comment on any video segment
4. Observe avatar shows broken image icon

Current Behavior

Broken image displayed when profile picture URL has expired.

Expected Behavior

DiceBear initials fallback should display when image fails to load.

Proposed Solution

Add onError handler to fall back gracefully:

<img
  src={comment.profile.image ?? fallbackUrl}
  onError={(e) => { e.currentTarget.src = fallbackUrl }}
  alt="User avatar"
/>

Or fix the root cause (issue #34) by not storing presigned URLs in the database.

Related Issues

• Fix profile picture disappearing after upload (possible R2 presigned URL expiration) #34 - Profile picture disappearing (presigned URL expiration)

Affected Areas

• /src/routes/learn/$slug/-components/comment-list.tsx (lines 191-199, 355-363)
• /src/routes/learn/$slug/-components/comment-form.tsx (lines 125-132)

Acceptance Criteria

• Avatar shows DiceBear fallback when image URL fails to load
• No broken image icons visible in comments

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Related Issues

• Fix profile picture disappearing after upload (possible R2 presigned URL expiration) #34
• Fix display name with @ symbol causing user to disappear from members list #35
• Replace real names with auto-generated aliases in course discussions #33

👤 Suggested Assignees

• amoscicki

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!