src/Number.ts

@@ -0,0 +1,9 @@
+export function formatShort(n: number) {
+  if (n < 999) {
+    return n
+  } else if (n < 1e8) {
+    return `${Math.floor(n / 1e3)}K`
+  } else {
+    return `${Math.floor(n / 1e6)}M`
+  }
+}

src/element/FollowsYou.tsx

@@ -1,3 +1,4 @@
+import "./FollowsYou.css";
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
 import { HexKey } from "../nostr";
@@ -21,7 +22,7 @@ export default function FollowsYou({ pubkey }: FollowsYouProps ) {
 
     return (
         <>
-            { followsMe ? <span className="pill">follows you</span> : null }
+            { followsMe ? <span className="follows-you">follows you</span> : null }
         </>
     )
 }

src/element/Invoice.css

@@ -1,7 +1,7 @@
 .note-invoice {
-    background: var(--bg-color);
-    border-radius: 10px;
-    border: 1px solid var(--gray-tertiary);
+    background: var(--note-bg-color);
+    border: 1px solid var(--font-secondary-color);
+    border-radius: 16px;
     padding: 12px;
     margin: 10px auto;
 }
@@ -11,5 +11,5 @@
 }
 
 .note-invoice small {
-    color: var(--gray-medium);
+    color: var(--font-secondary-color);
 }

src/element/LNURLTip.css

@@ -17,9 +17,24 @@
     background-color: var(--gray);
 }
 
