feat: add feed

2026-06-14 00:18:31 +05:30
parent eb0c981d3c
commit 61581b67a7
9 changed files with 395 additions and 47 deletions
@@ -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>
+  );
+}