feat(todo): make stale tasks pale; fix subtasks color and sanitize them

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}\"",

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)}

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,14 +44,16 @@ export const taskDetailsStyle = (): string => render`
 
     .task-details--description {
       flex-grow: 1;
-      background: #f0f0f0;
+      background: var(--background-color);
     }
 
     .description-edit, .subtask-input {
       width: 100%;
       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;

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"

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}"

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>
 `

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": [

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",
@@ -14,7 +14,7 @@
   "manifest.json",
 ]
 
 self.addEventListener("install", (e: any) => {
   console.log(`[purity-todo.sw.js] Install`)
   e.waitUntil(
     (async () => {
@@ -25,7 +25,7 @@
   )
 })
 
 self.addEventListener("activate", (e: any) => {
   console.log(`[purity-todo.sw.js] Activate`)
   caches.keys().then(console.log)
   e.waitUntil(
@@ -44,7 +44,7 @@
   )
 })
 
 self.addEventListener("fetch", (e: any) => {
   e.respondWith(
     (async () => {
       const r = await caches.match(e.request)