From 3a1bf6f56f745657abc13a155cb4a0a59fea092a Mon Sep 17 00:00:00 2001
From: OFF0 <offbyn@protonmail.com>
Date: Fri, 28 Jul 2023 11:46:14 +0200
Subject: [PATCH] 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          | 18 ++++++++++++++++++
 src/styles/cards.css |  3 +++
 src/ui.ts            |  4 ++--
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 7d9eb43..2b8b24f 100644
--- a/src/main.ts
+++ b/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);
   }
 });
diff --git a/src/styles/cards.css b/src/styles/cards.css
index 8b3da8e..ec818c6 100644
--- a/src/styles/cards.css
+++ b/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 {
diff --git a/src/ui.ts b/src/ui.ts
index 507309b..9951ef0 100644
--- a/src/ui.ts
+++ b/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,
       ]*/),