feat: add user centric features

app/u/me/bookmarks/page.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { Trash2, ExternalLink } from "lucide-react";
+import { bookmarks, SocialError, type Bookmark } from "@/lib/social";
+import { useAuth } from "@/components/auth/auth-provider";
+import { appendHighlight, hasHighlight } from "@/lib/text-highlight";
+import { displaySourceLabel } from "@/lib/source-reference";
+
+const FREE_LIMIT = 1;
+const PREMIUM_LIMIT = 5;
+
+export default function MyBookmarksPage() {
+  const { user } = useAuth();
+  const [list, setList] = useState<Bookmark[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setLoading(true);
+    bookmarks
+      .list()
+      .then((r) => setList(r ?? []))
+      .catch((err) =>
+        setError(
+          err instanceof SocialError ? err.message : "Could not load bookmarks.",
+        ),
+      )
+      .finally(() => setLoading(false));
+  }, []);
+
+  async function remove(id: string) {
+    const prev = list;
+    setList((rows) => rows.filter((b) => b.id !== id));
+    try {
+      await bookmarks.delete(id);
+    } catch (err) {
+      setList(prev);
+      setError(err instanceof SocialError ? err.message : "Could not delete.");
+    }
+  }
+
+  const limit = user?.role === "admin" || user?.plan === "premium" ? PREMIUM_LIMIT : FREE_LIMIT;
+
+  if (loading) return <p className="text-sm text-muted-foreground">Loading…</p>;
+
+  return (
+    <div className="space-y-5">
+      <div className="rounded-lg bg-card/60 ring-1 ring-foreground/8 px-4 py-3 text-sm flex items-center justify-between">
+        <span className="text-muted-foreground">
+          Bookmarks used:{" "}
+          <span className="text-foreground tabular-nums">
+            {list.length} / {limit}
+          </span>
+        </span>
+        {user?.plan !== "premium" && list.length >= limit ? (
+          <span className="text-xs text-amber-600 dark:text-amber-400">
+            Upgrade to premium for 5 bookmarks
+          </span>
+        ) : null}
+      </div>
+
+      {error ? <p className="text-sm text-destructive">{error}</p> : null}
+
+      {list.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          No bookmarks yet. Select text anywhere and use “Add bookmark” in the
+          more menu.
+        </p>
+      ) : (
+        <ul className="space-y-3">
+          {list.map((b) => {
+            // If the stored URL doesn't already carry a `?hl=` (old data, or
+            // a bookmark saved without a selection), synthesise one from the
+            // excerpt so clicking still scrolls to + highlights the passage.
+            const href =
+              hasHighlight(b.source_url) || !b.excerpt
+                ? b.source_url
+                : appendHighlight(b.source_url, b.excerpt);
+            return (
+            <li
+              key={b.id}
+              className="rounded-xl bg-card ring-1 ring-foreground/10 p-4 flex items-start gap-3"
+            >
+              <div className="flex-1 min-w-0">
+                <Link
+                  href={href}
+                  className="font-[family-name:var(--font-title)] text-base text-foreground hover:underline inline-flex items-center gap-1"
+                >
+                  <ExternalLink className="size-3.5" />
+                  {displaySourceLabel(b.source_url, b.source_title)}
+                </Link>
+                {b.excerpt ? (
+                  <p className="mt-1 text-sm text-muted-foreground italic line-clamp-2">
+                    “{b.excerpt}”
+                  </p>
+                ) : null}
+                <p className="text-xs text-muted-foreground mt-2">
+                  Saved {new Date(b.created_at).toLocaleDateString()}
+                </p>
+              </div>
+              <button
+                onClick={() => remove(b.id)}
+                aria-label="Delete bookmark"
+                className="size-9 inline-flex items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
+              >
+                <Trash2 className="size-4" />
+              </button>
+            </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

app/u/me/collections/[id]/page.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+/**
+ * /u/me/collections/[id] — single-collection view.
+ *
+ * The whole page is the collection's CollectionScrollCard (carousel of
+ * cover + posts) and an Edit button below it. All editing — title,
+ * description, cover, member posts, delete — lives in the EditCollectionDrawer
+ * so the page itself stays focused on the carousel preview.
+ */
+
+import { use, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { ArrowLeft } from "lucide-react";
+import {
+  collections,
+  SocialError,
+  type Collection,
+  type Post,
+} from "@/lib/social";
+import { CollectionScrollCard } from "@/components/social/collection-scroll-card";
+import { EditCollectionDrawer } from "@/components/social/edit-collection-drawer";
+
+export default function CollectionDetailPage(props: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = use(props.params);
+  const router = useRouter();
+
+  const [c, setC] = useState<Collection | null>(null);
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [editOpen, setEditOpen] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    collections
+      .get(id)
+      .then(({ collection, posts }) => {
+        if (cancelled) return;
+        setC(collection);
+        setPosts(posts ?? []);
+      })
+      .catch((err) => {
+        setError(
+          err instanceof SocialError ? err.message : "Could not load collection.",
+        );
+      })
+      .finally(() => !cancelled && setLoading(false));
+    return () => {
+      cancelled = true;
+    };
+  }, [id]);
+
+  if (loading) return <p className="text-sm text-muted-foreground">Loading…</p>;
+  if (error && !c) return <p className="text-sm text-destructive">{error}</p>;
+  if (!c) return null;
+
+  return (
+    <div className="space-y-6">
+      <button
+        type="button"
+        onClick={() => router.push("/u/me/collections")}
+        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
+      >
+        <ArrowLeft className="size-4" /> All collections
+      </button>
+
+      <CollectionScrollCard
+        collection={c}
+        href={`/u/me/collections/${c.id}`}
+        initialPosts={posts}
+        onEdit={() => setEditOpen(true)}
+      />
+
+      <EditCollectionDrawer
+        open={editOpen}
+        onClose={() => setEditOpen(false)}
+        collection={c}
+        currentPostIds={posts.map((p) => p.id)}
+        onSaved={({ collection, posts: rows }) => {
+          setC(collection);
+          setPosts(rows);
+        }}
+        onDeleted={() => router.push("/u/me/collections")}
+      />
+    </div>
+  );
+}

app/u/me/collections/page.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Plus } from "lucide-react";
+import { collections, SocialError, type Collection } from "@/lib/social";
+import { useAuth } from "@/components/auth/auth-provider";
+import { CollectionViews } from "@/components/social/collection-views";
+
+export default function MyCollectionsPage() {
+  const { user } = useAuth();
+  const [list, setList] = useState<Collection[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Inline create form
+  const [showCreate, setShowCreate] = useState(false);
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [isPublic, setIsPublic] = useState(true);
+  const [creating, setCreating] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    collections
+      .mine()
+      .then((r) => setList(r ?? []))
+      .catch((err) =>
+        setError(
+          err instanceof SocialError ? err.message : "Could not load collections.",
+        ),
+      )
+      .finally(() => setLoading(false));
+  }, []);
+
+  async function createOne(e: React.SyntheticEvent) {
+    e.preventDefault();
+    if (!title.trim()) return;
+    setCreating(true);
+    setError(null);
+    try {
+      const c = await collections.create({
+        title,
+        description: description || undefined,
+        is_public: isPublic,
+      });
+      setList((rows) => [c, ...rows]);
+      setTitle("");
+      setDescription("");
+      setShowCreate(false);
+    } catch (err) {
+      setError(err instanceof SocialError ? err.message : "Could not create.");
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  const isPremium = user?.plan === "premium";
+  const publicCount = list.filter((c) => c.is_public).length;
+  const privateCount = list.filter((c) => !c.is_public).length;
+
+  return (
+    <div className="space-y-5">
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">
+          {isPremium ? (
+            <>Premium — unlimited collections.</>
+          ) : (
+            <>
+              <span className="tabular-nums">{publicCount}</span> / 5 public ·{" "}
+              <span className="tabular-nums">{privateCount}</span> / 5 private
+            </>
+          )}
+        </p>
+        {!showCreate ? (
+          <button
+            onClick={() => setShowCreate(true)}
+            className="inline-flex items-center gap-1.5 rounded-lg bg-primary text-primary-foreground px-3 h-10 text-sm font-medium"
+          >
+            <Plus className="size-4" />
+            New
+          </button>
+        ) : null}
+      </div>
+
+      {showCreate ? (
+        <form
+          onSubmit={createOne}
+          className="rounded-xl bg-card ring-1 ring-foreground/10 p-4 space-y-3"
+        >
+          <input
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="Collection title"
+            maxLength={120}
+            required
+            className="w-full bg-background text-foreground text-base rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+          />
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Description (optional)"
+            rows={2}
+            className="w-full bg-background text-foreground text-sm rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40 resize-none"
+          />
+          <div className="flex items-center justify-between text-sm">
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={isPublic}
+                onChange={(e) => setIsPublic(e.target.checked)}
+              />
+              <span className="text-foreground">Public</span>
+            </label>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => {
+                  setShowCreate(false);
+                  setTitle("");
+                }}
+                className="px-3 h-9 rounded-md text-muted-foreground hover:bg-muted"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={creating || !title.trim()}
+                className="px-3 h-9 rounded-md bg-primary text-primary-foreground disabled:opacity-60"
+              >
+                {creating ? "Creating…" : "Create"}
+              </button>
+            </div>
+          </div>
+        </form>
+      ) : null}
+
+      {error ? <p className="text-sm text-destructive">{error}</p> : null}
+
+      {loading ? (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      ) : (
+        <CollectionViews
+          collections={list}
+          hrefFor={(c) => `/u/me/collections/${c.id}`}
+          emptyMessage="No collections yet — create one above, or save a quote into a new collection from the selection toolbar."
+        />
+      )}
+    </div>
+  );
+}

app/u/me/layout.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+/**
+ * /u/me shared layout — auth gate + Instagram-style profile shell.
+ *
+ *   • Anonymous visitors trigger the global AuthModal and are bounced
+ *     home if they dismiss it (unchanged from before).
+ *   • Renders the ProfileHeader + ProfileTabs above every /u/me/* page.
+ *     Tabs: Posts / Collections / Bookmarks / Mentions.
+ *
+ * The old left ProfileSidebar is gone. The "Edit profile" affordance
+ * moved onto the header as a button that toggles edit mode on /u/me
+ * via a query param (kept simple — no new route for the form).
+ */
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import {
+  AtSign,
+  Bookmark,
+  FolderClosed,
+  LayoutGrid,
+} from "lucide-react";
+import { useAuth } from "@/components/auth/auth-provider";
+import { useAuthGate } from "@/components/auth/auth-gate";
+import { ProfileHeader } from "@/components/profile/profile-header";
+import { ProfileTabs, type ProfileTab } from "@/components/profile/profile-tabs";
+
+export default function MeLayout({ children }: { children: React.ReactNode }) {
+  const { user, loading } = useAuth();
+  const { requireAuth } = useAuthGate();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (loading || user) return;
+    let cancelled = false;
+    (async () => {
+      const ok = await requireAuth();
+      if (!ok && !cancelled) router.replace("/");
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [loading, user, requireAuth, router]);
+
+  if (loading || !user) {
+    return (
+      <main className="flex-1 flex items-center justify-center px-4 py-12">
+        <p className="text-sm text-muted-foreground">
+          {loading ? "Loading…" : "Sign in to view your library."}
+        </p>
+      </main>
+    );
+  }
+
+  const tabs: ProfileTab[] = [
+    {
+      href: "/u/me",
+      label: "Posts",
+      icon: <LayoutGrid className="size-5" />,
+      activeFor: ["/u/me/posts"],
+    },
+    {
+      href: "/u/me/collections",
+      label: "Collections",
+      icon: <FolderClosed className="size-5" />,
+    },
+    {
+      href: "/u/me/bookmarks",
+      label: "Bookmarks",
+      icon: <Bookmark className="size-5" />,
+    },
+    {
+      href: "/u/me/mentions",
+      label: "Mentions",
+      icon: <AtSign className="size-5" />,
+    },
+  ];
+
+  return (
+    <main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6">
+      <ProfileHeader
+        avatarURL={user.avatar_url}
+        name={user.name}
+        handle={user.handle}
+        joinedAt={user.created_at}
+        editHref="/u/me?edit=1"
+      />
+      <ProfileTabs tabs={tabs} />
+      <div className="py-6">{children}</div>
+    </main>
+  );
+}

app/u/me/mentions/page.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+/**
+ * /u/me/mentions — placeholder until the Mentions feature ships.
+ *
+ * The tab itself is wired into the profile shell already so users see
+ * an empty state instead of a 404 when they tap it.
+ */
+
+import { AtSign } from "lucide-react";
+
+export default function MentionsPage() {
+  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">
+        Mentions of you across posts will appear here. Coming soon.
+      </p>
+    </div>
+  );
+}

app/u/me/page.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+/**
+ * /u/me — owner Posts grid (the default tab).
+ *
+ * Grid-only — no Grid/Scroll toggle. Tapping a thumbnail jumps to
+ * /u/me/posts#post-<id> where the Instagram-style scroll feed renders
+ * the full passages.
+ *
+ * `?edit=1` (set by the header's Edit profile button) swaps the grid
+ * for the inline edit form. Saving returns to /u/me. Keeps the URL
+ * shareable while avoiding a separate route + layout.
+ */
+
+import { useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { LayoutGrid } from "lucide-react";
+import { useAuth } from "@/components/auth/auth-provider";
+import { ProfileEditForm } from "@/components/profile/profile-edit-form";
+import { PostGridCard } from "@/components/social/post-grid-card";
+import { ConfirmModal } from "@/components/ui/confirm-modal";
+import { posts, SocialError, type Post } from "@/lib/social";
+
+export default function MyProfilePage() {
+  const { user } = useAuth();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const editMode = searchParams.get("edit") === "1";
+
+  const [feed, setFeed] = useState<Post[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  // Post id pending confirmation — modal opens when non-null and runs
+  // the actual delete on confirm.
+  const [pendingDelete, setPendingDelete] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!user) return;
+    setLoading(true);
+    posts
+      .mine()
+      .then((rows) => setFeed(rows ?? []))
+      .catch((err) =>
+        setError(
+          err instanceof SocialError ? err.message : "Could not load posts.",
+        ),
+      )
+      .finally(() => setLoading(false));
+  }, [user]);
+
+  // Card delete buttons stage an id; ConfirmModal runs `performDelete`
+  // when the user confirms. We throw on failure so the modal stays open
+  // with an inline error message.
+  async function performDelete() {
+    const id = pendingDelete;
+    if (!id) return;
+    const prev = feed;
+    setFeed((rows) => rows.filter((p) => p.id !== id));
+    try {
+      await posts.delete(id);
+    } catch (err) {
+      setFeed(prev);
+      const msg =
+        err instanceof SocialError ? err.message : "Could not delete.";
+      setError(msg);
+      throw new Error(msg);
+    }
+  }
+
+  function onPostUpdated(updated: Post) {
+    setFeed((rows) => rows.map((p) => (p.id === updated.id ? updated : p)));
+  }
+
+  if (!user) return null;
+
+  if (editMode) {
+    return <ProfileEditForm user={user} onDone={() => router.replace("/u/me")} />;
+  }
+
+  return (
+    <section>
+      {error ? (
+        <p className="text-sm text-destructive">{error}</p>
+      ) : loading ? (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      ) : feed.length === 0 ? (
+        <EmptyPosts />
+      ) : (
+        <div className="grid grid-cols-2 gap-2 sm:gap-3">
+          {feed.map((p) => (
+            <PostGridCard
+              key={p.id}
+              post={p}
+              onDelete={(id) => setPendingDelete(id)}
+              onUpdated={onPostUpdated}
+              href={`/u/me/posts#post-${p.id}`}
+            />
+          ))}
+        </div>
+      )}
+
+      <ConfirmModal
+        open={!!pendingDelete}
+        onClose={() => setPendingDelete(null)}
+        title="Delete this post?"
+        message="The post will be removed permanently from your feed and from any collections it's in. This can't be undone."
+        confirmLabel="Delete post"
+        onConfirm={performDelete}
+      />
+    </section>
+  );
+}
+
+function EmptyPosts() {
+  return (
+    <div className="flex flex-col items-center text-center gap-3 py-12 text-muted-foreground">
+      <LayoutGrid className="size-8" />
+      <p className="text-sm">
+        You haven&apos;t posted anything yet. Select any passage in the
+        knowledgebase and use the toolbar to share it to your feed.
+      </p>
+    </div>
+  );
+}

app/u/me/posts/page.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+/**
+ * /u/me/posts — the owner's Instagram-style scroll feed.
+ *
+ * Reached by tapping a thumbnail from the /u/me Posts grid. The clicked
+ * post's id arrives as a `#post-<id>` hash, and `scroll-mt-*` on each
+ * card spaces it below the sticky header so the anchor lands cleanly.
+ *
+ * Owner controls (Delete + Update background) are mounted per-card.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { useAuth } from "@/components/auth/auth-provider";
+import { PostScrollCard } from "@/components/social/post-scroll-card";
+import { ConfirmModal } from "@/components/ui/confirm-modal";
+import { posts, SocialError, type Post } from "@/lib/social";
+
+export default function MyPostsFeedPage() {
+  const { user } = useAuth();
+  const [feed, setFeed] = useState<Post[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [pendingDelete, setPendingDelete] = useState<string | null>(null);
+  const scrolledToHashRef = useRef(false);
+
+  useEffect(() => {
+    if (!user) return;
+    setLoading(true);
+    posts
+      .mine()
+      .then((rows) => setFeed(rows ?? []))
+      .catch((err) =>
+        setError(
+          err instanceof SocialError ? err.message : "Could not load posts.",
+        ),
+      )
+      .finally(() => setLoading(false));
+  }, [user]);
+
+  // Hash anchor: when the feed mounts, jump to the post identified in the
+  // URL hash. Defer one tick so the cards have laid out and `scroll-mt-*`
+  // can position the anchor below the sticky header.
+  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]);
+
+  async function performDelete() {
+    const id = pendingDelete;
+    if (!id) return;
+    const prev = feed;
+    setFeed((rows) => rows.filter((p) => p.id !== id));
+    try {
+      await posts.delete(id);
+    } catch (err) {
+      setFeed(prev);
+      const msg =
+        err instanceof SocialError ? err.message : "Could not delete.";
+      setError(msg);
+      // Re-throw so ConfirmModal surfaces the failure and stays open.
+      throw new Error(msg);
+    }
+  }
+
+  function onPostUpdated(updated: Post) {
+    setFeed((rows) => rows.map((p) => (p.id === updated.id ? updated : p)));
+  }
+
+  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">
+      {error ? (
+        <p className="text-sm text-destructive">{error}</p>
+      ) : 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}
+            onDelete={(id) => setPendingDelete(id)}
+            onUpdated={onPostUpdated}
+          />
+        ))
+      )}
+
+      <ConfirmModal
+        open={!!pendingDelete}
+        onClose={() => setPendingDelete(null)}
+        title="Delete this post?"
+        message="The post will be removed permanently from your feed and from any collections it's in. This can't be undone."
+        confirmLabel="Delete post"
+        onConfirm={performDelete}
+      />
+    </main>
+  );
+}