Fix feed.html: disable inline comment rendering that caused flash of replies

Two fixes: 1. post-interactions2.mjs: only call addCommentToPost when getCommentsVisible() is true 2. feed.html: call cards.setCommentsVisible(false) after initPostCards to disable inline comment rendering for the new simplified feed The old feed (feed-old.html) still has the Comments toggle and can re-enable them.
Rename feed.html -> feed-old.html, feed2.html -> feed.html
2026-06-25 21:02:21 -04:00 · 2026-06-25 20:57:34 -04:00 · 2026-06-25 20:55:02 -04:00
5 changed files with 46 additions and 34 deletions
--- a/www/feed-old.html
+++ b/www/feed-old.html
@@ -87,7 +87,9 @@

  <div id="divFooter">
    <div id="divFooterLeft" class="divFooterBox"></div>
-    <div id="divFooterCenter" class="divFooterBox"></div>
+    <div id="divFooterCenter" class="divFooterBox">
+      <button id="commentsToggleButton">Comments</button>
+    </div>
    <div id="divFooterRight" class="divFooterBox"></div>
    <div id="divFooterBalance" class="divFooterBox">0 sats</div>
  </div>
@@ -279,10 +281,18 @@ import { initPostCards } from './js/post-interactions2.mjs';
      return entry;
    }

-    function handleComposerCommentIntent({ postId }) {
-      if (!postId) return false;
-      window.open('./post-feed.html?event=' + encodeURIComponent(postId), '_blank');
-      return true;
+    function handleComposerCommentIntent({ postId, postPubkey }) {
+      const postEl = document.querySelector(`.divPostItem[data-post-id="${postId}"]`);
+      if (!postEl) return false;
+
+      const entry = getOrCreateInlineComposer(postId, postEl);
+      if (!entry) return false;
+      entry.tags = [
+        ['e', postId, '', 'reply'],
+        ['p', postPubkey]
+      ];
+      if (entry.instance?.show) entry.instance.show();
+      return focusInlineComposer(entry.hostEl, '');
    }

    function handleComposerQuoteIntent({ postId, postPubkey }) {
@@ -325,7 +335,6 @@ import { initPostCards } from './js/post-interactions2.mjs';
      publishEvent,
      getPubkey,
      ndkFetchEvents,
-      queryCache,
      fetchCachedProfile,
      storeProfile,
      walletPayInvoice,
@@ -630,6 +639,12 @@ import { initPostCards } from './js/post-interactions2.mjs';

        document.getElementById('logoutButton')?.addEventListener('click', logout);

+        document.getElementById('commentsToggleButton')?.addEventListener('click', () => {
+          const nextVisible = !cards.getCommentsVisible();
+          cards.setCommentsVisible(nextVisible);
+          document.getElementById('commentsToggleButton')?.classList.toggle('dimmed', !nextVisible);
+        });
+
        btnSeeMore.addEventListener('click', () => {
          displayCount += SEE_MORE_INCREMENT;
          renderFeed();
@@ -705,7 +720,7 @@ import { initPostCards } from './js/post-interactions2.mjs';

      } catch (error) {
        console.error('[feed.html] Initialization failed:', error);
-        divBody.innerHTML = `<div style="text-align:center;padding:50px;"><div style="font-size:24px;margin-bottom:20px;color:var(--primary-color);">❌ Error</div><div style="font-size:16px;color:var(--muted-color);">${error.message}</div></div>`;
+        divBody.innerHTML = `<div style="text-align:center;padding:50px;"><div style="font-size:24px;margin-bottom:20px;color:red;">❌ Error</div><div style="font-size:16px;">${error.message}</div></div>`;
      }
    })();
  </script>
--- a/www/feed.html
+++ b/www/feed.html
@@ -87,9 +87,7 @@

  <div id="divFooter">
    <div id="divFooterLeft" class="divFooterBox"></div>
-    <div id="divFooterCenter" class="divFooterBox">
-      <button id="commentsToggleButton">Comments</button>
-    </div>
+    <div id="divFooterCenter" class="divFooterBox"></div>
    <div id="divFooterRight" class="divFooterBox"></div>
    <div id="divFooterBalance" class="divFooterBox">0 sats</div>
  </div>
@@ -157,6 +155,8 @@
      walletPayInvoice,
      walletSendNutzap,
      walletFetchMintList,
+      walletGetBalance,
+      walletGetMints,
      getRelayData,
      getUserSettings,
      patchUserSettings,
@@ -281,18 +281,10 @@ import { initPostCards } from './js/post-interactions2.mjs';
      return entry;
    }

