feat: posts only feed

src/element/Timeline.tsx

@@ -7,17 +7,18 @@ import NoteReaction from "./NoteReaction";
 
 export interface TimelineProps {
     global: boolean,
+    postsOnly: boolean,
     pubkeys: HexKey[]
 }
 
 /**
  * A list of notes by pubkeys
  */
-export default function Timeline({ global, pubkeys }: TimelineProps) {
+export default function Timeline({ global, pubkeys, postsOnly = false }: TimelineProps) {
     const { main, others } = useTimelineFeed(pubkeys, global);
 
     const mainFeed = useMemo(() => {
-        return main?.sort((a, b) => b.created_at - a.created_at);
+        return main?.sort((a, b) => b.created_at - a.created_at)?.filter(a => postsOnly ? !a.tags.some(b => b[0] === "e") : true);
     }, [main]);
 
     function eventElement(e: TaggedRawEvent) {

src/pages/ProfilePage.tsx

@@ -84,7 +84,7 @@ export default function ProfilePage() {
     function tabContent() {
         switch (tab) {
             case ProfileTab.Notes:
-              return <Timeline key={id} pubkeys={[id]} global={false} />;
+              return <Timeline key={id} pubkeys={[id]} global={false} postsOnly={false} />;
             case ProfileTab.Follows: {
                 if (isMe) {
                     return (

src/pages/Root.tsx

@@ -8,13 +8,14 @@ import { RootState } from "../state/Store";
 import { HexKey } from "../nostr";
 
 const RootTab = {
-    Follows: 0,
-    Global: 1
+    Posts: 0,
+    PostsAndReplies: 1,
+    Global: 2
 };
 
 export default function RootPage() {
     const [loggedOut, pubKey, follows] = useSelector<RootState, [boolean | undefined, HexKey | undefined, HexKey[]]>(s => [s.login.loggedOut, s.login.publicKey, s.login.follows]);
-    const [tab, setTab] = useState(RootTab.Follows);
+    const [tab, setTab] = useState(RootTab.Posts);
 
     function followHints() {
         if (follows?.length === 0 && pubKey && tab !== RootTab.Global) {
@@ -29,15 +30,18 @@ export default function RootPage() {
             {pubKey ? <>
                 <NoteCreator show={true} autoFocus={false} />
                 <div className="tabs root-tabs">
-                    <div className={`root-tab f-1 ${tab === RootTab.Follows ? "active" : ""}`} onClick={() => setTab(RootTab.Follows)}>
-                        Follows
+                    <div className={`root-tab f-1 ${tab === RootTab.Posts ? "active" : ""}`} onClick={() => setTab(RootTab.Posts)}>
+                        Posts
+                    </div>
+                    <div className={`root-tab f-1 ${tab === RootTab.PostsAndReplies ? "active" : ""}`} onClick={() => setTab(RootTab.PostsAndReplies)}>
+                        Posts &amp; Replies
                     </div>
                     <div className={`root-tab f-1 ${tab === RootTab.Global ? "active" : ""}`} onClick={() => setTab(RootTab.Global)}>
                         Global
                     </div>
                 </div></> : null}
             {followHints()}
-            <Timeline key={tab} pubkeys={follows} global={loggedOut || tab === RootTab.Global} />
+            <Timeline key={tab} pubkeys={follows} global={loggedOut || tab === RootTab.Global} postsOnly={tab === RootTab.Posts} />
         </>
     );
 }