From 718e620d8a6222dbb595ff52aecc3932df0860e2 Mon Sep 17 00:00:00 2001
From: Hong Minhee <hong@minhee.org>
Date: Sun, 17 May 2026 03:28:59 +0900
Subject: [PATCH 01/11] Add public reaction list pages for each post

Four new SSR pages let visitors see who reacted to a local post:
/@:handle/:id/likes lists likers, /shares lists boosters,
/reactions/:emoji lists accounts that used that emoji, and /quotes
lists posts that quote it.  Each page features the original post
above its list, with ?page-based pagination at 100 entries per
page.  The per-post like, share, quote, and reaction-emoji
indicators on the profile feed and post permalink page now link
into these pages for local posts; remote posts keep displaying
the counts as plain text.

The /shares and /quotes lists filter to public/unlisted entries
so private boosts and private accepted quotes aren't exposed on
the public HTML.

Assisted-by: Codex:gpt-5.5
---
 CHANGES.md                           |  11 +
 src/components/Post.tsx              | 127 ++++++--
 src/components/PublicAccountList.tsx |  79 +++++
 src/pages/profile/index.tsx          |  90 +++---
 src/pages/profile/postReactions.tsx  | 459 +++++++++++++++++++++++++++
 src/pages/profile/profilePost.tsx    |  75 +++--
 src/pages/tags/index.tsx             |  35 +-
 7 files changed, 755 insertions(+), 121 deletions(-)
 create mode 100644 src/components/PublicAccountList.tsx
 create mode 100644 src/pages/profile/postReactions.tsx

diff --git a/CHANGES.md b/CHANGES.md
index 389d5729..13b7abe2 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -235,6 +235,17 @@ To be released.
         are removed; UnoCSS emits a single _src/public/uno.css_ whose
         URL is cache-busted by file mtime.
 
+ -  Added public reaction list pages anchored to each local post:
+    `/@:handle/:id/likes` lists the accounts that liked the post,
+    `/@:handle/:id/shares` lists the accounts that boosted it,
+    `/@:handle/:id/reactions/:emoji` lists the accounts that reacted with
+    a specific emoji, and `/@:handle/:id/quotes` lists the posts that
+    quote it.  Each page features the original post above the list.  On
+    the profile feed and post permalink page, the per-post like, share,
+    quote, and reaction-emoji indicators now link into these pages for
+    local posts; remote posts continue to display the counts as plain
+    text.
+
  -  Added avatar and header image upload to the admin account creation and
     editing forms, with drag-and-drop support and in-page image preview.
     Files are stored using the same storage backend as the Mastodon-compatible
diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index 44e60170..5aba649c 100644
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -4,6 +4,7 @@ import { proxyUrl } from "../media-proxy";
 import type { PreviewCard } from "../previewcard";
 import type {
   Account,
+  AccountOwner,
   Medium as DbMedium,
   Poll as DbPoll,
   Post as DbPost,
@@ -11,36 +12,38 @@ import type {
   Reaction,
 } from "../schema";
 
+export type PostAccount = Account & { owner?: AccountOwner | null };
+
 export interface PostProps {
   readonly post: DbPost & {
-    account: Account;
+    account: PostAccount;
     media: DbMedium[];
     poll: (DbPoll & { options: PollOption[] }) | null;
     sharing:
       | (DbPost & {
-          account: Account;
+          account: PostAccount;
           media: DbMedium[];
           poll: (DbPoll & { options: PollOption[] }) | null;
-          replyTarget: (DbPost & { account: Account }) | null;
+          replyTarget: (DbPost & { account: PostAccount }) | null;
           quoteTarget:
             | (DbPost & {
-                account: Account;
+                account: PostAccount;
                 media: DbMedium[];
                 poll: (DbPoll & { options: PollOption[] }) | null;
-                replyTarget: (DbPost & { account: Account }) | null;
+                replyTarget: (DbPost & { account: PostAccount }) | null;
                 reactions: Reaction[];
               })
             | null;
           reactions: Reaction[];
         })
       | null;
-    replyTarget: (DbPost & { account: Account }) | null;
+    replyTarget: (DbPost & { account: PostAccount }) | null;
     quoteTarget:
       | (DbPost & {
-          account: Account;
+          account: PostAccount;
           media: DbMedium[];
           poll: (DbPoll & { options: PollOption[] }) | null;
-          replyTarget: (DbPost & { account: Account }) | null;
+          replyTarget: (DbPost & { account: PostAccount }) | null;
           reactions: Reaction[];
         })
       | null;
@@ -85,6 +88,8 @@ export function Post({
   );
   const authorUrl = account.url ?? account.iri;
   const avatar = proxyUrl(account.avatarUrl, baseUrl);
+  const localPermalink =
+    account.owner == null ? null : `/@${account.owner.handle}/${post.id}`;
   const wrapperClass = quoted
     ? "rounded-lg border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-800 dark:bg-neutral-900/60"
     : featured
@@ -188,19 +193,37 @@ export function Post({
         {post.likesCount != null && post.likesCount > 0 && (
           <>
             <span aria-hidden="true">·</span>
-            <span class="inline-flex items-center gap-1">
-              <span class="i-lucide-heart" aria-hidden="true" />
-              {numberFormatter.format(post.likesCount)}
-            </span>
+            <CountLink
+              localPermalink={localPermalink}
+              path="/likes"
+              icon="i-lucide-heart"
+              count={post.likesCount}
+              label="Liked by"
+            />
           </>
         )}
         {post.sharesCount != null && post.sharesCount > 0 && (
           <>
             <span aria-hidden="true">·</span>
-            <span class="inline-flex items-center gap-1">
-              <span class="i-lucide-repeat-2" aria-hidden="true" />
-              {numberFormatter.format(post.sharesCount)}
-            </span>
+            <CountLink
+              localPermalink={localPermalink}
+              path="/shares"
+              icon="i-lucide-repeat-2"
+              count={post.sharesCount}
+              label="Shared by"
+            />
+          </>
+        )}
+        {post.quotesCount != null && post.quotesCount > 0 && (
+          <>
+            <span aria-hidden="true">·</span>
+            <CountLink
+              localPermalink={localPermalink}
+              path="/quotes"
+              icon="i-lucide-quote"
+              count={post.quotesCount}
+              label="Quoted by"
+            />
           </>
         )}
         {post.reactions.length > 0 && (
@@ -208,17 +231,30 @@ export function Post({
             <span aria-hidden="true">·</span>
             <span class="inline-flex flex-wrap items-center gap-1">
               {Object.entries(groupByEmojis(post.reactions, baseUrl)).map(
-                ([emoji, { src, count }]) =>
-                  src == null ? (
-                    <span title={`${emoji} × ${count}`}>{emoji}</span>
+                ([emoji, { src, count }]) => {
+                  const inner =
+                    src == null ? (
+                      <span>{emoji}</span>
+                    ) : (
+                      <img
+                        src={src}
+                        alt={emoji}
+                        class="inline h-4 align-text-bottom"
+                      />
+                    );
+                  const title = `${emoji} × ${count}`;
+                  return localPermalink == null ? (
+                    <span title={title}>{inner}</span>
                   ) : (
-                    <img
-                      src={src}
-                      alt={emoji}
-                      title={`${emoji} × ${count}`}
-                      class="inline h-4 align-text-bottom"
-                    />
-                  ),
+                    <a
+                      href={`${localPermalink}/reactions/${encodeURIComponent(emoji)}`}
+                      title={title}
+                      class="hover:text-brand-700 dark:hover:text-brand-400"
+                    >
+                      {inner}
+                    </a>
+                  );
+                },
               )}
             </span>
           </>
@@ -228,6 +264,41 @@ export function Post({
   );
 }
 
+interface CountLinkProps {
+  readonly localPermalink: string | null;
+  readonly path: string;
+  readonly icon: string;
+  readonly count: number;
+  readonly label: string;
+}
+
+function CountLink({
+  localPermalink,
+  path,
+  icon,
+  count,
+  label,
+}: CountLinkProps) {
+  const inner = (
+    <>
+      <span class={icon} aria-hidden="true" />
+      {numberFormatter.format(count)}
+    </>
+  );
+  if (localPermalink == null) {
+    return <span class="inline-flex items-center gap-1">{inner}</span>;
+  }
+  return (
+    <a
+      href={`${localPermalink}${path}`}
+      title={`${label} ${numberFormatter.format(count)}`}
+      class="inline-flex items-center gap-1 hover:text-brand-700 dark:hover:text-brand-400"
+    >
+      {inner}
+    </a>
+  );
+}
+
 function groupByEmojis(
   reactions: Reaction[],
   baseUrl: URL | string,
@@ -255,10 +326,10 @@ interface PostContentProps {
     poll: (DbPoll & { options: PollOption[] }) | null;
     quoteTarget:
       | (DbPost & {
-          account: Account;
+          account: PostAccount;
           media: DbMedium[];
           poll: (DbPoll & { options: PollOption[] }) | null;
-          replyTarget: (DbPost & { account: Account }) | null;
+          replyTarget: (DbPost & { account: PostAccount }) | null;
           reactions: Reaction[];
         })
       | null;
diff --git a/src/components/PublicAccountList.tsx b/src/components/PublicAccountList.tsx
new file mode 100644
index 00000000..65b79faa
--- /dev/null
+++ b/src/components/PublicAccountList.tsx
@@ -0,0 +1,79 @@
+import { escape } from "es-toolkit";
+
+import { renderCustomEmojis } from "../custom-emoji";
+import { proxyUrl } from "../media-proxy";
+import type { Account } from "../schema";
+import { sanitizeHtml } from "../xss";
+
+export interface PublicAccountListProps {
+  readonly accounts: readonly Account[];
+  readonly baseUrl: URL | string;
+}
+
+export function PublicAccountList({
+  accounts,
+  baseUrl,
+}: PublicAccountListProps) {
+  return (
+    <ul class="mt-4 divide-y divide-neutral-200 dark:divide-neutral-800">
+      {accounts.map((account) => (
+        <li>
+          <PublicAccountItem account={account} baseUrl={baseUrl} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+interface PublicAccountItemProps {
+  readonly account: Account;
+  readonly baseUrl: URL | string;
+}
+
+function PublicAccountItem({ account, baseUrl }: PublicAccountItemProps) {
+  const nameHtml = renderCustomEmojis(
+    escape(account.name),
+    account.emojis,
+    baseUrl,
+  );
+  const bioHtml = renderCustomEmojis(
+    sanitizeHtml(account.bioHtml ?? ""),
+    account.emojis,
+    baseUrl,
+  );
+  const href = account.url ?? account.iri;
+  const avatar = proxyUrl(account.avatarUrl, baseUrl);
+  return (
+    <article class="flex items-start gap-4 py-6">
+      <a href={href} class="shrink-0">
+        {avatar ? (
+          <img
+            src={avatar}
+            alt=""
+            width={48}
+            height={48}
+            class="size-12 rounded-full object-cover"
+          />
+        ) : (
+          <span class="block size-12 rounded-full bg-neutral-200 dark:bg-neutral-800" />
+        )}
+      </a>
+      <div class="min-w-0 flex-1">
+        <a
+          href={href}
+          class="block font-semibold text-neutral-900 hover:underline dark:text-neutral-100"
+          dangerouslySetInnerHTML={{ __html: nameHtml }}
+        />
+        <p class="select-all text-xs text-neutral-500 dark:text-neutral-400">
+          {account.handle}
+        </p>
+        {bioHtml && (
+          <div
+            class="prose prose-sm prose-neutral dark:prose-invert prose-a:text-brand-700 dark:prose-a:text-brand-400 mt-2 max-w-none break-words"
+            dangerouslySetInnerHTML={{ __html: bioHtml }}
+          />
+        )}
+      </div>
+    </article>
+  );
+}
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index 3f3ca99b..1e3b2fb6 100644
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -3,7 +3,7 @@ import { Hono } from "hono";
 import xss from "xss";
 
 import { Layout } from "../../components/Layout.tsx";
-import { Post as PostView } from "../../components/Post.tsx";
+import { type PostAccount, Post as PostView } from "../../components/Post.tsx";
 import { Profile } from "../../components/Profile.tsx";
 import { db } from "../../db.ts";
 import {
@@ -18,10 +18,12 @@ import {
   type Reaction,
 } from "../../schema.ts";
 import { isUuid } from "../../uuid.ts";
+import postReactions from "./postReactions.tsx";
 import profilePost from "./profilePost.tsx";
 
 const profile = new Hono();
 
+profile.route("/:id{[-a-f0-9]+}", postReactions);
 profile.route("/:id{[-a-f0-9]+}", profilePost);
 
 const PAGE_SIZE = 30;
@@ -74,34 +76,34 @@ profile.get<"/:handle">(async (c) => {
     limit: PAGE_SIZE,
     offset: (page - 1) * PAGE_SIZE,
     with: {
-      account: true,
+      account: { with: { owner: true } },
       media: true,
       poll: { with: { options: true } },
       sharing: {
         with: {
-          account: true,
+          account: { with: { owner: true } },
           media: true,
           poll: { with: { options: true } },
-          replyTarget: { with: { account: true } },
+          replyTarget: { with: { account: { with: { owner: true } } } },
           quoteTarget: {
             with: {
-              account: true,
+              account: { with: { owner: true } },
               media: true,
               poll: { with: { options: true } },
-              replyTarget: { with: { account: true } },
+              replyTarget: { with: { account: { with: { owner: true } } } },
               reactions: true,
             },
           },
           reactions: true,
         },
       },
-      replyTarget: { with: { account: true } },
+      replyTarget: { with: { account: { with: { owner: true } } } },
       quoteTarget: {
         with: {
-          account: true,
+          account: { with: { owner: true } },
           media: true,
           poll: { with: { options: true } },
-          replyTarget: { with: { account: true } },
+          replyTarget: { with: { account: { with: { owner: true } } } },
           reactions: true,
         },
       },
@@ -116,34 +118,40 @@ profile.get<"/:handle">(async (c) => {
           with: {
             post: {
               with: {
-                account: true,
+                account: { with: { owner: true } },
                 media: true,
                 poll: { with: { options: true } },
                 sharing: {
                   with: {
-                    account: true,
+                    account: { with: { owner: true } },
                     media: true,
                     poll: { with: { options: true } },
-                    replyTarget: { with: { account: true } },
+                    replyTarget: {
+                      with: { account: { with: { owner: true } } },
+                    },
                     quoteTarget: {
                       with: {
-                        account: true,
+                        account: { with: { owner: true } },
                         media: true,
                         poll: { with: { options: true } },
-                        replyTarget: { with: { account: true } },
+                        replyTarget: {
+                          with: { account: { with: { owner: true } } },
+                        },
                         reactions: true,
                       },
                     },
                     reactions: true,
                   },
                 },
-                replyTarget: { with: { account: true } },
+                replyTarget: { with: { account: { with: { owner: true } } } },
                 quoteTarget: {
                   with: {
-                    account: true,
+                    account: { with: { owner: true } },
                     media: true,
                     poll: { with: { options: true } },
-                    replyTarget: { with: { account: true } },
+                    replyTarget: {
+                      with: { account: { with: { owner: true } } },
+                    },
                     reactions: true,
                   },
                 },
@@ -230,34 +238,34 @@ profile.get("/tagged/:tag", async (c) => {
     limit: PAGE_SIZE,
     offset: (page - 1) * PAGE_SIZE,
     with: {
-      account: true,
+      account: { with: { owner: true } },
       media: true,
       poll: { with: { options: true } },
       sharing: {
         with: {
-          account: true,
+          account: { with: { owner: true } },
           media: true,
           poll: { with: { options: true } },
-          replyTarget: { with: { account: true } },
+          replyTarget: { with: { account: { with: { owner: true } } } },
           quoteTarget: {
             with: {
-              account: true,
+              account: { with: { owner: true } },
               media: true,
               poll: { with: { options: true } },
-              replyTarget: { with: { account: true } },
+              replyTarget: { with: { account: { with: { owner: true } } } },
               reactions: true,
             },
           },
           reactions: true,
         },
       },
-      replyTarget: { with: { account: true } },
+      replyTarget: { with: { account: { with: { owner: true } } } },
       quoteTarget: {
         with: {
-          account: true,
+          account: { with: { owner: true } },
           media: true,
           poll: { with: { options: true } },
-          replyTarget: { with: { account: true } },
+          replyTarget: { with: { account: { with: { owner: true } } } },
           reactions: true,
         },
       },
@@ -288,68 +296,68 @@ interface ProfilePageProps {
   readonly accountOwner: AccountOwner & { account: Account };
   readonly tag?: string;
   readonly posts: (Post & {
-    account: Account;
+    account: PostAccount;
     media: Medium[];
     poll: (Poll & { options: PollOption[] }) | null;
     sharing:
       | (Post & {
-          account: Account;
+          account: PostAccount;
           media: Medium[];
           poll: (Poll & { options: PollOption[] }) | null;
-          replyTarget: (Post & { account: Account }) | null;
+          replyTarget: (Post & { account: PostAccount }) | null;
           quoteTarget:
             | (Post & {
-                account: Account;
+                account: PostAccount;
                 media: Medium[];
                 poll: (Poll & { options: PollOption[] }) | null;
-                replyTarget: (Post & { account: Account }) | null;
+                replyTarget: (Post & { account: PostAccount }) | null;
                 reactions: Reaction[];
               })
             | null;
           reactions: Reaction[];
         })
       | null;
-    replyTarget: (Post & { account: Account }) | null;
+    replyTarget: (Post & { account: PostAccount }) | null;
     quoteTarget:
       | (Post & {
-          account: Account;
+          account: PostAccount;
           media: Medium[];
           poll: (Poll & { options: PollOption[] }) | null;
-          replyTarget: (Post & { account: Account }) | null;
+          replyTarget: (Post & { account: PostAccount }) | null;
           reactions: Reaction[];
         })
       | null;
     reactions: Reaction[];
   })[];
   readonly pinnedPosts: (Post & {
-    account: Account;
+    account: PostAccount;
     media: Medium[];
     poll: (Poll & { options: PollOption[] }) | null;
     sharing:
       | (Post & {
-          account: Account;
+          account: PostAccount;
           media: Medium[];
           poll: (Poll & { options: PollOption[] }) | null;
-          replyTarget: (Post & { account: Account }) | null;
+          replyTarget: (Post & { account: PostAccount }) | null;
           quoteTarget:
             | (Post & {
-                account: Account;
+                account: PostAccount;
                 media: Medium[];
                 poll: (Poll & { options: PollOption[] }) | null;
-                replyTarget: (Post & { account: Account }) | null;
+                replyTarget: (Post & { account: PostAccount }) | null;
                 reactions: Reaction[];
               })
             | null;
           reactions: Reaction[];
         })
       | null;
-    replyTarget: (Post & { account: Account }) | null;
+    replyTarget: (Post & { account: PostAccount }) | null;
     quoteTarget:
       | (Post & {
-          account: Account;
+          account: PostAccount;
           media: Medium[];
           poll: (Poll & { options: PollOption[] }) | null;
-          replyTarget: (Post & { account: Account }) | null;
+          replyTarget: (Post & { account: PostAccount }) | null;
           reactions: Reaction[];
         })
       | null;
diff --git a/src/pages/profile/postReactions.tsx b/src/pages/profile/postReactions.tsx
new file mode 100644
index 00000000..7860ce29
--- /dev/null
+++ b/src/pages/profile/postReactions.tsx
@@ -0,0 +1,459 @@
+import { and, count, eq, isNull, or } from "drizzle-orm";
+import { type Context, Hono } from "hono";
+
+import { Layout } from "../../components/Layout.tsx";
+import { type PostAccount, Post as PostView } from "../../components/Post.tsx";
+import { PublicAccountList } from "../../components/PublicAccountList.tsx";
+import db from "../../db.ts";
+import {
+  type AccountOwner,
+  likes,
+  type Medium,
+  type Poll,
+  type PollOption,
+  type Post,
+  posts,
+  type Reaction,
+  reactions,
+} from "../../schema.ts";
+import { isUuid } from "../../uuid.ts";
+
+const PAGE_SIZE = 100;
+
+const postReactions = new Hono();
+
+type FeaturedPost = Post & {
+  account: PostAccount;
+  media: Medium[];
+  poll: (Poll & { options: PollOption[] }) | null;
+  sharing:
+    | (Post & {
+        account: PostAccount;
+        media: Medium[];
+        poll: (Poll & { options: PollOption[] }) | null;
+        replyTarget: (Post & { account: PostAccount }) | null;
+        quoteTarget:
+          | (Post & {
+              account: PostAccount;
+              media: Medium[];
+              poll: (Poll & { options: PollOption[] }) | null;
+              replyTarget: (Post & { account: PostAccount }) | null;
+              reactions: Reaction[];
+            })
+          | null;
+        reactions: Reaction[];
+      })
+    | null;
+  replyTarget: (Post & { account: PostAccount }) | null;
+  quoteTarget:
+    | (Post & {
+        account: PostAccount;
+        media: Medium[];
+        poll: (Poll & { options: PollOption[] }) | null;
+        replyTarget: (Post & { account: PostAccount }) | null;
+        reactions: Reaction[];
+      })
+    | null;
+  reactions: Reaction[];
+};
+
+async function loadLocalPost(c: Context): Promise<{
+  accountOwner: AccountOwner;
+  post: FeaturedPost;
+} | null> {
+  let handle = c.req.param("handle");
+  const postId = c.req.param("id");
+  if (handle == null || postId == null) return null;
+  if (!isUuid(postId)) return null;
+  if (handle.startsWith("@")) handle = handle.substring(1);
+  const accountOwner = await db.query.accountOwners.findFirst({
+    where: { handle: { eq: handle } },
+  });
+  if (accountOwner == null) return null;
+  const post = await db.query.posts.findFirst({
+    where: {
+      RAW: (posts, { and, eq, or }) =>
+        and(
+          eq(posts.accountId, accountOwner.id),
+          eq(posts.id, postId),
+          or(eq(posts.visibility, "public"), eq(posts.visibility, "unlisted")),
+        )!,
+    },
+    with: {
+      account: { with: { owner: true } },
+      media: true,
+      poll: { with: { options: true } },
+      sharing: {
+        with: {
+          account: { with: { owner: true } },
+          media: true,
+          poll: { with: { options: true } },
+          replyTarget: { with: { account: { with: { owner: true } } } },
+          quoteTarget: {
+            with: {
+              account: { with: { owner: true } },
+              media: true,
+              poll: { with: { options: true } },
+              replyTarget: {
+                with: { account: { with: { owner: true } } },
+              },
+              reactions: true,
+            },
+          },
+          reactions: true,
+        },
+      },
+      replyTarget: { with: { account: { with: { owner: true } } } },
+      quoteTarget: {
+        with: {
+          account: { with: { owner: true } },
+          media: true,
+          poll: { with: { options: true } },
+          replyTarget: { with: { account: { with: { owner: true } } } },
+          reactions: true,
+        },
+      },
+      reactions: true,
+    },
+  });
+  if (post == null) return null;
+  return { accountOwner, post };
+}
+
+function parsePage(c: Context): number | null {
+  const pageStr = c.req.query("page");
+  if (pageStr === undefined) return 1;
+  const parsed = Number.parseInt(pageStr, 10);
+  if (Number.isNaN(parsed) || parsed < 1) return null;
+  return parsed;
+}
+
+function paginationUrls(
+  page: number,
+  hasNext: boolean,
+): { newerUrl?: string; olderUrl?: string } {
+  return {
+    newerUrl: page > 1 ? `?page=${page - 1}` : undefined,
+    olderUrl: hasNext ? `?page=${page + 1}` : undefined,
+  };
+}
+
+const numberFormatter = new Intl.NumberFormat("en-US");
+
+postReactions.get("/likes", async (c) => {
+  const loaded = await loadLocalPost(c);
+  if (loaded == null) return c.notFound();
+  const { accountOwner, post } = loaded;
+  const page = parsePage(c);
+  if (page == null) return c.notFound();
+
+  const [{ total }] = await db
+    .select({ total: count() })
+    .from(likes)
+    .where(eq(likes.postId, post.id));
+  const maxPage = Math.max(1, Math.ceil(total / PAGE_SIZE));
+  if (page > maxPage) return c.notFound();
+
+  const rows = await db.query.likes.findMany({
+    where: { postId: { eq: post.id } },
+    orderBy: (likes, { desc }) => [desc(likes.created)],
+    limit: PAGE_SIZE,
+    offset: (page - 1) * PAGE_SIZE,
+    with: { account: true },
+  });
+
+  const { newerUrl, olderUrl } = paginationUrls(page, page * PAGE_SIZE < total);
+
+  return c.html(
+    <ReactionListPage
+      accountOwner={accountOwner}
+      post={post}
+      pageTitle="Liked by"
+      heading={
+        total === 1 ? "1 like" : `${numberFormatter.format(total)} likes`
+      }
+      baseUrl={c.req.url}
+      newerUrl={newerUrl}
+      olderUrl={olderUrl}
+    >
+      <PublicAccountList
+        accounts={rows.map((r) => r.account)}
+        baseUrl={c.req.url}
+      />
+    </ReactionListPage>,
+  );
+});
+
+postReactions.get("/shares", async (c) => {
+  const loaded = await loadLocalPost(c);
+  if (loaded == null) return c.notFound();
+  const { accountOwner, post } = loaded;
+  const page = parsePage(c);
+  if (page == null) return c.notFound();
+
+  const [{ total }] = await db
+    .select({ total: count() })
+    .from(posts)
+    .where(
+      and(
+        eq(posts.sharingId, post.id),
+        or(eq(posts.visibility, "public"), eq(posts.visibility, "unlisted")),
+      ),
+    );
+  const maxPage = Math.max(1, Math.ceil(total / PAGE_SIZE));
+  if (page > maxPage) return c.notFound();
+
+  const rows = await db.query.posts.findMany({
+    where: {
+      RAW: (posts, { and, eq, or }) =>
+        and(
+          eq(posts.sharingId, post.id),
+          or(eq(posts.visibility, "public"), eq(posts.visibility, "unlisted")),
+        )!,
+    },
+    orderBy: (posts, { desc }) => [desc(posts.id)],
+    limit: PAGE_SIZE,
+    offset: (page - 1) * PAGE_SIZE,
+    with: { account: true },
+  });
+
+  const { newerUrl, olderUrl } = paginationUrls(page, page * PAGE_SIZE < total);
+
+  return c.html(
+    <ReactionListPage
+      accountOwner={accountOwner}
+      post={post}
+      pageTitle="Shared by"
+      heading={
+        total === 1 ? "1 share" : `${numberFormatter.format(total)} shares`
+      }
+      baseUrl={c.req.url}
+      newerUrl={newerUrl}
+      olderUrl={olderUrl}
+    >
+      <PublicAccountList
+        accounts={rows.map((r) => r.account)}
+        baseUrl={c.req.url}
+      />
+    </ReactionListPage>,
+  );
+});
+
+postReactions.get("/reactions/:emoji", async (c) => {
+  const emoji = c.req.param("emoji");
+  if (emoji == null || emoji === "") return c.notFound();
+  const loaded = await loadLocalPost(c);
+  if (loaded == null) return c.notFound();
+  const { accountOwner, post } = loaded;
+  const page = parsePage(c);
+  if (page == null) return c.notFound();
+
+  const [{ total }] = await db
+    .select({ total: count() })
+    .from(reactions)
+    .where(and(eq(reactions.postId, post.id), eq(reactions.emoji, emoji)));
+  if (total < 1) return c.notFound();
+  const maxPage = Math.max(1, Math.ceil(total / PAGE_SIZE));
+  if (page > maxPage) return c.notFound();
+
+  const rows = await db.query.reactions.findMany({
+    where: { postId: { eq: post.id }, emoji: { eq: emoji } },
+    orderBy: (reactions, { desc }) => [desc(reactions.created)],
+    limit: PAGE_SIZE,
+    offset: (page - 1) * PAGE_SIZE,
+    with: { account: true },
+  });
+
+  const { newerUrl, olderUrl } = paginationUrls(page, page * PAGE_SIZE < total);
+
+  return c.html(
+    <ReactionListPage
+      accountOwner={accountOwner}
+      post={post}
+      pageTitle={`Reacted ${emoji} by`}
+      heading={
+        total === 1
+          ? `1 reaction with ${emoji}`
+          : `${numberFormatter.format(total)} reactions with ${emoji}`
+      }
+      baseUrl={c.req.url}
+      newerUrl={newerUrl}
+      olderUrl={olderUrl}
+    >
+      <PublicAccountList
+        accounts={rows.map((r) => r.account)}
+        baseUrl={c.req.url}
+      />
+    </ReactionListPage>,
+  );
+});
+
+postReactions.get("/quotes", async (c) => {
+  const loaded = await loadLocalPost(c);
+  if (loaded == null) return c.notFound();
+  const { accountOwner, post } = loaded;
+  const page = parsePage(c);
+  if (page == null) return c.notFound();
+
+  const [{ total }] = await db
+    .select({ total: count() })
+    .from(posts)
+    .where(
+      and(
+        eq(posts.quoteTargetId, post.id),
+        or(eq(posts.quoteState, "accepted"), isNull(posts.quoteState)),
+        isNull(posts.sharingId),
+        or(eq(posts.visibility, "public"), eq(posts.visibility, "unlisted")),
+      ),
+    );
+  const maxPage = Math.max(1, Math.ceil(total / PAGE_SIZE));
+  if (page > maxPage) return c.notFound();
+
+  const quoteRows = await db.query.posts.findMany({
+    where: {
+      RAW: (posts, { and, eq, isNull, or }) =>
+        and(
+          eq(posts.quoteTargetId, post.id),
+          or(eq(posts.quoteState, "accepted"), isNull(posts.quoteState)),
+          isNull(posts.sharingId),
+          or(eq(posts.visibility, "public"), eq(posts.visibility, "unlisted")),
+        )!,
+    },
+    orderBy: (posts, { desc }) => [desc(posts.id)],
+    limit: PAGE_SIZE,
+    offset: (page - 1) * PAGE_SIZE,
+    with: {
+      account: { with: { owner: true } },
+      media: true,
+      poll: { with: { options: true } },
+      sharing: {
+        with: {
+          account: { with: { owner: true } },
+          media: true,
+          poll: { with: { options: true } },
+          replyTarget: { with: { account: { with: { owner: true } } } },
+          quoteTarget: {
+            with: {
+              account: { with: { owner: true } },
+              media: true,
+              poll: { with: { options: true } },
+              replyTarget: {
+                with: { account: { with: { owner: true } } },
+              },
+              reactions: true,
+            },
+          },
+          reactions: true,
+        },
+      },
+      replyTarget: { with: { account: { with: { owner: true } } } },
+      quoteTarget: {
+        with: {
+          account: { with: { owner: true } },
+          media: true,
+          poll: { with: { options: true } },
+          replyTarget: { with: { account: { with: { owner: true } } } },
+          reactions: true,
+        },
+      },
+      reactions: true,
+    },
+  });
+
+  const { newerUrl, olderUrl } = paginationUrls(page, page * PAGE_SIZE < total);
+
+  return c.html(
+    <ReactionListPage
+      accountOwner={accountOwner}
+      post={post}
+      pageTitle="Quoted by"
+      heading={
+        total === 1 ? "1 quote" : `${numberFormatter.format(total)} quotes`
+      }
+      baseUrl={c.req.url}
+      newerUrl={newerUrl}
+      olderUrl={olderUrl}
+    >
+      <div class="mt-2 divide-y divide-neutral-200 dark:divide-neutral-800">
+        {quoteRows.map((q) => (
+          <PostView post={q} baseUrl={c.req.url} />
+        ))}
+      </div>
+    </ReactionListPage>,
+  );
+});
+
+interface ReactionListPageProps {
+  readonly accountOwner: AccountOwner;
+  readonly post: FeaturedPost;
+  readonly pageTitle: string;
+  readonly heading: string;
+  readonly baseUrl: URL | string;
+  readonly newerUrl?: string;
+  readonly olderUrl?: string;
+  readonly children?: unknown;
+}
+
+function ReactionListPage({
+  accountOwner,
+  post,
+  pageTitle,
+  heading,
+  baseUrl,
+  newerUrl,
+  olderUrl,
+  children,
+}: ReactionListPageProps) {
+  const summary =
+    post.summary ??
+    ((post.content ?? "").length > 30
+      ? `${(post.content ?? "").substring(0, 30)}…`
+      : (post.content ?? ""));
+  return (
+    <Layout
+      title={`${pageTitle}: ${summary} — ${post.account.name}`}
+      shortTitle={pageTitle}
+      description={post.summary ?? post.content}
+      imageUrl={post.account.avatarUrl}
+      themeColor={accountOwner.themeColor}
+    >
+      <main class="mx-auto w-full max-w-2xl px-4 py-8 sm:py-10">
+        <PostView post={post} featured={true} baseUrl={baseUrl} />
+        <section class="mt-8">
+          <h2 class="text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
+            {heading}
+          </h2>
+          {children}
+        </section>
+        {(newerUrl || olderUrl) && (
+          <nav class="mt-8 flex items-center justify-between gap-4">
+            <div>
+              {newerUrl && (
+                <a
+                  href={newerUrl}
+                  class="inline-flex items-center gap-1 text-sm text-neutral-600 hover:text-brand-700 dark:text-neutral-400 dark:hover:text-brand-400"
+                >
+                  <span class="i-lucide-arrow-left" aria-hidden="true" />
+                  Newer
+                </a>
+              )}
+            </div>
+            <div>
+              {olderUrl && (
+                <a
+                  href={olderUrl}
+                  class="inline-flex items-center gap-1 text-sm text-neutral-600 hover:text-brand-700 dark:text-neutral-400 dark:hover:text-brand-400"
+                >
+                  Older
+                  <span class="i-lucide-arrow-right" aria-hidden="true" />
+                </a>
+              )}
+            </div>
+          </nav>
+        )}
+      </main>
+    </Layout>
+  );
+}
+
+export default postReactions;
diff --git a/src/pages/profile/profilePost.tsx b/src/pages/profile/profilePost.tsx
index 3f5435aa..00101c1c 100644
--- a/src/pages/profile/profilePost.tsx
+++ b/src/pages/profile/profilePost.tsx
@@ -1,10 +1,9 @@
 import { Hono } from "hono";
 
 import { Layout } from "../../components/Layout.tsx";
-import { Post as PostView } from "../../components/Post.tsx";
+import { type PostAccount, Post as PostView } from "../../components/Post.tsx";
 import db from "../../db.ts";
 import {
-  type Account,
   type AccountOwner,
   type Medium,
   type Poll,
@@ -35,34 +34,36 @@ profilePost.get<"/:handle{@[^/]+}/:id{[-a-f0-9]+}">(async (c) => {
         )!,
     },
     with: {
-      account: true,
+      account: { with: { owner: true } },
       media: true,
       poll: { with: { options: true } },
       sharing: {
         with: {
-          account: true,
+          account: { with: { owner: true } },
           media: true,
           poll: { with: { options: true } },
-          replyTarget: { with: { account: true } },
+          replyTarget: { with: { account: { with: { owner: true } } } },
           quoteTarget: {
             with: {
-              account: true,
+              account: { with: { owner: true } },
               media: true,
               poll: { with: { options: true } },
-              replyTarget: { with: { account: true } },
+              replyTarget: {
+                with: { account: { with: { owner: true } } },
+              },
               reactions: true,
             },
           },
           reactions: true,
         },
       },
-      replyTarget: { with: { account: true } },
+      replyTarget: { with: { account: { with: { owner: true } } } },
       quoteTarget: {
         with: {
-          account: true,
+          account: { with: { owner: true } },
           media: true,
           poll: { with: { options: true } },
-          replyTarget: { with: { account: true } },
+          replyTarget: { with: { account: { with: { owner: true } } } },
           reactions: true,
         },
       },
@@ -71,34 +72,40 @@ profilePost.get<"/:handle{@[^/]+}/:id{[-a-f0-9]+}">(async (c) => {
         orderBy: (posts, { desc }) => [desc(posts.published)],
         limit: 20,
         with: {
-          account: true,
+          account: { with: { owner: true } },
           media: true,
           poll: { with: { options: true } },
           sharing: {
             with: {
-              account: true,
+              account: { with: { owner: true } },
               media: true,
               poll: { with: { options: true } },
-              replyTarget: { with: { account: true } },
+              replyTarget: {
+                with: { account: { with: { owner: true } } },
+              },
               quoteTarget: {
                 with: {
-                  account: true,
+                  account: { with: { owner: true } },
                   media: true,
                   poll: { with: { options: true } },
-                  replyTarget: { with: { account: true } },
+                  replyTarget: {
+                    with: { account: { with: { owner: true } } },
+                  },
                   reactions: true,
                 },
               },
               reactions: true,
             },
           },
-          replyTarget: { with: { account: true } },
+          replyTarget: { with: { account: { with: { owner: true } } } },
           quoteTarget: {
             with: {
-              account: true,
+              account: { with: { owner: true } },
               media: true,
               poll: { with: { options: true } },
-              replyTarget: { with: { account: true } },
+              replyTarget: {
+                with: { account: { with: { owner: true } } },
+              },
               reactions: true,
             },
           },
@@ -117,66 +124,66 @@ profilePost.get<"/:handle{@[^/]+}/:id{[-a-f0-9]+}">(async (c) => {
 interface PostPageProps {
   readonly accountOwner: AccountOwner;
   readonly post: Post & {
-    account: Account;
+    account: PostAccount;
     media: Medium[];
     poll: (Poll & { options: PollOption[] }) | null;
     sharing:
       | (Post & {
-          account: Account;
+          account: PostAccount;
           media: Medium[];
           poll: (Poll & { options: PollOption[] }) | null;
-          replyTarget: (Post & { account: Account }) | null;
+          replyTarget: (Post & { account: PostAccount }) | null;
           quoteTarget:
             | (Post & {
-                account: Account;
+                account: PostAccount;
                 media: Medium[];
                 poll: (Poll & { options: PollOption[] }) | null;
-                replyTarget: (Post & { account: Account }) | null;
+                replyTarget: (Post & { account: PostAccount }) | null;
                 reactions: Reaction[];
               })
             | null;
           reactions: Reaction[];
         })
       | null;
-    replyTarget: (Post & { account: Account }) | null;
+    replyTarget: (Post & { account: PostAccount }) | null;
     quoteTarget:
       | (Post & {
-          account: Account;
+          account: PostAccount;
           media: Medium[];
           poll: (Poll & { options: PollOption[] }) | null;
-          replyTarget: (Post & { account: Account }) | null;
+          replyTarget: (Post & { account: PostAccount }) | null;
           reactions: Reaction[];
         })
       | null;
     replies: (Post & {
-      account: Account;
+      account: PostAccount;
       media: Medium[];
       poll: (Poll & { options: PollOption[] }) | null;
       sharing:
         | (Post & {
-            account: Account;
+            account: PostAccount;
             media: Medium[];
             poll: (Poll & { options: PollOption[] }) | null;
-            replyTarget: (Post & { account: Account }) | null;
+            replyTarget: (Post & { account: PostAccount }) | null;
             quoteTarget:
               | (Post & {
-                  account: Account;
+                  account: PostAccount;
                   media: Medium[];
                   poll: (Poll & { options: PollOption[] }) | null;
-                  replyTarget: (Post & { account: Account }) | null;
+                  replyTarget: (Post & { account: PostAccount }) | null;
                   reactions: Reaction[];
                 })
               | null;
             reactions: Reaction[];
           })
         | null;
-      replyTarget: (Post & { account: Account }) | null;
+      replyTarget: (Post & { account: PostAccount }) | null;
       quoteTarget:
         | (Post & {
-            account: Account;
+            account: PostAccount;
             media: Medium[];
             poll: (Poll & { options: PollOption[] }) | null;
-            replyTarget: (Post & { account: Account }) | null;
+            replyTarget: (Post & { account: PostAccount }) | null;
             reactions: Reaction[];
           })
         | null;
diff --git a/src/pages/tags/index.tsx b/src/pages/tags/index.tsx
index 2beff44a..002635d9 100644
--- a/src/pages/tags/index.tsx
+++ b/src/pages/tags/index.tsx
@@ -1,10 +1,9 @@
 import { Hono } from "hono";
 
 import { Layout } from "../../components/Layout.tsx";
-import { Post as PostView } from "../../components/Post.tsx";
+import { type PostAccount, Post as PostView } from "../../components/Post.tsx";
 import { db } from "../../db.ts";
 import {
-  type Account,
   accountOwners,
   type Medium,
   type Poll,
@@ -38,34 +37,34 @@ tags.get(async (c) => {
     },
     orderBy: (posts, { desc }) => [desc(posts.id)],
     with: {
-      account: true,
+      account: { with: { owner: true } },
       media: true,
       poll: { with: { options: true } },
       sharing: {
         with: {
-          account: true,
+          account: { with: { owner: true } },
           media: true,
           poll: { with: { options: true } },
-          replyTarget: { with: { account: true } },
+          replyTarget: { with: { account: { with: { owner: true } } } },
           quoteTarget: {
             with: {
-              account: true,
+              account: { with: { owner: true } },
               media: true,
               poll: { with: { options: true } },
-              replyTarget: { with: { account: true } },
+              replyTarget: { with: { account: { with: { owner: true } } } },
               reactions: true,
             },
           },
           reactions: true,
         },
       },
-      replyTarget: { with: { account: true } },
+      replyTarget: { with: { account: { with: { owner: true } } } },
       quoteTarget: {
         with: {
-          account: true,
+          account: { with: { owner: true } },
           media: true,
           poll: { with: { options: true } },
-          replyTarget: { with: { account: true } },
+          replyTarget: { with: { account: { with: { owner: true } } } },
           reactions: true,
         },
       },
@@ -78,34 +77,34 @@ tags.get(async (c) => {
 interface TagPageProps {
   readonly tag: string;
   readonly posts: (Post & {
-    account: Account;
+    account: PostAccount;
     media: Medium[];
     poll: (Poll & { options: PollOption[] }) | null;
     sharing:
       | (Post & {
-          account: Account;
+          account: PostAccount;
           media: Medium[];
           poll: (Poll & { options: PollOption[] }) | null;
-          replyTarget: (Post & { account: Account }) | null;
+          replyTarget: (Post & { account: PostAccount }) | null;
           quoteTarget:
             | (Post & {
-                account: Account;
+                account: PostAccount;
                 media: Medium[];
                 poll: (Poll & { options: PollOption[] }) | null;
-                replyTarget: (Post & { account: Account }) | null;
+                replyTarget: (Post & { account: PostAccount }) | null;
                 reactions: Reaction[];
               })
             | null;
           reactions: Reaction[];
         })
       | null;
-    replyTarget: (Post & { account: Account }) | null;
+    replyTarget: (Post & { account: PostAccount }) | null;
     quoteTarget:
       | (Post & {
-          account: Account;
+          account: PostAccount;
           media: Medium[];
           poll: (Poll & { options: PollOption[] }) | null;
-          replyTarget: (Post & { account: Account }) | null;
+          replyTarget: (Post & { account: PostAccount }) | null;
           reactions: Reaction[];
         })
       | null;

From 7a665c6b5164e983d725cf29e546eb21b8b9d6ae Mon Sep 17 00:00:00 2001
From: Hong Minhee <hong@minhee.org>
Date: Sun, 17 May 2026 06:56:05 +0900
Subject: [PATCH 02/11] Render custom emoji image in the reactions page heading

The /@:handle/:id/reactions/:emoji heading was interpolating the raw
emoji column, which for custom emojis is the bare `:shortcode:` string.
Look up one row's customEmoji URL (already loaded for the listing) and
render it through proxyUrl as an <img>; fall back to the unicode
character when no customEmoji URL is present.

Assisted-by: Codex:gpt-5.5
---
 src/pages/profile/postReactions.tsx | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/pages/profile/postReactions.tsx b/src/pages/profile/postReactions.tsx
index 7860ce29..78d3d657 100644
--- a/src/pages/profile/postReactions.tsx
+++ b/src/pages/profile/postReactions.tsx
@@ -5,6 +5,7 @@ import { Layout } from "../../components/Layout.tsx";
 import { type PostAccount, Post as PostView } from "../../components/Post.tsx";
 import { PublicAccountList } from "../../components/PublicAccountList.tsx";
 import db from "../../db.ts";
+import { proxyUrl } from "../../media-proxy.ts";
 import {
   type AccountOwner,
   likes,
@@ -265,6 +266,24 @@ postReactions.get("/reactions/:emoji", async (c) => {
   });
 
   const { newerUrl, olderUrl } = paginationUrls(page, page * PAGE_SIZE < total);
+  const customEmojiUrl = rows.find((r) => r.customEmoji != null)?.customEmoji;
+  const proxiedEmojiUrl =
+    customEmojiUrl == null ? null : proxyUrl(customEmojiUrl, c.req.url);
+  const emojiNode =
+    proxiedEmojiUrl == null ? (
+      <span>{emoji}</span>
+    ) : (
+      <img
+        src={proxiedEmojiUrl}
+        alt={emoji}
+        title={emoji}
+        class="inline h-4 align-text-bottom"
+      />
+    );
+  const headingPrefix =
+    total === 1
+      ? "1 reaction with "
+      : `${numberFormatter.format(total)} reactions with `;
 
   return c.html(
     <ReactionListPage
@@ -272,9 +291,10 @@ postReactions.get("/reactions/:emoji", async (c) => {
       post={post}
       pageTitle={`Reacted ${emoji} by`}
       heading={
-        total === 1
-          ? `1 reaction with ${emoji}`
-          : `${numberFormatter.format(total)} reactions with ${emoji}`
+        <>
+          {headingPrefix}
+          {emojiNode}
+        </>
       }
       baseUrl={c.req.url}
       newerUrl={newerUrl}
@@ -387,7 +407,7 @@ interface ReactionListPageProps {
   readonly accountOwner: AccountOwner;
   readonly post: FeaturedPost;
   readonly pageTitle: string;
-  readonly heading: string;
+  readonly heading: unknown;
   readonly baseUrl: URL | string;
   readonly newerUrl?: string;
   readonly olderUrl?: string;

From 68aabdb74987ed7ca1e2f2de4df349ec31d88ef0 Mon Sep 17 00:00:00 2001
From: Hong Minhee <hong@minhee.org>
Date: Sun, 17 May 2026 07:31:09 +0900
Subject: [PATCH 03/11] Add a PR link to the changelog

---
 CHANGES.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGES.md b/CHANGES.md
index 13b7abe2..39e07f78 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -244,7 +244,7 @@ To be released.
     the profile feed and post permalink page, the per-post like, share,
     quote, and reaction-emoji indicators now link into these pages for
     local posts; remote posts continue to display the counts as plain
-    text.
+    text.  [[#490]]
 
  -  Added avatar and header image upload to the admin account creation and
     editing forms, with drag-and-drop support and in-page image preview.
@@ -382,6 +382,7 @@ To be released.
 [#487]: https://github.com/fedify-dev/hollo/pull/487
 [#488]: https://github.com/fedify-dev/hollo/issues/488
 [#489]: https://github.com/fedify-dev/hollo/issues/489
+[#490]: https://github.com/fedify-dev/hollo/pull/490
 
 
 Version 0.8.4

From dc1ccd555fb991c71ecef8b353cc63387b82efb5 Mon Sep 17 00:00:00 2001
From: Hong Minhee <hong@minhee.org>
Date: Sun, 17 May 2026 07:47:43 +0900
Subject: [PATCH 04/11] Extract post title summary helper

Both profilePost.tsx and postReactions.tsx derived the page title
summary with the same five-line snippet: fall back to post.summary,
truncate post.content at 30 characters with an ellipsis, otherwise
return the content as-is.  Lift that into summarizePostForTitle in a
new src/pages/profile/summary.ts so the rule lives in one place.

https://github.com/fedify-dev/hollo/pull/490#discussion_r3253675966

Assisted-by: Claude Code:claude-opus-4-7
---
 src/pages/profile/postReactions.tsx |  7 ++-----
 src/pages/profile/profilePost.tsx   |  7 ++-----
 src/pages/profile/summary.ts        | 14 ++++++++++++++
 3 files changed, 18 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/profile/summary.ts

diff --git a/src/pages/profile/postReactions.tsx b/src/pages/profile/postReactions.tsx
index 78d3d657..7c470663 100644
--- a/src/pages/profile/postReactions.tsx
+++ b/src/pages/profile/postReactions.tsx
@@ -18,6 +18,7 @@ import {
   reactions,
 } from "../../schema.ts";
 import { isUuid } from "../../uuid.ts";
+import { summarizePostForTitle } from "./summary.ts";
 
 const PAGE_SIZE = 100;
 
@@ -424,11 +425,7 @@ function ReactionListPage({
   olderUrl,
   children,
 }: ReactionListPageProps) {
-  const summary =
-    post.summary ??
-    ((post.content ?? "").length > 30
-      ? `${(post.content ?? "").substring(0, 30)}…`
-      : (post.content ?? ""));
+  const summary = summarizePostForTitle(post);
   return (
     <Layout
       title={`${pageTitle}: ${summary} — ${post.account.name}`}
diff --git a/src/pages/profile/profilePost.tsx b/src/pages/profile/profilePost.tsx
index 00101c1c..26751d34 100644
--- a/src/pages/profile/profilePost.tsx
+++ b/src/pages/profile/profilePost.tsx
@@ -12,6 +12,7 @@ import {
   type Reaction,
 } from "../../schema.ts";
 import { isUuid } from "../../uuid.ts";
+import { summarizePostForTitle } from "./summary.ts";
 
 const profilePost = new Hono();
 
@@ -195,11 +196,7 @@ interface PostPageProps {
 }
 
 function PostPage({ post, accountOwner, baseUrl }: PostPageProps) {
-  const summary =
-    post.summary ??
-    ((post.content ?? "").length > 30
-      ? `${(post.content ?? "").substring(0, 30)}…`
-      : (post.content ?? ""));
+  const summary = summarizePostForTitle(post);
   return (
     <Layout
       title={`${summary} — ${post.account.name}`}
diff --git a/src/pages/profile/summary.ts b/src/pages/profile/summary.ts
new file mode 100644
index 00000000..fa5b9147
--- /dev/null
+++ b/src/pages/profile/summary.ts
@@ -0,0 +1,14 @@
+import type { Post } from "../../schema.ts";
+
+const SUMMARY_MAX_LENGTH = 30;
+
+export function summarizePostForTitle(
+  post: Pick<Post, "summary" | "content">,
+): string {
+  if (post.summary != null) return post.summary;
+  const content = post.content ?? "";
+  if (content.length > SUMMARY_MAX_LENGTH) {
+    return `${content.substring(0, SUMMARY_MAX_LENGTH)}…`;
+  }
+  return content;
+}

From 3af6eff86b8d584509cae47d376cfd2fce295b13 Mon Sep 17 00:00:00 2001
From: Hong Minhee <hong@minhee.org>
Date: Sun, 17 May 2026 08:00:20 +0900
Subject: [PATCH 05/11] Extract PostForView type from Post.tsx

The deeply nested post shape inside PostProps was duplicated as a
local FeaturedPost type in postReactions.tsx.  Lift the shape out as
an exported PostForView type alias and reuse it from postReactions.tsx
so the renderable-post type lives in one place.  Drops the unused
Medium/Poll/PollOption/Post/Reaction imports that the local type
needed.

https://github.com/fedify-dev/hollo/pull/490#discussion_r3253692867

Assisted-by: Claude Code:claude-opus-4-7
---
 src/components/Post.tsx             | 70 +++++++++++++++--------------
 src/pages/profile/postReactions.tsx | 53 ++--------------------
 2 files changed, 40 insertions(+), 83 deletions(-)

diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index 5aba649c..90e9f3fb 100644
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -14,41 +14,43 @@ import type {
 
 export type PostAccount = Account & { owner?: AccountOwner | null };
 
+export type PostForView = DbPost & {
+  account: PostAccount;
+  media: DbMedium[];
+  poll: (DbPoll & { options: PollOption[] }) | null;
+  sharing:
+    | (DbPost & {
+        account: PostAccount;
+        media: DbMedium[];
+        poll: (DbPoll & { options: PollOption[] }) | null;
+        replyTarget: (DbPost & { account: PostAccount }) | null;
+        quoteTarget:
+          | (DbPost & {
+              account: PostAccount;
+              media: DbMedium[];
+              poll: (DbPoll & { options: PollOption[] }) | null;
+              replyTarget: (DbPost & { account: PostAccount }) | null;
+              reactions: Reaction[];
+            })
+          | null;
+        reactions: Reaction[];
+      })
+    | null;
+  replyTarget: (DbPost & { account: PostAccount }) | null;
+  quoteTarget:
+    | (DbPost & {
+        account: PostAccount;
+        media: DbMedium[];
+        poll: (DbPoll & { options: PollOption[] }) | null;
+        replyTarget: (DbPost & { account: PostAccount }) | null;
+        reactions: Reaction[];
+      })
+    | null;
+  reactions: Reaction[];
+};
+
 export interface PostProps {
-  readonly post: DbPost & {
-    account: PostAccount;
-    media: DbMedium[];
-    poll: (DbPoll & { options: PollOption[] }) | null;
-    sharing:
-      | (DbPost & {
-          account: PostAccount;
-          media: DbMedium[];
-          poll: (DbPoll & { options: PollOption[] }) | null;
-          replyTarget: (DbPost & { account: PostAccount }) | null;
-          quoteTarget:
-            | (DbPost & {
-                account: PostAccount;
-                media: DbMedium[];
-                poll: (DbPoll & { options: PollOption[] }) | null;
-                replyTarget: (DbPost & { account: PostAccount }) | null;
-                reactions: Reaction[];
-              })
-            | null;
-          reactions: Reaction[];
-        })
-      | null;
-    replyTarget: (DbPost & { account: PostAccount }) | null;
-    quoteTarget:
-      | (DbPost & {
-          account: PostAccount;
-          media: DbMedium[];
-          poll: (DbPoll & { options: PollOption[] }) | null;
-          replyTarget: (DbPost & { account: PostAccount }) | null;
-          reactions: Reaction[];
-        })
-      | null;
-    reactions: Reaction[];
-  };
+  readonly post: PostForView;
   readonly shared?: Date;
   readonly pinned?: boolean;
   readonly quoted?: boolean;
diff --git a/src/pages/profile/postReactions.tsx b/src/pages/profile/postReactions.tsx
index 7c470663..e92c1a1b 100644
--- a/src/pages/profile/postReactions.tsx
+++ b/src/pages/profile/postReactions.tsx
@@ -2,21 +2,11 @@ import { and, count, eq, isNull, or } from "drizzle-orm";
 import { type Context, Hono } from "hono";
 
 import { Layout } from "../../components/Layout.tsx";
-import { type PostAccount, Post as PostView } from "../../components/Post.tsx";
+import { type PostForView, Post as PostView } from "../../components/Post.tsx";
 import { PublicAccountList } from "../../components/PublicAccountList.tsx";
 import db from "../../db.ts";
 import { proxyUrl } from "../../media-proxy.ts";
-import {
-  type AccountOwner,
-  likes,
-  type Medium,
-  type Poll,
-  type PollOption,
-  type Post,
-  posts,
-  type Reaction,
-  reactions,
-} from "../../schema.ts";
+import { type AccountOwner, likes, posts, reactions } from "../../schema.ts";
 import { isUuid } from "../../uuid.ts";
 import { summarizePostForTitle } from "./summary.ts";
 
@@ -24,44 +14,9 @@ const PAGE_SIZE = 100;
 
 const postReactions = new Hono();
 
-type FeaturedPost = Post & {
-  account: PostAccount;
-  media: Medium[];
-  poll: (Poll & { options: PollOption[] }) | null;
-  sharing:
-    | (Post & {
-        account: PostAccount;
-        media: Medium[];
-        poll: (Poll & { options: PollOption[] }) | null;
-        replyTarget: (Post & { account: PostAccount }) | null;
-        quoteTarget:
-          | (Post & {
-              account: PostAccount;
-              media: Medium[];
-              poll: (Poll & { options: PollOption[] }) | null;
-              replyTarget: (Post & { account: PostAccount }) | null;
-              reactions: Reaction[];
-            })
-          | null;
-        reactions: Reaction[];
-      })
-    | null;
-  replyTarget: (Post & { account: PostAccount }) | null;
-  quoteTarget:
-    | (Post & {
-        account: PostAccount;
-        media: Medium[];
-        poll: (Poll & { options: PollOption[] }) | null;
-        replyTarget: (Post & { account: PostAccount }) | null;
-        reactions: Reaction[];
-      })
-    | null;
-  reactions: Reaction[];
-};
-
 async function loadLocalPost(c: Context): Promise<{
   accountOwner: AccountOwner;
-  post: FeaturedPost;
+  post: PostForView;
 } | null> {
   let handle = c.req.param("handle");
   const postId = c.req.param("id");
@@ -406,7 +361,7 @@ postReactions.get("/quotes", async (c) => {
 
 interface ReactionListPageProps {
   readonly accountOwner: AccountOwner;
-  readonly post: FeaturedPost;
+  readonly post: PostForView;
   readonly pageTitle: string;
   readonly heading: unknown;
   readonly baseUrl: URL | string;

From 335095a1023183f4c167b05a5cc02cd787487678 Mon Sep 17 00:00:00 2001
From: Hong Minhee <hong@minhee.org>
Date: Sun, 17 May 2026 10:06:51 +0900
Subject: [PATCH 06/11] Look up reaction image URL from post.reactions

The custom emoji heading on /@:handle/:id/reactions/:emoji scanned
only the current page of result rows for a non-null customEmoji URL.
If every row on that page happened to have a null customEmoji (for
example after federation rows where only some bodies carried the
image URL), the heading fell back to the raw shortcode even when
post.reactions contained the URL.  Look it up on post.reactions
instead, which is loaded in full for the page header.

https://github.com/fedify-dev/hollo/pull/490#discussion_r3253704017

Assisted-by: Claude Code:claude-opus-4-7
---
 src/pages/profile/postReactions.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/profile/postReactions.tsx b/src/pages/profile/postReactions.tsx
index e92c1a1b..08cdb791 100644
--- a/src/pages/profile/postReactions.tsx
+++ b/src/pages/profile/postReactions.tsx
@@ -222,7 +222,9 @@ postReactions.get("/reactions/:emoji", async (c) => {
   });
 
   const { newerUrl, olderUrl } = paginationUrls(page, page * PAGE_SIZE < total);
-  const customEmojiUrl = rows.find((r) => r.customEmoji != null)?.customEmoji;
+  const customEmojiUrl = post.reactions.find(
+    (r) => r.emoji === emoji && r.customEmoji != null,
+  )?.customEmoji;
   const proxiedEmojiUrl =
     customEmojiUrl == null ? null : proxyUrl(customEmojiUrl, c.req.url);
   const emojiNode =

From e88fe4b74095ac573350667cc9705e98c404e9cf Mon Sep 17 00:00:00 2001
From: Hong Minhee <hong@minhee.org>
Date: Sun, 17 May 2026 10:09:56 +0900
Subject: [PATCH 07/11] Share the post-view Drizzle relations clause

The deeply nested `with` clause used to hydrate a post for PostView
rendering (author + owner, media, poll, sharing, reply target, quote
target, reactions) was repeated verbatim across the four SSR queries:
the profile feed and its pinned-posts subquery, the post permalink,
the hashtag feed, and the reaction list pages (both the post header
loader and the /quotes listing).  Lift it into a single
`postViewRelations` constant in a new src/pages/profile/postRelations.ts
and reference it from every site, so schema-level relation changes
land in one place.  The profilePost replies-list query spreads the
constant into its outer `with` and reuses it again as the inner
`replies.with`.

https://github.com/fedify-dev/hollo/pull/490#discussion_r3253704015

Assisted-by: Claude Code:claude-opus-4-7
---
 src/pages/profile/index.tsx         | 116 +---------------------------
 src/pages/profile/postReactions.tsx |  75 +-----------------
 src/pages/profile/postRelations.ts  |  45 +++++++++++
 src/pages/profile/profilePost.tsx   |  77 +-----------------
 src/pages/tags/index.tsx            |  36 +--------
 5 files changed, 57 insertions(+), 292 deletions(-)
 create mode 100644 src/pages/profile/postRelations.ts

diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index 1e3b2fb6..8f1994b2 100644
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -19,6 +19,7 @@ import {
 } from "../../schema.ts";
 import { isUuid } from "../../uuid.ts";
 import postReactions from "./postReactions.tsx";
+import { postViewRelations } from "./postRelations.ts";
 import profilePost from "./profilePost.tsx";
 
 const profile = new Hono();
@@ -75,90 +76,14 @@ profile.get<"/:handle">(async (c) => {
     orderBy: (posts, { desc }) => [desc(posts.id)],
     limit: PAGE_SIZE,
     offset: (page - 1) * PAGE_SIZE,
-    with: {
-      account: { with: { owner: true } },
-      media: true,
-      poll: { with: { options: true } },
-      sharing: {
-        with: {
-          account: { with: { owner: true } },
-          media: true,
-          poll: { with: { options: true } },
-          replyTarget: { with: { account: { with: { owner: true } } } },
-          quoteTarget: {
-            with: {
-              account: { with: { owner: true } },
-              media: true,
-              poll: { with: { options: true } },
-              replyTarget: { with: { account: { with: { owner: true } } } },
-              reactions: true,
-            },
-          },
-          reactions: true,
-        },
-      },
-      replyTarget: { with: { account: { with: { owner: true } } } },
-      quoteTarget: {
-        with: {
-          account: { with: { owner: true } },
-          media: true,
-          poll: { with: { options: true } },
-          replyTarget: { with: { account: { with: { owner: true } } } },
-          reactions: true,
-        },
-      },
-      reactions: true,
-    },
+    with: postViewRelations,
   });
   const pinnedPostList =
     cont == null
       ? await db.query.pinnedPosts.findMany({
           where: { accountId: { eq: owner.id } },
           orderBy: (pinnedPosts, { desc }) => [desc(pinnedPosts.index)],
-          with: {
-            post: {
-              with: {
-                account: { with: { owner: true } },
-                media: true,
-                poll: { with: { options: true } },
-                sharing: {
-                  with: {
-                    account: { with: { owner: true } },
-                    media: true,
-                    poll: { with: { options: true } },
-                    replyTarget: {
-                      with: { account: { with: { owner: true } } },
-                    },
-                    quoteTarget: {
-                      with: {
-                        account: { with: { owner: true } },
-                        media: true,
-                        poll: { with: { options: true } },
-                        replyTarget: {
-                          with: { account: { with: { owner: true } } },
-                        },
-                        reactions: true,
-                      },
-                    },
-                    reactions: true,
-                  },
-                },
-                replyTarget: { with: { account: { with: { owner: true } } } },
-                quoteTarget: {
-                  with: {
-                    account: { with: { owner: true } },
-                    media: true,
-                    poll: { with: { options: true } },
-                    replyTarget: {
-                      with: { account: { with: { owner: true } } },
-                    },
-                    reactions: true,
-                  },
-                },
-                reactions: true,
-              },
-            },
-          },
+          with: { post: { with: postViewRelations } },
         })
       : [];
   const featuredTagList = await db.query.featuredTags.findMany({
@@ -237,40 +162,7 @@ profile.get("/tagged/:tag", async (c) => {
     orderBy: (posts, { desc }) => [desc(posts.id)],
     limit: PAGE_SIZE,
     offset: (page - 1) * PAGE_SIZE,
-    with: {
-      account: { with: { owner: true } },
-      media: true,
-      poll: { with: { options: true } },
-      sharing: {
-        with: {
-          account: { with: { owner: true } },
-          media: true,
-          poll: { with: { options: true } },
-          replyTarget: { with: { account: { with: { owner: true } } } },
-          quoteTarget: {
-            with: {
-              account: { with: { owner: true } },
-              media: true,
-              poll: { with: { options: true } },
-              replyTarget: { with: { account: { with: { owner: true } } } },
-              reactions: true,
-            },
-          },
-          reactions: true,
-        },
-      },
-      replyTarget: { with: { account: { with: { owner: true } } } },
-      quoteTarget: {
-        with: {
-          account: { with: { owner: true } },
-          media: true,
-          poll: { with: { options: true } },
-          replyTarget: { with: { account: { with: { owner: true } } } },
-          reactions: true,
-        },
-      },
-      reactions: true,
-    },
+    with: postViewRelations,
   });
   const featuredTagList = await db.query.featuredTags.findMany({
     where: { accountOwnerId: { eq: owner.id } },
diff --git a/src/pages/profile/postReactions.tsx b/src/pages/profile/postReactions.tsx
index 08cdb791..e897ac5b 100644
--- a/src/pages/profile/postReactions.tsx
+++ b/src/pages/profile/postReactions.tsx
@@ -8,6 +8,7 @@ import db from "../../db.ts";
 import { proxyUrl } from "../../media-proxy.ts";
 import { type AccountOwner, likes, posts, reactions } from "../../schema.ts";
 import { isUuid } from "../../uuid.ts";
+import { postViewRelations } from "./postRelations.ts";
 import { summarizePostForTitle } from "./summary.ts";
 
 const PAGE_SIZE = 100;
@@ -36,42 +37,7 @@ async function loadLocalPost(c: Context): Promise<{
           or(eq(posts.visibility, "public"), eq(posts.visibility, "unlisted")),
         )!,
     },
-    with: {
-      account: { with: { owner: true } },
-      media: true,
-      poll: { with: { options: true } },
-      sharing: {
-        with: {
-          account: { with: { owner: true } },
-          media: true,
-          poll: { with: { options: true } },
-          replyTarget: { with: { account: { with: { owner: true } } } },
-          quoteTarget: {
-            with: {
-              account: { with: { owner: true } },
-              media: true,
-              poll: { with: { options: true } },
-              replyTarget: {
-                with: { account: { with: { owner: true } } },
-              },
-              reactions: true,
-            },
-          },
-          reactions: true,
-        },
-      },
-      replyTarget: { with: { account: { with: { owner: true } } } },
-      quoteTarget: {
-        with: {
-          account: { with: { owner: true } },
-          media: true,
-          poll: { with: { options: true } },
-          replyTarget: { with: { account: { with: { owner: true } } } },
-          reactions: true,
-        },
-      },
-      reactions: true,
-    },
+    with: postViewRelations,
   });
   if (post == null) return null;
   return { accountOwner, post };
@@ -300,42 +266,7 @@ postReactions.get("/quotes", async (c) => {
     orderBy: (posts, { desc }) => [desc(posts.id)],
     limit: PAGE_SIZE,
     offset: (page - 1) * PAGE_SIZE,
-    with: {
-      account: { with: { owner: true } },
-      media: true,
-      poll: { with: { options: true } },
-      sharing: {
-        with: {
-          account: { with: { owner: true } },
-          media: true,
-          poll: { with: { options: true } },
-          replyTarget: { with: { account: { with: { owner: true } } } },
-          quoteTarget: {
-            with: {
-              account: { with: { owner: true } },
-              media: true,
-              poll: { with: { options: true } },
-              replyTarget: {
-                with: { account: { with: { owner: true } } },
-              },
-              reactions: true,
-            },
-          },
-          reactions: true,
-        },
-      },
-      replyTarget: { with: { account: { with: { owner: true } } } },
-      quoteTarget: {
-        with: {
-          account: { with: { owner: true } },
-          media: true,
-          poll: { with: { options: true } },
-          replyTarget: { with: { account: { with: { owner: true } } } },
-          reactions: true,
-        },
-      },
-      reactions: true,
-    },
+    with: postViewRelations,
   });
 
   const { newerUrl, olderUrl } = paginationUrls(page, page * PAGE_SIZE < total);
diff --git a/src/pages/profile/postRelations.ts b/src/pages/profile/postRelations.ts
new file mode 100644
index 00000000..4dc79a26
--- /dev/null
+++ b/src/pages/profile/postRelations.ts
@@ -0,0 +1,45 @@
+// Drizzle relational query `with` clause that hydrates a post with every
+// nested relation the Post component needs in order to render: the author's
+// account (and its owner row, used to detect local accounts and emit
+// permalink-based reaction list links), media, polls, reply targets, quote
+// targets, the sharing relation when the post is a boost, and the reactions
+// rendered in the post footer.
+//
+// Reuse this constant for every query whose results are passed to
+// PostView so the four SSR queries (profile feed, post permalink, hashtag
+// feed, and the reaction list pages) stay in sync when the post relation
+// graph changes.
+export const postViewRelations = {
+  account: { with: { owner: true } },
+  media: true,
+  poll: { with: { options: true } },
+  sharing: {
+    with: {
+      account: { with: { owner: true } },
+      media: true,
+      poll: { with: { options: true } },
+      replyTarget: { with: { account: { with: { owner: true } } } },
+      quoteTarget: {
+        with: {
+          account: { with: { owner: true } },
+          media: true,
+          poll: { with: { options: true } },
+          replyTarget: { with: { account: { with: { owner: true } } } },
+          reactions: true,
+        },
+      },
+      reactions: true,
+    },
+  },
+  replyTarget: { with: { account: { with: { owner: true } } } },
+  quoteTarget: {
+    with: {
+      account: { with: { owner: true } },
+      media: true,
+      poll: { with: { options: true } },
+      replyTarget: { with: { account: { with: { owner: true } } } },
+      reactions: true,
+    },
+  },
+  reactions: true,
+} as const;
diff --git a/src/pages/profile/profilePost.tsx b/src/pages/profile/profilePost.tsx
index 26751d34..2228d748 100644
--- a/src/pages/profile/profilePost.tsx
+++ b/src/pages/profile/profilePost.tsx
@@ -12,6 +12,7 @@ import {
   type Reaction,
 } from "../../schema.ts";
 import { isUuid } from "../../uuid.ts";
+import { postViewRelations } from "./postRelations.ts";
 import { summarizePostForTitle } from "./summary.ts";
 
 const profilePost = new Hono();
@@ -35,85 +36,13 @@ profilePost.get<"/:handle{@[^/]+}/:id{[-a-f0-9]+}">(async (c) => {
         )!,
     },
     with: {
-      account: { with: { owner: true } },
-      media: true,
-      poll: { with: { options: true } },
-      sharing: {
-        with: {
-          account: { with: { owner: true } },
-          media: true,
-          poll: { with: { options: true } },
-          replyTarget: { with: { account: { with: { owner: true } } } },
-          quoteTarget: {
-            with: {
-              account: { with: { owner: true } },
-              media: true,
-              poll: { with: { options: true } },
-              replyTarget: {
-                with: { account: { with: { owner: true } } },
-              },
-              reactions: true,
-            },
-          },
-          reactions: true,
-        },
-      },
-      replyTarget: { with: { account: { with: { owner: true } } } },
-      quoteTarget: {
-        with: {
-          account: { with: { owner: true } },
-          media: true,
-          poll: { with: { options: true } },
-          replyTarget: { with: { account: { with: { owner: true } } } },
-          reactions: true,
-        },
-      },
+      ...postViewRelations,
       replies: {
         where: { visibility: { in: ["public", "unlisted"] } },
         orderBy: (posts, { desc }) => [desc(posts.published)],
         limit: 20,
-        with: {
-          account: { with: { owner: true } },
-          media: true,
-          poll: { with: { options: true } },
-          sharing: {
-            with: {
-              account: { with: { owner: true } },
-              media: true,
-              poll: { with: { options: true } },
-              replyTarget: {
-                with: { account: { with: { owner: true } } },
-              },
-              quoteTarget: {
-                with: {
-                  account: { with: { owner: true } },
-                  media: true,
-                  poll: { with: { options: true } },
-                  replyTarget: {
-                    with: { account: { with: { owner: true } } },
-                  },
-                  reactions: true,
-                },
-              },
-              reactions: true,
-            },
-          },
-          replyTarget: { with: { account: { with: { owner: true } } } },
-          quoteTarget: {
-            with: {
-              account: { with: { owner: true } },
-              media: true,
-              poll: { with: { options: true } },
-              replyTarget: {
-                with: { account: { with: { owner: true } } },
-              },
-              reactions: true,
-            },
-          },
-          reactions: true,
-        },
+        with: postViewRelations,
       },
-      reactions: true,
     },
   });
   if (post == null) return c.notFound();
diff --git a/src/pages/tags/index.tsx b/src/pages/tags/index.tsx
index 002635d9..ee7fc4e4 100644
--- a/src/pages/tags/index.tsx
+++ b/src/pages/tags/index.tsx
@@ -11,6 +11,7 @@ import {
   type Post,
   type Reaction,
 } from "../../schema.ts";
+import { postViewRelations } from "../profile/postRelations.ts";
 
 const tags = new Hono().basePath("/:tag");
 
@@ -36,40 +37,7 @@ tags.get(async (c) => {
         )!,
     },
     orderBy: (posts, { desc }) => [desc(posts.id)],
-    with: {
-      account: { with: { owner: true } },
-      media: true,
-      poll: { with: { options: true } },
-      sharing: {
-        with: {
-          account: { with: { owner: true } },
-          media: true,
-          poll: { with: { options: true } },
-          replyTarget: { with: { account: { with: { owner: true } } } },
-          quoteTarget: {
-            with: {
-              account: { with: { owner: true } },
-              media: true,
-              poll: { with: { options: true } },
-              replyTarget: { with: { account: { with: { owner: true } } } },
-              reactions: true,
-            },
-          },
-          reactions: true,
-        },
-      },
-      replyTarget: { with: { account: { with: { owner: true } } } },
-      quoteTarget: {
-        with: {
-          account: { with: { owner: true } },
-          media: true,
-          poll: { with: { options: true } },
-          replyTarget: { with: { account: { with: { owner: true } } } },
-          reactions: true,
-        },
-      },
-      reactions: true,
-    },
+    with: postViewRelations,
   });
   return c.html(<TagPage tag={tag} posts={postList} baseUrl={c.req.url} />);
 });

From 88b6dfbf4a1c208ad7062e2607ab0efd33da3053 Mon Sep 17 00:00:00 2001
From: Hong Minhee <hong@minhee.org>
Date: Sun, 17 May 2026 10:24:15 +0900
Subject: [PATCH 08/11] Treat empty post summary as missing

ActivityPub bodies occasionally arrive with summary set to "" (an
empty content warning), and the existing nullish-coalescing checks
treated those rows as if the post had a summary.  That meant the
permalink and reaction list page titles showed the empty string,
and the OpenGraph description meta tag emitted an empty value
instead of falling back to the post content.

Switch summarizePostForTitle to a plain truthiness check, and use
|| (not ??) for the description fallback in the post permalink and
the reaction list pages so an empty summary defers to the content.

https://github.com/fedify-dev/hollo/pull/490#discussion_r3253835319
https://github.com/fedify-dev/hollo/pull/490#discussion_r3253835325

Assisted-by: Claude Code:claude-opus-4-7
---
 src/pages/profile/postReactions.tsx | 2 +-
 src/pages/profile/profilePost.tsx   | 2 +-
 src/pages/profile/summary.ts        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/profile/postReactions.tsx b/src/pages/profile/postReactions.tsx
index e897ac5b..6ce22d92 100644
--- a/src/pages/profile/postReactions.tsx
+++ b/src/pages/profile/postReactions.tsx
@@ -318,7 +318,7 @@ function ReactionListPage({
     <Layout
       title={`${pageTitle}: ${summary} — ${post.account.name}`}
       shortTitle={pageTitle}
-      description={post.summary ?? post.content}
+      description={post.summary || post.content}
       imageUrl={post.account.avatarUrl}
       themeColor={accountOwner.themeColor}
     >
diff --git a/src/pages/profile/profilePost.tsx b/src/pages/profile/profilePost.tsx
index 2228d748..db3caf87 100644
--- a/src/pages/profile/profilePost.tsx
+++ b/src/pages/profile/profilePost.tsx
@@ -130,7 +130,7 @@ function PostPage({ post, accountOwner, baseUrl }: PostPageProps) {
     <Layout
       title={`${summary} — ${post.account.name}`}
       shortTitle={summary}
-      description={post.summary ?? post.content}
+      description={post.summary || post.content}
       imageUrl={post.account.avatarUrl}
       url={post.url ?? post.iri}
       links={[
diff --git a/src/pages/profile/summary.ts b/src/pages/profile/summary.ts
index fa5b9147..ede5d5d6 100644
--- a/src/pages/profile/summary.ts
+++ b/src/pages/profile/summary.ts
@@ -5,7 +5,7 @@ const SUMMARY_MAX_LENGTH = 30;
 export function summarizePostForTitle(
   post: Pick<Post, "summary" | "content">,
 ): string {
-  if (post.summary != null) return post.summary;
+  if (post.summary) return post.summary;
   const content = post.content ?? "";
   if (content.length > SUMMARY_MAX_LENGTH) {
     return `${content.substring(0, SUMMARY_MAX_LENGTH)}…`;

From 176074f38084cca31f8ad5e0e48e1120fa325f46 Mon Sep 17 00:00:00 2001
From: Hong Minhee <hong@minhee.org>
Date: Sun, 17 May 2026 10:37:04 +0900
Subject: [PATCH 09/11] Key the public account list items by account.id

The <li> wrappers around each PublicAccountItem in PublicAccountList
didn't carry a key prop.  Hono JSX doesn't require it for static SSR,
but the rest of the codebase (Post.tsx and other list renderers)
keys list items, so add `key={account.id}` for consistency.

https://github.com/fedify-dev/hollo/pull/490#discussion_r3253854366

Assisted-by: Claude Code:claude-opus-4-7
---
 src/components/PublicAccountList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PublicAccountList.tsx b/src/components/PublicAccountList.tsx
index 65b79faa..39e959f3 100644
--- a/src/components/PublicAccountList.tsx
+++ b/src/components/PublicAccountList.tsx
@@ -17,7 +17,7 @@ export function PublicAccountList({
   return (
     <ul class="mt-4 divide-y divide-neutral-200 dark:divide-neutral-800">
       {accounts.map((account) => (
-        <li>
+        <li key={account.id}>
           <PublicAccountItem account={account} baseUrl={baseUrl} />
         </li>
       ))}

From 62945a1f7ee18bf67f1ddd4118e6b7bd53923965 Mon Sep 17 00:00:00 2001
From: Hong Minhee <hong@minhee.org>
Date: Sun, 17 May 2026 10:48:46 +0900
Subject: [PATCH 10/11] Use PostForView in SSR page interfaces

The page-level component prop types in src/pages/profile/index.tsx,
src/pages/profile/profilePost.tsx, and src/pages/tags/index.tsx each
inlined the same deeply nested post shape that the recent
PostForView export already names.  Replace those nested type
literals with PostForView (or PostForView[] for the lists), and let
profilePost's PostPageProps express the extra replies array as
`PostForView & { replies: PostForView[] }`.  Drops the now-unused
Medium / Poll / PollOption / Post / Reaction / PostAccount imports
from each file.

https://github.com/fedify-dev/hollo/pull/490#discussion_r3253866416
https://github.com/fedify-dev/hollo/pull/490#discussion_r3253866417
https://github.com/fedify-dev/hollo/pull/490#discussion_r3253866418
https://github.com/fedify-dev/hollo/pull/490#discussion_r3253866420
https://github.com/fedify-dev/hollo/pull/490#discussion_r3253866421
https://github.com/fedify-dev/hollo/pull/490#discussion_r3253866422

Assisted-by: Claude Code:claude-opus-4-7
---
 src/pages/profile/index.tsx       | 77 ++---------------------------
 src/pages/profile/profilePost.tsx | 80 ++-----------------------------
 src/pages/tags/index.tsx          | 46 ++----------------
 3 files changed, 9 insertions(+), 194 deletions(-)

diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index 8f1994b2..910b8de6 100644
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -3,19 +3,14 @@ import { Hono } from "hono";
 import xss from "xss";
 
 import { Layout } from "../../components/Layout.tsx";
-import { type PostAccount, Post as PostView } from "../../components/Post.tsx";
+import { type PostForView, Post as PostView } from "../../components/Post.tsx";
 import { Profile } from "../../components/Profile.tsx";
 import { db } from "../../db.ts";
 import {
   type Account,
   type AccountOwner,
   type FeaturedTag,
-  type Medium,
-  type Poll,
-  type PollOption,
-  type Post,
   posts,
-  type Reaction,
 } from "../../schema.ts";
 import { isUuid } from "../../uuid.ts";
 import postReactions from "./postReactions.tsx";
@@ -187,74 +182,8 @@ profile.get("/tagged/:tag", async (c) => {
 interface ProfilePageProps {
   readonly accountOwner: AccountOwner & { account: Account };
   readonly tag?: string;
-  readonly posts: (Post & {
-    account: PostAccount;
-    media: Medium[];
-    poll: (Poll & { options: PollOption[] }) | null;
-    sharing:
-      | (Post & {
-          account: PostAccount;
-          media: Medium[];
-          poll: (Poll & { options: PollOption[] }) | null;
-          replyTarget: (Post & { account: PostAccount }) | null;
-          quoteTarget:
-            | (Post & {
-                account: PostAccount;
-                media: Medium[];
-                poll: (Poll & { options: PollOption[] }) | null;
-                replyTarget: (Post & { account: PostAccount }) | null;
-                reactions: Reaction[];
-              })
-            | null;
-          reactions: Reaction[];
-        })
-      | null;
-    replyTarget: (Post & { account: PostAccount }) | null;
-    quoteTarget:
-      | (Post & {
-          account: PostAccount;
-          media: Medium[];
-          poll: (Poll & { options: PollOption[] }) | null;
-          replyTarget: (Post & { account: PostAccount }) | null;
-          reactions: Reaction[];
-        })
-      | null;
-    reactions: Reaction[];
-  })[];
-  readonly pinnedPosts: (Post & {
-    account: PostAccount;
-    media: Medium[];
-    poll: (Poll & { options: PollOption[] }) | null;
-    sharing:
-      | (Post & {
-          account: PostAccount;
-          media: Medium[];
-          poll: (Poll & { options: PollOption[] }) | null;
-          replyTarget: (Post & { account: PostAccount }) | null;
-          quoteTarget:
-            | (Post & {
-                account: PostAccount;
-                media: Medium[];
-                poll: (Poll & { options: PollOption[] }) | null;
-                replyTarget: (Post & { account: PostAccount }) | null;
-                reactions: Reaction[];
-              })
-            | null;
-          reactions: Reaction[];
-        })
-      | null;
-    replyTarget: (Post & { account: PostAccount }) | null;
-    quoteTarget:
-      | (Post & {
-          account: PostAccount;
-          media: Medium[];
-          poll: (Poll & { options: PollOption[] }) | null;
-          replyTarget: (Post & { account: PostAccount }) | null;
-          reactions: Reaction[];
-        })
-      | null;
-    reactions: Reaction[];
-  })[];
+  readonly posts: PostForView[];
+  readonly pinnedPosts: PostForView[];
   readonly featuredTags: FeaturedTag[];
   readonly atomUrl?: string;
   readonly olderUrl?: string;
diff --git a/src/pages/profile/profilePost.tsx b/src/pages/profile/profilePost.tsx
index db3caf87..973ab94e 100644
--- a/src/pages/profile/profilePost.tsx
+++ b/src/pages/profile/profilePost.tsx
@@ -1,16 +1,9 @@
 import { Hono } from "hono";
 
 import { Layout } from "../../components/Layout.tsx";
-import { type PostAccount, Post as PostView } from "../../components/Post.tsx";
+import { type PostForView, Post as PostView } from "../../components/Post.tsx";
 import db from "../../db.ts";
-import {
-  type AccountOwner,
-  type Medium,
-  type Poll,
-  type PollOption,
-  type Post,
-  type Reaction,
-} from "../../schema.ts";
+import { type AccountOwner } from "../../schema.ts";
 import { isUuid } from "../../uuid.ts";
 import { postViewRelations } from "./postRelations.ts";
 import { summarizePostForTitle } from "./summary.ts";
@@ -53,74 +46,7 @@ profilePost.get<"/:handle{@[^/]+}/:id{[-a-f0-9]+}">(async (c) => {
 
 interface PostPageProps {
   readonly accountOwner: AccountOwner;
-  readonly post: Post & {
-    account: PostAccount;
-    media: Medium[];
-    poll: (Poll & { options: PollOption[] }) | null;
-    sharing:
-      | (Post & {
-          account: PostAccount;
-          media: Medium[];
-          poll: (Poll & { options: PollOption[] }) | null;
-          replyTarget: (Post & { account: PostAccount }) | null;
-          quoteTarget:
-            | (Post & {
-                account: PostAccount;
-                media: Medium[];
-                poll: (Poll & { options: PollOption[] }) | null;
-                replyTarget: (Post & { account: PostAccount }) | null;
-                reactions: Reaction[];
-              })
-            | null;
-          reactions: Reaction[];
-        })
-      | null;
-    replyTarget: (Post & { account: PostAccount }) | null;
-    quoteTarget:
-      | (Post & {
-          account: PostAccount;
-          media: Medium[];
-          poll: (Poll & { options: PollOption[] }) | null;
-          replyTarget: (Post & { account: PostAccount }) | null;
-          reactions: Reaction[];
-        })
-      | null;
-    replies: (Post & {
-      account: PostAccount;
-      media: Medium[];
-      poll: (Poll & { options: PollOption[] }) | null;
-      sharing:
-        | (Post & {
-            account: PostAccount;
-            media: Medium[];
-            poll: (Poll & { options: PollOption[] }) | null;
-            replyTarget: (Post & { account: PostAccount }) | null;
-            quoteTarget:
-              | (Post & {
-                  account: PostAccount;
-                  media: Medium[];
-                  poll: (Poll & { options: PollOption[] }) | null;
-                  replyTarget: (Post & { account: PostAccount }) | null;
-                  reactions: Reaction[];
-                })
-              | null;
-            reactions: Reaction[];
-          })
-        | null;
-      replyTarget: (Post & { account: PostAccount }) | null;
-      quoteTarget:
-        | (Post & {
-            account: PostAccount;
-            media: Medium[];
-            poll: (Poll & { options: PollOption[] }) | null;
-            replyTarget: (Post & { account: PostAccount }) | null;
-            reactions: Reaction[];
-          })
-        | null;
-      reactions: Reaction[];
-    })[];
-    reactions: Reaction[];
-  };
+  readonly post: PostForView & { replies: PostForView[] };
   readonly baseUrl: URL | string;
 }
 
diff --git a/src/pages/tags/index.tsx b/src/pages/tags/index.tsx
index ee7fc4e4..b4a55d00 100644
--- a/src/pages/tags/index.tsx
+++ b/src/pages/tags/index.tsx
@@ -1,16 +1,9 @@
 import { Hono } from "hono";
 
 import { Layout } from "../../components/Layout.tsx";
-import { type PostAccount, Post as PostView } from "../../components/Post.tsx";
+import { type PostForView, Post as PostView } from "../../components/Post.tsx";
 import { db } from "../../db.ts";
-import {
-  accountOwners,
-  type Medium,
-  type Poll,
-  type PollOption,
-  type Post,
-  type Reaction,
-} from "../../schema.ts";
+import { accountOwners } from "../../schema.ts";
 import { postViewRelations } from "../profile/postRelations.ts";
 
 const tags = new Hono().basePath("/:tag");
@@ -44,40 +37,7 @@ tags.get(async (c) => {
 
 interface TagPageProps {
   readonly tag: string;
-  readonly posts: (Post & {
-    account: PostAccount;
-    media: Medium[];
-    poll: (Poll & { options: PollOption[] }) | null;
-    sharing:
-      | (Post & {
-          account: PostAccount;
-          media: Medium[];
-          poll: (Poll & { options: PollOption[] }) | null;
-          replyTarget: (Post & { account: PostAccount }) | null;
-          quoteTarget:
-            | (Post & {
-                account: PostAccount;
-                media: Medium[];
-                poll: (Poll & { options: PollOption[] }) | null;
-                replyTarget: (Post & { account: PostAccount }) | null;
-                reactions: Reaction[];
-              })
-            | null;
-          reactions: Reaction[];
-        })
-      | null;
-    replyTarget: (Post & { account: PostAccount }) | null;
-    quoteTarget:
-      | (Post & {
-          account: PostAccount;
-          media: Medium[];
-          poll: (Poll & { options: PollOption[] }) | null;
-          replyTarget: (Post & { account: PostAccount }) | null;
-          reactions: Reaction[];
-        })
-      | null;
-    reactions: Reaction[];
-  })[];
+  readonly posts: PostForView[];
   readonly baseUrl: URL | string;
 }
 

From 3513c0db879a9597bce710920cb05184528d343f Mon Sep 17 00:00:00 2001
From: Hong Minhee <hong@minhee.org>
Date: Sun, 17 May 2026 10:49:27 +0900
Subject: [PATCH 11/11] Key the quote list rows by post id

The PostView elements rendered for each row in the /quotes list
weren't keyed.  Add `key={q.id}` to match the same convention now
used for the PublicAccountList items and for other list renderers
in the codebase.

https://github.com/fedify-dev/hollo/pull/490#discussion_r3253866423

Assisted-by: Claude Code:claude-opus-4-7
---
 src/pages/profile/postReactions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/profile/postReactions.tsx b/src/pages/profile/postReactions.tsx
index 6ce22d92..1ad1867b 100644
--- a/src/pages/profile/postReactions.tsx
+++ b/src/pages/profile/postReactions.tsx
@@ -285,7 +285,7 @@ postReactions.get("/quotes", async (c) => {
     >
       <div class="mt-2 divide-y divide-neutral-200 dark:divide-neutral-800">
         {quoteRows.map((q) => (
-          <PostView post={q} baseUrl={c.req.url} />
+          <PostView key={q.id} post={q} baseUrl={c.req.url} />
         ))}
       </div>
     </ReactionListPage>,