-    function handleComposerCommentIntent({ postId, postPubkey }) {
-      const postEl = document.querySelector(`.divPostItem[data-post-id="${postId}"]`);
-      if (!postEl) return false;
-
-      const entry = getOrCreateInlineComposer(postId, postEl);
-      if (!entry) return false;
-      entry.tags = [
-        ['e', postId, '', 'reply'],
-        ['p', postPubkey]
-      ];
-      if (entry.instance?.show) entry.instance.show();
-      return focusInlineComposer(entry.hostEl, '');
+    function handleComposerCommentIntent({ postId }) {
+      if (!postId) return false;
+      window.open('./post-feed.html?event=' + encodeURIComponent(postId), '_blank');
+      return true;
    }

    function handleComposerQuoteIntent({ postId, postPubkey }) {
@@ -335,11 +327,14 @@ import { initPostCards } from './js/post-interactions2.mjs';
      publishEvent,
      getPubkey,
      ndkFetchEvents,
+      queryCache,
      fetchCachedProfile,
      storeProfile,
      walletPayInvoice,
      walletSendNutzap,
      walletFetchMintList,
+      walletGetBalance,
+      walletGetMints,
      getRelayData,
      getUserSettings,
      patchUserSettings,
@@ -348,6 +343,12 @@ import { initPostCards } from './js/post-interactions2.mjs';
      onMuteIntent: handleMuteIntent
    });

+    // Disable inline comment rendering — the new feed shows posts only.
+    // Comments are viewed on the post-feed.html thread page (new tab).
+    if (typeof cards.setCommentsVisible === 'function') {
+      cards.setCommentsVisible(false);
+    }
+
    function initHamburgerMenu() {
      hamburgerInstance = new HamburgerMorphing('#divSvgHam', {
        foreground: 'var(--primary-color)',
@@ -639,12 +640,6 @@ import { initPostCards } from './js/post-interactions2.mjs';

        document.getElementById('logoutButton')?.addEventListener('click', logout);

-        document.getElementById('commentsToggleButton')?.addEventListener('click', () => {
-          const nextVisible = !cards.getCommentsVisible();
-          cards.setCommentsVisible(nextVisible);
-          document.getElementById('commentsToggleButton')?.classList.toggle('dimmed', !nextVisible);
-        });
-
        btnSeeMore.addEventListener('click', () => {
          displayCount += SEE_MORE_INCREMENT;
          renderFeed();
@@ -720,7 +715,7 @@ import { initPostCards } from './js/post-interactions2.mjs';

      } catch (error) {
        console.error('[feed.html] Initialization failed:', error);
-        divBody.innerHTML = `<div style="text-align:center;padding:50px;"><div style="font-size:24px;margin-bottom:20px;color:red;">❌ Error</div><div style="font-size:16px;">${error.message}</div></div>`;
+        divBody.innerHTML = `<div style="text-align:center;padding:50px;"><div style="font-size:24px;margin-bottom:20px;color:var(--primary-color);">❌ Error</div><div style="font-size:16px;color:var(--muted-color);">${error.message}</div></div>`;
      }
    })();
  </script>
--- a/www/js/post-interactions2.mjs
+++ b/www/js/post-interactions2.mjs
@@ -69,7 +69,9 @@ export function initPostCards(deps = {}) {

  function handleUpdate(postId, state, event, currentPubkey) {
    interactions.updateInteractionBar(postId, state);
-    if (event && event.kind === 1 && interactions.isCommentEvent?.(event, postId)) {
+    // Only render inline comments if comments are visible (the new feed
+    // sets commentsVisible=false to avoid inline reply rendering).
+    if (event && event.kind === 1 && interactions.isCommentEvent?.(event, postId) && interactions.getCommentsVisible?.()) {
      interactions.addCommentToPost(postId, {
        id: event.id,
        pubkey: event.pubkey,
--- a/www/js/version.json
+++ b/www/js/version.json
@@ -1,5 +1,5 @@
 {
-  "VERSION": "v0.7.30",
-  "VERSION_NUMBER": "0.7.30",
-  "BUILD_DATE": "2026-06-26T00:48:38.325Z"
+  "VERSION": "v0.7.33",
+  "VERSION_NUMBER": "0.7.33",
+  "BUILD_DATE": "2026-06-26T01:02:21.256Z"
 }
--- a/www/post-feed.html
+++ b/www/post-feed.html
@@ -177,7 +177,7 @@

  <div id="divBody">
    <div id="divBackBar">
-      <a id="btnBack" href="./feed2.html" title="Back to feed">← Feed</a>
+      <a id="btnBack" href="./feed.html" title="Back to feed">← Feed</a>
    </div>
    <div id="divHint">Loading thread…</div>
    <div id="divThread">