add navigation in history

public/icons/arrow-left.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-narrow-left" width="24" height="24" 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="M5 12l14 0" />
+  <path d="M5 12l4 4" />
+  <path d="M5 12l4 -4" />
+</svg>

public/icons/arrow-right.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-narrow-right" width="24" height="24" 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="M5 12l14 0" />
+  <path d="M15 16l4 -4" />
+  <path d="M15 8l4 4" />
+</svg>

src/views/task/TaskHistory.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
+import EstimationTimeArrival from '@/components/EstimationTimeArrival.vue'
 import { adaptStepsToTextarea } from '@/modules/task/infra/adaptStepsToTextarea'
 import { useTaskStore } from '@/modules/task/stores/useTask.store'
-import { computed } from 'vue'
+import { useMagicKeys, whenever } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 const props = defineProps<{
   id: string
@@ -9,16 +14,64 @@ const props = defineProps<{
 const taskStore = useTaskStore()
 
 const task = computed(() => taskStore.getTask(props.id))
+const currentIndex = ref(0)
 const prev = computed(() =>
-  adaptStepsToTextarea(task.value?.stepHistory[0] || [])
+  adaptStepsToTextarea(task.value?.stepHistory[currentIndex.value] || [])
 )
 const current = computed(() =>
-  adaptStepsToTextarea(task.value?.stepHistory[1] || [])
+  adaptStepsToTextarea(task.value?.stepHistory[currentIndex.value + 1] || [])
 )
+const goToPrev = () => {
+  currentIndex.value = Math.max(0, currentIndex.value - 1)
+}
+
+const goToNext = () => {
+  if (!task.value?.stepHistory) {
+    return
+  }
+
+  currentIndex.value = Math.min(
+    task.value?.stepHistory.length - 2 || 0,
+    currentIndex.value + 1
+  )
+}
+
+const isPrevDisabled = computed(() => currentIndex.value === 0)
+const isNextDisabled = computed(
+  () =>
+    task.value?.stepHistory &&
+    currentIndex.value === task.value?.stepHistory.length - 2
+)
+
+const { n, p } = useMagicKeys()
+
+whenever(p, () => {
+  goToPrev()
+})
+
+whenever(n, () => {
+  goToNext()
+})
 </script>
 
 <template>
   <div v-if="task" class="task-history">
+    <h1 class="title">
+      <button @click="router.go(-1)" class="button is-white">
+        <img src="/icons/left.svg" alt="go back" />
+      </button>
+      {{ task.title }}
+    </h1>
+    <h2 class="subtitle">
+      <estimation-time-arrival :estimation="task.totalEstimation" />
+    </h2>
+    <div class="buttons" v-if="!isPrevDisabled || !isNextDisabled">
+      <button class="button" :disabled="isPrevDisabled" @click="goToPrev">
+        <img src="/icons/arrow-left.svg" alt="go back" /></button
+      ><button class="button" :disabled="isNextDisabled" @click="goToNext">
+        <img src="/icons/arrow-right.svg" alt="go back" />
+      </button>
+    </div>
     <Diff
       v-if="task.stepHistory.length > 1"
       mode="split"

src/views/task/TaskView.vue

@@ -40,6 +40,16 @@ const { canShareTask, taskCopied, shareTask } = useCopyRecord(task)
         class="button is-primary is-light"
         >start session</router-link
       >
+      <router-link
+        :to="{
+          name: 'history-task',
+          params: {
+            id
+          }
+        }"
+        class="button"
+        >View history</router-link
+      >
       <router-link
         :to="{
           name: 'edit-task',
@@ -85,16 +95,6 @@ const { canShareTask, taskCopied, shareTask } = useCopyRecord(task)
       </h2>
       <task-record-preview :task-id="id" />
       <record-step-table :id="id" :steps="task.steps" />
-      <router-link
-        :to="{
-          name: 'history-task',
-          params: {
-            id
-          }
-        }"
-        class="button"
-        >View history</router-link
-      >
     </div>
   </div>
   <task-not-found v-else />