feat(KLEF-42): Glass Components

[Chronyyx]

Pull Request

Summary

This PR revamps the UI components to integrate the latest glassmorphism design patterns. It overhauls the ServerCard, StatusBadge, and ResourceBar components with glowing effects, semi-transparent backgrounds, and new interactive styling attributes to match the updated application aesthetic.

Related Issues

Closes #KLEF-42

---

Changes

What's Included

• Updated ServerCard to use the new overview-glass-card class and added support for frosted, focus, and spotlight props (via data-* attributes).
• Refactored color tokens across components, replacing hardcoded zinc colors with dynamic, semi-transparent white alphas.
• Upgraded StatusBadge configurations to include glowing drop shadows (shadow-[0_0_8px_...]) for each status state.
• Enhanced the ResourceBar with inset shadows and glowing progress indicators.
• Updated action buttons within ServerCard to utilize the new glass-surface styling and hover effects.

What's Not Included

• No new UI components were added to @kleffio/ui in this PR (it only consumes the updated tokens).
• No changes to the underlying platform API or routing structure.

---

Testing

How Was This Tested?

• Verified the rendering of the new overview-glass-card styles and glowing effects locally.
• Confirmed that the data-frosted, data-focus, and data-spotlight attributes apply correctly on the ServerCard.
• Checked that all server status states (Running, Stopped, Starting, etc.) properly reflect their new styling and shadow colors.

Test Coverage

• Unit tests added or updated
• Integration tests added or updated
• Manually tested end-to-end

---

Breaking Changes

Does this PR introduce breaking changes?

• Yes
• No

If yes, describe the impact and any required migration steps:

---

Security Considerations

• This PR affects authentication or authorization logic
• This PR touches secrets, tokens, or environment variables
• This PR affects infrastructure, deployment pipelines, or network configuration

If any box is checked, describe the security impact and any mitigations applied:

---

Documentation

Does this PR require documentation updates?

• Yes
• No

If yes, check all that apply:

• README.md
• ARCHITECTURE.md
• API reference
• Architecture diagrams (C4 / DDD)
• /docs

---

UI/UX (If Applicable)

• Includes new components or views
• Changes styles or theme tokens
• Responsive behavior verified
• Requires design approval

Screenshots or recordings:
(Feel free to drop screenshots of the updated ServerCard and StatusBadges here)

---

Pre-Merge Checklist

• PR title follows semantic format (feat:, fix:, chore:, docs:, refactor:, test:)
• All CI checks passing
• Code follows project style guidelines
• No debug logs or commented-out code left in
• Dependencies reviewed (no unnecessary additions)
• No sensitive information included

---

Reviewer Notes

This PR aligns the components with the newly established glassmorphism design system.

[Copilot]

Pull request overview

This PR updates the component showcase and several domain UI components to adopt a new “glassmorphism” visual system (glows, semi-transparent surfaces), including new data-* styling hooks (frosted, focus, spotlight) on card-like components.

Changes:

• Updated ServerCard and MetricCard to support frosted/focus/spotlight props via data-* attributes and switched to glass-oriented class names.
• Refreshed badge components (StatusBadge, PlanBadge, RegionBadge) with new color/alpha tokens and glow/shadow styling.
• Refactored ComponentsPage layout/styling and added a progress auto-advance demo with speed toggles.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/domain/StatusBadge.tsx	Adds glow/shadow styling and shifts stopped styling to white alpha tokens.
src/domain/ServerCard.tsx	Adds frosted/focus/spotlight props and switches to glass-oriented surface classes and tokens.
src/domain/RegionBadge.tsx	Updates badge visuals to glass/alpha styling with subtle shadow.
src/domain/PlanBadge.tsx	Updates tier styles (notably free, pro, enterprise) to new glass/token palette.
src/domain/MetricCard.tsx	Adds frosted/focus/spotlight props and switches to glass-oriented layout/styling.
src/ComponentsPage.tsx	Refactors the showcase layout and styling, installs glow-follow behavior, and adds progress speed controls.

---

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