From 60df68b9dda3dd584a60584a1064ff1abd8fd2c2 Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Fri, 30 Jan 2026 09:07:04 +0100
Subject: [PATCH] ux: modernize admin plugins UI

---
 frontend/src/pages/admin/plugins.astro | 83 +++++++-------------------
 1 file changed, 22 insertions(+), 61 deletions(-)

diff --git a/frontend/src/pages/admin/plugins.astro b/frontend/src/pages/admin/plugins.astro
index 69f596e..9ca6f6d 100644
--- a/frontend/src/pages/admin/plugins.astro
+++ b/frontend/src/pages/admin/plugins.astro
@@ -10,31 +10,33 @@ import { API_BASE } from '../../lib/api';
     <AdminNav currentPage="/admin/plugins" />
 
     <main class="admin-content">
-      <header class="page-header">
-        <h1>Plugin Management</h1>
-        <p class="subtitle">Enable and configure platform plugins</p>
+      <header class="ui-page-header">
+        <div class="ui-page-title">
+          <h1>Plugin Management</h1>
+          <p class="ui-subtitle">Enable and configure platform plugins</p>
+        </div>
       </header>
 
       <div class="plugin-categories">
-        <div class="category" id="category-core">
+        <div class="category ui-card ui-card-soft ui-card-pad-md" id="category-core">
           <h2>Core Plugins</h2>
           <p class="category-desc">Essential plugins that cannot be disabled</p>
           <div class="plugins-list" data-category="core"></div>
         </div>
 
-        <div class="category" id="category-voting">
+        <div class="category ui-card ui-card-soft ui-card-pad-md" id="category-voting">
           <h2>Voting Plugins</h2>
           <p class="category-desc">Advanced voting methods for proposals</p>
           <div class="plugins-list" data-category="voting"></div>
         </div>
 
-        <div class="category" id="category-governance">
+        <div class="category ui-card ui-card-soft ui-card-pad-md" id="category-governance">
           <h2>Governance Features</h2>
           <p class="category-desc">Delegation, deliberation, and moderation</p>
           <div class="plugins-list" data-category="governance"></div>
         </div>
 
-        <div class="category" id="category-integrations">
+        <div class="category ui-card ui-card-soft ui-card-pad-md" id="category-integrations">
           <h2>Integrations</h2>
           <p class="category-desc">Connect with external services</p>
           <div class="plugins-list" data-category="integrations"></div>
@@ -50,53 +52,14 @@ import { API_BASE } from '../../lib/api';
     min-height: calc(100vh - 60px);
   }
 
-  .admin-nav {
-    width: 200px;
-    background: var(--bg-secondary);
-    padding: 1.5rem;
-    border-right: 1px solid var(--border-color);
-  }
-
-  .admin-nav a {
-    display: block;
-    padding: 0.75rem 1rem;
-    color: var(--text-secondary);
-    text-decoration: none;
-    border-radius: 0.5rem;
-    margin-bottom: 0.25rem;
-  }
-
-  .admin-nav a:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .admin-nav a.active {
-    background: var(--accent-color);
-    color: white;
-  }
-
   .admin-content {
     flex: 1;
     padding: 2rem;
     max-width: 1000px;
   }
 
-  .page-header {
-    margin-bottom: 2rem;
-  }
-
-  .page-header h1 {
-    margin: 0;
-  }
-
-  .subtitle {
-    color: var(--text-secondary);
-    margin-top: 0.5rem;
-  }
-
   .category {
-    margin-bottom: 2.5rem;
+    margin-bottom: 1.25rem;
   }
 
   .category h2 {
@@ -105,7 +68,7 @@ import { API_BASE } from '../../lib/api';
   }
 
   .category-desc {
-    color: var(--text-secondary);
+    color: var(--color-text-muted);
     margin: 0 0 1rem 0;
     font-size: 0.9rem;
   }
@@ -116,10 +79,6 @@ import { API_BASE } from '../../lib/api';
   }
 
   .plugin-card {
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-radius: 0.75rem;
-    padding: 1.25rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -145,18 +104,20 @@ import { API_BASE } from '../../lib/api';
     font-size: 0.7rem;
     padding: 0.15rem 0.5rem;
     border-radius: 1rem;
-    background: var(--accent-color);
-    color: white;
+    background: var(--color-primary);
+    color: var(--color-primary-contrast);
     font-weight: normal;
   }
 
   .plugin-info h3 .badge.core {
-    background: #6c757d;
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    color: var(--color-text-muted);
   }
 
   .plugin-info p {
     margin: 0;
-    color: var(--text-secondary);
+    color: var(--color-text-muted);
     font-size: 0.9rem;
   }
 
@@ -182,7 +143,7 @@ import { API_BASE } from '../../lib/api';
     position: absolute;
     cursor: pointer;
     inset: 0;
-    background: var(--border-color);
+    background: var(--color-border);
     border-radius: 26px;
     transition: 0.3s;
   }
@@ -194,13 +155,13 @@ import { API_BASE } from '../../lib/api';
     width: 20px;
     left: 3px;
     bottom: 3px;
-    background: white;
+    background: var(--color-surface);
     border-radius: 50%;
     transition: 0.3s;
   }
 
   input:checked + .toggle-slider {
-    background: var(--accent-color);
+    background: var(--color-primary);
   }
 
   input:checked + .toggle-slider:before {
@@ -215,7 +176,7 @@ import { API_BASE } from '../../lib/api';
   .loading {
     text-align: center;
     padding: 2rem;
-    color: var(--text-secondary);
+    color: var(--color-text-muted);
   }
 </style>
 
@@ -301,7 +262,7 @@ import { API_BASE } from '../../lib/api';
   function createPluginCard(plugin, isEnabled) {
     const isCore = plugin.is_core;
     return `
-      <div class="plugin-card ${isEnabled ? '' : 'disabled'}">
+      <div class="plugin-card ui-card ui-card-soft ui-card-pad-md ${isEnabled ? '' : 'disabled'}">
         <div class="plugin-info">
           <h3>
             ${plugin.display_name}