From 740c5e17d3ede4ee05a2e8dd3615197d7a59e2ba Mon Sep 17 00:00:00 2001
From: Victor Sonck <victor.sonck@gmail.com>
Date: Fri, 20 Jun 2025 08:32:53 +0200
Subject: [PATCH 1/2] Add editable page number in PDF navigator view, to make
 it much easier to jump to specific pages

---
 .gitignore                          |  3 ++
 src/components/player/Navigator.tsx | 54 ++++++++++++++++++++++++++---
 2 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index 63da9a3..8cbfc60 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,3 +50,6 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+# vscode
+.vscode
\ No newline at end of file
diff --git a/src/components/player/Navigator.tsx b/src/components/player/Navigator.tsx
index 2c316c0..eafa487 100644
--- a/src/components/player/Navigator.tsx
+++ b/src/components/player/Navigator.tsx
@@ -1,12 +1,46 @@
 'use client';
 
 import { Button } from '@headlessui/react';
+import { useState, useEffect, useRef } from 'react';
 
 export const Navigator = ({ currentPage, numPages, skipToLocation }: {
   currentPage: number;
   numPages: number | undefined;
   skipToLocation: (location: string | number, shouldPause?: boolean) => void;
 }) => {
+  const [inputValue, setInputValue] = useState(currentPage.toString());
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setInputValue(currentPage.toString());
+  }, [currentPage]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // Only allow numbers
+    const value = e.target.value.replace(/[^0-9]/g, '');
+    setInputValue(value);
+  };
+
+  const handleInputConfirm = () => {
+    let page = parseInt(inputValue, 10);
+    if (isNaN(page)) return;
+    const maxPage = numPages || 1;
+    if (page < 1) page = 1;
+    if (page > maxPage) page = maxPage;
+    if (page !== currentPage) {
+      skipToLocation(page, true);
+    } else {
+      setInputValue(page.toString()); // reset input if unchanged
+    }
+  };
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleInputConfirm();
+      inputRef.current?.blur();
+    }
+  };
+
   return (
     <div className="flex items-center space-x-1">
       {/* Page back */}
@@ -21,11 +55,21 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
         </svg>
       </Button>
 
-      {/* Page number */}
-      <div className="bg-offbase px-2 py-0.5 rounded-full">
-        <p className="text-xs whitespace-nowrap">
-          {currentPage} / {numPages || 1}
-        </p>
+      {/* Page number input */}
+      <div className="bg-offbase px-2 py-0.5 rounded-full flex items-center">
+        <input
+          ref={inputRef}
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          className="w-8 text-xs text-center bg-transparent outline-none appearance-none"
+          value={inputValue}
+          onChange={handleInputChange}
+          onBlur={handleInputConfirm}
+          onKeyDown={handleInputKeyDown}
+          aria-label="Page number"
+        />
+        <span className="text-xs ml-1">/ {numPages || 1}</span>
       </div>
 
       {/* Page forward */}

From 8d17c69374dd5215709df9b5f12394f78b5639dc Mon Sep 17 00:00:00 2001
From: Richard Roberson <me@richardr.dev>
Date: Sun, 22 Jun 2025 13:17:26 -0600
Subject: [PATCH 2/2] Change width and text color

---
 src/components/player/Navigator.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/player/Navigator.tsx b/src/components/player/Navigator.tsx
index eafa487..87b9b59 100644
--- a/src/components/player/Navigator.tsx
+++ b/src/components/player/Navigator.tsx
@@ -62,14 +62,14 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
           type="text"
           inputMode="numeric"
           pattern="[0-9]*"
-          className="w-8 text-xs text-center bg-transparent outline-none appearance-none"
+          className="w-6 text-xs text-accent bg-transparent outline-none appearance-none text-right"
           value={inputValue}
           onChange={handleInputChange}
           onBlur={handleInputConfirm}
           onKeyDown={handleInputKeyDown}
           aria-label="Page number"
         />
-        <span className="text-xs ml-1">/ {numPages || 1}</span>
+        <span className="w-6 text-xs ml-1">/ {numPages || 1}</span>
       </div>
 
       {/* Page forward */}