DEV: Refactor to remove topic-list template overrides

common/common.scss

@@ -1120,10 +1120,10 @@ aside.quote .title {
 }
 
 .topic-list {
-  display: flex;
-  flex-direction: column;
-  list-style-type: none;
-  padding-left: 0;
+  thead {
+    display: none;
+  }
+
   .badge-notification.new-topic {
     top: -3px;
     padding-left: 0;
@@ -1152,18 +1152,10 @@ aside.quote .title {
     background: $separtor-background;
   }
   .topic-list-item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-left: 0;
     background-color: #000;
-    padding: 4px 8px;
     margin-bottom: 8px;
     border-radius: 0;
     border-bottom: 1px solid $bios;
-    .topic-list-data {
-      padding: 0;
-    }
 
     &:hover {
       background-color: rgba(33, 36, 36, 1);
@@ -1173,48 +1165,34 @@ aside.quote .title {
       animation-duration: 100ms;
     }
 
-    .main-link {
+    .num {
       display: flex;
-      flex-direction: column;
-      .link-top-line {
+      width: auto;
+      align-items: center;
+      margin-right: 8px;
+      a {
+        padding: 0;
+      }
+      .d-icon {
+        padding-right: 4px;
       }
-      .link-bottom-line {
+      &[href] {
         color: #5f6368;
-        line-height: 1;
-        .num {
-          display: flex;
-          width: auto;
-          margin-right: 8px;
-          a {
-            padding: 0;
-          }
-          .d-icon {
-            padding-right: 4px;
-          }
-          &[href] {
-            color: #5f6368;
-          }
-        }
-        .views {
-          width: auto;
-          margin-right: 8px;
-        }
-        .discourse-tag {
-          margin-right: 4px;
-        }
-        .discourse-tag.simple {
-          color: #5f6368;
-        }
-        .discourse-tag:before {
-          content: "#";
-          color: #c4c7ca;
-        }
       }
     }
-    .fill {
-      flex: 1;
+    .ghost-views {
+      width: auto;
+      margin-right: 8px;
     }
-    .secondary {
+    .discourse-tag {
+      margin-right: 4px;
+    }
+    .discourse-tag.simple {
+      color: #5f6368;
+    }
+    .discourse-tag:before {
+      content: "#";
+      color: #c4c7ca;
     }
   }
 }

desktop/desktop.scss

@@ -1,5 +1,34 @@
 @import "variables";
 
+.topic-list {
+  .topic-list-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .topic-list-data {
+    padding: 0;
+  }
+  .main-link {
+    padding: 4px 8px;
+
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+
+    .link-bottom-line {
+      color: #5f6368;
+      line-height: var(--line-height-large);
+      align-items: center;
+    }
+  }
+  .posters {
+    flex-grow: 0;
+    width: auto;
+    margin-right: 8px;
+  }
+}
+
 // admin:dashboard
 .dashboard-next {
   &.admin-contents {

javascripts/discourse/api-initializers/init-ghost.js

@@ -2,14 +2,12 @@ import $ from "jquery";
 import { apiInitializer } from "discourse/lib/api";
 
 export default apiInitializer("0.8.0", (api) => {
-  api.modifyClass("component:topic-list", {
-    pluginId: "ghost",
-    tagName: "ul",
-  });
-
-  api.modifyClass("component:topic-list-item", {
-    pluginId: "ghost",
-    tagName: "li",
+  api.registerValueTransformer("topic-list-columns", ({ value: columns }) => {
+    columns.delete("views");
+    columns.delete("likes");
+    columns.delete("activity");
+    columns.delete("replies");
+    return columns;
   });
 
   if (api.container.lookup("service:site").mobileView) {

javascripts/discourse/connectors/topic-list-after-category/ghost-additions.gjs

@@ -0,0 +1,25 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
+import icon from "discourse/helpers/d-icon";
+import formatDate from "discourse/helpers/format-date";
+import number from "discourse/helpers/number";
+
+export default class GhostAdditionsComponent extends Component {
+  @service site;
+
+  <template>
+    <div class="ghost-activity num">
+      {{formatDate @outletArgs.topic.bumpedAt format="tiny" noTitle="true"}}
+    </div>
+
+    <div class="ghost-replies num">
+      {{icon "far-comment"}}
+      {{number @outletArgs.topic.replyCount noTitle="true"}}
+    </div>
+
+    <div class="ghost-views num">
+      {{icon "far-eye"}}
+      {{number @outletArgs.topic.views numberKey="views_long"}}
+    </div>
+  </template>
+}