Snort deck improvements

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;

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>
   );

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}
+    />
   );
 }

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} />;
         }