[PR #614] [CLOSED] Printer card UI improvements and AMSUnitCard extraction

## 📋 Pull Request Information **Original PR:** https://github.com/maziggy/bambuddy/pull/614 **Author:** [@aneopsy](https://github.com/aneopsy) **Created:** 3/5/2026 **Status:** ❌ Closed **Base:** `0.2.3b1` ← **Head:** `printer-ui-improvement` --- ### 📝 Commits (1) - [`980803a`](https://github.com/maziggy/bambuddy/commit/980803a5469539b4263311a73014abc410694ae5) Printer card UI improvements and AMSUnitCard extraction ### 📊 Changes **12 files changed** (+1407 additions, -901 deletions) <details> <summary>View changed files</summary> 📝 `frontend/src/__tests__/components/Card.test.tsx` (+2 -1) ➕ `frontend/src/components/AMSUnitCard.tsx` (+1015 -0) ➕ `frontend/src/components/AmsNameHoverCard.tsx` (+198 -0) 📝 `frontend/src/components/Card.tsx` (+1 -1) 📝 `frontend/src/components/PrinterQueueWidget.tsx` (+2 -2) 📝 `frontend/src/i18n/locales/de.ts` (+1 -0) 📝 `frontend/src/i18n/locales/en.ts` (+1 -0) 📝 `frontend/src/i18n/locales/fr.ts` (+2 -1) 📝 `frontend/src/i18n/locales/it.ts` (+1 -0) 📝 `frontend/src/i18n/locales/ja.ts` (+1 -0) 📝 `frontend/src/i18n/locales/pt-BR.ts` (+1 -0) 📝 `frontend/src/pages/PrintersPage.tsx` (+182 -896) </details> ### 📄 Description ## Description Refactor printer card UI: extract AMSUnitCard into a standalone component, fix dual-nozzle external spool display, and improve card layout responsiveness. FIx #610 #611 #612 #402 <img width="475" height="744" alt="image" src="https://github.com/user-attachments/assets/129283e4-8476-470a-9465-2238580743f5" /> <img width="474" height="909" alt="image" src="https://github.com/user-attachments/assets/0aa69ad1-0a6b-4376-a41a-30fb28d39ad1" /> <img width="390" height="781" alt="image" src="https://github.com/user-attachments/assets/ed474d78-b8e6-420d-bb4c-38dc8872240c" /> ## Type of Change - [x] Bug fix (non-breaking change that fixes an issue) - [ ] New feature (non-breaking change that adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) - [ ] Documentation update - [x] Code refactoring - [ ] Performance improvement - [x] Test addition or update ## Changes Made - **AMSUnitCard extraction**: Moved AMS unit rendering (~995 lines) into `frontend/src/components/AMSUnitCard.tsx`, removing ~870 lines of dead inline AMS/HT-AMS code and unused SVG helpers (`NozzleBadge`, `HumidityIndicator`, `TemperatureIndicator`, `WaterDrop*`, `Thermometer*`) from `PrintersPage.tsx` - **Dual-nozzle external spool fix**: Filter `vt_tray` by extruder index so the left column only shows Ext-L (id 254) and the right column only shows Ext-R (id 255) — previously both spools appeared in both columns - **Card layout**: `flex flex-col h-full` on Card, `flex flex-col gap-2 flex-1` on CardContent, `mt-auto` on bottom buttons so they always pin to the card bottom - **Responsive padding**: `CardContent` now uses `p-3 lg:p-6` instead of `p-6` - **Small screen card size**: Clamp card size to max M on screens < 1024px, hide L/XL size buttons - **Spacing cleanup**: Remove redundant `mb-3` from `PrinterQueueWidget` (parent `gap-2` handles spacing) - **Gitignore**: Add `.planning/` to prevent GSD planning artifacts from being committed ## Testing - [x] I have tested this on my local machine - [x] All 1038 frontend tests pass (69 test files) - [x] `npm run build` (tsc -b + Vite) compiles cleanly - [x] Card.test.tsx updated for new responsive padding classes ## Checklist - [x] My code follows the project's coding style - [x] My changes generate no new warnings - [x] I have tested my changes thoroughly ## Additional Notes --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

BreizhHardware commented

2026-05-06 12:34:56 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/maziggy/bambuddy/pull/614
Author: @aneopsy
Created: 3/5/2026
Status: ❌ Closed

Base: 0.2.3b1 ← Head: printer-ui-improvement

📝 Commits (1)

980803a Printer card UI improvements and AMSUnitCard extraction

📊 Changes

12 files changed (+1407 additions, -901 deletions)

View changed files

📝 frontend/src/__tests__/components/Card.test.tsx (+2 -1)
➕ frontend/src/components/AMSUnitCard.tsx (+1015 -0)
➕ frontend/src/components/AmsNameHoverCard.tsx (+198 -0)
📝 frontend/src/components/Card.tsx (+1 -1)
📝 frontend/src/components/PrinterQueueWidget.tsx (+2 -2)
📝 frontend/src/i18n/locales/de.ts (+1 -0)
📝 frontend/src/i18n/locales/en.ts (+1 -0)
📝 frontend/src/i18n/locales/fr.ts (+2 -1)
📝 frontend/src/i18n/locales/it.ts (+1 -0)
📝 frontend/src/i18n/locales/ja.ts (+1 -0)
📝 frontend/src/i18n/locales/pt-BR.ts (+1 -0)
📝 frontend/src/pages/PrintersPage.tsx (+182 -896)

📄 Description

Description

Refactor printer card UI: extract AMSUnitCard into a standalone component, fix dual-nozzle external spool display, and improve card layout responsiveness.

FIx #610 #611 #612 #402

Type of Change

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Documentation update
Code refactoring
Performance improvement
Test addition or update

Changes Made

AMSUnitCard extraction: Moved AMS unit rendering (~995 lines) into frontend/src/components/AMSUnitCard.tsx, removing ~870 lines of dead inline AMS/HT-AMS code and unused SVG helpers (NozzleBadge, HumidityIndicator, TemperatureIndicator, WaterDrop*, Thermometer*) from PrintersPage.tsx
Dual-nozzle external spool fix: Filter vt_tray by extruder index so the left column only shows Ext-L (id 254) and the right column only shows Ext-R (id 255) — previously both spools appeared in both columns
Card layout: flex flex-col h-full on Card, flex flex-col gap-2 flex-1 on CardContent, mt-auto on bottom buttons so they always pin to the card bottom
Responsive padding: CardContent now uses p-3 lg:p-6 instead of p-6
Small screen card size: Clamp card size to max M on screens < 1024px, hide L/XL size buttons
Spacing cleanup: Remove redundant mb-3 from PrinterQueueWidget (parent gap-2 handles spacing)
Gitignore: Add .planning/ to prevent GSD planning artifacts from being committed

Testing

I have tested this on my local machine
All 1038 frontend tests pass (69 test files)
npm run build (tsc -b + Vite) compiles cleanly
Card.test.tsx updated for new responsive padding classes

Checklist

My code follows the project's coding style
My changes generate no new warnings
I have tested my changes thoroughly

Additional Notes

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

BreizhHardware

closed this issue
added the
pull-request
label

Rows
Columns

[PR #614] [CLOSED] Printer card UI improvements and AMSUnitCard extraction #1080