FEATURE: Add plugin outlets to parent category row for desktop (#30002)

* FEATURE: Add plugin outlets to parent category row

Added 3 plugin outlets:

- `category-list-above-category-section` (above `td.category`)
- `category-list-above-topics-section` (above `td.topics`)
- `category-list-below-topics-section` (below `td.topics`)

* DEV: Add value transformer for changing classes in parent category row.

renamed connectors and added connector for mobile view

* DEV: order transformers by name

app/assets/javascripts/discourse/app/components/category-list-item.js

@@ -1,5 +1,6 @@
 import Component from "@ember/component";
 import { tagName } from "@ember-decorators/component";
+import { applyValueTransformer } from "discourse/lib/transformer";
 import discourseComputed from "discourse-common/utils/decorators";
 
 const LIST_TYPE = {
@@ -40,4 +41,8 @@ export default class CategoryListItem extends Component {
   slugPath(categoryPath) {
     return categoryPath.substring("/c/".length);
   }
+
+  applyValueTransformer(name, value, context) {
+    return applyValueTransformer(name, value, context);
+  }
 }

app/assets/javascripts/discourse/app/components/parent-category-row.hbs

@@ -5,6 +5,14 @@
   />
 
   {{#if this.site.mobileView}}
+    <PluginOutlet
+      @name="category-list-before-category-mobile"
+      @outletArgs={{hash
+        category=this.category
+        listType=this.listType
+        isMuted=this.isMuted
+      }}
+    />
     <div
       data-category-id={{this.category.id}}
       data-notification-level={{this.category.notificationLevelString}}
@@ -80,8 +88,19 @@
           'has-description'
           'no-description'
         }}
+        {{this.applyValueTransformer
+          'parent-category-row-class'
+          (array)
+          (hash category=this.category)
+        }}
         {{if this.category.uploaded_logo.url 'has-logo' 'no-logo'}}"
     >
+
+      <PluginOutlet
+        @name="category-list-before-category-section"
+        @outletArgs={{hash category=this.category listType=this.listType}}
+      />
+
       <td
         class="category {{if this.isMuted 'muted'}}"
         style={{category-color-variable this.category.color}}
@@ -141,6 +160,11 @@
         {{/if}}
       </td>
 
+      <PluginOutlet
+        @name="category-list-before-topics-section"
+        @outletArgs={{hash category=this.category}}
+      />
+
       <td class="topics">
         <div title={{this.category.statTitle}}>{{html-safe
             this.category.stat
@@ -154,6 +178,11 @@
         />
       </td>
 
+      <PluginOutlet
+        @name="category-list-after-topics-section"
+        @outletArgs={{hash category=this.category}}
+      />
+
       {{#unless this.isMuted}}
         {{#if this.showTopics}}
           <td class="latest">
@@ -165,6 +194,10 @@
               {{/if}}
             {{/each}}
           </td>
+          <PluginOutlet
+            @name="category-list-after-latest-section"
+            @outletArgs={{hash category=this.category}}
+          />
         {{/if}}
       {{/unless}}
     </tr>

app/assets/javascripts/discourse/app/lib/transformer/registry.js

@@ -13,6 +13,8 @@ export const VALUE_TRANSFORMERS = Object.freeze([
   "invite-simple-mode-topic",
   "mentions-class",
   "more-topics-tabs",
+  "parent-category-row-class-mobile",
+  "parent-category-row-class",
   "post-menu-buttons",
   "small-user-attrs",
   "topic-list-columns",