[PR #37] [MERGED] Add reusable Badge component and refactor badge usage #163

New issue

Closed

opened 2026-02-26 12:40:27 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 12:40:27 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/community-scripts/ProxmoxVE-Local/pull/37
Author: @MickLesk
Created: 10/6/2025
Status: ✅ Merged
Merged: 10/6/2025
Merged by: @michelroegl-brunner

Base: development ← Head: feat_badges

📝 Commits (1)

0f2f126 Add reusable Badge component and refactor badge usage

📊 Changes

6 files changed (+179 additions, -86 deletions)

View changed files

➕ src/app/_components/Badge.tsx (+140 -0)
📝 src/app/_components/DarkModeProvider.tsx (+12 -9)
📝 src/app/_components/InstalledScriptsTab.tsx (+7 -32)
📝 src/app/_components/ScriptCard.tsx (+3 -14)
📝 src/app/_components/ScriptDetailModal.tsx (+6 -29)
📝 src/app/layout.tsx (+11 -2)

📄 Description

✍️ Description

Introduces a new Badge component with variants for type, updateable, privileged, status, execution mode, and note. Refactors ScriptCard, ScriptDetailModal, and InstalledScriptsTab to use the new Badge components, improving consistency and maintainability. Also updates DarkModeProvider and layout.tsx for better dark mode handling and fallback.

Link: #30

✅ Prerequisites (X in brackets)

Self-review completed – Code follows project standards.
Tested thoroughly – Changes work as expected.
No security risks – No hardcoded secrets, unnecessary privilege escalations, or permission issues.

Screenshot for frontend Change

🛠️ Type of Change (X in brackets)

🐞 Bug fix – Resolves an issue without breaking functionality.
✨ New feature – Adds new, non-breaking functionality.
💥 Breaking change – Alters existing functionality in a way that may require updates.

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

## 📋 Pull Request Information **Original PR:** https://github.com/community-scripts/ProxmoxVE-Local/pull/37 **Author:** [@MickLesk](https://github.com/MickLesk) **Created:** 10/6/2025 **Status:** ✅ Merged **Merged:** 10/6/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `development` ← **Head:** `feat_badges` --- ### 📝 Commits (1) - [`0f2f126`](https://github.com/community-scripts/ProxmoxVE-Local/commit/0f2f126a449f177e9dc62b4434cce2cb45a305bf) Add reusable Badge component and refactor badge usage ### 📊 Changes **6 files changed** (+179 additions, -86 deletions) <details> <summary>View changed files</summary> ➕ `src/app/_components/Badge.tsx` (+140 -0) 📝 `src/app/_components/DarkModeProvider.tsx` (+12 -9) 📝 `src/app/_components/InstalledScriptsTab.tsx` (+7 -32) 📝 `src/app/_components/ScriptCard.tsx` (+3 -14) 📝 `src/app/_components/ScriptDetailModal.tsx` (+6 -29) 📝 `src/app/layout.tsx` (+11 -2) </details> ### 📄 Description  ## ✍️ Description Introduces a new Badge component with variants for type, updateable, privileged, status, execution mode, and note. Refactors ScriptCard, ScriptDetailModal, and InstalledScriptsTab to use the new Badge components, improving consistency and maintainability. Also updates DarkModeProvider and layout.tsx for better dark mode handling and fallback. ## 🔗 Related PR / Issue Link: #30 ## ✅ Prerequisites (**X** in brackets) - [x] **Self-review completed** – Code follows project standards. - [x] **Tested thoroughly** – Changes work as expected. - [x] **No security risks** – No hardcoded secrets, unnecessary privilege escalations, or permission issues. ## Screenshot for frontend Change <img width="1168" height="269" alt="image" src="https://github.com/user-attachments/assets/384e49bc-20d0-478d-9b92-08cb0e1b48a5" /> <img width="531" height="243" alt="image" src="https://github.com/user-attachments/assets/bf06bdf0-c4ef-4b68-998a-756d7991bb94" /> --- ## 🛠️ Type of Change (**X** in brackets) - [ ] 🐞 **Bug fix** – Resolves an issue without breaking functionality. - [x] ✨ **New feature** – Adds new, non-breaking functionality. - [ ] 💥 **Breaking change** – Alters existing functionality in a way that may require updates. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>