From ad939dc4e0dc9f6363196719079bb51198496713 Mon Sep 17 00:00:00 2001
From: Martin Brennan <martin@discourse.org>
Date: Fri, 4 Oct 2024 14:13:12 +1000
Subject: [PATCH] FEATURE: Activity indicators for cards

This commit adds a show_activity_indicators setting,
if set to true then a CSS class will be applied to
cards where the bumped_at date is:

* > 7 days
* > 20 days

This will style cards which will make it easier to
scan the board and see which cards may be languishing.
---
 common/common.scss                              |  8 ++++++++
 .../discourse/components/kanban/card.gjs        | 17 +++++++++++++++++
 settings.yml                                    |  4 ++++
 3 files changed, 29 insertions(+)

diff --git a/common/common.scss b/common/common.scss
index d5dc89a..0fa116d 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -119,6 +119,14 @@ html:has(body.kanban-active) {
         background-color: var(--tertiary-low);
       }
 
+      &.card-no-recent-activity {
+        background-color: var(--highlight-bg);
+      }
+
+      &.card-stale {
+        background-color: var(--quaternary-low);
+      }
+
       .card-row {
         display: flex;
         align-items: baseline;
diff --git a/javascripts/discourse/components/kanban/card.gjs b/javascripts/discourse/components/kanban/card.gjs
index 3b80c13..7ad8ffe 100644
--- a/javascripts/discourse/components/kanban/card.gjs
+++ b/javascripts/discourse/components/kanban/card.gjs
@@ -74,12 +74,29 @@ export default class KanbanCard extends Component {
       poster.extras?.includes("latest")
     );
   }
+
+  get cardActivityCssClass() {
+    if (!settings.show_activity_indicators) {
+      return "";
+    }
+
+    const bumpedAt = moment(this.args.topic.bumpedAt);
+    if (bumpedAt < moment().add(-20, "days")) {
+      return "card-stale";
+    }
+    if (bumpedAt < moment().add(-7, "days")) {
+      return "card-no-recent-activity";
+    }
+    return "";
+  }
+
   <template>
     <a
       class={{concatClass
         "topic-card"
         (if this.topic.unseen "topic-unseen")
         (if this.dragging "dragging")
+        this.cardActivityCssClass
       }}
       draggable="true"
       href={{@topic.lastUnreadUrl}}
diff --git a/settings.yml b/settings.yml
index 8085f4b..9f101c5 100644
--- a/settings.yml
+++ b/settings.yml
@@ -31,3 +31,7 @@ show_topic_thumbnail:
   default: false
   description:
     en: Display the topic thumbnail at the bottom of the card
+show_activity_indicators:
+  default: false
+  description:
+    en: Display an indicator of a card's activity. If the topic has been bumped more than 7 days agoor more than 20 days ago a different CSS class will be applied.