UX: add disclosure for topic list gists (#861)

Author: awesomerobot

assets/javascripts/discourse/components/ai-gist-disclosure.gjs

@@ -0,0 +1,23 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
+import icon from "discourse-common/helpers/d-icon";
+import i18n from "discourse-common/helpers/i18n";
+
+export default class AiGistDisclosure extends Component {
+  @service router;
+
+  get shouldShow() {
+    return this.router.currentRoute.attributes.list?.topics?.some(
+      (topic) => topic.ai_topic_gist
+    );
+  }
+
+  <template>
+    {{#if this.shouldShow}}
+      <span class="ai-topic-gist__disclosure">
+        {{icon "discourse-sparkles"}}
+        {{i18n "discourse_ai.summarization.disclosure"}}
+      </span>
+    {{/if}}
+  </template>
+}

assets/javascripts/discourse/connectors/discovery-above/mobile-gist-disclosure.gjs

@@ -0,0 +1,13 @@
+import Component from "@glimmer/component";
+import AiGistDisclosure from "../../components/ai-gist-disclosure";
+
+export default class AiTopicGistDisclosure extends Component {
+  static shouldRender(outletArgs, helper) {
+    const isMobileView = helper.site.mobileView;
+    return isMobileView;
+  }
+
+  <template>
+    <AiGistDisclosure />
+  </template>
+}

assets/javascripts/discourse/connectors/topic-list-heading-bottom/desktop-gist-disclosure.gjs

@@ -0,0 +1,16 @@
+import Component from "@glimmer/component";
+import AiGistDisclosure from "../../components/ai-gist-disclosure";
+
+export default class AiTopicGist extends Component {
+  static shouldRender(outletArgs) {
+    return (
+      // "default" can be removed after the glimmer topic list is rolled out
+      (outletArgs?.name === "default" || outletArgs?.name === "topic.title") &&
+      !outletArgs.bulkSelectEnabled
+    );
+  }
+
+  <template>
+    <AiGistDisclosure />
+  </template>
+}

assets/stylesheets/modules/summarization/common/ai-summary.scss

@@ -235,4 +235,22 @@
       color: var(--primary-medium);
     }
   }
+
+  &__disclosure {
+    font-size: var(--font-down-1);
+    color: var(--primary-600);
+    .desktop-view & {
+      margin-left: 0.5em;
+    }
+    .mobile-view & {
+      display: block;
+      margin-top: -0.5em;
+      margin-bottom: 0.5em;
+    }
+    .d-icon {
+      font-size: var(--font-down-1);
+      position: relative;
+      top: -0.05em; // improve vertical alignment
+    }
+  }
 }

config/locales/client.en.yml

@@ -464,6 +464,7 @@ en:
         topic:
           title: "Topic summary"
           close: "Close summary panel"
+        disclosure: "Summaries generated by AI"
     review:
       types:
         reviewable_ai_post: