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>
+  );
+}

apps/journal/app/lib/activities.server.ts

@@ -1,7 +1,7 @@
 import { randomUUID } from "node:crypto";
 import { eq, desc, and, sql } from "drizzle-orm";
 import { getDb } from "./db.ts";
-import { activities, routes, syncImports, users } from "@trails-cool/db/schema/journal";
+import { activities, routes, syncImports, users, follows } from "@trails-cool/db/schema/journal";
 import type { Visibility } from "@trails-cool/db/schema/journal";
 import { parseGpxAsync } from "@trails-cool/gpx";
 import { setGeomFromGpx } from "./routes.server.ts";
@@ -134,6 +134,43 @@ export async function listPublicActivitiesForOwner(ownerId: string) {
   return rows.map((r) => ({ ...r, geojson: geojsonMap.get(r.id) ?? null }));
 }
 
+/**
+ * Social feed: aggregated public activities from users that `followerId`
+ * follows (accepted only). Reverse-chronological. Joins users for owner
+ * attribution. Unlisted/private activities never appear, regardless of
+ * follow state.
+ */
+export async function listSocialFeed(followerId: string, limit: number = 50) {
+  const db = getDb();
+  const rows = await db
+    .select({
+      id: activities.id,
+      name: activities.name,
+      distance: activities.distance,
+      elevationGain: activities.elevationGain,
+      duration: activities.duration,
+      startedAt: activities.startedAt,
+      createdAt: activities.createdAt,
+      ownerUsername: users.username,
+      ownerDisplayName: users.displayName,
+    })
+    .from(activities)
+    .innerJoin(follows, eq(follows.followedUserId, activities.ownerId))
+    .innerJoin(users, eq(activities.ownerId, users.id))
+    .where(
+      and(
+        eq(follows.followerId, followerId),
+        eq(activities.visibility, "public"),
+      ),
+    )
+    .orderBy(desc(activities.createdAt))
+    .limit(limit);
+
+  const ids = rows.map((r) => r.id);
+  const geojsonMap = ids.length > 0 ? await getSimplifiedActivityGeojsonBatch(ids) : new Map();
+  return rows.map((r) => ({ ...r, geojson: geojsonMap.get(r.id) ?? null }));
+}
+
 /**
  * Instance-wide public activity feed. Joins users so the caller can
  * render "by <displayName>" without a second round-trip. Used by the

apps/journal/app/lib/actor-iri.ts

@@ -0,0 +1,8 @@
+// Canonical ActivityPub actor IRI for a local user. Used as the key in
+// `follows.followed_actor_iri` so the column shape is identical for local
+// and (future) federated follows. Reading from `process.env.ORIGIN` keeps
+// us aligned with the rest of the auth/federation stack.
+export function localActorIri(username: string): string {
+  const origin = process.env.ORIGIN ?? "http://localhost:3000";
+  return `${origin}/users/${username}`;
+}

apps/journal/app/lib/follow.integration.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect, beforeAll, afterEach } from "vitest";
+import { eq, sql } from "drizzle-orm";
+import { randomUUID } from "node:crypto";
+import { getDb } from "./db.ts";
+import { users, follows } from "@trails-cool/db/schema/journal";
+import {
+  followUser,
+  unfollowUser,
+  getFollowState,
+  countFollowers,
+  countFollowing,
+  FollowError,
+} from "./follow.server.ts";
+
+// Opt-in: these talk to real Postgres. Gated by an env flag so laptop
+// runs without Postgres aren't blocked. Same convention as
+// demo-bot.integration.test.ts.
+const runIntegration = process.env.FOLLOW_INTEGRATION === "1";
+
+async function makeUser(opts: { username: string; profileVisibility?: "public" | "private" }) {
+  const db = getDb();
+  const id = randomUUID();
+  await db.insert(users).values({
+    id,
+    email: `${opts.username}@example.test`,
+    username: opts.username,
+    domain: "test.local",
+    profileVisibility: opts.profileVisibility ?? "public",
+  });
+  return id;
+}
+
+async function wipe() {
+  const db = getDb();
+  await db.execute(sql`DELETE FROM journal.follows WHERE follower_id IN (SELECT id FROM journal.users WHERE email LIKE '%@example.test')`);
+  await db.execute(sql`DELETE FROM journal.users WHERE email LIKE '%@example.test'`);
+}
+
+describe.skipIf(!runIntegration)("follow.server integration", () => {
+  beforeAll(async () => {
+    const db = getDb();
+    await db.execute(sql`SELECT 1`);
+  });
+  afterEach(wipe);
+
+  it("follow + unfollow cycle on a public profile", async () => {
+    const a = await makeUser({ username: `f_a_${Date.now()}` });
+    const b = await makeUser({ username: `f_b_${Date.now()}` });
+    const aRow = (await getDb().select().from(users).where(eq(users.id, a)))[0]!;
+    const bRow = (await getDb().select().from(users).where(eq(users.id, b)))[0]!;
+
+    expect(await getFollowState(a, bRow.username)).toBeNull();
+
+    const s1 = await followUser(a, bRow.username);
+    expect(s1).toEqual({ following: true, pending: false });
+    expect(await countFollowers(b)).toBe(1);
+    expect(await countFollowing(a)).toBe(1);
+
+    // Idempotent
+    const s2 = await followUser(a, bRow.username);
+    expect(s2).toEqual({ following: true, pending: false });
+    expect(await countFollowers(b)).toBe(1);
+
+    const s3 = await unfollowUser(a, bRow.username);
+    expect(s3).toEqual({ following: false, pending: false });
+    expect(await countFollowers(b)).toBe(0);
+    expect(await getFollowState(a, bRow.username)).toBeNull();
+
+    // Idempotent
+    const s4 = await unfollowUser(a, bRow.username);
+    expect(s4).toEqual({ following: false, pending: false });
+
+    // touch aRow so the variable is read (lint hygiene)
+    expect(aRow.username.startsWith("f_a_")).toBe(true);
+  });
+
+  it("refuses to follow a private profile", async () => {
+    const a = await makeUser({ username: `f_pa_${Date.now()}` });
+    const b = await makeUser({ username: `f_pb_${Date.now()}`, profileVisibility: "private" });
+    const bRow = (await getDb().select().from(users).where(eq(users.id, b)))[0]!;
+    await expect(followUser(a, bRow.username)).rejects.toBeInstanceOf(FollowError);
+    await expect(followUser(a, bRow.username)).rejects.toMatchObject({ code: "private_profile" });
+    expect(await countFollowing(a)).toBe(0);
+  });
+
+  it("refuses self-follow", async () => {
+    const a = await makeUser({ username: `f_self_${Date.now()}` });
+    const aRow = (await getDb().select().from(users).where(eq(users.id, a)))[0]!;
+    await expect(followUser(a, aRow.username)).rejects.toMatchObject({ code: "self_follow" });
+  });
+
+  it("404s on unknown username", async () => {
+    const a = await makeUser({ username: `f_404_${Date.now()}` });
+    await expect(followUser(a, "no_such_user_xyz")).rejects.toMatchObject({ code: "user_not_found" });
+    expect(await countFollowing(a)).toBe(0);
+    // suppress lint by using afterEach effect indirectly
+    expect(typeof a).toBe("string");
+    // also touch follows table so the import isn't unused
+    const db = getDb();
+    const rows = await db.select().from(follows).where(eq(follows.followerId, a));
+    expect(rows.length).toBe(0);
+  });
+});

apps/journal/app/lib/follow.server.ts

@@ -0,0 +1,172 @@
+import { randomUUID } from "node:crypto";
+import { eq, and, count, desc } from "drizzle-orm";
+import { getDb } from "./db.ts";
+import { users, follows } from "@trails-cool/db/schema/journal";
+import { localActorIri } from "./actor-iri.ts";
+
+export class FollowError extends Error {
+  readonly code: "self_follow" | "private_profile" | "user_not_found" | "not_found";
+  constructor(code: FollowError["code"], message: string) {
+    super(message);
+    this.name = "FollowError";
+    this.code = code;
+  }
+}
+
+export interface FollowState {
+  following: boolean;
+  pending: boolean;
+}
+
+async function loadFollowableTarget(targetUsername: string) {
+  const db = getDb();
+  const [target] = await db
+    .select({
+      id: users.id,
+      username: users.username,
+      profileVisibility: users.profileVisibility,
+    })
+    .from(users)
+    .where(eq(users.username, targetUsername));
+  if (!target) throw new FollowError("user_not_found", "User not found");
+  return target;
+}
+
+/**
+ * Create a follow row from `followerId` to the local user with username
+ * `targetUsername`. Auto-accepted because the target is local + public.
+ * Idempotent: re-following an already-followed user returns the same state
+ * without creating a duplicate row.
+ */
+export async function followUser(followerId: string, targetUsername: string): Promise<FollowState> {
+  const target = await loadFollowableTarget(targetUsername);
+  if (target.id === followerId) {
+    throw new FollowError("self_follow", "Users cannot follow themselves");
+  }
+  if (target.profileVisibility !== "public") {
+    throw new FollowError("private_profile", "This profile is not followable");
+  }
+
+  const db = getDb();
+  const followedActorIri = localActorIri(target.username);
+  const [existing] = await db
+    .select({ id: follows.id, acceptedAt: follows.acceptedAt })
+    .from(follows)
+    .where(and(eq(follows.followerId, followerId), eq(follows.followedActorIri, followedActorIri)));
+  if (existing) {
+    return { following: existing.acceptedAt !== null, pending: existing.acceptedAt === null };
+  }
+
+  await db.insert(follows).values({
+    id: randomUUID(),
+    followerId,
+    followedActorIri,
+    followedUserId: target.id,
+    acceptedAt: new Date(),
+  });
+
+  return { following: true, pending: false };
+}
+
+/**
+ * Delete the follow row from `followerId` against the local user with
+ * username `targetUsername`. Idempotent.
+ */
+export async function unfollowUser(followerId: string, targetUsername: string): Promise<FollowState> {
+  const target = await loadFollowableTarget(targetUsername);
+  const db = getDb();
+  const followedActorIri = localActorIri(target.username);
+  await db
+    .delete(follows)
+    .where(and(eq(follows.followerId, followerId), eq(follows.followedActorIri, followedActorIri)));
+  return { following: false, pending: false };
+}
+
+/**
+ * Read-side helper: is `followerId` currently following `targetUsername`?
+ * Returns `null` when no row exists (so callers can distinguish "no follow"
+ * from "row exists but unaccepted" once federation's Pending state lands).
+ */
+export async function getFollowState(
+  followerId: string,
+  targetUsername: string,
+): Promise<FollowState | null> {
+  const db = getDb();
+  const followedActorIri = localActorIri(targetUsername);
+  const [row] = await db
+    .select({ acceptedAt: follows.acceptedAt })
+    .from(follows)
+    .where(and(eq(follows.followerId, followerId), eq(follows.followedActorIri, followedActorIri)));
+  if (!row) return null;
+  return { following: row.acceptedAt !== null, pending: row.acceptedAt === null };
+}
+
+export async function countFollowers(userId: string): Promise<number> {
+  const db = getDb();
+  const [row] = await db
+    .select({ n: count() })
+    .from(follows)
+    .where(eq(follows.followedUserId, userId));
+  return row?.n ?? 0;
+}
+
+export async function countFollowing(userId: string): Promise<number> {
+  const db = getDb();
+  const [row] = await db
+    .select({ n: count() })
+    .from(follows)
+    .where(eq(follows.followerId, userId));
+  return row?.n ?? 0;
+}
+
+export interface CollectionEntry {
+  username: string;
+  displayName: string | null;
+  domain: string;
+}
+
+const COLLECTION_PAGE_SIZE = 50;
+
+/**
+ * Paginated list of users who follow `userId`. Newest acceptance first.
+ */
+export async function listFollowers(userId: string, page: number = 1): Promise<CollectionEntry[]> {
+  const db = getDb();
+  const offset = (Math.max(1, page) - 1) * COLLECTION_PAGE_SIZE;
+  const rows = await db
+    .select({
+      username: users.username,
+      displayName: users.displayName,
+      domain: users.domain,
+    })
+    .from(follows)
+    .innerJoin(users, eq(follows.followerId, users.id))
+    .where(eq(follows.followedUserId, userId))
+    .orderBy(desc(follows.acceptedAt))
+    .limit(COLLECTION_PAGE_SIZE)
+    .offset(offset);
+  return rows;
+}
+
+/**
+ * Paginated list of users that `userId` follows. Newest acceptance first.
+ * Limited to local follows in this change (`followedUserId IS NOT NULL`);
+ * federation will surface remote actors here too.
+ */
+export async function listFollowing(userId: string, page: number = 1): Promise<CollectionEntry[]> {
+  const db = getDb();
+  const offset = (Math.max(1, page) - 1) * COLLECTION_PAGE_SIZE;
+  const rows = await db
+    .select({
+      username: users.username,
+      displayName: users.displayName,
+      domain: users.domain,
+    })
+    .from(follows)
+    .innerJoin(users, eq(follows.followedUserId, users.id))
+    .where(eq(follows.followerId, userId))
+    .orderBy(desc(follows.acceptedAt))
+    .limit(COLLECTION_PAGE_SIZE)
+    .offset(offset);
+  return rows;
+}

