Adjust "MobileReaderProgressBar" styling

In case the current page is the first one, there will be now no visible progress shown anymore. The progress slider will now be exactly at the start of the progress bar.

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

@@ -37,14 +37,14 @@ export const ReaderProgressBarCurrentPageSlot = ({
                 position: 'absolute',
                 cursor: isDragging ? 'grabbing' : 'grab',
                 ...applyStyles(getProgressBarPositionInfo(progressBarPosition).isHorizontal, {
-                    left: `${(Math.max(0, currentPagesIndex) / pagesLength) * 100}%`,
-                    width: `calc(100% / ${pagesLength})`,
+                    left: `${(Math.max(0, currentPagesIndex - 1) / (pagesLength - 1)) * 100}%`,
+                    width: `calc(100% / ${pagesLength - 1})`,
                     height: '100%',
                 }),
                 ...applyStyles(getProgressBarPositionInfo(progressBarPosition).isVertical, {
-                    top: `${(Math.max(0, currentPagesIndex) / pagesLength) * 100}%`,
+                    top: `${(Math.max(0, currentPagesIndex - 1) / pagesLength - 1) * 100}%`,
                     width: '100%',
-                    height: `calc(100% / ${pagesLength})`,
+                    height: `calc(100% / ${pagesLength - 1})`,
                 }),
                 ...boxProps?.sx,
             }}

src/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx

@@ -20,33 +20,68 @@ const SLOT_SX_PROP: NonNullable<NonNullable<ComponentProps<typeof ReaderProgress
     backgroundColor: 'background.default',
 };
 
