811d5f62f5
Implements the social-feed change end-to-end. Local-only follows
between users on the same instance, an aggregated /feed of public
activities from people you follow, and an explicit profile_visibility
setting so the question "can someone follow me?" has a deterministic
answer.
Schema (additive, drizzle-kit push --force in cd-apps handles it):
- journal.follows table keyed by `followed_actor_iri TEXT` for
federation forward-compat. Local IRIs look like
`${ORIGIN}/users/${username}`. `accepted_at` is nullable so the
Pending state from social-federation slots in without migration.
- journal.users.profile_visibility ('public' | 'private', default
'public'). Existing users land 'public' via the default; current
effective behavior is unchanged.
Server (apps/journal/app/lib):
- actor-iri.ts: localActorIri(username) helper — single source of
truth for IRI construction.
- follow.server.ts: followUser / unfollowUser / getFollowState /
countFollowers / countFollowing / listFollowers / listFollowing.
Refuses self-follow + private targets. Idempotent.
- activities.server.ts: listSocialFeed(followerId, limit) joining
follows → activities WHERE visibility='public', reverse-chrono.
Routes:
- POST /api/users/:username/follow + /unfollow (session-bound)
- /feed (signed-in only; redirects anon to /auth/login)
- /users/:username/followers + /users/:username/following (paginated)
- /users/:username gates on profile_visibility AND has-public-content
for visitors; owners on private get an amber explainer banner.
- /settings adds a Public/Private radio with explainer text.
UI:
- FollowButton component on profile page (hidden for owner + anon).
- Follower/following counts on profile linking to collection pages.
- "Feed" link in nav (signed-in) + on personal dashboard alongside
"New Activity".
Privacy manifest updated to document the new follows relation and
profile_visibility setting.
Tests: follow.integration.test.ts (FOLLOW_INTEGRATION=1) for the
follow lifecycle; e2e/social.test.ts for /feed redirect, follow
button + count transitions, and the profile_visibility 404 toggle.
Local development: run `pnpm db:push` after pulling to apply the
schema additions. Production migrates automatically via cd-apps.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
|
|
interface Entry {
|
|
username: string;
|
|
displayName: string | null;
|
|
domain: string;
|
|
}
|
|
|
|
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} className="px-4 py-3">
|
|
<a
|
|
href={`/users/${entry.username}`}
|
|
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>
|
|
);
|
|
}
|