DEV: Refactor basic-topic-list to use topic-list-item on mobile (#10105)

Previously, basic-topic-list had its own implementation of topic-list-item on mobile, which made it more difficult to maintain and extend. The visible difference was that the basic-topic-list implementation had no large avatar on the left. This commit adds a new hideMobileAvatar parameter to topic-list-item and topic-list, and sets it to `true` for the basic-topic-list component.

app/assets/javascripts/discourse/app/components/basic-topic-list.js

@@ -6,6 +6,8 @@ export default Component.extend({
   loadingMore: alias("topicList.loadingMore"),
   loading: not("loaded"),
 
+  hideMobileAvatar: true,
+
   @discourseComputed("topicList.loaded")
   loaded() {
     var topicList = this.topicList;

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

@@ -187,6 +187,11 @@ export default Component.extend({
     return false;
   },
 
+  @discourseComputed("expandPinned", "hideMobileAvatar")
+  showMobileAvatar(expandPinned, hideMobileAvatar) {
+    return !(hideMobileAvatar || expandPinned);
+  },
+
   showEntrance,
 
   click(e) {

app/assets/javascripts/discourse/app/templates/components/basic-topic-list.hbs

@@ -10,13 +10,13 @@
   {{#if topics}}
     {{topic-list
       showPosters=showPosters
+      hideMobileAvatar=hideMobileAvatar
       hideCategory=hideCategory
       topics=topics
       expandExcerpts=expandExcerpts
       bulkSelectEnabled=bulkSelectEnabled
       canBulkSelect=canBulkSelect
       selected=selected
-      skipHeader=skipHeader
       tagsForUser=tagsForUser
       onScroll=onScroll
       scrollOnLoad=scrollOnLoad

app/assets/javascripts/discourse/app/templates/components/topic-list.hbs

@@ -34,6 +34,7 @@
                       showTopicPostBadges=showTopicPostBadges
                       hideCategory=hideCategory
                       showPosters=showPosters
+                      hideMobileAvatar=hideMobileAvatar
                       showLikes=showLikes
                       showOpLikes=showOpLikes
                       expandGloballyPinned=expandGloballyPinned

app/assets/javascripts/discourse/app/templates/mobile/components/basic-topic-list.hbs

@@ -1,70 +0,0 @@
-{{#conditional-loading-spinner condition=loading}}
-  {{#if hasIncoming}}
-    <div class="show-mores">
-      <a href {{action showInserted}} class="alert alert-info clickable">
-        {{count-i18n key="topic_count_" suffix="latest" count=incomingCount}}
-      </a>
-    </div>
-  {{/if}}
-
-  {{#if topics}}
-    <table class="topic-list">
-      <tbody>
-        {{#each topics as |t|}}
-          <tr class="topic-list-item {{if t.archived "archived"}} {{if t.visited "visited"}}" data-topic-id={{t.id}}>
-            <td>
-              <div class="main-link">
-                {{topic-status topic=t}}
-                {{topic-link t}}
-                {{raw "list/unread-indicator"
-                  includeUnreadIndicator=showUnreadIndicator
-                  topicId=t.id
-                  unreadClass=(if t.unread_by_group_member "" "read")
-                }}
-                {{#if t.unseen}}
-                  <span class="badge-notification new-topic"></span>
-                {{/if}}
-                {{#if t.hasExcerpt}}
-                  <div class="topic-excerpt">
-                    {{html-safe t.excerpt}}
-                    {{#if t.excerptTruncated}}
-                      {{#unless t.canClearPin}}
-                        <a href={{t.url}}>{{i18n "read_more"}}</a>
-                      {{/unless}}
-                    {{/if}}
-                    {{#if t.canClearPin}}
-                      <a href {{action "clearPin" t}} title={{i18n "topic.clear_pin.help"}}>
-                        {{i18n "topic.clear_pin.title"}}
-                      </a>
-                    {{/if}}
-                  </div>
-                {{/if}}
-              </div>
-              <div class="pull-right">
-                {{raw "list/post-count-or-badges" topic=t postBadgesEnabled="true"}}
-              </div>
-              <div class="clearfix"></div>
-              <div class="topic-item-stats clearfix">
-                {{discourse-tags t mode="list" tagsForUser=tagsForUser}}
-                <div class="pull-right">
-                  {{raw "list/activity-column" topic=t tagName="div" class="num activity last"}}
-                  <a href={{t.lastPostUrl}} title="{{i18n "last_post"}}: {{raw-date t.bumped_at}}">{{t.last_poster_username}}</a>
-                </div>
-                {{#unless hideCategory}}
-                  <div class="category">
-                    {{category-link t.category}}
-                  </div>
-                {{/unless}}
-                <div class="clearfix"></div>
-              </div>
-            </td>
-          </tr>
-        {{/each}}
-      </tbody>
-    </table>
-  {{else}}
-    <div class="alert alert-info">
-      {{i18n "choose_topic.none_found"}}
-    </div>
-  {{/if}}
-{{/conditional-loading-spinner}}

app/assets/javascripts/discourse/app/templates/mobile/list/topic-list-item.hbr

@@ -1,13 +1,13 @@
 <td>
   {{~raw-plugin-outlet name="topic-list-before-columns"}}
-  {{~#unless expandPinned}}
+  {{~#if showMobileAvatar}}
   <div class='pull-left'>
     <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="large"}}</a>
   </div>
   <div class='right'>
     {{else}}
       <div>
-        {{/unless~}}
+        {{/if~}}
         {{!--
           The `~` syntax strip spaces between the elements, making it produce
           `<a class=topic-post-badges>Some text</a><span class=topic-post-badges>`,