From 80690df15a2f8d6dfa4b308ca0f43e5d706947d1 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Wed, 20 Dec 2023 12:31:24 +0200
Subject: [PATCH] fix spotlight modal for replies

---
 .../app/src/Element/Feed/TimelineRenderer.tsx | 36 +++++++++----------
 .../Spotlight/SpotlightThreadModal.tsx        | 26 ++++++++------
 2 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/packages/app/src/Element/Feed/TimelineRenderer.tsx b/packages/app/src/Element/Feed/TimelineRenderer.tsx
index f1a1e104..87c70870 100644
--- a/packages/app/src/Element/Feed/TimelineRenderer.tsx
+++ b/packages/app/src/Element/Feed/TimelineRenderer.tsx
@@ -27,7 +27,7 @@ export interface TimelineRendererProps {
 
 // filter frags[0].events that have media
 function Grid({ frags }: { frags: Array<TimelineFragment> }) {
-  const [modalThreadIndex, setModalThreadIndex] = useState<number | undefined>(undefined);
+  const [modalEventIndex, setModalEventIndex] = useState<number | undefined>(undefined);
   const allEvents = useMemo(() => {
     return frags.flatMap(frag => frag.events);
   }, [frags]);
@@ -35,39 +35,39 @@ function Grid({ frags }: { frags: Array<TimelineFragment> }) {
     return allEvents.filter(event => getEventMedia(event).length > 0);
   }, [allEvents]);
 
-  const modalThread = modalThreadIndex !== undefined ? mediaEvents[modalThreadIndex] : undefined;
-  const nextModalThread = modalThreadIndex !== undefined ? mediaEvents[modalThreadIndex + 1] : undefined;
-  const prevModalThread = modalThreadIndex !== undefined ? mediaEvents[modalThreadIndex - 1] : undefined;
+  const modalEvent = modalEventIndex !== undefined ? mediaEvents[modalEventIndex] : undefined;
+  const nextModalEvent = modalEventIndex !== undefined ? mediaEvents[modalEventIndex + 1] : undefined;
+  const prevModalEvent = modalEventIndex !== undefined ? mediaEvents[modalEventIndex - 1] : undefined;
 
   return (
     <>
       <div className="grid grid-cols-3 gap-px md:gap-1">
         {mediaEvents.map((event, index) => (
-          <ImageGridItem key={event.id} event={event} onClick={() => setModalThreadIndex(index)} />
+          <ImageGridItem key={event.id} event={event} onClick={() => setModalEventIndex(index)} />
         ))}
       </div>
-      {modalThread && (
+      {modalEvent && (
         <SpotlightThreadModal
-          key={modalThread.id}
-          thread={NostrLink.fromEvent(modalThread)}
-          onClose={() => setModalThreadIndex(undefined)}
-          onBack={() => setModalThreadIndex(undefined)}
-          onNext={() => setModalThreadIndex(Math.min(modalThreadIndex + 1, mediaEvents.length - 1))}
-          onPrev={() => setModalThreadIndex(Math.max(modalThreadIndex - 1, 0))}
+          key={modalEvent.id}
+          event={modalEvent}
+          onClose={() => setModalEventIndex(undefined)}
+          onBack={() => setModalEventIndex(undefined)}
+          onNext={() => setModalEventIndex(Math.min((modalEventIndex ?? 0) + 1, mediaEvents.length - 1))}
+          onPrev={() => setModalEventIndex(Math.max((modalEventIndex ?? 0) - 1, 0))}
         />
       )}
-      {nextModalThread && ( // preload next
+      {nextModalEvent && ( // preload next
         <SpotlightThreadModal
           className="hidden"
-          key={`${nextModalThread.id}-next`}
-          thread={NostrLink.fromEvent(nextModalThread)}
+          key={`${nextModalEvent.id}-next`}
+          event={nextModalEvent}
         />
       )}
-      {prevModalThread && ( // preload previous
+      {prevModalEvent && ( // preload previous
         <SpotlightThreadModal
           className="hidden"
-          key={`${prevModalThread.id}-prev`}
-          thread={NostrLink.fromEvent(prevModalThread)}
+          key={`${prevModalEvent.id}-prev`}
+          event={prevModalEvent}
         />
       )}
     </>
diff --git a/packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx b/packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx
index 8a6f57ad..a8723a56 100644
--- a/packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx
+++ b/packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx
@@ -1,13 +1,14 @@
 import Modal from "@/Element/Modal";
-import { ThreadContext, ThreadContextWrapper } from "@/Hooks/useThreadContext";
+import { ThreadContextWrapper } from "@/Hooks/useThreadContext";
 import { Thread } from "@/Element/Event/Thread";
 import { useContext } from "react";
 import { SpotlightMedia } from "@/Element/Spotlight/SpotlightMedia";
-import { NostrLink } from "@snort/system";
+import {NostrLink, TaggedNostrEvent} from "@snort/system";
 import getEventMedia from "@/Element/Event/getEventMedia";
 
 interface SpotlightThreadModalProps {
-  thread: NostrLink;
+  thread?: NostrLink;
+  event?: TaggedNostrEvent;
   className?: string;
   onClose?: () => void;
   onBack?: () => void;
@@ -24,12 +25,18 @@ export function SpotlightThreadModal(props: SpotlightThreadModalProps) {
     }
   };
 
+  if (!props.thread && !props.event) {
+    throw new Error("SpotlightThreadModal requires either thread or event");
+  }
+
+  const link = props.event ? NostrLink.fromEvent(props.event) : props.thread;
+
   return (
     <Modal className={props.className} onClose={onClose} bodyClassName={"flex flex-1"}>
-      <ThreadContextWrapper link={props.thread}>
+      <ThreadContextWrapper link={link!}>
         <div className="flex flex-row h-screen w-screen">
           <div className="flex w-full md:w-2/3 items-center justify-center overflow-hidden" onClick={onClickBg}>
-            <SpotlightFromThread onClose={onClose} onNext={props.onNext} onPrev={props.onPrev} />
+            <SpotlightFromEvent event={props.event || thread.root} onClose={onClose} onNext={props.onNext} onPrev={props.onPrev} />
           </div>
           <div className="hidden md:flex w-1/3 min-w-[400px] flex-shrink-0 overflow-y-auto bg-bg-color">
             <Thread onBack={onBack} disableSpotlight={true} />
@@ -40,16 +47,15 @@ export function SpotlightThreadModal(props: SpotlightThreadModalProps) {
   );
 }
 
-interface SpotlightFromThreadProps {
+interface SpotlightFromEventProps {
+  event: TaggedNostrEvent;
   onClose: () => void;
   onNext?: () => void;
   onPrev?: () => void;
 }
 
-function SpotlightFromThread({ onClose, onNext, onPrev }: SpotlightFromThreadProps) {
-  const thread = useContext(ThreadContext);
-
-  const media = (thread.root && getEventMedia(thread.root)) || [];
+function SpotlightFromEvent({ event, onClose, onNext, onPrev }: SpotlightFromEventProps) {
+  const media = getEventMedia(event);
   return (
     <SpotlightMedia
       className="w-full"