DEV: Update transformers in topic-list/item (#30105)

These will enable https://github.com/discourse/discourse-topic-thumbnails/pull/60

app/assets/javascripts/discourse/app/components/topic-list/item.gjs

@@ -185,6 +185,14 @@ export default class Item extends Component {
     }
   }
 
+  get useMobileLayout() {
+    return applyValueTransformer(
+      "topic-list-item-mobile-layout",
+      this.site.mobileView,
+      { topic: this.args.topic }
+    );
+  }
+
   <template>
     <tr
       {{! template-lint-disable no-invalid-interactive }}
@@ -210,7 +218,7 @@ export default class Item extends Component {
         (if @topic.closed "closed")
         this.tagClassNames
         (applyValueTransformer
-          "topic-list-item-class" (array) (hash topic=@topic)
+          "topic-list-item-class" (array) (hash topic=@topic index=@index)
         )
       }}
     >
@@ -218,20 +226,7 @@ export default class Item extends Component {
         @name="above-topic-list-item"
         @outletArgs={{hash topic=@topic}}
       />
-      {{#if this.site.desktopView}}
+      {{#if this.useMobileLayout}}
-        {{#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}}
-      {{else}}
         <td class="topic-list-data">
           <div class="pull-left">
             {{#if @bulkSelectEnabled}}
@@ -337,6 +332,19 @@ export default class Item extends Component {
             </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}}
     </tr>
   </template>

app/assets/javascripts/discourse/app/components/topic-list/list.gjs

@@ -1,6 +1,6 @@
 import Component from "@glimmer/component";
 import { cached } from "@glimmer/tracking";
-import { hash } from "@ember/helper";
+import { array, hash } from "@ember/helper";
 import { service } from "@ember/service";
 import { eq, or } from "truth-helpers";
 import PluginOutlet from "discourse/components/plugin-outlet";
@@ -172,6 +172,7 @@ export default class TopicList extends Component {
       class={{concatClass
         "topic-list"
         (if this.bulkSelectEnabled "sticky-header")
+        (applyValueTransformer "topic-list-class" (array) (hash topics=@topics))
       }}
     >
       <caption class="sr-only">{{i18n "sr_topic_list_caption"}}</caption>

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

@@ -21,5 +21,7 @@ export const VALUE_TRANSFORMERS = Object.freeze([
   "small-user-attrs",
   "topic-list-columns",
   "topic-list-header-sortable-column",
+  "topic-list-class",
   "topic-list-item-class",
+  "topic-list-item-mobile-layout",
 ]);