- 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/App.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { PhCheckSquareOffset, PhListChecks, PhSliders } from '@phosphor-icons/vue';
-import { useRouter } from 'vue-router';
-import { computed } from 'vue';
-const router = useRouter();
-const currentPath = computed(() => router.currentRoute.value.path);
+import { PhCheckSquareOffset, PhListChecks, PhSliders } from '@phosphor-icons/vue'
+import { computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useTasks } from './composables/useTasks.ts'
+
+const { fetchTasks } = useTasks()
+const router = useRouter()
+const currentPath = computed(() => router.currentRoute.value.path)
+onMounted(fetchTasks)
 </script>
 
 <template>
   <div class="overflow-hidden">
-
     <main class="pb-40 overflow-y-scroll h-screen">
       <RouterView />
     </main>
@@ -26,5 +29,4 @@ const currentPath = computed(() => router.currentRoute.value.path);
       </RouterLink>
     </div>
   </div>
-
 </template>