UX: Rough edges

Use I18n in more places, fix text formatting, make stat tiles
consistent visually with usage page

Author: martin-brennan

assets/javascripts/discourse/components/ai-spam.gjs

@@ -13,6 +13,8 @@ import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import i18n from "discourse-common/helpers/i18n";
 import getURL from "discourse-common/lib/get-url";
+import AdminConfigAreaCard from "admin/components/admin-config-area-card";
+import AdminPageSubheader from "admin/components/admin-page-subheader";
 import ComboBox from "select-kit/components/combo-box";
 import SpamTestModal from "./modal/spam-test-modal";
 
@@ -109,7 +111,7 @@ export default class AiSpam extends Component {
     this.modal.show(SpamTestModal, {
       model: {
         customInstructions: this.customInstructions,
-      }
+      },
     });
   }
 
@@ -143,9 +145,10 @@ export default class AiSpam extends Component {
   <template>
     <div class="ai-spam">
       <section class="ai-spam__settings">
-        <h3 class="ai-spam__settings-title">{{i18n
-            "discourse_ai.spam.title"
-          }}</h3>
+        <AdminPageSubheader
+          @titleLabel="discourse_ai.spam.title"
+          @descriptionLabel="discourse_ai.spam.spam_description"
+        />
 
         <div class="control-group ai-spam__enabled">
           <DToggleSwitch
@@ -197,7 +200,7 @@ export default class AiSpam extends Component {
           >{{this.customInstructions}}</textarea>
           <DButton
             @action={{this.save}}
-            @label="save"
+            @label="discourse_ai.spam.save_button"
             class="ai-spam__instructions-save btn-primary"
           />
           <DButton
@@ -208,26 +211,29 @@ export default class AiSpam extends Component {
         </div>
       </section>
 
-      <section class="ai-spam__stats">
-        <h3 class="ai-spam__stats-title">{{i18n
-            "discourse_ai.spam.last_seven_days"
-          }}</h3>
-
-        <div class="ai-spam__metrics">
-          {{#each this.metrics as |metric|}}
-            <div class="ai-spam__metrics-item">
-              <span class="ai-spam__metrics-label">{{i18n metric.label}}</span>
-              {{#if metric.href}}
-                <a href={{metric.href}} class="ai-spam__metrics-value">
-                  {{metric.value}}
-                </a>
-              {{else}}
-                <span class="ai-spam__metrics-value">{{metric.value}}</span>
-              {{/if}}
-            </div>
-          {{/each}}
-        </div>
-      </section>
+      <AdminConfigAreaCard
+        @heading="discourse_ai.spam.last_seven_days"
+        class="ai-spam__stats"
+      >
+        <:content>
+          <div class="ai-spam__metrics">
+            {{#each this.metrics as |metric|}}
+              <div class="ai-spam__metrics-item">
+                <span class="ai-spam__metrics-label">{{i18n
+                    metric.label
+                  }}</span>
+                {{#if metric.href}}
+                  <a href={{metric.href}} class="ai-spam__metrics-value">
+                    {{metric.value}}
+                  </a>
+                {{else}}
+                  <span class="ai-spam__metrics-value">{{metric.value}}</span>
+                {{/if}}
+              </div>
+            {{/each}}
+          </div>
+        </:content>
+      </AdminConfigAreaCard>
     </div>
   </template>
 }

assets/javascripts/discourse/components/modal/spam-test-modal.gjs

@@ -3,7 +3,6 @@ import { tracked } from "@glimmer/tracking";
 import { fn } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
-import { eq } from "truth-helpers";
 import DButton from "discourse/components/d-button";
 import DModal from "discourse/components/d-modal";
 import withEventValue from "discourse/helpers/with-event-value";
@@ -27,12 +26,14 @@ export default class SpamTestModal extends Component {
           type: "POST",
           data: {
             post_url: this.postUrl,
-            custom_instructions: this.args.model.customInstructions
+            custom_instructions: this.args.model.customInstructions,
           },
         }
       );
 
-      this.testResult = response.is_spam ? "Spam" : "Not Spam";
+      this.testResult = response.is_spam
+        ? I18n.t("discourse_ai.usage.test_modal.spam")
+        : I18n.t("discourse_ai.usage.test_modal.not_spam");
       this.scanLog = response.log;
     } catch (error) {
       popupAjaxError(error);
@@ -41,6 +42,10 @@ export default class SpamTestModal extends Component {
     }
   }
 
+  get isSpam() {
+    return this.testResult === I18n.t("discourse_ai.usage.test_modal.spam");
+  }
+
   <template>
     <DModal
       @title={{I18n.t "discourse_ai.spam.test_modal.title"}}
@@ -67,7 +72,7 @@ export default class SpamTestModal extends Component {
             <h3>{{I18n.t "discourse_ai.spam.test_modal.result"}}</h3>
             <div
               class="spam-test-modal__verdict
-                {{if (eq this.testResult 'Spam') 'is-spam' 'not-spam'}}"
+                {{if this.isSpam 'is-spam' 'not-spam'}}"
             >
               {{this.testResult}}
             </div>

assets/stylesheets/modules/llms/common/spam.scss

@@ -58,20 +58,23 @@
   }
 
   &__metrics-item {
-    background: var(--primary-very-low);
+    display: flex;
+    flex-direction: column;
     padding: 1em;
+    background: var(--primary-very-low);
     border-radius: 0.25em;
-    text-align: center;
   }
 
   &__metrics-label {
-    display: block;
-    font-weight: bold;
+    color: var(--primary-medium);
+    font-size: 0.875em;
     margin-bottom: 0.5em;
   }
 
   &__metrics-value {
-    font-size: var(--font-up-2);
+    color: var(--primary);
+    font-size: 1.5em;
+    font-weight: bold;
   }
 }
 

config/locales/client.en.yml

@@ -128,7 +128,7 @@ en:
 
       spam:
         short_title: "Spam"
-        title: "Configure AI Spam handling"
+        title: "Configure spam handling"
         select_llm: "Select LLM"
         custom_instructions: "Custom instructions"
         custom_instructions_help: "Custom instructions specific to your site to help guide the AI in identifying spam, e.g. 'Be more aggressive about scanning posts not in English'."
@@ -141,15 +141,19 @@ en:
         enable: "Enable"
         spam_tip: "AI spam detection will scan the first 3 posts by all new users on public topics. It will flag them for review and block users if they are likely spam."
         settings_saved: "Settings saved"
+        spam_description: "Identifies potential spam using the selected LLM and flags it for site moderators to inspect in the review queue."
         no_llms: "No LLMs available"
         test_button: "Test..."
+        save_button: "Save changes"
         test_modal:
-          title: "Test Spam Detection"
+          title: "Test spam detection"
           post_url_label: "Post URL or ID"
           post_url_placeholder: "https://your-forum.com/t/topic/123/4 or post ID"
           result: "Result"
-          scan_log: "Scan Log"
-          run: "Run Test"
+          scan_log: "Scan log"
+          run: "Run test"
+          spam: "Spam"
+          not_spam: "Not spam"
 
       usage:
         short_title: "Usage"