extract record resume in its own component

src/modules/record/components/RecordResume.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useTaskRecordMetadata } from '@/modules/record/hooks/useTaskRecordMetadata'
+import type { Recordable } from '@/modules/record/interfaces/recordable'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  record: Recordable
+  totalEstimation: number
+}>()
+
+const { duration } = useTaskRecordMetadata(props.record)
+
+const isSuperiorToEstimation = computed(() => {
+  if (!duration.value) {
+    return false
+  }
+
+  return duration.value > props.totalEstimation
+})
+</script>
+
+<template>
+  <div class="record-resume content" v-if="record.end">
+    <p
+      :class="{
+        'has-text-primary-dark': !isSuperiorToEstimation,
+        'has-text-warning-dark': isSuperiorToEstimation
+      }"
+    >
+      The task took {{ duration }} minutes instead of
+      {{ totalEstimation }} minutes.
+    </p>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.record-resume {
+}
+</style>

src/modules/record/components/TaskRecord.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import EstimationTimeArrival from '@/components/EstimationTimeArrival.vue'
+import RecordResume from '@/modules/record/components/RecordResume.vue'
 import { useTaskStore } from '@/modules/task/stores/useTask.store'
 import { formatLongDate } from '@/shared/format-date'
 import { useLoopyTitle } from '@/shared/useLoopyTitle'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { useTaskRecordMetadata } from '../hooks/useTaskRecordMetadata'
 import { useTaskRecordStore } from '../stores/useTaskRecordStore'
 import RecordControls from './RecordControls.vue'
 import RecordProgress from './RecordProgress.vue'
@@ -30,15 +30,6 @@ useLoopyTitle(task.value?.title ?? '')
 
 const record = computed(() => recordStore.getTaskRecord(props.taskId))
 const recordNotes = computed(() => recordStore.getRecordNotes(props.taskId))
-const { duration } = useTaskRecordMetadata(record)
-
-const isSuperiorToEstimation = computed(() => {
-  if (!task.value || !record.value || !duration.value) {
-    return false
-  }
-
-  return duration.value > task.value.totalEstimation
-})
 </script>
 
 <template>
@@ -75,17 +66,11 @@ const isSuperiorToEstimation = computed(() => {
         />
       </tbody>
     </table>
-    <div v-show="record && record.end" class="content">
+    <record-resume
-      <p
+      v-if="record"
-        :class="{
+      :record="record"
-          'has-text-primary-dark': !isSuperiorToEstimation,
+      :total-estimation="task.totalEstimation"
-          'has-text-warning-dark': isSuperiorToEstimation
+    />
-        }"
-      >
-        The task took {{ duration }} minutes instead of
-        {{ task.totalEstimation }} minutes.
-      </p>
-    </div>
     <div class="columns is-centered">
       <div class="column is-half">
         <textarea

src/modules/record/hooks/useTaskRecordMetadata.ts

@@ -1,9 +1,9 @@
+import type { Recordable } from '@/modules/record/interfaces/recordable'
 import { formatDiffInMinutes } from '@/shared/format-date'
 import { computed, isRef, type Ref } from 'vue'
-import type { TaskRecord } from '../models/task-record'
 
 export const useTaskRecordMetadata = (
-  record: TaskRecord | Ref<TaskRecord | null>
+  record: Recordable | Ref<Recordable | null>
 ) => {
   const taskDurations = computed(() => {
     const recordValue = isRef(record) ? record.value : record