ui enhancements

app/u/[handle]/collections/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+/**
+ * /u/[handle]/collections — public collections for a profile.
+ *
+ * The list comes from the layout's profile fetch (`public_collections`),
+ * so this page only has to decide between the empty state and the grid.
+ * Layout owns the ProfileHeader + tabs + container.
+ */
+
+import { CollectionViews } from "@/components/social/collection-views";
+import { usePublicProfile } from "../profile-context";
+
+export default function PublicProfileCollectionsPage() {
+  const data = usePublicProfile();
+  const list = data.public_collections ?? [];
+
+  if (list.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        No public collections yet.
+      </p>
+    );
+  }
+
+  return <CollectionViews collections={list} hrefFor={(c) => `/c/${c.id}`} />;
+}

app/u/[handle]/layout.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+/**
+ * /u/[handle] shared layout — public profile shell.
+ *
+ * Mirrors /u/me's layout so visitors see the same ProfileHeader + tab
+ * strip whether they're on the grid (`/u/<h>`) or the scroll feed
+ * (`/u/<h>/posts`). Without this layout, /u/<h>/posts rendered a bare
+ * `<main>` with extra padding — visually disconnected from /u/<h> and
+ * narrower than expected on mobile.
+ *
+ * Profile data is fetched once here and exposed via PublicProfileContext
+ * so child pages (which need `public_collections`, etc.) don't refetch.
+ *
+ * If the logged-in user lands on their own /u/<handle>, redirect to
+ * /u/me — preserving the `/posts` sub-path when present.
+ */
+
+import { use, useEffect, useState } from "react";
+import { notFound, usePathname, useRouter } from "next/navigation";
+import { AtSign, FolderClosed, LayoutGrid } from "lucide-react";
+import { profile, SocialError, type PublicProfile } from "@/lib/social";
+import { useAuth } from "@/components/auth/auth-provider";
+import { ProfileHeader } from "@/components/profile/profile-header";
+import {
+  ProfileTabs,
+  type ProfileTab,
+} from "@/components/profile/profile-tabs";
+import { PublicProfileContext } from "./profile-context";
+
+export default function PublicProfileLayout(props: {
+  params: Promise<{ handle: string }>;
+  children: React.ReactNode;
+}) {
+  const { handle } = use(props.params);
+  const router = useRouter();
+  const pathname = usePathname();
+  const { user } = useAuth();
+  const [data, setData] = useState<PublicProfile | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [missing, setMissing] = useState(false);
+
+  const isOwn = !!user && user.handle.toLowerCase() === handle.toLowerCase();
+
+  useEffect(() => {
+    if (!isOwn) return;
+    // Preserve whatever sub-path the visitor is on so /u/<own>/collections
+    // jumps to /u/me/collections (and so on for /posts, /mentions).
+    const m = pathname.match(/^\/u\/[^/]+(\/.*)?$/);
+    const suffix = m?.[1] ?? "";
+    router.replace(`/u/me${suffix}`);
+  }, [isOwn, router, pathname]);
+
+  useEffect(() => {
+    if (isOwn) return;
+    let cancelled = false;
+    setLoading(true);
+    profile
+      .get(handle)
+      .then((p) => {
+        if (!cancelled) setData(p);
+      })
+      .catch((err) => {
+        if (err instanceof SocialError && err.status === 404) setMissing(true);
+      })
+      .finally(() => !cancelled && setLoading(false));
+    return () => {
+      cancelled = true;
+    };
+  }, [handle, isOwn]);
+
+  if (missing) notFound();
+  if (isOwn) return null;
+
+  if (loading || !data) {
+    return (
+      <main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6 py-12">
+        <p className="text-sm text-muted-foreground">Loading profile…</p>
+      </main>
+    );
+  }
+
+  const tabs: ProfileTab[] = [
+    {
+      href: `/u/${data.handle}`,
+      label: "Posts",
+      icon: <LayoutGrid className="size-5" />,
+      activeFor: [`/u/${data.handle}/posts`],
+    },
+    {
+      href: `/u/${data.handle}/collections`,
+      label: "Collections",
+      icon: <FolderClosed className="size-5" />,
+    },
+    {
+      href: `/u/${data.handle}/mentions`,
+      label: "Tagged",
+      icon: <AtSign className="size-5" />,
+    },
+  ];
+
+  return (
+    <main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6">
+      <ProfileHeader
+        avatarURL={data.avatar_url}
+        name={data.name}
+        handle={data.handle}
+        postCount={data.post_count}
+        joinedAt={data.joined_at}
+      />
+      <ProfileTabs tabs={tabs} />
+      <PublicProfileContext.Provider value={data}>
+        <div className="py-6">{props.children}</div>
+      </PublicProfileContext.Provider>
+    </main>
+  );
+}

