Expand better

islands/TodoList.tsx

@@ -2,6 +2,8 @@ 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'
+import { ChevronDoubleDownOutline, ChevronDownOutline } from 'preact-heroicons'
+import { ChevronDownMiniSolid } from 'preact-heroicons'
 
 export interface Props {
 	user: UserWithTodos
@@ -90,14 +92,15 @@ export function TodoList(
 			</ul>
 			{doneTodos.length > 0
 				? (
-					<summary class='text-gray-500 mt-4'>
-						+{doneTodos.length} completed todos
-						<details class='cursor-pointer'>
-							<ul class='flex flex-col gap-y-4 mt-4'>
-								{doneTodos.map(todoItem)}
-							</ul>
-						</details>
-					</summary>
+					<details class='text-gray-500 [&_svg]:open:-rotate-180'>
+						<summary class='cursor-pointer marker:content-[""] flex justify-between hover:bg-gray-500/20 p-4 rounded mt-4'>
+							<span>+{doneTodos.length} completed todos</span>
+							<ChevronDownMiniSolid className='w-6 h-6' />
+						</summary>
+						<ul class='flex flex-col gap-y-4 mt-2'>
+							{doneTodos.map(todoItem)}
+						</ul>
+					</details>
 				)
 				: ''}
 		</div>