- Implement ESLint with @antfu/eslint-config and apply consistent formatting across the codebase.

- Refactor `useTasks` to improve task fetching, creation, and updating logic.
- Enhance `TodoItem` and `ListScreen` with improved bindings, sorting, and category handling.
- Update dependencies and adjust task grouping in various components.

src/screens/CreateScreen.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { router } from '../router.ts';
-import { useTasks } from '../composables/useTasks.ts';
-import { Task } from '../types.ts';
+import type { Task } from '../types.ts'
+import { useTasks } from '../composables/useTasks.ts'
+import { router } from '../router.ts'
 
-const { createTask } = useTasks();
+const { createTask, tasks } = useTasks()
 
-const handleSubmit = async(e: Event) => {
-  const data = new FormData(e.target as HTMLFormElement);
+async function handleSubmit(e: Event) {
+  const data = new FormData(e.target as HTMLFormElement)
   const task: Partial<Task> = Object.fromEntries(data)
 
-  await createTask(task);
-  await router.push('/');
+  await createTask(task)
+  await router.push('/')
 }
 </script>
 
@@ -18,10 +18,14 @@ const handleSubmit = async(e: Event) => {
   <div>
     <form @submit.prevent="handleSubmit">
       <fieldset class="fieldset">
-        <legend class="fieldset-legend">What is your name?</legend>
-        <input type="text" class="input" name="title" placeholder="Type here" />
+        <legend class="fieldset-legend">
+          What is your name?
+        </legend>
+        <input type="text" class="input" name="title" placeholder="Type here">
       </fieldset>
-      <button class="btn btn-primary">Submit</button>
+      <button class="btn btn-primary">
+        Submit
+      </button>
     </form>
   </div>
 </template>

src/screens/ListScreen.vue

@@ -1,49 +1,53 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
-import { useTasks } from '../composables/useTasks.ts';
+import type { Task } from '../types.ts'
+import { PhCaretDown, PhCaretUp } from '@phosphor-icons/vue'
 
-import { Task } from '../types.ts';
-import { PhCaretDown, PhCaretUp } from '@phosphor-icons/vue';
-import TodoItem from '../components/TodoItem.vue';
+import { computed, onMounted, ref } from 'vue'
+import TodoItem from '../components/TodoItem.vue'
+import { useTasks } from '../composables/useTasks.ts'
 
-const { tasks, fetchTasks } = useTasks();
+const { tasks, fetchTasks } = useTasks()
 
 onMounted(async () => {
-  await fetchTasks();
+  await fetchTasks()
 })
 
-const visibleTasks = computed<Task[]>(() => tasks.value.filter(task => !task.archived))
+const visibleTasks = computed<Task[]>(() => tasks.value.filter(task => !task.archived).sort((a, b) => a.id_ - b.id_))
 
-const categorizedTasks = computed(() => visibleTasks.value.reduce())
-
-const collapsed = ref<string[]>([]);
+const categorizedTasks = computed(() => visibleTasks.value.reduce((acc, task) => {
+  const tag = task.tag ?? '@uncategorized'
+  acc[tag] = acc[tag] ?? []
+  acc[tag].push(task)
+  return acc
+}, {} as Record<string, Task[]>))
 
+const collapsed = ref<string[]>([])
 </script>
 
 <template>
-<div>
-  <div class="flex flex-col gap-4">
-    <div class="m-4 rounded-box border border-neutral-100 shadow-md" v-for="(tasks, category) in categorizedTasks" :key="category">
-      <div class="m-4 flex justify-between items-center">
-        <div class="badge badge-xl badge-primary">{{ category }}</div>
-        <button
-            @click="collapsed.includes(category) ? collapsed.splice(collapsed.indexOf(category), 1) : collapsed.push(category)"
+  <div>
+    <div class="flex flex-col gap-4">
+      <div v-for="(tasks, category) in categorizedTasks" :key="category" class="m-4 rounded-box border border-neutral-100 shadow-md">
+        <div class="m-4 flex justify-between items-center">
+          <div class="badge badge-xl badge-primary">
+            {{ category }}
+          </div>
+          <button
             class="btn btn-square   btn-sm"
-        >
-          <PhCaretDown :size="20" v-if="collapsed.includes(category)" />
-          <PhCaretUp :size="20" v-else />
-        </button>
-      </div>
-      <Transition name="fade">
-        <ul v-if="!collapsed.includes(category)" class="list bg-base-100 rounded-box" >
+            @click="collapsed.includes(category) ? collapsed.splice(collapsed.indexOf(category), 1) : collapsed.push(category)"
+          >
+            <PhCaretDown v-if="collapsed.includes(category)" :size="20" />
+            <PhCaretUp v-else :size="20" />
+          </button>
+        </div>
+        <Transition name="fade">
+          <ul v-if="!collapsed.includes(category)" class="list bg-base-100 rounded-box">
             <TodoItem v-for="task in tasks.sort((a, b) => a.id_ - b.id_)" :key="task.id" :task />
-        </ul>
-      </Transition>
+          </ul>
+        </Transition>
+      </div>
     </div>
-
   </div>
-
-</div>
 </template>
 
 <style scoped>