From 81da44cbc6442d86436b66bc7e328e2e17b6a897 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Sun, 16 Aug 2026 22:50:12 +1000
Subject: [PATCH] updated task count on widget

---
 widgets/horizontal/index.html                 |  1 +
 widgets/horizontal/scripts/tasklist-view.js   | 26 ++++++++++++-------
 widgets/horizontal/styles/structure.css       |  2 +-
 widgets/horizontal/styles/style.css           |  6 +++++
 widgets/streamer-only/index.html              |  1 +
 .../streamer-only/scripts/tasklist-view.js    | 25 +++++++++++-------
 widgets/streamer-only/styles/style.css        |  6 +++++
 widgets/vertical/index.html                   |  1 +
 widgets/vertical/scripts/tasklist-view.js     | 25 +++++++++++-------
 widgets/vertical/styles/style.css             |  8 +++++-
 10 files changed, 71 insertions(+), 30 deletions(-)

diff --git a/widgets/horizontal/index.html b/widgets/horizontal/index.html
index c0416ef..e618c17 100644
--- a/widgets/horizontal/index.html
+++ b/widgets/horizontal/index.html
@@ -17,6 +17,7 @@
 		<div class="task-panel">
 			<div class="panel-header">
 				<span id="title">!taskhelp</span>
+				<span id="task-count">0/0</span>
 			</div>
 			<div class="scroll-viewport">
 				<div class="scroll-track" id="scrollTrack">
diff --git a/widgets/horizontal/scripts/tasklist-view.js b/widgets/horizontal/scripts/tasklist-view.js
index b025854..6f4c3e6 100644
--- a/widgets/horizontal/scripts/tasklist-view.js
+++ b/widgets/horizontal/scripts/tasklist-view.js
@@ -62,6 +62,7 @@ class TaskList {
 			track: el.querySelector(".scroll-track"),
 			content: el.querySelector(".scroll-content"),
 			viewport: el.querySelector(".scroll-viewport"),
+			count: el.querySelector("#task-count"),
 		};
 	}
 
@@ -100,15 +101,13 @@ class TaskList {
 		if (!section) return this;
 
 		section.color = color;
-		document
-			.querySelectorAll(".section")
-			.forEach((el) => {
-				if (el.dataset.key !== sectionId) return;
-				const title = el.querySelector(":scope > .section-title");
-				if (!title) return;
-				title.style.setProperty("--user-color", color);
-				title.classList.add("has-user-color");
-			});
+		document.querySelectorAll(".section").forEach((el) => {
+			if (el.dataset.key !== sectionId) return;
+			const title = el.querySelector(":scope > .section-title");
+			if (!title) return;
+			title.style.setProperty("--user-color", color);
+			title.classList.add("has-user-color");
+		});
 		return this;
 	}
 
@@ -221,6 +220,7 @@ class TaskList {
 		this.#els.content.innerHTML = "";
 		this.#data = [];
 		this.#firstRender = true;
+		this.#updateTaskCount();
 	}
 
 	// ── render ─────────────────────────────────────────
@@ -235,11 +235,18 @@ class TaskList {
 			this.#patchContainer(this.#els.content, this.#data, true);
 		}
 
+		this.#updateTaskCount();
+
 		if (this.#pendingRemovals === 0) {
 			this.#syncScroll();
 		}
 	}
 
+	#updateTaskCount() {
+		if (!this.#els.count) return;
+		this.#els.count.textContent = `${this.doneCount}/${this.taskCount}`;
+	}
+
 	// ── animations ─────────────────────────────────────
 
 	#animateIn(el) {
@@ -317,7 +324,6 @@ class TaskList {
 		);
 	}
 
-
 	// ── dom helpers ────────────────────────────────────
 
 	#stripHtml(text) {
diff --git a/widgets/horizontal/styles/structure.css b/widgets/horizontal/styles/structure.css
index c1a2c1d..1d8b6ce 100644
--- a/widgets/horizontal/styles/structure.css
+++ b/widgets/horizontal/styles/structure.css
@@ -24,7 +24,7 @@ body {
 
 .panel-header {
 	display: flex;
-	justify-content: center;
+	justify-content: space-between;
 	align-items: center;
 	text-align: center;
 	width: var(--header-width);
diff --git a/widgets/horizontal/styles/style.css b/widgets/horizontal/styles/style.css
index 8ff0ef1..77bb1d7 100644
--- a/widgets/horizontal/styles/style.css
+++ b/widgets/horizontal/styles/style.css
@@ -138,6 +138,12 @@ body {
 	font-size: var(--title-font-size);
 }
 
+#task-count {
+	flex-shrink: 0;
+	white-space: nowrap;
+	font-size: var(--title-font-size);
+}
+
 .task-number {
 	flex-shrink: 0;
 	min-width: 16px;
diff --git a/widgets/streamer-only/index.html b/widgets/streamer-only/index.html
index c0416ef..e618c17 100644
--- a/widgets/streamer-only/index.html
+++ b/widgets/streamer-only/index.html
@@ -17,6 +17,7 @@
 		<div class="task-panel">
 			<div class="panel-header">
 				<span id="title">!taskhelp</span>
+				<span id="task-count">0/0</span>
 			</div>
 			<div class="scroll-viewport">
 				<div class="scroll-track" id="scrollTrack">
diff --git a/widgets/streamer-only/scripts/tasklist-view.js b/widgets/streamer-only/scripts/tasklist-view.js
index de97448..7d4993c 100644
--- a/widgets/streamer-only/scripts/tasklist-view.js
+++ b/widgets/streamer-only/scripts/tasklist-view.js
@@ -31,6 +31,7 @@ class TaskList {
 			track: el.querySelector(".scroll-track"),
 			content: el.querySelector(".scroll-content"),
 			viewport: el.querySelector(".scroll-viewport"),
+			count: el.querySelector("#task-count"),
 		};
 	}
 
@@ -77,15 +78,13 @@ class TaskList {
 		if (!section) return this;
 
 		section.color = color;
-		document
-			.querySelectorAll(".section")
-			.forEach((el) => {
-				if (el.dataset.key !== sectionId) return;
-				const title = el.querySelector(":scope > .section-title");
-				if (!title) return;
-				title.style.setProperty("--user-color", color);
-				title.classList.add("has-user-color");
-			});
+		document.querySelectorAll(".section").forEach((el) => {
+			if (el.dataset.key !== sectionId) return;
+			const title = el.querySelector(":scope > .section-title");
+			if (!title) return;
+			title.style.setProperty("--user-color", color);
+			title.classList.add("has-user-color");
+		});
 		return this;
 	}
 
@@ -198,6 +197,7 @@ class TaskList {
 		this.#els.content.innerHTML = "";
 		this.#data = [];
 		this.#firstRender = true;
+		this.#updateTaskCount();
 	}
 
 	// ── render ─────────────────────────────────────────
@@ -212,11 +212,18 @@ class TaskList {
 			this.#patchContainer(this.#els.content, this.#data, true);
 		}
 
+		this.#updateTaskCount();
+
 		if (this.#pendingRemovals === 0) {
 			this.#syncScroll();
 		}
 	}
 
