Show characters as cards on Profile

[ryanbarlow97]

Summary

• Profile's Characters tab now shows characters as bordered cards in a two-column grid (one column on phones): portrait, name, race · class, status chip (Pending, Rejected, Missing) and a chevron.
• The portrait is the face (head and hat layer) of the skin the character wears, from the new read-only GET /characters/{id}/face. It picks the worn slot like the wardrobe does (a locked or empty active slot falls back to base) but never enforces limits or saves anything, unlike GET /characters/{id}/wardrobe. It returns an 8×8 PNG, or 404 no_face. Characters with no skin of their own, pending and rejected characters, and blank faces (the masked template) show the player's own head instead.
• Faces reload with each dashboard load or Refresh, and are kept per session.
• Hover brightens the border and lifts the background, and the chevron nudges right. Before, the hover band ran flush to the text. Keyboard focus gets an outline.
• A dashed New character tile replaces the green Create button, the same pattern as the Skins and Drinks tabs. At the slot limit it reads "No free slot".
• "Alive characters 1/5" becomes "1 of 5 slots used" with slot pips. The big "Alive" heading is gone; dead and missing characters sit under a small Dead heading with faded cards.

Testing

• Frontend: npx vitest run (2117 passed, including new CharacterList.test.tsx), oxlint, oxfmt --check, tsc --noEmit.
• Backend: new test_wardrobe_face.py (crop, legacy skins, blank faces, locked active slot leaves the wardrobe untouched, ownership) and test_character_face_route.py.
• Production build against a mock API, checked at 1000 px and 390 px with one character and with alive, pending, rejected, dead and missing characters, real wardrobe skins and the masked template.

🤖 Generated with Claude Code

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 20 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 057a5e89-e971-419f-b06b-3bd5e151e5b7

---

📥 Commits

Reviewing files that changed from the base of the PR and between b3588ad and 0392e0b.

---

📒 Files selected for processing (9)

• backend/src/api/characters_routes.py
• backend/src/api/test_character_face_route.py
• backend/src/characters/test_wardrobe_face.py
• backend/src/characters/wardrobe.py
• frontend/app/components/character/CharacterList.test.tsx
• frontend/app/components/character/CharacterList.tsx
• frontend/app/components/profile/ProfilePanel.test.tsx
• frontend/app/components/profile/ProfilePanel.tsx
• frontend/lib/characters/api.ts

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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