From 368264e286972bc2d35ce600c9bd47c1857a3713 Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Fri, 30 Jan 2026 12:05:55 +0100
Subject: [PATCH] ux: normalize plugin settings forms via ui-form

---
 .../components/ui/DesignSystemStyles.astro    |  2 +-
 .../pages/communities/[slug]/plugins.astro    | 22 ++-----------------
 2 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index f2011cd..286ddcc 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -167,7 +167,7 @@
     border-color: var(--color-border-hover);
   }
 
-  :where(input, textarea, select):focus-visible {
+  :where(input, textarea, select):focus {
     outline: none;
     border-color: var(--color-primary);
   }
diff --git a/frontend/src/pages/communities/[slug]/plugins.astro b/frontend/src/pages/communities/[slug]/plugins.astro
index 338f032..1c457e6 100644
--- a/frontend/src/pages/communities/[slug]/plugins.astro
+++ b/frontend/src/pages/communities/[slug]/plugins.astro
@@ -121,7 +121,7 @@ const { slug } = Astro.params;
     if (!schema || !schema.properties) {
       const settingsText = JSON.stringify(settings ?? {}, null, 2);
       return `
-        <div class="settings-body">
+        <div class="settings-body ui-form" style="--ui-form-group-mb: 0.75rem;">
           <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">
@@ -137,7 +137,7 @@ const { slug } = Astro.params;
     }).join('');
 
     return `
-      <form class="settings-form" data-plugin="${escapeHtml(pluginName)}">
+      <form class="settings-form ui-form" data-plugin="${escapeHtml(pluginName)}" style="--ui-form-group-mb: 1rem;">
         ${fields}
         <div class="settings-actions">
           <button type="submit" class="ui-btn ui-btn-primary">Save Settings</button>
@@ -459,13 +459,8 @@ const { slug } = Astro.params;
   }
 
   textarea.settings-json {
-    width: 100%;
     min-height: 140px;
     border-radius: 10px;
-    border: 1px solid var(--color-border);
-    background: var(--color-field-bg);
-    padding: 0.75rem;
-    color: var(--color-text);
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
     font-size: 0.9rem;
     resize: vertical;
@@ -565,19 +560,6 @@ const { slug } = Astro.params;
     font-size: 0.9rem;
   }
 
-  .schema-field input[type="text"],
-  .schema-field input[type="number"],
-  .schema-field select {
-    border-radius: var(--radius-md);
-  }
-
-  .schema-field input[type="text"]:focus,
-  .schema-field input[type="number"]:focus,
-  .schema-field select:focus {
-    outline: none;
-    border-color: var(--color-primary);
-  }
-
   .checkbox-label {
     display: flex;
     align-items: center;