-const ProgressBarPagePoint = memo(({ isTrailingPage }: { isTrailingPage: boolean }) => (
-    <Box
-        sx={{
-            position: 'absolute',
-            top: '50%',
-            transform: 'translateY(-50%)',
-            right: '2px',
-            width: '2px',
-            height: '2px',
-            borderRadius: 100,
-            backgroundColor: 'background.paper',
-            ...applyStyles(isTrailingPage, {
-                backgroundColor: 'primary.main',
-            }),
-            zIndex: 1,
-        }}
-    />
-));
+const START_END_GAP = '4px';
+const POINT_SIZE = '3px';
+const ProgressBarPagePoint = memo(
+    ({
+        isTrailingPage,
+        pagesIndex,
+        totalPages,
+    }: {
+        isTrailingPage: boolean;
+        pagesIndex: number;
+        totalPages: number;
+    }) => {
+        const isFirstPage = pagesIndex === 0;
+        const isLastPage = pagesIndex === totalPages - 1;
+
+        const left = `${(pagesIndex / (totalPages - 1)) * 100}%`;
+
+        return (
+            <Box
+                sx={{
+                    position: 'absolute',
+                    top: '50%',
+                    left,
+                    ...applyStyles(isFirstPage, {
+                        left: START_END_GAP,
+                    }),
+                    ...applyStyles(isLastPage, {
+                        left: `calc(${left} - ${START_END_GAP})`,
+                    }),
+                    transform: 'translate(-50%, -50%)',
+                    width: POINT_SIZE,
+                    height: POINT_SIZE,
+                    borderRadius: 100,
+                    backgroundColor: 'background.paper',
+                    ...applyStyles(isTrailingPage, {
+                        backgroundColor: 'primary.main',
+                    }),
+                    zIndex: 1,
+                }}
+            />
+        );
+    },
+);
 
 export const ReaderProgressBarSlotMobile = memo(
-    ({ pageName, isTrailingPage }: { pageName: string; isTrailingPage: boolean }) => (
+    ({
+        pageName,
+        isTrailingPage,
+        pagesIndex,
+        totalPages,
+    }: {
+        pageName: string;
+        isTrailingPage: boolean;
+        pagesIndex: number;
+        totalPages: number;
+    }) => (
         <ReaderProgressBarSlot
             pageName={pageName}
             progressBarPosition={ProgressBarPosition.BOTTOM}
             slotProps={{ box: { sx: SLOT_SX_PROP } }}
         >
-            <ProgressBarPagePoint isTrailingPage={isTrailingPage} />
+            <ProgressBarPagePoint isTrailingPage={isTrailingPage} pagesIndex={pagesIndex} totalPages={totalPages} />
         </ReaderProgressBarSlot>
     ),
 );

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

@@ -12,7 +12,7 @@ import SkipNextIcon from '@mui/icons-material/SkipNext';
 import Stack from '@mui/material/Stack';
 import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import { ComponentProps, memo, useCallback, useLayoutEffect } from 'react';
+import { ComponentProps, memo, useCallback, useLayoutEffect, useMemo } from 'react';
 import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
 import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
@@ -27,6 +27,7 @@ import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.type
 import { ReaderProgressBarProps, TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { ReaderProgressBarSlotMobile } from '@/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx';
 import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
+import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 
 const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotProps'] = {
     container: {
@@ -59,6 +60,7 @@ const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotPro
     progressBarSlotsContainer: {
         sx: {
             borderRadius: 100,
+            backgroundColor: 'background.default',
         },
     },
     progressBarSlot: {
@@ -69,7 +71,6 @@ const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotPro
     progressBarCurrentPageSlot: {
         sx: {
             display: 'flex',
-            justifyContent: 'end',
             alignItems: 'center',
             zIndex: 1,
             pointer: 'default',
@@ -80,19 +81,6 @@ const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotPro
     },
 };
 
-const PROGRESS_BAR_SLOTS: ComponentProps<typeof ReaderProgressBar>['slots'] = {
-    progressBarCurrentPage: (
-        <Box
-            sx={{
-                minWidth: '5px',
-                height: '75%',
-                backgroundColor: 'primary.main',
-                borderRadius: 100,
-            }}
-        />
-    ),
-};
-
 const BaseMobileReaderProgressBar = ({
     previousChapter,
     nextChapter,
@@ -110,6 +98,29 @@ const BaseMobileReaderProgressBar = ({
     const openNextChapter = ReaderService.useNavigateToChapter(nextChapter, ReaderResumeMode.START);
     const openPreviousChapter = ReaderService.useNavigateToChapter(previousChapter, ReaderResumeMode.END);
 
+    const currentPagesIndex = useMemo(() => getPage(currentPageIndex, pages).pagesIndex, [currentPageIndex, pages]);
+
+    const progressBarCurrentPage = useMemo(
+        () => ({
+            progressBarCurrentPage: (
+                <Box
+                    sx={{
+                        position: 'absolute',
+                        left: 'calc(100% - 6px)',
+                        ...applyStyles(currentPagesIndex === 0, {
+                            left: '0',
+                        }),
+                        width: '6px',
+                        height: '75%',
+                        backgroundColor: 'primary.main',
+                        borderRadius: 100,
+                    }}
+                />
+            ),
+        }),
+        [currentPagesIndex, pages.length],
+    );
+
     useLayoutEffect(() => {
         setIsMaximized(isVisible);
 
@@ -135,8 +146,13 @@ const BaseMobileReaderProgressBar = ({
                 </IconButton>
                 <ReaderProgressBar
                     createProgressBarSlot={useCallback(
-                        (page, _1, _2, _3, _4, _5, isTrailingPage) => (
-                            <ReaderProgressBarSlotMobile pageName={page.name} isTrailingPage={isTrailingPage} />
+                        (page, pagesIndex, _2, _3, _4, _5, isTrailingPage, totalPages) => (
+                            <ReaderProgressBarSlotMobile
+                                pageName={page.name}
+                                isTrailingPage={isTrailingPage}
+                                pagesIndex={pagesIndex}
+                                totalPages={totalPages}
+                            />
                         ),
                         [],
                     )}
@@ -147,11 +163,11 @@ const BaseMobileReaderProgressBar = ({
                                 height: '20px',
                                 backgroundColor: 'primary.main',
                                 borderRadius: '400px 0 0 400px',
-                                width: `calc(${(Math.max(0, getPage(currentPageIndex, pages).pagesIndex) / pages.length) * 100}% + 100% / ${pages.length})`,
+                                width: `${(Math.max(0, getPage(currentPageIndex, pages).pagesIndex) / (pages.length - 1)) * 100}%`,
                             },
                         },
                     }}
-                    slots={PROGRESS_BAR_SLOTS}
+                    slots={progressBarCurrentPage}
                 />
                 <IconButton
                     onClick={openNextChapter}