From 11fbc7aa7dfaa50ad629908ac6dc02eeb837a147 Mon Sep 17 00:00:00 2001
From: OFF0 <offbyn@protonmail.com>
Date: Thu, 8 Dec 2022 22:25:33 +0100
Subject: [PATCH] feed: ability to close reply form

This is an approach to close the reply-to-form automatically when
focus is lost and only if the input is empty. A second way to close
the reply-to-form is provided by toggling the reply icon.
---
 src/form.css |  2 +-
 src/main.js  | 33 +++++++++++++++++++++++++++------
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/form.css b/src/form.css
index 1a5d306..4c6fca1 100644
--- a/src/form.css
+++ b/src/form.css
@@ -202,7 +202,7 @@ button[name="back"] {
 .shrink-out {
   animation-duration: var(--transition-duration);
   animation-name: lineInserted;
-  transition: max-height var(--transition-duration) var(--transition-timing-function);
+  transition: max-height calc(.5 * var(--transition-duration)) var(--transition-timing-function);
 }
 @keyframes lineInserted {
   from {
diff --git a/src/main.js b/src/main.js
index 273f3e4..923eb1a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -52,7 +52,7 @@ const subscription = pool.sub({
     //   '32e1827635450ebb3c5a7d12c1f8e7b2b514439ac10a67eef3d9fd9c5c68e245',  // jb55
     // ],
     // since: new Date(Date.now() - (24 * 60 * 60 * 1000)),
-    limit: 750,
+    limit: 75,
   }
 });
 
@@ -405,10 +405,13 @@ function getMetadata(evt, relay) {
   return {host, img, isReply, name, replies, time, userName};
 }
 
-// reply
 feedContainer.addEventListener('click', (e) => {
   const button = e.target.closest('button');
   if (button && button.name === 'reply') {
+    if (localStorage.getItem('reply_to') === button.dataset.eventId) {
+      writeInput.blur();
+      return;
+    }
     appendReplyForm(button);
     localStorage.setItem('reply_to', button.dataset.eventId);
     return;
@@ -422,11 +425,29 @@ feedContainer.addEventListener('click', (e) => {
 const writeForm = document.querySelector('#writeForm');
 const writeInput = document.querySelector('textarea[name="message"]');
 
-function appendReplyForm(el) {
+const elemShrink = () => {
+  const height = writeInput.style.height || writeInput.getBoundingClientRect().height;
   const shrink = elem('div', {className: 'shrink-out'});
-  shrink.style.height = `${writeInput.style.height || writeInput.getBoundingClientRect().height}px`;
-  shrink.addEventListener('animationend', () => shrink.remove());
-  writeForm.before(shrink);
+  shrink.style.height = `${height}px`;
+  shrink.addEventListener('animationend', () => shrink.remove(), {once: true});
+  return shrink;
+}
+
+writeInput.addEventListener('focusout', () => {
+  const reply_to = localStorage.getItem('reply_to');
+  if (reply_to && writeInput.value === '') {
+    writeInput.addEventListener('transitionend', (event) => {
+      if (!reply_to || reply_to === localStorage.getItem('reply_to') && !writeInput.style.height) { // should prob use some class or data-attr instead of relying on height
+        writeForm.after(elemShrink());
+        writeForm.remove();
+        localStorage.removeItem('reply_to');
+      }
+    }, {once: true});
+  }
+});
+
+function appendReplyForm(el) {
+  writeForm.before(elemShrink());
   writeInput.blur();
   writeInput.style.removeProperty('height');
   el.after(writeForm);