feed: navigate by clicking on profile image and content

before npub and note links was only supported on profile name and
date/time.

added support to click on profile image and note content (unless
a link was clicked).

src/main.ts

@@ -277,6 +277,19 @@ const handleButton = (button: HTMLButtonElement) => {
   // }
 };
 
+const handleContentClick = (content: HTMLElement) => {
+  const card = content.closest('article[data-id]') as HTMLElement;
+  if (
+    !card || !card.dataset.id
+    || getSelection()?.toString() // do not navigate if user selects text
+  ) {
+    return;
+  }
+  const href = `/${nip19.noteEncode(card.dataset.id)}`;
+  route(href);
+  history.pushState({}, '', href);
+};
+
 document.body.addEventListener('click', (event: MouseEvent) => {
   // dont intercept command or shift-click
   if (event.metaKey || event.shiftKey) {
@@ -291,5 +304,10 @@ document.body.addEventListener('click', (event: MouseEvent) => {
   const button = target?.closest('button');
   if (button) {
     handleButton(button);
+    return;
+  }
+  const content = target?.closest('.mbox-content');
+  if (content) {
+    handleContentClick(content as HTMLElement);
   }
 });

src/styles/cards.css

@@ -27,6 +27,9 @@
   position: relative;
   z-index: 2;
 }
+a.mbox-img:focus {
+  --focus-border-radius: var(--profileimg-size);
+}
 
 .mbox-img canvas,
 .mbox-img img {

src/ui.ts

@@ -48,7 +48,7 @@ export const createTextNote = (
   }
   const replyFeed: Array<HTMLElement> = replies[0] ? replies.map(e => setViewElem(e.id, createTextNote(e, relay))) : [];
   return elemArticle([
-    elem('div', {className: 'mbox-img'}, img),
+    elem('a', {className: 'mbox-img', href: `/${evt.nip19.npub}`}, img),
     elem('div', {className: 'mbox-body'}, [
       elem('header', {
         className: 'mbox-header',
@@ -60,7 +60,7 @@ export const createTextNote = (
         ' ',
         elem('a', {href: `/${evt.nip19.note}`}, elem('time', {dateTime: time.toISOString()}, formatTime(time))),
       ]),
-      elem('div', {/* data: isLongContent ? {append: evt.content.slice(280)} : null*/}, content /*[
+      elem('div', {className: 'mbox-content'/* data: isLongContent ? {append: evt.content.slice(280)} : null*/}, content /*[
         ...content,
         (firstLink && validatePow(evt)) ? linkPreview(firstLink, evt.id, relay) : null,
       ]*/),