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>
62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import { useState, useTransition } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
interface FollowState {
|
|
following: boolean;
|
|
pending: boolean;
|
|
}
|
|
|
|
interface Props {
|
|
username: string;
|
|
initialState: FollowState | null;
|
|
}
|
|
|
|
export function FollowButton({ username, initialState }: Props) {
|
|
const { t } = useTranslation("journal");
|
|
const [state, setState] = useState<FollowState>(
|
|
initialState ?? { following: false, pending: false },
|
|
);
|
|
const [isPending, startTransition] = useTransition();
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const onClick = () => {
|
|
setError(null);
|
|
startTransition(async () => {
|
|
const path = state.following
|
|
? `/api/users/${username}/unfollow`
|
|
: `/api/users/${username}/follow`;
|
|
try {
|
|
const res = await fetch(path, { method: "POST" });
|
|
if (!res.ok) {
|
|
const body = await res.json().catch(() => ({}));
|
|
setError(body.error ?? "Failed");
|
|
return;
|
|
}
|
|
const body = (await res.json()) as { following: boolean; pending: boolean };
|
|
setState({ following: body.following, pending: body.pending });
|
|
} catch (e) {
|
|
setError((e as Error).message);
|
|
}
|
|
});
|
|
};
|
|
|
|
const label = state.following ? t("social.unfollow") : t("social.follow");
|
|
|
|
return (
|
|
<div className="flex flex-col items-end gap-1">
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
disabled={isPending}
|
|
className={
|
|
state.following
|
|
? "rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
|
|
: "rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
|
|
}
|
|
>
|
|
{isPending ? "…" : label}
|
|
</button>
|
|
{error && <p className="text-xs text-red-600">{error}</p>}
|
|
</div>
|
|
);
|
|
}
|