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/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>
     ),
 );