Merge remote-tracking branch 'origin/master'

components/Avatar.tsx

@@ -0,0 +1,12 @@
+import { JSX } from 'preact'
+
+export function Avatar(
+	{ className, ...props }: JSX.HTMLAttributes<HTMLImageElement>,
+) {
+	return (
+		<img
+			{...props}
+			class={`rounded-full object-cover h-60 w-60 ${className || ''}`}
+		/>
+	)
+}

components/Dialog.tsx

@@ -0,0 +1,44 @@
+import { createRef, JSX } from 'preact'
+import { Button } from '@homeman/components/Button.tsx'
+import { useEffect } from 'preact/hooks'
+
+interface Props extends JSX.HTMLAttributes<HTMLDialogElement> {
+	headerTitle: string
+	show?: boolean
+}
+
+export function Dialog(
+	{ show, headerTitle, children, className, ...props }: Props,
+) {
+	const self = createRef<HTMLDialogElement>()
+
+	useEffect(() => {
+		if (show) {
+			self.current?.showModal()
+		} else {
+			self.current?.close()
+		}
+		return () => {
+			// cleanup
+		}
+	}, [show])
+
+	return (
+		<dialog
+			{...props}
+			class={`rounded drop-shadow-lg backdrop:bg-stone-500/90 ${className}`}
+			ref={self}
+		>
+			<header class='p-4 flex w-full items-center border-b-2 border-stone-500/20'>
+				<h1 class='text-xl grow'>{headerTitle}</h1>
+				<Button
+					onClick={() => self.current?.close()}
+					class='text-xl p-4 border-b-2 mr-4'
+				>
+					✕
+				</Button>
+			</header>
+			{children}
+		</dialog>
+	)
+}

components/Label.tsx

