Implement social-feed: local follows + /feed + profile visibility

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>

apps/journal/app/components/CollectionPage.tsx

@@ -0,0 +1,85 @@
+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>
+  );
+}

apps/journal/app/components/FollowButton.tsx

@@ -0,0 +1,62 @@
+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>
+  );
+}