show latest styles

packages/app/src/Element/Timeline.css

@@ -1,5 +1,41 @@
 .latest-notes {
   cursor: pointer;
-  font-weight: bold;
-  user-select: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 6px 24px;
+  gap: 8px;
+  position: absolute;
+  width: 261px;
+  left: calc(50% - 261px / 2 + 0.5px);
+  top: 0;
+  color: white;
+  background: var(--highlight);
+  box-shadow: 0px 0px 15px rgba(78, 0, 255, 0.6);
+  border-radius: 100px;
+  z-index: 42;
+}
+
+@media (max-width: 520px) {
+  .latest-notes {
+    width: 200px;
+    left: calc(50% - 110px);
+    padding: 6px 12px;
+  }
+}
+
+.latest-notes .pfp:not(:last-of-type) {
+  margin: 0;
+  margin-right: -26px;
+}
+.latest-notes .pfp:last-of-type {
+  margin-right: -8px;
+}
+
+.latest-notes .pfp .avatar-wrapper .avatar {
+  margin: 0;
+  width: 32px;
+  height: 32px;
+  border: 2px solid white;
 }

packages/app/src/Element/Timeline.tsx

@@ -1,9 +1,10 @@
 import "./Timeline.css";
 import { FormattedMessage } from "react-intl";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faForward } from "@fortawesome/free-solid-svg-icons";
 import { useCallback, useMemo } from "react";
 
+import ArrowUp from "Icons/ArrowUp";
+import { dedupeByPubkey } from "Util";
+import ProfileImage from "Element/ProfileImage";
 import useTimelineFeed, { TimelineSubject } from "Feed/TimelineFeed";
 import { TaggedRawEvent } from "@snort/nostr";
 import { EventKind } from "@snort/nostr";
@@ -15,8 +16,6 @@ import useModeration from "Hooks/useModeration";
 import ProfilePreview from "./ProfilePreview";
 import Skeleton from "Element/Skeleton";
 
-import messages from "./messages";
-
 export interface TimelineProps {
   postsOnly: boolean;
   subject: TimelineSubject;
@@ -61,6 +60,9 @@ export default function Timeline({
   const latestFeed = useMemo(() => {
     return filterPosts(latest.notes).filter(a => !mainFeed.some(b => b.id === a.id));
   }, [latest, mainFeed, filterPosts]);
+  const latestAuthors = useMemo(() => {
+    return dedupeByPubkey(latestFeed).map(e => e.pubkey);
+  }, [latestFeed]);
 
   function eventElement(e: TaggedRawEvent) {
     switch (e.kind) {
@@ -84,10 +86,16 @@ export default function Timeline({
 
   return (
     <div className="main-content">
-      {latestFeed.length > 1 && (
+      {latestFeed.length > 0 && (
         <div className="card latest-notes pointer" onClick={() => showLatest()}>
-          <FontAwesomeIcon icon={faForward} size="xl" />{" "}
-          <FormattedMessage {...messages.ShowLatest} values={{ n: latestFeed.length - 1 }} />
+          {latestAuthors.slice(0, 3).map(p => {
+            return <ProfileImage pubkey={p} showUsername={false} />;
+          })}
+          <FormattedMessage
+            defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
+            values={{ n: latestFeed.length }}
+          />
+          <ArrowUp />
         </div>
       )}
       {mainFeed.map(eventElement)}

packages/app/src/Icons/ArrowUp.tsx

@@ -0,0 +1,15 @@
+const ArrowUp = () => {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.99992 10.6673V1.33398M5.99992 1.33398L1.33325 6.00065M5.99992 1.33398L10.6666 6.00065"
+        stroke="currentColor"
+        strokeWidth="1.33333"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ArrowUp;

packages/app/src/index.css

@@ -518,6 +518,7 @@ body.scroll-lock {
 
 .main-content {
   padding: 0 12px;
+  position: relative;
 }
 
 @media (min-width: 720px) {