Add manual page input to pagination

assets/styles/components.scss

@@ -800,6 +800,7 @@
   @extend .button-base;
   background-color: transparent;
   border-radius: var(--size-rounded-sm);
+  transition: filter 0s;
 
   &:focus-visible:not(&:disabled),
   &:hover:not(&:disabled),

components/ui/Pagination.vue

@@ -19,9 +19,32 @@
       }"
       class="page-number-container"
     >
-      <div v-if="item === '-'" class="has-icon">
-        <GapIcon />
-      </div>
+      <template v-if="item === '-'">
+        <input
+          v-if="field === index"
+          id="page-field"
+          :ref="`pageInput-` + index"
+          v-model="fieldValue"
+          type="text"
+          class="page-input"
+          autocomplete="false"
+          @blur="
+            () => {
+              field = null
+            }
+          "
+          @input="switchPage(fieldValue)"
+          @change="switchPage(fieldValue)"
+        />
+        <button
+          v-else
+          class="has-icon square-button button-transparent gap"
+          @click="openField(index)"
+          @focus="openField(index)"
+        >
+          <GapIcon />
+        </button>
+      </template>
       <a
         v-else
         :class="{
@@ -78,6 +101,12 @@ export default {
     },
   },
   emits: ['switch-page'],
+  data() {
+    return {
+      field: null,
+      fieldValue: this.page,
+    }
+  },
   computed: {
     pages() {
       let pages = []
@@ -102,6 +131,10 @@ export default {
         pages = Array.from({ length: this.count }, (_, i) => i + 1)
       }
 
+      if (this.field !== null && pages[this.field] !== '-') {
+        pages.splice(this.field, 0, '-')
+      }
+
       return pages
     },
   },
@@ -112,6 +145,15 @@ export default {
         this.$emit('switch-page', Math.min(Math.max(newPage, 1), this.count))
       }
     },
+    openField(index) {
+      this.field = index
+      this.fieldValue = this.page
+      this.$nextTick(() => {
+        const input = this.$refs[`pageInput-${index}`][0]
+        input.focus()
+        input.select()
+      })
+    },
   },
 }
 </script>
@@ -156,7 +198,7 @@ a {
   display: flex;
   align-items: center;
   svg {
-    width: 1em;
+    width: 1rem;
   }
 }
 
@@ -197,4 +239,26 @@ a,
     padding: 0.5rem 0;
   }
 }
+
+.square-button.gap {
+  box-shadow: none;
+  width: 3rem;
+  box-sizing: border-box;
+  margin: 0;
+  cursor: text !important;
+
+  &:hover {
+    border: 2px solid var(--color-divider);
+  }
+}
+
+.page-input {
+  background: var(--color-raised-bg);
+  width: 3rem;
+  padding: var(--spacing-card-xs);
+  min-height: 0;
+  height: 2em;
+  box-sizing: border-box;
+  text-align: center;
+}
 </style>

layouts/default.vue

@@ -635,7 +635,6 @@ export default defineNuxtComponent({
             padding: 0.5rem;
             color: var(--color-text);
             border-radius: 2rem;
-            transition: filter 0.1s ease-in-out;
             border: 2px solid transparent;
             box-sizing: border-box;