FEATURE: Allows display topic thumbnails in kanban cards (#55)

* FEATURE: Allows display topic thumbnails in kanban cards

This commit adds an optional setting to allow showing topic thumbnails on board cards.

common/common.scss

@@ -138,6 +138,10 @@ html:has(body.kanban-active) {
           }
         }
 
+        &__thumbnail-row {
+          margin-top: 5px;
+        }
+
         .last-post-by,
         .topic-title {
           flex-grow: 1;
@@ -162,6 +166,11 @@ html:has(body.kanban-active) {
           }
         }
 
+        .thumbnail {
+          overflow: hidden;
+          width: 100%;
+        }
+
         .last-post-by {
           text-align: left;
           font-size: $font-down-2;

javascripts/discourse/components/kanban/card.gjs

@@ -51,6 +51,14 @@ export default class KanbanCard extends Component {
       .map((t) => renderTag(t));
   }
 
+  get showImage() {
+    return settings.show_topic_thumbnail && this.imageUrl;
+  }
+
+  get imageUrl() {
+    return this.args.topic.image_url;
+  }
+
   get showCategory() {
     const definitionCategory = this.args.definition.params.category;
     const discoveryCategory = this.kanbanManager.discoveryCategory;
@@ -176,6 +184,12 @@ export default class KanbanCard extends Component {
         </div>
       {{/if}}
 
+      {{#if this.showImage}}
+        <div class="card-row card-row__thumbnail-row">
+          <img class="thumbnail" src={{this.imageUrl}} />
+        </div>
+      {{/if}}
+
       <PluginOutlet
         @name="kanban-card-bottom"
         @outletArgs={{hash topic=@topic}}

settings.yml

@@ -27,3 +27,7 @@ card_style:
   choices:
     - simple
     - detailed
+show_topic_thumbnail:
+  default: false
+  description:
+    en: Display the topic thumbnail at the bottom of the card