fix(tour): improve shepherd tour step progress and navigation

src/App.tsx

@@ -3,7 +3,8 @@ import { App as AntdApp, Layout, Spin } from "antd";
 import { LoadingOutlined } from "@ant-design/icons";
 import { Routes, Route, useSearchParams, useNavigate } from "react-router-dom";
 import Navbar from "./components/Navbar";
-import tour from "./components/Tour";
+import { tour } from "./components/Tour";
+import "shepherd.js/dist/css/shepherd.css";
 import LearnNow from "./pages/LearnNow";
 import useAppStore from "./store/store";
 import LearnContent from "./components/Content";
@@ -18,11 +19,10 @@ const App = () => {
   const navigate = useNavigate();
   const init = useAppStore((state) => state.init);
   const loadFromLink = useAppStore((state) => state.loadFromLink);
-  const { isAIConfigOpen, setAIConfigOpen } =
-    useAppStore((state) => ({
-      isAIConfigOpen: state.isAIConfigOpen,
-      setAIConfigOpen: state.setAIConfigOpen,
-    }));
+  const { isAIConfigOpen, setAIConfigOpen } = useAppStore((state) => ({
+    isAIConfigOpen: state.isAIConfigOpen,
+    setAIConfigOpen: state.setAIConfigOpen,
+  }));
   const backgroundColor = useAppStore((state) => state.backgroundColor);
   const textColor = useAppStore((state) => state.textColor);
   const [loading, setLoading] = useState(true);
@@ -77,6 +77,7 @@ const App = () => {
     };
   }, [backgroundColor, textColor]);
 
+  //shepherd tour setup
   useEffect(() => {
     const startTour = async () => {
       try {
@@ -88,10 +89,11 @@ const App = () => {
     };
 
     const showTour = searchParams.get("showTour") === "true";
+
     if (showTour || !localStorage.getItem("hasVisited")) {
       void startTour();
     }
-  }, [searchParams]);
+  }, [searchParams, tour]);
 
   // Set data-theme attribute on initial load and when theme changes
   useEffect(() => {
@@ -138,9 +140,18 @@ const App = () => {
             />
             <Route path="/learn" element={<LearnNow />}>
               <Route path="intro" element={<LearnContent file="intro.md" />} />
-              <Route path="module1" element={<LearnContent file="module1.md" />} />
-              <Route path="module2" element={<LearnContent file="module2.md" />} />
-              <Route path="module3" element={<LearnContent file="module3.md" />} />
+              <Route
+                path="module1"
+                element={<LearnContent file="module1.md" />}
+              />
+              <Route
+                path="module2"
+                element={<LearnContent file="module2.md" />}
+              />
+              <Route
+                path="module3"
+                element={<LearnContent file="module3.md" />}
+              />
             </Route>
           </Routes>
         </Layout>
@@ -152,9 +163,11 @@ const App = () => {
 const Spinner = () => (
   <div className="app-spinner-container">
     <Spin
-      indicator={<LoadingOutlined style={{ fontSize: 42, color: "#19c6c7" }} spin />}
+      indicator={
+        <LoadingOutlined style={{ fontSize: 42, color: "#19c6c7" }} spin />
+      }
     />
   </div>
 );
 
-export default App;
+export default App;

src/components/FabButton.tsx

@@ -1,7 +1,7 @@
 import { Fab, Action } from "react-tiny-fab";
 import { MdExplore } from "react-icons/md";
 import { FaCircleQuestion } from "react-icons/fa6";
-import tour from "../components/Tour";
+import {tour} from "./Tour";
 import FabGlobalStyle from "../styles/components/FabGlobalStyles";
 
 const FloatingFAB = () => {

src/components/PlaygroundSidebar.tsx

@@ -8,7 +8,7 @@ import useAppStore from "../store/store";
 import { message, Tooltip } from "antd";
 import FullScreenModal from "./FullScreenModal";
 import SettingsModal from "./SettingsModal";
-import tour from "./Tour";
+import {tour} from "./Tour";
 import "../styles/components/PlaygroundSidebar.css";
 
 const PlaygroundSidebar = () => {