Basic Task Display

src/pages/TaskPage.vue

@@ -1,15 +1,19 @@
 <template>
   <toolbar-component pageTitle="Tasks" />
   <q-page padding>
-    <TaskListComponent :tasks="taskStore.taskHierarchy" />
+    <TaskListComponent v-if="$q.screen.lt.sm" :tasks="taskStore.tasks" />
+    <TaskTableComponent v-else :tasks="taskStore.tasks" />
   </q-page>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 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>