feat: add user centric features

app/u/[handle]/page.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+/**
+ * Public profile at /u/[handle].
+ *
+ * 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.
+ */
+
+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 { PostViews } from "@/components/social/post-views";
+import { CollectionViews } from "@/components/social/collection-views";
+import { useAuth } from "@/components/auth/auth-provider";
+
+type Tab = "posts" | "collections";
+
+export default function PublicProfilePage(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 [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 ?? []);
+      })
+      .catch((err) => {
+        if (err instanceof SocialError && err.status === 404) {
+          setNotFound(true);
+        }
+      })
+      .finally(() => !cancelled && setLoading(false));
+    return () => {
+      cancelled = true;
+    };
+  }, [handle, isOwn]);
+
+  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>
+    );
+  }
+
+  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>
+  );
+}

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

@@ -0,0 +1,70 @@
+"use client";
+
+/**
+ * /u/[handle]/posts — public Instagram-style scroll feed.
+ *
+ * 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.
+ */
+
+import { use, useEffect, useRef, useState } from "react";
+import { notFound } from "next/navigation";
+import { profile, SocialError, type Post } from "@/lib/social";
+import { PostScrollCard } from "@/components/social/post-scroll-card";
+
+export default function PublicPostsFeedPage(props: {
+  params: Promise<{ handle: string }>;
+}) {
+  const { handle } = use(props.params);
+  const [feed, setFeed] = useState<Post[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [missing, setMissing] = useState(false);
+  const scrolledToHashRef = useRef(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    profile
+      .feed(handle, 60)
+      .then((rows) => {
+        if (cancelled) return;
+        setFeed(rows ?? []);
+      })
+      .catch((err) => {
+        if (err instanceof SocialError && err.status === 404) {
+          setMissing(true);
+        }
+      })
+      .finally(() => !cancelled && setLoading(false));
+    return () => {
+      cancelled = true;
+    };
+  }, [handle]);
+
+  useEffect(() => {
+    if (loading || feed.length === 0 || scrolledToHashRef.current) return;
+    if (typeof window === "undefined") return;
+    const hash = window.location.hash;
+    if (!hash) return;
+    scrolledToHashRef.current = true;
+    requestAnimationFrame(() => {
+      const el = document.getElementById(hash.slice(1));
+      if (el) el.scrollIntoView({ block: "start", behavior: "auto" });
+    });
+  }, [loading, feed.length]);
+
+  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">
+      {loading ? (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      ) : feed.length === 0 ? (
+        <p className="text-sm text-muted-foreground">No posts yet.</p>
+      ) : (
+        feed.map((p) => <PostScrollCard key={p.id} post={p} />)
+      )}
+    </main>
+  );
+}