v2: global player, infinite scroll, image picker, threaded comments

src/components/DumpCard.tsx

@@ -4,6 +4,7 @@ import { relativeTime } from "../utils/relativeTime.ts";
 import FilePreview from "./FilePreview.tsx";
 import RichContentCard from "./RichContentCard.tsx";
 import { VoteButton } from "./VoteButton.tsx";
+import { Markdown } from "./Markdown.tsx";
 
 interface DumpCardProps {
   dump: Dump;
@@ -13,10 +14,11 @@ interface DumpCardProps {
   castVote: (id: string) => void;
   removeVote: (id: string) => void;
   className?: string;
+  isOwner?: boolean;
 }
 
 export function DumpCard(
-  { dump, voteCount, voted, canVote, castVote, removeVote, className }:
+  { dump, voteCount, voted, canVote, castVote, removeVote, className, isOwner }:
     DumpCardProps,
 ) {
   const navigate = useNavigate();
@@ -46,14 +48,26 @@ export function DumpCard(
           >
             {dump.title}
           </Link>
-          {dump.comment && <p className="dump-card-comment">{dump.comment}</p>}
-          <time
-            className="dump-card-date"
-            dateTime={dump.createdAt.toISOString()}
-            title={dump.createdAt.toLocaleString()}
-          >
-            {relativeTime(dump.createdAt)}
-          </time>
+          {dump.comment && (
+            <Markdown className="dump-card-comment" inline>{dump.comment}</Markdown>
+          )}
+          <div className="dump-card-meta">
+            <time
+              className="dump-card-date"
+              dateTime={dump.createdAt.toISOString()}
+              title={dump.createdAt.toLocaleString()}
+            >
+              {relativeTime(dump.createdAt)}
+            </time>
+            {dump.commentCount > 0 && (
+              <span className="dump-card-comment-count">
+                {dump.commentCount} {dump.commentCount === 1 ? "comment" : "comments"}
+              </span>
+            )}
+            {dump.isPrivate && isOwner && (
+              <span className="dump-card-private-badge">private</span>
+            )}
+          </div>
         </div>
 
         <div className="dump-card-vote" onClick={(e) => e.stopPropagation()}>