app/u/[handle]/mentions/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+/**
+ * /u/[handle]/mentions — posts that tag this user.
+ *
+ * Mirror of /u/me/mentions: the tab is wired into the public profile
+ * shell so visitors see an empty state instead of a 404. Will swap to
+ * a real feed once the Mentions feature ships.
+ */
+
+import { AtSign } from "lucide-react";
+import { usePublicProfile } from "../profile-context";
+
+export default function PublicProfileMentionsPage() {
+  const data = usePublicProfile();
+  return (
+    <div className="flex flex-col items-center text-center gap-3 py-12 text-muted-foreground">
+      <AtSign className="size-8" />
+      <p className="text-sm">
+        Posts that tag <span className="text-foreground">@{data.handle}</span>{" "}
+        will appear here. Coming soon.
+      </p>
+    </div>
+  );
+}

app/u/[handle]/page.tsx

@@ -1,131 +1,55 @@
 "use client";
 
 /**
- * Public profile at /u/[handle].
+ * Public profile — Posts tab (default).
  *
- * Anonymous-friendly. Mirrors /u/me's shell — ProfileHeader at the top,
- * a smaller tab strip (Posts + Collections only; Bookmarks and Mentions
- * are private), then a grid of the active tab's content.
- *
- * Owner-handle redirect: when the logged-in user lands on their own
- * /u/<handle>, we send them to /u/me where the owner controls live.
+ * The /u/[handle] layout owns the ProfileHeader + tab strip + container;
+ * this page only renders the post grid. Tapping a thumbnail jumps to
+ * /u/[handle]/posts#post-<id> where the Instagram-style scroll feed
+ * shows the full passages.
  */
 
 import { use, useEffect, useState } from "react";
-import Link from "next/link";
-import { notFound, useRouter } from "next/navigation";
-import { FolderClosed, LayoutGrid } from "lucide-react";
-import {
-  profile,
-  SocialError,
-  type Post,
-  type PublicProfile,
-} from "@/lib/social";
-import { ProfileHeader } from "@/components/profile/profile-header";
-import {
-  ProfileTabs,
-  type ProfileTab,
-} from "@/components/profile/profile-tabs";
+import { profile, type Post } from "@/lib/social";
 import { PostViews } from "@/components/social/post-views";
-import { CollectionViews } from "@/components/social/collection-views";
-import { useAuth } from "@/components/auth/auth-provider";
+import { usePublicProfile } from "./profile-context";
 
