fix(ui): improve read/unread visual distinction in Activity feed

[mpiton]

Bug Report

Description

After the recent fix for issue #166 (expose is_read field), the visual distinction between read and unread activities remains too subtle. Users clicking "Mark all read" don't get clear visual feedback that anything changed.

Current Behavior

• is_read field is now exposed and persisted (PR fix(ui): expose is_read field and add read/unread visual distinction (#166) #167)
• Visual difference between read and unread items is minimal
• "Mark all read" button works but effect is barely perceptible

Expected Behavior

Clear visual distinction between read and unread items:

• Unread: Full opacity, colored dot indicator, slightly different background
• Read: Reduced opacity or muted styling

Proposed Fix

// In ActivityFeed item rendering
<div className={activity.isRead ? "opacity-60 bg-bg" : "bg-surface border-l-2 border-accent"}>
  {!activity.isRead && <span className="h-2 w-2 rounded-full bg-accent" />}
  {/* ... rest of activity content */}
</div>

Files to Modify

• src/components/ActivityFeed/ActivityFeed.tsx — add read/unread styling

References

• Design Guidelines For Better Notifications UX (Smashing Magazine)
• Related: Bug: "Mark all read" on Activity feed has no visible effect #166, PR fix(ui): expose is_read field and add read/unread visual distinction (#166) #167