UX: Optionally show a "Summarize" button in topic timeline (#13533)

app/assets/javascripts/discourse/app/templates/topic.hbs

@@ -148,6 +148,7 @@
             jumpToPostPrompt=(action "jumpToPostPrompt")
             jumpToIndex=(action "jumpToIndex")
             replyToPost=(action "replyToPost")
+            showSummary=(action "showSummary")
             toggleMultiSelect=(action "toggleMultiSelect")
             showTopicSlowModeUpdate=(route-action "showTopicSlowModeUpdate")
             deleteTopic=(action "deleteTopic")

app/assets/javascripts/discourse/app/widgets/toggle-topic-summary.js

@@ -38,6 +38,8 @@ export default createWidget("toggle-topic-summary", {
       this.attach("toggle-summary-description", attrs),
       this.attach("button", {
         className: "btn btn-primary",
+        icon: attrs.topicSummaryEnabled ? null : "layer-group",
+        title: attrs.topicSummaryEnabled ? null : "summary.short_title",
         label: attrs.topicSummaryEnabled ? "summary.disable" : "summary.enable",
         action: attrs.topicSummaryEnabled ? "cancelFilter" : "showSummary",
       }),

app/assets/javascripts/discourse/app/widgets/topic-timeline.js

@@ -351,6 +351,23 @@ createWidget("timeline-footer-controls", {
     const controls = [];
     const { currentUser, fullScreen, topic, notificationLevel } = attrs;
 
+    if (
+      this.siteSettings.summary_timeline_button &&
+      !fullScreen &&
+      topic.has_summary &&
+      !topic.postStream.summary
+    ) {
+      controls.push(
+        this.attach("button", {
+          className: "show-summary btn-small",
+          icon: "layer-group",
+          label: "summary.short_label",
+          title: "summary.short_title",
+          action: "showSummary",
+        })
+      );
+    }
+
     if (currentUser && !fullScreen) {
       if (topic.get("details.can_create_post")) {
         controls.push(

app/assets/stylesheets/common/topic-timeline.scss

@@ -186,6 +186,8 @@
       margin-top: 1.5em;
       transition: opacity 0.2s ease-in;
       display: flex;
+      flex-wrap: wrap;
+      max-width: 9em;
 
       .reply-to-post {
         margin-right: 0.5em;
@@ -195,6 +197,9 @@
         margin-right: 0;
       }
     }
+    .show-summary {
+      margin-bottom: 0.5em;
+    }
 
     .start-date {
       @include unselectable;

config/locales/client.en.yml

@@ -1820,6 +1820,8 @@ en:
       description_time_MF: "There {replyCount, plural, one {is <b>#</b> reply} other {are <b>#</b> replies}} with an estimated read time of <b>{readingTime, plural, one {# minute} other {# minutes}}</b>."
       enable: "Summarize This Topic"
       disable: "Show All Posts"
+      short_label: "Summarize"
+      short_title: "Show a summary of this topic: the most interesting posts as determined by the community"
 
     deleted_filter:
       enabled_description: "This topic contains deleted posts, which have been hidden."

config/locales/server.en.yml

@@ -1536,11 +1536,13 @@ en:
     enforce_second_factor: "Forces users to enable two-factor authentication. Select 'all' to enforce it to all users. Select 'staff' to enforce it to staff users only."
     force_https: "Force your site to use HTTPS only. WARNING: do NOT enable this until you verify HTTPS is fully set up and working absolutely everywhere! Did you check your CDN, all social logins, and any external logos / dependencies to make sure they are all HTTPS compatible, too?"
     same_site_cookies: "Use same site cookies, they eliminate all Cross Site Request Forgery vectors on supported browsers (Lax or Strict). Warning: Strict will only work on sites that force login and use an external auth method."
+
     summary_score_threshold: "The minimum score required for a post to be included in 'Summarize This Topic'"
     summary_posts_required: "Minimum posts in a topic before 'Summarize This Topic' is enabled. Changes to this setting will be applied retroactively within a week."
     summary_likes_required: "Minimum likes in a topic before 'Summarize This Topic' is enabled. Changes to this setting will be applied retroactively within a week."
     summary_percent_filter: "When a user clicks 'Summarize This Topic', show the top % of posts"
     summary_max_results: "Maximum posts returned by 'Summarize This Topic'"
+    summary_timeline_button: "Show a 'Summarize' button in the timeline"
 
     enable_personal_messages: "Allow trust level 1 (configurable via min trust level to send messages) users to create messages and reply to messages. Note that staff can always send messages no matter what."
     enable_system_message_replies: "Allows users to reply to system messages, even if personal messages are disabled"

config/site_settings.yml

@@ -2103,6 +2103,9 @@ uncategorized:
   summary_likes_required: 1
   summary_percent_filter: 20
   summary_max_results: 100
+  summary_timeline_button:
+    client: true
+    default: false
 
   automatic_topic_heat_values: true
 

lib/svg_sprite/svg_sprite.rb

@@ -141,6 +141,7 @@ module SvgSprite
     "info-circle",
     "italic",
     "key",
+    "layer-group",
     "link",
     "list",
     "list-ol",