<template>
  <toolbar-component pageTitle="Tasks" />
  <q-page padding>
    <TaskListComponent v-if="$q.screen.lt.sm" :tasks="taskStore.tasks" />
    <TaskTableComponent v-else :tasks="taskStore.tasks" />
  </q-page>
</template>

<script setup lang="ts">
import { useTaskStore } from 'stores/task';
import ToolbarComponent from 'src/components/ToolbarComponent.vue';
import TaskListComponent from 'src/components/task/TaskListComponent.vue';
import TaskTableComponent from 'src/components/task/TaskTableComponent.vue';

const taskStore = useTaskStore();

taskStore.fetchTasks(); // Fetch on mount
</script>
