[MAINTAINABILITY] AchievementsHolder uses array index as React key

[BoxBoxJason]

Note

This issue was generated using AI, if anything lacks clarity or context, please ask for clarification before starting work.

Summary

AchievementsHolder renders the achievement list using the array index as the
React key. Since the list content changes with filtering, sorting, and
pagination, index keys cause React to reconcile against the wrong elements,
leading to stale DOM state (e.g. wrong <img onError> fallback sticking,
mismatched content during transitions).

Location

src/views/components/AchievementsHolder.tsx

{achievements.map((achievement, index) => (
  <AchievementDisplay key={index} ... />
))}

Suggested fix

Use a stable identifier. Each achievement has a unique title (and an id in
the DB). Expose/keep the id on the row and use it:

{achievements.map((achievement) => (
  <AchievementDisplay key={achievement.title} ... />
))}

(AchievementDict already carries id?; plumbing it through would be even
better.)

Severity

Low — correctness/robustness of the UI.