From b3c36ce64867a6a0486dee8232c73997e1f3ece0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=94=A6=E5=BF=83?=
 <41134017+Lhcfl@users.noreply.github.com>
Date: Fri, 5 Jul 2024 16:14:43 +0800
Subject: [PATCH] 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                               |  9 +++++++++
 javascripts/discourse/components/kanban/card.gjs | 14 ++++++++++++++
 settings.yml                                     |  4 ++++
 3 files changed, 27 insertions(+)

diff --git a/common/common.scss b/common/common.scss
index 4f3684e..d5dc89a 100644
--- a/common/common.scss
+++ b/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;
diff --git a/javascripts/discourse/components/kanban/card.gjs b/javascripts/discourse/components/kanban/card.gjs
index d19c1de..3b80c13 100644
--- a/javascripts/discourse/components/kanban/card.gjs
+++ b/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}}
diff --git a/settings.yml b/settings.yml
index f18c400..8085f4b 100644
--- a/settings.yml
+++ b/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