Improve "MobileReaderProgressBar" progress bar click/drag handling

Convert clicks on the progress bar in such a way, that there is a "padding" around the page "dots".
Thus, e.g. even if the click was actually for page 1, if it is inside page 2 padding, it will behave like it was a click for page 2

src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx

@@ -47,6 +47,7 @@ const BaseReaderProgressBar = ({
     setIsDragging,
     openPage,
     direction,
+    fullSegmentClicks,
 }: ReaderProgressBarProps &
     Pick<TReaderProgressBarContext, 'isDragging' | 'setIsDragging'> &
     Pick<ComponentProps<typeof ReaderProgressBarSlotWrapper>, 'createProgressBarSlot'> & {
@@ -69,6 +70,7 @@ const BaseReaderProgressBar = ({
         };
         openPage: ReturnType<typeof ReaderControls.useOpenPage>;
         direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
+        fullSegmentClicks: boolean;
     }) => {
     const progressBarRef = useRef<HTMLDivElement | null>(null);
     const draggingDetectionTimeout = useRef<NodeJS.Timeout>();
@@ -107,6 +109,7 @@ const BaseReaderProgressBar = ({
         pages,
         progressBarPosition,
         getOptionForDirection,
+        fullSegmentClicks,
     );
 
     const handleMouseDown = (e: React.MouseEvent | React.TouchEvent) => {
@@ -123,6 +126,7 @@ const BaseReaderProgressBar = ({
                     progressBarRef.current.getBoundingClientRect(),
                     pages,
                     isHorizontalPosition,
+                    fullSegmentClicks,
                     getOptionForDirection,
                 ),
             ),

src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx

@@ -145,6 +145,7 @@ const BaseMobileReaderProgressBar = ({
                     {getOptionForDirection(<SkipPreviousIcon />, <SkipNextIcon />, direction)}
                 </IconButton>
                 <ReaderProgressBar
+                    fullSegmentClicks={false}
                     createProgressBarSlot={useCallback(
                         (page, pagesIndex, _2, _3, _4, _5, isTrailingPage, totalPages) => (
                             <ReaderProgressBarSlotMobile

src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx

@@ -55,6 +55,7 @@ const BaseStandardReaderProgressBar = ({
     return (
         <ReaderProgressBarDirectionWrapper>
             <ReaderProgressBar
+                fullSegmentClicks
                 createProgressBarSlot={useCallback(
                     (
                         page,

src/modules/reader/services/ReaderControls.ts

@@ -543,6 +543,7 @@ export class ReaderControls {
         pages: ReaderProgressBarProps['pages'],
         progressBarPosition: ProgressBarPosition,
         getOptionForDirectionFn: typeof getOptionForDirection,
+        fullSegmentClicks: boolean,
     ): void {
         useEffect(() => {
             if (!isDragging) {
@@ -562,6 +563,7 @@ export class ReaderControls {
                         progressBarRef.current.getBoundingClientRect(),
                         pages,
                         isHorizontal,
+                        fullSegmentClicks,
                         getOptionForDirectionFn,
                     ),
                 );

src/modules/reader/utils/ReaderProgressBar.utils.tsx

@@ -48,17 +48,26 @@ export const getPageForMousePos = (
     elementRect: DOMRect,
     pages: ReaderProgressBarProps['pages'],
     isHorizontalPosition: boolean,
+    fullSegmentClicks: boolean,
     getOptionForDirection: typeof getOptionForDirectionImpl,
 ): ReaderProgressBarProps['pages'][number] => {
     const pos = isHorizontalPosition ? coordinates.clientX : coordinates.clientY;
     const rectPos = isHorizontalPosition ? elementRect.left : elementRect.top;
     const rectSize = isHorizontalPosition ? elementRect.width : elementRect.height;
 
-    const mouseXPosRelativeToProgressBar = pos - rectPos;
+    const mousePosRelativeToProgressBar = pos - rectPos;
-    const pageForMouseXPos = Math.ceil((mouseXPosRelativeToProgressBar / rectSize) * pages.length);
+
-    const minPage = Math.max(1, pageForMouseXPos);
+    const totalPages = pages.length - Number(!fullSegmentClicks);
-    const maxPage = Math.min(minPage, pages.length);
+
-    const newPageIndex = getOptionForDirection(maxPage - 1, pages.length - maxPage);
+    const segmentWidth = rectSize / totalPages;
+    const clickedSegmentIndex = Math.floor(mousePosRelativeToProgressBar / segmentWidth);
+    const segmentMiddlePoint = (clickedSegmentIndex + (fullSegmentClicks ? 1 : 0.5)) * segmentWidth;
+    const actualClickedSegmentIndex =
+        mousePosRelativeToProgressBar <= segmentMiddlePoint ? clickedSegmentIndex : clickedSegmentIndex + 1;
+
+    const minPageIndex = Math.max(0, actualClickedSegmentIndex);
+    const maxPageIndex = Math.min(minPageIndex, pages.length - 1);
+    const newPageIndex = getOptionForDirection(maxPageIndex, pages.length - 1 - maxPageIndex);
 
     return pages[newPageIndex];
 };