From c2584c9f8c28d12b43473ee228b180f172bd1ddf Mon Sep 17 00:00:00 2001
From: Seongmin Lee <git@boltless.me>
Date: Sat, 25 Jul 2026 01:29:02 +0900
Subject: [PATCH] appview/pages/templates: visibility based line-quote-button

It was still using HTMX based comment toggle which has been removed from
`64c94491`.

Signed-off-by: Seongmin Lee <git@boltless.me>
---
 .../fragments/line-quote-button.html          | 27 ++++++-------------
 1 file changed, 8 insertions(+), 19 deletions(-)

diff --git a/appview/pages/templates/fragments/line-quote-button.html b/appview/pages/templates/fragments/line-quote-button.html
index e280067b..52199f53 100644
--- a/appview/pages/templates/fragments/line-quote-button.html
+++ b/appview/pages/templates/fragments/line-quote-button.html
@@ -18,7 +18,8 @@
     const btnEnd = document.getElementById('line-quote-btn-end');
 
     const textarea = () =>
-      document.querySelector('form[hx-post="/comment"] textarea');
+      Array.from(document.querySelectorAll('form[hx-post="/comment"] textarea'))
+        .find(ta => ta.offsetParent !== null) || null;
 
     const lineOf = (el) =>
       el?.closest?.('span[id*="-O"]')
@@ -108,33 +109,21 @@
     let dragCurrent = null;
     let hoverTarget = null;
 
-    const commentBtn = () =>
-      document.querySelector('[hx-get$="/comment"]:not(form *)');
+    const commentToggle = () =>
+      document.querySelector('label[for^="comment-toggle-"]');
 
     const openCommentForm = () => {
       const ta = textarea();
       if (ta) return Promise.resolve(ta);
-      const trigger = commentBtn();
+      const trigger = commentToggle();
       if (!trigger) return Promise.resolve(null);
       trigger.click();
-      return new Promise(resolve => {
-        const handler = () => {
-          const ta = textarea();
-          if (!ta) return;
-          document.body.removeEventListener('htmx:afterSettle', handler);
-          clearTimeout(timer);
-          resolve(ta);
-        };
-        const timer = setTimeout(() => {
-          document.body.removeEventListener('htmx:afterSettle', handler);
-          resolve(null);
-        }, 5000);
-        document.body.addEventListener('htmx:afterSettle', handler);
-      });
+      return new Promise(resolve =>
+        requestAnimationFrame(() => resolve(textarea())));
     };
 
     const showBtn = (lineEl) => {
-      if ((!textarea() && !commentBtn()) || !anchorOf(lineEl)) return;
+      if ((!textarea() && !commentToggle()) || !anchorOf(lineEl)) return;
       const rect = lineEl.getBoundingClientRect();
       Object.assign(btn.style, {
         top: `${rect.top + rect.height / 2 - btn.offsetHeight / 2}px`,
-- 
2.51.2