68 lines
3.1 KiB
TypeScript
68 lines
3.1 KiB
TypeScript
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>
|
|
);
|
|
}
|