src/feed/Subscription.js

@@ -3,6 +3,12 @@ import { System } from "..";
 import { Subscriptions } from "../nostr/Subscriptions";
 
 function notesReducer(state, ev) {
+    if (ev.reset === true) {
+        return {
+            notes: []
+        }
+    }
+
     if (state.notes.some(a => a.id === ev.id)) {
         return state;
     }
@@ -31,6 +37,7 @@ export default function useSubscription(sub, opt) {
 
     useEffect(() => {
         if (sub) {
+            dispatch({ reset: true });
             sub.OnEvent = (e) => {
                 dispatch(e);
             };

src/feed/TimelineFeed.js

@@ -15,16 +15,18 @@ export default function useTimelineFeed(pubKeys, global = false) {
 
         let sub = new Subscriptions();
         sub.Id = `timeline:${sub.Id}`;
-        sub.Authors = new Set(pubKeys);
+        sub.Authors = new Set(global ? [] : pubKeys);
         sub.Kinds.add(EventKind.TextNote);
         sub.Limit = 20;
 
         return sub;
-    }, [pubKeys]);
+    }, [pubKeys, global]);
 
     const main = useSubscription(sub, { leaveOpen: true });
 
     const subNext = useMemo(() => {
+        return null; // spamming subscriptions
+
         if (main.notes.length > 0) {
             let sub = new Subscriptions();
             sub.Id = `timeline-related:${sub.Id}`;

src/index.css

@@ -79,6 +79,10 @@ input[type="text"], input[type="password"], textarea {
   min-width: 0;
 }
 
+.f-1 {
+  flex: 1;
+}
+
 .f-grow {
   flex-grow: 1;
 }
@@ -175,12 +179,24 @@ body.scroll-lock {
 
 .tabs {
   display: flex;
+  align-content: center;
+  text-align: center;
   margin: 10px 0;
   overflow-x: auto;
 }
 
 .tabs > div {
   margin-right: 10px;
+  cursor: pointer;
+}
+
+.tabs > div:last-child {
+  margin: 0;
+}
+
+.tabs > div.active {
+  background-color: #222;
+  font-weight: bold;
 }
 
 .error {

src/pages/Root.css

@@ -0,0 +1,4 @@
+.root-tabs > div {
+  padding: 5px 0;
+  background-color: #333;
+}

src/pages/Root.js

@@ -1,10 +1,18 @@
+import "./Root.css";
 import { useSelector } from "react-redux";
 import { Link } from "react-router-dom";
 import { NoteCreator } from "../element/NoteCreator";
 import Timeline from "../element/Timeline";
+import { useState } from "react";
+
+const RootTab = {
+    Follows: 0,
+    Global: 1
+};
 
 export default function RootPage() {
     const [loggedOut, pubKey, follows] = useSelector(s => [s.login.loggedOut, s.login.publicKey, s.login.follows]);
+    const [tab, setTab] = useState(RootTab.Follows);
 
     function followHints() {
         if (follows?.length === 0 && pubKey) {
@@ -16,9 +24,18 @@ export default function RootPage() {
 
     return (
         <>
-            {pubKey ? <NoteCreator /> : null}
+            {pubKey ? <>
+                <NoteCreator />
+                <div className="tabs root-tabs">
+                    <div className={`f-1 ${tab === RootTab.Follows ? "active" : ""}`} onClick={() => setTab(RootTab.Follows)}>
+                        Follows
+                    </div>
+                    <div className={`f-1 ${tab === RootTab.Global ? "active" : ""}`} onClick={() => setTab(RootTab.Global)}>
+                        Global
+                    </div>
+                </div></> : null}
             {followHints()}
-            <Timeline pubkeys={follows} global={loggedOut === true} />
+            <Timeline pubkeys={follows} global={loggedOut === true || tab === RootTab.Global} />
         </>
     );
 }