From 3a2846ea70ca79338b915801cb01e64d0818f8a7 Mon Sep 17 00:00:00 2001
From: Grace Kind <gracekind400@gmail.com>
Date: Fri, 8 May 2026 18:16:50 -0500
Subject: [PATCH] Use post feed template for quote posts

---
 package.json                                  |  2 +-
 src/js/views/postQuotes.view.js               | 75 +++++--------------
 tests/e2e/specs/views/postQuotes.view.test.js |  2 +-
 3 files changed, 22 insertions(+), 57 deletions(-)

diff --git a/package.json b/package.json
index f3b1b23a..2de75934 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "impro",
-  "version": "0.11.79",
+  "version": "0.11.80",
   "type": "module",
   "scripts": {
     "start": "rm -rf build && NODE_ENV=development eleventy --serve",
diff --git a/src/js/views/postQuotes.view.js b/src/js/views/postQuotes.view.js
index 915cdb41..57df953b 100644
--- a/src/js/views/postQuotes.view.js
+++ b/src/js/views/postQuotes.view.js
@@ -3,10 +3,8 @@ import { View } from "./view.js";
 import { mainLayoutTemplate } from "/js/templates/mainLayout.template.js";
 import { headerTemplate } from "/js/templates/header.template.js";
 import { formatLargeNumber } from "/js/utils.js";
-import { smallPostTemplate } from "/js/templates/smallPost.template.js";
-import { postSkeletonTemplate } from "/js/templates/postSkeleton.template.js";
+import { postFeedTemplate } from "/js/templates/postFeed.template.js";
 import { PostInteractionHandler } from "/js/postInteractionHandler.js";
-import "/js/components/infinite-scroll-container.js";
 
 class PostQuotesView extends View {
   async render({
@@ -42,44 +40,6 @@ class PostQuotesView extends View {
       },
     );
 
-    function quotesListTemplate({ quotes, hasMore, currentUser }) {
-      if (!quotes || quotes.length === 0) {
-        return html`<div class="search-status-message">No quotes yet.</div>`;
-      }
-      return html`<infinite-scroll-container
-        @load-more=${async (e) => {
-          if (hasMore) {
-            await loadQuotes();
-            e.detail.resume();
-          }
-        }}
-      >
-        <div class="post-list">
-          ${quotes.map((quote) =>
-            smallPostTemplate({
-              post: quote,
-              currentUser,
-              isAuthenticated,
-              showReplyToLabel: !!quote.record?.reply,
-              replyToAuthor: quote.record?.reply?.parentAuthor,
-              isUserPost: currentUser?.did === quote.author?.did,
-              postInteractionHandler,
-              pluginService,
-            }),
-          )}
-        </div>
-        ${hasMore
-          ? Array.from({ length: 5 }).map(() => postSkeletonTemplate())
-          : ""}
-      </infinite-scroll-container>`;
-    }
-
-    function quotesSkeletonTemplate() {
-      return html`<div class="post-list">
-        ${Array.from({ length: 10 }).map(() => postSkeletonTemplate())}
-      </div>`;
-    }
-
     function quotesErrorTemplate({ error }) {
       console.error(error);
       return html`<div class="error-state">
@@ -98,7 +58,6 @@ class PostQuotesView extends View {
       const post = dataLayer.selectors.getPost(postUri);
       const postQuotesRequestStatus =
         dataLayer.requests.getStatus("loadPostQuotes");
-      const hasMore = postQuotes?.cursor ? true : false;
 
       const subtitle = post?.quoteCount
         ? `${formatLargeNumber(post.quoteCount)} ${
@@ -106,6 +65,14 @@ class PostQuotesView extends View {
           }`
         : null;
 
+      // Format as feed for postFeedTemplate
+      const postQuotesFeed = postQuotes
+        ? {
+            feed: postQuotes.posts.map((quote) => ({ post: quote })),
+            cursor: postQuotes.cursor,
+          }
+        : null;
+
       render(
         html`<div id="post-quotes-view">
           ${mainLayoutTemplate({
@@ -121,21 +88,19 @@ class PostQuotesView extends View {
                 subtitle,
               })}
               <main style="position: relative;">
-                ${(() => {
-                  if (postQuotesRequestStatus.error) {
-                    return quotesErrorTemplate({
+                ${postQuotesRequestStatus.error
+                  ? quotesErrorTemplate({
                       error: postQuotesRequestStatus.error,
-                    });
-                  } else if (postQuotes && postQuotes.posts) {
-                    return quotesListTemplate({
-                      quotes: postQuotes.posts,
+                    })
+                  : postFeedTemplate({
+                      feed: postQuotesFeed,
                       currentUser,
-                      hasMore,
-                    });
-                  } else {
-                    return quotesSkeletonTemplate();
-                  }
-                })()}
+                      isAuthenticated,
+                      onLoadMore: loadQuotes,
+                      postInteractionHandler,
+                      emptyMessage: "No quotes yet.",
+                      pluginService,
+                    })}
               </main>`,
           })}
         </div>`,
diff --git a/tests/e2e/specs/views/postQuotes.view.test.js b/tests/e2e/specs/views/postQuotes.view.test.js
index ba9d72b4..a5000561 100644
--- a/tests/e2e/specs/views/postQuotes.view.test.js
+++ b/tests/e2e/specs/views/postQuotes.view.test.js
@@ -100,7 +100,7 @@ test.describe("Post quotes view", () => {
       { timeout: 10000 },
     );
 
-    await expect(view.locator(".search-status-message")).toContainText(
+    await expect(view.locator(".feed-end-message")).toContainText(
       "No quotes yet.",
       { timeout: 10000 },
     );
-- 
2.51.2