From 1eb72161777ed92c5be3f6ae87dd19aa4a7ee0e4 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Mon, 25 Sep 2023 13:59:31 +0100
Subject: [PATCH] Snort deck improvements

---
 packages/app/src/Element/BlockList.tsx      |  2 +-
 packages/app/src/Element/Bookmarks.tsx      |  2 +-
 packages/app/src/Element/Modal.tsx          |  6 +--
 packages/app/src/Element/MutedList.tsx      |  6 +--
 packages/app/src/Element/Note.tsx           |  3 ++
 packages/app/src/Element/ProfilePreview.css |  1 -
 packages/app/src/Element/Thread.tsx         |  4 +-
 packages/app/src/Element/Zap.tsx            | 16 +++---
 packages/app/src/Pages/Deck.css             |  9 ++--
 packages/app/src/Pages/DeckLayout.tsx       |  8 +--
 packages/app/src/Pages/Notifications.tsx    | 58 ++++++++++++++-------
 packages/app/src/Pages/ProfilePage.tsx      | 10 ++--
 12 files changed, 72 insertions(+), 53 deletions(-)

diff --git a/packages/app/src/Element/BlockList.tsx b/packages/app/src/Element/BlockList.tsx
index bcd5f3a5..1104fb89 100644
--- a/packages/app/src/Element/BlockList.tsx
+++ b/packages/app/src/Element/BlockList.tsx
@@ -6,7 +6,7 @@ export default function BlockList() {
   const { blocked } = useModeration();
 
   return (
-    <div className="main-content">
+    <div className="main-content p">
       {blocked.map(a => {
         return <ProfilePreview actions={<BlockButton pubkey={a} />} pubkey={a} options={{ about: false }} key={a} />;
       })}
diff --git a/packages/app/src/Element/Bookmarks.tsx b/packages/app/src/Element/Bookmarks.tsx
index e4a954a1..5bef3a36 100644
--- a/packages/app/src/Element/Bookmarks.tsx
+++ b/packages/app/src/Element/Bookmarks.tsx
@@ -28,7 +28,7 @@ const Bookmarks = ({ pubkey, bookmarks, related }: BookmarksProps) => {
 
   return (
     <div className="main-content">
-      <div className="mb10 flex-end">
+      <div className="flex-end p">
         <select
           disabled={ps.length <= 1}
           value={onlyPubkey}
diff --git a/packages/app/src/Element/Modal.tsx b/packages/app/src/Element/Modal.tsx
index d35373d6..576f9cca 100644
--- a/packages/app/src/Element/Modal.tsx
+++ b/packages/app/src/Element/Modal.tsx
@@ -4,7 +4,7 @@ import { ReactNode, useEffect } from "react";
 export interface ModalProps {
   id: string;
   className?: string;
-  onClose?: () => void;
+  onClose?: (e: React.MouseEvent) => void;
   children: ReactNode;
 }
 
@@ -16,8 +16,8 @@ export default function Modal(props: ModalProps) {
 
   return (
     <div className={`modal${props.className ? ` ${props.className}` : ""}`} onClick={props.onClose}>
-      <div className="modal-body" onClick={e => e.stopPropagation()}>
-        {props.children}
+      <div className="modal-body" onClick={props.onClose}>
+        <div onClick={e => e.stopPropagation()}>{props.children}</div>
       </div>
     </div>
   );
diff --git a/packages/app/src/Element/MutedList.tsx b/packages/app/src/Element/MutedList.tsx
index b3ecb946..b4d9c8ba 100644
--- a/packages/app/src/Element/MutedList.tsx
+++ b/packages/app/src/Element/MutedList.tsx
@@ -15,9 +15,9 @@ export default function MutedList({ pubkeys }: MutedListProps) {
   const hasAllMuted = pubkeys.every(isMuted);
 
   return (
-    <div className="main-content">
-      <div className="flex mt10">
-        <div className="f-grow bold">
+    <div className="main-content p">
+      <div className="flex f-space">
+        <div className="bold">
           <FormattedMessage {...messages.MuteCount} values={{ n: pubkeys?.length }} />
         </div>
         <button
diff --git a/packages/app/src/Element/Note.tsx b/packages/app/src/Element/Note.tsx
index ea23f6c6..7081125a 100644
--- a/packages/app/src/Element/Note.tsx
+++ b/packages/app/src/Element/Note.tsx
@@ -61,6 +61,7 @@ export interface NoteProps {
     canUnpin?: boolean;
     canUnbookmark?: boolean;
     canClick?: boolean;
+    showMediaSpotlight?: boolean;
   };
 }
 
@@ -210,6 +211,7 @@ export function NoteInner(props: NoteProps) {
               depth={props.depth}
               truncate={255}
               disableLinkPreview={true}
+              disableMediaSpotlight={!(props.options?.showMediaSpotlight ?? true)}
             />
             {image && <ProxyImg src={image} />}
           </div>
@@ -225,6 +227,7 @@ export function NoteInner(props: NoteProps) {
           creator={ev.pubkey}
           depth={props.depth}
           disableMedia={!(options.showMedia ?? true)}
+          disableMediaSpotlight={!(props.options?.showMediaSpotlight ?? true)}
         />
       );
     }
diff --git a/packages/app/src/Element/ProfilePreview.css b/packages/app/src/Element/ProfilePreview.css
index 2d0dbf23..00211cc0 100644
--- a/packages/app/src/Element/ProfilePreview.css
+++ b/packages/app/src/Element/ProfilePreview.css
@@ -2,7 +2,6 @@
   display: flex;
   align-items: center;
   min-height: 59px;
-  padding: 0 16px;
 }
 
 .profile-preview .pfp {
diff --git a/packages/app/src/Element/Thread.tsx b/packages/app/src/Element/Thread.tsx
index 4bbe091a..efd0e30c 100644
--- a/packages/app/src/Element/Thread.tsx
+++ b/packages/app/src/Element/Thread.tsx
@@ -216,7 +216,7 @@ export function ThreadRoute() {
   );
 }
 
-export function Thread(props: { onBack?: () => void }) {
+export function Thread(props: { onBack?: () => void; disableSpotlight?: boolean }) {
   const thread = useContext(ThreadContext);
 
   const navigate = useNavigate();
@@ -248,7 +248,7 @@ export function Thread(props: { onBack?: () => void }) {
           key={note.id}
           data={note}
           related={getReactions(thread.reactions, note.id)}
-          options={{ showReactionsLink: true }}
+          options={{ showReactionsLink: true, showMediaSpotlight: !props.disableSpotlight }}
           onClick={navigateThread}
         />
       );
diff --git a/packages/app/src/Element/Zap.tsx b/packages/app/src/Element/Zap.tsx
index a9ecfd01..96071297 100644
--- a/packages/app/src/Element/Zap.tsx
+++ b/packages/app/src/Element/Zap.tsx
@@ -16,20 +16,16 @@ const Zap = ({ zap, showZapped = true }: { zap: ParsedZap; showZapped?: boolean
   const pubKey = useLogin().publicKey;
 
   return valid && sender ? (
-    <div className="zap note card">
-      <div className="header">
+    <div className="card">
+      <div className="flex f-space">
         <ProfileImage pubkey={sender} />
         {receiver !== pubKey && showZapped && <ProfileImage pubkey={unwrap(receiver)} />}
-        <div className="amount">
-          <span className="amount-number">
-            <FormattedMessage {...messages.Sats} values={{ n: formatShort(amount ?? 0) }} />
-          </span>
-        </div>
+        <h3>
+          <FormattedMessage {...messages.Sats} values={{ n: formatShort(amount ?? 0) }} />
+        </h3>
       </div>
       {(content?.length ?? 0) > 0 && sender && (
-        <div className="body">
-          <Text id={zap.id} creator={sender} content={unwrap(content)} tags={[]} />
-        </div>
+        <Text id={zap.id} creator={sender} content={unwrap(content)} tags={[]} />
       )}
     </div>
   ) : null;
diff --git a/packages/app/src/Pages/Deck.css b/packages/app/src/Pages/Deck.css
index e2035ddd..81147ddf 100644
--- a/packages/app/src/Pages/Deck.css
+++ b/packages/app/src/Pages/Deck.css
@@ -52,20 +52,23 @@
   cursor: pointer;
 }
 
-.thread-overlay .modal-body {
+.modal.thread-overlay > .modal-body {
   background-color: unset;
   padding: 0;
   width: 100vw;
   height: 100vh;
+  --border-color: #3a3a3a;
+}
+
+.modal.thread-overlay > .modal-body > div {
   display: flex;
   flex-direction: row;
   border-radius: unset;
   justify-content: center;
   gap: 16px;
-  --border-color: #3a3a3a;
 }
 
-.thread-overlay .modal-body > div:last-of-type {
+.modal.thread-overlay > .modal-body > div > div:last-of-type {
   width: 550px;
   min-width: 550px;
   height: 100vh;
diff --git a/packages/app/src/Pages/DeckLayout.tsx b/packages/app/src/Pages/DeckLayout.tsx
index 651a1e00..1be3bf7d 100644
--- a/packages/app/src/Pages/DeckLayout.tsx
+++ b/packages/app/src/Pages/DeckLayout.tsx
@@ -64,7 +64,7 @@ export function SnortDeckLayout() {
               case "articles":
                 return <ArticlesCol />;
               case "notifications":
-                return <NotificationsCol />;
+                return <NotificationsCol setThread={deckScope.setThread} />;
             }
           })}
         </div>
@@ -74,7 +74,7 @@ export function SnortDeckLayout() {
               <ThreadContextWrapper link={deckScope.thread}>
                 <SpotlightFromThread onClose={() => deckScope.setThread(undefined)} />
                 <div>
-                  <Thread onBack={() => deckScope.setThread(undefined)} />
+                  <Thread onBack={() => deckScope.setThread(undefined)} disableSpotlight={true} />
                 </div>
               </ThreadContextWrapper>
             </Modal>
@@ -167,7 +167,7 @@ function MediaCol({ setThread }: { setThread: (e: NostrLink) => void }) {
   );
 }
 
-function NotificationsCol() {
+function NotificationsCol({ setThread }: { setThread: (e: NostrLink) => void }) {
   return (
     <div>
       <div className="deck-col-header flex g8">
@@ -175,7 +175,7 @@ function NotificationsCol() {
         <FormattedMessage defaultMessage="Notifications" />
       </div>
       <div>
-        <NotificationsPage />
+        <NotificationsPage onClick={setThread} />
       </div>
     </div>
   );
diff --git a/packages/app/src/Pages/Notifications.tsx b/packages/app/src/Pages/Notifications.tsx
index f4e81b84..1d47a684 100644
--- a/packages/app/src/Pages/Notifications.tsx
+++ b/packages/app/src/Pages/Notifications.tsx
@@ -17,6 +17,8 @@ import useModeration from "Hooks/useModeration";
 import { useEventFeed } from "Feed/EventFeed";
 import Text from "Element/Text";
 import { formatShort } from "Number";
+import { LiveEvent } from "Element/LiveEvent";
+import ProfilePreview from "Element/ProfilePreview";
 
 function notificationContext(ev: TaggedNostrEvent) {
   switch (ev.kind) {
@@ -55,7 +57,7 @@ function notificationContext(ev: TaggedNostrEvent) {
   }
 }
 
-export default function NotificationsPage() {
+export default function NotificationsPage({ onClick }: { onClick?: (link: NostrLink) => void }) {
   const login = useLogin();
   const { isMuted } = useModeration();
   const groupInterval = 3600 * 3;
@@ -90,15 +92,17 @@ export default function NotificationsPage() {
 
   return (
     <div className="main-content">
-      {login.publicKey && [...timeGrouped.entries()].map(([k, g]) => <NotificationGroup key={k} evs={g} />)}
+      {login.publicKey &&
+        [...timeGrouped.entries()].map(([k, g]) => <NotificationGroup key={k} evs={g} onClick={onClick} />)}
     </div>
   );
 }
 
-function NotificationGroup({ evs }: { evs: Array<TaggedNostrEvent> }) {
+function NotificationGroup({ evs, onClick }: { evs: Array<TaggedNostrEvent>; onClick?: (link: NostrLink) => void }) {
   const { ref, inView } = useInView({ triggerOnce: true });
   const { formatMessage } = useIntl();
   const kind = evs[0].kind;
+  const navigate = useNavigate();
 
   const zaps = useMemo(() => {
     return evs.filter(a => a.kind === EventKind.ZapReceipt).map(a => parseZap(a, UserCache));
@@ -183,7 +187,7 @@ function NotificationGroup({ evs }: { evs: Array<TaggedNostrEvent> }) {
             </div>
             <div>{kind === EventKind.ZapReceipt && formatShort(totalZaps)}</div>
           </div>
-          <div className="flex-column g12">
+          <div className="flex-column w-max g12">
             <div className="flex">
               {pubkeys
                 .filter(a => a !== "anon")
@@ -208,7 +212,18 @@ function NotificationGroup({ evs }: { evs: Array<TaggedNostrEvent> }) {
                 )}
               </div>
             )}
-            {context && <NotificationContext link={context} />}
+            {context && (
+              <NotificationContext
+                link={context}
+                onClick={() => {
+                  if (onClick) {
+                    onClick(context);
+                  } else {
+                    navigate(`/e/${context.encode()}`);
+                  }
+                }}
+              />
+            )}
           </div>
         </>
       )}
@@ -216,22 +231,25 @@ function NotificationGroup({ evs }: { evs: Array<TaggedNostrEvent> }) {
   );
 }
 
-function NotificationContext({ link }: { link: NostrLink }) {
+function NotificationContext({ link, onClick }: { link: NostrLink; onClick: () => void }) {
   const { data: ev } = useEventFeed(link);
-  const navigate = useNavigate();
-
+  if (link.type === NostrPrefix.PublicKey) {
+    return <ProfilePreview pubkey={link.id} actions={<></>} />;
+  }
+  if (!ev) return;
+  if (ev.kind === EventKind.LiveEvent) {
+    return <LiveEvent ev={ev} />;
+  }
   return (
-    ev && (
-      <Text
-        id={ev.id}
-        content={ev.content}
-        tags={ev.tags}
-        creator={ev.pubkey}
-        truncate={120}
-        disableLinkPreview={true}
-        className="content"
-        onClick={() => navigate(`/${link.encode()}`)}
-      />
-    )
+    <Text
+      id={ev.id}
+      content={ev.content}
+      tags={ev.tags}
+      creator={ev.pubkey}
+      truncate={120}
+      disableLinkPreview={true}
+      className="content"
+      onClick={onClick}
+    />
   );
 }
diff --git a/packages/app/src/Pages/ProfilePage.tsx b/packages/app/src/Pages/ProfilePage.tsx
index 41e0666a..2fd47668 100644
--- a/packages/app/src/Pages/ProfilePage.tsx
+++ b/packages/app/src/Pages/ProfilePage.tsx
@@ -74,9 +74,9 @@ function ZapsProfileTab({ id }: { id: HexKey }) {
   const zapsTotal = zaps.reduce((acc, z) => acc + z.amount, 0);
   return (
     <div className="main-content">
-      <div className="zaps-total">
+      <h2 className="p">
         <FormattedMessage {...messages.Sats} values={{ n: formatShort(zapsTotal) }} />
-      </div>
+      </h2>
       {zaps.map(z => (
         <ZapElement showZapped={false} zap={z} />
       ))}
@@ -86,12 +86,12 @@ function ZapsProfileTab({ id }: { id: HexKey }) {
 
 function FollowersTab({ id }: { id: HexKey }) {
   const followers = useFollowersFeed(id);
-  return <FollowsList pubkeys={followers} showAbout={true} />;
+  return <FollowsList pubkeys={followers} showAbout={true} className="p" />;
 }
 
 function FollowsTab({ id }: { id: HexKey }) {
   const follows = useFollowsFeed(id);
-  return <FollowsList pubkeys={follows} showAbout={true} />;
+  return <FollowsList pubkeys={follows} showAbout={true} className="p" />;
 }
 
 function RelaysTab({ id }: { id: HexKey }) {
@@ -402,7 +402,7 @@ export default function ProfilePage() {
       }
       case FOLLOWS: {
         if (isMe) {
-          return <FollowsList pubkeys={follows} showFollowAll={!isMe} showAbout={false} />;
+          return <FollowsList pubkeys={follows} showFollowAll={!isMe} showAbout={false} className="p" />;
         } else {
           return <FollowsTab id={id} />;
         }