feat: display benefits as individual lines with icon, name, and type

Enhanced the inventory tab to show each benefit on its own line instead of
an icon grid. Each benefit now displays with:
- Icon (40x40px) on the left
- Benefit name and type on the right in format: "Name (TYPE)"

Changes:
- Backend: Send full benefit data (name, type, image_url) instead of just URLs
- Frontend: Render benefits as vertical list of horizontal lines
- CSS: Add new styles for benefit items (.benefit-item, .benefit-icon, .benefit-info)
- Removed: Icon grid layout (chunks of 3) and rewards text field

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
github-actions[bot]
2025-11-08 16:27:10 +11:00
parent 62c0dd5663
commit 3d5080b2b2
3 changed files with 105 additions and 9 deletions

View File

@@ -3,6 +3,7 @@
from __future__ import annotations
import asyncio
import logging
from typing import TYPE_CHECKING, Any
@@ -12,6 +13,9 @@ if TYPE_CHECKING:
from src.web.managers.cache import ImageCache
logger = logging.getLogger("TwitchDrops")
class InventoryManager:
"""Manages drop campaign inventory display in the web interface.
@@ -41,6 +45,16 @@ class InventoryManager:
drops_data = []
for drop in campaign.drops:
# Collect full benefit data (filter out benefits without images)
benefits_data = [
{
"name": benefit.name,
"type": benefit.type.name,
"image_url": str(benefit.image_url),
}
for benefit in drop.benefits
if benefit.image_url
]
drops_data.append(
{
"id": drop.id,
@@ -50,7 +64,7 @@ class InventoryManager:
"progress": drop.progress,
"is_claimed": drop.is_claimed,
"can_claim": drop.can_claim,
"rewards": drop.rewards_text(),
"benefits": benefits_data,
"starts_at": drop.starts_at.isoformat(),
"ends_at": drop.ends_at.isoformat(),
}