chore: code refactor
This commit is contained in:
gosangam
@@ -0,0 +1,151 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* 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 — 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
|
||||
* 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 { ExternalLink, Repeat2 } from "lucide-react";
|
||||
import type { Post } from "@/lib/social";
|
||||
import { displaySourceLabel } from "@/lib/source-reference";
|
||||
import { appendHighlight, hasHighlight } from "@/lib/text-highlight";
|
||||
import { UserAvatar } from "@/components/ui/user-avatar";
|
||||
import { PostActionsFooter } from "./post-actions-footer";
|
||||
import { PostCardMenu } from "./post-card-menu";
|
||||
|
||||
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);
|
||||
|
||||
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 select-none">
|
||||
{/* Reshare attribution — only on rows that are themselves
|
||||
reshares. The link goes to the original author's profile;
|
||||
their handle is rendered inline so the source is obvious.
|
||||
The post body below shows the resharer as the author (this
|
||||
IS their post — likes, comments, and background all belong
|
||||
to them, independent from the original). */}
|
||||
{post.reshared_from_post_id && post.original_author_handle ? (
|
||||
<Link
|
||||
href={`/u/${post.original_author_handle}`}
|
||||
className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground mb-3 transition-colors"
|
||||
>
|
||||
<Repeat2 className="size-3.5" />
|
||||
<span>
|
||||
Reshared from{" "}
|
||||
<span className="font-medium">@{post.original_author_handle}</span>
|
||||
</span>
|
||||
</Link>
|
||||
) : null}
|
||||
{/* 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">
|
||||
<UserAvatar
|
||||
src={post.author_avatar_url}
|
||||
name={authorName}
|
||||
className="size-9"
|
||||
/>
|
||||
<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>
|
||||
|
||||
{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>
|
||||
<span>{new Date(post.created_at).toLocaleDateString()}</span>
|
||||
</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 post={post} />
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user