-type Tab = "posts" | "collections";
-
-export default function PublicProfilePage(props: {
+export default function PublicProfilePostsPage(props: {
   params: Promise<{ handle: string }>;
-  searchParams?: Promise<{ tab?: string }>;
 }) {
   const { handle } = use(props.params);
-  const search = props.searchParams ? use(props.searchParams) : undefined;
-  const tab: Tab = search?.tab === "collections" ? "collections" : "posts";
-  const router = useRouter();
-  const { user } = useAuth();
-  const [data, setData] = useState<PublicProfile | null>(null);
+  const data = usePublicProfile();
   const [feed, setFeed] = useState<Post[]>([]);
   const [loading, setLoading] = useState(true);
-  const [notFoundState, setNotFound] = useState(false);
-
-  const isOwn = !!user && user.handle.toLowerCase() === handle.toLowerCase();
-  useEffect(() => {
-    if (isOwn) router.replace("/u/me");
-  }, [isOwn, router]);
 
   useEffect(() => {
-    if (isOwn) return;
     let cancelled = false;
     setLoading(true);
-    Promise.all([profile.get(handle), profile.feed(handle, 30)])
-      .then(([p, posts]) => {
-        if (cancelled) return;
-        setData(p);
-        setFeed(posts ?? []);
+    profile
+      .feed(handle, 30)
+      .then((rows) => {
+        if (!cancelled) setFeed(rows ?? []);
       })
-      .catch((err) => {
-        if (err instanceof SocialError && err.status === 404) {
-          setNotFound(true);
-        }
+      .catch(() => {
+        // Layout already 404'd if the handle is unknown; if the feed
+        // itself fails we just show an empty grid rather than blocking
+        // the page with an error toast.
       })
       .finally(() => !cancelled && setLoading(false));
     return () => {
       cancelled = true;
     };
-  }, [handle, isOwn]);
+  }, [handle]);
 
-  if (notFoundState) notFound();
-  if (isOwn) return null;
-
-  if (loading || !data) {
-    return (
-      <main className="flex-1 max-w-3xl w-full mx-auto px-4 py-12">
-        <p className="text-sm text-muted-foreground">Loading profile…</p>
-      </main>
-    );
+  if (loading) {
+    return <p className="text-sm text-muted-foreground">Loading…</p>;
   }
 
-  const tabs: ProfileTab[] = [
-    {
-      href: `/u/${data.handle}`,
-      label: "Posts",
-      icon: <LayoutGrid className="size-5" />,
-    },
-    {
-      href: `/u/${data.handle}?tab=collections`,
-      label: "Collections",
-      icon: <FolderClosed className="size-5" />,
-    },
-  ];
-
   return (
-    <main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6">
-      <ProfileHeader
-        avatarURL={data.avatar_url}
-        name={data.name}
-        handle={data.handle}
-        postCount={data.post_count}
-        joinedAt={data.joined_at}
-      />
-      <ProfileTabs tabs={tabs} />
-      <div className="py-6">
-        {tab === "collections" ? (
-          data.public_collections && data.public_collections.length > 0 ? (
-            <CollectionViews
-              collections={data.public_collections}
-              hrefFor={(c) => `/c/${c.id}`}
-            />
-          ) : (
-            <p className="text-sm text-muted-foreground">
-              No public collections yet.
-            </p>
-          )
-        ) : (
-          <PostViews
-            posts={feed}
-            hrefFor={(p) => `/u/${data.handle}/posts#post-${p.id}`}
-            emptyMessage="No posts yet — quotes shared by this user will appear here."
-          />
-        )}
-      </div>
-    </main>
+    <PostViews
+      posts={feed}
+      hrefFor={(p) => `/u/${data.handle}/posts#post-${p.id}`}
+      emptyMessage="No posts yet — quotes shared by this user will appear here."
+    />
   );
 }

app/u/[handle]/posts/page.tsx

@@ -6,6 +6,12 @@
  * Mirrors /u/me/posts but read-only (no Delete / Update background). The
  * grid thumbnail on /u/[handle] links here with a `#post-<id>` hash so
  * the feed scrolls to the tapped post on mount.
+ *
+ * The parent /u/[handle]/layout owns the ProfileHeader + tab strip + the
+ * outer max-w-3xl container, so this page only needs the inner scroll
+ * column. The max-w-xl cap matches /u/me/posts so the column reads at
+ * the same width on desktop; on mobile both pages fall back to viewport
+ * width with the layout-supplied gutters.
  */
 
 import { use, useEffect, useRef, useState } from "react";
@@ -57,7 +63,7 @@ export default function PublicPostsFeedPage(props: {
   if (missing) notFound();
 
   return (
-    <main className="flex-1 max-w-xl w-full mx-auto px-3 sm:px-4 py-4 sm:py-6 space-y-6">
+    <div className="max-w-xl w-full mx-auto space-y-6">
       {loading ? (
         <p className="text-sm text-muted-foreground">Loading…</p>
       ) : feed.length === 0 ? (
@@ -65,6 +71,6 @@ export default function PublicPostsFeedPage(props: {
       ) : (
         feed.map((p) => <PostScrollCard key={p.id} post={p} />)
       )}
-    </main>
+    </div>
   );
 }

app/u/[handle]/profile-context.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import type { PublicProfile } from "@/lib/social";
+
+/** Set by the /u/[handle] layout after it fetches the profile. Child
+ *  pages read it to render content (e.g. the Collections tab needs the
+ *  profile's `public_collections` array) without a second fetch. */
+export const PublicProfileContext = createContext<PublicProfile | null>(null);
+
+export function usePublicProfile(): PublicProfile {
+  const v = useContext(PublicProfileContext);
+  if (!v) {
+    throw new Error(
+      "usePublicProfile must be used inside the /u/[handle] layout",
+    );
+  }
+  return v;
+}

app/u/me/layout.tsx

@@ -14,7 +14,7 @@
  */
 
 import { useEffect } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   AtSign,
   Bookmark,
@@ -30,6 +30,11 @@ export default function MeLayout({ children }: { children: React.ReactNode }) {
   const { user, loading } = useAuth();
   const { requireAuth } = useAuthGate();
   const router = useRouter();
+  const searchParams = useSearchParams();
+  // /u/me?edit=1 swaps the Posts grid for the inline edit form (see
+  // app/u/me/page.tsx). The tab strip would just be in the way while the
+  // user is editing — hide it for that one URL state.
+  const editMode = searchParams.get("edit") === "1";
 
   useEffect(() => {
     if (loading || user) return;
@@ -86,7 +91,7 @@ export default function MeLayout({ children }: { children: React.ReactNode }) {
         joinedAt={user.created_at}
         editHref="/u/me?edit=1"
       />
-      <ProfileTabs tabs={tabs} />
+      {editMode ? null : <ProfileTabs tabs={tabs} />}
       <div className="py-6">{children}</div>
     </main>
   );

app/u/me/posts/page.tsx

@@ -77,7 +77,7 @@ export default function MyPostsFeedPage() {
   if (!user) return null;
 
   return (
-    <main className="flex-1 max-w-xl w-full mx-auto px-3 sm:px-4 py-4 sm:py-6 space-y-6">
+    <div className="max-w-xl w-full mx-auto space-y-6">
       {error ? (
         <p className="text-sm text-destructive">{error}</p>
       ) : loading ? (
@@ -103,6 +103,6 @@ export default function MyPostsFeedPage() {
         confirmLabel="Delete post"
         onConfirm={performDelete}
       />
-    </main>
+    </div>
   );
 }