diff --git a/frontend/src/pages/PrintersPage.tsx b/frontend/src/pages/PrintersPage.tsx index ee1ea69ac..55b38d188 100644 --- a/frontend/src/pages/PrintersPage.tsx +++ b/frontend/src/pages/PrintersPage.tsx @@ -636,10 +636,11 @@ function NozzleSlotHoverCard({ slot, index, activeStatus, filamentName, children } // Dual-nozzle hover card showing L and R nozzle details side by side -function DualNozzleHoverCard({ leftSlot, rightSlot, activeNozzle, children }: { +function DualNozzleHoverCard({ leftSlot, rightSlot, activeNozzle, filamentInfo, children }: { leftSlot?: import('../api/client').NozzleRackSlot; rightSlot?: import('../api/client').NozzleRackSlot; activeNozzle: 'L' | 'R'; + filamentInfo?: Record; children: React.ReactNode; }) { const { t } = useTranslation(); @@ -684,6 +685,8 @@ function DualNozzleHoverCard({ leftSlot, rightSlot, activeNozzle, children }: { const isActive = activeNozzle === side; const typeFull = nozzleTypeName(slot.nozzle_type, t); const flowFull = nozzleFlowName(slot.nozzle_type, t); + const filamentCss = parseFilamentColor(slot.filament_color); + const filamentName = slot.filament_id ? filamentInfo?.[slot.filament_id]?.name : undefined; return (
@@ -736,6 +739,19 @@ function DualNozzleHoverCard({ leftSlot, rightSlot, activeNozzle, children }: { {slot.serial_number}
)} + {(filamentCss || slot.filament_type || slot.filament_id) && ( +
+ {t('printers.nozzleFilament')} +
+ {filamentCss && ( +
+ )} + + {filamentName || slot.filament_type || slot.filament_id || ''} + +
+
+ )}
); }; @@ -2508,7 +2524,12 @@ function PrinterCard({ )} {/* Active nozzle indicator for dual-nozzle printers */} {isDualNozzle && ( - +