feat(todo): better handle (sub)tasks update; revamp styling

src/examples/purity-todo/components/app-style.ts

@@ -8,13 +8,45 @@ export const appStyle = (): string => render`
       --background-color: #f0f0f0;
       --text-color: #555;
       --shadow-color: #555;
+      --border-color: lightgrey;
+      --accent-color: #4a90e2;
+      --completed-color: lightgrey;
+      --subtask-color: lightgrey;
+      --button-active-bg: grey;
+      --header-bg: lightgrey;
+      --header-border: none;
+      --input-bg: #303030;
+      --input-color: #eee;
+      --input-border: none;
+      --input-focus-outline: none;
+      --modal-overlay-bg: #50505030;
+      --task-item-hover-bg: transparent;
+      --completed-image-opacity: 1;
+      --control-button-bg: #555;
+      --control-button-opacity: 0.75;
     }
 
     @media (prefers-color-scheme: dark) {
       :root {
-        --background-color: #484848;
-        --text-color: #f0f0f0;
-        --shadow-color: #000;
+        --background-color: #1a1a2e;
+        --text-color: #e0e0e0;
+        --shadow-color: rgba(0, 0, 0, 0.5);
+        --border-color: #2d2d44;
+        --accent-color: #4a90e2;
+        --completed-color: #6b7280;
+        --subtask-color: #9ca3af;
+        --button-active-bg: var(--accent-color);
+        --header-bg: #2d2d44;
+        --header-border: 1px solid var(--border-color);
+        --input-bg: var(--header-bg);
+        --input-color: var(--text-color);
+        --input-border: 1px solid var(--border-color);
+        --input-focus-outline: 2px solid var(--accent-color);
+        --modal-overlay-bg: rgba(0, 0, 0, 0.7);
+        --task-item-hover-bg: rgba(74, 144, 226, 0.1);
+        --completed-image-opacity: 0.5;
+        --control-button-bg: var(--accent-color);
+        --control-button-opacity: 0.9;
       }
     }
 
@@ -63,16 +95,22 @@ export const appStyle = (): string => render`
     }
 
     .${ACTION_BUTTON}:active {
-      background-color: grey;
-      color: white;
+      background-color: var(--button-active-bg);
     }
 
     .${ACTION_BUTTON}.hidden {
       display: none;
     }
 
-    .${ACTION_BUTTON}.chosen {
-      color: var(--background-color);
+    .header {
+      .${ACTION_BUTTON} {
+        color: var(--background-color);
+      }
+
+      .${ACTION_BUTTON}:active,
+      .${ACTION_BUTTON}.chosen {
+        color: var(--text-color);
+      }
     }
 
   </style>

src/examples/purity-todo/components/header.ts

@@ -5,25 +5,25 @@ import {ACTION_BUTTON} from "./app-style.js"
 
 const headerStyle = (): string => render`
   <style id="header-style">
-    #header {
-      background-color: lightgrey;
+    .header {
+      background-color: var(--header-bg);
+      border-bottom: var(--header-border);
       height: 3rem;
       min-height: 3rem;
       max-width: 100%;
       z-index: 1;
-    }
 
-    #header ul {
-      display: flex;
-      justify-content: space-around;
-      user-select: none;
+      ul {
+        display: flex;
+        justify-content: space-around;
+        user-select: none;
+      }
     }
-
   </style>
 `
 
 export const header = (): string => render`
-  <nav id="header">
+  <nav id="header" class="header">
     <ul>
       ${navItem({value: "active", label: "⊡"})}
       ${navItem({value: "completed", label: "⊠"})}

src/examples/purity-todo/components/input-form.ts

@@ -19,11 +19,17 @@ const inputFormStyle = () => render`
     form#task-form input {
       width: 100%;
       height: 100%;
-      background-color: #303030;
-      color: #eee;
+      background-color: var(--input-bg);
+      color: var(--input-color);
+      border: var(--input-border);
       border-radius: 0;
     }
 
+    form#task-form input:focus {
+      outline: var(--input-focus-outline);
+      outline-offset: -2px;
+    }
+
   </style>
 `
 

src/examples/purity-todo/components/modal-style.ts

@@ -8,7 +8,7 @@ export const modalStyle = (): string => render`
       right: 0;
       bottom: 0;
       left: 0;
-      background-color: #50505030;
+      background-color: var(--modal-overlay-bg);
       z-index: 1;
       display: flex;
       align-items: center;
