refactor(player): simplify popover input focus logic

Removed `isPopoverOpen` state and associated `useEffect` hook.
Auto-focus and select logic for the input are now directly handled
within `handlePopoverOpen`, reducing state management complexity.

Author: richardr1126

src/components/player/Navigator.tsx

@@ -9,25 +9,12 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
   skipToLocation: (location: string | number, shouldPause?: boolean) => void;
 }) => {
   const [inputValue, setInputValue] = useState('');
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     setInputValue(currentPage.toString());
   }, [currentPage]);
 
-  // Auto-focus and select input when popover opens
-  useEffect(() => {
-    if (isPopoverOpen && inputRef.current) {
-      // Small delay to ensure the popover is fully rendered
-      const timer = setTimeout(() => {
-        inputRef.current?.focus();
-        inputRef.current?.select();
-      }, 50);
-      return () => clearTimeout(timer);
-    }
-  }, [isPopoverOpen]);
-
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     // Only allow numbers
     const value = e.target.value.replace(/[^0-9]/g, '');
@@ -56,6 +43,11 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
 
   const handlePopoverOpen = () => {
     setInputValue(''); // Clear input when popup opens
+    // Auto-focus and select input shortly after opening
+    setTimeout(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }, 50);
   };
 
   return (
@@ -73,44 +65,34 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
       </Button>
 
       {/* Page number popup */}
-      <Popover className="relative">
-        {({ open }) => {
-          if (open !== isPopoverOpen) {
-            setIsPopoverOpen(open);
-          }
-          
-          return (
-            <>
-              <PopoverButton
-                className="bg-offbase px-2 py-0.5 rounded-full focus:outline-none cursor-pointer hover:bg-offbase transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent"
-                onClick={handlePopoverOpen}
-              >
-                <p className="text-xs whitespace-nowrap">
-                  {currentPage} / {numPages || 1}
-                </p>
-              </PopoverButton>
-              <PopoverPanel anchor="top" className="absolute z-50 bg-base p-3 rounded-md shadow-lg border border-offbase">
-                <div className="flex flex-col space-y-2">
-                  <div className="text-xs font-medium text-foreground">Go to page</div>
-                  <input
-                    ref={inputRef}
-                    type="text"
-                    inputMode="numeric"
-                    pattern="[0-9]*"
-                    className="w-20 px-2 py-1 text-xs text-accent bg-offbase rounded border-none outline-none appearance-none text-center"
-                    value={inputValue}
-                    onChange={handleInputChange}
-                    onBlur={handleInputConfirm}
-                    onKeyDown={handleInputKeyDown}
-                    placeholder={currentPage.toString()}
-                    aria-label="Page number"
-                  />
-                  <div className="text-xs text-muted text-center">of {numPages || 1}</div>
-                </div>
-              </PopoverPanel>
-            </>
-          );
-        }}
+      <Popover className="relative mb-1">
+        <PopoverButton
+          className="bg-offbase px-2 py-0.5 rounded-full focus:outline-none cursor-pointer hover:bg-offbase transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent"
+          onClick={handlePopoverOpen}
+        >
+          <p className="text-xs whitespace-nowrap">
+            {currentPage} / {numPages || 1}
+          </p>
+        </PopoverButton>
+        <PopoverPanel anchor="top" className="absolute z-50 bg-base p-3 rounded-md shadow-lg border border-offbase">
+          <div className="flex flex-col space-y-2">
+            <div className="text-xs font-medium text-foreground">Go to page</div>
+            <input
+              ref={inputRef}
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              className="w-20 px-2 py-1 text-xs text-accent bg-offbase rounded border-none outline-none appearance-none text-center"
+              value={inputValue}
+              onChange={handleInputChange}
+              onBlur={handleInputConfirm}
+              onKeyDown={handleInputKeyDown}
+              placeholder={currentPage.toString()}
+              aria-label="Page number"
+            />
+            <div className="text-xs text-muted text-center">of {numPages || 1}</div>
+          </div>
+        </PopoverPanel>
       </Popover>
 
       {/* Page forward */}
@@ -126,4 +108,4 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
       </Button>
     </div>
   );
-}
+}