UX: Allow adding content inline to the topic map (#28053)

app/assets/javascripts/discourse/app/components/topic-map/topic-map-summary.gjs

@@ -12,6 +12,7 @@ import TopicParticipants from "discourse/components/topic-map/topic-participants
 import TopicViews from "discourse/components/topic-map/topic-views";
 import TopicViewsChart from "discourse/components/topic-map/topic-views-chart";
 import avatar from "discourse/helpers/bound-avatar-template";
+import concatClass from "discourse/helpers/concat-class";
 import number from "discourse/helpers/number";
 import { ajax } from "discourse/lib/ajax";
 import { emojiUnescape } from "discourse/lib/text";
@@ -98,6 +99,12 @@ export default class TopicMapSummary extends Component {
     );
   }
 
+  get manyStats() {
+    return [this.hasViews, this.hasLikes, this.hasUsers, this.hasLinks].every(
+      Boolean
+    );
+  }
+
   get shouldShowViewsChart() {
     return this.views.stats.length > 2;
   }
@@ -234,7 +241,13 @@ export default class TopicMapSummary extends Component {
   }
 
   <template>
-    <div class="topic-map__stats {{if this.loneStat '--single-stat'}}">
+    <div
+      class={{concatClass
+        "topic-map__stats"
+        (if this.loneStat "--single-stat")
+        (if this.manyStats "--many-stats")
+      }}
+    >
       <DMenu
         @arrow={{true}}
         @identifier="topic-map__views"
@@ -419,8 +432,8 @@ export default class TopicMapSummary extends Component {
             </span>
           </div>
         {{/if}}
-        <div class="summarization-buttons">
-          {{#if @topic.has_summary}}
+        {{#if @topic.has_summary}}
+          <div class="summarization-button">
             <DButton
               @action={{if
                 @postStream.summary
@@ -432,8 +445,8 @@ export default class TopicMapSummary extends Component {
               @icon={{this.topRepliesIcon}}
               class="top-replies"
             />
-          {{/if}}
-        </div>
+          </div>
+        {{/if}}
       </div>
     </div>
   </template>

app/assets/javascripts/discourse/tests/integration/components/widgets/post-test.js

@@ -862,7 +862,7 @@ module("Integration | Component | Widget | post", function (hooks) {
 
     await render(hbs`<MountWidget @widget="post" @args={{this.args}} />`);
 
-    assert.dom(".summarization-buttons .top-replies").doesNotExist();
+    assert.dom(".summarization-button .top-replies").doesNotExist();
   });
 
   test("topic map - has top replies summary", async function (assert) {
@@ -872,7 +872,7 @@ module("Integration | Component | Widget | post", function (hooks) {
 
     await render(hbs`<MountWidget @widget="post" @args={{this.args}} />`);
 
-    assert.dom(".summarization-buttons .top-replies").exists({ count: 1 });
+    assert.dom(".summarization-button .top-replies").exists({ count: 1 });
   });
 
   test("pm map", async function (assert) {

app/assets/stylesheets/common/components/topic-map.scss

@@ -1,21 +1,17 @@
-article {
+.topic-map.--op {
   // topic map under OP
-  .topic-map {
-    border-top: 1px solid var(--primary-low);
-    border-bottom: none;
-  }
+  border-top: 1px solid var(--primary-low);
+  border-bottom: none;
 }
 
-.container.posts {
+.topic-map.--bottom {
   // topic map at bottom of topic
-  > .topic-map {
-    grid-area: posts;
-    grid-row: 2;
-    max-width: calc(
-      var(--topic-avatar-width) + var(--topic-body-width) +
-        (var(--topic-body-width-padding) * 2)
-    );
-  }
+  grid-area: posts;
+  grid-row: 2;
+  max-width: calc(
+    var(--topic-avatar-width) + var(--topic-body-width) +
+      (var(--topic-body-width-padding) * 2)
+  );
 }
 
 .topic-map {
@@ -34,6 +30,23 @@ article {
     font-size: var(--font-down-1);
   }
 
+  @media screen and (max-width: 500px) {
+    padding-left: 0;
+  }
+
+  padding-left: calc(
+    var(--topic-body-width-padding) + var(--topic-avatar-width)
+  );
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  &:has(.topic-map__additional-contents *) {
+    column-gap: 0.75em;
+  }
+
   .--users-summary {
     display: flex;
     flex-wrap: wrap;
@@ -43,6 +56,8 @@ article {
     align-self: center;
     flex: 1 2 0;
     gap: 0.25em;
+    min-width: 2em;
+    width: 0;
 
     .avatar {
       width: 2em;
@@ -102,12 +117,8 @@ article {
   }
 
   &__contents {
-    padding: 0.5em 0 0.5em
-      calc(var(--topic-body-width-padding) + var(--topic-avatar-width));
-
-    @media screen and (max-width: 500px) {
-      padding: 0.5em 0;
-    }
+    padding-block: 0.5em;
+    flex-grow: 1;
 
     .number {
       font-size: var(--font-up-1);
@@ -156,16 +167,6 @@ article {
     }
   }
 
-  &__additional-contents {
-    padding-left: calc(
-      var(--topic-body-width-padding) + var(--topic-avatar-width)
-    );
-
-    @media screen and (max-width: 500px) {
-      padding-left: 0;
-    }
-  }
-
   .controls {
     display: flex;
     align-items: center;

config/locales/client.en.yml

@@ -2221,8 +2221,8 @@ en:
         other: "There are <b>%{count}</b> replies."
       buttons:
         hide: "Hide summary"
-        generate: "Summarize with AI"
-        regenerate: "Regenerate summary"
+        generate: "Summarize"
+        regenerate: "Regenerate"
 
       # This string uses the ICU Message Format. See https://meta.discourse.org/t/7035 for translation guidelines.
       description_time_MF: |