From 9ea586eb504a3c0e71df48db4581e9331eeaa469 Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Sun, 28 Dec 2025 14:22:28 -0800
Subject: [PATCH] feat: add filled state and click events to grain-stat-count

---
 src/components/molecules/grain-stat-count.js | 30 ++++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/molecules/grain-stat-count.js b/src/components/molecules/grain-stat-count.js
index 94cc819..369a6e7 100644
--- a/src/components/molecules/grain-stat-count.js
+++ b/src/components/molecules/grain-stat-count.js
@@ -4,7 +4,9 @@ import '../atoms/grain-icon.js';
 export class GrainStatCount extends LitElement {
   static properties = {
     icon: { type: String },
-    count: { type: Number }
+    count: { type: Number },
+    filled: { type: Boolean },
+    interactive: { type: Boolean }
   };
 
   static styles = css`
@@ -42,6 +44,8 @@ export class GrainStatCount extends LitElement {
   constructor() {
     super();
     this.count = 0;
+    this.filled = false;
+    this.interactive = false;
   }
 
   #formatCount(n) {
@@ -50,10 +54,30 @@ export class GrainStatCount extends LitElement {
     return n.toString();
   }
 
+  #handleClick() {
+    if (this.interactive) {
+      this.dispatchEvent(new CustomEvent('stat-click', { bubbles: true, composed: true }));
+    }
+  }
+
+  get #iconName() {
+    if (this.icon === 'heart' && this.filled) {
+      return 'heartFilled';
+    }
+    return this.icon;
+  }
+
   render() {
+    const color = this.icon === 'heart' && this.filled ? 'var(--color-heart)' : 'inherit';
+
     return html`
-      <button type="button" aria-label=${this.icon}>
-        <grain-icon name=${this.icon} size="16"></grain-icon>
+      <button
+        type="button"
+        aria-label=${this.icon}
+        style="color: ${color}"
+        @click=${this.#handleClick}
+      >
+        <grain-icon name=${this.#iconName} size="16"></grain-icon>
       </button>
       ${this.count > 0 ? html`
         <span class="count">${this.#formatCount(this.count)}</span>
-- 
2.51.2