From 34680d244f0320f7e8990aea19767f3595dcfa8c Mon Sep 17 00:00:00 2001
From: kiwihodl <orangeamber@protonmail.com>
Date: Tue, 1 Apr 2025 16:44:02 -0500
Subject: [PATCH 01/22] feat: add backdrop blur to all main application modals

- Add global CSS styles for PrimeReact Dialog component backdrop

- Apply 8px blur effect with semi-transparent black background

- Style dialog components with dark theme matching application design

- Affects all main modals including:

  - User badges and profile modals

  - Subscription and payment modals

  - Course and resource modals

  - Info and form modals
---
 src/styles/globals.css | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index 9a45c40..30d3ed8 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -148,4 +148,32 @@ code {
 /* hide attribution */
 div.react-flow__attribution {
   display: none !important;
+}
+
+/* Dialog backdrop styles */
+.p-dialog-mask {
+    backdrop-filter: blur(8px);
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-dialog {
+    background: #1e1e1e;
+    border: 1px solid #333;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.p-dialog-header {
+    background: #1e1e1e;
+    border-bottom: 1px solid #333;
+    color: #fff;
+}
+
+.p-dialog-content {
+    background: #1e1e1e;
+    color: #fff;
+}
+
+.p-dialog-footer {
+    background: #1e1e1e;
+    border-top: 1px solid #333;
 }
\ No newline at end of file

From 62441e01a00eb0fe351fc6af6f5f3b6dca3fb5c3 Mon Sep 17 00:00:00 2001
From: kiwihodl <orangeamber@protonmail.com>
Date: Wed, 2 Apr 2025 12:16:11 -0500
Subject: [PATCH 02/22] feat: Implement ZapThreads with access control for paid
 content - Add to CourseDetails, CourseTemplate, CourseLesson - Block comments
 for unpaid users - Allow comments for free content and authorized paid users

---
 src/components/ZapThreadsWrapper.js           |  82 +++++++--
 .../carousels/templates/CourseTemplate.js     |  46 ++++-
 .../content/courses/CourseDetails.js          |  51 +++++-
 .../content/courses/CourseLesson.js           | 171 +++++++++++++-----
 4 files changed, 277 insertions(+), 73 deletions(-)

diff --git a/src/components/ZapThreadsWrapper.js b/src/components/ZapThreadsWrapper.js
index 31d6261..4e4f1ad 100644
--- a/src/components/ZapThreadsWrapper.js
+++ b/src/components/ZapThreadsWrapper.js
@@ -1,58 +1,100 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from "react";
 
-const ZapThreadsWrapper = ({ anchor, user, relays, disable, className }) => {
+const ZapThreadsWrapper = ({
+  anchor,
+  user,
+  relays,
+  disable,
+  className,
+  isAuthorized,
+}) => {
   // Create a ref to store the reference to the <div> element
   const zapRef = useRef(null);
 
   useEffect(() => {
+    // Only load the script if the user is authorized
+    if (!isAuthorized) {
+      return;
+    }
+
     // Create a new <script> element
-    const script = document.createElement('script');
+    const script = document.createElement("script");
     // Set the source URL of the script to load the ZapThreads library
-    script.src = 'https://unpkg.com/zapthreads/dist/zapthreads.iife.js';
+    script.src = "https://unpkg.com/zapthreads/dist/zapthreads.iife.js";
     // Set the script to load asynchronously
     script.async = true;
 
     // Function to handle the script load event
     const handleScriptLoad = () => {
       // Create a new <zap-threads> element
-      const zapElement = document.createElement('zap-threads');
-      zapElement.setAttribute('anchor', anchor);
-      if (user) zapElement.setAttribute('user', user);
-      zapElement.setAttribute('relays', relays.replace(/\s/g, ''));
-      if (disable) zapElement.setAttribute('disable', disable);
+      const zapElement = document.createElement("zap-threads");
+      zapElement.setAttribute("anchor", anchor);
 
-      // Remove any existing <zap-threads> element before appending a new one
-      if (zapRef.current && zapRef.current.firstChild) {
-        zapRef.current.removeChild(zapRef.current.firstChild);
+      // Only set user if it exists and is not null
+      if (user) {
+        zapElement.setAttribute("user", user);
       }
 
-      // Append the new <zap-threads> element to the <div> referenced by zapRef
+      // Clean up relay URLs
+      const cleanRelays = relays
+        .split(",")
+        .map((relay) => relay.trim())
+        .filter((relay) => relay)
+        .join(",");
+      zapElement.setAttribute("relays", cleanRelays);
+
+      // Always set disable attribute, even if empty
+      zapElement.setAttribute("disable", disable || "");
+
+      // Add error handling
+      zapElement.addEventListener("error", (e) => {
+        console.error("ZapThreads error:", e);
+      });
+
+      // Remove any existing <zap-threads> element
+      if (zapRef.current) {
+        while (zapRef.current.firstChild) {
+          zapRef.current.removeChild(zapRef.current.firstChild);
+        }
+      }
+
+      // Append the new element
       if (zapRef.current) {
         zapRef.current.appendChild(zapElement);
       }
     };
 
     // Attach the handleScriptLoad function to the script's load event
-    script.addEventListener('load', handleScriptLoad);
+    script.addEventListener("load", handleScriptLoad);
+    script.addEventListener("error", (e) => {
+      console.error("Failed to load ZapThreads script:", e);
+    });
 
     // Append the <script> element to the <body> of the document
     document.body.appendChild(script);
 
     // Cleanup function to remove the <zap-threads> element and the <script> element when the component is unmounted
     return () => {
-      // Remove the <zap-threads> element from the <div> referenced by zapRef
-      if (zapRef.current && zapRef.current.firstChild) {
-        zapRef.current.removeChild(zapRef.current.firstChild);
+      if (zapRef.current) {
+        while (zapRef.current.firstChild) {
+          zapRef.current.removeChild(zapRef.current.firstChild);
+        }
       }
       // Remove the <script> element from the <body> of the document
       document.body.removeChild(script);
       // Remove the load event listener from the script
-      script.removeEventListener('load', handleScriptLoad);
+      script.removeEventListener("load", handleScriptLoad);
     };
-  }, [anchor, user, relays, disable]);
+  }, [anchor, user, relays, disable, isAuthorized]);
+
+  if (!isAuthorized) {
+    return null;
+  }
 
   // Render a <div> element and attach the zapRef to it
-  return <div className={`overflow-x-hidden ${className || ''}`} ref={zapRef} />;
+  return (
+    <div className={`overflow-x-hidden ${className || ""}`} ref={zapRef} />
+  );
 };
 
 export default ZapThreadsWrapper;
diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js
index 5b0f051..1c46f7f 100644
--- a/src/components/content/carousels/templates/CourseTemplate.js
+++ b/src/components/content/carousels/templates/CourseTemplate.js
@@ -22,16 +22,31 @@ import useWindowWidth from '@/hooks/useWindowWidth';
 import GenericButton from '@/components/buttons/GenericButton';
 import appConfig from '@/config/appConfig';
 import { BookOpen } from 'lucide-react';
+import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
 
 export function CourseTemplate({ course, showMetaTags = true }) {
-  const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: course });
+  const { zaps, zapsLoading, zapsError } = useZapsSubscription({
+    event: course,
+  });
   const [zapAmount, setZapAmount] = useState(0);
   const [lessonCount, setLessonCount] = useState(0);
   const [nAddress, setNAddress] = useState(null);
+  const [npub, setNpub] = useState(null);
+  const [nsec, setNsec] = useState(null);
   const router = useRouter();
   const { returnImageProxy } = useImageProxy();
   const windowWidth = useWindowWidth();
   const isMobile = windowWidth < 768;
+  const { data: session } = useSession();
+
+  useEffect(() => {
+    if (session?.user?.privkey) {
+      const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
+      setNsec(nip19.nsecEncode(privkeyBuffer));
+    } else if (session?.user?.pubkey) {
+      setNpub(nip19.npubEncode(session.user.pubkey));
+    }
+  }, [session]);
 
   useEffect(() => {
     if (zaps.length > 0) {
@@ -97,7 +112,9 @@ export function CourseTemplate({ course, showMetaTags = true }) {
       </div>
       <CardHeader className="flex flex-row justify-between items-center p-4 border-b border-gray-700">
         <div className="flex items-center gap-4">
-          <CardTitle className="text-xl sm:text-2xl text-[#f8f8ff]">{course.name}</CardTitle>
+          <CardTitle className="text-xl sm:text-2xl text-[#f8f8ff]">
+            {course.name}
+          </CardTitle>
         </div>
         <div className="text-[#f8f8ff]">
           <ZapDisplay
@@ -173,6 +190,31 @@ export function CourseTemplate({ course, showMetaTags = true }) {
           className="items-center py-2"
         />
       </CardFooter>
+      {nAddress !== null &&
+        (!course?.price ||
+          course.price === 0 ||
+          session?.user?.role?.subscribed ||
+          session?.user?.purchased?.some(
+            (purchase) => purchase.resourceId === course.d
+          )) && (
+          <div className="px-4 pb-4">
+            {nsec || npub ? (
+              <ZapThreadsWrapper
+                anchor={nAddress}
+                user={nsec || npub || null}
+                relays={appConfig.defaultRelayUrls.join(",")}
+                disable="zaps"
+              />
+            ) : (
+              <ZapThreadsWrapper
+                anchor={nAddress}
+                user={npub}
+                relays={appConfig.defaultRelayUrls.join(",")}
+                disable="zaps"
+              />
+            )}
+          </div>
+        )}
     </Card>
   );
 }
diff --git a/src/components/content/courses/CourseDetails.js b/src/components/content/courses/CourseDetails.js
index c2e308d..63e19cd 100644
--- a/src/components/content/courses/CourseDetails.js
+++ b/src/components/content/courses/CourseDetails.js
@@ -120,11 +120,24 @@ export default function CourseDetails({
     }
   }, [zaps, processedEvent]);
 
+  useEffect(() => {
+    if (session?.user?.privkey) {
+      const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
+      setNsec(nip19.nsecEncode(privkeyBuffer));
+    } else if (session?.user?.pubkey) {
+      setNpub(nip19.npubEncode(session.user.pubkey));
+    }
+  }, [session]);
+
   const renderPaymentMessage = () => {
-    if (session?.user && session.user?.role?.subscribed && decryptionPerformed) {
+    if (
+      session?.user &&
+      session.user?.role?.subscribed &&
+      decryptionPerformed
+    ) {
       return (
         <GenericButton
-          tooltipOptions={{ position: 'top' }}
+          tooltipOptions={{ position: "top" }}
           tooltip={`You are subscribed so you can access all paid content`}
           icon="pi pi-check"
           label="Subscribed"
@@ -268,6 +281,40 @@ export default function CourseDetails({
           </div>
           <div className="w-full mt-4">{renderPaymentMessage()}</div>
         </div>
+        {nAddress !== null && (
+          <div className="px-4">
+            {paidCourse ? (
+              // For paid content, only show ZapThreads if user has access
+              processedEvent?.pubkey === session?.user?.pubkey ||
+              decryptionPerformed ||
+              session?.user?.role?.subscribed ? (
+                <ZapThreadsWrapper
+                  anchor={nAddress}
+                  user={session?.user ? nsec || npub : null}
+                  relays={appConfig.defaultRelayUrls.join(",")}
+                  disable="zaps"
+                  isAuthorized={true}
+                />
+              ) : (
+                <div className="text-center p-4 bg-gray-800/50 rounded-lg">
+                  <p className="text-gray-400">
+                    Comments are only available to course purchasers,
+                    subscribers, and the course creator.
+                  </p>
+                </div>
+              )
+            ) : (
+              // For free content, show ZapThreads to everyone
+              <ZapThreadsWrapper
+                anchor={nAddress}
+                user={session?.user ? nsec || npub : null}
+                relays={appConfig.defaultRelayUrls.join(",")}
+                disable="zaps"
+                isAuthorized={true}
+              />
+            )}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/content/courses/CourseLesson.js b/src/components/content/courses/CourseLesson.js
index 3447cce..9239119 100644
--- a/src/components/content/courses/CourseLesson.js
+++ b/src/components/content/courses/CourseLesson.js
@@ -1,26 +1,39 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { Tag } from 'primereact/tag';
-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';
-import useWindowWidth from '@/hooks/useWindowWidth';
-import { nip19 } from 'nostr-tools';
-import appConfig from '@/config/appConfig';
-import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
-import { useSession } from 'next-auth/react';
+import React, { useEffect, useState, useRef } from "react";
+import { Tag } from "primereact/tag";
+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";
+import useWindowWidth from "@/hooks/useWindowWidth";
+import { nip19 } from "nostr-tools";
+import appConfig from "@/config/appConfig";
+import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
+import { useSession } from "next-auth/react";
+import ZapThreadsWrapper from "@/components/ZapThreadsWrapper";
 
-const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
+const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), {
   ssr: false,
 });
 
-const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted }) => {
+const CourseLesson = ({
+  lesson,
+  course,
+  decryptionPerformed,
+  isPaid,
+  setCompleted,
+}) => {
   const [zapAmount, setZapAmount] = useState(0);
-  const { zaps, zapsLoading, zapsError } = useZapsQuery({ event: lesson, type: 'lesson' });
+  const [nAddress, setNAddress] = useState(null);
+  const [nsec, setNsec] = useState(null);
+  const [npub, setNpub] = useState(null);
+  const { zaps, zapsLoading, zapsError } = useZapsQuery({
+    event: lesson,
+    type: "lesson",
+  });
   const { returnImageProxy } = useImageProxy();
   const menuRef = useRef(null);
   const toastRef = useRef(null);
@@ -28,42 +41,46 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
   const isMobileView = windowWidth <= 768;
   const { data: session } = useSession();
 
-  const readTime = lesson?.content ? Math.max(30, Math.ceil(lesson.content.length / 20)) : 60;
+  const readTime = lesson?.content
+    ? Math.max(30, Math.ceil(lesson.content.length / 20))
+    : 60;
 
-  const { isCompleted, isTracking, markLessonAsCompleted } = useTrackDocumentLesson({
-    lessonId: lesson?.d,
-    courseId: course?.d,
-    readTime,
-    paidCourse: isPaid,
-    decryptionPerformed,
-  });
+  const { isCompleted, isTracking, markLessonAsCompleted } =
+    useTrackDocumentLesson({
+      lessonId: lesson?.d,
+      courseId: course?.d,
+      readTime,
+      paidCourse: isPaid,
+      decryptionPerformed,
+    });
 
   const buildMenuItems = () => {
     const items = [];
 
     const hasAccess =
-      session?.user && (!isPaid || decryptionPerformed || session.user.role?.subscribed);
+      session?.user &&
+      (!isPaid || decryptionPerformed || session.user.role?.subscribed);
 
     if (hasAccess) {
       items.push({
-        label: 'Mark as completed',
-        icon: 'pi pi-check-circle',
+        label: "Mark as completed",
+        icon: "pi pi-check-circle",
         command: async () => {
           try {
             await markLessonAsCompleted();
             setCompleted && setCompleted(lesson.id);
             toastRef.current.show({
-              severity: 'success',
-              summary: 'Success',
-              detail: 'Lesson marked as completed',
+              severity: "success",
+              summary: "Success",
+              detail: "Lesson marked as completed",
               life: 3000,
             });
           } catch (error) {
-            console.error('Failed to mark lesson as completed:', error);
+            console.error("Failed to mark lesson as completed:", error);
             toastRef.current.show({
-              severity: 'error',
-              summary: 'Error',
-              detail: 'Failed to mark lesson as completed',
+              severity: "error",
+              summary: "Error",
+              detail: "Failed to mark lesson as completed",
               life: 3000,
             });
           }
@@ -72,16 +89,16 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
     }
 
     items.push({
-      label: 'Open lesson',
-      icon: 'pi pi-arrow-up-right',
+      label: "Open lesson",
+      icon: "pi pi-arrow-up-right",
       command: () => {
-        window.open(`/details/${lesson.id}`, '_blank');
+        window.open(`/details/${lesson.id}`, "_blank");
       },
     });
 
     items.push({
-      label: 'View Nostr note',
-      icon: 'pi pi-globe',
+      label: "View Nostr note",
+      icon: "pi pi-globe",
       command: () => {
         if (lesson?.d) {
           const addr = nip19.naddrEncode({
@@ -90,7 +107,7 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
             identifier: lesson.d,
             relays: appConfig.defaultRelayUrls || [],
           });
-          window.open(`https://habla.news/a/${addr}`, '_blank');
+          window.open(`https://habla.news/a/${addr}`, "_blank");
         }
       },
     });
@@ -112,9 +129,32 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
     }
   }, [isCompleted, isTracking, lesson.id, setCompleted]);
 
+  useEffect(() => {
+    if (session?.user?.privkey) {
+      const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
+      setNsec(nip19.nsecEncode(privkeyBuffer));
+    } else if (session?.user?.pubkey) {
+      setNpub(nip19.npubEncode(session.user.pubkey));
+    }
+  }, [session]);
+
+  useEffect(() => {
+    if (lesson) {
+      const addr = nip19.naddrEncode({
+        pubkey: lesson.pubkey,
+        kind: lesson.kind,
+        identifier: lesson.d,
+        relays: appConfig.defaultRelayUrls,
+      });
+      setNAddress(addr);
+    }
+  }, [lesson]);
+
   const renderContent = () => {
     if (isPaid && decryptionPerformed) {
-      return <MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />;
+      return (
+        <MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />
+      );
     }
     if (isPaid && !decryptionPerformed) {
       return (
@@ -124,7 +164,9 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
       );
     }
     if (lesson?.content) {
-      return <MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />;
+      return (
+        <MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />
+      );
     }
     return null;
   };
@@ -137,20 +179,28 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
           <div className="flex flex-col items-start max-w-[45vw] max-tab:max-w-[100vw] max-mob:max-w-[100vw]">
             <div className="flex flex-row items-center justify-between w-full">
               <h1 className="text-4xl">{lesson?.title}</h1>
-              <ZapDisplay zapAmount={zapAmount} event={lesson} zapsLoading={zapsLoading} />
+              <ZapDisplay
+                zapAmount={zapAmount}
+                event={lesson}
+                zapsLoading={zapsLoading}
+              />
             </div>
             <div className="pt-2 flex flex-row justify-start w-full mt-2 mb-4">
               {lesson &&
                 lesson.topics &&
                 lesson.topics.length > 0 &&
                 lesson.topics.map((topic, index) => (
-                  <Tag className="mr-2 text-white" key={index} value={topic}></Tag>
+                  <Tag
+                    className="mr-2 text-white"
+                    key={index}
+                    value={topic}
+                  ></Tag>
                 ))}
             </div>
             <div className="text-xl mt-6">
               {lesson?.summary && (
                 <div className="text-xl mt-4">
-                  {lesson.summary.split('\n').map((line, index) => (
+                  {lesson.summary.split("\n").map((line, index) => (
                     <p key={index}>{line}</p>
                   ))}
                 </div>
@@ -160,13 +210,16 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
               <div className="flex flex-row w-fit items-center">
                 <Image
                   alt="avatar thumbnail"
-                  src={returnImageProxy(lesson.author?.avatar, lesson.author?.pubkey)}
+                  src={returnImageProxy(
+                    lesson.author?.avatar,
+                    lesson.author?.pubkey
+                  )}
                   width={50}
                   height={50}
                   className="rounded-full mr-4"
                 />
                 <p className="text-lg">
-                  Created by{' '}
+                  Created by{" "}
                   <a
                     rel="noreferrer noopener"
                     target="_blank"
@@ -203,6 +256,26 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
       <div className="w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]">
         {renderContent()}
       </div>
+      {nAddress !== null &&
+        (!isPaid || decryptionPerformed || session?.user?.role?.subscribed) && (
+          <div className="px-4">
+            {nsec || npub ? (
+              <ZapThreadsWrapper
+                anchor={nAddress}
+                user={nsec || npub || null}
+                relays={appConfig.defaultRelayUrls.join(",")}
+                disable="zaps"
+              />
+            ) : (
+              <ZapThreadsWrapper
+                anchor={nAddress}
+                user={npub}
+                relays={appConfig.defaultRelayUrls.join(",")}
+                disable="zaps"
+              />
+            )}
+          </div>
+        )}
     </div>
   );
 };

From 07e94fbb40861ba4478529cd6360ef41e77842cc Mon Sep 17 00:00:00 2001
From: kiwihodl <orangeamber@protonmail.com>
Date: Wed, 2 Apr 2025 16:38:37 -0500
Subject: [PATCH 03/22] feat: implement ZapThreads comments for all content
 types (video, document, combined) and course pages

---
 .../content/combined/CombinedDetails.js       | 173 ++++++++++-----
 .../content/documents/DocumentDetails.js      | 178 +++++++++++-----
 src/components/content/videos/VideoDetails.js | 196 +++++++++++------
 src/pages/course/[slug]/index.js              | 201 +++++++++++++-----
 4 files changed, 523 insertions(+), 225 deletions(-)

diff --git a/src/components/content/combined/CombinedDetails.js b/src/components/content/combined/CombinedDetails.js
index e254b7e..102d3d3 100644
--- a/src/components/content/combined/CombinedDetails.js
+++ b/src/components/content/combined/CombinedDetails.js
@@ -1,22 +1,27 @@
-import React, { useEffect, useState, 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 ResourcePaymentButton from '@/components/bitcoinConnect/ResourcePaymentButton';
-import ZapDisplay from '@/components/zaps/ZapDisplay';
-import GenericButton from '@/components/buttons/GenericButton';
-import { useImageProxy } from '@/hooks/useImageProxy';
-import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
-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 React, { useEffect, useState, 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 ResourcePaymentButton from "@/components/bitcoinConnect/ResourcePaymentButton";
+import ZapDisplay from "@/components/zaps/ZapDisplay";
+import GenericButton from "@/components/buttons/GenericButton";
+import { useImageProxy } from "@/hooks/useImageProxy";
+import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription";
+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 });
+const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), {
+  ssr: false,
+});
 
 const CombinedDetails = ({
   processedEvent,
@@ -45,62 +50,72 @@ const CombinedDetails = ({
   const isMobileView = windowWidth <= 768;
   const menuRef = useRef(null);
   const toastRef = useRef(null);
+  const [nsec, setNsec] = useState(null);
+  const [npub, setNpub] = useState(null);
 
   const handleDelete = async () => {
     try {
       const response = await axios.delete(`/api/resources/${processedEvent.d}`);
       if (response.status === 204) {
-        showToast('success', 'Success', 'Resource deleted successfully.');
-        router.push('/');
+        showToast("success", "Success", "Resource deleted successfully.");
+        router.push("/");
       }
     } catch (error) {
-      if (error.response?.data?.error?.includes('Invalid `prisma.resource.delete()`')) {
+      if (
+        error.response?.data?.error?.includes(
+          "Invalid `prisma.resource.delete()`"
+        )
+      ) {
         showToast(
-          'error',
-          'Error',
-          'Resource cannot be deleted because it is part of a course, delete the course first.'
+          "error",
+          "Error",
+          "Resource cannot be deleted because it is part of a course, delete the course first."
         );
       } else {
-        showToast('error', 'Error', 'Failed to delete resource. Please try again.');
+        showToast(
+          "error",
+          "Error",
+          "Failed to delete resource. Please try again."
+        );
       }
     }
   };
 
   const authorMenuItems = [
     {
-      label: 'Edit',
-      icon: 'pi pi-pencil',
+      label: "Edit",
+      icon: "pi pi-pencil",
       command: () => router.push(`/details/${processedEvent.id}/edit`),
     },
     {
-      label: 'Delete',
-      icon: 'pi pi-trash',
+      label: "Delete",
+      icon: "pi pi-trash",
       command: handleDelete,
     },
     {
-      label: 'View Nostr note',
-      icon: 'pi pi-globe',
+      label: "View Nostr note",
+      icon: "pi pi-globe",
       command: () => {
-        window.open(`https://habla.news/a/${nAddress}`, '_blank');
+        window.open(`https://habla.news/a/${nAddress}`, "_blank");
       },
     },
   ];
 
   const userMenuItems = [
     {
-      label: 'View Nostr note',
-      icon: 'pi pi-globe',
+      label: "View Nostr note",
+      icon: "pi pi-globe",
       command: () => {
-        window.open(`https://habla.news/a/${nAddress}`, '_blank');
+        window.open(`https://habla.news/a/${nAddress}`, "_blank");
       },
     },
   ];
 
   if (course) {
     userMenuItems.unshift({
-      label: isMobileView ? 'Course' : 'Open Course',
-      icon: 'pi pi-external-link',
-      command: () => window.open(`/course/${course}`, '_blank'),
+      label: isMobileView ? "Course" : "Open Course",
+      icon: "pi pi-external-link",
+      command: () => window.open(`/course/${course}`, "_blank"),
     });
   }
 
@@ -108,13 +123,13 @@ const CombinedDetails = ({
     if (isLesson) {
       axios
         .get(`/api/resources/${processedEvent.d}`)
-        .then(res => {
+        .then((res) => {
           if (res.data && res.data.lessons[0]?.courseId) {
             setCourse(res.data.lessons[0]?.courseId);
           }
         })
-        .catch(err => {
-          console.error('err', err);
+        .catch((err) => {
+          console.error("err", err);
         });
     }
   }, [processedEvent.d, isLesson]);
@@ -126,11 +141,20 @@ const CombinedDetails = ({
     }
   }, [zaps, processedEvent]);
 
+  useEffect(() => {
+    if (session?.user?.privkey) {
+      const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
+      setNsec(nip19.nsecEncode(privkeyBuffer));
+    } else if (session?.user?.pubkey) {
+      setNpub(nip19.npubEncode(session.user.pubkey));
+    }
+  }, [session]);
+
   const renderPaymentMessage = () => {
     if (session?.user?.role?.subscribed && decryptedContent) {
       return (
         <GenericButton
-          tooltipOptions={{ position: 'top' }}
+          tooltipOptions={{ position: "top" }}
           tooltip="You are subscribed so you can access all paid content"
           icon="pi pi-check"
           label="Subscribed"
@@ -145,14 +169,14 @@ const CombinedDetails = ({
     if (
       isLesson &&
       course &&
-      session?.user?.purchased?.some(purchase => purchase.courseId === course)
+      session?.user?.purchased?.some((purchase) => purchase.courseId === course)
     ) {
       const coursePurchase = session?.user?.purchased?.find(
-        purchase => purchase.courseId === course
+        (purchase) => purchase.courseId === course
       );
       return (
         <GenericButton
-          tooltipOptions={{ position: 'top' }}
+          tooltipOptions={{ position: "top" }}
           tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${coursePurchase?.course?.price} sats for the course.`}
           icon="pi pi-check"
           label={`Paid ${coursePurchase?.course?.price} sats`}
@@ -183,10 +207,14 @@ const CombinedDetails = ({
       );
     }
 
-    if (paidResource && author && processedEvent?.pubkey === session?.user?.pubkey) {
+    if (
+      paidResource &&
+      author &&
+      processedEvent?.pubkey === session?.user?.pubkey
+    ) {
       return (
         <GenericButton
-          tooltipOptions={{ position: 'top' }}
+          tooltipOptions={{ position: "top" }}
           tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`}
           icon="pi pi-check"
           label={`Price ${processedEvent.price} sats`}
@@ -203,7 +231,12 @@ const CombinedDetails = ({
 
   const renderContent = () => {
     if (decryptedContent) {
-      return <MDDisplay className="p-2 rounded-lg w-full" source={decryptedContent} />;
+      return (
+        <MDDisplay
+          className="p-2 rounded-lg w-full"
+          source={decryptedContent}
+        />
+      );
     }
 
     if (paidResource && !decryptedContent) {
@@ -231,7 +264,12 @@ const CombinedDetails = ({
     }
 
     if (processedEvent?.content) {
-      return <MDDisplay className="p-4 rounded-lg w-full" source={processedEvent.content} />;
+      return (
+        <MDDisplay
+          className="p-4 rounded-lg w-full"
+          source={processedEvent.content}
+        />
+      );
     }
 
     return null;
@@ -241,7 +279,12 @@ const CombinedDetails = ({
     <div className="w-full">
       <Toast ref={toastRef} />
       <div className="relative w-full h-[400px] mb-8">
-        <Image alt="background image" src={returnImageProxy(image)} fill className="object-cover" />
+        <Image
+          alt="background image"
+          src={returnImageProxy(image)}
+          fill
+          className="object-cover"
+        />
         <div className="absolute inset-0 bg-black bg-opacity-20"></div>
       </div>
       <div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10 max-mob:px-0 max-tab:px-0">
@@ -258,9 +301,11 @@ const CombinedDetails = ({
             {topics?.map((topic, index) => (
               <Tag className="text-[#f8f8ff]" key={index} value={topic} />
             ))}
-            {isLesson && <Tag size="small" className="text-[#f8f8ff]" value="lesson" />}
+            {isLesson && (
+              <Tag size="small" className="text-[#f8f8ff]" value="lesson" />
+            )}
           </div>
-          {summary?.split('\n').map((line, index) => (
+          {summary?.split("\n").map((line, index) => (
             <p key={index}>{line}</p>
           ))}
           <div className="flex items-center justify-between mt-8">
@@ -273,7 +318,7 @@ const CombinedDetails = ({
                 className="rounded-full mr-4"
               />
               <p className="text-lg text-white">
-                By{' '}
+                By{" "}
                 <a
                   rel="noreferrer noopener"
                   target="_blank"
@@ -292,6 +337,28 @@ const CombinedDetails = ({
             </div>
           </div>
           <div className="w-full mt-4">{renderPaymentMessage()}</div>
+          {nAddress && (
+            <div className="mt-8">
+              {!paidResource ||
+              decryptedContent ||
+              session?.user?.role?.subscribed ? (
+                <ZapThreadsWrapper
+                  anchor={nAddress}
+                  user={session?.user ? nsec || npub : null}
+                  relays={appConfig.defaultRelayUrls.join(",")}
+                  disable="zaps"
+                  isAuthorized={true}
+                />
+              ) : (
+                <div className="text-center p-4 bg-gray-800/50 rounded-lg">
+                  <p className="text-gray-400">
+                    Comments are only available to content purchasers,
+                    subscribers, and the content creator.
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
         </div>
         {renderContent()}
       </div>
diff --git a/src/components/content/documents/DocumentDetails.js b/src/components/content/documents/DocumentDetails.js
index 6d91805..8164aea 100644
--- a/src/components/content/documents/DocumentDetails.js
+++ b/src/components/content/documents/DocumentDetails.js
@@ -1,22 +1,25 @@
-import React, { useEffect, useState, 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 ResourcePaymentButton from '@/components/bitcoinConnect/ResourcePaymentButton';
-import ZapDisplay from '@/components/zaps/ZapDisplay';
-import GenericButton from '@/components/buttons/GenericButton';
-import { useImageProxy } from '@/hooks/useImageProxy';
-import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
-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 React, { useEffect, useState, 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 ResourcePaymentButton from "@/components/bitcoinConnect/ResourcePaymentButton";
+import ZapDisplay from "@/components/zaps/ZapDisplay";
+import GenericButton from "@/components/buttons/GenericButton";
+import { useImageProxy } from "@/hooks/useImageProxy";
+import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription";
+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'), {
+const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), {
   ssr: false,
 });
 
@@ -40,75 +43,87 @@ const DocumentDetails = ({
   const [course, setCourse] = useState(null);
   const router = useRouter();
   const { returnImageProxy } = useImageProxy();
-  const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: processedEvent });
+  const { zaps, zapsLoading, zapsError } = useZapsSubscription({
+    event: processedEvent,
+  });
   const { data: session, status } = useSession();
   const { showToast } = useToast();
   const windowWidth = useWindowWidth();
   const isMobileView = windowWidth <= 768;
   const menuRef = useRef(null);
   const toastRef = useRef(null);
+  const [nsec, setNsec] = useState(null);
+  const [npub, setNpub] = useState(null);
 
   const handleDelete = async () => {
     try {
       const response = await axios.delete(`/api/resources/${processedEvent.d}`);
       if (response.status === 204) {
-        showToast('success', 'Success', 'Resource deleted successfully.');
-        router.push('/');
+        showToast("success", "Success", "Resource deleted successfully.");
+        router.push("/");
       }
     } catch (error) {
       if (
         error.response &&
         error.response.data &&
-        error.response.data.error.includes('Invalid `prisma.resource.delete()`')
+        error.response.data.error.includes("Invalid `prisma.resource.delete()`")
       ) {
         showToast(
-          'error',
-          'Error',
-          'Resource cannot be deleted because it is part of a course, delete the course first.'
+          "error",
+          "Error",
+          "Resource cannot be deleted because it is part of a course, delete the course first."
         );
-      } else if (error.response && error.response.data && error.response.data.error) {
-        showToast('error', 'Error', error.response.data.error);
+      } else if (
+        error.response &&
+        error.response.data &&
+        error.response.data.error
+      ) {
+        showToast("error", "Error", error.response.data.error);
       } else {
-        showToast('error', 'Error', 'Failed to delete resource. Please try again.');
+        showToast(
+          "error",
+          "Error",
+          "Failed to delete resource. Please try again."
+        );
       }
     }
   };
 
   const authorMenuItems = [
     {
-      label: 'Edit',
-      icon: 'pi pi-pencil',
+      label: "Edit",
+      icon: "pi pi-pencil",
       command: () => router.push(`/details/${processedEvent.id}/edit`),
     },
     {
-      label: 'Delete',
-      icon: 'pi pi-trash',
+      label: "Delete",
+      icon: "pi pi-trash",
       command: handleDelete,
     },
     {
-      label: 'View Nostr note',
-      icon: 'pi pi-globe',
+      label: "View Nostr note",
+      icon: "pi pi-globe",
       command: () => {
-        window.open(`https://habla.news/a/${nAddress}`, '_blank');
+        window.open(`https://habla.news/a/${nAddress}`, "_blank");
       },
     },
   ];
 
   const userMenuItems = [
     {
-      label: 'View Nostr note',
-      icon: 'pi pi-globe',
+      label: "View Nostr note",
+      icon: "pi pi-globe",
       command: () => {
-        window.open(`https://habla.news/a/${nAddress}`, '_blank');
+        window.open(`https://habla.news/a/${nAddress}`, "_blank");
       },
     },
   ];
 
   if (course) {
     userMenuItems.unshift({
-      label: isMobileView ? 'Course' : 'Open Course',
-      icon: 'pi pi-external-link',
-      command: () => window.open(`/course/${course}`, '_blank'),
+      label: isMobileView ? "Course" : "Open Course",
+      icon: "pi pi-external-link",
+      command: () => window.open(`/course/${course}`, "_blank"),
     });
   }
 
@@ -123,22 +138,31 @@ const DocumentDetails = ({
     if (isLesson) {
       axios
         .get(`/api/resources/${processedEvent.d}`)
-        .then(res => {
+        .then((res) => {
           if (res.data && res.data.lessons[0]?.courseId) {
             setCourse(res.data.lessons[0]?.courseId);
           }
         })
-        .catch(err => {
-          console.error('err', err);
+        .catch((err) => {
+          console.error("err", err);
         });
     }
   }, [processedEvent.d, isLesson]);
 
+  useEffect(() => {
+    if (session?.user?.privkey) {
+      const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
+      setNsec(nip19.nsecEncode(privkeyBuffer));
+    } else if (session?.user?.pubkey) {
+      setNpub(nip19.npubEncode(session.user.pubkey));
+    }
+  }, [session]);
+
   const renderPaymentMessage = () => {
     if (session?.user && session.user?.role?.subscribed && decryptedContent) {
       return (
         <GenericButton
-          tooltipOptions={{ position: 'top' }}
+          tooltipOptions={{ position: "top" }}
           tooltip={`You are subscribed so you can access all paid content`}
           icon="pi pi-check"
           label="Subscribed"
@@ -154,12 +178,16 @@ const DocumentDetails = ({
     if (
       isLesson &&
       course &&
-      session?.user?.purchased?.some(purchase => purchase.courseId === course)
+      session?.user?.purchased?.some((purchase) => purchase.courseId === course)
     ) {
       return (
         <GenericButton
-          tooltipOptions={{ position: 'top' }}
-          tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${session?.user?.purchased?.find(purchase => purchase.courseId === course)?.course?.price} sats for the course.`}
+          tooltipOptions={{ position: "top" }}
+          tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${
+            session?.user?.purchased?.find(
+              (purchase) => purchase.courseId === course
+            )?.course?.price
+          } sats for the course.`}
           icon="pi pi-check"
           label={`Paid`}
           severity="success"
@@ -185,16 +213,20 @@ const DocumentDetails = ({
           outlined
           size="small"
           tooltip={`You paid ${processedEvent.price} sats to access this content (or potentially less if a discount was applied)`}
-          tooltipOptions={{ position: 'top' }}
+          tooltipOptions={{ position: "top" }}
           className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0"
         />
       );
     }
 
-    if (paidResource && author && processedEvent?.pubkey === session?.user?.pubkey) {
+    if (
+      paidResource &&
+      author &&
+      processedEvent?.pubkey === session?.user?.pubkey
+    ) {
       return (
         <GenericButton
-          tooltipOptions={{ position: 'top' }}
+          tooltipOptions={{ position: "top" }}
           tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`}
           icon="pi pi-check"
           label={`Price ${processedEvent.price} sats`}
@@ -211,7 +243,12 @@ const DocumentDetails = ({
 
   const renderContent = () => {
     if (decryptedContent) {
-      return <MDDisplay className="p-2 rounded-lg w-full" source={decryptedContent} />;
+      return (
+        <MDDisplay
+          className="p-2 rounded-lg w-full"
+          source={decryptedContent}
+        />
+      );
     }
     if (paidResource && !decryptedContent) {
       return (
@@ -237,7 +274,12 @@ const DocumentDetails = ({
       );
     }
     if (processedEvent?.content) {
-      return <MDDisplay className="p-4 rounded-lg w-full" source={processedEvent.content} />;
+      return (
+        <MDDisplay
+          className="p-4 rounded-lg w-full"
+          source={processedEvent.content}
+        />
+      );
     }
     return null;
   };
@@ -270,9 +312,11 @@ const DocumentDetails = ({
               topics.map((topic, index) => (
                 <Tag className="text-[#f8f8ff]" key={index} value={topic}></Tag>
               ))}
-            {isLesson && <Tag size="small" className="text-[#f8f8ff]" value="lesson" />}
+            {isLesson && (
+              <Tag size="small" className="text-[#f8f8ff]" value="lesson" />
+            )}
           </div>
-          {summary?.split('\n').map((line, index) => (
+          {summary?.split("\n").map((line, index) => (
             <p key={index}>{line}</p>
           ))}
           <div className="flex items-center justify-between mt-8">
@@ -285,7 +329,7 @@ const DocumentDetails = ({
                 className="rounded-full mr-4"
               />
               <p className="text-lg text-white">
-                By{' '}
+                By{" "}
                 <a
                   rel="noreferrer noopener"
                   target="_blank"
@@ -304,6 +348,28 @@ const DocumentDetails = ({
             </div>
           </div>
           <div className="w-full mt-4">{renderPaymentMessage()}</div>
+          {nAddress && (
+            <div className="mt-8">
+              {!paidResource ||
+              decryptedContent ||
+              session?.user?.role?.subscribed ? (
+                <ZapThreadsWrapper
+                  anchor={nAddress}
+                  user={session?.user ? nsec || npub : null}
+                  relays={appConfig.defaultRelayUrls.join(",")}
+                  disable="zaps"
+                  isAuthorized={true}
+                />
+              ) : (
+                <div className="text-center p-4 bg-gray-800/50 rounded-lg">
+                  <p className="text-gray-400">
+                    Comments are only available to content purchasers,
+                    subscribers, and the content creator.
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
         </div>
         {renderContent()}
       </div>
diff --git a/src/components/content/videos/VideoDetails.js b/src/components/content/videos/VideoDetails.js
index f9219aa..5870485 100644
--- a/src/components/content/videos/VideoDetails.js
+++ b/src/components/content/videos/VideoDetails.js
@@ -1,22 +1,25 @@
-import React, { useEffect, useState, 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 ResourcePaymentButton from '@/components/bitcoinConnect/ResourcePaymentButton';
-import ZapDisplay from '@/components/zaps/ZapDisplay';
-import GenericButton from '@/components/buttons/GenericButton';
-import { useImageProxy } from '@/hooks/useImageProxy';
-import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
-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 React, { useEffect, useState, 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 ResourcePaymentButton from "@/components/bitcoinConnect/ResourcePaymentButton";
+import ZapDisplay from "@/components/zaps/ZapDisplay";
+import GenericButton from "@/components/buttons/GenericButton";
+import { useImageProxy } from "@/hooks/useImageProxy";
+import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription";
+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'), {
+const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), {
   ssr: false,
 });
 
@@ -40,75 +43,87 @@ const VideoDetails = ({
   const [course, setCourse] = useState(null);
   const router = useRouter();
   const { returnImageProxy } = useImageProxy();
-  const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: processedEvent });
+  const { zaps, zapsLoading, zapsError } = useZapsSubscription({
+    event: processedEvent,
+  });
   const { data: session, status } = useSession();
   const { showToast } = useToast();
   const windowWidth = useWindowWidth();
   const isMobileView = windowWidth <= 768;
   const menuRef = useRef(null);
   const toastRef = useRef(null);
+  const [nsec, setNsec] = useState(null);
+  const [npub, setNpub] = useState(null);
 
   const handleDelete = async () => {
     try {
       const response = await axios.delete(`/api/resources/${processedEvent.d}`);
       if (response.status === 204) {
-        showToast('success', 'Success', 'Resource deleted successfully.');
-        router.push('/');
+        showToast("success", "Success", "Resource deleted successfully.");
+        router.push("/");
       }
     } catch (error) {
       if (
         error.response &&
         error.response.data &&
-        error.response.data.error.includes('Invalid `prisma.resource.delete()`')
+        error.response.data.error.includes("Invalid `prisma.resource.delete()`")
       ) {
         showToast(
-          'error',
-          'Error',
-          'Resource cannot be deleted because it is part of a course, delete the course first.'
+          "error",
+          "Error",
+          "Resource cannot be deleted because it is part of a course, delete the course first."
         );
-      } else if (error.response && error.response.data && error.response.data.error) {
-        showToast('error', 'Error', error.response.data.error);
+      } else if (
+        error.response &&
+        error.response.data &&
+        error.response.data.error
+      ) {
+        showToast("error", "Error", error.response.data.error);
       } else {
-        showToast('error', 'Error', 'Failed to delete resource. Please try again.');
+        showToast(
+          "error",
+          "Error",
+          "Failed to delete resource. Please try again."
+        );
       }
     }
   };
 
   const authorMenuItems = [
     {
-      label: 'Edit',
-      icon: 'pi pi-pencil',
+      label: "Edit",
+      icon: "pi pi-pencil",
       command: () => router.push(`/details/${processedEvent.id}/edit`),
     },
     {
-      label: 'Delete',
-      icon: 'pi pi-trash',
+      label: "Delete",
+      icon: "pi pi-trash",
       command: handleDelete,
     },
     {
-      label: 'View Nostr note',
-      icon: 'pi pi-globe',
+      label: "View Nostr note",
+      icon: "pi pi-globe",
       command: () => {
-        window.open(`https://habla.news/a/${nAddress}`, '_blank');
+        window.open(`https://habla.news/a/${nAddress}`, "_blank");
       },
     },
   ];
 
   const userMenuItems = [
     {
-      label: 'View Nostr note',
-      icon: 'pi pi-globe',
+      label: "View Nostr note",
+      icon: "pi pi-globe",
       command: () => {
-        window.open(`https://habla.news/a/${nAddress}`, '_blank');
+        window.open(`https://habla.news/a/${nAddress}`, "_blank");
       },
     },
   ];
 
   if (course) {
     userMenuItems.unshift({
-      label: isMobileView ? 'Course' : 'Open Course',
-      icon: 'pi pi-external-link',
-      command: () => window.open(`/course/${course}`, '_blank'),
+      label: isMobileView ? "Course" : "Open Course",
+      icon: "pi pi-external-link",
+      command: () => window.open(`/course/${course}`, "_blank"),
     });
   }
 
@@ -116,13 +131,13 @@ const VideoDetails = ({
     if (isLesson) {
       axios
         .get(`/api/resources/${processedEvent.d}`)
-        .then(res => {
+        .then((res) => {
           if (res.data && res.data.lessons[0]?.courseId) {
             setCourse(res.data.lessons[0]?.courseId);
           }
         })
-        .catch(err => {
-          console.error('err', err);
+        .catch((err) => {
+          console.error("err", err);
         });
     }
   }, [processedEvent.d, isLesson]);
@@ -134,11 +149,20 @@ const VideoDetails = ({
     }
   }, [zaps, processedEvent]);
 
+  useEffect(() => {
+    if (session?.user?.privkey) {
+      const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
+      setNsec(nip19.nsecEncode(privkeyBuffer));
+    } else if (session?.user?.pubkey) {
+      setNpub(nip19.npubEncode(session.user.pubkey));
+    }
+  }, [session]);
+
   const renderPaymentMessage = () => {
     if (session?.user && session.user?.role?.subscribed && decryptedContent) {
       return (
         <GenericButton
-          tooltipOptions={{ position: 'top' }}
+          tooltipOptions={{ position: "top" }}
           tooltip={`You are subscribed so you can access all paid content`}
           icon="pi pi-check"
           label="Subscribed"
@@ -153,14 +177,22 @@ const VideoDetails = ({
     if (
       isLesson &&
       course &&
-      session?.user?.purchased?.some(purchase => purchase.courseId === course)
+      session?.user?.purchased?.some((purchase) => purchase.courseId === course)
     ) {
       return (
         <GenericButton
-          tooltipOptions={{ position: 'top' }}
-          tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${session?.user?.purchased?.find(purchase => purchase.courseId === course)?.course?.price} sats for the course.`}
+          tooltipOptions={{ position: "top" }}
+          tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${
+            session?.user?.purchased?.find(
+              (purchase) => purchase.courseId === course
+            )?.course?.price
+          } sats for the course.`}
           icon="pi pi-check"
-          label={`Paid ${session?.user?.purchased?.find(purchase => purchase.courseId === course)?.course?.price} sats`}
+          label={`Paid ${
+            session?.user?.purchased?.find(
+              (purchase) => purchase.courseId === course
+            )?.course?.price
+          } sats`}
           severity="success"
           outlined
           size="small"
@@ -188,10 +220,14 @@ const VideoDetails = ({
       );
     }
 
-    if (paidResource && author && processedEvent?.pubkey === session?.user?.pubkey) {
+    if (
+      paidResource &&
+      author &&
+      processedEvent?.pubkey === session?.user?.pubkey
+    ) {
       return (
         <GenericButton
-          tooltipOptions={{ position: 'top' }}
+          tooltipOptions={{ position: "top" }}
           tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`}
           icon="pi pi-check"
           label={`Price ${processedEvent.price} sats`}
@@ -208,7 +244,12 @@ const VideoDetails = ({
 
   const renderContent = () => {
     if (decryptedContent) {
-      return <MDDisplay className="p-0 rounded-lg w-full" source={decryptedContent} />;
+      return (
+        <MDDisplay
+          className="p-0 rounded-lg w-full"
+          source={decryptedContent}
+        />
+      );
     }
     if (paidResource && !decryptedContent) {
       return (
@@ -217,8 +258,8 @@ const VideoDetails = ({
             className="absolute inset-0 opacity-50"
             style={{
               backgroundImage: `url(${image})`,
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
+              backgroundSize: "cover",
+              backgroundPosition: "center",
             }}
           ></div>
           <div className="absolute inset-0 bg-black bg-opacity-50"></div>
@@ -241,7 +282,12 @@ const VideoDetails = ({
       );
     }
     if (processedEvent?.content) {
-      return <MDDisplay className="p-0 rounded-lg w-full" source={processedEvent.content} />;
+      return (
+        <MDDisplay
+          className="p-0 rounded-lg w-full"
+          source={processedEvent.content}
+        />
+      );
     }
     return null;
   };
@@ -251,7 +297,9 @@ const VideoDetails = ({
       <Toast ref={toastRef} />
       {renderContent()}
       <div className="bg-gray-800/90 rounded-lg p-4 m-4 max-mob:m-0 max-tab:m-0 max-mob:rounded-t-none max-tab:rounded-t-none">
-        <div className={`w-full flex flex-col items-start justify-start mt-2 px-2`}>
+        <div
+          className={`w-full flex flex-col items-start justify-start mt-2 px-2`}
+        >
           <div className="flex flex-col items-start gap-2 w-full">
             <div className="flex flex-row items-center justify-between gap-2 w-full">
               <h1 className="text-4xl flex-grow">{title}</h1>
@@ -265,14 +313,18 @@ const VideoDetails = ({
               {topics &&
                 topics.length > 0 &&
                 topics.map((topic, index) => (
-                  <Tag className="mt-2 text-white" key={index} value={topic}></Tag>
+                  <Tag
+                    className="mt-2 text-white"
+                    key={index}
+                    value={topic}
+                  ></Tag>
                 ))}
               {isLesson && <Tag className="mt-2 text-white" value="lesson" />}
             </div>
           </div>
           <div className="flex flex-row items-center justify-between w-full">
             <div className="my-4 max-mob:text-base max-tab:text-base">
-              {summary?.split('\n').map((line, index) => (
+              {summary?.split("\n").map((line, index) => (
                 <p key={index}>{line}</p>
               ))}
             </div>
@@ -287,7 +339,7 @@ const VideoDetails = ({
                 className="rounded-full mr-4"
               />
               <p className="text-lg text-white">
-                By{' '}
+                By{" "}
                 <a
                   rel="noreferrer noopener"
                   target="_blank"
@@ -306,7 +358,31 @@ const VideoDetails = ({
             </div>
           </div>
         </div>
-        <div className="w-full flex justify-start mt-4">{renderPaymentMessage()}</div>
+        <div className="w-full flex justify-start mt-4">
+          {renderPaymentMessage()}
+        </div>
+        {nAddress && (
+          <div className="mt-8">
+            {!paidResource ||
+            decryptedContent ||
+            session?.user?.role?.subscribed ? (
+              <ZapThreadsWrapper
+                anchor={nAddress}
+                user={session?.user ? nsec || npub : null}
+                relays={appConfig.defaultRelayUrls.join(",")}
+                disable="zaps"
+                isAuthorized={true}
+              />
+            ) : (
+              <div className="text-center p-4 bg-gray-800/50 rounded-lg">
+                <p className="text-gray-400">
+                  Comments are only available to content purchasers,
+                  subscribers, and the content creator.
+                </p>
+              </div>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/pages/course/[slug]/index.js b/src/pages/course/[slug]/index.js
index 3e09182..5be9efd 100644
--- a/src/pages/course/[slug]/index.js
+++ b/src/pages/course/[slug]/index.js
@@ -1,22 +1,26 @@
-import React, { useEffect, useState, useCallback } 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 { useNDKContext } from '@/context/NDKContext';
-import { useSession } from 'next-auth/react';
-import axios from 'axios';
-import { nip04, 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 React, { useEffect, useState, useCallback } 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 { useNDKContext } from "@/context/NDKContext";
+import { useSession } from "next-auth/react";
+import axios from "axios";
+import { nip04, 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 });
+const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), {
+  ssr: false,
+});
 
 const useCourseData = (ndk, fetchAuthor, router) => {
   const [course, setCourse] = useState(null);
@@ -32,10 +36,10 @@ const useCourseData = (ndk, fetchAuthor, router) => {
     let id;
 
     const fetchCourseId = async () => {
-      if (slug.includes('naddr')) {
+      if (slug.includes("naddr")) {
         const { data } = nip19.decode(slug);
         if (!data?.identifier) {
-          showToast('error', 'Error', 'Resource not found');
+          showToast("error", "Error", "Resource not found");
           return null;
         }
         return data.identifier;
@@ -44,19 +48,21 @@ const useCourseData = (ndk, fetchAuthor, router) => {
       }
     };
 
-    const fetchCourse = async courseId => {
+    const fetchCourse = async (courseId) => {
       try {
         await ndk.connect();
-        const event = await ndk.fetchEvent({ '#d': [courseId] });
+        const event = await ndk.fetchEvent({ "#d": [courseId] });
         if (!event) return null;
 
         const author = await fetchAuthor(event.pubkey);
-        const lessonIds = event.tags.filter(tag => tag[0] === 'a').map(tag => tag[1].split(':')[2]);
+        const lessonIds = event.tags
+          .filter((tag) => tag[0] === "a")
+          .map((tag) => tag[1].split(":")[2]);
 
         const parsedCourse = { ...parseCourseEvent(event), author };
         return { parsedCourse, lessonIds };
       } catch (error) {
-        console.error('Error fetching event:', error);
+        console.error("Error fetching event:", error);
         return null;
       }
     };
@@ -91,17 +97,23 @@ const useLessons = (ndk, fetchAuthor, lessonIds, pubkey) => {
   const { showToast } = useToast();
   useEffect(() => {
     if (lessonIds.length > 0) {
-      const fetchLesson = async lessonId => {
+      const fetchLesson = async (lessonId) => {
         try {
           await ndk.connect();
-          const filter = { '#d': [lessonId], kinds: [30023, 30402], authors: [pubkey] };
+          const filter = {
+            "#d": [lessonId],
+            kinds: [30023, 30402],
+            authors: [pubkey],
+          };
           const event = await ndk.fetchEvent(filter);
           if (event) {
             const author = await fetchAuthor(event.pubkey);
             const parsedLesson = { ...parseEvent(event), author };
-            setLessons(prev => {
+            setLessons((prev) => {
               // Check if the lesson already exists in the array
-              const exists = prev.some(lesson => lesson.id === parsedLesson.id);
+              const exists = prev.some(
+                (lesson) => lesson.id === parsedLesson.id
+              );
               if (!exists) {
                 return [...prev, parsedLesson];
               }
@@ -109,16 +121,16 @@ const useLessons = (ndk, fetchAuthor, lessonIds, pubkey) => {
             });
           }
         } catch (error) {
-          console.error('Error fetching event:', error);
+          console.error("Error fetching event:", error);
         }
       };
-      lessonIds.forEach(lessonId => fetchLesson(lessonId));
+      lessonIds.forEach((lessonId) => fetchLesson(lessonId));
     }
   }, [lessonIds, ndk, fetchAuthor, pubkey]);
 
   useEffect(() => {
     const newUniqueLessons = Array.from(
-      new Map(lessons.map(lesson => [lesson.id, lesson])).values()
+      new Map(lessons.map((lesson) => [lesson.id, lesson])).values()
     );
     setUniqueLessons(newUniqueLessons);
   }, [lessons]);
@@ -136,14 +148,16 @@ const useDecryption = (session, paidCourse, course, lessons, setLessons) => {
       if (session?.user && paidCourse && !decryptionPerformed) {
         setLoading(true);
         const canAccess =
-          session.user.purchased?.some(purchase => purchase.courseId === course?.d) ||
+          session.user.purchased?.some(
+            (purchase) => purchase.courseId === course?.d
+          ) ||
           session.user?.role?.subscribed ||
           session.user?.pubkey === course?.pubkey;
 
         if (canAccess && lessons.length > 0) {
           try {
             const decryptedLessons = await Promise.all(
-              lessons.map(async lesson => {
+              lessons.map(async (lesson) => {
                 const decryptedContent = await decryptContent(lesson.content);
                 return { ...lesson, content: decryptedContent };
               })
@@ -151,7 +165,7 @@ const useDecryption = (session, paidCourse, course, lessons, setLessons) => {
             setLessons(decryptedLessons);
             setDecryptionPerformed(true);
           } catch (error) {
-            console.error('Error decrypting lessons:', error);
+            console.error("Error decrypting lessons:", error);
           }
         }
         setLoading(false);
@@ -171,13 +185,16 @@ const Course = () => {
   const { showToast } = useToast();
   const [expandedIndex, setExpandedIndex] = useState(null);
   const [completedLessons, setCompletedLessons] = useState([]);
+  const [nAddresses, setNAddresses] = useState({});
+  const [nsec, setNsec] = useState(null);
+  const [npub, setNpub] = useState(null);
 
-  const setCompleted = useCallback(lessonId => {
-    setCompletedLessons(prev => [...prev, lessonId]);
+  const setCompleted = useCallback((lessonId) => {
+    setCompletedLessons((prev) => [...prev, lessonId]);
   }, []);
 
   const fetchAuthor = useCallback(
-    async pubkey => {
+    async (pubkey) => {
       const author = await ndk.getUser({ pubkey });
       const profile = await author.fetchProfile();
       const fields = await findKind0Fields(profile);
@@ -217,30 +234,67 @@ const Course = () => {
     }
   }, [router.isReady, router.query]);
 
-  const handleAccordionChange = e => {
+  useEffect(() => {
+    if (uniqueLessons.length > 0) {
+      const addresses = {};
+      uniqueLessons.forEach((lesson) => {
+        const addr = nip19.naddrEncode({
+          pubkey: lesson.pubkey,
+          kind: lesson.kind,
+          identifier: lesson.d,
+          relays: appConfig.defaultRelayUrls,
+        });
+        addresses[lesson.id] = addr;
+      });
+      setNAddresses(addresses);
+    }
+  }, [uniqueLessons]);
+
+  useEffect(() => {
+    if (session?.user?.privkey) {
+      const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
+      setNsec(nip19.nsecEncode(privkeyBuffer));
+    } else if (session?.user?.pubkey) {
+      setNpub(nip19.npubEncode(session.user.pubkey));
+    }
+  }, [session]);
+
+  const handleAccordionChange = (e) => {
     const newIndex = e.index === expandedIndex ? null : e.index;
     setExpandedIndex(newIndex);
 
     if (newIndex !== null) {
-      router.push(`/course/${router.query.slug}?active=${newIndex}`, undefined, { shallow: true });
+      router.push(
+        `/course/${router.query.slug}?active=${newIndex}`,
+        undefined,
+        { shallow: true }
+      );
     } else {
       router.push(`/course/${router.query.slug}`, undefined, { shallow: true });
     }
   };
 
-  const handlePaymentSuccess = async response => {
+  const handlePaymentSuccess = async (response) => {
     if (response && response?.preimage) {
       const updated = await update();
-      showToast('success', 'Payment Success', 'You have successfully purchased this course');
+      showToast(
+        "success",
+        "Payment Success",
+        "You have successfully purchased this course"
+      );
     } else {
-      showToast('error', 'Error', 'Failed to purchase course. Please try again.');
+      showToast(
+        "error",
+        "Error",
+        "Failed to purchase course. Please try again."
+      );
     }
   };
 
-  const handlePaymentError = error => {
+  const handlePaymentError = (error) => {
     showToast(
-      'error',
-      'Payment Error',
+      "error",
+      "Payment Error",
       `Failed to purchase course. Please try again. Error: ${error}`
     );
   };
@@ -253,8 +307,11 @@ const Course = () => {
     );
   }
 
-  const renderLesson = lesson => {
-    if (lesson.topics?.includes('video') && lesson.topics?.includes('document')) {
+  const renderLesson = (lesson) => {
+    if (
+      lesson.topics?.includes("video") &&
+      lesson.topics?.includes("document")
+    ) {
       return (
         <CombinedLesson
           lesson={lesson}
@@ -264,7 +321,10 @@ const Course = () => {
           setCompleted={setCompleted}
         />
       );
-    } else if (lesson.type === 'video' && !lesson.topics?.includes('document')) {
+    } else if (
+      lesson.type === "video" &&
+      !lesson.topics?.includes("document")
+    ) {
       return (
         <VideoLesson
           lesson={lesson}
@@ -274,7 +334,10 @@ const Course = () => {
           setCompleted={setCompleted}
         />
       );
-    } else if (lesson.type === 'document' && !lesson.topics?.includes('video')) {
+    } else if (
+      lesson.type === "document" &&
+      !lesson.topics?.includes("video")
+    ) {
       return (
         <DocumentLesson
           lesson={lesson}
@@ -309,11 +372,11 @@ const Course = () => {
             <AccordionTab
               key={index}
               pt={{
-                root: { className: 'border-none' },
-                header: { className: 'border-none' },
-                headerAction: { className: 'border-none' },
-                content: { className: 'border-none max-mob:px-0 max-tab:px-0' },
-                accordiontab: { className: 'border-none' },
+                root: { className: "border-none" },
+                header: { className: "border-none" },
+                headerAction: { className: "border-none" },
+                content: { className: "border-none max-mob:px-0 max-tab:px-0" },
+                accordiontab: { className: "border-none" },
               }}
               header={
                 <div className="flex align-items-center justify-between w-full">
@@ -327,12 +390,38 @@ const Course = () => {
                 </div>
               }
             >
-              <div className="w-full py-4 rounded-b-lg">{renderLesson(lesson)}</div>
+              <div className="w-full py-4 rounded-b-lg">
+                {renderLesson(lesson)}
+                {nAddresses[lesson.id] && (
+                  <div className="mt-8">
+                    {!paidCourse ||
+                    decryptionPerformed ||
+                    session?.user?.role?.subscribed ? (
+                      <ZapThreadsWrapper
+                        anchor={nAddresses[lesson.id]}
+                        user={session?.user ? nsec || npub : null}
+                        relays={appConfig.defaultRelayUrls.join(",")}
+                        disable="zaps"
+                        isAuthorized={true}
+                      />
+                    ) : (
+                      <div className="text-center p-4 bg-gray-800/50 rounded-lg">
+                        <p className="text-gray-400">
+                          Comments are only available to course purchasers,
+                          subscribers, and the course creator.
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
             </AccordionTab>
           ))}
       </Accordion>
       <div className="mx-auto my-6">
-        {course?.content && <MDDisplay className="p-4 rounded-lg" source={course.content} />}
+        {course?.content && (
+          <MDDisplay className="p-4 rounded-lg" source={course.content} />
+        )}
       </div>
     </>
   );

From ad218d8803a23e53065fcd92d260ff23c4f8fb4f Mon Sep 17 00:00:00 2001
From: kiwihodl <orangeamber@protonmail.com>
Date: Thu, 17 Apr 2025 13:00:58 -0500
Subject: [PATCH 04/22] linted before rebase

---
 .prettierrc                                   |   2 +-
 src/components/ZapThreadsWrapper.js           |  49 +++--
 .../carousels/templates/CourseTemplate.js     |  36 ++--
 .../content/combined/CombinedDetails.js       | 153 +++++++---------
 .../content/courses/CourseDetails.js          |  19 +-
 .../content/courses/CourseLesson.js           | 166 ++++++++---------
 .../content/documents/DocumentDetails.js      | 154 +++++++---------
 src/components/content/videos/VideoDetails.js | 170 +++++++-----------
 src/config/appConfig.js                       |   1 +
 .../api/lightning-address/callback/[slug].js  |  10 +-
 src/pages/course/[slug]/index.js              | 157 +++++++---------
 11 files changed, 384 insertions(+), 533 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index b43e32e..59b59ba 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -6,4 +6,4 @@
   "printWidth": 100,
   "bracketSpacing": true,
   "arrowParens": "avoid"
-} 
\ No newline at end of file
+} 
diff --git a/src/components/ZapThreadsWrapper.js b/src/components/ZapThreadsWrapper.js
index 4e4f1ad..1b129b7 100644
--- a/src/components/ZapThreadsWrapper.js
+++ b/src/components/ZapThreadsWrapper.js
@@ -1,13 +1,6 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef } from 'react';
 
-const ZapThreadsWrapper = ({
-  anchor,
-  user,
-  relays,
-  disable,
-  className,
-  isAuthorized,
-}) => {
+const ZapThreadsWrapper = ({ anchor, user, relays, disable, className, isAuthorized }) => {
   // Create a ref to store the reference to the <div> element
   const zapRef = useRef(null);
 
@@ -18,37 +11,37 @@ const ZapThreadsWrapper = ({
     }
 
     // Create a new <script> element
-    const script = document.createElement("script");
+    const script = document.createElement('script');
     // Set the source URL of the script to load the ZapThreads library
-    script.src = "https://unpkg.com/zapthreads/dist/zapthreads.iife.js";
+    script.src = 'https://unpkg.com/zapthreads/dist/zapthreads.iife.js';
     // Set the script to load asynchronously
     script.async = true;
 
     // Function to handle the script load event
     const handleScriptLoad = () => {
       // Create a new <zap-threads> element
-      const zapElement = document.createElement("zap-threads");
-      zapElement.setAttribute("anchor", anchor);
+      const zapElement = document.createElement('zap-threads');
+      zapElement.setAttribute('anchor', anchor);
 
       // Only set user if it exists and is not null
       if (user) {
-        zapElement.setAttribute("user", user);
+        zapElement.setAttribute('user', user);
       }
 
       // Clean up relay URLs
       const cleanRelays = relays
-        .split(",")
-        .map((relay) => relay.trim())
-        .filter((relay) => relay)
-        .join(",");
-      zapElement.setAttribute("relays", cleanRelays);
+        .split(',')
+        .map(relay => relay.trim())
+        .filter(relay => relay)
+        .join(',');
+      zapElement.setAttribute('relays', cleanRelays);
 
       // Always set disable attribute, even if empty
-      zapElement.setAttribute("disable", disable || "");
+      zapElement.setAttribute('disable', disable || '');
 
       // Add error handling
-      zapElement.addEventListener("error", (e) => {
-        console.error("ZapThreads error:", e);
+      zapElement.addEventListener('error', e => {
+        console.error('ZapThreads error:', e);
       });
 
       // Remove any existing <zap-threads> element
@@ -65,9 +58,9 @@ const ZapThreadsWrapper = ({
     };
 
     // Attach the handleScriptLoad function to the script's load event
-    script.addEventListener("load", handleScriptLoad);
-    script.addEventListener("error", (e) => {
-      console.error("Failed to load ZapThreads script:", e);
+    script.addEventListener('load', handleScriptLoad);
+    script.addEventListener('error', e => {
+      console.error('Failed to load ZapThreads script:', e);
     });
 
     // Append the <script> element to the <body> of the document
@@ -83,7 +76,7 @@ const ZapThreadsWrapper = ({
       // Remove the <script> element from the <body> of the document
       document.body.removeChild(script);
       // Remove the load event listener from the script
-      script.removeEventListener("load", handleScriptLoad);
+      script.removeEventListener('load', handleScriptLoad);
     };
   }, [anchor, user, relays, disable, isAuthorized]);
 
@@ -92,9 +85,7 @@ const ZapThreadsWrapper = ({
   }
 
   // Render a <div> element and attach the zapRef to it
-  return (
-    <div className={`overflow-x-hidden ${className || ""}`} ref={zapRef} />
-  );
+  return <div className={`overflow-x-hidden ${className || ''}`} ref={zapRef} />;
 };
 
 export default ZapThreadsWrapper;
diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js
index 1c46f7f..0f792bd 100644
--- a/src/components/content/carousels/templates/CourseTemplate.js
+++ b/src/components/content/carousels/templates/CourseTemplate.js
@@ -9,6 +9,7 @@ import {
 } from '@/components/ui/card';
 import { Tag } from 'primereact/tag';
 import ZapDisplay from '@/components/zaps/ZapDisplay';
+import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
 import { nip19 } from 'nostr-tools';
 import Image from 'next/image';
 import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
@@ -22,7 +23,7 @@ import useWindowWidth from '@/hooks/useWindowWidth';
 import GenericButton from '@/components/buttons/GenericButton';
 import appConfig from '@/config/appConfig';
 import { BookOpen } from 'lucide-react';
-import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
+import { useSession } from 'next-auth/react';
 
 export function CourseTemplate({ course, showMetaTags = true }) {
   const { zaps, zapsLoading, zapsError } = useZapsSubscription({
@@ -74,6 +75,15 @@ export function CourseTemplate({ course, showMetaTags = true }) {
     }
   }, [course]);
 
+  useEffect(() => {
+    if (session?.user?.privkey) {
+      const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
+      setNsec(nip19.nsecEncode(privkeyBuffer));
+    } else if (session?.user?.pubkey) {
+      setNpub(nip19.npubEncode(session.user.pubkey));
+    }
+  }, [session]);
+
   const shouldShowMetaTags = topic => {
     if (!showMetaTags) {
       return !['lesson', 'document', 'video', 'course'].includes(topic);
@@ -112,9 +122,7 @@ export function CourseTemplate({ course, showMetaTags = true }) {
       </div>
       <CardHeader className="flex flex-row justify-between items-center p-4 border-b border-gray-700">
         <div className="flex items-center gap-4">
-          <CardTitle className="text-xl sm:text-2xl text-[#f8f8ff]">
-            {course.name}
-          </CardTitle>
+          <CardTitle className="text-xl sm:text-2xl text-[#f8f8ff]">{course.name}</CardTitle>
         </div>
         <div className="text-[#f8f8ff]">
           <ZapDisplay
@@ -125,7 +133,9 @@ export function CourseTemplate({ course, showMetaTags = true }) {
         </div>
       </CardHeader>
       <CardContent
-        className={`${isMobile ? 'px-3' : ''} pt-4 pb-2 w-full flex flex-row justify-between items-center`}
+        className={`${
+          isMobile ? 'px-3' : ''
+        } pt-4 pb-2 w-full flex flex-row justify-between items-center`}
       >
         <div className="flex flex-wrap gap-2 max-w-[65%]">
           {course &&
@@ -156,7 +166,9 @@ export function CourseTemplate({ course, showMetaTags = true }) {
         )}
       </CardContent>
       <CardDescription
-        className={`${isMobile ? 'w-full p-3' : 'p-6'} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
+        className={`${
+          isMobile ? 'w-full p-3' : 'p-6'
+        } py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
         style={{
           overflow: 'hidden',
           display: '-webkit-box',
@@ -173,7 +185,9 @@ export function CourseTemplate({ course, showMetaTags = true }) {
         </p>
       </CardDescription>
       <CardFooter
-        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-t border-gray-700 pt-4 ${isMobile ? 'px-3' : ''}`}
+        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-t border-gray-700 pt-4 ${
+          isMobile ? 'px-3' : ''
+        }`}
       >
         <p className="text-sm text-gray-300">
           {course?.published_at && course.published_at !== ''
@@ -194,22 +208,20 @@ export function CourseTemplate({ course, showMetaTags = true }) {
         (!course?.price ||
           course.price === 0 ||
           session?.user?.role?.subscribed ||
-          session?.user?.purchased?.some(
-            (purchase) => purchase.resourceId === course.d
-          )) && (
+          session?.user?.purchased?.some(purchase => purchase.resourceId === course.d)) && (
           <div className="px-4 pb-4">
             {nsec || npub ? (
               <ZapThreadsWrapper
                 anchor={nAddress}
                 user={nsec || npub || null}
-                relays={appConfig.defaultRelayUrls.join(",")}
+                relays={appConfig.defaultRelayUrls.join(',')}
                 disable="zaps"
               />
             ) : (
               <ZapThreadsWrapper
                 anchor={nAddress}
                 user={npub}
-                relays={appConfig.defaultRelayUrls.join(",")}
+                relays={appConfig.defaultRelayUrls.join(',')}
                 disable="zaps"
               />
             )}
diff --git a/src/components/content/combined/CombinedDetails.js b/src/components/content/combined/CombinedDetails.js
index 102d3d3..1422371 100644
--- a/src/components/content/combined/CombinedDetails.js
+++ b/src/components/content/combined/CombinedDetails.js
@@ -1,25 +1,25 @@
-import React, { useEffect, useState, 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 ResourcePaymentButton from "@/components/bitcoinConnect/ResourcePaymentButton";
-import ZapDisplay from "@/components/zaps/ZapDisplay";
-import GenericButton from "@/components/buttons/GenericButton";
-import { useImageProxy } from "@/hooks/useImageProxy";
-import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription";
-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";
+import React, { useEffect, useState, 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 ResourcePaymentButton from '@/components/bitcoinConnect/ResourcePaymentButton';
+import ZapDisplay from '@/components/zaps/ZapDisplay';
+import GenericButton from '@/components/buttons/GenericButton';
+import { useImageProxy } from '@/hooks/useImageProxy';
+import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
+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"), {
+const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
   ssr: false,
 });
 
@@ -57,65 +57,57 @@ const CombinedDetails = ({
     try {
       const response = await axios.delete(`/api/resources/${processedEvent.d}`);
       if (response.status === 204) {
-        showToast("success", "Success", "Resource deleted successfully.");
-        router.push("/");
+        showToast('success', 'Success', 'Resource deleted successfully.');
+        router.push('/');
       }
     } catch (error) {
-      if (
-        error.response?.data?.error?.includes(
-          "Invalid `prisma.resource.delete()`"
-        )
-      ) {
+      if (error.response?.data?.error?.includes('Invalid `prisma.resource.delete()`')) {
         showToast(
-          "error",
-          "Error",
-          "Resource cannot be deleted because it is part of a course, delete the course first."
+          'error',
+          'Error',
+          'Resource cannot be deleted because it is part of a course, delete the course first.'
         );
       } else {
-        showToast(
-          "error",
-          "Error",
-          "Failed to delete resource. Please try again."
-        );
+        showToast('error', 'Error', 'Failed to delete resource. Please try again.');
       }
     }
   };
 
   const authorMenuItems = [
     {
-      label: "Edit",
-      icon: "pi pi-pencil",
+      label: 'Edit',
+      icon: 'pi pi-pencil',
       command: () => router.push(`/details/${processedEvent.id}/edit`),
     },
     {
-      label: "Delete",
-      icon: "pi pi-trash",
+      label: 'Delete',
+      icon: 'pi pi-trash',
       command: handleDelete,
     },
     {
-      label: "View Nostr note",
-      icon: "pi pi-globe",
+      label: 'View Nostr note',
+      icon: 'pi pi-globe',
       command: () => {
-        window.open(`https://habla.news/a/${nAddress}`, "_blank");
+        window.open(`https://habla.news/a/${nAddress}`, '_blank');
       },
     },
   ];
 
   const userMenuItems = [
     {
-      label: "View Nostr note",
-      icon: "pi pi-globe",
+      label: 'View Nostr note',
+      icon: 'pi pi-globe',
       command: () => {
-        window.open(`https://habla.news/a/${nAddress}`, "_blank");
+        window.open(`https://habla.news/a/${nAddress}`, '_blank');
       },
     },
   ];
 
   if (course) {
     userMenuItems.unshift({
-      label: isMobileView ? "Course" : "Open Course",
-      icon: "pi pi-external-link",
-      command: () => window.open(`/course/${course}`, "_blank"),
+      label: isMobileView ? 'Course' : 'Open Course',
+      icon: 'pi pi-external-link',
+      command: () => window.open(`/course/${course}`, '_blank'),
     });
   }
 
@@ -123,13 +115,13 @@ const CombinedDetails = ({
     if (isLesson) {
       axios
         .get(`/api/resources/${processedEvent.d}`)
-        .then((res) => {
+        .then(res => {
           if (res.data && res.data.lessons[0]?.courseId) {
             setCourse(res.data.lessons[0]?.courseId);
           }
         })
-        .catch((err) => {
-          console.error("err", err);
+        .catch(err => {
+          console.error('err', err);
         });
     }
   }, [processedEvent.d, isLesson]);
@@ -143,7 +135,7 @@ const CombinedDetails = ({
 
   useEffect(() => {
     if (session?.user?.privkey) {
-      const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
+      const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
       setNsec(nip19.nsecEncode(privkeyBuffer));
     } else if (session?.user?.pubkey) {
       setNpub(nip19.npubEncode(session.user.pubkey));
@@ -154,7 +146,7 @@ const CombinedDetails = ({
     if (session?.user?.role?.subscribed && decryptedContent) {
       return (
         <GenericButton
-          tooltipOptions={{ position: "top" }}
+          tooltipOptions={{ position: 'top' }}
           tooltip="You are subscribed so you can access all paid content"
           icon="pi pi-check"
           label="Subscribed"
@@ -169,14 +161,14 @@ const CombinedDetails = ({
     if (
       isLesson &&
       course &&
-      session?.user?.purchased?.some((purchase) => purchase.courseId === course)
+      session?.user?.purchased?.some(purchase => purchase.courseId === course)
     ) {
       const coursePurchase = session?.user?.purchased?.find(
-        (purchase) => purchase.courseId === course
+        purchase => purchase.courseId === course
       );
       return (
         <GenericButton
-          tooltipOptions={{ position: "top" }}
+          tooltipOptions={{ position: 'top' }}
           tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${coursePurchase?.course?.price} sats for the course.`}
           icon="pi pi-check"
           label={`Paid ${coursePurchase?.course?.price} sats`}
@@ -207,14 +199,10 @@ const CombinedDetails = ({
       );
     }
 
-    if (
-      paidResource &&
-      author &&
-      processedEvent?.pubkey === session?.user?.pubkey
-    ) {
+    if (paidResource && author && processedEvent?.pubkey === session?.user?.pubkey) {
       return (
         <GenericButton
-          tooltipOptions={{ position: "top" }}
+          tooltipOptions={{ position: 'top' }}
           tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`}
           icon="pi pi-check"
           label={`Price ${processedEvent.price} sats`}
@@ -231,12 +219,7 @@ const CombinedDetails = ({
 
   const renderContent = () => {
     if (decryptedContent) {
-      return (
-        <MDDisplay
-          className="p-2 rounded-lg w-full"
-          source={decryptedContent}
-        />
-      );
+      return <MDDisplay className="p-2 rounded-lg w-full" source={decryptedContent} />;
     }
 
     if (paidResource && !decryptedContent) {
@@ -264,12 +247,7 @@ const CombinedDetails = ({
     }
 
     if (processedEvent?.content) {
-      return (
-        <MDDisplay
-          className="p-4 rounded-lg w-full"
-          source={processedEvent.content}
-        />
-      );
+      return <MDDisplay className="p-4 rounded-lg w-full" source={processedEvent.content} />;
     }
 
     return null;
@@ -279,12 +257,7 @@ const CombinedDetails = ({
     <div className="w-full">
       <Toast ref={toastRef} />
       <div className="relative w-full h-[400px] mb-8">
-        <Image
-          alt="background image"
-          src={returnImageProxy(image)}
-          fill
-          className="object-cover"
-        />
+        <Image alt="background image" src={returnImageProxy(image)} fill className="object-cover" />
         <div className="absolute inset-0 bg-black bg-opacity-20"></div>
       </div>
       <div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10 max-mob:px-0 max-tab:px-0">
@@ -301,11 +274,9 @@ const CombinedDetails = ({
             {topics?.map((topic, index) => (
               <Tag className="text-[#f8f8ff]" key={index} value={topic} />
             ))}
-            {isLesson && (
-              <Tag size="small" className="text-[#f8f8ff]" value="lesson" />
-            )}
+            {isLesson && <Tag size="small" className="text-[#f8f8ff]" value="lesson" />}
           </div>
-          {summary?.split("\n").map((line, index) => (
+          {summary?.split('\n').map((line, index) => (
             <p key={index}>{line}</p>
           ))}
           <div className="flex items-center justify-between mt-8">
@@ -318,7 +289,7 @@ const CombinedDetails = ({
                 className="rounded-full mr-4"
               />
               <p className="text-lg text-white">
-                By{" "}
+                By{' '}
                 <a
                   rel="noreferrer noopener"
                   target="_blank"
@@ -339,21 +310,19 @@ const CombinedDetails = ({
           <div className="w-full mt-4">{renderPaymentMessage()}</div>
           {nAddress && (
             <div className="mt-8">
-              {!paidResource ||
-              decryptedContent ||
-              session?.user?.role?.subscribed ? (
+              {!paidResource || decryptedContent || session?.user?.role?.subscribed ? (
                 <ZapThreadsWrapper
                   anchor={nAddress}
                   user={session?.user ? nsec || npub : null}
-                  relays={appConfig.defaultRelayUrls.join(",")}
+                  relays={appConfig.defaultRelayUrls.join(',')}
                   disable="zaps"
                   isAuthorized={true}
                 />
               ) : (
                 <div className="text-center p-4 bg-gray-800/50 rounded-lg">
                   <p className="text-gray-400">
-                    Comments are only available to content purchasers,
-                    subscribers, and the content creator.
+                    Comments are only available to content purchasers, subscribers, and the content
+                    creator.
                   </p>
                 </div>
               )}
diff --git a/src/components/content/courses/CourseDetails.js b/src/components/content/courses/CourseDetails.js
index 63e19cd..06769f3 100644
--- a/src/components/content/courses/CourseDetails.js
+++ b/src/components/content/courses/CourseDetails.js
@@ -21,6 +21,7 @@ import WelcomeModal from '@/components/onboarding/WelcomeModal';
 import { ProgressSpinner } from 'primereact/progressspinner';
 import { Toast } from 'primereact/toast';
 import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
+import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
 
 export default function CourseDetails({
   processedEvent,
@@ -122,7 +123,7 @@ export default function CourseDetails({
 
   useEffect(() => {
     if (session?.user?.privkey) {
-      const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
+      const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
       setNsec(nip19.nsecEncode(privkeyBuffer));
     } else if (session?.user?.pubkey) {
       setNpub(nip19.npubEncode(session.user.pubkey));
@@ -130,14 +131,10 @@ export default function CourseDetails({
   }, [session]);
 
   const renderPaymentMessage = () => {
-    if (
-      session?.user &&
-      session.user?.role?.subscribed &&
-      decryptionPerformed
-    ) {
+    if (session?.user && session.user?.role?.subscribed && decryptionPerformed) {
       return (
         <GenericButton
-          tooltipOptions={{ position: "top" }}
+          tooltipOptions={{ position: 'top' }}
           tooltip={`You are subscribed so you can access all paid content`}
           icon="pi pi-check"
           label="Subscribed"
@@ -291,15 +288,15 @@ export default function CourseDetails({
                 <ZapThreadsWrapper
                   anchor={nAddress}
                   user={session?.user ? nsec || npub : null}
-                  relays={appConfig.defaultRelayUrls.join(",")}
+                  relays={appConfig.defaultRelayUrls.join(',')}
                   disable="zaps"
                   isAuthorized={true}
                 />
               ) : (
                 <div className="text-center p-4 bg-gray-800/50 rounded-lg">
                   <p className="text-gray-400">
-                    Comments are only available to course purchasers,
-                    subscribers, and the course creator.
+                    Comments are only available to course purchasers, subscribers, and the course
+                    creator.
                   </p>
                 </div>
               )
@@ -308,7 +305,7 @@ export default function CourseDetails({
               <ZapThreadsWrapper
                 anchor={nAddress}
                 user={session?.user ? nsec || npub : null}
-                relays={appConfig.defaultRelayUrls.join(",")}
+                relays={appConfig.defaultRelayUrls.join(',')}
                 disable="zaps"
                 isAuthorized={true}
               />
diff --git a/src/components/content/courses/CourseLesson.js b/src/components/content/courses/CourseLesson.js
index 9239119..dee48ff 100644
--- a/src/components/content/courses/CourseLesson.js
+++ b/src/components/content/courses/CourseLesson.js
@@ -1,38 +1,32 @@
-import React, { useEffect, useState, useRef } from "react";
-import { Tag } from "primereact/tag";
-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";
-import useWindowWidth from "@/hooks/useWindowWidth";
-import { nip19 } from "nostr-tools";
-import appConfig from "@/config/appConfig";
-import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
-import { useSession } from "next-auth/react";
-import ZapThreadsWrapper from "@/components/ZapThreadsWrapper";
+import React, { useEffect, useState, useRef } from 'react';
+import { Tag } from 'primereact/tag';
+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';
+import useWindowWidth from '@/hooks/useWindowWidth';
+import { nip19 } from 'nostr-tools';
+import appConfig from '@/config/appConfig';
+import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
+import { useSession } from 'next-auth/react';
+import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
 
-const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), {
+const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
   ssr: false,
 });
 
-const CourseLesson = ({
-  lesson,
-  course,
-  decryptionPerformed,
-  isPaid,
-  setCompleted,
-}) => {
+const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted }) => {
   const [zapAmount, setZapAmount] = useState(0);
   const [nAddress, setNAddress] = useState(null);
   const [nsec, setNsec] = useState(null);
   const [npub, setNpub] = useState(null);
   const { zaps, zapsLoading, zapsError } = useZapsQuery({
     event: lesson,
-    type: "lesson",
+    type: 'lesson',
   });
   const { returnImageProxy } = useImageProxy();
   const menuRef = useRef(null);
@@ -41,46 +35,42 @@ const CourseLesson = ({
   const isMobileView = windowWidth <= 768;
   const { data: session } = useSession();
 
-  const readTime = lesson?.content
-    ? Math.max(30, Math.ceil(lesson.content.length / 20))
-    : 60;
+  const readTime = lesson?.content ? Math.max(30, Math.ceil(lesson.content.length / 20)) : 60;
 
-  const { isCompleted, isTracking, markLessonAsCompleted } =
-    useTrackDocumentLesson({
-      lessonId: lesson?.d,
-      courseId: course?.d,
-      readTime,
-      paidCourse: isPaid,
-      decryptionPerformed,
-    });
+  const { isCompleted, isTracking, markLessonAsCompleted } = useTrackDocumentLesson({
+    lessonId: lesson?.d,
+    courseId: course?.d,
+    readTime,
+    paidCourse: isPaid,
+    decryptionPerformed,
+  });
 
   const buildMenuItems = () => {
     const items = [];
 
     const hasAccess =
-      session?.user &&
-      (!isPaid || decryptionPerformed || session.user.role?.subscribed);
+      session?.user && (!isPaid || decryptionPerformed || session.user.role?.subscribed);
 
     if (hasAccess) {
       items.push({
-        label: "Mark as completed",
-        icon: "pi pi-check-circle",
+        label: 'Mark as completed',
+        icon: 'pi pi-check-circle',
         command: async () => {
           try {
             await markLessonAsCompleted();
             setCompleted && setCompleted(lesson.id);
             toastRef.current.show({
-              severity: "success",
-              summary: "Success",
-              detail: "Lesson marked as completed",
+              severity: 'success',
+              summary: 'Success',
+              detail: 'Lesson marked as completed',
               life: 3000,
             });
           } catch (error) {
-            console.error("Failed to mark lesson as completed:", error);
+            console.error('Failed to mark lesson as completed:', error);
             toastRef.current.show({
-              severity: "error",
-              summary: "Error",
-              detail: "Failed to mark lesson as completed",
+              severity: 'error',
+              summary: 'Error',
+              detail: 'Failed to mark lesson as completed',
               life: 3000,
             });
           }
@@ -89,16 +79,16 @@ const CourseLesson = ({
     }
 
     items.push({
-      label: "Open lesson",
-      icon: "pi pi-arrow-up-right",
+      label: 'Open lesson',
+      icon: 'pi pi-arrow-up-right',
       command: () => {
-        window.open(`/details/${lesson.id}`, "_blank");
+        window.open(`/details/${lesson.id}`, '_blank');
       },
     });
 
     items.push({
-      label: "View Nostr note",
-      icon: "pi pi-globe",
+      label: 'View Nostr note',
+      icon: 'pi pi-globe',
       command: () => {
         if (lesson?.d) {
           const addr = nip19.naddrEncode({
@@ -107,7 +97,7 @@ const CourseLesson = ({
             identifier: lesson.d,
             relays: appConfig.defaultRelayUrls || [],
           });
-          window.open(`https://habla.news/a/${addr}`, "_blank");
+          window.open(`https://habla.news/a/${addr}`, '_blank');
         }
       },
     });
@@ -131,7 +121,7 @@ const CourseLesson = ({
 
   useEffect(() => {
     if (session?.user?.privkey) {
-      const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
+      const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
       setNsec(nip19.nsecEncode(privkeyBuffer));
     } else if (session?.user?.pubkey) {
       setNpub(nip19.npubEncode(session.user.pubkey));
@@ -152,9 +142,7 @@ const CourseLesson = ({
 
   const renderContent = () => {
     if (isPaid && decryptionPerformed) {
-      return (
-        <MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />
-      );
+      return <MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />;
     }
     if (isPaid && !decryptionPerformed) {
       return (
@@ -164,9 +152,7 @@ const CourseLesson = ({
       );
     }
     if (lesson?.content) {
-      return (
-        <MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />
-      );
+      return <MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />;
     }
     return null;
   };
@@ -179,28 +165,20 @@ const CourseLesson = ({
           <div className="flex flex-col items-start max-w-[45vw] max-tab:max-w-[100vw] max-mob:max-w-[100vw]">
             <div className="flex flex-row items-center justify-between w-full">
               <h1 className="text-4xl">{lesson?.title}</h1>
-              <ZapDisplay
-                zapAmount={zapAmount}
-                event={lesson}
-                zapsLoading={zapsLoading}
-              />
+              <ZapDisplay zapAmount={zapAmount} event={lesson} zapsLoading={zapsLoading} />
             </div>
             <div className="pt-2 flex flex-row justify-start w-full mt-2 mb-4">
               {lesson &&
                 lesson.topics &&
                 lesson.topics.length > 0 &&
                 lesson.topics.map((topic, index) => (
-                  <Tag
-                    className="mr-2 text-white"
-                    key={index}
-                    value={topic}
-                  ></Tag>
+                  <Tag className="mr-2 text-white" key={index} value={topic}></Tag>
                 ))}
             </div>
             <div className="text-xl mt-6">
               {lesson?.summary && (
                 <div className="text-xl mt-4">
-                  {lesson.summary.split("\n").map((line, index) => (
+                  {lesson.summary.split('\n').map((line, index) => (
                     <p key={index}>{line}</p>
                   ))}
                 </div>
@@ -210,16 +188,13 @@ const CourseLesson = ({
               <div className="flex flex-row w-fit items-center">
                 <Image
                   alt="avatar thumbnail"
-                  src={returnImageProxy(
-                    lesson.author?.avatar,
-                    lesson.author?.pubkey
-                  )}
+                  src={returnImageProxy(lesson.author?.avatar, lesson.author?.pubkey)}
                   width={50}
                   height={50}
                   className="rounded-full mr-4"
                 />
                 <p className="text-lg">
-                  Created by{" "}
+                  Created by{' '}
                   <a
                     rel="noreferrer noopener"
                     target="_blank"
@@ -256,26 +231,25 @@ const CourseLesson = ({
       <div className="w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]">
         {renderContent()}
       </div>
-      {nAddress !== null &&
-        (!isPaid || decryptionPerformed || session?.user?.role?.subscribed) && (
-          <div className="px-4">
-            {nsec || npub ? (
-              <ZapThreadsWrapper
-                anchor={nAddress}
-                user={nsec || npub || null}
-                relays={appConfig.defaultRelayUrls.join(",")}
-                disable="zaps"
-              />
-            ) : (
-              <ZapThreadsWrapper
-                anchor={nAddress}
-                user={npub}
-                relays={appConfig.defaultRelayUrls.join(",")}
-                disable="zaps"
-              />
-            )}
-          </div>
-        )}
+      {nAddress !== null && (!isPaid || decryptionPerformed || session?.user?.role?.subscribed) && (
+        <div className="px-4">
+          {nsec || npub ? (
+            <ZapThreadsWrapper
+              anchor={nAddress}
+              user={nsec || npub || null}
+              relays={appConfig.defaultRelayUrls.join(',')}
+              disable="zaps"
+            />
+          ) : (
+            <ZapThreadsWrapper
+              anchor={nAddress}
+              user={npub}
+              relays={appConfig.defaultRelayUrls.join(',')}
+              disable="zaps"
+            />
+          )}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/content/documents/DocumentDetails.js b/src/components/content/documents/DocumentDetails.js
index 8164aea..602ff45 100644
--- a/src/components/content/documents/DocumentDetails.js
+++ b/src/components/content/documents/DocumentDetails.js
@@ -1,25 +1,25 @@
-import React, { useEffect, useState, 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 ResourcePaymentButton from "@/components/bitcoinConnect/ResourcePaymentButton";
-import ZapDisplay from "@/components/zaps/ZapDisplay";
-import GenericButton from "@/components/buttons/GenericButton";
-import { useImageProxy } from "@/hooks/useImageProxy";
-import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription";
-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";
+import React, { useEffect, useState, 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 ResourcePaymentButton from '@/components/bitcoinConnect/ResourcePaymentButton';
+import ZapDisplay from '@/components/zaps/ZapDisplay';
+import GenericButton from '@/components/buttons/GenericButton';
+import { useImageProxy } from '@/hooks/useImageProxy';
+import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
+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"), {
+const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
   ssr: false,
 });
 
@@ -59,71 +59,63 @@ const DocumentDetails = ({
     try {
       const response = await axios.delete(`/api/resources/${processedEvent.d}`);
       if (response.status === 204) {
-        showToast("success", "Success", "Resource deleted successfully.");
-        router.push("/");
+        showToast('success', 'Success', 'Resource deleted successfully.');
+        router.push('/');
       }
     } catch (error) {
       if (
         error.response &&
         error.response.data &&
-        error.response.data.error.includes("Invalid `prisma.resource.delete()`")
+        error.response.data.error.includes('Invalid `prisma.resource.delete()`')
       ) {
         showToast(
-          "error",
-          "Error",
-          "Resource cannot be deleted because it is part of a course, delete the course first."
+          'error',
+          'Error',
+          'Resource cannot be deleted because it is part of a course, delete the course first.'
         );
-      } else if (
-        error.response &&
-        error.response.data &&
-        error.response.data.error
-      ) {
-        showToast("error", "Error", error.response.data.error);
+      } else if (error.response && error.response.data && error.response.data.error) {
+        showToast('error', 'Error', error.response.data.error);
       } else {
-        showToast(
-          "error",
-          "Error",
-          "Failed to delete resource. Please try again."
-        );
+        showToast('error', 'Error', 'Failed to delete resource. Please try again.');
       }
     }
   };
 
   const authorMenuItems = [
     {
-      label: "Edit",
-      icon: "pi pi-pencil",
+      label: 'Edit',
+      icon: 'pi pi-pencil',
       command: () => router.push(`/details/${processedEvent.id}/edit`),
     },
     {
-      label: "Delete",
-      icon: "pi pi-trash",
+      label: 'Delete',
+      icon: 'pi pi-trash',
       command: handleDelete,
     },
     {
-      label: "View Nostr note",
-      icon: "pi pi-globe",
+      label: 'View Nostr note',
+      icon: 'pi pi-globe',
       command: () => {
-        window.open(`https://habla.news/a/${nAddress}`, "_blank");
+        window.open(`https://habla.news/a/${nAddress}`, '_blank');
       },
     },
   ];
 
   const userMenuItems = [
     {
-      label: "View Nostr note",
-      icon: "pi pi-globe",
+      label: 'View Nostr note',
+      icon: 'pi pi-globe',
       command: () => {
-        window.open(`https://habla.news/a/${nAddress}`, "_blank");
+        window.open(`https://habla.news/a/${nAddress}`, '_blank');
       },
     },
   ];
 
   if (course) {
     userMenuItems.unshift({
-      label: isMobileView ? "Course" : "Open Course",
-      icon: "pi pi-external-link",
-      command: () => window.open(`/course/${course}`, "_blank"),
+      label: isMobileView ? 'Course' : 'Open Course',
+      icon: 'pi pi-external-link',
+      command: () => window.open(`/course/${course}`, '_blank'),
     });
   }
 
@@ -138,20 +130,20 @@ const DocumentDetails = ({
     if (isLesson) {
       axios
         .get(`/api/resources/${processedEvent.d}`)
-        .then((res) => {
+        .then(res => {
           if (res.data && res.data.lessons[0]?.courseId) {
             setCourse(res.data.lessons[0]?.courseId);
           }
         })
-        .catch((err) => {
-          console.error("err", err);
+        .catch(err => {
+          console.error('err', err);
         });
     }
   }, [processedEvent.d, isLesson]);
 
   useEffect(() => {
     if (session?.user?.privkey) {
-      const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
+      const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
       setNsec(nip19.nsecEncode(privkeyBuffer));
     } else if (session?.user?.pubkey) {
       setNpub(nip19.npubEncode(session.user.pubkey));
@@ -162,7 +154,7 @@ const DocumentDetails = ({
     if (session?.user && session.user?.role?.subscribed && decryptedContent) {
       return (
         <GenericButton
-          tooltipOptions={{ position: "top" }}
+          tooltipOptions={{ position: 'top' }}
           tooltip={`You are subscribed so you can access all paid content`}
           icon="pi pi-check"
           label="Subscribed"
@@ -178,15 +170,13 @@ const DocumentDetails = ({
     if (
       isLesson &&
       course &&
-      session?.user?.purchased?.some((purchase) => purchase.courseId === course)
+      session?.user?.purchased?.some(purchase => purchase.courseId === course)
     ) {
       return (
         <GenericButton
-          tooltipOptions={{ position: "top" }}
+          tooltipOptions={{ position: 'top' }}
           tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${
-            session?.user?.purchased?.find(
-              (purchase) => purchase.courseId === course
-            )?.course?.price
+            session?.user?.purchased?.find(purchase => purchase.courseId === course)?.course?.price
           } sats for the course.`}
           icon="pi pi-check"
           label={`Paid`}
@@ -213,20 +203,16 @@ const DocumentDetails = ({
           outlined
           size="small"
           tooltip={`You paid ${processedEvent.price} sats to access this content (or potentially less if a discount was applied)`}
-          tooltipOptions={{ position: "top" }}
+          tooltipOptions={{ position: 'top' }}
           className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0"
         />
       );
     }
 
-    if (
-      paidResource &&
-      author &&
-      processedEvent?.pubkey === session?.user?.pubkey
-    ) {
+    if (paidResource && author && processedEvent?.pubkey === session?.user?.pubkey) {
       return (
         <GenericButton
-          tooltipOptions={{ position: "top" }}
+          tooltipOptions={{ position: 'top' }}
           tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`}
           icon="pi pi-check"
           label={`Price ${processedEvent.price} sats`}
@@ -243,12 +229,7 @@ const DocumentDetails = ({
 
   const renderContent = () => {
     if (decryptedContent) {
-      return (
-        <MDDisplay
-          className="p-2 rounded-lg w-full"
-          source={decryptedContent}
-        />
-      );
+      return <MDDisplay className="p-2 rounded-lg w-full" source={decryptedContent} />;
     }
     if (paidResource && !decryptedContent) {
       return (
@@ -274,12 +255,7 @@ const DocumentDetails = ({
       );
     }
     if (processedEvent?.content) {
-      return (
-        <MDDisplay
-          className="p-4 rounded-lg w-full"
-          source={processedEvent.content}
-        />
-      );
+      return <MDDisplay className="p-4 rounded-lg w-full" source={processedEvent.content} />;
     }
     return null;
   };
@@ -312,11 +288,9 @@ const DocumentDetails = ({
               topics.map((topic, index) => (
                 <Tag className="text-[#f8f8ff]" key={index} value={topic}></Tag>
               ))}
-            {isLesson && (
-              <Tag size="small" className="text-[#f8f8ff]" value="lesson" />
-            )}
+            {isLesson && <Tag size="small" className="text-[#f8f8ff]" value="lesson" />}
           </div>
-          {summary?.split("\n").map((line, index) => (
+          {summary?.split('\n').map((line, index) => (
             <p key={index}>{line}</p>
           ))}
           <div className="flex items-center justify-between mt-8">
@@ -329,7 +303,7 @@ const DocumentDetails = ({
                 className="rounded-full mr-4"
               />
               <p className="text-lg text-white">
-                By{" "}
+                By{' '}
                 <a
                   rel="noreferrer noopener"
                   target="_blank"
@@ -350,21 +324,19 @@ const DocumentDetails = ({
           <div className="w-full mt-4">{renderPaymentMessage()}</div>
           {nAddress && (
             <div className="mt-8">
-              {!paidResource ||
-              decryptedContent ||
-              session?.user?.role?.subscribed ? (
+              {!paidResource || decryptedContent || session?.user?.role?.subscribed ? (
                 <ZapThreadsWrapper
                   anchor={nAddress}
                   user={session?.user ? nsec || npub : null}
-                  relays={appConfig.defaultRelayUrls.join(",")}
+                  relays={appConfig.defaultRelayUrls.join(',')}
                   disable="zaps"
                   isAuthorized={true}
                 />
               ) : (
                 <div className="text-center p-4 bg-gray-800/50 rounded-lg">
                   <p className="text-gray-400">
-                    Comments are only available to content purchasers,
-                    subscribers, and the content creator.
+                    Comments are only available to content purchasers, subscribers, and the content
+                    creator.
                   </p>
                 </div>
               )}
diff --git a/src/components/content/videos/VideoDetails.js b/src/components/content/videos/VideoDetails.js
index 5870485..71b4c9d 100644
--- a/src/components/content/videos/VideoDetails.js
+++ b/src/components/content/videos/VideoDetails.js
@@ -1,25 +1,25 @@
-import React, { useEffect, useState, 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 ResourcePaymentButton from "@/components/bitcoinConnect/ResourcePaymentButton";
-import ZapDisplay from "@/components/zaps/ZapDisplay";
-import GenericButton from "@/components/buttons/GenericButton";
-import { useImageProxy } from "@/hooks/useImageProxy";
-import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription";
-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";
+import React, { useEffect, useState, 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 ResourcePaymentButton from '@/components/bitcoinConnect/ResourcePaymentButton';
+import ZapDisplay from '@/components/zaps/ZapDisplay';
+import GenericButton from '@/components/buttons/GenericButton';
+import { useImageProxy } from '@/hooks/useImageProxy';
+import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
+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"), {
+const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
   ssr: false,
 });
 
@@ -59,71 +59,63 @@ const VideoDetails = ({
     try {
       const response = await axios.delete(`/api/resources/${processedEvent.d}`);
       if (response.status === 204) {
-        showToast("success", "Success", "Resource deleted successfully.");
-        router.push("/");
+        showToast('success', 'Success', 'Resource deleted successfully.');
+        router.push('/');
       }
     } catch (error) {
       if (
         error.response &&
         error.response.data &&
-        error.response.data.error.includes("Invalid `prisma.resource.delete()`")
+        error.response.data.error.includes('Invalid `prisma.resource.delete()`')
       ) {
         showToast(
-          "error",
-          "Error",
-          "Resource cannot be deleted because it is part of a course, delete the course first."
+          'error',
+          'Error',
+          'Resource cannot be deleted because it is part of a course, delete the course first.'
         );
-      } else if (
-        error.response &&
-        error.response.data &&
-        error.response.data.error
-      ) {
-        showToast("error", "Error", error.response.data.error);
+      } else if (error.response && error.response.data && error.response.data.error) {
+        showToast('error', 'Error', error.response.data.error);
       } else {
-        showToast(
-          "error",
-          "Error",
-          "Failed to delete resource. Please try again."
-        );
+        showToast('error', 'Error', 'Failed to delete resource. Please try again.');
       }
     }
   };
 
   const authorMenuItems = [
     {
-      label: "Edit",
-      icon: "pi pi-pencil",
+      label: 'Edit',
+      icon: 'pi pi-pencil',
       command: () => router.push(`/details/${processedEvent.id}/edit`),
     },
     {
-      label: "Delete",
-      icon: "pi pi-trash",
+      label: 'Delete',
+      icon: 'pi pi-trash',
       command: handleDelete,
     },
     {
-      label: "View Nostr note",
-      icon: "pi pi-globe",
+      label: 'View Nostr note',
+      icon: 'pi pi-globe',
       command: () => {
-        window.open(`https://habla.news/a/${nAddress}`, "_blank");
+        window.open(`https://habla.news/a/${nAddress}`, '_blank');
       },
     },
   ];
 
   const userMenuItems = [
     {
-      label: "View Nostr note",
-      icon: "pi pi-globe",
+      label: 'View Nostr note',
+      icon: 'pi pi-globe',
       command: () => {
-        window.open(`https://habla.news/a/${nAddress}`, "_blank");
+        window.open(`https://habla.news/a/${nAddress}`, '_blank');
       },
     },
   ];
 
   if (course) {
     userMenuItems.unshift({
-      label: isMobileView ? "Course" : "Open Course",
-      icon: "pi pi-external-link",
-      command: () => window.open(`/course/${course}`, "_blank"),
+      label: isMobileView ? 'Course' : 'Open Course',
+      icon: 'pi pi-external-link',
+      command: () => window.open(`/course/${course}`, '_blank'),
     });
   }
 
@@ -131,13 +123,13 @@ const VideoDetails = ({
     if (isLesson) {
       axios
         .get(`/api/resources/${processedEvent.d}`)
-        .then((res) => {
+        .then(res => {
           if (res.data && res.data.lessons[0]?.courseId) {
             setCourse(res.data.lessons[0]?.courseId);
           }
         })
-        .catch((err) => {
-          console.error("err", err);
+        .catch(err => {
+          console.error('err', err);
         });
     }
   }, [processedEvent.d, isLesson]);
@@ -151,7 +143,7 @@ const VideoDetails = ({
 
   useEffect(() => {
     if (session?.user?.privkey) {
-      const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
+      const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
       setNsec(nip19.nsecEncode(privkeyBuffer));
     } else if (session?.user?.pubkey) {
       setNpub(nip19.npubEncode(session.user.pubkey));
@@ -162,7 +154,7 @@ const VideoDetails = ({
     if (session?.user && session.user?.role?.subscribed && decryptedContent) {
       return (
         <GenericButton
-          tooltipOptions={{ position: "top" }}
+          tooltipOptions={{ position: 'top' }}
           tooltip={`You are subscribed so you can access all paid content`}
           icon="pi pi-check"
           label="Subscribed"
@@ -177,21 +169,17 @@ const VideoDetails = ({
     if (
       isLesson &&
       course &&
-      session?.user?.purchased?.some((purchase) => purchase.courseId === course)
+      session?.user?.purchased?.some(purchase => purchase.courseId === course)
     ) {
       return (
         <GenericButton
-          tooltipOptions={{ position: "top" }}
+          tooltipOptions={{ position: 'top' }}
           tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${
-            session?.user?.purchased?.find(
-              (purchase) => purchase.courseId === course
-            )?.course?.price
+            session?.user?.purchased?.find(purchase => purchase.courseId === course)?.course?.price
           } sats for the course.`}
           icon="pi pi-check"
           label={`Paid ${
-            session?.user?.purchased?.find(
-              (purchase) => purchase.courseId === course
-            )?.course?.price
+            session?.user?.purchased?.find(purchase => purchase.courseId === course)?.course?.price
           } sats`}
           severity="success"
           outlined
@@ -220,14 +208,10 @@ const VideoDetails = ({
       );
     }
 
-    if (
-      paidResource &&
-      author &&
-      processedEvent?.pubkey === session?.user?.pubkey
-    ) {
+    if (paidResource && author && processedEvent?.pubkey === session?.user?.pubkey) {
       return (
         <GenericButton
-          tooltipOptions={{ position: "top" }}
+          tooltipOptions={{ position: 'top' }}
           tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`}
           icon="pi pi-check"
           label={`Price ${processedEvent.price} sats`}
@@ -244,12 +228,7 @@ const VideoDetails = ({
 
   const renderContent = () => {
     if (decryptedContent) {
-      return (
-        <MDDisplay
-          className="p-0 rounded-lg w-full"
-          source={decryptedContent}
-        />
-      );
+      return <MDDisplay className="p-0 rounded-lg w-full" source={decryptedContent} />;
     }
     if (paidResource && !decryptedContent) {
       return (
@@ -258,8 +237,8 @@ const VideoDetails = ({
             className="absolute inset-0 opacity-50"
             style={{
               backgroundImage: `url(${image})`,
-              backgroundSize: "cover",
-              backgroundPosition: "center",
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
             }}
           ></div>
           <div className="absolute inset-0 bg-black bg-opacity-50"></div>
@@ -282,12 +261,7 @@ const VideoDetails = ({
       );
     }
     if (processedEvent?.content) {
-      return (
-        <MDDisplay
-          className="p-0 rounded-lg w-full"
-          source={processedEvent.content}
-        />
-      );
+      return <MDDisplay className="p-0 rounded-lg w-full" source={processedEvent.content} />;
     }
     return null;
   };
@@ -297,9 +271,7 @@ const VideoDetails = ({
       <Toast ref={toastRef} />
       {renderContent()}
       <div className="bg-gray-800/90 rounded-lg p-4 m-4 max-mob:m-0 max-tab:m-0 max-mob:rounded-t-none max-tab:rounded-t-none">
-        <div
-          className={`w-full flex flex-col items-start justify-start mt-2 px-2`}
-        >
+        <div className={`w-full flex flex-col items-start justify-start mt-2 px-2`}>
           <div className="flex flex-col items-start gap-2 w-full">
             <div className="flex flex-row items-center justify-between gap-2 w-full">
               <h1 className="text-4xl flex-grow">{title}</h1>
@@ -313,18 +285,14 @@ const VideoDetails = ({
               {topics &&
                 topics.length > 0 &&
                 topics.map((topic, index) => (
-                  <Tag
-                    className="mt-2 text-white"
-                    key={index}
-                    value={topic}
-                  ></Tag>
+                  <Tag className="mt-2 text-white" key={index} value={topic}></Tag>
                 ))}
               {isLesson && <Tag className="mt-2 text-white" value="lesson" />}
             </div>
           </div>
           <div className="flex flex-row items-center justify-between w-full">
             <div className="my-4 max-mob:text-base max-tab:text-base">
-              {summary?.split("\n").map((line, index) => (
+              {summary?.split('\n').map((line, index) => (
                 <p key={index}>{line}</p>
               ))}
             </div>
@@ -339,7 +307,7 @@ const VideoDetails = ({
                 className="rounded-full mr-4"
               />
               <p className="text-lg text-white">
-                By{" "}
+                By{' '}
                 <a
                   rel="noreferrer noopener"
                   target="_blank"
@@ -358,26 +326,22 @@ const VideoDetails = ({
             </div>
           </div>
         </div>
-        <div className="w-full flex justify-start mt-4">
-          {renderPaymentMessage()}
-        </div>
+        <div className="w-full flex justify-start mt-4">{renderPaymentMessage()}</div>
         {nAddress && (
           <div className="mt-8">
-            {!paidResource ||
-            decryptedContent ||
-            session?.user?.role?.subscribed ? (
+            {!paidResource || decryptedContent || session?.user?.role?.subscribed ? (
               <ZapThreadsWrapper
                 anchor={nAddress}
                 user={session?.user ? nsec || npub : null}
-                relays={appConfig.defaultRelayUrls.join(",")}
+                relays={appConfig.defaultRelayUrls.join(',')}
                 disable="zaps"
                 isAuthorized={true}
               />
             ) : (
               <div className="text-center p-4 bg-gray-800/50 rounded-lg">
                 <p className="text-gray-400">
-                  Comments are only available to content purchasers,
-                  subscribers, and the content creator.
+                  Comments are only available to content purchasers, subscribers, and the content
+                  creator.
                 </p>
               </div>
             )}
diff --git a/src/config/appConfig.js b/src/config/appConfig.js
index d24e55d..3155d97 100644
--- a/src/config/appConfig.js
+++ b/src/config/appConfig.js
@@ -12,6 +12,7 @@ const appConfig = {
   authorPubkeys: [
     'f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741',
     'c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345',
+    'b9f4c34dc25b2ddd785c007bf6e12619bb1c9b8335b8d75d37bf76e97d1a0e31',
   ],
   customLightningAddresses: [
     {
diff --git a/src/pages/api/lightning-address/callback/[slug].js b/src/pages/api/lightning-address/callback/[slug].js
index 68f12e3..f9e476a 100644
--- a/src/pages/api/lightning-address/callback/[slug].js
+++ b/src/pages/api/lightning-address/callback/[slug].js
@@ -81,10 +81,12 @@ export default async function handler(req, res) {
               },
             }
           );
-          res.status(200).json({
-            pr: response.data.invoice,
-            verify: `${BACKEND_URL}/api/lightning-address/verify/${slug}/${response.data.payment_hash}`,
-          });
+          res
+            .status(200)
+            .json({
+              pr: response.data.invoice,
+              verify: `${BACKEND_URL}/api/lightning-address/verify/${slug}/${response.data.payment_hash}`,
+            });
         } catch (error) {
           console.error(error);
           res.status(500).json({ error: 'Failed to generate invoice' });
diff --git a/src/pages/course/[slug]/index.js b/src/pages/course/[slug]/index.js
index 5be9efd..cb0c9a2 100644
--- a/src/pages/course/[slug]/index.js
+++ b/src/pages/course/[slug]/index.js
@@ -1,24 +1,24 @@
-import React, { useEffect, useState, useCallback } 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 { useNDKContext } from "@/context/NDKContext";
-import { useSession } from "next-auth/react";
-import axios from "axios";
-import { nip04, 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";
+import React, { useEffect, useState, useCallback } 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 { useNDKContext } from '@/context/NDKContext';
+import { useSession } from 'next-auth/react';
+import axios from 'axios';
+import { nip04, 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"), {
+const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
   ssr: false,
 });
 
@@ -36,10 +36,10 @@ const useCourseData = (ndk, fetchAuthor, router) => {
     let id;
 
     const fetchCourseId = async () => {
-      if (slug.includes("naddr")) {
+      if (slug.includes('naddr')) {
         const { data } = nip19.decode(slug);
         if (!data?.identifier) {
-          showToast("error", "Error", "Resource not found");
+          showToast('error', 'Error', 'Resource not found');
           return null;
         }
         return data.identifier;
@@ -48,21 +48,19 @@ const useCourseData = (ndk, fetchAuthor, router) => {
       }
     };
 
-    const fetchCourse = async (courseId) => {
+    const fetchCourse = async courseId => {
       try {
         await ndk.connect();
-        const event = await ndk.fetchEvent({ "#d": [courseId] });
+        const event = await ndk.fetchEvent({ '#d': [courseId] });
         if (!event) return null;
 
         const author = await fetchAuthor(event.pubkey);
-        const lessonIds = event.tags
-          .filter((tag) => tag[0] === "a")
-          .map((tag) => tag[1].split(":")[2]);
+        const lessonIds = event.tags.filter(tag => tag[0] === 'a').map(tag => tag[1].split(':')[2]);
 
         const parsedCourse = { ...parseCourseEvent(event), author };
         return { parsedCourse, lessonIds };
       } catch (error) {
-        console.error("Error fetching event:", error);
+        console.error('Error fetching event:', error);
         return null;
       }
     };
@@ -97,11 +95,11 @@ const useLessons = (ndk, fetchAuthor, lessonIds, pubkey) => {
   const { showToast } = useToast();
   useEffect(() => {
     if (lessonIds.length > 0) {
-      const fetchLesson = async (lessonId) => {
+      const fetchLesson = async lessonId => {
         try {
           await ndk.connect();
           const filter = {
-            "#d": [lessonId],
+            '#d': [lessonId],
             kinds: [30023, 30402],
             authors: [pubkey],
           };
@@ -109,11 +107,9 @@ const useLessons = (ndk, fetchAuthor, lessonIds, pubkey) => {
           if (event) {
             const author = await fetchAuthor(event.pubkey);
             const parsedLesson = { ...parseEvent(event), author };
-            setLessons((prev) => {
+            setLessons(prev => {
               // Check if the lesson already exists in the array
-              const exists = prev.some(
-                (lesson) => lesson.id === parsedLesson.id
-              );
+              const exists = prev.some(lesson => lesson.id === parsedLesson.id);
               if (!exists) {
                 return [...prev, parsedLesson];
               }
@@ -121,16 +117,16 @@ const useLessons = (ndk, fetchAuthor, lessonIds, pubkey) => {
             });
           }
         } catch (error) {
-          console.error("Error fetching event:", error);
+          console.error('Error fetching event:', error);
         }
       };
-      lessonIds.forEach((lessonId) => fetchLesson(lessonId));
+      lessonIds.forEach(lessonId => fetchLesson(lessonId));
     }
   }, [lessonIds, ndk, fetchAuthor, pubkey]);
 
   useEffect(() => {
     const newUniqueLessons = Array.from(
-      new Map(lessons.map((lesson) => [lesson.id, lesson])).values()
+      new Map(lessons.map(lesson => [lesson.id, lesson])).values()
     );
     setUniqueLessons(newUniqueLessons);
   }, [lessons]);
@@ -148,16 +144,14 @@ const useDecryption = (session, paidCourse, course, lessons, setLessons) => {
       if (session?.user && paidCourse && !decryptionPerformed) {
         setLoading(true);
         const canAccess =
-          session.user.purchased?.some(
-            (purchase) => purchase.courseId === course?.d
-          ) ||
+          session.user.purchased?.some(purchase => purchase.courseId === course?.d) ||
           session.user?.role?.subscribed ||
           session.user?.pubkey === course?.pubkey;
 
         if (canAccess && lessons.length > 0) {
           try {
             const decryptedLessons = await Promise.all(
-              lessons.map(async (lesson) => {
+              lessons.map(async lesson => {
                 const decryptedContent = await decryptContent(lesson.content);
                 return { ...lesson, content: decryptedContent };
               })
@@ -165,7 +159,7 @@ const useDecryption = (session, paidCourse, course, lessons, setLessons) => {
             setLessons(decryptedLessons);
             setDecryptionPerformed(true);
           } catch (error) {
-            console.error("Error decrypting lessons:", error);
+            console.error('Error decrypting lessons:', error);
           }
         }
         setLoading(false);
@@ -189,12 +183,12 @@ const Course = () => {
   const [nsec, setNsec] = useState(null);
   const [npub, setNpub] = useState(null);
 
-  const setCompleted = useCallback((lessonId) => {
-    setCompletedLessons((prev) => [...prev, lessonId]);
+  const setCompleted = useCallback(lessonId => {
+    setCompletedLessons(prev => [...prev, lessonId]);
   }, []);
 
   const fetchAuthor = useCallback(
-    async (pubkey) => {
+    async pubkey => {
       const author = await ndk.getUser({ pubkey });
       const profile = await author.fetchProfile();
       const fields = await findKind0Fields(profile);
@@ -237,7 +231,7 @@ const Course = () => {
   useEffect(() => {
     if (uniqueLessons.length > 0) {
       const addresses = {};
-      uniqueLessons.forEach((lesson) => {
+      uniqueLessons.forEach(lesson => {
         const addr = nip19.naddrEncode({
           pubkey: lesson.pubkey,
           kind: lesson.kind,
@@ -252,49 +246,37 @@ const Course = () => {
 
   useEffect(() => {
     if (session?.user?.privkey) {
-      const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
+      const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
       setNsec(nip19.nsecEncode(privkeyBuffer));
     } else if (session?.user?.pubkey) {
       setNpub(nip19.npubEncode(session.user.pubkey));
     }
   }, [session]);
 
-  const handleAccordionChange = (e) => {
+  const handleAccordionChange = e => {
     const newIndex = e.index === expandedIndex ? null : e.index;
     setExpandedIndex(newIndex);
 
     if (newIndex !== null) {
-      router.push(
-        `/course/${router.query.slug}?active=${newIndex}`,
-        undefined,
-        { shallow: true }
-      );
+      router.push(`/course/${router.query.slug}?active=${newIndex}`, undefined, { shallow: true });
     } else {
       router.push(`/course/${router.query.slug}`, undefined, { shallow: true });
     }
   };
 
-  const handlePaymentSuccess = async (response) => {
+  const handlePaymentSuccess = async response => {
     if (response && response?.preimage) {
       const updated = await update();
-      showToast(
-        "success",
-        "Payment Success",
-        "You have successfully purchased this course"
-      );
+      showToast('success', 'Payment Success', 'You have successfully purchased this course');
     } else {
-      showToast(
-        "error",
-        "Error",
-        "Failed to purchase course. Please try again."
-      );
+      showToast('error', 'Error', 'Failed to purchase course. Please try again.');
     }
   };
 
-  const handlePaymentError = (error) => {
+  const handlePaymentError = error => {
     showToast(
-      "error",
-      "Payment Error",
+      'error',
+      'Payment Error',
       `Failed to purchase course. Please try again. Error: ${error}`
     );
   };
@@ -307,11 +289,8 @@ const Course = () => {
     );
   }
 
-  const renderLesson = (lesson) => {
-    if (
-      lesson.topics?.includes("video") &&
-      lesson.topics?.includes("document")
-    ) {
+  const renderLesson = lesson => {
+    if (lesson.topics?.includes('video') && lesson.topics?.includes('document')) {
       return (
         <CombinedLesson
           lesson={lesson}
@@ -321,10 +300,7 @@ const Course = () => {
           setCompleted={setCompleted}
         />
       );
-    } else if (
-      lesson.type === "video" &&
-      !lesson.topics?.includes("document")
-    ) {
+    } else if (lesson.type === 'video' && !lesson.topics?.includes('document')) {
       return (
         <VideoLesson
           lesson={lesson}
@@ -334,10 +310,7 @@ const Course = () => {
           setCompleted={setCompleted}
         />
       );
-    } else if (
-      lesson.type === "document" &&
-      !lesson.topics?.includes("video")
-    ) {
+    } else if (lesson.type === 'document' && !lesson.topics?.includes('video')) {
       return (
         <DocumentLesson
           lesson={lesson}
@@ -372,11 +345,11 @@ const Course = () => {
             <AccordionTab
               key={index}
               pt={{
-                root: { className: "border-none" },
-                header: { className: "border-none" },
-                headerAction: { className: "border-none" },
-                content: { className: "border-none max-mob:px-0 max-tab:px-0" },
-                accordiontab: { className: "border-none" },
+                root: { className: 'border-none' },
+                header: { className: 'border-none' },
+                headerAction: { className: 'border-none' },
+                content: { className: 'border-none max-mob:px-0 max-tab:px-0' },
+                accordiontab: { className: 'border-none' },
               }}
               header={
                 <div className="flex align-items-center justify-between w-full">
@@ -394,21 +367,19 @@ const Course = () => {
                 {renderLesson(lesson)}
                 {nAddresses[lesson.id] && (
                   <div className="mt-8">
-                    {!paidCourse ||
-                    decryptionPerformed ||
-                    session?.user?.role?.subscribed ? (
+                    {!paidCourse || decryptionPerformed || session?.user?.role?.subscribed ? (
                       <ZapThreadsWrapper
                         anchor={nAddresses[lesson.id]}
                         user={session?.user ? nsec || npub : null}
-                        relays={appConfig.defaultRelayUrls.join(",")}
+                        relays={appConfig.defaultRelayUrls.join(',')}
                         disable="zaps"
                         isAuthorized={true}
                       />
                     ) : (
                       <div className="text-center p-4 bg-gray-800/50 rounded-lg">
                         <p className="text-gray-400">
-                          Comments are only available to course purchasers,
-                          subscribers, and the course creator.
+                          Comments are only available to course purchasers, subscribers, and the
+                          course creator.
                         </p>
                       </div>
                     )}
@@ -419,9 +390,7 @@ const Course = () => {
           ))}
       </Accordion>
       <div className="mx-auto my-6">
-        {course?.content && (
-          <MDDisplay className="p-4 rounded-lg" source={course.content} />
-        )}
+        {course?.content && <MDDisplay className="p-4 rounded-lg" source={course.content} />}
       </div>
     </>
   );

From da0a877e9b49d415c3604b30c9c7a6d29c47b61a Mon Sep 17 00:00:00 2001
From: kiwihodl <orangeamber@protonmail.com>
Date: Thu, 17 Apr 2025 13:40:42 -0500
Subject: [PATCH 05/22] Linted

---
 .../content/carousels/templates/CourseTemplate.js      |  2 +-
 src/pages/api/lightning-address/callback/[slug].js     | 10 ++++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js
index 0f792bd..e24e134 100644
--- a/src/components/content/carousels/templates/CourseTemplate.js
+++ b/src/components/content/carousels/templates/CourseTemplate.js
@@ -42,7 +42,7 @@ export function CourseTemplate({ course, showMetaTags = true }) {
 
   useEffect(() => {
     if (session?.user?.privkey) {
-      const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
+      const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
       setNsec(nip19.nsecEncode(privkeyBuffer));
     } else if (session?.user?.pubkey) {
       setNpub(nip19.npubEncode(session.user.pubkey));
diff --git a/src/pages/api/lightning-address/callback/[slug].js b/src/pages/api/lightning-address/callback/[slug].js
index f9e476a..68f12e3 100644
--- a/src/pages/api/lightning-address/callback/[slug].js
+++ b/src/pages/api/lightning-address/callback/[slug].js
@@ -81,12 +81,10 @@ export default async function handler(req, res) {
               },
             }
           );
-          res
-            .status(200)
-            .json({
-              pr: response.data.invoice,
-              verify: `${BACKEND_URL}/api/lightning-address/verify/${slug}/${response.data.payment_hash}`,
-            });
+          res.status(200).json({
+            pr: response.data.invoice,
+            verify: `${BACKEND_URL}/api/lightning-address/verify/${slug}/${response.data.payment_hash}`,
+          });
         } catch (error) {
           console.error(error);
           res.status(500).json({ error: 'Failed to generate invoice' });

From 70e31bfe91fcc418ddd3aa5a2e3b815e388a5db5 Mon Sep 17 00:00:00 2001
From: kiwi_ <kiwihodl@proton.me>
Date: Thu, 17 Apr 2025 14:45:16 -0500
Subject: [PATCH 06/22] Update src/components/content/videos/VideoDetails.js

Adding the buffer import.

useEffect(() => {
  if (session?.user?.privkey) {
    const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
    setNsec(nip19.nsecEncode(privkeyBuffer));
  } else if (session?.user?.pubkey) {
    setNpub(nip19.npubEncode(session.user.pubkey));
  }
}, [session]);

The line const privkeyBuffer = Buffer.from(session.user.privkey, 'hex'); is using the global Buffer object. In Node.js environments, Buffer is available globally, but in the browser (where Next.js client components run), it isn't.
As the code rabbit mentioned, Webpack 5 (which Next.js uses) no longer automatically polyfills Node.js globals like Buffer. So when this code runs in the browser, it will throw a ReferenceError because Buffer is undefined.

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 src/components/content/videos/VideoDetails.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/content/videos/VideoDetails.js b/src/components/content/videos/VideoDetails.js
index 71b4c9d..0556a66 100644
--- a/src/components/content/videos/VideoDetails.js
+++ b/src/components/content/videos/VideoDetails.js
@@ -15,10 +15,12 @@ import useWindowWidth from '@/hooks/useWindowWidth';
 import dynamic from 'next/dynamic';
 import { Toast } from 'primereact/toast';
 import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
+import React, { useEffect, useState, useRef } from 'react';
+// Needed for nip19 encoding on the client
+import { Buffer } from 'buffer';
 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,
 });

From 02caab317cb293f36f70caea116c560910339c13 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@protonmail.com>
Date: Sun, 20 Apr 2025 14:41:27 -0500
Subject: [PATCH 07/22] capture zapRef current fo cleanup in ZapThreadsWrapper

---
 src/components/ZapThreadsWrapper.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/ZapThreadsWrapper.js b/src/components/ZapThreadsWrapper.js
index 1b129b7..e4c36f8 100644
--- a/src/components/ZapThreadsWrapper.js
+++ b/src/components/ZapThreadsWrapper.js
@@ -9,6 +9,9 @@ const ZapThreadsWrapper = ({ anchor, user, relays, disable, className, isAuthori
     if (!isAuthorized) {
       return;
     }
+    
+    // Store the current value of zapRef to use in the cleanup function
+    const currentZapRef = zapRef.current;
 
     // Create a new <script> element
     const script = document.createElement('script');
@@ -45,15 +48,15 @@ const ZapThreadsWrapper = ({ anchor, user, relays, disable, className, isAuthori
       });
 
       // Remove any existing <zap-threads> element
-      if (zapRef.current) {
-        while (zapRef.current.firstChild) {
-          zapRef.current.removeChild(zapRef.current.firstChild);
+      if (currentZapRef) {
+        while (currentZapRef.firstChild) {
+          currentZapRef.removeChild(currentZapRef.firstChild);
         }
       }
 
       // Append the new element
-      if (zapRef.current) {
-        zapRef.current.appendChild(zapElement);
+      if (currentZapRef) {
+        currentZapRef.appendChild(zapElement);
       }
     };
 
@@ -68,9 +71,9 @@ const ZapThreadsWrapper = ({ anchor, user, relays, disable, className, isAuthori
 
     // Cleanup function to remove the <zap-threads> element and the <script> element when the component is unmounted
     return () => {
-      if (zapRef.current) {
-        while (zapRef.current.firstChild) {
-          zapRef.current.removeChild(zapRef.current.firstChild);
+      if (currentZapRef) {
+        while (currentZapRef.firstChild) {
+          currentZapRef.removeChild(currentZapRef.firstChild);
         }
       }
       // Remove the <script> element from the <body> of the document

From d979c8a5a8b7fd035c7ff58fcbedc25d6ceecf1f Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@protonmail.com>
Date: Sun, 20 Apr 2025 16:17:37 -0500
Subject: [PATCH 08/22] fix dupe import

---
 src/components/content/videos/VideoDetails.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/content/videos/VideoDetails.js b/src/components/content/videos/VideoDetails.js
index 0556a66..dca2252 100644
--- a/src/components/content/videos/VideoDetails.js
+++ b/src/components/content/videos/VideoDetails.js
@@ -15,12 +15,11 @@ import useWindowWidth from '@/hooks/useWindowWidth';
 import dynamic from 'next/dynamic';
 import { Toast } from 'primereact/toast';
 import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
-import React, { useEffect, useState, useRef } from 'react';
-// Needed for nip19 encoding on the client
 import { Buffer } from 'buffer';
 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,
 });

From 751216595d41ce4a7df7fa758695eb0f44897082 Mon Sep 17 00:00:00 2001
From: Austin Kelsay <53542748+AustinKelsay@users.noreply.github.com>
Date: Sun, 20 Apr 2025 16:30:17 -0500
Subject: [PATCH 09/22] Update
 src/components/content/combined/CombinedDetails.js

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 src/components/content/combined/CombinedDetails.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/content/combined/CombinedDetails.js b/src/components/content/combined/CombinedDetails.js
index 1422371..6288173 100644
--- a/src/components/content/combined/CombinedDetails.js
+++ b/src/components/content/combined/CombinedDetails.js
@@ -134,6 +134,10 @@ const CombinedDetails = ({
   }, [zaps, processedEvent]);
 
   useEffect(() => {
+    // reset first to avoid key‑leak across session changes
+    setNsec(null);
+    setNpub(null);
+
     if (session?.user?.privkey) {
       const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
       setNsec(nip19.nsecEncode(privkeyBuffer));

From 29e0445964da093c817db07d887abb9f8d93fe20 Mon Sep 17 00:00:00 2001
From: Austin Kelsay <53542748+AustinKelsay@users.noreply.github.com>
Date: Sun, 20 Apr 2025 16:30:48 -0500
Subject: [PATCH 10/22] Update src/components/content/videos/VideoDetails.js

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 src/components/content/videos/VideoDetails.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/content/videos/VideoDetails.js b/src/components/content/videos/VideoDetails.js
index dca2252..74bdba2 100644
--- a/src/components/content/videos/VideoDetails.js
+++ b/src/components/content/videos/VideoDetails.js
@@ -146,8 +146,13 @@ const VideoDetails = ({
     if (session?.user?.privkey) {
       const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
       setNsec(nip19.nsecEncode(privkeyBuffer));
+      setNpub(null);
     } else if (session?.user?.pubkey) {
+      setNsec(null);
       setNpub(nip19.npubEncode(session.user.pubkey));
+    } else {
+      setNsec(null);
+      setNpub(null);
     }
   }, [session]);
 

From 4c291b57715165dc6b6e239167934c8d8761af87 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@protonmail.com>
Date: Sun, 20 Apr 2025 16:27:11 -0500
Subject: [PATCH 11/22] no comments on whole course for now until course layout
 update, cleanup a bit

---
 .prettierrc                                   |  2 +-
 .../carousels/templates/CourseTemplate.js     | 44 -------------------
 .../content/courses/CourseDetails.js          | 44 -------------------
 3 files changed, 1 insertion(+), 89 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index 59b59ba..151f9d5 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -6,4 +6,4 @@
   "printWidth": 100,
   "bracketSpacing": true,
   "arrowParens": "avoid"
-} 
+}
\ No newline at end of file
diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js
index e24e134..3619f8c 100644
--- a/src/components/content/carousels/templates/CourseTemplate.js
+++ b/src/components/content/carousels/templates/CourseTemplate.js
@@ -9,7 +9,6 @@ import {
 } from '@/components/ui/card';
 import { Tag } from 'primereact/tag';
 import ZapDisplay from '@/components/zaps/ZapDisplay';
-import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
 import { nip19 } from 'nostr-tools';
 import Image from 'next/image';
 import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
@@ -32,23 +31,12 @@ export function CourseTemplate({ course, showMetaTags = true }) {
   const [zapAmount, setZapAmount] = useState(0);
   const [lessonCount, setLessonCount] = useState(0);
   const [nAddress, setNAddress] = useState(null);
-  const [npub, setNpub] = useState(null);
-  const [nsec, setNsec] = useState(null);
   const router = useRouter();
   const { returnImageProxy } = useImageProxy();
   const windowWidth = useWindowWidth();
   const isMobile = windowWidth < 768;
   const { data: session } = useSession();
 
-  useEffect(() => {
-    if (session?.user?.privkey) {
-      const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
-      setNsec(nip19.nsecEncode(privkeyBuffer));
-    } else if (session?.user?.pubkey) {
-      setNpub(nip19.npubEncode(session.user.pubkey));
-    }
-  }, [session]);
-
   useEffect(() => {
     if (zaps.length > 0) {
       const total = getTotalFromZaps(zaps, course);
@@ -75,15 +63,6 @@ export function CourseTemplate({ course, showMetaTags = true }) {
     }
   }, [course]);
 
-  useEffect(() => {
-    if (session?.user?.privkey) {
-      const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
-      setNsec(nip19.nsecEncode(privkeyBuffer));
-    } else if (session?.user?.pubkey) {
-      setNpub(nip19.npubEncode(session.user.pubkey));
-    }
-  }, [session]);
-
   const shouldShowMetaTags = topic => {
     if (!showMetaTags) {
       return !['lesson', 'document', 'video', 'course'].includes(topic);
@@ -204,29 +183,6 @@ export function CourseTemplate({ course, showMetaTags = true }) {
           className="items-center py-2"
         />
       </CardFooter>
-      {nAddress !== null &&
-        (!course?.price ||
-          course.price === 0 ||
-          session?.user?.role?.subscribed ||
-          session?.user?.purchased?.some(purchase => purchase.resourceId === course.d)) && (
-          <div className="px-4 pb-4">
-            {nsec || npub ? (
-              <ZapThreadsWrapper
-                anchor={nAddress}
-                user={nsec || npub || null}
-                relays={appConfig.defaultRelayUrls.join(',')}
-                disable="zaps"
-              />
-            ) : (
-              <ZapThreadsWrapper
-                anchor={nAddress}
-                user={npub}
-                relays={appConfig.defaultRelayUrls.join(',')}
-                disable="zaps"
-              />
-            )}
-          </div>
-        )}
     </Card>
   );
 }
diff --git a/src/components/content/courses/CourseDetails.js b/src/components/content/courses/CourseDetails.js
index 06769f3..c2e308d 100644
--- a/src/components/content/courses/CourseDetails.js
+++ b/src/components/content/courses/CourseDetails.js
@@ -21,7 +21,6 @@ import WelcomeModal from '@/components/onboarding/WelcomeModal';
 import { ProgressSpinner } from 'primereact/progressspinner';
 import { Toast } from 'primereact/toast';
 import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
-import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
 
 export default function CourseDetails({
   processedEvent,
@@ -121,15 +120,6 @@ export default function CourseDetails({
     }
   }, [zaps, processedEvent]);
 
-  useEffect(() => {
-    if (session?.user?.privkey) {
-      const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
-      setNsec(nip19.nsecEncode(privkeyBuffer));
-    } else if (session?.user?.pubkey) {
-      setNpub(nip19.npubEncode(session.user.pubkey));
-    }
-  }, [session]);
-
   const renderPaymentMessage = () => {
     if (session?.user && session.user?.role?.subscribed && decryptionPerformed) {
       return (
@@ -278,40 +268,6 @@ export default function CourseDetails({
           </div>
           <div className="w-full mt-4">{renderPaymentMessage()}</div>
         </div>
-        {nAddress !== null && (
-          <div className="px-4">
-            {paidCourse ? (
-              // For paid content, only show ZapThreads if user has access
-              processedEvent?.pubkey === session?.user?.pubkey ||
-              decryptionPerformed ||
-              session?.user?.role?.subscribed ? (
-                <ZapThreadsWrapper
-                  anchor={nAddress}
-                  user={session?.user ? nsec || npub : null}
-                  relays={appConfig.defaultRelayUrls.join(',')}
-                  disable="zaps"
-                  isAuthorized={true}
-                />
-              ) : (
-                <div className="text-center p-4 bg-gray-800/50 rounded-lg">
-                  <p className="text-gray-400">
-                    Comments are only available to course purchasers, subscribers, and the course
-                    creator.
-                  </p>
-                </div>
-              )
-            ) : (
-              // For free content, show ZapThreads to everyone
-              <ZapThreadsWrapper
-                anchor={nAddress}
-                user={session?.user ? nsec || npub : null}
-                relays={appConfig.defaultRelayUrls.join(',')}
-                disable="zaps"
-                isAuthorized={true}
-              />
-            )}
-          </div>
-        )}
       </div>
     </div>
   );

From 8d0c349bb3d805caebaa3d50e07a4481ff81365b Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@protonmail.com>
Date: Sun, 20 Apr 2025 16:32:52 -0500
Subject: [PATCH 12/22] set keys for zapthreads wrapper without risking leak of
 old key state

---
 .../content/combined/CombinedDetails.js        |  5 +++++
 src/components/content/courses/CourseLesson.js |  5 +++++
 .../content/documents/DocumentDetails.js       |  5 +++++
 .../feeds/messages/CommunityMessage.js         | 18 ++++++++++--------
 src/pages/course/[slug]/index.js               |  5 +++++
 src/pages/details/[slug]/index.js              |  5 +++++
 6 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/components/content/combined/CombinedDetails.js b/src/components/content/combined/CombinedDetails.js
index 6288173..ab95db1 100644
--- a/src/components/content/combined/CombinedDetails.js
+++ b/src/components/content/combined/CombinedDetails.js
@@ -141,8 +141,13 @@ const CombinedDetails = ({
     if (session?.user?.privkey) {
       const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
       setNsec(nip19.nsecEncode(privkeyBuffer));
+      setNpub(null);
     } else if (session?.user?.pubkey) {
+      setNsec(null);
       setNpub(nip19.npubEncode(session.user.pubkey));
+    } else {
+      setNsec(null);
+      setNpub(null);
     }
   }, [session]);
 
diff --git a/src/components/content/courses/CourseLesson.js b/src/components/content/courses/CourseLesson.js
index dee48ff..16a6144 100644
--- a/src/components/content/courses/CourseLesson.js
+++ b/src/components/content/courses/CourseLesson.js
@@ -123,8 +123,13 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
     if (session?.user?.privkey) {
       const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
       setNsec(nip19.nsecEncode(privkeyBuffer));
+      setNpub(null);
     } else if (session?.user?.pubkey) {
+      setNsec(null);
       setNpub(nip19.npubEncode(session.user.pubkey));
+    } else {
+      setNsec(null);
+      setNpub(null);
     }
   }, [session]);
 
diff --git a/src/components/content/documents/DocumentDetails.js b/src/components/content/documents/DocumentDetails.js
index 602ff45..6e3abb8 100644
--- a/src/components/content/documents/DocumentDetails.js
+++ b/src/components/content/documents/DocumentDetails.js
@@ -145,8 +145,13 @@ const DocumentDetails = ({
     if (session?.user?.privkey) {
       const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
       setNsec(nip19.nsecEncode(privkeyBuffer));
+      setNpub(null);
     } else if (session?.user?.pubkey) {
+      setNsec(null);
       setNpub(nip19.npubEncode(session.user.pubkey));
+    } else {
+      setNsec(null);
+      setNpub(null);
     }
   }, [session]);
 
diff --git a/src/components/feeds/messages/CommunityMessage.js b/src/components/feeds/messages/CommunityMessage.js
index 803ead7..61de758 100644
--- a/src/components/feeds/messages/CommunityMessage.js
+++ b/src/components/feeds/messages/CommunityMessage.js
@@ -68,14 +68,16 @@ const CommunityMessage = ({ message, searchQuery, windowWidth, platform }) => {
   const { data: session } = useSession();
 
   useEffect(() => {
-    if (session?.user?.pubkey || session?.user?.privkey) {
-      let privkeyBuffer;
-      if (session.user.privkey) {
-        privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
-        setNsec(nip19.nsecEncode(privkeyBuffer));
-      } else {
-        setNpub(nip19.npubEncode(session.user.pubkey));
-      }
+    if (session?.user?.privkey) {
+      const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
+      setNsec(nip19.nsecEncode(privkeyBuffer));
+      setNpub(null);
+    } else if (session?.user?.pubkey) {
+      setNsec(null);
+      setNpub(nip19.npubEncode(session.user.pubkey));
+    } else {
+      setNsec(null);
+      setNpub(null);
     }
   }, [session]);
 
diff --git a/src/pages/course/[slug]/index.js b/src/pages/course/[slug]/index.js
index cb0c9a2..a99ef5e 100644
--- a/src/pages/course/[slug]/index.js
+++ b/src/pages/course/[slug]/index.js
@@ -248,8 +248,13 @@ const Course = () => {
     if (session?.user?.privkey) {
       const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
       setNsec(nip19.nsecEncode(privkeyBuffer));
+      setNpub(null);
     } else if (session?.user?.pubkey) {
+      setNsec(null);
       setNpub(nip19.npubEncode(session.user.pubkey));
+    } else {
+      setNsec(null);
+      setNpub(null);
     }
   }, [session]);
 
diff --git a/src/pages/details/[slug]/index.js b/src/pages/details/[slug]/index.js
index fb87e7c..9d12a84 100644
--- a/src/pages/details/[slug]/index.js
+++ b/src/pages/details/[slug]/index.js
@@ -83,8 +83,13 @@ const Details = () => {
     if (session?.user?.privkey) {
       const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
       setNsec(nip19.nsecEncode(privkeyBuffer));
+      setNpub(null);
     } else if (session?.user?.pubkey) {
+      setNsec(null);
       setNpub(nip19.npubEncode(session.user.pubkey));
+    } else {
+      setNsec(null);
+      setNpub(null);
     }
   }, [session]);
 

From ff809813d988a49bf5a9cb907be6c40f57018165 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@protonmail.com>
Date: Sun, 20 Apr 2025 16:53:21 -0500
Subject: [PATCH 13/22] cleanup

---
 .../carousels/templates/CourseTemplate.js       | 17 ++++++-----------
 src/config/appConfig.js                         |  3 +--
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js
index 3619f8c..0634b05 100644
--- a/src/components/content/carousels/templates/CourseTemplate.js
+++ b/src/components/content/carousels/templates/CourseTemplate.js
@@ -22,7 +22,6 @@ import useWindowWidth from '@/hooks/useWindowWidth';
 import GenericButton from '@/components/buttons/GenericButton';
 import appConfig from '@/config/appConfig';
 import { BookOpen } from 'lucide-react';
-import { useSession } from 'next-auth/react';
 
 export function CourseTemplate({ course, showMetaTags = true }) {
   const { zaps, zapsLoading, zapsError } = useZapsSubscription({
@@ -35,7 +34,6 @@ export function CourseTemplate({ course, showMetaTags = true }) {
   const { returnImageProxy } = useImageProxy();
   const windowWidth = useWindowWidth();
   const isMobile = windowWidth < 768;
-  const { data: session } = useSession();
 
   useEffect(() => {
     if (zaps.length > 0) {
@@ -112,9 +110,8 @@ export function CourseTemplate({ course, showMetaTags = true }) {
         </div>
       </CardHeader>
       <CardContent
-        className={`${
-          isMobile ? 'px-3' : ''
-        } pt-4 pb-2 w-full flex flex-row justify-between items-center`}
+        className={`${isMobile ? 'px-3' : ''
+          } pt-4 pb-2 w-full flex flex-row justify-between items-center`}
       >
         <div className="flex flex-wrap gap-2 max-w-[65%]">
           {course &&
@@ -145,9 +142,8 @@ export function CourseTemplate({ course, showMetaTags = true }) {
         )}
       </CardContent>
       <CardDescription
-        className={`${
-          isMobile ? 'w-full p-3' : 'p-6'
-        } py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
+        className={`${isMobile ? 'w-full p-3' : 'p-6'
+          } py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
         style={{
           overflow: 'hidden',
           display: '-webkit-box',
@@ -164,9 +160,8 @@ export function CourseTemplate({ course, showMetaTags = true }) {
         </p>
       </CardDescription>
       <CardFooter
-        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-t border-gray-700 pt-4 ${
-          isMobile ? 'px-3' : ''
-        }`}
+        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-t border-gray-700 pt-4 ${isMobile ? 'px-3' : ''
+          }`}
       >
         <p className="text-sm text-gray-300">
           {course?.published_at && course.published_at !== ''
diff --git a/src/config/appConfig.js b/src/config/appConfig.js
index 3155d97..a8325ba 100644
--- a/src/config/appConfig.js
+++ b/src/config/appConfig.js
@@ -11,8 +11,7 @@ const appConfig = {
   ],
   authorPubkeys: [
     'f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741',
-    'c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345',
-    'b9f4c34dc25b2ddd785c007bf6e12619bb1c9b8335b8d75d37bf76e97d1a0e31',
+    'c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345'
   ],
   customLightningAddresses: [
     {

From 86f010cf62c0283e82891213c268412ccf7cc938 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@protonmail.com>
Date: Sun, 20 Apr 2025 17:27:45 -0500
Subject: [PATCH 14/22] remove unused changes in courselesson

---
 .../content/courses/CourseLesson.js           | 36 -------------------
 1 file changed, 36 deletions(-)

diff --git a/src/components/content/courses/CourseLesson.js b/src/components/content/courses/CourseLesson.js
index 16a6144..c533aba 100644
--- a/src/components/content/courses/CourseLesson.js
+++ b/src/components/content/courses/CourseLesson.js
@@ -13,7 +13,6 @@ import { nip19 } from 'nostr-tools';
 import appConfig from '@/config/appConfig';
 import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
 import { useSession } from 'next-auth/react';
-import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
 
 const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
   ssr: false,
@@ -22,8 +21,6 @@ const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
 const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted }) => {
   const [zapAmount, setZapAmount] = useState(0);
   const [nAddress, setNAddress] = useState(null);
-  const [nsec, setNsec] = useState(null);
-  const [npub, setNpub] = useState(null);
   const { zaps, zapsLoading, zapsError } = useZapsQuery({
     event: lesson,
     type: 'lesson',
@@ -119,20 +116,6 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
     }
   }, [isCompleted, isTracking, lesson.id, setCompleted]);
 
-  useEffect(() => {
-    if (session?.user?.privkey) {
-      const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
-      setNsec(nip19.nsecEncode(privkeyBuffer));
-      setNpub(null);
-    } else if (session?.user?.pubkey) {
-      setNsec(null);
-      setNpub(nip19.npubEncode(session.user.pubkey));
-    } else {
-      setNsec(null);
-      setNpub(null);
-    }
-  }, [session]);
-
   useEffect(() => {
     if (lesson) {
       const addr = nip19.naddrEncode({
@@ -236,25 +219,6 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
       <div className="w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]">
         {renderContent()}
       </div>
-      {nAddress !== null && (!isPaid || decryptionPerformed || session?.user?.role?.subscribed) && (
-        <div className="px-4">
-          {nsec || npub ? (
-            <ZapThreadsWrapper
-              anchor={nAddress}
-              user={nsec || npub || null}
-              relays={appConfig.defaultRelayUrls.join(',')}
-              disable="zaps"
-            />
-          ) : (
-            <ZapThreadsWrapper
-              anchor={nAddress}
-              user={npub}
-              relays={appConfig.defaultRelayUrls.join(',')}
-              disable="zaps"
-            />
-          )}
-        </div>
-      )}
     </div>
   );
 };

From 38bb4b79cdf30563b0ccb91271f59d5b3b88dc27 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@protonmail.com>
Date: Sun, 20 Apr 2025 17:31:40 -0500
Subject: [PATCH 15/22] clean up unused

---
 .../content/courses/CourseLesson.js           | 19 ++-----------------
 1 file changed, 2 insertions(+), 17 deletions(-)

diff --git a/src/components/content/courses/CourseLesson.js b/src/components/content/courses/CourseLesson.js
index c533aba..ac8504f 100644
--- a/src/components/content/courses/CourseLesson.js
+++ b/src/components/content/courses/CourseLesson.js
@@ -20,11 +20,8 @@ const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
 
 const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted }) => {
   const [zapAmount, setZapAmount] = useState(0);
-  const [nAddress, setNAddress] = useState(null);
-  const { zaps, zapsLoading, zapsError } = useZapsQuery({
-    event: lesson,
-    type: 'lesson',
-  });
+  const { zaps, zapsLoading, zapsError } = useZapsQuery({ event: lesson,
+    type: 'lesson' });
   const { returnImageProxy } = useImageProxy();
   const menuRef = useRef(null);
   const toastRef = useRef(null);
@@ -116,18 +113,6 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
     }
   }, [isCompleted, isTracking, lesson.id, setCompleted]);
 
-  useEffect(() => {
-    if (lesson) {
-      const addr = nip19.naddrEncode({
-        pubkey: lesson.pubkey,
-        kind: lesson.kind,
-        identifier: lesson.d,
-        relays: appConfig.defaultRelayUrls,
-      });
-      setNAddress(addr);
-    }
-  }, [lesson]);
-
   const renderContent = () => {
     if (isPaid && decryptionPerformed) {
       return <MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />;

From 0d9f42fb07597278120ff991ad8facaf2cba3960 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@protonmail.com>
Date: Sun, 20 Apr 2025 17:36:03 -0500
Subject: [PATCH 16/22] Remove files from PR tracking while keeping them in the
 workspace

---
 .prettierrc                                   |   9 -
 .../carousels/templates/CourseTemplate.js     | 183 ---------------
 .../content/courses/CourseLesson.js           | 211 ------------------
 3 files changed, 403 deletions(-)
 delete mode 100644 .prettierrc
 delete mode 100644 src/components/content/carousels/templates/CourseTemplate.js
 delete mode 100644 src/components/content/courses/CourseLesson.js

diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 151f9d5..0000000
--- a/.prettierrc
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "printWidth": 100,
-  "bracketSpacing": true,
-  "arrowParens": "avoid"
-}
\ No newline at end of file
diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js
deleted file mode 100644
index 0634b05..0000000
--- a/src/components/content/carousels/templates/CourseTemplate.js
+++ /dev/null
@@ -1,183 +0,0 @@
-import { useState, useEffect } from 'react';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Tag } from 'primereact/tag';
-import ZapDisplay from '@/components/zaps/ZapDisplay';
-import { nip19 } from 'nostr-tools';
-import Image from 'next/image';
-import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
-import { getTotalFromZaps } from '@/utils/lightning';
-import { useImageProxy } from '@/hooks/useImageProxy';
-import { useRouter } from 'next/router';
-import { formatTimestampToHowLongAgo } from '@/utils/time';
-import { ProgressSpinner } from 'primereact/progressspinner';
-import { Message } from 'primereact/message';
-import useWindowWidth from '@/hooks/useWindowWidth';
-import GenericButton from '@/components/buttons/GenericButton';
-import appConfig from '@/config/appConfig';
-import { BookOpen } from 'lucide-react';
-
-export function CourseTemplate({ course, showMetaTags = true }) {
-  const { zaps, zapsLoading, zapsError } = useZapsSubscription({
-    event: course,
-  });
-  const [zapAmount, setZapAmount] = useState(0);
-  const [lessonCount, setLessonCount] = useState(0);
-  const [nAddress, setNAddress] = useState(null);
-  const router = useRouter();
-  const { returnImageProxy } = useImageProxy();
-  const windowWidth = useWindowWidth();
-  const isMobile = windowWidth < 768;
-
-  useEffect(() => {
-    if (zaps.length > 0) {
-      const total = getTotalFromZaps(zaps, course);
-      setZapAmount(total);
-    }
-  }, [zaps, course]);
-
-  useEffect(() => {
-    if (course && course?.tags) {
-      const lessons = course.tags.filter(tag => tag[0] === 'a');
-      setLessonCount(lessons.length);
-    }
-  }, [course]);
-
-  useEffect(() => {
-    if (course && course?.d) {
-      const nAddress = nip19.naddrEncode({
-        pubkey: course.pubkey,
-        kind: course.kind,
-        identifier: course.d,
-        relays: appConfig.defaultRelayUrls,
-      });
-      setNAddress(nAddress);
-    }
-  }, [course]);
-
-  const shouldShowMetaTags = topic => {
-    if (!showMetaTags) {
-      return !['lesson', 'document', 'video', 'course'].includes(topic);
-    }
-    return true;
-  };
-
-  if (!nAddress)
-    return (
-      <div className="w-full h-full flex items-center justify-center">
-        <ProgressSpinner />
-      </div>
-    );
-
-  if (zapsError) return <div>Error: {zapsError}</div>;
-
-  return (
-    <Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
-      <div
-        className="relative w-full h-0 hover:opacity-70 cursor-pointer"
-        style={{ paddingBottom: '56.25%' }}
-        onClick={() => router.push(`/course/${nAddress}`)}
-      >
-        <Image
-          alt="video thumbnail"
-          src={returnImageProxy(course.image)}
-          quality={100}
-          layout="fill"
-          objectFit="cover"
-          className="rounded-md"
-        />
-        <div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50" />
-        <div className="absolute bottom-4 left-4 flex gap-2">
-          <BookOpen className="w-6 h-6 text-white" />
-        </div>
-      </div>
-      <CardHeader className="flex flex-row justify-between items-center p-4 border-b border-gray-700">
-        <div className="flex items-center gap-4">
-          <CardTitle className="text-xl sm:text-2xl text-[#f8f8ff]">{course.name}</CardTitle>
-        </div>
-        <div className="text-[#f8f8ff]">
-          <ZapDisplay
-            zapAmount={zapAmount}
-            event={course}
-            zapsLoading={zapsLoading && zapAmount === 0}
-          />
-        </div>
-      </CardHeader>
-      <CardContent
-        className={`${isMobile ? 'px-3' : ''
-          } pt-4 pb-2 w-full flex flex-row justify-between items-center`}
-      >
-        <div className="flex flex-wrap gap-2 max-w-[65%]">
-          {course &&
-            course.topics &&
-            course.topics.map(
-              (topic, index) =>
-                shouldShowMetaTags(topic) && (
-                  <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
-                    {topic}
-                  </Tag>
-                )
-            )}
-        </div>
-        {course?.price && course?.price > 0 ? (
-          <Message
-            className={`${isMobile ? 'py-1 text-xs' : 'py-2'} whitespace-nowrap`}
-            icon="pi pi-lock"
-            severity="info"
-            text={`${course.price} sats`}
-          />
-        ) : (
-          <Message
-            className={`${isMobile ? 'py-1 text-xs' : 'py-2'} whitespace-nowrap`}
-            icon="pi pi-lock-open"
-            severity="success"
-            text="Free"
-          />
-        )}
-      </CardContent>
-      <CardDescription
-        className={`${isMobile ? 'w-full p-3' : 'p-6'
-          } py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
-        style={{
-          overflow: 'hidden',
-          display: '-webkit-box',
-          WebkitBoxOrient: 'vertical',
-          WebkitLineClamp: '2',
-        }}
-      >
-        <p className="line-clamp-2 text-wrap break-words">
-          {(course.summary || course.description)?.split('\n').map((line, index) => (
-            <span className="text-wrap break-words" key={index}>
-              {line}
-            </span>
-          ))}
-        </p>
-      </CardDescription>
-      <CardFooter
-        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-t border-gray-700 pt-4 ${isMobile ? 'px-3' : ''
-          }`}
-      >
-        <p className="text-sm text-gray-300">
-          {course?.published_at && course.published_at !== ''
-            ? formatTimestampToHowLongAgo(course.published_at)
-            : formatTimestampToHowLongAgo(course.created_at)}
-        </p>
-        <GenericButton
-          onClick={() => router.push(`/course/${nAddress}`)}
-          size="small"
-          label="Start Learning"
-          icon="pi pi-chevron-right"
-          iconPos="right"
-          outlined
-          className="items-center py-2"
-        />
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/src/components/content/courses/CourseLesson.js b/src/components/content/courses/CourseLesson.js
deleted file mode 100644
index ac8504f..0000000
--- a/src/components/content/courses/CourseLesson.js
+++ /dev/null
@@ -1,211 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { Tag } from 'primereact/tag';
-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';
-import useWindowWidth from '@/hooks/useWindowWidth';
-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,
-});
-
-const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted }) => {
-  const [zapAmount, setZapAmount] = useState(0);
-  const { zaps, zapsLoading, zapsError } = useZapsQuery({ event: lesson,
-    type: 'lesson' });
-  const { returnImageProxy } = useImageProxy();
-  const menuRef = useRef(null);
-  const toastRef = useRef(null);
-  const windowWidth = useWindowWidth();
-  const isMobileView = windowWidth <= 768;
-  const { data: session } = useSession();
-
-  const readTime = lesson?.content ? Math.max(30, Math.ceil(lesson.content.length / 20)) : 60;
-
-  const { isCompleted, isTracking, markLessonAsCompleted } = useTrackDocumentLesson({
-    lessonId: lesson?.d,
-    courseId: course?.d,
-    readTime,
-    paidCourse: isPaid,
-    decryptionPerformed,
-  });
-
-  const buildMenuItems = () => {
-    const items = [];
-
-    const hasAccess =
-      session?.user && (!isPaid || decryptionPerformed || session.user.role?.subscribed);
-
-    if (hasAccess) {
-      items.push({
-        label: 'Mark as completed',
-        icon: 'pi pi-check-circle',
-        command: async () => {
-          try {
-            await markLessonAsCompleted();
-            setCompleted && setCompleted(lesson.id);
-            toastRef.current.show({
-              severity: 'success',
-              summary: 'Success',
-              detail: 'Lesson marked as completed',
-              life: 3000,
-            });
-          } catch (error) {
-            console.error('Failed to mark lesson as completed:', error);
-            toastRef.current.show({
-              severity: 'error',
-              summary: 'Error',
-              detail: 'Failed to mark lesson as completed',
-              life: 3000,
-            });
-          }
-        },
-      });
-    }
-
-    items.push({
-      label: 'Open lesson',
-      icon: 'pi pi-arrow-up-right',
-      command: () => {
-        window.open(`/details/${lesson.id}`, '_blank');
-      },
-    });
-
-    items.push({
-      label: 'View Nostr note',
-      icon: 'pi pi-globe',
-      command: () => {
-        if (lesson?.d) {
-          const addr = nip19.naddrEncode({
-            pubkey: lesson.pubkey,
-            kind: lesson.kind,
-            identifier: lesson.d,
-            relays: appConfig.defaultRelayUrls || [],
-          });
-          window.open(`https://habla.news/a/${addr}`, '_blank');
-        }
-      },
-    });
-
-    return items;
-  };
-
-  useEffect(() => {
-    if (!zaps || zapsLoading || zapsError) return;
-
-    const total = getTotalFromZaps(zaps, lesson);
-
-    setZapAmount(total);
-  }, [zaps, zapsLoading, zapsError, lesson]);
-
-  useEffect(() => {
-    if (isCompleted && !isTracking && setCompleted) {
-      setCompleted(lesson.id);
-    }
-  }, [isCompleted, isTracking, lesson.id, setCompleted]);
-
-  const renderContent = () => {
-    if (isPaid && decryptionPerformed) {
-      return <MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />;
-    }
-    if (isPaid && !decryptionPerformed) {
-      return (
-        <p className="text-center text-xl text-red-500">
-          This content is paid and needs to be purchased before viewing.
-        </p>
-      );
-    }
-    if (lesson?.content) {
-      return <MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />;
-    }
-    return null;
-  };
-
-  return (
-    <div className="w-full px-24 pt-12 mx-auto mt-4 max-tab:px-0 max-mob:px-0 max-tab:pt-2 max-mob:pt-2">
-      <Toast ref={toastRef} />
-      <div className="w-full flex flex-row justify-between max-tab:flex-col max-mob:flex-col">
-        <div className="w-[75vw] mx-auto flex flex-row items-start justify-between max-tab:flex-col max-mob:flex-col max-tab:w-[95vw] max-mob:w-[95vw]">
-          <div className="flex flex-col items-start max-w-[45vw] max-tab:max-w-[100vw] max-mob:max-w-[100vw]">
-            <div className="flex flex-row items-center justify-between w-full">
-              <h1 className="text-4xl">{lesson?.title}</h1>
-              <ZapDisplay zapAmount={zapAmount} event={lesson} zapsLoading={zapsLoading} />
-            </div>
-            <div className="pt-2 flex flex-row justify-start w-full mt-2 mb-4">
-              {lesson &&
-                lesson.topics &&
-                lesson.topics.length > 0 &&
-                lesson.topics.map((topic, index) => (
-                  <Tag className="mr-2 text-white" key={index} value={topic}></Tag>
-                ))}
-            </div>
-            <div className="text-xl mt-6">
-              {lesson?.summary && (
-                <div className="text-xl mt-4">
-                  {lesson.summary.split('\n').map((line, index) => (
-                    <p key={index}>{line}</p>
-                  ))}
-                </div>
-              )}
-            </div>
-            <div className="flex items-center justify-between w-full mt-8">
-              <div className="flex flex-row w-fit items-center">
-                <Image
-                  alt="avatar thumbnail"
-                  src={returnImageProxy(lesson.author?.avatar, lesson.author?.pubkey)}
-                  width={50}
-                  height={50}
-                  className="rounded-full mr-4"
-                />
-                <p className="text-lg">
-                  Created by{' '}
-                  <a
-                    rel="noreferrer noopener"
-                    target="_blank"
-                    className="text-blue-500 hover:underline"
-                  >
-                    {lesson.author?.username || lesson.author?.pubkey}
-                  </a>
-                </p>
-              </div>
-              <div className="flex justify-end">
-                <MoreOptionsMenu
-                  menuItems={buildMenuItems()}
-                  additionalLinks={lesson?.additionalLinks || []}
-                  isMobileView={isMobileView}
-                />
-              </div>
-            </div>
-          </div>
-          <div className="flex flex-col max-tab:mt-12 max-mob:mt-12">
-            {lesson && (
-              <div className="flex flex-col items-center justify-between rounded-lg h-72 p-4 bg-gray-700 drop-shadow-md">
-                <Image
-                  alt="course thumbnail"
-                  src={returnImageProxy(lesson.image)}
-                  width={344}
-                  height={194}
-                  className="w-[344px] h-[194px] object-cover object-top rounded-lg"
-                />
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]">
-        {renderContent()}
-      </div>
-    </div>
-  );
-};
-
-export default CourseLesson;

From bb5356f10bac13b8225740e9df0b4ba0f7e53dba Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@protonmail.com>
Date: Sun, 20 Apr 2025 17:50:08 -0500
Subject: [PATCH 17/22] add back prettierrc

---
 .prettierrc                                   |   9 +
 .../carousels/templates/CourseTemplate.js     | 183 +++++++++++++++
 .../content/courses/CourseLesson.js           | 211 ++++++++++++++++++
 3 files changed, 403 insertions(+)
 create mode 100644 .prettierrc
 create mode 100644 src/components/content/carousels/templates/CourseTemplate.js
 create mode 100644 src/components/content/courses/CourseLesson.js

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..b43e32e
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+} 
\ No newline at end of file
diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js
new file mode 100644
index 0000000..0634b05
--- /dev/null
+++ b/src/components/content/carousels/templates/CourseTemplate.js
@@ -0,0 +1,183 @@
+import { useState, useEffect } from 'react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Tag } from 'primereact/tag';
+import ZapDisplay from '@/components/zaps/ZapDisplay';
+import { nip19 } from 'nostr-tools';
+import Image from 'next/image';
+import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
+import { getTotalFromZaps } from '@/utils/lightning';
+import { useImageProxy } from '@/hooks/useImageProxy';
+import { useRouter } from 'next/router';
+import { formatTimestampToHowLongAgo } from '@/utils/time';
+import { ProgressSpinner } from 'primereact/progressspinner';
+import { Message } from 'primereact/message';
+import useWindowWidth from '@/hooks/useWindowWidth';
+import GenericButton from '@/components/buttons/GenericButton';
+import appConfig from '@/config/appConfig';
+import { BookOpen } from 'lucide-react';
+
+export function CourseTemplate({ course, showMetaTags = true }) {
+  const { zaps, zapsLoading, zapsError } = useZapsSubscription({
+    event: course,
+  });
+  const [zapAmount, setZapAmount] = useState(0);
+  const [lessonCount, setLessonCount] = useState(0);
+  const [nAddress, setNAddress] = useState(null);
+  const router = useRouter();
+  const { returnImageProxy } = useImageProxy();
+  const windowWidth = useWindowWidth();
+  const isMobile = windowWidth < 768;
+
+  useEffect(() => {
+    if (zaps.length > 0) {
+      const total = getTotalFromZaps(zaps, course);
+      setZapAmount(total);
+    }
+  }, [zaps, course]);
+
+  useEffect(() => {
+    if (course && course?.tags) {
+      const lessons = course.tags.filter(tag => tag[0] === 'a');
+      setLessonCount(lessons.length);
+    }
+  }, [course]);
+
+  useEffect(() => {
+    if (course && course?.d) {
+      const nAddress = nip19.naddrEncode({
+        pubkey: course.pubkey,
+        kind: course.kind,
+        identifier: course.d,
+        relays: appConfig.defaultRelayUrls,
+      });
+      setNAddress(nAddress);
+    }
+  }, [course]);
+
+  const shouldShowMetaTags = topic => {
+    if (!showMetaTags) {
+      return !['lesson', 'document', 'video', 'course'].includes(topic);
+    }
+    return true;
+  };
+
+  if (!nAddress)
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <ProgressSpinner />
+      </div>
+    );
+
+  if (zapsError) return <div>Error: {zapsError}</div>;
+
+  return (
+    <Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
+      <div
+        className="relative w-full h-0 hover:opacity-70 cursor-pointer"
+        style={{ paddingBottom: '56.25%' }}
+        onClick={() => router.push(`/course/${nAddress}`)}
+      >
+        <Image
+          alt="video thumbnail"
+          src={returnImageProxy(course.image)}
+          quality={100}
+          layout="fill"
+          objectFit="cover"
+          className="rounded-md"
+        />
+        <div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50" />
+        <div className="absolute bottom-4 left-4 flex gap-2">
+          <BookOpen className="w-6 h-6 text-white" />
+        </div>
+      </div>
+      <CardHeader className="flex flex-row justify-between items-center p-4 border-b border-gray-700">
+        <div className="flex items-center gap-4">
+          <CardTitle className="text-xl sm:text-2xl text-[#f8f8ff]">{course.name}</CardTitle>
+        </div>
+        <div className="text-[#f8f8ff]">
+          <ZapDisplay
+            zapAmount={zapAmount}
+            event={course}
+            zapsLoading={zapsLoading && zapAmount === 0}
+          />
+        </div>
+      </CardHeader>
+      <CardContent
+        className={`${isMobile ? 'px-3' : ''
+          } pt-4 pb-2 w-full flex flex-row justify-between items-center`}
+      >
+        <div className="flex flex-wrap gap-2 max-w-[65%]">
+          {course &&
+            course.topics &&
+            course.topics.map(
+              (topic, index) =>
+                shouldShowMetaTags(topic) && (
+                  <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
+                    {topic}
+                  </Tag>
+                )
+            )}
+        </div>
+        {course?.price && course?.price > 0 ? (
+          <Message
+            className={`${isMobile ? 'py-1 text-xs' : 'py-2'} whitespace-nowrap`}
+            icon="pi pi-lock"
+            severity="info"
+            text={`${course.price} sats`}
+          />
+        ) : (
+          <Message
+            className={`${isMobile ? 'py-1 text-xs' : 'py-2'} whitespace-nowrap`}
+            icon="pi pi-lock-open"
+            severity="success"
+            text="Free"
+          />
+        )}
+      </CardContent>
+      <CardDescription
+        className={`${isMobile ? 'w-full p-3' : 'p-6'
+          } py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
+        style={{
+          overflow: 'hidden',
+          display: '-webkit-box',
+          WebkitBoxOrient: 'vertical',
+          WebkitLineClamp: '2',
+        }}
+      >
+        <p className="line-clamp-2 text-wrap break-words">
+          {(course.summary || course.description)?.split('\n').map((line, index) => (
+            <span className="text-wrap break-words" key={index}>
+              {line}
+            </span>
+          ))}
+        </p>
+      </CardDescription>
+      <CardFooter
+        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-t border-gray-700 pt-4 ${isMobile ? 'px-3' : ''
+          }`}
+      >
+        <p className="text-sm text-gray-300">
+          {course?.published_at && course.published_at !== ''
+            ? formatTimestampToHowLongAgo(course.published_at)
+            : formatTimestampToHowLongAgo(course.created_at)}
+        </p>
+        <GenericButton
+          onClick={() => router.push(`/course/${nAddress}`)}
+          size="small"
+          label="Start Learning"
+          icon="pi pi-chevron-right"
+          iconPos="right"
+          outlined
+          className="items-center py-2"
+        />
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/src/components/content/courses/CourseLesson.js b/src/components/content/courses/CourseLesson.js
new file mode 100644
index 0000000..ac8504f
--- /dev/null
+++ b/src/components/content/courses/CourseLesson.js
@@ -0,0 +1,211 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Tag } from 'primereact/tag';
+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';
+import useWindowWidth from '@/hooks/useWindowWidth';
+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,
+});
+
+const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted }) => {
+  const [zapAmount, setZapAmount] = useState(0);
+  const { zaps, zapsLoading, zapsError } = useZapsQuery({ event: lesson,
+    type: 'lesson' });
+  const { returnImageProxy } = useImageProxy();
+  const menuRef = useRef(null);
+  const toastRef = useRef(null);
+  const windowWidth = useWindowWidth();
+  const isMobileView = windowWidth <= 768;
+  const { data: session } = useSession();
+
+  const readTime = lesson?.content ? Math.max(30, Math.ceil(lesson.content.length / 20)) : 60;
+
+  const { isCompleted, isTracking, markLessonAsCompleted } = useTrackDocumentLesson({
+    lessonId: lesson?.d,
+    courseId: course?.d,
+    readTime,
+    paidCourse: isPaid,
+    decryptionPerformed,
+  });
+
+  const buildMenuItems = () => {
+    const items = [];
+
+    const hasAccess =
+      session?.user && (!isPaid || decryptionPerformed || session.user.role?.subscribed);
+
+    if (hasAccess) {
+      items.push({
+        label: 'Mark as completed',
+        icon: 'pi pi-check-circle',
+        command: async () => {
+          try {
+            await markLessonAsCompleted();
+            setCompleted && setCompleted(lesson.id);
+            toastRef.current.show({
+              severity: 'success',
+              summary: 'Success',
+              detail: 'Lesson marked as completed',
+              life: 3000,
+            });
+          } catch (error) {
+            console.error('Failed to mark lesson as completed:', error);
+            toastRef.current.show({
+              severity: 'error',
+              summary: 'Error',
+              detail: 'Failed to mark lesson as completed',
+              life: 3000,
+            });
+          }
+        },
+      });
+    }
+
+    items.push({
+      label: 'Open lesson',
+      icon: 'pi pi-arrow-up-right',
+      command: () => {
+        window.open(`/details/${lesson.id}`, '_blank');
+      },
+    });
+
+    items.push({
+      label: 'View Nostr note',
+      icon: 'pi pi-globe',
+      command: () => {
+        if (lesson?.d) {
+          const addr = nip19.naddrEncode({
+            pubkey: lesson.pubkey,
+            kind: lesson.kind,
+            identifier: lesson.d,
+            relays: appConfig.defaultRelayUrls || [],
+          });
+          window.open(`https://habla.news/a/${addr}`, '_blank');
+        }
+      },
+    });
+
+    return items;
+  };
+
+  useEffect(() => {
+    if (!zaps || zapsLoading || zapsError) return;
+
+    const total = getTotalFromZaps(zaps, lesson);
+
+    setZapAmount(total);
+  }, [zaps, zapsLoading, zapsError, lesson]);
+
+  useEffect(() => {
+    if (isCompleted && !isTracking && setCompleted) {
+      setCompleted(lesson.id);
+    }
+  }, [isCompleted, isTracking, lesson.id, setCompleted]);
+
+  const renderContent = () => {
+    if (isPaid && decryptionPerformed) {
+      return <MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />;
+    }
+    if (isPaid && !decryptionPerformed) {
+      return (
+        <p className="text-center text-xl text-red-500">
+          This content is paid and needs to be purchased before viewing.
+        </p>
+      );
+    }
+    if (lesson?.content) {
+      return <MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />;
+    }
+    return null;
+  };
+
+  return (
+    <div className="w-full px-24 pt-12 mx-auto mt-4 max-tab:px-0 max-mob:px-0 max-tab:pt-2 max-mob:pt-2">
+      <Toast ref={toastRef} />
+      <div className="w-full flex flex-row justify-between max-tab:flex-col max-mob:flex-col">
+        <div className="w-[75vw] mx-auto flex flex-row items-start justify-between max-tab:flex-col max-mob:flex-col max-tab:w-[95vw] max-mob:w-[95vw]">
+          <div className="flex flex-col items-start max-w-[45vw] max-tab:max-w-[100vw] max-mob:max-w-[100vw]">
+            <div className="flex flex-row items-center justify-between w-full">
+              <h1 className="text-4xl">{lesson?.title}</h1>
+              <ZapDisplay zapAmount={zapAmount} event={lesson} zapsLoading={zapsLoading} />
+            </div>
+            <div className="pt-2 flex flex-row justify-start w-full mt-2 mb-4">
+              {lesson &&
+                lesson.topics &&
+                lesson.topics.length > 0 &&
+                lesson.topics.map((topic, index) => (
+                  <Tag className="mr-2 text-white" key={index} value={topic}></Tag>
+                ))}
+            </div>
+            <div className="text-xl mt-6">
+              {lesson?.summary && (
+                <div className="text-xl mt-4">
+                  {lesson.summary.split('\n').map((line, index) => (
+                    <p key={index}>{line}</p>
+                  ))}
+                </div>
+              )}
+            </div>
+            <div className="flex items-center justify-between w-full mt-8">
+              <div className="flex flex-row w-fit items-center">
+                <Image
+                  alt="avatar thumbnail"
+                  src={returnImageProxy(lesson.author?.avatar, lesson.author?.pubkey)}
+                  width={50}
+                  height={50}
+                  className="rounded-full mr-4"
+                />
+                <p className="text-lg">
+                  Created by{' '}
+                  <a
+                    rel="noreferrer noopener"
+                    target="_blank"
+                    className="text-blue-500 hover:underline"
+                  >
+                    {lesson.author?.username || lesson.author?.pubkey}
+                  </a>
+                </p>
+              </div>
+              <div className="flex justify-end">
+                <MoreOptionsMenu
+                  menuItems={buildMenuItems()}
+                  additionalLinks={lesson?.additionalLinks || []}
+                  isMobileView={isMobileView}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col max-tab:mt-12 max-mob:mt-12">
+            {lesson && (
+              <div className="flex flex-col items-center justify-between rounded-lg h-72 p-4 bg-gray-700 drop-shadow-md">
+                <Image
+                  alt="course thumbnail"
+                  src={returnImageProxy(lesson.image)}
+                  width={344}
+                  height={194}
+                  className="w-[344px] h-[194px] object-cover object-top rounded-lg"
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]">
+        {renderContent()}
+      </div>
+    </div>
+  );
+};
+
+export default CourseLesson;

From 11367560c048a3cb7c076f90fecb45f425779265 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@protonmail.com>
Date: Sun, 20 Apr 2025 18:11:40 -0500
Subject: [PATCH 18/22] ready for final review

---
 src/config/appConfig.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config/appConfig.js b/src/config/appConfig.js
index a8325ba..d24e55d 100644
--- a/src/config/appConfig.js
+++ b/src/config/appConfig.js
@@ -11,7 +11,7 @@ const appConfig = {
   ],
   authorPubkeys: [
     'f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741',
-    'c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345'
+    'c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345',
   ],
   customLightningAddresses: [
     {

From 7f0e4807883ed181cc61a6ab336df7ce87ea40b0 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@protonmail.com>
Date: Sun, 20 Apr 2025 18:17:25 -0500
Subject: [PATCH 19/22] authorized check on details page

---
 src/pages/details/[slug]/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/details/[slug]/index.js b/src/pages/details/[slug]/index.js
index 9d12a84..b862c9b 100644
--- a/src/pages/details/[slug]/index.js
+++ b/src/pages/details/[slug]/index.js
@@ -220,6 +220,7 @@ const Details = () => {
             user={nsec || npub || null}
             relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.primal.net/, wss://nostrue.com/, wss://purplerelay.com/, wss://relay.devs.tools/"
             disable="zaps"
+            isAuthorized={!event.price || decryptedContent || session?.user?.role?.subscribed || authorView}
           />
         </div>
       ) : nAddress !== null ? (
@@ -229,6 +230,7 @@ const Details = () => {
             user={npub}
             relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.primal.net/, wss://nostrue.com/, wss://purplerelay.com/, wss://relay.devs.tools/"
             disable="zaps"
+            isAuthorized={!event.price || decryptedContent || session?.user?.role?.subscribed || authorView}
           />
         </div>
       ) : null}

From 3f000914d209da17c5843703b2e6830b000cc60c Mon Sep 17 00:00:00 2001
From: kiwihodl <orangeamber@protonmail.com>
Date: Tue, 22 Apr 2025 13:26:14 -0500
Subject: [PATCH 20/22] pull, add stashed changes to video details, update and
 commit, all that changed was a buffer import

---
 src/components/content/videos/VideoDetails.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/content/videos/VideoDetails.js b/src/components/content/videos/VideoDetails.js
index 74bdba2..84fb37e 100644
--- a/src/components/content/videos/VideoDetails.js
+++ b/src/components/content/videos/VideoDetails.js
@@ -19,6 +19,7 @@ import { Buffer } from 'buffer';
 import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
 import appConfig from '@/config/appConfig';
 import { nip19 } from 'nostr-tools';
+import { Buffer } from 'buffer';
 
 const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
   ssr: false,

From 6ed7dda3ad59ecd76d00184f2efb63a11b3af704 Mon Sep 17 00:00:00 2001
From: kiwihodl <orangeamber@protonmail.com>
Date: Tue, 22 Apr 2025 13:29:41 -0500
Subject: [PATCH 21/22] linted and removed duplicate import in VideoDetails

---
 src/components/ZapThreadsWrapper.js               |  2 +-
 .../content/carousels/templates/CourseTemplate.js | 15 +++++++++------
 src/components/content/courses/CourseLesson.js    |  3 +--
 src/components/content/videos/VideoDetails.js     |  1 -
 src/pages/details/[slug]/index.js                 |  8 ++++++--
 5 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/ZapThreadsWrapper.js b/src/components/ZapThreadsWrapper.js
index e4c36f8..05fb797 100644
--- a/src/components/ZapThreadsWrapper.js
+++ b/src/components/ZapThreadsWrapper.js
@@ -9,7 +9,7 @@ const ZapThreadsWrapper = ({ anchor, user, relays, disable, className, isAuthori
     if (!isAuthorized) {
       return;
     }
-    
+
     // Store the current value of zapRef to use in the cleanup function
     const currentZapRef = zapRef.current;
 
diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js
index 0634b05..7904048 100644
--- a/src/components/content/carousels/templates/CourseTemplate.js
+++ b/src/components/content/carousels/templates/CourseTemplate.js
@@ -110,8 +110,9 @@ export function CourseTemplate({ course, showMetaTags = true }) {
         </div>
       </CardHeader>
       <CardContent
-        className={`${isMobile ? 'px-3' : ''
-          } pt-4 pb-2 w-full flex flex-row justify-between items-center`}
+        className={`${
+          isMobile ? 'px-3' : ''
+        } pt-4 pb-2 w-full flex flex-row justify-between items-center`}
       >
         <div className="flex flex-wrap gap-2 max-w-[65%]">
           {course &&
@@ -142,8 +143,9 @@ export function CourseTemplate({ course, showMetaTags = true }) {
         )}
       </CardContent>
       <CardDescription
-        className={`${isMobile ? 'w-full p-3' : 'p-6'
-          } py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
+        className={`${
+          isMobile ? 'w-full p-3' : 'p-6'
+        } py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
         style={{
           overflow: 'hidden',
           display: '-webkit-box',
@@ -160,8 +162,9 @@ export function CourseTemplate({ course, showMetaTags = true }) {
         </p>
       </CardDescription>
       <CardFooter
-        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-t border-gray-700 pt-4 ${isMobile ? 'px-3' : ''
-          }`}
+        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-t border-gray-700 pt-4 ${
+          isMobile ? 'px-3' : ''
+        }`}
       >
         <p className="text-sm text-gray-300">
           {course?.published_at && course.published_at !== ''
diff --git a/src/components/content/courses/CourseLesson.js b/src/components/content/courses/CourseLesson.js
index ac8504f..3447cce 100644
--- a/src/components/content/courses/CourseLesson.js
+++ b/src/components/content/courses/CourseLesson.js
@@ -20,8 +20,7 @@ const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
 
 const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted }) => {
   const [zapAmount, setZapAmount] = useState(0);
-  const { zaps, zapsLoading, zapsError } = useZapsQuery({ event: lesson,
-    type: 'lesson' });
+  const { zaps, zapsLoading, zapsError } = useZapsQuery({ event: lesson, type: 'lesson' });
   const { returnImageProxy } = useImageProxy();
   const menuRef = useRef(null);
   const toastRef = useRef(null);
diff --git a/src/components/content/videos/VideoDetails.js b/src/components/content/videos/VideoDetails.js
index 84fb37e..c42b263 100644
--- a/src/components/content/videos/VideoDetails.js
+++ b/src/components/content/videos/VideoDetails.js
@@ -15,7 +15,6 @@ import useWindowWidth from '@/hooks/useWindowWidth';
 import dynamic from 'next/dynamic';
 import { Toast } from 'primereact/toast';
 import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
-import { Buffer } from 'buffer';
 import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
 import appConfig from '@/config/appConfig';
 import { nip19 } from 'nostr-tools';
diff --git a/src/pages/details/[slug]/index.js b/src/pages/details/[slug]/index.js
index b862c9b..ff3447c 100644
--- a/src/pages/details/[slug]/index.js
+++ b/src/pages/details/[slug]/index.js
@@ -220,7 +220,9 @@ const Details = () => {
             user={nsec || npub || null}
             relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.primal.net/, wss://nostrue.com/, wss://purplerelay.com/, wss://relay.devs.tools/"
             disable="zaps"
-            isAuthorized={!event.price || decryptedContent || session?.user?.role?.subscribed || authorView}
+            isAuthorized={
+              !event.price || decryptedContent || session?.user?.role?.subscribed || authorView
+            }
           />
         </div>
       ) : nAddress !== null ? (
@@ -230,7 +232,9 @@ const Details = () => {
             user={npub}
             relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.primal.net/, wss://nostrue.com/, wss://purplerelay.com/, wss://relay.devs.tools/"
             disable="zaps"
-            isAuthorized={!event.price || decryptedContent || session?.user?.role?.subscribed || authorView}
+            isAuthorized={
+              !event.price || decryptedContent || session?.user?.role?.subscribed || authorView
+            }
           />
         </div>
       ) : null}

From 833ebf34751cd0d70ac3c57e342abb8193b51cd4 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@protonmail.com>
Date: Thu, 24 Apr 2025 09:17:45 -0500
Subject: [PATCH 22/22] remove duplicate zap threads components, consolidate it
 all into the parent details index page

---
 .../content/documents/DocumentDetails.js      | 20 --------------
 src/components/content/videos/VideoDetails.js | 20 --------------
 src/pages/details/[slug]/index.js             | 27 ++++++++-----------
 3 files changed, 11 insertions(+), 56 deletions(-)

diff --git a/src/components/content/documents/DocumentDetails.js b/src/components/content/documents/DocumentDetails.js
index 6e3abb8..18027a8 100644
--- a/src/components/content/documents/DocumentDetails.js
+++ b/src/components/content/documents/DocumentDetails.js
@@ -327,26 +327,6 @@ const DocumentDetails = ({
             </div>
           </div>
           <div className="w-full mt-4">{renderPaymentMessage()}</div>
-          {nAddress && (
-            <div className="mt-8">
-              {!paidResource || decryptedContent || session?.user?.role?.subscribed ? (
-                <ZapThreadsWrapper
-                  anchor={nAddress}
-                  user={session?.user ? nsec || npub : null}
-                  relays={appConfig.defaultRelayUrls.join(',')}
-                  disable="zaps"
-                  isAuthorized={true}
-                />
-              ) : (
-                <div className="text-center p-4 bg-gray-800/50 rounded-lg">
-                  <p className="text-gray-400">
-                    Comments are only available to content purchasers, subscribers, and the content
-                    creator.
-                  </p>
-                </div>
-              )}
-            </div>
-          )}
         </div>
         {renderContent()}
       </div>
diff --git a/src/components/content/videos/VideoDetails.js b/src/components/content/videos/VideoDetails.js
index c42b263..6c9625c 100644
--- a/src/components/content/videos/VideoDetails.js
+++ b/src/components/content/videos/VideoDetails.js
@@ -333,26 +333,6 @@ const VideoDetails = ({
           </div>
         </div>
         <div className="w-full flex justify-start mt-4">{renderPaymentMessage()}</div>
-        {nAddress && (
-          <div className="mt-8">
-            {!paidResource || decryptedContent || session?.user?.role?.subscribed ? (
-              <ZapThreadsWrapper
-                anchor={nAddress}
-                user={session?.user ? nsec || npub : null}
-                relays={appConfig.defaultRelayUrls.join(',')}
-                disable="zaps"
-                isAuthorized={true}
-              />
-            ) : (
-              <div className="text-center p-4 bg-gray-800/50 rounded-lg">
-                <p className="text-gray-400">
-                  Comments are only available to content purchasers, subscribers, and the content
-                  creator.
-                </p>
-              </div>
-            )}
-          </div>
-        )}
       </div>
     </div>
   );
diff --git a/src/pages/details/[slug]/index.js b/src/pages/details/[slug]/index.js
index ff3447c..c4704d8 100644
--- a/src/pages/details/[slug]/index.js
+++ b/src/pages/details/[slug]/index.js
@@ -195,6 +195,9 @@ const Details = () => {
 
   const DetailComponent = getDetailComponent();
 
+  const isAuthorized =
+    !event.price || decryptedContent || session?.user?.role?.subscribed || authorView;
+
   return (
     <>
       <DetailComponent
@@ -213,31 +216,23 @@ const Details = () => {
         handlePaymentError={handlePaymentError}
         authorView={authorView}
       />
-      {nAddress !== null && (nsec || npub) ? (
+      {nAddress !== null && isAuthorized ? (
         <div className="px-4">
           <ZapThreadsWrapper
             anchor={nAddress}
             user={nsec || npub || null}
             relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.primal.net/, wss://nostrue.com/, wss://purplerelay.com/, wss://relay.devs.tools/"
             disable="zaps"
-            isAuthorized={
-              !event.price || decryptedContent || session?.user?.role?.subscribed || authorView
-            }
+            isAuthorized={isAuthorized}
           />
         </div>
-      ) : nAddress !== null ? (
-        <div className="px-4">
-          <ZapThreadsWrapper
-            anchor={nAddress}
-            user={npub}
-            relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.primal.net/, wss://nostrue.com/, wss://purplerelay.com/, wss://relay.devs.tools/"
-            disable="zaps"
-            isAuthorized={
-              !event.price || decryptedContent || session?.user?.role?.subscribed || authorView
-            }
-          />
+      ) : (
+        <div className="text-center p-4 mx-4 bg-gray-800/50 rounded-lg">
+          <p className="text-gray-400">
+            Comments are only available to content purchasers, subscribers, and the content creator.
+          </p>
         </div>
-      ) : null}
+      )}
     </>
   );
 };