1<script lang="ts">
 2  import TaskItem from "./TaskItem.svelte";
 3
 4  let {
 5    title,
 6    tasks = [],
 7    openOnLoad = false,
 8  }: { tasks: Task[]; title: string; openOnLoad?: boolean } = $props();
 9  let open = $state(openOnLoad);
10
11  let sortedTasks = $derived(
12    tasks.sort((taskA, taskB) => {
13      if (!taskA.dueDate) return -1;
14      else if (!taskB.dueDate) return 1;
15      else return taskA.dueDate.getTime() - taskB.dueDate.getTime();
16    })
17  );
18</script>
19
20<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
21<details class="collapse" bind:open>
22  <summary class="font-semibold collapse-title min-h-0 py-2">
23    {#if open}
24      ◦{:else}
25      •{/if}
26    {title}</summary
27  >
28  <ul class="py-4 list collapse-content">
29    {#each sortedTasks as task (task.id)}
30      <TaskItem {task} />
31    {/each}
32  </ul>
33</details>