diff --git a/src/components/content/courses/CourseDetails.js b/src/components/content/courses/CourseDetails.js
index c2e308d..d15a11c 100644
--- a/src/components/content/courses/CourseDetails.js
+++ b/src/components/content/courses/CourseDetails.js
@@ -1,11 +1,8 @@
import React, { useEffect, useState, useCallback, useRef } from 'react';
import axios from 'axios';
import { useToast } from '@/hooks/useToast';
-import { Tag } from 'primereact/tag';
-import Image from 'next/image';
import { useRouter } from 'next/router';
import CoursePaymentButton from '@/components/bitcoinConnect/CoursePaymentButton';
-import ZapDisplay from '@/components/zaps/ZapDisplay';
import GenericButton from '@/components/buttons/GenericButton';
import { nip19 } from 'nostr-tools';
import { useImageProxy } from '@/hooks/useImageProxy';
@@ -20,7 +17,10 @@ import useTrackCourse from '@/hooks/tracking/useTrackCourse';
import WelcomeModal from '@/components/onboarding/WelcomeModal';
import { ProgressSpinner } from 'primereact/progressspinner';
import { Toast } from 'primereact/toast';
-import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
+
+// Import the desktop and mobile components
+import DesktopCourseDetails from './DesktopCourseDetails';
+import MobileCourseDetails from './MobileCourseDetails';
export default function CourseDetails({
processedEvent,
@@ -29,6 +29,8 @@ export default function CourseDetails({
decryptionPerformed,
handlePaymentSuccess,
handlePaymentError,
+ isMobileView,
+ showCompletedTag = true,
}) {
const [zapAmount, setZapAmount] = useState(0);
const [author, setAuthor] = useState(null);
@@ -39,7 +41,8 @@ export default function CourseDetails({
const { data: session, status } = useSession();
const { showToast } = useToast();
const windowWidth = useWindowWidth();
- const isMobileView = windowWidth <= 768;
+ const localIsMobileView = windowWidth <= 768; // Use as fallback
+ const isPhone = isMobileView || localIsMobileView;
const { ndk } = useNDKContext();
const menuRef = useRef(null);
const toastRef = useRef(null);
@@ -197,77 +200,33 @@ export default function CourseDetails({
);
}
+ // Shared props for both mobile and desktop components
+ const detailsProps = {
+ processedEvent,
+ paidCourse,
+ lessons,
+ decryptionPerformed,
+ author,
+ zapAmount,
+ zapsLoading,
+ menuItems,
+ returnImageProxy,
+ renderPaymentMessage,
+ isCompleted,
+ showCompletedTag
+ };
+
return (
-
);
diff --git a/src/components/content/courses/MobileCourseDetails.js b/src/components/content/courses/MobileCourseDetails.js
new file mode 100644
index 0000000..ec53934
--- /dev/null
+++ b/src/components/content/courses/MobileCourseDetails.js
@@ -0,0 +1,135 @@
+import React from 'react';
+import Image from 'next/image';
+import { Tag } from 'primereact/tag';
+import ZapDisplay from '@/components/zaps/ZapDisplay';
+import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
+import { Divider } from 'primereact/divider';
+
+export default function MobileCourseDetails({
+ processedEvent,
+ paidCourse,
+ lessons,
+ decryptionPerformed,
+ author,
+ zapAmount,
+ zapsLoading,
+ menuItems,
+ returnImageProxy,
+ renderPaymentMessage,
+ isCompleted,
+ showCompletedTag
+}) {
+ return (
+ <>
+ {/* Mobile-specific layout */}
+
+
onLessonSelect(index)}
+ >
+
+ );
+
+ // Sidebar content component for reuse
+ const SidebarContent = () => (
+
-
-
- router.push('/')}
- />
-
);
diff --git a/src/components/content/courses/CourseHeader.js b/src/components/content/courses/CourseHeader.js
new file mode 100644
index 0000000..4ea72c0
--- /dev/null
+++ b/src/components/content/courses/CourseHeader.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import GenericButton from '@/components/buttons/GenericButton';
+import 'primeicons/primeicons.css';
+
+const CourseHeader = ({
+ course,
+ isMobileView,
+ navbarHeight,
+ isNavbarMode = false
+}) => {
+ const router = useRouter();
+
+ // Handle back button navigation
+ const handleBackNavigation = () => {
+ const { active, slug } = router.query;
+
+ // If we're on a specific lesson (has active param), remove it and stay on course page
+ if (active !== undefined) {
+ router.push(`/course/${slug}`, undefined, { shallow: true });
+ } else {
+ // If we're on the main course page (no active param), go back to previous page
+ router.push('/');
+ }
+ };
+
+ if (!course) return null;
+
+ // Navbar mode - compact version for the top navbar
+ if (isNavbarMode) {
+ return (
+
- {isCompleted &&
+
+
-
- {processedEvent.name}
-
- {processedEvent.topics &&
- processedEvent.topics.length > 0 &&
- processedEvent.topics.map((topic, index) => (
-
-
- {processedEvent.description &&
- processedEvent.description
- .split('\n')
- .map((line, index) =>
- {line}
)} -
-
-
-
- - By{' '} - - {author?.username || author?.name || author?.pubkey} - -
-
-
- {renderPaymentMessage()}
-
+ {isPhone ? (
+
router.push(`/course/${router.query.slug}`)}
+ >
+ {
+ e.stopPropagation();
+ router.push('/');
+ }}
+ className="mr-4 p-button-rounded p-button-text text-gray-300 hover:text-white"
+ rounded={true}
+ text={true}
+ aria-label="Go back to home"
+ />
+
+
+ );
+ }
+
+ // Standard mode - for course page content
+ return (
+
+
+ + {course.name} +
+
+
+ );
+};
+
+export default CourseHeader;
\ No newline at end of file
diff --git a/src/components/content/courses/CourseLesson.js b/src/components/content/courses/CourseLesson.js
index 3447cce..07230f3 100644
--- a/src/components/content/courses/CourseLesson.js
+++ b/src/components/content/courses/CourseLesson.js
@@ -4,7 +4,6 @@ import Image from 'next/image';
import { useImageProxy } from '@/hooks/useImageProxy';
import { getTotalFromZaps } from '@/utils/lightning';
import ZapDisplay from '@/components/zaps/ZapDisplay';
-import dynamic from 'next/dynamic';
import { useZapsQuery } from '@/hooks/nostrQueries/zaps/useZapsQuery';
import { Toast } from 'primereact/toast';
import useTrackDocumentLesson from '@/hooks/tracking/useTrackDocumentLesson';
@@ -13,10 +12,7 @@ import { nip19 } from 'nostr-tools';
import appConfig from '@/config/appConfig';
import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
import { useSession } from 'next-auth/react';
-
-const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
- ssr: false,
-});
+import MarkdownDisplay from '@/components/markdown/MarkdownDisplay';
const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted }) => {
const [zapAmount, setZapAmount] = useState(0);
@@ -114,7 +110,7 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
const renderContent = () => {
if (isPaid && decryptionPerformed) {
- return
+
+ + {course.name} +
+
+ {lesson.image && (
+
+
+
+ )}
+
+
+
+
+ Lesson {index + 1}
+
+ {completedLessons.includes(lesson.id) && (
+
+ + {lesson.title} +
+
+
+ );
+
+ // Mobile content tab
+ const MobileLessonsTab = () => (
+
+
+ Course Lessons
+ {sidebarVisible && !hideToggleButton && !isMobileView && ( +
+
+ -
+ {lessons.map((lesson, index) => (
+
+
+ );
+
+ return (
+ <>
+ {/* Mobile view - direct content instead of sidebar */}
+ {isMobileView && sidebarVisible && (
+
+
+ Course Lessons
+
+
+ -
+ {lessons.map((lesson, index) => (
+
+
+ )}
+
+ );
+};
+
+export default CourseSidebar;
diff --git a/src/components/content/courses/DesktopCourseDetails.js b/src/components/content/courses/DesktopCourseDetails.js
new file mode 100644
index 0000000..d01e5f9
--- /dev/null
+++ b/src/components/content/courses/DesktopCourseDetails.js
@@ -0,0 +1,148 @@
+import React, { useEffect } from 'react';
+import Image from 'next/image';
+import { Tag } from 'primereact/tag';
+import ZapDisplay from '@/components/zaps/ZapDisplay';
+import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
+import { Divider } from 'primereact/divider';
+
+export default function DesktopCourseDetails({
+ processedEvent,
+ paidCourse,
+ lessons,
+ decryptionPerformed,
+ author,
+ zapAmount,
+ zapsLoading,
+ menuItems,
+ returnImageProxy,
+ renderPaymentMessage,
+ isCompleted,
+ showCompletedTag
+}) {
+
+ return (
+ <>
+ {/* Header with course image, title and options */}
+
+
+ {/* Adjusted to match new header spacing */}
+
+
+
+
+ {/* Course image */}
+
+
+
+
+
+ {/* Title and options */}
+
+
+
+
+
+ {/* Topics/tags */}
+
+ {isCompleted && showCompletedTag && (
+
+ {processedEvent.name}
+
+
+
+ {processedEvent.topics &&
+ processedEvent.topics.length > 0 &&
+ processedEvent.topics.map((topic, index) => (
+
+
+ {/* Author info */}
+
+
+ + Created by{' '} + + {author?.username || author?.name || author?.pubkey} + +
+
+ {/* Left column: Description */}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/content/courses/DocumentLesson.js b/src/components/content/courses/DocumentLesson.js
index 81e5664..8af1ba7 100644
--- a/src/components/content/courses/DocumentLesson.js
+++ b/src/components/content/courses/DocumentLesson.js
@@ -7,17 +7,13 @@ import { useZapsQuery } from '@/hooks/nostrQueries/zaps/useZapsQuery';
import { nip19 } from 'nostr-tools';
import { Divider } from 'primereact/divider';
import { getTotalFromZaps } from '@/utils/lightning';
-import dynamic from 'next/dynamic';
import useWindowWidth from '@/hooks/useWindowWidth';
import appConfig from '@/config/appConfig';
import useTrackDocumentLesson from '@/hooks/tracking/useTrackDocumentLesson';
import { Toast } from 'primereact/toast';
import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
import { useSession } from 'next-auth/react';
-
-const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
- ssr: false,
-});
+import MarkdownDisplay from '@/components/markdown/MarkdownDisplay';
const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted }) => {
const [zapAmount, setZapAmount] = useState(0);
@@ -118,11 +114,11 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
const renderContent = () => {
if (isPaid && decryptionPerformed) {
- return
+
+
+ {/* Right column: Course details */}
+ About This Course
+
+ {processedEvent?.description?.split('\n')
+ .map((line, index) =>
+
+ {/* Payment section */}
+ {line}
)} +
+ {renderPaymentMessage()}
+
+
+
+ Course Information
+ +
+
+
+
+
+ {processedEvent.published && (
+ Course Content
+
+
+
+
+ {paidCourse && (
+ Lessons
+{lessons.length}
+
+
+ )}
+ Price
+{processedEvent.price} sats
+
+
+ )}
+ Details
+
+
+ Published
++ {new Date(processedEvent.published * 1000).toLocaleDateString()} +
+
+
@@ -133,7 +129,7 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
);
}
if (lesson?.content) {
- return
diff --git a/src/components/content/courses/DraftCourseLesson.js b/src/components/content/courses/DraftCourseLesson.js
index d2886c5..1c1db42 100644
--- a/src/components/content/courses/DraftCourseLesson.js
+++ b/src/components/content/courses/DraftCourseLesson.js
@@ -6,11 +6,7 @@ import Image from 'next/image';
import { useImageProxy } from '@/hooks/useImageProxy';
import { formatDateTime, formatUnixTimestamp } from '@/utils/time';
import { useRouter } from 'next/router';
-import dynamic from 'next/dynamic';
-
-const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
- ssr: false,
-});
+import MarkdownDisplay from '@/components/markdown/MarkdownDisplay';
const DraftCourseLesson = ({ lesson, course }) => {
const [isPublished, setIsPublished] = useState(false);
@@ -149,7 +145,7 @@ const DraftCourseLesson = ({ lesson, course }) => {
{processedEvent?.content && (
-
- {lesson?.content &&
+ {/* Topics/tags right below image (image is in parent component) */}
+
+
+
+ {processedEvent.topics &&
+ processedEvent.topics.length > 0 &&
+ processedEvent.topics.map((topic, index) => (
+
+
+ {/* Title and zaps in same row */}
+
+
+
+ {/* Author info and more options in bottom row */}
+ {processedEvent.name}
+
+
+
+
+ + Created by{' '} + + {author?.username || author?.name || author?.pubkey} + +
+
+ {/* Description */}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/content/courses/VideoLesson.js b/src/components/content/courses/VideoLesson.js
index e6ba7ff..326ff53 100644
--- a/src/components/content/courses/VideoLesson.js
+++ b/src/components/content/courses/VideoLesson.js
@@ -6,7 +6,6 @@ import { useImageProxy } from '@/hooks/useImageProxy';
import { useZapsQuery } from '@/hooks/nostrQueries/zaps/useZapsQuery';
import { nip19 } from 'nostr-tools';
import { getTotalFromZaps } from '@/utils/lightning';
-import dynamic from 'next/dynamic';
import { Divider } from 'primereact/divider';
import appConfig from '@/config/appConfig';
import useWindowWidth from '@/hooks/useWindowWidth';
@@ -14,10 +13,7 @@ import useTrackVideoLesson from '@/hooks/tracking/useTrackVideoLesson';
import { Toast } from 'primereact/toast';
import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
import { useSession } from 'next-auth/react';
-
-const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
- ssr: false,
-});
+import MarkdownDisplay from '@/components/markdown/MarkdownDisplay';
const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted }) => {
const [zapAmount, setZapAmount] = useState(0);
@@ -170,7 +166,7 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
if (isPaid && decryptionPerformed) {
return (
+
+
+ {/* Course details */}
+ About This Course
+
+ {processedEvent.description &&
+ processedEvent.description
+ .split('\n')
+ .map((line, index) =>
+
+ {/* Payment section */}
+ {line}
)} +
+ {renderPaymentMessage()}
+
+
+
+ Course Information
+ +
+
+
+
+
+ {processedEvent.published && (
+ Course Content
+
+
+
+
+ {paidCourse && (
+ Lessons
+{lessons.length}
+
+
+ )}
+ Price
+{processedEvent.price} sats
+
+
+ )}
+ Details
+
+
+ Published
++ {new Date(processedEvent.published * 1000).toLocaleDateString()} +
+
-
);
} else if (isPaid && !decryptionPerformed) {
@@ -196,7 +192,7 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
} else if (lesson?.content) {
return (
-
);
}
@@ -208,7 +204,7 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
+
{lesson.title}
diff --git a/src/components/content/documents/DocumentDetails.js b/src/components/content/documents/DocumentDetails.js index 18027a8..dbe71f2 100644 --- a/src/components/content/documents/DocumentDetails.js +++ b/src/components/content/documents/DocumentDetails.js @@ -12,16 +12,12 @@ import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscripti import { getTotalFromZaps } from '@/utils/lightning'; import { useSession } from 'next-auth/react'; import useWindowWidth from '@/hooks/useWindowWidth'; -import dynamic from 'next/dynamic'; import { Toast } from 'primereact/toast'; import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu'; import ZapThreadsWrapper from '@/components/ZapThreadsWrapper'; import appConfig from '@/config/appConfig'; import { nip19 } from 'nostr-tools'; - -const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), { - ssr: false, -}); +import MarkdownDisplay from '@/components/markdown/MarkdownDisplay'; const DocumentDetails = ({ processedEvent, @@ -234,7 +230,7 @@ const DocumentDetails = ({ const renderContent = () => { if (decryptedContent) { - return
+
diff --git a/src/components/feeds/MessageInput.js b/src/components/feeds/MessageInput.js
index f443347..2036db4 100644
--- a/src/components/feeds/MessageInput.js
+++ b/src/components/feeds/MessageInput.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useRef } from 'react';
import { InputTextarea } from 'primereact/inputtextarea';
import GenericButton from '@/components/buttons/GenericButton';
import { useNDKContext } from '@/context/NDKContext';
diff --git a/src/components/feeds/StackerNewsFeed.js b/src/components/feeds/StackerNewsFeed.js
index ae53ec0..dfc888f 100644
--- a/src/components/feeds/StackerNewsFeed.js
+++ b/src/components/feeds/StackerNewsFeed.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
import { ProgressSpinner } from 'primereact/progressspinner';
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
diff --git a/src/components/forms/course/embedded/EmbeddedDocumentForm.js b/src/components/forms/course/embedded/EmbeddedDocumentForm.js
index c42323d..ffc6e05 100644
--- a/src/components/forms/course/embedded/EmbeddedDocumentForm.js
+++ b/src/components/forms/course/embedded/EmbeddedDocumentForm.js
@@ -1,5 +1,4 @@
import React, { useState, useEffect, useCallback } from 'react';
-import axios from 'axios';
import { InputText } from 'primereact/inputtext';
import { InputNumber } from 'primereact/inputnumber';
import { InputSwitch } from 'primereact/inputswitch';
diff --git a/src/components/markdown/MarkdownDisplay.js b/src/components/markdown/MarkdownDisplay.js
new file mode 100644
index 0000000..ce8b13a
--- /dev/null
+++ b/src/components/markdown/MarkdownDisplay.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+import remarkBreaks from 'remark-breaks';
+import 'github-markdown-css/github-markdown-dark.css';
+
+const MarkdownDisplay = ({ content, className = "" }) => {
+ if (!content) return null;
+
+ return (
+
+ );
+};
+
+export default MarkdownDisplay;
\ No newline at end of file
diff --git a/src/components/menutab/CommunityMenuTab.js b/src/components/menutab/CommunityMenuTab.js
index 88c4fef..c5e2cc3 100644
--- a/src/components/menutab/CommunityMenuTab.js
+++ b/src/components/menutab/CommunityMenuTab.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
import { TabMenu } from 'primereact/tabmenu';
import GenericButton from '@/components/buttons/GenericButton';
import Image from 'next/image';
diff --git a/src/components/menutab/MenuTab.js b/src/components/menutab/MenuTab.js
index f05f1f9..a58432c 100644
--- a/src/components/menutab/MenuTab.js
+++ b/src/components/menutab/MenuTab.js
@@ -1,25 +1,42 @@
import React from 'react';
import { TabMenu } from 'primereact/tabmenu';
+import GenericButton from '@/components/buttons/GenericButton';
-export default function MenuTab({ items, activeIndex, onTabChange }) {
+export default function MenuTab({ items, activeIndex, onTabChange, sidebarVisible, onToggleSidebar, isMobileView = false }) {
return (
-
+
onTabChange(e.index)}
pt={{
- tabmenu: {
- menu: ({ context }) => ({
- className: 'bg-transparent border-none',
- }),
- action: ({ context }) => ({
- className: 'bg-transparent border-none',
- }),
- },
+ menu: { className: 'bg-transparent border-none my-2 py-1' },
+ action: ({ context, parent }) => ({
+ className:
+ 'cursor-pointer select-none flex items-center relative no-underline overflow-hidden p-4 font-bold rounded-t-lg',
+ style: { top: '2px' },
+ })
}}
/>
+
+ {/* Sidebar toggle button positioned at the far right - hidden on mobile */}
+ {!isMobileView && (
+
);
}
diff --git a/src/components/navbar/Navbar.js b/src/components/navbar/Navbar.js
index 6e3d1b2..9fc60c1 100644
--- a/src/components/navbar/Navbar.js
+++ b/src/components/navbar/Navbar.js
@@ -8,6 +8,10 @@ import { useSession } from 'next-auth/react';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import useWindowWidth from '@/hooks/useWindowWidth';
+import CourseHeader from '../content/courses/CourseHeader';
+import { useNDKContext } from '@/context/NDKContext';
+import { nip19 } from 'nostr-tools';
+import { parseCourseEvent } from '@/utils/nostr';
const Navbar = () => {
const router = useRouter();
@@ -17,6 +21,54 @@ const Navbar = () => {
const [isHovered, setIsHovered] = useState(false);
const [showMobileSearch, setShowMobileSearch] = useState(false);
const menu = useRef(null);
+ const { ndk } = useNDKContext();
+ const [course, setCourse] = useState(null);
+ const [isCompleted, setIsCompleted] = useState(false);
+
+ // Check if we're on a course page
+ const isCoursePage = router.pathname.startsWith('/course/');
+
+ // Fetch course data when on a course page
+ useEffect(() => {
+ if (isCoursePage && router.isReady && ndk) {
+ const fetchCourse = async () => {
+ try {
+ const { slug } = router.query;
+ if (!slug) return; // still preparing
+
+ const slugStr = Array.isArray(slug) ? slug[0] : slug;
+ let identifier;
+
+ if (slugStr.includes('naddr')) {
+ const { data } = nip19.decode(slugStr);
+ identifier = data?.identifier;
+ } else {
+ identifier = slugStr;
+ }
+
+ if (identifier) {
+ const event = await ndk.fetchEvent({ '#d': [identifier] });
+ if (event) {
+ const parsedCourse = parseCourseEvent(event);
+ setCourse(parsedCourse);
+
+ // Check if course is completed (simplified for nav display)
+ if (session?.user?.completedCourses?.includes(identifier)) {
+ setIsCompleted(true);
+ }
+ }
+ }
+ } catch (error) {
+ console.error('Error fetching course for navbar:', error);
+ }
+ };
+
+ fetchCourse();
+ } else {
+ setCourse(null);
+ setIsCompleted(false);
+ }
+ }, [isCoursePage, router.isReady, router.query, ndk, session?.user?.completedCourses]);
// Lock/unlock body scroll when mobile search is shown/hidden
useEffect(() => {
@@ -65,21 +117,33 @@ const Navbar = () => {
>
{/* Left section */}
+
+ )}
-
- router.push('/')}
- className="flex flex-row items-center justify-center cursor-pointer hover:opacity-80"
- >
-
+ ) : (
+ /* Regular PlebDevs branding */
+ - PlebDevs -
- router.push('/')}
+ className="flex flex-row items-center justify-center cursor-pointer hover:opacity-80"
+ >
+
+ )}
+
{windowWidth > 600 ? (
+ PlebDevs +
+
diff --git a/src/pages/course/[slug]/index.js b/src/pages/course/[slug]/index.js
index a99ef5e..22de673 100644
--- a/src/pages/course/[slug]/index.js
+++ b/src/pages/course/[slug]/index.js
@@ -1,26 +1,23 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
import { useRouter } from 'next/router';
import { parseCourseEvent, parseEvent, findKind0Fields } from '@/utils/nostr';
import CourseDetails from '@/components/content/courses/CourseDetails';
import VideoLesson from '@/components/content/courses/VideoLesson';
import DocumentLesson from '@/components/content/courses/DocumentLesson';
import CombinedLesson from '@/components/content/courses/CombinedLesson';
+import CourseSidebar from '@/components/content/courses/CourseSidebar';
import { useNDKContext } from '@/context/NDKContext';
import { useSession } from 'next-auth/react';
-import axios from 'axios';
-import { nip04, nip19 } from 'nostr-tools';
+import { nip19 } from 'nostr-tools';
import { useToast } from '@/hooks/useToast';
import { ProgressSpinner } from 'primereact/progressspinner';
-import { Accordion, AccordionTab } from 'primereact/accordion';
-import { Tag } from 'primereact/tag';
import { useDecryptContent } from '@/hooks/encryption/useDecryptContent';
-import dynamic from 'next/dynamic';
import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
import appConfig from '@/config/appConfig';
-
-const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
- ssr: false,
-});
+import useWindowWidth from '@/hooks/useWindowWidth';
+import MenuTab from '@/components/menutab/MenuTab';
+import { Tag } from 'primereact/tag';
+import MarkdownDisplay from '@/components/markdown/MarkdownDisplay';
const useCourseData = (ndk, fetchAuthor, router) => {
const [course, setCourse] = useState(null);
@@ -93,37 +90,41 @@ const useLessons = (ndk, fetchAuthor, lessonIds, pubkey) => {
const [lessons, setLessons] = useState([]);
const [uniqueLessons, setUniqueLessons] = useState([]);
const { showToast } = useToast();
+
useEffect(() => {
- if (lessonIds.length > 0) {
- const fetchLesson = async lessonId => {
+ if (lessonIds.length > 0 && pubkey) {
+ const fetchLessons = async () => {
try {
await ndk.connect();
+
+ // Create a single filter with all lesson IDs to avoid multiple calls
const filter = {
- '#d': [lessonId],
+ '#d': lessonIds,
kinds: [30023, 30402],
authors: [pubkey],
};
- const event = await ndk.fetchEvent(filter);
- if (event) {
+
+ const events = await ndk.fetchEvents(filter);
+ const newLessons = [];
+
+ // Process events (no need to check for duplicates here)
+ for (const event of events) {
const author = await fetchAuthor(event.pubkey);
const parsedLesson = { ...parseEvent(event), author };
- setLessons(prev => {
- // Check if the lesson already exists in the array
- const exists = prev.some(lesson => lesson.id === parsedLesson.id);
- if (!exists) {
- return [...prev, parsedLesson];
- }
- return prev;
- });
+ newLessons.push(parsedLesson);
}
+
+ setLessons(newLessons);
} catch (error) {
- console.error('Error fetching event:', error);
+ console.error('Error fetching events:', error);
}
};
- lessonIds.forEach(lessonId => fetchLesson(lessonId));
+
+ fetchLessons();
}
}, [lessonIds, ndk, fetchAuthor, pubkey]);
+ // Keep this deduplication logic using Map
useEffect(() => {
const newUniqueLessons = Array.from(
new Map(lessons.map(lesson => [lesson.id, lesson])).values()
@@ -177,11 +178,61 @@ const Course = () => {
const { ndk, addSigner } = useNDKContext();
const { data: session, update } = useSession();
const { showToast } = useToast();
- const [expandedIndex, setExpandedIndex] = useState(null);
+ const [activeIndex, setActiveIndex] = useState(0);
const [completedLessons, setCompletedLessons] = useState([]);
const [nAddresses, setNAddresses] = useState({});
const [nsec, setNsec] = useState(null);
const [npub, setNpub] = useState(null);
+ const [sidebarVisible, setSidebarVisible] = useState(false);
+ const [nAddress, setNAddress] = useState(null);
+ const windowWidth = useWindowWidth();
+ const isMobileView = windowWidth <= 968;
+ 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;
+ if (slug.includes('naddr')) {
+ setNAddress(slug);
+ } else {
+ console.warn('No naddress found in slug');
+ showToast('error', 'Error', 'Course identifier not found in URL');
+ setTimeout(() => {
+ router.push('/courses'); // Redirect to courses page
+ }, 3000);
+ }
+ }
+ }, [router.isReady, router.query.slug, showToast, router]);
+
+ useEffect(() => {
+ if (router.isReady) {
+ const { active } = router.query;
+ if (active !== undefined) {
+ setActiveIndex(parseInt(active, 10));
+ // If we have an active lesson, switch to content tab
+ setActiveTab('content');
+ } else {
+ setActiveIndex(0);
+ // Default to overview tab when no active parameter
+ setActiveTab('overview');
+ }
+
+ // Auto-open sidebar on desktop, close on mobile
+ setSidebarVisible(!isMobileView);
+ }
+ }, [router.isReady, router.query, isMobileView]);
const setCompleted = useCallback(lessonId => {
setCompletedLessons(prev => [...prev, lessonId]);
@@ -203,12 +254,14 @@ const Course = () => {
paidCourse,
loading: courseLoading,
} = useCourseData(ndk, fetchAuthor, router);
+
const { lessons, uniqueLessons, setLessons } = useLessons(
ndk,
fetchAuthor,
lessonIds,
course?.pubkey
);
+
const { decryptionPerformed, loading: decryptionLoading } = useDecryption(
session,
paidCourse,
@@ -217,17 +270,6 @@ const Course = () => {
setLessons
);
- useEffect(() => {
- if (router.isReady) {
- const { active } = router.query;
- if (active !== undefined) {
- setExpandedIndex(parseInt(active, 10));
- } else {
- setExpandedIndex(null);
- }
- }
- }, [router.isReady, router.query]);
-
useEffect(() => {
if (uniqueLessons.length > 0) {
const addresses = {};
@@ -258,14 +300,20 @@ const Course = () => {
}
}, [session]);
- const handleAccordionChange = e => {
- const newIndex = e.index === expandedIndex ? null : e.index;
- setExpandedIndex(newIndex);
+ const isAuthorized =
+ session?.user?.role?.subscribed ||
+ session?.user?.pubkey === course?.pubkey ||
+ !paidCourse ||
+ session?.user?.purchased?.some(purchase => purchase.courseId === course?.d)
- if (newIndex !== null) {
- router.push(`/course/${router.query.slug}?active=${newIndex}`, undefined, { shallow: true });
- } else {
- router.push(`/course/${router.query.slug}`, undefined, { shallow: true });
+ const handleLessonSelect = index => {
+ setActiveIndex(index);
+ router.push(`/course/${router.query.slug}?active=${index}`, undefined, { shallow: true });
+
+ // On mobile, switch to content tab after selection
+ if (isMobileView) {
+ setActiveTab('content');
+ setSidebarVisible(false);
}
};
@@ -286,6 +334,141 @@ const Course = () => {
);
};
+ const toggleTab = (index) => {
+ const tabName = getTabMap[index];
+ setActiveTab(tabName);
+
+ // Only show/hide sidebar on mobile - desktop keeps sidebar visible
+ if (isMobileView) {
+ setSidebarVisible(tabName === 'lessons');
+ }
+ };
+
+ const handleToggleSidebar = () => {
+ setSidebarVisible(!sidebarVisible);
+ };
+
+ // Map active tab name back to index for MenuTab
+ const getActiveTabIndex = () => {
+ return getTabMap.indexOf(activeTab);
+ };
+
+ // Create tab items for MenuTab
+ const getTabItems = () => {
+ const items = [
+ {
+ label: 'Overview',
+ icon: 'pi pi-home',
+ },
+ {
+ label: 'Content',
+ icon: 'pi pi-book',
+ }
+ ];
+
+ // Add lessons tab only on mobile
+ if (isMobileView) {
+ items.push({
+ label: 'Lessons',
+ icon: 'pi pi-list',
+ });
+ }
+
+ items.push({
+ label: 'Comments',
+ icon: 'pi pi-comments',
+ });
+
+ return items;
+ };
+
+ // Add keyboard navigation support for tabs
+ useEffect(() => {
+ const handleKeyDown = (e) => {
+ if (e.key === 'ArrowRight') {
+ const currentIndex = getActiveTabIndex();
+ const nextIndex = (currentIndex + 1) % getTabMap.length;
+ toggleTab(nextIndex);
+ } else if (e.key === 'ArrowLeft') {
+ const currentIndex = getActiveTabIndex();
+ const prevIndex = (currentIndex - 1 + getTabMap.length) % getTabMap.length;
+ toggleTab(prevIndex);
+ }
+ };
+
+ document.addEventListener('keydown', handleKeyDown);
+ return () => {
+ document.removeEventListener('keydown', handleKeyDown);
+ };
+ }, [activeTab, getTabMap, toggleTab]);
+
+ // Render the QA section (empty for now)
+ const renderQASection = () => {
+ return (
+
);
diff --git a/src/pages/index.js b/src/pages/index.js
index d6ffa6e..bf5c62f 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -191,7 +191,7 @@ export default function Home() {
className="w-full"
/>
+
+ );
+ };
+ // Render Course Overview section
+ const renderOverviewSection = () => {
+ // Get isCompleted status for use in the component
+ const isCompleted = completedLessons.length > 0;
+
+ return (
+ Comments
+ {nAddress !== null && isAuthorized ? ( +
+
+ ) : (
+
+
+ )}
+ + Comments are only available to content purchasers, subscribers, and the content creator. +
+
+ {isMobileView && course && (
+
+ );
+ };
+
if (courseLoading || decryptionLoading) {
return (
+ {/* Completed tag above image in mobile view */}
+ {isCompleted && (
+
+ )}
+
+
+ )}
+
+ {/* Course image */}
+ {course.image && (
+
+ 
+
+ )}
+
@@ -304,6 +487,7 @@ const Course = () => {
isPaid={paidCourse}
setCompleted={setCompleted}
/>
+
);
} else if (lesson.type === 'video' && !lesson.topics?.includes('document')) {
return (
@@ -330,72 +514,118 @@ const Course = () => {
return (
<>
- {course && paidCourse !== null && (
-
- {uniqueLessons.length > 0 &&
- uniqueLessons.map((lesson, index) => (
-
- {`Lesson ${index + 1}: ${lesson.title}`}
- {completedLessons.includes(lesson.id) ? (
-
+ {/* Tab navigation using MenuTab component */}
+
+ toggleTab(index)}
+ sidebarVisible={sidebarVisible}
+ onToggleSidebar={handleToggleSidebar}
+ isMobileView={isMobileView}
+ />
+
+
+ {/* Revised layout structure to prevent content flexing */}
+
+ {/* Main content area with fixed width */}
+
);
diff --git a/src/pages/draft/[slug]/index.js b/src/pages/draft/[slug]/index.js
index 84e709a..6ccdb3f 100644
--- a/src/pages/draft/[slug]/index.js
+++ b/src/pages/draft/[slug]/index.js
@@ -15,15 +15,11 @@ import { formatDateTime } from '@/utils/time';
import Image from 'next/image';
import useResponsiveImageDimensions from '@/hooks/useResponsiveImageDimensions';
import 'primeicons/primeicons.css';
-import dynamic from 'next/dynamic';
import { validateEvent } from '@/utils/nostr';
import appConfig from '@/config/appConfig';
import { useIsAdmin } from '@/hooks/useIsAdmin';
import { useEncryptContent } from '@/hooks/encryption/useEncryptContent';
-
-const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
- ssr: false,
-});
+import MarkdownDisplay from '@/components/markdown/MarkdownDisplay';
export default function Draft() {
const [draft, setDraft] = useState(null);
@@ -433,7 +429,7 @@ export default function Draft() {
+ {/* Overview tab content */}
+
+
+ {/* Course Sidebar - positioned absolutely on desktop when visible */}
+ {!isMobileView ? (
+
+ {renderOverviewSection()}
+
+
+ {/* Content tab content */}
+
+ {uniqueLessons.length > 0 && uniqueLessons[activeIndex] ? (
+
+
+ {/* QA tab content */}
+
+ {renderLesson(uniqueLessons[activeIndex])}
- }
+ ) : (
+
+
+ )}
+
+ {course?.content && (
+ Select a lesson from the sidebar to begin learning.
+
+
+ )}
+
+ {renderQASection()}
+
+
-
- {renderLesson(lesson)}
- {nAddresses[lesson.id] && (
-
-
- ))}
-
-
- {!paidCourse || decryptionPerformed || session?.user?.role?.subscribed ? (
-
- )}
-
-
- )}
- - Comments are only available to course purchasers, subscribers, and the - course creator. -
-
- {course?.content && {
+ handleLessonSelect(index);
+ if (isMobileView) {
+ setActiveTab('content'); // Use the tab name directly
+ }
+ }}
+ completedLessons={completedLessons}
+ isMobileView={isMobileView}
+ sidebarVisible={sidebarVisible}
+ setSidebarVisible={setSidebarVisible}
+ hideToggleButton={true}
+ />
+
+ ) : (
+
+ {
+ handleLessonSelect(index);
+ if (isMobileView) {
+ setActiveTab('content'); // Use the tab name directly
+ }
+ }}
+ completedLessons={completedLessons}
+ isMobileView={isMobileView}
+ onClose={() => {
+ setSidebarVisible(false);
+ setActiveTab('content');
+ }}
+ sidebarVisible={sidebarVisible}
+ setSidebarVisible={setSidebarVisible}
+ hideToggleButton={true}
+ />
+
+ )}
+
- {draft?.content &&
+