feat: add user centric features

2026-05-30 23:44:08 +05:30
parent 7bd2952caa
commit dcdd2383c6
63 changed files with 16783 additions and 1735 deletions
@@ -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>
+  );
+}