4e63f7631a
countFollowers counts every accepted follow row, but listFollowers inner-joined users on follower_id — so a federated follower (NULL follower_id, follower_actor_iri set) bumped the count while never appearing in the list. Observed live: profile said '1 follower', list below was empty. listFollowing had the same latent bug for outbound trails-to-trails follows. Both lists now left-join users + remote_actors: local entries link to the local profile as before; remote entries display cached actor data (IRI parsing as fallback) and link out to the remote profile. Integration test pins count/list consistency for a remote follower. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
|
|
interface Entry {
|
|
username: string;
|
|
displayName: string | null;
|
|
domain: string;
|
|
/** Local path (`/users/x`) or, for federated entries, the remote profile URL. */
|
|
profileUrl: string;
|
|
remote: boolean;
|
|
}
|
|
|
|
interface Props {
|
|
kind: "followers" | "following";
|
|
user: { username: string; displayName: string | null };
|
|
entries: Entry[];
|
|
page: number;
|
|
total: number;
|
|
}
|
|
|
|
const PAGE_SIZE = 50;
|
|
|
|
export function CollectionPage({ kind, user, entries, page, total }: Props) {
|
|
const { t } = useTranslation("journal");
|
|
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
|
|
const heading = t(`social.${kind}.heading`, {
|
|
user: user.displayName ?? user.username,
|
|
});
|
|
|
|
return (
|
|
<div className="mx-auto max-w-2xl px-4 py-8">
|
|
<nav className="mb-4 text-sm text-gray-500">
|
|
<a href={`/users/${user.username}`} className="hover:text-gray-700 hover:underline">
|
|
@{user.username}
|
|
</a>
|
|
{" / "}
|
|
<span>{kind === "followers" ? t("social.followers.label") : t("social.following.label")}</span>
|
|
</nav>
|
|
<h1 className="text-2xl font-bold text-gray-900">{heading}</h1>
|
|
<p className="mt-1 text-sm text-gray-500">{t(`social.${kind}.count`, { count: total })}</p>
|
|
|
|
{entries.length === 0 ? (
|
|
<p className="mt-8 text-center text-gray-500">
|
|
{t(`social.${kind}.empty`)}
|
|
</p>
|
|
) : (
|
|
<ul className="mt-6 divide-y divide-gray-200 rounded-lg border border-gray-200 bg-white">
|
|
{entries.map((entry) => (
|
|
<li key={`${entry.username}@${entry.domain}`} className="px-4 py-3">
|
|
<a
|
|
href={entry.profileUrl}
|
|
{...(entry.remote ? { target: "_blank", rel: "noopener noreferrer" } : {})}
|
|
className="flex items-center justify-between hover:underline"
|
|
>
|
|
<span className="text-sm font-medium text-gray-900">
|
|
{entry.displayName ?? entry.username}
|
|
</span>
|
|
<span className="text-xs text-gray-500">@{entry.username}@{entry.domain}</span>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
|
|
{totalPages > 1 && (
|
|
<nav className="mt-6 flex items-center justify-between text-sm">
|
|
{page > 1 ? (
|
|
<a
|
|
href={`?page=${page - 1}`}
|
|
className="text-blue-600 hover:underline"
|
|
>
|
|
← {t("social.prevPage")}
|
|
</a>
|
|
) : <span />}
|
|
<span className="text-gray-500">
|
|
{t("social.pageOfTotal", { page, totalPages })}
|
|
</span>
|
|
{page < totalPages ? (
|
|
<a
|
|
href={`?page=${page + 1}`}
|
|
className="text-blue-600 hover:underline"
|
|
>
|
|
{t("social.nextPage")} →
|
|
</a>
|
|
) : <span />}
|
|
</nav>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|