Locked-account profiles: private = stub + Pending follow flow

Replaces the earlier 404-for-private model with Mastodon-style locked
accounts. A private profile now returns 200 with a stub layout and
gates content behind follow approval. Default for new users flips from
'public' to 'private' to align with trails.cool's privacy-first
content defaults.

Schema:
- users.profile_visibility default flipped to 'private'. Existing rows
  remain 'public' (backfill on first migration handled them).

Follow API (follow.server.ts):
- followUser now creates Pending (accepted_at = NULL) against private
  targets and Accepted against public targets — no more refusal.
- New: countPendingFollowRequests, listPendingFollowRequests,
  approveFollowRequest, rejectFollowRequest. Approve/reject are
  owner-bound: only the followed user can act on their own incoming
  requests.
- countFollowers / countFollowing / listFollowers / listFollowing now
  filter to accepted-only relations.

Loader (users.$username.tsx):
- Drops the 404 paths. New canSeeContent flag = isOwn ||
  profile_visibility='public' || (followState.following === true).
- When canSeeContent=false, render a stub: header + 🔒 badge + body
  copy + Request-to-follow / sign-in CTA. Routes/activities sections
  are not rendered.

UI:
- FollowButton gains a "Request to follow" / "Requested" state for
  private targets via a new isPrivateTarget prop. Cancel-request reuses
  the unfollow endpoint.
- New /follows/requests page lists incoming Pending requests with
  Approve / Reject buttons.
- New API routes: POST /api/follows/:id/approve and /reject.
- Navbar shows a count badge linking to /follows/requests when
  pending > 0.

Privacy manifest already documents the follows relation; no changes
needed (the locked-account semantics don't add new data — same row,
different lifecycle).

Specs / design (social-feed change):
- public-profiles delta rewritten around the four-mode locked model
  (public, private+anon, private+pending, private+accepted) with
  scenarios for each.
- social-follows delta gains Pending lifecycle requirements (auto vs.
  manual accept, approve/reject endpoints, pending request management,
  Pending follows do not contribute to feed).
- design.md decision section reflects the new model and rationale for
  default-private; non-goal "locked-local-accounts as a follow-up" is
  removed since this change ships it.

Tests:
- follow.integration.test.ts: pending-against-private, approve flips
  to accepted, reject deletes, owner-bound enforcement.
- e2e/social.test.ts: full Request → Pending → Approve → full-view
  flow, plus stub-for-anonymous and /follows/requests auth gate.

Supersedes PR #309 (closed): the empty-public-profile 200 is now a
side-effect of the new render path.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/journal/app/routes/api.follows.$id.approve.ts

@@ -0,0 +1,19 @@
+import { data } from "react-router";
+import type { Route } from "./+types/api.follows.$id.approve";
+import { getSessionUser } from "~/lib/auth.server";
+import { approveFollowRequest } from "~/lib/follow.server";
+
+export async function action({ request, params }: Route.ActionArgs) {
+  if (request.method !== "POST") {
+    return data({ error: "Method not allowed" }, { status: 405 });
+  }
+  const user = await getSessionUser(request);
+  if (!user) return data({ error: "Unauthorized" }, { status: 401 });
+
+  const id = params.id;
+  if (!id) return data({ error: "id required" }, { status: 400 });
+
+  const ok = await approveFollowRequest(user.id, id);
+  if (!ok) return data({ error: "Not found" }, { status: 404 });
+  return data({ ok: true });
+}

apps/journal/app/routes/api.follows.$id.reject.ts

@@ -0,0 +1,19 @@
+import { data } from "react-router";
+import type { Route } from "./+types/api.follows.$id.reject";
+import { getSessionUser } from "~/lib/auth.server";
+import { rejectFollowRequest } from "~/lib/follow.server";
+
+export async function action({ request, params }: Route.ActionArgs) {
+  if (request.method !== "POST") {
+    return data({ error: "Method not allowed" }, { status: 405 });
+  }
+  const user = await getSessionUser(request);
+  if (!user) return data({ error: "Unauthorized" }, { status: 401 });
+
+  const id = params.id;
+  if (!id) return data({ error: "id required" }, { status: 400 });
+
+  const ok = await rejectFollowRequest(user.id, id);
+  if (!ok) return data({ error: "Not found" }, { status: 404 });
+  return data({ ok: true });
+}

