From 5937a0fc54c77da063e5e559d900d36a263dd0fc Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Thu, 29 Jan 2026 17:52:30 +0100
Subject: [PATCH] ui: refresh community plugins page

---
 .../pages/communities/[slug]/plugins.astro    | 176 +++++++-----------
 1 file changed, 71 insertions(+), 105 deletions(-)

diff --git a/frontend/src/pages/communities/[slug]/plugins.astro b/frontend/src/pages/communities/[slug]/plugins.astro
index 164705f..c49d72e 100644
--- a/frontend/src/pages/communities/[slug]/plugins.astro
+++ b/frontend/src/pages/communities/[slug]/plugins.astro
@@ -6,17 +6,21 @@ const { slug } = Astro.params;
 ---
 
 <Layout title="Community Plugins">
-  <section class="plugins-page">
-    <div class="page-header">
-      <div>
-        <h1>Plugins</h1>
-        <p class="subtitle">Manage plugins for this community</p>
+  <section class="ui-page">
+    <div class="ui-container">
+      <div class="hero ui-card ui-card-glass">
+        <div class="hero-top">
+          <div>
+            <h1 class="hero-title">Plugins</h1>
+            <p class="hero-subtitle">Manage plugins for this community</p>
+          </div>
+          <a class="ui-btn ui-btn-secondary" href={`/communities/${slug}`}>Back</a>
+        </div>
       </div>
-      <a class="btn-secondary" href={`/communities/${slug}`}>Back</a>
-    </div>
 
-    <div id="plugins-content">
-      <p class="loading">Loading...</p>
+      <div id="plugins-content">
+        <div class="state-card ui-card"><p class="loading">Loading...</p></div>
+      </div>
     </div>
   </section>
 </Layout>
@@ -121,7 +125,7 @@ const { slug } = Astro.params;
           <p class="settings-hint">No schema defined. Edit raw JSON:</p>
           <textarea class="settings-json" spellcheck="false" data-name="${escapeHtml(pluginName)}">${escapeHtml(settingsText)}</textarea>
           <div class="settings-actions">
-            <button class="btn-primary btn-save-json" data-name="${escapeHtml(pluginName)}">Save Settings</button>
+            <button class="ui-btn ui-btn-primary btn-save-json" data-name="${escapeHtml(pluginName)}">Save Settings</button>
             <span class="status" id="status-${escapeHtml(pluginName)}"></span>
           </div>
         </div>
@@ -136,7 +140,7 @@ const { slug } = Astro.params;
       <form class="settings-form" data-plugin="${escapeHtml(pluginName)}">
         ${fields}
         <div class="settings-actions">
-          <button type="submit" class="btn-primary">Save Settings</button>
+          <button type="submit" class="ui-btn ui-btn-primary">Save Settings</button>
           <span class="status" id="status-${escapeHtml(pluginName)}"></span>
         </div>
       </form>
@@ -160,9 +164,12 @@ const { slug } = Astro.params;
     }
 
     container.innerHTML = `
-      <div class="community-badge">
-        <span class="name">${escapeHtml(community.name)}</span>
-        <span class="slug">/${escapeHtml(community.slug)}</span>
+      <div class="community-badge ui-card">
+        <div class="community-badge-title">
+          <span class="name">${escapeHtml(community.name)}</span>
+          <span class="slug">/${escapeHtml(community.slug)}</span>
+        </div>
+        <div class="community-badge-subtitle">Community plugin settings</div>
       </div>
 
       <div class="plugins-list">
@@ -174,13 +181,13 @@ const { slug } = Astro.params;
           const hasSchema = p.settings_schema && p.settings_schema.properties;
 
           return `
-            <div class="plugin-card" data-name="${escapeHtml(p.name)}">
+            <div class="plugin-card ui-card" data-name="${escapeHtml(p.name)}">
               <div class="plugin-head">
                 <div class="plugin-title">
                   <h3>${escapeHtml(p.name)}</h3>
                   <span class="version">v${escapeHtml(p.version)}</span>
-                  ${isCore ? `<span class="badge core">core</span>` : ''}
-                  ${disabledGlobally ? `<span class="badge disabled">disabled globally</span>` : ''}
+                  ${isCore ? `<span class="ui-pill tag-core">core</span>` : ''}
+                  ${disabledGlobally ? `<span class="ui-pill tag-disabled">disabled globally</span>` : ''}
                 </div>
 
                 <div class="plugin-controls">
@@ -193,9 +200,12 @@ const { slug } = Astro.params;
 
               ${p.description ? `<p class="desc">${escapeHtml(p.description)}</p>` : ''}
 
-              <details class="settings">
-                <summary>Settings ${hasSchema ? '' : '<span class="schema-badge">JSON</span>'}</summary>
-                <div class="settings-body-wrap">
+              <details class="panel ui-card settings-panel">
+                <summary class="panel-summary">
+                  <span class="panel-title">Settings</span>
+                  <span class="panel-meta">${hasSchema ? 'Schema' : '<span class="ui-badge">JSON</span>'}</span>
+                </summary>
+                <div class="panel-body settings-body-wrap">
                   ${renderSettingsForm(p.name, p.settings_schema, p.settings)}
                 </div>
               </details>