@@ -4,7 +4,7 @@ export function Label(
 	{ children, className, ...props }: JSX.HTMLAttributes<HTMLLabelElement>,
 ) {
 	return (
-		<label {...props} class={`flex flex-col ${className}`} for='name'>
+		<label {...props} class={`flex flex-col ${className}`}>
 			{children}
 		</label>
 	)

components/Nav.tsx

@@ -1,26 +1,14 @@
 // import { JSX } from 'preact'
 // import { IS_BROWSER } from '$fresh/runtime.ts'
 
+import { Bars3Outline } from 'preact-heroicons'
 import { Clock } from '@homeman/islands/Clock.tsx'
 
 export function Nav(/* props: {} */) {
 	return (
 		<nav class='bg-stone-200 dark:bg-stone-800 flex justify-items-start items-center'>
 			<button class='p-4 hover:bg-stone-500/20'>
-				<svg
+				<Bars3Outline class='h-6 w-6' />
-					xmlns='http://www.w3.org/2000/svg'
-					fill='none'
-					viewBox='0 0 24 24'
-					stroke-width='1.5'
-					stroke='currentColor'
-					class='w-6 h-6'
-				>
-					<path
-						stroke-linecap='round'
-						stroke-linejoin='round'
-						d='M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5'
-					/>
-				</svg>
 			</button>
 			<a class='p-4 hover:bg-stone-500/20' href='/'>
 				Flanagan Family

components/SectionHead.tsx

@@ -0,0 +1,20 @@
+import { JSX } from 'preact'
+
+export interface Props extends JSX.HTMLAttributes<HTMLElement> {
+	text: string
+}
+export function SectionHead(
+	{ text, children, className, ...props }: Props,
+) {
+	return (
+		<header
+			{...props}
+			class={`flex items-center border-b-2 border-stone-500/20 ${className}`}
+		>
+			<h1 class='flex items-center gap-4 p-5 text-2xl'>
+				{text}
+				{children}
+			</h1>
+		</header>
+	)
+}

components/Select.tsx

@@ -0,0 +1,26 @@
+import { JSX } from 'preact'
+
+export function Select(
+	{ children, className, ...props }: JSX.HTMLAttributes<HTMLSelectElement>,
+) {
+	if (!props.id && props.name) {
+		props.id = props.name
+	} else if (!props.name && props.id) {
+		props.name = props.id
+	}
+	let defaultClassName =
+		'border-2 bg-stone-500/20 border-stone-500/20 px-2 py-1 rounded'
+	if (props.type == 'submit') {
+		defaultClassName =
+			'px-2 py-1 bg-emerald-500/20 rounded hover:bg-gray-500/25 cursor-pointer transition-colors'
+	}
+
+	return (
+		<select
+			{...props}
+			class={`${defaultClassName} ${className}`}
+		>
+			{children}
+		</select>
+	)
+}

components/Table.tsx

@@ -0,0 +1,14 @@
+import { JSX } from 'preact'
+
+export function Table(
+	{ children, className, ...props }: JSX.HTMLAttributes<HTMLTableElement>,
+) {
+	return (
+		<table
+			{...props}
+			class={`border-separate [border-spacing:1.25rem] text-left ${className}`}
+		>
+			{children}
+		</table>
+	)
+}

components/TodoList.tsx

@@ -1,51 +0,0 @@
-import { Todo, UserWithTodos } from '@homeman/models.ts'
-import { Button } from '@homeman/components/Button.tsx'
-
-export interface Props {
-	user: UserWithTodos
-}
-
-export function TodoList(
-	{ user: { avatarUrl, assignedTodos, name, color } }: Props,
-) {
-	const todoItem = (
-		{ className, description, hideDone }: Pick<Todo, 'description'> & {
-			className?: string
-			hideDone?: boolean
-		},
-	) => (
-		<li
-			style={`border-color: #${color}`}
-			class={`${
-				className || ''
-			} border-l-4 p-4 rounded drop-shadow-lg bg-white dark:bg-stone-900 flex flex-col`}
-		>
-			<span class='text-xl'>{description}</span>
-			{hideDone ? '' : <Button class='mt-2'>Done</Button>}
-		</li>
-	)
-	return (
-		<div class='p-2 w-1/4 min-w-[15rem] relative flex flex-col grow-0'>
-			<img
-				class='rounded-full w-[15rem] h-[15rem] mb-2 object-cover'
-				src={avatarUrl != null ? avatarUrl : 'https://placehold.co/512x512'}
-				title={`${name}'s avatar`}
-			/>
-			<span style={`color: #${color};`} class='font-semibold text-center'>
-				{name}
-			</span>
-			<button class='mt-4 mb-4 text-left w-full px-2 py-1 rounded-lg border-[1px] text-stone-500 border-stone-500 opacity-50 hover:opacity-100'>
-				+ New
-			</button>
-			<ul class='flex flex-col gap-y-4'>
-				{assignedTodos.length < 1
-					? todoItem({
-						description: 'All clear! 🎉',
-						className: 'text-center',
-						hideDone: true,
-					})
-					: assignedTodos.map(todoItem)}
-			</ul>
-		</div>
-	)
-}

deno.json

@@ -29,6 +29,7 @@
 		"tailwindcss": "npm:tailwindcss@3.3.5",
 		"tailwindcss/": "npm:/tailwindcss@3.3.5/",
 		"tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
+		"preact-heroicons": "https://esm.sh/preact-heroicons@2.1.1",
 		"$std/": "https://deno.land/std@0.208.0/",
 		"@homeman/": "./"
 	},

fresh.gen.ts

@@ -7,12 +7,15 @@ import * as $_app from './routes/_app.tsx'
 import * as $admin from './routes/admin.tsx'
 import * as $api_joke from './routes/api/joke.ts'
 import * as $api_todo from './routes/api/todo.ts'
+import * as $api_todo_done from './routes/api/todo/done.ts'
 import * as $api_user from './routes/api/user.ts'
 import * as $greet_name_ from './routes/greet/[name].tsx'
 import * as $index from './routes/index.tsx'
 import * as $Admin from './islands/Admin.tsx'
 import * as $Clock from './islands/Clock.tsx'
 import * as $Counter from './islands/Counter.tsx'
+import * as $Dashboard from './islands/Dashboard.tsx'
+import * as $TodoList from './islands/TodoList.tsx'
 import { type Manifest } from '$fresh/server.ts'
 
 const manifest = {
@@ -22,6 +25,7 @@ const manifest = {
 		'./routes/admin.tsx': $admin,
 		'./routes/api/joke.ts': $api_joke,
 		'./routes/api/todo.ts': $api_todo,
+		'./routes/api/todo/done.ts': $api_todo_done,
 		'./routes/api/user.ts': $api_user,
 		'./routes/greet/[name].tsx': $greet_name_,
 		'./routes/index.tsx': $index,
@@ -30,6 +34,8 @@ const manifest = {
 		'./islands/Admin.tsx': $Admin,
 		'./islands/Clock.tsx': $Clock,
 		'./islands/Counter.tsx': $Counter,
+		'./islands/Dashboard.tsx': $Dashboard,
+		'./islands/TodoList.tsx': $TodoList,
 	},
 	baseUrl: import.meta.url,
 } satisfies Manifest

islands/Admin.tsx

@@ -1,13 +1,23 @@
-import { createRef } from 'preact'
+import { JSX } from 'preact'
 import { type Signal, useSignal } from '@preact/signals'
 import { Todo, User } from '@homeman/models.ts'
 import { Button } from '@homeman/components/Button.tsx'
 import { Input } from '@homeman/components/Input.tsx'
 import { Label } from '@homeman/components/Label.tsx'
+import { Dialog } from '@homeman/components/Dialog.tsx'
+import {
+	PencilSquareOutline,
+	PlusOutline,
+	PlusSolid,
+	TrashOutline,
+} from 'preact-heroicons'
+import { Table } from '@homeman/components/Table.tsx'
+import { SectionHead } from '@homeman/components/SectionHead.tsx'
+import { Avatar } from '@homeman/components/Avatar.tsx'
 
 export interface Props {
-	users: User[]
+	users: Record<string, User>
-	todos: Todo[]
+	todos: Record<string, Todo>
 }
 
 async function promptDeleteUser(id: string, name: string) {
@@ -17,14 +27,49 @@ async function promptDeleteUser(id: string, name: string) {
 	}
 }
 
+interface UserFormProps extends JSX.HTMLAttributes<HTMLFormElement> {
+	onCancelButtonClicked: JSX.MouseEventHandler<HTMLButtonElement>
+	userData: User | null
+}
+
+function UserForm(
+	{ onCancelButtonClicked, userData, ...props }: UserFormProps,
+) {
+	return (
+		<form
+			{...props}
+			class='p-4 gap-4 flex flex-col'
+			action='/api/user'
+			method='post'
+			encType='multipart/form-data'
+		>
+			{userData ? <Input type='hidden' name='id' value={userData.id} /> : <></>}
+			<Label for='name'>
+				Name
+				<Input autofocus name='name' value={userData?.name} />
+			</Label>
+			<Label for='avatar'>
+				Avatar
+				<Input type='file' name='avatar' />
+			</Label>
+			<Label for='color'>
+				Color
+				<Input type='color' name='color' value={`#${userData?.color}`} />
+			</Label>
+			<footer class='flex justify-end gap-2'>
+				<Button type='button' onClick={onCancelButtonClicked}>
+					Cancel
+				</Button>
+				<Input type='submit' value='Save' />
+			</footer>
+		</form>
+	)
+}
+
 export function Admin({ users, todos }: Props) {
+	const showAddUserDialog = useSignal(false)
 	const editUser: Signal<User | null> = useSignal(null)
-	const addUserDialog = createRef<HTMLDialogElement>()
+
-	const editUserDialog = createRef<HTMLDialogElement>()
-	const usersById: Record<string, User> = {}
-	for (const u of users) {
-		usersById[u.id] = u
-	}
 	return (
 		<main class='flex flex-col'>
 			<header class='flex items-center border-b-2 border-stone-500/20 '>
@@ -32,109 +77,32 @@ export function Admin({ users, todos }: Props) {
 					Administration Page
 				</h1>
 			</header>
-			<dialog
+			<Dialog
-				class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
+				headerTitle='Add user'
-				ref={addUserDialog}
+				show={showAddUserDialog.value}
+				onClose={() => showAddUserDialog.value = false}
 			>
-				<header class='p-4 flex w-full items-center border-b-2 border-stone-500/20'>
+				<UserForm
-					<h1 class='text-xl grow'>Add user</h1>
+					onCancelButtonClicked={() => showAddUserDialog.value = false}
-					<Button
+					userData={null}
-						onClick={() => addUserDialog.current?.close()}
+				/>
-						class='text-xl p-4 border-b-2 mr-4'
+			</Dialog>
-					>
+			<Dialog
-						✕
+				headerTitle={`Edit '${editUser.value?.name}'`}
-					</Button>
+				show={!!editUser.value}
-				</header>
+				onClose={() => editUser.value = null}
-				<form
-					class='p-4 gap-4 flex flex-col'
-					action='/api/user'
-					method='post'
-					encType='multipart/form-data'
-					onSubmit={() => console.log('Submitting new user...')}
-				>
-					<Label for='name'>
-						Name
-						<Input autofocus name='name' />
-					</Label>
-					<Label for='avatar'>
-						Avatar
-						<Input type='file' name='avatar' />
-					</Label>
-					<Label for='color'>
-						Color
-						<Input type='color' name='color' />
-					</Label>
-					<footer class='flex justify-end gap-2'>
-						<Button
-							onClick={() => addUserDialog.current?.close()}
-						>
-							Cancel
-						</Button>
-						<Input type='submit' value='Save' />
-					</footer>
-				</form>
-			</dialog>
-			<dialog
-				class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
-				ref={editUserDialog}
 			>
-				<header class='p-4 flex w-full items-center border-b-2 border-stone-500/20'>
+				<UserForm
-					<h1 class='text-xl grow'>{`Edit '${editUser.value?.name}'`}</h1>
+					onCancelButtonClicked={() => editUser.value = null}
-					<Button
+					userData={editUser.value}
-						onClick={() => editUserDialog.current?.close()}
+				/>
-						class='text-xl p-4 border-b-2 mr-4'
+			</Dialog>
-					>
+			<SectionHead text={`Users (${users.length})`}>
-						✕
+				<Button onClick={() => showAddUserDialog.value = true}>
-					</Button>
+					<PlusOutline class='w-6 h-6' />
-				</header>
-				<form
-					class='p-4 gap-4 flex flex-col'
-					action='/api/user'
-					// TODO:
-					// Form contains enctype=multipart/form-data, but does not contain method=post.
-					// Submitting normally with method=GET and no enctype instead.
-					// possible workaround? https://stackoverflow.com/questions/50691938/patch-and-put-request-does-not-working-with-form-data
-					method='post'
-					encType='multipart/form-data'
-					onSubmit={() => console.log('Submitting edit user...')}
-				>
-					<Input type='hidden' name='_method' value='put' />
-					<Input type='hidden' name='id' value={editUser.value?.id} />
-					<Label for='name'>
-						Name
-						<Input autofocus name='name' value={editUser.value?.name} />
-					</Label>
-					<Label for='avatar'>
-						Avatar
-						<Input type='file' name='avatar' />
-					</Label>
-					<Label for='color'>
-						Color
-						<Input
-							type='color'
-							name='color'
-							value={`#${editUser.value?.color}`}
-						/>
-					</Label>
-					<footer class='flex justify-end gap-2'>
-						<Button
-							onClick={() => editUserDialog.current?.close()}
-						>
-							Cancel
-						</Button>
-						<Input type='submit' value='Save' />
-					</footer>
-				</form>
-			</dialog>
-			<header class='flex items-center border-b-2 border-stone-500/20 '>
-				<h1 class='p-5 text-2xl'>
-					Users ({users.length})
-				</h1>
-				<Button onClick={() => addUserDialog.current?.showModal()}>
-					Add User
 				</Button>
-			</header>
+			</SectionHead>
-			<table class='border-separate [border-spacing:1.25rem] text-left'>
+			<Table>
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -144,15 +112,15 @@ export function Admin({ users, todos }: Props) {
 					</tr>
 				</thead>
 				<tbody>
-					{users.map((user) => {
+					{Object.entries(users).map(([id, user]) => {
-						const { id, name, avatarUrl, color } = user
+						const { name, avatarUrl, color } = user
 						return (
 							<tr>
 								<td>{name}</td>
 								<td>
 									{avatarUrl == null
 										? 'None'
-										: <img class='h-16 w-16 object-cover' src={avatarUrl} />}
+										: <Avatar className='h-16 w-16' src={avatarUrl} />}
 								</td>
 								<td style={`color: #${color}`}>
 									#{color}
@@ -163,57 +131,23 @@ export function Admin({ users, todos }: Props) {
 										className='py-2 mr-2'
 										onClick={() => promptDeleteUser(id, name)}
 									>
-										<svg
+										<TrashOutline class='w-6 h-6' />
-											xmlns='http://www.w3.org/2000/svg'
-											fill='none'
-											viewBox='0 0 24 24'
-											stroke-width='1.5'
-											stroke='currentColor'
-											class='w-6 h-6'
-										>
-											<path
-												stroke-linecap='round'
-												stroke-linejoin='round'
-												d='m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0'
-											/>
-										</svg>
 									</Button>
 									<Button
 										title='Edit'
 										className='py-2'
-										onClick={() => {
+										onClick={() => editUser.value = user}
-											editUser.value = user
-											editUserDialog.current?.showModal()
-										}}
 									>
-										<svg
+										<PencilSquareOutline class='w-6 h-6' />
-											xmlns='http://www.w3.org/2000/svg'
-											fill='none'
-											viewBox='0 0 24 24'
-											stroke-width='1.5'
-											stroke='currentColor'
-											class='w-6 h-6'
-										>
-											<path
-												stroke-linecap='round'
-												stroke-linejoin='round'
-												d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10'
-											/>
-										</svg>
 									</Button>
 								</td>
 							</tr>
 						)
 					})}
 				</tbody>
-			</table>
+			</Table>
-			<header class='flex items-center border-b-2 border-stone-500/20 '>
+			<SectionHead text={`Todos (${todos.length})`} />
-				<h1 class='p-5 text-2xl'>
+			<Table>
-					Todos ({todos.length})
-				</h1>
-				<Button>+</Button>
-			</header>
-			<table class='border-separate [border-spacing:1.25rem] text-left'>
 				<thead>
 					<tr>
 						<th>Description</th>
@@ -221,18 +155,20 @@ export function Admin({ users, todos }: Props) {
 					</tr>
 				</thead>
 				<tbody>
-					{todos.map(({ description, assigneeUserId }) => (
+					{Object.entries(todos).map((
+						[_id, { description, assigneeUserId }],
+					) => (
 						<tr>
 							<td>{description}</td>
 							<td>
 								{assigneeUserId == null
 									? 'Unassigned'
-									: usersById[assigneeUserId]?.name}
+									: users[assigneeUserId]?.name}
 							</td>
 						</tr>
 					))}
 				</tbody>
-			</table>
+			</Table>
 		</main>
 	)
 }

islands/Dashboard.tsx

@@ -0,0 +1,155 @@
+import { Todo, User, UserWithTodos } from '@homeman/models.ts'
+import { Signal, useSignal } from '@preact/signals'
+import { TodoList } from '@homeman/islands/TodoList.tsx'
+import { Dialog } from '@homeman/components/Dialog.tsx'
+import { Label } from '@homeman/components/Label.tsx'
+import { Input } from '@homeman/components/Input.tsx'
+import { Avatar } from '@homeman/components/Avatar.tsx'
+import { Button } from '@homeman/components/Button.tsx'
+import { JSX } from 'preact'
+
+interface Props {
+	users: Record<string, UserWithTodos>
+	unassignedTodos: Todo[]
+}
+
+const unassignedUserPlaceholder: User = {
+	id: '',
+	createdAt: new Date(),
+	name: 'Shared',
+	avatarUrl: 'http://placekitten.com/512/512',
+	color: '888888',
+}
+
+interface UserSelectButtonProps extends JSX.HTMLAttributes<HTMLInputElement> {
+	user: User
+}
+
+function UserSelectButton(
+	{ user: { id, name, avatarUrl, color }, tabindex, ...props }:
+		UserSelectButtonProps,
+) {
+	const eid = `assigneeUserId_${id}`
+	return (
+		<>
+			<input
+				aria-hidden='true'
+				type='radio'
+				class='peer sr-only'
+				id={eid}
+				name='assigneeUserId'
+				value={id}
+				{...props}
+			/>
+			<Label
+				for={eid}
+				style={`border-color: #${color};`}
+				tabindex={tabindex}
+				className='cursor-pointer peer-checked:border-t-2 peer-checked:bg-gray-500/20 hover:bg-gray-500/25 rounded p-2'
+				role='button'
+			>
+				<Avatar
+					className='mb-2'
+					src={avatarUrl}
+				/>
+				<span
+					style={`color: #${color};`}
+					class='font-semibold text-center'
+				>
+					{name}
+				</span>
+			</Label>
+		</>
+	)
+}
+
+export default function Dashboard({ users, unassignedTodos }: Props) {
+	const todoAssignUserId: Signal<string | null> = useSignal(null)
+	const showAddTodoDialog = useSignal(false)
+
+	const unassignedUser: UserWithTodos = {
+		...unassignedUserPlaceholder,
+		assignedTodos: unassignedTodos,
+	}
+
+	return (
+		<main class='flex flex-col'>
+			<Dialog
+				headerTitle='Add todo'
+				show={showAddTodoDialog.value}
+				onClose={() => showAddTodoDialog.value = false}
+			>
+				<form
+					class='p-4 gap-4 flex flex-col'
+					action='/api/todo'
+					method='post'
+					encType='multipart/form-data'
+				>
+					<Label for='description'>
+						Description
+						<Input autofocus name='description' />
+					</Label>
+					<span>
+						Assignee
+						<ul class='flex gap-2'>
+							<li>
+								<UserSelectButton
+									checked={todoAssignUserId.value == null}
+									tabindex={0}
+									user={unassignedUser}
+								/>
+							</li>
+							{Object.values(users).map(
+								(user) => {
+									return (
+										<li>
+											<UserSelectButton
+												checked={todoAssignUserId.value == user.id}
+												user={user}
+											/>
+										</li>
+									)
+								},
+							)}
+						</ul>
+					</span>
+					<footer class='flex justify-end gap-2'>
+						<Button
+							type='button'
+							onClick={() => showAddTodoDialog.value = false}
+						>
+							Cancel
+						</Button>
+						<Input type='submit' value='Save' />
+					</footer>
+				</form>
+			</Dialog>
+			<h1 class='p-5 border-b-2 border-stone-500/20 text-2xl'>
+				Todos
+			</h1>
+			<ul class='p-4 relative flex overflow-x-scroll max-w-screen'>
+				<li>
+					<TodoList
+						onNewButtonClicked={() => {
+							console.log('shared new')
+							showAddTodoDialog.value = true
+							todoAssignUserId.value = null
+						}}
+						user={unassignedUser}
+					/>
+				</li>
+				{Object.values(users).map((u) => (
+					<li>
+						<TodoList
+							onNewButtonClicked={() => {
+								showAddTodoDialog.value = true
+								todoAssignUserId.value = u.id
+							}}
+							user={u}
+						/>
+					</li>
+				))}
+			</ul>
+		</main>
+	)
+}

islands/TodoList.tsx

@@ -0,0 +1,74 @@
+import { Todo, UserWithTodos } from '@homeman/models.ts'
+import { JSX } from 'preact'
+import { Button } from '@homeman/components/Button.tsx'
+import { Avatar } from '@homeman/components/Avatar.tsx'
+
+export interface Props {
+	user: UserWithTodos
+	onNewButtonClicked: JSX.MouseEventHandler<HTMLButtonElement>
+}
+
+export function TodoList(
+	{ onNewButtonClicked, user: { avatarUrl, assignedTodos, name, color } }:
+		Props,
+) {
+	const todoItem = (
+		{ id, doneAt, className, description, hideDone }:
+			& Pick<Todo, 'description' | 'id' | 'doneAt'>
+			& {
+				className?: string
+				hideDone?: boolean
+			},
+	) => (
+		<li
+			style={`border-color: #${color}`}
+			class={`${className || ''} ${
+				hideDone ? '' : 'border-l-4'
+			} p-4 rounded drop-shadow-lg bg-white dark:bg-stone-900 flex flex-col gap-2`}
+		>
+			{JSON.stringify(doneAt)}
+			<span class='text-xl'>{description}</span>
+			{(hideDone || doneAt != null) ? '' : (
+				<Button
+					onClick={async () => {
+						await fetch('/api/todo/done', {
+							method: 'POST',
+							body: JSON.stringify({ id }),
+						})
+						// TODO: remove the todoitem?
+						// TODO: confetti
+					}}
+				>
+					Done
+				</Button>
+			)}
+		</li>
+	)
+	return (
+		<div class='p-2 w-1/4 min-w-[15rem] relative flex flex-col grow-0'>
+			<Avatar
+				className='mb-2'
+				src={avatarUrl != null ? avatarUrl : 'https://placehold.co/512x512'}
+				title={`${name}'s avatar`}
+			/>
+			<span style={`color: #${color};`} class='font-semibold text-center'>
+				{name}
+			</span>
+			<button
+				class='mt-4 mb-4 text-left w-full px-2 py-1 rounded-lg border-[1px] text-stone-500 border-stone-500 opacity-50 hover:opacity-100'
+				onClick={onNewButtonClicked}
+			>
+				+ New
+			</button>
+			<ul class='flex flex-col gap-y-4'>
+				{assignedTodos.length < 1
+					? todoItem({
+						description: 'All clear! 🎉',
+						className: 'text-center',
+						hideDone: true,
+					})
+					: assignedTodos.map(todoItem)}
+			</ul>
+		</div>
+	)
+}

routes/api/todo.ts

@@ -1,27 +1,71 @@
 import { Handlers } from '$fresh/server.ts'
 import { db, Todo, TodoModel } from '@homeman/models.ts'
 import { ulid } from 'https://deno.land/x/ulid@v0.3.0/mod.ts'
+import { z } from 'https://deno.land/x/zod@v3.21.4/mod.ts'
 
-const TodoCreate = TodoModel.omit({ id: true, createdAt: true })
+const TodoPayload = TodoModel.partial({ id: true }).omit({ createdAt: true })
+type TodoPayload = z.infer<typeof TodoPayload>
+
+async function createOrUpdate(todo: TodoPayload) {
+	if (!todo.id) {
+		const newTodo: Todo = {
+			...todo,
+			id: ulid(),
+			createdAt: new Date(),
+		}
+		return await db.todos.create({ data: newTodo })
+	} else {
+		return await db.todos.update({ where: { id: todo.id }, data: todo })
+	}
+}
 
 export const handler: Handlers<Todo | null> = {
 	async POST(req, _ctx) {
-		const todo = TodoCreate.parse(await req.json())
+		if (req.headers.get('content-type')?.includes('json')) {
-		const newTodo: Todo = { ...todo, id: ulid(), createdAt: new Date() }
+			const result = await createOrUpdate(
-		const result = await db.todos.create({ data: newTodo })
+				TodoPayload.parse(await req.json()),
-		return new Response(JSON.stringify(result))
+			)
-	},
+			return new Response(JSON.stringify(result))
-	async PUT(req, _ctx) {
+		} else {
-		const todo = TodoModel.parse(await req.json())
+			const form = await req.formData()
-		const result = await db.todos.update({ data: todo })
+			const id = form.get('id')?.toString()
-		return new Response(JSON.stringify(result))
+
+			const doneAt = form.get('doneAt')
+			console.log('todo POST doneAt:', doneAt)
+
+			const todo = TodoPayload.parse({
+				id: id,
+				emoji: form.get('emoji')?.toString() || null,
+				doneAt: form.get('doneAt')?.toString() || null,
+				description: form.get('description')?.toString(),
+				assigneeUserId: form.get('assigneeUserId')?.toString(),
+			})
+
+			if (!id) {
+				delete todo.id
+			}
+
+			await createOrUpdate(todo)
+
+			const url = new URL(req.url)
+			url.pathname = '/'
+			return Response.redirect(url, 303)
+		}
 	},
 	async DELETE(req, _ctx) {
-		const todoData = TodoModel.pick({ id: true }).parse(await req.json())
+		// TODO: form or query params or json
+		let data
+		if (req.headers.get('content-type')?.includes('json')) {
+			data = await req.json()
+		} else {
+			data = { id: new URL(req.url).searchParams.get('id') }
+		}
+		const todoData = TodoModel.pick({ id: true }).parse(data)
 		const result = await db.todos.delete({ where: todoData })
 		return new Response(JSON.stringify(result))
 	},
 	async GET(req, _ctx) {
+		// TODO: json or query params
 		const data = await req.json().catch(() => {})
 		const todoData = TodoModel.pick({ id: true }).safeParse(data)
 		if (todoData.success) {

routes/api/todo/done.ts

@@ -0,0 +1,14 @@
+import { Handlers } from '$fresh/server.ts'
+import { db, TodoModel } from '@homeman/models.ts'
+
+const Model = TodoModel.pick({ id: true })
+
+export const handler: Handlers = {
+	async POST(req, _ctx) {
+		const { id } = Model.parse(await req.json())
+		const todo = await db.todos.findFirst({ where: { id } })
+		todo.doneAt = new Date()
+		const newTodo = await db.todos.update({ where: { id }, data: todo })
+		return new Response(JSON.stringify(newTodo))
+	},
+}

routes/api/user.ts

@@ -3,98 +3,66 @@ import { db, User, UserModel } from '@homeman/models.ts'
 import { ulid } from 'https://deno.land/x/ulid@v0.3.0/mod.ts'
 import { z } from 'https://deno.land/x/zod@v3.21.4/mod.ts'
 
-const UserCreate = UserModel.omit({ id: true, createdAt: true })
+const UserPayload = UserModel.partial({ id: true }).omit({ createdAt: true })
-type UserCreate = z.infer<typeof UserCreate>
+type UserPayload = z.infer<typeof UserPayload>
+
+async function createOrUpdate(user: UserPayload) {
+	if (user.color && user.color[0] == '#') {
+		user.color = user.color.substring(1)
+	}
+	if (!user.id) {
+		const newUser: User = { ...user, id: ulid(), createdAt: new Date() }
+		return await db.users.create({ data: newUser })
+	} else {
+		return await db.users.update({ where: { id: user.id }, data: user })
+	}
+}
 
 export const handler: Handlers<User | null> = {
 	async POST(req, _ctx) {
-		// handle json or form posts
-		let user: UserCreate
-		let redirectInstead = false
-		const newId = ulid()
 		if (req.headers.get('content-type')?.includes('json')) {
-			user = UserCreate.parse(req.json())
+			const result = await createOrUpdate(UserPayload.parse(await req.json()))
+			return new Response(JSON.stringify(result))
 		} else {
-			redirectInstead = true
 			const form = await req.formData()
-			const avatarFile = form.get('avatar') as File
+			const id = form.get('id')?.toString()
-			if (!avatarFile) {
+
+			const avatarFile = form.get('avatar') as (File | null)
+			// validate png/jpg/webp?
+			if (!avatarFile && !id) {
 				throw new Error('invalid avatar file')
 			}
 
-			// TODO: validate png/jpg/webp?
+			const user = UserPayload.parse({
-			console.log(avatarFile.type)
+				id: id,
-			await Deno.mkdir('./static/uploads', { recursive: true })
-			const name = `${newId}-${avatarFile.name.replaceAll('/', '')}`
-			const localAvatarFile = await Deno.open(`./static/uploads/${name}`, {
-				create: true,
-				write: true,
-			})
-			await avatarFile.stream().pipeTo(localAvatarFile.writable)
-
-			user = UserCreate.parse({
 				name: form.get('name')?.toString(),
-				avatarUrl: `/uploads/${name}`,
 				color: form.get('color')?.toString(),
+				avatarUrl: '',
 			})
-		}
+			if (!id) {
-
+				delete user.id
-		// post processing
-		if (user.color && user.color[0] == '#') {
-			user.color = user.color.substring(1)
-		}
-
-		const newUser: User = { ...user, id: newId, createdAt: new Date() }
-		const result = await db.users.create({ data: newUser })
-		if (redirectInstead) {
-			const url = new URL(req.url)
-			url.pathname = '/admin'
-			return Response.redirect(url, 303)
-		} else {
-			return new Response(JSON.stringify(result))
-		}
-	},
-	async PUT(req, _ctx) {
-		// TODO: form or json
-		let model = UserModel.omit({ createdAt: true }).partial({ avatarUrl: true })
-		let user: z.infer<typeof model>
-		let redirectInstead = false
-		if (req.headers.get('content-type')?.includes('json')) {
-			// TODO: ensure missing fields don't get set to null?
-			user = model.parse(req.json())
-		} else {
-			redirectInstead = true
-			const form = await req.formData()
-			user = model.parse({
-				id: form.get('id')?.toString(),
-				name: form.get('name')?.toString(),
-				avatarUrl: null,
-				color: form.get('color')?.toString(),
-			})
-			const avatarFile = form.get('avatar') as (File | null)
-			if (!avatarFile) {
-				user.avatarUrl =
-					(await db.users.findFirst({ where: { id: user.id } })).avatarUrl
 			} else {
-				// validate png/jpg/webp?
+				const curUser = await db.users.findFirst({ where: { id: id } })
-				console.log(avatarFile.type)
+				user.avatarUrl = curUser.avatarUrl
+			}
+
+			if (avatarFile) {
 				await Deno.mkdir('./static/uploads', { recursive: true })
-				const name = `${user.id}-${avatarFile.name.replaceAll('/', '')}`
+				// TODO: id will be undefined here
+				const name = `${id}-${avatarFile.name.replaceAll('/', '')}`
 				const localAvatarFile = await Deno.open(`./static/uploads/${name}`, {
 					create: true,
 					write: true,
 				})
 				await avatarFile.stream().pipeTo(localAvatarFile.writable)
+				user.avatarUrl = `/uploads/${name}`
 			}
-		}
 
-		const result = await db.users.update({ data: user })
+			await createOrUpdate(user)
-		if (redirectInstead) {
+
 			const url = new URL(req.url)
 			url.pathname = '/admin'
 			return Response.redirect(url, 303)
-		} else {
-			return new Response(JSON.stringify(result))
 		}
 	},
 	async DELETE(req, _ctx) {

routes/index.tsx

@@ -1,23 +1,19 @@
 import { Handlers, PageProps } from '$fresh/server.ts'
-import { db, Todo, User, UserWithTodos } from '@homeman/models.ts'
+import { db, Todo, UserWithTodos } from '@homeman/models.ts'
-import { TodoList } from '@homeman/components/TodoList.tsx'
+import Dashboard from '@homeman/islands/Dashboard.tsx'
-
-const unassignedUserPlaceholder: User = {
-	id: '',
-	createdAt: new Date(),
-	name: 'Shared',
-	avatarUrl: 'http://placekitten.com/512/512',
-	color: '888888',
-}
 
 interface Data {
-	users: UserWithTodos[]
+	users: Record<string, UserWithTodos>
 	unassignedTodos: Todo[]
 }
 
 export const handler: Handlers = {
 	async GET(_req, ctx) {
-		const users = await db.users.findMany({ include: { assignedTodos: true } })
+		const users = Object.fromEntries(
+			(await db.users.findMany({ include: { assignedTodos: true } })).map(
+				(u) => [u.id, u],
+			),
+		)
 		const unassignedTodos = await db.todos.findMany({
 			where: { assigneeUserId: null },
 		})
@@ -25,28 +21,6 @@ export const handler: Handlers = {
 	},
 }
 
-export default function Home(
+export default function Home({ data }: PageProps<Data>) {
-	{ data: { users, unassignedTodos } }: PageProps<Data>,
+	return <Dashboard {...data} />
-) {
-	const unassignedUser: UserWithTodos = {
-		...unassignedUserPlaceholder,
-		assignedTodos: unassignedTodos,
-	}
-	return (
-		<main class='flex flex-col'>
-			<h1 class='p-5 border-b-2 border-stone-500/20 text-2xl'>
-				Todos
-			</h1>
-			<ul class='p-4 relative flex overflow-x-scroll max-w-screen'>
-				<li>
-					<TodoList user={unassignedUser} />
-				</li>
-				{users.map((u) => (
-					<li>
-						<TodoList user={u} />
-					</li>
-				))}
-			</ul>
-		</main>
-	)
 }