\n );\n }\n \n const visibleItems = items.slice(0, 4); // Show max 4 items for smaller space\n const hasMore = items.length > 4;\n \n return (\n

\n {visibleItems.map((item, index) => (\n \n {item.cover_url ? (\n {\n // Fallback to type icon if image fails to load\n const target = e.target as HTMLImageElement;\n target.style.display = 'none';\n const fallback = target.nextElementSibling as HTMLElement;\n if (fallback) fallback.style.display = 'flex';\n }}\n />\n ) : null}\n

\n {MEDIA_TYPE_ICONS[item.type] || '📄'}\n

\n ))}\n {hasMore && (\n

\n +{items.length - 4}\n

\n )}\n

\n );\n };\n \n if (grid.length === 0) {\n return (\n

\n \n

No media tracked yet

Add books, shows, or games to start tracking!

\n );\n }\n \n return (\n

\n {/* Header row with status labels (horizontal) */}\n

\n 👥\n

\n {statuses.map(status => (\n

\n {STATUS_LABELS[status]}\n

\n ))}\n

\n \n {/* Group rows */}\n {groups.map(group => (\n

\n {/* Group name column (vertical text) */}\n

\n {GROUP_LABELS[group]}\n

\n \n {/* Status columns */}\n {statuses.map(status => {\n const cell = getCell(group, status);\n \n return (\n

\n onCellClick(cell.group, cell.status, cell.items)}\n className={`\n media-item w-full h-16 rounded-lg border-2 p-1 text-left\n ${STATUS_COLORS[status]}\n hover:scale-105 transition-all duration-200 \n focus:outline-none focus:ring-2 focus:ring-blue-400\n ${cell.count > 0 ? 'cursor-pointer' : 'cursor-default'}\n `}\n >\n {renderMediaCollage(cell.items)}\n \n {/* Count badge */}\n {cell.count > 0 && (\n

\n \n {cell.count}\n \n {cell.items.some(item => item.progress) && (\n

\n )}\n

\n )}\n \n

\n );\n })}\n

\n ))}\n

\n );\n}\n","deleted","label",[168,169,149],"frontend","components","permalink","https://www.val.town/x/ryi/pathfinder__5712n7-bore/code/frontend/components/MediaGrid.tsx","extension","actionData","errors"]