Floke
84fc0b91b0
- Fixed TypeError in SessionBrowser by adding defensive checks for the sessions array. - Implemented mandatory URL persistence: The research URL is now saved in DB, shown in UI, and included in reports. - Added 'Start New Analysis' button to the session browser for better UX flow. - Updated documentation to reflect v2.6.1 changes.
82 lines
3.0 KiB
TypeScript
82 lines
3.0 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 '🤖';
|
||
switch (category.toLowerCase()) {
|
||
case 'reinigungsroboter':
|
||
return '🧹';
|
||
case 'serviceroboter':
|
||
return '🛎️';
|
||
case 'transportroboter':
|
||
return '📦';
|
||
case 'security roboter':
|
||
return '🛡️';
|
||
default:
|
||
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">
|
||
<div className="card-header">
|
||
<span className="category-icon">{getCategoryIcon(session.productCategory)}</span>
|
||
<h3 title={session.productName}>{session.productName || 'Unbenannt'}</h3>
|
||
</div>
|
||
<div className="thumbnail-placeholder">
|
||
<span>🖼️</span>
|
||
<p>Thumbnail</p>
|
||
</div>
|
||
<div className="card-content">
|
||
<p className="product-description">{session.productDescription || 'Keine Beschreibung verfügbar.'}</p>
|
||
<p className="source-url">
|
||
<a href={session.sourceUrl} target="_blank" rel="noopener noreferrer">
|
||
Quelle anzeigen
|
||
</a>
|
||
</p>
|
||
<p className="last-updated">Zuletzt bearbeitet: {new Date(session.updated_at).toLocaleString()}</p>
|
||
</div>
|
||
<div className="card-actions">
|
||
<button onClick={() => onLoadSession(session.id)} className="load-btn">Laden</button>
|
||
<button onClick={() => onDeleteSession(session.id)} className="delete-btn">Löschen</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default SessionBrowser;
|