feat: image compress before upload

components/social/post-card.tsx

@@ -3,10 +3,16 @@
 /**
  * PostCard — renders one post in the public feed and the /u/me feed.
  *
+ *   • Author header — avatar + display name + @handle on the left,
+ *     three-dot overflow menu on the right. Menu contents vary by
+ *     viewer (see PostCardMenu): author sees Delete; signed-in
+ *     non-author sees Block + Report; anonymous sees Report.
  *   • 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
+ *   • Optional onDelete callback — passed through to PostCardMenu so
+ *     Delete actually does something on owner views (parent confirms +
+ *     calls the API; same pattern as before the menu refactor).
  *
  * 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
@@ -16,11 +22,12 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { Trash2, ExternalLink } from "lucide-react";
+import { 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";
+import { PostCardMenu } from "./post-card-menu";
 
 export function PostCard({
   post,
@@ -34,8 +41,39 @@ export function PostCard({
       ? post.source_url
       : appendHighlight(post.source_url, post.caption);
 
+  const authorName = post.author_name || "Unknown";
+  const authorHandle = post.author_handle ?? null;
+
   return (
     <article className="rounded-xl bg-card ring-1 ring-foreground/10 p-5">
+      {/* Author header — identity on the left, overflow menu on the
+          right. The menu trigger only renders when there are items to
+          show (delete for owners, block/report for everyone else), so
+          a view with nothing to expose simply hides the dot. */}
+      <header className="flex items-center gap-3 mb-4">
+        <AuthorAvatar src={post.author_avatar_url ?? null} name={authorName} />
+        <div className="min-w-0 flex-1">
+          {authorHandle ? (
+            <Link
+              href={`/u/${authorHandle}`}
+              className="block text-sm font-semibold text-foreground truncate hover:underline"
+            >
+              {authorName}
+            </Link>
+          ) : (
+            <p className="text-sm font-semibold text-foreground truncate">
+              {authorName}
+            </p>
+          )}
+          {authorHandle ? (
+            <p className="text-xs text-muted-foreground truncate">
+              @{authorHandle}
+            </p>
+          ) : null}
+        </div>
+        <PostCardMenu post={post} onDelete={onDelete} />
+      </header>
+
       <p className="font-[family-name:var(--font-title)] text-lg text-foreground leading-relaxed">
         “{post.caption}”
       </p>
@@ -76,19 +114,7 @@ export function PostCard({
           <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>
+        <span>{new Date(post.created_at).toLocaleDateString()}</span>
       </div>
 
       {/* Action footer — like / comment / reshare on the left, add to
@@ -99,3 +125,30 @@ export function PostCard({
     </article>
   );
 }
+
+function AuthorAvatar({
+  src,
+  name,
+}: {
+  src: string | null;
+  name: string;
+}) {
+  if (src) {
+    return (
+      <Image
+        src={src}
+        alt={name}
+        width={36}
+        height={36}
+        className="size-9 rounded-full object-cover ring-1 ring-foreground/10 shrink-0"
+        unoptimized
+      />
+    );
+  }
+  const initial = name.charAt(0).toUpperCase() || "?";
+  return (
+    <div className="size-9 rounded-full bg-primary/15 text-primary flex items-center justify-center text-sm font-semibold ring-1 ring-foreground/10 shrink-0">
+      {initial}
+    </div>
+  );
+}