From a26da28da388cd731462969a0bc72db4fdeb777d Mon Sep 17 00:00:00 2001
From: zhixian <zhixian@bunker.local>
Date: Tue, 17 Feb 2026 01:38:38 +0900
Subject: [PATCH] feat: migrate DiffViewer + RecipeCard to shadcn components

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/DiffViewer.tsx |  8 +++++---
 src/components/RecipeCard.tsx | 37 +++++++++++++++++++++++------------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/components/DiffViewer.tsx b/src/components/DiffViewer.tsx
index 88e4e61..ea02a73 100644
--- a/src/components/DiffViewer.tsx
+++ b/src/components/DiffViewer.tsx
@@ -1,7 +1,9 @@
+import { ScrollArea } from "@/components/ui/scroll-area";
+
 export function DiffViewer({ value }: { value: string }) {
   return (
-    <pre className="diff-viewer">
-      {value}
-    </pre>
+    <ScrollArea className="max-h-[260px] rounded-lg bg-[#0b0f20] p-3">
+      <pre className="text-sm text-text-main whitespace-pre-wrap">{value}</pre>
+    </ScrollArea>
   );
 }
diff --git a/src/components/RecipeCard.tsx b/src/components/RecipeCard.tsx
index 359047a..c18d68b 100644
--- a/src/components/RecipeCard.tsx
+++ b/src/components/RecipeCard.tsx
@@ -1,19 +1,30 @@
 import type { Recipe } from "../lib/types";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 
 export function RecipeCard({ recipe, onInstall }: { recipe: Recipe; onInstall: (id: string) => void }) {
   return (
-    <article className="recipe-card">
-      <h3>{recipe.name}</h3>
-      <p>{recipe.description}</p>
-      <div className="meta">
-        {recipe.tags.map((t) => (
-          <span key={t} className="tag">
-            {t}
-          </span>
-        ))}
-      </div>
-      <p>Impact: {recipe.impactCategory}</p>
-      <button onClick={() => onInstall(recipe.id)}>Install</button>
-    </article>
+    <Card className="bg-panel border-border-subtle">
+      <CardHeader>
+        <CardTitle className="text-text-main">{recipe.name}</CardTitle>
+        <CardDescription>{recipe.description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-wrap gap-1.5 mb-2">
+          {recipe.tags.map((t) => (
+            <Badge key={t} variant="secondary" className="bg-btn-bg border-btn-border text-text-main/80">
+              {t}
+            </Badge>
+          ))}
+        </div>
+        <p className="text-sm text-text-main/70">Impact: {recipe.impactCategory}</p>
+      </CardContent>
+      <CardFooter>
+        <Button onClick={() => onInstall(recipe.id)} className="bg-btn-bg border border-btn-border text-text-main hover:bg-accent-blue/15">
+          Install
+        </Button>
+      </CardFooter>
+    </Card>
   );
 }