contact: show timeline of only followed contacts

added global link in main nav for showing global feed.

in a future commit global tab will become search.

src/index.html

@@ -102,7 +102,9 @@
         <!-- views are inserted here -->
       </main>
       <nav>
-        <a href="/"><!--<span>X</span>-->feed</a>
+        <a href="/">home</a>
+        <a href="/feed">global</a>
+        <span class="spacer"></span>
         <button tpye="button" name="settings">settings</button>
       </nav>
     </div>

src/main.ts

@@ -4,13 +4,13 @@ import {elem} from './utils/dom';
 import {bounce} from './utils/time';
 import {isWssUrl} from './utils/url';
 import {closeSettingsView, config, toggleSettingsView} from './settings';
-import {sub24hFeed, subEventID, subNote, subProfile} from './subscriptions'
-import {getReplyTo, hasEventTag, isMention, sortByCreatedAt, sortEventCreatedAt} from './events';
+import {subGlobalFeed, subEventID, subNote, subProfile, subPubkeys, subOwnContacts} from './subscriptions'
+import {getReplyTo, hasEventTag, isEvent, isMention, sortByCreatedAt, sortEventCreatedAt} from './events';
 import {clearView, getViewContent, getViewElem, getViewOptions, setViewElem, view} from './view';
 import {handleReaction, handleUpvote} from './reactions';
 import {closePublishView, openWriteInput, togglePublishView} from './write';
 import {handleMetadata, renderProfile} from './profiles';
-import {followContact, getContactUpdateMessage, setContactList, updateContactList} from './contacts';
+import {followContact, getContactUpdateMessage, getContacts, resetContactList, setContactList, updateContactList, updateFollowBtn} from './contacts';
 import {EventWithNip19, EventWithNip19AndReplyTo, textNoteList, replyList} from './notes';
 import {createTextNote, renderEventDetails, renderRecommendServer, renderUpdateContact} from './ui';
 
