profile: refactor

each view has it's own DOMMap to reference its own elements this
can us non-unique keys, i.e. each view can have a header key.

changed:
- use getViewElem instead of querying the dom
- access button.dataset.id directly before traversing the dom

src/main.ts

@@ -198,12 +198,12 @@ const handleRecommendServer = (evt: Event, relay: string) => {
 };
 
 const onEventDetails = (evt: Event, relay: string) => {
-  if (getViewElem(`detail-${evt.id}`)) {
+  if (getViewElem(evt.id)) {
     return;
   }
-  const art = renderEventDetails(evt, relay);
+  const article = renderEventDetails(evt, relay);
-  getViewContent().append(art);
+  getViewContent().append(article);
-  setViewElem(`detail-${evt.id}`, art);
+  setViewElem(evt.id, article);
 };
 
 const onEvent = (evt: Event, relay: string) => {
@@ -307,7 +307,7 @@ const handleButton = (button: HTMLButtonElement) => {
       closePublishView();
       return;
   }
-  const id = (button.closest('[data-id]') as HTMLElement)?.dataset.id;
+  const id = button.dataset.id || (button.closest('[data-id]') as HTMLElement)?.dataset.id;
   if (id) {
     switch(button.name) {
       case 'reply':

src/profiles.ts

@@ -1,7 +1,7 @@
 import {Event} from 'nostr-tools';
 import {elem, elemCanvas, parseTextContent} from './utils/dom';
 import {getNoxyUrl} from './utils/url';
-import {getViewContent, getViewElem} from './view';
+import {getViewElem} from './view';
 import {parseJSON} from './media';
 import {sortByCreatedAt} from './events';
 
@@ -104,10 +104,9 @@ export const getMetadata = (pubkey: string) => {
 };
 
 export const renderProfile = (pubkey: string) => {
-  const content = getViewContent();
+  const header = getViewElem('header');
-  const header = getViewElem(pubkey);
   const metadata = profileMap[pubkey];
-  if (!content || !header || !metadata) {
+  if (!header || !metadata) {
     return;
   }
   if (metadata.name) {
@@ -119,8 +118,8 @@ export const renderProfile = (pubkey: string) => {
       header.append(elem('h1', {}, metadata.name));
     }
   }
+  const detail = getViewElem('detail');
   if (metadata.about) {
-    const detail = getViewElem(`detail-${pubkey}`);
     if (!detail.children.length) {
       const [content] = parseTextContent(metadata.about);
       detail?.append(...content);

src/template.ts

@@ -25,18 +25,20 @@ export const renderViewTemplate = (options: ViewTemplateOptions) => {
   switch (options.type) {
     case 'profile':
       const pubkey = options.id;
-      const detail = elem('p', {data: {'profileDetails': pubkey}});
+      const detail = elem('p');
-      dom[`detail-${pubkey}`] = detail;
+      const following = elem('span');
-      const header = elem('header', {className: 'hero'}, [
+      const profileHeader = elem('header', {className: 'hero'}, [
-        elem('small', {}, nip19.npubEncode(pubkey)),
+        elem('small', {className: 'hero-npub'}, nip19.npubEncode(pubkey)),
+        elem('div', {className: 'hero-title'}, [
           elem('h1', {}, pubkey),
+        ]),
         detail,
-        elem('footer', {}, [
+        elem('footer', {}, following),
-          elem('span', {data:{following: pubkey}})
-        ])
       ]);
-      dom[pubkey] = header;
+      dom.header = profileHeader;
-      content.append(header);
+      dom.detail = detail;
+      dom.following = following;
+      content.append(profileHeader);
       document.title = pubkey;
       break;
     case 'note':
@@ -45,11 +47,11 @@ export const renderViewTemplate = (options: ViewTemplateOptions) => {
       break;
     case 'event':
       const id = options.id;
-      const eventHeader = elem('header', {className: 'hero'}, [
+      content.append(
+        elem('header', {className: 'hero'}, [
           elem('h1', {}, id),
-      ]);
+        ])
-      dom[id] = eventHeader;
+      );
-      content.append(eventHeader);
       document.title = id;
       break;
   }