feat: complete history, attendees list, and smart templates

src/components/HistoryView.tsx

@@ -0,0 +1,67 @@
+import { FileText, Trash2, Calendar } from 'lucide-react';
+
+interface HistoryItem {
+    id: string;
+    date: string;
+    transcription: string; // This might be raw text or path?
+    summary: string;
+    subject?: string;
+    filename?: string;
+}
+
+interface HistoryViewProps {
+    history: HistoryItem[];
+    onLoad: (item: HistoryItem) => void;
+    onDelete: (id: string) => void;
+}
+
+export default function HistoryView({ history, onLoad, onDelete }: HistoryViewProps) {
+    return (
+        <div className="flex flex-col w-full h-full bg-background p-6">
+            <h1 className="text-2xl font-bold mb-6 flex items-center gap-2">
+                <FileText className="w-8 h-8" />
+                Recording History
+            </h1>
+
+            {history.length === 0 ? (
+                <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
+                    <FileText size={48} className="mb-4 opacity-20" />
+                    <p>No history found.</p>
+                </div>
+            ) : (
+                <div className="flex-1 overflow-y-auto space-y-3 pr-2">
+                    {history.map(item => (
+                        <div key={item.id} className="bg-card border border-border rounded-xl p-4 hover:shadow-md transition-all group">
+                            <div className="flex justify-between items-start">
+                                <div
+                                    className="flex-1 cursor-pointer"
+                                    onClick={() => onLoad(item)}
+                                >
+                                    <h3 className="text-lg font-semibold group-hover:text-primary transition-colors mb-1">
+                                        {item.subject || "Untitled Recording"}
+                                    </h3>
+                                    <div className="flex items-center gap-2 text-xs text-muted-foreground mb-2">
+                                        <Calendar size={12} />
+                                        {item.date}
+                                        {item.filename && <span className="bg-secondary px-1.5 py-0.5 rounded text-[10px] font-mono">{item.filename}</span>}
+                                    </div>
+                                    <p className="text-sm text-foreground/70 line-clamp-2">
+                                        {item.summary ? item.summary.substring(0, 150) + "..." : "No summary available."}
+                                    </p>
+                                </div>
+
+                                <button
+                                    onClick={(e) => { e.stopPropagation(); onDelete(item.id); }}
+                                    className="text-muted-foreground hover:text-destructive p-2 rounded-lg hover:bg-destructive/10 transition-colors opacity-0 group-hover:opacity-100"
+                                    title="Delete"
+                                >
+                                    <Trash2 size={18} />
+                                </button>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}