Snort deck improvements

2023-09-25 13:59:31 +01:00 · 2023-09-25 13:59:31 +01:00 · 1eb7216177
commit 1eb7216177
parent 5b9f4b0b8d
12 changed files with 72 additions and 53 deletions
--- 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} />;
      })}
--- 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}
--- 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>
  );
--- 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
--- 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)}
        />
      );
    }
--- 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 {
--- 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}
        />
      );
--- 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;
--- 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;
--- 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>
  );
--- 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}
+    />
  );
 }
--- 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} />;
        }