@@ -362,32 +372,51 @@ const { slug } = Astro.params;
 </script>
 
 <style>
-  .plugins-page {
-    padding: 2rem 0;
+  .hero {
+    padding: 1.25rem;
+    margin-bottom: 1rem;
   }
 
-  .page-header {
+  .hero-top {
     display: flex;
-    justify-content: space-between;
     align-items: flex-start;
+    justify-content: space-between;
     gap: 1rem;
-    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
   }
 
-  h1 {
-    font-size: 2.25rem;
-    margin-bottom: 0.25rem;
+  .hero-title {
+    margin: 0;
+    font-size: 2.125rem;
+    letter-spacing: -0.02em;
   }
 
-  .subtitle {
+  .hero-subtitle {
+    margin: 0.25rem 0 0;
     color: var(--color-text-muted);
   }
 
+  .state-card {
+    padding: 2.25rem 1.5rem;
+    text-align: center;
+  }
+
   .community-badge {
+    padding: 1rem 1.1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .community-badge-title {
     display: flex;
     gap: 0.75rem;
     align-items: baseline;
-    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+  }
+
+  .community-badge-subtitle {
+    margin-top: 0.35rem;
+    color: var(--color-text-muted);
+    font-size: 0.875rem;
   }
 
   .community-badge .name {
@@ -406,9 +435,6 @@ const { slug } = Astro.params;
   }
 
   .plugin-card {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: 12px;
     padding: 1rem;
   }
 
@@ -436,22 +462,14 @@ const { slug } = Astro.params;
     font-family: monospace;
   }
 
-  .badge {
-    font-size: 0.75rem;
-    border: 1px solid var(--color-border);
-    padding: 0.15rem 0.5rem;
-    border-radius: 999px;
-    color: var(--color-text-muted);
-  }
-
-  .badge.core {
+  .tag-core {
+    background: var(--color-info-muted);
     color: var(--color-info);
-    border-color: var(--color-info-muted);
   }
 
-  .badge.disabled {
+  .tag-disabled {
+    background: var(--color-error-muted);
     color: var(--color-error);
-    border-color: var(--color-error-muted);
   }
 
   .desc {
@@ -459,17 +477,8 @@ const { slug } = Astro.params;
     margin-bottom: 0.75rem;
   }
 
-  details.settings {
-    border-top: 1px solid var(--color-border);
-    padding-top: 0.75rem;
-  }
-
-  details.settings summary {
-    cursor: pointer;
-    user-select: none;
-    color: var(--color-text);
-    font-weight: 600;
-    margin-bottom: 0.75rem;
+  .settings-panel {
+    margin-top: 0.75rem;
   }
 
   .settings-body {
@@ -495,6 +504,7 @@ const { slug } = Astro.params;
     display: flex;
     align-items: center;
     gap: 0.75rem;
+    flex-wrap: wrap;
   }
 
   .status {
@@ -502,41 +512,6 @@ const { slug } = Astro.params;
     font-size: 0.9rem;
   }
 
-  .btn-primary, .btn-secondary {
-    padding: 0.6rem 1rem;
-    border-radius: 8px;
-    font-weight: 600;
-    display: inline-block;
-  }
-
-  .btn-primary {
-    background: var(--color-primary);
-    color: var(--color-on-primary);
-    border: none;
-    cursor: pointer;
-  }
-
-  .btn-primary:hover {
-    background: var(--color-primary-hover);
-    color: var(--color-on-primary);
-  }
-
-  .btn-primary:disabled {
-    opacity: 0.7;
-    cursor: default;
-  }
-
-  .btn-secondary {
-    background: transparent;
-    border: 1px solid var(--color-border);
-    color: var(--color-text);
-  }
-
-  .btn-secondary:hover {
-    border-color: var(--color-primary);
-    color: var(--color-primary);
-  }
-
   .switch {
     position: relative;
     display: inline-block;
@@ -622,12 +597,7 @@ const { slug } = Astro.params;
   .schema-field input[type="text"],
   .schema-field input[type="number"],
   .schema-field select {
-    padding: 0.6rem 0.75rem;
-    border-radius: 8px;
-    border: 1px solid var(--color-border);
-    background: var(--color-field-bg);
-    color: var(--color-text);
-    font-size: 0.9rem;
+    border-radius: var(--radius-md);
   }
 
   .schema-field input[type="text"]:focus,
@@ -662,13 +632,9 @@ const { slug } = Astro.params;
     margin-bottom: 0.5rem;
   }
 
-  .schema-badge {
-    font-size: 0.7rem;
-    background: var(--color-primary-muted);
-    color: var(--color-primary);
-    padding: 0.1rem 0.4rem;
-    border-radius: 4px;
-    margin-left: 0.5rem;
-    vertical-align: middle;
+  @media (max-width: 768px) {
+    .plugin-head {
+      flex-direction: column;
+    }
   }
 </style>