Auto select navigation

src/components/player/Navigator.tsx

@@ -9,12 +9,25 @@ 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, '');
@@ -61,6 +74,13 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
 
       {/* 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/80"
                 onClick={handlePopoverOpen}
@@ -88,6 +108,9 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
                   <div className="text-xs text-foreground/70 text-center">of {numPages || 1}</div>
                 </div>
               </PopoverPanel>
+            </>
+          );
+        }}
       </Popover>
 
       {/* Page forward */}