From e9b286b4df948449da5854ec7868665e2a0d0f23 Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Sun, 7 Jun 2026 12:37:04 +0200
Subject: [PATCH] =?UTF-8?q?feat(02-03):=20/feed=20page=20+=20home=20redire?=
 =?UTF-8?q?ct=20+=20nav=20Home=E2=86=92/feed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- src/app/(app)/feed/page.tsx: RSC shell with StoryTray seam + FeedList, metadata "Home — PawFeed"
- src/app/page.tsx: redirect("/feed") per D-04 (home route → /feed after Phase 2)
- Sidebar.tsx: Home href "/" → "/feed"; active detection handles /feed and / (D-05)
- MobileNav.tsx: Home href "/" → "/feed"; active state updated for /feed (D-05)
- (app)/layout.tsx: unchanged — zero-pets redirect to /onboarding/pet preserved (D-06)
---
 src/app/(app)/feed/page.tsx         | 26 ++++++++++
 src/app/page.tsx                    | 76 +++++------------------------
 src/components/layout/MobileNav.tsx |  7 +--
 src/components/layout/Sidebar.tsx   |  8 ++-
 4 files changed, 49 insertions(+), 68 deletions(-)
 create mode 100644 src/app/(app)/feed/page.tsx

diff --git a/src/app/(app)/feed/page.tsx b/src/app/(app)/feed/page.tsx
new file mode 100644
index 0000000..e1703a4
--- /dev/null
+++ b/src/app/(app)/feed/page.tsx
@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+import { FeedList } from "@/components/feed/FeedList";
+
+/**
+ * /feed — Home feed page (RSC shell).
+ *
+ * This is the primary landing page after login (D-04).
+ * The FeedList client component handles data fetching and infinite scroll.
+ *
+ * Layout: max-w-[640px] px-6 py-8 per UI-SPEC Feed container.
+ *
+ * StoryTray seam:
+ * // TODO(02-05): StoryTray above feed
+ */
+export const metadata: Metadata = {
+  title: "Home — PawFeed",
+};
+
+export default function FeedPage() {
+  return (
+    <div className="max-w-[640px] mx-auto px-6 py-8">
+      {/* TODO(02-05): StoryTray above feed */}
+      <FeedList />
+    </div>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3f36f7c..044229e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,65 +1,15 @@
-import Image from "next/image";
+import { redirect } from "next/navigation";
 
-export default function Home() {
-  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
+/**
+ * Root route (/) — redirects to /feed for authenticated users.
+ *
+ * D-04: After Phase 2, the home route (/) redirects to /feed.
+ * The feed is the primary landing page after login.
+ *
+ * Unauthenticated users are gated by proxy.ts middleware before reaching this page.
+ * proxy.ts redirects unauthenticated requests to /sign-in, so this redirect
+ * is effectively auth-safe (only authenticated users reach it).
+ */
+export default function RootPage() {
+  redirect("/feed");
 }
diff --git a/src/components/layout/MobileNav.tsx b/src/components/layout/MobileNav.tsx
index 4e379db..4275ca8 100644
--- a/src/components/layout/MobileNav.tsx
+++ b/src/components/layout/MobileNav.tsx
@@ -55,7 +55,8 @@ export function MobileNav({ pets }: MobileNavProps) {
 
   const activePet = pets.find((p) => p.id === activePetId) ?? pets[0];
 
-  const isHomePage = pathname === "/";
+  // D-05: Home → /feed; also highlight when on / (which redirects to /feed)
+  const isHomePage = pathname === "/feed" || pathname === "/";
   const isPetsPage = pathname.startsWith("/pets");
 
   return (
@@ -132,9 +133,9 @@ export function MobileNav({ pets }: MobileNavProps) {
         className="h-16 bg-card border-t border flex items-center justify-around px-2"
         aria-label="Mobile navigation"
       >
-        {/* Home */}
+        {/* Home — D-05: href updated to /feed; label stays "Home" */}
         <Link
-          href="/"
+          href="/feed"
           className={`flex flex-col items-center gap-0.5 px-3 py-2 text-xs ${
             isHomePage ? "text-orange-500" : "text-muted-foreground"
           }`}
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 96857ce..25a88cd 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -36,7 +36,7 @@ type SidebarProps = {
 };
 
 const navLinks = [
-  { href: "/", label: "Home", icon: Home, active: true },
+  { href: "/feed", label: "Home", icon: Home, active: true }, // D-05: Home → /feed
   { href: "/pets", label: "My Pets", icon: Heart, active: true },
   { href: "/explore", label: "Explore", icon: Compass, active: false },
   { href: "/notifications", label: "Notifications", icon: Bell, active: false },
@@ -145,8 +145,12 @@ export function Sidebar({ pets }: SidebarProps) {
       {/* Nav links */}
       <div className="flex-1 px-3 py-2 space-y-1">
         {navLinks.map(({ href, label, icon: Icon, active }) => {
+          // Active detection: /feed highlights when pathname is /feed or /
+          // (/ redirects to /feed, so treat both as Home active state)
           const isCurrentPage =
-            href === "/" ? pathname === "/" : pathname.startsWith(href);
+            href === "/feed"
+              ? pathname === "/feed" || pathname === "/"
+              : pathname.startsWith(href);
           const isActive = isCurrentPage;
 
           if (!active) {