fix: dont show completed part if not completed task

resources/ts/components/TaskList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onBeforeMount } from "vue";
+import { ref, onBeforeMount, computed } from "vue";
 import type { Task } from "@/types";
 import { getTasks, createTask, deleteTask } from "@/api/tasks";
 import { CirclePlus } from "@lucide/vue";
@@ -13,6 +13,8 @@ const showLastChecked = ref<boolean>(false);
 const showNextReset = ref<boolean>(false);
 const separateCompleted = ref<boolean>(false);
 
+const hasCompleted = computed<boolean>(() => tasks.value.some(taskCompleted));
+
 function fetchTasks() {
     void getTasks(list.value)
         .then((data: Task[]) => {
@@ -88,7 +90,7 @@ onBeforeMount(fetchTasks);
             </div>
         </li>
     </ul>
-    <div v-if="separateCompleted" class="collapse collapse-arrow">
+    <div v-if="separateCompleted && hasCompleted" class="collapse collapse-arrow">
       <input id="completed-dropdown" type="checkbox" />
       <div class="collapse-title mb-0">Completed</div>
       <div class="collapse-content p-0">