From 2921363936675de9f2fc59b73fd371c39f159c19 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Tue, 14 Oct 2025 07:40:17 +0000
Subject: [PATCH] Add interactive progress bar for slide navigation with
 previews

Implement a slider component for precise slide navigation, including click-to-jump functionality and hover-based preview display.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/6ZMblp5
---
 .replit                     |  4 ++++
 client/src/pages/Report.tsx | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/.replit b/.replit
index 25794b7..48ea545 100644
--- a/.replit
+++ b/.replit
@@ -22,6 +22,10 @@ externalPort = 3002
 localPort = 36309
 externalPort = 5173
 
+[[ports]]
+localPort = 37413
+externalPort = 5000
+
 [[ports]]
 localPort = 37531
 externalPort = 3001
diff --git a/client/src/pages/Report.tsx b/client/src/pages/Report.tsx
index 0514e0c..c6e73c1 100644
--- a/client/src/pages/Report.tsx
+++ b/client/src/pages/Report.tsx
@@ -56,6 +56,23 @@ function MohamedSalahSlides() {
     }
   };
 
+  const handleSliderCommit = (value: number[]) => {
+    if (numPages > 0) {
+      setCurrentSlide(value[0]);
+    }
+  };
+
+  const handleSliderClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (numPages === 0) return;
+    
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const percentage = x / rect.width;
+    const slideNumber = Math.max(1, Math.min(numPages, Math.round(percentage * numPages)));
+    
+    setCurrentSlide(slideNumber);
+  };
+
   const handleSliderHover = (e: React.MouseEvent<HTMLDivElement>) => {
     if (numPages === 0) return;
     
@@ -107,6 +124,7 @@ function MohamedSalahSlides() {
         <div className="relative px-2" data-testid="slide-progress-container">
           <div 
             className="relative py-2"
+            onClick={handleSliderClick}
             onMouseMove={handleSliderHover}
             onMouseLeave={handleSliderLeave}
             data-testid="slider-hover-area"
@@ -114,6 +132,7 @@ function MohamedSalahSlides() {
             <Slider
               value={[currentSlide]}
               onValueChange={handleSliderChange}
+              onValueCommit={handleSliderCommit}
               min={1}
               max={numPages || 1}
               step={1}