+	#updateTaskCount() {
+		if (!this.#els.count) return;
+		this.#els.count.textContent = `${this.doneCount}/${this.taskCount}`;
+	}
+
 	// ── animations ─────────────────────────────────────
 
 	#animateIn(el) {
diff --git a/widgets/streamer-only/styles/style.css b/widgets/streamer-only/styles/style.css
index 35971be..1610b3c 100644
--- a/widgets/streamer-only/styles/style.css
+++ b/widgets/streamer-only/styles/style.css
@@ -126,6 +126,12 @@ body {
 	font-size: var(--title-font-size);
 }
 
+#task-count {
+	flex-shrink: 0;
+	white-space: nowrap;
+	font-size: var(--title-font-size);
+}
+
 .task-number {
 	flex-shrink: 0;
 	min-width: 16px;
diff --git a/widgets/vertical/index.html b/widgets/vertical/index.html
index c0416ef..e618c17 100644
--- a/widgets/vertical/index.html
+++ b/widgets/vertical/index.html
@@ -17,6 +17,7 @@
 		<div class="task-panel">
 			<div class="panel-header">
 				<span id="title">!taskhelp</span>
+				<span id="task-count">0/0</span>
 			</div>
 			<div class="scroll-viewport">
 				<div class="scroll-track" id="scrollTrack">
diff --git a/widgets/vertical/scripts/tasklist-view.js b/widgets/vertical/scripts/tasklist-view.js
index 55f5860..c9066d3 100644
--- a/widgets/vertical/scripts/tasklist-view.js
+++ b/widgets/vertical/scripts/tasklist-view.js
@@ -62,6 +62,7 @@ class TaskList {
 			track: el.querySelector(".scroll-track"),
 			content: el.querySelector(".scroll-content"),
 			viewport: el.querySelector(".scroll-viewport"),
+			count: el.querySelector("#task-count"),
 		};
 	}
 
@@ -100,15 +101,13 @@ class TaskList {
 		if (!section) return this;
 
 		section.color = color;
-		document
-			.querySelectorAll(".section")
-			.forEach((el) => {
-				if (el.dataset.key !== sectionId) return;
-				const title = el.querySelector(":scope > .section-title");
-				if (!title) return;
-				title.style.setProperty("--user-color", color);
-				title.classList.add("has-user-color");
-			});
+		document.querySelectorAll(".section").forEach((el) => {
+			if (el.dataset.key !== sectionId) return;
+			const title = el.querySelector(":scope > .section-title");
+			if (!title) return;
+			title.style.setProperty("--user-color", color);
+			title.classList.add("has-user-color");
+		});
 		return this;
 	}
 
@@ -221,6 +220,7 @@ class TaskList {
 		this.#els.content.innerHTML = "";
 		this.#data = [];
 		this.#firstRender = true;
+		this.#updateTaskCount();
 	}
 
 	// ── render ─────────────────────────────────────────
@@ -235,11 +235,18 @@ class TaskList {
 			this.#patchContainer(this.#els.content, this.#data, true);
 		}
 
+		this.#updateTaskCount();
+
 		if (this.#pendingRemovals === 0) {
 			this.#syncScroll();
 		}
 	}
 
+	#updateTaskCount() {
+		if (!this.#els.count) return;
+		this.#els.count.textContent = `${this.doneCount}/${this.taskCount}`;
+	}
+
 	// ── animations ─────────────────────────────────────
 
 	#animateIn(el) {
diff --git a/widgets/vertical/styles/style.css b/widgets/vertical/styles/style.css
index 16680ca..856ab15 100644
--- a/widgets/vertical/styles/style.css
+++ b/widgets/vertical/styles/style.css
@@ -106,7 +106,7 @@ body {
 }
 
 .section-title.has-user-color {
-    color: var(--user-color); /*auto user color*/
+	color: var(--user-color); /*auto user color*/
 }
 
 .task.done,
@@ -126,6 +126,12 @@ body {
 	font-size: var(--title-font-size);
 }
 
+#task-count {
+	flex-shrink: 0;
+	white-space: nowrap;
+	font-size: var(--title-font-size);
+}
+
 .task-number {
 	flex-shrink: 0;
 	min-width: 16px;