diff options
Diffstat (limited to 'src/features/surface-host/ui/TodoList.svelte')
| -rw-r--r-- | src/features/surface-host/ui/TodoList.svelte | 115 |
1 files changed, 60 insertions, 55 deletions
diff --git a/src/features/surface-host/ui/TodoList.svelte b/src/features/surface-host/ui/TodoList.svelte index b7b2183..cffefde 100644 --- a/src/features/surface-host/ui/TodoList.svelte +++ b/src/features/surface-host/ui/TodoList.svelte @@ -1,61 +1,66 @@ <script lang="ts"> - import { parseTodoPayload } from "../logic/todo"; + import { parseTodoPayload } from "../logic/todo"; - let { payload }: { readonly payload: unknown } = $props(); + let { payload }: { readonly payload: unknown } = $props(); - const data = $derived(parseTodoPayload(payload)); + const data = $derived(parseTodoPayload(payload)); </script> -{#if data !== null && data.todos.length > 0} - <ul class="flex flex-col gap-1"> - {#each data.todos as todo, i (i)} - <li class="flex items-start gap-2 rounded-box bg-base-200 px-3 py-2 text-sm"> - <!-- Status indicator --> - <span class="mt-0.5 shrink-0"> - {#if todo.status === "in_progress"} - <span class="block h-4 w-4 rounded-full bg-primary"></span> - {:else if todo.status === "completed"} - <svg - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 24 24" - fill="none" - stroke="currentColor" - stroke-width="3" - stroke-linecap="round" - stroke-linejoin="round" - class="h-4 w-4 text-success" - > - <polyline points="20 6 9 17 4 12"></polyline> - </svg> - {:else if todo.status === "cancelled"} - <svg - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 24 24" - fill="none" - stroke="currentColor" - stroke-width="3" - stroke-linecap="round" - stroke-linejoin="round" - class="h-4 w-4 text-base-content/40" - > - <line x1="18" y1="6" x2="6" y2="18"></line> - <line x1="6" y1="6" x2="18" y2="18"></line> - </svg> - {:else} - <!-- pending: empty circle --> - <span class="block h-4 w-4 rounded-full border-2 border-base-content/30"></span> - {/if} - </span> +<!-- Fixed at 30% of the viewport height so the region is consistent whether the + list is empty or overflowing — it always reserves the space and scrolls + internally (mirrors the tabs view). --> +<ul class="flex h-[30vh] flex-col gap-1 overflow-y-auto pr-1"> + {#if data !== null && data.todos.length > 0} + {#each data.todos as todo, i (i)} + <li class="flex items-start gap-2 rounded-box bg-base-200 px-3 py-2 text-sm"> + <!-- Status indicator --> + <span class="mt-0.5 shrink-0"> + {#if todo.status === "in_progress"} + <span class="block h-4 w-4 rounded-full bg-primary"></span> + {:else if todo.status === "completed"} + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="3" + stroke-linecap="round" + stroke-linejoin="round" + class="h-4 w-4 text-success" + > + <polyline points="20 6 9 17 4 12"></polyline> + </svg> + {:else if todo.status === "cancelled"} + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="3" + stroke-linecap="round" + stroke-linejoin="round" + class="h-4 w-4 text-base-content/40" + > + <line x1="18" y1="6" x2="6" y2="18"></line> + <line x1="6" y1="6" x2="18" y2="18"></line> + </svg> + {:else} + <!-- pending: empty circle --> + <span class="block h-4 w-4 rounded-full border-2 border-base-content/30"></span> + {/if} + </span> - <!-- Content --> - <span - class:flex-1={true} - class:line-through={todo.status === "completed" || todo.status === "cancelled"} - class:opacity-50={todo.status === "completed" || todo.status === "cancelled"} - > - {todo.content} - </span> - </li> - {/each} - </ul> -{/if} + <!-- Content --> + <span + class:flex-1={true} + class:line-through={todo.status === "completed" || todo.status === "cancelled"} + class:opacity-50={todo.status === "completed" || todo.status === "cancelled"} + > + {todo.content} + </span> + </li> + {/each} + {:else} + <li class="text-xs opacity-60">No tasks yet.</li> + {/if} +</ul> |