103 lines
4.3 KiB
TypeScript
103 lines
4.3 KiB
TypeScript
import React from 'react';
|
|
import { ProjectHistoryItem } from './types';
|
|
import './SessionBrowser.css';
|
|
import { Plus, FileText } from 'lucide-react';
|
|
|
|
interface SessionBrowserProps {
|
|
sessions: ProjectHistoryItem[];
|
|
onLoadSession: (projectId: string) => void;
|
|
onDeleteSession: (projectId: string) => void;
|
|
onStartNew: () => void;
|
|
}
|
|
|
|
const SessionBrowser: React.FC<SessionBrowserProps> = ({ sessions, onLoadSession, onDeleteSession, onStartNew }) => {
|
|
|
|
const getCategoryIcon = (category: string) => {
|
|
// Return an icon based on the category, default to a generic robot
|
|
if (!category) return '🤖';
|
|
const cat = category.toLowerCase();
|
|
|
|
if (cat.includes('reinigung') || cat.includes('cleaning')) return '🧹';
|
|
if (cat.includes('service') || cat.includes('kellner')) return '🛎️';
|
|
if (cat.includes('transport') || cat.includes('logistik') || cat.includes('logistics')) return '📦';
|
|
if (cat.includes('security') || cat.includes('sicherheit') || cat.includes('wach')) return '🛡️';
|
|
if (cat.includes('inspektion') || cat.includes('inspection')) return '🔍';
|
|
if (cat.includes('humanoid')) return '🦾';
|
|
if (cat.includes('drohne') || cat.includes('drone')) return '🚁';
|
|
if (cat.includes('rasen') || cat.includes('mower')) return '🌱';
|
|
|
|
return '🤖';
|
|
};
|
|
|
|
return (
|
|
<div className="session-browser">
|
|
<div className="browser-header">
|
|
<h2 className="flex items-center gap-2"><FileText size={28}/> Gespeicherte Sitzungen</h2>
|
|
<button onClick={onStartNew} className="start-new-btn">
|
|
<Plus size={16}/> Neue Analyse starten
|
|
</button>
|
|
</div>
|
|
|
|
{(!sessions || sessions.length === 0) ? (
|
|
<div className="empty-state">
|
|
<p>Keine gespeicherten Sitzungen gefunden.</p>
|
|
<button onClick={onStartNew} className="start-new-btn-secondary">
|
|
Jetzt eine neue Analyse starten
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="session-grid">
|
|
{sessions.map((session) => (
|
|
<div key={session.id} className="session-card group">
|
|
{/* Left Column: Icon & Title */}
|
|
<div className="card-header">
|
|
<div className="category-badge" title={session.productCategory}>
|
|
{getCategoryIcon(session.productCategory)}
|
|
</div>
|
|
<div className="card-title-container">
|
|
<h3 className="card-title" title={session.productName}>{session.productName || 'Unbenanntes Projekt'}</h3>
|
|
<div className="card-date">
|
|
<span className="text-xs text-slate-400">Updated:</span>
|
|
{new Date(session.updated_at).toLocaleDateString()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Middle Column: Description & Meta */}
|
|
<div className="card-content">
|
|
<p className="product-description">
|
|
{session.productDescription && session.productDescription !== "No description available."
|
|
? session.productDescription
|
|
: <span className="italic text-slate-400">Keine Beschreibung verfügbar.</span>}
|
|
</p>
|
|
|
|
<div className="card-meta">
|
|
{session.sourceUrl && session.sourceUrl !== "No source URL found." && (
|
|
<a href={session.sourceUrl} target="_blank" rel="noopener noreferrer" className="source-link">
|
|
🔗 Link zur Quelle
|
|
</a>
|
|
)}
|
|
<span className="text-slate-400">•</span>
|
|
<span className="text-slate-500">{session.productCategory || 'Unkategorisiert'}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Actions */}
|
|
<div className="card-actions">
|
|
<button onClick={() => onLoadSession(session.id)} className="load-btn">
|
|
Öffnen
|
|
</button>
|
|
<button onClick={() => onDeleteSession(session.id)} className="delete-btn" title="Löschen">
|
|
Löschen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SessionBrowser;
|