Add icons for Views and Replies, and Last Activity date

common/common.scss

@@ -151,6 +151,29 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
+        .number,
+        .d-icon,
+        .activity a {
+          font-weight: bold;
+          font-size: var(--font-down-1-rem);
+        }
+        .right-aligned {
+          margin-left: auto;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .item {
+            flex-grow: 0;
+            flex-shrink: 1;
+            margin-left: 20px; /* Adjust as necessary for spacing */
+            &.topic-card__likes:first-child:last-child {
+              color: var(--love);
+              .d-icon {
+                color: var(--love);
+              }
+            }
+          }
+        }
       }
       &__publish-date {
         font-size: var(--font-down-1-rem);
@@ -169,20 +192,15 @@
         -webkit-box-orient: vertical;
         max-height: 3.3em;
       }
-      &__likes {
-        display: flex;
-        align-items: center;
-        gap: 0.25em;
-        &-number {
-          color: var(--love);
-          font-weight: bold;
-          font-size: var(--font-down-1-rem);
-        }
-
-        .d-icon {
-          color: var(--love);
-        }
-      }
     }
   }
 }
+
+// remove fixed with and heat color from activity column
+.topic-list .age,
+.topic-list .activity {
+  width: inherit;
+  a {
+    color: inherit;
+  }
+}

javascripts/discourse/templates/topic-metadata.hbr

@@ -1,11 +1,41 @@
 <div class="topic-card__metadata">
-  <span class="topic-card__publish-date">
-    {{theme-i18n "published"}}
-    {{format-date view.topic.createdAt format="medium-with-ago"}}
-  </span>
-
-  <span class="topic-card__likes">
-    <span class="topic-card__likes-number">{{view.topic.like_count}}</span>
-    {{d-icon "heart"}}
-  </span>
+  {{#if (theme-setting 'show_publish_date')}}
+    <span class="topic-card__publish-date">
+      {{theme-i18n "published"}}
+      {{format-date view.topic.createdAt format="medium-with-ago"}}
+    </span>
+  {{/if}}
+
+  <div class="right-aligned">
+    {{#if (theme-setting 'show_views')}}
+      <span class="topic-card__views item">
+        {{d-icon "eye"}}
+        <span class="number">
+          {{view.topic.views}}
+        </span>
+      </span>
+    {{/if}}
+
+    {{#if (theme-setting 'show_likes')}}
+      <span class="topic-card__likes item">
+        {{d-icon "heart"}}
+        <span class="number">
+          {{view.topic.like_count}}
+        </span>
+      </span>
+    {{/if}}
+
+    {{#if (theme-setting 'show_reply_count')}}
+      <span class="topic-card__reply_count item">
+        {{d-icon "comment"}}
+        <span class="number">
+          {{view.topic.replyCount}}
+        </span>
+      </span>
+    {{/if}}
+
+    {{#if (theme-setting 'show_activity')}}
+      {{raw "list/activity-column" topic=view.topic class="topic-card-data-activity item" tagName="div"}}
+    {{/if}}
+  </div>
 </div>

settings.yml

@@ -1,8 +1,27 @@
+show_likes:
+  type: bool
+  default: true
+  description: Show likes on topic card
+show_views:
+  type: bool
+  default: false
+  description: Show views on topic card
+show_reply_count:
+  type: bool
+  default: false
+  description: Show reply count on topic card
+show_activity:
+  type: bool
+  default: false
+  description: Show activity on topic card
+show_publish_date:
+  type: bool
+  default: true
+  description: Show publish date on topic card
 set_card_max_height:
   type: bool
   default: true
   description: "Set max height for the topic cards. If unset, the cards will grow to the height of the image rendering."
-
 card_max_height:
   type: integer
   default: 275