[PR #866] [MERGED] [Feature] Spoolbuddy spool detail card and UI improvements

## 📋 Pull Request Information **Original PR:** https://github.com/maziggy/bambuddy/pull/866 **Author:** [@Keybored02](https://github.com/Keybored02) **Created:** 4/1/2026 **Status:** ✅ Merged **Merged:** 4/4/2026 **Merged by:** [@maziggy](https://github.com/maziggy) **Base:** `dev` ← **Head:** `feature/spoolbuddy_fixes_2` --- ### 📝 Commits (10+) - [`e9c7d0a`](https://github.com/maziggy/bambuddy/commit/e9c7d0ababa33f845bb1658e443993cdd7a84dbd) Lighter Ring animation - [`9f5fc97`](https://github.com/maziggy/bambuddy/commit/9f5fc9794af9e2f84be7f6f4a413c7f0c8a035b0) Add InventorySpoolInfoCard component for Inventory spool information display - [`f4c7341`](https://github.com/maziggy/bambuddy/commit/f4c7341225abb6d56e542669064d0ee84f703b1c) Merge branch 'dev' into feature/spoolbuddy_fixes_2 - [`d37682b`](https://github.com/maziggy/bambuddy/commit/d37682bad28c6059988c2591e8759fa7b46c11c7) Merge branch 'dev' into feature/spoolbuddy_fixes_2 - [`3f61a45`](https://github.com/maziggy/bambuddy/commit/3f61a4569cf1e7adc8f0d89060d8734a9db1fab5) Merge branch 'dev' into feature/spoolbuddy_fixes_2 - [`1b20de7`](https://github.com/maziggy/bambuddy/commit/1b20de779be833c29c89b39f6f3eeac50e57eefb) Add missing fields back, change scale UI behavoiur - [`b89627f`](https://github.com/maziggy/bambuddy/commit/b89627faeea4f2f5ec6f4875a03ed30434a7e1c3) Merge branch 'feature/spoolbuddy_fixes_2' of https://github.com/Keybored02/bambuddy into feature/spoolbuddy_fixes_2 - [`1898291`](https://github.com/maziggy/bambuddy/commit/18982914f5088a06eb6bfca5e52b2eb389e9337b) Weight calculation to always return null when not using live scale weight - [`4bf6e87`](https://github.com/maziggy/bambuddy/commit/4bf6e87851b5be8522f55fdacfd597067e6e95e8) SpoolIcon and SpoolBuddyDashboard with transition effects - [`f79f656`](https://github.com/maziggy/bambuddy/commit/f79f6562377d1340eb1652ac2f1b9663325c225e) Optimize spool animation performance and update wave rendering ### 📊 Changes **4 files changed** (+401 additions, -155 deletions) <details> <summary>View changed files</summary> ➕ `frontend/src/components/spoolbuddy/InventorySpoolInfoCard.tsx` (+283 -0) 📝 `frontend/src/index.css` (+37 -0) 📝 `frontend/src/pages/spoolbuddy/SpoolBuddyDashboard.tsx` (+29 -9) 📝 `frontend/src/pages/spoolbuddy/SpoolBuddyInventoryPage.tsx` (+52 -146) </details> ### 📄 Description ## Description This PR introduces back the ring animation for NFC scanning UI and re-uses the `SpoolInfoCard` in the Inventory page with slight logic variations. Due to the different usages and options, a new file has been added: `InventorySpoolInfoCard.tsx`. ## Related Issue Fixes #820 ## Type of Change  - [ ] Bug fix (non-breaking change that fixes an issue) - [x] New feature (non-breaking change that adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) - [ ] Documentation update - [ ] Code refactoring - [x] Performance improvement - [ ] Test addition or update ## Changes Made  - Added `InventorySpoolInfoCard` for inventory detail popups, mostly copied from `SpoolInfoCard`. - Inventory Card displays gross weight (from inventory), live fill bar (from scale), and always shows a gross value (with fallback). - Action row includes Assign, Sync, and Close buttons, matching the dashboard. - Introduced a new CSS animation: `spoolbuddy-optimized-ping` in `index.css`. Animation is optimized for low-power devices. ## Screenshots ## Testing  - [x] I have tested this on my local machine - [x] I have tested with my printer model: H2C/RPi 3B+ ## Checklist - [x] My code follows the project's coding style - [x] I have commented my code where necessary - [ ] I have updated the documentation (if needed) - [x] My changes generate no new warnings - [x] I have tested my changes thoroughly ## Additional Notes  I think it's better if the two card are separated, even if they share a lot of the code, due to the different workflows. --- <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:35:11 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/maziggy/bambuddy/pull/866
Author: @Keybored02
Created: 4/1/2026
Status: ✅ Merged
Merged: 4/4/2026
Merged by: @maziggy

Base: dev ← Head: feature/spoolbuddy_fixes_2

📝 Commits (10+)

e9c7d0a Lighter Ring animation
9f5fc97 Add InventorySpoolInfoCard component for Inventory spool information display
f4c7341 Merge branch 'dev' into feature/spoolbuddy_fixes_2
d37682b Merge branch 'dev' into feature/spoolbuddy_fixes_2
3f61a45 Merge branch 'dev' into feature/spoolbuddy_fixes_2
1b20de7 Add missing fields back, change scale UI behavoiur
b89627f Merge branch 'feature/spoolbuddy_fixes_2' of https://github.com/Keybored02/bambuddy into feature/spoolbuddy_fixes_2
1898291 Weight calculation to always return null when not using live scale weight
4bf6e87 SpoolIcon and SpoolBuddyDashboard with transition effects
f79f656 Optimize spool animation performance and update wave rendering

📊 Changes

4 files changed (+401 additions, -155 deletions)

View changed files

➕ frontend/src/components/spoolbuddy/InventorySpoolInfoCard.tsx (+283 -0)
📝 frontend/src/index.css (+37 -0)
📝 frontend/src/pages/spoolbuddy/SpoolBuddyDashboard.tsx (+29 -9)
📝 frontend/src/pages/spoolbuddy/SpoolBuddyInventoryPage.tsx (+52 -146)

📄 Description

Description

This PR introduces back the ring animation for NFC scanning UI and re-uses the SpoolInfoCard in the Inventory page with slight logic variations. Due to the different usages and options, a new file has been added: InventorySpoolInfoCard.tsx.

Fixes #820

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

Added InventorySpoolInfoCard for inventory detail popups, mostly copied from SpoolInfoCard.
Inventory Card displays gross weight (from inventory), live fill bar (from scale), and always shows a gross value (with fallback).
Action row includes Assign, Sync, and Close buttons, matching the dashboard.
Introduced a new CSS animation: spoolbuddy-optimized-ping in index.css. Animation is optimized for low-power devices.

Screenshots

Testing

I have tested this on my local machine
I have tested with my printer model: H2C/RPi 3B+

Checklist

My code follows the project's coding style
I have commented my code where necessary
I have updated the documentation (if needed)
My changes generate no new warnings
I have tested my changes thoroughly

Additional Notes

I think it's better if the two card are separated, even if they share a lot of the code, due to the different workflows.

_{🔄 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 #866] [MERGED] [Feature] Spoolbuddy spool detail card and UI improvements #1124