Initialize PromptArch: The Prompt Enhancer (Fork of ClavixDev/Clavix)

components/HistoryPanel.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import useStore from "@/lib/store";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Clock, Trash2, RotateCcw } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export default function HistoryPanel() {
+  const { history, setCurrentPrompt, clearHistory } = useStore();
+
+  const handleRestore = (prompt: string) => {
+    setCurrentPrompt(prompt);
+  };
+
+  const handleClear = () => {
+    if (confirm("Are you sure you want to clear all history?")) {
+      clearHistory();
+    }
+  };
+
+  if (history.length === 0) {
+    return (
+      <Card>
+        <CardContent className="flex h-[400px] items-center justify-center">
+          <div className="text-center">
+            <Clock className="mx-auto h-12 w-12 text-muted-foreground/50" />
+            <p className="mt-4 text-muted-foreground">No history yet</p>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Start enhancing prompts to see them here
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex-row items-center justify-between">
+        <div>
+          <CardTitle>History</CardTitle>
+          <CardDescription>{history.length} items</CardDescription>
+        </div>
+        <Button variant="outline" size="icon" onClick={handleClear}>
+          <Trash2 className="h-4 w-4" />
+        </Button>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {history.map((item) => (
+          <div
+            key={item.id}
+            className="rounded-md border bg-muted/30 p-4 transition-colors hover:bg-muted/50"
+          >
+            <div className="mb-2 flex items-center justify-between">
+              <span className="text-xs text-muted-foreground">
+                {new Date(item.timestamp).toLocaleString()}
+              </span>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6"
+                onClick={() => handleRestore(item.prompt)}
+              >
+                <RotateCcw className="h-3 w-3" />
+              </Button>
+            </div>
+            <p className="line-clamp-3 text-sm">{item.prompt}</p>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}