Deck thread nav

packages/app/src/Element/Thread.tsx

@@ -154,9 +154,8 @@ 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
           highlight={active === first.id}
@@ -185,9 +184,8 @@ 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
               className={`thread-note ${lastNote ? "is-last-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,34 +53,36 @@ export function SnortDeckLayout() {
   const cols = ["notes", "media", "notifications", "articles"] as Array<Cols>;
   return (
     <div className="deck-layout">
-      <DeckNav />
+      <DeckContext.Provider value={deckScope}>
-      <div className="deck-cols">
+        <DeckNav />
-        {cols.map(c => {
+        <div className="deck-cols">
-          switch (c) {
+          {cols.map(c => {
-            case "notes":
+            switch (c) {
-              return <NotesCol />;
+              case "notes":
-            case "media":
+                return <NotesCol />;
-              return <MediaCol setThread={setThread} />;
+              case "media":
-            case "articles":
+                return <MediaCol setThread={deckScope.setThread} />;
-              return <ArticlesCol />;
+              case "articles":
-            case "notifications":
+                return <ArticlesCol />;
-              return <NotificationsCol />;
+              case "notifications":
-          }
+                return <NotificationsCol />;
-        })}
+            }
-      </div>
+          })}
-      {thread && (
+        </div>
-        <>
+        {deckScope.thread && (
-          <Modal onClose={() => setThread(undefined)} className="thread-overlay">
+          <>
-            <ThreadContextWrapper link={createNostrLink(NostrPrefix.Note, thread)}>
+            <Modal onClose={() => deckScope.setThread(undefined)} className="thread-overlay">
-              <SpotlightFromThread onClose={() => setThread(undefined)} />
+              <ThreadContextWrapper link={createNostrLink(NostrPrefix.Note, deckScope.thread)}>
-              <div>
+                <SpotlightFromThread onClose={() => deckScope.setThread(undefined)} />
-                <Thread />
+                <div>
-              </div>
+                  <Thread onBack={() => deckScope.setThread(undefined)}/>
-            </ThreadContextWrapper>
+                </div>
-          </Modal>
+              </ThreadContextWrapper>
-        </>
+            </Modal>
-      )}
+          </>
-      <Toaster />
+        )}
+        <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} />
     </>
   );
 };