feat: add sync_status to dashboard cards with per-state styling

[raman325]

Proposed change

Adds granular sync status display to both dashboard cards, leveraging the new sync_status attribute from #1062.

Slot card:

• Distinct icons per sync state: check-circle (in sync), clock-outline (out of sync), sync (syncing), alert-circle (suspended)
• Color-coded: green, orange, orange, red respectively
• Shows "Suspended" text instead of last-synced time when suspended
• Status text inherits the state color for emphasis

Lock-codes card:

• Red warning banner "Sync suspended — lock is unreachable" when the lock's slot sync managers are suspended
• Card border turns red with reduced opacity for visual emphasis

Backend:

• sync_status field added to subscribe_lock_codes websocket response when suspended

TypeScript types:

• sync_status?: string added to SlotCardLockStatus and LockCoordinatorData interfaces

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (which adds functionality)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Additional information

• This PR fixes or closes issue:
• This PR is related to issue: [ISSUE] Slot gets disabled across all locks when one lock in the profile is temporarily unreachable #1061

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.43%. Comparing base (1d71a2b) to head (2b9a8d4).
⚠️ Report is 1 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1065      +/-   ##
==========================================
+ Coverage   95.28%   95.43%   +0.15%     
==========================================
  Files          45       45              
  Lines        4962     4994      +32     
  Branches      495      503       +8     
==========================================
+ Hits         4728     4766      +38     
+ Misses        234      228       -6     

Flag	Coverage Δ
python	97.14% <100.00%> (+<0.01%)	⬆️
typescript	90.84% <100.00%> (+0.65%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
custom_components/lock_code_manager/websocket.py	97.38% <100.00%> (+0.01%)	⬆️
ts/lock-codes-card.styles.ts	100.00% <ø> (ø)
ts/lock-codes-card.ts	86.62% <100.00%> (+0.15%)	⬆️
ts/shared-styles.ts	100.00% <ø> (ø)
ts/slot-card.styles.ts	100.00% <ø> (ø)
ts/slot-card.ts	89.40% <100.00%> (+1.54%)	⬆️
ts/types.ts	100.00% <ø> (ø)

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

Adds granular sync-status display to Lock Code Manager’s Lovelace cards (slot + lock-codes), using the new sync_status attribute and a suspended-state banner, plus backend websocket support to surface suspension state.

Changes:

• Slot card: render per-lock sync state with distinct icons/text, and special handling for suspended (hide last-synced time).
• Lock-codes card: show a “Sync suspended — lock is unreachable” banner and suspended card styling.
• Backend/types/styles: extend TS interfaces and websocket subscribe_lock_codes payload to include sync_status when suspended; add shared error color + new status indicator classes.

Reviewed changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
ts/types.ts	Extends frontend data contracts with optional sync_status.
ts/slot-card.ts	Uses sync_status to pick icon/text/state classes; suppresses last-synced when suspended.
ts/slot-card.styles.ts	Adds styling hooks for suspended/syncing status text.
ts/shared-styles.ts	Introduces --lcm-error-color and shared .lcm-sync-icon classes for new states.
ts/lock-codes-card.ts	Adds suspended detection and banner rendering.
ts/lock-codes-card.styles.ts	Adds suspended border/opacity styling and banner styles.
custom_components/lock_code_manager/websocket.py	Adds sync_status: "suspended" to subscribe_lock_codes response when slot sync is suspended.
custom_components/lock_code_manager/www/generated/lock-code-manager.js	Regenerates bundled frontend to include the new UI/typing/styling changes.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.