clean up course tabs, unify logic

src/components/content/courses/DocumentLesson.js

@@ -118,7 +118,7 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
     }
     if (isPaid && !decryptionPerformed) {
       return (
-        <div className="w-full p-8 rounded-lg flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-800">
+        <div className="w-full p-8 rounded-lg flex flex-col items-center justify-center">
           <div className="mx-auto py-auto">
             <i className="pi pi-lock text-[60px] text-red-500"></i>
           </div>

src/config/appConfig.js

@@ -11,7 +11,8 @@ const appConfig = {
   ],
   authorPubkeys: [
     'f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741',
-    'c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345'
+    'c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345',
+    '6260f29fa75c91aaa292f082e5e87b438d2ab4fdf96af398567b01802ee2fcd4'
   ],
   customLightningAddresses: [
     {

src/pages/course/[slug]/index.js

@@ -186,6 +186,17 @@ const Course = () => {
   const [activeTab, setActiveTab] = useState('overview'); // Default to overview tab
   const navbarHeight = 60; // Match the height from Navbar component
 
+  // Memoized function to get the tab map based on view mode
+  const getTabMap = useMemo(() => {
+    const baseTabMap = ['overview', 'content', 'qa'];
+    if (isMobileView) {
+      const mobileTabMap = [...baseTabMap];
+      mobileTabMap.splice(2, 0, 'lessons');
+      return mobileTabMap;
+    }
+    return baseTabMap;
+  }, [isMobileView]);
+
   useEffect(() => {
     if (router.isReady && router.query.slug) {
       const { slug } = router.query;
@@ -320,22 +331,12 @@ const Course = () => {
   };
 
   const toggleTab = (index) => {
-    const tabMap = ['overview', 'content', 'qa'];
-    // If mobile and we have the lessons tab, insert it at index 2
-    if (isMobileView) {
-      tabMap.splice(2, 0, 'lessons');
-    }
-    
-    const tabName = tabMap[index];
+    const tabName = getTabMap[index];
     setActiveTab(tabName);
     
     // Only show/hide sidebar on mobile - desktop keeps sidebar visible
     if (isMobileView) {
-      if (tabName === 'lessons') {
-        setSidebarVisible(true);
-      } else {
-        setSidebarVisible(false);
-      }
+      setSidebarVisible(tabName === 'lessons');
     }
   };
 
@@ -345,12 +346,7 @@ const Course = () => {
 
   // Map active tab name back to index for MenuTab
   const getActiveTabIndex = () => {
-    const tabMap = ['overview', 'content', 'qa'];
-    if (isMobileView) {
-      tabMap.splice(2, 0, 'lessons');
-    }
-    
-    return tabMap.indexOf(activeTab);
+    return getTabMap.indexOf(activeTab);
   };
 
   // Create tab items for MenuTab
@@ -387,11 +383,11 @@ const Course = () => {
     const handleKeyDown = (e) => {
       if (e.key === 'ArrowRight') {
         const currentIndex = getActiveTabIndex();
-        const nextIndex = (currentIndex + 1) % getTabItems().length;
+        const nextIndex = (currentIndex + 1) % getTabMap.length;
         toggleTab(nextIndex);
       } else if (e.key === 'ArrowLeft') {
         const currentIndex = getActiveTabIndex();
-        const prevIndex = (currentIndex - 1 + getTabItems().length) % getTabItems().length;
+        const prevIndex = (currentIndex - 1 + getTabMap.length) % getTabMap.length;
         toggleTab(prevIndex);
       }
     };
@@ -400,7 +396,7 @@ const Course = () => {
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [activeTab]);
+  }, [activeTab, getTabMap, toggleTab]);
 
   // Render the QA section (empty for now)
   const renderQASection = () => {
@@ -586,7 +582,12 @@ const Course = () => {
               <CourseSidebar
                 lessons={uniqueLessons}
                 activeIndex={activeIndex}
-                onLessonSelect={handleLessonSelect}
+                onLessonSelect={(index) => {
+                  handleLessonSelect(index);
+                  if (isMobileView) {
+                    setActiveTab('content'); // Use the tab name directly
+                  }
+                }}
                 completedLessons={completedLessons}
                 isMobileView={isMobileView}
                 sidebarVisible={sidebarVisible}
@@ -604,12 +605,9 @@ const Course = () => {
                 activeIndex={activeIndex}
                 onLessonSelect={(index) => {
                   handleLessonSelect(index);
-onLessonSelect={(index) => {
-  handleLessonSelect(index);
-  if (isMobileView) {
-    setActiveTab('content'); // Use the tab name directly
-  }
-}}
+                  if (isMobileView) {
+                    setActiveTab('content'); // Use the tab name directly
+                  }
                 }}
                 completedLessons={completedLessons}
                 isMobileView={isMobileView}