WIP: Applying more admin UI guidelines

Author: martin-brennan

assets/javascripts/discourse/components/ai-llms-list-editor.gjs

@@ -157,10 +157,9 @@ export default class AiLlmsListEditor extends Component {
                     <td class="column-edit">
                       <LinkTo
                         @route="adminPlugins.show.discourse-ai-llms.show"
-                        class="btn btn-default"
+                        class="btn btn-default btn-small"
                         @model={{llm.id}}
                       >
-                        {{icon "wrench"}}
                         <div class="d-button-label">
                           {{i18n "discourse_ai.llms.edit"}}
                         </div>

assets/javascripts/discourse/components/ai-persona-list-editor.gjs

@@ -10,25 +10,13 @@ import DToggleSwitch from "discourse/components/d-toggle-switch";
 import concatClass from "discourse/helpers/concat-class";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { cook } from "discourse/lib/text";
-import icon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
 import I18n from "discourse-i18n";
+import AdminPageSubheader from "admin/components/admin-page-subheader";
 import AiPersonaEditor from "./ai-persona-editor";
 
 export default class AiPersonaListEditor extends Component {
   @service adminPluginNavManager;
-  @tracked _noPersonaText = null;
-
-  get noPersonaText() {
-    if (this._noPersonaText === null) {
-      const raw = I18n.t("discourse_ai.ai_persona.no_persona_selected");
-      cook(raw).then((result) => {
-        this._noPersonaText = result;
-      });
-    }
-
-    return this._noPersonaText;
-  }
 
   @action
   async toggleEnabled(persona) {
@@ -53,29 +41,22 @@ export default class AiPersonaListEditor extends Component {
       {{#if @currentPersona}}
         <AiPersonaEditor @model={{@currentPersona}} @personas={{@personas}} />
       {{else}}
-        <div class="ai-persona-list-editor__header">
-          <h3>{{i18n "discourse_ai.ai_persona.short_title"}}</h3>
-          {{#unless @currentPersona.isNew}}
-            <LinkTo
+        <AdminPageSubheader
+          @titleLabel="discourse_ai.ai_persona.short_title"
+          @descriptionLabel="discourse_ai.ai_persona.persona_description"
+          @learnMoreUrl="https://meta.discourse.org/t/ai-bot-personas/306099"
+        >
+          <:actions as |actions|>
+            <actions.Primary
+              @label="discourse_ai.ai_persona.new"
               @route="adminPlugins.show.discourse-ai-personas.new"
-              class="btn btn-small btn-primary"
-            >
-              {{icon "plus"}}
-              <span>{{I18n.t "discourse_ai.ai_persona.new"}}</span>
-            </LinkTo>
-          {{/unless}}
-        </div>
-
-        <div class="ai-persona-list-editor__empty">
-          <details class="details__boxed">
-            <summary>{{i18n
-                "discourse_ai.ai_persona.what_are_personas"
-              }}</summary>
-            {{this.noPersonaText}}
-          </details>
-        </div>
+              @icon="plus"
+              class="ai-persona-list-editor__new-button"
+            />
+          </:actions>
+        </AdminPageSubheader>
 
-        <table class="content-list ai-persona-list-editor">
+        <table class="content-list ai-persona-list-editor d-admin-table">
           <thead>
             <tr>
               <th>{{i18n "discourse_ai.ai_persona.name"}}</th>
@@ -88,11 +69,11 @@ export default class AiPersonaListEditor extends Component {
               <tr
                 data-persona-id={{persona.id}}
                 class={{concatClass
-                  "ai-persona-list__row"
+                  "ai-persona-list__row d-admin-row__content"
                   (if persona.priority "priority")
                 }}
               >
-                <td>
+                <td class="d-admin-row__overview">
                   <div class="ai-persona-list__name-with-description">
                     <div class="ai-persona-list__name">
                       <strong>
@@ -104,13 +85,13 @@ export default class AiPersonaListEditor extends Component {
                     </div>
                   </div>
                 </td>
-                <td>
+                <td class="d-admin-row__detail">
                   <DToggleSwitch
                     @state={{persona.enabled}}
                     {{on "click" (fn this.toggleEnabled persona)}}
                   />
                 </td>
-                <td>
+                <td class="d-admin-row__controls">
                   <LinkTo
                     @route="adminPlugins.show.discourse-ai-personas.show"
                     @model={{persona}}

assets/javascripts/discourse/components/ai-tool-list-editor.gjs

@@ -2,9 +2,9 @@ import Component from "@glimmer/component";
 import { LinkTo } from "@ember/routing";
 import { service } from "@ember/service";
 import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
-import icon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
 import I18n from "discourse-i18n";
+import AdminPageSubheader from "admin/components/admin-page-subheader";
 
 export default class AiToolListEditor extends Component {
   @service adminPluginNavManager;
@@ -15,16 +15,17 @@ export default class AiToolListEditor extends Component {
       @label={{i18n "discourse_ai.tools.short_title"}}
     />
     <section class="ai-tool-list-editor__current admin-detail pull-left">
-      <div class="ai-tool-list-editor__header">
-        <h3>{{I18n.t "discourse_ai.tools.short_title"}}</h3>
-        <LinkTo
-          @route="adminPlugins.show.discourse-ai-tools.new"
-          class="btn btn-small btn-primary ai-tool-list-editor__new-button"
-        >
-          {{icon "plus"}}
-          <span>{{I18n.t "discourse_ai.tools.new"}}</span>
-        </LinkTo>
-      </div>
+
+      <AdminPageSubheader @titleLabel="discourse_ai.tools.short_title">
+        <:actions as |actions|>
+          <actions.Primary
+            @label="discourse_ai.tools.new"
+            @route="adminPlugins.show.discourse-ai-tools.new"
+            @icon="plus"
+            class="ai-tool-list-editor__new-button"
+          />
+        </:actions>
+      </AdminPageSubheader>
 
       <table class="content-list ai-tool-list-editor">
         <tbody>

config/locales/client.en.yml

@@ -185,17 +185,7 @@ en:
         tool_options: "Tool options"
         rag_conversation_chunks: "Search conversation chunks"
         rag_conversation_chunks_help: "The number of chunks to use for the RAG model searches. Increase to increase the amount of context the AI can use."
-        what_are_personas: "What are Personas?"
-        no_persona_selected: |
-          Personas are a powerful feature that allows you to customize the behavior of the AI engine in your Discourse forum. They act as a 'system message' that guides the AI's responses and interactions, helping to create a more personalized and engaging user experience.
-
-          #### Why use personas?
-
-          With personas, you can tailor the AI's behavior to better fit the context and tone of your forum. Whether you want the AI to be more formal for a professional setting, more casual for a community forum, or even embody a specific character for a role-playing game, personas give you the flexibility to do so.
-
-          #### Group-specific access to personas
-
-          Moreover, you can set it up so that certain user groups have access to specific personas. This means you can have different AI behaviors for different sections of your forum, further enhancing the diversity and richness of your community's interactions.
+        persona_description: "Personas are a powerful feature that allows you to customize the behavior of the AI engine in your Discourse forum. They act as a 'system message' that guides the AI's responses and interactions, helping to create a more personalized and engaging user experience."
 
       rag:
         options: