From bb8790e9490deac340a7063769e59da552cd5474 Mon Sep 17 00:00:00 2001
From: OFF0 <offbyn@protonmail.com>
Date: Fri, 18 Aug 2023 12:43:59 +0200
Subject: [PATCH] timeline: add route to show timeline of other users

added experimental /timeline/npub... route, this currently does
not correctly reload as contacts of that npub are lost onload.
other than that it seems to work well, but needs more testing.
---
 src/contacts.ts     |  9 ++++++++-
 src/main.ts         | 13 +++++++++++--
 src/styles/view.css |  2 ++
 src/template.ts     |  1 +
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/contacts.ts b/src/contacts.ts
index 517040e..ff4bfba 100644
--- a/src/contacts.ts
+++ b/src/contacts.ts
@@ -66,13 +66,14 @@ const updateFollowing = (evt: Event) => {
     case 'profile':
       updateFollowBtn(view.id);
       if (view.id === evt.pubkey) {
+        const npub = nip19.npubEncode(evt.pubkey);
         // update following link
         const following = getViewElem('following') as HTMLElement;
         if (following) {
           const count = evt.tags.filter(isPTag).length;
           const anchor = elem('a', {
             data: {following: evt.pubkey},
-            href: `/contacts/${nip19.npubEncode(evt.pubkey)}`,
+            href: `/contacts/${npub}`,
             title: dateTime.format(evt.created_at * 1000),
           }, [
             'following ',
@@ -81,6 +82,12 @@ const updateFollowing = (evt: Event) => {
           following.replaceWith(anchor);
           setViewElem('following', anchor);
         }
+        let timeline = getViewElem('timeline');
+        if (!timeline) {
+          timeline = elem('a', {href: `/timeline/${npub}`}, 'timeline');
+          getViewElem('header').querySelector('footer')?.append(timeline);
+          setViewElem('timeline', timeline);
+        }
       }
       break;
   }
diff --git a/src/main.ts b/src/main.ts
index b0ddcec..a5a5c30 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -82,7 +82,7 @@ const renderFeed = bounce(() => {
       refreshFollowing(view.id);
       break;
     case 'home':
-      const ids = getOwnContacts();
+      const ids = view.id ? getContacts(view.id) : getOwnContacts();
       [
         ...textNoteList
           .filter(note => ids.includes(note.pubkey)),
@@ -269,7 +269,7 @@ const route = (path: string) => {
     const contactList = getOwnContacts();
     if (contactList.length) {
       subPubkeys(contactList, onEvent);
-      view(`/`, {type: 'home'});
+      view('/', {type: 'home'});
     } else {
       subGlobalFeed(onEvent);
       view('/feed', {type: 'feed'});
@@ -306,6 +306,14 @@ const route = (path: string) => {
       subContactList(contactPubkey, onEvent);
       view(path, {type: 'contacts', id: contactPubkey});
     }
+  } else if (path.length === 73 && path.match(/^\/timeline\/npub[0-9a-z]+$/)) {
+    const timelineNpub = path.slice(10);
+    const {type: timelineType, data: timelinePubkey} = nip19.decode(timelineNpub);
+    if (timelineType === 'npub') {
+      const timelinePubkeys = getContacts(timelinePubkey);
+      subPubkeys(timelinePubkeys, onEvent);
+      view(path, {type: 'home', id: timelinePubkey});
+    }
   } else if (path.length === 65) {
     const eventID = path.slice(1);
     subEventID(eventID, onEventDetails);
@@ -346,6 +354,7 @@ const handleLink = (a: HTMLAnchorElement, e: MouseEvent) => {
     || href.startsWith('/note')
     || href.startsWith('/npub')
     || href.startsWith('/contacts/npub')
+    || href.startsWith('/timeline/npub')
     || (href.startsWith('/') && href.length === 65)
   ) {
     route(href);
diff --git a/src/styles/view.css b/src/styles/view.css
index a70c475..16ec315 100644
--- a/src/styles/view.css
+++ b/src/styles/view.css
@@ -193,6 +193,8 @@ nav a {
 }
 
 .hero footer {
+  display: flex;
+  gap: var(--gap-half);
   padding-left: var(--extra-space);
 }
 
diff --git a/src/template.ts b/src/template.ts
index d030a30..1627402 100644
--- a/src/template.ts
+++ b/src/template.ts
@@ -8,6 +8,7 @@ export type DOMMap = {
 
 export type ViewTemplateOptions = {
   type: 'home';
+  id?: string;
 } | {
   type: 'feed';
 } | {