From c14fe28281ce5130b5155277d12cd6b6063397f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= <alejandrogomez@bitrefill.com>
Date: Mon, 15 Dec 2025 13:30:50 +0100
Subject: [PATCH] ui: consistent snippet styles

---
 .../nostr/kinds/CodeSnippetRenderer.tsx       | 67 +++++++++++++++++--
 1 file changed, 60 insertions(+), 7 deletions(-)

diff --git a/src/components/nostr/kinds/CodeSnippetRenderer.tsx b/src/components/nostr/kinds/CodeSnippetRenderer.tsx
index e98d08b..0c6da4b 100644
--- a/src/components/nostr/kinds/CodeSnippetRenderer.tsx
+++ b/src/components/nostr/kinds/CodeSnippetRenderer.tsx
@@ -9,6 +9,59 @@ import {
   getCodeDescription,
 } from "@/lib/nip-c0-helpers";
 import { Label } from "@/components/ui/Label";
+import { SyntaxHighlight } from "@/components/SyntaxHighlight";
+
+// Map common language names to Prism-supported languages
+function mapLanguage(
+  lang: string | null | undefined,
+):
+  | "javascript"
+  | "typescript"
+  | "jsx"
+  | "tsx"
+  | "bash"
+  | "json"
+  | "markdown"
+  | "css"
+  | "python"
+  | "yaml"
+  | "diff" {
+  if (!lang) return "javascript";
+
+  const normalized = lang.toLowerCase();
+
+  // Direct matches
+  if (
+    [
+      "javascript",
+      "typescript",
+      "jsx",
+      "tsx",
+      "bash",
+      "json",
+      "markdown",
+      "css",
+      "python",
+      "yaml",
+      "diff",
+    ].includes(normalized)
+  ) {
+    return normalized as any;
+  }
+
+  // Common aliases
+  const aliases: Record<string, string> = {
+    js: "javascript",
+    ts: "typescript",
+    sh: "bash",
+    shell: "bash",
+    py: "python",
+    md: "markdown",
+    yml: "yaml",
+  };
+
+  return (aliases[normalized] as any) || "javascript";
+}
 
 /**
  * Renderer for Kind 1337 - Code Snippet (NIP-C0)
@@ -19,10 +72,11 @@ export function Kind1337Renderer({ event }: BaseEventProps) {
   const language = getCodeLanguage(event);
   const description = getCodeDescription(event);
 
-  // Get first 3-5 lines for preview
+  // Get first 5 lines for preview
   const codeLines = event.content.split("\n");
   const previewLines = codeLines.slice(0, 5);
   const hasMore = codeLines.length > 5;
+  const previewCode = previewLines.join("\n") + (hasMore ? "\n..." : "");
 
   return (
     <BaseEventContainer event={event}>
@@ -54,12 +108,11 @@ export function Kind1337Renderer({ event }: BaseEventProps) {
 
         {/* Code Preview */}
         <div className="relative">
-          <pre className="text-xs font-mono bg-muted p-3 border border-border overflow-x-auto">
-            <code className="line-clamp-5">
-              {previewLines.join("\n")}
-              {hasMore && "\n..."}
-            </code>
-          </pre>
+          <SyntaxHighlight
+            code={previewCode}
+            language={mapLanguage(language)}
+            className="overflow-x-auto bg-muted/30 p-3 border border-border"
+          />
         </div>
       </div>
     </BaseEventContainer>