From 34acc9fe54eace2274834c67c2c1c03c726bbc90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Saquetim?=
 <1108771+megothss@users.noreply.github.com>
Date: Wed, 15 Jan 2025 13:38:06 -0300
Subject: [PATCH] DEV: Add outlets around the topic item and latest topic item
 poster (#30776)

---
 .../app/components/topic-list/item.gjs        | 255 ++++++++++--------
 .../topic-list/latest-topic-list-item.gjs     |  17 +-
 2 files changed, 147 insertions(+), 125 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/topic-list/item.gjs b/app/assets/javascripts/discourse/app/components/topic-list/item.gjs
index d4982cfd4c6..0769f3c11a8 100644
--- a/app/assets/javascripts/discourse/app/components/topic-list/item.gjs
+++ b/app/assets/javascripts/discourse/app/components/topic-list/item.gjs
@@ -220,131 +220,148 @@ export default class Item extends Component {
         @name="above-topic-list-item"
         @outletArgs={{hash topic=@topic}}
       />
-      {{#if this.useMobileLayout}}
-        <td class="topic-list-data">
-          <div class="pull-left">
-            {{#if @bulkSelectEnabled}}
-              <label for="bulk-select-{{@topic.id}}">
-                <input
-                  {{on "click" this.onBulkSelectToggle}}
-                  checked={{this.isSelected}}
-                  type="checkbox"
-                  id="bulk-select-{{@topic.id}}"
-                  class="bulk-select"
-                />
-              </label>
-            {{else}}
-              <PluginOutlet
-                @name="topic-list-item-mobile-avatar"
-                @outletArgs={{hash topic=@topic}}
-              >
-                <a
-                  href={{@topic.lastPostUrl}}
-                  aria-label={{i18n
-                    "latest_poster_link"
-                    username=@topic.lastPosterUser.username
-                  }}
-                  data-user-card={{@topic.lastPosterUser.username}}
-                >{{avatar @topic.lastPosterUser imageSize="large"}}</a>
-              </PluginOutlet>
-            {{/if}}
-          </div>
-
-          <div class="topic-item-metadata right">
-            {{~! no whitespace ~}}
-            <PluginOutlet
-              @name="topic-list-before-link"
-              @outletArgs={{hash topic=@topic}}
-            />
-
-            <div class="main-link">
-              {{~! no whitespace ~}}
-              <PluginOutlet
-                @name="topic-list-before-status"
-                @outletArgs={{hash topic=@topic}}
-              />
-              {{~! no whitespace ~}}
-              <TopicStatus @topic={{@topic}} />
-              {{~! no whitespace ~}}
-              <TopicLink
-                {{on "focus" this.onTitleFocus}}
-                {{on "blur" this.onTitleBlur}}
-                @topic={{@topic}}
-                class="raw-link raw-topic-link"
-              />
-              {{~#if @topic.featured_link~}}
-                &nbsp;
-                {{~topicFeaturedLink @topic}}
-              {{~/if~}}
-              <PluginOutlet
-                @name="topic-list-after-title"
-                @outletArgs={{hash topic=@topic}}
-              />
-              {{~#if @topic.unseen~}}
-                <span class="topic-post-badges">&nbsp;<span
-                    class="badge-notification new-topic"
-                  ></span></span>
-              {{~/if~}}
-              {{~#if this.expandPinned~}}
-                <TopicExcerpt @topic={{@topic}} />
-              {{~/if~}}
-              <PluginOutlet
-                @name="topic-list-main-link-bottom"
-                @outletArgs={{hash topic=@topic}}
-              />
-            </div>
-            {{~! no whitespace ~}}
-            <PluginOutlet
-              @name="topic-list-after-main-link"
-              @outletArgs={{hash topic=@topic}}
-            />
-
-            <div class="pull-right">
-              <PostCountOrBadges
-                @topic={{@topic}}
-                @postBadgesEnabled={{@showTopicPostBadges}}
-              />
-            </div>
-
-            <div class="topic-item-stats clearfix">
-              <span class="topic-item-stats__category-tags">
-                {{#unless @hideCategory}}
-                  <PluginOutlet
-                    @name="topic-list-before-category"
-                    @outletArgs={{hash topic=@topic}}
+      {{! Do not include @columns as argument to the wrapper outlet below ~}}
+      {{! We don't want it to be able to override core behavior just copy/pasting the code ~}}
+      <PluginOutlet
+        @name="topic-list-item"
+        @outletArgs={{hash
+          topic=@topic
+          bulkSelectEnabled=@bulkSelectEnabled
+          onBulkSelectToggle=this.onBulkSelectToggle
+          isSelected=this.isSelected
+        }}
+      >
+        {{#if this.useMobileLayout}}
+          <td
+            class={{concatClass
+              "topic-list-data"
+              (if @bulkSelectEnabled "bulk-select-enabled")
+            }}
+          >
+            <div class="pull-left">
+              {{#if @bulkSelectEnabled}}
+                <label for="bulk-select-{{@topic.id}}">
+                  <input
+                    {{on "click" this.onBulkSelectToggle}}
+                    checked={{this.isSelected}}
+                    type="checkbox"
+                    id="bulk-select-{{@topic.id}}"
+                    class="bulk-select"
                   />
-                  {{categoryLink @topic.category}}
-                {{/unless}}
+                </label>
+              {{else}}
+                <PluginOutlet
+                  @name="topic-list-item-mobile-avatar"
+                  @outletArgs={{hash topic=@topic}}
+                >
+                  <a
+                    href={{@topic.lastPostUrl}}
+                    aria-label={{i18n
+                      "latest_poster_link"
+                      username=@topic.lastPosterUser.username
+                    }}
+                    data-user-card={{@topic.lastPosterUser.username}}
+                  >{{avatar @topic.lastPosterUser imageSize="large"}}</a>
+                </PluginOutlet>
+              {{/if}}
+            </div>
 
-                {{discourseTags @topic mode="list"}}
-              </span>
+            <div class="topic-item-metadata right">
+              {{~! no whitespace ~}}
+              <PluginOutlet
+                @name="topic-list-before-link"
+                @outletArgs={{hash topic=@topic}}
+              />
 
-              <div class="num activity last">
-                <span title={{@topic.bumpedAtTitle}} class="age activity">
-                  <a href={{@topic.lastPostUrl}}>{{formatDate
-                      @topic.bumpedAt
-                      format="tiny"
-                      noTitle="true"
-                    }}</a>
+              <div class="main-link">
+                {{~! no whitespace ~}}
+                <PluginOutlet
+                  @name="topic-list-before-status"
+                  @outletArgs={{hash topic=@topic}}
+                />
+                {{~! no whitespace ~}}
+                <TopicStatus @topic={{@topic}} />
+                {{~! no whitespace ~}}
+                <TopicLink
+                  {{on "focus" this.onTitleFocus}}
+                  {{on "blur" this.onTitleBlur}}
+                  @topic={{@topic}}
+                  class="raw-link raw-topic-link"
+                />
+                {{~#if @topic.featured_link~}}
+                  &nbsp;
+                  {{~topicFeaturedLink @topic}}
+                {{~/if~}}
+                <PluginOutlet
+                  @name="topic-list-after-title"
+                  @outletArgs={{hash topic=@topic}}
+                />
+                {{~#if @topic.unseen~}}
+                  <span class="topic-post-badges">&nbsp;<span
+                      class="badge-notification new-topic"
+                    ></span></span>
+                {{~/if~}}
+                {{~#if this.expandPinned~}}
+                  <TopicExcerpt @topic={{@topic}} />
+                {{~/if~}}
+                <PluginOutlet
+                  @name="topic-list-main-link-bottom"
+                  @outletArgs={{hash topic=@topic}}
+                />
+              </div>
+              {{~! no whitespace ~}}
+              <PluginOutlet
+                @name="topic-list-after-main-link"
+                @outletArgs={{hash topic=@topic}}
+              />
+
+              <div class="pull-right">
+                <PostCountOrBadges
+                  @topic={{@topic}}
+                  @postBadgesEnabled={{@showTopicPostBadges}}
+                />
+              </div>
+
+              <div class="topic-item-stats clearfix">
+                <span class="topic-item-stats__category-tags">
+                  {{#unless @hideCategory}}
+                    <PluginOutlet
+                      @name="topic-list-before-category"
+                      @outletArgs={{hash topic=@topic}}
+                    />
+                    {{categoryLink @topic.category}}
+                  {{/unless}}
+
+                  {{discourseTags @topic mode="list"}}
                 </span>
+
+                <div class="num activity last">
+                  <span title={{@topic.bumpedAtTitle}} class="age activity">
+                    <a href={{@topic.lastPostUrl}}>{{formatDate
+                        @topic.bumpedAt
+                        format="tiny"
+                        noTitle="true"
+                      }}</a>
+                  </span>
+                </div>
               </div>
             </div>
-          </div>
-        </td>
-      {{else}}
-        {{#each @columns as |entry|}}
-          <entry.value.item
-            @topic={{@topic}}
-            @bulkSelectEnabled={{@bulkSelectEnabled}}
-            @onBulkSelectToggle={{this.onBulkSelectToggle}}
-            @isSelected={{this.isSelected}}
-            @showTopicPostBadges={{@showTopicPostBadges}}
-            @hideCategory={{@hideCategory}}
-            @tagsForUser={{@tagsForUser}}
-            @expandPinned={{this.expandPinned}}
-          />
-        {{/each}}
-      {{/if}}
+          </td>
+        {{else}}
+          {{#each @columns as |entry|}}
+            <entry.value.item
+              @topic={{@topic}}
+              @bulkSelectEnabled={{@bulkSelectEnabled}}
+              @onBulkSelectToggle={{this.onBulkSelectToggle}}
+              @isSelected={{this.isSelected}}
+              @showTopicPostBadges={{@showTopicPostBadges}}
+              @hideCategory={{@hideCategory}}
+              @tagsForUser={{@tagsForUser}}
+              @expandPinned={{this.expandPinned}}
+            />
+          {{/each}}
+        {{/if}}
+      </PluginOutlet>
     </tr>
   </template>
 }
diff --git a/app/assets/javascripts/discourse/app/components/topic-list/latest-topic-list-item.gjs b/app/assets/javascripts/discourse/app/components/topic-list/latest-topic-list-item.gjs
index 87a388c95e5..a519ae90e18 100644
--- a/app/assets/javascripts/discourse/app/components/topic-list/latest-topic-list-item.gjs
+++ b/app/assets/javascripts/discourse/app/components/topic-list/latest-topic-list-item.gjs
@@ -48,12 +48,17 @@ export default class LatestTopicListItem extends Component {
         @outletArgs={{hash topic=@topic}}
       />
 
-      <div class="topic-poster">
-        <UserLink @user={{@topic.lastPosterUser}}>
-          {{avatar @topic.lastPosterUser imageSize="large"}}
-        </UserLink>
-        <UserAvatarFlair @user={{@topic.lastPosterUser}} />
-      </div>
+      <PluginOutlet
+        @name="latest-topic-list-item-topic-poster"
+        @outletArgs={{hash topic=@topic}}
+      >
+        <div class="topic-poster">
+          <UserLink @user={{@topic.lastPosterUser}}>
+            {{avatar @topic.lastPosterUser imageSize="large"}}
+          </UserLink>
+          <UserAvatarFlair @user={{@topic.lastPosterUser}} />
+        </div>
+      </PluginOutlet>
 
       <div class="main-link">
         <div class="top-row">