fix(todo2): make task-list shadows depend on the scroll position

src/examples/purity-todo/app.ts

@@ -38,13 +38,15 @@ export type AppState = {
 	isSettingsModalOpen: boolean
 	taskDetailId?: string
 	tasks: Task[]
+	taskListElement: HTMLElement | null
 }
 
 export const initialState: AppState = {
 	view: "active",
 	input: "",
 	isSettingsModalOpen: false,
 	tasks: get({tasks: []}).tasks,
+	taskListElement: null,
 }
 
 export const state = {...initialState}

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

@@ -17,7 +17,6 @@ const headerStyle = (): string => render`
 			display: flex;
 			justify-content: space-around;
 			user-select: none;
-			box-shadow: 0px 4px 10px -2px;
 		}
 
 	</style>

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

@@ -14,7 +14,6 @@ const inputFormStyle = () => render`
 			max-width: 100%;
 			height: 3rem;
 			min-height: 3rem;
-			box-shadow: 0px -4px 10px -2px;
 		}
 
 		form#task-form input {

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

@@ -33,7 +33,6 @@ export const modalStyle = (): string => render`
 			background-color: lightgrey;
 			font-weight: bold;
 			position: relative;
-	    box-shadow: 0px 8px 10px -10px;
 			${lineContainerCSS}
 		}
 

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

@@ -1,12 +1,31 @@
 import {render} from "../../../index.js"
+import {isTruthy} from "../../../purity.js"
+import {state} from "../app.js"
 import {ITEM_DESCRIPTION, TOGGLE_BUTTON} from "./task-item.js"
+import type {AppState} from "../app.js"
+
+const isTopScrolled = ({taskListElement}: AppState) =>
+	taskListElement && taskListElement.scrollTop > 0
+
+const isBottomScrolled = ({taskListElement}: AppState) =>
+	taskListElement &&
+	taskListElement.scrollTop <
+		taskListElement.scrollHeight - taskListElement.clientHeight
 
 export const taskListStyle = (): string => render`
 	<style id="task-list-style">
 		ol#task-list {
 			overflow-y: auto;
 			flex-grow: 1;
 			min-height: 3rem;
+      box-shadow: ${
+				[
+					isTopScrolled(state) && "inset 0px 16px 8px -16px",
+					isBottomScrolled(state) && "inset 0px -16px 8px -16px",
+				]
+					.filter(isTruthy)
+					.join(",") || "none"
+			};
 		}
 
 		ol#task-list .task-item {

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

@@ -1,5 +1,5 @@
 import {render} from "../../../index.js"
-import {state} from "../app.js"
+import {setState, state} from "../app.js"
 import {resetInput} from "../services/input-form.js"
 import {byInput, byStatus, deleteTask, patchTask} from "../services/tasks.js"
 import {
@@ -25,11 +25,15 @@ const handleClick: EventHandler = e => {
 	// })
 }
 
+const handleScroll: EventHandler = ({target}) => {
+	setState(() => ({taskListElement: target}))
+}
+
 export const taskList = (): string => {
 	const tasks = state.tasks.filter(byInput(state)).filter(byStatus(state))
 
 	return render`
-		<ol id="task-list" ::click=${handleClick}>
+		<ol id="task-list" ::click=${handleClick} ::scroll=${handleScroll}>
 			${tasks.map(taskItem)}
 		</ol>
 		${taskListStyle()}

src/examples/purity-todo/manifest.json

@@ -1,5 +1,5 @@
 {
-	"name": "Purity Todo 2.13",
+	"name": "Purity Todo 2.14",
 	"short_name": "ToDo",
 	"description": "Todo list written with purity.js",
 	"icons": [

src/examples/purity-todo/purity-todo.sw.js

@@ -1,6 +1,6 @@
 const appScope = self.registration.scope
 
-const cacheName = `${appScope}@2.13`
+const cacheName = `${appScope}@2.14`
 const contentToCache = [
 	"./",
 	"./index.html",