feat(client): add input for manual test (#29)

client/components/Route/List/ItemWithParams.vue

@@ -4,7 +4,7 @@
       <p>Route: <span class="font-bold">{{ routeInfo.route }}</span> -- Hydration failed time : {{ totalFailedTime }} </p>
     </template>
     <template v-if="routeInfo.paths.length">
-      <RouteListItemWithParamsItem v-for="path in routeInfo.paths" :key="path.path" class="flex justify-between w-full pl-5" :route="path" />
+      <RouteListItemWithParamsItem v-for="path in routeInfo.paths" :key="path.path" class="flex justify-between w-full pl-5 my-2" :route="path" />
     </template>
     <p v-else ml-5>
       There's no path available, try to test a page that satisfies {{ routeInfo.route }}

client/components/TestingInput.vue

@@ -0,0 +1,35 @@
+<template>
+  <div flex gap-2>
+    <NButton :disabled="isTesting" @click="test">
+      <span v-if="!isTesting">
+        Test
+      </span>
+      <Icon v-else name="line-md:loading-twotone-loop" />
+    </NButton>
+    <NTextInput v-model="text">
+      <template #icon>
+        <NButton rounded-xl p-1 @click="reset">
+          <Icon name="maki:cross-11" />
+        </NButton>
+      </template>
+    </NTextInput>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import useTestHydration from '~/composables/useTestHydration'
+
+const text = ref('')
+
+const { isTesting, testPath } = useTestHydration()
+
+function reset () {
+  text.value = ''
+}
+
+function test () {
+  const path = text.value.startsWith('/') ? text.value : '/' + text.value
+  testPath(path)
+}
+</script>

client/pages/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <NavHeader class="mb-3" />
+  <NavHeader class="mb-3">
+    <template #prepend>
+      <TestingInput />
+    </template>
+  </NavHeader>
   <div class="flex flex-col gap-5">
     <div>
       <div class="mb-3 text-xl">