@@ -55,7 +55,6 @@ const renderFeed = bounce(() => {
         .forEach(renderNote);
       break;
     case 'profile':
-      const isEvent = <T>(evt?: T): evt is T => evt !== undefined;
       [
         ...textNoteList // get notes
           .filter(note => note.pubkey === view.id),
@@ -69,6 +68,20 @@ const renderFeed = bounce(() => {
 
       renderProfile(view.id);
       break;
+    case 'home':
+      const ids = getContacts();
+      [
+        ...textNoteList
+          .filter(note => ids.includes(note.pubkey)),
+        ...replyList // search id in notes and replies
+          .filter(reply => ids.includes(reply.pubkey))
+          .map(reply => textNoteList.find(note => note.id === reply.replyTo))
+          .filter(isEvent),
+      ]
+        .sort(sortByCreatedAt)
+        .reverse()
+        .forEach(renderNote);
+      break;
     case 'feed':
       const now = Math.floor(Date.now() * 0.001);
       textNoteList
@@ -87,7 +100,7 @@ const renderFeed = bounce(() => {
 
 const renderReply = (evt: EventWithNip19AndReplyTo) => {
   const parent = getViewElem(evt.replyTo);
-  if (!parent) { // root article has not been rendered
+  if (!parent || getViewElem(evt.id)) {
     return;
   }
   let replyContainer = parent.querySelector('.mbox-replies');
@@ -110,7 +123,6 @@ const handleReply = (evt: EventWithNip19, relay: string) => {
   }
   const replyTo = getReplyTo(evt);
   if (!replyTo) {
-    console.warn('expected to find reply-to-event-id', evt);
     return;
   }
   const evtWithReplyTo = {replyTo, ...evt};
@@ -124,7 +136,7 @@ const handleTextNote = (evt: Event, relay: string) => {
     return;
   }
   if (eventRelayMap[evt.id]) {
-    eventRelayMap[evt.id] = [...(eventRelayMap[evt.id]), relay]; // TODO: just push?
+    eventRelayMap[evt.id] = [...(eventRelayMap[evt.id]), relay]; // TODO: remove eventRelayMap and just check for getViewElem?
   } else {
     eventRelayMap[evt.id] = [relay];
     const evtWithNip19 = {
@@ -145,12 +157,14 @@ const handleTextNote = (evt: Event, relay: string) => {
   }
 };
 
-config.rerenderFeed = () => {
+const rerenderFeed = () => {
   clearView();
   renderFeed();
 };
+config.rerenderFeed = rerenderFeed;
 
 const handleContactList = (evt: Event, relay: string) => {
+  // TODO: if newer and view.type === 'home' rerenderFeed()
   setContactList(evt);
   const view = getViewOptions();
   if (
@@ -229,9 +243,21 @@ const onEvent = (evt: Event, relay: string) => {
 
 // subscribe and change view
 const route = (path: string) => {
+  const contactList = getContacts();
   if (path === '/') {
-    sub24hFeed(onEvent);
-    view('/', {type: 'feed'});
+    if (contactList.length) {
+      const {pubkey} = config;
+      subPubkeys(contactList, onEvent);
+      view(`/`, {type: 'home'});
+    } else {
+      subGlobalFeed(onEvent);
+      view('/feed', {type: 'feed'});
+    }
+    return;
+  }
+  if (path === '/feed') {
+    subGlobalFeed(onEvent);
+    view('/feed', {type: 'feed'});
   } else if (path.length === 64 && path.match(/^\/[0-9a-z]+$/)) {
     const {type, data} = nip19.decode(path.slice(1));
     if (typeof data !== 'string') {
@@ -246,6 +272,7 @@ const route = (path: string) => {
       case 'npub':
         subProfile(data, onEvent);
         view(path, {type: 'profile', id: data});
+        updateFollowBtn(data);
         break;
       default:
         console.warn(`type ${type} not yet supported`);
@@ -261,6 +288,7 @@ const route = (path: string) => {
 };
 
 // onload
+subOwnContacts(onEvent);
 route(location.pathname);
 
 // only push a new entry if there is no history onload
@@ -286,8 +314,10 @@ const handleLink = (a: HTMLAnchorElement, e: MouseEvent) => {
   }
   if (
     href === '/'
+    || href.startsWith('/feed')
     || href.startsWith('/note')
     || href.startsWith('/npub')
+    || href.length === 65
   ) {
     route(href);
     history.pushState({}, '', href);
@@ -306,20 +336,26 @@ const handleButton = (button: HTMLButtonElement) => {
     case 'back':
       closePublishView();
       return;
+    case 'import':
+      resetContactList(config.pubkey);
+      rerenderFeed();
+      subOwnContacts(onEvent);
+      subGlobalFeed(onEvent);
+      return;
   }
   const id = button.dataset.id || (button.closest('[data-id]') as HTMLElement)?.dataset.id;
   if (id) {
     switch(button.name) {
       case 'reply':
         openWriteInput(button, id);
-        break;
+        return;
       case 'star':
         const note = replyList.find(r => r.id === id) || textNoteList.find(n => n.id === (id));
         note && handleUpvote(note);
-        break;
+        return;
       case 'follow':
         followContact(id);
-        break;
+        return;
     }
   }
   // const container = e.target.closest('[data-append]');

src/styles/view.css

@@ -24,14 +24,16 @@ aside {
 }
 
 nav {
+  align-items: center;
   background-color: var(--bgcolor-nav);
   display: flex;
   flex-direction: row;
   flex-grow: 1;
   flex-shrink: 0;
   justify-content: space-between;
+  min-height: 4.6rem;
   overflow-y: auto;
-  padding: 0 1.5rem;
+  padding: .2rem 1.5rem;
   user-select: none;
   -webkit-user-select: none;
 }
@@ -42,6 +44,7 @@ nav {
 }
 @media (orientation: landscape) {
   nav {
+    align-items: stretch;
     flex-direction: column;
     justify-content: space-between;
   }
@@ -51,6 +54,8 @@ nav button {
   --bgcolor-accent: transparent;
   --border-color: transparent;
   border-radius: 0;
+  color: inherit;
+  font-weight: bold;
   padding: 1rem;
 }
 @media (orientation: landscape) {
@@ -58,6 +63,17 @@ nav button {
   nav button {
     padding: 2rem 0;
   }
+  nav .spacer {
+    flex-grow: 1;
+  }
+  nav button:last-child {
+    margin-bottom: .4rem;
+  }
+}
+@media (orientation: portrait) {
+  nav .spacer {
+    display: none;
+  }
 }
 
 .view {
@@ -121,8 +137,6 @@ nav .content {
   justify-content: space-between;
 }
 nav a {
-  display: flex;
-  flex-direction: column;
   text-align: center;
   text-decoration: none;
 }

src/subscriptions.ts

@@ -8,8 +8,58 @@ type SubCallback = (
   relay: string,
 ) => void;
 
+export const subPubkeys = (
+  pubkeys: string[],
+  onEvent: SubCallback,
+) => {
+  const authorsPrefixes = pubkeys.map(pubkey => pubkey.slice(0, 32));
+  console.info(`subscribe to homefeed ${authorsPrefixes}`);
+  unsubAll();
+
+  const repliesTo = new Set<string>();
+  sub({
+    cb: (evt, relay) => {
+      if (
+        evt.tags.some(hasEventTag)
+        && !evt.tags.some(isMention)
+      ) {
+        const note = getReplyTo(evt); // get all reply to events instead?
+        if (note && !repliesTo.has(note)) {
+          repliesTo.add(note);
+          subOnce({
+            cb: onEvent,
+            filter: {
+              ids: [note],
+              kinds: [1],
+              limit: 1,
+            },
+            relay,
+          });
+        }
+      }
+      onEvent(evt, relay);
+    },
+    filter: {
+      authors: authorsPrefixes,
+      kinds: [1],
+      limit: 20,
+    },
+  });
+  // get metadata
+  sub({
+    cb: onEvent,
+    filter: {
+      authors: pubkeys,
+      kinds: [0],
+      limit: pubkeys.length,
+    },
+    unsub: true,
+  });
+};
+
 /** subscribe to global feed */
-export const sub24hFeed = (onEvent: SubCallback) => {
+export const subGlobalFeed = (onEvent: SubCallback) => {
+  console.info('subscribe to global feed');
   unsubAll();
   const now = Math.floor(Date.now() * 0.001);
   const pubkeys = new Set<string>();
@@ -132,15 +182,17 @@ export const subNote = (
     });
   };
 
-  replies.add(eventId)
+  replies.add(eventId);
+  setTimeout(() => {
     sub({
       cb: onReply,
       filter: {
         '#e': [eventId],
         kinds: [1, 7],
       },
-    unsub: true,
+      unsub: true, // TODO: probably keep this subscription also after onReply/unsubAll
     });
+  }, 200);
 };
 
 /** subscribe to npub key (nip-19) */
@@ -206,11 +258,33 @@ export const subEventID = (
   id: string,
   onEvent: SubCallback,
 ) => {
+  unsubAll();
   sub({
     cb: onEvent,
     filter: {
       ids: [id],
       limit: 1,
     },
+    unsub: true,
+  });
+  sub({
+    cb: onEvent,
+    filter: {
+      authors: [id],
+      limit: 200,
+    },
+    unsub: true,
+  });
+};
+
+export const subOwnContacts = (onEvent: SubCallback) => {
+  sub({
+    cb: onEvent,
+    filter: {
+      authors: [config.pubkey],
+      kinds: [3],
+      limit: 1,
+    },
+    unsub: true,
   });
 };

src/template.ts

@@ -7,7 +7,9 @@ export type DOMMap = {
 };
 
 export type ViewTemplateOptions = {
-  type: 'feed'
+  type: 'home';
+} | {
+  type: 'feed';
 } | {
   type: 'note';
   id: string;
@@ -23,8 +25,13 @@ export const renderViewTemplate = (options: ViewTemplateOptions) => {
   const content = elem('div', {className: 'content'});
   const dom: DOMMap = {};
   switch (options.type) {
+    case 'home':
+      break;
+    case 'feed':
+      break;
     case 'profile':
       const pubkey = options.id;
+      const npub = nip19.npubEncode(pubkey);
       const detail = elem('p');
       const followStatus = elem('small');
       const followBtn = elem('button', {
@@ -34,7 +41,7 @@ export const renderViewTemplate = (options: ViewTemplateOptions) => {
       }, 'follow');
       const following = elem('span');
       const profileHeader = elem('header', {className: 'hero'}, [
-        elem('small', {className: 'hero-npub'}, nip19.npubEncode(pubkey)),
+        elem('small', {className: 'hero-npub'}, npub),
         elem('div', {className: 'hero-title'}, [
           elem('h1', {}, pubkey),
           followStatus,
@@ -53,8 +60,6 @@ export const renderViewTemplate = (options: ViewTemplateOptions) => {
       break;
     case 'note':
       break;
-    case 'feed':
-      break;
     case 'event':
       const id = options.id;
       content.append(

src/view.ts

@@ -60,8 +60,8 @@ type GetViewOptions = () => ViewTemplateOptions;
 
 /**
  * get options for current view
- * @returns {id: 'feed' | 'profile' | 'note' | 'event', id?: string}
- */
+ * @returns {id: 'home' | 'feed' | 'profile' | 'note' | 'event', id?: string}
+*/
 export const getViewOptions: GetViewOptions = () => containers[activeContainerIndex]?.options || {type: 'feed'};
 
 /**