Expand admin table todo columns

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>

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'