Erster Commit

frontend/src/components/DetailsPanel.tsx

@@ -0,0 +1,71 @@
+import type { ObjectMeta, Sentence } from '../types'
+
+interface Props {
+  obj: ObjectMeta | null
+  objects: ObjectMeta[]
+  sentences: Sentence[]
+}
+
+function DetailRow({ label, value }: { label: string; value?: string }) {
+  return (
+    <div className="sidebar-row">
+      <label>{label}</label>
+      <div className="detail-value">{value || ''}</div>
+    </div>
+  )
+}
+
+export default function DetailsPanel({ obj, objects, sentences }: Props) {
+  const latestSentence = sentences.length > 0 ? sentences[sentences.length - 1] : null
+
+  const parentDisplay = obj?.parent_id
+    ? (() => {
+        const parent = objects.find(o => o.id === obj.parent_id)
+        return parent ? `${parent.index} - ${parent.title_de || 'ohne Titel'}` : ''
+      })()
+    : ''
+
+  return (
+    <>
+      <div className="sidebar-section">
+        <h2>Details</h2>
+        <DetailRow label="Titel" value={obj?.title_de} />
+        <DetailRow label="Position" value={obj?.position_de} />
+        <DetailRow label="Status (sitzt/schwimmt/segelt)" value={obj?.action_de} />
+        <DetailRow label="Zustand (alt/jung/rostig)" value={obj?.condition_de} />
+        <DetailRow label="Hierarchie" value={obj?.hierarchy != null ? String(obj.hierarchy) : ''} />
+        <div className="sidebar-row">
+          <label>Gehört zu (Parent-Index)</label>
+          <div className="detail-value">{parentDisplay}</div>
+        </div>
+      </div>
+
+      <div className="sidebar-section">
+        <h2>KI-Details</h2>
+        <DetailRow label="Label (EN)" value={obj?.label_en} />
+        <DetailRow label="Label (DE)" value={obj?.label_de} />
+        <DetailRow label="Label (SE)" value={obj?.label_se} />
+        <DetailRow label="Farbe (EN)" value={obj?.color_en} />
+        <DetailRow label="Adjektiv (EN)" value={obj?.adjective_en} />
+        <DetailRow label="Action Verb (EN)" value={obj?.action_verb_en} />
+        <DetailRow label="Präposition (EN)" value={obj?.preposition_en} />
+        <DetailRow label="Relative Position (EN)" value={obj?.relative_position_en} />
+        <DetailRow label="Season (EN)" value={obj?.season_en} />
+      </div>
+
+      <div className="sidebar-section">
+        <h2>KI-Sentence</h2>
+        <h3 style={{ fontSize: '0.9rem', marginTop: 0, marginBottom: 8, color: '#475569' }}>
+          Einfach (für Kinder)
+        </h3>
+        <DetailRow label="Question (EN)" value={latestSentence?.question_simple_en} />
+        <DetailRow label="Answer (EN)" value={latestSentence?.answer_simple_en} />
+        <h3 style={{ fontSize: '0.9rem', marginTop: 12, marginBottom: 8, color: '#475569' }}>
+          Fortgeschritten
+        </h3>
+        <DetailRow label="Question (EN)" value={latestSentence?.question_advanced_en} />
+        <DetailRow label="Answer (EN)" value={latestSentence?.answer_advanced_en} />
+      </div>
+    </>
+  )
+}