fix(front): accidentally and surprisingly, the bug where entering a string in pagination led to page=Nan is crushed.

front/src/components/ui/Pagination.vue

@@ -20,10 +20,11 @@ const page = defineModel<number>('page', {
   validator: (value: number) => value > 0
 })
 
-const goTo = ref<number>(1)
+const goTo = ref<number | string>('' as const)
 
 const range = (start: number, end: number) => Array.from({ length: end - start + 1 }, (_, i) => i + start)
 
+/* Why? What? */
 const renderPages = computed(() => {
   const start = range(2, 5)
   const end = range(pages - 4, pages - 1)
@@ -47,12 +48,25 @@ const { width } = useElementSize(pagination)
 const isSmall = isMobileView(width)
 
 const setPage = () => {
-  if (goTo.value == null) return
-  page.value = Math.min(pages, Math.max(1, goTo.value))
+  if (goTo.value === '') return
+  page.value = pageFromInput(goTo.value)
 }
 
-watch(page, (newPage) => {
-  goTo.value = newPage
+watch(goTo, (potentiallyWrongValue) =>
+  goTo.value =
+  typeof potentiallyWrongValue === 'string' ? ''
+    : pageFromInput(potentiallyWrongValue)
+  )
+
+const pageFromInput = (input: string | number): number  =>
+  input === 'NaN' ? pageFromInput('')
+  : typeof input === 'string' ? pageFromInput(parseInt(input))
+  : Number.isNaN(input) ? 1
+  : Math.min(Math.max(1, input), pages)
+
+/* When user changes page, the "GoTo" input should be emptied */
+watch(page, (_) => {
+  goTo.value = ''
 })
 </script>
 
@@ -108,18 +122,16 @@ watch(page, (newPage) => {
         </Button>
       </li>
     </ul>
-
-<!-- TODO: Move number input functionality into `Input` component -->
+<!-- \d{1,100} -->
     <div class="goto">
       {{ t('vui.go-to') }}
       <Input
         :placeholder="page.toString()"
         @click.stop
         @keyup.enter="setPage"
-        @keydown="preventNonNumeric"
         inputmode="numeric"
         pattern="[0-9]*"
-        v-model="goTo"
+        v-model.number="goTo"
       />
     </div>
   </nav>