Feat/initial plan (#6)

* chore: upgrade libs

* fix outdated tests

* init edit steps form

* tasks have now initialPlan

* simpler to directly have an history and put initialPlan and steps has getters

* consistent test script names

* display initial plan to task view

* display initial if only it exists (next when only it changes

* display initial plan only if it chanegd

src/modules/task/components/EditStepsForm.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { Stepable } from '@/modules/task/interfaces/stepable'
+import { ref, watch } from 'vue'
+import StepInput from './StepInput.vue'
+
+const props = defineProps<{
+  isActive: boolean
+  initialSteps: Stepable[]
+}>()
+const emits = defineEmits<{
+  (event: 'submit', steps: Stepable[]): void
+  (event: 'close'): void
+}>()
+const steps = ref<Stepable[]>(props.initialSteps)
+
+watch(props.initialSteps, (initialSteps) => {
+  steps.value = initialSteps
+})
+
+const save = () => {
+  emits('submit', steps.value)
+}
+</script>
+
+<template>
+  <div class="modal" :class="{ 'is-active': isActive }">
+    <div class="modal-background" @click="$emit('close')"></div>
+    <div class="edit-steps-form modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">Edit steps</p>
+        <button
+          class="delete"
+          aria-label="close"
+          @click="$emit('close')"
+        ></button>
+      </header>
+      <section class="modal-card-body">
+        <step-input v-if="isActive" v-model="steps" size="small" />
+      </section>
+      <footer class="modal-card-foot">
+        <button class="button is-primary" @click="save">add</button>
+        <button class="button" @click="$emit('close')">cancel</button>
+      </footer>
+    </div>
+  </div>
+</template>