From 5564dad820a5f821558626b595c14fb5cfd59e2c Mon Sep 17 00:00:00 2001
From: Andrew Tatomyr <andrew.tatomyr@gmail.com>
Date: Sun, 19 Oct 2025 20:51:42 +0300
Subject: [PATCH 1/2] feat(todo): make stale tasks pale; fix subtasks color and
 sanitize them

---
 package.json                                   |  2 +-
 .../purity-todo/components/subtask-item.ts     | 10 ++++++----
 .../components/task-details-style.ts           | 14 ++++++++++++--
 .../purity-todo/components/task-item.ts        | 18 +++++++++++++-----
 .../purity-todo/components/task-list-style.ts  | 11 +++++++++++
 src/examples/purity-todo/manifest.json         |  2 +-
 src/examples/purity-todo/purity-todo.sw.ts     |  2 +-
 7 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index fd9e8f4..a6426f0 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "json-server": "json-server --watch public/examples/json-server/db.json",
     "test": "vitest src/",
-    "coverage": "vitest run src/ --coverage",
+    "coverage": "vitest run src/ --coverage.enabled",
     "e2e": "bash bin/e2e.sh",
     "cypress": "npx cypress@14.0.0 open --config baseUrl=http://localhost:8081",
     "prettier:check": "npx prettier --check \"**/*.{ts,html,yaml,css,md,json}\"",
diff --git a/src/examples/purity-todo/components/subtask-item.ts b/src/examples/purity-todo/components/subtask-item.ts
index 9e9e26c..8240839 100644
--- a/src/examples/purity-todo/components/subtask-item.ts
+++ b/src/examples/purity-todo/components/subtask-item.ts
@@ -26,7 +26,9 @@ const handleSubtaskChange =
     patchTask({
       id: task.id,
       subtasks: task.subtasks?.map((subtask, i) =>
-        i === subtaskIndex ? {...subtask, description: value} : subtask
+        i === subtaskIndex
+          ? {...subtask, description: sanitize(value)}
+          : subtask
       ),
     })
   }
@@ -44,7 +46,7 @@ export const subtaskItem = (
 ): string => {
   return render`
     <div class="subtask" id="subtask-${subtaskIndex}">
-      <button 
+      <button
         id="toggle-subtask-${subtaskIndex}"
         class="${ACTION_BUTTON} ${SMALL_BUTTON}"
         title="Toggle"
@@ -55,10 +57,10 @@ export const subtaskItem = (
       ${
         checked
           ? render`
-            <div style="text-decoration: line-through; width: 100%; padding: 4px 8px; ">${description}</div>
+            <div class="subtask-completed">${description}</div>
           `
           : render`
-            <input 
+            <input
               class="subtask-input"
               value="${description}"
               ::change=${handleSubtaskChange(subtaskIndex)}
diff --git a/src/examples/purity-todo/components/task-details-style.ts b/src/examples/purity-todo/components/task-details-style.ts
index a7ff4c5..077ed6c 100644
--- a/src/examples/purity-todo/components/task-details-style.ts
+++ b/src/examples/purity-todo/components/task-details-style.ts
@@ -17,7 +17,7 @@ export const taskDetailsStyle = (): string => render`
       height: min(90vw, 33vh);
       max-height: min(90vw, 33vh);
       transition: height .2s ease-in;
-      
+
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
@@ -44,7 +44,7 @@ export const taskDetailsStyle = (): string => render`
 
     .task-details--description {
       flex-grow: 1;
-      background: #f0f0f0;
+      background: var(--background-color);
     }
 
     .description-edit, .subtask-input {
@@ -52,6 +52,8 @@ export const taskDetailsStyle = (): string => render`
       padding: 4px 8px;
       border: none;
       height: 2rem;
+      background: var(--background-color);
+      color: var(--text-color);
     }
 
     .subtask {
@@ -61,6 +63,14 @@ export const taskDetailsStyle = (): string => render`
       gap: 8px;
     }
 
+    .subtask-completed {
+      text-decoration: line-through;
+      width: 100%;
+      padding: 4px 8px;
+      color: var(--text-color);
+      opacity: 0.6;
+    }
+
     .${SMALL_BUTTON} {
       width: 2rem;
       min-width: 2rem;
diff --git a/src/examples/purity-todo/components/task-item.ts b/src/examples/purity-todo/components/task-item.ts
index ca7b0e8..69ea6e9 100644
--- a/src/examples/purity-todo/components/task-item.ts
+++ b/src/examples/purity-todo/components/task-item.ts
@@ -41,24 +41,32 @@ export const taskItem = ({
   description,
   id,
   completed,
+  updatedAt,
   image,
   subtasks = [],
 }: Task) => render`
-  <li id="${id}" class="task-item ${completed && "completed"}">
+  <li
+    id="${id}"
+    class="
+      task-item
+      ${completed ? "completed" : ""}
+      ${Date.now() - updatedAt > 7 * 24 * 60 * 60 * 1000 ? "stale" : ""}
+    "
+  >
     <img
       src="${image.link}"
       onerror="this.onerror = null; this.src = '${IMAGES.BROKEN}'"
       loading="lazy"
     />
-    <div 
-      class="${ITEM_DESCRIPTION}" 
-      data-id="${id}" 
+    <div
+      class="${ITEM_DESCRIPTION}"
+      data-id="${id}"
       ::click=${openTaskDetails}
     >
       ${description.trim()}
       ${subtasks.filter(({checked}) => !checked).map(subtaskItem)}
     </div>
-    <button 
+    <button
       id="delete-${id}"
       class="${ACTION_BUTTON} ${DELETE_BUTTON} ${!completed && "hidden"}"
       data-id="${id}"
diff --git a/src/examples/purity-todo/components/task-list-style.ts b/src/examples/purity-todo/components/task-list-style.ts
index 2d11b42..d3291af 100644
--- a/src/examples/purity-todo/components/task-list-style.ts
+++ b/src/examples/purity-todo/components/task-list-style.ts
@@ -74,5 +74,16 @@ export const taskListStyle = (): string => render`
       filter: grayscale(1);
     }
 
+    ol#task-list .task-item.stale {
+      opacity: 0.4;
+      filter: grayscale(0.3);
+      transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
+    }
+
+    ol#task-list .task-item.stale:hover {
+      opacity: 0.7;
+      filter: grayscale(0.1);
+    }
+
   </style>
 `
diff --git a/src/examples/purity-todo/manifest.json b/src/examples/purity-todo/manifest.json
index 54f4ce1..40a69ac 100644
--- a/src/examples/purity-todo/manifest.json
+++ b/src/examples/purity-todo/manifest.json
@@ -1,5 +1,5 @@
 {
-  "name": "Purity Todo 2.18",
+  "name": "Purity Todo 2.19",
   "short_name": "ToDo",
   "description": "Todo list written with purity.js",
   "icons": [
diff --git a/src/examples/purity-todo/purity-todo.sw.ts b/src/examples/purity-todo/purity-todo.sw.ts
index fdf2c4f..cbcca0f 100644
--- a/src/examples/purity-todo/purity-todo.sw.ts
+++ b/src/examples/purity-todo/purity-todo.sw.ts
@@ -1,6 +1,6 @@
 const appScope = (self as any).registration.scope
 
-const cacheName = `${appScope}@2.18`
+const cacheName = `${appScope}@2.19`
 const contentToCache = [
   "./",
   "./index.html",

From 5e3133b10c473bdd563f91daccdcbc3a0f715771 Mon Sep 17 00:00:00 2001
From: Andrew Tatomyr <andrew.tatomyr@gmail.com>
Date: Sun, 19 Oct 2025 21:06:25 +0300
Subject: [PATCH 2/2] fix test

---
 .../purity-todo/components/task-item.test.ts  | 51 +++++++++++++------
 1 file changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/examples/purity-todo/components/task-item.test.ts b/src/examples/purity-todo/components/task-item.test.ts
index caa4397..b15cfb9 100644
--- a/src/examples/purity-todo/components/task-item.test.ts
+++ b/src/examples/purity-todo/components/task-item.test.ts
@@ -27,15 +27,22 @@ describe("task-item", () => {
   it("should render correctly for a given task item", () => {
     const item = getTestTask()
     expect(taskItem(item)).toMatchInlineSnapshot(`
