From 0944b27ff84abc7456cbc9a5547b0f9299665590 Mon Sep 17 00:00:00 2001
From: "zenith-developer[bot]" <zenith-developer@users.noreply.github.com>
Date: Tue, 2 Jun 2026 06:41:32 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20show=20current=20streak=20count=20and?=
 =?UTF-8?q?=20=F0=9F=94=A5=20badge=20per=20habit=20in=20the=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wires currentStreak() into the habit list renderer. Each habit row now
shows the streak count when it is ≥ 1; a 🔥 badge appears at ≥ 3.
Zero streaks render nothing, keeping the UI uncluttered.

Closes #2
---
 src/main.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/main.ts b/src/main.ts
index 637dc18..d330cff 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,7 @@ import {
   toggleCompletion,
   isCompletedOn,
   dayStr,
+  currentStreak,
 } from "./habits";
 
 const STORAGE_KEY = "zenith.habits.v1";
@@ -47,12 +48,18 @@ function render(): void {
             : habits
                 .map((h) => {
                   const done = isCompletedOn(h, today);
+                  const streak = currentStreak(h, today);
+                  const streakHtml =
+                    streak === 0
+                      ? ""
+                      : `<span class="streak">${streak}${streak >= 3 ? " 🔥" : ""}</span>`;
                   return `
                     <li class="${done ? "done" : ""}">
                       <button class="check" data-id="${h.id}" aria-label="Toggle ${h.name}">
                         ${done ? "✓" : ""}
                       </button>
                       <span class="hname">${escapeHtml(h.name)}</span>
+                      ${streakHtml}
                       <button class="del" data-del="${h.id}" aria-label="Delete ${h.name}">×</button>
                     </li>`;
                 })