add "add steps" form

public/icons/plus.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-text-plus" width="22" height="22" viewBox="0 0 24 24" stroke-width="1.5" stroke="#4d70cb" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M19 10h-14" />
+  <path d="M5 6h14" />
+  <path d="M14 14h-9" />
+  <path d="M5 18h6" />
+  <path d="M18 15v6" />
+  <path d="M15 18h6" />
+</svg>

src/modules/record/components/RecordControls.vue

@@ -3,9 +3,11 @@ import { useTaskStore } from '@/modules/task/stores/useTask.store'
 import { toISODate } from '@/shared/types/date'
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { logicAnd } from '@vueuse/math'
-import { computed, onUnmounted } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import type { TaskRecord } from '../models/task-record'
 import { useTaskRecordStore } from '../stores/useTaskRecordStore'
+import NewStepsFormVue from '@/modules/task/components/NewStepsForm.vue'
+import type { Stepable } from '@/modules/task/interfaces/stepable'
 
 const props = defineProps<{
   taskId: string
@@ -75,6 +77,16 @@ const nextStep = () => {
   })
 }
 
+const isAddingSteps = ref(false)
+const addStepsForm = () => {
+  isAddingSteps.value = true
+}
+
+const addSteps = (steps: Stepable[]) => {
+  console.log(steps)
+  isAddingSteps.value = false
+}
+
 const activeElement = useActiveElement()
 const INPUT_MATTERS = ['INPUT', 'TEXTAREA']
 const notUsingInput = computed(
@@ -145,6 +157,9 @@ onUnmounted(() => {
         </button>
       </template>
 
+      <button class="button is-primary is-light" @click="addStepsForm">
+        <img src="/icons/plus.svg" alt="plus" />
+      </button>
       <button
         v-if="hasStarted"
         class="button is-warning"
@@ -159,6 +174,11 @@ onUnmounted(() => {
       <p><kbd>p</kbd>: pause</p>
     </div>
   </div>
+  <NewStepsFormVue
+    :is-active="isAddingSteps"
+    @close="isAddingSteps = false"
+    @submit="addSteps"
+  />
 </template>
 
 <style scoped lang="scss">

src/modules/task/components/NewStepsForm.vue

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

src/modules/task/components/StepInput.vue

@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, withDefaults } from 'vue'
 import {
   adaptStepsToTextarea,
   adaptTextareaToSteps
 } from '../infra/adaptStepsToTextarea'
 import type { Stepable } from '../interfaces/stepable'
 
-const props = defineProps<{
+const props = withDefaults(
+  defineProps<{
     modelValue: Stepable[]
-}>()
+    size?: 'large' | 'small'
+  }>(),
+  {
+    size: 'large'
+  }
+)
 
 const emit = defineEmits<{
   (event: 'update:modelValue', payload: Stepable[]): void
 }>()
 
+const rows = computed(() => (props.size === 'large' ? 15 : 5))
 const rawSteps = ref(adaptStepsToTextarea(props.modelValue))
 
 const stepsTextarea = computed({
@@ -36,7 +43,7 @@ const stepsTextarea = computed({
         id="steps"
         name="steps"
         v-model="stepsTextarea"
-        rows="15"
+        :rows="rows"
         class="textarea"
         placeholder="- step | estimation"
       ></textarea>