-.lnurl-tip .pill.active {
-    color: var(--bg-color);
-    background-color: var(--font-color);
+.sat-amount {
+  display: inline-block;
+  background-color: var(--gray-secondary);
+  color: var(--font-color);
+  padding: 2px 10px;
+  border-radius: 10px;
+  user-select: none;
+  margin: 2px 5px;
+}
+
+.sat-amount:hover {
+  cursor: pointer;
+}
+
+.sat-amount.active {
+  font-weight: bold;
+  color: var(--note-bg);
+  background-color: var(--font-color);
 }
 
 .lnurl-tip .invoice {

src/element/LNURLTip.tsx

@@ -188,11 +188,11 @@ export default function LNURLTip(props: LNURLTipProps) {
                         <input type="text" placeholder="Comment" className="mb10 f-grow" maxLength={payService?.commentAllowed} onChange={(e) => setComment(e.target.value)} /> : null}
                 </div>
                 <div className="mb10">
-                    {serviceAmounts.map(a => <span className={`pill ${amount === a ? "active" : ""}`} key={a} onClick={() => selectAmount(a)}>
+                    {serviceAmounts.map(a => <span className={`sat-amount ${amount === a ? "active" : ""}`} key={a} onClick={() => selectAmount(a)}>
                         {a.toLocaleString()}
                     </span>)}
                     {payService ?
-                        <span className={`pill ${amount === -1 ? "active" : ""}`} onClick={() => selectAmount(-1)}>
+                        <span className={`sat-amount ${amount === -1 ? "active" : ""}`} onClick={() => selectAmount(-1)}>
                             Custom
                         </span> : null}
                 </div>

src/element/Note.css

@@ -1,8 +1,8 @@
 .note {
-    margin-bottom: 10px;
-    border-radius: 10px;
+    margin-bottom: 24px;
+    border-radius: 16px;
     background-color: var(--note-bg);
-    padding: 10px 10px 8px 10px;
+    padding: 24px;
     min-height: 110px;
 }
 
@@ -10,26 +10,28 @@
     border-bottom: none;
 }
 
-.note > .header > .pfp {
-    flex-grow: 1;
+.note .header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 .note > .header .reply {
-    font-size: 12px;
-    color: var(--gray-light);
+    font-size: var(--font-size-tiny);
+    color: var(--font-secondary-color);
 }
 
 .note > .header > .info {
-    font-size: 10px;
+    font-size: var(--font-size);
     white-space: nowrap;
-    color: var(--gray-light);
-    align-self: flex-start;
+    color: var(--font-secondary-color);
 }
 
 .note > .body {
-    padding: 10px 5px;
-    white-space: pre-wrap;
+    margin-top: 12px;
     overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: pre-wrap;
     word-break: normal;
 }
 
@@ -38,7 +40,26 @@
 }
 
 .note > .footer {
-    text-align: right;
+  display: flex;
+  flex-direction: row-reverse;
+  margin-top: 24px;
+}
+
+.note > .note-creator {
+  margin-top: 24px;
+}
+
+.thread.note {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.thread.note, .indented .note {
+  margin-bottom: 0;
+}
+
+.indented .note {
+  border-radius: 0;
 }
 
 .indented {
@@ -46,8 +67,69 @@
     padding-left: 2px;
 }
 
+.note:last-child {
+  border-bottom-right-radius: 16px;
+  margin-bottom: 24px;
+}
+
+.indented > .indented .note:last-child {
+  border-bottom-right-radius: 0px;
+  margin-bottom: 0;
+}
+
 .indented .active {
     background-color: var(--gray-tertiary);
     margin-left: -5px;
     border-left: 3px solid var(--highlight);
+    border-radius: 0;
+}
+
+.reaction-pill {
+  display: flex;
+  flex-direction: row;
+  padding: 2px 10px;
+  border-radius: 10px;
+  user-select: none;
+  color: var(--font-secondary-color);
+}
+
+.reaction-pill .reaction-pill-number {
+  margin-left: 8px;
+}
+
+.reaction-pill.reacted {
+  color:  var(--highlight);
+}
+
+.reaction-pill:hover {
+  cursor: pointer;
+}
+
+.note.active > .header .reply {
+  color: var(--font-tertiary-color);
+}
+
+.note.active > .header > .info {
+  color: var(--font-tertiary-color);
+}
+
+.note.active > .footer > .reaction-pill {
+  color: var(--font-tertiary-color);
+}
+
+@media (prefers-color-scheme: light) {
+  .indented .active {
+      background-color: var(--gray-secondary);
+  }
+  .note.active > .header .reply {
+    color: var(--font-secondary-color);
+  }
+
+  .note.active > .header > .info {
+    color: var(--font-secondary-color);
+  }
+
+  .note.active > .footer > .reaction-pill {
+    color: var(--font-seco666ndary-color);
+  }
 }

src/element/Note.tsx

@@ -78,7 +78,7 @@ export default function Note(props: NoteProps) {
         let pubMentions = mentions.length > maxMentions ? `${mentions?.slice(0, maxMentions).join(", ")} & ${othersLength} other${othersLength > 1 ? 's' : ''}` : mentions?.join(", ");
         return (
             <div className="reply">
-                ➡️ {(pubMentions?.length ?? 0) > 0 ? pubMentions : replyId ? hexToBech32("note", replyId)?.substring(0, 12) : ""}
+             {(pubMentions?.length ?? 0) > 0 ? pubMentions : replyId ? hexToBech32("note", replyId)?.substring(0, 12) : ""}
             </div>
         )
     }

src/element/NoteFooter.tsx

@@ -3,6 +3,7 @@ import { useSelector } from "react-redux";
 import { faHeart, faReply, faThumbsDown, faTrash, faBolt, faRepeat } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { formatShort } from "../Number";
 import useEventPublisher from "../feed/EventPublisher";
 import { getReactions, normalizeReaction, Reaction } from "../Util";
 import { NoteCreator } from "./NoteCreator";
@@ -29,7 +30,6 @@ export default function NoteFooter(props: NoteFooterProps) {
     const isMine = ev.RootPubKey === login;
     const reactions = useMemo(() => getReactions(related, ev.Id, EventKind.Reaction), [related]);
     const reposts = useMemo(() => getReactions(related, ev.Id, EventKind.Repost), [related]);
-
     const groupReactions = useMemo(() => {
         return reactions?.reduce((acc, { content }) => {
             let r = normalizeReaction(content);
@@ -50,8 +50,10 @@ export default function NoteFooter(props: NoteFooterProps) {
     }
 
     async function react(content: string) {
+      if (!hasReacted(content)) {
         let evLike = await publisher.react(ev, content);
         publisher.broadcast(evLike);
+      }
     }
 
     async function deleteEvent() {
@@ -73,9 +75,11 @@ export default function NoteFooter(props: NoteFooterProps) {
         if (service) {
             return (
                 <>
-                    <span className="pill" onClick={(e) => setTip(true)}>
-                        <FontAwesomeIcon icon={faBolt} />
-                    </span>
+                    <div className="reaction-pill" onClick={(e) => setTip(true)}>
+                        <div className="reaction-pill-icon">
+                          <FontAwesomeIcon icon={faBolt} />
+                        </div>
+                    </div>
                 </>
             )
         }
@@ -85,10 +89,10 @@ export default function NoteFooter(props: NoteFooterProps) {
     function reactionIcon(content: string, reacted: boolean) {
         switch (content) {
             case Reaction.Positive: {
-                return <FontAwesomeIcon color={reacted ? "red" : "currentColor"} icon={faHeart} />;
+                return <FontAwesomeIcon icon={faHeart} />;
             }
             case Reaction.Negative: {
-                return <FontAwesomeIcon color={reacted ? "orange" : "currentColor"} icon={faThumbsDown} />;
+                return <FontAwesomeIcon icon={faThumbsDown} />;
             }
         }
         return content;
@@ -97,30 +101,45 @@ export default function NoteFooter(props: NoteFooterProps) {
     return (
         <>
             <div className="footer">
-                {isMine ? <span className="pill">
-                    <FontAwesomeIcon icon={faTrash} onClick={(e) => deleteEvent()} />
-                </span> : null}
-                {tipButton()}
-                <span className="pill" onClick={() => repost()}>
-                    <FontAwesomeIcon icon={faRepeat} color={hasReposted() ? "green" : "currenColor"} />
-                    {reposts.length > 0 ? <>&nbsp;{reposts.length}</> : null}
-                </span>
-                <span className="pill" onClick={(e) => setReply(s => !s)}>
+                {isMine && (
+                  <div className="reaction-pill">
+                    <div className="reaction-pill-icon">
+                      <FontAwesomeIcon icon={faTrash} onClick={(e) => deleteEvent()} />
+                    </div>
+                  </div>
+                )}
+                <div className="reaction-pill" onClick={(e) => setReply(s => !s)}>
+                  <div className="reaction-pill-icon">
                     <FontAwesomeIcon icon={faReply} />
-                </span>
-                {Object.keys(groupReactions || {}).map((emoji) => {
-                    let didReact = hasReacted(emoji);
-                    return (
-                        <span className="pill" onClick={() => {
-                            if (!didReact) {
-                                react(emoji);
-                            }
-                        }} key={emoji}>
-                            {reactionIcon(emoji, didReact)}
-                            {groupReactions[emoji] ? <>&nbsp;{groupReactions[emoji]}</> : null}
-                        </span>
-                    )
-                })}
+                  </div>
+                </div>
+                <div className={`reaction-pill ${hasReposted() ? 'reacted' : ''}`} onClick={() => repost()}>
+                  <div className="reaction-pill-icon">
+                    <FontAwesomeIcon icon={faRepeat} />
+                  </div>
+                  {reposts.length > 0 && (
+                    <div className="reaction-pill-number">
+                      {formatShort(reposts.length)}
+                    </div>
+                  )}
+                </div>
+                <div className={`reaction-pill ${hasReacted('+') ? 'reacted' : ''} `} onClick={(e) => react("+")}>
+                  <div className="reaction-pill-icon">
+                    <FontAwesomeIcon icon={faHeart} />
+                  </div>
+                  <div className="reaction-pill-number">
+                    {formatShort(groupReactions[Reaction.Positive])}
+                  </div>
+                </div>
+                <div className={`reaction-pill ${hasReacted('-') ? 'reacted' : ''}`} onClick={(e) => react("-")}>
+                  <div className="reaction-pill-icon">
+                    <FontAwesomeIcon icon={faThumbsDown} />
+                  </div>
+                  <div className="reaction-pill-number">
+                    {formatShort(groupReactions[Reaction.Negative])}
+                  </div>
+                </div>
+                {tipButton()}
             </div>
             <NoteCreator
                 autoFocus={true}

src/element/NoteReaction.css

@@ -1,29 +1,24 @@
 .reaction {
-    margin-bottom: 10px;
+    margin-bottom: 24px;
 }
 
 .reaction > .note {
     margin: 10px 20px;
-    border: 1px solid var(--gray);
-    border-radius: 10px;
-    padding: 10px;
 }
 
-.reaction > .header > .pfp {
-    flex-grow: 1;
+.reaction > .header {
+   display: flex; 
+   flex-direction: row;
+   justify-content: space-between;
 }
 
 .reaction > .header .reply {
-    font-size: small;
+    font-size: var(--font-size-small);
 }
 
 .reaction > .header > .info {
-    color: var(--gray-light);
-    font-size: 10px;
-    align-self: flex-start;
-}
-
-.reaction .reaction-text {
-    margin-left: .2em;
-    color: var(--gray-light);
+    font-size: var(--font-size);
+    white-space: nowrap;
+    color: var(--font-secondary-color);
+    margin-right: 24px;
 }

src/element/NoteReaction.tsx

@@ -44,13 +44,6 @@ export default function NoteReaction(props: NoteReactionProps) {
         }
     }
 
-    function tagLine() {
-        switch (ev.Kind) {
-            case EventKind.Reaction: return <small className="reaction-text">reacted with {mapReaction(ev.Content)}</small>;
-            case EventKind.Repost: return <small className="reaction-text">reposted</small>
-        }
-    }
-
     /**
      * Some clients embed the reposted note in the content
      */

src/element/NoteTime.tsx

@@ -25,11 +25,10 @@ export default function NoteTime(props: NoteTimeProps) {
             return fallback
         } else {
             let mins = Math.floor(absAgo / MinuteInMs);
-            let minutes = mins === 1 ? 'min' : 'mins'
             if(ago < 0) {
-                return `in ${mins} ${minutes}`; 
+                return `in ${mins}m`; 
             }
-            return `${mins} ${minutes} ago`;
+            return `${mins}m`;
         }
     }
 

src/element/Text.css

@@ -52,9 +52,44 @@
     max-height: 500px;
     margin: 10px auto;
     display: block;
+    border-radius: 12px;
 }
 
 .text iframe, .text video {
     width: -webkit-fill-available;
     aspect-ratio: 16 / 9;
 }
+
+.text .truncate {
+    display: inline-block;
+    margin: 0;
+    max-width: 260px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--highlight);
+    height: var(--font-size);
+}
+
+@media (min-width: 420px) {
+  .text .truncate {
+    max-width: 300px;
+  }
+}
+
+@media (min-width: 520px) {
+  .text .truncate {
+    max-width: 360px;
+  }
+}
+
+@media (min-width: 720px) {
+  .text .truncate {
+    max-width: 420px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .text .truncate {
+    max-width: 600px;
+  }
+}

src/element/Text.tsx

@@ -37,7 +37,11 @@ function transformHttpLink(a: string) {
                     return <video key={url.toString()} src={url.toString()} controls />
                 }
                 default:
-                    return <a key={url.toString()} href={url.toString()} onClick={(e) => e.stopPropagation()}>{url.toString()}</a>
+                    return (
+                      <div className="truncate">
+                        <a key={url.toString()} href={url.toString()} onClick={(e) => e.stopPropagation()}>{url.toString()}</a>
+                      </div>
+                    )
             }
         } else if (tweetId) {
             return (
@@ -62,11 +66,19 @@ function transformHttpLink(a: string) {
                 </>
             )
         } else {
-            return <a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
+            return (
+              <div className="truncate">
+                <a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
+              </div>
+            )
         }
     } catch (error) {
     }
-    return <a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
+    return (
+      <div className="truncate">
+        <a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
+      </div>
+    )
 }
 
 function extractLinks(fragments: Fragment[]) {

src/element/ZapButton.tsx

@@ -14,9 +14,9 @@ const ZapButton = ({ pubkey }: { pubkey: HexKey }) => {
 
     return (
         <>
-            <span className="pill" onClick={(e) => setZap(true)}>
+            <div className="pill" onClick={(e) => setZap(true)}>
                 <FontAwesomeIcon icon={faBolt} />
-            </span>
+            </div>
             <LNURLTip svc={svc} show={zap} onClose={() => setZap(false)} />
         </>
     )

src/index.css

@@ -1,21 +1,27 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
 
 :root {
-    --font-color: #FFF;
     --bg-color: #000;
+    --font-color: #FFF;
+    --font-secondary-color: #555;
+    --font-tertiary-color: #999;
+    --font-size: 16px;
+    --font-size-small: 14px;
+    --font-size-tiny: 12px;
     --modal-bg-color: rgba(0,0,0, 0.8);
-    --note-bg: #111;
+    --note-bg: #0C0C0C;
+    --highlight-light: #ffd342;
+    --highlight: #ffc400;
+    --highlight-dark: #dba800;
+    --error: #FF6053;
+    --success: #2AD544;
+
     --gray-superlight: #EEE;
     --gray-light: #999;
     --gray-medium: #666;
     --gray: #333;
     --gray-secondary: #222;
     --gray-tertiary: #444;
-    --highlight-light: #ffd342;
-    --highlight: #ffc400;
-    --highlight-dark: #dba800;
-    --error: #FF6053;
-    --success: #2AD544;
     --gray-gradient: linear-gradient(to bottom right, var(--gray-superlight), var(--gray), var(--gray-light));
     --snort-gradient: linear-gradient(to bottom right, var(--highlight-light), var(--highlight), var(--highlight-dark));
     --nostrplebs-gradient: linear-gradient(to bottom right, #ff3cac, #2b86c5);
@@ -24,13 +30,16 @@
 
 @media (prefers-color-scheme: light) {
   :root {
-     --font-color: #000;
      --bg-color: #FFF;
+     --font-color: #000;
+     --font-secondary-color: #444;
+      --font-tertiary-color: #666;
      --highlight-light: #FFC852;
      --highlight: #FF9B00;
      --highlight-dark: #944F05;
      --modal-bg-color: rgba(240, 240, 240, 0.8);
-     --note-bg: #eee;
+     --note-bg: #EEE;
+
      --gray: #CCC;
      --gray-secondary: #DDD;
      --gray-tertiary: #EEE;
@@ -46,12 +55,11 @@ body {
   -moz-osx-font-smoothing: grayscale;
   background-color: var(--bg-color);
   color: var(--font-color);
-  font-size: 14px;
+  font-size: var(--font-size);
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
 .page {
@@ -196,26 +204,6 @@ a {
   line-height: 1.3em;
 }
 
-span.pill {
-  display: inline-block;
-  background-color: var(--gray);
-  padding: 2px 10px;
-  border-radius: 10px;
-  user-select: none;
-  color: var(--font-color);
-  margin: 2px 5px;
-}
-
-span.pill.active {
-  background-color: var(--gray-tertiary);
-  color:  var(--font-color);
-  font-weight: bold;
-}
-
-span.pill:hover {
-  cursor: pointer;
-}
-
 div.form-group {
   display: flex;
   align-items: center;

src/pages/ProfilePage.tsx

@@ -48,10 +48,12 @@ export default function ProfilePage() {
     function username() {
         return (
             <div className="name">
-                <h2>{user?.display_name || user?.name || 'Nostrich'}</h2>
+                <h2>
+                  {user?.display_name || user?.name || 'Nostrich'}
+                  <FollowsYou pubkey={id} />
+                </h2>
                 <Copy text={params.id || ""} />
                 {user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
-                <FollowsYou pubkey={id} />
             </div>
         )
     }