Next steps

src/screens/CreateScreen.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { fetch } from '@tauri-apps/plugin-http';
+import { router } from '../router.ts';
+import { Task } from '../types.ts';
+
+const handleSubmit = async(e: Event) => {
+  const data = new FormData(e.target as HTMLFormElement);
+  const task: Partial<Task> = Object.fromEntries(data)
+
+  const nextId = await fetch(
+      'https://automation.deep-node.de/webhook/d49dde4c-530d-46ee-8205-d1357563ac16',
+      { method: 'GET', headers: { 'Content-Type': 'application/json', 'Authorization': 'Basic cGF1bDoxMG1hYmF1MTU=', }}
+  ).then((response) => response.json()).then((json) => json.nextId as number).catch(() => null);
+
+  if (!nextId) return;
+  task.id_ = nextId;
+  task.logs = [];
+
+  await fetch(
+      'https://automation.deep-node.de/webhook/e5880167-9322-4d7b-8a38-e06bae8a7734/list',
+      { method: 'PUT', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ tasks: [task] } )}
+  );
+  await router.push('/');
+}
+</script>
+
+<template>
+  <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" />
+      </fieldset>
+      <button class="btn btn-primary">Submit</button>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/screens/ListScreen.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { fetch } from '@tauri-apps/plugin-http';
+import { computed, onMounted, ref } from 'vue';
+import { Task, TaskStatus } from '../types.ts';
+import { PhCaretDown, PhCaretUp, PhCheckSquare, PhDotsThree, PhPlay, PhSquare } from '@phosphor-icons/vue';
+
+const rawTasks = ref<Task[]>([]);
+
+onMounted(async () => {
+  rawTasks.value = await fetch('https://automation.deep-node.de/webhook/e5880167-9322-4d7b-8a38-e06bae8a7734/list', { method: 'GET', headers: { 'Content-Type': 'application/json'} })
+      .then(response => response.json())
+      .then((data: { tasks: Task[] }) => rawTasks.value = data.tasks ?? [])
+      .catch(() => []);
+})
+
+const visibleTasks = computed(() => rawTasks.value.filter(task => !task.archived))
+
+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)"
+            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" >
+          <li class="list-row"  v-for="task in tasks" :key="task.id">
+            <div class="flex items-center justify-center">
+              <PhSquare v-if="task.status === TaskStatus.WAIT" :size="20" />
+              <PhCheckSquare v-else-if="task.status === TaskStatus.DONE" :size="20" weight="fill" class="text-success" />
+              <PhSquare v-else-if="task.status === TaskStatus.FLAG" :size="20" weight="fill" class="text-warning" />
+              <PhPlay v-else-if="task.status === TaskStatus.WIP" :size="20" weight="fill" class="text-info" />
+            </div>
+            <div class="flex items-center gap-2">
+              <div>{{task.title}}</div>
+
+            </div>
+            <button class="btn btn-square btn-ghost btn-sm">
+              <PhDotsThree :size="24" weight="regular" />
+            </button>
+          </li>
+
+
+        </ul>
+      </Transition>
+    </div>
+
+  </div>
+
+</div>
+</template>
+
+<style scoped>
+
+</style>

src/screens/SettingsScreen.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div>
+  Settings SCREEN
+</div>
+</template>
+
+<style scoped>
+
+</style>