From 93302dc1b4db5b0c65fb6a2b17b304d6db4d19c3 Mon Sep 17 00:00:00 2001
From: Daniel Flanagan <daniel@lyte.dev>
Date: Wed, 17 Jan 2024 21:14:33 -0600
Subject: [PATCH] Expand admin table todo columns

---
 components/Table.tsx |  2 +-
 islands/Admin.tsx    | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/Table.tsx b/components/Table.tsx
index 2c7fc95..f5c1cac 100644
--- a/components/Table.tsx
+++ b/components/Table.tsx
@@ -6,7 +6,7 @@ export function Table(
 	return (
 		<table
 			{...props}
-			class={`border-separate [border-spacing:1.25rem] text-left ${className}`}
+			class={`border-separate [border-spacing:0.50rem] text-left ${className}`}
 		>
 			{children}
 		</table>
diff --git a/islands/Admin.tsx b/islands/Admin.tsx
index 5838a6b..8b2bf47 100644
--- a/islands/Admin.tsx
+++ b/islands/Admin.tsx
@@ -103,7 +103,7 @@ export function Admin({ users, todos }: Props) {
 					userData={editUser.value}
 				/>
 			</Dialog>
-			<SectionHead text={`Users (${users.length})`}>
+			<SectionHead text={`Users (${Object.keys(users).length})`}>
 				<Button onClick={() => showAddUserDialog.value = true}>
 					<PlusOutline class='w-6 h-6' />
 				</Button>
@@ -126,7 +126,7 @@ export function Admin({ users, todos }: Props) {
 								<td>
 									{avatarUrl == null
 										? 'None'
-										: <Avatar className='h-16 w-16' src={avatarUrl} />}
+										: <Avatar className='h-[64px] w-[64px]' src={avatarUrl} />}
 								</td>
 								<td style={`color: #${color}`}>
 									#{color}
@@ -158,12 +158,14 @@ export function Admin({ users, todos }: Props) {
 					<tr>
 						<th>Description</th>
 						<th>Assignee</th>
+						<th>Done At</th>
+						<th>Emoji</th>
 						<th>Actions</th>
 					</tr>
 				</thead>
 				<tbody>
 					{Object.entries(todos).map((
-						[_index, { id, description, assigneeUserId }],
+						[_index, { id, emoji, doneAt, description, assigneeUserId }],
 					) => (
 						<tr>
 							<td>{description}</td>
@@ -178,6 +180,8 @@ export function Admin({ users, todos }: Props) {
 									? 'Unassigned'
 									: users[assigneeUserId]?.name}
 							</td>
+							<td>{doneAt == null ? 'Not Done' : doneAt.toLocaleString()}</td>
+							<td>{emoji || 'No Emoji'}</td>
 							<td>
 								<Button
 									title='Delete'