Merge pull request #79 from r4topunk/feat/feed-propdate-media

feat(feed): clean propdate card + exact detail link + media auto-embed

Author: r4topunk

src/components/common/Markdown.tsx

@@ -9,6 +9,7 @@ import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import rehypeSlug from "rehype-slug";
 import remarkBreaks from "remark-breaks";
 import remarkGfm from "remark-gfm";
+import { classifyMediaUrl } from "@/lib/markdown-media";
 import { cn } from "@/lib/utils";
 
 interface MarkdownProps {
@@ -65,15 +66,48 @@ export function Markdown({ children, className }: MarkdownProps) {
           ],
         ]}
         components={((): Components => ({
-          a({ className, ...props }) {
+          a({ className, href, children, node: _node, ...props }) {
+            void _node;
+            const url = typeof href === "string" ? href : undefined;
+            const kind = classifyMediaUrl(url);
+            if (url && kind === "image") {
+              return (
+                <a href={url} target="_blank" rel="noopener noreferrer">
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    src={url}
+                    alt={typeof children === "string" ? children : ""}
+                    loading="lazy"
+                    className="rounded-md border mx-auto my-2 max-h-[460px] w-auto max-w-full"
+                  />
+                </a>
+              );
+            }
+            if (url && kind === "video") {
+              return (
+                <video
+                  src={url}
+                  controls
+                  playsInline
+                  preload="metadata"
+                  className="rounded-md border mx-auto my-2 max-h-[460px] w-full"
+                />
+              );
+            }
+            if (url && kind === "audio") {
+              return <audio src={url} controls preload="metadata" className="my-2 w-full" />;
+            }
             return (
               <a
+                href={url}
                 className={cn(
                   "text-amber-400 underline decoration-amber-400/50 hover:decoration-amber-400",
                   className,
                 )}
                 {...props}
-              />
+              >
+                {children}
+              </a>
             );
           },
           img({ src, alt, ...props }) {

src/components/feed/GovernanceEventCard.tsx

@@ -23,6 +23,7 @@ import {
 } from "lucide-react";
 import { AddressDisplay } from "@/components/ui/address-display";
 import { Card, CardContent } from "@/components/ui/card";
+import { extractFirstMedia, stripMarkdown } from "@/lib/markdown-media";
 import type { FeedEvent } from "@/lib/types/feed-events";
 import { cn } from "@/lib/utils";
 
@@ -215,6 +216,8 @@ function ProposalUpdatedContent({
   // Builder propdate enum: 0 = original/update, 1 = reply. Anything else
   // falls back to "update" wording so future enum additions don't crash.
   const isReply = event.messageType === 1;
+  const media = extractFirstMedia(event.message);
+  const snippet = stripMarkdown(event.message ?? "", 160);
   return (
     <div className="space-y-1.5">
       <div className="flex items-center gap-1 text-xs text-muted-foreground">
@@ -233,10 +236,30 @@ function ProposalUpdatedContent({
           Proposal #{event.proposalNumber}
         </Link>
       </div>
-      {event.message && (
-        <p className="text-xs italic text-muted-foreground border-l-2 border-muted pl-2 line-clamp-3">
-          {event.message}
-        </p>
+      {(media || snippet) && (
+        <div className="flex gap-2 border-l-2 border-muted pl-2">
+          {media?.kind === "image" && (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={media.url}
+              alt=""
+              loading="lazy"
+              className="h-16 w-16 flex-shrink-0 rounded-md border object-cover"
+            />
+          )}
+          {media?.kind === "video" && (
+            <video
+              src={media.url}
+              muted
+              playsInline
+              preload="metadata"
+              className="h-16 w-16 flex-shrink-0 rounded-md border object-cover"
+            />
+          )}
+          {snippet && (
+            <p className="text-xs italic text-muted-foreground line-clamp-3">{snippet}</p>
+          )}
+        </div>
       )}
     </div>
   );
@@ -357,7 +380,7 @@ function getEventDisplay(event: Extract<FeedEvent, { category: "governance" }>)
 
 function getEventLink(event: Extract<FeedEvent, { category: "governance" }>): string {
   if (event.type === "ProposalUpdated") {
-    return `/propdates#proposal-${event.proposalNumber}`;
+    return `/propdates/${event.transactionHash}`;
   }
   if ("proposalNumber" in event) {
     return `/proposals/${event.proposalNumber}`;

src/lib/markdown-media.ts

@@ -0,0 +1,64 @@
+const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "gif", "webp", "svg", "avif"] as const;
+const VIDEO_EXTENSIONS = ["mp4", "webm", "mov", "m4v", "ogv"] as const;
+const AUDIO_EXTENSIONS = ["mp3", "wav", "ogg", "m4a", "flac"] as const;
+
+export type MediaKind = "image" | "video" | "audio";
+
+export function classifyMediaUrl(url: string | undefined | null): MediaKind | null {
+  if (!url) return null;
+  let pathname: string;
+  try {
+    pathname = new URL(url, "https://placeholder.local").pathname;
+  } catch {
+    return null;
+  }
+  const lower = pathname.toLowerCase();
+  const ext = lower.split(".").pop();
+  if (!ext) return null;
+  if ((IMAGE_EXTENSIONS as readonly string[]).includes(ext)) return "image";
+  if ((VIDEO_EXTENSIONS as readonly string[]).includes(ext)) return "video";
+  if ((AUDIO_EXTENSIONS as readonly string[]).includes(ext)) return "audio";
+  return null;
+}
+
+export interface MediaMatch {
+  url: string;
+  kind: MediaKind;
+}
+
+const IMAGE_MARKDOWN = /!\[[^\]]*\]\((https?:\/\/[^)\s]+)\)/;
+const LINK_MARKDOWN = /\[[^\]]*\]\((https?:\/\/[^)\s]+)\)/g;
+const BARE_URL = /(https?:\/\/[^\s)]+)/g;
+
+export function extractFirstMedia(markdown: string | undefined | null): MediaMatch | null {
+  if (!markdown) return null;
+
+  const img = markdown.match(IMAGE_MARKDOWN);
+  if (img?.[1]) {
+    const kind = classifyMediaUrl(img[1]) ?? "image";
+    return { url: img[1], kind };
+  }
+
+  for (const match of markdown.matchAll(LINK_MARKDOWN)) {
+    const kind = classifyMediaUrl(match[1]);
+    if (kind) return { url: match[1], kind };
+  }
+
+  for (const match of markdown.matchAll(BARE_URL)) {
+    const kind = classifyMediaUrl(match[1]);
+    if (kind) return { url: match[1], kind };
+  }
+
+  return null;
+}
+
+export function stripMarkdown(markdown: string, maxLength = 180): string {
+  const withoutImages = markdown.replace(/!\[[^\]]*\]\([^)]+\)/g, "");
+  const withoutLinks = withoutImages.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1");
+  const withoutMarks = withoutLinks
+    .replace(/[#>*_`~]+/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+  if (withoutMarks.length <= maxLength) return withoutMarks;
+  return `${withoutMarks.slice(0, maxLength).trimEnd()}…`;
+}