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,101 @@
+"use client";
+
+/**
+ * PostCard — renders one post in the public feed and the /u/me feed.
+ *
+ *   • Caption in serif (locked, can't be edited)
+ *   • Image grid (max 5; collapses to one column on the cheap)
+ *   • "Source" link back to the page the quote came from
+ *   • Optional onDelete callback shown only when the owner is viewing
+ *
+ * The source link always lands the user on the original passage with `?hl=`
+ * highlighting. If the stored source_url already carries `?hl=` we use it
+ * verbatim; otherwise we synthesise one from the post's caption so older
+ * posts (or imported data) still scroll to + highlight the text on click.
+ */
+
+import Image from "next/image";
+import Link from "next/link";
+import { Trash2, ExternalLink } from "lucide-react";
+import type { Post } from "@/lib/social";
+import { displaySourceLabel } from "@/lib/source-reference";
+import { appendHighlight, hasHighlight } from "@/lib/text-highlight";
+import { PostActionsFooter } from "./post-actions-footer";
+
+export function PostCard({
+  post,
+  onDelete,
+}: {
+  post: Post;
+  onDelete?: (id: string) => void;
+}) {
+  const sourceHref =
+    hasHighlight(post.source_url) || !post.caption
+      ? post.source_url
+      : appendHighlight(post.source_url, post.caption);
+
+  return (
+    <article className="rounded-xl bg-card ring-1 ring-foreground/10 p-5">
+      <p className="font-[family-name:var(--font-title)] text-lg text-foreground leading-relaxed">
+        “{post.caption}”
+      </p>
+
+      {post.images && post.images.length > 0 ? (
+        <div
+          className={`mt-4 grid gap-2 ${
+            post.images.length === 1
+              ? "grid-cols-1"
+              : post.images.length === 2
+                ? "grid-cols-2"
+                : "grid-cols-3"
+          }`}
+        >
+          {post.images.map((img) => (
+            <div
+              key={img.id}
+              className="relative aspect-square rounded-lg overflow-hidden bg-muted ring-1 ring-foreground/10"
+            >
+              <Image
+                src={img.url}
+                alt=""
+                fill
+                sizes="(max-width: 640px) 30vw, 200px"
+                className="object-cover"
+                unoptimized
+              />
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      <div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
+        <Link
+          href={sourceHref}
+          className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
+        >
+          <ExternalLink className="size-3" />
+          {displaySourceLabel(post.source_url, post.source_title)}
+        </Link>
+        <div className="flex items-center gap-3">
+          <span>{new Date(post.created_at).toLocaleDateString()}</span>
+          {onDelete ? (
+            <button
+              type="button"
+              onClick={() => onDelete(post.id)}
+              className="inline-flex items-center gap-1 text-muted-foreground hover:text-destructive transition-colors"
+              aria-label="Delete post"
+            >
+              <Trash2 className="size-3.5" />
+            </button>
+          ) : null}
+        </div>
+      </div>
+
+      {/* Action footer — like / comment / reshare on the left, add to
+          collection on the right. */}
+      <div className="mt-3 pt-2 border-t border-border">
+        <PostActionsFooter postID={post.id} />
+      </div>
+    </article>
+  );
+}