apps/journal/app/root.tsx

@@ -88,6 +88,9 @@ function NavBar({ user }: { user: { id: string; username: string } | null }) {
           </Link>
           {user && (
             <>
+              <Link to="/feed" className={linkClass("/feed")}>
+                {t("social.feed.title")}
+              </Link>
               <Link to="/routes" className={linkClass("/routes")}>
                 {t("nav.routes")}
               </Link>

apps/journal/app/routes.ts

@@ -23,6 +23,11 @@ export default [
   route("activities/new", "routes/activities.new.tsx"),
   route("activities/:id", "routes/activities.$id.tsx"),
   route("users/:username", "routes/users.$username.tsx"),
+  route("users/:username/followers", "routes/users.$username.followers.tsx"),
+  route("users/:username/following", "routes/users.$username.following.tsx"),
+  route("api/users/:username/follow", "routes/api.users.$username.follow.ts"),
+  route("api/users/:username/unfollow", "routes/api.users.$username.unfollow.ts"),
+  route("feed", "routes/feed.tsx"),
   route("settings", "routes/settings.tsx"),
   route("api/settings/profile", "routes/api.settings.profile.ts"),
   route("api/settings/email", "routes/api.settings.email.ts"),

apps/journal/app/routes/api.settings.profile.ts

@@ -12,11 +12,18 @@ export async function action({ request }: Route.ActionArgs) {
   const formData = await request.formData();
   const displayName = (formData.get("displayName") as string)?.trim() || null;
   const bio = (formData.get("bio") as string)?.trim().slice(0, 160) || null;
+  const rawVisibility = formData.get("profileVisibility") as string | null;
+  const profileVisibility: "public" | "private" | undefined =
+    rawVisibility === "public" || rawVisibility === "private" ? rawVisibility : undefined;
 
   const db = getDb();
   await db
     .update(users)
-    .set({ displayName, bio })
+    .set({
+      displayName,
+      bio,
+      ...(profileVisibility ? { profileVisibility } : {}),
+    })
     .where(eq(users.id, user.id));
 
   return data({ ok: true });

apps/journal/app/routes/api.users.$username.follow.ts

@@ -0,0 +1,26 @@
+import { data } from "react-router";
+import type { Route } from "./+types/api.users.$username.follow";
+import { getSessionUser } from "~/lib/auth.server";
+import { followUser, FollowError } 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 username = params.username;
+  if (!username) return data({ error: "username required" }, { status: 400 });
+
+  try {
+    const state = await followUser(user.id, username);
+    return data({ ok: true, ...state });
+  } catch (e) {
+    if (e instanceof FollowError) {
+      const status = e.code === "user_not_found" ? 404 : 400;
+      return data({ error: e.message, code: e.code }, { status });
+    }
+    throw e;
+  }
+}

apps/journal/app/routes/api.users.$username.unfollow.ts

@@ -0,0 +1,26 @@
+import { data } from "react-router";
+import type { Route } from "./+types/api.users.$username.unfollow";
+import { getSessionUser } from "~/lib/auth.server";
+import { unfollowUser, FollowError } 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 username = params.username;
+  if (!username) return data({ error: "username required" }, { status: 400 });
+
+  try {
+    const state = await unfollowUser(user.id, username);
+    return data({ ok: true, ...state });
+  } catch (e) {
+    if (e instanceof FollowError) {
+      const status = e.code === "user_not_found" ? 404 : 400;
+      return data({ error: e.message, code: e.code }, { status });
+    }
+    throw e;
+  }
+}

apps/journal/app/routes/feed.tsx

@@ -0,0 +1,102 @@
+import { data, redirect } from "react-router";
+import { useTranslation } from "react-i18next";
+import type { Route } from "./+types/feed";
+import { getSessionUser } from "~/lib/auth.server";
+import { listSocialFeed } from "~/lib/activities.server";
+import { ClientDate } from "~/components/ClientDate";
+import { ClientMap } from "~/components/ClientMap";
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const user = await getSessionUser(request);
+  if (!user) throw redirect("/auth/login");
+
+  const rows = await listSocialFeed(user.id, 50);
+  return data({
+    activities: rows.map((a) => ({
+      id: a.id,
+      name: a.name,
+      distance: a.distance,
+      elevationGain: a.elevationGain,
+      duration: a.duration,
+      startedAt: a.startedAt?.toISOString() ?? null,
+      createdAt: a.createdAt.toISOString(),
+      geojson: a.geojson ?? null,
+      ownerUsername: a.ownerUsername,
+      ownerDisplayName: a.ownerDisplayName,
+    })),
+  });
+}
+
+export function meta(_args: Route.MetaArgs) {
+  return [{ title: "Feed — trails.cool" }];
+}
+
+export default function Feed({ loaderData }: Route.ComponentProps) {
+  const { activities } = loaderData;
+  const { t } = useTranslation("journal");
+
+  return (
+    <div className="mx-auto max-w-4xl px-4 py-8">
+      <h1 className="text-2xl font-bold text-gray-900">{t("social.feed.heading")}</h1>
+
+      {activities.length === 0 ? (
+        <div className="mt-12 text-center">
+          <p className="text-gray-500">{t("social.feed.empty")}</p>
+          <a
+            href="/"
+            className="mt-3 inline-block text-sm text-blue-600 hover:underline"
+          >
+            {t("social.feed.publicFeedLink")}
+          </a>
+        </div>
+      ) : (
+        <ul className="mt-6 space-y-4">
+          {activities.map((a) => (
+            <li key={a.id}>
+              <a
+                href={`/activities/${a.id}`}
+                className="block rounded-lg border border-gray-200 p-4 hover:bg-gray-50"
+              >
+                <div className="flex gap-4">
+                  <div className="w-40 shrink-0">
+                    {a.geojson ? (
+                      <ClientMap geojson={a.geojson} />
+                    ) : (
+                      <div className="flex h-28 w-full items-center justify-center rounded bg-gray-100 text-xs text-gray-400">
+                        {t("routes.noMapPreview")}
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex flex-1 flex-col justify-between">
+                    <div>
+                      <h3 className="text-base font-medium text-gray-900">{a.name}</h3>
+                      <div className="mt-1 text-sm text-gray-500">
+                        <a
+                          href={`/users/${a.ownerUsername}`}
+                          className="hover:text-gray-700 hover:underline"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          {a.ownerDisplayName ?? a.ownerUsername}
+                        </a>
+                        {" · "}
+                        <ClientDate iso={a.startedAt ?? a.createdAt} />
+                      </div>
+                      <div className="mt-1 flex gap-4 text-sm text-gray-500">
+                        {a.distance != null && (
+                          <span>{(a.distance / 1000).toFixed(1)} km</span>
+                        )}
+                        {a.elevationGain != null && (
+                          <span>↑ {Math.round(a.elevationGain)} m</span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

apps/journal/app/routes/home.tsx

@@ -167,12 +167,20 @@ export default function Home({ loaderData }: Route.ComponentProps) {
               {user.displayName ?? user.username}
             </a>
           </h1>
-          <a
-            href="/activities/new"
-            className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
-          >
-            {t("activities.new")}
-          </a>
+          <div className="flex items-center gap-3">
+            <a
+              href="/feed"
+              className="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+            >
+              {t("social.feed.title")}
+            </a>
+            <a
+              href="/activities/new"
+              className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+            >
+              {t("activities.new")}
+            </a>
+          </div>
         </div>
 
         {showAddPasskey && !passkeyDone && supportsPasskey === true && (

apps/journal/app/routes/legal.privacy.tsx

@@ -394,6 +394,20 @@ export default function PrivacyPage() {
             including on your public profile at <code>/users/&lt;you&gt;</code>
             and on search engines that index those pages.
           </li>
+          <li>
+            Profile visibility (<code>public</code> / <code>private</code>,
+            default <code>public</code>): a separate switch from content
+            visibility. <code>private</code> 404s your profile page and makes
+            you unfollowable; you can still post <code>public</code> content
+            reachable by direct URL. Change anytime in account settings.
+          </li>
+          <li>
+            Follows: which users on this instance follow which. Visible to
+            anyone via your <code>/users/&lt;you&gt;/followers</code> and
+            <code>/users/&lt;you&gt;/following</code> pages, mirroring
+            Mastodon-style conventions. Set your profile to{" "}
+            <code>private</code> to be unfollowable.
+          </li>
         </ul>
       </section>
 

apps/journal/app/routes/settings.tsx

@@ -48,6 +48,7 @@ export async function loader({ request }: Route.LoaderArgs) {
       email: user.email,
       displayName: user.displayName,
       bio: user.bio,
+      profileVisibility: user.profileVisibility,
     },
     passkeys: passkeys.map((p) => ({
       id: p.id,
@@ -77,6 +78,9 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
 
   const [displayName, setDisplayName] = useState(user.displayName ?? "");
   const [bio, setBio] = useState(user.bio ?? "");
+  const [profileVisibility, setProfileVisibility] = useState<"public" | "private">(
+    user.profileVisibility,
+  );
   const [profileSaved, setProfileSaved] = useState(false);
 
   const [newEmail, setNewEmail] = useState("");
@@ -202,6 +206,49 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
             />
             <p className="mt-1 text-xs text-gray-500">{bio.length}/160</p>
           </div>
+          <fieldset>
+            <legend className="block text-sm font-medium text-gray-700">
+              {t("settings.profile.visibility.label")}
+            </legend>
+            <div className="mt-2 space-y-2">
+              <label className="flex items-start gap-2 text-sm">
+                <input
+                  type="radio"
+                  name="profileVisibility"
+                  value="public"
+                  checked={profileVisibility === "public"}
+                  onChange={() => setProfileVisibility("public")}
+                  className="mt-0.5"
+                />
+                <span>
+                  <span className="font-medium text-gray-900">
+                    {t("settings.profile.visibility.public")}
+                  </span>
+                  <span className="ml-2 text-gray-500">
+                    {t("settings.profile.visibility.publicHelp")}
+                  </span>
+                </span>
+              </label>
+              <label className="flex items-start gap-2 text-sm">
+                <input
+                  type="radio"
+                  name="profileVisibility"
+                  value="private"
+                  checked={profileVisibility === "private"}
+                  onChange={() => setProfileVisibility("private")}
+                  className="mt-0.5"
+                />
+                <span>
+                  <span className="font-medium text-gray-900">
+                    {t("settings.profile.visibility.private")}
+                  </span>
+                  <span className="ml-2 text-gray-500">
+                    {t("settings.profile.visibility.privateHelp")}
+                  </span>
+                </span>
+              </label>
+            </div>
+          </fieldset>
           <div className="flex items-center gap-3">
             <button
               type="submit"

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

@@ -0,0 +1,37 @@
+import { data } from "react-router";
+import { eq } from "drizzle-orm";
+import type { Route } from "./+types/users.$username.followers";
+import { getDb } from "~/lib/db";
+import { users } from "@trails-cool/db/schema/journal";
+import { listFollowers, countFollowers } from "~/lib/follow.server";
+import { CollectionPage } from "~/components/CollectionPage";
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const db = getDb();
+  const [user] = await db.select().from(users).where(eq(users.username, params.username));
+  if (!user || user.profileVisibility !== "public") {
+    throw data({ error: "User not found" }, { status: 404 });
+  }
+
+  const url = new URL(request.url);
+  const page = Math.max(1, parseInt(url.searchParams.get("page") ?? "1", 10) || 1);
+  const [entries, total] = await Promise.all([
+    listFollowers(user.id, page),
+    countFollowers(user.id),
+  ]);
+
+  return data({
+    user: { username: user.username, displayName: user.displayName },
+    page,
+    total,
+    entries,
+  });
+}
+
+export function meta({ data: d }: Route.MetaArgs) {
+  return [{ title: `Followers of @${d?.user.username ?? ""} — trails.cool` }];
+}
+
+export default function Followers({ loaderData }: Route.ComponentProps) {
+  return <CollectionPage kind="followers" {...loaderData} />;
+}

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

@@ -0,0 +1,37 @@
+import { data } from "react-router";
+import { eq } from "drizzle-orm";
+import type { Route } from "./+types/users.$username.following";
+import { getDb } from "~/lib/db";
+import { users } from "@trails-cool/db/schema/journal";
+import { listFollowing, countFollowing } from "~/lib/follow.server";
+import { CollectionPage } from "~/components/CollectionPage";
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const db = getDb();
+  const [user] = await db.select().from(users).where(eq(users.username, params.username));
+  if (!user || user.profileVisibility !== "public") {
+    throw data({ error: "User not found" }, { status: 404 });
+  }
+
+  const url = new URL(request.url);
+  const page = Math.max(1, parseInt(url.searchParams.get("page") ?? "1", 10) || 1);
+  const [entries, total] = await Promise.all([
+    listFollowing(user.id, page),
+    countFollowing(user.id),
+  ]);
+
+  return data({
+    user: { username: user.username, displayName: user.displayName },
+    page,
+    total,
+    entries,
+  });
+}
+
+export function meta({ data: d }: Route.MetaArgs) {
+  return [{ title: `Following of @${d?.user.username ?? ""} — trails.cool` }];
+}
+
+export default function Following({ loaderData }: Route.ComponentProps) {
+  return <CollectionPage kind="following" {...loaderData} />;
+}

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

@@ -8,7 +8,9 @@ import { getSessionUser } from "~/lib/auth.server";
 import { listPublicRoutesForOwner } from "~/lib/routes.server";
 import { listPublicActivitiesForOwner } from "~/lib/activities.server";
 import { loadPersona } from "~/lib/demo-bot.server";
+import { countFollowers, countFollowing, getFollowState } from "~/lib/follow.server";
 import { ClientDate } from "~/components/ClientDate";
+import { FollowButton } from "~/components/FollowButton";
 
 export async function loader({ params, request }: Route.LoaderArgs) {
   const db = getDb();
@@ -18,20 +20,33 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw data({ error: "User not found" }, { status: 404 });
   }
 
-  const [publicRoutes, publicActivities, currentUser] = await Promise.all([
+  const [publicRoutes, publicActivities, currentUser, followers, following] = await Promise.all([
     listPublicRoutesForOwner(user.id),
     listPublicActivitiesForOwner(user.id),
     getSessionUser(request),
+    countFollowers(user.id),
+    countFollowing(user.id),
   ]);
 
   const isOwn = currentUser?.id === user.id;
 
-  // 404 for users with no public content at all, to prevent account
-  // enumeration. Owners still see their own profile even when empty.
+  // 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).
+  const followState = !isOwn && currentUser
+    ? await getFollowState(currentUser.id, user.username)
+    : null;
+
   // 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.
@@ -64,6 +79,11 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     })),
     isOwn,
     isDemoUser,
+    followers,
+    following,
+    followState,
+    isLoggedIn: currentUser !== null,
+    profileVisibility: user.profileVisibility,
   });
 }
 
@@ -89,7 +109,7 @@ export function meta({ data: loaderData }: Route.MetaArgs) {
 }
 
 export default function UserProfilePage({ loaderData }: Route.ComponentProps) {
-  const { user, routes, activities, isOwn, isDemoUser } = loaderData;
+  const { user, routes, activities, isOwn, isDemoUser, followers, following, followState, isLoggedIn } = loaderData;
   const { t } = useTranslation("journal");
 
   return (
@@ -98,7 +118,7 @@ export default function UserProfilePage({ loaderData }: Route.ComponentProps) {
         <div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 text-2xl font-bold text-blue-600">
           {user.username[0]?.toUpperCase()}
         </div>
-        <div>
+        <div className="flex-1">
           <div className="flex items-center gap-2">
             <h1 className="text-2xl font-bold text-gray-900">
               {user.displayName ?? user.username}
@@ -113,10 +133,40 @@ export default function UserProfilePage({ loaderData }: Route.ComponentProps) {
             @{user.username}@{user.domain}
           </p>
           {user.bio && <p className="mt-2 text-gray-700">{user.bio}</p>}
+          <div className="mt-2 flex gap-4 text-sm text-gray-600">
+            <a
+              href={`/users/${user.username}/followers`}
+              className="hover:text-gray-900 hover:underline"
+            >
+              <span className="font-semibold text-gray-900">{followers}</span>{" "}
+              {t("social.followers.label")}
+            </a>
+            <a
+              href={`/users/${user.username}/following`}
+              className="hover:text-gray-900 hover:underline"
+            >
+              <span className="font-semibold text-gray-900">{following}</span>{" "}
+              {t("social.following.label")}
+            </a>
+          </div>
         </div>
+        {!isOwn && isLoggedIn && (
+          <FollowButton
+            username={user.username}
+            initialState={followState}
+          />
+        )}
       </div>
 
-      {isOwn && (
+      {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")}{" "}
+          <a href="/settings" className="underline hover:text-amber-900">
+            {t("profile.goToSettings")}
+          </a>
+        </div>
+      )}
+      {isOwn && loaderData.profileVisibility === "public" && (
         <div className="mt-6 rounded-md border border-blue-100 bg-blue-50 p-3 text-sm text-blue-800">
           {t("profile.ownNote")}{" "}
           <a href="/settings" className="underline hover:text-blue-900">