750 lines
26 KiB
TypeScript
750 lines
26 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* PostCommentsDrawer — the comments sheet for a post.
|
|
*
|
|
* Right-side on desktop, bottom on mobile (vaul `direction`), with a FULLY
|
|
* TRANSPARENT overlay so the post stays visible behind it while reading the
|
|
* thread. Anyone signed in can comment; the composer gates anonymous users
|
|
* through the auth modal.
|
|
*
|
|
* Threading is one level deep: top-level comments each own a single flat
|
|
* thread of replies. Replying to a reply still lands in that one thread,
|
|
* addressed (visually) to whoever was answered. The post author can pin one
|
|
* comment (shown first here and in the card footer) and delete any comment;
|
|
* a comment's author can delete their own (a thread root takes its replies
|
|
* with it — behind a confirm). Likes show a count only.
|
|
*/
|
|
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import Image from "next/image";
|
|
import { HiHeart, HiOutlineHeart } from "react-icons/hi2";
|
|
import { Loader2, Pin, PinOff, Send, Trash2, X } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
comments as commentsApi,
|
|
SocialError,
|
|
type Comment,
|
|
type Post,
|
|
type PostReportCategory,
|
|
} from "@/lib/social";
|
|
import { useAuth } from "@/components/auth/auth-provider";
|
|
import { useAuthGate } from "@/components/auth/auth-gate";
|
|
import { useMediaQuery } from "@/components/selection-toolbar/shared";
|
|
import { Drawer, DrawerContent } from "@/components/ui/drawer";
|
|
import { ConfirmModal } from "@/components/ui/confirm-modal";
|
|
|
|
const PAGE = 20;
|
|
|
|
export function PostCommentsDrawer({
|
|
open,
|
|
post,
|
|
onClose,
|
|
onPinnedChange,
|
|
}: {
|
|
open: boolean;
|
|
post: Post;
|
|
onClose: () => void;
|
|
/** Notifies the parent (the card footer) when the pinned comment changes,
|
|
* so the footer's pinned line stays in sync without a refetch. */
|
|
onPinnedChange?: (pinned: Comment | null) => void;
|
|
}) {
|
|
const { user } = useAuth();
|
|
const { requireAuth } = useAuthGate();
|
|
const isMobile = useMediaQuery("(max-width: 767px)");
|
|
const direction = isMobile ? "bottom" : "right";
|
|
const isPostAuthor = !!user && user.id === post.user_id;
|
|
|
|
const [items, setItems] = useState<Comment[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [hasMore, setHasMore] = useState(false);
|
|
const [posting, setPosting] = useState(false);
|
|
const [draft, setDraft] = useState("");
|
|
// The comment being replied to (null = a new top-level comment).
|
|
const [replyTo, setReplyTo] = useState<{ id: string; handle: string } | null>(
|
|
null,
|
|
);
|
|
const [toDelete, setToDelete] = useState<Comment | null>(null);
|
|
const [toReport, setToReport] = useState<Comment | null>(null);
|
|
const inputRef = useRef<HTMLTextAreaElement>(null);
|
|
|
|
// Load the first page whenever the drawer opens for a post.
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
let cancelled = false;
|
|
setLoading(true);
|
|
setItems([]);
|
|
setReplyTo(null);
|
|
commentsApi
|
|
.list(post.id, { limit: PAGE, offset: 0 })
|
|
.then((rows) => {
|
|
if (cancelled) return;
|
|
setItems(rows ?? []);
|
|
setHasMore((rows?.length ?? 0) === PAGE);
|
|
})
|
|
.catch(() => {})
|
|
.finally(() => !cancelled && setLoading(false));
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [open, post.id]);
|
|
|
|
const loadMore = useCallback(async () => {
|
|
try {
|
|
const rows = await commentsApi.list(post.id, {
|
|
limit: PAGE,
|
|
offset: items.length,
|
|
});
|
|
setItems((prev) => [...prev, ...(rows ?? [])]);
|
|
setHasMore((rows?.length ?? 0) === PAGE);
|
|
} catch {
|
|
/* leave the list as-is on error */
|
|
}
|
|
}, [post.id, items.length]);
|
|
|
|
// Replace a comment in place (after a like toggle / reply-count bump).
|
|
const patch = useCallback((id: string, fn: (c: Comment) => Comment) => {
|
|
setItems((prev) => prev.map((c) => (c.id === id ? fn(c) : c)));
|
|
}, []);
|
|
|
|
async function submit() {
|
|
const body = draft.trim();
|
|
if (!body || posting) return;
|
|
if (!(await requireAuth())) return;
|
|
setPosting(true);
|
|
try {
|
|
const created = await commentsApi.create(
|
|
post.id,
|
|
body,
|
|
replyTo?.id,
|
|
);
|
|
setDraft("");
|
|
if (created.parent_id) {
|
|
// A reply — bump the root's count and append into its open thread.
|
|
bumpReply(created.parent_id, created);
|
|
setReplyTo(null);
|
|
} else {
|
|
// Top-level — drop it in just below any pinned comment.
|
|
setItems((prev) => {
|
|
const pinnedFirst = prev[0]?.pinned_at ? 1 : 0;
|
|
return [
|
|
...prev.slice(0, pinnedFirst),
|
|
created,
|
|
...prev.slice(pinnedFirst),
|
|
];
|
|
});
|
|
}
|
|
} catch (err) {
|
|
toast.error(
|
|
err instanceof SocialError ? err.message : "Could not post comment",
|
|
{ duration: 3000 },
|
|
);
|
|
} finally {
|
|
setPosting(false);
|
|
}
|
|
}
|
|
|
|
// Append a freshly-created reply into its root thread's open reply list (if
|
|
// loaded) and bump the visible reply count.
|
|
const repliesRef = useRef<Record<string, (c: Comment) => void>>({});
|
|
function bumpReply(rootId: string, reply: Comment) {
|
|
patch(rootId, (c) => ({ ...c, reply_count: c.reply_count + 1 }));
|
|
repliesRef.current[rootId]?.(reply);
|
|
}
|
|
|
|
function startReply(target: Comment) {
|
|
// Reply chip addresses whoever was tapped; the thread is the root.
|
|
setReplyTo({ id: target.id, handle: target.author_handle });
|
|
inputRef.current?.focus();
|
|
}
|
|
|
|
async function pinToggle(c: Comment) {
|
|
const pinning = !c.pinned_at;
|
|
try {
|
|
if (pinning) await commentsApi.pin(c.id);
|
|
else await commentsApi.unpin(c.id);
|
|
// Reload the first page so pinned-first ordering is authoritative.
|
|
const rows = await commentsApi.list(post.id, { limit: PAGE, offset: 0 });
|
|
setItems(rows ?? []);
|
|
setHasMore((rows?.length ?? 0) === PAGE);
|
|
onPinnedChange?.(pinning ? { ...c, pinned_at: new Date().toISOString() } : null);
|
|
toast(pinning ? "Comment pinned" : "Comment unpinned", { duration: 1800 });
|
|
} catch (err) {
|
|
toast.error(
|
|
err instanceof SocialError ? err.message : "Could not update pin",
|
|
{ duration: 3000 },
|
|
);
|
|
}
|
|
}
|
|
|
|
async function confirmDelete() {
|
|
if (!toDelete) return;
|
|
const c = toDelete;
|
|
await commentsApi.delete(c.id);
|
|
if (c.parent_id) {
|
|
// A reply — drop the root's count; the thread list prunes itself.
|
|
patch(c.parent_id, (p) => ({
|
|
...p,
|
|
reply_count: Math.max(0, p.reply_count - 1),
|
|
}));
|
|
repliesRef.current[c.parent_id]?.({ ...c, body: "__deleted__" });
|
|
} else {
|
|
setItems((prev) => prev.filter((x) => x.id !== c.id));
|
|
if (c.pinned_at) onPinnedChange?.(null);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Drawer
|
|
open={open}
|
|
direction={direction}
|
|
repositionInputs={false}
|
|
onOpenChange={(o) => {
|
|
if (!o) onClose();
|
|
}}
|
|
>
|
|
<DrawerContent
|
|
direction={direction}
|
|
// Transparent scrim: keep the post visible behind the sheet.
|
|
overlayClassName="bg-transparent"
|
|
className={cn(
|
|
"bg-card flex flex-col shadow-2xl",
|
|
isMobile ? "h-[80vh]" : "h-full w-[420px] max-w-[92vw]",
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between border-b border-border px-4 py-3 shrink-0">
|
|
<h2 className="text-base font-semibold text-foreground">Comments</h2>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
aria-label="Close comments"
|
|
className="size-8 inline-flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
|
>
|
|
<X className="size-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto overscroll-contain px-4 py-3">
|
|
{loading ? (
|
|
<div className="flex justify-center py-10">
|
|
<Loader2 className="size-5 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : items.length === 0 ? (
|
|
<p className="py-10 text-center text-sm text-muted-foreground">
|
|
No comments yet. Be the first to comment.
|
|
</p>
|
|
) : (
|
|
<ul className="space-y-4">
|
|
{items.map((c) => (
|
|
<CommentRow
|
|
key={c.id}
|
|
comment={c}
|
|
viewerId={user?.id}
|
|
isPostAuthor={isPostAuthor}
|
|
onReply={startReply}
|
|
onLikeChange={(likes, liked) =>
|
|
patch(c.id, (x) => ({
|
|
...x,
|
|
likes_count: likes,
|
|
viewer_has_liked: liked,
|
|
}))
|
|
}
|
|
onPinToggle={() => pinToggle(c)}
|
|
onRequestDelete={setToDelete}
|
|
onRequestReport={setToReport}
|
|
requireAuth={requireAuth}
|
|
registerThread={(fn) => {
|
|
if (fn) repliesRef.current[c.id] = fn;
|
|
else delete repliesRef.current[c.id];
|
|
}}
|
|
/>
|
|
))}
|
|
{hasMore ? (
|
|
<li>
|
|
<button
|
|
type="button"
|
|
onClick={loadMore}
|
|
className="text-sm font-medium text-primary hover:underline"
|
|
>
|
|
Load more comments
|
|
</button>
|
|
</li>
|
|
) : null}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
|
|
{/* Composer */}
|
|
<div className="border-t border-border p-3 shrink-0">
|
|
{replyTo ? (
|
|
<div className="mb-2 flex items-center justify-between rounded-md bg-muted/60 px-3 py-1.5 text-xs text-muted-foreground">
|
|
<span>
|
|
Replying to <span className="font-medium">@{replyTo.handle}</span>
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setReplyTo(null)}
|
|
aria-label="Cancel reply"
|
|
className="rounded p-0.5 hover:text-foreground"
|
|
>
|
|
<X className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
<div className="flex items-end gap-2">
|
|
<textarea
|
|
ref={inputRef}
|
|
value={draft}
|
|
onChange={(e) => setDraft(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault();
|
|
submit();
|
|
}
|
|
}}
|
|
rows={1}
|
|
maxLength={2000}
|
|
placeholder={replyTo ? "Write a reply…" : "Add a comment…"}
|
|
className="flex-1 resize-none rounded-lg border border-border bg-background px-3 py-2 text-base sm:text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/40 max-h-32"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={submit}
|
|
disabled={posting || draft.trim() === ""}
|
|
aria-label="Post comment"
|
|
className="size-10 shrink-0 inline-flex items-center justify-center rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
|
|
>
|
|
{posting ? (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
) : (
|
|
<Send className="size-4" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
|
|
<ConfirmModal
|
|
open={toDelete !== null}
|
|
onClose={() => setToDelete(null)}
|
|
title="Delete this comment?"
|
|
message={
|
|
toDelete && !toDelete.parent_id && toDelete.reply_count > 0
|
|
? "Its replies will be deleted too. This can't be undone."
|
|
: "This can't be undone."
|
|
}
|
|
confirmLabel="Delete"
|
|
onConfirm={confirmDelete}
|
|
/>
|
|
|
|
<ReportCommentModal
|
|
comment={toReport}
|
|
onClose={() => setToReport(null)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ───────────────────────────────────────────────────────────────────────────
|
|
// One comment (top-level or reply). Top-level rows own a lazily-loaded reply
|
|
// thread; replies render the "Replying to @handle" prefix.
|
|
// ───────────────────────────────────────────────────────────────────────────
|
|
|
|
function CommentRow({
|
|
comment,
|
|
viewerId,
|
|
isPostAuthor,
|
|
onReply,
|
|
onLikeChange,
|
|
onPinToggle,
|
|
onRequestDelete,
|
|
onRequestReport,
|
|
requireAuth,
|
|
registerThread,
|
|
isReply = false,
|
|
}: {
|
|
comment: Comment;
|
|
viewerId?: string;
|
|
isPostAuthor: boolean;
|
|
onReply: (c: Comment) => void;
|
|
onLikeChange: (likes: number, liked: boolean) => void;
|
|
onPinToggle: () => void;
|
|
onRequestDelete: (c: Comment) => void;
|
|
onRequestReport: (c: Comment) => void;
|
|
requireAuth: () => Promise<boolean>;
|
|
/** Top-level rows register a callback so a newly-posted reply can be spliced
|
|
* into their open thread. Replies pass nothing. */
|
|
registerThread?: (fn: ((c: Comment) => void) | null) => void;
|
|
isReply?: boolean;
|
|
}) {
|
|
const [replies, setReplies] = useState<Comment[]>([]);
|
|
const [showReplies, setShowReplies] = useState(false);
|
|
const [repliesLoaded, setRepliesLoaded] = useState(false);
|
|
const likeBusy = useRef(false);
|
|
|
|
const canDelete = viewerId === comment.user_id || isPostAuthor;
|
|
const canReport = !!viewerId && viewerId !== comment.user_id;
|
|
const pinnable = isPostAuthor && !isReply;
|
|
|
|
// Expose a splice hook so the drawer can append a reply created from the
|
|
// composer. Replies created while collapsed still get the count bump; they
|
|
// show once expanded (re-fetched) or appended if already open.
|
|
useEffect(() => {
|
|
if (isReply || !registerThread) return;
|
|
registerThread((c: Comment) => {
|
|
if (c.body === "__deleted__") {
|
|
setReplies((prev) => prev.filter((x) => x.id !== c.id));
|
|
return;
|
|
}
|
|
setRepliesLoaded(true);
|
|
setShowReplies(true);
|
|
setReplies((prev) =>
|
|
prev.some((x) => x.id === c.id) ? prev : [...prev, c],
|
|
);
|
|
});
|
|
return () => registerThread(null);
|
|
}, [isReply, registerThread]);
|
|
|
|
async function toggleReplies() {
|
|
if (!showReplies && !repliesLoaded) {
|
|
try {
|
|
const rows = await commentsApi.replies(comment.id, { limit: 50 });
|
|
setReplies(rows ?? []);
|
|
setRepliesLoaded(true);
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
}
|
|
setShowReplies((v) => !v);
|
|
}
|
|
|
|
async function likeToggle() {
|
|
if (likeBusy.current) return;
|
|
if (!(await requireAuth())) return;
|
|
likeBusy.current = true;
|
|
const next = !comment.viewer_has_liked;
|
|
// optimistic
|
|
onLikeChange(
|
|
Math.max(0, comment.likes_count + (next ? 1 : -1)),
|
|
next,
|
|
);
|
|
try {
|
|
const res = next
|
|
? await commentsApi.like(comment.id)
|
|
: await commentsApi.unlike(comment.id);
|
|
onLikeChange(res.likes_count, next);
|
|
} catch (err) {
|
|
onLikeChange(comment.likes_count, comment.viewer_has_liked);
|
|
toast.error(
|
|
err instanceof SocialError ? err.message : "Could not update like",
|
|
{ duration: 3000 },
|
|
);
|
|
} finally {
|
|
likeBusy.current = false;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<li className={cn(isReply && "mt-3")}>
|
|
<div className="flex gap-3">
|
|
<Avatar src={comment.author_avatar_url ?? null} name={comment.author_name} />
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-semibold text-foreground truncate">
|
|
{comment.author_name}
|
|
</span>
|
|
{!isReply && comment.pinned_at ? (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary">
|
|
<Pin className="size-3" /> Pinned
|
|
</span>
|
|
) : null}
|
|
<span className="text-xs text-muted-foreground">
|
|
{timeAgo(comment.created_at)}
|
|
</span>
|
|
</div>
|
|
<p className="mt-0.5 whitespace-pre-wrap break-words text-sm text-foreground">
|
|
{comment.reply_to_handle ? (
|
|
<span className="font-medium text-primary">
|
|
@{comment.reply_to_handle}{" "}
|
|
</span>
|
|
) : null}
|
|
{comment.body}
|
|
</p>
|
|
|
|
{/* Inline action row */}
|
|
<div className="mt-1.5 flex items-center gap-4 text-xs text-muted-foreground">
|
|
<button
|
|
type="button"
|
|
onClick={likeToggle}
|
|
className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
|
|
aria-label={comment.viewer_has_liked ? "Unlike" : "Like"}
|
|
>
|
|
{comment.viewer_has_liked ? (
|
|
<HiHeart className="size-4 text-red-500" />
|
|
) : (
|
|
<HiOutlineHeart className="size-4" />
|
|
)}
|
|
{comment.likes_count > 0 ? (
|
|
<span className="tabular-nums">{comment.likes_count}</span>
|
|
) : null}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onReply(comment)}
|
|
className="font-medium hover:text-foreground transition-colors"
|
|
>
|
|
Reply
|
|
</button>
|
|
{pinnable ? (
|
|
<button
|
|
type="button"
|
|
onClick={onPinToggle}
|
|
className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
|
|
>
|
|
{comment.pinned_at ? (
|
|
<>
|
|
<PinOff className="size-3.5" /> Unpin
|
|
</>
|
|
) : (
|
|
<>
|
|
<Pin className="size-3.5" /> Pin
|
|
</>
|
|
)}
|
|
</button>
|
|
) : null}
|
|
{canDelete ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => onRequestDelete(comment)}
|
|
className="inline-flex items-center gap-1 hover:text-destructive transition-colors"
|
|
>
|
|
<Trash2 className="size-3.5" /> Delete
|
|
</button>
|
|
) : null}
|
|
{canReport ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => onRequestReport(comment)}
|
|
className="hover:text-foreground transition-colors"
|
|
>
|
|
Report
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
|
|
{/* Replies */}
|
|
{!isReply && comment.reply_count > 0 ? (
|
|
<button
|
|
type="button"
|
|
onClick={toggleReplies}
|
|
className="mt-2 text-xs font-medium text-primary hover:underline"
|
|
>
|
|
{showReplies
|
|
? "Hide replies"
|
|
: `View ${comment.reply_count} ${comment.reply_count === 1 ? "reply" : "replies"}`}
|
|
</button>
|
|
) : null}
|
|
|
|
{!isReply && showReplies ? (
|
|
<ul className="mt-1 border-l border-border pl-3">
|
|
{replies.map((r) => (
|
|
<CommentRow
|
|
key={r.id}
|
|
comment={r}
|
|
viewerId={viewerId}
|
|
isPostAuthor={isPostAuthor}
|
|
onReply={onReply}
|
|
onLikeChange={(likes, liked) =>
|
|
setReplies((prev) =>
|
|
prev.map((x) =>
|
|
x.id === r.id
|
|
? { ...x, likes_count: likes, viewer_has_liked: liked }
|
|
: x,
|
|
),
|
|
)
|
|
}
|
|
onPinToggle={() => {}}
|
|
onRequestDelete={onRequestDelete}
|
|
onRequestReport={onRequestReport}
|
|
requireAuth={requireAuth}
|
|
isReply
|
|
/>
|
|
))}
|
|
</ul>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
// ───────────────────────────────────────────────────────────────────────────
|
|
// Report modal (compact)
|
|
// ───────────────────────────────────────────────────────────────────────────
|
|
|
|
const REPORT_CATEGORIES: { value: PostReportCategory; label: string }[] = [
|
|
{ value: "spam", label: "Spam or misleading" },
|
|
{ value: "harassment", label: "Harassment or bullying" },
|
|
{ value: "misinformation", label: "Misinformation" },
|
|
{ value: "inappropriate", label: "Inappropriate content" },
|
|
{ value: "other", label: "Something else" },
|
|
];
|
|
|
|
function ReportCommentModal({
|
|
comment,
|
|
onClose,
|
|
}: {
|
|
comment: Comment | null;
|
|
onClose: () => void;
|
|
}) {
|
|
const [category, setCategory] = useState<PostReportCategory>("spam");
|
|
const [reason, setReason] = useState("");
|
|
const [working, setWorking] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (comment) {
|
|
setCategory("spam");
|
|
setReason("");
|
|
setWorking(false);
|
|
}
|
|
}, [comment]);
|
|
|
|
if (!comment) return null;
|
|
|
|
async function submit() {
|
|
if (!comment) return;
|
|
setWorking(true);
|
|
try {
|
|
await commentsApi.report(comment.id, category, reason.trim());
|
|
toast("Thanks — your report was submitted", { duration: 2500 });
|
|
onClose();
|
|
} catch (err) {
|
|
toast.error(
|
|
err instanceof SocialError ? err.message : "Could not submit report",
|
|
{ duration: 3000 },
|
|
);
|
|
} finally {
|
|
setWorking(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[110] flex items-center justify-center px-4">
|
|
<div
|
|
className="absolute inset-0 bg-foreground/40 backdrop-blur-sm"
|
|
onClick={() => !working && onClose()}
|
|
aria-hidden
|
|
/>
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
className="relative w-full max-w-md rounded-2xl border border-border bg-card shadow-xl p-5"
|
|
>
|
|
<h2 className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground">
|
|
Report comment
|
|
</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
Reports are private and reviewed by our team.
|
|
</p>
|
|
<div className="mt-4 space-y-1.5">
|
|
{REPORT_CATEGORIES.map((c) => (
|
|
<label
|
|
key={c.value}
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-md border px-3 py-2 cursor-pointer transition-colors",
|
|
category === c.value
|
|
? "border-primary bg-primary/5"
|
|
: "border-border hover:bg-muted",
|
|
)}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="comment-report-category"
|
|
value={c.value}
|
|
checked={category === c.value}
|
|
onChange={() => setCategory(c.value)}
|
|
className="accent-primary"
|
|
/>
|
|
<span className="text-sm text-foreground">{c.label}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
<textarea
|
|
value={reason}
|
|
onChange={(e) => setReason(e.target.value)}
|
|
rows={2}
|
|
maxLength={2000}
|
|
placeholder="Add details (optional)"
|
|
className="mt-3 w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-base sm:text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
|
|
/>
|
|
<div className="mt-4 flex items-center justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
disabled={working}
|
|
className="h-10 px-4 rounded-md text-sm font-medium text-foreground hover:bg-muted transition-colors disabled:opacity-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={submit}
|
|
disabled={working}
|
|
className="h-10 px-4 rounded-md text-sm font-medium bg-destructive text-white hover:bg-destructive/90 transition-colors disabled:opacity-60"
|
|
>
|
|
{working ? "Submitting…" : "Submit report"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ───────────────────────────────────────────────────────────────────────────
|
|
|
|
function Avatar({ src, name }: { src: string | null; name: string }) {
|
|
if (src) {
|
|
return (
|
|
<Image
|
|
src={src}
|
|
alt={name}
|
|
width={36}
|
|
height={36}
|
|
className="size-9 shrink-0 rounded-full object-cover ring-1 ring-foreground/10"
|
|
unoptimized
|
|
/>
|
|
);
|
|
}
|
|
const initials =
|
|
name
|
|
.replace(/^@/, "")
|
|
.split(/\s+/)
|
|
.map((p) => p[0])
|
|
.slice(0, 2)
|
|
.join("")
|
|
.toUpperCase() || "?";
|
|
return (
|
|
<div className="size-9 shrink-0 rounded-full bg-primary/15 text-primary flex items-center justify-center text-xs font-semibold ring-1 ring-foreground/10">
|
|
{initials}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Compact relative time ("just now", "5m ago", "3h ago", "2d ago"). */
|
|
function timeAgo(iso: string): string {
|
|
const then = new Date(iso).getTime();
|
|
if (Number.isNaN(then)) return "";
|
|
const secs = Math.max(0, Math.floor((Date.now() - then) / 1000));
|
|
if (secs < 45) return "just now";
|
|
const mins = Math.floor(secs / 60);
|
|
if (mins < 60) return `${mins}m ago`;
|
|
const hours = Math.floor(mins / 60);
|
|
if (hours < 24) return `${hours}h ago`;
|
|
const days = Math.floor(hours / 24);
|
|
if (days < 7) return `${days}d ago`;
|
|
return new Date(iso).toLocaleDateString();
|
|
}
|