relays: remove noisy eose console log

links: remove trailing slash in link text
due to URL formatting, the link text of https://example.com was showing as example.com/ removed trailing slash if possible.
9 changed files with 185 additions and 49 deletions
--- a/src/index.html
+++ b/src/index.html
@ -24,8 +24,8 @@
                <legend>write a new note</legend>
                <textarea name="message" rows="1"></textarea>
                <div class="buttons">
-                  <button type="submit" id="publish" disabled>send</button>
-                  <button type="button" name="back">back</button>
+                  <button type="submit" id="publish" class="primary" disabled>send</button>
+                  <button type="button" name="back" class="primary">back</button>
                </div>
                <small id="sendstatus" class="form-status"></small>
              </fieldset>
@ -42,7 +42,7 @@
                <input type="url" name="picture" id="profile_picture" placeholder="https://your.domain/image.png">
                <div class="buttons">
                  <small id="profilestatus" class="form-status" hidden></small>
-                  <button type="submit" name="publish" tabindex="0" disabled>publish</button>
+                  <button type="submit" name="publish" class="primary" tabindex="0" disabled>publish</button>
                </div>
              </form>
              <form action="#" name="options">
@ -86,8 +86,8 @@
                <input type="password" id="privatekey" autocomplete="off">
                <div class="buttons">
                  <small id="keystatus" class="form-status" hidden></small>
-                  <button type="button" name="generate" tabindex="0">new</button>
-                  <button type="button" name="import" tabindex="0" disabled>save</button>
+                  <button type="button" name="generate" class="primary" tabindex="0">new</button>
+                  <button type="button" name="import" class="primary" tabindex="0" disabled>save</button>
                </div>
              </form>
              <footer class="text">
@ -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>
--- a/src/main.ts
+++ b/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;
+        const note = replyList.find(r => r.id === id) || textNoteList.find(n => n.id === (id));
+        note && handleUpvote(note);
+        return;
      case 'follow':
        followContact(id);
-        break;
+        return;
    }
  }
  // const container = e.target.closest('[data-append]');
--- a/src/relays.ts
+++ b/src/relays.ts
@ -50,7 +50,7 @@ const subscribe = (
  });
  if (unsub) {
    sub.on('eose', () => {
-      console.log('eose', relay.url);
+      // console.log('eose', relay.url);
      unsubscribe(sub);
    });
  }
@ -69,7 +69,7 @@ export const subOnce = (
  if (relay) {
    const sub = subscribe(obj.cb, obj.filter, relay);
    sub.on('eose', () => {
-      console.log('eose', obj.relay);
+      // console.log('eose', obj.relay);
      unsubscribe(sub);
    });
  }
--- a/src/styles/form.css
+++ b/src/styles/form.css
@ -117,16 +117,15 @@ form .buttons,
 .buttons img,
 .buttons small,
 .buttons span {
+  font-weight: normal;
  vertical-align: middle;
 }

 button {
-  --bg-color: var(--bgcolor-accent);
-  --border-color: var(--bgcolor-accent);
-  background-color: var(--bg-color);
-  border: 0.2rem solid var(--border-color);
-  border-radius: .2rem;
+  background-color: transparent;
+  border: none;
  cursor: pointer;
+  font-weight: bold;
  outline-offset: 1px;
  word-break: normal;
 }
@ -137,7 +136,12 @@ button:active {

 .primary,
 .secondary {
-  padding: .8rem 2.4rem;
+  border: 0.2rem solid var(--bgcolor-accent);
+  border-radius: .2rem;
+  padding: .9rem 2rem .7rem 2rem;
+}
+.primary {
+  background-color: var(--bgcolor-accent);
 }
 .secondary {
  background-color: transparent;
--- a/src/styles/view.css
+++ b/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;
 }
--- a/src/subscriptions.ts
+++ b/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)
-  sub({
-    cb: onReply,
-    filter: {
-      '#e': [eventId],
-      kinds: [1, 7],
-    },
-    unsub: true,
-  });
+  replies.add(eventId);
+  setTimeout(() => {
+    sub({
+      cb: onReply,
+      filter: {
+        '#e': [eventId],
+        kinds: [1, 7],
+      },
+      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,
  });
 };
--- a/src/template.ts
+++ b/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(
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@ -117,11 +117,12 @@ export const parseTextContent = (
            return word;
          }
          firstLink = firstLink || url.href;
+          const prettierWithoutSlash = url.pathname === '/';
          return elem('a', {
            href: url.href,
            target: '_blank',
            rel: 'noopener noreferrer'
-          }, url.href.slice(url.protocol.length + 2));
+          }, url.href.slice(url.protocol.length + 2, prettierWithoutSlash ? -1 : undefined));
        } catch (err) {
          return word;
        }
--- a/src/view.ts
+++ b/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'};

 /**
Author	SHA1	Message	Date
OFF0	318633fa41	relays: remove noisy eose console log ci/woodpecker/push/woodpecker Pipeline was successful Details	9 months ago
OFF0	d11e986b39	links: remove trailing slash in link text due to URL formatting, the link text of https://example.com was showing as example.com/ removed trailing slash if possible.	9 months ago
OFF0	dab9efa86c	styling: update button styling adding proper primary and secondary button styles.	9 months ago
OFF0	990d0cbe8a	contact: show timeline of only followed contacts added home and global feed, home will try to show timeline with all followed contacts and fallback to global if there are no followees. in a future commit global tab could become search and have a search field at the top.	9 months ago