apps/journal/app/routes/follows.requests.tsx

@@ -0,0 +1,99 @@
+import { data, redirect, useFetcher } from "react-router";
+import { useTranslation } from "react-i18next";
+import type { Route } from "./+types/follows.requests";
+import { getSessionUser } from "~/lib/auth.server";
+import { listPendingFollowRequests } from "~/lib/follow.server";
+import { ClientDate } from "~/components/ClientDate";
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const user = await getSessionUser(request);
+  if (!user) throw redirect("/auth/login");
+
+  const requests = await listPendingFollowRequests(user.id);
+  return data({
+    requests: requests.map((r) => ({
+      id: r.id,
+      followerUsername: r.followerUsername,
+      followerDisplayName: r.followerDisplayName,
+      followerDomain: r.followerDomain,
+      createdAt: r.createdAt.toISOString(),
+    })),
+  });
+}
+
+export function meta(_args: Route.MetaArgs) {
+  return [{ title: "Follow requests — trails.cool" }];
+}
+
+interface RequestRow {
+  id: string;
+  followerUsername: string;
+  followerDisplayName: string | null;
+  followerDomain: string;
+  createdAt: string;
+}
+
+function RequestItem({ row }: { row: RequestRow }) {
+  const { t } = useTranslation("journal");
+  const approve = useFetcher();
+  const reject = useFetcher();
+  const inFlight = approve.state !== "idle" || reject.state !== "idle";
+
+  return (
+    <li className="flex items-center justify-between px-4 py-3">
+      <div>
+        <a
+          href={`/users/${row.followerUsername}`}
+          className="text-sm font-medium text-gray-900 hover:underline"
+        >
+          {row.followerDisplayName ?? row.followerUsername}
+        </a>
+        <p className="text-xs text-gray-500">
+          @{row.followerUsername}@{row.followerDomain} ·{" "}
+          <ClientDate iso={row.createdAt} />
+        </p>
+      </div>
+      <div className="flex gap-2">
+        <reject.Form method="post" action={`/api/follows/${row.id}/reject`}>
+          <button
+            type="submit"
+            disabled={inFlight}
+            className="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+          >
+            {t("social.requests.reject")}
+          </button>
+        </reject.Form>
+        <approve.Form method="post" action={`/api/follows/${row.id}/approve`}>
+          <button
+            type="submit"
+            disabled={inFlight}
+            className="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+          >
+            {t("social.requests.approve")}
+          </button>
+        </approve.Form>
+      </div>
+    </li>
+  );
+}
+
+export default function FollowRequests({ loaderData }: Route.ComponentProps) {
+  const { requests } = loaderData;
+  const { t } = useTranslation("journal");
+
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-8">
+      <h1 className="text-2xl font-bold text-gray-900">{t("social.requests.title")}</h1>
+
+      {requests.length === 0 ? (
+        <p className="mt-8 text-center text-gray-500">{t("social.requests.empty")}</p>
+      ) : (
+        <ul className="mt-6 divide-y divide-gray-200 rounded-lg border border-gray-200 bg-white">
+          {requests.map((r) => (
+            <RequestItem key={r.id} row={r} />
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

apps/journal/app/routes/users.$username.tsx

@@ -20,33 +20,36 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw data({ error: "User not found" }, { status: 404 });
   }
 
-  const [publicRoutes, publicActivities, currentUser, followers, following] = await Promise.all([
-    listPublicRoutesForOwner(user.id),
-    listPublicActivitiesForOwner(user.id),
-    getSessionUser(request),
-    countFollowers(user.id),
-    countFollowing(user.id),
-  ]);
-
+  const currentUser = await getSessionUser(request);
   const isOwn = currentUser?.id === user.id;
 
-  // Profile-visibility gate: a `private` profile 404s for everyone but
-  // the owner, regardless of how much public content they have.
-  if (!isOwn && user.profileVisibility !== "public") {
-    throw data({ error: "User not found" }, { status: 404 });
-  }
-
-  // 404 for public-but-empty profiles to prevent account enumeration.
-  // Owners still see their own profile even when empty.
-  if (!isOwn && publicRoutes.length === 0 && publicActivities.length === 0) {
-    throw data({ error: "User not found" }, { status: 404 });
-  }
-
-  // Follow state for non-owner viewers (null when anonymous).
+  // Follow state: null when anonymous or owner; { following, pending }
+  // otherwise.
   const followState = !isOwn && currentUser
     ? await getFollowState(currentUser.id, user.username)
     : null;
 
+  // Locked-account model: a private profile renders a stub for
+  // non-followers (anonymous OR signed-in but not an accepted follower).
+  // Owners always see their own profile in full.
+  const canSeeContent =
+    isOwn ||
+    user.profileVisibility === "public" ||
+    (followState !== null && followState.following === true);
+
+  // For private-stub viewers we still want counts (cheap) but skip the
+  // expensive content fetches.
+  const [followers, following] = await Promise.all([
+    countFollowers(user.id),
+    countFollowing(user.id),
+  ]);
+  const [publicRoutes, publicActivities] = canSeeContent
+    ? await Promise.all([
+        listPublicRoutesForOwner(user.id),
+        listPublicActivitiesForOwner(user.id),
+      ])
+    : [[], []];
+
   // Demo-account badge: true when this profile matches the instance's
   // configured demo persona username. Computed server-side so we don't
   // ship the persona config through client HTML.
@@ -84,6 +87,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     followState,
     isLoggedIn: currentUser !== null,
     profileVisibility: user.profileVisibility,
+    canSeeContent,
   });
 }
 
@@ -109,7 +113,7 @@ export function meta({ data: loaderData }: Route.MetaArgs) {
 }
 
 export default function UserProfilePage({ loaderData }: Route.ComponentProps) {
-  const { user, routes, activities, isOwn, isDemoUser, followers, following, followState, isLoggedIn } = loaderData;
+  const { user, routes, activities, isOwn, isDemoUser, followers, following, followState, isLoggedIn, canSeeContent } = loaderData;
   const { t } = useTranslation("journal");
 
   return (
@@ -123,6 +127,14 @@ export default function UserProfilePage({ loaderData }: Route.ComponentProps) {
             <h1 className="text-2xl font-bold text-gray-900">
               {user.displayName ?? user.username}
             </h1>
+            {loaderData.profileVisibility === "private" && !isOwn && (
+              <span
+                className="rounded-full bg-gray-200 px-2 py-0.5 text-xs font-medium text-gray-700"
+                title={t("profile.lockedTitle")}
+              >
+                🔒 {t("profile.lockedBadge")}
+              </span>
+            )}
             {isDemoUser && (
               <span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800">
                 {t("demo.badge")}
@@ -153,11 +165,34 @@ export default function UserProfilePage({ loaderData }: Route.ComponentProps) {
         {!isOwn && isLoggedIn && (
           <FollowButton
             username={user.username}
+            isPrivateTarget={loaderData.profileVisibility === "private"}
             initialState={followState}
           />
         )}
       </div>
 
+      {!canSeeContent && (
+        <div className="mt-8 rounded-lg border border-gray-200 bg-gray-50 p-6 text-center">
+          <p className="text-2xl" aria-hidden="true">🔒</p>
+          <p className="mt-2 text-sm font-medium text-gray-900">
+            {t("profile.privateStub.heading")}
+          </p>
+          <p className="mt-1 text-sm text-gray-500">
+            {isLoggedIn
+              ? t("profile.privateStub.bodyAuth")
+              : t("profile.privateStub.bodyAnon")}
+          </p>
+          {!isLoggedIn && (
+            <a
+              href="/auth/login"
+              className="mt-4 inline-block rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+            >
+              {t("auth.login")}
+            </a>
+          )}
+        </div>
+      )}
+
       {isOwn && loaderData.profileVisibility === "private" && (
         <div className="mt-6 rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800">
           {t("profile.privateNote")}{" "}
@@ -175,6 +210,8 @@ export default function UserProfilePage({ loaderData }: Route.ComponentProps) {
         </div>
       )}
 
+      {canSeeContent && (
+        <>
       <section className="mt-8">
         <h2 className="text-lg font-semibold text-gray-900">
           {t("routes.title")} ({routes.length})
@@ -238,6 +275,8 @@ export default function UserProfilePage({ loaderData }: Route.ComponentProps) {
           </ul>
         )}
       </section>
+        </>
+      )}
     </div>
   );
 }