feat: add feed

app/(app)/page.tsx

@@ -1,29 +1,40 @@
 "use client";
 
 import Link from "next/link";
-import { Compass, LogIn, Sparkles } from "lucide-react";
+import { Compass, Loader2, LogIn, Sparkles } from "lucide-react";
 import { useAuth } from "@/components/auth/auth-provider";
 import { SadhnaStreakCTA } from "@/components/sadhna/streak-cta";
+import { HomeFeed } from "@/components/feed/home-feed";
 
 /**
  * / — the Home (Feed) gate.
  *
- * The Instagram-inspired infinite-scroll feed of posts from people you
- * follow will live here. Until that ships we show two paths:
- *
- *   • Sign in — for visitors who don't have an account yet; the eventual
- *     feed is personalised, so an account is the prerequisite.
- *   • Explore the Knowledgebase — Śrīla Prabhupāda's full library is
- *     ready today, regardless of feed status.
- *
- * The "Sign in" CTA hides once the user is authenticated — at that point
- * there's nothing to gate, just a "feed coming soon" note above the
- * always-on Knowledgebase entry.
+ *   • Signed in → the daily sādhana streak on top, then the global,
+ *     personalised infinite-scroll feed of community posts.
+ *   • Anonymous → a welcome screen: sign in (the feed is personalised, so an
+ *     account is the prerequisite) or jump into the Knowledgebase.
  */
-
 export default function HomePage() {
   const { user, loading } = useAuth();
-  const authed = !loading && !!user;
+
+  if (loading) {
+    return (
+      <main className="flex-1 flex items-center justify-center py-24">
+        <Loader2 className="size-6 animate-spin text-muted-foreground" />
+      </main>
+    );
+  }
+
+  if (user) {
+    return (
+      <main className="flex-1 max-w-2xl w-full mx-auto px-4 sm:px-6 py-6">
+        <div className="mb-6">
+          <SadhnaStreakCTA />
+        </div>
+        <HomeFeed />
+      </main>
+    );
+  }
 
   return (
     <main className="flex-1 max-w-2xl w-full mx-auto px-4 sm:px-6 py-16 sm:py-24 select-none">
@@ -36,51 +47,41 @@ export default function HomePage() {
         </span>
 
         <h1 className="font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-3xl text-foreground leading-tight text-balance">
-          {authed
-            ? "Your feed is coming soon"
-            : "Welcome to Prabhupāda Says"}
+          Welcome to Prabhupāda Says
         </h1>
 
         <p className="text-sm text-muted-foreground leading-relaxed max-w-md">
-          {authed
-            ? "We're building a feed of quotes shared by the community. Until it lands, dive into the Knowledgebase — Śrīla Prabhupāda's books, letters, lectures, and teachings."
-            : "Sign in to follow seekers and see their quotes here once the feed launches, or jump straight into the Knowledgebase — the original, unedited writings of His Divine Grace A.C. Bhaktivedanta Swami Prabhupāda."}
+          Sign in to follow seekers and see their quotes in your feed, or jump
+          straight into the Knowledgebase — the original, unedited writings of
+          His Divine Grace A.C. Bhaktivedanta Swami Prabhupāda.
         </p>
 
         <div className="flex flex-col sm:flex-row items-center gap-3 mt-2">
-          {!authed ? (
-            <Link
-              href="/login"
-              className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary text-primary-foreground px-5 h-11 text-sm font-medium hover:bg-primary/90 transition-colors min-w-[12rem]"
-            >
-              <LogIn className="size-4" />
-              Sign in to view feed
-            </Link>
-          ) : null}
+          <Link
+            href="/login"
+            className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary text-primary-foreground px-5 h-11 text-sm font-medium hover:bg-primary/90 transition-colors min-w-[12rem]"
+          >
+            <LogIn className="size-4" />
+            Sign in to view feed
+          </Link>
           <Link
             href="/search"
-            className={
-              authed
-                ? "inline-flex items-center justify-center gap-2 rounded-lg bg-primary text-primary-foreground px-5 h-11 text-sm font-medium hover:bg-primary/90 transition-colors min-w-[12rem]"
-                : "inline-flex items-center justify-center gap-2 rounded-lg border border-border text-foreground px-5 h-11 text-sm font-medium hover:bg-muted transition-colors min-w-[12rem]"
-            }
+            className="inline-flex items-center justify-center gap-2 rounded-lg border border-border text-foreground px-5 h-11 text-sm font-medium hover:bg-muted transition-colors min-w-[12rem]"
           >
             <Compass className="size-4" />
             Explore Knowledgebase
           </Link>
         </div>
 
-        {!authed ? (
-          <p className="text-xs text-muted-foreground mt-1">
-            No account?{" "}
-            <Link href="/signup" className="text-foreground hover:underline">
-              Create one
-            </Link>{" "}
-            — it&apos;s free.
-          </p>
-        ) : null}
+        <p className="text-xs text-muted-foreground mt-1">
+          No account?{" "}
+          <Link href="/signup" className="text-foreground hover:underline">
+            Create one
+          </Link>{" "}
+          — it&apos;s free.
+        </p>
 
-        {/* Daily sādhana streak — a simple entry point until the feed lands. */}
+        {/* Daily sādhana streak — a simple entry point for visitors. */}
         <div className="mt-6 w-full max-w-md">
           <SadhnaStreakCTA />
         </div>