Fix project card filament badges showing duplicates and raw color codes

Multi-color prints store comma-separated values in filament_color (e.g.,
"#FFFFFF,#43403D") and filament_type (e.g., "PLA, PLA-S"). The project
cards were displaying these raw strings instead of splitting them into
individual badges.

- Split comma-separated colors into individual color swatches
- Split comma-separated materials into individual text badges
- Deduplicate both to avoid showing "PLA" multiple times
This commit is contained in:
maziggy
2026-01-10 07:56:18 +01:00
parent 42149b90ab
commit 013f801e6b
3 changed files with 87 additions and 75 deletions
+14 -2
View File
@@ -293,8 +293,20 @@ function ProjectCard({ project, onClick, onEdit, onDelete }: ProjectCardProps) {
)}
{/* Filament materials/colors */}
{project.archives && project.archives.length > 0 && (() => {
const materials = [...new Set(project.archives.map(a => a.filament_type).filter(Boolean))];
const colors = [...new Set(project.archives.map(a => a.filament_color).filter(Boolean))] as string[];
// Flatten comma-separated materials and deduplicate
const allMaterials = project.archives
.map(a => a.filament_type)
.filter(Boolean)
.flatMap(m => (m as string).split(',').map(s => s.trim()))
.filter(Boolean);
const materials = [...new Set(allMaterials)];
// Flatten comma-separated colors and deduplicate
const allColors = project.archives
.map(a => a.filament_color)
.filter(Boolean)
.flatMap(c => (c as string).split(',').map(s => s.trim()))
.filter(c => c.startsWith('#') || /^[0-9A-Fa-f]{6}$/.test(c));
const colors = [...new Set(allColors)];
if (materials.length === 0 && colors.length === 0) return null;
return (
<div className="flex items-center gap-2 mt-1.5">
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -23,7 +23,7 @@
<!-- Splash screens for iOS -->
<link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
<script type="module" crossorigin src="/assets/index-CN6OA8A6.js"></script>
<script type="module" crossorigin src="/assets/index-CCWSzj3L.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BEtulymk.css">
</head>
<body>