@@ -30,7 +30,7 @@ export const modalStyle = (): string => render`
     }
 
     .modal .modal-header {
-      background-color: lightgrey;
+      background-color: var(--header-bg);
       font-weight: bold;
       position: relative;
       ${lineContainerCSS}

src/examples/purity-todo/components/subtask-item.ts

@@ -11,33 +11,28 @@ const toggleSubtask =
   (subtaskIndex: number): EventHandler =>
   ({target: {checked}}) => {
     const {id, subtasks} = selectDetailedTask()
-    patchTask({
-      id: id,
-      subtasks: subtasks?.map((subtask, i) =>
-        i === subtaskIndex ? {...subtask, checked: !subtask.checked} : subtask
-      ),
-    })
+    const newSubtasks = subtasks?.map((s, i) =>
+      i === subtaskIndex ? {...s, checked: !s.checked} : s
+    )
+    patchTask({id: id, subtasks: newSubtasks})
   }
 
 const handleSubtaskChange =
   (subtaskIndex: number): EventHandler =>
   ({target: {value}}) => {
     const task = selectDetailedTask()
-    patchTask({
-      id: task.id,
-      subtasks: task.subtasks?.map((subtask, i) =>
-        i === subtaskIndex
-          ? {...subtask, description: sanitize(value)}
-          : subtask
-      ),
-    })
+    const newSubtasks = task.subtasks?.map((s, i) =>
+      i === subtaskIndex ? {...s, description: sanitize(value)} : s
+    )
+    patchTask({id: task.id, subtasks: newSubtasks})
   }
 
 const deleteSubtask =
   (subtaskIndex: number): EventHandler =>
   () => {
     const {id, subtasks} = selectDetailedTask()
-    patchTask({id, subtasks: subtasks?.filter((_, i) => i !== subtaskIndex)})
+    const newSubtasks = subtasks?.filter((_, i) => i !== subtaskIndex)
+    patchTask({id, subtasks: newSubtasks})
   }
 
 export const subtaskItem = (

src/examples/purity-todo/components/task-details-style.ts

@@ -36,9 +36,9 @@ export const taskDetailsStyle = (): string => render`
     .task-details--image .controls button,
     .task-details--image .controls label {
       padding: 4px 16px;
-      background: #555;
+      background: var(--control-button-bg);
       color: white;
-      opacity: 0.75;
+      opacity: var(--control-button-opacity);
       border-radius: 8px;
     }
 
@@ -69,6 +69,9 @@ export const taskDetailsStyle = (): string => render`
       padding: 4px 8px;
       color: var(--text-color);
       opacity: 0.6;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .${SMALL_BUTTON} {

src/examples/purity-todo/components/task-details.ts

@@ -88,12 +88,12 @@ export const taskDetails = (): string => {
           style="background-image: url('${
             task.isImageLoading ? IMAGES.LOADING : task?.image.link
           }');"
-        > 
+        >
           <div class="controls" id="controls">
             <button ::click=${makeChangeImage("current")}>
               ↻
             </button>
-        
+
             ${
               task?.image.queries.previousPage?.startIndex !== undefined &&
               render`
@@ -102,7 +102,7 @@ export const taskDetails = (): string => {
                 </button>
               `
             }
-            
+
             ${
               task?.image.queries.nextPage?.startIndex !== undefined &&
               render`
@@ -124,7 +124,6 @@ export const taskDetails = (): string => {
             </label>
           </div>
         </div>
-
       </section>
 
       <section class="task-details--description">
@@ -141,7 +140,7 @@ export const taskDetails = (): string => {
           ${task.subtasks?.map(subtaskItem)}
         </div>
         <div style="padding: 4px 8px; ">
-          <button 
+          <button
             class="${ACTION_BUTTON} ${SMALL_BUTTON}"
             ::click=${handleAddSubtask}
           >

src/examples/purity-todo/components/task-item.test.ts

@@ -39,6 +39,7 @@ describe("task-item", () => {
             onerror="this.onerror = null; this.src = './assets/images/icon-pack/forbidden.svg'"
             loading="lazy"
           /><div
+            id="item-description-test"
             class="item-description"
             data-id="test"
             data-purity_click_0 data-purity_flag
@@ -73,6 +74,7 @@ describe("task-item", () => {
             onerror="this.onerror = null; this.src = './assets/images/icon-pack/forbidden.svg'"
             loading="lazy"
           /><div
+            id="item-description-test"
             class="item-description"
             data-id="test"
             data-purity_click_0 data-purity_flag
@@ -110,6 +112,7 @@ describe("task-item", () => {
             onerror="this.onerror = null; this.src = './assets/images/icon-pack/forbidden.svg'"
             loading="lazy"
           /><div
+            id="item-description-test"
             class="item-description"
             data-id="test"
             data-purity_click_0 data-purity_flag

src/examples/purity-todo/components/task-item.ts

@@ -59,6 +59,7 @@ export const taskItem = ({
       loading="lazy"
     />
     <div
+      id="item-description-${id}"
       class="${ITEM_DESCRIPTION}"
       data-id="${id}"
       ::click=${openTaskDetails}

src/examples/purity-todo/components/task-list-style.ts

@@ -32,7 +32,7 @@ export const taskListStyle = (): string => render`
 
     ol#task-list .task-item {
       display: flex;
-      border-bottom: 1px solid lightgrey;
+      border-bottom: 1px solid var(--border-color);
       align-items: center;
       padding: 0;
     }
@@ -47,18 +47,18 @@ export const taskListStyle = (): string => render`
     }
 
     ol#task-list .task-item.completed .${ITEM_DESCRIPTION} {
-      color: lightgrey;
+      color: var(--completed-color);
     }
 
     .${ITEM_DESCRIPTION} .subtask-inline {
-      color: lightgrey;
+      color: var(--subtask-color);
     }
 
     .${ITEM_DESCRIPTION} .subtask-inline::before {
       content: "⊡";
       margin-right: 0.5rem;
       margin-left: 0.5rem;
-      color: lightgrey;
+      color: var(--subtask-color);
     }
 
     ol#task-list .task-item > img {
@@ -70,19 +70,16 @@ export const taskListStyle = (): string => render`
       z-index: -1;
     }
 
+    ol#task-list .task-item:hover {
+      background-color: var(--task-item-hover-bg);
+    }
+
     ol#task-list .task-item.completed > img {
       filter: grayscale(1);
+      opacity: var(--completed-image-opacity);
     }
 
     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.19",
+  "name": "Purity Todo 2.20",
   "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.19`
+const cacheName = `${appScope}@2.20`
 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)