-      "<li id="test" class="task-item "><img
+      "<li
+          id="test"
+          class="
+            task-item
+            
+            stale
+          "
+        ><img
             src="image.png"
             onerror="this.onerror = null; this.src = './assets/images/icon-pack/forbidden.svg'"
             loading="lazy"
-          /><div 
-            class="item-description" 
-            data-id="test" 
+          /><div
+            class="item-description"
+            data-id="test"
             data-purity_click_0 data-purity_flag
-          >test</div><button 
+          >test</div><button
             id="delete-test"
             class="action-button delete-button hidden"
             data-id="test"
@@ -54,15 +61,22 @@ describe("task-item", () => {
     const item = getTestTask()
     item.completed = true
     expect(taskItem(item)).toMatchInlineSnapshot(`
-      "<li id="test" class="task-item completed"><img
+      "<li
+          id="test"
+          class="
+            task-item
+            completed
+            stale
+          "
+        ><img
             src="image.png"
             onerror="this.onerror = null; this.src = './assets/images/icon-pack/forbidden.svg'"
             loading="lazy"
-          /><div 
-            class="item-description" 
-            data-id="test" 
+          /><div
+            class="item-description"
+            data-id="test"
             data-purity_click_0 data-purity_flag
-          >test</div><button 
+          >test</div><button
             id="delete-test"
             class="action-button delete-button "
             data-id="test"
@@ -84,15 +98,22 @@ describe("task-item", () => {
       {description: "not checked (should be visible!)", checked: false},
     ]
     expect(taskItem(item)).toMatchInlineSnapshot(`
-      "<li id="test" class="task-item "><img
+      "<li
+          id="test"
+          class="
+            task-item
+            
+            stale
+          "
+        ><img
             src="image.png"
             onerror="this.onerror = null; this.src = './assets/images/icon-pack/forbidden.svg'"
             loading="lazy"
-          /><div 
-            class="item-description" 
-            data-id="test" 
+          /><div
+            class="item-description"
+            data-id="test"
             data-purity_click_0 data-purity_flag
-          >test<span class="subtask-inline">not checked (should be visible!)</span></div><button 
+          >test<span class="subtask-inline">not checked (should be visible!)</span></div><button
             id="delete-test"
             class="action-button delete-button hidden"
             data-id="test"