Deck thread nav

packages/app/src/Element/Thread.tsx

@@ -154,8 +154,7 @@ const TierThree = ({ active, isLastSubthread, notes, related, chains, onNavigate
   return (
     <>
       <div
-        className={`subthread-container ${hasMultipleNotes ? "subthread-multi" : ""} ${
+        className={`subthread-container ${hasMultipleNotes ? "subthread-multi" : ""} ${isLast ? "subthread-last" : "subthread-mid"
-          isLast ? "subthread-last" : "subthread-mid"
           }`}>
         <Divider variant="small" />
         <Note
@@ -185,8 +184,7 @@ const TierThree = ({ active, isLastSubthread, notes, related, chains, onNavigate
         return (
           <div
             key={r.id}
-            className={`subthread-container ${lastReply ? "" : "subthread-multi"} ${
+            className={`subthread-container ${lastReply ? "" : "subthread-multi"} ${lastReply ? "subthread-last" : "subthread-mid"
-              lastReply ? "subthread-last" : "subthread-mid"
               }`}>
             <Divider variant="small" />
             <Note
@@ -216,7 +214,7 @@ export function ThreadRoute() {
   );
 }
 
-export function Thread() {
+export function Thread(props: { onBack?: () => void }) {
   const thread = useContext(ThreadContext);
 
   const navigate = useNavigate();
@@ -283,6 +281,8 @@ export function Thread() {
   function goBack() {
     if (parent) {
       thread.setCurrent(parent);
+    } else if (props.onBack) {
+      props.onBack();
     } else {
       navigate(-1);
     }
@@ -296,6 +296,7 @@ export function Thread() {
     defaultMessage: "Back",
     description: "Navigate back button on threads view",
   });
+
   return (
     <>
       <div className="main-content p">

packages/app/src/Element/TimelineFollows.tsx

@@ -22,6 +22,7 @@ export interface TimelineFollowsProps {
   liveStreams?: boolean;
   noteFilter?: (ev: NostrEvent) => boolean;
   noteRenderer?: (ev: NostrEvent) => ReactNode;
+  noteOnClick?: (ev: NostrEvent) => void;
 }
 
 /**
@@ -91,7 +92,7 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
         <>
           <div className="card latest-notes" onClick={() => onShowLatest()} ref={ref}>
             {latestAuthors.slice(0, 3).map(p => {
-              return <ProfileImage pubkey={p} showUsername={false} link={""} />;
+              return <ProfileImage pubkey={p} showUsername={false} link={""} showFollowingMark={false} />;
             })}
             <FormattedMessage
               defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
@@ -102,7 +103,7 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
           {!inView && (
             <div className="card latest-notes latest-notes-fixed pointer fade-in" onClick={() => onShowLatest(true)}>
               {latestAuthors.slice(0, 3).map(p => {
-                return <ProfileImage pubkey={p} showUsername={false} link={""} />;
+                return <ProfileImage pubkey={p} showUsername={false} link={""} showFollowingMark={false} />;
               })}
               <FormattedMessage
                 defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
@@ -116,7 +117,7 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
       {mainFeed.map(
         a =>
           props.noteRenderer?.(a) ?? (
-            <Note data={a as TaggedNostrEvent} related={relatedFeed(a.id)} key={a.id} depth={0} />
+            <Note data={a as TaggedNostrEvent} related={relatedFeed(a.id)} key={a.id} depth={0} onClick={props.noteOnClick} />
           ),
       )}
       <div className="flex f-center p">

packages/app/src/Pages/Deck.css

@@ -60,6 +60,7 @@
   display: flex;
   flex-direction: row;
   border-radius: unset;
+  justify-content: center;
   gap: 16px;
   --border-color: #3a3a3a;
 }

packages/app/src/Pages/DeckLayout.tsx

@@ -1,5 +1,5 @@
 import "./Deck.css";
-import { CSSProperties, useContext, useEffect, useState } from "react";
+import { CSSProperties, createContext, useContext, useEffect, useState } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import { NostrPrefix, createNostrLink } from "@snort/system";
@@ -24,10 +24,20 @@ import useLogin from "Hooks/useLogin";
 
 type Cols = "notes" | "articles" | "media" | "streams" | "notifications";
 
+interface DeckScope {
+  thread?: string,
+  setThread: (e?: string) => void
+}
+
+export const DeckContext = createContext<DeckScope | undefined>(undefined);
+
 export function SnortDeckLayout() {
   const login = useLogin();
   const navigate = useNavigate();
-  const [thread, setThread] = useState<string>();
+  const [deckScope, setDeckScope] = useState<DeckScope>({
+    setThread: (e?: string) => setDeckScope(s => ({ ...s, thread: e }))
+  });
+
 
   useLoginFeed();
   useTheme();
@@ -43,6 +53,7 @@ export function SnortDeckLayout() {
   const cols = ["notes", "media", "notifications", "articles"] as Array<Cols>;
   return (
     <div className="deck-layout">
+      <DeckContext.Provider value={deckScope}>
         <DeckNav />
         <div className="deck-cols">
           {cols.map(c => {
@@ -50,7 +61,7 @@ export function SnortDeckLayout() {
               case "notes":
                 return <NotesCol />;
               case "media":
-              return <MediaCol setThread={setThread} />;
+                return <MediaCol setThread={deckScope.setThread} />;
               case "articles":
                 return <ArticlesCol />;
               case "notifications":
@@ -58,19 +69,20 @@ export function SnortDeckLayout() {
             }
           })}
         </div>
-      {thread && (
+        {deckScope.thread && (
           <>
-          <Modal onClose={() => setThread(undefined)} className="thread-overlay">
+            <Modal onClose={() => deckScope.setThread(undefined)} className="thread-overlay">
-            <ThreadContextWrapper link={createNostrLink(NostrPrefix.Note, thread)}>
+              <ThreadContextWrapper link={createNostrLink(NostrPrefix.Note, deckScope.thread)}>
-              <SpotlightFromThread onClose={() => setThread(undefined)} />
+                <SpotlightFromThread onClose={() => deckScope.setThread(undefined)} />
                 <div>
-                <Thread />
+                  <Thread onBack={() => deckScope.setThread(undefined)}/>
                 </div>
               </ThreadContextWrapper>
             </Modal>
           </>
         )}
         <Toaster />
+      </DeckContext.Provider>
     </div>
   );
 }
@@ -80,7 +92,7 @@ function SpotlightFromThread({ onClose }: { onClose: () => void }) {
 
   const parsed = thread.root ? transformTextCached(thread.root.id, thread.root.content, thread.root.tags) : [];
   const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
-
+  if (images.length === 0) return;
   return <SpotlightMedia images={images.map(a => a.content)} idx={0} onClose={onClose} />;
 }
 

packages/app/src/Pages/Root.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Link, Outlet, RouteObject, useParams } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import { unixNow } from "@snort/shared";
@@ -16,6 +16,7 @@ import SuggestedProfiles from "Element/SuggestedProfiles";
 import { TaskList } from "Tasks/TaskList";
 import TimelineFollows from "Element/TimelineFollows";
 import { RootTabs } from "Element/RootTabs";
+import { DeckContext } from "Pages/DeckLayout";
 
 import messages from "./messages";
 
@@ -133,11 +134,16 @@ export const GlobalTab = () => {
 };
 
 export const NotesTab = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const deckContext = useContext(DeckContext);
+
   return (
     <>
       <FollowsHint />
       <TaskList />
-      <TimelineFollows postsOnly={true} />
+      <TimelineFollows postsOnly={true} noteOnClick={deckContext ? (ev) => {
+        deckContext.setThread(ev.id);
+      } : undefined} />
     </>
   );
 };