feat: add feed

components/social/post/feed-follow-button.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+/**
+ * FeedFollowButton — the inline Follow / Follow back affordance shown in a
+ * home-feed PostCard header for authors the viewer doesn't already follow.
+ *
+ * Follows are request-based, so a tap sends a request and the control settles
+ * into a non-interactive "Requested" pill (matching the profile action row).
+ * Anonymous taps route through the auth gate first.
+ */
+
+import { useState } from "react";
+import { Clock, UserPlus } from "lucide-react";
+import { toast } from "sonner";
+import { relationships, SocialError } from "@/lib/social";
+import { useAuthGate } from "@/components/auth/auth-gate";
+
+export function FeedFollowButton({
+  handle,
+  followsYou,
+}: {
+  handle: string;
+  /** The author already follows the viewer → label becomes "Follow back". */
+  followsYou: boolean;
+}) {
+  const { requireAuth } = useAuthGate();
+  const [requested, setRequested] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  async function follow() {
+    if (busy || requested) return;
+    if (!(await requireAuth())) return;
+    setBusy(true);
+    try {
+      await relationships.follow(handle);
+      setRequested(true);
+    } catch (err) {
+      toast.error(
+        err instanceof SocialError ? err.message : "Could not follow",
+        { duration: 3000 },
+      );
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  if (requested) {
+    return (
+      <span className="shrink-0 inline-flex items-center gap-1 rounded-full border border-border px-3 h-8 text-xs font-medium text-muted-foreground">
+        <Clock className="size-3.5" />
+        Requested
+      </span>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={follow}
+      disabled={busy}
+      className="shrink-0 inline-flex items-center gap-1 rounded-full bg-primary px-3 h-8 text-xs font-medium text-primary-foreground dark:text-white hover:bg-primary/90 transition-colors disabled:opacity-60"
+    >
+      <UserPlus className="size-3.5" />
+      {followsYou ? "Follow back" : "Follow"}
+    </button>
+  );
+}

components/social/post/post-card.tsx

@@ -30,13 +30,18 @@ import { UserAvatar } from "@/components/ui/user-avatar";
 import { timeAgo } from "@/lib/time";
 import { PostActionsFooter } from "./post-actions-footer";
 import { PostCardMenu } from "./post-card-menu";
+import { FeedFollowButton } from "./feed-follow-button";
 
 export function PostCard({
   post,
   onDelete,
+  enableFollow = false,
 }: {
   post: Post;
   onDelete?: (id: string) => void;
+  /** Home-feed only: show a Follow / Follow back button in the header for
+   *  authors the viewer doesn't already follow. */
+  enableFollow?: boolean;
 }) {
   const sourceHref =
     hasHighlight(post.source_url) || !post.caption
@@ -94,6 +99,12 @@ export function PostCard({
             {timeAgo(post.created_at)}
           </p>
         </div>
+        {enableFollow && authorHandle && !post.viewer_follows_author ? (
+          <FeedFollowButton
+            handle={authorHandle}
+            followsYou={!!post.author_follows_viewer}
+          />
+        ) : null}
         <PostCardMenu post={post} onDelete={onDelete} />
       </header>